/* Retro Offroad website: one stylesheet for every page (marketing, press kit, legal).
   Static, no external requests: fonts are self-hosted in /assets/fonts. No inline styles anywhere: the
   Content-Security-Policy in firebase.json only allows this file. Dark theme only.
   After changing a file under /assets, run `python tools/site.py stamp` to refresh the ?v= cache-busters. */

@font-face { font-family: "Bungee"; src: url(/assets/fonts/bungee.woff2?v=126eec706b) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/assets/fonts/barlow-600.woff2?v=215a93c696) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/assets/fonts/barlow-800.woff2?v=2515494e8c) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/assets/fonts/barlow-800i.woff2?v=59b4810062) format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  /* Brand palette (the game's colours) */
  --night: #100d14;
  --night-2: #151019;
  --panel: #1d1624;
  --panel-2: #251c2e;
  --dusk: #2a1540;
  --sun: #f2c230;
  --orange: #ff8a3d;
  --pink: #ff4a8d;
  --dirt: #c99a62;
  --red: #e8322b;          /* decorative only: 4.52:1 on night (a bare AA pass), 3.85:1 on dusk (fails) */
  --cream: #fff7c2;
  /* Text (all AA on --night and --panel) */
  --text: #f3ece1;
  --muted: #bdb2c9;
  --faint: #9d92a9;
  --ink: #1b1208;          /* text on yellow/orange */
  --line: rgba(255, 247, 194, 0.12);
  --line-strong: rgba(255, 247, 194, 0.24);
  --sunset: linear-gradient(180deg, #fff7c2 0%, #f7c531 45%, #e56d0e 100%);
  --sunset-x: linear-gradient(90deg, var(--sun), var(--orange) 55%, var(--pink));
  --stripes: linear-gradient(180deg, #000 0 34%, transparent 34% 46%, #000 46% 66%, transparent 66% 80%, #000 80%);
  /* Type */
  --display: "Bungee", "Arial Black", Impact, sans-serif;
  --head: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --body: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --prose: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 64px;
}

/* ---------------------------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  display: flex; flex-direction: column;
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--text);
  font: 600 19px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
svg { flex: none; }
a { color: var(--sun); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cream); }
:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sun); color: var(--ink); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

body > main { flex: 1 0 auto; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 10px;
  background: var(--sun); color: var(--ink); font: 800 18px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--ink); }

/* ---------------------------------------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(16, 13, 20, 0.9);
  border-bottom: 1px solid var(--line);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: rgba(16, 13, 20, 0.7); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 24px; min-height: var(--header-h); }
.site-logo { display: block; padding: 10px 0; border-radius: 6px; }
.site-logo img { height: 30px; width: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: block; padding: 12px 0 10px;
  font: 800 16px/1 var(--head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--cream); }
.site-nav a[aria-current="page"] { color: var(--sun); border-bottom-color: var(--sun); }
@media (max-width: 680px) {
  .site-logo img { height: 24px; }
  .site-nav ul { gap: 0 16px; }
  .site-nav a { font-size: 15px; letter-spacing: .07em; }
  .site-nav .nav-wide { display: none; }
}

/* ---------------------------------------------------------------------------------------------- buttons */
.btn, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 24px 12px; border: 0; border-radius: 12px; cursor: pointer;
  font: italic 800 19px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--ink);
  background: linear-gradient(180deg, #ffe07a 0%, var(--sun) 48%, #eaa51f 100%);
  box-shadow: 0 3px 0 #9a4d0a, 0 12px 28px rgba(242, 194, 48, .2);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover, .button:hover { color: var(--ink); filter: brightness(1.07); transform: translateY(-1px); }
.btn:active, .button:active { transform: translateY(2px); box-shadow: 0 1px 0 #9a4d0a; }
.btn svg { width: 20px; height: 20px; }
.btn-ghost { color: var(--cream); background: rgba(16, 13, 20, .55); box-shadow: inset 0 0 0 2px var(--line-strong); }
.btn-ghost:hover { color: var(--cream); background: rgba(255, 247, 194, .1); }
.btn-ghost:active { box-shadow: inset 0 0 0 2px var(--line-strong); }
.btn-small { min-height: 40px; padding: 10px 16px 9px; font-size: 16px; border-radius: 10px; }

/* ---------------------------------------------------------------------------------------------- shared type */
.kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font: 400 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--sun);
}
.kicker::before {
  content: ""; width: 34px; height: 14px; flex: none; border-radius: 2px;
  background: linear-gradient(180deg, var(--sun), var(--orange) 60%, var(--pink));
  -webkit-mask-image: var(--stripes); mask-image: var(--stripes);
}
.headline {
  margin: 0; color: var(--cream);
  font: italic 800 clamp(40px, 6.2vw, 78px)/.94 var(--head); letter-spacing: .005em; text-transform: uppercase;
}
.headline em { font-style: inherit; color: var(--sun); }
.lede { margin: 20px 0 0; max-width: 58ch; font-size: clamp(19px, 1.7vw, 22px); color: var(--text); }
.section { position: relative; padding-block: clamp(72px, 10vw, 136px); }
.section-head { max-width: 760px; }
.sunstripe {
  height: 22px; background: var(--sunset-x);
  -webkit-mask-image: var(--stripes); mask-image: var(--stripes);
}

