/* ============================================================
   SmileCare — single consolidated stylesheet
   ------------------------------------------------------------
   Built by merging the previously separate per-page CSS files.
   Order below preserves the exact cascade the pages used before:
     landing-page -> [page-specific] -> engagement
   No selectors overlap between the merged files, so the order
   of the page-specific blocks does not affect rendering.

   Every page should link ONLY this file.
   ============================================================ */

/* ============================================================
   landing-page.css — Shared base: variables, nav, hero, footer, sections, merged reveal + nav layers
   ============================================================ */
/* ============================================================
   SmileCare — Landing Page Draft
   Brand: teal/cyan (#0d9488) + red CTA accent (#e61739)
   Conversion-focused one-page redesign
   ============================================================ */

:root {
    --teal-50:  #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
    --teal-800: #115e59;
    --teal-900: #134e4a;
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --red:      #e61739;
    --red-dark: #a80a24;
    --amber:    #f59e0b;
    --green:    #16a34a;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
    --shadow-md: 0 4px 6px rgba(15,23,42,.05), 0 10px 20px rgba(15,23,42,.08);
    --shadow-lg: 0 10px 25px rgba(15,23,42,.10), 0 20px 40px rgba(15,23,42,.12);
    --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--slate-800);
    background: #ffffff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Announcement bar ---------- */
