/* =====================================================================
   01 - Design tokens
   Every color, size, radius, shadow and motion value used on the site.
   The palette, type and gradient follow the BBI Brand Guidelines (2020 guide,
   female palette) so this site matches BBI's other materials.
   ===================================================================== */
:root {
  /* Brand colors from the BBI Brand Guidelines (the female palette, which matches
     the logo in use). Hex values are the guide's. */
  --pink: #f80494;
  --light-blue: #72a6d9;
  --true-blue: #687cc4;
  --teal: #4ac0b4;
  --navy: #20144c;
  --black: #000000;
  /* Male palette from the same guide, for male-targeted pieces only */
  --purple: #a242a7;
  --male-blue: #0981bd;
  /* Pink for small text (under 19px). The brand pink is 3.8:1 on white, below the
     4.5:1 small text needs, so labels and links use this darker shade of it. */
  --pink-text: #d0037c;
  /* Tints: the brand colors at low opacity over white, for panels and washes */
  --tint-pink: #fef0f8;
  --tint-blue: #eef4fb;
  --tint-navy: #f1f0f6;

  /* Earlier token names, kept so every rule below keeps working */
  --magenta: var(--pink);
  --magenta-deep: var(--pink-text);
  --magenta-ink: var(--navy);
  --violet: var(--true-blue);
  --periwinkle: var(--true-blue);
  --indigo: var(--navy);
  --indigo-deep: var(--navy);

  /* Text: Navy for headings, Black for body copy (the guide's font colors) */
  --ink: var(--navy);
  --text: var(--black);
  --muted: rgba(32, 20, 76, .78);
  --link: var(--navy);
  --line: #dfe4ef;
  --line-strong: #b9c6e0;
  --paper: #ffffff;
  --sand: var(--tint-navy);
  --blush: var(--tint-pink);
  --lilac: var(--tint-blue);
  --white: #ffffff;
  --success: var(--teal);
  --error: #b42318;

  /* Gradient: True Blue (0%) to Pink (100%), the guide's two stops */
  --gradient-brand: linear-gradient(90deg, var(--true-blue) 0%, var(--pink) 100%);
  --gradient-brand-diag: linear-gradient(135deg, var(--true-blue) 0%, var(--pink) 100%);
  --gradient-cta: var(--gradient-brand-diag);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(29, 26, 58, .06), 0 1px 3px rgba(29, 26, 58, .08);
  --shadow-md: 0 6px 16px -4px rgba(29, 26, 58, .12), 0 2px 6px rgba(29, 26, 58, .06);
  --shadow-lg: 0 24px 48px -16px rgba(29, 26, 58, .22), 0 8px 20px -8px rgba(29, 26, 58, .1);
  --shadow-glow: 0 12px 30px -8px rgba(248, 4, 148, .4);

  /* Shape */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Type */
  /* Type: Mercenary everywhere (headlines, headers, body, bullets, footer), per the
     brand guide, served from the site's own font files; Inter, the guide's second
     face, is the fallback. */
  --font-display: 'Mercenary', 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Mercenary', 'Inter', 'Segoe UI', Arial, sans-serif;
  --step--1: clamp(.9375rem, .9rem + .2vw, 1rem);
  --step-0: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.25rem + .9vw, 1.9rem);
  --step-3: clamp(1.85rem, 1.45rem + 1.7vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.7rem + 2.7vw, 3.5rem);
  --step-5: clamp(2.6rem, 1.8rem + 3.8vw, 4.4rem);

  /* Space */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: clamp(3.5rem, 8vw, 6.5rem);
  --container: 1180px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --measure: 66ch;
  --header-h: 76px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: .45s;
}
@media (max-width: 760px) {
  :root { --header-h: 66px; }
}

/* Webfonts, self-hosted from assets/fonts (licensed by BBI). Mercenary carries the
   site; Inter is the fallback the guide names, used only if Mercenary fails to load. */
