/* MySmileQuote shared stylesheet.
   Extracted from index.html's inline <style> so that (a) it is cached once by the browser and
   reused across every page instead of being re-downloaded inside each HTML document, and (b) the
   new standalone static pages can share the exact same design without duplicating 173KB of CSS
   per page. The rules are byte-for-byte the same - nothing restyled. */

    /* ===== CSS VARIABLES & RESET ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      /* ---- Modernist-influenced refresh: same shapes (pills, soft cards) the site already used,
         retuned to a warmer teal/navy/coral palette with Manrope + Nunito type (Manrope replaced
         Baloo 2 in the Phase 1 UX audit pass — Baloo 2's rounded/bubbly letterforms were reading
         as consumer/lifestyle rather than premium/medical; Manrope is the same weight of
         confidence Stripe/Linear/Notion-style products use for display type). Every rule below
         already reads from these variables, so retuning values here recolors the whole site. ---- */
      --teal: #00B0B9;
      --teal-dark: #027A82;
      --teal-light: #E3F7F7;
      --navy: #16333A;
      /* Phase 1 UX audit: the original --gold/--coral were bright, high-saturation warm tones —
         closer to retail/coupon-site accent colors (Groupon/RetailMeNot territory) than the
         premium medical/fintech feel this palette is meant to communicate. Desaturated both while
         keeping the same warm hue family, so the brand doesn't lose its warmth, it just stops
         reading as promotional. Every rule below reads from these two variables, so this one edit
         re-tones every accent/CTA that uses them site-wide. */
      --gold: #D9A441;
      --coral: #D97757;
      --coral-dark: #B85F42;
      --cream: #F7F6F1;
      --peach: #FFEAE0;
      --pale-yellow: #FFFCE3;
      --accent-yellow: #FFF04B;
      --red-link: #E53E3E;
      --text: #16333A;
      --muted: #5B7275;
      --border: #EEEEE9;
      --bg: #FDFDFB;
      --white: #ffffff;
      --blue-btn: #027A82;
      --blue-btn-hover: #01606A;
      --star: #FBBF24;
      --green: #059669;
      --green-dark: #047857;
      --green-light: #ECFDF5;
      --card-shadow: 0 2px 12px rgba(0,176,185,0.08);
      --card-shadow-hover: 0 8px 28px rgba(0,176,185,0.18);
      /* ---- Design tokens added for consistency across the whole site ---- */
      --danger: #DC2626;
      --danger-dark: #B91C1C;
      --panel-bg: #F7F6F1;
      --info-bg: #EEF2F8;
      /* Corner-roundness scale — every rounded corner on the site should use one of these five */
      --radius-xs: 4px;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-xl: 20px;
      --radius-pill: 999px;
      /* Shadow scale — every ambient card/panel shadow should use one of these three */
      --shadow-sm: 0 1px 4px rgba(22,51,58,0.06);
      --shadow-md: 0 4px 16px rgba(22,51,58,0.09);
      --shadow-lg: 0 12px 32px rgba(22,51,58,0.13);
      /* Type scale — every font-size on the site should use one of these.
         Phase 1 UX audit: the lower half of this scale (2xs-lg) was running noticeably small for
         a healthcare-purchase audience that skews older, and read as less "premium/confident"
         than the sizing Stripe/Apple/Zocdoc-style products use. Raised the floor across the whole
         scale below; --fs-2xl and up (headings) were already fine and are unchanged, since every
         rule on the site reads from these variables, this one edit re-sizes body/UI text
         site-wide without touching individual rules. */
      --fs-2xs: 11px;
      --fs-xs: 12px;
      --fs-sm: 13px;
      --fs-base: 15px;
      --fs-md: 16px;
      --fs-lg: 18px;
      --fs-xl: 19px;
      --fs-2xl: 22px;
      --fs-3xl: 28px;
      --fs-4xl: 36px;
    }
    body { font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
    /* Site-wide safety net: several fixed-pixel elements below (gauge, service chip grid, etc.)
       were wider than small phone screens and forced the whole page to scroll sideways. This
       stops that class of bug outright, on top of fixing each element's own sizing. */
    html { overflow-x:hidden; width:100%; }
    img { max-width:100%; height:auto; }

    /* ===== HEADER & NAV ===== */
    .accent-bar { height:6px; background:linear-gradient(90deg,var(--teal),var(--accent-yellow)); }
    header {
      background:var(--white); border-bottom:1px solid var(--border);
      padding:0 48px; height:68px;
      display:flex; align-items:center; justify-content:space-between;
      position:sticky; top:0; z-index:200;
      box-shadow:var(--shadow-sm);
      flex-wrap:wrap;
      gap:8px;
    }
    .logo { display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer; flex-shrink:0; }
    .logo-img { height:38px; width:auto; display:block; }
    .logo-icon { width:40px; height:40px; background:var(--teal); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; }
    .logo-icon svg { width:22px; height:22px; fill:white; }
    .logo-wordmark { display:flex; flex-direction:column; line-height:1; }
    .logo-top { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.3px; color:var(--navy); }
    .logo-top .by { color:var(--gold); }
    .logo-bar { height:3px; background:linear-gradient(90deg,var(--teal) 60%,var(--gold) 100%); border-radius:var(--radius-xs); margin-top:3px; }
    .header-left { display:flex; align-items:center; gap:16px; flex-wrap:wrap; flex:1 1 auto; }
    .header-badges { display:flex; align-items:center; gap:12px; flex-shrink:0; flex-wrap:wrap; }
    .header-badge {
      display:flex; align-items:center; gap:6px;
      background:var(--panel-bg); padding:6px 14px 6px 10px; border-radius:var(--radius-pill);
      border:1px solid var(--border); font-size:var(--fs-xs); font-weight:700;
      color:var(--navy); white-space:nowrap; transition:all .2s;
      box-shadow:var(--shadow-sm);
    }
    .header-badge img { height:22px; width:auto; max-width:60px; object-fit:contain; display:block; }
    .header-badge i { font-size:var(--fs-md); color:var(--teal); margin-right:2px; }
    .nav-right { display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex-shrink:0; }
    .nav-link { font-size:var(--fs-md); font-weight:500; color:var(--muted); text-decoration:none; transition:color .2s; white-space:nowrap; cursor:pointer; }
    .nav-link:hover { color:var(--teal); }
    /* All header links live in one dropdown menu instead of a crowded row — cleaner at every
       width, and avoids the wrap-into-multiple-rows look on tablets/phones. */
    .nav-menu-wrap { position:relative; }
    .nav-menu-trigger { display:flex; align-items:center; gap:8px; background:transparent; border:1.5px solid var(--border); color:var(--navy); padding:9px 16px; border-radius:var(--radius-pill); font-size:var(--fs-md); font-weight:600; cursor:pointer; transition:border-color .2s, color .2s; }
    .nav-menu-trigger:hover, .nav-menu-trigger.open { border-color:var(--teal); color:var(--teal-dark); }
    .nav-menu-trigger i { font-size:10px; transition:transform .2s; }
    .nav-menu-trigger.open i { transform:rotate(180deg); }
    .nav-menu-dropdown { display:none; flex-direction:column; position:absolute; top:calc(100% + 10px); right:0; background:var(--white,#fff); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 16px 40px rgba(0,0,0,0.18); padding:8px; min-width:240px; z-index:250; }
    .nav-menu-dropdown.open { display:flex; }
    .nav-menu-dropdown .nav-link { padding:10px 14px; border-radius:var(--radius-md); white-space:normal; }
    .nav-menu-dropdown .nav-link:hover { background:var(--panel-bg); color:var(--teal-dark); }
    .nav-menu-label { font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:12px 14px 4px; margin-top:4px; border-top:1px solid var(--border); }
    .nav-menu-dropdown .nav-menu-label:first-child { border-top:none; margin-top:0; padding-top:6px; }
    @media (max-width:900px){ .nav-menu-dropdown { right:auto; left:0; } }
    .nav-cta-btn { background:var(--blue-btn); color:white; border:none; border-radius:var(--radius-md); padding:9px 20px; font-size:var(--fs-md); font-weight:700; cursor:pointer; transition:background .2s, transform .15s; text-decoration:none; white-space:nowrap; }
    .nav-cta-btn:hover { background:var(--blue-btn-hover); transform:translateY(-1px); }
    .admin-toggle { background:var(--navy); color:white; border:none; border-radius:var(--radius-md); padding:8px 16px; font-size:var(--fs-base); font-weight:600; cursor:pointer; transition:background .2s; white-space:nowrap; }
    .admin-toggle:hover { background:var(--teal-dark); }

    /* ===== EXPRESS OFFERS ===== */
    #listing-page { display:block; }
    .hero { background:var(--white); border-bottom:1px solid var(--border); text-align:center; padding:44px 24px 32px; position:relative; overflow:hidden; }
    .hero-eyebrow { display:inline-flex; align-items:center; gap:6px; background:var(--teal-light); color:var(--teal-dark); font-size:var(--fs-sm); font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:5px 14px; border-radius:var(--radius-xl); margin-bottom:16px; }
    .hero h1 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(26px,3.6vw,38px); line-height:1.2; font-weight:800; color:var(--teal); letter-spacing:-.5px; margin-bottom:14px; max-width:780px; margin-left:auto; margin-right:auto; }
    .hero-in-word { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(20px,4vw,30px); font-weight:500; color:var(--muted); letter-spacing:-.2px; }
    .hero-state-select {
      appearance:none; -webkit-appearance:none; -moz-appearance:none;
      background:var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'><path d='M1 1l5.5 6 5.5-6' stroke='%230090AA' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 18px center;
      background-size:12px; border:1.5px solid var(--teal); border-radius:var(--radius-pill);
      padding:9px 42px 9px 20px; line-height:1.25;
      font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
      font-size:clamp(20px,3.2vw,26px); font-weight:800; color:var(--teal-dark); letter-spacing:-.3px;
      cursor:pointer; box-shadow:var(--shadow-sm);
      transition:background .2s,color .2s,box-shadow .2s,transform .15s;
    }
    .hero-state-select:hover {
      background-color:var(--teal-light); box-shadow:var(--shadow-md); transform:translateY(-1px);
    }
    .hero-state-select:focus { outline:none; box-shadow:0 0 0 3px var(--teal-light); }
    .hero-state-row { display:inline-flex; align-items:center; gap:10px; margin:0 auto 22px; flex-wrap:wrap; justify-content:center; background:var(--teal-light); border:1.5px solid var(--teal); border-radius:var(--radius-pill); padding:9px 20px 9px 18px; }
    .hero-state-row label { font-size:var(--fs-md); font-weight:700; color:var(--teal-dark); }
    .hero-state-row .hero-state-select { font-size:clamp(18px,2.6vw,22px); font-weight:800; padding:7px 38px 7px 16px; background-position:right 14px center; background-size:12px; }
    @media(max-width:520px){ .hero-state-row { padding:8px 16px 8px 14px; gap:8px; } .hero-state-row label { font-size:var(--fs-sm); } }
    .hero-divider { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; }
    .hero-divider .line { width:56px; height:1.5px; background:var(--border); }
    .what-link { font-size:var(--fs-md); color:var(--muted); text-decoration:none; border-bottom:1px dashed var(--muted); padding-bottom:1px; transition:color .2s; cursor:pointer; }
    .what-link:hover { color:var(--teal); border-color:var(--teal); }
    /* ===== Hero repositioning: subheadline, secondary CTA, trust bar ===== */
    .hero-subheadline { max-width:640px; margin:0 auto 20px; font-size:var(--fs-lg); color:var(--muted); line-height:1.6; }
    .hero-cta-row { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
    .hero-secondary-cta { display:inline-flex; align-items:center; gap:6px; background:transparent; color:var(--teal-dark); border:1.5px solid var(--teal); padding:11px 22px; border-radius:var(--radius-pill); font-weight:700; font-size:var(--fs-md); text-decoration:none; transition:background .2s, transform .15s; }
    .hero-secondary-cta:hover { background:var(--teal-light); transform:translateY(-1px); }
    .homepage-trust-bar { display:flex; justify-content:center; align-items:center; gap:22px; flex-wrap:wrap; margin:0 auto 22px; padding:14px 20px; max-width:780px; }
    .homepage-trust-item { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; color:var(--navy); white-space:nowrap; }
    .homepage-trust-item.stars { color:var(--star); }
    .homepage-trust-item.stars span.trust-label { color:var(--navy); margin-left:2px; }
    .homepage-trust-item svg { color:var(--green); flex-shrink:0; }
    @media(max-width:640px){ .homepage-trust-bar { gap:12px 16px; } .homepage-trust-item { font-size:12px; } }
    /* ===== Hero v2: single-column layout, scannable trio icons, benefit cards ===== */
    .hero-grid { display:grid; grid-template-columns:1fr; max-width:760px; margin:0 auto; text-align:left; position:relative; z-index:1; }
    .hero-text-col { text-align:center; min-width:0; }
    .hero-trio-icons { display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin:0 auto 22px; }
    .hero-trio-icon { display:flex; flex-direction:column; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:700; color:var(--navy); max-width:130px; }
    .hero-trio-icon .hti-badge { font-size:17px; color:var(--teal-dark); background:var(--teal-light); width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
    .hero-benefits-list { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; max-width:700px; margin:0 auto 24px; text-align:left; }
    .hero-benefit-item { display:flex; gap:10px; align-items:flex-start; background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius-md); padding:13px 15px; }
    .hero-benefit-item .hbi-check { flex-shrink:0; color:var(--white); background:var(--green); width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:1px; }
    .hero-benefit-item .hbi-check svg { display:block; }
    .hero-benefit-item strong { display:block; font-size:var(--fs-sm); color:var(--navy); margin-bottom:3px; }
    .hero-benefit-item .hbi-desc { display:block; font-size:var(--fs-xs); color:var(--muted); line-height:1.45; }
    /* ===== CRO audit Phase 1 additions: vetting specificity + an at-a-glance "how it works"
       reminder. Now rendered inside .hero-secondary-trust, below the brand trust bar, rather than
       inside the hero itself — see the Phase 1 UX audit note above .hero-eyebrow in index.html. ===== */
    .hero-vetting-line { font-size:var(--fs-xs); color:var(--muted); margin:0 auto 18px; max-width:480px; }
    .hero-how-it-works { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin:18px auto 0; padding:12px 16px; background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius-md); font-size:var(--fs-xs); font-weight:600; color:var(--navy); max-width:640px; }
    .hero-how-it-works i { color:var(--teal-dark); font-size:10px; }
    @media(max-width:900px){
      .hero-benefits-list { grid-template-columns:1fr; max-width:480px; }
    }
    @media(max-width:520px){
      .hero-trio-icons { gap:16px; }
      .hero-how-it-works { flex-direction:column; align-items:flex-start; gap:6px; }
      .hero-how-it-works i { display:none; }
      .hero-secondary-trust { padding:18px 16px 2px; }
    }
    /* ===== CRO audit Phase 2: risk-reversal microcopy at both primary commitment points (hero CTA
       and the checkout wizard's Continue/Reserve button) — visible but deliberately quieter than
       the buttons themselves. ===== */
    .hero-risk-reversal { display:flex; align-items:center; justify-content:center; gap:6px; font-size:var(--fs-sm); font-weight:700; color:var(--teal-dark); margin:-10px auto 10px; }
    .hero-risk-reversal i { color:var(--teal-dark); }
    .checkout-risk-reversal { display:flex; align-items:center; justify-content:center; gap:6px; font-size:var(--fs-sm); font-weight:700; color:var(--teal-dark); margin-top:14px; text-align:center; }
    /* ===== CRO audit 2.1: reservation-summary clarifying note ===== */
    .reserve-clarity-note { display:flex; align-items:flex-start; gap:6px; background:var(--teal-light); color:var(--navy); font-size:11.5px; line-height:1.5; padding:8px 12px; border-radius:var(--radius-sm); margin-top:10px; }
    .reserve-clarity-note i { color:var(--teal-dark); margin-top:2px; flex-shrink:0; }
    /* ===== CRO audit 2.2: persistent brand-level trust bar, directly under the hero ===== */
    .brand-trust-bar { background:var(--panel-bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:12px 24px; }
    .brand-trust-bar-inner { max-width:1000px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px; font-size:var(--fs-sm); font-weight:700; color:var(--navy); }
    .btb-rating { display:inline-flex; align-items:center; gap:6px; color:var(--navy); }
    .btb-rating i { color:var(--star); }
    .btb-divider { color:var(--border); }
    .btb-badge { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--muted); }
    .btb-badge i { color:var(--teal-dark); }
    /* ===== Phase 1 UX audit: home for the hero content relocated out of .hero (trio-icons,
       savings/vetting line, "how it works" strip) — same classes/rules as before, just given a
       centered host section instead of relying on .hero-grid's centering. ===== */
    .hero-secondary-trust { max-width:760px; margin:0 auto; padding:22px 24px 4px; text-align:center; }
    @media(max-width:520px){
      .brand-trust-bar { padding:10px 16px; }
      .brand-trust-bar-inner { gap:8px 14px; font-size:var(--fs-xs); }
      .btb-divider { display:none; }
    }
    /* ===== CRO audit 2.3: "How We Vet Every Clinic" homepage trust section ===== */
    .vet-section { background:var(--white); padding:48px 24px; text-align:center; position:relative; overflow:hidden; }
    .vet-section > *:not(.mmq-bubble-field) { position:relative; z-index:1; }
    .vet-inner { max-width:900px; margin:0 auto; }
    .vet-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--teal-dark); font-size:var(--fs-sm); font-weight:700; letter-spacing:.5px; margin-bottom:10px; }
    .vet-inner h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(20px,2.8vw,26px); font-weight:800; color:var(--navy); margin-bottom:12px; }
    .vet-intro { color:var(--muted); font-size:var(--fs-md); line-height:1.6; max-width:600px; margin:0 auto; }
    .vet-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; text-align:left; margin-top:28px; }
    .vet-item { display:flex; gap:14px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--card-shadow); }
    .vet-icon { flex-shrink:0; width:40px; height:40px; border-radius:var(--radius-pill); background:var(--teal-light); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-size:16px; }
    .vet-item h4 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:var(--fs-md); font-weight:800; color:var(--navy); margin-bottom:4px; }
    .vet-item p { color:var(--muted); font-size:var(--fs-sm); line-height:1.5; }
    @media(max-width:700px){ .vet-grid { grid-template-columns:1fr; } }
    @media(max-width:520px){ .vet-section { padding:36px 16px; } }
    /* ===== "Why not just Google it?" section (added directly under hero) ===== */
    .why-google-section { background:var(--white); padding:8px 24px 48px; text-align:center; position:relative; overflow:hidden; }
    .why-google-section > *:not(.mmq-bubble-field) { position:relative; z-index:1; }
    .why-google-inner { max-width:680px; margin:0 auto; }
    .why-google-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--coral-dark); font-size:var(--fs-sm); font-weight:700; letter-spacing:.5px; margin-bottom:10px; }
    .why-google-inner h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(20px,2.8vw,26px); font-weight:800; color:var(--navy); margin-bottom:12px; }
    .why-google-inner p { color:var(--muted); font-size:var(--fs-md); line-height:1.65; }
    @media(max-width:520px){ .why-google-section { padding:4px 16px 36px; } }
    /* ===== "How It Works" section (added directly under hero) ===== */
    .how-it-works-section { max-width:1100px; margin:0 auto; padding:48px 24px 40px; text-align:center; }
    .how-it-works-section h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(24px,3.5vw,32px); font-weight:800; color:var(--navy); margin-bottom:10px; }
    .how-it-works-subtitle { color:var(--muted); font-size:var(--fs-lg); margin-bottom:36px; max-width:600px; margin-left:auto; margin-right:auto; }
    .how-it-works-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
    .how-step { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); padding:28px 20px; text-align:center; box-shadow:var(--card-shadow); position:relative; }
    .how-step-icon { width:56px; height:56px; border-radius:50%; background:var(--teal-light); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:22px; }
    .how-step-num { font-size:var(--fs-xs); font-weight:800; color:var(--teal); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
    .how-step h3 { font-size:var(--fs-lg); font-weight:700; color:var(--navy); margin-bottom:8px; }
    .how-step p { font-size:var(--fs-base); color:var(--muted); line-height:1.5; }
    @media(max-width:900px){ .how-it-works-grid { grid-template-columns:repeat(2,1fr); gap:16px; } }
    @media(max-width:520px){ .how-it-works-grid { grid-template-columns:1fr; } .how-it-works-section { padding:36px 16px 28px; } }
    /* ===== "Why Compare Quotes?" section ===== */
    .why-compare-section { background:var(--bg); padding:48px 24px; }
    .why-compare-inner { max-width:1000px; margin:0 auto; }
    .why-compare-inner h2 { text-align:center; font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(24px,3.5vw,32px); font-weight:800; color:var(--navy); margin-bottom:14px; }
    .why-compare-intro { text-align:center; max-width:680px; margin:0 auto 32px; color:var(--muted); font-size:var(--fs-lg); line-height:1.6; }
    .why-compare-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px; }
    .why-compare-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; text-align:center; }
    .why-compare-card i { font-size:24px; color:var(--teal); margin-bottom:10px; display:block; }
    .why-compare-card h3 { font-size:var(--fs-base); font-weight:700; color:var(--navy); margin-bottom:6px; }
    .inline-link { color:var(--teal-dark); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
    .inline-link:hover { color:var(--teal); }
    .why-compare-card p { font-size:var(--fs-sm); color:var(--muted); line-height:1.5; }
    .why-compare-savings { background:var(--green-light); border:1px solid #6EE7B7; border-radius:var(--radius-lg); padding:18px 24px; text-align:center; font-size:var(--fs-md); font-weight:600; color:var(--green); }
    /* ===== "Compare More Than Just Price" ===== */
    .compare-more-section { margin-top:44px; padding-top:40px; border-top:1px solid var(--border); }
    .compare-more-section h3 { text-align:center; font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(22px,3.2vw,28px); font-weight:800; color:var(--navy); margin-bottom:14px; }
    .compare-more-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 20px; }
    .compare-more-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 12px; text-align:center; transition:border-color .2s, transform .15s; }
    .compare-more-card:hover { border-color:var(--teal); transform:translateY(-2px); }
    .compare-more-card i { font-size:20px; color:var(--teal-dark); margin-bottom:8px; display:block; }
    .compare-more-card span { font-size:var(--fs-sm); font-weight:700; color:var(--navy); }
    .compare-more-closer { text-align:center; max-width:640px; margin:0 auto; color:var(--muted); font-size:var(--fs-md); line-height:1.6; font-style:italic; }
    @media(max-width:900px){ .why-compare-grid { grid-template-columns:repeat(2,1fr); } .compare-more-grid { grid-template-columns:repeat(3,1fr); } }
    @media(max-width:640px){ .compare-more-grid { grid-template-columns:repeat(2,1fr); } }
    @media(max-width:520px){ .why-compare-grid { grid-template-columns:1fr; } .why-compare-section { padding:36px 16px; } }
    /* ===== CRO audit 3.3: recent-activity ticker — real submitted-lead data only ===== */
    .activity-ticker { display:flex; align-items:center; gap:8px; max-width:900px; margin:0 auto; padding:8px 24px 0; font-size:var(--fs-sm); font-weight:600; color:var(--navy); }
    .activity-ticker-dot { width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; animation:activityPulse 1.8s ease-in-out infinite; }
    @keyframes activityPulse { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
    @media(max-width:520px){ .activity-ticker { padding:6px 16px 0; font-size:var(--fs-xs); } }
    .filter-toolbar { max-width:900px; margin:0 auto; padding:20px 24px 8px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
    .filter-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .sort-select { padding:8px 14px; border:1.5px solid var(--border); border-radius:var(--radius-md); font-size:var(--fs-base); font-weight:500; color:var(--text); background:var(--white); cursor:pointer; outline:none; font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; min-width:110px; transition:border-color .2s; }
    .sort-select:hover { border-color:var(--teal); }
    .price-tag { padding:7px 14px; border:1.5px solid var(--border); border-radius:var(--radius-xl); font-size:var(--fs-base); font-weight:500; color:var(--text); background:var(--white); cursor:pointer; transition:all .2s; white-space:nowrap; }
    .price-tag:hover { border-color:var(--teal); color:var(--teal); background:var(--teal-light); }
    .doctor-faq { font-size:var(--fs-base); font-weight:600; color:var(--red-link); text-decoration:none; white-space:nowrap; display:flex; align-items:center; gap:4px; cursor:pointer; }
    .doctor-faq:hover { text-decoration:underline; }
    .cards-wrapper { max-width:900px; margin:0 auto; padding:12px 24px 60px; display:flex; flex-direction:column; gap:16px; }
    .card {
      background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
      padding:24px 28px; display:grid; grid-template-columns:220px 1fr auto;
      gap:24px; align-items:center; box-shadow:var(--card-shadow);
      transition:box-shadow .25s,transform .2s; position:relative; overflow:hidden;
    }
    .card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--teal); border-radius:var(--radius-lg) 0 0 14px; }
    .card:hover { box-shadow:var(--card-shadow-hover); transform:translateY(-2px); }
    .clinic-blur { height:20px; width:200px; background:#D1D5DB; border-radius:var(--radius-sm); filter:blur(7px); margin:0 auto 12px; }
    .service-badge { display:inline-block; background:var(--teal-light); color:var(--teal-dark); font-size:20px; font-weight:700; letter-spacing:.5px; padding:6px 16px; border-radius:var(--radius-xl); margin-bottom:8px; }
    .provider-text { display:block; font-size:10.5px; font-weight:600; color:var(--navy); margin-top:-2px; margin-bottom:14px; letter-spacing:0.2px; background:var(--bg); padding:4px 12px; border-radius:var(--radius-pill); border:1px solid var(--border); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
    .price-block { display:flex; align-items:baseline; gap:8px; margin-bottom:14px; }
    .price-now { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:30px; font-weight:800; color:var(--navy); letter-spacing:-.5px; }
    .price-was { font-size:15px; color:#7C8895; text-decoration:line-through; }
    .countdown-grid { display:flex; gap:6px; }
    .cd-unit { display:flex; flex-direction:column; align-items:center; gap:4px; }
    .cd-digit { background:var(--navy); color:white; font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:var(--fs-lg); font-weight:700; border-radius:var(--radius-sm); width:38px; height:34px; display:flex; align-items:center; justify-content:center; letter-spacing:1px; }
    .cd-label { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
    /* CRO audit 1.7: why the coupon/timer is capped — kept as unobtrusive small print so it never
       visually competes with the countdown digits or the coupons-left count above it. */
    .scarcity-note { display:flex; align-items:flex-start; gap:4px; font-size:10px; line-height:1.4; color:var(--muted); margin-top:8px; max-width:200px; }
    .scarcity-note i { margin-top:2px; font-size:9px; flex-shrink:0; }
    .card-center { text-align:center; }
    .in-prefix { font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:2px; }
    .city-name { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:22px; font-weight:800; color:var(--navy); margin-bottom:10px; }
    .rating-row { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:6px; }
    .g-logo { width:18px; height:18px; flex-shrink:0; }
    .stars-text { font-size:var(--fs-base); color:var(--star); letter-spacing:1px; }
    .rating-val { font-size:var(--fs-base); font-weight:700; color:var(--text); }
    .review-count { font-size:var(--fs-sm); color:var(--muted); margin-bottom:10px; }
    /* ===== GOOGLE REVIEW BADGE — a single, clearly-labeled pill (Google "G" mark + stars + rating
       + review count) so it reads unambiguously as "these are real reviews from Google", not a
       generic unexplained star row. Used on state cards, country clinic cards, and checkout. ===== */
    .google-review-badge { display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:6px 12px; margin:0 0 10px; box-shadow:var(--shadow-sm); }
    .google-review-badge .g-logo { width:20px; height:20px; }
    .grb-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
    .grb-top { display:flex; align-items:center; gap:5px; }
    .grb-top .stars-text { font-size:var(--fs-base); color:var(--star); letter-spacing:1px; }
    .grb-top .rating-val { font-size:var(--fs-base); font-weight:800; color:var(--navy); }
    .grb-sub { font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.2px; }
    .grb-sub strong { color:var(--text); font-weight:800; }
    .grb-new { font-size:var(--fs-sm); font-weight:600; color:var(--muted); }
    @media(max-width:520px){ .google-review-badge { padding:5px 10px; gap:6px; } .google-review-badge .g-logo { width:17px; height:17px; } .grb-sub { font-size:10px; } }
    .views-pill { display:inline-flex; align-items:center; gap:5px; background:#FFF7ED; border:1px solid #FDDCAA; border-radius:var(--radius-xl); padding:4px 12px; font-size:var(--fs-sm); font-weight:500; color:#92400E; margin-bottom:8px; }
    .coupons-left { font-size:var(--fs-base); font-weight:700; color:var(--red-link); display:flex; align-items:center; justify-content:center; gap:4px; }
    .card-cta { text-align:center; min-width:155px; }
    .cta-implant-img { text-align:left; margin-bottom:8px; }
    .cta-implant-img img { width:100%; max-width:288px; aspect-ratio:3/1; height:auto; object-fit:contain; background:var(--white); display:inline-block; border-radius:var(--radius-md); cursor:pointer; transition:opacity .15s; }
    .cta-implant-img img:hover { opacity:0.85; }
    /* display:block + text-decoration:none added so this can be a real <a href="/quote/..."> (crawlable
       by Google/Bing) instead of a <button> with no href, while still looking identical. */
    .reserve-btn { display:block; width:100%; background:var(--blue-btn); color:white; border:none; border-radius:var(--radius-md); padding:14px 0; font-size:var(--fs-md); font-weight:800; letter-spacing:1.5px; text-align:center; text-decoration:none; cursor:pointer; transition:background .2s,transform .15s; margin-bottom:12px; font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .reserve-btn:hover { background:var(--blue-btn-hover); transform:scale(1.03); }
    .reserve-btn:disabled, .reserve-btn[aria-disabled="true"] { opacity:0.5; cursor:not-allowed; transform:none; pointer-events:none; }
    .reserve-btn:disabled:hover, .reserve-btn[aria-disabled="true"]:hover { background:var(--blue-btn); transform:none; }
    /* Phase 1 UX audit: real-time feedback while a lifecycle-managed card's reservation request is
       in flight (see the reserve-state click handler) — a spinner + label swap instead of a button
       that silently does nothing for however long the network call takes. */
    .reserve-btn.reserve-btn-loading { display:inline-flex; align-items:center; justify-content:center; gap:8px; opacity:0.85; cursor:wait; }
    .reserve-btn-spinner { width:14px; height:14px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; display:inline-block; animation:reserveBtnSpin .7s linear infinite; flex-shrink:0; }
    @keyframes reserveBtnSpin { to { transform:rotate(360deg); } }
    .coupon-note { font-size:var(--fs-sm); line-height:1.6; color:var(--muted); margin-bottom:10px; }
    .coupon-note strong { color:var(--text); font-weight:700; }
    .reserved-badge { display:inline-flex; align-items:center; gap:5px; background:#F0FDF4; border:1px solid #86EFAC; border-radius:var(--radius-xl); padding:5px 12px; font-size:var(--fs-sm); font-weight:600; color:#166534; }

    /* ===== OFFER LIFECYCLE — "Offer Closed" card face (real, admin-driven; see index.html's
       renderStateCards() and cloudflare-worker-site-config.js). Reuses the same card-left/
       card-center/card-cta grid as a normal card, just with different content. ===== */
    .offer-closed-badge { display:inline-flex; align-items:center; gap:6px; background:#FFF7ED; border:1px solid #FDBA74; color:#9A3412; font-weight:700; font-size:var(--fs-sm); border-radius:var(--radius-xl); padding:6px 12px; margin:6px 0; }
    .offer-closed-note { font-size:var(--fs-sm); color:var(--muted); line-height:1.5; margin-top:6px; max-width:220px; }
    .offer-closed-notify-btn { background:var(--navy); }
    .offer-closed-notify-btn:hover { background:var(--navy); opacity:0.9; }

    /* ===== IMAGE LIGHTBOX ===== */
    .lightbox-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); backdrop-filter:blur(2px); align-items:center; justify-content:center; z-index:9999; padding:clamp(10px,4vw,20px); box-sizing:border-box; }
    .lightbox-overlay.active { display:flex; }
    .lightbox-content { max-width:700px; width:100%; max-height:92vh; overflow-y:auto; background:white; border-radius:var(--radius-xl); padding:clamp(14px,4vw,24px) clamp(14px,4vw,24px) clamp(18px,4vw,30px); box-shadow:0 20px 60px rgba(0,0,0,0.5); position:relative; animation:lightboxIn 0.2s ease; box-sizing:border-box; }
    @keyframes lightboxIn { 0% { transform:scale(0.94); opacity:0.6; } 100% { transform:scale(1); opacity:1; } }
    .lightbox-content img { width:100%; height:auto; max-height:60vh; object-fit:contain; border-radius:var(--radius-lg); display:block; background:#f0f2f5; }
    .lightbox-close { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.6); color:white; border:none; border-radius:50%; width:clamp(30px,7vw,34px); height:clamp(30px,7vw,34px); font-size:var(--fs-lg); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; z-index:1; }
    .lightbox-close:hover { background:var(--danger); }
    .lightbox-caption { margin-top:14px; font-weight:600; color:var(--navy); font-size:clamp(var(--fs-md),4vw,var(--fs-lg)); text-align:center; word-break:break-word; }
    .lightbox-sub { font-size:var(--fs-sm); color:var(--muted); text-align:center; margin-top:4px; }
    .lightbox-details { display:flex; justify-content:center; gap:clamp(8px,3vw,20px); margin-top:12px; font-size:var(--fs-sm); font-weight:500; color:var(--text); flex-wrap:wrap; }
    .lightbox-details span { background:var(--bg); padding:4px 12px; border-radius:var(--radius-pill); white-space:nowrap; }

    /* ===== FAQ POPOVER ===== */
    .faq-popover { display:none; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:24px 28px; max-width:520px; margin:16px auto 0; text-align:left; position:relative; }
    .faq-popover.visible { display:block; animation:fadeSlide 0.25s ease; }
    @keyframes fadeSlide { 0% { opacity:0; transform:translateY(-6px); } 100% { opacity:1; transform:translateY(0); } }
    .faq-popover strong { display:block; font-size:var(--fs-lg); color:var(--navy); margin-bottom:6px; }
    .faq-popover p { font-size:var(--fs-md); color:var(--text); line-height:1.6; margin-bottom:0; }
    .faq-close { position:absolute; top:8px; right:12px; background:none; border:none; font-size:20px; color:var(--muted); cursor:pointer; padding:4px 8px; transition:color .2s; }
    .faq-close:hover { color:var(--red-link); }

    /* Footer */
    footer { background:var(--navy); color:#9CA3AF; text-align:center; padding:24px; font-size:var(--fs-base); }
    footer a { color:var(--teal); text-decoration:none; }
    .footer-badges { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
    .footer-badge { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.08); padding:6px 14px 6px 10px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,0.1); font-size:var(--fs-xs); font-weight:600; color:#C9D6D3; white-space:nowrap; }
    .footer-badge img { height:20px; width:auto; max-width:55px; object-fit:contain; display:block; filter:brightness(0.9); }
    .footer-badge i { font-size:var(--fs-md); color:var(--teal); margin-right:2px; }

    /* ===== CHECKOUT PAGE ===== */
    #checkout-page { display:none; }
    .checkout-header-bar { background:var(--white); border-bottom:1px solid var(--border); padding:14px 48px; display:flex; align-items:center; justify-content:space-between; }
    /* Softer than the default .back-btn (which uses bold brand teal elsewhere) so it reads as a
       quiet exit link rather than competing with the form for attention. */
    .checkout-header-bar .back-btn { color:var(--muted); font-weight:500; font-size:var(--fs-sm); }
    .checkout-header-bar .back-btn:hover { color:var(--teal-dark); }
    .checkout-secure { display:flex; align-items:center; gap:8px; font-size:var(--fs-md); font-weight:600; color:var(--navy); }
    .checkout-secure svg { color:var(--green); }
    .back-btn { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-base); font-weight:600; color:var(--teal); background:none; border:none; cursor:pointer; padding:0; transition:color .2s; text-decoration:none; }
    .back-btn:hover { color:var(--teal-dark); }
    .checkout-body { max-width:1080px; margin:0 auto; padding:40px 24px 60px; display:grid; grid-template-columns:400px 1fr; gap:32px; align-items:start; }
    .form-panel { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); padding:36px 40px; box-shadow:var(--shadow-md); }
    .form-panel h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:24px; font-weight:800; color:var(--navy); margin-bottom:6px; }
    .form-subtitle { font-size:var(--fs-md); color:var(--muted); margin-bottom:28px; line-height:1.5; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
    .form-group label { font-size:var(--fs-base); font-weight:600; color:var(--navy); }
    .form-group label span.req { color:var(--red-link); margin-left:2px; }
    .form-group input, .form-group textarea, .form-group select {
      border:1.5px solid var(--border); border-radius:var(--radius-md);
      padding:11px 14px; font-size:var(--fs-md); font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
      color:var(--text); background:var(--white);
      outline:none; transition:border-color .2s, box-shadow .2s;
      resize:none;
    }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
      border-color:var(--teal);
      box-shadow:0 0 0 3px rgba(0,181,216,0.12);
    }
    .form-group input::placeholder, .form-group textarea::placeholder { color:#C4CBD8; }
    .form-group textarea { min-height:80px; }
    .form-group input.invalid, .form-group select.invalid, .form-group textarea.invalid { border-color:var(--red-link); box-shadow:0 0 0 3px rgba(229,62,62,0.1); }
    .field-error { display:block; min-height:16px; font-size:var(--fs-sm); font-weight:600; color:var(--red-link); }
    .consent-box.invalid { border-color:var(--red-link); background:#FFF5F5; }
    .form-status { display:none; font-size:var(--fs-base); font-weight:600; border-radius:var(--radius-md); padding:12px 14px; margin-bottom:16px; }
    .form-status.visible { display:block; }
    .form-status.error { background:#FFF5F5; color:var(--red-link); border:1px solid #FEB2B2; }
    .consent-box { display:flex; align-items:flex-start; gap:12px; background:#F8FAFD; border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:24px; margin-top:4px; }
    .consent-box input[type=checkbox] { width:16px; height:16px; margin-top:2px; accent-color:var(--teal); cursor:pointer; flex-shrink:0; }
    .consent-box p { font-size:var(--fs-sm); color:var(--muted); line-height:1.6; }
    .consent-box strong { color:var(--text); font-weight:600; }
    .submit-btn { width:100%; background:var(--blue-btn); color:white; border:none; border-radius:var(--radius-lg); padding:17px 0; font-size:var(--fs-lg); font-weight:800; letter-spacing:1px; cursor:pointer; font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; transition:background .2s, transform .15s, box-shadow .2s; box-shadow:0 4px 14px rgba(29,111,164,0.3); }
    .submit-btn:hover { background:var(--blue-btn-hover); transform:translateY(-1px); box-shadow:0 6px 20px rgba(29,111,164,0.4); }
    .submit-btn:active { transform:scale(0.99); }
    .submit-btn:disabled { opacity:0.65; cursor:not-allowed; transform:none; box-shadow:none; }
    .trust-strip { display:flex; justify-content:center; gap:20px; margin-top:16px; flex-wrap:wrap; }
    .trust-item { display:flex; align-items:center; gap:5px; font-size:var(--fs-xs); color:var(--muted); font-weight:500; }
    .trust-item svg { color:var(--green); }

    /* ===== SCHEDULING WIDGET ===== */
    .scheduling-widget { border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 20px 18px; margin:10px 0 20px; background:#F9FBFD; }
    .scheduling-widget .sw-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:var(--fs-md); font-weight:700; color:var(--navy); }
    .sw-header .sw-badge { background:var(--teal-light); color:var(--teal-dark); padding:4px 12px; border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:700; }
    .sw-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:12px; text-align:center; font-size:var(--fs-sm); font-weight:600; color:var(--muted); }
    .sw-weekdays .sw-day { padding:6px 0; border-radius:var(--radius-sm); cursor:pointer; transition:0.15s; background:transparent; border:1px solid transparent; font-weight:500; color:var(--text); }
    .sw-weekdays .sw-day:hover { background:var(--teal-light); }
    .sw-weekdays .sw-day.active { background:var(--teal); color:white; border-color:var(--teal); font-weight:700; }
    .sw-weekdays .sw-day.other-month { color:#C4CBD8; }
    .sw-weekdays .sw-day.today-outline { border:1.5px solid var(--teal); color:var(--teal-dark); font-weight:700; }
    .sw-weekdays .sw-day.past-day { opacity:0.35; cursor:not-allowed; pointer-events:none; }
    .sw-weekdays .sw-day.day-off { background:#FEF2F2; color:var(--red-link); opacity:0.75; cursor:not-allowed; pointer-events:none; text-decoration:line-through; border:1px solid #FECACA; }
    .sw-nav-btn { background:white; border:1.5px solid var(--border); color:var(--navy); width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:0.15s; flex-shrink:0; }
    .sw-nav-btn:hover:not(:disabled) { border-color:var(--teal); color:var(--teal); background:var(--teal-light); }
    .sw-nav-btn:disabled { opacity:0.3; cursor:not-allowed; }
    .sw-times { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; margin-bottom:10px; }
    .sw-time-slot { padding:6px 14px; border-radius:var(--radius-pill); border:1.5px solid var(--border); background:white; font-size:var(--fs-sm); font-weight:600; cursor:pointer; transition:0.15s; color:var(--text); font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .sw-time-slot:hover { border-color:var(--teal); background:var(--teal-light); }
    .sw-time-slot.selected { border-color:var(--teal); background:var(--teal); color:white; box-shadow:0 2px 8px rgba(0,181,216,0.25); }
    .sw-time-slot.disabled { opacity:0.4; pointer-events:none; }
    .sw-footnote { font-size:var(--fs-xs); color:var(--muted); display:flex; align-items:center; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
    .sw-footnote i { color:var(--green); }

    .summary-panel { display:flex; flex-direction:column; gap:16px; position:sticky; top:100px; }
    .summary-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); padding:28px; box-shadow:var(--shadow-md); }
    .summary-card h3 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:17px; font-weight:800; color:var(--navy); margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
    .clinic-name-blur-sm { height:12px; background:#D1D5DB; border-radius:var(--radius-xs); filter:blur(3px); width:180px; margin-bottom:12px; }
    /* Treatment hero — the checkout summary's headline. Previously this reused the ".service-tag"
       class name, which collided with an unrelated rule for the Fair Price Estimator's clickable
       chips (further down the stylesheet) and silently overrode the badge's intended color, size
       and shape. Renamed to ".treatment-name" so it's independent, and rebuilt as a proper
       marketing-style hero: an eyebrow label over a large, bold treatment name. */
    .treatment-hero { background:linear-gradient(135deg,var(--teal-light) 0%,#E8FBF5 100%); border:1.5px solid #BFEFF7; border-radius:var(--radius-lg); padding:20px 22px 22px; margin-bottom:18px; }
    .treatment-eyebrow { display:block; font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--teal-dark); margin-bottom:6px; }
    .treatment-name { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(24px,6vw,40px); line-height:1.05; font-weight:800; color:var(--navy); letter-spacing:-1px; margin:0; word-break:break-word; }
    .clinic-meta { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; background:var(--teal-light); border-radius:var(--radius-md); padding:9px 14px; }
    .clinic-meta svg { color:var(--teal-dark); flex-shrink:0; width:18px; height:18px; }
    .clinic-location { font-size:var(--fs-xl); font-weight:800; color:var(--navy); letter-spacing:-.2px; }
    .clinic-rating { display:flex; align-items:center; gap:6px; margin-bottom:20px; }
    .clinic-rating .stars-text { font-size:var(--fs-sm); }
    .clinic-rating .rating-val { font-size:var(--fs-base); font-weight:700; }
    .clinic-rating .review-count { font-size:var(--fs-sm); color:var(--muted); margin:0; }
    /* ===== PRICE BREAKDOWN (checkout summary) — replaces the old 3-line table + separate savings
       banner, which put four numbers at near-equal weight and read as cramped. Now there is one
       clear visual hierarchy: anchor price (small, struck through) → your price (large) →
       savings (green conclusion). ===== */
    .price-breakdown { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin:14px 0 6px; background:var(--white); }
    .pb-row { display:flex; justify-content:space-between; align-items:center; padding:11px 16px; font-size:var(--fs-md); }
    .pb-row-muted { background:var(--panel-bg); border-bottom:1px solid var(--border); }
    .pb-label { color:var(--muted); font-weight:600; }
    .pb-val.strikethrough { text-decoration:line-through; color:var(--muted); font-weight:700; }
    .pb-hero { padding:16px; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
    .pb-hero-label { font-size:var(--fs-sm); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
    .pb-hero-val { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(34px,7vw,44px); font-weight:800; color:var(--teal-dark); line-height:1.05; letter-spacing:-1px; }
    .pb-hero-badge { display:inline-block; background:var(--coral); color:#fff; font-size:var(--fs-sm); font-weight:800; padding:3px 12px; border-radius:var(--radius-pill); margin-top:4px; }
    .pb-savings { display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,#ECFDF5 0%,#D1FAE5 100%); border-top:1.5px solid #6EE7B7; padding:12px 16px; text-align:center; }
    .pb-savings i { color:var(--green); font-size:16px; flex-shrink:0; }
    .pb-savings-text { font-size:var(--fs-md); font-weight:600; color:var(--green-dark); line-height:1.4; }
    .pb-savings-text strong { font-size:var(--fs-xl); font-weight:800; color:var(--green); }
    .coupon-total { background:linear-gradient(135deg,var(--green-light) 0%,#D1FAE5 100%); border:1.5px solid #6EE7B7; border-radius:var(--radius-lg); padding:14px 20px; margin-top:4px; display:flex; flex-direction:column; gap:3px; }
    .coupon-total .ct-main { display:flex; justify-content:space-between; align-items:center; gap:10px; }
    .coupon-total .ct-label { font-size:15px; font-weight:700; color:var(--green); }
    .coupon-total .ct-sub { font-size:12px; font-weight:600; color:var(--green-dark); opacity:.9; line-height:1.4; }
    /* Deposit mode (Due Today > $1) — recoloured from "free/green" to a deliberate teal so it reads
       as a real payment step rather than a giveaway. */
    .coupon-total.is-deposit { background:linear-gradient(135deg,var(--teal-light) 0%,#CFF3F4 100%); border-color:var(--teal); }
    .coupon-total.is-deposit .ct-label { color:var(--teal-dark); }
    .coupon-total.is-deposit .ct-val { color:var(--teal-dark); }
    .coupon-total.is-deposit .ct-sub { color:var(--teal-dark); }

    /* ===== WHAT HAPPENS NEXT (checkout step 3, sets expectations right before the ask) ===== */
    .whats-next-box { background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; margin:4px 0 16px; }
    .whats-next-title { font-size:13.5px; font-weight:800; color:var(--navy); margin-bottom:10px; }
    .whats-next-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
    .whats-next-list li { display:flex; align-items:center; gap:10px; font-size:var(--fs-sm); color:var(--text); font-weight:500; line-height:1.4; }
    .whats-next-num { flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--teal); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
    .whats-next-footnote { margin-top:10px; font-size:11px; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:.4px; }
    .coupon-total .ct-val { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:var(--fs-3xl); font-weight:800; color:var(--green); }

    /* ===== INCLUSIONS CARD ===== */
    .inclusions-card { background:var(--white); border:1px solid var(--border); border-left:4px solid var(--green); border-radius:var(--radius-xl); padding:24px 28px; box-shadow:var(--shadow-md); }
    .inclusions-card h4 { font-size:16.5px; font-weight:800; color:var(--navy); margin-bottom:16px; display:flex; align-items:center; gap:6px; }
    /* ===== TREATMENT JOURNEY (redesigned "What's Included" — numbered timeline + specs +
       not-included callout + CTA, fully admin-editable per card via journeyEyebrow/
       journeySubtitle/journeySteps/journeySpecs/journeyCta, mirroring the inclusions
       override pattern). ===== */
    .journey-included-image-wrap { border-radius:var(--radius-lg); overflow:hidden; margin-bottom:18px; aspect-ratio:16/9; }
    .journey-included-image-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
    .journey-header { text-align:center; margin-bottom:18px; }
    .journey-card h4 { justify-content:center; font-size:20px; margin-bottom:6px; }
    .journey-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--green-dark); background:var(--green-light); border:1px solid #A7F3D0; padding:4px 12px; border-radius:var(--radius-pill); margin-bottom:10px; }
    .journey-eyebrow i { font-size:6px; }
    .journey-subtitle { font-size:var(--fs-base); color:var(--muted); margin:0; }
    .journey-timeline { position:relative; margin:16px 0; }
    .journey-timeline::before { content:''; position:absolute; left:15px; top:15px; bottom:15px; width:2px; background:var(--green); opacity:.35; z-index:0; }
    .journey-step { display:flex; gap:14px; position:relative; z-index:1; margin-bottom:12px; }
    .journey-step:last-child { margin-bottom:0; }
    .journey-step-num { width:30px; height:30px; border-radius:50%; background:var(--green); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 0 4px var(--white); }
    .journey-step-body { flex:1; min-width:0; background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:12px 14px; }
    .journey-step.is-final .journey-step-body { background:var(--green-light); border-color:var(--green); }
    .journey-step-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
    .journey-step-title { font-size:var(--fs-md); font-weight:800; color:var(--navy); display:flex; align-items:center; gap:6px; min-width:0; }
    .journey-step.is-final .journey-step-title { color:var(--green-dark); }
    .journey-step-badge { flex-shrink:0; background:#fff; color:var(--green-dark); font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:var(--radius-pill); white-space:nowrap; border:1px solid #A7F3D0; }
    .journey-step-desc { font-size:var(--fs-sm); color:var(--muted); line-height:1.5; }
    .journey-specs { margin-top:18px; }
    .journey-specs-label { font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
    .journey-specs-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .journey-spec-box { border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 12px; }
    .journey-spec-label { font-size:10.5px; color:var(--muted); margin-bottom:2px; }
    .journey-spec-value { font-size:var(--fs-md); font-weight:800; color:var(--navy); }
    .journey-notincluded { background:#FFF7ED; border:1px solid #FED7AA; border-radius:var(--radius-lg); padding:14px 16px; margin-top:18px; }
    .journey-notincluded-title { display:flex; align-items:center; gap:6px; font-size:var(--fs-base); font-weight:800; color:#92400E; margin-bottom:6px; }
    .journey-notincluded .exclusion-note { background:transparent; border:none; padding:0; margin:0; font-size:var(--fs-sm); color:#92400E; line-height:1.55; }
    .journey-cta-btn { display:block; width:100%; margin-top:18px; background:var(--blue-btn); color:#fff; border:none; border-radius:var(--radius-lg); padding:14px 0; font-size:var(--fs-md); font-weight:800; cursor:pointer; transition:background .2s; font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .journey-cta-btn:hover { background:var(--blue-btn-hover); }
    .journey-footnote { text-align:center; font-size:var(--fs-xs); color:var(--muted); margin-top:10px; }
    .journey-footnote i { color:var(--teal); margin-right:4px; }

    /* ===== TREATMENT EXPLAINER — short plain-language line under the treatment name ===== */
    .treatment-explainer { font-size:12.5px; color:var(--muted); line-height:1.5; margin:2px 0 0; font-weight:500; }

    /* ===== CLINIC RATING — restyled to a two-line "stars, then sentence" layout ===== */
    .clinic-rating-text { display:flex; flex-direction:column; gap:2px; }
    .clinic-rating .stars-text { font-size:15px; color:var(--star); letter-spacing:1px; }
    .rating-reviews-line { font-size:var(--fs-sm); font-weight:600; color:var(--text); }

    .savings-highlight-footnote { text-align:center; font-size:11px; color:var(--muted); font-style:italic; margin:6px 0 10px; line-height:1.45; }

    /* ===== MONTHLY PAYMENT ANCHOR — reframes a large lump sum as an affordable monthly figure,
       computed by the site's existing financing engine (no new rates invented). ===== */
    .pb-monthly { display:block; margin-top:8px; background:transparent; border:none; cursor:pointer; font:inherit; text-align:center; width:100%; padding:0; }
    .pb-monthly-inner { display:inline-flex; align-items:center; gap:7px; background:var(--panel-bg); border:1.5px dashed var(--border); border-radius:var(--radius-pill); padding:7px 15px; transition:border-color .2s, background .2s; }
    .pb-monthly:hover .pb-monthly-inner { border-color:var(--teal); background:var(--teal-light); }
    .pb-monthly-text { font-size:var(--fs-md); font-weight:700; color:var(--navy); }
    .pb-monthly-text b { color:var(--teal-dark); font-size:var(--fs-lg); }
    .pb-monthly-terms { font-size:10px; font-weight:700; color:var(--muted); border-left:1px solid var(--border); padding-left:7px; white-space:nowrap; }
    .pb-monthly-link { font-size:var(--fs-xs); font-weight:700; color:var(--teal-dark); text-decoration:underline; }

    /* ===== FAIR PRICE CHECK (checkout) — compact read-out of the Fair Price Estimator verdict for
       this clinic's actual price, sitting right under the price it judges. ===== */
    .co-fpc { border:1px solid var(--border); border-left:4px solid var(--gold); border-radius:var(--radius-lg); padding:13px 15px; margin:12px 0; background:var(--white); }
    .co-fpc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
    .co-fpc-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
    .co-fpc-eyebrow i { color:var(--gold); }
    .co-fpc-verdict { font-size:var(--fs-md); font-weight:800; }
    .co-fpc-meter { position:relative; height:9px; border-radius:var(--radius-pill); background:linear-gradient(90deg,#EF4444 0%,#F59E0B 38%,#FCD34D 58%,#10B981 100%); overflow:visible; }
    .co-fpc-meter-marker { position:absolute; top:-4px; width:4px; height:17px; background:var(--navy); border-radius:2px; box-shadow:0 0 0 2px #fff; transition:left .8s cubic-bezier(.34,1.2,.64,1); left:50%; }
    .co-fpc-meter-fill { display:none; }
    .co-fpc-scale { display:flex; justify-content:space-between; font-size:9px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); margin-top:6px; }
    .co-fpc-text { font-size:var(--fs-sm); color:var(--text); line-height:1.5; margin:9px 0 0; }
    .co-fpc-link { background:none; border:none; padding:6px 0 0; font-size:var(--fs-xs); font-weight:700; color:var(--teal-dark); text-decoration:underline; cursor:pointer; }

    /* ===== CHECKOUT URGENCY — the offer cards already show a countdown and a coupons-left count;
       dropping both at the exact moment of commitment was backwards, so they now follow through. ===== */
    .co-urgency { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; background:#FFF7ED; border:1.5px solid #FED7AA; border-radius:var(--radius-lg); padding:11px 14px; margin:12px 0 4px; }
    .co-urgency-left { display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:700; color:#92400E; }
    .co-urgency-left i { color:#EA580C; }
    .co-countdown { display:flex; gap:5px; }
    .co-cd-cell { background:#fff; border:1px solid #FED7AA; border-radius:var(--radius-sm); padding:3px 7px; text-align:center; min-width:34px; }
    .co-cd-num { display:block; font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:15px; font-weight:800; color:#9A3412; line-height:1.1; }
    .co-cd-lbl { display:block; font-size:8px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#C2703B; }

    /* ===== PROOF STRIP — a compact before/after preview inside the summary card, so the strongest
       evidence sits beside the price instead of only below the form. ===== */
    .co-proof { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin:12px 0; background:var(--white); }
    .co-proof-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; background:var(--panel-bg); border-bottom:1px solid var(--border); }
    .co-proof-title { font-size:var(--fs-sm); font-weight:800; color:var(--navy); display:flex; align-items:center; gap:6px; }
    .co-proof-title i { color:var(--teal); }
    .co-proof-link { font-size:var(--fs-xs); font-weight:700; color:var(--teal-dark); text-decoration:underline; cursor:pointer; background:none; border:none; padding:0; }
    .co-proof-grid { display:flex; gap:0; }
    .co-proof-item { flex:1; position:relative; }
    .co-proof-item img { width:100%; height:96px; object-fit:cover; display:block; }
    .co-proof-tag { position:absolute; bottom:5px; left:5px; background:rgba(15,23,42,.75); color:#fff; font-size:8.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:2px 7px; border-radius:var(--radius-pill); }
    .co-proof-foot { padding:9px 14px; font-size:var(--fs-xs); color:var(--muted); line-height:1.45; border-top:1px solid var(--border); }

    /* ===== WHY THIS CLINIC — per-clinic differentiators that build confidence without revealing
       the clinic's identity (which stays gated until booking). ===== */
    .co-why { border:1px solid var(--border); border-left:4px solid var(--teal); border-radius:var(--radius-lg); padding:14px 16px; margin:12px 0; background:var(--white); }
    .co-why-title { font-size:var(--fs-md); font-weight:800; color:var(--navy); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
    .co-why-title i { color:var(--teal); }
    .co-why-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
    .co-why-item { background:var(--panel-bg); border-radius:var(--radius-md); padding:9px 11px; }
    .co-why-label { display:block; font-size:8.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
    .co-why-val { display:block; font-size:var(--fs-sm); font-weight:800; color:var(--navy); line-height:1.3; }
    .co-why-notes { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
    .co-why-notes li { display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-sm); color:var(--text); line-height:1.45; }
    .co-why-notes li i { color:var(--green); margin-top:3px; flex-shrink:0; }
    @media(max-width:420px){ .co-why-grid { grid-template-columns:1fr; } }

    /* ===== COMPARISON TABLE — positions this offer against the alternatives a patient is actually
       weighing (another local clinic, treatment abroad, or waiting), not just an abstract "market". ===== */
    .co-compare { margin:32px auto 0; max-width:1180px; padding:0 24px; }
    .co-compare-inner { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
    .co-compare-head { padding:26px 24px 8px; text-align:center; }
    .co-compare-eyebrow { display:inline-flex; align-items:center; gap:6px; background:var(--teal-light); color:var(--teal-dark); font-size:var(--fs-xs); font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:5px 14px; border-radius:var(--radius-pill); margin-bottom:12px; }
    .co-compare-head h3 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:var(--fs-2xl); font-weight:800; color:var(--navy); margin:0 0 6px; }
    .co-compare-head p { font-size:var(--fs-sm); color:var(--muted); margin:0 0 18px; line-height:1.55; }
    .co-compare-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 24px 26px; }
    .co-compare-table { width:100%; border-collapse:separate; border-spacing:0; min-width:640px; }
    .co-compare-table th, .co-compare-table td { padding:14px 16px; text-align:left; font-size:var(--fs-sm); vertical-align:middle; border-bottom:1px solid var(--border); }
    .co-compare-table thead th { background:var(--panel-bg); font-weight:800; color:var(--navy); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--border); }
    .co-compare-table thead th.is-us { background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff; border-radius:var(--radius-md) var(--radius-md) 0 0; border-bottom:none; }
    .co-compare-table thead th.is-us .cmp-best-badge { display:block; font-size:8.5px; font-weight:800; letter-spacing:.5px; text-transform:none; background:rgba(255,255,255,.24); color:#fff; padding:2px 9px; border-radius:var(--radius-pill); margin-top:5px; width:fit-content; }
    .co-compare-table tbody tr:nth-child(even) td:not(.is-us) { background:#FBFBF9; }
    .co-compare-table td.is-us { background:#F2FCFC; font-weight:700; color:var(--navy); border-left:2px solid var(--teal-light); border-right:2px solid var(--teal-light); }
    .co-compare-table tbody tr:last-child td { border-bottom:none; }
    .co-compare-table tbody tr:last-child td.is-us { border-radius:0 0 var(--radius-md) var(--radius-md); border-bottom:2px solid var(--teal-light); }
    .co-compare-row-label { font-weight:700; color:var(--navy); white-space:nowrap; }
    .co-compare-row-label i { color:var(--teal-dark); font-size:11px; width:15px; text-align:center; margin-right:8px; }
    .cmp-cell { display:flex; align-items:center; gap:7px; }
    .cmp-mark { display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; font-size:10px; flex-shrink:0; }
    .cmp-yes .cmp-mark { background:var(--green-light); color:var(--green-dark); }
    .cmp-no .cmp-mark { background:#FDECEC; color:var(--danger); }
    .co-compare-foot { display:flex; align-items:flex-start; justify-content:center; gap:7px; padding:6px 24px 24px; font-size:11px; color:var(--muted); line-height:1.5; text-align:left; max-width:760px; margin:0 auto; }
    .co-compare-foot i { margin-top:2px; flex-shrink:0; color:var(--muted); }
    @media(max-width:600px){ .co-compare-head { padding:22px 18px 6px; } .co-compare-scroll { padding:4px 14px 20px; } }

    /* ===== GUARANTEES / RISK REVERSAL ===== */
    .co-guarantee { background:linear-gradient(135deg,#ECFDF5 0%,#D1FAE5 100%); border:1.5px solid #6EE7B7; border-radius:var(--radius-lg); padding:14px 16px; margin:12px 0; }
    .co-guarantee-title { font-size:var(--fs-md); font-weight:800; color:var(--green-dark); margin-bottom:9px; display:flex; align-items:center; gap:7px; }
    .co-guarantee-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
    .co-guarantee-list li { display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-sm); color:var(--green-dark); line-height:1.45; font-weight:600; }
    .co-guarantee-list li i { margin-top:3px; flex-shrink:0; color:var(--green); }

    /* ===== STICKY MOBILE CTA — keeps the price and the action reachable while the patient reads. ===== */
    .co-sticky-cta { display:none; position:fixed; left:0; right:0; bottom:0; z-index:900; background:var(--white); border-top:1px solid var(--border); box-shadow:0 -6px 22px rgba(15,23,42,.12); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); align-items:center; gap:12px; }
    .co-sticky-cta.show { display:flex; }
    .co-sticky-price { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
    .co-sticky-amt { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:20px; font-weight:800; color:var(--teal-dark); }
    .co-sticky-sub { font-size:10.5px; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .co-sticky-btn { margin-left:auto; flex-shrink:0; background:var(--coral); color:#fff; border:none; border-radius:var(--radius-pill); padding:13px 22px; font-size:var(--fs-md); font-weight:800; cursor:pointer; }
    .co-sticky-btn:active { background:var(--coral-dark); }
    @media(min-width:901px){ .co-sticky-cta { display:none !important; } }

    /* ===== BOOKING DEPOSIT MODAL (deposit mode only) ===== */
    .deposit-modal { display:none; position:fixed; inset:0; z-index:10000; background:rgba(15,23,42,.62); padding:24px 16px; overflow-y:auto; }
    .deposit-modal.open { display:flex; align-items:flex-start; justify-content:center; }
    .deposit-modal-inner { background:var(--white); border-radius:var(--radius-xl); max-width:440px; width:100%; margin:auto; padding:28px 26px 22px; position:relative; box-shadow:0 24px 60px rgba(0,0,0,.3); }
    .deposit-close { position:absolute; top:12px; right:12px; background:transparent; border:none; font-size:18px; color:var(--muted); cursor:pointer; line-height:1; padding:4px 8px; border-radius:var(--radius-sm); }
    .deposit-close:hover { background:var(--panel-bg); color:var(--navy); }
    .deposit-head { text-align:center; margin-bottom:18px; }
    .deposit-eyebrow { display:inline-flex; align-items:center; gap:6px; background:var(--teal-light); color:var(--teal-dark); font-size:var(--fs-xs); font-weight:800; letter-spacing:.6px; text-transform:uppercase; padding:5px 13px; border-radius:var(--radius-pill); margin-bottom:12px; }
    .deposit-head h3 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:var(--fs-2xl); font-weight:800; color:var(--navy); margin:0 0 8px; line-height:1.25; }
    .deposit-sub { font-size:var(--fs-sm); color:var(--muted); line-height:1.6; margin:0; }
    .deposit-amount-box { background:linear-gradient(135deg,var(--teal-light) 0%,#CFF3F4 100%); border:2px solid var(--teal); border-radius:var(--radius-lg); padding:16px 20px; display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
    .deposit-amount-label { font-size:var(--fs-md); font-weight:700; color:var(--teal-dark); }
    .deposit-amount-val { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:var(--fs-3xl); font-weight:800; color:var(--teal-dark); }
    .deposit-points { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:9px; }
    .deposit-points li { display:flex; align-items:flex-start; gap:9px; font-size:var(--fs-sm); color:var(--text); line-height:1.5; }
    .deposit-points li i { color:var(--green); margin-top:3px; flex-shrink:0; }
    .deposit-notice { font-size:var(--fs-sm); line-height:1.55; border-radius:var(--radius-md); padding:12px 14px; margin-bottom:14px; display:none; }
    .deposit-notice.show { display:block; }
    .deposit-notice.warn { background:#FFF7ED; border:1px solid #FED7AA; color:#92400E; }
    .deposit-notice.test { background:#FEF3C7; border:1px solid #FCD34D; color:#92400E; font-weight:600; }
    .deposit-notice.error { background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; }
    .deposit-pay-btn { width:100%; background:var(--coral); color:#fff; border:none; border-radius:var(--radius-pill); padding:15px; font-size:var(--fs-lg); font-weight:800; cursor:pointer; transition:background .2s, transform .15s; }
    .deposit-pay-btn:hover:not(:disabled) { background:var(--coral-dark); transform:translateY(-1px); }
    .deposit-pay-btn:disabled { background:var(--border); color:var(--muted); cursor:not-allowed; }
    .deposit-cancel-link { display:block; width:100%; background:transparent; border:none; color:var(--muted); font-size:var(--fs-sm); font-weight:600; cursor:pointer; padding:12px 0 4px; text-decoration:underline; }
    .deposit-cancel-link:hover { color:var(--navy); }
    .deposit-secure-row { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:12px; margin-top:6px; }
    .deposit-secure-row span { font-size:var(--fs-xs); font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
    .deposit-secure-row i { color:var(--teal); }
    @media(max-width:520px){ .deposit-modal-inner { padding:24px 18px 18px; } }

    /* ===== EXPANDED INCLUSIONS CHECKLIST — recap list inside the Treatment Journey card ===== */
    .inclusion-checklist { margin-top:18px; padding-top:16px; border-top:1px dashed var(--border); }
    .inclusion-checklist-title { font-size:var(--fs-base); font-weight:800; color:var(--navy); margin-bottom:10px; }
    .inclusion-checklist-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
    .inclusion-checklist-list li { display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-sm); color:var(--text); font-weight:500; line-height:1.45; }
    .inclusion-checklist-list li i { color:var(--green); margin-top:2px; flex-shrink:0; }

    /* ===== TRUST SIGNALS BAR (checkout) ===== */
    .checkout-trust-signals { display:flex; justify-content:center; align-items:center; gap:10px 22px; flex-wrap:wrap; padding:12px 24px; background:var(--panel-bg); border-bottom:1px solid var(--border); }
    .checkout-trust-item { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--navy); white-space:nowrap; }
    .checkout-trust-item i { color:var(--green); font-size:12px; }
    @media(max-width:640px){ .checkout-trust-signals { gap:8px 14px; padding:10px 14px; } .checkout-trust-item { font-size:11px; } }

    /* ===== REAL PATIENT RESULTS (before/after + testimonial) ===== */
    .patient-results-section { background:var(--white); border-top:1px solid var(--border); padding:48px 24px; position:relative; overflow:hidden; }
    .patient-results-section > *:not(.mmq-bubble-field) { position:relative; z-index:1; }
    .patient-results-inner { max-width:1100px; margin:0 auto; text-align:center; }
    .patient-results-eyebrow { display:inline-block; font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--teal-dark); background:var(--teal-light); padding:5px 14px; border-radius:var(--radius-pill); margin-bottom:10px; }
    .patient-results-title { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(22px,4vw,30px); font-weight:800; color:var(--navy); margin:0 0 28px; }
    .patient-results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:left; }
    @media(max-width:900px){ .patient-results-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; } }
    .patient-result-card { background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); display:flex; flex-direction:column; }
    .patient-result-images { display:grid; grid-template-columns:1fr; }
    /* Fixed aspect-ratio + object-fit:cover: every before/after photo renders at the same size and
       shape regardless of the source photo's own resolution/orientation, so all cards in the grid
       line up symmetrically on large screens instead of each stretching to its own native height. */
    .patient-result-img-wrap { position:relative; overflow:hidden; background:#e9edf1; font-size:0; aspect-ratio:1/1; }
    .patient-result-img-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
    .patient-result-img-label { position:absolute; bottom:6px; left:6px; background:rgba(15,23,42,.72); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-pill); }
    .patient-result-body { padding:16px 18px 18px; }
    .patient-result-label { font-size:12.5px; font-weight:800; color:var(--teal-dark); margin-bottom:8px; }
    .patient-result-quote { font-size:var(--fs-sm); color:var(--text); line-height:1.55; font-style:italic; margin:0 0 10px; }
    .patient-result-author { font-size:12.5px; font-weight:700; color:var(--navy); }

    /* ===== CRO audit 3.5: video testimonial embed (with graceful no-video fallback) =====
       A card can now show several patient videos, not just one — .video-embed-card becomes a grid
       of .video-embed-card-item tiles once there's more than one (see renderVideoTestimonial()). */
    .video-testimonial-section { background:var(--panel-bg); border-top:1px solid var(--border); padding:48px 24px; text-align:center; }
    .video-testimonial-inner { max-width:640px; margin:0 auto; transition:max-width .2s; }
    .video-testimonial-section.has-multi-videos .video-testimonial-inner { max-width:980px; }
    .video-embed-card { margin-top:8px; display:grid; gap:18px; grid-template-columns:1fr; }
    .video-embed-card.video-embed-multi { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); text-align:left; }
    .video-embed-card-item { border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); background:var(--navy); }
    .video-embed-thumb-wrap { position:relative; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:var(--navy); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); }
    .video-embed-thumb-wrap img.video-embed-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
    .video-embed-fallback { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; color:#fff; font-size:var(--fs-md); font-weight:700; }
    .video-embed-fallback i { font-size:28px; opacity:.85; }
    .video-embed-play-btn { position:relative; z-index:1; width:56px; height:56px; border-radius:50%; background:var(--white); color:var(--teal-dark); border:none; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 4px 16px rgba(0,0,0,.25); cursor:pointer; }
    .video-embed-play-btn:disabled { opacity:.6; cursor:not-allowed; }
    .video-embed-frame-wrap { position:relative; aspect-ratio:16/9; }
    .video-embed-frame-wrap iframe, .video-embed-frame-wrap video { position:absolute; inset:0; width:100%; height:100%; border:0; }
    @media(max-width:520px){ .video-testimonial-section { padding:36px 16px; } }

    /* ===== CHECKOUT FAQ ===== */
    .checkout-faq-section { background:var(--panel-bg); border-top:1px solid var(--border); padding:48px 24px 56px; }
    .checkout-faq-inner { max-width:760px; margin:0 auto; }
    .checkout-faq-title { text-align:center; font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(22px,4vw,28px); font-weight:800; color:var(--navy); margin:0 0 22px; }
    .checkout-faq-item { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:10px; overflow:hidden; }
    .checkout-faq-question { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:16px 18px; font-size:var(--fs-md); font-weight:700; color:var(--navy); font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .checkout-faq-question i { flex-shrink:0; color:var(--teal); transition:transform .2s; }
    .checkout-faq-item.open .checkout-faq-question i { transform:rotate(180deg); }
    .checkout-faq-answer { max-height:0; overflow:hidden; transition:max-height .25s ease; }
    .checkout-faq-item.open .checkout-faq-answer { max-height:400px; }
    .checkout-faq-answer-inner { padding:0 18px 16px; font-size:var(--fs-sm); color:var(--muted); line-height:1.6; }

    /* ===== COUNTRY PAGE ===== */
    #country-page { display:none; }
    .country-hero { background:var(--white); border-bottom:1px solid var(--border); text-align:center; padding:44px 24px 32px; }
    .country-eyebrow { display:inline-flex; align-items:center; gap:8px; background:var(--teal-light); color:var(--teal-dark); font-size:var(--fs-sm); font-weight:700; letter-spacing:.8px; text-transform:uppercase; padding:5px 16px; border-radius:var(--radius-xl); margin-bottom:16px; }
    .country-flag { font-size:var(--fs-xl); line-height:1; }
    .country-hero h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:34px; font-weight:800; color:var(--navy); margin-bottom:8px; letter-spacing:-.5px; }
    .country-hero h2 span { color:var(--teal); }
    .country-intro { font-size:var(--fs-md); color:var(--muted); max-width:560px; margin:0 auto 12px; line-height:1.65; }
    .steps-bar { background:var(--white); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:center; padding:20px 24px; gap:0; flex-wrap:wrap; }
    .step-item { display:flex; align-items:center; gap:10px; padding:10px 20px; }
    .step-num { width:30px; height:30px; border-radius:50%; background:var(--teal); color:white; font-size:var(--fs-base); font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .step-item.done .step-num { background:var(--green); }
    .step-item.active .step-num { background:var(--blue-btn); box-shadow:0 0 0 4px rgba(29,111,164,0.15); }
    .step-text { display:flex; flex-direction:column; }
    .step-label { font-size:var(--fs-sm); font-weight:700; color:var(--navy); }
    .step-sub { font-size:var(--fs-xs); color:var(--muted); }
    .step-connector { height:2px; width:48px; background:var(--border); flex-shrink:0; }
    .step-connector.done { background:var(--green); }
    .savings-banner { max-width:920px; margin:20px auto 0; padding:0 24px; }
    .savings-inner { background:linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 100%); border:1.5px solid #93C5FD; border-radius:var(--radius-lg); padding:16px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
    .savings-icon { width:44px; height:44px; background:#DBEAFE; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .savings-icon svg { color:var(--blue-btn); }
    .savings-text h3 { font-size:var(--fs-md); font-weight:700; color:#1E3A5F; margin-bottom:2px; }
    .savings-text p { font-size:var(--fs-sm); color:#3B5F82; line-height:1.5; }
    .savings-badge { margin-left:auto; background:var(--blue-btn); color:white; font-size:var(--fs-base); font-weight:800; padding:8px 18px; border-radius:var(--radius-md); white-space:nowrap; }
    .clinics-wrapper { max-width:920px; margin:0 auto; padding:20px 24px 60px; display:flex; flex-direction:column; gap:16px; }
    .clinic-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); padding:24px 28px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start; box-shadow:var(--card-shadow); transition:box-shadow .25s, transform .2s; position:relative; overflow:hidden; }
    .clinic-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--teal); border-radius:var(--radius-xl) 0 0 16px; }
    .clinic-card:hover { box-shadow:var(--card-shadow-hover); transform:translateY(-2px); }
    .cc-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
    .cc-name { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:var(--fs-xl); font-weight:800; color:var(--navy); margin-bottom:4px; }
    .cc-location { display:flex; align-items:center; gap:5px; font-size:var(--fs-sm); color:var(--muted); font-weight:500; }
    .cc-location svg { color:var(--teal); }
    .cc-country-flag { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:700; color:var(--muted); }
    .cc-rating-row { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
    .cc-rating-badge { display:flex; align-items:center; gap:5px; background:#FFF9EC; border:1px solid #FDE68A; border-radius:var(--radius-xl); padding:4px 10px; }
    .cc-rating-badge .stars { font-size:var(--fs-sm); color:var(--star); }
    .cc-rating-badge .rval { font-size:var(--fs-sm); font-weight:700; color:#92400E; }
    .cc-review-count { font-size:var(--fs-sm); color:var(--muted); }
    .cc-review-count strong { color:var(--text); font-weight:800; }
    .cc-verified { display:flex; align-items:center; gap:4px; font-size:var(--fs-xs); font-weight:600; color:var(--green); background:var(--green-light); border-radius:var(--radius-xl); padding:3px 9px; }
    .cc-description { font-size:var(--fs-base); color:var(--muted); line-height:1.6; margin-bottom:16px; }
    .cc-prices { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:6px; }
    .cc-price-pill { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 12px; display:flex; flex-direction:column; gap:3px; }
    .cc-price-label { font-size:var(--fs-2xs); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
    .cc-price-val { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:17px; font-weight:800; color:var(--blue-btn); }
    .cc-treatments-count { font-size:var(--fs-xs); color:var(--muted); margin-top:4px; display:flex; align-items:center; gap:4px; }
    .cc-treatments-count svg { color:var(--teal); }
    .cc-right { display:flex; flex-direction:column; align-items:flex-end; gap:12px; min-width:160px; }
    /* display:inline-block + text-decoration:none added so this can be a real <a href="/quote/..."> too. */
    .contact-btn { display:inline-block; width:100%; background:var(--blue-btn); color:white; border:none; border-radius:var(--radius-md); padding:13px 20px; font-size:var(--fs-base); font-weight:800; letter-spacing:.8px; text-decoration:none; cursor:pointer; font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; transition:background .2s, transform .15s; text-align:center; }
    .contact-btn:hover { background:var(--blue-btn-hover); transform:scale(1.03); }
    .get-quote-link { font-size:var(--fs-sm); font-weight:600; color:var(--teal); text-decoration:none; text-align:center; display:flex; align-items:center; gap:4px; justify-content:flex-end; }
    .get-quote-link:hover { color:var(--teal-dark); text-decoration:underline; }
    .cc-savings-pill { background:var(--green-light); border:1px solid #6EE7B7; border-radius:var(--radius-md); padding:6px 10px; text-align:center; font-size:var(--fs-xs); font-weight:600; color:var(--green); width:100%; }

    /* ===== FIND CLINIC ===== */
    #find-clinic-page { display:none; background:#f4f6f9; min-height:100vh; }
    .find-clinic-wrap { max-width:1300px; margin:0 auto; padding:40px 24px; }
    .find-clinic-heading { text-align:center; margin-bottom:40px; }
    .find-clinic-heading h2 { font-size:32px; font-weight:800; color:var(--navy); margin-bottom:8px; }
    .find-clinic-heading p { color:var(--muted); font-size:var(--fs-lg); }
    /* flex-wrap here is the fix — this used to be a rigid single-line inline-styled row with no
       wrap, so on a narrow phone the input (which won't shrink below its placeholder text) pushed
       the Search button off the edge of the screen. */
    .find-clinic-searchbar { max-width:700px; margin:0 auto 40px; display:flex; flex-wrap:wrap; gap:12px; }
    .find-clinic-searchbar input { flex:1 1 200px; min-width:0; padding:14px 20px; border:2px solid var(--border); border-radius:var(--radius-lg); font-size:var(--fs-lg); outline:none; transition:border-color .2s; }
    .find-clinic-searchbar input:focus { border-color:var(--teal); }
    .find-clinic-searchbar button { flex:1 1 auto; background:var(--blue-btn); color:white; border:none; padding:14px 32px; border-radius:var(--radius-lg); font-weight:700; cursor:pointer; transition:background .2s; }
    .find-clinic-searchbar button:hover { background:var(--blue-btn-hover); }
    .find-clinic-layout { display:flex; gap:24px; margin-top:20px; }
    .results-column { flex:1.2; max-height:800px; overflow-y:auto; padding-right:10px; }
    #map { flex:1; height:600px; border-radius:var(--radius-xl); border:2px solid var(--border); position:sticky; top:100px; z-index:10; box-shadow:var(--card-shadow); }
    @media (max-width:1000px){ .find-clinic-layout { flex-direction:column-reverse; } #map { height:350px; position:relative; top:0; } .results-column { max-height:none; } }
    @media (max-width:600px){ .find-clinic-wrap { padding:24px 16px 40px; } .find-clinic-heading { margin-bottom:24px; } .find-clinic-heading h2 { font-size:24px; } .find-clinic-searchbar button { flex:1 1 100%; } }

    /* ===== ADMIN PANEL ===== */
    #admin-panel { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; background:rgba(0,0,0,0.5); overflow-y:auto; padding:40px 20px; }
    #admin-panel-inner { max-width:1400px; margin:0 auto; background:#f0f4f8; border-radius:var(--radius-xl); padding:32px; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
    @media (max-width:800px){ #admin-panel-inner { padding:16px; } .admin-grid { grid-template-columns:1fr !important; } }
    /* Safety net for the many inline-style grids inside admin cards (score sheets, field rows,
       etc.) — those are generated with fixed 2/3/4-column grid-template-columns per card and can't
       all be revisited individually, so force any of them down to a single column on phones. */
    @media (max-width:600px){ #admin-panel-body [style*="grid-template-columns"] { grid-template-columns:1fr !important; } }
    .admin-close { float:right; background:#ef4444; color:white; border:none; padding:8px 20px; border-radius:var(--radius-pill); font-weight:700; cursor:pointer; }
    .admin-close:hover { background:var(--danger); }
    .admin-add-btn { background:var(--green); color:white; border:none; border-radius:var(--radius-md); padding:8px 16px; font-size:var(--fs-base); font-weight:600; cursor:pointer; transition:background .2s; }
    .admin-add-btn:hover { background:var(--green-dark); }

    /* ===== COLLAPSIBLE ADMIN SECTIONS — generic accordion applied at runtime by
       adminSetupCollapsibleSections() (see JS) to every top-level admin card, and to each
       labeled sub-block inside "Checkout Page — Trust & Conversion Content". Keeps the panel
       navigable as it grows: only section titles show until you click one open. ===== */
    .admin-card-header { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; user-select:none; }
    .admin-card-header:hover .admin-card-chevron { opacity:1; }
    .admin-card-chevron { flex-shrink:0; color:var(--muted); opacity:.6; transition:transform .2s, opacity .2s; font-size:14px; }
    .admin-card-header.open .admin-card-chevron { transform:rotate(180deg); opacity:1; color:var(--teal-dark); }
    .admin-card-body { display:none; }
    .admin-card-body.open { display:block; animation:adminCardOpen .18s ease; }
    @keyframes adminCardOpen { from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
    .admin-subcard-header { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; user-select:none; background:var(--panel-bg); border-radius:var(--radius-md); padding:10px 14px; }
    .admin-subcard-header .admin-card-chevron { font-size:12px; }
    .admin-subcard-body { display:none; padding:14px 2px 2px; }
    .admin-subcard-body.open { display:block; animation:adminCardOpen .18s ease; }
    .sched-mini { grid-column:1/-1; width:100%; margin-top:12px; padding-top:12px; border-top:1px dashed #d7dee7; }
    .sched-mini-title { font-size:var(--fs-sm); font-weight:700; color:var(--navy); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
    /* ===== Collapsible per-card admin sections — each card's editors (Journey, Patient Results,
       Video, Clinic Info, Scheduling) collapse into labelled headers so a single offer card is
       scannable instead of an endless wall of inputs. Uses native <details>/<summary> so it works
       without any JS and keeps state per-section while editing. ===== */
    .admin-acc { border:1px solid var(--border); border-radius:var(--radius-md); background:#fff; margin-top:10px; overflow:hidden; }
    .admin-acc > summary { list-style:none; cursor:pointer; padding:10px 12px; font-size:var(--fs-sm); font-weight:700; color:var(--navy); display:flex; align-items:center; gap:8px; background:var(--panel-bg); transition:background .15s; }
    .admin-acc > summary::-webkit-details-marker { display:none; }
    .admin-acc > summary:hover { background:var(--teal-light); }
    .admin-acc > summary i.acc-ico { color:var(--teal); width:16px; text-align:center; }
    .admin-acc > summary .acc-sub { font-weight:400; color:var(--muted); font-size:var(--fs-xs); }
    .admin-acc > summary .acc-chev { margin-left:auto; color:var(--muted); transition:transform .2s; font-size:var(--fs-xs); }
    .admin-acc[open] > summary .acc-chev { transform:rotate(180deg); }
    .admin-acc[open] > summary { border-bottom:1px solid var(--border); }
    .admin-acc-body { padding:12px; }
    .admin-acc-body .sched-mini { margin-top:0; padding-top:0; border-top:none; }
    /* ===== Admin image rows accept a file pick, a drag-and-drop, or a Ctrl+V paste ===== */
    .admin-img-drop { position:relative; flex-wrap:wrap; border:2px dashed transparent; border-radius:var(--radius-md); padding:8px; transition:border-color .15s, background .15s; outline:none; }
    .admin-img-drop:focus { border-color:var(--teal); background:var(--teal-light); }
    .admin-img-drop.is-dragover { border-color:var(--teal); background:var(--teal-light); }
    .admin-img-drop-hint { flex-basis:100%; width:100%; font-size:var(--fs-2xs); color:var(--muted); margin-top:4px; font-style:italic; }
    .admin-img-drop:focus .admin-img-drop-hint { color:var(--teal-dark); font-style:normal; font-weight:600; }
    /* ===== ADMIN CARD LIST: search, status and completeness ===== */
    .admin-search-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 12px; margin-bottom:12px; }
    .admin-search-bar input[type="search"] { flex:1; min-width:180px; padding:8px 10px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:var(--fs-sm); }
    .admin-search-bar select { padding:8px 10px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:var(--fs-sm); }
    .admin-search-count { font-size:var(--fs-xs); font-weight:700; color:var(--muted); white-space:nowrap; }
    .admin-card-hidden { display:none !important; }
    .admin-status-pill { font-size:var(--fs-2xs); font-weight:800; padding:2px 9px; border-radius:999px; letter-spacing:.3px; text-transform:uppercase; }
    .admin-status-live { background:var(--green-light); color:var(--green-dark); }
    .admin-status-draft { background:#FEF3C7; color:#92400E; }
    .admin-complete { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-2xs); font-weight:700; color:var(--muted); }
    .admin-complete-bar { width:52px; height:6px; border-radius:999px; background:var(--border); overflow:hidden; }
    .admin-complete-fill { height:100%; border-radius:999px; }
    .admin-card-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; padding-right:34px; }
    .admin-card-head-title { font-size:var(--fs-md); font-weight:800; color:var(--navy); }
    .admin-card-head-pill { background:var(--teal-light); color:var(--teal-dark); font-size:var(--fs-2xs); font-weight:700; padding:2px 9px; border-radius:999px; }
    .sched-mini-title i { color:var(--teal); }
    .sched-mini-subtitle { font-weight:500; color:var(--muted); font-size:var(--fs-xs); }
    .sched-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    @media (max-width:640px){ .sched-mini-grid { grid-template-columns:1fr; } }
    .sched-mini-col { background:#ffffff; border:1px solid var(--border); border-radius:var(--radius-md); padding:10px; }
    .sched-mini-label { font-size:var(--fs-xs); font-weight:600; color:var(--navy); display:block; margin-bottom:6px; }
    .sched-mini-inline { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
    .sched-mini-inline input, .sched-mini-inline select { flex:1; min-width:90px; padding:6px 8px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:var(--fs-sm); font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .sched-mini-btn { background:var(--teal); color:white; border:none; border-radius:var(--radius-sm); padding:6px 12px; font-size:var(--fs-sm); font-weight:700; cursor:pointer; white-space:nowrap; transition:background .2s; }
    .sched-mini-btn:hover { background:var(--teal-dark); }
    .sched-mini-list { max-height:140px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
    .sched-mini-row { display:flex; align-items:center; justify-content:space-between; background:var(--panel-bg); border-radius:var(--radius-sm); padding:6px 10px; font-size:var(--fs-sm); color:var(--text); }
    .sched-mini-row i { color:var(--danger-dark); margin-right:4px; }
    .sched-mini-remove { background:none; border:none; color:var(--danger-dark); font-weight:700; cursor:pointer; font-size:var(--fs-base); padding:2px 6px; }
    .sched-mini-remove:hover { color:#7f1d1d; }
    .sched-mini-empty { font-size:var(--fs-sm); color:var(--muted); padding:4px 0; }
    .admin-remove-btn { background:var(--danger); color:white; border:none; border-radius:var(--radius-sm); padding:4px 10px; font-size:var(--fs-xs); font-weight:600; cursor:pointer; transition:background .2s; }
    .admin-remove-btn:hover { background:var(--danger-dark); }
    .page-link-item { background:var(--panel-bg); border-radius:var(--radius-md); padding:8px 12px; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; border-left:3px solid var(--teal); }
    .page-link-item .link-info { font-size:var(--fs-base); }
    .page-link-item .link-info strong { color:var(--navy); }
    .page-link-item .link-info span { color:var(--muted); font-size:var(--fs-sm); }
    .page-link-actions { display:flex; gap:6px; }
    .page-link-actions button { padding:3px 10px; border:none; border-radius:var(--radius-xs); cursor:pointer; font-size:var(--fs-xs); font-weight:600; }
    .page-link-actions .edit-link { background:var(--blue-btn); color:white; }
    .page-link-actions .edit-link:hover { background:#155d8e; }
    .page-link-actions .delete-link { background:var(--danger); color:white; }
    .page-link-actions .delete-link:hover { background:var(--danger-dark); }

    /* ===== WHAT IS ALL-ON-4 PAGE ===== */
    #what-page, #cost-page, #why-compare-page, #how-it-works-page { display:none; background:var(--panel-bg); padding:40px 24px; }
    #what-page .container, #cost-page .container, #why-compare-page .container, #how-it-works-page .container { max-width:900px; margin:0 auto; background:white; border-radius:var(--radius-xl); padding:40px 48px; box-shadow:var(--shadow-md); }
    #what-page .back-btn, #cost-page .back-btn, #why-compare-page .back-btn, #how-it-works-page .back-btn { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-base); font-weight:600; color:var(--teal); background:none; border:none; cursor:pointer; padding:0; margin-bottom:20px; transition:color .2s; }
    #why-compare-page .why-compare-section { padding:0; background:transparent; }
    #why-compare-page .why-compare-inner { max-width:none; margin:0; }
    #why-compare-page .why-compare-inner h2 { text-align:left; font-size:clamp(26px,3.6vw,34px); }
    #why-compare-page .why-compare-intro { text-align:left; margin:0 0 32px; }
    @media(max-width:640px){ #what-page .container, #cost-page .container, #why-compare-page .container, #how-it-works-page .container { padding:28px 22px; } }
    #what-page .container, #cost-page .container { max-width:900px; margin:0 auto; background:white; border-radius:var(--radius-xl); padding:40px 48px; box-shadow:var(--shadow-md); }
    #what-page h2, #cost-page h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:32px; font-weight:800; color:var(--navy); margin-bottom:8px; }
    #what-page .subtitle, #cost-page .subtitle { color:var(--muted); font-size:var(--fs-md); margin-bottom:32px; padding-bottom:16px; border-bottom:1px solid var(--border); }
    #what-page .what-content, #cost-page .what-content { font-size:var(--fs-lg); line-height:1.8; color:var(--text); }
    #what-page .what-content h3, #cost-page .what-content h3 { font-size:22px; font-weight:700; color:var(--teal-dark); margin:28px 0 12px; }
    #what-page .what-content h4, #cost-page .what-content h4 { font-size:var(--fs-xl); font-weight:700; color:var(--navy); margin:24px 0 10px; }
    #what-page .what-content ul, #cost-page .what-content ul { padding-left:24px; margin:12px 0; }
    #what-page .what-content li, #cost-page .what-content li { margin-bottom:6px; }
    #what-page .what-content .highlight-box, #cost-page .what-content .highlight-box { background:var(--teal-light); border-left:4px solid var(--teal); padding:16px 20px; border-radius:var(--radius-md); margin:20px 0; }
    #what-page .what-content .highlight-box strong, #cost-page .what-content .highlight-box strong { color:var(--navy); }
    #what-page .what-content table, #cost-page .what-content table { width:100%; border-collapse:collapse; font-size:var(--fs-md); margin:20px 0; }
    #what-page .what-content table th, #what-page .what-content table td, #cost-page .what-content table th, #cost-page .what-content table td { border:1px solid var(--border); padding:10px 12px; text-align:left; }
    #what-page .what-content table th, #cost-page .what-content table th { background:var(--bg); font-weight:700; color:var(--navy); }
    #what-page .back-btn, #cost-page .back-btn { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-base); font-weight:600; color:var(--teal); background:none; border:none; cursor:pointer; padding:0; margin-bottom:20px; transition:color .2s; }
    #what-page .back-btn:hover, #cost-page .back-btn:hover { color:var(--teal-dark); }

    /* ===== PRIVACY POLICY / TERMS OF SERVICE PAGES (reuse the What-Is-All-on-4 recipe) ===== */
    #privacy-page, #terms-page { display:none; background:var(--panel-bg); padding:40px 24px; }
    #privacy-page .container, #terms-page .container { max-width:900px; margin:0 auto; background:white; border-radius:var(--radius-xl); padding:40px 48px; box-shadow:var(--shadow-md); }
    #privacy-page h2, #terms-page h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:32px; font-weight:800; color:var(--navy); margin-bottom:8px; }
    #privacy-page .subtitle, #terms-page .subtitle { color:var(--muted); font-size:var(--fs-md); margin-bottom:32px; padding-bottom:16px; border-bottom:1px solid var(--border); }
    #privacy-page .what-content, #terms-page .what-content { font-size:var(--fs-lg); line-height:1.8; color:var(--text); }
    #privacy-page .what-content h3, #terms-page .what-content h3 { font-size:22px; font-weight:700; color:var(--teal-dark); margin:28px 0 12px; }
    #privacy-page .what-content h4, #terms-page .what-content h4 { font-size:var(--fs-xl); font-weight:700; color:var(--navy); margin:24px 0 10px; }
    #privacy-page .what-content ul, #terms-page .what-content ul { padding-left:24px; margin:12px 0; }
    #privacy-page .what-content li, #terms-page .what-content li { margin-bottom:6px; }
    #privacy-page .what-content .highlight-box, #terms-page .what-content .highlight-box { background:var(--teal-light); border-left:4px solid var(--teal); padding:16px 20px; border-radius:var(--radius-md); margin:20px 0; }
    #privacy-page .what-content .highlight-box strong, #terms-page .what-content .highlight-box strong { color:var(--navy); }
    #privacy-page .back-btn, #terms-page .back-btn { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-base); font-weight:600; color:var(--teal); background:none; border:none; cursor:pointer; padding:0; margin-bottom:20px; transition:color .2s; }
    #privacy-page .back-btn:hover, #terms-page .back-btn:hover { color:var(--teal-dark); }
    @media(max-width:640px){ #privacy-page .container, #terms-page .container { padding:28px 22px; } }

    /* ===== ABOUT PAGE ===== */
    #about-page { display:none; background:var(--panel-bg); }
    #about-page .about-back-wrap { max-width:900px; margin:0 auto; padding:24px 24px 0; }
    #about-page .back-btn { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-base); font-weight:600; color:var(--teal); background:none; border:none; cursor:pointer; padding:0; transition:color .2s; }
    #about-page .back-btn:hover { color:var(--teal-dark); }
    #about-page .about-hero { text-align:center; padding:36px 24px 44px; background:linear-gradient(180deg,var(--teal-light) 0%, var(--panel-bg) 100%); }
    #about-page .about-eyebrow { display:inline-flex; align-items:center; gap:6px; background:white; color:var(--teal-dark); font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.6px; padding:6px 16px; border-radius:var(--radius-pill); margin-bottom:16px; box-shadow:0 1px 3px rgba(26,35,64,0.08); }
    #about-page h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(28px,4vw,38px); font-weight:800; color:var(--navy); margin-bottom:14px; }
    #about-page .about-tagline { max-width:640px; margin:0 auto; font-size:var(--fs-lg); color:var(--muted); line-height:1.6; }
    #about-page .container { max-width:900px; margin:0 auto; background:white; border-radius:var(--radius-xl); padding:40px 48px; box-shadow:var(--shadow-md); position:relative; top:-28px; }
    #about-page .what-content { font-size:var(--fs-lg); line-height:1.8; color:var(--text); }
    #about-page .what-content h3 { font-size:22px; font-weight:700; color:var(--teal-dark); margin:28px 0 12px; }
    #about-page .what-content h3:first-child { margin-top:0; }
    #about-page .what-content h4 { font-size:var(--fs-xl); font-weight:700; color:var(--navy); margin:24px 0 10px; }
    #about-page .what-content p { margin-bottom:14px; }
    #about-page .what-content .highlight-box { background:var(--teal-light); border-left:4px solid var(--teal); padding:16px 20px; border-radius:var(--radius-md); margin:20px 0; }
    #about-page .what-content .highlight-box strong { color:var(--navy); }
    #about-page .about-value-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin:24px 0 32px; }
    #about-page .about-value-card { background:var(--panel-bg); border-radius:var(--radius-lg); padding:20px 18px; text-align:center; }
    #about-page .about-value-card .avc-icon { width:44px; height:44px; margin:0 auto 12px; border-radius:50%; background:var(--teal-light); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-size:18px; }
    #about-page .about-value-card h4 { font-size:var(--fs-md); font-weight:700; color:var(--navy); margin:0 0 6px; }
    #about-page .about-value-card p { font-size:var(--fs-sm); color:var(--muted); margin:0; line-height:1.5; }
    #about-page .about-vetting-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:20px 0 28px; }
    #about-page .about-vetting-item { display:flex; gap:12px; align-items:flex-start; background:var(--panel-bg); border-radius:var(--radius-md); padding:14px 16px; }
    #about-page .about-vetting-item .avi-icon { width:32px; height:32px; flex-shrink:0; border-radius:50%; background:var(--teal-light); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-size:13px; }
    #about-page .about-vetting-item strong { display:block; color:var(--navy); font-size:var(--fs-base); margin-bottom:3px; }
    #about-page .about-vetting-item span { font-size:var(--fs-sm); color:var(--muted); line-height:1.5; }
    #about-page .about-cta-band { text-align:center; background:var(--navy); border-radius:var(--radius-lg); padding:32px 24px; margin-top:8px; }
    #about-page .about-cta-band h3 { color:white !important; margin-top:0 !important; }
    #about-page .about-cta-band p { color:#CBD5E0; margin-bottom:18px !important; }
    #about-page .about-cta-band .about-cta-btn { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:white; border:none; padding:13px 28px; border-radius:var(--radius-pill); font-weight:700; font-size:var(--fs-md); cursor:pointer; transition:background .2s, transform .15s; }
    #about-page .about-cta-band .about-cta-btn:hover { background:var(--teal-dark); transform:translateY(-1px); }
    @media(max-width:640px){ #about-page .container { padding:28px 22px; top:-20px; } }
    /* Unscoped reusable CTA pill button (same look as .about-cta-btn, usable outside #about-page) */
    /* Phase 1 UX audit (High — button consistency): this and the 4 other primary-CTA classes
       below (.hero-wizard-cta, .tp-homepage-cta, .fin-homepage-cta, .budget-match-cta) used 5
       different background colors/weights/paddings/shadows for the same action ("start the lead
       funnel"). All 5 now share one canonical spec so every entry point into the funnel looks
       like the same button. Offer-card and checkout buttons are intentionally handled separately
       (offer cards are their own audit item). */
    .mq-cta-btn { display:inline-flex; align-items:center; gap:8px; background:var(--blue-btn); color:#fff; border:none; padding:14px 30px; border-radius:var(--radius-pill); font-weight:800; font-size:var(--fs-md); cursor:pointer; transition:background .2s, transform .15s, box-shadow .2s; box-shadow:0 8px 20px -6px rgba(2,122,130,0.45); text-decoration:none; }
    .mq-cta-btn:hover { background:var(--blue-btn-hover); transform:translateY(-1px); }

    /* ===== ESTIMATOR PAGE ===== */
    #estimator-page { display:none; background:var(--bg); padding-bottom:40px; }
    .estimator-container { max-width:1280px; margin:0 auto; padding:32px 24px 60px; }
    .estimator-header { text-align:center; margin-bottom:40px; }
    .estimator-header h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:2.4rem; font-weight:800; color:var(--navy); letter-spacing:-0.01em; }
    .estimator-header h2 i { color:var(--teal); }
    .estimator-header p { font-size:1.05rem; color:var(--muted); max-width:650px; margin:12px auto 0; line-height:1.6; }
    .estimator-card { background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); overflow:hidden; margin-bottom:40px; border:1px solid var(--border); }
    .estimator-form { padding:32px 32px 24px; background:var(--white); }
    .form-row-est { display:flex; flex-wrap:wrap; gap:24px; margin-bottom:28px; align-items:flex-end; }
    .form-group-est { flex:1; min-width:200px; }
    .form-group-est label { font-weight:700; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.6px; color:var(--navy); display:block; margin-bottom:8px; }
    .form-group-est label i { color:var(--teal); margin-right:4px; }
    .form-group-est select, .form-group-est input { width:100%; padding:14px 16px; border-radius:var(--radius-lg); border:1.5px solid var(--border); font-size:1rem; font-weight:500; color:var(--text); background:var(--white); font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; transition:0.2s; outline:none; }
    .form-group-est select:focus, .form-group-est input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,181,216,0.12); }
    .btn-primary { background:var(--teal); border:none; padding:14px 28px; border-radius:var(--radius-lg); font-weight:700; font-size:var(--fs-lg); color:white; cursor:pointer; transition:0.2s; display:inline-flex; align-items:center; gap:10px; box-shadow:var(--shadow-sm); font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .btn-primary:hover { background:var(--teal-dark); transform:translateY(-2px); }
    .result-area { background:var(--bg); border-top:1px solid var(--border); padding:32px; transition:all 0.2s; }
    .gauge-container { display:flex; flex-direction:column; align-items:center; margin-bottom:28px; position:relative; }
    /* width:min(280px,100%) instead of a fixed 280px — the old fixed width plus a mobile
       "transform:scale(0.9)" hack looked smaller but didn't actually reduce the element's layout
       box, so it kept forcing the whole page to scroll sideways on phones narrower than ~330px.
       aspect-ratio keeps the semicircle proportioned as it shrinks; border-radius:50% scales with it. */
    .gauge { position:relative; width:min(280px,100%); aspect-ratio:280/150; height:auto; background:linear-gradient(180deg, #e8edf2 0%, #dce3ea 100%); border-radius:50% 50% 0 0; overflow:visible; box-shadow:inset 0 5px 12px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.1); border-bottom:3px solid #cbd5e1; }
    .gauge-zones { position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50% 50% 0 0; overflow:hidden; z-index:1; }
    .zone { position:absolute; bottom:0; height:100%; transition:all 0.3s; }
    .zone-red { background:linear-gradient(0deg, #e74c3c, #ec7063); left:0%; width:25%; }
    .zone-orange { background:linear-gradient(0deg, #f39c12, #f8c471); left:25%; width:25%; }
    .zone-yellow { background:linear-gradient(0deg, #f1c40f, #f7dc6f); left:50%; width:25%; }
    .zone-green { background:linear-gradient(0deg, #2ecc71, #58d68d); left:75%; width:25%; border-radius:0 0 0 0; }
    .gauge-needle { position:absolute; bottom:0; left:50%; width:4px; height:86%; background:linear-gradient(180deg, var(--navy), #2c3e50); transform-origin:50% 100%; transform:translateX(-50%) rotate(-90deg); transition:transform 0.8s cubic-bezier(0.34, 1.2, 0.64, 1); z-index:10; border-radius:var(--radius-xs) var(--radius-xs) 0 0; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
    .gauge-needle::before { content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:12px solid #2c3e50; }
    .gauge-needle::after { content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:20px; height:20px; background:radial-gradient(circle, #2c3e50, #1a252f); border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.3); border:2px solid var(--gold); }
    .gauge-center-cap { position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:18px; height:18px; background:var(--gold); border-radius:50%; z-index:15; box-shadow:0 1px 3px rgba(0,0,0,0.3); border:2px solid #d4ac0d; }
    .gauge-labels { display:flex; justify-content:space-between; width:min(280px,100%); margin:16px auto 0; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:0 8px; }
    .gauge-labels span { flex:1; text-align:center; }
    .gauge-labels span:nth-child(1) { color:#e74c3c; }
    .gauge-labels span:nth-child(2) { color:#f39c12; }
    .gauge-labels span:nth-child(3) { color:#A16207; }
    .gauge-labels span:nth-child(4) { color:#2ecc71; }
    .value-indicator { text-align:center; margin-top:12px; font-size:0.85rem; font-weight:700; color:var(--navy); background:var(--white); display:inline-block; padding:6px 16px; border-radius:var(--radius-pill); border:1px solid var(--border); }
    .judgment-card { background:var(--white); border-radius:var(--radius-xl); padding:28px; text-align:center; box-shadow:var(--shadow-md); transition:all 0.2s; margin-top:20px; border:1px solid var(--border); }
    .judgment-icon { font-size:3.5rem; margin-bottom:16px; transition:transform 0.3s ease; }
    .judgment-title { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:1.6rem; font-weight:800; margin-bottom:12px; }
    .judgment-message { font-size:1rem; color:var(--text); max-width:500px; margin:16px auto 0; line-height:1.6; }
    .judgment-message strong { color:var(--navy); }
    .deal-badge { display:inline-block; border-radius:var(--radius-pill); padding:10px 24px; font-weight:700; font-size:0.95rem; margin-top:20px; color:var(--navy); }
    .service-detail { background:var(--bg); border-radius:var(--radius-lg); padding:16px; margin-top:24px; text-align:left; color:var(--muted); font-size:0.85rem; line-height:1.6; }
    .service-directory h3 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--navy); font-size:1.3rem; font-weight:700; }
    .service-directory h3 i { color:var(--teal); }
    .service-directory > p { color:var(--muted); }
    .service-category-block { margin-bottom:28px; }
    .service-category-title { font-size:0.95rem; font-weight:700; color:var(--white); background:var(--navy); display:inline-flex; align-items:center; gap:8px; padding:7px 18px; border-radius:var(--radius-md); margin-bottom:14px; letter-spacing:.2px; }
    .service-category-title i { color:var(--teal); }
    .services-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px,100%),1fr)); gap:14px; }
    .service-tag { background:var(--white); border-radius:var(--radius-lg); padding:12px 18px; border:1px solid var(--border); font-size:0.9rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:12px; transition:0.15s; cursor:pointer; white-space:normal; word-wrap:break-word; }
    .service-tag:hover { border-color:var(--teal); background:var(--teal-light); box-shadow:0 4px 10px rgba(0,181,216,0.12); }
    .service-tag i { color:var(--teal); width:20px; flex-shrink:0; }
    .service-tag span { flex:1; }
    .service-tag .svc-code { font-size:0.7rem; color:var(--muted); font-weight:600; display:block; margin-top:2px; }
    .footnote { font-size:0.78rem; color:var(--muted); margin-top:24px; text-align:center; border-top:1px solid var(--border); padding-top:24px; }
    @keyframes pulse { 0% { transform:scale(1); } 50% { transform:scale(1.08); } 100% { transform:scale(1); } }
    .animate-icon { animation:pulse 0.5s ease; }
    @media (max-width:700px){ .estimator-container { padding:20px 14px 40px; } .estimator-form { padding:20px 18px 16px; } .result-area { padding:20px 16px; } .form-row-est { flex-direction:column; gap:16px; align-items:stretch; } .estimator-header h2 { font-size:1.8rem; } .estimator-header p { padding:0 8px; } .form-group-est { min-width:0; width:100%; } .form-group-est select { min-width:100%; } .judgment-card { padding:20px 16px; } }

    /* ===== BADGE EDITOR ===== */
    .badge-editor-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; background:var(--panel-bg); padding:12px 16px; border-radius:var(--radius-lg); margin-bottom:8px; }
    .badge-editor-row input, .badge-editor-row select { padding:6px 10px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:var(--fs-sm); background:white; }
    .badge-editor-row .badge-preview { display:flex; align-items:center; gap:6px; background:white; padding:4px 12px 4px 8px; border-radius:var(--radius-pill); border:1px solid var(--border); font-size:var(--fs-xs); font-weight:700; color:var(--navy); white-space:nowrap; }
    .badge-editor-row .badge-preview img { height:22px; width:auto; max-width:50px; object-fit:contain; }
    .badge-file-upload { display:flex; align-items:center; gap:6px; }
    .badge-file-upload input[type="file"] { font-size:var(--fs-xs); padding:4px 6px; border:1px solid #d1d5db; border-radius:var(--radius-sm); background:white; max-width:150px; }

    /* ===== COUNTRY ADMIN ===== */
    .country-admin-item { background:var(--panel-bg); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:12px; border-left:4px solid var(--teal); position:relative; }
    .country-admin-item .country-header { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
    .country-admin-item .country-header input { padding:6px 10px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:var(--fs-base); }
    .country-admin-item .country-header .flag-input { width:50px; text-align:center; font-size:20px; }
    .country-admin-item .country-header .name-input { flex:1; min-width:120px; }
    .country-admin-item .country-header .savings-input { width:80px; }
    .country-admin-item .country-header .price-input { flex:1; min-width:100px; }
    .country-clinics-list { padding-left:20px; margin-top:8px; }
    .country-clinic-item { display:flex; gap:8px; align-items:center; background:white; padding:8px 12px; border-radius:var(--radius-sm); margin-bottom:6px; border:1px solid var(--border); flex-wrap:wrap; }
    .country-clinic-item input { padding:4px 8px; border:1.5px solid var(--border); border-radius:var(--radius-xs); font-size:var(--fs-sm); }
    .country-clinic-item .clinic-name-input { flex:1; min-width:100px; }
    .country-clinic-item .clinic-city-input { width:80px; }
    .country-clinic-item .clinic-rating-input { width:50px; }
    .country-clinic-item .clinic-reviews-input { width:60px; }
    .country-clinic-item .clinic-desc-input { flex:1; min-width:120px; }
    .country-clinic-item .clinic-treatments { width:100%; margin:6px 0; display:flex; flex-wrap:wrap; gap:6px; }
    .country-clinic-item .clinic-treatments .treatment-row { display:flex; gap:4px; align-items:center; flex:1; min-width:120px; }
    .country-clinic-item .clinic-treatments .treatment-row input { flex:1; min-width:60px; padding:4px 8px; border:1.5px solid var(--border); border-radius:var(--radius-xs); font-size:var(--fs-sm); }
    .country-clinic-item .clinic-treatments .treatment-row input.treatment-val { width:70px; flex:0 0 70px; }

    /* ===== RESPONSIVE ===== */
    @media(max-width:1024px){ .checkout-body { grid-template-columns:340px 1fr; gap:24px; padding:32px 20px 50px; } .form-panel { padding:30px 28px; } .summary-card, .inclusions-card { padding:22px; } }
    @media(max-width:800px){ .checkout-body { grid-template-columns:1fr; gap:20px; padding:24px 16px 44px; } .summary-panel { position:static; display:contents; } .summary-card { order:1; } .form-panel { order:2; } .inclusions-card { order:3; } .summary-card, .inclusions-card { padding:20px; } header { padding:0 16px; flex-wrap:wrap; height:auto; min-height:68px; gap:8px; } .header-left { flex-wrap:wrap; gap:10px; } .header-badges { margin-left:0; margin-right:0; width:100%; justify-content:flex-start; flex-wrap:wrap; } .checkout-header-bar { padding:14px 16px; } .form-panel { padding:24px 20px; } .form-row { grid-template-columns:1fr; } .hero h1 { font-size:26px; } .hero-state-select { font-size:20px; padding:7px 36px 7px 16px; } .filter-toolbar,.cards-wrapper { padding-left:16px; padding-right:16px; } .country-hero { padding:36px 16px 28px; } .country-hero h2 { font-size:26px; } .steps-bar { flex-direction:column; gap:12px; padding:20px 16px; } .step-connector { display:none; } .clinics-wrapper { padding:12px 16px 40px; } #what-page .container, #cost-page .container { padding:24px 20px; } #what-page h2, #cost-page h2 { font-size:26px; } .country-admin-item .country-header { flex-direction:column; align-items:stretch; } .country-clinic-item .clinic-treatments .treatment-row { min-width:100%; } }
    /* Fluid pass covering everything from small phones up through small tablets (≤900px) in ONE
       breakpoint. Earlier this was split across a plain "stack to 1 column" rule at 800px and a
       separate fixed-pixel redesign at 600px — anything between 601-1024px (and any device that
       reports a width the two breakpoints didn't line up on) fell into a gap and still got the
       cramped 3-column desktop grid, or a fixed 132px image that didn't shrink further on very
       narrow phones. clamp() below scales the image, gaps and font sizes continuously with the
       viewport instead of jumping at fixed pixel cliffs, so there's no dead zone at any width. */
    @media(max-width:900px){
      header { padding:0 16px; height:auto; min-height:68px; }
      .nav-right { flex-shrink:1; flex-basis:100%; min-width:0; justify-content:center; gap:12px 16px; padding:10px 0; }
      .hero { padding:clamp(22px,5vw,28px) 16px clamp(18px,4vw,22px); }
      .hero h1 { font-size:clamp(22px,5vw,26px); margin-bottom:10px; }
      .hero-state-select { font-size:clamp(18px,4.2vw,22px); padding:7px 34px 7px 16px; background-position:right 14px center; }
      .hero-eyebrow { margin-bottom:12px; }
      .filter-toolbar { padding:clamp(12px,3vw,16px) clamp(12px,3vw,16px) 6px; gap:8px; }
      .cards-wrapper { padding:8px clamp(12px,3vw,16px) 44px; gap:clamp(10px,2.5vw,14px); }
      /* Text on the left, a thumbnail pinned to the top-right corner. Price/badge form a compact
         strip under the title, then the button/note/reserved-count each get their own full-width
         row. card-cta is unwrapped via display:contents so the image can sit in its own top-right
         grid cell instead of being stuck below the button. */
      .card {
        grid-template-columns: 1fr clamp(180px,40vw,264px);
        grid-template-areas: "center img" "meta meta" "btn btn" "note note" "badge badge";
        align-items: start;
        column-gap: clamp(10px,3vw,14px);
        row-gap: clamp(8px,2vw,10px);
        padding: clamp(12px,3vw,14px) clamp(12px,3vw,14px) clamp(14px,3.5vw,16px);
        border-radius: var(--radius-lg);
      }
      .card-center { grid-area: center; text-align:left; min-width:0; }
      /* Badge + price now form their own boxed "highlight panel" instead of a plain bordered row —
         this is the primary fix for cards looking cramped/hard-to-read on phones: the badge and
         price get a dedicated visual container that pops against the rest of the card, and the
         countdown timer (secondary info) drops to its own smaller, muted line beneath them. */
      .card-left {
        grid-area: meta; display:flex; align-items:center; flex-wrap:wrap;
        gap:6px clamp(10px,3vw,14px);
        margin-top:2px; padding:clamp(10px,3vw,12px) clamp(12px,3.5vw,14px);
        background:var(--teal-light); border:1px solid rgba(0,150,160,.18); border-radius:var(--radius-md);
      }
      .card-left .service-badge, .card-left .price-block, .card-left .countdown-grid { margin-bottom:0; }
      .card-left .countdown-grid { flex-basis:100%; justify-content:flex-start; margin-top:4px; padding-top:6px; border-top:1px dashed rgba(0,150,160,.25); opacity:.85; }
      .card-left .scarcity-note { flex-basis:100%; max-width:none; margin-top:2px; }
      .card-cta { display: contents; }
      .cta-implant-img {
        grid-area: img; justify-self:end; width:clamp(180px,40vw,264px); height:clamp(180px,40vw,264px); align-self:start; margin-bottom:0;
        background:var(--panel-bg); border-radius:var(--radius-md); overflow:hidden;
        display:flex; align-items:center; justify-content:center;
      }
      .cta-implant-img img { width:100%; height:100%; max-width:none; aspect-ratio:auto; object-fit:contain; border-radius:0; }
      .reserve-btn { grid-area: btn; padding:clamp(11px,3vw,13px) 0; font-size:clamp(12px,3vw,13px); margin-bottom:0; }
      .coupon-note { grid-area: note; font-size:clamp(10px,2.5vw,11px); margin-bottom:0; line-height:1.4; }
      .reserved-badge { grid-area: badge; font-size:clamp(10px,2.5vw,11px); padding:4px 10px; justify-self:start; }
      .rating-row,.coupons-left,.views-pill { justify-content:flex-start; }
      /* Service badge: bigger, bolder, uppercase pill so "All-On-4" reads instantly at a glance. */
      .service-badge { font-size:clamp(13px,3.8vw,15px); font-weight:800; padding:6px 14px; letter-spacing:.4px; text-transform:uppercase; background:var(--white); box-shadow:0 1px 4px rgba(0,150,160,.18); }
      .provider-text { display:none; }
      /* Price: the single most important number on the card — sized to dominate the row. */
      .price-block { gap:7px; align-items:baseline; }
      .price-now { font-size:clamp(23px,6.2vw,28px); letter-spacing:-.4px; }
      .price-was { font-size:clamp(12px,3vw,13px); }
      .countdown-grid { gap:4px; }
      .cd-unit { gap:2px; }
      .cd-digit { width:clamp(24px,5.5vw,26px); height:clamp(22px,5vw,24px); font-size:clamp(10px,2.5vw,11px); }
      .cd-label { font-size:7px; }
      .clinic-blur { margin:0 0 5px; width:110px; height:10px; }
      /* City name: the second anchor point, right above the badge/price panel. */
      .city-name { font-size:clamp(17px,4.8vw,20px); margin-bottom:6px; letter-spacing:-.2px; }
      .rating-row { margin-bottom:3px; }
      .review-count { margin-bottom:5px; font-size:11px; }
      .views-pill { margin-bottom:5px; padding:3px 8px; font-size:10px; }
      .coupons-left { font-size:11px; }

      .clinics-wrapper { padding:10px clamp(12px,3vw,16px) 44px; gap:clamp(10px,2.5vw,14px); }
      .clinic-card { grid-template-columns:1fr; padding:clamp(12px,3vw,16px); gap:10px; border-radius:var(--radius-lg); }
      .cc-name { font-size:clamp(14px,3.5vw,16px); }
      .cc-location { font-size:11px; }
      .cc-rating-row { margin-bottom:8px; }
      .cc-description { font-size:clamp(11px,2.8vw,12px); margin-bottom:10px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
      .cc-prices { grid-template-columns:repeat(2,1fr); gap:6px; margin-bottom:6px; }
      .cc-price-pill { padding:7px 8px; }
      .cc-price-label { font-size:9px; }
      .cc-price-val { font-size:14px; }
      .cc-treatments-count { font-size:10px; }
      .cc-right { flex-direction:row; flex-wrap:wrap; width:100%; min-width:0; gap:8px; align-items:center; text-align:left; }
      .contact-btn { width:auto; flex:1 1 130px; padding:11px 14px; font-size:12px; }
      .get-quote-link { flex:0 0 auto; justify-content:center; }
      .cc-savings-pill { width:auto; flex:1 1 100%; order:1; }
    }
    @media(max-width:420px){ .checkout-body { padding:18px 12px 36px; gap:16px; } .summary-card, .inclusions-card { padding:16px; border-radius:var(--radius-lg); } .form-panel { padding:20px 16px; border-radius:var(--radius-lg); } .form-panel h2 { font-size:20px; } .summary-card h3 { font-size:15px; } .coupon-total .ct-val { font-size:24px; } }

    /* ===== SUCCESS PAGE ===== */
    #success-page { display:none; min-height:60vh; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:60px 24px; }
    .success-icon { width:72px; height:72px; background:var(--green-light); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
    .success-icon svg { color:var(--green); }
    #success-page h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:var(--fs-3xl); font-weight:800; color:var(--navy); margin-bottom:10px; }
    #success-page p { font-size:15px; color:var(--muted); max-width:400px; line-height:1.65; }
    /* Note: the emailed "coupon" voucher (admin Leads preview + email HTML) is built with fully
       inline styles in buildCouponHTML() — not page CSS classes — since that markup gets pasted
       raw into EmailJS templates that have no access to this stylesheet. See that function. */

    /* ============================================================
       LEAD MATCHING WIZARD — experimental sunk-cost / cognitive-commitment
       funnel. Every piece below is toggled live from Admin → "Lead Wizard
       (Test Features)" via appData.wizardConfig. Safe to ignore/delete this
       whole block if the feature is rejected after review.
       ============================================================ */
    .wizard-trust-row { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:20px; padding:12px 16px; background:var(--teal-light); border-radius:var(--radius-md); }
    .wizard-trust-row span { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; color:var(--teal-dark); }
    .wizard-trust-row i { color:var(--green); }
    .wizard-social-proof-row { display:flex; align-items:center; justify-content:center; gap:8px; background:var(--panel-bg); border:1px dashed var(--border); border-radius:var(--radius-md); padding:10px 14px; margin:4px 0 18px; font-size:var(--fs-sm); font-weight:600; color:var(--navy); text-align:center; flex-wrap:wrap; }
    .wizard-social-proof-row .stars { color:var(--star); letter-spacing:1px; }

    .wizard-progress-wrap { margin-bottom:22px; }
    .wizard-progress-label { font-size:var(--fs-sm); font-weight:700; color:var(--muted); margin-bottom:6px; text-align:center; }
    .wizard-progress-segments, .checkout-progress-segments { display:flex; align-items:center; justify-content:center; gap:6px; }
    .wizard-progress-segment { width:100%; max-width:56px; height:6px; border-radius:var(--radius-pill); background:var(--border); transition:background-color .45s ease; }
    .wizard-progress-segment.filled { background:var(--teal); }

    /* ===== Subtle micro-animations — quality signals, not distractions. Kept slow/low-amplitude
       on purpose per design note: reinforce polish, never fight for attention. ===== */
    @keyframes mmqSoftPulse { 0%{ transform:scale(1); } 50%{ transform:scale(1.015); } 100%{ transform:scale(1); } }
    .summary-card.mmq-pulse-in { animation:mmqSoftPulse .7s ease-out; }
    @keyframes mmqFadeInUp { from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
    .wizard-trust-row span { animation:mmqFadeInUp .45s ease-out both; }
    .wizard-trust-row span:nth-child(1){ animation-delay:.02s; }
    .wizard-trust-row span:nth-child(2){ animation-delay:.09s; }
    .wizard-trust-row span:nth-child(3){ animation-delay:.16s; }
    .wizard-trust-row span:nth-child(4){ animation-delay:.23s; }
    .wizard-trust-row span:nth-child(5){ animation-delay:.30s; }
    @keyframes mmqCtaGlow { 0%,88%,100%{ box-shadow:0 4px 14px rgba(0,144,170,0.18); } 94%{ box-shadow:0 4px 22px rgba(0,144,170,0.42); } }
    #checkoutSubmitBtn { animation:mmqCtaGlow 4s ease-in-out infinite; }
    .wizard-progress-bar-track { flex:1; height:8px; border-radius:var(--radius-pill); background:var(--border); overflow:hidden; }
    .wizard-progress-bar-fill { height:100%; background:var(--teal); transition:width .3s ease; }

    .wizard-step-title { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:20px; font-weight:800; color:var(--navy); margin-bottom:16px; text-align:center; }
    .wizard-options-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:8px; }
    .wizard-option-tile {
      display:flex; align-items:center; justify-content:center; text-align:center; min-height:56px; padding:14px 12px;
      background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-md);
      font-size:var(--fs-md); font-weight:600; color:var(--text); cursor:pointer; transition:all .15s;
      font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    }
    .wizard-option-tile:hover { border-color:var(--teal); background:var(--teal-light); }
    .wizard-option-tile.selected { border-color:var(--teal); background:var(--teal); color:#fff; }
    .wizard-skip-link { display:block; text-align:center; margin-top:14px; font-size:var(--fs-sm); color:var(--muted); text-decoration:underline; cursor:pointer; background:none; border:none; font-family:inherit; }
    .wizard-skip-link:hover { color:var(--teal-dark); }

    .wizard-nav-row, .checkout-step-nav { display:flex; justify-content:space-between; gap:12px; margin-top:16px; }
    .wizard-btn-primary {
      flex:1; background:var(--blue-btn); color:#fff; border:none; border-radius:var(--radius-lg); padding:14px 0;
      font-size:var(--fs-md); font-weight:800; letter-spacing:.5px; cursor:pointer; transition:background .2s;
      font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
      display:flex; align-items:center; justify-content:center; text-align:center;
    }
    .wizard-btn-primary:hover { background:var(--blue-btn-hover); }
    .wizard-btn-secondary {
      background:var(--white); color:var(--navy); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:14px 22px;
      font-size:var(--fs-md); font-weight:700; cursor:pointer; transition:all .2s;
      font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    }
    .wizard-btn-secondary:hover { border-color:var(--teal); color:var(--teal-dark); }

    .wizard-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(10,15,25,0.6); backdrop-filter:blur(2px); align-items:center; justify-content:center; z-index:10000; padding:clamp(10px,4vw,24px); box-sizing:border-box; }
    .wizard-overlay.active { display:flex; }
    .wizard-modal { position:relative; max-width:560px; width:100%; max-height:92vh; overflow-y:auto; background:var(--white); border-radius:var(--radius-xl); padding:clamp(24px,4vw,40px); box-shadow:0 25px 60px rgba(0,0,0,0.4); animation:wizardIn .2s ease; box-sizing:border-box; }
    @keyframes wizardIn { 0%{ transform:scale(.95); opacity:.5; } 100%{ transform:scale(1); opacity:1; } }
    .wizard-close { position:absolute; top:14px; right:14px; background:var(--panel-bg); border:1px solid var(--border); border-radius:50%; width:32px; height:32px; font-size:15px; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
    .wizard-close:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
    .wizard-step { display:none; }
    .wizard-input-row { margin-bottom:6px; }

    .wizard-final { display:none; text-align:center; padding:10px 0; }
    .wizard-final-icon { width:56px; height:56px; border-radius:50%; background:var(--green-light); color:var(--green-dark); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 16px; }
    .wizard-final h3 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:22px; font-weight:800; color:var(--navy); margin-bottom:10px; }
    .wizard-final p { color:var(--muted); font-size:var(--fs-md); margin-bottom:6px; }

    /* Independent popup, not part of the wizard modal's own layout flow — its own fixed, centered,
       dimmed overlay that sits ON TOP of the wizard (higher z-index) instead of appearing squeezed
       in at the bottom of whichever step the patient is currently on. */
    .wizard-exit-overlay { display:none; position:fixed; inset:0; background:rgba(10,15,25,0.55); align-items:center; justify-content:center; z-index:10001; padding:clamp(10px,4vw,24px); box-sizing:border-box; }
    .wizard-exit-overlay.active { display:flex; }
    .wizard-exit-panel { width:100%; max-width:420px; padding:24px; background:#FFF7ED; border:1px solid #FDDCAA; border-radius:var(--radius-xl); box-shadow:0 25px 60px rgba(0,0,0,0.35); box-sizing:border-box; animation:wizardIn .2s ease; }
    .wizard-exit-panel h4 { font-size:var(--fs-lg); font-weight:800; color:#92400E; margin-bottom:6px; }
    .wizard-exit-panel p { font-size:var(--fs-sm); color:#92400E; margin-bottom:12px; }
    .wizard-exit-row { display:flex; gap:8px; flex-wrap:wrap; }
    .wizard-exit-row input { flex:1; min-width:160px; }

    /* Floating "Start Matching" CTA */
    .floating-cta { display:none; position:fixed; right:22px; bottom:22px; z-index:500; align-items:center; gap:12px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:0 12px 32px rgba(26,35,64,0.18); padding:16px 18px 16px 16px; max-width:290px; }
    .floating-cta-icon { width:40px; height:40px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; animation:floatPulse 2.4s ease-in-out infinite; }
    @keyframes floatPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(0,181,216,0.4); } 50%{ box-shadow:0 0 0 8px rgba(0,181,216,0); } }
    .floating-cta-body { flex:1; min-width:0; }
    .floating-cta-title { font-size:var(--fs-sm); font-weight:700; color:var(--navy); margin-bottom:2px; }
    .floating-cta-sub { font-size:var(--fs-xs); color:var(--muted); margin-bottom:8px; line-height:1.4; }
    .floating-cta-btn { display:inline-block; background:var(--blue-btn); color:#fff; font-size:var(--fs-xs); font-weight:800; padding:8px 14px; border-radius:var(--radius-pill); border:none; cursor:pointer; }
    .floating-cta-btn:hover { background:var(--blue-btn-hover); }
    .floating-cta-close { position:absolute; top:6px; right:8px; background:none; border:none; color:var(--muted); font-size:13px; cursor:pointer; padding:4px; line-height:1; }
    .floating-cta-close:hover { color:var(--red-link); }
    @media (max-width:640px){ .floating-cta { left:16px; right:16px; max-width:none; bottom:16px; } }

    /* Hero CTA button */
    .hero-wizard-cta { display:none; align-items:center; gap:8px; background:var(--blue-btn); color:#fff; font-weight:800; font-size:var(--fs-md); padding:14px 30px; border-radius:var(--radius-pill); border:none; cursor:pointer; margin:18px auto 0; box-shadow:0 8px 20px -6px rgba(2,122,130,0.45); transition:background .2s, transform .15s, box-shadow .2s; font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .hero-wizard-cta:hover { background:var(--blue-btn-hover); transform:translateY(-1px); }

    /* ===== TREATMENT PLANNER ===== */
    .planner-trigger-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--navy); color:#fff; border:none; padding:11px; border-radius:var(--radius-md); font-weight:700; font-size:var(--fs-sm); cursor:pointer; margin-top:10px; transition:background .2s, transform .15s; }
    .planner-trigger-btn:hover { background:#14284a; transform:translateY(-1px); }
    /* Solid, non-blurred backdrop — backdrop-filter previously let the homepage show through and
       re-render live as the cursor passed over hover-reactive elements behind it, looking like the
       background was "moving with the mouse." A solid dark overlay fully hides the page beneath. */
    .planner-overlay { display:none; position:fixed; inset:0; background:rgba(8,13,22,0.88); align-items:center; justify-content:center; z-index:10500; padding:clamp(8px,3vw,24px); box-sizing:border-box; }
    .planner-overlay.active { display:flex; }
    .planner-modal { position:relative; width:100%; max-width:1020px; max-height:94vh; background:var(--white,#fff); border-radius:var(--radius-xl); box-shadow:0 30px 70px rgba(0,0,0,0.45); display:flex; flex-direction:column; overflow:hidden; animation:plannerIn .2s ease; }
    @keyframes plannerIn { 0%{ transform:scale(.96); opacity:.4; } 100%{ transform:scale(1); opacity:1; } }
    .planner-close { position:absolute; top:14px; right:14px; z-index:5; background:rgba(255,255,255,0.92); border:1px solid var(--border); border-radius:50%; width:34px; height:34px; font-size:15px; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
    .planner-close:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
    .planner-head { padding:22px 60px 16px 26px; border-bottom:1px solid var(--border); flex-shrink:0; }
    .planner-head h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:20px; font-weight:800; color:var(--navy); display:flex; align-items:center; gap:10px; margin-bottom:12px; }
    .planner-head h2 .plh-clinic { font-size:var(--fs-sm); font-weight:600; color:var(--muted); }
    .planner-progress-track { display:flex; align-items:center; gap:6px; }
    .planner-progress-step { flex:1; height:6px; border-radius:var(--radius-pill); background:var(--border); position:relative; }
    .planner-progress-step.done, .planner-progress-step.current { background:var(--teal); }
    .planner-progress-labels { display:flex; justify-content:space-between; margin-top:8px; font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
    .planner-progress-labels span.active { color:var(--teal-dark); }
    .planner-body-wrap { flex:1; overflow-y:auto; display:grid; grid-template-columns:1fr 300px; gap:0; }
    /* Treatment Planner only: live receipt-style summary (paper texture, dashed rules, monospace
       figures) — matches the homepage estimator preview's look. Scoped to #plannerSummarySticky by
       ID and uses its own .plnr-receipt-* classes so the Financing Calculator's summary (which
       reuses the shared .planner-summary-line/.planner-summary-total classes) is untouched. */
    #plannerSummarySticky { background:#fcfaf7; background-image:repeating-linear-gradient(180deg,transparent,transparent 30px,rgba(26,35,64,0.015) 30px,rgba(26,35,64,0.015) 31px); }
    .plnr-receipt-header { text-align:center; padding-bottom:12px; border-bottom:2px dashed var(--border); margin-bottom:8px; }
    .plnr-receipt-brand { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:13px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--navy); }
    .plnr-receipt-brand span { color:var(--teal-dark); }
    .plnr-receipt-subhead { font-size:9px; font-weight:600; color:var(--muted); letter-spacing:.4px; text-transform:uppercase; margin-top:3px; }
    .plnr-receipt-line { display:flex; justify-content:space-between; gap:8px; font-size:var(--fs-xs); font-family:Consolas,'Liberation Mono','SFMono-Regular',monospace; color:#4a5b6f; padding:6px 0; border-bottom:1px dotted var(--border); }
    .plnr-receipt-line span:first-child { color:#4a5b6f; }
    .plnr-receipt-line .amt { font-weight:700; color:var(--navy); }
    .plnr-receipt-divider { text-align:center; margin:8px 0 4px; color:#cdd6e0; font-size:var(--fs-xs); letter-spacing:2px; user-select:none; }
    .plnr-receipt-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; padding-top:12px; border-top:2px solid var(--navy); }
    .plnr-receipt-total .lbl { font-weight:800; color:var(--navy); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.5px; }
    .plnr-receipt-total .val { font-weight:800; color:var(--teal-dark); font-size:22px; font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .plnr-receipt-empty { color:var(--muted); font-size:var(--fs-sm); text-align:center; padding:20px 0; line-height:1.5; }
    /* Treatment Planner only: every section (Implants, Surgical, Sedation, Temporary, Final,
       Review) renders at once in a single continuous scroll — no step-by-step paging. Each section
       gets a divider so it still reads as distinct steps in sequence. */
    .planner-section { padding-bottom:30px; margin-bottom:30px; border-bottom:1px dashed var(--border); }
    .planner-section:last-child { padding-bottom:0; margin-bottom:0; border-bottom:none; }
    .planner-step-area { padding:24px 26px 32px; overflow-y:auto; }
    .planner-step-heading { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
    .planner-step-heading .psh-icon { width:38px; height:38px; border-radius:50%; background:var(--teal-light); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
    .planner-step-heading h3 { font-size:18px; font-weight:800; color:var(--navy); }
    .planner-step-sub { font-size:var(--fs-sm); color:var(--muted); margin:4px 0 18px; line-height:1.5; }
    .planner-recommend { display:flex; align-items:flex-start; gap:10px; background:#EFF6FF; border:1px solid #BFDBFE; border-radius:var(--radius-md); padding:12px 14px; margin-bottom:18px; font-size:var(--fs-sm); color:#1E4E8C; }
    .planner-recommend i { margin-top:2px; }
    /* Admin-editable guidance note shown under the prices on the Implants, Surgical, Sedation and
       Temporary steps, to help patients pick the right option. */
    .planner-step-note { display:flex; align-items:flex-start; gap:10px; background:var(--teal-light); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; margin-top:16px; font-size:var(--fs-sm); color:var(--navy); line-height:1.55; }
    .planner-step-note i { color:var(--teal-dark); margin-top:2px; flex-shrink:0; }
    .planner-line-card { display:flex; align-items:center; gap:14px; background:var(--panel-bg); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:10px; flex-wrap:wrap; }
    .planner-line-info { flex:1; min-width:140px; }
    .planner-line-info .pli-name { font-weight:700; color:var(--navy); font-size:var(--fs-base); display:flex; align-items:center; gap:6px; }
    .planner-line-info .pli-desc { font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
    .pli-type-tabs { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
    .pli-type-tabs button { background:white; border:1.5px solid var(--border); color:var(--navy); font-weight:600; font-size:11px; padding:5px 10px; border-radius:var(--radius-pill); cursor:pointer; transition:.15s; }
    .pli-type-tabs button.active { background:var(--teal); border-color:var(--teal); color:#fff; }
    .planner-qty-stepper { display:flex; align-items:center; gap:8px; background:white; border:1.5px solid var(--border); border-radius:var(--radius-pill); padding:4px; }
    .planner-qty-stepper button { width:26px; height:26px; border-radius:50%; border:none; background:var(--panel-bg); color:var(--navy); font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
    .planner-qty-stepper button:hover { background:var(--teal-light); }
    .planner-qty-stepper span { min-width:22px; text-align:center; font-weight:700; color:var(--navy); }
    .planner-line-x { color:var(--muted); font-size:var(--fs-sm); }
    .planner-line-price { font-size:var(--fs-sm); color:var(--muted); min-width:70px; text-align:right; }
    .planner-line-subtotal { font-weight:800; color:var(--navy); min-width:80px; text-align:right; font-size:var(--fs-base); }
    .planner-option-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:18px; }
    .planner-option-card { position:relative; text-align:left; background:white; border:2px solid var(--border); border-radius:var(--radius-lg); padding:16px; cursor:pointer; transition:.15s; }
    .planner-option-card:hover { border-color:var(--teal); box-shadow:0 4px 14px rgba(0,0,0,0.06); }
    .planner-option-card.selected { border-color:var(--teal); background:var(--teal-light); box-shadow:0 6px 16px rgba(0,181,216,0.15); }
    .planner-option-card .poc-check { position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; background:var(--teal); color:#fff; display:none; align-items:center; justify-content:center; font-size:10px; }
    .planner-option-card.selected .poc-check { display:flex; }
    .planner-option-card .poc-media { width:100%; height:86px; border-radius:var(--radius-md); background:linear-gradient(135deg,#e8f0f7,#f4f7fc); display:flex; align-items:center; justify-content:center; color:#a9c2d3; font-size:26px; margin-bottom:10px; overflow:hidden; }
    .planner-option-card .poc-media img { width:100%; height:100%; object-fit:cover; }
    .planner-option-card .poc-title { font-weight:700; color:var(--navy); font-size:var(--fs-base); margin-bottom:3px; }
    .planner-option-card .poc-desc { font-size:var(--fs-xs); color:var(--muted); line-height:1.4; margin-bottom:8px; min-height:32px; }
    .planner-option-card .poc-meta { font-size:10px; color:var(--teal-dark); font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px; }
    .planner-option-card .poc-price { font-weight:800; color:var(--navy); font-size:var(--fs-lg); }
    .planner-temp-type-tabs { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
    .planner-temp-type-tabs button { background:var(--panel-bg); border:1.5px solid var(--border); color:var(--navy); font-weight:700; font-size:var(--fs-sm); padding:8px 16px; border-radius:var(--radius-pill); cursor:pointer; transition:.15s; }
    .planner-temp-type-tabs button.active { background:var(--navy); border-color:var(--navy); color:#fff; }
    .planner-bridge-input-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; background:var(--panel-bg); padding:12px 14px; border-radius:var(--radius-md); }
    .planner-summary-sticky { position:sticky; top:0; align-self:start; background:var(--panel-bg); border-left:1px solid var(--border); padding:22px 20px; height:100%; overflow-y:auto; }
    .planner-summary-sticky h4 { font-size:var(--fs-base); font-weight:800; color:var(--navy); margin-bottom:14px; display:flex; align-items:center; gap:6px; }
    .planner-summary-line { display:flex; justify-content:space-between; gap:8px; font-size:var(--fs-sm); color:var(--text); padding:6px 0; border-bottom:1px dashed var(--border); }
    .planner-summary-line span:last-child { font-weight:700; color:var(--navy); flex-shrink:0; }
    .planner-summary-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding-top:14px; border-top:2px solid var(--border); }
    .planner-summary-total .pst-label { font-weight:700; color:var(--navy); font-size:var(--fs-base); }
    .planner-summary-total .pst-val { font-weight:800; color:var(--teal-dark); font-size:22px; font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .planner-footer-nav { position:sticky; bottom:0; background:white; border-top:1px solid var(--border); padding:14px 26px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-shrink:0; grid-column:1/-1; }
    .planner-nav-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:var(--radius-pill); font-weight:700; font-size:var(--fs-sm); cursor:pointer; border:none; transition:.15s; }
    .planner-nav-btn.primary { background:var(--blue-btn); color:#fff; }
    .planner-nav-btn.primary:hover { background:var(--blue-btn-hover); }
    .planner-nav-btn.ghost { background:transparent; color:var(--muted); border:1.5px solid var(--border); }
    .planner-nav-btn.ghost:hover { border-color:var(--teal); color:var(--teal-dark); }
    .planner-nav-btn:disabled { opacity:.4; cursor:not-allowed; }
    .planner-review-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin-bottom:20px; }
    .planner-review-line { display:flex; justify-content:space-between; font-size:var(--fs-sm); padding:8px 0; border-bottom:1px solid var(--border); }
    .planner-review-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:20px; }
    .planner-action-btn { display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--panel-bg); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:14px 10px; cursor:pointer; font-size:var(--fs-xs); font-weight:700; color:var(--navy); transition:.15s; }
    .planner-action-btn:hover { border-color:var(--teal); background:var(--teal-light); }
    .planner-action-btn i { font-size:18px; color:var(--teal-dark); }
    .planner-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:12px 22px; border-radius:var(--radius-pill); font-size:var(--fs-sm); font-weight:600; z-index:10600; box-shadow:0 8px 24px rgba(0,0,0,0.25); opacity:0; pointer-events:none; transition:opacity .25s; }
    .planner-toast.show { opacity:1; }
    .planner-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:60px 20px; color:var(--muted); font-size:var(--fs-md); }
    [data-planner-tooltip] { position:relative; cursor:help; }
    [data-planner-tooltip]:hover:after { content:attr(data-planner-tooltip); position:absolute; bottom:130%; left:0; background:var(--navy); color:#fff; padding:6px 12px; border-radius:var(--radius-sm); font-size:11px; white-space:normal; width:200px; z-index:20; box-shadow:0 6px 16px rgba(0,0,0,0.2); }
    @media (max-width:900px){
      .planner-body-wrap { grid-template-columns:1fr; }
      .planner-summary-sticky { position:relative; border-left:none; border-top:1px solid var(--border); }
      .planner-step-area { padding:20px 18px 24px; }
      .planner-footer-nav { padding:12px 18px; }
    }
    /* On narrow phones, six step labels crammed side-by-side become unreadable —
       show only the current step's name instead, centered under the progress bar. */
    @media (max-width:520px){
      .planner-progress-labels { justify-content:center; }
      .planner-progress-labels span { display:none; }
      .planner-progress-labels span.active { display:inline-block; font-size:12px; }
    }
    @media print {
      body * { visibility:hidden; }
      #plannerPrintArea, #plannerPrintArea *, #financingPrintArea, #financingPrintArea * { visibility:visible; }
      #plannerPrintArea, #financingPrintArea { position:absolute; top:0; left:0; width:100%; padding:24px; }
    }

    /* ===== TREATMENT PLANNING ENGINE (homepage promo section) ===== */
    .tp-homepage-section { background:var(--cream); padding:56px 24px; position:relative; overflow:hidden; }
    .tp-homepage-section > *:not(.mmq-bubble-field) { position:relative; z-index:1; }
    .tp-homepage-inner { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center; }
    .tp-homepage-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--teal-dark); font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
    .tp-homepage-text h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(24px,3.2vw,32px); font-weight:800; color:var(--navy); margin-bottom:14px; line-height:1.25; }
    .tp-homepage-intro { color:var(--muted); font-size:var(--fs-md); line-height:1.6; margin-bottom:18px; }
    .tp-homepage-points { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:8px; }
    .tp-homepage-points li { display:flex; align-items:center; gap:10px; color:var(--text); font-size:var(--fs-base); font-weight:600; }
    .tp-homepage-points li i { color:var(--teal); width:16px; }
    .tp-homepage-cta { display:inline-flex; align-items:center; gap:8px; background:var(--blue-btn); color:#fff; border:none; padding:14px 30px; border-radius:var(--radius-pill); font-weight:800; font-size:var(--fs-md); cursor:pointer; transition:background .2s, transform .15s, box-shadow .2s; box-shadow:0 8px 20px -6px rgba(2,122,130,0.45); }
    .tp-homepage-cta:hover { background:var(--blue-btn-hover); transform:translateY(-1px); }
    .tp-homepage-cta-kicker { font-size:var(--fs-xs); font-weight:700; color:var(--teal-dark); margin-bottom:8px; }
    .tp-homepage-cta-note { font-size:var(--fs-sm); color:var(--muted); line-height:1.55; margin-top:14px; max-width:440px; }
    .tp-homepage-cta-note a { color:var(--teal-dark); font-weight:700; }
    /* ===== Receipt-style itemized preview card ===== */
    .tp-homepage-preview { background:#fcfaf7; border-radius:var(--radius-lg); padding:0; box-shadow:var(--shadow-lg); border:1px solid var(--border); position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.2,0,0,1), box-shadow .4s ease; }
    .tp-homepage-preview:hover { transform:translateY(-4px); box-shadow:0 20px 48px rgba(26,35,64,0.14); }
    .tphp-tag { position:absolute; top:14px; right:14px; background:var(--teal-dark); color:#fff; font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:5px 11px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:4px; z-index:2; }
    .tphp-inner { padding:26px 24px 20px; background:repeating-linear-gradient(180deg,transparent,transparent 30px,rgba(26,35,64,0.015) 30px,rgba(26,35,64,0.015) 31px); }
    .tphp-header { text-align:center; padding-bottom:14px; border-bottom:2px dashed var(--border); margin-bottom:4px; }
    .tphp-brand { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:14px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--navy); }
    .tphp-brand span { color:var(--teal-dark); }
    .tphp-subhead { font-size:10px; font-weight:600; color:var(--muted); letter-spacing:.4px; margin-top:4px; text-transform:uppercase; }
    .tphp-meta { font-family:Consolas,'Liberation Mono','SFMono-Regular',monospace; font-size:10px; color:#8b9aad; margin-top:8px; display:flex; justify-content:center; gap:14px; }
    .tphp-meta .dot { color:var(--border); }
    .tphp-items { margin:12px 0 8px; }
    .tphp-item { display:flex; justify-content:space-between; align-items:flex-start; padding:9px 0; border-bottom:1px dotted var(--border); cursor:pointer; transition:background .2s ease, padding .2s ease, margin .2s ease; border-radius:var(--radius-xs); }
    .tphp-item:last-child { border-bottom:none; }
    .tphp-item:hover, .tphp-item.open { background:rgba(0,144,170,0.06); margin:0 -8px; padding-left:8px; padding-right:8px; }
    .tphp-item-left { flex:1; min-width:0; }
    .tphp-item-name { font-size:var(--fs-sm); font-weight:700; color:var(--navy); letter-spacing:.2px; }
    .tphp-item-desc { font-size:var(--fs-xs); color:var(--muted); margin-top:1px; }
    .tphp-item-amount { font-family:Consolas,'Liberation Mono','SFMono-Regular',monospace; font-size:var(--fs-base); font-weight:700; color:var(--navy); white-space:nowrap; margin-left:14px; margin-top:2px; }
    .tphp-item-amount.choice { color:var(--teal-dark); font-weight:700; font-size:var(--fs-xs); }
    .tphp-item-detail { max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.25,.46,.45,.94), padding .3s ease, opacity .25s ease; opacity:0; width:100%; }
    .tphp-item.open .tphp-item-detail { max-height:220px; padding-top:8px; opacity:1; overflow-y:auto; }
    .tphp-item-detail ul { list-style:none; padding:0; margin:0; }
    .tphp-item-detail li { font-size:var(--fs-xs); color:#4d6077; padding:2px 0 2px 15px; position:relative; line-height:1.45; }
    .tphp-item-detail li::before { content:'▸'; position:absolute; left:0; color:var(--green); font-weight:700; }
    .tphp-divider { text-align:center; margin:6px 0 4px; color:#cdd6e0; font-size:var(--fs-xs); letter-spacing:2px; user-select:none; }
    .tphp-totals { margin-top:2px; }
    .tphp-total-row { display:flex; justify-content:space-between; padding:3px 0; font-family:Consolas,'Liberation Mono','SFMono-Regular',monospace; font-size:var(--fs-xs); color:#4a5b6f; }
    .tphp-total-row .lbl { text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
    .tphp-total-row .val { font-weight:700; }
    .tphp-total-row.savings .val { color:var(--green); }
    .tphp-total-row.grand { margin-top:8px; padding-top:12px; border-top:2px solid var(--navy); }
    .tphp-total-row.grand .lbl { font-size:var(--fs-xs); font-weight:800; letter-spacing:.6px; color:var(--navy); }
    .tphp-total-row.grand .val { font-size:24px; font-weight:800; color:var(--teal-dark); font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .tphp-footnote { font-size:9px; color:#a8b6c8; text-align:right; margin-top:2px; }
    .tphp-footer { margin-top:18px; padding-top:12px; border-top:1px dashed var(--border); text-align:center; }
    .tphp-barcode { display:flex; justify-content:center; align-items:flex-end; height:28px; gap:2px; margin-bottom:4px; }
    .tphp-barcode-line { background:var(--navy); border-radius:1px; width:2px; opacity:.7; }
    .tphp-barcode-id { font-family:Consolas,'Liberation Mono','SFMono-Regular',monospace; font-size:9px; color:#8b9aad; letter-spacing:2px; }
    .tphp-hint { font-size:10px; color:#a8b6c8; margin-top:8px; }
    @media(max-width:900px){ .tp-homepage-inner { grid-template-columns:1fr; gap:28px; } .tp-homepage-inner .tp-homepage-preview { order:2; } .tp-homepage-inner .tp-homepage-text { order:1; } }
    @media(max-width:520px){ .tp-homepage-section { padding:40px 16px; } .tp-homepage-preview { padding:20px 18px; } }
    /* ===== Compact tool preview card (homepage density reduction) =====
       Replaces the old two-column planner+receipt layout above with a single
       small centered card that teases the tool and links out to its own
       dedicated page. The .tphp-*/.tp-homepage-preview rules above are now
       unused on the homepage (kept only in case any other view still
       references them) — nothing here depends on them. */
    .tool-preview-section { background:var(--cream); padding:44px 24px; text-align:center; }
    .tool-preview-card { max-width:560px; margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl); padding:36px 32px; box-shadow:var(--shadow-md); }
    .tool-preview-icon { width:52px; height:52px; border-radius:50%; background:var(--teal-light); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-size:20px; margin:0 auto 14px; }
    .tool-preview-eyebrow { font-size:var(--fs-sm); font-weight:700; color:var(--teal-dark); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
    .tool-preview-title { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(20px,2.6vw,26px); font-weight:800; color:var(--navy); margin-bottom:10px; line-height:1.3; }
    .tool-preview-desc { color:var(--muted); font-size:var(--fs-base); line-height:1.6; max-width:440px; margin:0 auto 20px; }
    .tool-preview-cta { display:inline-flex; align-items:center; gap:8px; background:var(--blue-btn); color:#fff; border:none; padding:14px 30px; border-radius:var(--radius-pill); font-weight:800; font-size:var(--fs-md); text-decoration:none; cursor:pointer; transition:background .2s, transform .15s, box-shadow .2s; box-shadow:0 8px 20px -6px rgba(2,122,130,0.45); }
    .tool-preview-cta:hover { background:var(--blue-btn-hover); transform:translateY(-1px); }
    .tool-preview-note { font-size:var(--fs-sm); color:var(--muted); margin-top:14px; }
    .tool-preview-note a { color:var(--teal-dark); font-weight:700; }
    @media(max-width:520px){ .tool-preview-section { padding:32px 16px; } .tool-preview-card { padding:28px 20px; } }
    /* ===== FINANCING CALCULATOR (homepage promo section) =====
       Light warm-peach section (was a dark navy block) — text/icon colors below are tuned for a
       light ground: coral for the section's own accent (eyebrow, checks, social proof), navy for
       headings/body, teal reserved for the CTA + interactive card so it still reads as "the same
       site" as the teal-led sections around it. */
    .fin-homepage-section { background:var(--peach); padding:56px 24px; position:relative; overflow:hidden; }
    .fin-homepage-section > *:not(.mmq-bubble-field) { position:relative; z-index:1; }
    .fin-homepage-inner { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
    .fin-homepage-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--coral-dark); font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
    .fin-homepage-text h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(24px,3.2vw,32px); font-weight:800; color:var(--navy); margin-bottom:14px; line-height:1.25; }
    .fin-homepage-intro { color:#6B534A; font-size:var(--fs-md); line-height:1.6; margin-bottom:18px; }
    .fin-homepage-points { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:8px; }
    .fin-homepage-points li { display:flex; align-items:center; gap:10px; color:var(--navy); font-size:var(--fs-base); font-weight:600; }
    .fin-homepage-points li i { color:var(--coral-dark); width:16px; }
    .fin-homepage-cta { display:inline-flex; align-items:center; gap:8px; background:var(--blue-btn); color:#fff; border:none; padding:14px 30px; border-radius:var(--radius-pill); font-weight:800; font-size:var(--fs-md); cursor:pointer; transition:background .2s, transform .15s, box-shadow .2s; box-shadow:0 8px 20px -6px rgba(2,122,130,0.45); }
    .fin-homepage-cta:hover { background:var(--blue-btn-hover); transform:translateY(-1px); }
    .fin-homepage-social-proof { display:flex; align-items:center; gap:8px; color:#8A6F66; font-size:var(--fs-sm); font-weight:600; margin:14px 0 0; }
    .fin-homepage-social-proof i { color:var(--coral-dark); }
    .fin-homepage-steps { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0 0; padding:12px 14px; background:rgba(22,51,58,0.05); border-radius:var(--radius-md); font-size:var(--fs-xs); color:var(--navy); font-weight:600; }
    .fin-homepage-steps i { color:var(--coral-dark); font-size:10px; }
    .fin-homepage-cta-note { font-size:var(--fs-sm); color:#6B534A; margin-top:14px; }
    .fin-homepage-cta-note a { color:var(--teal-dark); font-weight:700; }
    .fin-homepage-preview-wrap { position:relative; }
    .fhp-tryit { display:inline-flex; align-items:center; gap:6px; color:var(--coral-dark); font-weight:700; font-size:var(--fs-sm); margin-bottom:10px; }
    .fhp-tryit i { animation:fhpArrowNudge 1.4s ease-in-out infinite; }
    @keyframes fhpArrowNudge { 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
    .fin-homepage-preview { background:#fff; border-radius:var(--radius-xl); padding:26px 24px; box-shadow:0 20px 40px rgba(201,96,61,.18); border:2px solid rgba(0,176,185,.55); animation:fhpGlow 2.6s ease-in-out infinite; }
    @keyframes fhpGlow { 0%,100%{ box-shadow:0 20px 40px rgba(201,96,61,.18), 0 0 0 0 rgba(0,176,185,.45); } 50%{ box-shadow:0 20px 40px rgba(201,96,61,.18), 0 0 0 9px rgba(0,176,185,0); } }
    .fhp-slider-row { margin-bottom:16px; }
    .fhp-slider-label { display:flex; justify-content:space-between; font-size:var(--fs-xs); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; margin-bottom:8px; }
    .fhp-slider-label span:last-child { color:var(--navy); font-weight:800; text-transform:none; letter-spacing:0; }
    .fhp-slider { width:100%; accent-color:var(--teal); cursor:pointer; }
    .fhp-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm); color:var(--muted); }
    .fhp-row:last-of-type { border-bottom:none; }
    .fhp-row span:last-child { font-weight:700; color:var(--navy); }
    .fhp-monthly { text-align:center; padding:10px 0 16px; }
    .fhp-monthly .amt { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:36px; font-weight:800; color:var(--navy); }
    .fhp-monthly .per { font-size:var(--fs-sm); color:var(--muted); font-weight:600; }
    .fhp-monthly .badge { display:inline-block; margin-top:6px; background:var(--green-light); color:var(--green-dark); font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
    @media(max-width:900px){ .fin-homepage-inner { grid-template-columns:1fr; gap:28px; } }
    /* ===== SMILEY BUBBLES — site-wide decorative motif: soft floating circles with a friendly
       smile inside, echoing the brand's "this doesn't have to feel clinical" tone. Purely
       decorative (pointer-events:none, sits at z-index:0 behind real content) and reused across
       the hero, the emotional banner, and a couple of marketing sections for visual cohesion. ===== */
    .mmq-bubble-field { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
    .mmq-bubble { position:absolute; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(22,51,58,0.10); }
    .mmq-bubble svg { display:block; }
    .mmq-bubble--sm { width:44px; height:44px; }
    .mmq-bubble--md { width:68px; height:68px; }
    .mmq-bubble--lg { width:96px; height:96px; }
    .mmq-bubble--xl { width:120px; height:120px; }
    .mmq-bubble--mint { background:#D7F0EE; }
    .mmq-bubble--peach { background:var(--peach); }
    .mmq-bubble--sand { background:#FFEFC7; }
    .mmq-bubble--rose { background:#FFE1E8; }
    .mmq-bubble--sky { background:#E3F3FF; }
    @keyframes mmqFloatA { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-16px) rotate(-4deg); } }
    @keyframes mmqFloatB { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-24px) rotate(5deg); } }
    @keyframes mmqFloatC { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-11px) rotate(-3deg); } }
    .mmq-float-a { animation:mmqFloatA 5.5s ease-in-out infinite; }
    .mmq-float-b { animation:mmqFloatB 6.5s ease-in-out infinite; }
    .mmq-float-c { animation:mmqFloatC 4.8s ease-in-out infinite; }
    .mmq-float-a-rev { animation:mmqFloatA 6s ease-in-out infinite reverse; }
    .mmq-float-b-rev { animation:mmqFloatB 7s ease-in-out infinite reverse; }
    @media(max-width:768px){ .mmq-bubble--xl { width:84px; height:84px; } .mmq-bubble--lg { width:64px; height:64px; } }
    @media(max-width:520px){ .mmq-bubble--hide-mobile { display:none; } }
    @media(prefers-reduced-motion:reduce){ .mmq-bubble { animation:none !important; } }
    @media(max-width:520px){ .fin-homepage-section { padding:40px 16px; } .fin-homepage-preview { padding:20px 18px; } }
    /* ===== BUDGET-BASED MATCHING (homepage promo section) ===== */
    .budget-match-section { background:var(--teal-light); padding:56px 24px; position:relative; overflow:hidden; }
    .budget-match-section > *:not(.mmq-bubble-field) { position:relative; z-index:1; }
    .budget-match-inner { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
    .budget-match-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--teal-dark); font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
    .budget-match-text h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:clamp(24px,3.2vw,32px); font-weight:800; color:var(--navy); margin-bottom:14px; line-height:1.25; }
    .budget-match-intro { color:var(--muted); font-size:var(--fs-md); line-height:1.6; margin-bottom:18px; }
    .budget-match-points { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:8px; }
    .budget-match-points li { display:flex; align-items:center; gap:10px; color:var(--text); font-size:var(--fs-base); font-weight:600; }
    .budget-match-points li i { color:var(--teal); width:16px; }
    .budget-match-cta { display:inline-flex; align-items:center; gap:8px; background:var(--blue-btn); color:#fff; border:none; padding:14px 30px; border-radius:var(--radius-pill); font-weight:800; font-size:var(--fs-md); cursor:pointer; transition:background .2s, transform .15s, box-shadow .2s; box-shadow:0 8px 20px -6px rgba(2,122,130,0.45); }
    .budget-match-cta:hover { background:var(--blue-btn-hover); transform:translateY(-1px); }
    /* "What happens next" line — answers the #1 conversion-killer on lead forms: uncertainty about
       what clicking the button actually commits you to. */
    .budget-match-flow-note { display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-sm); color:var(--navy); font-weight:600; margin-top:14px; line-height:1.5; max-width:440px; }
    .budget-match-flow-note i { color:var(--teal-dark); margin-top:2px; flex-shrink:0; }
    .budget-match-cta-note { display:flex; align-items:flex-start; gap:6px; font-size:var(--fs-xs); color:var(--muted); margin-top:10px; line-height:1.55; max-width:440px; }
    .budget-match-cta-note i { color:var(--teal-dark); margin-top:2px; flex-shrink:0; }
    .budget-match-cta-note a { color:var(--teal-dark); font-weight:700; }
    .budget-match-preview-wrap { position:relative; }
    /* The whole card is a real click target (opens the lead wizard) — hover/focus states give it
       the same affordance as the CTA button so it doesn't look like an inert screenshot. */
    .budget-match-preview { background:#fff; border-radius:var(--radius-xl); padding:26px 24px; box-shadow:var(--shadow-lg); border:1px solid var(--border); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
    .budget-match-preview:hover { transform:translateY(-3px); box-shadow:0 20px 48px rgba(2,122,130,0.18); border-color:var(--teal); }
    .budget-match-preview:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
    .bmp-step-tag { display:inline-block; background:var(--teal); color:#fff; font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:4px 12px; border-radius:var(--radius-pill); margin-bottom:14px; }
    .bmp-label { display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.3px; margin-bottom:14px; }
    .bmp-label i { color:var(--teal-dark); }
    .bmp-optional { text-transform:none; letter-spacing:0; font-weight:500; color:var(--muted); font-size:var(--fs-xs); }
    /* Mirrors the real wizard's budget step exactly (free-text amount + financing checkbox) rather
       than an invented preview design. pointer-events:none so every click passes through to the
       card's own handler above instead of focusing/toggling these look-alike controls. */
    .bmp-input { width:100%; padding:12px 14px; font-size:var(--fs-md); font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; border:2px solid var(--border); border-radius:var(--radius-md); background:var(--panel-bg); color:var(--muted); margin-bottom:12px; pointer-events:none; }
    .bmp-financing-row { display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:600; color:var(--navy); margin-bottom:16px; pointer-events:none; }
    .bmp-financing-row input { width:16px; height:16px; accent-color:var(--teal); flex-shrink:0; }
    .bmp-arrow { text-align:center; color:var(--border); font-size:var(--fs-lg); margin-bottom:12px; }
    .bmp-result { display:flex; align-items:center; gap:8px; background:var(--green-light); color:var(--green-dark); font-size:var(--fs-sm); font-weight:700; padding:12px 16px; border-radius:var(--radius-md); }
    .bmp-result i { color:var(--green); }
    @media(max-width:900px){ .budget-match-inner { grid-template-columns:1fr; gap:28px; } }
    @media(max-width:520px){ .budget-match-section { padding:40px 16px; } .budget-match-preview { padding:20px 18px; } }
    /* ===== FINANCING CALCULATOR (checkout page) ===== */
    .financing-trigger-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--teal-dark); color:#fff; border:none; padding:12px; border-radius:var(--radius-md); font-weight:700; font-size:var(--fs-sm); cursor:pointer; margin-top:12px; transition:background .2s, transform .15s; }
    .financing-trigger-btn:hover { background:#0c8aa8; transform:translateY(-1px); }
    .fin-currency-input-wrap { display:flex; align-items:center; gap:8px; background:var(--panel-bg); padding:8px 20px 8px 22px; border-radius:var(--radius-pill); border:2px solid var(--border); transition:.2s; margin-bottom:16px; }
    .fin-currency-input-wrap:focus-within { border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,181,216,0.12); }
    .fin-currency-input-wrap .fci-symbol { font-weight:700; font-size:22px; color:var(--muted); }
    .fin-currency-input-wrap input { border:none; background:transparent; font-size:32px; font-weight:800; width:180px; padding:10px 0; color:var(--navy); outline:none; font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
    .fin-quick-amounts { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:6px; }
    .fin-quick-btn { background:var(--panel-bg); border:1.5px solid var(--border); padding:9px 20px; border-radius:var(--radius-pill); font-weight:700; font-size:var(--fs-sm); color:var(--navy); cursor:pointer; transition:.15s; }
    .fin-quick-btn:hover { background:var(--teal-light); border-color:var(--teal); color:var(--teal-dark); }
    .fin-quick-btn.active { background:var(--navy); border-color:var(--navy); color:#fff; }
    .fin-toggle-group { display:inline-flex; background:var(--panel-bg); border-radius:var(--radius-pill); border:1px solid var(--border); overflow:hidden; }
    .fin-toggle-group button { background:transparent; border:none; padding:10px 22px; font-weight:700; font-size:var(--fs-sm); cursor:pointer; transition:.15s; color:var(--muted); }
    .fin-toggle-group button.active { background:#fff; color:var(--navy); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
    .fin-down-input-wrap { display:inline-flex; align-items:center; gap:4px; background:#fff; padding:6px 16px 6px 18px; border-radius:var(--radius-pill); border:1.5px solid var(--border); margin-left:12px; }
    .fin-down-input-wrap input { border:none; background:transparent; font-size:18px; font-weight:700; width:100px; padding:6px 0; outline:none; color:var(--navy); }
    .fin-meter-wrap { margin:14px 0 6px; background:var(--panel-bg); border-radius:var(--radius-pill); height:12px; overflow:hidden; }
    .fin-meter-fill { height:100%; width:10%; border-radius:var(--radius-pill); transition:width .5s ease; background:linear-gradient(90deg,var(--green),var(--gold),var(--danger)); }
    .fin-meter-labels { display:flex; justify-content:space-between; font-size:11px; font-weight:600; color:var(--muted); margin-top:4px; }
    .fin-compare-table { width:100%; border-collapse:collapse; margin:14px 0 20px; font-size:var(--fs-sm); }
    .fin-compare-table th, .fin-compare-table td { border:1px solid var(--border); padding:10px 12px; text-align:center; }
    .fin-compare-table th { background:var(--panel-bg); font-weight:700; color:var(--navy); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.3px; }
    .fin-compare-table td.fin-best { background:var(--green-light); font-weight:800; color:var(--green-dark); }
    .fin-schedule-table { width:100%; border-collapse:collapse; margin-top:10px; font-size:var(--fs-xs); }
    .fin-schedule-table th, .fin-schedule-table td { border:1px solid var(--border); padding:7px 10px; text-align:right; }
    .fin-schedule-table th:first-child, .fin-schedule-table td:first-child { text-align:left; }
    .fin-schedule-table th { background:var(--panel-bg); font-weight:700; color:var(--navy); position:sticky; top:0; }
    .fin-schedule-wrap { max-height:260px; overflow-y:auto; border-radius:var(--radius-md); border:1px solid var(--border); margin-top:8px; }
    .fin-trust-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:16px 0; }
    .fin-trust-item { display:flex; align-items:center; gap:10px; font-weight:600; font-size:var(--fs-sm); color:var(--navy); background:var(--panel-bg); border-radius:var(--radius-md); padding:12px 14px; }
    .fin-trust-item i { font-size:18px; color:var(--teal-dark); flex-shrink:0; }
    .fin-disclosure { font-size:11px; color:var(--muted); line-height:1.5; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
    details.fin-schedule-details summary { cursor:pointer; font-weight:700; color:var(--teal-dark); font-size:var(--fs-sm); padding:6px 0; list-style:none; }
    details.fin-schedule-details summary::-webkit-details-marker { display:none; }
    details.fin-schedule-details summary:before { content:'▸ '; }
    details.fin-schedule-details[open] summary:before { content:'▾ '; }
    /* ===== Financing Calculator — email-gated breakdown ===== */
    .fin-gated-wrap { position:relative; }
    .fin-blurred { filter:blur(7px); user-select:none; pointer-events:none; }
    .fin-unlock-overlay {
      position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; gap:10px; padding:28px 20px;
      background:linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.92) 22%, rgba(255,255,255,0.97) 100%);
      border-radius:var(--radius-lg);
    }
    .fin-unlock-overlay i { font-size:26px; color:var(--teal-dark); }
    .fin-unlock-overlay p { max-width:360px; font-size:var(--fs-md); font-weight:700; color:var(--navy); line-height:1.5; margin:0; }
    .fin-unlock-form { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:100%; max-width:380px; }
    .fin-unlock-form input { flex:1 1 200px; padding:12px 16px; border:1.5px solid var(--border); border-radius:var(--radius-pill); font-size:var(--fs-base); outline:none; transition:border-color .2s; }
    .fin-unlock-form input:focus { border-color:var(--teal); }
    .fin-unlock-form button { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:#fff; border:none; padding:12px 22px; border-radius:var(--radius-pill); font-weight:700; font-size:var(--fs-base); cursor:pointer; transition:background .2s, transform .15s; white-space:nowrap; }
    .fin-unlock-form button:hover { background:var(--teal-dark); transform:translateY(-1px); }
    .fin-unlock-note { font-size:var(--fs-xs); color:var(--muted); }
  
/* ===== STATIC PAGE CHROME (breadcrumb + related links) =====
   Added for the standalone static pages (/about/, /how-it-works/, /why-compare/, /privacy/,
   /terms/). Breadcrumbs give both users and Google an explicit hierarchy signal, and the related
   links block prevents these pages from becoming dead ends that pass no authority onward. */
.msq-breadcrumb { max-width:1100px; margin:0 auto; padding:14px 24px 0; font-size:var(--fs-sm); color:var(--muted); }
.msq-breadcrumb a { color:var(--teal-dark); text-decoration:none; font-weight:600; }
.msq-breadcrumb a:hover { text-decoration:underline; }
.msq-breadcrumb span[aria-hidden] { margin:0 6px; color:var(--border); }
.msq-related { max-width:1100px; margin:36px auto 48px; padding:24px; background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius-xl); }
.msq-related h2 { font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:var(--fs-xl); font-weight:800; color:var(--navy); margin:0 0 12px; }
.msq-related ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
.msq-related li { font-size:var(--fs-base); color:var(--muted); line-height:1.5; }
.msq-related a { color:var(--teal-dark); font-weight:700; text-decoration:none; }
.msq-related a:hover { text-decoration:underline; }
@media(max-width:700px){ .msq-related ul { grid-template-columns:1fr; } .msq-related { margin:24px 16px 32px; padding:18px; } }

/* The About card carries "position:relative; top:-28px" so it tucks under the hero in the SPA.
   On the standalone /about/ page there is no hero above it, so it would ride up over the
   breadcrumb. Restore the offset only in that standalone context. */
main #about-page { padding-top:34px; }