/* ─────────────────────────────────────────────────────────────────────────
   frinq landing, hybrid v2
   THEME  = ours (../css/frinq-poster.css): paper / blush / signal / ink grounds,
            Inter Tight 800, square ink buttons, grain on the ground only.
   HAND   = Fine Checklist (licensed), for every handwritten word and note.
   ASSETS = the designer's Figma file (hands, slips, photos, tapes, doodles)
            and real screens captured from app.frinq.in's own code.

   --u is one Figma pixel (1920 desktop grid, 402 mobile grid).
   Scroll state per [data-scene] from page.js: --in, --p.
   Nothing ever transforms a whole section, so the ground always fills the
   viewport edge to edge; only the things printed on it move.
   ───────────────────────────────────────────────────────────────────────── */

@font-face { font-family: "Fine Checklist"; src: url("fonts/FineChecklist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fine Checklist"; src: url("fonts/FineChecklist-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
:root {
  /* motion: one scale for the whole page. page.js mirrors these in M. */
  --m-press: 120ms;       /* a tap answered */
  --m-state: 240ms;       /* a state change (the sticky button, a screen crossfade) */
  --m-in: 500ms;          /* an entrance */
  --m-out: 320ms;         /* its exit: about 65% of the entrance, so leaving never drags */
  --ease-arrive: cubic-bezier(.16, 1, .3, 1);
  --ease-leave: cubic-bezier(.4, .14, 1, 1);
  --rise: 14px;
  /* stacking */
  --z-ground: 0; --z-print: 2; --z-raised: 5; --z-sticky: 60;
  --fq-hand: "Fine Checklist", cursive;
  --fq-notes: "Fine Checklist", cursive;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-slam: var(--ease-arrive);   /* was an overshoot; the page has one arrival curve now */
  --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fq-paper); scrollbar-color: var(--fq-charcoal) var(--fq-paper); overscroll-behavior-y: none; }
body { margin: 0; background: var(--fq-paper); overflow-x: hidden; overflow-x: clip; }
img { display: block; max-width: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--mark, currentColor); outline-offset: 4px; }
section, .ticker, .foot { position: relative; }

/* the hand (Fine Checklist): a touch larger than the kit's face, it runs small */
.fq-em { font-size: 1.28em; line-height: .78; }
.fq-note { font-weight: 300; letter-spacing: .06em; }
.hy-hand { font-family: var(--fq-notes); font-weight: 300; letter-spacing: .02em; line-height: 1.3; }

/* grain and paper live on the ground only; everything printed on it stays sharp.
   The grain is printed into the ground itself (background-blend-mode) instead of a blended layer laid over
   it: a blend layer the height of a section has to be recomposited every time anything inside it moves.
   The textures are the kit's grain pre-mixed to the kit's strength (soft-light at 75%: .125 + .75g;
   screen at 7% on ink: .07g), so the ground looks the same. */
.fq-ground::after { content: none; }
.fq-ground { background: url("images/grain-soft-portrait.jpg") center / cover, var(--ground); background-blend-mode: soft-light, normal; }
.fq-ink { background-image: url("images/grain-ink-portrait.jpg"); background-blend-mode: screen, normal; }
@media (min-aspect-ratio: 4/5) {
  .fq-ground { background: url("images/grain-soft-landscape.jpg") 0 0 / 1600px auto repeat, var(--ground); background-blend-mode: soft-light, normal; }
  .fq-ink { background-image: url("images/grain-ink-landscape.jpg"); background-blend-mode: screen, normal; }
}
.lg-sheet.fq-ground { background: url("images/grain-soft-landscape.jpg") 0 0 / 1200px auto repeat, var(--ground); background-blend-mode: soft-light, normal; }
.fq-ground > * { z-index: 2; }
.fq-ground { overflow: hidden; overflow: clip; }

/* their doodles, re-inked to our mark colour */
.doodle { filter: brightness(0); }
.fq-ink .doodle, .story.is-night .un .doodle { filter: brightness(0) invert(.92) sepia(.1); }

/* ── hands: the designer's photographs, graded for the ground they sit on, never still ── */
.hand { height: auto; pointer-events: none; user-select: none; will-change: transform; }
.flip { transform: scaleX(-1); }
.fq-paper .hand { filter: saturate(1.14) contrast(1.06) brightness(1.03) drop-shadow(0 24px 26px rgb(92 64 40 / .20)); }
.fq-blush .hand { filter: saturate(1.12) contrast(1.05) brightness(1.02) drop-shadow(0 24px 30px rgb(128 40 62 / .26)); }
.fq-ink .hand   { filter: saturate(1.16) contrast(1.1) brightness(1.1) drop-shadow(0 0 42px rgb(255 214 184 / .12)); }
/* the hands are never still: each leans in toward the other, hesitates short of touching, and eases back.
   Two lengths (7.4s, 8.6s) so the gap between them breathes and never repeats the same way twice. */
/* the lean is written out per direction (no var() inside keyframes), so the browser can run it on the
   compositor instead of the main thread: it stays smooth while the page is busy scrolling */
@keyframes lean-r   { 0%, 100% { transform: none; } 38% { transform: translate3d(7px, -5px, 0) rotate(.9deg); } 52% { transform: translate3d(5.6px, -4px, 0) rotate(.7deg); } }
@keyframes lean-l   { 0%, 100% { transform: none; } 38% { transform: translate3d(-7px, -5px, 0) rotate(.9deg); } 52% { transform: translate3d(-5.6px, -4px, 0) rotate(.7deg); } }
@keyframes lean-f-r { 0%, 100% { transform: scaleX(-1); } 38% { transform: scaleX(-1) translate3d(-7px, -5px, 0) rotate(.9deg); } 52% { transform: scaleX(-1) translate3d(-5.6px, -4px, 0) rotate(.7deg); } }
@keyframes lean-f-l { 0%, 100% { transform: scaleX(-1); } 38% { transform: scaleX(-1) translate3d(7px, -5px, 0) rotate(.9deg); } 52% { transform: scaleX(-1) translate3d(5.6px, -4px, 0) rotate(.7deg); } }

/* ── tape: translucent, straddling the edge it holds, tinted by what it sits on ── */
.tape { position: absolute; z-index: 5; left: 50%; top: calc(var(--tape-h, 30px) / -2);
  width: var(--tape-w, 118px); height: var(--tape-h, 30px); translate: -50% 0; rotate: var(--tape-r, -2.5deg);
  background: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 45%, rgb(0 0 0 / .05)), var(--tape-c, rgb(247 242 230 / .66));
  box-shadow: 0 1px 1.5px rgb(0 0 0 / .16), 0 3px 6px -3px rgb(0 0 0 / .16);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' preserveAspectRatio='none'%3E%3Cpath d='M3 0 L117 0 L115 3 L119 7 L116 11 L119 15 L115 19 L118 23 L115 27 L117 30 L3 30 L5 27 L1 23 L4 19 L0 15 L3 11 L0 7 L4 3Z'/%3E%3C/svg%3E") center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' preserveAspectRatio='none'%3E%3Cpath d='M3 0 L117 0 L115 3 L119 7 L116 11 L119 15 L115 19 L118 23 L115 27 L117 30 L3 30 L5 27 L1 23 L4 19 L0 15 L3 11 L0 7 L4 3Z'/%3E%3C/svg%3E") center / 100% 100%; }
@keyframes tape-in { from { opacity: 0; scale: 1.5 .3; } to { opacity: 1; scale: 1; } }

/* ── stages: the designer's frames, scaled to cover the viewport width ── */
.stage { position: relative; --u: clamp(calc(100vw / 1920), calc(100svh / 1037), calc(100vw / 1640));
  width: calc(1920 * var(--u)); height: calc(1037 * var(--u)); margin-left: calc((100% - 1920 * var(--u)) / 2); }
.stage > * { position: absolute; }

/* ── controls ── */
.fq-btn { border-radius: 2px; position: relative; overflow: hidden; transition: transform .12s var(--ease-out), translate .45s var(--ease-out); }
.pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: #CC3C3B; color: #FBF8F3; text-decoration: none; font: 600 18px/1 var(--fq-print); letter-spacing: -.005em; box-shadow: 0 12px 24px -14px #7a1c1ccc;
  transition: scale .5s var(--ease-out), translate .45s var(--ease-out), box-shadow .5s var(--ease-out); }
.pill svg { width: 28px; height: 14px; overflow: visible; transition: transform .5s var(--ease-out); }
.pill:active { scale: .97; }
.pill:focus-visible { outline: 2px solid var(--fq-ink); outline-offset: 4px; }

