/* StageMode tokens + site styles (ported from stagemode-website) */
/* ============================================================
   StageMode — Colour tokens
   Navy primary + four product accents. Navy is the system colour
   for backgrounds, text and UI; product colours distinguish each
   platform (Control / Entries / Marshal / Spectate).
   ============================================================ */
:root {
  /* ---- Brand primaries ---- */
  --navy-900: #04122A;   /* deepest — full-bleed backgrounds */
  --navy-800: #071D3D;   /* PRIMARY brand navy (#071D3D, rgb 7 29 61) */
  --navy-700: #0E2B54;   /* raised navy surface */
  --navy-600: #163663;   /* hover on navy surfaces */
  --navy-500: #28456F;   /* borders on dark */
  --navy-400: #4A648F;   /* muted text on dark */
  --navy-300: #7C92B3;   /* secondary text on dark */

  --white: #FFFFFF;
  --snow:  #FFFAFA;      /* off-white surface (rgb 255 250 250) */

  /* ---- Product accents ---- */
  --control: #FF6B00;    /* Control — operations (rgb 255 107 0) */
  --control-600: #E55F00;
  --control-tint: #FFF1E6;

  --entries: #00B3B3;    /* Entries — competitor management */
  --entries-600: #009C9C;
  --entries-tint: #E0F7F7;

  --marshal: #B2E503;    /* Marshal — mobile marshal app */
  --marshal-600: #9BC900;
  --marshal-tint: #F4FBD9;

  --spectate: #FF3B5C;   /* Spectate — live spectator experience */
  --spectate-600: #E62A49;
  --spectate-tint: #FFE7EB;

  /* ---- Neutrals (light surfaces) ---- */
  --ink-900: #071D3D;    /* body text on light = navy */
  --ink-700: #2C3E59;
  --ink-500: #5A6B82;    /* secondary text */
  --ink-400: #8A98AC;    /* tertiary / captions */
  --line-200: #E3E8EF;   /* hairline borders */
  --line-100: #EEF1F6;   /* subtle dividers */
  --fill-100: #F4F6FA;   /* app canvas / zebra */
  --fill-50:  #FAFBFD;

  /* ---- Semantic status (independent of product accents) ---- */
  --success: #1F9D55;
  --warning: #F2A600;
  --danger:  #E0123C;
  --info:    #2A6FDB;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --brand: var(--control);            /* default brand accent = Control orange */
  --brand-strong: var(--control-600);

  --bg-page: var(--fill-100);
  --bg-canvas: var(--snow);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--fill-50);
  --surface-dark: var(--navy-800);
  --surface-dark-raised: var(--navy-700);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-400);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--navy-300);
  --text-on-brand: var(--white);

  --border-default: var(--line-200);
  --border-subtle: var(--line-100);
  --border-strong: var(--ink-400);
  --border-on-dark: var(--navy-500);

  --focus-ring: var(--control);
}

/* ============================================================
   StageMode — Typography tokens
   Typeface: Sora (ExtraBold / Bold / SemiBold / Regular).
   Clean, modern, geometric, highly legible across platforms.
   ============================================================ */
:root {
  --font-sans: 'Sora', 'Sora Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'Sora Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

  /* ---- Weights ---- */
  --w-regular: 400; /* @kind font */
  --w-medium: 500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold: 700; /* @kind font */
  --w-extrabold: 800; /* @kind font */

  /* ---- Type scale (px) ---- */
  --fs-display: 64px;   /* hero / big numbers */
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-micro: 11px;     /* labels, eyebrows */

  /* ---- Line heights ---- */
  --lh-tight: 1.04; /* @kind font */   /* display / headlines */
  --lh-snug: 1.18; /* @kind font */
  --lh-normal: 1.5; /* @kind font */   /* body copy */
  --lh-relaxed: 1.6; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.02em; /* @kind font */  /* large display */
  --ls-snug: -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.04em; /* @kind font */
  --ls-eyebrow: 0.14em; /* @kind font */ /* uppercase eyebrows / labels */
}