.announce {
    background: var(--teal-900);
    color: var(--teal-100);
    text-align: center;
    font-size: 13px;
    padding: 9px 16px;
    font-weight: 500;
    letter-spacing: .2px;
}
.announce strong { color: #fff; }

/* ---------- Navbar ---------- */
.nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--slate-200);
}
.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 8px 16px;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 26px; color: var(--teal-700, #0d9488); order: 0; letter-spacing: -0.5px; }
.brand .wordmark { display: inline-flex; align-items: baseline; }
.brand .wm-smile { color: var(--slate-900, #0f172a); }
.brand .wm-care  { color: var(--teal-600, #0d9488); }
.brand .logo { width: 40px; height: 40px; display: grid; place-items: center; font-size: 0; overflow: hidden; border-radius: 10px; background: var(--teal-50, #f0fdfa); padding: 4px; }
.brand .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nav-links { display: flex; gap: 80px; align-items: center; flex-wrap: nowrap; white-space: nowrap; width: 100%; justify-content: flex-start; padding: 6px 0; border-top: 1px solid var(--slate-100); order: 2; }
.nav-cta { order: 1; }
.nav-toggle { order: 1; }
.nav-links a { font-size: 13.5px; font-weight: 500; color: var(--slate-600); transition: color .15s; }
.nav-links a:hover { color: var(--teal-700); }

@media (max-width: 1080px) {
  .nav-links { gap: 12px; }
  .nav-links a, .nav-links .nav-dropdown-toggle { font-size: 12.5px; }
}
.nav-cta { display: flex; gap: 12px; align-items: center; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-weight: 600; font-size: 14.5px; padding: 11px 22px; border-radius: 9px;
    border: none; cursor: pointer; transition: all .18s ease; white-space: nowrap;
}
.btn-primary { background: var(--teal-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--teal-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-red { background: var(--red); color: #fff; box-shadow: var(--shadow-sm); }
.btn-red:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-orange { background: #F54927; color: #fff; box-shadow: var(--shadow-sm); }
.btn-orange:hover { background: #F54927; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-ghost { background: transparent; color: var(--teal-700); border: 1.5px solid var(--teal-300); }
.btn-ghost:hover { background: var(--teal-50); border-color: var(--teal-500); }
.btn-lg { padding: 14px 30px; font-size: 15.5px; border-radius: 11px; }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
    background:
        radial-gradient(1100px 500px at 80% -10%, var(--teal-100), transparent),
        linear-gradient(180deg, var(--teal-50), #fff);
    padding: 64px 0 80px;
    overflow: hidden;
}
.hero-grid {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.badge-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--teal-200);
    color: var(--teal-800); font-weight: 600; font-size: 13.5px;
    padding: 7px 15px; border-radius: 999px; box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
}
.badge-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.hero h1 {
    font-size: 46px; line-height: 1.1; font-weight: 800; color: var(--slate-900);
    letter-spacing: -0.5px; margin-bottom: 20px;
}
.hero h1 .accent { color: var(--teal-600); }
.hero .lede {
    font-size: 18.5px; color: var(--slate-600); max-width: 100%; margin-bottom: 30px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-trust {
    display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--slate-500);
}
.hero-trust .stars { color: var(--amber); font-size: 16px; letter-spacing: 1px; }
.hero-trust strong { color: var(--slate-700); }

/* hero visual */
.hero-visual { position: relative; }
.dashboard-mock {
    background: var(--slate-900); border-radius: 16px; box-shadow: var(--shadow-lg);
    overflow: hidden; border: 1px solid var(--slate-800);
    transform: perspective(1200px) rotateY(-4deg);
}
.mock-topbar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--slate-800); }
.mock-topbar .dot { width: 11px; height: 11px; border-radius: 50%; }
.mock-topbar .d1 { background: #ff5f57; } .mock-topbar .d2 { background: #febc2e; } .mock-topbar .d3 { background: #28c840; }
.mock-topbar .url { margin-left: 14px; font-size: 12px; color: var(--slate-400); background: var(--slate-900); padding: 4px 14px; border-radius: 6px; }
.mock-body { display: grid; grid-template-columns: 150px 1fr; min-height: 320px; }
.mock-sidebar { background: var(--slate-800); padding: 16px 12px; border-right: 1px solid #243149; }
.mock-sidebar .s-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 7px; font-size: 12px; color: var(--slate-300); margin-bottom: 3px; }
.mock-sidebar .s-item.active { background: var(--teal-600); color: #fff; }
.mock-sidebar .s-ico { width: 15px; height: 15px; border-radius: 4px; background: var(--slate-500); }
.mock-sidebar .s-item.active .s-ico { background: rgba(255,255,255,.5); }
.mock-main { padding: 18px; background: #f3f6f9; }
.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mock-card { background: #fff; border-radius: 9px; padding: 11px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.mock-card .mc-label { font-size: 9.5px; color: var(--slate-400); text-transform: uppercase; letter-spacing: .5px; }
.mock-card .mc-value { font-size: 17px; font-weight: 700; color: var(--slate-800); margin-top: 2px; }
.mock-card .mc-trend { font-size: 10px; color: var(--green); margin-top: 2px; }
.mock-card .mc-trend.down { color: var(--red); }
.mock-chart { background: #fff; border-radius: 9px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.mock-chart .mc-title { font-size: 11px; font-weight: 600; color: var(--slate-600); margin-bottom: 10px; }
.bars { display: flex; align-items: flex-end; gap: 7px; height: 80px; }
.bars .bar { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--teal-400), var(--teal-600)); }

/* floating stat chips */
.float-chip {
    position: absolute; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg);
    padding: 12px 16px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--slate-200);
}
.float-chip .fc-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; }
.float-chip .fc-label { font-size: 11px; color: var(--slate-400); font-weight: 500; }
.float-chip .fc-value { font-size: 15px; font-weight: 700; color: var(--slate-800); }
.chip-1 { top: 24px; left: -34px; }
.chip-1 .fc-ico { background: #dcfce7; }
.chip-2 { bottom: 36px; right: -28px; }
.chip-2 .fc-ico { background: #fef3c7; }

/* ---------- Positioning statement / punch line ---------- */
.positioning {
    background: linear-gradient(135deg, var(--teal-700), var(--teal-800));
    padding: 0;
    position: relative;
    overflow: hidden;
}
.positioning::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(600px 200px at 15% 50%, rgba(255,255,255,.08), transparent),
        radial-gradient(500px 180px at 85% 50%, rgba(255,255,255,.06), transparent);
    pointer-events: none;
}
.positioning-inner {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    padding: 30px 24px; text-align: center; position: relative;
}
.positioning-icon {
    font-size: 26px; line-height: 1; flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.positioning-text {
    font-size: 21px; line-height: 1.5; font-weight: 500; color: #fff;
    max-width: 900px; margin: 0; letter-spacing: .2px;
}
.positioning-text strong { font-weight: 800; color: #fff; }
.positioning-text .accent-underline {
    font-weight: 700; color: var(--teal-100);
    background: linear-gradient(transparent 62%, rgba(230,23,57,.55) 62%);
    padding: 0 2px; white-space: nowrap;
}

/* ---------- Logo strip ---------- */
.logos { padding: 34px 0; border-bottom: 1px solid var(--slate-100); }
.logos .label { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--slate-400); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 20px; }
.logos-row { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; opacity: .7; }
.logos-row span { font-weight: 700; font-size: 17px; color: var(--slate-500); letter-spacing: .3px; }

/* ---------- Section base ---------- */
.section { padding: 84px 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }

/* ---------- Consistent hero-to-content gap ----------
   The hero already supplies 80px of bottom padding. Any block placed
   directly after a hero must not add its own large top padding on top of
   that, otherwise the gap almost doubles (e.g. 194px vs the 118px on
   payment.html, the reference page). Cap the top padding for the first
   block after the hero so every page matches. */
.hero + .section,
.hero + .compare-section,
.hero + .payment-section,
.hero + .feat-trust,
.hero + .gallery-section,
.hero + .cta-band,
.hero + .positioning,
.hero + .doc-body,
.hero + .wrap,
.hero + .contact-section,
.hero + main {
    padding-top: 8px;
}

/* Remove the first child's top margin inside the block after the hero so
   the gap matches the reference page (no double spacing). */
.hero + .section > .container > *:first-child,
.hero + .section > *:first-child,
.hero + .compare-section > .container > *:first-child,
.hero + .payment-section > .container > *:first-child,
.hero + .gallery-section > *:first-child,
.hero + .cta-band > .container > *:first-child,
.hero + .doc-body > .container > *:first-child,
.hero + .doc-body > .doc-wrap > *:first-child,
.hero + main > .wrap > *:first-child {
    margin-top: 0;
}
.eyebrow { display: inline-block; font-size: 13px; font-weight: 700; color: var(--teal-600); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; }
.section h2 { font-size: 34px; font-weight: 800; color: var(--slate-900); letter-spacing: -.3px; line-height: 1.2; margin-bottom: 16px; }
.section-head p { font-size: 17px; color: var(--slate-600); }

/* ---------- Pain -> Relief ---------- */
.pain { background: var(--slate-50); }
.pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pain-card {
    background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm);
    border: 1px solid var(--slate-200); display: flex; gap: 18px; align-items: flex-start;
    transition: transform .2s, box-shadow .2s;
}
.pain-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pain-card .pc-ico { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: #fee2e2; }
.pain-card .pc-body h4 { font-size: 16px; font-weight: 700; color: var(--slate-800); margin-bottom: 5px; }
.pain-card .pc-pain { font-size: 13.5px; color: var(--red); margin-bottom: 6px; font-weight: 500; }
.pain-card .pc-relief { font-size: 14px; color: var(--slate-600); }
.pain-card .pc-relief strong { color: var(--teal-700); }

/* ---------- Features grid ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feat-card {
    background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
    padding: 28px 24px; transition: all .2s; position: relative; overflow: hidden;
}
.feat-card:hover { border-color: var(--teal-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feat-card .fc-ico { width: 50px; height: 50px; border-radius: 13px; background: var(--teal-50); display: grid; place-items: center; font-size: 24px; margin-bottom: 16px; border: 1px solid var(--teal-100); }
.feat-card h4 { font-size: 17.5px; font-weight: 700; color: var(--slate-900); margin-bottom: 8px; }
.feat-card p { font-size: 14px; color: var(--slate-600); }
.feat-card .fc-list { margin-top: 12px; }
.feat-card .fc-list li { font-size: 13px; color: var(--slate-500); padding: 3px 0 3px 20px; position: relative; }
.feat-card .fc-list li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-600); font-weight: 700; }

/* ---------- Stats band ---------- */
.stats-band {
    background: linear-gradient(135deg, var(--teal-700), var(--teal-900));
    color: #fff; padding: 64px 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat .num { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.stat .num .plus { color: var(--teal-300); }
.stat .label { font-size: 14px; color: var(--teal-100); margin-top: 10px; font-weight: 500; }

/* ---------- How it works ---------- */
.how { background: var(--slate-50); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.step { text-align: center; position: relative; }
.step .step-num { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid var(--teal-400); color: var(--teal-700); font-size: 20px; font-weight: 800; display: grid; place-items: center; margin: 0 auto 16px; box-shadow: var(--shadow-sm); }
.step h4 { font-size: 16px; font-weight: 700; color: var(--slate-800); margin-bottom: 7px; }
.step p { font-size: 13.5px; color: var(--slate-500); }
.step:not(:last-child)::after { content: "→"; position: absolute; top: 22px; right: -16px; color: var(--teal-300); font-size: 22px; font-weight: 700; }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testi-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.testi-card .stars { color: var(--amber); font-size: 17px; letter-spacing: 1.5px; margin-bottom: 14px; }
.testi-card .quote { font-size: 14.5px; color: var(--slate-700); line-height: 1.65; margin-bottom: 20px; font-style: italic; }
.testi-card .who { display: flex; align-items: center; gap: 12px; }
.testi-card .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--teal-100); color: var(--teal-800); font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.testi-card .who .name { font-size: 14.5px; font-weight: 700; color: var(--slate-800); }
.testi-card .who .role { font-size: 12.5px; color: var(--slate-500); }

/* ---------- Pricing ---------- */
.pricing { background: var(--slate-50); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card {
    background: #fff; border: 1px solid var(--slate-200); border-radius: 16px; padding: 32px 28px;
    display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: all .2s; position: relative;
}
.price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.price-card.popular { border: 2px solid var(--teal-500); box-shadow: var(--shadow-md); }
.popular-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--teal-600); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 16px; border-radius: 999px; text-transform: uppercase; letter-spacing: .8px; }
.price-card .pc-tier { font-size: 15px; font-weight: 700; color: var(--teal-700); text-transform: uppercase; letter-spacing: 1px; }
.price-card .pc-price { font-size: 40px; font-weight: 800; color: var(--slate-900); margin: 12px 0 2px; letter-spacing: -1px; }
.price-card .pc-price .cur { font-size: 20px; vertical-align: top; color: var(--slate-500); }
.price-card .pc-period { font-size: 13.5px; color: var(--slate-500); margin-bottom: 20px; }
.price-card .pc-desc { font-size: 14px; color: var(--slate-600); margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--slate-100); }
.price-card .pc-feats li { font-size: 13.5px; color: var(--slate-700); padding: 7px 0 7px 24px; position: relative; }
.price-card .pc-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-600); font-weight: 700; }
.price-card .pc-feats li.muted { color: var(--slate-400); }
.price-card .pc-feats li.muted::before { color: var(--slate-300); }
.price-card .btn { margin-top: 24px; }
/* ---------- FAQ ---------- */
.faq {
    background: var(--slate-50);
    padding: 88px 0;
}
.faq-list {
    max-width: 820px;
    margin: 0 auto;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--teal-200);
}
.faq-item.open {
    box-shadow: var(--shadow-md);
    border-color: var(--teal-300);
}
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 22px 26px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    color: var(--slate-800);
    text-align: left;
    transition: color .2s ease;
}
.faq-q:hover { color: var(--teal-700); }
.faq-item.open .faq-q { color: var(--teal-700); }
.faq-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--teal-50);
    color: var(--teal-600);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    transition: transform .25s ease, background .2s ease, color .2s ease;
}
.faq-item.open .faq-icon {
    transform: rotate(45deg);
    background: var(--teal-600);
    color: #fff;
}
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.faq-a-inner {
    padding: 0 26px 24px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--slate-600);
}
.faq-a-inner a { color: var(--teal-600); font-weight: 600; }
.faq-a-inner a:hover { text-decoration: underline; }
.faq-cta {
    text-align: center;
    margin-top: 40px;
}
.faq-cta p {
    font-size: 16px;
    color: var(--slate-500);
    margin-bottom: 18px;
}
@media (max-width: 640px) {
    .faq { padding: 64px 0; }
    .faq-q { font-size: 15.5px; padding: 18px 20px; }
    .faq-a-inner { padding: 0 20px 20px; font-size: 14.5px; }
}


/* ---------- Final CTA ---------- */
.final-cta {
    background: linear-gradient(135deg, var(--teal-600), var(--teal-800));
    color: #fff; text-align: center; padding: 80px 0;
}
.final-cta h2 { color: #fff; font-size: 34px; font-weight: 800; margin-bottom: 16px; }
.final-cta p { font-size: 18px; color: var(--teal-100); max-width: 560px; margin: 0 auto 32px; }
.final-cta .hero-ctas { justify-content: center; }
.final-cta .btn-primary { background: #fff; color: var(--teal-700); }
.final-cta .btn-primary:hover { background: var(--teal-50); }
.final-cta .btn-red { background: var(--red); }
.final-cta .fineprint { font-size: 13px; color: var(--teal-200); margin-top: 18px; }

/* ---------- Footer ---------- */
.footer { background: var(--slate-900); color: var(--slate-400); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px 12px; padding-bottom: 36px; border-bottom: 1px solid var(--slate-800); }
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer .brand .wm-smile, .footer .brand .wm-care { color: #fff; }
.footer p { font-size: 13.5px; line-height: 1.7; max-width: 300px; }
.footer h5 { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.footer ul li { padding: 6px 0; font-size: 13.5px; }
.footer ul li a:hover { color: var(--teal-300); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 12.5px; }

/* Brand row: SmileCare block, then the two trust columns sitting directly
   beside it as their own columns rather than stretched across the rest of
   the row. Without the trust strip the brand content stopped at ~300px and
   left most of its full-width row empty. */
.footer-brand-row {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 48px;
    align-items: start;
}
.footer-brand-row > div:first-child > p { max-width: 300px; }

/* ---- Trust strip ---- */
.footer-trust { display: contents; }
.footer-trust-col h6 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--teal-300);
    margin-bottom: 12px;
}
.footer-trust-list { list-style: none; display: grid; gap: 9px; }
.footer-trust-list li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--slate-400);
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.footer-trust-list .ft-ico {
    color: var(--teal-400);
    flex: 0 0 auto;
    line-height: 1.5;
}
.footer-trust-list a {
    color: var(--slate-300);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s, border-color .18s;
}
.footer-trust-list a:hover {
    color: #fff;
    border-bottom-color: var(--teal-400);
}

@media (max-width: 1180px) {
    /* SmileCare spans the row, the two trust columns sit side by side under it. */
    .footer-brand-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 48px; }
    .footer-brand-row > div:first-child { grid-column: 1 / -1; }
    .footer-brand-row > div:first-child > p { max-width: 440px; }
}
@media (max-width: 640px) {
    .footer-brand-row { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Responsive ---------- */
/* Footer layout.
   The six link columns need ~1012px of unwrapped text, and .container caps
   at 1132px, so six-across fits on desktop but not below ~1180px. The brand
   block takes its own full-width row, then the six link groups fill an even
   grid beneath it: 6 across -> 3 across -> 2 across. No row is ever left
   orphaned and no link label wraps from 420px upward. */
.footer-grid > div:first-child { grid-column: 1 / -1; }

@media (max-width: 1180px) {
    .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
}
@media (max-width: 760px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 900px) {
    .hero-grid, .pain-grid, .feat-grid, .testi-grid, .price-grid, .steps, .stats-grid, .contact-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 34px; }
    .nav-links { display: none; }
    .step:not(:last-child)::after { display: none; }
    .chip-1, .chip-2 { display: none; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
    .section { padding: 60px 0; }
    .form-row { grid-template-columns: 1fr; }
    .positioning-inner { flex-direction: column; gap: 12px; padding: 26px 20px; }
    .positioning-text { font-size: 18px; }
    .positioning-text .accent-underline { white-space: normal; }

    /* Dashboard mockup: the 3D tilt only reads correctly next to hero copy;
       once it goes full-width below 900px it just clips awkwardly. */
    .dashboard-mock { transform: none; }
}

/* Dashboard mockup on phones: the fixed 150px sidebar column leaves too
   little room for the 3 stat cards once the mock is full viewport width.
   Drop the sidebar and let the stat cards use the full body width. */
@media (max-width: 480px) {
    .mock-body { grid-template-columns: 1fr; min-height: auto; }
    .mock-sidebar { display: none; }
    .mock-main { padding: 14px; }
    .mock-cards { gap: 8px; }
    .mock-card { padding: 9px 10px; }
    .mock-card .mc-value { font-size: 15px; }
    .mock-topbar .url { display: none; }
}


/* ============================================================
   Contact Section + Form
   ============================================================ */
.contact-section { background: var(--slate-50); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }

/* Stack contact info above the form on tablets & phones */
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---- Left: info column ---- */
.contact-info .eyebrow { display: block; margin-bottom: 8px; }
.contact-info h2 { font-size: 30px; font-weight: 800; color: var(--slate-900); letter-spacing: -.3px; margin-bottom: 14px; }
.contact-info > p { font-size: 15.5px; color: var(--slate-600); margin-bottom: 12px; }

.contact-list { margin: 28px 0; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--slate-200); }
.contact-list li:last-child { border-bottom: none; }
.contact-list .ci-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; background: var(--teal-50); border: 1px solid var(--teal-100); display: grid; place-items: center; font-size: 19px; }
.contact-list .ci-label { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--slate-400); font-weight: 600; margin-bottom: 2px; }
.contact-list a { color: var(--teal-700); font-weight: 600; }
.contact-list a:hover { text-decoration: underline; }
.contact-list div div:last-child { font-size: 14.5px; color: var(--slate-700); }

.contact-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.contact-trust span { font-size: 12.5px; font-weight: 600; color: var(--teal-800); background: #fff; border: 1px solid var(--teal-200); padding: 6px 12px; border-radius: 999px; }

/* ---- Right: form card ---- */
.contact-form-wrap {
    background: #fff; border: 1px solid var(--slate-200); border-radius: 16px;
    padding: 32px; box-shadow: var(--shadow-md); position: relative;
}
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 15px; font-weight: 600; color: var(--slate-700); margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; font-family: inherit; font-size: 14.5px; color: var(--slate-800);
    padding: 11px 13px; border: 1.5px solid var(--slate-300); border-radius: 9px;
    background: #fff; transition: border-color .15s, box-shadow .15s; outline: none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(13,148,136,.14);
}
.form-field textarea { resize: vertical; min-height: 90px; }
.form-field select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.contact-form .btn { margin-top: 6px; }
.form-fineprint { font-size: 11.5px; color: var(--slate-400); text-align: center; margin-top: 12px; line-height: 1.5; }

/* ---- Success state ---- */
.form-success { text-align: center; padding: 36px 16px; }
.form-success .fs-icon { width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; color: var(--green); font-size: 34px; font-weight: 800; display: grid; place-items: center; margin: 0 auto 18px; }
.form-success h3 { font-size: 20px; font-weight: 700; color: var(--slate-900); margin-bottom: 10px; }
.form-success p { font-size: 14.5px; color: var(--slate-600); margin-bottom: 22px; }
.form-success a { color: var(--teal-700); font-weight: 600; }

/* ============================================================
   Intro Video Lightbox (lazy-loaded modal)
   ============================================================ */
.video-link {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, var(--teal-600), var(--teal-800));
    border: none; border-radius: var(--radius);
    padding: 14px 22px; margin: 4px 0 26px; max-width: 420px; width: 100%;
    box-shadow: var(--shadow-md); cursor: pointer; font-family: inherit; text-align: left;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.video-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background: linear-gradient(135deg, var(--teal-700), var(--teal-900)); }
.video-link-icon {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    background: #fff; color: var(--teal-700); font-size: 15px;
    display: grid; place-items: center; padding-left: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: transform .2s ease;
}
.video-link:hover .video-link-icon { transform: scale(1.08); }
.video-link-text { display: flex; flex-direction: column; gap: 2px; }
.video-link-title { color: #fff; font-size: 16px; font-weight: 700; }
.video-link-dur { color: var(--teal-100); font-weight: 500; font-size: 13px; }

/* hero mockup play trigger */
.video-trigger {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,.16); border: none; cursor: pointer;
    transition: background .2s ease;
}
.video-trigger:hover { background: rgba(15,23,42,.34); }
.video-trigger:hover .video-trigger-play { transform: scale(1.08); }
.video-trigger-play {
    width: 76px; height: 76px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--teal-600); padding-left: 6px;
    transition: transform .2s ease;
}

