@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Poppins:wght@300;400;500;600&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  --ink: #0a0a0a;
  --panel: #141414;
  --panel-raised: #1a1a1a;
  --cobra-red: #7c0a02;
  --hot-red: #e6392b;
  --gold: #c9a227;
  --soft-gold: #e8b923;
  --cream: #f5f0e8;
  --muted: #9aa3a8;
  --border-red: rgba(230, 57, 43, .22);
  --border-gold: rgba(201, 162, 39, .25);
  --focus-ring: rgba(230, 57, 43, .42);
  --shadow: 0 28px 80px rgba(0, 0, 0, .45);
  --max-width: 1180px;
  --display: 'Orbitron', sans-serif;
  --body: 'Poppins', sans-serif;
  /* Arabic needs a family of its own, named explicitly.

     Poppins and Orbitron contain no Arabic glyphs at all, so before this token
     existed every Arabic character on the site fell through to the generic
     `sans-serif` — which means it was rendered by whatever the reader's OS
     happened to pick. On macOS that is Geeza Pro, which looks deliberate and is
     why this went unnoticed through an entire build: the developer machine had a
     font the readers do not. On Windows the same pages come out in Arial or
     Segoe UI, with different weights, different proportions and different
     vertical metrics, so both the type and the layout change.

     Noto Sans Arabic is loaded with the others and named first, so the Arabic
     side is now the same typeface on every machine instead of a lottery. The
     rest of the stack is the old lottery, kept in order of preference for the
     moment before the webfont arrives or if it fails to load. */
  --arabic: 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: dark; overflow-x: clip; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  color: var(--cream);
  background:
    radial-gradient(circle at 82% -5%, rgba(124, 10, 2, .35), transparent 30rem),
    linear-gradient(rgba(10, 10, 10, .93), rgba(10, 10, 10, .98)),
    url('snake_background.png') center / cover fixed;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(245, 240, 232, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 240, 232, .12) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

a { color: inherit; }
img, video { display: block; max-width: 100%; }
button, textarea, input { font: inherit; }
main { flex: 1; width: 100%; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

h1, h2, h3, .logo {
  font-family: var(--display);
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.35rem, 2.6vw, 2.35rem); line-height: 1.15; }
h3 { font-size: 1rem; line-height: 1.35; }
p { color: var(--muted); }

/* Accessibility */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--cream);
  background: var(--hot-red);
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 12px; outline: 3px solid var(--gold); outline-offset: 2px; }

/* Navigation */
nav, .site-nav {
  width: min(var(--max-width), calc(100% - 40px));
  min-height: 76px;
  margin: 18px auto 0;
  padding: 10px 12px 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  position: sticky;
  top: 12px;
  z-index: 50;
  background: rgba(10, 10, 10, .9);
  border: 1px solid var(--border-red);
  border-radius: 16px;
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
}

.logo {
  min-width: max-content;
  display: flex;
  align-items: center;
  color: var(--cream);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  text-decoration: none;
}

.logo::before {
  content: '';
  width: 45px;
  height: 45px;
  margin-right: 10px;
  flex: 0 0 auto;
  background: url('cobra-race-mark.png') center / 152% no-repeat;
  border: 1px solid var(--border-gold);
  border-radius: 11px;
}

.nav-toggle {
  display: none; /* shown only in max-width 1040px media */
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  background: var(--hot-red);
  border: 2px solid var(--gold);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

nav > ul, .site-nav > ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
}
nav a:not(.logo), .site-nav ul a {
  display: block;
  padding: 9px 10px;
  color: var(--muted);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .035em;
  text-decoration: none;
  transition: color .2s, background .2s, transform .2s;
}
nav a:not(.logo):hover,
nav a:not(.logo):focus-visible,
.site-nav ul a:hover,
.site-nav ul a:focus-visible {
  color: var(--gold);
  background: rgba(201, 162, 39, .07);
  outline: 0;
}
nav a[aria-current='page'],
.site-nav ul a[aria-current='page'] {
  color: var(--cream);
  background: var(--hot-red);
  box-shadow: 0 7px 18px rgba(230, 57, 43, .2);
}

/* Homepage */
.home-hero {
  width: min(var(--max-width), calc(100% - 40px));
  min-height: 670px;
  margin: 0 auto;
  padding: 115px 0 90px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}

.home-hero::before {
  content: '01';
  position: absolute;
  right: 1%;
  top: 50%;
  z-index: -2;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 57, 43, .2);
  font: 900 clamp(12rem, 28vw, 25rem)/.7 var(--display);
  transform: translateY(-50%);
}

.home-hero::after {
  content: '';
  position: absolute;
  right: -5%;
  top: 50%;
  z-index: -1;
  width: min(540px, 48vw);
  aspect-ratio: 1;
  background: url('cobra-race-mark.png') center / contain no-repeat;
  opacity: .2;
  transform: translateY(-50%);
  filter: drop-shadow(0 30px 50px #000);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  color: var(--gold);
  font: 700 12px/1 var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 40px; height: 2px; background: var(--hot-red); }
.home-hero h1 { max-width: 840px; }
.home-hero h1 span { color: var(--hot-red); }
.home-hero p { max-width: 580px; margin: 28px 0 34px; font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { width: min(660px, 100%); margin-top: 62px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-red); }
.hero-proof > div { padding: 18px 22px 0 0; }
.hero-proof strong { display: block; color: var(--cream); font: 700 1.2rem/1 var(--display); }
.hero-proof span { display: block; margin-top: 7px; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }

.primary-action, .secondary-action, #start-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .025em;
  text-decoration: none;
  transition: transform .2s, background .2s, border-color .2s, color .2s;
}
.primary-action { color: var(--cream); background: var(--hot-red); border: 1px solid var(--hot-red); }
.secondary-action { color: var(--cream); background: rgba(20,20,20,.7); border: 1px solid var(--border-gold); }
.primary-action:hover { background: var(--cobra-red); border-color: var(--gold); transform: translateY(-2px); }
.secondary-action:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }

/* Shared page headers */
/* `:not(.home-world)` on every rule in this family, and it is load-bearing.

   These rules dress the page headers the rest of the site uses. The homepage
   hero ported over from the Astro build is also a <header>, so it was caught by
   them and given a 1180px max-width and 105px of top padding it was never
   designed for. Both were visible and neither was obvious:

   the strip inside it lays panels out at 100vw each, so clamping the header to
   1180px turned it into a 1180px window onto an 1856px panel — and since each
   panel centres its own content, everything inside sat (viewport - 1180) / 2 too
   far right. That is 130px at 1440px wide, which reads as an odd margin, and
   338px at 1856px, which reads as broken. The bug got worse the bigger the
   screen, which is why it survived being built and reviewed on a laptop.

   The padding then pushed the pinned hero down by 105px on top of that. */
header:not(.home-hero):not(.home-world) {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto;
  padding: 105px 0 48px;
  position: relative;
  text-align: start;
}
header:not(.home-hero):not(.home-world)::before {
  content: 'COBRAS / EVGP';
  display: block;
  margin-bottom: 20px;
  color: var(--gold);
  font: 700 11px/1 var(--display);
  letter-spacing: .17em;
}
header:not(.home-hero):not(.home-world) h1 { max-width: 920px; }
header:not(.home-hero):not(.home-world) > p { max-width: 680px; margin-top: 20px; }

/* Carousels */
.splide {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto 90px;
  padding: 18px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border-red);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.splide__slide { min-height: 500px; display: flex; align-items: center; gap: 44px; padding: 22px; }
.splide__slide .text { flex: 1; }
.splide__slide .text h2 { margin-bottom: 18px; color: var(--cream); }
.splide__slide .text h2::after { content: ''; display: block; width: 54px; height: 3px; margin-top: 15px; background: var(--hot-red); }
.splide__slide .text p { max-width: 46ch; }
.splide__slide img, .splide__slide video {
  flex: 1.15;
  width: 55%;
  height: 460px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border-gold);
  background: #080808;
}
#home-carousel .splide__slide { justify-content: center; }
#home-carousel .splide__slide img, #home-carousel .splide__slide video { width: 100%; max-width: 100%; object-fit: contain; }
.splide__arrow { background: var(--hot-red) !important; opacity: 1 !important; }
.splide__arrow svg { fill: var(--cream) !important; }
.splide__pagination__page.is-active { background: var(--hot-red) !important; }
.splide { cursor: grab; }
.splide:active { cursor: grabbing; }
.splide:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 5px; }

