:root {
  color-scheme: dark;
  --black: #070707;
  --black-soft: #0d0c0b;
  --surface: #12100f;
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --white: #f6f3ef;
  --muted: #aaa39d;
  --muted-bright: #c6c0ba;
  --orange: #ff6a13;
  --orange-hot: #ff8735;
  --green: #5bd68d;
  --red: #ff6670;
  --page-pad: clamp(22px, 4vw, 68px);
  --page-max: 1440px;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --data: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 69% 10%, rgba(255, 106, 19, 0.08), transparent 28rem),
    var(--black);
  color: var(--white);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
input { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

a { color: inherit; }

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--page-pad);
  border-bottom: 1px solid transparent;
  transition: background 220ms ease, border-color 220ms ease, height 220ms ease;
}

.site-header.scrolled {
  height: 64px;
  border-color: var(--line-soft);
  background: rgba(7, 7, 7, 0.82);
  backdrop-filter: blur(22px) saturate(1.2);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  color: var(--white);
  text-decoration: none;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.brand img {
  display: block;
  border-radius: 8px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 46px);
}

.site-nav a,
.nav-cta {
  position: relative;
  color: var(--muted-bright);
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.site-nav a::after,
.nav-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 1px;
  background: var(--orange);
  transition: right 180ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.nav-cta:hover,
.nav-cta:focus-visible { color: var(--white); }

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.nav-cta:hover::after,
.nav-cta:focus-visible::after { right: 0; }

.nav-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
}

