/* Get Superintelligence: one stylesheet for every page. Tokens: docs/plans/2026-10-11-build-plan.md */

/* Self-hosted from Google Fonts, latin subset, SIL OFL 1.1: see /fonts/OFL.txt */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/inter-tight-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --paper:#F7F4EE;
  --ink:#111111;
  --ink-2:#4D4A45;
  --accent:#034DA8;
  --accent-hover:#023B82;
  --rule:#DDD6CA;
  --error:#9B1C1C;
  --font:'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --max:1120px;
  --gutter:clamp(16px, 4vw, 32px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1.125rem;line-height:1.6;font-weight:400}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-weight:500;line-height:1.1;letter-spacing:-0.02em;margin:0}
p,ol,ul,dl{margin:0}
strong{font-weight:500}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:0.2em}
a:hover{color:var(--accent-hover);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.wrap{width:min(100% - 2 * var(--gutter), var(--max));margin-inline:auto}
.skip{position:absolute;left:var(--gutter);top:-100px;background:var(--paper);padding:8px 12px;z-index:1}
.skip:focus{top:8px}

/* Header and footer */
.site-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;padding:20px 0;border-bottom:1px solid var(--rule)}
.wordmark{color:var(--ink);text-decoration:none;font-weight:500;font-size:1.25rem;letter-spacing:-0.01em}
.wordmark:hover{color:var(--ink)}
.site-nav ul{display:flex;flex-wrap:wrap;gap:4px 24px;list-style:none;padding:0}
.site-nav a{color:var(--ink);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--accent);text-decoration:underline}

.site-foot{margin-top:96px;padding:32px 0 48px;border-top:1px solid var(--rule);color:var(--ink-2);display:grid;gap:16px}
.site-foot ul{display:flex;flex-wrap:wrap;gap:4px 24px;list-style:none;padding:0}

/* Shared type */
.num{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:500}
.accent{color:var(--accent)}
.lede{font-size:clamp(1.1875rem, 1.6vw, 1.375rem);line-height:1.5;color:var(--ink);max-width:36em}
.muted{color:var(--ink-2)}

/* Home */
.hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "doors";padding-top:40px}
.hero-head{grid-area:head;display:grid;gap:20px;align-content:start}
.hero h1{font-size:clamp(40px, 7vw, 76px);letter-spacing:-0.03em;line-height:1;overflow-wrap:break-word;hyphens:manual}
.hero h1 > span{display:block}

/* The headline ticker: deliberately overdone. CSS only (the site runs no scripts). The words are
   aria-hidden; screen readers get the .sr-only sentence. A checkbox pauses it (WCAG 2.2.2), and it
   stands still for anyone who prefers reduced motion. */
.ticker{display:inline-block;position:relative;vertical-align:bottom;height:1.2em;overflow:hidden;font-size:clamp(26px, 10vw, 1em);
  padding:0 .18em;margin:.06em 0 .1em;color:#fff;background:var(--accent);
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px);
  border:.045em solid var(--ink);box-shadow:.08em .08em 0 var(--ink);transform:rotate(-1.5deg);
  text-shadow:0 0 .14em rgba(255,255,255,.45);letter-spacing:-.02em}