@font-face { font-family: 'Mercenary'; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/mercenary-light.woff2") format("woff2"); }
@font-face { font-family: 'Mercenary'; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/mercenary-regular.woff2") format("woff2"); }
@font-face { font-family: 'Mercenary'; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/mercenary-regular-italic.woff2") format("woff2"); }
@font-face { font-family: 'Mercenary'; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/mercenary-medium.woff2") format("woff2"); }
@font-face { font-family: 'Mercenary'; font-weight: 600 700; font-style: normal; font-display: swap; src: url("fonts/mercenary-bold.woff2") format("woff2"); }
@font-face { font-family: 'Mercenary'; font-weight: 800 900; font-style: normal; font-display: swap; src: url("fonts/mercenary-black.woff2") format("woff2"); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/inter-regular.woff2") format("woff2"); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/inter-semibold.woff2") format("woff2"); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/inter-bold.woff2") format("woff2"); }
@font-face { font-family: 'Inter'; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/inter-extrabold.woff2") format("woff2"); }

/* =====================================================================
   02 - Base: reset, typography, focus, shared primitives
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  /* Anchored sections (#quiz, #contact, #how-it-works) land exactly under the sticky
     header, so no strip of the section above shows. Headings that need breathing
     room set their own scroll-margin-top. */
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55; /* body copy 11pt on 17pt leading in the guide */
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
main:focus { outline: none; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ol, ul { padding-left: 1.25em; }

/* Headline and subheadline: Mercenary Black (38pt on 40pt and 28pt on 32pt leading);
   headers and subheaders: Mercenary Bold (16pt on 20pt, 12pt on 17pt). The web scale
   keeps those weights and leading ratios at fluid sizes. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); line-height: 1.12; }
h3 { font-size: var(--step-2); font-weight: 700; line-height: 1.25; }
h4 { font-size: var(--step-1); font-weight: 700; line-height: 1.4; }

/* Brand rule: the gradient bar the guide places under every header, .1in below the
   header and .3in above what follows */
.hero h1::after, .page-hero h1::after, .ty-card h1::after,
.section-head h2::after, .quiz-intro h2::after, .who-side h2::after, .about-grid h2::after, .legal-body h2::after {
  content: ""; display: block; height: 4px; border-radius: 2px;
  background: var(--gradient-brand); margin: .5rem 0 0;
  /* As long as the heading's longest line; site.js measures the lines and sets --rule-w */
  width: var(--rule-w, 100%); max-width: 100%;
}
.section-head.center h2::after, .ty-card h1::after { margin-inline: auto; }
.section-head h2 + .lede, .page-hero h1 + .lede, .page-hero h1 + .legal-date, .quiz-intro h2 + .lede, .ty-card h1 + .lede { margin-top: 1.25rem; }

/* Bullets: pink markers, hanging indent, as the guide's bullet settings */
li::marker { color: var(--pink); }
ol li::marker { font-weight: 700; }
p { text-wrap: pretty; }
strong { font-weight: 700; }
sup { font-size: .6em; line-height: 0; vertical-align: super; }

a { color: var(--link); text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; text-decoration-color: var(--pink); }
a:hover { color: var(--pink-text); }
:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--magenta); color: #fff; }

.skip-link {
  position: absolute; left: 1rem; top: -200px; z-index: 1000;
  background: var(--ink); color: #fff; padding: .8rem 1.1rem;
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

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

/* Layout primitives */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-pad); position: relative; }
.section-head { max-width: 780px; margin-bottom: var(--space-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lede { margin-top: var(--space-4); }
.section-actions {
  margin-top: var(--space-7);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-align: center;
}
.section-actions.start { align-items: flex-start; text-align: left; }
.center { text-align: center; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--magenta-deep);
  margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before, .eyebrow::after { content: ""; width: 1.5rem; height: 3px; border-radius: 2px; background: var(--gradient-brand); flex: none; }
.eyebrow::after { display: none; }
/* Centered labels get a dash on both sides, the right one mirrored, so the label is symmetrical */
.center .eyebrow { justify-content: center; }
.center .eyebrow::after { display: block; background: linear-gradient(90deg, var(--pink) 0%, var(--true-blue) 100%); }
/* A label centered on the heading below it, not the page: site.js gives it the heading's
   longest-line width (--rule-w); without JavaScript it centers on the page */
.center-on-heading { width: var(--rule-w, 100%); max-width: 100%; }
/* Left-aligned labels above left-aligned sections keep the dash on both sides */
.start .eyebrow::after { display: block; background: linear-gradient(90deg, var(--pink) 0%, var(--true-blue) 100%); }
.eyebrow-pill {
  display: inline-flex; width: fit-content; max-width: 100%;
  background: #fff; border: 1px solid var(--line);
  padding: .45rem .95rem .45rem .7rem; border-radius: var(--radius-pill);
  letter-spacing: .03em; text-transform: none; font-size: .875rem; color: var(--indigo);
  box-shadow: var(--shadow-sm); line-height: 1.3;
}
.eyebrow-pill::before { display: none; }
.eyebrow-pill .icon { color: var(--magenta-deep); width: 1.15rem; height: 1.15rem; }
@media (max-width: 560px) {
  .eyebrow-pill { font-size: .8rem; padding: .4rem .8rem .4rem .65rem; }
}

.lede { font-size: var(--step-1); color: var(--muted); line-height: 1.55; max-width: var(--measure); }
.lede + .lede { margin-top: var(--space-4); }
.phone-line { color: var(--muted); }
.phone-line a { font-weight: 700; }

.accent {
  background: var(--gradient-brand-diag);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .accent { background: none; color: var(--magenta-deep); }
}

/* Inline SVG icons: stroke-based, inherit text color */
.icon {
  width: 1.25em; height: 1.25em;
  stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  fill: none; flex: none; display: inline-block; vertical-align: -.22em;
}

/* Long-form text */
.prose { max-width: var(--measure); }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 1em; }
.prose h2 { font-size: var(--step-3); margin: 2.2em 0 .6em; }
.prose h3 { font-size: var(--step-1); margin: 1.6em 0 .5em; }
.prose ul { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose strong { color: var(--ink); }
.prose .learn-more { font-weight: 700; }

/* Reveal on scroll: only when JS is running and motion is allowed */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Visible placeholder for facts BBI still has to confirm */
.todo-bbi { background: #fff3cd; color: #7a5a00; padding: .1em .4em; border-radius: 4px; font-size: .9em; }

/* =====================================================================
   03 - Components: buttons, cards, badges, notices, steps, providers,
        clinics, form controls, option tiles, table of contents
   ===================================================================== */

/* Buttons: one face, weight and size everywhere (Mercenary Bold, 19px, Title Case
   labels), 52px tall minimum, pill shaped. 19px bold is large text, so white on the
   brand gradient (4.0:1 at the blue end, 3.8:1 at the pink end) meets WCAG AA. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1.1875rem; line-height: 1; letter-spacing: 0; text-transform: none;
  padding: 1rem 1.5rem; min-height: 3.25rem;
  border-radius: var(--radius-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease-out), box-shadow .2s, background-color .2s, color .2s, border-color .2s;
}
.btn .icon { width: 1.2em; height: 1.2em; vertical-align: middle; }
.btn-primary { background: var(--gradient-cta); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover, .btn-primary:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--true-blue); }
.btn-secondary:hover, .btn-secondary:focus-visible { color: var(--navy); border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--indigo); padding-inline: 1rem; }
.btn-ghost:hover { background: var(--lilac); color: var(--indigo); }
.btn-light { background: #fff; color: var(--indigo); box-shadow: var(--shadow-md); }
.btn-light:hover, .btn-light:focus-visible { color: var(--magenta-deep); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* Size each variant's background to the outer edge, so the gradient does not repeat into the
   2px transparent border strip. Placed after the variants because their background shorthand
   resets the origin. */
.btn-primary, .btn-secondary, .btn-ghost, .btn-light { background-origin: border-box; background-clip: border-box; }
.btn-lg { padding: 1.1rem 1.9rem; min-height: 3.6rem; }
.btn-sm { padding: .7rem 1.1rem; min-height: 2.75rem; }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Cards and badges */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.icon-badge {
  width: 3.5rem; height: 3.5rem; border-radius: 16px; flex: none;
  display: grid; place-items: center; background: var(--lilac); color: var(--indigo);
}
.icon-badge .icon { width: 1.7rem; height: 1.7rem; }
.icon-badge-pink { background: var(--blush); color: var(--magenta-deep); }

.notice {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.1rem 1.3rem; border-radius: var(--radius);
  background: var(--lilac); border: 1px solid var(--line);
  font-size: var(--step--1); line-height: 1.55; color: var(--text);
}
.notice > .icon { color: var(--indigo); width: 1.5rem; height: 1.5rem; margin-top: .15rem; }
.notice p { margin: 0; }

/* Numbered steps */
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.step {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-num {
  display: block; font-family: var(--font-display); font-weight: 800; font-size: 3.25rem; line-height: 1;
  background: var(--gradient-brand-diag); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: var(--space-4);
}
.step h3 { font-size: var(--step-2); margin-bottom: .4rem; }
.step p { color: var(--muted); }

/* Provider cards */
.providers-heading { text-align: center; font-size: var(--step-3); margin-bottom: var(--space-5); }
.provider-group-title {
  font-family: var(--font-body); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--magenta-deep); text-align: center; margin: var(--space-6) 0 var(--space-4);
}
/* Provider cards: clickable headshots, like the Our Providers page on the main site */
.provider-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-5) var(--space-4);
  max-width: 1080px; margin-inline: auto;
}
/* Physicians: four tiles per row on desktop, so the eight doctors fill two even rows */
@media (min-width: 900px) { .provider-grid-physicians { grid-template-columns: repeat(4, 1fr); } }
.provider-card { min-width: 0; }
.provider-link {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem;
  color: var(--ink); text-decoration: none; height: 100%;
  padding: .85rem .85rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid transparent;
  transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s, background-color .25s;
}
.provider-link:hover, .provider-link:focus-visible { background: #fff; border-color: var(--line); transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--ink); }
.provider-photo {
  display: block; width: 100%; max-width: 190px; aspect-ratio: 2 / 3; border-radius: var(--radius);
  overflow: hidden; margin-bottom: .9rem; background: var(--lilac); box-shadow: var(--shadow-sm);
  position: relative;
}
.provider-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(29, 26, 58, .08); pointer-events: none; }
.provider-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.provider-link:hover .provider-photo img { filter: saturate(1.05); }
.provider-name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.2; text-wrap: balance; }
.provider-link:hover .provider-name { color: var(--magenta-deep); }
.provider-role { display: block; color: var(--muted); font-size: var(--step--1); line-height: 1.4; margin-top: .25rem; text-wrap: balance; }
@media (max-width: 560px) {
  .provider-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3); }
  .provider-link { padding: .5rem .35rem .8rem; }
  .provider-name { font-size: 1.05rem; }
}

/* Clinic cards */
.clinic-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.clinic {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem;
  display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.1rem; align-items: start;
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.clinic:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.clinic .icon-badge { grid-row: span 4; }
.clinic h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-1); color: var(--ink); letter-spacing: 0; }
.clinic p { display: flex; gap: .55rem; align-items: flex-start; color: var(--text); }
.clinic p .icon { color: var(--periwinkle); margin-top: .22em; }
.clinic-directions { font-weight: 700; font-size: var(--step--1); display: inline-flex; align-items: center; gap: .25rem; width: fit-content; margin-top: .2rem; }

/* Form controls */
.field { display: grid; gap: .4rem; }
.field label { font-weight: 700; color: var(--ink); font-size: var(--step--1); }
.field .req { color: var(--magenta-deep); }
.input {
  width: 100%; min-height: 3.25rem; padding: .8rem 1rem;
  border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff;
  font-size: 1.0625rem; transition: border-color .2s, box-shadow .2s;
}
.input:focus { outline: none; border-color: var(--true-blue); box-shadow: 0 0 0 4px rgba(104, 124, 196, .25); }
.input:user-invalid { border-color: var(--error); }

/* Option tiles: a native radio or checkbox inside a large tappable card */
.opt-list { display: grid; gap: .6rem; }
.opt {
  position: relative; display: flex; align-items: flex-start; gap: .9rem;
  padding: .95rem 1.1rem; border: 2px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; line-height: 1.45;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.opt:hover { border-color: var(--periwinkle); }
.opt input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; accent-color: var(--magenta-deep); flex: none; cursor: pointer; }
.opt-text { flex: 1; color: var(--text); }
.opt-text strong { color: var(--ink); }
.opt-sub { color: var(--muted); }
.opt:has(input:checked) { border-color: var(--magenta-deep); background: var(--blush); box-shadow: inset 0 0 0 1px var(--magenta-deep); }
.opt:has(input:focus-visible) { outline: 3px solid var(--periwinkle); outline-offset: 2px; }

/* Table of contents (legal pages) */
.toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.toc-title { font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta-deep); margin-bottom: .75rem; }
.toc summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-left: .25rem; margin-top: -.25rem; }
.toc details[open] summary::after { transform: rotate(-135deg); margin-top: .25rem; }
@media (min-width: 961px) {
  .toc summary { pointer-events: none; }
  .toc summary::after { display: none; }
}
@media (max-width: 960px) {
  .toc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
  .toc summary { margin-bottom: 0; }
  .toc details[open] summary { margin-bottom: .75rem; }
}
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc a {
  display: block; padding: .4rem 0 .4rem .9rem; border-left: 2px solid var(--line);
  color: var(--muted); text-decoration: none; font-size: .95rem; line-height: 1.35;
}
.toc a:hover, .toc a.is-active { border-color: var(--magenta); color: var(--ink); }

