/* Self-hosted from Google Fonts (OFL): Kanit 500/600, Plus Jakarta Sans 400–800 — latin + latin-ext only.
   Indic scripts fall back to system fonts, as before. */
/* Kanit 500 latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/kanit-500-latin-ext.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;
}
/* Kanit 500 latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/kanit-500-latin.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;
}
/* Kanit 600 latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/kanit-600-latin-ext.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;
}
/* Kanit 600 latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/kanit-600-latin.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;
}
/* Plus Jakarta Sans 400 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-latin-ext.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;
}
/* Plus Jakarta Sans 400 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-latin.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;
}
/* Plus Jakarta Sans 500 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-latin-ext.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;
}
/* Plus Jakarta Sans 500 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-latin.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;
}
/* Plus Jakarta Sans 600 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-latin-ext.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;
}
/* Plus Jakarta Sans 600 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-latin.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;
}
/* Plus Jakarta Sans 700 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-latin-ext.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;
}
/* Plus Jakarta Sans 700 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-latin.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;
}
/* Plus Jakarta Sans 800 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-latin-ext.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;
}
/* Plus Jakarta Sans 800 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/plus-jakarta-sans-latin.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;
}

/* ==========================================================================
   PlayDuo — landing page
   Tokens mirror the Figma variables in the PlayDuo handoff file.
   ========================================================================== */

:root {
  /* surface / border / text (Figma: surface/neutral/*, border/neutral/*) */
  --bg: #1c2430;              /* surface/neutral/subtle */
  --bg-deep: #141a23;
  --surface: #2f3c51;         /* surface/neutral/muted  */
  --border: #556d91;          /* border/neutral/moderate */
  --border-light: #e3e0de;
  --text: #ffffff;
  --text-2: #9eaec7;
  --text-alpha: #ffffff99;    /* text/alpha/default */
  --cream: #f5f1e4;
  --success: #009b55;         /* surface/success/moderate/default */

  /* brand + illustration palette (sampled from the shapes in the file) */
  --pink: #fe5c99;
  --pink-dark: #d23c76;
  --pink-soft: #fd6aa3;
  --blue: #22aef9;
  --yellow: #faba43;
  --green: #36d87e;
  --purple: #946afa;
  --red: #e53e3e;

  --font-display: "Kanit", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 20px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --max: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] { display: none !important; }   /* components set display; hidden must still win */
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: clamp(46px, 5.3vw, 78px); line-height: 0.92; letter-spacing: -0.025em; }
h2 { font-size: clamp(36px, 5vw, 64px); line-height: 0.95; letter-spacing: -0.02em; }
h3 { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.1; }

.lede { color: var(--text-2); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; letter-spacing: -0.005em; margin: 20px 0 0; max-width: 34ch; text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
/* feature headlines carry the brand colour, Duolingo-style */
.feature__copy h2, .builder h2 { color: var(--pink); }
[data-split] .w { display: inline-block; }
.eyebrow {
  display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pink); margin-bottom: 14px;
}
.accent { color: var(--pink); }

/* --------------------------------------------------------------------------
   Button — the app's chunky pill (white, 2px border, 4px hard shadow)
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: #fff;
  --btn-fg: var(--bg);
  --btn-border: var(--border-light);
  --btn-shadow: var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 32px;
  border-radius: 31px;
  border: 2px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 24px;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 0 0 var(--btn-shadow);
  cursor: pointer; white-space: nowrap;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 0 var(--btn-shadow); }
.btn--pink { --btn-bg: var(--pink); --btn-fg: #fff; --btn-border: #ff7fb0; --btn-shadow: var(--pink-dark); }
.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-border: var(--border); --btn-shadow: var(--surface); }
.btn--ghost:hover { --btn-bg: var(--surface); filter: none; }
.btn--sm { min-height: 42px; padding: 8px 20px; font-size: 14px; }
.btn--block { width: 100%; }
.btn svg { width: 22px; height: 22px; flex: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 2px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.header.is-scrolled { background: rgb(28 36 48 / .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--surface); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { width: 44px; height: 44px; }
.logo__word { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; line-height: 1; }
.logo__wordmark { display: block; height: 60px; width: auto; }
.logo__wordmark--footer { height: 96px; }
.header__actions { display: flex; align-items: center; gap: 12px; }
.header__nav { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 20px); margin-right: 8px; }
.header__cta { opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.header.is-past-hero .header__cta { opacity: 1; transform: none; pointer-events: auto; }
.header__link { font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); padding: 8px 4px; }
.header__link:hover { color: #fff; }
@media (max-width: 900px) { .header__nav { display: none; } }
@media (max-width: 640px) { .logo__word { font-size: 24px; } .logo__mark { width: 38px; height: 38px; } .logo__wordmark { height: 50px; } .logo__wordmark--footer { height: 80px; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { isolation: isolate; position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + 24px) 0 48px; overflow: clip; }
/* Chamber grid: flat-top hexes like the Figma chambers, in the neutral tokens — no colour
   gradients. ::before is the resting grid (surface/neutral/muted), faded out at the edges;
   ::after is the same grid in border/neutral/moderate, revealed only around the pointer,
   like a lamp passing over the chambers. --mx/--my/--lit are set from main.js. */
.hero::before, .final::before, .lost::before, .hero::after, .final::after, .lost::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-position: 50% 0;
}
.hero::before, .final::before, .lost::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='62.36' viewBox='0 0 84 48.5'%3E%3Cpath d='M0 24.25L14 0H42L56 24.25L42 48.5H14ZM56 24.25H84' fill='none' stroke='%232f3c51' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--grid-fade); mask-image: var(--grid-fade);
  opacity: .6;
}
.hero::after, .final::after, .lost::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='62.36' viewBox='0 0 84 48.5'%3E%3Cpath d='M0 24.25L14 0H42L56 24.25L42 48.5H14ZM56 24.25H84' fill='none' stroke='%23556d91' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --lamp: radial-gradient(190px circle at var(--mx, -400px) var(--my, -400px), #000 0%, rgb(0 0 0 / .45) 45%, transparent 100%);
  -webkit-mask-image: var(--lamp); mask-image: var(--lamp);
  opacity: var(--lit, 0); transition: opacity .4s var(--ease-out);
}
.hero { --grid-fade: radial-gradient(60% 80% at 30% 50%, #000 20%, transparent 85%); }
.hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 72px); }
.hero__copy h1 { max-width: 11ch; }
.hero__copy .lede { max-width: 30ch; }
.hero__ctas { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; max-width: 340px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--text-2); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%231c2430' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 8px); }
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { order: 2; display: flex; flex-direction: column; align-items: center; }
  .hero__copy h1, .hero__copy .lede { margin-left: auto; margin-right: auto; }
  .hero__ctas { width: 100%; }
  .trust { justify-content: center; }
}

/* Cluster: positions are the onboarding-1 illustration (node 1309:9533) in % of its own bounding box */
.cluster { position: relative; width: 100%; container-type: inline-size; }
.cluster > * { position: absolute; left: var(--x); top: var(--y); width: var(--w); will-change: transform; }
.cluster > * > img { width: 100%; height: auto; }

