/* Kleron — early access landing page.
   Tokens below are the current visual system. DESIGN.md documents them. */

:root {
  --color-teal-deep: #0b2b30;   /* dark section bg + heading text on light bg (dual role) */
  --color-teal-deep-hover: #082024; /* .btn--primary hover state — one step darker than teal-deep */
  --color-bg-cream: #fdfbf7;    /* near-white bg */
  --color-bg-warm: #f5efea;     /* warm beige bg — hero image surround, packages, final-CTA surround */
  --color-text-muted: #4b6163;  /* body/secondary text on light backgrounds */
  --color-teal-mid: #1d5c60;    /* icon bg, FAQ borders, pricing bar bg */
  --color-teal-mid-30: rgba(29, 92, 96, 0.3);
  --color-mint: #ebf3f4;        /* checkmark bg, small body text on dark sections */
  --color-warm-gray: #e0d9d4;   /* trust-card icon bg */
  --color-border-teal: #d1e0e2; /* footer top border */
  --color-badge: #ffa56a;
  --color-badge-text: #4e0f10;
  --color-white: #ffffff;
  --color-danger: #8a3b2a;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-sm: 4px;
  --radius-md: 16px;
  --radius-icon-sq: 24px;
  --radius-icon-circle: 28px;
  --radius-card: 32px;
  --radius-card-lg: 48px;
  --radius-pill: 9999px;
  --radius-hero-image: 64px;
  --radius-arch-top: 220px;

  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-wordmark: "Neuton", Georgia, serif;
  --fvs-display: "SOFT" 0, "WONK" 1;

  --measure: 65ch;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-teal-deep);
  background: var(--color-bg-cream);
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-variation-settings: var(--fvs-display);
  color: var(--color-teal-deep);
}
h1 { line-height: 1.15; }
h2 { line-height: 1.2; }
h3 { line-height: 1.3; font-weight: 600; }

h1 { font-size: 32px; font-weight: 400; }
h2 { font-size: 28px; font-weight: 400; }
h3 { font-size: 20px; }

p { margin: 0 0 var(--space-4); }

a { color: var(--color-teal-deep); }

/* In-page anchor targets (hero's secondary CTA, footer's Pricing/FAQs links) shouldn't
   land flush under the sticky header. */
main h2[id] { scroll-margin-top: var(--space-16); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.section {
  padding: var(--space-16) 0;
  background: var(--color-bg-cream);
}

.section--warm { background: var(--color-bg-warm); }
.section--dark { background: var(--color-teal-deep); color: var(--color-mint); }
.section--dark h2, .section--dark h3 { color: var(--color-white); }
.section--dark p { color: var(--color-mint); }

.section__narrow { max-width: 640px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-teal-deep);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  z-index: 200;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* Header */

.site-header {
  background: var(--color-bg-cream);
  position: sticky;
  top: 0;
  z-index: 90;
}

.wrap.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 300;
  font-size: 28px;
  color: var(--color-teal-deep);
}

/* Buttons */

.btn {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-7);
  border-radius: var(--radius-pill);
  border: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out-quart), opacity 160ms var(--ease-out-quart);
}

.btn--primary {
  background: var(--color-teal-deep);
  color: var(--color-bg-cream);
}
.btn--primary:hover { background: var(--color-teal-deep-hover); }

/* Vertical rhythm for CTAs sitting directly in text flow (hero, stats, packages
   footer, final CTA). Header, sticky bar, and dialog buttons live in their own
   structurally-controlled containers and keep their existing spacing. */
.btn--primary:not(.btn--header):not(.btn--full) {
  margin: var(--space-6) 0;
}
.btn--primary:focus-visible { outline: 2px solid var(--color-teal-deep); outline-offset: 2px; }

.btn--secondary {
  background: transparent;
  color: var(--color-teal-deep);
  border: 1px solid var(--color-teal-deep);
}
.btn--secondary:hover { background: rgba(11, 43, 48, 0.06); }
.btn--secondary:focus-visible { outline: 2px solid var(--color-teal-deep); outline-offset: 2px; }

