/* Self-hosted fonts (OFL). Files go in /fonts/ - see fonts/README.md. Missing files fall back to system fonts. Saira Condensed has no true italic; the racing site's italics are synthesized, same as with Google Fonts. */
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/saira-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/saira-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/saira-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/saira-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/saira-condensed-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
/* Layout: a race-engineer's data screen. The brand's brake-to-throttle line (red > amber > yellow > green) is the one bold element; everything else is quiet asphalt, hairline kerbs and mono channel labels. Single dark look by choice. */
:root{
  --asphalt:#0a0c0f; --pit:#11151a; --pit-2:#161b21; --kerb:#262d36; --kerb-hi:#36404c;
  --fg:#e9edf2; --muted:#98a3af; --faint:#5d6773;
  --brake:#e8402f; --amber:#ff8a1f; --apex:#f2c230; --drive:#2fc56b;
  --line:linear-gradient(90deg,var(--brake) 0%,var(--amber) 38%,var(--apex) 62%,var(--drive) 100%);
  --display:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --maxw:1180px; --r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--asphalt);color:var(--fg);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--asphalt)}
a{color:inherit}
:focus-visible{outline:2px solid var(--apex);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in oklab,var(--asphalt) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--kerb)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:44px;height:22px;flex:none}
.word{font:800 22px/1 var(--display);letter-spacing:.08em}
.word b{color:var(--amber);font-weight:800}
.nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.nav a{font:500 14px/1 var(--body);color:var(--muted);text-decoration:none;padding:9px 12px;border-radius:999px;transition:color .2s,background .2s}
.nav a:hover{color:var(--fg);background:var(--pit-2)}
.nav a.on{color:var(--fg)}
.launch{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);border:1px solid color-mix(in oklab,var(--amber) 45%,transparent);border-radius:999px;padding:8px 12px;white-space:nowrap}
.launch i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-right:8px;vertical-align:1px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:64px 40px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 60% at 82% 30%,color-mix(in oklab,var(--amber) 13%,transparent),transparent 70%),
    linear-gradient(var(--kerb) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,var(--kerb) 1px,transparent 1px) 0 0/48px 48px;
  mask-image:radial-gradient(80% 80% at 60% 40%,#000 30%,transparent 85%);opacity:.55}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.eyebrow{color:var(--amber);display:flex;gap:10px;flex-wrap:wrap}
.eyebrow span+span::before{content:"·";margin-right:10px;color:var(--faint)}
h1{font:800 clamp(44px,5.8vw,78px)/.94 var(--display);letter-spacing:-.005em;text-transform:uppercase;margin:18px 0 22px;text-wrap:balance}
h1 .l2{display:block;background:var(--line);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 7s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 0}}
.lede{max-width:56ch;color:#c9d0d8;font-size:18px;margin:0 0 30px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--body);padding:15px 20px;border-radius:12px;text-decoration:none;transition:transform .2s,background .2s,border-color .2s}
.btn.ghost{border:1px solid var(--kerb-hi);color:var(--fg)}
.btn.ghost:hover{border-color:var(--fg);transform:translateY(-1px)}
.btn.label{position:relative;color:var(--asphalt);background:var(--amber);cursor:default}
.btn.label::after{content:"";position:absolute;inset:-1px;border-radius:13px;background:var(--line);z-index:-1;filter:blur(14px);opacity:.55}
.btn svg{width:14px;height:14px}

/* telemetry panel */
.panel{position:relative;background:linear-gradient(180deg,var(--pit-2),var(--pit));border:1px solid var(--kerb);border-radius:20px;padding:18px 18px 16px;box-shadow:0 30px 80px -30px #000,inset 0 1px 0 #ffffff0d}
.panel-head{display:flex;justify-content:space-between;align-items:center;color:var(--faint);margin-bottom:6px}
.panel-head .live{color:var(--drive)}
.panel-head .live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--drive);margin-right:7px;vertical-align:1px;animation:pulse 1.2s infinite}
.corner{width:100%;height:auto;display:block}
.corner .track{fill:none;stroke:#1c232b;stroke-width:44;stroke-linecap:round;stroke-linejoin:round}
.corner .edge{fill:none;stroke:#2c3540;stroke-width:46;stroke-linecap:round;stroke-dasharray:6 10}
.corner .rline{fill:none;stroke:url(#brandline);stroke-width:4;stroke-linecap:round}
.corner .comet{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:60 1400;opacity:.85;animation:comet 6s linear infinite;filter:drop-shadow(0 0 6px #fff)}
@keyframes comet{from{stroke-dashoffset:60}to{stroke-dashoffset:-1400}}
.corner text{font:500 10px var(--mono);letter-spacing:.1em;fill:var(--faint)}
.corner .apexlbl{fill:var(--apex)}
.readout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.cell{background:var(--asphalt);border:1px solid var(--kerb);border-radius:10px;padding:10px 10px 9px;min-width:0}
.cell .k{color:var(--faint);font-size:10px}
.phase{position:relative;height:22px;margin-top:4px;font:700 18px/22px var(--display);letter-spacing:.06em}
.phase span{position:absolute;inset:0;opacity:0;animation:6s linear infinite}
.phase .p1{color:var(--brake);animation-name:ph1}.phase .p2{color:var(--amber);animation-name:ph2}
.phase .p3{color:var(--apex);animation-name:ph3}.phase .p4{color:var(--drive);animation-name:ph4}
@keyframes ph1{0%,30%{opacity:1}31%,100%{opacity:0}}
@keyframes ph2{0%,30%{opacity:0}31%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes ph3{0%,49%{opacity:0}50%,62%{opacity:1}63%,100%{opacity:0}}
@keyframes ph4{0%,62%{opacity:0}63%,99%{opacity:1}100%{opacity:0}}
.bar{height:6px;border-radius:6px;background:#1d242c;margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;transform-origin:left}
.bar.brk i{background:var(--brake);animation:brk 6s linear infinite}
.bar.lean i{background:var(--apex);animation:lean 6s linear infinite}
.bar.thr i{background:var(--drive);animation:thr 6s linear infinite}
@keyframes brk{0%{transform:scaleX(.05)}6%{transform:scaleX(.92)}30%{transform:scaleX(.55)}48%{transform:scaleX(.05)}100%{transform:scaleX(.05)}}
@keyframes lean{0%,20%{transform:scaleX(.04)}50%,60%{transform:scaleX(.9)}90%,100%{transform:scaleX(.1)}}
@keyframes thr{0%,58%{transform:scaleX(.08)}64%{transform:scaleX(.22)}95%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
.note{color:var(--faint);margin-top:10px;font-size:10px}

/* channel ticker */
.ticker{border-block:1px solid var(--kerb);overflow:hidden;background:var(--pit)}
.ticker .run{display:flex;gap:42px;width:max-content;padding-block:14px;animation:tick 38s linear infinite}
.ticker .mono{color:var(--muted);display:flex;align-items:center;gap:42px}
.ticker .mono span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:10px;border-radius:50%;background:var(--amber);vertical-align:2px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding-block:88px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}
h2{font:800 clamp(34px,4.6vw,56px)/1 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:8px 0 0;text-wrap:balance}
.kicker{color:var(--amber)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:s}
.step{position:relative;background:var(--pit);border:1px solid var(--kerb);border-radius:var(--r);padding:26px 22px 24px;overflow:hidden;transition:transform .25s,border-color .25s,background .25s}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.step:hover{transform:translateY(-4px);border-color:var(--kerb-hi);background:var(--pit-2)}
.step:hover::before{transform:scaleX(1)}
.step .n{font:700 64px/1 var(--display);color:transparent;-webkit-text-stroke:1px var(--kerb-hi);display:block;margin-bottom:14px;transition:-webkit-text-stroke-color .25s}
.step:hover .n{-webkit-text-stroke-color:var(--amber)}
.step h3{font:700 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px}
.step p{margin:0;color:#c3cad2;font-size:15.5px}
.step .tag{position:absolute;top:22px;right:20px;color:var(--faint)}

/* whole picture */
.picture{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.picture ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.picture li{display:flex;gap:14px;align-items:flex-start;font-size:18px}
.picture li::before{content:"";flex:none;width:22px;height:3px;margin-top:13px;border-radius:3px;background:var(--line)}
.lanes{position:relative;background:var(--pit);border:1px solid var(--kerb);border-radius:18px;padding:16px 16px 14px;overflow:hidden}
.lane{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:12px;padding-block:9px;border-bottom:1px dashed var(--kerb)}
.lane:last-of-type{border-bottom:0}
.lane .mono{color:var(--muted);font-size:10.5px;letter-spacing:.1em}
.lane svg{width:100%;height:34px;display:block}
.lane path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.playhead{position:absolute;top:10px;bottom:10px;left:146px;width:2px;background:linear-gradient(var(--apex),transparent);box-shadow:0 0 14px var(--apex);animation:play 7s linear infinite}
@keyframes play{from{transform:translateX(0)}to{transform:translateX(calc(100cqw - 170px))}}
.lanes{container-type:inline-size}

/* Texas */
.texas{position:relative;overflow:hidden;border:1px solid var(--kerb);border-radius:22px;background:radial-gradient(70% 120% at 100% 0%,color-mix(in oklab,var(--brake) 14%,transparent),transparent 60%),var(--pit);padding:44px clamp(22px,5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.texas p{margin:12px 0 0;color:#c9d0d8;font-size:18px;max-width:52ch}
.texas .stamp{font:800 clamp(64px,10vw,128px)/.8 var(--display);color:transparent;-webkit-text-stroke:1px var(--kerb-hi);letter-spacing:-.01em}

/* services + about */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.svc{background:var(--pit);border:1px solid var(--kerb);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:14px}
.svc h3{font:700 26px/1.05 var(--display);text-transform:uppercase;margin:0}
.svc p{margin:0;color:#c3cad2}
.svc .launch{align-self:flex-start}
.bring{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:34px}
.bring h3{font:700 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;margin:0 0 10px}
.bring ul{margin:0;padding-left:20px;color:#c3cad2}
.bring li{margin-bottom:8px}
.safety{border-left:3px solid;border-image:var(--line) 1;padding-left:18px;color:#c3cad2}
.safety b{color:var(--fg)}
.about p{max-width:68ch;color:#c9d0d8;font-size:18px}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.card-contact{background:var(--pit);border:1px solid var(--kerb);border-radius:18px;padding:28px;display:grid;gap:6px}
.card-contact strong{font:700 24px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.email{font:500 18px/1.4 var(--mono);color:var(--amber);user-select:all;word-break:break-all}

/* footer */
footer{border-top:1px solid var(--kerb);padding-block:34px 44px;color:var(--faint);font-size:13.5px}
footer p{margin:0 0 8px;max-width:110ch}
footer .first{color:var(--muted)}
footer a{color:var(--amber)}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--kerb)}
.social{display:flex;gap:8px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:8px;color:var(--fg);text-decoration:none;font:500 13px/1 var(--body);padding:10px 14px;border:1px solid var(--kerb-hi);border-radius:999px;transition:border-color .2s,transform .2s}
.social a:hover{border-color:var(--amber);transform:translateY(-2px)}
.social svg{width:15px;height:15px;fill:currentColor}
.legal-links{display:flex;gap:16px;flex-wrap:wrap;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.legal-links a{color:var(--muted);text-decoration:none}
.legal-links a:hover{color:var(--fg)}
.finish{height:4px;background:repeating-linear-gradient(90deg,var(--fg) 0 12px,var(--asphalt) 12px 24px);opacity:.18}

/* mock-only banner */
.mockbar{background:var(--apex);color:#1a1400;font:600 12px/1.4 var(--mono);letter-spacing:.06em;padding-block:8px}
.mockbar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* responsive */
@media (max-width:980px){
  .hero .wrap,.picture,.contact{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .top .wrap{flex-wrap:wrap;row-gap:6px}
  .nav a{padding:8px 9px;font-size:13px}
  .steps,.two,.bring,.texas{grid-template-columns:1fr}
  .texas .stamp{display:none}
  .readout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lane{grid-template-columns:84px minmax(0,1fr)}
  .playhead{left:110px}
  section{padding-block:64px}
  .launch.hdr{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .phase .p3{opacity:1}
  .bar i{transform:scaleX(.6)}
  .moving{display:none}
}
/* former inline styles */
.u1{margin-top:26px}
.u2{margin:0}
.u3{margin-top:8px}
.u4{margin-top:22px}
.u5{color:var(--muted);margin:0}
.u6{color:var(--muted)}
.u7{color:var(--faint);margin-top:10px}

/* ---------- legal pages + production helpers ---------- */
.legal-doc{max-width:780px;padding-block:56px 80px}
.legal-doc .back{display:inline-block;margin-bottom:22px;color:var(--muted);text-decoration:none}
.legal-doc .back:hover{color:var(--fg)}
.legal-doc h1{font-size:clamp(36px,6vw,60px);line-height:1;margin:0 0 18px}
.legal-doc h2{font-size:clamp(24px,3.4vw,32px);margin:40px 0 10px}
.legal-doc p,.legal-doc li{color:#c9d0d8}
.legal-doc ol,.legal-doc ul{padding-left:1.3em}
.legal-doc li{margin-bottom:10px}
.legal-doc a{color:var(--amber)}
.legal-doc .updated{color:var(--muted)}
.legal-links a[aria-current=page]{color:var(--fg)}
.todo{background:color-mix(in oklab,#ffd23a 18%,transparent);color:#ffd23a;border:1px dashed #ffd23a;border-radius:6px;padding:0 6px;font-family:var(--mono)}
.legal-doc .todo{white-space:normal}
.notfound{padding-block:96px 120px}
.notfound p{color:var(--muted);max-width:46ch}