@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .card { padding: var(--space-5); }
  .clinic { grid-template-columns: 1fr; }
  .clinic .icon-badge { display: none; }
}

/* =====================================================================
   04 - Layout: identity strip, header and navigation, footer,
        mobile call bar, call-to-action band
   ===================================================================== */

/* Identity strip (every page): who runs this site */
.id-strip { background: var(--indigo-deep); color: rgba(255, 255, 255, .85); font-size: .875rem; }
.id-strip-inner { display: flex; flex-wrap: wrap; gap: .2rem 1rem; justify-content: center; align-items: center; padding: .5rem 0; text-align: center; }
.id-strip a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: .2rem; }
.id-strip a .icon { width: 1em; height: 1em; }

/* Sticky header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s;
}
.site-header[data-scrolled="true"] { border-color: var(--line); box-shadow: 0 10px 30px -18px rgba(29, 26, 58, .3); }
.header-inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); }
.brand { display: block; flex: none; }
.brand img { height: 46px; width: auto; }
.primary-nav { margin-left: var(--space-3); }
.primary-nav ul { list-style: none; display: flex; gap: .15rem; padding: 0; margin: 0; }
.primary-nav a {
  display: inline-block; padding: .55rem .85rem; border-radius: var(--radius-pill);
  font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap;
}
.primary-nav a:hover { background: var(--lilac); color: var(--indigo); }
.primary-nav a[aria-current="page"] { color: var(--magenta-deep); }
.nav-secondary { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.phone-link {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--ink);
  text-decoration: none; padding: .5rem .8rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.phone-link .icon { color: var(--magenta-deep); }
.phone-link:hover { background: var(--blush); color: var(--magenta-deep); }
.nav-toggle {
  display: none; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); padding: .55rem .9rem; font-weight: 700; color: var(--ink);
}
.nav-toggle-bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle-bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .header-cta { display: none; }
}
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .phone-link span { display: none; }
  .phone-link { padding: .6rem; border: 1px solid var(--line-strong); }
  .phone-link .icon { width: 1.35rem; height: 1.35rem; }
  .primary-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--gutter) var(--space-5);
  }
  .nav-open .primary-nav { display: block; }
  .primary-nav ul { flex-direction: column; gap: .25rem; }
  .primary-nav a { display: block; padding: .85rem 1rem; font-size: 1.1rem; border-radius: var(--radius-sm); }
  .nav-secondary { display: block; }
  .nav-phone-item { margin-top: .5rem; border-top: 1px solid var(--line); padding-top: .75rem; }
  .nav-phone-item a { color: var(--magenta-deep); display: flex; align-items: center; gap: .5rem; }
}

/* Footer */
.site-footer { background: var(--indigo-deep); color: rgba(255, 255, 255, .8); position: relative; margin-top: auto; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-brand); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1.1fr .9fr 1fr; gap: var(--space-7); padding-block: var(--space-8) var(--space-6); }
.footer-brand img { height: 52px; width: auto; margin-bottom: var(--space-4); }
.footer-brand p { font-size: .95rem; line-height: 1.5; }
.footer-brand p + p { margin-top: .5rem; }
.footer-legal-name { color: #fff; font-weight: 700; }
/* Footer: BBI and the phone number in Mercenary Bold, the rest Regular (guide) */
.site-footer a[href^="tel:"] { font-weight: 700; }
.site-footer h3 { font-family: var(--font-body); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: .9rem; }
.site-footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, .35); }
.site-footer a:hover { color: var(--light-blue); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { font-size: .95rem; line-height: 1.5; }
.site-footer li + li { margin-top: .55rem; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: var(--space-6); font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .68); display: grid; gap: .8rem; }
.footer-refs-title { font-weight: 700; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: .3rem; }
.footer-refs ol { padding-left: 1.2rem; margin: 0; }
.footer-refs li { font-size: .8125rem; line-height: 1.5; }
.footer-refs li + li { margin-top: .25rem; }
.footer-copyright { font-size: .875rem; }