/* On-dark variant: white pill with teal-mid text/arrow, used inside the pricing bar
   (a #1d5c60 fill) where the standard primary button would disappear. */
.btn--on-mid {
  background: var(--color-bg-cream);
  color: var(--color-teal-mid);
}
.btn--on-mid:hover { background: var(--color-white); }

.btn__arrow { flex-shrink: 0; }

.btn--header { padding: var(--space-4) var(--space-6); font-size: 14px; }
.btn--large { min-height: 52px; padding: var(--space-4) var(--space-8); font-size: 16px; }
.btn--full { width: 100%; }

/* Dim via a solid muted fill, not opacity — opacity would drag the white label's
   contrast down with the fill (2.79:1, fails AA). Solid fill keeps the label at 4.5:1+. */
.btn--primary:disabled {
  background: var(--color-text-muted);
  cursor: not-allowed;
}

/* Hero */

.hero { padding-top: var(--space-4); background: var(--color-bg-cream); }

.hero__badge {
  display: inline-block;
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-badge);
  color: var(--color-badge-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.hero__cta-group .btn { margin: 0; }

/* padding-top/bottom only, never the shorthand — .wrap.hero__grid's higher
   specificity means a `padding: X 0 Y` shorthand here silently zeroes the
   side padding .wrap sets, running the hero content edge-to-edge. Has broken twice
   already, so leave the longhand alone. */
.wrap.hero__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.hero__heading { font-size: 32px; }

.hero__sub {
  font-size: 17px;
  color: var(--color-text-muted);
  max-width: var(--measure);
}

.hero__image {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-hero-image);
  overflow: hidden;
  background: var(--color-bg-warm);
}

.hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
}

.final-cta__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.final-cta__image {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-arch-top) var(--radius-arch-top) var(--space-12) var(--space-12);
  overflow: hidden;
  background: var(--color-bg-warm);
}

.final-cta__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reassurance-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-teal-deep);
}

.reassurance-row li { display: flex; align-items: center; gap: var(--space-2); }

.reassurance-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-mint);
}

/* Stats / awareness split — two independently-padded full-bleed halves, not a
   shared max-width .wrap. This section breaks the otherwise-universal
   .wrap pattern deliberately. */

.section.stats {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 0;
}

.stats__half {
  padding: var(--space-12) var(--space-4);
}

/* Mobile-only outer/inner asymmetry: the outer edges of the stacked split
   (top of --left, bottom of --right) grow independently of the inner seam
   where the two halves meet, which stays at the shared --space-12. Reset to
   symmetric by the plain .stats__half padding shorthand at the 768px
   breakpoint below (same specificity, later in source order — deliberate). */
.stats__half--left { padding-top: var(--space-16); }
.stats__half--right { padding-bottom: var(--space-16); }

