/* ==========================================================================
   Vitrify — Doctor Discovery
   Plain CSS, no framework, no build step.
   Section 1: design tokens (the ONLY place raw values appear).
   Section 2: base + components. Every rule below the tokens references
   var(--…); if you need a new value, add a token first.
   States: every :hover/:focus-visible/:active rule is doubled with an
   .is-hover/.is-focus/.is-active class so states.html can show them
   statically. Runtime code never needs those classes.
   ========================================================================== */

/* ---------- 1a. SELF-HOSTED FONT ----------
   Plus Jakarta Sans, SIL Open Font License 1.1, served from this app.
   One variable file per subset covers 200-800, so the five static weights the
   design listed (400/500/600/700/800) are all supplied by these two files and
   no request leaves the origin. The Google Fonts <link> the handoff used is
   gone: an external request on every directory page is a third-party
   dependency and a privacy question this directory does not need.
   Only latin and latin-ext are shipped; the cyrillic and vietnamese subsets
   Google serves are not used by this content. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/find/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/find/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Color — brand */
  --color-brand: #4F63E6;          /* links, active nav, selected text accents */
  --color-brand-deep: #2A1B4E;     /* headings, dark panels, tray header */
  --color-brand-border: #C9CFF7;   /* expertise tag border */
  --color-accent: #7E5FD4;         /* interactive secondary: outlines, toggles, score ring */
  --color-accent-soft: #9C8AE0;    /* disabled CTA, dark-panel bullets */
  --color-accent-pale: #C9BFEF;    /* dark-panel body text, dashed slots */
  --color-accent-tint: #EFEBF9;    /* tinted surfaces, photo placeholder bg */
  --color-accent-tint-border: #E1DAF5;
  /* Color — call to action (maroon) */
  --color-cta: #7C2B52;
  --color-cta-hover: #651F42;
  --color-cta-bright: #93365F;
  --color-cta-tint: #F3D5E3;
  /* Color — neutrals */
  --color-ink: #16131F;
  --color-ink-muted: #6B6878;
  --color-surface: #FFFFFF;
  --color-surface-alt: #FBFAFE;    /* input bg, card footer strip */
  --color-bg: #F3F1FB;             /* page background (matches marketing site: --lav) */
  --color-border: #E6E1F3;
  --color-border-strong: #D9D2F0;
  /* Was reaching every one of its call sites as the fallback arm of
     var(--color-surface-sunken) -- a colour defined nowhere and
     therefore invisible to the token audit. Defined here at exactly the value
     those fallbacks supplied, so nothing renders differently. */
  --color-surface-sunken: #F4F6FA;
  --color-border-soft: #F1EEF8;    /* mobile menu row dividers */
  --color-divider: #EFEBF9;        /* filter group hairlines (same hue as tint) */
  /* Color — status */
  --color-success: #1C7A4A;        /* verified, availability, score ≥90 */
  --color-warning: #B4640A;        /* limited slots */
  --color-error: #B3261E;          /* ⚠ not designed — invented for error states */
  --color-error-tint: #FCEEED;     /* ⚠ not designed */
  --color-rating: #F5A524;         /* star fill */
  --color-rating-bg: #FFF7E8;
  --color-rating-border: #F9E4B8;
  /* Color — on-dark */
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #C9BFEF;
  --color-on-dark-link: #E6E1F3;
  --color-on-dark-border: rgba(255, 255, 255, 0.3);
  --color-on-dark-hairline: rgba(255, 255, 255, 0.12);

  /* Type */
  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fs-caption: 11px;    /* meta labels, badges */
  --fs-tiny: 12px;       /* counts, sublabels */
  --fs-small: 13px;      /* body-small, buttons-small, filters */
  --fs-body: 14px;       /* nav, inputs, buttons */
  --fs-body-lg: 15px;    /* hero sub, card h2 */
  --fs-h4: 16px;         /* section subheads */
  --fs-h3: 18px;         /* results count, doctor name */
  --fs-stat: 20px;       /* trust metric numbers */
  --fs-logo: 22px;
  --fs-h2: 26px;         /* CTA band, mobile hero */
  --fs-h1: 38px;         /* hero max; use clamp(28px, 2.6vw, var(--fs-h1)) */
  --fs-score: 30px;      /* score ring number (rail) */
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.3;
  --lh-normal: 1.45;
  --lh-body: 1.5;
  --lh-relaxed: 1.6;
  --ls-tight: -0.02em;
  --ls-caps: 0.06em;

  /* Spacing (4px base) */
  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 10px; --sp-5: 12px;
  --sp-6: 14px; --sp-7: 16px; --sp-8: 20px; --sp-9: 24px; --sp-10: 32px;
  --sp-11: 40px; --sp-12: 48px;

  /* Radius */
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px;
  --r-2xl: 14px; --r-3xl: 16px; --r-pill: 999px;

  /* Shadow */
  --shadow-search: 0 4px 20px rgba(42, 27, 78, 0.06);
  --shadow-card-hover: 0 6px 24px rgba(42, 27, 78, 0.07);
  --shadow-tray: 0 -8px 40px rgba(42, 27, 78, 0.18);
  --shadow-toast: 0 8px 30px rgba(0, 0, 0, 0.2);
  --shadow-ribbon: 0 1px 4px rgba(124, 43, 82, 0.35);

  /* Motion */
  --t-fast: 150ms ease;
  --t-entry: 250ms ease;
  --t-tray: 350ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Z layers */
  --z-mobile-search: 30;
  --z-header: 40;
  --z-tray: 50;
  --z-toast: 70;
  --z-drawer: 80;
  --z-drawer-bar: 81;

  /* Layout */
  --page-max: 1400px;
  --tray-max: 1100px;
  --col-filters: 270px;
  --col-rail: 280px;
  --header-h: 72px;
  --header-h-mobile: 60px;
  --photo-w: 96px;
  --photo-h: 112px;
  --control-h: 36px;    /* small controls */
  --input-h: 46px;      /* search inputs */
  --btn-h: 40px;        /* card CTAs */
}

/* ---------- 1b. DESIGN TOKENS — additions for the Clinic Directory family (Screens 2–6) ----------
   Same rule: raw values live here only. Names below match README.md. */
:root {
  /* Color aliases / additions */
  --color-accent-line: #C9BFEF;         /* dashed pending badges, hover borders on tinted cards */
  --color-cta-tint-bg: #FDF4F8;         /* partner badge bg, sponsored strip bg */
  --color-cta-line: #F3D5E3;            /* partner badge / sponsored border */
  --color-success-hover: #155E39;
  --color-success-tint: #E3F3EA;
  --color-on-dark-line-strong: rgba(255, 255, 255, 0.18);
  --color-on-dark-glass: rgba(255, 255, 255, 0.06);
  --color-on-dark-glass-hover: rgba(255, 255, 255, 0.14);
  --color-on-dark-well: rgba(0, 0, 0, 0.18);
  --color-hero-dots: rgba(156, 138, 224, 0.28);
  --color-hero-glow-accent: rgba(126, 95, 212, 0.55);
  --color-hero-glow-cta: rgba(124, 43, 82, 0.5);
  --color-scrim-top: rgba(42, 27, 78, 0);
  --color-scrim-bottom: rgba(42, 27, 78, 0.85);
  --color-ghost-fill: rgba(255, 255, 255, 0.55);
  /* Score bands */
  --color-score-high: var(--color-success);   /* ≥ 90 */
  --color-score-mid: var(--color-accent);     /* 80–89 */
  --color-score-low: var(--color-brand);      /* < 80 */
  --color-score-track: var(--color-accent-tint);
  --color-score-locked: var(--color-accent-pale);

  /* Type — numeric scale used by Screens 2–6 (aliases of the semantic scale where they coincide) */
  --fs-10: 10px; --fs-11: 11px; --fs-11-5: 11.5px; --fs-12: 12px; --fs-12-5: 12.5px;
  --fs-13: 13px; --fs-13-5: 13.5px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-28: 28px;
  --fs-30: 30px; --fs-32: 32px; --fs-34: 34px; --fs-38: 38px; --fs-40: 40px;
  --lh-1: 1; --lh-115: 1.15; --lh-155: 1.55; --lh-170: 1.7;
  --ls-caps-wide: 0.08em;
  --ls-caps-narrow: 0.05em;

  /* Spacing additions */
  --sp-1-5: 5px; --sp-4-5: 18px; --sp-7-5: 7px; --sp-9-5: 28px; --sp-10-5: 36px; --sp-13: 56px;
  --sp-neg-page: -32px;                          /* hero stats strip bleed */

  /* Radius additions */
  --r-7: 7px; --r-circle: 50%;

  /* Control heights */
  --h-26: 26px; --h-28: 28px; --h-30: 30px; --h-32: 32px; --h-34: 34px; --h-36: 36px;
  --h-38: 38px; --h-40: 40px; --h-42: 42px; --h-44: 44px; --h-52: 52px;

  /* Sizes */
  --logo-tile: 64px; --logo-tile-sm: 44px; --logo-tile-xs: 22px;
  --mono-tile: 56px; --avatar-doctor: 48px; --icon-well: 40px; --icon-well-lg: 44px;
  --photo-strip-w: 220px; --photo-ratio: 4 / 3; --logo-ratio: 1 / 1;
  --map-h: 300px; --map-h-sm: 220px;
  --bar-h: 4px; --bar-h-lg: 5px;
  --ring-size: 96px; --ring-stroke: 8px;
  --hero-glow: 460px; --hero-glow-sm: 420px; --hero-dot-grid: 22px;

  /* Shadow additions */
  --shadow-tabs: 0 4px 16px rgba(42, 27, 78, 0.06);
  --shadow-lockcard: 0 6px 24px rgba(42, 27, 78, 0.07);
  --shadow-search-float: 0 12px 40px rgba(0, 0, 0, 0.25);

  /* Motion */
  --t-scroll: 800ms;

  /* Z layers */
  --z-tabs: 30; --z-mobile-menu: 45;

  /* Layout */
  --rail-w: 300px; --rail-w-md: 320px; --rail-w-lg: 340px; --filters-w: 260px;
  --hero-side-w: 380px; --enq-aside-min: 220px; --enq-aside-max: 280px; --hours-w: 280px;
  --tabs-offset: 76px;                            /* sticky rail top = tab bar height + gap */
  --blur-ghost: 3px;
}

/* ---------- 2. BASE ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--color-bg); color: var(--color-ink);
  font-family: var(--font-family); font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--color-brand); text-decoration: none; }
a:hover, a.is-hover { color: var(--color-brand-deep); text-decoration: underline; }
button, input, select { font-family: inherit; }
button { cursor: pointer; }
:focus-visible, .is-focus {
  outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: var(--r-sm);
}
input[type="range"] { accent-color: var(--color-accent); width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); width: 16px; height: 16px; margin: 0; }
img, svg { max-width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@keyframes tray-in { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  border: 0; border-radius: var(--r-md);
  font-size: var(--fs-body); font-weight: var(--fw-bold);
  height: var(--btn-h); padding: 0 var(--sp-8); white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn--primary { background: var(--color-cta); color: var(--color-on-dark); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--color-cta-hover); }
.btn--primary:active, .btn--primary.is-active { background: var(--color-cta-hover); transform: translateY(1px); }
.btn--primary:disabled, .btn--primary.is-disabled { background: var(--color-accent-soft); cursor: not-allowed; transform: none; }
.btn--outline { background: var(--color-surface); color: var(--color-accent); border: 1.5px solid var(--color-accent); }
.btn--outline:hover, .btn--outline.is-hover { background: var(--color-accent); color: var(--color-on-dark); }
.btn--outline:active, .btn--outline.is-active { background: var(--color-accent); color: var(--color-on-dark); transform: translateY(1px); }
.btn--outline:disabled, .btn--outline.is-disabled { border-color: var(--color-border); color: var(--color-ink-muted); background: var(--color-surface); cursor: not-allowed; transform: none; }
.btn--ghost { background: transparent; color: var(--color-brand); font-weight: var(--fw-semibold); }
.btn--ghost:hover, .btn--ghost.is-hover { color: var(--color-brand-deep); }
.btn--ghost:disabled, .btn--ghost.is-disabled { color: var(--color-ink-muted); cursor: not-allowed; }
.btn--quiet { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-border); font-weight: var(--fw-semibold); font-size: var(--fs-small); height: var(--control-h); padding: 0 var(--sp-6); }
.btn--quiet:hover, .btn--quiet.is-hover { border-color: var(--color-accent-pale); }
.btn--on-dark { background: var(--color-surface); color: var(--color-brand-deep); }
.btn--on-dark:hover, .btn--on-dark.is-hover { background: var(--color-accent-tint); }
.btn--sm { height: var(--control-h); font-size: var(--fs-small); padding: 0 var(--sp-6); }

/* Icon-only round button (carousel arrows, tray chevron) */
.btn-icon {
  width: var(--h-34); height: var(--h-34); display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--color-border); border-radius: 50%;
  background: var(--color-surface); color: var(--color-brand-deep);
  transition: border-color var(--t-fast);
}
.btn-icon:hover, .btn-icon.is-hover { border-color: var(--color-accent-pale); }
.btn-icon:disabled, .btn-icon.is-disabled { color: var(--color-ink-muted); cursor: not-allowed; opacity: 0.55; }

/* ---------- FORM CONTROLS ---------- */
.field { position: relative; display: flex; align-items: center; }
.field > svg { position: absolute; left: var(--sp-6); pointer-events: none; }
.field__input, .field__select {
  width: 100%; height: var(--input-h);
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  padding: 0 var(--sp-6) 0 42px;
  font-size: var(--fs-body); color: var(--color-ink); background: var(--color-surface-alt);
  transition: border-color var(--t-fast);
}
.field__select { appearance: none; }
.field__input:hover, .field__input.is-hover,
.field__select:hover, .field__select.is-hover { border-color: var(--color-accent-pale); }
.field__input:disabled, .field__input.is-disabled,
.field__select:disabled, .field__select.is-disabled { background: var(--color-bg); color: var(--color-ink-muted); cursor: not-allowed; }
.field--error .field__input { border-color: var(--color-error); background: var(--color-error-tint); } /* ⚠ not designed */
.field-error-msg { font-size: var(--fs-tiny); color: var(--color-error); margin-top: var(--sp-1); font-weight: var(--fw-semibold); } /* ⚠ not designed */
.field--plain .field__input { background: var(--color-surface); padding-left: var(--sp-10-5); height: var(--h-44); border-radius: var(--r-lg); }
.select-sm {
  height: var(--control-h); border: 1px solid var(--color-border); border-radius: var(--r-md);
  padding: 0 var(--sp-4); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  color: var(--color-ink); background: var(--color-surface);
}
.check-row { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-small); color: var(--color-ink); cursor: pointer; }
.check-row__label { flex: 1; }
.check-row__count { font-size: var(--fs-tiny); color: var(--color-ink-muted); }
.check-row.is-disabled { color: var(--color-ink-muted); cursor: not-allowed; }

/* ---------- HEADER ---------- */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: var(--z-header); }
.site-header__inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--sp-9); height: var(--header-h); display: flex; align-items: center; gap: var(--sp-10); }
.logo { display: flex; align-items: center; gap: var(--sp-4); text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo__name { font-size: var(--fs-logo); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); letter-spacing: var(--ls-tight); line-height: var(--lh-1); }
.logo__tagline { font-size: 9px; font-weight: var(--fw-semibold); color: var(--color-accent); margin-top: 2px; white-space: nowrap; display: block; }
.site-nav { display: flex; gap: var(--sp-9-5); margin: 0 auto; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.site-nav a { color: var(--color-ink); padding: 26px 0; white-space: nowrap; }
.site-nav a:hover, .site-nav a.is-hover { color: var(--color-brand); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--color-brand); border-bottom: 2px solid var(--color-brand); }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-7); margin-left: auto; }
.auth-link { background: transparent; border: 0; color: var(--color-ink); font-size: var(--fs-body); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--sp-2); }
.menu-btn { display: none; align-items: center; justify-content: center; width: var(--h-40); height: var(--h-40); border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-brand-deep); }
.mobile-menu { display: none; flex-direction: column; border-top: 1px solid var(--color-border); background: var(--color-surface); padding: var(--sp-3) var(--sp-7) var(--sp-7); }
.mobile-menu.is-open { display: flex; }
.mobile-menu a { color: var(--color-ink); font-weight: var(--fw-semibold); font-size: var(--fs-body-lg); padding: var(--sp-5) var(--sp-1); border-bottom: 1px solid var(--color-border-soft); }
.mobile-menu a[aria-current="page"] { color: var(--color-brand); font-weight: var(--fw-bold); }
.mobile-menu__cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }

/* ---------- PAGE FRAME ---------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-8) var(--sp-9) var(--sp-12); }
.breadcrumb { font-size: var(--fs-small); color: var(--color-ink-muted); display: flex; gap: var(--sp-3); align-items: center; margin-bottom: 22px; }
.breadcrumb strong { color: var(--color-ink); font-weight: var(--fw-semibold); }

/* ---------- HERO ---------- */
.hero { display: flex; flex-direction: column; gap: var(--sp-4-5); margin-bottom: var(--sp-10); }
.hero__title { margin: 0; font-size: clamp(var(--fs-28), 2.6vw, var(--fs-h1)); line-height: var(--lh-115); font-weight: var(--fw-extrabold); letter-spacing: -0.025em; color: var(--color-brand-deep); text-wrap: pretty; }
.hero__title em { font-style: normal; color: var(--color-brand); }
.hero__sub { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--color-ink-muted); max-width: 760px; text-wrap: pretty; }
.hero__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: stretch; }

.searchbar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--sp-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-5); box-shadow: var(--shadow-search); }
.searchbar .btn { height: var(--input-h); padding: 0 var(--sp-9-5); font-size: var(--fs-body-lg); }

.bestmatch { display: flex; align-items: center; gap: var(--sp-6); background: var(--color-accent-tint); border: 1px solid var(--color-accent-tint-border); border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-4-5); min-width: 0; }
.bestmatch__icon { width: var(--icon-well); height: var(--icon-well); border-radius: 50%; background: var(--color-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bestmatch__body { flex: 1; min-width: 0; }
.bestmatch__title { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-brand-deep); }
.bestmatch__sub { font-size: var(--fs-tiny); color: var(--color-ink-muted); margin-top: 2px; line-height: var(--lh-normal); }
.bestmatch .btn { flex-shrink: 0; height: auto; padding: 9px var(--sp-6); font-size: var(--fs-small); }

.trust-metrics { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-5) var(--sp-2); align-items: center; }
.trust-metrics__item { text-align: center; padding: 0 var(--sp-2); }
.trust-metrics__item + .trust-metrics__item { border-left: 1px solid var(--color-divider); }
.trust-metrics__item dt { font-size: var(--fs-stat); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.trust-metrics__item--hero dt { color: var(--color-cta); }
.trust-metrics__item dd { margin: 3px 0 0; font-size: var(--fs-caption); color: var(--color-ink-muted); font-weight: var(--fw-medium); line-height: var(--lh-snug); }

/* ---------- MOBILE SEARCH ROW ---------- */
.mobile-searchrow { display: none; position: sticky; top: var(--header-h-mobile); z-index: var(--z-mobile-search); gap: var(--sp-3); background: var(--color-bg); padding: var(--sp-3) 0 var(--sp-4); margin: -8px 0 var(--sp-2); }
.mobile-searchrow .field { flex: 1; }
.mobile-searchrow__filters { height: var(--h-44); padding: 0 var(--sp-6); display: flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--color-border); border-radius: var(--r-lg); background: var(--color-surface); color: var(--color-brand-deep); font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap; }
.mobile-searchrow__badge { background: var(--color-accent); color: var(--color-on-dark); border-radius: var(--r-pill); font-size: var(--fs-caption); padding: 1px var(--sp-2); }

/* ---------- 3-COLUMN LAYOUT ---------- */
.layout { display: grid; grid-template-columns: var(--col-filters) minmax(0, 1fr) var(--col-rail); gap: var(--sp-9); align-items: start; }

/* ---------- FILTERS ---------- */
.filters { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-2xl); padding: var(--sp-8); position: sticky; top: 88px; max-height: calc(100vh - 100px); overflow: auto; }
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); }
.filters__title { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); }
.filters__clear { background: none; border: 0; color: var(--color-brand); font-size: var(--fs-small); font-weight: var(--fw-semibold); padding: 0; }
.filters__close { display: none; align-items: center; justify-content: center; width: var(--h-32); height: var(--h-32); border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-ink); font-size: var(--fs-h3); }
.filter-group { border: 0; border-top: 1px solid var(--color-divider); margin: 0; padding: var(--sp-4-5) 0 var(--sp-7); }
.filter-group__legend { display: block; width: 100%; padding: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-ink); margin: 0 0 var(--sp-5); }
.filter-group__options { display: flex; flex-direction: column; gap: 9px; }
.filter-group__search { width: 100%; height: var(--control-h); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 0 var(--sp-5); font-size: var(--fs-small); margin-bottom: var(--sp-4); }
.filter-group__range-labels { display: flex; justify-content: space-between; font-size: var(--fs-tiny); color: var(--color-ink-muted); margin-bottom: var(--sp-2); }
.filter-group__range-labels strong { color: var(--color-ink); font-weight: var(--fw-semibold); }
.filters__apply { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-7); border-top: 1px solid var(--color-divider); }
.filters__apply .btn { height: var(--h-42); }

/* ---------- RESULTS ---------- */
.results { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-7); }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.results-head__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--color-ink); }
.results-head__controls { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.results-head__filter-btn { display: none; }
.results-head__sort { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--color-ink-muted); font-weight: var(--fw-medium); }
.view-toggle { display: flex; border: 1px solid var(--color-border); border-radius: var(--r-md); overflow: hidden; background: var(--color-surface); }
.view-toggle button { height: var(--control-h); padding: 0 var(--sp-6); border: 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); background: var(--color-surface); color: var(--color-ink-muted); }
.view-toggle button + button { border-left: 1px solid var(--color-border); }
.view-toggle button.is-active { background: var(--color-accent-tint); color: var(--color-accent); }

.chips { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--color-accent-tint); color: var(--color-brand-deep); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5); font-size: var(--fs-tiny); font-weight: var(--fw-semibold); }
.chip__remove { border: 0; background: transparent; color: var(--color-accent); font-size: var(--fs-h4); line-height: var(--lh-1); padding: 0 2px; }
.chip__remove:hover, .chip__remove.is-hover { color: var(--color-brand-deep); }

/* Cards grid: list = 1 col; .is-grid = 2-up */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
.cards.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- DOCTOR CARD (repeating unit) ---------- */
main:not([data-screen]) .doctor-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-2xl); overflow: hidden; min-width: 0; display: flex; flex-direction: column; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
main:not([data-screen]) .doctor-card:hover, main:not([data-screen]) .doctor-card.is-hover { border-color: var(--color-accent-pale); box-shadow: var(--shadow-card-hover); }
.doctor-card__top { display: grid; grid-template-columns: var(--photo-w) minmax(0, 1fr) 220px; gap: var(--sp-8); padding: var(--sp-8); align-items: start; }
.cards.is-grid .doctor-card__top { grid-template-columns: var(--photo-w) minmax(0, 1fr); }
.doctor-card__photo-wrap { position: relative; }
.doctor-card__photo { width: var(--photo-w); height: var(--photo-h); border-radius: var(--r-lg); background: var(--color-accent-tint); display: flex; align-items: center; justify-content: center; font-size: var(--fs-h2); font-weight: var(--fw-extrabold); color: var(--color-accent); letter-spacing: var(--ls-tight); overflow: hidden; position: relative; }
.doctor-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.doctor-card__ribbon { position: absolute; top: var(--sp-6); left: -34px; width: 130px; transform: rotate(-45deg); background: var(--color-cta); color: var(--color-on-dark); font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 3px 0; box-shadow: var(--shadow-ribbon); }
.doctor-card__photo-stats { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); width: var(--photo-w); }
.stat-pill { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); height: var(--h-28); border-radius: var(--r-7); background: var(--color-bg); border: 1px solid var(--color-border); font-size: var(--fs-tiny); font-weight: var(--fw-bold); color: var(--color-brand-deep); white-space: nowrap; }
.stat-pill--rating { background: var(--color-rating-bg); border-color: var(--color-rating-border); color: var(--color-ink); font-weight: var(--fw-extrabold); }
.stat-pill--rating .stat-pill__count { font-weight: var(--fw-medium); color: var(--color-ink-muted); font-size: var(--fs-caption); }
.stat-pill--muted { font-weight: var(--fw-semibold); color: var(--color-ink-muted); font-size: var(--fs-11-5); }

