/* NESTWORTH brand world — LIGHT (near-white magenta-cast ground, white tiles, deep magenta ink,
   magenta-orchid accent, bright warm gold).
   Structure forked from ownable/assets/nest-v2.css. Only the token layer and the wordmark
   block are genuinely new; the mechanics below them are the approved quiz-funnel-design
   system and should not be rewritten per brand.

   ── THE PALETTE WAS MEASURED, NOT PICKED ─────────────────────────────────────────────────
   The brand world is MAGENTA-ORCHID with a bright warm gold, and it was chosen from a render,
   not from a swatch.

   History, because it matters for anyone regenerating art. The first pass sampled the original
   Nestworth home-equity artwork (nestworth-preview.vercel.app/assets/brand/hero-home.jpg) and
   produced a violet-plum-indigo world at hues 318-324 and 252. The story frames were then built
   as a flipbook chain, and the chain drifted steadily toward magenta, about 8 RGB per frame, so
   that frame 8 no longer matched frame 1. That was raised as a defect. Austin looked at it and
   preferred the drifted end: "I actually like the more magenta color, the one that has the
   brighter gold in the image. I actually like that color a lot better." So the DRIFT ENDPOINT
   became the brand, and every token below is sampled from that frame (story-src/f8.png).

   Direct pixel samples from f8:
     sky band upper #752C7C    sky band mid  #89428E    sky band lower #872379
     cloud left     #DC8ED8    cloud right   #E19BB4    tree           #8F2E96
     ground         #7B459B    house wall    #A54D9A    house roof     #5C2671
     moon core      #FCEA91    egg           #FCD794    lit window     #F9D7B9
   Hue clustering across the whole frame returns 280-320 degrees, centred near 296: a saturated
   magenta-orchid, warmer and more saturated than the violet it grew out of. The gold is the
   other half of the change and is markedly brighter than the old #E8AE3B.

   Every token below is generated from those measured anchors and then contrast-checked:
     ink            #2F1533  14.33:1 on the ground
     magenta        #722277   8.27:1 on the ground   (the CTA and the accent)
     magenta-deep   #65206A   9.29:1                 (small uppercase type)
     orchid         #964A96   4.92:1                 (chip glyphs, passes AA)
     orchid-soft    #D897D3  lands within 9 RGB of the measured cloud #DC8ED8, which is the
                             check that the derivation stayed faithful to the picture.

   Ground: Austin asked for a WHITE background carrying the shade, the way Renta is white with a
   coral cast and ReliefMax is white with a green cast. The shipped #F3E1F8 is not a guess: it is
   the MEAN measured top edge of all ten story frames, which puts every frame within deviation 4
   of the page. Contrast after the change: ink 13.27:1, magenta CTA 7.66:1, magenta-deep 8.61:1,
   orchid chip 4.56:1 - all pass.

   🔴 The stage image blends via its OWN top band, and the PAGE is tuned to the art rather than
      the other way round. NO CSS overlay may sit on the image and the stage is never cropped:
      an overlay covers the top of the picture, which was rejected on Ownable and restated by
      Austin on 2026-08-31. Match the ground to the art, or regenerate the art. Never cover it,
      never crop it. See the top-edge recipe in README.md before generating any frame. */