.stats__half--left {
  background: var(--color-bg-cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
}

.stats__half--right {
  background: var(--color-teal-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stats__heading { font-size: 26px; }

.stats__body { color: var(--color-text-muted); }

.stats__figure {
  font-family: var(--font-serif);
  font-variation-settings: var(--fvs-display);
  font-weight: 700;
  color: var(--color-white);
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.stats__caption {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-mint);
}
/* Footnote reference for the Medicare note. One class for all four call sites, because
   they sit on three different backgrounds: cream (package card), teal-mid (pricing bar)
   and teal-deep (FAQ). The global `a { color: teal-deep }` made it near-invisible on the
   two dark ones, and the browser's default underline turned the asterisk into a smudge.
   `color: inherit` fixes both. Not wrapped in <sup>: an asterisk is already a raised
   glyph, and <sup> on top of it dropped it to roughly 8px. */
.note-ref {
  color: inherit;
  text-decoration: none;
  vertical-align: super;
  font-size: 0.7em;
  line-height: 0;
  margin-left: 1px;
  /* Hit area without shifting the sentence it sits in. Note that `line-height: 0` above
     collapses the content box, so the target height is the padding alone: 12+12 = 24px,
     which is the WCAG 2.2 SC 2.5.8 (AA) minimum. It is NOT 44px and cannot be inline
     without pushing the sentence around. Width stays ~17px, under the 24px minimum, which
     is acceptable here only via 2.5.8's spacing exception: these asterisks sit at the end
     of a clause with no other target within a 24px circle. Adding an adjacent link near
     one would break that, so check the exception still holds before moving them. */
  display: inline-block;
  padding: 12px 6px;
  margin-top: -12px;
  margin-bottom: -12px;
}
.note-ref:hover { opacity: 0.7; }
.note-ref:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

.stats__caption sup { font-size: 0.6em; }
.stats__caption sup a {
  display: inline-block;
  color: inherit;
  /* This numeral is 0.6em of an already-small caption. The pad brings the measured target
     to about 16x35px: height clears the WCAG 2.2 SC 2.5.8 (AA) 24px minimum, width does
     not, and relies on the same spacing exception as .note-ref above. Full 44px is not
     achievable inline without disrupting the sentence. */
  padding: 10px 6px;
  margin: -10px -6px;
}

/* Screening packages (Standard / Extended) */

.packages__heading { margin-bottom: var(--space-6); }

.packages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.package-card {
  background: var(--color-white);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
}

/* The product photos have a near-white studio backdrop that was blending
   invisibly into the page's warm-beige section background — no visible card
   edge above the text. Padding here lets the card's own white background
   show through as a frame around the photo, rather than running the image
   edge to edge. */
.package-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: var(--space-4);
}

.package-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.package-card__body {
  padding: var(--space-8);
}

.package-card h3 { font-weight: 700; font-size: 22px; margin-bottom: var(--space-2); }
.package-card__desc { font-size: 15px; color: var(--color-text-muted); margin-bottom: var(--space-4); }

.package-card__divider {
  border: none;
  border-top: 1px solid var(--color-border-teal);
  margin: 0 0 var(--space-3);
}

.package-card__who-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-teal-mid);
  margin-bottom: var(--space-2);
}

.package-card__who-text { font-size: 15px; margin: 0; }

/* What's included (dark section) */

.included__heading { color: var(--color-white); }

.included-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin: var(--space-8) 0;
}

.included-card { padding: var(--space-6); }

.included-card h3 { font-size: 18px; margin-bottom: var(--space-2); }
.included-card p { font-size: 15px; color: var(--color-mint); margin: 0; }

.included-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-icon-sq);
  background: var(--color-teal-mid);
  margin-bottom: var(--space-6);
}

.included-tile img { display: block; width: 24px; height: 24px; }

.included-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}

/* How it will work (step cards) */

/* flex + flex-grow rather than a fixed grid-template-columns count: with 5 cards,
   any fixed column count that doesn't divide evenly into 5 (i.e. any count except
   1 or 5) leaves a dangling gap in the last row. Growing items close that gap at
   every width instead of only being correct at the two breakpoints where the
   column count happens to divide evenly. */
.step-grid {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.step-card {
  flex: 1 1 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border-teal);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.step-card__image {
  display: block;
  height: 180px;
  background: var(--color-bg-warm);
}

.step-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-card__body {
  padding: var(--space-6) var(--space-6) var(--space-7);
}

.step-card__num {
  font-family: var(--font-serif);
  font-variation-settings: var(--fvs-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-teal-deep);
  margin-bottom: var(--space-2);
}

.step-card__title {
  font-family: var(--font-serif);
  font-variation-settings: var(--fvs-display);
  font-size: 18px;
  color: var(--color-teal-deep);
}

/* Why trust this (warm section) */

.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

.trust-card { padding: var(--space-6); }

.trust-card h3 { font-size: 20px; }
.trust-card p { font-size: 15px; color: var(--color-text-muted); margin: 0; }

.trust-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-icon-circle);
  background: var(--color-warm-gray);
  margin-bottom: var(--space-5);
}

.trust-tile img { display: block; width: 24px; height: 24px; }

.faq {
  border-radius: 0 0 var(--space-16) var(--space-16);
}

/* Accordion (FAQ) */

/* Questions group column-major (first half stacked in column one, the
   rest in column two) rather than alternating row-major — grid-auto-flow:column
   with an explicit row count reproduces that without restructuring the HTML.
   7 items / 2 cols = 4 rows; update the row count if the question count changes. */