.doctor-card__body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.doctor-card__name-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.doctor-card__name { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--color-ink); letter-spacing: -0.01em; line-height: var(--lh-heading); }
.badge-verified { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--color-success); font-size: var(--fs-tiny); font-weight: var(--fw-bold); }
.badge-sponsored { font-size: var(--fs-10); font-weight: var(--fw-bold); color: var(--color-ink-muted); border: 1px solid var(--color-border); border-radius: var(--r-sm); padding: 1px var(--sp-2); letter-spacing: 0.05em; text-transform: uppercase; }
.doctor-card__title { font-size: var(--fs-small); color: var(--color-ink); font-weight: var(--fw-semibold); }
.doctor-card__quals { font-size: var(--fs-tiny); color: var(--color-ink-muted); line-height: var(--lh-normal); }
.doctor-card__facts { display: flex; align-items: center; row-gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-small); color: var(--color-ink); }
.doctor-card__facts > span { display: inline-flex; align-items: center; gap: var(--sp-2); padding-right: var(--sp-5); white-space: nowrap; }
.doctor-card__facts > span + span { padding-left: var(--sp-5); border-left: 1px solid var(--color-border); color: var(--color-ink-muted); }
.doctor-card__clinic { font-size: var(--fs-small); font-weight: var(--fw-semibold); align-self: flex-start; }
.verify-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.verify-tag { display: inline-flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-11-5); font-weight: var(--fw-semibold); color: var(--color-brand-deep); background: var(--color-bg); border: 1px solid var(--color-border); padding: 3px var(--sp-3); border-radius: var(--r-sm); white-space: nowrap; }
.doctor-card__expertise { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: 2px; }
.doctor-card__expertise-label { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.expertise-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.expertise-tag { font-size: var(--fs-tiny); font-weight: var(--fw-semibold); color: var(--color-brand); border: 1px solid var(--color-brand-border); padding: var(--sp-1) 9px; border-radius: var(--r-sm); white-space: nowrap; }
.expertise-more { font-size: var(--fs-tiny); color: var(--color-ink-muted); font-weight: var(--fw-semibold); padding-left: 2px; }

.doctor-card__actions { display: flex; flex-direction: column; gap: var(--sp-4); align-items: stretch; }
.cards.is-grid .doctor-card__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
.cards.is-grid .doctor-card__actions > * { flex: 1 1 200px; }
.score-box { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--color-border); border-radius: var(--r-lg); background: var(--color-surface-alt); }
.score-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.score-ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); line-height: var(--lh-1); }
.score-box__label { font-size: 10.5px; font-weight: var(--fw-extrabold); color: var(--color-ink-muted); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.score-box__category { font-size: var(--fs-body); font-weight: var(--fw-extrabold); margin-top: 2px; }
.score-box__of { font-size: var(--fs-11-5); color: var(--color-ink-muted); }
.score--excellent { color: var(--color-success); } .score--excellent .ring-fg { stroke: var(--color-success); }
.score--verygood { color: var(--color-accent); } .score--verygood .ring-fg { stroke: var(--color-accent); }
.score--good { color: var(--color-brand); } .score--good .ring-fg { stroke: var(--color-brand); }

.doctor-card__minor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.compare-check { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); height: var(--control-h); padding: 0 var(--sp-4); white-space: nowrap; border: 1px solid var(--color-border); border-radius: var(--r-md); font-size: var(--fs-tiny); font-weight: var(--fw-semibold); cursor: pointer; background: var(--color-surface); color: var(--color-brand-deep); transition: border-color var(--t-fast), background var(--t-fast); }
.compare-check.is-selected { border-color: var(--color-accent); background: var(--color-accent-tint); }
.compare-check.is-disabled { color: var(--color-ink-muted); cursor: not-allowed; opacity: 0.6; }
.save-btn { height: var(--control-h); display: flex; align-items: center; justify-content: center; gap: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); font-size: var(--fs-tiny); font-weight: var(--fw-semibold); color: var(--color-brand-deep); white-space: nowrap; }
.save-btn:hover, .save-btn.is-hover { border-color: var(--color-accent-pale); }
.save-btn .heart { fill: none; stroke: var(--color-cta); }
.save-btn.is-saved .heart { fill: var(--color-cta); }

.doctor-card__meta { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--color-divider); background: var(--color-surface-alt); padding: var(--sp-6) var(--sp-8); }
.cards.is-grid .doctor-card__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) 0; }
.doctor-card__meta > div { padding: 0 var(--sp-5); }
.doctor-card__meta > div:first-child { padding-left: 0; }
.doctor-card__meta > div + div { border-left: 1px solid var(--color-border); }
.doctor-card__meta dt { font-size: var(--fs-caption); color: var(--color-ink-muted); font-weight: var(--fw-semibold); }
.doctor-card__meta dd { margin: var(--sp-1) 0 0; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-ink); }
.doctor-card__meta dd.meta-sub { margin-top: 2px; font-size: var(--fs-11-5); color: var(--color-ink-muted); font-weight: var(--fw-regular); }
.doctor-card__meta dd.meta-fee { font-size: var(--fs-body-lg); font-weight: var(--fw-extrabold); }
.avail--now { color: var(--color-success); } .avail--limited { color: var(--color-warning); } .avail--later { color: var(--color-ink-muted); }

/* ---------- LIST INSERTS ---------- */
.banner-guide { grid-column: 1 / -1; background: var(--color-brand-deep); border-radius: var(--r-2xl); padding: 22px 26px; display: flex; align-items: center; gap: var(--sp-9); flex-wrap: wrap; color: var(--color-on-dark); }
.banner-guide__kicker { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-soft); }
.banner-guide__title { font-size: 19px; font-weight: var(--fw-extrabold); margin-top: var(--sp-2); letter-spacing: -0.01em; }
.banner-guide__sub { font-size: var(--fs-small); color: var(--color-on-dark-muted); margin-top: var(--sp-1); line-height: var(--lh-body); }
.banner-guide__body { flex: 1; min-width: 240px; }
.banner-guide .btn { height: var(--h-42); font-size: var(--fs-small); }

.also-viewed { grid-column: 1 / -1; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-2xl); padding: var(--sp-4-5) var(--sp-8); min-width: 0; }
.also-viewed__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.also-viewed__title { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); }
.also-viewed__sub { font-size: var(--fs-tiny); color: var(--color-ink-muted); margin-top: 2px; }
.also-viewed__nav { display: flex; gap: var(--sp-3); }
.also-viewed__track { display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 var(--sp-1) var(--sp-1); margin: 0 calc(-1 * var(--sp-1)); scrollbar-width: none; }
.also-viewed__track::-webkit-scrollbar { display: none; }
.mini-card { flex: 0 0 232px; width: 232px; scroll-snap-align: start; border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); background: var(--color-surface-alt); transition: border-color var(--t-fast); }
.mini-card:hover, .mini-card.is-hover { border-color: var(--color-accent-pale); }
.mini-card__head { display: flex; align-items: center; gap: var(--sp-4); }
.mini-card__avatar { width: var(--icon-well-lg); height: var(--icon-well-lg); border-radius: var(--r-lg); background: var(--color-accent-tint); display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); font-weight: var(--fw-extrabold); color: var(--color-accent); flex-shrink: 0; overflow: hidden; }
.mini-card__name { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-card__sub { font-size: var(--fs-11-5); color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-card__row { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-tiny); color: var(--color-ink-muted); }
.mini-card__fee { font-size: var(--fs-small); font-weight: var(--fw-extrabold); color: var(--color-ink); }
.mini-card .btn { height: var(--h-30); padding: 0 var(--sp-5); font-size: var(--fs-tiny); border-width: 1px; }

/* ---------- EMPTY / LOADING / ERROR ---------- */
.empty-state { background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--r-2xl); padding: var(--sp-12) var(--sp-9); text-align: center; }
.empty-state__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-brand-deep); }
.empty-state__sub { margin: var(--sp-3) auto var(--sp-4-5); color: var(--color-ink-muted); font-size: var(--fs-body); max-width: 380px; }
/* ⚠ loading skeleton — not designed; convention: tint blocks, 1.4s pulse */
.skeleton-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-2xl); padding: var(--sp-8); display: grid; grid-template-columns: var(--photo-w) minmax(0, 1fr) 220px; gap: var(--sp-8); }
.skeleton { background: var(--color-accent-tint); border-radius: var(--r-md); animation: skeleton-pulse 1.4s ease-in-out infinite; }
/* ⚠ error state — not designed */
.error-state { background: var(--color-error-tint); border: 1px solid var(--color-error); border-radius: var(--r-2xl); padding: var(--sp-10) var(--sp-9); text-align: center; }
.error-state__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--color-error); }
.error-state__sub { margin: var(--sp-3) auto var(--sp-4-5); color: var(--color-ink-muted); font-size: var(--fs-body); max-width: 420px; }

/* ---------- PAGINATION ---------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; padding-top: var(--sp-3); }
.pagination__info, .pagination__perpage { font-size: var(--fs-small); color: var(--color-ink-muted); }
.pagination__perpage { display: flex; align-items: center; gap: var(--sp-3); }
.pagination__pages { display: flex; gap: var(--sp-2); align-items: center; }
.page-btn { width: var(--control-h); height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-ink); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.page-btn:hover, .page-btn.is-hover { border-color: var(--color-accent-pale); }
.page-btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-dark); }
.page-btn:disabled, .page-btn.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- RIGHT RAIL / INFO CARDS ---------- */
.rail { display: flex; flex-direction: column; gap: var(--sp-7); position: sticky; top: 88px; }
.rail-inline { display: none; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-3); }
.info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-2xl); padding: 22px; }
.info-card--tint { background: var(--color-accent-tint); border-color: var(--color-accent-tint-border); }
.info-card--dark { background: var(--color-brand-deep); border: 0; color: var(--color-on-dark); }
.info-card--dark p { color: var(--color-on-dark-muted); }
.info-card h2, .info-card h3 { margin: 0; font-size: var(--fs-body-lg); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); }
.info-card--dark h2, .info-card--dark h3 { color: var(--color-on-dark); }
.info-card p { margin: var(--sp-3) 0 var(--sp-7); font-size: var(--fs-small); line-height: var(--lh-155); color: var(--color-ink-muted); }
.info-card__list { margin: var(--sp-6) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-small); color: var(--color-ink); }
.info-card__list li { display: flex; gap: var(--sp-3); align-items: center; }
.score-breakdown { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.score-breakdown__row { display: flex; justify-content: space-between; font-size: var(--fs-tiny); margin-bottom: var(--sp-1); }
.score-breakdown__row dt { color: var(--color-ink); font-weight: var(--fw-semibold); }
.score-breakdown__row dd { margin: 0; color: var(--color-ink-muted); }
.score-breakdown__bar { height: var(--bar-h); background: var(--color-accent-tint); border-radius: 2px; overflow: hidden; }
.score-breakdown__bar span { display: block; height: 100%; background: var(--color-accent); border-radius: 2px; }
.sponsor-card { background: var(--color-cta); border-radius: var(--r-2xl); padding: var(--sp-8); color: var(--color-on-dark); position: relative; }
.sponsor-card__tag { position: absolute; top: var(--sp-5); right: var(--sp-5); font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-on-dark-muted); border: 1px solid var(--color-on-dark-border); border-radius: var(--r-sm); padding: 2px var(--sp-2); }
.sponsor-card__brand { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--color-cta-tint); letter-spacing: 0.04em; }
.sponsor-card__title { font-size: 17px; font-weight: var(--fw-extrabold); margin-top: var(--sp-3); line-height: 1.25; letter-spacing: -0.01em; }
.sponsor-card p { margin: var(--sp-3) 0 var(--sp-6); font-size: var(--fs-tiny); color: var(--color-cta-tint); line-height: var(--lh-body); }

/* ---------- CTA BAND + TRUST STRIP ---------- */
.cta-band { margin-top: var(--sp-12); background: var(--color-accent-tint); border: 1px solid var(--color-accent-tint-border); border-radius: var(--r-3xl); padding: var(--sp-10) var(--sp-10-5); display: flex; align-items: center; gap: var(--sp-9); flex-wrap: wrap; }
.cta-band__body { flex: 1; min-width: 260px; }
.cta-band__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); letter-spacing: var(--ls-tight); }
.cta-band__sub { margin: var(--sp-3) 0 0; font-size: var(--fs-body-lg); color: var(--color-ink-muted); }
.cta-band__actions { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.cta-band .btn { height: var(--input-h); }
.trust-strip { margin: var(--sp-9) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-7); }
.trust-strip li { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-7) 0; border-top: 1px solid var(--color-border); font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--color-brand-deep); }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--color-brand-deep); color: var(--color-on-dark); padding: var(--sp-13) var(--sp-9) var(--sp-9-5); }
.site-footer__grid { max-width: var(--page-max); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: var(--sp-11); }
.site-footer__about { margin: var(--sp-4-5) 0 0; font-size: var(--fs-small); line-height: var(--lh-relaxed); color: var(--color-on-dark-muted); max-width: 320px; text-wrap: pretty; }
.site-footer h3 { margin: 0 0 var(--sp-7); font-size: var(--fs-body); font-weight: var(--fw-extrabold); }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-small); }
.site-footer a { color: var(--color-on-dark-link); }
.site-footer a:hover { color: var(--color-on-dark); }
.site-footer__legal { max-width: var(--page-max); margin: var(--sp-11) auto 0; padding-top: var(--sp-8); border-top: 1px solid var(--color-on-dark-hairline); font-size: var(--fs-tiny); color: var(--color-on-dark-muted); text-align: center; }

/* ---------- COMPARE TRAY ---------- */
.compare-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tray); padding: 0 var(--sp-9) var(--sp-7); animation: tray-in var(--t-tray); }
.compare-tray__inner { max-width: var(--tray-max); margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--r-2xl); box-shadow: var(--shadow-tray); overflow: hidden; }
.compare-tray__head { background: var(--color-brand-deep); color: var(--color-on-dark); padding: var(--sp-5) var(--sp-8); display: flex; align-items: center; gap: var(--sp-7); }
.compare-tray__title { font-size: var(--fs-body-lg); font-weight: var(--fw-extrabold); }
.compare-tray__hint { font-size: var(--fs-tiny); color: var(--color-on-dark-muted); }
.compare-tray__head .btn { height: var(--h-38); font-size: var(--fs-small); }
.compare-tray__toggle { width: var(--h-34); height: var(--h-34); border: 1px solid var(--color-on-dark-border); border-radius: 50%; background: transparent; color: var(--color-on-dark); font-size: var(--fs-body); }
.compare-tray__items { display: flex; gap: var(--sp-5); padding: var(--sp-6) var(--sp-8); }
.compare-tray.is-collapsed .compare-tray__items { display: none; }
.tray-item { flex: 1; min-width: 200px; display: flex; align-items: center; gap: var(--sp-5); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); }
.tray-item__avatar { width: var(--icon-well); height: var(--icon-well); border-radius: var(--r-md); background: var(--color-accent-tint); display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); font-weight: var(--fw-extrabold); color: var(--color-accent); overflow: hidden; }
.tray-item__name { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray-item__score { font-size: var(--fs-tiny); color: var(--color-ink-muted); }
.tray-item__remove { border: 0; background: transparent; color: var(--color-ink-muted); font-size: var(--fs-h3); line-height: var(--lh-1); }
.tray-slot { flex: 1; min-width: 200px; min-height: 62px; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); border: 1.5px dashed var(--color-accent-pale); border-radius: var(--r-lg); background: var(--color-surface-alt); color: var(--color-brand); font-size: var(--fs-small); font-weight: var(--fw-semibold); padding: var(--sp-4) var(--sp-5); }

/* ---------- TOAST ---------- */
.toast { position: fixed; top: 88px; right: var(--sp-9); z-index: var(--z-toast); background: var(--color-ink); color: var(--color-on-dark); padding: var(--sp-5) var(--sp-7); border-radius: var(--r-lg); font-size: var(--fs-small); font-weight: var(--fw-semibold); box-shadow: var(--shadow-toast); animation: toast-in var(--t-entry); max-width: 340px; }

/* ==========================================================================
   RESPONSIVE — breakpoints: 1440 / 1180 / 1000 / 900 / 640 / 380 (max-width)
   ========================================================================== */

/* Laptop ≤1440: tighter rails */
@media (max-width: 1440px) {
  .layout { grid-template-columns: 250px minmax(0, 1fr) 260px; gap: var(--sp-8); }
  .site-nav { gap: var(--sp-8); }
}

/* ≤1180: drop right rail; its key cards render inline below results */
@media (max-width: 1180px) {
  .logo__tagline { display: none; }
  .layout { grid-template-columns: 240px minmax(0, 1fr); }
  .rail { display: none; }
  .rail-inline { display: grid; }
  .searchbar { grid-template-columns: 1fr 1fr; }
  .searchbar .btn { grid-column: 1 / -1; }
  .cards.is-grid { grid-template-columns: minmax(0, 1fr); }
  .doctor-card__top { grid-template-columns: var(--photo-w) minmax(0, 1fr); }
  .doctor-card__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .doctor-card__actions > * { flex: 1 1 200px; }
  .doctor-card__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-6); }
  .doctor-card__meta > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-9-5); }
  .site-footer__grid > div:last-child { grid-column: 2 / -1; }
}

/* ≤1000: hamburger nav */
@media (max-width: 1000px) {
  .site-nav, .site-header__actions .auth-link { display: none; }
  .menu-btn { display: inline-flex; }
  .hero__row { grid-template-columns: minmax(0, 1fr); }
  .trust-strip { grid-template-columns: 1fr 1fr; }
}

/* ≤900: filters become a full-screen drawer */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .filters { display: none; }
  .filters.is-open { display: block; position: fixed; inset: 0; z-index: var(--z-drawer); overflow: auto; border-radius: 0; max-height: none; padding-bottom: 96px; }
  .filters.is-open .filters__apply { position: fixed; left: 0; right: 0; bottom: 0; background: var(--color-surface); padding: var(--sp-5) var(--sp-8); border-top: 1px solid var(--color-border); z-index: var(--z-drawer-bar); flex-direction: row; }
  .filters.is-open .filters__apply .btn { flex: 1; height: var(--input-h); }
  .filters__close, .results-head__filter-btn { display: inline-flex; }
  .doctor-card__actions > * { flex: 1 1 100%; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid > div:first-child, .site-footer__grid > div:last-child { grid-column: 1 / -1; }
  .cta-band { flex-direction: column; align-items: flex-start; padding: var(--sp-9); }
  .rail-inline { grid-template-columns: 1fr 1fr; }
  .compare-tray__items { flex-wrap: wrap; }
}

/* ≤640: phone */
@media (max-width: 640px) {
  .page { padding-left: var(--sp-7); padding-right: var(--sp-7); padding-bottom: var(--sp-10); }
  .site-header__inner { padding: 0 var(--sp-7); height: var(--header-h-mobile); gap: var(--sp-5); }
  .site-header__inner .btn--primary { display: none; }
  .breadcrumb { display: none; }
  .hero__title { font-size: var(--fs-h2); }
  .hero__sub { font-size: var(--fs-body); }
  .searchbar { grid-template-columns: 1fr; padding: var(--sp-4); }
  .mobile-searchrow { display: flex; }
  .bestmatch { flex-wrap: wrap; }
  .bestmatch .btn { width: 100%; }
  .trust-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-5); }
  .trust-metrics__item + .trust-metrics__item { border-left: 0; }
  .results-head { flex-direction: column; align-items: stretch; }
  .results-head__title { font-size: var(--fs-h4); }
  .results-head__controls { display: grid; grid-template-columns: auto auto 1fr; }
  .results-head__sort { grid-column: 1 / -1; }
  .results-head__sort .select-sm { flex: 1; }
  .doctor-card__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding: var(--sp-7); }
  .doctor-card__photo-wrap { display: flex; gap: var(--sp-5); align-items: flex-start; }
  .doctor-card__photo { width: 72px; height: 84px; font-size: var(--fs-logo); }
  .doctor-card__photo-stats { margin-top: 0; width: auto; flex-direction: row; flex-wrap: wrap; }
  .doctor-card__photo-stats .stat-pill { padding: 0 var(--sp-4); }
  .doctor-card__name { font-size: 17px; }
  .doctor-card__facts > span + span { border-left: 0; padding: 0 var(--sp-4) 0 0; }
  .doctor-card__meta { grid-template-columns: 1fr 1fr; padding: var(--sp-5) var(--sp-7); gap: var(--sp-5) 0; }
  .doctor-card__meta > div { border-left: 0; padding: 0; }
  .doctor-card__meta > div + div { border-left: 0; }
  .banner-guide { padding: var(--sp-4-5); }
  .mini-card { flex-basis: 210px; width: 210px; }
  .pagination { justify-content: center; }
  .pagination__perpage { display: none; }
  .rail-inline { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr; gap: 0; }
  .cta-band__title { font-size: var(--fs-stat); }
  .site-footer { padding: var(--sp-11) var(--sp-7) var(--sp-9); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
  .compare-tray { padding: 0; }
  .compare-tray__inner { border-radius: var(--r-3xl) var(--r-3xl) 0 0; }
  .compare-tray__head { padding: var(--sp-4) var(--sp-6); }
  .compare-tray__hint { display: none; }
  .compare-tray__items { padding: var(--sp-4) var(--sp-6); }
  .compare-tray__items > * { min-width: 100%; }
  .toast { left: var(--sp-7); right: var(--sp-7); top: auto; bottom: var(--sp-7); max-width: none; }
}

@media (max-width: 380px) {
  .trust-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-head__controls { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   3. CLINIC DIRECTORY FAMILY — Screens 2–6
   Shared blocks first, then per-screen blocks, then states, then responsive.
   Every :hover/:focus-visible/:active is doubled with .is-hover/.is-focus/.is-active
   so states-clinics.html can show them statically.
   ========================================================================== */

/* ---- Shared: page, layout, card ---- */
.page { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-8) var(--sp-9) var(--sp-12); }
.layout--two-col { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--sp-8); align-items: start; }
.layout--two-col.layout--rail-md { grid-template-columns: minmax(0, 1fr) var(--rail-w-md); }
.layout--two-col.layout--rail-lg { grid-template-columns: minmax(0, 1fr) var(--rail-w-lg); }
.layout--sidebar-left { display: grid; grid-template-columns: var(--filters-w) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.layout-main { display: flex; flex-direction: column; gap: var(--sp-7); min-width: 0; }
[data-screen] .rail { display: flex; flex-direction: column; gap: var(--sp-7); position: sticky; top: var(--tabs-offset); }
.rail--top { top: var(--sp-8); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-2xl); padding: var(--sp-9); }
.card--tint { background: var(--color-accent-tint); border-color: var(--color-accent-tint-border); }
.card--dark { background: var(--color-brand-deep); border: 0; color: var(--color-on-dark); }
.card--flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.card-head--tight { margin-bottom: var(--sp-2); }
.card-title { margin: 0; font-size: var(--fs-18); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); }
.card-title--sm { font-size: var(--fs-15); }
.card-title-count { color: var(--color-ink-muted); font-weight: var(--fw-semibold); font-size: var(--fs-14); }
.card-sub { margin: 0 0 var(--sp-7); font-size: var(--fs-13); color: var(--color-ink-muted); line-height: var(--lh-body); }
.card-link { font-size: var(--fs-13); font-weight: var(--fw-semibold); white-space: nowrap; }
.card--dark .card-title { color: var(--color-on-dark); font-size: var(--fs-16); line-height: var(--lh-snug); }
.card--dark .card-sub, .card--dark p { color: var(--color-on-dark-muted); }
.card-kicker { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps-wide); text-transform: uppercase; color: var(--color-accent-soft); }
.card--dark .card-kicker { color: var(--color-accent-soft); }
.card .card-kicker { color: var(--color-ink-muted); letter-spacing: var(--ls-caps-narrow); }