.video-modal {
    position: fixed; inset: 0; z-index: 2000;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
}
.video-modal.open { display: flex; }
.video-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15,23,42,.78); backdrop-filter: blur(4px);
    animation: vmFade .25s ease;
}
.video-modal-box {
    position: relative; width: 100%; max-width: 920px;
    animation: vmPop .3s cubic-bezier(.2,.9,.3,1.2);
}
.video-modal-frame {
    position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
    background: #000; border-radius: 14px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.video-modal-frame iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.video-modal-close {
    position: absolute; top: -46px; right: -4px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
    font-size: 26px; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
    transition: background .2s ease, transform .2s ease;
}
.video-modal-close:hover { background: rgba(255,255,255,.25); transform: rotate(90deg); }

@keyframes vmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vmPop { from { opacity: 0; transform: scale(.92) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }

body.video-modal-open { overflow: hidden; }

@media (max-width: 640px) {
    .video-modal { padding: 14px; }
    .video-modal-close { top: -44px; right: 0; }
}


/* ============================================================
   Merged shared layers (were separate files loaded on every page):
   reveal.css, mobile-nav.css, nav-dropdown.css, nav-enhance.css
   Kept in this order so nav-enhance's overrides still win.
   ============================================================ */

/* ---- begin reveal.css ---- */
/* ============================================================
   SmileCare — Scroll-Reveal Animations
   Uses native IntersectionObserver — no libraries, no cost
   Elements with [data-reveal] fade/slide in when scrolled into view
   ============================================================ */

/* ---- Base reveal state (hidden before trigger) ---- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s cubic-bezier(.16,1,.3,1),
                transform .6s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}

/* ---- Variants: direction of motion ---- */
[data-reveal="fade"] {
    transform: none;
}
[data-reveal="left"] {
    transform: translateX(-40px);
}
[data-reveal="right"] {
    transform: translateX(40px);
}
[data-reveal="scale"] {
    transform: scale(.94);
}

/* ---- Triggered state (visible) ---- */
[data-reveal].is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* ---- Stagger delays for grouped children ---- */
[data-reveal][data-reveal-delay="1"]  { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"]  { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"]  { transition-delay: .24s; }
[data-reveal][data-reveal-delay="4"]  { transition-delay: .32s; }
[data-reveal][data-reveal-delay="5"]  { transition-delay: .40s; }
[data-reveal][data-reveal-delay="6"]  { transition-delay: .48s; }
[data-reveal][data-reveal-delay="7"]  { transition-delay: .56s; }
[data-reveal][data-reveal-delay="8"]  { transition-delay: .64s; }

/* ---- Respect reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---- end reveal.css ---- */

/* ---- begin mobile-nav.css ---- */
/* ============================================================
   SmileCare — Mobile Navigation (Hamburger Menu)
   Shows a hamburger button below 900px that toggles a
   slide-down menu panel with all nav links + CTAs.
   ============================================================ */

/* ---- Hamburger toggle button (hidden on desktop) ---- */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    z-index: 1001;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle-box {
    width: 26px;
    height: 18px;
    position: relative;
}

.nav-toggle-box span {
    display: block;
    position: absolute;
    height: 2.5px;
    width: 100%;
    background: var(--slate-800, #1e293b);
    border-radius: 3px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.nav-toggle-box span:nth-child(1) { top: 0; }
.nav-toggle-box span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle-box span:nth-child(3) { bottom: 0; }

/* Animate to X when menu is open */
.nav.menu-open .nav-toggle-box span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.nav.menu-open .nav-toggle-box span:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}
.nav.menu-open .nav-toggle-box span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* ---- Mobile menu panel (hidden on desktop) ---- */
.mobile-menu {
    display: none;
    position: fixed;
    top: 130px;
    right: 0;
    width: 100%;
    max-width: 250px;
    /*height: 100vh;
    height: 100dvh;*/
    background: #eee;
    z-index: 1000;
    padding: 10px 20px 20px 10px;
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.12);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    flex-direction: column;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu a {
    display: block;
    padding: 5px 0;
    font-size: 17px;
    font-weight: 600;
/*  color: var(--slate-700, #334155); */
    border-bottom: 1px solid var(--slate-100, #f1f5f9);
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu a:active,
.mobile-menu a:hover {
    color: var(--teal-600, #0d9488);
}

.mobile-menu .mm-ctas {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-menu .mm-ctas .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ---- Overlay backdrop ---- */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.32s ease;
}

.mobile-menu-overlay.open {
    display: block;
    opacity: 1;
}

/* ---- Body lock when menu open ---- */
body.mobile-nav-open {
    overflow: hidden;
}

/* ---- Show hamburger + enable mobile menu below 900px ---- */
@media (max-width: 900px) {
    /* Show hamburger button */
    .nav-toggle {
        display: block;
    }

    /* Hide desktop CTA buttons — they live in the mobile menu now */
    .nav-cta {
        display: none;
    }

    /* Enable the slide-in panel (off-screen until .open) */
    .mobile-menu {
        display: flex;
        transform: translateX(100%);
    }

    .mobile-menu.open {
        transform: translateX(0);
    }
}

/* ---- Small phone tweaks ---- */
@media (max-width: 480px) {
    .mobile-menu {
        padding: 32px 22px 32px 22px;
    }
    .mobile-menu a {
        font-size: 16px;
        padding: 14px 0;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .nav-toggle-box span,
    .mobile-menu,
    .mobile-menu-overlay {
        transition: none !important;
    }
}

/* ---- end mobile-nav.css ---- */

/* ---- begin nav-dropdown.css ---- */
/* ============================================================
   SmileCare — Navigation Dropdowns (desktop + mobile)
   ============================================================ */

/* ---------- Desktop dropdown ---------- */
.nav-links .nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-links .nav-dropdown-toggle {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-links .nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  padding: 8px 0;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
  z-index: 1000;
  max-height: 70vh;
  overflow-y: auto;
}

.nav-links .nav-dropdown:hover .nav-dropdown-menu,
.nav-links .nav-dropdown:focus-within .nav-dropdown-menu,
.nav-links .nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.nav-links .nav-dropdown-menu a {
  display: block;
  padding: 10px 16px;
  color: #1e293b;
  text-decoration: none;
  font-size: 17.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}

.nav-links .nav-dropdown-menu a:hover {
  background: #f1f5f9;
  color: #0d9488;
}

.nav-links .nav-dropdown-menu .nav-dropdown-all {
  border-top: 1px solid #e2e8f0;
  margin-top: 4px;
  padding-top: 10px;
  font-weight: 600;
}

/* Long menus (Features, Compare) flow into two columns so they never grow
   taller than the viewport — no scrollbar, every item visible at once.
   Matches the WordPress blog theme. */
.nav-links .nav-dropdown-menu-cols {
  column-count: 2;
  column-gap: 8px;
  min-width: 460px;
  overflow: visible;
  max-height: none;
}
.nav-links .nav-dropdown-menu-cols a {
  break-inside: avoid;
}
/* The "All …" link spans both columns as a full-width footer row. */
.nav-links .nav-dropdown-menu-cols .nav-dropdown-all {
  column-span: all;
  border-top: 1px solid #e2e8f0;
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 600;
}

/* Menus anchored near the right edge of the nav open inward (right-aligned)
   so the closed dropdown does not extend past the viewport and create a
   hidden horizontal scrollbar. */
.nav-links .nav-dropdown-menu-right .nav-dropdown-menu {
  left: auto;
  right: 0;
}

@media (max-width: 900px) {
  .nav-links .nav-dropdown-menu-cols {
    column-count: 1;
    min-width: 0;
  }
}

/* Highlighted nav items (Pricing / Payment) */
.nav-links .nav-highlight {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.nav-links .nav-highlight:hover { background: var(--teal-50, #f0fdfa); color: var(--teal-700); }
.nav-links .nav-highlight--orange {
  background: #f97316;
  color: #fff !important;
}
.nav-links .nav-highlight--orange:hover { background: #ea580c; color: #fff !important; }

/* ---------- Mobile accordion ---------- */
.mobile-menu .mobile-dropdown { border-bottom: 1px solid #e2e8f0; }
.mobile-menu .mobile-dropdown-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  padding: 14px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.mobile-menu .mobile-dropdown-menu {
  display: none;
  padding: 0 0 10px 12px;
}
.mobile-menu .mobile-dropdown.open .mobile-dropdown-menu { display: block; }
.mobile-menu .mobile-dropdown-menu a {
  display: block;
  padding: 8px 0;
  color: #1e293b;
  text-decoration: none;
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .nav-links .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: none;
    padding: 0;
  }
}

/* ---- end nav-dropdown.css ---- */

/* ---- begin nav-enhance.css ---- */
/* ===== Nav visibility boost =====
   Layered on top of landing-page.css so the top menu reads as a clear,
   sticky brand bar instead of blending into the page. */

.nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10) !important;
}

.nav .nav-inner {
    min-height: 76px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.nav .brand {
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: var(--teal-700, #0d9488) !important;
}
.nav .brand .wm-smile { color: var(--slate-900, #0f172a) !important; }
.nav .brand .wm-care  { color: var(--teal-600, #0d9488) !important; }

.nav .nav-links {
    gap: 40px !important;
}

.nav .nav-links > a,
.nav .nav-links > .nav-dropdown > .nav-dropdown-toggle {
    font-size: 17.5px !important;
    font-weight: 600 !important;
    color: var(--slate-700, #334155) !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.nav .nav-links > a:hover,
.nav .nav-links > .nav-dropdown > .nav-dropdown-toggle:hover {
    background: var(--teal-50, #f0fdfa) !important;
    color: var(--teal-700, #0d9488) !important;
}

/* Current page: a stronger teal pill than hover, so the active state reads as
   "you are here" and not merely "hovered". Set via aria-current by
   nav-current.js, derived from the URL. */
.nav .nav-links > a[aria-current="page"] {
    background: var(--teal-100, #ccfbf1) !important;
    color: var(--teal-800, #115e59) !important;
}
.nav .nav-links > a[aria-current="page"]:hover {
    background: var(--teal-200, #99f6e4) !important;
    color: var(--teal-900, #134e4a) !important;
}
.nav .nav-links > .nav-dropdown:has(> .nav-dropdown-menu a[aria-current="page"]) > .nav-dropdown-toggle {
    background: var(--teal-100, #ccfbf1) !important;
    color: var(--teal-800, #115e59) !important;
}

/* Dropdown menu items are their own full-width rows, not pills. They must not
   inherit the 17.5px !important sizing the top-level links use. */
.nav .nav-links .nav-dropdown-menu a {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
}

.nav .nav-cta .btn {
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 11px 20px !important;
}

.nav .nav-toggle {
    transform: scale(1.15) !important;
}

/* Give the sticky bar room to sit above hero content without overlap */
.nav ~ header.hero {
    scroll-margin-top: 84px !important;
}

/* ---- end nav-enhance.css ---- */

/* ============================================================
   compare.css — Compare pages
   ============================================================ */
/* ==========================================================================
   SmileCare — Compare page styles
   Reuses brand tokens, nav, buttons, and footer from landing-page.css.
   Only page-specific rules (hero, comparison table, status icons, CTA card)
   live here.
   ========================================================================== */

/* ---- Compact centered hero (this page doesn't need the two-column hero) ---- */
.compare-hero {
    padding: 64px 0 48px;
    text-align: center;
    background: linear-gradient(180deg, var(--teal-50) 0%, #fff 100%);
}
.compare-hero h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--slate-900);
    margin: 14px 0 16px;
    letter-spacing: -0.02em;
}
.compare-hero h1 .accent { color: var(--teal-600); }
.compare-hero p {
    font-size: 18px;
    color: var(--slate-500);
    max-width: 600px;
    margin: 0 auto;
}

/* ---- Comparison table ---- */
.compare-section { padding: 0 0 84px; }
.table-wrap {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--slate-200);
    box-shadow: var(--shadow-md);
    background: #fff;
}
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 600px; }
.table-wrap thead th {
    padding: 20px 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--slate-700);
    border-bottom: 2px solid var(--slate-200);
    background: var(--slate-50);
}
.table-wrap thead th:first-child { text-align: left; width: 35%; }
.table-wrap thead th:nth-child(2) { background: var(--teal-50); color: var(--teal-800); position: relative; }
.table-wrap thead th:nth-child(2)::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--teal-500); border-radius: 0 0 2px 2px;
}
.table-wrap tbody td {
    padding: 16px 24px; text-align: center; font-size: 14px; color: var(--slate-600);
    border-bottom: 1px solid var(--slate-100);
}
.table-wrap tbody td:first-child { text-align: left; font-weight: 500; color: var(--slate-800); }
.table-wrap tbody td:nth-child(2) { background: rgba(240,253,250,0.5); }
.table-wrap tbody tr:last-child td { border-bottom: none; }
.table-wrap tbody tr:hover { background: var(--slate-50); }
.table-wrap tbody tr:hover td:nth-child(2) { background: var(--teal-50); }

/* Status icons */
.status-full, .status-partial, .status-none, .status-star {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; font-size: 16px; font-weight: 700;
}
.status-full { background: rgba(22,163,74,0.12); color: var(--green); }
.status-partial { background: rgba(245,158,11,0.12); color: var(--amber); }
.status-none { background: rgba(230,23,57,0.08); color: var(--red); font-size: 15px; }
.status-star { background: rgba(245,158,11,0.15); color: var(--amber); font-weight: 400; }
.status-text { font-size: 13px; color: var(--slate-400); font-style: italic; }

/* ---- CTA card ---- */
.compare-cta-section { padding: 0 0 88px; text-align: center; }

/* ---------- Alternative / practice-type cards (compare.html) ---------- */
.alt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}
.alt-card {
    display: block;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    padding: 24px 22px;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.alt-card:hover {
    transform: translateY(-3px);
    border-color: var(--teal-300, #5eead4);
    box-shadow: 0 16px 36px -20px rgba(15, 23, 42, .5);
}
.alt-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--slate-900);
    margin: 0 0 8px;
}
.alt-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--slate-600);
    margin: 0;
}
@media (max-width: 900px) {
    .alt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .alt-grid { grid-template-columns: 1fr; }
}
.compare-cta-card {
    background: linear-gradient(135deg, var(--teal-600), var(--teal-800));
    border-radius: var(--radius);
    padding: 60px 40px;
    color: #fff;
    box-shadow: var(--shadow-lg);
}
.compare-cta-card h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; color: #fff; }
/* .compare-cta-card p { font-size: 16px; opacity: 0.9; margin: 0 auto 28px; max-width: 500px; } */
.compare-cta-card p { font-size: 16px; opacity: 0.9; margin: 0 auto 28px;}
.compare-cta-card .btn-primary { background: #fff; color: var(--teal-700); }
.compare-cta-card .btn-primary:hover { background: var(--teal-50); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .compare-hero { padding: 48px 0 36px; }
    .compare-hero p { font-size: 16px; }
    .compare-cta-card { padding: 40px 24px; }
    .compare-cta-card h2 { font-size: 22px; }
    .table-wrap thead th, .table-wrap tbody td { padding: 12px 14px; }
}

/* ============================================================
   features.css — features.html
   ============================================================ */
/* ==========================================================================
   SmileCare — Features page styles
   Reuses brand tokens from landing-page.css (:root variables).
   ========================================================================== */

/* ---- Features hero ---- */
.feat-hero {
    background: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-700) 55%, var(--teal-800) 100%);
    color: #fff;
    padding: 72px 0 88px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.feat-hero::before {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -160px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(255,255,255,0.08), rgba(255,255,255,0) 70%);
    border-radius: 50%;
}
.feat-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255,255,255,0.10), rgba(255,255,255,0) 70%);
    border-radius: 50%;
}
.feat-hero .container { position: relative; z-index: 1; max-width: 780px; }
.feat-hero .eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.18);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    backdrop-filter: blur(4px);
}
.feat-hero h1 {
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.1;
    font-weight: 800;
    margin: 0 0 18px;
    letter-spacing: -0.025em;
}
.feat-hero p {
    font-size: 1.18rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.94);
    margin: 0 auto 28px;
    max-width: 620px;
}
.feat-hero .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.feat-hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.45); }
.feat-hero .btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: #fff; }

/* Trust badge row */
.feat-trust {
    background: var(--slate-50);
    border-top: 1px solid var(--slate-200);
    border-bottom: 1px solid var(--slate-200);
    padding: 22px 0;
}
.feat-trust .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; }
.feat-trust .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--slate-700);
}
.feat-trust .badge .ic { font-size: 1.25rem; }

/* ---- Section heading helper ---- */
.feat-section { padding: 84px 0; }
.feat-section.alt { background: var(--slate-50); }
.feat-section-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.feat-section-head .kicker {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-600);
    margin-bottom: 10px;
}
.feat-section-head h2 {
    font-size: 34px;
    font-weight: 800;
    color: var(--slate-900);
    margin: 0 0 12px;
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.feat-section-head p {
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--slate-600);
    margin: 0;
}

/* ---- Feature highlight grid (10 cards) ---- */
.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.feat-card {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.feat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--teal-100);
}
.feat-card .ic {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 14px;
    display: block;
}
.feat-card h3 {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--slate-900);
    margin: 0 0 8px;
}
.feat-card p {
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--slate-600);
    margin: 0;
}

