/* page reset (the prototype got this from its host) */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one pinned tablet "stage" that never leaves the screen; the story copy scrolls past it and each beat re-arranges the board and the objects orbiting it. Desktop = copy left / stage right. Phone = stage pinned on top, copy scrolls underneath. */
:root{
  --bg:#fff6fa; --bg-2:#fde9f2; --fg:#2b1631; --muted:#6d5670; --line:#efd3e1;
  --berry:#d8136f; --berry-ink:#ffffff; --sky:#2f7fd0; --sun:#f3ad2e; --leaf:#2f9e6d;
  --card:#ffffff; --card-line:#f1d7e4; --shadow:0 18px 40px -18px rgb(90 20 60 / .35);
  /* device screen depicts the app, so it stays light in both themes */
  --bezel:#231a28; --screen:#fdf5f8; --screen-bar:#e0197d; --tile-ink:#2b1631;
  --r-people:#f29cc4; --r-center:#b9a2ea; --r-strip:#f29cc4;
  --display:"Baloo 2", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --body:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h:60px;
  --sky-a:#dcefff; --grass:#d4efc4; --home-a:#fff0dc; --floor:#f3dfc4;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1a0f1e; --bg-2:#26152b; --fg:#f7eaf1; --muted:#c3aac0; --line:#3d2742;
  --berry:#ff4fa0; --berry-ink:#2a0717; --sky:#6fb2f2; --sun:#f7c35c; --leaf:#5fd19c;
  --card:#2a1a2f; --card-line:#442b49; --shadow:0 18px 40px -18px rgb(0 0 0 / .7); --sky-a:#1b2946; --grass:#1d3322; --home-a:#3a2626; --floor:#3a2b22; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#1a0f1e; --bg-2:#26152b; --fg:#f7eaf1; --muted:#c3aac0; --line:#3d2742;
  --berry:#ff4fa0; --berry-ink:#2a0717; --sky:#6fb2f2; --sun:#f7c35c; --leaf:#5fd19c;
  --card:#2a1a2f; --card-line:#442b49; --shadow:0 18px 40px -18px rgb(0 0 0 / .7); --sky-a:#1b2946; --grass:#1d3322; --home-a:#3a2626; --floor:#3a2b22; color-scheme:dark }

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);line-height:1.02;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:10px}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:var(--nav-h);display:flex;align-items:center;gap:20px;
  padding-inline:max(16px,4vw);background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--berry)}
.mark{width:30px;height:30px;display:grid;grid-template-columns:1fr 1fr;gap:3px;transform:rotate(-8deg)}
.mark i{border-radius:5px}
.mark i:nth-child(1){background:var(--berry)}.mark i:nth-child(2){background:var(--sun)}
.mark i:nth-child(3){background:var(--sky)}.mark i:nth-child(4){background:var(--leaf)}
.proto{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--muted);border-radius:99px;padding:2px 8px;white-space:nowrap}
.nav-links{display:flex;gap:22px;margin-left:auto;font-weight:600;color:var(--muted);font-size:.95rem}
.nav-links a{text-decoration:none}.nav-links a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font-weight:700;
  border-radius:999px;padding:12px 22px;background:var(--berry);color:var(--berry-ink);box-shadow:0 8px 20px -10px var(--berry);transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.sm{padding:9px 16px;font-size:.9rem}
.link{font-weight:700;color:var(--berry);text-underline-offset:4px}
.short{display:none}
@media (max-width:760px){.long{display:none}.short{display:inline}.nav-links{display:none}.nav .btn{margin-left:auto}.proto{display:none}}