/* ---- Shared: pills & badges ---- */
.pill { display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--h-30); padding: 0 var(--sp-5); border-radius: var(--r-7); border: 1px solid var(--color-border); background: var(--color-bg); font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--color-brand-deep); white-space: nowrap; }
.pill--rating { background: var(--color-rating-bg); border-color: var(--color-rating-border); color: var(--color-ink); font-size: var(--fs-13); font-weight: var(--fw-extrabold); }
.pill--rating .pill-muted { font-weight: var(--fw-medium); color: var(--color-ink-muted); font-size: var(--fs-11); }
.pill--rating svg { fill: var(--color-rating); stroke: none; }
.pill--success { color: var(--color-success); }
.pill--partner { background: var(--color-cta-tint-bg); border-color: var(--color-cta-line); color: var(--color-cta); }
.pill--sm { height: var(--h-26); font-size: var(--fs-12); font-weight: var(--fw-semibold); padding: 0 var(--sp-4); border-radius: var(--r-sm); }
.pill-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps-narrow); text-transform: uppercase; border: 1px solid var(--color-border); border-radius: var(--r-sm); padding: 1px var(--sp-2); color: var(--color-ink-muted); white-space: nowrap; }
.badge--partner { color: var(--color-cta); border-color: var(--color-cta-line); background: var(--color-cta-tint-bg); }
.badge--chain { font-size: var(--fs-11); text-transform: none; letter-spacing: 0; font-weight: var(--fw-semibold); }
.badge-verified { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--color-success); font-size: var(--fs-12); font-weight: var(--fw-bold); white-space: nowrap; }
.badge-verified svg { fill: var(--color-success); stroke: none; }
.verify-tag { display: inline-flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-11-5); font-weight: var(--fw-semibold); color: var(--color-brand-deep); background: var(--color-bg); border: 1px solid var(--color-border); padding: 3px var(--sp-3); border-radius: var(--r-sm); white-space: nowrap; }
.verify-tag svg { stroke: var(--color-accent); }
.verify-tag--pending { color: var(--color-ink-muted); background: var(--color-surface); border-style: dashed; border-color: var(--color-accent-line); }
.verify-tag--pending svg { stroke: var(--color-ink-muted); }
.verify-note { font-size: var(--fs-11-5); color: var(--color-ink-muted); }

/* ---- Shared: buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); height: var(--h-40); padding: 0 var(--sp-7); border-radius: var(--r-md); border: 0; font-size: var(--fs-14); font-weight: var(--fw-bold); white-space: nowrap; text-decoration: none; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.btn:hover, .btn.is-hover { text-decoration: none; }
.btn--primary { background: var(--color-cta); color: var(--color-on-dark); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--color-cta-hover); color: var(--color-on-dark); }
.btn--primary:active, .btn--primary.is-active { background: var(--color-brand-deep); }
.btn--secondary { background: var(--color-surface); color: var(--color-accent); border: 1.5px solid var(--color-accent); }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--color-accent); color: var(--color-on-dark); }
.btn--secondary:active, .btn--secondary.is-active { background: var(--color-brand-deep); border-color: var(--color-brand-deep); color: var(--color-on-dark); }
.btn--success { background: var(--color-success); color: var(--color-on-dark); }
.btn--success:hover, .btn--success.is-hover { background: var(--color-success-hover); color: var(--color-on-dark); }
.btn--dark { background: var(--color-brand-deep); color: var(--color-on-dark); }
.btn--dark:hover, .btn--dark.is-hover { background: var(--color-accent); color: var(--color-on-dark); }
.btn--ghost { background: none; color: var(--color-accent); padding: 0; height: auto; font-size: var(--fs-13); }
.btn--ghost:hover, .btn--ghost.is-hover { text-decoration: underline; }
.btn--glass { background: var(--color-on-dark-glass); border: 1px solid var(--color-on-dark-line-strong); color: var(--color-on-dark); height: var(--h-28); padding: 0 var(--sp-5); border-radius: var(--r-pill); font-size: var(--fs-12-5); font-weight: var(--fw-semibold); }
.btn--glass:hover, .btn--glass.is-hover { background: var(--color-on-dark-glass-hover); color: var(--color-on-dark); }
.btn--sm { height: var(--h-36); padding: 0 var(--sp-6); font-size: var(--fs-13); }
.btn--xs { height: var(--h-38); padding: 0 var(--sp-7); font-size: var(--fs-13); }
.btn--lg { height: var(--h-44); font-size: var(--fs-15); padding: 0 var(--sp-9); }
.btn--xl { height: var(--h-52); font-size: var(--fs-15); padding: 0 var(--sp-9-5); border-radius: var(--r-lg); }
.btn--block { width: 100%; }
.btn.is-disabled, .btn:disabled { background: var(--color-accent-soft); color: var(--color-on-dark); border-color: transparent; cursor: not-allowed; opacity: 0.7; }
.btn--secondary.is-disabled, .btn--secondary:disabled { background: var(--color-surface); color: var(--color-accent-pale); border-color: var(--color-accent-pale); opacity: 1; }
.btn--locked { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); height: var(--h-40); border-radius: var(--r-md); background: var(--color-bg); border: 1px dashed var(--color-accent-line); color: var(--color-ink-muted); font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.btn--toggle { height: var(--h-36); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-brand-deep); font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.btn--toggle:hover, .btn--toggle.is-hover { border-color: var(--color-accent-line); }
.btn--toggle.is-selected { border-color: var(--color-accent); background: var(--color-accent-tint); color: var(--color-accent); }
.btn--toggle.is-saved svg { fill: var(--color-cta); stroke: var(--color-cta); }
.icon-btn { width: var(--h-30); height: var(--h-30); border: 1px solid var(--color-border); border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; color: var(--color-brand-deep); background: var(--color-surface); }
.icon-btn:hover, .icon-btn.is-hover { border-color: var(--color-accent-line); text-decoration: none; color: var(--color-brand-deep); }

/* ---- Shared: form fields ---- */
.field { display: flex; flex-direction: column; gap: var(--sp-1-5); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.field-optional { color: var(--color-ink-muted); font-weight: var(--fw-medium); }
.field-input, .field-select, .field-textarea { height: var(--h-42); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 0 var(--sp-5); font-size: var(--fs-14); background: var(--color-surface-alt); color: var(--color-ink); font-family: inherit; width: 100%; transition: border-color var(--t-fast); }
.field-textarea { height: auto; padding: var(--sp-4) var(--sp-5); resize: vertical; }
.field-input:hover, .field-input.is-hover, .field-textarea:hover, .field-select:hover { border-color: var(--color-accent-line); }
.field-input:focus-visible, .field-input.is-focus, .field-select:focus-visible, .field-textarea:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 0; border-color: var(--color-brand); }
.field-input:disabled, .field-input.is-disabled { background: var(--color-bg); color: var(--color-ink-muted); cursor: not-allowed; }
.field.has-error .field-input, .field.has-error .field-select { border-color: var(--color-error); background: var(--color-error-tint); }
.field-error-msg { display: none; font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--color-error); }
.field.has-error .field-error-msg { display: block; }
.field-check { display: flex; gap: var(--sp-4); align-items: flex-start; font-size: var(--fs-12); font-weight: var(--fw-regular); color: var(--color-ink-muted); line-height: var(--lh-body); }
.field-check input { margin-top: 2px; flex-shrink: 0; }
.field-check.has-error { color: var(--color-error); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-5); }
.search-box { display: flex; align-items: center; gap: var(--sp-4); height: var(--h-52); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: 0 var(--sp-6); background: var(--color-surface-alt); }
.search-box--sm { height: var(--h-44); border-radius: var(--r-md); padding: 0 var(--sp-5); }
.search-box--xs { height: var(--h-40); min-width: 260px; }
.search-box svg { stroke: var(--color-accent); flex-shrink: 0; }
.search-box input, .search-box select { border: 0; background: transparent; font-size: var(--fs-15); flex: 1; min-width: 0; outline: none; color: var(--color-ink); font-family: inherit; }
.search-box--sm input, .search-box--xs input { font-size: var(--fs-14); }
.search-box:focus-within { border-color: var(--color-brand); outline: 2px solid var(--color-brand); outline-offset: 0; }

/* ---- Shared: clinic-mini (compact clinic card used in every "other clinics" grid) ---- */
.clinic-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-5); }
.clinic-mini-grid--wide { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.clinic-mini { border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-5); background: var(--color-surface-alt); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; color: var(--color-ink); transition: border-color var(--t-fast); }
.clinic-mini:hover, .clinic-mini.is-hover { border-color: var(--color-accent); text-decoration: none; color: var(--color-ink); }
/* ⚠️ white-space: NORMAL, not nowrap -- the second declaration in this file
   that differs from the delivered package, ruled 2026-09-17. The package's own
   rule truncates with an ellipsis, and its mock never notices because its
   longest sample name is 31 characters. 1,705 of the 4,801 registry names are
   over 34, so in a 237px card the design's rule cut them mid-word:
   "Kriyasakthi Fertility Centre unit of Melmaruv…". The name is the one thing
   on a clinic-mini that has to be readable, so it wraps. The same rule is still
   in force on .clinic-card-name and .doctor-card-name and has the same effect
   there; those are reported, not changed. */
.clinic-mini-name { font-size: var(--fs-13); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.clinic-mini-sub { font-size: var(--fs-11-5); color: var(--color-ink-muted); }
.clinic-mini-foot { display: flex; justify-content: space-between; font-size: var(--fs-12); margin-top: var(--sp-1); }
.rating-inline { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--fw-bold); }
.rating-inline svg { fill: var(--color-rating); stroke: none; }
.rating-inline .rating-src { font-weight: var(--fw-medium); color: var(--color-ink-muted); }
.score-inline { font-weight: var(--fw-bold); }
.score--high { color: var(--color-score-high); } .score--mid { color: var(--color-score-mid); } .score--low { color: var(--color-score-low); }

/* ---- Shared: stat-list, mono tile, misc ---- */
.stat-list { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-13); }
.stat-list-row { display: flex; justify-content: space-between; gap: var(--sp-5); border-bottom: 1px solid var(--color-border-soft); padding-bottom: var(--sp-3); }
.stat-list-row dt { color: var(--color-ink-muted); } .stat-list-row dd { margin: 0; font-weight: var(--fw-bold); color: var(--color-ink); text-align: right; }
.mono-tile { display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--r-lg); background: var(--color-accent-tint); color: var(--color-accent); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); }
.mono-tile--logo { width: var(--logo-tile); height: var(--logo-tile); border-radius: var(--r-2xl); border: 1px solid var(--color-border); font-size: var(--fs-22); overflow: hidden; }
.mono-tile--logo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: var(--logo-ratio); }
.mono-tile--logo.is-empty { border-style: dashed; border-color: var(--color-accent-line); }
.mono-tile--card { width: var(--mono-tile); height: var(--mono-tile); border-radius: var(--r-xl); font-size: var(--fs-18); }
.mono-tile--sm { width: var(--logo-tile-sm); height: var(--logo-tile-sm); font-size: var(--fs-15); }
.mono-tile--xs { width: var(--logo-tile-xs); height: var(--logo-tile-xs); border-radius: var(--r-sm); font-size: var(--fs-10); }
.dashed-box { border: 1px dashed var(--color-accent-line); border-radius: var(--r-lg); padding: var(--sp-7); background: var(--color-surface-alt); display: flex; align-items: center; gap: var(--sp-7); }
.dashed-box-title { font-size: var(--fs-14); font-weight: var(--fw-bold); }
.dashed-box-body { font-size: var(--fs-12-5); color: var(--color-ink-muted); margin-top: 3px; line-height: var(--lh-body); }
/* The editorial note. THE ONLY .editorial-note RULE IN THIS FILE -- see the note
   at former section 11 below. Everything the box needs is declared here, so no
   part of it depends on a second rule elsewhere in the cascade. */
.editorial-note { margin: var(--sp-10) 0 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-4-5) var(--sp-9); font-size: var(--fs-13); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--color-ink-muted); }
.editorial-note strong { color: var(--color-ink); font-weight: var(--fw-bold); }
.byline { font-size: var(--fs-13); color: var(--color-ink-muted); }

/* ---- Shared: skeleton / empty / error (⚠ loading & error drawn to convention) ---- */
.skeleton { background: var(--color-accent-tint); border-radius: var(--r-sm); }
.skeleton-card { border: 1px solid var(--color-border); border-radius: var(--r-lg); background: var(--color-surface-alt); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.skeleton-line { height: 10px; }
.is-loading .skeleton, .is-loading .skeleton-line { animation: vf-pulse 1.2s ease-in-out infinite; }
@keyframes vf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
[data-screen] .empty-state { border: 1px dashed var(--color-accent-line); border-radius: var(--r-xl); padding: var(--sp-10); text-align: center; color: var(--color-ink-muted); font-size: var(--fs-13); background: var(--color-surface); }
.error-state { border: 1px solid var(--color-error); background: var(--color-error-tint); border-radius: var(--r-xl); padding: var(--sp-8); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-7); font-size: var(--fs-13); color: var(--color-ink); flex-wrap: wrap; }

/* ---- Shared: header, mobile menu, breadcrumb, footer — reused from Screen 1 blocks above
   (.site-header, .site-header__inner, .logo, .site-nav, .site-header__actions, .auth-link, .menu-btn,
    .mobile-menu, .breadcrumb, .site-footer, .site-footer__grid, .site-footer__legal). ---- */
.site-footer__grid--4 { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.site-header--static { position: relative; }   /* Screen 2: header scrolls away so the section tabs can pin at top:0 */

/* ---- Screen 2: profile hero ---- */
.profile-hero { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--sp-9); padding: var(--sp-9); }
.profile-hero-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.profile-hero-title-row { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.profile-hero-title { margin: 0; font-size: var(--fs-30); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); letter-spacing: var(--ls-tight); line-height: var(--lh-115); }
.profile-hero-meta { font-size: var(--fs-14); color: var(--color-ink); font-weight: var(--fw-semibold); }
.profile-hero-address { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--color-ink-muted); }
.profile-hero-address svg { stroke: var(--color-accent); }
.profile-hero-facts { margin-top: var(--sp-1); }
.profile-hero-verify { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); align-items: center; }
.profile-hero-social { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-1); font-size: var(--fs-12); color: var(--color-ink-muted); }
.chain-pill { display: inline-flex; align-items: center; gap: var(--sp-3); align-self: flex-start; height: var(--h-32); padding: 0 var(--sp-4) 0 var(--sp-2); border-radius: var(--r-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-brand-deep); font-size: var(--fs-12-5); font-weight: var(--fw-semibold); }
.chain-pill:hover, .chain-pill.is-hover { border-color: var(--color-accent); text-decoration: none; color: var(--color-brand-deep); }
.profile-hero-side { display: flex; flex-direction: column; gap: var(--sp-4); }
[data-screen] .score-box { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-7); display: flex; gap: var(--sp-7); align-items: center; }
[data-screen] .score-ring { width: var(--ring-size); height: var(--ring-size); position: relative; flex-shrink: 0; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring-track { stroke: var(--color-score-track); } .score-ring-fill { stroke: var(--color-score-mid); stroke-linecap: round; }
.score-ring-fill--high { stroke: var(--color-score-high); } .score-ring-fill--low { stroke: var(--color-score-low); }
.score-ring-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-30); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); letter-spacing: var(--ls-tight); }
.score-box-label { font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: var(--ls-caps-narrow); }
.score-box-band { font-size: var(--fs-16); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); margin-top: 2px; }
.score-box-note { font-size: var(--fs-12); color: var(--color-ink-muted); line-height: var(--lh-normal); margin-top: var(--sp-1); }
.hero-actions-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.hero-actions-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.hero-actions-grid-3 .btn, .hero-actions-grid-2 .btn { padding: 0 var(--sp-3); }

/* ---- Screen 2: sticky section tabs ---- */
.section-tabs { position: sticky; top: 0; z-index: var(--z-tabs); background: var(--color-bg); padding: var(--sp-3) 0 var(--sp-5); margin-bottom: var(--sp-5); }
.section-tabs-inner { display: flex; gap: var(--sp-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--sp-1); overflow-x: auto; overflow-y: hidden; box-shadow: var(--shadow-tabs); }
.section-tab { height: var(--h-36); padding: 0 var(--sp-7); border: 0; border-radius: var(--r-7); font-size: var(--fs-13); font-weight: var(--fw-semibold); white-space: nowrap; background: transparent; color: var(--color-ink-muted); transition: background var(--t-fast), color var(--t-fast); }
.section-tab:hover, .section-tab.is-hover { color: var(--color-brand-deep); background: var(--color-bg); }
.section-tab.is-active { background: var(--color-accent-tint); color: var(--color-accent); }
.section-tab:active { background: var(--color-accent-tint-border); }

/* ---- Screen 2: body sections ---- */
.profile-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--sp-8); align-items: start; }
.section { scroll-margin-top: var(--tabs-offset); }
.enquiry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(var(--enq-aside-min), var(--enq-aside-max)); }
.enquiry-form { padding: var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-6); }
.enquiry-intro p { margin: var(--sp-2) 0 0; font-size: var(--fs-13); color: var(--color-ink-muted); line-height: var(--lh-body); }
.enquiry-actions { display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap; }
.enquiry-assurance { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); color: var(--color-ink-muted); }
.enquiry-assurance svg { stroke: var(--color-success); }
.enquiry-aside { background: var(--color-accent-tint); border-left: 1px solid var(--color-accent-tint-border); padding: var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-6); }
.enquiry-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-5); font-size: var(--fs-13); line-height: var(--lh-body); }
.enquiry-steps li { display: flex; gap: var(--sp-4); }
.enquiry-step-num { width: var(--logo-tile-xs); height: var(--logo-tile-xs); border-radius: var(--r-circle); background: var(--color-accent); color: var(--color-on-dark); font-size: var(--fs-11); font-weight: var(--fw-extrabold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.enquiry-aside-foot { margin-top: auto; padding-top: var(--sp-6); border-top: 1px solid var(--color-accent-tint-border); font-size: var(--fs-12); color: var(--color-ink-muted); line-height: var(--lh-body); }
.enquiry-success { padding: var(--sp-10) var(--sp-9); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); justify-content: center; }
.enquiry-success-icon { width: var(--icon-well-lg); height: var(--icon-well-lg); border-radius: var(--r-circle); background: var(--color-success-tint); display: flex; align-items: center; justify-content: center; }
.enquiry-success-icon svg { stroke: var(--color-success); }
.enquiry-success p { margin: 0; font-size: var(--fs-14); color: var(--color-ink-muted); line-height: var(--lh-155); max-width: 460px; }
.form-error-banner { display: flex; gap: var(--sp-4); align-items: center; border: 1px solid var(--color-error); background: var(--color-error-tint); color: var(--color-ink); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-13); }
/* ⚠️ auto-FILL, not auto-fit -- the one declaration in this file that differs
   from the delivered package, ruled 2026-09-17. With auto-fit a clinic that
   declares ONE doctor collapses the empty tracks and stretches that single
   card to the full 983px of the content column; measured on
   /find/clinic/amritsar/indira-ivf-clinic-a-unit-of-indira-ivf-hospital-pvt-ltd/,
   where the design's mock always had three. auto-fill keeps the empty tracks,
   so one card is 230px and the row fills left to right. Three or more cards
   render identically under both. Raised with the designer. */
