/* Rolling Fun — For Founders. Uses tokens and components from site.css.
   Page-local classes are prefixed ff- so nothing leaks into the shared system. */

/* Errors get their own red (hue ~357°, never orange): the signal is the brand green, and green must never mean "wrong". */
.ff-pitch { --ff-err: #f0565c; } /* 5.8:1 on --bg, 5.4:1 on --bg-2 */

/* ---------- Page head ---------- */

.ff-head { padding-bottom: clamp(48px, 6vw, 96px); }
.ff-head__grid { align-items: end; row-gap: 56px; }
.ff-head__main { grid-column: 1 / span 8; }
.ff-head__title { font-size: clamp(48px, 8.4vw, 128px); line-height: 0.92; letter-spacing: -0.05em; }
.ff-jump { grid-column: 10 / span 3; }
.ff-jump .eyebrow { padding-bottom: 12px; }
.ff-jump ol { position: relative; }
.ff-jump ol::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.ff-jump li { border-bottom: 1px solid var(--line); }
.ff-jump a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  min-height: 48px;
  padding: 13px 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--muted);
  transition: color 0.25s ease;
}
.ff-jump__arrow { font-size: 15px; transition: transform 0.45s var(--ease); }
@media (hover: hover) {
  .ff-jump a:hover { color: var(--ink); }
  .ff-jump a:hover .ff-jump__arrow { transform: translate3d(0, 3px, 0); }
}

/* Opening choreography: the title leads, the lede follows, then the jump list builds row by row. */
.motion .ff-crumb[data-reveal] { transform: translate3d(0, 10px, 0); transition-duration: 0.7s, 1s; }
.motion .ff-head__title .w__i { transition-delay: calc(0.08s + var(--i, 0) * 0.08s); transition-duration: 1.2s; }
.motion .ff-head .lede[data-reveal] { transition-delay: 0.36s; }
.motion .ff-jump[data-reveal] { opacity: 1; transform: none; }
.motion .ff-jump .eyebrow,
.motion .ff-jump li { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.6s ease, transform 1s var(--ease); }
.motion .ff-jump ol::before { transform: scaleX(0); transition: transform 1.2s var(--ease) 0.5s; }
.motion .ff-jump.is-in .eyebrow,
.motion .ff-jump.is-in li { opacity: 1; transform: none; }
.motion .ff-jump.is-in ol::before { transform: none; }
.motion .ff-jump.is-in .eyebrow { transition-delay: 0.5s; }
.motion .ff-jump.is-in li:nth-child(1) { transition-delay: 0.58s; }
.motion .ff-jump.is-in li:nth-child(2) { transition-delay: 0.65s; }
.motion .ff-jump.is-in li:nth-child(3) { transition-delay: 0.72s; }

