/* ==========================================================================
   sc.adminless.ai — "Small Claims Ready".

   Promoted from _sandbox/claims-design-mockup/ with the chosen presets baked
   in permanently: colour `warmdark`, type `plex`, copy `outcome`. There is no
   preset picker any more, so every value below is a literal — nothing is
   written at runtime and nothing is read from a query string.

   Self-contained on purpose: the shared token block (website/shared model,
   round 6) is inlined at the top rather than linked, so the deployed folder
   never reaches outside itself for a stylesheet. Fonts are self-hosted WOFF2
   in ./fonts — there is not one request to a third party from this page.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts

   IBM Plex Sans ships from Google as a variable file (one binary covers 400
   through 600, which is every weight this page asks for), so the sans is two
   files — latin and latin-ext — not six. IBM Plex Mono has no variable cut,
   so it is one file per weight per subset. `font-display: swap` keeps first
   paint on the fallback rather than on nothing. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/plex-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/plex-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

   The shared family token block, inlined. Pages may not redefine the type
   scale, the section rhythm, the button floor or the motion tokens; --gutter
   is the one the claims page has always overridden (80px, not 136.5px) and
   it keeps that override below, in the page's own :root. */

:root {
  --h1: 72px;
  --h2: 44px;
  --h3: 22px;
  --body: 18px;
  --label: 13px;

  --measure: 1152px;

  --section-pad: 96px;

  --btn-min: 200px;
  --btn-h: 48px;

  --creds-opacity: 0.9;
  --creds-logo-h: 34px;

  --reveal-dur: 0.42s;
  --reveal-threshold: 0.15;   /* read by motion.js */
  --reveal-margin: -10%;      /* read by motion.js */
}

@media (max-width: 880px) {
  :root {
    --h1: 44px;
    --h2: 32px;
    --h3: 20px;
    --section-pad: 72px;
  }
}

/* --------------------------------------------------------- baked presets

   colour: `warmdark` — deep warm brown paper, bone ink, the family brass.
   type:   `plex` — Plex Sans for display and body, Plex Mono for labels.

   --logo-filter / --logo-blend are load-bearing, not decoration. The
   credential files are BLACK PNGs and SVGs, drawn for light stock. On this
   dark paper they must be inverted or the funder row turns into seven black
   slabs. Checked to WCAG 2.2 AA: ink / muted-ink / accent-deep on the paper
   are all >= 4.5, on-accent on accent >= 4.5, accent and muted >= 3. */

:root {
  --paper: #221D19;
  --paper-2: #2A241F;
  --paper-3: #322B24;
  --ink: #EDE4D4;
  --accent: #B8955A;
  --accent-deep: #CFAB74;
  --accent2: #3A3128;
  --accent2-ink: #E4D5B8;
  --muted: #857A6A;
  --muted-ink: #C9BEAC;
  --rule: #3E372F;
  --on-accent: #221D19;

  --logo-filter: grayscale(1) invert(1) brightness(1.15);
  --logo-blend: screen;

  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-label: "IBM Plex Mono", ui-monospace, monospace;
  --display-weight: 600;
  --display-style: normal;

  /* the page's own measurements */
  --col: 1280px;
  --gutter: 80px;
  --r: 14px;
  --nav-h: 75px;        /* the sticky .site bar; the hero sizes against it */
}

/* ---------------------------------------------------------------- reset */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
img { display: block; max-width: 100%; }

a { color: var(--accent-deep); }

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

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-label);
  font-size: 13px;
  text-decoration: none;
  transition: top .12s ease;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sec { padding: var(--section-pad) 0; }

/* Sections fade up 12px the first time they are reached — never on load,
   which is why the hero is exempt (it is already on screen).

   Gated on html.js. motion.js stamps that class before first paint; without
   it a reader with JS off would meet a page of invisible sections, because
   nothing would ever add .is-in. The mockup missed the gate. */
html.js .sec {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}
html.js .sec.is-in { opacity: 1; transform: none; }
html.js .hero { opacity: 1; transform: none; transition: none; }