.doctor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-5); }
[data-screen] .doctor-card { border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-6); background: var(--color-surface-alt); display: flex; gap: var(--sp-5); align-items: center; min-width: 0; }
.doctor-card-avatar { width: var(--avatar-doctor); height: var(--avatar-doctor); border-radius: var(--r-circle); background: var(--color-accent-tint); color: var(--color-accent); font-weight: var(--fw-extrabold); font-size: var(--fs-15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doctor-card-name { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doctor-card-sub { font-size: var(--fs-12); color: var(--color-ink-muted); margin-top: 2px; }
.doctor-card-locked { font-size: var(--fs-11-5); color: var(--color-ink-muted); display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1); }
.treatment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.treatment-item { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); background: var(--color-surface-alt); color: var(--color-ink); font-size: var(--fs-13-5); font-weight: var(--fw-semibold); }
.treatment-item:hover, .treatment-item.is-hover { border-color: var(--color-accent); text-decoration: none; color: var(--color-ink); }
.treatment-item-note { font-size: var(--fs-11); color: var(--color-ink-muted); font-weight: var(--fw-medium); white-space: nowrap; }
.photo-strip { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-2); scroll-snap-type: x mandatory; }
.photo-strip-item { margin: 0; flex: 0 0 var(--photo-strip-w); scroll-snap-align: start; min-width: 0; }
.photo-strip-thumb { aspect-ratio: var(--photo-ratio); border-radius: var(--r-lg); overflow: hidden; background: var(--color-accent-tint); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-accent-soft); }
.photo-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-strip-caption { margin-top: var(--sp-2); font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--color-brand-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locked-section { position: relative; overflow: hidden; }
.locked-section-ghost { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-5); min-height: 190px; filter: blur(var(--blur-ghost)); opacity: 0.55; pointer-events: none; }
.locked-section-overlay { position: absolute; left: var(--sp-9); right: var(--sp-9); bottom: var(--sp-9); top: 64px; display: flex; align-items: center; justify-content: center; }
.lockcard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-8); display: flex; align-items: center; gap: var(--sp-7); max-width: 620px; box-shadow: var(--shadow-lockcard); }
.lockcard-icon { width: var(--icon-well); height: var(--icon-well); border-radius: var(--r-circle); background: var(--color-accent-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lockcard-icon svg { stroke: var(--color-accent); }
.lockcard-title { font-size: var(--fs-14); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); }
.lockcard-body { font-size: var(--fs-12-5); color: var(--color-ink-muted); margin-top: 3px; line-height: var(--lh-body); }
.lockcard-actions { display: flex; flex-direction: column; gap: var(--sp-2); flex-shrink: 0; }
.lockcard-actions .btn--ghost { font-size: var(--fs-12); text-align: center; }
.location-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--hours-w); gap: var(--sp-8); }
.map-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--color-border); min-height: var(--map-h); background: var(--color-accent-tint); }
.map-frame iframe { width: 100%; height: var(--map-h); border: 0; display: block; }
.map-frame--sm, .map-frame--sm iframe { min-height: var(--map-h-sm); height: var(--map-h-sm); }
.hours-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-13); }
.hours-row { display: flex; justify-content: space-between; padding: var(--sp-1) 0; color: var(--color-ink-muted); }
.hours-row.is-today { color: var(--color-ink); font-weight: var(--fw-bold); }
.hours-row.is-today .hours-open { color: var(--color-success); }
.distance-list { margin: var(--sp-6) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-12-5); color: var(--color-ink-muted); }
.distance-list li { display: flex; justify-content: space-between; gap: var(--sp-3); }
.distance-list strong { color: var(--color-ink); font-weight: var(--fw-semibold); }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-9); margin: 0; padding: 0; list-style: none; }
.faq-item { display: flex; gap: var(--sp-4); font-size: var(--fs-14); line-height: var(--lh-body); color: var(--color-ink); }
.faq-item svg { stroke: var(--color-accent); flex-shrink: 0; margin-top: 3px; }
.contact-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-13); }
.contact-list li { display: flex; gap: var(--sp-4); align-items: center; }
.contact-list svg { stroke: var(--color-accent); flex-shrink: 0; }
.contact-list .is-whatsapp svg { stroke: var(--color-success); }
.claim-card ul { margin: var(--sp-6) 0 var(--sp-4-5); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-13); color: var(--color-on-dark-muted); }
.claim-card li { display: flex; gap: var(--sp-3); align-items: center; }
.claim-card li::before { content: ""; width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-circle); background: var(--color-accent-soft); flex-shrink: 0; }
.claim-card-note { font-size: var(--fs-11-5); color: var(--color-on-dark-muted); margin-top: var(--sp-4); text-align: center; }
.compare-card-count { font-size: var(--fs-13); font-weight: var(--fw-bold); margin-bottom: var(--sp-4); }
.score-factors { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.score-factor-head { display: flex; justify-content: space-between; font-size: var(--fs-12); margin-bottom: var(--sp-1); }
.score-factor-head dt { font-weight: var(--fw-semibold); color: var(--color-brand-deep); } .score-factor-head dd { margin: 0; color: var(--color-ink-muted); }
.score-factor.is-locked .score-factor-head dt { color: var(--color-ink-muted); }
.score-bar { height: var(--bar-h); background: var(--color-score-track); border-radius: 2px; overflow: hidden; }
.score-bar-fill { display: block; height: 100%; background: var(--color-accent); border-radius: 2px; }
.score-factor.is-locked .score-bar-fill { background: var(--color-score-locked); }

/* ---- Screen 3: directory hero ---- */
.dir-hero { position: relative; overflow: hidden; background: var(--color-brand-deep); border-radius: var(--r-3xl); padding: var(--sp-12) var(--sp-10) 0; margin-bottom: var(--sp-10); color: var(--color-on-dark); }
.dir-hero-dots { position: absolute; inset: 0; background-image: radial-gradient(var(--color-hero-dots) 1px, transparent 1.5px); background-size: var(--hero-dot-grid) var(--hero-dot-grid); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%); }
.dir-hero-glow { position: absolute; border-radius: var(--r-circle); pointer-events: none; }
.dir-hero-glow--accent { right: -120px; top: -140px; width: var(--hero-glow); height: var(--hero-glow); background: radial-gradient(circle, var(--color-hero-glow-accent), transparent 70%); }
.dir-hero-glow--cta { left: -160px; bottom: -40px; width: var(--hero-glow-sm); height: var(--hero-glow-sm); background: radial-gradient(circle, var(--color-hero-glow-cta), transparent 70%); }
.dir-hero-content { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.dir-hero-badge { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--color-on-dark-muted); letter-spacing: var(--ls-caps-wide); text-transform: uppercase; border: 1px solid var(--color-on-dark-line-strong); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-6); white-space: nowrap; }
.dir-hero-badge svg { stroke: var(--color-accent-soft); }
.dir-hero-title { margin: var(--sp-7) 0 0; font-size: var(--fs-40); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); text-wrap: balance; }
.dir-hero-lede { margin: var(--sp-6) auto 0; font-size: var(--fs-15); color: var(--color-on-dark-muted); line-height: var(--lh-relaxed); max-width: 600px; text-wrap: pretty; }
.dir-hero-search { position: relative; max-width: 860px; margin: var(--sp-9-5) auto 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--sp-4); background: var(--color-surface); padding: var(--sp-4); border-radius: var(--r-2xl); box-shadow: var(--shadow-search-float); }
.dir-hero-popular { position: relative; display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4-5); font-size: var(--fs-12-5); color: var(--color-on-dark-muted); align-items: center; }
.dir-hero-popular + .dir-hero-popular { margin-top: var(--sp-3); }
.dir-hero-popular-label { min-width: 96px; text-align: right; }
.dir-hero-stats { position: relative; margin: var(--sp-10-5) var(--sp-neg-page) 0; padding: var(--sp-4-5) var(--sp-10); border-top: 1px solid var(--color-on-dark-hairline); background: var(--color-on-dark-well); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-7); }
.dir-hero-stat { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
.dir-hero-stat-icon { width: var(--icon-well); height: var(--icon-well); border-radius: var(--r-lg); background: var(--color-hero-dots); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-on-dark-muted); }
.dir-hero-stat-value { display: block; font-size: var(--fs-20); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.dir-hero-stat-label { display: block; font-size: var(--fs-12); color: var(--color-on-dark-muted); margin-top: 2px; }
.section-block { margin-bottom: var(--sp-10-5); }
.section-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.section-block-title { margin: 0; font-size: var(--fs-22); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); }
.section-block-note { font-size: var(--fs-13); color: var(--color-ink-muted); }
.state-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.state-card { display: flex; flex-direction: column; gap: var(--sp-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-7); color: var(--color-ink); min-width: 0; transition: border-color var(--t-fast); }
.state-card:hover, .state-card.is-hover { border-color: var(--color-accent); text-decoration: none; color: var(--color-ink); }
.state-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.state-card-name { font-size: var(--fs-15); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); line-height: var(--lh-heading); }
.state-card-rank { font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--color-accent); background: var(--color-accent-tint); border-radius: var(--r-sm); padding: 2px var(--sp-7-5); white-space: nowrap; }
.state-card-count { display: flex; align-items: baseline; gap: var(--sp-2); }
.state-card-count strong { font-size: var(--fs-28); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); letter-spacing: var(--ls-tight); line-height: var(--lh-1); }
.state-card-count span { font-size: var(--fs-12); color: var(--color-ink-muted); }
.state-card-bar-head { display: flex; justify-content: space-between; font-size: var(--fs-11-5); color: var(--color-ink-muted); margin-bottom: var(--sp-1-5); }
.state-card-bar-head strong { color: var(--color-ink); font-weight: var(--fw-bold); }
.state-card-bar { height: var(--bar-h-lg); background: var(--color-accent-tint); border-radius: 3px; overflow: hidden; display: block; }
.state-card-bar-fill { display: block; height: 100%; background: var(--color-accent); border-radius: 3px; }
.state-card-foot { font-size: var(--fs-12); color: var(--color-ink-muted); border-top: 1px solid var(--color-border-soft); padding-top: var(--sp-3); }
.state-card-foot strong { color: var(--color-ink); font-weight: var(--fw-semibold); }
.section-block-actions { margin-top: var(--sp-6); display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap; }
.chain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-5); }
.chain-card { display: flex; gap: var(--sp-5); align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-6); color: var(--color-ink); transition: border-color var(--t-fast); }
.chain-card:hover, .chain-card.is-hover { border-color: var(--color-accent); text-decoration: none; color: var(--color-ink); }
.chain-card-name { display: block; font-weight: var(--fw-bold); font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chain-card-sub { display: block; font-size: var(--fs-12); color: var(--color-ink-muted); margin-top: 2px; }
.claim-band { display: flex; flex-direction: column; }
.claim-band .btn { margin-top: auto; }

/* ---- Screen 4: geo hero, cities ---- */
.geo-hero { display: grid; grid-template-columns: minmax(0, 1fr) var(--hero-side-w); gap: var(--sp-9); margin-bottom: var(--sp-9-5); }
.geo-hero-title { margin: 0; font-size: var(--fs-34); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); letter-spacing: var(--ls-tight); line-height: var(--lh-115); }
.geo-hero-lede { margin: var(--sp-5) 0 0; font-size: var(--fs-15); color: var(--color-ink-muted); line-height: var(--lh-relaxed); max-width: 640px; text-wrap: pretty; }
.geo-hero .pill-row { margin-top: var(--sp-7); }
.geo-hero-search { align-self: start; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4-5); }
.geo-hero-search-title { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--color-brand-deep); }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.city-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--sp-6); color: var(--color-ink); display: flex; flex-direction: column; gap: var(--sp-1); transition: border-color var(--t-fast); }
.city-card:hover, .city-card.is-hover { border-color: var(--color-accent); text-decoration: none; color: var(--color-ink); }
.city-card-head { display: flex; justify-content: space-between; gap: var(--sp-3); font-weight: var(--fw-bold); font-size: var(--fs-14); }
.city-card-count { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--color-accent); }
.city-card-sub { font-size: var(--fs-12); color: var(--color-ink-muted); }
.chain-chips { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.chain-chip { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--h-34); padding: 0 var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-ink); font-size: var(--fs-13); font-weight: var(--fw-semibold); white-space: nowrap; transition: border-color var(--t-fast); }
.chain-chip:hover, .chain-chip.is-hover { border-color: var(--color-accent); text-decoration: none; color: var(--color-ink); }
.chain-chip strong { color: var(--color-accent); font-weight: var(--fw-bold); }

/* ---- Screen 5: city intro, filters, results ---- */
.city-intro { padding: var(--sp-9-5); margin-bottom: var(--sp-8); }
.city-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w-md); gap: var(--sp-9-5); }
.city-intro-title { margin: 0; font-size: var(--fs-32); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); letter-spacing: var(--ls-tight); line-height: var(--lh-115); }
.city-intro .pill-row { margin: var(--sp-5) 0 var(--sp-4-5); }
.city-intro-body { font-size: var(--fs-15); line-height: var(--lh-170); color: var(--color-ink); text-wrap: pretty; display: flex; flex-direction: column; gap: var(--sp-5); }
.city-intro-body p { margin: 0; }
.city-intro-map { display: flex; flex-direction: column; gap: var(--sp-5); }
.city-intro-clusters { font-size: var(--fs-12); color: var(--color-ink-muted); line-height: var(--lh-body); }
[data-screen] .filters { display: flex; flex-direction: column; gap: var(--sp-7); padding: var(--sp-4-5); align-self: start; }
.filters-head { display: flex; justify-content: space-between; align-items: center; }
.filters-title { font-size: var(--fs-14); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); }
.filters-reset { background: none; border: 0; padding: 0; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--color-brand); }
.filters-group-title { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: var(--ls-caps-narrow); margin-bottom: var(--sp-3); }
.filters-options { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-13); }
.filters-option { display: flex; gap: var(--sp-3); align-items: center; }
.filters-option:hover, .filters-option.is-hover { color: var(--color-brand-deep); }
.filters-option.is-disabled { color: var(--color-ink-muted); opacity: 0.6; }
.filters-count { margin-left: auto; color: var(--color-ink-muted); }
.filters-segment { display: flex; gap: var(--sp-2); }
.filters-segment-btn { flex: 1; height: var(--h-32); border-radius: var(--r-7); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink); font-size: var(--fs-12); font-weight: var(--fw-bold); white-space: nowrap; transition: border-color var(--t-fast), background var(--t-fast); }
.filters-segment-btn:hover, .filters-segment-btn.is-hover { border-color: var(--color-accent-line); }
.filters-segment-btn.is-active { border-color: var(--color-accent); background: var(--color-accent-tint); color: var(--color-accent); }
.filters-segment-btn:disabled, .filters-segment-btn.is-disabled { color: var(--color-ink-muted); background: var(--color-bg); cursor: not-allowed; }
[data-screen] .results { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
[data-screen] .results-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.results-count { font-size: var(--fs-14); color: var(--color-ink-muted); }
.results-count strong { color: var(--color-ink); }
.results-sort { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-13); color: var(--color-ink-muted); }
.results-sort select { height: var(--h-36); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 0 var(--sp-4); font-size: var(--fs-13); background: var(--color-surface); color: var(--color-ink); font-family: inherit; }
.clinic-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-2xl); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--t-fast); }
.clinic-card:hover, .clinic-card.is-hover { border-color: var(--color-accent-line); }
.clinic-card--sponsored { border-color: var(--color-cta-line); }
.clinic-card-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); background: var(--color-cta-tint-bg); border-bottom: 1px solid var(--color-cta-line); padding: var(--sp-2) var(--sp-4-5); font-size: var(--fs-11); color: var(--color-cta); }
.clinic-card-strip strong { font-weight: var(--fw-bold); letter-spacing: var(--ls-caps-wide); text-transform: uppercase; }
.clinic-card-body { padding: var(--sp-4-5); display: grid; grid-template-columns: var(--mono-tile) minmax(0, 1fr) auto; gap: var(--sp-7); }
.clinic-card-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.clinic-card-title-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.clinic-card-name { font-size: var(--fs-16); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); }
.clinic-card-sub { font-size: var(--fs-13); color: var(--color-ink-muted); }
.clinic-card-facts { margin-top: 2px; }
.clinic-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); justify-content: space-between; }
.clinic-card-score { text-align: right; }
.clinic-card-score-label { font-size: var(--fs-11); color: var(--color-ink-muted); font-weight: var(--fw-semibold); }
.clinic-card-score-value { font-size: var(--fs-24); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); }
.pagination { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.pagination-page { width: var(--h-36); height: var(--h-36); border-radius: var(--r-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); font-size: var(--fs-13); transition: border-color var(--t-fast); }
.pagination-page:hover, .pagination-page.is-hover { border-color: var(--color-accent); text-decoration: none; color: var(--color-ink); }
.pagination-page.is-current { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-dark); font-weight: var(--fw-bold); }
.pagination-page.is-disabled { color: var(--color-ink-muted); opacity: 0.5; pointer-events: none; }
.pagination-gap { width: var(--h-36); height: var(--h-36); display: flex; align-items: center; justify-content: center; color: var(--color-ink-muted); }
.shortlist-band { display: flex; gap: var(--sp-7); align-items: center; flex-wrap: wrap; padding: var(--sp-8); margin-top: var(--sp-3); }
.shortlist-band-title { font-size: var(--fs-15); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); }
.shortlist-band-body { font-size: var(--fs-13); color: var(--color-ink-muted); margin-top: 3px; line-height: var(--lh-body); }

/* ---- Screen 6: chain hub ---- */
.chain-hero { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--sp-9); }
.chain-hero-main { min-width: 0; }
.chain-hero-title { margin: 0; font-size: var(--fs-32); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); letter-spacing: var(--ls-tight); line-height: var(--lh-115); }
.chain-hero-meta { font-size: var(--fs-14); color: var(--color-ink); font-weight: var(--fw-semibold); margin-top: var(--sp-5); }
.chain-hero-about { margin: var(--sp-5) 0 0; font-size: var(--fs-14); color: var(--color-ink-muted); line-height: var(--lh-relaxed); max-width: 680px; text-wrap: pretty; }
.chain-hero-side { display: flex; flex-direction: column; gap: var(--sp-4); }
.chain-score-panel { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-2); }
.chain-score-value { display: flex; align-items: baseline; gap: var(--sp-3); }
.chain-score-value strong { font-size: var(--fs-34); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); }
.chain-score-value span { font-size: var(--fs-13); color: var(--color-ink-muted); }
.branches-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.branches-state-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4-5); }
.state-chip { min-height: var(--h-30); padding: var(--sp-1) var(--sp-5); border-radius: var(--r-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink); font-size: var(--fs-12); font-weight: var(--fw-semibold); white-space: nowrap; transition: border-color var(--t-fast), background var(--t-fast); }
.state-chip span { opacity: 0.7; }
.state-chip:hover, .state-chip.is-hover { border-color: var(--color-accent-line); }
.state-chip.is-active { border-color: var(--color-accent); background: var(--color-accent-tint); color: var(--color-accent); }
.state-chip:disabled, .state-chip.is-disabled { color: var(--color-ink-muted); background: var(--color-bg); cursor: not-allowed; }
.branches-group { margin-bottom: var(--sp-8); }
.branches-group-head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.branches-group-title { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); }
.branches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.branch-card { border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-5) var(--sp-6); background: var(--color-surface-alt); color: var(--color-ink); display: flex; flex-direction: column; gap: var(--sp-1-5); min-width: 0; transition: border-color var(--t-fast); }
.branch-card:hover, .branch-card.is-hover { border-color: var(--color-accent); text-decoration: none; color: var(--color-ink); }
.branch-card-head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.branch-card-city { font-size: var(--fs-13-5); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-card-score { font-size: var(--fs-12); font-weight: var(--fw-bold); white-space: nowrap; }
.branch-card-area { font-size: var(--fs-12); color: var(--color-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-card-foot { display: flex; justify-content: space-between; font-size: var(--fs-11-5); color: var(--color-ink-muted); }
.branches-note { font-size: var(--fs-12-5); color: var(--color-ink-muted); margin-top: var(--sp-2); }


/* ---- 4. RESPONSIVE — Screens 2–6 ---- */
@media (max-width: 1100px) {
  .profile-body, .layout--two-col, .layout--two-col.layout--rail-md, .layout--two-col.layout--rail-lg { grid-template-columns: minmax(0, 1fr); }
  [data-screen] .rail { position: static; }
  .enquiry { grid-template-columns: minmax(0, 1fr); }
  .enquiry-aside { border-left: 0; border-top: 1px solid var(--color-accent-tint-border); }
  .location-grid, .geo-hero, .city-intro-grid, .chain-hero { grid-template-columns: minmax(0, 1fr); }
  .layout--sidebar-left { grid-template-columns: minmax(0, 1fr); }
  .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .site-nav, .auth-link { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 900px) {
  /* Screen 5: filters become a drawer (same pattern as Screen 1 .filters.is-open) */
  /* ⚠️ `align-self: start` (set on [data-screen] .filters where it is a sidebar)
     survives into this rule, and on a fixed box align-self SUPPRESSES the
     stretch that `top: 0; bottom: 0` would otherwise produce -- the drawer
     computed to 180px tall against an 800px viewport. `stretch` restores it.
     Everything in the drawer was reachable at 180px only because one filter is
     populatable today; it would have become a reachability failure the moment
     the list grew. */
  [data-screen] .filters { position: fixed; inset: 0; align-self: stretch; z-index: var(--z-drawer); overflow-y: auto; border-radius: 0; display: none; }
  [data-screen] .filters.is-open { display: flex; }
  .filters-apply-bar { position: sticky; bottom: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--sp-5) 0 0; margin-top: auto; }
  .filters-open-btn { display: inline-flex; }
}
@media (min-width: 901px) { .filters-open-btn, .filters-apply-bar { display: none; } }
@media (max-width: 760px) {
  .profile-hero { grid-template-columns: minmax(0, 1fr); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .dir-hero { padding-left: var(--sp-9); padding-right: var(--sp-9); }
  .dir-hero-search { grid-template-columns: minmax(0, 1fr); }
  .dir-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: calc(-1 * var(--sp-9)); margin-right: calc(-1 * var(--sp-9)); padding-left: var(--sp-9); padding-right: var(--sp-9); }
  .dir-hero-popular-label { min-width: 0; width: 100%; text-align: left; }
  .site-footer__grid--4 { grid-template-columns: 1fr 1fr; }
  .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinic-card-body { grid-template-columns: var(--mono-tile) minmax(0, 1fr); }
  .clinic-card-side { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .clinic-card-score { text-align: left; }
}
@media (max-width: 640px) {
  .profile-hero-title, .geo-hero-title, .city-intro-title, .chain-hero-title { font-size: var(--fs-h2); }
  .dir-hero-title { font-size: var(--fs-28); }
  .page { padding-left: var(--sp-7); padding-right: var(--sp-7); }
  .card { padding: var(--sp-7); }
  .lockcard { flex-direction: column; align-items: flex-start; }
  .lockcard-actions { flex-direction: row; }
}
@media (max-width: 380px) {
  .dir-hero-stats, .hero-actions-grid-3, .hero-actions-grid-2, .state-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   EXTENSION — RULES THIS BUILD OWNS, NOT PRESENT IN THE DESIGN PACKAGE
   Everything above this line is the delivered css/vitrify.css, token block
   first, with the literal lengths that duplicated a token replaced by that
   token and nothing else changed. Below it are the rules the built routes
   need and the package does not draw: the place card used by every route that
   lists PLACES rather than clinics or doctors, the generic page furniture the
   pre-design routes emit, and the score-card additions AB ruled onto Screen 1
   (the fourth band, the coverage line, the completeness bar, the benchmark
   marker). No new colours, radii, spacing steps or type sizes are introduced;
   every value below is one of the 204 tokens above.
   ========================================================================== */

/* ---------- EXTENSION: the score card AB ruled onto Screen 1 ----------
   The ring colour comes from a token on an ancestor band class, never from a
   stroke attribute, so one score can never render in two colours. */
.score-ring--lg { width: 110px; height: 110px; }
.score-ring--lg .score-ring__value { font-size: var(--fs-score); }
.ring-bg { stroke: var(--color-border); }
/* Fourth band, not in the handoff: under 70 the ring is neutral and carries no
   category word at all. The handoff's lowest band called everything under 80
   "Good", which was safe when every mock doctor scored in the nineties. */
.score--low { color: var(--color-ink-muted); }
.score--low .ring-fg { stroke: var(--color-ink-muted); }
/* The coverage line AB ruled onto the card in place of a denominator. */
.score-coverage { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--color-ink-muted); text-align: center; }
/* Profile completeness, the same factor the score counts, shown as itself. */
.profile-complete { display: flex; flex-direction: column; gap: var(--sp-1); }
.profile-complete__row { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--color-ink-muted); }
.profile-complete__bar { height: var(--bar-h); background: var(--color-accent-tint); border-radius: 2px; overflow: hidden; }
.profile-complete__bar span { display: block; height: 100%; background: var(--color-accent); border-radius: 2px; }
/* Last verified, in the card body under the verification tag. */
.doctor-card__verified-on { margin: 0; font-size: var(--fs-caption); color: var(--color-ink-muted); }
/* The visible marker every benchmark value carries, with its tooltip. The
   design had no such marker because every number in it was a measurement. */
.meta-mark { display: inline-block; margin-left: var(--sp-2); padding: 1px var(--sp-2); border: 1px solid var(--color-accent-tint-border); border-radius: var(--r-pill); background: var(--color-accent-tint); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-accent); vertical-align: middle; cursor: help; }
.meta-mark:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.meta-claim { font-weight: var(--fw-semibold); }
.meta-claim a { color: var(--color-brand); }
/* A factor that was not computed is drawn as absent, never as an empty bar
   that could read as a zero. */
.score-breakdown__bar--none { background: transparent; border: 1px dashed var(--color-border-strong); box-sizing: border-box; }
.score-breakdown__note { margin: var(--sp-6) 0 0; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--color-ink-muted); }
.score-rail { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin: var(--sp-7) 0; }
.score-rail__band { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.score-rail__who, .score-rail__coverage { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--color-ink-muted); text-align: center; }
.info-card--score .score-breakdown__row dt { color: var(--color-ink); }
.info-card--score .score-breakdown__row dd { color: var(--color-ink-muted); }
.info-card__list--pairs li { justify-content: space-between; gap: var(--sp-5); }
.info-card__list--pairs strong { text-align: right; }
.info-card__source { margin: var(--sp-6) 0 0; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--color-ink-muted); }
.info-card .btn { margin-top: var(--sp-8); width: 100%; }

/* ---------- EXTENSION: the place card ----------
   Routes that list PLACES rather than clinics or doctors -- /find/doctors/,
   /find/doctors/<region>/, /find/clinics/ -- have no artboard in either
   package. Rather than invent a visual language, the place card is the
   design's own .info-card block with a modifier. */
.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-6); padding: 0; margin: var(--sp-8) 0 0; list-style: none; }
.info-card--place { display: flex; flex-direction: column; gap: var(--sp-2); }
.info-card--place a { color: var(--color-brand); font-weight: var(--fw-bold); font-size: var(--fs-h4); text-decoration: none; }
.info-card--place a:hover, .info-card--place a.is-hover { text-decoration: underline; }
.info-card--place .place-count { font-size: var(--fs-small); color: var(--color-ink-muted); }