/* Section index rows: the rule draws in from the left, then the number and name print, then the meta. */
.ff-ix { position: relative; border-top-color: transparent; }
.ff-ix::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.ff-ix .num { margin-right: 10px; color: var(--muted); }
.ff-ix > span:first-child b { color: var(--ink); }
.motion .ff-ix[data-reveal] { opacity: 1; transform: none; }
.motion .ff-ix::before { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.motion .ff-ix > span { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.6s ease, transform 0.9s var(--ease); }
.motion .ff-ix.is-in::before { transform: none; }
.motion .ff-ix.is-in > span { opacity: 1; transform: none; transition-delay: 0.16s; }
.motion .ff-ix.is-in > span + span { transition-delay: 0.3s; }

/* ---------- § 01 Thesis ---------- */

.ff-thesis { padding-top: clamp(40px, 5vw, 80px); }
.ff-thesis:focus, .ff-pitch:focus, .ff-faq:focus { outline: none; }
.ff-statement {
  max-width: 15.5em;
  font-size: clamp(34px, 4.7vw, 68px);
  font-weight: var(--w-display);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.ff-thesis__body { margin-top: clamp(64px, 8vw, 128px); align-items: start; row-gap: 56px; }

/* Fig. 01 — a 10 × 10 field: the first cell is the check, the field fills to 100x as you scroll. */
.ff-fig { grid-column: 1 / span 5; }
.ff-fig__cells {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(4px, 0.5vw, 7px);
  max-width: 520px;
}
.ff-fig__cells i {
  position: relative;
  display: block;
  aspect-ratio: 1;
}
/* Empty cell: a graph-paper tick. Filled: a bone square. Both compositor-only. */
.ff-fig__cells i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background: var(--dim);
}
.ff-fig__cells i::before {
  content: "";
  position: absolute;
  inset: 30%;
  z-index: 1;
  border-radius: 1px;
  background: var(--ink);
  transform: scale(0);
  transition: transform 0.6s var(--ease);
  transition-delay: var(--t, 0s);
}
.ff-fig__cells i.on::before { transform: none; }
.ff-fig__cells i:first-child::before { background: var(--signal); transform: none; }
.ff-fig__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 520px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ff-fig__count { font-size: clamp(36px, 4vw, 58px); line-height: 0.9; letter-spacing: -0.05em; color: var(--ink); }

.ff-thesis__terms { grid-column: 7 / span 6; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.ff-thesis__lede { max-width: 22em; color: var(--ink); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.32; letter-spacing: -0.02em; }
.ff-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
}
.ff-term {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: clamp(116px, 9.5vw, 144px);
  padding: 16px 20px 20px 0;
  border-bottom: 1px solid var(--line);
}
.ff-term:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--line); }
.ff-term__v { font-size: clamp(26px, 2.7vw, 40px); line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.ff-term__v .odo__d { height: 1em; }
.ff-term__dash, .ff-term__pre { color: var(--dim); padding: 0 0.08em; }
.ff-term__v--words { font-size: clamp(22px, 1.9vw, 30px); font-weight: var(--w-display); line-height: 1.05; letter-spacing: -0.03em; white-space: normal; }

/* The four terms arrive one after another; each odometer rolls once its cell is up (founders.js). */
.motion .ff-terms[data-reveal] { opacity: 1; transform: none; }
.motion .ff-term { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.6s ease, transform 1s var(--ease); }
.motion .ff-terms.is-in .ff-term { opacity: 1; transform: none; }
.motion .ff-terms.is-in .ff-term:nth-child(2) { transition-delay: 0.08s; }
.motion .ff-terms.is-in .ff-term:nth-child(3) { transition-delay: 0.16s; }
.motion .ff-terms.is-in .ff-term:nth-child(4) { transition-delay: 0.24s; }
.ff-terms .odo__c { transition-duration: 1.15s; }

/* ---------- § 02 Founder Contact Form ---------- */

.ff-pitch__grid { align-items: start; row-gap: 0; }
.ff-pitch__intro { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; row-gap: 24px; margin-bottom: clamp(48px, 6vw, 80px); }
.ff-pitch__intro .h2 { grid-column: 1 / span 7; }
.ff-pitch__how { grid-column: 9 / span 4; font-size: 15px; }
.ff-form, .ff-act { grid-column: 1 / span 7; }
.ff-env { grid-column: 9 / span 4; grid-row: 2 / span 2; position: sticky; top: calc(var(--nav-h) + 20px); }

/* Each field is a ledger row: index + label on the left, the control on the right. */
.ff-form { border-top: 1px solid var(--line); }
.ff-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 12px var(--gap);
  margin: 0;
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
fieldset.ff-row { display: grid; }
.ff-row__label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 6px;
  float: left; /* lets the legend sit inside the fieldset's grid */
  width: 100%;
  padding: 0;
}
legend.ff-row__label { grid-row: 1; grid-column: 1; }
.ff-row__name { grid-column: 1; font-size: 17px; line-height: 26px; letter-spacing: -0.01em; color: var(--ink); }
.ff-hint { grid-column: 1; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.ff-req { margin-left: 4px; font-size: 14px; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.ff-row__ctl { min-width: 0; }
fieldset .ff-row__ctl { grid-row: 1; grid-column: 2; }
.ff-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--gap); }
.ff-sub { min-width: 0; }
.ff-sub__label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 1.3; color: var(--muted); }

