/* HUDDL Play landing page: eight pages left to right over one panorama.
   Colours are the app's own: theme/colors.ts (brand), lib/sportArt.ts (card
   families), lib/exploreActions.ts (Explore tints), lib/calendarHeat.ts (Biz
   calendar), components/booking/KeyCard.tsx (HUDDL Pass). */

:root {
  --sheen: #96D700;
  --sheen-dark: #6FA000;
  --midnight: #003865;
  --midnight-deep: #002845;
  --blue-bright: #2E90D9;
  --icon-top: #0065B5;
  --icon-bottom: #003F71;
  --ink: #1F1F21;
  --muted: #6C7079;
  --faint: #A2A6AE;
  --hairline: #EEEFF2;
  --surface-alt: #F6F7F9;

  --r-btn: 16px;
  --r-card: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --slide: cubic-bezier(.65, 0, .25, 1);

  --nav-h: 72px;
  --peek: 72px;
  /* The panorama: each page's art is --seg wide and starts --lead from the
     left, so the previous page's art stays in view on the left. */
  --seg: 60vw;
  --lead: 40vw;
  --page: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.5;
  color: #fff; background: var(--icon-bottom);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--sheen); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -64px; z-index: 100; background: #fff; color: var(--ink); padding: 8px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 16px; }

h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
.lede { font-size: clamp(16px, 1.25vw, 18px); color: rgba(255,255,255,.78); max-width: 32em; margin-top: 20px; }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sheen); margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 10px; height: 12px; background: var(--sheen); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tri { display: inline-block; width: 10px; height: 12px; background: var(--sheen); clip-path: polygon(0 0, 100% 50%, 0 100%); flex: none; }
.example-note { font-size: 12px; color: rgba(255,255,255,.5); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--r-btn); cursor: pointer;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em; text-decoration: none;
  transition: transform .2s var(--ease), background-color .2s, box-shadow .2s;
}
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn:active { transform: translateY(1px); }
.btn-go { background: var(--sheen); color: var(--ink); }
.btn-go:hover { background: #A6E61A; }
.btn-glass { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.btn-glass:hover { background: rgba(255,255,255,.18); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── Nav ─────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--nav-h);
  display: flex; align-items: center; gap: 24px; padding: 0 clamp(16px, 3vw, 40px);
}
.nav-logo { width: 124px; flex: none; }
.nav-logo img { width: 100%; height: auto; }
.tabs { display: flex; gap: 4px; margin: 0 auto; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.18); backdrop-filter: blur(10px); }
.tabs button {
  border: 0; background: none; cursor: pointer; color: rgba(255,255,255,.7);
  font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: 10px;
  transition: color .2s, background-color .2s;
}
.tabs button:hover { color: #fff; }
.tabs button[aria-current="true"] { color: var(--ink); background: #fff; }
.nav-cta { flex: none; display: flex; gap: 8px; }
.nav-cta .btn-glass { background: rgba(0,20,40,.55); backdrop-filter: blur(10px); }

/* ── Panorama ────────────────────────────────────── */
.pano { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.pano-track {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(var(--seg) * 9);
  /* Where the panorama sits for the current page; script.js sets --pan. */
  transform: translate3d(var(--pan, -20vw), 0, 0);
  transition: transform 1.5s var(--slide);
  /* One gradient across every page, so the colour flows as it drifts. */
  background: linear-gradient(90deg,
    #0062AF 0%, #004F8E 10%, #063056 21%, #04203A 32%, #07444C 43%,
    #0B2540 54%, #0E1218 66%, #002845 77%, #00508F 90%, #0065B5 100%);
}
.seg { position: absolute; top: 0; bottom: 0; width: var(--seg); overflow: hidden; }
.seg[data-seg="0"] { left: 0; width: calc(var(--seg) * 2); }
.seg[data-seg="1"] { left: calc(var(--seg) * 2); }
.seg[data-seg="2"] { left: calc(var(--seg) * 3); }
.seg[data-seg="3"] { left: calc(var(--seg) * 4); }
.seg[data-seg="4"] { left: calc(var(--seg) * 5); }
.seg[data-seg="5"] { left: calc(var(--seg) * 6); }
.seg[data-seg="6"] { left: calc(var(--seg) * 7); }
.seg[data-seg="7"] { left: calc(var(--seg) * 8); }
.seg:not(.live) * { animation-play-state: paused !important; }

/* Page 1: card wall */
.wall {
  position: absolute; top: -40%; left: 4%; width: 120%; height: 190%;
  display: grid; grid-template-columns: repeat(6, 380px); gap: 28px;
  transform: rotate(-12deg); transform-origin: 0 0;
}
.wall-col { display: flex; flex-direction: column; gap: 28px; animation: drift 80s linear infinite; will-change: transform; }
.wall-col:nth-child(2n) { animation-direction: reverse; animation-duration: 92s; margin-top: -160px; }
.wall-col:nth-child(3n) { animation-duration: 104s; }
@keyframes drift { to { transform: translateY(-50%); } }
/* ?calm: the cards keep to the right half, drift slowly, and sit at three depths. */
html.calm .wall { left: 55%; grid-template-columns: repeat(3, 380px); gap: 44px; }
html.calm .wall-col { gap: 44px; animation-duration: 150s; }
html.calm .wall-col:nth-child(2n) { animation-duration: 170s; margin-top: -220px; }
html.calm .wall .pc { transition: none; }
html.calm .wall .pc.near { transform: scale(1.06); box-shadow: 0 30px 60px -18px rgba(0,0,0,.6); }
html.calm .wall .pc.mid { opacity: .62; filter: blur(1.2px) saturate(.85); }
html.calm .wall .pc.far { opacity: .32; filter: blur(3px) saturate(.75); transform: scale(.93); }
/* Calm: the previous page's art recedes once a page settles, so the words need
   no blur (it darkens at the screen edge) and only a light shade. */
/* Each slice's right edge sits 40vw from the left of the screen when it is the
   previous page, so its art fades out going right from the screen's left edge
   (100% - 40vw) to 25vw in. --keep runs 1 (all shown, while sliding) to 0. */
@property --keep { syntax: "<number>"; inherits: false; initial-value: 1; }
html.calm .seg {
  --keep: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40vw), rgba(0,0,0,var(--keep)) calc(100% - 15vw));
  mask-image: linear-gradient(90deg, #000 calc(100% - 40vw), rgba(0,0,0,var(--keep)) calc(100% - 15vw));
  transition: --keep 1.2s ease;
}
html.calm .seg.faded { --keep: 0; }
html.calm .dim-side {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(90deg, rgba(0,20,40,.5) 0%, rgba(0,20,40,.28) 40%, rgba(0,20,40,0) 64%);
}

/* Page 2: a night map with places lighting up */
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .street { stroke: rgba(255,255,255,.07); stroke-width: 2; }
.map .avenue { stroke: rgba(255,255,255,.12); stroke-width: 5; }
.map .block { fill: rgba(255,255,255,.025); }
.map .pin { transform-box: fill-box; transform-origin: 50% 100%; animation: pin 6s var(--ease) infinite both; }
.map .ripple { transform-box: fill-box; transform-origin: center; fill: none; stroke-width: 2; animation: ripple 6s ease-out infinite both; }
.map .me-ring { transform-box: fill-box; transform-origin: center; animation: sweep 4s ease-out infinite; }
@keyframes pin { 0%, 8% { transform: translateY(-14px) scale(0); opacity: 0; } 16% { transform: none; opacity: 1; } 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes ripple { 0%, 14% { transform: scale(.2); opacity: 0; } 18% { opacity: .9; } 40%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes sweep { from { transform: scale(.3); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }

/* Page 3: courts drawing themselves */
.courts { position: absolute; inset: 0; }
.courts svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.courts .ct *, .courts .floor {
  fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 9s var(--ease) infinite; animation-delay: var(--d, 0s);
}
.courts .ct-green * { stroke: rgba(150,215,0,.3); }
.courts .ct-blue * { stroke: rgba(46,144,217,.38); }
.courts .floor { stroke: rgba(255,255,255,.08); stroke-width: 1; }
@keyframes draw { 0% { stroke-dashoffset: 900; } 40%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -900; } }

/* Page 4: one week, slots filling */
.week { position: absolute; inset: 88px 32px 96px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.week-day { display: flex; flex-direction: column; gap: 6px; }
.week-day > b { font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.3); text-align: center; padding-bottom: 6px; }
.slot { flex: 1; border-radius: 10px; background: rgba(255,255,255,.03); position: relative; overflow: hidden; }
.slot.on { background: rgba(14,154,167,.32); animation: book 7s var(--ease) infinite both; }
.slot.on small { position: absolute; left: 8px; top: 6px; right: 6px; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.72); line-height: 1.2; }
@keyframes book { 0%, 6% { opacity: 0; transform: scale(.85); } 14%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* Page 5: the Biz calendar, months going by */
.month { position: absolute; top: 120px; bottom: 150px; left: 20%; right: 40px; display: flex; flex-direction: column; }
.month-name { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; color: rgba(255,255,255,.22); margin-bottom: 12px; transition: opacity .6s; }
.month-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 8px; }
.month-grid span {
  border-radius: 12px; background: var(--f, rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1.5px var(--b, transparent);
  color: var(--x, rgba(255,255,255,.3)); font-size: 12px; font-weight: 700; padding: 6px 8px; opacity: .45;
  transition: background-color 1.4s, box-shadow 1.4s, color 1.4s;
}
.month-grid span.blank { background: none; box-shadow: none; }

/* Page 6: a reel of highlights scrolling up */
.reel { position: absolute; top: -20%; left: 20%; width: 110%; height: 180%; display: grid; grid-template-columns: repeat(4, 180px); gap: 16px; transform: rotate(-6deg); }
.reel-col { display: flex; flex-direction: column; gap: 16px; animation: drift 60s linear infinite; }
.reel-col:nth-child(2n) { animation-duration: 74s; margin-top: -120px; }
.clip { position: relative; flex: none; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, var(--a), var(--c)); }
.clip svg.glyph { position: absolute; width: 60%; right: -10%; top: 18%; fill: rgba(255,255,255,.12); }
.clip .mini-basket { position: absolute; left: 10px; bottom: 12px; display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 9px; background: var(--sheen); font-size: 9.5px; font-weight: 700; color: #fff; }
.clip .mini-basket svg { width: 11px; height: 11px; fill: #fff; }
.clip .mini-lines { position: absolute; left: 10px; bottom: 46px; width: 60%; }
.clip .mini-lines i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.35); margin-top: 5px; }
.clip .mini-lines i + i { width: 70%; background: rgba(255,255,255,.2); }

/* Page 7: passes floating by */
.stubs { position: absolute; inset: 0; }
.stub {
  position: absolute; width: 220px; padding: 16px; border-radius: 18px;
  background: linear-gradient(135deg, #003865, #002845 60%, #001A2E); box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  animation: float 26s linear infinite;
}
.stub b { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.7); }
.stub b i { width: 16px; height: 16px; border-radius: 5px; background: #fff; }
.stub span { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.18); margin-top: 12px; width: 80%; }
.stub span + span { width: 55%; margin-top: 8px; }
.stub em { display: block; margin-top: 14px; height: 52px; border-radius: 10px; background: rgba(255,255,255,.92); }
@keyframes float { from { transform: translate(0, 110vh) rotate(var(--r, -8deg)); } to { transform: translate(-30px, -60vh) rotate(var(--r, -8deg)); } }

/* Page 8: the play mark, drifting */
.marks { position: absolute; inset: 0; }
.marks i { position: absolute; bottom: 0; width: var(--s); height: calc(var(--s) * 1.15); background: rgba(150,215,0,var(--o)); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: rise var(--d) linear infinite; animation-delay: var(--w); }
@keyframes rise { from { transform: translateY(20vh) rotate(0deg); } to { transform: translateY(-120vh) rotate(90deg); } }

/* ── Player card (components/PlayerCard.tsx), sized by its own width ── */
.pc {
  --a: #0B3A6B; --b: #062A4A; --c: #04203A;
  container-type: inline-size; position: relative; overflow: hidden;
  /* Padding and corners in %, not cqw: a container can't size itself in its
     own units (cqw fell back to the window and pushed everything down). */
  aspect-ratio: 1.62; border-radius: 5.7% / 9.3%; padding: 4.6%;
  background: linear-gradient(135deg, var(--a), var(--b) 52%, var(--c)); color: #fff;
  display: flex; flex-direction: column;
}

.pc[data-fam="racquet"], .pc[data-fam="other"] { --a: #0B3A6B; --b: #062A4A; --c: #04203A; }
.pc[data-fam="court"] { --a: #7A2E0E; --b: #4A1D0A; --c: #2B1206; }
.pc[data-fam="field"] { --a: #0E5A36; --b: #0A3D25; --c: #062717; }
.pc[data-fam="cue"] { --a: #1E4D2B; --b: #123520; --c: #0A2014; }
.pc[data-fam="water"] { --a: #0A5A7A; --b: #073E57; --c: #042A3B; }
.pc[data-fam="endurance"] { --a: #7A5A0E; --b: #4F3A08; --c: #2E2205; }
.pc[data-fam="combat"] { --a: #6B0F1A; --b: #470A12; --c: #2A060B; }
.pc[data-fam="studio"] { --a: #5B2A7A; --b: #3C1C52; --c: #241031; }
.pc[data-fam="outdoor"] { --a: #3F5A1E; --b: #2A3D14; --c: #18240B; }
.pc[data-fam="mind"] { --a: #2B2F6B; --b: #1D2049; --c: #11132B; }
.pc .arc { position: absolute; border-radius: 50%; border: .6cqw solid rgba(255,255,255,.07); pointer-events: none; }
.pc .arc1 { width: 68.6cqw; height: 68.6cqw; right: -20cqw; top: -11.4cqw; }
.pc .arc2 { width: 42.9cqw; height: 42.9cqw; right: -8.6cqw; top: 0; border-color: rgba(255,255,255,.06); }
.pc .wm { position: absolute; width: 45cqw; height: 45cqw; right: -1.7cqw; bottom: -5.1cqw; fill: rgba(255,255,255,.11); }
.pc-top { position: relative; display: flex; align-items: center; gap: 3.4cqw; }
.pc .av {
  width: 13.1cqw; height: 13.1cqw; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: .43cqw solid rgba(255,255,255,.45); background: rgba(255,255,255,.1);
  font-size: 5cqw; font-weight: 700; color: #fff;
}
.pc .who { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pc .who b { font-size: 4.6cqw; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .who small { font-size: 3.4cqw; color: rgba(255,255,255,.78); }
.pc .tier { display: inline-flex; align-items: center; gap: .9cqw; padding: 1.15cqw 2.6cqw; border-radius: 99px; background: #fff; color: var(--midnight); font-size: 2.9cqw; font-weight: 600; white-space: nowrap; }
.pc .tier svg { width: 3.4cqw; height: 3.4cqw; fill: none; stroke: var(--midnight); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pc-sport { position: relative; display: flex; align-items: center; gap: 2cqw; margin-top: 3.4cqw; }
.pc .sp { font-size: 3.15cqw; font-weight: 700; letter-spacing: .11em; color: var(--sheen); }
.pc-sport i { width: .9cqw; height: .9cqw; border-radius: 50%; background: rgba(255,255,255,.55); }
.pc .sk { font-size: 3.4cqw; font-weight: 500; }
.pc hr { position: relative; border: 0; height: 1px; background: rgba(255,255,255,.16); margin: 3.4cqw 0; }
.pc-stats { position: relative; display: flex; }
.pc-stat { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.pc-stat b { font-size: 6.3cqw; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.pc-stat:first-child b { color: var(--sheen); }
.pc-stat small { font-size: 3.15cqw; color: rgba(255,255,255,.78); }
.pc .flip-btn {
  position: absolute; right: 2.4cqw; bottom: 2.4cqw; width: 12cqw; height: 12cqw; border: 0; padding: 0; background: none;
  display: grid; place-items: center; cursor: pointer; color: rgba(255,255,255,.78);
}
.pc .flip-btn svg { width: 5.7cqw; height: 5.7cqw; fill: currentColor; transition: transform .4s var(--ease); }
.pc .flip-btn:hover svg { transform: rotate(-30deg); }
.pc-back .flip-btn { top: 2.4cqw; bottom: auto; }
.pc-back::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.pc-back > * { position: relative; }
.pc-back > .flip-btn { position: absolute; }
.pc .over { font-size: 2.6cqw; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.55); }
.pc .bio { font-size: 3.9cqw; font-weight: 500; line-height: 1.4; margin-top: 2.3cqw; max-width: 88%; }
.pc .ach { margin-top: 1.4cqw; display: grid; gap: 1.4cqw; }
.pc .ach li { display: flex; align-items: center; gap: 2cqw; font-size: 3.6cqw; font-weight: 500; }
.pc .ach svg { width: 3.4cqw; height: 3.4cqw; fill: var(--sheen); flex: none; }

/* ── Pages ────────────────────────────────────────── */
.pages { position: fixed; inset: 0; z-index: 10; overflow: hidden; }
.pages-track { display: flex; height: 100%; width: 800vw; transform: translate3d(calc(var(--page) * -100vw), 0, 0); transition: transform 1s var(--slide); }
.page { position: relative; flex: none; width: 100vw; height: 100%; overflow: hidden; }
/* Readability over the moving art. While pages slide, the whole screen is
   dimmed evenly so no edge travels across it; once a page settles, the right
   side clears and the left keeps its shade, with a touch of blur behind it. */
.dim { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.dim i { position: absolute; inset: 0; transition: opacity .7s ease; }
.dim-even { background: rgba(0,20,40,.6); opacity: 0; }
.dim-side {
  background: linear-gradient(90deg, rgba(0,20,40,.88) 0%, rgba(0,20,40,.74) 32%, rgba(0,20,40,.28) 50%, rgba(0,20,40,0) 60%);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 16%, rgba(0,0,0,.45) 26%, transparent 38%);
  mask-image: linear-gradient(90deg, #000 0%, #000 16%, rgba(0,0,0,.45) 26%, transparent 38%);
}
.dim.moving .dim-even { opacity: 1; }
.dim.moving .dim-side { opacity: 0; }
.page-inner { position: relative; height: 100%; max-width: 1440px; margin: 0 auto; padding: calc(var(--nav-h) + 24px) clamp(120px, 10vw, 150px) calc(var(--peek) + 72px) clamp(16px, 4vw, 56px); display: flex; align-items: center; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.copy { max-width: 560px; }
#biz h2 { font-size: clamp(32px, 3.6vw, 50px); }
.visual { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page .copy > *, .page .visual { transition: transform .9s var(--ease), opacity .9s var(--ease); }
.page:not(.active) .copy > * { opacity: 0; transform: translateX(40px); }
.page:not(.active) .visual { opacity: 0; transform: translateX(80px); }
.page.active .copy > :nth-child(2) { transition-delay: .06s; }
.page.active .copy > :nth-child(3) { transition-delay: .12s; }
.page.active .copy > :nth-child(4) { transition-delay: .18s; }
.page.active .copy > :nth-child(5) { transition-delay: .24s; }
.page.active .visual { transition-delay: .2s; }

/* 1 · Home */
.copy-hero { max-width: 640px; }
.soon-label { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.store {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 12px;
  /* Glass, not the stores' black badges: Apple and Google allow their
     official badges only once the app is listed (Part 18.6). */
  border-radius: 12px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); cursor: default;
}
.store svg { width: 26px; height: 26px; fill: #fff; }
.store span { display: flex; flex-direction: column; line-height: 1.05; }
.store small { font-size: 10.5px; color: rgba(255,255,255,.85); }
.store b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.hero-title { margin-top: 36px; font-weight: 900; letter-spacing: -0.055em; line-height: .9; }
.hero-line { display: block; font-size: clamp(48px, 7vw, 104px); }
.hero-word { display: flex; align-items: center; font-size: clamp(54px, 8.6vw, 128px); color: var(--sheen); height: 1.05em; overflow: hidden; }
.word { display: inline-block; transition: transform .5s var(--ease), opacity .5s; }
.word.out { transform: translateY(-80%); opacity: 0; }
.word.in { transform: translateY(80%); opacity: 0; transition: none; }
.word.long { font-size: .74em; }
.tri-xl { width: .38em; height: .44em; }
.page[data-page="0"] .example-note { position: absolute; right: clamp(16px, 4vw, 56px); bottom: calc(var(--peek) + 92px); }

/* 2 · Explore */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
.tiles li {
  display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.tiles i { grid-row: span 2; position: relative; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 20%, #fff); }
.tiles img { width: 26px; height: 26px; object-fit: contain; }
.tiles svg { width: 22px; height: 22px; fill: var(--t); }
.tiles .spark, .ph-grid .spark { position: absolute; width: 10px !important; height: 10px !important; top: 6px; right: 6px; }
.tiles b { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; align-self: end; }
.tiles span { font-size: 12.5px; color: rgba(255,255,255,.6); align-self: start; }
.tiles .soon-tag { justify-self: start; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: rgba(150,215,0,.16); color: var(--sheen); }

.phone {
  height: 640px; aspect-ratio: 9 / 19.5;
  border-radius: 48px; padding: 9px; background: #0B0D10;
  box-shadow: 0 0 0 2px #2A2E35, 0 40px 80px -24px rgba(0,0,0,.6);
}
.ph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 40px; background: #fff; color: var(--ink); font-size: 11px; }
.ph-status { display: flex; justify-content: space-between; padding: 12px 24px 4px; font-weight: 600; font-size: 11px; }
.ph-dots { display: flex; gap: 3px; align-items: center; }
.ph-dots i { width: 13px; height: 6px; border-radius: 2px; background: var(--ink); }
.ph-tabs { display: flex; justify-content: space-around; border-bottom: 1px solid var(--hairline); font-size: 11.5px; color: var(--faint); padding-top: 6px; }
.ph-tabs > * { padding-bottom: 7px; font-weight: 500; }
.ph-tabs b { color: var(--ink); box-shadow: inset 0 -2px 0 var(--midnight); font-weight: 600; }
.ph-loc { position: relative; padding: 10px 14px 0; }
.ph-loc small { color: var(--muted); font-size: 9.5px; }
.ph-loc p { display: flex; align-items: center; gap: 4px; color: var(--midnight); font-weight: 700; font-size: 13.5px; letter-spacing: -0.02em; }
.ph-pin { width: 11px; height: 11px; fill: var(--sheen); }
.ph-chev { width: 10px; height: 10px; fill: var(--midnight); }
.ph-map { position: absolute; right: 14px; top: 10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hairline); display: grid; place-items: center; }
.ph-map svg { width: 13px; height: 13px; fill: var(--ink); }
.ph-search { margin: 10px 14px 0; height: 30px; border-radius: 99px; background: var(--surface-alt); display: flex; align-items: center; gap: 7px; padding: 0 12px; color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.ph-search svg { width: 12px; height: 12px; fill: var(--muted); flex: none; }
.ph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 2px; padding: 12px 8px 0; }
.ph-grid span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9px; white-space: nowrap; }
.ph-grid i { position: relative; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 8%, #fff); }
.ph-grid img { width: 24px; height: 24px; object-fit: contain; }
.ph-grid svg { width: 20px; height: 20px; fill: var(--t); }
.ph-more { text-align: center; color: var(--midnight); font-weight: 600; font-size: 10.5px; margin-top: 10px; }
.ph-h { padding: 12px 14px 6px; font-weight: 700; font-size: 13px; letter-spacing: -0.02em; }
.ph-rail { display: flex; gap: 8px; padding: 0 14px; }
.pv { flex: none; width: 46%; height: 72px; border-radius: 12px; }
.pv-court { background: linear-gradient(135deg, #7A2E0E, #2B1206); }
.pv-racquet { background: linear-gradient(135deg, #0B3A6B, #04203A); }
.ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 29%; background: #0F1720; border-radius: 24px 24px 0 0; padding: 8px 14px 0; color: #fff; }
.ph-grab { display: block; width: 34px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.4); margin: 0 auto 8px; }
.ph-kick { display: flex; align-items: center; gap: 6px; color: var(--sheen); font-weight: 700; letter-spacing: .14em; font-size: 9px; }
.ph-kick i { width: 6px; height: 6px; border-radius: 50%; background: var(--sheen); }
.ph-swipe { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; margin-top: 2px; }
.ph-tabbar { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 46px; border-radius: 24px; background: rgba(235,237,240,.94); display: flex; justify-content: space-around; align-items: center; color: var(--faint); }
.ph-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8px; font-weight: 500; }
.ph-tabbar svg { width: 16px; height: 16px; fill: var(--faint); }
.ph-tabbar .on { color: var(--midnight); font-weight: 600; }
.ph-tabbar .on svg { fill: var(--midnight); }

/* 3 · Players */
.ticks { margin-top: 28px; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 26px; color: rgba(255,255,255,.72); font-size: 15.5px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 12px; background: var(--sheen); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ticks b { display: block; color: #fff; font-weight: 700; }
.visual-card { gap: 24px; }
.flip { width: min(560px, 100%); perspective: 1600px; transition: transform .6s var(--ease); animation: float-card 6s ease-in-out infinite; will-change: transform; }
.flip.tracking { transition: transform .12s ease-out; }
@keyframes float-card { 50% { translate: 0 -8px; } }
/* The light that follows the pointer across the card, from the first version. */
.flip .pc::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.2), transparent 45%);
}
.flip-inner { position: relative; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip .pc { backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); }
.flip .pc-back { position: absolute; inset: 0; transform: rotateY(180deg); }
.picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 580px; }
.picker button {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.78); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 5px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  transition: background-color .2s, color .2s, border-color .2s;
}
.picker svg { width: 28px; height: 28px; padding: 5px; border-radius: 8px; fill: #fff; background: linear-gradient(135deg, var(--a), var(--c)); }
.picker button:hover { color: #fff; background: rgba(255,255,255,.08); }
.picker button[aria-pressed="true"] { color: #fff; border-color: var(--sheen); background: rgba(150,215,0,.1); }

/* 4 · Gig (components/freelancers/FreelancerCard.tsx) */
.gig-cards { display: grid; grid-template-columns: repeat(3, 172px); gap: 12px; }
.fl {
  background: #fff; color: var(--ink); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.55); animation: bob 6s ease-in-out infinite;
}
.fl:nth-child(2) { animation-delay: -2s; margin-top: 24px; }
.fl:nth-child(3) { animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.fl-top { position: relative; margin-bottom: 4px; }
.fl-av { width: 56px; height: 56px; border-radius: 50%; background: #2E6F8E; color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 700; }
.fl-dist { position: absolute; right: 0; top: 0; padding: 2px 7px; border-radius: 99px; background: rgba(15,20,28,.78); color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
.fl b { font-size: 14px; }
.fl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.fl-chips span { padding: 2px 8px; border-radius: 99px; background: #E7EEF5; color: var(--midnight); font-size: 11px; font-weight: 700; }
.fl small { font-size: 11.5px; color: var(--muted); }
.fl em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--sheen-dark); margin-top: 2px; }
.addon { width: min(420px, 100%); margin-top: 20px; background: rgba(255,255,255,.96); color: var(--ink); border-radius: 18px; padding: 14px 16px; box-shadow: 0 24px 48px -20px rgba(0,0,0,.55); }
.addon-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.addon-head svg { width: 14px; height: 14px; fill: var(--midnight); }
.addon-label { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
.addon-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px; border-radius: 14px; background: var(--surface-alt); }
.addon-av { width: 36px; height: 36px; border-radius: 50%; background: #2E6F8E; color: #fff; display: grid; place-items: center; font-weight: 700; }
.addon-what { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.addon-what b { font-size: 14px; }
.addon-what small { font-size: 12px; color: var(--muted); }
.addon-add { padding: 8px 14px; border-radius: 10px; background: var(--sheen); font-weight: 700; font-size: 13px; animation: nudge 3.2s ease-in-out infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 78% { transform: scale(1.08); } 86% { transform: scale(.98); } }

/* 5 · Biz */
.feats { margin-top: 24px; display: grid; gap: 14px; }
.feats li { display: flex; gap: 14px; }
.feats svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; fill: var(--sheen); background: rgba(150,215,0,.12); }
.feats span { font-size: 14.5px; color: rgba(255,255,255,.66); line-height: 1.45; }
.feats b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 15.5px; }
.feats em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
.bookings { width: min(460px, 100%); background: #fff; color: var(--ink); border-radius: 24px; padding: 20px; box-shadow: 0 40px 80px -24px rgba(0,0,0,.6); }
.bk-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.bk-head b { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.bk-head span { font-size: 13px; color: var(--muted); }
.bk-list { display: grid; gap: 8px; }
.bk {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 14px; background: var(--surface-alt); animation: slidein .6s var(--ease) both;
}
.bk time { font-size: 13px; font-weight: 700; }
.bk span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bk span b { font-size: 13.5px; }
.bk span small { font-size: 12px; color: var(--muted); }
.bk em { font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.bk em.ok { background: #DCFCE7; color: #14532D; }
.bk em.wait { background: #FEF9C3; color: #713F12; }
.bk em.in { background: #DBEAFE; color: #1E3A8A; }
@keyframes slidein { from { opacity: 0; transform: translateY(10px); } }

/* 6 · Creators */
.creator-tier {
  margin-top: 28px; max-width: 500px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(150,215,0,.35);
}
.ct-badge { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(150,215,0,.14); }
.ct-badge svg { width: 24px; height: 24px; fill: var(--sheen); }
.ct-what { display: flex; flex-direction: column; gap: 2px; }
.ct-what b { font-size: 17px; }
.ct-what small { font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.4; }
.ct-rate { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.ct-rate b { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; color: var(--sheen); white-space: nowrap; }
.ct-rate small { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); margin-top: 4px; }
.ladder { margin-top: 28px; display: grid; gap: 8px; max-width: 460px; }
.ladder li { display: grid; grid-template-columns: 1fr auto; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ladder b { font-size: 15.5px; }
.ladder span { grid-column: 1; font-size: 13px; color: rgba(255,255,255,.6); }
.ladder em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--sheen); }
.feed { background: #000; color: #fff; }
.feed-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.feed-art .ball { animation: ball 2.4s ease-in-out infinite; }
@keyframes ball { 50% { transform: translate(-60px, 90px); } }
.feed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.65)); }
.feed-rail { position: absolute; z-index: 2; right: 8px; bottom: 150px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.feed-rail span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; font-weight: 600; }
.feed-rail svg { width: 22px; height: 22px; fill: #fff; }
.feed-rail em { font-style: normal; font-size: 20px; line-height: 1; }
.feed-bottom { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 22px; }
.feed-who { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.feed-who svg { width: 13px; height: 13px; fill: var(--sheen); }
.feed-av { width: 26px; height: 26px; border-radius: 50%; background: #2E90D9; display: grid; place-items: center; font-weight: 700; font-size: 11px; }
.feed-cap { font-size: 12px; margin-top: 6px; color: rgba(255,255,255,.9); }
.feed-cta { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.basket {
  position: relative; display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-radius: 12px;
  background: var(--sheen); box-shadow: 0 5px 10px rgba(11,18,26,.3); overflow: hidden;
  animation: basket 4.8s var(--ease) infinite;
}
.basket svg { width: 14px; height: 14px; fill: #fff; flex: none; }
.basket span { display: flex; flex-direction: column; line-height: 1.2; }
.basket b { font-size: 11.5px; color: #fff; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.basket small { font-size: 9.5px; color: rgba(255,255,255,.9); }
.basket .tap { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: rgba(255,255,255,.7); animation: tap 4.8s ease-out infinite; }
@keyframes basket { 0%, 30% { transform: none; } 14% { box-shadow: 0 0 0 0 rgba(150,215,0,.7); } 26% { box-shadow: 0 0 0 14px rgba(150,215,0,0); } 36% { transform: scale(.94); } 42%, 100% { transform: none; } }
@keyframes tap { 0%, 32% { transform: scale(0); opacity: 0; } 34% { opacity: .8; } 50%, 100% { transform: scale(5); opacity: 0; } }
.cta-copy { width: 104px; font-size: 15px; line-height: 1.15; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,.5); transition: opacity .35s, transform .35s; }
.cta-copy small { display: block; font-size: 10.5px; font-weight: 500; opacity: .85; }
.cta-copy.out { opacity: 0; transform: translateY(-8px); }
.earned {
  position: absolute; z-index: 3; left: 50%; top: 42%; transform: translate(-50%, 20px); opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px; border-radius: 16px;
  background: rgba(255,255,255,.96); color: var(--ink); font-size: 16px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); animation: earn 4.8s var(--ease) infinite;
}
.earned svg { width: 22px; height: 22px; fill: var(--sheen-dark); }
.earned small { font-size: 11px; font-weight: 500; color: var(--muted); }
@keyframes earn { 0%, 44% { opacity: 0; transform: translate(-50%, 20px); } 52%, 82% { opacity: 1; transform: translate(-50%, 0); } 92%, 100% { opacity: 0; transform: translate(-50%, -24px); } }

/* 7 · HUDDL Pass (components/booking/KeyCard.tsx, as the app shows it) */
.pass {
  position: relative; width: min(380px, 100%); border-radius: 26px; padding: 18px 18px 12px;
  background: linear-gradient(135deg, #003865, #002845 55%, #001A2E);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -20px rgba(0,0,0,.65);
}
.page.active .pass { animation: drop 1.1s var(--ease) both .25s; }
@keyframes drop { from { transform: translateY(-110vh) rotate(-4deg); } 70% { transform: translateY(12px) rotate(.6deg); } to { transform: none; } }
.pass-head { display: flex; align-items: center; gap: 10px; }
.pass-head b { font-size: 12.5px; letter-spacing: .18em; }
.pass-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--sheen); display: grid; place-items: center; }
.pass-mark svg { width: 15px; height: 15px; fill: var(--midnight); }
.pass-close { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.pass-close svg { width: 16px; height: 16px; fill: rgba(255,255,255,.85); }
.pass-venue { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; margin-top: 14px; line-height: 1.1; }
.pass-court { font-size: 15px; font-weight: 600; color: var(--sheen); margin-top: 3px; }
.pass-when { display: flex; align-items: stretch; gap: 14px; margin-top: 14px; }
.pass-when span { display: grid; grid-template-columns: 16px auto; column-gap: 8px; align-items: center; }
.pass-when svg { grid-row: span 2; width: 15px; height: 15px; fill: rgba(255,255,255,.7); }
.pass-when small { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.pass-when b { font-size: 14px; white-space: nowrap; }
.pass-when i { width: 1px; background: rgba(255,255,255,.2); }
.pass-panel { margin-top: 14px; background: #fff; color: var(--ink); border-radius: 18px; padding: 16px 14px 12px; }
.pass-row { display: flex; gap: 16px; align-items: center; }
.qr { width: 112px; height: 112px; image-rendering: pixelated; flex: none; }
.pass-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pass-id small { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.pass-id b { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.pass-id span { font-size: 13px; color: var(--muted); }
.pass-id em { align-self: flex-start; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: #EFF8D6; color: var(--sheen-dark); }
.pass-live { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; color: var(--muted); }
.pass-live b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.pass-drain { height: 4px; border-radius: 4px; background: var(--hairline); margin-top: 6px; overflow: hidden; }
.pass-drain i { display: block; height: 100%; background: var(--sheen); transform-origin: left; }
.pass-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.pass-address { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.9); }
.pass-address svg { width: 16px; height: 16px; fill: rgba(255,255,255,.85); }
.pass-go { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.pass-go i { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-bright); display: grid; place-items: center; }
.pass-go svg { width: 15px; height: 15px; fill: #fff; }
.pass-manage { text-align: center; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.85); margin-top: 16px; }
.pass-grab { display: block; width: 36px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.35); margin: 10px auto 0; }

/* 8 · Contact */
.contact-logo { width: 200px; height: auto; margin-top: 40px; opacity: .9; }
.fineprint { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.55); }
.contact { width: min(480px, 100%); background: #fff; color: var(--ink); border-radius: 24px; padding: 24px; display: grid; gap: 14px; box-shadow: 0 40px 80px -24px rgba(0,0,0,.6); }
.contact label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.contact input, .contact select, .contact textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--surface-alt); border: 1px solid transparent;
  border-radius: 12px; padding: 12px 14px; outline: none; transition: border-color .2s, background-color .2s;
}
.contact textarea { resize: vertical; min-height: 110px; }
.contact input:focus, .contact select:focus, .contact textarea:focus { border-color: var(--midnight); background: #fff; }
.contact [aria-invalid="true"] { border-color: #D64430; }
.contact .btn { justify-self: start; }
.contact .robot { min-height: 65px; }
.contact .robot iframe { display: block; width: 100%; height: 70px; border: 0; }
.form-status { font-size: 13.5px; color: var(--muted); min-height: 1.2em; }
.form-status.ok { color: #14532D; }
.form-status.err { color: #B42318; }
.form-status a { color: var(--midnight); font-weight: 700; }

/* ── Pager ─────────────────────────────────────────── */
.pager { position: fixed; z-index: 30; left: clamp(16px, 3vw, 40px); bottom: calc(var(--peek) + 16px); pointer-events: none; }
.pager-where { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: rgba(255,255,255,.7); }
.pager-where b { font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
/* Left and right, at the middle of the right edge. */
.arrows { position: fixed; z-index: 30; right: clamp(16px, 2.4vw, 36px); top: 50%; transform: translateY(-50%); display: flex; gap: 10px; }
.arrow {
  display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  backdrop-filter: blur(10px); transition: background-color .2s, opacity .2s, transform .2s var(--ease);
}
.arrow svg { width: 20px; height: 20px; fill: currentColor; }
.arrow:hover { background: rgba(255,255,255,.2); }
.arrow:active { transform: scale(.94); }
.arrow:disabled { opacity: .3; cursor: default; }
.arrow-next { background: var(--sheen); color: var(--ink); box-shadow: none; }
.arrow-next:hover { background: #A6E61A; }

/* ── Feed sheet (the app's Highlights sheet, Airbnb-style corners) ── */
.sheet {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: calc(100svh - 24px);
  background: #0F1720; border-radius: 28px 28px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.35);
  transform: translateY(calc(100% - var(--peek))); transition: transform .6s var(--ease);
  display: flex; flex-direction: column;
}
.sheet.open { transform: none; }
.sheet.dragging { transition: none; }
.sheet-peek {
  flex: none; height: var(--peek); border: 0; background: none; color: #fff; cursor: grab; touch-action: none;
  display: grid; justify-items: start; align-content: start; padding: 10px clamp(16px, 3vw, 40px) 0; text-align: left;
}
.sheet-grab { justify-self: center; width: 44px; height: 5px; border-radius: 4px; background: var(--sheen); margin-bottom: 8px; }
.sheet-kick { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--sheen); }
.sheet-kick i { width: 7px; height: 7px; border-radius: 50%; background: var(--sheen); }
.sheet-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.sheet-body { flex: 1; display: grid; place-items: center; padding: 24px; }
.sheet-empty { max-width: 420px; text-align: center; display: grid; justify-items: center; gap: 10px; color: rgba(255,255,255,.7); font-size: 15px; }
.sheet-icon img { width: 64px; height: 64px; border-radius: 16px; }
.sheet-h { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: #fff; }

/* ── Smaller screens: one page per screen, the art fills it ── */
@media (max-width: 960px) {
  :root { --seg: 100vw; --lead: 0vw; --peek: 64px; }
  body { font-size: 16px; }
  .tabs { display: none; }
  .nav { justify-content: space-between; }
  .nav-logo { width: 108px; }
  .dim-side { background: linear-gradient(180deg, rgba(0,20,40,.45) 0%, rgba(0,20,40,.8) 55%); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
  .nav-cta .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .page-inner { display: block; overflow-y: auto; padding-top: calc(var(--nav-h) + 8px); padding-bottom: calc(var(--peek) + 110px); -webkit-overflow-scrolling: touch; }
  .split { display: flex; flex-direction: column; gap: 32px; align-items: stretch; }
  .copy-hero { padding-top: 16vh; }
  .page[data-page="0"] .example-note { position: static; margin-top: 16px; }
  .gig-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .gig-cards .fl:nth-child(3) { display: none; }
  .phone { height: 560px; }
  /* The arrows get a band of their own above the sheet, so they never sit on content. */
  .pager { display: none; }
  .arrows { top: auto; transform: none; left: 0; right: 0; bottom: var(--peek); justify-content: flex-end; padding: 28px 16px 10px; background: linear-gradient(180deg, rgba(4,20,36,0), rgba(4,20,36,.92) 45%); }
  .arrow { width: 44px; height: 44px; }
  .page-inner { padding-left: 16px; padding-right: 16px; }
  .wall { grid-template-columns: repeat(6, 260px); gap: 16px; left: 2%; top: -16%; }
  .wall-col { gap: 16px; }
  html.calm .wall { left: 8%; grid-template-columns: repeat(3, 260px); gap: 20px; }
  html.calm .wall-col { gap: 20px; }
  .week { inset: 72px 12px 80px; gap: 4px; }
  .month { top: 72px; bottom: 80px; left: 12px; right: 12px; }
  .month-grid { gap: 4px; }
}
@media (max-width: 520px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .stores { gap: 8px; }
  .store { height: 46px; padding: 0 12px 0 10px; }
  .store b { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pano-track, .pages-track, .sheet, .flip-inner, .dim i { transition-duration: .01s; }
  .flip { animation: none; }
  .seg *, .fl, .addon-add, .basket, .basket .tap, .earned, .feed-art .ball { animation: none !important; }
  .earned { opacity: 1; transform: translate(-50%, 0); }
  .page.active .pass { animation: none; }
  .page .copy > *, .page .visual { transition: none; }
}


/* ── Phones: the words sit on plain blue; each page's art sits behind its main design (steps below) ── */
@media (max-width: 960px) {
  /* Nothing behind the words. */
  .dim-side, html.calm .dim-side { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
  /* The art as its own section at the end of the page, fading in and out of the blue. */
  .page .seg.in-page {
    position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 62svh;
    margin: 40px -16px 0; overflow: hidden; z-index: auto;
    flex: none; /* in a flex column the page would otherwise squeeze it to nothing */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  html.calm .page .seg.in-page.faded { --keep: 1; }
  /* Home's text no longer needs to clear cards above it. */
  .copy-hero { padding-top: 6vh; }
  /* Scrolled text slides under a frosted header, not the bare logo. */
  .nav { background: rgba(4,25,46,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}

/* Step 2: the art starts at the middle of the main visual and stays inside
   its space, behind it, so the page is no longer than before. */
@media (max-width: 960px) {
  .visual { position: relative; isolation: isolate; }
  .visual > .seg.in-page {
    /* Down into the empty space the page already keeps for the arrows and sheet. */
    position: absolute; top: 50%; bottom: -150px; left: -16px; right: -16px;
    height: auto; margin: 0; z-index: -1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  }
}

/* Step 4 (phones): Players. Bigger court drawings behind the card, and
   sport chips solid enough to read over them. */
@media (max-width: 960px) {
  .visual > .seg-courts svg { transform: scale(1.7); transform-origin: 50% 40%; }
  .visual > .seg-courts .ct * { stroke-width: 1.3; stroke: rgba(255,255,255,.3); }
  .visual > .seg-courts .ct-green * { stroke: rgba(150,215,0,.42); }
  .visual > .seg-courts .ct-blue * { stroke: rgba(46,144,217,.5); }
  .picker button {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .picker button[aria-pressed="true"] { background: rgba(150,215,0,.22); border-color: var(--sheen); }
}

/* Step 5: a finger on the player card moves the card, not the page. */
.flip { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* Step 6 (phones): Gig. The storefronts and the add-on sit on one glass panel;
   the week sits right behind it, with square slots, showing a little below. */
@media (max-width: 960px) {
  .visual > .seg-week.in-page { top: -12px; bottom: -6px; }
  .visual > .seg-week .week {
    /* Anchored to the bottom, so its last row shows just below the glass panel. */
    position: absolute; inset: auto 6px 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
  }
  .visual > .seg-week .week-day { gap: 5px; }
  .visual > .seg-week .week-day > b { font-size: 9px; padding-bottom: 2px; }
  .visual > .seg-week .slot { flex: none; aspect-ratio: 1; border-radius: 8px; }
  .visual > .seg-week .slot.on small { font-size: 7.5px; left: 4px; top: 4px; right: 3px; line-height: 1.15; }
}

/* Step 7 (phones): the white boxes on Gig and Biz are glass, each on its own. */
@media (max-width: 960px) {
  .fl, .addon, .bookings {
    background: rgba(255,255,255,.16); color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 24px 48px -24px rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  /* Gig: storefront cards and the add-on */
  .fl small { color: rgba(255,255,255,.72); }
  .fl em { color: var(--sheen); }
  .fl-chips span { background: rgba(255,255,255,.18); color: #fff; }
  .addon-head { color: rgba(255,255,255,.75); }
  .addon-head svg { fill: rgba(255,255,255,.85); }
  .addon-row { background: rgba(255,255,255,.1); }
  .addon-what small { color: rgba(255,255,255,.7); }
  /* Biz: today's bookings */
  .bk-head span { color: rgba(255,255,255,.7); }
  .bk { background: rgba(255,255,255,.1); }
  .bk span small { color: rgba(255,255,255,.7); }
}
@media (max-width: 960px) {
  /* The small "Example …" line stays readable where the art shows through. */
  .visual > .example-note { position: relative; z-index: 1; color: rgba(255,255,255,.75); text-shadow: 0 1px 6px rgba(0,0,0,.85); }
}

/* Step 8 (phones): Biz. A lighter outer glass, and a calendar big enough to
   run past both edges of the screen. */
@media (max-width: 960px) {
  .bookings { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 24px 48px -24px rgba(0,0,0,.5); }
  .visual > .seg-month.in-page { left: -80px; right: -80px; top: 30%; bottom: -150px; }
  .visual > .seg-month .month { top: 0; bottom: 0; left: 0; right: 0; }
  .visual > .seg-month .month-name { padding-left: 96px; font-size: 26px; }
  .visual > .seg-month .month-grid { gap: 8px; }
  .visual > .seg-month .month-grid span { border-radius: 14px; font-size: 14px; padding: 8px 10px; }
}

/* Step 9 (phones): Home. Smaller cards, moved left, so two piles show. */
@media (max-width: 960px) {
  html.calm .page .seg-cards.in-page .wall { left: -6%; top: -10%; grid-template-columns: repeat(3, 180px); gap: 14px; }
  html.calm .page .seg-cards.in-page .wall-col { gap: 14px; }
}

/* Step 10 (desktop): a page whose content is taller than the screen allows is
   scaled down as a whole (script.js fitPages), never cut off. */
.page-inner.split { transform-origin: 50% 50%; }
.page-inner > .copy-hero { transform-origin: 0 50%; }

/* Phones, final touches: larger phone mockups, a smaller basket label, and
   the shade under the arrows running down behind the sheet, lighter. */
@media (max-width: 960px) {
  .phone { height: 620px; }
  .basket { padding: 7px 9px; }
  .basket b { font-size: 10.5px; max-width: 104px; }
  .basket small { font-size: 9px; }
  .cta-copy { width: 96px; font-size: 13px; }
  .cta-copy small { font-size: 9.5px; }
  .arrows {
    bottom: 0; padding: 32px 16px calc(var(--peek) + 10px);
    background: linear-gradient(180deg, rgba(4,20,36,0) 0, rgba(4,20,36,.5) 55%, rgba(4,20,36,.55) 100%);
  }
}