/* ---- Type helper classes (optional, used in specimen cards) ---- */
.sm-display { font-family: var(--font-display); font-weight: var(--w-extrabold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.sm-h1 { font-family: var(--font-display); font-weight: var(--w-extrabold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-snug); }
.sm-h2 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
.sm-h3 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); }
.sm-h4 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--fs-h4); line-height: var(--lh-snug); }
.sm-body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: var(--lh-normal); }
.sm-eyebrow { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-micro); line-height: 1; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.sm-mono { font-family: var(--font-mono); font-weight: var(--w-regular); }

/* ============================================================
   StageMode — Spacing, radius, shadow, motion tokens
   8pt base grid. Functional, sporty, precise.
   ============================================================ */
:root {
  /* ---- Spacing (8pt grid, with 4 half-steps) ---- */
  --sp-0: 0; /* @kind spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---- Radius ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;     /* app-icon squircle ratio */
  --r-pill: 999px;
  --r-card: var(--r-md);

  /* ---- Borders ---- */
  --bw-hair: 1px;
  --bw-1: 1.5px;
  --bw-2: 2px;
  --bw-focus: 3px;

  /* ---- Elevation — soft, navy-tinted shadows. No effects on the logo. ---- */
  --shadow-xs: 0 1px 2px rgba(7, 29, 61, 0.06);
  --shadow-sm: 0 2px 6px rgba(7, 29, 61, 0.08);
  --shadow-md: 0 6px 18px rgba(7, 29, 61, 0.10);
  --shadow-lg: 0 16px 40px rgba(7, 29, 61, 0.14);
  --shadow-focus: 0 0 0 3px rgba(255, 107, 0, 0.35);  /* control-orange focus halo */

  /* ---- Motion — quick, confident, sporty. No bounce. ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --sidebar-w: 248px;
  --header-h: 64px;
}

/* Brand refresh 2026: Control accent moves orange -> yellow */
:root{--control:#F4BB00;--control-600:#D9A400;--control-700:#B88A00;--control-tint:#FFF6DB;--brand-yellow:#F4BB00;--brand-yellow-deep:#FEC800;--shadow-focus:0 0 0 3px rgba(244,187,0,.42)}
/* Yellow fills need navy ink, never white (brand rule for bright accents) */
[style*="background: var(--control)"],[style*="background: var(--control)"] *,[style*="background: var(--control-600)"],[style*="background: var(--control-600)"] *,[style*="background: var(--control-700)"],[style*="background: var(--control-700)"] *,[style*="background: var(--marshal)"],[style*="background: var(--marshal)"] *,[style*="background: var(--marshal-600)"],[style*="background: var(--marshal-600)"] *{color:var(--navy-900)!important}
[style*="background: var(--control)"] svg,[style*="background: var(--control-600)"] svg,[style*="background: var(--marshal)"] svg{stroke:var(--navy-900)!important}
/* ============================================================
   StageMode marketing site — shared layout CSS
   Built on the design-system tokens (colors/typography/spacing).
   Atoms (Button, Badge, Card, ProductLogo, StatTile…) come from
   the DS bundle; this file handles page layout + rhythm only.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--navy-900);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---- Layout primitives ---- */
.sm-container { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 40px; }
.sm-section { padding-block: 112px; position: relative; }
.sm-section--tight { padding-block: 72px; }

/* Surfaces */
.sm-dark   { background: var(--navy-900); color: var(--white); }
.sm-dark-2 { background: var(--navy-800); color: var(--white); }
.sm-light  { background: var(--snow); color: var(--navy-800); }

/* ---- Eyebrow ---- */
.sm-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---- Section heading block ---- */
.sm-head { max-width: 720px; }
.sm-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -0.025em; margin: 16px 0 0; text-wrap: balance; }
.sm-head p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; margin: 18px 0 0; color: var(--navy-300); }
.sm-light .sm-head p { color: var(--ink-500); }

