:root {
  --bg: #FFFFFF;
  --fg: #1A1523;
  --sub: #4A4357;
  --mute: #6B6478;
  --line: #DED8E8;
  --pill-bg: #F3EFFF;
  --pill-fg: #4B32D6;
  --grape: #6C4BFF;
  --sun: #FFD23F;
  --cream: #FFF4CC;
  --peach: #FF9F7A;
  --mint-ink: #0E7A4E;
  --loss: #B4431B;
  --shadow: 0 14px 36px rgba(26, 21, 35, 0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fade: cubic-bezier(0.45, 0, 0.55, 1);
  --pop: cubic-bezier(0.3, 1.6, 0.5, 1);

  --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  --hand: 'Shantell Sans', 'Figtree', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  color-scheme: light;
}

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

html, body { margin: 0; background: var(--bg); color: var(--fg); }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, .done:focus-visible {
  outline: 3px solid var(--grape);
  outline-offset: 3px;
}

.sr, .hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 16px; top: 12px; z-index: 10;
  padding: 8px 12px; border-radius: 999px;
  background: var(--fg); color: #FFFFFF; font-weight: 700; font-size: 14px; text-decoration: none;
  transform: translateY(-160%);
  transition: transform 300ms var(--ease);
}
.skip:focus { transform: none; }

/* ---------- Layout ---------- */

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 28px 24px;
  padding-inline: max(16px, 4.5vw);
  max-width: 1600px;
  margin: 0 auto;
}

.top { display: flex; align-items: center; justify-content: space-between; }

/* Home: the logo floats off the top edge and stays put while you scroll. The frosted
   pill behind it only shows once content passes under it. Blur lives on ::before so
   the header never becomes a containing block for anything fixed. */
.page { position: relative; }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.home .top { position: sticky; top: 20px; z-index: 20; align-self: flex-start; }
.home .logo { position: relative; isolation: isolate; padding: 8px 16px; margin: -8px 0 -8px -16px; border-radius: 999px; }
.home .logo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(26, 21, 35, 0.06), 0 8px 24px rgba(26, 21, 35, 0.08);
  opacity: 0;
  transition: opacity 300ms var(--fade);
}
.home .top.stuck .logo::before { opacity: 1; }

.logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
}
.logo-i { position: relative; display: inline-block; }
/* Echo dot: the dot on the i, echoed in sky and peach like a looping clip */
.logo-dot {
  position: absolute;
  left: calc(50% - 0.11em);
  bottom: 0.7em;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
}
.logo-dot.sky { background: #7FD3FF; transform: translate(-0.075em, -0.05em); }
.logo-dot.peach { background: var(--peach); transform: translate(0.075em, 0.05em); }
.logo-dot.ink { background: var(--fg); }
.logo.buzz .logo-dot.sky { animation: buzz-sky 900ms var(--ease); }
.logo.buzz .logo-dot.peach { animation: buzz-peach 900ms var(--ease); }
@keyframes buzz-sky {
  0%, 100% { transform: translate(-0.075em, -0.05em); }
  20% { transform: translate(-0.14em, -0.095em); }
  45% { transform: translate(-0.02em, -0.012em); }
  70% { transform: translate(-0.1em, -0.065em); }
}
@keyframes buzz-peach {
  0%, 100% { transform: translate(0.075em, 0.05em); }
  20% { transform: translate(0.14em, 0.095em); }
  45% { transform: translate(0.02em, 0.012em); }
  70% { transform: translate(0.1em, 0.065em); }
}

.hero {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  min-height: 0;
}

/* ---------- Copy column ---------- */

.copy {
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 15px;
  font-weight: 700;
}
.pill svg { width: 16px; height: auto; overflow: visible; }
.pill path { fill: none; stroke: currentColor; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(52px, 6.4vw, 100px);
  line-height: 0.96;
  letter-spacing: -0.04em;
}
h1 .line { display: block; }

.scribbled { position: relative; display: inline-block; }
.scribble {
  position: absolute;
  left: -4%;
  bottom: -0.08em;
  width: 108%;
  height: 0.22em;
  overflow: visible;
}
.scribble path {
  fill: none;
  stroke: var(--peach);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.sub {
  margin: 0;
  max-width: 520px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--sub);
  text-wrap: pretty;
}

.who { margin: 0; font-size: 15px; color: var(--mute); }

/* ---------- Signup ---------- */

.signup { position: relative; max-width: 560px; }

.form { display: flex; flex-wrap: wrap; gap: 10px; }

.form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  height: 56px;
  padding: 0 22px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 17px;
  transition: border-color 300ms var(--fade), box-shadow 300ms var(--fade);
}
.form input[type="email"]::placeholder { color: #8A8396; }
.form input[type="email"]:hover { border-color: #C9C0D8; }
.form input[type="email"]:focus { border-color: var(--grape); outline: none; box-shadow: 0 0 0 4px rgba(108, 75, 255, 0.16); }
.signup[data-state="error"] input[type="email"] { border-color: var(--loss); }

.btn {
  position: relative;
  height: 56px;
  padding: 0 26px;
  border-radius: 999px;
  border: 0;
  background: var(--fg);
  color: #FFFFFF;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 300ms var(--ease), background-color 300ms var(--fade), box-shadow 300ms var(--fade);
}
.btn:hover { background: #2E2740; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(26, 21, 35, 0.18); }
.btn:active { transform: scale(0.98); box-shadow: none; transition-duration: 200ms; }
.btn-label, .btn-busy { display: block; transition: opacity 200ms var(--fade); }
.btn-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
.signup[data-state="loading"] .btn { cursor: progress; background: #2E2740; }
.signup[data-state="loading"] .btn-label { opacity: 0; }
.signup[data-state="loading"] .btn-busy { opacity: 1; animation: breathe 1400ms var(--fade) infinite; }
@keyframes breathe { 50% { opacity: 0.55; } }

.msg {
  margin: 8px 0 0 22px;
  min-height: 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--loss);
}

.done {
  position: absolute;
  inset: 0 0 auto 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 500ms var(--fade), transform 600ms var(--ease), visibility 0s linear 600ms;
}
.done p { margin: 0; }
.done-tick {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grape);
  display: flex; align-items: center; justify-content: center;
}
.done-tick svg { width: 18px; overflow: visible; }
.done-tick path {
  fill: none; stroke: #FFFFFF; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.signup .form { transition: opacity 300ms var(--fade), transform 500ms var(--ease); }
.signup[data-state="done"] .form { opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden; transition: opacity 300ms var(--fade), transform 500ms var(--ease), visibility 0s linear 300ms; }
.signup[data-state="done"] .done { opacity: 1; visibility: visible; transform: none; transition-delay: 150ms, 150ms, 0s; }
.signup[data-state="done"] .done-tick path { stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--ease) 450ms; }

/* ---------- Receipt stage ---------- */

.stage-wrap {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.stage {
  --card-w: 300px;
  --dock-scale: 0.7;
  position: relative;
  width: 460px;
  max-width: 100%;
  height: 744px;
}

.blob {
  position: absolute;
  left: 50%;
  /* fixed to the receipt's top, not the stage height, so it always starts just
     under the order bar and sits behind the card and receipt */
  top: 310px;
  width: 500px;
  height: 500px;
  margin: -250px 0 0 -250px;
  border-radius: 50%;
  background: var(--cream);
}

.note {
  position: absolute;
  left: -120px;
  top: 110px;
  margin: 0;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--pill-fg);
  transform: rotate(-5deg);
}
.note .arrow { display: inline-block; }

.slot {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 400px;
  max-width: 100%;
  height: 44px;
  transform: translateX(-50%);
  border-radius: 22px;
  background: var(--fg);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  z-index: 2;
}
.dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3DDC97; }
.dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #3DDC97;
  opacity: 0;
}
.stage.ping .dot::after { animation: ping 900ms var(--ease); }
@keyframes ping { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

.slot-label { display: grid; }
.slot-label > span { grid-area: 1 / 1; text-align: center; white-space: nowrap; }
.slot-idle { opacity: 0; }

/* Product card: someone taps Buy now before the order lands */
.order-card { display: none; font-family: var(--body); font-size: 16px; line-height: normal; }
.oc-bg { position: absolute; inset: 0; z-index: -1; border-radius: 20px; background: #FFFFFF; box-shadow: var(--shadow); }
.oc-img {
  flex: 0 0 84px;
  height: 104px;
  border-radius: 12px;
  background: #FFE8F1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod { width: 40px; height: auto; overflow: visible; }
.b-loop { fill: none; stroke: #F4A6C4; stroke-width: 4; stroke-linecap: round; }
.b-lid { fill: #FFD3E4; }
.b-neck { fill: #E36A97; }
.b-body { fill: #FF8DB7; }
.b-shade { fill: #F06C9E; opacity: 0.55; }
.b-shine { fill: #FFFFFF; opacity: 0.6; }
.b-base { fill: #F06C9E; }
.oc-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.oc-name { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--fg); }
.oc-meta { font-size: 13px; line-height: 16px; color: var(--mute); }
.oc-price { margin-top: 4px; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 24px; letter-spacing: -0.02em; }
.oc-btn {
  position: relative;
  margin-top: 8px;
  height: 32px;
  min-width: 112px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--fg);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.oc-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
.oc-done { opacity: 0; transform: translateY(8px); }
.oc-done svg { width: 12px; overflow: visible; }
.oc-done path { fill: none; stroke: #FFFFFF; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.oc-tap {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  opacity: 0;
  transform: scale(0.2);
}

.feed {
  position: absolute;
  left: 50%;
  top: 42px;
  width: 340px;
  margin-left: -170px;
  height: 664px;
  overflow: hidden;
  z-index: 1;
}

.paper {
  position: relative;
  padding: 30px 26px 28px;
  background: #FFFFFF;
  color: var(--fg);
  box-shadow: 0 10px 30px rgba(26, 21, 35, 0.14);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 12px;
}
.r-head { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--mute); }
.rule { height: 0; border-top: 2px dashed var(--line); }
.r-new { display: none; }
.consent { display: none; }

.item { display: flex; align-items: center; gap: 12px; }
.item-img {
  flex: 0 0 42px;
  height: 52px;
  border-radius: 8px;
  background: #FFE8F1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-img svg { width: 22px; height: auto; overflow: visible; }
.item-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-name { font-family: var(--body); font-weight: 700; font-size: 14px; line-height: 20px; color: var(--fg); }
.item-meta { font-size: 12px; line-height: 16px; color: var(--mute); }

.items { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 18px; }
.items dl, .grp-inner { margin: 0; }
.grp, .grp-inner { display: flex; flex-direction: column; gap: 4px; }

/* Cost groups: on phones each group prints as one subtotal line instead of its items */
.grp-head { display: none; }
.grp-amt { color: var(--loss); font-variant-numeric: tabular-nums; }
.row { display: flex; justify-content: space-between; gap: 12px; color: var(--sub); }
.row dt, .row dd { margin: 0; }
.row dd { color: var(--loss); font-variant-numeric: tabular-nums; }
.row.sale { color: var(--fg); font-weight: 600; }
.row.sale dd { color: var(--fg); }

.total { display: flex; justify-content: space-between; align-items: baseline; }
.total-label { font-family: var(--body); font-weight: 800; font-size: 18px; }
.total-num {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  transform-origin: 100% 70%;
}
.total-num.is-neg { color: var(--loss); }

.fine { margin: 0; font-family: var(--body); font-size: 12px; line-height: 16px; color: var(--mute); }

.tear { position: absolute; left: 0; bottom: -11px; width: 100%; height: 12px; }
.tear path, .tear-live path { fill: #FFFFFF; }
.tear-live { display: none; }
.dock { display: none; }


/* ---------- Motion (only when JS runs and motion is allowed) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .rise {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--fade), transform 900ms var(--ease);
    transition-delay: calc(80ms + var(--i) * 70ms);
  }
  .js.ready .rise { opacity: 1; transform: none; }

  .js .scribble path { stroke-dashoffset: 1; }
  .js.ready .scribble path { stroke-dashoffset: 0; transition: stroke-dashoffset 800ms var(--ease) 620ms; }

  .js .slot { opacity: 0; transform: translateX(-50%) translateY(-16px); transition: opacity 600ms var(--fade), transform 800ms var(--ease); transition-delay: 200ms; }
  .js.ready .slot { opacity: 1; transform: translateX(-50%); }

  .js .blob { opacity: 0; transform: scale(0.86); transition: opacity 900ms var(--fade), transform 1200ms var(--ease); transition-delay: 120ms; }
  .js.ready .blob { opacity: 1; transform: none; }

  /* Order intro: card rises, Buy now is tapped, card drops into the slot,
     the slot flips to "New order". main.js toggles these classes on .stage. */
  .js .stage[data-play] .slot-idle { opacity: 1; }
  .js .stage[data-play] .slot-new { opacity: 0; transform: translateY(6px); }
  .js .stage[data-play] .slot-idle,
  .js .stage[data-play] .slot-new { transition: opacity 300ms var(--fade), transform 500ms var(--ease); }
  .js .stage[data-play].ordered .slot-idle { opacity: 0; transform: translateY(-6px); }
  .js .stage[data-play].ordered .slot-new { opacity: 1; transform: none; }
  .js .stage[data-play] .dot { background: #A49CB2; transition: background-color 300ms var(--fade); }
  .js .stage[data-play].ordered .dot { background: #3DDC97; }

  .js .stage[data-play] .order-card {
    position: absolute;
    left: 50%;
    top: 112px;
    width: var(--card-w);
    margin-left: calc(var(--card-w) / -2);
    display: flex;
    gap: 14px;
    padding: 12px;
    isolation: isolate;
    transform-origin: 0 0;
    z-index: 3;
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    transition: opacity 500ms var(--fade), transform 700ms var(--ease);
  }
  .js .stage[data-play].shop .order-card { opacity: 1; transform: none; }
  .js .stage[data-play].shop .prod { animation: bob 1600ms var(--ease) 200ms; transform-origin: 50% 100%; }
  @keyframes bob { 0%, 100% { transform: none; } 35% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } }
  .js .stage[data-play].tap .oc-btn { transform: scale(0.95); transition: transform 200ms var(--ease); }
  .js .stage[data-play].tap .oc-tap { animation: tap 600ms var(--ease) forwards; }
  @keyframes tap { 0% { opacity: 1; transform: scale(0.2); } 100% { opacity: 0; transform: scale(4); } }
  .js .stage[data-play].bought .oc-btn { transform: none; background: var(--mint-ink); transition: transform 300ms var(--pop), background-color 300ms var(--fade); }
  .js .stage[data-play].bought .oc-buy { opacity: 0; transform: translateY(-8px); transition: opacity 200ms var(--fade), transform 400ms var(--ease); }
  .js .stage[data-play].bought .oc-done { opacity: 1; transform: none; transition: opacity 300ms var(--fade), transform 500ms var(--ease); }
  /* The order card settles onto the top of the receipt and stays there as its
     first block (main.js moves it, then parks it in .dock inside the paper).
     Only its drop shadow goes, since it now sits on the paper. */
  .js .stage[data-play] .oc-bg { transition: box-shadow 500ms var(--fade); }
  .js .stage[data-play].docking .oc-bg { box-shadow: 0 0 0 rgba(26, 21, 35, 0); }
  .js .stage[data-play] .item { display: none; }
  /* Docked, the card sits at 70% scale, centred on the paper. main.js sizes the dock. */
  .js .stage[data-play] .dock { display: block; position: relative; margin: 0 -26px; }
  .js .stage[data-play] .dock .order-card {
    left: 50%;
    top: 0;
    margin: 0 0 0 calc(var(--card-w) * var(--dock-scale) / -2);
    opacity: 1;
    transform: scale(var(--dock-scale));
    transition: none;
  }
  .js .stage.snap .order-card,
  .js .stage.snap .order-card * { transition: none !important; animation: none !important; }

  /* The receipt loop. main.js toggles these classes on .stage. */
  /* main.js reveals the paper top down with clip-path; the live tear rides its bottom edge */
  .js .stage[data-play] .paper { clip-path: inset(0 -24px 100% -24px); }
  .js .stage[data-play] .paper .tear { display: none; }
  .js .stage[data-play] .tear-live { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 12px; filter: drop-shadow(0 6px 6px rgba(26, 21, 35, 0.1)); }

  /* The ordered product lands on the receipt as the paper feeds out */

  .js .stage[data-play] .row.cut { opacity: 0; transform: translateX(-8px); }
  .js .stage[data-play] .row.cut.on { opacity: 1; transform: none; transition: opacity 300ms var(--fade), transform 500ms var(--ease); }
  .js .stage[data-play] .row.cut.on dd { animation: flash 700ms var(--fade); }
  @keyframes flash { 0% { color: var(--peach); } 100% { color: var(--loss); } }

  .js .stage[data-play] .total-num { transition: color 300ms var(--fade); }
  .js .stage[data-play].settled .total-num { animation: pop 600ms var(--pop); }
  @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

  .js .stage[data-play] .fine { opacity: 0; transform: translateY(8px); }
  .js .stage[data-play].settled .fine { opacity: 1; transform: none; transition: opacity 500ms var(--fade), transform 700ms var(--ease); }

  .js .stage[data-play] .note { opacity: 0; transform: translateX(-10px) rotate(-5deg); }
  .js .stage[data-play].noted .note { opacity: 1; transform: rotate(-5deg); transition: opacity 500ms var(--fade), transform 800ms var(--ease); }
  .js .stage[data-play].noted .note .arrow { animation: nudge 1600ms var(--ease) 600ms 2; }
  @keyframes nudge { 0%, 100% { transform: none; } 40% { transform: translateX(5px); } }

  .js .stage[data-play].retract .note { opacity: 0; transition: opacity 300ms var(--fade); }
}

/* ---------- Footer ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--mute);
}
.foot nav { display: flex; gap: 16px; }
.foot a { text-decoration: none; border-radius: 4px; transition: color 300ms var(--fade); }
.foot a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.foot .disclaimer { margin-left: auto; }

/* ---------- Smaller screens ---------- */

@media (max-width: 1120px) {
  .note { left: -96px; }
}

@media (max-width: 1000px) {
  .hero { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 32px; padding-top: 24px; }
  .copy { flex: none; }
  .stage-wrap { flex: none; }
  .stage { margin-top: 48px; }
  .note { left: 0; top: -40px; }
  .foot .disclaimer { margin-left: 0; }
}

@media (max-width: 480px) {
  .page { padding-block: 20px; }
  .logo { font-size: 28px; }
  .sub { font-size: 18px; }
  .form .btn { flex: 1 1 100%; }
  .done { border-radius: 24px; }
  .stage { height: 744px; }
  .blob { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
  .feed { width: 320px; margin-left: -160px; }
  .paper { padding: 26px 20px 24px; }
}

@media (max-width: 360px) {
  .feed { width: 296px; margin-left: -148px; }
  .paper, .items { font-size: 12px; }
}

/* ---------- Simple pages (privacy, terms, 404) ---------- */

.doc { max-width: 680px; margin: 0; padding-block: 48px 64px; display: flex; flex-direction: column; gap: 16px; }
.doc h1 { font-size: clamp(40px, 6vw, 60px); line-height: 1; }
.doc h2 { margin: 24px 0 0; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; }
.doc p, .doc li { margin: 0; font-size: 17px; line-height: 1.6; color: var(--sub); text-wrap: pretty; }
.doc ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.doc .meta { font-size: 14px; color: var(--mute); }
.back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: 999px;
  background: var(--fg); color: #FFFFFF;
  font-weight: 700; text-decoration: none;
  transition: transform 300ms var(--ease), background-color 300ms var(--fade);
}
.back:hover { background: #2E2740; transform: translateY(-1px); }
.back:active { transform: scale(0.98); }

/* Prices in the headline and note roll when the product changes */
.price { display: inline-block; font-variant-numeric: tabular-nums; }

@media (max-width: 360px) {
  .stage { --card-w: 276px; }
}

/* ---------- Phones: the receipt on top, then the line, then the button ---------- */
/* Everything above "who it's for" fits a phone's first screen. */

@media (max-width: 640px) {
  /* Rhythm: 16 under the header, 24 under the panel, 8 under the headline,
     16 under the subtitle, 16 under the button. */
  /* On phones the whole page is the cream ground; the white receipt sits on it. */
  html, body { background: var(--cream); }
  .home .logo::before { background: rgba(255, 244, 204, 0.82); }

  /* The page is exactly one screen: header, receipt, line, and the button resting
     on the bottom edge above the home indicator. Nothing below the fold. */
  .page {
    min-height: 100vh;
    min-height: 100svh;
    /* bottom padding keeps room for the pinned button bar */
    padding-block: 14px calc(80px + env(safe-area-inset-bottom));
    padding-inline: 16px;
    gap: 0;
  }
  .who, .foot { display: none; }
  .msg:empty { display: none; }
  .js .signup.open .consent { display: block; margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--mute); text-align: center; }
  .consent a { color: var(--fg); text-underline-offset: 2px; }
  .home .top { top: 12px; align-self: stretch; justify-content: center; }
  .home .logo { font-size: 36px; margin: -8px -16px; }
  /* Three groups, told apart by space: the brand, the receipt, the message.
     Wide gaps between groups, tight gaps inside them. The receipt and message sit
     centred between the logo and the pinned button; type scales with the screen. */
  .hero { gap: 0; padding: 20px 0 8px; justify-content: center; }
  .copy { display: contents; }
  .stage-wrap { order: 1; }
  .pill { order: 2; align-self: center; position: relative; z-index: 2; margin: -15px 0 24px; padding: 6px 12px; font-size: 13px; line-height: 18px; box-shadow: 0 0 0 4px var(--cream); }
  .pill svg { width: 13px; }
  .hero h1 { order: 3; font-size: clamp(34px, min(11.5vw, 6.2svh), 52px); margin-bottom: 10px; text-align: center; }
  .sub { order: 4; max-width: 34em; margin: 0 auto; font-size: clamp(15px, min(4.4vw, 2.5svh), 19px); line-height: 1.45; text-align: center; text-wrap: balance; }

  /* The button bar is pinned to the bottom edge, above the home indicator */
  .signup {
    order: 5;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    max-width: none;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: var(--cream);
  }
  /* Once joined, the bar shrinks to one compact confirmation */
  .signup[data-state="done"] .form, .js .signup.open[data-state="done"] .consent, .signup[data-state="done"] .consent, .signup[data-state="done"] .msg { display: none; }
  .signup .done:focus-visible { outline-width: 2px; outline-offset: 2px; }
  .signup .done { position: static; min-height: 52px; padding: 6px 16px 6px 6px; font-size: 14px; line-height: 18px; }
  .signup:not([data-state="done"]) .done { display: none; }
  .signup .done-text { display: none; }

  /* One cream panel holds the whole story. The receipt's height is reserved from
     the start, so the panel never changes size while the order plays. */
  .stage {
    --dock-scale: 0.5;
    width: 100%;
    height: auto;
    margin-top: 0;
    padding: 12px;
  }
  .blob, .note, .slot { display: none; }
  .feed { position: relative; left: auto; top: auto; width: 100%; height: auto; margin: 0; overflow: visible; }
  .js .stage[data-play] .order-card { top: calc(50% - 64px); }

  .paper { padding: 12px 16px 12px; gap: 4px; margin-bottom: 0; border-radius: 4px 4px 0 0; }
  .r-head { align-items: center; gap: 8px; font-size: 11px; }
  .r-head > span:nth-child(2) { order: 2; }
  .r-new {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    order: 1;
    margin-right: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #E3FAEF;
    color: var(--mint-ink);
    font-family: var(--body);
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
  }
  .r-new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3DDC97; }
  .r-head > span { white-space: nowrap; }
  .items { gap: 1px; line-height: 16px; }
  .grp { gap: 0; }
  .grp-head { display: flex; justify-content: space-between; gap: 12px; color: var(--sub); }
  .grp-lines { display: none; }
  .fine { display: none; }
  .total-num { font-size: 28px; }
  .total-label { font-size: 15px; }


  /* The form starts as one button; tapping it opens the email field above it */
  .form { flex-direction: column; }
  .form input[type="email"] { flex: none; width: 100%; }
  .form .btn { flex: none; width: 100%; height: 52px; }
  .js .signup:not(.open) .form input[type="email"] { display: none; }
  .js .signup.open .form input[type="email"] { animation: open-field 500ms var(--ease); }
  @keyframes open-field { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .msg { margin-left: 0; text-align: center; }
}

@media (max-width: 360px) {
  .r-head > span:nth-child(2) { display: none; }
}

/* Short phones (iPhone SE and friends): tighten so the button still makes the first screen */
@media (max-width: 640px) and (max-height: 620px) {
  .hero { padding: 10px 0 4px; }
  .hero h1 { font-size: 28px; margin-bottom: 6px; }
  .sub { font-size: 13px; line-height: 1.35; margin-bottom: 0; }
  .pill { margin-bottom: 12px; font-size: 12px; padding: 4px 10px; }
  .home .logo { font-size: 28px; }
  .stage { --dock-scale: 0.36; }
  .paper { padding: 10px 12px 8px; }
  .stage { --dock-scale: 0.4; }
  .stage-wrap { margin-bottom: 10px; }
  .paper { padding: 12px 12px 8px; gap: 3px; }
  .items { line-height: 15px; font-size: 12px; }
  .total-num { font-size: 24px; }
  .form .btn { height: 46px; }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .js .stage-wrap { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--fade), transform 800ms var(--ease); }
  .js.ready .stage-wrap { opacity: 1; transform: none; }
  .js .stage[data-play] .r-new { opacity: 0; transform: scale(0.8); }
  .js .stage[data-play].ordered .r-new { opacity: 1; transform: none; transition: opacity 300ms var(--fade), transform 500ms var(--pop); }
  .js .stage[data-play] .grp-head { opacity: 0; transform: translateX(-8px); }
  .js .stage[data-play] .grp.on .grp-head { opacity: 1; transform: none; transition: opacity 300ms var(--fade), transform 500ms var(--ease); }
}