.cluster--hero { aspect-ratio: 483.22 / 434.87; max-width: 680px; margin: 0 auto; }
.cluster--talk { aspect-ratio: 374.7 / 406.2; max-width: 500px; margin: 0 auto; }
.cluster--call { aspect-ratio: 406.89 / 387.58; max-width: 520px; margin: 0 auto; }

/* chat bubble (node 1309:9640): surface fill, 20px radius with a 5px "tail" corner */
.bubble {
  background: var(--surface); color: #fff;
  border-radius: 5.35cqw 5.35cqw 5.35cqw 1.34cqw;
  padding: 3.6cqw 5.6cqw;
  font-size: 4.02cqw; line-height: 1.33; letter-spacing: 0.001em;
  box-shadow: 0 1cqw 0 rgb(0 0 0 / .18);
}
.bubble--right { border-radius: 5.35cqw 5.35cqw 1.34cqw 5.35cqw; }
.bubble .typing { display: none; gap: 1.2cqw; align-items: center; height: 1.33em; }
.bubble .typing i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--text-2); animation: typing 1s infinite ease-in-out; }
.bubble .typing i:nth-child(2) { animation-delay: .15s; }
.bubble .typing i:nth-child(3) { animation-delay: .3s; }
.bubble.is-typing .typing { display: inline-flex; }
.bubble.is-typing .msg { display: none; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-40%); opacity: 1; } }

/* speaking ring on call portraits */
.speaking:not(.cluster > *) { position: relative; }   /* in a cluster it stays absolutely placed */
.speaking::after {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  border: 0.8cqw solid rgb(255 255 255 / .55); opacity: 0; pointer-events: none;
}
.is-live .speaking::after { animation: speak 1.6s ease-out infinite; }
.is-live .speaking--b::after { animation-delay: .8s; }
@keyframes speak { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }

/* --------------------------------------------------------------------------
   Language strip (Duolingo's language carousel)
   -------------------------------------------------------------------------- */
.langs { border-block: 2px solid var(--surface); padding: 22px 0; overflow: hidden; }
.langs__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; padding-inline: var(--gutter); }
.langs__label { flex: none; font-weight: 700; color: var(--text-2); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.langs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }

/* filter chip (chips/fitler-chip in the file) */
.chip {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 18px;
  border: 2px solid var(--border); border-radius: var(--radius-m); background: var(--bg);
  box-shadow: 0 4px 0 0 var(--surface);
  white-space: nowrap; font-weight: 700; font-size: 16px;
}
.chip small { font-weight: 500; color: var(--text-2); font-size: 13px; }
@media (max-width: 640px) { .langs__label { flex-basis: 100%; text-align: center; } .langs__list { gap: 10px; } }

/* --------------------------------------------------------------------------
   Feature rows
   -------------------------------------------------------------------------- */
.section { padding: clamp(80px, 12vw, 160px) 0; position: relative; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.feature--flip .feature__art { order: 2; }
.feature__copy h2 { max-width: 11ch; }
.feature__copy .lede { max-width: 32ch; }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; text-align: center; }
  .feature--flip .feature__art { order: 0; }
  .feature__copy { display: flex; flex-direction: column; align-items: center; }
  .feature__copy h2 { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   Play anywhere — pieces burst out of a chamber as you scroll (Duolingo's
   "learn anytime, anywhere" moment, rebuilt with our chambers and tunnels)
   -------------------------------------------------------------------------- */
.scatter { position: relative; z-index: 6; height: 100svh; min-height: 700px; overflow: clip; isolation: isolate; }
.scatter__field { position: absolute; inset: 0; z-index: 0; perspective: 1100px; perspective-origin: 50% 66%; pointer-events: none; }
.scatter__item { position: absolute; left: var(--x); top: var(--y); width: var(--w); translate: -50% -50%; rotate: var(--r, 0deg); will-change: transform, opacity; }
.scatter__item img, .scatter__item svg { width: 100%; height: auto; }
.scatter__item img { filter: drop-shadow(0 10px 18px rgb(0 0 0 / .28)); }
.scatter__item .scatter__avatar { filter: drop-shadow(0 6px 0 rgb(0 0 0 / .22)) drop-shadow(0 12px 16px rgb(0 0 0 / .25)); }
.scatter__bob { display: block; }
/* the whole phone fits under the CTA: sized from the height left over (phone height ≈ 2 × width),
   and placed so its bottom sits just above the section edge. Positioned by its centre for the burst maths. */
.scatter__portal { --pw: max(116px, min(240px, 16vw, calc((100svh - 492px) / 2))); position: absolute; left: 50%; top: calc(100% - 28px - var(--pw)); width: var(--pw); translate: -50% -50%; display: none; }
.motion-ready .scatter__portal { display: block; }
.phone.phone--source { width: 100%; padding: 5%; border-radius: 16% / 7.6%; box-shadow: 0 0 0 2px #2a3546 inset, 0 0 calc(40px * var(--glow, 0)) calc(6px * var(--glow, 0)) rgb(254 92 153 / .55), 0 24px 40px -14px rgb(0 0 0 / .6); }
.phone.phone--source::before { top: 3.4%; width: 20%; height: 1.9%; border-radius: 99px; }
.phone--source .phone__screen { border-radius: 12% / 5.6%; }
.phone__flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, #fff 0%, #ffe3ef 45%, rgb(254 92 153 / .6) 100%); opacity: 0; mix-blend-mode: screen; }
/* the burst itself: a shockwave ring and flying bits, all centred on the phone screen */
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.burst__ring { position: absolute; left: 0; top: 0; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 6px solid #fff; opacity: 0; }
.burst__ring--pink { border-color: var(--pink); border-width: 10px; }
.burst__bit { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); background: var(--c); opacity: 0; }
.burst__bit--hex { clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%); }
.burst__bit--dot { border-radius: 50%; }
.burst__bit--streak { width: calc(var(--s) * .32); height: calc(var(--s) * 1.6); border-radius: 99px; margin: calc(var(--s) * -.8) 0 0 calc(var(--s) * -.16); }
.scatter__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(var(--header-h) + 4vh); pointer-events: none; }
.scatter__copy h2 { font-size: clamp(46px, 6.4vw, 92px); line-height: .9; letter-spacing: -.03em; max-width: 12ch; }
.scatter__copy .lede { margin-inline: auto; max-width: 30ch; }
.scatter__copy .btn { margin-top: 28px; pointer-events: auto; }
@media (max-width: 760px) {
  .scatter { min-height: 640px; }
  .scatter__item { left: var(--mx, var(--x)); top: var(--my, var(--y)); width: var(--mw, var(--w)); }
  .scatter__item[data-desk] { display: none; }
  .scatter__portal { --pw: max(130px, min(200px, calc((100svh - 420px) / 2))); }
  .scatter__field { perspective-origin: 50% 76%; }
}