.sec__head { max-width: 46ch; }
.sec__head .h2 { margin-top: 14px; }
.sec__head .standfirst { margin-top: 18px; }

/* ------------------------------------------------------------- typography */

.h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  font-size: var(--h1);
  line-height: 1.03;
  letter-spacing: -0.021em;
}
.h1__a { color: var(--accent-deep); }
.h1__b { color: var(--ink); }

.h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 29px;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.eyebrow {
  font-family: var(--font-label);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

.k {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

.lede { font-size: 22px; line-height: 1.5; max-width: 30ch; }
.standfirst { font-size: 19px; color: var(--muted-ink); }
.closing { margin-top: 36px; font-size: 19px; color: var(--muted-ink); max-width: 62ch; }
.note { margin-top: 40px; font-size: 16px; color: var(--muted-ink); max-width: 76ch; }

sup { line-height: 0; }
sup a { font-size: 0.66em; text-decoration: none; padding: 0 1px; }
sup a:hover { text-decoration: underline; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn--fill { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--fill:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 16px; }
.btn--wide { width: 100%; }

.link {
  font-size: 18px;
  font-weight: 500;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1.5px solid var(--rule);
  padding-bottom: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.link:hover { border-bottom-color: var(--accent); }

.cta-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* --------------------------------------------------------------- site nav */

.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 74px;
}
.mark {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site__nav { display: flex; align-items: center; gap: 26px; }
.site__link {
  font-size: 16.5px;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 2px solid transparent;
}
.site__link:hover { border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------- hero */

/* The hero sizes to the WINDOW rather than to a fixed padding pair: one
   screen less the sticky nav, content optically centred so the space falls
   evenly above and below. svh rather than vh so mobile browser chrome cannot
   push the CTA under the fold, and a max() floor because on a very short
   window scrolling is the honest answer. */
.hero {
  padding: 24px 0 32px;
  min-height: max(500px, calc(100svh - var(--nav-h)));
  display: flex;
  align-items: center;
}
.hero__in {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 72px;
  align-items: start;
}
.hero .h1 { margin-top: 22px; }
.hero .lede { margin-top: 26px; max-width: 36ch; }
.hero .cta-row { margin-top: 38px; }
.hero__re { margin-top: 26px; font-size: 16.5px; color: var(--muted-ink); max-width: 44ch; }

/* the price tag — the one thing that must be readable above the fold */
.tag {
  align-self: center;
  padding: 28px 26px 22px;
  background: var(--paper-2);
  border: 2px solid var(--accent);
  border-radius: 18px;
  transform: rotate(-1.4deg);
  text-align: left;
}
.tag__fig {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 62px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.tag__label {
  margin-top: 10px;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-ink);
}
.tag__note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 16.5px;
  line-height: 1.45;
}

/* ------------------------------------------------- story (signature device)

   Three full-width panels, revealed in sequence like a comic strip. This is
   the only drawing on the page; every section after it shows a different
   kind of evidence (a list, four steps, two columns, a number, an accordion,
   a form). */

.story { padding-bottom: 96px; }
.story .sec__head { max-width: 40ch; }
.strip { margin-top: 56px; }

.panel { border-top: 1px solid var(--rule); }
html.js .panel {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
html.js .panel.is-in { opacity: 1; transform: none; }
.panel:last-child { border-bottom: 1px solid var(--rule); }
.panel--1 { background: var(--paper); }
.panel--2 { background: var(--paper-3); }
.panel--3 { background: var(--accent2); }

.panel__in {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 320px;
  gap: 36px;
  align-items: center;
  min-height: 244px;
  padding-top: 46px;
  padding-bottom: 46px;
}
.panel__no {
  font-family: var(--font-label);
  font-size: 32px;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.panel__txt p {
  margin-top: 16px;
  max-width: 52ch;
  font-size: 19px;
}
.panel--2 .panel__txt p { color: var(--muted-ink); }
.panel__art svg { width: 100%; height: auto; }

/* the three drawings share one stroke vocabulary */
.panel__art .ln { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.panel__art .thin { stroke: var(--muted); stroke-width: 1.2; }
.panel__art .ac { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.panel__art .dot { fill: var(--accent); stroke: none; }
.panel__art .qm {
  font-family: var(--font-display);
  font-size: 22px;
  fill: var(--muted);
  stroke: none;
}
.panel__art .barA { fill: var(--muted); stroke: none; }
.panel__art .barB { fill: var(--accent); stroke: none; }
.panel__art .bl {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.09em;
  fill: var(--muted-ink);
  stroke: none;
}
.panel__art .bl--ac { fill: var(--accent-deep); }
.panel__art .bl--ill { font-size: 10.5px; fill: var(--muted); }

.resolve {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  margin-top: 56px;
  padding: 32px 40px;
  background: var(--paper-2);
  border: 2px solid var(--accent);
  border-radius: 18px;
}
.resolve__head {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.018em;
}
.resolve__body { margin-top: 10px; font-size: 18px; color: var(--muted-ink); max-width: 56ch; }
.resolve .btn { flex: none; }

.fn {
  margin: 40px 0 0;
  padding-left: 22px;
  max-width: 84ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-ink);
}
.fn li + li { margin-top: 8px; }

/* ------------------------------------------------------------------- pack */

.pack { background: var(--paper-2); }
.rows { list-style: none; margin: 50px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 34px 300px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.row__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 2px;
}
.row__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 21px;
  line-height: 1.3;
}
.row__body { font-size: 18px; color: var(--muted-ink); }

/* The sample particulars, drawn as the document itself rather than as a
   themed panel: "it should just be the top part of the docx and it fades
   out" (Jake, 2026-09-14).

   The sheet keeps white paper and near-black ink in every case and
   deliberately ignores --paper / --ink: a Word page does not take on a
   website's palette, and it is exactly that refusal — a white sheet lying on
   the warm dark paper — that makes it read as a real attachment rather than
   a callout box. Times New Roman for the same reason, and it is a system
   face so it costs no extra webfont.

   Centred in its column (Jake, 2026-09-14): the sheet is 620px inside a
   1120px measure, and left-aligned it read as a stray card. The whole block
   centres — label, sheet, caption — while the document's own type stays
   flush left, because that is how the page it imitates is typed.

   The sheet is cropped to its top and masked to transparent at the foot, so
   the document reads as running on past the crop rather than stopping. The
   mask fades the white as well as the type, which is the point: a hard
   bottom edge would give the crop away. `pre-wrap` stays load-bearing — a
   bare <pre> keeps the UA's `white-space: pre`, and these clauses would
   otherwise paint 669px wide inside a 280px column and drag the document
   sideways against a 375px viewport. */
.spec { margin-top: 46px; text-align: center; }
.spec__label { margin: 0 0 18px; }

.spec__page {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  height: 250px;
  overflow: hidden;
  padding: 52px 64px 0;
  text-align: left;
  background: #FFFFFF;
  color: #1B1B1B;
  border-radius: 2px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.2);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
}
.spec__title {
  margin: 0 0 24px;
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  color: #1B1B1B;
}
.spec__doc {
  margin: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 16.5px;
  /* court documents are typed double-spaced; it is a strong "this is a filing"
     signal and it also means the crop lands mid-clause, not after a blank run */
  line-height: 2;
  color: #1B1B1B;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.spec__cap {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted-ink);
}

/* -------------------------------------------------------------------- how

   Four steps, not five. The payment step went with the payment (Jake,
   2026-09-14: "we dont handle payment for now"), so the row is four across
   at desktop and pairs up before it stacks. */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}
.step { border-top: 2px solid var(--accent); padding-top: 22px; }
.step__no {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 42px;
  line-height: 1;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.step__name {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 23px;
  line-height: 1.25;
}
.step__body { margin-top: 12px; font-size: 18px; color: var(--muted-ink); }

/* -------------------------------------------------------------------- fit */

.fit { background: var(--paper-2); }

.ticks { list-style: none; margin: 22px 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 18px;
  line-height: 1.5;
}
.ticks li + li { margin-top: 14px; }
.ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-deep);
  font-size: 16px;
}

/* ============================================================== the check

   The five-question qualifier and the free answer. This is the page's only
   interactive surface and the head of its whole conversion path, so it is
   written as one block: the states share a vocabulary (one card, one rule
   between things, accent2 for "the page is talking back to you") and the
   reader should not feel a change of voice when the form hands over to an
   answer.

   STATE GUARD — read this before adding any `display:` below.
   claims.js swaps states with the `hidden` ATTRIBUTE (#check-err,
   #check-answer, #book-fit, #story-ok, #story-err), never with a class. The
   UA's `[hidden] { display: none }` carries almost no specificity, so a
   single `display: grid` on .answer would outrank it and paint every state
   of the flow at once. This one rule keeps the attribute load-bearing no
   matter what any component rule below sets. */

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- the form

   One card on the section's paper-2, so the five questions read as a single
   task rather than five loose rows. Narrower than the section: this is a
   form, not a layout, and 820px keeps a question and its chips on one
   comfortable line. */

.check {
  max-width: 820px;
  margin-top: 52px;
  padding: 6px 40px 40px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}

/* Each question is a <fieldset> and each question text a <legend>, so the UA
   paints a border with a notch cut out of it for the legend. Reset all four
   UA properties (min-width:0 matters — a fieldset's default min-content
   floor is what drags a flex/grid child out of its column) and re-draw the
   separation as a plain rule, the way .rows and .q do elsewhere. */
.qrow {
  border: 0;
  margin: 0;
  padding: 34px 0;
  min-width: 0;
}
.qrow + .qrow { border-top: 1px solid var(--rule); }

/* Two things are going on here.

   `float: left` is the load-bearing one. A <legend> that is the fieldset's
   *rendered legend* is painted over the block-start border edge — which is
   why the UA border shows a notch, and why re-drawing that border as the
   1px rule above simply moved the notch rather than removing it: the rule
   ran straight through the question text. Per spec a legend stops being the
   rendered legend as soon as it floats, so it drops into the fieldset's
   content box as an ordinary block and the rule above it paints unbroken.
   .opts then needs `clear` to sit under it rather than beside it.

   The second: the legend stays a block with inline children (an inline-flex
   glyph box, then the text) rather than becoming a flex container, because
   legends have historically ignored display:flex/grid. Inline children put
   the glyph and the question on one line with no such risk. */
.qrow__q {
  float: left;
  width: 100%;
  /* the gap to the options rides on the float, not on the cleared .opts:
     clearance is introduced after a cleared box's top margin is applied, so
     a margin-top there would be swallowed and the chips would touch. */
  margin-bottom: 22px;
  /* hanging indent: the glyph hangs in the 40px gutter (26 + 14) and a
     question that wraps — q1 and q5 do, on a phone — lines its second line
     up with its first word instead of under the icon. */
  padding: 0 0 0 40px;
  text-indent: -40px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ink);
}

/* A quiet cue, not a decoration: the same 26px line-art vocabulary as
   .row__icon in #pack. The sizing is not optional — these <svg> elements
   carry no width/height attribute, so with no CSS they fall back to the SVG
   default 300x150 and paint at 182-325px on the page. `fill: none` is not
   optional either: fill inherits in SVG, and the <circle>/<path> children
   carry no fill of their own, so without it all eleven shapes take SVG's
   default black. It is set here rather than as a presentation attribute in
   the markup because presentation attributes cannot read var(). */
.qrow__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 14px;
  vertical-align: -5px;
}
.qrow__glyph svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The answers hang under the question text, past the glyph gutter (26 + 14),
   so the eye drops straight from the question to its options. */
.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  clear: both;
  padding-left: 40px;
}