/* ---------- EXTENSION: layout without the right rail ----------
   .layout is a three-column grid: filters | results | info rail. A listing
   page with nothing to put in the rail drops the track rather than emptying
   it, so no page carries a column of white space. */
.layout--no-rail { grid-template-columns: var(--col-filters) minmax(0, 1fr); }
.layout--no-filters { grid-template-columns: minmax(0, 1fr) var(--col-rail); }
.layout--no-filters.layout--no-rail { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .layout--no-rail { grid-template-columns: minmax(0, 1fr); } }

/* ---------- EXTENSION: shared page furniture ----------
   Routes outside the six designed templates (treatments, suppliers, jobs, the
   static pages) emit a small set of generic classes that predate both design
   packages. They are styled here against the SAME tokens rather than left
   unstyled or given a second look. */
.lede { color: var(--color-ink-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body); margin: 0 0 var(--sp-9); max-width: 70ch; }
.meta { font-size: var(--fs-small); color: var(--color-ink-muted); }
/* ⚠️ Scoped to the pages that have no designed template.
   These bare element rules set a colour, and the designed templates rely on
   INHERITANCE for theirs: .dir-hero-title carries no colour of its own and
   takes white from the dark hero around it. An unscoped `main h1 { color }`
   beats that inheritance and repainted the directory home's hero heading
   brand-deep on a near-black panel. Measured, not reasoned: 40 regions of
   Template C were compared against the delivered HTML and this was one of the
   two that differed. */
main:not([data-screen]) h1 { font-size: clamp(var(--fs-28), 2.6vw, var(--fs-h1)); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); color: var(--color-brand-deep); margin: 0 0 var(--sp-5); }
main:not([data-screen]) h2 { font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--color-brand-deep); margin: var(--sp-11) 0 var(--sp-5); }
main:not([data-screen]) h3 { font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--color-brand-deep); margin: var(--sp-8) 0 var(--sp-3); }
main:not([data-screen]) p { line-height: var(--lh-body); }
main:not([data-screen]) a { color: var(--color-brand); }
table.data { border-collapse: collapse; width: 100%; font-size: var(--fs-small); margin: var(--sp-5) 0 var(--sp-10); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-2xl); overflow: hidden; }
table.data th, table.data td { border-bottom: 1px solid var(--color-divider); padding: var(--sp-4) var(--sp-5); text-align: left; vertical-align: top; }
table.data thead th { background: var(--color-surface-alt); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-ink-muted); font-weight: var(--fw-bold); }
table.data tr:last-child td { border-bottom: 0; }
.notice { border-left: var(--sp-1) solid var(--color-warning); background: var(--color-rating-bg); padding: var(--sp-5) var(--sp-6); margin: var(--sp-7) 0; font-size: var(--fs-small); border-radius: 0 var(--r-md) var(--r-md) 0; }
.disclosure { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-2xl); padding: var(--sp-6) var(--sp-7); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-ink-muted); margin: var(--sp-12) 0 0; }
.disclosure strong { color: var(--color-brand-deep); }
.bio { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 70ch; }
.pager { display: flex; gap: var(--sp-5); font-size: var(--fs-small); margin: var(--sp-8) 0; }

/* ---------- EXTENSION: 2026-09-17 visual-audit corrections ----------
   Every rule below exists because a rendered page was measured against the
   delivered screenshot, not because a selector failed to match. The two
   package defects found in the same audit -- `.field { align-items: center }`
   centring every enquiry label, and the two-line "Email (optional)" label
   pushing its input 20px below its row-mates -- are deliberately NOT fixed
   here: both reproduce in the delivered package itself and fixing them means
   diverging from the delivered CSS. They are recorded in designer-defects.md.
   ------------------------------------------------------------------------ */

/* 1. The header actions slot was a zero-width flex item, so `.site-nav`
      (margin: 0 auto) centred against nothing and sat ~100px left of its drawn
      position with the right third of the header empty. */
/* ⚠️ NOT scoped with [data-screen]: that attribute is on <main>, and the
   header is its SIBLING, so a scoped rule here matches nothing. The header
   markup is identical in both design families, so an unscoped rule is right. */
.site-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-4); min-width: 228px; justify-content: flex-end; margin-left: 0; }
.header-cta { white-space: nowrap; }
/* With the logo and the actions slot both 228px, space-between lands the nav
   on the header centre. Measured cause: .site-nav has margin:0 auto AND
   .site-header__actions has margin-left:auto, so THREE auto margins split the
   356px of free space 118.6px each and the nav sat 59px left of centre. Auto
   margins absorb free space before justify-content ever runs, so the fix is to
   drop the third one, not to add another justify rule. */
.site-header__inner { justify-content: space-between; }
@media (max-width: 900px) { .site-header__actions { min-width: 0; } .header-cta { display: none; } }

/* 2. A long registry name pushed the badges onto a second line; the design
      holds title and badges on one. The title takes the slack instead. */
/* ⚠️ REVERSED 2026-09-17. `flex-wrap: nowrap` here held the title and badges on
   one line at 1440 and destroyed the title everywhere below it. The title was
   the only flexible item against ~560px of `flex: 0 0 auto` siblings, so it
   absorbed the entire shortfall; with `min-width: 0` and `overflow-wrap:
   anywhere` it never OVERFLOWED, it SHREDDED -- measured 0px wide and 40 line
   boxes at 901-1040px, one character per line, on all 603 chain-pill locations.
   A 7-character name shredded identically, so name length only set how tall the
   column was. Nothing that checks overflow or computed style can see this.

   The fix is a flex BASIS, not nowrap. `flex-basis: 240px` is the title's
   hypothetical size for line-breaking, so a row wide enough to seat every item
   still seats them on one line (1440 keeps the single row the design draws),
   and a row that is not wide enough wraps a badge or the chain pill to a second
   line instead of grinding the title down. The title only ever shrinks by the
   slack left on its own line. */
[data-screen] .profile-hero-title-row { flex-wrap: wrap; align-items: center; }
[data-screen] .profile-hero-title { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
[data-screen] .profile-hero-title-row > .badge,
[data-screen] .profile-hero-title-row > .badge-verified,
[data-screen] .profile-hero-title-row > .mono-tile { flex: 0 0 auto; }
/* The chain pill is 226-271px of fixed content and was the one child that could
   still escape its own row once the row wrapped: measured 4.9px over at 380,
   13.2 at 360 and 53.2 at 320. It keeps its intrinsic width wherever there is
   room and gives up the chain name first when there is not. */
[data-screen] .profile-hero-title-row > .chain-pill { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; }
[data-screen] .profile-hero-title-row > .chain-pill > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* (the former `@media (max-width: 900px) { ... flex-wrap: wrap }` rescue is gone:
   the row now wraps at every width, so there is nothing left to rescue.) */

/* 3. Held pill: the facts row shortens, it never disappears. */
[data-screen] .pill--held { color: var(--color-ink-muted); background: var(--color-surface-sunken); border-style: dashed; }

/* 4. The hero left column was stretched to the taller right column and left
      124px of dead space under the verify row. */
[data-screen] .profile-hero { align-items: start; }
[data-screen] .profile-hero-main { align-self: start; }
[data-screen] .profile-hero-social.is-held { color: var(--color-ink-muted); font-size: var(--fs-12); }
[data-screen] .hero-actions-grid-2.is-held .btn--locked { justify-content: center; }

/* 5. The held score ring was a bare outline and, with the value and band both
      empty, `align-items: center` put the label halfway down the ring. */
[data-screen] .score-box--held { align-items: flex-start; }
[data-screen] .score-ring-held { stroke: var(--color-border-strong); }
[data-screen] .score-ring-value--held { color: var(--color-ink-muted); font-weight: 600; }
[data-screen] .score-box-band--held { color: var(--color-ink-muted); font-weight: 600; }

/* 6. The registration number had no break opportunity, so a flex row with
      default min-width:auto pushed 73px past its box and the overflow
      propagated: stat-list-row -> stat-list -> card -> rail -> profile-body. */
[data-screen] .stat-list-row { min-width: 0; align-items: baseline; gap: var(--sp-4); }
[data-screen] .stat-list-row > dt { flex: 0 1 auto; min-width: 0; max-width: 46%; overflow-wrap: anywhere; hyphens: auto; }
[data-screen] .stat-list-row > dd { min-width: 0; text-align: right; overflow-wrap: anywhere; word-break: break-word; }

/* 7. The lock card was 620px centred inside a 1032px section, leaving 206px of
      empty white either side where the design draws a blurred skeleton. */
[data-screen] .lockcard--full { margin: 0; max-width: none; width: 100%; }

/* 8. Empty collections rendered as dashed boxes the design never draws. */
[data-screen] .empty-panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: var(--sp-7); font-size: var(--fs-14); line-height: var(--lh-body); color: var(--color-ink-muted); }
/* ⚠️ The held pill is 178px of min-content and used to neither shrink nor wrap,
   and the text column had no `min-width: 0`, so the text took the whole loss:
   measured 128px of text column at 420, 88 at 380, 68 at 360 (clipped) and 28
   at 320, two words to a line in a panel 290px tall. 360 is a common Android
   width and this is a directory read on phones. The panel now wraps, the text
   column keeps a 240px basis, and the pill is allowed to shrink and to set its
   own height when its label wraps. */
[data-screen] .empty-panel > :first-child { flex: 1 1 240px; min-width: 0; }
[data-screen] .empty-panel > .btn--locked { flex: 0 1 auto; min-width: 0; height: auto; min-height: var(--h-40); padding: var(--sp-3) var(--sp-5); white-space: normal; text-align: center; }
[data-screen] .empty-panel .dashed-box-title { color: var(--color-ink); font-weight: 600; margin-bottom: var(--sp-2); }

/* 9. One doctor card sat alone in a 983px row. A thin grid fills its row. */
/* One doctor left a 230px card alone in a 983px row; auto-fit then stretched
   it to the full 982px, which is the same defect inverted. A thin grid is a
   two-up, so one card reads as deliberate and two fill the row. */
[data-screen] .doctor-grid--thin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { [data-screen] .doctor-grid--thin { grid-template-columns: 1fr; } }

/* 10. Names wrap to two and three lines, so cards in a row had uneven heights
       and the row grew to the tallest. */
[data-screen] .clinic-mini-grid { align-items: stretch; }
[data-screen] .clinic-mini { height: 100%; display: flex; flex-direction: column; }
[data-screen] .clinic-mini-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 11. The editorial note lived here as a second, later rule. It was `.disclosure`
   RENAMED, not the design transcribed, and because it declared only `border-top`
   the box's other three borders, its background and its radius were still coming
   from the rule ~560 lines above -- the two happened to agree on 1px solid
   var(--color-border), so the box looked correct while depending on both. The two
   are now collapsed into that single rule. Nothing to declare here.
   Its two residues (margin 48px, strong #2A1B4E) went with it: register entry 88,
   ruled 2026-09-20, the handover governs below the chrome. */

/* 12. The consent row the enquiry form was missing. */
[data-screen] .field-consent { display: flex; align-items: flex-start; gap: var(--sp-4); font-size: var(--fs-12); line-height: var(--lh-body); color: var(--color-ink-muted); margin: var(--sp-5) 0 0; }
[data-screen] .field-consent input { margin-top: 2px; flex: 0 0 auto; }
[data-screen] .enquiry-aside-foot { text-wrap: pretty; }

/* ==================================================================
   2026-09-19 — the AB screenshot iteration (items 1-22).
   Rules marked [AB] implement AB's written description of a design
   iteration newer than the package on this box; they are recorded in
   designer-defects.md as our design, not the designer's. Everything
   else here restores or corrects a rule the package already carries.
   ================================================================== */

/* ITEM 4. The badges were pushed to the far right of the hero title row by
   `flex: 1 1 240px` on the title, which let the title GROW and absorb the
   slack. The design sits them immediately after the name. `0 1 auto` keeps
   every protection that rule was added for -- the title still shrinks, still
   wraps, still takes its own line when it is long -- and stops it growing. */
[data-screen] .profile-hero-title { flex: 0 1 auto; }

/* ITEM 1. The held score box is the filled box minus its arc, so the two are
   the same height. `.score-box-text` is the column the three lines sit in. */
.score-box-text { min-width: 0; }
.score-box-band--held { color: var(--color-ink-muted); font-weight: var(--fw-semibold); }
.score-ring-value--held { color: var(--color-ink-muted); }

/* ITEMS 2 and 8. A held control keeps the SHAPE of the control it stands for
   and loses only its interactivity. This is the design's own disabled
   treatment, not a dashed grey box (which is a different component at a
   different weight, and is what ours rendered). */
.btn.is-held, .icon-btn.is-held { opacity: 0.45; pointer-events: none; cursor: default; }
.profile-hero-social--held .verify-note { margin-left: var(--sp-2); }

/* ⚠️ ITEM 3 REVERSED, 2026-09-20 (register entry 118). It read "Compare is a
   square checkbox glyph, Save a filled heart in maroon" and the rule below
   filled the heart. Measured in clinic-profile/index.html, the handoff shows
   NEITHER: Compare is the two-pane rectangle and Save is an OUTLINE heart,
   `fill="none" stroke="currentColor"`. The rule also never did what its own
   comment said -- it filled with --color-brand-deep (#2A1B4E), not maroon.
   The fill override is removed so the glyph's own attributes apply. */
.btn--toggle svg { stroke-width: 2; }

/* ITEM 10 [AB]. Registry record card: tinted inset, copy button, verify line,
   then a 2x2 fact grid with labels above left-aligned values.
   ⚠️ The longest registration number in the corpus is 48 characters and MUST
   wrap inside the inset rather than escape it. */
.reg-inset { background: var(--color-accent-tint); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.reg-inset-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.reg-inset-label { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); }
.copy-btn { display: inline-flex; align-items: center; gap: var(--sp-1-5); background: none; border: 1px solid var(--color-border); border-radius: var(--r-sm); padding: 2px var(--sp-3); font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semibold); color: var(--color-accent); cursor: pointer; flex-shrink: 0; }
.copy-btn:hover { border-color: var(--color-accent); }
.reg-inset-value { font-size: var(--fs-14); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); overflow-wrap: anywhere; word-break: break-word; line-height: var(--lh-body); }
.reg-inset-verify { display: inline-flex; align-items: center; gap: var(--sp-1-5); margin-top: var(--sp-3); font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--color-accent); }
.reg-inset-verify.is-held { color: var(--color-ink-muted); pointer-events: none; }
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin: 0; }
.fact-cell { min-width: 0; }
.fact-cell dt { font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--color-ink-muted); margin-bottom: 2px; }
.fact-cell dd { margin: 0; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-ink); overflow-wrap: anywhere; }
.fact-cell dd.is-held { color: var(--color-ink-muted); font-weight: var(--fw-medium); }
.fact-qual { display: block; font-size: var(--fs-11); font-weight: var(--fw-medium); color: var(--color-ink-muted); }
.reg-source { margin: var(--sp-6) 0 0; }

/* ITEM 22 [AB]. The about fact table: six rows, label left, value right of it,
   grey qualifier under the value. Labels must not wrap to two lines, which is
   what ours did in the old right-aligned definition list. */
/* The fact table. Bordered and rounded, with a tinted label column and a rule
   between every row -- the handoff draws it as a table, not as a bare grid.
   `display: contents` on the row keeps dt/dd as grid cells so the two columns
   stay aligned across rows while each cell can carry its own border. */
.about-facts { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  margin: var(--sp-7) 0 0; border: 1px solid var(--color-border); border-radius: var(--r-lg);
  overflow: hidden; background: var(--color-surface); }
.about-facts-row { display: contents; }
.about-facts-row dt { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--color-ink);
  background: var(--color-surface-alt); padding: var(--sp-5) var(--sp-7);
  border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.about-facts-row dd { margin: 0; font-size: var(--fs-13); font-weight: var(--fw-medium);
  color: var(--color-ink); min-width: 0; overflow-wrap: anywhere;
  padding: var(--sp-5) var(--sp-7); border-bottom: 1px solid var(--color-border); }
.about-facts-row:last-child dt, .about-facts-row:last-child dd { border-bottom: 0; }
.about-facts-row dd .is-held { color: var(--color-ink-muted); font-weight: var(--fw-medium); }
.about-facts-row dd.is-verified { color: var(--color-success); }
.about-facts .fact-qual { display: inline; margin-left: var(--sp-2); color: var(--color-ink-muted); font-weight: var(--fw-regular); }

/* ITEM 9. The enquiry form.
   ⚠️ `.field` is a COLUMN flex container, so `align-items: center` centred every
   label. The design left-aligns them. And the optional hint must stay inline
   with its label: as a block it added a second line to that one label only,
   which pushed the Email input ~20px below its row neighbours and broke the
   grid row. `display: inline` on the hint and `align-items: flex-start` on the
   field are the whole fix. */
.enquiry-form .field { align-items: flex-start; text-align: left; }
.enquiry-form .field-optional { display: inline; margin-left: var(--sp-1-5); }
.enquiry-form .field > .field-input, .enquiry-form .field > .field-textarea { width: 100%; }
/* A chosen value must read as a value. Ours inherited the disabled grey, which
   reads as a placeholder in a control that is not accepting input anyway. */
.enquiry-form select.field-input { color: var(--color-ink); font-weight: var(--fw-semibold); -webkit-text-fill-color: var(--color-ink); opacity: 1; }
.enquiry-form select.field-input:disabled { color: var(--color-ink); -webkit-text-fill-color: var(--color-ink); opacity: 1; background: var(--color-bg); }
.enquiry-consent-link { text-decoration: underline; }
.enquiry-sub { font-size: var(--fs-12); color: var(--color-ink-muted); margin-top: var(--sp-3); }

/* ITEM 11. Treatment chips: white fill, ONE line each with long names
   ellipsised, so a nine-chip grid has nine equal-height chips. Ours used a
   lavender fill and let names wrap to two lines, which made the rows ragged. */
.treatment-item { background: var(--color-surface); min-width: 0; }
.treatment-item > span:first-child, .treatment-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treatment-item-note--via { color: var(--color-accent); }
.treatment-cost-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); padding: var(--sp-5); border: 1px dashed var(--color-border); border-radius: var(--r-lg); background: var(--color-bg); }
.treatment-cost-strip .is-held { color: var(--color-ink-muted); font-weight: var(--fw-medium); font-size: var(--fs-12); }
.treatment-cost-label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--color-ink-muted); }

/* ITEM 15. Three cards in ONE row, names on one line, with a foot row. */
.clinic-mini-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clinic-mini-grid--three .clinic-mini-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clinic-mini-foot .is-held { color: var(--color-ink-muted); font-weight: var(--fw-medium); }
@media (max-width: 760px) { .clinic-mini-grid--three { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* ITEM 14 REVERSED, 2026-09-20. It read "the compare card is lavender-tinted in
   the design, not white" and tinted it. The handoff says the opposite, in both
   halves: its stylesheet gives .compare-card no background rule, so the card
   resolves to plain .card (#FFFFFF, border #E6E1F3), and clinic-profile-1440.png
   sampled inside the card is pure (255,255,255). The tint is removed; the card
   inherits .card, which is what the handoff draws. Register entry 95. */

/* ITEM 18. Held distance rows keep the design's list shape. */
.distance-list--held strong.is-held { color: var(--color-ink-muted); font-weight: var(--fw-semibold); }
.distance-note { margin: var(--sp-4) 0 0; }
.location-sub { font-size: var(--fs-12); color: var(--color-ink-muted); margin: var(--sp-4) 0 0; }

/* ITEM 19. The held factor card keeps its intro at the design's five lines. */
.score-intro { margin: var(--sp-3) 0 var(--sp-7); }

/* ITEM 20. The lock card floats over the ghost, inset from both edges, at the
   design's width -- it no longer spans the section, because there is a ghost
   behind it again to give the section its height. */
.locked-section { position: relative; }
.lockcard--full { max-width: 620px; margin: 0 auto; }

/* ITEM 18. The held map keeps the frame's height so the two-column block does
   not collapse on the 4,607 clinics with no coordinate. */
.map-frame--held { display: flex; align-items: center; justify-content: center; background: var(--color-bg); border: 1px dashed var(--color-border); }
.map-held-note { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-6); font-size: var(--fs-12); color: var(--color-ink-muted); text-align: left; max-width: 34ch; }
.map-held-note svg { flex-shrink: 0; }
.location-address { font-size: var(--fs-13); line-height: var(--lh-relaxed); color: var(--color-ink); overflow-wrap: anywhere; }

/* ITEM 12. The held checklist link keeps the design's position, wording and
   arrow and is not a link, because no page answers what it promises. */
.faq-more { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.faq-more.is-held { color: var(--color-ink-muted); pointer-events: none; }

/* ITEM 17. The jobs panel is dashed in the design; ours was solid.
   ⚠️ The unscoped `.empty-panel--dashed` LOST: `[data-screen] .empty-panel` is
   both more specific (an attribute selector) and later in the file, so it kept
   winning and the panel stayed solid. Found by reading the engine's matched
   rule list, not the sheet. The modifier is scoped the same way so it ranks
   above the base rule it modifies. */
[data-screen] .empty-panel--dashed { border-style: dashed; background: var(--color-bg); }

/* ITEM 21. The doctors call to action. */
.doctors-cta { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--color-border); font-size: var(--fs-12-5); color: var(--color-ink-muted); }

/* ITEM 14/17. A held control inside a button shape keeps the button's weight
   and colour and only stops being interactive. */
.btn.is-held[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ⚠️ SWEEP FINDING, 2026-09-19. Items 15 and 17 added a chevron to the
   `.card-link` in a `.card-head`. `.card-link` is `white-space: nowrap`, so at
   360 and 380 the link plus its chevron overran the head by 12px — the ONLY
   defect the 450-render sweep found, and it appeared on 50 of 50 pages because
   every card head carries one.
   The head wraps instead of the link truncating: the link drops to its own line
   at phone widths and keeps the design's single-line arrangement everywhere
   else. Scoped to the screens that have card heads so Screen 1 is untouched. */
@media (max-width: 420px) {
  [data-screen] .card-head { flex-wrap: wrap; row-gap: var(--sp-2); }
  [data-screen] .card-head > .card-link { flex: 1 0 100%; }
}

/* ================= EXTENSION: LISTING COMPLETENESS (2026-09-19) =================
   A BAR, never a ring, and ONE accent colour at every value.

   Both of those are decisions, not styling. The Vitrify Score above is
   band-coloured -- green at 90, violet at 80, neutral below 70 -- because it is
   a judgement about a clinician and the colour carries part of it. This measure
   judges nothing: it counts what a clinic has published. A colour ramp would say
   "low is bad" in CSS, about a clinic whose only failing is that we have not
   read its website yet. So there is no band class here, no --color-score-high /
   mid / low, and no rule anywhere below keyed to the value.

   The track reuses --color-score-track so the two meters sit at the same visual
   weight in the same rail; the fill is --color-accent at 0 and at 100 alike. */
.completeness { display: flex; flex-direction: column; gap: var(--sp-2); }
.completeness-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.completeness-label { font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: var(--ls-caps-narrow); }
.completeness-value { font-size: var(--fs-28); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); line-height: var(--lh-1); letter-spacing: var(--ls-tight); }
.completeness-of { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-ink-muted); letter-spacing: normal; }
.completeness-bar { height: var(--bar-h-lg); background: var(--color-score-track); border-radius: var(--r-sm); overflow: hidden; }
.completeness-bar-fill { display: block; height: 100%; background: var(--color-accent); border-radius: var(--r-sm); }
.completeness-note { font-size: var(--fs-12); color: var(--color-ink-muted); line-height: var(--lh-normal); }

/* The held state is the filled state minus its fill, so the slot is the same
   height whether or not a figure is published and the hero does not reflow the
   day the engine runs. Same lesson as the held score box above. */
.completeness--held .completeness-value--held { color: var(--color-ink-muted); font-weight: var(--fw-semibold); }
.completeness-bar--held { background: var(--color-score-locked); }

/* The rail card. */
.completeness-intro { margin: var(--sp-3) 0 var(--sp-5); }
.completeness-strong { margin: var(--sp-3) 0 var(--sp-6); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-brand-deep); }
.completeness-strong--held { color: var(--color-ink-muted); font-weight: var(--fw-semibold); }
.completeness-list { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.completeness-item { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-12); line-height: var(--lh-normal); }
.completeness-item dt { font-weight: var(--fw-semibold); color: var(--color-brand-deep); }
.completeness-item dd { margin: 0; color: var(--color-ink-muted); text-align: right; }