/* Homepage story */
.section-index { color: var(--hot-red); font: 700 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.section-kicker { display: block; margin-bottom: 15px; color: var(--gold); font: 700 10px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.text-link { display: inline-flex; gap: 12px; margin-top: 24px; color: var(--cream); font-weight: 600; text-decoration: none; }
.text-link span { color: var(--hot-red); transition: transform .2s; }
.text-link:hover span { transform: translateX(5px); }

.landing-intro {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto 120px;
  padding: 34px 0 0;
  display: grid;
  grid-template-columns: 140px 1fr 1.05fr;
  gap: 46px;
  align-items: center;
  border-top: 1px solid var(--border-red);
}
.landing-intro-copy h2 { max-width: 520px; }
.landing-intro-copy p { max-width: 56ch; margin-top: 22px; }
.landing-feature-image { position: relative; margin: 0; }
.landing-feature-image::before { content: ''; position: absolute; inset: -10px 12px 12px -10px; z-index: -1; border: 1px solid var(--border-gold); border-radius: 13px; }
.landing-feature-image img { width: 100%; height: 470px; object-fit: cover; border-radius: 11px; filter: saturate(.8) contrast(1.05); }
.landing-feature-image figcaption { margin-top: 12px; color: var(--muted); font-size: .7rem; }

.landing-pillars { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto 120px; padding: 70px 0; border-top: 1px solid rgba(245,240,232,.08); border-bottom: 1px solid rgba(245,240,232,.08); }
.section-heading { display: grid; grid-template-columns: 190px 1fr; gap: 30px; margin-bottom: 44px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pillar-grid article { min-height: 260px; padding: 28px; background: var(--panel); border: 1px solid rgba(245,240,232,.07); border-radius: 12px; transition: transform .25s, border-color .25s; }
.pillar-grid article:hover { transform: translateY(-5px); border-color: var(--border-gold); }
.pillar-grid article > span { color: var(--hot-red); font: 700 11px/1 var(--display); }
.pillar-grid h3 { margin: 65px 0 14px; font-size: .95rem; }
.pillar-grid p { font-size: .84rem; }

.landing-journey { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto 120px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.journey-visual { position: relative; }
.journey-visual img { width: 100%; height: 600px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border-red); filter: saturate(.72) contrast(1.08); }
/* `p.section-index`, not `.section-index`, and the element selector is the whole
   point. assets/home/homepage.css carries the ported Astro rule
   `.section-index[data-astro-cid-zkhec6xw] { margin: 0 }`, which is also two
   selectors' worth of specificity — so the plain class version of this rule tied
   and lost on source order, and the index sat directly on top of the kicker with
   both at line-height 1. Adding the tag name breaks the tie.

   Only this section needs it. Every other `.section-index` sits in a
   `.section-heading` grid where the kicker is placed in its own track, so a
   bottom margin there would push against a layout that is already correct.
   `.journey-copy` is the one place the two labels are stacked in normal flow. */
.journey-copy > p.section-index { margin-bottom: 8px; }
.journey-copy h2 { margin-bottom: 28px; }
.journey-copy ol { margin-bottom: 32px; list-style: none; }
.journey-copy li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 17px 0; border-top: 1px solid rgba(245,240,232,.08); }
.journey-copy li > span { color: var(--hot-red); font: 700 10px/1.6 var(--display); }
.journey-copy li strong { color: var(--cream); font-family: var(--display); text-transform: uppercase; }
.journey-copy li p { margin-top: 5px; font-size: .8rem; }

.landing-cta { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto 100px; padding: 34px; display: grid; grid-template-columns: 84px 1fr auto; gap: 28px; align-items: center; background: linear-gradient(110deg, #1a0302, var(--panel)); border: 1px solid var(--border-red); border-left: 5px solid var(--hot-red); border-radius: 12px; }
.landing-cta > img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; }
.landing-cta h2 { max-width: 720px; font-size: clamp(1.3rem,3vw,2.1rem); }

/* Countdown, dashboard, stories, journal */
.race-countdown { width: min(var(--max-width), calc(100% - 40px)); margin: -36px auto 120px; padding: 28px 32px; display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; background: linear-gradient(110deg, var(--cobra-red), #240201); border: 1px solid var(--border-red); border-radius: 12px; box-shadow: var(--shadow); }
.race-countdown h2 { font-size: clamp(1.2rem,2.4vw,2rem); }
.countdown-grid { display: grid; grid-template-columns: repeat(4, 88px); gap: 5px; }
.countdown-grid > div { padding: 12px 8px; text-align: center; background: rgba(10,10,10,.5); border-radius: 8px; }
.countdown-grid strong { display: block; color: var(--cream); font: 700 1.25rem/1 var(--display); }
.countdown-grid span { display: block; margin-top: 7px; color: var(--muted); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }

.car-dashboard, .engineering-stories, .workshop-journal { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto 120px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; }
.dashboard-grid article { min-height: 210px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; background: var(--panel); border: 1px solid rgba(245,240,232,.08); border-radius: 11px; }
.dashboard-grid article > span { color: var(--muted); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }
.dashboard-grid strong { color: var(--hot-red); font: 900 clamp(2.1rem,4vw,3.8rem)/1 var(--display); }
.dashboard-grid small { margin-left: 5px; color: var(--gold); font-size: .68rem; }
.dashboard-grid i { color: var(--muted); font-size: .7rem; font-style: normal; }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.story-grid article { padding: 27px; background: var(--panel); border: 1px solid rgba(245,240,232,.08); border-radius: 12px; }
.story-tag { margin-bottom: 42px; color: var(--hot-red); font: 700 9px/1 var(--display); letter-spacing: .13em; text-transform: uppercase; }
.story-grid h3 { margin-bottom: 12px; }
.story-grid > article > p { min-height: 80px; font-size: .84rem; }
.story-answer { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border-gold); }
.story-answer span { color: var(--gold); font: 700 9px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.story-answer p { margin-top: 9px; color: var(--cream); font-size: .8rem; }
.journal-list { border-top: 1px solid var(--border-red); }
.journal-list article { display: grid; grid-template-columns: 150px 1fr; gap: 30px; padding: 26px 0; border-bottom: 1px solid rgba(245,240,232,.08); }
.journal-list article > span { color: var(--hot-red); font: 700 10px/1.7 var(--display); text-transform: uppercase; }
.journal-list h3 { margin-bottom: 5px; }
.journal-list p { font-size: .84rem; }
.chat-prompts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chat-prompts button { padding: 7px 9px; color: var(--gold); background: rgba(201,162,39,.07); border: 1px solid var(--border-gold); border-radius: 999px; font-size: .66rem; cursor: pointer; }
.chat-prompts button:hover { color: var(--cream); border-color: var(--gold); }

/* Scroll-driven build timeline */
.timeline-page header { padding-bottom: 40px; }
.build-jumps { width: min(1080px, calc(100% - 32px)); margin: 0 auto 40px; }
.build-jumps ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.build-jumps a { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 10px 14px; border: 1px solid var(--border-gold); background: var(--panel); text-decoration: none; font-size: .85rem; }
.build-jumps a:hover { border-color: var(--gold); }
.build-jumps a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.build-jumps span { color: var(--gold); }
.build-timeline { width: min(1080px, calc(100% - 40px)); margin: 0 auto; position: relative; }
.timeline-progress { width: 2px; height: calc(100% - 160px); position: absolute; left: 50%; top: 520px; z-index: -1; background: rgba(245,240,232,.08); }
.timeline-progress span { width: 100%; height: 100%; display: block; transform: scaleY(0); transform-origin: top; background: var(--hot-red); }
.timeline-step { min-height: 760px; display: grid; grid-template-columns: 60px minmax(0,.82fr) minmax(0,1.18fr); gap: 38px; align-items: center; scroll-margin-top: 130px; }
.timeline-step.reverse { grid-template-columns: 60px 1.18fr .82fr; }
.timeline-step.reverse .timeline-copy { grid-column: 3; }
.timeline-step.reverse figure { grid-column: 2; grid-row: 1; }
.timeline-number { align-self: start; padding-top: 150px; color: var(--hot-red); font: 900 1.4rem/1 var(--display); }
.timeline-copy > span { color: var(--gold); font: 700 9px/1 var(--display); letter-spacing: .15em; text-transform: uppercase; }
.timeline-copy h2 { margin: 18px 0; overflow-wrap: anywhere; }
.timeline-copy p { font-size: 1rem; }
.timeline-copy ul { margin-top: 28px; list-style: none; }
.timeline-copy li { padding: 8px 0; color: var(--cream); border-bottom: 1px solid rgba(245,240,232,.07); font-size: .85rem; }
.timeline-copy li::before { content: '—'; margin-right: 10px; color: var(--hot-red); }
.timeline-step figure { margin: 0; }
.timeline-step img, .timeline-step video { width: 100%; height: 590px; object-fit: cover; background: #050505; border: 1px solid var(--border-red); border-radius: 12px; }
.timeline-step video { object-fit: contain; }
.timeline-step figcaption { margin-top: 10px; color: var(--muted); font-size: .8rem; }
.timeline-finish { width: min(900px, calc(100% - 40px)); margin: 40px auto 110px; padding: 60px; text-align: center; background: linear-gradient(120deg, #260302, var(--panel)); border: 1px solid var(--border-red); border-radius: 14px; }
.timeline-finish p { max-width: 600px; margin: 17px auto 26px; }

/* Sponsorship */
.sponsor-hero { width: min(var(--max-width), calc(100% - 40px)); min-height: 650px; padding: 110px 0 90px !important; display: flex; flex-direction: column; justify-content: center; }
.sponsor-hero::after { content: ''; position: absolute; right: 1%; width: min(450px,40vw); aspect-ratio: 1; background: url('cobra-race-mark.png') center/cover; opacity: .16; border-radius: 30px; }
.sponsor-hero h1 span { color: var(--hot-red); }
.sponsor-hero p { max-width: 650px; margin: 25px 0 32px; }
.sponsor-impact, .support-needs, .partner-levels, .sponsor-interest, .sponsor-wall { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto 120px; }
.sponsor-impact { display: grid; grid-template-columns: 130px 1fr; gap: 35px; }
.sponsor-benefits { grid-column: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.sponsor-benefits article, .needs-grid article, .level-grid article { padding: 28px; background: var(--panel); border: 1px solid rgba(245,240,232,.08); border-radius: 12px; }
.sponsor-benefits strong { color: var(--hot-red); font: 900 2rem/1 var(--display); }
.sponsor-benefits h3 { margin: 35px 0 12px; }
.sponsor-benefits p, .needs-grid p, .level-grid p { font-size: .82rem; }
.support-needs > div:first-child { max-width: 720px; margin-bottom: 38px; }
.needs-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.needs-grid span { color: var(--hot-red); font: 700 10px/1 var(--display); }
.needs-grid h3 { margin: 40px 0 12px; }
.level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.level-grid article > span { color: var(--gold); font: 700 9px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.level-grid h3 { margin: 22px 0 14px; }
.level-grid ul { margin-top: 26px; list-style: none; }
.level-grid li { padding: 9px 0; color: var(--cream); border-top: 1px solid rgba(245,240,232,.07); font-size: .72rem; }
/* Sponsorship tiers — each tier carries its metal. */
.tier-title { --tier: var(--hot-red); }
.tier-gold { --tier: #d4af37; }
.tier-silver { --tier: #b8c0c8; }
.tier-bronze { --tier: #c47b4a; }
.tier-supporter { --tier: #9aa3a8; }
.level-grid [class*="tier-"], .package-grid [class*="tier-"] { border-color: color-mix(in srgb, var(--tier) 45%, transparent); border-top: 3px solid var(--tier); }
.level-grid [class*="tier-"] > span { color: var(--tier); }
.package-grid [class*="tier-"] .section-kicker { color: var(--tier); }
.package-grid [class*="tier-"] h3 { color: var(--tier); }
.wall-slot[class*="tier-"] { border-color: color-mix(in srgb, var(--tier) 40%, transparent); }
.wall-slot[class*="tier-"] span { color: var(--tier); }
.level-grid .featured.tier-title { border-color: var(--hot-red); transform: translateY(-12px); }
.funding-bar { margin: 34px 0 46px; }
.funding-fill span { animation: funding-fill 1.4s ease-out both; }
@keyframes funding-fill { from { width: 0; } }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 38px; }
.wall-slot { padding: 28px; min-height: 120px; display: grid; align-content: space-between; gap: 18px; background: var(--panel); border: 1px dashed rgba(245,240,232,.18); border-radius: 12px; }
.wall-slot span { color: var(--gold); font: 700 9px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.wall-slot strong { font: 700 1rem/1.3 var(--display); color: var(--muted); }
.wall-slot.is-filled { border: 1px solid var(--border-gold); border-style: solid; }
.wall-slot.is-filled strong { color: var(--cream); }
.sponsor-interest { padding: 36px; display: grid; grid-template-columns: 100px 1fr auto; gap: 28px; align-items: center; background: linear-gradient(110deg,var(--cobra-red),#230201); border-radius: 14px; }
.sponsor-interest img { width: 100px; height: 100px; object-fit: cover; border-radius: 12px; }
.sponsor-interest p { margin-top: 8px; }
.sponsor-interest button { border: 0; cursor: pointer; }

/* Team */
.members-grid {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto 90px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.member-filters { width: min(var(--max-width), calc(100% - 40px)); margin: -24px auto 28px; display: flex; flex-wrap: wrap; gap: 7px; }
.member-filters button { padding: 9px 13px; color: var(--muted); background: var(--panel); border: 1px solid rgba(245,240,232,.09); border-radius: 999px; font-size: .7rem; cursor: pointer; }
.member-filters button:hover { color: var(--gold); border-color: var(--border-gold); }
.member-filters button.is-active { color: var(--cream); background: var(--hot-red); border-color: var(--hot-red); }
.members-empty {
  width: min(var(--max-width), calc(100% - 40px));
  margin: -10px auto 40px;
  color: var(--muted);
  font-size: .85rem;
}
.members-grid section[hidden] { display: none; }
.members-grid section {
  margin: 0;
  padding: 12px 12px 20px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(245,240,232,.08);
  border-radius: 14px;
  transition: transform .24s, border-color .24s;
}
.members-grid section:hover { transform: translateY(-5px); border-color: var(--border-gold); }
.members-grid img { width: 100%; height: 178px; object-fit: contain; background: #101010; border-radius: 9px; opacity: .82; }
.members-grid h2 { margin-top: 16px; font-size: .86rem; letter-spacing: .01em; }
.members-grid p { width: max-content; margin-top: 8px; padding: 5px 8px; color: var(--gold); background: rgba(201,162,39,.07); border: 1px solid var(--border-gold); border-radius: 999px; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }

/* About */
.about-page, .specs-page { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto; padding: 0; }
.about-page header, .specs-page header { width: 100%; }
.mission-box {
  max-width: 760px;
  margin-top: 30px;
  padding: 26px 28px;
  background: linear-gradient(110deg, var(--cobra-red), #340401);
  border-left: 4px solid var(--hot-red);
  border-radius: 0 12px 12px 0;
  box-shadow: var(--shadow);
}
.mission-label { display: block; margin-bottom: 9px; color: var(--gold); font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.mission-box p { color: var(--cream); }
.about-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 0 0 26px; padding: 0; }
.about-card, .spec-section, .learn-card {
  margin: 0;
  padding: 28px;
  background: var(--panel);
  border: 1px solid rgba(245,240,232,.08);
  border-top: 2px solid var(--hot-red);
  border-radius: 12px;
}
.about-card h2, .spec-section h2 { margin-bottom: 16px; font-size: 1rem; }
.about-card p { font-size: .9rem; }
.stats-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 90px; padding: 0; overflow: hidden; background: var(--border-red); border: 1px solid var(--border-red); border-radius: 12px; }
.stat { padding: 32px 20px; text-align: center; background: #101010; }
.stat-number { display: block; color: var(--hot-red); font: 900 clamp(2rem,4vw,3.6rem)/1 var(--display); }
.stat-label { display: block; margin-top: 9px; color: var(--muted); font-size: .82rem; }

/* Specs */
.specs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-bottom: 36px; }
.specs-grid .spec-section { width: auto; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid rgba(245,240,232,.07); }
.spec-table tr:last-child { border: 0; }
.spec-table td { padding: 13px 0; vertical-align: top; font-size: .84rem; }
.spec-label { width: 46%; padding-inline-end: 18px; color: var(--muted); }
.spec-value { color: var(--cream); font-weight: 500; }
.last-updated { margin: 0 0 70px; color: var(--gold); font-size: .75rem; text-align: center; text-transform: uppercase; letter-spacing: .08em; }

/* Education cards */
.edu-hero { width: min(var(--max-width), calc(100% - 40px)) !important; margin: 0 auto !important; padding: 105px 0 48px !important; text-align: start !important; }
.edu-hero::before { content: 'KNOW THE MACHINE'; display: block; margin-bottom: 20px; color: var(--gold); font: 700 11px/1 var(--display); letter-spacing: .17em; }
.edu-hero h1 { font-size: clamp(2.5rem,6vw,5.6rem) !important; }
.edu-hero p { max-width: 640px !important; margin: 18px 0 0 !important; color: var(--muted) !important; }
.cards-container { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto 90px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.cards-container .learn-card { padding: 28px !important; background: var(--panel) !important; border: 1px solid rgba(245,240,232,.08) !important; border-top: 2px solid var(--hot-red) !important; border-radius: 12px !important; backdrop-filter: none !important; }
.cards-container .learn-card:hover { transform: translateY(-4px); border-color: var(--border-gold) !important; background: var(--panel-raised) !important; }
.cards-container .learn-card h3 { margin-bottom: 12px !important; color: var(--cream) !important; font-size: .94rem !important; }
.cards-container .learn-card p { color: var(--muted) !important; font-size: .84rem !important; line-height: 1.7 !important; }

/* Game */
#game-container {
  width: min(600px, calc(100% - 30px));
  height: 500px;
  margin: 12px auto;
  position: relative;
  overflow: hidden;
  background: #272727;
  border: 2px solid var(--hot-red);
  border-radius: 14px;
  box-shadow: 0 0 0 8px rgba(230,57,43,.05), var(--shadow);
}
#game-container::before { content: ''; position: absolute; inset: 0 auto 0 50%; width: 8px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--gold) 0 40px, transparent 40px 80px); animation: roadMove .5s linear infinite; }
@keyframes roadMove { to { background-position: 0 80px; } }
#player { width: 80px; height: 120px; position: absolute; bottom: 20px; left: 260px; background: url('car.png') center / contain no-repeat; transition: left .1s ease-out; }
.obstacle { width: 80px; height: 100px; position: absolute; top: -100px; background: url('snake_game.png') center / contain no-repeat; }
.battery { width: 60px; height: 60px; position: absolute; top: -60px; background: url('battery.png') center / contain no-repeat; }
#score, #level { position: absolute; left: 14px; z-index: 10; color: var(--cream); font: 700 16px/1 var(--display); }
#score { top: 14px; } #level { top: 42px; }
#start-btn { margin: 18px auto 70px; color: var(--cream); background: var(--hot-red); border: 1px solid var(--hot-red); cursor: pointer; }
#start-btn:hover { background: var(--cobra-red); border-color: var(--gold); }
#level-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(10,10,10,.82); }
#level-overlay.hidden { display: none; }
.overlay-box { padding: 28px; text-align: center; background: var(--panel); border: 1px solid var(--border-gold); border-radius: 12px; }
#overlay-text { color: var(--cream); font: 900 28px/1.1 var(--display); }
#overlay-subtext { margin-top: 10px; color: var(--muted); }

/* Chat */
.open-button { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: auto; padding: 13px 18px; color: var(--cream); background: var(--hot-red); border: 1px solid rgba(245,240,232,.18); border-radius: 999px; box-shadow: 0 14px 38px rgba(0,0,0,.5); font: 700 12px/1 var(--display); cursor: pointer; opacity: 1; }
.open-button::before { content: '⚡ '; color: var(--gold); }
.open-button:hover { background: var(--cobra-red); border-color: var(--gold); }
.chat-popup { display: none; position: fixed; right: 20px; bottom: 20px; z-index: 80; width: min(370px, calc(100vw - 30px)); overflow: hidden; background: var(--panel); border: 1px solid var(--border-red); border-radius: 14px; box-shadow: var(--shadow); }
.form-container { max-width: none; padding: 18px; color: var(--cream); background: var(--panel); }
.form-container h1 { margin-bottom: 14px; color: var(--cream); font-size: 1.3rem; }
.chat-messages { min-height: 150px; max-height: 280px; margin-bottom: 10px; padding: 10px; overflow-y: auto; background: #0d0d0d; border-radius: 9px; font-size: .82rem; }
.chat-messages .user-msg, .chat-messages .bot-msg { margin: 7px 0; padding: 9px 11px; border-radius: 9px; }
.chat-messages .user-msg { margin-left: 45px; color: var(--cream); background: var(--cobra-red); text-align: right; }
.chat-messages .bot-msg { margin-right: 45px; color: #242424; background: var(--cream); }
.chat-messages .bot-msg.is-local { border-left: 3px solid var(--gold); }
.form-container textarea { width: 100%; min-height: 68px !important; margin: 0 0 10px; padding: 12px; resize: vertical; color: var(--cream); background: #0d0d0d; border: 1px solid rgba(245,240,232,.12); border-radius: 9px; }
.form-container textarea:focus { outline: 3px solid var(--focus-ring); border-color: var(--hot-red); }
.form-container .btn { width: 100%; margin-bottom: 8px; padding: 11px; color: var(--cream); background: var(--hot-red); border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; opacity: 1; }
.form-container .cancel { background: #2a2a2a; }

/* CarGPT lives in the top navigation */
nav .open-button {
  position: static;
  min-width: max-content;
  margin-left: 4px;
  padding: 11px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 9px;
  box-shadow: none;
}
nav .open-button::before { content: none; }
.chat-status { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(201,162,39,.8); flex: 0 0 auto; }
.chat-status.is-offline { background: var(--muted); box-shadow: none; }
.chat-status.is-online { background: #3dba6c; box-shadow: 0 0 10px rgba(61,186,108,.7); }
.chat-popup { top: 106px; right: max(20px, calc((100vw - var(--max-width)) / 2)); bottom: auto; transform: translateY(-10px) scale(.98); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.chat-popup.is-open { display: block; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.bot-msg.is-thinking { color: var(--muted); background: #222; font-style: italic; }

/* Cobra Circuit */
.race-page header { padding-bottom: 38px; }
.race-kicker { display: block; margin-bottom: 18px; color: var(--gold); font: 700 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.race-shell { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 0; overflow: hidden; background: #0d0d0d; border: 1px solid var(--border-red); border-radius: 18px; box-shadow: var(--shadow); }
/* The parts that genuinely must not mirror: the steer pad, whose arrows mean
   physical left and right, and the numeric readouts. Everything else in the
   panel is prose and follows the page. */
.race-controls, .race-stats, .energy-meter, .race-score { direction: ltr; }
.race-page { direction: inherit; }
html[dir="rtl"] .race-shell, html[dir="rtl"] .race-shell * { text-align: start; }
.race-topbar { min-height: 78px; display: grid; grid-template-columns: repeat(3, 120px) 1fr; align-items: center; gap: 18px; padding: 14px 20px; background: var(--panel); border-bottom: 1px solid var(--border-red); }
.race-stat span, .energy-meter > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.race-stat strong { color: var(--cream); font: 700 18px/1 var(--display); }
.energy-meter { justify-self: stretch; }
.energy-track { height: 8px; overflow: hidden; background: #282828; border-radius: 99px; }
#energy-fill { width: 100%; height: 100%; background: linear-gradient(90deg, var(--cobra-red), var(--hot-red), var(--gold)); border-radius: inherit; transition: width .18s linear; }

/* Beat the Battery (strategy.html) — reuses .race-shell/.race-topbar chrome. */
.strategy-page .race-shell { margin-bottom: 32px; }
.strategy-setup h2 { margin: 0; padding: 22px 22px 0; font-size: 1.05rem; }
.control-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 18px 22px 4px; }
.control-block { display: grid; gap: 10px; align-content: start; }
.control-label { color: var(--muted); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.control-label strong { color: var(--gold); }
.strategy-seg { justify-content: start; min-height: 0; padding: 0; background: transparent; border: 0; flex-wrap: wrap; }
.strategy-seg button { min-height: 44px; padding: 8px 14px; font-size: .72rem; }
.control-block input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--hot-red); }
.regen-toggle { justify-self: start; min-height: 44px; padding: 8px 20px; color: var(--muted); background: transparent; border: 1px solid rgba(245,240,232,.12); border-radius: 999px; font-size: .72rem; cursor: pointer; }
.regen-toggle[aria-pressed="true"] { color: var(--cream); background: var(--hot-red); border-color: var(--hot-red); }
.strategy-run { display: block; width: calc(100% - 44px); margin: 22px; padding: 15px; color: var(--cream); background: var(--hot-red); border: 1px solid var(--hot-red); border-radius: 9px; font: 700 .95rem var(--display); letter-spacing: .04em; cursor: pointer; }
.strategy-run:hover { background: var(--cobra-red); border-color: var(--gold); }
.strategy-page .strategy-stagebar { display: flex; grid-template-columns: none; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.strategy-hint { flex: 1 1 220px; min-width: 0; color: var(--muted); font-size: .72rem; }
.ff-toggle { min-height: 40px; padding: 7px 14px; color: var(--muted); background: transparent; border: 1px solid rgba(245,240,232,.1); border-radius: 999px; font-size: .65rem; cursor: pointer; white-space: nowrap; }
/* .race-controls > button hard-sizes steering buttons at 48px for Cobra Circuit;
   the fast-forward pill is text, so it needs its width back. */
.strategy-page .strategy-stagebar .ff-toggle { width: auto; font-size: .65rem; }
.ff-toggle.is-active { color: var(--cream); background: var(--hot-red); border-color: var(--hot-red); }
#strategy-canvas { width: 100%; height: auto; display: block; }
.strategy-page .race-stage { box-shadow: inset 0 0 90px rgba(0,0,0,.75); }
#strategy-energy-fill { width: 100%; height: 100%; background: linear-gradient(90deg, var(--cobra-red), var(--hot-red), var(--gold)); border-radius: inherit; transition: width .18s linear; }
.strategy-page .energy-meter { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
.strategy-page .energy-meter > span:first-child { grid-column: 1 / -1; }
.energy-pct { color: var(--gold); font: 700 .8rem/1 var(--display); font-variant-numeric: tabular-nums; }
.strategy-page .energy-track.is-low #strategy-energy-fill { background: linear-gradient(90deg, #7c0a02, #e6392b); animation: battery-pulse .9s ease-in-out infinite alternate; }
@keyframes battery-pulse { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .strategy-page .energy-track.is-low #strategy-energy-fill { animation: none; }
}
#lap-count { display: inline-block; }
#lap-count.pop { animation: lap-pop .3s ease-out; }
@keyframes lap-pop { 0% { transform: scale(1.6); color: var(--gold); } 100% { transform: scale(1); } }
.verdict { margin: 0; font-size: .95rem; }
.verdict.v1 { color: var(--hot-red); }
.verdict.v2 { color: var(--muted); }
.verdict.v3 { color: var(--gold); }
.verdict.v4 { color: var(--gold); text-shadow: 0 0 18px rgba(201,162,39,.55); }
.results-head h2 strong { display: inline-block; }
.results-head h2 strong.counting { color: var(--hot-red); }
.results-head { padding: 30px 28px 0; text-align: center; }
.results-head h2 { margin: 12px 0 8px; font-size: clamp(2rem, 5vw, 3rem); }
.results-head h2 strong { color: var(--gold); font-variant-numeric: tabular-nums; }
.verdict { margin: 0; color: var(--cream); font-size: .95rem; }
.results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 26px 28px; }
.results-grid > div { padding: 16px; background: var(--panel); border: 1px solid rgba(245,240,232,.08); border-radius: 10px; }
.results-grid dt { color: var(--muted); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.results-grid dd { margin: 8px 0 0; color: var(--cream); font: 700 1.05rem/1.3 var(--display); font-variant-numeric: tabular-nums; }
.results-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; padding: 0 28px 30px; }
.results-actions .share-score-btn { position: static; }
.best-line { margin: 0; font-size: .8rem; }
.best-line strong { color: var(--gold); }
.strategy-plug { width: min(920px, calc(100% - 32px)); margin: 0 auto 32px; text-align: center; }
.strategy-plug a { min-height: 44px; display: inline-flex; align-items: center; color: var(--gold); font-weight: 700; }
@media (max-width: 640px) {
  .control-grid { grid-template-columns: 1fr; gap: 18px; }
  .results-grid { grid-template-columns: 1fr 1fr; }
}
.race-stage { position: relative; background: #070707; }
#race-canvas { width: 100%; height: auto; aspect-ratio: 760 / 560; display: block; touch-action: none; }
.race-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; background: radial-gradient(circle at 50% 45%, rgba(124,10,2,.35), rgba(10,10,10,.92) 65%); backdrop-filter: blur(5px); transition: opacity .25s; }
.race-overlay.hidden { opacity: 0; pointer-events: none; }
.race-overlay img { width: 120px; height: 120px; object-fit: cover; margin-bottom: 12px; border-radius: 20px; }
.race-overlay > span { color: var(--gold); font: 700 9px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.race-overlay h2 { margin-top: 14px; font-size: clamp(1.7rem,4vw,3.2rem); }
.race-overlay p { max-width: 480px; margin-top: 12px; }
.race-overlay button { margin-top: 24px; padding: 13px 23px; color: var(--cream); background: var(--hot-red); border: 1px solid var(--hot-red); border-radius: 9px; font-weight: 700; cursor: pointer; }
.race-overlay button:hover { background: var(--cobra-red); border-color: var(--gold); }
.race-controls { min-height: 66px; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; gap: 16px; padding: 10px 18px; background: var(--panel); border-top: 1px solid var(--border-red); }
.race-controls > button { width: 48px; height: 44px; color: var(--cream); background: #222; border: 1px solid var(--border-gold); border-radius: 9px; font-size: 22px; cursor: pointer; }
.race-controls > button:last-child { justify-self: end; }
.race-controls > button:active { color: var(--gold); background: var(--cobra-red); transform: translateY(1px); }
.race-legend { display: flex; justify-content: center; gap: 24px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.race-legend span { display: flex; align-items: center; gap: 7px; }
.race-legend i { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }
.legend-battery { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.legend-snake { background: var(--hot-red); box-shadow: 0 0 8px var(--hot-red); }
.race-page #start-btn { display: flex; }
.race-modes { min-height: 52px; padding: 8px 18px; display: flex; align-items: center; justify-content: center; gap: 7px; background: #0d0d0d; border-top: 1px solid rgba(245,240,232,.06); }
.race-modes > span { margin-right: 8px; color: var(--muted); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.race-modes button { padding: 7px 11px; color: var(--muted); background: transparent; border: 1px solid rgba(245,240,232,.1); border-radius: 999px; font-size: .65rem; cursor: pointer; }
.race-modes button.is-active { color: var(--cream); background: var(--hot-red); border-color: var(--hot-red); }
.local-leaderboard { width: min(720px, calc(100% - 32px)); margin: 0 auto 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.local-leaderboard ol { list-style: none; border-top: 1px solid var(--border-red); }
.local-leaderboard li { padding: 10px 0; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(245,240,232,.08); }
.local-leaderboard li span { color: var(--hot-red); font: 700 10px/1.5 var(--display); }
.local-leaderboard li strong { color: var(--cream); font: 700 13px/1 var(--display); }

/* Footer */
footer {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 40px auto 0;
  padding: 36px 0 42px;
  position: relative;
  color: var(--muted);
  border-top: 1px solid var(--border-red);
  font-size: .75rem;
  text-align: start;
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 28px;
  align-items: start;
}
footer::before { display: none; }
.footer-title {
  margin-bottom: 8px;
  color: var(--cream);
  font: 700 13px/1 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .68rem;
}
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--gold); outline: 0; }
.footer-meta { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; text-align: right; }
.socials { display: flex; justify-content: flex-end; gap: 10px; margin-top: 0; }
.socials img { width: 28px; height: 28px; object-fit: contain; transition: transform .2s; }
.socials a:hover img { transform: translateY(-3px); }

/* Back to top */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--cream);
  background: rgba(20, 20, 20, .92);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 18px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover { color: var(--gold); border-color: var(--gold); }


@media (max-width: 1200px) and (min-width: 1041px) {
  nav a:not(.logo), .site-nav ul a { padding: 8px 7px; font-size: 10px; }
  nav .open-button, .site-nav .open-button { padding: 10px 12px; }
}
@media (max-width: 1040px) {
  nav, .site-nav { position: sticky; top: 10px; }
  nav.site-nav, nav {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
    padding-right: 58px; /* room for absolute hamburger */
  }
  nav .nav-toggle,
  .site-nav .nav-toggle {
    display: inline-flex !important;
    position: fixed !important;
    top: 22px;
    right: 18px;
    z-index: 90 !important;
    order: 2;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0;
    border: 2px solid var(--gold) !important;
    background: var(--hot-red) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  }
  nav .nav-toggle span,
  .site-nav .nav-toggle span {
    background: #fff !important;
    width: 18px !important;
    height: 2px !important;
  }
  .logo { order: 1; flex: 1 1 auto; min-width: 0; padding-right: 8px; }
  nav > ul, .site-nav > ul {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(245, 240, 232, .08);
  }
  nav.is-open > ul, .site-nav.is-open > ul { display: flex; }
  nav a:not(.logo), .site-nav ul a { padding: 12px 14px; font-size: 13px; }
  nav .open-button, .site-nav .open-button {
    order: 3;
    width: 100%;
    justify-content: center;
    margin: 0;
    padding: 11px 14px;
  }
  .chat-popup { top: auto; bottom: 20px; right: 16px; }
  .members-grid { grid-template-columns: repeat(3, 1fr); }
  .cards-container { grid-template-columns: repeat(2, 1fr); }
  .landing-intro { grid-template-columns: 100px 1fr; }
  .landing-feature-image { grid-column: 2; }
  .landing-journey { gap: 35px; }
  .dashboard-grid { grid-template-columns: repeat(2,1fr); }
  .race-countdown { grid-template-columns: 1fr; }
  .sponsor-benefits, .level-grid { grid-template-columns: 1fr; }
  .needs-grid { grid-template-columns: repeat(2,1fr); }
  .level-grid .featured { transform: none; }
  footer { grid-template-columns: 1fr 1fr; }
  .footer-meta { grid-column: 1 / -1; align-items: flex-start; text-align: start; }
  .socials { justify-content: flex-start; }
}

@media (max-width: 760px) {
  body {
    font-size: 15px;
    background-attachment: scroll; /* fixed backgrounds jank on mobile */
  }
  nav, .site-nav { width: calc(100% - 20px); margin-top: 10px; }
  nav a:not(.logo), .site-nav ul a { padding: 12px 14px; font-size: 13px; }
  .home-hero { width: calc(100% - 32px); min-height: 580px; padding: 74px 0; }
  .home-hero::after { right: -25%; width: 76vw; opacity: .14; }
  header:not(.home-hero):not(.home-world), .edu-hero { width: calc(100% - 32px) !important; padding-top: 74px !important; }
  .splide { width: calc(100% - 24px); padding: 10px; }
  .splide__slide { min-height: 0; flex-direction: column; gap: 24px; padding: 14px; }
  .splide__slide img, .splide__slide video { width: 100%; height: 330px; }
  .members-grid { width: calc(100% - 24px); grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .members-grid img { height: 160px; }
  .about-page, .specs-page { width: calc(100% - 32px); }
  .about-content, .specs-grid { grid-template-columns: 1fr; }
  .stats-section { grid-template-columns: 1fr; }
  .cards-container { width: calc(100% - 32px); grid-template-columns: 1fr; }
  .hero-proof { margin-top: 44px; }
  .landing-intro { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 24px; }
  .landing-feature-image { grid-column: auto; }
  .landing-feature-image img { height: 390px; }
  .section-heading { grid-template-columns: 1fr; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-grid article { min-height: 210px; }
  .pillar-grid h3 { margin-top: 42px; }
  .landing-journey { width: calc(100% - 32px); grid-template-columns: 1fr; }
  .journey-visual img { height: 430px; }
  .landing-cta { width: calc(100% - 32px); grid-template-columns: 64px 1fr; }
  .landing-cta > img { width: 64px; height: 64px; }
  .landing-cta > a { grid-column: 1 / -1; }
  .countdown-grid { grid-template-columns: repeat(4,1fr); }
  .story-grid { grid-template-columns: 1fr; }
  .timeline-progress { display: none; }
  .timeline-step, .timeline-step.reverse { min-height: 0; margin-bottom: 90px; grid-template-columns: 46px minmax(0,1fr); gap: 20px; }
  .timeline-step figure, .timeline-step.reverse figure { grid-column: 2; grid-row: auto; }
  .timeline-step .timeline-copy, .timeline-step.reverse .timeline-copy { grid-column: 2; }
  .timeline-number { padding-top: 0; grid-row: 1 / span 2; }
  .timeline-step img, .timeline-step video { height: 440px; }
  .sponsor-impact { grid-template-columns: 1fr; }
  .sponsor-benefits { grid-column: 1; }
  .sponsor-interest { grid-template-columns: 80px 1fr; }
  .sponsor-interest img { width: 80px; height: 80px; }
  .sponsor-interest button { grid-column: 1 / -1; }
  .race-topbar { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .energy-meter { grid-column: 1 / -1; width: 100%; }
  .race-stat { text-align: center; }
  .race-overlay img { width: 86px; height: 86px; }
}

@media (max-width: 480px) {
  .logo { font-size: 12px; }
  .logo::before { width: 36px; height: 36px; }
  nav .open-button, .site-nav .open-button { width: 100%; justify-content: center; }
  .chat-popup { right: 10px; bottom: 16px; }
  footer { grid-template-columns: 1fr; gap: 20px; }
  .footer-meta { align-items: center; text-align: center; }
  .footer-links { justify-content: center; }
  .socials { justify-content: center; }
  .back-to-top { right: 14px; bottom: 14px; }
  h1 { font-size: 2.45rem; }
  .hero-actions { flex-direction: column; }
  .hero-proof { grid-template-columns: 1fr; gap: 0; }
  .hero-proof > div { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(245,240,232,.07); }
  .hero-proof span { margin: 0; }
  .race-countdown { width: calc(100% - 24px); padding: 22px 16px; }
  .countdown-grid > div { padding: 10px 3px; }
  .countdown-grid strong { font-size: .95rem; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .journal-list article { grid-template-columns: 90px 1fr; }
  .timeline-step img, .timeline-step video { height: 330px; }
  .timeline-finish { padding: 36px 20px; }
  .needs-grid { grid-template-columns: 1fr; }
  .primary-action, .secondary-action { width: 100%; }
  .members-grid section { padding: 8px 8px 14px; }
  .members-grid img { height: 118px; }
  .members-grid h2 { font-size: .68rem; }
  .members-grid p { font-size: .66rem; }
  .splide__slide img, .splide__slide video { height: 230px; }
  .race-shell { width: calc(100% - 16px); }
  .race-topbar { padding: 12px; }
  .race-stat strong { font-size: 14px; }
  .race-controls { grid-template-columns: 52px 1fr 52px; padding: 8px; }
  .race-legend { gap: 10px; font-size: 8px; }
  .race-overlay { padding: 18px; }
  .race-overlay p { font-size: 12px; }
  .local-leaderboard { grid-template-columns: 1fr; gap: 24px; }
  footer { text-align: center; }
  .socials { justify-content: center; }
}

.error-hero { min-height: 50vh; padding-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  nav, .open-button, .chat-popup, .back-to-top, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .landing-cta, .race-countdown { break-inside: avoid; }
  video, .open-button, .race-shell { display: none !important; }
}

.last-updated .text-link { margin-top: 0; justify-content: center; color: var(--gold); }

/* `start`, not `left`: in RTL the cell mirrors but left-aligned text stays against
   the border it shares with the value, so 14 of 19 rows read as one word. The
   padding has to mirror too — `padding-right` put the gap on the far side of the
   label in Arabic, which is the side that already had one. */
.spec-table th { text-align: start; font-weight: 500; }

::selection { background: rgba(230,57,43,.45); color: #fff; }

.logo { white-space: nowrap; }

@supports (padding: max(0px)) {
  nav, .site-nav {
    margin-top: max(10px, env(safe-area-inset-top));
  }
  .back-to-top {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}
.nav-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

@media (max-width: 1040px) {
  nav.is-open, .site-nav.is-open {
    max-height: min(92vh, 900px);
    overflow-y: auto;
  }
}
main { scroll-margin-top: 90px; }

.text-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

@media (prefers-contrast: more) {
  :root {
    --muted: #c5c0c5;
    --border-red: rgba(230, 57, 43, .45);
    --border-gold: rgba(201, 162, 39, .5);
  }
  nav a[aria-current='page'], .site-nav ul a[aria-current='page'] {
    outline: 2px solid var(--gold);
  }
}

/* === Feature pack: collapse, news, checklist, PWA chrome === */
.site-nav, nav.site-nav {
  transition: min-height .2s ease, padding .2s ease, margin .2s ease, box-shadow .2s ease, border-radius .2s ease;
}
.site-nav.is-collapsed, nav.is-collapsed {
  min-height: 52px;
  margin-top: 6px;
  padding: 4px 10px 4px 12px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.site-nav.is-collapsed .logo, nav.is-collapsed .logo { font-size: 12px; }
.site-nav.is-collapsed .logo::before, nav.is-collapsed .logo::before {
  width: 32px; height: 32px; margin-right: 8px;
}
.site-nav.is-collapsed .nav-toggle, nav.is-collapsed .nav-toggle {
  width: 38px; height: 38px;
}
.site-nav.is-collapsed a:not(.logo), nav.is-collapsed a:not(.logo) {
  padding: 6px 8px; font-size: 10px;
}
.site-nav.is-collapsed .open-button, nav.is-collapsed .open-button,
.site-nav.is-collapsed .lang-toggle, nav.is-collapsed .lang-toggle {
  padding: 8px 10px; font-size: 11px; min-height: 36px;
}
.nav-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.lang-toggle {
  min-height: 40px;
  padding: 8px 12px;
  color: var(--gold);
  background: rgba(201,162,39,.08);
  border: 1px solid var(--border-gold);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.lang-toggle:hover { color: var(--cream); border-color: var(--gold); }
/* Headings included. Orbitron has no Arabic either, so Arabic headings were
   already falling back — this just names what they fall back to instead of
   leaving it to the operating system. */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .logo { font-family: var(--arabic); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .logo {
  letter-spacing: 0;
  text-transform: none;
}
html[dir="rtl"] .site-nav .logo,
html[dir="rtl"] nav.site-nav .logo {
  width: 38px;
  min-width: 38px;
  overflow: hidden;
  font-size: 0;
}
html[dir="rtl"] .site-nav .logo::before,
html[dir="rtl"] nav.site-nav .logo::before {
  width: 36px;
  height: 36px;
  margin: 0;
  border: 0;
  border-radius: 0;
}
html[dir="rtl"] .text-link > span:last-child { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .text-link:hover > span:last-child { transform: scaleX(-1) translateX(5px); }
html[dir="rtl"] .timeline-copy li::before { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .mission-box { border-left: 0; border-right: 4px solid var(--hot-red); border-radius: 12px 0 0 12px; }
html[dir="rtl"] .sponsor-interest, html[dir="rtl"] .landing-cta { border-left-width: 1px; border-right: 5px solid var(--hot-red); }

.news-list, .checklist-page, .package-page { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto 90px; }
.news-list article {
  padding: 22px 0;
  border-bottom: 1px solid rgba(245,240,232,.08);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
}
.news-list time { color: var(--hot-red); font: 700 11px/1.4 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.news-list h2 { margin-bottom: 8px; font-size: 1.05rem; }
.news-list p { font-size: .88rem; }

.checklist-progress {
  height: 10px;
  margin: 18px 0 10px;
  background: #222;
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--border-red);
}
.checklist-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cobra-red), var(--hot-red), var(--gold));
  transition: width .25s ease;
}
.checklist-list { list-style: none; border-top: 1px solid var(--border-red); margin-top: 24px; }
.checklist-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(245,240,232,.08);
}
.checklist-list input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--hot-red); }
.checklist-list strong { display: block; color: var(--cream); margin-bottom: 4px; }
.checklist-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.member-filter-shell { width: min(var(--max-width), calc(100% - 40px)); margin: -10px auto 18px; }
.member-filter-meta { color: var(--muted); font-size: .75rem; margin-bottom: 10px; }

.contact-card, .package-grid article, .download-row {
  padding: 24px;
  background: var(--panel);
  border: 1px solid rgba(245,240,232,.08);
  border-radius: 12px;
}
.contact-card a { color: var(--gold); font-weight: 600; }
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 28px 0; }
.package-note { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto 32px; }
.download-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 24px 0 40px; }
.analytics-note { opacity: .8; font-size: .68rem; }

.share-score-btn {
  /* inline-flex ignores `margin: 0 auto`, so this sat at the start of its line box
     — x=0 in LTR, hard against the right edge in RTL — while its sibling #start-btn
     (display:flex) centred correctly. */
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 auto 24px;
  padding: 0 18px;
  color: var(--cream);
  background: rgba(20,20,20,.8);
  border: 1px solid var(--border-gold);
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
}
.share-score-btn:hover { color: var(--gold); border-color: var(--gold); }
.share-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 100;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  color: var(--cream);
  font-size: .8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.share-toast.is-visible { opacity: 1; }

@media (max-width: 1040px) {
  .nav-tools { width: 100%; order: 3; }
  .lang-toggle { width: 100%; }
  .package-grid { grid-template-columns: 1fr; }
  .news-list article { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 760px) {
  .site-nav.is-collapsed, nav.is-collapsed { width: calc(100% - 16px); }
}

/* === Compact top bar + site-wide spacing pass === */
.site-nav,
nav.site-nav {
  min-height: 64px;
  margin-top: 12px;
  padding: 7px 9px 7px 12px;
  flex-wrap: nowrap;
  gap: 8px;
  border-radius: 12px;
}

.site-nav .logo,
nav.site-nav .logo {
  flex: 0 0 auto;
  font-size: 13px;
}

.site-nav .logo::before,
nav.site-nav .logo::before {
  width: 38px;
  height: 38px;
  margin-right: 9px;
  border-radius: 9px;
}

.site-nav > ul,
nav.site-nav > ul {
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: center;
}

/* Scoped to the desktop bar on purpose. Unscoped, this rule's specificity (0,1,3)
   beat the mobile rule at ~818 (0,1,2), so the open hamburger rendered its seven
   primary links at 10px in 32.5px rows — smaller than the submenu items nested
   underneath them — and made the 1041-1200px rule dead code. It is a compressed
   bar for a crowded desktop nav, not a size for a drawer or a finger. */
@media (min-width: 1041px) {
  .site-nav > ul a,
  nav.site-nav > ul a {
    padding: 8px 7px;
    font-size: 10px;
    white-space: nowrap;
}
}

.site-nav .nav-tools,
nav.site-nav .nav-tools {
  width: auto;
  margin-left: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}

.site-nav .lang-toggle,
nav.site-nav .lang-toggle,
.site-nav .open-button,
nav.site-nav .open-button {
  width: auto;
  min-height: 38px;
  margin: 0;
  padding: 8px 10px;
  color: var(--muted);
  background: transparent;
  border: 1px solid rgba(245, 240, 232, .1);
  border-radius: 8px;
  box-shadow: none;
  font: 600 10px/1 var(--body);
}

.site-nav .lang-toggle:hover,
nav.site-nav .lang-toggle:hover,
.site-nav .open-button:hover,
nav.site-nav .open-button:hover {
  color: var(--gold);
  background: rgba(201, 162, 39, .06);
  border-color: var(--border-gold);
}

.site-nav .chat-status,
nav.site-nav .chat-status {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

header:not(.home-hero):not(.home-world),
.edu-hero {
  padding-top: 76px !important;
  padding-bottom: 42px !important;
}

.home-hero {
  padding-top: 96px;
  padding-bottom: 78px;
}

.member-filter-shell {
  margin-top: 0;
  margin-bottom: 24px;
}

.member-filter-shell .member-filters {
  width: 100%;
  margin: 0;
}

@media (max-width: 1040px) {
  .site-nav,
  nav.site-nav {
    position: sticky;
    top: 8px;
    min-height: 60px;
    padding: 7px 8px 7px 10px;
    flex-wrap: wrap;
    row-gap: 7px;
  }

  .site-nav .logo,
  nav.site-nav .logo {
    order: 1;
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 4px;
  }

  .site-nav .nav-tools,
  nav.site-nav .nav-tools {
    order: 2;
    width: auto;
    margin-left: auto;
  }

  .site-nav .nav-toggle,
  nav.site-nav .nav-toggle {
    position: static !important;
    order: 3;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    margin: 0;
    border-width: 1px !important;
    border-color: var(--border-red) !important;
    background: rgba(230, 57, 43, .14) !important;
    box-shadow: none;
  }

  .site-nav > ul,
  nav.site-nav > ul {
    order: 4;
    width: 100%;
    flex: 0 0 100%;
    padding: 8px 0 2px;
  }

  .site-nav .open-button,
  nav.site-nav .open-button,
  .site-nav .lang-toggle,
  nav.site-nav .lang-toggle {
    order: initial;
    width: auto;
    min-height: 40px;
    justify-content: center;
    padding: 8px 10px;
  }

  .chat-popup {
    top: 80px;
    right: 12px;
    bottom: auto;
  }

  header:not(.home-hero):not(.home-world),
  .edu-hero {
    padding-top: 58px !important;
    padding-bottom: 36px !important;
  }
}

@media (max-width: 600px) {
  .site-nav .logo,
  nav.site-nav .logo {
    font-size: 0;
  }

  .site-nav .logo::before,
  nav.site-nav .logo::before {
    width: 36px;
    height: 36px;
    margin-right: 0;
  }

  .site-nav .lang-toggle,
  nav.site-nav .lang-toggle,
  .site-nav .open-button,
  nav.site-nav .open-button {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 10px;
  }

  .home-hero {
    min-height: 540px;
    padding-top: 66px;
    padding-bottom: 62px;
  }
}

/* === Resources disclosure navigation === */
.nav-group { position: relative; }
.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 7px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font: 600 10px/1 var(--body);
  letter-spacing: .035em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.nav-group-toggle:hover,
.nav-group-toggle:focus-visible { color: var(--gold); background: rgba(201,162,39,.07); outline: 0; }
.nav-group.is-current > .nav-group-toggle { color: var(--cream); background: var(--hot-red); box-shadow: 0 7px 18px rgba(230,57,43,.2); }
.nav-group-chevron { transition: transform .2s ease; }
.nav-group.is-open .nav-group-chevron { transform: rotate(180deg); }
.site-nav .nav-submenu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  z-index: 70;
  width: max-content;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 8px;
  list-style: none;
  text-align: start;
  background: rgba(10,10,10,.98);
  border: 1px solid var(--border-red);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.site-nav .nav-submenu[hidden] { display: none !important; }
.site-nav .nav-submenu li { width: 100%; }
.site-nav .nav-submenu a {
  display: block;
  padding: 10px 12px;
  color: var(--muted);
  border-radius: 8px;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav .nav-submenu a:hover,
.site-nav .nav-submenu a:focus-visible { color: var(--gold); background: rgba(201,162,39,.07); }
.site-nav .nav-submenu a[aria-current='page'] { color: var(--cream); background: var(--hot-red); }
.site-nav.is-collapsed .nav-group-toggle { padding: 6px 8px; font-size: 10px; }
.site-nav.is-collapsed .nav-submenu a { padding: 10px 12px; font-size: 11px; }

/* === Status, data, decisions, and public progress === */
.build-status,
.test-data,
.sponsor-progress { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto 120px; }
.status-grid,
.sponsor-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.status-grid article,
.sponsor-summary article {
  min-height: 178px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel);
  border: 1px solid rgba(245,240,232,.08);
  border-radius: 12px;
}
.status-grid article > span,
.sponsor-summary article > span { color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.status-grid strong,
.sponsor-summary strong { color: var(--cream); font: 700 .95rem/1.35 var(--display); }
.status-grid p { font-size: .76rem; }
.build-status > .text-link { margin-top: 22px; }

.decision-step { padding: 16px 0; border-top: 1px solid rgba(245,240,232,.08); }
.decision-step > span { color: var(--gold); font: 700 9px/1 var(--display); letter-spacing: .11em; text-transform: uppercase; }
.decision-step p { margin-top: 8px; color: var(--muted); font-size: .8rem; }
.decision-step.is-result p { color: var(--cream); }
.engineering-stories .story-tag { margin-bottom: 22px; }
.journal-list time,
.journal-list article > bdi { color: var(--hot-red); font: 700 10px/1.7 var(--display); text-transform: uppercase; }
.log-tag { display: inline-block; margin-bottom: 8px; color: var(--gold); font: 700 9px/1 var(--display); letter-spacing: .11em; text-transform: uppercase; }
.workshop-journal > .text-link { margin-top: 24px; }
.news-link { display: inline-block; margin-top: 11px; color: var(--gold); font-size: .74rem; font-weight: 600; text-decoration: none; }
.news-link:hover { color: var(--cream); }

.test-data-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.test-data-grid article { padding: 24px; background: var(--panel); border: 1px solid rgba(245,240,232,.08); border-radius: 12px; }
.metric-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.metric-heading span { color: var(--muted); font-size: .76rem; }
.metric-heading strong { color: var(--cream); font: 700 1rem/1 var(--display); }
.metric-bar { height: 12px; margin: 20px 0 10px; overflow: hidden; direction: ltr; background: #242424; border: 1px solid rgba(245,240,232,.08); border-radius: 99px; }
.metric-bar span { display: block; width: var(--metric-fill,0%); height: 100%; background: linear-gradient(90deg,var(--cobra-red),var(--hot-red)); }
.metric-bar.is-estimate span { background: repeating-linear-gradient(135deg,var(--gold) 0 8px,#7d6417 8px 16px); }
.metric-bar.is-pending span { width: 100%; background: repeating-linear-gradient(135deg,#292929 0 8px,#1d1d1d 8px 16px); }
.test-data-grid p { font-size: .68rem; }
.data-empty { margin-top: 12px; padding: 24px; background: rgba(20,20,20,.65); border: 1px dashed var(--border-gold); border-radius: 12px; }
.data-empty span { color: var(--gold); font: 700 9px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.data-empty strong { display: block; margin: 12px 0 7px; font-family: var(--display); }
.data-empty p { font-size: .78rem; }

.sponsor-summary { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 14px; }
.sponsor-summary article { min-height: 140px; }
.support-board { overflow: hidden; border: 1px solid rgba(245,240,232,.08); border-radius: 12px; }
.support-board article { padding: 19px 22px; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; background: var(--panel); border-bottom: 1px solid rgba(245,240,232,.08); }
.support-board article:last-child { border-bottom: 0; }
.support-board span { color: var(--cream); font-weight: 600; }
.support-board p { margin-top: 5px; font-size: .74rem; }
.status-badge { padding: 7px 10px; border-radius: 999px; font: 700 9px/1 var(--display); white-space: nowrap; }
.status-badge.is-open { color: var(--cream); background: rgba(230,57,43,.16); border: 1px solid var(--border-red); }
.status-badge.is-review { color: var(--gold); background: rgba(201,162,39,.07); border: 1px solid var(--border-gold); }
.data-note { margin-top: 12px; font-size: .7rem; }
.sponsor-contact { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto 80px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.members-grid .member-role { width: max-content; margin-top: 8px; padding: 5px 8px; color: var(--gold); background: rgba(201,162,39,.07); border: 1px solid var(--border-gold); border-radius: 999px; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.members-grid .member-contribution { width: auto; margin-top: 14px; padding: 13px 0 0; color: var(--muted); background: transparent; border: 0; border-top: 1px solid rgba(245,240,232,.08); border-radius: 0; font-size: .68rem; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.local-status-note { margin-bottom: 42px; padding: 22px 24px; background: rgba(20,20,20,.72); border: 1px solid var(--border-gold); border-radius: 12px; }
.local-status-note strong { font-family: var(--display); }
.local-status-note p { margin-top: 7px; font-size: .78rem; }
.local-status-note .text-link { margin-top: 14px; }

.race-day-page .race-day-hero { min-height: 620px; }
.race-day-page .timeline-finish { width: min(var(--max-width), calc(100% - 40px)); margin: 0 auto 100px; }
/* Race-day status/results cards use long phrases ("To be confirmed"), not short machine numbers.
   Global .dashboard-grid strong is intentionally unchanged so home/specs tiles stay large. */
.race-day-page .dashboard-grid strong {
  font-size: clamp(1.15rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.race-day-page .dashboard-grid article > span {
  overflow-wrap: anywhere;
}
.metric-heading bdi,
.dashboard-grid bdi,
.race-day-page bdi[dir="ltr"] { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 1040px) {
  .site-nav .nav-group { width: 100%; }
  .site-nav .nav-group-toggle { width: 100%; justify-content: space-between; padding: 12px 14px; font-size: 13px; text-align: start; }
  .site-nav .nav-submenu { position: static; width: 100%; min-width: 0; max-width: none; margin-top: 4px; padding: 4px 0 4px 12px; background: rgba(20,20,20,.6); border: 0; border-inline-start: 2px solid var(--border-gold); border-radius: 0; box-shadow: none; }
  .site-nav .nav-submenu a { padding: 11px 14px; font-size: 12px; }
  .status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .build-status,
  .test-data,
  .sponsor-progress { width: calc(100% - 32px); margin-bottom: 82px; }
  .status-grid,
  .sponsor-summary,
  .test-data-grid { grid-template-columns: 1fr; }
  .status-grid article { min-height: 150px; }
  .support-board article { grid-template-columns: 1fr; gap: 12px; }
  .status-badge { width: max-content; }
  .journal-list article { grid-template-columns: 105px 1fr; gap: 18px; }
}

@media (max-width: 480px) {
  .journal-list article { grid-template-columns: 1fr; gap: 8px; }
  .metric-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* ================================================================= devices
   Everything below is about the machine the page is read on rather than how it
   looks, so it is keyed on what the input device can do and on how much room
   there is — not on a guess about which device is which.

   `pointer: coarse` is the question that actually matters for hit areas: it is
   true for a finger and false for a mouse, on any screen size. Width would have
   been the wrong test — an iPad in landscape is 1024px wide and still touched,
   and a small window on a desktop is narrow and still has a cursor. */

@media (pointer: coarse) {
  /* Every one of these was under 32px tall and several were around 18px, which
     is roughly a third of a fingertip. The visual size of the text and icons is
     unchanged; only the box you have to hit grows, so nothing about the design
     moves except the footer getting taller, which it should be on a phone. */
  .footer-links a,
  .news-link,
  .text-link,
  .car-note a,
  .map-note a,
  .journey-credit a {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }
  .socials a {
    inline-size: 44px;
    block-size: 44px;
    display: inline-grid;
    place-items: center;
  }

  /* 18px checkboxes on a race-day list that is meant to be ticked off in a pit
     lane, on a phone, wearing gloves. The column that holds them widens to
     match so the text beside them does not shift. */
  .checklist-list li { grid-template-columns: 38px 1fr; }
  .checklist-list input { inline-size: 32px; block-size: 32px; margin-block-start: 0; }
}

/* Two conditions, either one. Width alone missed the iPad in portrait by eight
   pixels — it is 768 wide and the breakpoint was 760 — and width can never
   describe a tablet in landscape at all, which is 1024 wide and still held at
   arm's length. `pointer: coarse` covers both, and the width clause keeps a
   narrow window on a desktop covered too. */
@media (max-width: 820px), (pointer: coarse) {
  /* Type that is a deliberate 9–10px label on a desktop is simply hard to read
     held at arm's length. These are nudged to 11px and no further: they are
     still labels, they are just legible ones now.

     The two on the members page are different — a person's role and what they
     work on is content, not decoration, and it was rendering at about 10px. */
  .log-tag, .story-tag, .world-kicker, .section-kicker, .section-index { font-size: 11px; }
  .members-grid .member-role { font-size: .72rem; }
  .members-grid .member-contribution { font-size: .78rem; }
  /* The scale caption under each spec bar, and the placeholder shown where test
     history will go — both are read, not skimmed. */
  .test-data-grid p { font-size: .78rem; }
  .data-empty span { font-size: 11px; }

  /* !important, and only here. The homepage was ported from the Astro build and
     its stylesheet writes every rule as `.thing[data-astro-cid-…]`, which is two
     selectors' worth of specificity on what reads like one class — and it is
     linked after this file, so it also wins any tie. A hand-written selector
     cannot beat `.decision-step[data-astro-cid] > span[data-astro-cid]` without
     a chain long enough to be its own bug.

     The alternative was editing the generated file, which loses the change the
     next time it is generated. This is bounded instead: one media query, under
     760px, raising 9px and 10px labels to 11px so they can be read on a phone
     held at arm's length. Nothing here applies to a desktop. */
  main.cobras-home .world-kicker,
  main.cobras-home .story-tag,
  main.cobras-home .log-tag,
  main.cobras-home .decision-step > span,
  main.cobras-home .team-crew-head span { font-size: 11px !important; }
}

/* ------------------------------------ the homepage hero under reduced motion
   The hero enhances for everyone now, including readers who have asked for
   reduced motion — see the note at the top of assets/home/homepage.js. The
   short version: the strip's position is a direct function of scroll offset, so
   it moves exactly as far as the reader scrolls and stops when they stop.
   Nothing plays by itself, so there is no animation to withhold, and refusing
   to lay the page out sideways was answering the request by changing what the
   page is rather than how much it moves.

   What genuinely is motion gets dropped here. The car no longer travels across
   the panels — the island pins it — and the decorative fades and slides that
   run on their own timers are turned off, so the only thing that moves is the
   strip the reader is pushing.

   The `:not(.is-enhanced)` rules that used to live here are gone with the
   fallback they styled. If the island ever fails to run, the panels stack in
   normal flow, which is a plain and readable page rather than a designed one —
   correct for a state that now only happens when JavaScript is broken. */
@media (prefers-reduced-motion: reduce) {
  .home-world .world-car { transition: none; }
  .home-world .world-rail li { transition: none; }
  .home-world .world-panel,
  .home-world .world-stage,
  .home-world .world-intro { transition: none; animation: none; }
}

/* The hero headline has to fit a viewport, not just a width.

   `h1` is sized `clamp(2.5rem, 6vw, 5.6rem)`, which asks only how wide the
   window is. The hero panel is pinned to 100vh, so on a short window — a laptop
   with a toolbar, or any browser that is not full screen — the type kept scaling
   off the width while the space it had to fit shrank. At 1200x620 that is a 72px
   headline 212px tall inside a 620px panel: the eyebrow, headline, paragraph and
   buttons together stopped fitting, and the whole thing read as zoomed in.

   Taking the smaller of the two makes the height a real constraint. Wide, tall
   windows are unaffected — at 1920x1080 the width rule is already at its ceiling
   — and it only ever makes the type smaller, never larger. Scoped to the hero,
   because every other h1 on the site sits in normal flow where the page can
   simply get longer. */
.home-world h1 { font-size: clamp(2.25rem, min(6vw, 9vh), 5.6rem); }
.home-world .hero-lead { font-size: clamp(1rem, min(1.35vw, 2.6vh), 1.35rem); }

/* Feather the car's own edges, not an ellipse inside them.

   The image is a photograph on a studio sweep, and the sweep is a rectangle. It
   is masked with `radial-gradient(ellipse 66% 62% ...)`, which sounds like it
   dissolves the edges and does not: those percentages are radii, so at the left
   and right edges of the box the mask is still about a third opaque, and the
   boundary of the sweep reads as a hard straight cut against the page.

   Two linear gradients intersected fade each side to fully transparent exactly
   at the edge, which is where the cut was. The middle is left alone, so the car
   itself is untouched — only the sweep around it dissolves. The vertical fade is
   shorter at the top than the bottom because the car sits low in the frame and
   there is more empty sweep above it to lose. */
main.cobras-home .world-car {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 18%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 18%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* The hero pin is 100vh but starts below the in-flow nav, so its bottom-anchored
   stage indicator rendered as a 2-12px sliver until the first scroll tick latched
   the sticky element to the top. Only wrong at scrollY 0 — which is the first
   thing anyone sees. Worst at 1366x768, where 93% of it was cut. */
/* The attribute selectors are here to out-specify the ported Astro rule, which
   writes every selector as `.thing[data-astro-cid-...]` and is linked after this
   file — so it wins both on specificity and on order unless matched and beaten. */
main.cobras-home .home-world[data-astro-cid-zkhec6xw].is-enhanced .world-pin[data-astro-cid-zkhec6xw]
  { block-size: calc(100vh - var(--nav-h, 76px)); }

/* ---------------------------------------------------------------- pixel crew
   The chibis walk along the bottom of the viewport. Fixed rather than absolute,
   so they stay with the reader instead of scrolling off the top of a long page,
   and behind the nav and the chat button so they never cover a control. */
.crew-layer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  block-size: 96px;
  z-index: 40;
  pointer-events: none;
}
.crew-chibi {
  position: absolute;
  bottom: 0;
  /* Physical, not logical: the frame loop computes x from the viewport's left
     edge whatever the reading direction. inset-inline-start flips to the right
     edge under RTL, which marched the whole crew off-screen on the Arabic
     pages — or pinned them to the right corner when the clamp caught them. */
  left: 0;
  inline-size: 72px;
  block-size: 96px;
  padding: 0;
  border: 0;
  /* Contained rather than sized: every sprite shares a canvas height with its
     feet on the bottom row, so this scales them all by the same amount and
     stands them on one floor whatever their width. */
  background: transparent center bottom / contain no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
  pointer-events: auto;
  /* No transition. The frame loop writes transform sixty times a second and a
     transition on top of that fights it. */
  transition: none;
}
.crew-chibi:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.crew-send {
  margin-top: 12px;
  padding: 9px 14px;
  min-block-size: 44px;
  border: 1px solid var(--border-gold);
  background: transparent;
  color: var(--muted);
  font: 600 .72rem/1 var(--body);
  letter-spacing: .04em;
  border-radius: 2px;
  cursor: pointer;
  transition: color .16s, border-color .16s, background .16s;
}
.crew-send:hover { color: var(--cream); border-color: var(--gold); background: rgba(201,162,39,.08); }
.crew-send[aria-pressed="true"] { color: var(--cream); border-color: var(--hot-red); background: rgba(230,57,43,.14); }
.crew-send:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media print { .crew-layer { display: none; } }

/* Direct sponsor actions and readable member cards. */
.sponsor-page .sponsor-contact-actions .primary-action { color: var(--cream); }
.sponsor-page .sponsor-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sponsor-page .sponsor-interest { grid-template-columns: 80px minmax(0, 1fr); }
.sponsor-page .sponsor-interest > a { grid-column: 2; justify-self: start; }
.sponsor-page .sponsor-hero .hero-actions { position: relative; z-index: 1; }
.sponsor-page .sponsor-hero::after { pointer-events: none; }
.member-placeholder { height: 178px; display: grid; place-content: center; gap: 10px; text-align: center; background: #101010; border: 1px solid var(--border-gold); border-radius: 9px; }
.member-placeholder > span { font: 700 2rem/1 var(--display); color: var(--gold); }
.member-placeholder > small { font-size: .7rem; color: var(--muted); }
.member-assignment-note { font-size: .8rem; }
.member-filters button { min-height: 44px; }
@media (max-width: 600px) {
  .members-grid { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 14px; }
  .members-grid section { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px 16px; align-content: start; padding: 16px; }
  .members-grid section > img, .members-grid .member-placeholder { grid-column: 1; grid-row: 1 / span 4; width: 100%; height: 120px; }
  .members-grid section > h2, .members-grid section > p, .members-grid section > button { grid-column: 2; margin: 0; }
  .members-grid h2 { font-size: .82rem; overflow-wrap: anywhere; }
  .members-grid .member-role { max-width: 100%; font-size: .7rem; }
  .members-grid .member-contribution { font-size: .8rem; padding-top: 8px; }
  .members-grid .crew-send { min-height: 44px; }
  .member-placeholder > span { font-size: 1.6rem; }
  .member-placeholder > small { font-size: .65rem; }
  .sponsor-page .sponsor-interest { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
  .sponsor-page .sponsor-interest > a { grid-column: 1; justify-self: stretch; text-align: center; }
}

/* Keep build stages readable and their media full-width on phones. */
@media (max-width: 600px) {
  .build-timeline { width: calc(100% - 32px); }
  .build-jumps ol { display: grid; grid-template-columns: minmax(0, 1fr); }
  .timeline-step, .timeline-step.reverse { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 64px; }
  .timeline-step .timeline-copy, .timeline-step.reverse .timeline-copy,
  .timeline-step figure, .timeline-step.reverse figure { grid-column: 1; grid-row: auto; }
  .timeline-number { grid-row: auto; }
  .timeline-copy ul { margin-top: 18px; }
  .timeline-step img, .timeline-step video { height: auto; max-height: 420px; aspect-ratio: 4 / 3; }
}

/* A member's badge beside their role pill: same shape as the role, in yellow so
   it reads as an honour rather than a second job title. The row wraps, so on a
   narrow card the badge drops under the role instead of being clipped. The role
   stays the first <p> in the card, which is what site.js looks for. */
.members-grid .member-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.members-grid .member-tags > p { margin-top: 0; }
.members-grid .member-badge {
  /* inline-block, not flex: when the badge wraps on a narrow phone the trophy
     follows the last word instead of floating beside the whole block. */
  display: inline-block;
  max-width: 100%;
  padding: 5px 8px;
  color: #ffd43b;
  background: rgba(255, 212, 59, .1);
  border: 1px solid rgba(255, 212, 59, .5);
  border-radius: 999px;
  font-size: .62rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
}
@media (max-width: 820px), (pointer: coarse) {
  .members-grid .member-badge { font-size: .72rem; }
}
@media (max-width: 600px) {
  .members-grid section > .member-tags { grid-column: 2; margin: 0; }
  .members-grid .member-badge { font-size: .7rem; }
}