:root {
  --gold: #d6c596;
  --gold-soft: rgba(214, 197, 150, 0.14);
  --white: #f4f4ee;
  --red: #c82126;
  --red-soft: rgba(200, 33, 38, 0.14);
  --blue: #3f6fa8;
  --blue-soft: rgba(63, 111, 168, 0.16);
  --bg: #0a0a0c;
  --bg-panel: #121215;
  --border: rgba(244, 244, 238, 0.1);
  --text-muted: rgba(244, 244, 238, 0.62);
  --max-width: 1100px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Site-wide topo texture — a fixed pseudo-layer rather than
   background-attachment:fixed, which is unreliable on iOS Safari. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("assets/topo-bg.jpg") center/cover no-repeat;
  opacity: 0.16;
  pointer-events: none;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Headline / display type */
.display {
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
}

.gold {
  color: var(--gold);
}

.underline-red {
  position: relative;
  display: inline-block;
}
.underline-red::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.06em;
  height: 0.07em;
  background: var(--red);
  border-radius: 2px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(to bottom, rgba(10, 10, 12, 0.92), rgba(10, 10, 12, 0.75));
  backdrop-filter: blur(10px);
  border-bottom: none;
}

.site-header .logo img {
  height: 26px;
  width: auto;
}

.site-header nav {
  display: flex;
  gap: 28px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-header nav a {
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.site-header nav a:hover {
  color: var(--white);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-actions .btn {
  height: 32px;
  padding: 0 18px;
  font-size: 11px;
  line-height: 1;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn-gold {
  background: linear-gradient(to bottom, #efe6bf, var(--gold), #a69455);
  color: #14120b;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}

.btn-ghost {
  border-color: var(--border);
  color: var(--white);
}

.btn-ghost:hover {
  border-color: var(--gold);
}

/* Hero */
.hero {
  position: relative;
  padding: 100px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 500px at 18% -10%, rgba(200, 33, 38, 0.18), transparent 60%),
    radial-gradient(ellipse 900px 600px at 85% 10%, rgba(30, 40, 70, 0.35), transparent 60%),
    var(--bg);
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero-bgtype {
  position: absolute;
  top: 50%;
  right: -2%;
  transform: translateY(-50%);
  font-family: "Anton", sans-serif;
  font-size: clamp(140px, 26vw, 420px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244, 244, 238, 0.06);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Hero — full-bleed photo, headline overlaid in the clear sky above the
   phone, supporting copy overlaid in the clear ground below it. Dark
   gradients top and bottom keep both text blocks legible without ever
   covering the phone itself. */
.hero-photo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1536 / 2752;
  background: var(--bg);
  padding: 0;
  border-top: none;
}

@media (min-width: 861px) {
  .hero-photo {
    aspect-ratio: 1920 / 1325;
  }
}

.hero-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-photo-bg img,
.hero-photo-bg video,
video.hero-photo-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-photo::before,
.hero-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-photo::before {
  top: 0;
  height: 38%;
  background: linear-gradient(to bottom, rgba(10, 10, 12, 0.9), rgba(10, 10, 12, 0.3) 75%, transparent);
}

.hero-photo::after {
  bottom: 0;
  height: 36%;
  background: linear-gradient(to top, var(--bg) 45%, rgba(10, 10, 12, 0.5) 70%, transparent);
}

@media (min-width: 861px) {
  .hero-photo::after {
    height: 40%;
    background: linear-gradient(to top, rgba(10, 10, 12, 0.5) 58%, rgba(10, 10, 12, 0.25) 80%, transparent);
  }
}

.hero-photo-top {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 6px 24px 0;
}

.hero-eyebrow-line {
  font-size: clamp(11px, 1vw, 17px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 6px;
}

.hero-photo-top h1 {
  font-size: clamp(52px, 8vw, 110px);
  line-height: 0.92;
  margin: 0;
}

@media (min-width: 861px) {
  .hero-photo-top h1 {
    font-size: clamp(23px, 5vw, 76px);
  }
}

.hero-line-1 {
  display: block;
}

/* Headline motion: "This weekend," settles plain (handled by the existing
   [data-reveal] fade on .hero-photo-top). "you're on tour." instead comes
   at the camera like a struck ball — tiny and far off, accelerating in,
   landing with a flash/shake, bouncing twice, then a biro-style underline
   scrawls in. Triggered from the reveal IntersectionObserver in index.html. */

.hero-impact-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(38% 46% at 50% 55%, rgba(255,252,238,0.9), rgba(214,197,150,0.22) 45%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
}
.hero-impact-flash.flash {
  transition: opacity 0.06s ease;
  opacity: 1;
}
.hero-impact-flash.fade {
  transition: opacity 0.55s ease;
  opacity: 0;
}

.hero-photo-top.shake {
  animation: hero-impact-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1;
}
@keyframes hero-impact-shake {
  0% { transform: translate(0, 0); }
  18% { transform: translate(-3px, 1px) rotate(-0.3deg); }
  38% { transform: translate(3px, -1px) rotate(0.3deg); }
  58% { transform: translate(-2px, 1px) rotate(-0.15deg); }
  78% { transform: translate(1px, 0); }
  100% { transform: translate(0, 0); }
}

.hero-line2-wrap {
  position: relative;
  display: inline-block;
}

.hero-line-2 {
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: scale(0.04);
  filter: blur(9px);
}

@keyframes hero-ball-zoom-bounce {
  0%   { transform: scale(0.04); opacity: 0;   filter: blur(9px);   animation-timing-function: cubic-bezier(.6,0,.85,0.1); }
  55%  { transform: scale(0.2);  opacity: 0.9; filter: blur(5px);   animation-timing-function: cubic-bezier(.5,0,.9,0.05); }
  74%  { transform: scale(0.62); opacity: 1;   filter: blur(1.5px); animation-timing-function: cubic-bezier(.4,0,.85,0.1); }
  85%  { transform: scale(1.26); opacity: 1;   filter: blur(0);     animation-timing-function: ease-out; }
  90%  { transform: scale(0.9);                                    animation-timing-function: ease-in-out; }
  94%  { transform: scale(1.08);                                   animation-timing-function: ease-in-out; }
  98%  { transform: scale(0.97);                                   animation-timing-function: ease-out; }
  100% { transform: scale(1);   opacity: 1;   filter: blur(0); }
}

.hero-line-2.ball-in {
  animation: hero-ball-zoom-bounce 0.95s 1 both;
}

.hero-line-2.impact-glow {
  text-shadow: 0 0 3px rgba(255,252,238,0.95), 0 0 42px rgba(214,197,150,0.95), 0 0 90px rgba(214,197,150,0.5);
}
.hero-line-2.settled {
  transition: text-shadow 0.75s ease;
  text-shadow: 0 0 16px rgba(214,197,150,0.28);
}

.hero-underline-svg {
  position: absolute;
  left: -2%;
  bottom: -0.2em;
  width: 104%;
  /* Matches the path's viewBox (224 x 10) exactly, so preserveAspectRatio
     "none" stretches X and Y by the same factor — a mismatched aspect ratio
     here caused an uneven stretch that clipped part of the stroke. */
  aspect-ratio: 224 / 10;
  overflow: visible;
}
.hero-underline-svg path {
  fill: none;
  stroke: #a81c20;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.hero-underline-svg.draw path {
  transition: stroke-dashoffset 0.4s cubic-bezier(.3,.85,.25,1.05);
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-line-2 {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    text-shadow: 0 0 16px rgba(214,197,150,0.28) !important;
  }
  .hero-underline-svg path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .hero-impact-flash, .hero-photo-top { animation: none !important; }
  .hero-impact-flash { opacity: 0 !important; }
}

.hero-below {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: min(640px, 90vw);
  margin: 0 auto;
  padding: 0 24px 28px;
}

.hero-block {
  position: relative;
}

.hero-intro {
  position: relative;
  border-top: none;
  padding: 48px 24px 56px;
}

.hero-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, var(--bg), transparent);
  pointer-events: none;
  z-index: 0;
}

.hero-intro .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-intro .lede {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 auto 28px;
  text-align: center;
  line-height: 1.6;
}

/* Mobile: copy sits directly on the photo, in the solid-black band the fade
   creates below the phone. */
@media (max-width: 860px) {
  .hero-intro {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 0 14px clamp(14px, 3.5vw, 22px);
    display: flex;
    justify-content: center;
  }

  .hero-intro::before {
    display: none;
  }

  .hero-intro .wrap {
    width: 100%;
    max-width: 460px;
    margin: 0;
    padding: 0;
    align-items: center;
  }

  .hero-intro .lede {
    width: 100%;
    max-width: none;
    text-align: center;
    font-size: 19px;
    line-height: 1.3;
    margin: 0;
  }
}

/* Desktop: copy sits directly on the photo, in the clear ground below the
   phone, matching mobile — no gradient scrim needed since that area of the
   photo is already dark. */
@media (min-width: 1180px) {
  .hero-intro {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 0 24px calc(20px + clamp(20px, 2.6vw, 32px));
    display: flex;
    justify-content: center;
  }

  .hero-intro::before {
    display: none;
  }

  .hero-intro .wrap {
    width: 100%;
    max-width: 680px;
    margin: 0;
    padding: 0;
    align-items: center;
  }

  .hero-intro .lede {
    width: 100%;
    max-width: none;
    text-align: center;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.4;
    margin: 0;
  }
}

/* Real app screenshots, framed consistently wherever they appear */
.screen-shot {
  width: 100%;
  max-width: 340px;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  display: block;
}

/* Rolodex wheel — a real iPhone frame around every screenshot, four of
   them arranged front / side / back / side. One JS timer (or a click on
   a side slide) rotates which slide is out front; CSS just defines what
   each of the four "seats" looks like and transitions between them. */
.wheel {
  --wheel-w: clamp(190px, 42vw, 300px);
  position: relative;
  width: 100%;
  max-width: calc(var(--wheel-w) * 1.9);
  /* Tall enough that the front phone (scaled up 1.06x) actually fits inside
     this box — it's what the grid uses to size the section, so if the box
     is shorter than the real rendered phone, the phone visibly bleeds past
     the section boundary into whatever comes next. */
  aspect-ratio: 1 / 1.6;
  margin: 0 auto;
}

.wheel-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--wheel-w);
  aspect-ratio: 1170 / 2532;
  margin: calc(var(--wheel-w) * -1.083 / 2) 0 0 calc(var(--wheel-w) / -2);
  cursor: pointer;
  will-change: transform, opacity, filter;
  transition: transform 0.75s cubic-bezier(0.22, 0.68, 0, 1.01), opacity 0.6s ease, filter 0.6s ease;
}

.wheel-slide.pos-front {
  transform: translate(0, 0) scale(1.06);
  opacity: 1;
  filter: blur(0) saturate(1);
  z-index: 4;
  cursor: default;
}
.wheel-slide.pos-next {
  transform: translate(46%, 12%) scale(0.72);
  opacity: 0.45;
  filter: blur(2.5px) saturate(0.35);
  z-index: 2;
}
.wheel-slide.pos-back {
  transform: translate(4%, -14%) scale(0.5);
  opacity: 0.15;
  filter: blur(3px) saturate(0.35);
  z-index: 1;
}
.wheel-slide.pos-prev {
  transform: translate(-46%, 12%) scale(0.72);
  opacity: 0.45;
  filter: blur(2.5px) saturate(0.35);
  z-index: 2;
}

/* The frame itself — bezel, notch, side buttons, screen. */
.phone-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 15%/6.6%;
  background: linear-gradient(160deg, #35353a, #0a0a0c 55%);
  padding: 3.4%;
  box-shadow: inset 0 0 0 1px rgba(244, 244, 238, 0.14), 0 30px 70px -20px rgba(0, 0, 0, 0.65);
}

.wheel-slide.pos-front .phone-frame {
  box-shadow: inset 0 0 0 1px rgba(244, 244, 238, 0.18), 0 0 55px 10px rgba(214, 197, 150, 0.28), 0 30px 70px -20px rgba(0, 0, 0, 0.65);
}

.phone-frame::before {
  content: "";
  position: absolute;
  top: 5.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 3%;
  background: #000;
  border-radius: 100px;
  z-index: 2;
}

.phone-frame::after {
  content: "";
  position: absolute;
  right: -2.2%;
  top: 16%;
  width: 1.6%;
  height: 9%;
  background: #202024;
  border-radius: 2px 0 0 2px;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12%/5%;
  overflow: hidden;
  background: #050506;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wheel-caption {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  min-height: 1em;
  transition: opacity 0.3s ease;
}


/* Leaderboard / Match Report / Grab-a-beer — same stacked pattern:
   eyebrow + title, then the real screenshot, then supporting copy. */
.feature-block {
  border-top: 1px solid var(--border);
}

.feature-block .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}

.feature-block-head {
  max-width: 640px;
}

.huge {
  font-size: clamp(52px, 8vw, 110px);
  line-height: 0.92;
  margin: 0;
}

.huge-sm {
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.92;
  margin: 0;
}

.feature-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.feature-block-body {
  max-width: 480px;
}

.feature-block-body .section-lede {
  margin: 0 0 28px;
}

.feature-block-body .section-lede:last-child {
  margin-bottom: 0;
}

.dot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.dot-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 8px 24px;
  text-align: center;
}

.dot-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-size: 72px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
}

