:root {
  --navy-950: #031428;
  --navy-900: #061b36;
  --navy-800: #0a2b53;
  --blue-600: #175ab5;
  --blue-400: #4c97ed;
  --paper: #f5f2e9;
  --paper-dim: #d7e1eb;
  --white: #fffdf7;
  --yellow: #f3c942;
  --orange: #f45a31;
  --orange-dark: #d94624;
  --display: "Barlow Condensed", sans-serif;
  --body: "Barlow", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy-950);
  color: var(--white);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--yellow); color: var(--navy-950); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
a { color: inherit; text-underline-offset: .2em; }
button, input { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 20px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--yellow); color: var(--navy-950); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* The navigation is real DOM text at every width. It was baked into the hero raster
   until issue #54; the artwork is now cropped to the band and its world, so this is the
   only navigation there is. It is no longer SC 2.5.8's "equivalent control on the same
   page" standing in for hotspots that were too small, which is what it was built as in
   #44, so nothing here depends on that exception any more. */
.site-header {
  display: grid;
  position: sticky;
  top: 0;
  z-index: 10;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px clamp(20px, 5vw, 76px);
  background: rgba(3, 20, 40, .92);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; font: 700 32px/1 var(--display); letter-spacing: -.02em; }
.brand img { border-radius: 15px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.site-header .brand { grid-column: 1; font-size: 26px; gap: 10px; }
.site-header .brand img { width: 36px; height: 34px; border-radius: 12px; box-shadow: none; }
.site-nav { grid-column: 2; display: flex; justify-self: center; gap: clamp(2px, 1vw, 14px); }
/* nowrap: squeezed into a narrow grid track these labels wrap to two and three lines
   instead of overflowing, so the row silently grows to 100px and nothing reports an
   error. The breakpoint below is what keeps them from being squeezed at all. */
.site-nav a { min-height: 44px; display: flex; align-items: center; padding: 0 13px; border-radius: 8px; text-decoration: none; font-weight: 600; white-space: nowrap; color: #e8f0f8; }
.site-nav a:hover { color: var(--yellow); background: rgba(255,255,255,.06); }
/* nowrap: at the 320px reflow baseline the label otherwise breaks to two lines and
   pushes the row past its 44px height. */
.header-cta { grid-column: 3; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 0 17px; border-radius: 8px; background: var(--orange); color: var(--white); text-decoration: none; font-weight: 700; font-size: .95rem; white-space: nowrap; transition: background .2s; }
.header-cta:hover { background: #ff6a42; }
.header-secondary { grid-column: 4; min-height: 44px; display: inline-flex; align-items: center; padding: 0 17px; border: 1px solid rgba(255,255,255,.55); border-radius: 8px; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; transition: background .2s; }
.header-secondary:hover { background: rgba(255,255,255,.1); }
.menu-toggle { grid-column: 5; display: none; width: 44px; height: 44px; align-content: center; gap: 5px; padding: 0 10px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; border-radius: 2px; background: white; }

/* The hero is DOM text beside the artwork. Both used to be one raster, which is what
   #54 was: every word in the first viewport was pixels. The artwork keeps the band, the
   track and the printed splits; every word came out into this markup. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(20px, 3.2vw, 54px);
  padding: clamp(30px, 4.2vw, 68px) clamp(20px, 5vw, 76px) clamp(46px, 6vw, 96px);
  background:
    radial-gradient(115% 92% at 76% 44%, rgba(23, 90, 181, .32), transparent 63%),
    var(--navy-950);
}
.hero-sub { max-width: 470px; margin: 26px 0 0; color: #e3eaf2; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; }
.hero-sub em { color: var(--orange); font-style: normal; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-proof { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 40px); max-width: 940px; margin: clamp(10px, 1.6vw, 22px) 0 0; padding: 0; list-style: none; }
.hero-proof li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; align-content: start; }
.proof-icon { grid-row: 1 / 3; width: 26px; height: 26px; margin-top: 1px; color: var(--orange); }
.hero-proof strong { font-size: .98rem; }
.hero-proof span { grid-column: 2; color: #b8c9da; font-size: .92rem; line-height: 1.4; }
/* story radius and the band's own shadow weight: the artwork reads as the heaviest
   physical object on the page, which is what DESIGN.md's shadow vocabulary reserves. */
.hero-art img { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 34px 68px rgba(0, 0, 0, .46); }
/* Set from script.js when the artwork fails to load. Hiding the image alone leaves its
   column, so the copy would sit in half a hero beside 600px of nothing. */
.hero-art-missing { grid-template-columns: 1fr; }

h1, h2 { margin: 0; font-family: var(--display); text-wrap: balance; }
/* Sentence case, not uppercase. Both h1 on this site are written in sentence case, and
   the hero artwork's own headline was set that way in the approved comp, so the
   uppercase rule that used to sit here never matched anything it was meant to describe. */
h1 { font-size: clamp(4rem, 6.5vw, 6rem); line-height: .89; letter-spacing: -.035em; }
h1 em { color: var(--orange); font-style: normal; position: relative; }
h1 em::after { content: ""; position: absolute; height: 6px; left: -2%; right: -3%; bottom: 2px; background: var(--orange); border-radius: 50%; transform: rotate(-2deg); }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 0 24px; border: 1px solid transparent; border-radius: 8px; text-decoration: none; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--orange); color: var(--white); box-shadow: 0 14px 30px rgba(244,90,49,.22); }
.button-primary:hover { background: #ff6a42; box-shadow: 0 16px 34px rgba(244,90,49,.3); }
.button-secondary { border-color: rgba(255,255,255,.75); background: rgba(3,20,40,.45); }
.button-secondary:hover { background: rgba(255,255,255,.1); }

/* The image-failure fallback that used to live here is gone with the raster that needed
   it. The headline, sub-copy, navigation and actions are real text now, so a hero image
   that never loads costs a picture and not a page; script.js hides the broken box and
   nothing else has to be revealed. The sticky header is present at every width, so the
   anchor offset it used to carry belongs on the base rule below. */
main section { scroll-margin-top: 64px; }

.how-section { padding: 140px clamp(24px, 7vw, 110px); color: var(--navy-950); background: var(--paper); }
.section-heading { display: grid; grid-template-columns: 1fr .75fr; gap: 60px; align-items: end; margin-bottom: 80px; }
h2 { font-size: clamp(3rem, 5.5vw, 5.2rem); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.section-heading p, .runner-copy p, .privacy-section p, .spectator-copy p { max-width: 620px; margin: 0; font-size: 1.18rem; color: #34506d; }
.course-story { display: grid; grid-template-columns: minmax(280px, .72fr) 1.45fr; min-height: 590px; background: var(--navy-900); color: white; overflow: hidden; border-radius: 28px; box-shadow: 0 30px 70px rgba(3,20,40,.18); }
.story-copy { padding: clamp(32px, 5vw, 70px); display: flex; flex-direction: column; justify-content: center; }
.story-step { appearance: none; display: grid; grid-template-columns: 18px 1fr; column-gap: 18px; text-align: left; border: 0; background: transparent; padding: 22px 0; opacity: .52; cursor: pointer; transition: opacity .25s, transform .45s var(--ease-out); }
.story-step + .story-step { border-top: 1px solid rgba(255,255,255,.15); }
.story-step:hover, .story-step.is-active { opacity: 1; }
.story-step.is-active { transform: translateX(8px); }
.step-dot { grid-row: 1 / 3; width: 13px; height: 13px; margin-top: 7px; border: 2px solid var(--yellow); border-radius: 50%; }
.story-step.is-active .step-dot { background: var(--yellow); box-shadow: 0 0 0 6px rgba(243,201,66,.12); }
.story-step strong { font: 700 1.55rem/1.1 var(--display); text-transform: uppercase; }
.story-step small { grid-column: 2; margin-top: 7px; color: #c7d4e1; font-size: .94rem; line-height: 1.45; }
.route-demo { position: relative; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, #144f9c, #082d5e 60%, #061b36); }
.route-demo::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at 80% 0%, transparent 0 40px, rgba(243,201,66,.16) 41px 43px); opacity: .75; }
.route-line { width: 88%; position: relative; z-index: 1; overflow: visible; }
.contour { fill: none; stroke: var(--yellow); stroke-width: 2; opacity: .5; }
.contour-two { opacity: .25; }
.course-shadow { fill: none; stroke: rgba(0,0,0,.25); stroke-width: 17; stroke-linecap: round; }
.course { fill: none; stroke: white; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out); }
.route-demo[data-state="share"] .course { stroke-dashoffset: .46; }
.route-demo[data-state="wait"] .course { stroke-dashoffset: .18; }
.runner-dot { fill: var(--orange); stroke: white; stroke-width: 5; transition: transform .8s var(--ease-out); transform-origin: 330px 270px; }
.route-demo[data-state="arrive"] .runner-dot { transform: translate(150px,-58px); }
.wait-pin { fill: var(--orange); transition: opacity .3s, transform .7s var(--ease-out); }
.wait-pin circle { fill: var(--navy-900); }
.route-demo[data-state="share"] .wait-pin { opacity: .2; transform: translate(535px,152px) scale(.8); }
.demo-readout { position: absolute; z-index: 2; right: 34px; bottom: 30px; min-width: 210px; padding: 16px 20px; background: var(--paper); color: var(--navy-900); border-radius: 8px; box-shadow: 0 12px 34px rgba(0,0,0,.25); }
.demo-readout span { display: block; text-transform: uppercase; color: var(--blue-600); font-weight: 700; font-size: .72rem; letter-spacing: .08em; }
.demo-readout strong { display: block; font: 700 1.5rem/1.15 var(--display); text-transform: uppercase; margin-top: 4px; }

.runner-section { padding: 130px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(60px, 10vw, 150px); align-items: center; background: #0a2d58; }
.runner-copy p { color: #cedae7; margin-top: 26px; }
.signal-board { padding: clamp(28px, 4vw, 50px); border: 1px solid rgba(255,255,255,.18); background: #071d37; border-radius: 22px; box-shadow: 0 28px 65px rgba(0,0,0,.28); }
.signal-primary small { display: block; text-transform: uppercase; letter-spacing: .12em; color: #9ab4ce; font-weight: 700; }
.signal-primary strong { display: block; font: 700 clamp(5rem, 10vw, 8.8rem)/.85 var(--display); color: var(--yellow); font-variant-numeric: tabular-nums; }
.signal-primary span { color: #dbe6ef; }
.signal-board dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 35px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); }
.signal-board dl div { min-width: 0; }
.signal-board dt { color: #89a6c2; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.signal-board dd { margin: 4px 0 0; font: 600 1.2rem var(--display); font-variant-numeric: tabular-nums; }
.signal-board dd i { display: inline-block; width: 8px; height: 8px; background: #79e59b; border-radius: 50%; margin-right: 5px; }

.spectator-section { padding: 130px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(60px, 10vw, 150px); align-items: center; background: var(--paper); color: var(--navy-950); }
.spectator-copy p { margin-top: 26px; }
.spectator-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 26px; }
.spectator-points li { display: grid; grid-template-columns: 13px 1fr; column-gap: 18px; align-items: start; }
.spectator-points li::before { content: ""; width: 13px; height: 13px; margin-top: 9px; border: 3px solid var(--orange); border-radius: 50%; }
.spectator-points strong { grid-column: 2; font: 700 1.35rem/1.1 var(--display); text-transform: uppercase; }
.spectator-points span { grid-column: 2; margin-top: 5px; color: #34506d; }

.privacy-section { padding: 110px clamp(24px, 10vw, 160px); background: var(--yellow); color: var(--navy-950); display: grid; grid-template-columns: 220px 1fr; gap: clamp(45px, 8vw, 120px); align-items: center; }
.privacy-section p { color: #243d55; margin-top: 24px; }
.privacy-mark { width: 210px; height: 170px; position: relative; }
.privacy-mark span { position: absolute; left: 50%; top: 50%; width: 170px; height: 68px; border: 7px solid var(--navy-900); border-radius: 50%; transform: translate(-50%,-50%) rotate(-24deg); }
.privacy-mark span:nth-child(2) { transform: translate(-50%,-50%) rotate(24deg); }
.privacy-mark span:nth-child(3) { width: 48px; height: 48px; border: 0; background: var(--orange); }

.beta-section { padding: 130px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(60px, 9vw, 140px); background: var(--paper); color: var(--navy-950); }
.beta-section > div p { max-width: 58ch; color: #3a5570; }
.beta-section form { align-self: center; }
.beta-section label { display: block; font-weight: 700; margin-bottom: 9px; }
.form-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.form-row input { min-width: 0; min-height: 56px; border: 2px solid #8ca0b2; border-radius: 8px; padding: 0 16px; background: white; color: var(--navy-950); caret-color: var(--orange); }
.form-row input::placeholder { color: #61798f; opacity: 1; }
.form-row input[aria-invalid="true"] { border-color: var(--orange-dark); }
.form-status { min-height: 24px; margin: 10px 0 0; color: #536b81; font-size: .86rem; }
.form-status.is-error { color: #a92f17; font-weight: 600; }
.form-status.is-success { color: #0f6b45; font-weight: 600; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.beta-section button:disabled { cursor: wait; opacity: .72; transform: none; }

.thanks-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, var(--navy-800), var(--navy-950) 62%); }
.thanks-card { width: min(620px, 100%); padding: clamp(36px, 7vw, 72px); border: 1px solid var(--blue-400); border-radius: 22px; background: var(--navy-900); text-align: center; box-shadow: 0 28px 65px rgba(0,0,0,.28); }
.thanks-card img { border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.thanks-kicker { margin: 22px 0 8px; color: var(--yellow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.thanks-card h1 { margin: 0; font: 800 clamp(3.6rem, 10vw, 7.2rem)/.86 var(--display); text-transform: uppercase; }
.thanks-card > p:not(.thanks-kicker) { max-width: 44ch; margin: 24px auto 30px; color: var(--paper-dim); }
.thanks-card .button { display: inline-flex; text-decoration: none; }

footer { padding: 36px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: 1fr auto auto; gap: 20px 36px; align-items: center; color: #b8c9da; }
.footer-brand { color: white; font-size: 26px; }
footer p { margin: 0; }
.footer-policy { color: white; }
/* The unscripted copy of every in-page destination. Kept at the 24px target minimum
   rather than the header's 44px: these are a fallback route, not the primary chrome. */
.footer-nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-nav a { min-height: 32px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; }
.footer-nav a:hover { color: var(--yellow); }

/* Each header breakpoint below is measured against the WIDEST case, which is the
   fallback font rather than Barlow. Measured at 921px with Barlow the row had 16px to
   spare and looked safe; with `sans-serif` substituted the same row ran 24px past its
   own padding. A breakpoint derived from the loaded webfont is a breakpoint that fails
   on the one load where it matters. */
@media (max-width: 1200px) {
  .header-secondary { display: none; }
}

@media (max-width: 1100px) {
  /* The text column stops being wide enough to set a 6.5vw display headline against the
     band, and four nav labels stop fitting in a row beside the brand and the beta
     action, so they collapse behind the disclosure button. The hero still carries
     "See how it works" as a full-size button, so nothing is only in the dropdown.
     The old 760px breakpoint was derived from the hero hotspots crossing the SC 2.5.8
     target-size minimum. Those hotspots no longer exist, so the number could not be
     carried over and had to be re-derived from the layout. */
  .hero { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
  .hero-copy { max-width: 720px; }
  .site-header { grid-template-columns: auto 1fr auto; }
  .header-cta { grid-column: 2; justify-self: end; }
  .menu-toggle { grid-column: 3; display: grid; }
  .site-nav {
    position: absolute;
    top: calc(100% + 6px);
    right: 12px;
    min-width: 216px;
    display: none;
    flex-direction: column;
    padding: 6px;
    background: var(--navy-900);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { min-height: 46px; padding: 0 14px; }
  .course-story { grid-template-columns: 1fr; }
  .story-copy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .story-step + .story-step { border-top: 0; }
  .story-step { display: block; }
  .story-step .step-dot { display: block; margin-bottom: 12px; }
  .story-step small { display: block; }
  .route-demo { min-height: 500px; }
  .spectator-section { gap: clamp(40px, 6vw, 90px); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-header { padding: 8px 16px; }
  .hero { padding-top: clamp(26px, 5vw, 40px); }
  .hero-proof { grid-template-columns: 1fr; gap: 18px; }
  .hero-actions .button { flex: 1 1 auto; }
  .brand { font-size: 25px; gap: 9px; }
  .brand img { width: 45px; height: 45px; border-radius: 12px; }
  h1 { font-size: clamp(3.6rem, 17vw, 5.2rem); }
  .section-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .how-section, .runner-section, .spectator-section, .privacy-section, .beta-section { padding: 90px 20px; }
  .story-copy { display: flex; gap: 0; }
  .story-step + .story-step { border-top: 1px solid rgba(255,255,255,.15); }
  .route-demo { min-height: 390px; }
  .demo-readout { left: 20px; right: 20px; bottom: 20px; }
  .runner-section, .spectator-section, .beta-section { grid-template-columns: 1fr; gap: 50px; }
  .signal-board dl { gap: 8px; }
  .signal-board dd { font-size: 1rem; }
  .privacy-section { grid-template-columns: 1fr; }
  .privacy-mark { width: 170px; height: 120px; }
  .privacy-mark span { width: 140px; height: 55px; }
  .form-row { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; gap: 14px; }
}

/* WCAG 2.2 SC 1.4.10 Reflow is measured at 320 CSS px, and the header is what decides
   whether the page fits there. The brand, the beta action and the disclosure button in
   one row came to a 365px minimum after #54 grew the brand and gave the action an arrow,
   so the page needed two-dimensional scrolling on the narrowest phones. The arrow and
   the wordmark are the two things here that carry no information the page loses. */
@media (max-width: 420px) {
  .site-header { padding: 8px 12px; gap: 6px; }
  .site-header .brand { font-size: 21px; gap: 7px; }
  .site-header .brand img { width: 30px; height: 28px; }
  .header-cta { padding: 0 13px; gap: 0; font-size: .9rem; }
  .header-cta span { display: none; }
}

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