/* =========================================================================
   FixUrSite — design system
   =========================================================================
   Design brief
   ------------
   Two sibling projects in this family already exist: one on a green and ochre
   palette with quiet hairline rules, one on a blue family with a burnt-sienna
   signature. Both use a left-aligned editorial layout and generous white space.

   This one deliberately reads as a different company again. The organising
   idea is *the inspection sheet*: a working document, not a brochure.

     Colour     Ink navy (#22303f) is the structural colour — headers, footer,
                the report bar. Amber (#f0a53f) is the only action colour and
                appears solely on things you can press or that mark a fix.
                Sage (#5f7d5a) carries meaning rather than decoration: it is the
                "measured / verified" tone on ticks and proof. Paper (#f6f7f2)
                is warm and faintly grey, never pure white, so long text sits
                easier.

     Type       Bricolage Grotesque headings, at large sizes only, where its
                condensed confidence reads as editorial rather than corporate.
                Figtree body, which holds up through the long argumentative
                sections this site needs.

     Structure  Numbered, ruled section headers that read like clauses. Metrics
                are boxed rather than inline. The featured plan inverts to a
                solid ink panel. Interior pages open on a dark band. The footer
                is dark with an amber top border rather than a full dark block.

     Density    Denser than the siblings: tighter rhythm, more rules, boxed
                numbers. It should feel like a document you are handed.

   Everything scales from the tokens below. Nothing in the page layer should
   hard-code a colour or a spacing value.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Structural navy. Warmer and darker than either sibling's brand blue. */
  --ink:            #22303f;
  --ink-deep:       #17222e;
  --ink-soft:       #38495c;
  --ink-line:       #46586c;
  --ink-wash:       #e7ecf1;
  --ink-tint:       #ccd6de;

  /* Amber. The action colour: pressable things, and the mark of a fix.
     Only ever a fill beneath ink text — never text on paper itself. */
  --accent:         #f0a53f;
  /* Amber dark enough to be read as text. The lighter #b9761a that shipped
     first only reached 3.44:1 on paper; this reaches 5.11:1 there and 4.63:1
     on the darkest wash, so it is safe wherever a label sits on a light
     surface. Amber itself stays a fill colour only. */
  --accent-deep:    #955c0e;
  --accent-dark:    #e79a2e;
  --accent-soft:    #fdf3e2;
  --accent-line:    #f2c88a;

  /* Sage. "Measured / verified". Meaning only, never decoration. */
  --sage:           #5f7d5a;
  --sage-deep:      #445f40;
  --sage-soft:      #eef2ea;
  --sage-line:      #cbdcc4;

  --paper:          #f6f7f2;
  --surface:        #ffffff;
  --paper-sink:     #eef0ea;
  --line:           #dcdfd6;
  --line-strong:    #c3c8bb;

  --body:           #33414f;
  /* Secondary and tertiary text. Both are checked against the four light
     surfaces text can land on (white, paper, sink and wash), not just white —
     #6b7885 and #93a0ab both failed on the wash. */
  --muted:          #5c6672;
  --faint:          #5f6a77;

  --danger:         #a33a2c;
  --danger-soft:    #fbeeec;
  --danger-line:    #e6c4be;

  --font-head: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Spacing scale */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 2.75rem; --s8: 3.5rem;
  --s9: 4.5rem;  --s10: 6rem;

  /* Radii — squarer than the siblings, which read softer and rounder. */
  --r1: 4px;  --r2: 8px;  --r3: 12px;  --r4: 18px;  --rpill: 999px;

  --wrap: 1180px;
  --wrap-tight: 860px;

  --shadow-1: 0 1px 2px rgba(23, 34, 46, .06);
  --shadow-2: 0 10px 30px -18px rgba(23, 34, 46, .28);
  --shadow-3: 0 22px 48px -28px rgba(23, 34, 46, .34);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------------------------
   2. Fonts (self-hosted, latin subset)
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-var.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   3. Reset and base
   ------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1.0125rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Long words and URLs must never force a horizontal scrollbar. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.06;
  margin: 0 0 var(--s3);
  letter-spacing: -.022em;
  font-weight: 700;
  text-wrap: balance;
}

/* The siblings stop at 3.6rem. Going larger is the most visible typographic
   difference, and it suits a heading that reads as a verdict. */
