@keyframes sc-shine { 
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.scp0:hover { transform: translateY(-2px) !important; }
html, body { margin: 0; }
:root { --band-ka: #FFF200; --band-k: #FF9F0A; --band-ku: #FF9F0A; --band-x: #C7C7CC; --band-laser: #FF453A; --band-none: #8E8E93; --on-band-warm: #1A1500; --on-band-x: #1C1C1E; --on-band-laser: #FFFFFF; --connected: #30D158; --route: #0A84FF; --mute-lowspeed: #FF9F0A; --mute-koob: #FFD60A; --mute-snooze: #2ECCBF; --arrow-unlit: #4C4C50; --surface-app: #131315; --bg: #08090C; --bg-raised: #101215; --glass: rgba(255,255,255,.045); --glass-strong: rgba(255,255,255,.075); --hairline: rgba(255,255,255,.09); --hairline-bold: rgba(255,255,255,.16); --ink: #F4F6FA; --ink-secondary: #C9D2E0; --ink-muted: #8A94A6; --ink-faint: #6E7889; --text-body: var(--ink); --text-dim: var(--ink-muted); --surface-card: var(--glass); --surface-page: var(--bg); --border-hair: var(--hairline); }
:root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "Segoe UI", Inter, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --numeric: var(--font-mono); --text-hero: clamp(2.6rem, 7vw, 4.5rem); --text-h1: clamp(2.1rem, 5vw, 3.2rem); --text-h2: clamp(1.6rem, 3.4vw, 2.2rem); --text-h3: 1.3rem; --text-lead: clamp(1.05rem, 2.4vw, 1.3rem); --text-base: 1rem; --text-small: .9rem; --text-fine: .8rem; --weight-hero: 680; --weight-head: 660; --weight-strong: 640; --tracking-tight: -.03em; --tracking-wide: .14em; }
:root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --r-chip: 999px; --r-input: 12px; --r-card: 20px; --r-panel: 24px; }
:root { --blur: blur(20px); --lift: 0 18px 50px rgba(0,0,0,.6); --glow-ka: 0 10px 30px rgba(255,242,0,.22); --glow-laser: 0 10px 30px rgba(255,69,58,.28); --ease: cubic-bezier(.2,.7,.3,1); --fast: .18s; --slow: .7s; }
@media (prefers-reduced-motion: reduce) {
  * { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
:root { --band-ka: #FFF200; --band-k: #FF9F0A; --band-ku: #FF9F0A; --band-x: #C7C7CC; --band-laser: #FF453A; --band-none: #8E8E93; --on-band-warm: #1A1500; --on-band-x: #1C1C1E; --on-band-laser: #FFFFFF; --connected: #30D158; --route: #0A84FF; --mute-lowspeed: #FF9F0A; --mute-koob: #FFD60A; --mute-snooze: #2ECCBF; --arrow-unlit: #4C4C50; --surface-app: #131315; --bg: #08090C; --bg-raised: #101215; --glass: rgba(255,255,255,.045); --glass-strong: rgba(255,255,255,.075); --hairline: rgba(255,255,255,.09); --hairline-bold: rgba(255,255,255,.16); --ink: #F4F6FA; --ink-secondary: #C9D2E0; --ink-muted: #8A94A6; --ink-faint: #6E7889; --text-body: var(--ink); --text-dim: var(--ink-muted); --surface-card: var(--glass); --surface-page: var(--bg); --border-hair: var(--hairline); }
:root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "Segoe UI", Inter, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --numeric: var(--font-mono); --text-hero: clamp(2.6rem, 7vw, 4.5rem); --text-h1: clamp(2.1rem, 5vw, 3.2rem); --text-h2: clamp(1.6rem, 3.4vw, 2.2rem); --text-h3: 1.3rem; --text-lead: clamp(1.05rem, 2.4vw, 1.3rem); --text-base: 1rem; --text-small: .9rem; --text-fine: .8rem; --weight-hero: 680; --weight-head: 660; --weight-strong: 640; --tracking-tight: -.03em; --tracking-wide: .14em; }
:root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --r-chip: 999px; --r-input: 12px; --r-card: 20px; --r-panel: 24px; }
:root { --blur: blur(20px); --lift: 0 18px 50px rgba(0,0,0,.6); --glow-ka: 0 10px 30px rgba(255,242,0,.22); --glow-laser: 0 10px 30px rgba(255,69,58,.28); --ease: cubic-bezier(.2,.7,.3,1); --fast: .18s; --slow: .7s; }
@media (prefers-reduced-motion: reduce) {
  * { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
body { margin: 0px; background: rgb(8, 9, 12); color: rgb(244, 246, 250); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--ink-secondary); text-decoration: none; transition: color var(--fast) var(--ease); }
a:hover { color: var(--ink); }
::placeholder { color: var(--ink-faint); }
form input { box-sizing: border-box; }
form button { white-space: nowrap; }
@keyframes drawCorridor { 
  0% { stroke-dashoffset: 520; }
  100% { stroke-dashoffset: 0; }
}
@keyframes pulseDot { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (max-width: 1040px) {
  [data-grid2] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-grid3] { grid-template-columns: 1fr 1fr !important; }
  [data-flip] { order: 0 !important; }
}
@media (max-width: 660px) {
  [data-grid3] { grid-template-columns: 1fr !important; }
  [data-pad] { padding-left: 20px !important; padding-right: 20px !important; }
}

/* --- semantic token: lockout zone overlay.
   The app draws these with Color.orange (#FF9F0A), fill .18-.22 / stroke .55-.60.
   Kept separate from --band-k so band identity and zone rendering can diverge. --- */
:root { --lockout-zone: #FF9F0A; }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin:0; background: var(--bg); color: var(--ink); font-family: var(--font);
       -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--band-ka); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--band-ka); color: var(--on-band-warm); }

