/* ===========================================================
   Accessimo — design system v2
   -----------------------------------------------------------
   DIRECTION: an inspection report, made clean and modern.
   Evidence first, marketing second. Left-aligned, hard-ruled,
   asymmetric. Nothing centred, nothing decorative.

   SIGNATURE (structural): THE GAP — a two-track ledger setting
   what an automated scan reported against what manual testing
   found. The left track is deliberately quiet and numeric; the
   right is dense and verbal. The asymmetry IS the argument, so
   the layout carries the thesis rather than illustrating it.

   SIGNATURE (interaction): THE FOCUS BAR — carried over from
   v1 and still correct: brand accent and keyboard focus
   indicator are the same mark. Drawn from the UK public sector
   focus convention compliance buyers already recognise.

   COLOUR LAW, verified numerically (see contrast notes below):
   signal yellow on paper is 1.43:1, so YELLOW IS NEVER
   LOAD-BEARING FOR CONTRAST. It never carries meaning alone
   and is never a lone indicator on a light ground. Ink always
   accompanies it and does the contrast work. Every text pair
   in this file was checked against WCAG 2.2 AA before use.

   TYPE has three jobs:
     display -> Archivo, heavy + tight. Institutional, signage.
     body    -> IBM Plex Sans. Technical humanist, reads small.
     data    -> IBM Plex Mono. Carries REAL data (counts,
                severities, references), never decoration.

   Fonts are SELF-HOSTED. Webfonts from a CDN would load for
   every visitor before the cookie banner is answered, sending
   their IP to a third party. For a compliance consultancy that
   is indefensible, so nothing here makes a third-party request.
   =========================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/assets/fonts/plexsans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/assets/fonts/plexsans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Brand — unchanged, already established in ads and print */
  --ink:      #0E1420;  /* 18.43:1 on paper                   */
  --signal:   #FFD400;  /* 12.87:1 with ink. Never alone.     */

  /* Neutrals — biased cool/navy toward ink, not default grey  */
  --paper:    #FFFFFF;
  --stock:    #F2F4F7;  /* document stock, band ground         */
  --slate:    #3A4658;  /* secondary text. 9.56:1 on paper     */

  /* Semantic — severity only, deliberately not the accent     */
  --flag:     #B3122B;  /* 6.91:1 on paper                     */

  /* Derived */
  --ink-2:    #1B2534;  /* raised surface inside dark bands    */
  --rule:     #D4DAE3;  /* decorative hairline only            */
  --on-dark:  #DCE3EE;  /* 14.27:1 on ink                      */
  --sev-serious:  #8A3D00;
  --sev-moderate: #6B5600;
  --sev-minor:    #3A4658;

  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --max: 1180px;
  --measure: 66ch;
  --spine: 148px;   /* the report margin */
  --gutter: 36px;

  /* Motion tokens — the whole site's timing/easing vocabulary lives
     here. Every transition/animation below should reference one of
     these rather than hardcoding its own duration or curve, so the
     site reads as one consistent hand rather than several. */
  --dur-micro: 120ms;  /* hover/press feedback: colour, transform */
  --dur-base: 220ms;   /* section reveals, larger state changes    */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* settling in       */
  --ease-sharp: cubic-bezier(0.76, 0, 0.24, 1); /* deliberate snap  */
}

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

/* Native same-page anchor jumps (skip link, etc) only; the cross-page
   "land at top, then animate down" mechanism in anchor-scroll.js sets
   its own inline scroll-behavior and isn't affected by this either
   way (see that file before touching this). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Single, consolidated reduced-motion reset. 0.01ms rather than 0 so
   transitionend/animationend listeners still fire; kept separate from
   the layout-only breakpoints below. This also defeats anchor-scroll.js's
   inline scroll-behavior via !important, since that JS doesn't check
   the media query itself. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Hover/press feedback — one rule for every interactive element,
   rather than a transition redeclared on each one. Limited to the
   compositor-friendly properties (never width/height/top/left/margin). */
a, button, input, select, summary, [tabindex] {
  transition: background-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out),
    opacity var(--dur-micro) var(--ease-out);
}
/* Real press feedback on plain text links, site-wide. Button-shaped
   custom components (.faq-toggle, .kbd-demo-link, [details] summary)
   get their own transform-based :active near their other rules. */