h1 { font-size: clamp(2.5rem, 5.4vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 3.3vw, 2.75rem); }
h3 { font-size: 1.18rem; letter-spacing: -.012em; line-height: 1.25; font-weight: 700; }
h4 { font-size: 1rem; letter-spacing: 0; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

img, svg { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.15rem; }
li { margin-bottom: var(--s2); }

strong { color: var(--ink); font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }

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

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

/* Skip link — visible only on focus. */
.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s3) var(--s5);
  border-radius: 0 0 var(--r2) 0;
  font-weight: 600;
}
.skiplink:focus { left: 0; color: var(--paper); }

/* -------------------------------------------------------------------------
   4. Typography helpers
   ------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  font-family: var(--font-body);
  font-size: .735rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* A short amber rule before the label — the same device that marks a fix
   inside the logo, reused here as the site's section signature. */
.eyebrow__rule {
  display: inline-block;
  width: 26px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  flex: none;
}

.lede {
  font-size: clamp(1.08rem, 1.55vw, 1.24rem);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 60ch;
}

.muted { color: var(--muted); }
.small { font-size: .9rem; line-height: 1.55; }
.faint { color: var(--faint); }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  font-size: .94rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.textlink:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
/* -------------------------------------------------------------------------
   Emphasis on dark grounds.

   `strong` is ink-coloured by default, which is correct on paper and invisible
   on the ink panels this design uses for the featured plan, the contrast card,
   the page headers, the closing band and the footer. Rather than remember to
   restate the colour at every usage, the dark surfaces are listed once here.
   ------------------------------------------------------------------------- */
.pagehead strong,
.plan--featured strong,
.card--brand strong,
.asidecard--brand strong,
.endcta strong,
.sitefoot strong,
.report__bar strong,
.badge--brand strong {
  color: var(--paper);
}

/* Secondary text on ink is remapped below. */

/* Any run of text on an ink panel needs a colour that was chosen for ink.
   `body` sets #33414f, which vanishes on a dark ground, and the per-component
   rules above only covered the elements somebody remembered to list — an
   `<ol>` in a dark card was inheriting the body colour and rendering at
   1.29:1. Setting the colour once on the panels themselves means markup added
   later inherits something readable instead of something invisible. */
.pagehead,
.plan--featured,
.card--brand,
.asidecard--brand,
.endcta,
.sitefoot,
.report__bar,
.badge--brand {
  color: var(--paper);
}

/* Secondary text and links on ink. The .muted/.faint tokens are tuned for
   light surfaces, so they are remapped rather than restated at each usage. */
.plan--featured .muted,
.card--brand .muted,
.asidecard--brand .muted,
.endcta .muted,
.pagehead .muted,
.sitefoot .muted,
.plan--featured .faint,
.card--brand .faint,
.asidecard--brand .faint,
.endcta .faint,
.pagehead .faint,
.sitefoot .faint {
  color: rgba(246, 247, 242, .74);
}

/* A link inside a dark panel must not colour a button that happens to sit
   inside it. `.asidecard--brand a` matched the CTA's own anchor, and because
   it has one more selector than `.btn--onDark` it won — turning amber text
   onto a paper fill, which rendered the label at 1.92:1. Buttons now opt out
   of the surrounding link colour and keep their own. */
.card--brand a:not(.btn),
.asidecard--brand a:not(.btn),
.endcta a:not(.btn),
.sitefoot a:not(.btn) { color: var(--accent); }

/* Links inside page-header prose would otherwise take the body ink colour. */
.pagehead a:not(.btn) { color: var(--paper); }

/* Long-form text (FAQ answers, legal pages) */
.prose p { margin-bottom: var(--s4); }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: var(--s3) 0 var(--s4); }
.prose a { color: var(--ink); }