/* Ledger fields: no boxes, an underline on the row. Focus draws a 2px ink line in from the left; blur lets it out to the right. */
.ff-input {
  --u: var(--ink);
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--u), var(--u)) no-repeat 100% 100% / 0% 2px;
  box-shadow: inset 0 -1px 0 var(--line-2);
  color: var(--ink);
  font: inherit;
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  caret-color: var(--signal);
  -webkit-appearance: none;
  appearance: none;
  transition: background-size 0.6s var(--ease-wipe), box-shadow 0.3s ease;
}
.ff-input::placeholder { color: var(--muted); opacity: 1; }
@media (hover: hover) {
  .ff-input:hover { box-shadow: inset 0 -1px 0 var(--muted); }
}
.ff-input:focus { outline: none; background-position: 0 100%; background-size: 100% 2px; transition-duration: 0.7s, 0.3s; transition-timing-function: var(--ease), ease; }
.ff-input:focus-visible { outline: none; }
.ff-input--area {
  min-height: 184px;
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  resize: vertical;
}
@media (hover: hover) {
  .ff-input--area:hover { box-shadow: inset 0 0 0 1px var(--muted); }
}
.ff-input--area:focus { background: transparent; box-shadow: inset 0 0 0 1px var(--u); }
.ff-input[aria-invalid="true"] { --u: var(--ff-err); box-shadow: inset 0 -1px 0 var(--ff-err); }
.ff-input--area[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--ff-err); }
.ff-input:-webkit-autofill,
.ff-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: inset 0 -1px 0 var(--line-2), inset 0 0 0 60px var(--bg);
  transition: background-color 9999s ease 0s;
}

.ff-err {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ff-err);
}
.ff-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; font-size: 10px; }
.ff-err[hidden] { display: none; }

/* Checkbox: a square that fills bone. */
.ff-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.25s ease;
}
.ff-check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.ff-check__box {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow 0.25s ease;
}
.ff-check__box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
  transform: scale(0);
  transition: transform 0.35s var(--ease);
}
.ff-check__box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid var(--bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.35s var(--ease) 0.05s;
}
.ff-check input:checked + .ff-check__box::before { transform: none; }
.ff-check input:checked + .ff-check__box::after { transform: rotate(45deg); }
.ff-check input:checked ~ span:last-child { color: var(--ink); }
.ff-check input:focus-visible + .ff-check__box { outline: 2px solid var(--signal); outline-offset: 3px; }
@media (hover: hover) {
  .ff-check:hover { color: var(--ink); }
  .ff-check:hover .ff-check__box { box-shadow: inset 0 0 0 1px var(--ink); }
}

/* Round: three quick fills that write into the field. */
.ff-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ff-chip {
  position: relative;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--muted);
  transition: color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.ff-chip::after { content: ""; position: absolute; inset: -5px -2px; }
.ff-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
@media (hover: hover) {
  .ff-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .ff-chip[aria-pressed="true"]:hover { color: var(--bg); }
}