/* ---- Module showcase (alternating image/text rows) ---- */
.module-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 64px;
}
.module-row:last-child { margin-bottom: 0; }
.module-row.reverse .module-shot { order: 2; }
.module-row.reverse .module-text { order: 1; }

.module-shot {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--slate-200);
    background: #fff;
}
.module-shot img {
    display: block;
    width: 100%;
    height: auto;
}
.module-shot .shot-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--teal-600);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}
.module-shot--text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 48px 32px;
    background: linear-gradient(135deg, var(--teal-50) 0%, #fff 60%);
}
.module-shot--text .module-shot-inner {
    max-width: 340px;
    text-align: center;
}
.module-shot--text .module-shot-inner strong {
    display: block;
    font-size: 1.05rem;
    color: var(--slate-900);
    margin-bottom: 8px;
}
.module-shot--text .module-shot-inner span {
    display: block;
    font-size: 0.92rem;
    color: var(--slate-600);
    line-height: 1.6;
    margin-bottom: 18px;
}
.module-shot--text .module-shot-inner a {
    font-weight: 600;
    color: var(--teal-600);
    text-decoration: none;
}
.module-shot--text .module-shot-inner a:hover { text-decoration: underline; }

.module-text .mod-num {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--teal-600);
    background: var(--teal-50);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}
