/* MFI Radiology – reference design theme for every landing and thank-you page (26 Sep 2026; first trialled on Funnel 1).
   Visual language of the reference page (https://d3g0wfw6aeva8o.cloudfront.net/, brand tokens "D4.1 Rev 2":
   aperture / ink-red / clinical-precision). Styling only: content, structure and behaviour are unchanged,
   all buttons stay red and the hero image is the existing one.
   SOURCE OF TRUTH: shared/assets/css/theme.css (copied into each funnel by tools/sync-shared.py). Loaded after site.css and
   page.css by pages that opt in with <html data-theme="reference">; every rule is scoped to that attribute.
   Section ids: form = #register (F1, F2) / #guide (F3); light cards = #services; dark band = #benefits (F1, F2) / #prepare (F3). */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/source-sans-3-var-latin.woff2') format('woff2'); }

[data-theme="reference"] {
  --cloud: #F4F7F9;      /* page ground */
  --cloud2: #E8EDF1;     /* raised panels */
  --ink: #1C242A;        /* primary text / dark bands */
  --ink2: #42505E;       /* secondary text */
  --red: #CC2027;        /* accent (buttons stay red) */
  --red-deep: #A31920;   /* pressed / hover */
  --mute: #56626C;       /* labels (reference #7E8A94 darkened to 4.5:1 on the cloud ground) */
  --hair: #D7DBDE;       /* hairlines */
  --field: #7E8A94;      /* input borders (3.4:1, WCAG non-text contrast) */
  --band-text: #B8C4CD;
  --display: 'Manrope', sans-serif;
  --body: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  --radius: 12px;
  /* re-point the shared tokens so shared components pick up the theme */
  --primary: var(--red);
  --secondary: var(--red-deep);
  --text: var(--ink2);
  --text-strong: var(--ink);
  --page-bg: var(--cloud);
  --line: var(--hair);
  --line-soft: var(--hair);
  --f-primary: var(--display);
  --f-text: var(--body);
  scroll-padding-top: 90px;
}