/* Three states, visually distinct, and the third is the point: a check we did
   not run must never look like one the clinic failed. `is-dropped` is set in
   italic muted type rather than given a colour of its own, because a colour
   would read as a verdict on the clinic for a gap that is ours. */
.completeness-item.is-met dd { color: var(--color-success); font-weight: var(--fw-semibold); }
.completeness-item.is-absent dd { color: var(--color-ink-muted); }
.completeness-item.is-dropped dt { color: var(--color-ink-muted); }
.completeness-item.is-dropped dd { color: var(--color-ink-muted); font-style: italic; }

.completeness-foot { margin: var(--sp-6) 0 0; font-size: var(--fs-12); line-height: var(--lh-body); color: var(--color-ink-muted); }

/* The methodology page's own table and legend. It is a policy page, so it has no
   [data-screen] scope and picks up the un-scoped rules above. */
.lc-source { font-size: var(--fs-11); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps-narrow); color: var(--color-ink-muted); }
.lc-demo { max-width: 320px; margin: var(--sp-6) 0; }

/* =============== EXTENSION: UGC FORMS AND THE CONSOLE (2026-09-19) ===============
   Every class below is on a `noindex` page: the review form, the reply, the
   report, the moderation queue and one moderation item. None of them is a
   ranking surface, so this block is deliberately plain -- it uses the same
   tokens as everything above and adds no new ones.

   It is here rather than in a second stylesheet because the console shares the
   site's layout, header and footer, and a second stylesheet would be a second
   thing to keep in step with the tokens. */

/* Forms ------------------------------------------------------------------ */
.ugc-form { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 640px; margin: var(--sp-7) 0; }
.ugc-form label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-brand-deep); }
.ugc-form input[type="text"], .ugc-form input[type="email"], .ugc-form input[type="password"], .ugc-form select, .ugc-form textarea {
  font: inherit; font-size: var(--fs-14); color: var(--color-ink);
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); background: var(--color-surface); width: 100%;
}
.ugc-form textarea { line-height: var(--lh-body); resize: vertical; }
.ugc-form fieldset { border: 1px solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin: 0; }
.ugc-form legend { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-brand-deep); padding: 0 var(--sp-2); }
.ugc-form button { align-self: flex-start; }
/* An action form is a row of small inputs beneath the move it performs, so the
   reason and the note sit with the button that records them. */
.ugc-form--action { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); max-width: none;
  border: 1px solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0; }
.ugc-form--action label { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1 1 200px; }
.ugc-form--inline { margin: var(--sp-9) 0 0; }
.form-help { font-size: var(--fs-12); color: var(--color-ink-muted); line-height: var(--lh-body); margin: 0; }
.opt { font-weight: var(--fw-regular); color: var(--color-ink-muted); }
.rating-row { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.rating-choice { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); }
.radio-row { display: flex; align-items: flex-start; gap: var(--sp-3); font-weight: var(--fw-regular); line-height: var(--lh-body); }

/* A review quoted back to someone -- to the clinic replying to it, or to the
   moderator deciding about it. Quoted, never re-typed: nothing in this system
   edits the substance of a review. */
.review-quote { margin: var(--sp-6) 0; padding: var(--sp-5) var(--sp-6); border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface-alt); border-radius: 0 var(--r-md) var(--r-md) 0; }
.review-quote p { margin: 0; line-height: var(--lh-body); }
.review-quote cite { display: block; margin-top: var(--sp-3); font-size: var(--fs-12); color: var(--color-ink-muted); font-style: normal; }

/* An error notice. The only new colour use in this block, and it is on a form
   error rather than on anything that describes a clinic. */
.notice--error { border-color: var(--color-error); background: var(--color-error-tint); }

/* The queue ------------------------------------------------------------- */
.queue-counts { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: var(--sp-7) 0; }
.queue-count { border: 1px solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-6); min-width: 120px; }
.queue-count__n { display: block; font-size: var(--fs-28); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); line-height: var(--lh-1); }
.queue-count__l { display: block; font-size: var(--fs-12); color: var(--color-ink-muted); margin-top: var(--sp-1); }
.queue-table { margin: var(--sp-6) 0; }
.queue-sub { font-size: var(--fs-11); color: var(--color-ink-muted); }
/* A review alleging clinical harm is marked in the queue as well as on its own
   page, because the whole point of the interlock is that it cannot be missed
   while working down a list. */
.queue-harm { color: var(--color-error); text-transform: uppercase; font-size: var(--fs-11); letter-spacing: var(--ls-caps-narrow); }
.queue-row--harm td { background: var(--color-error-tint); }


/* ================= IMPORTED: VITRIFY MARKETING CHROME (2026-09-19) =================
   AB's decision; see OPEN-DECISIONS.md entry 83.

   Generated by deploy/pass-20260919-chrome/chrome_build2.py from the LIVE marketing
   homepage. Do not hand-edit below this line -- re-run the importer.

   ⚠️ v1 of the importer matched class names as SUBSTRINGS with \b boundaries. `-` is
   a non-word character, so `\bheader\b` matched inside `header-right` and `\bbtn\b`
   matched inside `btn-book`: the container lost its rules, header-right was prefixed
   twice, and the Book Demo pill's base rule was pruned as page-section layout. v2
   replaces exact class TOKENS and asserts every required rule is present.
   ================================================================================= */
/* Marketing-chrome tokens, imported with the chrome. */
:root{
  --mk-black:#141414; --mk-ink:#1a1a1c; --mk-lav:#f3f1fb;
  --mk-line:#ececec; --mk-maroon:#7a2d50; --mk-muted:#5f6066;
  --mk-body:'Plus Jakarta Sans',sans-serif; --mk-head:'Plus Jakarta Sans',sans-serif;
}

.mk-wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
/* ===== Announcement bar ===== */
.mk-announce{background:linear-gradient(90deg,#2b1a4d 0%,#4a2152 55%,#7a2a50 100%);color:#fff;text-align:center;font-size:15px;font-weight:600;padding:14px 24px}
/* ===== Header ===== */
.mk-header{position:sticky;top:0;z-index:60;background:#fff;padding:18px 0}
.mk-header .mk-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.mk-logo img{height:62px}
.mk-nav-pill{background:#fff;border-radius:60px;box-shadow:0 8px 30px rgba(40,20,70,.10);padding:10px 14px;display:flex;align-items:center;gap:6px}
.mk-nav-pill a{font-size:15px;font-weight:500;padding:11px 16px;border-radius:40px;color:var(--mk-ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mk-nav-pill a.active{background:var(--mk-lav);color:var(--mk-maroon);font-weight:600}
.mk-nav-pill a .mk-caret{font-size:11px;opacity:.7}
.mk-nav-pill a:hover{color:var(--mk-maroon)}
.mk-header-right{display:flex;align-items:center;gap:18px}
.mk-btn-book{background:var(--mk-black);color:#fff;padding:13px 28px;border-radius:50px;font-weight:600;font-size:16px;white-space:nowrap}
.mk-btn-book:hover{background:#000}
/* ===== Footer ===== */
.mk-footer{padding:80px 0 40px;background:#fff}
.mk-foot-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}
.mk-foot-cols h4, .mk-foot-cols h2{font-size:21px;font-family:var(--mk-head);margin-bottom:22px}
.mk-foot-cols ul{list-style:none;display:flex;flex-direction:column;gap:16px}
.mk-foot-cols a{color:var(--mk-ink);font-size:16px}
.mk-foot-cols a:hover{color:var(--mk-maroon)}
.mk-foot-mid{display:flex;align-items:center;justify-content:space-between;gap:30px 50px;margin-top:60px;flex-wrap:wrap}
.mk-foot-addrs{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;flex:1 1 auto;min-width:0}
.mk-foot-mid p{font-size:16px;color:var(--mk-ink)}
.mk-foot-social{display:flex;gap:12px;flex:none;min-width:236px;justify-content:flex-end}
.mk-foot-social a{width:50px;height:50px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff}
.mk-foot-social svg{width:24px;height:24px;fill:#fff}
/* Brand backgrounds for the four tiles. Lost in the 2026-09-19 chrome import:
   the class names and the sizing rule came across, these four did not, so every
   tile rendered transparent with a white glyph on a white footer -- invisible,
   contrast 1.00. Restored from the marketing site's own inline CSS, which is the
   source of truth for the chrome (AB, 2026-09-20). Scoped; marketing leaves them bare. */
.mk-foot-social .fb{background:#3b5998}
.mk-foot-social .tw{background:#55acee}
.mk-foot-social .ig{background:#121212}
.mk-foot-social .li{background:#0077b5}
.mk-foot-copy{margin-top:50px;text-align:center;color:var(--mk-ink);font-size:15px;line-height:2}
.mk-foot-copy a{color:var(--mk-ink)}
/* footer flags */
.mk-foot-addr{display:flex;align-items:center;gap:11px}
.mk-foot-addr .mk-flag{width:44px;flex:none;line-height:0}
.mk-foot-addr .mk-flag svg{width:44px;height:auto;display:block;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.mk-foot-addr p{font-size:16px;color:var(--mk-ink);line-height:1.5;white-space:nowrap}
/* footer Design C top */
.mk-footer .mk-dC-top{text-align:center;margin-bottom:32px}
.mk-footer .mk-dC-logo{width:160px;height:auto;display:inline-block;margin-bottom:12px}
.mk-footer .mk-dC-top p{font:500 15px var(--mk-body);color:var(--mk-muted)}
.mk-footer .mk-dC-divider{height:1px;background:var(--mk-line);max-width:1240px;margin:0 auto 44px}
/* mobile burger menu */
.mk-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:50px;height:50px;border:1px solid var(--mk-line);border-radius:50%;background:#fff;cursor:pointer;padding:0;flex:none}
.mk-burger span{display:block;width:22px;height:2px;background:var(--mk-ink);margin:0 auto;border-radius:2px;transition:.25s}
.mk-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mk-burger.active span:nth-child(2){opacity:0}
.mk-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mk-mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 14px 34px rgba(40,20,70,.14);border-top:1px solid var(--mk-line);flex-direction:column;padding:14px 22px 22px}
.mk-mobile-menu.open{display:flex}
.mk-mobile-menu a{padding:14px 6px;font:500 16px var(--mk-head);color:var(--mk-ink);border-bottom:1px solid var(--mk-line);text-decoration:none}
.mk-mobile-menu a.mk-mm-book{background:var(--mk-black);color:#fff;border-radius:10px;text-align:center;margin-top:14px;border-bottom:none;padding:15px}
.mk-header{position:sticky;top:0;z-index:60;background:var(--mk-lav);padding:16px 0;transition:background .35s ease,box-shadow .35s ease,padding .35s ease}
.mk-header.mk-scrolled{background:#fff;box-shadow:0 8px 30px rgba(40,20,70,.10);padding:11px 0}
.mk-header .mk-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.mk-header .mk-logo img{height:60px}
.mk-header .mk-nav-pill{background:#fff;border:1px solid rgba(111,89,201,.10);border-radius:50px;box-shadow:0 10px 30px rgba(40,20,70,.12);padding:7px 8px;display:flex;align-items:center;gap:8px}
.mk-header.mk-scrolled .mk-nav-pill{background:#fff}
.mk-header .mk-nav-pill>a, .mk-header .mk-nav-pill .mk-nav-item>a{font:500 15px var(--mk-body,'Plus Jakarta Sans',sans-serif);padding:12px 20px;border-radius:40px;border:1px solid transparent;color:#2d1b4e;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.mk-header .mk-nav-pill .mk-caret{font-size:12px;opacity:.9;display:inline-flex;align-items:center;line-height:0;position:relative;top:-2px;transition:transform .2s ease}
.mk-header .mk-nav-pill>a:hover, .mk-header .mk-nav-pill .mk-nav-item:hover>a{background:transparent;color:#6f59c9;box-shadow:none;border-color:rgba(111,89,201,.18)}
.mk-header .mk-nav-pill>a.active, .mk-header .mk-nav-pill .mk-nav-item>a.active{background:transparent;color:#6f59c9;font-weight:600;box-shadow:none;border-color:rgba(111,89,201,.18)}
.mk-header .mk-nav-pill .mk-nav-item:hover .mk-caret{transform:rotate(180deg)}
.mk-header .mk-nav-item{position:relative}
.mk-header .mk-drop{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border-radius:0;box-shadow:0 20px 50px rgba(40,20,70,.18);min-width:252px;padding:6px 0;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;z-index:70}
.mk-header .mk-nav-item:hover .mk-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mk-header .mk-drop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.mk-header .mk-drop a{display:block;border-radius:0;padding:13px 22px;font:500 15px var(--mk-body,'Plus Jakarta Sans',sans-serif);color:#2d1b4e;border-bottom:1px dashed #e7e2f2;white-space:nowrap;text-decoration:none;transition:background .15s ease,color .15s ease}
.mk-header .mk-drop a:last-child{border-bottom:none}
.mk-header .mk-drop a:hover{color:#6f59c9;background:transparent;border-bottom:2px solid #6f59c9}
.mk-header .mk-header-right{display:flex;align-items:center;gap:14px}

@media(max-width:1100px){
  .mk-nav-pill{display:none}
}
@media(max-width:900px){
  .mk-foot-cols, .mk-foot-mid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .mk-foot-cols, .mk-foot-mid{grid-template-columns:1fr}
}
@media(max-width:1100px){
  .mk-burger{display:flex}
}
@media(max-width:600px){
  .mk-header-right .mk-btn-book{display:none}
  .mk-logo img{height:46px}
}
@media(max-width:900px){
  .mk-foot-addr p{white-space:normal}
}
@media(max-width:600px){
  .mk-foot-copy{line-height:1.9}
}
@media(max-width:760px){
  .mk-announce{font-size:12.5px;padding:11px 16px;line-height:1.45}
}
@media(max-width:480px){
  .mk-logo img{height:40px}
}
@media (max-width:768px){
  .mk-btn-book{min-height:44px}
}
@media(max-width:1100px){
  .mk-header .mk-nav-pill{display:none}
}
/* ================= END IMPORTED: VITRIFY MARKETING CHROME ================= */


/* ==================================================================
   PROMO BANNER (clinic-facing, 3 rotating messages)
   pass-20260920-profile. Transcribed from the handoff stylesheet, which
   governs below the chrome (register entry 89).
   ⚠️ The gradient is the HANDOFFs, not the announcement bars. In the handoff
   both come from one --hdr-banner-grad token; here they legitimately differ,
   because the chrome follows marketing (#2b1a4d/#4a2152 @55%) and everything
   below it follows the handoff (#2B194D/#472052 @50%). A shared token would
   have to lie about one of them, so the promo banner gets its own.
   ================================================================== */
:root {
  --promo-grad: linear-gradient(90deg, #2B194D 0%, #472052 50%, #7A2A50 100%);
  /* The pale lavender a white button settles to on hover. Close to
     --color-accent-tint (#EFEBF9) but NOT equal, and it was matched against the
     handoff, so it gets its own token rather than being rounded onto one. */
  --color-white-hover: #F3EFFC;
  /* Body and kicker text inside the promo gradient. Lighter than
     --color-on-dark-muted (#C9BFEF), which is tuned for the darker chrome. */
  --color-on-promo: #E6DDF7;
  /* The WhatsApp button's hover ground. Again NOT --color-success-tint
     (#E3F3EA): matched to AB's reference render, so it keeps its own value. */
  --color-success-pale: #F0FAF4;
}
.btn--white { background: var(--color-surface); color: var(--color-brand-deep); border-radius: var(--r-pill); height: 44px; padding: 0 22px; font-weight: var(--fw-bold); white-space: nowrap; }
.btn--white:hover, .btn--white.is-hover { background: var(--color-white-hover); color: var(--color-brand-deep); }
.promo-banner { position: relative; border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-8); background: var(--promo-grad); color: var(--color-on-dark); display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap; }
.promo-banner__slide { flex: 1; display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap; min-width: 0; }
.promo-banner__slide[hidden] { display: none; }
.promo-banner__body { flex: 1; min-width: 240px; }
.promo-banner__kicker { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-on-promo); }
.promo-banner__title { font-size: var(--fs-16); font-weight: var(--fw-extrabold); line-height: 1.3; margin-top: 2px; }
.promo-banner__text { font-size: var(--fs-13); color: var(--color-on-promo); margin-top: var(--sp-1); line-height: 1.5; text-wrap: pretty; }
.promo-banner .btn--white { height: 40px; padding: 0 var(--sp-8); font-size: var(--fs-13-5); }
.promo-banner__dots { display: flex; gap: var(--sp-2); align-items: center; }
/* The dot is a translucent white on the gradient. color-mix rather than a
   literal rgba, so the alpha is expressed against the token it tints. */
.promo-banner__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--color-on-dark) 40%, transparent); cursor: pointer; }
.promo-banner__dot.is-active { background: var(--color-on-dark); }
.promo-banner--top { margin-bottom: var(--sp-8); }
.promo-banner--mid { margin-bottom: var(--sp-8); }
.promo-banner--end { margin-top: var(--sp-3); }
/* A CTA whose destination is not built yet keeps the design's button, in place,
   in the directory's existing held convention -- never a live link to a 404.
   All three profile CTAs are held today: /providers/plans?offer=crm3 and the
   claim flow (DEFERRED stage 7) both 404. */
.promo-banner .btn--white.is-held { background: color-mix(in srgb, var(--color-on-dark) 35%, transparent); color: var(--color-on-dark); opacity: 1; }


/* ==================================================================
   VITRIFY CLINIC SCORE card — pass-20260920-clinicscore.
   Design geometry reused (96px ring, 8px stroke, factor rows and bars);
   what is new is the scope, which has to be visible and not inferred.
   ================================================================== */
.score-cs-head { display: flex; align-items: center; gap: var(--sp-7); margin-top: var(--sp-5); }
.score-cs-figure { min-width: 0; }
.score-cs-value { font-size: var(--fs-24); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); line-height: 1.1; }
.score-cs-of { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--color-ink-muted); }
.score-cs-scope { margin-top: var(--sp-2); font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--color-ink-muted); }
/* A partial score says so in the same weight as the number itself. */
.score-cs-scope--partial { color: var(--color-warning); }
/* The sentence that stops a small number reading as a verdict. Not a footnote:
   same type size as the card body, its own tinted block, directly under the
   figure, above the factor rows. */
.score-cs-why { margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  background: var(--color-accent-tint); border: 1px solid var(--color-accent-tint-border);
  font-size: var(--fs-12-5); line-height: var(--lh-body); color: var(--color-ink); text-wrap: pretty; }

/* THE DASHED GAP. The solid track is the weight this clinic could be measured
   on; the dashed arc is the weight nobody has checked. A one-factor score is
   then visibly a fifth of a circle, not a low score on a full one. */
.score-ring--cs .score-ring-track { stroke: var(--color-score-track); }
.score-ring--cs .score-ring-gap { stroke: var(--color-accent-pale); stroke-dasharray: 2 6; opacity: 0.75; }
.score-ring-fill--partial { stroke: var(--color-accent); }

/* Two kinds of empty row, which must never look alike.
   .is-unchecked  = nobody looked      -> muted label, dashed hollow bar
   a 0-width fill = we looked, none    -> normal label, solid empty track */
.score-factor.is-unchecked dt { color: var(--color-ink-muted); }
.score-factor.is-unchecked dd { color: var(--color-ink-muted); font-weight: var(--fw-medium); font-style: italic; }
.score-bar--unchecked { background: transparent; border: 1px dashed var(--color-accent-pale); }


/* ================== Clinic Score in the HERO box — pass-20260920-heroscore ==
   The rail card is gone; the factor rows now live behind the Breakdown link as
   a <details> inside the note line. No JavaScript: the handoff's link was an
   in-page anchor and a <details> keeps that no-JS property.
   ========================================================================== */
.score-box--cs .score-box-text { min-width: 0; }
/* A partial score gets the scope in the band slot instead of a verdict word. */
.score-box-band--scope { color: var(--color-warning); font-weight: var(--fw-semibold); }

.score-detail { display: inline; }
.score-detail > summary { display: inline; cursor: pointer; color: var(--color-brand);
  font-weight: var(--fw-semibold); list-style: none; }
.score-detail > summary::-webkit-details-marker { display: none; }
/* ⚠️ NO DISCLOSURE MARKER. The handoff's breakdown control is a plain inline
   link with no glyph after it; the triangles were mine, added with the
   <details>. The native marker stays suppressed. Register entry 118. */
.score-detail > summary:hover { text-decoration: underline; }
.score-detail > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }

/* The panel is block-level inside an inline summary's parent, so it is pulled
   back to the box's left edge rather than indenting under the link. */
.score-detail__panel { display: block; margin: var(--sp-5) 0 0; padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--color-border); }
.score-detail__why { margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md); background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-tint-border); font-size: var(--fs-12-5);
  line-height: var(--lh-body); color: var(--color-ink); text-wrap: pretty; }
.score-detail__more { display: inline-block; margin-top: var(--sp-5); font-size: var(--fs-12-5);
  font-weight: var(--fw-semibold); color: var(--color-brand); }


/* --- two defects found by rendering the expanded state, not by reading it ---
   1. `.score-box` is align-items:center, which is right for three short lines
      and wrong the moment the panel opens: the ring floated in the vertical
      middle of a 700px box with a slab of whitespace above it. Top-aligned only
      while open, so the collapsed box keeps the handoff's centred geometry.
   2. `.score-factor-head` is space-between with NO gap. At the rail's 300px that
      never showed; in the hero's ~250px text column "Contactability" and "Not
      checked" ran into each other with no space between them. */
.score-box--cs:has(.score-detail[open]) { align-items: flex-start; }

/* The panel breaks out of the text column to the full width of the box, so the
   factor rows get the same room they had in the rail rather than 250px. */
.score-detail__panel { margin-left: calc(-1 * (96px + var(--sp-7))); }

.score-detail__panel .score-factor-head { gap: var(--sp-5); align-items: baseline; }
.score-detail__panel .score-factor-head dt { min-width: 0; }
.score-detail__panel .score-factor-head dd { flex: none; white-space: nowrap; }


/* A footer entry whose destination is not built yet. It keeps its place in the
   column so the list does not silently shorten, and it is NOT an <a>, so it
   cannot be clicked, focused or crawled to a 404. Register entry 115. */
.mk-foot-held { color: var(--color-ink-muted); cursor: default; }
.mk-foot-held__note { display: block; font-size: var(--fs-12); font-style: italic; opacity: 0.85; }


/* ============ Clinic hero score box on SCREEN 1's proportions ==============
   AB, 2026-09-20 (register entry 122). A DELIBERATE MOVE AWAY from the clinic
   design: the hero takes the doctor-discovery card's smaller box. Values are
   the Screen 1 block at vitrify.css:438-443 of the handoff.

   ⚠️ ONE THING IS NOT COPIED. Screen 1's own render is broken: `.score-ring` is
   declared 56px at L439 and then redefined to 96px at L867 by the Screens 2-6
   block, so its ring DIV is 96px while its <svg> is 56px -- the number centres
   on the div and lands outside and below-right of the ring, the label wraps to
   two lines and the box clips. That is the same dead-CSS duplicate as entry 121.
   The container is sized to the ring here so the number sits inside it.

   ⚠️ The BACKGROUND deliberately stays #F3F1FB. Screen 1 asks for
   --color-surface-alt but that rule is outranked in the handoff's own file and
   takes effect on no screen anywhere, so there is nothing to copy. */
.score-box--cs .score-ring { width: 56px; height: 56px; }
.score-box--cs .score-ring-value { font-size: var(--fs-18); }
.score-box--cs .score-box-label { font-size: 10.5px; letter-spacing: var(--ls-caps); }
.score-box--cs .score-box-band { font-size: var(--fs-14); }
.score-box--cs .score-box-band--s1 { color: var(--color-brand); }
.score-box--cs .score-box-note { font-size: var(--fs-11-5); }


/* ========== matched to AB's reference render, 2026-09-20 ==================
   WhatsApp as an OUTLINE button in the WhatsApp green, not the solid block
   clinic-handover-20260919 draws. The rail score card's total and reason line. */
.btn--whatsapp { background: var(--color-surface); color: var(--color-success); border: 1px solid var(--color-success); }
.btn--whatsapp:hover, .btn--whatsapp.is-hover { background: var(--color-success-pale); color: var(--color-success-hover); border-color: var(--color-success-hover); text-decoration: none; }
.score-rail-total { margin-top: var(--sp-7); font-size: var(--fs-20); font-weight: var(--fw-extrabold); color: var(--color-brand-deep); }
.score-rail-total span { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-ink-muted); }
.score-rail-why { margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  background: var(--color-accent-tint); border: 1px solid var(--color-accent-tint-border);
  font-size: var(--fs-12-5); line-height: var(--lh-body); color: var(--color-ink); text-wrap: pretty; }


/* An icon inside a button must never be shrunk by its own label.
   ⚠️ Measured 2026-09-20: the WhatsApp glyph rendered 1.5px wide against 16px
   for Call and Website. `.btn` is a flex row and an inline <svg> is flex-shrink
   1 by default, so the longest label in a three-up grid squeezes its own icon to
   nothing. It reads as a missing icon, which is why it went unnoticed.
   ⚠️ NOT introduced here: clinic-handover-20260919 has the same defect, measured
   at 3.5px on the same button. Adding a 1px border to the WhatsApp button took
   it from nearly-invisible to invisible. One rule fixes every button. */
.btn > svg { flex: 0 0 auto; }


/* The cost block now uses the first-visit component (card--tint + faq-grid), so
   its six bespoke rules are gone. Dead CSS left behind after a component change
   is how .score-box ended up defined twice in the handoff. */
.cost-questions { margin-top: var(--sp-8); }


/* The About lead is ours, generated from registry fields. What follows it, where
   a clinic has supplied copy, is THEIRS and is marked as theirs -- 222 of the 771
   clinic-written blurbs carry superlatives, and unattributed they read as this
   directory's claims. The source wraps them in <blockquote>, which is why they
   used to render with a stray indent; styled as a quote, that indent is the point. */
.about-lede { margin: 0; font-size: var(--fs-14); line-height: var(--lh-relaxed); text-wrap: pretty; }
.about-own { margin: var(--sp-7) 0 0; padding: var(--sp-5) var(--sp-7); border-left: 3px solid var(--color-accent-line);
  background: var(--color-surface-alt); border-radius: 0 var(--r-md) var(--r-md) 0; }
.about-own figcaption { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps-narrow);
  text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--sp-3); }
.about-own blockquote { margin: 0; }
.about-own p { margin: 0; font-size: var(--fs-13); line-height: var(--lh-relaxed);
  color: var(--color-ink-muted); text-wrap: pretty; }


/* Contact card: hours row, social buttons and the provenance line the handoff
   draws beneath a rule. The social buttons reuse .icon-btn, the same bordered
   square the hero Follow row uses, so there is one button in one place. */
.contact-list .contact-hours { font-weight: var(--fw-bold); color: var(--color-ink); }
.contact-list .contact-hours--open { color: var(--color-success); }
.contact-social { display: flex; gap: var(--sp-4); margin-top: var(--sp-6);
  padding-top: var(--sp-6); border-top: 1px solid var(--color-border); }
.contact-source { margin: var(--sp-5) 0 0; font-size: var(--fs-12);
  line-height: var(--lh-body); color: var(--color-ink-muted); }


/* THE AREA MAP (migration 036, locality tier). No pin, by construction: the
   renderer omits `marker=` for this tier. The wash covers the WHOLE frame
   because the caption's claim is "somewhere in this view" -- a drawn circle
   would be a scale claim, and the frame is fitted to our bbox by a tile
   service whose fitting rule we do not control. Covering everything keeps the
   claim true under either rule.
   `pointer-events: none` so the wash never eats a drag on the map beneath. */
.map-frame--area { position: relative; }
.map-area-wash { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--color-accent) 8%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 16%, transparent) 55%,
    color-mix(in srgb, var(--color-accent) 26%, transparent) 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent) 34%, transparent); }
.map-caption { margin: var(--sp-4) 0 0; }
.map-caption strong { color: var(--color-ink); font-weight: var(--fw-bold); }
/* The licence line is a condition of using the data, not a caption, so it is
   smaller than the caption and always the last thing under the frame. */
.map-credit { margin: var(--sp-2) 0 0; font-size: var(--fs-11); }


/* The straight-line qualifier sits ON the row, in the muted weight, so the
   number is never read as a road distance. See migration 037. */
.distance-crow { font-weight: var(--fw-regular); color: var(--color-ink-muted); font-size: var(--fs-11); }
.distance-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.distance-list strong { white-space: nowrap; }

/* The landmark's own name, after the category. Muted, because the category is
   what the row is answering and the name is the detail. */
.distance-name { color: var(--color-ink); }

/* 2026-09-20 — distances that are honest about their own precision.
   Migration 038 lets a distance be measured from an area rather than a pin,
   and the row says so in words (about 2 km, or just serves this area).
   The weight is dropped to match: a figure the position cannot fully support
   should not sit on the page at the same visual authority as one measured
   from the building. Same treatment for both, because to a reader they are
   the same claim -- this is our best estimate, not a measurement. */
.distance-list strong.is-approx { color: var(--color-ink-muted); font-weight: var(--fw-regular); }

/* 2026-09-20 — Reviews on Google. The block ships hidden and the runtime
   reveals it only once Google has answered, so a blocked key or an exhausted
   quota leaves no empty heading behind. */
#google-reviews .gp-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; }
#google-reviews .gp-score { font-size: var(--fs-24); font-weight: var(--fw-semibold); color: var(--color-ink); }
#google-reviews .gp-stars { color: var(--color-rating); letter-spacing: 1px; }
#google-reviews .gp-count { color: var(--color-ink-muted); font-size: var(--fs-12-5); }
#google-reviews .gp-link { font-size: var(--fs-12-5); }
#google-reviews .gp-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
#google-reviews .gp-review { border-top: 1px solid var(--color-border); padding-top: var(--sp-3); }
#google-reviews .gp-review-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-12-5); }
#google-reviews .gp-when { color: var(--color-ink-muted); }
#google-reviews .gp-review p { margin: var(--sp-2) 0 0; font-size: var(--fs-12-5); line-height: 1.6; overflow-wrap: anywhere; }
#google-reviews .gp-credit { margin-top: var(--sp-4); }

/* 2026-09-20 — the invitation to review. */
.review-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.review-cta p { margin: 0; font-size: var(--fs-12-5); }






/* ==================================================================
   Footer v2 ("6a") — 2026-09-21, built to AB's written spec.
   ⚠️ THE SPEC NAMED A REFERENCE THAT DOES NOT EXIST. It pointed at
   `clinic-handover-20260919/site/doctor-discovery/index.html`
   (`<footer class="vf2">`) and a "Footer v2 (6a)" section in that
   package's vitrify.css. That package's pages carry
   `<footer class="site-footer">`, the 20260920 export carries
   `mk-footer`, and no text file in either holds the string `vf2`.
   Everything below is therefore built from the written spec and the
   screenshot, not copied — so any drift from the designer's original
   is drift from a description, not from markup.

   ⚠️ NO `font:` SHORTHAND WITH `inherit` AS THE FAMILY. The first cut of
   this file wrote `font: 700 22px/30px inherit` on eleven rules. That is
   INVALID CSS -- the shorthand requires a real family and `inherit` is not
   one -- so the browser discarded all eleven declarations whole and every
   element fell back to the inherited 14px/500. The markup was perfect and the
   footer rendered with no typography at all. Nothing in the HTML could show
   it, and a browser check that measured colour and `display` passed it.
   Sizes and weights are longhand here for that reason.

   ⚠️ COLOURS ARE TOKENS BECAUSE THE AUDIT BLANKS :root AND READS THE
   REST. test/design-test.sh masks every :root block and the imported
   marketing chrome, then fails on any hex below. Writing the spec's
   seventeen literals inline would have failed it; they are declared
   once here and referenced throughout.
   ================================================================== */
:root {
  --vf2-grad-a: #2b194d;          /* top edge + banner, left stop */
  --vf2-grad-b: #472052;          /* mid stop */
  --vf2-grad-c: #7a2a50;          /* right stop */
  --vf2-rule: #d9d2ee;            /* 1px line above the 6px edge */
  --vf2-ink: #1a1a1c;             /* footer body text */
  --vf2-violet: #7059ca;          /* eyebrows, hover, inline links */
  --vf2-navy: #2e1b4e;            /* headline links, search text, chips */
  --vf2-chip-border: #e5e1f6;     /* chip + ledger-row rules */
  --vf2-tint: #f3f1fb;            /* chip hover, ticker ground */
  --vf2-muted: #5f6067;           /* disclaimer, ticker items */
  --vf2-meta: #7a7b84;            /* counts, copyright */
  --vf2-hair: #ececec;            /* bottom-bar rule */
  --vf2-live: #22c55e;            /* "newly registered" dot */
  --vf2-live-ink: #15803d;        /* "newly registered" label */
  --vf2-sep: #c9c0dc;             /* ticker bullet separator */
  --vf2-on-dark: #e6ddf7;         /* banner eyebrow */
  --vf2-pill-hover: #f3effc;      /* banner button hover */
  /* ⚠️ These two are declared here, not written inline, because the audit
     flags `rgba(` ANYWHERE below the token blocks -- with no mask-image
     exemption of the kind hex gets. A :root is the only legal home for them. */
  --vf2-tile-bg: rgba(255, 255, 255, .12);
  --vf2-dot-off: rgba(255, 255, 255, .3);
}

.vf2 {
  margin-top:var(--sp-9);
  border-top:1px solid var(--vf2-rule);
  background:var(--color-surface);
  color:var(--vf2-ink);
  font:500 14px/1.45 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* ⚠️ :where() ON PURPOSE. Written as `.vf2 a` these are specificity 0,1,1
   and beat every `.vf2-pill` / `.vf2-chip` / `.vf2-row` colour at 0,1,0 --
   which shipped a white-on-white pill button inside the banner and left the
   chips inheriting body ink instead of navy. :where() drops these to 0,0,1
   so the component classes win, which is what "all footer links inherit,
   unless the component says otherwise" actually means. */
:where(.vf2) a { color:inherit; text-decoration:none; }
:where(.vf2) a:hover { color:var(--vf2-violet); }
.vf2-edge { height:6px; background:linear-gradient(90deg, var(--vf2-grad-a) 0%, var(--vf2-grad-b) 50%, var(--vf2-grad-c) 100%); }

/* ⚠️ FULL-BLEED, 40px GUTTERS, NO max-width — as specified. The spec says
   this "matches the header"; MEASURED, it does not:.mk-wrap is
   max-width:1280px centred with a clamp(20px,4vw,56px) gutter, so at 1920px
   the header's content begins ~376px in and this begins at 40px. Built to
   the instruction, with the discrepancy reported rather than silently
   "corrected" to a container the spec forbids. */
.vf2-main {
  padding:44px var(--sp-11) 0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr);
  gap:44px;
  align-items:start;
}
@media (max-width:960px) { .vf2-main { grid-template-columns:minmax(0, 1fr); gap:var(--sp-10-5); } }

/* ---------------------------------------------------------- left column */
.vf2-eyebrow { display:block; font-size:var(--fs-11); font-weight:700; line-height:1.3; text-transform:uppercase; letter-spacing:.1em; color:var(--vf2-violet); }
.vf2-search { margin-top:var(--sp-6); display:flex; align-items:flex-end; gap:var(--sp-6); border-bottom:2px solid var(--vf2-navy); padding-bottom:var(--sp-4); }
.vf2-search input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-size:var(--fs-22); font-weight:700; line-height:30px; letter-spacing:-.02em; color:var(--vf2-navy); }
/* Placeholder is the lighter meta grey, not the input's own navy: at 22px/700
   a navy placeholder reads as a filled-in value rather than a prompt.
   `opacity:1` stays -- Firefox dims placeholders by default, which would
   wash this out a second time on top of the colour. */
.vf2-search input::placeholder { color:var(--vf2-meta); opacity:1; }
.vf2-go { flex:none; width:40px; height:40px; border:0; border-radius:var(--r-pill); background:var(--vf2-navy); color:var(--color-on-dark); display:grid; place-items:center; cursor:pointer; }
.vf2-chips { margin-top:var(--sp-6); display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.vf2-chip { display:inline-flex; align-items:center; height:30px; padding:0 var(--sp-5); border:1px solid var(--vf2-chip-border); border-radius:var(--r-pill); font-size:var(--fs-13); color:var(--vf2-navy); transition:background .15s ease, border-color .15s ease; }
.vf2-chip:hover { background:var(--vf2-tint); border-color:var(--vf2-violet); color:var(--vf2-navy); }
.vf2-allstates { font-size:var(--fs-13); font-weight:600; line-height:1; color:var(--vf2-violet); margin-left:var(--sp-2); }
.vf2-treat { margin-top:22px; }
.vf2-treat .vf2-eyebrow { letter-spacing:.06em; }
.vf2-treat-row { margin-top:var(--sp-2); display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4-5); }
.vf2-treat-row a { font-size:var(--fs-13-5); font-weight:600; line-height:20px; color:var(--vf2-navy); }
.vf2-note { margin:var(--sp-8) 0 0; max-width:460px; font-size:var(--fs-13); font-weight:400; line-height:20px; color:var(--vf2-muted); }
.vf2-note a { color:var(--vf2-violet); font-weight:600; }

/* --------------------------------------------------------- right column */
.vf2-menus { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-10); }
@media (max-width:640px) { .vf2-menus { grid-template-columns:minmax(0, 1fr); } }
.vf2-menus h3 { margin:0; font-size:var(--fs-11); font-weight:700; line-height:1.3; text-transform:uppercase; letter-spacing:.08em; color:var(--vf2-violet); }
.vf2-menus ul { margin:var(--sp-3) 0 0; padding:0; list-style:none; }
.vf2-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px solid var(--vf2-chip-border); font-size:17px; font-weight:700; line-height:24px; letter-spacing:-.01em; color:var(--vf2-navy); transition:color .15s ease, padding-left .15s ease; }
.vf2-row:hover { color:var(--vf2-violet); padding-left:var(--sp-2); }
.vf2-row .vf2-count { font-size:var(--fs-12-5); font-weight:500; line-height:1; color:var(--vf2-meta); margin-left:var(--sp-2); }
.vf2-row svg { flex:none; }

/* ------------------------------------------------------ rotating banner */
.vf2-banner { margin-top:var(--sp-8); position:relative; overflow:hidden; border-radius:var(--r-2xl); background:linear-gradient(90deg, var(--vf2-grad-a) 0%, var(--vf2-grad-b) 55%, var(--vf2-grad-c) 100%); color:var(--color-on-dark); }
:where(.vf2-banner) a:hover { color:var(--color-on-dark); }
.vf2-slide { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); padding:var(--sp-6) var(--sp-8) var(--sp-4-5); position:absolute; inset:0; opacity:0; visibility:hidden; }
/* The first slide is in flow so it sets the banner's height; the rest stack. */
.vf2-slide:first-child { position:relative; }
.vf2-slide-l { display:flex; align-items:center; gap:var(--sp-6); min-width:0; }
.vf2-tile { flex:none; width:36px; height:36px; border-radius:var(--r-lg); background:var(--vf2-tile-bg); display:grid; place-items:center; color:var(--color-on-dark); }
.vf2-slide .vf2-eyebrow { color:var(--vf2-on-dark); letter-spacing:.08em; }
/* ⚠️ display:block -- as inline spans the eyebrow and headline rendered as
   one run: "VITRIFY SOFTWARERun the whole clinic on one system". */