.dot-text {
  position: relative;
  z-index: 1;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 17px;
  line-height: 1.4;
  max-width: 46ch;
}

/* Mobile: pull the wheel in tight under the headline (rather than the
   same 40px gap used everywhere else in the stack) so the body copy
   reads as a caption sitting under the carousel, not a third equally-
   spaced block. Desktop is untouched — it has its own layout below. */
@media (max-width: 860px) {
  .feature-block.feature-split .wrap {
    gap: 16px;
  }
  /* The front phone sits well inside its own .wheel box (the box is
     tall enough to also fan out the next/prev cards), so most of that
     box is actually empty space above the visible phone. Pulling the
     whole wheel up crops that empty space out of the layout instead of
     just adding a bigger gap below to route around it. */
  .feature-block.feature-split .wheel {
    margin-top: -160px;
  }
  /* The front phone (scaled 1.06x, plus its glow) still renders a bit
     past the bottom of the (now-shifted) box, so this needs to clear
     that overflow, not just the box, or the phone overlaps the copy
     beneath it. */
  .feature-block.feature-split .feature-block-body {
    margin-top: 59px;
  }
}

/* Desktop: text sits beside the wheel instead of above it, alternating
   sides section to section, to cut down on vertical scroll. Mobile keeps
   the original stacked order (head, wheel, body) untouched. */