/* Figma chamber (see chamberSVG) — fills come from --top / --ext / --rec */
.chamber { display: block; overflow: visible; }
.chamber .c-ext { fill: var(--ext); }
.chamber .c-top { fill: var(--top); }
.chamber .c-rec { fill: var(--rec); }
.chamber .lamp__base { fill: #597297; }
.chamber .lamp__beam { opacity: .5; }
.chamber .lamp__light { fill: #fff; opacity: .7; }
.chamber text { fill: #fff; font-weight: 800; }
.chamber .c-shadow { fill: var(--ext); }

/* --------------------------------------------------------------------------
   Tunnel — one pipe down the right margin, a chamber per section; the
   mascot rides it with the scroll. Needs real margin, so wide screens only.
   -------------------------------------------------------------------------- */
main { position: relative; }
/* no z-index on .tunnel itself, so its parts layer with the page: pipe under the
   talk art and game chambers (z 6), mascot over everything (z 8) */
.tunnel { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; display: none; }
.tunnel.is-on { display: block; }
.tunnel__svg { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tunnel-on [data-talk-pipes], .tunnel-on .path__svg { visibility: hidden; }
.tunnel-on .cluster--talk { z-index: 6; }
/* room between game chambers for the pipe's elbows (matches the JS breakpoint) */
@media (min-width: 1240px) and (prefers-reduced-motion: no-preference) { .stop + .stop { margin-top: 64px; } }   /* room for the pipe's elbows between rows */
.tunnel__svg path { fill: none; stroke-linejoin: round; }
.tunnel__svg path { stroke-width: var(--pipe, 16px); }
.tunnel__pipe { stroke: #556d91; }            /* shows only as the light top edge */
.tunnel__mask { stroke: #fff; }
.tunnel__fill { stroke: var(--surface); translate: 0 calc(var(--pipe, 16px) / 4); }
.tunnel__svg .tunnel__trail { stroke: var(--pink); stroke-width: calc(var(--pipe, 16px) * .32); stroke-linecap: round; opacity: .9; }
/* the Figma chamber (slate when idle, pink once the mascot has passed); the hex face centre sits at 44.9% of the artwork */
.tunnel__chamber { position: absolute; z-index: 5; width: var(--ch, 120px); translate: -50% -44.9%; --top: #425571; --ext: #2f3c51; --rec: #556d91; }
.tunnel__chamber svg { transform-origin: 50% 45%; }
.tunnel__chamber .c-top, .tunnel__chamber .c-rec, .tunnel__chamber .c-ext { transition: fill .35s ease; }
.tunnel__chamber .lamp__light { transition: opacity .35s ease; }
.tunnel__chamber.is-lit { --top: var(--pink); --ext: #b8336a; --rec: #4a2236; }
.tunnel__chamber.is-lit .lamp__light { opacity: 1; filter: drop-shadow(0 0 3px #fff); }
.tunnel__chamber.is-lit .lamp__beam { opacity: .8; }
.tunnel__pal { position: absolute; z-index: 8; left: 0; top: 0; width: calc(var(--ch, 120px) * .4); will-change: transform; }
.tunnel__body { display: block; aspect-ratio: 1; filter: drop-shadow(0 4px 0 rgb(0 0 0 / .3)); }
@media (prefers-reduced-motion: reduce) { .tunnel { display: none !important; } }

/* "real people" — the headline is the hero of this section; portraits orbit it */
.people { overflow: clip; padding-block: clamp(120px, 16vw, 220px); }
.people__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.people__title { font-size: clamp(54px, 10vw, 148px); line-height: 0.88; letter-spacing: -0.035em; max-width: 9ch; margin-top: 22px; }
.people .lede { margin-inline: auto; text-align: center; }
.people__mascot { width: clamp(64px, 7vw, 92px); margin-top: 28px; }
.crowd__pal { position: absolute; z-index: 0; left: var(--x); top: var(--y); width: clamp(92px, 13vw, 190px); }
.crowd__pal--lg { width: clamp(104px, 15vw, 220px); }
.crowd__pal img { width: 100%; }
@media (max-width: 760px) {
  .people { padding-block: 150px; }
  .crowd__pal { width: 84px; } .crowd__pal--lg { width: 96px; }
  .crowd__pal:nth-child(1) { --y: 3% !important; } .crowd__pal:nth-child(2) { --x: 70% !important; --y: 1% !important; }
  .crowd__pal:nth-child(3) { --y: 82% !important; } .crowd__pal:nth-child(4) { --x: 68% !important; --y: 81% !important; }
}

/* online pill (node 1441:38211) */
.online {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-s);
  font-weight: 600; font-size: 14px; line-height: 20px; white-space: nowrap;
}
.online small { color: var(--text-alpha); font-size: 11px; font-weight: 500; }
.online__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgb(54 216 126 / .6); animation: ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(54 216 126 / .55); } 80%, 100% { box-shadow: 0 0 0 8px rgb(54 216 126 / 0); } }

/* --------------------------------------------------------------------------
   Game path (home screen hex path)
   -------------------------------------------------------------------------- */
.path-section { padding-top: clamp(80px, 10vw, 140px); }
.path-head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 6vw, 72px); }
.path-head h2 { margin-inline: auto; max-width: 14ch; }
.path-head .lede { margin-inline: auto; }
.path { position: relative; max-width: 860px; margin: 0 auto; }
.path__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.path__svg .track { stroke: var(--surface); }
.path__svg .progress { stroke: var(--pink); }
.path__svg path { fill: none; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.stop { position: relative; z-index: 6; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
.stop + .stop { margin-top: clamp(16px, 3vw, 36px); }   /* chambers are smaller than the copy blocks now, so rows need real gaps */
.stop__hex { width: min(196px, 100%); justify-self: center; }
.stop__hex img { width: 100%; }
.stop__copy h3 { margin-bottom: 6px; }
.stop__copy p { margin: 0; color: var(--text-2); max-width: 26ch; }
.stop:nth-child(even) .stop__hex { order: 2; }
.stop:nth-child(even) .stop__copy { text-align: right; justify-self: end; }
.stop:nth-child(even) .stop__copy p { margin-left: auto; }
.stop--locked .stop__copy h3 { color: #c6d1e2; }
.stop--locked .tag { background: var(--surface); color: #c6d1e2; }
.tag {
  display: inline-block; margin-top: 12px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface); color: var(--text-2);
}
.tag--live { background: rgb(54 216 126 / .14); color: var(--green); }
.tag--hot { background: rgb(254 92 153 / .16); color: var(--pink-soft); }
.path-foot { text-align: center; color: var(--text-2); margin: clamp(48px, 7vw, 88px) auto 0; max-width: 40ch; font-size: clamp(17px, 1.5vw, 20px); }
.path-foot b { color: #fff; }
@media (max-width: 640px) {
  .stop { gap: 12px; }
  .stop__hex { width: min(136px, 100%); }
  .stop + .stop { margin-top: 32px; }
  .stop__copy h3 { font-size: 20px; }
  .stop__copy p { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   Phone mockup + call band
   -------------------------------------------------------------------------- */
.band { background: var(--pink); color: #fff; position: relative; }
.band .feature__copy h2 { color: #fff; }
.band .lede { color: rgb(255 255 255 / .86); }
.band .eyebrow { color: var(--bg); }
.band__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 96px); }
@media (max-width: 860px) { .band__grid { grid-template-columns: 1fr; text-align: center; } .band__grid .feature__copy { align-items: center; display: flex; flex-direction: column; } }

.phone-stage { perspective: 1400px; display: grid; place-items: center; position: relative; }

/* voice-only band: the two people on the call, as their avatars, around the phone */
.caller { position: absolute; z-index: 4; width: clamp(72px, 8vw, 112px); display: grid; justify-items: center; gap: 8px; }
.caller img { width: 100%; position: relative; z-index: 1; filter: drop-shadow(0 6px 0 rgb(0 0 0 / .18)); }
.caller::before { content: ""; position: absolute; left: 50%; top: 0; width: 100%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; border: 3px solid rgb(255 255 255 / .7); opacity: 0; animation: speak 1.8s ease-out infinite; }
.caller--b::before { animation-delay: .9s; }
.caller--a { left: calc(50% + 120px); top: 4%; }
.caller--b { right: calc(50% + 120px); bottom: 10%; }
.caller__name { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--bg); padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.callbar-ui { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.callbar-ui__me { width: 58px; filter: drop-shadow(0 5px 0 rgb(0 0 0 / .18)); margin-right: 4px; }
.toggle-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: var(--bg); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 4px 0 rgb(0 0 0 / .2); }
.toggle-pill svg { width: 18px; height: 18px; }
.toggle-pill--off { color: var(--text-2); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--green); animation: eq .9s ease-in-out infinite; transform-origin: bottom; }
.eq i:nth-child(2) { animation-delay: .15s; } .eq i:nth-child(3) { animation-delay: .3s; } .eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (max-width: 860px) {
  .callbar-ui { justify-content: center; }
  .caller { width: 68px; }
  .caller--a { left: calc(50% + 96px); } .caller--b { right: calc(50% + 96px); }
}
.phone {
  position: relative; width: min(320px, 78vw);
  border-radius: 44px; padding: 10px; background: #0e131a;
  box-shadow: 0 0 0 2px #2a3546 inset, 0 30px 60px -20px rgb(0 0 0 / .55), 0 10px 0 rgb(0 0 0 / .18);
  transform-style: preserve-3d;
}
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 72px; height: 20px; border-radius: 12px; background: #0e131a; z-index: 2; }
.phone__screen { width: 100%; aspect-ratio: var(--ar, 360 / 688); border-radius: 34px; overflow: hidden; background: var(--bg); position: relative; }
.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* --------------------------------------------------------------------------
   In-call game screen (Tic Tac Toe), built in HTML. Sized off the screen's
   width with container units so it scales with the phone.
   -------------------------------------------------------------------------- */
.phone:has(> .gs), .phone:has(> .bh) { container-type: inline-size; }   /* cqw = 1% of the phone, so the screens scale with it */
.gs { display: flex; flex-direction: column; gap: 4.5cqw; padding: 15cqw 5cqw 5cqw; background: var(--bg); font-family: var(--font-body); color: #fff; }
.gs__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3cqw; }
.gs__back { width: 9.5cqw; height: 9.5cqw; display: grid; place-items: center; border-radius: 2.6cqw; background: var(--surface); border: 2px solid var(--border); }
.gs__back svg { width: 5cqw; }
.gs__title { font-family: var(--font-display); font-weight: 600; font-size: 4.6cqw; text-align: center; }
.timer { padding: 1.6cqw 3cqw; border-radius: 99px; background: #fff; color: var(--bg); font-weight: 800; font-size: 3.8cqw; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 .8cqw 0 rgb(0 0 0 / .3); }
.gs__player { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 3cqw; border-radius: 3.6cqw; background: var(--surface); border: 2px solid transparent; transition: border-color .25s ease, box-shadow .25s ease; }
.gs__player--x { align-self: flex-end; flex-direction: row-reverse; text-align: right; }
.gs__player.is-turn { border-color: #fff; box-shadow: 0 0 0 1cqw rgb(255 255 255 / .08); }
.gs__who { display: grid; line-height: 1.15; }
.gs__who b { font-size: 4.2cqw; }
.gs__who small { font-size: 3cqw; color: var(--text-2); }
.gs__mark { width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--bg); display: grid; place-items: center; }
.gs__mark::after { content: ""; width: 55%; height: 55%; background: center / contain no-repeat; }
.gs__mark--x::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' stroke='%23fe5c99' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.gs__mark--o::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='%2322aef9' stroke-width='3.6'/%3E%3C/svg%3E"); }
.gs__board { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; margin: auto 0; }
.gs__cell { aspect-ratio: 1; border-radius: 3.4cqw; background: var(--surface); border: 2px solid var(--border); box-shadow: 0 1.2cqw 0 var(--bg-deep); display: grid; place-items: center; }
.gs__cell svg { width: 58%; height: 58%; overflow: visible; }
.gs__cell svg * { fill: none; stroke-linecap: round; stroke-width: 4.4; }
.gs__cell .x { stroke: var(--pink); }
.gs__cell .o { stroke: var(--blue); }
.gs__cell.is-win { background: #3a2a40; border-color: var(--pink); }
.gs__win { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gs__win line { stroke: #fff; stroke-width: 7; stroke-linecap: round; opacity: 0; }
.gs__board.is-won .gs__win line { opacity: .9; }
.gs__controls { display: flex; justify-content: center; gap: 5cqw; padding: 3cqw; border-radius: 6cqw; background: var(--bg-deep); border: 2px solid var(--surface); }
.gs__btn { width: 13cqw; height: 13cqw; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: #fff; }
.gs__btn svg { width: 6.4cqw; }
.gs__btn--end { background: #d32f2f; }
.float-chip { position: absolute; z-index: 3; }

/* --------------------------------------------------------------------------
   Avatar builder (screen 1414:35368)
   -------------------------------------------------------------------------- */
.builder { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .builder { grid-template-columns: 1fr; } .builder .feature__copy { text-align: center; align-items: center; display: flex; flex-direction: column; } }
.builder__panel {
  background: var(--bg-deep); border: 2px solid var(--surface); border-radius: 28px;
  padding: clamp(20px, 3vw, 32px); max-width: 440px; width: 100%; margin: 0 auto;
}
.avatar-stage { position: relative; width: min(240px, 70%); aspect-ratio: 1; margin: 8px auto 28px; }
.avatar-stage__shadow { position: absolute; left: 18%; right: 18%; bottom: -6%; height: 8%; border-radius: 50%; background: rgb(0 0 0 / .35); filter: blur(4px); }
.avatar { position: absolute; inset: 0; transform-origin: 50% 85%; }
.avatar__body { position: absolute; inset: 0; width: 100%; height: 100%; transition: color .3s ease; }
.avatar__body path { fill: currentColor; }
.avatar__eyes { position: absolute; }
.avatar__eyes svg { width: 100%; height: 100%; overflow: visible; }

/* Tabs/Tab component */
.tabs { display: flex; padding: 4px; border: 2px solid var(--surface); border-radius: var(--radius-l); margin-bottom: 16px; }
.tabs button {
  flex: 1; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-m); border: 2px solid transparent;
  background: none; cursor: pointer; font-weight: 600; font-size: 14px; color: #fff;
}
.tabs button[aria-selected="true"] { background: var(--surface); border-color: #fff; }

/* option tile (Frame 580993345) */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile {
  aspect-ratio: 1; display: grid; place-items: center; padding: 14%;
  background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 4px 0 0 var(--border); cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.tile:active { transform: translateY(4px); box-shadow: 0 0 0 0 var(--border); }
.tile[aria-checked="true"] { background: var(--surface); border-color: #fff; }
.tile svg { width: 100%; height: 100%; overflow: visible; }
.tile .swatch { width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .18); }
.tile-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Safety cards
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--c); color: var(--bg); border-radius: 28px; padding: 30px 28px 34px;
  box-shadow: 0 8px 0 0 color-mix(in srgb, var(--c) 55%, #000);
  transition: translate .25s cubic-bezier(.3,1.6,.5,1);
}
.card:hover { translate: 0 -8px; }
.card { position: relative; }
/* a character peeking over the card's top edge, picked for what the card says */
.card__peek { position: absolute; top: -40px; right: 20px; width: 84px; rotate: 8deg; filter: drop-shadow(0 5px 0 rgb(0 0 0 / .2)); transition: translate .35s var(--ease-back); pointer-events: none; }
.card:nth-child(even) .card__peek { rotate: -7deg; }
.card:hover .card__peek { translate: 0 -10px; }
.card__icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px; background: #fff; color: var(--bg); box-shadow: 0 4px 0 rgb(0 0 0 / .15); }
.card__icon svg { width: 30px; height: 30px; }
.card h3 { font-size: clamp(24px, 2.3vw, 30px); text-wrap: balance; }
.card p { color: rgb(28 36 48 / .78); margin: 10px 0 0; font-weight: 500; }
.text-link { display: inline-block; margin-top: 48px; font-weight: 700; color: var(--pink); border-bottom: 2px solid rgb(254 92 153 / .35); padding-bottom: 2px; transition: border-color .25s var(--ease-out); }
.text-link:hover { border-color: var(--pink); }
.center { text-align: center; }
.center h2, .center .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Pal (expert) section
   -------------------------------------------------------------------------- */
.earn-card {
  position: absolute; z-index: 3; left: -18%; bottom: 18%; width: 270px;
  background: var(--surface); border-radius: 14px; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: center;
  box-shadow: 0 6px 0 0 var(--bg-deep), 0 0 0 2px var(--border) inset;
}
.earn-card__label { font-size: 13px; color: var(--text-2); }
.earn-card__value { font-family: var(--font-display); font-size: 34px; font-weight: 500; line-height: 1; margin-top: 4px; }
.earn-card__stats { border-left: 1px solid var(--border); padding-left: 16px; font-size: 13px; color: var(--text-2); display: grid; gap: 8px; }
.earn-card__stats b { font-family: var(--font-display); color: #fff; font-size: 20px; font-weight: 500; margin-right: 6px; }
/* Buddy home screen (rebuilt from Figma 1426:37042) */
.bh { display: flex; flex-direction: column; gap: 5cqw; padding: 15cqw 5cqw 0; background: var(--bg); color: #fff; font-family: var(--font-body); }
.bh small { display: block; font-size: 3.3cqw; color: var(--text-2); }
.bh b { font-family: var(--font-display); font-weight: 500; }
.bh__head { display: flex; justify-content: space-between; align-items: center; }
.bh__head b { font-size: 5.8cqw; }
.bh__wallet { padding: 2.4cqw 4cqw; border-radius: 3cqw; background: var(--surface); font-weight: 600; font-size: 4cqw; }
.bh__online { display: flex; justify-content: space-between; align-items: center; padding: 4cqw; border-radius: 4cqw; border: 2px solid var(--success); }
.bh__online b { display: flex; align-items: center; gap: 2cqw; font-size: 4.8cqw; }
.bh__online .online__dot { width: 3cqw; height: 3cqw; }
.bh__toggle { width: 13cqw; height: 7.4cqw; border-radius: 99px; background: var(--success); position: relative; }
.bh__toggle::after { content: ""; position: absolute; right: 1cqw; top: 1cqw; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: #fff; }
.bh__earn { display: flex; justify-content: space-between; align-items: center; padding: 4cqw; border-radius: 4cqw; background: var(--surface); }
.bh__earn > span > b { font-size: 8cqw; line-height: 1.1; }
.bh__stats { display: grid; gap: 1.4cqw; padding-left: 4cqw; border-left: 1px solid var(--border); font-size: 3.3cqw; color: var(--text-2); }
.bh__stats b { color: #fff; font-size: 4.6cqw; margin-right: 1cqw; }
.bh__recent { display: grid; gap: 2.6cqw; }
.bh__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3cqw; padding: 2.6cqw 3cqw; border-radius: 3.4cqw; background: var(--bg-deep); }
.bh__row i { width: 8.4cqw; height: 8.4cqw; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--bg); font-style: normal; font-weight: 800; font-size: 3.8cqw; }
.bh__row b { font-size: 4cqw; display: block; }
.bh__row em { font-style: normal; font-weight: 700; font-size: 3.8cqw; color: var(--green); }
.bh__nav { margin: auto -5cqw 0; display: flex; justify-content: space-around; padding: 3cqw 0 4cqw; border-top: 2px solid var(--surface); color: #fff; }
.bh__nav span { width: 13cqw; height: 11cqw; display: grid; place-items: center; border-radius: 3cqw; border: 2px solid transparent; }
.bh__nav span.is-on { border-color: var(--border); }
.bh__nav svg { width: 6cqw; }
.text-link--inline { margin: 0 0 0 18px; vertical-align: middle; }
.queue {
  position: absolute; z-index: 3; right: -30%; top: 46%;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px;
  background: var(--bg); box-shadow: 0 6px 0 0 var(--bg-deep), 0 0 0 2px var(--border) inset; white-space: nowrap;
}
.queue__faces { display: flex; flex: none; }
.queue__faces img { width: 40px; max-width: none; flex: none; margin-right: -10px; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .3)); }
.queue__faces img:last-child { margin-right: 0; }
.queue__text { font-size: 13px; color: var(--text-2); }
.queue__text b { color: #fff; display: block; font-size: 15px; }
.status-pill {
  position: absolute; z-index: 3; right: -16%; top: 20%;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
  background: var(--bg); border: 2px solid var(--success); box-shadow: 0 6px 0 rgb(0 0 0 / .25);
}
.status-pill b { display: block; font-size: 16px; }
.status-pill small { color: var(--text-2); font-size: 12px; }
.toggle { width: 44px; height: 26px; border-radius: 13px; background: var(--success); position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.perks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; max-width: 40ch; text-align: left; }
.perks li { position: relative; padding-left: 30px; color: var(--text-2); }
.perks li b { color: #fff; }
.perks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 4px; background: var(--pink); rotate: 45deg; scale: .8; }
.perks__cta { margin-top: 32px; }
.fineprint { margin: 18px 0 0; font-size: 13px; color: var(--text-2); opacity: .8; max-width: 44ch; }
@media (max-width: 640px) {
  #buddies .phone-stage { margin-bottom: 64px; }
  .earn-card { left: 50%; translate: -50% 0; bottom: -8%; width: 260px; }
  .queue { right: 50%; translate: 50% 0; top: -7%; }
  .status-pill { right: 50%; translate: 50% 0; top: -6%; }
}

/* --------------------------------------------------------------------------
   Final CTA + footer
   -------------------------------------------------------------------------- */
/* above the tunnel chambers (z 5) so the mascot can pop out over the last one; the rider (z 8) stays on top */
.final { isolation: isolate; text-align: center; padding: clamp(100px, 14vw, 180px) 0; position: relative; z-index: 7; overflow: clip; }
.final { --grid-fade: radial-gradient(60% 70% at 50% 42%, #000 20%, transparent 80%); }
.final .mascot { width: clamp(140px, 18vw, 200px); margin: 0 auto 32px; }
.final h2 { font-size: clamp(48px, 8vw, 112px); line-height: 0.9; letter-spacing: -0.03em; max-width: 12ch; margin-inline: auto; }
.final .lede { margin-inline: auto; text-align: center; }
.final .btn { margin-top: 36px; }
.final__confetti { position: absolute; inset: 0; pointer-events: none; }
.final__confetti span { position: absolute; width: var(--s); aspect-ratio: 1; left: var(--x); top: var(--y); }
.final__confetti svg { width: 100%; height: 100%; }
.final__confetti img { width: 100%; height: 100%; filter: drop-shadow(0 6px 0 rgb(0 0 0 / .22)); }
@media (max-width: 760px) { .final__confetti [data-desk] { display: none; } }

.footer { background: var(--pink); color: #fff; padding: 64px 0 40px; position: relative; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer h4 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: rgb(255 255 255 / .86); font-weight: 600; font-size: 15px; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__tagline { color: rgb(255 255 255 / .86); max-width: 28ch; margin: 14px 0 0; }
.footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 2px solid rgb(255 255 255 / .3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: rgb(255 255 255 / .86); }
.footer .logo__mark path[data-body] { fill: #fff; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   Gems — pack art on the left, how it works on the right. No prices yet.
   -------------------------------------------------------------------------- */
.scatter__item .scatter__gem { filter: drop-shadow(0 4px 0 rgb(0 0 0 / .25)) drop-shadow(0 0 10px rgb(70 178 254 / .35)); }
.gems__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.gems__stage { position: relative; aspect-ratio: 1 / .8; max-width: 520px; width: 100%; margin: 0 auto; }
.gems__pack { position: absolute; left: 0; bottom: 4%; width: 78%; rotate: -4deg; filter: drop-shadow(0 18px 22px rgb(0 0 0 / .4)); }
.gems__float { position: absolute; left: var(--x); top: var(--y); width: var(--s); translate: -50% -50%; rotate: var(--r); filter: drop-shadow(0 6px 0 rgb(0 0 0 / .2)) drop-shadow(0 0 16px rgb(70 178 254 / .45)); }
.gems__copy h2 { max-width: 15ch; font-size: clamp(34px, 4.2vw, 56px); }
.gems__steps { list-style: none; counter-reset: gs; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; max-width: 44ch; }
.gems__steps li { counter-increment: gs; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; color: var(--text-2); }
.gems__steps li::before { content: counter(gs); grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--surface); border: 2px solid var(--border); color: #fff; font-weight: 800; font-size: 14px; }
.gems__steps b { color: #fff; }
.gems__offer { display: inline-flex; align-items: center; gap: 8px; margin: 24px 0 0; padding: 8px 14px 8px 10px; border-radius: 99px; background: rgb(70 178 254 / .12); border: 2px solid rgb(70 178 254 / .35); color: #cfebfc; font-weight: 700; font-size: 14px; }
.gems__offer img { width: 20px; }
.gem-inline { display: inline-block; width: 1em; height: auto; vertical-align: -.12em; margin: 0 .1em; }
@media (max-width: 860px) {
  .gems__grid { grid-template-columns: 1fr; }
  .gems__stage { max-width: 380px; }
  .gems__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .gems__copy h2, .gems__copy .lede { margin-inline: auto; }
  .gems__steps { text-align: left; }
}

/* --------------------------------------------------------------------------
   How it works — four steps, each with a small vignette built from the app's
   own components (field, chips, game tiles, call bar)
   -------------------------------------------------------------------------- */
.how__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.how__head h2 { max-width: 16ch; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); counter-reset: step; }
.step {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-deep); border: 2px solid var(--surface); border-radius: 28px;
  padding: 14px 14px 26px; box-shadow: 0 6px 0 0 var(--surface);
}
.step__art { aspect-ratio: 5 / 4; border-radius: 18px; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; margin-bottom: 22px; position: relative; }
.step__num { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .12em; color: var(--pink); padding-inline: 8px; }
.step h3 { font-size: clamp(20px, 1.7vw, 23px); margin: 6px 0 8px; padding-inline: 8px; text-wrap: balance; }
.step p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; padding-inline: 8px; }
.how__note { margin: 28px 0 0; font-size: 14px; color: var(--text-2); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .step { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; padding: 12px 12px 18px; }
  .step__art { grid-row: 1 / -1; aspect-ratio: 1; margin: 0; }
  .step__num, .step h3, .step p { padding-inline: 0; }
  .step h3 { font-size: 19px; margin-top: 4px; }
  .step p { font-size: 14px; }
  /* lay the vignette out at desktop size, then shrink it into the 112px tile */
  .step .vig { position: absolute; left: 50%; top: 50%; width: 190px; padding: 0; transform: translate(-50%, -50%) scale(.58); }
}

/* one object per step, slate with a single pink accent, and one small moving detail */
.vig { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 0 12px; }
/* 01 — OTP boxes filling in, pink cursor waiting in the last */
.otp { display: flex; gap: 10px; }
.otp i { width: 38px; height: 46px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 20px; border-radius: 12px; background: var(--surface); border: 2px solid var(--border); }
.otp .otp__cursor { border-color: var(--pink); }
.otp .otp__cursor::after { content: ""; width: 2px; height: 20px; border-radius: 2px; background: var(--pink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* 02 — one character, "hello" in each language */
.vig--lang { flex-direction: column; gap: 8px; }
.vig__avatar { width: 76px; filter: drop-shadow(0 4px 0 rgb(0 0 0 / .25)); }
.hello { position: relative; padding: 8px 14px; border-radius: 14px 14px 14px 4px; background: var(--pink); font-weight: 700; font-size: 16px; line-height: 1.3; min-width: 92px; text-align: center; box-shadow: 0 3px 0 var(--pink-dark); }
.hello span { display: inline-block; }
/* 03 — one chamber shuffling through the games, a matching ring pulsing out */
.pick { position: relative; display: grid; width: 96px; }
.pick img { grid-area: 1 / 1; width: 100%; opacity: 0; transform: scale(.9); transition: opacity .3s ease, transform .4s var(--ease-back); }
.pick img.is-on { opacity: 1; transform: none; }
.pick__ring { position: absolute; left: 50%; top: 45%; width: 100%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid var(--pink); opacity: 0; animation: match 1.8s ease-out infinite; }
@keyframes match { 0% { scale: .7; opacity: .7; } 100% { scale: 1.5; opacity: 0; } }
/* 04 — two characters, a sound wave between them */
.vig--call img { width: 64px; filter: drop-shadow(0 4px 0 rgb(0 0 0 / .25)); }
.vig--call img:first-child { rotate: -6deg; } .vig--call img:last-child { rotate: 6deg; }
.wave { display: flex; align-items: center; gap: 4px; height: 34px; }
.wave i { width: 4px; height: 100%; border-radius: 4px; background: var(--border); transform-origin: center; animation: wave 1.1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .12s; } .wave i:nth-child(3) { animation-delay: .24s; background: var(--pink); } .wave i:nth-child(4) { animation-delay: .36s; } .wave i:nth-child(5) { animation-delay: .48s; }
@keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* --------------------------------------------------------------------------
   FAQ — sticky intro on the left, native <details> on the right
   -------------------------------------------------------------------------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + 32px); }
.faq__head h2 { max-width: 10ch; }
.faq__head .lede { max-width: 30ch; }
.faq__buddy { position: relative; width: clamp(96px, 10vw, 132px); margin-top: 40px; }
.faq__buddy img { width: 100%; filter: drop-shadow(0 6px 0 rgb(0 0 0 / .25)); }
.faq__bubble { position: absolute; right: -34px; top: -26px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50% 50% 50% 6px; background: var(--pink); font-family: var(--font-display); font-weight: 600; font-size: 24px; box-shadow: 0 4px 0 var(--pink-dark); animation: ponder 2.4s ease-in-out infinite; }
@keyframes ponder { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -6px; rotate: 8deg; } }
.faq__list { border-top: 2px solid var(--surface); }
.faq__item { border-bottom: 2px solid var(--surface); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.2;
  transition: color .25s var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: rotate .4s var(--ease-back), background-color .25s var(--ease-out);
}
.faq__item summary:hover { color: var(--pink-soft); }
.faq__item[open] summary::after { rotate: 135deg; background-color: var(--pink); }
.faq__a p { margin: 0; padding: 0 56px 24px 4px; color: var(--text-2); max-width: 56ch; }
/* smooth open/close where the browser supports animating to auto height */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
  .faq__item[open]::details-content { block-size: auto; }
}
@media (max-width: 860px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; text-align: center; }
  .faq__buddy { margin-inline: auto; }
  .faq__head h2, .faq__head .lede { margin-inline: auto; }
  .faq__head h2 { max-width: 14ch; }
  .faq__a p { padding-right: 4px; }
}

/* --------------------------------------------------------------------------
   Become a Buddy page
   -------------------------------------------------------------------------- */
.page-buddy main { padding-top: var(--header-h); }
.bhero { position: relative; isolation: isolate; padding: clamp(40px, 7vw, 96px) 0 clamp(64px, 9vw, 120px); overflow: clip; }
.bhero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='62.36' viewBox='0 0 84 48.5'%3E%3Cpath d='M0 24.25L14 0H42L56 24.25L42 48.5H14ZM56 24.25H84' fill='none' stroke='%232f3c51' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(60% 80% at 25% 45%, #000 20%, transparent 85%); mask-image: radial-gradient(60% 80% at 25% 45%, #000 20%, transparent 85%); }
.bhero__grid { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: clamp(32px, 6vw, 88px); align-items: start; }
.bhero h1 { font-size: clamp(44px, 6vw, 84px); line-height: .92; letter-spacing: -.03em; max-width: 11ch; }
.bhero__copy { padding-top: clamp(0px, 3vw, 40px); }
.bhero__cast { display: flex; align-items: flex-end; gap: 14px; margin-top: 40px; }
.bhero__cast img { width: clamp(76px, 8vw, 108px); filter: drop-shadow(0 6px 0 rgb(0 0 0 / .25)); }
.bhero__cast img:first-child { rotate: -8deg; } .bhero__cast img:last-child { rotate: 7deg; }
.bhero__bubble { align-self: flex-start; padding: 8px 14px; border-radius: 14px 14px 14px 4px; background: var(--surface); font-weight: 700; font-size: 14px; box-shadow: 0 4px 0 var(--bg-deep); }
@media (max-width: 900px) { .bhero__grid { grid-template-columns: 1fr; } .bhero__cast { display: none; } }

/* application card */
.apply { scroll-margin-top: calc(var(--header-h) + 16px); background: var(--bg-deep); border: 2px solid var(--surface); border-radius: 28px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 8px 0 0 var(--surface); }
.apply__title { font-size: clamp(26px, 2.4vw, 32px); }
.apply__sub { margin: 6px 0 22px; color: var(--text-2); font-size: 15px; }
.apply__form { display: grid; gap: 16px; }
.apply__form .apply__title, .apply__form .apply__sub { margin-bottom: 0; }
.apply__form .apply__sub { margin-bottom: 6px; }
.field { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field legend { font-weight: 700; font-size: 14px; padding: 0; }
.field input[type="text"], .field input[type="tel"], .ms__button {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--radius-m);
  background: var(--bg); color: #fff; border: 2px solid var(--border); font: 600 16px/1.2 var(--font-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: var(--text-2); font-weight: 500; opacity: .8; }
.field input:focus-visible, .ms__button:focus-visible, .ms.is-open .ms__button { outline: none; border-color: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / .1); }
.field__phone { display: flex; }
.field__prefix { display: grid; place-items: center; padding: 0 14px; border: 2px solid var(--border); border-right: 0; border-radius: var(--radius-m) 0 0 var(--radius-m); background: var(--surface); font-weight: 700; }
.field__phone input { border-radius: 0 var(--radius-m) var(--radius-m) 0 !important; letter-spacing: .04em; }
.field__hint { margin: 0; font-size: 12.5px; color: var(--text-2); }
.field__error { margin: 0; font-size: 13px; font-weight: 600; color: #f36b61; display: none; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input[type="text"], .field.is-invalid input[type="tel"], .field.is-invalid .ms__button, .field.is-invalid .field__prefix, .field.is-invalid .seg { border-color: #f36b61; }
.field.is-invalid .field__hint { display: none; }

/* segmented radio (the app's Tabs component) */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border: 2px solid var(--border); border-radius: var(--radius-l); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 40px; border-radius: var(--radius-m); border: 2px solid transparent; font-weight: 700; font-size: 14px; color: var(--text-2); transition: background-color .15s ease, color .15s ease; }
.seg input:checked + span { background: var(--surface); border-color: #fff; color: #fff; }
.seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--pink); }

/* language multi-select */
.ms { position: relative; }
.ms__button { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.ms__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms__value.is-placeholder { color: var(--text-2); font-weight: 500; }
.ms__button svg { width: 20px; flex: none; transition: rotate .2s ease; }
.ms.is-open .ms__button svg { rotate: 180deg; }
.ms__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-l); box-shadow: 0 16px 32px -8px rgb(0 0 0 / .5); outline: none; }
.ms__list [role="option"] { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: var(--radius-s); cursor: pointer; font-weight: 600; }
.ms__list [role="option"] small { margin-left: auto; color: var(--text-2); font-size: 13px; }
.ms__list [role="option"].is-active { background: var(--surface); }
.ms__check, .check__box { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 2px solid var(--border); display: grid; place-items: center; }
.ms__list [aria-selected="true"] .ms__check, .check input:checked + .check__box { background: var(--pink); border-color: var(--pink); }
.ms__list [aria-selected="true"] .ms__check::after, .check input:checked + .check__box::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; rotate: -45deg; translate: 0 -1px; }

/* consent checkbox */
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px var(--pink); }
.check .check__box { margin-top: 1px; }
.field.is-invalid .check__box { border-color: #f36b61; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apply__banner { margin: 0; padding: 10px 14px; border-radius: var(--radius-m); background: rgb(211 47 47 / .14); border: 2px solid #d32f2f; color: #fff; font-size: 14px; font-weight: 600; }
.apply__submit { margin-top: 4px; }
.apply__submit.is-loading { opacity: .85; cursor: progress; }
.apply__submit.is-loading span::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.apply__legal { margin: 0; text-align: center; font-size: 12.5px; color: var(--text-2); }
.apply__legal a { text-decoration: underline; text-underline-offset: 2px; }

/* success */
.apply__done { text-align: center; outline: none; }
.done__badge { position: relative; width: 96px; margin: 8px auto 20px; }
.done__badge svg { width: 96px; height: 96px; }
.done__badge circle { fill: var(--success); stroke: #fff; stroke-width: 4; }
.done__badge img { position: absolute; right: -46px; bottom: -10px; width: 58px; rotate: 10deg; filter: drop-shadow(0 4px 0 rgb(0 0 0 / .25)); }
.apply__done .apply__sub { margin-bottom: 20px; }
.done__next { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; text-align: left; }
.done__next li { padding: 12px 14px; border-radius: var(--radius-m); background: var(--bg); border: 2px solid var(--surface); font-size: 14px; color: var(--text-2); }
.done__next b { color: #fff; }

/* steps, look-for list, final */
.bsteps__list { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bsteps__list li { padding: 24px; border-radius: 24px; background: var(--bg-deep); border: 2px solid var(--surface); }
.bsteps__num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--pink); font-family: var(--font-display); font-weight: 600; font-size: 22px; box-shadow: 0 4px 0 var(--pink-dark); margin-bottom: 18px; }
.bsteps__list p { margin: 8px 0 0; color: var(--text-2); }
@media (max-width: 760px) { .bsteps__list { grid-template-columns: 1fr; } }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards--4 { grid-template-columns: 1fr; } }
.blook__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.blook__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.blook__list li { padding: 12px 18px; border-radius: var(--radius-m); border: 2px solid var(--border); background: var(--bg); box-shadow: 0 4px 0 var(--surface); font-weight: 700; }
@media (max-width: 860px) { .blook__grid { grid-template-columns: 1fr; } }
.bfinal { text-align: center; padding: clamp(48px, 8vw, 110px) 0 clamp(80px, 10vw, 140px); }
.bfinal h2 { margin: 0 auto 28px; max-width: 14ch; }

/* --------------------------------------------------------------------------
   Mascot + eyes
   -------------------------------------------------------------------------- */
[data-mascot] { display: block; }
[data-mascot] svg { width: 100%; height: 100%; overflow: visible; }
.mascot { display: block; aspect-ratio: 1; }
svg[data-tracked] .pupil { transition: transform .18s ease-out; }
svg[data-tracked] .eye { transform-box: fill-box; transform-origin: center; transition: transform .08s ease; }
svg[data-tracked].is-blinking .eye { transform: scaleY(0.12); }

/* Hide hero pieces until the intro runs (html.js is set in <head>; removed if motion is off) */
.js .hero [data-pop], .js .hero [data-reveal], .js .hero [data-split], .js .cluster--hero > img { visibility: hidden; }

/* --------------------------------------------------------------------------
   404 — "4 [chamber] 4": the mascot hides in the zero (js/404.js)
   -------------------------------------------------------------------------- */
.page-lost .header__cta { opacity: 1; transform: none; pointer-events: auto; }
.lost { isolation: isolate; position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + 32px) 0 56px; overflow: clip; text-align: center; }
.lost { --grid-fade: radial-gradient(55% 65% at 50% 40%, #000 20%, transparent 80%); }
.lost__inner { display: flex; flex-direction: column; align-items: center; }
.lost__code { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.2vw, 14px); margin-bottom: clamp(20px, 3vw, 36px); }
.lost__digit {
  font-family: var(--font-display); font-weight: 600; line-height: .8;
  font-size: clamp(132px, 22vw, 260px); letter-spacing: -0.04em; color: #fff;
  text-shadow: 0 .045em 0 var(--surface);            /* the chambers' extruded base, in type */
}
.lost__chamber {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  width: clamp(120px, 20vw, 236px); aspect-ratio: 1; margin-top: .06em;
  -webkit-tap-highlight-color: transparent;
}
.lost__chamber .chamber { width: 100%; height: 100%; }
/* hidden below the window's bottom edge until .is-out */
.lost__peek { transform: translateY(104px); transition: transform .7s var(--ease-back); }
.lost__chamber.is-out .lost__peek { transform: translateY(16px); }   /* rests a little sunk, bottom hidden by the window */
.lost__chamber.is-ducking .lost__peek { transform: translateY(70px); transition: transform .2s var(--ease-in-out); }
.lost__squash { transform-box: fill-box; transform-origin: 50% 100%; }
.lost__chamber.is-out:not(.is-ducking) .lost__squash { animation: lost-bob 3.2s .9s ease-in-out infinite; }
@keyframes lost-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-4px) scale(.98, 1.03); }
}
.lost h1 { font-size: clamp(44px, 6vw, 80px); }
.lost .lede { margin-inline: auto; max-width: 32ch; }
.lost__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.lost__links { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.lost__links a { transition: color .2s ease; }
.lost__links a:hover { color: #fff; }
@media (max-width: 640px) {
  .lost__ctas { flex-direction: column; width: 100%; max-width: 340px; }
  .lost__ctas .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Motion preferences — everything is visible by default; JS adds motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}