/* The dedicated security page (October 2026 redesign). The bar, the footer and the fonts come from chrome.css; this
   sheet is the page itself: a large title, the "At a glance" tiles, the document with a table of contents that
   follows the reader, and a dark closing strip. A prospect lands here from the "Security" entry of the menu and must
   feel on the same site as the home page. Kept in its own file because the page is generated by
   scripts/build-legal.mjs from docs/legal/security.md, and a template full of CSS is a template nobody reads. */
:root{--ink:#1d1d1f;--text:#424245;--muted:#6e6e73;--line:#e3e6ee;--paper:#f5f5f7;--blue:#0044fd;--mono:'Geist Mono',ui-monospace,Menlo,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#fff}
body{font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);font-weight:600;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.kicker{display:block;font:12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:13px 22px;font:500 15px/1 'Geist',ui-sans-serif,system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#e8e8ed}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:#fff}

/* ---------- the title ---------- */
.hero{padding:clamp(130px,15vw,190px) 0 clamp(56px,7vw,90px);text-align:center}
.hero h1{margin:18px auto 0;max-width:15em;font-size:clamp(38px,5.6vw,72px);letter-spacing:-.045em;line-height:1.03}
.hero h1 span{color:var(--blue)}
.hero .lead{max-width:720px;margin:22px auto 0;font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--muted)}
.hero-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:28px;font-size:14px;color:var(--muted)}
.hero-meta span{display:inline-flex;align-items:flex-start;gap:8px}
.hero-meta a{color:var(--blue);text-decoration:none}
.hero-meta a:hover{text-decoration:underline}
/* the dot stays beside the first line when the line wraps */
.pin{flex:none;width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--blue)}

/* ---------- at a glance ---------- */
.glance{background:var(--paper);padding:clamp(56px,7vw,90px) 0}
.glance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.glance-grid > div{background:#fff;border-radius:22px;padding:24px;border:1px solid var(--line)}
.glance-grid h3{display:flex;align-items:center;gap:10px;font-size:17px;letter-spacing:-.015em;margin-bottom:8px}
.glance-grid p{font-size:14.5px;line-height:1.5;color:var(--muted)}
.check{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:inline-grid;place-items:center;font-size:11px;font-weight:700}

/* ---------- the document, with its table of contents ---------- */
.body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:72px;padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px);align-items:start}
.toc{position:sticky;top:96px;font-size:14px}
.toc .kicker{margin-bottom:12px}
.toc a{display:block;padding:7px 0 7px 14px;color:var(--muted);text-decoration:none;border-left:2px solid var(--line);line-height:1.35}
.toc a:hover{color:var(--ink);border-color:var(--blue)}
.doc{max-width:760px}
.doc section{scroll-margin-top:90px}
.doc section + section{margin-top:52px;padding-top:44px;border-top:1px solid var(--line)}
.doc h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.035em;margin-bottom:18px}
.doc p{margin-bottom:16px;font-size:16.5px;text-wrap:pretty}
.doc p:last-child{margin-bottom:0}
.doc strong{color:var(--ink)}
.doc code{font-family:var(--mono);font-size:.86em;background:rgba(0,68,253,.06);padding:1px 6px;border-radius:5px;color:#00164e}
.doc ul{margin:0 0 16px 22px}
.doc li{margin-bottom:8px}
.doc a{color:var(--blue)}
.doc section.callout{border-top:0;border-radius:22px;background:var(--paper);padding:30px 32px}
.doc section.callout h2{font-size:24px}

/* ---------- closing strip ---------- */
.strip{background:#000;color:#a1a1a6;padding:clamp(80px,10vw,120px) 0;text-align:center}
.strip h2{color:#f5f5f7;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.04em}
.strip p{max-width:660px;margin:16px auto 0;font-size:17px;line-height:1.55}
.strip .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}

@media(max-width:900px){
  .body{grid-template-columns:1fr;gap:28px}
  .toc{position:static;display:flex;flex-wrap:wrap;gap:6px 8px}
  .toc .kicker{width:100%}
  .toc a{border-left:0;padding:6px 12px;border-radius:999px;background:var(--paper);font-size:13px}
}

/* Printed, or saved as PDF, the page is what gets attached to a questionnaire:
   the chrome goes, the text and the "at a glance" tiles stay. */
@media print{
  .nav,.site-foot,.strip,.toc,.hero-meta a{display:none}
  body{background:#fff;color:#000;font-size:11.5pt}
  .hero{padding:0 0 12pt;text-align:left}
  .hero h1{font-size:22pt;margin-left:0}
  .hero .lead{font-size:12pt;margin-left:0}
  .hero-meta{justify-content:flex-start}
  .glance{background:none;padding:8pt 0 0}
  .glance-grid{gap:8pt 18pt}
  .glance-grid > div{border:0;padding:0}
  .body{grid-template-columns:1fr;padding:12pt 0 0}
  .doc section + section{margin-top:14pt;padding-top:12pt;break-inside:avoid}
  .doc h2{font-size:15pt}
  .doc section.callout{border-radius:0;background:none;border:1px solid #999}
  a{text-decoration:none;color:inherit}
}