/* ==========================================================================
   Rellony — Before You Sign the Lease
   Visual system v5 — two materials.

   THE RULE:
   Light is paper. Olive is the desk.
   Paper = anything you read or fill in — the form panel (the sheet you
   write on), the evidence card (the sheet you receive), the How-it-works
   band, the legal documents, the header bar.
   Olive = the interface around them — hero, evidence section, record
   trails, footer.

   Because the form panel is now paper, the button inside it is dark olive:
   achromatic, so chroma-means-status is preserved. Status still has two
   tunings — one for the olive ground, one for paper.

   No drop shadows. Depth comes from material change, layering and grain.
   ========================================================================== */

:root {
  /* --- olive: the desk --- */
  --base:  #454B37;
  --bar:   #4E5440;   /* olive bars — lighter than base, never darker */
  --band:  #3F452F;   /* evidence section — recessed */
  --bone:  #F0EFE3;
  --sage:  #C5C9B2;

  /* the four record cells — recessed insets on the desk */
  --cell-1: #3E4433;
  --cell-2: #363C2C;
  --cell-3: #2E3425;
  --cell-4: #262B1E;

  /* --- paper --- */
  --vellum:      #F4F1E9;
  --paper-well:  #FFFFFF;
  --paper-ink:   #1C1A15;
  --paper-soft:  #6B6659;
  --paper-hint:  #736F62;

  /* status — on the olive ground */
  --confirmed:    #6FD2A6;
  --unverified:   #F2BE70;
  --contradicted: #F5A79B;

  /* status — on paper */
  --confirmed-paper:    #0F5B3E;
  --unverified-paper:   #8A4E06;
  --contradicted-paper: #96241A;

  /* lines */
  --line:       rgba(240, 239, 227, 0.16);
  --line-firm:  rgba(240, 239, 227, 0.30);
  --wash:       rgba(240, 239, 227, 0.06);
  --line-paper: rgba(28, 26, 21, 0.13);
  --line-paper-firm: rgba(69, 75, 55, 0.32);   /* olive-tinted, on paper */
  --paper-wash: rgba(69, 75, 55, 0.05);
  /* nav hover on the vellum bar — the 0.05 wash above was imperceptible */
  --paper-wash-firm: rgba(69, 75, 55, 0.13);

  /* Press. A press is a wash of the surface's own ink, which is the only
     direction that reads on each ground: olive on vellum, bone on olive.
     Both sit one notch firmer than the matching hover wash, so a press
     always registers as more than a hover rather than competing with it. */
  --press-paper: rgba(69, 75, 55, 0.18);
  --press-olive: rgba(240, 239, 227, 0.14);
  /* the filled olive buttons darken their own fill instead: washing them
     lighter would wash out the vellum label sitting on top */
  --btn-hover: #3A4030;
  --btn-press: #2E3326;

  /* the wordmark belongs to the palette, not to black */
  --olive-ink: #363C29;

  /* the H1 hairline — heavy enough to register as it draws */
  --rule: rgba(240, 239, 227, 0.55);

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --record: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* layout scales with the viewport */
  --shell:  clamp(74rem, 78vw, 118rem);
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --hero-gap: clamp(2rem, 4.5vw, 6rem);
  --h1: clamp(2.1rem, 4.6vw, 6.25rem);
  --h2: clamp(1.5rem, 2.6vw, 2.75rem);

  /* measure does not */
  --measure: 70ch;

  --body: 1.0625rem;

  /* radii: paper is generously rounded, insets less so, controls pill */
  --r-paper: 14px;
  --r-cell: 8px;
  --r-input: 8px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* iOS paints a grey box over any link or button held under a finger. It is
     the artefact that sent us hunting a compositing bug: it only ever showed
     mid-press and cleared the moment the finger lifted. Nothing was broken,
     it just looked bad. Turning it off leaves the press unacknowledged, so
     every control below gets a designed :active in its place. */
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  background: var(--base);
}

body {
  margin: 0;
  color: var(--bone);
  font-family: var(--text);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-color: var(--base);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(240,239,227,0.045) 0%, rgba(240,239,227,0) 42%, rgba(0,0,0,0.05) 100%);
  background-repeat: repeat, no-repeat;
  /* Both layers scroll with the document. A fixed layer pins the wash to the
     viewport and puts WebKit on a repaint-every-frame path for the whole
     page; at these alphas, anchoring it to the document instead costs nothing
     visually and takes that repaint region away. */
  background-attachment: scroll, scroll;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
}
h3 { font-size: 1.0625rem; letter-spacing: -0.012em; line-height: 1.3; }

p { margin: 0; }
p + p { margin-top: 0.9rem; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* Record identifiers and quoted dates ONLY. Nowhere else on the site. */
.record { font-family: var(--record); font-weight: 500; font-size: 0.9em; letter-spacing: -0.01em; }

/* No border-radius here. It applied to the FOCUSED ELEMENT, not to the ring:
   focusing the inline CTA squared its 999px pill down to 4px, and took the
   nav pills with it. An outline already follows the element's own radius. */
:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.panel :focus-visible,
.finding :focus-visible,
.site-head :focus-visible,
.paper :focus-visible { outline-color: var(--paper-ink); }

/* Turning off the UA tap highlight took feedback away from EVERY link, not
   just the controls that get a designed press above. These are the inline
   links left over — in the legal documents, the consent line, the footer
   address — and without this they would feel dead under a finger. A wash
   tight to the text is the ordinary affordance for an inline link, and at
   these alphas it reads as a press rather than a box dropped on the words. */
.doc a:active,
.consent-check a:active,
.foot__note a:active { background: var(--press-paper); border-radius: 3px; }
.foot__contact a:active { background: var(--press-olive); border-radius: 3px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--paper-ink); color: var(--vellum);
  padding: 0.75rem 1.15rem; font-weight: 600;
}
.skip:focus { left: 0; }

