/* Joinlings: the page is Sprue's world. The live 3D studio sits behind everything; the words are
   die-cut vinyl stickers and toy-box print, the same language as the Sprue prototype's HUD. */

@font-face { font-family: 'Rammetto One'; src: url('/fonts/rammetto-one-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('/fonts/fredoka-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  --tomato: #e2483d; --tomato-dk: #c23a30; --cream: #f6eedd; --teal: #3fa3a8; --teal-dk: #2b7f84; --butter: #f4c94a; --char: #3a3a3c; --paper: #fffaf0;
  --sweep: #e9bb45;
  --display: 'Rammetto One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --ui: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --print: 0 0 0 3px var(--paper), 3px 4px 0 3px var(--char);
  --print-sm: 0 0 0 2.5px var(--paper), 2px 3px 0 2.5px var(--char);
  --print-press: 0 0 0 3px var(--paper), 1px 1px 0 3px var(--char);
  --col: min(31rem, 100% - 2.5rem);
  --left: clamp(1.25rem, 6vw, 6.5rem);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sweep); color: var(--char);
  font: 500 1.0625rem/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; background: var(--paper); padding: 10px 14px; border-radius: 12px; box-shadow: var(--print-sm); font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--teal-dk); outline-offset: 4px; }

/* ---------------------------------------------------------------- the world behind the page */
#scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
body.ready #scene canvas { opacity: 1; }
#poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: opacity .6s ease; }
body.ready #poster { opacity: 0; }
@media (max-width: 899px) { #poster { object-position: 50% 0%; } }

/* speech bubble and new-piece tag float beside Sprue in the scene */
.bubble, .tag {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  background: var(--paper); border-radius: 16px; box-shadow: var(--print);
  font-weight: 600; line-height: 1.3; opacity: 0; transition: opacity .25s;
  will-change: transform;
}
.bubble { max-width: min(17rem, 70vw); padding: 10px 16px 11px; font-size: 1.02rem; text-align: center; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; background: var(--paper); transform: translateX(-50%) rotate(45deg); border-radius: 0 0 4px 0; box-shadow: 3px 3px 0 0 var(--char); }
.bubble b { color: var(--tomato); font-weight: 700; }
.bubble.show, .tag.show { opacity: 1; }
.tag { padding: 8px 16px 9px; text-align: center; transform-origin: 50% 0; }
.tag b { display: block; font: 400 1.1rem/1.15 var(--display); color: var(--tomato); text-shadow: 1.5px 1px 0 rgba(63,163,168,.5); }
.tag span { font-size: .92rem; }

/* ---------------------------------------------------------------- header */
.top {
  position: fixed; z-index: 20; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.logo {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--cream); border-radius: 14px; box-shadow: var(--print-sm); padding: 7px 14px 8px 10px; transform: rotate(-1.5deg);
}
.logo svg { width: 26px; height: 26px; fill: var(--tomato); filter: drop-shadow(1.5px 2px 0 var(--char)); }
.logo span { font: 400 1.25rem/1 var(--display); color: var(--tomato); text-shadow: 1.5px 1px 0 rgba(63,163,168,.55); }
.top-btns { display: flex; gap: 12px; align-items: center; }
.sound, .join-top {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; border: 0; cursor: pointer;
  border-radius: 13px; box-shadow: var(--print-sm); font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.sound { background: var(--paper); color: var(--char); transform: rotate(1.5deg); }
.sound svg { width: 20px; height: 20px; }
.sound[aria-pressed="true"] { background: var(--butter); }
.sound[aria-pressed="false"] svg { opacity: .55; }
.sound:disabled { cursor: default; opacity: .7; }
.join-top { background: var(--tomato); color: var(--paper); transform: rotate(-1deg); }
.sound:active:not(:disabled), .join-top:active { box-shadow: 0 0 0 2.5px var(--paper), 1px 1px 0 2.5px var(--char); translate: 1px 2px; }
@media (max-width: 520px) {
  .sound .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sound { padding: 8px 11px; }
  .logo span { font-size: 1.08rem; }
  .join-top { font-size: .88rem; padding: 8px 11px; white-space: nowrap; }
  .top-btns { gap: 8px; }
}

/* ---------------------------------------------------------------- sections + cards */
main { position: relative; z-index: 1; }
.beat {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px 0 64px var(--left);
}
.card {
  position: relative; width: var(--col); isolation: isolate;
  background: var(--cream); border-radius: 20px; box-shadow: var(--print);
  padding: 22px 24px 24px; transform: rotate(var(--tilt, -.6deg));
}
/* misregistration: the colour plate slipped a hair past its keyline */
.card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: inherit; transform: translate(-3px, -2px); }
.card.wide { --col: min(36rem, 100% - 2.5rem); }
.card p { margin: 0 0 .7em; }
.card p:last-child { margin-bottom: 0; }
.eyebrow {
  display: inline-block; margin: 0 0 10px !important; padding: 3px 9px 4px; border-radius: 8px;
  background: var(--char); color: var(--butter); font-weight: 700; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase;
}
.word, .card h2 {
  margin: 0 0 12px; font: 400 clamp(2rem, 4.6vw, 3rem)/1.04 var(--display); color: var(--tomato);
  letter-spacing: .005em; text-shadow: 2.5px 2px 0 rgba(63,163,168,.55); text-wrap: balance;
}
h1.word { font-size: clamp(3rem, 10vw, 6rem); margin-bottom: 14px; }
.lede { font-size: 1.18rem; line-height: 1.45; font-weight: 600; }
.aside { font-weight: 700; color: var(--teal-dk); }
.small { font-size: .95rem; }

/* hero */
.hero .card { --tilt: -1deg; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 6px; }
.open-box, .ghost, .send {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 20px 11px; border: 0; cursor: pointer;
  border-radius: 16px; box-shadow: var(--print); font-weight: 700; font-size: 1.08rem; text-decoration: none;
  transition: transform .12s, box-shadow .12s, opacity .2s;
}
.open-box { background: var(--tomato); color: var(--paper); transform: rotate(-.8deg); font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: .01em; }
.ghost { background: var(--paper); color: var(--char); transform: rotate(1deg); }
.open-box:active:not(:disabled), .ghost:active, .send:active:not(:disabled) { box-shadow: var(--print-press); translate: 2px 3px; }
.open-box:disabled { opacity: .55; cursor: default; }
body.hatched .open-box { display: none; }
.hint { font-weight: 600; font-size: .95rem; margin-top: 8px !important; opacity: .85; }
/* what it is, printed on a strip of tape across the box front */
.what {
  display: inline-block; margin: 0 0 12px !important; padding: 6px 13px 7px; border-radius: 10px;
  background: var(--teal); color: var(--paper); font: 400 clamp(1.02rem, 1.7vw, 1.2rem)/1.25 var(--display); letter-spacing: .005em;
  box-shadow: var(--print-sm); transform: rotate(-1.2deg);
}
body.hatched .hint { display: none; }

/* lesson walkthrough: a sticky lesson card heads four steps */
.lesson { position: relative; }
.lesson-head { position: sticky; top: 76px; z-index: 2; padding-left: var(--left); height: 0; }
.lesson-card {
  display: inline-block; background: var(--paper); border-radius: 16px; box-shadow: var(--print-sm); padding: 10px 16px 12px; transform: rotate(.8deg);
  opacity: 0; transition: opacity .3s;
}
.lesson.on .lesson-card { opacity: 1; }
.lesson-card .eyebrow { margin-bottom: 6px !important; font-size: .74rem; }
.lesson-card h2 { margin: 0; font: 400 1.15rem/1.15 var(--display); color: var(--tomato); }
.lesson-card h2 span { display: block; font: 700 1rem/1.3 var(--ui); color: var(--char); }
.pips { display: flex; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.pips li { width: 12px; height: 12px; border-radius: 50%; background: #e6dcc6; box-shadow: inset 0 1.5px 0 rgba(58,58,60,.28); transition: background .25s; }
.pips li.on { background: var(--tomato); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 0 0 1.5px var(--paper), 1px 1.5px 0 1.5px var(--char); }
.step { min-height: 92vh; min-height: 92svh; }
.step .card { --tilt: .5deg; }
.step:nth-child(odd) .card { --tilt: -.8deg; }
.step h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font: 400 1.45rem/1.15 var(--display); color: var(--char); }
.nub {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--tomato); color: var(--paper); font: 400 1.05rem/1 var(--display); font-style: normal;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 0 0 2.5px var(--paper), 2px 2.5px 0 2.5px var(--char);
}
.quote { font-weight: 700; color: var(--teal-dk); font-size: 1.08rem; }
.mic {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 9px 12px; width: fit-content;
  background: var(--paper); border-radius: 14px; box-shadow: var(--print-sm);
}
.mic .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--tomato); animation: blink 1.2s steps(2) infinite; }
.mic .bars { display: flex; align-items: center; gap: 4px; height: 26px; }
.mic .bars i { width: 5px; height: 40%; border-radius: 3px; background: var(--teal); animation: bar 1.1s ease-in-out infinite; }
.mic .bars i:nth-child(2) { animation-delay: -.2s; } .mic .bars i:nth-child(3) { animation-delay: -.5s; } .mic .bars i:nth-child(4) { animation-delay: -.1s; }
.mic .bars i:nth-child(5) { animation-delay: -.7s; } .mic .bars i:nth-child(6) { animation-delay: -.35s; } .mic .bars i:nth-child(7) { animation-delay: -.9s; }
.mic .stop { background: var(--char); color: var(--butter); font-weight: 700; font-size: .85rem; padding: 4px 10px; border-radius: 8px; }
@keyframes bar { 0%, 100% { height: 25%; } 50% { height: 95%; } }
@keyframes blink { 50% { opacity: .25; } }

