/* Popups · marketing Feedback & ideas · iteration 1 (Claude).
   The Idea Box: a letter taped over a kraft board. You pick the note you are writing on (a feature, or feedback), write it on a sticky note,
   and when you send it the note leaves the letter and goes into the box. The box answers only when the message is acknowledged.
   Light and dark change role values only; every box is identical (proved in the report).
   Motion: one arrival pop, once; the note's trip when you send; one thud on the SENT stamp. Nothing loops except the sending ring. */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; min-height: 100dvh; color: var(--ink); font: 16px/1.45 var(--hand); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: var(--paper) url("assets/art/paper-wide-cap.webp") top center / 100% auto no-repeat; }
[data-theme="light"] body { background-image: url("assets/art/paper-wide-cap.webp"), url("assets/art/paper-wide-tile.webp"); background-size: 100% auto, 100% auto; background-repeat: no-repeat, repeat-y; background-position: top center, top center; }
.ground { position: fixed; inset: 0; z-index: -1; display: none; background: var(--paper) url("assets/art/chalk-wide.webp") left top / cover no-repeat; }
[data-theme="dark"] body { background-image: none; }
[data-theme="dark"] .ground { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 90; padding: 12px 18px; background: var(--slab); color: var(--on-slab); font: 800 14px var(--press); }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── prototype chrome and the page behind the popup (the picked homepage's first screen, kept light) ───────── */
.top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; min-height: 76px; padding: 14px clamp(16px, 6vw, 96px) 0; }
.toggles { position: relative; z-index: 60; display: flex; gap: 22px; }
.toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 12px var(--press); letter-spacing: .08em; text-transform: uppercase; color: var(--pencil); white-space: nowrap; }
.toggle__box { width: 40px; height: 22px; overflow: visible; }
.toggle__frame { fill: none; stroke: var(--pencil); stroke-width: 1.6; stroke-linecap: round; }
.toggle__dot { fill: var(--pencil); transition: transform .2s ease; }
.toggle[aria-checked="true"] .toggle__frame { stroke: var(--ink); }
.toggle[aria-checked="true"] .toggle__dot { fill: var(--ink); transform: translateX(18px); }
.toggle[aria-checked="true"] .toggle__word { color: var(--ink); }
.toggle__word > span { display: inline-block; min-width: 3.2ch; }
.top__right { display: flex; align-items: flex-start; gap: 14px; margin-left: auto; }
.slab { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; background: var(--slab) url("assets/art/card-stock-light.webp") center / cover; color: var(--on-slab); text-decoration: none; transform: rotate(-1deg); box-shadow: 0 6px 14px rgba(var(--sh-rgb), .16); transition: transform .15s ease; }
[data-theme="dark"] .slab { background-image: url("assets/art/card-stock-dark.webp"); box-shadow: none; }
.slab:hover { transform: translateY(-2px) rotate(0deg); }
.slab-frame { position: absolute; left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); pointer-events: none; color: var(--on-slab); opacity: .8; }
.slab-frame .ink-path { fill: none; stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.slab span { position: relative; font: 800 14px var(--press); letter-spacing: .08em; text-transform: uppercase; }
.marker { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 28px 0 24px; font: 900 20px/1 var(--press); letter-spacing: .02em; text-transform: uppercase; color: var(--on-marker); text-decoration: none; }
.marker__ink { position: absolute; inset: 0 -6px; z-index: -1; background: var(--marker); -webkit-mask: url("assets/art/marker-mask.webp") center / 100% 100% no-repeat; mask: url("assets/art/marker-mask.webp") center / 100% 100% no-repeat; filter: var(--bloom-marker); }
.marker__label { position: relative; white-space: nowrap; }
.home { padding: clamp(10px, 3vw, 36px) clamp(16px, 6vw, 96px) 64px; }
.home__mark { display: block; width: clamp(150px, 26vw, 320px); height: auto; }
.home__title { margin: 8px 0 0; font: clamp(40px, 7vw, 92px)/.98 var(--display); text-transform: uppercase; max-width: 9em; }
.home__title span { display: block; }
.home__sig { margin: 18px 0 22px; font: 600 clamp(17px, 2vw, 24px)/1.35 var(--hand); }
.home__sig mark { background: linear-gradient(transparent 12%, var(--highlighter) 12% 92%, transparent 92%); color: inherit; padding: 0 4px; }
[data-theme="dark"] .home__sig mark { color: #141026; }
.foot { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 0 clamp(16px, 6vw, 96px) 36px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; font: 700 15px var(--hand); text-decoration: none; }
.foot a span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ── the popup ───────────────────────────────────────────────────────────────────────────────────────────── */
.popup[hidden] { display: none; }
.popup { position: fixed; inset: 0; z-index: 40; }
.popup__scrim { position: absolute; inset: 0; background: rgba(20, 16, 38, .62); }
[data-theme="dark"] .popup__scrim { background: rgba(4, 5, 8, .7); }
.popup__stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: auto; padding: 60px 16px 20px; overscroll-behavior: contain; }
/* one design pixel at the full 1000 px width is --u; the sheet, board and scene are all laid out in it */
.dialog { --W: min(1000px, calc(100vw - 72px), calc((100dvh - 150px) * 1.66)); --u: calc(var(--W) / 1000);
  --board: #dcc08c; --board-ink: rgba(20, 16, 38, .55);
  position: relative; width: var(--W); height: calc(var(--W) * .6); margin: 14px 0; outline: none; }
[data-theme="dark"] .dialog { --board: #5b4a2e; --board-ink: rgba(236, 231, 218, .6); }

/* the board: kraft paper behind the letter, torn, leaning the other way */
.board { position: absolute; left: 53%; right: -4.4%; top: -4.4%; bottom: -5.6%; transform: rotate(1.3deg); transform-origin: 50% 50%; filter: drop-shadow(0 12px 18px rgba(var(--sh-rgb), .3)); }
.board__paper { position: absolute; inset: 0; background: var(--board); clip-path: var(--tear-board-wide); }
.board__paper::after { content: ""; position: absolute; inset: 0; background: url("assets/art/card-stock-light.webp") center / cover; mix-blend-mode: multiply; opacity: .5; }
[data-theme="dark"] .board__paper::after { background-image: url("assets/art/card-stock-dark.webp"); mix-blend-mode: soft-light; opacity: .55; }
.board__arrow { position: absolute; width: calc(112 * var(--u)); left: calc(-26 * var(--u)); top: calc(300 * var(--u)); overflow: visible; color: var(--board-ink); transform: rotate(-12deg); pointer-events: none; }
.board__arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 9; }
.board__arrow path:last-child { stroke-dasharray: none; }

/* the scene: the Idea Box and the person who stands beside it (stickers, so they may leave the board's edge) */
.scene { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.floor { position: absolute; right: calc(20 * var(--u)); bottom: calc(10 * var(--u)); width: calc(400 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 10, 40, .34), transparent); }
/* the Idea Box (its slot is at --slot-x / --slot-y of its own square) and the two people who stand with it: Aino behind, James in front */
.box { --slot-x: 50%; --slot-y: 24.5%; position: absolute; z-index: 2; right: calc(26 * var(--u)); bottom: calc(18 * var(--u)); width: calc(300 * var(--u)); aspect-ratio: 1; transform-origin: 50% 100%; filter: drop-shadow(0 8px 8px rgba(20, 10, 40, .3)); }
.box__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .12s linear; }
.box__img--up { opacity: 0; }
[data-flag="up"] .box__img--up { opacity: 1; }
[data-flag="up"] .box__img--down { opacity: 0; }
.cast { position: absolute; aspect-ratio: 896 / 1200; transform-origin: 50% 100%; filter: drop-shadow(0 8px 9px rgba(20, 10, 40, .32)); }
.cast--james { z-index: 3; left: calc(528 * var(--u)); bottom: calc(0 * var(--u)); height: calc(390 * var(--u)); }
.cast--aino { z-index: 1; left: calc(722 * var(--u)); top: calc(126 * var(--u)); height: calc(360 * var(--u)); }
.cast__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; opacity: 0; visibility: hidden; }
.cast__img.is-on { opacity: 1; visibility: visible; }
/* each person's line, drawn as the homepage draws a balloon: card stock and an ink border in light, chalk on slate in dark; in their own language */
.say { position: absolute; z-index: 4; padding: .38em .7em .32em; font: 700 max(13px, calc(19 * var(--u)))/1.15 var(--hand); white-space: nowrap; color: var(--on-card); background: var(--card) url("assets/art/card-stock-light.webp") center / cover; border: 2.5px solid var(--on-card); box-shadow: 3px 4px 0 rgba(20, 10, 40, .22); transform: translateX(-50%) rotate(var(--tilt, -1.5deg)); transform-origin: 50% 100%; }
.say:empty { display: none; }
.say::after { content: ""; position: absolute; left: calc(50% + var(--tail, 0px) - 8px); bottom: -11px; width: 14px; height: 14px; background: inherit; border-right: 2.5px solid var(--on-card); border-bottom: 2.5px solid var(--on-card); transform: skewX(-14deg) rotate(45deg); }
[data-theme="dark"] .say { background: var(--balloon); color: var(--ink); border-color: var(--ink); box-shadow: none; }
[data-theme="dark"] .say::after { background: var(--balloon); border-color: var(--ink); }
.cast--james .say { --tilt: 1.5deg; --tail: -26px; left: 60%; bottom: 97%; }
.cast--aino .say { --tilt: -2deg; left: 52%; bottom: 93%; }