/* ---------------------------------------------------------------------------------------------- hero */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(600px, calc(100svh - var(--header-h)), 980px);
  background: var(--dusk);
}
.hero-art { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 13, 20, .9) 0%, rgba(16, 13, 20, .72) 30%, rgba(16, 13, 20, .18) 58%, rgba(16, 13, 20, 0) 76%),
    linear-gradient(0deg, var(--night) 0%, rgba(16, 13, 20, .55) 16%, rgba(16, 13, 20, 0) 40%);
}
.hero-inner { padding-block: clamp(56px, 11vh, 140px) clamp(44px, 9vh, 104px); }
.hero-copy { max-width: 600px; }
.hero h1 { margin: 0; line-height: 0; }
.hero-logo { width: min(560px, 100%); height: auto; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .55)); }
.tagline {
  margin: clamp(16px, 2.2vw, 26px) 0 0; color: var(--cream);
  font: italic 800 clamp(34px, 5.4vw, 64px)/1 var(--head); letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.hero-lede { margin: 14px 0 0; max-width: 38ch; font-size: clamp(20px, 2vw, 24px); line-height: 1.35; color: var(--text); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 28px; }
.soon {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  padding: 11px 18px 10px; border-radius: 24px;
  background: rgba(16, 13, 20, .78); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 800 17px/1.1 var(--head); letter-spacing: .07em; text-transform: uppercase; color: var(--cream);
}
.soon::before {
  content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--pink); box-shadow: 0 0 0 4px rgba(255, 74, 141, .22), 0 0 14px var(--pink);
}
.hero-links { display: flex; flex-wrap: wrap; gap: 12px; }
/* Wide screens: the whole key art sits bottom right at 56vw, uncropped, so all four trucks show and the red truck's
   nose starts past the middle of the screen, clear of the copy (which is capped at 44vw). Its top and left edges
   fade into a gradient that carries the art's own sky, sunset band and dirt (measured from the art, at the heights
   they have in it: the art is 31.5vw tall and sits on the bottom edge) across the rest of the hero. */