@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Call-to-action band before the footer */
.cta-band { background: var(--navy); color: #fff; border-top: 4px solid; border-image: var(--gradient-brand) 1; padding-block: var(--space-7); text-align: center; }
.cta-band-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.cta-band-text { font-size: var(--step-1); color: rgba(255, 255, 255, .9); line-height: 1.35; }
.phone-big { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); color: #fff; text-decoration: none; margin: .25rem 0; letter-spacing: -.01em; }
.phone-big:hover { color: var(--light-blue); }

/* Mobile call bar (phones only) */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 4.9rem; }
  .mobile-bar {
    display: grid; grid-template-columns: auto 1fr; gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    transition: transform .3s var(--ease-out);
  }
  .mobile-bar .btn { min-height: 3rem; padding-inline: 1.1rem; }
  .mobile-bar.is-hidden { transform: translateY(110%); }
}

/* =====================================================================
   05 - Home page sections: hero, how it works, stats, why BBI,
        who we are, locations
   ===================================================================== */

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem); background: var(--paper); }
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 55% at 85% 8%, var(--lilac) 0%, transparent 65%),
    radial-gradient(45% 50% at 8% 95%, var(--blush) 0%, transparent 65%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .6; mix-blend-mode: multiply; }
.orb-1 { width: 560px; height: 560px; right: -140px; top: -160px; background: radial-gradient(circle at 35% 35%, #cfd6f0 0%, transparent 65%); }
.orb-2 { width: 460px; height: 460px; right: 16%; bottom: -220px; background: radial-gradient(circle, #fdcbe7 0%, transparent 65%); }
.orb-3 { width: 340px; height: 340px; left: -120px; top: 28%; background: radial-gradient(circle, #d4e4f4 0%, transparent 65%); }
@media (prefers-reduced-motion: no-preference) {
  .orb { animation: drift 20s ease-in-out infinite alternate; }
  .orb-2 { animation-duration: 26s; animation-delay: -6s; }
  .orb-3 { animation-duration: 23s; animation-delay: -12s; }
}
@keyframes drift { to { transform: translate(-36px, 24px) scale(1.08); } }

.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
/* Headline runs about 20 characters per line, so it stacks in four lines, not seven */
.hero h1 { font-size: var(--step-5); margin: var(--space-5) 0 var(--space-5); max-width: 21ch; }
.hero h1 .accent { display: block; margin-top: .1em; }
.hero .lede { max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0; }
.hero-trust { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: var(--step--1); color: var(--text); }
.hero-trust li { display: flex; gap: .6rem; align-items: flex-start; }
.hero-trust .icon { color: var(--success); width: 1.4em; height: 1.4em; margin-top: .05em; }

.hero-visual { position: relative; justify-self: center; width: min(100%, 460px); }
.hero-arch {
  position: relative; aspect-ratio: 437 / 475;
  border-radius: 230px 230px 40px 40px;
  /* The park path from the original site, cropped to the arch (assets/images/hero-bg.jpg, 71 KB), behind the couple */
  background: url(images/hero-bg.jpg) center / cover no-repeat, linear-gradient(180deg, var(--lilac) 0%, var(--blush) 100%);
  overflow: hidden; box-shadow: var(--shadow-lg);
  isolation: isolate; /* keeps the photo, wash and ring layers inside the arch, so the cards always float above it */
}
/* Soft light wash so the photo sits with the page and the cards on it stay legible */
.hero-arch::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .22) 100%);
}
.hero-arch::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 4px;
  background: var(--gradient-brand-diag);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; pointer-events: none; z-index: 2;
}
.hero-arch img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero-chip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: .75rem; max-width: 240px;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem;
  box-shadow: var(--shadow-md); font-size: .9rem; line-height: 1.3; color: var(--muted);
}
.hero-chip strong { display: block; color: var(--ink); margin-bottom: .1rem; }
.hero-chip .icon { color: var(--magenta-deep); width: 1.6rem; height: 1.6rem; }
/* Both cards sit inside the arch, over the lower part of the photo, never past its edge */
.hero-chip-1 { left: 5%; top: 55%; }
.hero-chip-2 { right: 5%; bottom: 6%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-chip { animation: float 7s ease-in-out infinite; }
  .hero-chip-2 { animation-delay: -3.5s; }
}
@keyframes float { 50% { transform: translateY(-8px); } }

/* How it works */
.try-first { background: #fff; }
.try-first .cost-note { margin: var(--space-7) auto 0; max-width: 860px; }

/* Stats band */
.stats { background: var(--indigo-deep); color: #fff; padding-block: var(--space-8); position: relative; overflow: hidden; }
.stats::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(45% 70% at 12% 50%, rgba(104, 124, 196, .45) 0%, transparent 70%),
    radial-gradient(45% 70% at 88% 50%, rgba(248, 4, 148, .3) 0%, transparent 70%);
}
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); text-align: center; }
.stat-big {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-5); line-height: 1; letter-spacing: 0;
  background: linear-gradient(90deg, var(--light-blue) 0%, var(--pink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-desc { margin-top: .6rem; color: rgba(255, 255, 255, .88); font-size: var(--step-0); max-width: 26ch; margin-inline: auto; }
.stat-desc a { color: var(--light-blue); text-decoration: none; }

/* Why BBI */
.why { background: var(--sand); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.why-card h3 { font-size: var(--step-1); margin: var(--space-5) 0 .45rem; }
.why-card p { color: var(--muted); }

/* Who we are */
.who-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: var(--space-8); align-items: start; margin-bottom: var(--space-8); }
.who-side { position: sticky; top: calc(var(--header-h) + 24px); }
.who-side h2 { font-size: var(--step-3); }
.who-facts { list-style: none; padding: 0; margin-top: var(--space-6); display: grid; gap: var(--space-5); }
.who-fact { padding-left: 1.1rem; border-left: 3px solid var(--magenta); }
.who-fact strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); color: var(--ink); line-height: 1; margin-bottom: .25rem; }
.who-fact span { color: var(--muted); font-size: var(--step--1); line-height: 1.4; display: block; max-width: 28ch; }
.who-body { max-width: none; font-size: var(--step-0); }