.module-text h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--slate-900);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.module-text .desc {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--slate-600);
    margin: 0 0 18px;
}
.module-text ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.module-text li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--slate-700);
}
.module-text li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--teal-50);
    color: var(--teal-600);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Stats band (reuse on features) ---- */
.feat-stats {
    background: linear-gradient(135deg, var(--teal-700), var(--teal-800));
    color: #fff;
    padding: 84px 0;
}
.feat-stats .container { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.feat-stats .stat .num { font-size: 2.6rem; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.feat-stats .stat .label { font-size: 0.86rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .feat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .feat-grid { grid-template-columns: 1fr; }
    .module-row { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
    .module-row.reverse .module-shot,
    .module-row.reverse .module-text { order: initial; }
    .feat-stats .container { grid-template-columns: repeat(2,1fr); gap: 32px 16px; }
    .feat-hero .hero-cta .btn { width: 100%; max-width: 340px; }
}

/* ============================================================
   gallery.css — gallery.html
   ============================================================ */
/* ==========================================================================
   SmileCare — Template gallery page styles
   Internal tool (noindex). Reuses brand tokens, nav, buttons, and footer
   from landing-page.css. Only the gallery-specific rules live here.
   ========================================================================== */

:root {
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}

/* ---- Centered hero (this page doesn't need the two-column layout) ---- */
.gallery-hero {
    background: linear-gradient(180deg, #fff 0%, var(--slate-50) 100%);
    padding: 80px 24px 60px;
    text-align: center;
}
.gallery-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-700);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: none;
    letter-spacing: normal;
}
.gallery-hero .dot {
    width: 8px;
    height: 8px;
    background: var(--teal-500);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}
.gallery-hero h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--slate-900);
    max-width: 700px;
    margin: 0 auto 16px;
}
.gallery-hero h1 .accent {
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gallery-hero p {
    font-size: 18px;
    color: var(--slate-500);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---- Gallery grid ---- */
.gallery-section { max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }

/* ---- Card ---- */
.gallery-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translateY(40px) scale(0.95);
}
.gallery-card.revealed { opacity: 1; transform: translateY(0) scale(1); }
.gallery-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-xl); }
.gallery-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(15,23,42,0.75) 100%);
    opacity: 0; transition: opacity 0.4s ease; z-index: 1;
}
.gallery-card:hover::after { opacity: 1; }
.gallery-card img {
    width: 100%; height: 320px; object-fit: cover; display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-card:hover img { transform: scale(1.08); }

.card-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; z-index: 2;
    transform: translateY(10px); opacity: 0; transition: all 0.4s ease 0.05s;
}
.gallery-card:hover .card-overlay { transform: translateY(0); opacity: 1; }
.card-overlay h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.card-overlay p { color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 400; }