a:not(.btn):active { opacity: 0.65; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

/* Anchor targets. Sticky header would otherwise cover them.
   script.js keeps --header-h in sync with the real height;
   the static fallbacks cover the window before it runs. Applied to
   every element with an id, not just the original cta/contact set,
   so any new anchor link lands below the header without needing a
   matching CSS rule added for it. */
[id] { scroll-margin-top: calc(var(--header-h, 84px) + 20px); }

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

/* -----------------------------------------------------------
   THE FOCUS BAR — accent and focus indicator are one mark.
   Contrast is carried by the ink underline and ink text, not
   by the yellow, which cannot carry it (1.43:1 on paper).
   ----------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid transparent;   /* keeps Windows HCM happy */
  background-color: var(--signal);
  color: var(--ink);
  box-shadow: 0 -2px var(--signal), 0 4px var(--ink);
  text-decoration: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--signal);
  color: var(--ink);
}
.skip-link:focus { left: 0; }

/* -----------------------------------------------------------
   Two-track grid — the report margin. Mono metadata sits in
   the spine, content in the wide track. Never centred.
   ----------------------------------------------------------- */
.tracks { display: grid; grid-template-columns: var(--spine) 1fr; gap: 0 var(--gutter); }
.spine {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  padding-top: 6px;
}
.spine-rule { border-top: 2px solid var(--ink); padding-top: 10px; }

/* -----------------------------------------------------------
   Header
   ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 14px; padding-bottom: 14px;
}
.header-left { display: flex; align-items: center; gap: 34px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo-word { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.04em; }

.founder-linkedin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  color: var(--ink); border-bottom: 3px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.founder-linkedin:hover { border-bottom-color: var(--signal); }
.founder-linkedin svg { width: 20px; height: 20px; }

.site-nav ul { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; row-gap: 8px; }
.site-nav a {
  display: inline-block; padding: 3px 0;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--signal); }

/* -----------------------------------------------------------
   Buttons — ink is the primary action. Yellow appears as the
   edge, never as the only signal.
   ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  box-shadow: 0 3px 0 var(--signal);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--signal); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--signal); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: none; }
.btn-outline:hover { background: var(--stock); }
/* Outline button sitting on a dark band (hero, band-tool): white text,
   white edge by default. Without this, hover still swaps in the light
   .btn-outline:hover background above while the text stays white,
   producing white-on-near-white with unreadable contrast. */
.btn-outline-on-dark { color: var(--paper); border-color: var(--paper); }
.btn-outline-on-dark:hover { color: var(--ink); }
.btn-on-dark { background: var(--signal); color: var(--ink); border-color: var(--signal); box-shadow: 0 3px 0 var(--paper); }
.btn-on-dark:hover { box-shadow: 0 5px 0 var(--paper); }
.header-cta { padding: 10px 18px; font-size: 14.5px; }

/* -----------------------------------------------------------
   Sections. Spacing is set PER ROLE, not uniformly: dense
   evidence blocks tighten, reading passages open up.
   ----------------------------------------------------------- */
.band-exhibit { background: var(--ink); color: var(--on-dark); padding: 64px 0 72px; }
.band-read    { background: var(--paper); padding: 96px 0 88px; }
.band-spec    { background: var(--stock); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 72px 0 76px; }
.band-tool    { background: var(--ink); color: var(--on-dark); padding: 80px 0 88px; }
.band-contact { background: var(--paper); padding: 88px 0 96px; }

.band-exhibit h1, .band-exhibit h2, .band-exhibit h3,
.band-tool h1, .band-tool h2, .band-tool h3 { color: var(--paper); }

.sec-head { max-width: 34ch; }
.sec-head h2 { font-size: clamp(30px, 4vw, 46px); }
.sec-lede {
  margin-top: 18px; max-width: var(--measure);
  font-size: 18px; color: var(--slate);
}
.band-exhibit .sec-lede, .band-tool .sec-lede { color: var(--on-dark); }

/* -----------------------------------------------------------
   HERO — an exhibit, not a pitch. Opens on a real published
   finding; the proposition is subordinate to the evidence.
   ----------------------------------------------------------- */
.exhibit-tag {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--signal);
  padding-bottom: 14px; margin-bottom: 26px;
  border-bottom: 2px solid var(--ink-2);
}
.hero-h1 {
  font-size: clamp(30px, 4.3vw, 50px);
  max-width: 30ch;
  line-height: 1.12;
}

.hero-proof-label {
  margin-top: 40px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-dark); opacity: 0.72;
}

.hero-close { margin-top: 44px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; }
.hero-tagline { max-width: 42ch; font-size: 17px; color: var(--on-dark); }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero-micro { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--on-dark); }

/* -----------------------------------------------------------
   THE GAP — the signature. Two verdicts on one site, set
   against each other. Left: what a machine reported. Right:
   what a person found. Deliberately unequal weight.
   ----------------------------------------------------------- */