.accordion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-12);
}

.accordion__item {
  border-bottom: 1px solid var(--color-teal-mid);
}

.accordion__heading { margin: 0; }

.accordion__trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-white);
  padding: var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  cursor: pointer;
  min-height: 48px;
}

.accordion__trigger:focus-visible {
  outline: 2px solid var(--color-mint);
  outline-offset: 2px;
}

.accordion__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-teal-mid-30);
  color: var(--color-white);
}

.accordion__icon img {
  display: block;
  width: 14px;
  height: 14px;
  transition: transform 200ms var(--ease-out-quart);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon img {
  transform: rotate(45deg);
}

.accordion__panel {
  padding: 0 var(--space-12) var(--space-5) 0;
}
.accordion__panel p { margin: 0; font-size: 15px; color: var(--color-mint); }

/* Final CTA */

.section--final {
  background: var(--color-bg-cream);
}

/* Footer */

.site-footer {
  background: var(--color-bg-cream);
}

.fine-print {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* NEJM stat citation. Lives here rather than under the stats split; the
   in-page "1" superscript link in that section jumps to this exact anchor. */
.footer-citation {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
}
.footer-citation a {
  display: inline-block;
  color: inherit;
  padding: 11px 0;
  margin: -11px 0;
}

/* padding-top/bottom only — same clobbering trap as .wrap.hero__grid above:
   a shorthand `padding: X 0 Y` here would zero .wrap's side padding and run
   the footer edge-to-edge. */
.wrap.site-footer__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.site-footer__wordmark {
  font-family: var(--font-wordmark);
  font-weight: 300;
  font-size: 28px;
  color: var(--color-teal-deep);
  margin: 0 0 var(--space-3);
}

.site-footer__tagline {
  color: var(--color-text-muted);
  font-size: 14px;
  max-width: 280px;
  margin: 0;
}

.site-footer__col h3 {
  font-family: var(--font-sans);
  font-variation-settings: normal;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-teal-deep);
  margin: 0 0 var(--space-3);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__col a {
  display: inline-block;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 14px;
  /* Padding + matching negative margin grows the tap target to ~44px without
     changing the visible gap between links — the hit area extends into the
     list's own gap instead of adding visual space. */
  padding: 11px 0;
  margin: -11px 0;
}
.site-footer__col a:hover { text-decoration: underline; }
.site-footer__col a:focus-visible {
  outline: 2px solid var(--color-teal-deep);
  outline-offset: 2px;
}

.wrap.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--color-border-teal);
}

@media (min-width: 768px) {
  .wrap.site-footer__grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .site-footer__brand { flex: 0 0 100%; margin-bottom: var(--space-4); }
  .wrap.site-footer__bottom { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 1024px) {
  .wrap.site-footer__grid { flex-wrap: nowrap; }
  .site-footer__brand { flex: 1 1 280px; margin-bottom: 0; }
  .site-footer__col { flex: 0 0 auto; }
}

/* Sticky mobile CTA */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-warm);
  border-top: 1px solid rgba(11, 43, 48, 0.12);
  z-index: 50;
}

/* Dialog / form */

.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 43, 48, 0.4);
  display: flex;
  align-items: flex-end;
  z-index: 100;
}
.dialog-overlay[hidden] { display: none; }

.dialog {
  position: relative;
  background: var(--color-white);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--space-6) var(--space-6) 0 0;
  padding: var(--space-8) var(--space-4) var(--space-12);
}

.dialog__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-teal-deep);
  min-width: 44px;
  min-height: 44px;
}
.dialog__close:focus-visible { outline: 2px solid var(--color-teal-deep); outline-offset: 2px; }

.dialog__wordmark {
  font-family: var(--font-wordmark);
  font-weight: 300;
  font-size: 22px;
  text-align: center;
  margin: 0 0 var(--space-6);
}

.dialog__heading { text-align: center; }

.dialog__intro { font-size: 14px; color: var(--color-text-muted); text-align: center; }

[data-success-view] { text-align: center; }

.field { margin-bottom: var(--space-4); }