.ticker::after{content:"LIVE";position:absolute;top:.12em;right:.14em;font-size:max(11px, .13em);font-weight:500;letter-spacing:.12em;
  line-height:1;padding:.25em .4em;background:#fff;color:var(--ink);text-shadow:none;animation:blink 1.2s steps(2, start) infinite}
.ticker-track{display:flex;flex-direction:column;animation:tick 32s cubic-bezier(.5,0,.2,1) infinite}
.ticker-track span{display:block;height:1.2em;line-height:1.2em;white-space:nowrap}
@keyframes tick{0%{transform:translateY(0.00em)}5%{transform:translateY(0.00em)}5.938%{transform:translateY(-1.34em)}6.25%{transform:translateY(-1.20em)}11.25%{transform:translateY(-1.20em)}12.188%{transform:translateY(-2.54em)}12.5%{transform:translateY(-2.40em)}17.5%{transform:translateY(-2.40em)}18.438%{transform:translateY(-3.74em)}18.75%{transform:translateY(-3.60em)}23.75%{transform:translateY(-3.60em)}24.688%{transform:translateY(-4.94em)}25%{transform:translateY(-4.80em)}30%{transform:translateY(-4.80em)}30.938%{transform:translateY(-6.14em)}31.25%{transform:translateY(-6.00em)}36.25%{transform:translateY(-6.00em)}37.188%{transform:translateY(-7.34em)}37.5%{transform:translateY(-7.20em)}42.5%{transform:translateY(-7.20em)}43.438%{transform:translateY(-8.54em)}43.75%{transform:translateY(-8.40em)}48.75%{transform:translateY(-8.40em)}49.688%{transform:translateY(-9.74em)}50%{transform:translateY(-9.60em)}55%{transform:translateY(-9.60em)}55.938%{transform:translateY(-10.94em)}56.25%{transform:translateY(-10.80em)}61.25%{transform:translateY(-10.80em)}62.188%{transform:translateY(-12.14em)}62.5%{transform:translateY(-12.00em)}67.5%{transform:translateY(-12.00em)}68.438%{transform:translateY(-13.34em)}68.75%{transform:translateY(-13.20em)}73.75%{transform:translateY(-13.20em)}74.688%{transform:translateY(-14.54em)}75%{transform:translateY(-14.40em)}80%{transform:translateY(-14.40em)}80.938%{transform:translateY(-15.74em)}81.25%{transform:translateY(-15.60em)}86.25%{transform:translateY(-15.60em)}87.188%{transform:translateY(-16.94em)}87.5%{transform:translateY(-16.80em)}92.5%{transform:translateY(-16.80em)}93.438%{transform:translateY(-18.14em)}93.75%{transform:translateY(-18.00em)}98.75%{transform:translateY(-18.00em)}99.688%{transform:translateY(-19.34em)}100%{transform:translateY(-19.20em)}}
@keyframes blink{to{visibility:hidden}}
.tick-pause{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tick-pause:checked ~ h1 .ticker-track,.tick-pause:checked ~ h1 .ticker::after{animation-play-state:paused}
.tick-pause-label{justify-self:start;cursor:pointer;color:var(--accent);text-decoration:underline;text-underline-offset:.2em;font-size:1.125rem}
.tick-pause-label:hover{color:var(--accent-hover)}
.tick-pause:focus-visible ~ .tick-pause-label{outline:3px solid var(--accent);outline-offset:3px}
.tick-pause:checked ~ .tick-pause-label .when-playing,.tick-pause:not(:checked) ~ .tick-pause-label .when-paused{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){.ticker-track,.ticker::after{animation:none}.tick-pause-label{display:none}}

.doors{grid-area:doors;list-style:none;padding:0;margin-top:40px;border-top:1px solid var(--ink)}
.doors li{border-bottom:1px solid var(--rule)}
.doors a{display:grid;grid-template-columns:2.5rem minmax(10rem, 12rem) minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:14px 0;color:var(--ink);text-decoration:none}
.doors .name{font-size:1.375rem;font-weight:500;letter-spacing:-0.01em}
.doors .desc{color:var(--ink-2)}
.doors .arrow{color:var(--accent);font-size:1.375rem;transition:transform .15s}
.doors a:hover .name{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:0.2em}
.doors a:hover .arrow{transform:translateX(4px)}

@media (max-width: 860px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "photo" "doors";padding-top:28px}
    .doors a{grid-template-columns:2.5rem minmax(0,1fr) auto}
  .doors .desc{grid-column:2 / 3}
}
@media (prefers-reduced-motion: reduce){.doors .arrow{transition:none}}

/* Door pages and plain pages */
.page-head{padding-top:40px;display:grid;gap:20px;max-width:52rem}
.page-head h1{font-size:clamp(36px, 5.5vw, 60px);letter-spacing:-0.03em;line-height:1.05}
.eyebrow{font-weight:500;font-size:1.125rem}
.eyebrow .num{margin-right:8px}

.block{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:48px;row-gap:16px;margin-top:64px;padding-top:20px;border-top:1px solid var(--ink)}
.block > h2{font-size:1.5rem}
.block > div{display:grid;gap:16px;max-width:40rem}
.block ul{padding-left:1.2em;display:grid;gap:8px}
.block h3{font-size:1.1875rem;line-height:1.3;letter-spacing:-0.01em}
.faq{display:grid;gap:24px}
.faq div{display:grid;gap:6px}

.steps{list-style:none;padding:0;display:grid;gap:0;counter-reset:step}
.steps li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);counter-increment:step}
.steps li::before{content:counter(step, decimal-leading-zero);color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums}
.steps li:first-child{padding-top:0}

.price{font-size:clamp(40px, 5vw, 56px);font-weight:500;letter-spacing:-0.03em;line-height:1}

@media (max-width: 760px){
  .block{grid-template-columns:minmax(0,1fr);margin-top:48px}
}

/* Waitlist form */
.join form{display:grid;gap:20px;max-width:32rem}
.field{display:grid;gap:6px}
.field label{font-weight:500}
.hint{color:var(--ink-2);font-size:1.125rem}
input[type="email"],input[type="text"]{font:inherit;color:var(--ink);background:#fff;border:2px solid var(--ink-2);border-radius:0;padding:12px 14px;min-height:52px;width:100%}
input[type="email"]:focus-visible,input[type="text"]:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-color:var(--ink)}
input[aria-invalid="true"]{border-color:var(--error)}
.field-error{color:var(--error);font-weight:500}
.error-summary{margin-top:40px;padding:20px 24px;border:3px solid var(--error);display:grid;gap:8px;max-width:40rem}
.error-summary h2{font-size:1.375rem;color:var(--error)}
.error-summary a{color:var(--ink);font-weight:500}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.check input{width:24px;height:24px;margin:3px 0 0;accent-color:var(--accent)}
.hp{display:none}

.btn{font:inherit;font-weight:500;color:#fff;background:var(--accent);border:0;border-radius:0;padding:14px 28px;min-height:52px;cursor:pointer;justify-self:start}
.btn:hover{background:var(--accent-hover)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Prose (privacy) */
.prose{display:grid;gap:16px;max-width:42rem;margin-top:40px}
.prose h2{font-size:1.5rem;margin-top:24px}
.prose ul{padding-left:1.2em;display:grid;gap:8px}