.ledger {
  margin-top: 14px;
  display: grid; grid-template-columns: 0.72fr 1fr;
  border: 2px solid var(--signal);
  background: var(--ink-2);
}
.ledger-col { padding: 26px 28px 30px; }
.ledger-col + .ledger-col { border-left: 2px solid var(--signal); }

.ledger dt {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-dark);
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.ledger dd { color: var(--on-dark); }

.verdict-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 9vw, 92px); line-height: 0.86;
  letter-spacing: -0.04em; color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.verdict-unit { margin-top: 10px; font-size: 15px; color: var(--on-dark); }

.tally { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tally li {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.tally .n { color: var(--paper); font-weight: 500; }

.verdict-text {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(21px, 2.5vw, 28px); line-height: 1.18;
  letter-spacing: -0.02em; color: var(--paper);
}
.verdict-body { margin-top: 16px; font-size: 15.5px; color: var(--on-dark); max-width: 46ch; }
.verdict-src { margin-top: 20px; }
.verdict-src a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--signal);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}

/* -----------------------------------------------------------
   Timeline — a REAL chronological sequence, so ordering is
   information and the dates earn their prominence. (The three
   scope items below are a set, not a sequence, so they get no
   numbers — see .deflist.)
   ----------------------------------------------------------- */
.timeline { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); max-width: var(--measure); }
.timeline-step { padding: 16px 20px 0 0; position: relative; }
.timeline-step::before { content: ""; position: absolute; top: -2px; left: 0; width: 100%; height: 2px; background: transparent; }
.timeline-step.is-current::before { background: var(--signal); }
.timeline-year {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--slate); font-variant-numeric: tabular-nums;
}
.timeline-step.is-current .timeline-year { color: var(--ink); }
.timeline-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; margin-top: 5px; }
.timeline-desc { margin-top: 6px; font-size: 14px; color: var(--slate); max-width: 24ch; }

/* -----------------------------------------------------------
   Definition ledger — replaces the old 01/02/03 card grid.
   These three are a SET, not a sequence, so numbering them
   would encode something untrue. Term in the spine, substance
   in the track.
   ----------------------------------------------------------- */
