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

/* --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-hidden .btn { box-shadow: none; }
.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); }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
  box-shadow: 0 4px 0 var(--ink), 0 10px 30px rgba(255, 214, 10, 0.25);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn--gum { background: var(--gum); color: var(--paper); box-shadow: 0 4px 0 var(--ink), 0 10px 30px rgba(255, 61, 139, 0.3); }
.btn--big { padding: 18px 30px; font-size: 18px; }

@media (max-width: 760px) {
  .nav__links { display: none; }
  .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(--paper); }
.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); 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; }
}
@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; } }

/* ---------- collect & earn ---------- */
.earn { padding: 16vh var(--gutter); background: var(--paper); color: var(--ink); }
.stubrow { max-width: 1240px; margin: 0 auto; }
.stubs3 { display: flex; justify-content: center; gap: 2vw; flex-wrap: wrap; perspective: 1000px; }
.pstub { position: relative; width: clamp(130px, 14vw, 200px); aspect-ratio: 3 / 4; border-radius: 22px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); display: grid; justify-items: center; align-content: center; gap: 10px; background: #fff; overflow: hidden; }
.pstub::before, .pstub::after { content: ''; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.pstub::before { left: -16px; }
.pstub::after { right: -16px; }
.pstub span { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; }
.pstub svg { width: 70%; height: 30%; }
.pstub b { font-family: var(--display); font-weight: 400; font-size: clamp(16px, 1.4vw, 22px); }
.pstub.r-common { background: #E3FBF4; }
.pstub.r-rare { background: #E5EBFF; }
.pstub.r-epic { background: #FFE3EE; }
.pstub.r-legend { background: linear-gradient(135deg, #FFF5C7, #FFD60A 45%, #FFF5C7 55%, #FFD60A); background-size: 300% 300%; animation: shine 3s linear infinite; }
@keyframes shine { to { background-position: 100% 100%; } }
.rarity { list-style: none; padding: 0; margin: 4vh 0 0; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.rarity li { padding: 8px 16px; border-radius: 999px; border: 2px solid var(--ink); font-weight: 800; }
.rarity b { font-weight: 900; }
.rarity .r-common { background: #00D6A3; } .rarity .r-rare { background: #2D5BFF; color: #fff; } .rarity .r-epic { background: #FF3D8B; color: #fff; } .rarity .r-legend { background: #FFD60A; }
.ladder { list-style: none; padding: 0; margin: 8vh auto 0; max-width: 1240px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; position: relative; }
.ladder::before { content: ''; position: absolute; left: 0; right: 0; top: 34px; height: 8px; border-radius: 8px; background: var(--mist); z-index: 0; }
.ladder::after { content: ''; position: absolute; left: 0; top: 34px; height: 8px; border-radius: 8px; width: var(--fill, 0%); background: linear-gradient(90deg, var(--mint), var(--sun), var(--gum)); z-index: 0; transition: width 0.2s; }
.ladder li { position: relative; z-index: 1; text-align: center; }
.ladder b { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); font-family: var(--display); font-weight: 400; font-size: 26px; box-shadow: 4px 4px 0 var(--ink); }
.ladder span { display: block; font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inksoft); margin-top: 8px; }
.ladder p { margin: 6px 0 0; font-weight: 800; font-size: 15px; }
.ladder li:last-child b { background: var(--sun); }
.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) {
  .ladder { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .ladder::before, .ladder::after { display: none; }
  .earngrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .earngrid { grid-template-columns: 1fr; } .stubs3 { gap: 18px; } .pstub { width: 40vw; } }

/* ---------- 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(260px, 22vw); }
.vendors__phones .phone:nth-child(1) { left: 0; top: 8%; rotate: -8deg; }
.vendors__phones .phone:nth-child(2) { left: 32%; top: 0; z-index: 2; }
.vendors__phones .phone:nth-child(3) { left: 64%; 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; }
}

.stats { padding: 14vh var(--gutter); max-width: 1240px; margin: 0 auto; }
.stats__grid { margin-top: 6vh; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.stat { position: relative; padding: 30px; border-radius: 30px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
.stat::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--c); opacity: 0.22; filter: blur(30px); }
.stat:nth-child(1) { --c: var(--sun); } .stat:nth-child(2) { --c: var(--gum); } .stat:nth-child(3) { --c: var(--mint); } .stat:nth-child(4) { --c: var(--volt); }
.stat__n { margin: 0; font-family: var(--display); font-size: clamp(60px, 7vw, 112px); line-height: 0.9; color: var(--c); }
.stat h4 { margin: 14px 0 8px; font-size: 22px; font-weight: 900; }
.stat p:not(.stat__n) { margin: 0; color: var(--soft); }
.stat cite { display: block; margin-top: 16px; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
@media (max-width: 760px) { .stats__grid { grid-template-columns: 1fr; } }

.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 76px; 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: 22px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); }
.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__score { margin: 0; text-align: right; color: var(--soft); font-weight: 800; }
.sb__score b { font-family: var(--display); font-weight: 400; font-size: 34px; color: var(--paper); }
.sb__row--funn .sb__score b { color: var(--sun); }
.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.n { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 760px) {
  .sb__head { display: none; }
  .sb__row { grid-template-columns: 40px 1fr auto; grid-template-areas: 'logo name score' 'bar 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: 16px; border-radius: 5px; }
  .sb__score { grid-area: score; }
  .sb__score b { font-size: 28px; }
  .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); }

/* ---------- 11. investors ---------- */

.investors { padding: 18vh var(--gutter); background: var(--stage); }
.investors__head { max-width: 1200px; margin: 0 auto 7vh; }
.why { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why article { padding: 30px; border-radius: 28px; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; }
.why article::before { content: ''; position: absolute; inset: auto -40% -60% auto; width: 80%; aspect-ratio: 1; border-radius: 50%; background: var(--c, var(--gum)); opacity: 0.18; filter: blur(30px); }
.why .big { font-family: var(--display); font-size: clamp(54px, 6vw, 92px); line-height: 0.9; color: var(--c, var(--gum)); }
.why h4 { margin: 14px 0 8px; font-size: 22px; font-weight: 900; }
.why p { margin: 0; color: var(--soft); }
.why .span2 { grid-column: span 2; }
.investors__cta { max-width: 1200px; margin: 6vh auto 0; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.investors__cta p { margin: 0; color: var(--soft); }
@media (max-width: 960px) { .why { grid-template-columns: 1fr; } .why .span2 { grid-column: auto; } }

/* ---------- 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(3, 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 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 { display: none; }
.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); }

/* ---------- 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, .investors, .join__grid, .tour__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 961px) {
  .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, .why, .stats__grid, .h2hs, .giants, .loop__clock, .tiles { 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; } .why { --n: 3; } .stats__grid { --n: 2; } .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, .why { --n: 1; } }
@media (max-width: 860px) { .tiles { --n: 2; } }
@media (max-width: 760px) { .stats__grid, .h2hs { --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%; }
}
@media (max-width: 560px) {
  .stubs3 { gap: 14px 6vw; }
  .pstub { width: 36vw; }
  .pstub::before { left: -14px; } .pstub::after { right: -14px; }
}
@media (max-width: 560px) { .stubs3 { row-gap: 34px; } }