/* the letter: card stock taped across the board's left edge */
.sheetwrap { position: absolute; left: calc(-26 * var(--u)); top: calc(-16 * var(--u)); width: calc(626 * var(--u)); height: calc(634 * var(--u)); z-index: 3; transform: rotate(-.8deg); transform-origin: 50% 0;
  filter: drop-shadow(5px 8px 0 rgba(var(--sh-rgb), .24)) drop-shadow(0 12px 18px rgba(var(--sh-rgb), .22)); }
.sheet { position: relative; display: flex; flex-direction: column; height: 100%; padding: calc(50 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u)) calc(46 * var(--u)); background: var(--slab) url("assets/art/card-stock-light.webp") center / cover; color: var(--on-slab); clip-path: var(--tear-sheet-wide); }
[data-theme="light"] .sheet { --on-slab: #141026; --on-slab-dim: #514b60; --field: rgba(255, 255, 255, .5); --slab: #faf7ee; }
[data-theme="dark"] .sheet { background-image: url("assets/art/card-stock-dark.webp"); --on-slab-dim: #a3abb8; }
.sheet__tape { position: absolute; top: -10px; left: calc(50% - 70px); z-index: 2; transform: rotate(-3deg); pointer-events: none; }
.close { position: absolute; right: 10px; top: 12px; z-index: 3; display: grid; place-items: center; width: max(44px, calc(48 * var(--u))); height: max(44px, calc(48 * var(--u))); color: var(--on-slab); }
.close path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.close:hover path { stroke-width: 3.2; }

.panes { position: relative; flex: 1; min-height: 0; display: grid; }
.form, .done { grid-area: 1 / 1; min-height: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form { display: flex; flex-direction: column; gap: calc(9 * var(--u)); }
.sheet h2 { margin: 0; padding-right: max(44px, calc(52 * var(--u))); font: calc(40 * var(--u))/1.02 var(--display); text-wrap: balance; letter-spacing: .005em; color: var(--on-slab); }

/* the two notes you can pick up: the choice the app asks first */
.intent { margin: 0; padding: 0; border: 0; min-width: 0; }
.intent legend { padding: 0; margin: 0 0 calc(8 * var(--u)); font: 700 max(14px, calc(16 * var(--u)))/1.3 var(--hand); }
.intent__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)); }
.pick__in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pick { --tilt: -1.2deg; position: relative; isolation: isolate; display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: max(56px, calc(66 * var(--u))); padding: calc(14 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u)) calc(14 * var(--u)); color: var(--on-card); cursor: pointer; transform: rotate(var(--tilt)); transition: transform .16s cubic-bezier(.3, 1.5, .6, 1); }
.pick--feedback { --tilt: .9deg; }
.pick__paper, .note__paper, .flyer__paper { position: absolute; z-index: -1; inset: 0; border-style: solid; border-image-slice: 110 170 220 20 fill; border-image-repeat: stretch; filter: drop-shadow(0 3px 5px rgba(var(--sh-rgb), .16)); }
.pick__paper { border-width: 12px 22px 22px 3px; border-image-width: 12px 22px 22px 3px; }
.pick--feature .pick__paper, [data-intent="feature"] .note__paper, [data-intent="feature"] .flyer__paper { border-image-source: url("assets/art/sticky-yellow.webp"); }
.pick--feedback .pick__paper, [data-intent="feedback"] .note__paper, [data-intent="feedback"] .flyer__paper { border-image-source: url("assets/art/sticky-blue.webp"); }
.pick__icon { flex: none; width: max(24px, calc(28 * var(--u))); height: max(24px, calc(28 * var(--u))); fill: none; stroke: var(--on-card); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pick__t { font: 700 max(15px, calc(18 * var(--u)))/1.15 var(--hand); text-wrap: balance; }
.pick__tick { position: absolute; right: calc(-6 * var(--u)); top: calc(-9 * var(--u)); width: max(24px, calc(28 * var(--u))); height: max(24px, calc(28 * var(--u))); fill: none; stroke: var(--on-card); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4) rotate(-20deg); transition: opacity .12s, transform .2s cubic-bezier(.3, 1.8, .6, 1); }
.pick__tick circle { fill: var(--card); stroke: var(--on-card); }
.pick:hover { transform: translateY(-2px) rotate(0deg); }
.pick__in:checked + .pick { transform: translateY(-4px) rotate(0deg); }
.pick__in:checked + .pick .pick__paper { filter: drop-shadow(0 6px 7px rgba(var(--sh-rgb), .28)); }
.pick__in:checked + .pick .pick__tick { opacity: 1; transform: none; }
.pick__in:checked + .pick .pick__t { background: linear-gradient(transparent 52%, var(--highlighter) 52% 94%, transparent 94%); }
.pick__in:focus-visible + .pick { outline: 3px solid var(--on-slab); outline-offset: 4px; }
.pick__in:disabled + .pick { cursor: default; }