/* Locations */
.locations { background: #fff; }
.locations-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-7); align-items: center; }
.locations-map { background: var(--lilac); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; place-items: center; }
.locations-map img { width: min(100%, 360px); }
.locations-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-7); }

/* On desktop the hero fills the first screen (viewport minus the identity strip and header),
   with its content centered vertically, so the next section starts below the fold */
@media (min-width: 1101px) {
  .hero {
    min-height: calc(100vh - var(--header-h) - 2.6rem);
    min-height: calc(100svh - var(--header-h) - 2.6rem);
    display: flex; flex-direction: column; justify-content: center;
  }
}
/* The other home page sections also fill a screen each on desktop (the viewport below the
   sticky header), content centered; sections taller than a screen keep their natural height */
@media (min-width: 1101px) {
  .section.try-first, .section.why, .section.who, .section.quiz-section, .section.locations {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex; flex-direction: column; justify-content: center;
  }
}
/* Short desktop screens (most laptops): tighter spacing and a slightly smaller headline so
   the whole hero, buttons and trust points included, fits above the fold */
@media (min-width: 1101px) and (max-height: 880px) {
  .hero { padding-block: 1.25rem 1.5rem; }
  .hero h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); margin: var(--space-4) 0; }
  .hero-actions { margin: var(--space-5) 0; }
  .hero-trust { gap: .4rem; }
  .hero-visual { width: min(100%, 400px); }
}