.vf2-head { display:block; font-size:var(--fs-15); font-weight:800; line-height:20px; letter-spacing:-.01em; }
.vf2-pill { flex:none; display:inline-flex; align-items:center; height:38px; padding:0 var(--sp-4-5); border-radius:var(--r-pill); background:var(--color-surface); color:var(--vf2-navy); font-size:var(--fs-13-5); font-weight:700; line-height:1; transition:background .15s ease; }
.vf2-pill:hover { background:var(--vf2-pill-hover); color:var(--vf2-navy); }
.vf2-dots { position:absolute; left:0; right:0; bottom:var(--sp-2); display:flex; justify-content:center; gap:var(--sp-2); }
.vf2-dots i { width:6px; height:6px; border-radius:var(--r-pill); background:var(--vf2-dot-off); }

@keyframes dv-rot { 0% { opacity:0; visibility:visible; } 4% { opacity:1; } 32% { opacity:1; } 36% { opacity:0; visibility:hidden; } 100% { opacity:0; visibility:hidden; } }
@keyframes dv-dot { 0%, 32% { background:var(--color-surface); } 36%, 100% { background:var(--vf2-dot-off); } }
.vf2-slide { animation:dv-rot 15s 0s infinite both; }
.vf2-slide:nth-child(2) { animation-delay:5s; }
.vf2-slide:nth-child(3) { animation-delay:10s; }
.vf2-dots i { animation:dv-dot 15s 0s infinite both; }
.vf2-dots i:nth-child(2) { animation-delay:5s; }
.vf2-dots i:nth-child(3) { animation-delay:10s; }

/* ------------------------------------------------------------ bottom bar */
.vf2-bottom { margin:var(--sp-9-5) var(--sp-11) 0; padding:var(--sp-6) 0; border-top:1px solid var(--vf2-hair); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-8); font-size:var(--fs-12); color:var(--vf2-meta); }
.vf2-brand { display:flex; align-items:center; gap:var(--sp-4); }
.vf2-brand img { margin-left:-5px; display:block; }
.vf2-legal { display:flex; flex-wrap:wrap; gap:var(--sp-4-5); font-size:var(--fs-13); color:var(--vf2-navy); }
.vf2-social { display:flex; align-items:center; gap:var(--sp-6); color:var(--vf2-navy); }

/* ---------------------------------------------------------------- ticker */
.vf2-ticker { background:var(--vf2-tint); }
.vf2-ticker-in { padding:var(--sp-3) var(--sp-11); display:flex; align-items:center; gap:var(--sp-8); font-size:var(--fs-12); color:var(--vf2-muted); }
.vf2-live { flex:none; z-index:1; background:var(--vf2-tint); padding-right:var(--sp-5); display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-12); font-weight:700; line-height:1; color:var(--vf2-live-ink); }
.vf2-live i { width:6px; height:6px; border-radius:var(--r-pill); background:var(--vf2-live); }
.vf2-track { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vf2-run { display:flex; align-items:center; width:max-content; gap:var(--sp-9-5); white-space:nowrap; animation:dv-marquee 48s linear infinite; }
.vf2-run span { color:var(--vf2-sep); }
@keyframes dv-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ⚠️ Freeze on slide 1 rather than merely slowing:the rotator hides slides
   with visibility, so an unanimated slide 2 or 3 would sit invisible over
   slide 1 and swallow its clicks. */
@media (prefers-reduced-motion: reduce) {
  .vf2-slide, .vf2-dots i, .vf2-run { animation:none; }
  .vf2-slide:first-child { opacity:1; visibility:visible; }
  .vf2-slide:not(:first-child) { opacity:0; visibility:hidden; }
  .vf2-dots i:first-child { background:var(--color-surface); }
}

/* ⚠️ `hidden` LOSES TO `display:inline-flex`. The UA sheet gives [hidden] a
   display:none at the lowest precedence, and `.pill` sets inline-flex in the
   author sheet, which wins -- so the live Google rating pill would render as
   an empty cream capsule next to the held one until the fetch resolved, and
   for ever if it never did. */
.pill[hidden] { display: none; }


/* ==================================================================
   Compare — floating button, expanding bar. 2026-09-21.

   Three states, and the difference between two of them is the whole
   point of the design AB specified:
     collapsed  a pill, bottom right, showing the count
     expanded   the bar; the chevron returns it to the pill
     dismissed  the X hides BOTH until the page is reloaded, and the
                selection itself survives so nothing is lost by it

   ⚠️ The bar is docked to the BOTTOM. AB's screenshot is cropped with
   page content above it and does not settle top vs bottom; the pill it
   expands from is bottom-right, so it grows from there. One rule to
   flip if that reading is wrong.
   ================================================================== */
:root {
  /* rgba lives in :root or the CSS audit flags it wherever it appears. */
  --cmp-shadow: 0 10px 34px rgba(42, 27, 78, .24);
  --cmp-hairline: rgba(255, 255, 255, .28);
  --cmp-dash: #cfc6ee;            /* the "add another" dashed tile */
}

.cmp-fab {
  position: fixed; right: var(--sp-8); bottom: var(--sp-8); z-index: 70;
  display: inline-flex; align-items: center; gap: var(--sp-4);
  height: 56px; padding: 0 var(--sp-9);
  border: 0; border-radius: var(--r-pill);
  background: var(--color-brand-deep); color: var(--color-on-dark);
  font-family: inherit; font-size: var(--fs-16); font-weight: var(--fw-bold);
  cursor: pointer; box-shadow: var(--cmp-shadow);
}
.cmp-fab:hover { background: var(--color-brand-deep); }
/* ⚠️ `hidden` loses to an author `display`, exactly as it did on .pill. */
.cmp-fab[hidden], .cmp-bar[hidden] { display: none; }

.cmp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
  background: var(--color-surface); box-shadow: var(--cmp-shadow);
}
.cmp-head {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-11);
  background: var(--color-brand-deep); color: var(--color-on-dark);
}
.cmp-head-txt { flex: 1 1 auto; min-width: 0; }
.cmp-head h2 { margin: 0; font-size: var(--fs-20); font-weight: var(--fw-extrabold); letter-spacing: -.01em; }
.cmp-head p { margin: 0; font-size: var(--fs-13); opacity: .82; }
.cmp-now {
  flex: none; display: inline-flex; align-items: center; height: 48px;
  padding: 0 var(--sp-9); border: 0; border-radius: var(--r-md);
  background: var(--color-cta); color: var(--color-on-dark);
  font-family: inherit; font-size: var(--fs-16); font-weight: var(--fw-bold);
  cursor: pointer; text-decoration: none;
}
.cmp-now:hover { background: var(--color-cta-hover); color: var(--color-on-dark); }
.cmp-icon {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--cmp-hairline); background: transparent;
  color: inherit; display: grid; place-items: center; cursor: pointer;
}
.cmp-icon:hover { border-color: var(--color-on-dark); }

.cmp-items {
  display: flex; flex-wrap: wrap; gap: var(--sp-7);
  padding: var(--sp-7) var(--sp-11);
}
.cmp-item {
  display: flex; align-items: center; gap: var(--sp-6);
  flex: 1 1 280px; min-width: 260px;
  border: 1px solid var(--color-border); border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6);
}
.cmp-avatar {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-lg);
  background: var(--color-accent-tint); color: var(--color-accent);
  display: grid; place-items: center;
  font-size: var(--fs-15); font-weight: var(--fw-extrabold);
}
.cmp-item-txt { min-width: 0; }
/* ⚠️ display:block. Both are spans, and inline they render as one run:
   "...Ahmedabad)Vitrify Score 23". The same mistake the footer banner's
   eyebrow and headline made earlier in this pass. */
