/* Kidochess site: shared by index.html and studio.html */
  @font-face { font-family: Nunito; font-weight: 600; font-display: swap; src: url(fonts/nunito-latin-600-normal.woff2) format("woff2"); }
  @font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url(fonts/nunito-latin-800-normal.woff2) format("woff2"); }
  @font-face { font-family: Nunito; font-weight: 900; font-display: swap; src: url(fonts/nunito-latin-900-normal.woff2) format("woff2"); }

  /* World colours are typed, so they glide from one world to the next */
  @property --fg { syntax: "<color>"; inherits: true; initial-value: #22203f; }
  @property --fg2 { syntax: "<color>"; inherits: true; initial-value: #3f3b66; }
  @property --em { syntax: "<color>"; inherits: true; initial-value: #d65a00; }
  @property --chip { syntax: "<color>"; inherits: true; initial-value: #ffffff99; }
  @property --shade { syntax: "<color>"; inherits: true; initial-value: #0000; }
  @property --sqL { syntax: "<color>"; inherits: true; initial-value: #fdf3d0; }
  @property --sqD { syntax: "<color>"; inherits: true; initial-value: #7ec06a; }
  @property --aid { syntax: "<color>"; inherits: true; initial-value: #4a6953; }
  @property --f1 { syntax: "<color>"; inherits: true; initial-value: #a8754a; }
  @property --f2 { syntax: "<color>"; inherits: true; initial-value: #6e4527; }
  @property --pw { syntax: "<color>"; inherits: true; initial-value: #fffdf7; }
  @property --pwo { syntax: "<color>"; inherits: true; initial-value: #3d2a1d; }
  @property --pb { syntax: "<color>"; inherits: true; initial-value: #3b2c22; }
  @property --pbo { syntax: "<color>"; inherits: true; initial-value: #1a110b; }
  @property --pbd { syntax: "<color>"; inherits: true; initial-value: #f1e6d8; }

  :root {
    --ink: #22203f; --ink-2: #4a4670;
    --gold: #ffd23f; --gold-deep: #d9a400;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --font: Nunito, ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
    transition: --fg 1.6s, --fg2 1.6s, --em 1.6s, --chip 1.6s, --shade 1.6s, --sqL 1.6s, --sqD 1.6s, --aid 1.6s, --f1 1.6s, --f2 1.6s, --pw 1.6s, --pwo 1.6s, --pb 1.6s, --pbo 1.6s, --pbd 1.6s;
  }
  html[data-theme="meadow"] { --fg: #22203f; --fg2: #3f3b66; --em: #d65a00; --chip: #ffffff99; --shade: #0000;
    --sqL: #fdf3d0; --sqD: #7ec06a; --aid: #4a6953; --f1: #a8754a; --f2: #6e4527; --pw: #fffdf7; --pwo: #3d2a1d; --pb: #3b2c22; --pbo: #1a110b; --pbd: #f1e6d8; }
  html[data-theme="ocean"] { --fg: #ffffff; --fg2: #e6f4ff; --em: #ffd23f; --chip: #ffffff29; --shade: #06223f66;
    --sqL: #e8f6ff; --sqD: #4da6e0; --aid: #325d8f; --f1: #2f86c7; --f2: #14518a; --pw: #ffffff; --pwo: #0f3457; --pb: #173f6b; --pbo: #061b31; --pbd: #d4e8f8; }
  html[data-theme="space"] { --fg: #ffffff; --fg2: #e2ddff; --em: #ffd23f; --chip: #ffffff24; --shade: #07061a66;
    --sqL: #ddd5ff; --sqD: #6a57d6; --aid: #40358a; --f1: #4b3bb0; --f2: #241a66; --pw: #ffffff; --pwo: #1f1557; --pb: #2a1f73; --pbo: #0b0724; --pbd: #dcd6ff; }
  html[data-theme="sunset"] { --fg: #ffffff; --fg2: #fff0f3; --em: #ffe08a; --chip: #ffffff2e; --shade: #3a103266;
    --sqL: #ffe8d6; --sqD: #e5849b; --aid: #7e4c6c; --f1: #a8506e; --f2: #6b2d4a; --pw: #fffaf5; --pwo: #4f1d36; --pb: #5e2440; --pbo: #2a0c1a; --pbd: #f7d9e2; }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { margin: 0; font-family: var(--font); font-weight: 600; color: var(--fg); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; background: #7fd6ff; }
  ::selection { background: var(--gold); color: var(--ink); }
  img { max-width: 100%; height: auto; display: block; }
  :focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
  .wrap { width: min(1180px, 100% - 40px); margin-inline: auto; position: relative; }
  h1, h2, h3 { font-weight: 900; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
  p { text-wrap: pretty; }

  /* ── One world behind the whole page ───────────────────────────── */
  .world { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
  .bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
  html[data-theme="meadow"] .bg-meadow, html[data-theme="ocean"] .bg-ocean, html[data-theme="space"] .bg-space, html[data-theme="sunset"] .bg-sunset { opacity: 1; }
  .bg * { animation-play-state: paused; }
  html[data-theme="meadow"] .bg-meadow *, html[data-theme="ocean"] .bg-ocean *, html[data-theme="space"] .bg-space *, html[data-theme="sunset"] .bg-sunset * { animation-play-state: running; }
  .drift { animation: cloud linear infinite; } .drift-l { animation: cloud-l linear infinite; }
  @keyframes cloud { from { transform: translateX(-300px); } to { transform: translateX(1900px); } }
  @keyframes cloud-l { from { transform: translateX(1900px); } to { transform: translateX(-300px); } }
  .tw { animation: twinkle 4s ease-in-out infinite; } @keyframes twinkle { 50% { opacity: .12; } }
  .ray { opacity: .1; animation: ray ease-in-out infinite; } @keyframes ray { 50% { opacity: .2; } }
  .bub { animation: rise linear infinite; } @keyframes rise { from { transform: translateY(0); opacity: 0; } 10% { opacity: .8; } to { transform: translateY(-1000px); opacity: 0; } }

  /* ── The one action ─────────────────────────────────────────────── */
  .buy { margin: 0; display: inline-block; }
  .buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
  .cta { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--gold); color: var(--ink); font: 900 1.35rem/1 var(--font); white-space: nowrap;
    box-shadow: 0 6px 0 var(--gold-deep), 0 16px 34px rgba(7, 6, 26, .3); transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
  .cta svg { width: 26px; height: 26px; flex: none; }
  .cta:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--gold-deep), 0 20px 40px rgba(7, 6, 26, .35); }
  .cta:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--gold-deep), 0 8px 18px rgba(7, 6, 26, .3); }
  .cta:focus-visible { outline-color: var(--fg); border-radius: 999px; }
  .cta::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; border: 3px solid var(--gold); opacity: 0; pointer-events: none; }
  .cta.lit::after { animation: ring 1.6s var(--ease-out) 3; }
  @keyframes ring { from { opacity: .9; transform: scale(.96); } to { opacity: 0; transform: scale(1.18); } }
  .cta .tag { margin-left: 4px; font-size: 1.05rem; background: var(--ink); color: var(--gold); border-radius: 999px; padding: 6px 12px; }
  .gift { display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 24px; border-radius: 999px; cursor: pointer; background: var(--chip); color: var(--fg); border: 2.5px solid color-mix(in srgb, var(--fg) 40%, transparent); font: 900 1.08rem var(--font); transition: background .2s, border-color .2s; }
  .gift:hover { border-color: var(--fg); }
  .gift svg { width: 22px; height: 22px; }
  .price { margin: 18px 0 0; font-size: 1.12rem; font-weight: 800; color: var(--fg); text-shadow: 0 1px 8px var(--shade); }
  .price b { color: var(--em); font-weight: 900; }
  .fine { font-size: .98rem; margin: 12px 0 0; color: var(--fg2); text-shadow: 0 1px 8px var(--shade); }

  /* ── Hero ──────────────────────────────────────────────────────── */
  .hero { position: relative; min-height: max(100svh, 720px); display: flex; flex-direction: column; }
  .top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 0; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.4rem; color: var(--fg); text-decoration: none; }
  .brand img { width: 46px; height: 46px; }
  .top-buy { color: var(--fg); background: var(--chip); border: 0; border-radius: 999px; min-height: 48px; padding: 0 22px; font: 800 1rem var(--font); cursor: pointer; }
  .hero-grid { flex: 1; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 60px); align-items: center; padding: clamp(24px, 5vh, 60px) 0 clamp(70px, 11vh, 120px); }
  .hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1.02; text-shadow: 0 3px 20px var(--shade); }
  .hero h1 em { font-style: normal; color: var(--em); }
  .lead { font-size: clamp(1.12rem, 1.5vw, 1.32rem); max-width: 36ch; margin: 22px 0 30px; color: var(--fg2); text-shadow: 0 1px 10px var(--shade); }

  /* The playable lesson: a little window onto the app, in the current world */
  .stage { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; padding: 18px 20px 20px; border: 5px solid rgba(255, 255, 255, .92); box-shadow: 0 34px 70px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .05); rotate: .6deg; }
  .stage-bg { position: absolute; inset: 0; z-index: -1; }
  .sbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
  html[data-theme="meadow"] .sbg-meadow, html[data-theme="ocean"] .sbg-ocean, html[data-theme="space"] .sbg-space, html[data-theme="sunset"] .sbg-sunset { opacity: 1; }
  .stage-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
  .lesson-chip { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 18px 6px 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, .16); }
  .lesson-chip b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #ff7a59; color: #fff; font-size: 1.05rem; }
  .lesson-chip span { display: flex; flex-direction: column; font-weight: 900; font-size: 1.02rem; line-height: 1.15; }
  .lesson-chip small { font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  .stage-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: end; }
  .coach-col { display: flex; flex-direction: column; align-items: center; gap: 10px; align-self: stretch; justify-content: flex-end; }
  .coach { position: relative; width: 150px; text-align: center; }
  .coach img { width: 150px; height: 150px; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .25)); }
  .coach .name { display: inline-block; white-space: nowrap; font-weight: 900; font-size: .92rem; margin-top: -2px; color: var(--ink); background: rgba(255, 255, 255, .9); border-radius: 999px; padding: 3px 12px; }
  .bubble { position: relative; width: 100%; background: #fff; color: var(--ink); font-weight: 900; font-size: 1.04rem; line-height: 1.36; padding: 14px 16px; border-radius: 22px; box-shadow: 0 12px 26px rgba(0, 0, 0, .2); margin: 0 0 10px; text-align: center; }
  .bubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 20px; height: 20px; margin-left: -10px; background: #fff; border-radius: 4px; transform: rotate(45deg); }
  .bubble.pop { animation: pop .45s var(--ease-out); } @keyframes pop { from { transform: scale(.92); } }
  .w-knight { color: #1b8f5a; } .w-star { color: #b07800; }
  .board-wrap { position: relative; min-width: 0; }
  .cue { position: absolute; z-index: 3; left: 50%; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--gold); color: var(--ink); font-weight: 900; font-size: 1rem; padding: 8px 18px; border-radius: 999px; box-shadow: 0 6px 14px rgba(7, 6, 26, .25); }
  .cue svg { width: 20px; height: 20px; }
  .frame { padding: 12px; border-radius: 26px; background: linear-gradient(160deg, var(--f1), var(--f2)); box-shadow: 0 0 0 4px rgba(255, 210, 63, .9), 0 26px 50px rgba(0, 0, 0, .3); }
  .board { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none; }
  .squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
  .squares i { background: var(--sqL); position: relative; }
  .squares i.d { background: var(--sqD); }
  .squares i[data-c]::before, .squares i[data-f]::after { position: absolute; font: 900 clamp(9px, 2.9cqw, 14px)/1 var(--font); font-style: normal; color: var(--sqD); }
  .squares i[data-c]::before { content: attr(data-c); left: 6%; top: 5%; }
  .squares i[data-f]::after { content: attr(data-f); right: 7%; bottom: 5%; }
  .squares i.d[data-c]::before, .squares i.d[data-f]::after { color: var(--sqL); }
  .layer { position: absolute; inset: 0; }
  .aid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .4s; }
  .aid path { fill: none; stroke: var(--aid); stroke-width: .13; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .26 .2; animation: march 1s linear infinite; }
  @keyframes march { to { stroke-dashoffset: -.46; } }
  .goal { position: absolute; width: 12.5%; height: 12.5%; display: grid; place-items: center; pointer-events: none; }
  .goal span { width: 78%; height: 78%; border-radius: 50%; border: 3px dashed var(--aid); display: grid; place-items: center; background: rgba(255, 255, 255, .55); animation: breathe 2.4s ease-in-out infinite; }
  .goal svg { width: 52%; height: 52%; fill: var(--aid); }
  @keyframes breathe { 50% { transform: scale(1.08); } }
  .dot { position: absolute; width: 12.5%; height: 12.5%; display: grid; place-items: center; opacity: 0; transition: opacity .2s; pointer-events: none; border: 0; padding: 0; background: none; }
  .dot::before { content: ""; width: 30%; height: 30%; border-radius: 50%; background: var(--aid); opacity: .55; }
  .board.picking .dot { opacity: 1; pointer-events: auto; cursor: pointer; }
  .pc-wrap { position: absolute; width: 12.5%; height: 12.5%; left: 0; top: 0; translate: calc(var(--x) * 12.5cqw) calc(var(--y) * 12.5cqw); }
  .pc-wrap svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 2px rgba(7, 6, 26, .28)); }
  .knight { cursor: grab; z-index: 2; background: none; border: 0; padding: 0; touch-action: none; }
  .knight:focus-visible { outline-offset: -2px; border-radius: 10px; }
  .knight.lifted { cursor: grabbing; z-index: 4; }
  .knight.lifted svg { filter: drop-shadow(0 14px 10px rgba(7, 6, 26, .35)); transform: scale(1.12); transition: transform .15s var(--ease-out); }
  .knight.hello svg { animation: hello 2.6s ease-in-out infinite; }
  @keyframes hello { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(-9%) rotate(-6deg); } 86% { transform: translateY(0) rotate(4deg); } }
  .ghost { opacity: 0; pointer-events: none; z-index: 1; }
  .ghost svg { filter: none; opacity: .5; }
  .pc { overflow: visible; }
  .pcW .fw, .pcW .fe { fill: var(--pw); } .pcW .fk { fill: var(--pwo); } .pcW .sk { stroke: var(--pwo); } .pcW .se { stroke: var(--pw); }
  .pcB .fk { fill: var(--pb); } .pcB .sk { stroke: var(--pbo); } .pcB .fe, .pcB .fw { fill: var(--pbd); } .pcB .se { stroke: var(--pbd); }
  .spark { position: absolute; width: 5%; height: 5%; pointer-events: none; z-index: 5; }
  .spark svg { width: 100%; height: 100%; fill: var(--gold); filter: drop-shadow(0 0 4px rgba(255, 210, 63, .8)); }
  .after { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
  .hint { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 0; background: #ff7a59; color: #fff; font: 900 1.05rem var(--font); cursor: pointer; box-shadow: 0 5px 0 #d4532f, 0 12px 22px rgba(0, 0, 0, .2); transition: transform .15s var(--ease-out); }
  .hint:hover { transform: translateY(-2px); } .hint:active { transform: translateY(4px); box-shadow: 0 1px 0 #d4532f; }
  .hint svg { width: 22px; height: 22px; }
  .hint[hidden] { display: none; }
  .stars { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; background: #fff; color: var(--ink); font-weight: 900; font-size: 1.15rem; border-radius: 999px; padding: 8px 16px; box-shadow: 0 6px 16px rgba(7, 6, 26, .2); }
  .stars svg { width: 24px; height: 24px; fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1.2; }
  .stars.bump { animation: bump .6s var(--ease-out); } @keyframes bump { 30% { transform: scale(1.25); } }
  .again { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 0; background: #fff; color: var(--ink); font: 900 1rem var(--font); cursor: pointer; box-shadow: 0 6px 16px rgba(7, 6, 26, .2); }
  .again svg { width: 20px; height: 20px; }
  .again[hidden] { display: none; }
  .done-note { font-weight: 800; color: var(--ink); margin: 0; flex: 1 1 220px; background: rgba(255, 255, 255, .92); padding: 10px 16px; border-radius: 16px; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
  .done-note { display: none; } .done .done-note { display: block; opacity: 1; transform: none; }
  .scroll-hint { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; color: var(--fg); font-weight: 800; font-size: .95rem; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; text-shadow: 0 1px 8px var(--shade); }
  .scroll-hint svg { width: 22px; height: 22px; animation: nudge 2s ease-in-out infinite; } @keyframes nudge { 50% { transform: translateY(5px); } }

  /* ── Lessons: the app's screens, gliding past ───────────────────── */
  .lessons { padding: clamp(50px, 8vh, 90px) 0 0; }
  .section-head { text-align: center; max-width: 48rem; margin: 0 auto; }
  .section-head h2 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); line-height: 1.06; color: var(--fg); text-shadow: 0 3px 18px var(--shade); }
  .section-head p { margin: 10px 0 0; font-size: 1.18rem; color: var(--fg2); text-shadow: 0 1px 10px var(--shade); }
  .reel { overflow: hidden; padding: 34px 0 clamp(70px, 10vh, 110px); }
  .reel-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 34px; width: max-content; animation: reel 70s linear infinite; }
  .reel:hover .reel-track, .reel:focus-within .reel-track, .reel:focus .reel-track { animation-play-state: paused; }
  @keyframes reel { to { transform: translateX(calc(-50% - 17px)); } }
  .slide { width: clamp(280px, 30vw, 460px); flex: none; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .slide:nth-child(odd) .slide-shot { rotate: -1.6deg; } .slide:nth-child(even) .slide-shot { rotate: 1.4deg; translate: 0 18px; }
  .slide-shot { border-radius: 22px; padding: 8px; background: linear-gradient(160deg, var(--f1), var(--f2)); box-shadow: 0 24px 46px rgba(0, 0, 0, .3); transition: rotate .4s var(--ease-out), scale .4s var(--ease-out); }
  .slide-shot img { border-radius: 15px; }
  .slide:hover .slide-shot { rotate: 0deg; scale: 1.04; }
  .slide-cap { margin: 0; background: #fff; color: var(--ink); font-weight: 900; font-size: 1.08rem; padding: 10px 20px; border-radius: 999px; box-shadow: 0 10px 22px rgba(0, 0, 0, .18); text-align: center; }
  .slide:nth-child(even) .slide-cap { translate: 0 18px; }

  /* ── For grown-ups ─────────────────────────────────────────────── */
  .grown { padding: clamp(10px, 3vh, 30px) 0 clamp(40px, 6vh, 70px); }
  .promises { list-style: none; margin: clamp(30px, 5vh, 46px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .promises li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .promises h3 { justify-content: center; }
  .promises .pal { width: 120px; height: 120px; margin: -10px 0 -14px; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .2)); animation: pal 3.4s ease-in-out var(--d, 0s) infinite; }
  @keyframes pal { 50% { transform: translateY(-6px) rotate(-2deg); } }
  .promises h3 { font-size: 1.24rem; line-height: 1.3; color: var(--fg); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-shadow: 0 1px 10px var(--shade); }
  .promises p { margin: 6px 0 0; font-size: 1.05rem; color: var(--fg2); text-shadow: 0 1px 10px var(--shade); }
  .beta { font-size: .78rem; font-weight: 900; background: var(--gold); color: var(--ink); padding: 3px 10px; border-radius: 999px; text-shadow: none; }

  /* Bulk: schools and clubs */
  .bulk { padding: 22px 0 0; }
  .bulk-band { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; background: linear-gradient(135deg, var(--f1), var(--f2)); color: #fff; border-radius: 28px; padding: clamp(24px, 3.5vw, 36px) clamp(26px, 4vw, 48px); box-shadow: 0 18px 44px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 255, 255, .08); }
  .bulk h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.12; margin-bottom: 6px; }
  .bulk p { margin: 0; font-size: 1.1rem; color: rgba(255, 255, 255, .86); max-width: 46ch; }
  .wa { display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 26px; border-radius: 999px; background: #25d366; color: #0b2e1a; font: 900 1.1rem var(--font); text-decoration: none; white-space: nowrap; box-shadow: 0 5px 0 #179c48, 0 14px 28px rgba(7, 6, 26, .3); transition: transform .18s var(--ease-out); }
  .wa:hover { transform: translateY(-2px); }
  .wa svg { width: 24px; height: 24px; }

  /* ── Last call: building in public ─────────────────────────────── */
  .final { text-align: center; padding: clamp(80px, 12vh, 130px) 0 clamp(90px, 14vh, 150px); }
  .crew { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin-bottom: 18px; }
  .crew img { width: 100px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .25)); }
  .crew img:nth-child(2) { width: 128px; }
  .final h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.04; text-shadow: 0 3px 20px var(--shade); }
  .final .sub { font-size: 1.2rem; margin: 14px auto 28px; max-width: 40ch; color: var(--fg2); text-shadow: 0 1px 10px var(--shade); }
  .meter { max-width: 640px; margin: 0 auto 32px; text-align: left; background: linear-gradient(160deg, var(--f1), var(--f2)); color: #fff; border-radius: 24px; padding: 20px 24px 24px; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
  .meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-weight: 800; margin-bottom: 14px; }
  .meter-top b { font-size: 2.2rem; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; margin-right: 6px; }
  .meter-top span:last-child { color: rgba(255, 255, 255, .85); }
  .track { position: relative; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; }
  .track i { position: absolute; inset: 0 auto 0 0; width: max(18px, calc(var(--p, 0) * 1%)); border-radius: inherit; background: linear-gradient(90deg, var(--gold), #ffe58a); transition: width 1.2s var(--ease-out); }
  .final .buy-row { justify-content: center; }

  footer { background: #1b1233; color: rgba(255, 255, 255, .78); font-size: .92rem; padding: 26px 0 34px; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

  /* Big screens: everything grows with the window (type is in rem, so the root size scales it) */
  @media (min-width: 1500px) {
    html { font-size: clamp(16px, .84vw, 26px); }
    .wrap { width: min(82vw, 2200px); }
    .hero h1 { font-size: 4.4rem; }
    .lead { font-size: 1.36rem; }
    .cta { min-height: 4.25rem; padding: 0 1.9rem; }
    .gift { min-height: 3.75rem; }
    .stage { padding: 1.4rem 1.6rem 1.5rem; border-radius: 2rem; }
    .stage-body { grid-template-columns: 11.5rem minmax(0, 1fr); gap: 1.4rem; }
    .coach, .coach img { width: 11.5rem; } .coach img { height: 11.5rem; }
    .lesson-chip b { width: 2.4rem; height: 2.4rem; }
    .stars, .again, .hint { min-height: 3.2rem; }
    .brand img { width: 2.9rem; height: 2.9rem; }
    .slide { width: 28rem; }
  }
  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stage { max-width: 600px; }
  }
  @media (max-width: 620px) {
    .top-buy { display: none; }
    .stage { padding: 14px; border-radius: 26px; rotate: 0deg; }
    .stage-body { grid-template-columns: minmax(0, 1fr); }
    .coach-col { flex-direction: row-reverse; align-items: flex-end; gap: 10px; }
    .coach, .coach img { width: 86px; } .coach img { height: 86px; }
    .coach .name { display: none; }
    .bubble { font-size: .98rem; padding: 12px 14px; margin: 0 0 18px; text-align: left; }
    .bubble::after { left: auto; right: -9px; bottom: 18px; margin: 0; }
    .lesson-chip small { display: none; }
    .buy, .cta, .gift, .wa { width: 100%; justify-content: center; }
    .cta { font-size: 1.2rem; padding: 0 22px; gap: 10px; }
    .promises { grid-template-columns: minmax(0, 1fr); gap: 22px; } .promises li { flex-direction: row; align-items: flex-start; text-align: left; } .promises h3 { justify-content: flex-start; } .promises .pal { flex: none; width: 84px; height: 84px; margin: -6px 0 0; }
    .scroll-hint { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .reel { overflow-x: auto; scroll-snap-type: x mandatory; } .reel-track { padding: 0 20px; } .slide { scroll-snap-align: center; } .slide[aria-hidden] { display: none; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
  }

  /* ── The band that leads to the Creator Studio ─────────────────── */
  .studio-teaser { padding: 0 0 22px; }
  .teaser { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 16px 26px 16px 18px; border-radius: 28px; text-decoration: none; color: var(--fg); background: var(--chip); border: 2px dashed color-mix(in srgb, var(--fg) 35%, transparent); transition: border-color .2s, transform .2s var(--ease-out); }
  .teaser:hover { border-color: var(--fg); transform: translateY(-2px); }
  .teaser img { width: 84px; height: 84px; flex: none; margin: -10px 0 -6px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .2)); }
  .teaser-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 10px var(--shade); }
  .teaser-text b { font-size: 1.4rem; font-weight: 900; letter-spacing: -.01em; }
  .teaser-text span { color: var(--fg2); font-size: 1.06rem; }
  .teaser-go { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 900; font-size: 1.05rem; white-space: nowrap; box-shadow: 0 8px 18px rgba(0, 0, 0, .15); }
  .teaser-go svg { width: 20px; height: 20px; transition: transform .2s var(--ease-out); }
  .teaser:hover .teaser-go svg { transform: translateX(4px); }

  /* ── Creator Studio page ───────────────────────────────────────── */
  .back { color: var(--fg); font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; text-shadow: 0 1px 8px var(--shade); }
  .back svg { width: 18px; height: 18px; }
  .s-sec { padding: clamp(40px, 7vh, 80px) 0; }
  .builds { list-style: none; margin: clamp(30px, 5vh, 46px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; }
  .builds li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .builds .pal { width: 104px; height: 104px; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .2)); animation: pal 3.4s ease-in-out var(--d, 0s) infinite; }
  .builds h3 { font-size: 1.3rem; color: var(--fg); text-shadow: 0 1px 10px var(--shade); }
  .builds p { margin: 0; color: var(--fg2); font-size: 1.04rem; text-shadow: 0 1px 10px var(--shade); }
  .ask { position: relative; margin: 6px 0 0; background: #fff; color: var(--ink); font-weight: 800; font-size: .98rem; line-height: 1.4; padding: 10px 16px; border-radius: 18px; box-shadow: 0 10px 22px rgba(0, 0, 0, .14); max-width: 30ch; }
  .ask::before { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; background: #fff; border-radius: 3px; transform: rotate(45deg); }

  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
  .split h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.06; color: var(--fg); text-shadow: 0 3px 18px var(--shade); }
  .split > div > p { font-size: 1.15rem; color: var(--fg2); margin: 14px 0 0; text-shadow: 0 1px 10px var(--shade); }
  .checks { list-style: none; margin: 0; padding: 22px 24px; border-radius: 26px; background: linear-gradient(160deg, var(--f1), var(--f2)); color: #fff; box-shadow: 0 24px 50px rgba(0, 0, 0, .22); display: grid; gap: 10px; }
  .checks li { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.04rem; }
  .checks svg { width: 26px; height: 26px; flex: none; padding: 4px; border-radius: 50%; background: #2fbf71; color: #fff; }
  .checks .sum { margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .25); color: var(--gold); font-weight: 900; }
  .s-shot { border-radius: 22px; padding: 8px; background: linear-gradient(160deg, var(--f1), var(--f2)); box-shadow: 0 24px 46px rgba(0, 0, 0, .28); rotate: -1deg; }
  .s-shot img { border-radius: 15px; }
  .ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
  .ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 1.08rem; font-weight: 700; color: var(--fg); text-shadow: 0 1px 10px var(--shade); }
  .ticks svg { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--em); }

  .tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(26px, 4vh, 40px); }
  .tool { padding: 22px; border-radius: 24px; background: linear-gradient(160deg, var(--f1), var(--f2)); color: #fff; box-shadow: 0 20px 40px rgba(0, 0, 0, .2); }
  .tool h3 { font-size: 1.2rem; margin-bottom: 6px; }
  .tool p { margin: 0; color: rgba(255, 255, 255, .88); font-size: 1rem; }
  .tool code { display: block; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); color: #fff; font: 600 .92rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }

  @media (max-width: 980px) {
    .split, .studio { grid-template-columns: minmax(0, 1fr); }
    .builds, .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 620px) {
    .builds, .tools { grid-template-columns: minmax(0, 1fr); }
    .teaser { justify-content: center; text-align: center; }
    .teaser-go { width: 100%; justify-content: center; }
  }
  .builds .ask { color: var(--ink); text-shadow: none; }
  .logo { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
  .works { margin: 18px 0 0; font-weight: 800; color: var(--fg); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; text-shadow: 0 1px 10px var(--shade); }
  .works span { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 14px; text-shadow: none; box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
  .works .logo { width: 20px; height: 20px; }
  .msg small.who { display: flex; align-items: center; gap: 6px; opacity: 1; color: var(--ink-2); }
  .msg small.who .logo { width: 16px; height: 16px; }
  .tool h3 { display: flex; align-items: center; gap: 10px; }
  .tool h3 .logo { width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: #fff; color: #000; box-sizing: content-box; }

  /* ── Studio hero: ask, and watch it build ──────────────────────── */
  .s-intro { text-align: center; max-width: 56rem; margin: 0 auto; padding: clamp(24px, 5vh, 56px) 0 clamp(26px, 4vh, 40px); }
  .s-intro h1 { font-size: clamp(2.7rem, 5.6vw, 5rem); line-height: 1.02; margin-top: 16px; text-shadow: 0 3px 20px var(--shade); }
  .s-intro h1 em { font-style: normal; color: var(--em); }
  .s-intro .lead { margin: 18px auto 0; max-width: 46ch; }
  .s-intro .beta { vertical-align: middle; font-size: .85rem; margin-left: 4px; }
  .s-intro .works { justify-content: center; }
  .studio { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 26px; align-items: stretch; padding-bottom: clamp(50px, 8vh, 90px); }
  .console { display: flex; flex-direction: column; min-height: 560px; border-radius: 26px; overflow: hidden; background: #15122b; color: #e9e6ff; box-shadow: 0 34px 70px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 255, 255, .06); }
  .console-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; background: #1f1b3d; font-size: .9rem; font-weight: 800; color: #bdb7e6; }
  .console-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff6b6b; } .console-bar i:nth-child(2) { background: #ffc94a; } .console-bar i:nth-child(3) { background: #3ad07a; }
  .console-bar span { margin-left: 10px; display: inline-flex; align-items: center; gap: 8px; }
  .console-bar .logo { width: 18px; height: 18px; }
  .log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; max-height: 420px; }
  .log p { margin: 0; animation: logIn .35s var(--ease-out); }
  @keyframes logIn { from { opacity: 0; transform: translateY(8px); } }
  .log .sys { color: #9b95c9; font-size: .95rem; font-weight: 700; }
  .log .you { align-self: flex-end; max-width: 85%; background: var(--gold); color: var(--ink); font-weight: 900; padding: 10px 16px; border-radius: 18px 18px 6px 18px; }
  .log .ai { align-self: flex-start; max-width: 88%; background: #2a2552; color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 18px 18px 18px 6px; }
  .log .ai.done { background: #18402f; color: #c9f5dd; font-weight: 800; }
  .log .typing { display: inline-flex; gap: 5px; padding: 13px 16px; }
  .log .typing i { width: 7px; height: 7px; border-radius: 50%; background: #b9b3ea; animation: type 1.1s ease-in-out infinite; }
  .log .typing i:nth-child(2) { animation-delay: .15s; } .log .typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes type { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
  .log .call { display: flex; align-items: center; gap: 10px; font: 600 .92rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #b9b3ea; padding-left: 12px; border-left: 2px solid #3b3570; }
  .log .call code { color: #8fd3ff; font: inherit; }
  .log .call span { color: #e9e6ff; }
  .log .call b { margin-left: auto; width: 20px; height: 20px; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--ease-out); color: #3ad07a; }
  .log .call b svg { width: 20px; height: 20px; display: block; }
  .log .call.ok b { opacity: 1; transform: none; }
  .asks { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 18px; border-top: 1px solid rgba(255, 255, 255, .08); background: #1a1734; }
  .ask-chip { border: 0; cursor: pointer; font: 800 .95rem var(--font); color: #fff; background: #2f2a5e; padding: 9px 14px; border-radius: 999px; transition: background .2s, transform .15s var(--ease-out); }
  .ask-chip:hover { background: #4b3bb0; transform: translateY(-1px); }
  .asks.busy .ask-chip { opacity: .45; cursor: progress; }
  .preview { rotate: 0deg; display: flex; flex-direction: column; justify-content: space-between; }
  .preview .stage-body { flex: 1; align-items: center; }
  .live { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #2fbf71; color: #fff; font-weight: 900; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
  .live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .3; } }
  .live.flash { animation: flash .9s var(--ease-out); } @keyframes flash { 30% { transform: scale(1.18); } }
  .pv-board { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
  .pv-board i { background: var(--sqL); display: grid; place-items: center; }
  .pv-board i.d { background: var(--sqD); }
  .pv-board svg { width: 88%; height: 88%; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .25)); overflow: visible; }
  @media (max-width: 620px) {
    .console { min-height: 0; } .log { max-height: 320px; min-height: 220px; }
  }
  @media (max-width: 980px) { .studio { grid-template-columns: minmax(0, 1fr); } }

  /* ── The pay panel (buy.js): one card in the world's own colours, straight to CHIP ── */
  html:has(dialog.pay[open]) { overflow: hidden; }
  dialog.pay { width: min(480px, 100% - 28px); max-height: calc(100dvh - 28px); margin: auto; padding: 0; border: 0; border-radius: 30px; overflow: auto; overscroll-behavior: contain;
    color: #fff; background: linear-gradient(160deg, var(--f1), var(--f2)); box-shadow: 0 40px 90px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .14); }
  dialog.pay::backdrop { background: rgba(10, 8, 34, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  dialog.pay[open] { animation: pay-in .42s var(--ease-out); }
  dialog.pay[open]::backdrop { animation: pay-fade .3s ease; }
  @keyframes pay-in { from { opacity: 0; transform: translateY(26px) scale(.96); } }
  @keyframes pay-fade { from { opacity: 0; } }
  .pay-card { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: clamp(22px, 5vw, 32px); }
  .pay-x { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
  .pay-x:hover { background: rgba(255, 255, 255, .26); }
  .pay-x svg { width: 22px; height: 22px; }
  .pay-head { display: flex; align-items: center; gap: 14px; margin: 0 52px 12px 0; }
  .pay-head img { width: 88px; height: 88px; flex: none; margin: -8px -4px -8px -10px; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .25)); animation: pal 3.4s ease-in-out infinite; }
  .pay-head h2 { font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.1; }
  .pay-sub { margin: 4px 0 0; color: rgba(255, 255, 255, .85); font-weight: 700; }
  .pay-field { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-weight: 900; font-size: 1.02rem; }
  .pay-field input { min-height: 56px; padding: 0 18px; border: 3px solid transparent; border-radius: 16px; background: #fff; color: var(--ink); font: 800 1.1rem var(--font); box-shadow: 0 6px 14px rgba(0, 0, 0, .14); }
  .pay-field input:focus-visible { outline: 4px solid var(--gold); outline-offset: 2px; }
  .pay-field input[aria-invalid] { border-color: var(--gold); }
  .pay-err { margin: 0; font-weight: 800; }
  .pay-err:empty { display: none; }
  .pay-err:not(:empty) { margin-top: 4px; padding: 8px 14px; border-radius: 14px; background: var(--gold); color: var(--ink); }
  .pay-go { width: 100%; justify-content: center; margin-top: 16px; }
  .pay-go .wait, .pay-card.busy .pay-go .go { display: none; }
  .pay-card.busy .pay-go .wait { display: inline; }
  .pay-card.busy .pay-go { cursor: progress; opacity: .85; }
  .pay-note { margin: 10px 0 0; text-align: center; font-size: .95rem; color: rgba(255, 255, 255, .85); }
  @media (prefers-reduced-motion: reduce) {
    dialog.pay[open], dialog.pay[open]::backdrop, .pay-head img { animation: none; }
  }