/* ==========================================================================
   Handrail Audit — shared stylesheet
   Served at /styles.css. Every page on the site links this one file.

   Hand-written CSS. No framework, no build step, no JavaScript anywhere.

   Color is neutral by decision. Every value lives in the token block below;
   nothing after it references a literal color, so a palette drops in by
   editing eleven values and their dark-mode pair.

   Section 16 is used by the home page only. It is kept here rather than in a
   second file because two stylesheets is how they drift.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --ink:       #14161A;
  --ink-2:     #4A5058;
  --ink-3:     #6E747D;
  --surface:   #FFFFFF;
  --surface-2: #F5F6F8;
  --line:      #D5D8DD;
  --line-2:    #E8EAEE;

  /* Two colours, two jobs (11 September 2026). Blue marks what the reader
     can act on: the primary button, links, focus, step numbers, taglines.
     Orange is the second button: the sample report, the other way in.
     Blue on white 6.3:1, white on orange 5.2:1, both above 4.5:1.
     The flag (a dashed outline on a failing element) stays the dark amber. */
  --accent:      #1D4ED8;
  --accent-ink:  #FFFFFF;
  --accent-soft: #EAF0FD;
  --orange:      #C2410C;
  --orange-ink:  #FFFFFF;
  --flag:        #8A5500;
  --flag-soft:   #FCF1DC;

  --btn-bg:    #1D4ED8;
  --btn-ink:   #FFFFFF;
  --focus:     #1D4ED8;

  /* Fluid type scale. Ratio holds from 320px to 1440px. */
  --step--1: clamp(0.86rem, 0.83rem + 0.14vw, 0.94rem);
  --step-0:  clamp(1rem,    0.96rem + 0.20vw, 1.08rem);
  --step-1:  clamp(1.14rem, 1.06rem + 0.36vw, 1.32rem);
  --step-2:  clamp(1.30rem, 1.16rem + 0.62vw, 1.62rem);
  --step-3:  clamp(1.50rem, 1.26rem + 1.05vw, 2.10rem);
  --step-4:  clamp(1.80rem, 1.42rem + 1.70vw, 2.70rem);

  --gutter:    clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(2.75rem, 6vw, 4.75rem);
  --stack:     1.1rem;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ui: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
}

/* No dark theme (decided 11 September 2026): the page is white for
   everyone, like the report. */


@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/archivo.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* no smooth scroll: it fights assistive tech */
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--step-0);
  line-height: 1.62;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -0.01em; }

p, ul, ol, dl, table, figure { margin: 0; }
ul, ol { padding-left: 1.25rem; }
li + li { margin-block-start: 0.4rem; }

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

/* Focus. The page tells the reader to push Tab, so this is load-bearing.
   Every interactive element must show it, against every background. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 0;
}

::selection { background: var(--ink); color: var(--surface); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - (var(--gutter) * 2), 68rem);
  margin-inline: auto;
}

.prose { max-width: 60ch; }

/* When .prose sits on the container itself, constrain the CHILDREN, not the
   container. Otherwise the 60ch cap overrides the container width and the
   whole section centres, breaking alignment with every other section. */
.container.prose { max-width: none; }
.container.prose > * { max-width: 60ch; }

.stack   > * + * { margin-block-start: var(--stack); }
.stack-l > * + * { margin-block-start: 1.9rem; }

main > section {
  padding-block: var(--section-y);
  border-block-start: 1px solid var(--line-2);
}
main > section:first-of-type { border-block-start: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-block-end: 0.75rem;
}
.lede  { font-size: var(--step-1); }
.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); color: var(--ink-2); }

/* A link that is the whole line is not "inline in a sentence", so the
   WCAG 2.5.8 target-size exception does not cover it. Give it real height. */
.standalone-link a { display: inline-block; padding-block: 0.25rem; }

/* --------------------------------------------------------------------------
   4. SKIP LINK
   -------------------------------------------------------------------------- */
.skip {
  position: absolute;
  left: 0.5rem; top: -4rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.12s ease-out;
}
.skip:focus { top: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }

/* --------------------------------------------------------------------------
   5. HEADER
   No hamburger. Links wrap to a second line on a narrow screen. A disclosure
   menu is a scripted widget and this page carries no script.
   -------------------------------------------------------------------------- */
.site-header { border-block-end: 1px solid var(--line); }

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1.1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.wordmark .mark { flex: none; }
.wordmark .rule {
  display: inline-block;
  width: 1.6rem;
  height: 2px;
  background: currentColor;
  margin-inline-start: 0.1rem;
}

.site-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
}
.site-nav li + li { margin-block-start: 0; }
.site-nav a {
  display: inline-block;
  padding-block: 0.35rem;
  font-size: var(--step--1);
  color: var(--ink-2);
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 40rem) {
  .site-header .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(2rem, 4.5vw, 2.75rem) clamp(1.75rem, 3.5vw, 2.25rem); }
.hero h1 { max-width: 27ch; }
.hero .lede { max-width: 58ch; margin-block-start: 0.9rem; }

.factstrip {
  margin-block-start: 1.4rem;
  padding-block: 0.85rem;
  border-block: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.1rem;
}
.factstrip .sep { color: var(--ink-3); }

.hero .btn { margin-block-start: 1.4rem; }
.orgline { margin-block-start: 1.1rem; font-size: var(--step--1); color: var(--ink-2); }

@media (max-width: 34rem) {
  .factstrip { flex-direction: column; gap: 0.35rem; }
  .factstrip .sep { display: none; }
}

/* --------------------------------------------------------------------------
   7. THREE CHECKABLE FIGURES
   Three columns. The figure is the graphic. The icon is drawn markup, never
   an emoji and never an image file.
   -------------------------------------------------------------------------- */