/* what you'll get: the back of the toy box, parts labelled like a model kit */
.box-back { --tilt: .5deg; }
.box-back .intro { font-weight: 600; }
.parts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.part { position: relative; padding: 12px 14px 13px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 2px #e6dcc6; }
.part h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 400 1.08rem/1.2 var(--display); color: var(--char); }
.part p { margin: 0 0 4px !important; font-size: .98rem; }
.pn {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; transform: rotate(-4deg);
  background: var(--char); color: var(--butter); font: 400 .85rem/1 var(--display); font-style: normal;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 6px; padding: 0; list-style: none; }
.chips li { padding: 4px 10px 5px; border-radius: 9px; background: var(--butter); font-weight: 700; font-size: .9rem; box-shadow: var(--print-sm); transform: rotate(var(--r, 0deg)); }
.chips li.t { background: var(--teal); color: var(--paper); }
.chips li.b { background: var(--cream); }
.more { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; font-weight: 700; color: var(--teal-dk); text-decoration: none; }
.more::after { content: ''; width: 9px; height: 9px; margin-top: -4px; border: solid currentColor; border-width: 0 3px 3px 0; border-radius: 1px; transform: rotate(45deg); }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .box-back h2 { font-size: clamp(2rem, 3.6vw, 2.6rem); margin-bottom: 8px; }
  .box-back .intro { margin-bottom: 0 !important; }
  .parts { gap: 10px; margin-top: 12px; }
  .part { padding: 10px 13px 9px; }
  .part h3 { margin-bottom: 4px; }
  .part p { font-size: .95rem; line-height: 1.42; }
  .chips { margin: 6px 0 4px; gap: 6px; }
}
@media (min-width: 1200px) {
  .box-back { --col: min(46rem, 100% - 2.5rem); }
  .parts { grid-template-columns: 1fr 1fr; }
  .part.wide { grid-column: 1 / -1; }
}

