/* Base: page edges clear the phone's system bars (safe areas). */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
[hidden] { display: none !important; }
/* Layout: a sticky full-screen stage; scroll drives one GSAP timeline that turns CSS-3D phones and swaps eight scenes. */
:root {
  color-scheme: dark;
  --bg: #1C1E22;
  --ink: #F3F3F0;
  --muted: #A3A8B0;
  --line: #34373E;
  --glass: rgba(44,47,53,0.55);
  --glass-solid: #2A2D33;
  --glass-line: rgba(255,210,59,0.28);
  --accent: #FFD23B;
  --accent-ink: #1C1E22;
  --curator: #F49BE6;
  --admin: #FF9A80;
  --warn: #FF9A5C;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --k: 1;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--body); font-size: 16px; line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- stage ---------- */
.scroller { position: relative; height: 2050vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.stage::before { content: ""; position: absolute; width: 720px; height: 720px; right: 2%; top: 12%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,210,59,0.13), rgba(255,210,59,0)); }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 4vw 0; position: relative; z-index: 8; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 18px; }
.logo i { width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-style: normal; font-size: 15px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 13px; font-weight: 700; font-size: 15px; text-decoration: none; }
.btn-ghost { color: var(--ink); border: 1px solid rgba(255,210,59,0.4); }
.btn-solid { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 30px rgba(255,210,59,0.25); }

.main { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; padding: 0 4vw; min-height: 0; }
.texts { position: relative; height: 540px; z-index: 7; }
.scene-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; max-width: 660px; }
.eyebrow { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.09em; text-transform: uppercase; }
.scene-text h1, .scene-text h2 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.06; }
.scene-text p { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; color: var(--muted); max-width: 32em; }
.hl { color: var(--accent); }
.platforms { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); align-items: center; }
.chip { color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 5px 10px; }
.plaque-c { color: var(--curator); border: 1.5px solid rgba(244,155,230,0.6); border-radius: 8px; padding: 2px 10px; font-weight: 700; white-space: nowrap; }

.steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.steps li { border: 1px solid transparent; border-radius: 16px; padding: 14px 20px; opacity: 0.5; }
.steps li b { font-size: 21px; }
.steps li b span { font-family: var(--display); color: var(--accent); margin-right: 10px; }
.steps li p { font-size: 17px; line-height: 1.5; margin-top: 5px; color: var(--muted); }
.steps li.on { opacity: 1; border-color: rgba(255,210,59,0.45); background: var(--glass); }