@media (min-width: 1100px) {
  .hero {
    background:
      radial-gradient(34vw 15vw at 72vw calc(100% - 17vw), rgba(255, 138, 61, .28), rgba(255, 74, 141, .1) 55%, transparent 75%),
      linear-gradient(180deg, #0e0142 0%, #16034f calc(100% - 31.5vw), #33095f calc(100% - 26.8vw), #4d0e4a calc(100% - 22vw),
        #7c1a4a calc(100% - 18.9vw), #2a0a3a calc(100% - 16.4vw), #3c0b2c calc(100% - 11.7vw), #3e1a1c calc(100% - 8.2vw),
        #100d14 100%);
  }
  .hero-art { inset: auto 0 0 auto; width: 56vw; aspect-ratio: 16 / 9; }
  .hero-art img {
    object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 17%), linear-gradient(180deg, transparent 0%, #000 20%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 17%), linear-gradient(180deg, transparent 0%, #000 20%);
    mask-composite: intersect;
  }
  .hero-copy { max-width: min(600px, 44vw); }
  .hero-logo { width: min(560px, 42vw); }
  .hero::after {
    background:
      linear-gradient(90deg, rgba(16, 13, 20, .6) 0%, rgba(16, 13, 20, .35) 34%, rgba(16, 13, 20, 0) 50%),
      linear-gradient(0deg, var(--night) 0%, rgba(16, 13, 20, .45) 10%, rgba(16, 13, 20, 0) 24%);
  }
}
/* Tablets and phones: the art sits on top at its own shape and fades into the page; the copy follows,
   with the logo overlapping the fade. Phones in portrait get the square key art. */
@media (max-width: 1099px) {
  .hero { display: block; min-height: 0; background: var(--night); }
  .hero::after { content: none; }
  .hero-art { display: block; position: relative; z-index: 0; inset: auto; aspect-ratio: 16 / 9; max-height: 72vh; max-height: 72svh; margin-inline: auto; }
  .hero-art img {
    position: absolute; inset: 0; object-position: 50% 55%;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  }
  .hero-inner { position: relative; margin-top: clamp(-110px, -11vw, -40px); padding-top: 0; padding-bottom: clamp(48px, 8vw, 80px); }
}
@media (max-width: 760px) and (orientation: portrait) {
  .hero-art { aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation: settle 2.6s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .hero-copy > :nth-child(3) { animation-delay: .22s; }
  .hero-copy > :nth-child(4) { animation-delay: .32s; }
}
@keyframes settle { from { transform: scale(1.07); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------------------------------- stats band */
.stats { border-block: 1px solid var(--line); background: var(--night-2); }
.stats ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); }
.stats li { padding: clamp(20px, 3vw, 30px) 10px; text-align: center; background: var(--night-2); }
.stats b {
  display: block; font: 400 clamp(36px, 4.6vw, 56px)/1 var(--display);
  background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats span { display: block; margin-top: 10px; font: 800 15px/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stats .wrap { padding-inline: 0; }
@media (max-width: 700px) {
  .stats ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats li { grid-column: span 2; }
  .stats li:nth-child(n+4) { grid-column: span 3; }
}

/* ---------------------------------------------------------------------------------------------- the game */
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (max-width: 920px) { .game-grid { grid-template-columns: minmax(0, 1fr); } }
.steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 22px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 14px; }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 2; padding-top: 2px;
  font: 400 30px/1 var(--display); color: var(--orange);
}
.steps h3 { margin: 0; font: italic 800 27px/1.05 var(--head); letter-spacing: .02em; text-transform: uppercase; color: var(--cream); }
.steps p { margin: 6px 0 0; color: var(--muted); }

.startgrid {
  position: relative; margin: 0; aspect-ratio: 1; max-width: 620px; width: 100%; justify-self: center; border-radius: 24px; overflow: hidden;
  display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); padding: 7% 0;
  background:
    radial-gradient(90% 55% at 12% -12%, rgba(255, 247, 194, .34), transparent 62%),
    radial-gradient(90% 55% at 92% -12%, rgba(255, 247, 194, .26), transparent 62%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #8a6038 0%, #6e4a2c 55%, #57391f 100%);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 247, 194, .14), inset 0 -40px 80px rgba(16, 13, 20, .45);
}
.startgrid::before {
  content: ""; position: absolute; top: -4%; bottom: -4%; left: 71%; width: 30px;
  background: repeating-conic-gradient(#f3ece1 0 25%, #16111c 0 50%) 0 0 / 15px 15px;
  transform: skewX(-6deg); opacity: .9; box-shadow: 0 0 22px rgba(0, 0, 0, .4);
}
.startgrid::after {
  content: "START"; position: absolute; left: calc(71% + 40px); top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font: 400 clamp(16px, 2.2vw, 24px)/1 var(--display); letter-spacing: .3em; color: rgba(255, 247, 194, .5);
}
.lane { position: relative; display: flex; align-items: center; }
.lane + .lane { border-top: 2px dashed rgba(255, 247, 194, .16); }
.lane img { width: 29%; height: auto; filter: drop-shadow(4px 8px 6px rgba(0, 0, 0, .45)); }
.lane:nth-child(1) img { margin-left: 39%; }
.lane:nth-child(2) img { margin-left: 30%; }
.lane:nth-child(3) img { margin-left: 21%; }
.lane:nth-child(4) img { margin-left: 12%; }
@media (prefers-reduced-motion: no-preference) {
  .lane img { animation: idle 1.9s ease-in-out infinite; }
  .lane:nth-child(2) img { animation-delay: -.5s; }
  .lane:nth-child(3) img { animation-delay: -1.1s; }
  .lane:nth-child(4) img { animation-delay: -1.5s; }
}
@keyframes idle { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, 1px); } }

/* ---------------------------------------------------------------------------------------------- features */
.features { background: linear-gradient(180deg, var(--night) 0%, #150f1c 100%); }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
@media (max-width: 1100px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
.feature {
  position: relative; overflow: hidden; padding: 28px 24px 28px; border-radius: 18px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: inset 0 0 0 1px var(--line);
}
.feature::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--sunset-x); }
.feature svg { width: 46px; height: 46px; color: var(--sun); }
.feature h3 { margin: 18px 0 8px; font: italic 800 26px/1.02 var(--head); letter-spacing: .02em; text-transform: uppercase; color: var(--cream); }
.feature p { margin: 0; color: var(--muted); font-size: 18px; }
@media (max-width: 580px) {
  .feature { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; padding: 22px 20px 24px; }
  .feature svg { width: 36px; height: 36px; grid-row: 1 / span 4; }
  .feature > :not(svg) { grid-column: 2; }
  .feature h3 { margin-top: 4px; font-size: 24px; }
}
.ladder { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.ladder li {
  padding: 5px 9px 4px; border-radius: 6px; color: var(--ink);
  font: 800 13px/1 var(--head); letter-spacing: .08em; text-transform: uppercase;
}
.ladder .c-rookie { background: #8dff7a; }
.ladder .c-pro { background: #7fd4ff; }
.ladder .c-veteran { background: #f2c230; }
.ladder .c-elite { background: #ff8a3d; }
.ladder .c-legend { background: #ff4a8d; }
.stations { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.stations li {
  padding: 5px 9px 4px; border-radius: 6px; color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 800 13px/1 var(--head); letter-spacing: .08em; text-transform: uppercase;
}

/* ---------------------------------------------------------------------------------------------- screenshots */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 48px 0 0; padding: 0; list-style: none; }
.gallery li:first-child, .gallery li:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (max-width: 640px) { .gallery { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.gallery figure { margin: 0; }
.shot {
  display: block; position: relative; overflow: hidden; border-radius: 16px; background: var(--panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 1px var(--line);
}
.shot img { width: 100%; height: auto; aspect-ratio: 1600 / 736; object-fit: cover; }
.shot::after {
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(16, 13, 20, .72) center / 20px 20px no-repeat;
  box-shadow: inset 0 0 0 1px var(--line-strong); opacity: 0; transition: opacity .2s ease;
}
.shot:hover::after, .shot:focus-visible::after { opacity: 1; }
.shot .zoom { position: absolute; right: 22px; bottom: 22px; width: 20px; height: 20px; color: var(--cream); opacity: 0; transition: opacity .2s ease; z-index: 1; }
.shot:hover .zoom, .shot:focus-visible .zoom { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .shot img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .shot:hover img { transform: scale(1.025); }
}
.gallery figcaption { margin-top: 12px; font: 800 16px/1.2 var(--head); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------------------------------------- look strip */
.look {
  overflow: hidden; isolation: isolate;
  background:
    radial-gradient(70% 55% at 72% 112%, rgba(255, 74, 141, .38), transparent 62%),
    linear-gradient(180deg, #150f1c 0%, var(--dusk) 58%, #3b1648 100%);
}
.look::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: 4%; bottom: 44%; width: clamp(260px, 42vw, 620px); aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--cream) 0%, var(--sun) 35%, var(--orange) 70%, var(--pink) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 57%, #000 57% 67%, transparent 67% 74%, #000 74% 82%, transparent 82% 90%, #000 90%);
  mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 57%, #000 57% 67%, transparent 67% 74%, #000 74% 82%, transparent 82% 90%, #000 90%);
  opacity: .5;
}
.look::after {
  content: ""; position: absolute; z-index: -1; left: 42%; right: 0; bottom: 44%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 61, .7) 30%, rgba(255, 74, 141, .7) 70%, transparent);
}
.look-floor {
  position: absolute; left: -50%; right: -50%; bottom: -2%; height: 46%; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 138, 61, .55) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 138, 61, .55) 2px, transparent 2px);
  background-size: 64px 64px;
  transform: perspective(320px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  opacity: .6;
}
@media (prefers-reduced-motion: no-preference) { .look-floor { animation: floor 4s linear infinite; } }
@keyframes floor { to { background-position: 0 64px, 0 0; } }
.look-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 920px) {
  .look-grid { grid-template-columns: minmax(0, 1fr); }
  .look::before { right: 50%; transform: translateX(50%); bottom: 20%; width: min(88vw, 560px); }
  .look::after { bottom: 20%; left: 0; }
}
.phone {
  position: relative; margin: 0; padding: clamp(8px, 1.3vw, 16px); border-radius: clamp(22px, 3vw, 40px);
  background: linear-gradient(145deg, #2a2231, #0c0a10 60%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 247, 194, .1), 0 0 0 1px rgba(0, 0, 0, .6);
}
.phone::before {
  content: ""; position: absolute; left: clamp(3px, .55vw, 7px); top: 50%; width: clamp(3px, .45vw, 6px); height: 18%;
  transform: translateY(-50%); border-radius: 99px; background: #050407;
}
.phone-screen { position: relative; overflow: hidden; border-radius: clamp(14px, 2vw, 26px); background: #000; }
/* The loop and its still are the phone's own frame: the iPhone 6.9" layout in landscape, 800x368. */
.phone-screen img { width: 100%; height: auto; aspect-ratio: 800 / 368; object-fit: cover; }
.look-note { margin: 16px 0 0; font-size: 16px; color: var(--muted); }
/* Phones and Save-Data: the clip only loads when asked for. The button sits bottom left, off the action. */
.loop-play {
  position: absolute; left: clamp(8px, 2.5%, 16px); bottom: clamp(8px, 4%, 16px);
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 11px 20px 10px 14px;
  border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 800 17px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--cream);
  background: rgba(16, 13, 20, .84); box-shadow: inset 0 0 0 2px var(--line-strong), 0 10px 30px rgba(0, 0, 0, .5);
}
.loop-play:hover { background: rgba(42, 21, 64, .92); }
.loop-play[hidden] { display: none; }
.loop-play svg { width: 22px; height: 22px; color: var(--sun); }
.loop-play[aria-busy="true"] { opacity: .7; cursor: progress; }
.dl-size { text-transform: none; font-weight: 600; letter-spacing: .02em; }

/* ---------------------------------------------------------------------------------------------- FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 2px; cursor: pointer; list-style: none;
  font: italic 800 clamp(22px, 2.3vw, 26px)/1.1 var(--head); letter-spacing: .02em; text-transform: uppercase; color: var(--cream);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 26px/1 var(--display); color: var(--sun); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--sun); }
.faq details p { margin: -4px 0 22px; max-width: 62ch; color: var(--muted); }
.faq details p + p { margin-top: -10px; }

/* ---------------------------------------------------------------------------------------------- closing CTA */
.cta {
  overflow: hidden; text-align: center; padding-bottom: 0;
  background:
    radial-gradient(50% 60% at 50% 100%, rgba(255, 138, 61, .32), transparent 70%),
    linear-gradient(180deg, #150f1c, #221133);
}
.cta-title { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto; }
.cta-big {
  font: 400 clamp(42px, 7.4vw, 96px)/1 var(--display); text-transform: uppercase;
  background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 1px 0 #7a120b) drop-shadow(1px 1px 0 #7a120b) drop-shadow(1px 1px 0 #3d0805) drop-shadow(1px 2px 0 #3d0805) drop-shadow(1px 1px 0 #3d0805);
}
.cta-to { font: italic 800 clamp(26px, 3.6vw, 44px)/1.05 var(--head); letter-spacing: .02em; text-transform: uppercase; color: var(--cream); }
/* Apple's trademark style keeps the lowercase i of iPhone even in all-caps settings: iPHONE */
.tm { text-transform: none; }
.tm > span { text-transform: uppercase; }
.cta-sub { margin: 20px auto 0; max-width: 40ch; font-size: clamp(19px, 1.8vw, 22px); color: var(--text); }
.cta .hero-links { justify-content: center; margin-top: 28px; }
.drivers { display: flex; justify-content: center; align-items: flex-end; gap: clamp(0px, 2vw, 28px); margin: clamp(40px, 6vw, 64px) auto 0; max-width: 980px; }
.drivers img { width: auto; height: clamp(150px, 24vw, 260px); flex: 0 1 auto; min-width: 0; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.ground { height: 18px; background: linear-gradient(180deg, #6e4a2c, #3b2416); box-shadow: 0 -1px 0 rgba(255, 247, 194, .2); }

/* ---------------------------------------------------------------------------------------------- footer */
.site-footer { background: #0b0910; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px 48px; padding-block: 44px 20px; }
.footer-brand img { height: 28px; width: auto; }
.footer-brand p { margin: 12px 0 0; max-width: 36ch; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: inline-block; padding: 6px 0; color: var(--text); text-decoration: none; font: 800 16px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; }
.footer-nav a:hover { color: var(--sun); }
.fine {
  padding-block: 18px 36px; font-size: 15px; color: var(--faint);
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.fine p { margin: 0 0 6px; }
.fine a { color: var(--muted); }

/* ---------------------------------------------------------------------------------------------- inner pages */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(44px, 7vw, 88px) clamp(30px, 4.5vw, 52px);
  background:
    radial-gradient(55% 130% at 88% 120%, rgba(255, 138, 61, .38), transparent 62%),
    linear-gradient(180deg, #130d1a 0%, var(--dusk) 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero { --sun-size: clamp(200px, 25vw, 320px); }
.page-hero::after {
  content: ""; position: absolute; z-index: -1; right: max(-40px, -3vw); bottom: calc(var(--sun-size) * -0.46);
  width: var(--sun-size); aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(180deg, var(--cream) 0%, var(--sun) 30%, var(--orange) 50%, var(--pink) 64%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 30%, transparent 30% 32.5%, #000 32.5% 38%, transparent 38% 41.5%, #000 41.5% 46%, transparent 46% 50.5%, #000 50.5%);
  mask-image: linear-gradient(180deg, #000 0 30%, transparent 30% 32.5%, #000 32.5% 38%, transparent 38% 41.5%, #000 41.5% 46%, transparent 46% 50.5%, #000 50.5%);
  opacity: .85;
}
.page-hero h1 {
  margin: 0; max-width: 16ch; color: var(--cream);
  font: italic 800 clamp(42px, 6.4vw, 76px)/.94 var(--head); letter-spacing: .005em; text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}
.page-hero .meta { margin: 16px 0 0; max-width: 62ch; font: 400 16px/1.55 var(--prose); color: var(--muted); }
.page-hero .kicker { margin-bottom: 18px; }
@media (max-width: 560px) {
  .page-hero { --sun-size: 170px; padding-bottom: 104px; }
  .page-hero::after { right: -20px; }
}

.prose {
  max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto;
  padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(64px, 8vw, 96px);
  font: 400 17.5px/1.68 var(--prose); color: var(--text);
}
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin: 48px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--cream);
  font: italic 800 clamp(28px, 3.2vw, 34px)/1.05 var(--head); letter-spacing: .01em; text-transform: uppercase;
}
.prose h3 { margin: 30px 0 8px; font: 800 23px/1.2 var(--head); letter-spacing: .02em; color: var(--sun); }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--orange); }
.prose strong { color: var(--cream); }
.prose .lede { max-width: none; margin: 0 0 22px; font-size: 19.5px; line-height: 1.6; }
.prose .meta { color: var(--muted); font-size: 15.5px; }
.note {
  margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; font-size: 16px;
  background: rgba(242, 194, 48, .08); box-shadow: inset 0 0 0 1px rgba(242, 194, 48, .3); border-left: 4px solid var(--sun);
}
.card {
  margin: 0 0 18px; padding: 22px 24px; border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line);
}
.prose .card h2, .prose .card h3 { margin-top: 0; padding-top: 0; border: 0; }
.prose .card h2 { font-size: 26px; }
.table-wrap { overflow-x: auto; margin: 0 0 18px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
th, td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--panel-2); color: var(--cream); font: 800 15px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--cream); font-weight: 600; }
code { font-size: .92em; padding: 1px 6px; border-radius: 6px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
label { display: block; margin: 18px 0 6px; font: 800 16px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
input[type="text"], input[type="email"] {
  width: 100%; max-width: 380px; padding: 12px 14px; border-radius: 10px; border: 0;
  font: 400 17px/1.3 var(--prose); color: var(--text); background: #0d0a12;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
input[type="text"]:focus-visible, input[type="email"]:focus-visible { outline-offset: 2px; }
input::placeholder { color: var(--faint); opacity: 1; }
.prose .button { margin-top: 16px; }
.hint { margin-top: 10px; color: var(--muted); font-size: 15px; }

/* 404 */
.lost { text-align: left; }
.lost .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------------------------------------------------------------------------------------------- press kit */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 32px 0 0; border-radius: 16px; overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 640px) { .facts { grid-template-columns: minmax(0, 1fr); } }
.facts div { padding: 16px 20px; background: var(--panel); }
.facts dt { font: 800 14px/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.facts dd { margin: 4px 0 0; font-size: 21px; line-height: 1.3; color: var(--cream); }
.press-section { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.press-section:first-of-type { border-top: 0; }
.press-h2 { margin: 0 0 8px; color: var(--cream); font: italic 800 clamp(32px, 4vw, 48px)/1 var(--head); letter-spacing: .01em; text-transform: uppercase; }
.press-intro { margin: 0; max-width: 60ch; color: var(--muted); }
.copyblock { position: relative; margin: 24px 0 0; padding: 22px 24px 20px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.copyblock h3 { margin: 0 0 10px; font: 800 15px/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--sun); }
.copyblock .copy-text p { margin: 0 0 12px; font: 400 17px/1.65 var(--prose); color: var(--text); max-width: 72ch; }
.copyblock .copy-text p:last-child { margin-bottom: 0; }
.copyblock .copy-btn { position: absolute; top: 14px; right: 14px; }
.copyblock h3 + .copy-text { padding-right: 0; }
.copy-btn[hidden] { display: none; }
.featurelist { columns: 2 320px; column-gap: 40px; margin: 24px 0 0; padding-left: 22px; }
.featurelist li { margin-bottom: 10px; break-inside: avoid; }
.featurelist li::marker { color: var(--orange); }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.dl-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.dl-preview { position: relative; aspect-ratio: 16 / 9; background: var(--night); }
.dl-preview.on-light { background: #efe6d4; }
.dl-preview.on-red { background: var(--red); }
.dl-preview.is-art img { inset: 7%; width: 86%; height: 86%; }
.dl-preview.on-dusk { background: linear-gradient(180deg, #1c0f2c, var(--dusk)); }
.dl-preview img { position: absolute; inset: 14% 10%; width: 80%; height: 72%; object-fit: contain; }
.dl-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.dl-body h3 { margin: 0; font: italic 800 22px/1.1 var(--head); letter-spacing: .02em; text-transform: uppercase; color: var(--cream); }
.dl-body p { margin: 0; font-size: 17px; color: var(--muted); }
.dl-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.dl-links a {
  display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: 9px 14px 8px; border-radius: 10px; text-decoration: none;
  font: 800 15px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--cream);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
.dl-links a:hover { color: var(--ink); background: var(--sun); box-shadow: none; }
.dl-links a.primary { color: var(--ink); background: var(--sun); box-shadow: none; }
.dl-links a.primary:hover { filter: brightness(1.07); }
.press-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (max-width: 860px) { .press-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .press-shots { grid-template-columns: minmax(0, 1fr); } }
.press-shots a { display: block; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.press-shots img { width: 100%; aspect-ratio: 1600 / 736; object-fit: cover; }
.contact-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding: 24px; border-radius: 16px; background: linear-gradient(90deg, var(--panel-2), var(--dusk)); box-shadow: inset 0 0 0 1px var(--line); }
.contact-card p { margin: 0; font-size: 21px; color: var(--cream); }

/* ---------------------------------------------------------------------------------------------- lightbox */
.lightbox { width: min(96vw, 1500px); max-width: none; max-height: 96vh; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.lightbox::backdrop { background: rgba(8, 6, 11, .92); }
.lightbox figure { margin: 0; }
.lightbox img { width: 100%; height: auto; max-height: calc(96vh - 80px); object-fit: contain; border-radius: 12px; background: #000; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.lightbox-bar figcaption { font: 800 17px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.lightbox-controls { display: flex; gap: 8px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
  color: var(--cream); background: rgba(255, 247, 194, .08); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.icon-btn:hover { background: rgba(255, 247, 194, .16); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------------------------------- reveal on scroll (JS adds .pre-reveal only when motion is welcome) */
@media (prefers-reduced-motion: no-preference) {
  .pre-reveal { opacity: 0; transform: translateY(26px); }
  .pre-reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
}

/* ---------------------------------------------------------------------------------------------- accessibility fallbacks */
@media (forced-colors: active) {
  .stats b, .cta-big { color: CanvasText; background: none; filter: none; }
  .btn, .button, .dl-links a { border: 2px solid ButtonText; }
}
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .site-header, .site-footer .footer-nav, .skip-link, .page-hero::after { display: none; }
  .page-hero { background: none; border: 0; padding: 0 0 12pt; }
  .page-hero h1, .prose h2, .prose h3, .prose strong, td:first-child, th { color: #000; text-shadow: none; }
  .prose, .page-hero .meta, .fine { color: #000; }
  a { color: #000; }
  .card, .note, .table-wrap { box-shadow: none; border: 1px solid #999; background: none; }
  th { background: #eee; }
}
.page-hero .press-jump { margin-top: 26px; }
.press-more { margin-top: 20px; }
.dl-grid + .press-more, .press-shots + .press-more { padding-top: 0; }
.page-hero.is-narrow .wrap { max-width: calc(760px + 2 * var(--gutter)); }