/* Funn — pre-launch site. Brand colours and type match the app. */

/* Fonts are served from here, not Google Fonts: no render-blocking third-party CSS, no visitor IPs sent to Google.
   Latin and latin-ext only (latin-ext carries ₹). Both fonts are under the SIL Open Font License 1.1. */
@font-face { font-family: 'Bagel Fat One'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bagelfatone-latin-v2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bagel Fat One'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bagelfatone-latin-ext-v2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-latin-v9.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-latin-ext-v9.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --bar: how much of the large viewport Safari's toolbar can cover. Bottom-anchored text sits above it. */
:root {
  --bar: 0px;
  --gum: #ff3d8b;
  --sun: #ffd60a;
  --volt: #2d5bff;
  --mint: #00d6a3;
  --tang: #ff7a1a;
  --blush: #ff9ec4;
  --ink: #1a1033;
  --stage: #0d0720;
  --card: #1c1238;
  --paper: #ffffff;
  --mist: #f5f3f8;
  --soft: rgba(255, 255, 255, 0.68);
  --inksoft: rgba(26, 16, 51, 0.62);
  --display: 'Bagel Fat One', 'Figtree', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@supports (height: 100lvh) { :root { --bar: calc(100lvh - 100svh); } }

*,
*::before,
*::after { box-sizing: border-box; }

/* Dark canvas to start; the script recolours it per section, and Safari tints its bars from it. */
html { -webkit-text-size-adjust: 100%; background: var(--stage); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  /* No body colour: each section paints its own, and Safari reads the canvas behind its bars. */
  background: transparent;
  color: var(--paper);
  font-family: var(--body);
  font-weight: 500;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--gum); color: var(--paper); }

.wordmark { font-family: var(--display); letter-spacing: -0.02em; line-height: 1; }
.kicker {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sun);
}
.center { text-align: center; }
.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 7.2vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.lede { font-size: clamp(17px, 1.6vw, 22px); color: var(--soft); max-width: 40ch; }

/* ---------- chrome ---------- */

.progress { position: fixed; inset: 0 0 auto; height: 4px; z-index: 60; pointer-events: none; }
.progress__bar { height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gum), var(--sun), var(--mint), var(--volt)); }

.nav {
  position: fixed;
  inset: 12px var(--gutter) auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: var(--nav-bg, rgba(255, 214, 10, 0.78));
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.5s var(--ease), background 0.4s;
}
.nav.is-hidden { transform: translateY(calc(-100% - 40px)); }
.nav.is-light { border-color: rgba(26, 16, 51, 0.12); }
.nav.is-light .nav__brand .wordmark { color: var(--ink); }
.nav.is-light .nav__links a { color: var(--inksoft); }
.nav.is-light .nav__links a:hover { background: rgba(26, 16, 51, 0.08); color: var(--ink); }
.nav__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.nav__ticket { width: 38px; height: 28px; }
.nav__brand .wordmark { font-size: 28px; color: var(--paper); }
.nav__links { display: flex; gap: 4px; }
.nav__links a { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px; color: var(--soft); transition: background 0.2s, color 0.2s; }
.nav__links a:hover { background: rgba(255, 255, 255, 0.08); color: var(--paper); }
/* Buttons live in ui.css (the shared Funn button system). */

/* Seven links need about 1,100 px; below that they wrapped onto three lines and pushed the button off the pill (iPad, small laptops). */
.nav__links a, .nav .btn { white-space: nowrap; }
@media (max-width: 1100px) { .nav__links { display: none; } }
@media (max-width: 760px) {
  .nav__brand .wordmark { font-size: 24px; }
}

/* ---------- phone frame for real screenshots ---------- */

.phone {
  position: relative;
  width: var(--w, 300px);
  aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--w, 300px) * 0.16);
  padding: calc(var(--w, 300px) * 0.035);
  background: linear-gradient(145deg, #3a3550, #0b0716 40%, #2a2540);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.12),
    0 40px 80px -20px rgba(0, 0, 0, 0.6),
    0 20px 40px -20px rgba(255, 61, 139, 0.25);
}
.phone > img,
.phone .screens {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--w, 300px) * 0.125);
  object-fit: cover;
  overflow: hidden;
  background: #fff;
}
.phone::after {
  /* side button */
  content: '';
  position: absolute;
  right: -3px;
  top: 24%;
  width: 3px;
  height: 11%;
  border-radius: 0 3px 3px 0;
  background: #2a2540;
}
.screens { position: relative; }
.screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.screens img.on { opacity: 1; }

.phone--land { aspect-ratio: 2622 / 1206; border-radius: calc(var(--w) * 0.075); padding: calc(var(--w) * 0.016); }
.phone--land > img { border-radius: calc(var(--w) * 0.06); }

/* ---------- 1. hero ---------- */