@media (min-width: 861px) {
  /* The visual is taken out of normal flow entirely (position:absolute)
     instead of sharing a grid row with the text — that way the wheel's
     height (which varies section to section) can never push the gap
     between the headline and the body copy around. Head and body just
     flow directly one after the other, so that gap is identical everywhere. */
  .feature-block.feature-split .wrap {
    /* Declared here (an ancestor of .wheel) rather than only on .wheel
       itself, so this same value is readable below for the wrap's
       min-height floor — custom properties only cascade downward. */
    --wheel-w: clamp(150px, 20vw, 230px);
    position: relative;
    display: block;
    text-align: left;
    max-width: var(--max-width);
    /* Percentage padding resolves against the *containing block* (the full
       viewport), not this element's own max-width box — so this has to be
       expressed off the fixed --max-width value instead of a plain %, with
       a % cap as a fallback for the narrower tablet range where .wrap is
       actually viewport-constrained rather than sitting at its max-width. */
    padding-right: min(calc(var(--max-width) * 0.44 + 40px), 46%);
    /* The visual is position:absolute (out of flow) so its height no longer
       contributes to .wrap's own height at all. This floor only guards the
       (rare) case where the text column is shorter than the wheel itself —
       tied to the wheel's own box height so it never inflates .wrap past
       what the text actually needs, which would throw off the vertical
       centering below. */
    min-height: calc(var(--wheel-w) * 1.9);
  }

  .feature-block.feature-split.reverse .wrap {
    padding-right: 0;
    padding-left: min(calc(var(--max-width) * 0.44 + 40px), 46%);
  }

  .feature-block.feature-split .feature-block-head { max-width: none; margin: 0 0 20px; }
  .feature-block.feature-split .feature-block-body { max-width: none; }

  .feature-block.feature-split .huge,
  .feature-block.feature-split .huge-sm {
    font-size: clamp(36px, 4.6vw, 68px);
  }

  .feature-block.feature-split .feature-visual {
    position: absolute;
    /* Centered against .wrap's own height, which (since the visual is
       out of flow) equals the text column's natural height — so this
       lines the wheel up with the vertical middle of the headline +
       body + bullets, not the top of the section. The extra offset
       corrects for the wheel's own box being taller than the front
       phone it holds (room is reserved below for the fanned-out
       next/prev cards), which otherwise sits the visible phone lower
       than the box's own center. */
    top: 50%;
    transform: translateY(calc(-50% - (var(--wheel-w) * 0.54)));
    right: 0;
    width: 44%;
    align-items: flex-end;
  }
  .feature-block.feature-split.reverse .feature-visual {
    right: auto;
    left: 0;
    align-items: flex-start;
  }
  /* Taken out of the flex column's flow — otherwise a section with a
     caption (only "Everything Else" has one) ends up with a taller
     .feature-visual box than sections without, and the vertical-centering
     math above (calibrated against the wheel alone) drifts for that
     section only. */
  .feature-block.feature-split .feature-visual .wheel-caption {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 22px;
  }
  .feature-block.feature-split .wheel {
    --wheel-w: clamp(150px, 20vw, 230px);
  }

  .feature-block.feature-split .dot-row {
    justify-content: flex-start;
    text-align: left;
    padding: 8px 0 8px 64px;
  }

  .feature-block.feature-split .dot-num {
    left: 0;
    transform: translateY(-50%);
  }
}