.lede {
  font-size: clamp(1.09375rem, 1.1vw + 0.85rem, 1.375rem);
  line-height: 1.5;
  color: var(--sage);
  max-width: var(--measure);
}
.fine { font-size: 0.8125rem; line-height: 1.5; color: var(--sage); }
.muted { color: var(--sage); }

/* ==========================================================================
   Header — a paper bar
   ========================================================================== */

.site-head { background: var(--vellum); color: var(--paper-ink); }
.site-head__inner {
  display: flex; align-items: center; gap: 0.75rem 1.1rem;
  min-height: 4.75rem; padding-block: 0.9rem; flex-wrap: wrap;
}

.wordmark {
  /* inline-flex + min-height so the link itself is a 44px target; the glyphs
     are only ~22px tall and the bare <a> box was that tall too */
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.625rem, 0.6vw + 1.4rem, 2.125rem);
  letter-spacing: -0.035em;
  text-decoration: none;
  /* olive, not near-black — the wordmark is part of the palette */
  color: var(--olive-ink);
  line-height: 1;
  /* room for the press wash to land as a pill rather than a tight box round
     the glyphs; the matching negative margin keeps the mark where it was */
  padding-inline: 0.5rem; margin-inline: -0.5rem; border-radius: 999px;
  transition: background-color 0.12s ease;
}
.wordmark:active { background: var(--press-paper); }

.coverage-chip {
  font-size: 0.75rem; font-weight: 500;
  color: var(--paper-soft);
  border: 1px solid var(--line-paper-firm);
  border-radius: 999px; padding: 0.2rem 0.7rem; white-space: nowrap;
}

.site-nav { margin-left: auto; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  color: var(--paper-soft); padding: 0.4rem 0.8rem; border-radius: 999px;
  /* colour is deliberately NOT transitioned: fading paper-soft across the
     incoming wash passes through ~4.1:1, so the label snaps to full ink
     while only the background fades. No state drops below AA. */
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
/* the hover has to be readable as feedback on a light bar, so it takes a
   real tint plus a boundary — a 5% wash alone was invisible.

   Hover and focus used to share this rule. They are split so hover can sit
   behind (hover: hover): iOS applies :hover on tap and holds it until you
   tap elsewhere, which left this tint stuck on the last link touched long
   after the finger had gone. Keyboard focus keeps the full treatment. */
.site-nav a:focus-visible {
  color: var(--paper-ink);
  background: var(--paper-wash-firm);
  box-shadow: inset 0 0 0 1px var(--line-paper-firm);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover {
    color: var(--paper-ink);
    background: var(--paper-wash-firm);
    box-shadow: inset 0 0 0 1px var(--line-paper-firm);
  }
}
.site-nav a:active { color: var(--paper-ink); background: var(--press-paper); }

/* ==========================================================================
   Hero — stays olive, so the paper panel holds its contrast
   ========================================================================== */

.hero { padding-block: clamp(2.75rem, 5.5vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero__grid { display: grid; gap: var(--hero-gap); align-items: start; }

@media (min-width: 72rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) clamp(21rem, 24vw, 30rem); }
}
/* single column: centre the panel rather than leaving it hard left */
@media (max-width: 71.99rem) {
  .hero__grid > .panel { max-width: 34rem; margin-inline: auto; width: 100%; }
}

.hero h1 { font-size: var(--h1); max-width: 16ch; text-wrap: balance; }

/* one-time hairline under the H1 — drawn once on load, then static */
.h1-rule {
  display: block;
  /* 2px, not 1 — at 1px and 30% it was too faint to read as motion */
  height: 2px;
  width: 100%;
  /* sized in the headline's own ch, not the body's, so the rule tracks the
     width of the longest headline line at every viewport */
  font-size: var(--h1);
  max-width: 14ch;
  background: var(--rule);
  margin: 1.25rem 0 1.5rem;
  transform-origin: left center;
}
.motion-ok .h1-rule { transform: scaleX(0); }
.motion-ok .h1-rule.is-drawn {
  transform: scaleX(1);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

.coverage-line {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-weight: 500; max-width: 46ch;
}
.coverage-line::before {
  content: ""; flex: none; width: 0.4rem; height: 0.4rem;
  border-radius: 999px; background: var(--sage); transform: translateY(-0.15em);
}

.price { margin-top: 1.5rem; }
.price__figure {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 1.6vw + 0.9rem, 2.5rem); letter-spacing: -0.03em;
}
.price__unit { font-weight: 500; color: var(--sage); margin-left: 0.4rem; }
.price .fine { margin-top: 0.4rem; max-width: 62ch; }

/* ==========================================================================
   Form panel — the sheet you write on
   ========================================================================== */

.panel {
  background: var(--vellum);
  color: var(--paper-ink);
  border-radius: var(--r-paper);
  padding: clamp(1.35rem, 1.4vw + 0.9rem, 2.25rem);
}
.panel__head { padding-bottom: 1rem; margin-bottom: 1.35rem; border-bottom: 1px solid var(--line-paper); }
.panel__head h2 { font-size: 1.1875rem; margin-bottom: 0.25rem; text-wrap: balance; }
.panel .fine { color: var(--paper-soft); }

.field { margin-bottom: 1.15rem; }
.field > label,
.field-group > legend {
  display: block; font-size: 0.875rem; font-weight: 600;
  margin-bottom: 0.4rem; padding: 0; color: var(--paper-ink);
}
.panel .muted { color: var(--paper-soft); }
.hint { display: block; font-size: 0.8125rem; line-height: 1.45; color: var(--paper-soft); margin: -0.15rem 0 0.5rem; }

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%; min-height: 3rem;
  font: inherit; font-size: 1rem;
  color: var(--paper-ink);
  background: var(--paper-well);
  border: 1px solid var(--line-paper-firm);
  border-radius: var(--r-input);
  padding: 0.7rem 0.8rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--paper-hint); }