/* Real radios, styled as chips. The input keeps `appearance: none` rather
   than `display: none`: it stays in the tab order and keeps arrow-key
   movement within its group, and it keeps its own focus ring so a keyboard
   reader can see exactly which option is live. 52px tall clears the 44px
   family floor with the whole chip as the hit box. */
.opt {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 11px 22px 11px 18px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 17px;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.opt:hover { border-color: var(--muted); }
.opt:has(input:checked) {
  background: var(--accent2);
  border-color: var(--accent);
  color: var(--accent2-ink);
}

.opt input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  background: transparent;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  cursor: pointer;
}
.opt input::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform .12s ease;
}
.opt input:checked { border-color: var(--accent); }
.opt input:checked::before { transform: scale(1); }

/* btn--wide is right on a phone and wrong here: a 740px pill reads as a
   banner, not as the end of a form. Width comes back at 880 (see below). */
.check > .btn {
  width: auto;
  min-width: var(--btn-min);
  margin-top: 14px;
}

.check__err {
  margin: 30px 0 0;
  padding: 14px 20px;
  background: var(--accent2);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--accent2-ink);
}

/* The time-bar footnote belongs to the form, so it is pulled in from .note's
   40px and set to the card's measure rather than the page's 76ch. */
.check__limit { margin-top: 28px; max-width: 66ch; }

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

   One question at a time (Jake, 2026-09-14: "each question come up one at a
   time instead. right now, the questionnaire is way to long"). Only the
   chrome lives here; the step logic is in claims.js. `.is-stepped` is set by
   that script, so the two rules keyed on it stay inert until JS has actually
   taken over and the no-JS form keeps its stacked five rows and its dividing
   rules. */

.qprog {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0 2px;
}
.qprog__count {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-ink);
  font-variant-numeric: tabular-nums;
}
.qprog__bar {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 2px;
  background: var(--paper-3);
  overflow: hidden;
}
.qprog__fill {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 2px;
  background: var(--accent);
  transition: width .32s ease;
}

