/* ==========================================================================
   Garage Crew — landing page
   Tokens come from the Indian Garage brand book:
   Garage Red #D20000 · Garage Navy #1E2637 · Technical Grey #DCDCDC · Off-white #F1F1F1
   Type: Bebas Neue (headings) · Montserrat (subheads, body)
   ========================================================================== */

:root {
  --red: #D20000;
  --red-hot: #E5161A;
  --navy: #1E2637;
  --navy-deep: #171C28;
  --navy-ink: #0D1118;
  /* page is black; navy survives only as a faint panel tint */
  --bg: #090B0F;
  --bg-raise: #0E1117;
  --bg-deep: #060607;      /* deeper than the page black: the icons were drawn on pure black */
  --surface: #12151C;
  --line: rgba(241, 241, 241, .12);
  --line-strong: rgba(241, 241, 241, .24);
  --red-text: #FF5A4F;   /* readable red for small text on black (6.6:1) */
  --paper: #F1F1F1;
  --white: #FAFAFA;
  --grey: #DCDCDC;

  --display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --text: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 72px;
  --section-y: clamp(72px, 10vw, 152px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-shutter: cubic-bezier(.76, 0, .24, 1);
  --focus: #FAFAFA;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font: 400 1rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 300;
  background: var(--paper); color: var(--navy); padding: 10px 16px; font-weight: 600; border-radius: 4px;
}
.skip:focus { top: 12px; }

/* ---------- Shared bits ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: .75em;
  font: 600 .75rem/1.2 var(--text); letter-spacing: .22em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: .6em; height: .6em; background: var(--red); flex: none; }
.eyebrow--light { color: rgba(241, 241, 241, .8); }
.eyebrow--dark { color: var(--navy); }

.btn {
  --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 1.05em 1.6em; border-radius: 4px; border: 2px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 700 .8125rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn--primary { --btn-bg: var(--red); --btn-fg: #fff; --btn-bd: var(--red); }
.btn--primary:hover { --btn-bg: var(--white); --btn-fg: var(--red); --btn-bd: var(--white); }
.btn--ghost { --btn-bd: rgba(241, 241, 241, .4); }
.btn--ghost:hover { --btn-bg: var(--paper); --btn-fg: var(--navy); --btn-bd: var(--paper); }
.btn--sm { padding: .85em 1.25em; font-size: .75rem; }
.btn--lg { padding: 1.25em 1.9em; font-size: .875rem; }
.btn__arrow { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:hover .btn__arrow--down { transform: translateY(4px); }

/* ---------- Nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.nav.is-stuck {
  background: rgba(9, 11, 15, .84);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.nav__inner {
  width: min(var(--max), 100%); height: 100%; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 28px;
}
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); margin-left: auto; }
.nav__links a {
  position: relative; text-decoration: none;
  font: 600 .75rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(241, 241, 241, .86); padding: 8px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__login { padding-left: clamp(18px, 2.4vw, 36px) !important; border-left: 1px solid rgba(255, 255, 255, .18); }
.nav__join-mobile { display: none; }

.logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; color: var(--paper); }
.logo__img { display: block; height: 44px; width: auto; }

.menu-toggle { display: none; }

/* ---------- 01 · Hero ---------- */

.hero {
  position: relative; z-index: 2; isolation: isolate;
  /* Desktop: stop short of the fold so the ticker and the top of the next section peek in */
  --hero-h: clamp(600px, calc(100vh - 220px), 860px);
  --hero-h: clamp(600px, calc(100svh - 220px), 860px);
  min-height: var(--hero-h);
  padding-top: var(--nav-h);
  display: grid;
  background: var(--bg);
}
/* brand "grid lines" language */
.hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 72% 45%, #000 15%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 72% 45%, #000 15%, transparent 78%);
}
.hero__inner {
  width: min(var(--max), 100%); margin-inline: auto; padding: clamp(16px, 2.5vh, 32px) var(--gutter) clamp(24px, 3.5vh, 44px);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 72px); align-items: center;
}

.hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero__title {
  margin: 0 0 clamp(8px, 1.4vh, 14px);
  font: 400 clamp(3.96rem, min(10.56vw, calc((var(--hero-h) - 370px) / 2.5)), 10.725rem)/.86 var(--display);
  text-transform: uppercase; letter-spacing: .005em;
}
.line { display: block; overflow: hidden; padding: .035em 0 .02em; }
.line__in { display: block; animation: rise .95s var(--ease) calc(var(--intro, 1s) + var(--i) * .1s) both; }
.crew-block {
  display: inline-block; padding: .01em .14em 0 .1em; color: #fff; background-color: var(--red);
  background-image: repeating-linear-gradient(180deg, transparent 0 .09em, rgba(0,0,0,.16) .09em .1em);
}
.hero__sub { max-width: 34rem; font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.6; color: rgba(241, 241, 241, .82); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(22px, 3.4vh, 36px); }
.hero__sub { animation: fade-up .8s var(--ease) calc(var(--intro, 1s) + .45s) both; }
.hero__cta { animation: fade-up .8s var(--ease) calc(var(--intro, 1s) + .55s) both; }