:root {
  /* 🔴 THE GROUND IS TIED TO THE ART. If the story frames are regenerated, re-measure their top
     edges and re-centre this token, then re-check the contrast figures above. Do NOT reach for a
     CSS gradient over the stage instead: that covers the picture. */
  --nw-ground:     #F3E1F8;   /* near-white, magenta cast. MEASURED: the mean top edge of
                                 all 10 story frames, so every frame joins the page within
                                 deviation 4. Re-measure and re-centre if the art changes. */
  --nw-ground-hi:  #FCF6FD;   /* top radial glow */
  --nw-tint:       #F4E1F6;   /* recap and interstitial cards */
  --nw-surface:    #FFFFFF;   /* tiles and inputs */
  --nw-line:       #E8D2EC;   /* tile borders */

  --nw-ink:        #2F1533;   /* deep magenta-purple, from the measured roof */
  --nw-magenta:    #722277;   /* THE accent. CTA fill, selected borders. */
  --nw-magenta-lo: #5D1862;   /* hover / gradient far stop */
  --nw-magenta-dp: #65206A;   /* small uppercase type on the light ground */
  --nw-orchid:     #964A96;   /* mid orchid: chip glyphs */
  --nw-orchid-so:  #D897D3;   /* the measured cloud: soft fills */
  --nw-plum:       #6C2C7D;   /* the measured upper sky band */
  --nw-gold:       #FBD974;   /* the moon and the eggs. Brighter than the old gold. */
  --nw-gold-hi:    #FCEA91;   /* MEASURED moon core: the lit end of the gold gradient */
  --nw-gold-lo:    #F5C445;   /* the deep end of the gold gradient */
  --nw-band:       #4A1550;   /* deep magenta header band, so the white wordmark is legible */

  --ff-radius: 14px;

  --nw-chip-bg:   rgba(150, 74, 150, .13);
  --nw-chip-line: rgba(114, 34, 119, .26);
  --nw-chip-ink:  #7A2E7E;
}

* { box-sizing: border-box; }

html { background: var(--nw-ground); }

body {
  margin: 0;
  min-height: 100svh;                 /* 100vh overflows under mobile browser chrome */
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 50% -160px, var(--nw-ground-hi) 0%, var(--nw-ground) 55%) fixed,
    var(--nw-ground);
  color: var(--nw-ink);
  font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 100svh; }

img[src=""] { display: none; }        /* empty src renders a broken-image icon otherwise */

/* ---------------- header ---------------- */
/* THE HEADER MATCHES THE PAGE. Austin, 2026-08-31: "the header of the Magenta one needs to be
   the same colour as the rest of the LP. I don't like the dark header."

   There was a deep magenta band here, added so a WHITE wordmark could be legible after he asked
   for "Nest" in white. Removing the band removes that possibility: measured on the page ground
   #F3E1F8, white is 1.24:1 and bright gold is 1.11:1 — both illegible. So with a light header the
   wordmark has to be dark, and it is back to ink "Nest" + magenta "worth". If the white wordmark
   is ever wanted again, the band has to come back with it; the two are a package. */
.ff-head {
  order: 0;
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--nw-ground);        /* literally the page colour, not a tint of it */
  border-bottom: 0;                    /* no rule, so the header does not read as a separate bar */
}
.ff-head-brand { display: flex; align-items: center; gap: 8px; margin-right: auto; }

/* THE WORDMARK. Austin: "use the same style of font that you're using on Renta."
   Measured on production at tryrenta.com 2026-08-31 with getBoundingClientRect and
   getComputedStyle, never eyeballed: Plus Jakarta Sans, weight 800, 22px, letter-spacing
   -0.55px (Tailwind tracking-tight), colour #1C2A22. Same recipe here, in Nestworth ink,
   with the magenta accent on "worth" because that is the word carrying the promise. */
.ff-wordmark {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.55px;
  color: var(--nw-ink);                /* 13.27:1 on the page ground */
  white-space: nowrap;
}
.ff-wordmark-accent { color: var(--nw-magenta); }   /* 7.66:1 */

.ff-head-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(114, 34, 119, .09);
  border: 1px solid rgba(114, 34, 119, .22);
  font-size: 11.5px; font-weight: 600; color: var(--nw-magenta-dp);
  white-space: nowrap;
}
.ff-exit {
  background: none; border: 0; color: rgba(47, 21, 51, .55);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.ff-exit:hover { color: var(--nw-ink); }

.ff-lock {
  width: 11px; height: 11px; flex: none; display: inline-block;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
}

/* ---------------- main + progress ---------------- */
.ff-main {
  order: 1;
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 18px 16px 8px;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
}
.ffbar-wrap { margin-bottom: 20px; }
.ffbar {
  height: 6px; border-radius: 999px;
  background: rgba(47, 21, 51, .13);
  overflow: hidden;
}
/* The bar runs the story's own gradient: indigo sky into plum cloud into mauve highlight. */
.ffbar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--nw-plum) 0%, var(--nw-magenta) 55%, var(--nw-orchid-so) 100%);
  transition: width .3s ease;
}
.ffbar-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 7px;
}
.ffbar-step {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--nw-magenta-dp);
}
.ffbar-sec {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: rgba(47, 21, 51, .60);
}