/* -------------------------------------------------------------------------
   5. Layout
   ------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s5);
}
.wrap--tight { max-width: var(--wrap-tight); }
.sitemain { display: block; }

.section { padding: var(--s9) 0; }
.section--tight { padding: var(--s7) 0; }

/* Recessed band — separates long stretches without resorting to a card. */
.section--sink {
  background: var(--paper-sink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section--wash { background: var(--ink-wash); }

/* A hairline above a section, used instead of extra spacing when two short
   sections sit next to each other. */
.section--rule { border-top: 1px solid var(--line); }

.section--rail { border-top: 3px solid var(--ink); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: start;
}

.stack > * + * { margin-top: var(--s4); }
.stack--tight > * + * { margin-top: var(--s2); }

.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* -------------------------------------------------------------------------
   6. Section headers — numbered, ruled, clause-like
   ------------------------------------------------------------------------- */

.shead {
  max-width: 62ch;
  margin-bottom: var(--s7);
  padding-top: var(--s3);
  border-top: 2px solid var(--ink);
}
.shead--center { margin-left: auto; margin-right: auto; text-align: center; }
.shead--center .eyebrow { justify-content: center; }

.shead h2 { margin-bottom: var(--s3); }
.shead p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 58ch;
}

/* -------------------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .82rem 1.35rem;
  border: 1.5px solid transparent;
  border-radius: var(--r2);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

/* Amber fill with ink text — the action colour, used only here and on the fix
   marker. White on amber would fail contrast, so the label is ink. */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--ink); }

.btn--ghost {
  background: transparent;
  border-color: var(--ink-tint);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--surface); }

.btn--accent {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-deep);
}
.btn--accent:hover { background: var(--accent-soft); }

.btn--onDark {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.btn--onDark:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.btn--block { width: 100%; }
.btn--sm { padding: .55rem .9rem; font-size: .87rem; }
.btn__icon { width: 1em; height: 1em; flex: none; }

/* -------------------------------------------------------------------------
   8. Icons
   ------------------------------------------------------------------------- */

.icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--xs { width: .95rem; height: .95rem; stroke-width: 2.1; }
.icon--tick { color: var(--sage); stroke-width: 2.6; }

/* -------------------------------------------------------------------------
   9. Site header — ink utility strip over a light bar
   ------------------------------------------------------------------------- */

.sitenav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
}

/* The strip carries the promise on the left and the live price on the right,
   so the offer is visible before any scrolling happens. */
.sitenav__strip {
  background: var(--ink);
  color: var(--paper);
  font-size: .84rem;
}
.sitenav__stripinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 44px;
  padding-top: var(--s1);
  padding-bottom: var(--s1);
}
.sitenav__promise {
  margin: 0;
  min-width: 0;
  color: rgba(246, 247, 242, .84);
  line-height: 1.35;
}
.sitenav__stripmeta {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex: none;
}
.sitenav__metaitem {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(246, 247, 242, .76);
  white-space: nowrap;
}
.sitenav__metaitem .icon { color: var(--accent); }
.sitenav__metalink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.sitenav__metalink:hover { color: #f7bd6b; }

.sitenav__bar { background: var(--surface); }
.sitenav__barinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 76px;
  position: relative;
}

.sitenav__brand { display: flex; align-items: center; flex: none; }

.brandlock {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
}
.brandlock__word {
  font-family: var(--font-head);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1;
  white-space: nowrap;
}
.brandlock--light { color: var(--paper); }
.brandlock--light .brandlock__word { color: var(--paper); }

.brandmark { width: 38px; height: 38px; border-radius: 10px; flex: none; }

.sitenav__nav { flex: 1 1 auto; display: flex; justify-content: center; }

.sitenav__list {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sitenav__list li { margin: 0; }

.sitenav__link {
  display: inline-block;
  padding: .35rem 0;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.sitenav__link:hover { color: var(--ink); border-color: var(--accent); }
.sitenav__link.is-current { color: var(--ink); border-color: var(--accent); }

.sitenav__actions { display: flex; align-items: center; gap: var(--s3); flex: none; }

.sitenav__toggle {
  display: none;
  align-items: center;
  gap: var(--s2);
  padding: .5rem .7rem;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r2);
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.sitenav__toggletext { display: none; }

.sitenav__bars { display: block; width: 18px; height: 12px; position: relative; flex: none; }
.sitenav__bars::before,
.sitenav__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s var(--ease);
}
.sitenav__bars::before { top: 0; }
.sitenav__bars::after { bottom: 0; }
.sitenav.is-open .sitenav__bars::before { transform: translateY(5px) rotate(45deg); }
.sitenav.is-open .sitenav__bars::after { transform: translateY(-5px) rotate(-45deg); }

.sitenav__navfoot { display: none; }

/* -------------------------------------------------------------------------
   10. Footer — dark band with an amber top border
   ------------------------------------------------------------------------- */

.sitefoot {
  background: var(--ink-deep);
  color: rgba(246, 247, 242, .78);
  border-top: 3px solid var(--accent);
  margin-top: var(--s9);
  font-size: .93rem;
}
.sitefoot a { color: rgba(246, 247, 242, .82); text-decoration: none; }
.sitefoot a:hover { color: var(--accent); }

.sitefoot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s7);
  padding: var(--s9) 0 var(--s7);
}
.sitefoot__brandcol { max-width: 34ch; }
.sitefoot__tagline {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -.028em;
  line-height: 1.1;
  margin: var(--s5) 0 var(--s3);
}
.sitefoot__pitch { margin: 0; color: rgba(246, 247, 242, .68); }
.sitefoot__note { margin-top: var(--s5); font-size: .87rem; color: rgba(246, 247, 242, .58); }