/* class 1: a sticker sheet of the tracks */
.sheet { display: flex; flex-wrap: wrap; gap: 10px 10px; margin: 16px 0 16px; padding: 14px; list-style: none; border-radius: 14px; background: #efe3c9; box-shadow: inset 0 2px 0 rgba(58,58,60,.12); }
.sheet li {
  padding: 6px 12px 7px; border-radius: 11px; background: var(--butter); font-weight: 700; font-size: .95rem;
  box-shadow: var(--print-sm); transform: rotate(var(--r, 0deg));
}
.sheet li.t { background: var(--teal); color: var(--paper); }
.sheet li.b { background: var(--paper); }
.privacy { --tilt: .8deg; background: var(--paper); padding-top: 26px; }
.privacy svg { position: absolute; top: -18px; right: 22px; width: 46px; height: 46px; padding: 7px; border-radius: 14px; background: var(--teal); fill: var(--paper); stroke: var(--paper); box-shadow: var(--print-sm); transform: rotate(6deg); }
.privacy h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem) !important; color: var(--teal-dk) !important; text-shadow: 2px 2px 0 rgba(244,201,74,.9) !important; padding-right: 40px; }

/* how it grows: stage stickers */
.stages { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.stages button {
  min-height: 44px; padding: 7px 13px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--paper); box-shadow: var(--print-sm); transition: transform .12s, box-shadow .12s, background .15s;
}
.stages button b { font: 400 .98rem/1 var(--display); color: var(--teal-dk); }
.stages button:nth-child(odd) { transform: rotate(-1.5deg); }
.stages button:nth-child(even) { transform: rotate(1.5deg); }
.stages button[aria-pressed="true"] { background: var(--tomato); }
.stages button[aria-pressed="true"] b { color: var(--paper); }
.stages button:active { box-shadow: 0 0 0 2.5px var(--paper), 1px 1px 0 2.5px var(--char); translate: 1px 2px; }
.stages button:disabled { cursor: progress; }
.stage-note { font-weight: 600; min-height: 3em; }