/* the note you write on: a sticky note in the colour of the one you picked */
.msgbox { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.msgbox__label { font: 700 max(14px, calc(15 * var(--u))) var(--hand); }
.note { position: relative; isolation: isolate; flex: 1; min-height: max(84px, calc(96 * var(--u))); transform: rotate(.3deg); }
.note__paper { border-width: 22px 30px 34px 4px; border-image-width: 22px 30px 34px 4px; }
.note textarea { position: absolute; inset: 24px 30px 30px 14px; width: calc(100% - 44px); height: calc(100% - 54px); resize: none; border: 0; border-radius: 0; background: transparent; color: var(--on-card); caret-color: var(--on-card); font: max(16px, calc(18 * var(--u)))/1.5 var(--hand); padding: 0; }
.note textarea::placeholder { color: var(--on-card-dim); opacity: .95; }
.note textarea { color-scheme: light; }
.note textarea:focus-visible { outline: none; }
.note:has(textarea:focus-visible) .note__paper { filter: drop-shadow(0 0 0 var(--on-card)) drop-shadow(0 4px 6px rgba(var(--sh-rgb), .3)); }
.note:has(textarea:focus-visible)::after { content: ""; position: absolute; inset: 14px 22px 22px 6px; border: 3px solid var(--on-card); border-radius: 2px; pointer-events: none; }
.note textarea[aria-invalid="true"] { text-decoration: none; }
.note.is-away > * { visibility: hidden; }
.note.is-away::after { content: "On its way to the team"; position: absolute; inset: 22px 14px 26px 6px; display: grid; place-items: center; border: 2.5px dashed var(--on-slab-dim); color: var(--on-slab-dim); font: 700 max(15px, calc(17 * var(--u)))/1.3 var(--hand); text-align: center; }
.msgbox__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: calc(20 * var(--u)); }
.msg { margin: 0; flex: 1; font: 700 max(13px, calc(14 * var(--u)))/1.3 var(--hand); }
.msg:empty { display: none; }
.msg::before { content: "\2715\00a0"; }
.msg[data-kind="offline"]::before, .msg[data-kind="ok"]::before { content: "\25cf\00a0"; font-size: .7em; vertical-align: .12em; }
.msg a { display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; font-weight: 700; }
.msg a span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.count { margin: 0 0 0 auto; flex: none; font: 400 max(11px, calc(12 * var(--u))) var(--mono); color: var(--on-slab-dim); white-space: nowrap; }
.count[data-over] { color: var(--on-slab); font-weight: 600; text-decoration: underline wavy; text-underline-offset: 3px; }
.privacy, .bug { margin: 0; font: 500 max(13px, calc(14 * var(--u)))/1.4 var(--hand); color: var(--on-slab-dim); }
.bug a { display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; color: var(--on-slab); font-weight: 700; }
.bug a span, .done__next a span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bug { margin-top: calc(-3 * var(--u)); }
[data-problem="failed"] .bug { display: none; }