.sitefoot__colhead {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  margin: 0 0 var(--s4);
}
.sitefoot__col ul { list-style: none; margin: 0; padding: 0; }
.sitefoot__col li { margin-bottom: var(--s2); }

.sitefoot__contact { margin-top: var(--s4); font-size: .9rem; }

.sitefoot__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s5) 0 var(--s6);
  border-top: 1px solid var(--ink-line);
  font-size: .86rem;
  color: rgba(246, 247, 242, .6);
}

.totop {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(246, 247, 242, .7);
  text-decoration: none;
  font-weight: 600;
}
.totop:hover { color: var(--accent); }

/* -------------------------------------------------------------------------
   11. Hero
   ------------------------------------------------------------------------- */

.hero {
  background: linear-gradient(168deg, var(--ink-wash) 0%, var(--paper) 62%);
  border-bottom: 1px solid var(--line);
  padding: var(--s9) 0 var(--s8);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: var(--s8);
  align-items: center;
}
.hero__promise {
  font-family: var(--font-head);
  font-size: clamp(1.14rem, 1.85vw, 1.42rem);
  font-weight: 700;
  line-height: 1.32;
  color: var(--ink);
  padding-left: var(--s5);
  border-left: 4px solid var(--accent);
  margin: var(--s5) 0;
  letter-spacing: -.015em;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: var(--s6) 0 var(--s5);
}
.hero__reassure {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  font-size: .89rem;
  color: var(--muted);
  max-width: 46ch;
}
.hero__reassure .icon { color: var(--sage); margin-top: .18rem; }

/* -------------------------------------------------------------------------
   12. The report panel — the site's proof object
   ------------------------------------------------------------------------- */

.report {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.report__bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem var(--s5);
  background: var(--ink);
  color: var(--paper);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.report__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.report__when {
  margin-left: auto;
  color: rgba(246, 247, 242, .62);
  letter-spacing: .06em;
}
.report__body { padding: var(--s5) var(--s5) var(--s4); }
.report__subject {
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 var(--s4);
  letter-spacing: -.012em;
}
.report__row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  font-size: .92rem;
  line-height: 1.5;
}
.report__row .icon { color: var(--sage); margin-top: .22rem; }

.report__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin: var(--s4) 0 0;
  padding-top: var(--s4);
  border-top: 2px solid var(--ink);
}
.report__metric dt {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .2rem;
}
.report__metric dd {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.03em;
}
.report__metric--warn dd { color: var(--accent-deep); }

/* -------------------------------------------------------------------------
   13. Fact strip — boxed metrics rather than an inline row
   ------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
  background: var(--surface);
}
.facts__item {
  padding: var(--s4);
  border-right: 1px solid var(--line);
}
.facts__item:last-child { border-right: 0; }
.facts__item dt {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .3rem;
}
.facts__item dd {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -.012em;
}

/* -------------------------------------------------------------------------
   14. The weekly loop
   ------------------------------------------------------------------------- */

.loop { display: grid; gap: 0; }

.loop__stage {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
}
.loop__stage:first-child { border-top: 2px solid var(--ink); }

/* The step number takes the amber tone on the first stage only, marking where
   the loop begins. */
.loop__step {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  /* #ccd6de is a decorative tint and only reached 1.37:1 as text. This is a
     real number a reader may need, so it is darkened to clear the 3:1 large-text
     floor on every light surface. */
  color: #6b8095;
  letter-spacing: -.04em;
}
.loop__stage:first-child .loop__step { color: var(--accent-deep); }