.hero { position: relative; height: 320vh; background: var(--sun); }
.hero__stick { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--sun); color: var(--ink); }
.blob { position: absolute; border-radius: 50%; will-change: transform; }
.blob--mint { width: 42vmax; height: 42vmax; left: -14vmax; top: -16vmax; background: var(--mint); }
.blob--volt { width: 60vmax; height: 60vmax; right: -22vmax; bottom: -30vmax; background: var(--volt); }
.hero__sparkle { position: absolute; width: clamp(60px, 9vw, 140px); right: 14vw; top: 14vh; }
.hero__center { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; padding: 0 var(--gutter); }
.hero__ticket { width: clamp(150px, 22vw, 320px); height: clamp(105px, 15vw, 220px); filter: drop-shadow(0 20px 30px rgba(26, 16, 51, 0.25)); }
.hero__word { margin: -2vw 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(140px, 30vw, 460px); line-height: 0.8; letter-spacing: -0.03em; color: var(--ink); display: flex; }
.hero__word span { display: inline-block; will-change: transform; }
.hero__tag { margin: 2vh 0 0; font-weight: 800; font-size: clamp(18px, 2vw, 28px); }
.hero__phone { position: absolute; left: 50%; top: 50%; --w: min(330px, 70vw, 36vh); translate: -50% -50%; transform: translateY(110vh); }
.hero__chips { position: absolute; inset: 0; pointer-events: none; }
.chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(13px, 1.2vw, 16px);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  white-space: nowrap;
  opacity: 0;
}
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--gum); flex: none; }
.chip--sun { background: var(--sun); }
.chip--mint { background: var(--mint); }
.chip--gum { background: var(--gum); color: var(--ink); } /* ink on pink 5.4:1; white was 3.3:1 */
.chip--ink { background: var(--ink); color: var(--paper); border-color: var(--paper); box-shadow: 4px 4px 0 var(--gum); }
.c1 { left: 8vw; top: 22vh; } .c2 { right: 7vw; top: 28vh; } .c3 { left: 6vw; bottom: 22vh; } .c4 { right: 9vw; bottom: 16vh; } .c5 { left: 18vw; top: 50vh; } .c6 { right: 18vw; top: 58vh; }
@media (max-width: 760px) {
  .c3, .c4, .c5, .c6 { display: none; }
  .c1 { left: 4vw; top: 14vh; } .c2 { right: 4vw; top: 22vh; } .c3 { left: 4vw; bottom: 14vh; } .c4 { right: 4vw; bottom: 8vh; }
}
.hero__hint { position: absolute; left: 50%; bottom: calc(28px + var(--bar)); translate: -50% 0; font-weight: 800; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; display: grid; justify-items: center; gap: 8px; }
.hero__hint span { width: 2px; height: 36px; background: var(--ink); transform-origin: top; animation: drip 1.6s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- hero: what it is ---------- */
.hero__what { margin: 14px auto 0; max-width: 36ch; font-weight: 700; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.4; color: var(--ink); }

/* ---------- chapter 1: what is Funn ---------- */
.what { padding: 16vh var(--gutter); background: var(--sun); color: var(--ink); }
.what .kicker { color: var(--gum); }
.what .lede { color: var(--inksoft); }
.what__head { max-width: 1240px; margin: 0 auto 7vh; }
.steps4 { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps4 li { position: relative; padding: 22px 22px 26px; border-radius: 30px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; }
.steps4 .n { position: absolute; top: -18px; left: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--gum); color: #fff; border: 3px solid var(--ink); display: grid; place-items: center; font-family: var(--display); font-size: 22px; }
.steps4 .phone { --w: min(190px, 100%); margin: 10px auto 18px; }
.steps4 h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; }
.steps4 p { margin: 8px 0 0; color: var(--inksoft); font-weight: 600; }
.what__plus { max-width: 1240px; margin: 5vh auto 0; font-size: 19px; font-weight: 600; }
.what__plus b { font-weight: 900; }
@media (max-width: 960px) { .steps4 { grid-template-columns: 1fr 1fr; row-gap: 34px; } }
@media (max-width: 560px) { .steps4 { grid-template-columns: 1fr; } .steps4 .phone { --w: min(220px, 62vw); } }

.chapter { max-width: 1280px; margin: 0 auto; padding: 14vh var(--gutter) 0; }

/* ---------- couch games ---------- */
.couch { display: grid; grid-template-columns: 1fr 1.15fr; gap: 5vw; align-items: center; padding: 16vh var(--gutter); background: linear-gradient(180deg, var(--stage), #1C0F45 60%, var(--stage)); max-width: none; }
.couch__copy { max-width: 620px; justify-self: end; }
.couch__list { list-style: none; padding: 0; margin: 26px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.couch__list li { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.15); font-weight: 800; font-size: 14px; }
.couch__hooks { color: var(--soft); margin: 0 0 26px; }
.couch__tv { position: relative; padding: 14px 14px 34px; border-radius: 26px; background: #050310; border: 3px solid #2a2540; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 80px rgba(255, 61, 139, 0.2); }
.couch__tv img { width: 100%; border-radius: 14px; }
.couch__tv i { position: absolute; left: 50%; bottom: -40px; width: 30%; height: 40px; translate: -50% 0; background: #2a2540; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
@media (max-width: 960px) { .couch { grid-template-columns: 1fr; } .couch__copy { justify-self: start; } }

/* ---------- 2. statement ---------- */

.statement { position: relative; height: 260vh; background: var(--stage); }
.statement__stick { position: sticky; top: 0; height: 100vh; height: 100lvh; display: grid; place-items: center; padding: 0 var(--gutter); }
.statement__text { margin: 0; max-width: 18ch; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 6.6vw, 104px); line-height: 1; letter-spacing: -0.02em; text-align: center; }
.statement__text .w { opacity: 0.12; transition: none; }
.statement__text .hl { color: var(--sun); }
.statement__text .hl2 { color: var(--gum); }

/* ---------- 3. tour (pinned phone, captions scroll) ---------- */

.tour { position: relative; background: linear-gradient(180deg, var(--stage), #160b36 40%, var(--stage)); }
.tour__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; padding: 0 var(--gutter); max-width: 1280px; margin: 0 auto; }
.tour__phone { position: sticky; top: 0; height: 100vh; height: 100lvh; display: grid; place-items: center; }
.tour__phone .phone { --w: min(330px, 26vw, 38vh); }
.tour__glow { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: 0.55; background: var(--gum); transition: background 0.8s; z-index: -1; }
.tour__steps { padding: 30vh 0; }
.step { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.25; transition: opacity 0.5s; }
.step.on { opacity: 1; }
.step h3 { margin: 0 0 18px; font-family: var(--display); font-weight: 400; font-size: clamp(38px, 4.6vw, 72px); line-height: 0.95; letter-spacing: -0.02em; }
.step p { margin: 0; font-size: clamp(17px, 1.5vw, 21px); color: var(--soft); max-width: 34ch; }
.step .quote { margin-top: 22px; display: inline-block; padding: 12px 16px; border-radius: 16px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); font-weight: 800; color: var(--paper); max-width: max-content; }
.step .quote b { color: var(--sun); }
.step__mobile { display: none; }
@media (max-width: 860px) {
  .tour__grid { grid-template-columns: 1fr; }
  .tour__phone { display: none; }
  .tour__steps { padding: 10vh 0; }
  .step { min-height: auto; padding: 8vh 0; opacity: 1; }
  .step__mobile { display: block; margin: 0 auto 28px; --w: min(280px, 72vw); }
}

/* ---------- 3b. features ---------- */

.features { padding: 16vh var(--gutter); background: var(--paper); color: var(--ink); }
.features .kicker { color: var(--gum); }
.features .lede { color: var(--inksoft); }
.features__head { max-width: 1240px; margin: 0 auto 7vh; }
.fgrid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row dense; gap: 18px; }
.fcard {
  position: relative;
  min-height: 560px;
  padding: 26px 26px 0;
  border-radius: 32px;
  overflow: hidden;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  display: flex;
  flex-direction: column;
}
.fcard__copy { position: relative; z-index: 1; }
.fcard__k { margin: 0 0 8px; font-size: 12px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
.fcard h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.4vw, 38px); line-height: 1; letter-spacing: -0.01em; }
.fcard p:not(.fcard__k) { margin: 10px 0 0; font-size: 15px; font-weight: 600; line-height: 1.45; max-width: 34ch; }
.fcard .phone { --w: 230px; margin: 26px auto 0; flex: none; transform: translateY(40px); }
.fcard.f-wide { grid-column: span 2; flex-direction: row; gap: 28px; align-items: center; padding: 30px 30px 0; }
.fcard.f-wide .fcard__copy { flex: 1; padding-bottom: 30px; }
.fcard.f-wide h3 { font-size: clamp(40px, 4vw, 64px); }
.fcard.f-wide .phone { --w: 260px; margin: 0; align-self: flex-end; }
.f-sun { background: var(--sun); }
.f-mint { background: var(--mint); }
.f-gum { background: var(--gum); color: var(--paper); }
.f-volt { background: var(--volt); color: var(--paper); }
.f-tang { background: var(--tang); }
.f-blush { background: var(--blush); }
.f-ink { background: var(--card); color: var(--paper); }
@media (max-width: 960px) {
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .fcard.f-wide { grid-column: span 2; }
}
/* Two columns: the last card goes wide too, so the grid ends without a hole. */
@media (min-width: 641px) and (max-width: 960px) {
  .fgrid > .fcard:last-child { grid-column: span 2; flex-direction: row; gap: 28px; align-items: center; padding: 30px 30px 0; }
  .fgrid > .fcard:last-child .fcard__copy { flex: 1; padding-bottom: 30px; }
  .fgrid > .fcard:last-child .phone { margin: 0; align-self: flex-end; }
}
@media (max-width: 640px) {
  .fgrid { grid-template-columns: 1fr; gap: 16px; }
  .fcard { min-height: 0; }
  .fcard .phone { --w: min(230px, 62vw); }
  .fcard.f-wide { grid-column: auto; flex-direction: column; align-items: stretch; padding: 26px 26px 0; }
  .fcard.f-wide .fcard__copy { padding-bottom: 0; }
  .fcard.f-wide .phone { --w: min(230px, 62vw); margin: 26px auto 0; align-self: center; }
}

/* ---------- chat & plan ---------- */
.sec__head { max-width: 1240px; margin: 0 auto 7vh; }
.chatplan { padding: 16vh var(--gutter); background: var(--mist); color: var(--ink); }
.chatplan .kicker, .earn .kicker { color: var(--gum); }
.chatplan .lede, .earn .lede { color: var(--inksoft); }
.cp3 { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cp3 article { padding: 24px; border-radius: 30px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.cp3 .phone { --w: min(220px, 100%); margin: 0 auto 20px; }
.cp3 h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; }
.cp3 p { margin: 8px 0 0; color: var(--inksoft); font-weight: 600; }
@media (max-width: 900px) { .cp3 { grid-template-columns: 1fr; } .cp3 .phone { --w: min(230px, 62vw); } }

/* ---------- teens ---------- */
.teens { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5vw; align-items: center; padding: 16vh var(--gutter); background: var(--mint); color: var(--ink); }
.teens .kicker { color: var(--ink); }
.teens__phones { position: relative; height: min(640px, 82vh); justify-self: end; width: min(540px, 100%); }
.teens__phones .phone { position: absolute; --w: min(250px, 42vw); }
.teens__phones .phone:first-child { left: 0; top: 0; rotate: -6deg; z-index: 2; }
.teens__phones .phone:last-child { right: 0; top: 12%; rotate: 6deg; }
.perks--ink span { color: rgba(26, 16, 51, 0.8); }
.perks--ink i { color: var(--ink); background: var(--sun); }
@media (max-width: 900px) { .teens { grid-template-columns: 1fr; } .teens__phones { justify-self: center; height: 120vw; max-height: 560px; } }

/* ---------- meet ---------- */
.earn { padding: 16vh var(--gutter); background: var(--paper); color: var(--ink); }
.earn .cp3 article { background: var(--mist); }
/* A quiet way to sign up from the middle of a long page: no animation, jumps to the form (main.js, #join). */
.midcta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; max-width: 620px; margin: clamp(48px, 7vw, 88px) auto 0; padding: 16px 18px 16px 24px; border: 2px dashed rgba(26, 16, 51, 0.2); border-radius: 28px; text-align: center; font-weight: 800; font-size: 17px; color: var(--ink); }
@media (max-width: 520px) { .midcta { flex-direction: column; padding: 18px; } }
.earn__sub { max-width: 1240px; margin: 10vh auto 3vh; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 3.6vw, 52px); line-height: 1; }
.earngrid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.earngrid article { padding: 24px; border-radius: 26px; background: var(--mist); border: 2px solid rgba(26, 16, 51, 0.1); }
.earngrid i { font-style: normal; font-size: 36px; }
.earngrid h4 { margin: 10px 0 6px; font-size: 20px; font-weight: 900; }
.earngrid p { margin: 0; color: var(--inksoft); font-weight: 600; }
@media (max-width: 900px) {
  .earngrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .earngrid { grid-template-columns: 1fr; } }

/* ---------- 4. zoom (full-bleed screen shrinks into a phone) ---------- */

.zoom { position: relative; height: 300vh; background: var(--ink); }
.zoom__stick { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; display: grid; place-items: center; }
.zoom__phone { --w: min(340px, 72vw, 36vh); will-change: transform; }
.zoom__copy { position: absolute; inset: auto 0 calc(6vh + var(--bar)); text-align: center; padding: 0 var(--gutter); opacity: 0; }
.zoom__copy .title { font-size: clamp(40px, 6vw, 96px); }
.zoom__left, .zoom__right { position: absolute; top: 50%; translate: 0 -50%; opacity: 0; }
.zoom__left { right: calc(50% + min(220px, 40vw)); }
.zoom__right { left: calc(50% + min(220px, 40vw)); }
.zoom__left .phone, .zoom__right .phone { --w: min(260px, 22vw); }
@media (max-width: 760px) {
  .zoom__left, .zoom__right { display: none; }
  .zoom__stick { place-items: start center; padding-top: 12vh; }
  .zoom__phone { --w: min(56vw, 28vh); }
  .zoom__copy .title { font-size: clamp(34px, 9.5vw, 44px); }
}

/* ---------- 5. game gallery (horizontal) ---------- */

.gallery { position: relative; background: var(--stage); }
.gallery__stick { height: 100vh; height: 100lvh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.gallery__head { padding: 0 var(--gutter); margin-bottom: 4vh; display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.gallery__head .title { font-size: clamp(40px, 5.6vw, 88px); }
.gallery__track { display: flex; gap: clamp(18px, 2.4vw, 36px); padding: 0 var(--gutter); width: max-content; will-change: transform; }
.gcard {
  position: relative;
  flex: none;
  width: clamp(300px, 30vw, 440px);
  height: min(64vh, 620px);
  border-radius: 34px;
  padding: 26px;
  overflow: hidden;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(26, 16, 51, 0.9);
  box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.9);
}
.gcard--wide { width: clamp(420px, 56vw, 860px); }
.gcard h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.2vw, 52px); line-height: 0.95; }
.gcard p { margin: 8px 0 0; font-weight: 700; font-size: 16px; max-width: 26ch; }
.gcard .meta { margin-top: 10px; font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.gcard .phone { --w: clamp(170px, 14vw, 220px); position: absolute; right: -18px; bottom: -70px; rotate: -8deg; }
.gcard--wide .phone { --w: clamp(380px, 40vw, 640px); right: -30px; bottom: -40px; rotate: -4deg; }
.gcard.t-gum { background: var(--gum); color: var(--paper); }
.gcard.t-sun { background: var(--sun); }
.gcard.t-volt { background: var(--volt); color: var(--paper); }
.gcard.t-mint { background: var(--mint); }
.gcard.t-tang { background: var(--tang); }
.gcard.t-ink { background: var(--card); color: var(--paper); border-color: rgba(255, 255, 255, 0.3); }
@media (max-width: 760px) {
  .gcard { width: 78vw; height: 66vh; }
  .gcard--wide { width: 92vw; }
  .gcard--wide .phone { --w: 84vw; right: -20px; bottom: -10px; }
  .gcard .phone { --w: 46vw; }
}

/* ---------- 6. hook rush, played by scroll ---------- */

.hook { position: relative; height: 420vh; }
.hook__stick { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.hook__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hook__stick::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(13, 7, 32, 0.55), transparent 26%, transparent 52%, rgba(13, 7, 32, 0.8)); }
.hook__hud { position: absolute; z-index: 2; left: var(--gutter); top: 84px; text-shadow: 0 2px 12px rgba(13, 7, 32, 0.5); }
.hook__m { margin: 0; font-family: var(--display); font-size: clamp(56px, 8vw, 120px); line-height: 0.9; }
.hook__zone { margin: 8px 0 0; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px; color: var(--soft); }
.hook__copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: calc(7vh + var(--bar)); max-width: 520px; }
.hook__copy .title { font-size: clamp(40px, 5vw, 80px); }
.hook__copy p { color: var(--soft); font-size: 18px; margin: 14px 0 0; }
.hook__phone { position: absolute; z-index: 2; right: var(--gutter); top: 50%; translate: 0 -50%; --w: min(270px, 22vw); }
.toast {
  position: absolute;
  right: var(--gutter);
  top: 92px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 12px;
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(-30px) scale(0.9);
  opacity: 0;
  z-index: 3;
}
.toast svg { width: 42px; height: 30px; }
.toast b { font-weight: 900; }
@media (max-width: 860px) {
  .hook__phone { display: none; }
  .toast { left: var(--gutter); right: auto; top: auto; bottom: calc(38vh + var(--bar)); }
  .hook__copy .title { font-size: clamp(36px, 10vw, 48px); }
  .hook__copy p { font-size: 16px; }
  .hook__m { font-size: clamp(48px, 15vw, 72px); }
}