@media (hover: hover) and (pointer: fine) {
  input[type="text"]:hover,
  input[type="email"]:hover,
  select:hover,
  textarea:hover { border-color: var(--paper-soft); }
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--paper-ink);
  box-shadow: inset 0 0 0 1px var(--paper-ink);
}

textarea { min-height: 4.5rem; line-height: 1.5; resize: vertical; }

select {
  appearance: none; -webkit-appearance: none; padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--paper-ink) 50%),
    linear-gradient(135deg, var(--paper-ink) 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
select:invalid { color: var(--paper-hint); }

.field-group { border: 0; margin: 0 0 1.15rem; padding: 0; }

.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
@media (max-width: 24rem) { .chips { grid-template-columns: 1fr; } }
.chip {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 2.875rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-paper-firm); border-radius: 999px;
  font-size: 0.875rem; line-height: 1.25; color: var(--paper-soft);
  cursor: pointer; user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.chip span { min-width: 0; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--paper-ink); color: var(--paper-ink); }
}
/* Ahead of the checked rules below on purpose: pressing a chip that is
   already on should leave its filled state alone, not wash over it. */
.chip:active { background: var(--press-paper); border-color: var(--paper-ink); }
.chip input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 0.875rem; height: 0.875rem; margin: 0;
  border: 1px solid var(--line-paper-firm); border-radius: 999px;
  background: var(--paper-well);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.chip:has(input:checked) { background: var(--base); border-color: var(--base); color: var(--vellum); }
.chip:has(input:checked) input { background: var(--vellum); border-color: var(--vellum); }
.chip:has(input:focus-visible) { outline: 2px solid var(--paper-ink); outline-offset: 3px; }
.chip input:focus-visible { outline: none; }
.chip.is-on { background: var(--base); border-color: var(--base); color: var(--vellum); }
.chip.is-on input { background: var(--vellum); border-color: var(--vellum); }

.trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.pre-submit { font-size: 0.8125rem; line-height: 1.45; color: var(--paper-soft); margin-top: 1.25rem; }
.pre-submit strong { color: var(--paper-ink); font-weight: 600; }

.consent-check {
  display: flex; align-items: flex-start; gap: 0.65rem;
  margin: 0.85rem 0 1.15rem;
  font-size: 0.875rem; line-height: 1.45; color: var(--paper-soft);
}
.consent-check input {
  appearance: none; -webkit-appearance: none; flex: none;
  position: relative;
  width: 1.125rem; height: 1.125rem; margin: 0.1rem 0 0;
  border: 1px solid var(--line-paper-firm); border-radius: 5px;
  background: var(--paper-well); cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* The painted box stays 18px, but the thing you tap is 44px. It extends
   about 13px past the box on each side, which lands on "I agree to the"
   — that text is the label and toggles the box anyway, and it stops well
   short of the two inline links. If an engine drops pseudo-elements on
   checkboxes, the <label> is still a full-width target. */
.consent-check input::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 2.75rem; height: 2.75rem;
  transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) {
  .consent-check input:hover { border-color: var(--paper-ink); }
}
.consent-check input:checked {
  background-color: var(--base);
  border-color: var(--base);
  /* a real tick, drawn as SVG rather than crossed gradients */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23F4F1E9' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 5.8-6'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.consent-check label { cursor: pointer; }
.consent-check a { color: var(--paper-ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 3.25rem;
  font: inherit; font-size: 1.0625rem; font-weight: 600;
  color: var(--vellum); background: var(--base);
  border: 1px solid var(--base); border-radius: 999px;
  padding: 0.75rem 1.5rem; cursor: pointer;
  /* a button's label is a control, not prose: a long press that lands here
     should not start a text selection. The system draws that selection tight
     to the glyph run, which is the light box that appeared over this label.
     Scoped to .btn — links and prose stay selectable so they can be copied. */
  -webkit-user-select: none; user-select: none;
  /* muted until the form is actually completable — never `disabled`, so a
     click still runs validation and shows the visitor what is missing */
  opacity: 0.55;
  /* No transform. A transition on transform is enough to make WebKit treat
     the button as a compositing candidate, and all it bought was a 1px nudge
     on press — which the colour step below says better anyway. */
  transition: opacity 0.2s ease, background-color 0.15s ease;
}

/* Readiness is read straight off the form's live constraint validity.
   It deliberately does NOT depend on input/change events: anything that
   sets a field's value without dispatching one — a password manager, a
   form-filler extension, session or back/forward restore — used to leave
   a JS-applied class stale, so a completely filled form kept a dimmed
   button. `:valid` on a <form> cannot go stale; it is recomputed from the
   controls themselves. It is also unaffected by `novalidate`, which only
   suppresses validation at submit time. */
form:valid .btn { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  form:valid .btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
}
/* The press applies whether or not the form is valid: an incomplete form
   still runs validation on click, so the button has to acknowledge the tap. */
.btn:active,
form:valid .btn:active { background: var(--btn-press); border-color: var(--btn-press); }

/* the sending state must outrank the readiness rule above it */
.btn[disabled],
form:valid .btn[disabled] { opacity: 0.4; cursor: progress; }

.btn-note {
  margin-top: 0.85rem; text-align: center;
  font-size: 0.8125rem; line-height: 1.45; color: var(--paper-soft);
}

.form-error {
  margin-top: 0.9rem; padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--contradicted-paper);
  background: rgba(150, 36, 26, 0.07);
  border-radius: 0 var(--r-input) var(--r-input) 0;
  font-size: 0.9375rem; color: var(--paper-ink);
}

/* --- confirmation state (inside the paper panel) --- */
.confirm { max-width: 34rem; }
.confirm:focus, .confirm:focus-visible { outline: none; }
.confirm__mark {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--confirmed-paper); color: var(--vellum);
  font-size: 1.125rem; font-weight: 700; margin-bottom: 1.15rem;
}
.confirm h2 { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--paper-ink); }
.confirm h2 .addr { color: var(--paper-soft); overflow-wrap: anywhere; }
.confirm p { color: var(--paper-soft); font-size: 0.9375rem; }
.confirm__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.25rem; min-height: 2.75rem; padding: 0.5rem 1.1rem;
  border: 1px solid var(--line-paper-firm); border-radius: 999px;
  font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  color: var(--paper-ink);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .confirm__link:hover { border-color: var(--paper-ink); background: var(--paper-wash); }
  .confirm__link:hover .arrow { transform: translateX(3px); }
}
.confirm__link .arrow { transition: transform 0.15s ease; }
.confirm__link:active { border-color: var(--paper-ink); background: var(--press-paper); }

