/* ==========================================================================
   MedEz — medezdirect.com
   Single stylesheet. Mobile-first. No external dependencies, no web fonts.
   --------------------------------------------------------------------------
   COLOR NOTE (please read before changing):
   --brand #0066CC is the action colour. White on it measures 5.57:1, so the
   same value works for button surfaces AND for link text. It replaced #009FE3,
   which measured 2.97:1 and was hard to read on a phone in sunlight.
   --alert #C4362A is reserved for caution only. If it starts appearing
   decoratively it stops carrying meaning, so keep it to real warnings.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --brand:        #0066CC;   /* action colour: buttons, links, icons, graphics */
  --brand-tint:   #E8F1FB;
  --brand-tint-2: #F4F8FD;

  /* Caution. Used only where something must not be missed: recall notice,
     do-not-ship warning. Never decorative, or it stops meaning anything.
     4.5:1+ on both white and --surface-2, so it works for rules AND text. */
  --alert:        #C4362A;
  --alert-tint:   #FFF4F2;

  /* Dark band. Same 210 degree hue as --brand, dark and desaturated, so the
     closing section still reads as MedEz rather than generic near-black. */
  --navy:      #111E2C;
  --navy-soft: #1B2C3E;

  /* Neutrals */
  --ink:       #1D1D1F;
  --body:      #4A5560;
  --muted:     #5C6670;
  --line:      #E3E3E6;
  --line-soft: #EFEFF1;
  --surface:   #FFFFFF;
  --surface-2: #F5F5F7;

  /* Radii */
  --r-sm:   10px;
  --r:      14px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* Shadows — subtle only */
  --shadow-sm: 0 1px 2px rgba(10, 46, 68, .06), 0 1px 3px rgba(10, 46, 68, .05);
  --shadow:    0 2px 4px rgba(10, 46, 68, .04), 0 8px 24px rgba(10, 46, 68, .07);
  --shadow-lg: 0 4px 8px rgba(10, 46, 68, .04), 0 18px 44px rgba(10, 46, 68, .10);

  /* Layout */
  --container: 1160px;
  --gutter:    20px;

  /* Mobile action bar height, used to pad the page bottom */
  --mobile-bar: 86px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .15s;   /* colour and border changes */
  --t-base: .25s;   /* transforms, reveals, anything that moves */
}

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

html {
  /* The page is designed light-only. Saying so stops browsers from
     force-darkening it into colours nobody checked for contrast. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* clears the sticky header on anchor jumps */
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Keeps the fixed mobile action bar from covering page content. */
  padding-bottom: calc(var(--mobile-bar) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 3.1vw, 3.25rem); letter-spacing: -0.028em; }
h2 { font-size: clamp(1.6rem, 1.28rem + 1.5vw, 2.25rem); }
h3 { font-size: 1.1875rem; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); }
a:hover { color: var(--navy); }

img, svg { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; }

/* ---------- 3. Accessibility helpers ---------- */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 6px;
}
.section--navy :focus-visible { outline-color: #FFFFFF; }

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

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--navy);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0; color: #FFFFFF; }

/* ---------- 4. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.25rem, 2.4rem + 4vw, 5.5rem); }
.section--tint { background: var(--surface-2); }
.section--navy { background: var(--navy); color: #D5DCE4; }
.section--navy h2, .section--navy h3 { color: #FFFFFF; }

.section-head {
  max-width: 640px;
  margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
}
.section-head p {
  font-size: 1.0625rem;
  margin-top: -.15rem;
}


/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;                 /* >= 44px touch target */
  padding: .7rem 1.55rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 1rem;
  /* 500, not 700. Lighter reads cleaner on a pill, and the system stack
     resolves to SF Pro on Apple devices where 500 is a real cut rather than a
     synthesised one. Kept above 400 so the label stays solid in bright light,
     which is the problem the colour change was fixing. */
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn svg { flex: none; }
.btn:active { transform: translateY(1px); }

/* Primary. White on #0066CC measures 5.57:1, comfortably past the 4.5:1 AA
   minimum, which is why this blue replaced the old #009FE3 (2.97:1). */
.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
/* Hover keeps the exact brand color and darkens it optically, so no second
   blue is introduced anywhere in the codebase. */
.btn--primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
  filter: brightness(.93);
  box-shadow: var(--shadow);
}

/* Secondary — quieter, outlined */
.btn--secondary {
  background: var(--surface);
  border-color: #D3D3D7;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover {
  border-color: var(--brand);
  background: var(--brand-tint-2);
  color: var(--navy);
}