.loop__body { min-width: 0; }
.loop__icon {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 var(--s2);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--ink);
}
.loop__icon .icon { color: var(--accent); }
.loop__body p:last-child { margin: 0; font-size: .95rem; color: var(--muted); }

/* -------------------------------------------------------------------------
   15. Inspection areas
   ------------------------------------------------------------------------- */

.measures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
}

.measure {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  border-radius: var(--r2);
  padding: var(--s5);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.measure:hover {
  border-top-color: var(--accent);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.measure__top {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.measure__top h3 { margin: 0; font-size: 1.06rem; }
.measure__blurb {
  margin: 0 0 var(--s4);
  font-size: .94rem;
  color: var(--muted);
  line-height: 1.55;
}
.measure__list { list-style: none; margin: 0; padding: 0; }
.measure__list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: .89rem;
  line-height: 1.5;
}
.measure__list li:first-child { border-top: 0; padding-top: 0; }
.measure__list .icon { color: var(--accent); margin-top: .18rem; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r2);
  background: var(--ink-wash);
  color: var(--ink);
  flex: none;
}
.badge--accent { background: var(--accent); color: var(--ink); }
.badge--brand { background: var(--ink); color: var(--paper); }

/* Tick lists */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
}
.checks li:last-child { border-bottom: 0; }
.checks .icon { margin-top: .22rem; }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.check:last-child { border-bottom: 0; }
.check--invalid { color: var(--danger); }

/* -------------------------------------------------------------------------
   16. Cards
   ------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--r2);
  padding: var(--s5);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.card:hover {
  border-top-color: var(--accent);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.card__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.card__head h3 { margin: 0; }
.card__step {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .06em;
}

/* Solid ink panel — the contrast card in a grid of light ones. */
.card--brand {
  background: var(--ink);
  border-color: var(--ink);
  border-top-color: var(--accent);
}
.card--brand h3,
.card--brand .card__head h3 { color: var(--paper); }
.card--brand p { color: rgba(246, 247, 242, .78); }
.card--brand .card__step { color: rgba(246, 247, 242, .55); }

.card--wash { background: var(--paper); border-top-color: var(--line-strong); }
.card--flush { background: transparent; border: 0; padding: 0; }

/* -------------------------------------------------------------------------
   17. Plans
   ------------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s6) var(--s5) var(--s5);
  position: relative;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.plan:hover { box-shadow: var(--shadow-2); }

/* The featured plan inverts to a solid ink panel. This is the clearest
   structural difference from the sibling sites, where the featured card is
   only tinted. */
.plan--featured {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--shadow-3);
  padding-top: var(--s7);
}
.plan--featured .plan__name { color: rgba(246, 247, 242, .7); }
.plan--featured .plan__amount { color: var(--paper); }
.plan--featured .plan__period,
/* The cadence line states the billing term, so it stays legible on the ink
   panel rather than fading into it. Amber is a fill colour elsewhere, but as
   text on ink it reaches 7.4:1. */
.plan--featured .plan__cadence { color: var(--accent); }
.plan--featured .plan__note { color: rgba(246, 247, 242, .7); }
.plan--featured .plan__price { border-color: rgba(246, 247, 242, .2); }
.plan--featured .plan__includes li {
  color: rgba(246, 247, 242, .82);
  border-color: rgba(246, 247, 242, .16);
}
.plan--featured .plan__includes .icon { color: var(--accent); }

.plan__flag {
  position: absolute;
  top: 0;
  left: var(--s5);
  transform: translateY(-50%);
  display: inline-block;
  padding: .3rem .7rem;
  background: var(--accent);
  color: var(--ink);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
  border-radius: var(--r1);
}

.plan__name {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--muted);
  margin: 0 0 var(--s3);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  flex-wrap: wrap;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s4);
}
.plan__amount {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--ink);
}
.plan__period { font-size: .93rem; color: var(--muted); }