.deflist { margin-top: 8px; }
.deflist > div {
  display: grid; grid-template-columns: var(--spine) 1fr; gap: 0 var(--gutter);
  padding: 26px 0; border-top: 1px solid var(--rule);
}
.deflist > div:first-child { border-top: 2px solid var(--ink); }
.deflist dt {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.deflist dd { color: var(--slate); font-size: 16.5px; max-width: 58ch; }
.deflist dd strong { color: var(--ink); font-weight: 600; }
.deflist .sub { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.deflist .sub li { font-size: 15.5px; color: var(--slate); position: relative; padding-left: 16px; }
.deflist .sub li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 3px; background: var(--ink);
}

.callout {
  margin-top: 38px; padding: 20px 24px;
  border-left: 6px solid var(--signal); background: var(--paper);
  font-size: 16px; color: var(--slate);
}
/* Inside a .tracks content column, cap to the same measure as the
   text above it (heading/lede), so it doesn't overhang further right
   than the content it's replying to. Full-width standalone callouts
   (e.g. monitoring.html's banner) are unaffected. */
.tracks .callout { max-width: var(--measure); }
.callout a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* -----------------------------------------------------------
   Scanner. Every id and class here is required by script.js —
   see the DOM contract at the top of that file. Restyled only.
   ----------------------------------------------------------- */
.tool-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
/* The panel is a light surface sitting inside a dark band. It MUST
   reset the inherited on-dark text colour or every result rendered
   into it lands white-on-white. */
.scan-panel { background: var(--paper); color: var(--ink); border: 2px solid var(--signal); padding: 30px 30px 32px; }
.scan-panel h1, .scan-panel h2, .scan-panel h3 { color: var(--ink); }
.scan-panel label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.cta-form-row { display: flex; gap: 12px; }
.scan-panel input {
  flex: 1 1 auto; min-width: 0;
  padding: 13px 14px; font-family: var(--font-body); font-size: 16px;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink);
}
.scan-panel input::placeholder { color: #6B7688; }
.cta-form-row .btn { flex: none; }
.cta-status { margin-top: 12px; font-size: 14.5px; color: var(--flag); }
.cta-fineprint { margin-top: 14px; font-size: 13.5px; color: var(--slate); }
.cta-fineprint a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.scan-spinner {
  width: 26px; height: 26px; border: 3px solid var(--rule); border-top-color: var(--ink);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.scan-loading-text { margin-top: 14px; font-size: 16px; }
.scan-loading-sub { margin-top: 8px; font-size: 14px; color: var(--slate); }
.scan-teaser { font-size: 17px; }
.scan-error-text { font-size: 16px; color: var(--flag); margin-bottom: 16px; }

.severity-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.severity-pill {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 10px; border: 2px solid currentColor;
  font-variant-numeric: tabular-nums;
}
.severity-pill .count { font-weight: 500; }
.severity-pill[data-severity="critical"] { color: var(--flag); }
.severity-pill[data-severity="serious"]  { color: var(--sev-serious); }
.severity-pill[data-severity="moderate"] { color: var(--sev-moderate); }
.severity-pill[data-severity="minor"]    { color: var(--sev-minor); }

.issue-list { margin-top: 20px; }
.issue-item { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule); }
.issue-badge { flex: none; width: 10px; height: 10px; margin-top: 7px; background: var(--ink); }
.issue-badge[data-severity="critical"] { background: var(--flag); }
.issue-badge[data-severity="serious"]  { background: var(--sev-serious); }
.issue-badge[data-severity="moderate"] { background: var(--sev-moderate); }
.issue-badge[data-severity="minor"]    { background: var(--sev-minor); }
.issue-title { font-size: 15.5px; font-weight: 600; }
.issue-meta { margin-top: 4px; font-size: 13.5px; color: var(--slate); }
.issue-meta a { color: var(--ink); text-decoration: underline; }

.scan-disclaimer {
  margin-top: 22px; padding: 18px 20px;
  background: var(--stock); border-left: 6px solid var(--ink);
  font-size: 14px; line-height: 1.6; color: var(--slate);
}
.scan-disclaimer strong { color: var(--ink); }
.scan-disclaimer p + p { margin-top: 10px; }
.scan-disclaimer a { color: var(--ink); text-decoration: underline; }
#scan-results .btn { margin-top: 20px; }

/* -----------------------------------------------------------
   Contact
   ----------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.contact-note { margin-top: 20px; max-width: 46ch; font-size: 16.5px; color: var(--slate); }
.contact-email {
  display: inline-block; margin-top: 26px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 2.8vw, 30px); letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none;
  box-shadow: inset 0 -8px 0 var(--signal);
}
.contact-email:hover { box-shadow: inset 0 -20px 0 var(--signal); }

.contact-panel { border: 2px solid var(--ink); background: var(--stock); }
.contact-panel > div { padding: 18px 22px; border-top: 1px solid var(--rule); }
.contact-panel > div:first-child { border-top: none; }
.contact-panel dt {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate);
}
.contact-panel dd { margin-top: 5px; font-size: 15.5px; color: var(--ink); }

/* -----------------------------------------------------------
   Footer: three tiers, most prominent to least.
   1. Top    - brand mark + the Clutch trust badge, together.
   2. Middle - nav links + contact details.
   3. Bottom - copyright + legal links, smallest and most muted.
   A thin divider between tiers and consistent gaps replace the old
   single flex column, which had one huge unexplained gap above the nav
   and a trust badge with no visual relationship to anything near it.
   ----------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-dark); padding: 48px 0 40px; border-top: 4px solid var(--signal); }
.site-footer .wrap { display: flex; flex-direction: column; }
.site-footer p { font-size: 13.5px; color: var(--on-dark); max-width: 62ch; margin: 0; }
.footer-link {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px;
}
.footer-link:hover { color: var(--signal); }

/* Tier 1: brand + trust badge */
.footer-top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.footer-logo svg { width: 28px; height: 28px; flex: none; }
.footer-logo-word { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.04em; color: var(--paper); }
/* Clutch's own widget script renders its iframe at width:100%, so
   without a constraint here it stretches to the full footer width
   instead of staying a small badge. */
.footer-clutch { max-width: 150px; flex: none; }

/* Tier 2: nav links + contact details */
.footer-middle {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px;
  padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-nav { display: flex; align-items: center; gap: 28px; row-gap: 12px; flex-wrap: wrap; }
.footer-contact { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-contact-sep { color: rgba(255,255,255,0.4); }

/* Tier 3: copyright + legal links, smallest and most muted */
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 24px; }
.site-footer p.footer-copyright { font-size: 12px; color: rgba(220,227,238,0.6); }
.footer-legal { display: flex; align-items: center; gap: 20px; row-gap: 8px; flex-wrap: wrap; }
.footer-legal .footer-link { font-size: 11px; color: rgba(220,227,238,0.6); }
.footer-legal .footer-link:hover { color: var(--signal); }

/* -----------------------------------------------------------
   Cookie banner — consent.js builds this markup and owns all
   the logic. Restyled only; class names and data attributes
   are its contract and must not change.
   ----------------------------------------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--paper); border-top: 3px solid var(--ink); padding: 18px 0;
}
.cookie-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cookie-banner p { margin: 0; max-width: 62ch; font-size: 14.5px; line-height: 1.5; color: var(--slate); }
.cookie-banner a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
.cookie-banner .btn { padding: 11px 20px; font-size: 15px; }

.cookie-banner-prefs { max-width: 640px; }
.cookie-banner-prefs > p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--slate); }
.cookie-pref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-top: 1px solid var(--rule);
}
.cookie-pref-label { max-width: 48ch; }
.cookie-pref-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
label.cookie-pref-name { cursor: pointer; }
.cookie-pref-desc { margin: 3px 0 0; font-size: 13.5px; color: var(--slate); }
.cookie-pref-always {
  flex: none; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--slate);
}
.cookie-pref-checkbox { flex: none; width: 20px; height: 20px; accent-color: var(--ink); cursor: pointer; }
.cookie-banner-prefs .cookie-banner-actions { margin-top: 16px; }

/* ===========================================================
   Responsive. The header stacks so nav can never sit beside
   the logo and collide with it at any width.
   =========================================================== */
@media (max-width: 1000px) {
  .tool-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .hero-close { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 760px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger-col + .ledger-col { border-left: none; border-top: 2px solid var(--signal); }
  .tracks, .deflist > div, .context-box > div { grid-template-columns: 1fr; gap: 10px; }
  .deflist dt { color: var(--slate); }
}

/* ===========================================================
   PHASE 2 additions — offer pages, case studies, guides.
   Same system: ink-filled buttons, signal edge, mono metadata,
   nothing centred. Added rather than restyled from v1's
   rounded-card language, which doesn't belong in this system.
   =========================================================== */

/* Generic page head (non-hero pages): guides, case studies,
   listings). Same dark band language as the homepage hero. */
.page-head { background: var(--ink); color: var(--on-dark); padding: 56px 0 60px; border-bottom: 4px solid var(--signal); }
.page-head h1 { color: var(--paper); max-width: 22ch; font-size: clamp(30px, 4.4vw, 48px); }
.page-eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal);
  margin-bottom: 16px;
}
/* Mid-page section eyebrows (not the page-head hero): same top-rule
   treatment as the .tracks spine label, at the same fixed width, so
   every section title on the site reads consistently, whether it
   sits in a two-column tracks layout or a plain sec-head block. */
.section-eyebrow {
  display: inline-block; width: var(--spine);
  color: var(--slate); border-top: 2px solid var(--ink); padding-top: 10px;
}
.page-subtitle { margin-top: 16px; font-size: 18px; color: var(--on-dark); max-width: 52ch; }
.page-meta { margin-top: 10px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--on-dark); opacity: 0.78; }
.back-link {
  display: inline-block; margin-bottom: 22px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--on-dark); text-decoration: none; opacity: 0.85;
}
.back-link:hover { text-decoration: underline; }