/* Numbered feature list */
.feature-list.numbered li {
  gap: 16px;
}

.feature-list.numbered .tick {
  font-size: 13px;
  width: 24px;
  flex-shrink: 0;
}

/* Pricing — three one-time-purchase tiers, the middle one called out as
   the one most people actually buy. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 48px 0 28px;
}

@media (max-width: 1100px) and (min-width: 861px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
}

.pricing-card.featured {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(214, 197, 150, 0.3), 0 30px 60px -24px rgba(214, 197, 150, 0.25);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #14120b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 100px;
  white-space: nowrap;
}

.pricing-tier {
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.pricing-price {
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-size: 40px;
  color: var(--gold);
  line-height: 1;
}

.pricing-price span {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 6px;
}

.pricing-pitch {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0;
}

.pricing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.pricing-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white);
}

.pricing-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

.pricing-card .btn {
  margin-top: 6px;
  align-self: flex-start;
}

.pricing-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

@media (max-width: 860px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .pricing-card .btn {
    align-self: stretch;
    justify-content: center;
  }
}

.closer-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90%);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.closer {
  position: relative;
}

.closer > .wrap {
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.hero-eyebrow .rule {
  width: 26px;
  height: 1px;
  background: rgba(214, 197, 150, 0.6);
}

.hero h1 {
  font-size: clamp(40px, 7vw, 88px);
  margin: 0 0 22px;
  max-width: 16ch;
}

.hero p.lede {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--text-muted);
  max-width: 54ch;
  margin: 0 0 36px;
}

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* Hero visual: stylised glove+phone motif, CSS/SVG placeholder for real photography */
.hero-visual {
  position: relative;
  border-radius: 28px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, #16161a, #0a0a0c 60%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 64px;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(200, 33, 38, 0.25), transparent 45%),
    radial-gradient(circle at 75% 60%, rgba(214, 197, 150, 0.18), transparent 45%);
  filter: blur(20px);
}