/* shared keyframes */
@keyframes slip-in { 0% { opacity: 0; scale: 1.4; rotate: -4deg; } 60% { opacity: 1; } 100% { opacity: 1; scale: 1; rotate: 5deg; } }
@keyframes reach-l { from { opacity: 0; transform: translate3d(-32%, 8%, 0) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes reach-r { from { opacity: 0; transform: translate3d(32%, -6%, 0) rotate(5deg); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.2) rotate(-25deg); } 70% { opacity: 1; transform: scale(1.12) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(.98); } 36% { transform: scale(1.08); } 50% { transform: scale(1); } }

/* headings arrive word by word (page.js); without it they simply stand */
[data-split] .wd { display: inline-block; }

/* ═════════ 1 · HERO — the Figma screen; our ground and type ═════════ */
.hero .logo { left: 0; right: 0; width: max-content; margin: 0 auto; top: calc(26 * var(--u)); font-size: max(26px, calc(42 * var(--u))); color: #791B0B; text-decoration: none; z-index: 6;
  display: flex; align-items: center; min-height: 44px; padding: 0 8px; margin-top: calc((1em - 44px) / 2); }
.hero-slip { left: calc(158 * var(--u)); top: calc(111 * var(--u)); width: calc(972 * var(--u)); height: calc(621 * var(--u)); z-index: 3; rotate: 5deg;
  --sr: max(5px, calc(9 * var(--u)));   /* perforation radius */
  filter: drop-shadow(0 1px 1px #1211101f) drop-shadow(0 18px 22px #1211102e);
  translate: calc(var(--mx, 0) * 6px) calc(var(--hout, 0) * -90 * var(--u) + var(--my, 0) * 5px); }
.hero-slip::before { content: ""; position: absolute; inset: 0; background: #FDFCF9;
  -webkit-mask: radial-gradient(var(--sr), #0000 97%, #000) round calc(-1.5 * var(--sr)) calc(-1.5 * var(--sr)) / calc(3 * var(--sr)) calc(3 * var(--sr)),
                linear-gradient(#000 0 0) 50% / calc(100% - 3 * var(--sr)) calc(100% - 3 * var(--sr)) no-repeat;
          mask: radial-gradient(var(--sr), #0000 97%, #000) round calc(-1.5 * var(--sr)) calc(-1.5 * var(--sr)) / calc(3 * var(--sr)) calc(3 * var(--sr)),
                linear-gradient(#000 0 0) 50% / calc(100% - 3 * var(--sr)) calc(100% - 3 * var(--sr)) no-repeat; }
.hero-slip .tape { --tape-w: calc(170 * var(--u)); --tape-h: calc(44 * var(--u)); top: calc(-2 * var(--u)); --tape-r: -3deg; }
.hero-h { position: absolute; left: calc(84 * var(--u)); top: calc(80 * var(--u)); width: calc(770 * var(--u));
  font: 800 calc(63 * var(--u)) / 1.1 var(--fq-print); letter-spacing: -.035em; color: #2A2826; }
.hero-h .hl { display: block; }
.hero-h .hl + .hl { margin-top: calc(26 * var(--u)); }
.hero .fq-em { color: #AD3842; font-size: 1.22em; }
.hero-hands { inset: 0; z-index: 2; }
.hero-hands .hand { position: absolute; }
.hero .hand-her { left: calc(-180 * var(--u)); top: calc(421.1 * var(--u)); width: calc(909.58 * var(--u)); height: calc(721.83 * var(--u)); rotate: -14.82deg;
  translate: calc(var(--hout, 0) * -170 * var(--u) + var(--mx, 0) * -18px) calc(var(--my, 0) * -10px + var(--lag, 0px)); }
.hero .hand-him { left: calc(1150 * var(--u)); top: calc(130 * var(--u)); width: calc(840.48 * var(--u)); height: calc(832.97 * var(--u));
  translate: calc(var(--hout, 0) * 170 * var(--u) + var(--mx, 0) * 18px) calc(var(--my, 0) * 10px + var(--lag, 0px)); }
.hero-note { left: calc(1500 * var(--u)); top: calc(246 * var(--u)); rotate: -7deg; font-size: calc(34 * var(--u)); color: #AD3842; z-index: 4; }
.hero-hearts { left: calc(1665 * var(--u)); top: calc(192 * var(--u)); width: calc(64 * var(--u)); z-index: 4; }
.hero-swoosh { left: calc(1570 * var(--u)); top: calc(346 * var(--u)); width: calc(84 * var(--u)); rotate: 172deg; z-index: 4; }
.hero-cta { left: auto; right: max(calc(128 * var(--u)), calc((1920 * var(--u) - 100vw) / 2 + 32px)); top: calc(876 * var(--u)); z-index: 6; }
.hero-time { margin: 16px 0 0; font: 500 max(15px, calc(18 * var(--u))) / 1.3 var(--fq-print); color: #3A3733; }
.fq-js .hero-slip { animation: slip-in 1.05s var(--ease-out) .15s both; }
.fq-js .hero-slip .tape { animation: tape-in .45s var(--ease-slam) 1s both; }
.fq-js .hero .logo { animation: rise .8s var(--ease-out) .05s both; }
.fq-js .hero .hand-her { animation: reach-l 1.4s var(--ease-out) .35s both, lean-r 7.4s cubic-bezier(.45,.05,.35,1) 1.9s infinite; }
.fq-js .hero .hand-him { animation: reach-r 1.4s var(--ease-out) .5s both, lean-l 8.6s cubic-bezier(.45,.05,.35,1) 2.3s infinite; }
.fq-js .hero-hearts { animation: pop .7s var(--ease-slam) 2.3s both, beat 2.6s ease-in-out 3.4s infinite; }
.fq-js .hero-swoosh { animation: wipe .6s var(--ease-out) 2.6s both; }
.fq-js .hero-cta { animation: rise .8s var(--ease-out) 2.1s both; }
.scroll-cue { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 6; width: 24px; height: 38px; border: 1.5px solid #3A373399; border-radius: 12px; opacity: calc(1 - var(--hout, 0) * 4); }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #3A3733; animation: cue 1.8s var(--ease-out) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ═════════ 2 · CONVERSATION WALL — pinned; the pictures fly on with the scroll ═════════ */
.wall { height: 190vh; }
.wall-pin { position: sticky; top: 0; height: 100vh; height: 100lvh; display: grid; align-items: center; }   /* lvh: no strip of page below when the browser bars hide */
.wall .stage { --u: min(calc(100vw / 1920), calc(100svh / 1037)); margin: 0 auto; }
.wall-h { left: 0; right: 0; top: calc(84 * var(--u)); margin: 0 auto; width: calc(1040 * var(--u)); text-align: center; font-size: calc(72 * var(--u)); scale: calc(.86 + .14 * var(--h, 1)); }
.slip { position: absolute; rotate: var(--r); filter: drop-shadow(0 calc(16 * var(--u)) calc(16 * var(--u)) #12111026); }
.slip img { width: 100%; height: auto; }
.w1 { left: calc(330 * var(--u)); top: calc(360 * var(--u)); width: calc(300 * var(--u)); }
.w2 { left: calc(350 * var(--u)); top: calc(500 * var(--u)); width: calc(330 * var(--u)); }
.w3 { left: calc(300 * var(--u)); top: calc(720 * var(--u)); width: calc(390 * var(--u)); }
.w4 { left: calc(770 * var(--u)); top: calc(350 * var(--u)); width: calc(350 * var(--u)); }
.w5 { left: calc(745 * var(--u)); top: calc(760 * var(--u)); width: calc(390 * var(--u)); }
.w6 { left: calc(1200 * var(--u)); top: calc(345 * var(--u)); width: calc(290 * var(--u)); }
.w7 { left: calc(1170 * var(--u)); top: calc(740 * var(--u)); width: calc(390 * var(--u)); }
.w8 { left: calc(1490 * var(--u)); top: calc(430 * var(--u)); width: calc(250 * var(--u)); }
.fq-js .wall .slip { will-change: transform; opacity: min(1, calc(var(--k, 0) * 3));
  translate: calc((1 - var(--k, 0)) * var(--fx) * var(--u) * var(--fly, 1)) calc((1 - var(--k, 0)) * var(--fy) * var(--u) * var(--fly, 1));
  rotate: calc(var(--r) + (1 - var(--k, 0)) * var(--fr) * var(--frot, 1)); scale: calc(1 + (1 - var(--k, 0)) * .55 * var(--fly, 1)); }
.print { background: url("assets/deckle-paper.webp") center / 100% 100%; padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(46 * var(--u)); }
.print .tape { --tape-w: calc(104 * var(--u)); --tape-h: calc(30 * var(--u)); --tape-r: 4deg; }
.print-in { display: block; overflow: hidden; aspect-ratio: 4 / 5; }
.print-in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.print-in { position: relative; }
.print-in::after { content: ""; position: absolute; inset: 0; background: #F4EFE6; opacity: 0; pointer-events: none; }
.fq-js .print-in::after { opacity: .78; transition: opacity 1.8s ease-out; }        /* undeveloped: washed out */
.fq-js .print.dev .print-in::after { opacity: 0; }
.wall-note { left: calc(1400 * var(--u)); top: calc(952 * var(--u)); font-size: max(17px, calc(32 * var(--u))); rotate: -5deg; }
.fq-js .wall-note { opacity: 0; transition: opacity .4s ease-out; }
.fq-js .wall-note.on { opacity: 1; }

/* ═════════ ticker — the struck list, running ═════════ */
.ticker { padding: 9px 0; }
.tk-skew { transform: skewX(calc(var(--skew, 0) * 1deg)); }
.tk-track { display: flex; align-items: center; gap: clamp(18px, 1.8vw, 30px); width: max-content; animation: marquee 32s linear infinite;
  font: 800 clamp(14px, 1.15vw, 18px) / 1 var(--fq-print); letter-spacing: -.02em; color: var(--fq-paper); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

.tk-s { position: relative; }
.tk-s::after { content: ""; position: absolute; left: -4%; right: -4%; top: 46%; height: .2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 13C40 11 80 9 120 8.5S175 7 198 6' fill='none' stroke='%23E4412A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.tk-h { font-family: var(--fq-hand); font-weight: 400; letter-spacing: .01em; font-size: 1.05em; color: var(--fq-blush); rotate: -3deg; display: inline-block; padding: 0 .1em; }

/* ═════════ 3 · THE STORY (pinned, one step per scroll) ═════════ */
.story { height: calc(10 * 48vh + 100vh); }
.pin { position: sticky; top: 0; height: 100vh; height: 100lvh;
  --u: min(calc(100vw / 1920), calc(100svh / 1037));
  --ox: calc((100vw - 1920 * var(--u)) / 2);
  --ph: min(calc(100svh - 80px), 920px); --pw: calc(var(--ph) * .4556); }
.pin > * { position: absolute; }
.story-night { inset: 0; z-index: 1 !important; background: var(--fq-ink); opacity: 0; transition: opacity 1s var(--ease-out); }
.story-night::after { content: ""; position: absolute; inset: 0; background: url("images/paper-landscape.jpg") 0 0 / 1600px auto repeat; mix-blend-mode: screen; opacity: .07; }
.story.is-night .story-night { opacity: 1; }
.pin .fq-em, .pin .fq-note { color: var(--fq-ink); transition: color .6s; }
.story.is-night .fq-em, .story.is-night .fq-note { color: var(--fq-paper); }
.story.is-night .chap .fq-em { color: var(--fq-blush); }

/* captions: exactly one per step, and it always describes the screen in the phone */
.chap { left: calc(var(--ox) + 120 * var(--u)); top: calc(50% - var(--ph) * .36); width: min(calc(500 * var(--u)), calc(50vw - var(--pw) / 2 - 150 * var(--u))); color: var(--fq-ink); z-index: 4 !important;
  pointer-events: none; transition: color .6s; }
.fq-js .chap > * { opacity: 0; translate: 0 22px; transition: opacity 200ms cubic-bezier(.4,.14,1,1), translate var(--m-out) cubic-bezier(.4,.14,1,1), color .6s; }
.fq-js .story[data-dir="down"] .chap:not(.on) > * { translate: 0 -16px; }
.fq-js .chap.on > * { opacity: 1; translate: 0 0; transition: opacity 420ms ease-out 180ms, translate var(--m-in) var(--ease-out) 180ms, color .6s; }
.chap .cant-m { display: none; }
/* the closure: the last step hands you the button */
.close-cta { margin-top: calc(34 * var(--u)); min-width: min(100%, 300px); }
.chap.close.on .close-cta { pointer-events: auto; }
.fq-js .chap.on .sub { transition-delay: 260ms; } .fq-js .chap.on .close-cta { transition-delay: 340ms; }
.story.is-night .chap { color: var(--fq-paper); }
.chap .fq-h2 { font-size: max(32px, calc(70 * var(--u))); line-height: 1.02; }
.chap .fq-h2.long { font-size: max(28px, calc(54 * var(--u))); line-height: 1.06; }
.chap .sub { margin-top: calc(28 * var(--u)); max-width: 34ch; font: 400 max(16px, calc(23 * var(--u))) / 1.5 var(--fq-print); color: #4A4642; }
.story.is-night .chap .sub { color: #DDD6CB; }
.chap .sub .fq-em { font-size: 1.34em; margin: 0 .04em; }

/* the phone: drawn, not a picture, so it is sharp at any size */
.phone { left: calc(50% - var(--pw) / 2); top: calc(50% - var(--ph) / 2); width: var(--pw); height: var(--ph); z-index: 3 !important; padding: calc(var(--pw) * .035);
  --u: calc(var(--pw) * .93 / 340);
  border-radius: calc(var(--pw) * .165);
  background: linear-gradient(145deg, #5b5b60 0%, #242427 18%, #3d3d41 48%, #18181a 76%, #57575c 100%);
  box-shadow: inset 0 0 0 calc(var(--pw) * .004) rgb(255 255 255 / .35), inset 0 0 0 calc(var(--pw) * .012) #0c0c0d,
    0 calc(var(--ph) * .05) calc(var(--ph) * .09) calc(var(--ph) * -.03) rgb(18 17 16 / .55), 0 calc(var(--ph) * .015) calc(var(--ph) * .03) rgb(18 17 16 / .25);
  transition: opacity .9s ease-out, translate 1.1s var(--ease-out), box-shadow .8s; }
.phone { transform: translateY(var(--bob, 0px)) rotate(var(--tilt, 0deg)); }
.fq-js .story .phone { transition: opacity .9s ease-out, translate 1.1s var(--ease-out), box-shadow .8s, transform .9s var(--ease-arrive); }
.story[data-step="0"] { --tilt: -1deg; } .story[data-step="1"] { --tilt: .8deg; } .story[data-step="2"] { --tilt: 0deg; }
.story[data-step="3"] { --tilt: -.8deg; } .story[data-step="4"] { --tilt: 1deg; } .story[data-step="5"] { --tilt: -.5deg; }
.story[data-step="6"] { --tilt: .9deg; } .story[data-step="7"] { --tilt: -1deg; } .story[data-step="8"] { --tilt: .6deg; } .story[data-step="9"] { --tilt: 0deg; }
.fq-js .phone { opacity: 0; translate: 0 40px; }
.fq-js .story.seen .phone { opacity: 1; translate: 0 0; }
.story.is-night .phone { box-shadow: inset 0 0 0 calc(var(--pw) * .004) rgb(255 255 255 / .35), inset 0 0 0 calc(var(--pw) * .012) #0c0c0d,
    0 0 calc(var(--ph) * .12) rgb(246 243 237 / .09), 0 calc(var(--ph) * .05) calc(var(--ph) * .08) rgb(0 0 0 / .6); }
.phone::before, .phone::after { content: ""; position: absolute; width: 1.1%; border-radius: 2px; background: linear-gradient(90deg, #1a1a1c, #4a4a4f); }
.phone::before { left: -1%; top: 17%; height: 3.4%; box-shadow: 0 calc(var(--ph) * .07) 0 0 #333336, 0 calc(var(--ph) * .145) 0 0 #333336; }
.phone::after { right: -1%; top: 25%; height: 10%; background: linear-gradient(270deg, #1a1a1c, #4a4a4f); }
.glass { position: relative; width: 100%; aspect-ratio: 390 / 891; border-radius: calc(var(--pw) * .13); overflow: hidden; background: #000; isolation: isolate; }
.sbar { position: absolute; left: 0; right: 0; top: 0; height: 5.275%; z-index: 9; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 11%;
  background: var(--sb, #FBF8F3); color: #121110; transition: background-color .5s ease-out; font: 600 calc(var(--pw) * .04) / 1 system-ui, -apple-system, sans-serif; letter-spacing: -.01em; }
.island { position: absolute; left: 50%; top: 20%; height: 64%; width: 31%; translate: -50% 0; border-radius: 999px; background: #000; }
.sicons { display: flex; align-items: center; gap: calc(var(--pw) * .012); }
.sicons svg { height: calc(var(--pw) * .03); width: auto; fill: currentColor; }
.sicons svg:last-child { height: calc(var(--pw) * .033); }
.view { position: absolute; left: 0; right: 0; top: 5.275%; bottom: 0; overflow: hidden; background: var(--sb, #FBF8F3); transition: background-color .5s ease-out; }
.glare { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; border-radius: inherit;
  background: linear-gradient(118deg, rgb(255 255 255 / .13) 0%, rgb(255 255 255 / .03) 24%, rgb(255 255 255 / 0) 42%); }
.glare::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .2), transparent); transform: translateX(0) skewX(-12deg); opacity: 0; }
.glare.sweep::after { animation: sweep 1s var(--ease-out); }
@keyframes sweep { 0% { opacity: 0; transform: translateX(0) skewX(-12deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(420%) skewX(-12deg); } }

/* every dating app: a simple card, like and dislike, forever */
.dapp { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #151413; background: #FBF8F3;
  transition: opacity .3s; }
.dapp::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #6E6A66; mix-blend-mode: saturation; opacity: 0; transition: opacity .8s ease-out; pointer-events: none; }
.dapp::before { content: ""; position: absolute; inset: 0; z-index: 3; background: #121110; opacity: 0; transition: opacity .8s ease-out; pointer-events: none; }
.dapp.grey::after { opacity: 1; } .dapp.grey::before { opacity: .08; }
.dapp.gone { opacity: 0; }
.d-bar { display: flex; align-items: center; justify-content: space-between; height: calc(48 * var(--u)); padding: 0 calc(16 * var(--u)); flex: none; }
.d-sp { width: calc(24 * var(--u)); }
.d-bar b { font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: -.01em; }
.d-bar svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.deck { position: relative; flex: 1; margin: 0 calc(12 * var(--u)) calc(24 * var(--u)); }
.pcard { position: absolute; inset: 0; border-radius: calc(22 * var(--u)); overflow: hidden; background: #1B1A18; transform-origin: 50% 118%;
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-12 * var(--u)) #000a; transition: transform .7s var(--ease-out), opacity .7s ease-out;
  isolation: isolate; clip-path: inset(0 round calc(22 * var(--u))); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.pcard img { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; }   /* the photos ship pre-blurred: no live filter on a swiping card */
.pcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 50%, #000000c8 100%); }
.pcard:nth-last-child(2) { transform: translateY(calc(10 * var(--u))) scale(.955); }
.pcard:nth-last-child(n+3) { transform: translateY(calc(20 * var(--u))) scale(.91); }
.pcard.go-l { transform: translateX(-140%) rotate(-24deg); opacity: 0; }
.pcard.go-r { transform: translateX(140%) rotate(24deg); opacity: 0; }
.pinfo { position: absolute; z-index: 1; left: calc(18 * var(--u)); right: calc(18 * var(--u)); bottom: calc(20 * var(--u)); color: #fff; display: grid; gap: calc(4 * var(--u)); }
.pinfo b { font-size: calc(26 * var(--u)); font-weight: 700; letter-spacing: -.02em; }
.pinfo span { font-size: calc(13 * var(--u)); opacity: .85; }
.stamp { position: absolute; z-index: 2; top: calc(26 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border: calc(3 * var(--u)) solid; border-radius: calc(8 * var(--u));
  font: 800 calc(28 * var(--u)) / 1 system-ui, sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .25s; }
.stamp.like { left: calc(18 * var(--u)); color: #3DDC97; rotate: -14deg; }
.stamp.nope { right: calc(18 * var(--u)); color: #FF4D6D; rotate: 14deg; }
.pcard.go-r .like, .pcard.go-l .nope { opacity: 1; }
.d-acts { flex: none; height: calc(96 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(44 * var(--u)); }
.d-acts span { display: grid; place-items: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) #0006; transition: transform .2s; }
.d-acts svg { width: 44%; height: 44%; }
.d-nope { background: #fff; color: #FF4D6D; }
.d-like { background: linear-gradient(135deg, #FF6B8B, #E4412A); color: #fff; }
.d-acts span.hit { animation: hit .5s var(--ease-slam); }
@keyframes hit { 50% { transform: scale(1.22); } }

/* the crumple: the screen folded into creases on a canvas, then tossed */
.crumple { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; display: none; pointer-events: none; }
.crumple.on { display: block; }

/* real screens from app.frinq.in, built from their own layers */
.screens { position: absolute; inset: 0; z-index: 5; }
.scr { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 390 / 844; opacity: 0; transition: opacity .45s ease-out; }
.scr.on { opacity: 1; }
.scr > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scr .st { opacity: 0; transition: opacity .3s ease-out; }
.scr .st.on { opacity: 1; }
.ly { position: absolute; background-repeat: no-repeat; opacity: 0; }
.ly.in { opacity: 1; }
.tap { position: absolute; z-index: 8; left: 0; top: 0; width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin: calc(-22 * var(--u)) 0 0 calc(-22 * var(--u));
  border-radius: 50%; background: rgb(18 17 16 / .2); box-shadow: 0 0 0 calc(2 * var(--u)) rgb(255 255 255 / .85), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgb(0 0 0 / .18); opacity: 0; pointer-events: none; }
.tap.go { animation: tap .75s var(--ease-out); }
@keyframes tap { 0% { opacity: 0; transform: scale(1.9); } 35% { opacity: 1; transform: scale(.78); } 65% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
.mic-ring { position: absolute; z-index: 8; width: calc(60 * var(--u)); height: calc(60 * var(--u)); margin: calc(-30 * var(--u)) 0 0 calc(-30 * var(--u)); border-radius: 50%;
  border: calc(2.5 * var(--u)) solid var(--fq-signal); opacity: 0; pointer-events: none; }
.mic-ring.on { animation: ring 1.6s var(--ease-out) infinite; }
@keyframes ring { from { opacity: .95; transform: scale(.9); } to { opacity: 0; transform: scale(1.7); } }

.scr { container-type: inline-size; }
.dep { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.dep > * { position: absolute; }
.dep-pick { left: 7.7%; top: 72.5%; width: 63%; height: 4.5%; }
.dep-pick .fq-loop { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); overflow: visible; color: #121110; }
.dep-field { left: 5.13%; top: 78.6%; width: 89.74%; height: 8.3%; padding: 3% 13% 0 3.6%; border-radius: 2px; background: #F6F3ED; color: #121110;
  box-shadow: 0 0 0 1px #12111024, 0 6px 10px -8px #12111066; font: 400 calc(100cqw * 12.6 / 390) / 1.38 var(--fq-print); letter-spacing: -.005em;
  opacity: 0; translate: 0 -8px; transition: opacity .35s ease-out, translate .5s var(--ease-out); }
.dep.open .dep-field { opacity: 1; translate: 0 0; }
.dep-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--fq-signal); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.dep.done .dep-caret { display: none; }
.dep-mic { right: 3%; bottom: 14%; width: 7.6%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #121110; color: #F6F3ED; }
.dep-mic svg { width: 46%; height: 46%; }
.dep-next { left: 3.85%; top: 88.03%; width: 92.3%; height: 7.58%; background: url("assets/live/conflict-picked.webp") 50% 95.256% / 108.33% 1318.75% no-repeat;
  opacity: 0; transition: opacity .35s ease-out; }
.dep.done .dep-next { opacity: 1; }

/* our own screen: the read, written for you */
.read-scr { width: 390px; height: 844px; aspect-ratio: auto; transform: scale(var(--fs, .8)); transform-origin: 0 0; z-index: 6;
  background: var(--fq-blush); color: var(--fq-ink); font-family: var(--fq-print); overflow: hidden; }
.read-scr::after { content: ""; position: absolute; inset: 0; background: url("images/paper-portrait.jpg") center / cover; mix-blend-mode: soft-light; opacity: .75; pointer-events: none; z-index: 0; }
.rd, .rd-foot { position: relative; z-index: 1; }
.rd { padding: 22px 20px 0; }
.rd-row { display: flex; justify-content: space-between; align-items: center; }
.rd-mark { font-weight: 800; font-size: 30px; letter-spacing: -.05em; }
.rd-part { font-size: 14px; font-weight: 600; color: #3A2A2E; }
.rd-kick { margin-top: 38px; font-family: var(--fq-notes); font-weight: 300; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: #3A2A2E; rotate: -2deg; transform-origin: left; }
.rd-head { margin-top: 12px; font-weight: 800; font-size: 40px; line-height: 1.02; letter-spacing: -.04em; max-width: 12ch; }
.rd-em { font-family: var(--fq-hand); font-weight: 400; letter-spacing: 0; font-size: 1.25em; line-height: .8; display: inline-block; rotate: -3deg; }
.rd-body { margin-top: 16px; font-size: 16px; line-height: 1.5; color: #3A2A2E; max-width: 32ch; }
.rd-slips { display: grid; gap: 10px; margin-top: 22px; }
.rd-slip { background: var(--fq-paper-hi); border-radius: 2px; padding: 12px 16px 13px; box-shadow: 0 0 0 1px #12111014, 0 10px 16px -14px #12111066; display: grid; gap: 3px; }
.rd-slip b { font-size: 12.5px; font-weight: 700; color: #6B5A5E; letter-spacing: .01em; }
.rd-slip span { font-size: 16px; font-weight: 500; line-height: 1.3; }
.rd-note { margin-top: 22px; font-family: var(--fq-notes); font-weight: 300; font-size: 17px; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; rotate: -3deg; transform-origin: left; }
.rd-foot { position: absolute; left: 16px; right: 16px; bottom: 26px; display: flex; justify-content: space-between; align-items: center; min-height: 58px; padding: 0 20px;
  border-radius: 2px; background: var(--fq-ink); color: var(--fq-blush); font-size: 17px; font-weight: 700; z-index: 1; }
.rd-foot i { width: 26px; height: 2px; background: currentColor; position: relative; }
.rd-foot i::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.read-scr .r-in { opacity: 0; translate: 0 16px; transition: opacity .6s ease-out, translate .8s var(--ease-out); }
.read-scr.play .r-in { opacity: 1; translate: 0 0; }

/* notes beside the phone: one set per step */
.side { z-index: 4 !important; opacity: 0; translate: -16px 0; transition: opacity .45s ease-out, translate .7s var(--ease-out); pointer-events: none; }
.side.on { opacity: 1; translate: 0 0; transition-delay: .2s; }
.ann { inset: 0; translate: none; }
.an { position: absolute; left: calc(50% + var(--pw) / 2 + 20px); display: flex; align-items: center; gap: 12px; opacity: 0; translate: -14px 0; transition: opacity .5s ease-out, translate .7s var(--ease-out); }
.ann.on .an { opacity: 1; translate: 0 0; } .ann.on .an1 { transition-delay: .3s; } .ann.on .an2 { transition-delay: .55s; } .ann.on .an3 { transition-delay: .8s; }
.an .fq-note, .un .fq-note { font-size: max(16px, calc(32 * var(--u))); white-space: nowrap; transform: none; }
.an img, .un img { width: max(34px, calc(54 * var(--u))); rotate: -135deg; flex: none; }
.an1 { top: calc(50% - var(--ph) * .12); } .an2 { top: calc(50% + var(--ph) * .24); } .an3 { top: calc(50% + var(--ph) * .37); }
.cant { left: calc(50% + var(--pw) / 2 + 64px); top: calc(50% - var(--ph) * .24); width: min(460px, calc(50vw - var(--pw) / 2 - 110px)); color: var(--fq-ink); }
.cant-lead { font: 800 max(19px, calc(32 * var(--u))) / 1.12 var(--fq-print); letter-spacing: -.03em; }
.cant ul { margin-top: calc(30 * var(--u)); display: grid; gap: calc(18 * var(--u)); }
.cant li { display: flex; align-items: center; gap: calc(16 * var(--u)); font: 500 max(15px, calc(23 * var(--u))) / 1.3 var(--fq-print); color: #4A4642;
  opacity: 0; translate: 24px 0; transition: opacity .5s ease-out, translate .7s var(--ease-out); }
.cant.on li { opacity: 1; translate: 0 0; }
.cant.on li:nth-child(1) { transition-delay: .35s; } .cant.on li:nth-child(2) { transition-delay: .5s; } .cant.on li:nth-child(3) { transition-delay: .65s; } .cant.on li:nth-child(4) { transition-delay: .8s; }
.cant li img { width: max(18px, calc(28 * var(--u))); flex: none; }
.un { display: flex; align-items: center; gap: 14px; left: calc(50% + var(--pw) / 2 + 20px); top: calc(50% - var(--ph) * .06); rotate: -3deg; }
.un[data-step="7"] { top: calc(50% + var(--ph) * .2); }
.rail { left: calc(var(--ox) + 120 * var(--u)); right: calc(50% + var(--pw) / 2 + 28px); bottom: 48px; display: flex; flex-wrap: wrap; gap: 12px 16px; z-index: 4 !important;  /* stays in the words' column, clear of the phone */
  font: 600 13px / 1 var(--fq-print); letter-spacing: .02em; color: var(--fq-paper); opacity: 0; transition: opacity .6s; }
.rail li { white-space: nowrap; }
.story.is-night .rail { opacity: 1; }
.rail li { position: relative; padding-top: 14px; opacity: .38; transition: opacity .4s; }
.rail li::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(.25); transform-origin: left; transition: transform .6s var(--ease-out); }
.rail li.on { opacity: 1; } .rail li.on::before { transform: none; }
.dashes { display: none; }

/* ═════════ 4 · WHO YOU ARE — the Figma screen; our ground and type ═════════ */
.who-h { left: calc(172 * var(--u)); top: calc(128 * var(--u)); color: var(--fq-paper-hi); font: 800 calc(66 * var(--u)) / 1.2 var(--fq-print); letter-spacing: -.035em; }
.who-h .wl { display: block; }
.who .fq-em { color: #DF9393; font-size: 1.2em; }
.who .fq-struck > svg { color: #DF9393; }   /* the strike is written by the same hand, in the same ink as "who you are." */
.who-aside { left: calc(1418 * var(--u)); top: calc(204 * var(--u)); width: calc(350 * var(--u)); rotate: -7deg; font-size: calc(34 * var(--u)); line-height: 1.45; color: var(--fq-paper); }
.who-hands { inset: 0; }
.who-hands .hand { position: absolute; }
.who .hand-him { left: calc(-80 * var(--u)); top: calc(62 * var(--u)); width: calc(968 * var(--u)); height: calc(959 * var(--u));
  translate: calc((1 - min(1, var(--in, 1) * 1.25)) * -420 * var(--u) + var(--mx, 0) * -16px) calc((1 - min(1, var(--in, 1) * 1.25)) * 80 * var(--u) + var(--my, 0) * -8px + var(--lag, 0px)); }
.who .hand-her { left: calc(1240 * var(--u)); top: calc(291.2 * var(--u)); width: calc(845.09 * var(--u)); height: calc(670.65 * var(--u)); rotate: 14.82deg;
  translate: calc((1 - min(1, var(--in, 1) * 1.25)) * 420 * var(--u) + var(--mx, 0) * 16px) calc((1 - min(1, var(--in, 1) * 1.25)) * -60 * var(--u) + var(--my, 0) * 8px + var(--lag, 0px)); }
.fq-js .who .hand-him, .fq-js .cta .hand-him { animation: lean-f-r 7.4s cubic-bezier(.45,.05,.35,1) infinite; }
.fq-js .who .hand-her, .fq-js .cta .hand-her { animation: lean-f-l 8.6s cubic-bezier(.45,.05,.35,1) -2.7s infinite; }

/* ═════════ 5 · HOW IT WORKS ═════════ */
.how-in { max-width: 1320px; margin: 0 auto; padding: clamp(80px, 12vh, 150px) var(--gutter) clamp(90px, 14vh, 170px); }
.how-h { font-size: clamp(40px, 5.2vw, 76px); margin-bottom: clamp(28px, 4vw, 52px); }
.rule { display: block; width: 100%; height: 18px; overflow: visible; color: var(--fq-ink); }
.step { display: grid; grid-template-columns: minmax(180px, 3fr) minmax(180px, 3fr) 6fr; column-gap: clamp(20px, 3vw, 48px); row-gap: 10px; align-items: start;
  padding: clamp(32px, 4vw, 52px) 0; }
.step-n { display: grid; gap: 8px; justify-items: start; }
.step-n .num { font-family: var(--fq-hand); font-size: 50px; line-height: .9; display: inline-block; transform: rotate(-6deg); }
.step .fq-note { font-size: 19px; }
.step .fq-h3 { font-size: clamp(26px, 2.6vw, 38px); }
.step .fq-text { font-size: 18px; max-width: 60ch; }

/* ═════════ 6 · POSTER WALL ═════════ */
.wall-grid { --u: min(calc(100vw / 1920), 1px); display: grid; grid-template-columns: repeat(3, calc(424 * var(--u))); column-gap: calc(-18 * var(--u)); row-gap: calc(10 * var(--u));
  justify-content: center; padding: clamp(90px, 13vh, 150px) var(--gutter) clamp(110px, 15vh, 170px); }
.poster { position: relative; will-change: transform; aspect-ratio: 424 / 592; padding: calc(40 * var(--u)) calc(32 * var(--u)) calc(30 * var(--u)); display: flex; flex-direction: column;
  background: var(--pg); color: var(--pf); box-shadow: 0 2px 3px #0000004d, 0 26px 34px -24px #000c; --mark: var(--pf); --pe: 1;
  translate: calc(var(--ox, 0) * var(--u)) calc(var(--oy, 0) * var(--u) + (1 - var(--pe)) * 46px);
  rotate: calc(var(--r) + (1 - var(--pe)) * 4deg); scale: calc(1 + (1 - var(--pe)) * .05); opacity: clamp(0, var(--pe) * 1.6, 1);
  transform: translateY(calc(var(--dy, 0) * 1px)) rotate(calc(var(--dr, 0) * 1deg)); }
/* posters print flat: grain lives on the ground only, never on the pieces pasted onto it */
.poster > * { position: relative; }
.poster > .tape { position: absolute; --tape-w: calc(112 * var(--u)); --tape-h: calc(32 * var(--u));
  opacity: clamp(0, (var(--pe) - .55) * 2.4, 1); scale: calc(1 + (1 - min(1, var(--pe) * 1.15)) * .5) calc(1 - (1 - min(1, var(--pe) * 1.15)) * .6); }
.poster:nth-child(1) { --ox: 26; --oy: 10; --py: 70; --pr: 5; z-index: 2; }
.poster:nth-child(2) { --ox: 0; --oy: 26; --py: -90; --pr: -4; z-index: 1; }
.poster:nth-child(3) { --ox: -22; --oy: -6; --py: 50; --pr: 6; z-index: 3; }
.poster:nth-child(4) { --ox: 40; --oy: 0; --py: -60; --pr: -6; z-index: 4; }
.poster:nth-child(5) { --ox: 4; --oy: 14; --py: 80; --pr: 4; z-index: 6; }
.poster:nth-child(6) { --ox: -30; --oy: -20; --py: -40; --pr: -5; z-index: 5; }
.p-paper { --pg: var(--fq-paper-hi); --pf: var(--fq-ink); --tape-c: rgb(250 248 242 / .62); }
.p-blush { --pg: var(--fq-blush); --pf: var(--fq-ink); --tape-c: rgb(252 214 224 / .6); }
.p-charcoal { --pg: var(--fq-charcoal); --pf: var(--fq-paper-hi); --tape-c: rgb(232 228 220 / .34); }
.p-signal { --pg: var(--fq-signal); --pf: var(--fq-ink); --tape-c: rgb(255 176 160 / .5); }
.poster:nth-child(2) > .tape { --tape-r: 3deg; } .poster:nth-child(3) > .tape { --tape-r: -1deg; } .poster:nth-child(4) > .tape { --tape-r: 4deg; } .poster:nth-child(5) > .tape { --tape-r: -4deg; } .poster:nth-child(6) > .tape { --tape-r: 2deg; }
.poster .fq-em { color: var(--pf); }
.pt { font: 800 calc(50 * var(--u)) / 1.06 var(--fq-print); letter-spacing: -.04em; }
.pt.long { font-size: calc(38 * var(--u)); line-height: 1.1; }
.pt2 { margin-top: calc(22 * var(--u)); font: 800 calc(38 * var(--u)) / 1.1 var(--fq-print); letter-spacing: -.035em; }
.plist { display: grid; justify-items: start; }
.psmall { margin-top: calc(14 * var(--u)); font: 500 max(16px, calc(22 * var(--u))) / 1.35 var(--fq-print); }
.pfoot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.pmark { font: 800 calc(40 * var(--u)) / 1 var(--fq-print); letter-spacing: -.05em; }
.pjoin { font: 700 calc(19 * var(--u)) / 1 var(--fq-print); color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; min-height: 24px; display: inline-flex; align-items: flex-end; }


/* ═════════ 7 · CTA ═════════ */
.cta-card { left: calc(660 * var(--u)); top: calc(150 * var(--u)); width: calc(600 * var(--u)); padding: calc(54 * var(--u)) calc(50 * var(--u)) calc(42 * var(--u)); z-index: 3;
  background: var(--fq-paper-hi); color: var(--fq-ink); border-radius: 2px; rotate: -.6deg; box-shadow: 0 0 0 1px #12111014, 0 30px 40px -26px #121110cc;
  scale: calc(.72 + .28 * min(1, var(--in, 1) * 1.4)); }
.cta-card .tape { --tape-w: calc(130 * var(--u)); --tape-h: calc(34 * var(--u)); --tape-r: 3deg; }
.cta-note { font-size: max(16px, calc(24 * var(--u))); }
.cta-h { margin: calc(22 * var(--u)) 0 calc(36 * var(--u)); font: 800 calc(62 * var(--u)) / 1.02 var(--fq-print); letter-spacing: -.045em; }
.cta-card .fq-btn { width: 100%; }
.cta-card .fq-small { margin-top: 14px; }
.cta-card .cta-next { margin-top: 6px; max-width: 34ch; }
.cta-hands { inset: 0; z-index: 2; }
.cta-hands .hand { position: absolute; }
.cta .hand-him { left: calc(-80 * var(--u)); top: calc(325 * var(--u)); width: calc(967 * var(--u)); height: calc(807 * var(--u));
  translate: calc((1 - min(1, var(--in, 1) * 1.15)) * -460 * var(--u) + var(--mx, 0) * -16px) calc(var(--my, 0) * -8px + var(--lag, 0px)); }
.cta .hand-her { left: calc(1240 * var(--u)); top: calc(402.2 * var(--u)); width: calc(845.09 * var(--u)); height: calc(670.65 * var(--u)); rotate: 14.82deg;
  translate: calc((1 - min(1, var(--in, 1) * 1.15)) * 460 * var(--u) + var(--mx, 0) * 16px) calc(var(--my, 0) * 8px + var(--lag, 0px)); }

.foot { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; text-align: center;
  padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(44px, 5vw, 64px); color: #BDB6AB; font: 14px/1.5 var(--fq-print); }
.foot-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.foot-links { display: flex; justify-content: center; gap: 8px 22px; flex-wrap: wrap; }
.foot-links a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--fq-paper); text-decoration: none; font-weight: 600; font-size: 15px;
  border-bottom: 1.5px solid transparent; transition: color .25s, border-color .25s; }
.foot-links svg { width: 20px; height: 20px; flex: none; transition: transform .4s var(--ease-out); }
.foot-c { color: #8E877C; }
.foot .fq-wordmark { color: var(--fq-paper); font-size: 30px; }
/* privacy and terms: a second row under the brand and the social links */
.foot-break { display: none; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; max-width: 46em; }
.foot-legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: #BDB6AB; font-weight: 500; font-size: 14.5px; text-decoration: underline;
  text-decoration-color: #BDB6AB59; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: color .25s, text-decoration-color .25s; }
.foot-legal a:active { color: var(--fq-blush); text-decoration-color: currentColor; }
.foot-legal a[aria-current="page"] { color: var(--fq-paper); text-decoration-color: currentColor; }

/* ═════════ sticky register ═════════ */
.sticky-cta { position: fixed; right: 24px; top: 20px; z-index: 60; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; background: #CC3C3B; color: #FBF8F3; text-decoration: none; font: 600 17px/1 var(--fq-print); letter-spacing: -.005em;
  box-shadow: 0 18px 32px -16px rgb(90 20 20 / .7); translate: 0 -160%; opacity: 0;
  transition: translate 150ms var(--ease-leave), opacity 150ms ease-in, scale var(--m-press) var(--ease-out); }
.sticky-cta svg { width: 26px; height: 14px; overflow: visible; transition: transform .4s var(--ease-out); }
.sticky-cta.show { translate: 0 0; opacity: 1; transition: translate var(--m-state) var(--ease-arrive), opacity var(--m-state) ease-out, scale var(--m-press) var(--ease-out); }
.sc-l { display: inline-flex; align-items: center; gap: inherit; }
.sc-note { display: none; font: 300 17px/1 var(--fq-notes); letter-spacing: .03em; color: #FFE3E3; rotate: -4deg; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .pill:hover { scale: 1.05; box-shadow: 0 20px 32px -16px #7a1c1ccc; }
  .pill:hover svg, .fq-btn:hover svg { transform: translateX(5px); }
  .sticky-cta:hover { scale: 1.04; } .sticky-cta:hover svg { transform: translateX(4px); }
  .foot-links a:hover { color: var(--fq-blush); border-color: currentColor; }
  .foot-links a:hover svg { transform: rotate(-8deg) scale(1.1); }
  .foot-legal a:hover { color: var(--fq-blush); text-decoration-color: currentColor; }
}
.pill, .fq-btn, .sticky-cta, .pjoin, .foot a { touch-action: manipulation; }
/* loops stop while their section is off screen (page.js marks the visible ones .is-on) */
.has-motion :is(.hero, .who, .cta):not(.is-on) .hand, .has-motion .ticker:not(.is-on) .tk-track,
.has-motion .hero:not(.is-on) .hero-hearts, .has-motion .hero:not(.is-on) .scroll-cue::after { animation-play-state: paused; }
.sticky-cta:focus-visible { outline: 2px solid var(--fq-ink); outline-offset: 4px; }

/* on touch there is no hover: the arrow answers the press, and nudges now and then to say "this way" */
.pill:active svg, .sticky-cta:active svg, .fq-btn:active svg { transform: translateX(6px); transition-duration: .15s; }
.sticky-cta:active { scale: .97; }
@media (hover: none) {
  .pill svg, .sticky-cta svg, .cta-card .fq-btn svg { animation: nudge 3.2s var(--ease-out) 2.8s infinite; }
  .pill:active svg, .sticky-cta:active svg, .fq-btn:active svg { animation: none; }
}
@keyframes nudge { 0%, 74%, 100% { transform: none; } 82% { transform: translateX(6px); } 90% { transform: translateX(1px); } 95% { transform: translateX(4px); } }

/* ═════════ MOBILE · a phone composition of its own ═════════
   Sizes come from the width (--u: one unit of the designer's 402 grid); where things sit vertically comes
   from the height (--v: one unit of an 870-tall screen), so tall and short phones both fill without dead bands.
   The register bar lives at the bottom, in the thumb's reach; pinned scenes keep --bar clear for it. */
@media (max-width: 899px) and (orientation: portrait) {
  :root { --bar: calc(76px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: var(--bar); }
  .stage { --u: min(calc(100vw / 402), 1.9px); --v: calc(100svh / 870); width: calc(402 * var(--u)); margin: 0 auto; height: auto; }

  /* ── register: a full-width bar under the thumb, the hand's note riding on it ── */
  /* flush to the bottom edge, under the home indicator: no gap below it, so the next section's edge never
     shows through as a strip */
  .sticky-cta { left: 0; right: 0; top: auto; bottom: 0; justify-content: space-between; border-radius: 18px 18px 0 0;
    min-height: calc(60px + env(safe-area-inset-bottom)); padding: 0 22px env(safe-area-inset-bottom); font-size: 17px;
    translate: 0 calc(100% + 12px); box-shadow: 0 -10px 26px -14px rgb(60 14 14 / .55); }
  .sticky-cta.show { translate: 0 0; }
  .sticky-cta svg { width: 24px; }
  .sc-l { white-space: nowrap; }
  .sc-note { display: inline-block; }
  @keyframes nudge { 0%, 74%, 100% { transform: none; } 82% { transform: translateX(5px); } 90% { transform: translateX(1px); } 95% { transform: translateX(3px); } }

  /* ── 1 · hero: logo, the stamp, the hands reaching across under it, the note in their gap, the button under the thumb ── */
  .hero .stage { height: 100svh; min-height: calc(700 * var(--u)); }
  .hero .logo { top: calc(20 * var(--v) + env(safe-area-inset-top)); font-size: calc(34 * var(--u)); }
  .hero-slip { left: calc(18 * var(--u)); right: calc(18 * var(--u)); top: calc(76 * var(--v) + env(safe-area-inset-top)); width: auto; height: auto; rotate: -1.4deg;
    --sr: calc(7 * var(--u)); padding: calc(44 * var(--u)) calc(34 * var(--u)) calc(42 * var(--u)); }
  @keyframes slip-in { 0% { opacity: 0; scale: 1.18; rotate: -5deg; } 100% { opacity: 1; scale: 1; rotate: -1.4deg; } }
  .hero-slip .tape { --tape-w: calc(104 * var(--u)); --tape-h: calc(30 * var(--u)); top: calc(-8 * var(--u)); }
  .hero-h { position: relative; left: auto; right: auto; top: auto; width: auto; font-size: calc(29 * var(--u)); line-height: 1.16; letter-spacing: -.035em; }
  .hero-h .hl + .hl { margin-top: calc(16 * var(--u)); }
  .hero-hands { z-index: 4; }
  /* the hands as the designer drew them: each sleeve cuff just inside its screen edge, the hands reaching in
     over the bottom of the stamp, fingertips at the centre. Placed from the stamp's bottom edge
     (--sb: the stamp is 279 units tall at every width) and from fingertip points measured in the images. */
  .hero .stage { --sb: calc(76 * var(--v) + env(safe-area-inset-top) + 279 * var(--u));
    /* on taller screens the hands and the note settle a little lower and the button rises a little;
       on short ones (under ~740px of browser) everything stays where it fits */
    --free: max(0px, 100svh - 740px); --hd: min(calc(18 * var(--u)), calc(var(--free) * .12)); --nd: min(calc(26 * var(--u)), calc(var(--free) * .17)); --cu: min(40px, calc(var(--free) * .22)); }
  /* the designer's proportions: her hand drawn 1.6x tall at -14.82deg, his 2x tall, level */
  .hero .hand-her { left: calc(-44 * var(--u)); top: calc(var(--sb) - 49 * var(--u) + var(--hd)); width: calc(255 * var(--u)); height: calc(202 * var(--u)); rotate: -14.82deg; }
  .hero .hand-him { left: calc(176 * var(--u)); top: calc(var(--sb) - 122 * var(--u) + var(--hd)); width: calc(242 * var(--u)); height: calc(238 * var(--u)); rotate: 0deg; }
  .hero-note { left: 0; right: 0; margin: 0 auto; width: max-content; top: calc(var(--sb) + 148 * var(--u) + var(--nd)); font-size: calc(24 * var(--u)); rotate: -4deg; text-align: center; }
  .hero-hearts { left: calc(316 * var(--u)); top: calc(var(--sb) + 132 * var(--u) + var(--nd)); width: calc(40 * var(--u)); }
  .hero-swoosh { left: calc(156 * var(--u)); top: calc(var(--sb) + 206 * var(--u) + var(--nd)); width: calc(92 * var(--u)); rotate: 176deg; }
  .hero-cta { left: 0; right: 0; top: auto; bottom: calc(28 * var(--v) + env(safe-area-inset-bottom) + var(--cu)); display: grid; justify-items: center; }
  .pill { min-height: 56px; padding: 0 30px; font-size: 18px; }
  .hero-time { font-size: 15px; margin-top: 12px; }
  .scroll-cue { display: none; }

  /* ── 2 · the wall: the question holds at the top, the slips land in reading order, the note signs it off ── */
  .wall { height: 190vh; height: calc(90svh + 100lvh); }
  .wall-pin { display: block; }
  .wall .stage { --u: min(calc(100vw / 402), calc((100svh - var(--bar)) / 860)); width: calc(402 * var(--u)); height: calc(860 * var(--u)); margin: 0 auto; top: 0; }
  .wall-h { left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(44 * var(--u) + env(safe-area-inset-top)); width: auto; font-size: calc(32 * var(--u)); line-height: 1.08; z-index: 4; }
  .slip { filter: drop-shadow(0 calc(9 * var(--u)) calc(9 * var(--u)) #12111024); }
  .w1 { left: calc(12 * var(--u));  top: calc(176 * var(--u)); width: calc(238 * var(--u)); --mfx: -470; --mfy: 140; }
  .w6 { left: calc(262 * var(--u)); top: calc(160 * var(--u)); width: calc(128 * var(--u)); --mfx: 420;  --mfy: 180; }
  .w4 { left: calc(14 * var(--u));  top: calc(264 * var(--u)); width: calc(212 * var(--u)); --mfx: -460; --mfy: 220; }
  .w8 { left: calc(244 * var(--u)); top: calc(346 * var(--u)); width: calc(140 * var(--u)); --mfx: 430;  --mfy: 260; }
  .w3 { left: calc(14 * var(--u));  top: calc(560 * var(--u)); width: calc(282 * var(--u)); --mfx: -480; --mfy: 260; }
  .w5 { left: calc(106 * var(--u)); top: calc(646 * var(--u)); width: calc(284 * var(--u)); --mfx: 480;  --mfy: 300; }
  .w7 { left: calc(14 * var(--u));  top: calc(732 * var(--u)); width: calc(280 * var(--u)); --mfx: -480; --mfy: 320; }
  .fq-js .wall .slip { translate: calc((1 - var(--k, 0)) * var(--mfx) * var(--u)) calc((1 - var(--k, 0)) * var(--mfy) * var(--u));
    rotate: calc(var(--r) + (1 - var(--k, 0)) * var(--fr) * .45); scale: calc(1 + (1 - var(--k, 0)) * .32); }
  .print { padding: calc(9 * var(--u)) calc(9 * var(--u)) calc(26 * var(--u)); } .print .tape { --tape-w: calc(70 * var(--u)); --tape-h: calc(21 * var(--u)); }
  .wall-note { left: calc(296 * var(--u)); top: calc(742 * var(--u)); width: calc(100 * var(--u)); font-size: calc(21 * var(--u)); line-height: 1.12; rotate: -7deg; }

  /* ticker: a strip you can read */
  .ticker { padding: 14px 0; }
  .tk-track { font-size: 17px; gap: 22px; }
  .tk-h { font-size: 1.12em; }

  /* ── 3 · the story: progress at the top, the caption under it, the phone large and clear of the bar ── */
  .story { height: calc(10 * 42svh + 100lvh); }
  .pin { --ox: 0px;
    --ph: clamp(300px, calc(100svh - 330px), 580px);
    --pt: calc(100svh - var(--ph) - var(--bar));
    --tw: min(calc(50vw - var(--pw) / 2 + 14px), 168px); }
  .chap { left: 20px; right: 20px; top: calc(40px + env(safe-area-inset-top)); height: calc(var(--pt) - 52px - env(safe-area-inset-top)); width: auto;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
  .chap .fq-h2 { font-size: clamp(25px, 7.2vw, 32px); line-height: 1.06; }
  .chap .fq-h2.long { font-size: clamp(21px, 6vw, 27px); line-height: 1.1; }
  .chap .sub { margin: 12px auto 0; max-width: 34ch; font-size: clamp(15.5px, 4.2vw, 17px); font-weight: 500; line-height: 1.42; letter-spacing: -.01em; text-wrap: balance; color: #3A3733; }
  .chap .m-cut { display: none; }
  .close-cta { margin-top: 18px; min-width: 240px; }
  .phone { top: var(--pt); }
  .story[data-step="9"] { --bob: calc(var(--bar) - 32px); }

  /* ten dashes, the current one inked, like the app's own section dashes */
  .dashes { display: flex; gap: 5px; left: 50%; translate: -50% 0; top: calc(18px + env(safe-area-inset-top)); z-index: 4 !important; }
  .dashes li { width: calc((min(100vw, 402px) - 120px) / 10); max-width: 26px; height: 3px; border-radius: 2px; background: currentColor; opacity: .18;
    color: var(--fq-ink); transition: opacity .4s, color .6s; }
  .dashes li.done { opacity: .5; } .dashes li.on { opacity: 1; }
  .story.is-night .dashes li { color: var(--fq-paper); }

  /* notes: small paper tags taped over the phone's edge, at the thing they name */
  .side .doodle { display: none; }
  .an, .un { width: var(--tw); max-width: 168px; padding: 9px 10px 10px; background: var(--fq-paper-hi); border-radius: 2px; flex-direction: column; gap: 0;
    box-shadow: 0 0 0 1px #12111012, 0 10px 16px -10px #12111088; }
  .an::before, .un::before { content: ""; position: absolute; left: 50%; top: -9px; width: 46px; height: 15px; translate: -50% 0; rotate: -4deg;
    background: rgb(247 242 230 / .7); box-shadow: 0 1px 1.5px rgb(0 0 0 / .14); }
  .an .fq-note, .un .fq-note { text-wrap: balance; font-size: clamp(15px, 4vw, 16.5px); line-height: 1.12; white-space: normal; overflow-wrap: break-word; transform: none; color: var(--fq-ink) !important; }
  .an.l, .un.l { left: calc(50% - var(--pw) / 2 + 22px - var(--tw)); text-align: left; rotate: -3deg; }
  .an.r, .un.r { left: calc(50% + var(--pw) / 2 - 22px); text-align: left; rotate: 3deg; }
  .an.l { translate: -12px 0; } .an.r { translate: 12px 0; } .ann.on .an { translate: 0 0; }
  .an1 { top: calc(var(--pt) + var(--ph) * .22); }
  .an2 { top: calc(var(--pt) + var(--ph) * .5); }
  .an3 { top: calc(var(--pt) + var(--ph) * .76); }
  .un, .un[data-step="7"] { top: calc(var(--pt) - 18px); }   /* the desktop step-7 placement must not win on phones */
  .un.l { rotate: -4deg; } .un.r { rotate: 4deg; }

  /* step 1: what a photo can't tell you, as four slips pasted over the greyed-out app */
  .chap .cant-m { display: none; }
  .cant { left: 50%; translate: -50% 0; top: calc(var(--pt) + var(--ph) * .1); width: min(330px, calc(100vw - 40px)); color: var(--fq-ink); }
  .cant.on { translate: -50% 0; }
  .cant-lead { position: relative; padding: 13px 16px 14px; margin-right: 22px; font: 800 clamp(17px, 4.6vw, 19px) / 1.18 var(--fq-print); letter-spacing: -.025em;
    background: var(--fq-paper-hi); border-radius: 2px; rotate: -2.2deg; box-shadow: 0 0 0 1px #12111012, 0 12px 18px -12px #12111099;
    opacity: 0; translate: 0 18px; transition: opacity .5s ease-out, translate .7s var(--ease-out); }
  .cant-lead::before { content: ""; position: absolute; left: 50%; top: -10px; width: 64px; height: 18px; translate: -50% 0; rotate: 3deg;
    background: rgb(247 242 230 / .72); box-shadow: 0 1px 1.5px rgb(0 0 0 / .14); }
  .cant.on .cant-lead { opacity: 1; translate: 0 0; transition-delay: .2s; }
  .cant ul { margin-top: 12px; gap: 10px; }
  .cant li { padding: 11px 14px; gap: 12px; font-size: clamp(15px, 4.1vw, 16.5px); line-height: 1.28; color: var(--fq-ink); background: var(--fq-paper-hi); border-radius: 2px;
    box-shadow: 0 0 0 1px #12111012, 0 12px 18px -12px #12111099; translate: 0 18px; }
  .cant li:nth-child(odd) { rotate: -1.6deg; margin-right: 14px; } .cant li:nth-child(even) { rotate: 1.4deg; margin-left: 14px; }
  .cant.on li { translate: 0 0; }
  .cant li img { width: 24px; }
  .rail { display: none; }

  /* ── 4 · who: the line, the hands under it reaching for each other, the aside written in their gap ── */
  .who .stage { height: 100svh; min-height: calc(700 * var(--u)); }
  .who-h { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(140 * var(--v)); text-align: center; font-size: calc(30 * var(--u)); line-height: 1.32; }
  .who-h .fq-nw { display: block; }
  /* hands placed from the heading's bottom edge (--hb: the heading is 119 units tall), sleeves at the edges */
  .who .stage { --hb: calc(140 * var(--v) + 119 * var(--u)); }
  .who .hand-him { left: calc(-19 * var(--u)); top: calc(var(--hb) - 2 * var(--u)); width: calc(231.67 * var(--u)); height: calc(229.6 * var(--u)); }
  .who .hand-her { left: calc(182 * var(--u)); top: calc(var(--hb) + 56 * var(--u)); width: calc(242 * var(--u)); height: calc(192 * var(--u)); rotate: 14.82deg; }
  .who-aside { left: calc(36 * var(--u)); top: calc(var(--hb) + 250 * var(--u)); width: calc(330 * var(--u)); font-size: calc(23 * var(--u)); rotate: -3deg; text-align: center; }

  /* ── 5 · how it works ── */
  .how-in { padding: 64px 22px 72px; }
  .step { grid-template-columns: 1fr; row-gap: 10px; padding: 28px 0 30px; }
  .step-n { grid-auto-flow: column; justify-content: start; align-items: end; gap: 12px; }
  .step-n .num { font-size: 42px; }
  .step .fq-text { font-size: 16.5px; line-height: 1.55; }

  /* ── 6 · posters: one at a time, big enough to read, pasted half over each other like a real wall ── */
  .wall-grid { --u: min(calc(100vw / 402), 1.9px); grid-template-columns: minmax(0, calc(292 * var(--u))); justify-content: center; row-gap: 0; padding: 72px 0 96px; }
  .poster { aspect-ratio: auto; min-height: calc(318 * var(--u)); padding: calc(30 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)); }
  .pfoot { padding-top: calc(28 * var(--u)); }
  .poster + .poster { margin-top: calc(8 * var(--u)); }
  .poster:nth-child(odd) { --ox: -34; } .poster:nth-child(even) { --ox: 34; }
  .poster:nth-child(1) { --oy: 0; --py: 34; --pr: 4; } .poster:nth-child(2) { --oy: 0; --py: -40; --pr: -4; }
  .poster:nth-child(3) { --oy: 0; --py: 30; --pr: 5; } .poster:nth-child(4) { --oy: 0; --py: -34; --pr: -5; }
  .poster:nth-child(5) { --oy: 0; --py: 36; --pr: 4; } .poster:nth-child(6) { --oy: 0; --py: -30; --pr: -4; }
  .poster:nth-child(n) { z-index: auto; }
  .pt { font-size: calc(34 * var(--u)); }
  .pt.long { font-size: calc(27 * var(--u)); }
  .pt2 { font-size: calc(27 * var(--u)); margin-top: calc(16 * var(--u)); }
  .psmall { font-size: calc(17 * var(--u)); margin-top: calc(10 * var(--u)); }
  .pmark { font-size: calc(28 * var(--u)); }
  .poster > .tape { --tape-w: calc(86 * var(--u)); --tape-h: calc(25 * var(--u)); }

  /* ── 7 · the last poster: the card, the hands reaching under it ── */
  .cta .stage { height: calc(740 * var(--u)); }
  .cta-card { left: calc(20 * var(--u)); top: calc(64 * var(--u)); width: calc(362 * var(--u)); padding: calc(36 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)); }
  .cta-card .tape { --tape-w: 88px; --tape-h: 24px; }
  .cta-note { font-size: 17px; }
  .cta-h { font-size: calc(36 * var(--u)); margin: calc(12 * var(--u)) 0 calc(24 * var(--u)); }
  /* hands under the card (its bottom sits near 400 units), sleeves at the edges */
  .cta .hand-him { left: calc(-21 * var(--u)); top: calc(403 * var(--u)); width: calc(240 * var(--u)); height: calc(200 * var(--u)); }
  .cta .hand-her { left: calc(168 * var(--u)); top: calc(473 * var(--u)); width: calc(252 * var(--u)); height: calc(200 * var(--u)); rotate: 14.82deg; }
  .foot { padding: 40px 20px calc(44px + env(safe-area-inset-bottom)); }
  .foot-legal { gap: 0 18px; max-width: 30em; }
}

/* short phones: the bar steps aside during the story so the phone can be big enough to read */
@media (max-width: 899px) and (orientation: portrait) and (max-height: 720px) {
  .pin { --bar: calc(16px + env(safe-area-inset-bottom)); --ph: clamp(300px, calc(100svh - 240px), 580px); }
  .chap { top: calc(36px + env(safe-area-inset-top)); }
  .chap .fq-h2 { font-size: clamp(22px, 6.4vw, 27px); }
  .chap .fq-h2.long { font-size: clamp(20px, 5.6vw, 24px); }
  .chap .sub { margin-top: 8px; font-size: 15px; line-height: 1.38; }
  .story[data-step="9"] { --bob: 0px; }
}
/* narrow phones: the bar keeps its label on one line */
@media (max-width: 359px) and (orientation: portrait) {
  .sticky-cta { padding: 0 16px; font-size: 16px; gap: 10px; }
  .sc-note { font-size: 15px; }
}
/* tablets held upright: the phone composition, sized by the height so nothing overlaps and the button stays in view */
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
  .hero .stage, .who .stage { --u: min(calc(100vw / 402), calc(100svh / 870)); --v: var(--u); --m: calc((100vw - 402 * var(--u)) / 2 + 40px); }
  /* the stage is narrower than the screen here, so each arm is lengthened (fingertip fixed, from the measured
     tip positions in the images) until its cut sleeve runs past the screen edge */
  .hero .hand-her, .who .hand-him { margin-left: calc(var(--m) * -1); }
  .hero .hand-him, .who .hand-her { margin-left: var(--m); }
}

/* a phone held sideways: the wide composition, sized by the height so the button stays on screen;
   the stage is then narrower than the window, so each sleeve is pushed past the window's edge */
@media (orientation: landscape) and (max-height: 500px) {
  .hero .stage { --u: min(calc(100vw / 1920), calc(100svh / 1037)); --m: calc((100vw - 1920 * var(--u)) / 2 + 24px); }
  .hero .hand-her { left: calc(-180 * var(--u) - var(--m)); }
  .hero .hand-him { left: calc(1150 * var(--u) + var(--m)); }
}

/* a short screen (a phone held sideways) has no room for the step labels under the words */
@media (max-height: 560px) { .rail { display: none; } }

/* ═════════ NO JAVASCRIPT: the story reads top to bottom instead of pinning ═════════ */
html:not(.fq-js) .story { height: auto; }
html:not(.fq-js) .pin { position: relative; height: auto; display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 96px var(--gutter); }
html:not(.fq-js) .pin > * { position: relative; inset: auto; left: auto; top: auto; width: auto; max-width: 34rem; }
html:not(.fq-js) .chap { order: 0; height: auto; text-align: left; align-items: flex-start; }
html:not(.fq-js) .chap .cant-m { display: block; }
html:not(.fq-js) .phone { order: 1; width: min(300px, 76vw); height: auto; }
html:not(.fq-js) .story-night, html:not(.fq-js) .side, html:not(.fq-js) .rail, html:not(.fq-js) .dashes, html:not(.fq-js) .close-cta { display: none; }
html:not(.fq-js) .chap.close .close-cta { display: inline-flex; }

/* ═════════ PAGE TRANSITIONS: to and from the legal pages, the page lifts off like paper ═════════ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out var(--m-out) cubic-bezier(.4, .14, 1, 1) both; }
::view-transition-new(root) { animation: vt-in var(--m-in) var(--ease-arrive) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px) rotate(-.4deg); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(22px) rotate(.5deg); } }

/* ═════════ REDUCED MOTION: everything in its final place ═════════ */
@media (prefers-reduced-motion: reduce) {
  .fq-js .hero-slip, .fq-js .hero-slip .tape, .fq-js .hero .logo, .fq-js .hero .hand-her, .fq-js .hero .hand-him, .fq-js .hero-hearts, .fq-js .hero-swoosh, .fq-js .hero-cta,
  .fq-js .who .hand, .fq-js .cta .hand, .tk-track, .scroll-cue::after { animation: none !important; }
  .fq-js .wall .slip { opacity: 1 !important; scale: 1 !important; transition: none !important; rotate: var(--r) !important; }
  .fq-js .wall-note { opacity: 1 !important; animation: none !important; }
  .fq-js .print .print-in img { filter: none !important; opacity: 1 !important; transition: none !important; }
  .wall { height: auto; } .wall-pin { position: relative; }
  .wall-h, .cta-card { scale: 1 !important; }
  .who .hand, .cta .hand, .hero .hand, .hero-slip { translate: none !important; }
  .poster { --pe: 1 !important; transform: none !important; }
  .fq-js .wall .slip { translate: none !important; }
  .chap > *, .scr, .side, .cant li, .an, .pcard, .phone, .story-night, .read-scr .r-in, .sbar, .view { transition: none !important; }
  .sticky-cta { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .pill svg, .sticky-cta svg, .fq-btn svg { animation: none !important; }
}