.primary { width: 100%; height: max(48px, calc(58 * var(--u))); margin-top: calc(2 * var(--u)); flex: none; }
.primary[aria-busy="true"] { pointer-events: none; }
.primary[aria-disabled="true"] { cursor: not-allowed; }
.primary[aria-disabled="true"] .marker__ink { opacity: .45; filter: none; }
.primary[aria-disabled="true"] .marker__label { opacity: .72; }
.ring { display: none; flex: none; width: 17px; height: 17px; margin-right: 10px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.primary[aria-busy="true"] .ring { display: block; }
.primary .marker__label { display: inline-flex; align-items: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the answer: only after the message has been acknowledged */
.done { display: flex; flex-direction: column; gap: calc(12 * var(--u)); visibility: hidden; }
[data-state="sent"] .done { visibility: visible; }
[data-state="sent"] .form { visibility: hidden; }
.done h2 { font-size: calc(46 * var(--u)); padding-right: max(44px, calc(52 * var(--u))); outline: none; }
.done p { margin: 0; font: 500 max(15px, calc(17 * var(--u)))/1.45 var(--hand); }
.done__what { font-weight: 700 !important; }
.done__slip { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); min-height: 0; }
.done__receipt { font: 400 max(12px, calc(13 * var(--u))) var(--mono) !important; color: var(--on-slab-dim); }
.done__next { color: var(--on-slab-dim); }
.done__next a { display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; color: var(--on-slab); font-weight: 700; }
.done__row { display: flex; align-items: center; gap: calc(22 * var(--u)); margin-top: auto; }
.done__row .primary { flex: 1; margin: 0; }
.again { flex: none; min-height: 48px; transform: rotate(-1deg); }
.stamp { flex: none; width: max(130px, calc(220 * var(--u))); color: #c4271a; mix-blend-mode: multiply; opacity: .9; transform: rotate(-7deg); transform-origin: 50% 50%; pointer-events: none; }
[data-theme="dark"] .stamp { color: #ff8b73; mix-blend-mode: screen; }
.stamp svg { display: block; width: 100%; height: auto; overflow: visible; }
.stamp text { font: 900 50px var(--press); letter-spacing: .12em; }

/* the note's trip. A copy of what was written, drawn on the same sticky note, so the real letter loses nothing until it is acknowledged */
.flyer { position: absolute; z-index: 6; left: 0; top: 0; pointer-events: none; transform-origin: 50% 100%; isolation: isolate; will-change: transform; }
.flyer[hidden] { display: none; }
.flyer__paper { border-width: 22px 30px 34px 4px; border-image-width: 22px 30px 34px 4px; }
.flyer__text { position: absolute; inset: 24px 30px 30px 14px; overflow: hidden; font: 18px/1.5 var(--hand); color: var(--on-card); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── arrival: a pop-in with overshoot, once. Reduced motion shows the final state at once ───────────────── */
.popup:not([hidden]) .popup__scrim { animation: fade .25s ease-out both; }
.popup:not([hidden]) .board { animation: board-in .55s cubic-bezier(.34, 1.4, .64, 1) .08s both; }
.popup:not([hidden]) .sheetwrap { animation: sheet-in .5s cubic-bezier(.34, 1.5, .64, 1) both; }
.popup:not([hidden]) .box { animation: pop .5s cubic-bezier(.34, 1.7, .64, 1) .38s both; }
.popup:not([hidden]) .cast--aino { animation: pop .5s cubic-bezier(.34, 1.7, .64, 1) .5s both; }
.popup:not([hidden]) .cast--james { animation: pop .5s cubic-bezier(.34, 1.7, .64, 1) .62s both; }
.popup:not([hidden]) .say { animation: say .38s cubic-bezier(.34, 1.7, .64, 1) 1.1s both; }
.cast.is-swap { animation: hop .38s cubic-bezier(.3, 1.6, .6, 1) both !important; }
.cast.is-swap .say { animation: say .36s cubic-bezier(.34, 1.7, .64, 1) .12s both !important; }
.box.is-thump { animation: thump .36s cubic-bezier(.3, 1.6, .6, 1) both !important; }
.box.is-flag .box__img--up { animation: flag .32s cubic-bezier(.3, 1.8, .6, 1) both; }
[data-state="sent"] .stamp { animation: stamp .24s cubic-bezier(.3, 1.4, .7, 1) .1s both; }
[data-state="sent"] .done h2, [data-state="sent"] .done p, [data-state="sent"] .done__row { animation: rise .34s cubic-bezier(.3, 1.4, .7, 1) both; }
[data-state="sent"] .done p:nth-of-type(1) { animation-delay: .06s; }
[data-state="sent"] .done p:nth-of-type(2) { animation-delay: .12s; }
[data-state="sent"] .done p:nth-of-type(3) { animation-delay: .18s; }
[data-state="sent"] .done__row { animation-delay: .24s; }
@keyframes say { from { opacity: 0; transform: translateX(-50%) rotate(var(--tilt, -1.5deg)) scale(.4); } 60% { opacity: 1; } to { transform: translateX(-50%) rotate(var(--tilt, -1.5deg)) scale(1); } }
@keyframes hop { 0% { transform: none; } 35% { transform: translateY(-5%) scale(.96, 1.05); } 70% { transform: scale(1.03, .97); } 100% { transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes board-in { from { opacity: 0; transform: translateX(14%) rotate(6deg) scale(.86); } 60% { opacity: 1; } to { transform: rotate(1.3deg); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-90px) rotate(5deg); } 55% { opacity: 1; } to { transform: translateY(0) rotate(-.8deg); } }
@keyframes pop { from { opacity: 0; transform: translateY(24%) scale(.72, .6); } 60% { opacity: 1; } to { transform: none; } }
@keyframes thump { 0% { transform: none; } 30% { transform: scale(1.06, .93); } 62% { transform: scale(.98, 1.04); } 100% { transform: none; } }
@keyframes flag { from { transform: translateY(14%) scale(.9); } to { transform: none; } }
@keyframes stamp { from { opacity: 0; transform: rotate(-7deg) scale(1.9); } to { opacity: .9; transform: rotate(-7deg) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .popup .popup__scrim, .popup .board, .popup .sheetwrap, .popup .box, .popup .cast, .popup .say, .cast.is-swap, .cast.is-swap .say, .box.is-thump, .box.is-flag .box__img--up,
  [data-state="sent"] .stamp, [data-state="sent"] .done h2, [data-state="sent"] .done p, [data-state="sent"] .done__row { animation: none !important; }
  .pick, .pick__tick, .slab, .toggle__dot { transition: none; }
  .ring { animation: none; border-right-color: currentColor; border-style: dotted; }
}

/* ── phone, portrait tablet and any window too short for the spread: one column, the letter alone ─────────── */
@media (max-width: 860px), (max-aspect-ratio: 1/1), (max-height: 600px) {
  .popup__stage { align-items: start; padding: 50px 12px 12px; }
  .dialog { --W: min(600px, calc(100vw - 24px)); --u: 1px; width: var(--W); height: auto; margin: 8px auto 0; }
  .board, .scene { display: none; }
  .sheetwrap { position: relative; left: auto; top: auto; width: auto; height: auto; transform: rotate(-.5deg); }
  .sheet { height: auto; padding: 44px 22px 22px; clip-path: var(--tear-sheet-phone); }
  .sheet h2 { font-size: 30px; }
  .done h2 { font-size: 32px; }
  .form { gap: 8px; }
  .intent legend { margin-bottom: 11px; }
  .pick { min-height: 56px; padding-right: 20px; }
  .pick__icon { display: none; }
  .note { flex: none; height: clamp(96px, 20dvh, 156px); }
  .msgbox { flex: none; }
  .done__slip { flex: none; margin: 4px 0; }
  .close { right: 2px; top: 6px; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(-90px) rotate(4deg); } 55% { opacity: 1; } to { transform: translateY(0) rotate(-.5deg); } }
}
/* a tall phone or tablet gets the board back as a strip above the letter */
@media (min-height: 820px) and (max-width: 860px), (min-height: 820px) and (max-aspect-ratio: 1/1) {
  .dialog { --art-h: clamp(140px, 19dvh, 210px); display: grid; grid-template-rows: var(--art-h) auto; margin-top: 18px; }
  .board, .scene { display: block; position: relative; inset: auto; grid-row: 1; grid-column: 1; }
  .board { left: auto; right: auto; top: auto; bottom: auto; margin: 14px 10px 0; transform: rotate(.8deg); }
  .board__paper { clip-path: var(--tear-board-phone); }
  .board__arrow { display: none; }
  .scene { z-index: 4; }
  .floor { right: 3%; bottom: 8%; width: 52%; height: 14%; }
  .box { right: 2%; bottom: 3%; width: calc(var(--art-h) * .96); max-width: 50%; }
  .cast { height: calc(var(--art-h) * 1.1); bottom: -4%; top: auto; }
  .cast--james { left: -2%; }
  .cast--aino { left: 24%; z-index: 3; }
  .say { display: none; }
  .sheetwrap { grid-row: 2; grid-column: 1; margin-top: -26px; z-index: 3; }
  .sheet { padding-top: 40px; }
  @keyframes board-in { from { opacity: 0; transform: translateX(14%) rotate(6deg) scale(.86); } 60% { opacity: 1; } to { transform: rotate(.8deg); } }
}
/* a short phone (320 x 568 and the like): the same letter, tighter, without the email line (the error state still offers it) */
@media (max-width: 860px) and (max-height: 700px), (max-aspect-ratio: 1/1) and (max-height: 700px) {
  .sheet { padding: 36px 18px 16px; }
  .sheet h2 { font-size: 24px; margin-top: -4px; }
  .form { gap: 5px; }
  .intent legend { margin-bottom: 9px; font-size: 14px; }
  .pick { min-height: 46px; padding-top: 9px; padding-bottom: 17px; }
  .note { height: clamp(96px, 15dvh, 140px); }
  .bug { display: none; }
  .privacy { font-size: 13px; line-height: 1.3; }
  .primary { height: 48px; }
  .done h2 { font-size: 26px; }
  .done p { font-size: 15px; }
  .done { gap: 8px; }
}
/* short and wide (a phone held sideways, a laptop window with little height): the letter in two columns, no picture */
@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
  .sheet__tape { left: 12%; top: -14px; }
  .popup__stage { padding: 46px 12px 8px; }
  .dialog { --W: min(900px, calc(100vw - 24px)); }
  .sheet { padding: 16px 26px 12px; }
  .sheet h2 { font-size: 26px; padding-right: 48px; margin-top: 2px; }
  .panes { flex: none; }
  .form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "title msg" "intent msg" "privacy msg" "bug send"; column-gap: 26px; row-gap: 6px; align-items: start; }
  .form > h2 { grid-area: title; }
  .intent { grid-area: intent; }
  .intent__row { grid-template-columns: 1fr; gap: 8px; }
  .pick { min-height: 48px; padding-top: 8px; padding-bottom: 16px; }
  .msgbox { grid-area: msg; height: 100%; }
  .note { flex: 1; height: auto; min-height: 96px; }
  .privacy { grid-area: privacy; }
  .bug { grid-area: bug; margin: 0; }
  .primary { grid-area: send; height: 48px; margin: 0; }
  .done { gap: 6px; }
  .done h2 { font-size: 26px; }
  .done p { font-size: 15px; }
  .done__row { margin-top: 4px; }
}
@media (max-height: 420px) and (min-aspect-ratio: 1/1) {
  .sheet__tape { display: none; }
  .popup__stage { padding-top: 44px; }
  .sheet h2 { font-size: 22px; }
  .bug { display: none; }
  .privacy { font-size: 13px; line-height: 1.3; }
  .pick { min-height: 44px; padding-top: 6px; padding-bottom: 14px; }
  .intent legend { margin-bottom: 7px; }
  .form { row-gap: 3px; }
  .done p { font-size: 14px; line-height: 1.35; }
}
@media (max-width: 480px) { .top { padding-top: 8px; } .home__title { font-size: 44px; } }
@media (max-width: 400px) { .feedback span { letter-spacing: .04em; } .slab.feedback { padding: 0 14px; } }

/* Embedded (?embedded=1): the popup alone, over the host page the website lays behind its full-viewport frame. The ground, the
   faux page and the prototype's own switches are not drawn; the popup's own geometry is untouched. */
html[data-embedded], html[data-embedded] body { background: transparent !important; background-image: none !important; }
html[data-embedded] .ground, html[data-embedded] .skip, html[data-embedded] .top, html[data-embedded] .home, html[data-embedded] .foot { display: none; }