.nav-cta-arrow {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

main { overflow: hidden; }

.hero {
  width: min(100%, var(--page-max));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 116px var(--page-pad) 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  align-items: center;
  gap: clamp(34px, 7vw, 120px);
}

.hero-copy { position: relative; z-index: 2; }

.eyebrow {
  margin: 0 0 22px;
  color: var(--orange-hot);
  font-family: var(--data);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

/* White, not the shared orange-hot eyebrow color -- keeps Join the beta
   as the only orange thing in the hero. Scoped to just the hero's own
   eyebrow; the other section eyebrows (THE LOOP, MORE THAN A NUMBER,
   ANN ARBOR BETA further down) keep the orange. */
.hero-copy > .eyebrow { font-size: 12px; color: var(--white); }

.hero h1,
.section-intro h2,
.competition h2,
.join-section h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(68px, 9vw, 146px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.075em;
  text-wrap: balance;
}

.hero h1 span {
  display: inline-block;
  color: transparent;
  padding-right: 0.04em;
  font-kerning: normal;
  letter-spacing: -0.045em;
  -webkit-text-stroke: 1.35px rgba(246, 243, 239, 0.76);
}

.hero-summary {
  max-width: 520px;
  margin: 30px 0 0;
  color: #d8d2cc;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* White, not orange -- "Join the beta" is the only orange thing in the
   hero now. */
.hero-summary span {
  color: var(--white);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 38px;
}

.primary-action {
  border: 0;
  border-radius: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.primary-action {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  background: var(--orange);
  color: #120600;
  box-shadow: 0 14px 44px rgba(255, 106, 19, 0.16);
  transition: background 160ms ease, transform 160ms ease;
}

.primary-action:hover,
.primary-action:focus-visible { background: var(--orange-hot); transform: translateY(-2px); }

.hero-footnote {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 72px;
  color: #5f5b57;
  font-family: var(--data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hero-demo {
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: 10px;
}

.demo-glow {
  position: absolute;
  z-index: 0;
  top: 10%;
  left: 50%;
  width: 146%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 19, 0.22), rgba(255, 106, 19, 0.045) 46%, transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}

.phone {
  position: relative;
  z-index: 2;
  width: min(100%, 402px);
}

.phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 402 / 856;
  overflow: hidden;
  border: 6px solid #1a1918;
  border-radius: 47px;
  background: #080808;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 38px 90px rgba(0, 0, 0, 0.64),
    0 0 100px rgba(255, 106, 19, 0.12);
}

.phone-island {
  position: absolute;
  z-index: 12;
  top: 8px;
  left: 50%;
  width: 78px;
  height: 21px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #020202;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.phone-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: 0;
  touch-action: pan-y;
  background: #0c0806;
  isolation: isolate;
}

.phone-viewport-blank {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 38%),
    #050505;
}

.phone-viewport-blank > * {
  visibility: hidden !important;
  pointer-events: none !important;
}

.hero-demo-placeholder .app-tabbar,
.hero-demo-placeholder .demo-controls,
.hero-demo-placeholder .demo-note { display: none; }

.app-live-preview {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0c0806;
  opacity: 1;
  transform: none;
  transition: none;
  /* Permanently inert (src stays about:blank -- see site.js). Explicit on
     purpose: without this, a pointer landing here falls straight through
     the poster above it (also pointer-events, but the poster needs to
     stay hit-testable now that it's the drag surface) into this iframe,
     and events landing on an iframe never bubble back out to the parent
     document's listeners -- which is exactly what silently broke the
     poster drag the first time this was built. */
  pointer-events: none;
}

.app-live-preview.switching {
  opacity: 1;
}

.app-preview-poster {
  position: absolute;
  z-index: 11;
  inset: 0;
  overflow: hidden;
  background: #0c0806;
  opacity: 1;
  visibility: visible;
  /* auto, not none -- this is the drag surface now (see the pointerdown/
     pointermove handlers in site.js), not just a loading placeholder
     sitting in front of a live iframe. */
  pointer-events: auto;
  transition: opacity 120ms ease, visibility 120ms ease;
}

/* Two stacked layers, not one -- a real swipe shows the outgoing screen
   sliding away while the incoming one slides in from the other side at
   the same time, which a single <img> crossfading its own opacity can't
   do. The front layer sits at translateX(0); the back layer parks
   off-screen (left or right, whichever the next screen should enter
   from) until setPosterImage() animates both across at once. */
.poster-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 390px;
  max-width: 100%;
  height: 844px;
  max-height: 100%;
  object-fit: cover;
  transform: translateX(100%);
  transition: transform 430ms cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-user-drag: none;
  user-select: none;
}

/* While an actual pointer drag is live, the layers track the finger 1:1
   -- no transition, or the movement would lag behind the touch instead
   of following it. Restored the instant the drag ends (commit or
   snap-back), so that settle motion still gets the full eased slide. */
.poster-layer.dragging {
  transition: none;
}

.poster-layer-front {
  transform: translateX(0);
}

.app-preview-poster.ready {
  opacity: 0;
  visibility: hidden;
}

.app-preview-loading {
  position: absolute;
  z-index: 11;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: #0c0806;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 140ms ease;
}

.app-preview-loading img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  object-fit: contain;
}

.app-preview-loading span {
  color: #746d67;
  font-family: var(--data);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.app-preview-loading.ready {
  opacity: 0;
  visibility: hidden;
}

.capture-track {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.capture-screen {
  display: none;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #0c0806;
}

.capture-screen.active {
  display: block;
}

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

/* Retained temporarily as a source reference while the real capture
   gallery is reviewed. It never renders or enters the accessibility tree. */
.phone-track { display: none; }

.capture-tab-hotspots {
  position: absolute;
  z-index: 18;
  right: 10px;
  bottom: 6px;
  left: 10px;
  height: 59px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.capture-tab-hotspots button {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.capture-tab-hotspots button:focus-visible {
  outline: 0;
  background: radial-gradient(circle, rgba(255, 117, 18, 0.13), transparent 58%);
}

.app-screen {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #090909;
  color: #f7f4f0;
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.app-screen.active {
  display: block;
}

/* The source-of-truth Expo preview renders above these legacy reference
   nodes. They remain non-rendering until the old prototype markup is removed. */
.phone-viewport > .app-screen {
  display: none !important;
}

.app-status {
  position: relative;
  z-index: 5;
  height: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 18px 4px;
  color: #dedbd7;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8px;
  font-weight: 700;
}

.app-header {
  position: relative;
  z-index: 5;
  height: 47px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(8, 8, 8, 0.88);
  backdrop-filter: blur(14px);
}

.app-header.simple {
  grid-template-columns: 1fr auto;
}

.app-location,
.app-icon-button,
.app-text-button,
.compose-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.app-location {
  justify-self: start;
  padding: 7px 0;
  color: #d5d1cd;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.app-location span { margin-left: 2px; color: var(--orange); }

.app-wordmark {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.app-icon-button,
.compose-button {
  justify-self: end;
  padding: 0;
  color: var(--orange-hot);
  font-size: 20px;
  font-weight: 300;
}

.app-title {
  color: #f4f1ed;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.app-text-button,
.season-label {
  padding: 0;
  color: #8d8883;
  font-family: var(--data);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.map {
  position: absolute;
  inset: 81px 0 225px;
  overflow: hidden;
  background:
    linear-gradient(105deg, transparent 49.5%, rgba(255, 255, 255, 0.04) 50%, transparent 50.5%),
    #0d1110;
}

.map-grid {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 36px 36px;
  transform: rotate(-8deg) scale(1.2);
}

.map-road {
  position: absolute;
  height: 5px;
  background: #1b211f;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), inset 0 -1px rgba(255, 255, 255, 0.03);
}

.road-one { width: 135%; left: -20%; top: 25%; transform: rotate(16deg); }
.road-two { width: 120%; left: -12%; top: 62%; transform: rotate(-18deg); }
.road-three { width: 110%; left: 3%; top: 44%; transform: rotate(72deg); }

.map-court {
  position: absolute;
  width: 36px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  transform: rotate(-12deg);
}

.map-court::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.court-one { top: 14%; left: 10%; }
.court-two { bottom: 11%; right: 12%; transform: rotate(12deg); }

.map-total {
  position: absolute;
  top: 16px;
  left: 15px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.map-total strong {
  color: var(--orange-hot);
  font-family: var(--data);
  font-size: 22px;
  line-height: 1;
}

.map-total span,
.map-name {
  color: #777d79;
  font-family: var(--data);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.map-name { position: absolute; }
.map-name-one { top: 43%; left: 7%; }
.map-name-two { bottom: 17%; right: 8%; }

.gym-marker {
  position: absolute;
  z-index: 4;
  top: var(--y);
  left: var(--x);
  width: 37px;
  height: 37px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.marker-core {
  position: absolute;
  z-index: 2;
  inset: 7px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--tier), transparent 15%);
  border-radius: 50%;
  background: #101110;
  color: var(--tier);
  font-family: var(--data);
  font-size: 8px;
  font-weight: 900;
  box-shadow: 0 0 14px color-mix(in srgb, var(--tier), transparent 72%);
}

.marker-ring,
.marker-ring::after {
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, var(--tier), transparent 34%);
  border-radius: 50%;
  content: "";
  animation: map-pulse 2.8s ease-out infinite;
}

.marker-ring::after { inset: -5px; animation-delay: 0.8s; }
.gym-marker.active .marker-core { background: color-mix(in srgb, var(--tier), #0b0b0b 80%); transform: scale(1.08); }

@keyframes map-pulse {
  0% { transform: scale(0.72); opacity: 0.85; }
  75%, 100% { transform: scale(1.55); opacity: 0; }
}

.runs-drawer {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 56px;
  height: 169px;
  padding: 10px 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  background: linear-gradient(180deg, rgba(22, 19, 17, 0.94), #0d0c0b 76%);
  backdrop-filter: blur(20px);
}

.drawer-handle {
  width: 30px;
  height: 2px;
  margin: 0 auto 12px;
  background: #6e6863;
}

.drawer-heading,
.gym-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #77716c;
  font-family: var(--data);
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.drawer-heading span:last-child { color: var(--orange-hot); }

.selected-gym {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 16px;
}

.selected-gym > div:first-child { display: grid; gap: 5px; }
.selected-gym > div:first-child strong { font-size: 25px; line-height: 1; letter-spacing: -0.055em; }
.selected-gym > div:first-child span { color: #98918b; font-size: 8px; }
.selected-gym > div:first-child b { color: var(--white); }

.selected-ovr { display: grid; justify-items: end; }
.selected-ovr strong { color: #c77a3b; font-family: var(--data); font-size: 29px; line-height: 0.9; }
.selected-ovr span { margin-top: 4px; color: #77716c; font-family: var(--data); font-size: 6px; font-weight: 800; letter-spacing: 0.08em; }

.gym-state {
  justify-content: flex-start;
  gap: 6px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  letter-spacing: 0.07em;
}

.gym-state span:last-child { margin-left: auto; color: #5d5854; letter-spacing: 0; text-transform: none; }
.state-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgba(255, 106, 19, 0.7); }

.scout-screen { background: #0a0909; }

.scout-card {
  position: relative;
  height: 380px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    #12100f;
  background-size: 34px 34px;
}

.scout-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(transparent, #0b0a09 90%);
}

.player-photo {
  position: absolute;
  top: 54px;
  left: 50%;
  width: 180px;
  height: 245px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  color: #2b2826;
  font-size: 94px;
  font-weight: 900;
  letter-spacing: -0.11em;
}

.player-shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 160px;
  height: 205px;
  transform: translateX(-50%);
  border-radius: 46% 46% 10% 10%;
  background: linear-gradient(145deg, #23201e, #10100f 68%);
  clip-path: polygon(30% 0, 70% 0, 80% 17%, 100% 34%, 90% 100%, 10% 100%, 0 34%, 20% 17%);
}

.player-overall {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 16px;
  display: grid;
  justify-items: end;
}

.player-overall span { color: #77716c; font-family: var(--data); font-size: 7px; font-weight: 900; letter-spacing: 0.1em; }
.player-overall strong { color: #f4b83f; font-family: var(--data); font-size: 42px; line-height: 0.9; letter-spacing: -0.06em; text-shadow: 0 0 24px rgba(244, 184, 63, 0.2); }

.player-identity {
  position: absolute;
  z-index: 4;
  left: 17px;
  bottom: 72px;
}

.player-identity p { margin: 0 0 6px; color: var(--orange-hot); font-family: var(--data); font-size: 7px; font-weight: 900; letter-spacing: 0.1em; }
.player-identity h2 { margin: 0; font-size: 32px; line-height: 0.88; letter-spacing: -0.065em; }

.player-facts {
  position: absolute;
  z-index: 4;
  left: 17px;
  right: 17px;
  bottom: 17px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 11px;
}

.player-facts span,
.season-line div { display: grid; gap: 4px; font-family: var(--data); font-size: 11px; font-weight: 900; }
.player-facts small,
.season-line span,
.player-gym small { color: #6f6964; font-size: 6px; font-weight: 900; letter-spacing: 0.11em; }

.player-gym {
  position: absolute;
  z-index: 4;
  right: 17px;
  bottom: 76px;
  display: grid;
  justify-items: end;
  gap: 4px;
  font-family: var(--data);
}

.player-gym strong { font-size: 10px; }

.season-line {
  height: 61px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 0 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.season-line div { justify-items: center; color: #e8e3df; }
.season-line div:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.07); }

.scout-actions {
  height: 54px;
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  align-items: center;
  padding: 0 16px;
}

.scout-actions button {
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8px;
  font-weight: 900;
  cursor: pointer;
}

.scout-actions button:first-child { color: var(--orange-hot); text-align: left; }
.scout-actions button:last-child { color: #b0aaa5; text-align: right; }
.scout-actions span { color: var(--orange); margin-left: 5px; }

.messages-screen { background: #0a0909; }

.message-search {
  width: calc(100% - 30px);
  height: 32px;
  margin: 13px 15px 8px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  color: #74706c;
  text-align: left;
  font-size: 9px;
  cursor: text;
}

.message-list { padding: 4px 15px 0; }

.message-row {
  position: relative;
  width: 100%;
  min-height: 69px;
  display: grid;
  grid-template-columns: 41px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.avatar,
.leader-avatar {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #22201e;
  color: #bcb6b1;
  font-family: var(--data);
  font-size: 8px;
  font-weight: 900;
}

.avatar.orange { background: #2d1910; color: var(--orange-hot); }
.avatar.silver { background: #202429; color: #c8d0d8; }
.avatar.gold { background: #292113; color: #f4b83f; }
.avatar.dark { background: #171717; color: #8f8a86; }

.message-copy { display: grid; gap: 5px; min-width: 0; }
.message-copy strong { font-size: 10px; letter-spacing: -0.01em; }
.message-copy span { overflow: hidden; color: #77716c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.message-row.unread .message-copy strong { color: #fff; }
.message-row.unread .message-copy span { color: #aaa49e; }

.message-meta { align-self: stretch; display: grid; align-content: center; justify-items: end; gap: 7px; }
.message-meta small { color: #5e5955; font-family: var(--data); font-size: 6px; }
.message-meta b { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 9px rgba(255, 106, 19, 0.7); }
.message-hint { margin: 23px 0 0; color: #524e4a; text-align: center; font-size: 8px; }

.compete-screen { background: radial-gradient(circle at 50% 24%, rgba(255, 106, 19, 0.08), transparent 38%), #090909; }

.race-heading { padding: 28px 17px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.race-heading p { margin: 0 0 8px; color: var(--orange-hot); font-family: var(--data); font-size: 6px; font-weight: 900; letter-spacing: 0.13em; }
.race-heading h2 { margin: 0; font-size: 32px; line-height: 1; letter-spacing: -0.055em; }
.race-heading span { display: block; margin-top: 7px; color: #716c68; font-size: 7px; }

.leader {
  min-height: 86px;
  display: grid;
  grid-template-columns: 24px 40px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 106, 19, 0.28);
  background: linear-gradient(90deg, rgba(255, 106, 19, 0.11), transparent 75%);
}

.leader-rank { color: var(--orange-hot); font-family: var(--data); font-size: 9px; font-weight: 900; }
.leader-avatar { background: #3a2012; color: var(--orange-hot); }
.leader > div { display: grid; gap: 5px; }
.leader > div strong { font-family: var(--data); font-size: 9px; letter-spacing: 0.025em; }
.leader > div small { color: #77716c; font-family: var(--data); font-size: 5.5px; font-weight: 800; letter-spacing: 0.06em; }
.leader-change { color: var(--green); font-family: var(--data); font-size: 8px; font-weight: 900; }

.standings-list { margin: 0; padding: 0 16px; list-style: none; }
.standings-list li { min-height: 48px; display: grid; grid-template-columns: 26px 1fr 23px 25px; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.standings-list span { color: #615c57; font-family: var(--data); font-size: 7px; font-weight: 900; }
.standings-list strong { font-size: 8.5px; }
.standings-list small { color: #aaa39d; font-family: var(--data); font-size: 8px; font-weight: 900; }
.standings-list em { color: #6b6662; font-family: var(--data); font-size: 6px; font-style: normal; font-weight: 900; text-align: right; }
.standings-list em.up { color: var(--green); }
.standings-list em.down { color: var(--red); }

.your-rank { margin: 20px 16px 0; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.your-rank span { color: #79736e; font-family: var(--data); font-size: 6px; font-weight: 900; letter-spacing: 0.11em; }
.your-rank strong { grid-row: span 2; color: var(--orange-hot); font-family: var(--data); font-size: 30px; line-height: 1; }
.your-rank small { margin-top: 4px; color: var(--green); font-family: var(--data); font-size: 6px; font-weight: 900; }

.app-tabbar {
  position: absolute;
  z-index: 15;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 10, 10, 0.88);
  backdrop-filter: blur(18px);
}

.phone-frame > .app-tabbar { display: none; }

.app-tabbar button {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.app-tabbar button::after {
  content: "";
  position: absolute;
  bottom: 7px;
  width: 14px;
  height: 1px;
  background: transparent;
  transition: background 180ms ease, width 180ms ease;
}

.app-tabbar button.active::after { width: 20px; background: var(--orange); }

.scout-actions button.confirmed { color: #c86f2f; }

.tab-icon { position: relative; width: 18px; height: 18px; opacity: 0.48; transition: opacity 180ms ease, transform 180ms ease; }
.app-tabbar button.active .tab-icon { opacity: 1; transform: translateY(-1px); }

.runs-icon::before,
.runs-icon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.runs-icon::before { inset: 4px; border: 1.5px solid currentColor; }
.runs-icon::after { width: 4px; height: 4px; top: 7px; left: 7px; background: var(--orange); }

.scout-icon { border: 1.5px solid currentColor; transform: rotate(45deg) scale(0.62); }
.app-tabbar button.active .scout-icon { transform: rotate(45deg) scale(0.68) translate(-1px, -1px); }
.scout-icon::after { content: ""; position: absolute; inset: 4px; border: 1px solid var(--orange); }

.message-icon::before { content: ""; position: absolute; inset: 3px 2px 5px; border: 1.5px solid currentColor; border-radius: 4px; }
.message-icon::after { content: ""; position: absolute; left: 5px; bottom: 3px; width: 5px; height: 5px; border-left: 1.5px solid currentColor; transform: skew(-25deg); }

.compete-icon::before { content: ""; position: absolute; left: 5px; right: 5px; top: 3px; height: 8px; border: 1.5px solid currentColor; border-top: 0; clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); }
.compete-icon::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 3px; height: 5px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }

.you-icon::before { content: ""; position: absolute; top: 1px; left: 6px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }
.you-icon::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 1px; height: 7px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 7px 7px 0 0; }

.demo-controls {
  position: relative;
  z-index: 3;
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.demo-controls button {
  position: relative;
  min-height: 50px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5f5a56;
  font-family: var(--data);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 180ms ease;
}

.demo-controls button::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 100%;
  height: 2px;
  background: var(--orange);
  transition: right 200ms ease;
}

.demo-controls button span { display: block; margin-bottom: 4px; font-size: 6px; }
.demo-controls button.active { color: var(--white); }
.demo-controls button.active::before { right: 0; }

.demo-note {
  position: relative;
  z-index: 3;
  margin: 12px 0 0;
  color: #77716d;
  font-size: 10px;
}

.demo-note b { margin-left: 5px; color: #55514d; font-family: var(--data); font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; }

.method,
.competition,
.join-section,
.site-footer {
  width: min(100%, var(--page-max));
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.method {
  min-height: 100vh;
  padding-top: clamp(110px, 14vw, 210px);
  padding-bottom: clamp(90px, 12vw, 180px);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(48px, 10vw, 160px);
  border-top: 1px solid var(--line);
}

.section-intro h2,
.competition h2,
.join-section h2 {
  font-size: clamp(62px, 7vw, 108px);
  line-height: 0.88;
}

.typewriter-heading {
  display: flex;
  align-items: flex-end;
  min-height: 0.9em;
  min-width: 5.15ch;
  white-space: nowrap;
}

.typewriter-heading [data-loop-word] {
  display: inline-block;
}

.typewriter-caret {
  width: 0.055em;
  height: 0.78em;
  margin: 0 0 0.055em 0.09em;
  background: var(--orange-hot);
  box-shadow: 0 0 20px rgba(255, 126, 48, 0.25);
  animation: typewriter-caret-blink 820ms steps(1, end) infinite;
}

@keyframes typewriter-caret-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.method-rows { align-self: center; }

.method-row {
  display: grid;
  grid-template-columns: 36px minmax(165px, 215px) minmax(220px, 315px);
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding: 32px 12px;
  border-top: 1px solid var(--line);
}

.method-row:last-child { border-bottom: 1px solid var(--line); }
.method-number {
  color: var(--orange-hot);
  font-family: var(--data);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.method-row h3 {
  margin: 0;
  text-align: left;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.method-row p,
.competition-copy > p:last-child {
  color: var(--muted-bright);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.method-row p {
  margin: 0;
  text-align: left;
}

.competition {
  min-height: 86vh;
  padding-top: clamp(100px, 13vw, 190px);
  padding-bottom: clamp(100px, 13vw, 190px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(60px, 10vw, 170px);
  border-top: 1px solid var(--line);
}

.competition-copy > p:last-child {
  max-width: 480px;
  margin: 30px 0 0;
}

.prize-ledger { border-top: 1px solid var(--line); }
.ledger-heading,
.prize-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.ledger-heading {
  grid-template-columns: 1fr;
  min-height: 45px;
  color: var(--muted);
  font-family: var(--data);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.prize-row { min-height: 88px; }
.prize-row span { color: var(--orange-hot); font-family: var(--data); font-size: 9px; font-weight: 900; }
.prize-row strong { font-size: clamp(19px, 2vw, 27px); letter-spacing: -0.035em; }
.prize-row em { color: var(--muted); font-size: 12px; font-style: normal; }
.prize-ledger > p { margin: 16px 0 0; color: #7f7974; font-size: 10px; line-height: 1.5; }

.join-section {
  min-height: 76vh;
  padding-top: clamp(100px, 12vw, 170px);
  padding-bottom: clamp(90px, 12vw, 160px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(60px, 10vw, 170px);
  border-top: 1px solid var(--line);
}

.waitlist label {
  display: block;
  margin-bottom: 18px;
  color: #77716c;
  font-family: var(--data);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.waitlist-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
}

.waitlist input {
  min-width: 0;
  height: 62px;
  padding: 0 16px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--white);
  font-size: clamp(17px, 2vw, 24px);
  letter-spacing: -0.035em;
}

.waitlist input::placeholder { color: #484441; }

.waitlist button {
  align-self: center;
  height: 40px;
  padding: 0 0 0 20px;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.waitlist button span { margin-left: 8px; color: var(--orange); font-size: 15px; }
.waitlist button:disabled { opacity: 0.5; cursor: default; }

.form-message {
  min-height: 20px;
  margin: 14px 0 0;
  color: #5f5a56;
  font-family: var(--data);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.form-message.error { color: var(--red); }
.form-message.success { color: var(--green); }

.site-footer {
  min-height: 112px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--line);
}

.footer-brand { font-size: 16px; }
.site-footer p { margin: 0; color: #5c5753; font-family: var(--data); font-size: 8px; font-weight: 800; letter-spacing: 0.1em; }
.site-footer p:last-child { justify-self: end; }

.reveal {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(46px) scale(0.985);
  transition:
    opacity 820ms ease,
    filter 680ms ease,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.visible { opacity: 1; filter: none; transform: none; }

.method-row:nth-child(2) { --reveal-delay: 80ms; }
.method-row:nth-child(3) { --reveal-delay: 160ms; }

:focus-visible {
  outline: 2px solid var(--orange-hot);
  outline-offset: 4px;
}

@media (max-width: 1040px) {
  .hero { grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; }
  .hero h1 { font-size: clamp(66px, 9.5vw, 105px); }
}

@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 132px;
    text-align: center;
  }
  .hero-copy {
    width: 100%;
    justify-self: stretch;
    display: grid;
    justify-items: center;
  }
  .hero-copy > .eyebrow,
  .hero h1,
  .hero-actions,
  .hero-footnote { width: 100%; }
  .hero-copy > .eyebrow,
  .hero h1,
  .hero-summary { text-align: center; }
  .hero-summary {
    width: min(100%, 330px);
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions,
  .hero-footnote { justify-content: center; }
  .hero-footnote { margin-top: 48px; }
  .hero-demo { margin-top: 24px; }
  .phone { width: min(calc(100vw - 12px), 402px); }
  .method,
  .competition,
  .join-section { grid-template-columns: 1fr; }
  .method { gap: 70px; }
  .competition,
  .join-section { gap: 72px; }
  .section-intro,
  .competition-copy,
  .join-copy { max-width: 620px; }
}

@media (max-width: 560px) {
  .site-header { height: 64px; }
  .nav-cta { font-size: 11px; }
  .brand { font-size: 17px; }
  .brand img { width: 30px; height: 30px; }
  /* padding-top pushed well past the 820px tier's 132px on purpose --
     more breathing room above PICKUP, RANKED so the headline is the
     clear focal point on a phone screen, not competing with anything
     else in the first viewport. */
  .hero { padding-top: 220px; padding-bottom: 84px; }
  .hero h1 { font-size: clamp(56px, 18vw, 82px); line-height: 0.87; }
  .hero h1 span {
    padding-left: 0.04em;
    padding-right: 0.04em;
    letter-spacing: -0.035em;
  }
  .hero-copy > .eyebrow { font-size: 11px; }
  .hero-summary { max-width: 310px; margin-top: 24px; font-size: 16px; }
  .hero-actions { flex-direction: column; gap: 11px; margin-top: 31px; }
  .primary-action { width: min(100%, 260px); justify-content: center; }
  .hero-footnote { gap: 7px; font-size: 7px; }
  /* Pulled up from an earlier 290px -- that pushed the phone fully below
     the fold, which read as too much dead space. Still enough gap to keep
     the headline as the focus of the first screen without it fully
     disappearing. */
  .hero-demo {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 190px;
  }
  /* Smaller than the 820px tier's phone on purpose -- at that size, plus
     the tab-control row and caption underneath it, the whole demo section
     ran taller than a phone viewport, so seeing all of it meant scrolling
     within a section that reads as one self-contained unit. This is the
     one deliberately mobile-only size in the whole file; desktop keeps the
     larger phone from the 820px tier above. */
  .phone {
    width: min(58vw, 240px);
    margin-inline: auto;
  }
  .demo-controls { width: calc(100vw - (var(--page-pad) * 2)); max-width: 400px; margin-top: 18px; }
  .demo-controls button { font-size: 6px; min-height: 40px; }
  .method,
  .competition,
  .join-section { min-height: auto; }
  .section-intro h2,
  .competition h2,
  .join-section h2 { font-size: clamp(54px, 17vw, 78px); }
  .method-row { grid-template-columns: 36px 1fr; justify-content: stretch; gap: 12px; padding: 27px 0; }
  .method-row p { grid-column: 2; font-size: 13px; }
  .method-row h3 { font-size: 22px; }
  .prize-row { grid-template-columns: 35px 1fr; min-height: 78px; }
  .prize-row em { grid-column: 2; margin-top: -22px; }
  .waitlist-line { grid-template-columns: 1fr; }
  .waitlist button { justify-self: start; padding-left: 0; }
  .site-footer { grid-template-columns: 1fr auto; padding-top: 26px; padding-bottom: 26px; }
  .site-footer p:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; filter: none; transform: none; }
}