/* Late override — start.html
   This block was authored AFTER the shared tail and wins every
   same-specificity conflict with it, including the palette. It must
   stay last or this page changes colour.
   Extracted verbatim from inline <style>. Order is load-bearing:
   this file's rules are overridden by, and override, neighbours by document
   order alone. Do not reorder the <link> tags that reference it. */

:root{
  --paper:#faf9f6;--paper-2:#f2f0ea;--ink:#111110;--ink-soft:#3d3c38;--ink-mute:#6f6d66;--line:#dcd9d0;
  --disp:'Space Mono',ui-monospace,monospace;--body:'Manrope',sans-serif;--mono:'IBM Plex Mono',monospace;--max:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.62;letter-spacing:.03em;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
nav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
/* the lockup, driven by one number (--h, the wordmark's rendered height). The image is
   2.87:1 and its letterform baseline sits 28.8% above the bottom edge, so ".ai" is sized
   and dropped off that ratio, the same math the hero uses, so every lockup is identical. */
.logo-link{--h:22px;display:flex;align-items:flex-end;gap:calc(var(--h)*.035);text-decoration:none}

.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{text-decoration:none;font-size:14px;font-weight:500;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}

@media(max-width:900px){.nav-links a:not(.nav-cta){display:none}}
/* Resting state only. This sheet loads after site.css, so the hover rules that
   used to sit here beat the shared button system and reintroduced the invert on
   these two pages alone. `transition:all` went with them — it is what allowed a
   letter-spacing rule to animate the button's width. */
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:2px;border:1.5px solid var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.ghost{color:var(--ink)}
section{padding:104px 0;border-top:1px solid var(--line)}
.ch-eyebrow{font-family:var(--disp);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.ch-eyebrow::before{content:"";width:9px;height:9px;background:var(--ink);display:inline-block;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
h2{font-family:var(--disp);font-weight:400;font-size:clamp(28px,4.2vw,46px);line-height:1.12;letter-spacing:-0.06em;max-width:24ch;margin-bottom:26px}
.lede{font-size:clamp(17px,1.9vw,20px);color:var(--ink-soft);max-width:64ch}
.lede+.lede{margin-top:18px}
.lede strong{color:var(--ink);font-weight:700}
.lede em{font-style:italic}
.pull{font-family:var(--disp);font-weight:400;font-size:clamp(21px,2.6vw,29px);line-height:1.3;letter-spacing:-0.03em;border-left:1.5px solid var(--ink);padding-left:24px;margin:46px 0 0;max-width:34ch}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
@media(max-width:860px){.grid3{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:var(--paper-2);padding:30px 28px;border-radius:2px}
.card .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:12px}
.card h3{font-family:var(--head);font-weight:600;font-size:19px;margin-bottom:10px;letter-spacing:-0.01em}
.card p{font-size:14.5px;color:var(--ink-soft)}
.dark{background:var(--ink);color:var(--paper)}
.dark .ch-eyebrow{color:#9b9992}.dark .ch-eyebrow::before{background:var(--paper)}
.dark h2{color:var(--paper)}
.dark .lede{color:#c9c7bf}.dark .lede strong{color:var(--paper)}
.facts{display:flex;gap:40px;flex-wrap:wrap;margin-top:44px}
.facts .f{display:flex;flex-direction:column;gap:4px}
.facts .fv{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:-0.02em}
.facts .fl{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:#9b9992}
footer{border-top:1px solid var(--line);padding:44px 0 56px;background:var(--paper)}
.foot-in{max-width:var(--max);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer .legal{font-family:var(--mono);font-size:12px;color:var(--ink-mute);max-width:60ch}
footer .logo-link{--h:18px}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
/* Longhands. The `outline` shorthand resets outline-color to currentColor, and
   because this sheet loads after site.css that silently defeated its dark-plane
   override — a white focus ring on white paper around every nav control. */
:focus-visible{outline-width:2px;outline-style:solid;outline-offset:3px}

/* on a phone the bar carries the mark and the action at once, so both tighten */
@media(max-width:560px){
.nav-in{padding:11px 16px;gap:10px}
.nav-in .logo-link{--h:19px}
}

/* index.css and section.css each give the nav CTA its own border; this page
   took its border, and an ink-coloured label, from a rule written for a LIGHT
   nav — while nav-dark.css forces the bar dark. That made the label invisible.
   Only the geometry is restored here, so the colour comes from the shared
   sheets and the button matches every other page at rest and when hovered. */
.nav-links a.nav-cta{border-width:1.5px;border-style:solid}