/* base.css · shared by every Tier A page built in ~/.appbrew-web. Every value from web.md §1.
   Glass is the record's one surface over photography, the same material as the shared Navbar's buttons:
   cream .6 + hairline + blur(12) saturate(1.6). (.44 measured 4.20:1 for a blue link over a plate on /about.) */

@font-face{font-family:'Doppio';src:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c1d13db97bb813d27a_Doppio-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Doppio';src:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c1547dbe41cb1d7a8f_Doppio-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Doppio';src:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c1e48381cd3358a976_Doppio-Medium.ttf') format('truetype');font-weight:500;font-display:swap}

:root{
  --cream:#FAF8F5; --canvas:#F0EBE2; --night:#062265;
  --ink:#231B10; --ink-70:rgba(35,27,16,.74); --ink-45:rgba(35,27,16,.69); --rule:rgba(35,27,16,.14);
  --blue:#0033A0; --blue-950:#062265; --blue-300:#6FA8FF; --blue-100:#DBE7FF;
  --hi:#FC401F; --hi-ink:#C4100A;
  --glass:rgba(250,248,245,.6); --glass-blur:blur(12px) saturate(1.6);
  --dop:'Doppio','Inter',system-ui,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:64px;
  --gap-self:64px; --gap-head:96px; --gap-prose:128px;
  --r-plate:40px; --r-surface:16px; --r-control:12px; --r-chip:8px;
  --shadow:0 4px 24px rgba(35,27,16,.08);
  --nav-h:72px;
}
@media (max-width:1023px){:root{--gutter:40px}}
@media (max-width:767px){:root{--gutter:24px; --gap-self:40px; --gap-head:64px; --gap-prose:80px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink-70);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,figcaption,blockquote,hr,button{margin:0;padding:0}
ul,ol{list-style:none}
blockquote{border:0;font:inherit}   /* Webflow normalize gives blockquote a 5px grey border-left and its own font */
figcaption{text-align:inherit}      /* and figcaption text-align:center */
li{margin:0;padding:0} /* Webflow's site CSS gives li a margin and padding-left */
img,svg{display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ── type roles ─────────────────────────────────────────────── */
h1{font:400 clamp(46px,5.4vw,78px)/1.04 var(--dop);letter-spacing:-.02em;color:var(--ink)}
h2{font:400 clamp(34px,4.4vw,52px)/1.08 var(--dop);letter-spacing:-.02em;color:var(--ink)}
.cap{font:500 13px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.name{color:var(--ink)}

/* one text-action treatment */
.txt{color:var(--blue);padding:12px 0;text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .2s var(--ease)}
.txt:hover{text-decoration-color:var(--blue)}
.txt-arrow{display:inline-flex;align-items:center;gap:8px}
.txt-arrow .ico{transition:transform .2s var(--ease)}
.txt-arrow:hover .ico{transform:translateX(4px)}
.ico{width:20px;height:20px;flex:0 0 20px}

/* one button box */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border-radius:var(--r-control);font:500 17px/1.55 var(--sans);text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease)}
.btn:active{transform:scale(.98);transition-duration:.12s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-950)}
.btn-secondary{border:1px solid var(--rule);color:var(--ink);background:transparent}
.btn-secondary:hover{border-color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* glass — the one surface allowed over photography */
.glass{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--rule)}

/* ── sections carry their own gutter ────────────────────────── */
section,.foot{padding-left:var(--gutter);padding-right:var(--gutter)}

/* ── nav: a fixed glass pill over the plate (placeholder for the Webflow component) ── */
.nav{position:fixed;top:16px;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:0 var(--gutter);pointer-events:none}
.nav-pill{pointer-events:auto;display:flex;align-items:center;gap:32px;height:56px;padding:0 8px 0 16px;border-radius:var(--r-control);transition:background-color .32s var(--ease)}
.nav.is-stuck .nav-pill{background:rgba(250,248,245,.78)}
.wordmark{color:var(--ink);display:block;padding:12px 0}
.wordmark-svg{display:block;width:101px;height:24px;background-color:currentColor;-webkit-mask:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c9364bd9c55c216c43_milo-wordmark.svg') no-repeat center/contain;mask:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ab6c1c9364bd9c55c216c43_milo-wordmark.svg') no-repeat center/contain}
.nav-links{display:flex;gap:24px;font:500 17px/1.55 var(--sans)}
.nav-links a{color:var(--ink-70);text-decoration:none;padding:12px 0;transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-burger span{display:block;width:16px;height:2px;background:var(--ink)}
@media (max-width:1023px){.nav-links,.nav-cta .btn-secondary{display:none}.nav-pill{gap:16px}.nav-burger{display:flex}}
@media (max-width:767px){.nav{top:8px}.nav-pill{width:100%;justify-content:space-between}}

/* ── footer — milo-v2's MEASURED anatomy: a 1.5fr + 1fr… grid, 40/28 gaps, 1.6 leading
   throughout, a borderless bottom bar, the sign-off. No image: milo-v2's footer carries no
   <img>, no <svg> and no background-image. Its own 40px side padding is just its page gutter
   (its sections run 126px 40px) — ours is 64, so the footer keeps OUR gutter or it would
   misalign against every section above it. ── */
/* milo-v2's footer carries no imagery, so the Milo that used to sit on the edge is retired.
   This keeps any page whose markup still has the <img> safe until it is re-ported —
   delete this line and restore the .foot-milo block to bring him back. */
.foot-milo{display:none}
.foot{padding:64px var(--gutter) 0;background:var(--canvas);color:rgba(35,27,16,.66);display:flex;flex-direction:column;align-items:center}
.foot-in{width:100%;max-width:1220px;display:flex;flex-direction:column}
/* milo-v2 measures 249.219px + 5x166.156px with a 28px gap — a 1.5fr lead track and 1fr each
   after it. grid-auto-flow:column reproduces that for any column count (/demo has 4, /about 5). */
.foot-top{display:grid;grid-template-columns:1.5fr;grid-auto-flow:column;grid-auto-columns:1fr;gap:40px 28px;padding-bottom:44px;border-bottom:1px solid rgba(35,27,16,.09)}   /* milo-v2 hangs the rule off .foot-top, not .foot-bot */
.foot-mark{color:var(--ink)}
.foot-mark p{margin-top:16px;max-width:274px;font-size:14.5px;line-height:1.55;color:var(--ink-45)}
.foot-col h4{font:400 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);margin-bottom:14px}
.foot-col ul{display:flex;flex-direction:column;gap:9px}
.foot-col a{font-size:14.5px;line-height:1.6;color:var(--ink-70);text-decoration:none;transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--ink)}
.foot-bot{width:100%;max-width:1220px;margin-top:0;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:13px;line-height:1.6;color:var(--ink-45)}
.foot-social{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;line-height:1.6}
.foot-social a{color:var(--ink-45);text-decoration:none;transition:color .2s var(--ease)}
.foot-social a:hover{color:var(--ink)}
.foot-sign{width:100%;margin-top:52px;overflow:hidden;height:.86em;pointer-events:none;text-align:center;font:300 clamp(54px,15.6vw,226px)/.86 var(--dop);letter-spacing:-.035em;color:rgba(35,27,16,.06);user-select:none;white-space:nowrap}
@media (max-width:1023px){.foot-top{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);grid-auto-columns:auto}.foot-mark{grid-column:1/-1}.foot-mark p{max-width:none}}
@media (max-width:767px){.foot{padding:48px var(--gutter) 60px}.foot-col h4{font-size:12px}.foot-col ul{gap:0}.foot-col a{display:block;padding:7px 0}.foot-bot{flex-direction:column;align-items:flex-start;gap:16px}.foot-social{gap:16px}.foot-sign{margin-top:30px}}   /* milo-v2's measured phone footer: two columns, 12px headings, 7px link padding */