/* ---------- 3D world ---------- */
.world { position: relative; height: 100%; display: grid; place-items: center; perspective: 1500px; perspective-origin: 50% 40%; }
.world > .phone-wrap { grid-area: 1 / 1; }
.phone-wrap { position: relative; transform-style: preserve-3d; }
.phone { position: relative; width: calc(270px * var(--k)); height: calc(560px * var(--k)); transform-style: preserve-3d; }
.slice, .face { position: absolute; inset: 0; border-radius: calc(42px * var(--k)); }
.slice { background: #2B2E34; border: 1px solid #3D4047; }
.face.back { background: linear-gradient(160deg, #30333A, #1A1B1F); border: 1px solid #3D4047; display: grid; place-items: center; backface-visibility: hidden; }
.face.back i { width: 54px; height: 54px; border-radius: 15px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-style: normal; font-size: 24px; opacity: 0.9; }
.face.front { background: #0E0F11; padding: calc(9px * var(--k)); border: 1px solid #3A3D44; backface-visibility: hidden; box-shadow: 0 0 60px rgba(255,210,59,0.10); }
.screen { position: relative; width: 100%; height: 100%; border-radius: calc(33px * var(--k)); background: var(--bg); overflow: hidden; }
.inner { position: absolute; left: 0; top: 0; width: 252px; height: 542px; transform-origin: 0 0; transform: scale(var(--k)); }
.glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 20; background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.09) 48%, rgba(255,255,255,0) 60%); background-size: 260% 100%; background-position: 60% 0; }
.shadow { position: absolute; left: 50%; top: 100%; width: calc(260px * var(--k)); height: 40px; margin-left: calc(-130px * var(--k)); margin-top: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.55), rgba(0,0,0,0)); filter: blur(4px); }
.notch { position: absolute; top: 9px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: #0E0F11; z-index: 19; }
.phone-label { position: absolute; left: 50%; top: calc(100% + 26px); display: flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 700; font-size: 15px; }

.scr { position: absolute; inset: 0; padding: 34px 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.mut { color: var(--muted); }
.lbl { font-size: 11px; color: var(--muted); }

/* chat */
.scr-chat { background: #17181B; padding-top: 36px; }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #2A2D33; font-weight: 700; }
.chat-head small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.chat-head em { font-style: normal; font-size: 11px; color: var(--accent-ink); background: var(--muted); border-radius: 9px; padding: 1px 7px; }
.msg { align-self: flex-start; background: var(--glass-solid); border-radius: 12px 12px 12px 4px; padding: 6px 10px; max-width: 85%; }
.msg small { display: block; font-size: 10px; color: var(--accent); font-weight: 700; }
.msg.struck { color: var(--muted); text-decoration: line-through; }

/* game */
.g-top { display: flex; justify-content: space-between; align-items: center; }
.g-back { width: 28px; height: 28px; border-radius: 50%; background: var(--glass-solid); display: grid; place-items: center; }
.g-time { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; }
.g-title { font-weight: 700; font-size: 16px; }
.freeze { display: flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); border-radius: 9px; padding: 6px 9px; font-weight: 700; font-size: 12px; overflow: hidden; }
.g-sec { display: flex; justify-content: space-between; font-weight: 700; margin-top: 4px; }
.g-sec span { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 40%; background: var(--accent); }
.row { display: flex; align-items: center; justify-content: space-between; height: 34px; border-radius: 10px; padding: 0 9px; background: var(--glass); border: 1px solid var(--glass-line); overflow: hidden; flex-shrink: 0; }
.row b { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.row b i { width: 22px; height: 22px; border-radius: 50%; background: #3A3D44; display: grid; place-items: center; font-style: normal; font-size: 11px; }
.row span { font-size: 11px; color: var(--muted); }
.row .plaque { color: var(--curator); border: 1px solid rgba(244,155,230,0.55); border-radius: 6px; padding: 1px 6px; font-weight: 700; }
.row.hot { background: rgba(255,210,59,0.13); border-color: rgba(255,210,59,0.7); }
.row.hot b i { background: var(--accent); color: var(--accent-ink); }
.row.hot span { color: var(--accent); font-weight: 700; }
.reserve { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }

/* court */
.scr-court { align-items: center; justify-content: center; padding: 24px 14px; }
.court-area { position: relative; width: 200px; height: 440px; }
.court { position: absolute; left: 0; top: 0; width: 200px; height: 360px; border: 2px solid rgba(255,210,59,0.5); border-radius: 4px; background: rgba(255,210,59,0.04); }
.net { position: absolute; left: -8px; right: -8px; top: 177px; height: 4px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 10px rgba(243,243,240,0.4); }
.atk { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed rgba(255,210,59,0.22); }
.tok { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: #2C2F35; border: 2px solid rgba(255,210,59,0.5); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.tok.cur { border-color: var(--curator); }
.tok.dima { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 18px rgba(255,210,59,0.6); }
.tok.bench { border-color: var(--line); color: var(--muted); }
.bench-label { position: absolute; left: 0; top: 372px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lock { position: absolute; inset: 0 0 80px; border: 2px solid var(--accent); border-radius: 4px; background: rgba(28,30,34,0.35); display: grid; place-items: center; }
.pill-lock { display: flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: 12px; }

/* form */
.f-title { font-family: var(--display); font-weight: 700; font-size: 18px; margin-bottom: 2px; }
.field { border: 1px solid #3A3D44; border-radius: 11px; height: 36px; padding: 0 11px; background: #202226; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.field .val { white-space: nowrap; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chips span { border: 1px solid #3A3D44; border-radius: 9px; height: 32px; display: grid; place-items: center; font-size: 12px; }
.chips span.on, .grid6 span.on, .att span.on { border-color: var(--accent); color: var(--accent); background: rgba(255,210,59,0.13); font-weight: 700; }
.f-btn { margin-top: auto; background: var(--accent); color: var(--accent-ink); border-radius: 12px; height: 42px; display: grid; place-items: center; font-weight: 700; }

/* run sheet */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #26292E; border-top: 1px solid var(--glass-line); border-radius: 22px 22px 0 0; padding: 10px 14px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -20px 40px rgba(0,0,0,0.5); z-index: 5; }
.grab { width: 40px; height: 4px; border-radius: 2px; background: #4A4E56; align-self: center; }
.att { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.att span { border: 1px solid #3A3D44; border-radius: 11px; height: 38px; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.grid6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.grid6 span { border: 1px solid #3A3D44; border-radius: 7px; height: 30px; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.grid6 span.on { background: var(--accent); color: var(--accent-ink); }
.kick { color: var(--admin); text-align: center; font-weight: 600; font-size: 12px; }
.dim { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 4; }

/* names */
.nrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.nrow i { width: 30px; height: 30px; border-radius: 50%; background: #3A3D44; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.nrow b { display: block; font-size: 13px; }
.nrow .real { display: block; font-size: 12px; color: var(--accent); }

/* profile */
.p-head { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.p-ava { width: 48px; height: 48px; border-radius: 50%; background: #3A3D44; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.p-name { font-family: var(--display); font-weight: 700; font-size: 18px; }
.p-plaque { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--curator); border: 1px solid rgba(244,155,230,0.55); border-radius: 6px; padding: 1px 7px; font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.stat { border: 1px solid var(--glass-line); background: var(--glass); border-radius: 12px; padding: 8px; box-shadow: 0 0 14px rgba(255,210,59,0.08); }
.stat b { display: block; font-family: var(--display); font-size: 15px; margin-top: 2px; }
.stat .bar { margin-top: 5px; height: 4px; }
.note-row { display: flex; gap: 8px; align-items: flex-start; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px; padding: 9px 10px; }
.note-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; }

/* schedule */
.s-head { display: flex; justify-content: space-between; align-items: center; }
.s-logo { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; }
.s-logo i { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--display); font-style: normal; font-size: 12px; }
.s-big { font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.1; }
.s-card { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 16px; padding: 12px; box-shadow: 0 0 18px rgba(255,210,59,0.1); display: flex; flex-direction: column; gap: 5px; }
.s-card .yes { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: 6px; padding: 2px 7px; }
.stack div { background: #26292E; border: 1px solid var(--glass-line); border-radius: 14px; padding: 10px 12px 24px; display: flex; justify-content: space-between; }
.stack div + div { margin-top: -16px; background: #2A2D33; }
.stack b { font-size: 13px; }
.fab { position: absolute; right: 16px; bottom: 18px; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 26px; font-weight: 700; box-shadow: 0 0 26px rgba(255,210,59,0.6); }
.toast { position: absolute; left: 10px; right: 10px; top: 32px; background: rgba(52,55,62,0.97); border: 1px solid rgba(255,210,59,0.4); border-radius: 14px; padding: 9px 11px; z-index: 6; box-shadow: 0 10px 24px rgba(0,0,0,0.45); font-size: 12px; }
.toast b { display: block; font-size: 11px; color: var(--accent); }

/* auth */
.scr-auth { align-items: stretch; padding-top: 52px; }
.a-logo { width: 54px; height: 54px; border-radius: 15px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 24px; box-shadow: 0 0 24px rgba(255,210,59,0.3); }
.a-name { font-family: var(--display); font-weight: 700; font-size: 22px; margin-top: 6px; }
.tabs2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin-top: 8px; font-size: 12px; text-align: center; }
.tabs2 span { padding: 7px 0; border-radius: 9px; }
.tabs2 span.on { border: 1px solid var(--accent); color: var(--accent); background: rgba(255,210,59,0.12); font-weight: 700; }
.digits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.digits span { height: 38px; border: 1px solid #3A3D44; border-radius: 9px; display: grid; place-items: center; font-family: var(--display); font-size: 16px; background: #202226; }
.digits span.on { border-color: var(--accent); }
.a-lock { position: absolute; inset: 0; background: rgba(20,21,24,0.72); display: grid; place-items: center; z-index: 6; }
.a-lock div { display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 700; }
.a-lock svg { filter: drop-shadow(0 0 16px rgba(255,210,59,0.6)); }

/* telegram phone */
.scr-bot { background: #17181B; padding-top: 34px; }
.bot-head { display: flex; align-items: center; gap: 9px; padding-bottom: 8px; border-bottom: 1px solid #2A2D33; }
.bot-head i { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--display); font-style: normal; font-weight: 700; font-size: 13px; }
.bot-head b { font-size: 13px; display: block; }
.bot-msg { align-self: flex-start; background: var(--glass-solid); border-radius: 12px 12px 12px 4px; padding: 7px 10px; max-width: 88%; }
.open-btn { margin-top: auto; background: var(--accent); color: var(--accent-ink); border-radius: 11px; height: 40px; display: grid; place-items: center; font-weight: 700; }
.mini-bar { display: flex; justify-content: space-between; align-items: center; background: #17181B; margin: -34px -14px 4px; padding: 30px 14px 8px; border-bottom: 1px solid #2A2D33; font-size: 13px; font-weight: 700; }
.mini-bar span { color: var(--muted); font-weight: 500; }

/* floating pieces */
.bubbles, .cards { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 6; pointer-events: none; }
.bubble { position: absolute; white-space: nowrap; background: var(--glass-solid); border: 1px solid #3A3D44; border-radius: 14px 14px 14px 4px; padding: 8px 13px; font-size: 14px; box-shadow: 0 10px 26px rgba(0,0,0,0.4); }
.bubble.loud { font-weight: 700; }
.info { position: absolute; width: 238px; background: rgba(38,41,46,0.94); border: 1px solid rgba(255,210,59,0.35); border-radius: 18px; padding: 16px; box-shadow: 0 0 30px rgba(255,210,59,0.12), 0 18px 40px rgba(0,0,0,0.45); display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.info h3 { font-size: 16px; }
.lv { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; text-align: center; font-weight: 700; font-size: 11px; }
.lv span { border-radius: 6px; padding: 5px 0; }
.role { display: flex; gap: 8px; align-items: center; }
.role em { font-style: normal; flex-shrink: 0; width: 92px; text-align: center; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 0; border: 1px solid; }
.chan { display: flex; align-items: center; gap: 8px; }

/* bottom */
.bottom { position: relative; padding: 0 4vw 22px; min-height: 118px; }
.week { position: absolute; left: 4vw; right: 4vw; bottom: 22px; }
.week-track { position: relative; height: 4px; border-radius: 2px; background: var(--line); }
.week-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(255,210,59,0.5); }
.week ol { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; font-size: 15px; line-height: 1.35; }
.week li { color: var(--muted); opacity: 0.6; }
.week li b { display: block; color: var(--ink); font-size: 18px; margin: 2px 0; }
.week li em { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.week li.on { opacity: 1; }
.week li.sys em { color: var(--accent); }
.hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.hint svg { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

.dots { position: absolute; right: max(10px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; z-index: 8; }
.dots button { display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.dots button i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dots button[aria-current="step"] i { background: var(--accent); box-shadow: 0 0 10px rgba(255,210,59,0.7); height: 20px; border-radius: 4px; }

.foot { padding: 48px 4vw 56px; border-top: 1px solid #2E3138; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot nav a { color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot .mut { font-size: 14px; }

/* ---------- phone width ---------- */
@media (max-width: 820px) {
  .topbar { padding: 14px 0 0; }
  .topbar .btn { padding: 0 14px; font-size: 14px; }
  .main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 0; }
  .texts { height: 250px; }
  .scene-text { justify-content: flex-start; padding-top: 12px; gap: 10px; }
  .scene-text h1, .scene-text h2 { font-size: 26px; }
  .scene-text p { font-size: 14.5px; }
  .scene-text .platforms { display: none; }
  .steps { gap: 3px; }
  .steps li { padding: 5px 10px; }
  .steps li p { display: none; }
  .steps li b { font-size: 15.5px; }
  .phone-label { font-size: 13px; top: calc(100% + 10px); }
  .bubble { white-space: normal; max-width: 150px; }
  .bubble { font-size: 12px; padding: 6px 10px; }
  .info { width: 250px; }
  .bottom { padding: 0 0 14px; min-height: 74px; }
  .week { left: 0; right: 0; bottom: 14px; }
  .week ol { font-size: 11.5px; gap: 5px; }
  .week li b { font-size: 13px; }
  .dots { display: none; }
  .stage::before { width: 420px; height: 420px; right: -60px; top: 40%; }
  .final-cta { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .hint svg { animation: none; } }