/* ═══════════════════════════════════════════════════════════════════════════
   AELIUS SHELL
   The landing page's design system, lifted verbatim so the subpages are the
   same site rather than a lookalike: tokens, reset, fixed nav, .wrap and the
   four-column footer. Every declaration here is a copy of the corresponding
   rule in landing.html, which stays the source of truth — if a token moves
   there, move it here too.

   This file deliberately does NOT import style.css or aelius-theme.css. Those
   two are the older chrome (blue #34495e navbar, glass cards forced on by
   class name) and mixing them re-introduces exactly what this replaces. A page
   links either the old pair or this file, never both.

   Companions: templates/_fonts.html (self-hosted faces + preload),
   templates/_nav.html, templates/_footer.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ TOKENS ═══════════════ */
:root{
  --bg:#05070B;
  --grid:rgba(226,236,248,.065);
  --axis:rgba(226,236,248,.22);
  --panel:rgba(255,255,255,.024);
  --panel-2:rgba(255,255,255,.04);
  --hair:rgba(226,236,248,.085);
  --hair-2:rgba(226,236,248,.16);
  --t1:#F2F6FB;
  --t2:#9AA7B8;
  --t3:#5F6B7A;
  --blue:#4E9EE8;
  --blue-2:#6FB2E8;
  --ice:#C7E1F8;
  --mute:#3E4A59;
  /* The landing page's blues. --cta-bg/--cta-ink are the pale pill it uses for
     its primary action; --link is the readable blue for small type on dark. */
  --cta-bg:#B9DCFA;
  --cta-ink:#0A3D91;
  --link:#63B0F2;
  --sans:'Geist',-apple-system,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);

  /* One radius system, three steps. --r surfaces, --r-s inlays, --r-x
     hairline; 100px is for interactive pills only. */
  --r:12px;
  --r-s:8px;
  --r-x:0px;

  /* Neutral elevation, tinted to the background hue, never a coloured glow. */
  --lift-1:0 1px 2px rgba(0,0,0,.5);
  --lift-2:0 12px 32px -12px rgba(0,0,0,.75);
  --lift-3:0 32px 72px -24px rgba(0,0,0,.85);
}

/* ═══════════════ RESET ═══════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
::selection{background:var(--blue);color:#04121F}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* no horizontal scroll, ever — wide things scroll inside their own boxes */
html,body{overflow-x:clip;max-width:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--t1);line-height:1.6;
  -webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img,canvas,svg{display:block;max-width:100%}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

/* ═══════════════ NAV ═══════════════ */
/* Scoped to .site-nav, never bare `nav`. A document page's table of contents
   is also a <nav> (correctly, for screen readers), and a bare selector turned
   it into a second fixed bar with z-index 100 sitting on top of the article.
   The landing page has exactly one <nav>, so this only shows up once the rules
   are shared. Any new <nav> on a page gets the site bar ONLY if it opts in. */
nav.site-nav{position:fixed;inset:0 0 auto 0;z-index:100;height:64px;display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(20px,4vw,44px);color:var(--t1);
  transition:background .35s var(--ease),border-color .35s}
nav.site-nav.lit{background:rgba(5,7,11,.72);border-bottom:1px solid var(--hair);
  backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px)}