/* ---------- 7. the daily loop ---------- */

.loop { position: relative; padding: 18vh var(--gutter); background: var(--mist); color: var(--ink); overflow: hidden; }
.loop .kicker { color: var(--gum); }
.loop__head { max-width: 1100px; margin: 0 auto 8vh; }
.loop__head .lede { color: var(--inksoft); }
.loop__clock { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.beat { position: relative; padding: 24px; border-radius: 28px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); min-height: 230px; display: flex; flex-direction: column; }
.beat time { font-family: var(--display); font-size: 40px; line-height: 1; }
.beat h4 { margin: 14px 0 6px; font-size: 20px; font-weight: 900; }
.beat p { margin: 0; color: var(--inksoft); font-size: 15px; }
.beat .dot { position: absolute; top: 22px; right: 22px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); }
.beat:nth-child(8n + 1) .dot { background: var(--sun); }
.beat:nth-child(8n + 2) .dot { background: var(--gum); }
.beat:nth-child(8n + 3) .dot { background: var(--mint); }
.beat:nth-child(8n + 4) .dot { background: var(--volt); }
.beat:nth-child(8n + 5) .dot { background: var(--tang); }
.beat:nth-child(8n + 6) .dot { background: var(--blush); }
.beat:nth-child(8n + 7) .dot { background: var(--sun); }
.beat:nth-child(8n + 8) .dot { background: var(--ink); }
@media (max-width: 960px) { .loop__clock { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .loop__clock { grid-template-columns: 1fr; } .beat { min-height: auto; } }

/* ---------- 8. funnopoly tiles ---------- */

.board { position: relative; height: 240vh; background: var(--stage); }
.board__stick { position: sticky; top: 0; height: 100vh; height: 100lvh; display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: 4vw; padding: 0 var(--gutter); max-width: 1360px; margin: 0 auto; }
.board__head p:last-child { color: var(--soft); font-size: 18px; max-width: 32ch; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; perspective: 1200px; }
.tile { aspect-ratio: 3 / 4; }
.tile__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.tile__f, .tile__b { position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; padding: 14px; border: 2px solid var(--ink); }
.tile__f { align-items: flex-end; color: var(--ink); font-family: var(--display); font-size: clamp(16px, 1.6vw, 24px); line-height: 1; box-shadow: inset 0 18px 0 rgba(26, 16, 51, 0.12); }
.tile__f b { font-weight: 400; }
.tile__b { transform: rotateY(180deg); background: var(--paper); color: var(--ink); align-items: center; font-weight: 800; font-size: clamp(12px, 1.05vw, 15px); line-height: 1.3; }
.t-gum { background: var(--gum); color: var(--paper) !important; } .t-sun { background: var(--sun); } .t-volt { background: var(--volt); color: var(--paper) !important; } .t-mint { background: var(--mint); } .t-tang { background: var(--tang); } .t-blush { background: var(--blush); } .t-ink { background: var(--card); color: var(--paper) !important; border-color: rgba(255,255,255,0.3) !important; }
@media (max-width: 860px) {
  .board { height: auto; }
  .board__stick { position: relative; height: auto; grid-template-columns: 1fr; padding: 14vh var(--gutter); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile { aspect-ratio: 1; }
  .tile__f { font-size: 22px; }
  .tile__b { font-size: 15px; }
}

/* ---------- 9. thoughts ---------- */

.thoughts { padding: 16vh 0; background: var(--sun); color: var(--ink); overflow: hidden; }
.thoughts .kicker { color: var(--ink); }
.marquee { overflow: hidden; padding: 10px 0; }
.marquee__row { display: flex; gap: 28px; width: max-content; will-change: transform; }
.marquee span { flex: none; font-family: var(--display); font-size: clamp(34px, 5vw, 76px); line-height: 1.05; white-space: nowrap; }
.m1 span:nth-child(odd) { color: var(--gum); }
.m2 span { -webkit-text-stroke: 2px var(--ink); color: transparent; }
.m2 span:nth-child(even) { color: var(--ink); -webkit-text-stroke: 0; }
.marquee span::after { content: '✦'; margin-left: 28px; font-family: var(--body); color: var(--ink); -webkit-text-stroke: 0; font-size: 0.5em; vertical-align: middle; }
.thoughts__note { text-align: center; margin: 5vh auto 0; font-weight: 800; font-size: 18px; padding: 0 var(--gutter); }

/* ---------- 10. vendors ---------- */

.vendors { position: relative; padding: 18vh var(--gutter); background: var(--volt); overflow: hidden; }
.vendors .kicker { color: var(--sun); }
.vendors__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 5vw; max-width: 1280px; margin: 0 auto; align-items: center; }
.vendors__phones { position: relative; height: min(720px, 90vh); }
.vendors__phones .phone { position: absolute; --w: min(250px, 18vw); }
/* Anchored to the column's edges so the fanned phones never reach into the copy beside them. */
.vendors__phones .phone:nth-child(1) { left: 0; top: 8%; rotate: -8deg; }
.vendors__phones .phone:nth-child(2) { left: 50%; translate: -50% 0; top: 0; z-index: 2; }
.vendors__phones .phone:nth-child(3) { right: 4%; top: 12%; rotate: 8deg; }
.perks { list-style: none; margin: 30px 0 34px; padding: 0; display: grid; gap: 14px; }
.perks li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.perks b { display: block; font-size: 19px; font-weight: 900; }
.perks span { color: rgba(255, 255, 255, 0.82); }
.perks i { width: 44px; height: 44px; border-radius: 14px; background: var(--paper); color: var(--volt); display: grid; place-items: center; font-style: normal; font-weight: 900; font-family: var(--display); font-size: 20px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
@media (max-width: 960px) {
  .vendors__grid { grid-template-columns: 1fr; }
  .vendors__phones { height: 120vw; max-height: 640px; }
  .vendors__phones .phone { --w: 40vw; }
}

/* ---------- 10b. why funn wins ---------- */

.why-funn { background: var(--stage); }
.collide { position: relative; height: 260vh; }
.collide__stick { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; padding: 0 var(--gutter); }
.collide__title { font-size: clamp(44px, 7vw, 110px); }
.collide__apps { position: relative; width: min(980px, 100%); height: min(260px, 32vh); }
.appchip {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 14px 20px;
  border-radius: 22px;
  background: var(--card);
  border: 2px solid rgba(255, 255, 255, 0.18);
  color: var(--soft);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  will-change: transform;
}
.appchip b { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.4vw, 34px); color: var(--paper); line-height: 1; }
.a1 { --x: -36vw; --y: -40%; rotate: -8deg; } .a2 { --x: -18vw; --y: 60%; rotate: 6deg; } .a3 { --x: 0vw; --y: -70%; rotate: -3deg; } .a4 { --x: 18vw; --y: 55%; rotate: 7deg; } .a5 { --x: 36vw; --y: -35%; rotate: -6deg; }
.a1 b { color: var(--gum); } .a2 b { color: var(--mint); } .a3 b { color: var(--sun); } .a4 b { color: #7fa0ff; } .a5 b { color: var(--tang); }
.collide__ticket { position: absolute; left: 50%; top: 50%; width: 220px; height: 154px; translate: -50% -50%; scale: 0; filter: drop-shadow(0 20px 40px rgba(255, 61, 139, 0.45)); }
.collide__after { max-width: 46ch; text-align: center; font-size: clamp(17px, 1.6vw, 22px); color: var(--soft); opacity: 0; margin: 0; }
@media (max-width: 760px) {
  .a1 { --x: -22vw; --y: -150%; } .a2 { --x: 20vw; --y: -95%; } .a3 { --x: -12vw; --y: -10%; } .a4 { --x: 22vw; --y: 70%; } .a5 { --x: -14vw; --y: 140%; }
  .collide__apps { height: 42vh; }
  .appchip { padding: 10px 14px; font-size: 12px; }
}


.versus { padding: 10vh var(--gutter) 8vh; max-width: 1240px; margin: 0 auto; }
.vs { margin-top: 6vh; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); }
.vs__row { display: grid; grid-template-columns: 2.4fr repeat(var(--cols, 5), 1fr); align-items: center; min-height: 64px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.vs__row:first-child { border-top: 0; }
.vs__row > span { padding: 14px 18px; font-weight: 800; }
.vs__head { background: var(--card); min-height: 72px; }
.vs__head span { text-align: center; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.vs__head .vs__funn { font-family: var(--display); font-size: 28px; letter-spacing: 0; text-transform: none; color: var(--sun); }
.vs__row i { justify-self: center; width: 22px; height: 22px; border-radius: 50%; }
.vs__row i.y, .vs__key i.y { background: var(--mint); box-shadow: 0 0 18px rgba(0, 214, 163, 0.6); }
.vs__row i.h, .vs__key i.h { background: linear-gradient(90deg, var(--sun) 50%, transparent 50%); border: 2px solid var(--sun); }
.vs__row i.n, .vs__key i.n { border: 2px solid rgba(255, 255, 255, 0.25); }
.vs__row:not(.vs__head) > i:nth-child(2) { width: 28px; height: 28px; }
.vs__row:not(.vs__head) > i.y:nth-child(2) { background: var(--sun); box-shadow: 0 0 22px rgba(255, 214, 10, 0.7); }
.vs__key { margin: 18px 0 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--soft); font-size: 14px; font-weight: 700; }
.vs__key i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-left: 10px; }
@media (max-width: 760px) {
  .vs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vs__row { grid-template-columns: 150px repeat(var(--cols, 5), 78px); width: max-content; }
  .vs__row > span:first-child { position: sticky; left: 0; background: var(--stage); z-index: 1; font-size: 14px; }
  .vs__head > span:first-child { background: var(--card); }
  .vs__head span { font-size: 11px; }
}

.versus .lede { margin-top: 18px; }
.versus + .versus { padding-top: 0; }
.vs__row > span { line-height: 1.3; }
.rivals { margin-top: 5vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rivals article { padding: 22px; border-radius: 22px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); }
.rivals b { display: block; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; }
.rivals span { display: block; margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); }
.rivals p { margin: 10px 0 0; color: var(--soft); font-size: 15px; }
/* scoreboard */
.sb { margin-top: 6vh; display: grid; gap: 10px; }
.sb__head, .sb__row { display: grid; grid-template-columns: 52px minmax(150px, 1.1fr) 3fr; gap: 16px; align-items: center; }
.sb__head { padding: 0 18px; }
.sb__steps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.sb__steps em { font-style: normal; text-align: center; font-weight: 900; font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.sb__row { padding: 14px 18px; border-radius: 22px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.08); }
.sb__row--funn { background: linear-gradient(90deg, rgba(255, 214, 10, 0.18), rgba(255, 61, 139, 0.14)); border-color: rgba(255, 214, 10, 0.5); box-shadow: 0 0 40px rgba(255, 214, 10, 0.15); }
.sb__logo { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; }
.sb__logo--funn { width: 52px; height: 38px; }
.sb__name b { display: block; font-weight: 900; font-size: 17px; }
.sb__name span { display: block; font-size: 13px; color: var(--soft); }
.sb__bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.sb__bar i { height: 24px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 900; line-height: 1; color: var(--ink); }
.sb__bar i.y::after { content: '✓'; }
.sb__bar i.h::after { content: '◐'; font-size: 12px; }
.sb__bar i.y { background: var(--mint); }
.sb__bar i.h { background: repeating-linear-gradient(135deg, var(--sun) 0 5px, rgba(255, 214, 10, 0.25) 5px 10px); }
.sb__row--funn .sb__bar i.y { background: linear-gradient(90deg, var(--sun), var(--gum)); box-shadow: 0 0 14px rgba(255, 61, 139, 0.45); }
.sb__legend { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 16px; color: var(--soft); font-size: 13px; font-weight: 700; }
.sb__legend b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--paper); font-size: 11px; }
.sb__note { margin: 18px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.sb__note i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: middle; }
.sb__note i.y { background: var(--mint); }
.sb__note i.h { background: repeating-linear-gradient(135deg, var(--sun) 0 3px, rgba(255, 214, 10, 0.25) 3px 6px); }
.sb__note i.o { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 760px) {
  .sb__head { display: none; }
  .sb__row { grid-template-columns: 40px 1fr; grid-template-areas: 'logo name' 'bar bar'; gap: 10px 12px; padding: 14px; }
  .sb__logo { grid-area: logo; width: 40px; height: 40px; border-radius: 11px; }
  .sb__logo--funn { width: 40px; height: 30px; }
  .sb__name { grid-area: name; }
  .sb__name b { font-size: 16px; }
  .sb__name span { font-size: 12px; }
  .sb__bar { grid-area: bar; gap: 4px; }
  .sb__bar i { height: 20px; border-radius: 5px; font-size: 11px; }
  .sb__legend { grid-template-columns: 1fr 1fr; }
}