/* Kit form: the design supplies the look, so only the parts Kit injects need styling */
.formkit-alert { color: var(--band-laser); font-size: .9rem; }
.formkit-alert:empty { display: none; }
.formkit-alert-success { color: var(--connected); }

@media (max-width: 760px) {
  section > div { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* sticky header is ~57px; keep in-page anchors clear of it */
section[id] { scroll-margin-top: 72px; }

/* --- Header nav: keep the sticky bar to one line on small screens.
   With five destinations plus the offer CTA the nav wrapped to 3-4 rows and the
   sticky header covered a third of a phone screen. Below 820px the homepage
   section anchors are hidden (the logo already goes home, and those sections are
   reachable by scrolling once you're there); page links and the CTA stay. --- */
@media (max-width: 820px) {
  /* The nav carries inline gap/font-size, so these need !important to win. */
  header nav { gap: 16px !important; font-size: .86rem !important;
               flex: 1 0 100%; justify-content: flex-start !important; }
  /* Hide the homepage section anchors only — page destinations and the CTA stay. */
  header nav > a[href$="#pillars"], header nav > a[href$="#carplay"] { display: none; }
  /* Let the logo and the nav each take their own row. */
  header > div { flex-wrap: wrap; gap: 10px !important; }
}
@media (max-width: 470px) {
  header nav { gap: 11px !important; font-size: .78rem !important; }
  header > div { padding-left: 18px !important; padding-right: 18px !important; }
  /* The current-page marker is bold, which is just wide enough to wrap the row. */
  header nav > span { font-weight: 600 !important; }
}
@media (max-width: 400px) {
  header nav { gap: 9px !important; font-size: .74rem !important; }
}

/* The offer popover lives inside <nav>, which sets white-space:nowrap for the
   link row — that stopped the panel's own copy from wrapping and clipped it on
   narrow screens. Reset it for the panel's contents. */
#offerPanel, #offerPanel * { white-space: normal; }
#offerPanel button[type="submit"] { white-space: nowrap; }

/* The saved-alert record card tracks the reader down the argument beside it.
   Released below 1040px, where [data-grid2] collapses to one column and a
   sticky card would just hover over the copy that follows it. */
@media (max-width: 1040px) {
  [data-sticky-card] { position: static !important; }
}