/* ------------------------------------------------------------------ Base */
[data-theme="reference"] body { background: var(--cloud); color: var(--ink2); font-family: var(--body); font-size: 18px; line-height: 1.6; }
[data-theme="reference"] main p { font-size: inherit; line-height: inherit; }
[data-theme="reference"] h1, [data-theme="reference"] h2, [data-theme="reference"] h3, [data-theme="reference"] h4 { font-family: var(--display); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
[data-theme="reference"] h2 { font-size: clamp(32px, 4.6vw, 50px); line-height: 1.08; }
[data-theme="reference"] h3 { font-size: 22px; line-height: 1.15; letter-spacing: -.01em; }
[data-theme="reference"] p a { color: var(--red); }
[data-theme="reference"] p a:hover { color: var(--red-deep); }
[data-theme="reference"] :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ------------------------------------------------------------------ Buttons – measured from the reference (.ha-btn / .ref-btn / .cta-btn):
   red, Manrope 700, 8px radius, flat (no shadow, no lift); hover = deeper red over .25s and the trailing arrow nudges right; no pressed state */
[data-theme="reference"] .btnn { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: 0; line-height: 24px; padding: 13px 22px; border-radius: 8px; background: var(--red); color: #fff; box-shadow: none; transform: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
[data-theme="reference"] .btnn:hover, [data-theme="reference"] .btnn:focus-visible, [data-theme="reference"] .btnn:active { background: var(--red-deep); color: #fff; box-shadow: none; transform: none; }
[data-theme="reference"] .btnn svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 9px; }
[data-theme="reference"] .btnn--whatsapp { background: var(--red); }   /* all buttons red */
[data-theme="reference"] .btnn--whatsapp:hover, [data-theme="reference"] .btnn--whatsapp:focus-visible { background: var(--red-deep); }
[data-theme="reference"] .btnn.is-success { background: var(--ink); }
[data-theme="reference"] .btnn::after { content: none; }   /* no arrows on any button (27 Sep 2026); icons, where present, are prefix icons */
[data-theme="reference"] .hero__actions .btnn svg { display: none; }   /* the hero button's down-arrow icon stays hidden: no arrows on buttons (27 Sep 2026) */

/* ------------------------------------------------------------------ Header: light translucent bar, aperture lockup */
[data-theme="reference"] .site-header { background: rgba(244, 247, 249, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); box-shadow: none; transition: background .3s ease, box-shadow .3s ease; }
[data-theme="reference"] .site-header.is-scrolled { background: rgba(244, 247, 249, .98); box-shadow: 0 8px 28px rgba(28, 36, 42, .08); }
[data-theme="reference"] .site-header__inner { max-width: 1240px; margin: 0 auto; min-height: 74px; padding: 0 40px; gap: 32px; }
[data-theme="reference"] .site-logo { padding: 0; }
[data-theme="reference"] .ref-logo { display: inline-flex; align-items: center; gap: 11px; font-family: var(--display); color: var(--ink); }
[data-theme="reference"] .ref-logo .ap { width: 32px; height: 32px; flex: none; }
[data-theme="reference"] .ref-logo .lk { line-height: 1.05; }
[data-theme="reference"] .ref-logo .bd { display: block; font-weight: 800; font-size: 19px; letter-spacing: .01em; }
[data-theme="reference"] .ref-logo .it { display: block; font-weight: 600; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-top: 4px; }
[data-theme="reference"] .site-header__tagline { font-family: var(--display); font-weight: 600; font-size: 13.5px; line-height: 20px; letter-spacing: .01em; color: var(--ink2); padding-left: 24px; border-left: 1px solid var(--hair); }
[data-theme="reference"] .site-header__tagline strong { color: var(--ink); font-weight: 800; }
[data-theme="reference"] .site-header__call { margin: 0; padding: 10px 20px; font-size: 14.5px; line-height: 22px; transition: background-color .2s ease; }
@media (max-width: 1024px) {
  [data-theme="reference"] .site-header { position: relative; }   /* not sticky on tablets/phones (as the shared design): keeps the viewport for content */
  [data-theme="reference"] .site-header__inner { min-height: 0; padding: 12px 22px 12px; gap: 8px 16px; }
  [data-theme="reference"] .site-header__tagline { padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink2); }
}
@media (max-width: 480px) {
  [data-theme="reference"] .site-header__inner { padding: 10px 16px; }
  [data-theme="reference"] .site-header .ref-logo { gap: 9px; }
  [data-theme="reference"] .site-header .ref-logo .ap { width: 28px; height: 28px; }
  [data-theme="reference"] .site-header .ref-logo .bd { font-size: 16.5px; }
  [data-theme="reference"] .site-header .ref-logo .it { font-size: 7.5px; letter-spacing: .12em; }
  [data-theme="reference"] .site-header__call { padding: 9px 12px; font-size: 13.5px; }
}

/* ------------------------------------------------------------------ Hero: existing image under the reference's light scrim + aperture ghost ring */
[data-theme="reference"] .page-header--hero { color: var(--ink); border-bottom: 1px solid var(--hair); }
[data-theme="reference"] .page-header--hero .page-header__bg img { filter: saturate(.9); }
[data-theme="reference"] .page-header--hero .page-header__bg::after { background: linear-gradient(95deg, rgba(244, 247, 249, .97) 0%, rgba(244, 247, 249, .92) 44%, rgba(244, 247, 249, .42) 100%); }
[data-theme="reference"] .page-header--hero::before { content: ""; position: absolute; right: -280px; top: 50%; transform: translateY(-50%); width: 920px; height: 920px; border-radius: 50%; border: 1px solid var(--hair); z-index: 1; pointer-events: none; }
[data-theme="reference"] .page-header--hero::after { content: ""; position: absolute; right: -130px; top: 50%; transform: translateY(-50%); width: 620px; height: 620px; border-radius: 50%; border: 1px solid var(--hair); opacity: .6; z-index: 1; pointer-events: none; }
[data-theme="reference"] .page-header--hero .page-header__inner { position: relative; z-index: 2; max-width: 1240px; min-height: 620px; padding: 96px 40px 88px; }
[data-theme="reference"] .page-header--hero .hero__copy { max-width: 680px; }
[data-theme="reference"] .page-header--hero h1 { font-size: clamp(42px, 6vw, 72px); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); text-shadow: none; margin: 0 0 24px; animation: ref-fade .95s .1s both; }
[data-theme="reference"] .page-header--hero h1 .h1-sub { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; letter-spacing: -.01em; color: var(--red); margin-top: 20px; }
[data-theme="reference"] .hero__lead { font-size: 20px; line-height: 1.55; color: var(--ink2); max-width: 580px; margin: 0 0 28px; animation: ref-fade .9s .2s both; }
[data-theme="reference"] .hero__actions { animation: ref-fade .9s .3s both; }
@keyframes ref-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 880px) {
  [data-theme="reference"] .page-header--hero::before, [data-theme="reference"] .page-header--hero::after { display: none; }
  [data-theme="reference"] .page-header--hero .page-header__bg::after { background: linear-gradient(180deg, rgba(244, 247, 249, .97) 0%, rgba(244, 247, 249, .9) 60%, rgba(244, 247, 249, .7) 100%); }
  [data-theme="reference"] .page-header--hero .page-header__inner { min-height: 0; padding: 64px 22px 60px; }
}
@media (max-width: 767px) {
  [data-theme="reference"] .page-header--hero h1 { margin: 0 0 18px; }
  [data-theme="reference"] .hero__lead { font-size: 18px; }
  [data-theme="reference"] .hero__actions .btnn { display: block; }
}