/* ---------- story ---------- */
.story{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding-inline:max(16px,4vw);max-width:1400px;margin-inline:auto}
.steps{grid-column:1;grid-row:1;padding-bottom:20vh}
.step{min-height:100svh;display:flex;align-items:center}
.step:first-child{min-height:calc(100svh - var(--nav-h))}
.copy{display:grid;gap:16px;max-width:34rem;padding:30px 32px;border-radius:28px;position:relative;z-index:4;
  background:color-mix(in oklab,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid color-mix(in oklab,var(--line) 70%,transparent);box-shadow:0 30px 60px -40px rgb(40 10 50 / .45)}
.feat{display:grid;gap:9px;margin:2px 0 0;padding:0;list-style:none}
.feat li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;color:var(--muted);font-size:.98rem;line-height:1.4}
.feat li b{color:var(--fg)}
.feat .fi{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#3a1d96}
.feat .fi svg{width:62%;height:62%;fill:#f1edff}
.feat .fi.mic{background:#efeaff}.feat .fi.mic svg{fill:#3a1d96}
.feat .fi.pen{background:#5b3cc4;font-size:15px}
.was{text-decoration:line-through;color:var(--muted);font-weight:500;margin-right:.35em}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--berry)}
.copy h1{font-size:clamp(2.6rem,5.2vw,4.4rem);font-weight:800}
.copy h1 em{font-style:normal;color:var(--berry)}
.copy h2{font-size:clamp(1.9rem,3.2vw,2.9rem);font-weight:800}
.copy p{color:var(--muted);font-size:1.08rem;max-width:62ch}
.copy p strong{color:var(--fg)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.fine{font-size:.88rem!important}
.try{font-weight:700;color:var(--fg)!important;background:var(--bg-2);border-radius:12px;padding:8px 12px;width:fit-content}
.prices{display:grid;gap:10px;margin-top:4px}
.prices div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--line);padding-bottom:8px;font-size:1rem}
.prices b{font-variant-numeric:tabular-nums;text-align:right}
.prices span{color:var(--muted)}

.stage{grid-column:2;grid-row:1;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--nav-h));height:calc(100svh - var(--nav-h));
  container-type:size;z-index:5}


@media (max-width:860px){
  .story{grid-template-columns:minmax(0,1fr);gap:0}
  .stage{grid-column:1;grid-row:1;height:52svh;margin-inline:calc(-1 * max(16px,4vw))}
  .steps{grid-row:2}
  .step{min-height:72svh;align-items:flex-start}
  .step:first-child{min-height:60svh}
  .copy{padding:22px 20px;margin-top:20px}
  .copy h1{font-size:clamp(2.3rem,10vw,3rem)}
}

/* ---------- rig: tablet + the objects orbiting it ---------- */
.rig{position:absolute;left:50%;top:50%;width:min(68cqw,56cqh * 1.333);aspect-ratio:4/3;
  --tx:0px;--ty:0px;--s:1;transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(var(--s));
  transition:transform .8s cubic-bezier(.65,0,.25,1)}
@container (max-width:600px){ .rig{width:min(90cqw,64cqh * 1.333)} }