.card-badge {
    position: absolute; top: 16px; right: 16px;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
    color: var(--teal-700); padding: 6px 12px; border-radius: 20px;
    font-size: 12px; font-weight: 600; z-index: 3; box-shadow: var(--shadow-sm);
    opacity: 0; transform: translateY(-5px); transition: all 0.3s ease 0.1s;
}
.gallery-card:hover .card-badge { opacity: 1; transform: translateY(0); }

.open-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0);
    width: 56px; height: 56px; background: rgba(255,255,255,0.95); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; z-index: 3;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: var(--shadow-lg);
}
.gallery-card:hover .open-icon { transform: translate(-50%, -50%) scale(1); }
.open-icon svg { width: 22px; height: 22px; color: var(--teal-600); }

/* Featured card (first one larger) */
.gallery-grid .gallery-card:first-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid .gallery-card:first-child { grid-column: 1 / -1; }
    .gallery-grid .gallery-card:first-child img { height: 420px; }
}
@media (min-width: 1024px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Floating particles (subtle background animation) ---- */
.particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: hidden; }
.particle { position: absolute; width: 6px; height: 6px; background: var(--teal-500); border-radius: 50%; opacity: 0.12; animation: float-particle linear infinite; }
@keyframes float-particle {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.12; }
    90% { opacity: 0.12; }
    100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-grid .gallery-card:first-child img,
    .gallery-card img { height: 240px; }
}

/* ============================================================
   legal.css — Legal pages (privacy, terms, certificates, accessibility, hipaa guide)
   ============================================================ */
/* ==========================================================================
   SmileCare — Legal / Document page styles
   Reuses brand tokens from landing-page.css (:root variables).
   Designed for: trial.html, privacy-policy.html, terms.html
   ========================================================================== */

/* ---- Document hero (slim band under nav) ---- */
.doc-hero {
    background: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-700) 55%, var(--teal-800) 100%);
    color: #fff;
    padding: 56px 0 64px;
    position: relative;
    overflow: hidden;
}
.doc-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255,255,255,0.10), rgba(255,255,255,0) 70%);
    border-radius: 50%;
}
.doc-hero .container { position: relative; z-index: 1; max-width: 760px; }
.doc-hero .eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.18);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    backdrop-filter: blur(4px);
}
.doc-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}
.doc-hero .updated {
    font-size: 0.95rem;
    opacity: 0.92;
    margin: 0;
}
.doc-hero .lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.94);
    margin: 18px 0 0;
    max-width: 620px;
}

/* ---- Standard hero overrides for legal/document pages ---- */
.hero .updated {
    font-size: 15px;
    color: var(--slate-500);
    margin: 0 0 4px;
}

/* ---- Document body (centered reading column) ---- */
.doc-body {
/*     padding: 56px 0 72px; */
    background: #fff;
}
.doc-wrap {
/*     max-width: 820px; */
    margin: 0 auto;
}

/* "On this page" jump nav */
.doc-toc {
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    border-left: 4px solid var(--teal-600);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 0 0 40px;
}
.doc-toc h2 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-700);
    margin: 0 0 12px;
}
.doc-toc ol {
    columns: 2;
    column-gap: 28px;
    margin: 0;
    padding-left: 18px;
    counter-reset: tocitem;
}
.doc-toc li {
    break-inside: avoid;
    margin: 0 0 6px;
    font-size: 0.92rem;
    line-height: 1.4;
}
.doc-toc a { color: var(--slate-600); text-decoration: none; font-weight: 500; }
.doc-toc a:hover { color: var(--teal-700); text-decoration: underline; }

/* ---- Typography for legal content ---- */
.doc-wrap h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--slate-900);
    margin: 44px 0 14px;
    padding-top: 12px;
    border-top: 1px solid var(--slate-100);
    letter-spacing: -0.01em;
    scroll-margin-top: 90px;
}
.doc-wrap h2:first-of-type { border-top: none; padding-top: 0; }
.doc-wrap h2 .num {
    color: var(--teal-600);
    margin-right: 8px;
}
.doc-wrap h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--slate-800);
    margin: 26px 0 10px;
}
.doc-wrap p {
    font-size: 1.0rem;
    line-height: 1.72;
    color: var(--slate-700);
    margin: 0 0 16px;
}
.doc-wrap ul, .doc-wrap ol {
    margin: 0 0 18px;
    padding-left: 22px;
}
.doc-wrap li {
    font-size: 1.0rem;
    line-height: 1.7;
    color: var(--slate-700);
    margin: 0 0 8px;
}
.doc-wrap li::marker { color: var(--teal-600); font-weight: 700; }
.doc-wrap strong { color: var(--slate-900); font-weight: 700; }
.doc-wrap a { color: var(--teal-700); font-weight: 600; text-decoration: none; text-underline-offset: 2px; }
.doc-wrap a:hover { color: var(--teal-800); text-decoration: underline; }
.doc-wrap em { font-style: italic; color: var(--slate-600); }

/* Callout / highlight box */
.callout {
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 24px 0;
}
.callout strong { color: var(--teal-800); }

/* Warning / important callout (amber) */
.callout.important {
    background: #fffbeb;
    border-color: #fde68a;
    border-left: 4px solid #f59e0b;
}
.callout.important strong { color: #b45309; }

/* Big inline CTA inside the doc (trial page) */
.doc-cta-inline {
    margin: 32px 0 8px;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--teal-50), #fff);
    border: 1px solid var(--teal-100);
    border-radius: 14px;
    text-align: center;
}
.doc-cta-inline p { margin: 0 0 14px; font-size: 1.05rem; color: var(--slate-700); }
.doc-cta-inline .btn { margin: 0 6px; }

/* Contact block at the end of legal pages */
.doc-contact {
    margin-top: 48px;
    padding: 28px 32px;
    background: var(--slate-50);
    border-radius: 14px;
    border: 1px solid var(--slate-100);
}
.doc-contact h2 { border-top: none; padding-top: 0; margin-top: 0; }
.doc-contact a { font-size: 1.05rem; }
.doc-contact p:last-child { margin-bottom: 0; }

/* Trial highlight banner (top of trial page) */
.trial-banner {
    margin: 0 0 32px;
    padding: 22px 26px;
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    text-align: center;
}
.trial-banner .big {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--teal-800);
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}
.trial-banner .sub {
    font-size: 1.0rem;
    color: var(--slate-600);
    margin: 0;
}

/* Stats band reuse (lighter, legal pages) */
.doc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 40px 0;
}
.doc-stat {
    text-align: center;
    padding: 22px 12px;
    background: var(--slate-50);
    border-radius: 12px;
    border: 1px solid var(--slate-100);
}
.doc-stat .num {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--teal-600);
    line-height: 1;
    margin-bottom: 6px;
}
.doc-stat .label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Final CTA band on legal pages */
.cta-band {
    background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-800) 100%);
    color: #fff;
    padding: 56px 0;
    text-align: center;
}
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.2rem); border-top: none; padding-top: 0; margin: 0 0 12px; font-weight: 800; }
.cta-band p { color: rgba(255,255,255,0.92); font-size: 1.1rem; margin: 0 0 26px; }
.cta-band .btn { margin: 0 8px; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 720px) {
    .doc-toc ol { columns: 1; }
    .doc-stats { grid-template-columns: repeat(2, 1fr); }
    .cta-band .btn { display: block; margin: 0 auto 12px; width: 100%; max-width: 320px; }
    .cta-band .btn:last-child { margin-bottom: 0; }
    .doc-cta-inline .btn { display: block; margin: 0 auto 10px; width: 100%; max-width: 320px; }
    .doc-cta-inline .btn:last-child { margin-bottom: 0; }
}