/* ==========================================================================
   The record — the sheet you receive, on the olive desk
   ========================================================================== */

.record-section {
  background: var(--band);
  border-block: 1px solid var(--line);
  padding-block: clamp(3rem, 5.5vw, 5.5rem);
}
.record-section__intro { max-width: var(--measure); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.record-section__intro h2 { font-size: var(--h2); margin-bottom: 0.9rem; max-width: 20ch; }
.record-section__intro h2 .dim { color: var(--sage); }
.record-section__intro p { color: var(--sage); max-width: var(--measure); }

.demo-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.85rem; padding: 0.3rem 0.8rem;
  border: 1px dashed var(--line-firm); border-radius: 999px;
  font-size: 0.8125rem; font-weight: 500; color: var(--sage);
}
.demo-label::before {
  content: ""; flex: none; width: 0.4rem; height: 0.4rem;
  border-radius: 999px; background: var(--sage);
}

.finding {
  background: var(--vellum); color: var(--paper-ink);
  border-radius: var(--r-paper);
  overflow: hidden;
}

.finding__claim {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: clamp(1.15rem, 1.6vw + 0.6rem, 2.25rem);
  border-bottom: 1px solid var(--line-paper);
}
.finding__claim-text { max-width: 72ch; }
.finding__claim-text .label { font-size: 0.8125rem; color: var(--paper-soft); margin-bottom: 0.4rem; }
.finding__claim-text q {
  font-family: var(--display); font-weight: 600;
  /* sized so the quote sits on one line once the card is wide enough */
  font-size: clamp(1.0625rem, 0.72vw + 0.78rem, 1.5rem);
  letter-spacing: -0.02em; line-height: 1.3;
  quotes: "\201C" "\201D";
}

.finding__cols { display: grid; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .finding__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ev-col { padding: clamp(1.15rem, 1.6vw + 0.6rem, 2.25rem); border-bottom: 1px solid var(--line-paper); }
.ev-col:last-child { border-bottom: 0; }
@media (min-width: 52rem) {
  .ev-col { border-bottom: 0; border-right: 1px solid var(--line-paper); }
  .ev-col:last-child { border-right: 0; }
}
.ev-col h3 { margin-bottom: 0.65rem; font-size: 1rem; }
.ev-col p { color: var(--paper-soft); font-size: 0.96875rem; max-width: 46ch; }
.ev-col .record, .ev-col strong { color: var(--paper-ink); }
.ev-col strong { font-weight: 600; }

.status {
  display: inline-flex; align-items: center; gap: 0.55rem; flex: none;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border: 1px solid var(--line-paper); border-radius: 999px;
  font-size: 0.875rem; font-weight: 600; white-space: nowrap;
}
.status__dot {
  width: 0.5625rem; height: 0.5625rem; border-radius: 999px;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--paper-soft);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.status__label { display: grid; align-items: center; }
.status__label > span { grid-area: 1 / 1; transition: opacity 0.3s ease; }
.status__pending { opacity: 0; color: var(--paper-soft); font-weight: 500; }
.status__final { opacity: 1; color: var(--unverified-paper); }

.finding[data-status="unverified"] .status__dot {
  background: var(--unverified-paper);
  box-shadow: inset 0 0 0 1.5px var(--unverified-paper);
}

/* Reads as a key, not as a sentence: the dots sit in their own aligned
   column, and a rule separates the whole block from the prose around it. */
.legend {
  display: grid; grid-template-columns: 1fr; gap: 0.7rem 2.5rem;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--sage);
}
@media (min-width: 46rem) { .legend { grid-template-columns: repeat(3, max-content); } }
.legend span {
  display: grid; grid-template-columns: 0.5rem 1fr;
  align-items: baseline; gap: 0.6rem;
}
.legend i {
  width: 0.5rem; height: 0.5rem; border-radius: 999px;
  transform: translateY(-0.1em);
}
.dot-confirmed    { background: var(--confirmed); }
.dot-unverified   { background: var(--unverified); }
.dot-contradicted { background: var(--contradicted); }