/* ------------------------------------------------------------------ Sections: 88px rhythm, left-aligned Manrope headings with a red rule */
[data-theme="reference"] .section { padding: 88px 0; }
[data-theme="reference"] .container { max-width: 1160px; padding: 0 40px; }
[data-theme="reference"] .section__head { text-align: left; margin: 0 0 46px; max-width: 760px; }
[data-theme="reference"] .section__head::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--red); margin-bottom: 22px; }
[data-theme="reference"] .section__head h2 { margin-bottom: 18px; }
[data-theme="reference"] .section__head p { font-size: 18px; color: var(--ink2); max-width: 660px; }
[data-theme="reference"] .section__cta { text-align: center; margin-top: 36px; }   /* buttons below the hero are centred (27 Sep 2026) */
[data-theme="reference"] .section__cta .btnn { margin: 0; }
@media (max-width: 880px) { [data-theme="reference"] .container { padding: 0 22px; } [data-theme="reference"] .section { padding: 64px 0; } }

/* Scroll reveal – reference values; only added by theme.js to elements below the fold at load (no flash, nothing hidden without JS) */
[data-theme="reference"] .reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
[data-theme="reference"] .reveal.in { opacity: 1; transform: none; }

/* Services – reference "services" panel (.svc): one hairline panel split into columns, 01–03 in red; hover = white + 3px red inset, no lift (as measured) */
[data-theme="reference"] #services .boxes { counter-reset: svc; gap: 0; border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; background: var(--cloud); }
[data-theme="reference"] #services .box { counter-increment: svc; background: transparent; border: 0; border-right: 1px solid var(--hair); border-radius: 0; padding: 34px 30px; }
[data-theme="reference"] #services .box:last-child { border-right: 0; }
[data-theme="reference"] #services .box:hover { background: #fff; box-shadow: inset 0 3px 0 var(--red); }
[data-theme="reference"] #services .box::before { content: counter(svc, decimal-leading-zero); display: block; font-family: var(--display); font-weight: 800; font-size: 12px; line-height: 19.2px; letter-spacing: .02em; color: var(--red); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
/* card icons hidden: the reference's service cards and dark cards carry no icons (26 Sep 2026 feedback) */
[data-theme="reference"] #services .box__icon, [data-theme="reference"] #benefits .box__icon, [data-theme="reference"] #prepare .box__icon { display: none; }
/* icon tile style kept for any other box – reference .action .ic: 36px, 9px radius, cloud-2 tile, 19px ink icon */
[data-theme="reference"] .box__icon { width: 36px; height: 36px; border-radius: 9px; background: var(--cloud2); color: var(--ink); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
[data-theme="reference"] .box__icon svg { width: 19px; height: 19px; stroke-width: 1.9; }
[data-theme="reference"] .box h3 { font-size: 22px; line-height: 1.15; letter-spacing: -.01em; margin-bottom: 12px; }
[data-theme="reference"] .box p { font-size: 16px; line-height: 1.55; color: var(--ink2); }

/* Benefits – dark ink band with the reference's dark cards (.join-card): #243039 card, #33414C border, 14px radius;
   hover = lift 4px + red border + deep shadow over .3s; label-style 01–03 tag in red; dark icon tile (reference .lane.existing .action .ic) */
[data-theme="reference"] #benefits, [data-theme="reference"] #prepare { background: var(--ink); color: var(--band-text); }
[data-theme="reference"] #benefits h2, [data-theme="reference"] #prepare h2, [data-theme="reference"] #benefits h3, [data-theme="reference"] #prepare h3 { color: var(--cloud); }
[data-theme="reference"] #benefits .boxes, [data-theme="reference"] #prepare .boxes { counter-reset: jc; gap: 22px; }
[data-theme="reference"] #benefits .box, [data-theme="reference"] #prepare .box { counter-increment: jc; background: #243039; border: 1px solid #33414C; border-radius: 14px; padding: 32px 30px; transition: opacity .6s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
[data-theme="reference"] #benefits .box:hover, [data-theme="reference"] #prepare .box:hover { transform: translateY(-4px); border-color: var(--red); box-shadow: 0 20px 44px rgba(0, 0, 0, .35); }
[data-theme="reference"] #benefits .box::before, [data-theme="reference"] #prepare .box::before { content: counter(jc, decimal-leading-zero); display: block; font-family: var(--display); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .18em; color: var(--red); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
[data-theme="reference"] #benefits .box__icon, [data-theme="reference"] #prepare .box__icon { background: var(--ink); color: var(--cloud); border: 0; }
[data-theme="reference"] #benefits .box h3, [data-theme="reference"] #prepare .box h3 { font-size: 24px; line-height: 1.12; margin-bottom: 12px; }
[data-theme="reference"] #benefits .box p, [data-theme="reference"] #prepare .box p { font-size: 15.5px; line-height: 1.55; color: var(--band-text); }

/* Final CTA: light, centred, oversized heading over a faint aperture mark (reference "cta") */
[data-theme="reference"] .final { background: var(--cloud) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><path d='M 120 4 A 116 116 0 0 0 120 236 Z' fill='%231C242A' fill-opacity='.05'/><path d='M 120 56 A 64 64 0 0 1 120 184 Z' fill='%23CC2027' fill-opacity='.06'/></svg>") no-repeat 50% 50% / 640px 640px; color: var(--ink2); border-top: 1px solid var(--hair); padding: 104px 0; }
[data-theme="reference"] .final h2 { color: var(--ink); font-size: clamp(34px, 5vw, 60px); line-height: 1.06; margin-bottom: 18px; }
[data-theme="reference"] .final p { color: var(--ink2); font-size: 19px; margin-bottom: 26px; }
[data-theme="reference"] .final__actions .btnn { margin: 0; padding: 15px 32px; font-size: 16px; line-height: 24px; }

/* ------------------------------------------------------------------ Form – matched to the reference page's form (HubSpot embed, measured 26 Sep 2026):
   fields sit directly on the page (no card), Helvetica 16px labels in #212D3A with a red asterisk straight after the text,
   40px inputs on #F5F8FA with a 1px #959494 border and 3px corners, 20px between rows / 30px between columns,
   hover = 2px grey glow, focus = 3px grey glow, errors in 16px #E51520 10px under the field, submit auto-width on the right (kept red) */
[data-theme="reference"] { --hs-text: #212D3A; --hs-muted: #516383; --hs-field: #F5F8FA; --hs-border: #959494; --hs-error: #E51520; --hs-font: Helvetica, Arial, sans-serif; }
[data-theme="reference"] #register .section__head, [data-theme="reference"] #guide .section__head { text-align: center; margin: 0 auto 40px; }
[data-theme="reference"] #register .section__head::before, [data-theme="reference"] #guide .section__head::before { margin: 0 auto 22px; }
[data-theme="reference"] #register .section__head p, [data-theme="reference"] #guide .section__head p { margin: 0 auto; }
[data-theme="reference"] .form-center { max-width: 720px; }                      /* reference .contact-form width */
[data-theme="reference"] .form-card { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
[data-theme="reference"] .form-card__intro { font-family: var(--hs-font); font-size: 14px; line-height: 20px; color: var(--hs-muted); text-align: left; margin: 0 0 20px; }
[data-theme="reference"] .form-card__intro .req { margin-left: 0; margin-right: 1px; }
[data-theme="reference"] .form-grid { gap: 0 30px; }                               /* rows: the reserved error line (2px + 18px) = the reference's 20px row gap at rest */
[data-theme="reference"] .field { gap: 0; }
[data-theme="reference"] .field label { font-family: var(--hs-font); font-weight: 400; font-size: 16px; line-height: 18px; letter-spacing: 0; color: var(--hs-text); margin: 0 0 10px; }
[data-theme="reference"] .field label .req { color: var(--hs-error); font-weight: 400; margin-left: -.26em; }   /* "Name*": asterisk straight after the text, as on the reference */
[data-theme="reference"] .field .optional { font-family: var(--hs-font); font-size: 16px; font-weight: 400; color: var(--hs-muted); }
[data-theme="reference"] .field input, [data-theme="reference"] .field select { font-family: var(--hs-font); font-size: 16px; line-height: 18px; color: var(--hs-text); background-color: var(--hs-field); border: 1px solid var(--hs-border); border-radius: 3px; min-height: 40px; height: 40px; padding: 10px; box-shadow: none; transition: box-shadow .2s; }
[data-theme="reference"] .field input::placeholder { color: rgba(81, 99, 131, .64); }
[data-theme="reference"] .field select { padding-right: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'><path d='M0 0h12L6 7z' fill='%23212D3A'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 7px; }
[data-theme="reference"] .field input:hover, [data-theme="reference"] .field select:hover { border-color: var(--hs-border); box-shadow: 0 0 2px var(--hs-border); }
[data-theme="reference"] .field input:focus, [data-theme="reference"] .field select:focus { border-color: var(--hs-text); box-shadow: 0 0 3px var(--hs-border); outline: none; }   /* reference glow; border darkens so keyboard focus stays visible */
[data-theme="reference"] .field input[aria-invalid="true"], [data-theme="reference"] .field select[aria-invalid="true"] { border-color: var(--hs-border); }   /* reference keeps the grey border; the message says what is wrong */
[data-theme="reference"] .field .hint { font-family: var(--hs-font); font-size: 14px; line-height: 18px; color: var(--hs-muted); margin: 8px 0 0; }
[data-theme="reference"] .field__error { font-family: var(--hs-font); font-size: 16px; line-height: 18px; min-height: 18px; color: var(--hs-error); margin: 2px 0 0; }
/* after a failed submit: reference error spacing (10px above the message, 20px below). Applied only once the form shows its error status,
   i.e. after the click has completed, so the layout never moves under a pointer that is still pressed. */
[data-theme="reference"] .lead-form:has(.form-status[data-state="error"]) .field:has([aria-invalid="true"]) .field__error { margin-top: 10px; }
[data-theme="reference"] .lead-form:has(.form-status[data-state="error"]) .field:has([aria-invalid="true"]) { padding-bottom: 20px; }
[data-theme="reference"] .field .hint + .field__error { margin-top: 2px; }
[data-theme="reference"] .form-consent { font-family: var(--hs-font); font-size: 14px; line-height: 20px; color: var(--hs-muted); margin: 14px 0 0; }
[data-theme="reference"] .form-consent a { color: var(--red); }
[data-theme="reference"] .form-status { font-family: var(--hs-font); border-radius: 3px; }
/* submit – reference form button shape (Helvetica bold 16px, 12px 24px, 3px corners, auto width, right-aligned), kept red */
[data-theme="reference"] #submit-btn { display: block; width: fit-content; max-width: 100%; margin: 24px auto 0; font-family: var(--hs-font); font-weight: 700; font-size: 16px; line-height: 18px; letter-spacing: 0; padding: 12px 24px; border-radius: 3px; transition: transform .2s ease-out, background-color .2s linear, box-shadow .2s; }
[data-theme="reference"] .form-security { font-family: var(--hs-font); font-size: 14px; line-height: 20px; color: var(--hs-muted); justify-content: center; text-align: center; margin: 12px 0 0; }

/* ------------------------------------------------------------------ Footer: light raised panel, small uppercase labels (reference footer) */
[data-theme="reference"] .site-footer { background: var(--cloud2); color: var(--ink2); border-top: 1px solid var(--hair); padding: 56px 0 40px; }
[data-theme="reference"] .site-footer h3 { font-family: var(--display); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin: 6px 0 16px; }
[data-theme="reference"] .ref-logo--foot .ap { width: 30px; height: 30px; }
[data-theme="reference"] .ref-logo--foot .bd { font-size: 18px; }
[data-theme="reference"] .footer-logo { margin-bottom: 22px; }
[data-theme="reference"] .footer-badge img { border-radius: 6px; }
[data-theme="reference"] .icon-box svg { color: var(--mute); width: 20px; height: 20px; margin-top: 3px; }
[data-theme="reference"] .icon-box span, [data-theme="reference"] .icon-box a { font-family: var(--body); font-weight: 400; font-size: 15px; line-height: 24px; color: var(--ink); }
[data-theme="reference"] .icon-box a:hover, [data-theme="reference"] .footer-links a:hover, [data-theme="reference"] .icon-box a:focus-visible, [data-theme="reference"] .footer-links a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }   /* footer links never red */
[data-theme="reference"] .footer-links a { font-family: var(--body); font-size: 15px; line-height: 30px; color: var(--ink); }
[data-theme="reference"] .social a { width: 44px; height: 44px; border: 1px solid var(--hair); background: var(--cloud); color: var(--ink); }
[data-theme="reference"] .social a:hover { border-color: var(--red); background: var(--red); color: #fff; }
[data-theme="reference"] .social svg { width: 16px; height: 16px; }
/* credits: on this page the copyright bar is the last line, below the legal strip (sync places it there for reference-theme pages) */
[data-theme="reference"] .footer-bottom { background: var(--cloud2); border-top: 1px solid var(--hair); margin: 0; padding: 12px 0; }
[data-theme="reference"] .footer-bottom p { font-family: var(--display); font-weight: 500; font-size: 12.5px; letter-spacing: .02em; color: var(--mute); }
[data-theme="reference"] .footer-bottom a { color: var(--ink); }
@media (max-width: 767px) {
  [data-theme="reference"] .site-footer h3 { font-size: 12px; margin: 14px 0 12px; }
  [data-theme="reference"] .footer-logo .ref-logo { justify-content: center; }
  [data-theme="reference"] .footer-bottom p { font-size: 13px; line-height: 20px; }
}

/* Legal strip below the footer (Important Notice + Privacy Policy) */
[data-theme="reference"] .legal { background: var(--cloud2); border-top: 1px solid var(--hair); color: var(--ink2); font-size: 13.5px; line-height: 21px; }
[data-theme="reference"] .legal__notice strong { color: var(--ink); font-family: var(--display); font-weight: 800; }
/* compliance links (Privacy Policy, Terms, …): neutral ink, not red; spaced list instead of "|" separators (no stray separator at line starts) */
[data-theme="reference"] .legal__links { gap: 0 24px; }
[data-theme="reference"] .legal__links li + li::before { content: none; }
[data-theme="reference"] .legal__links a { display: inline-block; padding: 4px 0; color: var(--ink2); font-family: var(--display); font-weight: 600; text-decoration: none; }   /* 26px tall tap area */
[data-theme="reference"] .legal__links a:hover, [data-theme="reference"] .legal__links a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ Mobile sticky actions: ink bar, red buttons */
[data-theme="reference"] .stickybar { background: rgba(28, 36, 42, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-theme="reference"] .stickybar .btnn { border-radius: 8px; box-shadow: none; padding: 11px 12px; font-size: 15px; }
[data-theme="reference"] .stickybar .btnn--ghost { background: var(--red-deep); box-shadow: none; }   /* all buttons red */
[data-theme="reference"] .stickybar .btnn--ghost:hover { background: #8a141a; }

/* ------------------------------------------------------------------ Stacked (single-column) grids */
@media (max-width: 767px) {
  [data-theme="reference"] #services .box { border-right: 0; border-bottom: 1px solid var(--hair); }
  [data-theme="reference"] #services .box:last-child { border-bottom: 0; }
  [data-theme="reference"] #benefits .boxes, [data-theme="reference"] #prepare .boxes { gap: 16px; }
}

[data-theme="reference"] .ref-logo .it { white-space: nowrap; }

/* ------------------------------------------------------------------ Mobile polish */
@media (max-width: 480px) {
  [data-theme="reference"] .site-header__inner { flex-wrap: wrap; gap: 8px 10px; }
  [data-theme="reference"] .site-header .ref-logo { gap: 8px; }
  [data-theme="reference"] .site-header .ref-logo .ap { width: 26px; height: 26px; }
  [data-theme="reference"] .site-header .ref-logo .bd { font-size: 15px; }
  [data-theme="reference"] .site-header .ref-logo .it { font-size: 7.5px; letter-spacing: .08em; margin-top: 3px; }
  [data-theme="reference"] .site-header__call { margin-left: auto; padding: 8px 11px; font-size: 13px; }
  [data-theme="reference"] .site-header__call svg { width: 13px; height: 13px; margin-right: 6px; }
}
[data-theme="reference"] .final { background-size: min(640px, 92vw) auto; }
@media (max-width: 767px) {
  [data-theme="reference"] .final { padding: 72px 0; }
  [data-theme="reference"] .footer-logo { display: flex; justify-content: center; }
}
@media (max-width: 400px) {   /* one row down to 360px; at 320px the button wraps under the logo, right-aligned */
  [data-theme="reference"] .site-header .ref-logo .bd { font-size: 14px; }
  [data-theme="reference"] .site-header .ref-logo .it { font-size: 7px; letter-spacing: .06em; }
  [data-theme="reference"] .site-header__call svg { display: none; }
  [data-theme="reference"] .site-header__call { padding: 8px 9px; font-size: 12.5px; }
  [data-theme="reference"] .site-header__call svg { margin-right: 5px; }
}
@media (max-width: 1024px) { [data-theme="reference"] { scroll-padding-top: 16px; } }   /* header is not sticky here */
@media (max-width: 767px) { [data-theme="reference"] { scroll-padding-bottom: 88px; } }   /* anything scrolled/focused into view stays clear of the sticky Call / Register bar */

/* ------------------------------------------------------------------ Credits last (26 Sep 2026): keep the space for the phone's sticky bar under the final block */
@media (max-width: 767px) {
  [data-theme="reference"] .site-footer { padding-bottom: 32px; }
  [data-theme="reference"] .legal { padding-bottom: 28px; }
  [data-theme="reference"] .footer-bottom { padding-bottom: calc(12px + var(--sticky-space, 0px)); }
}

/* ------------------------------------------------------------------ Thank-you pages (reference design language; same content and behaviour) */
[data-theme="reference"] .thanks { position: relative; overflow: hidden; padding: 104px 0 96px; text-align: center;
  background: var(--cloud) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><path d='M 120 4 A 116 116 0 0 0 120 236 Z' fill='%231C242A' fill-opacity='.05'/><path d='M 120 56 A 64 64 0 0 1 120 184 Z' fill='%23CC2027' fill-opacity='.06'/></svg>") no-repeat right -170px top -130px / 520px 520px; }   /* reference "access" ghost mark */
[data-theme="reference"] .thanks .container { max-width: 980px; }   /* room for the three action buttons on one row; text blocks keep their own reading widths */
[data-theme="reference"] .thanks__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: #fff; margin-bottom: 26px; box-shadow: 0 0 0 8px rgba(204, 32, 39, .10); }
[data-theme="reference"] .thanks__icon svg { width: 30px; height: 30px; }
[data-theme="reference"] .thanks h1 { color: var(--ink); font-size: clamp(42px, 6vw, 64px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 20px; }
[data-theme="reference"] .thanks .lead { font-size: 20px; line-height: 1.55; color: var(--ink2); max-width: 640px; margin: 0 auto 28px; }
[data-theme="reference"] .thanks .lead strong { color: var(--ink); font-weight: 700; }
/* next steps: numbered 01–03 in red with hairline rules (reference numbering / flow language) */
[data-theme="reference"] .thanks__steps { counter-reset: step; list-style: none; text-align: left; max-width: 620px; margin: 8px auto 44px; padding: 0; border-top: 1px solid var(--hair); }
[data-theme="reference"] .thanks__steps li { counter-increment: step; position: relative; margin: 0; padding: 16px 0 16px 56px; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.55; color: var(--ink2); }
[data-theme="reference"] .thanks__steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 26px; color: var(--red); font-variant-numeric: tabular-nums; }
[data-theme="reference"] .thanks__sub { font-size: clamp(24px, 3vw, 30px); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 20px; }
[data-theme="reference"] .thanks__actions { gap: 12px; }
[data-theme="reference"] .thanks__actions .btnn { margin: 0; }
[data-theme="reference"] .btnn--outline { background: var(--red-deep); color: #fff; box-shadow: none; }   /* all buttons red: the secondary action uses the deeper red */
[data-theme="reference"] .btnn--outline:hover, [data-theme="reference"] .btnn--outline:focus-visible { background: #8a141a; color: #fff; }
[data-theme="reference"] .thanks__download { margin: 4px 0 40px; }
[data-theme="reference"] .thanks__download .btnn { padding: 15px 32px; font-size: 16px; }
@media (max-width: 767px) {
  [data-theme="reference"] .thanks { padding: 72px 0 64px; background-size: 360px 360px; background-position: right -140px top -110px; }
  [data-theme="reference"] .thanks .lead { font-size: 18px; }
  [data-theme="reference"] .thanks__steps li { padding-left: 46px; font-size: 16px; }
  [data-theme="reference"] .thanks__actions .btnn { width: 100%; }
  [data-theme="reference"] .thanks__download .btnn { width: 100%; }
}

/* ------------------------------------------------------------------ 27 Sep 2026: icon alignment + centred buttons below the hero (header and hero untouched) */
/* buttons with a prefix icon below the hero: icon inline before the first word (stays attached when a long label wraps on a phone),
   16px icon, 9px gap, centred text; the trailing arrow follows the last word */
[data-theme="reference"] .section__cta .btnn, [data-theme="reference"] .final__actions .btnn, [data-theme="reference"] .thanks__actions .btnn, [data-theme="reference"] .thanks__download .btnn { display: inline-block; max-width: 100%; text-align: center; }
[data-theme="reference"] .section__cta .btnn svg, [data-theme="reference"] .final__actions .btnn svg, [data-theme="reference"] .thanks__actions .btnn svg, [data-theme="reference"] .thanks__download .btnn svg { display: inline-block; width: 16px; height: 16px; margin: 0 9px 0 0; vertical-align: -2px; }
@media (max-width: 767px) {
  /* compliance strip centred like the footer above it */
  [data-theme="reference"] .legal__inner { text-align: center; }
  [data-theme="reference"] .legal__links { justify-content: center; gap: 2px 22px; }
  [data-theme="reference"] .form-card__intro { text-align: center; }
  [data-theme="reference"] .form-consent { text-align: center; }
}
/* security note under the submit button: lock icon inline before the text so it stays attached when the note wraps */
[data-theme="reference"] .form-security { display: block; }
[data-theme="reference"] .form-security svg { display: inline-block; width: 14px; height: 14px; margin: 0 6px 0 0; vertical-align: -2px; }

/* ------------------------------------------------------------------ 360px phones (e.g. Galaxy S8): keep the logo and the longer
   "Patient Support Desk" button (Funnel 3) on one row – 2px less side padding and gap; wider phones and desktop unchanged (27 Sep 2026) */
@media (max-width: 370px) {
  [data-theme="reference"] .site-header__inner { padding-left: 14px; padding-right: 14px; column-gap: 8px; }
}