.note { --tilt: .7deg; background: var(--paper); }
.note h2 { color: var(--char); text-shadow: 2.5px 2px 0 rgba(244,201,74,.9); }

/* ---------------------------------------------------------------- waitlist: the mail-in coupon off the back of the toy box */
#waitlist { padding-bottom: 96px; }
.coupon {
  position: relative; width: min(30rem, 100% - 2.5rem); padding: 26px 24px 22px;
  background: var(--paper); border-radius: 10px; transform: rotate(-1deg);
  box-shadow: 4px 5px 0 0 var(--char);
  outline: 3px dashed var(--char); outline-offset: -12px;
}
.coupon .cut { position: absolute; top: -13px; left: 22px; display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px 8px; border-radius: 8px; background: var(--butter); font-weight: 700; font-size: .8rem; }
.coupon .cut svg { width: 16px; height: 16px; fill: none; stroke: var(--char); stroke-width: 2.2; stroke-linecap: round; }
.coupon h2 { margin: 6px 0 10px; font: 400 clamp(1.8rem, 4vw, 2.4rem)/1.08 var(--display); color: var(--tomato); text-shadow: 2.5px 2px 0 rgba(63,163,168,.55); }
.coupon p { margin: 0 0 14px; }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.field input {
  width: 100%; min-height: 52px; padding: 10px 14px; border: 0; border-radius: 12px;
  background: var(--cream); color: var(--char); font: 600 1.06rem var(--ui);
  box-shadow: inset 0 2px 0 rgba(58,58,60,.18), 0 0 0 2.5px var(--char);
}
.field input:focus { outline: none; box-shadow: inset 0 2px 0 rgba(58,58,60,.18), 0 0 0 3px var(--teal-dk); }
.field input[aria-invalid="true"] { box-shadow: inset 0 2px 0 rgba(58,58,60,.18), 0 0 0 3px var(--tomato); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; font-weight: 600; font-size: .97rem; cursor: pointer; }
.consent input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--tomato); cursor: pointer; }
.consent.invalid span { color: var(--tomato-dk); }
.send { width: 100%; background: var(--tomato); color: var(--paper); font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: .01em; }
.send:disabled { opacity: .7; cursor: progress; }
.msg { min-height: 1.5em; margin: 12px 0 4px !important; font-weight: 700; }
.msg.ok { color: var(--teal-dk); }
.msg.err { color: var(--tomato-dk); }
.coupon.done .field, .coupon.done .consent, .coupon.done .send { display: none; }
.coupon.done .msg { font-size: 1.12rem; }
.fine { font-size: .85rem; margin: 0 !important; opacity: .85; }