.record-section__foot { margin-top: 1.25rem; color: var(--sage); max-width: var(--measure); }

/* --- the one motion moment --- */
.motion-ok .finding:not(.is-resolved) .status__dot {
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--paper-soft);
}
.motion-ok .finding:not(.is-resolved) .status__pending { opacity: 1; }
.motion-ok .finding:not(.is-resolved) .status__final { opacity: 0; }
.motion-ok .ev-col { transition: opacity 0.45s ease, transform 0.45s ease; }
.motion-ok .finding:not(.is-resolved) .ev-col { opacity: 0; transform: translateY(0.5rem); }
.motion-ok .finding.is-resolved .status__dot,
.motion-ok .finding.is-resolved .status__pending,
.motion-ok .finding.is-resolved .status__final { transition-delay: 0.45s; }
.motion-ok .finding.is-resolved .ev-col:nth-child(1) { transition-delay: 0.70s; }
.motion-ok .finding.is-resolved .ev-col:nth-child(2) { transition-delay: 0.82s; }
.motion-ok .finding.is-resolved .ev-col:nth-child(3) { transition-delay: 0.94s; }

/* ==========================================================================
   What gets checked — four rounded insets on the desk
   ========================================================================== */

.checked { padding-block: clamp(3rem, 5.5vw, 5.5rem); }
.checked__head { max-width: var(--measure); margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.checked__head h2 { font-size: var(--h2); margin-bottom: 0.9rem; max-width: 30ch; text-wrap: balance; }

.checked__grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .checked__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 96rem) { .checked__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.trail {
  padding: clamp(1.25rem, 1.5vw + 0.7rem, 2.25rem);
  border-radius: var(--r-cell);
  background-image: linear-gradient(158deg, rgba(240, 239, 227, 0.075), rgba(240, 239, 227, 0) 64%);
}
.trail--1 { background-color: var(--cell-1); }
.trail--2 { background-color: var(--cell-2); }
.trail--3 { background-color: var(--cell-3); }
.trail--4 { background-color: var(--cell-4); }

.trail__no {
  font-family: var(--display); font-weight: 700; font-size: 0.875rem;
  letter-spacing: 0.02em; color: var(--sage); display: block; margin-bottom: 0.5rem;
}
.trail h3 { margin-bottom: 0.4rem; font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.3125rem); max-width: 20ch; text-wrap: balance; }
.trail p { color: var(--sage); font-size: 0.96875rem; max-width: 42ch; }

/* ==========================================================================
   How it works + limits — one paper band
   ========================================================================== */

.twocol { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 5.5vw, 5.5rem); }
.twocol__band {
  background: var(--vellum);
  color: var(--paper-ink);
  border-radius: var(--r-paper);
  padding: clamp(1.75rem, 3vw, 3.5rem);
}
.twocol__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 56rem) { .twocol__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.twocol h2 { font-size: clamp(1.375rem, 1.6vw + 0.9rem, 2.125rem); margin-bottom: 1.5rem; max-width: 18ch; text-wrap: balance; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 2rem 1fr;
  gap: 0.25rem 0.9rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-paper);
}
.steps li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-weight: 700; font-size: 0.875rem;
  color: var(--paper-soft); padding-top: 0.25rem;
}
.steps h3 { margin-bottom: 0.2rem; max-width: 26ch; text-wrap: balance; }
.steps p { color: var(--paper-soft); font-size: 0.96875rem; max-width: var(--measure); }

.limits { list-style: none; margin: 0; padding: 0; }
.limits li {
  position: relative; padding-left: 1.5rem; margin-bottom: 0.9rem;
  color: var(--paper-soft); max-width: var(--measure);
}
.limits li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 0.6rem; height: 1px; background: var(--line-paper-firm);
}
.limits strong { color: var(--paper-ink); font-weight: 600; }

/* ==========================================================================
   Footer — olive
   ========================================================================== */

.site-foot {
  background: var(--bar);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2.25rem, 4vw, 3rem);
  text-align: center;
}

.lockup { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }

/* The mark has to win against the sign-off under it: bigger, tighter,
   brighter, and set in the display face while the sign-off drops to the
   text face at a smaller size in sage. */
.lockup__mark {
  position: relative;
  display: inline-block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.5rem, 3.2vw + 1.1rem, 4.25rem);
  letter-spacing: -0.04em; line-height: 1;
  color: var(--bone); text-decoration: none;
  /* the inline padding is the press wash's room; the negative margin keeps
     the mark optically centred exactly where it was */
  padding: 0 0.75rem 0.4rem; margin-inline: -0.75rem; border-radius: 14px;
  transition: background-color 0.12s ease;
}
/* hover draws the same hairline the headline does */
.lockup__mark::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0;
  height: 2px; background: var(--rule);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lockup__mark:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .lockup__mark:hover::after { transform: scaleX(1); }
}
.lockup__mark:active { background: var(--press-olive); }

.signoff {
  font-family: var(--text); font-weight: 500;
  font-size: clamp(0.9375rem, 0.3vw + 0.83rem, 1.0625rem);
  line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sage);
}
.signoff span { display: block; }

