/* =========================================================================
   Proof Of Fun — proof-of-fun.com
   Themed on top of scrollcraft.css. The engine is never edited; everything
   here is tokens plus this page's own classes.

   The world is the app's: paper, ink, vermillion, rubber stamps. Colours are
   lifted verbatim from ProofOfFun/Theme/Theme.swift, faces from
   ProofOfFun/Resources/Fonts (SIL OFL, subset to WOFF2).
   ========================================================================= */

/* ------------------------------------------------------------------ type */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
  /* the six roles, keyed to the light (paper) ground */
  --sc-canvas:     #F2EFE8;
  --sc-surface:    #FDF9F0;
  --sc-ink:        #191712;
  --sc-ink-soft:   #5C584D;
  --sc-accent:     #C33D28;   /* text-bearing red: 5.0:1 with --sc-accent-ink */
  --sc-accent-ink: #FFF9F4;

  --sc-font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Instrument Sans", system-ui, sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* the app's own palette, used for the objects rather than for the roles */
  --pf-red:      #D1462F;
  --pf-red-deep: #A33725;
  --pf-green:    #2F5D3F;
  --pf-slate:    #4A6B8A;
  --pf-mute:     #E7E2D5;
  --pf-mute-ink: #4B473E;
  --pf-card:     #FDF9F0;
  --pf-cream:    #FDF6EC;
  --pf-paper-2:  #EAE5D8;
  --pf-ink-warm: #20211C;
  --pf-hatch-a:  #E8E3D6;
  --pf-hatch-b:  #DED8C9;

  --pf-line:        color-mix(in oklab, var(--sc-ink) 16%, transparent);
  --pf-line-strong: color-mix(in oklab, var(--sc-ink) 34%, transparent);

  /* Print depth: a hard inked edge AND a soft ambient drop. The hard offset is
     the product's own drawing style (see the app icon and every button in the
     app); the blurred layer under it stops it reading as a sticker. */
  --pf-lift-1: 3px 3px 0 color-mix(in oklab, var(--sc-ink) 88%, transparent),
               0 6px 14px -8px color-mix(in oklab, var(--sc-ink) 55%, transparent);
  --pf-lift-2: 5px 6px 0 color-mix(in oklab, var(--sc-ink) 18%, transparent),
               0 14px 30px -14px color-mix(in oklab, var(--sc-ink) 55%, transparent);
  --pf-lift-3: 8px 10px 0 color-mix(in oklab, var(--sc-ink) 16%, transparent),
               0 26px 60px -24px color-mix(in oklab, var(--sc-ink) 60%, transparent);

  --bar-h: 3.25rem;
  /* What content has to clear. Identical to --bar-h in Safari, where the page
     never sits under the status bar, and correct when it does: added to the
     home screen, or in fullscreen. */
  --bar-total: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
}

/* ------------------------------------------------------------- the floor */