.hero-visual .mock-phone {
  position: relative;
  z-index: 1;
  width: 160px;
  border-radius: 22px;
  border: 5px solid #1c1c20;
  background: #050506;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.hero-visual .mock-phone .screen {
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(165deg, #1a1620 0%, #0a0a0c 60%);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mock-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .dot {
    animation: pulse 1.8s ease-in-out infinite;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(214, 197, 150, 0.5); }
  50% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(214, 197, 150, 0); }
}

.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(244, 244, 238, 0.06);
  border: 1px solid rgba(244, 244, 238, 0.08);
  border-left: 3px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mock-row.team-red {
  border-left-color: var(--red);
}

.mock-row.team-blue {
  border-left-color: var(--blue);
}

.mock-row.leader {
  border-color: rgba(214, 197, 150, 0.5);
  border-left-color: var(--gold);
  background: rgba(214, 197, 150, 0.1);
}

.mock-row .val {
  color: var(--gold);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 13px;
}

.hero-visual .glove-caption {
  position: absolute;
  bottom: 18px;
  left: 24px;
  right: 24px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  z-index: 1;
}

/* Sections */
section {
  padding: 90px 0;
  border-top: 1px solid var(--border);
}

.section-head {
  max-width: 620px;
  margin: 0 0 48px;
}