.foot__row {
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.foot__about {
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  font-size: 0.875rem; color: var(--sage); max-width: 46ch; margin-inline: auto;
}
.foot__about p { text-wrap: balance; }

/* The chip is a separate case from the header's: that one sits on vellum
   and takes paper values, this one sits on olive and would be invisible
   with them. Same component, two grounds, two tunings. */
.site-foot .coverage-chip {
  /* bone, not sage: the 6% wash lifts the ground under the chip, which drops
     sage to 4.02:1 on it. Border likewise needs more than --line-firm to
     clear 3:1 as a non-text boundary. */
  color: var(--bone);
  border-color: rgba(240, 239, 227, 0.55);
  background: var(--wash);
}

.foot__links {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.25rem 1.75rem; margin: 0; padding: 0; font-size: 0.875rem;
}
.foot__links a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  text-decoration: none; color: var(--sage);
  /* padding gives the press wash a pill to sit in, the negative margin keeps
     the row's spacing identical to what the flex gap already set */
  padding-inline: 0.7rem; margin-inline: -0.7rem; border-radius: 999px;
  transition: color 0.15s ease, background-color 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .foot__links a:hover { color: var(--bone); text-decoration: underline; }
}
.foot__links a:active { color: var(--bone); background: var(--press-olive); }

/* contact gets its own line, not jammed in with the nav links */
.foot__contact { font-size: 0.875rem; }
.foot__contact a {
  color: var(--sage); overflow-wrap: anywhere;
  text-underline-offset: 0.25em; transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .foot__contact a:hover { color: var(--bone); }
}

.foot__note {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-top: 1.25rem; border-top: 1px solid var(--line);
  max-width: var(--measure); margin-inline: auto;
}

/* ==========================================================================
   Legal pages — the document sits on paper
   ========================================================================== */

.doc { padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem); }

.backlink {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--sage);
  text-decoration: none; margin-bottom: 1.25rem;
  padding-inline: 0.6rem; margin-inline: -0.6rem; border-radius: 999px;
  transition: color 0.15s ease, background-color 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .backlink:hover { color: var(--bone); }
}
.backlink:active { color: var(--bone); background: var(--press-olive); }

.doc__band {
  background: var(--vellum);
  color: var(--paper-ink);
  border-radius: var(--r-paper);
  padding: clamp(1.75rem, 3.5vw, 4rem);
}
/* the column that holds the paper band; the band's own padding keeps the
   text measure at roughly 42rem inside it */
.doc__inner { max-width: 48rem; margin-inline: auto; }

.doc h1 { font-size: clamp(1.875rem, 2vw + 1.1rem, 2.75rem); margin-bottom: 0.5rem; text-wrap: balance; }
.doc__updated { color: var(--paper-soft); font-size: 0.9375rem; margin-bottom: 2rem; }

.doc h2 {
  font-size: 1.25rem; margin: 2.75rem 0 0.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-paper); display: flex; gap: 0.75rem;
}
.doc h2 .sec { font-weight: 600; color: var(--paper-soft); flex: none; letter-spacing: -0.01em; }
.doc p, .doc li, .doc dd { color: var(--paper-soft); }
.doc ul { padding-left: 1.2rem; margin: 0.9rem 0; }
.doc li { margin-bottom: 0.5rem; }
.doc strong { color: var(--paper-ink); font-weight: 600; }
.doc dl { margin: 1rem 0 1.5rem; }
.doc dt { color: var(--paper-ink); font-weight: 600; margin-top: 1.25rem; }
.doc dd { margin: 0.25rem 0 0; }
.doc a { color: var(--paper-ink); overflow-wrap: anywhere; }

/* A draft under review is, in this product's own language, unverified. */
.draft-flag {
  border: 1px solid rgba(138, 78, 6, 0.35);
  border-left: 3px solid var(--unverified-paper);
  border-radius: 0 var(--r-input) var(--r-input) 0;
  background: rgba(138, 78, 6, 0.07);
  padding: 1rem 1.15rem; margin-bottom: 2.25rem;
}
.draft-flag strong {
  display: block; font-family: var(--display); font-weight: 700;
  letter-spacing: -0.015em; color: var(--unverified-paper); margin-bottom: 0.3rem;
}
.draft-flag span { display: block; font-size: 0.9375rem; line-height: 1.5; color: var(--paper-soft); }

/* ==========================================================================
   Phone — below 40rem (640px)

   Density here comes from WIDENING the type scale, not from shrinking
   everything by the same amount. Headings hold their size; supporting text
   — hints, card copy, fine print, legend labels — steps down, so hierarchy
   reappears instead of flattening into a wall. Containers give up padding.

   Nothing interactive shrinks below 2.75rem (44px). Density is taken from
   whitespace and from text that is not a control.

   This block overrides base rules at the same specificity, so it must stay
   below them in source order. Keep it here, above reduced-motion.
   ========================================================================== */