/* ---- Grids ---- */
.sm-grid { display: grid; gap: 24px; }
.sm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sm-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Header / nav ---- */
.sm-header { position: sticky; top: 0; z-index: 50; height: 72px; display: flex; align-items: center; background: rgba(4,18,42,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base); }
.sm-header.is-scrolled { border-bottom-color: var(--navy-500); background: rgba(4,18,42,0.92); }
.sm-header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.sm-nav { display: flex; align-items: center; gap: 36px; }
.sm-nav a.sm-link { font-size: 15px; font-weight: 600; color: var(--navy-300); transition: color var(--dur-fast); position: relative; padding: 6px 0; }
.sm-nav a.sm-link:hover { color: var(--white); }
.sm-nav a.sm-link.is-active { color: var(--white); }
.sm-nav a.sm-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--control); border-radius: 2px; }
.sm-burger { display: none; background: none; border: 0; color: var(--white); cursor: pointer; padding: 8px; }

/* ---- Footer ---- */
.sm-footer { background: var(--navy-900); border-top: 1px solid var(--navy-500); padding-block: 64px 40px; }
.sm-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.sm-footer h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-400); margin: 0 0 18px; }
.sm-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sm-footer ul a { font-size: 15px; color: var(--navy-300); transition: color var(--dur-fast); }
.sm-footer ul a:hover { color: var(--white); }
.sm-footer__bar { display: flex; align-items: center; justify-content: space-between; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--navy-500); font-size: 13px; color: var(--navy-400); }

/* ---- Lucide icon sizing ---- */
.sm-ico svg { width: 100%; height: 100%; display: block; }

/* ---- Home hero / safety grids ---- */
.sm-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; }
.sm-hero-board { max-width: 480px; width: 100%; justify-self: end; }
.sm-safety-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; }

/* ---- Products page alternating grid ---- */
.sm-prod-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; }
.sm-prod-copy.is-flip { order: 2; }
.sm-prod-mock.is-flip { order: 1; }

/* ---- Pricing rally-subscription band ---- */
.sm-rallysub-grid { display: grid; grid-template-columns: 1fr auto; }
@media (max-width: 720px) { .sm-rallysub-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---- About story grid ---- */
.sm-story-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .sm-story-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---- Contact page ---- */
.sm-contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; }
.sm-form-row { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) {
  .sm-contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 520px) {
  .sm-form-row { grid-template-columns: 1fr !important; }
}

@media (max-width: 920px) {
  .sm-hero-grid { grid-template-columns: 1fr; min-height: 0 !important; }
  .sm-hero-board { justify-self: stretch; max-width: 520px; }
  .sm-safety-grid { grid-template-columns: 1fr; }
  .sm-prod-grid { grid-template-columns: 1fr; }
  .sm-prod-copy, .sm-prod-copy.is-flip { order: 0; }
  .sm-prod-mock, .sm-prod-mock.is-flip { order: 1; }
  .sm-steps { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .sm-steps { grid-template-columns: 1fr !important; }
}

/* ---- Reveal on scroll ---- */
.sm-reveal { opacity: 0; transform: translateY(22px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
.sm-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sm-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Generic hover-lift card on dark ---- */
.sm-liftcard { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.sm-liftcard:hover { transform: translateY(-4px); }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .sm-section { padding-block: 80px; }
  .sm-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sm-grid--3 { grid-template-columns: 1fr; }
  .sm-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .sm-container { padding-inline: 22px; }
  .sm-nav { display: none; }
  .sm-burger { display: inline-flex; }
  .sm-grid--2, .sm-grid--4 { grid-template-columns: 1fr; }
  .sm-footer__cols { grid-template-columns: 1fr 1fr; }
  .sm-section { padding-block: 64px; }
}

@keyframes sm-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--control) 70%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.sm-feedrow{animation:sm-feedin 320ms var(--ease-out) both}
@keyframes sm-feedin{from{opacity:0;transform:translateY(-5px)}}
.sm-rolecard{transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.sm-rolecard:hover{transform:translateY(-4px)}