.section-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.flap-char {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  color: currentColor;
}

.flap-space {
  display: inline-block;
  width: 0.5em;
}

.section-head h2 {
  font-size: clamp(30px, 4.5vw, 52px);
  margin: 0 0 16px;
}

.section-head p {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 56ch;
}

.section-lede {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 48ch;
  margin: 0 0 40px;
}

.so-we-built {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gold);
  font-weight: 600;
  text-align: center;
}

.so-we-built span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.inline-logo {
  height: 44px;
  width: auto;
  transform: translateY(-1px);
}

/* Two-column section layout (text + visual) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.split.reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.split.reverse > *:first-child {
  order: 2;
}

.split.reverse > *:last-child {
  order: 1;
}

.split-visual {
  display: flex;
  justify-content: center;
}

/* Feature panels (legacy grid card, still available) */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.panel:hover {
  border-color: rgba(214, 197, 150, 0.4);
  transform: translateY(-3px);
}

.panel h3 {
  font-size: 20px;
  margin: 0 0 10px;
  text-transform: uppercase;
  font-weight: 800;
}

.panel p {
  color: var(--text-muted);
  font-size: 14.5px;
  margin: 0;
}

/* Feature rows — used in the two-column sections, no fake numbering */
.feature-rows {
  display: flex;
  flex-direction: column;
}

.feature-row {
  padding: 22px 0;
  border-top: 1px solid var(--border);
  position: relative;
  padding-left: 20px;
  transition: padding-left 0.2s ease;
}

.feature-row:last-child {
  border-bottom: 1px solid var(--border);
}

.feature-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  width: 8px;
  height: 2px;
  background: var(--gold);
}

.feature-row:hover {
  padding-left: 26px;
}

.feature-row h3 {
  font-size: 16.5px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}

.feature-row p {
  color: var(--text-muted);
  font-size: 14.5px;
  margin: 0;
  max-width: 46ch;
}

/* Leaderboard card visual */
.lb-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.lb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--white);
}

.lb-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}

.lb-row:last-child {
  border-bottom: none;
}

.lb-row.team-red {
  border-left-color: var(--red);
}

.lb-row.team-blue {
  border-left-color: var(--blue);
}

.lb-row.rank-1 {
  background: var(--gold-soft);
}

.lb-row .rank {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-muted);
  width: 16px;
}

