/* Security & Privacy Overview — page-specific styles.
   Reuses landing.css + verticals.css for nav/section/table/cta/footer.
   This file styles the readable "document" body and, crucially, the print
   rules that turn the same page into the downloadable PDF (one source for
   both). All colors are theme tokens so light and dark both work on screen;
   the PDF is generated in light theme by scripts/build-security-overview-pdf.js. */

/* --- Hero (compact, centered) --- */
.sec-hero {
  text-align: center;
  padding: 56px 20px 26px;
}
.sec-hero .v-hero-eyebrow { justify-content: center; }
.sec-hero .hero-title { margin: 14px auto 0; max-width: 16ch; }
.sec-hero .hero-sub { margin: 16px auto 0; max-width: 62ch; }
.sec-hero .hero-cta { justify-content: center; margin-top: 24px; }

/* --- The document --- */
.sec-doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 20px 24px;
}

.sec-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
  font-size: 13px;
  color: var(--text-soft);
}
.sec-meta strong { color: var(--text); font-size: 15px; }

.sec-section { margin-top: 32px; }
.sec-section > h2 {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--text);
}
.sec-section > p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-soft);
}
.sec-lead {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--text) !important;
}
.sec-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-mute);
}

/* --- Stays vs. receives, two columns --- */
.sec-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}
.sec-col {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  background: var(--bg-elev);
}
.sec-col-stay {
  background: color-mix(in srgb, var(--success) 7%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--success) 28%, var(--border));
}
.sec-col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--text);
}
.sec-col-stay h3 svg { color: var(--success); }
.sec-col-send h3 svg { color: var(--text-soft); }
.sec-col ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
}
.sec-col ul li { margin: 4px 0; }

/* --- Subprocessor table: emphasize the "Never" column --- */
.sec-table tbody td:last-child {
  font-weight: 600;
  color: var(--success);
}

/* --- Compliance posture (definition list, no edge stripes) --- */
.sec-defs { margin: 4px 0 0; }
.sec-defs > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.sec-defs > div:first-child { border-top: 1px solid var(--border); }
.sec-defs dt {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
}
.sec-defs dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* --- Verify list --- */
.sec-verify {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-soft);
}
.sec-verify li { margin: 8px 0; }
.sec-verify strong { color: var(--text); }

/* --- Questionnaire --- */
.sec-qa { margin-top: 16px; }
.sec-qa-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.sec-qa-item:first-child { border-top: 1px solid var(--border); }
.sec-qa-item h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  color: var(--text);
}
.sec-qa-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

.sec-disclaimer {
  margin: 30px 0 0;
  padding-top: 16px;
  border-top: 2px solid var(--border);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-mute);
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .sec-cols { grid-template-columns: 1fr; }
}

/* ===========================================================================
   PRINT — the same page becomes the downloadable PDF.
   Strip the site chrome, neutralize entrance/reveal animations (so nothing
   renders at opacity:0 in headless Chromium), tighten spacing, and break the
   questionnaire onto its own page.
   =========================================================================== */
@media print {
  .nav,
  .footer,
  .sec-hero,
  .v-cta-row,
  [data-noprint] { display: none !important; }

  /* Defeat scroll-reveal + entrance animations in the static render. */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal],
  [data-reveal-group] > *,
  body.page-enter {
    opacity: 1 !important;
    transform: none !important;
  }

  html, body { background: #fff !important; }
  main { padding: 0 !important; margin: 0 !important; }

  .sec-doc {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .sec-meta { margin-bottom: 4px; }
  /* Let long sections flow across pages; only the small atomic blocks below
     (cards, definitions, verify items, Q&A items) avoid mid-item breaks. This
     fills each page instead of jumping a tall section to the next one. */
  .sec-section { margin-top: 18px; }
  .sec-section > h2 { break-after: avoid; }
  .sec-section > h2 { font-size: 15.5px; margin-bottom: 8px; }
  .sec-section > p { font-size: 11px; line-height: 1.5; margin-bottom: 8px; }
  .sec-lead { font-size: 11.5px !important; line-height: 1.5 !important; }
  .sec-col { padding: 12px 14px; }
  .sec-col h3 { font-size: 11.5px; margin-bottom: 7px; }
  .sec-col ul { font-size: 10.5px; line-height: 1.45; }
  .sec-col ul li { margin: 2px 0; }
  .sec-note { font-size: 10px; }

  .sec-defs > div { padding: 9px 0; break-inside: avoid; }
  .sec-defs dt { font-size: 11.5px; }
  .sec-defs dd { font-size: 10.5px; line-height: 1.45; }

  .sec-verify { font-size: 11px; line-height: 1.5; }
  .sec-verify li { margin: 5px 0; break-inside: avoid; }

  .compare-table { font-size: 10.5px; }
  .compare-table th, .compare-table td { padding: 6px 10px; }

  .sec-qa-item { padding: 9px 0; break-inside: avoid; }
  .sec-qa-item h3 { font-size: 11.5px; margin-bottom: 4px; }
  .sec-qa-item p { font-size: 10.5px; line-height: 1.45; }

  .sec-disclaimer { margin-top: 18px; padding-top: 10px; font-size: 9.5px; }
}