/* ---------------- step ---------------- */
@keyframes ffStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ff-anim { animation: ffStepIn .2s ease; }

.ff-eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--nw-magenta-dp); margin-bottom: 8px;
}
.ff-q {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 25px; line-height: 1.22; font-weight: 800; letter-spacing: -0.02em;
  color: var(--nw-ink); margin: 0 0 8px;
}
.ff-sub { font-size: 14.5px; line-height: 1.45; color: rgba(47, 21, 51, .72); margin: 0 0 16px; }
.ff-promise { font-size: 13px; color: rgba(47, 21, 51, .58); margin: -6px 0 16px; }
.ff-why {
  font-size: 13px; line-height: 1.5; color: rgba(47, 21, 51, .74);
  background: rgba(150, 74, 150, .08);
  border-left: 2px solid var(--nw-magenta);
  padding: 10px 12px; border-radius: 0 8px 8px 0; margin: 0 0 16px;
}

/* ---------------- option tiles ---------------- */
.ff-opts { display: flex; flex-direction: column; gap: 10px; }
.ff-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 68px; padding: 12px 14px;
  text-align: left; cursor: pointer;
  background: var(--nw-surface);
  color: var(--nw-ink);
  border: 1.5px solid var(--nw-line);
  border-radius: var(--ff-radius);
  box-shadow: 0 4px 16px -8px rgba(47, 21, 51, .16);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  font-family: inherit;
}
.ff-opt:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(47, 21, 51, .24); }
.ff-opt.is-sel {
  border-color: var(--nw-gold-lo);
  box-shadow: 0 0 0 3px rgba(252, 234, 145, .70), 0 8px 26px -8px rgba(245, 196, 69, .75);
}
.ff-opt.is-sel { animation: ffTileLit .45s ease-out; }
.ff-chip {
  width: 42px; height: 42px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--nw-chip-bg);
  border: 1px solid var(--nw-chip-line);
  color: var(--nw-chip-ink);
}
.ff-chip .material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 21px; line-height: 1; font-weight: 400;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  letter-spacing: normal; white-space: nowrap; direction: ltr;
}
/* Selected inverts the chip: plum fill, light glyph. */
.ff-opt.is-sel .ff-chip,
.ff-opt-sq.is-sel .ff-chip {
  background: linear-gradient(180deg, var(--nw-gold-hi), var(--nw-gold-lo));
  border-color: var(--nw-gold-lo);
  color: var(--nw-ink);
  box-shadow: 0 0 14px rgba(252, 234, 145, .9);
}
.ff-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ff-opt-label { font-size: 15.5px; font-weight: 700; color: var(--nw-ink); }
.ff-opt-explain { font-size: 12.8px; line-height: 1.35; color: rgba(47, 21, 51, .66); }
.ff-tag {
  margin-left: auto; flex: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--nw-magenta-dp); background: rgba(216, 151, 211, .34);
  border-radius: 999px; padding: 4px 8px;
}