/* Offer head — audit/monitoring pages. Price sits in the fold,
   never buried below it. */
.offer-head { background: var(--ink); color: var(--on-dark); padding: 56px 0 52px; border-bottom: 4px solid var(--signal); }
.offer-head .wrap { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.offer-head h1 { color: var(--paper); max-width: 18ch; font-size: clamp(30px, 4.2vw, 46px); }
.offer-subtitle { margin-top: 14px; font-size: 17.5px; color: var(--on-dark); max-width: 48ch; }
.offer-price-block { flex: none; text-align: left; }
.offer-price { font-family: var(--font-display); font-weight: 800; line-height: 0.86; letter-spacing: -0.03em; font-size: clamp(44px, 5.6vw, 68px); color: var(--paper); font-variant-numeric: tabular-nums; }
.offer-price-unit { margin-top: 6px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark); }
.offer-cta-row { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.offer-cta-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--on-dark); opacity: 0.8; }

/* Tick list — scope/inclusions */
.tick-list { margin-top: 24px; border-top: 2px solid var(--ink); max-width: 62ch; }
.tick-list li { position: relative; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--rule); font-size: 16.5px; color: var(--slate); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: 23px; width: 13px; height: 3px; background: var(--ink); }

/* Pricing tier comparison — monitoring page */
.tier-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); align-items: stretch; }
.tier-grid-3col { grid-template-columns: 1fr 1fr 1fr; }
.tier-card { position: relative; padding: 34px 30px 32px; display: flex; flex-direction: column; box-sizing: border-box; border-left: 2px solid transparent; }
.tier-card + .tier-card { border-left-color: var(--ink); }
.tier-card.is-recommended { background: var(--ink); color: var(--on-dark); }
.tier-flag {
  position: absolute; top: 0; right: 0;
  background: var(--signal); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px;
}
.tier-name { font-size: 22px; }
.tier-price { margin-top: 16px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(36px, 4.6vw, 50px); color: var(--ink); font-variant-numeric: tabular-nums; }
.tier-card.is-recommended .tier-price { color: var(--paper); }
.tier-price-unit { margin-left: 4px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--slate); }
.tier-card.is-recommended .tier-price-unit { color: var(--on-dark); }
.tier-specs { margin-top: 24px; border-top: 1px solid var(--rule); flex: 1 0 auto; }
.tier-card.is-recommended .tier-specs { border-top-color: rgba(255,255,255,0.2); }
.tier-specs > div { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.tier-card.is-recommended .tier-specs > div { border-bottom-color: rgba(255,255,255,0.2); }
.tier-specs dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.tier-card.is-recommended .tier-specs dt { color: var(--on-dark); opacity: 0.8; }
.tier-specs dd { margin-top: 4px; font-size: 15px; color: var(--ink); }
.tier-card.is-recommended .tier-specs dd { color: var(--paper); }
.tier-cta { margin-top: 26px; width: 100%; }
.tier-note { margin-top: 20px; font-size: 14.5px; color: var(--slate); max-width: 60ch; }

/* FAQ */
.faq-list { margin-top: 12px; border-top: 2px solid var(--ink); max-width: var(--measure); }
.faq-item { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.faq-item dt { font-size: 18px; font-weight: 700; font-family: var(--font-display); }
.faq-item dd { margin-top: 10px; font-size: 15.5px; color: var(--slate); }

/* Proof note — small trust signal near a CTA */
.proof-note { margin-top: 28px; padding: 18px 22px; border-left: 6px solid var(--signal); background: var(--stock); font-size: 15px; color: var(--slate); max-width: 60ch; }
.proof-note strong { color: var(--ink); }
.band-tool .proof-note, .band-exhibit .proof-note, .offer-head .proof-note { background: var(--ink-2); color: var(--on-dark); border-left-color: var(--signal); }
.band-tool .proof-note strong, .band-exhibit .proof-note strong, .offer-head .proof-note strong { color: var(--paper); }
.offer-head .proof-note a { color: var(--signal); }

/* Client context box — case studies */
.context-box { margin: 30px 0; border: 2px solid var(--ink); background: var(--stock); }
.context-box > div { display: grid; grid-template-columns: var(--spine) 1fr; gap: 0 var(--gutter); padding: 16px 22px; border-top: 1px solid var(--rule); }
.context-box > div:first-child { border-top: none; }
.context-box dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.context-box dd { font-size: 15.5px; color: var(--ink); }

/* Long-form body — guides and case study narrative sections */
.prose-body { max-width: var(--measure); }
.prose-body h2 { margin-top: 52px; font-size: clamp(23px, 2.8vw, 30px); }
.prose-body > h2:first-child, .prose-body > *:first-child h2 { margin-top: 0; }
.prose-body h3 { margin-top: 30px; font-size: 19px; }
.prose-body p { margin-top: 16px; font-size: 16.5px; color: var(--slate); }
.prose-body p:first-child { margin-top: 0; }
.prose-body p.lede { font-size: 19px; color: var(--ink); }
.prose-body ul, .prose-body ol { margin-top: 16px; }
.prose-body li { position: relative; margin-top: 10px; padding-left: 24px; font-size: 16px; color: var(--slate); }
.prose-body ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 3px; background: var(--ink); }
.prose-body ol { counter-reset: item; }
.prose-body ol li { counter-increment: item; padding-left: 28px; }
.prose-body ol li::before { content: counter(item) "."; position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); }