.lb-row.rank-1 .rank {
  color: var(--gold);
}

.lb-row .name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}

.lb-row .pts {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* Match report card visual */
.report-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 16px;
  padding: 28px 30px;
}

.report-card-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.report-line {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.report-line strong {
  color: var(--white);
}

.report-line.report-result {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-weight: 700;
}

/* Feature list */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
}

.feature-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
  transition: padding-left 0.2s ease;
}

.feature-list li:hover {
  padding-left: 6px;
}

.feature-list li .tick {
  color: var(--gold);
  font-family: "Anton", sans-serif;
  font-size: 18px;
  flex-shrink: 0;
}

/* Feature list */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
}

.feature-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
}

.feature-list li .tick {
  color: var(--gold);
  font-family: "Anton", sans-serif;
  font-size: 18px;
  flex-shrink: 0;
}

/* Quote / one-person section */
.callout {
  position: relative;
  background: linear-gradient(155deg, rgba(200, 33, 38, 0.16), rgba(10, 10, 12, 0));
  border: 1px solid rgba(200, 33, 38, 0.28);
  border-radius: 28px;
  overflow: hidden;
}

.callout-grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.callout-inner {
  position: relative;
  z-index: 1;
  padding: 56px;
}

.callout h2 {
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 20px;
  max-width: 20ch;
}

.callout p {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 60ch;
  margin: 0 0 8px;
}

/* Closer CTA */
.closer {
  text-align: center;
  padding: 110px 0;
}

.closer h2 {
  font-size: clamp(34px, 6vw, 64px);
  margin: 0 0 28px;
}

.closer .btn {
  padding: 16px 40px;
  font-size: 14px;
}

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 40px;
}

.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-grid .logo img {
  height: 22px;
}

footer nav {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

footer nav a {
  text-decoration: none;
  color: inherit;
}
footer nav a:hover {
  color: var(--white);
}

.footer-note {
  color: var(--text-muted);
  font-size: 12.5px;
  margin-top: 20px;
}

/* Simple page (support / privacy) */
.simple-page {
  padding: 70px 0 100px;
}

.simple-page h1 {
  font-size: clamp(34px, 6vw, 56px);
  margin: 0 0 20px;
}

.simple-page .lede {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 60ch;
  margin: 0 0 48px;
}

.simple-page h2 {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  font-size: 22px;
  margin: 40px 0 12px;
}

.simple-page p,
.simple-page li {
  color: var(--text-muted);
  font-size: 15.5px;
  max-width: 68ch;
}

.simple-page a.email {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}

.contact-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  max-width: 480px;
  margin-top: 8px;
}

.contact-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.contact-card .value {
  font-family: "Anton", sans-serif;
  font-size: 22px;
  color: var(--gold);
}

/* Responsive */
@media (max-width: 860px) {
  .panel-grid {
    grid-template-columns: 1fr;
  }
  .feature-list {
    grid-template-columns: 1fr;
  }
  .split,
  .split.reverse {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .split.reverse > *:first-child,
  .split.reverse > *:last-child {
    order: unset;
  }
  .callout-inner {
    padding: 34px;
  }
  .callout {
    border-radius: 22px;
  }
  .hero {
    padding: 64px 0 60px;
  }
  section {
    padding: 64px 0;
  }
  .site-header nav {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .site-header.nav-open nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 24px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
  }
}

/* Ticker marquee — mirrors the app's own live Ticker feature */
.ticker-section {
  background: var(--bg-panel);
  border-top: 1px solid rgba(214, 197, 150, 0.25);
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: flex;
  width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
  .ticker-track {
    animation: ticker-scroll 32s linear infinite;
  }
}

.ticker-track:hover {
  animation-play-state: paused;
}

.ticker-content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 18px 0;
}

.ticker-content span:not(.ticker-sep) {
  font-family: "Anton", sans-serif;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--white);
  padding: 0 20px;
}

.ticker-sep {
  color: var(--gold);
  font-size: 12px;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}