.checks ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.checks li { margin-block-start: 0; }
.check {
  height: 100%;
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 0;
}
.check .icon { display: block; color: var(--ink-3); margin-block-end: 0.85rem; }
.check .fig {
  display: block;
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.check h3 { font-size: var(--step-1); margin-block-start: 0.45rem; }
.check p { margin-block-start: 0.5rem; font-size: var(--step--1); color: var(--ink-2); }

@media (max-width: 52rem) {
  .checks ul { grid-template-columns: 1fr; gap: 1rem; }
}

/* --------------------------------------------------------------------------
   8. TABLES
   The wrapper scrolls, not the page. It is focusable on purpose: a scrolling
   region that keyboard users cannot reach fails scrollable-region-focusable.
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0;
}
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
caption {
  padding: 0.85rem 1rem 0.7rem;
  text-align: left;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-3);
  border-block-end: 1px solid var(--line-2);
}
th, td {
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: top;
  border-block-start: 1px solid var(--line-2);
}
thead th {
  border-block-start: 0;
  background: var(--surface-2);
  font-weight: 700;
  white-space: nowrap;
}
tbody th { font-weight: 600; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------------------
   9. PRICE
   -------------------------------------------------------------------------- */
.pricecards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}
.pricecard {
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 0;
}
.pricecard .amount {
  display: block;
  margin-block: 0.35rem 0.45rem;
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   10. STEPS AND PROPORTION BAR
   -------------------------------------------------------------------------- */
.propbar {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  font-size: var(--step--1);
}
.propbar span { padding: 0.7rem 0.9rem; }
.propbar .machine {
  color: var(--ink-2);
  border-inline-end: 1px solid var(--line);
  white-space: nowrap;
}
.propbar .human { flex: 1; background: var(--surface-2); font-weight: 700; }

@media (max-width: 30rem) {
  .propbar { flex-direction: column; }
  .propbar .machine { border-inline-end: 0; border-block-end: 1px solid var(--line); }
}

.steps { list-style: none; padding: 0; }
.steps li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0 1.25rem;
  padding-block: 0.7rem;
  margin-block-start: 0;
  border-block-start: 1px solid var(--line-2);
}
.steps li:first-child { border-block-start: 1px solid var(--line); }
.steps li:last-child { border-block-end: 1px solid var(--line); }
.steps .dur {
  padding-block-start: 0.15rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-3);
}
@media (max-width: 34rem) {
  .steps li { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --------------------------------------------------------------------------
   11. FEATURE PANEL, CALLOUT, CTA
   -------------------------------------------------------------------------- */
.feature {
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 2px solid var(--ink);
  border-radius: 0;
}
.feature h2 { max-width: 26ch; }
.feature > * + * { margin-block-start: 1.05rem; }

.callout {
  padding: 1.3rem 1.4rem;
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: 0;
}
.callout h3 { font-size: var(--step-1); }
.callout > * + * { margin-block-start: 0.7rem; }
.callout p { max-width: 62ch; }

.cta {
  padding: clamp(1.4rem, 3vw, 2.1rem);
  border: 2px solid var(--ink);
  border-radius: 0;
}
.cta h2 { font-size: var(--step-2); }
.cta p { margin-block-start: 0.7rem; max-width: 58ch; }
.cta .after { margin-block-start: 1.1rem; font-size: var(--step--1); color: var(--ink-2); }

.btn {
  display: inline-block;
  margin-block-start: 1.35rem;
  padding: 0.85rem 1.5rem;
  min-height: 2.75rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 2px solid var(--btn-bg);
  border-radius: 0;
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  word-break: break-word;
}
.btn:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   12. RECORD LIST
   -------------------------------------------------------------------------- */
.record {
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 0;
}
.record dl {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.55rem 1.5rem;
  font-size: var(--step--1);
}
.record dt {
  padding-block-start: 0.15rem;
  font-family: var(--mono);
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.record dd { margin: 0; }
.record dd > a { display: inline-block; padding-block: 0.25rem; }

@media (max-width: 34rem) {
  .record dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .record dd { margin-block-end: 0.75rem; }
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq > div {
  padding-block: 1.15rem;
  border-block-start: 1px solid var(--line-2);
}
.faq > div:first-child { border-block-start: 1px solid var(--line); }
.faq > div:last-child { border-block-end: 1px solid var(--line); }
.faq h3 { font-size: var(--step-1); }
.faq p { margin-block-start: 0.45rem; max-width: 68ch; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  border-block-start: 1px solid var(--line);
}
.site-footer nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.site-footer nav li + li { margin-block-start: 0; }
.site-footer nav a {
  display: inline-block;
  padding-block: 0.3rem;
  font-size: var(--step--1);
  color: var(--ink-2);
}
.site-footer .org {
  margin-block-start: 1.5rem;
  font-size: var(--step--1);
  line-height: 1.75;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   15. PRINT
   A practice owner will print the price page and take it to a partner.
   -------------------------------------------------------------------------- */
@media print {
  .skip, .site-nav, .btn { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  main > section { border: 0; padding-block: 0.6rem; break-inside: avoid; }
  .table-scroll, .feature, .callout, .cta, .record, .pricecard, .check {
    border: 1px solid #999;
  }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  a[href^="#"]::after { content: ""; }
}

/* --------------------------------------------------------------------------
   16. HOME PAGE ONLY — the self-check block
   Three numbered checks. The number is drawn with CSS counters, so it is not
   in the accessible name and a screen reader reads the heading, not "1 1".
   -------------------------------------------------------------------------- */
.selfcheck ol {
  list-style: none;
  padding: 0;
  counter-reset: chk;
}
.selfcheck li {
  position: relative;
  margin-block-start: 0;
  padding: 1.25rem 0 1.25rem 3.4rem;
  border-block-start: 1px solid var(--line-2);
  counter-increment: chk;
}
.selfcheck li:first-child { border-block-start: 1px solid var(--line); }
.selfcheck li:last-child { border-block-end: 1px solid var(--line); }
.selfcheck li::before {
  content: counter(chk);
  position: absolute;
  left: 0;
  top: 1.2rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 700;
}
.selfcheck h3 { font-size: var(--step-1); }
.selfcheck p { margin-block-start: 0.4rem; max-width: 64ch; color: var(--ink-2); }

.verdict {
  margin-block-start: 1.5rem;
  font-size: var(--step-1);
  font-weight: 700;
  max-width: 56ch;
}

@media (max-width: 30rem) {
  .selfcheck li { padding-left: 2.9rem; }
  .selfcheck li::before { width: 1.9rem; height: 1.9rem; }
}

/* --------------------------------------------------------------------------
   17. HOME PAGE ONLY — the specimen document
   One page of a findings report, rendered as the hero. The document is
   the object the reader inspects; the h1 above it stays small on purpose.
   The drawing of the page is decorative markup, hidden from assistive
   technology, and the figcaption plus a visually-hidden sentence carry the
   meaning. No colour beyond the tokens: the critical tag is filled ink.
   -------------------------------------------------------------------------- */
.hero-specimen h1 { font-size: var(--step-2); max-width: 34ch; }
.hero-specimen .lede { font-size: var(--step-0); color: var(--ink-2); max-width: 62ch; margin-block-start: 0.6rem; }

.specimen {
  margin-block-start: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgba(0, 0, 0, 0.45);
}
.specimen-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
  padding: 0.8rem 1.6rem;
  border-block-end: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.specimen-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 2rem;
  padding: 1.5rem 1.6rem 1.8rem;
}
.specimen-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 0.9rem;
  margin-block-end: 1.1rem;
}
.specimen-title h2, .specimen-title h3, .specimen-title h4 { font-size: var(--step-3); max-width: 24ch; }
.tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 0;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tag-crit { background: var(--ink); color: var(--surface); }
.tag-sc { border: 1px solid var(--line); color: var(--ink-2); white-space: normal; }

.specimen dl {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.75rem 1.2rem;
}
.specimen dt {
  padding-block-start: 0.2rem;
  font-family: var(--mono);
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.specimen dd { margin: 0; max-width: 54ch; }

.specimen-figs { display: flex; flex-direction: column; gap: 1rem; }
.specimen-figs figure { margin: 0; }
.specimen-figs figcaption {
  margin-block-end: 0.45rem;
  font-family: var(--mono);
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.minipage {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-2);
}
.minipage .bar { height: 0.4rem; border-radius: 0; background: var(--line); }
.minipage .bar.dark { width: 44%; height: 0.55rem; background: var(--ink); }
.minipage .bar.short { width: 68%; }
.minipage .iconbtn {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-block: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink-2);
  outline: 2px dashed var(--ink);
  outline-offset: 3px;
}
.announce {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: var(--step-1);
  font-weight: 700;
}
.announce small {
  display: block;
  margin-block-start: 0.2rem;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-2);
}
.specimen-foot {
  padding: 0.85rem 1.6rem;
  border-block-start: 1px solid var(--line-2);
  font-size: var(--step--1);
  color: var(--ink-2);
}

.specimen-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  margin-block-start: 1.6rem;
}
.specimen-strip p { max-width: 50ch; }
.specimen-strip .acts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.specimen-strip .btn { margin-block-start: 0; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--ink); }

.onecheck { border: 2px solid var(--ink); border-radius: 0; padding: clamp(1.3rem, 3vw, 2rem); }
.onecheck h3 { font-size: var(--step-2); }
.onecheck > * + * { margin-block-start: 0.9rem; }
.onecheck p { max-width: 62ch; }

@media (max-width: 52rem) {
  .specimen-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 34rem) {
  .specimen dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .specimen dd { margin-block-end: 0.7rem; }
  .specimen-body { padding: 1.2rem 1.1rem 1.4rem; }
  .specimen-meta, .specimen-foot { padding-inline: 1.1rem; }
}
@media print {
  .specimen { border: 1px solid #999; box-shadow: none; }
  .onecheck { border: 1px solid #999; }
}

/* --------------------------------------------------------------------------
   18. HOME PAGE ONLY — the patient's path
   Four steps, one patient, to the moment the patient gives up. Each step is
   a bordered card with a drawing of an interface, never a person. The
   drawings are decorative markup hidden from assistive technology; the step
   heading, the screen reader line and the count carry the meaning. The step
   number is a CSS counter, so it never enters the accessible name.
   -------------------------------------------------------------------------- */
.hero-path h1 { max-width: 22ch; }
.hero-path .lede { max-width: 56ch; }

.path {
  list-style: none;
  padding: 0;
  margin-block-start: 1.8rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  counter-reset: step;
}
.path > li {
  margin-block-start: 0;
  padding: 1.3rem 1.4rem 1.4rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  counter-increment: step;
}
.path > li::before {
  content: "Step " counter(step);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.path h2 { font-size: var(--step-2); line-height: 1.22; max-width: 28ch; }
.path .says {
  font-family: var(--mono);
  font-size: var(--step-0);
  font-weight: 700;
}
.path .says span { font-weight: 400; color: var(--ink-2); }
.path .count { font-size: var(--step--1); color: var(--ink-2); margin-block-start: auto; }
.path .count a { display: inline-block; padding-block: 0.15rem; }

.ill {
  position: relative;
  min-height: 6rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: var(--ink-2);
}
.ill .bar { height: 0.4rem; border-radius: 0; background: var(--line); }
.ill .bar.dark { width: 44%; height: 0.55rem; background: var(--ink); }
.ill .bar.short { width: 62%; }
.ill .bar.faint { background: var(--line-2); }          /* the unreadable times */
.ill .bar.faint.short { width: 48%; }
.ill .row { display: flex; gap: 0.6rem; align-items: center; }
.ill .box {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}
.ill .box.flag { outline: 2px dashed var(--ink); outline-offset: 3px; }
.ill .bubble {
  align-self: flex-start;
  margin-block-start: 0.3rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink);
}
.ill.center { align-items: center; justify-content: center; }

.path-why { margin-block-start: 1.8rem; }
.path-why p { max-width: 62ch; }
.path-why strong { font-weight: 700; }

@media (max-width: 52rem) {
  .path { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .path > li { border: 1px solid #999; break-inside: avoid; }
}

/* --- 18b. Additions of 8 September 2026: tags, routes, tiers, journey --- */

/* Tags under each step: criterion, level, how found, who it affects. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}
.tags span {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.78em;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}

/* Where to start: three readers, three routes. */
.routes { list-style: none; padding: 0; }
.routes > li {
  display: grid;
  grid-template-columns: minmax(0, 20rem) 1fr;
  gap: 0.4rem 2rem;
  padding-block: 1.1rem;
  margin-block-start: 0;
  border-block-start: 1px solid var(--line-2);
}
.routes > li:first-child { border-block-start: 1px solid var(--line); }
.routes > li:last-child { border-block-end: 1px solid var(--line); }
.routes h3 { font-size: var(--step-1); }
.routes p { max-width: 60ch; color: var(--ink-2); }
.routes p a { color: var(--ink); }
@media (max-width: 44rem) {
  .routes > li { grid-template-columns: 1fr; }
}

/* Three tiers. The card grid from section 9 does the layout; this adds
   the unit line and the one-sentence description. */
.pricecard .unit { display: block; font-family: var(--mono); font-size: var(--step--1); color: var(--ink-3); }
.pricecard .desc { margin-block-start: 0.5rem; font-size: var(--step--1); color: var(--ink-2); }
.pricecard .term { margin-block-start: 0.6rem; font-family: var(--mono); font-size: var(--step--1); color: var(--ink-3); }

/* The buyer's journey. A real sequence, so the number is honest. The
   number is drawn with a counter so it stays out of the accessible name;
   the ol still announces the position. */
.journey {
  list-style: none;
  padding: 0;
  counter-reset: j;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.journey > li {
  position: relative;
  margin-block-start: 0;
  padding: 0.9rem 1rem 1rem 3.1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  font-size: var(--step--1);
  counter-increment: j;
}
.journey > li::before {
  content: counter(j);
  position: absolute;
  left: 0.9rem;
  top: 0.85rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
}
.journey .when {
  display: block;
  margin-block-start: 0.3rem;
  font-family: var(--mono);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
@media (max-width: 52rem) { .journey { grid-template-columns: 1fr; } }
@media print { .journey > li, .routes > li { break-inside: avoid; } }

/* --- 18c. The Tab test, three frames (9 September 2026)
   Three drawings of a form. The drawing in each frame is aria-hidden; the
   caption under it is real text in an ordered list, so the sequence reads
   as words. The outline drawn on the field is the site's own focus style,
   3px ink with a 3px offset, so the reader sees the thing itself. --- */
.tabframes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.tabframes > li { margin-block-start: 0; }
.tabframe {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.tabframe .lbl { height: 0.4rem; width: 38%; border-radius: 0; background: var(--ink-3); }
.tabframe .field { height: 1.6rem; border: 1px solid var(--line); border-radius: 0; background: var(--surface); }
.tabframe .field.on { outline: 3px solid var(--ink); outline-offset: 3px; }
.tabframe .go { height: 1.7rem; width: 46%; margin-block-start: 0.3rem; border-radius: 0; background: var(--ink); }
.tabframe .go.gone { background: var(--surface); border: 1px dashed var(--ink-3); }
.tabframes .cap { margin-block-start: 0.6rem; font-size: var(--step--1); color: var(--ink-2); max-width: 30ch; }
.tabframes .cap b {
  display: block;
  font-family: var(--mono);
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-block-end: 0.15rem;
}
@media (max-width: 44rem) { .tabframes { grid-template-columns: 1fr; } }
@media print { .tabframe { border: 1px solid #999; } .tabframe .field.on { outline: 3px solid #000; } }

/* --- 18d. The worked example as a page grid (9 September 2026)
   Twelve tiles, one per page. A full page has more lines and a dark price;
   a light page is paler with fewer lines. The lines are decorative and
   hidden; the page name and price in each tile are real text, and the sum
   under the grid is real text. Full and light differ by line count, price
   and the word "light", never by colour alone. --- */
.pagegrid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}
.pagegrid > li { margin-block-start: 0; }
.pg {
  height: 100%;
  min-height: 7rem;
  padding: 0.7rem 0.7rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pg .b { height: 0.32rem; border-radius: 0; background: var(--line); }
.pg .b.t { width: 55%; height: 0.42rem; background: var(--ink); }
.pg .b.s { width: 65%; }
.pg.light { background: var(--surface-2); }
.pg.light .b { background: var(--line-2); }
.pg.light .b.t { background: var(--ink-3); }
.pg .pn {
  margin-block-start: auto;
  padding-block-start: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-2);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.pg .pn strong { color: var(--ink); font-size: 1rem; }
.pg .pn .lt { display: block; font-size: 0.74rem; color: var(--ink-2); }
.pgsum {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.4rem 1.6rem;
  margin-block-start: 0.9rem;
  padding-block-start: 0.8rem;
  border-block-start: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.pgsum strong { font-family: var(--ui); font-size: var(--step-2); color: var(--ink); letter-spacing: -0.02em; }
@media (max-width: 52rem) { .pagegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .pagegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgsum { justify-content: flex-start; } }
@media print { .pg { border: 1px solid #999; } }

/* --- 18e. Seven barriers, 42 practices (9 September 2026)
   One series, seven bars, all in ink. The bar widths are the count over 42,
   set inline. The chart is aria-hidden; the table beside it carries every
   number and is the print version. No legend: one series needs none. --- */
.chart {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: start;
}
.chart figure { margin: 0; }
.bars {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: 0.6rem 1rem;
  align-items: center;
  font-size: var(--step--1);
}
.bars .lab { text-align: right; line-height: 1.25; }
.bars .trk { position: relative; height: 1.05rem; }
.bars .trk::after {
  content: "";
  position: absolute;
  right: 0; top: -0.35rem; bottom: -0.35rem;
  border-inline-end: 1px dashed var(--line);
}
.bars .bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); border-radius: 0; }
.bars .v {
  position: absolute; top: -0.1rem;
  font-family: var(--mono); font-size: 0.85em; color: var(--ink-2); white-space: nowrap;
}
.bars .axis {
  grid-column: 2;
  display: flex; justify-content: space-between;
  padding-block-start: 0.3rem;
  border-block-start: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 0.8em; color: var(--ink-3);
}
.chart figcaption { margin-block-start: 0.9rem; font-size: var(--step--1); color: var(--ink-2); max-width: 46ch; }
@media (max-width: 52rem) {
  .chart { grid-template-columns: 1fr; }
  .bars { grid-template-columns: minmax(7rem, 11rem) 1fr; }
}
@media (max-width: 30rem) {
  .bars { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .bars .lab { text-align: left; margin-block-start: 0.5rem; }
  .bars .axis { grid-column: 1; }
}
@media print { .bars .bar { background: #000; } }

/* --------------------------------------------------------------------------
   19. COLOUR AND PHOTOGRAPHS (9 September 2026)
   Where the two colours land. Nothing here changes layout. The rule is
   one colour per job: accent for what the reader can do, flag for the
   barrier. Text stays in the inks; colour sits on marks, borders, fills
   and links. Photographs: three slots, objects only, never a person, all
   with empty alt, all lightly desaturated so a stock image and the page
   read as one system.
   -------------------------------------------------------------------------- */
main a:not(.btn) { color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink); }

.btn-ghost { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.cta { border-color: var(--accent); background: var(--accent-soft); }
.onecheck { border-color: var(--accent); }

.path > li::before, .tabframes .cap b, .pricecard .term { color: var(--accent); }
.journey > li::before { border-color: var(--accent); color: var(--accent); }
.bars .bar { background: var(--accent); }
.tabframe .field.on { outline-color: var(--accent); }

.ill .box.flag { outline-color: var(--flag); }
.ill .bubble { border-color: var(--flag); }
.tabframe .go.gone { border-color: var(--flag); border-style: dashed; }
.minipage .iconbtn { outline-color: var(--flag); }
.announce { border-color: var(--flag); }
.tag-crit { background: var(--flag-soft); color: var(--flag); border: 1px solid var(--flag); }

.photo { margin: 0; }
.photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0;
  filter: saturate(0.75);
}
.path-why, .chart-close, .record-grid, .with-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 2rem;
  align-items: center;
}
.record-grid, .with-photo { align-items: start; }
.with-photo .photo { position: sticky; top: 1.5rem; }
.chart-close { margin-block-start: 0.4rem; }
@media (max-width: 52rem) {
  .path-why, .chart-close, .record-grid, .with-photo { grid-template-columns: 1fr; }
  .with-photo .photo { position: static; }
}
@media print {
  .photo { display: none; }
  .btn, .cta { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   20. THE FINDINGS REPORT (/sample-report/ and every client report)
   Rendered by Report_Generator/report-render.mjs. The report is set in
   Times New Roman by decision (10 September 2026), the site stays in the
   system sans. Structure: title page, contents, summary and
   recommendation, findings by level as five-row tables with exhibits,
   criteria assessed, pages, methodology, limitations, next steps.
   -------------------------------------------------------------------------- */
.report { --report-serif: "Times New Roman", Times, "Liberation Serif", serif; }
.report main { font-family: var(--report-serif); font-size: 1.05rem; line-height: 1.5; }
.report main h1, .report main h2, .report main h3, .report main h4 { font-family: var(--report-serif); letter-spacing: 0; }
.report main h2 { font-size: var(--step-3); margin-block-end: 0.4rem; }
.report main h3 { font-size: var(--step-2); }
.report main h4 { font-size: var(--step-1); font-weight: 700; }
.report main table, .report main .eyebrow, .report main caption, .report main .meta { font-family: var(--report-serif); }
.report .markup, .report .says { font-family: var(--mono); }

.titlepage { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem); border-block-end: 3px double var(--ink); }
.titlepage .eyebrow { font-family: var(--report-serif); text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--step-0); color: var(--ink-2); }
.titlepage h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 18ch; margin-block-start: 0.6rem; }
.titlepage .subject { font-size: var(--step-2); margin-block-start: 0.8rem; font-style: italic; }
.titlepage .standard { margin-block-start: 0.6rem; color: var(--ink-2); max-width: 60ch; }
.cover-facts { display: grid; grid-template-columns: 14rem 1fr; gap: 0.5rem 1.5rem; margin-block-start: 2.2rem; padding-block: 1.2rem; border-block: 1px solid var(--line); }
.cover-facts dt { font-variant: small-caps; letter-spacing: 0.06em; color: var(--ink-2); }
.cover-facts dd { margin: 0; }
.titlepage .legal { margin-block-start: 1.6rem; font-size: var(--step--1); color: var(--ink-2); max-width: 66ch; }

.toc { padding-block: 2.5rem; }
.toc-list, .toc-list ol { list-style: none; padding: 0; }
.toc-list > li { padding-block: 0.45rem; border-block-end: 1px solid var(--line-2); font-size: var(--step-1); }
.toc-list > li:last-child { border-block-end: 0; }
.toc-list ol { margin-block-start: 0.3rem; padding-inline-start: 1.4rem; font-size: var(--step-0); }
.toc-list ol ol { padding-inline-start: 1.4rem; font-size: var(--step--1); color: var(--ink-2); }
.toc-list ol li { padding-block: 0.15rem; border: 0; }
.toc-list a { color: var(--ink); text-decoration: none; }
.toc-list a:hover, .toc-list a:focus-visible { text-decoration: underline; }
.toc .small { margin-block-start: 1rem; }

.report main .prose:not(.container), .report main .prose > *, .report main .container.prose > *, .report main .prose p, .report main .prose li, .report .titlepage .standard, .report .titlepage .legal, .report .titlepage h1, .report .nottested dd, .report .finding-table h4, .report .exhibit figcaption { max-width: none; }
.report main .prose ol { padding-inline-start: 1.3rem; }
.report main .prose li + li { margin-block-start: 0.5rem; }

.summary-tables { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .summary-tables { grid-template-columns: 1fr 1fr; align-items: start; } }
.finding-table { margin-block-start: 2rem; }
.finding-table h4 { max-width: 60ch; margin-block-end: 0.6rem; line-height: 1.3; }
.ftable { border: 1px solid var(--ink); border-collapse: collapse; }
.ftable caption { font-family: var(--report-serif); font-size: var(--step--1); color: var(--ink-2); padding: 0 0 0.5rem; border: 0; text-align: left; caption-side: top; }
.ftable caption h4 { color: var(--ink); }
.ftable caption .meta { margin: 0; }
.ftable th[scope="row"] { width: 13rem; vertical-align: top; background: var(--surface-2); font-weight: 700; border: 1px solid var(--line); }
.ftable td { vertical-align: top; border: 1px solid var(--line); }
.ftable td p { margin: 0; max-width: none; }
.ftable td p + p, .ftable td p + pre, .ftable td pre + p { margin-block-start: 0.55rem; }
.ftable .meta { font-size: var(--step--1); color: var(--ink-2); }
.ftable .says { font-family: var(--mono); font-weight: 700; }
.markup { margin: 0; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 0; background: var(--surface-2); font-size: 0.82em; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.exhibit { margin: 0.9rem 0 0; max-width: 34rem; }
.exhibit img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.exhibit figcaption { font-size: var(--step--1); color: var(--ink-2); margin-block-start: 0.4rem; }

.criteria th[scope="row"] { font-weight: 600; }
.criteria tr.cov-fail th[scope="row"] { border-inline-start: 4px solid var(--flag); }
.criteria tr.cov-not_applicable td, .criteria tr.cov-not_applicable th { color: var(--ink-3); }
.nottested { display: grid; grid-template-columns: 18rem 1fr; gap: 0.8rem 1.5rem; }
.nottested dt { font-weight: 700; }
.nottested dd { margin: 0; color: var(--ink-2); max-width: 62ch; }

@media (max-width: 52rem) {
  .cover-facts, .nottested { grid-template-columns: 1fr; }
  .ftable th[scope="row"] { width: 8rem; }
}
@media print {
  .report main { font-size: 10pt; line-height: 1.35; }
  .report .site-header, .report .site-footer nav, .report .skip { display: none; }
  .report main > section { border: 0; padding-block: 0.6rem; break-inside: auto; }
  .titlepage { break-after: page; border-block-end: 3px double #000; padding-block: 2.5in 1in; }
  .toc { break-after: page; }
  section[aria-labelledby="summary-h"] { break-after: page; }
  section[aria-labelledby="overview-h"] > .container > h2, section[aria-labelledby="criteria-h"] > .container > h2, section[aria-labelledby="pages-h"] > .container > h2, section[aria-labelledby="method-h"] > .container > h2 { break-before: page; }
  .finding-table { break-inside: auto; break-before: auto; margin-block-start: 1.2rem; }
  .finding-table h4, .finding-table .ftable caption { break-after: avoid; page-break-after: avoid; break-inside: avoid; }
  .report .container { width: 100%; }
  .report th, .report td { padding: 0.35rem 0.55rem; white-space: normal; }
  .ftable { break-inside: auto; }
  .ftable tr { break-inside: avoid; page-break-inside: avoid; }
  .exhibit { break-inside: avoid; page-break-inside: avoid; }
  .report main h2, .report main h3 { break-after: avoid; page-break-after: avoid; }
  .report main h3 + p, .report main h3 + ol, .report main h3 + ul, .report main h3 + .table-scroll { break-before: avoid; page-break-before: avoid; }
  .ftable { font-size: 9pt; }
  .ftable th[scope="row"] { width: 1.6in; }
  .exhibit { max-width: 100%; width: auto; }
  .exhibit img { max-height: 2.4in; width: auto; max-width: 100%; object-fit: contain; }
  .criteria { font-size: 8.5pt; } .criteria th, .criteria td { padding: 0.3rem 0.45rem; } .criteria tr { break-inside: avoid; }
  .table-scroll { overflow: visible; border: 0; }
  .toc-list a { color: #000; }
  .report a[href^="mailto:"]::after { content: none; }
  .markup { font-size: 7.5pt; }
  .summary-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: start; }
  .report .stack-l > * + * { margin-block-start: 1rem; }
  .report main h3 { font-size: 13pt; margin-block-end: 0.1rem; }
  .report caption { padding: 0.35rem 0.55rem 0.3rem; }
  .toc { padding-block: 0.3rem; }
  .toc h2 { margin-block-end: 0.2rem; }
  .toc-list > li { padding-block: 0.12rem; font-size: 11pt; line-height: 1.3; }
  .toc-list ol { font-size: 10pt; margin-block-start: 0.05rem; }
  .toc-list ol ol { font-size: 8.5pt; line-height: 1.25; }
  .toc-list ol li { padding-block: 0; }
  .toc-list ol ol li + li { margin-block-start: 0.12rem; }
  .toc .small { margin-block-start: 0.4rem; }
  section[aria-labelledby="summary-h"] .prose.stack > * + * { margin-block-start: 0.45rem; }
  section[aria-labelledby="summary-h"] .container > h2 { margin-block-end: 0.2rem; }
  section[aria-labelledby="summary-h"] li + li { margin-block-start: 0.2rem; }
  section[aria-labelledby="summary-h"] th, section[aria-labelledby="summary-h"] td { padding: 0.22rem 0.5rem; }
  .report main { line-height: 1.3; }
}

/* --------------------------------------------------------------------------
   21. THE FUNNEL (11 September 2026)
   White ground, blue primary button, orange second button, sharp corners
   everywhere (every border-radius in this file is 0). The page is one
   line: offer, the patient's path, the form, what happens next, price,
   the report, the form again. Photographs sit inside bordered panels.
   -------------------------------------------------------------------------- */

/* The offer line is the first text on the page. */
.offer { font-size: var(--step-4); font-weight: 800; line-height: 1.12; max-width: 24ch; letter-spacing: -0.02em; }
.hero-path .lede { margin-block-start: 1rem; max-width: 62ch; }

/* The path: four steps in a row with an arrow between each. */
.path { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2.4rem; margin-block-start: 1.6rem; }
.path > li { position: relative; border-color: var(--accent); }
.path > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2.4rem;
  width: 2.4rem;
  height: 1.1rem;
  transform: translateY(-50%);
  background: var(--accent);
  clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
}
.path-hint { display: none; margin-block-start: 1.4rem; font-family: var(--mono); font-size: var(--step--1); color: var(--ink-2); }
.path-scroller { position: relative; timeline-scope: --path; }
.path-rail { display: none; }
.path:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

@media (max-width: 66rem) {
  /* One column. The list scrolls inside a fixed height, and the scrollbar
     sits on the left: the direction trick moves it, and each step sets
     the direction back for its own text. Arrows point down. */
  .path-hint { display: block; }
  .path {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    max-height: 72vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y proximity;
    direction: rtl;
    padding-inline-start: 1.2rem;
    padding-block-end: 0.5rem;
    margin-block-start: 0.5rem;
    scrollbar-width: auto;
    scrollbar-color: var(--accent) var(--surface-2);
  }
  .path::-webkit-scrollbar { width: 12px; }
  .path::-webkit-scrollbar-track { background: var(--surface-2); }
  .path::-webkit-scrollbar-thumb { background: var(--accent); }
  .path > li { direction: ltr; scroll-snap-align: start; }
  /* A rail on the left that shows how far through the steps the reader is.
     Drawn with a scroll-driven animation where the browser has one; where
     it does not, the native scrollbar on the left does the job instead. */
  .path { scroll-timeline: --path block; }
  .path-rail { position: absolute; left: 0; top: 0; bottom: 0.5rem; width: 10px; background: var(--surface-2); border: 1px solid var(--line); }
  .path-rail::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 28%; background: var(--accent); animation: rail-move linear both; animation-timeline: --path; }
  @keyframes rail-move { from { top: 0; } to { top: 72%; } }
  @supports (animation-timeline: scroll()) {
    .path-rail { display: block; }
    .path { direction: ltr; padding-inline-start: 1.6rem; scrollbar-width: none; }
    .path::-webkit-scrollbar { display: none; }
  }
  .path > li:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -2.4rem;
    left: 50%;
    width: 1.1rem;
    height: 2.4rem;
    transform: translateX(-50%);
    clip-path: polygon(40% 0, 60% 0, 60% 62%, 100% 62%, 50% 100%, 0 62%, 40% 62%);
  }
}

/* The first call to action: the price line, the second button, the form. */
.offer-strip {
  margin-block-start: 2.2rem;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.offer-copy h2 { font-size: var(--step-3); }
.offer-copy p { margin-block-start: 0.7rem; max-width: 46ch; }
.offer-copy .btn { margin-block-start: 1.2rem; }
@media (max-width: 52rem) { .offer-strip { grid-template-columns: 1fr; } }

/* The form. Netlify reads it at deploy time; the page has no script. */
.askform { display: grid; gap: 0.95rem; max-width: 34rem; }
.askform .field { display: grid; gap: 0.3rem; margin: 0; }
.askform label, .askform legend { font-weight: 700; font-size: var(--step--1); }
.askform legend { padding: 0; margin-block-end: 0.3rem; }
.askform input:not([type="radio"]) {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--step-0);
}
.askform input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.askform fieldset { border: 0; padding: 0; min-width: 0; }
.askform fieldset label { display: inline-flex; align-items: center; gap: 0.45rem; margin-inline-end: 1.4rem; font-weight: 400; font-size: var(--step-0); min-height: 2rem; }
.askform input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); margin: 0; }
.askform .btn { margin-block-start: 0.2rem; justify-self: start; cursor: pointer; }
.askform .after { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cta .askform { margin-block-start: 1.2rem; }
.cta { background: var(--surface); }

/* Buttons: blue first, orange second. Full width and centred on a phone. */
.btn { text-align: center; }
.btn-orange { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); }
.btn-ghost { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); }
.acts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.center-acts { justify-content: center; margin-block-start: 1.4rem; }
.center-acts .btn { margin-block-start: 0; }
@media (max-width: 40rem) {
  .btn, .askform .btn { display: block; width: 100%; margin-inline: auto; justify-self: stretch; }
  .acts { justify-content: center; }
  .acts .btn { width: 100%; }
}

/* A panel: bordered, with the photograph as one column of it. */
.panel {
  border: 2px solid var(--accent);
  padding: clamp(1.2rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 30%);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: stretch;
}
.panel .photo { margin: 0; min-height: 12rem; }
.panel .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.panel .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 52rem) {
  .panel { grid-template-columns: 1fr; }
  .panel .photo { min-height: 0; }
  .panel .photo img { max-height: 14rem; }
  .panel .journey { grid-template-columns: 1fr; }
}

/* A tagline between sections. */
.tagline-band { padding-block: clamp(1.6rem, 4vw, 2.6rem); }
.tagline {
  margin: 0 auto;
  text-align: center;
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--accent);
  max-width: 28ch;
  text-wrap: balance;
}

/* The footer carries the disclaimer, small. */
.site-footer .legal { margin-block-start: 0.9rem; font-size: 0.8rem; line-height: 1.6; color: var(--ink-3); max-width: 70ch; }

/* --------------------------------------------------------------------------
   22. DECISIONS OF 12 SEPTEMBER 2026 (the site options review)
   Archivo for everything; no dark theme; a button in the header; each
   step shows a blurred real screenshot before and a drawn frame after;
   no tags under the steps; three-step journey; two-field form; one-line
   footer.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, .offer, .tagline, .btn { font-family: var(--ui); }
h1, .offer { font-weight: 800; }
h2, h3, h4 { font-weight: 700; }

/* The header button. */
.site-header .btn-head { margin: 0; padding: 0.5rem 0.95rem; min-height: 0; font-size: var(--step--1); color: var(--btn-ink); }
.site-nav li.act-li { margin-inline-start: 0.4rem; }
@media (max-width: 40rem) { .site-header .btn-head { width: 100%; text-align: center; } }

/* Before and after inside each step. */
.ba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; min-width: 0; }
.path > li { min-width: 0; }
.ba figure { min-width: 0; }
.ba .ill .row { flex-wrap: wrap; row-gap: 0.3rem; }
.ba figure { margin: 0; }
.ba figcaption { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-block-end: 0.3rem; }
.ba .shot { display: block; width: 100%; max-width: 100%; height: 6rem; object-fit: cover; border: 1px solid var(--line); filter: blur(1.3px); }
.ba .shot.right { object-position: right center; }
.ba .ill { min-height: 0; height: 6rem; justify-content: center; }
.ba .ill .bar.readable { background: var(--ink-2); }
.ba .ill .lbl { font-family: var(--mono); font-size: 0.68rem; color: var(--ink); margin-inline-start: 0.35rem; }
.ba .ill .btnline { align-self: flex-start; padding: 0.3rem 0.6rem; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 0.72rem; font-weight: 700; }
@media (min-width: 66rem) { .ba .shot, .ba .ill { height: 5.2rem; } }

/* The journey, three steps, stacked beside the photograph. */
.panel .journey { grid-template-columns: 1fr; }
.journey > li.done::before { content: "\2713"; background: var(--accent); color: var(--accent-ink); }

/* The form, two fields. The label row reads wider on a laptop. */
.askform { max-width: 30rem; }

/* The footer: one line, then the disclaimer. */
.site-footer .org { margin-block-start: 0; }

/* Footer links and the two policy pages (13 September 2026). */
.site-footer .links { margin-block-start: 0.6rem; font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }
.site-footer .links a { color: var(--ink-2); padding-block: 0.3rem; display: inline-block; }
.legalpage { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); max-width: 44rem; }
.legalpage .byline { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-3); margin: 0 0 1.4rem; }
.legalpage h1 { font-size: var(--step-4); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
.legalpage .lead { font-size: var(--step-1); line-height: 1.5; margin: 1.2rem 0 0; }
.legalpage h2 { font-size: var(--step-2); margin: 2.4rem 0 0.5rem; }
.legalpage p { margin: 0.8rem 0 0; }
.legalpage ul { padding-inline-start: 1.2rem; margin: 0.6rem 0 0; }
.legalpage li { margin: 0.55rem 0 0; }

/* Feedback of 15 September 2026. */
.site-header .container { align-items: center; }
.path > li, .path .ill { text-align: left; }
.path .ill.center { align-items: flex-start; justify-content: flex-start; }
.tagline-two { max-width: 36ch; }
.tagline-two br { display: block; content: ""; margin-block-end: 0.5rem; }
.studybox { border: 2px solid var(--accent); background: var(--accent-soft); padding: clamp(1.3rem, 3vw, 2.2rem); }
.studybox h2 { font-size: var(--step-3); max-width: 28ch; }
.studybox p { margin-block-start: 0.7rem; max-width: 60ch; }
.studybox .btn { margin-block-start: 1.1rem; }

/* The outbound page: a panel with no photograph. */
.panel-nophoto { grid-template-columns: minmax(0, 1fr); }

/* The plan of 16 September 2026: a longer h1, a first subhead, a source
   line and the Unruh line inside the steps, one price card. */
.offer { max-width: 32ch; }
.lede-first { font-weight: 700; color: var(--ink); }
.path .count.source { margin-block-start: 0.3rem; font-size: 0.78rem; color: var(--ink-3); }
.path .count.unruh { margin-block-start: 0.6rem; color: var(--ink); }
.pricecards-one { grid-template-columns: minmax(0, 24rem); }