.nav-brand{display:flex;align-items:center;gap:11px;font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.nav-brand img{width:27px;height:27px;border-radius:7px}
/* Section badge, the way /research labels itself in the brand lockup. */
.nav-brand .slash{color:var(--t3);font-weight:400}
.nav-brand .sec{color:var(--t2);font-weight:500}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{font-size:.87rem;font-weight:500;padding:8px 13px;border-radius:var(--r-s);color:var(--t2);
  transition:color .2s,background .2s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-signin{font-size:.87rem;font-weight:500;padding:8px 14px;border-radius:100px;color:var(--t2);
  transition:color .2s}
.nav-signin:hover{color:#fff}
.nav-cta{margin-left:8px;font-size:.87rem;font-weight:500;padding:10px 22px;border-radius:100px;
  background:var(--cta-bg);color:var(--cta-ink)!important;white-space:nowrap;
  transition:background .15s ease,transform .15s var(--ease)}
.nav-cta:hover{background:#fff}
.nav-cta:active{transform:scale(.98)}
.hbg{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:101;color:#fff}
.hbg span{width:22px;height:1.7px;background:currentColor;border-radius:2px;transition:all .3s var(--ease)}
.hbg.x span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
.hbg.x span:nth-child(2){opacity:0}
.hbg.x span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}

/* On the landing page the nav sits over a full-bleed hero and only lights up
   once you scroll. A document page has content directly under it, so it is
   lit from the start; pages that own a hero can remove this with .nav-auto. */
body:not(.nav-auto) nav.site-nav{background:rgba(5,7,11,.72);border-bottom:1px solid var(--hair);
  backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px)}

/* ═══════════════ LAYOUT ═══════════════ */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}

/* ═══════════════ FOOTER ═══════════════ */
/* The landing page's footer. Class names are its own (.fgrid/.fbrand/.fbot);
   the colours are the shell's tokens rather than the landing page's literals,
   so a subpage keeps its own palette instead of importing a second one.
   The old .ft-* rules were removed with the markup that used them — see the
   .bak-newlanding-* copy of this file if you need them back. */
footer{margin-top:40px;border-top:1px solid var(--hair);padding:44px 0 34px;
  color:var(--t3);font-size:.9rem}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:28px}
.fbrand{display:flex;align-items:center;gap:10px;color:var(--t1);font-weight:600;font-size:1.05rem}
.fbrand img{width:22px;height:22px;border-radius:6px}
footer h4{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.02em;
  color:var(--t1);margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:8px}
footer li a{color:var(--t3);transition:color .2s}
footer li a:hover{color:#fff}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;
  padding-top:20px;border-top:1px solid var(--hair);font-size:.82rem}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:1100px){
  .fgrid{grid-template-columns:1fr 1fr 1fr}
  .fgrid>div:first-child{grid-column:1/-1}
}
@media(max-width:720px){
  nav.site-nav{height:56px;padding:0 18px}
  .hbg{display:flex}
  .nav-links{position:fixed;inset:56px 0 auto 0;flex-direction:column;align-items:stretch;
    background:rgba(5,7,11,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    padding:0 14px;gap:2px;max-height:0;overflow:hidden;
    transition:max-height .4s var(--ease),padding .4s var(--ease)}
  .nav-links.open{max-height:70vh;padding:12px 14px 16px;border-bottom:1px solid var(--hair)}
  .nav-links a{padding:13px 14px;font-size:.98rem}
  .nav-cta{margin-left:0;text-align:center;margin-top:8px}
  .fgrid{grid-template-columns:1fr 1fr;gap:26px 16px}
  footer h4{font-size:.74rem}
  footer li a{font-size:.85rem}
  .fbot{flex-direction:column;align-items:flex-start;gap:8px;margin-top:30px}
  .nav-signin{padding:13px 14px;font-size:.98rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.05s!important}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENT PAGES  (.doc)
   Privacy, Terms, Ethics: long-form legal and policy text. One narrow column,
   a numbered contents list, hairline tables, colour only on links. Deliberately
   plain, the way Stripe, Anthropic, Vercel and OpenAI set out policy text.
   ═══════════════════════════════════════════════════════════════════════════ */
.doc{max-width:768px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
main.doc-main{padding:calc(64px + clamp(28px,5vw,56px)) 0 clamp(60px,8vw,110px)}

.doc h1{font-size:clamp(2rem,4.6vw,2.7rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.08;color:#fff;margin:0 0 14px}
.doc-dates{color:var(--t3);font-size:.85rem;line-height:1.8;margin:0 0 26px}
.doc-dates span{white-space:nowrap}
.doc-dates b{color:var(--t2);font-weight:500}

.doc-intro{border-top:1px solid var(--hair);padding-top:26px}
.doc-intro p{color:var(--t1);font-size:1rem}

.doc-toc{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  margin:32px 0 46px;padding:26px 0}
.doc-toc h2{font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t3);margin:0 0 18px}
.doc-toc ol{margin:0;padding-left:26px;font-size:.93rem;line-height:1.6;color:var(--t3)}
.doc-toc li{margin-bottom:9px}
.doc-toc li::marker{color:var(--t3)}
.doc-toc a{color:var(--t2);transition:color .2s}
.doc-toc a:hover{color:#fff}

.doc-s{margin:0 0 50px;scroll-margin-top:86px}
.doc h2{font-size:1.32rem;font-weight:700;letter-spacing:-.025em;color:#fff;margin:0 0 16px}
.doc h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;color:#fff;margin:30px 0 10px}
.doc p{color:var(--t2);font-size:.95rem;line-height:1.8;margin:0 0 15px}
.doc ul,.doc ol{color:var(--t2);font-size:.95rem;line-height:1.8;margin:0 0 15px;padding-left:24px}
.doc li{margin-bottom:8px}
.doc li::marker{color:var(--mute)}
.doc strong{color:var(--t1);font-weight:600}
.doc a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.doc a:hover{color:var(--blue-2)}
.doc code{font-family:var(--mono);font-size:.88em;color:var(--ice)}

/* Run-in lead sentences, where the old pages had a coloured alert box. The
   emphasis comes from the wording and a bold opening, not a background. */
.doc .lead{color:var(--t1)}

/* Contract language conventionally set in capitals stays in the ordinary flow
   of the document, as it does in a paper contract. */
.doc .caps{color:var(--t2);font-size:.87rem;line-height:1.85}

/* Tables: hairline rules only, no panel, no rounded corners. */
.doc-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 20px}
.doc table{width:100%;border-collapse:collapse;font-size:.9rem}
.doc-tw table{min-width:520px}
.doc thead th{color:var(--t1);font-size:.85rem;font-weight:600;text-align:left;
  padding:0 18px 10px 0;border-bottom:1px solid var(--hair-2)}
.doc tbody td{color:var(--t2);font-size:.9rem;line-height:1.7;vertical-align:top;
  padding:13px 18px 13px 0;border-bottom:1px solid var(--hair)}
.doc tbody tr:last-child td{border-bottom:0}
.doc th:last-child,.doc td:last-child{padding-right:0}
.doc tbody td strong{color:var(--t1)}

/* Definitions. */
.doc dl{margin:0 0 15px}
.doc dt{color:var(--t1);font-size:.95rem;font-weight:600;margin-top:18px}
.doc dl dt:first-of-type{margin-top:0}
.doc dd{color:var(--t2);font-size:.95rem;line-height:1.8;margin:5px 0 0}

.doc-end{border-top:1px solid var(--hair);padding-top:24px;margin-top:8px}

@media(max-width:720px){
  main.doc-main{padding:calc(56px + 30px) 0 70px}
  .doc-s{scroll-margin-top:74px}
}