.prose-body blockquote {
  margin: 28px 0; padding: 6px 0 6px 22px;
  border-left: 4px solid var(--signal);
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink);
}
.prose-body blockquote p { margin-top: 0; color: inherit; }
.prose-body strong { color: var(--ink); font-weight: 600; }
.prose-body a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Comparison tables inside long-form guides. Wrapped in a scrolling
   container by the markup so a wide table scrolls internally instead of
   forcing the whole page wider on narrow screens. */
.table-scroll { margin: 24px 0; overflow-x: auto; }
.prose-body table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; }
.prose-body th, .prose-body td { text-align: left; padding: 12px 14px; border: 1px solid var(--rule); vertical-align: top; }
.prose-body th {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--stock); color: var(--ink); border-bottom: 2px solid var(--ink);
}
.prose-body td { color: var(--slate); }
.prose-body td:first-child { font-weight: 600; color: var(--ink); }

/* Key-takeaways summary — guides */
.takeaways { margin: 30px 0; padding: 24px 26px; border: 2px solid var(--ink); background: var(--stock); max-width: var(--measure); }
.takeaways-label { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; }
.takeaways ul { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.takeaways li { position: relative; padding-left: 22px; margin: 0; font-size: 16px; color: var(--ink); }
.takeaways li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 3px; background: var(--ink); }