/* Below 1100px the hero copy column gets too narrow for the headline, so the photo moves under the copy */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
  .hero-visual { width: min(100%, 420px); margin-top: var(--space-4); }
  .hero-chip-1 { left: 4%; top: 55%; }
  .hero-chip-2 { right: 4%; bottom: 5%; }
}
@media (max-width: 960px) {
  .stats-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .why-grid { grid-template-columns: 1fr; }
  .who-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .who-side { position: static; }
  .who-facts { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .locations-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero-visual { width: 100%; }
  .hero-arch { border-radius: 160px 160px 28px 28px; }
  .hero-chips { display: grid; gap: .6rem; margin-top: var(--space-4); }
  .hero-chip { position: static; max-width: none; animation: none; }
  .who-facts { grid-template-columns: 1fr; }
}

/* =====================================================================
   06 - Questionnaire
   ===================================================================== */
.quiz-section { background: linear-gradient(180deg, var(--sand) 0%, var(--blush) 100%); }
.quiz-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-8); align-items: start; }
.quiz-intro { position: sticky; top: calc(var(--header-h) + 24px); }
.quiz-intro h2 { font-size: var(--step-4); }
.quiz-intro .lede { margin-top: var(--space-4); }
.quiz-intro .cta-line { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--pink-text); margin-top: var(--space-6); line-height: 1.25; }
.quiz-aside { margin-top: var(--space-6); display: grid; gap: .75rem; }
.quiz-aside .notice { background: rgba(255, 255, 255, .8); }