.plan__cadence {
  margin: 0 0 var(--s2);
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.plan__note {
  margin: 0 0 var(--s4);
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.55;
  min-height: 3em;
}
/* The effective-rate line sits between the cadence and the note. It carries its
   own colour so it stays readable on both the light cards and the ink panel. */
.plan__effective {
  font-size: .88rem;
  color: var(--muted);
}
.plan--featured .plan__effective { color: rgba(246, 247, 242, .78); }

.plan__includes { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.plan__includes li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  font-size: .89rem;
  line-height: 1.5;
  margin: 0;
}
.plan__includes li:last-child { border-bottom: 0; }
.plan__includes .icon { color: var(--sage); margin-top: .2rem; }

/* -------------------------------------------------------------------------
   18. Comparison blocks
   ------------------------------------------------------------------------- */

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s7);
}
.compare__item {
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
}
.compare__item h3 { margin-bottom: var(--s2); font-size: 1.02rem; }
.compare__item p { margin: 0; font-size: .95rem; color: var(--muted); line-height: 1.6; }

/* -------------------------------------------------------------------------
   19. FAQ
   ------------------------------------------------------------------------- */

.faq { border-bottom: 1px solid var(--line); }
.faq:first-of-type { border-top: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  padding: var(--s4) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.45;
}
.faq__q:hover { color: var(--accent-deep); }
.faq__q .icon { color: var(--accent); margin-top: .2rem; transition: transform .2s var(--ease); }
.faq__q[aria-expanded="true"] .icon { transform: rotate(180deg); }

.faq__a {
  padding: 0 0 var(--s5);
  font-size: .96rem;
  color: var(--muted);
  max-width: 72ch;
}

.faqbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
}
.faqtoggle {
  padding: .45rem .85rem;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r2);
  font-family: var(--font-body);
  font-size: .87rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.faqtoggle:hover { border-color: var(--ink); background: var(--surface); }

.faqgroup { margin-bottom: var(--s7); }
.faqgroup__title {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--accent-deep);
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--ink);
}

/* -------------------------------------------------------------------------
   20. Page header (interior pages) — opens on ink
   ------------------------------------------------------------------------- */

.pagehead {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s8) 0 var(--s7);
}
.pagehead h1 { color: var(--paper); max-width: 22ch; }
.pagehead .lede { color: rgba(246, 247, 242, .8); }
.pagehead .eyebrow { color: var(--accent); }

.crumbs {
  display: flex;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  font-size: .84rem;
  color: rgba(246, 247, 242, .62);
}
.crumbs li { margin: 0; }
.crumbs a { color: rgba(246, 247, 242, .78); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

/* -------------------------------------------------------------------------
   21. Forms
   ------------------------------------------------------------------------- */

.formshell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--s6);
  align-items: start;
}

.formcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  border-radius: var(--r3);
  padding: var(--s6);
}
.formcard__intro {
  margin: 0 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .96rem;
}

.fieldset { border: 0; margin: 0 0 var(--s6); padding: 0; }
.fieldset:last-of-type { margin-bottom: 0; }
.fieldset__legend {
  padding: 0;
  margin-bottom: var(--s4);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent-deep);
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}
.fgrid--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; min-width: 0; }
.field__label {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: .35rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.field__optional { font-size: .78rem; font-weight: 400; color: var(--faint); }
.field__hint { margin: .35rem 0 0; font-size: .82rem; color: var(--muted); }
.field__error { margin: .35rem 0 0; font-size: .84rem; font-weight: 600; color: var(--danger); }

.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field select,
.field textarea {
  width: 100%;
  padding: .72rem .8rem;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r2);
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--ink);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--muted); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(240, 165, 63, .28);
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; padding-right: 2rem; cursor: pointer; }

.field--error input,
.field--error textarea,
.field--error select { border-color: var(--danger); background: var(--danger-soft); }

/* Honeypot — hidden from humans, visible to naive bots. Not display:none,
   because some bots skip those. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formactions {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.formactions__note { margin: 0; font-size: .86rem; color: var(--muted); max-width: 42ch; }

/* Plan picker — card radios */
.plan-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.plan-option { position: relative; display: block; margin: 0; }
.plan-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.plan-option__card {
  display: block;
  height: 100%;
  padding: var(--s4);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r2);
  cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.plan-option__card:hover { border-color: var(--ink); }