/* Mid-article CTA callout with embedded scanner link */
.inline-cta { margin: 34px 0; padding: 24px 26px; border-left: 6px solid var(--signal); background: var(--ink); color: var(--on-dark); max-width: var(--measure); }
.inline-cta p { color: var(--on-dark); font-size: 16px; }
.inline-cta .btn { margin-top: 16px; }

/* Author bio */
.author-bio { margin-top: 52px; padding-top: 28px; border-top: 2px solid var(--ink); max-width: var(--measure); }
.author-bio-name { font-size: 15.5px; font-weight: 700; }
.author-bio-role { margin-top: 2px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.author-bio-text { margin-top: 8px; font-size: 15px; color: var(--slate); max-width: 56ch; }

/* Related links */
.related-links { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); max-width: var(--measure); }
.related-links-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.related-links a { display: block; margin-top: 8px; font-size: 15.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.dual-cta { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Scanner framing note — used wherever the free scanner appears
   as a secondary CTA, so it never competes with a paid CTA. */
.scan-frame-note { margin-top: 16px; font-size: 14px; color: var(--slate); max-width: 54ch; }
.band-tool .scan-frame-note, .band-exhibit .scan-frame-note { color: var(--on-dark); }

/* Case study index / guide index cards */
.card-list { margin-top: 8px; display: flex; flex-direction: column; }
.list-card { padding: 30px 0; border-top: 1px solid var(--rule); }
.card-list > .list-card:first-child { border-top: 2px solid var(--ink); }
.list-card-type { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.list-card h3 { margin-top: 10px; font-size: clamp(20px, 2.4vw, 26px); }
.list-card-sub { margin-top: 6px; font-size: 14.5px; color: var(--slate); }
.list-card-summary { margin-top: 14px; font-size: 16px; color: var(--slate); max-width: var(--measure); }
.list-card-findings { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; max-width: 62ch; }
.list-card-findings li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink); }
.list-card-findings li::before { content: ""; position: absolute; left: 0; top: 8px; width: 11px; height: 3px; background: var(--signal); box-shadow: inset 0 0 0 1px var(--ink); }
.list-card-link { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Data reports are a distinct content type from how-to guides, listed
   in the same index but visually marked apart: an accent border plus a
   filled label instead of the plain mono-text type used by guides. */
.list-card-report { padding-left: 20px; border-left: 4px solid var(--signal); }
.list-card-report .list-card-type { display: inline-block; padding: 3px 8px; background: var(--ink); color: var(--signal); }

/* Enquiry form — contact section */
.enquiry-form { max-width: 46ch; }
.enquiry-field { margin-top: 18px; }
.enquiry-field:first-child { margin-top: 0; }
.enquiry-field label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.enquiry-field input, .enquiry-field select {
  width: 100%; padding: 13px 14px; font-family: var(--font-body); font-size: 16px;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink);
}
.enquiry-submit { margin-top: 22px; width: 100%; }
.enquiry-status { margin-top: 12px; font-size: 14.5px; color: var(--slate); }
.enquiry-or { margin: 22px 0; display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.enquiry-or::before, .enquiry-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.reassurance-note { margin-top: 14px; font-size: 13.5px; color: var(--slate); }

/* -----------------------------------------------------------
   FAQ accordion — interactive.js turns each dt's text into a
   real button at runtime and hides its dd; this only styles
   that button and the open/closed state. With JS disabled the
   markup is untouched: a plain, fully visible dt/dd list.
   ----------------------------------------------------------- */
.faq-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left; background: none; border: none; padding: 0;
  font: inherit; color: var(--ink); cursor: pointer;
}
.faq-toggle-icon { flex: none; font-family: var(--font-mono); font-size: 20px; font-weight: 500; line-height: 1; }
.faq-toggle:active { transform: translateY(1px); }
.faq-item dd[hidden] { display: none; }

/* -----------------------------------------------------------
   Keyboard-nav demo (audit page) — "broken" mode only ever
   suppresses focus inside this one boxed example; every real
   control on the page keeps the site's normal focus bar above.
   ----------------------------------------------------------- */
.kbd-demo { margin-top: 32px; max-width: var(--measure); border: 2px solid var(--ink); background: var(--stock); padding: 24px; }
.kbd-demo-heading { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.kbd-demo-note { margin-top: 8px; font-size: 14.5px; color: var(--slate); }
.kbd-demo-toggle { margin-top: 16px; }
.kbd-demo-bar { margin-top: 24px; display: flex; gap: 8px; flex-wrap: wrap; padding: 16px; background: var(--paper); border: 1px solid var(--rule); }
.kbd-demo-link {
  font-family: var(--font-body); font-size: 15px; font-weight: 600; padding: 8px 16px;
  background: var(--paper); border: 1px solid var(--ink); color: var(--ink); cursor: pointer;
}
.kbd-demo-link:hover { background: var(--stock); }
.kbd-demo-link:active { transform: translateY(1px); }
.kbd-demo-bar[data-mode="broken"] .kbd-demo-link:focus-visible {
  outline: none; background-color: var(--paper); color: var(--ink); box-shadow: none;
}
.kbd-demo-status { margin-top: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--slate); min-height: 1.4em; }

/* -----------------------------------------------------------
   Expandable findings (case studies) — native <details>, styled
   to match the mono/underline link language used everywhere
   else on the site rather than the browser default triangle.
   ----------------------------------------------------------- */
.findings-more { margin-top: 16px; }
.findings-more summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  padding: 4px 0;
}
.findings-more summary::-webkit-details-marker { display: none; }
.findings-more summary::before { content: "+ "; text-decoration: none; }
.findings-more[open] summary::before { content: "\2212 "; }
.findings-more[open] summary { margin-bottom: 8px; }
.findings-more summary:active { opacity: 0.65; }