@media (max-width: 40rem) {

  /* --- header: one compact row, wordmark left, nav right --- */
  .site-head__inner {
    flex-wrap: nowrap;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding-block: 0.5rem;
  }
  /* The coverage chip already appears in the hero and again in the footer.
     On a phone all three land on or near the first screen, so the header
     instance goes. */
  .site-head .coverage-chip { display: none; }
  .wordmark { font-size: 1.375rem; }
  .site-nav { gap: 0; flex-wrap: nowrap; }
  .site-nav a { font-size: 0.8125rem; padding: 0.4rem 0.5rem; }

  /* --- supporting text steps down --- */
  .hint,
  .fine,
  .legend,
  .btn-note,
  .pre-submit,
  .demo-label,
  .finding__claim-text .label { font-size: 0.75rem; }
  .consent-check { font-size: 0.8125rem; }
  .field > label,
  .field-group > legend { font-size: 0.8125rem; }
  .trail p,
  .ev-col p,
  .steps p,
  .limits li,
  .record-section__intro p,
  .record-section__foot,
  .foot__about { font-size: 0.875rem; }
  .lede { font-size: 1rem; }

  /* --- headings keep their weight in the hierarchy --- */
  .trail h3 { font-size: 1.0625rem; }
  .panel__head h2 { font-size: 1.125rem; }

  /* --- the form panel: less padding, tighter between field groups --- */
  .panel { padding: 1.15rem 1rem; }
  .panel__head { padding-bottom: 0.8rem; margin-bottom: 1rem; }
  .field { margin-bottom: 0.8rem; }
  .field-group { margin-bottom: 0.8rem; }
  .hint { margin-bottom: 0.4rem; }
  .chips { gap: 0.35rem; }
  .pre-submit { margin-top: 0.9rem; }
  .consent-check { margin: 0.7rem 0 0.9rem; }
  .btn-note { margin-top: 0.6rem; }

  /* --- record trails: shorter cells, tighter stack --- */
  .trail { padding: 1.1rem 1rem; }
  .trail__no { margin-bottom: 0.35rem; }
  .checked__grid { gap: 0.5rem; }

  /* --- the two checklists go flat --- */
  /* On the vellum band the contrast already separates these items from the
     page, so a fill and a radius on each one only adds eleven more boxes to
     a column of boxes. Below 40rem: the mark, the text, and a hairline
     between. The same treatment runs on .deliver__list further down. */
  .limits li {
    margin-bottom: 0;
    padding: 0.5rem 0 0.55rem 1.5rem;
    line-height: 1.45;
    border-bottom: 1px solid var(--line-paper);
  }
  .limits li:last-child { border-bottom: 0; padding-bottom: 0; }
  /* the dash tracks the first line down past the new padding */
  .limits li::before { top: 1.2em; }

  /* --- sections give back some vertical run --- */
  .hero { padding-block: 2rem 2.25rem; }
  .checked { padding-block: 2.5rem; }
  .record-section { padding-block: 2.5rem; }
  .ev-col { padding: 1.1rem 1rem; }
  .finding__claim { padding: 1.1rem 1rem; }

  /* --- controls hold 44px no matter what the density says --- */
  .chip { min-height: 2.75rem; padding: 0.5rem 0.65rem; }
  input[type="text"],
  input[type="email"],
  select,
  textarea { min-height: 2.75rem; }
  .btn { min-height: 3rem; }
  .site-nav a,
  .foot__links a,
  .backlink { min-height: 2.75rem; }
  .consent-check input { width: 1.125rem; height: 1.125rem; }
}

/* ==========================================================================
   Two-stage check — stages, preliminary result, coverage waitlist

   The panel now holds four mutually-exclusive views rather than one form:
   the address (Stage 1), the preliminary result, the outside-coverage
   waitlist, and the enquiry (Stage 2). Only the result and Stage 2 are ever
   on screen together, and then the result is collapsed to its confirmed
   lines. Visibility is the `hidden` attribute and nothing else, so the
   states are inspectable in the DOM without reading the script.
   ========================================================================== */

/* Nothing in the panel sets `display`, but a stray rule that did would
   silently defeat `hidden`. This makes the attribute authoritative. */
[hidden] { display: none !important; }

/* --- small label above a heading, naming what the section is ------------ */
.eyebrow {
  font-family: var(--display); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 0.7rem;
}
.eyebrow--paper { color: var(--paper-soft); }

/* --- a text button that reads as a link, not a control ----------------- */
/* Text for screen readers only — used to say that a link opens in a new tab,
   which sighted users can see from context but nobody else can. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.linkish {
  font: inherit; font-size: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 0.2em;
  text-decoration-thickness: 1px; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .linkish:hover { color: var(--paper-ink); }
}
.linkish:active { color: var(--paper-ink); }

/* --- the preliminary check result -------------------------------------- */
.result { max-width: 34rem; }
.result:focus, .result:focus-visible { outline: none; }

.result__lines { list-style: none; margin: 0 0 1.35rem; padding: 0; }
.result__lines li {
  display: grid; grid-template-columns: 1.15rem 1fr;
  gap: 0.6rem; align-items: start;
  padding-bottom: 0.7rem; margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-paper);
  font-size: 0.9375rem; line-height: 1.45;
}
.result__lines li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.result__tick {
  color: var(--confirmed-paper); font-size: 1rem;
  line-height: 1.35; font-weight: 700;
}
.result__lines strong { display: block; color: var(--paper-ink); font-weight: 600; }
/* the resolved values, and the one place a record value is printed back */
.result__detail {
  display: block; margin-top: 0.15rem;
  font-family: var(--record); font-size: 0.8125rem;
  color: var(--paper-soft); overflow-wrap: anywhere;
}

/* the conservation line is a sentence, not a record value, so it takes the
   text face rather than the mono one the postcode and authority use */
.result__detail--prose { font-family: var(--text); font-size: 0.875rem; }

/* the mark for "we looked and found nothing" — neutral, not a warning */
.result__tick--none { color: var(--paper-soft); font-weight: 500; }