/* Square grid: used when a step has few, short options. Icon above label, two columns. */
.ff-opts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* An odd count leaves an orphan square; stretch the last one across both columns. */
.ff-opts-grid .ff-opt-sq:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 84px; }
.ff-opt-sq {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 116px; padding: 14px 10px;
  text-align: center; cursor: pointer;
  background: var(--nw-surface); color: var(--nw-ink);
  border: 1.5px solid var(--nw-line);
  border-radius: 16px;
  box-shadow: 0 4px 16px -8px rgba(47, 21, 51, .14);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  font-family: inherit;
}
.ff-opt-sq:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(47, 21, 51, .20); }
.ff-opt-sq.is-sel {
  border-color: var(--nw-gold-lo);
  box-shadow: 0 0 0 3px rgba(252, 234, 145, .70), 0 8px 26px -8px rgba(245, 196, 69, .75);
}
.ff-opt-sq.is-sel { animation: ffTileLit .45s ease-out; }
/* The tile lights up like a window in the diorama: the gold halo blooms outward and settles. */
@keyframes ffTileLit {
  0%   { box-shadow: 0 0 0 0 rgba(252, 234, 145, .95), 0 8px 26px -8px rgba(245, 196, 69, .35); }
  60%  { box-shadow: 0 0 0 14px rgba(252, 234, 145, 0), 0 8px 26px -8px rgba(245, 196, 69, .85); }
  100% { box-shadow: 0 0 0 3px rgba(252, 234, 145, .70), 0 8px 26px -8px rgba(245, 196, 69, .75); }
}
.ff-opt-sq .ff-chip { width: 46px; height: 46px; }
.ff-opt-sq .ff-chip .material-symbols-outlined { font-size: 23px; }
.ff-opt-sq .ff-opt-label { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.ff-opt-sq .ff-tag { margin: 0; font-size: 9.5px; padding: 3px 7px; }

/* ---------------- inputs ---------------- */
.ff-field { display: flex; flex-direction: column; gap: 10px; }
.ff-input {
  width: 100%; height: 54px; padding: 0 15px;
  border-radius: var(--ff-radius);
  border: 1.5px solid var(--nw-line);
  background: var(--nw-surface); color: var(--nw-ink);
  font-size: 16px; font-family: inherit;   /* 16px stops iOS zoom-on-focus */
}
.ff-input::placeholder { color: rgba(47, 21, 51, .42); }
.ff-input:focus { outline: none; border-color: var(--nw-gold-lo); box-shadow: 0 0 0 3px rgba(252, 234, 145, .65); }
.ff-echo { font-size: 12.5px; color: var(--nw-magenta-dp); margin: 0; }
.ff-err { font-size: 12.5px; color: #B3402E; margin: 0; }

/* Global input styling hijacks checkboxes: the radius makes them circles and a forced
   background erases the tick. Revert explicitly. */
.ff-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; }
.ff-consent input[type="checkbox"] {
  all: revert; appearance: auto; -webkit-appearance: checkbox;
  width: 19px; height: 19px; flex: none; margin-top: 2px;
  accent-color: var(--nw-gold-lo);
}
.ff-consent span { font-size: 11.8px; line-height: 1.5; color: rgba(47, 21, 51, .72); }
.ff-consent strong { color: var(--nw-ink); }

/* ---------------- CTA: THE GOLD BUTTON ----------------
   Austin, 2026-08-31: the buttons should carry the gold of the eggs and the lit windows, and
   should ILLUMINATE when clicked. So the CTA is a gold gradient running from the measured moon
   core #FCEA91 down to a deeper #F5C445, sitting in a permanent soft gold halo, exactly like
   the eggs glowing in their nest.

   Text is INK, never white: measured, ink on the darkest gradient stop is 10.08:1 while white
   on the same gold is 1.63:1 and would fail outright. Gold is a light surface and must take
   dark type. */
.ff-cta {
  position: relative; overflow: hidden;
  width: 100%; height: 54px; margin-top: 16px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--nw-gold-hi) 0%, var(--nw-gold) 55%, var(--nw-gold-lo) 100%);
  color: var(--nw-ink);
  font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 10px 26px -12px rgba(245, 196, 69, .95),
              0 0 0 0 rgba(252, 234, 145, .55);
  transition: transform .14s ease, box-shadow .22s ease, filter .14s ease;
}
.ff-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 16px 34px -12px rgba(245, 196, 69, 1),
              0 0 0 6px rgba(252, 234, 145, .28);
}
/* THE ILLUMINATION. On press the button blooms: the halo expands and fades like a lamp coming
   on, and a soft highlight sweeps across the face. Driven by a class the engine adds on click
   so it fires on touch as well as mouse, and it is removed when the animation ends so it can
   fire again. */