.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.field input,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: 16px;
  color: var(--color-teal-deep);
  background: var(--color-white);
  border: 1px solid rgba(11, 43, 48, 0.4);
  border-radius: var(--radius-sm);
}

.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--color-teal-deep);
  outline-offset: 1px;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger);
}

/* Motion */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--ease-out-quart), transform 400ms var(--ease-out-quart);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn, .accordion__icon img {
    transition: none;
  }
}

/* ============ Mobile only (<768px) ============ */

@media (max-width: 767px) {
  .hero__content {
    text-align: center;
  }
  .hero__cta-group {
    flex-direction: column;
    align-items: center;
  }
  .hero__content .btn {
    margin: 0 auto;
  }
  .reassurance-row {
    align-items: flex-start;
    text-align: left;
  }

  .package-card__body { padding: var(--space-6); }
  .package-card__image { aspect-ratio: 16 / 10; }

  .accordion { gap: 0; }
}

/* ============ Tablet (>=768px) ============ */

@media (min-width: 768px) {
  .wrap { padding: 0 var(--space-8); }
  .stats__half { padding: var(--space-16) var(--space-8); }

  h1 { font-size: 40px; }
  h2 { font-size: 34px; }

  .section { padding: var(--space-24) 0; }

  .hero__heading { font-size: 40px; }

  .stats__figure { font-size: 44px; }

  .packages-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }

  .included-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-12); }
  .included-card { padding: var(--space-8); }

  /* Four cards, so two-up rather than a 3+1 orphan. */
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-card { padding: var(--space-8); }

  .final-cta__grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
  }
  .final-cta__grid .section__narrow { flex: 1; }
  .final-cta__image { flex: 1; }

  .step-grid { gap: var(--space-6); }
  /* Two-up, not three. The grid was built for five cards and now holds four; a
     three-column basis leaves one card alone on a second row stretched to full width. */
  .step-card { flex: 1 1 calc(50% - var(--space-6) / 2); }
  .step-card__image { height: 160px; }

  .accordion {
    grid-template-columns: 1fr 1fr;
    /* Six rows, not four: the FAQ holds twelve questions. With column auto-flow
       the row count has to match, or the twelve spill into a third column. */
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
  }

  .dialog-overlay { align-items: center; justify-content: center; padding: var(--space-8); }
  .dialog {
    max-width: 520px;
    border-radius: var(--space-6);
    max-height: 85vh;
  }

  .sticky-cta { display: none; }
}

/* ============ Small laptop / large tablet (>=900px) ============
   Hero and stats are the two sections with a large image or dark block that
   scales with viewport width while stacked — left stacked all the way to
   1024px, that block gets disproportionately tall (measured ~1880px hero at
   1023px wide). They get their own earlier, content-driven row-layout switch
   here rather than inheriting the shared 1024px desktop breakpoint. */

@media (min-width: 900px) {
  .wrap.hero__grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
  }
  .hero__content { flex: 1; }
  .hero__image {
    flex: 0 0 42%;
    aspect-ratio: 1 / 1.05;
  }

  .section.stats { flex-direction: row; }
  .stats__half { flex: 1; padding: var(--space-16) var(--space-8); }
}

/* ============ Desktop (>=1024px) ============ */

@media (min-width: 1024px) {
  h1 { font-size: 48px; line-height: 1.15; }
  h2 { font-size: 40px; line-height: 1.2; }

  .wrap.hero__grid {
    gap: var(--space-16);
    padding-top: var(--space-12);
    padding-bottom: var(--space-14);
  }
  .hero__image {
    flex: 0 0 45%;
    aspect-ratio: 1 / 0.96;
  }

  .stats__half { padding: var(--space-20); }
  .stats__heading { font-size: 36px; }
  .stats__figure { font-size: 56px; }
  .stats__caption { font-size: 20px; }

  .step-grid { gap: var(--space-6); }
  /* Four across on one row, matching the four steps. Was 20% for five. */
  .step-card { flex: 1 1 calc(25% - var(--space-6) * 3 / 4); }
  .step-card__image { height: 200px; }
}