/* head to head */
.h2hs { margin-top: 6vh; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.h2h { padding: 26px; border-radius: 28px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); }
.h2h header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.h2h header img { width: 56px; height: 56px; border-radius: 15px; }
.h2h header b { display: block; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; }
.h2h header span { display: block; margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.h2h__k { margin: 0 0 8px; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.h2h__k--funn { margin-top: 18px; color: var(--sun); }
.h2h ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.h2h li { position: relative; padding-left: 26px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.h2h li::before { content: '✓'; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--mint); }
.h2h__more li { color: var(--paper); font-weight: 800; }
.h2h__more li::before { content: '+'; color: var(--sun); font-size: 18px; line-height: 1.2; }
@media (max-width: 760px) { .h2hs { grid-template-columns: 1fr; } }

/* giants */
.giants { margin-top: 6vh; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.giant { padding: 22px; border-radius: 24px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 10px; }
.giant img, .giant svg { width: 52px; height: 52px; border-radius: 14px; }
.giant svg { height: 38px; }
.giant b { font-size: 18px; font-weight: 900; }
.giant p { margin: 0; color: var(--soft); font-weight: 700; }
.giant--funn { background: var(--sun); color: var(--ink); border-color: var(--ink); box-shadow: 6px 6px 0 var(--gum); }
.giant--funn p { color: var(--ink); font-family: var(--display); font-size: 24px; line-height: 1; font-weight: 400; }
@media (max-width: 960px) { .giants { grid-template-columns: repeat(2, 1fr); } .giant--funn { grid-column: span 2; } }
.disrupt-head { max-width: 1240px; margin: 0 auto; padding: 4vh var(--gutter) 0; }
@media (max-width: 760px) { .rivals { grid-template-columns: 1fr; } }
.wheel { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; padding: 6vh var(--gutter) 14vh; max-width: 1240px; margin: 0 auto; }
.wheel__ring { position: relative; width: min(440px, 80vw); aspect-ratio: 1; justify-self: center; }
.wheel__ring > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel__spin { position: absolute; inset: 0; will-change: transform; }
.node { position: absolute; left: 50%; top: 50%; width: 108px; margin: -36px 0 0 -54px; padding: 12px 8px; border-radius: 18px; text-align: center; font-weight: 900; font-size: 13px; line-height: 1.2; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--gum); }
.wheel__center { position: absolute; left: 50%; top: 50%; width: 120px; height: 84px; translate: -50% -50%; }
@media (max-width: 860px) { .wheel { grid-template-columns: 1fr; } }
.sources { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) 10vh; font-size: 13px; color: rgba(255, 255, 255, 0.45); }
.sources a { color: rgba(255, 255, 255, 0.7); }

/* ---------- 12. join ---------- */

.join { position: relative; padding: 16vh var(--gutter) 18vh; background: var(--sun); color: var(--ink); overflow: hidden; }
.join__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; max-width: 1240px; margin: 0 auto; align-items: start; z-index: 1; }
.join .kicker { color: var(--gum); }
.join__ticket { width: clamp(120px, 14vw, 200px); height: clamp(84px, 10vw, 140px); margin-bottom: 20px; }
.join__copy .title { font-size: clamp(52px, 7vw, 120px); }
.join__copy p { font-size: 19px; font-weight: 600; max-width: 30ch; }
.form { background: var(--paper); border: 3px solid var(--ink); border-radius: 32px; padding: clamp(20px, 3vw, 36px); box-shadow: 10px 10px 0 var(--ink); }
.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 6px; border-radius: 999px; background: var(--mist); margin-bottom: 22px; }
.seg button { border: 0; border-radius: 999px; padding: 12px 8px; background: transparent; font-weight: 900; font-size: 15px; color: var(--inksoft); cursor: pointer; transition: background 0.25s, color 0.25s; }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields .full { grid-column: 1 / -1; }
.fields[hidden] { display: none; }
.field label { display: block; font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; color: var(--inksoft); }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border-radius: 16px; border: 2px solid rgba(26, 16, 51, 0.15); background: var(--paper); color: var(--ink); font-weight: 700; font-size: 16px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.6); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills label { margin: 0; cursor: pointer; }
.pills input { position: absolute; opacity: 0; pointer-events: none; }
.pills span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 2px solid rgba(26, 16, 51, 0.15); font-weight: 800; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); transition: background 0.2s, border-color 0.2s; }
.pills input:checked + span { background: var(--gum); border-color: var(--ink); color: var(--paper); }
.pills input:focus-visible + span { box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.6); }
.form__foot { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form__foot small { color: var(--inksoft); flex: 1; min-width: 200px; }
.form__err { color: #d0115c; font-weight: 800; margin: 14px 0 0; min-height: 1.5em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done { display: none; text-align: center; padding: 20px 0; }
.done:focus { outline: none; }
.done svg { width: 140px; height: 100px; }
.done h3 { margin: 14px 0 6px; font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; }
.done p { margin: 0 auto; max-width: 34ch; font-weight: 600; }
.form.is-done form:not([data-forget]) { display: none; }
/* The interim privacy note under each sign-up form, and its "Ask us to delete it" mini form. */
.pnote { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(26, 16, 51, 0.18); font-size: 13px; line-height: 1.5; color: var(--inksoft); }
.pnote p { margin: 0; }
.pnote b { color: var(--ink); }
.pnote details { margin-top: 8px; }
.pnote summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 800; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pnote form { display: grid; gap: 6px; margin-top: 4px; }
.pnote label { font-weight: 700; color: var(--ink); }
.pnote__row { display: flex; gap: 8px; flex-wrap: wrap; }
.pnote__row input { flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 10px 14px; border-radius: 14px; border: 2px solid rgba(26, 16, 51, 0.18); font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
.pnote__out { margin: 0; min-height: 1.5em; font-weight: 700; color: var(--ink); }
.form.is-done .done { display: block; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
@media (max-width: 960px) { .join__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .fields { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 36px var(--gutter); background: var(--stage); color: var(--soft); font-size: 14px; }
.foot .wordmark { font-size: 32px; color: var(--sun); }
.foot a { color: var(--soft); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 4px 18px; flex-basis: 100%; }
.foot__legal a { display: inline-block; padding: 6px 0; font-weight: 700; text-underline-offset: 3px; }
.foot__legal a:hover { color: var(--sun); }

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero, .statement, .zoom, .hook, .board { height: auto; }
  .hero__stick, .statement__stick, .zoom__stick, .hook__stick, .board__stick { position: relative; height: auto; min-height: 100vh; }
  .statement__text .w { opacity: 1; }
  .chip, .zoom__copy, .zoom__left, .zoom__right, .toast { opacity: 1; }
  .hero__phone { transform: none; position: relative; left: auto; top: auto; translate: none; margin: 0 auto 10vh; }
  .hero__hint span { animation: none; }
}
.couch .title { font-size: clamp(40px, 4.4vw, 72px); }
.hero__what { position: relative; z-index: 1; padding: 10px 18px; border-radius: 20px; background: rgba(255, 214, 10, 0.9); }

/* thoughts: full lines, never cut off */
.thoughts { padding: 14vh var(--gutter); }
.tcols { max-width: 1200px; margin: 5vh auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tcol { padding: 28px; border-radius: 30px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); display: grid; gap: 14px; }
.tcol--eve { background: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--gum); }
.tcol__k { margin: 0; font-weight: 900; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; }
.tline { margin: 0; font-family: var(--display); font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; overflow-wrap: anywhere; }
.tcol--eve .tline:nth-child(odd) { color: var(--sun); }
.tcol:not(.tcol--eve) .tline:nth-child(odd) { color: var(--gum); }
@media (max-width: 760px) { .tcols { grid-template-columns: 1fr; } .tcol { padding: 22px; } }

.hero__what b { font-weight: 900; }
.pillars { max-width: 1240px; margin: 0 auto 9vh; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pillar { text-decoration: none; color: var(--ink); padding: 22px; border-radius: 26px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); display: grid; gap: 6px; transition: transform 0.2s; }
.pillar:hover { transform: translateY(-4px); }
.pillar i { font-style: normal; font-size: 34px; }
.pillar b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; }
.pillar span { font-weight: 600; font-size: 15px; color: rgba(26, 16, 51, 0.78); }
.p-meet { background: var(--mint); } .p-play { background: var(--gum); color: #fff; } .p-play span { color: rgba(255,255,255,0.9); } .p-plan { background: #fff; } .p-book { background: var(--volt); color: #fff; } .p-book span { color: rgba(255,255,255,0.9); }
.what__how { max-width: 1240px; margin: 0 auto 4vh; font-weight: 900; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gum); }
@media (max-width: 960px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }

.dom { white-space: nowrap; font-family: var(--display); font-weight: 400; font-size: 1.15em; }
.dom i { font-style: normal; color: var(--gum); }
.dom__word { font-style: normal; display: inline-block; min-width: 4.6ch; text-align: left; color: var(--gum); }
.dom__word.out { animation: domout 0.25s forwards; }
.dom__word.in { animation: domin 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes domout { to { transform: translateY(-60%); opacity: 0; } }
@keyframes domin { from { transform: translateY(60%); opacity: 0; } }

.hero__tag { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.4vw, 52px); line-height: 1.05; max-width: 20ch; margin-left: auto; margin-right: auto; }
.hero__cta { margin-top: 18px; position: relative; z-index: 1; }
.join .dom { font-size: 1em; }
@media (max-width: 760px) { .hero__word { font-size: clamp(120px, 34vw, 200px); } .hero__ticket { width: 120px; height: 84px; } }

/* ---------- never wider than the phone ---------- */
html { overflow-x: hidden; }
body { overflow-x: clip; }
main > section, footer { max-width: 100vw; }
.teens, .vendors__grid, .couch, .board__stick, .wheel, .join__grid, .tour__grid, .moves__grid, .play1__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 961px) {
  .moves__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .play1__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .teens { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .vendors__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .couch { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .board__stick { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .wheel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .join__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 861px) { .tour__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.teens > *, .perks li > div, .perks span, .perks b { min-width: 0; overflow-wrap: anywhere; }
/* the pinned hero paints its own colour, so the section behind it never shows as a band */
.hero { background: transparent; }
.steps4, .pillars, .cp3, .earngrid, .fgrid, .h2hs, .giants, .loop__clock, .tiles, .iroles { grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); }
.steps4 { --n: 4; } .pillars { --n: 4; } .cp3 { --n: 3; } .earngrid { --n: 3; } .fgrid { --n: 3; } .iroles { --n: 3; } .h2hs { --n: 2; } .giants { --n: 5; } .loop__clock { --n: 4; } .tiles { --n: 4; }
@media (max-width: 960px) { .steps4, .pillars, .earngrid, .fgrid, .loop__clock, .giants { --n: 2; } .cp3 { --n: 1; } .iroles { --n: 2; } }
@media (max-width: 860px) { .tiles { --n: 2; } }
@media (max-width: 760px) { .h2hs { --n: 1; } }
@media (max-width: 600px) { .iroles { --n: 1; } }
@media (max-width: 640px) { .fgrid { --n: 1; } }
@media (max-width: 560px) { .steps4, .earngrid { --n: 1; } }
@media (max-width: 520px) { .pillars, .loop__clock { --n: 1; } }
@media (max-width: 900px) {
  .teens__phones { width: 100%; max-width: 420px; height: 112vw; max-height: 520px; }
  .teens__phones .phone { --w: min(210px, 40vw); }
  .teens__phones .phone:first-child { left: 4%; }
  .teens__phones .phone:last-child { right: 4%; }
}
.vendors__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.foot__venues { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--sun) !important; text-underline-offset: 3px; }

/* ---------- FUNN MOVES ---------- */
.moves { padding: 16vh var(--gutter); background: var(--stage); }
.moves__grid { max-width: 1240px; margin: 0 auto; display: grid; gap: 5vw; align-items: center; }
.moves .kicker { color: var(--mint); }
.moves__phones { position: relative; display: flex; justify-content: center; gap: 0; }
.moves__phones .phone { --w: min(250px, 42vw); }
.moves__phones .phone:first-child { rotate: -5deg; z-index: 1; }
.moves__phones .phone:last-child { rotate: 5deg; margin-left: -6%; margin-top: 10%; }
.moves__cards { max-width: 1240px; margin: 10vh auto 0; }
.moves__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.moves__bar h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; }
.seg--mini { margin: 0; background: rgba(255, 255, 255, 0.1); }
.seg--mini button { color: var(--soft); padding: 10px 16px; min-height: 44px; }
.seg--mini button[aria-pressed='true'] { background: var(--sun); color: var(--ink); }
.mstrip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 19vw, 220px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.mstrip:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; border-radius: 16px; }
.mcard, .mextra figure { margin: 0; scroll-snap-align: start; }
.mcard img, .mextra img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: var(--card); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); transition: opacity 0.35s var(--ease); }
.mcard figcaption, .mextra figcaption { margin-top: 10px; font-weight: 800; font-size: 14px; color: var(--soft); }
.mextra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 5vh; }
.mextra figure:nth-child(2) img { aspect-ratio: 1; object-fit: contain; }
.moves__note { margin: 18px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
@media (max-width: 760px) { .mextra { grid-template-columns: repeat(2, minmax(0, 1fr)); } .moves__phones .phone { --w: min(200px, 44vw); } }

/* ---------- 3. Play: Gaddaar Kaun? and Pakda Gaya first ---------- */
.play1 { padding: 16vh var(--gutter); background: var(--ink); }
.play1__grid { max-width: 1240px; margin: 0 auto; display: grid; gap: 5vw; align-items: center; }
.play1 .kicker { color: var(--gum); }
.gk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.gk__card { padding: 24px; border-radius: 28px; border: 3px solid var(--stage); box-shadow: 6px 6px 0 var(--stage); color: var(--ink); }
.gk--gum { background: var(--gum); color: var(--paper); }
.gk--sun { background: var(--sun); }
.gk__card .meta { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.gk__card h3 { margin: 8px 0; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1; }
.gk__card p:last-child { margin: 0; font-weight: 600; }
.play1__order { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.play1__order li { display: flex; gap: 12px; align-items: center; font-weight: 700; color: var(--soft); }
.play1__order b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--sun); font-weight: 900; }
.play1__phone { display: grid; place-items: center; }
.play1__phone .phone { --w: min(280px, 64vw); rotate: 4deg; }
@media (max-width: 640px) { .gk { grid-template-columns: 1fr; } }

/* ---------- 6. Internships: a hot-pink block, roles as tickets ---------- */
.intern { padding: 16vh var(--gutter); background: var(--gum); color: var(--ink); }
.intern__head, .iroles, .intern__apply { max-width: 1240px; margin-left: auto; margin-right: auto; }
.intern__head { position: relative; }
.intern .kicker { color: var(--ink); }
.intern .lede { color: var(--ink); max-width: 46ch; font-weight: 600; }
.intern__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.iroles { display: grid; gap: 22px 18px; margin-top: 6vh; }
.intern__apply { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 24px 32px; margin-top: 7vh; padding: clamp(22px, 3vw, 36px); border-radius: 32px; background: var(--ink); color: var(--paper); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
.intern__k { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sun); }
.intern__mail { margin: 8px 0; }
.intern__mail .mail { font-family: var(--display); font-size: clamp(26px, 3.4vw, 44px); line-height: 1.1; color: var(--sun); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.intern__subj { margin: 0; color: rgba(255, 255, 255, 0.82); font-weight: 600; }
.intern__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.intern__tag { max-width: 1240px; margin: 7vh auto 0; text-align: center; }
.intern__tag span { display: inline-block; padding: 0.12em 0.4em 0.18em; border-radius: 0.3em; background: var(--sun); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); font-family: var(--display); font-size: clamp(30px, 4.4vw, 60px); line-height: 1; color: var(--ink); rotate: -2deg; }
@media (max-width: 860px) { .intern__apply { grid-template-columns: minmax(0, 1fr); } }
.moves .title, .play1 .title { font-size: clamp(44px, 5.4vw, 88px); }

/* ---------- v3: brighter blocks, the hero, the marquee and the forms ---------- */

/* Colour blocks: pink, mint and blush break up the white sections. Text on them is ink (5:1 or better). */
.chatplan { background: var(--blush); }
.chatplan .kicker, .chatplan .lede { color: var(--ink); }
.chatplan .cp3 article { box-shadow: 0 7px 0 var(--ink); }
.loop { background: var(--mint); }
.loop .kicker, .loop__head .lede { color: var(--ink); }
.loop .midcta { border-color: rgba(26, 16, 51, 0.35); }
.earn .kicker, .features .kicker, .what .kicker { color: #c40f57; }
.what .kicker { color: var(--ink); }
.what .lede { color: var(--ink); }
.what__how { color: var(--ink); }
.what__head, .features__head, .sec__head { position: relative; }

/* Sticker cards: a slight tilt that settles on hover. */
.pillar:nth-child(odd) { rotate: -1.2deg; } .pillar:nth-child(even) { rotate: 1deg; }
.pillar { transition: transform 0.35s var(--soft-ease), rotate 0.35s var(--soft-ease); }
.pillar:hover { rotate: 0deg; }
.pillar:focus-visible, .brochure:focus-visible { outline: 3px solid var(--volt); outline-offset: 4px; }
.cp3 article:nth-child(1) { rotate: -1deg; } .cp3 article:nth-child(3) { rotate: 1deg; }
.beat:nth-child(odd) { rotate: -0.8deg; } .beat:nth-child(even) { rotate: 0.8deg; }

/* Hero: sized by the screen's height too, so ticket, word, lines and buttons always fit (they overlapped at 1440 x 900). */
.hero__ticket { width: clamp(120px, min(22vw, 22vh), 300px); height: clamp(84px, min(15vw, 15vh), 210px); }
.hero__word { font-size: clamp(110px, min(30vw, 33vh), 440px); }
.hero__tag { font-size: clamp(24px, min(3.4vw, 4.6vh), 50px); }
.hero__what { text-wrap: pretty; margin-top: 18px; padding: 12px 18px; border-radius: 20px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); rotate: -1.2deg; max-width: 38ch; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 22px; }
.hero__more { --btn-bg: rgba(255, 255, 255, 0.85); }
.hero__float { position: absolute; width: clamp(54px, 6vw, 92px); height: clamp(38px, 4.2vw, 64px); filter: drop-shadow(0 8px 10px rgba(26, 16, 51, 0.18)); pointer-events: none; }
.hf1 { left: 7vw; top: 64vh; --t: 12s; --r0: -18deg; --r1: -10deg; --fy: -18px; }
.hf2 { right: 6vw; top: 30vh; --t: 14s; --r0: 14deg; --r1: 22deg; --fx: -8px; --delay: -4s; }
.hs1 { left: 16vw; top: 18vh; --s: 30px; --c: #fff; }
.hs2 { right: 22vw; bottom: 16vh; --s: 38px; --c: var(--gum); --delay: -1.5s; }
.hs3 { left: 30vw; bottom: 9vh; --s: 22px; --c: var(--mint); --delay: -3s; }
.confetto { position: absolute; width: 14px; height: 7px; border-radius: 3px; background: var(--c); pointer-events: none; animation: floaty var(--t, 10s) ease-in-out infinite alternate; }
.cf1 { --c: var(--gum); left: 24vw; top: 30vh; --r0: 20deg; --r1: 60deg; }
.cf2 { --c: var(--volt); right: 30vw; top: 16vh; --r0: -30deg; --r1: 10deg; --t: 13s; }
.cf3 { --c: var(--tang); left: 12vw; bottom: 30vh; --r0: 70deg; --r1: 110deg; --t: 9s; }
.cf4 { --c: #fff; right: 14vw; bottom: 34vh; --r0: -10deg; --r1: 30deg; --t: 12s; }
@media (max-width: 760px) {
  .hf1 { left: -10px; top: auto; bottom: 18vh; }
  .hf2 { right: -8px; top: 15vh; }
  .hs1 { left: 6vw; top: 22vh; } .hs2 { right: 8vw; bottom: 10vh; } .hs3 { display: none; }
  .hero__ticket { width: 110px; height: 77px; }
  .hero__word { font-size: clamp(100px, min(33vw, 22vh), 180px); }
  .hero__what { font-size: 15px; padding: 10px 14px; }
  .hero__cta .btn--big { min-height: 52px; padding: 12px 24px; font-size: 17px; }
  .hero__cta .btn--ticket.btn--big { --py: 12px; padding-inline: 28px; }
}
@media (max-height: 760px) { .hero__hint { display: none; } }
@media (max-width: 760px) and (max-height: 700px) { .hero__what { display: none; } }

/* Nav: the CTA is a small ticket; on phones a menu button sits next to it. */
.nav__cta-short { display: none; }
@media (max-width: 1100px) { .nav { padding-left: 12px; gap: 10px; } }
@media (max-width: 480px) {
  .nav { padding: 6px 6px 6px 12px; gap: 8px; }
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
  .nav .nav__brand { margin-right: auto; }
  .nav__ticket { width: 32px; height: 24px; }
}
.nav__links a:focus-visible, .nav__brand:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; border-radius: 999px; }

/* FUNN MOVES: the ten cards drift by as a marquee of tilted stickers. */
.mstrip--marquee { display: block; overflow: hidden; padding: 14px 0 26px; touch-action: pan-y; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.mstrip__track { display: flex; gap: 22px; padding-right: 22px; width: max-content; animation: marquee 80s linear infinite; }
.mstrip--marquee .mcard { width: clamp(150px, 17vw, 210px); flex: none; transition: rotate 0.4s var(--soft-ease), translate 0.4s var(--soft-ease); }
.mstrip--marquee .mcard:nth-child(odd) { rotate: -2.5deg; } .mstrip--marquee .mcard:nth-child(even) { rotate: 2deg; translate: 0 10px; }
.mstrip--marquee .mcard:hover { rotate: 0deg; translate: 0 -6px; }
.mstrip--marquee .mcard img { border: 3px solid #fff; }
.mstrip--marquee:hover .mstrip__track, .mstrip--marquee:focus-within .mstrip__track, .mstrip--marquee.is-paused .mstrip__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.moves__bar { gap: 12px; }
.moves__bar .seg { margin-left: auto; }
.mstrip { touch-action: pan-x pan-y; }

/* Forms: chunky toggles and pills. */
.seg { border: 3px solid var(--ink); background: #fff; }
.seg button { min-height: 44px; transition: background 0.25s var(--soft-ease), color 0.25s, transform 0.25s var(--soft-ease); }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.seg button:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.seg--mini { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); }
.pills span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 9px 16px; border: 2px solid var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink); transition: background 0.2s, transform 0.2s var(--soft-ease), box-shadow 0.2s; }
.pills label:hover span { transform: translateY(-1px); }
.pills input:checked + span { background: var(--gum); color: var(--ink); transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.pills input:checked + span::before { content: '✓'; font-weight: 900; }
.field input, .field select, .field textarea { border: 2px solid rgba(26, 16, 51, 0.3); }
.form { box-shadow: 0 10px 0 var(--ink); }
.join__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 14px; border-radius: 16px; border: 3px dashed var(--ink); color: var(--ink); font-weight: 900; font-size: 17px; line-height: 1.05; }
.store .i { width: 26px; height: 26px; }
.store small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }

/* Footer: pill links. */
.foot__links { display: flex; flex-wrap: wrap; gap: 10px; }
.foot .pill { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .hero__float, .confetto { animation: none; }
}
.join .kicker { color: var(--ink); }
.seg--mini button[aria-pressed='true'] { background: var(--sun); color: var(--ink); }

/* Contrast fixes (audit): ink on pink (5.4:1) instead of white (3.3:1); the teens list had picked up the venue list's white text on mint. */
.f-gum, .gcard.t-gum, .gk--gum { color: var(--ink); }
.p-play, .p-play span { color: var(--ink); }
.steps4 .n { color: var(--ink); }
.teens .perks span { color: rgba(26, 16, 51, 0.86); }
.teens .perks i { background: var(--sun); color: var(--ink); }
.vendors .perks span { color: #fff; }
/* Every nav link and the logo are a full 44 px target. */
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; }
.nav__brand { min-height: 44px; }
.gcard.t-gum, .tile__f.t-gum { color: var(--ink) !important; }
.vendors .kicker { color: #fff; }
.sources { color: rgba(255, 255, 255, 0.62); }
.join .dom i { color: var(--ink); }
.join .dom__word { color: #c40f57; } /* 4.4:1 on sunshine, fine for headline-size text */
/* WebKit ignored the padding on native selects (26 px tall); draw our own so it matches the inputs. */
.field select { -webkit-appearance: none; appearance: none; min-height: 52px; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231a1033' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; }
/* Hook Rush: the sky turns bright orange at Sunset Beach, so the words sit on darker glass (they were 1.3:1 there). */
.hook__stick::after { background: linear-gradient(rgba(13, 7, 32, 0.7), rgba(13, 7, 32, 0.15) 32%, transparent 48%, rgba(13, 7, 32, 0.6) 66%, rgba(13, 7, 32, 0.92)); }
.hook__hud .kicker, .hook__zone { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(13, 7, 32, 0.8); }
.hook__zone { color: #fff; }
.hook__copy p { color: rgba(255, 255, 255, 0.92); }
.join__copy .join__stores { max-width: none; }
.intern { padding-bottom: 12vh; }
@media (max-width: 520px) { .form__foot .btn { width: 100%; } }