/* ===== Legal UL / LI Styling ===== */
.doc-body ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.doc-body ul li {
  position: relative;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
  border-left: 3px solid #0d9488;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1e293b;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.doc-body ul li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #0d9488;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.doc-body ul li:hover {
  background: linear-gradient(135deg, #ccfbf1 0%, #f0fdfa 100%);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.08);
}

.doc-body ul li strong {
  color: #0f766e;
}

/* ============================================================
   payment.css — payment.html
   ============================================================ */
/* ==========================================================================
   SmileCare — Payment options page styles
   Reuses brand tokens, nav, buttons, and footer from landing-page.css.
   Only the page-specific hero + payment grid rules live here.
   ========================================================================== */

/* ---- Centered hero (matches compare.html / gallery.html pattern) ---- */
.payment-hero {
    padding: 64px 0 48px;
    text-align: center;
    background: linear-gradient(180deg, var(--teal-50) 0%, #fff 100%);
}
.payment-hero h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--slate-900);
    margin: 14px 0 16px;
    letter-spacing: -0.02em;
}
.payment-hero h1 .accent { color: var(--teal-600); }
.payment-hero p {
    font-size: 18px;
    color: var(--slate-500);
    max-width: 600px;
    margin: 0 auto;
}

/* ---- Payment method grid: 2 blocks per row ---- */
.payment-section { padding: 8px 0 90px; }
.payment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.payment-card {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    padding: 32px;
    transition: all .2s;
    position: relative;
    display: flex;
    flex-direction: column;
}
.payment-card:hover { border-color: var(--teal-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.payment-card.recommended { border: 2px solid var(--teal-500); box-shadow: var(--shadow-md); }

.pm-badge {
    position: absolute; top: -13px; left: 32px;
    background: var(--teal-600); color: #fff;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 5px 14px; border-radius: 999px;
}
.pm-badge-save { background: var(--amber); }

.pm-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pm-ico {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px;
    background: var(--teal-50); border: 1px solid var(--teal-100);
    display: grid; place-items: center; font-size: 26px;
}
.pm-top h3 { font-size: 19px; font-weight: 700; color: var(--slate-900); }
.pm-top .pm-sub { font-size: 13px; color: var(--slate-500); margin-top: 2px; }

.pm-price { font-size: 30px; font-weight: 800; color: var(--slate-900); margin-bottom: 6px; }
.pm-price .cur { font-size: 18px; font-weight: 700; color: var(--slate-500); }
.pm-price .pm-per { font-size: 14px; font-weight: 500; color: var(--slate-500); }

.payment-card p.pm-desc { font-size: 14.5px; color: var(--slate-600); margin-bottom: 20px; }

.pm-paypal { margin-top: auto; padding-top: 6px; min-height: 45px; }

.payment-note { text-align: center; font-size: 14px; color: var(--slate-500); margin-top: 36px; }
.payment-note a { color: var(--teal-600); font-weight: 600; text-decoration: none; }
.payment-note a:hover { text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 720px) {
    .payment-grid { grid-template-columns: 1fr; }
    .payment-hero { padding: 48px 0 36px; }
    .payment-hero p { font-size: 16px; }
    .payment-card { padding: 26px 22px; }
}

/* ============================================================
   roi-calculator.css — ROI calculator widget
   ============================================================ */
/* ============================================================
   SmileCare — Interactive ROI Calculator
   Lets dental practice owners estimate their annual savings
   from reducing no-shows, saving admin time, and recovering
   billing leakage & recall revenue.
   ============================================================ */

/* ---- Section wrapper ---- */
.roi-section {
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
    padding: 80px 0;
}
.roi-section .section-head {
    text-align: center;
    margin-bottom: 48px;
}
.roi-section .eyebrow {
    color: var(--teal-700);
}

/* ---- Calculator card ---- */
.roi-calc {
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .08);
    border: 1px solid var(--slate-200);
    overflow: hidden;
}
.roi-calc-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* ---- Inputs panel (left) ---- */
.roi-inputs {
    padding: 40px 36px;
    background: #fbfdff;
    border-right: 1px solid var(--slate-200);
}
.roi-inputs h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-800);
    margin-bottom: 6px;
}
.roi-inputs .roi-hint {
    font-size: 13px;
    color: var(--slate-500);
    margin-bottom: 28px;
}

/* ---- Slider row ---- */
.roi-slider-row {
    margin-bottom: 26px;
}
.roi-slider-row:last-child {
    margin-bottom: 0;
}
.roi-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.roi-slider-label .label-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-700);
}
.roi-slider-label .label-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--teal-700);
    font-variant-numeric: tabular-nums;
}
.roi-slider-label .label-value .unit {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-400);
    margin-left: 2px;
}

/* ---- Custom range slider ---- */
.roi-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 100px;
    background: var(--slate-200);
    outline: none;
    cursor: pointer;
}
.roi-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--teal-600);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(13, 148, 136, .35);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.roi-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 12px rgba(13, 148, 136, .45);
}
.roi-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--teal-600);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(13, 148, 136, .35);
    cursor: pointer;
}
.roi-slider:focus {
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .15);
}

/* ---- Results panel (right) ---- */
.roi-results {
    padding: 40px 36px;
    background: linear-gradient(160deg, var(--teal-800) 0%, var(--teal-700) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.roi-results h3 {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}

/* ---- Big total number ---- */
.roi-total {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.roi-total .roi-currency {
    font-size: 28px;
    font-weight: 700;
    vertical-align: top;
    margin-right: 2px;
    color: var(--teal-100);
}
.roi-total-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 28px;
}

/* ---- Breakdown rows ---- */
.roi-breakdown {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 20px;
    margin-bottom: 28px;
}
.roi-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.roi-breakdown-row:last-child {
    border-bottom: none;
}
.roi-breakdown-row .br-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}
.roi-breakdown-row .br-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}
.roi-breakdown-row .br-value {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ---- ROI multiple badge ---- */
.roi-multiple {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 24px;
}
.roi-multiple .rm-icon {
    font-size: 28px;
}
.roi-multiple .rm-text {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    line-height: 1.4;
}
.roi-multiple .rm-text strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-top: 2px;
}

/* ---- CTA ---- */
.roi-cta {
    width: 100%;
    text-align: center;
}
.roi-cta .btn {
    width: 100%;
    margin-bottom: 10px;
}
.roi-cta-note {
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    text-align: center;
}

/* ---- Animated count-up ---- */
.roi-count-anim {
    transition: opacity .2s ease;
}

/* ---- Responsive ---- */
@media (max-width: 820px) {
    .roi-calc-inner {
        grid-template-columns: 1fr;
    }
    .roi-inputs {
        border-right: none;
        border-bottom: 1px solid var(--slate-200);
    }
    .roi-results {
        padding: 32px 28px;
    }
    .roi-total {
        font-size: 44px;
    }
}
@media (max-width: 480px) {
    .roi-inputs {
        padding: 28px 22px;
    }
    .roi-results {
        padding: 28px 22px;
    }
    .roi-total {
        font-size: 38px;
    }
    .roi-total .roi-currency {
        font-size: 22px;
    }
    .roi-breakdown-row .br-label {
        font-size: 13px;
    }
    .roi-breakdown-row .br-value {
        font-size: 15px;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .roi-slider::-webkit-slider-thumb {
        transition: none;
    }
    .roi-count-anim {
        transition: none;
    }
}

/* ============================================================
   engagement.css — Modals, video modal, exit popup, testimonial widgets
   ============================================================ */
/* ============================================================
   SmileCare — Engagement Features
   1. Sticky "Get Started" CTA bar (appears on scroll)
   2. Exit-intent popup with soft offer
   ============================================================ */

/* =============================================
   1. STICKY CTA BAR
   ============================================= */
.sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: #fff;
    border-top: 1px solid var(--slate-200);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, .10);
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.sticky-bar.show {
    transform: translateY(0);
}
.sticky-bar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.sticky-bar-msg {
    font-size: 15px;
    font-weight: 600;
    color: var(--slate-800);
    min-width: 0;
    line-height: 1.35;
}
.sticky-bar-msg .sticky-bar-sub {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--slate-500);
    margin-top: 2px;
}
.sticky-bar-ctas {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}
/* Match the top nav CTA buttons exactly (size, weight, radius) */
.sticky-bar-ctas .btn {
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 9px;
    white-space: nowrap;
}
.sticky-bar-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--slate-100);
    color: var(--slate-500);
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}
.sticky-bar-close:hover {
    background: var(--slate-200);
    color: var(--slate-700);
}