@keyframes rise { from { transform: translateY(112%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }

/* ----- Viewfinder (signature) ----- */

/* ----- Viewfinder → an iPhone, mid-recording: full-bleed video, timer and record button only (signature) ----- */

.viewfinder {
  container-type: inline-size; position: relative; z-index: 3; min-width: 0;
  justify-self: end; align-self: center;
  width: clamp(240px, calc((var(--hero-h) - var(--nav-h) + 30px) / 2), 380px);
  margin-bottom: -76px;
}
.phone {
  position: relative; display: flex; aspect-ratio: 1 / 2; padding: 2.4cqw; border-radius: 15.5cqw;
  background: linear-gradient(145deg, #2b2e36, #0b0c0f 42%, #1c1e25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .7), 0 50px 100px -30px rgba(0, 0, 0, .9), 0 0 90px -24px rgba(210, 0, 0, .3);
  animation: fade-in .7s ease var(--intro, 1s) both;
}
.phone__btn { position: absolute; width: .9cqw; border-radius: .4cqw; background: #1b1d23; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.phone__btn--a { left: -.7cqw; top: 24cqw; height: 6cqw; }
.phone__btn--v1 { left: -.7cqw; top: 35cqw; height: 11cqw; }
.phone__btn--v2 { left: -.7cqw; top: 49cqw; height: 11cqw; }
.phone__btn--p { right: -.7cqw; top: 40cqw; height: 18cqw; }
.screen {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  border-radius: 13.2cqw; background: #000; color: #fff;
  animation: frame-open 1.25s var(--ease-shutter) calc(var(--intro, 1s) + .05s) both;
}
.viewfinder__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; animation: settle 2.4s var(--ease) calc(var(--intro, 1s) + .05s) both; }

/* Dynamic Island (part of the phone) */
.ios-island { position: absolute; z-index: 2; top: 3cqw; left: 50%; width: 27cqw; height: 7.6cqw; margin-left: -13.5cqw; border-radius: 99px; background: #000; box-shadow: 0 0 0 .25cqw #17181d; }
.ios-island::after { content: ""; position: absolute; right: 2.4cqw; top: 50%; width: 1.7cqw; height: 1.7cqw; margin-top: -.85cqw; border-radius: 50%; background: #FF9F0A; }

/* The two things on the screen */
.ios-rec {
  position: absolute; z-index: 2; top: 13.5cqw; left: 50%; transform: translateX(-50%);
  padding: 1.5cqw 3.4cqw; border-radius: 99px; background: #FF3B30;
  font: 600 3.7cqw/1 var(--text); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 .6cqw 2.4cqw rgba(0, 0, 0, .35);
}
.ios-bottom { position: absolute; z-index: 2; left: 0; right: 0; bottom: 7cqw; display: flex; justify-content: center; }
.ios-stop { display: grid; place-items: center; width: 17.5cqw; height: 17.5cqw; border-radius: 50%; border: .95cqw solid #fff; filter: drop-shadow(0 .6cqw 2cqw rgba(0, 0, 0, .45)); }
.ios-stop i { width: 7.4cqw; height: 7.4cqw; border-radius: 1.7cqw; background: #FF3B30; animation: rec-pulse 1.8s ease-in-out infinite; }
@keyframes rec-pulse { 50% { transform: scale(.86); } }

@keyframes frame-open { from { clip-path: inset(49% 0 49% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.12); } }

.vf-corner {
  position: absolute; width: 26px; height: 26px; border: 0 solid var(--paper);
  filter: drop-shadow(0 0 2px rgba(13, 17, 24, .7));
  animation: fade-in .5s ease calc(var(--intro, 1s) + 1s) both;
}
.vf-corner--tl { top: 14px; left: 14px; border-top-width: 3px; border-left-width: 3px; }
.vf-corner--tr { top: 14px; right: 14px; border-top-width: 3px; border-right-width: 3px; }
.vf-corner--bl { bottom: 14px; left: 14px; border-bottom-width: 3px; border-left-width: 3px; }
.vf-corner--br { bottom: 14px; right: 14px; border-bottom-width: 3px; border-right-width: 3px; }

.rec__dot { width: .7em; height: .7em; border-radius: 50%; background: #FF2A2A; animation: blink 1.3s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }

@keyframes fade-in { from { opacity: 0; } }


/* ---------- Marquee track (used by the Crew Challenge banner) ---------- */

.ticker__track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.ticker__group { display: flex; align-items: center; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 02 · What is Garage Crew? ---------- */

.about {
  position: relative; background-color: var(--bg-deep); color: var(--paper);
  padding: clamp(48px, 5vw, 72px) 0 var(--section-y);
}
/* same centred head as the Reels section: eyebrow, then one big line */
.about__head {
  width: min(var(--max), 100%); margin: 0 auto clamp(32px, 5vw, 64px); padding-inline: var(--gutter);
  display: grid; justify-items: center; gap: 12px; text-align: center;
}
.about__title { font: 400 clamp(3.2rem, 8vw, 7.5rem)/.88 var(--display); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }

.about__grid {
  width: min(var(--max), 100%); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px);
}
/* 3D objects float straight on the page: no cards. One illustration, cropped per object (see .obj). */
.about__grid { gap: 0; }
.trip-col { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding-inline: clamp(16px, 2.4vw, 32px); text-align: center; }

.trip-col__stage { position: relative; container-type: inline-size; align-self: stretch; height: min(272px, 20vw); margin-bottom: 12px; }
/* red pool under each object: wide, eased falloff, then blurred so it has no visible edge */
.trip-col__glow {
  position: absolute; left: 50%; bottom: 1.8%; width: 64%; height: 33%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(210, 0, 0, .5), rgba(210, 0, 0, .34) 30%, rgba(210, 0, 0, .14) 62%, rgba(210, 0, 0, 0));
  filter: blur(3.5cqw);
}
.trip-col__shadow {
  position: absolute; left: 50%; bottom: 4.4%; width: 32%; height: 5.2%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  filter: blur(2.1cqw);
}
.obj { position: absolute; left: 50%; bottom: 7%; height: 78%; aspect-ratio: var(--cw) / var(--ch); transform: translateX(-50%); overflow: hidden; pointer-events: none; }
.obj img { position: absolute; max-width: none; height: auto; width: calc(var(--iw, 1585) / var(--cw) * 100%); left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); }
/* a single-object image: no crop, just fit it (height capped so it never outgrows the column) */
/* all three icons share one height (same % of the stage) so none reads bigger; the cqw cap only guards narrow columns.
   Icons are 30% smaller than before: stage 340->272px (x.8) and icon 71%->62% of it (x.7 overall). */
.obj--solo { height: min(62%, calc(63cqw * var(--ch) / var(--cw))); }
.obj--solo img { position: static; width: 100%; height: 100%; object-fit: contain; }

.trip-col__q { font: 400 clamp(2rem, 2.7vw, 2.6rem)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.trip-col__a { margin: 18px auto 0; max-width: 26rem; font-size: 1rem; line-height: 1.55; color: rgba(241, 241, 241, .78); }

@media (prefers-reduced-motion: no-preference) {
  .obj { animation: obj-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.6s); }
}
@keyframes obj-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.2%; } }

/* scroll reveal — only hidden when JS is available */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) calc(var(--i, 0) * .14s), transform .8s var(--ease) calc(var(--i, 0) * .14s), box-shadow .4s var(--ease);
}
.js [data-reveal].is-in:hover { transform: translateY(-6px); transition-delay: 0s; }
.js .fx { opacity: 0; transform: var(--fx-from, none); transform-box: fill-box; transform-origin: var(--fx-origin, 50% 50%); }
.js .is-in .fx {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease) calc(var(--fx-delay, 0s) + var(--i, 0) * .14s), transform .7s var(--ease) calc(var(--fx-delay, 0s) + var(--i, 0) * .14s);
}

/* ---------- 03 · Reels strip (dark) ---------- */

.strip { position: relative; isolation: isolate; background: var(--bg-raise); color: var(--paper); padding: var(--section-y) 0; overflow: hidden; }
.strip__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 96px 96px; background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.strip__head {
  width: min(var(--max), 100%); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; justify-items: center; gap: 12px; text-align: center;
}
.strip__title { font: 400 clamp(3.2rem, 8vw, 7.5rem)/.88 var(--display); text-transform: uppercase; letter-spacing: .005em; }

/* Crew reels: coverflow. The focused Reel is centred and plays; neighbours tilt back in 3D. */
.cflow {
  --cw: clamp(190px, 22vw, 290px);
  position: relative; width: min(var(--max), 100%); margin: calc(var(--cw) * .115 + 28px) auto 0;   /* = 32px from the title to the focused Reel */
  height: calc(var(--cw) * 2.05 + 66px); touch-action: pan-y;
}
.cflow::after { /* red pool under the focused Reel */
  content: ""; position: absolute; left: 50%; bottom: 46px; width: 60%; height: 90px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(210, 0, 0, .35), transparent); filter: blur(24px); pointer-events: none;
}
.cflow__track { position: absolute; inset: 0 0 58px; margin: 0; padding: 0; list-style: none; perspective: 1500px; transform-style: preserve-3d; }
.cflow .card {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: var(--cw);
  transform: translate(-50%, -50%) translateX(calc(var(--d, 0) * 70%)) translateZ(calc(var(--a, 0) * -170px)) rotateY(calc(var(--d, 0) * -42deg));
  scale: calc(1.14 - var(--a, 0) * .12);
  opacity: calc(1 - var(--a, 0) * .28); filter: brightness(calc(1 - var(--a, 0) * .4));
  transition: transform .75s var(--ease), scale .75s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
}
.cflow .card.is-active .card__media { box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .22); }
.cflow .card.is-far { opacity: 0; pointer-events: none; }
.card:not(.is-active) .play { display: none; }

/* Crew reels, version B: spotlight row. A swipe row; the centred Reel scales up and plays, the rest dim. */
.spot { --cw: clamp(200px, 21vw, 270px); position: relative; width: min(var(--max), 100%); margin-inline: auto; height: calc(var(--cw) * 1.9 + 124px); }
.spot__row {
  position: relative; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); height: 100%; margin: 0; list-style: none;
  padding: 24px calc(50% - var(--cw) / 2) 92px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.spot__row::-webkit-scrollbar { display: none; }
.spot .card { flex: none; width: var(--cw); scroll-snap-align: center; will-change: transform, opacity; }
.spot .card.is-active .card__media { box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .22); }

.cflow__ctrl { position: absolute; left: 50%; bottom: 22px; z-index: 40; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; }
.cflow__btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: #fff; cursor: pointer;
  background: rgba(9, 11, 15, .7); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.cflow__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cflow__btn:hover:not(:disabled) { background: var(--red); border-color: var(--red); }
.cflow__btn:disabled { opacity: .3; cursor: default; }
.cflow__count { min-width: 4.2em; text-align: center; font: 600 .8125rem/1 var(--text); letter-spacing: .14em; color: rgba(241, 241, 241, .8); }
.card__media {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: var(--navy-deep);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .08);
  text-decoration: none; color: #fff;
}
.card__media > img, .card__media > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  transition: transform .8s var(--ease);
}
.card__media::after { /* legibility gradient for the caption */
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(180deg, rgba(13, 17, 24, 0), rgba(13, 17, 24, .82));
  pointer-events: none;
}

.play {
  position: absolute; left: 50%; top: 46%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(250, 250, 250, .92); color: var(--navy);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .35s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }

/* who made it: avatar photo + handle + how many campaigns they've done with us */
.creator { position: absolute; left: 16px; right: 16px; bottom: 22px; z-index: 2; display: flex; align-items: center; gap: 11px; color: #fff; }
.creator__avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, .14); box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.creator__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.creator__meta { display: grid; gap: 3px; min-width: 0; }
.creator__meta b { font: 700 .8125rem/1.1 var(--text); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator__meta small { font: 500 .75rem/1.1 var(--text); letter-spacing: .02em; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creator__meta small strong { font-weight: 700; color: #fff; }

/* reel progress bar follows the video */
.card__bar { position: absolute; left: 0; bottom: 0; z-index: 2; height: 2px; width: 100%; background: rgba(255, 255, 255, .25); }
.card__bar::after { content: ""; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: #fff; }

/* whole tile is the control: tap = sound on / off */
.reel__hit { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.reel__hit:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: 6px; }
.reel__sound {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(9, 11, 15, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff;
}
.reel__sound svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill-rule: evenodd; }
.reel__sound .x, .reel__sound .on path:not(:first-child) { fill: none; }
.reel__sound .on, .reel.is-sound .reel__sound .off { display: none; }
.reel.is-sound .reel__sound .on { display: block; }
.reel.is-sound .reel__sound { background: var(--red); }
/* the big play button only shows while the reel isn't playing */
.reel.is-playing .play { opacity: 0; transform: scale(.8); pointer-events: none; }

/* ---------- Mobile CTA bar ---------- */

.cta-bar {
  position: fixed; inset: auto 0 0 0; z-index: 90; display: none; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(9, 11, 15, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  transform: translateY(110%); transition: transform .4s var(--ease);
}
.cta-bar.is-visible { transform: translateY(0); }
.cta-bar .btn { width: 100%; }

/* ---------- Responsive ---------- */

@media (max-width: 899px) {
  :root { --nav-h: 64px; }

  .logo { position: relative; z-index: 2; }
  .nav__cta { display: none; }

  .menu-toggle {
    display: inline-flex; align-items: center; gap: 12px; margin-left: auto; padding: 10px 0 10px 10px;
    background: none; border: 0; color: var(--paper); cursor: pointer; position: relative; z-index: 2;
    font: 700 .6875rem/1 var(--text); letter-spacing: .18em; text-transform: uppercase;
  }
  .menu-toggle__bars { position: relative; width: 22px; height: 10px; }
  .menu-toggle__bars i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
  .menu-toggle__bars i:nth-child(1) { top: 0; }
  .menu-toggle__bars i:nth-child(2) { top: 8px; }
  body.menu-open .menu-toggle__bars i:nth-child(1) { top: 4px; transform: rotate(45deg); }
  body.menu-open .menu-toggle__bars i:nth-child(2) { top: 4px; transform: rotate(-45deg); }

  .nav__links {
    position: fixed; inset: 0; margin: 0; padding: calc(var(--nav-h) + 28px) var(--gutter) 32px;
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px;
    background: var(--navy-deep); visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility 0s .3s;
    z-index: 1; overflow-y: auto;   /* eight rows: let the menu scroll on very short phones */
  }
  body.menu-open .nav__links { visibility: visible; opacity: 1; transition-delay: 0s; }
  body.menu-open { overflow: hidden; }
  .nav__links a { font: 400 clamp(2.6rem, 12vw, 3.6rem)/1.05 var(--display); letter-spacing: .02em; padding: 6px 0; color: var(--paper); }
  .nav__links a::after { display: none; }
  .nav__login { border: 0 !important; padding-left: 0 !important; font-size: 1.5rem !important; color: rgba(241, 241, 241, .7) !important; margin-top: 10px; }
  .nav__links .nav__join-mobile {
    display: inline-flex; margin-top: 28px; font: 700 .875rem/1 var(--text); letter-spacing: .12em; padding: 1.25em 1.9em; color: #fff; background: var(--red);
  }

  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); padding-top: 28px; gap: 40px; }
  .hero__title { font-size: clamp(3.96rem, 18.7vw, 7.7rem); }
  .hero__cta { gap: 4px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__cta .btn--ghost { --btn-bd: transparent; padding-block: 1em .4em; }
  .viewfinder { justify-self: stretch; width: 100%; }

  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .trip-col { padding: 32px 0; }
  .trip-col__stage { height: auto; aspect-ratio: 346 / 189; }
  .obj { height: 70%; bottom: 8%; }
  .obj--solo { height: min(70%, calc(49cqw * var(--ch) / var(--cw))); }
  .trip-col__q { font-size: 2.25rem; }

  .cflow { --cw: min(54vw, 220px); }
  .cflow .creator { left: 12px; right: 12px; gap: 9px; }
  .cflow .creator__avatar { width: 36px; height: 36px; }
  .cflow .creator__meta small { letter-spacing: 0; }
  .spot { --cw: min(62vw, 240px); }
  .cflow__btn { width: 46px; height: 46px; }

  .cta-bar { display: block; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .shutter { display: none; }
  .js [data-reveal], .js .fx { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Sections 05–12 + footer (black theme)
   ========================================================================== */

/* ---------- Shared section system ---------- */

.wrap { width: min(var(--max), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding: var(--section-y) 0; border-top: 1px solid var(--line); }
.sec--raise { background: var(--bg-raise); }
.sec-head { margin-bottom: clamp(32px, 5vw, 64px); text-align: center; }
.sec-title {
  margin-top: 14px; font: 400 clamp(3rem, 7vw, 6.5rem)/.9 var(--display);
  text-transform: uppercase; letter-spacing: .005em; text-wrap: balance;
}
.sec-title em { font-style: normal; color: var(--red); }   /* large display text only: 3.5:1 on black */

/* ---------- 05 · Why join ---------- */

.why__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.why-tile {
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg);
  min-height: clamp(280px, 28vw, 400px); padding: clamp(20px, 2.2vw, 32px);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: color .35s var(--ease);
}
/* red garage-shutter slats roll up on hover */
.why-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%);
  background-color: var(--red);
  background-image: repeating-linear-gradient(180deg, transparent 0 14px, rgba(0, 0, 0, .16) 14px 15px);
  transition: transform .6s var(--ease-shutter);
}
.why-tile:hover::before { transform: none; }
.why-tile__icon { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.why-tile__verb { font: 400 clamp(3.4rem, 5.6vw, 5.6rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.why-tile__text { margin-top: 10px; max-width: 14rem; font-size: 1rem; color: rgba(241, 241, 241, .72); transition: color .35s var(--ease); }
.why-tile:hover .why-tile__text { color: #fff; }

/* ---------- 06 · How it works ---------- */

.how__layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.how__stage { position: sticky; top: calc(var(--nav-h) + 28px); }
.stage__screen {
  position: relative; container-type: inline-size; width: 100%; aspect-ratio: 4 / 5;
  max-height: calc(100vh - var(--nav-h) - 64px); max-height: calc(100svh - var(--nav-h) - 64px);
  overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background-color: var(--bg);
}
.scene {
  position: absolute; inset: 0; padding: 10cqw 9cqw; display: flex; flex-direction: column; justify-content: center; gap: 1.5em;
  font-size: 3.3cqw; opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.scene.is-active { opacity: 1; transform: none; }
.scene__label { font: 700 .74em/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: rgba(241, 241, 241, .6); }
.scene__hint { font: 500 .9em/1.3 var(--text); color: rgba(241, 241, 241, .66); }
.sk { display: block; height: .6em; border-radius: .3em; background: rgba(255, 255, 255, .2); }
.sk + .sk { margin-top: .6em; }
.sk--s { width: 58%; background: rgba(255, 255, 255, .12); }
.mini-chip {
  display: inline-block; padding: .65em 1em; border-radius: 999px; background: var(--paper); color: var(--navy);
  font: 700 .72em/1 var(--text); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.mini-chip--red { background: var(--red); color: #fff; }
.btn-mini {
  align-self: flex-start; padding: 1em 1.6em; border-radius: .5em; background: var(--red); color: #fff;
  font: 700 .8em/1 var(--text); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}

.mini-row { display: grid; grid-template-columns: 4.6em 1fr auto; gap: 1.1em; align-items: center; padding: .9em; border: 1px solid var(--line); border-radius: .8em; background: rgba(255, 255, 255, .03); }
.mini-row img { width: 4.6em; height: 4.6em; object-fit: cover; border-radius: .5em; }
.mini-row--hot { border-color: var(--red); background: rgba(210, 0, 0, .12); }

.check { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--red); border: 2px solid var(--red); }
.check svg { width: 1.1em; height: 1.1em; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene.is-active .check { animation: tick .5s var(--ease) calc(.35s + var(--k, 0) * .4s) both; }
@keyframes tick { from { background: transparent; border-color: var(--line-strong); } }
.scene.is-active .check svg { animation: tick-in .4s var(--ease) calc(.5s + var(--k, 0) * .4s) both; }
@keyframes tick-in { from { opacity: 0; transform: scale(.4); } }

/* 01 Join: profile card + a bar that fills to "Complete" */
.prof { display: grid; grid-template-columns: 5em 1fr auto; gap: 1.2em; align-items: center; padding: 1.1em; border: 1px solid var(--line-strong); border-radius: 1em; background: rgba(255, 255, 255, .03); }
.prof__av { width: 5em; height: 5em; border-radius: 50%; object-fit: cover; }
.prof__meter { display: grid; grid-template-columns: auto 1fr auto; gap: 1em; align-items: center; font: 600 .76em/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: rgba(241, 241, 241, .7); }
.prof__meter i { display: block; height: .7em; overflow: hidden; border-radius: .35em; background: rgba(255, 255, 255, .14); }
.prof__meter b { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--red); transform-origin: left; }
.scene.is-active .prof__meter b { animation: fill 1.1s var(--ease) .25s both; }
@keyframes fill { from { transform: scaleX(.1); } }

/* 02 Get a campaign: the three parts of the brief */
.info { display: grid; gap: .7em; margin: 0; padding: 0; list-style: none; }
.info li { display: grid; grid-template-columns: 1.7em 1fr auto; gap: 1em; align-items: center; padding: 1em 1.2em; border: 1px solid var(--line); border-radius: .8em; background: rgba(255, 255, 255, .03); }
.info svg { width: 1.7em; height: 1.7em; fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.info b { font: 600 1.05em/1 var(--text); }
.info small { font: 500 .82em/1 var(--text); color: rgba(241, 241, 241, .62); }
.scene.is-active .info li { animation: rise .5s var(--ease) calc(.15s + var(--k, 0) * .14s) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* 04 Submit: confirmation shows up after the form */
.sent { display: flex; align-items: center; gap: 1em; font: 600 1.05em/1 var(--text); }
.scene.is-active .sent { animation: rise .5s var(--ease) 1.1s both; }

.reel-mock { position: relative; align-self: center; width: 52%; aspect-ratio: 9 / 15; overflow: hidden; border-radius: 1em; border: 2px solid var(--paper); }
.reel-mock img, .reel-mock video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.reel-mock__rec, .reel-mock__code {
  position: absolute; display: inline-flex; align-items: center; gap: .6em; padding: .7em .9em; border-radius: .4em;
  background: rgba(9, 11, 15, .78); font: 700 .7em/1 var(--text); letter-spacing: .14em; text-transform: uppercase;
}
.reel-mock__rec { left: .8em; top: .8em; }
.reel-mock__code { left: .8em; right: .8em; bottom: .8em; justify-content: center; background: var(--red); }

.field-mock { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .8em .8em .8em 1.2em; border: 1px solid var(--line-strong); border-radius: .8em; background: rgba(255, 255, 255, .04); font: 500 .95em/1 var(--text); color: rgba(241, 241, 241, .62); }
.mbars { display: flex; align-items: flex-end; gap: .9em; height: 9em; padding-bottom: .5em; border-bottom: 1px solid var(--line-strong); }
.mbars i { flex: 1; height: var(--h); border-radius: .3em .3em 0 0; background: rgba(241, 241, 241, .28); transform-origin: bottom; }
.mbars i.is-hot { background: var(--red); }
.scene.is-active .mbars i { animation: grow .8s var(--ease) both; }
.scene.is-active .mbars i:nth-child(2) { animation-delay: .08s; } .scene.is-active .mbars i:nth-child(3) { animation-delay: .16s; }
.scene.is-active .mbars i:nth-child(4) { animation-delay: .24s; } .scene.is-active .mbars i:nth-child(5) { animation-delay: .32s; }
@keyframes grow { from { transform: scaleY(0); } }
.mchips { display: flex; gap: .8em; }

.steps { --badge: clamp(48px, 4.4vw, 60px); position: relative; margin: 0; padding: 0; list-style: none; }
.step {
  position: relative; display: grid; grid-template-columns: var(--badge) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-content: start; align-items: start;
  min-height: clamp(200px, 42vh, 360px); opacity: .34; transition: opacity .45s var(--ease);
}
.step:last-child { min-height: 0; }
/* the line from this badge down to the next one; it turns red once the step is done */
.step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(var(--badge) / 2 - 1px); top: var(--badge); bottom: 0; width: 2px;
  background: var(--line-strong); transition: background-color .45s var(--ease);
}
.step.is-done { opacity: .7; }
.step.is-done:not(:last-child)::before { background: var(--red); }
.step.is-active { opacity: 1; }
.step__n {
  position: relative; z-index: 1; display: grid; place-items: center; width: var(--badge); height: var(--badge);
  border: 2px solid var(--red); border-radius: 50%; background: var(--bg-raise);
  font: 700 clamp(.9rem, 1.1vw, 1.0625rem)/1 var(--text); letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums;
  transition: background-color .45s var(--ease);
}
.step.is-active .step__n { background: var(--red); }
.step__t { display: flex; align-items: center; min-height: var(--badge); font: 400 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.step__d { margin-top: 12px; max-width: 30rem; font-size: 1.0625rem; color: rgba(241, 241, 241, .78); }

/* ---------- How it works on phones: pinned title + stacking cards ----------
   <900px only. The desktop stage and step list are hidden there and this takes over. Every card sticks at the same
   spot and the next slides over it. Only ONE card shows behind the current one (a small tab above it): JS sets --p (how
   far the next card has covered this one) and CSS lifts, shrinks and dims the card into that tab; cards older than that
   sit exactly behind it, so the current card never loses room.
   No blurred box-shadow on the sticky cards (it blanked the playing <video> in some browsers), and no overflow
   on ancestors (it would break sticky). */
.deck-pin, .deck { display: none; }

@media (max-width: 899px) {
  .how { --deck-pin: 58px; --deck-tab: 12px; }
  .how .sec-head { margin-bottom: 0; }
  .how__layout { display: none; }

  /* compact one-line copy of the heading: in the flow under the big heading (so nothing shifts), invisible until
     it reaches the nav, then pinned there while the cards stack beneath it */
  .deck-pin {
    position: sticky; top: var(--nav-h); z-index: 30; box-sizing: border-box; height: var(--deck-pin);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    background: var(--bg-raise); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease);
  }
  .deck-pin .eyebrow { font-size: .625rem; opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .deck-pin__t {
    margin: 0; font: 400 clamp(1.35rem, 6.6vw, 1.75rem)/1 var(--display); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
    opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .deck-pin__t em { font-style: normal; color: var(--red); }
  .deck-pin::after {   /* soft fade under the bar so cards slide under it cleanly (a gradient, not a blurred shadow) */
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(to bottom, var(--bg-raise), transparent);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  }
  .deck-pin.is-stuck { border-bottom-color: var(--line); }
  .deck-pin.is-stuck .eyebrow, .deck-pin.is-stuck .deck-pin__t { opacity: 1; transform: none; }
  .deck-pin.is-stuck::after { opacity: 1; }

  .deck { display: block; max-width: 430px; margin: 0 auto; padding: 0; list-style: none; }
  .deck-card {
    --p: 0;                                /* 0 = on top, 1 = fully covered by the next card (set from JS) */
    position: sticky; top: calc(var(--nav-h) + var(--deck-pin) + 14px + var(--deck-tab));
    margin: 0; padding: 12px 12px 22px;
    border: 1px solid var(--line-strong); border-radius: 22px; background: var(--surface);
    transform-origin: 50% 0; transform: translateY(calc(var(--p) * var(--deck-tab) * -1)) scale(calc(1 - var(--p) * .06)); will-change: transform;
  }
  .deck-card.is-gone { visibility: hidden; }   /* two or more cards behind: fully hidden under the one tab, so skip painting it */
  .deck-card + .deck-card { margin-top: 26px; }   /* the gap is a top margin: a bottom margin would push the earlier cards up when the stack ends */
  .deck-card::before {   /* soft edge above each card so stacked cards separate */
    content: ""; position: absolute; left: 12px; right: 12px; top: -16px; height: 16px; border-radius: 22px 22px 0 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .38)); opacity: calc(1 - var(--p)); pointer-events: none;
  }
  .deck-card::after {    /* dims as it gets covered (an overlay is cheaper than filter on a card with video) */
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: calc(var(--p) * .6); pointer-events: none;
  }

  /* a hard stop at every card: invisible markers (built in main.js) are the page's snap points, and main.js turns
     snapping on (html.deck-snap) only while the page is inside the stack of cards, so the rest of the page scrolls freely */
  html.deck-snap { scroll-snap-type: y mandatory; }
  .deck-snaps { position: absolute; top: 0; left: 0; width: 1px; height: 0; opacity: 0; pointer-events: none; }
  .deck-snaps i { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; }
  .deck-snaps i[data-card] { scroll-snap-stop: always; }

  /* the same step pictures as the desktop stage, scaled up for a phone-sized card */
  .deck-screen {
    --fs: 3.9cqw;
    position: relative; container-type: inline-size; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
    border: 1px solid var(--line-strong); border-radius: 12px; background-color: var(--bg);
  }
  .deck-screen .scene { padding: 7cqw 8cqw; font-size: var(--fs); gap: 1.2em; }

  .deck-txt { padding: 18px 6px 0; }
  .deck-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
  .deck-num { font: 400 1.5rem/1 var(--display); letter-spacing: .08em; color: var(--red-text); }
  .deck-of { font: 600 .6875rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: rgba(241, 241, 241, .5); }
  .deck-t { margin: 0; font: 400 2.3rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
  .deck-d { margin: 10px 0 0; font-size: 1rem; line-height: 1.55; color: rgba(241, 241, 241, .78); }
}

/* short phones: the fixed Join bar eats the bottom, so make the pictures a little shorter */
@media (max-width: 899px) and (max-height: 760px) {
  .deck-screen { aspect-ratio: 6 / 5; --fs: 3.3cqw; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .deck-pin, .deck-pin .eyebrow, .deck-pin__t, .deck-pin::after { transition: none; }
  .deck-card { position: static; transform: none; will-change: auto; }
  .deck-card + .deck-card { margin-top: 18px; }
  .deck-card::after, .deck-card::before { display: none; }
}

/* ---------- How it works: the five step pictures (soft 3D, no text inside) ----------
   Used on the desktop stage (.stage__screen, 4:5) and in the phone cards (.deck-screen, square). One light from the
   top-left; every object is a dark slab with thickness (stacked hard shadows toward the bottom-right), a soft ground
   shadow, glossy red accents and white tick discs, all turned the same way so the five read as one set.
   Base styles are the finished frame; the animations only play under .is-active (added by main.js as a step or card
   arrives), so reduced motion shows the finished frame. No blurred shadow sits on any ancestor of the <video>. */
@property --deg { syntax: '<angle>'; inherits: false; initial-value: 360deg; }

.scene.v3 {
  --vfs: 4.2cqw;
  --slab: linear-gradient(155deg, #3b3e46 0%, #25272d 46%, #17181d 100%);
  --ext: .08em .08em 0 #111217, .16em .16em 0 #111217, .24em .24em 0 #101116, .32em .32em 0 #101116, .4em .4em 0 #0f1015, .48em .48em 0 #0f1015, .56em .56em 0 #0e0f14, .64em .64em 0 #0e0f14;
  --hi: inset 0 .1em 0 rgba(255, 255, 255, .2);
  --red-g: linear-gradient(160deg, #ff7468 0%, #e0382b 48%, #a3130a 100%);
  --white-g: linear-gradient(150deg, #ffffff 0%, #dfe0e5 60%, #bfc1c9 100%);
  font-size: var(--vfs); padding: 4cqw; display: grid; place-items: center; gap: 0;
  perspective: 80em; background: radial-gradient(120% 90% at 26% 6%, #22252d 0%, #0f1116 58%, #0a0b0e 100%);
}
.v3 svg { display: block; }
.v3-chk { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.v3 .bar { display: block; height: .9em; width: var(--w, 100%); border-radius: .5em; background: linear-gradient(180deg, #eceef2, #aeb0b8); box-shadow: .08em .1em 0 #54565e; }

@keyframes v3-pop  { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.14); } 100% { opacity: 1; transform: none; } }
@keyframes v3-rise { from { opacity: 0; transform: translateY(1.4em); } to { opacity: 1; transform: none; } }
@keyframes v3-bob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.4em); } }
@keyframes v3-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v3-arc  { from { --deg: 0deg; } to { --deg: 360deg; } }
@keyframes v3-press { 0% { transform: scale(1); } 40% { transform: scale(.84); } 75% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes v3-ripple { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }

/* ---- 01 · Join: a round profile, ring draws, tick lands ---- */
.v3a { position: relative; width: 16em; height: 17em; }
.v3a__ground { position: absolute; left: 50%; bottom: .2em; width: 12em; height: 2.2em; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); }
.v3a__float { position: absolute; inset: 0; display: grid; place-items: center; }
.v3a__obj { position: relative; width: 12em; height: 12em; transform: rotateY(-14deg) rotateX(6deg); }
.v3a__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -90deg, #ff9b7c 0deg, #e0382b calc(var(--deg) * .55), #9b1109 var(--deg), rgba(255, 255, 255, .1) var(--deg));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .6em), #000 calc(100% - .55em));
          mask: radial-gradient(farthest-side, transparent calc(100% - .6em), #000 calc(100% - .55em));
  filter: drop-shadow(.22em .3em 0 #0c0d11);
}
.v3a__av { position: absolute; inset: .95em; width: calc(100% - 1.9em); height: calc(100% - 1.9em); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .32em #0f1014, .3em .42em 0 .32em #08090c; }
.v3a__badge {
  position: absolute; right: -1em; bottom: -.4em; display: grid; place-items: center; width: 4em; height: 4em; border-radius: 50%; color: #17181d; background: var(--white-g);
  box-shadow: .1em .14em 0 #aaacb4, .2em .28em 0 #7c7e86, .3em .42em 0 #55575e, 0 1em 1.2em -.2em rgba(0, 0, 0, .5);
}
.v3a__badge svg { width: 56%; height: 56%; }

.v3.is-active .v3a__float { animation: v3-bob 5s ease-in-out 2.6s infinite; }
.v3.is-active .v3a__obj   { animation: v3a-in 1s var(--ease) both; }
.v3.is-active .v3a__ring  { animation: v3-arc 1.7s var(--ease) .5s both; }
.v3.is-active .v3a__badge { animation: v3-pop .6s var(--ease) 2.1s both; }
@keyframes v3a-in { 0% { opacity: 0; transform: rotateY(-70deg) rotateX(10deg) scale(.7); } 100% { opacity: 1; transform: rotateY(-14deg) rotateX(6deg); } }

/* ---- 02 · Get a campaign: two cards land, each gets ticked ---- */
.v3b { position: relative; width: 20em; height: 15em; transform: rotateX(8deg) rotateY(-16deg) rotateZ(-1deg); }
.v3b__card {
  position: absolute; left: 0; width: 100%; height: 6.6em; border-radius: 1.4em; background: var(--slab);
  box-shadow: var(--ext), var(--hi), 0 1.6em 1.8em -.6em rgba(0, 0, 0, .65);
  display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; gap: 1.1em; align-items: center; padding: 1em 1.3em 1em 1em;
}
.v3b__card:nth-child(1) { top: 0; }
.v3b__card:nth-child(2) { top: 8.4em; }
.v3b__card img { width: 4.6em; height: 4.6em; border-radius: .9em; object-fit: cover; box-shadow: 0 0 0 .12em rgba(255, 255, 255, .14), .1em .14em 0 .12em #0b0c0f; }
.v3b__lines { display: grid; gap: .8em; }
.v3b__lines .bar:last-child { --w: 60%; }
.v3b__ok { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; color: #e0382b; background: var(--white-g); box-shadow: .1em .14em 0 #a6a8b0, .2em .28em 0 #6f7179; }
.v3b__ok svg { width: 56%; height: 56%; }

.v3.is-active .v3b__card { animation: v3b-drop .95s var(--ease) calc(.1s + var(--k) * .5s) both; }
.v3.is-active .v3b__ok   { animation: v3-pop .55s var(--ease) calc(1.1s + var(--k) * .5s) both; }
.v3.is-active .v3b__lines .bar { animation: v3-grow .7s var(--ease) calc(.7s + var(--k, 0) * .5s) both; transform-origin: left; }
.v3.is-active .v3b__card:nth-child(2) .bar { animation-delay: 1.2s; }
@keyframes v3b-drop { 0% { opacity: 0; transform: translateY(-4.2em) rotateX(-22deg); } 62% { opacity: 1; transform: translateY(.5em); } 100% { opacity: 1; transform: none; } }

/* ---- 03 · Create: the Reel on a tilted phone, hearts coming in ---- */
.v3c { position: relative; width: 21em; height: 22em; }
.v3c__ground { position: absolute; left: 42%; bottom: .2em; width: 10em; height: 2em; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); }
.v3c__phone {
  position: absolute; left: 42%; top: 50%; width: 11em; height: 19.4em; margin: -9.7em 0 0 -5.5em; padding: .5em; border-radius: 2.2em;
  background: linear-gradient(150deg, #3f424a, #17181d); box-shadow: var(--ext), inset 0 0 0 .1em rgba(255, 255, 255, .16);
  transform: rotateY(-18deg) rotateX(5deg) rotateZ(2deg);
}
.v3c__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 1.7em; background: #000; }
.v3c__screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.v3c__island { position: absolute; left: 50%; top: .7em; width: 3.4em; height: 1em; margin-left: -1.7em; border-radius: .6em; background: #000; }
.v3c__rec { position: absolute; left: .9em; top: 2.2em; display: inline-flex; padding: .55em .65em; border-radius: .5em; background: rgba(9, 11, 15, .72); }
.v3c__rec i { display: block; width: .8em; height: .8em; border-radius: 50%; background: #ff5a4f; }
.v3c__prog { position: absolute; left: 1em; right: 1em; bottom: 1em; height: .3em; border-radius: .2em; background: rgba(255, 255, 255, .3); overflow: hidden; }
.v3c__prog i { display: block; height: 100%; width: 62%; background: #ff5a4f; border-radius: inherit; transform-origin: left; }
.v3c__hearts { position: absolute; left: calc(42% + 5.4em); bottom: 3.6em; width: 5em; height: 0; }
.v3c__heart { position: absolute; left: var(--x, 0); bottom: var(--b, 0); width: var(--s, 2.4em); height: var(--s, 2.4em); fill: #ff5a4f; opacity: .92; filter: drop-shadow(.1em .14em 0 #8a0f08); }

.v3.is-active .v3c__phone  { animation: v3c-in 1.1s var(--ease) both; }
.v3.is-active .v3c__rec i  { animation: v3-blink 1.3s steps(1, end) .9s infinite; }
.v3.is-active .v3c__prog i { animation: v3-grow 7s linear 1s both; }
.v3.is-active .v3c__heart { animation: v3c-float 4.4s ease-in-out calc(1.5s + var(--k) * .85s) infinite both; }
@keyframes v3c-in { 0% { opacity: 0; transform: translateX(-3em) rotateY(62deg) rotateX(5deg) rotateZ(2deg) scale(.85); } 100% { opacity: 1; transform: rotateY(-18deg) rotateX(5deg) rotateZ(2deg); } }
/* likes: each heart pops in near the phone, then drifts up with a sway and fades, over and over (staggered) */
@keyframes v3c-float {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  8%   { opacity: 1; transform: translate(0, -.6em) scale(1.1); }
  14%  { transform: translate(0, -1.4em) scale(1); }
  38%  { transform: translate(1em, -5.2em) scale(1.04); }
  66%  { opacity: .95; transform: translate(-.8em, -9.2em) scale(.96); }
  100% { opacity: 0; transform: translate(.7em, -13em) scale(.75); }
}
@keyframes v3-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .2; } }

/* ---- 04 · Submit: the link field fills, send is pressed, a tick lands ---- */
.v3d { position: relative; width: 20em; height: 17em; display: grid; justify-items: center; align-content: center; gap: 2.6em; transform: rotateX(8deg) rotateY(-10deg); }
.v3d__field {
  display: flex; align-items: center; gap: 1.1em; width: 19.4em; height: 4.8em; padding: 0 .8em 0 1.5em; border-radius: 2.4em; background: var(--slab);
  box-shadow: var(--ext), var(--hi), 0 1.5em 1.7em -.6em rgba(0, 0, 0, .65);
}
.v3d__lk { flex: none; width: 1.9em; height: 1.9em; fill: none; stroke: #f2f2f5; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(.06em .1em 0 #000); }
.v3d__track { flex: 1; height: .85em; overflow: hidden; border-radius: .5em; background: rgba(255, 255, 255, .14); box-shadow: inset 0 .08em .15em rgba(0, 0, 0, .5); }
.v3d__fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #f4f4f7, #b3b5bd); transform-origin: left; }
.v3d__send { flex: none; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--red-g); box-shadow: .1em .16em 0 #7d0e08, .2em .32em 0 #5a0905, 0 .8em 1em rgba(0, 0, 0, .4); }
.v3d__send svg { width: 54%; height: 54%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.v3d__ok {
  position: relative; display: grid; place-items: center; width: 6.4em; height: 6.4em; border-radius: 50%; color: #f4f4f7;
  background: radial-gradient(circle at 35% 28%, #3a3d45, #17181d 70%);
  box-shadow: var(--ext), inset .1em .14em .25em rgba(255, 255, 255, .16), 0 1.4em 1.6em -.5em rgba(0, 0, 0, .65);
}
.v3d__ok svg { width: 50%; height: 50%; }
.v3d__ok::before, .v3d__ok::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ff5a4f; opacity: 0; }

.v3.is-active .v3d__field { animation: v3-rise .65s var(--ease) both; }
.v3.is-active .v3d__fill  { animation: v3-grow 1.4s ease-in-out .7s both; }
.v3.is-active .v3d__send  { animation: v3-press .5s ease 2.25s both; }
.v3.is-active .v3d__ok    { animation: v3-pop .7s var(--ease) 2.7s both; }
.v3.is-active .v3d__ok::before { animation: v3-ripple 2.4s ease-out 3.3s infinite; }
.v3.is-active .v3d__ok::after  { animation: v3-ripple 2.4s ease-out 4.1s infinite; }

/* ---- 05 · Earn: bars rise, a coin drops into the wallet ---- */
.v3e { position: relative; width: 21em; height: 19em; }
.v3e__bars { position: absolute; left: .4em; bottom: 3.8em; display: flex; align-items: flex-end; gap: 1.5em; height: 11.4em; }
.v3e__bars i { --d: 1em; position: relative; display: block; width: 2.4em; height: var(--h); border-radius: .15em .15em 0 0; background: linear-gradient(90deg, #4a4d56, #2c2e35); }
.v3e__bars i::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 100%; height: var(--d); background: linear-gradient(90deg, #6d717c, #4d505a); transform-origin: bottom left; transform: skewX(-45deg); }
.v3e__bars i::after  { content: ""; position: absolute; left: 100%; top: 0; width: var(--d); height: 100%; background: linear-gradient(180deg, #24262c, #15161a); transform-origin: top left; transform: skewY(-45deg); }
.v3e__bars i.is-hot { background: linear-gradient(90deg, #ff7a5a, #d2271b); }
.v3e__bars i.is-hot::before { background: linear-gradient(90deg, #ffb7a2, #ff7a5a); }
.v3e__bars i.is-hot::after  { background: linear-gradient(180deg, #a3130a, #6e0b05); }

.v3e__wallet { position: absolute; right: 0; bottom: 0; width: 11.4em; height: 8.4em; }
.v3e__wback { position: absolute; left: .7em; right: .7em; top: 0; bottom: 1em; border-radius: 1.4em; background: linear-gradient(160deg, #2b2d34, #15161a); }
.v3e__coin {
  position: absolute; left: 50%; top: -1.9em; z-index: 1; display: grid; place-items: center; width: 4.4em; height: 4.4em; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 34% 28%, #ffa285, #e0382b 52%, #8f0f08); box-shadow: inset 0 0 0 .32em rgba(0, 0, 0, .16), .12em .18em 0 #6d0b06, .24em .36em 0 #4d0804;
}
.v3e__coin svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(.05em .08em 0 rgba(0, 0, 0, .35)); }
.v3e__wfront { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 6.3em; border-radius: 1.5em; background: var(--slab); box-shadow: var(--ext), var(--hi), 0 1.4em 1.6em -.5em rgba(0, 0, 0, .65); }
.v3e__wfront::before { content: ""; position: absolute; left: 1em; right: 1em; top: 1.6em; height: .12em; background: rgba(0, 0, 0, .5); box-shadow: 0 .1em 0 rgba(255, 255, 255, .08); }
.v3e__tab { position: absolute; right: -1em; top: 2.4em; width: 4.4em; height: 3em; border-radius: 1.5em; background: var(--slab); box-shadow: .1em .14em 0 #101115, .2em .28em 0 #0e0f13, var(--hi); }
.v3e__tab::after { content: ""; position: absolute; right: .9em; top: 50%; width: .95em; height: .95em; margin-top: -.48em; border-radius: 50%; background: var(--white-g); box-shadow: .05em .08em 0 #6f7179; }

.v3.is-active .v3e__bars i { animation: v3e-grow .9s var(--ease) calc(.2s + var(--k) * .14s) both; }
.v3.is-active .v3e__wallet { animation: v3-rise .6s var(--ease) .7s both, v3e-bump .5s ease 2.55s; }
.v3.is-active .v3e__coin   { animation: v3e-drop 1.1s cubic-bezier(.3, .6, .4, 1) 1.5s both; }
@keyframes v3e-grow { from { height: 0; } }
@keyframes v3e-drop { 0% { opacity: 0; transform: translate(-50%, -14em) scale(.7); } 60% { opacity: 1; transform: translate(-50%, .7em) scale(1); } 78% { opacity: 1; transform: translate(-50%, -.5em); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes v3e-bump { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .v3, .v3 * { animation: none !important; }
}

/* phone cards: a touch smaller than the desktop stage so the tallest picture clears the card, and the fixed Join bar */
.deck-screen .scene.v3 { --vfs: 3.8cqw; }
@media (max-width: 899px) and (max-height: 760px) { .deck-screen .scene.v3 { --vfs: 3.1cqw; } }

/* ---------- 07 · Inside a campaign ---------- */

.camp { --cg: clamp(28px, 5vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 460px) minmax(0, 1fr); column-gap: var(--cg); }
.camp__head { grid-column: 2; grid-row: 1; overflow: hidden; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--surface); }
.camp__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.camp__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.camp__media .vf-corner { animation: none; width: 20px; height: 20px; }
.camp__media .vf-corner--tl, .camp__media .vf-corner--tr { top: 10px; } .camp__media .vf-corner--bl, .camp__media .vf-corner--br { bottom: 10px; }
.camp__media .vf-corner--tl, .camp__media .vf-corner--bl { left: 10px; } .camp__media .vf-corner--tr, .camp__media .vf-corner--br { right: 10px; }
.camp__sample, .status-chip {
  position: absolute; top: 24px; z-index: 2; padding: .7em 1em; border-radius: 999px;
  font: 700 .6875rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase;
}
.camp__sample { left: 26px; background: rgba(9, 11, 15, .8); color: var(--paper); }
.camp__title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--line); }
.camp__title b { font: 400 1.7rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.camp__title span { font: 500 .8125rem/1 var(--text); color: rgba(241, 241, 241, .62); }

.crow { display: contents; }
.crow__field {
  grid-column: 2; grid-row: var(--r); display: grid; gap: 8px; padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line-strong); border-width: 1px 1px 0; border-top-color: var(--line);
}
.crow:last-child .crow__field { border-bottom: 1px solid var(--line-strong); border-radius: 0 0 10px 10px; }
.crow__label { font: 700 .6875rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--red-text); }
.crow__value { font: 400 1.8rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.crow__note {
  position: relative; grid-column: 1; grid-row: var(--r); align-self: center; justify-self: end; max-width: 19rem;
  text-align: right; font-size: .9375rem; line-height: 1.45; color: rgba(241, 241, 241, .78);
}
/* dotted leader + dot — the brand's annotation language */
.crow__note::after { content: ""; position: absolute; top: 50%; left: calc(100% + 12px); width: calc(var(--cg) - 12px); border-top: 2px dotted var(--red-text); }
.crow__note::before {
  content: ""; position: absolute; z-index: 1; top: 50%; left: calc(100% + var(--cg) - 5px); width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--red); border: 2px solid var(--paper);
}
.crow--r .crow__note { grid-column: 3; justify-self: start; text-align: left; }
.crow--r .crow__note::after { left: auto; right: calc(100% + 12px); }
.crow--r .crow__note::before { left: auto; right: calc(100% + var(--cg) - 5px); }

/* ---------- 08 · Earning & tracking ---------- */

.earn__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.earn__list { margin-top: 0; }
.earn__list li { display: grid; gap: 6px; padding: clamp(22px, 2.4vw, 32px) 0; }
.earn__list b { font: 400 clamp(1.8rem, 2.4vw, 2.2rem)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.earn__list span { color: rgba(241, 241, 241, .74); }

/* ---------- Earning & tracking: the loop (no words) ----------
   One sale's journey as a cycle with the creator in the middle: a red comet circles the track and wakes the tracked
   link, the sale, the coin and the wallet in turn, and a ripple reaches the creator when the wallet lights up. Same soft-3D
   family as the How it works pictures. Animations only play under .is-on (added by main.js while it is on screen);
   reduced motion shows the finished frame. */
.loop-frame { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 8 / 7; }   /* no card around it: it sits straight on the page */
.loop {
  --vfs: 4.2cqw;
  --slab: linear-gradient(155deg, #3b3e46 0%, #25272d 46%, #17181d 100%);
  --ext: .08em .08em 0 #111217, .16em .16em 0 #111217, .24em .24em 0 #101116, .32em .32em 0 #101116, .4em .4em 0 #0f1015, .48em .48em 0 #0f1015, .56em .56em 0 #0e0f14, .64em .64em 0 #0e0f14;
  --hi: inset 0 .1em 0 rgba(255, 255, 255, .2);
  position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--vfs); perspective: 80em;
}
.loop svg { display: block; }
.loop-i { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.loop-coin { display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffa285, #e0382b 52%, #8f0f08); box-shadow: inset 0 0 0 .3em rgba(0, 0, 0, .16), .12em .18em 0 #6d0b06, .24em .36em 0 #4d0804; }
.loop-coin svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(.05em .08em 0 rgba(0, 0, 0, .35)); }
.loop-node { display: grid; place-items: center; border-radius: 50%; background: var(--slab); color: #f4f4f7; box-shadow: var(--ext), var(--hi), 0 1.2em 1.4em -.5em rgba(0, 0, 0, .65); }
.loop-node > svg { width: 42%; height: 42%; }
.loop-dot { display: block; width: .9em; height: .9em; border-radius: 50%; background: #ff5a4f; }

.loop__ring { position: relative; width: 19.6em; height: 19.6em; }
.loop__track { position: absolute; inset: 2.4em; border-radius: 50%; border: .9em solid #181a1f; box-shadow: inset 0 .12em .25em rgba(0, 0, 0, .7), 0 .14em 0 #2a2c33, .3em .45em 0 #0a0b0d; }
.loop__comet { position: absolute; inset: 2.4em; border-radius: 50%; background: conic-gradient(from -90deg, transparent 0deg, transparent 230deg, rgba(224, 56, 43, .12) 255deg, #c4281c 340deg, #ff8a74 359deg, transparent 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .9em), #000 calc(100% - .85em)); mask: radial-gradient(farthest-side, transparent calc(100% - .9em), #000 calc(100% - .85em)); }
.loop__me { position: absolute; left: 50%; top: 50%; width: 6.6em; height: 6.6em; margin: -3.3em 0 0 -3.3em; border-radius: 50%; }
.loop__me img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .3em #0f1014, .25em .35em 0 .3em #07080a; }
.loop__me::after { content: ""; position: absolute; inset: -.3em; border-radius: 50%; border: 2px solid #ff5a4f; opacity: 0; }
.loop__st { position: absolute; width: 4.2em; height: 4.2em; margin: -2.1em 0 0 -2.1em; }
.loop__st--0 { left: 50%; top: calc(50% - 6.95em); } .loop__st--1 { left: calc(50% + 6.95em); top: 50%; }
.loop__st--2 { left: 50%; top: calc(50% + 6.95em); } .loop__st--3 { left: calc(50% - 6.95em); top: 50%; }
.loop__st .loop-dot { position: absolute; right: .1em; top: .1em; box-shadow: 0 0 0 .22em #14161b; }

.loop.is-on .loop__comet { animation: loop-spin 6s linear 1s infinite; }
.loop.is-on .loop__st { animation: loop-pop .6s var(--ease) calc(.15s * var(--k)) both, loop-hit 6s ease calc(1s + var(--k) * 1.5s) infinite; }
.loop.is-on .loop__me { animation: loop-pop .7s var(--ease) .3s both; }
.loop.is-on .loop__me::after { animation: loop-me 6s ease-out calc(1s + 4.5s) infinite; }
@keyframes loop-pop { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.14); } 100% { opacity: 1; transform: none; } }
@keyframes loop-me { 0% { opacity: .8; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes loop-spin { to { transform: rotate(360deg); } }
@keyframes loop-hit { 0%, 14%, 100% { transform: scale(1); } 4% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .loop, .loop * { animation: none !important; } }

/* ---------- 09 · Crew Challenge ---------- */

.challenge { overflow: hidden; padding-bottom: 0; }
.challenge__layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-bottom: var(--section-y); }
.ch-frame__in { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--surface); }
.ch-frame__in img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 30%; }
.ch-frame .vf-corner { animation: none; }
.ch-hud {
  position: absolute; z-index: 2; left: 52px; right: 52px; top: 14px; display: flex; justify-content: space-between;
  font: 600 .6875rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.ch-hud > span { display: inline-flex; align-items: center; gap: .6em; padding: 7px 10px; background: rgba(9, 11, 15, .78); border-radius: 3px; }
.eyebrow .tag { margin-left: .4em; padding: .55em .8em; border-radius: 999px; background: var(--red); color: #fff; letter-spacing: .14em; font-size: .625rem; }
.ch-steps { margin-top: clamp(24px, 3vw, 36px); }
.ch-steps li { display: grid; grid-template-columns: clamp(6.5rem, 9vw, 9rem) 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.ch-steps li:last-child { border-bottom: 1px solid var(--line); }
.ch-steps b { font: 400 clamp(2rem, 3vw, 2.8rem)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--red); }
.ch-steps span { font-size: 1.0625rem; }
.ch-micro { margin-top: 24px; max-width: 32rem; font-size: 1.125rem; font-weight: 500; }
.ch-note { margin: 10px 0 28px; max-width: 32rem; font-size: .9375rem; color: rgba(241, 241, 241, .62); }
.marquee { border-top: 1px solid var(--line); overflow: hidden; padding: 6px 0; }
.marquee__track { animation-duration: 55s; }
.marquee span { font: 400 clamp(4rem, 9vw, 8.5rem)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(241, 241, 241, .42); padding: .12em .3em; }
.marquee i { font-style: normal; font: 400 clamp(3rem, 6vw, 6rem)/1 var(--display); color: var(--red); }
.marquee i::before { content: "/"; }

/* ---------- 10 · Who can join ---------- */

/* interim: the "Have these ready" card is gone, so the list sits in one column until a new layout is picked (see who-lab/) */
.who__layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.who__main { width: 100%; max-width: 52rem; margin-inline: auto; }
.who__lead { margin-bottom: 8px; font: 700 .75rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: rgba(241, 241, 241, .62); }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 12px 0; font-size: 1.125rem; line-height: 1.5; }
.checklist b { font-weight: 700; }
/* red square with a white tick drawn dead centre; the top margin centres it on the FIRST line, so it still lines up when the text wraps */
.checklist i {
  width: 1.5rem; height: 1.5rem; margin-top: calc((1.5em - 1.5rem) / 2); border-radius: 7px; flex: none;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E") center / 76% no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -6px rgba(210, 0, 0, .65);
}
.checklist p { margin: 0; }
.ready { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.ready__title { margin: 14px 0 22px; font: 400 clamp(2rem, 2.8vw, 2.6rem)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.ready__list { display: grid; gap: 10px; }
.ready__list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .03); }
.ready__list svg { width: 28px; height: 28px; fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ready__list span { display: grid; gap: 4px; font-size: .9375rem; color: rgba(241, 241, 241, .7); }
.ready__list b { font-size: 1rem; color: var(--paper); }
.ready__note { margin: 20px 0 24px; font-size: .9375rem; color: rgba(241, 241, 241, .7); }

/* ---------- 11 · FAQ ---------- */

.faq__list { max-width: 52rem; margin-inline: auto; }
.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: 24px; padding: 22px 0; cursor: pointer; list-style: none;
  font: 600 1.125rem/1.35 var(--text); transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover, .faq details[open] summary { color: #fff; }
.faq details[open] summary { color: var(--red-text); }
.faq__a { padding: 0 0 24px; max-width: 42rem; color: rgba(241, 241, 241, .78); }
.faq details[open] .faq__a { animation: fade-up .45s var(--ease) both; }

/* ---------- 12 · Final CTA ---------- */

.final { position: relative; overflow: hidden; background: var(--bg); }
.final__panel {
  position: relative; overflow: hidden; container-type: inline-size; color: #fff; padding: clamp(72px, 10vw, 150px) 0 0; background-color: #D20000;
  /* the shutter slats over a slight vertical gradient: a touch brighter at the top, #D20000 through the middle, deeper at the bottom */
  background-image:
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(0, 0, 0, .2) 34px 36px, rgba(255, 255, 255, .07) 36px 38px),
    linear-gradient(180deg, #E5120C 0%, #D20000 45%, #B80000 100%);
}
/* the info row (was the footer) sits under the button; the big "Join Crew" closes the page, with air above and below it */
.final__legal {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  margin-top: clamp(72px, 10vw, 140px); font-size: .8125rem; color: rgba(255, 255, 255, .86);
}
.final__links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.final__links a { text-decoration: none; font: 600 .8125rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.final__links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.final__word {
  position: relative; z-index: 0; display: block; width: max-content; padding: 0; text-align: left; white-space: nowrap;
  pointer-events: none; user-select: none; letter-spacing: -.005em; text-transform: uppercase; color: rgba(0, 0, 0, .2);
  /* "JOIN CREW" bleeds off the page: the left edge cuts the J in half, the right edge cuts the W in half and the bottom edge
     cuts every letter in half. Measured in Bebas Neue: the J's ink centre is .1215em from the start of the text and sits
     2.71em before the W's ink centre, so the size is the panel width / 2.71 and the text starts .1215em left of the panel.
     line-height .6 puts the baseline on the box bottom and the capitals (.7em) rise .1em above it (hence the + .1em);
     the -.35em bottom margin ends the panel halfway down the capitals. */
  font: 400 calc(100cqw / 2.71)/.6 var(--display);
  margin: calc(clamp(56px, 7vw, 104px) + .1em) 0 -.35em -.1215em;
}
.final__inner { position: relative; z-index: 1; text-align: center; }
.eyebrow--onred { color: rgba(255, 255, 255, .92); }
.eyebrow--onred::before { background: #fff; }
.final__title { margin: 18px 0 clamp(28px, 4vw, 48px); font: 400 clamp(3.6rem, 9vw, 8.5rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.final__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 32px; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--red); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: var(--bg); --btn-fg: #fff; --btn-bd: var(--bg); }
.final__login { font: 600 .875rem/1 var(--text); letter-spacing: .08em; text-transform: uppercase; text-underline-offset: 6px; }
.final .btn:focus-visible, .final__login:focus-visible, .final__links a:focus-visible { outline-color: #fff; }

/* ---------- Responsive (sections 05–12) ---------- */

@media (max-width: 1099px) {
  .camp { grid-template-columns: minmax(0, .8fr) minmax(280px, 1fr) minmax(0, .8fr); }
}

@media (max-width: 899px) {
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-tile { min-height: 230px; }

  .how__layout { grid-template-columns: minmax(0, 1fr); }
  .how__stage { display: none; }
  .step, .step.is-done { min-height: 0; padding: 0 0 36px; opacity: 1; }
  .step:last-child { padding-bottom: 0; }
  .step__n { font-size: .9375rem; }
  .step__d { font-size: 1rem; }

  .camp { display: block; }
  .camp__head { border-radius: 10px 10px 0 0; }
  .crow { display: flex; flex-direction: column-reverse; border: 1px solid var(--line-strong); border-top-color: var(--line); background: var(--surface); }
  .crow:last-child { border-radius: 0 0 10px 10px; }
  .crow__field { border: 0; border-radius: 0; background: none; }
  .crow:last-child .crow__field { border: 0; border-radius: 0; }
  .crow__note, .crow--r .crow__note { max-width: none; text-align: left; justify-self: auto; align-self: stretch; padding: 12px 20px 0; font-size: .9375rem; }
  .crow__note::before, .crow__note::after { display: none; }
  .crow { padding-bottom: 6px; }

  .earn__layout, .challenge__layout, .who__layout { grid-template-columns: minmax(0, 1fr); }
  .earn__layout .loop-frame { order: -1; }   /* phones: the picture first, then the three points */
  .why-tile__verb { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .ch-frame { order: 2; }
  .challenge__layout { padding-bottom: 56px; }
  .ch-steps li { grid-template-columns: 6.5rem 1fr; }
  .final__legal { flex-direction: column; justify-content: center; text-align: center; }
  .final__links { justify-content: center; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .step, .scene { transition: none !important; }
  .scene, .scene * { animation: none !important; }
}


/* ---------- iPhone hero: phones ---------- */
@media (max-width: 899px) {
  .viewfinder { justify-self: center; width: min(90%, 330px); margin-bottom: 0; }
  .hero { overflow: hidden; }
}



/* ---------- Hero: taller, calmer desktop layout ---------- */
@media (min-width: 900px) {
  .hero {
    --hero-h: clamp(640px, calc(100vh - 96px), 940px);
    --hero-h: clamp(640px, calc(100svh - 96px), 940px);
    --pad-t: clamp(28px, 5vh, 64px);
    --pad-b: clamp(40px, 7vh, 88px);
  }
  .hero__inner { padding: var(--pad-t) var(--gutter) var(--pad-b); gap: clamp(40px, 6vw, 112px); }
  .hero__title {
    /* 140px at 1440×900, 120px at 1280×680 (height term), capped at 140px */
    font: 400 clamp(3.52rem, min(9.8vw, calc((var(--hero-h) + 344px) / 8.2)), 8.75rem)/.9 var(--display);
    margin: 0 0 clamp(6px, 1.2vh, 14px);
  }
  .hero__cta { margin-top: clamp(28px, 4.4vh, 48px); }
  /* the phone now sits fully inside the hero, with room around it */
  .viewfinder { width: clamp(250px, calc((var(--hero-h) - var(--nav-h) - var(--pad-t) - var(--pad-b)) / 2), 400px); margin-bottom: 0; align-self: center; }
}


/* ---------- Nav: section links appear once the hero is behind you (desktop) ---------- */
@media (min-width: 900px) {
  .nav__links a:not(.nav__login):not(.nav__join-mobile) {
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .4s var(--ease), transform .4s var(--ease), color .25s var(--ease);
  }
  .nav.is-past-hero .nav__links a:not(.nav__login):not(.nav__join-mobile),
  .nav:focus-within .nav__links a:not(.nav__login):not(.nav__join-mobile) {
    opacity: 1; transform: none; pointer-events: auto;
    transition-delay: calc(var(--k, 0) * 60ms), calc(var(--k, 0) * 60ms), 0s;
  }
  .nav__links a:nth-child(1) { --k: 0; } .nav__links a:nth-child(2) { --k: 1; }
  .nav__links a:nth-child(3) { --k: 2; } .nav__links a:nth-child(4) { --k: 3; }
  .nav__links a:nth-child(5) { --k: 4; } .nav__links a:nth-child(6) { --k: 5; }
  /* the divider before "Log in" only makes sense when the links are showing */
  .nav__login { border-left-color: transparent !important; transition: border-color .4s var(--ease); }
  .nav.is-past-hero .nav__login, .nav:focus-within .nav__login { border-left-color: rgba(255, 255, 255, .18) !important; }
}


/* ---------- Hero headline: "Your crew." is red type, no box ---------- */
.hero__title .crew-block { padding: 0; background: none; color: var(--red); }


/* ---------- Nav: keep labels on one line on narrow desktops ---------- */
.nav__links a { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1119px) {
  .nav__inner { gap: 14px; }
  .nav__links { gap: 14px; }
  .nav__links a { font-size: .6875rem; letter-spacing: .1em; }
  .nav__login { padding-left: 14px !important; }
  .nav__cta { padding-inline: 1em; }
}


/* ---------- Logo sizes ---------- */
@media (max-width: 899px) { .logo__img { height: 38px; } }