/* On navy backgrounds */
.section--navy .btn--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #FFFFFF;
  box-shadow: none;
}
.section--navy .btn--secondary:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.btn--block { width: 100%; }

/* Tertiary text link */
.link-quiet {
  display: inline-block;
  font-size: .9375rem;
  color: var(--body);
  text-decoration: none;
}
.link-quiet a, a.link-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* touch target, not just the text box */
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-quiet a:hover, a.link-quiet:hover { color: var(--navy); }
.section--navy .link-quiet { color: #C7D2DC; }
.section--navy .link-quiet a, .section--navy a.link-quiet { color: #FFFFFF; }

/* ---------- 6. Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(10, 46, 68, .06);
}
/* Three tracks: nav on the left, logo dead centre, empty spacer on the right.
   The spacer matters — without it the logo would centre against the nav only. */
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 74px;
}
.header__left { display: flex; align-items: center; justify-self: start; }
.header__spacer { justify-self: end; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;          /* keeps the logo link a full touch target */
  text-decoration: none;
  flex: none;
}
.header__inner .brand { justify-self: center; }
/* The mark is circular artwork — never let it distort. */
/* Scrolling used to animate the header's min-height, which forced a layout
   recalculation on every frame. The mark scales instead: same read of "the
   header tightened up", done on the compositor, and the header keeps one
   height so nothing below it ever reflows. */
.brand__mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  flex: none;
  transition: transform var(--t-base) var(--ease);
}
.header.is-scrolled .brand__mark { transform: scale(.86); }

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .8rem;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.nav__link:hover { background: var(--brand-tint-2); color: var(--navy); }


/* Mobile disclosure menu */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--navy);
  cursor: pointer;
}
.nav-toggle:hover { border-color: #D3D3D7; background: var(--brand-tint-2); }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: .5rem 0 1rem;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { list-style: none; }
.mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 .25rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu__link:hover { color: var(--brand); }
.mobile-menu .btn { margin-top: 1rem; }

@media (min-width: 900px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
  .header__inner .brand__mark { width: 56px; height: 56px; }
}
/* Footer uses the wordmark rather than the circular mark. Intrinsic size is
   460x118; height:auto keeps the ratio and the width/height attributes still
   reserve the right box, so there is no layout shift. */
.footer__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.footer__brand img { width: 132px; height: auto; }

/* ---------- 7. Hero ---------- */
/* One centred column. No illustration, no callout boxes — the headline,
   the two buttons and two quiet lines of text carry the whole section. */
.hero {
  padding-block: clamp(3rem, 2.2rem + 4vw, 6rem);
  background: var(--surface);
  text-align: center;
}
.hero__inner { max-width: 720px; }

.hero__title { margin-bottom: .6rem; }
.hero__title span { display: block; color: var(--brand); }

.hero__lede {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  max-width: 34em;
  margin: 0 auto 2rem;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;      /* stops the buttons stretching full width */
  gap: .7rem;
  margin-bottom: 1.25rem;
}
/* Floor on the tap target: lighter than full width, still easy to hit for
   someone reading this on a phone without their glasses. */
.hero__actions .btn { min-width: 232px; }

.hero__email { font-size: .9375rem; margin-bottom: .35rem; }
.hero__email a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* standalone link, so keep a full touch target */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero__privacy {
  font-size: .875rem;
  color: var(--muted);
  max-width: 42ch;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .hero__actions { flex-direction: row; justify-content: center; }
  .hero__actions .btn { min-width: 210px; }
}

/* ---------- 8. Trust strip ---------- */
.trust {
  border-block: 1px solid var(--line);
  background: var(--surface-2);
  padding-block: 1.1rem;
}
.trust__list {
  list-style: none;
  display: grid;
  gap: .5rem;
  text-align: center;
}
.trust__item {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
}
@media (min-width: 700px) {
  .trust__list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

/* ---------- 9. Steps, lists, splits ---------- */
/* The numbered circle is the only decorative device kept on the page —
   it does real work (shows sequence) rather than just adding a border. */
.steps {
  list-style: none;
  display: grid;
  gap: 2.25rem;
  max-width: 940px;
  margin-inline: auto;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: .9rem;
  border-radius: 50%;
  background: var(--brand);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
}
.step h3 { margin-bottom: .35rem; }
.step p { font-size: .9375rem; margin: 0; }

@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* Plain checkmark list — no boxes, no inline SVGs. */
.checklist { list-style: none; display: grid; gap: .55rem; margin-bottom: 2rem; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  font-weight: 600;
  color: var(--ink);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: .35rem; top: .55em;
  width: .5rem; height: .85rem;
  border: solid var(--brand);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-60%) rotate(45deg);
}

/* A quiet rule instead of a filled callout box. */
.notice {
  padding-left: 1.1rem;
  border-left: 3px solid var(--brand);
  font-size: .9375rem;
  color: var(--ink);
}

/* Second notice sits under the first, so it needs its own top margin. */
/* The recall warning has to out-rank the ordinary notice above it, so it gets
   the caution colour and a faint wash. Colour is never the only signal: the
   text says "manufacturer recalls" regardless. */
.notice--warn {
  margin-top: 1rem;
  padding: .85rem 1.1rem;
  border-left-color: var(--alert);
  background: var(--alert-tint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Trademark / affiliation note inside an FAQ answer. */
.faq__note {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--muted);
}

/* Manufacturer recall lookups. Outbound links, so each carries noopener and a
   screen-reader hint that it opens a new tab. */
/* Collapsed by default. The warning above it is always visible; only the
   lookup tools are tucked away, since they matter to three brands out of ten. */
.recall {
  margin: .85rem 0 0 1.1rem;
}
.recall summary {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--brand);
  cursor: pointer;
  list-style: none;
}
.recall summary::-webkit-details-marker { display: none; }
.recall summary:hover { color: var(--navy); }
.recall summary::after {
  content: "";
  flex: none;
  width: .45rem;
  height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--t-base) var(--ease);
}
.recall[open] summary::after { transform: translateY(25%) rotate(225deg); }
.recall__body { padding-bottom: .5rem; }