.ff-cta:active { transform: translateY(0) scale(.995); }
.ff-cta.is-lit { animation: ffLampOn .5s ease-out; }
.ff-cta.is-lit::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--lit-x, 50%) 50%,
              rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 60%);
  animation: ffLampSweep .5s ease-out forwards;
  pointer-events: none;
}
@keyframes ffLampOn {
  0%   { box-shadow: 0 10px 26px -12px rgba(245,196,69,.95), 0 0 0 0 rgba(252,234,145,.85); }
  55%  { box-shadow: 0 10px 26px -12px rgba(245,196,69,1),   0 0 0 16px rgba(252,234,145,0); }
  100% { box-shadow: 0 10px 26px -12px rgba(245,196,69,.95), 0 0 0 0 rgba(252,234,145,0); }
}
@keyframes ffLampSweep { from { opacity: 1; } to { opacity: 0; } }
a.ff-cta-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.ff-back {
  display: block; margin: 14px auto 0;
  background: none; border: 0; cursor: pointer;
  color: rgba(47, 21, 51, .58); font-size: 13.5px; font-family: inherit;
}
.ff-back:hover { color: var(--nw-ink); }

/* ---------------- interstitial ---------------- */
.ff-info {
  background: var(--nw-tint);
  border: 1px solid rgba(114, 34, 119, .18);
  border-radius: var(--ff-radius); padding: 16px;
}
.ff-info-badge {
  display: inline-block; margin-bottom: 10px; padding: 5px 10px; border-radius: 999px;
  background: rgba(114, 34, 119, .13); color: var(--nw-magenta-dp);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ff-info-list { margin: 0; padding-left: 18px; }
.ff-info-list li { font-size: 13.8px; line-height: 1.55; color: rgba(47, 21, 51, .88); margin-bottom: 9px; }
.ff-info-src { margin: 6px 0 0; font-size: 11.5px; color: rgba(47, 21, 51, .52); }

/* ---------------- analyze theater ----------------
   The prop is a lender's underwriting slip: an indigo header bar with a live LED, four
   lines printing with dotted leaders, then a torn tear-off edge. Same mechanic as the PGP
   kitchen chit, dressed for a lending desk. */
.ff-ticket {
  background: var(--nw-surface); color: var(--nw-ink);
  border-radius: 10px 10px 0 0; padding: 0 0 6px;
  box-shadow: 0 12px 30px -14px rgba(47, 21, 51, .24);
  position: relative; overflow: hidden;
}
.ff-ticket-head {
  display: flex; align-items: center; gap: 8px;
  background: var(--nw-ink); color: #FFFFFF;
  padding: 9px 13px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
}
.ff-led {
  width: 8px; height: 8px; border-radius: 999px; background: var(--nw-gold);
  animation: ffBlink 1s steps(2, start) infinite;
}
@keyframes ffBlink { 50% { opacity: .25; } }
.ff-ticket-lines { list-style: none; margin: 0; padding: 12px 14px 4px; }
.ff-ticket-line {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--nw-ink);
  opacity: 0; transform: translateY(6px);
  margin-bottom: 10px;
}
.ff-ticket-line.is-print { opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease; }
.ff-ticket-dots { flex: 1 1 auto; border-bottom: 1.5px dotted rgba(47, 21, 51, .32); transform: translateY(-3px); }
.ff-ticket-ok { font-weight: 800; color: var(--nw-orchid-so); opacity: 0; transition: opacity .2s ease; }
.ff-ticket-line.is-done .ff-ticket-ok { opacity: 1; color: var(--nw-magenta); }
.ff-ticket-tear {
  height: 10px;
  background:
    linear-gradient(135deg, var(--nw-surface) 50%, transparent 50%) 0 0 / 12px 12px repeat-x,
    linear-gradient(225deg, var(--nw-surface) 50%, transparent 50%) 0 0 / 12px 12px repeat-x;
}
.ff-loadbar {
  height: 8px; margin-top: 16px; border-radius: 999px;
  background: rgba(47, 21, 51, .13); overflow: hidden;
}
.ff-loadbar span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--nw-plum), var(--nw-magenta), var(--nw-orchid-so));
  transition: width .9s ease;
}

