/* ============================================================================
   PROOVD.CSS — design tokens + section modes + element identity
   Source of truth for VALUES: this file (+ proovd-motion.js for motion).
   The "Proovd Design System" doc is the decision layer — it says where to
   use what and never restates a value. Section numbers below (§1, §4,
   §7, §9…) map to that document.

   Architecture — how the "section combinations" work:
   Every section mode (.mode-none / .mode-dark / .mode-light / .mode-drawer)
   sets a group of semantic SLOTS (--mode-title, --mode-body, --btn1-*, …).
   Components (.btn--primary, a, .icon, h1…) only ever read the slots.
   So the same markup —  <button class="btn btn--primary">  — is automatically
   correct in any section. Generators never pick colors; they pick a mode.

   Lines marked  DERIVED:  or  UNSPECIFIED:  are decisions the source doc did
   not make — see the design doc's appendix ("Decisions the kit made") before
   changing them.
   ========================================================================= */


/* ─────────────────────────────────────────────────────────────── §3 FONT
   Satoshi is load-bearing. Self-hosted @font-face is the required setup.
   Put the font files next to this stylesheet in ./fonts/ (download the
   Satoshi family from Fontshare and self-host — the Fontshare <link> is
   allowed only for throwaway prototypes). */

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
/* If you self-host static weights instead of the variable file, replace the
   two blocks above with one @font-face per weight (400/500/700/900). */

/* Shared accessibility utility. Content marked `sr-only` must remain in the
   accessibility tree without becoming a visible flex/grid item. The Founder
   Flow code screen relies on this for each box's spoken label and its group
   description; without it those words leak into the visual composition. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* During an internal Founder Flow handoff, a destination can briefly wait for
   its record before mounting its actual stage. The previous page has already
   left, so exposing that generic fallback would create a fake extra screen in
   the choreography. FlowPage removes this guard before the destination paints.
   Direct visits are unaffected and still show their honest loading state. */
html.ff-transitioning .state-panel {
  visibility: hidden;
}


/* ────────────────────────────────────────────────────────── §1 RAW PALETTE
   Raw values live here and ONLY here. Components must read slots or these
   vars — never hex literals. */

:root {
  /* brand core */
  --brand:        #41ED98;
  --white:        #FAFAFA;
  --surface:      #FFFFFF;   /* pure-white component fill (inputs, toggle track,
                                modal) — distinct from the #FAFAFA page bg */
  --dark:         #013F17;   /* Dark Green — section fill */
  --darker:       #012D10;   /* Darker Green — headers on white, tab drawers */
  --brand-5:      rgba(65, 237, 152, 0.05);  /* selection / loading / live */
  --brand-15:     rgba(65, 237, 152, 0.15);  /* graph highlight */
  --brand-0:      rgba(65, 237, 152, 0);     /* tween-safe transparent brand */

  /* supporting greens */
  --mint:         #E9FFE1;   /* light-green section fill; text on brand/dark */
  --leaf:         #D2FBC2;   /* links on dark; placeholder color */
  --sage:         #95C79D;   /* icons on light green; placeholder color */
  --moss:         #669370;   /* body on light green */

  /* small-section (stats) palette */
  --stat-mint-bg:   #EAF7EE;
  --stat-mint-text: #5BAA78;

  /* accents (toasts) */
  --accent-blue:   #DEFAFC;
  --accent-yellow: #F7FF9E;
  --ink-50:        rgba(1, 45, 16, 0.5);   /* #012D10 at 50% — toast body */

  /* greys */
  --grey:          #A2AFA8;  /* darkest grey — inputs at rest */
  --grey-light:    #F1F3F2;
  --grey-lightest: #F7F7F7;  /* visual section background */

  /* graph tokens (§1) — charts read these, pages never restyle them */
  --graph-1:        var(--brand);   /* all single-color graphs */
  --graph-2:        #006D27;        /* second color in two-color graphs */
  --graph-blue:     #10E9FC;
  --graph-yellow:   #FFFC56;
  --graph-highlight:var(--brand-15);/* under-line-graph fills */
  --graph-text:     var(--grey);

  /* placeholder extra */
  --sky:           #CAFCFF;
}


/* ───────────────────────────────────────────── §2 BORDER + RADIUS TOKENS
   Desktop defaults; phone values via the ≤600px query (§8 breakpoints).

   OWNER RULING 2026-08-19 (supersedes DNA §2), recorded in CLAUDE.md:
   radius is 2px on BOTH postures. Was 1px desktop / 0.5px phone, and the
   comment on it read "sharp. everywhere." — deleted rather than left
   describing a value that is no longer here.

   The border widths still halve on a phone and the radius deliberately does
   NOT: "on both postures" is the whole content of that clause, and the
   supplied reference declares --br:2px in its own ≤600px override beside a
   --bw that halves. The brief's derivation table halved the radius too; the
   ruling and the reference are what this follows. */

:root {
  --bw:      2px;   /* outside border (cards, inputs, tags, calendar…) */
  --bw-btn:  2px;   /* outline buttons — USER REVISION: was 4px */
  --radius:  2px;   /* OWNER RULING — see above */
}
@media (max-width: 600px) {
  :root { --bw: 1px; --bw-btn: 1px; --radius: 2px; }  /* radius does not halve */
}


/* ─────────────────────────────────────── §4.5 + §9 SPACING & SIZING TOKENS
   The shared scale, authored in rem (§9: px values are reference at 16px
   root). Fixed px is legal only for borders/hairlines and hard minimums
   (44px touch targets). */

:root {
  --sp-4:   0.25rem;  --sp-8:   0.5rem;   --sp-12:  0.75rem;
  --sp-16:  1rem;     --sp-24:  1.5rem;   --sp-32:  2rem;
  --sp-48:  3rem;     --sp-64:  4rem;     --sp-80:  5rem;
  --sp-96:  6rem;     --sp-120: 7.5rem;   --sp-160: 10rem;

  /* fluid type recipes (§9) — both bounds always ship */
  --fs-hero: clamp(3.5rem, 10vw, 7.5rem);      /* hero display */
  --fs-h2:   clamp(1.75rem, 4.5vw, 3.25rem);   /* section headings */
  --fs-num:  clamp(2.5rem, 6vw, 4.5rem);       /* hero numbers, done-moments */
  --fs-step: clamp(1.625rem, 4vw, 2.5rem);     /* flow step titles */
  --fs-body: 1.125rem;                          /* body: 1–1.25rem, never vw */
  --fs-btn:  1rem;                              /* button labels: 1–1.125rem */

  /* layout */
  --wrap:        min(90vw, 1600px);
  --gutter:      clamp(1.5rem, 6vw, 6rem);     /* section inline gutters */
  --pad-section: clamp(2.5rem, 6vw, 5rem);     /* filled-section padding */
  --measure:     65ch;
  --touch:       44px;                          /* hard device minimum */
}


/* ════════════════════════════════════════════ §1 SECTION MODES (the slots)
   :root carries the NO-FILL mode — text breathing on the #FAFAFA page —
   so unwrapped content is already correct. .mode-none is an explicit alias.

   Button slot naming:
     --btn1-*  primary tier (filled)         --btnX-h*  its hover state
     --btn2-*  secondary tier (border-only)
     --btn3-*  tertiary tier (plain text)
   In the no-fill mode the two listed variants swap on hover (§1: "the other
   variant becomes its hover state"). */

:root, .mode-none {
  --mode-bg:    transparent;
  --mode-title: var(--darker);         /* header #012D10 */
  --mode-body:  var(--dark);           /* text   #013F17 */
  --mode-link:  var(--brand);          /* UNSPECIFIED: no-fill link color isn't
                                          in the doc; defaulted to brand. */
  --mode-icon:  var(--dark);           /* UNSPECIFIED: defaulted to body. */

  /* variant 1 — brand fill */
  --btn1-bg:      var(--brand);
  --btn1-text:    var(--white);        /* OWNER RULING 2026-08-19 (supersedes
                                          DNA §1, which called brand fill →
                                          #E9FFE1 an absolute rule): brand
                                          fill takes #FAFAFA. Recorded in
                                          CLAUDE.md and in tech-stack §3.6.
                                          Every brand fill in this file moves
                                          together — see the §2 note. */
  --btn1-border:  var(--brand);
  --btn1-hbg:     var(--brand-0);      /* hover = variant 2 */
  --btn1-htext:   var(--brand);
  --btn1-hborder: var(--brand);

  /* variant 2 — brand border, no fill */
  --btn2-text:    var(--brand);
  --btn2-border:  var(--brand);
  --btn2-hbg:     var(--brand);        /* hover = variant 1 */
  --btn2-htext:   var(--white);        /* that hover IS a brand fill */
  --btn2-hborder: var(--brand);

  --btn3-text:    var(--darker);       /* §7.1 tertiary: plain #012D10 bold */
}

/* Dark Green section — §1 "Dark Green: #013F17" */
.mode-dark {
  --mode-bg:    var(--dark);
  --mode-title: var(--white);
  --mode-body:  var(--mint);
  --mode-link:  var(--leaf);
  --mode-icon:  var(--mint);

  --btn1-bg:      var(--white);
  --btn1-text:    var(--dark);         /* KEPT. This is a WHITE fill, not a
                                          brand one, so the ruling does not
                                          reach it — and #013F17 on #FAFAFA
                                          (11.7:1) is the one high-contrast
                                          primary in the system. Considered
                                          and left, so the next reader knows
                                          it was a decision. */
  --btn1-border:  var(--white);
  --btn1-hbg:     var(--brand);        /* the hover IS a brand fill, so the
                                          ruling reaches the hover text. The
                                          comment that stood here recorded the
                                          kit "correcting" the design doc from
                                          #FAFAFA to #E9FFE1; the ruling puts
                                          the doc's own value back. */
  --btn1-htext:   var(--white);
  --btn1-hborder: var(--brand);

  /* DERIVED: dark sections list only one button, and the hard rules forbid
     brand-on-dark-green, so the universal §7.1 brand-border secondary can't
     appear here. This white ghost mirrors the variant-swap logic. Prefer
     descending to tertiary when possible; delete these four lines to forbid
     secondaries on dark entirely. */
  --btn2-text:    var(--white);
  --btn2-border:  var(--white);
  --btn2-hbg:     var(--white);
  --btn2-htext:   var(--dark);
  --btn2-hborder: var(--white);

  --btn3-text:    var(--white);        /* DERIVED: §7.1's #012D10 is the
                                          light-background value. */
}

/* Light green section — §1 "Light green: #E9FFE1" */
.mode-light {
  --mode-bg:    var(--mint);
  --mode-title: var(--dark);
  --mode-body:  var(--moss);
  --mode-link:  var(--brand);
  --mode-icon:  var(--sage);           /* small icons: use .icon--sm → brand */

  --btn1-bg:      var(--dark);
  --btn1-text:    var(--white);        /* a DARK-green fill, not a brand one,
                                          so the ruling does not reach it —
                                          this one moves on the brief's own
                                          product direction. Not a contrast
                                          regression either way: #FAFAFA on
                                          #013F17 is 11.7:1 against the
                                          #E9FFE1 it replaces at 11.5:1. */
  --btn1-border:  var(--dark);
  --btn1-hbg:     var(--brand);        /* the hover IS a brand fill */
  --btn1-htext:   var(--white);
  --btn1-hborder: var(--brand);

  --btn2-text:    var(--brand);        /* §7.1 universal secondary */
  --btn2-border:  var(--brand);
  --btn2-hbg:     var(--brand);
  --btn2-htext:   var(--white);        /* that hover IS a brand fill */
  --btn2-hborder: var(--brand);

  --btn3-text:    var(--darker);
}

/* Darker Green — §1: tab drawers, not sections */
.mode-drawer {
  --mode-bg:       var(--darker);
  --mode-title:    var(--mint);
  --mode-body:     var(--grey);
  --tab-active:    var(--mint);
  --tab-inactive:  var(--grey);
}

/* mode classes paint themselves and cascade the slots */
.mode-none, .mode-dark, .mode-light, .mode-drawer {
  background: var(--mode-bg);
  color: var(--mode-body);
}


/* ─────────────────────────────────────────────────────────────── BASE */

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

html { background: var(--white); }

body {
  margin: 0;
  background: var(--white);              /* §1 hard rule: page bg is always
                                            #FAFAFA. No dark mode. */
  color: var(--mode-body);
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;  /* fallback stack keeps
               text readable WHILE Satoshi arrives — never a final state (§3) */
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* §9: nothing overflows, nothing breaks */
img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  color: var(--mode-title);
  margin: 0 0 var(--sp-16);
  line-height: 1.18;
  font-weight: 900;
}
p { margin: 0 0 var(--sp-16); max-width: var(--measure); } /* §9 measure cap */
p.p-full { max-width: none; }

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }              /* §8.2 pointer on everything tappable */

::selection { background: var(--brand-15); }

.icon { color: var(--mode-icon); }
.icon svg { display: block; fill: none; stroke: currentColor; }
.mode-light .icon--sm { color: var(--brand); }   /* §1: small icons on light */


/* ─────────────────────────────────────────────────── TYPE ROLES (§5.6, §9)
   line-heights ≥1.14 so masked SplitText reveals never clip (§6.4). */

.hero {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--mode-title);
  margin: 0 0 var(--sp-24);
}
.h2, .section-title {
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.18;
  color: var(--mode-title);
}
.num {              /* hero numbers / done-moments */
  font-size: var(--fs-num);
  font-weight: 900;
  line-height: 1;
  color: var(--mode-title);
}
.step-title { font-size: var(--fs-step); font-weight: 900; line-height: 1.2; color: var(--mode-title); }
.lede { font-size: clamp(1.125rem, 1.5vw, 1.25rem); max-width: var(--measure); }
.kicker {           /* grey uppercase moment label (§7.2) */
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 0.8125rem;
}


/* ─────────────────────────────────────────────────── LAYOUT (§4, §8, §9) */

.wrap { width: var(--wrap); margin-inline: auto; }

.section { padding-block: var(--pad-section); padding-inline: var(--gutter); }
.section--breathe { padding-block: clamp(4rem, 12vw, 10rem); }  /* §4.1 major gaps */

/* two-column desktop moments (§8.2 anti-timid); stack on phone (§8.1) */
.cols { display: grid; gap: var(--sp-32); align-items: center; }
@media (min-width: 900px) {
  .cols            { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
  .cols--lead-left { grid-template-columns: 3fr 2fr; }
  .cols--lead-right{ grid-template-columns: 2fr 3fr; }
}
.cols > * { min-width: 0; }               /* §9: text wraps, tracks don't blow */

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--track, 16rem), 100%), 1fr));
  gap: var(--sp-24);
}
.grid-auto > * { min-width: 0; }

.measure { max-width: var(--measure); }

/* phone docked primary action (§8.1) — desktop: renders static */
.dock { display: flex; gap: var(--sp-12); }
@media (max-width: 600px) {
  .dock {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 800;
    background: var(--white);                       /* solid — no gradients */
    padding: var(--sp-12) var(--sp-16)
             calc(var(--sp-12) + env(safe-area-inset-bottom));
  }
  .dock .btn { flex: 1; }
  body.has-dock { padding-bottom: 6rem; }
}


/* ══════════════════════════════════════════ §7.1 ELEMENT IDENTITY
   One signature treatment per role. Grey borders belong to inputs-at-rest
   ONLY (USER REVISION: the muted chip is removed from the system). */

/* ---- Buttons — three tiers. Rest/hover colors resolve from the mode slots
   into --r-* / --h-* so proovd-motion.js can read computed values and tween
   them (motion is GSAP-only, §6). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--sp-12) var(--sp-24);
  min-height: var(--touch);
  font-weight: 700;
  font-size: var(--fs-btn);
  line-height: 1.1;
  border-radius: var(--radius);
  border: none;
  /* USER REVISION: the stroke is an OUTLINE — it sits OUTSIDE the box */
  outline: var(--bw-btn) solid transparent;
  outline-offset: 0;
  position: relative;
  overflow: hidden;                    /* hosts fill-sweep / progress fill */
  text-decoration: none;
}

.btn--primary {
  --r-bg: var(--btn1-bg);     --r-text: var(--btn1-text);   --r-border: var(--btn1-border);
  --h-bg: var(--btn1-hbg);    --h-text: var(--btn1-htext);  --h-border: var(--btn1-hborder);
  background: var(--r-bg);
  color: var(--r-text);
  outline-color: var(--r-border);
  /* OWNER RULING 2026-08-19, clause 3: the inset highlight ships on the
     primary tier. It reads as a top-edge gloss on the brand and dark-green
     fills and is invisible on .mode-dark's white one, which is why it sits on
     the tier rather than in a fourth slot per mode. An inset shadow paints
     above the background and below child content, so .btn__fill covers it
     during the §6.5 progress morph — which is what should happen. */
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
}

.btn--secondary {
  --r-bg: var(--brand-0);     --r-text: var(--btn2-text);   --r-border: var(--btn2-border);
  --h-bg: var(--btn2-hbg);    --h-text: var(--btn2-htext);  --h-border: var(--btn2-hborder);
  background: var(--r-bg);
  color: var(--r-text);
  outline-color: var(--r-border);
  isolation: isolate;
}
/* fill-sweep host (tweened via --sweep/--so by proovd-motion.js) */
.btn--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--h-bg);
  transform: scaleX(var(--sweep, 0));
  transform-origin: var(--so, left center);
  z-index: -1;
}

.btn--tertiary {
  background: none;
  border: none;
  outline: none;
  overflow: visible;
  padding: var(--sp-8) var(--sp-4);
  min-height: var(--touch);
  color: var(--btn3-text);
  font-weight: 700;
}

.btn--sm { padding: var(--sp-8) var(--sp-16); min-height: 0; font-size: 0.9375rem; }
.btn:disabled { opacity: 0.55; cursor: default; }

/* button → progress → done morph host (§6.5) */
.btn .btn__label { position: relative; z-index: 1; }
.btn .btn__fill {
  position: absolute; inset: 0;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
}
.btn.is-progress {                      /* selection treatment while working */
  background: var(--brand-5);
  outline-color: var(--brand);
  color: var(--darker);
}
.btn.is-done .btn__label { color: var(--white); }  /* check on full brand fill */

/* ---- Text input / textarea — the ONLY grey-bordered tappable (§7.1).
   Never a silent box: always placeholder or a label directly above. */
.input {
  width: 100%;
  background: #FFFFFF;
  border: none;
  outline: var(--bw) solid var(--grey);
  outline-offset: 0;
  border-radius: var(--radius);
  color: var(--darker);
  padding: var(--sp-12) var(--sp-16);
  min-height: var(--touch);
}
.input::placeholder { color: var(--grey); }
.input--hero { font-size: 1.5rem; }                /* flow hero input (§9) */
.field-label { display: block; font-weight: 700; color: var(--darker); margin-bottom: var(--sp-8); }

/* ---- Toggle / switch — selection treatment, square knob, sits bare on the
   page with its label (never wrapped in an extra bordered card). */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); }
.toggle {
  --tw: 3.5rem; --th: 2rem;
  position: relative;
  flex: none;
  width: var(--tw);
  height: var(--th);
  background: #FFFFFF;
  border: none;
  outline: var(--bw) solid var(--grey);
  outline-offset: 0;
  border-radius: var(--radius);
  padding: 0;
}
.toggle__knob {
  position: absolute;
  top: 3px; left: 3px;
  width:  calc(var(--th) - 6px);
  height: calc(var(--th) - 6px);
  background: var(--grey);
  border-radius: var(--radius);
}
/* USER REVISION: on-state is dark-green filled (was brand selection colors) */
.toggle.is-on { outline-color: var(--dark); background: var(--dark); }
.toggle.is-on .toggle__knob { background: var(--mint); }

/* ---- Checkbox / selectable option (§1 Selection) */
.option {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: 100%;
  text-align: left;
  padding: var(--sp-12) var(--sp-16);
  min-height: var(--touch);
  background: transparent;
  border: none;
  outline: var(--bw) solid var(--grey);
  outline-offset: 0;
  border-radius: var(--radius);
  color: var(--darker);
  font-weight: 700;
}
.option__box {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  border: none;
  outline: var(--bw) solid var(--grey);
  outline-offset: 0;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}
.option__box svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: var(--brand); stroke-width: 3; opacity: 0; }
.option .icon { color: var(--grey); }
.option.is-selected { outline-color: var(--brand); background: var(--brand-5); }
.option.is-selected .option__box { outline-color: var(--brand); }
.option.is-selected .option__box svg { opacity: 1; }
.option.is-selected .icon { color: var(--brand); }

/* ---- Stepper — the number IS the container */
.stepper { display: inline-flex; align-items: center; gap: var(--sp-16); }
.stepper__value {
  font-size: var(--fs-num);
  font-weight: 900;
  line-height: 1;
  color: var(--darker);
  min-width: 2ch;
  text-align: center;
  display: inline-block;
  overflow: hidden;              /* masks the directional number bump */
  padding-block: 0.06em;         /* keeps ascenders inside the mask */
  margin-block: -0.06em;
}
.stepper__num { display: inline-block; }
.stepper__btn {
  width: var(--touch); height: var(--touch);
  display: grid; place-items: center;
  /* USER REVISION: dark-green filled (was brand border, brand text) */
  background: var(--dark);
  border: none;
  border-radius: var(--radius);
  color: var(--mint);
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1;
}

/* ---- Tag / live status — USER REVISION: quiet-green tags are FILLED
   (no ring): dark / sage / moss / mint (= --stat-mint-text) backgrounds
   with mint ink (moss/sage/mint) or mint ink on the dark default.
   EXCEPTION: .tag--live stays the brand treatment. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.25rem 0.75rem;
  border: none;
  background: var(--dark);
  color: var(--mint);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.875rem;
}
.tag--sage { background: var(--sage);           color: var(--mint); }
.tag--moss { background: var(--moss);           color: var(--mint); }
.tag--mint { background: var(--stat-mint-text); color: var(--mint); }
.tag--live {
  background: var(--brand-5);
  color: var(--brand);
  outline: var(--bw) solid currentColor;
  outline-offset: 0;
}
.tag--live::before { content: ""; width: 0.5em; height: 0.5em; background: currentColor; }


/* ---- Card (§4.2/§7.1) — brand ring, never grey.
   USER REVISION: cards are STAT/METRIC containers only — never a wrapper
   for plain copy. Modals, menus and drawers keep their own treatments. */
.card {
  border: none;
  outline: var(--bw) solid var(--brand);
  outline-offset: 0;
  border-radius: var(--radius);
  padding: var(--sp-24);
  background: transparent;
}
.card--white { background: #FFFFFF; }

/* ---- Links — mode link color + underline draw (tweened via --u/--uo) */
a {
  color: var(--mode-link);
  text-decoration: none;
  font-weight: 700;
  position: relative;
}
a.u, .btn--tertiary.u, span.u { --u: 0; }
a::after, .u::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.15em;
  height: 1px;
  background: currentColor;
  transform: scaleX(var(--u, 0));
  transform-origin: var(--uo, left center);
}
.btn::after { content: none; }           /* buttons never grow link underlines */
.btn--tertiary.u::after { content: ""; }

/* ---- Progress — always the bordered treatment (§1 hard rule) */
.progress {
  position: relative;
  height: 1rem;
  border: none;
  outline: var(--bw) solid var(--brand);
  outline-offset: 0;
  background: var(--brand-5);
  border-radius: var(--radius);
  overflow: hidden;
}
.progress__fill {
  position: absolute; inset: 0;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- Divider — a pixel of brand, used sparingly (§1) */
.divider { border: none; height: 1px; background: var(--brand); margin-block: var(--sp-24); }

/* ---- Copy-link element (§1) */
.copylink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  border: none;
  outline: var(--bw) solid var(--brand);
  outline-offset: 0;
  border-radius: var(--radius);
  padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-16);
}
.copylink__url {
  color: var(--darker);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The copy button is a flex item beside a shrinkable URL, and a button hides
   its own overflow because it hosts the fill sweep — so at a narrow width the
   row squeezed the control and it clipped its own label by 8px. The URL is the
   part with somewhere to go (it ellipsises); the control is not. Found by the
   Session D browser pass; fixed at the primitive, so every Copylink in the
   product inherits it. */
.copylink > .btn { flex: 0 0 auto; }

/* And at a phone width the label ellipsised to `Your camp…`, which names
   nothing. It wraps onto its own line instead — PHASE 38's own call on the
   Admin nav: a second line is legible, and a truncated label is a missing one. */
@media (max-width: 600px) {
  .copylink { flex-wrap: wrap; justify-content: flex-start; }
  .copylink__url { flex: 1 0 100%; }
}

/* ---- Selection / live treatment as a composable state (§1, §5.5) */
.is-live, .is-selected-surface {
  background: var(--brand-5);
  border: none;
  outline: var(--bw) solid var(--brand);
  outline-offset: 0;
  border-radius: var(--radius);
}


/* ─────────────────────────────── §1 SMALL SECTIONS (stats / statements) */

.stat {
  padding: var(--sp-24) var(--sp-32);
  border-radius: var(--radius);
}
.stat__value { font-size: var(--fs-num); font-weight: 900; line-height: 1; }
.stat__sub   { color: var(--grey); font-size: 0.9375rem; margin-top: var(--sp-8); }

.stat--mint  { background: var(--stat-mint-bg); color: var(--stat-mint-text); }
.stat--dark  { background: var(--dark);          color: var(--white); }
.stat--white { background: #FFFFFF; border: none;
  outline: var(--bw) solid var(--brand);
  outline-offset: 0; color: var(--darker); }
.stat--white.stat--brandval { color: var(--brand); }   /* value may be brand OR darker */

.surface--visual { background: var(--grey-lightest); }  /* visual section bg */


/* ─────────────────────────────────────────────── §1 TOASTS / ACCENTS */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-24) + env(safe-area-inset-bottom));
  transform: translateX(-50%);          /* JS re-centers via xPercent */
  z-index: 1000;
  padding: var(--sp-12) var(--sp-24);
  border-radius: var(--radius);
  color: var(--darker);
  font-weight: 700;
  max-width: min(92vw, 26rem);
}
.toast__sub { display: block; color: var(--ink-50); font-weight: 500; font-size: 0.875rem; }
.toast--yellow { background: var(--accent-yellow); }
.toast--blue   { background: var(--accent-blue); }

/* The .pv-notices / .pv-notice fail-loud bar was removed on 2026-08-24 by
   product direction: proovd-motion.js reports both failures (§3 Satoshi, §6.6
   GSAP) to the console instead of painting a banner at customers. The
   html.no-motion fallbacks below are unchanged and remain the visible degrade. */


/* ───────────────────────────────── §1 DRAWER (Explore surface, §5.2, §8) */

.drawer {
  position: fixed;
  z-index: 900;
  inset-block: 0;
  right: 0;
  width: min(26rem, 100vw);
  background: var(--darker);
  padding: var(--pad-section) var(--sp-32);
  overflow-y: auto;
}
.drawer .tab {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--sp-12) 0;
  color: var(--tab-inactive, var(--grey));
  font-weight: 700;
  font-size: 1.125rem;
}
.drawer .tab.is-active { color: var(--tab-active, var(--mint)); }
@media (max-width: 600px) {              /* §8.1: sheets, not side drawers */
  .drawer {
    inset: auto 0 0 0;
    width: auto;
    max-height: 85vh;
    padding: var(--sp-32) var(--sp-24)
             calc(var(--sp-32) + env(safe-area-inset-bottom));
  }
}

/* modal + scrim (modal always grows from its trigger — §6.5) */
.scrim { position: fixed; inset: 0; background: var(--ink-50); z-index: 940; }
.modal {
  position: fixed;
  z-index: 950;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);      /* JS re-centers via x/yPercent */
  width: min(92vw, 32rem);
  background: #FFFFFF;
  border: none;
  outline: var(--bw) solid var(--brand);
  outline-offset: 0;
  border-radius: var(--radius);
  padding: var(--sp-32);
}
[hidden] { display: none !important; }

/* accordion (divider-friendly; open state also works without JS) */
.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--sp-16) 0;
  color: var(--darker);
  font-weight: 700;
  font-size: 1.0625rem;
}
.accordion__chev { color: var(--brand); font-weight: 900; }
.accordion__body { overflow: hidden; }
.accordion__body > * { padding-bottom: var(--sp-16); }

/* dropdown menu */
.menu {
  position: absolute;
  z-index: 500;
  min-width: 12rem;
  background: #FFFFFF;
  border: none;
  outline: var(--bw) solid var(--brand);
  outline-offset: 0;
  border-radius: var(--radius);
  padding: var(--sp-8);
  transform-origin: top center;
}
.menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--sp-8) var(--sp-12);
  color: var(--darker);
  font-weight: 500;
}


/* ─────────────────────────────── §1 PLACEHOLDERS / STICKERS
   Rectangle-in-rectangle. Numbered pairs are CONTEXTUAL: .sk-N resolves to a
   valid pair for whatever background it sits on — generators just pick a
   number. In modes with shorter lists the numbers wrap around, so any .sk-1
   … .sk-14 is always legal anywhere.
   These pairings are for placeholders and stickers ONLY (§1 hard rule). */

.sticker {
  position: relative;
  width: var(--sk-size, 6rem);
  aspect-ratio: 1;
  background: var(--sk-o);
  border-radius: var(--radius);
  flex: none;
}
.sticker::after {
  content: "";
  position: absolute;
  inset: 18%;
  background: var(--sk-i);
  border-radius: var(--radius);
}
.sticker--wide { aspect-ratio: 16 / 10; width: var(--sk-size, 10rem); }
.sticker--fill { width: 100%; }

/* on the #FAFAFA page (default) */
.sk-1  { --sk-o: var(--leaf);  --sk-i: var(--sage); }
.sk-2  { --sk-o: var(--leaf);  --sk-i: var(--dark); }
.sk-3  { --sk-o: var(--leaf);  --sk-i: var(--brand); }
.sk-4  { --sk-o: var(--brand); --sk-i: var(--leaf); }
.sk-5  { --sk-o: var(--brand); --sk-i: var(--dark); }
.sk-6  { --sk-o: var(--brand); --sk-i: var(--accent-yellow); }
.sk-7  { --sk-o: var(--brand); --sk-i: var(--sky); }
.sk-8  { --sk-o: var(--dark);  --sk-i: var(--leaf); }
.sk-9  { --sk-o: var(--dark);  --sk-i: var(--brand); }
.sk-10 { --sk-o: var(--dark);  --sk-i: var(--sage); }
.sk-11 { --sk-o: var(--dark);  --sk-i: var(--accent-yellow); }
.sk-12 { --sk-o: var(--dark);  --sk-i: var(--sky); }
.sk-13 { --sk-o: var(--sky);   --sk-i: var(--dark); }
.sk-14 { --sk-o: var(--sky);   --sk-i: var(--brand); }

/* on #013F17 (7 pairs; 8–14 wrap) */
.mode-dark .sk-1,  .mode-dark .sk-8  { --sk-o: var(--accent-yellow); --sk-i: var(--brand); }
.mode-dark .sk-2,  .mode-dark .sk-9  { --sk-o: var(--leaf);  --sk-i: var(--sage); }
.mode-dark .sk-3,  .mode-dark .sk-10 { --sk-o: var(--leaf);  --sk-i: var(--brand); }
.mode-dark .sk-4,  .mode-dark .sk-11 { --sk-o: var(--brand); --sk-i: var(--leaf); }
.mode-dark .sk-5,  .mode-dark .sk-12 { --sk-o: var(--brand); --sk-i: var(--accent-yellow); }
.mode-dark .sk-6,  .mode-dark .sk-13 { --sk-o: var(--brand); --sk-i: var(--sky); }
.mode-dark .sk-7,  .mode-dark .sk-14 { --sk-o: var(--sky);   --sk-i: var(--brand); }

/* on #E9FFE1 (9 pairs; 10–14 wrap) */
.mode-light .sk-1,  .mode-light .sk-10 { --sk-o: var(--brand); --sk-i: var(--dark); }
.mode-light .sk-2,  .mode-light .sk-11 { --sk-o: var(--brand); --sk-i: var(--accent-yellow); }
.mode-light .sk-3,  .mode-light .sk-12 { --sk-o: var(--brand); --sk-i: var(--sky); }
.mode-light .sk-4,  .mode-light .sk-13 { --sk-o: var(--dark);  --sk-i: var(--brand); }
.mode-light .sk-5,  .mode-light .sk-14 { --sk-o: var(--dark);  --sk-i: var(--sage); }
.mode-light .sk-6  { --sk-o: var(--dark); --sk-i: var(--accent-yellow); }
.mode-light .sk-7  { --sk-o: var(--dark); --sk-i: var(--sky); }
.mode-light .sk-8  { --sk-o: var(--sky);  --sk-i: var(--dark); }
.mode-light .sk-9  { --sk-o: var(--sky);  --sk-i: var(--brand); }


/* ════════════════════════════════════ PHASE 02 — component styles the kit
   references but the base sheet didn't define: icon sizing, the standalone
   tabs, the six-question state panel, the one-thing-per-screen flow, and the
   Glance/Act/Explore scaffold. Same discipline: read a mode slot or a token,
   never a raw value. */

/* icons — default glyph size; more specific rules (.option__box svg) win */
.pv-ico { display: inline-block; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -0.15em; flex: none; }
.icon svg:not(.pv-ico) { width: 1.5rem; height: 1.5rem; }

/* screen-reader-only text (visible to assistive tech, off-screen visually) */
.pv-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Field wrapper — label, optional hint, control, programmatic error */
.field { display: grid; gap: var(--sp-8); }
.field .field-label { margin-bottom: 0; }
.field-hint { color: var(--grey); font-size: 0.9375rem; margin: 0; }
.field-error { color: var(--darker); font-weight: 700; margin: 0; }

/* ---- Toggle row label stack (sits bare on the page, §7.1) */
.toggle-row__label { display: grid; gap: var(--sp-4); }
.toggle-row__label .field-label { margin-bottom: 0; }

/* ---- Tabs (standalone; the drawer tab list keeps its own rules above).
   Radix owns roving focus + selection; the underline is moved by GSAP, and the
   active tab is also weight-shifted so the state never rides on colour alone. */
.tablist { position: relative; display: flex; flex-wrap: wrap; gap: var(--sp-24); }
.tab {
  background: none; border: none;
  padding: var(--sp-12) var(--sp-4);
  min-height: var(--touch);
  color: var(--mode-body);
  font-weight: 700;
  font-size: 1.0625rem;
  position: relative;
}
.tab.is-active { color: var(--mode-title); font-weight: 900; }
.tab-underline {
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--brand);
  border-radius: var(--radius);
}
.tabpanel { padding-block: var(--sp-24); }

/* ---- Accordion header wrapper (Radix renders the heading element) */
.accordion__header { margin: 0; font-size: inherit; line-height: inherit; }
.menu button:disabled { opacity: 0.5; cursor: default; }

/* ---- StatePanel — Spec §27.1 six questions. Sits on the page by default; the
   brand ring is opt-in for a "needs you" emphasis state. */
.state-panel { display: grid; gap: var(--sp-16); max-width: var(--measure); }
/* Founder Flow should reveal the destination screen directly. These panels
   are only the data-fetch fallback and are never part of the reference
   choreography, so they must not become a visible refresh/transition frame. */
.ff .state-panel--transient { display: none; }
.state-panel--ring {
  outline: var(--bw) solid var(--brand);
  outline-offset: 0;
  border-radius: var(--radius);
  background: var(--brand-5);
  padding: var(--sp-24);
}
.state-panel__head {
  font-size: var(--fs-step); font-weight: 900; line-height: 1.2;
  color: var(--mode-title); margin: 0; max-width: none;
}
.state-panel__rows { display: grid; gap: var(--sp-8); margin: 0; }
.state-panel__row {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: var(--sp-16); align-items: baseline;
}
.state-panel__key { color: var(--grey); font-weight: 700; margin: 0; }
.state-panel__val { color: var(--mode-body); min-width: 0; margin: 0; }
.state-panel__val .utc { color: var(--grey); }
.state-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); }
.state-panel__noaction { color: var(--grey); font-weight: 700; }
@media (max-width: 600px) {
  .state-panel__row { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ---- Flow — one-thing-per-screen sequence (DNA §5.9). The stage clips the
   sliding step so a transition never spawns a scrollbar. */
.flow { display: grid; gap: var(--sp-32); }
.flow__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); flex-wrap: wrap; }
.flow__progress { flex: 1 1 12rem; min-width: 0; }
.flow__meta-right { display: flex; align-items: center; gap: var(--sp-12); }
.flow__count { color: var(--grey); font-weight: 700; }
.flow__stage { position: relative; overflow: hidden; }
.flow__step { display: grid; gap: var(--sp-24); }
.flow__nav { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-8); }
.flow__summary { display: grid; gap: var(--sp-16); margin: 0; }
.flow__summary-row {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr auto;
  gap: var(--sp-16); align-items: baseline;
}

/* ---- Glance / Act / Explore scaffold (DNA §5.2) */
.scaffold { display: grid; gap: var(--sp-48); }
.scaffold__glance { display: grid; gap: var(--sp-16); }
.scaffold__act { display: grid; gap: var(--sp-16); max-width: var(--measure); }
.scaffold__explore-open { justify-self: start; }


/* ════════════════════════════════════ PHASE 05 — public site chrome and the
   campaign page. Same discipline as above: read a mode slot or a token, never
   a raw value; px only for borders, radii, and the 44px touch minimum. */

/* ---- Skip link (§33.11.1: a fourteen-link footer must not be a keyboard trap
   on the way to the content). Visible the moment it takes focus. */
.skip-link {
  position: absolute; left: var(--sp-8); top: calc(var(--sp-8) * -8);
  z-index: 900;
  background: var(--dark); color: var(--white);
  padding: var(--sp-12) var(--sp-16);
  min-height: var(--touch);
  display: inline-flex; align-items: center;
  font-weight: 700; text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus-visible { top: var(--sp-8); }
main:focus { outline: none; }          /* programmatic focus target, not a control */

/* ---- Site header — wayfinding at every scroll depth (DNA §5.12) */
.site-header { padding: var(--sp-16) var(--gutter); }
.site-header__inner {
  width: var(--wrap); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-16) var(--sp-24);
}
.site-header__brand {
  font-size: 1.25rem; font-weight: 900; letter-spacing: -0.01em;
  color: var(--mode-title); text-decoration: none;
  min-height: var(--touch); display: inline-flex; align-items: center;
}
.site-header__brand::after { display: none; }   /* the wordmark is not a body link */
.site-nav { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); }
.site-nav__link {
  min-height: var(--touch); display: inline-flex; align-items: center;
  color: var(--mode-body); font-weight: 700; text-decoration: none;
}
/* current location: weight + ink, never colour alone */
.site-nav__link.is-current { color: var(--mode-title); font-weight: 900; }

/* ---- Site footer (§31.4). Painted by .mode-dark on the element itself. */
.site-footer { padding: var(--sp-64) var(--gutter) var(--sp-48); }
.site-footer__inner { display: grid; gap: var(--sp-48); }
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: 3fr 2fr 2fr; gap: var(--gutter); }
}
.site-footer__heading {
  font-size: 1.0625rem; font-weight: 900;
  color: var(--mode-title); margin: 0 0 var(--sp-16);
}
.site-footer__line { margin: 0 0 var(--sp-8); max-width: var(--measure); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.site-footer__list a {
  min-height: var(--touch); display: inline-flex; align-items: center;
}
.site-footer__legal { margin-top: var(--sp-48); padding-top: var(--sp-24); border-top: var(--bw) solid var(--mode-body); }

/* ---- Editorial pieces shared by the public pages */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-24); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-32); counter-reset: step; }
.steps > li { counter-increment: step; }
.steps > li > h3::before {
  content: counter(step) ". ";
  color: var(--brand);
}
.checks { list-style: none; margin: 0 0 var(--sp-24); padding: 0; display: grid; gap: var(--sp-16); max-width: var(--measure); }
.doc-list { margin: 0 0 var(--sp-24); padding-left: var(--sp-24); display: grid; gap: var(--sp-8); max-width: var(--measure); }
.utc { color: var(--grey); }

/* ---- Trust strip (Appendix A.1) */
.trust-strip { display: grid; gap: var(--sp-16); max-width: var(--measure); }
.trust-strip__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }

/* ---- Policy routes */
.policy-meta { display: grid; gap: var(--sp-8); margin: 0 0 var(--sp-24); }
.policy-meta__row {
  display: grid; grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--sp-16); align-items: baseline;
}
.policy-meta__row dt { color: var(--grey); font-weight: 700; }
.policy-meta__row dd { margin: 0; color: var(--mode-body); }
@media (max-width: 600px) {
  .policy-meta__row { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ---- Sample banner (Appendix A.6) — permanent, never dismissible */
.sample-banner {
  background: var(--accent-yellow);
  color: var(--darker);
  padding: var(--sp-12) var(--gutter);
  font-weight: 700;
  text-align: center;
}
.sample-banner__text { display: inline-block; max-width: var(--measure); }

/* ---- Key/value rows (Founder identity, dates, reward meta) */
.kv { display: grid; gap: var(--sp-8); margin: 0 0 var(--sp-24); }
.kv--tight { gap: var(--sp-4); margin-bottom: 0; }
.kv__row {
  display: grid; grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--sp-16); align-items: baseline;
}
.kv__row dt { color: var(--grey); font-weight: 700; }
.kv__row dd { margin: 0; color: var(--mode-body); min-width: 0; }
@media (max-width: 600px) {
  .kv__row { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ---- Reward packages */
.reward-list {
  display: grid; gap: var(--sp-24);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
.reward { display: grid; gap: var(--sp-12); align-content: start; }
.reward__title { margin: 0; }
.reward__price { font-size: var(--fs-step); font-weight: 900; color: var(--mode-title); margin: 0; }
.reward__pretax { font-size: var(--fs-body); font-weight: 700; color: var(--grey); }
.reward__contents { margin: 0; padding-left: var(--sp-24); display: grid; gap: var(--sp-4); }

/* ---- The compact summary beside the primary action (§18) */
.compact-summary {
  list-style: none; margin: 0 0 var(--sp-16); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16);
  max-width: var(--measure);
}
.compact-summary > li { font-weight: 700; color: var(--mode-title); }
.compact-summary > li + li::before { content: "→ "; color: var(--brand); }

/* ---- Consent preview (Appendix A.3 / A.4), reproduced verbatim */
.consent { display: grid; gap: var(--sp-16); }
.consent__amounts { display: grid; gap: var(--sp-4); margin: 0; }
.consent__amount {
  display: grid; grid-template-columns: minmax(10rem, max-content) 1fr;
  gap: var(--sp-16);
}
.consent__amount dt { color: var(--grey); font-weight: 700; }
.consent__amount dd { margin: 0; font-weight: 700; color: var(--mode-title); }
.consent__bullets { margin: 0; padding-left: var(--sp-24); display: grid; gap: var(--sp-12); }
.consent__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-12); }
.consent__checks > li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-12); }
.consent__box {
  width: 1.25rem; height: 1.25rem; margin-top: 0.2rem;
  border: var(--bw) solid var(--grey); border-radius: var(--radius);
}
.consent__action-label {
  display: inline-block; font-weight: 900; color: var(--grey);
  border: var(--bw) dashed var(--grey); border-radius: var(--radius);
  padding: var(--sp-8) var(--sp-16);
}
.consent__appendix { color: var(--grey); font-size: 0.9375rem; }

/* ---- Disabled action — present, named, and plainly inert */
.btn:disabled { opacity: 0.55; cursor: default; }


/* ════════════════════════════════════ PHASE 06 — the Admin panel. Spec §26
   licenses dashboard density HERE AND NOWHERE ELSE, so this is the only
   section in the file that packs rows tightly. DNA §5.14 is not repealed by
   it: every row still reads Glance → Act → Explore, which is why a setting
   shows its value before its controls and hides its history behind a control.
   Same discipline as above — read a mode slot or a token, never a raw value;
   px only for borders, radii, and the 44px touch minimum. */

.admin { min-height: 100vh; }

/* ---- Top bar. Painted by .mode-dark on the wrapper, like the site footer. */
.admin-bar { padding: var(--sp-12) var(--gutter); background: var(--mode-bg); }
.admin-bar__inner {
  width: var(--wrap); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-12) var(--sp-24);
}
.admin-bar__brand {
  margin: 0; font-size: 1.125rem; font-weight: 900; letter-spacing: -0.01em;
  color: var(--mode-title);
  display: inline-flex; align-items: center; gap: var(--sp-8);
  min-height: var(--touch);
}
.admin-bar__who { display: flex; align-items: center; gap: var(--sp-16); }
.admin-bar__name { color: var(--mode-body); font-weight: 700; }

/* ---- Section nav. Current location by weight + ink, never colour alone. */
.admin-nav { padding: 0 var(--gutter); border-bottom: var(--bw) solid var(--grey-light); }
.admin-nav__list {
  width: var(--wrap); margin-inline: auto; padding: 0;
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-24);
}
.admin-nav__link {
  min-height: var(--touch); display: inline-flex; align-items: center;
  color: var(--mode-body); font-weight: 700; text-decoration: none;
  border-bottom: var(--bw) solid transparent; margin-bottom: calc(var(--bw) * -1);
}
.admin-nav__link.is-current {
  color: var(--mode-title); font-weight: 900; border-bottom-color: var(--brand);
}

.admin-main { padding: var(--sp-32) var(--gutter) var(--sp-96); }
.admin-main:focus { outline: none; }   /* programmatic target, not a control */

.admin-page { width: var(--wrap); margin-inline: auto; display: grid; gap: var(--sp-48); }
.admin-page__head { display: grid; gap: var(--sp-16); }
.admin-page__lede { max-width: var(--measure); margin: 0; }

/* ---- Sign-in. One question per moment (DNA §5.1) — never both steps at once. */
.admin-signin {
  width: min(28rem, 100%); margin: var(--sp-64) auto;
  display: grid; gap: var(--sp-24);
}
.admin-form { display: grid; gap: var(--sp-16); justify-items: start; }
.admin-form > .field { width: 100%; }
.admin-form__note { margin: 0; color: var(--grey); max-width: var(--measure); }

/* ---- The unset-settings alert. Names what blocks; offers no way past it. */
.admin-alert { display: grid; gap: var(--sp-12); max-width: var(--measure); }
.admin-alert__head { margin: 0; font-weight: 900; color: var(--mode-title); }
.admin-alert__list { margin: 0; padding-left: var(--sp-24); display: grid; gap: var(--sp-4); }

/* ---- Setting groups */
.admin-group { display: grid; gap: var(--sp-24); }
.admin-group__heading { margin: 0; }
.admin-group__rows {
  display: grid; gap: var(--sp-24);
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

/* ---- One setting: Glance (label, value, provenance), Act (inputs), Explore */
.setting { display: grid; gap: var(--sp-12); align-content: start; }
.setting__glance { display: grid; gap: var(--sp-8); }
.setting__label { margin: 0; font-size: 1.125rem; }
.setting__value { margin: 0; font-size: var(--fs-step); font-weight: 900; color: var(--mode-title); }
.setting__value code { font-weight: 900; white-space: pre-line; }
.setting__unset {
  font-size: var(--fs-body); font-weight: 700; color: var(--grey);
  border: var(--bw) dashed var(--grey); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-12); display: inline-block;
}
.setting__tags { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.setting__help { margin: 0; color: var(--mode-body); }
.setting__spec, .prereq__spec { margin: 0; color: var(--grey); font-size: 0.9375rem; }
.setting__locked { margin: 0; color: var(--moss); }

.setting__act { display: grid; gap: var(--sp-12); }
.setting__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16); }
/* §9 save vocabulary: Saving… / Saved <time> / Could not save — retrying */
.setting__status { font-weight: 700; color: var(--grey); }
.setting__status[data-state="saved"] { color: var(--stat-mint-text); }
.setting__status[data-state="retrying"],
.setting__status[data-state="failed"] { color: var(--mode-title); }

.setting__explore { display: grid; gap: var(--sp-12); justify-items: start; }
.setting__history { margin: 0; padding-left: var(--sp-24); display: grid; gap: var(--sp-16); }
.setting__history-change, .setting__history-meta, .setting__history-reason { margin: 0; }
.setting__history-meta { color: var(--grey); font-size: 0.9375rem; }
.setting__history-empty { margin: 0; color: var(--grey); }

/* ---- Prerequisites. A blocking item is ringed and labelled, never coloured
   alone — the palette has no error hue and inventing one is out (DNA §1). */
.prereq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-24); }
.prereq { display: grid; gap: var(--sp-12); }
.prereq--blocking { box-shadow: inset 0 0 0 var(--bw) var(--brand); }
.prereq__glance { display: grid; gap: var(--sp-8); }
.prereq__label { margin: 0; font-size: 1.25rem; }
.prereq__tags { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.prereq__detail { margin: 0; font-weight: 700; color: var(--mode-title); max-width: var(--measure); }
.prereq__requirement { margin: 0; color: var(--mode-body); max-width: var(--measure); }
.prereq__subjects { margin: 0; padding-left: var(--sp-24); display: grid; gap: var(--sp-4); }
.prereq__attestation { margin: 0; }
.prereq__automatic { margin: 0; color: var(--grey); }
.prereq__act { display: grid; gap: var(--sp-12); justify-items: start; }
.prereq__form { display: grid; gap: var(--sp-12); width: 100%; max-width: var(--measure); }
.prereq__buttons { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

/* ---- Admin tables (§26.1). The one place a table is the right answer: a
   roster of people with parallel states. It scrolls inside its own container
   so the page body never scrolls sideways at 320px. */
.admin-table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table__caption { text-align: left; color: var(--grey); padding-bottom: var(--sp-12); }
.admin-table th, .admin-table td {
  padding: var(--sp-12) var(--sp-16) var(--sp-12) 0;
  border-bottom: var(--bw) solid var(--grey-light);
  vertical-align: top;
}
.admin-table thead th { color: var(--grey); font-weight: 700; white-space: nowrap; }
.admin-table tbody th { font-weight: 900; color: var(--mode-title); }
.admin-table__sub { display: block; color: var(--grey); font-size: 0.9375rem; font-weight: 400; }

.admin-crumb { margin: 0 0 var(--sp-8); }
.admin-note { margin: 0; color: var(--grey); max-width: var(--measure); }
.admin-form-card { max-width: 100%; }
.admin-form--wide { max-width: var(--measure); width: 100%; }

/* ---- The invitation (§7) */
.invitation { display: grid; gap: var(--sp-12); }
.invitation__state {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12);
  font-weight: 700; color: var(--mode-title);
}
.invitation__preview { display: grid; gap: var(--sp-12); }
.invitation__subject { margin: 0; }
.invitation__text {
  margin: 0; padding: var(--sp-16);
  background: var(--grey-lightest); color: var(--mode-body);
  border-radius: var(--radius);
  white-space: pre-wrap; overflow-x: auto;
  font-size: 0.9375rem; line-height: 1.5;
}
.invitation__frame { width: 100%; min-height: 30rem; border: 0; }
.invitation__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); }
.invitation__notice { margin: 0; font-weight: 700; color: var(--stat-mint-text); }

/* §7's gate. Ringed and named — the palette has no error hue, and colour alone
   would not say why Send is unavailable (DNA §1). */
.invitation__gate {
  display: grid; gap: var(--sp-8);
  padding: var(--sp-16);
  border: var(--bw) solid var(--brand); border-radius: var(--radius);
  background: var(--brand-5);
}
.invitation__gate-head { margin: 0; font-weight: 900; color: var(--mode-title); }
.invitation__unresolved { margin: 0; padding-left: var(--sp-24); display: grid; gap: var(--sp-4); }

/* ---- The Founder's invited draft (§7). A Founder surface: generous, one
   question per moment, no dashboard density anywhere near it. */
.draft-eyebrow {
  margin: 0 0 var(--sp-16);
  font-size: 0.875rem; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--moss);
}
.draft-lede { font-size: 1.25rem; line-height: 1.5; max-width: var(--measure); }
.draft-sender { color: var(--grey); }
.draft-note { color: var(--grey); max-width: var(--measure); margin: var(--sp-16) 0 0; }


/* ════════════════════════════════════ PHASE 07 — pre-account vetting and the
   Founder account claim. Spec §9, §10; DNA §5.9 (one thing per screen), §5.12
   (position survives), §5.14 (Glance → Act → Explore).

   These are Founder surfaces, so none of PHASE 06's density applies: §26
   licenses that in Admin and nowhere else. One question is the hero, the
   supporting copy is quiet, and the whole thing reflows to a single column at
   the narrowest supported width without clipping an answer or an action.
   Same discipline as everywhere above — read a mode slot or a token, never a
   raw value; px only for borders, radii, and the 44px touch minimum. */

/* ---- The vetting sequence (§9) */
.vetting__head { margin-bottom: var(--sp-24); }
.vetting__restored { margin: 0; color: var(--grey); max-width: var(--measure); }

/* Progress and the save status sit together: §9 requires both to be visible on
   every step, and separating them is how one of them ends up below the fold. */
.vetting__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-12) var(--sp-24);
  margin: var(--sp-24) 0 var(--sp-32);
}
.vetting__progress { flex: 1 1 14rem; min-width: 0; }
.vetting__count { font-weight: 900; color: var(--mode-title); white-space: nowrap; }
.vetting__status {
  color: var(--grey); font-weight: 700; font-size: 0.9375rem;
  /* Reserved before the text arrives, so the step below never jumps under a
     finger already on its way to Continue (DNA §5.5, §5.12). */
  min-height: 1.5rem; min-width: 11ch;
}
.vetting__status[data-state='saved'] { color: var(--moss); }
.vetting__status[data-state='retrying'],
.vetting__status[data-state='failed'] { color: var(--mode-title); }

.vetting__stage { display: grid; gap: var(--sp-24); }
.vetting__stage .step-title { margin: 0; }

.vetting__nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-12);
  margin-top: var(--sp-32);
}

/* DNA §5.9: an overview of every step, one gesture away, on every step. A list
   rather than a menu so it is reachable at 320px without opening anything. */
.vetting__overview { margin-top: var(--sp-32); }
.vetting__overview ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12);
}
.vetting__overview li { display: flex; align-items: center; gap: var(--sp-8); }

.vetting__note { margin: var(--sp-32) 0 0; color: var(--grey); max-width: var(--measure); }

/* Provenance (§9, §10). Quiet by default — it explains where a value came
   from, which matters when it is wrong and not before. */
.vetting__provenance {
  margin: calc(var(--sp-8) * -1) 0 var(--sp-24);
  color: var(--grey); max-width: var(--measure);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8);
  font-size: 0.9375rem;
}

/* The permanence warning (§9). Ringed and named — the palette has no error hue
   and colour alone would not say what is permanent (DNA §1). */
.vetting__warning { border-color: var(--brand); background: var(--brand-5); }
.vetting__warning p { margin: 0; max-width: var(--measure); }

/* The review moment (DNA §5.9: "end with a summary moment… editable"). */
.vetting__summary { margin: 0; display: grid; gap: var(--sp-16); }
.vetting__summary-row {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr auto;
  padding-bottom: var(--sp-16);
  border-bottom: var(--bw) solid var(--grey-light);
}
.vetting__summary-row dt {
  grid-column: 1; font-weight: 900; color: var(--mode-title);
}
.vetting__summary-row dd {
  grid-column: 1; margin: 0; color: var(--mode-body);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.vetting__summary-row > .btn { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.vetting__empty { color: var(--grey); }

/* ---- Step 1: the two campaign paths (§4.1, §4.2, §9)
   Both shown in full, side by side. §9 requires the Founder to understand what
   they are choosing before they choose it, and the choice is permanent — a pair
   of buttons with the detail behind a tooltip would not meet that. */
.path-choices {
  display: grid; gap: var(--sp-24);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.path-choice { display: grid; gap: var(--sp-12); align-content: start; }
.path-choice.is-selected { border-color: var(--brand); background: var(--brand-5); }
.path-choice__control {
  display: grid; gap: var(--sp-4); text-align: left;
  min-height: var(--touch);
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
}
.path-choice__prompt {
  font-size: var(--fs-step); font-weight: 900; line-height: 1.1;
  color: var(--mode-title);
}
.path-choice__name { font-weight: 700; color: var(--moss); }
.path-choice.is-selected .path-choice__name { color: var(--brand); }
.path-choice__summary { margin: 0; color: var(--mode-body); }
.path-choice__commit-head {
  margin: 0; font-size: 0.875rem; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey);
}
.path-choice__commitments {
  margin: 0; padding-left: var(--sp-24);
  display: grid; gap: var(--sp-8); color: var(--mode-body);
}

/* ---- The possible-creator result (§10)
   One number, and every limit on what it means beside it. §10's disclosures are
   not staged behind a control: a Founder who reads only the number has been
   told something untrue, which is the one case where DNA §5.14's staging would
   work against the thing it exists to protect. */
.creator-signal { display: grid; gap: var(--sp-16); justify-items: start; }
.creator-signal__when { margin: 0; color: var(--grey); }
.creator-signal__limits { margin: var(--sp-32) 0; }
.creator-signal__limits ul {
  margin: 0; padding-left: var(--sp-24);
  display: grid; gap: var(--sp-12);
  max-width: var(--measure); color: var(--mode-body);
}

/* ---- The account claim (§10, §28.4)
   Every consent is its own control and starts off. There is no "accept all"
   styling here because there is no such control — §28.4 forbids bundling. */
.claim__choice { display: grid; gap: var(--sp-12); margin-bottom: var(--sp-24); }
.claim__consents { display: grid; gap: var(--sp-16); margin-bottom: var(--sp-24); }
.claim__consent {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12);
}
.claim__actions { display: grid; gap: var(--sp-12); justify-items: start; }
.claim__actions .field-hint { margin: 0; }

/* ---- Admin's read-only view of the vetting record (§9, §26) */
.admin-group__subheading {
  margin: 0 0 var(--sp-12);
  font-size: 1.125rem; font-weight: 900; color: var(--mode-title);
}
.admin-explore { margin-top: var(--sp-16); }
.admin-explore > summary {
  cursor: pointer; font-weight: 700; color: var(--mode-title);
  min-height: var(--touch); display: flex; align-items: center;
}


/* ════════════════════════════════════ PHASE 09 — the Founder campaign
   workspace: five optional items, their evidence, and the itemised listing
   fee. Spec §12, §24.6; DNA §5.9 (one thing per screen), §5.10 (no
   manufactured urgency), §5.14 (Glance → Act → Explore).

   A Founder surface, so PHASE 06's density does not apply — §26 licenses that
   in Admin and nowhere else. The Flow primitive owns the sequencing; these
   rules only dress what sits inside one step and the secondary summary beside
   it. Mode slots and tokens only, px for borders, radii, and the 44px touch
   minimum. */

.workspace__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--sp-12) var(--sp-24);
  margin-bottom: var(--sp-24);
}
.autosave-status {
  margin: 0; color: var(--grey); font-weight: 700; font-size: 0.9375rem;
  /* Reserved, like the vetting flow's, so the step below never jumps under a
     finger already moving toward Continue. */
  min-height: 1.5rem; min-width: 11ch;
}

/* One step. Everything in it is the one decision plus what explains it. */
.step { display: grid; gap: var(--sp-24); }
.step > .lede { margin: 0; max-width: var(--measure); }

/* Whether an item counts, and why not. Quiet — it is a status, not an alarm;
   the palette has no error hue and §12's criteria are neutral by instruction. */
.item-status { display: grid; gap: var(--sp-8); }
.item-status__reasons {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  color: var(--grey); max-width: var(--measure);
}
.item-status--done { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }

/* Uploaded files and social profiles. One row per thing, reflowing to a stack
   at the narrowest width so nothing is clipped and every control keeps its
   44px target. */
.asset-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-12); }
.asset-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-8) var(--sp-16);
  padding-bottom: var(--sp-12);
  border-bottom: var(--bw) solid var(--grey-light);
}
.asset-row__name { font-weight: 900; color: var(--mode-title); overflow-wrap: anywhere; }
.asset-row__note { color: var(--grey); }

/* The file input is replaced by its own label, styled as a secondary button.
   Kept in the accessibility tree and keyboard-reachable — `display: none` on the
   input would take it out of both. */
.upload { display: grid; gap: var(--sp-8); justify-items: start; }
.upload__input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.upload__label { cursor: pointer; }
.upload__input:focus-visible + .upload__label {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* ---- The fee preview (§12, §24.6)
   The base line, each earned saving on its own labeled line, and the subtotal.
   No progress bar toward a discount and no countdown: DNA §5.10 and §30 forbid
   manufactured urgency, and a saving that is always available needs none. */
.fee-preview { margin: var(--sp-16) 0 0; display: grid; gap: var(--sp-8); }
.fee-preview__row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--sp-8) var(--sp-24);
}
.fee-preview__row dt { color: var(--mode-body); }
.fee-preview__row dd {
  margin: 0; font-weight: 900; color: var(--mode-title);
  font-variant-numeric: tabular-nums;
}
.fee-preview__row--saving dd { color: var(--moss); }
.fee-preview__row--quiet dt,
.fee-preview__row--quiet dd { color: var(--grey); font-weight: 400; }
.fee-preview__row--total {
  margin-top: var(--sp-8); padding-top: var(--sp-12);
  border-top: var(--bw) solid var(--grey-light);
}
.fee-preview__row--total dt { font-weight: 900; color: var(--mode-title); }

/* §24.6's separate-stream sentence. Set apart so the 5% is never read as part
   of this total. */
.fine--separated {
  margin-top: var(--sp-16); padding-top: var(--sp-16);
  border-top: var(--bw) solid var(--grey-light);
}

.workspace__secondary { display: grid; gap: var(--sp-24); margin-top: var(--sp-32); }

/* ---- §12's helper resources. Static guidance, staged behind one gesture. */
.helper { display: grid; gap: var(--sp-16); }
.helper__points, .helper__limits {
  margin: 0; padding-left: var(--sp-24);
  display: grid; gap: var(--sp-8); max-width: var(--measure);
}
.helper__limits { color: var(--grey); }
.helper__prompt {
  display: grid; gap: var(--sp-8); justify-items: start;
  padding: var(--sp-16);
  border: var(--bw) solid var(--grey-light); border-radius: var(--radius);
}
.helper__prompt-title { margin: 0; font-weight: 900; color: var(--mode-title); }
.helper__prompt-text {
  margin: 0; color: var(--mode-body); max-width: var(--measure);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---- The embedded interview (§12, tech-stack §12), added Phase 09b.
   An iframe rather than an injected script: this page holds the Founder's
   session and their unreleased product information, and a third-party script in
   it can read both. Sized so the vendor's own layout has room at 320px without
   the host page scrolling sideways. */
.interview-embed { display: grid; gap: var(--sp-8); }
.interview-embed__frame {
  width: 100%; min-height: 34rem; border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius); background: var(--mode-bg);
}

/* ---- Admin's evidence view (§12, §26). Density lives here and nowhere else. */
.admin-workspace { display: grid; gap: var(--sp-24); }
.admin-workspace__head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-12) var(--sp-24);
}
.admin-item__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}
.admin-item__head .section-title { margin: 0; }
.admin-item__reasons {
  list-style: none; margin: 0 0 var(--sp-12); padding: 0;
  display: grid; gap: var(--sp-4); color: var(--grey);
}
.admin-item__evidence > summary {
  cursor: pointer; font-weight: 700; color: var(--mode-title);
  min-height: var(--touch); display: flex; align-items: center;
}
.admin-item__evidence pre {
  margin: 0; overflow-x: auto; color: var(--mode-body);
  font-size: 0.875rem;
}
.admin-item__form { display: grid; gap: var(--sp-16); margin-top: var(--sp-16); }
.admin-item__actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.admin-history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }


/* ─── FOCUS — declared after every stroke outline so the keyboard ring
   always wins on :focus-visible */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }


/* ──────────────────────────── NO-MOTION FALLBACKS (§6.6 fail loud + safe)
   Motion is GSAP-only. If GSAP is missing, proovd-motion.js adds
   html.no-motion and logs the failure; these rules keep every state
   reachable — jump-cuts, but nothing is trapped or invisible. */

html.no-motion .btn--primary:hover,
html.no-motion .btn--primary:focus-visible {
  background: var(--h-bg); color: var(--h-text); outline-color: var(--h-border);
}
html.no-motion .btn--secondary:hover,
html.no-motion .btn--secondary:focus-visible {
  background: var(--h-bg); color: var(--h-text); outline-color: var(--h-border);
}
html.no-motion a:hover::after,
html.no-motion .u:hover::after { transform: scaleX(1); }
html.no-motion .input:focus { outline-color: var(--brand); }
html.no-motion .toggle .toggle__knob { transition: none; }
html.no-motion .toggle.is-on .toggle__knob {
  transform: translateX(calc(var(--tw) - var(--th)));
}
html.no-motion .progress__fill { transform: scaleX(var(--p, 0)); }
html.no-motion .accordion__body { height: auto !important; }
html.no-motion [data-splash] { display: none !important; }


/* ─────────────────────────────────────────────────────────────────────────────
   PHASE 11 — the listing-fee consent (§13, Appendix A.5), added 2026-08-02.

   Appendix A.5 is exact text, and its line breaks are part of it: the Spec
   ships it as a fixed block and §1 rule 6 forbids "improving" it. So the body
   preserves the newlines it was given rather than reflowing them, and stays
   inside the reading measure at every width. `white-space: pre-line` collapses
   the runs of spaces the Spec's wrapping introduces while keeping the
   paragraph breaks — reflowing to `pre-wrap` would force a horizontal scroll
   at 320px, and stripping the breaks would run two legal paragraphs together.
   ──────────────────────────────────────────────────────────────────────────── */
.consent__body {
  margin: 0;
  white-space: pre-line;
  color: var(--mode-body);
  max-width: var(--measure);
  overflow-wrap: anywhere;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PHASE 14b — attribution arrival + ended state (§18), added 2026-08-02.

   `.attribution-arrival` is §18's "You came through [handle]" note: a quiet
   mint strip at the top of a live campaign, never a countdown or a pressure
   device (§30). `.ended-banner` renders §18's outcome-specific ended state
   inside a dark Mode, so it reads its colours from the mode slots.
   ──────────────────────────────────────────────────────────────────────────── */
.attribution-arrival {
  max-width: var(--measure);
  margin: var(--sp-16) auto 0;
  padding: var(--sp-12) var(--sp-16);
  background: var(--mint);
  color: var(--dark);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  display: grid;
  gap: var(--sp-4);
}
.attribution-arrival__lead { margin: 0; font-weight: 700; }
.attribution-arrival__note { margin: 0; color: var(--moss); }

.ended-banner {
  display: grid;
  gap: var(--sp-16);
  margin: 0 0 var(--sp-16);
  max-width: var(--measure);
}
.ended-banner__row { display: grid; gap: var(--sp-4); }
.ended-banner__row dt { color: var(--grey); font-weight: 700; }
.ended-banner__row dd { margin: 0; color: var(--mode-body); }

/* ─────────────────────────────────────────────────────────────────────────────
   PHASE 14c — campaign updates (§18), added 2026-08-02.

   The update list on the campaign page and the Founder's authoring surface. A
   material delivery change (`.update__change`) sets the previous and revised
   commitment side by side, so a Backer sees exactly what moved.
   ──────────────────────────────────────────────────────────────────────────── */
.update-list { display: grid; gap: var(--sp-24); max-width: var(--measure); }
.update { display: grid; gap: var(--sp-8); }
.update__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); align-items: baseline;
  margin: 0; color: var(--grey); font-size: 0.9375rem;
}
.update__audience {
  font-weight: 700; color: var(--moss); text-transform: uppercase; letter-spacing: 0.04em;
}
.update__title { margin: 0; }
.update__image { max-width: 100%; height: auto; border-radius: var(--radius); }
.update__change {
  display: grid; gap: var(--sp-8); margin: 0 0 var(--sp-8);
  padding: var(--sp-12) var(--sp-16); background: var(--mint); border-radius: var(--radius);
}
.update__change-row { display: grid; gap: var(--sp-4); }
.update__change-row dt { font-weight: 700; color: var(--grey); }
.update__change-row dd { margin: 0; color: var(--dark); }

/* A native select for the Founder's audience choice — matches the Input frame. */
.pv-select {
  width: 100%; min-height: 44px; padding: var(--sp-8) var(--sp-16);
  border: var(--bw) solid var(--grey); border-radius: var(--radius);
  background: var(--mode-bg, transparent); color: var(--mode-body); font: inherit;
}
.pv-select:focus-visible { outline: none; border-color: var(--brand); }

/* The required FTC disclosure on the Creator partnership surface (§18, Phase 14c). */
.disclosure-text {
  margin: 0 0 var(--sp-8); padding: var(--sp-12) var(--sp-16);
  background: var(--mint); color: var(--dark); border-radius: var(--radius);
  white-space: pre-line;
}

/* ---- The Backer pre-order checkout (§19, App. A.3/A.4, B.2), added Phase 15.
   Opens in a Drawer from the live campaign page; the card field is Stripe's own
   iframe, never styled here. Leads with the not-charged fact throughout. */
.checkout { display: flex; flex-direction: column; gap: var(--sp-16); }
.checkout__lead { margin: 0; }
.checkout__error {
  margin: 0; padding: var(--sp-12) var(--sp-16);
  border: var(--bw) solid var(--brand); border-radius: var(--radius); color: var(--mode-body);
}
.checkout__section { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-12); }
.checkout__section legend { font-weight: 700; padding: 0; margin: 0 0 var(--sp-4); }
.checkout__amounts { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.checkout__amounts div { display: flex; justify-content: space-between; gap: var(--sp-16); }
.checkout__amounts dt { color: var(--grey); }
.checkout__amounts dd { margin: 0; font-variant-numeric: tabular-nums; }
.checkout__amounts-total { font-weight: 900; border-top: var(--bw) solid var(--grey); padding-top: var(--sp-8); }
.checkout__facts { margin: 0; padding-left: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-4); }
.checkout__consent { border: var(--bw) solid var(--grey); border-radius: var(--radius); padding: var(--sp-12) var(--sp-16); }
.checkout__consent summary { font-weight: 700; cursor: pointer; }
.checkout__consent-body { white-space: pre-line; margin: var(--sp-12) 0 0; font-size: 0.9375rem; }
.checkout__sharing {
  margin: 0; padding: var(--sp-12) var(--sp-16);
  background: var(--mint); color: var(--dark); border-radius: var(--radius);
}
.checkout__consents { display: flex; flex-direction: column; gap: var(--sp-16); }
.checkout__card { min-height: 44px; padding: var(--sp-12) var(--sp-16); border: var(--bw) solid var(--grey); border-radius: var(--radius); }
.checkout__card-note { margin: 0; color: var(--grey); font-size: 0.9375rem; }
.checkout__success-lead { margin: 0; }
.checkout__success-zero { margin: 0; font-weight: 900; font-size: 1.25rem; }
.checkout__today-trigger { margin: 0; color: var(--grey); }
.checkout__magic-note { margin: 0; color: var(--grey); font-size: 0.9375rem; }

/* ---- Admin operations: the §26.5 ledger, §26.6 money controls, and the §31.7
   risk inventory, added Phase 16a. §26 licenses dashboard density here and
   nowhere else, so these are dense by design and are scoped to the Admin shell.
   Everything reads a slot; no hex literal and no arbitrary spacing value. */
.ops-block { display: flex; flex-direction: column; gap: var(--sp-8); }
.ops-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-16); flex-wrap: wrap;
}
.ops-tags { display: flex; gap: var(--sp-8); align-items: center; flex-wrap: wrap; }
.ops-filters {
  display: grid; gap: var(--sp-16);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-bottom: var(--sp-16);
}
.ops-stats {
  display: grid; gap: var(--sp-16);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.ops-stat__label { display: block; color: var(--grey); font-size: 0.9375rem; }
.ops-stat__value {
  display: block; font-size: 1.25rem; font-weight: 900;
  color: var(--mode-body); font-variant-numeric: tabular-nums;
}
/* The ledger table can exceed the viewport at 320px; it scrolls inside its own
   container so the page body never scrolls horizontally (§33.11.1). */
.admin-table-scroll .admin-table td { vertical-align: top; }
@media (max-width: 600px) {
  .ops-filters { grid-template-columns: 1fr; }
}

/* ---- Support operations, the composed timeline, and enforcement, added Phase
   16b. §26 licenses dashboard density in the Admin shell; these extend the
   Phase 16a operations vocabulary rather than introducing a second one. */
.ops-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-16); }
.ops-thread__body { margin: var(--sp-4) 0 0; white-space: pre-line; }
.ops-timeline { margin: 0; padding-left: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-16); }
.ops-timeline__summary { margin: var(--sp-4) 0 0; }
/* The customer-reads-this control is its own labelled checkbox — §28.4's
   no-bundling rule applied to an internal surface, because the consequence of
   getting it wrong is a §33.9.11 leak. */
.ops-check { display: flex; align-items: center; gap: var(--sp-8); min-height: 44px; }

/* ---- The §18 comment thread, added Phase 17b. It renders on the Backer's
   magic-link page, which is a customer surface — so this borrows the public
   rhythm rather than the Admin operations density (§26 licenses that in Admin
   only). Nothing here is a hex literal or an arbitrary spacing value. */
.comment-list {
  list-style: none; margin: var(--sp-16) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-16);
}
.comment {
  padding-bottom: var(--sp-16);
  border-bottom: var(--bw) solid var(--grey-light);
}
.comment:last-child { border-bottom: 0; padding-bottom: 0; }
.comment__meta { margin: 0; color: var(--grey); font-size: 0.9375rem; }
/* A comment is what a person wrote; their line breaks are part of it. */
.comment__body { margin: var(--sp-4) 0 var(--sp-8); white-space: pre-line; }

/* ---- The B.5 recovery state on the Backer magic-link page, added Phase 18b.
   A customer surface (public rhythm, not Admin density): the exact failed-
   payment block with its ONE Update card action (§21), the Stripe-hosted card
   field, and the requires-action state. No competing action shares the block
   (§30). Everything reads a slot; no hex literal, no arbitrary spacing. */
.backer__recovery {
  margin-top: var(--sp-16);
  padding: var(--sp-16);
  border: var(--bw) solid var(--mode-body);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: var(--sp-12);
}
/* Appendix B.5 is exact text; its line breaks are part of it. */
.backer__recovery-body { margin: 0; white-space: pre-line; }
.backer__recovery-card { min-height: 44px; }
.backer__recovery-note { margin: 0; color: var(--grey); font-size: 0.9375rem; }

/* ---- Phase 20b: the Backer support path (S29.9/S29.10) and the Admin-recorded
   ended explanation (S26.7). Customer surfaces keep the public rhythm; every
   value reads a slot - no hex literal, no arbitrary spacing. */
.backer__support {
  margin-top: var(--sp-24);
  display: flex; flex-direction: column; gap: var(--sp-12);
}
.backer__support-cases {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-12);
}
.backer__support-case {
  padding: var(--sp-12);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: var(--sp-8);
}
/* The S26.7 customer explanation is the Admin's own sentence; keep its breaks. */
.ended-banner__explanation { white-space: pre-line; }

/* ---- Phase 22c: the S27.7 digest preference and the notification history.
   The choice reuses the Selection treatment from .option - same outline, same
   brand fill - because it IS the same decision shape; only the marker differs,
   and the marker is what tells a reader the answers are exclusive.
   Every value reads a slot: no hex literal, no arbitrary spacing. */
.choice { display: flex; flex-direction: column; gap: var(--sp-8); }
.choice__item { align-items: flex-start; }
.choice__dot {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.125rem;
  border: none;
  outline: var(--bw) solid var(--grey);
  outline-offset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.choice__dot::after {
  content: "";
  width: 0.625rem; height: 0.625rem;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0;
}
.choice__item.is-selected .choice__dot { outline-color: var(--brand); }
.choice__item.is-selected .choice__dot::after { opacity: 1; }
.choice__text { display: flex; flex-direction: column; gap: var(--sp-4); }
.choice__sub { font-weight: 400; color: var(--grey); font-size: 0.9375rem; }

/* The history is a record, not a dashboard (S27.7, DNA S5.2): one column,
   newest first, no counters and no badges. There is deliberately no
   .notification-history__unread class - the absence is the enforcement. */
.notification-history { display: flex; flex-direction: column; gap: var(--sp-12); }
.notification-history__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-8);
}
.notification-history__item {
  padding: var(--sp-12);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.notification-history__when { color: var(--grey); font-size: 0.9375rem; }

/* ---- The account door: sign-in, password reset, and the Founder's campaign
   list. Added with the sign-in surfaces (S5.1, S5.2, S5.3, S5.5, S1.1).

   The product had no front door until now: sign-in existed only as a fallback
   inside /admin and /creator/campaigns, so it had no styles of its own and
   borrowed .admin-form. These are customer surfaces on the public shell, so
   they get their own block rather than wearing the Admin panel's - S26
   licenses dashboard density in Admin and nowhere else, and a shared class is
   how that leaks.

   Every value reads a slot: no hex literal, no arbitrary spacing, px only for
   the 44px touch minimum inherited via --touch. */

/* Sign in sits outside <nav> and is pushed to the end of the header row. When
   the row wraps at a narrow width it simply takes its own line - no hamburger,
   because DNA S5.12 refuses to hide the way to anywhere behind a state. */
.site-header__account { margin-inline-start: auto; display: flex; }
/* Reads the button slots rather than picking a colour, so it stays correct in
   every section mode. Outlined at rest - it must not compete with the one
   primary action on the page it renders over (DNA S5.6, S5.8) - and filled
   when it IS the current page, which is weight AND fill, never colour alone. */
.site-header__signin {
  min-height: var(--touch); display: inline-flex; align-items: center;
  padding-inline: var(--sp-16);
  font-weight: 900; text-decoration: none;
  background: var(--brand-0);
  color: var(--btn2-text);
  outline: var(--bw-btn) solid var(--btn2-border);
  outline-offset: 0;
  border-radius: var(--radius);
}
.site-header__signin.is-current {
  background: var(--btn1-bg);
  color: var(--btn1-text);
  outline-color: var(--btn1-border);
}

/* One question per moment (DNA S5.1): the shell is narrow on purpose, so a
   sign-in form never reads as a page with several things to do on it. */
.auth {
  width: min(30rem, 100%); margin-inline: auto;
  display: grid; gap: var(--sp-24);
}
.auth__head { display: grid; gap: var(--sp-12); }
.auth__lede { margin: 0; color: var(--mode-body); }
.auth__form { display: grid; gap: var(--sp-16); justify-items: start; }
.auth__form > .field { width: 100%; }
.auth__aside { display: grid; gap: var(--sp-12); justify-items: start; }
.auth__aside p { margin: 0; }
.auth__note { color: var(--grey); }

/* The Founder's campaign list is the same shell one measure wider: it holds
   rows rather than one form, and a 30rem column would wrap every destination
   label onto its own line. */
.auth-shell {
  width: min(var(--measure), 100%); margin-inline: auto;
  display: grid; gap: var(--sp-32);
}
.auth-shell__head { display: grid; gap: var(--sp-12); }

/* Not a dashboard (S26): rows, not tiles. No count, no meter, no badge. */
.campaign-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-16);
}
.campaign-list__row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-16);
}
.campaign-list__what { display: grid; gap: var(--sp-4); }
.campaign-list__what h2 { margin: 0; }
.campaign-list__ref { margin: 0; color: var(--grey); font-size: 0.9375rem; }

/* ═════════════════════════════════════════════════════════════════════════════
   PHASE 25 — the Founder Admin workspace (Spec §26.1), added 2026-08-10.

   The Admin shell (top bar, view stack, tabs, tables, timeline) and the Founder
   workspace that lives inside it: the Founder list, and the detail surface with
   its persistent header and five panes — Overview · Details · Campaigns · Money
   · History.

   §26 licenses dashboard density in Admin and nowhere else, so this section
   packs rows the way PHASE 06's does. DNA §5.14 is not repealed by it: a Founder
   row still reads Glance (name, product, state) → Act (open, edit, decide) →
   Explore (the expandables and the audit detail behind them).

   Three conventions this section commits to, because two other tracks build
   against it:

   1. THE VIEW STACK. `.views` holds every `.view`; a view is hidden until it
      carries `.is-active`. Both views stay mounted so the horizontal transition
      has something to slide, which is also why `.views` clips its X axis.
   2. SCOPED OVERRIDES. Where proovd.css already owns a selector — `.helper`,
      `.accordion__head`, `.modal`, `.btn--tertiary` — this section never
      redefines it. It qualifies it by element (`p.helper`), scopes it to the
      Admin view (`.view .accordion__head`), or adds a modifier
      (`.modal--form`). A phase section that re-declares a base component is how
      a Backer surface silently inherits an Admin decision.
   3. RESPONSIVE IS A CORRECTION, NOT A COAT OF PAINT. The reference prototype
      has real overflow problems at narrow widths — an eight-column roster, a
      three-column detail header, a fixed nav row. Each fix below says which one
      it is answering. The rule everywhere: wide content scrolls inside its own
      container; the page body never scrolls sideways (§33.11.1).

   Same discipline as every section above — read a mode slot or a token, never a
   raw value; px only for hairlines, radii, and the 44px touch minimum, which is
   reached through --touch.
   ──────────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────── §26.1 SHELL */

/* The bar wraps rather than compressing: at a narrow width the nav takes its own
   line and the brand keeps its position, which is DNA §5.12's rule applied to
   chrome. A hamburger would hide the way to somewhere behind a state. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-16) var(--sp-32);
  width: var(--wrap);
  margin-inline: auto;
  padding-block: var(--sp-16);
  padding-inline: var(--gutter);
}
.wordmark {
  font-weight: 900;
  font-size: 1.375rem;
  color: var(--darker);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.wordmark .adm {
  color: var(--grey);
  font-weight: 700;
  font-size: 0.9375rem;
  margin-left: var(--sp-4);
}

/* RESPONSIVE CORRECTION — the prototype's nav is a plain flex row, so a fifth
   section or a narrow phone pushes the brand off screen. It scrolls inside the
   bar instead. The padding/negative-margin pair is not decoration: `overflow-x:
   auto` makes the Y axis compute to `auto` as well, which would shave the
   2px :focus-visible ring and its 2px offset off a focused nav item. */
.topnav {
  display: flex;
  gap: var(--sp-24);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block: var(--sp-4);
  margin-block: calc(var(--sp-4) * -1);
}
.navlink {
  background: none;
  border: none;
  padding: var(--sp-8) 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--grey);
  white-space: nowrap;
  flex: none;
  position: relative;
}
/* Current location by weight AND ink AND the rule below it — never colour
   alone, which is the same commitment `.admin-nav__link.is-current` makes. */
.navlink.is-active { color: var(--darker); font-weight: 900; }
.navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(var(--u, 0));
  transform-origin: var(--uo, left center);
}
/* Pure CSS, so the active marker is correct before GSAP loads and after it
   fails — `--u` is only ever tweened for hover. */
.navlink.is-active::after { --u: 1; }

/* A parked destination stays visible and focusable so it can announce why it is
   parked. `disabled` would remove it from the tab order and say nothing. */
.navlink[aria-disabled="true"],
.btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }

.topbar__right {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8) var(--sp-16);
}
.envchip {
  background: var(--accent-yellow);
  color: var(--darker);
  font-weight: 700;
  font-size: 0.8125rem;
  padding: var(--sp-4) var(--sp-12);
  border-radius: var(--radius);
  white-space: nowrap;
}
/* CORRECTION — the prototype hides this below 900px. It carries webhook health
   and the deployed version, which is exactly what an Admin wants when something
   looks wrong on a phone, so it wraps onto its own line instead of vanishing. */
.envmeta { color: var(--grey); font-size: 0.8125rem; font-weight: 500; }


/* ─────────────────────────────────────────────────────────── §26.1 VIEWS */

/* `overflow-x: clip` clips without becoming a scroll container, so the sliding
   view transition never spawns a page-level horizontal scrollbar and the Y axis
   stays `visible` — a dropdown opening from the header is not shaved. `hidden`
   would force overflow-y to `auto` and give the whole shell a scrollbar. */
.views {
  position: relative;
  width: var(--wrap);
  margin-inline: auto;
  min-height: 72vh;
  overflow-x: clip;
}
.view { display: none; padding: var(--sp-32) var(--gutter) var(--sp-120); }
.view.is-active { display: block; }


/* ══════════════ Two rules that outlived the workspaces (2026-08-21)

   The Admin panel’s screens were removed so it can be rebuilt one section at
   a time, and PHASE 25–29, 31–32 and 35–37 went with them. These two rules
   were inside those sections and are still used by surfaces that survived, so
   they are re-homed here rather than deleted — a class whose definition goes
   missing does not fail a build, it just renders wrong somewhere nobody is
   looking (the `.sr-only` defect of 2026-08-11).

   `.admin-auth` is the sign-in page’s own minimal frame. `AdminSignIn` is not
   part of the rebuild: an Admin still has to get in, and that door stands
   outside `.views` with no shell around it. `.admin-signin` at the top of
   this file already owns the column; this supplies the page it sits on.

   `.page-title` came from PHASE 35 and is used by `StripeReturn` — which is a
   PAYOUTS surface, not an Admin one — and by the section placeholders. It was
   already once-bitten: PHASE 35 records that it was used by two files and
   defined by nothing, so the payout return page rendered its `h1` smaller
   than the text beneath it until somebody looked. */
.admin-auth {
  min-height: 100vh;
  display: grid;
  align-content: start;
  padding: var(--sp-24);
  background: var(--mode-bg);
}
.admin-auth .wordmark { justify-self: center; }
.admin-auth .admin-signin { justify-items: stretch; }

.page-title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--mode-title);
}
/* ════════════════════════════════════ PHASE 30 — the Admin Tasks panel
   (Spec §26, §30, §28.5; DNA §5.2, §5.4, §5.10), added 2026-08-16.

   Built from the supplied Tasks reference — a Google-Tasks-style floating
   popup: a launcher pill in the bottom-right corner and a panel that slides
   in from the right edge, floating above the workspace without ever taking
   part in its layout. Its inline CSS is a visual guide and was never copied;
   its palette maps onto the token set (--night is --darker, --forest is
   --dark, --muted is --moss, its hover mint is --stat-mint-bg).

   LAYERING. The 850–899 band was free and this section takes it: launcher at
   860, panel at 870 — above .dock (800), and BELOW .scrim (940) so a
   ConfirmDialog's scrim correctly dims the panel behind it, and below .toast
   (1000), which is deliberately on top because a confirmation must clear a
   panel. 900 and 950 stay untouched (.drawer/.skip-link and .modal/.cr-palette
   own them).

   The three conventions PHASE 25 set, and 26–29 restated, bind here too:

     1. TOKENS ONLY. Read a mode slot or a token, never a raw value. px is
        legal for hairlines, radii, and the 44px touch minimum (via --touch).

     2. SCOPED OVERRIDES. Everything new is prefixed .tsk-, and the pieces
        that already exist — .input, .helper, .grey, .kicker, .btn, .sr-only —
        are reused rather than restyled.

     3. RESPONSIVE IS A CORRECTION. Each media rule names the overflow problem
        it answers. The pressure point here: a 420px side panel on a 320px
        phone leaves nothing behind it and its close control off-screen, so
        under 600px the panel becomes a bottom SHEET — .drawer's own answer,
        with its comment "§8.1: sheets, not side drawers" — and the page body
        never scrolls sideways (§33.11.1).
   ═════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── THE LAUNCHER */

.tsk-launch {
  position: fixed;
  right: var(--sp-24);
  bottom: var(--sp-24);
  z-index: 860;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--touch);
  padding: 0 var(--sp-24);
  border: var(--bw) solid var(--darker);
  border-radius: var(--radius);
  background: var(--darker);
  color: var(--brand);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.tsk-launch:hover { background: var(--dark); border-color: var(--dark); }
.tsk-launch[hidden] { display: none; }

.tsk-badge {
  display: inline-grid;
  place-items: center;
  min-width: var(--sp-24);
  min-height: var(--sp-24);
  padding: 0 var(--sp-4);
  background: var(--brand);
  color: var(--darker);
  font-size: 0.75rem;
  font-weight: 850;
  border-radius: var(--radius);
}
/* The overdue tone: the accent the toasts already use for "needs a look". */
.tsk-badge--over { background: var(--accent-yellow); }

/* ────────────────────────────────────────────────────────────── THE PANEL */

.tsk-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(26.25rem, 100vw);
  z-index: 870;
  background: var(--surface);
  border-left: var(--bw) solid var(--brand);
  display: flex;
  flex-direction: column;
  color: var(--darker);
}

.tsk-head {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-16) var(--sp-24) var(--sp-12);
  border-bottom: var(--bw) solid var(--brand);
}
.tsk-head__title {
  margin: 0;
  flex: 1;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.tsk-x {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--dark);
  min-width: var(--touch);
  min-height: var(--touch);
  border-radius: var(--radius);
}
.tsk-x:hover { background: var(--stat-mint-bg); }

.tsk-lists {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  padding: var(--sp-12) var(--sp-24);
  border-bottom: 1px solid var(--grey-light);
  scrollbar-width: thin;
}
.tsk-listbtn {
  flex: none;
  border: 1px solid var(--grey);
  background: var(--surface);
  color: var(--dark);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  min-height: 36px;
  padding: 0 var(--sp-12);
  border-radius: var(--radius);
  cursor: pointer;
}
.tsk-listbtn:hover { background: var(--stat-mint-bg); }
.tsk-listbtn.is-on {
  background: var(--darker);
  border-color: var(--darker);
  color: var(--white);
}
.tsk-listbtn--add { border-style: dashed; }

.tsk-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-24);
  border-bottom: 1px solid var(--grey-light);
}
.tsk-bar__sort { flex: 1; }
.tsk-bar__sort .input { min-height: 38px; padding-block: 0; }
.tsk-bar__done {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: 0.8125rem;
  font-weight: 750;
  color: var(--moss);
  cursor: pointer;
  white-space: nowrap;
}
/* The host stylesheet's input min-height would stretch this checkbox into an
   oval — the reference's own trap comment. Pin every axis. */
.tsk-bar__done input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  padding: 0;
  accent-color: var(--brand);
}

.tsk-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-8) 0 var(--sp-24);
}
.tsk-body--form { padding: var(--sp-24); }
.tsk-state { flex: 1; overflow-y: auto; padding: var(--sp-24); }

.tsk-empty {
  padding: var(--sp-32) var(--sp-24);
  color: var(--moss);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.tsk-items { list-style: none; margin: 0; padding: 0; }

.tsk-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-24);
  border-bottom: 1px solid var(--grey-lightest);
  align-items: start;
}
.tsk-item:hover { background: var(--brand-5); }

/* The 44px trap, answered as the reference's own comment demands: the host
   stylesheet sets min-height and padding on inputs, which turned this round
   checkbox into a 30×44 oval. Pin every axis; never weaken --touch. */
.tsk-check {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  flex: none;
  padding: 0;
  margin: 1px 0 0;
  box-sizing: border-box;
  border: var(--bw) solid var(--brand);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  display: block;
}
.tsk-check:hover { border-color: var(--dark); }
.tsk-check:checked { background: var(--brand); }
.tsk-check:checked::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--darker);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.tsk-item__body { min-width: 0; }
.tsk-item__title {
  margin: 0;
  font-size: 0.96875rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  max-width: none;
}
.tsk-item.is-done .tsk-item__title {
  text-decoration: line-through;
  color: var(--moss);
  font-weight: 500;
}
.tsk-item__notes {
  margin: var(--sp-4) 0 0;
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--moss);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: none;
}
.tsk-item__who { margin: var(--sp-4) 0 0; }
.tsk-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
  align-items: center;
}
.tsk-item__acts { display: flex; gap: var(--sp-4); margin-left: auto; }

.tsk-mini {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--dark);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--radius);
  font-family: inherit;
  text-decoration: underline;
  text-decoration-color: var(--sage);
  text-underline-offset: 0.25em;
}
.tsk-mini:hover { background: var(--stat-mint-bg); text-decoration-color: var(--dark); }

.tsk-sechead {
  margin: 0;
  padding: var(--sp-16) var(--sp-24) var(--sp-8);
  font-size: 0.6875rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
}

/* ── the reference chip: a link when there is somewhere to go, a label when
   there is not — never a dead button ─────────────────────────────────────── */
.tsk-ref {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: 100%;
  border: 1px solid var(--grey);
  background: var(--stat-mint-bg);
  color: var(--dark);
  font-size: 0.75rem;
  font-weight: 800;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--radius);
  text-decoration: none;
}
a.tsk-ref:hover { background: var(--brand); border-color: var(--brand); color: var(--darker); }
.tsk-ref__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tsk-ref--label {
  cursor: default;
  background: var(--grey-light);
  border-color: var(--grey-light);
  color: var(--moss);
  flex-direction: column;
  align-items: flex-start;
}
.tsk-ref__why { margin: 0; font-weight: 600; white-space: normal; }

.tsk-due {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--radius);
  border: 1px solid var(--grey);
  background: var(--surface);
  color: var(--moss);
}
.tsk-due--today {
  background: var(--accent-yellow);
  border-color: var(--darker);
  color: var(--darker);
}
.tsk-due--late {
  background: var(--darker);
  border-color: var(--darker);
  color: var(--white);
}

.tsk-foot {
  padding: var(--sp-12) var(--sp-24);
  border-top: var(--bw) solid var(--brand);
  display: flex;
  gap: var(--sp-8);
  background: var(--surface);
}
.tsk-primary { flex: 1; }

/* ─────────────────────────────────────────────────────────────── COMPOSE
   Covers the panel's own contents (absolute, inset 0) instead of opening a
   second floating layer — one panel on screen at a time, never a popup
   stacked on a popup. z-index is local to the panel's stacking context. */

.tsk-compose {
  position: absolute;
  inset: 0;
  background: var(--surface);
  z-index: 5;
  display: flex;
  flex-direction: column;
}

.tsk-now {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
  border: 1px solid var(--brand);
  background: var(--stat-mint-bg);
  padding: var(--sp-12);
  margin-bottom: var(--sp-24);
  border-radius: var(--radius);
}
.tsk-now__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 750;
  line-height: 1.45;
  color: var(--dark);
}
.tsk-now__text b { display: block; font-size: 0.90625rem; font-weight: 850; overflow-wrap: anywhere; }

.tsk-refbox {
  border: 1px solid var(--grey);
  background: var(--brand-5);
  padding: var(--sp-16);
  border-radius: var(--radius);
  margin: 0 0 var(--sp-16);
}
.tsk-refbox__legend {
  font-size: 0.8125rem;
  font-weight: 850;
  padding: 0 var(--sp-4);
}
.tsk-targets {
  list-style: none;
  margin: 0 0 var(--sp-12);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-height: 14rem;
  overflow-y: auto;
}
.tsk-target {
  width: 100%;
  text-align: left;
  border: 1px solid var(--grey);
  background: var(--surface);
  color: var(--darker);
  font-family: inherit;
  font-size: 0.875rem;
  min-height: 40px;
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--radius);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.tsk-target:hover { background: var(--stat-mint-bg); }
.tsk-target.is-chosen {
  border-color: var(--darker);
  background: var(--darker);
  color: var(--white);
}
.tsk-refpreview {
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-8);
  border-top: 1px dashed var(--grey);
  font-size: 0.8125rem;
  font-weight: 750;
  color: var(--dark);
  line-height: 1.5;
}
.tsk-err {
  background: var(--accent-yellow);
  border-left: 4px solid var(--darker);
  padding: var(--sp-12);
  font-size: 0.84375rem;
  font-weight: 750;
  margin: 0 0 var(--sp-16);
  max-width: none;
}

/* ═══════════════════════════════════════════════ PHASE 30 — RESPONSIVE ══ */

@media (max-width: 600px) {
  /* A 420px side panel on a 320px phone leaves nothing behind it and pushes
     its own close control off-screen. The house answer is .drawer's own —
     "§8.1: sheets, not side drawers" — so the panel becomes a bottom sheet:
     full width, capped height, and the page body never scrolls sideways
     (§33.11.1). */
  .tsk-panel {
    top: auto;
    left: 0;
    width: 100vw;
    max-height: 85dvh;
    border-left: 0;
    border-top: var(--bw) solid var(--brand);
  }
  .tsk-launch { right: var(--sp-12); bottom: var(--sp-12); }
  .tsk-lists,
  .tsk-bar,
  .tsk-item,
  .tsk-sechead,
  .tsk-empty { padding-inline: var(--sp-16); }
  .tsk-head { padding-inline: var(--sp-16); }
  .tsk-foot { padding-inline: var(--sp-16); }
  .tsk-body--form { padding: var(--sp-16); }
}

/* ══════════════════════════ PHASE 33 — the public campaign page rebuilt
   (campaign-page-v2, Session B, 2026-08-18)

   The §18 campaign page redrawn to the supplied reference. §18 licenses this
   in its own words — "Every campaign page exposes all of the following; the
   DNA UX document controls presentation" — so the ORDER is the reference's
   and the CONTENT is §18's, all fourteen items.

   The three conventions PHASE 25 set, and 26–32 restated, bind here too:

     1. TOKENS ONLY. The reference's :root maps onto this file's 1:1, and the
        mapping is recorded rather than guessed:
          --light #E9FFE1 → --mint          --link #D2FBC2 → --leaf
          --soft  #95C79D → --sage          --muted #669370 → --moss
          --visual #F7F7F7 → --grey-lightest
          --light-stat #EAF7EE → --stat-mint-bg
          --blue  #DEFAFC → --accent-blue   --yellow #F7FF9E → --accent-yellow
          --line 2px→1px at ≤600px → --bw, which already does exactly that
        px is legal for hairlines, radii, and the 44px touch minimum.

     2. SCOPED OVERRIDES. Everything new is prefixed .pc- (.cmp- is PHASE 28's
        Campaigns Admin and .site-nav is the site header's own). The pieces
        that already exist — .btn, .tag, .kv, .doc-list, .accordion, .progress,
        .dock, .update, .consent, .sample-banner — are reused, never restyled
        in place.

     3. BRAND FILL TAKES --mint.  ← SUPERSEDED 2026-08-19 by the owner ruling
        (see §1/§2 above and CLAUDE.md). Brand fill now takes --white, and the
        six brand-filled rules below — .pc-avatars, .pc-demo__action,
        .pc-moment.is-active, .pc-benefit--check, .pc-reward__badge and
        .checkout__done-icon — were moved with it.

        This convention was written because the reference's own --white on
        brand was judged imperceptible: #FAFAFA on #41ED98 is 1.46:1 against
        #E9FFE1's 1.44:1, which was and remains true. The ruling makes it the
        product's answer anyway, on every brand fill, and one convention that
        holds everywhere beats two that each hold somewhere. Left here struck
        rather than deleted so the reasoning survives the reversal.

   The two breakpoints are the reference's own (1099.98px and 599.98px) and
   each rule names the overflow it answers.
   ═════════════════════════════════════════════════════════════════════════ */

/* Local fluid recipes. Both bounds always ship (§9); these are the reference's
   own display sizes, which sit between --fs-h2 and --fs-hero. */
.pc-hero,
.pc-benefits,
.pc-story,
.pc-campaign,
.pc-seller,
.pc-rewards,
.pc-build,
.pc-faq,
.pc-comments,
.pc-foot {
  --pc-display: clamp(2.75rem, 6vw, 6rem);
  --pc-h1:      clamp(3rem, 6.2vw, 6.7rem);
  --pc-num:     clamp(4rem, 9vw, 9rem);
  --pc-pad:     clamp(3.5rem, 7vw, 7rem);
}

/* The in-page anchors the campaign nav and the hero CTA point at. Without this
   the sticky header covers the heading it has just scrolled to. */
[id^="campaign-"] { scroll-margin-top: 6.5rem; }

/* The big band headings. One recipe, five bands. */
.pc-display {
  max-width: 14ch;
  margin: 0;
  color: var(--mode-title, var(--darker));
  font-size: var(--pc-display);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.94;
}


/* ── THE CAMPAIGN HEADER VARIANT ──────────────────────────────────────────
   The three campaign routes stay inside PublicLayout — it is thin, but it
   owns the skip link, the scroll reset, and focus into <main> on navigation
   (§33.11.1), and moving out would silently drop all three. */

/* A sticky header needs its own ground: without one the sample banner and the
   hero scroll THROUGH it. The reference's own treatment — solid page white and
   a brand hairline. Below .dock (800) and .scrim (940), which must both win. */
.site-header--campaign {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--brand);
}
.pc-nav { gap: var(--sp-32); }
.pc-nav__cta { min-width: 7.5rem; }


/* ── HERO ─────────────────────────────────────────────────────────────────
   Copy left, demo stage right. The reference's viewport-tall hero is kept
   only above 1100px: below it the stage stacks, and a 100svh hero would then
   be two full screens before the reader reaches anything at all. */

.pc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(28rem, 0.85fr);
  overflow: hidden;
  background: var(--grey-lightest);
  border-block: 1px solid var(--leaf);
}
.pc-hero__copy {
  padding: var(--pc-pad) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pc-kicker {
  margin: 0 0 var(--sp-16);
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  color: var(--moss);
  font-size: 0.9375rem;
  font-weight: 850;
}
.pc-hero__h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--darker);
  font-size: var(--pc-h1);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 0.9;
}
.pc-hero__h1 span { color: var(--brand); }
.pc-hero__lede {
  max-width: 30rem;
  margin: var(--sp-24) 0 0;
  color: var(--dark);
  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
  font-weight: 550;
  line-height: 1.45;
}
.pc-hero__actions {
  margin-top: var(--sp-32);
  display: flex;
  align-items: center;
  gap: var(--sp-24);
}
.pc-hero__cta { min-height: 3.65rem; padding-inline: var(--sp-24); }
.pc-hero__today { color: var(--moss); font-size: 1rem; font-weight: 750; }
.pc-hero__today strong { color: var(--dark); font-size: 1.25rem; }
.pc-hero__social {
  margin: var(--sp-48) 0 0;
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  color: var(--dark);
  font-size: 0.9375rem;
}
.pc-avatars { display: flex; }
.pc-avatars i {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  background: var(--dark);
  color: var(--mint);
  border: 2px solid var(--grey-lightest);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}
.pc-avatars i + i { margin-left: -0.55rem; background: var(--brand); color: var(--white); }

@media (min-width: 1100px) {
  .pc-hero { min-height: calc(100svh - 4.75rem); }
}


/* ── THE DEMO STAGE ───────────────────────────────────────────────────────
   Optional presentation of the Founder's own product. A campaign with no
   moments renders no stage at all, so nothing here needs an empty state. */

.pc-demo {
  min-width: 0;
  margin: var(--sp-16);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-24);
  background: var(--mint);
  color: var(--darker);
}
.pc-demo__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--moss);
  font-size: 0.9375rem;
  font-weight: 850;
}
.pc-demo__message { align-self: center; }
.pc-demo__state {
  display: inline-flex;
  padding: var(--sp-8) var(--sp-12);
  background: var(--dark);
  color: var(--mint);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pc-demo__headline {
  max-width: 11ch;
  margin: var(--sp-16) 0 var(--sp-24);
  color: var(--darker);
  font-size: clamp(2.25rem, 4.2vw, 4.25rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.94;
}
.pc-demo__signal {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--dark);
  font-size: 1rem;
  font-weight: 800;
}
.pc-demo__signal i {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--brand);
  border-radius: 50%;
}
/* The app's own control, illustrated. Deliberately not a button: nothing on
   this stage operates anything, and a control that looks live and is not is
   worse than one that reads as an illustration (§1.4). */
.pc-demo__action {
  min-height: 3.4rem;
  padding: var(--sp-12) var(--sp-16);
  display: inline-flex;
  align-items: center;
  background: var(--brand);
  color: var(--white);
  font-size: 1rem;
  font-weight: 900;
}
.pc-demo__moments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--bw) solid var(--dark);
}
.pc-moment {
  min-width: 0;
  min-height: 6.5rem;
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--white);
  color: var(--dark);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pc-moment + .pc-moment { border-left: 1px solid var(--dark); }
.pc-moment.is-active { background: var(--brand); color: var(--white); }
.pc-moment span { font-size: 0.8rem; font-weight: 900; }
.pc-moment strong { margin-top: var(--sp-8); font-size: 1rem; line-height: 1.15; }
.pc-moment small { margin-top: auto; padding-top: var(--sp-8); font-size: 0.78rem; font-weight: 750; }


/* ── BENEFITS ─────────────────────────────────────────────────────────────
   Three treatments named by SHAPE, never by one campaign's copy: §30 lists
   streaks among the forbidden mechanics, and a variant called `streak` is
   unusable by the next Founder. Each card's accent travels with its shape. */

.pc-benefits { padding: var(--pc-pad) var(--gutter); background: var(--white); }
.pc-benefit-grid {
  margin-top: clamp(2.5rem, 6vw, 5.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-16);
}
.pc-benefit {
  min-height: 23rem;
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--bw) solid var(--dark);
}
.pc-benefit h3 { margin: 0; font-size: 1.25rem; font-weight: 900; }
.pc-benefit > strong {
  margin-top: auto;
  font-size: clamp(1.75rem, 3vw, 3rem);
  letter-spacing: -0.05em;
  line-height: 1;
}
.pc-benefit--bars  { background: var(--accent-blue);   color: var(--dark); }
.pc-benefit--check { background: var(--brand); color: var(--white); border-color: var(--brand); }
.pc-benefit--dots  { background: var(--accent-yellow); color: var(--dark); }

.pc-benefit__bars { margin: auto 0; display: grid; gap: var(--sp-12); }
.pc-benefit__bars span {
  width: 58%;
  height: 1.15rem;
  display: block;
  background: var(--white);
  border: 1px solid var(--dark);
}
.pc-benefit__bars span:nth-child(2) { width: 84%; }
.pc-benefit__bars span:nth-child(3) { width: 100%; }
.pc-benefit__bars span:nth-child(4) { width: 70%; }
.pc-benefit__bars span.is-active { background: var(--brand); border-color: var(--brand); }

.pc-benefit__check {
  width: 8.5rem;
  height: 8.5rem;
  margin: auto;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--dark);
  border-radius: 50%;
}
.pc-benefit__check svg {
  width: 3.5rem;
  height: 3.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-benefit__dots {
  margin: auto 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-8);
}
.pc-benefit__dots i { aspect-ratio: 1; background: var(--dark); border-radius: 50%; }
.pc-benefit__dots i.is-rest { background: transparent; border: var(--bw) solid var(--dark); }


/* ── STORY ────────────────────────────────────────────────────────────────
   The pull quote IS the band heading — that is the reference's design, and
   §18 item 10 asks for the narrative, not for a heading that says "Story". */

.pc-story {
  padding: var(--pc-pad) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.55fr);
  grid-template-areas: "founder action" "quote action" "expand expand";
  align-items: start;
  column-gap: clamp(2rem, 8vw, 9rem);
  row-gap: var(--sp-32);
  background: var(--white);
  border-block: 1px solid var(--leaf);
}
.pc-founder-mark { grid-area: founder; display: flex; align-items: center; gap: var(--sp-12); }
.pc-founder-mark > span {
  width: 4.2rem;
  height: 4.2rem;
  display: grid;
  place-items: center;
  background: var(--dark);
  color: var(--mint);
  font-size: 1rem;
  font-weight: 900;
}
.pc-founder-mark p { margin: 0; display: flex; flex-direction: column; }
.pc-founder-mark strong { color: var(--dark); font-size: 1rem; }
.pc-founder-mark small { margin-top: var(--sp-4); color: var(--moss); font-size: 0.85rem; font-weight: 750; }
.pc-story .pc-display { grid-area: quote; max-width: 16ch; }
.pc-story__expand { grid-area: expand; }
.pc-story__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 5vw, 5rem);
}
.pc-story__cols h3 { margin-top: 0; }


/* ── THE CAMPAIGN PANEL — items 4, 5 and 6 ────────────────────────────────
   The number is the hero (DNA §5.1). The eyebrow reads `Order threshold`,
   never the reference's own word for it: §3.2 bans that word for an Idea
   threshold in EVERY audience, and its last paragraph binds identifiers too —
   which is why no class, prop, or register value below carries it either.
   §33.11.3's scan reads the built bundle, where a prop name survives
   minification; the Campaigns hub hit exactly that scan on its first draft. */

.pc-panel { padding: var(--pc-pad) var(--gutter); display: grid; gap: var(--sp-48); }
.pc-count { display: grid; gap: var(--sp-8); }
.pc-count__eyebrow {
  color: var(--leaf);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pc-count__value {
  margin: 0;
  color: var(--white);
  font-size: var(--pc-num);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 0.8;
}
.pc-count__value small { color: var(--brand); font-size: 0.3em; letter-spacing: -0.03em; }
.pc-count p { margin: 0; color: var(--mint); font-size: 1.125rem; font-weight: 800; }

/* The reference's own bar, expressed through the existing Progress component
   so the ARIA role, name, and value text come with it (§28.5). */
.pc-track { margin-bottom: var(--sp-24); }
.pc-panel__note { margin: 0; color: var(--mint); font-size: 1rem; }
.pc-panel__h3 { margin: 0 0 var(--sp-12); color: var(--white); }
.pc-panel__lede { margin: 0 0 var(--sp-24); color: var(--mint); font-size: 1.125rem; }
.pc-panel__cancel { margin: var(--sp-16) 0 0; color: var(--leaf); font-weight: 750; }

.pc-steps {
  margin: 0 0 var(--sp-24);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-16);
  list-style: none;
  counter-reset: none;
}
.pc-steps li {
  min-height: 7rem;
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-12);
  background: var(--brand-5);
  border: 1px solid var(--brand);
}
.pc-steps li span { color: var(--brand); font-size: 1rem; font-weight: 900; }
.pc-steps li strong { color: var(--white); font-size: 1.125rem; line-height: 1.2; }


/* ── THE SELLER BAND — items 2, 7 and 8 ───────────────────────────────────
   §18 requires the merchant-of-record disclosure ABOVE the pre-order action.
   This band sits immediately before .pc-rewards, which holds every control
   that can open checkout, so the requirement is satisfied literally. */

.pc-seller { padding: var(--pc-pad) var(--gutter); }
.pc-seller__lede { max-width: var(--measure); font-size: 1.125rem; }
.pc-seller__grid {
  margin-top: var(--sp-48);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 5vw, 5rem);
}
.pc-seller__grid h3 { margin-top: 0; }
.pc-seller__grid h4 { margin-bottom: var(--sp-8); }


/* ── REWARDS — items 3 and 9 ──────────────────────────────────────────────
   The cards are a real toggle group: `aria-pressed` per choice, arrow keys
   across them, and the CHOSEN reward is what the checkout opens against.
   A sold-out card stays visible and unavailable (§19), never hidden. */

.pc-rewards { padding: var(--pc-pad) var(--gutter); background: var(--grey-lightest); }
.pc-rewards__pretax { max-width: var(--measure); margin: var(--sp-24) 0 0; color: var(--moss); }
.pc-reward-grid {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-16);
  align-items: start;
}
.pc-reward { min-width: 0; background: var(--white); border: var(--bw) solid var(--leaf); }
.pc-reward.is-selected { border-color: var(--brand); }
.pc-reward__choice {
  width: 100%;
  min-height: var(--touch);
  padding: var(--sp-24);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  background: transparent;
  color: var(--dark);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pc-reward__choice:disabled { cursor: default; color: var(--grey); }
.pc-reward__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); }
.pc-reward__badge {
  padding: var(--sp-8) var(--sp-12);
  background: var(--dark);
  color: var(--mint);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.is-selected .pc-reward__badge { background: var(--brand); color: var(--white); }
.pc-reward__mark {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--moss);
}
.is-selected .pc-reward__mark { background: var(--brand); border-color: var(--brand); }
.pc-reward__title {
  margin-top: var(--sp-24);
  color: var(--darker);
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.pc-reward__price {
  color: var(--dark);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 0.9;
}
.pc-reward__pretax { color: var(--moss); font-size: 0.85rem; font-weight: 750; }
.pc-reward__contents { margin-top: var(--sp-16); display: grid; gap: var(--sp-8); }
.pc-reward__contents span { color: var(--dark); font-size: 1rem; font-weight: 750; }
.pc-reward__meta {
  margin-top: var(--sp-16);
  padding-top: var(--sp-12);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-16);
  border-top: 1px solid var(--leaf);
  color: var(--dark);
  font-size: 0.9rem;
  font-weight: 850;
}
.pc-reward__facts { padding: 0 var(--sp-24) var(--sp-24); }

.pc-preorder { margin-top: clamp(2.5rem, 6vw, 5rem); max-width: var(--measure); }
.pc-preorder h3 { margin-top: 0; }


/* ── UPDATES — item 12 ────────────────────────────────────────────────────
   The latest update is the feature; the rest sit behind one disclosure. The
   metric renders as value + label together, because the label IS the number's
   accessible name — a bare `86%` reads as nothing at all (§28.5). */

.pc-build { padding: var(--pc-pad) var(--gutter); background: var(--white); }
.pc-build .update-list { margin-top: clamp(2rem, 5vw, 4rem); display: grid; gap: var(--sp-24); }
.update--featured {
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-32);
  background: var(--accent-blue);
  border: var(--bw) solid var(--brand);
}
.update--featured .update__meta { grid-column: 1 / -1; }
.update__metric {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--dark);
}
.update__metric strong {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 1;
}
.update__metric span { color: var(--moss); font-size: 0.85rem; font-weight: 850; }
.update-archive { display: grid; gap: var(--sp-24); }


/* ── FAQ — item 11 ────────────────────────────────────────────────────────*/

.pc-faq { padding: var(--pc-pad) var(--gutter); }
.pc-faq .pc-display { margin-inline: auto; text-align: center; }
.pc-faq__list {
  width: min(100%, 60rem);
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  background: var(--white);
  border: var(--bw) solid var(--brand);
}


/* ── COMMENTS — item 13 ───────────────────────────────────────────────────
   A band of its own above the footer. The thread itself lives on the Backer's
   magic-link page — §18 admits only an authenticated Backer, and nobody on
   this page is authenticated, so there is nothing here to attribute a post to. */

.pc-comments { background: var(--white); }


/* ── ITEM 14 — the dark footer band ───────────────────────────────────────
   This band and <SiteFooter/> below it are two dark bands that read as one
   footer, which is the reference's own arrangement. */

.pc-foot {
  padding: var(--pc-pad) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}
.pc-foot__lead h2 { margin-top: 0; }
.pc-foot__platform { margin: 0; color: var(--leaf); font-size: 1rem; font-weight: 750; }
.pc-foot__body > p { margin-top: 0; }


/* ── THE PHONE DOCK ───────────────────────────────────────────────────────
   The existing .dock, which is already fixed with safe-area padding below
   600px and static above it — a second fixed bar would be a second answer. */

.pc-dock { align-items: center; }
.pc-dock__what { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pc-dock__what span {
  overflow: hidden;
  color: var(--moss);
  font-size: 0.8rem;
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pc-dock__what strong { margin-top: var(--sp-4); color: var(--dark); font-size: 0.95rem; }
/* Above the phone breakpoint the dock is the reference's own: absent. The
   reward card's action is the control, and a duplicate bar competing with it
   would be two primary actions in one payment state (§30). */
@media (min-width: 601px) { .pc-dock { display: none; } }


/* ═══════════════════════════════════════════════ PHASE 33 — RESPONSIVE ══
   Both breakpoints are the reference's own. Each rule names the overflow it
   answers; wide content scrolls inside its own container and the page body
   never scrolls sideways (§33.11.1). */

/* The hero's demo stage has a 28rem minimum, so below ~1100px the two-column
   hero cannot fit without the copy column collapsing under its own headline.
   Everything three-across has the same problem one card earlier. */
@media (max-width: 1099.98px) {
  .pc-nav { display: none; }
  .pc-hero { grid-template-columns: 1fr; }
  .pc-demo { min-height: 34rem; margin-top: 0; }
  .pc-benefit-grid,
  .pc-reward-grid,
  .pc-steps { grid-template-columns: 1fr; }
  .pc-benefit { min-height: 18rem; }
  .pc-story {
    grid-template-columns: 1fr;
    grid-template-areas: "founder" "quote" "action" "expand";
  }
  .pc-story__cols,
  .pc-seller__grid,
  .pc-foot { grid-template-columns: 1fr; }
  .update--featured { grid-template-columns: 1fr; }
  .update__metric { align-items: flex-start; }
}

/* At 320 the two remaining pressure points are the demo's three moment
   buttons — which stay three-across, because stacking them turns a one-glance
   control into a scroll — and the hero headline, whose desktop clamp floor of
   3rem still overflows 12ch at that width. */
@media (max-width: 599.98px) {
  .pc-hero__copy { padding: var(--sp-64) var(--sp-16) var(--sp-48); }
  .pc-hero__h1 { max-width: 10ch; font-size: clamp(2.5rem, 13vw, 3.5rem); }
  .pc-hero__lede { max-width: 22rem; font-size: 1.0625rem; }
  .pc-hero__actions { align-items: stretch; flex-direction: column; gap: var(--sp-12); }
  .pc-hero__cta { width: 100%; }
  .pc-hero__social { margin-top: var(--sp-32); }

  .pc-demo { min-height: 28rem; margin: 0 var(--sp-16) var(--sp-16); padding: var(--sp-16); }
  .pc-demo__headline { margin: var(--sp-12) 0 var(--sp-16); font-size: 2.25rem; }
  .pc-moment { min-height: 6.1rem; padding: var(--sp-8); }
  .pc-moment span, .pc-moment small { font-size: 0.75rem; }
  .pc-moment strong { font-size: 0.85rem; }

  .pc-benefits,
  .pc-story,
  .pc-panel,
  .pc-seller,
  .pc-rewards,
  .pc-build,
  .pc-faq,
  .pc-foot { padding: var(--sp-80) var(--sp-16); }

  .pc-display { font-size: clamp(2.25rem, 10vw, 3rem); }
  .pc-benefit { min-height: 17rem; padding: var(--sp-24); }
  .pc-benefit__check { width: 7rem; height: 7rem; }
  .pc-count__value { font-size: clamp(3.5rem, 18vw, 5.5rem); }
  .pc-reward__price { font-size: 3.25rem; }
  .update--featured { padding: var(--sp-24); }
}

/* The demo advances on its own; a reader who has asked for less motion gets
   none of it. `reduced()` already stops the interval in the component — this
   is the CSS half, for the entrance the runtime would otherwise jump-cut. */
@media (prefers-reduced-motion: reduce) {
  .pc-demo__message { animation: none; }
}


/* ── PHASE 33 — one correction outside this page's own selectors ──────────
   `.accordion__head` has read a hardcoded `--darker` since Phase 02 and has
   no mode slot, so EVERY Accordion inside a `mode-dark` band has rendered
   near-black on dark green. That includes §18's own "How this works"
   merchant-of-record expander, which has shipped that way since Phase 14b —
   the browser pass is what found it, because the accessible name is correct
   either way and axe reads contrast against the element's own declared
   background rather than the band showing through it (PHASE 28 and 31 both
   recorded the same class of defect).

   Fixed at the slot rather than on this page, so every dark band gets it. */
.mode-dark .accordion__head { color: var(--mode-title); }
.mode-dark .accordion__body { color: var(--mode-body); }


/* ── PHASE 33 — SESSION C (2026-08-18): the modal chrome and the follow ────
   The checkout is a RESTYLE. `Drawer` is already Radix Dialog — portal,
   overlay, focus trap, Escape, backdrop dismiss, GSAP open/close — so the
   reference's `role="dialog" aria-modal="true"` behaviour already worked, and
   `CheckoutForm`'s three steps (details → review → success) already matched
   its two-steps-plus-done shell. Nothing below renumbers, reorders or merges
   them, and nothing below adds a card field: the reference's `#cardInput` is
   a mockup artefact and §34 gates live mode on samples mounting none. */

/* The reference's `STEP 1 OF 2`. Decorative — `Dialog.Title` is still the
   dialog's accessible name, and `.checkout__step` carries the step in text. */
.drawer__eyebrow {
  margin: 0 0 var(--sp-4);
  color: var(--mode-body);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkout__rail {
  margin-bottom: var(--sp-8);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.checkout__rail-seg {
  height: 0.45rem;
  background: var(--brand-5);
  border: 1px solid var(--brand);
}
.checkout__rail-seg.is-on { background: var(--brand); }
.checkout__step {
  margin: 0 0 var(--sp-16);
  color: var(--mode-body);
  font-size: 0.85rem;
  font-weight: 850;
}

/* The summary card and the `$0 today → $N later` pair. Both wrap values the
   §19 quote already returned; nothing here computes an amount. */
.checkout__summary {
  padding: var(--sp-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  background: var(--stat-mint-bg);
  color: var(--dark);
}
.checkout__summary > span { display: flex; flex-direction: column; font-weight: 900; }
.checkout__summary small { margin-top: var(--sp-4); color: var(--moss); font-weight: 750; }
.checkout__summary > strong { font-size: 1.5rem; }

.checkout__rule {
  margin: var(--sp-24) 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-16);
}
.checkout__rule > div {
  min-height: 6rem;
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--accent-blue);
  border: 1px solid var(--brand);
  color: var(--dark);
}
.checkout__rule strong { font-size: 1.5rem; }
.checkout__rule span { color: var(--moss); font-size: 0.85rem; font-weight: 850; }
.checkout__rule-arrow { color: var(--brand); font-size: 1.5rem; font-weight: 900; }

.checkout__cancel-note {
  margin: 0 0 var(--sp-24);
  color: var(--mode-body);
  font-weight: 800;
}

.checkout__done-icon {
  width: 4.5rem;
  height: 4.5rem;
  margin: var(--sp-8) auto var(--sp-16);
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--white);
}
.checkout__done-icon svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── `Follow build` ───────────────────────────────────────────────────────
   A RECORDED DEVIATION from §1 rule 6, built by explicit product direction
   (see migration 0050). It sits in the updates band's header, beside the
   heading — the reference's own placement — and never renders on a sample. */

.pc-build__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-32);
  flex-wrap: wrap;
}
.pc-follow {
  max-width: 26rem;
  padding: var(--sp-24);
  display: grid;
  gap: var(--sp-12);
  background: var(--grey-lightest);
  border: var(--bw) solid var(--leaf);
}
.pc-follow__title { margin: 0; color: var(--darker); font-weight: 900; }
.pc-follow__note { margin: 0; color: var(--moss); font-size: 0.9375rem; }
.pc-follow--done { border-color: var(--brand); }

@media (max-width: 599.98px) {
  .pc-build__head { align-items: stretch; flex-direction: column; gap: var(--sp-24); }
  .pc-follow { max-width: none; padding: var(--sp-16); }
  .checkout__rule { grid-template-columns: 1fr; }
  .checkout__rule-arrow { justify-self: center; transform: rotate(90deg); }
}

/* The way out of a follow ask, where there is no id to link back to yet. */
.follow-action__reassurance { margin: var(--sp-16) 0 0; color: var(--moss); }


/* ══════════════════════ PHASE 34 — the Founder onboarding flow rebuilt
   (Founder Flow v2, Session B, 2026-08-18)

   The Founder's path from an invited draft to a live campaign, redrawn to the
   supplied reference as a sequence OF pages rather than a form. Four of
   twenty-six are built; every later screen renders inside what is here.

   The conventions PHASE 25 set and 26-33 restated bind here too:

     1. TOKENS ONLY. The prefix is .ff- (.fhead/.fdr-/.fov-/.frec- are PHASE
        25/31's Founder ADMIN workspace and .cr- is PHASE 26/32's; neither is
        related to this). px is legal for hairlines, radii, and the 44px touch
        minimum.

     2. SCOPED. .btn, .choice, .field, .tag, .doc-list, .drawer, .sticker and
        .wordmark are reused, never restyled in place.

     3. BRAND FILL TAKES --mint (proovd.css:158). The reference's own #FAFAFA
        on #41ED98 is imperceptible, so its green CTAs read --mint here.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── THE TWELVE-COLOUR DECISION, made once for all twenty-six screens ──────
   The reference names nineteen colours. Seven map straight across: #41ED98
   --brand, #013F17 --dark, #012D10 --darker, #FAFAFA --white, #E9FFE1 --mint,
   #A2AFA8 --grey, #DEFAFC --accent-blue.

   The other twelve resolve to tokens that already exist. PHASE 34 mints NO new
   colour, and each resolution is a decision rather than a rounding:

     #3BDC8C  brand hover   -> the .btn variant swap. Section 7.1 expresses
                              hover as variant-1 <-> variant-2, not as a darker
                              shade; a second mechanism would give the product
                              two answers to what a hover is.
     #8FCBA3  mid green     -> --sage  (#95C79D, six hex points away)
     #4E8C67  muted green   -> --moss  (#669370)
     #4E785C  rule green    -> --moss
       Three mid-greens for three dash treatments is a distinction nobody can
       see at 5px, and the palette already carries a mid-green ramp with the
       same green cast. Two greens for three uses, and the flow's dashes match
       the rest of the product.
     #F4FFA0  pale yellow   -> --accent-yellow (#F7FF9E, three points away)
     #FBFFD4  cream         -> --accent-yellow as a FILL where the pale yellow
                              is a BORDER. The reference's two yellows differ by
                              role, and this system already expresses role as
                              border-vs-background.
     #DEF6FF  row blue      -> --accent-blue   (#DEFAFC)
     #F5F5F5  card grey     -> --grey-lightest (#F7F7F7)
     #E7F7EA  preview green -> --stat-mint-bg  (#EAF7EE)
     #B4B4B5  legal grey    -> --grey
     #E4E4E4  border grey   -> --grey
     #D6D6D6  disabled grey -> --grey, under .btn's own disabled treatment
       The last three are NEUTRAL greys. Every grey in this file is
       green-tinted (--grey #A2AFA8, --grey-light #F1F3F2, --grey-lightest
       #F7F7F7), so a neutral ramp would not sit beside them on one page - and
       introducing one changes the cast of the whole product, not this flow.

   ── The stage ─────────────────────────────────────────────────────────────
   The reference authors on a fixed 2496x1542 stage at scale(0.37). This takes
   its README's own option 2: divide by ~2.7 for CSS px at 1440 and express the
   result in the --sp- scale and clamp(), with the RATIOS as the source of
   truth. Section
   33.11.1's 320px reflow is not satisfiable by a scaled fixed stage.

   Border radius is var(--radius). The reference's "2px everywhere. Never
   rounded." and this file's "sharp. everywhere." were the same design intent,
   and one of them was already the system.

   RESOLVED 2026-08-19 by the owner ruling: --radius is 2px on both postures,
   so the token now carries the reference's own number and this paragraph is
   history rather than a live decision.

   It is also, almost certainly, what the ruling meant by "those three come
   from the shipped Founder Flow". The flow's REFERENCE asked for 2px; this
   note is where the flow recorded declining it in favour of the token. The
   shipped flow used 1px like everything else, which is why that premise reads
   as inaccurate against the code and as reasonable against the reference.
   ═════════════════════════════════════════════════════════════════════════ */

/* Local display recipes. Both bounds always ship. These are the reference's
   own sizes converted: its 90px headline / 2.7 is about 33px at 1440. */
.ff {
  --ff-display: clamp(2rem, 4.6vw, 3.4rem);
  --ff-lede:    clamp(1.0625rem, 1.6vw, 1.375rem);
  --ff-gap:     clamp(1.5rem, 3vw, 2.5rem);
  --ff-pad:     clamp(1.25rem, 4vw, 3.5rem);
}

/* ── The full-bleed page ──────────────────────────────────────────────────
   Each page owns its viewport: no header, no footer, no progress bar, no
   navigation dock. `min-height` rather than `height`, because a page whose
   content is taller than the viewport must scroll rather than clip - which is
   the whole difference between this and the reference's fixed stage. */

.ff {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.ff__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--ff-pad);
  gap: var(--ff-gap);
  position: relative;
}
.ff__stage[hidden],
.ff-device-gate[hidden] {
  display: none !important;
}

.ff-device-gate {
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  padding: clamp(1.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--dark);
}
.ff-device-gate__mark {
  align-self: flex-start;
  display: block;
  width: auto;
  height: 1.25rem;
}
.ff-device-gate__body {
  flex: 1;
  width: min(100%, 58rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding-block: clamp(3rem, 10vh, 7rem);
}
.ff-device-gate__body h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.75rem, 8vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--dark);
}
.ff-device-gate__body p {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 2rem);
  line-height: 1.35;
  color: var(--dark);
}
.ff__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  flex-wrap: wrap;
}
.ff__top-right {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}
.ff__meta {
  font-weight: 700;
  color: var(--dark);
  font-size: 0.9375rem;
}
.ff__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-block: var(--ff-gap);
}

/* The message badge. It enters with the page and is then still - the
   reference's six-second shake loop is the pattern DNA 5.10 names. */
.ff__badge {
  position: fixed;
  right: var(--sp-24);
  bottom: var(--sp-24);
  z-index: 60;
}

/* ── The reference Help drawer ────────────────────────────────────────────
   Page-specific reading, then the founder handbook. It is not navigation and
   it is not a progress list. Geometry and colours are literal from the
   reference's `[data-drawer]`; Radix supplies focus trapping, Escape and
   scrim dismissal while `referenceDrawerOpen/Close` supply its timings. */

.ff-help-ref__scrim {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(1, 45, 16, 0.4);
}

.ff-help-ref {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 960;
  width: min(27rem, 88vw);
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: clamp(20px, 2.4vw, 32px) clamp(1.35rem, 4.4vw, 4rem);
  background: #012D10;
  color: #E9FFE1;
  font-family: 'Satoshi', sans-serif;
  line-height: normal;
  outline: none;
}

.ff-help-ref__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.8rem, 1.3vw, 1.1rem);
  margin-bottom: clamp(18px, 2.2vw, 28px);
}

.ff-help-ref__head h2 {
  margin: 0;
  color: #E9FFE1;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.03em;
}

.ff-help-ref__head button {
  width: clamp(2.75rem, 3.6vw, 3.3rem);
  height: clamp(2.75rem, 3.6vw, 3.3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: #E9FFE1;
  cursor: pointer;
}

.ff-help-ref__head button:focus-visible {
  outline: 2px solid #41ED98;
  outline-offset: 2px;
}

.ff-help-ref__intro {
  margin-bottom: clamp(12px, 1.6vw, 18px);
  color: #A2AFA8;
  font-size: clamp(0.7rem, 0.82vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ff-help-ref__docs {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
}

.ff-help-ref__docs article,
.ff-help-ref__docs section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 1.6vw, 20px);
  border: 2px solid #1B4A2C;
  border-radius: 2px;
  background: transparent;
  color: #A2AFA8;
  font-family: 'Satoshi', sans-serif;
  text-align: left;
}

.ff-help-ref__docs article.is-current,
.ff-help-ref__docs section.is-current {
  border-color: #41ED98;
  background: rgba(65, 237, 152, 0.08);
}

.ff-help-ref__tag {
  color: #A2AFA8;
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ff-help-ref__docs article.is-current .ff-help-ref__tag,
.ff-help-ref__docs section.is-current .ff-help-ref__tag { color: #41ED98; }

.ff-help-ref__docs strong {
  margin-top: 2px;
  color: #E9FFE1;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.ff-help-ref__docs article > span:last-child,
.ff-help-ref__docs section > span {
  color: #A2AFA8;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

.ff-help-ref__docs a,
.ff-goal-help__docs a,
.ff-fee-help__docs a,
.ff-payout-ref__docs a {
  width: fit-content;
  margin-top: 6px;
  color: #41ED98;
  font-weight: 800;
  text-underline-offset: 3px;
}

@media (min-width: 1500px) {
  .ff-help-ref { padding-inline: clamp(4rem, 5vw, 7rem); }
  .ff-help-ref__head button { width: clamp(3.1rem, 2.6vw, 3.7rem); height: clamp(3.1rem, 2.6vw, 3.7rem); }
  .ff-help-ref__intro { font-size: clamp(0.8rem, 0.6vw, 0.92rem); }
  .ff-help-ref__tag { font-size: clamp(0.7rem, 0.55vw, 0.84rem); }
}

@media (max-width: 600px) {
  .ff-help-ref {
    inset: auto 0 0 0;
    width: 100%;
    height: 86dvh;
  }
}

/* ── Shared page furniture ────────────────────────────────────────────────  */

/* The reference sets an emphasised headline word as a sticker IMAGE, which
   takes the word out of the sentence for anybody not looking at it. Here it is
   the word, wearing the sticker. */
.ff-word {
  display: inline-block;
  border-radius: var(--radius);
  background: var(--mint);
  color: var(--dark);
  padding: 0 var(--sp-8);
  box-shadow: 0 0 0 var(--bw) var(--brand);
}

/* Every page's nav row. One primary, and the labels name where they go. */
.ff-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-16);
  margin-top: var(--ff-gap);
}
.ff-nav .btn--primary { margin-left: auto; }

/* ── Screen 1 — the invite ────────────────────────────────────────────────
   REBUILT 2026-08-20 to the supplied reference's own claim stage
   (`Proovd Founder Flow v2.dc.html`, `[data-claim]` / `claimWide`).

   ── This screen is PINNED to the reference, by explicit product direction ──
   The reference authors it once on a fixed 2496x1542 stage and scales that
   stage to the viewport (`claimFit`: `min(innerWidth/1440, innerHeight/1420)`,
   written by InviteClaim.tsx). Inside it sits a 1295px column at `scale(0.92)`.
   Every value below is the reference's own literal, read from its inline
   styles rather than derived: 196x60 HELP, a 285px band 100px down, a 90px
   headline 98px below that with a 28px stroke, 44px copy at 65px, a 122px
   control at 101px, and a 21px legal line at 40px.

   An earlier pass expressed those as RATIOS of a fluid container. That matches
   at exactly one viewport height and nowhere else, because the reference's
   scale is driven by `innerHeight / 1420` on any ordinary desktop window.

   Two conventions this file otherwise holds are deliberately suspended HERE
   and nowhere else, because the instruction was that the reference outranks
   the design system on this screen:

     - HEX LITERALS, not tokens. Six of the reference's colours have exact
       tokens (#41ED98 --brand, #013F17 --dark, #012D10 --darker, #E9FFE1
       --mint, #DEFAFC --accent-blue, #FAFAFA --white) and three do not
       (#0FE852 the HELP ink, #B4B4B5 the legal grey, #011E0B the pressed
       control). Mixing the two would leave half the screen able to drift with
       a token change and half not, so all nine are literal and this screen
       reads exactly as the reference does.

     - RADIUS 1px, not `var(--radius)`. The reference's `border-radius:1px` is
       what its HELP and its control carry. The owner ruling's 2px governs the
       rest of the product and is untouched.

   The project's global type rules DO reach in here — `h1..h6 { margin; line-
   height: 1.18; font-weight: 900 }`, `p { margin; max-width: 65ch }`, and
   `button { font: inherit }` — so every one of them is overridden explicitly
   below rather than left to win.  */

/* `FlowPage`'s chrome is not drawn on this screen: the reference puts the
   setup time and HELP on the stage's own first row. Hidden rather than
   emptied, so the wordmark and the second HELP leave the tab order too. */
.ff[data-flow-page='invite'] .ff__top { display: none; }

/* The reference's `[data-claim]`: `position:fixed;inset:0;overflow:hidden`.
   Nothing scrolls — the stage scales instead, which is why the composition is
   identical at every viewport and why this page can never reflow. */
.ff-invite {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
}

/* The stage. `scale(0.37)` is the reference's own placeholder value and is
   what renders before the layout effect runs; InviteClaim.tsx overwrites the
   whole transform on mount and on resize. */
.ff-invite__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  background: transparent;
  color: #011E0B;
  font-family: 'Satoshi', sans-serif;
  /* The reference's body sets neither, so its whole stage inherits the UA
     defaults. This file's `body` sets `--fs-body` (18px) and `line-height:
     1.6`, which reached in and made the setup time and the legal line taller
     than the reference's — measured as a 5.1px column-height difference before
     this was here. Resetting at the stage fixes the class rather than the two
     elements that happened to show it. */
  font-size: 16px;
  line-height: normal;
}

.ff-invite__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1295px;
  transform: translate(-50%, -50%) scale(0.92);
}

/* Row 1 — `display:flex;align-items:baseline;justify-content:space-between;gap:24px` */
.ff-invite__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.ff-invite__time {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -0.015em;
  /* The yielding half of the row: it may shrink, the control may not. */
  min-width: 0;
}
.ff-invite__help {
  width: 196px;
  height: 60px;
  box-sizing: border-box;
  border: 2px solid #41ED98;
  border-radius: 1px;
  background: transparent;
  color: #0FE852;
  font-family: 'Satoshi', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  /* `.btn`'s outline treatment is not used here — the reference's stroke is a
     BORDER, inside the 196x60 box, and an outline would sit outside it. */
  outline: none;
  line-height: normal;
  /* Horizontal padding, and a width this row can never take back.

     A flex item shrinks below its own `width` by default, and this one sits in
     a `space-between` row opposite a slot that used to carry a paragraph — so
     the button collapsed toward its label and HELP ended up flush against its
     own border. `flex: none` pins the 196x60 the reference draws; the padding
     is what keeps the label off the border if the label ever changes. Neither
     moves anything while the box is 196px and the text is centred. */
  flex: none;
  padding: 0 24px;
}
.ff-invite__help:hover { background: #012D10; }
.ff-invite__help:focus-visible { outline: 3px solid #41ED98; outline-offset: 4px; }

/* Row 2 — the envelope. The wrapper remains only because `inviteIntro` reveals
   it from 0 -> 285px; visually it is transparent. The art occupies the complete
   1295 x 285 footprint that the old blue band occupied. `overflow:hidden` keeps
   that entrance a reveal instead of allowing the fixed-height image to spill. */
.ff-invite__band {
  margin-top: 100px;
  height: 285px;
  background: transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Keep the image at its final fixed height while the wrapper opens around it,
   so the entrance reveals the full-size envelope rather than stretching it up
   from zero. `fill` deliberately matches the old band's exact dimensions. */
.ff-invite__band-art {
  display: block;
  flex: none;
  width: 100%;
  height: 285px;
  max-width: none;
  object-fit: fill;
}

/* Row 3 — the headline. `max-width:20ch` is what decides the line break, so it
   is not optional: without it the sentence sets across the full 1295px and
   wraps somewhere else entirely. */
.ff-invite__head {
  margin: 98px 0 0;
  max-width: 20ch;
  color: #012D10;
  font-size: 90px;
  font-weight: 700;
  line-height: 1.51;
  letter-spacing: -0.03em;
  -webkit-text-stroke: 28px #E9FFE1;
  paint-order: stroke fill;
}

/* Row 4 — the copy. `max-width: none` overrides the global 65ch cap; the
   reference sets none, and the cap would re-wrap it. */
.ff-invite__lede {
  margin: 65px 0 0;
  max-width: none;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
}

/* Row 5 — the control. A plain button with the reference's own border, not
   `.btn`: the tier brings an outline, a 44px min-height, `overflow:hidden` and
   a variant-swap hover, none of which the reference has. Its hover is a
   background darken and its press another, both stated inline there. */
.ff-invite__cta {
  margin-top: 101px;
  width: 100%;
  height: 122px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid #41ED98;
  border-radius: 1px;
  background-color: #013F17;
  color: #E9FFE1;
  font-family: 'Satoshi', sans-serif;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: normal;
  cursor: pointer;
  outline: none;
}
.ff-invite__cta:hover { background-color: #012D10; }
.ff-invite__cta:active { background-color: #011E0B; }
.ff-invite__cta:focus-visible { outline: 5px solid #E9FFE1; outline-offset: -10px; }

/* Row 6 — the legal line. */
.ff-invite__legal {
  margin: 40px 0 0;
  max-width: none;
  color: #B4B4B5;
  font-size: 21px;
  font-weight: 500;
  text-align: center;
}
.ff-invite__legal a {
  color: #B4B4B5;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The global `a::after` is the runtime's underline-draw, which rests at
   `scaleX(0)` and would fight the static underline above. */
.ff-invite__legal a::after { content: none; }

/* The splash. The reference's own: the page ground, a brand square, and a dark
   square inside it at 52%. `absolute` because `.ff-invite` is already the
   fixed full-bleed layer. */
.ff-invite__splash {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #FAFAFA;
  display: grid;
  place-items: center;
}
.ff-invite__splash-outer {
  width: min(38vmin, 320px);
  height: min(38vmin, 320px);
  background: #41ED98;
  display: grid;
  place-items: center;
}
.ff-invite__splash-inner {
  width: 52%;
  height: 52%;
  background: #013F17;
}

/* ── Screens 2-3 — confirming what we understood ──────────────────────────
   REBUILT 2026-08-20 to the supplied reference's `[data-problem]` / `probWide`
   branch, and the whole of what stood here before is gone with it. Only
   `.ff-confirm__status` survives, and only because six other screens in this
   flow render it.

   The composition is a fixed 2496x1542 stage scaled to the viewport, exactly
   as the invite above is — see `ConfirmAnswer.tsx` for `fitStages()` and its
   two multipliers. Every value below is the reference's own pixel value on
   that stage, so it is `px` throughout: a `--sp-` token inside a scaled stage
   would be a second, unscaled unit sitting beside scaled ones.

   Nothing scrolls. The page cannot reflow, which is why there is no 320px
   branch here and no media query below.

   The project's global type rules DO reach in — `h1..h6 { margin;
   line-height: 1.18; font-weight: 900 }`, `p { margin; max-width: 65ch }`,
   `textarea`, and `button { font: inherit }` — so every one of them is
   overridden explicitly rather than left to win.                            */

/* `FlowPage`'s chrome is not drawn on these screens: the reference gives them
   no wordmark, no HELP and no message badge at all. Hidden rather than
   emptied, so both controls leave the tab order too. */
.ff[data-flow-page='problem'] .ff__top,
.ff[data-flow-page='solution'] .ff__top { display: none; }

/* The reference's `[data-problem]`. */
.ff-prob {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
}

/* `scale(0.37)` is the reference's own placeholder and is what renders before
   the layout effect runs; ConfirmAnswer.tsx overwrites the whole transform on
   mount and on resize. */
.ff-prob__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  font-family: 'Satoshi', sans-serif;
  /* The reference's body sets neither, so its stage inherits the UA defaults.
     This file's `body` sets `--fs-body` and `line-height: 1.6`, which reach in
     and change every line box on the stage. Reset at the stage rather than at
     the four elements that happen to show it. */
  font-size: 16px;
  line-height: normal;
}

.ff-prob__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1304px;
  transform: translate(-50%, -50%);
}

/* ── The headline ─────────────────────────────────────────────────────────
   Read state: one line of running text with the sticker inline in it. Edit
   state: a centred flex row, sticker first. The two are different elements in
   the reference and are different elements here. */
.ff-prob__head {
  margin: 0;
  font-size: 62px;
  font-weight: 700;
  line-height: 1.51;
  letter-spacing: -0.03em;
  color: #013F17;
}
.ff-prob__head--edit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 33px;
}

/* The sticker sits on the baseline through a negative `vertical-align`, and
   the words either side of it are spaced by its own margins — there is no
   space character on either side of it in the markup. The two answers carry
   different heights and offsets, which is the reference's own tuning per
   image rather than one rule with a variable in it. */
.ff-prob__sticker {
  width: auto;
  display: inline;
}
.ff-prob[data-answer='problem'] .ff-prob__sticker {
  height: 175px;
  vertical-align: -60px;
  margin: 0 22px 0 38px;
}
.ff-prob[data-answer='solution'] .ff-prob__sticker {
  height: 140px;
  vertical-align: -45px;
  margin: 0 30px 0 50px;
}
/* In the edit headline both are 158px and the flex `gap` does the spacing. */
.ff-prob[data-answer='problem'] .ff-prob__sticker--edit,
.ff-prob[data-answer='solution'] .ff-prob__sticker--edit {
  height: 158px;
  vertical-align: baseline;
  margin: 0;
}

/* ── The panel ────────────────────────────────────────────────────────────
   A deep-green frame with 26px of side padding, wrapping a page-ground sheet.
   The frame is what `scaleX` opens on arrival. */
.ff-prob__panel {
  margin-top: 71px;
  background: #013F17;
  padding: 60px 26px 68px;
}
.ff-prob__sheet {
  position: relative;
  background: #FAFAFA;
  padding: 98px 108px 66px;
}

/* The rail: 9px, seventeen pixels outside the sheet, top and bottom aligned
   to the sheet's own padding so it spans exactly the field. Its opacity is
   the reference's `probBar` and is set from the surface; the transition is
   the reference's own inline `.25s ease`. */
.ff-prob__rail {
  position: absolute;
  top: 98px;
  bottom: 66px;
  right: -17px;
  width: 9px;
  background: rgba(233, 255, 225, 0.16);
  transition: opacity 0.25s ease;
}
.ff-prob__thumb {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 2px;
  background: #41ED98;
}

/* The field. The native scrollbar is off — the rail above is the only one —
   and the height transition is the reference's own inline declaration, which
   is the one place in this flow motion is CSS rather than GSAP. */
.ff-prob__text {
  display: block;
  width: 100%;
  box-sizing: content-box;
  border: none;
  outline: none;
  resize: none;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0;
  margin: 0;
  background: transparent;
  font-family: 'Satoshi', sans-serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.51;
  letter-spacing: -0.012em;
  color: #013F17;
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-prob__text::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ff-prob__text[readonly] { cursor: default; }
.ff-prob__text:focus-visible { outline: none; }

/* The edit control. 196x60 with a 48px label inside it: the box is the
   reference's and so is the type size, which is why the label fills it. */
.ff-prob__editrow {
  display: flex;
  justify-content: center;
  margin-top: 51px;
}
.ff-prob__edit {
  width: 196px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  border: none;
  border-radius: 2px;
  background: #EAF7EE;
  color: #669370;
  font-family: 'Satoshi', sans-serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: normal;
  cursor: pointer;
  /* The UA button padding, restated rather than reset. The reference never
     zeroes it, `* { box-sizing: border-box }` is in force there, and this
     file's own global button rule sets only `font` and `cursor` — so leaving
     it out here would silently give the two controls a different content box
     from the reference's. It is invisible on this one and load-bearing on the
     CTA below. */
  padding: 1px 6px;
  outline: none;
}
.ff-prob__edit:hover { background: #E9FFE1; }
.ff-prob__edit:focus-visible { outline: 4px solid #41ED98; outline-offset: 4px; }
.ff-prob__edit svg { flex: none; }

/* The CTA. Its height and margin are what collapse while the field is being
   edited, and `overflow: hidden` is what keeps the label from spilling out of
   a zero-height box on the way. */
.ff-prob__cta {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 62px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: normal;
  cursor: pointer;
  /* Two pixels of UA padding, and they are the reason the collapsed CTA is a
     2px strip rather than nothing: `box-sizing: border-box` cannot crush
     padding, so `height: 0` resolves to 2px and a sliver of the label stays
     visible under the panel while the field is being edited. That is what the
     reference renders — measured on it, not assumed — so it is stated here
     rather than inherited, because a later reset of `button { padding }`
     anywhere in this file would otherwise change this screen. */
  padding: 1px 6px;
  box-shadow: 0px 3px 12px rgba(255, 255, 255, 0.42) inset;
  transition:
    height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}
.ff-prob__cta:hover { background: #3BDC8C; }
.ff-prob__cta:focus-visible { outline: 5px solid #013F17; outline-offset: -12px; }

/* DNA §6.6: with motion off the two CSS transitions jump-cut to the same end
   state rather than running a shorter version of themselves. */
@media (prefers-reduced-motion: reduce) {
  .ff-prob__text,
  .ff-prob__cta,
  .ff-prob__rail { transition: none; }
}
html.no-motion .ff-prob__text,
html.no-motion .ff-prob__cta,
html.no-motion .ff-prob__rail { transition: none; }

/* The save line. Absolutely positioned under the column so it can never move
   the composition, and drawn only when a save is retrying or has failed —
   every other state is announced and not seen, which is what the reference
   draws. */
.ff-prob__save.is-loud {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 34px 0 0;
  max-width: none;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: normal;
  color: #013F17;
}

.ff-confirm__status { color: var(--moss); font-weight: 700; font-size: 0.9375rem; }
.ff-confirm__status[data-state='failed'] { color: var(--dark); }

/* ── Screen 4 — the campaign path ─────────────────────────────────────────
   Its `.ff-type` block was DELETED on 2026-08-20 with the surface it styled:
   the screen was rebuilt to the reference's own `[data-kind]` composition and
   is now PHASE 50 at the bottom of this file. Dead CSS ships in every browser
   and §33.11.3 scans the built bundle, so it goes rather than lingers.       */

/* ── PHASE 34 — RESPONSIVE ────────────────────────────────────────────────  */

@media (max-width: 599.98px) {
  .ff__badge { right: var(--sp-16); bottom: var(--sp-16); }
  .ff__body { justify-content: flex-start; }
  .ff__body { justify-content: flex-start; }
  .ff-nav { flex-direction: column; align-items: stretch; }
  .ff-nav .btn { width: 100%; justify-content: center; }
  .ff-nav .btn--primary { margin-left: 0; order: -1; }
}

/* The badge is fixed bottom-right at EVERY width, so the stage reserves room
   for it at every width. It was mobile-only until the Session C browser pass:
   at 1280x520 the badge sat squarely on top of the primary control, which is a
   laptop with browser chrome rather than an unusual viewport.               */
.ff__stage { padding-bottom: calc(var(--ff-pad) + 3.5rem); }

/* ── PHASE 34 — Session C: the address, the code, Positioning, the match ───
   Added 2026-08-18. Nothing above this comment is edited, and no colour is
   minted: Session B's header records the twelve-colour decision once, for all
   twenty-six screens, and these four resolve to the same tokens.

   The reference greys the email field's own ink while it has focus. That is
   `--grey` on `--white`, about 2.2:1, applied to the text somebody is actively
   typing — the token for placeholders and disabled ink. The dashed brand
   underline is what marks focus here instead, which is the reference's own
   treatment minus the part that costs legibility.                          */

/* `.field-hint` is `--grey`, which is about 2.2:1 on `--white` — the token for
   placeholders and disabled ink. On these pages a hint is a real sentence that
   changes what somebody types, so it reads `--moss` like every other line of
   body copy here. Scoped to the flow rather than changed at the component:
   `.field-hint` renders on every form in the product and moving it globally is
   its own change with its own screenshot pass.

   `:where()` rather than `.ff`, and that is the whole reason this rule works.
   Session B's `.ff-panel .field-hint { color: var(--mint) }` (removed with the
   screens 2-3 rebuild, 2026-08-20) was two classes and
   sits ABOVE this line, so a plain `.ff .field-hint` would tie on specificity,
   win on order, and paint the dark panel's hint mid-green on dark green. The
   first draft did exactly that, and only the screenshot said so. `:where()`
   contributes nothing, leaving this at one class — enough to beat the bare
   `.field-hint` above it and not enough to beat the panel.                  */
:where(.ff) .field-hint { color: var(--moss); }

/* Screen 5 — the address */
.ff-email { display: flex; flex-direction: column; gap: var(--sp-24); }
.ff-email__head {
  margin: 0;
  font-size: var(--ff-display);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--dark);
}
.ff-email__lede { margin: 0; max-width: var(--measure); color: var(--moss); }
.ff-email__field { max-width: 34rem; }
.ff-email__input {
  width: 100%;
  padding: var(--sp-12) 0;
  border: 0;
  border-bottom: 2px dashed var(--brand);
  border-radius: 0;
  background: transparent;
  color: var(--dark);
  font-family: inherit;
  font-size: clamp(1.25rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ff-email__input:focus-visible {
  outline: none;
  border-bottom-style: solid;
  box-shadow: 0 2px 0 0 var(--brand);
}

/* Screen 6 — the six-digit code: REBUILT to the reference, PHASE 49. Its rules
   live there, with the rest of that screen. Nothing here styles it. */

/* Screen 9 — an answer, and the dictation control */
.ff-answer { display: flex; flex-direction: column; gap: var(--sp-24); }
.ff-answer__head {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--dark);
}
.ff-answer__lede { margin: 0; max-width: var(--measure); color: var(--moss); }
.ff-answer__missing { margin: 0; max-width: var(--measure); color: var(--dark); font-weight: 700; }
.ff-answer__field { max-width: 44rem; }
.ff-answer__note { margin: var(--sp-12) 0 0; color: var(--moss); }
.ff-answer__warning { margin: 0; max-width: var(--measure); color: var(--moss); }
.ff-answer__refusal { margin: 0; max-width: var(--measure); color: var(--dark); font-weight: 700; }
.ff-answer__dictation {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  flex-wrap: wrap;
}
.ff-answer__dictation-note { color: var(--moss); max-width: 26rem; }
.ff-answer__dictation-absent { margin: 0; max-width: var(--measure); color: var(--moss); }

@media (max-width: 599.98px) {
  /* The code screen's own narrow rules are gone with its rebuild: it is a
     scaled stage now and cannot reflow (PHASE 49). */
  .ff-answer__dictation { flex-direction: column; align-items: stretch; }
  .ff-answer__dictation .btn { width: 100%; justify-content: center; }
}

/* ── PHASE 34 — Session D: the five §12 answers, and Last look ─────────────
   Added 2026-08-18. Nothing above this comment is edited, and no colour is
   minted: Session B's header records the twelve-colour decision once, for all
   twenty-six screens, and these resolve to the same tokens.

   Two of the reference's own treatments are deliberately not reproduced, both
   recorded in `FOUNDER_FLOW_ABSENCES` with the rule that refuses them: the
   branding screen's draggable HSV plane (a drag surface with no keyboard
   equivalent, §28.5) and the interview screen's platform tiles and time-slot
   chips (tech-stack §12 — the booking record is Cal.com's, and a second picker
   is a second scheduler).

   The claim screen's rules (`.ff-claim*`) left with the screen on 2026-08-20,
   when the match and claim pages were removed from the flow. The date-of-birth
   field and its calendar below survive it: `DateOfBirthField` is shared, and
   the Creator flow's Agree screen renders it.                               */

/* ── The date of birth, and its calendar ──────────────────────────────────
   A text field with a calendar beneath it, not a calendar with a text field.
   The panel is a disclosure rather than a popover: it opens in flow, so there
   is no positioning maths at 320px and nothing to trap focus inside.       */
.ff-dob { display: flex; flex-direction: column; gap: var(--sp-8); }
.ff-dob__row {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  flex-wrap: wrap;
}
.ff-dob__age { color: var(--dark); font-weight: 700; font-size: 0.9375rem; }
.ff-dob__note { margin: 0; max-width: var(--measure); color: var(--moss); font-size: 0.9375rem; }

.ff-cal {
  border: 1px solid var(--grey-light);
  background: var(--grey-lightest);
  padding: var(--sp-16);
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.ff-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}
.ff-cal__label {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ff-cal__label-hint { font-weight: 500; font-size: 0.75rem; color: var(--moss); }
.ff-cal__weekdays,
.ff-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ff-cal__weekdays span {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--moss);
}
.ff-cal__blank { display: block; }
.ff-cal__day,
.ff-cal__year {
  border: 1px solid transparent;
  background: var(--white);
  padding: var(--sp-8) 0;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--dark);
  cursor: pointer;
  border-radius: var(--radius);
}
.ff-cal__day:hover,
.ff-cal__year:hover { border-color: var(--brand); }
/* The chosen day, and the only thing on this panel that carries a fill. */
.ff-cal__day.is-selected,
.ff-cal__year.is-selected {
  background: var(--dark);
  color: var(--mint);
  font-weight: 700;
}
.ff-cal__years { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); }

/* ── Screens 10–14 — one answer ───────────────────────────────────────────
   The trail line names the answer before this one — the reference's own
   running kicker, which is what makes eight pages read as a sequence rather
   than as eight forms.                                                     */
.ff-answer__trail {
  margin: 0;
  color: var(--grey);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ff-answer__optional {
  margin: 0;
  color: var(--moss);
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
/* The §12 completion rule, labelled. Without the label the sentence reads as
   a claim that the thing already happened — see AnswerPage.tsx.          */
.ff-answer__rule {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--sp-4);
}
.ff-answer__derived { margin: 0; max-width: var(--measure); color: var(--moss); }
.ff-answer__field { display: flex; flex-direction: column; gap: var(--sp-24); }

/* What §12 decided, and why. A rejection reads as a thing still to do. */
.ff-item__status {
  display: flex;
  flex-direction: column;
  /* A .tag is inline-flex, and an inline-flex FLEX ITEM in a column is
     stretched to the container width by the default align-items: stretch —
     which turned a chip into a full-width band. Only a screenshot shows it:
     axe reads a correctly named Tag either way.                          */
  align-items: flex-start;
  gap: var(--sp-8);
  max-width: var(--measure);
  color: var(--moss);
}
/* The complete state is one sentence with a chip in it, not a stack. */
.ff-item__status--done { display: block; margin: 0; color: var(--moss); }
.ff-item__reasons { margin: 0; padding-left: var(--sp-24); display: grid; gap: var(--sp-4); }

/* ── Uploads ──────────────────────────────────────────────────────────────
   The reference's 500px dashed zone, in --sp units. `label` over a visually
   hidden `input[type=file]`, so the real control keeps its keyboard behaviour
   and the browser's own picker opens (§28.5).                              */
.ff-upload { display: flex; flex-direction: column; gap: var(--sp-12); }
.ff-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ff-upload__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: clamp(9rem, 26vw, 16rem);
  padding: var(--sp-24);
  background: var(--mint);
  border: 3px dashed var(--sage);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
}
.ff-upload__input:focus-visible + .ff-upload__zone { outline: 3px solid var(--brand); outline-offset: 2px; }
.ff-upload__zone:hover { border-color: var(--brand); }
.ff-upload__glyph { font-size: 2rem; line-height: 1; color: var(--moss); }
.ff-upload__label { font-size: 1.125rem; font-weight: 700; color: var(--dark); }
.ff-upload__types { font-size: 0.9375rem; color: var(--moss); }
.ff-upload__absent { margin: 0; max-width: var(--measure); color: var(--moss); }

.ff-file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }
.ff-file {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  flex-wrap: wrap;
  padding: var(--sp-12) var(--sp-16);
  background: var(--accent-blue);
  border-radius: var(--radius);
}
.ff-file__name { font-weight: 700; color: var(--dark); }
.ff-file__note { color: var(--moss); font-size: 0.9375rem; }

/* ── Screen 11 — the colours, read back out of what was written ───────────
   The chips are a READING of the colours box, not a second record. The hex
   beside each one is its accessible name, because a colour a screen reader
   cannot say is not a label (§28.5).                                       */
.ff-swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-12);
  flex-wrap: wrap;
}
.ff-swatch { display: flex; align-items: center; gap: var(--sp-8); }
.ff-swatch__chip {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  display: block;
}
.ff-swatch__hex { font-size: 0.9375rem; color: var(--moss); }
.ff-hexrow { display: flex; align-items: flex-end; gap: var(--sp-16); flex-wrap: wrap; }
.ff-hexrow .field { flex: 1 1 14rem; }

/* ── Screen 12 — the booking record ───────────────────────────────────────  */
.ff-booking { display: flex; flex-direction: column; gap: var(--sp-8); align-items: flex-start; }
.ff-booking__state { margin: 0; color: var(--moss); }
.ff-booking__when { margin: 0; font-weight: 700; color: var(--dark); }

/* Screen 14's own rules are gone with the component: the socials step was
   rebuilt to the reference on 2026-08-20 and its composition is PHASE 55. */

/* ── §12's helper guidance, named ─────────────────────────────────────────  */
.ff-helper { max-width: 44rem; display: flex; flex-direction: column; gap: var(--sp-12); }
.ff-helper__head { margin: 0; font-size: 1.125rem; color: var(--dark); }

/* ── Screen 15 — Last look ────────────────────────────────────────────────
   Rebuilt 1:1 from the reference on 2026-08-20; the block is `PHASE 63` at the
   bottom of this file, under the `.ff-ll` prefix. The token-scale card list
   that stood here is gone with its component — dead CSS ships in every
   browser, and §33.11.3 reads what ships.                                   */

@media (max-width: 599.98px) {
  .ff-hexrow .btn { width: 100%; justify-content: center; }
  .ff-cal { max-width: none; padding: var(--sp-12); }
  .ff-cal__years { grid-template-columns: repeat(3, 1fr); }
}

/* ── PHASE 34 — Session E: the money (screens 25, 20) ──────────────────────
   Added 2026-08-19. Nothing above this comment is edited, and no colour is
   minted: Session B's header records the twelve-colour decision once, for all
   twenty-six screens, and these resolve to the same tokens.

   The reference draws both screens as one enormous centred lockup — 126px and
   118px headlines, a 290px fee, a 1130px button. That scale is the reference's
   fixed 2496px stage; here the type scales with the viewport and the page
   scrolls, which is the whole difference between this and a fixed stage.

   Two of the reference's own treatments are deliberately not reproduced, both
   recorded in `FOUNDER_FLOW_ABSENCES`: the `You saved $0` line at zero, and
   the browser-derived `Discount $10 by completing tasks`.                  */

.ff-money {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  max-width: 44rem;
  align-self: center;
  width: 100%;
}
/* The two screens the reference centres — payouts-ready and the fee hero. */
.ff-money--done { text-align: center; align-items: center; }

.ff-money__title {
  margin: 0;
  font-size: clamp(1.875rem, 6.4vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--dark);
}
/* A page whose hero is a NUMBER gives its title less weight than one whose
   hero is the title (DNA §5.1 — one hero per moment). */
.ff-money__title--small { font-size: clamp(1.5rem, 4.4vw, 2.5rem); }

.ff-money__lede { margin: 0; max-width: var(--measure); color: var(--moss); }
.ff-money__sub {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--dark);
}
.ff-money__foot {
  margin: 0;
  max-width: var(--measure);
  color: var(--moss);
  font-size: 0.9375rem;
}

/* `.ff-money__amount`, `--paid`, `__saving`, `__canceled`, `__fields` and the
   whole `.ff-lines` family lived here and went with screen 20's markup when it
   was rebuilt 1:1 from the reference (PHASE 68, 2026-08-21). They were this
   page's alone — `.ff-money`, `__title`, `__lede`, `__sub`, `__foot` and
   `__panel` are still `CreatorPaymentStep`'s and `BuildStepPage`'s and stay.
   Dead CSS ships in every browser, which is why it is deleted rather than
   left. */

.ff-money__panel {
  padding-top: var(--sp-24);
  border-top: 1px solid var(--grey-light);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
/* A `.btn` is `inline-flex`, and a flex ITEM in a column is stretched to the
   container by the default `align-items: stretch` — so a tertiary control here
   rendered full width with its label centred, which reads as a stray line of
   text rather than as a control. Session D's `.tag` lesson, on a button. */
.ff-money__panel > .btn { align-self: flex-start; }

/* ── Screen 25's Prepare list ─────────────────────────────────────────────
   What STRIPE will ask for. There is no input in this block and no route
   behind it that would take one (§11, §5.3, §13) — the note is inside the
   panel rather than under it, because a list of things somebody is about to be
   asked for reads as the start of a form until the sentence arrives. */
.ff-prepare {
  padding: var(--sp-24);
  border: 2px solid var(--grey-light);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.ff-prepare__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-16);
}
.ff-prepare__title {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--dark);
}
.ff-prepare__mark {
  color: var(--moss);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}
.ff-prepare__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.ff-prepare__item { display: flex; flex-direction: column; gap: var(--sp-4); }
.ff-prepare__label { color: var(--dark); font-weight: 700; }
.ff-prepare__why { color: var(--moss); font-size: 0.9375rem; }
.ff-prepare__note {
  margin: 0;
  padding-top: var(--sp-16);
  border-top: 1px solid var(--grey-light);
  color: var(--moss);
  font-size: 0.9375rem;
}

/* ── Founder Flow v2 — screen 25, reference-authored payout stage ────────
   This route deliberately does not use the fluid `.ff-money` composition.
   The supplied source authors a 2496×1542 stage and scales it by
   min(viewport/2496×1542) × .78. PayoutsStep owns that scale on resize. */
.ff[data-flow-page='application-review'] .ff__top,
.ff[data-flow-page='application-review'] .ff__badge { display: none; }
.ff[data-flow-page='application-review'] .ff__stage { padding: 0; gap: 0; }
.ff[data-flow-page='application-review'] .ff__body {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

.ff-application-review {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 25;
  background: #FAFAFA;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  line-height: normal;
}
.ff-application-review__top {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-application-review__logo {
  display: block;
  width: auto;
  height: clamp(26px, 2.4vw, 36px);
}
.ff-application-review__help {
  min-height: 40px;
  padding: 10px 22px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-application-review__help:hover { background: #E9FFE1; }
.ff-application-review__help:focus-visible {
  outline: 3px solid #41ED98;
  outline-offset: 2px;
}
.ff-application-review__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2496px;
  height: 1542px;
  transform: translate(-50%, -50%) scale(.37);
  transform-origin: center center;
}
.ff-application-review__lockup {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2000px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ff-application-review__art {
  display: block;
  width: 1620px;
  height: auto;
}
.ff-application-review__head {
  margin: 150px 0 0;
  color: #013F17;
  font-size: 118px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
  text-align: center;
}
.ff-application-review__sub {
  margin: 48px 0 0;
  color: #17A35E;
  font-size: 56px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -.02em;
  text-align: center;
}
.ff-application-review__note {
  margin: 56px 0 0;
  color: #A2AFA8;
  font-size: 40px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -.012em;
  text-align: center;
}
.ff-application-review__action {
  min-width: 700px;
  min-height: 120px;
  margin-top: 56px;
  padding: 24px 52px;
  font-size: 42px;
}

.ff[data-flow-page='payouts'] .ff__top,
.ff[data-flow-page='payouts'] .ff__badge { display: none; }
.ff[data-flow-page='payouts'] .ff__stage { padding: 0; gap: 0; }
.ff[data-flow-page='payouts'] .ff__body {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

.ff-payout-ref {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 25;
  background: #FAFAFA;
  color: #013F17;
  --payout-micro: clamp(.7rem, .82vw, .8rem);
  --payout-tag: clamp(.62rem, .72vw, .72rem);
  --payout-tap: clamp(2.75rem, 3.6vw, 3.3rem);
  --payout-px: clamp(1.35rem, 4.4vw, 4rem);
  font-family: 'Satoshi Payout Reference', 'Satoshi', sans-serif;
  font-size: 16px;
  line-height: normal;
}
.ff-payout-ref :focus-visible {
  outline: auto;
  outline-offset: 0;
}
.ff-payout-ref__top {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-payout-ref__logo {
  display: block;
  width: auto;
  height: clamp(26px, 2.4vw, 36px);
}
.ff-payout-ref__help {
  box-sizing: border-box;
  min-height: 40px;
  padding: 10px 22px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-payout-ref__help:hover { background: #E9FFE1; }
.ff-payout-ref__back {
  position: absolute;
  z-index: 6;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 12px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(10px, .8vw, 12px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-payout-ref__back:hover { color: #013F17; }
.ff-payout-ref__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2496px;
  height: 1542px;
  transform: translate(-50%, -50%) scale(.37);
  transform-origin: center center;
}

.ff-payout-ref__setup-lockup {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1860px;
  transform: translate(-50%, calc(-50% + 30px));
  display: flex;
  flex-direction: column;
}
.ff-payout-ref__setup-head {
  align-self: center;
  margin: 0 0 150px;
  color: #013F17;
  font-size: 104px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.ff-payout-ref__prepare { display: flex; flex-direction: column; }
.ff-payout-ref__prepare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  color: #013F17;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ff-payout-ref__prepare-head img {
  display: block;
  width: auto;
  height: 62px;
}
.ff-payout-ref__items {
  margin-top: 92px;
  display: flex;
  flex-direction: column;
  gap: 86px;
}
.ff-payout-ref__item {
  display: flex;
  align-items: center;
  gap: 74px;
  color: #013F17;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ff-payout-ref__item img {
  display: block;
  flex: none;
  width: 104px;
  height: 104px;
}
.ff-payout-ref__setup-cta,
.ff-payout-ref__paid-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  box-shadow: 0 3px 12px rgba(255, 255, 255, .42) inset;
  font-family: 'Satoshi Payout Reference', 'Satoshi', sans-serif;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -.02em;
  cursor: pointer;
}
.ff-payout-ref__setup-cta {
  margin-top: 150px;
  height: 150px;
  font-size: 60px;
}
.ff-payout-ref__setup-cta:hover,
.ff-payout-ref__paid-cta:hover { background: #3BDC8C; }
.ff-payout-ref__setup-cta:disabled { cursor: wait; opacity: .72; }
.ff-payout-ref__error {
  margin: 24px 0 0;
  max-width: none;
  color: #013F17;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
}

.ff-payout-ref__paid-lockup {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1720px;
  transform: translate(-50%, calc(-50% + 30px));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ff-payout-ref__paid-head {
  margin: 0;
  color: #013F17;
  font-size: 126px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-align: center;
}
.ff-payout-ref__piggy {
  display: block;
  width: 900px;
  height: auto;
  margin-top: 120px;
}
.ff-payout-ref__paid-cta {
  height: 184px;
  margin-top: 180px;
  font-size: 72px;
}

.ff-payout-ref__fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(44rem, calc(100vw - 40px));
  transform: translate(-50%, -50%);
}

.ff-payout-ref__scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(1, 45, 16, .4);
}
.ff-payout-ref__drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 60;
  width: min(27rem, 88vw);
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  padding: clamp(20px, 2.4vw, 32px) var(--payout-px);
  background: #012D10;
  color: #E9FFE1;
  font-family: 'Satoshi Payout Reference', 'Satoshi', sans-serif;
}
.ff-payout-ref__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.8rem, 1.3vw, 1.1rem);
  margin-bottom: clamp(18px, 2.2vw, 28px);
  color: #E9FFE1;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 900;
  letter-spacing: -.03em;
}
.ff-payout-ref__drawer-head button {
  width: var(--payout-tap);
  height: var(--payout-tap);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: #E9FFE1;
  cursor: pointer;
}
.ff-payout-ref__drawer-intro {
  margin-bottom: clamp(12px, 1.6vw, 18px);
  color: #A2AFA8;
  font-size: var(--payout-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ff-payout-ref__docs {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
}
.ff-payout-ref__doc {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 1.6vw, 20px);
  border: 2px solid #1B4A2C;
  border-radius: 2px;
  background: transparent;
  text-align: left;
  font-family: 'Satoshi Payout Reference', 'Satoshi', sans-serif;
  cursor: default;
}
.ff-payout-ref__doc:hover { border-color: #41ED98; }
.ff-payout-ref__doc.is-current {
  border-color: #41ED98;
  background: rgba(65, 237, 152, .08);
}
.ff-payout-ref__doc-tag {
  color: #A2AFA8;
  font-size: var(--payout-tag);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ff-payout-ref__doc.is-current .ff-payout-ref__doc-tag { color: #41ED98; }
.ff-payout-ref__doc-title {
  color: #E9FFE1;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.ff-payout-ref__doc-body {
  color: #A2AFA8;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

@media (min-width: 1500px) {
  .ff-payout-ref {
    --payout-micro: clamp(.8rem, .6vw, .92rem);
    --payout-tag: clamp(.7rem, .55vw, .84rem);
    --payout-tap: clamp(3.1rem, 2.6vw, 3.7rem);
    --payout-px: clamp(4rem, 5vw, 7rem);
  }
}

@media (max-width: 600px) {
  .ff-payout-ref__back { bottom: 92px; padding: 8px 14px; }
  .ff-payout-ref__drawer {
    inset: auto 0 0;
    width: 100%;
    height: 86vh;
  }
}

/* §12's high-effort note lived here from Session E until 2026-08-20, when Last
   look was rebuilt to the reference. It has no room in that composition, so it
   rides the chrome band instead — `.ff-ll__foot`, in PHASE 63. */

@media (max-width: 599.98px) {
  .ff-money__fields { grid-template-columns: 1fr; }
  .ff-prepare { padding: var(--sp-16); }

}

/* ── PHASE 34 — Session F: openness, the build, and live ───────────────────
   Added 2026-08-19. Nothing above this comment is edited, and no colour is
   minted: Session B's header records the twelve-colour decision once, for all
   twenty-six screens, and these resolve to the same tokens.

   Three of the reference's own treatments are deliberately not reproduced,
   each recorded in `FOUNDER_FLOW_ABSENCES` with the rule that refuses it: the
   Creator-pay screen as a CHOICE of structure, the three-reward and
   six-adjective caps, and both waiting screens auto-advancing on a timer with
   Creator chips flipping to accepted on the way.                           */

/* ── Screen 18 — how Creators are paid ──────────────────────────────────── */
.ff-pay { display: flex; flex-direction: column; gap: var(--sp-24); max-width: 44rem; width: 100%; }
.ff-pay__panel {
  padding: var(--sp-24);
  border: 2px solid var(--grey-light);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
/* The two sentences that stop this reading as an offer (§16, §14.2). */
.ff-pay__pinned { margin: 0; max-width: var(--measure); color: var(--moss); font-size: 0.9375rem; }
/* §14.3's Idea explanation, where the control would have been. */
.ff-pay__explainer {
  margin: 0;
  padding: var(--sp-24);
  border-left: 4px solid var(--moss);
  background: var(--grey-lightest);
  color: var(--dark);
  max-width: var(--measure);
}
.ff-pay__choice { margin: 0; padding: 0; border: none; }
.ff-pay__choice legend {
  padding: 0 0 var(--sp-12);
  /* A `<legend>` takes UA styling that overrides an inherited size, and this
     one is the question the whole screen exists to ask — it cannot read
     quieter than the explanation above it. */
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dark);
}

/* ── Screens 21–24 — the build steps ────────────────────────────────────── */
.ff-build { display: flex; flex-direction: column; gap: var(--sp-16); max-width: 56rem; width: 100%; }
.ff-build__title {
  margin: 0;
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--dark);
}
/* §9's three phrases. Never empty-height: a status that appears and shifts the
   page is a status people learn to ignore. */
.ff-build__save { margin: 0; min-height: 1.25rem; color: var(--moss); font-size: 0.875rem; }
.ff-build__not-done {
  margin: 0;
  padding: var(--sp-16);
  background: var(--grey-lightest);
  color: var(--dark);
  max-width: var(--measure);
}

/* Screen 21 — the voice chips WERE here. The screen was rebuilt 1:1 from the
   reference on 2026-08-21 and its rules are PHASE 64; this block went with
   the component it styled, because dead CSS ships in every browser and
   §33.11.3 scans what ships. */

/* Screen 22 — the order threshold. A count, never an amount. */
.ff-threshold { display: flex; flex-direction: column; gap: var(--sp-16); max-width: 34rem; }
.ff-threshold__note { margin: 0; color: var(--moss); max-width: var(--measure); }

/* Screen 23 — the FAQs, with the preview the reference draws beside them. */
.ff-faq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-32); align-items: start; }
.ff-faq__form { display: flex; flex-direction: column; gap: var(--sp-16); }
.ff-faq__preview {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-24);
  background: var(--stat-mint-bg);
  border-radius: var(--radius);
}
.ff-faq__preview-label {
  margin: 0;
  color: var(--moss);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ff-faq__card { display: flex; flex-direction: column; gap: var(--sp-8); align-items: flex-start; }
.ff-faq__q { margin: 0; color: var(--dark); font-weight: 700; }
.ff-faq__a { margin: 0; color: var(--moss); }
.ff-faq__empty { margin: 0; color: var(--moss); font-size: 0.9375rem; }

/* Screen 24 — the Backer rewards. A list, because §14.4 caps nothing. */
.ff-rewards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-32); align-items: start; }
.ff-rewards__form { display: flex; flex-direction: column; gap: var(--sp-16); }
.ff-rewards__list { display: flex; flex-direction: column; gap: var(--sp-16); }
.ff-rewards__label {
  margin: 0;
  color: var(--moss);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ff-rewards__empty { margin: 0; color: var(--moss); }
.ff-rewards__card {
  padding: var(--sp-24);
  background: var(--grey-lightest);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.ff-rewards__card-title { margin: 0; color: var(--dark); font-weight: 900; font-size: 1.25rem; }
.ff-rewards__card-price { margin: 0; color: var(--dark); font-weight: 700; }
.ff-rewards__card-body { margin: 0; color: var(--moss); }
.ff-rewards__card-when { margin: 0; color: var(--moss); font-size: 0.9375rem; }

/* ── Screens 19 and 26 — the two waiting states ─────────────────────────── */
.ff-wait { display: flex; flex-direction: column; gap: var(--sp-24); max-width: 44rem; width: 100%; }
/* The h1 leads. `StatePanel`'s own head is `--fs-step` at weight 900, which is
   the same size as `.ff-build__title` — two competing headlines rather than a
   title and a state. Session E found the same inversion on the money screens. */
.ff-wait .ff-build__title { font-size: clamp(1.875rem, 6.4vw, 3.75rem); letter-spacing: -0.035em; }
/* Pinned: somebody told a screen updates itself will sit on it (§27.1). */
.ff-wait__pinned { margin: 0; color: var(--moss); max-width: var(--measure); }
.ff-wait__roster { display: flex; flex-direction: column; gap: var(--sp-12); }
.ff-wait__chips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-8); }
.ff-wait__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
}
.ff-wait__handle { color: var(--dark); font-weight: 700; }

/* `.ff-live` was Session F's own composition for this screen — a centred
   lockup on the flow's paper ground, with two controls. It was REBUILT
   2026-08-20 to the supplied reference and the whole block moved to PHASE 56
   at the bottom of this file, because the screen it draws is now a full-bleed
   green layer with one control and shares nothing with what stood here. */

@media (max-width: 899.98px) {
  .ff-faq,
  .ff-rewards { grid-template-columns: 1fr; }
}
@media (max-width: 599.98px) {
  .ff-pay__panel { padding: var(--sp-16); }
}

/* ════════════════════════ PHASE 38 — the Admin shell at narrow widths
   Spec §33.11.1, §26.1, DNA §5.12, added 2026-08-19.

   Two measured defects in PHASE 25's shell, both of them narrow-width and
   neither of them visible to jsdom, axe, or a typecheck. They were found by
   rendering every Admin route inside a real 320px iframe and reporting, per
   box, whether its content is wider than the box and whether that box scrolls
   or clips.

   This section corrects the shell WITHOUT rewriting PHASE 25 in place: those
   selectors are shared by seven workspaces, and an edit up there is an edit to
   all of them at once. Convention 2, as PHASE 25 stated it and 26–31 restated
   it — qualify by element, or scope to the Admin view.

   ── 1. The nav hid sections behind a scroll with no affordance ─────────────
   `.topnav` is `flex: 1 1 auto; min-width: 0; overflow-x: auto`, so at any
   width where the bar is tight it shrinks to a sliver and scrolls instead of
   wrapping. Measured, with eight sections:

       1024px  clean          768px   79px hidden — Live mode is gone
        900px  clean          320px  438px hidden — six of eight are gone

   So this was never a 320px curiosity: every tablet and every phone has been
   losing sections, and a horizontal scroller with no visible scrollbar gives no
   sign the rest exist. PHASE 32 met this exact defect on the Affiliate tab rail
   and recorded the answer — the rail WRAPS, "because a second line is legible
   and a hidden tab is a missing tab."

   `.topbar`'s own comment has promised since PHASE 25 that "at a narrow width
   the nav takes its own line and the brand keeps its position". It never did:
   `min-width: 0` lets a flex item shrink below its content rather than wrap.
   Giving it `flex-basis: 100%` is what makes that sentence true.

   Reading order is preserved and no `order` is used. The bar becomes brand,
   then nav, then the environment cluster — three rows in DOM order, so the tab
   path and the visual path still agree (§28.5, §33.11.4).

   Why this wraps and `.tabs` deliberately does not: `.navlink::after` is a
   per-link underline and follows its own link onto the second row. `.tabs` uses
   `.tabline`, ONE absolutely-positioned indicator, which a second row would
   strand — which is the reason PHASE 25 already recorded for scrolling there.
   The two are different mechanisms, and that is why they get different answers.

   ── 2. A `.wrap` inside the Admin view was clipped away ────────────────────
   `.wrap` is `width: min(90vw, 1600px)` — a VIEWPORT-relative width, correct
   for a top-level public section and wrong for anything nested. `.views` is
   already `--wrap` wide and `.view` has already spent a `--gutter` on each
   side, so a `Section` rendered inside the shell computes its `.wrap` child
   wider than the box that contains it.

   `.views` is `overflow-x: clip`, so the excess does not scroll. It is gone.
   Measured on `/admin/live-mode` at 320px: 48px clipped, taking the right edge
   of the state panel's values with it.

   The fix is at the primitive rather than at the two call sites, because the
   trap is in the primitive: the next Admin surface to reach for the product's
   own layout components inherits it, and a design system whose parts do not
   compose is the thing being fixed. Inside `.view` the shell already owns the
   page width and the gutter, so a nested `.wrap` is simply full-width and a
   nested `.section` does not re-apply a gutter that is already there.

   Only the inline axis is touched. `.section`'s block padding is vertical
   rhythm, not overflow, and is left exactly as it is.
   ──────────────────────────────────────────────────────────────────────── */


/* ── 2. Nested layout primitives compose inside the shell ──────────────── */

/* `width` and not `max-width`: `.wrap` sets an explicit width, so a max alone
   would leave the declared 90vw in place and lose the fight. */
.view .wrap { width: 100%; }

/* The view's own `padding-inline: var(--gutter)` is the Admin gutter. A section
   inside it adding a second one is what pushed `.wrap` past the clip edge, and
   at any width it indents Admin content away from every other Admin surface. */
.view .section { padding-inline: 0; }


/* ── 1. The nav takes its own line, and wraps rather than hiding ───────── */

/* 900px is where it was measured to still fit, and is the breakpoint PHASE 25
   and its successors already use ten times over — not a new number. */
@media (max-width: 900px) {
  .topnav {
    /* The whole point: a basis of 100% cannot share a row, so the nav genuinely
       takes its own line instead of shrinking to a sliver. */
    flex: 1 1 100%;
    flex-wrap: wrap;
    /* Wrapping and scrolling are mutually exclusive. `visible` also restores a
       visible Y axis, which is what PHASE 25's padding-block/negative
       margin-block pair on this selector was compensating for: `overflow-x:
       auto` forces the Y axis to `auto` too, which would shave the focus ring
       off a focused nav item. That pair is harmless here and is left alone, so
       the ring clearance is the same in both modes. */
    overflow-x: visible;
    /* Tighter than the desktop --sp-24 so a 320px line carries three sections
       rather than two. The row gap is smaller again: wrapped rows of the same
       control read as one group, not as separate bands. */
    gap: var(--sp-8) var(--sp-16);
  }
}


/* ── 3. Two workspace clips the same pass found ────────────────────────────
   Not the shell, but the same defect class and the same measurement, so they
   are recorded here rather than left for the next person to re-find.

   The Day 14 receipt prints an evidence URL as plain text, and a URL is one
   unbreakable token: at 320px it ran 52px past its list item, and `.views`
   clipped it. PHASE 36 already made this decision twice — `.mny-facts dd` and
   `.mny-head__title` both carry `overflow-wrap: anywhere`, the second with the
   note that "a campaign id wraps badly at 320" — and the evidence list simply
   did not get it. Applied to every list item in the console rather than to the
   one list, because a reference, an id, a provider object and a URL all appear
   in these lists and all of them are unbreakable.

   And the Create Founder footer is a flex row that never wraps, holding a
   link, a sentence, and two buttons. A `.btn` is `overflow: hidden` — it hosts
   the fill-sweep — so when the row squeezed it, `Create prospect` lost the
   right-hand 5px of its own label rather than wrapping. A control whose label
   is cut is a control nobody can be sure of, which is worse at 320px than the
   extra line wrapping costs.
   ──────────────────────────────────────────────────────────────────────── */



/* ═══════════════════════ PHASE 39 — the Founder dashboard shell
   Spec §20, §26, §33.11, DNA §5.2, §5.12, added 2026-08-19.
   Founder Dashboard Session B — the chrome, not the chapters.

   The number is the GREP's, not the brief's. `founder-dashboard.md` proposed
   `PHASE 40` and told the reader twice to verify it instead of trusting it;
   the highest section in this file was 38. The Creator flow's own brief had
   reserved 39, but its Session A built no surface and wrote no CSS, so 39 was
   never taken — a contiguous number that every session derives the same way
   beats a reserved one that only one document knows about.

   The three conventions PHASE 25 set, and 26–34 restated, bind here too:

     1. TOKENS ONLY. The reference's chrome maps onto this file's slots rather
        than being copied: its `--br` is `--radius`, its `--white` page ground
        is `--white`, and its current-chapter fill is `--brand-5`, which this
        palette already defines for exactly that job ("selection / loading /
        live"). No hex literal and no arbitrary spacing value.

     2. SCOPED OVERRIDES. Everything new is prefixed `.fd-` — checked against
        `.pc-` (33), `.ff-` (34), `.cr-` (26/32), `.cf-` (31), `.mny-` (36) and
        `.tdy-` (37), and against `.fd` itself, which appeared nowhere. `.btn`,
        `.tag`, `.doc-list`, `.kicker` and the drawer are reused untouched.

     3. THIS IS NOT ADMIN CHROME. §26 licenses dashboard density in the Admin
        panel and nowhere else. The rail is four words on one line; there is no
        environment chip, no section grid, and no dense table treatment here,
        and none should be added — the Founder surface it wraps is a
        chronological workspace (DNA §5.2, §5.3).

   ── The rail WRAPS, it does not scroll ────────────────────────────────────
   PHASE 38's finding, applied before it can become a defect: a horizontal
   scroller with no visible scrollbar gives no sign the rest of the tabs exist,
   and this rail has four items that must all be reachable at 320px. A second
   line is legible; a hidden chapter is a missing chapter.
   ══════════════════════════════════════════════════════════════════════════ */

.fd {
  display: block;
}

/* ── The band ─────────────────────────────────────────────────────────────
   Sticky, like the reference's. It needs its own ground: a sticky element
   over scrolling content with a transparent background lets the content run
   through it, which is the defect PHASE 33 recorded on the campaign header. */
.fd-band {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--gutter);
  background: var(--white);
  border-bottom: 1px solid var(--grey-light);
}

.fd-band__brand {
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--darker);
  text-decoration: none;
}
.fd-band__brand:hover { color: var(--brand); }

.fd-band__name {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-width: 0;                     /* the title may be long; let it shrink */
}

.fd-band__title {
  font-weight: 800;
  color: var(--dark);
  /* A campaign title is Founder-supplied free text and can be one long token
     at 320 — the same class of defect PHASE 36 fixed on the money console. */
  overflow-wrap: anywhere;
}

/* Pushed to the end on a wide band, and simply next in flow once it wraps. */
.fd-band__more { margin-left: auto; }

/* ── The chapter rail ─────────────────────────────────────────────────── */

.fd-rail {
  padding: var(--sp-12) var(--gutter) 0;
}

.fd-rail ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;                  /* see the header note — never a scroller */
  gap: var(--sp-8);
}

.fd-chapter {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);         /* §33.11: the 44px minimum, from the token */
  padding: var(--sp-8) var(--sp-16);
  border: var(--bw) solid transparent;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  font-weight: 800;
  color: var(--dark);
  cursor: pointer;
}

.fd-chapter:hover { border-color: var(--sage); }

/* The reference's own current treatment: brand ring over the selection fill. */
.fd-chapter.is-current {
  border-color: var(--brand);
  background: var(--brand-5);
  color: var(--darker);
}

/*
  A locked chapter reads as unavailable and STAYS focusable — it is
  `aria-disabled`, never `disabled`, so a keyboard user reaches it and hears
  the reason in its accessible name. `cursor: not-allowed` is the sighted half
  of the same message.

  Opacity rather than a colour swap, deliberately: the reference dims to .45,
  and a dimmed dark-green on white still clears AA for a label at this weight,
  where re-toning to `--grey` (2.18:1 on white) would not.
*/
.fd-chapter.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.fd-chapter.is-locked:hover { border-color: transparent; }

/* ── The drawer's chapter list ────────────────────────────────────────────
   `.doc-list` supplies the list treatment; these three are the row's own
   parts. The drawer itself is `Drawer.tsx` — Radix Dialog with the portal,
   focus trap, Escape, backdrop dismiss and GSAP open/close already working. */

.fd-drawer__list li {
  display: grid;
  gap: var(--sp-4);
}

.fd-drawer__tag {
  font-size: var(--fs-tag, 0.75rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* The reference uses its own grey here. `--grey` is 2.18:1 on white in this
     palette, and this line carries the chapter's state — `--moss` is what
     PHASE 33 and 36 both settled on for small type that has to be read. */
  color: var(--moss);
}

.fd-drawer__title { font-weight: 800; }

.fd-drawer__note { color: var(--moss); }

@media (max-width: 600px) {
  /* The band's three parts stack rather than compete for one line, and the
     drawer control loses its auto margin so it sits with them. */
  .fd-band { gap: var(--sp-8); }
  .fd-band__more { margin-left: 0; }
  .fd-chapter { padding: var(--sp-8) var(--sp-12); }
}

/* ── Chapter 1, Choose ─────────────────────────────────────────────────────
   Founder Dashboard Session C, added 2026-08-19. §14.5, §14.2, §14.3, §16.

   The reference's shape, kept: a reader on the left and the open Creator on
   the right, two columns collapsing to one. What is NOT kept is its modal
   treatment — every panel here can be refused by the server, and `Modal`
   closes on its own primary action, which would put the refusal on a card
   behind a panel that has just vanished. DNA §5.14's Act stage is exactly
   this: the decision opens in place, beside the field that caused it.
   ────────────────────────────────────────────────────────────────────────── */

.fd-choose { display: grid; gap: var(--sp-32); }
.fd-choose__head { display: grid; gap: var(--sp-8); }

.fd-choose__split {
  display: grid;
  gap: var(--sp-24);
  align-items: start;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
}

/* The reader. A `nav` of Creators — it decides which card is OPEN and nothing
   about who is on the roster (§14.5: Proovd owns recruitment follow-up). */
.fd-roster { display: grid; gap: var(--sp-8); align-content: start; }
.fd-roster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.fd-roster__count { margin: 0; font-size: 1.125rem; }
.fd-roster__count strong { font-size: 2.5rem; font-weight: 500; line-height: 1; }
.fd-roster__waiting { margin: 0 0 var(--sp-8); color: var(--moss); }

.fd-roster__row {
  display: grid;
  gap: var(--sp-4);
  width: 100%;
  text-align: left;
  padding: var(--sp-12);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--darker);
  cursor: pointer;
  font: inherit;
}
.fd-roster__row:hover { border-color: var(--brand); }
.fd-roster__row.is-open { border-color: var(--brand); background: var(--brand-5); }
.fd-roster__who { font-weight: 700; overflow-wrap: anywhere; }
.fd-roster__meta { color: var(--moss); font-size: 0.875rem; }

/* The open Creator. */
.fd-creator {
  display: grid;
  gap: var(--sp-16);
  padding: var(--sp-24);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  background: var(--white);
}
.fd-creator__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: center;
  justify-content: space-between;
}

.fd-offer { display: grid; gap: var(--sp-12); }

/* An Act panel: the decision, in place. */
.fd-act {
  display: grid;
  gap: var(--sp-12);
  padding: var(--sp-16);
  border: var(--bw) solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand-5);
}
/* A `.btn` is inline-flex, and a flex item in a column is stretched to the
   container by the default `align-items: stretch` — the defect Founder Flow
   Sessions D and E each recorded, and the Money console a third time. */
.fd-act__opener { display: flex; flex-wrap: wrap; gap: var(--sp-8); }

.fd-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }
.fd-fieldset legend { font-weight: 700; padding: 0; }
.fd-radio { display: flex; gap: var(--sp-8); align-items: start; cursor: pointer; }
.fd-radio > span { display: grid; gap: var(--sp-4); }

/* The hero numeral on the read-only base-cut panel (DNA §5.1). */
.fd-hero-num {
  font-size: clamp(3rem, 9vw, 5rem);
  font-weight: 500;
  line-height: 0.9;
  margin: 0;
  color: var(--darker);
}

/* A refused control's reason, rendered where the control would have been.
   `--moss` rather than `--grey`: PHASE 34's finding — `--grey` on `--white`
   is about 2.2:1, and these sentences carry the rules. */
.fd-note { color: var(--moss); margin: 0; }
.fd-absence {
  color: var(--moss);
  margin: 0;
  padding-left: var(--sp-12);
  border-left: var(--bw) solid var(--grey-light);
}
.fd-done { color: var(--dark); font-weight: 700; margin: 0; }

.fd-fields { display: grid; gap: var(--sp-16); }


/* ── Two fixes the browser pass found, and neither is visible to jsdom ─────

   1. `.wrap` IS VIEWPORT-RELATIVE, AND THAT IS WRONG TWICE HERE. It is
      `width: min(90vw, 1600px)`, which is correct for a top-level public
      section and wrong for anything inside a box that has already spent a
      gutter. Measured: at 320 the shell's own wrap ran 13px past the
      viewport, and at 1280 the SECOND one — Phase 13's Creator readiness
      brings its own Measure/Section pair when rendered as a section of this
      chapter — ran 77px past its parent and scrolled the document sideways.

      PHASE 38 found and fixed exactly this inside the Admin view. `.fd .wrap`
      is that fix for the Founder shell, so every chapter B–G inherits it; the
      two `.fd-choose` rules below are the nested-surface half.

   2. A SENTENCE THAT STATES A RULE TAKES `--dark`; A CAPTION STAYS `--moss`.
      Founder Flow Session E's finding, and the Money console's after it.
      `--moss` on white measures 3.37:1, under AA — and these sentences are
      the load-bearing copy of the chapter, because they are what says why a
      control does not exist. The status captions beside them
      (`.fd-roster__meta`, `.fd-roster__waiting`) keep `--moss`: that token's
      own ratio is the product-wide gap Session B recorded, and closing it is
      a design decision with its own six-surface pass. */
.fd .wrap { width: 100%; }
.fd-choose .measure { max-width: none; }
.fd-choose .section { padding-inline: 0; padding-block: var(--sp-16); }
.fd-note, .fd-absence { color: var(--dark); }

/* 3. `min-width: auto` ON A GRID ITEM IS WHY A SINGLE-COLUMN GRID CAN BE WIDER
      THAN ITS CONTAINER. An implicit `auto` track is sized to the widest
      item's MIN-content, and a text input carries an intrinsic one (its
      default `size`) that ignores `width: 100%`. So at 320 the two URL fields
      set a 309px floor, every sibling stretched to the track, and the page
      scrolled sideways — while `.fd-choose` itself measured a correct 272.
      `minmax(0, 1fr)` is the one-line fix, applied to every grid this chapter
      declares rather than to the one that happened to hold an input. */
.fd-choose,
.fd-choose__head,
.fd-roster,
.fd-creator,
.fd-offer,
.fd-act,
.fd-fields,
.fd-fieldset { grid-template-columns: minmax(0, 1fr); }

/* 4. A HANDLE, A URL AND A UTC INSTANT ARE EACH ONE UNBREAKABLE TOKEN, and at
      320 each is wider than the column. `.fd-roster__who` already carried this;
      the detail heading and the embedded readiness cards did not, and measured
      37px and 13px over. PHASE 36 made the same decision twice on the Money
      console for the same reason. */
.fd-creator__head h2,
.fd-choose .card h2,
.fd-choose .card h3,
.fd-choose .card dd,
.fd-choose .card li { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .fd-choose__split { grid-template-columns: minmax(0, 1fr); }
}


/* ── PHASE 39 — Chapter 2, Live ────────────────────────────────────────────
   Founder Dashboard Session D, added 2026-08-19. §20, §18, §30.

   The reference's shape, kept: a moment at the top and a stack of sections
   under it, each one openable. What is NOT kept is what it puts in the moment
   — `$12,840 Money made`, `128% Threshold progress`, and a Creator podium
   headed "Farah Nassar is leading." §20 names Glance's one large number and it
   is the active pre-order count; §30 defers public leaderboards; and during a
   live campaign nothing has been charged at all, which is why the reserved
   totals live in Explore beside the sentence that says so.

   Every grid below declares `minmax(0, 1fr)` from the start rather than
   waiting for a browser pass to find it: an implicit `auto` track sizes to the
   widest item's MIN-content, and this chapter is full of URLs, handles and a
   45-option select — Session C's finding, applied before it could recur.
   ────────────────────────────────────────────────────────────────────────── */

.fd-live__glance,
.fd-live__act,
.fd-live__page,
.fd-live__updates,
.fd-live__posts,
.fd-live__explore {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  margin-block-end: var(--sp-24);
}

/* The moment. One number, then the sentences that qualify it — the
   not-yet-charged notice is `.notice`, which is already the loud slot. */
.fd-live__glance { gap: var(--sp-16); }

/* One ranked action, in the brand-ringed treatment Chapter 1's Act panel uses,
   so the two chapters agree about what "the thing to do" looks like. */
.fd-live__act {
  padding: var(--sp-16);
  border: var(--bw) solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand-5);
}
.fd-live__act .lede { margin: 0; }

/* The three-tier edit form. It appears under the picker rather than in a
   dialog: every submission here can be refused by the server, and `Modal`
   closes on its own primary action (Session C's reasoning, unchanged). */
.fd-live__edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  padding: var(--sp-16);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  background: var(--white);
}

/* Updates. The list is a disclosure below the composer (DNA §5.12): the thing
   a Founder came to do is post one, and reading the old ones is the Explore
   altitude of the same panel. */
.fd-live__posted { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }

.fd-live__update {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  padding-block-end: var(--sp-16);
  border-block-end: var(--bw) solid var(--grey-light);
}
.fd-live__update:last-child { border-block-end: 0; padding-block-end: 0; }
.fd-live__updatemeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: center;
  margin: 0;
  color: var(--moss);
  font-size: 0.875rem;
}

/* §18's prior/revised pairing. Two rows, so the change is legible as a change
   rather than as two facts that happen to be adjacent. */
.fd-live__change { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin: 0; }
.fd-live__change > div {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--sp-8);
}
.fd-live__change dt { color: var(--moss); margin: 0; }
.fd-live__change dd { margin: 0; overflow-wrap: anywhere; }

/* The Creators' posts. A flat list in the server's stated order — no rank
   badge, no podium, no medal, and nothing sorted by a metric (§30). */
.fd-live__postlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-16);
}
.fd-live__post {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  padding: var(--sp-12);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  background: var(--white);
}
.fd-live__posthead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
}
/* A post URL is one unbreakable token and is wider than the column at 320 —
   PHASE 36 made this call twice on the Money console, and Session C once here. */
.fd-live__post a,
.fd-live__posthead strong { overflow-wrap: anywhere; }

.fd-live__acked { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: center; margin: 0; }

/* Explore's own data rows. A definition list rather than a table: §20 puts the
   definition beside every number, and a two-column table has nowhere to say
   what a number counts. */
.fd-live__data {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-8) 0;
}
.fd-live__data > div {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--sp-8);
}
.fd-live__data dt { color: var(--moss); margin: 0; overflow-wrap: anywhere; }
.fd-live__data dd { margin: 0; overflow-wrap: anywhere; }

/* A `.btn` is inline-flex, and a DIRECT flex/grid child in a column is
   stretched to the container — the defect Founder Flow Sessions D and E, the
   Money console and Session C each recorded. Scoped to a direct child so the
   composer's own wrapped rows are untouched. */
.fd-live__post > .btn { justify-self: start; }

@media (max-width: 600px) {
  .fd-live__change > div,
  .fd-live__data > div { grid-template-columns: minmax(0, 1fr); }
}

/* -- PHASE 39 -- Chapter 3, Get paid ---------------------------------------
   Founder Dashboard Session E, added 2026-08-19. Spec 21, 22.3, 22.4, 22.5.

   The reference's own shape, kept: a money moment, then an ordered list of
   obligations, each openable. What is NOT kept is the spine it hangs them on
   -- `Request payment` / `In review` / `Paid` -- because 22.3 has no Founder
   request for a scheduled payment, and a control for one would say the money
   is waiting on the person reading it.

   Nor is the money block. The reference computes `net = gross - aff - proovd`
   in the browser and splits it 40/60 with `Math.round`; the eligible share
   subtracts five terms, the remaining payment is the exact remainder, and
   `readFounderPaymentStatus` is the one place any of it is worked out. So the
   hero here is that resolver's own number with its own note under it.

   Every grid declares `minmax(0, 1fr)` from the start -- Session C's finding,
   applied before a browser pass can rediscover it. This chapter carries
   money strings, provider-shaped references, evidence text and a select.
   -------------------------------------------------------------------------- */

.fd-paid__retry,
.fd-paid__payments,
.fd-paid__results,
.fd-paid__obligations,
.fd-paid__day14 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  margin-block-end: var(--sp-24);
}

/* The counts a Founder reads twice -- once for the retry window and once for
   the results. A definition list rather than a table: every number here needs
   a word beside it that says what it counts, and a table row has nowhere for
   one. */
.fd-paid__counts {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-12);
  margin: var(--sp-8) 0;
}
.fd-paid__counts > div { display: contents; }
.fd-paid__counts dt { color: var(--moss); margin: 0; overflow-wrap: anywhere; }
.fd-paid__counts dd { margin: 0; overflow-wrap: anywhere; }

/* The schedule. One row per 22.3 payment, in the order the settings put them,
   with the blockers under the row they block rather than collected at the
   bottom -- 22.3 asks for the requirement BY NAME beside the amount affected. */
.fd-paid__schedule {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fd-paid__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-12);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  background: var(--white);
}
.fd-paid__linehead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: baseline;
  margin: 0;
}
.fd-paid__linemeta { color: var(--moss); margin: 0; }

/* A named blocker and a missing early-release proof are the same shape: a
   short list of things somebody has to act on. `--dark` rather than `--moss`
   for the same reason `.fd-note` is -- these decide whether money moves. */
.fd-paid__blockers {
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-16);
  color: var(--dark);
}
.fd-paid__blockers li { overflow-wrap: anywhere; }

/* 22.3's secure action. It is an instruction rather than a link -- Proovd
   never collects the W-9 itself -- so it reads as copy and not as a control. */
.fd-paid__action {
  margin: 0;
  padding: var(--sp-8) var(--sp-12);
  border-left: var(--bw) solid var(--brand);
  background: var(--brand-5);
  overflow-wrap: anywhere;
}

.fd-paid__early,
.fd-paid__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  margin-block-start: var(--sp-12);
}

/* A `.btn` is inline-flex and a DIRECT flex/grid child in a column is
   stretched to the container -- the defect Founder Flow Sessions D and E, the
   Money console, and Sessions C and D each recorded. Scoped to direct
   children so nothing inside a wrapped row is touched. */
.fd-paid__early > .btn,
.fd-paid__form > .btn,
.fd-paid__deliver > .btn { justify-self: start; }

.fd-paid__narrative {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
}
.fd-paid__creators {
  margin: var(--sp-12) 0 0;
  padding-left: var(--sp-16);
}
/* A public handle is one unbreakable token and is wider than the column at
   320 -- PHASE 36 made this call twice on the Money console, and Sessions C
   and D once each here. */
.fd-paid__creators li { overflow-wrap: anywhere; }

/* 22.5's four obligations, and the commitment sequence under them. The
   original is row one and stays row one (33.10.2): it is what the delivery
   notice, the 24.11 evidence packet and 22.7's third trigger all read. */
.fd-paid__oblist,
.fd-paid__commitments,
.fd-paid__clarifications {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: 0;
}
.fd-paid__ob,
.fd-paid__commitment,
.fd-paid__clarification {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-12);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  background: var(--white);
}
.fd-paid__obhead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: baseline;
  margin: 0;
}
.fd-paid__obmeta { color: var(--moss); margin: 0; overflow-wrap: anywhere; }

.fd-paid__deliver {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  margin-block-start: var(--sp-16);
}

/* 22.4's durable receipt. A reference is a token nobody can break, and the
   detail beside it is free text a Founder typed. */
.fd-paid__receipt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  margin-block-end: var(--sp-16);
}

@media (max-width: 600px) {
  .fd-paid__counts { grid-template-columns: minmax(0, 1fr); }
}

/* -- Two fixes the browser pass found, and neither is visible to jsdom ------

   1. `--fs-num` HAS A 2.5rem FLOOR, AND THIS IS THE FIRST HERO THAT IS MONEY.
      `.stat__value` is the done-moment number slot, sized for a COUNT --
      Chapter 2's Glance puts `44` in it. `US$4,180.80` is eleven glyphs of one
      unbreakable token, and at 40px it ran 91px past its card at 320, which
      then pushed the measure, the section, and the document sideways: one
      defect reported as ten. The floor is lowered where the hero is a
      currency, and only there, so every counting Stat in the product is
      untouched. Not `overflow-wrap` -- breaking an amount across two lines is
      worse than shrinking it.

   2. `.stat__sub` IS `--grey`, WHICH IS 2.27:1 ON WHITE. It carries the label
      of the largest money figure a Founder will read, which is the case
      Founder Flow Session E's rule is about -- a line that says what a number
      MEANS is not a caption. Scoped, for the reason Session C recorded: the
      token's own ratio is a product-wide decision with its own pass. */
.fd-paid__payments .stat__value { font-size: clamp(1.5rem, 7vw, 4.5rem); }
.fd-paid__payments .stat__sub { color: var(--dark); }

/* ═══════════════════════ PHASE 41 — Chapter 4, Wrap, and the Backers page
   Founder Dashboard Session F, 2026-08-20.

   PHASE 41 and not the 40 a reader might assume: 39 was the shell and Chapters
   2 and 3, 40 was taken elsewhere the same week, and the number has now moved
   four times in three days. Derive it (`grep -oE "PHASE [0-9]+" | sort -u -V |
   tail -1`), do not carry it forward from a brief.

   Prefixes: `.fd-wrap__` and `.fd-backers__`, both free. `.fd-` is the Founder
   dashboard's own family (PHASE 39); `.cr-` is the Affiliate ADMIN workspace,
   `.mny-` the Money console, `.cmp-` the Campaigns hub.

   Conventions carried from PHASE 39, and each one is a defect a browser pass
   found on an earlier chapter:

     * every grid is `minmax(0, 1fr)`. An implicit `auto` track is sized to the
       widest item's MIN-content, and a text input carries an intrinsic one that
       ignores `width: 100%` — which is how a single-column grid comes to be
       wider than its own container at 320.
     * an email, a reward SKU and a pre-order reference are each ONE unbreakable
       token, so every cell that can hold one takes `overflow-wrap: anywhere`.
     * a sentence that states a RULE takes `--dark`; a caption stays `--moss`.
       `--moss` on white is 3.37:1 and these lines are what say why a control
       does not exist (Founder Flow Session E's finding, Session C's scoping).
     * a `.btn` is `inline-flex`, so a direct button child of a column flex is
       stretched to the measure with its label centred unless it is told not to.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Chapter 4 ───────────────────────────────────────────────────────────── */

.fd-wrap__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--sp-12);
  margin-block: var(--sp-24);
}

/* §4.1: the threshold is a COUNT. Stated plainly, next to the numbers it is
   about, rather than as a caption under them. */
.fd-wrap__threshold {
  margin-block: var(--sp-12);
  color: var(--dark);
}

.fd-wrap__granted {
  margin-block: var(--sp-12);
  padding: var(--sp-12);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  background: var(--mint);
}

.fd-wrap__creators {
  list-style: none;
  margin: var(--sp-24) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--sp-12);
}

.fd-wrap__creators > li { min-width: 0; }

/* A handle is one unbreakable token and can be long. */
.fd-wrap__handle {
  font-weight: 600;
  color: var(--dark);
  overflow-wrap: anywhere;
  margin: 0;
}

.fd-wrap__niche {
  color: var(--moss);
  margin-block: var(--sp-4) var(--sp-8);
}

.fd-wrap__decided {
  color: var(--moss);
}

/* The ask's controls sit in a row that WRAPS rather than squeezing: a `.btn` is
   `overflow: hidden` because it hosts the fill sweep, so a squeezed row clips a
   label instead of shortening it (PHASE 38's Create Founder finding). No media
   query — `flex-wrap` does nothing at a width where the row fits, so there is
   no breakpoint to get wrong. */
.fd-wrap__creators .btn {
  align-self: start;
  margin-top: var(--sp-8);
  margin-right: var(--sp-8);
}

/* ── The Backers page ────────────────────────────────────────────────────── */

.fd-backers__back {
  margin-block: 0 var(--sp-12);
}

.fd-backers__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--sp-12);
  margin-block: var(--sp-24);
}

/* §25.7's two refusals, where the reference put two more options. They read as
   part of the choice, so they sit directly beneath it rather than in a note
   further down the page. */
.fd-backers__refused {
  list-style: none;
  margin: var(--sp-12) 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
}

.fd-backers__refused-label {
  display: block;
  font-weight: 600;
  color: var(--dark);
}

.fd-backers__rows {
  list-style: none;
  margin: var(--sp-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: var(--bw) solid var(--grey-light);
}

.fd-backers__rows > li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--sp-8) var(--sp-12);
  align-items: baseline;
  padding-block: var(--sp-12);
  border-bottom: var(--bw) solid var(--grey-light);
  min-width: 0;
}

/* Every one of these can hold a single unbreakable token: an address with no
   spaces, a SKU, and a uuid. */
.fd-backers__email,
.fd-backers__reward,
.fd-backers__ref {
  overflow-wrap: anywhere;
  min-width: 0;
}

.fd-backers__email {
  font-weight: 600;
  color: var(--dark);
}

.fd-backers__reward { color: var(--moss); }

/* The reference and the state both claim a row; on a narrow screen the id is
   the least useful of the four, so it takes its own line last. */
.fd-backers__ref {
  grid-column: 1 / -1;
  color: var(--moss);
  font-size: var(--fs-body);
}

.fd-backers__step { justify-self: start; }

@media (max-width: 600px) {
  .fd-backers__rows > li { grid-template-columns: minmax(0, 1fr); }
  .fd-backers__step { justify-self: start; }
}

/* -- The money hero, for the fourth time -----------------------------------

   `--fs-num` has a 2.5rem floor because `.stat__value` is the done-moment
   number slot, sized for a COUNT — Chapter 2's Glance puts `44` in it, and at
   40px that is fine. `US$5,715.60` is eleven glyphs of one unbreakable token
   and ran 108px past its card at 1280 here, pushing the figures row, the
   measure and the section with it: one defect reported as four.

   Session E lowered the floor on `.fd-paid__payments` and scoped it there so
   every counting Stat in the product stayed untouched. Lowering it alone was
   not enough here: this row was two auto-fit columns, so the amount had half
   the measure and was still 11px over at 1280 — and a wider figure would put
   it back however far the clamp came down. So the row is ONE column at every
   width. The count and the amount are two facts about the same campaign and
   read perfectly well stacked; sizing an unbreakable token to fit half a
   measure is how this defect keeps coming back. Not `overflow-wrap` either:
   breaking an amount across two lines is worse than shrinking it.

   `.stat__sub` is `--grey` (2.27:1 on white) and here it carries the label of
   the largest money figure a Founder reads — Founder Flow Session E's rule,
   that a line saying what a number MEANS is not a caption. Scoped, because the
   token's own ratio is a product-wide decision with its own pass. */
.fd-wrap__figures { grid-template-columns: minmax(0, 1fr); }
.fd-wrap__figures .stat--white .stat__value { font-size: clamp(1.5rem, 6vw, 3.5rem); }
.fd-wrap__figures .stat__sub { color: var(--dark); }

/* -- What is a caption and what is a rule, on these two surfaces -----------

   Founder Flow Session E's finding and Session C's scoping, applied line by
   line: `--moss` is 3.37:1 and `--grey` is ~2.2:1 on white, both under AA, and
   both are product-wide decisions with their own pass. So a caption keeps the
   quiet token and anything that CHANGES WHAT SOMEBODY DOES takes `--dark`.

     * the do-not-fulfill note is a rule about money — the whole reason a row
       stays on the list is to say nothing is owed;
     * the `To deliver` sub says what the number a Founder packs against counts;
     * the reward title is what they ship, and the pre-order reference is what
       they read out to support — both are content, not decoration;
     * §25.7's basis under each permitted purpose is why that purpose is the
       one they may pick;
     * a §22.8 disqualification reason is Proovd's recorded decision about
       somebody's work.

   `.fd-wrap__niche` stays `--moss`: a Creator's niche genuinely is a caption
   beside their handle, and re-toning every quiet line would leave the surface
   with no quiet lines at all. */
.fd-backers__figures .stat__sub,
.fd-backers__rows .fd-backers__reward,
.fd-backers__rows .fd-backers__ref,
.fd-backers__ask .choice__sub,
.fd-wrap__decided { color: var(--dark); }


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 42 — The Founder's account settings (§5.2), Session G, 2026-08-20
   ═══════════════════════════════════════════════════════════════════════════

   Eleven items at one account-level address, and the page Phase 22c's
   `/settings/notifications` was always going to join. Nothing here mints a
   colour: every rule reads a slot, and the two tone decisions below are the
   same one PHASE 39 and PHASE 41 recorded — a sentence that states a rule
   takes `--dark`, a caption keeps `--moss`.

   `.fd-set-` and not `.fd-` bare: `.fd` is the dashboard SHELL, and this page
   is deliberately outside it (a chapter belongs to a campaign; these belong to
   the person). Scoping the shell's `.wrap` fix to `.fd` is what makes that
   distinction matter, and this page uses `Section`/`Measure` at the top level
   exactly as the notification page it absorbs always did.

   Prefixes checked and free: `.pc-` (33), `.ff-` (34), `.cr-` (26/32), `.cf-`
   (31), `.mny-` (36), `.tdy-` (37), `.fd-` (39/41). */

.fd-set__kicker {
  color: var(--moss);
  margin: 0 0 var(--sp-24);
}

/* One block per §5.2 item, with a rule of its own so the sections read as a
   list of eleven rather than as one long column of prose. */
.fd-set__block {
  display: grid;
  gap: var(--sp-12);
  padding-block: var(--sp-24);
  border-top: var(--bw) solid var(--grey-light);
}

.fd-set__fields,
.fd-set__confirmations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-16);
}

.fd-set__field {
  display: grid;
  gap: var(--sp-8);
}

/* The value and its control on one line where there is room, stacked where
   there is not. `flex-wrap` rather than a breakpoint: PHASE 34's finding —
   wrapping does nothing at a width where the row fits and everything at a
   width where it does not, so there is no number to get wrong. The Button is
   `flex: 0 0 auto` for the reason PHASE 39 recorded on `.copylink`: a `.btn`
   is `overflow: hidden` because it hosts the fill sweep, so a squeezed row
   clips the label rather than wrapping it. */
.fd-set__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-12);
}

.fd-set__row > div {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

.fd-set__row > .btn {
  flex: 0 0 auto;
}

/* `.kicker`'s own treatment rather than a font-size token: there is no
   `--fs-caption` in this file (the var scan in `a11y.test.tsx` said so, which
   is what that scan is for), and the six that do exist are body, button, h2,
   hero, number and step. Uppercase at the body size with tracking is what
   every other label-above-a-value in the product does. */
.fd-set__label {
  color: var(--moss);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* An address, a phone number, and a legal name are each one unbreakable token
   and each is wider than its column at 320. PHASE 36 made this call twice on
   the Money console and PHASE 41 once on the Backers page; it is the same
   defect and the same answer. */
.fd-set__value {
  color: var(--dark);
  overflow-wrap: anywhere;
}

.fd-set__help {
  color: var(--moss);
  margin: 0;
}

.fd-set__edit {
  display: grid;
  gap: var(--sp-12);
  padding: var(--sp-16);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
}

.fd-set__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
}

/* A `.btn` is inline-flex, and an inline-flex flex ITEM in a grid or column is
   stretched to the container width by the default `align-items: stretch` —
   Founder Flow Session D found it on a `.tag`, Session E on a `.btn`, and the
   Money console a third time. A direct child of the block, so nothing inside
   `.fd-set__acts` (already a row) is touched. */
.fd-set__block > .btn {
  justify-self: start;
}

.fd-set__confirmations li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  justify-content: space-between;
}

/* -- What is a caption and what is a rule, on this surface -----------------

   PHASE 41's rule, third time. `--moss` is 3.37:1 on white and under AA, and
   re-toning the token is a product-wide decision with its own pass — so a
   caption keeps it and anything that CHANGES WHAT SOMEBODY DOES takes
   `--dark`. Here that is:

     * `.fd-set__rule` — the four pinned sentences. Every one of them states a
       consequence somebody needs before they act: that changing a password
       signs them out everywhere, that Proovd never sees their identity
       documents, that a W-9 belongs to a campaign, and that closing an account
       does not erase the records. Reading any of those as decoration is
       exactly the §1.4 failure they exist to prevent.
     * `.fd-set__consequence` — what changing a legal name or a contact address
       actually moves, stated BEFORE the change rather than discovered after
       it.

   `.fd-set__label` and `.fd-set__help` stay `--moss`: a field's name beside
   its value, and a hint under it, genuinely are captions. */
.fd-set__rule,
.fd-set__consequence {
  color: var(--dark);
  margin: 0;
}

.fd-set__consequence {
  padding-left: var(--sp-12);
  border-left: var(--bw) solid var(--accent-yellow);
}


/* ══════════════════════ PHASE 43 — the Creator onboarding flow
   (Creator Flow v2, Session B, 2026-08-19)

   The Creator's path from a private invitation to a live campaign, redrawn to
   the supplied reference as a sequence OF pages rather than one compact form.
   Four of nine onboarding screens are built; every later screen renders inside
   what is here.

   The conventions PHASE 25 set and 26–42 restated bind here too:

     1. TOKENS ONLY. Read a token or a mode slot, never a raw value. px is
        legal for hairlines, radii, and the 44px minimum (via --touch).

     2. SCOPED REUSE. .btn, .input, .field-label, .field-hint, .kv, .drawer,
        .wordmark and .sr-only are reused rather than restyled. Everything new
        is prefixed .crf-.

     3. RESPONSIVE IS A CORRECTION. Each media rule names the overflow it
        answers. Wide content scrolls inside its own container; the body never
        scrolls sideways.

   THE PREFIX IS .crf-, AND IT IS THE FOURTH CANDIDATE. The obvious three are
   all taken and none is related to this:
     .cr-   PHASE 26/32 — the Affiliate ADMIN workspace
     .cf-   PHASE 31 — the Create Founder compose page
     .ff-   PHASE 34 — the Founder onboarding flow
     .mny-  PHASE 36 — the Money & Fulfillment console

   ── COLOUR RESOLUTION ──────────────────────────────────────────────────────
   The reference declares eleven `--p-*` tokens plus a border width and a
   radius. NOTHING IS MINTED: ten of the eleven are byte-identical to a token
   this file already has, and the eleventh resolves by role.

     --p-brand   #41ED98  →  --brand          identical
     --p-white   #FAFAFA  →  --white          identical
     --p-dark    #013F17  →  --dark           identical
     --p-darker  #012D10  →  --darker         identical
     --p-light   #E9FFE1  →  --mint           identical
     --p-mid     #669370  →  --moss           identical
     --p-soft    #F1F3F2  →  --grey-light     identical
     --p-visual  #F7F7F7  →  --grey-lightest  identical
     --p-blue    #DEFAFC  →  --accent-blue    identical
     --p-yellow  #F7FF9E  →  --accent-yellow  identical

     --p-muted   #A2AFA8  →  BY ROLE. It is --grey, and --grey on --white is
       about 2.18:1. The reference uses it for two different things: field
       labels and placeholder ink, where it is correct and is what --grey is
       for; and body sentences, where it is not. PHASE 34 moved five sentences
       off it for exactly this reason and PHASE 36 re-toned nine more. Here,
       every sentence a person has to READ takes --moss or --darker, and --grey
       is left to rest states.

     --bw 2px  →  --bw, which is already 2px (and 1px under 600px).
     --br 2px  →  --radius, which is 1px. "sharp. everywhere." is this file's
       own decision and the reference does not override it.

   Local display recipes are --crf-* on the root class, never new :root
   entries. Cross-component overrides use :where() so they add no specificity —
   the trap PHASE 34's Session C hit, where `.ff .field-hint` beat
   `.ff-panel .field-hint` (since removed) on source order and painted a hint
   into its own
   background.
   ═════════════════════════════════════════════════════════════════════════ */

.crf {
  --crf-measure: 34rem;
  --crf-gap: var(--sp-24);

  min-height: 100vh;
  min-height: 100dvh;
  background: var(--white);
  color: var(--darker);
}

.crf__stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--sp-24) var(--gutter) var(--sp-48);
}

/* The top bar: wordmark left, the quiet meta line and Help right. Not a link —
   an invitation address is not a site, and the way out of a half-finished form
   should not be the brand. */
.crf__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  flex: none;
  flex-wrap: wrap;
}

.crf__mark { font-size: 1.125rem; }

.crf__top-right {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
}

.crf__meta {
  font-size: 0.875rem;
  color: var(--moss);
}

.crf__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(var(--crf-measure), 100%);
  margin: 0 auto;
  padding: var(--sp-48) 0;
}

/* The invitation page owns its whole viewport, so it renders its own top row
   inside its own lockup rather than inheriting the bar. */
.crf--bare .crf__stage { padding: 0; }
.crf--bare .crf__body {
  width: 100%;
  padding: 0;
  justify-content: stretch;
}

/* ─────────────────────────────────────────────────────── the nav row */

/* Reused by every screen. `.btn` is inline-flex, and a flex item in a COLUMN
   is stretched to full width by the default align-items — the defect Founder
   Flow Session D found on a .tag, Session E found on a .btn, and PHASE 36
   found again. This row is horizontal, so the stretch does not apply; it is
   noted because the next screen to put a lone button in a column will hit it. */
.crf-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  flex-wrap: wrap;
  margin-top: var(--sp-32);
}

.crf-nav .btn:last-child { margin-left: auto; }

.crf-nav__status {
  font-size: 0.875rem;
  color: var(--moss);
}

/* ─────────────────────────────────────── screens 1, 2 and 7, rebuilt 1:1

   Screen 1's own declarations left this section on 2026-08-20, screen 2's
   followed the same day, and screen 7's went with them — all three were rebuilt
   1:1 from the v11 reference, and they live in PHASE 58, PHASE 59 and PHASE 60
   now. `.crf-pw__*`, `.crf-you__*` and `.crf-agree__*` are deliberately absent
   from the rules below: each phase sets its own head and lede, and a stale
   `font-size: var(--fs-step)` reaching a rebuilt `__head` from up here leaked a
   40px size and a -1.4px letter-spacing into it — invisible at 1440, where both
   children set their own, and NOT invisible below 901px, where the lede
   inherits letter-spacing. Two sections styling one class is exactly how that
   happens.

   `.crf-you__head` and `.crf-agree__head` still exist as class names in PHASE
   59 and PHASE 60, on the same elements, which is why removing them from here
   mattered rather than being tidying. */

.crf-channel__head,
.crf-voice__head,
.crf-presence__head,
.crf-verify__head {
  font-size: var(--fs-step);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 var(--sp-12);
}

.crf-channel__lede,
.crf-voice__lede,
.crf-presence__lede,
.crf-verify__lede {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--moss);
  margin: 0 0 var(--sp-32);
  max-width: 42ch;
}

.crf-channel__fields,
.crf-presence__fields,
.crf-verify__fields {
  display: grid;
  gap: var(--sp-24);
}

/* ─────────────────────────────────────────────────── screen 3, the channel */

.crf-channel__tiles {
  border: 0;
  margin: 0 0 var(--sp-24);
  padding: 0;
  min-width: 0;
}

/* A <legend> loses its size to UA styling — the defect Founder Flow Session F
   found on the one screen whose legend asks the question. */
.crf-channel__legend {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--moss);
  padding: 0;
  margin-bottom: var(--sp-12);
}

.crf-channel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--sp-8);
}

.crf-tile {
  min-height: var(--touch);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-8);
  padding: var(--sp-12);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--darker);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

.crf-tile:hover { border-color: var(--brand); }
.crf-tile.is-on {
  border-color: var(--brand);
  background: var(--brand-5);
}

.crf-channel__disagree {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--darker);
  background: var(--accent-yellow);
  border-radius: var(--radius);
  padding: var(--sp-12) var(--sp-16);
  margin: 0 0 var(--sp-24);
}

.crf-channel__student {
  border-left: 3px solid var(--brand);
  padding-left: var(--sp-16);
}

.crf-channel__note {
  font-size: 0.875rem;
  color: var(--moss);
  margin: var(--sp-16) 0 0;
}

/* ──────────────────────────────────────────────────────── the help drawer */

.crf-help__sub {
  font-size: 0.9375rem;
  color: var(--moss);
  margin: 0 0 var(--sp-16);
}

.crf-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-12);
}

.crf-help__card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4) var(--sp-12);
  width: 100%;
  text-align: left;
  padding: var(--sp-16);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--darker);
  font: inherit;
  cursor: pointer;
}

button.crf-help__card:hover { border-color: var(--brand); }

.crf-help__card.is-current {
  border-color: var(--brand);
  background: var(--brand-5);
}

/* Not a button, so it must not read as one. */
.crf-help__card.is-closed { cursor: default; }

.crf-help__title { font-weight: 700; }

.crf-help__state {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--moss);
  align-self: start;
}

.crf-help__body,
.crf-help__closed {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--moss);
}

.crf-help__closed {
  margin-top: var(--sp-8);
  color: var(--darker);
}

/* `.field-hint` is `--grey`, about 2.18:1 on `--white` — the token for
   placeholder and disabled ink, and correct there. On these screens it carries
   sentences that change what somebody types: which address every message goes
   to, and §33.1.8's own promise that the phone is never verified.

   PHASE 34 made exactly this correction for the Founder flow and recorded why
   it is scoped rather than global — `.field-hint` renders on every form in the
   product, and moving the token there is its own change with its own
   screenshot pass. `:where()` so it adds no specificity and cannot outrank a
   panel's own override. */
:where(.crf) .field-hint { color: var(--moss); }

/* ──────────────────────────────────── two defects the browser pass found,
   both PRE-EXISTING and neither belonging to this flow.

   1. `.wrap` is `width: min(90vw, 1600px)` — a VIEWPORT width, correct for a
      top-level band and wrong for anything nested. `Section` renders one, so
      any `<Measure><Section>` renders a 1152px child inside a 799px box: at
      1280 the Creator's signup page spilled 430px, and it has done since
      Phase 08b. PHASE 38 found the same thing inside the Admin view and fixed
      it there; this is the general form of it.

      `:where()` so it contributes no specificity — the trap PHASE 34's
      Session C hit. A `.wrap` inside a `.measure` never wants a viewport
      width, whoever nested them, so this is a correction rather than an
      override.

   2. A `.kv` value holding a URL, an address, or an id is one unbreakable
      token, and at 320 it pushed the document sideways (§33.11.1). PHASE 36
      made this decision twice for `.mny-facts dd` and `.mny-head__title`;
      fixed at the definition here, because a `dd` that overflows rather than
      wrapping is a defect at every one of its call sites. Unlike a colour, it
      changes nothing where the content already fits. */
:where(.measure) .wrap { width: 100%; }
.kv__row dd { overflow-wrap: anywhere; }

/* ─────────────────────────────────────────────────────────────── narrow */

/* At 320 the nav row's `margin-left: auto` would push the primary onto its own
   line with the status stranded beside it. Stacking is legible; a row that
   wraps unpredictably is not. */
@media (max-width: 600px) {
  .crf-nav { flex-direction: column; align-items: stretch; }
  .crf-nav .btn:last-child { margin-left: 0; }
  .crf-channel__grid { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
}

/* ══════════════════════ PHASE 43 continued — screens 4–8
   (Creator Flow v2, Session C, 2026-08-19)

   The tone, the bio, the figures, the agreement, and the account. Everything
   here extends the block above rather than restating it: the head, the lede,
   the field grid, `.crf-nav` and `.crf-tile` are Session B's and are reused by
   adding a selector rather than by writing a second rule.

   Two absences are STYLED, which is the point of them being here at all —
   `.crf-presence__absent` and `.crf-verify__absent` are where the reference
   draws an upload control, and they have to read as a stated reason rather
   than as an error somebody caused (§1.4, Track A4).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────── screen 4, the voice */

.crf-voice__chips {
  border: 0;
  margin: 0 0 var(--sp-24);
  padding: 0;
  min-width: 0;
}

/* A <legend> loses its size to UA styling — Founder Flow Session F's finding,
   and this screen's legend is its own question. */
.crf-voice__legend {
  font-size: 0.9375rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--darker);
  padding: 0;
  margin: 0 0 var(--sp-4);
}

.crf-voice__help {
  font-size: 0.875rem;
  color: var(--moss);
  margin: 0 0 var(--sp-16);
}

.crf-voice__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-12);
}

/* A chip carries its own meaning under its label: "Understated" tells somebody
   nothing about what they would be claiming to a Founder. */
.crf-tone {
  display: grid;
  gap: var(--sp-4);
  text-align: left;
  min-height: var(--touch);
  padding: var(--sp-12) var(--sp-16);
  border: var(--bw) solid var(--grey);
  background: var(--white);
  font-family: inherit;
  color: var(--darker);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.crf-tone:hover { border-color: var(--brand); }

.crf-tone.is-on {
  border-color: var(--brand);
  background: var(--brand-5);
}

.crf-tone__label { font-weight: 800; font-size: 0.9375rem; }
.crf-tone__help { font-size: 0.8125rem; color: var(--moss); line-height: 1.4; }

/* `--moss` reads about 3.4:1 on white and about 2.3:1 once the chip takes its
   mint fill — so the explanation got HARDER to read at the moment somebody
   chose it. Found by the browser pass; axe cannot see it, because the
   accessible name is the label and contrast is computed against the element's
   own declared background rather than the fill behind it. */
.crf-tone.is-on .crf-tone__help { color: var(--dark); }

.crf-voice__custom-list {
  list-style: none;
  margin: 0 0 var(--sp-16);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.crf-voice__custom {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-12);
  border: var(--bw) solid var(--brand);
  background: var(--brand-5);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--darker);
}

.crf-voice__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--darker);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.crf-voice__remove:hover { color: var(--moss); }

/* The add row: a field and its control on one line, wrapping when the field
   would be narrower than it is readable. */
.crf-voice__add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-12);
  margin-bottom: var(--sp-24);
}

.crf-voice__add > *:first-child { flex: 1 1 16rem; min-width: 0; }

/* Its own control rather than a seventh chip: it says something about the
   other answers, so it reads as a switch and not as a member of the set. */
.crf-voice__flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  width: 100%;
  min-height: var(--touch);
  padding: var(--sp-12) var(--sp-16);
  border: var(--bw) solid var(--grey);
  background: var(--white);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--darker);
  text-align: left;
  cursor: pointer;
}

.crf-voice__flex.is-on { border-color: var(--brand); background: var(--brand-5); }

/* The state as a word. A `space-between` row with one child reads as a box
   with a hole in it, and the fill alone conveys on/off to nobody who cannot
   see it (DNA §1). */
.crf-voice__flex-state {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--moss);
}

.crf-voice__flex.is-on .crf-voice__flex-state { color: var(--dark); }

.crf-voice__problems,
.crf-verify__problems {
  margin: var(--sp-16) 0 0;
  padding: var(--sp-12) var(--sp-16);
  border-left: 0.1875rem solid var(--accent-yellow);
  background: var(--surface);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--dark);
}

ul.crf-voice__problems { padding-left: var(--sp-32); }

.crf-voice__note,
.crf-verify__note,
.crf-presence__absent,
.crf-verify__absent,
.crf-verify__basis,
.crf-verify__none {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--moss);
  margin: var(--sp-24) 0 0;
  max-width: 52ch;
}

/* ───────────────────────────────────────────────────────── screen 5, the bio */

/* A named absence, not an error and not a disabled control. The rule it needs
   is to look like a stated fact — the brand hairline says "this is Proovd
   telling you something", where the yellow above says "something went wrong". */
.crf-presence__absent,
.crf-verify__absent,
.crf-verify__none {
  padding: var(--sp-16) var(--sp-24);
  border-left: 0.1875rem solid var(--brand);
  background: var(--surface);
  margin: 0 0 var(--sp-32);
}

.crf-verify__absent { margin: var(--sp-32) 0 0; }

/* ─────────────────────────────────────────────────── screen 6, the numbers */

.crf-verify__basis { margin: var(--sp-16) 0 0; }

/* ───────────────────────────────────────────────── screen 7, the agreement

   Rebuilt 1:1 from the v11 reference on 2026-08-20 — every declaration it had
   here is in PHASE 60 now. Nothing is left in this section for it. */

/* ── Narrow widths ─────────────────────────────────────────────────────────
   One correction, and it names what it answers: the tone grid's 15rem minimum
   overflows below about 34rem once the stage gutter is taken, so it becomes a
   single column. `.crf-nav` already stacks in the block above. */
@media (max-width: 34rem) {
  .crf-voice__grid { grid-template-columns: 1fr; }
  .crf-voice__add > *:first-child { flex: 1 1 100%; }
}

/* ══════════════════════ PHASE 44 — the Creator app shell and Home
   (Creator Flow v2, Session D, 2026-08-19)

   The first persistent chrome a Creator has ever had: a rail, two drawers, and
   an account-level home. §26 makes the Admin panel the only dashboard-style
   product in MVP, which is why this needed a recorded deviation to exist — and
   why it deliberately does NOT look like `AdminFrame`. No environment cluster,
   no Tasks launcher, no density.

   The conventions PHASE 25 set and 26–43 restated bind here too:

     1. TOKENS ONLY. Read a token or a mode slot, never a raw value. px is
        legal for hairlines, radii, and the 44px minimum (via --touch).

     2. SCOPED REUSE. .btn, .input, .field, .drawer, .accordion, .sr-only and
        .notification-history are reused rather than restyled. Everything new
        is prefixed .cra-.

     3. RESPONSIVE IS A CORRECTION. Each media rule names the overflow it
        answers. Wide content scrolls inside its own container; the body never
        scrolls sideways.

   THE PREFIX IS .cra-, AND IT IS DELIBERATELY NOT .crf-. PHASE 43 is the
   onboarding FLOW, which is nine full-bleed pages under an invitation token;
   this is the app a Creator reaches after the claim, under a session. Sharing
   a prefix would mean one rule reaching across the auth boundary the two sides
   of this product are separated by.

   The five prefixes already taken:
     .cr-   PHASE 26/32 — the Affiliate ADMIN workspace
     .crf-  PHASE 43 — the Creator onboarding flow
     .cf-   PHASE 31 — the Create Founder compose page
     .ff-   PHASE 34 — the Founder onboarding flow
     .mny-  PHASE 36 — the Money & Fulfillment console

   ── THE RAIL IS DARK, AND IT READS `mode-dark` ────────────────────────────
   The reference's rail is `#013F17`, which is `--dark`. Rather than naming the
   colour, the element carries `mode-dark` and reads `--mode-bg`/`--mode-body`
   — so the rail follows the same slot every dark band in the product does, and
   a change to the dark palette reaches it without this section being edited.

   ── ONE LAYOUT, TWO CHROMES, AND ONLY ONE IS EVER VISIBLE ─────────────────
   `.cra-rail` is the vertical rail at >=900px; `.cra-bar` is the top bar with
   the menu drawer below it. They are display-toggled rather than one element
   reflowing, because the two carry different controls: the bar has a Menu
   button that the rail does not need, and the rail lists five sections the bar
   has no room for. Both render the same `SectionList`, so the two can never
   disagree about what the sections ARE.
   ══════════════════════════════════════════════════════════════════════════ */

.cra {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--white);
}

/* ── The rail ─────────────────────────────────────────────────────────────── */

.cra-rail {
  display: none;
  background: var(--mode-bg);
  color: var(--mode-body);
}

.cra-rail__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-weight: 900;
  font-size: var(--fs-body);
  letter-spacing: -0.05em;
  color: var(--mode-title);
  text-decoration: none;
}

.cra-rail__mark {
  width: 0.7rem;
  height: 0.7rem;
  background: var(--brand);
  flex: none;
}

.cra-rail__list,
.cra-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cra-rail__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

/* One item treatment for the link, the button, and the disabled span, so the
   three never drift apart. Buttons here are navigation and a drawer trigger,
   not actions — .btn is deliberately not reused. */
.cra-nav__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: var(--sp-8) 0;
  min-height: var(--touch);
  font: inherit;
  font-weight: 800;
  color: var(--mode-body);
  text-decoration: none;
  cursor: pointer;
}

.cra-nav__item:hover,
.cra-nav__item:focus-visible {
  color: var(--mode-title);
}

.cra-nav__item[aria-current='page'] {
  color: var(--mode-title);
  box-shadow: inset 3px 0 0 var(--brand);
  padding-left: var(--sp-12);
}

/* A section with no address. `aria-disabled` rather than `disabled` so it stays
   in the tab order and a keyboard user meets the explanation a sighted user can
   see (§28.5) — the Support workspace's own rule. */
.cra-nav__item--off {
  cursor: default;
  font-weight: 700;
}

/* `--fs-step` is a flow step TITLE (clamp(1.625rem, 4vw, 2.5rem)) and reading
   it as "one step down" put a 40px sentence in the rail. The browser pass found
   it in three places; the small sizes this file already uses are 0.875rem and
   0.9375rem. */
.cra-nav__off {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--mode-body);
  opacity: 0.8;
}

/* ── The narrow-width bar ─────────────────────────────────────────────────── */

.cra-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--gutter);
  background: var(--mode-bg);
  color: var(--mode-body);
}

.cra-bar__acts {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}

.cra-bar .cra-nav__item {
  width: auto;
}

.cra-menu__foot {
  margin-top: var(--sp-24);
}

/* Inside `.drawer` the ground is `--darker` and `mode-drawer` sets the tones.
   `--moss` is a LIGHT-mode body tone and was unreadable there — the browser
   pass found it, which is the same class of defect PHASE 28, 31, 33 and 39 each
   recorded: a colour correct in one mode carried into another. */
.cra-drawer__lede {
  color: var(--mode-body, var(--moss));
  margin: 0 0 var(--sp-16);
  max-width: var(--measure);
}

/* ── The page ─────────────────────────────────────────────────────────────── */

.cra-main {
  flex: 1;
  min-width: 0;
}

.cra-page {
  padding: var(--sp-32) var(--gutter) var(--sp-80);
  max-width: 72rem;
  margin: 0 auto;
}

.cra-home__greeting {
  font-weight: 700;
  color: var(--moss);
  margin: 0 0 var(--sp-16);
}

.cra-muted {
  color: var(--moss);
}

/* Every pinned sentence sits WITH the thing it qualifies rather than below it,
   which is why they are body-toned rather than fine print: STANDING_BINDS_NOTHING
   beside the score, REFERRAL_PAYS_NOTHING beside the form. */
.cra-pinned {
  color: var(--dark);
  margin: 0 0 var(--sp-16);
  max-width: var(--measure);
}

.cra-problem {
  color: var(--dark);
  font-weight: 700;
}

/* ── The hero ─────────────────────────────────────────────────────────────── */

.cra-hero {
  background: var(--brand);
  color: var(--dark);
  padding: var(--sp-32);
  margin-bottom: var(--sp-32);
}

/* The caught-up ending is a designed done-moment (DNA §5.4), not a smaller
   version of the same band. The active hero carries `mode-dark` and this one
   does not, so they differ in treatment as well as in content — and this one
   has no control on it at all. */
.cra-hero--calm {
  background: var(--brand-5);
  color: var(--dark);
}

/* Inside `mode-dark` the band reads the dark slots. Without this the hero's
   own links inherit the page ink and vanish. */
.cra-hero.mode-dark {
  background: var(--mode-bg);
  color: var(--mode-body);
}

.cra-hero.mode-dark .cra-hero__head {
  color: var(--brand);
}

.cra-hero__list a {
  color: var(--mode-link, var(--dark));
  font-weight: 700;
}

.cra-hero.mode-dark .cra-muted {
  color: var(--mode-body);
  opacity: 0.85;
}

.cra-hero__eyebrow {
  margin: 0 0 var(--sp-8);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cra-hero__head {
  margin: 0 0 var(--sp-24);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.cra-hero__body {
  margin: 0;
  max-width: var(--measure);
}

.cra-hero__list {
  list-style: none;
  margin: var(--sp-24) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* ── The blocks ───────────────────────────────────────────────────────────── */

.cra-home__split {
  display: grid;
  gap: var(--sp-32);
}

.cra-block {
  border-top: var(--bw) solid var(--dark);
  padding-top: var(--sp-16);
  margin-bottom: var(--sp-32);
}

.cra-block__title {
  margin: 0 0 var(--sp-12);
  font-size: var(--fs-h2);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.cra-standing__score {
  margin: 0;
  font-weight: 900;
  font-size: var(--fs-num);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.cra-standing__tier {
  margin: var(--sp-4) 0 0;
  font-weight: 800;
}

.cra-standing__freshness {
  margin: var(--sp-4) 0 var(--sp-16);
  font-size: 0.9375rem;
}

.cra-defs {
  margin: 0 0 var(--sp-16);
}

.cra-defs > div {
  border-top: 1px solid var(--grey-lightest);
  padding: var(--sp-8) 0;
}

.cra-defs dt {
  font-weight: 800;
}

.cra-defs dd {
  margin: var(--sp-4) 0 0;
  color: var(--moss);
  overflow-wrap: anywhere;
}

.cra-tasks {
  margin: 0;
  padding-left: var(--sp-16);
  color: var(--moss);
}

.cra-list {
  list-style: none;
  margin: 0 0 var(--sp-16);
  padding: 0;
}

.cra-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  border-top: 1px solid var(--grey-lightest);
  padding: var(--sp-12) 0;
  flex-wrap: wrap;
}

.cra-list__head {
  margin: 0;
  font-weight: 800;
}

.cra-list__acts {
  display: flex;
  gap: var(--sp-8);
  flex: none;
}

.cra-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin-bottom: var(--sp-16);
}

/* A .btn is inline-flex, and a flex item in a column is stretched to the
   container width by the default align-items: stretch — which renders a label
   centred across the measure. Session D, E and F of the Founder flow each hit
   this; scoped to a direct child so a deliberate full-width control still can
   be one. */
.cra-block > .btn,
.cra-menu__foot > .btn {
  align-self: flex-start;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* At >=900px the rail takes the left column and the bar is gone. Below it the
   five sections do not fit beside the page at all, so the bar and its menu
   drawer carry them — a hidden section is a missing section (PHASE 32's own
   rule about the Affiliate tab rail). */
@media (min-width: 900px) {
  .cra {
    flex-direction: row;
  }

  .cra-rail {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    flex: 0 0 14rem;
    padding: var(--sp-24) var(--sp-16);
  }

  .cra-bar {
    display: none;
  }
}

/* The side column is a third of the width and `--fs-h2` clamps to 3.25rem, so
   `Refer another Creator` wrapped to three lines there. A block title is a
   heading in both columns; only its size differs with the room it has. */
@media (min-width: 64rem) {
  .cra-home__side .cra-block__title {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
  }
}

/* At >=64rem the side column sits beside the main one. Below it everything
   stacks, which is also what keeps the page from scrolling sideways at 320. */
@media (min-width: 64rem) {
  .cra-home__split {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}


/* ══════════════════════ PHASE 45 — the Creator's work surface, Earnings,
   Resources and Settings (Creator Flow v2, Session F, 2026-08-20)

   The four pages that fill the rail Session D built. They render INSIDE
   `CreatorAppShell`, so the prefix stays `.cra-` — a fifth family for pages
   that live in the same chrome would be a distinction nobody reading the
   markup could act on. PHASE 44 owns the shell; this owns what sits in it.

   The conventions PHASE 25 set and 26–44 restated bind here too:

     1. TOKENS ONLY. Read a token or a mode slot, never a raw value.

     2. SCOPED REUSE. `.card`, `.kv`, `.btn`, `.field`, `.doc-list`,
        `.state-panel`, `.tag` and `.notification-history` are reused rather
        than restyled. Everything new is prefixed `.cra-`.

     3. RESPONSIVE IS A CORRECTION. Each media rule names the overflow it
        answers.

   ── The two tones, and why they are not `--grey` ──────────────────────────
   `--grey` is about 2.18:1 on white and has been the recorded gap since PHASE
   36. Nothing on these four pages uses it: a sentence that states a RULE takes
   `--dark` (`.cra-help` carries §22.1's no-withdrawal sentence, §5.3's reason
   requirement, and §29.5's decides-no-money line — every one of them changes
   what somebody does), and a caption that merely labels takes `--moss`.

   ── `.cra-b7` is a `<pre>`, and that is deliberate ────────────────────────
   Appendix B.7 is exact text with its own line breaks, resolved server-side
   and thrown on an unfilled bracket. Reflowing it into paragraphs would be
   this surface re-rendering an appendix, which is exactly what one resolver
   exists to prevent. It scrolls inside itself rather than widening the page.
   ══════════════════════════════════════════════════════════════════════════ */

/* The lede under a page title. One measure, always. */
.cra-lede {
  margin: var(--sp-8) 0 0;
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--moss);
}

/* A sentence that states a rule. Not a caption — it changes what you do. */
.cra-help {
  margin: var(--sp-12) 0 0;
  max-width: var(--measure);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--dark);
}

/* §17's last bullet. A fact about when, never a claim about live. */
.cra-fresh {
  margin: var(--sp-8) 0 0;
  font-size: 0.875rem;
  color: var(--moss);
}

/*
 * The lifetime figure on Earnings. A number, not a band.
 *
 * NOT `--fs-hero`. `US$691.20` at that size is 348px wide and pushes the
 * document sideways at 320 — the browser pass measured 28px of overflow, which
 * is a §33.11.1 failure on the one page whose whole job is a number. The clamp
 * keeps the hero weight at every width the product supports.
 */
.cra-amount {
  margin: var(--sp-12) 0 0;
  font-size: clamp(2.25rem, 11vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}

/*
 * The page header, above the cards.
 *
 * These four pages use `.cra-page` — Session D's own container — rather than
 * `Measure`, which is a max-width with NO gutter: a `.card` inside it sat flush
 * against the viewport edge while the section above it was inset by `.wrap`.
 * The browser pass found that at 1280, where two different left edges on one
 * page are unmissable and invisible to every other check.
 */
.cra-page__head {
  margin-bottom: var(--sp-32);
}

/*
 * A `Section` nested inside the app page, and this is PHASE 38's own defect on
 * a different container.
 *
 * `.wrap` is `width: min(90vw, 1600px)` — a VIEWPORT width, correct for a
 * top-level public section and wrong for anything nested. Settings embeds
 * §27.7's `NotificationSettings`, which renders its own `Section`, so the
 * digest control computed 231px wider than the page holding it and pushed the
 * document sideways at 1280 AND at 320. The browser pass measured both; no
 * other check can see it, because the markup and the accessible names are
 * correct either way.
 *
 * Scoped to `.cra-page`, exactly as PHASE 38 scoped the same fix to `.view`.
 */
.cra-page .wrap {
  width: 100%;
  max-width: 100%;
}
.cra-page .section {
  padding-inline: 0;
}

/*
 * One label column across every settings row.
 *
 * `.kv__row` is `minmax(8rem, max-content) 1fr` and sizes per `dl`. Ten
 * one-row lists therefore produced five different value positions, which reads
 * as a broken table rather than a list. A fixed column is what the reader
 * needs, and it collapses at the same 600px `.kv__row` does.
 */
.cra-setting__row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--sp-16);
  align-items: baseline;
}
.cra-setting__label {
  color: var(--moss);
  font-weight: 700;
}
.cra-setting__value {
  color: var(--dark);
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .cra-setting__row {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* A subheading after a copy control had nothing above it (browser pass). */
.cra-page .card h3 {
  margin-top: var(--sp-24);
}

/*
 * The copy control keeps its whole label at 320.
 *
 * `.copylink` is a flex row and `.copylink__url` truncates by design, but a
 * long URL still squeezed the `Copy` button — and a `.btn` is `overflow:
 * hidden` because it hosts the fill sweep, so it lost 8px of its own label
 * rather than wrapping. Session F showed the URL itself where the old surface
 * showed a label, which is what exposed it. Scoped, because it is this page's
 * choice that made the row tight.
 */
.cra-page .copylink .btn {
  flex: 0 0 auto;
}

/* §11's source label, under a settings value. */
.cra-source {
  margin: calc(var(--sp-4) * -1) 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--moss);
}

/* Appendix B.7, exactly as the resolver produced it. */
.cra-b7 {
  margin: var(--sp-16) 0 0;
  padding: var(--sp-16);
  border: var(--bw) solid var(--grey-light);
  border-radius: var(--radius);
  background: var(--brand-5);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--dark);
  white-space: pre-wrap;
  /* A long campaign name inside the block wraps rather than widening the page. */
  overflow-wrap: anywhere;
  overflow-x: auto;
}

/* One settings row and its editor. */
.cra-setting {
  padding: var(--sp-16) 0;
  border-top: 1px solid var(--grey-light);
}
.cra-setting:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/*
 * A row of controls. `.btn` is inline-flex, and an inline-flex flex item in a
 * COLUMN is stretched to the container width by the default `align-items:
 * stretch` — Founder Flow Sessions D and E and PHASE 36 each lost a browser
 * pass to exactly this. Scoped to direct children so a nested layout is not
 * caught by it.
 */
.cra-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: center;
  margin-top: var(--sp-16);
}

/* A confirmation after a save. Assertive enough to notice, quiet enough to
   sit under a title without competing with it. */
.cra-notice {
  margin: var(--sp-12) 0 0;
  padding: var(--sp-8) var(--sp-12);
  border-left: 3px solid var(--brand);
  background: var(--brand-5);
  font-size: 0.875rem;
  color: var(--dark);
}

/* A refusal the server sent back. */
.cra-error {
  margin: var(--sp-12) 0 0;
  padding: var(--sp-8) var(--sp-12);
  border-left: 3px solid var(--accent-yellow);
  background: var(--brand-5);
  font-size: 0.875rem;
  color: var(--dark);
}

/* A `.btn` directly inside a card stretches for the reason above. */
.cra-setting > .btn,
.cra-setting > .cra-acts > .btn {
  align-self: flex-start;
}

/*
 * ≤ 40rem: the settings editor's two controls stop sharing a line.
 *
 * `Save your public handle` and `Leave it as it is` are both long labels and a
 * `.btn` is `overflow: hidden` (it hosts the fill sweep), so a squeezed row
 * clips the right-hand end of a label rather than wrapping it. No breakpoint
 * guess is needed for the wrap itself — `flex-wrap` does nothing at a width
 * where the row fits — this rule only widens each control once it has wrapped.
 */
@media (max-width: 40rem) {
  .cra-acts > .btn {
    flex: 1 1 100%;
  }
}

/* ══════════════════════ PHASE 46 — Pitches, the Active list, and the pitch
   reveal (Creator Flow v2, Session E, 2026-08-20)

   Session E's two surfaces render inside `CreatorAppShell`, so most of what
   they need already exists: `.cra-page`, `.cra-lede`, `.cra-help`, `.cra-acts`,
   `.card`, `.kv`, `.tag`, `.doc-list`, `.tabs` and `.state-panel` are all
   reused. What is new is the tab count, the two list rows, and the reveal —
   and the reveal is the only thing here with a shape of its own.

   The prefix is `.crp-`. `.cra-` is PHASE 44/41 (the Creator app shell and its
   pages) and this is a page family INSIDE that shell, but the reveal is a
   full-bleed moment rather than a page — a distinction the markup makes and
   the prefix keeps visible. `.cr-` is PHASE 26/32 (Affiliate Admin), `.crf-`
   is PHASE 43 (the Creator onboarding flow).

   Conventions, as PHASE 25 set them and 26–45 restated them:

     1. TOKENS ONLY. Read a token or a mode slot, never a raw value.
     2. SCOPED REUSE. Everything new is prefixed `.crp-`.
     3. RESPONSIVE IS A CORRECTION. Each media rule names the overflow it
        answers.

   ── The two tones ─────────────────────────────────────────────────────────
   PHASE 45's rule, unchanged: a sentence that states a RULE takes `--dark`
   (`.cra-help` carries §22.2's no-prediction line, §14.2's decline promise,
   and the walk-is-optional sentence), a caption that merely labels takes
   `--moss`. `--grey` is ~2.18:1 on white and nothing here uses it.

   ── The reveal segments are `aria-hidden`, and the count is not ───────────
   `Step N of 4` is a real sentence in the accessibility tree; the four bars
   beside it are decoration for the same fact. A progress bar whose only
   expression is colour is not one (§28.5).
   ══════════════════════════════════════════════════════════════════════════ */

/* The count beside a tab label. Never a badge — it is part of the name. */
.crp-tab__count {
  margin-left: var(--sp-8);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--moss);
}

.tab.is-active .crp-tab__count {
  color: var(--brand);
}

/* A row's tags. Wraps, because two tags plus a long label overflow at 320. */
.crp-row__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.crp-row__why {
  margin: 0 0 var(--sp-12);
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--dark);
}

.crp-row__link {
  margin: 0 0 var(--sp-12);
  font-size: 0.875rem;
  color: var(--moss);
}

/* The sort controls. A group, wrapping — never a horizontal scroller. */
.crp-sorts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: var(--sp-16) 0;
}

/* ── The reveal ─────────────────────────────────────────────────────────── */

.crp-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  max-width: var(--measure);
}

.crp-step__count {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moss);
}

/* Four bars for a fact the sentence above already states. */
.crp-step__segments {
  display: flex;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crp-step__segments li {
  flex: 1;
  height: 0.1875rem;
  background: var(--sage);
}

.crp-step__segments li.is-done {
  background: var(--brand);
}

.crp-step__eyebrow {
  margin: var(--sp-8) 0 0;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moss);
}

.crp-step h1 {
  margin: 0;
}

/*
 * One idea at a time, so the body may run larger than a paragraph — but not to
 * `--fs-step`, which is a flow step TITLE. Session D lost a pass to reading
 * that token as "one step down from a heading" and putting a 40px sentence in
 * the rail; this is a body size, stated in rem like `--fs-body` is.
 */
.crp-step__body {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--dark);
}

/*
 * A `.btn` is inline-flex, and an inline-flex flex item in a COLUMN is
 * stretched to the container width by the default `align-items: stretch` —
 * three sessions have lost a browser pass to that. `.cra-acts` is already a
 * wrapping row, and this only adds the top margin the step needs.
 */
.crp-step__acts {
  margin-top: var(--sp-16);
}

/* 520px: the three reveal controls stop fitting on one line before the text
   does, and a wrapped row of three is legible where a squeezed one clips a
   label inside `.btn`'s own `overflow: hidden`. */
@media (max-width: 520px) {
  .crp-step__acts {
    flex-direction: column;
    align-items: stretch;
  }
}

/*
 * The chosen sort must be the readable one.
 *
 * `.btn--secondary` is `--brand` on white at about 1.46:1 — the documented,
 * scoped tech-stack §3.6 exception, and a recorded product-wide gap since
 * PHASE 36. Left alone it makes the SELECTED chip harder to read than the one
 * beside it, which is Session D's `Accepted` reading quieter than `Reviewing`
 * on a different surface. Fixed here rather than at the primitive: re-toning
 * every secondary button in the product is its own change with its own
 * screenshot pass.
 */
.crp-sorts .btn[aria-pressed='true'] {
  color: var(--dark);
  border-color: var(--brand);
  font-weight: 900;
}

/*
 * One label column per card, not one per row.
 *
 * `.kv__row` is `minmax(8rem, max-content) 1fr` and each row is its own grid,
 * so a card with `Key date` and `What you would earn` in it draws two different
 * value positions — a column that is not a column. Session F found the same
 * thing on Settings and fixed it the same way; this scopes it to the pitch so
 * the shared primitive is untouched, and it collapses at the same 600px
 * `.kv__row` does.
 */
.crp-recap .kv__row {
  grid-template-columns: 11rem 1fr;
}

@media (max-width: 600px) {
  .crp-recap .kv__row {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════ PHASE 51 — screen 5 of the Founder flow, the address
   (Spec §5.2, §9, §33.1; DNA §5.6), rebuilt 2026-08-20 to the supplied
   reference (`Proovd Founder Flow v2.dc.html`, `[data-verify]` / `kindWide`).

   ── The layout model, and why every value below is a literal ──────────────
   The reference does NOT lay this screen out responsively. It authors it once
   on a fixed 2496x1542 stage and scales that stage to the viewport:

       fitStages(){ s = Math.min(innerWidth/2496, innerHeight/1542) * .78; }

   So `62px` here is not a size somebody chose for a 1440px window — it is the
   reference's own number inside a box that is 0.45 of itself at 1440x900, and
   converting it to a token or a clamp is what makes the composition correct at
   one viewport height and wrong at every other one. `EmailStep.tsx` owns the
   scale and rewrites the whole transform on mount and on resize; the `0.37`
   below is the reference's own placeholder for the frame before that runs.

   Measured against the running prototype at 1440x900: scale 0.45, column
   580.5x265.3 at (422.3, 317.3), headline 36.3px tall, field 72.4px, CTA
   580.5x59.4, Back at (43.2, 830).

   PHASE 25's conventions bind everywhere else in this file; this section is
   the same knowing exception PHASE 34's invite screen already is, and for the
   same reason — a supplied reference is the specification here, so its `2px`
   radius, its `#41ED98` and its `62px` ship as written rather than as the
   nearest token. The owner ruling's 2px radius happens to agree.

   The project's global type rules DO reach in here — `h1..h6 { margin;
   line-height: 1.18; font-weight: 900 }`, `p { margin; max-width: 65ch }`,
   `button, input { font: inherit }` (which inherits `line-height: 1.6` from
   `body`, where the reference's page inherits the UA's `normal`), and
   `img, svg { max-width: 100%; height: auto }` — so every one of them is
   overridden explicitly below rather than left to win.

   ── One reference rule is deliberately NOT reproduced ─────────────────────
   The prototype's page carries `html{scrollbar-gutter:stable}`, which reserves
   15px down the right of every screen and therefore centres this lockup 7.5px
   left of the viewport's own centre. That is host chrome for a prototype whose
   other screens genuinely scroll, not part of this composition — and it is
   what the whole residual difference between the two pages measures as. It is
   not added: our own `body` has never had it, the four flow screens already
   shipped do not, and adding it here would put this one off-centre against
   them. Measured with it matched, 99.75% of pixels are identical and the rest
   is glyph antialiasing, because the prototype ships four static Satoshi
   weights and the product ships the variable face.  */

/* `FlowPage`'s chrome is not drawn on this screen: the reference gives it no
   wordmark and no HELP, only the `Back` control below. Hidden rather than
   emptied, so both leave the tab order too — the invite page's arrangement. */
.ff[data-flow-page='email'] .ff__top { display: none; }

/* The reference's `[data-verify]`: `position:fixed;inset:0;overflow:hidden`.
   Nothing scrolls — the stage scales instead, which is why the composition is
   identical at every viewport and why this page can never reflow (§33.11.1). */
.ff-verify {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
}

/* The one control outside the stage. Its `clamp()`s are the reference's own,
   and they are viewport-relative there too — it is chrome rather than part of
   the composition, so it does not scale with the stage. */
.ff-verify__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-verify__back:hover { color: #013F17; }
.ff-verify__back:focus-visible { outline: 2px solid #013F17; outline-offset: 2px; }
/* `svg { height: auto }` would collapse the chevron to nothing. */
.ff-verify__back svg { width: 11px; height: 11px; max-width: none; flex: none; }

/* The stage. `scale(0.37)` is the reference's own placeholder value and is what
   renders before the layout effect runs; EmailStep.tsx overwrites the whole
   transform on mount and on resize. */
.ff-verify__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  font-family: 'Satoshi', sans-serif;
  /* The reference's `body` sets neither, so its whole stage inherits the UA
     defaults. This file's `body` sets `--fs-body` (18px) and `line-height:
     1.6`, and the 104px input inherits the latter through `input { font:
     inherit }` — which is a 166px line box where the reference's is 140px, a
     26px difference inside a column that is centred on its own height. */
  font-size: 16px;
  line-height: normal;
}

.ff-verify__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1290px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Row 1 — the headline. */
.ff-verify__head {
  margin: 0;
  font-size: 62px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #013F17;
  text-align: center;
}

/* Row 2 — the field. The rule under it is the reference's own 3px dash; it
   goes solid on focus, which the reference does not do and which is what
   carries the focus state now that the ink greys instead of marking it. */
.ff-verify__field {
  margin-top: 112px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 26px;
  border-bottom: 3px dashed #013F17;
  padding-bottom: 18px;
}
.ff-verify__field:focus-within { border-bottom-style: solid; }

.ff-verify__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  font-family: 'Satoshi', sans-serif;
  font-size: 104px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.035em;
  color: #013F17;
}
/* The reference's `emailFg`. See the recorded deviation in EmailStep.tsx: the
   ink greys while the field has focus and the underline above is what marks
   it, rather than the other way round. */
.ff-verify__input[data-focus='on'] { color: #A2AFA8; }

.ff-verify__pencil {
  width: 52px;
  height: 52px;
  max-width: none;
  flex: none;
  margin-bottom: 14px;
}

/* Row 3 — the control. A plain button with the reference's own fill, not
   `.btn`: the tier brings an outline, a 44px min-height, `overflow:hidden` and
   a variant-swap hover, none of which the reference has. Its hover is a
   background darken, stated inline there. `width: 1290px` rather than `100%`
   is its own value and they are the same number. */
.ff-verify__cta {
  margin-top: 104px;
  width: 1290px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 54px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  box-shadow: 0px 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-verify__cta:hover { background: #3BDC8C; }
/* The reference has no disabled treatment because its own click is a no-op on
   an address that is not one, so there is nothing to contradict: the button
   refuses and looks the same. The cursor is the only tell, and it is honest. */
.ff-verify__cta:disabled { cursor: default; }
.ff-verify__cta:focus-visible { outline: 6px solid #013F17; outline-offset: -14px; }

/* The save status. Absolutely positioned out of the column's own height, so it
   cannot move a composition that is centred on that height, and announced but
   unseen in every state the reference actually has. A FAILED save is the one
   state it does not have, and that one shows (§1.1, §1.4). */
.ff-verify__status {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 40px 0 0;
  max-width: none;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  color: #013F17;
}
.ff-verify__status[data-state='failed'] {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

/* ══════════════════════════════════════════ PHASE 51 — RESPONSIVE ══
   The reference's own one media query for this screen. Everything else is the
   stage, and the stage scales rather than reflowing. */
@media (max-width: 600px) {
  .ff-verify__back { bottom: 92px; padding: 8px 14px; }
}

/* ════════════════════════ PHASE 50 — Screen 4, the campaign type
   (Founder Flow v2; Spec §9 step 1, §33.1.7), rebuilt 2026-08-20.

   REBUILT to the supplied reference's own `[data-kind]` screen
   (`Proovd Founder Flow v2.dc.html`, `kindWide`), on the same instruction and
   the same terms as PHASE 48's invite and the paper screens above it.

   The reference authors this page once on a fixed 2496x1542 stage and scales
   that stage to the viewport through `fitStages()`'s HERO branch —
   `min(innerWidth/2497, innerHeight/1459) * 1.04`, written by
   CampaignTypeStep.tsx. Its divisors are deliberately not the stage's own
   size; the reference's comment says why ("invite and choice keep their
   original crop"), and it is what makes this screen read a notch larger than
   the vetting pages after it.

   Every value below is the reference's own literal, read from its inline
   styles rather than derived: a 1060px pick column, an 88px headline, a 170px
   gap to a 124px arrow pair, an 88px gap to 35px copy at 936px wide, an 86px
   gap to a 102px control — and, on the confirm stage, a 1020px column of two
   242px rows 46px apart with a 7px outline, 73px labels, and a 122px control
   60px below.

   Two conventions this file otherwise holds are suspended HERE and nowhere
   else, exactly as PHASE 48 suspends them, because the instruction is that
   the reference outranks the design system on this screen:

     - HEX LITERALS, not tokens. Five of the reference's colours have exact
       tokens (#41ED98 --brand, #013F17 --dark, #E9FFE1 --mint, #FAFAFA
       --white) and two do not (#F1FFF6 the chosen row's fill, #3BDC8C the
       pressed control). Mixing them would leave half the screen able to drift
       with a token change and half not.

     - RADIUS 2px, not `var(--radius)`. Here they coincide — the owner ruling
       of 2026-08-19 moved `--radius` to 2px and the reference's own value is
       2px — but it is written literally so this screen cannot move if the
       token does.

   The project's global type rules DO reach in — `h1..h6 { margin;
   line-height: 1.18; font-weight: 900 }`, `p { margin; max-width: 65ch }`,
   `strong`, and `button { font: inherit }` — so every one of them is
   overridden explicitly below rather than left to win.

   Nothing scrolls. The page cannot reflow, which is why there is no 320px
   branch here and no media query below.                                     */

/* `FlowPage`'s chrome is not drawn on this screen: `[data-kind]` has no
   wordmark, no HELP and no message badge — one `Back`, bottom-left, and
   nothing else. Hidden rather than emptied, so both controls leave the tab
   order too. */
.ff[data-flow-page='campaign-type'] .ff__top { display: none; }

/* The reference's `[data-kind]`. */
.ff-kind {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
}

/* ── Back ─────────────────────────────────────────────────────────────────
   The one piece of furniture on the page, and the only thing here that is
   sized against the VIEWPORT rather than the stage — the reference clamps it
   in `vw`, outside the scaled composition, so it stays a real 30px target at
   every window size (§28.5). */
.ff-kind__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-kind__back:hover { color: #013F17; }
.ff-kind__back:focus-visible { outline: 3px solid #41ED98; outline-offset: 4px; }
/* `img, svg, video { max-width: 100%; height: auto }` is global in this file,
   and `height: auto` collapses an attribute-sized chevron to nothing. Every
   SVG on this screen is sized explicitly for that reason. */
.ff-kind__back svg { width: 11px; height: 11px; max-width: none; flex: none; }

/* The stage. `scale(0.37)` is the reference's own placeholder value and is
   what renders before the layout effect runs; CampaignTypeStep.tsx overwrites
   the whole transform on mount and on resize. */
.ff-kind__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  font-family: 'Satoshi', sans-serif;
  /* The reference's body sets neither, so its stage inherits the UA defaults.
     This file's `body` sets `--fs-body` and `line-height: 1.6`, which reach in
     and change every line box on the stage. Reset at the stage rather than at
     the five elements that happen to show it. */
  font-size: 16px;
  line-height: normal;
}

/* ── The pick stage ───────────────────────────────────────────────────────
   Both stages are centred on the same point and stacked; the inactive one is
   hidden with `visibility` from the render, which is the reference's own
   `pickHide` / `confirmHide`. */
.ff-kind__pick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1060px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ff-kind__head {
  margin: 0;
  font-size: 88px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #013F17;
  text-align: center;
}

/* The arrow row. `space-between` with the sticker between the two controls,
   so the sticker's own width is what sets the gap — which is why the Idea and
   Product cards sit differently and are meant to. */
.ff-kind__art {
  margin-top: 170px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ff-kind__arrow {
  width: 124px;
  height: 124px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  cursor: pointer;
  padding: 0;
}
.ff-kind__arrow:hover { background: #E9FFE1; }
.ff-kind__arrow:focus-visible { outline: 4px solid #013F17; outline-offset: 4px; }
.ff-kind__arrow svg { width: 53px; height: 53px; max-width: none; flex: none; }

.ff-kind__sticker {
  width: auto;
  max-width: none;
  display: block;
}

/* `text-wrap: pretty` is the reference's own — it is what keeps the last line
   of the Product sentence from sitting alone. The `max-width: 65ch` this
   file's `p` rule sets would cut the column to about 700px, so the width is
   restated. */
.ff-kind__body {
  margin: 88px 0 0;
  width: 936px;
  max-width: none;
  font-size: 35px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: #013F17;
  text-wrap: pretty;
}
.ff-kind__body strong { font-weight: 700; }

/* The inset highlight is the reference's own, and it is also what the owner
   ruling of 2026-08-19 put on every brand-filled primary in the product —
   so this one agrees with the system rather than departing from it. */
.ff-kind__cta {
  margin-top: 86px;
  width: 100%;
  height: 102px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 50px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: 0px 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-kind__cta:hover { background: #3BDC8C; }
.ff-kind__cta:focus-visible { outline: 5px solid #013F17; outline-offset: -10px; }

/* ── The confirm stage ────────────────────────────────────────────────────
   A narrower column than the pick stage's — 1020 against 1060 — and its own
   46px gap rather than per-child margins, both the reference's. */
.ff-kind__rows {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1020px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
}

/* The chosen row is a fill plus a 7px OUTLINE rather than a thicker border:
   an outline is drawn outside the box and takes no layout, so the row does
   not move by 5px when it becomes the answer. The unchosen state carries the
   same outline at zero alpha for the same reason — it is what makes the
   transition a fade rather than a jump. Both are the reference's. */
.ff-kind__row {
  width: 100%;
  height: 242px;
  display: flex;
  align-items: center;
  gap: 66px;
  padding: 0 72px;
  box-sizing: border-box;
  border: 2px solid #013F17;
  border-radius: 2px;
  background: transparent;
  outline: 7px solid rgba(65, 237, 152, 0);
  outline-offset: 0;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  text-align: left;
  transition:
    background-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    outline-color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-kind__row[data-chosen] {
  border-color: transparent;
  background: #F1FFF6;
  outline-color: #41ED98;
}
.ff-kind__row:focus-visible { outline: 7px solid #013F17; }

.ff-kind__row-art {
  width: auto;
  max-width: none;
  flex: none;
  display: block;
}

.ff-kind__row-label {
  font-size: 73px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03em;
  color: #013F17;
  transition: color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-kind__row[data-chosen] .ff-kind__row-label { color: #41ED98; }

/* 122px rather than the pick stage's 102px, and 60px below the last row
   rather than the 46px `gap` — both the reference's own. */
.ff-kind__confirm {
  margin-top: 60px;
  width: 100%;
  height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 50px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: 0px 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-kind__confirm:hover { background: #3BDC8C; }
.ff-kind__confirm:focus-visible { outline: 5px solid #013F17; outline-offset: -10px; }

/* ── The one thing the reference has no equivalent for ────────────────────
   A save that failed. Absolutely positioned against the stage so it can never
   move the composition, and `.sr-only` in every other state — the arrangement
   the two paper screens already use. It is sized against the stage's own
   pixels because it lives inside the scaled stage. */
.ff-kind__save {
  position: absolute;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  margin: 0;
  max-width: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01em;
  color: #013F17;
  text-align: center;
}
.ff-kind__save.is-loud {
  padding: 18px 34px;
  border: 3px solid var(--danger, #B3261E);
  border-radius: 2px;
  background: #FAFAFA;
  color: var(--danger, #B3261E);
}

/* ═════════════════════ PHASE 49 — screen 6, the six-digit code
   (Founder Flow v2; Spec §5.2, §28.5), rebuilt 2026-08-20.

   Redrawn to the supplied reference (`Proovd Founder Flow v2.dc.html`,
   `[data-code]` / `kindWide`), on the same terms screens 1–3 and 5 already
   ship under: the reference outranks the design system HERE, and nowhere else.

   ── The layout model is the reference's, literally ────────────────────────
   `position:fixed;inset:0;overflow:hidden` around a fixed 2496x1542 stage,
   scaled to the viewport by `fitStages()`:

       let s = Math.min(innerWidth / 2496, innerHeight / 1542) * (pageScale || .78);

   `CodeStep.tsx` owns that scale and writes the whole transform on mount and
   on resize; the `scale(0.37)` below is the reference's own placeholder value
   and is what renders for the one frame before the layout effect runs. Inside
   the stage sits an 1860px column, centred, and every child carries the
   reference's own pixel value. Nothing here reflows — the stage scales
   instead, which is why the composition is identical at every viewport and why
   the narrow-width rules this screen used to carry are gone rather than
   rewritten.

   ── The two suspended conventions, as on screen 1 ─────────────────────────
     - HEX LITERALS, not tokens. Five of the reference's colours here have
       exact tokens (#41ED98 --brand, #013F17 --dark, #FAFAFA --white,
       #A2AFA8 --grey, #FFFFFF --surface). Mixing literal and token would leave
       half the screen able to drift with a token change and half not, so all
       five are literal and this screen reads exactly as the reference does.
     - RADIUS 2px, literal. It is what `var(--radius)` resolves to under the
       owner ruling, so the two agree today; the literal is here for the same
       reason the colours are.

   ── What the project's globals do to this screen, overridden explicitly ───
   `h1..h6 { margin; line-height:1.18; font-weight:900 }` and `p { margin;
   max-width: var(--measure) }` both reach in, and the measure cap in
   particular would fold the note's single centred line. `body`'s 18px /
   line-height 1.6 reaches the whole stage, and the reference's own body sets
   neither — so the stage resets both, which is what makes the note 25px tall
   there and here rather than 61px here.
   ═════════════════════════════════════════════════════════════════════════ */

/* `FlowPage`'s chrome is not drawn on this screen. The reference puts no
   wordmark, no HELP and no message badge on it (nor on screen 5 beside it).
   Hidden rather than emptied, so both leave the tab order too. */
.ff[data-flow-page='code'] .ff__top { display: none; }

/* The reference's `[data-code]`. Nothing scrolls. */
.ff-code {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
}

/* ── The Back control — `[data-back]`, shared with screen 5 ─────────────── */
.ff-code__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-code__back:hover { color: #013F17; }
.ff-code__back:focus-visible { outline: 3px solid #41ED98; outline-offset: 2px; }
/* The reference's own `@media (max-width:600px)` rule for this control: it
   lifts clear of a phone's bottom furniture and grows its tap area. */
@media (max-width: 600px) {
  .ff-code__back { bottom: 92px; padding: 8px 14px; }
}

/* ── The stage ───────────────────────────────────────────────────────────── */
.ff-code__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  font-family: 'Satoshi', sans-serif;
  /* See the header: the reference's body sets neither, and this file's does. */
  font-size: 16px;
  line-height: normal;
  color: #013F17;
}
.ff-code__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1860px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── The headline ────────────────────────────────────────────────────────── */
.ff-code__head {
  margin: 0;
  font-size: 78px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #013F17;
  text-align: center;
}

/* ── The six boxes ───────────────────────────────────────────────────────
   A `fieldset` where the reference has a bare div, because six inputs need a
   group with a name. Its border, padding, margin and `min-inline-size` are all
   reset, so it lays out as that div does. The `legend` and the group's
   description are `.sr-only`, which is absolutely positioned and therefore not
   a flex item. */
.ff-code__boxes {
  margin: 134px 0 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
  display: flex;
  gap: 28px;
}
.ff-code__slot { display: block; }
.ff-code__box {
  width: 210px;
  height: 210px;
  box-sizing: border-box;
  display: block;
  text-align: center;
  background: #FFFFFF;
  border: 2px solid #A2AFA8;
  border-radius: 2px;
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 95px;
  line-height: normal;
  color: #013F17;
  padding: 0;
}
/* The reference's own `style-focus`. `:focus` rather than `:focus-visible`:
   these are text inputs a person is typing into, and the border IS the focus
   indicator — there is no other one, because `outline:none` is the second half
   of the same declaration. */
.ff-code__box:focus { border-color: #41ED98; outline: none; }

/* ── The note ────────────────────────────────────────────────────────────── */
.ff-code__note {
  margin: 126px 0 0;
  max-width: none;   /* the global §9 measure cap would fold this line */
  font-size: 38px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.012em;
  color: #013F17;
  text-align: center;
}
.ff-code__note strong { font-weight: 700; }
.ff-code__resend {
  background: none;
  border: none;
  padding: 0;
  font-family: 'Satoshi', sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: normal;
  text-decoration: underline;
  color: #41ED98;
  cursor: pointer;
}
/* `resendStyle` while the clock runs. The reference sets `pointer-events:none`;
   this is a real `disabled` instead, so the state is announced rather than
   only being unreachable — it renders the same and says more. */
.ff-code__resend:disabled {
  color: #A2AFA8;
  cursor: default;
  text-decoration: underline;
}
.ff-code__resend:focus-visible { outline: 3px solid #41ED98; outline-offset: 3px; }

/* ── Two states the reference does not model ─────────────────────────────
   It is a prototype: any six digits advance, so nothing is ever refused. Both
   sit under the note, in the note's own type, so the composition it DOES draw
   is unchanged whenever neither is showing. */
.ff-code__alert {
  margin: 44px 0 0;
  max-width: 1400px;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: #013F17;
  text-align: center;
}
.ff-code__alert.is-quiet { color: #A2AFA8; }

/* ── The submit control ──────────────────────────────────────────────────
   The reference has none: its sixth digit is the whole submit path, and that
   IS the keyboard path here too — see CodeStep.tsx's header, which corrects
   an earlier claim that this control was it. This is the deliberate act for
   somebody who wants one.

   The skip-link pattern: out of the flow until it is focused, and drawn in
   the reference's own language when it is, so the default composition is the
   reference's. The .sr-only class is not reused, because it has no focus rule
   and a control that stays 1px while focused is one nobody can see they have
   reached. */
.ff-code__confirm {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  background: none;
  color: #013F17;
}
.ff-code__confirm:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 60px 0 0;
  padding: 0 60px;
  min-height: 120px;
  overflow: visible;
  clip-path: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.02em;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
  outline: 6px solid #013F17;
  outline-offset: 6px;
}
.ff-code__confirm:disabled { cursor: default; }

/* ════════════════════ PHASE 52 — screen 7 of the Founder flow, Positioning
   (Spec §9, §33.1.5; DNA §5.6), rebuilt 2026-08-20 to the supplied reference
   (`Proovd Founder Flow v2.dc.html`, `[data-compet]` / `kindWide`).

   ── The layout model, and why every value below is a literal ──────────────
   The reference does NOT lay this screen out responsively. It authors it once
   on a fixed 2496x1542 stage and scales that stage to the viewport:

       fitStages(){ s = Math.min(innerWidth/2496, innerHeight/1542) * .78; }

   So `78px` here is not a size somebody chose for a 1440px window — it is the
   reference's own number inside a box that is 0.45 of itself at 1440x900, and
   converting it to a token or a clamp is what makes the composition correct at
   one viewport height and wrong at every other one. `PositioningStep.tsx` owns
   the scale and rewrites the whole transform on mount and on resize; the
   `0.37` below is the reference's own placeholder for the frame before that
   runs.

   Measured against the running prototype at 1440x900: scale 0.45, column
   747x472.4 at (339, 213.8), headline 44.9 tall, field 747x315, the row 59.4
   tall with `Say it instead` 265.5 wide and `Next` 465.3, Back at (43.2, 830),
   the badge 74.9 square at (1306.9, 785.1). Recording: the control row is
   286.2x118.4 at (569.4, 610.8), the waveform 744.3x46.8, and the field's ink
   and ground both turn brand.

   PHASE 25's conventions bind everywhere else in this file; this section is
   the same knowing exception PHASES 34 and 48–51 already are, and for the same
   reason — a supplied reference is the specification here, so its `2px` radius,
   its `#41ED98` and its `78px` ship as written rather than as the nearest
   token. The owner ruling's 2px radius happens to agree.

   The project's global type rules DO reach in here — `h1..h6 { margin;
   line-height: 1.18; font-weight: 900 }`, `p { margin; max-width: 65ch }`,
   `button, textarea { font: inherit }` (which inherits `line-height: 1.6` from
   `body`, where the reference's page inherits the UA's `normal`), and
   `img, svg { max-width: 100%; height: auto }` — so every one of them is
   overridden explicitly below rather than left to win.

   ── The one reference rule deliberately NOT reproduced ────────────────────
   The prototype's page carries `html{scrollbar-gutter:stable}`, which reserves
   15px down the right of every screen and therefore centres this lockup 7.5px
   left of the viewport's own centre. That is host chrome for a prototype whose
   other screens genuinely scroll, and PHASE 51 already recorded the decision
   not to adopt it: our own `body` has never had it, and adding it on one page
   would put that page off-centre against the five beside it.                */

/* `FlowPage`'s chrome is not drawn on this screen — but unlike screens 1–6 the
   reason is not that the reference has none. It has four controls, and they are
   drawn INSIDE the `z-index: 25` fixed layer below, where the reference puts
   them. Left in place they would sit under that layer and be unreachable, so
   both are hidden and both leave the tab order with it. */
.ff[data-flow-page='positioning'] .ff__top,
.ff[data-flow-page='positioning'] .ff__badge { display: none; }

/* The reference's `[data-compet]`: `position:fixed;inset:0;overflow:hidden`.
   Nothing scrolls — the stage scales instead, which is why the composition is
   identical at every viewport and why this page can never reflow (§33.11.1). */
.ff-compet {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
}

/* ── The chrome. Its `clamp()`s are the reference's own, and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-compet__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-compet__back:hover { color: #013F17; }
/* The reference has no focus treatment at all. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11) and it costs the composition nothing. */
.ff-compet__back:focus-visible {
  outline: 2px solid #013F17;
  outline-offset: 3px;
}
.ff-compet__back svg { width: 11px; height: 11px; flex: none; }

.ff-compet__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-compet__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-compet__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-compet__help:hover { background: #E9FFE1; }
.ff-compet__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* The message badge. It enters with the page and is then still — the
   reference's six-second shake loop is the pattern DNA §5.10 and §30 name,
   whatever it opens, and `FOUNDER_FLOW_ABSENCES` already records it. */
.ff-compet__badge {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}
.ff-compet__badge:focus-visible { outline: 2px solid #013F17; outline-offset: 4px; }
.ff-compet__bell {
  position: relative;
  width: clamp(58px, 5.2vw, 78px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  box-sizing: border-box;
}
.ff-compet__bell img { width: 68%; height: auto; display: block; }
.ff-compet__count {
  position: absolute;
  left: -10%;
  top: -16%;
  width: 31%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  background: #FAFAFA;
  box-sizing: border-box;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: normal;
  font-weight: 700;
  color: #41ED98;
}

/* ── The stage, and the 1660px column inside it ──────────────────────────── */

.ff-compet__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
}
.ff-compet__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1660px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ff-compet__head {
  margin: 0;
  width: 100%;
  font-size: 78px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: #013F17;
  text-align: center;
}

.ff-compet__panel {
  margin-top: 82px;
  position: relative;
  width: 100%;
}

.ff-compet__field {
  display: block;
  width: 100%;
  height: 700px;
  max-width: none;
  resize: none;
  box-sizing: border-box;
  background: transparent;
  border: 3px solid #41ED98;
  border-radius: 2px;
  outline: none;
  padding: 82px 94px 190px;
  font-family: 'Satoshi', sans-serif;
  font-size: 49px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: #013F17;
  /* `[data-slim-scroll]` in the reference's own `<style>` block: the brand
     scrollbar, which cannot be written inline and so is not in the markup. */
  scrollbar-width: thin;
  scrollbar-color: #41ED98 transparent;
}
/* The reference's placeholder ink, measured at `rgb(162,175,168)`. Without it
   this box takes the UA's own `#757575`, which is a different grey and a
   different weight of voice on the one field the whole screen is about. */
.ff-compet__field::placeholder { color: #A2AFA8; opacity: 1; }
.ff-compet__field::-webkit-scrollbar { width: 6px; }
.ff-compet__field::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.ff-compet__field::-webkit-scrollbar-thumb {
  background: #41ED98;
  border-radius: 99px;
  min-height: 34px;
  max-height: 56px;
}
.ff-compet__field::-webkit-scrollbar-thumb:hover { background: #3BDC8C; }
/* `cTaBg` / `cTaFg` — while a recording is running the field is the recording. */
.ff-compet__panel[data-rec='on'] .ff-compet__field {
  background: rgba(65, 237, 152, 0.06);
  color: #41ED98;
}

/* ── The recording overlay, sitting inside the field's own border ────────── */

.ff-compet__overlay {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  pointer-events: none;
}
/* The words run under the waveform rather than stopping above it, so the
   gradient is what keeps the last line readable. */
.ff-compet__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  background: linear-gradient(
    180deg,
    rgba(250, 250, 250, 0) 0%,
    rgba(250, 250, 250, 0.18) 40%,
    rgba(250, 250, 250, 0.5) 68%,
    rgba(250, 250, 250, 0.86) 88%,
    #FAFAFA 100%
  );
}
.ff-compet__meter {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 0 22px 12px;
}
.ff-compet__level {
  font-size: 26px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 0.16em;
  color: #41ED98;
}
.ff-compet__wave {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 9px;
  height: 104px;
  padding: 0 8px;
  overflow: hidden;
}
.ff-compet__bar {
  width: 15px;
  flex: none;
  background: #41ED98;
  /* `recIntro` scales these up from nothing. Without this they would grow out
     from their own middles, which reads as a row of dashes appearing rather
     than as a level arriving. */
  transform-origin: bottom;
}

/* ── The idle row: the microphone, and the one control that submits ──────── */

.ff-compet__row {
  margin-top: 36px;
  width: 100%;
  display: flex;
  gap: 36px;
}
.ff-compet__say {
  width: 590px;
  height: 132px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  border: 3px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-size: 56px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-compet__say:hover { transform: scale(1.03); }
.ff-compet__say:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }
.ff-compet__say:disabled { cursor: default; transform: none; }
.ff-compet__say svg { flex: none; height: 64px; width: auto; max-width: none; }
html.no-motion .ff-compet__say { transition: none; }

.ff-compet__next {
  flex: 1 1 auto;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 59px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-compet__next:hover { background: #3BDC8C; }
.ff-compet__next:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }
/* The reference has no disabled treatment, and the state it SHOWS is not this
   one. `disabled` is its own `blocked` behaviour with the browser announcing
   it, and it renders identically — `EmailStep`'s decision, unchanged. */
.ff-compet__next:disabled { cursor: default; }

/* ── The recording row ───────────────────────────────────────────────────── */

.ff-compet__rec {
  margin-top: 96px;
  display: flex;
  align-items: flex-start;
  gap: 44px;
}
.ff-compet__ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ff-compet__ctl-label {
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
  color: #41ED98;
}
.ff-compet__ghost {
  width: 176px;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #41ED98;
  border-radius: 2px;
  background: #013F17;
  color: #41ED98;
  cursor: pointer;
  outline: none;
}
/* Retry's glyph is white where Pause's is brand — the reference's own pair. */
.ff-compet__ghost.is-retry { color: #FAFAFA; }
.ff-compet__ghost:hover { background: #012D10; }
.ff-compet__ghost:focus-visible { outline: 6px solid #41ED98; outline-offset: 6px; }
.ff-compet__ghost svg { flex: none; width: 82px; height: 82px; max-width: none; }

.ff-compet__done {
  width: 196px;
  height: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  cursor: pointer;
  outline: none;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-compet__done:hover { background: #3BDC8C; }
.ff-compet__done:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }
.ff-compet__done svg { flex: none; width: 96px; height: auto; max-width: none; }

/* ── Everything the reference does not draw ──────────────────────────────────
   Absolutely positioned below the column, so none of it can move the
   composition by a pixel. It scales with the stage like everything else on the
   page — the reference's own model — which is why these sizes are stage units
   and read at roughly 12–14px in a 1440x900 window.                        */

.ff-compet__sub {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.ff-compet__sub p { margin: 0; max-width: 1400px; }

/* §9's autosave vocabulary. Announced always, and visible only when it is a
   failure or when a recording is being turned into words — the two states the
   reference has no need of and this screen does (§1.1). */
.ff-compet__status {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  color: #013F17;
}
.ff-compet__status[data-state='failed'],
.ff-compet__status[data-state='working'] {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}
.ff-compet__alert {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
  color: #013F17;
}
.ff-compet__alert a { color: #013F17; text-underline-offset: 0.2em; }
/* `.ff-compet__note` and `.ff-compet__warning` stood here. Both were removed on
   explicit product direction (2026-08-20): the reference draws neither, and the
   screen was asked to match it. See `PositioningStep.tsx` for what that costs —
   the campaign-type permanence warning now renders on no screen in the flow. */

/* ══════════════════════════════════════════ PHASE 52 — RESPONSIVE ══
   The reference's own one media query for this screen. Everything else is the
   stage, and the stage scales rather than reflowing. */
@media (max-width: 600px) {
  .ff-compet__back { bottom: 92px; padding: 8px 14px; }
}

/* ═══════════════════════ PHASE 53 — the reach orbit, the screen between the
   solution and the campaign path, built 2026-08-20 from the supplied
   reference (`Proovd Founder Flow v2.dc.html`, `[data-reach]` / `scReach`).

   ── This screen is NOT on the fixed stage, and that is the whole difference
   Screens 1-5 are authored once on a 2496x1542 stage and scaled by
   `fitStages()`. This one is not: `[data-reach]` carries no `[data-page-stage]`
   at all, is authored fluidly in `clamp()`, and its forty phones are laid out
   in JS against `stage.clientWidth` / `clientHeight`. So every value below is
   a real CSS pixel at the real viewport, and the clamps are the reference's
   own rather than a conversion of a stage number.

   That absence is also what makes the exit an instant cut. The reference's
   `pageGo` fades `document.querySelector('[data-claim-stage],[data-page-stage]')`
   before it steps; on this screen that query returns null, so the campaign
   path arrives with no fade. `ReachStep.tsx` navigates directly for that
   reason and does not call `leave`.

   ── The chrome stays, where screens 1-4 hide it ───────────────────────────
   `[data-problem]`, `[data-kind]` and the invite draw no wordmark and no HELP,
   which is why each of those pages has a `display: none` on `.ff__top`. This
   screen draws BOTH — the logo top-left, an outlined HELP top-right — so
   `.ff__top` stays and is restyled into the reference's own header rather than
   hidden and replaced by a second one. The drawer behind HELP is the same one
   every other page in the flow opens (§27.1's sixth question).

   ── One colour is the reference's and disagrees with the owner ruling ──────
   The CTA's label is `#E9FFE1` on the brand fill, which is what
   `[data-reach-cta]` states. The 2026-08-19 owner ruling puts `#FAFAFA` on
   brand-green fills, and `.btn--primary` carries that. This is a bespoke
   control rather than a `.btn`, so the token is untouched and only this one
   button differs — recorded here rather than silently reconciled, because the
   instruction for this screen is that the reference's own value wins.
   Contrast is unchanged either way: 1.44:1 against 1.46:1, the documented
   brand-fill exception (tech-stack §3.6).                                    */

/* The reference's header. `.ff__stage`'s padding and gap go, because the
   header is absolutely positioned at the viewport's own top edge there and
   `[data-reach]` is `overflow: hidden` over an empty page. */
.ff[data-flow-page='reach'] {
  overflow: hidden;
}
.ff[data-flow-page='reach'] .ff__stage {
  padding: 0;
  gap: 0;
}
.ff[data-flow-page='reach'] .ff__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* Above `.ff-reach`'s 25. In the reference the header is INSIDE
     `[data-reach]` at z-index 5; here it is a sibling, so it needs a number
     that clears the orbit rather than one inside it. `.ff__stage` is
     `position: relative` with `z-index: auto`, so it creates no stacking
     context and these two compare directly. */
  z-index: 30;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
  flex-wrap: nowrap;
}

/* The wordmark is the reference's own SVG lockup — `#41ED98` glyphs inside a
   `#D1FFBF` outline — rather than the flow's text wordmark. Drawn as a
   background on the existing element rather than by changing `FlowPage`,
   which twenty-four other pages render. The text stays in the accessibility
   tree, which is what the reference's own `alt="proovd"` gives too. */
.ff[data-flow-page='reach'] .ff__mark {
  display: block;
  height: clamp(26px, 2.4vw, 36px);
  /* 629x190 is the SVG's own viewBox. */
  aspect-ratio: 629 / 190;
  background: url('/assets/proovd-logo.svg') left center / contain no-repeat;
  text-indent: -200vw;
  overflow: hidden;
}

/* HELP. `.btn` draws its stroke as an `outline`, which sits OUTSIDE the box;
   the reference draws a 2px `border` inside a border-box. So the outline is
   removed rather than re-coloured, or the control would measure 4px wider and
   taller than there. The rest/hover slots are set as well as the properties,
   so the runtime's own hover tween lands on the reference's colours instead of
   the tier's. */
.ff[data-flow-page='reach'] .ff__help {
  --r-bg: transparent;
  --r-text: #41ED98;
  --r-border: #41ED98;
  --h-bg: #E9FFE1;
  --h-text: #41ED98;
  --h-border: #41ED98;
  padding: 10px 22px;
  min-height: 40px;
  outline: none;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff[data-flow-page='reach'] .ff__help:hover { background: #E9FFE1; }
.ff[data-flow-page='reach'] .ff__help:focus-visible {
  outline: 3px solid #41ED98;
  outline-offset: 4px;
}

/* ── The screen ───────────────────────────────────────────────────────────
   `[data-reach]`. `font-size` and `line-height` are reset because this file's
   `body` sets `--fs-body` and `1.6` where the reference's sets neither: an
   inherited 1.6 would add eight pixels to the CTA's height, which is the one
   element here whose box is not stated in full. The same correction
   `.ff-kind__stage` makes, for the same reason. */
.ff-reach {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  line-height: normal;
}

/* The perspective space. `1400px` is the authored value and is what renders
   for the frame before `reachIntro` runs; the layout pass overwrites it with
   `1.75 * unit` on arrival and on every resize. */
.ff-reach__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

/* The camera. Its transform — `translateY(-unit * .03) rotateX(-14deg)` — is
   written once per layout rather than per frame, which is the reference's own
   economy: the camera never moves. */
.ff-reach__group {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* One phone. The box and margins here are the authored placeholders; the
   layout pass rewrites all four from `unit`. `visibility: hidden` is the rest
   state and is what the frame loop flips — a card at `pop <= .001` is hidden
   rather than drawn at scale 0, so forty invisible elements cost nothing. */
.ff-reach__phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 90px;
  margin-left: -37px;
  margin-top: -45px;
  visibility: hidden;
  pointer-events: none;
}
/* `img, svg, video { max-width: 100%; height: auto }` is global in this file,
   and `height: auto` would collapse the phone to its own aspect ratio inside a
   box the layout pass has already sized. Both are overridden explicitly, as
   every other image on a fixed composition in this stylesheet is. */
.ff-reach__phone img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  user-select: none;
}

/* The headline. Centred with the `translate` PROPERTY rather than with
   `transform`, which is the one place this screen's CSS departs from the
   reference's own declaration — and it is forced.

   There the transform is an INLINE style, so GSAP reads the string, sees
   percentages, and stores them as `xPercent`/`yPercent`; the entrance tween
   re-declares them harmlessly. Here it would be in a stylesheet, so GSAP would
   read the resolved MATRIX instead and cache `x: -410px` — and the tween's own
   `xPercent: -50` would then centre the headline a second time and hang it a
   full width left of centre. It reproduced at 375px and not at 320 or 390.

   `translate` and `transform` are separate composing properties, so the
   centring lives where GSAP never writes and the rendered result is identical.
   See `reachIntro` in `anim.ts`, which no longer declares the percentages. */
.ff-reach__head {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  translate: -50% -50%;
  margin: 0;
  width: min(820px, 86vw);
  text-align: center;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #013F17;
  text-wrap: pretty;
}

/* The number. `min-width: 5.4ch` and tabular figures are what stop the words
   either side of it shifting while the count runs — without both, `of 7,279
   new people` and `of 10,000 new people` are different line lengths and the
   whole headline jitters for a second. */
.ff-reach__num {
  display: inline-block;
  min-width: 5.4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #41ED98;
}

/* The CTA. `opacity: 0` is the rest state: the button only renders once the
   orbit has collapsed, and `reachCtaIn` is what brings it in. With motion off
   that helper writes `opacity: 1` directly, so the control is never left
   invisible on a page it is the only action of. */
.ff-reach__cta {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(96px, 11vw, 150px));
  z-index: 12;
  transform: translateX(-50%);
  min-height: 44px;
  padding: clamp(14px, 1.5vw, 20px) clamp(28px, 3.4vw, 46px);
  background: #41ED98;
  border: 2px solid #41ED98;
  border-radius: 2px;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: normal;
  letter-spacing: -0.01em;
  color: #E9FFE1;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0px 4px 16px rgba(255, 255, 255, 0.75) inset;
}
.ff-reach__cta:hover {
  background: #FAFAFA;
  color: #41ED98;
}
.ff-reach__cta:focus-visible {
  outline: 3px solid #41ED98;
  outline-offset: 4px;
}

/* With motion off there is no tween to raise the button, and `reachCtaIn`
   writes the opacity inline. This is the same end state for the case where the
   runtime is absent entirely and no inline write ever happens. */
html.no-motion .ff-reach__cta { opacity: 1; }

/* ════════════════════ PHASE 54 — the last look at the problem, and at the
   solution (Founder Flow v2, the reference's `probConfirm`), built
   2026-08-20. Two pages, one block: the reference has ONE `[data-pconfirm]`
   and decides the headline, the text and the CTA label from `vStep`, so
   `.ff-pc` is drawn once and `ConfirmProblem` / `ConfirmSolution` both render
   into it. A second copy of these rules is how the two would come to differ by
   a pixel.

   Drawn to the supplied reference (`Proovd Founder Flow v2.dc.html`,
   `[data-pconfirm]` / `kindWide`), on the same terms every other screen of
   this flow ships under: the reference outranks the design system HERE, and
   nowhere else.

   ── This is not `.ff-prob` ────────────────────────────────────────────────
   `.ff-prob` is the reference's `[data-problem]` — screens 2 and 3, a 1304px
   column with a sticker in the headline, a scroll rail, and `fitStages`'
   `s *= 1.38`. This is a different composition over the same record: a 1760px
   column pushed 70px down, no sticker, no rail, no boost. Two prefixes because
   they are two screens, not one screen with a variant.

   ── The layout model is the reference's, literally ────────────────────────
   `position:fixed;inset:0;overflow:hidden` around a fixed 2496x1542 stage,
   scaled to the viewport by `fitStages()`:

       let s = Math.min(innerWidth / 2496, innerHeight / 1542) * (pageScale || .78);

   No branch of that function names this screen, so it takes `pageScale` alone.
   Each page owns the scale and writes the whole transform on mount and on
   resize; the `scale(0.37)` below is the reference's own placeholder and
   is what renders for the one frame before the layout effect runs. Nothing here
   reflows — the stage scales instead, which is why the composition is identical
   at every viewport (§33.11.1).

   `isClaimPhone()` returns `false` in the reference — "one composition
   everywhere: the phone posture stays off" — so its `kindPhone` branch is dead
   code and this composition is what every viewport gets, exactly as there.

   ── The two suspended conventions, as on screens 1–7 ──────────────────────
     - HEX LITERALS, not tokens. Seven of the reference's colours here have
       exact or near tokens; mixing literal and token would leave half the
       screen able to drift with a token change and half not, so all of them
       are literal and this screen reads exactly as the reference does.
     - RADIUS 2px, literal. It is what `var(--radius)` resolves to under the
       owner ruling, so the two agree today; the literal is here for the same
       reason the colours are.

   ── What the project's globals do to this screen, overridden explicitly ───
   `h1..h6 { margin; line-height:1.18; font-weight:900 }` reaches the headline,
   `p { margin; max-width: var(--measure) }` reaches the save line, and
   `body`'s 18px / line-height 1.6 reaches the whole stage — the reference's own
   body sets neither, so the stage resets both. The field carries `max-width:
   none` for the same reason `.ff-compet__field` does.
   ═════════════════════════════════════════════════════════════════════════ */

/* `FlowPage`'s chrome is not drawn on this screen — and, as on Positioning,
   the reason is not that the reference has none. It has a wordmark and a HELP,
   and it draws them INSIDE the `z-index: 25` fixed layer below. Left in place
   they would sit under that layer and be unreachable, so both are hidden and
   both leave the tab order with it. There is no message badge on this screen
   at all: the reference draws none. */
.ff[data-flow-page='confirm-problem'] .ff__top,
.ff[data-flow-page='confirm-problem'] .ff__badge,
.ff[data-flow-page='confirm-solution'] .ff__top,
.ff[data-flow-page='confirm-solution'] .ff__badge { display: none; }

/* The reference's `[data-pconfirm]`. Nothing scrolls. */
.ff-pc {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
}

/* ── The chrome. Its `clamp()`s are the reference's own, and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-pc__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-pc__back:hover { color: #013F17; }
/* The reference has no focus treatment at all. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11) and it costs the composition nothing. */
.ff-pc__back:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-pc__back svg { width: 11px; height: 11px; flex: none; }

.ff-pc__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-pc__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-pc__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-pc__help:hover { background: #E9FFE1; }
.ff-pc__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* ── The stage, and the 1760px column inside it ──────────────────────────── */

.ff-pc__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  color: #013F17;
}

/* `translate(-50%, calc(-50% + 70px))` — its own offset. The column is
   CENTRED, which is what makes the two states read as one composition: the
   editor's field grows by 170px and the CTA it replaces was 160px tall, so the
   whole stack moves by five pixels on a 2496px stage. */
.ff-pc__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1760px;
  transform: translate(-50%, calc(-50% + 70px));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ff-pc__head {
  margin: 0;
  width: 1760px;
  font-size: 80px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.03em;
  color: #013F17;
  text-align: center;
  text-wrap: pretty;
}

/* The dark card. Its 108px bottom padding is the strip under the sheet, and it
   is what the green CTA sits directly against — the CTA has no margin of its
   own, which is the reference's own arrangement and the reason the two read as
   one object. */
.ff-pc__panel {
  margin-top: 92px;
  width: 100%;
  background: #013F17;
  padding: 25px 25px 108px;
  box-sizing: border-box;
}

/* The height is written inline by the page — 470px reading, 640px editing —
   because it is state rather than style. The transition is the
   reference's own, and it runs in both directions. */
.ff-pc__field {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  resize: none;
  background: #FFFFFF;
  border: none;
  outline: none;
  padding: 96px 112px;
  box-sizing: border-box;
  font-family: 'Satoshi', sans-serif;
  font-size: 55px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: #013F17;
  transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The reference gives the field no focus ring at all, and the editor's caret
   is the only signal there — which leaves a keyboard user tabbing onto the
   read-state field with nothing. The ring is drawn INSIDE the sheet
   (`outline-offset: -6px`) rather than around it: an outset one would be laid
   over the dark card and read as a second border on it, and an inset one costs
   the composition nothing because it paints over the sheet's own padding. */
.ff-pc__field:focus-visible {
  outline: 6px solid #41ED98;
  outline-offset: -6px;
}

.ff-pc__cta {
  width: 100%;
  height: 160px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 66px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(255, 255, 255, 0.66) inset;
  outline: none;
}
.ff-pc__cta:hover { background: #3BDC8C; }
.ff-pc__cta:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }
.ff-pc__cta:disabled { cursor: default; }

.ff-pc__edit {
  margin-top: 70px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 28px 78px;
  border: none;
  border-radius: 2px;
  background: #E9FFE1;
  color: #7FA98D;
  font-family: 'Satoshi', sans-serif;
  font-size: 57px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
}
.ff-pc__edit:hover { color: #013F17; }
.ff-pc__edit:focus-visible { outline: 4px solid #013F17; outline-offset: 6px; }
.ff-pc__edit svg { width: 53px; height: 53px; flex: none; }

/* Absolutely positioned under the column, so a failure can never move the
   composition. `.sr-only` in every other state, which is where it renders
   nothing and is still announced. */
.ff-pc__save.is-loud {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 34px 0 0;
  max-width: none;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: normal;
  color: #013F17;
}

/* ══════════════════════════════════════════ PHASE 54 — RESPONSIVE ══
   The reference's own one media query for this screen. Everything else is the
   stage, and the stage scales rather than reflowing. */
@media (max-width: 600px) {
  .ff-pc__back { bottom: 92px; padding: 8px 14px; }
}

/* ════════════════════ PHASE 55 — links to your socials (Founder Flow v2, the
   reference's `[data-socials]`), built 2026-08-20.

   Drawn to the supplied reference (`Proovd Founder Flow v2.dc.html`,
   `[data-socials]` / `kindWide`) and its screenshot, on the same terms every
   other screen of this flow ships under: the reference outranks the design
   system HERE, and nowhere else.

   ── The layout model is the reference's, literally ────────────────────────
   `position:fixed;inset:0;overflow:hidden` around a fixed 2496x1542 stage,
   scaled to the viewport by `fitStages()`:

       let s = Math.min(innerWidth / 2496, innerHeight / 1542) * (pageScale || .78);

   No branch of that function names this screen, so it takes `pageScale` alone
   (0.4000 at 1280x800 — measured against the reference, matrix and all).
   `SocialsStep` owns the scale and writes the whole transform on mount and on
   resize; the `scale(0.37)` below is the reference's own placeholder and is
   what renders for the one frame before the layout effect runs. Nothing here
   reflows — the stage scales instead, which is why the composition is identical
   at every viewport (§33.11.1).

   `isClaimPhone()` returns `false` in the reference — "one composition
   everywhere: the phone posture stays off" — so its `kindPhone` branch is dead
   code and this composition is what every viewport gets, exactly as there.

   ── The column has no width of its own ────────────────────────────────────
   `width: fit-content`, and what fits it is a hidden 112px sentence belonging to
   the VISUALS screen (`.ff-soc__measure`). That is the reference's own device
   for giving the two screens one column, and it is kept as a measurement rather
   than replaced with the 1491px it computes to: the number is a property of
   Satoshi, not of the layout.

   ── The two suspended conventions, as on screens 1–15 ─────────────────────
     - HEX LITERALS, not tokens. `#41ED98`, `#013F17`, `#FAFAFA`, `#7FE7B0`,
       `#E9FFE1` and `#3BDC8C` are the reference's own; mixing literal and token
       would leave half the screen able to drift with a token change and half
       not, so all of them are literal and this screen reads exactly as the
       reference does.
     - RADIUS 2px, literal. It is what `var(--radius)` resolves to under the
       owner ruling, so the two agree today; the literal is here for the same
       reason the colours are.

   ── What the project's globals do to this screen, overridden explicitly ───
   `h1..h6 { margin; line-height:1.18; font-weight:900 }` reaches the headline,
   `p { margin; max-width: var(--measure) }` reaches the meta line, `input`
   inherits the design system's own field treatment, and `body`'s 18px /
   line-height 1.6 reaches the whole stage — the reference's own body sets
   neither, so the stage resets both.

   ═════════════════════════════════════════════════════════════════════════ */

/* `FlowPage`'s chrome is not drawn on this screen — and the reason is not that
   the reference has none. It has a wordmark, a HELP and a message bell, and it
   draws all three INSIDE the `z-index: 25` fixed layer below. Left in place
   they would sit under that layer and be unreachable, so both are hidden and
   both leave the tab order with it. */
.ff[data-flow-page='socials'] .ff__top,
.ff[data-flow-page='socials'] .ff__badge { display: none; }

/* The reference's `[data-socials]`. Nothing scrolls. */
.ff-soc {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
  /* The reference's page inherits the UA's own root metrics; ours inherits
     `body`'s 18px/1.6. Restated here so the chrome outside the stage measures
     against what it was authored against. */
  font-size: 16px;
  line-height: normal;
}

/* The read failed, so there is no composition to draw. It keeps the layer's
   ground and centres the panel; nothing here is the reference's, because the
   reference holds its record in memory and has no failure to render. */
.ff-soc__failure {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
}

/* ── The chrome. Its `clamp()`s are the reference's own, and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-soc__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-soc__back:hover { color: #013F17; }
/* The reference has no focus treatment at all. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11) and it costs the composition nothing. */
.ff-soc__back:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-soc__back svg { width: 11px; height: 11px; flex: none; }

.ff-soc__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-soc__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-soc__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-soc__help:hover { background: #E9FFE1; }
.ff-soc__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* The message bell. Its geometry is the reference's; its number is not, and
   `SocialsStep`'s header says what the difference is. It does not shake. */
.ff-soc__mailbtn {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  padding: 0;
  border: none;
  background: none;
  font-size: 13.3333px;
  line-height: normal;
  cursor: pointer;
  outline: none;
}
.ff-soc__mailbtn:focus-visible { outline: 2px solid #013F17; outline-offset: 4px; }
.ff-soc__mail {
  position: relative;
  width: clamp(58px, 5.2vw, 78px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  box-sizing: border-box;
}
.ff-soc__mail img { width: 68%; height: auto; max-width: none; display: block; }
.ff-soc__mailcount {
  position: absolute;
  left: -10%;
  top: -16%;
  /* `width: 31%; aspect-ratio: 1` there, over a one-digit number. Ours is a
     count of reading cards and is legitimately two digits, so the box grows
     rather than clipping — and the aspect keeps a one-digit badge identical to
     the reference's own 19.38 square. */
  min-width: 31%;
  min-height: 31%;
  aspect-ratio: 1;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  background: #FAFAFA;
  box-sizing: border-box;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1;
  font-weight: 700;
  color: #41ED98;
}

/* ── The stage, and the fit-content column inside it ─────────────────────── */

.ff-soc__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  /* See the header: the reference's body sets neither, and this file's does. */
  font-size: 16px;
  line-height: normal;
  color: #013F17;
}

.ff-soc__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: fit-content;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The visuals headline, measured and discarded. Its only job is the width. */
.ff-soc__measure {
  height: 0;
  overflow: hidden;
  font-size: 112px;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  visibility: hidden;
}

.ff-soc__head {
  margin: 0;
  font-size: 134px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: #013F17;
  white-space: nowrap;
}

.ff-soc__panel {
  margin-top: 150px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 66px;
}

.ff-soc__row {
  display: flex;
  align-items: center;
  gap: 64px;
}

.ff-soc__icon {
  width: 78px;
  height: 78px;
  flex: none;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ff-soc__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 132px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 40px;
  background: #FAFAFA;
  border: 3px solid #7FE7B0;
  border-radius: 2px;
  outline: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 44px;
  font-weight: 500;
  line-height: normal;
  color: #013F17;
}
.ff-soc__input::placeholder { color: #A2AFA8; opacity: 1; }
.ff-soc__input:focus,
.ff-soc__input:focus-visible { border-color: #41ED98; outline: none; }
.ff-soc__input:read-only { color: #5C7A66; }

.ff-soc__add {
  flex: none;
  width: 290px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0;
  border: none;
  border-radius: 2px;
  background: #013F17;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  /* The reference's own, and it is what carries `#013F17` to `#41ED98` beside
     `socialAddPop`'s scale — the two land within a fifth of a second. */
  transition: background 0.2s ease;
}
.ff-soc__add.is-added { background: #41ED98; }
.ff-soc__add:hover:not(:disabled) { transform: scale(1.02); }
.ff-soc__add:focus-visible { outline: 3px solid #013F17; outline-offset: 4px; }
.ff-soc__add:disabled { cursor: default; }
.ff-soc__add svg { width: 42px; height: 42px; flex: none; }

.ff-soc__cta {
  margin-top: 150px;
  width: 100%;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 70px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  box-shadow: 0px 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-soc__cta:hover { background: #3BDC8C; }
.ff-soc__cta:focus-visible { outline: 3px solid #013F17; outline-offset: 4px; }

.ff-soc__live { position: absolute; }

/* ══════════════════════════════════════════ PHASE 55 — RESPONSIVE ══
   One media query, and it is the same one PHASE 54 needs: at phone width the
   back control would sit under the browser's own bottom furniture. Everything
   else is the stage, and the stage scales rather than reflowing. */
@media (max-width: 600px) {
  .ff-soc__back { bottom: 92px; padding: 8px 14px; }
}


/* ════════════════════ PHASE 56 — you're live (Founder Flow v2, the
   reference's `[data-livepage]`), REBUILT 2026-08-20.

   The last page of the flow, and the only one that celebrates anything.
   Drawn to the supplied reference (`Proovd Founder Flow v2.dc.html`,
   `[data-livepage]` / `kindWide`), on the same terms every other screen of
   this flow ships under: the reference outranks the design system HERE, and
   nowhere else.

   ── What this screen has, and what it deliberately has not ────────────────
   The reference's live page is the ONLY page of the twenty-six that draws no
   chrome at all. No wordmark, no HELP, no message badge, and no Back — its
   `back()` returns early on this page by name:

       if(this.isReviewWait()||this.isCampReview()||this.isLivePage())return;

   So `FlowPage`'s `.ff__top` and `.ff__badge` are hidden for this page. That
   is not the reason PHASE 54's screens hide theirs — those DRAW a wordmark and
   a HELP inside their own `z-index: 25` layer and would otherwise have two.
   Here there is genuinely none to draw, and the hide exists because this
   screen's own fixed layer covers them: left in place they would sit under it,
   invisible and still in the tab order (§28.5). §27.1's sixth question is
   still answered on every state this page can reach — the two that are not the
   celebration carry their own `Get help` route, which is a real address
   (`/support`) rather than the drawer.

   ── The layout model is the reference's, literally ────────────────────────
   `position:fixed;inset:0;overflow:hidden` around a fixed 2496x1542 stage,
   scaled to the viewport by `fitStages()`:

       let s = Math.min(innerWidth / 2496, innerHeight / 1542) * (pageScale || .78);

   No branch of that function names this screen — `c` is `live`, which is not
   `hero`, not `vetting`, not `intake`, not `approval` and not
   `problem`/`solution` — so it takes `pageScale` alone. At 1280x800 that is
   exactly 0.4, and the measured reference stage is 998.4x616.8. Inside it
   sits a 2260px column, centred, and every child below carries the
   reference's own pixel value. Nothing reflows; the stage scales instead,
   which is why the composition is identical at every viewport (§33.11.1) —
   at 320x800 the same stage renders 249.6x154.2 and the document does not
   scroll sideways.

   `isClaimPhone()` returns `false` in the reference — "one composition
   everywhere: the phone posture stays off" — so its `kindPhone` branch is
   dead code and this composition is what every viewport gets, exactly as
   there. There is no media query in this section for the same reason.

   ── The two suspended conventions, as on screens 1–8 ──────────────────────
     - HEX LITERALS, not tokens. `#41ED98` is `--brand` and `#FAFAFA` is
       `--white`, but `#013F17` and the exact pairing here are the reference's;
       mixing literal and token would leave half the screen able to drift with
       a token change and half not.
     - RADIUS 2px, literal. It is what `var(--radius)` resolves to under the
       owner ruling, so the two agree today; the literal is here for the same
       reason the colours are.

   ── What the project's globals do to this screen, overridden explicitly ───
   `h1..h6 { margin: 0 0 var(--sp-16); line-height: 1.18 }` reaches the
   headline, `p { margin: 0 0 var(--sp-16); max-width: var(--measure) }`
   reaches the lede — and the measure cap in particular would rewrap it, so it
   is the one override that changes what a person reads. `body`'s 18px /
   line-height 1.6 reaches the whole stage, and the reference's own body sets
   neither, so the stage resets both.
   ═════════════════════════════════════════════════════════════════════════ */

/* See the header: this screen draws no chrome of its own, and its own fixed
   layer would bury `FlowPage`'s. */
.ff[data-flow-page='live'] .ff__top,
.ff[data-flow-page='live'] .ff__badge { display: none; }

/* The reference's `[data-livepage]`. Nothing scrolls. */
.ff-live {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #41ED98;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
  /* The reference's own body sets neither, and this file's sets 18px / 1.6.
     The reset goes on the LAYER rather than on the stage, because the layer
     is where the reference's own inheritance starts and every measurement
     below is taken against it. */
  font-size: 16px;
  line-height: normal;
}

/* ── The stage, and the 2260px column inside it ──────────────────────────── */

.ff-live__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  /* The reference's own placeholder, and what renders for the one frame
     before the page's layout effect writes the real scale. */
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  /* See the header: the reference's body sets neither, and this file's does. */
  font-size: 16px;
  line-height: normal;
  color: #013F17;
}

.ff-live__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2260px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* `white-space: nowrap` is the reference's own: the headline is the lockup and
   it never breaks. At 1838px it sits comfortably inside the 2260px column. */
.ff-live__head {
  margin: 0;
  font-size: 360px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #FAFAFA;
  text-align: center;
  white-space: nowrap;
}

/* `max-width: none` overrides §9's measure cap, which would rewrap this into a
   different shape from the reference's two lines. The 1980px width IS the
   measure here, and it is the reference's own number. */
.ff-live__lede {
  margin: 170px 0 0;
  width: 1980px;
  max-width: none;
  font-size: 72px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: #FAFAFA;
  text-align: center;
  text-wrap: pretty;
}

/* The dark ring is an OUTLINE rather than a border, which is the reference's
   own choice and is load-bearing: an outline paints outside the border box and
   takes no layout, so the button measures 1560x176 and the ring adds 34px on
   every side without moving anything around it. `padding` is deliberately
   unset — the UA's own `1px 6px` is what the reference renders too, and with a
   fixed size and centred flex content it changes nothing. */
.ff-live__cta {
  margin-top: 210px;
  width: 1560px;
  height: 176px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: 34px solid #013F17;
  outline-offset: 0;
  box-sizing: border-box;
  border-radius: 2px;
  background: #FAFAFA;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 74px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.ff-live__cta:hover { background: #FFFFFF; }
.ff-live__cta:disabled { cursor: default; }
/* The reference has no focus treatment at all, and the usual answer — an
   `outline` — is unavailable here, because the outline IS the decoration and
   overriding it on focus would delete the ring. So the ring is drawn INSIDE
   the white face instead, wide enough to be unmistakable at any stage scale.
   A control a keyboard user cannot locate is not the same control (§28.5,
   §33.11), and this costs the composition nothing. */
.ff-live__cta:focus-visible { box-shadow: inset 0 0 0 14px #41ED98; }
.ff-live__demo {
  position: absolute;
  z-index: 7;
  bottom: clamp(22px, 3vw, 42px);
  left: clamp(20px, 3vw, 46px);
  max-width: min(48vw, 520px);
  margin: 0;
  color: #FAFAFA;
  font-size: clamp(12px, .95vw, 15px);
  font-weight: 700;
  opacity: .72;
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 57 — screen 0, the invitation, rebuilt 1:1 from
   `Proovd_Affiliate_Founder_Rebuild_v11_FIXED_SHAREABLE.html` (2026-08-20).

   Every value below is READ from that file's `.claim-*` block rather than
   derived from this stylesheet's tokens — the reference is the authority for
   this one screen, so the px values, the #DEFAFC band, the 28px mint text
   stroke, the 5px brand border and the four animation delays are its own.

   The screen is authored at a fixed 2496×1542 stage holding a 1295px shell,
   and the whole stage is scaled to the viewport by JS:

     scale = min(innerWidth / 1440, innerHeight / 1420, 1)

   which is the reference's `_fit()`, run on mount, on resize, and once more
   at 2100ms. `.claim-wide-stage` carries `scale(.37)` here only as the value
   before that first measurement lands.

   Phone (≤820px AND portrait-ish) drops the fixed stage entirely: the two
   wrappers become `display:contents` so the same nodes flow in a column. The
   reference duplicates its markup for that; one copy keeps one <h1>.
   ═════════════════════════════════════════════════════════════════════════ */

.claim-intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: #FAFAFA;
  color: #011E0B;
  font-family: 'Satoshi', system-ui, sans-serif;
  /* The reference runs on `html{font-size:16px}`. This file's root is 18px, and
     `claimRise` travels 1rem — so the rem is pinned rather than inherited. */
  font-size: 16px;
  line-height: normal;
}

.claim-wide {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.claim-wide-stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: transparent;
  color: #011E0B;
  transform: translate(-50%, -50%) scale(.37);
  transform-origin: center center;
}

.claim-wide-shell {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1295px;
  transform: translate(-50%, -50%) scale(.92);
}

.claim-meta-space { height: 60px; }

.claim-band {
  height: 0;
  margin-top: 100px;
  background: transparent;
  overflow: hidden;
  animation: claimBandWide .62s cubic-bezier(.16, 1, .3, 1) .92s forwards;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The transparent wrapper still animates from 0 -> 285px. Keeping the image at
   its final dimensions makes that motion reveal the envelope, while `fill`
   gives it the complete footprint formerly occupied by the blue rectangle. */
.claim-band-art {
  display: block;
  flex: none;
  width: 100%;
  height: 285px;
  max-width: none;
  object-fit: fill;
}

.claim-head {
  max-width: 20ch;
  margin: 98px 0 0;
  color: #012D10;
  font-size: 84px;
  font-weight: 700;
  line-height: 1.51;
  letter-spacing: -.03em;
  -webkit-text-stroke: 28px #E9FFE1;
  paint-order: stroke fill;
}

/* Each word rises on its own beat. The reference pins twelve nth-child
   delays at 1.27s + 0.04s each; the delay rides the element instead, so a
   two-word name does not silently drop the last word off the schedule. */
.claim-word {
  display: inline-block;
  margin-right: .22em;
  opacity: 0;
  transform: translateY(60%);
  animation: claimWord .56s cubic-bezier(.16, 1, .3, 1) forwards;
}

.claim-copy {
  margin: 65px 0 0;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.012em;
  color: #011E0B;
  opacity: 0;
  animation: claimRise .46s cubic-bezier(.16, 1, .3, 1) 1.56s forwards;
}

.claim-cta {
  margin-top: 101px;
  width: 100%;
  height: 122px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid #41ED98;
  border-radius: 1px;
  background: #013F17;
  color: #E9FFE1;
  font-family: inherit;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -.02em;
  cursor: pointer;
  opacity: 0;
  transform: scale(.94);
  animation: claimCta .52s cubic-bezier(.34, 1.3, .64, 1) 1.76s forwards;
  transition: background .18s, transform .18s;
}

.claim-cta:hover { background: #012D10; }
.claim-cta:active { transform: scale(.985) !important; }
/* No :focus-visible rule, deliberately. The reference declares none, so the
   control keeps the UA's own ring — which is a real, visible focus indicator
   and is what the reference shows. A styled one here would be this file
   disagreeing with the screen it was rebuilt from. */

.claim-motion-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #FAFAFA;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: claimSplashAway .56s cubic-bezier(.65, 0, .35, 1) .68s forwards;
}

.claim-splash-outer {
  width: min(38vmin, 20rem);
  height: min(38vmin, 20rem);
  background: #41ED98;
  display: grid;
  place-items: center;
  animation: claimSquare .4s cubic-bezier(.34, 1.56, .64, 1) both;
}

.claim-splash-inner {
  width: 52%;
  height: 52%;
  background: #013F17;
  animation: claimSquare .35s cubic-bezier(.34, 1.56, .64, 1) .15s both;
}

@keyframes claimSquare { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes claimSplashAway { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes claimBandWide { from { height: 0; opacity: 0; } to { height: 285px; opacity: 1; } }
@keyframes claimBandPhone { from { height: 0; opacity: 0; } to { height: 24vh; opacity: 1; } }
@keyframes claimRise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes claimWord { to { opacity: 1; transform: translateY(0); } }
@keyframes claimCta { to { opacity: 1; transform: scale(1); } }

/* The phone layout. The reference renders a second copy of the content for
   this; the two stage wrappers drop out of the box tree instead, which is the
   same result over one set of nodes. */
@media (max-width: 820px) and (max-aspect-ratio: 10/9) {
  .claim-wide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: auto;
    background: #FAFAFA;
  }
  .claim-wide-stage,
  .claim-wide-shell { display: contents; }

  .claim-meta-space { height: 36px; flex: none; }
  .claim-band {
    height: 0;
    max-height: 30vh;
    margin-top: 5vh;
    flex: none;
    animation-name: claimBandPhone;
  }
  .claim-band-art {
    height: 24vh;
  }
  .claim-head {
    margin: 4vh 0 0;
    max-width: none;
    font-size: min(11vw, 58px);
    line-height: 1.3;
    letter-spacing: -.03em;
    -webkit-text-stroke: min(3.1vw, 12px) #E9FFE1;
  }
  .claim-copy { margin: 3vh 0 0; font-size: min(5.6vw, 25px); line-height: 1.42; }
  .claim-cta {
    margin-top: auto;
    width: 100%;
    height: 64px;
    min-height: 64px;
    border-width: 2px;
    font-size: 22px;
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .claim-motion-splash { display: none; }
  .claim-band,
  .claim-word,
  .claim-copy,
  .claim-cta {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .claim-wide .claim-band { height: 285px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 820px) and (max-aspect-ratio: 10/9) {
  .claim-wide .claim-band { height: 24vh; }
}

/* ══════════════════════ PHASE 58 — screen 1, the password, rebuilt 1:1 from
   `docs/design-refrence/Proovd_Affiliate_Founder_Rebuild_v11_FIXED_SHAREABLE.html`
   (2026-08-20) ═══════════════════════════════════════════════════════════════

   PHASE 57's arrangement, applied to the second screen of the same reference:
   the prefix is `.crf-pw-`, the screen renders `bare` so it owns its own header
   the way the reference does, and every value below was MEASURED out of the
   reference in Chrome rather than read off the cascade.

   ── Why measuring mattered here ────────────────────────────────────────────
   The reference's stylesheet is two skins. The first (`@media not all { … }`)
   is dead — its own comment calls it "superseded first-pass skin kept inert for
   version traceability" — so half of what greps for `.moment-password` never
   runs. And the live skin's `.proovd-skin .proovd-app>header button
   { color:#41ED98 }` does NOT apply, because the DC runtime leaves `<sc-if>`
   wrappers in the DOM and the `>` never matches. The Back control is therefore
   the inline `#013F17` at 700/14px, which is what the screenshot shows.
   `.proovd-skin .obapp>.proovd-moment` misses for the same reason, so the
   stage padding is the base `clamp(2.25rem,5vh,4.5rem)` and not the
   `clamp(5.25rem,7vh,6.5rem)` the media query appears to promise.

   Measured at 1440×900: h1 57.6px/700, lede 16px/500 #669370, input underline
   2px #A2AFA8 with a 60px min-height, requirement grid 318px+318px at 8px/36px,
   tick box 23.2px, label 15.2px/700, confirm rule 1px #D8E2DB, CTA 736×64 at
   900 weight on #41ED98 with a 2px radius.

   ── Colours are literals on purpose ────────────────────────────────────────
   This is a 1:1 transplant of a foreign design, so the values are the
   reference's own hexes rather than this product's slots. #41ED98 is `--brand`
   and #013F17 is `--dark`, but #3BDC8C (the CTA hover), #A2AFA8, #D8E2DB and
   #C0392B have no slot here, and half-mapping a palette is how a transplant
   starts disagreeing with the thing it was copied from. */

.crf-pw {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #FAFAFA;
  color: #013F17;
  /* The reference inherits `normal` through the whole moment and sets an
     explicit line-height only on the two elements that need one. This product's
     `body` sets 1.6, which reached the requirement labels and both inputs.
     Restoring `normal` at the root reproduces the reference's own chain; the
     title and lede override it below, exactly as the reference does. */
  line-height: normal;
}

/* The reference's `<header>`: static, full width, Back alone on the left.
   `showBrand` is `!showBack`, so the wordmark is deliberately absent here. */
.crf-pw__bar {
  flex: none;
  min-height: 3.625rem;
  padding: 1.125rem 1.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crf-pw__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0;
  border: none;
  background: none;
  color: #013F17;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The reference's own `style-hover="opacity:.6"`. */
.crf-pw__back:hover { opacity: 0.6; }
.crf-pw__back svg { flex: none; }

/* `.scroll.px.proovd-moment.moment-password` — the stage. */
.crf-pw__screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(2.25rem, 5vh, 4.5rem)
    clamp(1.35rem, 4.4vw, 4rem)
    clamp(3.5rem, 7vh, 6rem);
}

/* `.obrow` — `--ob-w:46rem` for this moment only. */
.crf-pw__row {
  width: min(100%, 46rem);
  max-width: 46rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 3vh, 2.75rem);
  text-align: center;
}

/* `.obhead` */
.crf-pw__head {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.crf-pw__title {
  margin: 0 0 0.625rem;
  font-size: clamp(3.35rem, 4vw, 4.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #013F17;
  text-wrap: balance;
}

.crf-pw__lede {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  color: #669370;
}

/* `.obbody` — the skin strips the panel treatment back to bare content. */
.crf-pw__body {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #013F17;
  text-align: left;
}

/* Both inputs. The first carries an inline `#013F17` underline in the
   reference's markup and the skin overrides BOTH to 2px #A2AFA8 — measured, so
   the two fields really are identical until one is focused. */
.crf-pw__input {
  width: 100%;
  border: 0;
  border-bottom: 2px solid #A2AFA8;
  border-radius: 0;
  background: transparent;
  padding: 0.75rem 0.125rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.375rem;
  color: #013F17;
  transition: border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.crf-pw__input:focus {
  border-bottom-color: #41ED98;
  outline: none;
}

/* `.password-requirements` — a column until the grid takes over at 901px. */
.crf-pw__reqs {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.crf-pw__req {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.3125rem 0;
}

.crf-pw__box {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.125rem solid #A2AFA8;
  background: #FAFAFA;
  transition:
    background 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.crf-pw__req.is-met .crf-pw__box {
  border-color: #41ED98;
  background: #41ED98;
}

/* The tick is always in the DOM and always 12px; only its stroke changes, so
   the box never reflows as it fills. */
.crf-pw__box svg { display: block; stroke: transparent; transition: stroke 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.crf-pw__req.is-met .crf-pw__box svg { stroke: #E9FFE1; }

.crf-pw__req-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #A2AFA8;
  transition: color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.crf-pw__req.is-met .crf-pw__req-label { color: #013F17; }

/* `.grow.password-confirm`. The `growIn` keyframes are killed by the live skin
   (`.proovd-skin .proovd-app .grow{animation:none!important}` — a descendant
   selector, so unlike the header rules above it DOES match), so the confirm
   field appears without an animation. Reproduced as written. */
.crf-pw__confirm { margin-top: 1.5rem; }

.crf-pw__mismatch {
  margin: 0.875rem 0 0;
  font-size: 0.8438rem;
  font-weight: 600;
  color: #C0392B;
}

/* `.ob-inline-action` / `.ob-inline-button`. The action is a sibling of the
   body rather than a child, so the CTA spans the full 46rem row while the
   fields stop at 42rem — the button really is wider than the input. */
.crf-pw__action {
  width: 100%;
  flex: none;
  display: flex;
  justify-content: center;
}

.crf-pw__cta {
  width: 100%;
  min-height: clamp(4rem, 5.2vh, 4.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 0;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: inherit;
  font-size: clamp(1.25rem, 1.35vw, 1.65rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: none;
  /* The reference tweens these in GSAP (hover .12s power2.out, release .25s
     power3.out). Expressed as transitions because the values and the feel are
     identical and a transition cannot desynchronise from a re-render. */
  transition:
    background-color 0.12s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.crf-pw__cta:hover:not(:disabled) {
  background-color: #3BDC8C;
  transform: scale(1.02);
}

.crf-pw__cta:active:not(:disabled) {
  transform: scale(0.96);
  transition-duration: 0.12s, 0.12s;
}

.crf-pw__cta:disabled {
  background: #F1F3F2;
  color: #A2AFA8;
  cursor: not-allowed;
  box-shadow: none;
}

.crf-pw__cta svg { flex: none; }

/* ── @media (max-width:900px) — the row narrows to the body's own measure ─── */
@media (max-width: 900px) {
  .crf-pw__row {
    width: min(100%, 42rem);
    max-width: 42rem;
  }
}

/* ── @media (min-width:901px) — the 2×2 grid and the larger controls ─────── */
@media (min-width: 901px) {
  .crf-pw__row { gap: clamp(2rem, 3.5vh, 3rem); }
  .crf-pw__title { margin-bottom: clamp(0.9rem, 1.4vh, 1.25rem); }
  .crf-pw__lede {
    max-width: 42ch;
    line-height: 1.55;
    letter-spacing: -0.012em;
  }
  .crf-pw__body { max-width: 42rem; }

  .crf-pw__input {
    min-height: clamp(3.75rem, 4.8vh, 4.25rem);
    font-size: clamp(1.05rem, 1vw, 1.2rem);
  }

  .crf-pw__reqs {
    margin-top: 1.75rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 2.25rem;
  }

  .crf-pw__req {
    min-height: 2.25rem;
    gap: 0.7rem;
    padding: 0.2rem 0;
  }

  .crf-pw__box {
    width: 1.45rem;
    height: 1.45rem;
  }

  .crf-pw__req-label {
    font-size: clamp(0.95rem, 0.9vw, 1.08rem);
    font-weight: 700;
  }

  .crf-pw__confirm {
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid #D8E2DB;
  }
}

/* ── Short landscape: the reference tightens rather than scrolls ─────────── */
@media (min-width: 901px) and (max-height: 720px) {
  .crf-pw__row { gap: clamp(1.15rem, 2vh, 1.65rem); }
  .crf-pw__title { font-size: clamp(2.75rem, 3.2vw, 3.75rem); }
  .crf-pw__input { min-height: 3.55rem; }
  .crf-pw__cta { min-height: 4rem; }
}

/* ── @media (max-width:600px) — hairline rules and a smaller headline ────── */
@media (max-width: 600px) {
  .crf-pw__screen {
    padding-top: 1.5rem;
    padding-bottom: 5rem;
  }
  .crf-pw__title { font-size: clamp(2.25rem, 9vw, 3rem); }
  .crf-pw__row { gap: clamp(1.4rem, 4vh, 2rem); }
  .crf-pw__body { width: 100%; }
  .crf-pw__input { border-bottom-width: 1px; }
}

/* The relay is `creatorPasswordIn`; with motion off the end state is the only
   state, and the CTA keeps its colour change without the scale. */
@media (prefers-reduced-motion: reduce) {
  .crf-pw__cta:hover:not(:disabled),
  .crf-pw__cta:active:not(:disabled) { transform: none; }
}

/* ══════════════════════ PHASE 59 — screen 2, you, rebuilt 1:1 from
   `docs/design-refrence/Proovd_Affiliate_Founder_Rebuild_v11_FIXED_SHAREABLE.html`
   (2026-08-20) ═══════════════════════════════════════════════════════════════

   PHASE 58's arrangement, applied to the next screen of the same reference: the
   prefix is `.crf-you-`, the screen renders `bare` so it owns its own header
   the way the reference does, and every value below was MEASURED out of the
   reference in Chrome rather than read off the cascade.

   ── The two things measuring settled here ──────────────────────────────────
   PHASE 58 records why the reference's stylesheet cannot be read straight: the
   first skin is inside `@media not all` and never runs, and every `>` rule
   under `.proovd-app` misses because the DC runtime leaves `<sc-if>` wrappers
   in the DOM. Both bite again. `.proovd-skin .obapp>.proovd-moment` misses, so
   the stage padding is the base `clamp(2.25rem,5vh,4.5rem)`; the header stays
   static rather than absolute; and the Back control is the inline `#013F17` at
   700/14px rather than the `#41ED98` the skin appears to promise.

   What DOES land is every descendant rule, and those are the composition:
   `.moment-profile .obrow` becomes a three-area grid at 901px, `.obbody`
   becomes two equal columns, and the three fields are placed by name — so the
   DOM order (name, email, phone) and the reading order (name, phone, email)
   differ on purpose. `--ob-w` is 68rem for this moment and the action is capped
   at 38rem, which is why the CTA is narrower than the fields above it.

   Measured at 1440x900: h1 57.6px/700, lede 16px/500 #669370 at 42ch, labels
   12px/700 uppercase #A2AFA8, inputs 16.8px/700 on a 2px #A2AFA8 underline with
   a 60px min-height, the locked row the same silhouette in #D8E2DB with a
   16.8px/600 #669370 value and a 13.6px/700 #5BAA78 chip, row 1088px, body
   532+532 at 20px/24px, action 608px, CTA 608x64 at 900 weight on #41ED98.

   ── Colours are literals on purpose ────────────────────────────────────────
   PHASE 58's reason, unchanged: this is a 1:1 transplant of a foreign design,
   and #3BDC8C, #A2AFA8, #D8E2DB, #5BAA78 and #F1F3F2 have no slot here.
   Half-mapping a palette is how a transplant starts disagreeing with the thing
   it was copied from. */

.crf-you {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #FAFAFA;
  color: #013F17;
  /* The reference's own inherited chain, restored at the root of the moment.
     Its `html` is 16px and its `body` sets no size, so everything inside
     inherits 1rem/`normal`; this product's `body` sets 18px and 1.6, which
     reached both inputs and the locked row. Every child below states its own
     size, so this changes nothing visible today — it stops the next child
     added here from silently arriving 2px larger than the reference's. */
  font-size: 1rem;
  line-height: normal;
}

/* The reference's `<header>`: static, full width, Back alone on the left.
   `showBrand` is `!showBack`, so the wordmark is deliberately absent here. */
.crf-you__bar {
  flex: none;
  min-height: 3.625rem;
  padding: 1.125rem 1.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crf-you__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0;
  border: none;
  background: none;
  color: #013F17;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The reference's own `style-hover="opacity:.6"`. */
.crf-you__back:hover { opacity: 0.6; }
.crf-you__back svg { flex: none; }

/* `.scroll.px.proovd-moment.moment-profile` — the stage. `safe center` is the
   reference's own value (`.obapp .scroll`, a descendant rule, so it lands): it
   centres while the row fits and stops clipping the top when it does not. */
.crf-you__screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  overflow-y: auto;
  background: #FAFAFA;
  padding:
    clamp(2.25rem, 5vh, 4.5rem)
    clamp(1.35rem, 4.4vw, 4rem)
    clamp(3.5rem, 7vh, 6rem);
}

/* `.obrow` — `--ob-w:68rem` for this moment only. */
.crf-you__row {
  width: min(100%, 68rem);
  max-width: 68rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 3vh, 2.75rem);
  text-align: center;
}

/* `.obhead` */
.crf-you__head {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.crf-you__title {
  margin: 0 0 0.625rem;
  font-size: clamp(3.35rem, 4vw, 4.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #013F17;
  text-wrap: balance;
}

.crf-you__lede {
  margin: 0 auto;
  max-width: 40ch;
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: #669370;
}

/* `.obbody` — the skin strips the panel treatment back to bare content, and
   the profile step is the one that makes it a grid. */
.crf-you__body {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #013F17;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* The two margins are INLINE on the reference's own field divs, so they apply
   at every width — under the grid at 901px they add to its 20px row-gap, and
   under the flex column below it they add to its 16px gap. Declaring them only
   inside the grid rule loses 32px of the phone layout. */
.crf-you__field--name,
.crf-you__field--email { margin-bottom: 1rem; }

.crf-you__label {
  display: block;
  margin-bottom: 0.4375rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #A2AFA8;
}

/* Both editable fields. `border:0` plus one underline is the skin's own
   silhouette for this step (`.moment-profile .obbody input`). */
.crf-you__input {
  width: 100%;
  min-height: clamp(2.75rem, 3.6vw, 3.3rem);
  border: 0;
  border-bottom: 2px solid #A2AFA8;
  border-radius: 0;
  background: transparent;
  padding: 0.75rem 0.125rem;
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
  color: #013F17;
  transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.crf-you__input:focus {
  border-bottom-color: #41ED98;
  outline: none;
}

/* The email row: the same silhouette as an input, in a quieter rule, with no
   focusable control inside it. */
.crf-you__locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  min-height: 3.75rem;
  padding: 0.75rem 0.125rem;
  border: 0;
  border-bottom: 2px solid #D8E2DB;
  background: transparent;
}

.crf-you__locked-value {
  font-size: 1rem;
  font-weight: 600;
  color: #669370;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crf-you__locked-tag {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5BAA78;
  white-space: nowrap;
}

/* Not the reference's — it has no save state to report. It takes the position
   and the treatment the reference gives trouble on screen 1, and it spans the
   grid so the fields beside it do not move when it appears. */
.crf-you__trouble {
  grid-column: 1 / -1;
  margin: 0.875rem 0 0;
  font-size: 0.8438rem;
  font-weight: 600;
  color: #C0392B;
}

/* `.ob-inline-action` / `.ob-inline-button`. The action is a sibling of the
   body rather than a child, and it is capped at 38rem while the body runs the
   full 68rem — so the CTA really is narrower than the fields above it. */
.crf-you__action {
  width: 100%;
  flex: none;
  display: flex;
  justify-content: center;
}

.crf-you__cta {
  width: 100%;
  min-height: clamp(4rem, 5.2vh, 4.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 0;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: inherit;
  font-size: clamp(1.25rem, 1.35vw, 1.65rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: none;
  /* The reference tweens these in GSAP (hover .12s power2.out, release .25s
     power3.out). Expressed as transitions because the values and the feel are
     identical and a transition cannot desynchronise from a re-render.
     `scale`, NOT `transform` — measured, and it is the whole reason this rule
     is written this way. The entry relay writes `transform: translateX()` on
     this same button, and a `transition: transform` turns GSAP's instant
     from-state into a 0.25s ease TOWARDS 52px: the CTA visibly drifts right
     before it comes back. `scale` is an independent transform property, so the
     press and the relay compose instead of fighting. */
  transition:
    background-color 0.12s cubic-bezier(0.22, 0.61, 0.36, 1),
    scale 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.crf-you__cta:hover:not(:disabled) {
  background-color: #3BDC8C;
  scale: 1.02;
}

.crf-you__cta:active:not(:disabled) {
  scale: 0.96;
  transition-duration: 0.12s, 0.12s;
}

.crf-you__cta:disabled {
  background: #F1F3F2;
  color: #A2AFA8;
  cursor: not-allowed;
  box-shadow: none;
}

.crf-you__cta svg { flex: none; }

/* ── @media (max-width:899px) — the reference's shell caps itself ────────── */
/* `.frame{max-width:45rem}` — below 900 the reference stops being full-bleed
   and becomes a 720px column centred on the page, header included. Measured:
   at 768 the row starts at 57.8px, which is 24px of centring plus 33.8px of
   `--px`, not `--px` alone. The boundary really is 899 and not 900 — at exactly
   900 the reference is uncapped AND already stacking. */
@media (max-width: 899px) {
  .crf-you {
    width: 100%;
    max-width: 45rem;
    margin-inline: auto;
  }
}

/* ── @media (max-width:900px) — the row narrows and the fields stack ─────── */
@media (max-width: 900px) {
  .crf-you__row {
    width: min(100%, 42rem);
    max-width: 42rem;
  }
}

/* ── @media (min-width:901px) — the three-area grid and the larger controls ─ */
@media (min-width: 901px) {
  .crf-you__row {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "head" "body" "action";
    row-gap: clamp(2rem, 3.2vh, 2.8rem);
    column-gap: clamp(1.6rem, 2.6vh, 2.4rem);
    justify-content: center;
    min-height: 0;
    text-align: center;
  }

  .crf-you__head {
    grid-area: head;
    max-width: 52rem;
  }

  .crf-you__title { margin-bottom: clamp(0.9rem, 1.4vh, 1.25rem); }

  .crf-you__lede {
    max-width: 42ch;
    line-height: 1.55;
  }

  /* Two equal columns, and the three fields placed by name. */
  .crf-you__body {
    grid-area: body;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
  }

  .crf-you__field--name  { grid-column: 1;      grid-row: 1; }
  .crf-you__field--phone { grid-column: 2;      grid-row: 1; }
  .crf-you__field--email { grid-column: 1 / -1; grid-row: 2; }

  .crf-you__label {
    margin-bottom: 0.6rem;
    line-height: 1.35;
  }

  .crf-you__input {
    min-height: clamp(3.75rem, 4.8vh, 4.25rem);
    font-size: clamp(1.05rem, 1vw, 1.2rem);
    font-weight: 700;
  }

  .crf-you__locked-value { font-size: clamp(1.05rem, 1vw, 1.2rem); }
  .crf-you__locked-tag { font-size: 0.85rem; }

  .crf-you__action {
    grid-area: action;
    width: min(100%, 38rem);
    justify-self: center;
  }
}

/* ── Short landscape: the reference tightens rather than scrolls ─────────── */
/* The row gap deliberately does NOT tighten here, and that is measured rather
   than an omission. The reference's short-landscape rule is `.proovd-app .obrow
   {gap:…}` at three classes; the profile's own `.moment-profile .obrow
   {row-gap:…}` is four, so the more specific one still wins and the rows stay
   32px apart. Only the column gap tightens, and this grid has one column. */
@media (min-width: 901px) and (max-height: 720px) {
  .crf-you__row { column-gap: clamp(1.15rem, 2vh, 1.65rem); }
  .crf-you__title { font-size: clamp(2.75rem, 3.2vw, 3.75rem); }
  .crf-you__input { min-height: 3.55rem; }
  .crf-you__cta { min-height: 4rem; }
}

/* ── @media (min-width:1500px) — only the stage gutter moves ─────────────── */
@media (min-width: 1500px) {
  .crf-you__screen { padding-inline: clamp(4rem, 5vw, 7rem); }
}

/* ── @media (max-width:600px) — hairline rules and a smaller headline ────── */
@media (max-width: 600px) {
  .crf-you__screen {
    padding-top: 1.5rem;
    padding-bottom: 5rem;
  }
  .crf-you__title { font-size: clamp(2.25rem, 9vw, 3rem); }
  .crf-you__row { gap: clamp(1.4rem, 4vh, 2rem); }
  .crf-you__body { width: 100%; }
  /* The inputs go hairline and the locked row deliberately does not: the
     reference narrows `input` and `.obbody input`, and the email row is a
     `div` that neither selector reaches. Measured, not assumed. */
  .crf-you__input { border-bottom-width: 1px; }
}

/* The relay is `creatorMomentIn`; with motion off the end state is the only
   state, and the CTA keeps its colour change without the scale. */
@media (prefers-reduced-motion: reduce) {
  .crf-you__cta:hover:not(:disabled),
  .crf-you__cta:active:not(:disabled) { scale: 1; }
}

/* ══════════════════ PHASE 60 — screen 7, the agreement, rebuilt 1:1 from
   `docs/design-refrence/Proovd_Affiliate_Founder_Rebuild_v11_FIXED_SHAREABLE.html`
   (2026-08-20) ═══════════════════════════════════════════════════════════════

   PHASE 58/59's arrangement, applied to the last screen of the same reference:
   the prefix is `.crf-agree-`, the screen renders `bare` so it owns its own
   header the way the reference does, and every value below was MEASURED out of
   the reference in Chrome rather than read off the cascade.

   ── What measuring settled here ────────────────────────────────────────────
   PHASE 58 records why the reference's stylesheet cannot be read straight: the
   first skin is inside `@media not all` and never runs, and every `>` rule
   under `.proovd-app` misses because the DC runtime leaves `sc-if` wrappers in
   the DOM. Both bite again — the stage padding is the base
   `clamp(2.25rem,5vh,4.5rem)`, the header stays static, and the Back control is
   the inline `#013F17` at 700/14px.

   Three more things only the measurement gives:

   · The panel is a TWO-COLUMN grid with the hairline between the promises drawn
     as a `border-left` on the second one and 2rem of padding beside it — not a
     border-bottom on the first, and not a separate rule. Below 901px it becomes
     one column and the same hairline moves to `border-top`, which is where the
     base skin puts it.

   · Both legal paragraphs span the grid, and only the first carries the
     horizontal rule (`margin-top:.4rem; padding-top:1.25rem; border-top`).

   · The lede's `max-width` is 42ch and NOT the 40ch its own inline style asks
     for: `.obhead p{max-width:42ch}` in the 901px block is `!important` and
     wins. It is what makes the second line break after "No".

   Measured at 1440x714: h1 44.8px/700 with a 48.38px line box, lede 16px/500
   #669370 at 42ch/1.55, row 1088px with a 28px row-gap, panel 1088x256 on
   #013F17 with 36px padding and 492+492 columns at 20/32px, tick 26px on
   #41ED98 with a 13px stroke-3.4 check, promise title 17.6px/800 #FAFAFA over
   14px/400 #E9FFE1, legal 13px and 12px #A2AFA8, action 672px, CTA 672x64 at
   900 weight/20px on #41ED98 with a 2px radius and a 24px arrow.

   ── The Back control's hover is the reference's, and it is two things ───────
   `style-hover="opacity:.6"` from the DC runtime AND the skin's own JS, which
   finds a transparent button and tweens it to `#E9FFE1` with `#013F17` ink at
   scale 1.02. Verified by dispatching the event in Chrome and reading the
   tween's own vars rather than by reading the source — the first read of it was
   wrong. Both are reproduced.

   ── Colours are literals on purpose ────────────────────────────────────────
   PHASE 58's reason, unchanged: this is a 1:1 transplant of a foreign design,
   and #3BDC8C, #A2AFA8, #E9FFE1, #F1F3F2 and the rgba hairline have no slot
   here. Half-mapping a palette is how a transplant starts disagreeing with the
   thing it was copied from. */

.crf-agree {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #FAFAFA;
  color: #013F17;
  /* The reference inherits `normal` through the whole moment; this product's
     `body` sets 1.6, which reached both promise bodies and both legal lines. */
  line-height: normal;
}

/* The reference's header: static, full width, Back alone on the left.
   `showBrand` is `!showBack`, so the wordmark is deliberately absent here. */
.crf-agree__bar {
  flex: none;
  min-height: 3.625rem;
  padding: 1.125rem 1.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crf-agree__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: none;
  color: #013F17;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition:
    opacity 0.12s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.12s cubic-bezier(0.22, 0.61, 0.36, 1),
    scale 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Both halves of the reference's hover, measured rather than read. */
.crf-agree__back:hover {
  opacity: 0.6;
  background-color: #E9FFE1;
  color: #013F17;
  scale: 1.02;
}

/* `pointerdown` on a control under 3600px squared tweens to .94, not .96. */
.crf-agree__back:active {
  scale: 0.94;
  transition-duration: 0.12s;
}

.crf-agree__back svg { flex: none; }

/* `.scroll.px.proovd-moment.moment-agree` — the stage. `safe center` is the
   reference's own value (`.obapp .scroll`, a descendant rule, so it lands): it
   centres while the row fits and stops clipping the top when it does not. */
.crf-agree__screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  overflow-y: auto;
  padding:
    clamp(2.25rem, 5vh, 4.5rem)
    clamp(1.35rem, 4.4vw, 4rem)
    clamp(3.5rem, 7vh, 6rem);
}

/* `.obrow` — `--ob-w:68rem` for this moment only. */
.crf-agree__row {
  width: min(100%, 68rem);
  max-width: 68rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 3vh, 2.75rem);
  text-align: center;
}

/* `.obhead` */
.crf-agree__head {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.crf-agree__title {
  margin: 0 0 0.625rem;
  font-size: clamp(3.35rem, 4vw, 4.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #013F17;
  text-wrap: balance;
}

.crf-agree__lede {
  margin: 0 auto;
  max-width: 40ch;
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: #669370;
}

/* `.obbody.agreement-panel` — the one dark guarantee surface. */
.crf-agree__panel {
  width: 100%;
  margin: 0 auto;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border: 0;
  border-radius: 0;
  background: #013F17;
  color: #FAFAFA;
  text-align: left;
}

.crf-agree__promise {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
}

/* One column below 901px, so the divider is horizontal — the base skin's own
   `.moment-agree .obbody>div+div{border-top}`. */
.crf-agree__promise + .crf-agree__promise {
  border-top: 1px solid rgba(233, 255, 225, 0.2);
}

.crf-agree__tick {
  width: 1.625rem;
  height: 1.625rem;
  flex: none;
  margin-top: 0.0625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #41ED98;
}

.crf-agree__promise-text { min-width: 0; }

/* This product caps every `<p>` at `--measure` (proovd.css:306, §9's measure
   rule) and the reference caps none of these — its own `p{max-width:68ch}` is
   in the `@media not all` skin that never runs. The cap reached all four
   paragraphs in the panel and wrapped the primary legal line to three lines
   where the reference sets two, which is 38.74px of extra panel height. Found
   by measuring the two renders side by side, not by looking at them. */
.crf-agree__promise-title,
.crf-agree__promise-body,
.crf-agree__legal,
.crf-agree__more-body,
.crf-agree__hint { max-width: none; }

.crf-agree__promise-title {
  margin: 0 0 0.1875rem;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: #FAFAFA;
}

.crf-agree__promise-body {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: #E9FFE1;
}

.crf-agree__legal {
  margin: 0;
  letter-spacing: -0.012em;
  color: #A2AFA8;
}

.crf-agree__legal--primary {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.crf-agree__legal--terms {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* The reference's three document names: bold, underlined, the same ink as the
   sentence around them. Two of them are real links here and the third is the
   bold text the reference draws — see `AgreeStep.tsx` for why. */
.crf-agree__legal--terms b,
.crf-agree__doc {
  font-weight: 700;
  color: #A2AFA8;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.crf-agree__doc:hover { color: #E9FFE1; }

/* One grid area for the action and the state that can open above it.
   `grid-template-areas` names three rows, so an item with no area of its own
   auto-places into an implicit FOURTH — which put the completion panel BELOW
   the button. A wrapper keeps them in one row and in reading order, and when
   the panel is absent it holds exactly one child and changes no geometry. */
.crf-agree__tail {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 3vh, 2.6rem);
}

/* `.ob-inline-action` / `.ob-inline-button`. */
.crf-agree__action {
  width: 100%;
  flex: none;
  display: flex;
  justify-content: center;
}

.crf-agree__cta {
  width: 100%;
  min-height: clamp(4rem, 5.2vh, 4.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 0;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: inherit;
  font-size: clamp(1.25rem, 1.35vw, 1.65rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: none;
  /* The reference tweens these in GSAP (hover .12s power2.out, release .25s
     power3.out). Expressed as transitions because the values and the feel are
     identical and a transition cannot desynchronise from a re-render. */
  transition:
    background-color 0.12s cubic-bezier(0.22, 0.61, 0.36, 1),
    scale 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.crf-agree__cta:hover:not(:disabled) {
  background-color: #3BDC8C;
  scale: 1.02;
}

/* `pointerdown` on a control over 3600px squared tweens to .96. */
.crf-agree__cta:active:not(:disabled) {
  scale: 0.96;
  transition-duration: 0.12s, 0.12s;
}

.crf-agree__cta:disabled {
  background: #F1F3F2;
  color: #A2AFA8;
  cursor: not-allowed;
  box-shadow: none;
}

.crf-agree__cta svg { flex: none; }

/* ── The completion state, which the reference has no drawing for ──────────
   It belongs to the panel above it, so it takes the panel's silhouette in the
   pale surface rather than inventing a third treatment. It is only ever on
   screen when the record is genuinely short. */
.crf-agree__more {
  width: 100%;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  background: #E9FFE1;
  color: #013F17;
  text-align: left;
}

.crf-agree__more-title {
  margin: 0 0 0.375rem;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #013F17;
}

.crf-agree__more-body {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #013F17;
}

.crf-agree__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.5rem;
}

/* Everything under the three fields: its own stack, so the age statement and
   the password block cannot run into each other. The first browser pass had
   the 18+ hint touching the password label with nothing between them. */
.crf-agree__block { margin-top: 1.5rem; }

.crf-agree__label {
  display: block;
  margin-bottom: 0.4375rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5B7562;
}

.crf-agree__input {
  width: 100%;
  min-height: 3.25rem;
  border: 0;
  border-bottom: 2px solid #A2AFA8;
  border-radius: 0;
  background: transparent;
  padding: 0.75rem 0.125rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: #013F17;
  transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.crf-agree__input:focus {
  border-bottom-color: #41ED98;
  outline: none;
}

.crf-agree__hint {
  margin: 0.4375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #013F17;
}

/* §28.4: one control, one column, and it is not ticked for anybody. */
.crf-agree__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6875rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.45;
  color: #013F17;
  cursor: pointer;
}

.crf-agree__check input {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  margin: 0;
  accent-color: #013F17;
  cursor: pointer;
}

.crf-agree__trouble {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: #C0392B;
}

.crf-agree__trouble--loose { margin-top: 0; }

.crf-agree__trouble a {
  color: #013F17;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* Where the primary action would be while the agreements are draft. A stated
   reason and not a disabled control — §31.4's refusal, rendered. */
.crf-agree__unpublished {
  width: 100%;
  margin: 0;
  padding: 1rem 1.5rem;
  border-left: 0.1875rem solid #41ED98;
  background: #F1F3F2;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #013F17;
  text-align: left;
}

.crf-agree__unpublished a {
  color: #013F17;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* ── @media (max-width:900px) — the row narrows ──────────────────────────── */
@media (max-width: 900px) {
  .crf-agree__row {
    width: min(100%, 42rem);
    max-width: 42rem;
  }
}

/* ── @media (min-width:901px) — the three-area grid and the two-up panel ─── */
@media (min-width: 901px) {
  .crf-agree__row {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "head" "body" "action";
    row-gap: clamp(1.75rem, 3vh, 2.6rem);
    column-gap: clamp(1.6rem, 2.6vh, 2.4rem);
    justify-content: center;
    min-height: 0;
    text-align: center;
  }

  .crf-agree__head {
    grid-area: head;
    max-width: 60rem;
  }

  .crf-agree__title {
    margin-bottom: clamp(0.9rem, 1.4vh, 1.25rem);
    font-size: clamp(2.8rem, 3.1vw, 3.7rem);
  }

  .crf-agree__lede {
    max-width: 42ch;
    line-height: 1.55;
  }

  .crf-agree__panel {
    grid-area: body;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
    padding: clamp(1.75rem, 2.5vw, 2.5rem);
    text-align: left;
  }

  /* The hairline is a `border-left` on the second promise, with 2rem beside
     it — not a rule between rows. */
  .crf-agree__promise + .crf-agree__promise {
    border-top: 0;
    border-left: 1px solid rgba(233, 255, 225, 0.2);
    padding-left: 2rem;
  }

  .crf-agree__promise-title {
    font-size: 1.1rem;
    line-height: 1.55;
  }

  .crf-agree__promise-body { line-height: 1.55; }

  .crf-agree__legal {
    grid-column: 1 / -1;
    line-height: 1.55;
  }

  .crf-agree__legal--primary {
    margin-top: 0.4rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(233, 255, 225, 0.2);
  }

  .crf-agree__tail { grid-area: action; }

  .crf-agree__action { width: min(100%, 42rem); }

  /* Three fields, one row. Two columns left a hole under the first, which
     reads as a missing field rather than as a layout. */
  .crf-agree__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Short landscape: the reference tightens rather than scrolls ─────────── */
@media (min-width: 901px) and (max-height: 720px) {
  .crf-agree__row { column-gap: clamp(1.15rem, 2vh, 1.65rem); }
  .crf-agree__cta { min-height: 4rem; }
}

/* ── @media (min-width:1500px) — only the stage gutter moves ─────────────── */
@media (min-width: 1500px) {
  .crf-agree__screen { padding-inline: clamp(4rem, 5vw, 7rem); }
}

/* ── @media (max-width:600px) — a smaller headline and tighter stage ─────── */
@media (max-width: 600px) {
  .crf-agree__screen {
    padding-top: 1.5rem;
    padding-bottom: 5rem;
  }
  .crf-agree__title { font-size: clamp(2.25rem, 9vw, 3rem); }
  .crf-agree__row { gap: clamp(1.4rem, 4vh, 2rem); }
  .crf-agree__input { border-bottom-width: 1px; }
}

/* The relay is `creatorMomentIn`; with motion off the end state is the only
   state, and both controls keep their colour change without the scale. */
@media (prefers-reduced-motion: reduce) {
  .crf-agree__cta:hover:not(:disabled),
  .crf-agree__cta:active:not(:disabled),
  .crf-agree__back:hover,
  .crf-agree__back:active { scale: 1; }
}
/* ^ That closing brace was MISSING, and had been since PHASE 46 shipped. An
   unclosed `@media` swallows the rest of the file, so PHASE 61's `.ff-password`
   and everything after it were parsed INSIDE `prefers-reduced-motion: reduce`
   and applied to nobody with motion on. Found by reading `document.styleSheets`
   rather than the source: the CSSOM stopped at 2698 rules and the last one was
   this block. `a11y.test.tsx`'s two stylesheet scans check comment balance and
   `var()` definitions and not brace balance, which is why it survived — a
   silently-invalid stylesheet has now shipped three times. */

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 61 — the Founder flow's last page: your password (2026-08-20)
   ══════════════════════════════════════════════════════════════════════════

   §10 took the password at a screen near the beginning of the flow. By product
   direction it is the LAST page now, and the account is created by submitting
   the §9 answers instead — §13's Stripe onboarding is keyed to a real user, so
   it could not wait. `backend/src/vetting/claim.ts` records the deviation.

   Conventions, and the reason for each:

   1. `.ff-password-` and not `.ff-pw-`. `.ff-` is PHASE 34's Founder flow and
      this belongs to it; the long form is because `.ff-p…` already has three
      neighbours (`.ff-pc-`, `.ff-prob-`, `.ff-panel`) and a two-letter prefix
      would be one edit from colliding with one of them.

   2. It reuses `.ff-build__title` for the headline rather than minting a size.
      Every stage-5 page in this flow uses that scale and this is the last of
      them; a bespoke rule here would be a rule written twice.

   3. Anything that STATES A RULE takes `--dark`, and only a caption takes
      `--moss`. `--moss` on white measures about 3.37:1, which is under AA, and
      the lede on this page is the sentence explaining that the account has no
      credential yet — Founder Flow Session E's finding, and it binds harder
      here than anywhere else in the flow. The product-wide `--moss` gap is
      recorded and is not this page's to close.
*/

.ff-password { display: flex; flex-direction: column; gap: var(--sp-24); max-width: 34rem; width: 100%; }

/* The one sentence that says what this account is until somebody sets a
   password. It states a fact about their account, so it is body ink. */
.ff-password__lede {
  margin: 0 0 var(--sp-24);
  color: var(--dark);
  max-width: var(--measure);
}

/* Appears only once somebody has typed. `min-height` so its arrival does not
   move the button underneath it — a control that shifts as you type is one
   people miss. */
.ff-password__short {
  margin: var(--sp-8) 0 0;
  min-height: 1.25rem;
  color: var(--moss);
  font-size: 0.875rem;
}

/* The one requirement on the page, and it decides whether the control works —
   so it is body ink rather than a caption. `--moss` measures ~3.37:1, and
   Founder Flow Session E's rule is that a sentence which changes what somebody
   TYPES is not a caption. Scoped, because re-toning `.field-hint` product-wide
   is its own change with its own screenshot pass. */
.ff-password .field-hint { color: var(--dark); }

.ff-password__refusal { margin-top: var(--sp-24); }

/* The button is `inline-flex` and a flex item in a column is stretched by the
   default `align-items: stretch` — the trap Sessions D, E and F each lost a
   pass to, and the Money console a fourth time. `flex-start` keeps it the
   width of its own label. */
.ff-password__nav { display: flex; justify-content: flex-start; }

@media (max-width: 600px) {
  /* At 320 the label is longer than the measure, so it takes the full width
     rather than clipping — a `.btn` is `overflow: hidden` because it hosts the
     fill sweep, and a clipped label is a missing one. */
  .ff-password__nav { display: block; }
  .ff-password__nav > .btn { width: 100%; }
}

/* ═══════════════════════════ PHASE 62 — YOUR STORY, rebuilt 2026-08-20 from
   the supplied reference (`Proovd Founder Flow v2.dc.html`, `[data-story]` /
   `kindWide`) and its screenshot.

   ── The layout model ──────────────────────────────────────────────────────
   Not responsive. Authored once on a fixed 2496x1542 stage and scaled to the
   viewport by `fitStages()`:

       let s = Math.min(innerWidth/2496, innerHeight/1542) * (pageScale || .78);

   No branch of that function names this screen, so it takes `pageScale` alone
   — exactly 0.4 at 1280x800, which is what the reference measures at.
   `StoryStep.tsx` sets the transform in a layout effect and on resize; the
   `0.37` below is the reference's own placeholder for the frame before that
   runs.

   Measured against the running prototype at 1280x800: scale 0.4, column
   720x477.5 at (272.5, 161.25), headline 47.1 tall on an 1800x118 box, field
   720x316 (1800x790), the row 60 tall (150) with `Say it instead` 264 wide
   (660) and `Next` 441.6 (1104), Back at (38.39, 731.61), the badge 66.55
   square at (1160.06, 695.06). Recording: the column rises to y 126.65, the
   control row is 254.4x105.2 at (505.3, 568.15), the waveform 717.6x41.6, and
   the field's ink and ground both turn brand.

   PHASE 25's conventions bind everywhere else in this file; this section is
   the same knowing exception PHASES 34 and 48-53 already are, and for the same
   reason — a supplied reference is the specification here, so its 2px radius,
   its #41ED98 and its 92px ship as written rather than as the nearest token.
   The owner ruling's 2px radius happens to agree.

   The project's global type rules DO reach in here — h1..h6 margin,
   line-height 1.18 and font-weight 900; p margin and max-width 65ch;
   button/textarea font: inherit, which inherits line-height 1.6 from body
   where the reference's page inherits the UA's normal; and img/svg max-width
   100% with height auto — so every one of them is overridden explicitly below
   rather than left to win.

   ── The one reference rule deliberately NOT reproduced ────────────────────
   The prototype's page carries html{scrollbar-gutter:stable}, which reserves
   15px down the right of every screen and therefore centres this lockup 7.5px
   left of the viewport's own centre. That is host chrome for a prototype whose
   other screens genuinely scroll, and PHASES 51-53 already recorded the
   decision not to adopt it: our own body has never had it, and adding it on
   one page would put that page off-centre against the six beside it.       */

/* `FlowPage`'s chrome is not drawn on this screen — but the reason is not that
   the reference has none. It has four controls, and they are drawn INSIDE the
   z-index 25 fixed layer below, where the reference puts them. Left in place
   they would sit under that layer and be unreachable, so both are hidden and
   both leave the tab order with it. */
.ff[data-flow-page='story'] .ff__top,
.ff[data-flow-page='story'] .ff__badge { display: none; }

/* The reference's `[data-story]`: position fixed, inset 0, overflow hidden.
   Nothing scrolls — the stage scales instead, which is why the composition is
   identical at every viewport and why this page can never reflow (§33.11.1). */
.ff-story {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
}

/* The read failed, so there is no composition to draw. It keeps the layer's
   ground and centres the panel; nothing here is the reference's, because the
   reference holds its record in memory and has no failure to render. */
.ff-story__failure {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
}

/* ── The chrome. Its clamp()s are the reference's own, and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-story__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-story__back:hover { color: #013F17; }
/* The reference has no focus treatment at all. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11) and it costs the composition nothing. */
.ff-story__back:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-story__back svg { width: 11px; height: 11px; flex: none; }

.ff-story__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-story__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-story__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-story__help:hover { background: #E9FFE1; }
.ff-story__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* The message bell. Its geometry is the reference's; its number is not, and
   `StoryStep`'s header says what the difference is. It does not shake. */
.ff-story__mailbtn {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  padding: 0;
  border: none;
  background: none;
  font-size: 13.3333px;
  line-height: normal;
  cursor: pointer;
  outline: none;
}
.ff-story__mailbtn:focus-visible { outline: 2px solid #013F17; outline-offset: 4px; }
.ff-story__mail {
  position: relative;
  width: clamp(58px, 5.2vw, 78px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  box-sizing: border-box;
}
.ff-story__mail img { width: 68%; height: auto; max-width: none; display: block; }
.ff-story__mailcount {
  position: absolute;
  left: -10%;
  top: -16%;
  min-width: 31%;
  height: 31%;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  background: #FAFAFA;
  box-sizing: border-box;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1;
  font-weight: 700;
  color: #41ED98;
}

/* ── The stage, and the 1800px column inside it ──────────────────────────── */

.ff-story__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  /* The reference's body sets neither of these and ours sets both, so the
     stage restates the UA values it is authored against. */
  font-size: 16px;
  line-height: normal;
  color: #013F17;
}
.ff-story__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1800px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ff-story__head {
  margin: 0;
  width: 100%;
  font-size: 92px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: #013F17;
  text-align: center;
}

.ff-story__panel {
  margin-top: 100px;
  position: relative;
  width: 100%;
}

.ff-story__field {
  display: block;
  width: 100%;
  height: 790px;
  max-width: none;
  resize: none;
  box-sizing: border-box;
  background: transparent;
  border: 3px solid #41ED98;
  border-radius: 2px;
  outline: none;
  padding: 96px 108px 210px;
  font-family: 'Satoshi', sans-serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: #013F17;
  /* [data-slim-scroll] in the reference's own style block: the brand
     scrollbar, which cannot be written inline and so is not in the markup. */
  scrollbar-width: thin;
  scrollbar-color: #41ED98 transparent;
}
/* The reference's placeholder ink, measured at rgb(162,175,168). Without it
   this box takes the UA's own #757575, which is a different grey and a
   different weight of voice on the one field the whole screen is about. */
.ff-story__field::placeholder { color: #A2AFA8; opacity: 1; }
.ff-story__field::-webkit-scrollbar { width: 6px; }
.ff-story__field::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.ff-story__field::-webkit-scrollbar-thumb {
  background: #41ED98;
  border-radius: 99px;
  min-height: 34px;
  max-height: 56px;
}
.ff-story__field::-webkit-scrollbar-thumb:hover { background: #3BDC8C; }
/* cTaBg / cTaFg — while a recording is running the field is the recording. */
.ff-story__panel[data-rec='on'] .ff-story__field {
  background: rgba(65, 237, 152, 0.06);
  color: #41ED98;
}

/* ── The recording overlay, sitting inside the field's own border ────────── */

.ff-story__overlay {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  pointer-events: none;
}
/* The words run under the waveform rather than stopping above it, so the
   gradient is what keeps the last line readable. */
.ff-story__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  background: linear-gradient(
    180deg,
    rgba(250, 250, 250, 0) 0%,
    rgba(250, 250, 250, 0.18) 40%,
    rgba(250, 250, 250, 0.5) 68%,
    rgba(250, 250, 250, 0.86) 88%,
    #FAFAFA 100%
  );
}
.ff-story__meter {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 0 22px 12px;
}
.ff-story__level {
  font-size: 26px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 0.16em;
  color: #41ED98;
}
.ff-story__wave {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 9px;
  height: 104px;
  padding: 0 8px;
  overflow: hidden;
}
.ff-story__bar {
  width: 15px;
  flex: none;
  background: #41ED98;
  /* recIntro scales these up from nothing. Without this they would grow out
     from their own middles, which reads as a row of dashes appearing rather
     than as a level arriving. */
  transform-origin: bottom;
}

/* ── The idle row: the microphone, and the one control that moves on ─────── */

.ff-story__row {
  margin-top: 36px;
  width: 100%;
  display: flex;
  gap: 36px;
}
.ff-story__say {
  width: 660px;
  height: 150px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  border: 3px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-size: 56px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-story__say:hover { transform: scale(1.03); }
.ff-story__say:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }
.ff-story__say:disabled { cursor: default; transform: none; }
.ff-story__say svg { flex: none; height: 64px; width: auto; max-width: none; }
html.no-motion .ff-story__say { transition: none; }

.ff-story__next {
  flex: 1 1 auto;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 70px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-story__next:hover { background: #3BDC8C; }
.ff-story__next:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }

/* ── The recording row ───────────────────────────────────────────────────── */

.ff-story__rec {
  margin-top: 96px;
  display: flex;
  align-items: flex-start;
  gap: 44px;
}
.ff-story__ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ff-story__ctl-label {
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
  color: #41ED98;
}
.ff-story__ghost {
  width: 176px;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #41ED98;
  border-radius: 2px;
  background: #013F17;
  color: #41ED98;
  cursor: pointer;
  outline: none;
}
/* Retry's glyph is white where Pause's is brand — the reference's own pair. */
.ff-story__ghost.is-retry { color: #FAFAFA; }
.ff-story__ghost:hover { background: #012D10; }
.ff-story__ghost:focus-visible { outline: 6px solid #41ED98; outline-offset: 6px; }
.ff-story__ghost svg { flex: none; width: 82px; height: 82px; max-width: none; }

.ff-story__done {
  width: 196px;
  height: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  cursor: pointer;
  outline: none;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-story__done:hover { background: #3BDC8C; }
.ff-story__done:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }
.ff-story__done svg { flex: none; width: 96px; height: auto; max-width: none; }

/* ── Everything the reference does not draw ──────────────────────────────────
   Absolutely positioned below the column, so none of it can move the
   composition by a pixel. It scales with the stage like everything else on the
   page — the reference's own model — so the sizes here are stage units: at this
   page's own 0.4 they read at roughly 13-14px, and the approval's target is
   sized so it lands at a real 44px (§33.11).                               */

.ff-story__sub {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.ff-story__sub p { margin: 0; max-width: 1500px; }


.ff-story__note {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.45;
  color: #013F17;
}

/* §9's autosave vocabulary. Announced always, and visible only when it is a
   failure or when a recording is being turned into words — the two states the
   reference has no need of and this screen does (§1.1). */
.ff-story__status {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  color: #013F17;
}
.ff-story__status[data-state='failed'],
.ff-story__status[data-state='working'] {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}
.ff-story__alert {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
  color: #013F17;
}

/* The reference's own one media query for this screen. Everything else is the
   stage, and the stage scales rather than reflowing. */
@media (max-width: 600px) {
  .ff-story__back { bottom: 92px; padding: 8px 14px; }
}

/* ══════════════════════ PHASE 63 — screen 15, Last look, rebuilt 1:1 from
   the reference (Founder Flow v2, `[data-lastlook]` / `kindWide`), 2026-08-20.

   Drawn to the supplied reference (`Proovd Founder Flow v2.dc.html`) and
   measured against it in a real browser at 1320x900, on the terms every other
   1:1 screen of this flow ships under: the reference outranks the design
   system HERE, and nowhere else.

   ── This is not `.ff-look` ────────────────────────────────────────────────
   `.ff-look` was the Session D surface — a token-scale card list at the
   product's own sizes. It is gone with its component. `.ff-ll` is a different
   composition over the same record, so it is a different prefix, the way
   `.ff-pc` is not `.ff-prob`.

   ── The layout model is the reference's, literally ────────────────────────
   `position:fixed;inset:0;overflow:hidden` around a fixed 2496x1542 stage,
   scaled to the viewport by `fitStages()`:

       let s = Math.min(innerWidth/2496, innerHeight/1542) * (pageScale || .78);
       if (!hero && c === 'vetting' && vReviewing) s *= .9;

   The `.9` is this screen's own branch, with the reference's own reason:
   "Last look carries the whole answer grid, so it sits a notch under the other
   pages." The component owns the scale and writes the whole transform on mount
   and on resize; the `scale(0.3713)` below is what renders for the one frame
   before the layout effect runs, and is the value measured at 1320x900.
   Nothing here reflows — the stage scales instead, which is why the
   composition is identical at every viewport (§33.11.1).

   `isClaimPhone()` returns `false` in the reference — "one composition
   everywhere: the phone posture stays off" — so its `kindPhone` branch is dead
   code and this composition is what every viewport gets, exactly as there.

   ── The column measures itself ────────────────────────────────────────────
   `width: fit-content`, and its first child is a hidden `nowrap` span at
   112px/700. That span IS the width: measured in the reference, the column and
   the span both read 1521.34px and the grid inside is 100% of it. The
   mechanism is reproduced rather than the number, because a literal 1521.34
   would be right for one font cut and quietly wrong for the next.

   ── The two suspended conventions, as on screens 1–8 ──────────────────────
     - HEX LITERALS, not tokens. Six of the reference's colours here have exact
       or near tokens; mixing literal and token would leave half the screen able
       to drift with a token change and half not.
     - RADIUS 2px, literal. It is what `var(--radius)` resolves to under the
       owner ruling, so the two agree today; the literal is here for the same
       reason the colours are.

   ── What the project's globals do to this screen, overridden explicitly ───
   `h1..h6 { margin; line-height:1.18; font-weight:900 }` reaches the headline,
   `p { margin; max-width: var(--measure) }` reaches the foot line, `button`'s
   own reset reaches the cards and the CTA, and `body`'s 18px / line-height 1.6
   reaches the whole stage — the reference's own body sets neither, so the stage
   resets both.
   ═════════════════════════════════════════════════════════════════════════ */

/* `FlowPage`'s chrome is not drawn on this screen, and the reason is not that
   the reference has none. It has a wordmark and a HELP, and it draws them
   INSIDE the `z-index: 25` fixed layer below. Left in place they would sit
   under that layer and be unreachable. There is no message badge on this
   screen at all: the reference draws none. */
.ff[data-flow-page='last-look'] .ff__top,
.ff[data-flow-page='last-look'] .ff__badge { display: none; }

/* The reference's `[data-lastlook]`. Nothing scrolls. */
.ff-ll {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
  color: #013F17;
  /* The reference’s own body sets a family and nothing else, so its whole
     layer inherits 16px / normal. The project’s sets 18px / 1.6, which reaches
     the chrome and the sheets. */
  font-size: 16px;
  line-height: normal;
}

/* ── The chrome. Its `clamp()`s are the reference's own, and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-ll__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-ll__back:hover { color: #013F17; }
/* The reference has no focus treatment at all. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11) and it costs the composition nothing. */
.ff-ll__back:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-ll__back svg { width: 11px; height: 11px; flex: none; }

.ff-ll__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-ll__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-ll__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-ll__help:hover { background: #E9FFE1; }
.ff-ll__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* ── The stage, and the column inside it ─────────────────────────────────── */

.ff-ll__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.3713);
  transform-origin: center center;
  color: #013F17;
  font-size: 16px;
  line-height: normal;
}

/* `translate(-50%, calc(-50% + 70px))` — its own offset, and the column is
   CENTRED on the stage rather than pinned to it. */
.ff-ll__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: fit-content;
  transform: translate(-50%, calc(-50% + 70px));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The measurement. Zero-height, clipped, and hidden — it renders nothing and
   is `aria-hidden` in the markup, so it is a width and never content. */
.ff-ll__measure {
  height: 0;
  overflow: hidden;
  font-size: 112px;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  visibility: hidden;
}

.ff-ll__head {
  margin: 0;
  font-size: 112px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #013F17;
}

.ff-ll__label {
  margin-top: 70px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7FD9A4;
}

.ff-ll__fee {
  margin-top: 22px;
  font-size: 240px;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: #013F17;
}

.ff-ll__sub {
  margin-top: 34px;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: #013F17;
}

.ff-ll__hint {
  margin-top: 96px;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: #A2AFA8;
}

/* Eight cards, four to a row. `1fr` columns over a column whose width the
   measuring span fixes, so every card is the same size whatever its label. */
.ff-ll__grid {
  margin-top: 88px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

.ff-ll__card {
  height: 184px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0;
  border: 3px solid #A2AFA8;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  text-align: center;
  /* The reference's own curve, and its own 0.25s. */
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}
.ff-ll__card:hover { transform: scale(1.06); }
.ff-ll__card:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }
/* `filled` — the reference's three paired values, together so they cannot be
   set apart. */
.ff-ll__card.is-added {
  border-color: #41ED98;
  background: rgba(65, 237, 152, 0.06);
}
.ff-ll__card.is-added .ff-ll__card-tag { color: #41ED98; }
/* The three §9 answers. Not a button, so no hover and no pointer: the box is
   the reference's, and the absence of the affordance is what says the card
   does not open. */
.ff-ll__card.is-locked {
  border-color: #41ED98;
  background: rgba(65, 237, 152, 0.06);
  cursor: default;
}
.ff-ll__card.is-locked .ff-ll__card-tag { color: #41ED98; }

.ff-ll__card-title {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #013F17;
}
.ff-ll__card-tag {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: normal;
  text-transform: uppercase;
  color: #7FA98D;
}

.ff-ll__cta {
  margin-top: 150px;
  width: 100%;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 70px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  /* The owner ruling's inset highlight, at the reference's own values. */
  box-shadow: 0px 3px 12px rgba(255, 255, 255, 0.42) inset;
  outline: none;
}
.ff-ll__cta:hover { background: #3BDC8C; }
.ff-ll__cta:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }

/* ── Chrome, not composition ─────────────────────────────────────────────── */

/* The return contract and §12's high-effort line. Bottom-centre, at the
   furniture scale, between the Back control and the right edge — screen 1's
   own legal-line treatment, which is why this is inside the reference's
   vocabulary rather than an addition to the stage. Deep green rather than a
   legal grey: it states rules a Founder acts on, and `#B4B4B5` on `#FAFAFA` is
   2.3:1 (Founder Flow Session E's rule — a caption may be quiet, a sentence
   that changes what somebody does may not). */
.ff-ll__foot {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vw, 40px);
  z-index: 5;
  transform: translateX(-50%);
  margin: 0;
  width: min(62vw, 900px);
  max-width: none;
  text-align: center;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.006em;
  text-wrap: pretty;
}

/* The two states the reference never has, because it holds its record in
   memory. Centred in the same field the stage occupies.

   `.wrap` is a VIEWPORT width (`min(90vw, 1600px)`), so `SurfaceLoading`'s own
   `Section` would compute wider than this box and spill — PHASE 38's finding,
   in its general form. The section's vertical rhythm goes with it: this box is
   already centred, so padding above and below only moves it off centre. */
.ff-ll__state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 34rem);
  margin: 0;
  max-width: none;
  color: #013F17;
}
.ff-ll__state .wrap { width: 100%; }
.ff-ll__state .section { padding-block: 0; }
.ff-ll__state .measure { max-width: none; }

/* ══════════════════════════════════════════ PHASE 63 — RESPONSIVE ══
   One media query, and it is not a reflow: the stage is one composition at
   every width (`isClaimPhone()` is `false` in the reference). What changes is
   the furniture, which was never on the stage — at phone width the foot line
   would sit under the Back control, so it clears it. */
@media (max-width: 600px) {
  .ff-ll__foot {
    width: calc(100vw - 40px);
    bottom: calc(clamp(20px, 3vw, 40px) + 34px);
  }
}

/* ═════════════════ FOUNDER FLOW V2 — BRAND LOGO (`[data-brandlogo]`) ═══ */
.ff[data-flow-page='branding'] .ff__top,
.ff[data-flow-page='branding'] .ff__badge { display: none; }
.ff[data-flow-page='branding'] .ff__stage { padding: 0; }
.ff[data-flow-page='branding'] .ff__body { display: block; }

.ff-brandlogo {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 25;
  background: #FAFAFA;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  line-height: normal;
}
.ff-brandlogo button { font-family: 'Satoshi', sans-serif; }
.ff-brandlogo__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
  z-index: 5;
}
.ff-brandlogo__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  display: block;
}
.ff-brandlogo__help {
  min-height: 40px;
  padding: 10px 22px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-brandlogo__help:hover { background: #E9FFE1; }
.ff-brandlogo__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 12px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-weight: 900;
  font-size: clamp(10px, .8vw, 12px);
  line-height: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-brandlogo__back:hover { color: #013F17; }
.ff-brandlogo__mailbtn {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ff-brandlogo__mail {
  position: relative;
  width: clamp(58px, 5.2vw, 78px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  box-sizing: border-box;
}
.ff-brandlogo__mail img { width: 68%; height: auto; display: block; }
.ff-brandlogo__mailcount {
  position: absolute;
  left: -10%;
  top: -16%;
  width: 31%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  background: #FAFAFA;
  box-sizing: border-box;
  color: #41ED98;
  font-size: clamp(10px, .9vw, 13px);
  font-weight: 700;
}
.ff-brandlogo__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.37);
  transform-origin: center center;
}
.ff-brandlogo__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: fit-content;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ff-brandlogo__measure {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  white-space: nowrap;
  font-size: 112px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.ff-brandlogo__pill {
  padding: 26px 46px;
  background: #FBFFD4;
  color: #013F17;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ff-brandlogo__head {
  margin: 72px 0 0;
  color: #013F17;
  font-size: 136px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.ff-brandlogo__panel { margin-top: 110px; width: 100%; }
.ff-brandlogo__fileinput {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ff-brandlogo__drop {
  width: 100%;
  height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  border: 5px solid transparent;
  border-radius: 2px;
  background-image:
    repeating-linear-gradient(90deg, #8FCBA3 0 15px, transparent 15px 30px),
    repeating-linear-gradient(90deg, #8FCBA3 0 15px, transparent 15px 30px),
    repeating-linear-gradient(0deg, #8FCBA3 0 15px, transparent 15px 30px),
    repeating-linear-gradient(0deg, #8FCBA3 0 15px, transparent 15px 30px),
    linear-gradient(#E9FFE1, #E9FFE1);
  background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%, 100% 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0, 0 0;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box, border-box, border-box, border-box, padding-box;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.ff-brandlogo__drop:hover { transform: scale(1.012); }
.ff-brandlogo__upload {
  color: #8FCBA3;
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.ff-brandlogo__dropcopy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ff-brandlogo__dropcopy > :first-child {
  color: #8FCBA3;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ff-brandlogo__dropcopy > :last-child {
  color: #A2AFA8;
  font-size: 30px;
  font-weight: 500;
}
.ff-brandlogo__list {
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
}
.ff-brandlogo__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 36px;
  background: #DEF6FF;
  color: #013F17;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ff-brandlogo__file > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-brandlogo__file > .ff-brandlogo__fileactions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  overflow: visible;
}
.ff-brandlogo__filestate { font-size: 28px; font-weight: 600; }
.ff-brandlogo__file button {
  flex: none;
  padding: 0 8px;
  border: 0;
  background: none;
  color: #013F17;
  font-size: 38px;
  font-weight: 700;
  cursor: pointer;
}
.ff-brandlogo__file button:hover { color: #41ED98; }
.ff-brandlogo__cta {
  margin-top: 130px;
  width: 100%;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-size: 70px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -.02em;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(255, 255, 255, .42) inset;
}
.ff-brandlogo__cta:hover { background: #3BDC8C; }
.ff-brandlogo__help:focus-visible,
.ff-brandlogo__back:focus-visible,
.ff-brandlogo__mailbtn:focus-visible,
.ff-brandlogo__drop:focus-visible,
.ff-brandlogo__file button:focus-visible,
.ff-brandlogo__cta:focus-visible {
  outline: 6px solid #013F17;
  outline-offset: 6px;
}
.ff-brandlogo__failure {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 174px;
  margin: 0;
  color: #013F17;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}
.ff-brandlogo__state {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 34rem);
  transform: translate(-50%, -50%);
}
.ff-brandlogo__state .wrap { width: 100%; }
.ff-brandlogo__state .section { padding-block: 0; }
@media (max-width: 600px) {
  .ff-brandlogo__back { bottom: 92px; padding: 8px 14px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   PHASE 64 — the Founder flow, screen 10: we want to see your product
   (2026-08-20)

   REBUILT FROM SCRATCH against the supplied reference
   (`Proovd Founder Flow v2.dc.html`, `[data-visuals]` / `kindWide`) and its
   screenshot. `VisualsStep.tsx`'s header is the reasoning; this is the
   composition. Every number is the reference's own, on its own 2496x1542
   stage — `VisualsStep` owns the scale and writes the whole transform on mount
   and on resize; the `scale(0.37)` below is the reference's own placeholder and
   is what renders for the one frame before the layout effect runs. Nothing here
   reflows: the stage scales, which is why the composition is identical at every
   viewport (§33.11.1).

   `isClaimPhone()` returns `false` in the reference — "one composition
   everywhere: the phone posture stays off" — so its `kindPhone` branch is dead
   code and this composition is what every viewport gets, exactly as there.

   ── The column has no width of its own ────────────────────────────────────
   `width: fit-content` over `align-items: flex-start`, and what fits it is this
   screen's own 112px headline: 1491px at Satoshi's metrics, measured in Chrome
   against the reference. The SOCIALS screen borrows the same sentence hidden
   (`.ff-soc__measure`) so the two share one column; here it is the real
   heading, so nothing is hidden and nothing is hardcoded — the number is a
   property of the face, not of the layout.

   ── The two suspended conventions, as on screens 1–15 ─────────────────────
     - HEX LITERALS, not tokens. `#41ED98`, `#013F17`, `#FAFAFA`, `#E9FFE1`,
       `#8FCBA3`, `#A2AFA8`, `#FBFFD4`, `#DEF6FF`, `#defafc`, `#012D10` and
       `#3BDC8C` are the reference's own; mixing literal and token would leave
       half the screen able to drift with a token change and half not.
     - RADIUS 2px, literal. It is what `var(--radius)` resolves to under the
       owner ruling, so the two agree today; the literal is here for the same
       reason the colours are.

   ── The dashed rules are gradients, not `border-style: dashed` ────────────
   Both boxes are the reference's own four-layer repeating gradient over a
   transparent border — 15px on / 15px off at 5px for the drop zone, 43/43 at
   10px for the empty list. A `dashed` border would round its own dash length to
   fit each edge, so the two boxes would disagree with each other and with the
   reference at every viewport; a gradient dash is exact and scales with the
   stage. The drop zone's fill is that stack's last layer
   (`linear-gradient(#E9FFE1,#E9FFE1)`, clipped to `padding-box`), which is why
   `background-color` is never set on it.

   ── What the project's globals do to this screen, overridden explicitly ───
   `h1..h6 { margin; line-height:1.18; font-weight:900 }` reaches the headline,
   `p { margin; max-width: var(--measure) }` reaches the two added lines, `ul`
   carries a list style and padding, `input` inherits the design system's own
   field treatment, and `body`'s 18px / line-height 1.6 reaches the whole stage
   — the reference's own body sets neither, so the stage resets both.

   ── The block the reference does not draw ─────────────────────────────────
   `.ff-vis__filemeta` carries §12's state and §28.4's approval INSIDE the
   reference's own `#DEF6FF` block. Not one reference box moves for it.
   ═════════════════════════════════════════════════════════════════════════ */

/* `FlowPage`'s chrome is not drawn on this screen — and the reason is not that
   the reference has none. It has a wordmark, a HELP and a message bell, and it
   draws all three INSIDE the `z-index: 25` fixed layer below. Left in place
   they would sit under that layer and be unreachable, so both are hidden and
   both leave the tab order with it. */
.ff[data-flow-page='visuals'] .ff__top,
.ff[data-flow-page='visuals'] .ff__badge { display: none; }

/* The reference's `[data-visuals]`. Nothing scrolls. */
.ff-vis {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
}

/* The read failed, so there is no composition to draw. It keeps the layer's
   ground and centres the panel; nothing here is the reference's, because the
   reference holds its record in memory and has no failure to render. */
.ff-vis__failure {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
}

/* ── The chrome. Its clamps are the reference's own, and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-vis__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-vis__back:hover { color: #013F17; }
/* The reference has no focus treatment at all. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11) and it costs the composition nothing. */
.ff-vis__back:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-vis__back svg { width: 11px; height: 11px; flex: none; }

.ff-vis__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-vis__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-vis__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-vis__help:hover { background: #E9FFE1; }
.ff-vis__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* The message bell. Its geometry is the reference's; its number is not, and
   `VisualsStep`'s header says what the difference is. It does not shake. */
.ff-vis__mailbtn {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  padding: 0;
  border: none;
  background: none;
  font-size: 13.3333px;
  line-height: normal;
  cursor: pointer;
  outline: none;
}
.ff-vis__mailbtn:focus-visible { outline: 2px solid #013F17; outline-offset: 4px; }
.ff-vis__mail {
  position: relative;
  width: clamp(58px, 5.2vw, 78px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  box-sizing: border-box;
}
.ff-vis__mail img { width: 68%; height: auto; max-width: none; display: block; }
.ff-vis__mailcount {
  position: absolute;
  left: -10%;
  top: -16%;
  min-width: 31%;
  height: 31%;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  background: #FAFAFA;
  box-sizing: border-box;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1;
  font-weight: 700;
  color: #41ED98;
}

/* ── The stage, and the fit-content column inside it ─────────────────────── */

.ff-vis__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  /* See the header: the reference's body sets neither, and this file's does. */
  font-size: 16px;
  line-height: normal;
  color: #013F17;
}

.ff-vis__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: fit-content;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  /* The reference's own, and the reason the pill needs align-self. */
  align-items: flex-start;
}

.ff-vis__pill {
  align-self: center;
  padding: 26px 46px;
  background: #FBFFD4;
  font-size: 44px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
}

.ff-vis__head {
  margin: 72px 0 0;
  font-size: 112px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: #013F17;
  white-space: nowrap;
}

.ff-vis__panel {
  margin-top: 120px;
  width: 100%;
  display: grid;
  grid-template-columns: 860px 1fr;
  gap: 80px;
  align-items: stretch;
}

.ff-vis__left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ── The drop zone ───────────────────────────────────────────────────────── */

/* Focusable, and off-screen rather than display:none — a hidden input is not in
   the tab order at all, and this control's whole keyboard path is the real file
   picker (§28.5). */
.ff-vis__fileinput {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ff-vis__drop {
  width: 100%;
  height: 500px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  /* The reference's own — it is a `<button>` there, so this is the UA's
     padding, measured rather than assumed. The zone's copy is centred and the
     box is 860px wide, so it governs nothing except the one state whose
     sentence is long, and `.ff-vis__droptypes` has its own measure for that. */
  padding: 1px 6px;
  border-radius: 2px;
  border: 5px solid transparent;
  background-image:
    repeating-linear-gradient(90deg, #8FCBA3 0 15px, transparent 15px 30px),
    repeating-linear-gradient(90deg, #8FCBA3 0 15px, transparent 15px 30px),
    repeating-linear-gradient(0deg, #8FCBA3 0 15px, transparent 15px 30px),
    repeating-linear-gradient(0deg, #8FCBA3 0 15px, transparent 15px 30px),
    linear-gradient(#E9FFE1, #E9FFE1);
  background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%, 100% 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0, 0 0;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box, border-box, border-box, border-box, padding-box;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  text-align: center;
  /* The reference's own hover, on its own curve. */
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-vis__drop:hover { transform: scale(1.015); }
.ff-vis__fileinput:focus-visible + .ff-vis__drop {
  outline: 3px solid #013F17;
  outline-offset: 4px;
}
/* Unavailable rather than disabled-looking: the box is the reference's and the
   words inside it are the reason (§1.4). There is nothing to press, so it does
   not offer a pointer. */
.ff-vis__drop.is-off { cursor: default; }
.ff-vis__drop.is-off:hover { transform: none; }
.ff-vis__drop:disabled { opacity: 1; }

.ff-vis__drop svg { width: 126px; height: 126px; flex: none; display: block; }

/* `line-height: normal` on both, and it is not a shortcut: the reference sets
   none, so these two lines are 59px and 40px at Satoshi's own metrics. A 1.2
   here made the label 6px shorter and lifted the arrow above it by 3px on the
   stage — which is what a measured comparison catches and a screenshot does
   not. This file's `body` sets 1.6, so `normal` has to be said. */
.ff-vis__droplabel {
  font-size: 44px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #8FCBA3;
}
.ff-vis__droptypes {
  max-width: 700px;
  font-size: 30px;
  font-weight: 500;
  line-height: normal;
  color: #A2AFA8;
}

/* ── The link row ────────────────────────────────────────────────────────── */

.ff-vis__linkrow {
  display: flex;
  gap: 26px;
}

.ff-vis__link {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 112px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 32px;
  background: #FAFAFA;
  border: 4px solid #41ED98;
  border-radius: 2px;
  outline: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 38px;
  font-weight: 500;
  line-height: normal;
  color: #013F17;
}
/* The reference's own rule, and it is a global there:
   input::placeholder,textarea::placeholder{color:#A2AFA8;opacity:1;} */
.ff-vis__link::placeholder { color: #A2AFA8; opacity: 1; }
.ff-vis__link:focus,
.ff-vis__link:focus-visible {
  border-color: #41ED98;
  outline: 2px solid #013F17;
  outline-offset: 3px;
}

.ff-vis__add {
  flex: none;
  width: 290px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: none;
  border-radius: 2px;
  background: #013F17;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  /* bind()'s hover pair — M.dur.instant in, M.dur.quick out — and its
     data-press scale, which is .94 held while the pointer is down and .25s
     back. GSAP owns everything React state drives on this screen
     (stageRelayIn, socialNudge, socialAddPop); these two are pure CSS states
     with no state behind them, which is how every other reference rebuild in
     this flow carries a hover. */
  transition: background 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-vis__add:hover { background: #012D10; }
.ff-vis__add:active { transform: scale(0.94); transition-duration: 0.12s; }
.ff-vis__add:focus-visible { outline: 3px solid #013F17; outline-offset: 4px; }
.ff-vis__add:disabled { cursor: wait; opacity: 0.72; }

/* ── The right-hand column: the empty rule, then the list ────────────────── */

.ff-vis__empty {
  height: 100%;
  border-radius: 2px;
  border: 10px solid transparent;
  box-sizing: border-box;
  background-image:
    repeating-linear-gradient(90deg, #defafc 0 43px, transparent 43px 86px),
    repeating-linear-gradient(90deg, #defafc 0 43px, transparent 43px 86px),
    repeating-linear-gradient(0deg, #defafc 0 43px, transparent 43px 86px),
    repeating-linear-gradient(0deg, #defafc 0 43px, transparent 43px 86px);
  background-size: 100% 10px, 100% 10px, 10px 100%, 10px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-origin: border-box;
}

.ff-vis__list {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.ff-vis__file {
  padding: 30px 36px;
  background: #DEF6FF;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ff-vis__filetop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ff-vis__filename {
  min-width: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #013F17;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-vis__savedlink { text-decoration: underline; text-underline-offset: 4px; }
.ff-vis__savedlink:hover { color: #08783C; }
.ff-vis__savedlink:focus-visible { outline: 3px solid #013F17; outline-offset: 3px; }
.ff-vis__filex {
  flex: none;
  padding: 0 8px;
  border: none;
  background: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  color: #013F17;
  cursor: pointer;
  outline: none;
}
.ff-vis__filex:hover { color: #41ED98; }
.ff-vis__filex:focus-visible { outline: 3px solid #013F17; outline-offset: 3px; }

/* Upload progress or rejection, inside the reference's own block. */
.ff-vis__filemeta { display: flex; }
.ff-vis__approval {
  align-items: center;
  gap: 14px;
  font-size: 28px;
  font-weight: 600;
  cursor: pointer;
}
.ff-vis__approval input {
  width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  accent-color: #013F17;
}
.ff-vis__filenote {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  /* A sentence that states a rule takes the dark ink; #A2AFA8 is a caption tone
     and this decides whether a file counts. */
  color: #013F17;
}
/* ── The CTA, and the two lines the reference does not draw ──────────────── */

.ff-vis__cta {
  margin-top: 130px;
  width: 100%;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 70px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  box-shadow: 0px 3px 12px rgba(255, 255, 255, 0.42) inset;
  transition: background 0.2s ease;
}
.ff-vis__cta:hover { background: #3BDC8C; }
.ff-vis__cta:focus-visible { outline: 3px solid #013F17; outline-offset: 4px; }

/* Inside the 130px gap the CTA's own margin already leaves — so any failure
   sits between the panel and the button without moving either. */
.ff-vis__failline {
  position: absolute;
  left: 0;
  top: calc(100% - 165px - 130px + 10px);
  margin: 0;
  width: 1491px;
  max-width: none;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.28;
  color: #013F17;
}
.ff-vis__failline {
  top: calc(100% - 165px - 130px + 74px);
  color: #B3261E;
}

/* Announced, never drawn: it would otherwise be a second copy of the note. */
.ff-vis__live { position: absolute; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 65 — the Founder flow, screen 11: more about your brand
   (2026-08-20)

   BUILT FROM SCRATCH against the supplied reference
   (`Proovd Founder Flow v2.dc.html`, `[data-brand]` / `kindWide`) and its
   screenshot, and inserted between the branding screen and the interview.
   `ColorStep.tsx`'s header is the reasoning; this is the composition.

   Every number below is the reference's own, on its own 2496x1542 stage —
   `ColorStep` owns the scale and writes the whole transform on mount and on
   resize; the `scale(0.37)` here is the reference's own placeholder and is what
   renders for the one frame before the layout effect runs. Nothing reflows: the
   stage scales, which is why the composition is identical at every viewport
   (§33.11.1). `isClaimPhone()` returns `false` in the reference — "one
   composition everywhere: the phone posture stays off" — so its `kindPhone`
   branch is dead code there and this is what every viewport gets.

   ── The column is the VISUALS headline wide, and that is on purpose ───────
   `width: fit-content` over a column whose widest child is a hidden 112px span
   reading `We want to see your product...` — 1491px at Satoshi's metrics. This
   screen's own 136px headline is narrower, so without that span the panel and
   the CTA would be a different width here than on the screens either side. The
   number is a property of the face, so nothing is hardcoded except the two
   places that have to name it (`__note`, `__status`) and they name the same
   1491 `.ff-vis` already does.

   Unlike the visuals screen this column is `align-items: center` — the
   reference's own — so the pill needs no `align-self` and the nowrap headline
   centres over the panel.

   ── The two suspended conventions, as on screens 1–15 ─────────────────────
     - HEX LITERALS, not tokens. `#41ED98`, `#013F17`, `#FAFAFA`, `#E9FFE1`,
       `#8FCBA3`, `#A2AFA8`, `#FBFFD4`, `#7FD9A4`, `#012D10` and `#3BDC8C` are
       the reference's own; mixing literal and token would leave half the screen
       able to drift with a token change and half not.
     - RADIUS 2px, literal, and 0 on everything the reference leaves square —
       which here is everything except the CTA. It is what `var(--radius)`
       resolves to under the owner ruling, so the two agree today; the literal
       is here for the same reason the colours are.

   ── The empty slot's dash is a gradient, not `border-style: dashed` ───────
   The reference's own four-layer repeating gradient over a transparent border:
   18px on / 28px off at 4px, one layer per edge. A `dashed` border rounds its
   dash length to fit each edge, so three slots side by side would disagree with
   each other and with the reference at every viewport; a gradient dash is exact
   and scales with the stage. Same decision `.ff-vis` records for its drop zone.

   ── What the project's globals do to this screen, overridden explicitly ───
   `h1..h6 { margin; line-height:1.18; font-weight:900 }` reaches the headline,
   `p { margin; max-width: var(--measure) }` reaches the two added lines, `ul`
   carries a list style and padding, `input` inherits the design system's own
   field treatment, `img` carries `max-width:100%`, and `body`'s 18px /
   line-height 1.6 reaches the whole stage — the reference's own body sets
   neither, so the stage resets both.

   ── The two blocks the reference does not draw ────────────────────────────
   `.ff-col__note` (what the picker is for, and the full-slots sentence) and
   `.ff-col__status` (§9's autosave vocabulary — this screen writes a record and
   the reference holds its own in memory). Both are ABSOLUTELY positioned inside
   the 130px gap the composition already leaves above the CTA, so not one
   reference box moves for either.
   ═══════════════════════════════════════════════════════════════════════════ */

/* `FlowPage`'s chrome is not drawn on this screen — and the reason is not that
   the reference has none. It has a wordmark, a HELP and a message bell, and it
   draws all three INSIDE the `z-index: 25` fixed layer below. Left in place
   they would sit under that layer and be unreachable, so both are hidden and
   both leave the tab order with it. */
.ff[data-flow-page='color'] .ff__top,
.ff[data-flow-page='color'] .ff__badge { display: none; }

/* The reference's `[data-brand]`. Nothing scrolls. */
.ff-col {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
}

/* The read failed, so there is no composition to draw. It keeps the layer's
   ground and centres the panel; nothing here is the reference's, because the
   reference holds its record in memory and has no failure to render. */
.ff-col__failure {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
}

/* ── The chrome. Its clamps are the reference's own, and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-col__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-col__back:hover { color: #013F17; }
/* The reference has no focus treatment at all. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11) and it costs the composition nothing. */
.ff-col__back:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-col__back svg { width: 11px; height: 11px; flex: none; }

.ff-col__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-col__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-col__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-col__help:hover { background: #E9FFE1; }
.ff-col__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* The message bell. Its geometry is the reference's; its number is not, and
   `ColorStep`'s header says what the difference is. It does not shake. */
.ff-col__mailbtn {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  padding: 0;
  border: none;
  background: none;
  font-size: 13.3333px;
  line-height: normal;
  cursor: pointer;
  outline: none;
}
.ff-col__mailbtn:focus-visible { outline: 2px solid #013F17; outline-offset: 4px; }
.ff-col__mail {
  position: relative;
  width: clamp(58px, 5.2vw, 78px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  box-sizing: border-box;
}
.ff-col__mail img { width: 68%; height: auto; max-width: none; display: block; }
.ff-col__mailcount {
  position: absolute;
  left: -10%;
  top: -16%;
  min-width: 31%;
  height: 31%;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  background: #FAFAFA;
  box-sizing: border-box;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1;
  font-weight: 700;
  color: #41ED98;
}

/* ── The stage, and the fit-content column inside it ─────────────────────── */

.ff-col__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  /* See the header: the reference's body sets neither, and this file's does. */
  font-size: 16px;
  line-height: normal;
  color: #013F17;
}

.ff-col__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: fit-content;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  /* The reference's own, and why nothing here needs `align-self`. */
  align-items: center;
}

/* The reference's own hidden measure — it is what makes this column 1491px,
   the same width as the screens either side. `visibility: hidden` rather than
   `display: none`, because a `display:none` child contributes no width and the
   whole point of it is the width. */
.ff-col__measure {
  height: 0;
  overflow: hidden;
  font-size: 112px;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  visibility: hidden;
}

.ff-col__pill {
  padding: 26px 46px;
  background: #FBFFD4;
  font-size: 44px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
}

.ff-col__head {
  margin: 72px 0 0;
  font-size: 136px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: #013F17;
  white-space: nowrap;
}

.ff-col__panel {
  margin-top: 100px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.53fr) minmax(0, 1fr);
  gap: 100px;
  /* `start`, not `stretch`: the card is as tall as its own content and the
     left column ends wherever the swatches end. `margin-top:auto` on the Add
     button is therefore inert, and it is inert in the reference too. */
  align-items: start;
}

.ff-col__left { min-width: 0; }

/* ── The saturation / brightness plane ───────────────────────────────────── */

.ff-col__plane {
  width: 100%;
  height: 370px;
  position: relative;
  cursor: crosshair;
  touch-action: none;
  outline: none;
}
/* Added, not reproduced — see `.ff-col__back`. Offset outward so the ring sits
   clear of the plane's own edge, where the handle can travel. */
.ff-col__plane:focus-visible { outline: 5px solid #013F17; outline-offset: 6px; }
.ff-col__planewhite,
.ff-col__planeblack {
  position: absolute;
  inset: 0;
}
.ff-col__planewhite { background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.ff-col__planeblack { background: linear-gradient(0deg, #000, rgba(0, 0, 0, 0)); }
.ff-col__planehandle {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border: 5px solid #FAFAFA;
  box-sizing: border-box;
  pointer-events: none;
}

/* ── The hue bar ─────────────────────────────────────────────────────────── */

.ff-col__hue {
  width: 100%;
  height: 34px;
  margin-top: 52px;
  position: relative;
  cursor: pointer;
  touch-action: none;
  outline: none;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.ff-col__hue:focus-visible { outline: 5px solid #013F17; outline-offset: 10px; }
.ff-col__huehandle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 58px;
  border: 4px solid #013F17;
  background: #FAFAFA;
  box-sizing: border-box;
  pointer-events: none;
}

/* ── The three slots ─────────────────────────────────────────────────────── */

.ff-col__slots {
  margin: 90px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}
.ff-col__slots > li { min-width: 0; }

.ff-col__slotempty {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 4px solid transparent;
  box-sizing: border-box;
  background-image:
    repeating-linear-gradient(90deg, #8FCBA3 0 18px, transparent 18px 46px),
    repeating-linear-gradient(90deg, #8FCBA3 0 18px, transparent 18px 46px),
    repeating-linear-gradient(0deg, #8FCBA3 0 18px, transparent 18px 46px),
    repeating-linear-gradient(0deg, #8FCBA3 0 18px, transparent 18px 46px);
  background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-origin: border-box;
}

.ff-col__swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  /* The prototype harness's own `style-hover`. */
  transition: filter 0.2s ease;
}
.ff-col__swatch:hover { filter: brightness(0.72); }
.ff-col__swatch:disabled { cursor: default; }
.ff-col__swatch:focus-visible { outline: 5px solid #013F17; outline-offset: 6px; }

/* `[data-x]{opacity:0;transition:opacity .15s ease}` +
   `[data-swatch]:hover [data-x]{opacity:1}` — the reference's own, plus its
   `@media (hover:none)` rule, so a touch device is never left with a remove
   control it cannot reveal. `:focus-visible` is added for the same reason on a
   keyboard. */
.ff-col__x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44%;
  height: 44%;
  background: #FAFAFA;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ff-col__swatch:hover .ff-col__x,
.ff-col__swatch:focus-visible .ff-col__x { opacity: 1; }
@media (hover: none) {
  .ff-col__x { opacity: 1; }
}

.ff-col__slothex {
  display: block;
  margin-top: 30px;
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
}

/* ── The selected-colour card ────────────────────────────────────────────── */

.ff-col__card {
  border: 5px solid #7FD9A4;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.ff-col__cardtop {
  padding: 112px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ff-col__preview {
  width: 66%;
  aspect-ratio: 1;
}
.ff-col__selected {
  margin-top: 58px;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01em;
  color: #013F17;
}
.ff-col__hexwrap {
  margin: 26px 0 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ff-col__hexrow {
  display: flex;
  align-items: center;
  gap: 18px;
}
/* The design system's own field treatment reaches every `input`; the reference
   draws a bare centred code with a rule under it, so all of it is undone. */
.ff-col__hexinput {
  width: 340px;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  text-align: center;
  font-family: 'Satoshi', sans-serif;
  font-size: 58px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
}
.ff-col__hexinput:focus,
.ff-col__hexinput:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}
.ff-col__pencil { flex: none; display: block; }
.ff-col__hexrule {
  margin-top: 18px;
  width: 100%;
  height: 3px;
  background-image: repeating-linear-gradient(90deg, #A2AFA8 0 11px, transparent 11px 30px);
}
/* The field carries no border of its own, so the rule below it is what a
   keyboard user has to see change: the reference's own dashed grey turns
   SOLID, and nothing moves — the height stays 3px, so the card does not grow
   by a pixel and no reference box shifts.

   It goes to the page's own ink rather than to brand green. `#41ED98` on
   `#FAFAFA` is 1.46:1 and the browser pass showed the result: a rule you have
   to look for, as the only indicator on a text field. `#013F17` is 11.7:1, and
   the change from dashed-grey to solid-dark is unmistakable at a glance. */
.ff-col__hexwrap:focus-within .ff-col__hexrule {
  background-image: none;
  background-color: #013F17;
}

.ff-col__add {
  margin-top: auto;
  width: 100%;
  height: 112px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: #013F17;
  color: #E9FFE1;
  font-family: 'Satoshi', sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  transition: background 0.2s ease;
}
.ff-col__add:hover { background: #012D10; }
.ff-col__add:disabled { cursor: default; opacity: 0.55; }
.ff-col__add:focus-visible { outline: 3px solid #41ED98; outline-offset: -8px; }

/* ── The CTA, and the two lines the reference does not draw ──────────────── */

.ff-col__cta {
  margin-top: 130px;
  width: 100%;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 70px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  box-shadow: 0px 3px 12px rgba(255, 255, 255, 0.42) inset;
  transition: background 0.2s ease;
}
.ff-col__cta:hover { background: #3BDC8C; }
.ff-col__cta:focus-visible { outline: 3px solid #013F17; outline-offset: 4px; }

/* ONE block inside the 130px gap the CTA's own margin already leaves, so the
   note and the save status sit between the panel and the button without moving
   either. They stack in FLOW inside it rather than at two fixed offsets — the
   first draft positioned each absolutely and the browser pass caught the
   consequence: the note wrapped to two lines at this column width and `Saved
   12:03 AM` printed on top of the second one. A flow block cannot do that
   however either line grows.

   1491px is the column's own width, named here for the same reason `.ff-vis`
   names it: an absolutely positioned child has no flow width to inherit. */
.ff-col__gap {
  position: absolute;
  left: 0;
  top: calc(100% - 165px - 130px + 8px);
  width: 1491px;
  /* No height and no `overflow` on purpose. The block is out of flow, so it can
     never push the CTA; a fixed height with `overflow: hidden` would instead
     SWALLOW a line that grew, which is the silent version of the defect the
     browser pass just caught. The budget is 122px — the 130px gap less the 8px
     above — and at this column width the note is one line (38px) and the status
     one more (38px + 6px), so there is room to spare. Copy that needed more
     than the budget would visibly crowd the CTA, which is a signal rather than
     a disappearance. */
}
.ff-col__note,
.ff-col__status {
  margin: 0;
  width: 100%;
  max-width: none;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.28;
  color: #013F17;
}
.ff-col__status {
  margin-top: 6px;
  font-weight: 700;
  /* `--moss` is the caption tone and this is not a caption: it is the answer to
     "did that save", at 12 CSS px. It takes the page's own ink, and the failure
     states take `.ff-vis__failline`'s red. */
  color: #013F17;
}
.ff-col__status[data-state='failed'],
.ff-col__status[data-state='retrying'] { color: #B3261E; }

/* Announced, never drawn: it would otherwise be a second copy of the note. */
.ff-col__live { position: absolute; }

/* ══════════════════════ PHASE 64 — screen 21, the brand voice, rebuilt 1:1
   from the reference (Founder Flow v2, `[data-voice]` / `kindWide`), 2026-08-21.

   Drawn to the supplied reference (`Proovd Founder Flow v2.dc.html`) and
   measured against it in a real browser at 1320x900, on the terms every other
   1:1 screen of this flow ships under: the reference outranks the design
   system HERE, and nowhere else.

   ── This is not `.ff-voice` ───────────────────────────────────────────────
   `.ff-voice` was the Session F surface — a token-scale chip list with a
   textarea under it, at the product's own sizes. It is gone with its
   component. `.ff-vc` is a different composition over the same record, so it
   is a different prefix, the way `.ff-ll` is not `.ff-look` and `.ff-pc` is
   not `.ff-prob`.

   ── The layout model is the reference's, literally ────────────────────────
   `position:fixed;inset:0;overflow:hidden` around a fixed 2496x1542 stage,
   scaled to the viewport by `fitStages()`:

       let s = Math.min(innerWidth/2496, innerHeight/1542) * (pageScale || .78);

   No branch of that function names `build`, so this screen takes `pageScale`
   alone. The component owns the scale and writes the whole transform on mount
   and on resize; the `scale(0.4125)` below is what renders for the one frame
   before the layout effect runs, and is the value measured at 1320x900.
   Nothing here reflows — the stage scales instead, which is why the
   composition is identical at every viewport (§33.11.1).

   `isClaimPhone()` returns `false` in the reference — "one composition
   everywhere: the phone posture stays off" — so its `kindPhone` branch is dead
   code and this composition is what every viewport gets, exactly as there.

   ── The two sheets are NOT on the stage ───────────────────────────────────
   They are `position:fixed` with their own `clamp()`s, and those are
   viewport-relative in the reference too. So the stage scales and the sheets
   do not, which is the reference's own arrangement: a dialog is furniture, and
   furniture is sized to the screen rather than to the composition.

   ── The two suspended conventions, as on screens 1–8 and 15 ───────────────
     - HEX LITERALS, not tokens. Nine of the reference's colours here have
       exact or near tokens; mixing literal and token would leave half the
       screen able to drift with a token change and half not, so all of them
       are literal and this screen reads exactly as the reference does.
     - RADIUS 2px, literal. It is what `var(--radius)` resolves to under the
       owner ruling, so the two agree today; the literal is here for the same
       reason the colours are.

   ── What the project's globals do to this screen, overridden explicitly ───
   `h1..h6 { margin; line-height:1.18; font-weight:900 }` reaches the note,
   `p { margin; max-width: var(--measure) }` reaches the save line and the two
   sheet lines, `button,input,textarea,select { font: inherit }` reaches every
   control, and `body`'s 18px / line-height 1.6 reaches the whole stage — the
   reference's own body sets neither a size nor a line-height, so the stage
   resets both and the sheets reset them again.

   The CTA and the chips deliberately keep the UA's own `padding: 1px 6px`,
   which is what the reference computes: both are fixed-size flex boxes with
   their content centred, so it changes nothing, and writing a `padding: 0`
   the reference does not have would be a difference rather than a fix.
   ═════════════════════════════════════════════════════════════════════════ */

/* `FlowPage`'s chrome is not drawn on this screen, and the reason is not that
   the reference has none. It has a wordmark and a HELP, and it draws them
   INSIDE the `z-index: 25` fixed layer below. Left in place they would sit
   under that layer and be unreachable, so both are hidden and both leave the
   tab order with it. There is no message badge on this screen at all: the
   reference draws none, and `FlowPage` is no longer asked for one. */
.ff[data-flow-page='voice'] .ff__top,
.ff[data-flow-page='voice'] .ff__badge { display: none; }

/* The reference's `[data-voice]`. Nothing scrolls. */
.ff-vc {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
  color: #013F17;
  /* The reference's own body sets a family and nothing else, so its whole
     layer inherits 16px / normal. The project's sets 18px / 1.6, which reaches
     the chrome and both sheets. */
  font-size: 16px;
  line-height: normal;
}

/* ── The chrome. Its `clamp()`s are the reference's own, and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-vc__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-vc__back:hover { color: #013F17; }
/* The reference has no focus treatment at all. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11) and it costs the composition nothing. */
.ff-vc__back:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-vc__back svg { width: 11px; height: 11px; flex: none; }

.ff-vc__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-vc__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-vc__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-vc__help:hover { background: #E9FFE1; }
.ff-vc__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* ── The stage, and the 2000px column inside it ──────────────────────────── */

.ff-vc__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.4125);
  transform-origin: center center;
  color: #013F17;
  font-size: 16px;
  line-height: normal;
}

/* Centred on the stage rather than pinned to it, with no offset of its own —
   unlike `.ff-pc__col` and `.ff-ll__col`, which each carry a `+ 70px`. */
.ff-vc__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2000px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* `data-anim="note"`. A `span` in the reference; an `h1` here, because
   §33.11.2 wants exactly one on the page and this is the only thing that names
   it. Every value is the reference's. */
.ff-vc__note {
  margin: 0;
  font-size: 58px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
}

/* `data-anim="panel"` — the sentence. It WRAPS: a Founder with five adjectives
   runs past 2000px and the reference's own `flex-wrap` is what carries them
   onto a second line, with its `22px` row gap between. */
.ff-vc__panel {
  margin-top: 150px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 26px;
}

.ff-vc__brand,
.ff-vc__word {
  font-size: 96px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.03em;
  color: #013F17;
}

/* The affix spans are rendered even when empty, and an empty one is 0x0 — the
   26px gaps either side of the chip are what they buy, and the reference's own
   first chip measures 0 + 26 + 450.44 + 26 + 0 = 502.44 stage px. */
.ff-vc__chipwrap {
  display: inline-flex;
  align-items: center;
  gap: 26px;
}

/* The reference gives the chip no hover treatment. It is not an omission: the
   whole word is the control and the caret says so, which is why nothing here
   lifts, tints or scales on pointer. */
.ff-vc__chip {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  border: none;
  border-radius: 2px;
  font-family: 'Satoshi', sans-serif;
  font-size: 68px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
  cursor: pointer;
  outline: none;
}
/* Written here rather than in the shorthand above so the UA's own vertical
   padding is replaced and nothing else is: the reference sets exactly this. */
.ff-vc__chip { padding: 26px 40px; }
.ff-vc__chip:focus-visible { outline: 4px solid #013F17; outline-offset: 4px; }

.ff-vc__caret {
  font-size: 46px;
  line-height: 1;
}

/* `BRAND_VOICE_NO_WORDS_YET`. The reference always ships two words and never
   draws this; §16a decides it here — an empty record is not a zero, and a bare
   `Teeb is` reads as a sentence somebody failed to finish. */
.ff-vc__empty {
  font-size: 68px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #7FA98D;
}

/* `data-anim="hint"`. Its dashes are the control: there is no border anywhere
   else on this screen. */
.ff-vc__hint {
  margin-top: 130px;
  padding: 0 0 18px;
  border: none;
  border-bottom: 3px dashed #A2AFA8;
  background: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 58px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
  cursor: pointer;
  outline: none;
}
.ff-vc__hint:focus-visible { outline: 4px solid #013F17; outline-offset: 6px; }

.ff-vc__cta {
  margin-top: 150px;
  width: 2000px;
  height: 160px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 66px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
  outline: none;
}
.ff-vc__cta:hover { background: #3BDC8C; }
.ff-vc__cta:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }
.ff-vc__cta:disabled { cursor: default; }

/* Save failures are outside the reference composition and absolutely
   positioned so they cannot move it. Routine Saving/Saved states are hidden. */

.ff-vc__save {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vw, 40px);
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  max-width: min(90vw, 40rem);
  text-align: center;
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7FA98D;
}
.ff-vc__save { color: #013F17; }

.ff-vc__state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 34rem);
  margin: 0;
  max-width: none;
  color: #013F17;
}
.ff-vc__state .wrap { width: 100%; }
.ff-vc__state .section { padding-block: 0; }
.ff-vc__state .measure { max-width: none; }

/* ── The two sheets ─────────────────────────────────────────────────────────
   `position:fixed;inset:0;z-index:60` with the sheet centred inside it. The
   scrim's colour is written by `voiceSheetIn` (`rgba(1,63,23,0)` →
   `rgba(1,63,23,.35)`) rather than declared, because the reference tweens it;
   the declaration below is the end state, for the case where motion is off and
   no inline write ever happens. */

.ff-vc__scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  background-color: rgba(1, 63, 23, 0.35);
  /* Not on the reference, and the only reason it is here: its add sheet is
     949px tall and its scrim does not scroll, so at 320 the Confirm control
     sits below the fold with no way to reach it. `margin: auto` on the child
     rather than `align-items: center` on the parent, because a centred flex
     item that overflows is clipped at the TOP and cannot be scrolled to. The
     sheet lands in exactly the same place at every width where it fits, and
     becomes reachable at the widths where it does not. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ff-vc__scrim > * { margin: auto; }

.ff-vc__sheet {
  width: min(820px, 84vw);
  padding: clamp(26px, 3vw, 42px);
  box-sizing: border-box;
  transform-origin: 50% 50%;
  /* `voiceModalBg` is written inline from the chip's own fill, so the sheet
     wears the colour of the word it grew out of. This is the fallback. */
  background: #F4FFA0;
}
.ff-vc__sheet--add {
  width: min(1200px, 88vw);
  padding: clamp(24px, 2.6vw, 38px);
  background: #013F17;
}

/* The inner card. `modalIntro` staggers ITS children — `box.querySelector(':scope
   > div').children` — so this element is load-bearing rather than decorative. */
.ff-vc__card {
  background: #FAFAFA;
  padding: clamp(30px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: normal;
}

.ff-vc__sheet-title {
  font-size: clamp(19px, 1.9vw, 27px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
}
.ff-vc__sheet-title--gap { margin-top: clamp(30px, 3.2vw, 46px); }
.ff-vc__sheet-title--row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
/* No `letter-spacing` of its own, deliberately. The reference declares none
   here, so this INHERITS the title's computed -0.5016px rather than resolving
   -0.02em against its own smaller size — which is what a fresh declaration
   would do, and it is 0.19px per character narrower. */
.ff-vc__sheet-hint {
  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 500;
  color: #A2AFA8;
}
/* The word being replaced, greyed inside the sentence that replaces it. */
.ff-vc__was { color: #A2AFA8; }

.ff-vc__opts {
  margin-top: clamp(22px, 2.4vw, 34px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 20px);
}

/* Dashed until chosen, solid brand when it is, and the weight moves with it —
   the reference's own three-at-once, which is what makes the state legible
   without colour alone carrying it. */
.ff-vc__opt {
  padding: clamp(13px, 1.4vw, 20px) clamp(22px, 2.4vw, 34px);
  border: 2px dashed #4E8C67;
  border-radius: 2px;
  background: transparent;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(18px, 1.9vw, 26px);
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.01em;
  color: #013F17;
  cursor: pointer;
  outline: none;
}
.ff-vc__opt.is-on {
  border-style: solid;
  border-color: #41ED98;
  font-weight: 900;
}
.ff-vc__opt:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
/* The reference declares `letter-spacing` on the word buttons and NOT on the
   `+`, so it takes its own `normal`. One glyph, a quarter of a pixel, and
   it is what the reference computes — a difference rather than a fix. */
.ff-vc__opt--plus {
  padding: clamp(13px, 1.4vw, 20px) clamp(18px, 2vw, 26px);
  letter-spacing: normal;
}
.ff-vc__opt--sm {
  padding: clamp(9px, 1vw, 14px) clamp(16px, 1.8vw, 26px);
  font-size: clamp(15px, 1.5vw, 21px);
}
.ff-vc__opt--sm.ff-vc__opt--plus { padding: clamp(9px, 1vw, 14px) clamp(14px, 1.5vw, 20px); }

.ff-vc__custom {
  width: clamp(150px, 17vw, 230px);
  padding: clamp(13px, 1.4vw, 20px) clamp(16px, 1.7vw, 22px);
  box-sizing: border-box;
  border: 2px solid #013F17;
  border-radius: 2px;
  background: transparent;
  outline: none;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(18px, 1.9vw, 26px);
  font-weight: 500;
  line-height: normal;
  color: #013F17;
}
.ff-vc__custom--sm {
  padding: clamp(9px, 1vw, 14px) clamp(12px, 1.3vw, 18px);
  font-size: clamp(15px, 1.5vw, 21px);
}
.ff-vc__custom:focus-visible { outline: 2px solid #41ED98; outline-offset: 2px; }

.ff-vc__sheet-foot {
  margin-top: clamp(70px, 8vw, 120px);
  display: flex;
  justify-content: flex-end;
}

/* `voiceReplaceLabel` / `voiceReplaceBg`: the same control is `Close` in grey
   while nothing is picked and `Confirm` in brand once something is, so it says
   what it will do before it is pressed. */
.ff-vc__done {
  width: clamp(250px, 27vw, 380px);
  height: clamp(66px, 6.6vw, 94px);
  padding: clamp(14px, 1.6vw, 22px) clamp(30px, 3.2vw, 48px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(18px, 1.9vw, 26px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
}
.ff-vc__done.is-off { background: #A2AFA8; }
.ff-vc__done:focus-visible { outline: 3px solid #013F17; outline-offset: 3px; }
/* The add sheet's own Confirm — a different size, and it carries the inset
   highlight the owner ruling puts on a brand fill. */
.ff-vc__done--sm {
  flex: none;
  width: clamp(200px, 22vw, 300px);
  height: clamp(48px, 4.8vw, 68px);
  /* The reference's two Confirm buttons are two separate elements: the replace
     sheet's declares a padding and the add sheet's declares none, so the second
     computes the UA's own 1px 6px. It changes nothing — the box is a fixed size
     with its label centred — and writing a 0 the reference does not have would
     be a difference rather than a fix. */
  padding: 1px 6px;
  font-size: clamp(16px, 1.6vw, 23px);
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
}

.ff-vc__more-label {
  margin-top: clamp(26px, 2.8vw, 40px);
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01em;
  color: #013F17;
}
.ff-vc__more-row {
  margin-top: 12px;
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 2.4vw, 36px);
}
.ff-vc__more {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  height: clamp(120px, 13vw, 190px);
  resize: none;
  box-sizing: border-box;
  padding: clamp(14px, 1.4vw, 20px);
  background: transparent;
  border: 2px solid #013F17;
  border-radius: 2px;
  outline: none;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 500;
  line-height: normal;
  color: #013F17;
}
.ff-vc__more::placeholder { color: #A2AFA8; opacity: 1; }
.ff-vc__more:focus-visible { outline: 2px solid #41ED98; outline-offset: 2px; }

/* `BRAND_VOICE_IS_READ_BY_PEOPLE` is NOT drawn on the sheet, and that is a
   correction rather than an omission. It was, and it made the card 42px taller
   than the reference's — which moved every row inside it, because the sheet is
   centred. §30's position still ships: it is in the HELP drawer, which is
   where this flow puts reading, and which is one gesture from every screen.

   The one line that IS added to the sheet is available to a screen reader and
   to nobody else, through the design system's own `.sr-only` — a second copy
   of that rule here would be a second answer to what visually-hidden means.
   The reference says nothing at all when a word is already in the sentence,
   and a visible line for it would put copy on a sheet it draws without one. */

/* ══════════════════════════════════════════ PHASE 64 — RESPONSIVE ══
   The reference's own one media query for this screen, and it is not a
   reflow: the stage is one composition at every width. What moves is the
   furniture, which was never on the stage. */
@media (max-width: 600px) {
  .ff-vc__back { bottom: 92px; padding: 8px 14px; }
  /* The save line would sit under the Back control at phone width. */
  .ff-vc__save { bottom: calc(92px + 34px); }
}

/* The add sheet's field and its Confirm were stacked here for one draft, on the
   reasoning that side by side they leave the textarea 85px wide at 320. It was
   removed: it is a composition the reference does not have, and it made the
   sheet 68px TALLER — 1017 against its 949 — so it cut off more of the control
   it was meant to make reachable. The scrolling scrim above fixed that instead. */

/* ═════════════════════════════════════ PHASE 64 — THE FOUNDER INTERVIEW ══
   2026-08-20. The reference's `[data-sched]` screen, rebuilt 1:1
   (`Proovd Founder Flow v2.dc.html`, `kindWide`). `InterviewStep.tsx` owns the
   markup and the header there says what is the reference's and what is not.

   ── The layout model is the reference's, literally ────────────────────────
   `position:fixed;inset:0;overflow:hidden` around a fixed 2496x1542 stage,
   scaled to the viewport by `fitStages()`:

       let s = Math.min(innerWidth / 2496, innerHeight / 1542) * (pageScale || .78);

   No branch of that function names this screen, so it takes `pageScale` alone.
   `InterviewStep` owns the scale and writes the whole transform on mount and on
   resize; the `scale(0.37)` below is the reference's own placeholder and is
   what renders for the one frame before the layout effect runs. Nothing here
   reflows — the stage scales instead, which is why the composition is identical
   at every viewport (§33.11.1).

   `isClaimPhone()` returns `false` in the reference — "one composition
   everywhere: the phone posture stays off" — so its `kindPhone` branch is dead
   code and this composition is what every viewport gets, exactly as there.

   ── The two suspended conventions, as on screens 1–16 ─────────────────────
     - HEX LITERALS, not tokens. `#41ED98`, `#013F17`, `#FAFAFA`, `#FBFFD4`,
       `#F2F2F2`, `#E9FFE1` and `#3BDC8C` are the reference's own; mixing
       literal and token would leave half the screen able to drift with a token
       change and half not.
     - RADIUS 2px, literal. It is what `var(--radius)` resolves to under the
       owner ruling, so the two agree today; the literal is here for the same
       reason the colours are. The pill has NO radius in the reference and has
       none here.

   ── What the project's globals do to this screen, overridden explicitly ───
   `h1..h6 { margin; line-height:1.18; font-weight:900 }` reaches the headline,
   `p { margin; max-width: var(--measure) }` reaches every line under the CTA,
   `img,svg,video { max-width:100%; height:auto }` reaches the logo, the bell
   and the three brand marks, and `body`'s 18px / line-height 1.6 reaches the
   whole stage — the reference's own body sets neither, so the stage resets
   both.

   ── The one block the reference does not draw ─────────────────────────────
   `.ff-int__state` is §12's booking record, the two named absences, the
   refusal, and the Cal.com embed. It is ABSOLUTELY positioned under the
   column, in the room the composition already leaves between the CTA and the
   bottom of the stage, so not one reference box moves for it. See
   `InterviewStep`'s header for why each part has to exist at all.
   ═════════════════════════════════════════════════════════════════════════ */

/* `FlowPage`'s chrome is not drawn on this screen — and the reason is not that
   the reference has none. It has a wordmark, a HELP and a message bell, and it
   draws all three INSIDE the `z-index: 25` fixed layer below. Left in place
   they would sit under that layer and be unreachable, so both are hidden and
   both leave the tab order with it. */
.ff[data-flow-page='interview'] .ff__top,
.ff[data-flow-page='interview'] .ff__badge { display: none; }

/* The reference's `[data-sched]`. Nothing scrolls. */
.ff-int {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
  /* The reference's page inherits the UA's own root metrics; ours inherits
     `body`'s 18px/1.6. Restated here so the chrome outside the stage measures
     against what it was authored against. */
  font-size: 16px;
  line-height: normal;
}

/* The read failed, so there is no composition to draw. It keeps the layer's
   ground and centres the panel; nothing here is the reference's, because the
   reference holds its answer in memory and has no failure to render. */
.ff-int__failure {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
}

/* ── The chrome. Its `clamp()`s are the reference's own, and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-int__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-int__back:hover { color: #013F17; }
/* The reference has no focus treatment at all. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11) and it costs the composition nothing. */
.ff-int__back:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-int__back svg { width: 11px; height: 11px; flex: none; }

.ff-int__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-int__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-int__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-int__help:hover { background: #E9FFE1; }
.ff-int__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* The message bell. Its geometry is the reference's; its number is not, and
   `InterviewStep`'s header says what the difference is. It does not shake. */
.ff-int__mailbtn {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  padding: 0;
  border: none;
  background: none;
  font-size: 13.3333px;
  line-height: normal;
  cursor: pointer;
  outline: none;
}
.ff-int__mailbtn:focus-visible { outline: 2px solid #013F17; outline-offset: 4px; }
.ff-int__mail {
  position: relative;
  width: clamp(58px, 5.2vw, 78px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  box-sizing: border-box;
}
.ff-int__mail img { width: 68%; height: auto; max-width: none; display: block; }
.ff-int__mailcount {
  position: absolute;
  left: -10%;
  top: -16%;
  /* `width: 31%; aspect-ratio: 1` there, over a one-digit number. Ours is a
     count of reading cards and is legitimately two digits, so the box grows
     rather than clipping — and the aspect keeps a one-digit badge identical to
     the reference's own square. */
  min-width: 31%;
  min-height: 31%;
  aspect-ratio: 1;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  background: #FAFAFA;
  box-sizing: border-box;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1;
  font-weight: 700;
  color: #41ED98;
}

/* ── The stage, and the fit-content column inside it ─────────────────────── */

.ff-int__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  /* See the header: the reference's body sets neither, and this file's does. */
  font-size: 16px;
  line-height: normal;
  color: #013F17;
}

.ff-int__col {
  position: absolute;
  left: 50%;
  top: 50%;
  width: fit-content;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The visuals headline, measured and discarded. Its only job is the width. */
.ff-int__measure {
  height: 0;
  overflow: hidden;
  font-size: 112px;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  visibility: hidden;
}

.ff-int__pill {
  padding: 26px 46px;
  background: #FBFFD4;
  font-size: 44px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
}

.ff-int__head {
  margin: 72px 0 0;
  font-size: 121px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: #013F17;
  white-space: nowrap;
}

.ff-int__panel {
  margin-top: 110px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.ff-int__label {
  font-size: 42px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
}
.ff-int__label--time { margin-top: 62px; }

/* ── Choose how to meet ──────────────────────────────────────────────────── */

.ff-int__tiles {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.ff-int__tile {
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 38px;
  box-sizing: border-box;
  border-radius: 2px;
  border: 3px solid #F2F2F2;
  background: #F2F2F2;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  text-align: left;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-int__tile:hover { transform: scale(1.015); }
.ff-int__tile:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }
/* `bg: sel ? 'rgba(65,237,152,.05)' : '#F2F2F2'`, `bd: sel ? '#41ED98' : '#F2F2F2'`.
   The LABEL does not change colour on a tile — only on a time chip. That is the
   reference's own asymmetry and it is reproduced rather than tidied. */
.ff-int__tile.is-on {
  border-color: #41ED98;
  background: rgba(65, 237, 152, 0.05);
}
/* Not `disabled`: a keyboard user has to be able to reach the control that
   explains itself (§28.5). The tile keeps its own look and stops responding to
   a hover it will not honour. */
.ff-int__tile[aria-disabled='true'],
.ff-int__slot[aria-disabled='true'] { cursor: default; }
.ff-int__tile[aria-disabled='true']:hover,
.ff-int__slot[aria-disabled='true']:hover { transform: none; }

.ff-int__icon {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The three marks are authored at their reference sizes; the global
   `img,svg,video { max-width:100% }` would shrink the 92px Meet mark inside its
   own box the moment anything else claimed room in it. */
.ff-int__icon svg { max-width: none; height: auto; display: block; flex: none; }

.ff-int__tilelabel {
  font-size: 42px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
}

/* ── Pick a time ─────────────────────────────────────────────────────────── */

.ff-int__slots {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.ff-int__slot {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border: 3px solid #F2F2F2;
  background: #F2F2F2;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-int__slot:hover { transform: scale(1.02); }
.ff-int__slot:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }
.ff-int__slot.is-on {
  border-color: #41ED98;
  background: rgba(65, 237, 152, 0.05);
  color: #41ED98;
}

/* ── Next ────────────────────────────────────────────────────────────────── */

.ff-int__cta {
  margin-top: 130px;
  width: 100%;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 70px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  outline: none;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-int__cta:hover { background: #3BDC8C; }
.ff-int__cta:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }
.ff-int__cta:disabled { cursor: default; opacity: 0.72; }

/* ── The block the reference has no equivalent of ────────────────────────── */

.ff-int__state {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* The reference has nothing here to copy a size from. Its own smallest
     stage text is the 42px section label, so this sits one step under it —
     secondary to the composition and still a sentence rather than a caption,
     because what it carries is a rule about somebody’s listing fee. */
  font-size: 36px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  /* A rule about somebody's money, and about what is and is not booked, takes
     the ink the rest of the screen uses. `--moss` at 3.37:1 is this flow's
     caption tone and this is not a caption. */
  color: #013F17;
}
.ff-int__state p { margin: 0; max-width: none; }

.ff-int__failline { color: #013F17; font-weight: 700; }

.ff-int__note { max-width: none; }

/* §12's own mechanism, behind one gesture (DNA §5.12) so the composition above
   it is untouched until somebody asks for it. */
.ff-int__embed > summary {
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.ff-int__embed > summary:focus-visible { outline: 4px solid #013F17; outline-offset: 4px; }
.ff-int__embed .interview-embed { margin-top: 20px; }

/* Announced, never drawn. The composition has no room for a status line and
   every state it would carry is already a visible sentence above. */
.ff-int__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ═════════════════════════════ PHASE 65 — SCREEN 16, YOUR DETAILS ══
   2026-08-21. The reference's `[data-hello]` page, built from scratch and 1:1
   (`Proovd Founder Flow v2.dc.html`, `kindWide`). `DetailsStep.tsx` owns the
   markup and its header says what is the reference's and what is not.

   ── The layout model is the reference's, literally ────────────────────────
   `position:fixed;inset:0;overflow:hidden` around a fixed 2496x1542 stage,
   scaled to the viewport by `fitStages()`:

       let s = min(innerWidth/2496, innerHeight/1542) * (pageScale || .78);
       if (!hero && c === 'intake') s *= .92;   // "the details card runs tall"

   `DetailsStep` writes the whole transform on mount and on resize; the
   `scale(0.368)` below is the reference's own value at 1280x800 and is what
   renders for the one frame before the layout effect runs. Nothing here
   reflows — the stage scales instead — which is why the composition is
   identical at every viewport (§33.11.1).

   ── The two suspended conventions, as on every 1:1 screen in this flow ────
     - HEX LITERALS, not tokens. Several of the reference's colours here have
       exact or near tokens; mixing literal and token would leave half the
       screen able to drift with a token change and half not. `#17A35E` and
       `#7FE7B0` have no token at all.
     - RADIUS 2px, literal. It is what `var(--radius)` resolves to under the
       owner ruling, so the two agree today; the literal is here for the same
       reason the colours are.

   ── What the project's globals do to this screen, overridden explicitly ───
   `img, svg, video { max-width:100%; height:auto }` reaches the avatar, which
   is a fixed 1050px square on a 2496px stage and must not be capped by the
   VIEWPORT. `h1..h6 { margin; line-height:1.18; font-weight:900 }` reaches the
   greeting, which is 700 at `line-height: normal` there. `body`'s 18px / 1.6
   reaches the whole stage — the reference's own body sets 16px / normal, so
   the stage resets both, and every `em` inside the calendar resolves from it.

   ── The calendar is authored at REAL pixel scale, on purpose ──────────────
   Its variables are `vw` clamps evaluated against the window, not the stage —
   `:root` in the reference, `.ff-hl__calwrap` here, with the same three
   breakpoints. The panel then sits inside a `scale(2.6)` box inside the
   `~0.368` stage, so it renders at ~0.957 of its natural size. That is how the
   prototype keeps a calendar legible on a page whose type is authored at 54px,
   and it is reproduced as the mechanism rather than as the resulting numbers,
   which move with the viewport. ═════════════════════════════════════════════ */

/* `FlowPage`'s chrome is not drawn on this screen, and not because the
   reference has none: it has a wordmark and a HELP and draws them INSIDE the
   `z-index: 25` fixed layer below, where anything left outside would sit under
   that layer and be unreachable. There is no message badge here at all — the
   reference draws none. */
.ff[data-flow-page='details'] .ff__top,
.ff[data-flow-page='details'] .ff__badge { display: none; }

/* The reference's `[data-hello]`. Nothing scrolls. */
.ff-hl {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
  color: #013F17;
}

/* ── The chrome. Its `clamp()`s are the reference's own and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-hl__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-hl__back:hover { color: #013F17; }
/* The reference has no focus treatment at all. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11) and it costs the composition nothing. */
.ff-hl__back:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-hl__back svg { width: 11px; height: 11px; flex: none; }

.ff-hl__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-hl__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-hl__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-hl__help:hover { background: #E9FFE1; }
.ff-hl__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* ── The stage, and the two columns on it ────────────────────────────────── */

.ff-hl__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.368);
  transform-origin: center center;
  color: #013F17;
  font-size: 16px;
  line-height: normal;
}

/* `grid-template-columns: 1050px 1fr` over a fixed 2300px, so the panel
   resolves to exactly 1080px. Centred on the stage rather than pinned to it. */
.ff-hl__grid {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2300px;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1050px 1fr;
  gap: 170px;
  align-items: start;
}

.ff-hl__art {
  width: 1050px;
  height: 1050px;
  max-width: none;
  display: block;
  object-fit: cover;
}

.ff-hl__panel {
  margin-top: 150px;
  display: flex;
  flex-direction: column;
}

/* A `<span>` in the reference — see `DetailsStep`'s header for why it is an
   `h1` here, and why that changes nothing about the box it occupies. */
.ff-hl__greet {
  margin: 0;
  font-size: 50px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #17A35E;
}

.ff-hl__row { display: flex; gap: 26px; }
/* A label and a value: they share a baseline. */
.ff-hl__row--name { margin-top: 96px; align-items: center; }
/* A label and a control: they share a centre line. */
.ff-hl__row--phone,
.ff-hl__row--dob { margin-top: 74px; align-items: center; }

.ff-hl__label {
  font-size: 54px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #111111;
}
/* Only the two rows with a control shrink-lock their label, exactly as there:
   the name row has nothing to shrink against. */
.ff-hl__row--name .ff-hl__label,
.ff-hl__row--phone .ff-hl__label,
.ff-hl__row--dob .ff-hl__label { flex: none; }

.ff-hl__value {
  font-size: 54px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #111111;
}

.ff-hl__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 78px;
  padding: 0 8px;
  background: transparent;
  border: none;
  border-bottom: 3px solid #A2AFA8;
  border-radius: 0;
  outline: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 54px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #111111;
}
.ff-hl__input::placeholder { color: #A2AFA8; opacity: 1; }
.ff-hl__input:focus { border-bottom-color: #41ED98; }

.ff-hl__dob {
  flex: 1 1 auto;
  min-width: 0;
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 30px;
  background: transparent;
  border: 3px solid #7FE7B0;
  border-radius: 2px;
  font-family: 'Satoshi', sans-serif;
  font-size: 46px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #A2AFA8;
  cursor: pointer;
  text-align: left;
  outline: none;
}
/* `dobFieldFg` — `#012D10` once a date is on file, `#A2AFA8` while it is a
   prompt. Two colours because they are two different things. */
.ff-hl__dob.is-set { color: #012D10; }
.ff-hl__dob:focus-visible { outline: 3px solid #013F17; outline-offset: 4px; }
.ff-hl__dob svg { width: 46px; height: 46px; flex: none; max-width: none; }

.ff-hl__cta {
  margin-top: 130px;
  width: 100%;
  height: 150px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 64px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: 0px 3px 12px rgba(255, 255, 255, 0.42) inset;
  outline: none;
}
.ff-hl__cta:hover { background: #3BDC8C; }
.ff-hl__cta:focus-visible { outline: 4px solid #013F17; outline-offset: 4px; }

/* ── The calendar ────────────────────────────────────────────────────────── */

/* `position:relative;height:0` — the panel costs the column nothing and the
   calendar overlays the button below it. */
.ff-hl__calholder { position: relative; height: 0; }

.ff-hl__calscale {
  position: absolute;
  left: 0;
  top: 14px;
  width: 640px;
  transform: scale(2.6);
  transform-origin: top left;
}

/* `max-width: 22rem` is what actually decides the panel's width — 352px, not
   the 640px above it. */
.ff-hl__calwrap {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 22rem;

  /* The reference's `:root`, verbatim and in scope. `vw` is the window in both
     places, so these resolve identically. */
  --bw: 2px;
  --br: 1px;
  --h3: clamp(1.4rem, 1.9vw, 1.65rem);
  --small: clamp(0.875rem, 0.98vw, 0.95rem);
  --micro: clamp(0.7rem, 0.82vw, 0.8rem);
  --tag: clamp(0.62rem, 0.72vw, 0.72rem);
  --tap: clamp(2.75rem, 3.6vw, 3.3rem);
  --cell: clamp(1.65rem, 1.95vw, 1.8rem);
}
@media (min-width: 1500px) {
  .ff-hl__calwrap {
    --h3: clamp(1.5rem, 1.35vw, 1.9rem);
    --small: clamp(0.96rem, 0.74vw, 1.1rem);
    --micro: clamp(0.8rem, 0.6vw, 0.92rem);
    --tag: clamp(0.7rem, 0.55vw, 0.84rem);
    --tap: clamp(3.1rem, 2.6vw, 3.7rem);
    --cell: clamp(1.8rem, 1.6vw, 2.2rem);
  }
}
@media (max-width: 600px) {
  .ff-hl__calwrap { --bw: 1px; --br: 0.5px; --cell: 2.75rem; }
}

.ff-hl__cal {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  z-index: 12;
  width: 100%;
  min-width: min(17.5rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: var(--bw) solid #41ED98;
  border-radius: var(--br);
  overflow: hidden;
  padding: clamp(0.45rem, 0.6vw, 0.55rem);
  transform-origin: top center;
}

.ff-hl__cal-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  margin-bottom: 0.4em;
  flex: none;
}

/* 13.3333px is the UA button default the reference inherits: it resets
   `box-sizing` and nothing else, while this project sets `button { font:
   inherit }`. The arrow glyphs are sized in `em` off it, so reproducing the
   inherited size is what reproduces the glyphs. */
.ff-hl__cal-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0;
  font-size: 13.3333px;
  color: #A2AFA8;
  cursor: pointer;
  outline: none;
}
.ff-hl__cal-arrow:hover { color: #41ED98; }
.ff-hl__cal-arrow:focus-visible { outline: 2px solid #013F17; outline-offset: -2px; }
.ff-hl__cal-arrow svg { width: 0.85em; height: 0.85em; max-width: none; }
.ff-hl__cal-arrow:active { transform: scale(0.94); }

.ff-hl__cal-month {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: none;
  border: none;
  min-height: var(--tap);
  padding: 0.2em 0.45em;
  font-family: inherit;
  font-weight: 900;
  font-size: var(--small);
  line-height: normal;
  letter-spacing: -0.02em;
  color: #012D10;
  cursor: pointer;
  outline: none;
}
.ff-hl__cal-month:hover { color: #41ED98; }
.ff-hl__cal-month:focus-visible { outline: 2px solid #013F17; outline-offset: -2px; }
.ff-hl__cal-month:active { transform: scale(0.94); }
.ff-hl__cal-month svg { width: 0.8em; height: 0.8em; max-width: none; }

.ff-hl__cal-decade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3em;
  margin-bottom: 0.3em;
}
.ff-hl__cal-decade .ff-hl__cal-arrow { flex: none; }
.ff-hl__cal-decade .ff-hl__cal-arrow svg { stroke-width: 3; }
.ff-hl__cal-decade-label {
  font-weight: 700;
  font-size: var(--micro);
  color: #669370;
  letter-spacing: 0.02em;
}

.ff-hl__cal-years {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25em;
}
.ff-hl__cal-year {
  min-height: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--br);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--small);
  line-height: normal;
  letter-spacing: -0.01em;
  background: #F7F7F7;
  color: #012D10;
  border: var(--bw) solid #F7F7F7;
  outline: none;
}
.ff-hl__cal-year.is-off { color: #A2AFA8; cursor: default; }
.ff-hl__cal-year.is-on { background: #41ED98; color: #E9FFE1; border-color: #41ED98; }
.ff-hl__cal-year:focus-visible { outline: 2px solid #013F17; outline-offset: -2px; }
.ff-hl__cal-year:active { transform: scale(0.94); }

.ff-hl__cal-monthwrap { position: relative; margin-top: 0.55em; }
.ff-hl__cal-months {
  height: calc(var(--cell) * 3);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.ff-hl__cal-months::-webkit-scrollbar { display: none; }
.ff-hl__cal-months-pad { padding: var(--cell) 0; }
.ff-hl__cal-mo {
  width: 100%;
  height: var(--cell);
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: normal;
  letter-spacing: -0.02em;
  /* `d >= 2` — the distance from the month in view decides all three. */
  font-weight: 700;
  font-size: var(--micro);
  color: #A2AFA8;
  outline: none;
}
.ff-hl__cal-mo.is-near { font-size: var(--small); color: #669370; }
.ff-hl__cal-mo.is-on { font-size: var(--h3); font-weight: 900; color: #012D10; }
.ff-hl__cal-mo:focus-visible { outline: 2px solid #013F17; outline-offset: -2px; }
/* The two rules the scroller snaps between. */
.ff-hl__cal-rule {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #41ED98;
  pointer-events: none;
}
.ff-hl__cal-rule--a { top: var(--cell); }
.ff-hl__cal-rule--b { top: calc(var(--cell) * 2); }

.ff-hl__cal-dows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.18em;
  margin-bottom: 0.25em;
}
.ff-hl__cal-dows span {
  text-align: center;
  font-size: var(--tag);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #A2AFA8;
}

.ff-hl__cal-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.18em;
  flex: none;
  align-content: start;
}
.ff-hl__cal-cell {
  min-height: var(--cell);
  height: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--br);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--small);
  line-height: normal;
  background: #FFFFFF;
  color: #012D10;
  border: var(--bw) solid transparent;
  outline: none;
}
/* A future day is drawn and inert — never removed, so the month keeps its
   shape and nothing shifts as the weeks pass. */
.ff-hl__cal-cell.is-future { color: #A2AFA8; cursor: default; }
.ff-hl__cal-cell.is-sel { background: #41ED98; color: #E9FFE1; border-color: #41ED98; }
.ff-hl__cal-cell:focus-visible { outline: 2px solid #013F17; outline-offset: -2px; }

.ff-hl__cal-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.4em;
  flex: none;
}
.ff-hl__cal-clear {
  background: none;
  border: none;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0.5em 1.2em;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--micro);
  line-height: normal;
  color: #012D10;
  cursor: pointer;
  outline: none;
}
.ff-hl__cal-clear:hover { color: #41ED98; }
.ff-hl__cal-clear:focus-visible { outline: 2px solid #013F17; outline-offset: -2px; }
.ff-hl__cal-clear:active { transform: scale(0.94); }

/* ── The two states the reference never has ──────────────────────────────── */

/* A save that failed, on the chrome layer. The reference's column is a fixed
   vertical rhythm and one more line moves everything, so this costs the stage
   nothing — the arrangement Last look uses for its own foot line. */
.ff-hl__foot {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vw, 40px);
  z-index: 5;
  transform: translateX(-50%);
  margin: 0;
  width: min(62vw, 900px);
  max-width: none;
  text-align: center;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.006em;
  text-wrap: pretty;
}
.ff-hl__foot-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #013F17;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* `.wrap` is a VIEWPORT width (`min(90vw, 1600px)`), so `SurfaceLoading`'s own
   `Section` would compute wider than this box and spill — PHASE 38's finding,
   in its general form. The section's vertical rhythm goes with it: this box is
   already centred, so padding above and below only moves it off centre. */
.ff-hl__state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 34rem);
  margin: 0;
  max-width: none;
  color: #013F17;
}
.ff-hl__state .wrap { width: 100%; }
.ff-hl__state .section { padding-block: 0; }
.ff-hl__state .measure { max-width: none; }

/* ══════════════════════════════════════════ PHASE 65 — RESPONSIVE ══
   One media query, and it is not a reflow: the stage is one composition at
   every width (`isClaimPhone()` is `false` in the reference). What changes is
   the furniture, which was never on the stage — at phone width the foot line
   would sit under the Back control, so it clears it. */
@media (max-width: 600px) {
  .ff-hl__foot {
    width: calc(100vw - 40px);
    bottom: calc(clamp(20px, 3vw, 40px) + 34px);
  }
}

/* ═════════════════════ CREATOR PAY EXPLAINER — reference `scPay` ══ */

/* This page owns the same reference chrome as Brand Voice. */
.ff[data-flow-page='creator-pay-explainer'] .ff__top,
.ff[data-flow-page='creator-pay-explainer'] .ff__badge { display: none; }

.ff-payx {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
  color: #013F17;
  font-size: 16px;
  line-height: normal;
}

.ff-payx__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-payx__back:hover { color: #013F17; }
.ff-payx__back svg { width: 11px; height: 11px; flex: none; }

.ff-payx__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-payx__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-payx__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-payx__help:hover { background: #E9FFE1; }

.ff-payx__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
}
.ff-payx__column {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1900px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ff-payx__art {
  width: 640px;
  height: auto;
  max-width: none;
  display: block;
  mix-blend-mode: multiply;
}
.ff-payx__title {
  margin: 110px 0 0;
  max-width: none;
  font-size: 78px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: #013F17;
  text-align: center;
}
.ff-payx__cta {
  margin-top: 150px;
  width: 1180px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 62px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-payx__cta:hover { background: #3BDC8C; }

.ff-payx__scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  border: none;
  padding: 0;
  background: rgba(1, 45, 16, 0.4);
  animation: ff-payx-scrim-in 0.25s ease both;
  cursor: default;
}
.ff-payx__scrim.is-closing {
  animation: ff-payx-scrim-out 0.28s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.ff-payx__drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(27rem, 88vw);
  height: 100%;
  z-index: 60;
  box-sizing: border-box;
  overflow-y: auto;
  padding: clamp(20px, 2.4vw, 32px) clamp(1.35rem, 4.4vw, 4rem);
  background: #012D10;
  font-family: 'Satoshi', sans-serif;
  animation: ff-payx-drawer-in 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.ff-payx__drawer.is-closing {
  animation: ff-payx-drawer-out 0.28s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.ff-payx__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.8rem, 1.3vw, 1.1rem);
  margin-bottom: clamp(18px, 2.2vw, 28px);
  color: #E9FFE1;
  font-weight: 900;
  font-size: clamp(18px, 1.6vw, 21px);
  letter-spacing: -0.03em;
}
.ff-payx__drawer-close {
  width: clamp(2.75rem, 3.6vw, 3.3rem);
  height: clamp(2.75rem, 3.6vw, 3.3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  background: none;
  color: #E9FFE1;
  cursor: pointer;
}
.ff-payx__drawer-intro {
  margin-bottom: clamp(12px, 1.6vw, 18px);
  color: #A2AFA8;
  font-size: clamp(0.8rem, 0.6vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ff-payx__docs {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
}
.ff-payx__doc {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 1.6vw, 20px);
  border: 2px solid #1B4A2C;
  border-radius: 2px;
  background: transparent;
  text-align: left;
  font-family: 'Satoshi', sans-serif;
  cursor: pointer;
}
.ff-payx__doc:hover { border-color: #41ED98; }
.ff-payx__doc.is-current {
  border-color: #41ED98;
  background: rgba(65, 237, 152, 0.08);
}
.ff-payx__doc-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ff-payx__doc-tag {
  color: #A2AFA8;
  font-size: clamp(0.7rem, 0.55vw, 0.84rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ff-payx__doc.is-current .ff-payx__doc-tag { color: #41ED98; }
.ff-payx__doc-title {
  color: #E9FFE1;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.ff-payx__doc-body {
  color: #A2AFA8;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

@keyframes ff-payx-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ff-payx-scrim-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ff-payx-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes ff-payx-drawer-out { from { transform: translateX(0); } to { transform: translateX(100%); } }

@media (max-width: 600px) {
  .ff-payx__back {
    bottom: 92px;
    padding: 8px 14px;
  }
  .ff-payx__drawer {
    inset: auto 0 0;
    width: 100%;
    height: 86vh;
    animation-name: ff-payx-drawer-up;
  }
  .ff-payx__drawer.is-closing { animation-name: ff-payx-drawer-down; }
}

@keyframes ff-payx-drawer-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ff-payx-drawer-down { from { transform: translateY(0); } to { transform: translateY(100%); } }

/* ═════════════ CREATOR PAYMENT — reference `scPayPick` + `scPay` ══ */
.ff[data-flow-page='creator-payment'] .ff__top,
.ff[data-flow-page='creator-payment'] .ff__badge { display: none; }
.ff[data-flow-page='creator-payment'] .ff__stage { padding: 0; gap: 0; }
.ff[data-flow-page='creator-payment'] .ff__body {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

.ff-paypick {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 25;
  background: #FAFAFA;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  line-height: normal;
}
.ff-paypick__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 12px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font: 900 clamp(10px, .8vw, 12px)/1 'Satoshi', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-paypick__back:hover { color: #013F17; }
.ff-paypick__back svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ff-paypick__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-paypick__logo { display: block; width: auto; height: clamp(26px, 2.4vw, 36px); }
.ff-paypick__help {
  min-height: 40px;
  padding: 10px 22px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font: 900 clamp(12px, 1vw, 15px)/1 'Satoshi', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-paypick__help:hover { background: #E9FFE1; }
.ff-paypick__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2496px;
  height: 1542px;
  transform: translate(-50%, -50%) scale(.37);
  transform-origin: center;
}
.ff-paypick__column {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1700px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ff-paypick__note { color: #013F17; font-size: 44px; font-weight: 700; letter-spacing: -.02em; }
.ff-paypick__title {
  margin: 70px 0 0;
  color: #013F17;
  font-size: 110px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-align: center;
}
.ff-paypick__art-row {
  width: 100%;
  height: 520px;
  margin-top: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ff-paypick__arrow {
  width: 124px;
  height: 124px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.ff-paypick__arrow:hover { transform: scale(1.06); }
.ff-paypick__arrow svg {
  width: 55px;
  height: 55px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ff-paypick__art {
  display: block;
  width: 480px;
  height: 480px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: multiply;
  animation: ff-paypick-card .25s cubic-bezier(.22, 1, .36, 1) both;
}
.ff-paypick__body {
  width: 1150px;
  margin: 110px 0 0;
  color: #013F17;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.ff-paypick__cta,
.ff-paypick__explainer-cta {
  width: 1150px;
  height: 134px;
  margin-top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font: 900 58px/1 'Satoshi', sans-serif;
  letter-spacing: -.02em;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(255, 255, 255, .42) inset;
}
.ff-paypick__cta:hover,
.ff-paypick__explainer-cta:hover { background: #3BDC8C; }
.ff-paypick__cta:disabled { cursor: wait; opacity: .72; }
.ff-paypick__error { width: 1150px; margin: 26px 0 -54px; color: #B42318; font-size: 30px; font-weight: 700; }

.ff-paypick__modal-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 63, 23, .35);
}
.ff-paypick__modal {
  width: min(720px, 86vw);
  box-sizing: border-box;
  padding: clamp(56px, 6.4vw, 92px) clamp(28px, 3.4vw, 48px);
  border: 3px solid #41ED98;
  border-radius: 2px;
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: ff-paypick-modal .34s cubic-bezier(.215, .61, .355, 1) both;
}
.ff-paypick__modal-tag { color: #7FD9A4; font-size: clamp(11px, 1vw, 14px); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.ff-paypick__modal p { margin: clamp(26px, 2.8vw, 38px) 0 0; color: #013F17; font-size: clamp(18px, 1.8vw, 26px); font-weight: 700; line-height: 1.4; letter-spacing: -.02em; text-wrap: pretty; }
.ff-paypick__modal button { width: 100%; height: clamp(52px, 5vw, 68px); margin-top: clamp(40px, 4.4vw, 60px); border: 0; border-radius: 2px; background: #41ED98; color: #FAFAFA; font: 900 clamp(16px, 1.5vw, 22px)/1 'Satoshi', sans-serif; letter-spacing: -.02em; cursor: pointer; box-shadow: 0 3px 12px rgba(255, 255, 255, .42) inset; }

.ff-paypick__explainer-column {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1900px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ff-paypick__explainer-art { display: block; width: 640px; height: auto; mix-blend-mode: multiply; }
.ff-paypick__explainer-title { margin: 110px 0 0; color: #013F17; font-size: 78px; font-weight: 500; line-height: 1.34; letter-spacing: -.02em; text-align: center; }
.ff-paypick__explainer-cta { width: 1180px; height: 150px; margin-top: 150px; font-size: 62px; }

@keyframes ff-paypick-card { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes ff-paypick-modal { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .ff-paypick__back { bottom: 20px; }
  .ff-paypick__stage {
    inset: 0;
    width: auto;
    height: auto;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }
  .ff-paypick__column,
  .ff-paypick__explainer-column {
    position: static;
    width: 100%;
    transform: none;
  }
  .ff-paypick__note { font-size: min(3.8vw, 17px); text-align: center; }
  .ff-paypick__title { margin-top: 16px; font-size: min(8vw, 36px); }
  .ff-paypick__art-row { height: 26vh; margin-top: 4vh; }
  .ff-paypick__arrow { width: 48px; height: 48px; }
  .ff-paypick__arrow svg { width: 21px; height: 21px; }
  .ff-paypick__art { height: 100%; width: auto; aspect-ratio: 1; }
  .ff-paypick__body { width: 100%; margin-top: 4vh; font-size: min(4.4vw, 20px); }
  .ff-paypick__cta { width: 100%; height: 60px; margin-top: 4vh; flex: none; font-size: min(5.4vw, 24px); }
  .ff-paypick__error { width: 100%; margin: 10px 0 -10px; font-size: 14px; }
  .ff-paypick__explainer-art { width: 72vw; max-width: 340px; }
  .ff-paypick__explainer-title { margin-top: 5vh; font-size: min(6.6vw, 30px); }
  .ff-paypick__explainer-cta { width: 100%; height: 60px; margin-top: 6vh; font-size: min(5.4vw, 24px); }
}

/* ══════════════════════ PHASE 67 — screen 23, add your FAQ’s, rebuilt 1:1
   from the reference (Founder Flow v2, `[data-faq]` / `kindWide`), 2026-08-21.

   Drawn to the supplied reference (`Proovd Founder Flow v2.dc.html`) and
   measured against it in a real browser at 1600x793, on the terms every other
   1:1 screen of this flow ships under: the reference outranks the design system
   HERE, and nowhere else.

   ── This is not the old `.ff-faq` ─────────────────────────────────────────
   Session F's `.ff-faq` was a two-column form-and-card-list at the product's
   own token sizes, inside `BuildStepPage`. It is gone with its markup. The
   prefix is kept because the screen is the same answer and the old rules are
   replaced wholesale rather than sitting beside these — unlike `.ff-vc`, which
   had to differ from `.ff-voice` because both existed at once for a while.

   ── The layout model is the reference's, literally ────────────────────────
   `position:fixed;inset:0;overflow:hidden` around a fixed 2496x1542 stage,
   scaled to the viewport by `fitStages()`:

       let s = Math.min(innerWidth/2496, innerHeight/1542) * (pageScale || .78);

   No branch of that function names `build`, so this screen takes `pageScale`
   alone. The component owns the scale and writes the whole transform on mount
   and on resize; the `scale(0.4011)` below is what renders for the one frame
   before the layout effect runs, and is the value measured at 1600x793.

   Inside it, a 2260px grid centred on the stage:

       grid-template-columns: minmax(0,1.12fr) minmax(0,1.08fr);
       gap: 130px; align-items: center;

   which resolves to 1084.36px / 1045.64px — the numbers Chrome reports for the
   reference. `align-items:center` is load-bearing rather than incidental: the
   right column is a fixed 1333px rhythm and the left one changes height with
   the preview text (measured 1151 → 1143 → 1174 as a card fills and a delete
   control appears), so the two share a centre line and never a top edge.
   Nothing here reflows — the stage scales instead, which is why the composition
   is identical at every viewport (§33.11.1).

   `isClaimPhone()` returns `false` in the reference — "one composition
   everywhere: the phone posture stays off" — so its `kindPhone` branch is dead
   code and this composition is what every viewport gets, exactly as there.

   ── The two suspended conventions, as on screens 1–15 and 21 ──────────────
     - HEX LITERALS, not tokens. `#FAFAFA`, `#013F17`, `#41ED98`, `#E9FFE1`,
       `#E7F7EA`, `#4E8C67`, `#A2AFA8`, `#7FA98D`, `#012D10` and `#3BDC8C` are
       the reference's own; mixing literal and token would leave half the screen
       able to drift with a token change and half not.
     - RADIUS 2px, literal. It is what `var(--radius)` resolves to under the
       owner ruling, so the two agree today; the literal is here for the same
       reason the colours are.

   ── What the project's globals do to this screen, overridden explicitly ───
   `body`'s 18px / line-height 1.6 reaches the whole fixed layer — the
   reference's own body sets a family and nothing else — so the layer and the
   stage both reset it. `h1..h6 { margin; line-height:1.18; font-weight:900 }`
   reaches the headline, `p { margin; max-width: var(--measure) }` reaches the
   lede and the preview body, `label` carries the design system's own field
   treatment, and `input`/`textarea` carry its field chrome. Every one is
   overridden here rather than worked around.

   ── The four blocks the reference does not draw ───────────────────────────
   `.ff-faq__note` (the §12 lock), `.ff-faq__save` (§9's three phrases),
   `.ff-faq__live` (what just happened, announced) and `.ff-faq__state` (the
   failure §1.1 requires). The first three are ABSOLUTELY positioned in the
   chrome, so not one reference box moves for them however long they get.
   ═════════════════════════════════════════════════════════════════════════ */

/* `FlowPage`'s chrome is not drawn on this screen, and the reason is not that
   the reference has none. It has a wordmark and a HELP and it draws them INSIDE
   the `z-index: 25` fixed layer below. Left in place they would sit under that
   layer and be unreachable, so both are hidden and both leave the tab order
   with it. There is no message badge here: the reference draws none, and
   `FlowPage` is no longer asked for one. */
.ff[data-flow-page='faqs'] .ff__top,
.ff[data-flow-page='faqs'] .ff__badge { display: none; }

/* The reference's `[data-faq]`. Nothing scrolls. */
.ff-faq {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
  color: #013F17;
  font-size: 16px;
  line-height: normal;
}

/* ── The chrome. Its `clamp()`s are the reference's own, and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-faq__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-faq__back:hover { color: #013F17; }
/* The reference has no focus treatment anywhere. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11), and it costs the composition nothing. */
.ff-faq__back:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-faq__back svg { width: 11px; height: 11px; flex: none; }

.ff-faq__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-faq__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-faq__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-faq__help:hover { background: #E9FFE1; }
.ff-faq__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* ── The stage, and the 2260px grid inside it ────────────────────────────── */

.ff-faq__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.4011);
  transform-origin: center center;
  color: #013F17;
  font-size: 16px;
  line-height: normal;
}

.ff-faq__grid {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2260px;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.08fr);
  gap: 130px;
  align-items: center;
}

/* ── The left column: `data-anim="art"` ──────────────────────────────────── */

.ff-faq__art {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* `data-flourish="1"` — the preview card. `min-height` rather than `height`,
   because the reference's own box grows with the answer: measured, 828px with
   the placeholder sentences in it and 820px (its floor) with a one-line real
   answer. */
.ff-faq__card {
  background: #E7F7EA;
  padding: 150px 130px;
  box-sizing: border-box;
  min-height: 820px;
}
/* No `display` — the reference's span is INLINE, and that is not incidental:
   measured, an inline box's rect is the font's own content area (110 stage px
   at 88px Satoshi) while a block's is the 96.8px line box, so the two report
   different heights for identical glyphs. The baseline lands in the same place
   either way and the wrap width is the same 824px, but `1:1` means the
   declaration the reference has rather than one that renders the same today. */
.ff-faq__cardq {
  font-size: 88px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #013F17;
}
.ff-faq__carda {
  margin: 96px 0 0;
  max-width: none;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: #013F17;
  text-wrap: pretty;
}

/* The two arrows. `border-right:none` on the first is the reference's own, so
   the pair shares one 2px rule down the middle rather than drawing two. */
.ff-faq__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ff-faq__arrow {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #4E8C67;
  border-right: none;
  border-radius: 0;
  background: transparent;
  color: #A2AFA8;
  font-family: 'Satoshi', sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  cursor: pointer;
  outline: none;
}
.ff-faq__arrow--next { border-right: 2px solid #4E8C67; }
/* `faqPrevFg` / `faqNextFg`: `#013F17` when the move is available and `#A2AFA8`
   when it is not. The reference leaves both clickable and decides in the
   handler, which is reproduced — see the component for why they are not
   `disabled`. */
.ff-faq__arrow[data-on='true'] { color: #013F17; }
.ff-faq__arrow[data-on='true']:hover { background: #E9FFE1; }
.ff-faq__arrow[data-on='false'] { cursor: default; }
.ff-faq__arrow:focus-visible { outline: 4px solid #013F17; outline-offset: -6px; }

.ff-faq__row {
  margin-top: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.ff-faq__guide {
  padding: 0 0 16px;
  border: none;
  border-bottom: 5px solid #41ED98;
  border-radius: 0;
  background: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}
.ff-faq__guide:hover { border-bottom-color: #013F17; }
.ff-faq__guide:focus-visible { outline: 4px solid #013F17; outline-offset: 6px; }

.ff-faq__delete {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 44px;
  border: 2px solid #013F17;
  border-radius: 2px;
  background: transparent;
  font-family: 'Satoshi', sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}
.ff-faq__delete:hover { background: #E9FFE1; }
.ff-faq__delete:focus-visible { outline: 4px solid #013F17; outline-offset: 4px; }
.ff-faq__delete:disabled { opacity: 0.45; cursor: default; }

/* ── The right column: `data-anim="panel"` ───────────────────────────────── */

.ff-faq__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* A `span` in the reference; an `h1` here, because §33.11.2 wants exactly one on
   the page and this is the only thing that names it. Every value below is the
   reference's, including the `line-height: normal` the project's own `h1` rule
   would otherwise replace with 1.18. */
.ff-faq__head {
  margin: 0;
  font-size: 76px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.03em;
  color: #013F17;
}
.ff-faq__lede {
  margin: 44px 0 0;
  max-width: none;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: #013F17;
  text-wrap: pretty;
}

/* `faqTitleLabel` / `faqBodyLabel`. A `span` in the reference; a `label` here,
   so the two fields have real accessible names instead of a sentence that
   happens to sit above them (§28.5). The 70px and 56px margins are the
   reference's two different values, which is why this cannot be one rule. */
.ff-faq__label {
  display: block;
  font-family: 'Satoshi', sans-serif;
  font-size: 50px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #013F17;
  text-transform: none;
}
.ff-faq__panel > .ff-faq__label:nth-of-type(1) { margin-top: 70px; }
.ff-faq__panel > .ff-faq__label:nth-of-type(2) { margin-top: 56px; }

.ff-faq__input,
.ff-faq__area {
  margin-top: 26px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 2px solid #013F17;
  border-radius: 2px;
  outline: none;
  font-family: 'Satoshi', sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #013F17;
  min-height: 0;
}
.ff-faq__input { height: 150px; padding: 0 44px; line-height: normal; }
.ff-faq__area { height: 390px; padding: 40px 44px; line-height: 1.4; resize: none; }
.ff-faq__input::placeholder,
.ff-faq__area::placeholder { color: #A2AFA8; opacity: 1; }
.ff-faq__input:focus-visible,
.ff-faq__area:focus-visible { outline: 4px solid #013F17; outline-offset: 6px; }
.ff-faq__input:disabled,
.ff-faq__area:disabled { opacity: 0.6; cursor: default; }

.ff-faq__buttons {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ff-faq__add,
.ff-faq__cta {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 2px;
  font-family: 'Satoshi', sans-serif;
  font-size: 56px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #FAFAFA;
  cursor: pointer;
  outline: none;
}
.ff-faq__add { border: 5px solid #41ED98; background: #013F17; }
.ff-faq__add:hover { background: #012D10; }
.ff-faq__add:disabled { opacity: 0.45; cursor: default; }
.ff-faq__cta {
  border: none;
  background: #41ED98;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-faq__cta:hover { background: #3BDC8C; }
.ff-faq__add:focus-visible,
.ff-faq__cta:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }

/* ── §9's three phrases, the §12 lock, and the failure ──────────────────────
   None of it is on the reference's screen: it holds its record in memory and
   never waits for one. All of it is absolutely positioned so a save that fails
   or a lock notice can never move the stage — the composition is a fixed
   rhythm, and one extra line inside it would push the CTA off the bottom at a
   narrow height. */

.ff-faq__save {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vw, 40px);
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  max-width: min(90vw, 40rem);
  text-align: center;
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7FA98D;
}
/* A retry and a refusal are the two a Founder has to act on, so they are the
   two that are legible rather than quiet (§1.4). */
.ff-faq__save[data-loud='true'] { color: #013F17; }

.ff-faq__note {
  position: absolute;
  left: 50%;
  top: clamp(76px, 7vw, 104px);
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  width: min(90vw, 46rem);
  max-width: none;
  text-align: center;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 500;
  line-height: 1.45;
  color: #013F17;
}

.ff-faq__state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 34rem);
  margin: 0;
  max-width: none;
  color: #013F17;
}
.ff-faq__state .wrap { width: 100%; }
.ff-faq__state .section { padding-block: 0; }
.ff-faq__state .measure { max-width: none; }

/* ══════════════════════════════════════════ PHASE 67 — RESPONSIVE ══
   The reference's own one media query for this screen, and it is not a reflow:
   the stage is one composition at every width and scales to it.

       @media (max-width:600px){[data-back]{bottom:92px !important;padding:8px 14px !important;}}

   What moves is the furniture, which was never on the stage. Caught by the
   1280/320 screenshot pass rather than by reading — the rule lives in the
   reference's own `<style>` block rather than beside the control it moves, and
   measured at 320 the app's BACK sat 72px below the reference's. */
@media (max-width: 600px) {
  .ff-faq__back { bottom: 92px; padding: 8px 14px; }
  /* §9's line would sit under the Back control at phone width. */
  .ff-faq__save { bottom: calc(92px + 34px); }
}

/* ═════════════════════════════ FOUNDER FLOW — CREATOR MATCH ══════════════
   The reference's `[data-match]`, copied in its own 2496 × 1542 coordinate
   space. It deliberately has no FlowPage chrome: the whole viewport is the
   click target, and the three illustrations are the only furniture. */

.ff-match {
  position: fixed;
  inset: 0;
  overflow: hidden;
  margin: 0;
  background: #FAFAFA;
  z-index: 25;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  line-height: normal;
  cursor: pointer;
}

.ff-match__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
}

.ff-match__lockup {
  position: absolute;
  left: 1248px;
  top: 628px;
  width: 1900px;
  transform: translate(-50%, calc(-50% - 60px));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ff-match__mark {
  width: 452px;
  height: 327px;
  max-width: none;
  display: block;
}

.ff-match__panel {
  margin-top: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}

.ff-match__count {
  margin: 0;
  max-width: none;
  color: #013F17;
  font-size: 198px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.ff-match__types {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: #013F17;
  font-size: 56px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.012em;
}

.ff-match__sub {
  margin-top: 96px;
  color: #013F17;
  font-size: 74px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.02em;
}

.ff-match__cta {
  margin-top: 120px;
  width: 640px;
  height: 134px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid #41ED98;
  box-sizing: border-box;
  border-radius: 2px;
  background: #013F17;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 54px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-match__cta:hover { transform: scale(1.02); }

.ff-match__cupid {
  position: absolute;
  bottom: -1vw;
  height: auto;
  max-width: none;
  display: block;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.ff-match__cupid--left { left: -1vw; width: 20vw; }
.ff-match__cupid--right { right: -1vw; width: 21vw; }

/* The reference's only responsive branch is a small coarse-pointer portrait
   guard. Dismissing it leaves the same fixed landscape composition underneath. */
.ff-match-rotate {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
  background: #FAFAFA;
  color: #013F17;
  text-align: center;
  font-family: 'Satoshi', sans-serif;
  line-height: normal;
  cursor: pointer;
}
.ff-match-rotate img {
  width: auto;
  height: 34px;
  max-width: none;
  display: block;
}
.ff-match-rotate__title {
  color: #013F17;
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ff-match-rotate__body {
  max-width: 34ch;
  color: #669370;
  font-size: clamp(14px, 3vw, 17px);
  font-weight: 500;
}
.ff-match-rotate__action {
  margin-top: 6px;
  color: #41ED98;
  font-size: clamp(12px, 2.6vw, 14px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Rewards setup — reference page geometry is a fixed 2496×1542 stage. */
.ff[data-flow-page='rewards'] .ff__top,
.ff[data-flow-page='rewards'] .ff__badge { display: none; }
.ff[data-flow-page='rewards'] .ff__stage { gap: 0; padding: 0; }
.ff[data-flow-page='rewards'] .ff__body { display: block; max-width: none; margin: 0; padding: 0; }

.ff-reward-ref {
  position: fixed;
  z-index: 25;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  line-height: normal;
}
.ff-reward-ref *, .ff-reward-ref *::before, .ff-reward-ref *::after { box-sizing: border-box; }
.ff-reward-ref__top {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-reward-ref__logo { display: block; width: auto; height: clamp(26px, 2.4vw, 36px); }
.ff-reward-ref__help {
  min-height: 40px;
  padding: 10px 22px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font: 900 clamp(12px, 1vw, 15px)/1 'Satoshi', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.ff-reward-ref__help:hover { background: #E9FFE1; }
.ff-reward-ref__back {
  position: absolute;
  z-index: 6;
  bottom: clamp(20px, 3vw, 40px);
  left: clamp(20px, 3vw, 46px);
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: #41ED98;
  font: 900 clamp(10px, .8vw, 12px)/1 'Satoshi', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease;
  gap: 8px;
}
.ff-reward-ref__back:hover { color: #013F17; }
.ff-reward-ref__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2496px;
  height: 1542px;
  transform-origin: center center;
}
.ff-reward-ref__lockup {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 1980px;
  transform: translate(-50%, calc(-50% + 40px));
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 80px;
}
.ff-reward-ref__intro { display: flex; flex-direction: column; }
.ff-reward-ref__intro h1 {
  width: 100%;
  margin: 0;
  color: #013F17;
  font: 900 70px/1.12 'Satoshi', sans-serif;
  letter-spacing: -.035em;
}
.ff-reward-ref__intro p {
  width: 100%;
  max-width: none;
  margin: 48px 0 0;
  color: #013F17;
  font: 500 36px/1.44 'Satoshi', sans-serif;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.ff-reward-ref__guide {
  align-self: flex-start;
  margin-top: 56px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 3px solid #41ED98;
  background: transparent;
  color: #013F17;
  font: 900 34px/1 'Satoshi', sans-serif;
  letter-spacing: -.02em;
  cursor: pointer;
}
.ff-reward-ref__card-wrap { display: flex; flex-direction: column; }
.ff-reward-ref__card { display: flex; flex-direction: column; padding: 40px; background: #F5F5F5; }
.ff-reward-ref__gift { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.ff-reward-ref__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 46px;
  gap: 40px;
}
.ff-reward-ref__line { display: flex; flex-direction: column; }
.ff-reward-ref__line::after {
  display: block;
  height: 5px;
  background-image: repeating-linear-gradient(90deg, #4E785C 0 14px, transparent 14px 27px);
  content: '';
}
.ff-reward-ref__input-row { display: flex; align-items: center; gap: 12px; }
.ff-reward-ref input, .ff-reward-ref textarea {
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #013F17;
  caret-color: #013F17;
  font-family: 'Satoshi', sans-serif;
}
.ff-reward-ref input::placeholder, .ff-reward-ref textarea::placeholder { color: #A2AFA8; opacity: 1; }
.ff-reward-ref__pencil { display: block; width: 38px; height: 38px; flex: none; margin-top: 4px; }
.ff-reward-ref__title-field { width: 240px; flex: none; }
.ff-reward-ref__title-field::after { margin-top: 20px; }
.ff-reward-ref__title-field input {
  width: 100%;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ff-reward-ref__date-field { width: 186px; flex: none; align-items: center; }
.ff-reward-ref__delivered { color: #A2AFA8; font-size: 24px; font-weight: 500; }
.ff-reward-ref__date-field.has-value .ff-reward-ref__delivered { color: #013F17; }
.ff-reward-ref__date-row { display: flex; width: 100%; align-items: center; margin-top: 8px; gap: 18px; }
.ff-reward-ref__date-row input {
  width: auto;
  flex: 0 1 auto;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ff-reward-ref__date-row .ff-reward-ref__pencil { width: 36px; height: 36px; margin-top: 2px; }
.ff-reward-ref__date-field::after { width: 100%; margin-top: 18px; }
.ff-reward-ref__body-field { margin-top: 92px; }
.ff-reward-ref__body-row { display: flex; align-items: flex-end; gap: 30px; }
.ff-reward-ref__body-row .ff-reward-ref__pencil { margin-top: 0; }
.ff-reward-ref__body-row textarea {
  height: 108px;
  flex: 1;
  overflow: hidden;
  resize: none;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.012em;
}
.ff-reward-ref__body-field::after { margin-top: 24px; }
.ff-reward-ref__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 98px;
  gap: 40px;
}
.ff-reward-ref__price-field { width: 230px; flex: none; }
.ff-reward-ref__price-field .ff-reward-ref__input-row { gap: 10px; }
.ff-reward-ref__price-field input {
  width: 100%;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ff-reward-ref__price-field .ff-reward-ref__pencil { width: 54px; height: 54px; margin-top: 6px; }
.ff-reward-ref__price-field::after { margin-top: 18px; }
.ff-reward-ref__pager { display: flex; gap: 24px; }
.ff-reward-ref__pager button {
  display: flex;
  width: 82px;
  height: 82px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  cursor: pointer;
}
.ff-reward-ref__pager button:disabled { border-color: #D6D6D6; color: #D6D6D6; cursor: default; }
.ff-reward-ref__pager svg { display: block; width: 46px; height: 46px; }
.ff-reward-ref__cta {
  display: flex;
  width: 100%;
  height: 104px;
  align-items: center;
  justify-content: center;
  margin-top: 80px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #41ED98;
  box-shadow: 0 3px 12px rgba(255, 255, 255, .42) inset;
  color: #FAFAFA;
  font: 900 48px/1 'Satoshi', sans-serif;
  letter-spacing: -.02em;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.ff-reward-ref__cta:hover { background: #3BDC8C; }
.ff-reward-ref__delete {
  align-self: center;
  margin-top: 56px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 4px solid #A2AFA8;
  background: transparent;
  color: #A2AFA8;
  font: 700 40px/1 'Satoshi', sans-serif;
  letter-spacing: -.02em;
  cursor: pointer;
}
.ff-reward-ref__delete:hover { border-color: #013F17; color: #013F17; }
.ff-reward-ref__error {
  max-width: none;
  margin: 24px 0 0;
  color: #013F17;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 600px) {
  .ff-reward-ref__back { bottom: 92px; padding: 8px 14px; }
}

/* Campaign in review — fixed 2496×1542 pitch-demo stage. The fixed demo
   covers the regular FlowPage chrome; leaving that chrome untouched keeps the
   genuine lifecycle screen correctly padded when no walkthrough is active. */
.ff-review-ref {
  position: fixed;
  z-index: 25;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  line-height: normal;
}
.ff-review-ref *, .ff-review-ref *::before, .ff-review-ref *::after { box-sizing: border-box; }
.ff-review-ref__top {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-review-ref__logo { display: block; width: auto; height: clamp(26px, 2.4vw, 36px); }
.ff-review-ref__help {
  min-height: 40px;
  padding: 10px 22px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font: 900 clamp(12px, 1vw, 15px)/1 'Satoshi', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-review-ref__help:hover { background: #E9FFE1; }
.ff-review-ref__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2496px;
  height: 1542px;
  transform-origin: center center;
}
.ff-review-ref__lockup {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 2380px;
  align-items: center;
  transform: translate(-50%, -50%);
  flex-direction: column;
}
.ff-review-ref__lens { display: block; width: 1180px; height: auto; }
.ff-review-ref__lockup h1 {
  margin: 88px 0 0;
  color: #013F17;
  font: 900 150px/1.05 'Satoshi', sans-serif;
  letter-spacing: -.035em;
  text-align: center;
}
.ff-review-ref__sub {
  margin: 46px 0 0;
  color: #013F17;
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -.012em;
  text-align: center;
}
.ff-review-ref__creators {
  display: grid;
  width: 100%;
  margin-top: 150px;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.ff-review-ref__creator {
  display: flex;
  align-items: stretch;
  border: 2px solid #E4E4E4;
}
.ff-review-ref__avatar {
  display: flex;
  width: 132px;
  align-items: center;
  justify-content: center;
  flex: none;
  background: #A2AFA8;
  color: #E9FFE1;
  font-size: 50px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.ff-review-ref__creator-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 1 1 auto;
  padding: 24px 30px;
  color: #013F17;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.ff-review-ref__creator.is-accepted { border-color: #41ED98; }
.ff-review-ref__creator.is-accepted .ff-review-ref__avatar { background: #013F17; }
.ff-review-ref__affiliate-setup {
  position: relative;
  overflow: hidden;
  width: min(1500px, 78%);
  margin: 150px 0 0;
  padding: 58px 72px;
  border: 2px solid #41ED98;
  background: #FAFAFA;
  color: #013F17;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -.012em;
  text-align: center;
}
.ff-review-ref__affiliate-setup::after {
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -32%;
  width: 24%;
  background: linear-gradient(105deg, transparent, rgba(65, 237, 152, .22), transparent);
  content: '';
  transform: skewX(-18deg);
  animation: ff-review-affiliate-sheen 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ff-review-affiliate-sheen {
  0%, 16% { left: -32%; opacity: 0; }
  26% { opacity: 1; }
  68% { left: 108%; opacity: 1; }
  78%, 100% { left: 108%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ff-review-ref__affiliate-setup::after { animation: none; }
}
.ff-review-ref__note {
  margin: 130px 0 0;
  color: #A2AFA8;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -.012em;
  text-align: center;
}
.ff-review-ref__demo {
  position: absolute;
  z-index: 7;
  bottom: clamp(22px, 3vw, 42px);
  left: clamp(20px, 3vw, 46px);
  max-width: min(48vw, 520px);
  margin: 0;
  color: var(--grey);
  font-size: clamp(12px, .95vw, 15px);
  font-weight: 700;
}
.ff-review-ref__continue {
  position: absolute;
  z-index: 7;
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--dark);
  font: 900 clamp(13px, 1vw, 16px)/1 'Satoshi', sans-serif;
  cursor: pointer;
}
.ff-review-ref__continue:hover { background: var(--mint); }

/* ══════════════════════ SCREEN 22 — reference `scGoal` ═══════════════════ */
.ff[data-flow-page='threshold'] .ff__top,
.ff[data-flow-page='threshold'] .ff__badge { display: none; }
.ff[data-flow-page='threshold'] .ff__stage { padding: 0; gap: 0; }
.ff[data-flow-page='threshold'] .ff__body {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

.ff-goal {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 25;
  background: #FAFAFA;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  line-height: normal;
  --goal-px: clamp(1.35rem, 4.4vw, 4rem);
  --goal-tap: clamp(2.75rem, 3.6vw, 3.3rem);
}
.ff-goal *, .ff-goal *::before, .ff-goal *::after { box-sizing: border-box; }

.ff-goal__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(10px, .8vw, 12px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-goal__back:hover { color: #013F17; }

.ff-goal__top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-goal__logo {
  display: block;
  width: auto;
  height: clamp(26px, 2.4vw, 36px);
  max-width: none;
}
.ff-goal__help {
  min-height: 40px;
  margin: 0;
  padding: 10px 22px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ff-goal__help:hover { background: #E9FFE1; }

.ff-goal__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2496px;
  height: 1542px;
  transform: translate(-50%, -50%) scale(.37);
  transform-origin: center;
}
.ff-goal__column {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1980px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
}
.ff-goal__note {
  margin: 0;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 58px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -.02em;
}
.ff-goal__sub {
  margin-top: 36px;
  color: #013F17;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ff-goal__panel {
  position: relative;
  width: 1980px;
  height: 470px;
  margin-top: 130px;
  border: 4px solid #013F17;
  background: #FAFAFA;
}
.ff-goal__panel[data-empty='true'] {
  border-color: transparent;
  background: #F1F1F1;
}
.ff-goal__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 80px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 150px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -.03em;
}
.ff-goal__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 44px 80px;
  color: #A2AFA8;
  pointer-events: none;
}
.ff-goal__example { font-size: 44px; font-weight: 500; }
.ff-goal__example-value {
  margin-top: 14px;
  font-size: 150px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
}
.ff-goal__minimum {
  align-self: flex-end;
  margin-top: auto;
  font-size: 44px;
  font-weight: 500;
}
.ff-goal__body {
  width: 1980px;
  max-width: none;
  margin: 140px 0 0;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: 52px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.ff-goal__hint {
  align-self: flex-start;
  margin-top: 36px;
  color: #41ED98;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ff-goal__continue {
  width: 1980px;
  height: 170px;
  margin: 140px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 2px;
  background: #41ED98;
  box-shadow: 0 3px 12px rgba(255,255,255,.42) inset;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 70px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -.02em;
  cursor: pointer;
}
.ff-goal__continue:hover { background: #3BDC8C; }
.ff-goal__save {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ff-goal__state { width: min(42rem, 100%); margin: auto; }

.ff-goal-help__scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(1,45,16,.4);
}
.ff-goal-help {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 60;
  width: min(27rem, 88vw);
  height: 100%;
  overflow-y: auto;
  padding: clamp(20px, 2.4vw, 32px) var(--goal-px);
  background: #012D10;
  color: #E9FFE1;
  font-family: 'Satoshi', sans-serif;
}
.ff-goal-help__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.8rem, 1.3vw, 1.1rem);
  margin-bottom: clamp(18px, 2.2vw, 28px);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 900;
  letter-spacing: -.03em;
}
.ff-goal-help__head button {
  width: var(--goal-tap);
  height: var(--goal-tap);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: #E9FFE1;
  cursor: pointer;
}
.ff-goal-help__intro {
  margin-bottom: clamp(12px, 1.6vw, 18px);
  color: #A2AFA8;
  font-size: clamp(.7rem, .82vw, .8rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ff-goal-help__docs { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 16px); }
.ff-goal-help__docs button,
.ff-goal-help__docs section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 1.6vw, 20px);
  border: 2px solid #1B4A2C;
  border-radius: 2px;
  background: transparent;
  color: #A2AFA8;
  font-family: 'Satoshi', sans-serif;
  text-align: left;
  cursor: default;
}
.ff-goal-help__docs button.is-current,
.ff-goal-help__docs section.is-current { border-color: #41ED98; background: rgba(65,237,152,.08); }
.ff-goal-help__docs button:hover { border-color: #41ED98; }
.ff-goal-help__tag {
  color: #A2AFA8;
  font-size: clamp(.62rem, .72vw, .72rem);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ff-goal-help__docs .is-current .ff-goal-help__tag { color: #41ED98; }
.ff-goal-help__docs strong {
  margin-top: 2px;
  color: #E9FFE1;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.ff-goal-help__docs button > span:last-child,
.ff-goal-help__docs section > span {
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}
.ff-goal-help__reference {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (min-width: 1500px) {
  .ff-goal { --goal-px: clamp(4rem, 5vw, 7rem); --goal-tap: clamp(3.1rem, 2.6vw, 3.7rem); }
  .ff-goal-help__intro { font-size: clamp(.8rem, .6vw, .92rem); }
  .ff-goal-help__tag { font-size: clamp(.7rem, .55vw, .84rem); }
}
@media (max-width: 600px) {
  .ff-goal-help { inset: auto 0 0 0; width: 100%; height: 86vh; }
}


/* ══════════════════════ PHASE 68 — screen 20, you’re in / please pay, rebuilt
   1:1 from the reference (Founder Flow v2, `[data-paynow]` / `kindWide`),
   2026-08-21.

   Drawn to the supplied reference (`Proovd Founder Flow v2.dc.html`) and
   measured against it in a real browser at 1320x900, on the terms every other
   1:1 screen of this flow ships under: the reference outranks the design system
   HERE, and nowhere else.

   ── This replaces `.ff-money`'s use on the fee page, not `.ff-money` ───────
   Session E's fee screen shared `.ff-money` with `CreatorPaymentStep` and
   `BuildStepPage`, which still use it. What went with the old markup is only
   the four rules nothing else read — `__amount`, `__amount--paid`, `__saving`
   and `__canceled` — plus the `.ff-lines` family, which was this page's alone.
   The prefix here is `.ff-fee`: `.ff-pay` is already taken by `.ff-payx` (the
   Creator-pay explainer) and `.ff-payouts`.

   ── The layout model is the reference's, literally ────────────────────────
   `position:fixed;inset:0;overflow:hidden` around a fixed 2496x1542 stage,
   scaled to the viewport by `fitStages()`:

       let s = Math.min(innerWidth/2496, innerHeight/1542) * (pageScale || .78);

   The component owns the scale and writes the whole transform on mount and on
   resize. For this screen the fitted result is capped at the reference's
   authored `scale(0.37)`, so desktop viewports do not enlarge its typography
   and controls beyond the supplied composition; narrow viewports can still
   shrink it. The fallback below uses that same cap for the first frame.

   Inside it, a 2220px column centred on the stage, `flex-direction: column;
   align-items: center`. Every child carries the reference's own pixel value on
   that stage: an 118px/900/lh-1 headline, 150px to a 290px/900/lh-.9 number,
   110px to a 56px/900 line, 110px to a 1130x130 outlined control, 36px to a
   1130x150 CTA. Nothing reflows — the stage scales, which is why the
   composition is identical at every viewport (§33.11.1).

   `isClaimPhone()` returns `false` in the reference — "one composition
   everywhere: the phone posture stays off" — so its `kindPhone` branch is dead
   code and this composition is what every viewport gets, exactly as there.

   ── The two suspended conventions, as on every 1:1 screen of this flow ────
     - HEX LITERALS, not tokens. `#FAFAFA`, `#013F17`, `#41ED98`, `#3BDC8C`,
       `#E9FFE1`, `#4E8C67`, `#7FD9A4`, `#A2AFA8` and `rgba(1,63,23,.35)` are
       the reference's own; mixing literal and token would leave half the screen
       able to drift with a token change and half not.
     - RADIUS 2px, literal. It is what `var(--radius)` resolves to under the
       owner ruling, so the two agree today; the literal is here for the same
       reason the colours are.

   ── The UA button padding is reproduced, not normalised ───────────────────
   The reference's two stage buttons set no padding, so Chrome's own `1px 6px`
   applies and `box-sizing: border-box` (its global `*` rule) takes it out of
   the declared 1130x130 and 1130x150. Both are stated here rather than reset,
   because a reset changes where the label sits inside the box.

   ── What the project's globals do to this screen, overridden explicitly ───
   `body`'s 18px / line-height 1.6 reaches the whole fixed layer — the
   reference's own body sets a family and a colour and nothing else — so the
   layer and the stage both reset it. `h1..h6 { margin; line-height:1.18;
   font-weight:900 }` reaches the headline, `p { margin; max-width: var(
   --measure) }` reaches every sentence in the sheet, and `label`/`input` carry
   the design system's field treatment. Every one is overridden here.

   ── The sheet is the reference's OTHER card, borrowed ─────────────────────
   §13's billing address, Stripe Tax total and Appendix A.5 have no room in this
   composition. Rather than invent a treatment for them, the sheet is
   `[data-pay-modal]` from the adjacent `[data-paypick]` screen — 720px, 3px
   `#41ED98`, radius 2px, over `rgba(1,63,23,.35)`, centred — with `payModalIn`
   as its entrance. It scrolls internally, so however long the consent runs the
   card never grows past the viewport.

   ── The blocks the reference does not draw ────────────────────────────────
   `.ff-fee__note` (the §31.6 deadline, and Stripe's cancelled return) and
   `.ff-fee__state` (the failure, §13's two refusals, and a fee that has not
   been calculated). The first is ABSOLUTELY positioned in the chrome, so not
   one reference box moves for it however long it gets; the second replaces the
   stage outright, because a payment screen showing a hero over a control that
   will refuse is worse than no hero.
   ═════════════════════════════════════════════════════════════════════════ */

/* `FlowPage`'s chrome is not drawn on this screen, and the reason is not that
   the reference has none. It has a wordmark and a HELP and it draws them INSIDE
   the `z-index: 25` fixed layer below. Left in place they would sit under that
   layer and be unreachable, so both are hidden and both leave the tab order
   with it. There is no message badge here: the reference draws none, and §30
   forbids a second control competing for the press in a payment state. */
.ff[data-flow-page='fee'] .ff__top,
.ff[data-flow-page='fee'] .ff__badge { display: none; }

/* The reference's `[data-paynow]`. Nothing scrolls. */
.ff-fee {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FAFAFA;
  z-index: 25;
  font-family: 'Satoshi', sans-serif;
  color: #013F17;
  font-size: 16px;
  line-height: normal;
}

/* ── The chrome. Its clamps are the reference's own, and they are
   viewport-relative there too: this is furniture rather than part of the
   composition, so it does not scale with the stage. ─────────────────────── */

.ff-fee__back {
  position: absolute;
  left: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 30px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-fee__back:hover { color: #013F17; }
/* The reference has no focus treatment anywhere. A visible one is added rather
   than reproduced, because a control a keyboard user cannot locate is not the
   same control (§28.5, §33.11), and it costs the composition nothing. */
.ff-fee__back:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-fee__back svg { width: 11px; height: 11px; flex: none; }

.ff-fee__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 46px);
}
.ff-fee__logo {
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.ff-fee__help {
  padding: 10px 22px;
  min-height: 40px;
  border: 2px solid #41ED98;
  border-radius: 2px;
  background: transparent;
  color: #41ED98;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 15px);
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-fee__help:hover { background: #E9FFE1; }
.ff-fee__help:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }

/* The reference's page-specific HELP drawer. It contains only the reading for
   this page plus the founder handbook; it is not the app's flow navigator. */
.ff-fee-help__scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(1, 45, 16, 0.4);
}
.ff-fee-help {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 60;
  width: min(27rem, 88vw);
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  padding: clamp(20px, 2.4vw, 32px) clamp(1.35rem, 4.4vw, 4rem);
  background: #012D10;
  color: #E9FFE1;
  font-family: 'Satoshi Payout Reference', 'Satoshi', sans-serif;
}
.ff-fee-help__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.8rem, 1.3vw, 1.1rem);
  margin-bottom: clamp(18px, 2.2vw, 28px);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.03em;
}
.ff-fee-help__head button {
  width: clamp(2.75rem, 3.6vw, 3.3rem);
  height: clamp(2.75rem, 3.6vw, 3.3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: #E9FFE1;
  cursor: pointer;
}
.ff-fee-help__intro {
  margin-bottom: clamp(12px, 1.6vw, 18px);
  color: #A2AFA8;
  font-size: clamp(0.7rem, 0.82vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ff-fee-help__docs {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
}
.ff-fee-help__docs button,
.ff-fee-help__docs section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(14px, 1.6vw, 20px);
  border: 2px solid #1B4A2C;
  border-radius: 2px;
  background: transparent;
  color: #A2AFA8;
  font-family: 'Satoshi Payout Reference', 'Satoshi', sans-serif;
  text-align: left;
  cursor: default;
}
.ff-fee-help__docs button.is-current,
.ff-fee-help__docs section.is-current {
  border-color: #41ED98;
  background: rgba(65, 237, 152, 0.08);
}
.ff-fee-help__docs button:hover { border-color: #41ED98; }
.ff-fee-help__tag {
  color: #A2AFA8;
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
  font-weight: 900;
  line-height: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ff-fee-help__docs .is-current .ff-fee-help__tag { color: #41ED98; }
.ff-fee-help__docs strong {
  margin-top: 2px;
  color: #E9FFE1;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.ff-fee-help__docs button > span:last-child,
.ff-fee-help__docs section > span {
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

@media (min-width: 1500px) {
  .ff-fee-help {
    padding-inline: clamp(4rem, 5vw, 7rem);
  }
  .ff-fee-help__head button {
    width: clamp(3.1rem, 2.6vw, 3.7rem);
    height: clamp(3.1rem, 2.6vw, 3.7rem);
  }
  .ff-fee-help__intro { font-size: clamp(0.8rem, 0.6vw, 0.92rem); }
  .ff-fee-help__tag { font-size: clamp(0.7rem, 0.55vw, 0.84rem); }
}

@media (max-width: 600px) {
  .ff-fee-help { inset: auto 0 0 0; width: 100%; height: 86vh; }
}

/* ── The stage, and the 2220px column inside it ──────────────────────────── */

.ff-fee__stage {
  width: 2496px;
  height: 1542px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.37);
  transform-origin: center center;
  color: #013F17;
  font-size: 16px;
  line-height: normal;
}

.ff-fee__column {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2220px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* h1 data-anim="head": margin 0; 118px/900; line-height 1; -.035em; #013F17;
   text-align center. */
.ff-fee__head {
  margin: 0;
  max-width: none;
  font-size: 118px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #013F17;
  text-align: center;
}

/* span data-anim="fee": margin-top 150px; 290px/900; line-height .9; -.045em.

   A flex item, so the span blockifies and its box is the line box — 261px tall
   at line-height .9, which is what the reference reports. */
.ff-fee__amount {
  margin-top: 150px;
  font-size: 290px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: #013F17;
  /* No `white-space: nowrap`, deliberately. It was here as a guard and the
     field-by-field comparison caught it: the reference reports `text-wrap:
     wrap` on this span and an amount has no break opportunity in it anyway, so
     the guard bought nothing and cost a difference. */
}

/* span data-anim="sub": margin-top 110px; 56px/900; -.02em; #41ED98. */
.ff-fee__saved {
  margin-top: 110px;
  font-size: 56px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  color: #41ED98;
  /* No `text-align`. The reference sets one on its phone branch and not on
     this one, and the span is a shrink-to-fit flex item, so `start` is what it
     computes there. */
}

/* button data-anim="hint": margin-top 110px; 1130x130; 3px solid #4E8C67;
   radius 2px; transparent; #4E8C67; 52px/500; -.02em;
   transition transform .25s cubic-bezier(.22,1,.36,1); hover scale(1.02). */
.ff-fee__hint {
  margin-top: 110px;
  width: 1130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Chrome's own button padding, which the reference inherits. */
  padding: 1px 6px;
  border: 3px solid #4E8C67;
  border-radius: 2px;
  background: transparent;
  color: #4E8C67;
  font-family: 'Satoshi', sans-serif;
  font-size: 52px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.02em;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ff-fee__hint:hover { transform: scale(1.02); }
.ff-fee__hint:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }

/* button data-anim="cta": margin-top 36px; 1130x150; no border; radius 2px;
   #41ED98; #FAFAFA; 62px/900; -.02em; inset shadow; hover #3BDC8C. */
.ff-fee__cta {
  margin-top: 36px;
  width: 1130px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1px 6px;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: 62px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  text-align: center;
  cursor: pointer;
  outline: none;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-fee__cta:hover { background: #3BDC8C; }
.ff-fee__cta:focus-visible { outline: 6px solid #013F17; outline-offset: 6px; }

/* ── The pay sheet: [data-pay-modal], borrowed from [data-paypick] ───────── */

.ff-fee__scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
  background: rgba(1, 63, 23, 0.35);
}

.ff-fee__sheet {
  width: min(720px, 86vw);
  max-height: 100%;
  box-sizing: border-box;
  padding: clamp(28px, 3.4vw, 52px) clamp(28px, 3.4vw, 48px);
  background: #FAFAFA;
  border: 3px solid #41ED98;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  font-size: 16px;
  line-height: normal;
  /* Nothing scrolls at this level: the card is a three-region column and the
     middle region is the only thing that moves, so the title stays put and the
     ONE action never leaves the screen. `overflow: hidden` here is what stops a
     long consent pushing the pay control below the card's own fold — which is
     what happened before the boxes were measured. */
  overflow: hidden;
}

/* The three regions. */
.ff-fee__sheet-head { flex: none; }
.ff-fee__sheet-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ff-fee__sheet-scroll {
  /* `min-height: 0` is what lets a flex item shrink below its content, which
     is what makes `overflow-y` mean anything inside a column flex container. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(12px, 1.4vw, 18px);
  scrollbar-width: thin;
  scrollbar-color: #41ED98 transparent;
  /* The scroll-shadow: two solid caps that travel WITH the content
     (`background-attachment: local`) sitting over two fixed shadows, so an edge
     darkens only while there is something past it. A payment sheet whose
     consent runs on with no sign that it does is a consent somebody stops
     reading, and a scrollbar alone is 6px of grey in the corner. */
  background:
    linear-gradient(#FAFAFA 40%, rgba(250, 250, 250, 0)) top / 100% 22px no-repeat,
    linear-gradient(rgba(250, 250, 250, 0), #FAFAFA 60%) bottom / 100% 22px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(1, 63, 23, 0.14), rgba(1, 63, 23, 0)) top / 100% 11px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(1, 63, 23, 0.14), rgba(1, 63, 23, 0)) bottom / 100% 11px no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* Its eyebrow: clamp(11px,1vw,14px)/900; .16em; uppercase; #7FD9A4. */
.ff-fee__eyebrow {
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7FD9A4;
}

/* Its paragraph treatment, on the heading this sheet needs and it does not. */
.ff-fee__sheet-title {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  max-width: none;
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #013F17;
}

.ff-fee__sheet-body {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  max-width: none;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #013F17;
}

.ff-fee__sheet-fine--centred { text-align: center; }
.ff-fee__sheet-fine {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  max-width: none;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  line-height: 1.55;
  /* A sentence that states a rule about money is not a caption: #A2AFA8 is the
     reference's own quiet grey and it is under AA on #FAFAFA, so what a Founder
     has to ACT on takes the ink instead (the rule PHASE 45 and 46 each
     recorded). */
  color: #013F17;
  text-align: left;
  align-self: stretch;
}

/* ── The itemisation ─────────────────────────────────────────────────────── */

.ff-fee__lines {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.ff-fee__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.45;
}
.ff-fee__line dt {
  margin: 0;
  font-weight: 500;
  color: #013F17;
}
.ff-fee__line dd {
  margin: 0;
  font-weight: 700;
  color: #013F17;
  font-variant-numeric: tabular-nums;
  /* An amount is one unbreakable token. */
  white-space: nowrap;
}
/* `#3F7856`, not the reference's `#4E8C67`, and only here.

   `#4E8C67` is the reference's own and it stays on `.ff-fee__hint`, where it is
   52px and measures 3.82:1 — over AA's 3.0 for large text. These are 14.5px
   lines in a block the reference does not draw at all, so 3.82 is under the
   4.5 they need, and one of them is the amount a saving took off. Darkened to
   5.07:1, measured. The eyebrow above keeps the reference's own `#7FD9A4`
   (1.63:1): it is that card's own pairing and it duplicates a subject the
   `h2` under it states in ink. */
.ff-fee__line--saving dt,
.ff-fee__line--saving dd { color: #3F7856; }
.ff-fee__line--total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 2px solid #E9FFE1;
}
.ff-fee__line--total dt,
.ff-fee__line--total dd { font-weight: 900; }
/* Not an amount: a sentence in the amount's column, so it does not read as
   one and does not need the tabular figures. */
.ff-fee__pending { font-weight: 500 !important; white-space: normal !important; }

/* ── The two billing fields ──────────────────────────────────────────────── */

.ff-fee__fields {
  margin-top: clamp(20px, 2.2vw, 30px);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.ff-fee__label {
  display: block;
  margin: 0;
  padding: 0;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* A field label at 12px. Same reason again. */
  color: #3F7856;
}
.ff-fee__label + .ff-fee__input { margin-bottom: 10px; }
.ff-fee__input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 2px solid #4E8C67;
  border-radius: 2px;
  background: #FAFAFA;
  color: #013F17;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.01em;
  outline: none;
}
.ff-fee__input::placeholder { color: #A2AFA8; opacity: 1; }
.ff-fee__input:focus-visible { outline: 3px solid #013F17; outline-offset: 3px; }

/* §28.4's own unchecked control keeps the design system's Option treatment —
   the reference has no equivalent to reproduce, and a hand-drawn checkbox is
   the one place in this file where reproducing nothing would cost real ARIA. */
.ff-fee__option {
  margin-top: clamp(18px, 2vw, 26px);
  align-self: stretch;
  text-align: left;
}

/* ── Appendix A.5, verbatim ──────────────────────────────────────────────── */

.ff-fee__consent {
  margin-top: clamp(20px, 2.2vw, 30px);
  align-self: stretch;
  padding: clamp(16px, 1.8vw, 24px);
  border: 2px solid #E9FFE1;
  border-radius: 2px;
  background: #FFFFFF;
  text-align: left;
  /* A.5's nine paragraphs sit in the sheet's own scrolling region rather than
     in a second scroller inside it. Two nested scroll boxes is one too many on
     a payment screen: a person can be scrolling the wrong one and think the
     consent has ended. */
  flex: none;
}
.ff-fee__consent-body {
  margin: 0;
  max-width: none;
  /* The Appendix's own paragraph breaks, preserved. */
  white-space: pre-line;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 500;
  line-height: 1.55;
  color: #013F17;
}

/* ── The sheet's controls ────────────────────────────────────────────────── */

.ff-fee__sheet-cta {
  margin-top: clamp(24px, 2.6vw, 34px);
  width: 100%;
  min-height: clamp(52px, 5vw, 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 18px;
  border: none;
  border-radius: 2px;
  background: #41ED98;
  color: #FAFAFA;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.42) inset;
}
.ff-fee__sheet-cta:hover { background: #3BDC8C; color: #FAFAFA; }
.ff-fee__sheet-cta:focus-visible { outline: 3px solid #013F17; outline-offset: 4px; }
.ff-fee__sheet-cta:disabled { opacity: 0.45; cursor: default; }

.ff-fee__sheet-back,
.ff-fee__sheet-close {
  margin-top: clamp(12px, 1.4vw, 18px);
  padding: 8px 14px;
  min-height: 40px;
  border: none;
  border-radius: 2px;
  background: transparent;
  /* Same reason as the saving lines: 13px controls need 4.5:1 and the
     reference's own green gives 3.82 at this size. */
  color: #3F7856;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 900;
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.ff-fee__sheet-back:hover,
.ff-fee__sheet-close:hover { color: #013F17; }
.ff-fee__sheet-back:focus-visible,
.ff-fee__sheet-close:focus-visible { outline: 2px solid #013F17; outline-offset: 3px; }
.ff-fee__sheet-back:disabled { opacity: 0.45; cursor: default; }

.ff-fee__error {
  margin-top: clamp(16px, 1.8vw, 22px);
  align-self: stretch;
  padding: clamp(12px, 1.4vw, 18px);
  border: 2px solid #013F17;
  border-radius: 2px;
  background: #F7FF9E;
  text-align: left;
}
.ff-fee__error p {
  margin: 0;
  max-width: none;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 500;
  line-height: 1.5;
  color: #013F17;
}
.ff-fee__error p + p { margin-top: 6px; }

/* ── The two blocks the reference does not draw ──────────────────────────── */

/* Absolutely positioned, so however long it gets it cannot move one box of the
   composition — the stage is a fixed rhythm and a line inside it would push the
   CTA down at every viewport. */
.ff-fee__note {
  position: absolute;
  left: 50%;
  top: clamp(76px, 7vw, 104px);
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  width: min(90vw, 48rem);
  max-width: none;
  text-align: center;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 500;
  line-height: 1.45;
  color: #013F17;
}

.ff-fee__state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 34rem);
  margin: 0;
  max-width: none;
  color: #013F17;
}
/* §33.11.2 wants exactly one `h1` per surface and `StatePanel`'s own head is a
   `<p>` — it is a panel, not a page. Sized between the reference's furniture
   and its stage so a state reads as this page in a different condition rather
   than as a different product. */
.ff-fee__state-title {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  max-width: none;
  /* Above `state-panel__head`'s 40px, deliberately. Measured at 1320 the
     first draft rendered the `h1` at 34px UNDER a 40px panel head, so the
     title read as a caption over the state — the inversion Founder Flow
     Sessions E and F each recorded on a different screen. */
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #013F17;
  text-align: center;
}
.ff-fee__state .wrap { width: 100%; }
.ff-fee__state .section { padding-block: 0; }
.ff-fee__state .measure { max-width: none; }

/* ══════════════════════════════════════════ PHASE 68 — RESPONSIVE ══
   The reference's own one media query for this screen, and it is not a reflow:
   the stage is one composition at every width and scales to it.

       @media (max-width:600px){[data-back]{bottom:92px !important;padding:8px 14px !important;}}

   What moves is the furniture, which was never on the stage. */
@media (max-width: 600px) {
  .ff-fee__back { bottom: 92px; padding: 8px 14px; }
}

/* ═══════════════════════════════════ PUBLIC EXCEPTION SCREENS — 2026-08-24
   A bad address and a dead one-time link are destinations, not content pages.
   They own a minimal full-height shell so the recovery message is never
   crowded by the public nav, sitemap, chat, or the StatePanel definition list. */
.state-screen {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--white);
  color: var(--dark);
}
.state-screen__header {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  padding: clamp(1.5rem, 4.6vw, 5.5rem) var(--gutter) 0;
}
.state-screen__brand {
  width: clamp(7.5rem, 9vw, 9rem);
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.state-screen__brand::after { display: none; }
.state-screen__brand img { display: block; width: 100%; height: auto; }
.state-screen__help {
  width: clamp(7.5rem, 10vw, 9rem);
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-16);
  border: var(--bw) solid var(--brand);
  border-radius: var(--radius);
  color: var(--brand);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.state-screen__help::after,
.state-screen__action::after { display: none; }
.state-screen__help:hover,
.state-screen__help:focus-visible {
  background: var(--brand-5);
  color: var(--dark);
}
.state-screen__main {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: min(100%, 90rem);
  margin-inline: auto;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding: clamp(2rem, 4vh, 4rem) var(--gutter) clamp(4rem, 9vh, 8rem);
  text-align: center;
}
.state-screen--artwork .state-screen__main {
  gap: clamp(0.75rem, 1.75vw, 1.75rem);
}
.state-screen__artwork {
  display: block;
  width: clamp(7.5rem, 10vw, 12rem);
  max-width: 70vw;
  max-height: 34vh;
  object-fit: contain;
}
.state-screen__copy {
  width: min(100%, 72rem);
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.state-screen__title {
  max-width: none;
  margin: 0;
  color: var(--brand);
  font-size: clamp(2.15rem, 3.5vw, 4.25rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.state-screen__description {
  max-width: 54rem;
  margin: 0;
  color: var(--dark);
  font-size: clamp(1.05rem, 1.45vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}
.state-screen__action {
  width: min(100%, 36rem);
  min-height: clamp(4.25rem, 6vw, 5.5rem);
  margin-top: clamp(0.5rem, 1.5vw, 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16) var(--sp-24);
  border: var(--bw) solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--white);
  font-size: clamp(1.35rem, 2vw, 2.1rem);
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
}
.state-screen__action:hover,
.state-screen__action:focus-visible {
  border-color: var(--dark);
  background: var(--dark);
  color: var(--white);
}

/* The layout must keep the complete message and recovery control above the
   fold on landscape phones and small laptop windows. */
@media (max-width: 600px) {
  .state-screen { overflow: auto; }
  .state-screen__header { padding-top: var(--sp-24); }
  .state-screen__brand { width: 6.75rem; }
  .state-screen__help { width: 6.25rem; }
  .state-screen__main {
    align-content: center;
    gap: var(--sp-32);
    padding-top: var(--sp-32);
    padding-bottom: clamp(3rem, 8vh, 4.5rem);
  }
  .state-screen--artwork .state-screen__main {
    gap: var(--sp-8);
  }
  .state-screen__artwork { width: clamp(6.5rem, 28vw, 8.5rem); }
  .state-screen__copy { gap: var(--sp-16); }
  .state-screen--artwork .state-screen__title {
    width: 100vw;
    max-width: none;
    font-size: clamp(1.65rem, 7.4vw, 1.75rem);
  }
  .state-screen--artwork .state-screen__description {
    font-size: 0.9rem;
  }
  .state-screen:not(.state-screen--artwork) .state-screen__description {
    width: calc(100vw - 2rem);
    max-width: none;
  }
  .state-screen__action {
    min-height: 3.75rem;
    margin-top: var(--sp-8);
  }
}

@media (max-height: 700px) and (min-width: 601px) {
  .state-screen__header { padding-top: var(--sp-24); }
  .state-screen__main {
    gap: var(--sp-24);
    padding-top: var(--sp-16);
    padding-bottom: var(--sp-32);
  }
  .state-screen__artwork { width: 12rem; max-height: 27vh; }
  .state-screen__copy { gap: var(--sp-12); }
  .state-screen__action { min-height: 3.75rem; margin-top: var(--sp-4); }
}