.quiz-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; }
.quiz-card-head {
  padding: 1.2rem 1.75rem; border-bottom: 1px solid var(--line); background: var(--paper);
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
}
.q-label { font-weight: 700; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); white-space: nowrap; }
.progress-track { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--gradient-brand); border-radius: 5px; transition: width .45s var(--ease-out); }
.q-pct { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.quiz-card-body { padding: 1.75rem; }
.quiz-note { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--step--1); color: var(--muted); margin-bottom: var(--space-5); line-height: 1.5; }
.quiz-note .icon { color: var(--indigo); margin-top: .15em; width: 1.4em; height: 1.4em; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--ink);
  line-height: 1.2; margin-bottom: var(--space-4); padding: 0; letter-spacing: -.01em;
}
legend:focus { outline: none; }
legend .hint { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--muted); margin-top: .5rem; line-height: 1.5; letter-spacing: 0; }

.btn-wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.btn-wrap .btn-next { margin-left: auto; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-grid .full { grid-column: 1 / -1; }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.consent {
  margin-top: var(--space-5); display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.1rem; background: var(--lilac); border-radius: var(--radius);
  font-size: .9375rem; line-height: 1.5; color: var(--text); cursor: pointer;
}
.consent input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; accent-color: var(--magenta-deep); flex: none; }
.quiz-privacy-note { margin-top: var(--space-4); font-size: .875rem; color: var(--muted); display: flex; gap: .5rem; align-items: flex-start; line-height: 1.45; }
.quiz-privacy-note .icon { margin-top: .15em; }