/* Alone on screen a question needs no rule above it — and `.qrow + .qrow`
   still matches when the previous step is display:none, which would draw a
   stray line over questions two to five. The min-height holds the card at one
   height as the steps turn over, so the Next button does not jump under the
   cursor between a five-option question and a three-option one. */
.check.is-stepped .qrow + .qrow { border-top: 0; }
.check.is-stepped .qrow { padding: 26px 0 4px; min-height: 166px; }

.qctl {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.qctl__back {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 16.5px;
  color: var(--muted-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.qctl__back:hover:not(:disabled) { color: var(--ink); }
/* on step one the control keeps its space but shows nothing to press */
.qctl__back:disabled { opacity: 0; pointer-events: none; }
.qctl__next { min-width: 148px; }
.qctl__next:disabled { opacity: 0.4; pointer-events: none; }

/* ------------------------------------------------------------- the answer

   The four non-fits (small / big / old / filed) all land in this one panel.
   It is the page answering a question the reader just asked, so it takes the
   accent2 tint the rest of the page uses for "spoken aloud", and one
   treatment serves all four gates — no gate is a failure, they differ only
   in where they point. */

.answer {
  max-width: 820px;
  margin-top: 40px;
  padding: 30px 34px 34px;
  background: var(--accent2);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  color: var(--accent2-ink);
}
.answer__head {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.answer__body {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.6;
  max-width: 58ch;
}

/* .how, .price and .hero__copy stay bare on purpose: they are section and
   column hooks whose work is done entirely by their children (.steps,
   .price__in, .hero__in), the same way .pack carries only a background and
   lets .rows do the layout. They are not missing rules. */

/* ------------------------------------------------------------------ price */

.price__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 60px;
  align-items: start;
}
.price__main .h2 { margin-top: 14px; max-width: 22ch; }
.price__fig {
  margin-top: 30px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.price__per {
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-ink);
  vertical-align: 0.5em;
  margin-left: 6px;
}
.price__upsell { margin-top: 18px; font-size: 18px; color: var(--muted-ink); max-width: 44ch; }
.price__main .k { margin-top: 34px; }
.price__main .ticks { margin-top: 18px; }
.price__main .btn { margin-top: 36px; }

/* the boxed statement. It sits at the top of the right column so it is
   readable the moment the section is reached, without scrolling. */
.notbox {
  padding: 28px 30px 30px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
}
.notbox__stmt {
  margin-top: 14px;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 500;
}
.notbox__extra {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 17px;
  color: var(--muted-ink);
}

/* -------------------------------------------------------------------- faq */

.faq { background: var(--paper-2); }
.qs { margin-top: 46px; max-width: 92ch; }
.q { border-top: 1px solid var(--rule); }
.q:last-of-type { border-bottom: 1px solid var(--rule); }
.q summary {
  position: relative;
  list-style: none;
  padding: 22px 52px 22px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 23px;
  line-height: 1.3;
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 20px;
  font-family: var(--font-label);
  font-size: 24px;
  line-height: 1.2;
  color: var(--accent-deep);
}
.q[open] summary::after { content: "\2013"; }
.q summary:hover { color: var(--accent-deep); }
.q p {
  margin: 0 0 26px;
  max-width: 72ch;
  font-size: 18px;
  color: var(--muted-ink);
}

.cred { margin-top: 54px; }
/* The company line above the funder marks: it is provenance, not copy, so it
   sets at the footnote size and never competes with the marks. */
.cred__line {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted-ink);
  max-width: 60ch;
}
.cred__logos {
  display: flex;
  align-items: center;
  gap: 18px 40px;
  margin-top: 20px;
  flex-wrap: wrap;
}
/* Four funder marks carry their own words. Google and NVIDIA supply real
   programme lockups (see website2-react/public/programmes/SOURCES.md).
   Microsoft publishes none, so its mark stands alone (Jake, 2026-09-13).
   Every file is a BLACK artwork, so on this dark paper --logo-filter inverts
   them and --logo-blend screens them onto the stock. */
.cred__item { display: flex; align-items: center; gap: 7px; }
.cred__logo {
  width: auto;
  opacity: 0.72;
  filter: var(--logo-filter);
  mix-blend-mode: var(--logo-blend);
}
.cred__logo--sutd { height: 28px; }
.cred__logo--c4g { height: 29px; }
.cred__logo--raise { height: 30px; }
.cred__logo--esg { height: 25px; }
.cred__logo--gfs { height: 19px; }
.cred__logo--microsoft { height: 20px; }
.cred__logo--inception { height: 31px; }

/* ------------------------------------------------------------------- book */

.book { background: var(--paper-3); }
.book__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 64px;
  align-items: center;
}
.book__copy .h2 { margin-top: 14px; }
.book__copy .standfirst { margin-top: 18px; max-width: 34ch; }
.book__note {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

/* The "your claim fits" note. A fit used to open a payment step; now it
   lands here, so the reader has to be told the check passed and told that
   the words already in the box came from their own answers. Same accent2
   panel as the free answer, so both ends of the check speak in one voice. */
.bookfit {
  margin-top: 28px;
  padding: 22px 24px 24px;
  background: var(--accent2);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  color: var(--accent2-ink);
}
.bookfit__head {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  line-height: 1.25;
}
.bookfit__body { margin-top: 8px; font-size: 17px; line-height: 1.55; }

.form {
  padding: 34px 36px 36px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
}
.field + .field { margin-top: 24px; }
.label { display: block; font-size: 17px; font-weight: 600; }
.hint { margin-top: 4px; font-size: 15.5px; color: var(--muted-ink); }
.input {
  display: block;
  width: 100%;
  margin-top: 10px;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}
textarea.input { resize: vertical; }
.input:hover { border-color: var(--muted); }
.input:focus-visible { border-color: var(--accent); }
.form .btn { margin-top: 30px; }

/* Sits under the story textarea, not beside a label, so it reads at the
   hint's weight rather than at body size — a reassurance, not a paragraph. */
.privacy {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted-ink);
  max-width: 52ch;
}

/* The honeypot. Off-screen rather than display:none — a bot that reads the
   computed style skips hidden fields, and this one has to look fillable. It
   is out of the tab order and hidden from the accessibility tree, so no
   person ever meets it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* What the form says back. Both states are aria-live regions, so a screen
   reader hears the answer without moving focus. */
.formmsg {
  margin-top: 22px;
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  font-size: 17px;
  line-height: 1.55;
}
.formmsg--ok {
  background: var(--accent2);
  border-left: 3px solid var(--accent);
  color: var(--accent2-ink);
}
.formmsg--err {
  background: var(--paper-3);
  border-left: 3px solid var(--muted-ink);
  color: var(--ink);
}
.formmsg__head { font-weight: 600; }
.formmsg p + p { margin-top: 6px; }

/* ----------------------------------------------------------------- footer */

.foot {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding: 56px 0 64px;
}
/* One line, not a directory: this page is on its own. */
.foot__by {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 22px;
  line-height: 1.3;
}

.foot__co {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted-ink);
}
.foot__co a { color: var(--muted-ink); }