.recall-links {
  list-style: none;
  display: grid;
  gap: .75rem;
  margin: .5rem 0 1rem;
}
.recall-links li { display: grid; gap: .1rem; }
.recall-links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  justify-self: start;
}
.recall-links a:hover { color: var(--navy); }
.recall-links span { font-size: .875rem; color: var(--muted); }

.recall-note {
  font-size: .875rem;
  color: var(--muted);
}

.prose-narrow { max-width: 640px; margin-inline: auto; }

/* Service area towns. A plain list, not a map: MedEz has no public address, and
   an embedded map would pull in third-party cookies the privacy policy rules out. */
.towns-block { max-width: 840px; margin: 0 auto 2.25rem; }
.towns__title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .75rem;
}
.towns {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}
/* Soft tinted chips rather than bordered pills: readable at a glance without
   putting the outlined boxes back that the rest of the page dropped. */
.towns li {
  padding: .4rem .9rem;
  border-radius: var(--r-pill);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-tint);
}
.towns__note { font-size: .9375rem; color: var(--muted); }

.split { display: grid; gap: 2rem; max-width: 840px; margin-inline: auto; }
.split h3 { margin-bottom: .35rem; }
.split p { margin: 0; font-size: .9375rem; }
@media (min-width: 700px) {
  .split { grid-template-columns: 1fr 1fr; gap: 3rem; }
}


/* ---------- FAQ accordion ---------- */
/* Native <details>. No JavaScript, keyboard-operable and screen-reader
   announced for free. Chevron is drawn with borders so the page keeps its
   near-zero icon count. */
.faq { max-width: 760px; margin-inline: auto; }

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

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 44px;              /* touch target */
  padding: 1.15rem 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }

.faq summary::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-right: .25rem;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--t-base) var(--ease);
}
.faq details[open] summary::after { transform: translateY(25%) rotate(225deg); }

.faq__body { padding: 0 0 1.4rem; }
.faq__body p { font-size: .9375rem; }
.faq__body ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.faq__body li { font-size: .9375rem; margin-bottom: .4rem; }
.faq__body li::marker { color: var(--brand); }
.faq__body > :last-child { margin-bottom: 0; }

/* ---------- 13. Final CTA ---------- */
.final-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--navy);
}
.final-cta__inner { max-width: 660px; margin-inline: auto; position: relative; }
.final-cta p { color: #D5DCE4; }
.final-cta__actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1.75rem 0 1.1rem;
}
.final-cta__fineprint {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .9375rem;
  color: #C7D2DC;
}
@media (min-width: 620px) {
  .final-cta__actions { flex-direction: row; justify-content: center; }
  .final-cta__actions .btn { min-width: 220px; }
}

/* ---------- 14. Footer ---------- */
.footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 2rem;
  font-size: .9375rem;
}
.footer__top {
  display: grid;
  gap: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}