.result__source {
  display: inline-block; margin-top: 0.35rem;
  font-size: 0.8125rem; color: var(--paper-ink);
}
.result__aside {
  display: block; margin-top: 0.45rem;
  font-size: 0.8125rem; line-height: 1.45; color: var(--paper-soft);
}

.result__note {
  padding: 1rem 1.1rem; margin-bottom: 1.35rem;
  background: var(--paper-wash); border-radius: var(--r-input);
}
.result__note p { color: var(--paper-soft); font-size: 0.9375rem; }
.result__note .eyebrow { margin-bottom: 0.45rem; }
.result__note .fine { margin-top: 0.7rem; }

/* Once the visitor continues, the two confirmed lines stay as context and
   everything that was there to get them to continue goes away. */
.result.is-compact {
  padding-bottom: 1.35rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-paper);
}
.result.is-compact .result__note,
.result.is-compact #continue-btn,
.result.is-compact .result__back { display: none; }

.result__back { margin-top: 0.85rem; text-align: center; font-size: 0.8125rem; color: var(--paper-soft); }

/* --- outside coverage --------------------------------------------------- */
.result--outside .result__head { font-size: 1.1875rem; margin-bottom: 0.75rem; text-wrap: balance; }
.result--outside > p { color: var(--paper-soft); font-size: 0.9375rem; }
.result--outside form { margin-top: 1.35rem; }

.notify-done { padding: 1rem 1.1rem; margin-top: 1.35rem; background: var(--paper-wash); border-radius: var(--r-input); }
.notify-done:focus, .notify-done:focus-visible { outline: none; }
.notify-done p { color: var(--paper-soft); font-size: 0.9375rem; }
.notify-done__mark { color: var(--confirmed-paper); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.3rem; }

/* --- Stage 2 carry-over from Stage 1 ------------------------------------ */
.stage-echo {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1.15rem;
  border-bottom: 1px solid var(--line-paper);
}
.stage-echo__label {
  flex: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--paper-soft);
}
.stage-echo__value { font-size: 0.9375rem; color: var(--paper-ink); overflow-wrap: anywhere; }

.stage-hint {
  padding: 0.75rem 0.9rem; margin-bottom: 1.15rem;
  border-left: 3px solid var(--line-paper-firm);
  background: var(--paper-wash);
  border-radius: 0 var(--r-input) var(--r-input) 0;
  font-size: 0.875rem; line-height: 1.45; color: var(--paper-soft);
}

/* --- buttons that are not waiting on a form ----------------------------- */
/* The readiness rule lights a button from its own form s validity, so a
   button with no form owner would sit dimmed forever. These two are not
   waiting on anything a visitor has to fill in, so they are always at full
   strength: the one that moves from the result to Stage 2, and the inline
   CTA further down the page. */
.btn--ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .btn--ready:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
}
.btn--ready:active { background: var(--btn-press); border-color: var(--btn-press); }

/* --- the check button while the lookup is in flight --------------------- */
/* Deliberately not `disabled`: a disabled button drops focus in some
   engines, which strands a keyboard user mid-check. A flag in the script
   guards the double submit; this only says what is happening. */
.btn[aria-busy="true"],
form:valid .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* ==========================================================================
   What you get — the checklist, on the olive ground
   ========================================================================== */

/* Paper, by the rule at the top of this file: this is a checklist you read,
   the same kind of surface as the How-it-works band above it. It also gives
   the long olive run at the foot of the page something to break against
   before the footer, which stays olive. */
.deliver { padding-block: 0 clamp(3rem, 5.5vw, 5.5rem); }
.deliver__band {
  background: var(--vellum);
  color: var(--paper-ink);
  border-radius: var(--r-paper);
  padding: clamp(1.75rem, 3vw, 3.5rem);
}
.deliver__head { max-width: var(--measure); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.deliver__head h2 { font-size: var(--h2); margin-bottom: 0.9rem; }
.deliver__head .lede { color: var(--paper-soft); }

.deliver__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 52rem) { .deliver__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem; } }

.deliver__list li {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.75rem; align-items: start;
  padding: 0.85rem 1rem;
  background: var(--paper-wash); border-radius: var(--r-cell);
  color: var(--paper-ink); font-size: 0.96875rem; line-height: 1.5;
}
.deliver__list li::before {
  content: "\2713";
  color: var(--confirmed-paper); font-weight: 700; line-height: 1.5;
}

.deliver__cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* The inline CTA is a link, not a form control, so the readiness rule never
   reaches it — it is always at full strength. It now sits on the paper band,
   so it takes the same olive-on-paper treatment as the button in the form
   panel and needs no colour of its own. */
.btn--inline {
  width: auto; opacity: 1;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn--inline:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
}
.btn--inline:active { background: var(--btn-press); border-color: var(--btn-press); }

@media (max-width: 40rem) {
  .deliver { padding-block: 0 2.5rem; }
  .deliver__band { padding: 1.25rem 1rem; }
  /* Flat, to match .limits above: no fill, no radius, hairline between. */
  .deliver__list { gap: 0; }
  .deliver__list li {
    background: none; border-radius: 0;
    padding: 0.5rem 0 0.55rem;
    font-size: 0.9375rem; line-height: 1.45;
    border-bottom: 1px solid var(--line-paper);
  }
  .deliver__list li::before { line-height: 1.45; }
  .deliver__list li:last-child { border-bottom: 0; padding-bottom: 0; }
  .result__note { padding: 0.85rem 0.9rem; margin-bottom: 1.15rem; }
  .btn--inline { width: 100%; }
}

/* ==========================================================================
   Reduced motion — the H1 rule renders static, nothing animates
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}