.plan-option input:checked + .plan-option__card {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.plan-option input:focus-visible + .plan-option__card {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.plan-option__name {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .3rem;
}
.plan-option__price {
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.025em;
  line-height: 1.15;
}

/* Sidebar beside a form */
/* The sidebar follows the reader down the form so the supporting copy stays
   beside the fields it explains. It is one sticky element, not a stack of
   sticky cards, and it releases naturally at the end of its column. */
.formaside {
  display: grid;
  gap: var(--s4);
  position: sticky;
  top: calc(var(--header-offset, 96px) + var(--s4));
  align-self: start;
}

.asidecard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s5);
}
.asidecard h3 { font-size: 1rem; margin-bottom: var(--s3); }
.asidecard p { font-size: .9rem; color: var(--muted); margin-bottom: var(--s3); }
.asidecard p:last-child { margin-bottom: 0; }

.asidecard--brand {
  background: var(--ink);
  border-color: var(--ink);
  border-top: 3px solid var(--accent);
}
.asidecard--brand h3 { color: var(--paper); }
.asidecard--brand p { color: rgba(246, 247, 242, .78); }
/* Link colour for this panel is set once, above, with a :not(.btn) guard so it
   cannot reach the CTA button and repaint its label amber on a paper fill. */

.asidecard__list { list-style: none; margin: 0; padding: 0; }
.asidecard__list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: var(--s2) 0;
  font-size: .88rem;
  line-height: 1.5;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.asidecard__list li:last-child { border-bottom: 0; }
.asidecard__list .icon { color: var(--sage); margin-top: .2rem; }

/* -------------------------------------------------------------------------
   22. Website-type panels (What We Check)
   ------------------------------------------------------------------------- */

.wtgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}

.wtpanel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r2);
  padding: var(--s5);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.wtpanel:hover { border-left-color: var(--accent); box-shadow: var(--shadow-2); }

.wtpanel__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s2);
}
.wtpanel__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r2);
  background: var(--ink-wash);
  color: var(--ink);
  flex: none;
}
.wtpanel__titles { min-width: 0; }
.wtpanel__titles h3 { margin: 0 0 .1rem; font-size: 1.04rem; }
.wtpanel__examples {
  font-size: .82rem;
  color: var(--faint);
  line-height: 1.45;
}
.wtpanel__blurb {
  margin: var(--s3) 0 var(--s4);
  font-size: .93rem;
  color: var(--muted);
  line-height: 1.58;
}
.wtpanel__list { list-style: none; margin: 0; padding: 0; }
.wtpanel__list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: var(--s2) 0;
  border-top: 1px solid var(--line);
  font-size: .89rem;
  line-height: 1.5;
  margin: 0;
}
.wtpanel__list li:first-child { border-top: 0; padding-top: 0; }
.wtpanel__list .icon { color: var(--accent); margin-top: .18rem; }

/* Live panel on the application form */
.typepanel {
  margin-top: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r2);
}
.typepanel__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--s2);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--accent-deep);
}
.typepanel__blurb { margin: 0 0 var(--s3); font-size: .92rem; color: var(--ink-soft); }
.typepanel__list { list-style: none; margin: 0; padding: 0; }
.typepanel__list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: var(--s2);
}
.typepanel__list li:last-child { margin-bottom: 0; }
.typepanel__list .icon { color: var(--accent-deep); margin-top: .2rem; }

/* -------------------------------------------------------------------------
   23. End CTA band
   ------------------------------------------------------------------------- */