.tablet{position:absolute;inset:0;background:var(--bezel);border-radius:5.5% / 7.3%;padding:2.6%;
  box-shadow:0 2px 0 1px #3a2f40 inset,0 40px 60px -30px rgb(40 10 40 / .55),0 12px 24px -12px rgb(40 10 40 / .4)}
.screen{position:relative;height:100%;background:var(--screen);border-radius:2.4% / 3.2%;container-type:inline-size;display:flex;flex-direction:column}
/* the app's indigo control bar: idle icons, or the sentence as picture tiles */
.bar{flex:none;height:12.5cqw;display:flex;align-items:center;gap:1.4cqw;padding-inline:1.8cqw;background:#3a1d96;color:#fff;border-radius:2cqw 2cqw 0 0;position:relative;z-index:3}
.bl,.br{flex:none;display:flex;align-items:center;gap:1.6cqw}
.ic{flex:none;width:5.2cqw;height:5.2cqw;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:transparent;cursor:default}
.ic svg{width:62%;height:62%}
.ic.lock svg{fill:#b7a6ee}
.ic.mic{background:#efeaff}.ic.mic svg{fill:#3a1d96}
.ic.pen{background:#5b3cc4;font-size:2.8cqw}
.ic.cap svg,.ic.pad svg,.ic.book svg{fill:#f1edff;width:78%;height:78%}
.ic.stop svg{width:80%;height:80%}
.ic.micr svg{fill:#e5343d;width:78%;height:78%}
.ic.x{background:#2f6bf0;width:6.6cqw;height:6.6cqw;cursor:pointer}
.ic.play{background:#1faa3a;width:6.6cqw;height:6.6cqw;cursor:pointer}
.ic.x svg,.ic.play svg{fill:#fff;width:55%;height:55%}
.bar .stop,.bar .micr,.bar .x,.bar .play{display:none}
.bar[data-state="sentence"] .cap,.bar[data-state="sentence"] .pad,.bar[data-state="sentence"] .book,
.bar[data-state="listen"] .cap,.bar[data-state="listen"] .pad,.bar[data-state="listen"] .book{display:none}
.bar[data-state="sentence"] .x,.bar[data-state="sentence"] .play,.bar[data-state="listen"] .x,.bar[data-state="listen"] .play{display:grid}
.bar[data-state="listen"] .lock,.bar[data-state="listen"] .mic,.bar[data-state="listen"] .pen{display:none}
.bar[data-state="listen"] .stop,.bar[data-state="listen"] .micr{display:grid}
.slot{flex:1;min-width:0;height:100%;display:flex;align-items:center;gap:1cqw;overflow:hidden;padding-block:1.1cqw}
.slot .chip{flex:none;height:100%;aspect-ratio:.86;display:flex;flex-direction:column;background:#fff;border-radius:1.3cqw;overflow:hidden;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.slot .chip img{flex:1;min-height:0;width:100%;object-fit:cover}
.slot .chip b{font-family:var(--display);font-weight:800;font-size:max(7px,1.8cqw);color:#2b1631;text-align:center;line-height:1.3;white-space:nowrap}
.slot .from{flex:none;font-size:1.7cqw;font-weight:700;color:#cfc3ff;writing-mode:vertical-rl;transform:rotate(180deg)}
.slot .prompt{background:#fff;color:#2b1631;border-radius:99px;padding:.8cqw 2.2cqw;font-weight:800;font-family:var(--display);font-size:2.6cqw;white-space:nowrap;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}

/* the Basic board: people column | 4 noun columns | verb column, high-frequency strip along the bottom */
.board{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.25cqw repeat(4,1fr) 1.25cqw 1fr;grid-template-rows:auto auto 1.2cqw auto;align-content:center;
  column-gap:1.1cqw;row-gap:1.1cqw;padding:1.4cqw;position:relative;z-index:2}
.tile.people{--rc:var(--r-people)} .tile.noun{--rc:var(--r-center)} .tile.verb{--rc:var(--r-people)} .tile.core{--rc:var(--r-strip)}
.sep{grid-row:1/3;justify-self:center;width:.2cqw;background:#e9e2ea;border-radius:2px}
.stripbg{grid-column:1/-1;grid-row:4;margin:-1.1cqw -1.4cqw -1.4cqw;background:#fdf5e7;border-top:.2cqw solid #eee3dc;border-radius:0 0 2cqw 2cqw;z-index:-1}
.board[data-layout="quiz"] .sep,.board[data-layout="quiz"] .stripbg{display:none}
.board[data-layout="quiz"]{grid-template-columns:repeat(3,minmax(0,25cqw));grid-template-rows:auto;justify-content:center;column-gap:6cqw;padding:2cqw}
.board[data-layout="quiz"] .tile{grid-column:auto!important;grid-row:auto!important}

/* ---------- tiles ---------- */
.tile{position:relative;display:flex;flex-direction:column;border:0;padding:0;border-radius:1.9cqw;cursor:pointer;min-width:0;min-height:0;overflow:hidden;
  background:#fff;box-shadow:0 0 0 .5cqw var(--rc) inset,0 .5cqw 1cqw -.5cqw rgb(60 20 50 / .3);will-change:transform}
.tile[hidden]{display:none}
.tile .pic{flex:none;aspect-ratio:1/1;display:grid;place-items:center;position:relative;margin:.5cqw .5cqw 0;border-radius:1.4cqw 1.4cqw 0 0;overflow:hidden;background:#dfeefa}
.tile .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.tile .g{font-size:6.5cqw;line-height:1}
.tile .l{flex:none;font-family:var(--display);font-weight:800;font-size:max(8px,2.2cqw);line-height:1.1;color:var(--tile-ink);padding:.3cqw .4cqw .35cqw;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board[data-layout="quiz"] .tile{border-radius:2.4cqw;box-shadow:0 0 0 .6cqw var(--rc) inset,0 1cqw 2cqw -1cqw rgb(60 20 50 / .4)}
.board[data-layout="quiz"] .tile .pic{margin:.6cqw .6cqw 0}
.board[data-layout="quiz"] .tile .l{font-size:3.2cqw;padding:.8cqw}

.tile[data-style="symbol"]{box-shadow:0 0 0 .22cqw #3b3440 inset;border-radius:.5cqw}
.tile[data-style="symbol"] .pic{background:#fff;margin:.22cqw .22cqw 0;border-radius:0}
.tile[data-style="symbol"] .pic svg{width:78%;height:78%}
.tile[data-style="symbol"] .l{font-family:ui-monospace,Menlo,monospace;font-weight:500;color:#333;text-transform:lowercase}

.tile.press{animation:press .45s ease}
@keyframes press{40%{transform:scale(.9)}}
.tile.heard{box-shadow:0 0 0 .6cqw var(--sky) inset,0 0 0 1cqw color-mix(in srgb,var(--sky) 30%,transparent)}
.tile.correct{box-shadow:0 0 0 .9cqw var(--leaf) inset,0 0 0 2cqw color-mix(in srgb,var(--leaf) 28%,transparent)}
.tile.lit{box-shadow:0 0 0 .6cqw var(--berry) inset,0 0 0 1cqw color-mix(in srgb,var(--berry) 25%,transparent)}

/* ---------- orbiting objects ---------- */
.sat{position:absolute;z-index:6;opacity:0;pointer-events:none;font-size:max(11px,1.9cqmin);
  --fx:0px;--fy:24px;transform:translate(var(--fx),var(--fy)) scale(.85);transition:opacity .45s,transform .6s cubic-bezier(.2,1.2,.35,1)}
.sat.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.15s}
.bubble,.card,.pill{background:var(--card);border:1px solid var(--card-line);box-shadow:var(--shadow);border-radius:18px}
.pill{border-radius:999px;padding:.45em 1em;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:.5em}
.pill .dot{width:.7em;height:.7em;border-radius:50%;background:var(--berry);transition:background .3s}

.s-mode{top:-12%;left:50%;transform:translate(-50%,20px) scale(.85)}
.s-mode.on{transform:translateX(-50%)}
.s-mode[data-kind="symbol"] .dot{background:#777}
.s-mode[data-kind="world"] .dot{background:var(--leaf)}

.s-styles{bottom:-19%;left:50%;display:flex;gap:1.2cqmin;transform:translate(-50%,30px) scale(.85)}
.s-styles.on{transform:translateX(-50%)}
.sc{width:max(64px,12cqmin);display:grid;gap:.3em;justify-items:center;text-align:center;font-weight:700;font-size:.85em;transition:transform .35s cubic-bezier(.2,1.3,.4,1),opacity .3s;opacity:.55}
.sc img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:3px solid transparent;box-shadow:var(--shadow)}
.sc.cur{opacity:1;transform:translateY(-6px) scale(1.06)}
.sc.cur img{border-color:var(--berry)}

.s-speak{top:-19%;right:-5%;--fx:30px;--fy:10px;padding:.7em 1.1em;font-family:var(--display);font-weight:800;font-size:max(15px,3.2cqmin);border-radius:22px 22px 4px 22px}
.s-speak small{display:block;font-family:var(--body);font-size:.5em;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}

.s-listen{top:-22%;left:-6%;--fx:-30px;--fy:0px;padding:.7em 1em;border-radius:22px 22px 22px 4px;max-width:70%}
.s-listen .who{font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:.5em}
.wave{display:inline-flex;gap:2px;align-items:center;height:1em}
.wave i{width:3px;border-radius:2px;background:var(--sky);height:40%;animation:wave 1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.15s}.wave i:nth-child(3){animation-delay:.3s}.wave i:nth-child(4){animation-delay:.45s}
@keyframes wave{50%{height:100%}}
.s-listen .said{font-family:var(--display);font-weight:700;font-size:1.45em;line-height:1.2;margin-top:.2em}
.s-listen .said span{opacity:.25;transition:opacity .3s,color .3s}
.s-listen .said span.in{opacity:1}
.s-listen .said span.hit{color:var(--sky)}

.s-tag{top:-11%;right:1%;font-size:.9em}
.s-tag .dot{background:var(--sun)}
.s-teach{bottom:-12%;left:50%;transform:translate(-50%,20px) scale(.85)}
.s-teach.on{transform:translateX(-50%)}
.s-teach .dot{background:var(--leaf)}

.s-phone{right:-24%;bottom:-30%;width:42%;--fx:60px;--fy:40px}
.phone{background:var(--bezel);border-radius:16%/8%;padding:5%;aspect-ratio:9/18;box-shadow:var(--shadow)}
.phone .ps{height:100%;background:#fff5fa;border-radius:12%/6%;overflow:hidden;display:flex;flex-direction:column;padding:9% 6% 6%;gap:4%;color:#2b1631;font-size:max(7px,1.25cqmin);position:relative}
.ph{display:flex;align-items:center;gap:.5em;background:#fde3f0;border:1px solid #f6c3dc;border-radius:1em;padding:.55em .6em}
.ph .t{flex:1;min-width:0;line-height:1.1}
.ph .t b{display:block;color:#e0197d;font-family:var(--display);font-weight:800;font-size:1.15em;white-space:nowrap}
.ph .t span{color:#e0197d;font-size:.9em}
.ph i{width:1.9em;height:1.9em;border-radius:50%;background:#fff;display:grid;place-items:center}
.ph i svg{width:60%;height:60%;fill:#e0197d}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:.55em;flex:1;min-height:0}
.pc{background:#fff;border:1px solid #f4cfe1;border-radius:.9em;padding:.55em;display:grid;align-content:start;gap:.25em;position:relative;transition:box-shadow .3s,transform .3s}
.pc svg{width:1.7em;height:1.7em}
.pc b{font-family:var(--display);font-weight:800;font-size:1.02em;line-height:1.05}
.pc small{color:#8b7a8c;font-size:.78em;line-height:1.15}
.pc .badge{position:absolute;right:.4em;top:.4em;background:#ffe27a;border-radius:99px;padding:0 .5em;font-weight:800;font-size:.8em}
.pc.hot{box-shadow:0 0 0 2px #2f6bf0,0 6px 14px -6px #2f6bf0;transform:scale(1.04)}
.toast{position:absolute;left:6%;right:6%;bottom:5%;background:#3a1d96;color:#fff;border-radius:1em;padding:.6em .7em;font-weight:700;display:grid;gap:.2em;opacity:0;transform:translateY(20%);transition:opacity .3s,transform .35s}
.toast small{color:#9ff0b5;font-size:.8em}
.toast.in{opacity:1;transform:none}
@container (max-width:600px){ .pc small{display:none} }

.s-note{top:-24%;left:-8%;width:58%;--fx:-40px;--fy:-10px}
.s-quote{bottom:-20%;right:-8%;width:52%;--fx:40px;--fy:20px}
.card{padding:1em 1.15em;display:grid;gap:.45em}
.card .k{font-size:.72em;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--berry)}
.card p{font-size:1em;line-height:1.4;color:var(--fg)}
.card .by{font-size:.85em;color:var(--muted)}
.tq{margin:0;font-family:var(--display);font-weight:700;font-size:1.25em;line-height:1.2;color:var(--fg);text-wrap:balance}
.tq-by{margin:0;font-size:.85em;font-weight:600;color:var(--muted)}
.ph-box{border:1.5px dashed var(--muted);border-radius:12px;padding:.8em;color:var(--muted);font-size:.9em;display:flex;gap:.6em;align-items:center}
.ph-box .play{flex:none;width:2em;height:2em;border-radius:50%;background:var(--berry);display:grid;place-items:center}
.ph-box .play::after{content:"";border-left:.6em solid #fff;border-block:.38em solid transparent;margin-left:.15em}

.s-price{position:absolute;left:50%;bottom:6%;width:min(88cqw,440px);transform:translate(-50%,40px) scale(.9);font-size:max(12px,1.7cqmin)}
.s-price.on{transform:translateX(-50%)}
.s-price .card{gap:0;padding:.7em 1.1em}
.tier{display:grid;grid-template-columns:1fr auto;gap:0 1em;padding:.45em 0;border-bottom:1px dashed var(--card-line);align-items:baseline}
.tier:last-of-type{border-bottom:0}
.tier b{font-family:var(--display);font-size:1.1em}
.tier .p{font-family:var(--display);font-weight:800;font-size:1.1em;font-variant-numeric:tabular-nums;text-align:right}
.tier small{grid-column:1/-1;font-size:.82em;color:var(--muted)}
.tier.feat .p{color:var(--berry)}

@container (max-width:600px){
  .s-listen{left:-2%;top:-24%;max-width:78%}
  .s-speak{right:-2%;top:-22%}
  .s-note{left:-2%;top:-27%;width:66%}
  .s-quote{right:-2%;bottom:-22%;width:62%}
  .s-phone{right:-2%;bottom:-34%;width:40%}
  .s-note p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .s-styles{bottom:-21%}
  .sc{width:max(56px,11cqmin);font-size:.8em}
  .s-price .tier small{display:none}
}

.dots{position:absolute;left:50%;bottom:1.6%;transform:translateX(-50%);display:flex;gap:8px;z-index:4}
.dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--line);cursor:pointer;transition:width .3s,background .3s}
.dots button[aria-current="true"]{width:26px;border-radius:9px;background:var(--berry)}
.stage[data-beat="8"] .dots{opacity:0}
@media (max-width:860px){.dots{display:none}}

/* ---------- closing ---------- */
.close{position:relative;z-index:6;padding:12vh max(16px,4vw) 10vh;text-align:center;display:grid;justify-items:center;gap:20px;background:var(--bg-2)}
.close h2{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;max-width:16ch}
.close p{color:var(--muted);max-width:52ch}
footer{position:relative;z-index:6;background:var(--bg);padding:28px max(16px,4vw);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rig,.sat,.dots button,.sc,.sp,.bd{transition:none!important}
  .sp.cloud.on img{animation:none}
  .wave i,.slot .chip,.slot .prompt,.slot .msg{animation:none}
}

/* ---------- the world: a fixed stage behind (and a little in front of) the page ---------- */
:root{--sky1:#1d8fd6;--sky2:#5fbcea;--sky3:#bfe9f8;--grass1:#93d273;--grass2:#5fae4c;--walk:#e8dfd2;--hill1:#b4e09c;--hill2:#9fd488;
  --wall1:#fff3e2;--wall2:#ffe5cb;--floor1:#e2b885;--floor2:#cc9a64;--class1:#e6f2ff;--class2:#fff4d6;--dusk1:#ffcfe3;--dusk2:#ffe6c2}
/* the world is always lit for daytime; only the page chrome follows light/dark */
.world{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .6s}
.world.off,.wl.front.off{opacity:0}
.set{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.world[data-set="golden"] .set.golden,.world[data-set="night"] .set.night,.world[data-set="street"] .set.street,.world[data-set="room"] .set.room,.world[data-set="class"] .set.class,.world[data-set="sky"] .set.sky{opacity:1}
.set.street,.set.sky{background:linear-gradient(transparent 0 var(--hz),var(--grass1) var(--hz),var(--grass2) 100%),
  radial-gradient(28vmax 28vmax at 92% 8%,rgb(255 246 200 / .55),transparent 70%),
  linear-gradient(var(--sky1) 0%,var(--sky2) calc(var(--hz) * .6),var(--sky3) var(--hz))}
.set.street::before,.set.sky::before{content:"";position:absolute;left:-5%;right:-5%;top:calc(var(--hz) - 13vh);height:13vh;
  background:radial-gradient(38% 100% at 18% 100%,var(--hill1) 70%,transparent 71%),radial-gradient(34% 85% at 52% 100%,var(--hill2) 70%,transparent 71%),radial-gradient(40% 95% at 86% 100%,var(--hill1) 70%,transparent 71%);opacity:.9}
.set.street::after{content:"";position:absolute;left:0;right:0;top:calc(var(--hz) + 4.5vh);height:2.2vh;background:var(--walk);opacity:.85}
.set.room{background:linear-gradient(transparent 0 var(--hz),var(--floor1) var(--hz),var(--floor2) 100%),repeating-linear-gradient(90deg,transparent 0 56px,rgb(255 255 255 / .18) 56px 58px),linear-gradient(var(--wall1),var(--wall2) var(--hz))}
.set.room::after,.set.class::after{content:"";position:absolute;left:0;right:0;top:calc(var(--hz) - 1.2vh);height:1.2vh;background:rgb(255 255 255 / .55)}
.set.class{background:linear-gradient(transparent 0 var(--hz),var(--floor1) var(--hz),var(--floor2) 100%),linear-gradient(var(--class1),var(--class2) var(--hz))}
.set.sky{background:linear-gradient(transparent 0 var(--hz),var(--grass1) var(--hz),var(--grass2) 100%),
  radial-gradient(30vmax 22vmax at 50% var(--hz),rgb(255 214 232 / .7),transparent 70%),
  linear-gradient(var(--sky1) 0%,var(--sky2) calc(var(--hz) * .55),var(--dusk2) var(--hz))}
.world{--hz:84%}
@media (max-width:860px){.world{--hz:50%}}
.wl{position:fixed;inset:0;pointer-events:none}
.wl.front{z-index:30;transition:opacity .6s}
.spr{position:absolute;left:0;top:0;opacity:0;will-change:transform;
  transform:translate(calc(var(--x) + var(--ox)),calc(var(--y) + var(--oy))) rotate(var(--r));
  transition:transform 1.05s cubic-bezier(.3,1.12,.4,1),opacity .35s ease}
.spr.on{opacity:1;transform:translate(var(--x),var(--y));transition-delay:var(--d),var(--d)}
.spr img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 10px rgb(40 20 50 / .18))}

@keyframes drift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}

/* hero bar: pink with the name */
.bar .title{font-family:var(--display);font-weight:800;font-size:3.6cqw;letter-spacing:.01em;white-space:nowrap;padding-left:1cqw}
.stage[data-beat="0"] .bar{background:#e0197d}
.stage[data-beat="0"] .ic.mic svg{fill:#e0197d}.stage[data-beat="0"] .ic.pen{background:#f25fa4}
.bar{overflow:hidden;transition:height .5s cubic-bezier(.3,1.35,.5,1)}
.stage.nobar .bar{height:0}
/* bar icons pop in one at a time on the "built to teach" stop */
.stage[data-beat="2"] .bar .ic:not(.x):not(.play){transform:scale(0);transition:transform .45s cubic-bezier(.2,1.6,.4,1)}
.stage[data-beat="2"] .bar .ic.shown:not(.x):not(.play){transform:scale(1)}
.ic.hl{box-shadow:0 0 0 .6cqw #ffd84d,0 0 2.4cqw #ffd84d}
.s-explain{bottom:-27%;left:50%;width:min(80%,30em);transform:translate(-50%,20px) scale(.9)}
.s-explain.on{transform:translateX(-50%)}
.s-explain .card{grid-template-columns:auto 1fr;align-items:center;gap:.4em .9em}
.s-explain .xi{grid-row:1/3;width:2.6em;height:2.6em;border-radius:50%;background:#3a1d96;display:grid;place-items:center}
.s-explain .xi svg{width:60%;height:60%;fill:#f1edff}
.s-explain .xi.mic{background:#efeaff}.s-explain .xi.mic svg{fill:#3a1d96}
.s-explain .xi.pen{background:#5b3cc4;font-size:1.2em}
.s-explain b{font-family:var(--display);font-size:1.25em;line-height:1}
.s-explain p{color:var(--muted)!important;font-size:.95em!important}

/* voice picker */
.s-voices{bottom:-25%;left:50%;transform:translate(-50%,24px) scale(.9);display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;width:118%;font-size:max(12px,1.9cqmin)}
.s-voices.on{transform:translateX(-50%)}
.vc{display:flex;align-items:center;gap:.5em;border:2px solid var(--card-line);background:var(--card);color:var(--fg);border-radius:999px;padding:.35em .9em .35em .35em;font-weight:700;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.vc:hover{transform:translateY(-2px)}
.vc .av{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800}
.vc .wv{display:inline-flex;gap:2px;align-items:center;height:.9em}
.vc .wv i{width:2.5px;height:35%;border-radius:2px;background:currentColor;opacity:.45}
.vc[aria-pressed="true"]{border-color:var(--berry);background:color-mix(in oklab,var(--berry) 14%,var(--card))}
.vc[aria-pressed="true"] .wv i{opacity:1;color:var(--berry);animation:wave 1s ease-in-out infinite}
.vc[aria-pressed="true"] .wv i:nth-child(2){animation-delay:.15s}.vc[aria-pressed="true"] .wv i:nth-child(3){animation-delay:.3s}
.s-vpill{bottom:-37%;left:50%;transform:translate(-50%,20px) scale(.85)}
.s-vpill.on{transform:translateX(-50%)}
.s-vpill svg{width:1.1em;height:1.1em;fill:var(--berry)}
.cap-line{position:absolute;left:5%;right:5%;bottom:3%;font-weight:700}
@media (prefers-reduced-motion:reduce){.spr{transition:opacity .3s!important;transform:translate(var(--x),var(--y))!important}.spr.float.on img{animation:none}.stage[data-beat="2"] .bar .ic{transition:none}}

@media (max-width:860px){.wl.front{z-index:3}}

/* ambient clouds that drift across every outdoor sky */
.amb{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.world[data-set="golden"] .amb,.world[data-set="street"] .amb,.world[data-set="sky"] .amb{opacity:1}
.amb img{position:absolute;left:0;height:auto;opacity:.92;animation:sail linear infinite}
@keyframes sail{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
.tease{font-weight:700;color:var(--fg)!important;border-top:1px dashed var(--line);padding-top:12px}
/* listen-mode sound toggle */
.mute{margin-left:auto;display:inline-flex;align-items:center;gap:.35em;border:1px solid var(--card-line);background:var(--bg-2);color:var(--fg);border-radius:99px;padding:.2em .6em;font:inherit;font-size:.95em;font-weight:700;letter-spacing:0;text-transform:none;cursor:pointer}
.mute svg{width:1.1em;height:1.1em;fill:currentColor}
.mute .off{display:none}.mute[aria-pressed="true"] .on{display:none}.mute[aria-pressed="true"] .off{display:inline}
/* a day of lessons */
.s-day{bottom:-31%;left:50%;width:112%;transform:translate(-50%,24px) scale(.9);font-size:max(11px,1.75cqmin)}
.s-day.on{transform:translateX(-50%)}
.s-day .card{padding:.7em .9em;gap:.5em}
.day{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em;position:relative}
.day::before{content:"";position:absolute;left:4%;right:4%;top:1.05em;height:3px;border-radius:2px;background:var(--card-line)}
.slotd{position:relative;display:grid;justify-items:center;text-align:center;gap:.2em;transition:transform .3s}
.slotd i{width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);border:2px solid var(--card-line);font-style:normal;font-size:1em;transition:background .3s,border-color .3s}
.slotd b{font-family:var(--display);font-size:1.05em;line-height:1}
.slotd small{color:var(--muted);font-size:.85em;line-height:1.15}
.slotd.now{transform:translateY(-3px)}
.slotd.now i{background:var(--berry);border-color:var(--berry);color:#fff}
@media (max-width:860px){.s-day{width:100%;bottom:-36%}.slotd small{display:none}}
@media (prefers-reduced-motion:reduce){.amb img{animation:none}}

.set.golden{background:linear-gradient(transparent 0 var(--hz),#a6cf6f var(--hz),#7fae4e 100%),
  radial-gradient(40vmax 26vmax at 80% var(--hz),rgb(255 200 120 / .75),transparent 70%),
  linear-gradient(#3a9ad8 0%,#8cc7e8 calc(var(--hz) * .5),#ffd9a3 var(--hz))}
.set.night{background:linear-gradient(transparent 0 var(--hz),#2c4a3a var(--hz),#1e3528 100%),
  radial-gradient(30vmax 20vmax at 88% 12%,rgb(255 240 200 / .25),transparent 70%),
  linear-gradient(#0f1a44 0%,#26346e calc(var(--hz) * .6),#5a4a8a var(--hz))}
.set.golden::before,.set.night::before{content:"";position:absolute;left:-5%;right:-5%;top:calc(var(--hz) - 13vh);height:13vh;
  background:radial-gradient(38% 100% at 18% 100%,#b9d98a 70%,transparent 71%),radial-gradient(34% 85% at 52% 100%,#a3cb76 70%,transparent 71%),radial-gradient(40% 95% at 86% 100%,#b9d98a 70%,transparent 71%);opacity:.9}
.set.night::before{filter:brightness(.38) saturate(.7)}
.world[data-set="night"] ~ .wl.front .spr img,.world[data-set="night"] .wl .spr img{filter:brightness(.72) saturate(.9) drop-shadow(0 8px 10px rgb(0 0 0 / .3))}
.world[data-set="night"] .spr.float img{filter:none}

.stg{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.1s ease}
.stg.on{opacity:1}
.world.painted[data-set="night"] .wl .spr img{filter:brightness(.8) saturate(.9) drop-shadow(0 8px 10px rgb(0 0 0 / .3))}

.spr.orbit.on img{animation:orbit var(--orb,14s) linear infinite}
@keyframes orbit{from{transform:rotate(0deg) translateX(28px) rotate(0deg)}to{transform:rotate(360deg) translateX(28px) rotate(-360deg)}}
.spr.drive .car{display:block;position:relative;transform:translateX(var(--from)) scaleX(var(--sx,1))}
.spr.drive.on .car{animation:drive var(--dur) linear infinite var(--del)}
.spr.drive .car img{animation:none!important}
.wh{position:absolute;aspect-ratio:1;border-radius:50%;background-repeat:no-repeat;animation:spin var(--spin,1s) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drive{from{transform:translateX(var(--from)) scaleX(var(--sx,1))}to{transform:translateX(var(--to)) scaleX(var(--sx,1))}}
.world.painted[data-set="night"] ~ .wl.front .spr img{filter:brightness(.85) drop-shadow(0 8px 10px rgb(0 0 0 / .3))}
@media (prefers-reduced-motion:reduce){.spr.orbit.on img,.spr.drive.on .car,.wh{animation:none}}

.stg.fg{transition:opacity 1.1s ease}
.spr.flip img{transform:scaleX(-1)}
.s-explain{left:0;transform:translate(0,20px) scale(.9)}
.s-explain.on{transform:none}

.spr.nofit{display:none!important}

/* ---------- phone (owner 2026-10-02): live board over a static slice, text below ---------- */
@media (max-width:860px){
  body{background:var(--bg)}
  .nav{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .world,.wl.front{display:none}
  .stage{overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--line)}
  .stage>.stg{position:absolute;inset:0;z-index:0}
  .rig{z-index:1}
  .stage .sat:not(.s-voices){display:none}
  .s-voices{bottom:-21%;width:min(100vw,118%);gap:.35em;font-size:12px}
  .copy{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:0;padding:20px 4px;margin-top:8px}
  .step{min-height:auto;padding-block:8px 28px}
  .step:first-child{min-height:auto}
  .steps{padding-bottom:8vh}
}