/* ── motion: transform + opacity only, gated ─────────────────── */
.rv{opacity:0;transform:translateY(12px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.btn,.txt-arrow .ico,.postcard,.hero-img,.nav-pill{transition:none}.postcard:hover{transform:rotate(-6deg)}}

/* ── cookie consent · C23 — small, late, bottom-right; one obvious choice ── */
.cookie{position:fixed;right:24px;bottom:24px;z-index:110;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100% - 2*var(--gutter)));padding:8px 16px;background:var(--cream);border-radius:var(--r-surface);box-shadow:var(--shadow);color:var(--ink);font-size:15px;line-height:1.55;opacity:0;transform:translateY(8px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.cookie.in{opacity:1;transform:none}
.cookie[hidden]{display:none}
.cookie .ico{width:16px;height:16px;flex:0 0 16px;color:var(--ink-45)}
.cookie-line{white-space:nowrap}
.cookie-ref{display:inline-block;color:inherit;padding:12px 0;text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:3px}
.cookie-ref:hover{text-decoration-color:var(--ink)}
.cookie-actions{display:flex;align-items:center;gap:8px;margin-left:8px;white-space:nowrap}
.cookie-no{display:inline-block;color:var(--ink-45);padding:12px 0;text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:3px}
.cookie-no:hover{color:var(--ink);text-decoration-color:var(--ink)}
.cookie-actions .txt{font-weight:500}
.cookie-slash{color:var(--ink-45)}
@media (max-width:767px){
  .cookie{left:var(--gutter);right:var(--gutter);bottom:16px;max-width:none;flex-wrap:wrap;gap:4px 12px;padding:8px 16px}
  .cookie-line{white-space:normal;flex:1 1 200px}
  .cookie-actions{margin-left:28px}
}
@media (prefers-reduced-motion:reduce){.cookie{transition:none;transform:none;opacity:1}}

/* /about · page rules only; tokens, type, nav, footer, motion and cookie come from ../base.css
   (build.py concatenates). Every value is the record's, with the two gap steps added 27 Sep.

   The spacing here is the measured General Intelligence Company rhythm, not a guess: their
   about page runs 238 · 141 · 375 · 285 between sections at 1440. v2 of this page ran
   128 · 96 · 128 and that is what read as "spacing and hierarchy missing". */

/* ── the page's own rhythm ───────────────────────────────────── */
:root{--gap-xl:240px; --gap-lg:160px; --hero-gap:160px}
@media (max-width:767px){:root{--gap-xl:160px; --gap-lg:96px; --hero-gap:96px}}

/* ── 1 · the nameplate ───────────────────────────────────────────
   A 6:5 plate at 1440 (GIC: 1440x1205), the name centred at the top, the mission in glass
   160 below it, pinning under the bar as the field slides past. */
/* width:100% is load-bearing: with width auto, `aspect-ratio` resolves against the capped
   max-height and the box shrinks to 1440 wide inside a 2000px window. */
.hero{position:relative;padding:0;width:100%;aspect-ratio:3/2;min-height:900px;max-height:1200px;overflow:clip;border-radius:0 0 var(--r-plate) var(--r-plate)}
.hero-plate{position:absolute;inset:0}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:opacity .8s var(--ease)}
.hero-img.is-night{opacity:0}
.hero[data-time="night"] .hero-img.is-night{opacity:1}
.hero[data-time="night"] .hero-img.is-day{opacity:0}