/* Responsive */
@media (max-width: 720px) {
    .sticky-bar-msg .sticky-bar-sub { display: none; }
    .sticky-bar-msg { font-size: 13.5px; }
    .sticky-bar-ctas .btn-ghost { display: none; }
    .sticky-bar-ctas .btn { padding: 9px 18px; font-size: 13px; }
    /* Two CTA buttons no longer reliably fit on one row alongside the
       message and close button, so wrap into a second row instead of
       letting anything overflow or get clipped. */
    .sticky-bar-inner {
        flex-wrap: wrap;
        row-gap: 8px;
        justify-content: center;
    }
    .sticky-bar-msg {
        flex: 1 1 100%;
        text-align: center;
    }
    .sticky-bar-ctas {
        flex: 1 1 auto;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .sticky-bar-inner { padding: 10px 16px; }
    .sticky-bar-msg { font-size: 12.5px; }
    .sticky-bar-ctas { flex-wrap: wrap; row-gap: 8px; }
    .sticky-bar-ctas .btn { padding: 8px 14px; font-size: 12.5px; }
}

/* =============================================
   2. EXIT-INTENT POPUP
   ============================================= */
.exit-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.exit-overlay.show {
    opacity: 1;
    visibility: visible;
}
.exit-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 480px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(15, 23, 42, .25);
    transform: scale(.92) translateY(20px);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    position: relative;
}
.exit-overlay.show .exit-modal {
    transform: scale(1) translateY(0);
}
.exit-modal-top {
    background: linear-gradient(135deg, var(--teal-600), var(--teal-800));
    padding: 36px 32px 28px;
    text-align: center;
    color: #fff;
    position: relative;
}
.exit-modal-top .em-badge {
    display: inline-block;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .25);
    color: var(--teal-50);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
}
.exit-modal-top .em-emoji {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 12px;
}
.exit-modal-top h3 {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.25;
}
.exit-modal-top p {
    font-size: 15px;
    color: var(--teal-100);
    line-height: 1.5;
}
.exit-modal-body {
    padding: 28px 32px 32px;
    text-align: center;
}
.exit-modal-body .em-perks {
    text-align: left;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.exit-modal-body .em-perks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--slate-600);
    line-height: 1.5;
    margin-bottom: 10px;
}
.exit-modal-body .em-perks li .em-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: var(--teal-50);
    color: var(--teal-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-top: 1px;
}
.exit-modal-body .btn {
    width: 100%;
    margin-bottom: 12px;
}
.exit-modal-body .em-fineprint {
    font-size: 12.5px;
    color: var(--slate-400);
    margin-top: 4px;
}
.exit-modal-body .em-nothanks {
    display: inline-block;
    background: none;
    border: none;
    color: var(--slate-400);
    font-size: 13px;
    cursor: pointer;
    padding: 6px;
    margin-top: 8px;
    transition: color .2s ease;
}
.exit-modal-body .em-nothanks:hover {
    color: var(--slate-600);
}
.exit-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: background .2s ease;
    z-index: 2;
}
.exit-close:hover {
    background: rgba(255, 255, 255, .3);
}

/* Responsive */
@media (max-width: 480px) {
    .exit-modal-top { padding: 28px 24px 22px; }
    .exit-modal-top h3 { font-size: 20px; }
    .exit-modal-top .em-emoji { font-size: 36px; }
    .exit-modal-body { padding: 22px 24px 26px; }
    .exit-modal-body .em-perks li { font-size: 13.5px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sticky-bar,
    .exit-modal,
    .exit-overlay {
        transition: none !important;
    }
}

/* ============================================================
   Trust & compatibility badges (homepage lower section)
   Light section that deliberately breaks from the dark .final-cta band
   directly below it, so the two read as separate blocks.
   ============================================================ */
.trust-band {
    position: relative;
    overflow: hidden;
    padding: 88px 0 92px;
    background: linear-gradient(180deg, #ffffff 0%, var(--teal-50) 62%, #e6faf6 100%);
    color: var(--slate-700);
    border-top: 1px solid var(--teal-100);
    border-bottom: 4px solid var(--teal-700);
}

/* Decorative glows, tuned for the light ground */
.trust-band::before,
.trust-band::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.trust-band::before {
    width: 640px;
    height: 640px;
    top: -330px;
    right: -180px;
    background: radial-gradient(circle, rgba(45, 212, 191, .18), transparent 68%);
}

.trust-band::after {
    width: 520px;
    height: 520px;
    bottom: -300px;
    left: -170px;
    background: radial-gradient(circle, rgba(20, 184, 166, .13), transparent 68%);
}

.trust-band .container {
    position: relative;
    z-index: 1;
}

/* ---- Head ---- */
.trust-head .trust-eyebrow {
    color: var(--teal-700);
}

.trust-band .section-head h2 {
    color: var(--slate-900);
}

.trust-band .section-head p {
    color: var(--slate-600);
}

/* ---- Cards ---- */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: stretch;
}

.trust-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--teal-100);
    border-radius: 18px;
    padding: 30px 26px 26px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px rgba(13, 148, 136, .07);
    transition: box-shadow .22s, border-color .22s, transform .22s;
    overflow: hidden;
}

/* Top accent rule */
.trust-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal-400), var(--teal-600), var(--teal-400));
    opacity: .55;
    transition: opacity .22s;
}

.trust-card:hover {
    border-color: var(--teal-200);
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, .05), 0 18px 34px rgba(13, 148, 136, .16);
}

.trust-card:hover::before {
    opacity: 1;
}

.trust-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    flex: 0 0 auto;
    color: var(--teal-700);
    background: linear-gradient(140deg, var(--teal-50), #d6f7f0);
    border: 1px solid var(--teal-100);
    transition: transform .22s, background .22s, border-color .22s, color .22s;
}

.trust-card:hover .trust-icon {
    transform: scale(1.06);
    color: #fff;
    background: linear-gradient(140deg, var(--teal-500), var(--teal-700));
    border-color: var(--teal-600);
}

.trust-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--slate-900);
    margin-bottom: 11px;
    letter-spacing: -.2px;
    line-height: 1.3;
}

.trust-card p {
    font-size: 14px;
    line-height: 1.68;
    color: var(--slate-600);
    margin-bottom: 18px;
    flex: 1 1 auto;
}

.trust-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--teal-700);
    text-decoration: none;
    align-self: flex-start;
    padding-bottom: 2px;
    border-bottom: 1.5px solid var(--teal-200);
    transition: color .18s, border-color .18s;
}

.trust-link::after {
    content: "\2192";
    transition: transform .18s;
}

.trust-link:hover {
    color: var(--teal-800);
    border-bottom-color: var(--teal-600);
}

.trust-link:hover::after {
    transform: translateX(3px);
}

/* ---- Compatibility + payment panel ---- */
.trust-panel {
    margin-top: 42px;
    padding: 40px 44px 36px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-900) 100%);
    border: 1px solid var(--teal-700);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .17);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: start;
    text-align: center;
}

.trust-panel-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trust-panel-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, rgba(153, 246, 228, .38), transparent);
}

.trust-compat-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--teal-200);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    margin-bottom: 22px;
    line-height: 1.5;
}

/* ---- Platform tiles ---- */
.platform-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 0 0 20px;
}

.platform-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 15px 24px;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(153, 246, 228, .3);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.1px;
    transition: background .18s, border-color .18s, transform .18s;
}

.platform-item:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(94, 234, 212, .65);
    transform: translateY(-2px);
}

/* Device / OS group — stronger tint so the two groups read apart */
.platform-item-os {
    background: rgba(20, 184, 166, .3);
    border-color: rgba(94, 234, 212, .46);
    color: #f0fdfa;
}

.platform-item-os:hover {
    background: rgba(20, 184, 166, .45);
    border-color: rgba(94, 234, 212, .78);
}

/* Payment tiles — solid white on the dark panel for maximum emphasis */
.platform-item-pay {
    min-width: 190px;
    padding: 16px 28px;
    background: #fff;
    border-color: #fff;
    color: var(--teal-800);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.platform-item-pay:hover {
    background: var(--teal-50);
    border-color: var(--teal-50);
    color: var(--teal-900);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
}

.trust-compat-note {
    font-size: 12.5px;
    color: rgba(204, 251, 241, .9);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.62;
}

.trust-compat-note a {
    color: var(--teal-200);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(94, 234, 212, .45);
}

.trust-compat-note a:hover {
    color: #fff;
    border-bottom-color: var(--teal-200);
}

/* ---- Responsive ---- */
@media (max-width: 1080px) {
    .trust-panel {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 34px 28px 30px;
    }
    .trust-panel-divider {
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(153, 246, 228, .38), transparent);
    }
}

@media (max-width: 1000px) {
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .trust-band { padding: 64px 0 68px; border-bottom-width: 3px; }
    .trust-grid { grid-template-columns: 1fr; gap: 16px; }
    .trust-card { padding: 24px 22px 22px; border-radius: 16px; }
    .trust-card h3 { font-size: 17px; }
    .trust-icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 16px; }
    .trust-panel { margin-top: 30px; padding: 28px 20px 26px; border-radius: 16px; gap: 26px; }
    .trust-compat-label { font-size: 12px; margin-bottom: 18px; }
    .platform-row { gap: 9px; }
    .platform-item {
        min-width: 0;
        flex: 1 1 calc(50% - 9px);
        padding: 14px 14px;
        font-size: 15px;
    }
    .platform-item-pay { flex: 1 1 100%; min-width: 0; }
    .trust-compat-note { max-width: none; }
}

@media (max-width: 420px) {
    .platform-item { font-size: 14px; padding: 12px 10px; }
    .trust-card { padding: 22px 18px 20px; }
}

/* Respect reduced motion for the new hover lifts */
@media (prefers-reduced-motion: reduce) {
    .trust-card,
    .trust-icon,
    .trust-link::after,
    .platform-item {
        transition: none !important;
    }
    .trust-card:hover,
    .platform-item:hover {
        transform: none;
    }
}