/* ==========================================================================
   Speed.ai v2 concept: shared foundation
   Tokens, reset, Geist type, buttons, the concept note, the masthead (copied
   from v1) and the mobile menu. Every hero variant loads this first and keeps
   its own styles in its own folder. Variants never edit this file.
   ========================================================================== */

:root {
  /* grounds */
  --carbon-0: #050506;   /* deepest: WebGL clear colour, vignettes */
  --carbon: #0A0A0B;     /* the live site's black, lifted one step */
  --carbon-2: #111113;
  --carbon-3: #19191C;
  --paper: #F4F4F2;
  --paper-2: #EAEAE6;
  --white: #FFFFFF;

  /* ink and text */
  --ink: #0A0A0B;
  --snow: #F5F5F4;
  --mist: #A1A1A8;       /* secondary on dark, 7:1 on carbon */
  --mist-2: #75757D;     /* tertiary on dark, non-essential text only */
  --graphite: #55555C;   /* secondary on paper, 7:1 */
  --line-dark: rgba(255, 255, 255, .09);
  --line-dark-2: rgba(255, 255, 255, .16);
  --line-paper: rgba(10, 10, 11, .11);
  --line-paper-2: rgba(10, 10, 11, .2);

  /* signal: yellow still means one thing, "Speed.ai caught this" */
  --hl: #FFF200;
  --hl-press: #F0E300;
  --hl-glow: rgba(255, 242, 0, .32);
  --lost: #FF6B5B;
  --notice: #D6E2FF;     /* the concept strip only */

  /* type: Geist for everything (chosen 2026-11-03 over Lexend, Mona Sans and
     Instrument). Headings and big figures use --font-display (the same face today;
     the hook stays so a display cut can be swapped in one place). Geist has real
     tabular figures at .60em; SpeedV2.tabular() boxes digits at --tnum-w. */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font);
  --tnum-w: .6em;
  --fs-hero: clamp(2.75rem, 6.4vw, 6.25rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3: 1.3125rem;
  --fs-lede: clamp(1.0625rem, 1.35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  /* layout */
  --wrap: 1364px;                     /* 1240 + 10% (client, 2026-11-10) */
  --gutter: clamp(16px, 4vw, 48px);
  --masthead-h: 64px;
  --radius: 10px;
  --radius-l: 18px;

  /* motion (the shared vocabulary; never invent parallel curves) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; background: var(--carbon); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 350;
  line-height: 1.6;
  color: var(--snow);
  background: var(--carbon);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
sup { font-size: .55em; line-height: 0; vertical-align: .9em; margin-left: .05em; }
p { text-wrap: pretty; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 2px solid var(--hl); outline-offset: 3px; border-radius: 4px; }
.on-paper :focus-visible, .masthead--light :focus-visible { outline-color: var(--ink); }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 300;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--hl); color: var(--ink); font-weight: 500;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* grounds carry their own text colours, so components work on either */
.on-dark { --fg: var(--snow); --fg-2: var(--mist); --rule: var(--line-dark); --rule-2: var(--line-dark-2); background: var(--carbon); color: var(--fg); }
.on-paper { --fg: var(--ink); --fg-2: var(--graphite); --rule: var(--line-paper); --rule-2: var(--line-paper-2); background: var(--paper); color: var(--fg); }

/* headings and big figures take the display face */
h1, h2, .display, .face-display { font-family: var(--font-display); }

/* Geist reads premium light and tight at display sizes; heavy weights shout */
.display {
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.lede { font-size: var(--fs-lede); font-weight: 300; line-height: 1.55; color: var(--fg-2, var(--mist)); max-width: 36em; text-wrap: pretty; }

/* fixed-width digit boxes built by SpeedV2.tabular(), so timers never jitter */
.tnum { display: inline-flex; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tnum > .d { display: inline-block; width: var(--tnum-w); text-align: center; }
.tnum > .s { display: inline-block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px;
  border-radius: var(--radius);
  font-size: 1rem; font-weight: 500; letter-spacing: -.01em; line-height: 1;
  white-space: nowrap;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--hl); color: var(--ink); }
.btn--ghost { border: 1px solid var(--rule-2, var(--line-dark-2)); color: var(--fg, var(--snow)); }
.btn--ink { background: var(--ink); color: var(--snow); }
.btn--light { background: var(--snow); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #FFF75C; }
  .btn--ghost:hover { border-color: var(--fg, var(--snow)); }
  .btn--ink:hover { background: #26262A; }
  .btn--light:hover { background: #fff; }
}
.btn--primary:active { background: var(--hl-press); }

/* ==========================================================================
   CONCEPT NOTE + MASTHEAD (copied from v1, set in Geist)
   ========================================================================== */
.concept-note { position: relative; z-index: 101; background: var(--notice); color: var(--ink); font-size: .8125rem; line-height: 1.45; font-weight: 350; }
.concept-note__in { padding-block: 9px; }
.concept-note strong { font-weight: 600; }
.concept-note a { text-decoration: underline; text-underline-offset: 2px; font-weight: 500; margin-left: .25em; }

.masthead {
  position: sticky; top: 0; z-index: 100;
  height: var(--masthead-h);
  background: rgba(10, 10, 11, .92);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.masthead.is-scrolled { border-bottom-color: var(--line-dark); }
/* option: float over a full-bleed hero until the page scrolls (add data-overlay) */
.masthead[data-overlay]:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.masthead__in { height: 100%; display: flex; align-items: center; gap: 32px; }
.masthead__logo { display: block; flex: none; color: var(--snow); }
.masthead__logo svg { width: 132px; height: auto; aspect-ratio: 857 / 82.5; }
.nav { flex: 1; }
.nav ul { display: flex; gap: 2px; justify-content: center; }
.nav a { display: block; padding: 8px 12px; border-radius: 8px; font-size: .9375rem; font-weight: 400; letter-spacing: -.01em; color: var(--mist); transition: color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav a:hover, .masthead__login:hover { color: var(--snow); } }
.masthead__actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.masthead__login { font-size: .9375rem; font-weight: 400; color: var(--mist); transition: color 160ms var(--ease-out); }

.menu-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; border-radius: 8px; position: relative; }
.menu-toggle__bars, .menu-toggle__bars::before { position: absolute; left: 12px; width: 20px; height: 1.5px; background: var(--snow); }
.menu-toggle__bars { top: 18px; }
.menu-toggle__bars::before { content: ""; left: 0; top: 7px; }

/* light variant, for a paper hero */
.masthead--light { background: rgba(244, 244, 242, .9); }
.masthead--light.is-scrolled { border-bottom-color: var(--line-paper); }
.masthead--light .masthead__logo { color: var(--ink); }
.masthead--light .nav a, .masthead--light .masthead__login { color: var(--graphite); }
.masthead--light .menu-toggle__bars, .masthead--light .menu-toggle__bars::before { background: var(--ink); }
@media (hover: hover) and (pointer: fine) { .masthead--light .nav a:hover, .masthead--light .masthead__login:hover { color: var(--ink); } }

@media (max-width: 1080px) {
  .nav, .masthead__login { display: none; }
  .menu-toggle { display: block; }
  .masthead__actions { gap: 12px; }
}
@media (max-width: 420px) {
  .masthead__actions .btn--sm { padding: 0 12px; font-size: .875rem; }
  .masthead__logo svg { width: 112px; }
}
@media (max-width: 359px) {
  .masthead__in { gap: 12px; }
  .masthead__actions { gap: 6px; }
  .masthead__logo svg { width: 100px; }
  .masthead__actions .btn--sm { padding: 0 10px; }
}

/* full-screen menu: clip-path reveal from the top, links rise in a relay */
.menu {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: var(--carbon);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .55s cubic-bezier(.7, 0, .2, 1) .14s, visibility 0s linear .7s;
}
.menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--masthead-h); flex: none; }
.menu__close { position: relative; width: 44px; height: 44px; margin-right: -10px; }
.menu__close span, .menu__close span::before { position: absolute; left: 12px; top: 21px; width: 20px; height: 1.5px; background: var(--snow); transform: rotate(45deg); }
.menu__close span::before { content: ""; left: 0; top: 0; transform: rotate(90deg); }
.menu__nav { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding-block: 24px max(28px, env(safe-area-inset-bottom)); overflow-y: auto; }
.menu__nav ul { display: grid; }
.menu__nav li a { display: block; padding: 12px 0; font-weight: 400; font-size: clamp(1.875rem, 8.5vw, 2.625rem); letter-spacing: -.04em; line-height: 1.1; border-bottom: 1px solid var(--line-dark); }
.menu__actions { display: grid; gap: 10px; margin-top: 32px; }
.menu__nav li, .menu__actions { opacity: 0; transform: translateY(26px); transition: opacity .2s, transform .2s; }
.menu.is-open .menu__nav li, .menu.is-open .menu__actions {
  opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i) * .06s), transform .75s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i) * .06s);
}

@media (prefers-reduced-motion: reduce) {
  .menu, .menu.is-open { transition: opacity 240ms ease, visibility 0s linear 240ms; clip-path: none; opacity: 0; }
  .menu.is-open { opacity: 1; transition: opacity 240ms ease, visibility 0s; }
  .menu__nav li, .menu__actions { transform: none !important; }
}