/* -----------------------------------------------------------
   Section reveals — major band entrances only, never small or
   inline elements, never repeated on scroll-back. Gated behind
   .js-reveal (added by a synchronous inline script in <head>,
   before first paint) so a visitor with JS disabled never gets
   a section stuck invisible: without that class this whole block
   simply doesn't match anything. scroll-reveal.js adds
   .is-revealed via IntersectionObserver (unobserved once shown).
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .band-exhibit,
  .js-reveal .band-read,
  .js-reveal .band-spec,
  .js-reveal .band-tool,
  .js-reveal .band-contact,
  .js-reveal .page-head,
  .js-reveal .offer-head {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .js-reveal .is-revealed { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .offer-head .wrap { grid-template-columns: 1fr; align-items: start; }
  .tier-grid { grid-template-columns: 1fr; }
  .tier-card + .tier-card { border-left: none; border-top: 2px solid var(--ink); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  :root { --gutter: 20px; }

  .site-header .wrap { flex-wrap: wrap; row-gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .header-left { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
  .site-nav ul { gap: 14px; width: 100%; }
  .site-nav a { font-size: 11.5px; letter-spacing: 0.05em; }
  .logo-word { font-size: 18px; }
  .header-cta { padding: 9px 14px; font-size: 13.5px; }

  /* Header is taller here: logo row + nav rows. */
  [id] { scroll-margin-top: calc(var(--header-h, 170px) + 20px); }

  .band-exhibit { padding: 44px 0 52px; }
  .band-read    { padding: 60px 0 56px; }
  .band-spec    { padding: 52px 0 56px; }
  .band-tool    { padding: 56px 0 60px; }
  .band-contact { padding: 60px 0 64px; }
  .page-head, .offer-head { padding: 40px 0 44px; }
  .tier-cta, .enquiry-submit { width: 100%; }
  .dual-cta { flex-direction: column; align-items: stretch; }
  .dual-cta .btn { width: 100%; }

  .timeline { grid-template-columns: 1fr; }
  .timeline-step { padding-right: 0; }
  .timeline-desc { max-width: none; }

  .cta-form-row { flex-direction: column; }
  .cta-form-row .btn { width: 100%; }
  .scan-panel { padding: 22px 20px 24px; }
  #scan-results .btn { width: 100%; }

  .hero-actions { align-items: stretch; width: 100%; }
  .hero-actions .btn { width: 100%; }

  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-banner-actions { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions .btn { width: 100%; }
  .cookie-pref-row { align-items: flex-start; }

  /* Each tier stacks its own contents vertically at this width, instead
     of squeezing a brand mark next to a badge, or nav links next to a
     full postal address, into a row with no room for either. */
  .footer-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-middle { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-nav { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: 10px; }

  .kbd-demo-bar { flex-direction: column; }
  .kbd-demo-link { width: 100%; }
}