html { scroll-behavior: auto; }
body {
  background: var(--sc-canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* If the engine never runs, every cued element would stay at opacity 0 and the
   page would be blank. Hand the document back. */
.no-js [data-sc-cue],
.no-js [data-sc-in],
.no-js [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }

::selection { background: var(--pf-red); color: var(--pf-cream); }

:focus-visible {
  outline: 3px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Paper fibre. Multiply so it darkens the sheet rather than washing it out;
   the dark chapters carry their texture in the hatch instead. */
.sc-grain { opacity: 0.075; mix-blend-mode: multiply; }

/* ----------------------------------------------------------- chapter ink --
   Six grounds, hard cut, no drift. `color` is restated everywhere the tokens
   are, because colour inherits as a computed value: redefining --sc-ink alone
   re-inks nothing that already resolved on <body>. */

.ch { position: relative; background: var(--sc-canvas); }

.ch--paper {
  --sc-canvas: #F2EFE8; --sc-surface: #FDF9F0;
  --sc-ink: #191712;    --sc-ink-soft: #5C584D;
  --sc-accent: #C33D28; --sc-accent-ink: #FFF9F4;
  color: var(--sc-ink);
  background-color: #F2EFE8;
  background-image: radial-gradient(color-mix(in oklab, #191712 12%, transparent) 1px, transparent 1.4px);
  background-size: 24px 24px;
}
.ch--paper-2 {
  --sc-canvas: #EAE5D8; --sc-surface: #FDF9F0;
  --sc-ink: #191712;    --sc-ink-soft: #56524A;
  --sc-accent: #C33D28; --sc-accent-ink: #FFF9F4;
  color: var(--sc-ink);
  background-color: #EAE5D8;
  background-image: repeating-linear-gradient(
    135deg, transparent 0 9px,
    color-mix(in oklab, #191712 4%, transparent) 9px 10px);
}
.ch--ink {
  --sc-canvas: #191712; --sc-surface: #23211B;
  --sc-ink: #F7F5EF;    --sc-ink-soft: #A9A498;
  --sc-accent: #E8674F; --sc-accent-ink: #191712;
  color: var(--sc-ink);
  background-color: #191712;
  background-image: repeating-linear-gradient(
    135deg, transparent 0 11px,
    color-mix(in oklab, #F7F5EF 3%, transparent) 11px 12px);
}
.ch--ink-warm {
  --sc-canvas: #20211C; --sc-surface: #2A2B24;
  --sc-ink: #F7F5EF;    --sc-ink-soft: #A9A498;
  --sc-accent: #E8674F; --sc-accent-ink: #191712;
  color: var(--sc-ink);
  background-color: #20211C;
  background-image: radial-gradient(color-mix(in oklab, #F7F5EF 7%, transparent) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
.ch--red {
  --sc-canvas: #D1462F; --sc-surface: #FDF6EC;
  --sc-ink: #FDF6EC;    --sc-ink-soft: #F6D9CF;
  --sc-accent: #191712; --sc-accent-ink: #FDF6EC;
  color: var(--sc-ink);
  background-color: #D1462F;
  background-image: repeating-linear-gradient(
    135deg, transparent 0 13px,
    color-mix(in oklab, #191712 5%, transparent) 13px 14px);
}
.ch--cream {
  --sc-canvas: #FDF6EC; --sc-surface: #FFFFFF;
  --sc-ink: #191712;    --sc-ink-soft: #5C584D;
  --sc-accent: #C33D28; --sc-accent-ink: #FFF9F4;
  color: var(--sc-ink);
  background-color: #FDF6EC;
  background-image: radial-gradient(color-mix(in oklab, #191712 10%, transparent) 1px, transparent 1.4px);
  background-size: 24px 24px;
}

/* ------------------------------------------------------------------ type */

.sc-display { font-weight: 800; }
h1, h2, h3 { text-wrap: balance; }

.pf-eyebrow {
  font-family: var(--sc-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-5);
}

.pf-lede {
  font-size: clamp(1.05rem, 0.98rem + 0.42vw, 1.35rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--sc-ink-soft);
  max-width: 34ch;
  text-wrap: pretty;
  margin: 0;
}

.pf-body { color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty; margin: 0; }
.pf-body strong { color: var(--sc-ink); font-weight: 600; }

.pf-mono {
  font-family: var(--sc-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* Emphasis inside a headline is the same family, one weight up plus the app's
   red. Never a second face. */
.pf-hot { color: var(--sc-accent); }

/* ------------------------------------------------------------- the chrome */

.bar {
  position: fixed; inset: 0 0 auto 0;
  z-index: 60;
  height: var(--bar-total);
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sc-4);
  padding-inline: clamp(0.9rem, 3vw, 2.25rem);
  background: #F2EFE8;
  border-bottom: 1.5px solid #191712;
  color: #191712;
}
.bar__mark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sc-font-mono);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #191712; text-decoration: none;
}
.bar__dot {
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: var(--pf-red);
  border: 2px solid #191712;
  flex: none;
}
.bar__mark:hover .bar__dot { background: #191712; }

/* The progress line rides the bar's own bottom edge. Always on paper, so it is
   legible over every chapter ground underneath. */
[data-sc-progress] {
  top: calc(var(--bar-total) - 3px);
  height: 3px;
  background: var(--pf-red);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: var(--sc-font-mono);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  padding: 0.85rem 1.4rem;
  border-radius: 10px;
  border: 2px solid #191712;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  box-shadow: var(--pf-lift-1);
  cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out),
              background-color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 color-mix(in oklab, #191712 88%, transparent), 0 8px 18px -8px color-mix(in oklab, #191712 55%, transparent); }
}
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 color-mix(in oklab, #191712 88%, transparent); }

.btn--sm { padding: 0.55rem 0.95rem; font-size: 0.7rem; }
.btn--ghost {
  background: transparent;
  color: var(--sc-ink);
  box-shadow: none;
  border-color: var(--pf-line-strong);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); transform: none; box-shadow: none; }
}
/* On the red chapter the accent flips to ink, so the primary button becomes a
   black stamp on vermillion. Still one hue for the page. */
.ch--red .btn { border-color: #191712; }

.pf-textlink {
  color: var(--sc-accent);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1.5px;
  font-weight: 500;
}
.pf-textlink:hover { color: var(--sc-ink); }

/* ----------------------------------------------------------- the stamp --
   The product's whole language, drawn in CSS: an inked rubber block with a
   dotted stitch inside the border and a hard shadow under it. */

.stamp {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sc-font-mono);
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.6rem 1.15rem;
  border: 2.5px solid #191712;
  border-radius: 7px;
  background: var(--pf-red);
  color: var(--pf-cream);
  box-shadow: 3px 3px 0 color-mix(in oklab, #191712 85%, transparent);
  white-space: nowrap;
}
.stamp::after {
  content: "";
  position: absolute; inset: 3px;
  border: 1.5px dashed color-mix(in oklab, currentColor 78%, transparent);
  border-radius: 4px;
  pointer-events: none;
}
.stamp--loved { background: var(--pf-red);   color: var(--pf-cream); }
.stamp--liked { background: var(--pf-green); color: var(--pf-cream); }
.stamp--okay  { background: var(--pf-slate); color: var(--pf-cream); }
.stamp--nope  { background: var(--pf-mute);  color: var(--pf-mute-ink); }
.stamp--lg    { font-size: 1.05rem; padding: 0.8rem 1.5rem; border-width: 3px; }

/* ----------------------------------------------------------- the phone --
   A CSS device, not a baked bezel: it re-inks with the chapter and the
   screenshot inside it stays a plain <img> the browser can pick a size for. */

.phone {
  position: relative;
  border: 3px solid #191712;
  border-radius: 2.1rem;
  background: #191712;
  box-shadow: var(--pf-lift-3);
  overflow: hidden;
  line-height: 0;
  flex: none;
}
.phone > img {
  display: block;
  width: 100%;
  height: auto;           /* both dimensions overridden, never one */
  border-radius: 1.85rem;
}
.phone--tilt-a { transform: rotate(-1.4deg); }
.phone--tilt-b { transform: rotate(1.1deg); }

/* washi tape, straight off the app icon */
.tape {
  position: absolute; z-index: 2;
  width: 6.5rem; height: 2rem;
  background: color-mix(in oklab, var(--pf-red) 62%, #F2EFE8);
  border-left: 1px dashed color-mix(in oklab, #191712 25%, transparent);
  border-right: 1px dashed color-mix(in oklab, #191712 25%, transparent);
  opacity: 0.92;
  box-shadow: 0 3px 8px -4px color-mix(in oklab, #191712 60%, transparent);
}

/* =========================================================== 1 · RECOGNITION */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: 100%; max-width: var(--sc-maxw);
  margin-inline: auto;
  padding: calc(var(--bar-total) + var(--sc-6)) var(--sc-gutter) var(--sc-6);
  height: 100%;
}
.hero__copy { position: relative; z-index: 2; }
.hero__title {
  font-size: clamp(2.9rem, 1.7rem + 5.4vw, 6.2rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  margin: 0 0 var(--sc-5);
}
.hero__lede { margin-bottom: var(--sc-6); }
.hero__cta { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; }
.hero__phone {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-width: 0;
}
.hero__phone .phone { width: min(21rem, 34vw); }
.hero__phone .tape { top: -0.9rem; left: 50%; translate: -50% 0; rotate: -3deg; }

/* the bed of half-remembered names, behind everything */
.namebed {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-composite: intersect;
}
.namebed__row {
  display: flex; gap: 2.5rem;
  font-family: var(--sc-font-mono);
  font-size: clamp(1.6rem, 1.1rem + 2.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: color-mix(in oklab, #191712 12%, transparent);
  padding: 0.35em 0;
}
.namebed__row + .namebed__row { margin-top: 0.1em; }
.namebed__row--b { color: color-mix(in oklab, var(--pf-red) 17%, transparent); }

/* ============================================================== 2 · TENSION */

.tension {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.tension__title {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 var(--sc-5);
}
.tension__list { list-style: none; margin: var(--sc-6) 0 0; padding: 0; }
.tension__list li {
  padding: var(--sc-4) 0;
  border-top: 1px solid color-mix(in oklab, #F7F5EF 18%, transparent);
  color: var(--sc-ink-soft);
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--sc-4);
  align-items: baseline;
}
.tension__list li:last-child { border-bottom: 1px solid color-mix(in oklab, #F7F5EF 18%, transparent); }
.tension__where {
  font-family: var(--sc-font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in oklab, #F7F5EF 55%, transparent);
}

/* the stranger's review score, struck through */
.review {
  position: relative;
  background: var(--sc-surface);
  border: 2px solid color-mix(in oklab, #F7F5EF 26%, transparent);
  border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 22px 50px -26px #000;
}
.review__score {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 2rem + 5vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.045em;
  margin: 0;
  color: #F7F5EF;
  display: flex; align-items: baseline; gap: 0.4rem;
}
.review__star { color: var(--sc-accent); font-size: 0.62em; }
.review__count {
  font-family: var(--sc-font-mono); font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sc-ink-soft);
  margin: var(--sc-3) 0 0;
}
/* The wipe is a change of state, so it gets its own element and runs edge to
   edge. clip-path lives on the wrapper, never on the type. */
.review__strike {
  position: absolute; left: clamp(1rem, 2.4vw, 2rem); right: clamp(1rem, 2.4vw, 2rem);
  top: clamp(3.4rem, 2.3rem + 3.4vw, 5.6rem);
  height: 8px;
  background: var(--pf-red);
  border-radius: 4px;
  transform: rotate(-1.6deg);
}
.review__verdict {
  margin: var(--sc-6) 0 0;
  padding-top: var(--sc-5);
  border-top: 1px solid color-mix(in oklab, #F7F5EF 20%, transparent);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #F7F5EF;
  font-weight: 500;
}

/* ============================================================= 3 · THE MARK */

.mark {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  width: 100%; max-width: 64rem;
  margin-inline: auto;
  padding: calc(var(--bar-total) + var(--sc-5)) var(--sc-gutter) var(--sc-6);
  text-align: center;
}
.mark__title {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.9rem);
  line-height: 1.0;
  letter-spacing: -0.038em;
  margin: 0;
}
.mark__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: clamp(1rem, 2.6vw, 1.9rem);
  min-height: 0;
}

/* the card being stamped */
.card {
  position: relative;
  width: min(30rem, 100%);
  background: var(--pf-card);
  color: #191712;
  border: 2.5px solid #191712;
  border-radius: 14px;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  box-shadow: 6px 7px 0 color-mix(in oklab, #191712 55%, transparent),
              0 24px 50px -22px color-mix(in oklab, #191712 70%, transparent);
  text-align: left;
  display: grid;
  gap: 0.55rem;
}
.card__kicker {
  font-family: var(--sc-font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: #5C584D;
}
.card__name {
  font-family: var(--sc-font-mono);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 700; letter-spacing: -0.02em; margin: 0; color: #191712;
}
.card__meta { font-size: 0.92rem; color: #5C584D; margin: 0; }
.card__slot {
  margin-top: 0.35rem;
  min-height: 3.4rem;
  border-top: 1px dashed color-mix(in oklab, #191712 26%, transparent);
  padding-top: 0.85rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.card__slot-hint {
  font-family: var(--sc-font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #5C584D;
}

/* the landed stamp */
.card__stamp {
  display: none;
  transform-origin: 50% 50%;
}
.card__stamp.is-set { display: inline-flex; }

/* the ink ring that spreads out of the contact point */
.ink {
  position: absolute;
  left: 50%; top: 50%;
  width: 12rem; height: 12rem;
  margin: -6rem 0 0 -6rem;
  border-radius: 50%;
  border: 3px solid color-mix(in oklab, var(--pf-red) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

/* the pad the four stamps sit in */
.pad {
  width: min(34rem, 100%);
  background: var(--pf-cream);
  border: 2.5px solid #191712;
  border-radius: 14px;
  padding: clamp(0.85rem, 2vw, 1.15rem);
  box-shadow: 5px 6px 0 color-mix(in oklab, #191712 45%, transparent);
}
.pad__label {
  font-family: var(--sc-font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #5C584D;
  margin: 0 0 0.7rem;
}
.pad__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}
.pad__btn {
  font: inherit;
  font-family: var(--sc-font-mono);
  font-size: clamp(0.66rem, 0.58rem + 0.3vw, 0.82rem);
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.75rem 0.3rem;
  border: 2.5px solid #191712;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 3px 3px 0 color-mix(in oklab, #191712 85%, transparent);
  transition: transform 120ms var(--sc-ease-out), box-shadow 120ms var(--sc-ease-out),
              opacity 200ms var(--sc-ease-out);
  min-height: 2.9rem;
}
.pad__btn--loved { background: var(--pf-red);   color: var(--pf-cream); }
.pad__btn--liked { background: var(--pf-green); color: var(--pf-cream); }
.pad__btn--okay  { background: var(--pf-slate); color: var(--pf-cream); }
.pad__btn--nope  { background: var(--pf-mute);  color: var(--pf-mute-ink); }
@media (hover: hover) and (pointer: fine) {
  .pad__btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 color-mix(in oklab, #191712 85%, transparent); }
}
.pad__btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 color-mix(in oklab, #191712 85%, transparent); }
.pad__btn[aria-pressed="true"] { transform: translate(2px, 2px); box-shadow: inset 2px 2px 0 color-mix(in oklab, #191712 35%, transparent); }
.pad:not(.is-armed) .pad__btn { opacity: 0.55; }

/* what the press produces: the app's own follow-up */
.after {
  width: min(34rem, 100%);
  display: grid;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.after.is-on { opacity: 1; transform: none; }
.after__line {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: color-mix(in oklab, #191712 22%, transparent);
  border: 1.5px solid color-mix(in oklab, #FDF6EC 45%, transparent);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-family: var(--sc-font-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pf-cream);
}
.after__val { font-weight: 700; color: #FFFFFF; }

.mark__nudge {
  font-family: var(--sc-font-mono);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  min-height: 1.2em;
}

/* ============================================================ 4 · SUBSTANCE */

/* The stage is the full viewport and the bar is fixed over the top of it, so a
   rail with no top padding puts the first 3.25rem of every phone underneath the
   chrome. Pad past the bar and centre what is left. */
.rail {
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  gap: clamp(1.5rem, 3vw, 2.8rem);
  padding-inline: var(--sc-gutter);
  padding-block: calc(var(--bar-total) + 0.5rem) var(--sc-5);
}
.rail__lead {
  flex: none;
  /* Nearly a full screen wide on purpose: the heading's reading time is bought
     with rail width, not by pinning it against the cards travelling past. */
  width: min(38rem, 88vw);
  align-self: center;
  padding-right: var(--sc-5);
}
.rail__lead h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 var(--sc-4);
}
.rail__card {
  flex: none;
  width: min(19rem, 64vw, 35vh);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.85rem;
  align-content: center;
}
.rail__card .phone { width: 100%; }
.rail__card h3 {
  font-family: var(--sc-font-mono);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.rail__card p { margin: 0; font-size: 0.94rem; color: var(--sc-ink-soft); }
.rail__note {
  flex: none;
  width: min(26rem, 78vw);
  align-self: center;
}
.rail__note p {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
  line-height: 1.4; letter-spacing: -0.02em; margin: 0;
}

/* Items arrive in sequence rather than sliding past as one slab. Floored at
   0.55 so a card that has not settled reads as arriving, not as failing. */
@media (prefers-reduced-motion: no-preference) {
  /* Items arrive in sequence rather than sliding past as one slab. The floor is
     0.7, not 0.55: a pan act's stage is fully on screen for a viewport BEFORE
     its progress leaves 0, so anything dimmer makes the opening screenful read
     as a page that failed to load rather than as cards on their way in. The
     first two cards are exempt entirely (--start: -1), because on a desktop
     viewport they are already in frame when the act begins. */
  .rail > * {
    --t: clamp(0, calc((var(--sc-p, 1) - var(--start, 0)) * 6), 1);
    opacity: calc(0.7 + 0.3 * var(--t));
    transform: translate3d(0, calc((1 - var(--t)) * 18px), 0);
  }

  .rail > .rail__lead { --t: 1; opacity: 1; transform: none; }
}

/* =============================================================== 5 · TRUST */

.trust {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.trust__title {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.9rem);
  line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 var(--sc-6);
}
.facts { display: grid; }
.facts > div {
  padding: var(--sc-5) 0;
  border-top: 1px solid color-mix(in oklab, #F7F5EF 18%, transparent);
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 2rem);
  align-items: start;
}
.facts > div:last-child { border-bottom: 1px solid color-mix(in oklab, #F7F5EF 18%, transparent); }
.facts dt {
  font-family: var(--sc-font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--sc-accent);
  margin: 0;
}
.facts dd { margin: 0; color: var(--sc-ink-soft); font-size: 0.98rem; line-height: 1.6; }
.facts dd strong { color: #F7F5EF; font-weight: 600; }
.trust__phone { display: flex; justify-content: center; }
.trust__phone .phone { width: min(19rem, 40vw); }

/* =============================================================== 6 · CLOSE */

.close {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
}
.close__inner {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sc-5);
  text-align: center;
  padding: calc(var(--bar-total) + var(--sc-7)) var(--sc-gutter) var(--sc-6);
  max-width: 52rem;
  margin-inline: auto;
}
.close__title {
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.4rem);
  line-height: 0.96; letter-spacing: -0.042em; margin: 0;
}
.close__recall {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  flex-wrap: wrap;
  font-family: var(--sc-font-mono); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  min-height: 2.6rem;
}
.close__note { font-size: 0.86rem; color: var(--sc-ink-soft); margin: 0; }

/* ------------------------------------------------------------------ foot */

.foot {
  border-top: 1.5px solid #191712;
  padding: var(--sc-5) var(--sc-gutter);
  padding-bottom: calc(var(--sc-5) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sc-4);
  font-family: var(--sc-font-mono);
  font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--sc-ink-soft);
  background: color-mix(in oklab, #191712 4%, transparent);
}
.foot a { color: var(--sc-ink-soft); text-decoration: none; }
.foot a:hover { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--sc-4); }
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--sc-4); align-items: center; }

/* ==================================================== the legal documents ==
   Same paper, same faces, none of the devices. A privacy policy that performs
   is a privacy policy nobody finishes. */

.doc { padding: calc(var(--bar-total) + var(--sc-8)) 0 var(--sc-9); }
.doc__wrap { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.doc__back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sc-font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
  margin-bottom: var(--sc-6);
}
.doc__back:hover { color: var(--sc-accent); }
.doc__title {
  font-size: clamp(2.4rem, 1.7rem + 3vw, 4rem);
  line-height: 0.98; letter-spacing: -0.04em;
  margin: 0 0 var(--sc-4);
}
.doc__stamp { margin-bottom: var(--sc-6); }
.doc__meta {
  font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sc-ink-soft);
  /* .doc p caps the measure at 68ch, which on 11.5px mono stopped this rule
     two thirds of the way across. The rule is a boundary, not a paragraph. */
  max-width: none;
  margin: 0 0 var(--sc-7);
  padding-bottom: var(--sc-5);
  border-bottom: 1.5px solid #191712;
}
.doc__intro { font-size: 1.1rem; line-height: 1.65; color: var(--sc-ink); max-width: 62ch; }

.doc h2 {
  font-family: var(--sc-font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.15;
  margin: var(--sc-8) 0 var(--sc-4);
  padding-top: var(--sc-5);
  border-top: 1px solid var(--pf-line);
}
.doc h3 {
  font-family: var(--sc-font-mono);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: var(--sc-6) 0 var(--sc-3);
}
.doc p, .doc li { color: var(--sc-ink-soft); line-height: 1.68; max-width: 68ch; }
.doc p { margin: 0 0 var(--sc-4); }
.doc strong { color: var(--sc-ink); font-weight: 600; }
.doc ul, .doc ol { margin: 0 0 var(--sc-4); padding-left: 1.25rem; }
.doc li { margin-bottom: var(--sc-3); }
.doc li::marker { color: var(--pf-red); }
.doc code {
  font-family: var(--sc-font-mono); font-size: 0.86em;
  background: color-mix(in oklab, var(--sc-ink) 7%, transparent);
  padding: 0.1em 0.35em; border-radius: 4px;
  color: var(--sc-ink);
}
.doc__toc {
  background: var(--pf-card);
  border: 2px solid #191712;
  border-radius: 12px;
  padding: var(--sc-5);
  box-shadow: var(--pf-lift-2);
  margin-bottom: var(--sc-7);
}
.doc__toc ol { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: var(--sc-6); }
.doc__toc li { margin-bottom: 0.4rem; break-inside: avoid; }
.doc__toc a { color: var(--sc-ink); text-decoration: none; }
.doc__toc a:hover { color: var(--pf-red); text-decoration: underline; text-underline-offset: 0.2em; }

.callout {
  background: var(--pf-cream);
  border: 2px solid #191712;
  border-radius: 12px;
  padding: var(--sc-5);
  box-shadow: var(--pf-lift-2);
  margin: var(--sc-6) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout--todo { background: color-mix(in oklab, var(--pf-red) 10%, #FDF6EC); }

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .after { opacity: 1; transform: none; }
  .phone--tilt-a, .phone--tilt-b { transform: none; }
  .btn, .pad__btn { transition-duration: 0ms; }
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 940px) {
  /* The phone does not leave on a phone. Stacked under the copy and allowed to
     run off the bottom edge, it fills the half-empty sheet a centred column
     leaves behind, and the stage's own clip does the cropping. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: var(--sc-5);
    text-align: left;
    padding-bottom: 0;
  }
  /* The base .hero centres its grid items, so a phone taller than its row
     overflowed equally in both directions and sat on top of the copy above it.
     Start-align at this width: the overflow belongs off the bottom edge only. */
  .hero { align-items: start; }
  .hero__phone {
    align-items: flex-start;
    min-height: 0;
    /* The window the phone travels inside. */
    overflow: hidden;
  }
  /* The tape sits above the frame's top edge, so it cannot survive the clip and
     would be left behind by a frame that moves. Desktop keeps it. */
  .hero__phone .tape { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .hero__phone .phone {
      transform: translate3d(0, calc(var(--sc-p, 0) * -34%), 0) rotate(-1.4deg);
    }
  }

  /* At this width the bed's line boxes are a third of the screen, so at desktop
     weight it stops reading as texture behind the headline and starts reading
     as text failing to render. Smaller, and fainter. */
  .namebed__row { font-size: clamp(1.05rem, 4.4vw, 1.7rem); color: color-mix(in oklab, #191712 6%, transparent); }
  .namebed__row--b { color: color-mix(in oklab, var(--pf-red) 9%, transparent); }
  .hero__phone .phone { width: min(19.5rem, 64vw); }
  .hero__phone .tape { top: -0.8rem; width: 5.5rem; height: 1.7rem; }
  .hero__title { font-size: clamp(2.4rem, 1.5rem + 5vw, 3.4rem); }
  .hero__lede { margin-bottom: var(--sc-5); }
  .tension, .trust { grid-template-columns: minmax(0, 1fr); }
  .trust__phone { display: none; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
}

@media (max-width: 700px) {
  :root { --bar-h: 3rem; }
  .hero { padding-top: calc(var(--bar-total) + var(--sc-5)); }
  .hero__title { font-size: clamp(2.2rem, 1.3rem + 5.6vw, 3rem); }
  .close__title { font-size: clamp(2.2rem, 1.4rem + 5vw, 3.4rem); }
  .mark__title { font-size: clamp(1.6rem, 1.15rem + 2.6vw, 2.4rem); }
  .pad__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pad__btn { min-height: 3.2rem; }         /* touch target, grown not shrunk */
  /* Touch targets, grown not shrunk — but NOT the small one in the bar, which
     has a 3rem box to live in. Written as :not() because `.btn` alone has the
     same specificity as `.btn--sm` and, coming later, would override it. */
  .btn:not(.btn--sm) { padding: 0.9rem 1.3rem; }
  .btn--sm { padding: 0.5rem 0.8rem; font-size: 0.64rem; }
  .doc__toc ol { columns: 1; }
  .foot { flex-direction: column; align-items: flex-start; }
  .review__strike { top: clamp(2.9rem, 2rem + 4.4vw, 4.4rem); height: 6px; }
}

@media (max-width: 420px) {
  .card { padding: 1rem; }
  .card__slot { min-height: 3rem; }
}

/* ------------------------------------------------------- late additions --
   Kept at the end so the block above reads as the system and this reads as
   the wiring for the two bespoke acts. */

/* The three lines of act 3 cross over in one cell rather than stacking, so
   the card underneath never moves while the argument advances. */
.mark__titles { display: grid; }
.mark__titles > * { grid-area: 1 / 1; align-self: center; }

/* The ink ring is positioned against this box in press.js. */
.mark__body { position: relative; }

/* The name bed drifts sideways off act progress while the engine's parallax
   drives it vertically. Two devices, two elements: they never share a
   transform. */
@media (prefers-reduced-motion: no-preference) {
  .namebed__row--a { transform: translate3d(calc(var(--sc-p, 0) * -9%), 0, 0); }
  .namebed__row--b { transform: translate3d(calc(-10% + var(--sc-p, 0) * 7%), 0, 0); }
}

/* The stamp the visitor left, recalled in the close. */
.close__recall .stamp {
  font-size: 0.68rem;
  padding: 0.34rem 0.7rem;
  border-width: 2px;
  box-shadow: 2px 2px 0 color-mix(in oklab, #191712 85%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════ 404 ══
   The joke is the product's own: four marks, and this page got the fourth.
   Everything below is one card, one landed stamp, and no script — a 404 is
   the one page that must never wait for an engine to load. */

.oops {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--bar-total) + var(--sc-6)) var(--sc-gutter) var(--sc-7);
}

.oops__wrap { width: 100%; max-width: 42rem; text-align: center; }

.oops__card {
  position: relative;
  background: var(--pf-card);
  border: 2.5px solid var(--sc-ink);
  border-radius: 16px;
  box-shadow: var(--pf-lift-2);
  padding: var(--sc-7) var(--sc-6) var(--sc-8);
  /* The stamp hangs off the bottom-right corner. */
  margin-bottom: var(--sc-6);
}

/* The dotted tear-off strip along the top: a filing card, not a web panel. */
.oops__ticket {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-4);
  font-family: var(--sc-font-mono);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  padding-bottom: var(--sc-4);
  margin-bottom: var(--sc-5);
  border-bottom: 1.5px dashed var(--pf-line-strong);
}

.oops__eyebrow { color: var(--sc-accent); margin-bottom: var(--sc-3); }

.oops__title {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-tight);
  margin: 0 0 var(--sc-4);
}

.oops__lede { margin-inline: auto; text-align: center; }

.oops__cta {
  display: flex; flex-wrap: wrap; gap: var(--sc-4);
  justify-content: center;
  margin-top: var(--sc-6);
}

/* Landed off the corner and rotated, the way the app draws a stamp that has
   just come down. `position: absolute` rather than a margin so the card's own
   height never changes with it. */
.oops__stamp {
  position: absolute;
  right: calc(var(--sc-5) * -1);
  bottom: calc(var(--sc-5) * -1);
  transform: rotate(-9deg);
}
@media (max-width: 30rem) {
  .oops__stamp { right: 50%; transform: translateX(50%) rotate(-9deg); }
}

.oops__aside {
  font-family: var(--sc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-5);
}

/* Four inline chips, one per mark, so the line reads as the app's own row of
   choices rather than as a sentence about them. */
.oops__mark {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  margin: 0 0.1rem;
  font-weight: 700;
}
.oops__mark--loved { color: var(--pf-red); }
.oops__mark--liked { color: var(--pf-green); }
.oops__mark--okay  { color: var(--pf-slate); }
.oops__mark--nope  { color: var(--sc-ink); background: var(--pf-mute); }

.oops__links {
  display: flex; flex-wrap: wrap; gap: var(--sc-4);
  justify-content: center;
  font-family: var(--sc-font-mono);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.oops__links a { color: var(--sc-ink-soft); text-decoration: none; }
.oops__links a:hover { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 0.25em; }

/* ═══════════════════════════════════════════════════════════ the form ══
   /support. Inside .doc, so the type and measure are already the documents'.
   Everything here is the controls. */

.form { margin: var(--sc-6) 0 var(--sc-7); }

.form__field { margin-bottom: var(--sc-5); border: 0; padding: 0; min-width: 0; }

/* Two fields side by side on a desktop, stacked on a phone. `minmax(0, 1fr)`
   rather than `1fr`: an input's intrinsic min-width would otherwise push the
   grid wider than its container. */
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  grid-template-rows: auto auto auto;
  gap: var(--sc-5);
}
/* The two fields share one set of rows, so the inputs sit on the same line even when one hint
   wraps to two lines and the other does not. Without this they stagger, which reads as a bug.
   Where subgrid is missing (older Safari) the stagger is simply back — nothing else breaks. */
.form__row > .form__field { display: grid; grid-template-rows: subgrid; grid-row: span 3; margin-bottom: 0; }
.form__row > .form__field > .form__hint { align-self: start; }

.form__label {
  display: block;
  font-family: var(--sc-font-mono);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-ink);
  margin-bottom: 0.35rem;
  padding: 0;
}
.form__optional {
  font-weight: 400; letter-spacing: 0.1em;
  color: var(--sc-ink-soft);
  text-transform: lowercase;
}

.form__hint {
  font-size: 0.85rem;
  color: var(--sc-ink-soft);
  margin: 0 0 0.6rem;
  max-width: 60ch;
}

.form__input {
  width: 100%;
  font-family: var(--sc-font-text);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--sc-ink);
  background: var(--pf-card);
  border: 2px solid var(--sc-ink);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  /* The inked edge every raised object on this site carries, one step
     shallower — a field is a hole in the paper, not a button on it. */
  box-shadow: inset 2px 2px 0 color-mix(in oklab, var(--sc-ink) 8%, transparent);
  transition: border-color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.form__input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.form__input:focus {
  outline: none;
  border-color: var(--sc-accent);
  box-shadow: inset 2px 2px 0 color-mix(in oklab, var(--sc-accent) 12%, transparent),
              0 0 0 3px color-mix(in oklab, var(--sc-accent) 28%, transparent);
}
.form__input--area { resize: vertical; min-height: 9rem; }

.form__count {
  font-family: var(--sc-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--sc-ink-soft);
  text-align: right;
  margin: 0.35rem 0 0;
}

/* The two-card picker. The radio itself is hidden from sight but not from the
   keyboard or from assistive technology — it is still the control, and
   :focus-visible on it draws the ring on the card. */
.form__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--sc-3);
}
.choice { display: block; cursor: pointer; }
.choice input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
}
.choice__box {
  display: flex; flex-direction: column; gap: 0.2rem;
  height: 100%;
  background: var(--pf-card);
  border: 2px solid var(--pf-line-strong);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out),
              box-shadow 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.choice__title { font-weight: 600; color: var(--sc-ink); }
.choice__hint { font-size: 0.82rem; color: var(--sc-ink-soft); }

.choice input:checked + .choice__box {
  border-color: var(--sc-ink);
  box-shadow: var(--pf-lift-1);
  transform: translate(-1px, -1px);
}
.choice input:focus-visible + .choice__box {
  outline: 3px solid var(--sc-accent);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .choice:hover .choice__box { border-color: var(--sc-ink); }
}

/* The honeypot. Not `display: none` — some form fillers skip those. Off-screen
   and out of the tab order is enough to keep it away from people and still in
   reach of anything filling fields by name. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4);
  margin-top: var(--sc-6);
}
.form__actions .btn:disabled { opacity: 0.55; cursor: progress; }
.form__legal {
  flex: 1 1 18rem;
  font-size: 0.8rem;
  color: var(--sc-ink-soft);
  margin: 0;
}

.form__status {
  font-family: var(--sc-font-mono);
  font-size: 0.78rem;
  margin: var(--sc-4) 0 0;
  color: var(--sc-ink-soft);
}
.form__status--bad {
  color: var(--sc-accent);
  border-left: 2.5px solid var(--sc-accent);
  padding-left: 0.7rem;
}

.form__done {
  background: var(--pf-card);
  border: 2.5px solid var(--sc-ink);
  border-radius: 14px;
  box-shadow: var(--pf-lift-2);
  padding: var(--sc-6);
  margin: var(--sc-6) 0 var(--sc-7);
}
.form__done-title {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  letter-spacing: var(--sc-track-tight);
  margin: var(--sc-4) 0 var(--sc-3);
}