@media (max-width: 960px) {
  .quiz-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .quiz-intro { position: static; }
}
@media (max-width: 560px) {
  .quiz-card { border-radius: var(--radius); }
  .quiz-card-head { padding: 1rem; grid-template-columns: auto 1fr auto; }
  .quiz-card-body { padding: 1.1rem 1rem 1.25rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .btn-wrap { flex-direction: column-reverse; align-items: stretch; }
  .btn-wrap .btn { width: 100%; margin: 0; }
}

/* =====================================================================
   07 - Inner pages: about, legal (privacy, terms), thank-you
   ===================================================================== */

/* Page hero (about, legal) */
.page-hero {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(60% 90% at 90% 0%, var(--lilac) 0%, transparent 60%),
    radial-gradient(50% 70% at 0% 100%, var(--blush) 0%, transparent 60%),
    var(--paper);
}
.page-hero h1 { max-width: 20ch; }
#about-title { max-width: none; text-align: center; } /* About headline: full width, centered */
#about-title::after { margin-inline: auto; }
.page-hero-compact { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-hero .h-sub { font-size: var(--step-2); margin-top: var(--space-7); }
.legal-date { color: var(--muted); font-size: var(--step--1); margin-top: var(--space-4); }

/* About */
.about-questions { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: .75rem; max-width: 800px; }
.about-questions li {
  display: flex; gap: .9rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem;
  color: var(--ink); font-size: var(--step-0); line-height: 1.5; box-shadow: var(--shadow-sm);
}
.about-questions .icon { color: var(--magenta-deep); width: 1.5em; height: 1.5em; margin-top: .05em; }
.about-section { padding-block: var(--space-8); }
.about-section + .about-section { border-top: 1px solid var(--line); }
.about-focus { background: #fff; }
.about-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--space-7); align-items: start; }
.about-grid h2 { font-size: var(--step-3); position: sticky; top: calc(var(--header-h) + 24px); }
.about-grid .prose { max-width: 70ch; }
/* Stacked About sections: centered label, full-width heading with the brand rule, then the copy */
.about-stack h2 { font-size: var(--step-4); }
.about-stack h2::after { content: ""; display: block; width: var(--rule-w, 100%); max-width: 100%; height: 4px; border-radius: 2px; background: var(--gradient-brand); margin: .5rem 0 0; }
.about-stack .prose { max-width: 800px; margin-top: var(--space-6); }
.about-focus .providers-wrap { margin-top: var(--space-8); }
.about-closer { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--pink-text); }
.about-closing .section-actions { margin-top: var(--space-6); }
/* Closing section: heading, closer line and call to action on the left; the copy on the right */
.about-closing-label { grid-column: 1 / -1; margin-bottom: var(--space-2); }
.about-closing-side h2 { position: static; margin-bottom: var(--space-5); }
/* Closer line: sized to fit its column on one line at every width */
.about-closing-side .about-closer { margin-bottom: 0; white-space: nowrap; font-size: clamp(1.1rem, .3rem + 1.5vw, 1.6rem); }
.about-closing .prose .phone-line { margin-top: var(--space-5); }

/* About page: every section centered at one consistent width (CEO feedback, Oct 27) */
.page-about .page-hero .h-sub { text-align: center; }
.page-about .about-questions { margin-inline: auto; }
.page-about .about-questions li { justify-content: center; text-align: center; }
.page-about .about-stack { text-align: center; }
.page-about .about-stack h2::after { margin-inline: auto; }
.page-about .about-stack .prose { margin-inline: auto; max-width: 800px; }
.page-about .center-on-heading { margin-inline: auto; }

/* Legal pages */
.legal-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-7) var(--space-9); }
.legal-body { max-width: 72ch; }
.legal-body h2 { scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body .privacy-contact { list-style: none; padding: 0; }
.legal-body .privacy-contact li + li { margin-top: .3em; }

/* Thank-you */
.ty-main { padding-block: clamp(3rem, 8vw, 7rem); background: radial-gradient(60% 60% at 50% 0%, var(--lilac) 0%, transparent 70%), var(--paper); }
.ty-card { max-width: 680px; margin-inline: auto; text-align: center; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem); }
.ty-check { width: 5rem; height: 5rem; border-radius: 50%; background: var(--gradient-brand-diag); color: #fff; display: grid; place-items: center; margin: 0 auto var(--space-5); box-shadow: var(--shadow-glow); }
.ty-check .icon { width: 2.6rem; height: 2.6rem; stroke-width: 2.5; }
.ty-card .lede { margin: var(--space-4) auto 0; }
.ty-actions { margin-top: var(--space-6); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }

@media (max-width: 960px) {
  .legal-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .toc { position: static; }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .about-grid h2 { position: static; }
}