/* aes-landing tokens v2. White canvas, one weight (500) for everything that speaks, gray 500 for body.
   Imagery does the colour: live shader tiles + a glass object. UI stays ink and white.
   Rules: zero em-dashes, no vendor names in visible copy, no invented numbers, one CTA label ("Start"). */

/* inter-var-full.woff2 is subset to Latin (perf-4, round 7 of _spec/attack-2026-09-19.md 5): pyftsubset
   --unicodes=U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,
   U+FEFF,U+FFFD (the standard "Latin" range) against every character actually shipped across every
   .html/.js/.md file in the repo, plus general punctuation for the em/en dashes, curly quotes and
   ellipsis that CP-24 wants gone but has not yet — 352 KB to 96.9 KB, glyphs 2937 to 756, fvar/gvar/HVAR
   (the 100-900 weight axis) and every OpenType feature preserved. Replaced in place, same path and same
   family name, so main.html's and this file's own preload links keep working with no edit. Needs
   widening if a page ever ships the Spanish B20 promises but never built, or any script beyond Latin. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 700;font-display:swap;src:url('../assets/fonts/inter-var-full.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/jbmono-var.woff2') format('woff2')}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22.5%;line-gap-override:0%}

:root{
  --bg:#FFFFFF;--bg-2:#F7F7F8;--bg-3:#EDEDEF;
  /* --text-3 is the colour of every 11..15 px secondary line, so it must clear AA 4.5:1 on the
     darkest ground it ever sits on: #FFFFFF 5.35, --bg-2 5.00, --bg-3 4.58, --accent-tint 4.66.
     Never lighten it past #6A6A73. */
  --ink:#0D0D0D;--text-2:#5D5D66;--text-3:#6A6A73;
  --line:#E6E6E8;--line-control:#8A8A93;
  --accent:#2457FF;--accent-tint:#EAEFFF;--err:#B42318;
  --r-tile:24px;--r-card:16px;--r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --maxw:1440px;--gutter:clamp(20px,4vw,56px);--sec:clamp(88px,10vw,160px);
  --font-sans:'Inter','Inter Fallback',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --nav-h:64px;
  /* glass. One recipe, four surfaces: --glass is a tile over the field, --glass-2 a card inside a tile,
     --glass-ink the dark twin, --glass-edge the hairline a light card needs on a light ground. The white
     --glass-line is for glass that sits on imagery. Blur only on tile-level surfaces; cards inside them
     take the tint without the filter, because thirty blurred rows on one screen is a real cost. */
  --glass:rgba(255,255,255,.72);--glass-2:rgba(255,255,255,.64);--glass-ink:rgba(13,13,13,.78);
  --glass-line:rgba(255,255,255,.7);--glass-line-ink:rgba(255,255,255,.12);--glass-edge:rgba(13,13,13,.06);
  --glass-blur:18px;--glass-sat:1.4;
  --glass-lift:0 20px 60px -30px rgba(10,10,20,.35);--glass-lift-sm:0 12px 34px -22px rgba(10,10,20,.28);
}
@media (prefers-reduced-transparency:reduce){
  :root{--glass:#FFFFFF;--glass-2:#FFFFFF;--glass-ink:#0D0D0D;--glass-line:#E6E6E8;--glass-edge:#E6E6E8;--glass-blur:0px;--glass-sat:1}
}
/* the two utilities every glass surface reduces to */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border:1px solid var(--glass-edge);box-shadow:var(--glass-lift-sm)}
.glass-ink{background:var(--glass-ink);color:#fff;-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-line-ink)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;font-family:var(--font-sans);font-size:17px;line-height:1.5;font-weight:500;color:var(--ink);background:var(--bg);overflow-x:hidden}
h1,h2,h3,p,ul,ol{margin:0}
a{color:inherit}
img,video,svg,canvas{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent-tint);color:var(--ink)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-48px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:10px;z-index:50}
.skip-link:focus{top:12px}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--font-mono);font-weight:400}

/* type: one weight, tight tracking, size does the hierarchy (the openai.com register) */
.h1{font-size:clamp(38px,5.2vw,72px);font-weight:500;letter-spacing:-.035em;line-height:1.04;max-width:18ch}
.h2{font-size:clamp(32px,3.6vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.08;max-width:20ch;margin-bottom:18px}
.lead{font-size:clamp(17px,1.35vw,20px);font-weight:500;color:var(--text-2);max-width:54ch;line-height:1.5;margin-bottom:clamp(36px,4vw,56px)}
.lead.center,.h1.center{margin-left:auto;margin-right:auto;text-align:center}
.micro{display:block;font-size:14px;color:var(--text-3);margin-top:12px;font-weight:500}

/* pills: the only UI chrome */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--r-pill);border:1px solid transparent;font-weight:500;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.pill:active{transform:scale(.98)}
.pill-ink{background:var(--ink);color:#fff}
.pill-ink:hover{background:#2a2a2e}
.pill-ghost{background:var(--bg-2);color:var(--ink);border-color:transparent}
.pill-ghost:hover{background:var(--bg-3)}
.pill.lg{height:48px;padding:0 24px;font-size:16px}
.pill.sm{height:32px;padding:0 12px;font-size:13px}

/* rect buttons: the apple register (used for account entry only) */
.rect{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border-radius:9px;font-weight:500;font-size:15px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:filter .2s var(--ease),transform .15s var(--ease);white-space:nowrap}
.rect:hover{filter:brightness(1.08)}
.rect:active{transform:scale(.98)}
.rect-blue{background:#0071E3;color:#fff}
.rect-black{background:var(--ink);color:#fff}
.rect-ghost{background:var(--bg-2);color:var(--ink)}
.rect.lg{height:46px;padding:0 20px;font-size:16px}