/* ------------------------------------------------------------- narrow safe

   The desktop frame is 1280px. Below it the two-column grids fold and the
   drawings drop out; the phone pass proper is the 880 block after this one. */

@media (max-width: 1080px) {
  :root { --gutter: 40px; }
  .hero__in,
  .price__in,
  .book__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .panel__in { grid-template-columns: 56px minmax(0, 1fr); }
  .panel__art { display: none; }
  .h1 { font-size: var(--h1); }
  .h2 { font-size: 32px; }
  .row { grid-template-columns: 30px minmax(0, 1fr); }
  .row__body { grid-column: 2; }
  /* four steps pair up before they stack */
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .tag { margin-top: 0; max-width: 300px; }
  .resolve { flex-direction: column; align-items: flex-start; }
  .site__nav { gap: 16px; flex-wrap: wrap; }
}

/* ------------------------------------------------------ narrow: the check

   880 is where the shared tokens drop the section rhythm. Below it the chip
   row cannot survive as a row: the longest option ("The government or a
   public body") is ~300px of unshrinkable inline content against ~279px of
   card interior, which is exactly the kind of one-element overhang that
   drags the whole document sideways. Stacked full-width rows also give the
   thumb a target the width of the card. */

@media (max-width: 880px) {
  /* The wordmark plus three links wrap to a 274px-tall STICKY bar at 375 —
     a third of a phone screen, permanently. Below 880 the links go and the
     wordmark stays; every destination is still reachable by scrolling, and
     the in-page CTAs are what actually convert. (Jake, 2026-09-14) */
  .site__nav { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .check {
    max-width: none;
    padding: 4px 20px 28px;
  }
  .qrow { padding: 26px 0; }
  .qrow__q { font-size: 20px; }
  .opts {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-left: 0;
  }
  .opt { width: 100%; }
  /* the phone is where btn--wide is right after all */
  .check > .btn { width: 100%; min-width: 0; margin-top: 22px; }
  .answer { max-width: none; padding: 24px 22px 26px; }
  .answer__head { font-size: 23px; }
  .form { padding: 26px 20px 28px; }
  /* At 375 the resolve card's interior is ~215px and "See if your claim
     fits" needs ~200px of text plus 56px of pill padding, so the label broke
     across two lines inside the pill. Tighter card padding, tighter pill
     padding and a full-width button put it back on one line. */
  .btn { padding: 0 20px; }
  .resolve { padding: 26px 22px 28px; }
  .resolve .btn { width: 100%; }
  /* a phone cannot carry a 1in Word margin; keep the sheet's proportions
     readable and crop it shorter so the fade still lands mid-clause */
  .spec__page { height: 208px; padding: 34px 26px 0; }
  .spec__title { font-size: 15.5px; margin: 0 0 18px; }
  .spec__doc { font-size: 15px; line-height: 1.95; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .sec,
  html.js .panel {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .btn, .skip, .qprog__fill { transition: none; }
}