.ff-send {
  display: flex;
  /* (lives in .ff-act, outside the form, so the preview can sit above it on narrow screens) */
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 32px;
}
.ff-send__btn { min-width: 180px; min-height: 54px; }
.ff-send__note { font-size: 14px; color: var(--muted); }
.ff-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.ff-status__msg { max-width: 34em; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ff-status__msg:empty { display: none; }
.ff-status__msg b { font-weight: 400; color: var(--ink); }
.ff-status__msg.is-error { color: var(--ff-err); }
.ff-copy[hidden] { display: none; }

/* The draft: the exact email the form will compose, plus a live fingerprint of it. */
.ff-env__card {
  border-radius: var(--r);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
  line-height: 1.55;
}
.ff-env__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.ff-env__title { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.ff-env__state { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); transition: color 0.3s ease; }
.ff-env__dot { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--muted); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.ff-env__state.is-ready { color: var(--ink); }
.ff-env__state.is-ready .ff-env__dot { background: var(--signal); box-shadow: none; }
.ff-env__hdr { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.ff-env__hdr div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 2px 0; }
.ff-env__hdr dt { color: var(--muted); font-size: 14px; }
.ff-env__hdr dd { color: var(--ink); overflow-wrap: anywhere; }
.ff-env__body {
  max-height: min(34vh, 320px);
  padding: 14px 18px 16px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.ff-env__body:focus-visible { outline-offset: -2px; }
.ff-env__body .k { color: var(--muted); }
.ff-env__body .e { color: var(--muted); }
.ff-env__hash { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.ff-env__hex { min-height: 1.4em; white-space: nowrap; }

/* Blocks arrive as a sequence, not a slab: rows print in order, 70ms apart. */
.motion .ff-form[data-reveal],
.motion .ff-faq__list[data-reveal] { opacity: 1; transform: none; }
.motion .ff-form[data-reveal] > .ff-row,
.motion .ff-faq__list[data-reveal] > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.6s ease, transform 1s var(--ease); }
.motion .ff-form.is-in > .ff-row,
.motion .ff-faq__list.is-in > * { opacity: 1; transform: none; }
.motion .ff-form.is-in > .ff-row:nth-child(2), .motion .ff-faq__list.is-in > :nth-child(2) { transition-delay: 0.07s; }
.motion .ff-form.is-in > .ff-row:nth-child(3), .motion .ff-faq__list.is-in > :nth-child(3) { transition-delay: 0.14s; }
.motion .ff-form.is-in > .ff-row:nth-child(4), .motion .ff-faq__list.is-in > :nth-child(4) { transition-delay: 0.21s; }
.motion .ff-form.is-in > .ff-row:nth-child(5), .motion .ff-faq__list.is-in > :nth-child(5) { transition-delay: 0.28s; }
.motion .ff-form.is-in > .ff-row:nth-child(6), .motion .ff-faq__list.is-in > :nth-child(6) { transition-delay: 0.35s; }
.motion .ff-form.is-in > .ff-row:nth-child(7), .motion .ff-faq__list.is-in > :nth-child(7) { transition-delay: 0.42s; }
.motion .ff-form.is-in > .ff-row:nth-child(8), .motion .ff-faq__list.is-in > :nth-child(8) { transition-delay: 0.49s; }
.motion .ff-faq__list.is-in > :nth-child(9) { transition-delay: 0.56s; }
.motion .ff-faq__list.is-in > :nth-child(10) { transition-delay: 0.63s; }
/* The draft card follows the form in. */
.motion .ff-env[data-reveal] { transition-delay: 0.2s; }

/* ---------- § 03 FAQ (paper) ---------- */

.ff-faq__grid { align-items: start; row-gap: 40px; }
.ff-faq__side { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 32px); }
.ff-faq__side .h2 { font-size: clamp(40px, 4.6vw, 66px); }
.ff-faq__side .h2 .tone { display: block; }
.ff-faq__mail { margin-top: 28px; }
.ff-faq__mail a { margin-left: 8px; }
.ff-faq__list { grid-column: 6 / span 7; }
.ff-all {
  position: relative;
  color: var(--ink);
  font: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.ff-all::after { content: ""; position: absolute; inset: -14px -8px; }

.ff-faq summary { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 26px 0; transition: color 0.25s ease; }
.ff-faq summary .num { transition: color 0.25s ease; }
.ff-q { font: inherit; letter-spacing: inherit; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.28; text-wrap: balance; }
.ff-faq details[open] summary .num { color: var(--signal-ink); }
.ff-faq details[open] summary::after { color: var(--signal-ink); }
@media (hover: hover) {
  .ff-faq .ff-q { transition: transform 0.45s var(--ease); }
  .ff-faq summary:hover .ff-q { transform: translate3d(4px, 0, 0); }
  .ff-faq summary:hover .num { color: var(--signal-ink); }
  .ff-faq summary:hover::after { color: var(--ink); }
}
/* Open/close are animated in founders.js (rows below slide, the answer is unmasked). Each row carries
   its rule on top, and the list closes with its own element, so every line travels with its row. */
.ff-faq__list.faq { border-top: 0; }
.ff-faq__list details { border-top: 1px solid var(--line); border-bottom: 0; }
.ff-faq__end { border-top: 1px solid var(--line); }
.ff-faq summary:focus-visible { outline-offset: 6px; }
.ff-faq .faq__a { padding-bottom: 36px; }
.ff-a { max-width: 40em; color: var(--muted); }
.ff-a p + p { margin-top: 1em; }
.ff-a--short { display: grid; gap: 10px; }
.ff-a--short p + p { margin-top: 0; }
.ff-big {
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.ff-big--fig { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ff-a--name { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; }
.ff-a--name .body { grid-column: 1; grid-row: 1; }
.ff-roll { grid-column: 2; grid-row: 1; width: 56px; color: var(--ink); }
.motion .ff-faq details[open] .ff-roll { animation: ff-roll 1.6s var(--ease) both; }
@keyframes ff-roll { from { transform: rotate(-200deg); opacity: 0; } 40% { opacity: 1; } to { transform: none; } }

/* "First, do no harm" */
.ff-harm__lead { max-width: 30em; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.ff-harm__quote {
  margin: clamp(28px, 3.4vw, 48px) 0 clamp(20px, 2.4vw, 32px);
  font-size: clamp(34px, 3.9vw, 56px);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-wrap: balance;
}
.ff-harm__quote .tone { display: block; margin-bottom: 0.12em; font-size: 0.42em; letter-spacing: -0.02em; }
.ff-harm__body { max-width: 34em; }
.ff-harm__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(32px, 3.6vw, 52px);
  counter-reset: none;
}
.ff-harm__list li { display: grid; align-content: start; padding-top: 18px; border-top: 1px solid var(--line-2); }
.ff-harm__list p { font-size: 16px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.ff-harm__list li:last-child p { font-size: clamp(22px, 1.9vw, 30px); font-weight: var(--w-display); line-height: 1.15; letter-spacing: -0.03em; }
.ff-harm em, .ff-a em { font-style: italic; }

/* ---------- § 04 Close ---------- */

/* One ending: a full-width statement over the index hairline and one button (the footer carries the email). */
.ff-end .cta { background: none; box-shadow: none; border-radius: 0; padding: clamp(8px, 2vw, 24px) 0 0; }
.ff-end__title { max-width: 13em; }

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
  .ff-form, .ff-act { grid-column: 1 / span 7; }
  .ff-env { grid-column: 8 / span 5; }
  .ff-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  fieldset .ff-row__ctl { grid-row: 2; grid-column: 1; }
}
@media (max-width: 1023px) {
  .ff-head__main { grid-column: 1 / -1; }
  .ff-jump { grid-column: 1 / span 8; }
  .ff-fig { grid-column: 1 / span 6; }
  .ff-thesis__terms { grid-column: 7 / span 6; }
  .ff-pitch__intro .h2 { grid-column: 1 / -1; }
  .ff-pitch__how { grid-column: 1 / span 8; }
  .ff-form, .ff-env, .ff-act { grid-column: 1 / -1; }
  .ff-env { grid-row: auto; position: relative; top: auto; margin-top: 32px; }
  .ff-env__body { max-height: none; overflow: visible; }
  .ff-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 12px var(--gap); }
  fieldset .ff-row__ctl { grid-row: 1; grid-column: 2; }
  /* Terms become label/value rows once the column is too narrow for a 2 × 2 table. */
  .ff-terms { grid-template-columns: minmax(0, 1fr); }
  .ff-term { flex-direction: row; align-items: baseline; justify-content: space-between; min-height: 0; padding: 18px 0; gap: 16px; }
  .ff-term:nth-child(2n) { padding-left: 0; border-left: 0; }
  .ff-term__v { font-size: clamp(26px, 8vw, 34px); text-align: right; }
  .ff-faq__side { grid-column: 1 / -1; position: relative; top: auto; }
  .ff-faq__list { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ff-jump { grid-column: 1 / -1; }
  .ff-fig, .ff-thesis__terms { grid-column: 1 / -1; }
  .ff-fig__cells { max-width: 300px; }
  .ff-fig__cap { max-width: none; }
  .ff-pitch__how { grid-column: 1 / -1; }
  .ff-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 0; }
  fieldset .ff-row__ctl { grid-row: 2; grid-column: 1; }
  .ff-harm__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ff-send__btn { width: 100%; }
}
@media (max-width: 559px) {
  .ff-sm-hide { display: none; }
  .ff-thesis .index, .ff-pitch .index, .ff-faq .index { white-space: nowrap; }
}
@media (max-width: 479px) {
  .ff-pair { grid-template-columns: minmax(0, 1fr); }
  .ff-a--name { grid-template-columns: minmax(0, 1fr); }
  .ff-roll { grid-column: 1; grid-row: auto; width: 44px; }
}
@media (pointer: coarse) {
  .ff-copy { min-height: 44px; }
  .ff-chip { min-height: 44px; padding: 0 18px; }
  .ff-chip::after { display: none; }
}

/* Display figures use the proportional lining numerals (Mona Sans's tabular zero is slashed and reads as code at this size). */
.ff-term__v, .ff-term__v .odo, .ff-fig__count { font-variant-numeric: lining-nums proportional-nums; }
.ff-term__v .odo__c > span { text-align: center; }