/* ---------------- recap ---------------- */
.ff-recap {
  background: var(--nw-tint);
  border: 1px solid rgba(114, 34, 119, .18);
  border-radius: var(--ff-radius); padding: 6px 14px;
}
.ff-recap-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid rgba(47, 21, 51, .10);
}
.ff-recap-row:last-child { border-bottom: 0; }
.ff-recap-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(47, 21, 51, .55); flex: 1 1 auto;
}
.ff-recap-v { font-size: 13.5px; font-weight: 600; color: var(--nw-ink); text-align: right; flex: 0 1 auto; }

/* ---------------- finish spinner ---------------- */
.ff-thanks { text-align: center; }
.ff-spin {
  width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 999px;
  border: 4px solid rgba(47, 21, 51, .16);
  border-top-color: var(--nw-magenta);
  animation: ffSpin .8s linear infinite;
}
@keyframes ffSpin { to { transform: rotate(360deg); } }
.ff-legal-inline { margin-top: 14px; }

/* ---------------- exit popup ---------------- */
.ff-exitpop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(47, 21, 51, .40);
}
.ff-exitcard {
  position: relative;
  width: 100%; max-width: 380px; padding: 22px;
  background: #FFFFFF; border: 1px solid var(--nw-line);
  border-radius: 16px;
}
.ff-exitcard-x { position: absolute; top: 10px; right: 12px; }
.ff-exitcard h2 {
  font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 800; font-size: 20px;
  letter-spacing: -0.02em; margin: 0 0 8px; color: var(--nw-ink);
}
.ff-exitcard p { font-size: 13.5px; line-height: 1.5; color: rgba(47, 21, 51, .75); margin: 0; }

/* ---------------- footer ---------------- */
.ff-foot {
  order: 3;
  width: 100%; max-width: 560px; margin: 10px auto 0;
  padding: 16px 16px 22px;
}
.ff-foot-line {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 8px; font-size: 11.5px; font-weight: 600; color: rgba(47, 21, 51, .68);
}
.ff-legal { margin: 0; font-size: 10.8px; line-height: 1.5; color: rgba(47, 21, 51, .46); }

/* ---------------- the 21:9 mobile stage ----------------
   Lives IN the flex flow with order, and margin-top:auto so it owns whatever space is left
   under the content. Never behind the tiles, never below the fold. Desktop never shows it. */
/* 🔴 THE STAGE IS NEVER CROPPED. The whole frame is always shown.
   Ownable declared a fixed aspect-ratio on the box and used object-fit:cover, because its
   shipped art was 16:9 in a 21:9 box and had to be cropped to fit. Our art is generated at a
   true 21:9, so a declared ratio can only ever disagree with the asset by a rounding sliver
   and eat the top of the picture (measured: 0.1px of the top was being cut). Letting the
   image set its own height removes the failure mode completely: no overflow, no object-fit,
   nothing to crop against, and it stays correct if the art's ratio ever changes. */
.ff-scene {
  order: 2;
  position: relative;
  margin-top: auto;
  width: 100%;
  pointer-events: none;
}
.ff-scene img { display: block; width: 100%; height: auto; }

@media (min-width: 768px) {
  .ff-scene { display: none !important; }
  .ff-q { font-size: 30px; }
}

@media (max-width: 767px) {
  /* Compact the vertical rhythm so the stage keeps a real band on short screens. */
  .ff-main { padding-top: 14px; }
  .ff-q { font-size: 24px; }
  .ff-opt { min-height: 62px; padding: 10px 12px; }
  .ff-opts { gap: 8px; }
  .ff-opt-sq { min-height: 100px; }
  /* NOTE: no reserved margin under the footer. The stage is IN the flex flow (header 0,
     main 1, scene 2, footer 3) with margin-top:auto, so the footer already clears it
     structurally. Adding the band as well double-counts and leaves dead scroll. */
  .ff-foot { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Trust line: pinned to the bottom of the content zone, floating just above the stage.
   Same position on every step, quiet enough not to compete with the answers.
   Specificity beats .ff-foot-line's own margin. */
.ff-main .ff-trust-inline {
  margin: auto 0 0;
  padding: 26px 0 6px;
  justify-content: center;
  color: rgba(47, 21, 51, .55);
  font-weight: 600;
}