.hero-in{position:relative;z-index:1;height:100%;max-width:1280px;margin:0 auto;padding:96px var(--gutter) 64px;display:flex;flex-direction:column;align-items:center}
.hero-title{text-align:center;max-width:880px}
.hero-card{align-self:flex-start;position:sticky;top:104px;margin-top:var(--hero-gap);width:100%;max-width:500px;border-radius:var(--r-surface);padding:32px;display:flex;flex-direction:column;gap:16px;color:var(--ink)}
.hero-mission{font-size:clamp(27px,2.4vw,34px);line-height:1.08;letter-spacing:-.02em}
.hero-founding{color:var(--ink-70)}
.hero-backed{font:500 13px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
@media (max-width:767px){
  .hero{aspect-ratio:auto;min-height:800px;max-height:none;border-radius:0 0 var(--r-surface) var(--r-surface)}
  .hero-in{padding:96px var(--gutter) 40px}
  .hero-card{position:static;max-width:none;padding:24px;gap:12px}
  .hero-mission{font-size:27px;line-height:1.2}
  .hero-title br{display:none}
}

/* ── 2 · the thesis ──────────────────────────────────────────────
   GIC: a 15px grey lede at 530, then a 48px statement at 816, 30px apart. Ours at the
   record's sizes: 17 at 600, then h2 at 880, 24 apart. */
.why{padding-top:var(--gap-xl);display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.why-lead{max-width:600px;color:var(--ink-45)}
.why-claim{max-width:880px;font-weight:500}

/* ── 3 · the letter ──────────────────────────────────────────────
   880 card, 520 text column (GIC: 458 in 880). v2 ran the prose the full 720 of the card,
   about 88 characters a line. */
.letter{padding-top:var(--gap-lg);display:flex;justify-content:center}
.letter-card{position:relative;width:100%;max-width:880px;background:var(--cream);border:1px solid var(--rule);border-radius:var(--r-surface);padding:96px 40px;display:flex;justify-content:center}
.letter-prose{width:100%;max-width:520px;display:flex;flex-direction:column;gap:24px}
.letter-prose p{color:var(--ink)}
.letter-lede{font:500 21px/1.4 var(--dop);letter-spacing:-.012em;color:var(--ink)}
.letter-sign{margin-top:24px;color:var(--ink-45)}
/* the Milo card · cofounder.co/resources: an image set inside a card with its own margin and
   a line under it. Radii nest: outer 16 − 8 padding = 8 inner. */
.milo-card{margin:8px 0;padding:8px;border-radius:var(--r-surface);display:flex;flex-direction:column;gap:8px}
.milo-shot{background:var(--canvas);border-radius:var(--r-chip);padding:24px;display:flex;justify-content:center}
.milo-shot img{width:180px;height:auto}
.milo-card figcaption{display:flex;flex-direction:column;gap:4px;padding:8px 12px 12px}
.milo-line{color:var(--ink-70)}
@media (max-width:767px){
  .letter-card{padding:48px 24px}
  .milo-shot{padding:16px}
  .milo-shot img{width:140px}
}

/* ── 4 · what it adds up to · three figures, room around them ──── */
.proof{padding-top:var(--gap-xl);display:flex;flex-direction:column;align-items:center;text-align:center}
.figures{width:100%;max-width:1080px;margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.figures li{padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:12px}
.figures li+li{border-left:1px solid var(--rule)}
.fig{font:400 clamp(34px,4.4vw,52px)/1.08 var(--dop);letter-spacing:-.02em;color:var(--blue);font-variant-numeric:tabular-nums}
.lbl{font:500 13px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.source{margin-top:32px;max-width:720px;color:var(--ink-45)}
.proof .btn{margin-top:24px}
@media (max-width:767px){
  .figures{grid-template-columns:1fr;border:0}
  .figures li{padding:32px 16px;border-top:1px solid var(--rule)}
  .figures li+li{border-left:0}
  .figures li:last-child{border-bottom:1px solid var(--rule)}
}

/* ── 5 · come build ──────────────────────────────────────────────
   GIC's plate is 1016 of 1440 (70%). Ours is 1080 at 5:3. The card sits top-right, over the
   third of S3-ship that measures 254 mean / 252 min; Milo stands bottom-left, where the growth
   measures 88 and a cream machine reads against it. */
.build{padding-top:var(--gap-xl);display:flex;flex-direction:column;align-items:center}
.build-plate{position:relative;width:100%;max-width:1080px;aspect-ratio:5/3;border-radius:var(--r-plate);overflow:hidden;background:var(--canvas)}
.build-plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.build-plate>.build-milo{position:absolute;inset:auto;left:7%;bottom:6%;width:min(168px,16%);height:auto;object-fit:contain}
.build-card{position:absolute;right:40px;top:40px;width:min(400px,calc(100% - 80px));border-radius:var(--r-surface);padding:32px;display:flex;flex-direction:column;gap:16px;color:var(--ink)}
.build-card h2{font-size:34px;line-height:1.08}
.build-card p{color:var(--ink-70)}
.build-card .txt{align-self:flex-start}
.facts{width:100%;max-width:1080px;margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px 32px;text-align:center;justify-items:center}
.facts dt{margin-bottom:8px;color:var(--ink-45)}
.facts dd{color:var(--ink);display:flex;flex-direction:column;align-items:center}
/* a column, so nothing is baseline-aligned: the arrow links are inline-flex and were
   sitting 3px off the plain values. The 44px target is rebuilt downwards instead. */
.facts dd .txt{padding-top:0;padding-bottom:18px}
.facts .txt-arrow{white-space:nowrap}
@media (max-width:1023px){.facts{grid-template-columns:1fr 1fr}}
@media (max-width:767px){
  .build-plate{aspect-ratio:3/4}
  .build-plate>img{object-position:50% 62%}
  .build-plate>.build-milo{left:16px;bottom:16px;width:96px}
  .build-card{right:16px;top:16px;left:16px;width:auto;padding:24px;gap:12px}
  .build-card h2{font-size:27px;line-height:1.2}
  .facts{grid-template-columns:1fr;gap:32px;margin-top:48px}
}

/* ── 6 · close ───────────────────────────────────────────────── */
.close{padding-top:var(--gap-xl);padding-bottom:var(--gap-lg);display:flex;justify-content:center}
.close-in{max-width:880px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.close-glyph{color:var(--ink-45)}
.close h2{font-weight:500}
.close p{color:var(--ink-70)}