.cmp-item-name { display: block; font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--color-ink); overflow-wrap: anywhere; }
.cmp-item-sub { display: block; font-size: var(--fs-13); color: var(--color-ink-muted); }
.cmp-rm { margin-left: auto; flex: none; border: 0; background: transparent; cursor: pointer; color: var(--color-ink-muted); padding: var(--sp-2); }
.cmp-rm:hover { color: var(--color-ink); }
.cmp-add {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  flex: 1 1 280px; min-width: 260px;
  border: 2px dashed var(--cmp-dash); border-radius: var(--r-xl);
  padding: var(--sp-5); background: transparent;
  font-family: inherit; font-size: var(--fs-16); font-weight: var(--fw-bold);
  color: var(--color-accent); cursor: pointer;
}
.cmp-add:hover { background: var(--color-accent-tint); }

/* The toggle on a card or a profile, once it is holding something. */
.btn--toggle[aria-pressed="true"] { background: var(--color-accent-tint); border-color: var(--color-accent); color: var(--color-accent); }

@media (max-width: 720px) {
  .cmp-head { flex-wrap: wrap; gap: var(--sp-5); padding: var(--sp-5) var(--sp-7); }
  .cmp-items { padding: var(--sp-5) var(--sp-7); }
  .cmp-fab { right: var(--sp-5); bottom: var(--sp-5); }
}

/* The compare table itself. */
.cmp-table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--color-border); }
.cmp-table thead th { font-size: var(--fs-16); font-weight: var(--fw-extrabold); color: var(--color-ink); }
.cmp-table tbody th { width: 200px; font-weight: var(--fw-semibold); color: var(--color-ink-muted); font-size: var(--fs-13); }
.cmp-table td { color: var(--color-ink); }
.cmp-na { color: var(--color-ink-muted); }

/* A footer row with nowhere to go: same shape and rhythm, muted, no arrow,
   and it says why rather than pretending to be a link. */
.vf2-row--held { color: var(--vf2-meta); cursor: default; }
.vf2-row--held:hover { color: var(--vf2-meta); padding-left: 0; }

.vf2-treat-held { font-size: var(--fs-13-5); font-weight: 600; line-height: 20px; color: var(--vf2-meta); }
.vf2-treat-note { margin: var(--sp-2) 0 0; font-size: var(--fs-12); color: var(--vf2-meta); }

.cmp-empty { margin: 0; align-self: center; font-size: var(--fs-14); color: var(--color-ink-muted); }

/* The nearby other clinics mini card gained a Compare button. The card was a
   single <a>; it is now a <div> with the anchor stretched across it, so the
   whole card still navigates and the button can exist at all. */
.clinic-mini { position: relative; }
.clinic-mini-link { display: flex; flex-direction: column; gap: var(--sp-2); color: inherit; text-decoration: none; min-width: 0; }
.clinic-mini-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-xl); }
.clinic-mini-cmp { position: relative; z-index: 1; margin-top: var(--sp-3); }
.clinic-mini-cmp .btn--toggle { width: 100%; justify-content: center; }

/* ---- "Other clinics in <city>" mini card: DP tile, live rating, score ---- */
/* ⚠️ A DP, NOT A BANNER. This slot was first built as a 16:9 well across the
   top of the card; AB's correction (2026-09-21) is that a directory row wants
   the same square identity tile the rest of the site already uses. So it is
   `.mono-tile--card` verbatim -- 56px, accent tint, the site's monogram -- and
   a Google photo fills that SAME square. The card's proportions therefore do
   not change when a photo lands late, which is what a reserved banner could
   never promise. */
/* ⚠️ NO UNDERLINE ON HOVER (AB, 2026-09-21). The card's click target is a
   stretched <a>, so the sheet's global `a:hover { text-decoration: underline }`
   (L241) underlined EVERYTHING inside it -- the name, the level/distance line
   and even the monogram letters in the tile. `.clinic-mini:hover` already said
   `text-decoration: none` but sits on the wrapping <div>, and an element+pseudo
   rule on the anchor itself outranks an inherited one. The fix has to name the
   anchor: .clinic-mini-link:hover is (0,2,0) against a:hover's (0,1,1). */
.clinic-mini-link:hover, .clinic-mini-link.is-hover,
.clinic-mini-link:hover *, .clinic-mini-link.is-hover * { text-decoration: none; }
.clinic-mini-head { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.clinic-mini-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clinic-mini-dp { overflow: hidden; }
/* The name may now take two lines: the tile eats 56px of a three-up card, and
   an ellipsis after four words tells the reader less than a second line does. */
.clinic-mini-grid--three .clinic-mini-name,
.clinic-mini--dp .clinic-mini-name {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.clinic-mini-dp img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: var(--logo-ratio);
}
/* A photo replaces the monogram rather than covering it, so a transparent PNG
   cannot leave two marks stacked in the same square. */
.clinic-mini-dp.has-photo { background: var(--color-surface-sunken); color: transparent; }
/* A score computed on fewer than six factors takes no verdict colour: it is
   reported out of less, not lower, and a green 18/20 beside a green 90/100
   would say the opposite. Same rule as heroClinicScore(). */
.score-inline--partial { color: var(--color-ink-muted); }
.score-inline-of { font-weight: var(--fw-medium); opacity: .75; }
/* ⚠️ `.score--low` is declared twice in this sheet and the later one (ink-muted,
   for the doctor ring) wins. Inside a mini card that made a REAL low score look
   identical to a held dash, so the card restores the intended colour. */
.clinic-mini-foot .score--low { color: var(--color-score-low); }
.mini-grid-credit { margin: var(--sp-4) 0 0; font-size: var(--fs-11-5); }

/* ---- Google reviews: the stuck button, and the links that actually go somewhere ---- */
/* ⚠️ THE SAME `hidden` TRAP AS `.pill` (see L2287), missed on this one button.
   `.btn` sets display:inline-flex in the author sheet and beats the UA sheet's
   [hidden]{display:none}, so `.gp-more` was visible before Google answered AND
   stayed visible after its own handler set btn.hidden = true -- which is why it
   sat there reading "Loading…" above the reviews it had already loaded. */
.gp-more[hidden] { display: none; }
.gp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); margin-top: var(--sp-5); }
.gp-actions .gp-link { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-12-5); font-weight: var(--fw-bold); }
/* The hero identity tile can hold the clinic's own Google profile picture. */
.mono-tile--logo.has-photo { border-style: solid; border-color: var(--color-border); color: transparent; }
.mono-tile--logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-hero-piccredit { font-size: var(--fs-11-5); margin-top: var(--sp-2); }
.profile-hero-piccredit[hidden] { display: none; }

/* ---- Printable "scan to review us on Google" counter card ---- */
/* Clinic-facing, noindex, not linked from the public profile. The card itself
   is sized to sit in a desk stand; everything around it is screen-only and
   drops out of the print. */
.reviewcard-page { max-width: 680px; }
.reviewcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.reviewcard {
  margin: var(--sp-7) auto 0; width: 100%; max-width: 420px;
  border: 1px solid var(--color-border); border-radius: var(--r-2xl);
  background: var(--color-surface); padding: var(--sp-9);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center;
}
.reviewcard-head { display: flex; align-items: center; gap: var(--sp-4); align-self: stretch; text-align: left; }
.reviewcard-name { font-size: var(--fs-15); font-weight: var(--fw-extrabold); }
.reviewcard-place { font-size: var(--fs-12-5); color: var(--color-ink-muted); }
.reviewcard-ask { font-size: var(--fs-22); font-weight: var(--fw-extrabold); margin-top: var(--sp-4); }
/* The QR is generated as an SVG with a transparent background, so it takes the
   card's colour and stays crisp at any print size. */
.reviewcard-qr { width: 200px; height: 200px; }
.reviewcard-qr svg { width: 100%; height: 100%; display: block; }
.reviewcard-cta { font-size: var(--fs-14); font-weight: var(--fw-bold); }
.reviewcard-foot { font-size: var(--fs-11-5); color: var(--color-ink-muted); line-height: var(--lh-body); }
@media print {
  /* ⚠️ Everything that is not the card is screen furniture: the site header and
     footer, the guidance panel and the buttons that made the print happen. A
     card that prints with a "Print this card" button on it has printed the
     wrong thing. */
  .site-header, .mk-header, .site-footer, .mk-footer, .reviewcard-note,
  .cmp-fab, .cmp-bar, .breadcrumbs, .promo-banner { display: none !important; }
  .reviewcard { border-color: var(--color-ink); margin: 0; max-width: none; }
  .page { padding: 0; }
}

/* ============================================================================
   Header v2 ("4a") - 2026-09-21, built to AB's written spec.

   ⚠️ THE SPEC'S REFERENCE CSS DOES NOT EXIST. It named a "Header v2 (4a)"
   section in clinic-handover-20260919/site/assets/css/vitrify.css; that file
   has no such section and the string `vh2` appears in no text file in the
   estate. Every value below is the one written in the spec.

   ⚠️ The literals live in :root because test/design-test.sh forbids a raw hex
   below the token block - the same reason the vf2 footer has its own block.
   Where a value is identical to one the footer already names, this aliases the
   footer's token instead of restating the hex: two independent copies of
   #7059ca is how a palette drifts.
   ========================================================================= */
:root {
  --vh2-grad-a: var(--vf2-grad-a);      /* utility strip, left stop  #2b194d */
  --vh2-grad-b: var(--vf2-grad-b);      /* mid stop                  #472052 */
  --vh2-grad-c: var(--vf2-grad-c);      /* right stop                #7a2a50 */
  --vh2-violet: var(--vf2-violet);      /* pills, headings, CTA      #7059ca */
  --vh2-navy: var(--vf2-navy);          /* link ink                  #2e1b4e */
  --vh2-line: var(--vf2-chip-border);   /* borders                   #e5e1f6 */
  --vh2-tint: var(--vf2-tint);          /* search ground, pill hover #f3f1fb */
  --vh2-verified: var(--vf2-live-ink);  /* "Verified" label          #15803d */
  --vh2-violet-deep: #5a44b0;           /* CTA hover */
  --vh2-pill-bg: #efeafc;               /* pill hover + active ground */
  --vh2-ink: #443a5e;                   /* nav ink */
  --vh2-muted: #6b6878;                 /* search placeholder, promo body */
  --vh2-meta: #9b95ad;                  /* counts */
  --vh2-tile: #fbfafe;                  /* tile + card ground */
  --vh2-star: #f5b301;                  /* utility strip stars */
  --vh2-on-dark: #e6dfff;               /* utility strip links */
  --vh2-on-dark-2: #d9d0ee;             /* dark promo eyebrow */
  --vh2-sep: rgba(255, 255, 255, .35);  /* utility strip "|" */
  --vh2-shadow: 0 24px 60px rgba(46, 27, 78, .18);
  --vh2-burger-shadow: 0 1px 3px rgba(46, 27, 78, .10);
  --vh2-mob-shadow: 0 6px 18px rgba(46, 27, 78, .10);
  --vh2-gutter: 40px;                   /* same gutter as the footer */
}

.vh2 { position: relative; }
/* ⚠️ `:where()` SO THIS CANNOT OUTRANK A COMPONENT RULE. As `.vh2 a` this was
   (0,1,1) and silently beat every single-class colour rule on an anchor: the
   "List your clinic" CTA declares white but `.vh2-cta` is only (0,1,0), so the
   button inherited the nav's ink (#443a5e) and shipped with dark text on
   violet. `:where()` contributes ZERO specificity, so this still strips the
   UA's blue-and-underlined link default (author origin beats UA regardless)
   while losing to any rule that actually means something. The footer already
   uses `:where(.vf2)` for the same reason. */
:where(.vh2) a { color: inherit; text-decoration: none; }

/* --- 1. utility strip --- */
.vh2 .u { background: linear-gradient(90deg, var(--vh2-grad-a) 0%, var(--vh2-grad-b) 50%, var(--vh2-grad-c) 100%); color: var(--color-on-dark); }
.vh2 .u-in { padding: 0 var(--vh2-gutter); height: 36px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); font-size: var(--fs-13-5); font-weight: 500; white-space: nowrap; }
.vh2 .u-l { color: var(--color-on-dark); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-right: auto; }
.vh2 .u-r { display: flex; align-items: center; gap: var(--sp-6); flex: none; }
.vh2 .u-r a { color: var(--vh2-on-dark); }
.vh2 .u-r a:hover { color: var(--color-on-dark); text-decoration: none; }
.vh2 .u-sep { color: var(--vh2-sep); }
.vh2 .u-brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--color-on-dark); }
.vh2 .u-stars { display: inline-flex; gap: 1px; color: var(--vh2-star); }
.vh2 .u-stars svg { display: block; }
.vh2 .u-demo { color: var(--color-on-dark); font-weight: 700; }

/* --- 2. directory bar --- */
.vh2-bar { min-height: 84px; background: var(--color-surface); border-bottom: 1px solid var(--vh2-line); position: relative; z-index: 50; }
.vh2-in { padding: 0 var(--vh2-gutter); min-height: 84px; display: flex; align-items: center; gap: var(--sp-9); }
.vh2-logo { display: flex; margin-left: -8px; }
/* The asset is a 2x 252x128 cut of the handover logo (the original is
   2132x1080 and 123 KB - a 123 KB logo on 4,801 pages is not a design choice).
   Rendered at its declared 126x64. */
.vh2-logo img { display: block; width: 126px; height: 64px; }
.vh2-search { flex: 1; max-width: 380px; margin-top: var(--sp-1); height: 42px; padding: 0 var(--sp-7); border-radius: var(--r-pill); background: var(--vh2-tint); border: 1px solid var(--vh2-line); color: var(--vh2-muted); font-size: var(--fs-13-5); display: flex; align-items: center; gap: var(--sp-3); }
.vh2-search svg { flex: none; }
.vh2-search input { border: 0; background: transparent; color: var(--vh2-navy); font: inherit; flex: 1; min-width: 0; outline: none; }
.vh2 .n { display: flex; align-items: center; gap: 2px; margin-left: auto; font-size: var(--fs-14); font-weight: 600; color: var(--vh2-ink); white-space: nowrap; }
.vh2 .n .p { padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: var(--sp-1-5); }
.vh2 .n .p:hover, .vh2 .mmw:hover .p, .vh2 .mmw:focus-within .p,
.vh2 .n .p[aria-current="page"] { background: var(--vh2-pill-bg); color: var(--vh2-violet); }
.vh2-cta { margin-left: var(--sp-3); padding: 9px var(--sp-7); border-radius: var(--r-pill); background: var(--vh2-violet); color: var(--color-on-dark); }
.vh2-cta:hover { background: var(--vh2-violet-deep); color: var(--color-on-dark); }

/* --- 3. mega menus --- */
/* ⚠️ THE WRAPPER MUST FILL THE BAR, OR THE MENU CANNOT BE REACHED.
   Measured: the pill ends at y=95 and the panel begins at y=120, because
   `.mm` is anchored to the BAR (top:100%) while `.mmw` was only as tall as the
   pill itself -- 34px inside an 85px bar. That left a 25px band under the pill
   where neither element was hovered, so :hover dropped and display went back to
   none before the cursor ever arrived. The pointer could never get there.
   Stretching `.n` and `.mmw` to the bar's full height makes pill -> panel one
   continuous hover surface. The 10px padding-top on `.mm` then bridges the
   panel's own drop shadow gap, which is all it was ever doing. */
.vh2 .n { align-self: stretch; }
.vh2 .mmw { display: flex; align-items: center; align-self: stretch; }
.vh2 .mm { position: absolute; top: 100%; left: 0; right: 0; padding-top: var(--sp-4); z-index: 60; display: none; }
.vh2 .mmw:hover .mm, .vh2 .mmw:focus-within .mm { display: block; }
/* Escape sets this on the header; a pointer leaving the bar clears it, so the
   menu is dismissable without taking hover away from everyone else. */
.vh2.mm-off .mm { display: none !important; }
.vh2 .mm-in { padding: 0 var(--vh2-gutter); }
.vh2 .mm-panel { display: grid; gap: var(--sp-10); padding: var(--sp-9) var(--sp-10) var(--sp-8); background: var(--color-surface); border: 1px solid var(--vh2-line); border-radius: 18px; box-shadow: var(--vh2-shadow); min-width: 0; white-space: normal; }
.vh2 .mm-panel > * { min-width: 0; }
.vh2 .mm-clinics, .vh2 .mm-doctors { grid-template-columns: 1.1fr 1.1fr 1.6fr 1.3fr; }
.vh2 .mm-treatments { grid-template-columns: 2.4fr 1.1fr 1.2fr; }
.vh2 .mm-cities { grid-template-columns: repeat(4, minmax(0, 1fr)) 1.4fr; }
.vh2 .mm-h { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--vh2-violet); margin-bottom: var(--sp-5); }
.vh2 .mm-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: var(--fs-14); font-weight: 500; color: var(--vh2-navy); }
.vh2 .mm-l a, .vh2 .mm-l .hold { display: flex; justify-content: space-between; gap: var(--sp-4); }
.vh2 .mm-l a:hover { color: var(--vh2-violet); text-decoration: none; }
.vh2 .mm-l .c { font-size: var(--fs-12-5); color: var(--vh2-meta); font-variant-numeric: tabular-nums; }
/* A held row is not a link and must not look like one: no hover colour, no
   pointer. It keeps its position so the gap is visible rather than papered over. */
/* ⚠️ NO `cursor: help` (AB, 2026-09-21). The question-mark pointer is the
   conventional signal for "there is an explanation here", but on a row that is
   already greyed out it reads as a second, louder piece of chrome and it was
   the thing the eye landed on. The `title` still explains what is missing on
   hover; the cursor just stops announcing it. `default` rather than the I-beam
   a bare span would otherwise get: these sit among links, so the arrow says
   "not interactive" where an I-beam would say "select me". */
.vh2 .hold { color: var(--vh2-meta); cursor: default; }
.vh2 .mm-cta { display: inline-flex; align-items: center; gap: var(--sp-3); height: 40px; padding: 0 var(--sp-4-5); border-radius: var(--r-pill); background: var(--vh2-violet); color: var(--color-on-dark); font-size: var(--fs-13-5); font-weight: 600; }
.vh2 .mm-cta:hover { background: var(--vh2-violet-deep); color: var(--color-on-dark); }
.vh2 .mm-cta--light { background: var(--color-surface); color: var(--vh2-navy); }
.vh2 .mm-cta--light:hover { background: var(--vf2-pill-hover); color: var(--vh2-navy); }
.vh2 .mm-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); height: 40px; padding: 0 var(--sp-4-5); border-radius: var(--r-pill); border: 1.5px solid var(--vh2-violet); color: var(--vh2-violet); font-size: var(--fs-13-5); font-weight: 600; }
.vh2 .mm-ghost.is-hold { border-color: var(--vh2-line); color: var(--vh2-meta); cursor: default; }
.vh2 .mm-promo { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-7); padding: var(--sp-8); border-radius: var(--r-2xl); }
.vh2 .mm-promo--dark { background: linear-gradient(135deg, var(--vh2-grad-a), var(--vh2-grad-c)); color: var(--color-on-dark); }
.vh2 .mm-promo--dark .mm-eyebrow { color: var(--vh2-on-dark-2); }
.vh2 .mm-promo--light { background: var(--vh2-tint); border: 1px solid var(--vh2-line); }
.vh2 .mm-promo--light .mm-eyebrow { color: var(--vh2-violet); }
.vh2 .mm-eyebrow { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--sp-3); }
.vh2 .mm-headline { font-size: 17px; font-weight: 700; line-height: 1.35; }
.vh2 .mm-promo--light .mm-headline { color: var(--vh2-navy); }
.vh2 .mm-body { font-size: var(--fs-12-5); color: var(--vh2-muted); margin: var(--sp-3) 0 0; line-height: 1.5; }
.vh2 .mm-promo--dark .mm-body { color: var(--vh2-on-dark-2); }
.vh2 .mm-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--vh2-pill-bg); }
.vh2 .mm-foot p { margin: 0; font-size: var(--fs-13-5); color: var(--vh2-muted); }
.vh2 .mm-foot-b { display: flex; gap: var(--sp-4); flex: none; }
.vh2 .mm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.vh2 .mm-tiles--1 { grid-template-columns: minmax(0, 1fr); }
.vh2 .mm-tile { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--vh2-line); background: var(--vh2-tile); min-width: 0; }
.vh2 .mm-tile:hover { border-color: var(--vh2-violet); text-decoration: none; }
.vh2 .mm-tile-sq { flex: none; width: 30px; height: 30px; border-radius: var(--r-md); background: var(--vh2-pill-bg); color: var(--vh2-violet); display: flex; align-items: center; justify-content: center; font-size: var(--fs-11-5); font-weight: 700; }
.vh2 .mm-tile-av { flex: none; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--vh2-pill-bg); color: var(--vh2-violet); display: flex; align-items: center; justify-content: center; font-size: var(--fs-13); font-weight: 700; }
.vh2 .mm-tile-t { display: flex; flex-direction: column; min-width: 0; }
.vh2 .mm-tile-n { font-size: var(--fs-13-5); font-weight: 600; color: var(--vh2-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh2 .mm-tile-s { font-size: var(--fs-11-5); color: var(--vh2-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh2 .mm-tile--doc .mm-tile-s { color: var(--vh2-muted); }
.vh2 .mm-verified { margin-left: auto; flex: none; font-size: var(--fs-11); font-weight: 700; color: var(--vh2-verified); }
.vh2 .mm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.vh2 .mm-card { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-6); border-radius: var(--r-xl); border: 1px solid var(--vh2-line); background: var(--vh2-tile); min-width: 0; }
.vh2 .mm-card.is-hold { cursor: default; }
.vh2 .mm-card-n { font-size: 14.5px; font-weight: 700; color: var(--vh2-navy); }
.vh2 .mm-card-d { font-size: var(--fs-12-5); color: var(--vh2-muted); line-height: 1.45; }
.vh2 .mm-card-p { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-12); font-weight: 600; color: var(--vh2-violet); }
.vh2 .mm-stats { display: flex; gap: var(--sp-7); margin: var(--sp-4) 0 0; }
.vh2 .mm-stat { display: flex; flex-direction: column; }
.vh2 .mm-stat-v { font-size: var(--fs-h2); font-weight: 800; color: var(--vh2-navy); line-height: 1.1; }
.vh2 .mm-stat-l { font-size: var(--fs-12); color: var(--vh2-muted); }

/* --- 4. responsive --- */
.vh2 .menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--color-surface); border: 0; box-shadow: var(--vh2-burger-shadow); color: var(--vh2-navy); align-items: center; justify-content: center; cursor: pointer; }
.vh2-mob { display: none; margin: 0 var(--sp-8) var(--sp-7); background: var(--color-surface); border-radius: 20px; box-shadow: var(--vh2-mob-shadow); padding: var(--sp-4) var(--sp-5); flex-direction: column; gap: 2px; font-size: var(--fs-15); font-weight: 600; color: var(--vh2-navy); }
.vh2-mob a { padding: var(--sp-5) var(--sp-6); border-radius: var(--r-pill); }
.vh2-mob a[aria-current="page"] { background: var(--vh2-pill-bg); color: var(--vh2-violet); }
.vh2-mob .vh2-mob-cta { margin-top: var(--sp-2); background: var(--vh2-violet); color: var(--color-on-dark); text-align: center; }
.vh2-mob.is-open { display: flex; }
@media (max-width: 1100px) {
  .vh2 .n { display: none; }
  .vh2 .menu-btn { display: inline-flex; }
}
@media (max-width: 760px) {
  .vh2 .u, .vh2-search { display: none; }
  .vh2-in { padding: 0 var(--sp-8); gap: var(--sp-5); }
}