/* ---------------------------------------------------------------- the scroll dock: a little parts frame that fills in as you go */
.dock {
  position: fixed; z-index: 15; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  translate: -50% 0; transition: opacity .3s, translate .3s;
}
.dock.gone { opacity: 0; translate: -50% 20px; pointer-events: none; }
.dock-pips { display: flex; gap: 6px; margin: 0; padding: 5px 9px; list-style: none; border-radius: 10px; background: var(--paper); box-shadow: var(--print-sm); }
.dock-pips li { width: 13px; height: 13px; background: #d9ccb0; clip-path: path('M3.5 0h5v2.4a1.7 1.7 0 1 0 0 3.2V12h-5V9.6a1.7 1.7 0 1 1 0-3.2z'); transition: background .25s, scale .25s; }
.dock-pips li.on { background: var(--tomato); }
.dock-pips li.now { background: var(--teal); scale: 1.3; }
.dock-next {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 12px 8px 16px; border: 0; cursor: pointer;
  border-radius: 14px; background: var(--cream); box-shadow: var(--print-sm); font-weight: 700; font-size: .95rem; white-space: nowrap;
  transform: rotate(-1deg); transition: box-shadow .12s;
}
.dock-next svg { flex: none; width: 28px; height: 28px; padding: 5px 5px 4px; border-radius: 50%; background: var(--tomato); fill: none; stroke: var(--paper); stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); animation: bob 1.6s ease-in-out infinite; }
.dock-next:active { box-shadow: 0 0 0 2.5px var(--paper), 1px 1px 0 2.5px var(--char); translate: 1px 2px; }
/* first screen: the cue is bigger and louder */
.dock.start .dock-next { min-height: 52px; padding: 8px 10px 9px 20px; background: var(--paper); color: var(--tomato); font: 400 1.05rem/1 var(--display); letter-spacing: .01em; box-shadow: var(--print); }
.dock.start .dock-next svg { width: 34px; height: 34px; padding: 7px 7px 5px; }
/* nobody has scrolled for a few seconds: a bigger hop */
.dock.nudge .dock-next svg { animation: hop .9s cubic-bezier(.3,.7,.4,1) 2; }
@keyframes bob { 0%, 100% { translate: 0 -1px; } 50% { translate: 0 3px; } }
@keyframes hop { 0%, 100% { translate: 0 0; } 35% { translate: 0 8px; } 60% { translate: 0 -2px; } }

/* ---------------------------------------------------------------- footer: the printed band along the bottom of the box */
.band {
  position: relative; z-index: 1; background: var(--char); color: var(--cream);
  padding: 22px max(20px, var(--left)) max(26px, env(safe-area-inset-bottom)); font-weight: 600;
}
.band p { margin: 0 0 6px; }
.band a { color: var(--butter); }
.band .links { display: flex; gap: 18px; }
.pieces { display: flex; gap: 14px; margin: 0 0 14px; padding: 0; list-style: none; }
.pieces li { width: 26px; height: 26px; background: var(--tomato); clip-path: path('M8 2h10v5a3.5 3.5 0 1 0 0 6v11H8v-5a3.5 3.5 0 1 1 0-6z'); }
.pieces li:nth-child(2) { background: var(--cream); } .pieces li:nth-child(3) { background: var(--teal); } .pieces li:nth-child(4) { background: var(--butter); }

/* ---------------------------------------------------------------- the picture fallback note */
.fail { position: fixed; z-index: 30; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(26rem, 100% - 2rem); display: flex; gap: 12px; align-items: center; background: var(--paper); border-radius: 14px; box-shadow: var(--print-sm); padding: 10px 12px 10px 16px; font-weight: 600; font-size: .92rem; }
.fail[hidden] { display: none; }
.fail p { margin: 0; }
.fail button { flex: none; min-height: 40px; border: 0; border-radius: 10px; background: var(--char); color: var(--butter); font-weight: 700; padding: 6px 14px; cursor: pointer; }