/* Grid children default to min-width:auto, so one long unbreakable string (the
   email address) can push the whole column wider than the viewport. At 200%
   text on a 375px screen that produced a horizontal scrollbar. */
.footer__top > * { min-width: 0; }
.footer__tag { margin-top: .75rem; max-width: 30ch; }
.footer__list { list-style: none; display: grid; gap: .1rem; }
.footer__list a,
.footer__list span {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  color: var(--body);
  text-decoration: none;
}
/* Icons sit a shade lighter than the label so the text still leads, then both
   pick up the brand colour together on hover. */
.footer__list svg { flex: none; color: var(--muted); transition: color var(--t-fast) var(--ease); }
.footer__list a:hover { color: var(--brand); }
.footer__list a:hover svg { color: var(--brand); }
/* The email address has no break opportunity of its own; allow one anywhere so
   it wraps instead of overflowing when text is scaled up. */
.footer__label { overflow-wrap: anywhere; }
.footer__list a:hover .footer__label { text-decoration: underline; text-underline-offset: 3px; }
.footer__heading {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: .35rem;
}
.footer__legal { padding-top: 1.75rem; }
.footer__disclaimer { font-size: .875rem; max-width: 78ch; }
.footer__copy { margin-top: 1rem; font-size: .875rem; color: var(--body); }

@media (min-width: 760px) {
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
}

/* ---------- 15. Mobile sticky action bar ---------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  display: flex;
  gap: .6rem;
  padding: .6rem .75rem;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 16px rgba(10, 46, 68, .08);
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease), visibility var(--t-base) var(--ease);
}
/* visibility:hidden (not just opacity) so the hidden bar leaves the tab order
   and is not announced by screen readers. */
.mobile-cta.is-hidden {
  transform: translateY(115%);
  opacity: 0;
  visibility: hidden;
}
/* Tighter metrics than the page buttons: at 375px the full label plus its icon
   only fits if the padding, gap and type size all come down a notch. */
/* One button now, so it simply fills the bar. */
.mobile-cta .btn {
  flex: 1;
  min-height: 50px;
  gap: .5rem;
  font-size: 1rem;
  /* At normal size the label and icon fit one line with room to spare. Under
     heavy text scaling they do not, and a clipped primary CTA is worse than a
     two-line one, so the label is allowed to wrap. */
  min-width: 0;
}
.mobile-cta .btn svg { width: 19px; height: 19px; }

/* Desktop uses the header, hero and final-section buttons instead. */
@media (min-width: 900px) {
  .mobile-cta { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- 16. Legal / content pages ---------- */
.page-hero {
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.page-hero p { margin-top: .5rem; }
.page-hero .updated { font-size: .9375rem; color: var(--body); }

.prose { max-width: 72ch; }
.prose h2 {
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.5rem);
  margin-top: 2.5rem;
}
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--brand); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.back-link:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 17. 404 ---------- */
.notfound {
  display: flex;
  align-items: center;
  min-height: 60vh;
  text-align: center;
  padding-block: 3rem;
}
.notfound__inner { max-width: 520px; margin-inline: auto; }
.notfound__code {
  font-size: clamp(3.5rem, 2.5rem + 5vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
  letter-spacing: -0.04em;
  margin-bottom: .5rem;
}
.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 1.75rem;
}

/* ---------- 18. Reduced motion ---------- */
/* Reduced motion means less travel, not less feedback. Colour, border and
   shadow transitions stay, so a hover or a tap still confirms itself; every
   transition that moves something across the screen is stilled. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* The sticky bar cross-fades in place instead of sliding up. */
  .mobile-cta {
    transition: opacity var(--t-base) var(--ease),
                visibility var(--t-base) var(--ease);
  }
  .mobile-cta.is-hidden { transform: none; }

  /* Chevrons snap between states. */
  .recall summary::after,
  .faq details summary::after { transition: none; }

  /* Drop the press nudge; keep the colour change that reports the press. */
  .btn {
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
  }
  .btn:active { transform: none; }

  /* Header logo holds its size. */
  .brand__mark,
  .header.is-scrolled .brand__mark { transition: none; transform: none; }
}

/* ---------- 19. Print ---------- */
@media print {
  .header,
  .mobile-cta,
  .skip-link { display: none !important; }
  body { padding-bottom: 0; color: var(--ink); }
  /* Expanded answers should print; a collapsed accordion prints as blank space. */
  details { display: block; }
  details > summary { list-style: none; }
  details .faq__body,
  details .recall__body { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}