.endcta {
  background: var(--ink);
  border-top: 3px solid var(--accent);
  padding: var(--s8) 0;
}
.endcta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s7);
  flex-wrap: wrap;
}
.endcta__copy { max-width: 58ch; }
.endcta__copy h2 { color: var(--paper); margin-bottom: var(--s3); }
.endcta__copy p { color: rgba(246, 247, 242, .78); margin: 0; }
.endcta__act { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.endcta__secondary {
  font-size: .9rem;
  color: rgba(246, 247, 242, .72);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: 2px;
}
.endcta__secondary:hover { color: var(--accent); border-color: var(--accent); }

/* -------------------------------------------------------------------------
   24. Alerts
   ------------------------------------------------------------------------- */

.alert {
  padding: var(--s4) var(--s5);
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .95rem;
  margin-bottom: var(--s5);
}
.alert--error { background: var(--danger-soft); border-color: var(--danger-line); color: #7d2c21; }
.alert--ok { background: var(--sage-soft); border-color: var(--sage-line); color: var(--sage-deep); }
.alert p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   25. Reveal animation
   ------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
[data-reveal].is-in,
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   26. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1150px) {
  .sitenav__nav { display: none; }
  .sitenav__toggle { display: inline-flex; }
  .sitenav__toggletext { display: inline; }

  /* The mobile panel: a full-width sheet under the header bar. */
  .sitenav.is-open .sitenav__nav {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    padding: var(--s4) var(--s5) var(--s5);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  .sitenav.is-open .sitenav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .sitenav.is-open .sitenav__list li { border-bottom: 1px solid var(--line); }
  .sitenav.is-open .sitenav__link {
    display: block;
    padding: var(--s3) 0;
    font-size: 1rem;
    border-bottom: 0;
  }
  .sitenav.is-open .sitenav__navfoot {
    display: block;
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
  }

  .sitenav__stripmeta .sitenav__metaitem { display: none; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .hero__reassure { max-width: none; }

  .measures { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts__item { border-bottom: 1px solid var(--line); }
  .facts__item:nth-child(3n) { border-right: 0; }
  .facts__item:nth-last-child(-n+3) { border-bottom: 0; }

  .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .plan__note { min-height: 0; }

  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .formshell { grid-template-columns: minmax(0, 1fr); }
  .sitefoot__grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .sitefoot__brandcol { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .section { padding: var(--s8) 0; }
  .hero { padding: var(--s8) 0 var(--s7); }
  .pagehead { padding: var(--s7) 0 var(--s6); }

  /* Below this width the brand, the header CTA and the menu toggle cannot all
     fit on one row. The CTA is already repeated inside the opened panel, so
     the header keeps only the brand and the toggle. */
  .sitenav__barinner { min-height: 66px; }
  .sitenav__actions [data-nav-cta] { display: none; }
  .sitenav__toggle { padding: .5rem .65rem; }

  .sitenav__stripinner { min-height: 0; padding: var(--s2) 0; }
  .sitenav__promise { font-size: .79rem; }
  .sitenav__stripmeta { display: none; }

  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__item { border-right: 1px solid var(--line); }
  .facts__item:nth-child(2n) { border-right: 0; }
  .facts__item:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .facts__item:nth-last-child(-n+2) { border-bottom: 0; }

  .measures { grid-template-columns: minmax(0, 1fr); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .wtgrid { grid-template-columns: minmax(0, 1fr); }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .plan-picker { grid-template-columns: minmax(0, 1fr); }
  /* Stacked on one column, the cards sit directly above one another, so any
     height difference reads as a mistake rather than as variety. The monthly
     card carries an extra line of price text, so the cards are levelled here. */
  .plan-option__card { min-height: 9.75rem; }

  .formcard { padding: var(--s5); }
  .endcta__inner { flex-direction: column; align-items: flex-start; gap: var(--s5); }

  .report__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop__stage { grid-template-columns: 42px minmax(0, 1fr); gap: var(--s4); }
  .loop__step { font-size: 1.4rem; }
  .sitefoot__grid { grid-template-columns: 1fr; }
  .sitefoot__base { flex-direction: column; align-items: flex-start; gap: var(--s3); }
}

@media (max-width: 430px) {
  h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  /* A wrapped label is better than a page that scrolls sideways. */
  .btn { white-space: normal; text-align: center; }
  .hero__actions .btn { width: 100%; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts__item { border-right: 0; border-bottom: 1px solid var(--line); }
  .facts__item:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
   27. Print — the report should print as a document
   ------------------------------------------------------------------------- */

@media print {
  .sitenav, .sitefoot, .endcta, .totop, .skiplink { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding: 0 0 12pt; }
  .report, .card, .measure, .plan, .wtpanel, .asidecard, .facts {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    break-inside: avoid;
  }
  .pagehead { background: none; color: #000; padding: 0 0 12pt; }
  .pagehead h1, .pagehead .lede { color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a { color: #000; text-decoration: underline; }
}

/* Jump list above the question groups. It stays visually quieter than the
   questions themselves: it is a way past the page, not part of its content. */
.faqjump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s6);
  padding: var(--s4) 0 0;
  border-top: 1px solid var(--line);
}
.faqjump__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.faqjump__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.faqjump__list a {
  display: inline-block;
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  font-size: .84rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.faqjump__list a:hover { border-color: var(--accent); color: var(--ink); }