/* ---------------------------------------------------------------- phones and narrow windows: Sprue up top, words below */
@media (max-width: 899px) {
  :root { --left: 0px; }
  .beat { align-items: center; justify-content: flex-end; padding: 0 0 calc(96px + env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100svh; }
  .what { margin-bottom: 8px !important; }
  .beat:not(.hero) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* past the first screen the dock folds into one small row: the pieces and the arrow */
  .dock:not(.start) { flex-direction: row; gap: 8px; }
  .dock:not(.start) .dock-pips { padding: 0 10px; align-items: center; min-height: 34px; transform: rotate(1deg); }
  .dock:not(.start) { align-items: center; }
  .dock:not(.start) .dock-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dock:not(.start) .dock-next { padding: 7px 8px; }
  .part h3 { font-size: 1rem; }
  .card, .coupon { margin: 0 auto; }
  .card { padding: 18px 18px 20px; }
  .hero.beat { justify-content: flex-end; }
  h1.word { font-size: clamp(2.4rem, 13vw, 4rem); margin-bottom: 8px; }
  .hero-actions { gap: 10px; margin: 14px 0 4px; }
  .hero-actions .open-box, .hero-actions .ghost { min-height: 48px; padding: 8px 14px 9px; font-size: 1rem; }
  .hero .eyebrow { margin-bottom: 6px !important; }
  .lede { font-size: 1.06rem; }
  .card p { font-size: 1rem; }
  .step { min-height: 88vh; min-height: 88svh; }
  .lesson-head { top: 70px; display: flex; justify-content: center; }
  .lesson-card { padding: 8px 13px 10px; }
  .lesson-card .eyebrow { display: none; }
  .bubble { font-size: .95rem; }
  #waitlist { justify-content: center; padding-top: 90px; }
  /* long cards: leave open floor first so the snaps and the evolve play in view before the words arrive */
  #communication, #grow { padding-top: 55vh; padding-top: 55svh; }
}
/* very short phones: give the words room to breathe */
@media (max-width: 899px) and (max-height: 700px) {
  .card p { font-size: .95rem; }
  .sheet { gap: 7px; padding: 10px; }
  .sheet li { font-size: .86rem; padding: 4px 9px 5px; }
  .hero.beat { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* the header already has the waitlist button; leave the box in view */
  .hero .ghost, .hero .hint { display: none; }
  h1.word { font-size: clamp(2.2rem, 11vw, 3rem); }
  .lede { font-size: 1rem; }
  .dock { gap: 4px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .dock-next { min-height: 44px; }
}

/* no 3D: the picture stays, the page stays */
body.no3d #poster { opacity: 1 !important; }
body.no3d .open-box, body.no3d .hint, body.no3d .aside { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dock-next svg, .dock.nudge .dock-next svg { animation: none !important; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ---------------------------------------------------------------- studio credit (brand/made-by kit), on the box band */
/* "Made by Really Bad Studio" badge. Default look; copy into a product and tune the custom
   properties (and fonts) so it sits in that product's own design. Colour follows the text
   around it, so it works on light and dark grounds. The cobalt RBS tile never changes. */
.rbs-made-by{--rbs-mark:36px;--rbs-icon:18px;--rbs-hit:44px;--rbs-gap:16px;--rbs-dim:.72;display:flex;flex-wrap:wrap;align-items:center;gap:8px var(--rbs-gap)}
.rbs-made-by__credit{display:inline-flex;align-items:center;gap:10px;min-height:var(--rbs-hit);color:inherit;text-decoration:none}
.rbs-made-by__mark{width:var(--rbs-mark);height:var(--rbs-mark);flex:none;display:block}
.rbs-made-by__text{display:flex;flex-direction:column;line-height:1.15}
.rbs-made-by__text small{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:var(--rbs-dim)}
.rbs-made-by__text b{font-weight:600}
.rbs-made-by__credit:hover b{text-decoration:underline;text-underline-offset:3px}
.rbs-social{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.rbs-social a{display:grid;place-items:center;width:var(--rbs-hit,44px);height:var(--rbs-hit,44px);color:inherit;opacity:var(--rbs-dim,.72);transition:opacity .15s}
.rbs-social a:hover,.rbs-social a:focus-visible{opacity:1}
.rbs-social svg{width:var(--rbs-icon,18px);height:var(--rbs-icon,18px);display:block}
.band .rbs-made-by { color: var(--cream); margin-bottom: 8px; --rbs-dim: .85; }
.band .rbs-made-by a { color: inherit; }
.band .rbs-made-by__text { font-weight: 700; }

/* ================================================================ the unveiling (preview build only)
   A polite, slightly-too-perfect corporate page sits over Sprue's world. The box knocks, a door opens,
   and the page breaks into jigsaw pieces that flip to Joinlings colours as they fall away. */
html.intro, html.intro body, html.intro-lock, html.intro-lock body { overflow: hidden; }
html:not(.intro) #intro, html:not(.intro) #intro-skip { display: none; }
html.intro .top, html.intro .hero-card, html.intro .dock { opacity: 0; }

#intro { position: fixed; inset: 0; z-index: 40; }
.corp {
  position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(60rem 30rem at 78% 40%, #e3e9ff 0%, rgba(227,233,255,0) 70%), #f7f7f4;
  color: #1f2633; font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.corp * { box-sizing: border-box; }
.c-nav { display: flex; align-items: center; gap: 28px; height: 68px; padding: 0 clamp(18px, 5vw, 72px); border-bottom: 1px solid #e6e6e1; background: rgba(255,255,255,.7); }
.c-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; letter-spacing: -.01em; margin-right: auto; }
.c-logo i { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #4c6ef5, #3b5bdb); box-shadow: inset 0 0 0 5px rgba(255,255,255,.0), inset 6px 6px 0 -1px rgba(255,255,255,.28); }
.c-links { display: flex; gap: 26px; color: #4b5563; font-size: 14.5px; }
.c-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 8px; background: #3b5bdb; color: #fff; font-weight: 600; font-size: 14.5px; box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.c-ghost { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 8px; border: 1px solid #d5d7dd; background: #fff; color: #1f2633; font-weight: 600; font-size: 14.5px; }
.c-burger { display: none; flex-direction: column; gap: 4px; }
.c-burger i { width: 20px; height: 2px; border-radius: 2px; background: #1f2633; }
.c-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; height: calc(100% - 68px); padding: 0 clamp(18px, 5vw, 72px) 40px; }
.c-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 34rem; }
.c-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 99px; background: #fff; border: 1px solid #e3e5ea; font-size: 13px; color: #4b5563; }
.c-pill b { padding: 2px 9px; border-radius: 99px; background: #edf2ff; color: #3b5bdb; font-weight: 600; }
.c-h { display: block; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.c-sub { display: block; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: #5b6472; max-width: 30rem; }
.c-ctas { display: flex; gap: 12px; margin-top: 6px; }
.c-ctas .c-btn, .c-ctas .c-ghost { height: 46px; padding: 0 22px; font-size: 15.5px; }
.c-dash { align-self: center; padding: 20px 22px 18px; border-radius: 16px; background: #fff; border: 1px solid #e6e8ee; box-shadow: 0 24px 48px -16px rgba(30,41,82,.22), 0 2px 6px rgba(16,24,40,.05); }
.c-dash-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 14px; }
.c-dash-top span { color: #6b7280; font-size: 12.5px; border: 1px solid #e3e5ea; border-radius: 6px; padding: 2px 8px; }
.c-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.c-kpis div { padding: 12px 12px 10px; border-radius: 10px; background: #f8f9fb; border: 1px solid #eef0f4; display: flex; flex-direction: column; gap: 2px; }
.c-kpis small { font-size: 11.5px; color: #6b7280; }
.c-kpis b { font-size: 26px; letter-spacing: -.02em; line-height: 1.15; }
.c-kpis b span { font-size: 13px; color: #6b7280; font-weight: 500; letter-spacing: 0; }
.c-kpis em { font-style: normal; font-size: 12px; font-weight: 600; color: #12a150; }
.c-kpis em.flat { color: #6b7280; }
.c-line { display: block; width: 100%; height: clamp(60px, 9vh, 96px); margin-bottom: 10px; }
.c-line path { fill: none; stroke: #4c6ef5; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.c-line .c-area { fill: rgba(76,110,245,.1); stroke: none; }
.c-bars { display: flex; align-items: flex-end; gap: 8px; height: clamp(54px, 8vh, 80px); }
.c-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: #dbe4ff; }
.c-bars i:nth-child(n+8) { background: #91a7ff; }
@media (max-width: 899px) {
  /* phones: the product shot first (that's where the box is), the pitch underneath */
  .c-nav { height: 60px; gap: 12px; }
  .c-links, .c-nav-btn { display: none; }
  .c-burger { display: flex; }
  .c-logo { font-size: 14px; }
  .c-hero { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: space-evenly; gap: 22px; height: calc(100% - 60px); padding: 18px 18px 28px; }
  .c-dash { order: -1; padding: 14px 14px 12px; }
  .c-kpis { gap: 6px; }
  .c-kpis div { padding: 8px 8px 7px; }
  .c-kpis b { font-size: 20px; }
  .c-kpis small { font-size: 10.5px; }
  .c-copy { gap: 12px; }
  .c-h { font-size: clamp(28px, 8.4vw, 36px); }
  .c-sub { font-size: 15.5px; }
  .c-ctas .c-ghost { display: none; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .c-line { display: none; }
  .c-pill { display: none; }
}

#intro-skip {
  position: fixed; z-index: 45; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 0 16px; border: 1px solid #d5d7dd; border-radius: 8px; background: rgba(255,255,255,.92); color: #374151;
  font: 600 14px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; cursor: pointer;
  transition: opacity .2s;
}
#intro-skip.gone { opacity: 0; pointer-events: none; }

/* the door, cut into the corporate page right where the box is knocking */
.door { position: fixed; z-index: 42; pointer-events: none; perspective: 1400px; }
.door-leaf { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; }
.door-face, .door-back { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r) var(--r) 0 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.door-face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 3px dashed #3a3a3c; border-bottom: 0; }
.door-face .knob { position: absolute; z-index: 2; right: 12%; top: 54%; width: 14px; height: 14px; border-radius: 50%; background: #f4c94a; box-shadow: 0 0 0 2.5px #3a3a3c; }
.door-back { opacity: 0; transform: rotateY(180deg); background: #e2483d; box-shadow: inset 0 0 0 6px #fffaf0; }
.knock {
  position: fixed; z-index: 43; pointer-events: none; padding: 6px 13px 7px; border-radius: 12px;
  background: #fffaf0; color: #3a3a3c; box-shadow: 0 0 0 2.5px #fffaf0, 2px 3px 0 2.5px #3a3a3c;
  font: 700 1rem/1 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif; opacity: 0; translate: -50% 0;
}
/* the corporate page in jigsaw pieces */
.shard { position: fixed; z-index: 41; pointer-events: none; transform-style: preserve-3d; will-change: transform, opacity; }
.shard > div { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.shard > .back { opacity: 0; transform: rotateY(180deg); }

/* the real first screen snaps in */
@keyframes snapIn { 0% { opacity: 0; scale: .7; rotate: -6deg; } 60% { opacity: 1; scale: 1.04; rotate: 1deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes popIn { 0% { opacity: 0; scale: .6; } 70% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }
html.intro-reveal .top { animation: popIn .45s .05s cubic-bezier(.3,.7,.4,1) backwards; }
html.intro-reveal .hero-card { animation: snapIn .6s .12s cubic-bezier(.3,.7,.4,1) backwards; }
html.intro-reveal .dock { animation: popIn .45s .55s cubic-bezier(.3,.7,.4,1) backwards; }

/* replay: a little die-cut door, under the hero once Sprue is out, and in the footer */
.replay {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 .95rem/1.2 var(--ui); color: var(--teal-dk);
}
.replay svg { flex: none; width: 26px; height: 26px; padding: 3px; border-radius: 8px; background: var(--paper); box-shadow: var(--print-sm); fill: none; stroke: var(--tomato); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-4deg); transition: transform .2s; }
.replay svg circle { fill: var(--char); stroke: none; }
.replay:hover span { text-decoration: underline; text-underline-offset: 3px; }
.replay:hover svg { transform: rotate(-4deg) perspective(60px) rotateY(-28deg); }
.replay[hidden], body:not(.hatched) .replay-hero { display: none; }
.replay-hero { margin-top: 10px; }
.band .replay { color: var(--butter); font-weight: 600; font-size: 1rem; }
.band .replay svg { width: 22px; height: 22px; padding: 2px; box-shadow: none; }
.band .links { flex-wrap: wrap; align-items: center; }
@media (prefers-reduced-motion: reduce) { .replay:hover svg { transform: rotate(-4deg); } }