/* ==========================================================================
   BillboardMax — brand layer over Bootstrap 5.3.8
   ========================================================================== */

:root {
    /* Brand palette: deep highway navy + warm signal amber */
    --bm-ink:        #0b1a2b;
    --bm-ink-2:      #14263c;
    --bm-ink-3:      #1d3553;
    --bm-cloud:      #f6f8fb;
    --bm-line:       #e5eaf1;
    --bm-muted:      #5d6b80;
    --bm-amber:      #ffb020;
    --bm-amber-2:    #ff8a00;
    --bm-success:    #16a34a;

    /* Bootstrap variable overrides */
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                           'Helvetica Neue', Arial, sans-serif;
    --bs-body-color:   var(--bm-ink);
    --bs-body-bg:      #ffffff;
    --bs-primary:      var(--bm-ink);
    --bs-primary-rgb:  11, 26, 43;
    --bs-link-color:   var(--bm-ink);
    --bs-link-hover-color: var(--bm-amber-2);
    --bs-border-color: var(--bm-line);
    --bs-heading-color: var(--bm-ink);
    --bs-border-radius:    0.45rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
}

html { overflow-x: hidden; }
/* Smooth scroll only when the user hasn't asked for reduced motion AND
   they have actually focused something on the page (covers anchor jumps
   without forcing trackpad/wheel inertia to be re-interpolated). */
@media (prefers-reduced-motion: no-preference) {
    html:focus-within { scroll-behavior: smooth; }
}
.nowrap { white-space: nowrap; }
.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }
.no-border { border: 0 !important; }
.no-outline { outline: 0 !important; }
.no-border-radius { border-radius: 0 !important; }
.no-shadow { box-shadow: none !important; }
.no-box-shadow { box-shadow: none !important; }
.no-box-shadow { box-shadow: none !important; }
.no-background { background: none !important; }
.no-padding-left { padding-left: 0 !important; }
.no-padding-right { padding-right: 0 !important; }
body {
    overflow-x: hidden;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings — tighter, more editorial */
h1, .h1, h2, .h2, h3, .h3 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.display-3, .display-4, .display-5 { font-weight: 800; letter-spacing: -0.03em; }

.text-muted-2 { color: var(--bm-muted) !important; }
.bg-cloud     { background: var(--bm-cloud); }
.bg-ink       { background: var(--bm-ink); color: #fff; }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: #fff; }

.section { padding: 6rem 0; }
.section-tight { padding: 4rem 0; }

@media (max-width: 768px) {
    .section { padding: 3.5rem 0; }
    .section-tight { padding: 2.5rem 0; }
}
.brand-background {
    background: radial-gradient(800px 400px at 90% 0%, rgba(255, 176, 32, 0.22), transparent 60%), linear-gradient(180deg, var(--bm-ink) 0%, var(--bm-ink-2) 100%);
}
 .accent-static {
    background: linear-gradient(90deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
 
 }
/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 0.65rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-lg { --bs-btn-padding-y: 0.95rem; --bs-btn-padding-x: 1.7rem; font-size: 1.05rem; }
 
.btn-primary {
    --bs-btn-bg: var(--bm-ink);
    --bs-btn-border-color: var(--bm-ink);
    --bs-btn-hover-bg: var(--bm-ink-2);
    --bs-btn-hover-border-color: var(--bm-ink-2);
    --bs-btn-active-bg: var(--bm-ink-3);
}
.btn-amber {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, var(--bm-amber) 0%, #ffbe00 100%);
    border: 1px solid #ff8a00;
    color: #1a1206;
    font-weight: 700;
    /* box-shadow: 0 6px 18px rgb(169 131 33 / 28%); */
}
.btn-amber:hover {
    color: #1a1206;
 
    border: 1px #f89804 solid;
}
.btn-outline-light-2 {
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    background: transparent;
}
.btn-outline-light-2:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: #000;
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    color: var(--bs-btn-disabled-color);
    pointer-events: none;
    background-color: var(--bs-btn-disabled-bg);
    border-color:  #f89804;
    opacity: var(--bs-btn-disabled-opacity);
}
/* ==========================================================================
   Top bar + Navbar
   ========================================================================== */

.topbar {
    background: var(--bm-ink);
    color: rgba(255,255,255,0.82);
    font-size: 0.83rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar a { color: rgba(255,255,255,0.92); text-decoration: none; }
.topbar a:hover { color: var(--bm-amber); }

.navbar-brand {
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.35rem;
    color: var(--bm-ink);
    display: inline-flex !important;
    align-items: center;
    gap: 0.55rem;
}
.navbar-brand .brand-mark {
    width: 45px;
    height: 46px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, var(--bm-amber) 0%, #ffbe00 100%);
    border: 1px solid #ff8a00;
    color: #1a1206;
    display: inline-flex;
    align-items: center;
    justify-content: center;
     
    font-weight: 700;
    font-size: 1.3rem;
 
}
.planner-header .navbar-brand.small {
    font-size: 1.00rem;
    line-height: 1.1;
}
.navbar-brand.small .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.navbar-brand.small small {
    display: block;
    font-weight: 500;
    font-size: 0.51rem;
    color: var(--bm-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0px;
}
.navbar-brand small {
    display: block;
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--bm-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: -2px;
}
.navbar { transition: box-shadow 0.2s ease, background 0.2s ease; }
.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(8, 18, 30, 0.06);
    background: #fff;
}
.navbar .nav-link {
    color: var(--bm-ink);
    font-weight: 500;
    padding: 0.55rem 0.95rem !important;
}
.navbar .nav-link:hover { color: var(--bm-amber-2); }

/* Navbar dropdown — branded, soft-shadow, icon-led items */
.nav-dropdown.dropdown-menu {
    --bs-dropdown-min-width: 18rem;
    --bs-dropdown-padding-y: 0.6rem;
    --bs-dropdown-border-radius: 0.85rem;
    --bs-dropdown-link-color: var(--bm-ink);
    --bs-dropdown-link-hover-bg: var(--bm-cloud);
    --bs-dropdown-link-hover-color: var(--bm-ink);
    --bs-dropdown-link-active-bg: var(--bm-cloud);
    --bs-dropdown-link-active-color: var(--bm-ink);

    margin-top: 0.6rem;
    box-shadow: 0 18px 40px -12px rgba(11, 26, 43, 0.18),
                0 6px 14px -8px rgba(11, 26, 43, 0.10) !important;
    border: 1px solid var(--bm-line) !important;
    overflow: hidden;
}
.nav-dropdown .dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: 0.55rem;
    margin: 0 0.35rem;
    transition: background-color 0.12s ease;
}
.nav-dropdown .dropdown-item > i {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,176,32,0.18) 0%, rgba(255,138,0,0.10) 100%);
    color: var(--bm-amber-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown .dropdown-item:hover > i {
    background: linear-gradient(180deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    color: #1a1206;
}
.nav-dropdown .dropdown-item small { font-size: 0.78rem; line-height: 1.3; }
.nav-dropdown .dropdown-divider { margin: 0.35rem 0.6rem; }

/* The dropdown caret on the toggle inherits brand color */
.navbar .nav-link.dropdown-toggle::after {
    margin-left: 0.4em;
    vertical-align: 0.18em;
    border-top-color: currentColor;
    opacity: 0.7;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    background: radial-gradient(1200px 600px at 80% -10%, rgba(255, 176, 32, 0.25), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(29, 53, 83, 0.65), transparent 60%), linear-gradient(180deg, #0b1a2b 0%, #14263c 100%);
    
    color: #fff;
    overflow: hidden;
    padding: 6rem 0 5rem;
}
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 60%;
    background: #14263c;
    background-image: url(/assets/img/main_site_bg.jpg);
    background-size: cover;
    background-blend-mode: luminosity;
    /* position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
    pointer-events: none; */
}
.hero h1 {
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 800;
}
.hero h1 .accent, span.accent {
    background: linear-gradient(90deg, var(--bm-amber) 0%, #ffd57a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero .lead {
    color: rgba(255,255,255,0.82);
    font-size: 1.2rem;
    max-width: 38rem;
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
}
.hero-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,0.25);
}

/* Hero search card */
.hero-search {
    background: rgba(255,255,255,0.97);
    color: var(--bm-ink);
    border-radius: 1.25rem;
    padding: 1.1rem;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.4);
}
.hero-search label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bm-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
.hero-search .form-control,
.hero-search .form-select {
 
    box-shadow: none;
    height: 50px;
    line-height: 29px;
    padding: 0.4rem 0.6rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--bm-ink);
    background: #d8deef96;
    border: 1px #282f357a solid;
    border-radius: 5px;
}
.hero-search .form-control:focus { box-shadow: none; }
.hero-search .input-group-divider {
    width: 1px; background: var(--bm-line); align-self: stretch;
}

/* Hero trust strip ----------------------------------------------------------
 * Each trust signal is a glass-pill: subtle frosted background, 1px hairline
 * border, amber icon tile. The pill makes the item stand on its own — much
 * more "trust-worthy" than three loose icon-and-text pairs floating on the
 * dark hero gradient. On mobile/tablet the pills center and cap their width
 * so the column doesn't read as a stranded list. */
.trust-strip {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem; margin-top: 3rem;
}
.trust-item {
    display: flex; align-items: center; gap: 0.85rem;
    color: rgba(255,255,255,0.85);
    padding: 0.65rem 1rem 0.65rem 0.65rem;
    background: #13263c;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    box-shadow:
        0 12px 28px -16px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: background 0.22s ease, border-color 0.22s ease,
                transform 0.18s ease, box-shadow 0.22s ease;
}
.trust-item:hover,
.trust-item:focus-within {
    background: #13263c;
    border-color: rgba(255,176,32,0.40);
    transform: translateY(-1px);
    box-shadow:
        0 18px 36px -16px rgba(255, 138, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.trust-item .icon-circle {
    width: 44px; height: 44px; border-radius: 12px;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(255, 176, 32, 0.30), transparent 60%),
        rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 176, 32, 0.42);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--bm-amber);
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 6px 14px -6px rgba(255, 138, 0, 0.30);
}
.trust-item .label  { font-size: 0.85rem; font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -0.005em; }
.trust-item .sub    { font-size: 0.83rem; color: rgba(255,255,255,0.65); }

/* Tablet & mobile: center the pills and cap their width so they read as
   a tidy vertical stack rather than three full-width strips. */
@media (max-width: 991.98px) {
    .trust-strip { padding-top: 1.5rem; margin-top: 2.25rem; }
    .trust-strip > .row { justify-content: center; --bs-gutter-y: 0.85rem; }
    .trust-strip > .row > [class^="col-"],
    .trust-strip > .row > [class*=" col-"] {
        display: flex;
        justify-content: center;
    }
    .trust-item {
        width: 100%;
        max-width: 22rem;
    }
}
@media (max-width: 575.98px) {
    .trust-item { padding: 0.55rem 0.9rem 0.55rem 0.55rem; gap: 0.7rem; }
    .trust-item .icon-circle { width: 40px; height: 40px; font-size: 1.05rem; }
    .trust-item .label { font-size: 0.95rem; }
    .trust-item .sub { font-size: 0.78rem; }
}

/* ==========================================================================
   Section eyebrow + headings
   ========================================================================== */

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--bm-amber-2);
    margin-bottom: 0.7rem;
}
.section-title {
    font-size: clamp(2.3rem, 3.2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.section-sub {
    color: var(--bm-muted);
    font-size: 1.08rem;
    max-width: 42rem;
}

/* ==========================================================================
   How it works — modernized step cards with media overlay & sales CTA
   ========================================================================== */

.how-modern {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 540px at 50% -10%, rgba(255, 176, 32, 0.06), transparent 60%),
        var(--bm-cloud);
    isolation: isolate;
}

/* Decorative backdrop ----------------------------------------------------- */
.how-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    transform: translateZ(0);
}
.how-modern .how-grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(11, 26, 43, 0.08) 1px, transparent 1px),
        radial-gradient(900px 500px at 50% 30%, #fff 0%, var(--bm-cloud) 80%);
    background-size: 22px 22px, 100% 100%;
    background-blend-mode: multiply, normal;
    opacity: 0.45;
}
.how-glow {
    position: absolute;
    top: -120px; right: -100px;
    width: 460px; height: 460px;
    border-radius: 50%;
    /* Capped at 28px — was 60px; convolution cost scales ~quadratically. */
    filter: blur(28px);
    background: radial-gradient(closest-side, rgba(255, 176, 32, 0.28), transparent 70%);
    opacity: 0.55;
}

/* Mini horizontal stepper under the lede --------------------------------- */
.how-stepper {
    list-style: none;
    margin: 1.6rem auto 0;
    padding: 0;
    max-width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.how-stepper li {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.how-stepper li span {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--bm-amber-2);
    background: #fff;
    border: 1px solid rgba(255, 176, 32, 0.45);
    box-shadow: 0 6px 14px rgba(255, 138, 0, 0.10);
    flex-shrink: 0;
}
.how-stepper li:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 138, 0, 0.45) 0 6px,
        transparent 6px 12px
    );
}

/* --- Card ---------------------------------------------------------------- */
.how-card {
    background: #fff;
    border: 1px solid var(--bm-line);
    border-radius: 1.1rem;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 40px -22px rgba(11, 26, 43, 0.18);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.how-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -22px rgba(11, 26, 43, 0.22);
    border-color: rgba(255, 176, 32, 0.35);
}

/* --- Media (top of card) ------------------------------------------------- */
.how-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background:
        radial-gradient(140% 100% at 0% 0%, rgba(255, 176, 32, 0.20), transparent 55%),
        linear-gradient(180deg, var(--bm-cloud) 0%, #ffffff 100%);
    border-bottom: 1px solid var(--bm-line);
}
.how-media::after {
    /* Subtle bottom gradient for badge legibility on bright photos. */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(180deg, transparent, rgba(11, 26, 43, 0.28));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.how-media.has-image::after { opacity: 1; }
.how-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.5s ease;
}
.how-media.has-image img { opacity: 1; }
.how-card:hover .how-media.has-image img { transform: scale(1.04); }

/* Glass-morph step badge overlaid on the image */
.how-step-badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0.18rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 24px -10px rgba(11, 26, 43, 0.30);
    color: var(--bm-ink);
    font-feature-settings: "tnum";
}
.how-step-num {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1;
}
.how-step-of {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bm-muted);
    letter-spacing: 0.04em;
}

/* Fallback slot when image hasn't loaded ---------------------------------- */
.how-media-fallback {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.how-media-fallback i {
    font-size: 2.6rem;
    color: var(--bm-amber-2);
    opacity: 0.85;
    filter: drop-shadow(0 6px 14px rgba(255, 138, 0, 0.20));
}
.how-media-tag {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bm-muted);
    background: rgba(255, 255, 255, 0.85);
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    border: 1px dashed rgba(11, 26, 43, 0.18);
}
.how-media.has-image .how-media-fallback {
    opacity: 0;
    pointer-events: none;
}

/* --- Body ---------------------------------------------------------------- */
.how-body {
    padding: 1.5rem 1.6rem 1.7rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.how-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: flex-start;
    margin-bottom: 0.85rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--bm-amber-2);
    background: rgba(255, 176, 32, 0.10);
    border: 1px solid rgba(255, 176, 32, 0.32);
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
}
.how-meta i { font-size: 0.85rem; }

.how-title {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--bm-ink);
    margin: 0 0 0.55rem;
    line-height: 1.25;
}
.how-desc {
    color: var(--bm-muted);
    font-size: 0.97rem;
    line-height: 1.55;
    margin: 0 0 1.1rem;
}

.how-perks {
    list-style: none;
    margin: auto 0 0;
    padding: 1.1rem 0 0;
    border-top: 1px dashed var(--bm-line);
}
.how-perks li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.32rem 0;
    font-size: 0.92rem;
    color: var(--bm-ink);
    font-weight: 500;
}
.how-perks i {
    color: var(--bm-amber-2);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* --- Closing CTA banner -------------------------------------------------- */
.how-cta {
    margin-top: 2.5rem;
    position: relative;
    overflow: hidden;
    padding: 1.85rem 2rem;
    background:
        radial-gradient(620px 280px at 100% 0%, rgba(255, 176, 32, 0.20), transparent 60%),
        linear-gradient(180deg, var(--bm-ink) 0%, var(--bm-ink-2) 100%);
    color: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 28px 56px -20px rgba(11, 26, 43, 0.32);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
    justify-content: space-between;
}
.how-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%);
}
.how-cta-copy { flex: 1 1 360px; position: relative; z-index: 1; }
.how-cta h3 {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 0 0 0.35rem;
}
.how-cta p {
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    max-width: 46ch;
}
.how-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--bm-amber);
    margin-bottom: 0.55rem;
}
.how-cta-eyebrow .dot {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bm-amber);
}
.how-cta-eyebrow .dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 176, 32, 0.55);
    animation: bm-pulse 1.6s ease-out infinite;
    pointer-events: none;
}
.how-cta-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .how-cta { padding: 1.4rem 1.4rem; }
    .how-cta h3 { font-size: 1.18rem; }
    .how-stepper { max-width: 260px; }
    .how-stepper li span { width: 34px; height: 34px; font-size: 0.72rem; }
    .how-body { padding: 1.25rem 1.25rem 1.4rem; }
}

/* ==========================================================================
   Plans
   ========================================================================== */

.plan-card {
    background: #fff;
    border: 1px solid var(--bm-line);
    border-radius: 1.25rem;
    padding: 2.25rem;
    height: 100%;
    position: relative;
    /* Flex column lets the CTA hug the card bottom even when feature lists differ in length. */
    display: flex;
    flex-direction: column;
    /* No overflow:hidden — badges with negative `top` need to float above the card. */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 56px rgba(11, 26, 43, 0.10);
}
/* CTA always anchored to the bottom of the card so buttons line up across tiers. */
.plan-card > .btn,
.plan-card > a.btn { margin-top: auto; }

/* --- Starter card — refined light variant --------------------------------- */
.plan-card.starter {
    background:
        radial-gradient(600px 240px at 100% -20%, rgba(255, 176, 32, 0.12), transparent 60%),
        linear-gradient(180deg, #fffefb 0%, #ffffff 60%);
    border-color: var(--bm-line);
    box-shadow: 0 14px 36px -12px rgba(11, 26, 43, 0.08);
}
/* Top accent bar — runs along the top edge, follows the card's rounded corners */
.plan-card.starter::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--bm-amber) 0%, var(--bm-amber-2) 50%, transparent 100%);
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}
/* Decorative watermark "01" in the corner — clipped to card via its own bounds */
.plan-card.starter::after {
    content: "01";
    position: absolute;
    top: 1.4rem; right: 1.5rem;
    font-size: 4rem;
    font-weight: 900;
    color: var(--bm-ink);
    opacity: 0.04;
    letter-spacing: -0.05em;
    line-height: 1;
    pointer-events: none;
}
.plan-card.starter:hover {
    border-color: rgba(255, 176, 32, 0.45);
    box-shadow: 0 30px 60px -16px rgba(255, 138, 0, 0.18);
}

/* --- Growth card — warm middle tier (between Starter & Premium) ---------- */
.plan-card.growth {
    background:
        radial-gradient(620px 280px at 100% -20%, rgba(255, 138, 0, 0.18), transparent 60%),
        linear-gradient(180deg, #fff7ec 0%, #ffffff 65%);
    border-color: rgba(255, 138, 0, 0.32);
    box-shadow: 0 22px 48px -16px rgba(255, 138, 0, 0.22);
}
.plan-card.growth::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}
.plan-card.growth::after {
    content: "02";
    position: absolute;
    top: 1.4rem; right: 1.5rem;
    font-size: 4rem;
    font-weight: 900;
    color: var(--bm-amber-2);
    opacity: 0.10;
    letter-spacing: -0.05em;
    line-height: 1;
    pointer-events: none;
}
.plan-card.growth:hover {
    border-color: rgba(255, 138, 0, 0.55);
    box-shadow: 0 32px 60px -18px rgba(255, 138, 0, 0.30);
}
.plan-card.growth .plan-tag { color: var(--bm-amber-2); }

/* Growth badge — solid warm amber, sits between Starter's white pill and Premium's gradient */
.plan-badge.plan-badge-growth {
    background: linear-gradient(180deg, #ffd47a 0%, var(--bm-amber-2) 100%);
    color: #1a1206;
    box-shadow: 0 6px 16px rgba(255, 138, 0, 0.30);
}

/* Growth CTA — solid amber, slightly softer than Premium's btn-amber dominance */
.btn-growth {
    background: linear-gradient(180deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    color: #1a1206;
    border: 1.5px solid transparent;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.18s ease;
    position: relative;
    z-index: 1;
}
.btn-growth:hover,
.btn-growth:focus {
    color: #1a1206;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(255, 138, 0, 0.38);
    filter: brightness(1.04);
}
.btn-growth i { transition: transform 0.18s ease; }
.btn-growth:hover i { transform: translateX(3px); }

/* --- Premium (featured) card --------------------------------------------- */
.plan-card.featured {
    background:
        radial-gradient(600px 300px at 90% -20%, rgba(255, 176, 32, 0.18), transparent 60%),
        linear-gradient(180deg, var(--bm-ink) 0%, var(--bm-ink-2) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 30px 60px rgba(11, 26, 43, 0.22);
}
.plan-card.featured h3,
.plan-card.featured .plan-price { color: #fff; }

/* --- Badges --------------------------------------------------------------- */
.plan-badge {
    position: absolute; top: -12px; right: 1.5rem;
    background: linear-gradient(180deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    color: #1a1206;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    box-shadow: 0 6px 16px rgba(255, 138, 0, 0.35);
    display: inline-flex; align-items: center; gap: 0.35rem;
    z-index: 2;
}
.plan-badge.plan-badge-starter {
    background: #fff;
    color: var(--bm-ink);
    border: 1px solid var(--bm-line);
    box-shadow: 0 6px 14px rgba(11, 26, 43, 0.06);
}
.plan-badge.plan-badge-starter i { color: var(--bm-amber-2); }

/* --- Plan tag (small uppercase label) ------------------------------------ */
.plan-tag {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--bm-muted);
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}
.plan-card.starter .plan-tag {
    color: var(--bm-amber-2);
}
.plan-card.featured .plan-tag { color: rgba(255, 255, 255, 0.65); }

/* --- Price -------------------------------------------------------------- */
.plan-price {
    font-size: 2.6rem; font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--bm-ink);
    line-height: 1.05;
    position: relative;
    z-index: 1;
}
.plan-price small { font-size: 1rem; font-weight: 500; color: var(--bm-muted); }
.plan-card.featured .plan-price small { color: rgba(255, 255, 255, 0.7); }

.plan-price-label {
    display: block;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bm-muted) !important;
    margin-bottom: 0.2rem;
}

/* --- Sub copy ----------------------------------------------------------- */
.plan-sub {
    color: var(--bm-muted); font-size: 0.95rem; margin-bottom: 1.25rem;
    position: relative; z-index: 1;
}
.plan-card.featured .plan-sub { color: rgba(255, 255, 255, 0.72); }

/* --- Feature list — gradient circle checkmarks --------------------------- */
.plan-features { list-style: none; padding: 0; margin: 1.5rem 0; position: relative; z-index: 1; }
.plan-features li {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.5rem 0; font-size: 0.97rem;
}
.plan-features i {
    color: var(--bm-amber); font-size: 1.15rem; margin-top: 2px; flex-shrink: 0;
}

/* --- Starter CTA button — "ghost amber" ---------------------------------- */
.btn-starter {
    background: #fff;
    color: var(--bm-ink);
    border: 1.5px solid var(--bm-ink);
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease,
                box-shadow 0.18s ease, border-color 0.18s ease;
    position: relative;
    z-index: 1;
}
.btn-starter:hover {
    background: var(--bm-ink);
    color: #fff;
    border-color: var(--bm-ink);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(11, 26, 43, 0.18);
}
.btn-starter i { transition: transform 0.18s ease; }
.btn-starter:hover i { transform: translateX(3px); }

/* Comparison table */
/* ==========================================================================
   Plan comparison table v2 — branded, side-by-side
   ========================================================================== */

/* --- Compare-plans toggle button (collapses the comparison table) -------- */
.btn-compare-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.7rem 1.6rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--bm-ink);
    background: #fff;
    border: 1.5px solid var(--bm-ink);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(11, 26, 43, 0.06);
    transition: background-color 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.15s ease,
                box-shadow 0.18s ease;
}
.btn-compare-toggle:hover,
.btn-compare-toggle:focus-visible {
    background: var(--bm-ink);
    color: #fff;
    border-color: var(--bm-ink);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(11, 26, 43, 0.18);
}
.btn-compare-toggle .chev {
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}
.btn-compare-toggle:not(.collapsed) .chev { transform: rotate(180deg); }

/* Show/hide the right label depending on collapse state. */
.btn-compare-toggle .lbl-hide,
.btn-compare-toggle:not(.collapsed) .lbl-show { display: none; }
.btn-compare-toggle:not(.collapsed) .lbl-hide { display: inline; }

/* Give the collapsing wrapper a little breathing room when expanded. */
.compare-collapse.show,
.compare-collapse.collapsing { margin-top: 0.5rem; }

.compare-card {
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--bm-line);
    box-shadow: 0 30px 60px -20px rgba(11, 26, 43, 0.18);
    position: relative;
}

.compare-table-v2 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    /* Wider min-width to comfortably fit Feature + Starter + Growth + Premium columns. */
    min-width: 880px;
}

/* --- Header --- */
.compare-table-v2 thead th {
    background: linear-gradient(180deg, var(--bm-ink) 0%, var(--bm-ink-2) 100%);
    color: #fff;
    padding: 1.4rem 1.5rem;
    font-weight: 700;
    text-align: left;
    vertical-align: bottom;
    border: none;
    position: relative;
}
.compare-table-v2 thead th .th-eyebrow {
    display: block;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgb(222 172 7);
    margin-bottom: 0.2rem;
}
.compare-table-v2 thead th .th-title {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #242424;
}
.compare-table-v2 thead th .th-price {
    display: block;
    margin-top: 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bm-amber);
}
.compare-table-v2 thead th .th-price small {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}
.compare-table-v2 thead th .th-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    background: linear-gradient(180deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    color: #1a1206;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(255, 138, 0, 0.4);
}

/* Premium header column gets a subtle amber wash to bridge into the body */
.compare-table-v2 thead th.col-premium {
    background:
        linear-gradient(180deg, rgba(255, 176, 32, 0.18) 0%, rgba(255, 138, 0, 0.05) 100%),
        linear-gradient(180deg, var(--bm-ink) 0%, var(--bm-ink-2) 100%);
    border-bottom: 3px solid var(--bm-amber);
}

/* Growth header column — lighter amber wash; visually subordinate to Premium */
.compare-table-v2 thead th.col-growth {
    background:
        linear-gradient(180deg, rgba(255, 176, 32, 0.09) 0%, rgba(255, 138, 0, 0.02) 100%),
        linear-gradient(180deg, var(--bm-ink) 0%, var(--bm-ink-2) 100%);
    border-bottom: 3px solid rgba(255, 138, 0, 0.45);
}
.compare-table-v2 thead th.col-growth .th-price { color: #ffcb6e; }
.compare-table-v2 thead th .th-badge.th-badge-growth {
    background: linear-gradient(180deg, #ffd47a 0%, var(--bm-amber-2) 100%);
    box-shadow: 0 4px 10px rgba(255, 138, 0, 0.30);
}

/* The first (Feature) column header — slimmer */
.compare-table-v2 thead th.col-feature .th-title { font-size: 1.05rem; }

/* --- Body cells --- */
.compare-table-v2 tbody td,
.compare-table-v2 tfoot td {
    padding: 1.05rem 1.5rem;
    vertical-align: middle;
    font-size: 0.97rem;
    color: var(--bm-ink);
    border-bottom: 1px solid var(--bm-line);
    background: #fff;
    transition: background-color 0.15s ease;
}
.compare-table-v2 tbody tr:last-child td { border-bottom: 1px solid var(--bm-line); }

/* Feature column (left) */
.compare-table-v2 .col-feature {
    background: var(--bm-cloud);
    font-weight: 600;
    color: var(--bm-ink);
    width: 32%;
}
.compare-table-v2 tbody td.col-feature i {
    color: var(--bm-amber-2);
    margin-right: 0.55rem;
    font-size: 1.05rem;
    width: 1.4em;
    display: inline-block;
    text-align: center;
}

/* Growth column highlight — softer amber tint than Premium, threaded through the table */
.compare-table-v2 td.col-growth {
    background: linear-gradient(90deg, rgba(255, 176, 32, 0.03) 0%, rgba(255, 176, 32, 0.06) 100%);
    border-left: 1px solid rgba(255, 176, 32, 0.20);
    font-weight: 500;
}
.compare-table-v2 td.col-growth strong {
    color: var(--bm-ink);
    font-weight: 700;
}

/* Premium column highlight that runs through the whole table */
.compare-table-v2 td.col-premium {
    background: linear-gradient(90deg, rgba(255, 176, 32, 0.06) 0%, rgba(255, 176, 32, 0.10) 100%);
    border-left: 1px solid rgba(255, 176, 32, 0.35);
    font-weight: 500;
}
.compare-table-v2 td.col-premium strong {
    color: var(--bm-ink);
    font-weight: 700;
}

/* Row hover */
.compare-table-v2 tbody tr:hover td:not(.col-feature):not(.col-premium):not(.col-growth) {
    background: #fafbfd;
}
.compare-table-v2 tbody tr:hover td.col-growth {
    background: linear-gradient(90deg, rgba(255, 176, 32, 0.07) 0%, rgba(255, 176, 32, 0.11) 100%);
}
.compare-table-v2 tbody tr:hover td.col-premium {
    background: linear-gradient(90deg, rgba(255, 176, 32, 0.12) 0%, rgba(255, 176, 32, 0.18) 100%);
}

/* Yes / No / pill markers */
.compare-table-v2 .check-yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    color: #1a1206;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(255, 138, 0, 0.3);
}
.compare-table-v2 .check-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bm-cloud);
    color: var(--bm-muted);
    font-size: 1.1rem;
    border: 1px solid var(--bm-line);
}
.compare-table-v2 .pill {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}
.compare-table-v2 .pill-muted {
    background: var(--bm-cloud);
    color: var(--bm-muted);
    border: 1px solid var(--bm-line);
}
.compare-table-v2 .value-included {
    color: var(--bm-success);
    font-weight: 700;
    font-size: 0.85rem;
}

/* --- Footer (CTA row) --- */
.compare-table-v2 tfoot td {
    padding: 1.5rem;
    background: var(--bm-cloud);
    border-bottom: none;
}
.compare-table-v2 tfoot td.col-feature { background: var(--bm-cloud); }
.compare-table-v2 tfoot td.col-growth {
    background: linear-gradient(90deg, rgba(255, 176, 32, 0.06) 0%, rgba(255, 176, 32, 0.10) 100%);
    border-left: 1px solid rgba(255, 176, 32, 0.20);
}
.compare-table-v2 tfoot td.col-premium {
    background: linear-gradient(90deg, rgba(255, 176, 32, 0.10) 0%, rgba(255, 176, 32, 0.18) 100%);
    border-left: 1px solid rgba(255, 176, 32, 0.35);
}

/* --- Responsive: keep min-width and let it scroll horizontally --- */
@media (max-width: 768px) {
    .compare-table-v2 thead th { padding: 1rem; }
    .compare-table-v2 tbody td,
    .compare-table-v2 tfoot td { padding: 0.85rem 1rem; }
    .compare-table-v2 thead th .th-title { font-size: 1.15rem; }
    .compare-table-v2 thead th .th-price { font-size: 0.95rem; }
}

/* ==========================================================================
   Stats / Tracking / Cases
   ========================================================================== */

.stat-card {
    background: var(--bm-ink-2);
    color: #fff;
    border-radius: 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.06);
}
.stat-card .num {
    font-size: 2.4rem; font-weight: 800; letter-spacing: -0.025em;
    color: var(--bm-amber);
}
.stat-card .lab { color: rgba(255,255,255,0.75); }

.case-card {
    background: #fff;
    border: 1px solid var(--bm-line);
    border-radius: 1rem;
    padding: 1.75rem;
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.case-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(11,26,43,0.08); }

/* Head row: icon left, heading cluster (uplift + title + year) right.
   Body paragraph sits below at full width for readability. */
.case-card .case-head {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    margin-bottom: 1rem;
}
.case-card .case-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--bm-cloud);
    color: var(--bm-amber-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex: 0 0 48px;
    margin-bottom: 0;
}
.case-card .case-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.case-card .case-uplift {
    color: var(--bm-success); font-weight: 700; font-size: 0.95rem;
    margin-bottom: 0.2rem;
    line-height: 1.25;
}
.case-card .case-title {
    margin: 0 0 0.15rem;
    line-height: 1.3;
}
.case-card .case-year {
    margin: 0;
    line-height: 1.3;
}
.case-card .case-body {
    line-height: 1.55;
}

.tracking-list { list-style: none; padding: 0; margin: 0; }
.tracking-list li {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.65rem 0; font-size: 1.02rem; color: var(--bm-ink);
}
.tracking-list i {
    color: var(--bm-amber-2); font-size: 1.2rem; margin-top: 2px; flex-shrink: 0;
}

/* ==========================================================================
   Testimonials carousel
   ========================================================================== */

.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--bm-line);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 28px -14px rgba(11, 26, 43, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -16px rgba(11, 26, 43, 0.18);
}

/* --- Billboard ad image (landscape, top of card) ---------------------------- */
.testimonial-ad-wrap {
    position: relative;
    aspect-ratio: 700 / 200;
    background:
        linear-gradient(135deg, rgba(11, 26, 43, 0.06), rgba(11, 26, 43, 0.02)),
        var(--bm-cloud);
    overflow: hidden;
}
.testimonial-ad-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 -24px 32px -24px rgba(11, 26, 43, 0.22);
    pointer-events: none;
}
.testimonial-ad {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- Card body -------------------------------------------------------------- */
.testimonial-body {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.testimonial-card .quote-mark {
    color: var(--bm-amber);
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.4rem;
}
.testimonial-card .quote {
    color: var(--bm-ink);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    flex: 1;
}

/* --- Author row ------------------------------------------------------------- */
.testimonial-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bm-line);
}
.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--bm-amber), 0 4px 10px -4px rgba(11, 26, 43, 0.25);
    flex: 0 0 auto;
}
.testimonial-card .author {
    font-weight: 700;
    color: var(--bm-ink);
    line-height: 1.2;
}
.testimonial-card .role {
    color: var(--bm-muted);
    font-size: 0.85rem;
    line-height: 1.2;
}
.verified-badge {
    margin-left: auto;
    color: var(--bm-amber-2);
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* ==========================================================================
   FAQ — modern card list with topic chips, search, custom expand
   ========================================================================== */

.faq-modern {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(255, 176, 32, 0.06), transparent 60%),
        var(--bm-cloud);
    isolation: isolate;
}

/* Decorative backdrop ----------------------------------------------------- *
 * Promoted to its own GPU layer (`will-change: transform`) so the blurred
 * radial glows don't have to repaint when an FAQ panel changes height.
 */
.faq-modern .faq-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    transform: translateZ(0);
    contain: layout paint;
}
.faq-grid {
    position: absolute;
    inset: 0;
    /* Pre-baked radial fade via two stacked gradients — cheaper than mask-image
       (which can be expensive to repaint while sibling content animates). */
    background-image:
        radial-gradient(rgba(11, 26, 43, 0.10) 1px, transparent 1px),
        radial-gradient(900px 540px at 50% 30%, #fff 0%, var(--bm-cloud) 75%);
    background-size: 22px 22px, 100% 100%;
    background-blend-mode: multiply, normal;
    opacity: 0.55;
}
.faq-glow {
    position: absolute;
    width: 460px; height: 460px;
    border-radius: 50%;
    /* Capped at 28px — was 60px. The radial-gradient already supplies most
       of the soft falloff, so the additional GPU blur can stay small. */
    filter: blur(28px);
    opacity: 0.55;
}
.faq-glow-l {
    top: -140px; left: -120px;
    background: radial-gradient(closest-side, rgba(255, 176, 32, 0.28), transparent 70%);
}
.faq-glow-r {
    bottom: -180px; right: -120px;
    background: radial-gradient(closest-side, rgba(11, 26, 43, 0.18), transparent 70%);
}

/* Trust strip ------------------------------------------------------------- */
.faq-trust {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.4rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--bm-muted);
}
.faq-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.faq-trust i { color: var(--bm-amber-2); font-size: 0.95rem; }

/* Search ------------------------------------------------------------------ */
.faq-search {
    position: relative;
    max-width: 540px;
    margin: 1.7rem auto 0;
}
.faq-search .form-control {
    height: 54px;
    padding-left: 2.95rem;
    padding-right: 3rem;
    border-radius: 999px;
    border: 1px solid var(--bm-line);
    background: #fff;
    box-shadow: 0 14px 32px -16px rgba(11, 26, 43, 0.18);
    font-weight: 500;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.faq-search .form-control::placeholder {
    color: var(--bm-muted);
    font-weight: 400;
}
.faq-search .form-control:focus {
    border-color: rgba(255, 138, 0, 0.55);
    box-shadow: 0 14px 32px -12px rgba(255, 138, 0, 0.25);
    outline: none;
}
.faq-search-icon {
    position: absolute;
    top: 50%; left: 1.15rem;
    transform: translateY(-50%);
    color: var(--bm-muted);
    pointer-events: none;
    font-size: 1.05rem;
}
.faq-search-clear {
    position: absolute;
    top: 50%; right: 0.55rem;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--bm-muted);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.faq-search.is-filled .faq-search-clear { display: inline-flex; }
.faq-search-clear:hover { background: var(--bm-cloud); color: var(--bm-ink); }
.faq-search input[type="search"]::-webkit-search-cancel-button { display: none; }

/* List card --------------------------------------------------------------- */
.faq-list {
    margin-top: 2.4rem;
    background: #fff;
    border-radius: 1.25rem;
    border: 1px solid var(--bm-line);
    box-shadow:
        0 30px 60px -28px rgba(11, 26, 43, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
    /* Isolate the list as its own paint root so collapse animations inside
       don't ripple into the rest of the page. */
    contain: layout paint;
}

/* Custom expandable panel using grid-template-rows interpolation.
 * This is dramatically smoother than Bootstrap's pixel-height transition
 * because it animates a single CSS Grid track ratio rather than forcing
 * a layout recalculation against measured content height every frame. */
.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-item.is-open .faq-panel {
    grid-template-rows: 1fr;
}
.faq-panel-inner {
    overflow: hidden;
    min-height: 0; /* Required so the row can collapse below content height. */
}
@media (prefers-reduced-motion: reduce) {
    .faq-panel { transition: none; }
}

.faq-item {
    position: relative;
    border-bottom: 1px solid var(--bm-line);
}
.faq-item:last-child { border-bottom: 0; }

/* Amber side rail when open — opacity-only so it stays on the GPU. */
.faq-item::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.faq-item.is-open { background: #fffaf1; }
.faq-item.is-open::before { opacity: 1; }

/* Trigger button ---------------------------------------------------------- */
.faq-trigger {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 1.4rem 1.6rem;
    color: var(--bm-ink);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease;
}
.faq-trigger:hover { background: rgba(255, 176, 32, 0.05); }
.faq-trigger:focus-visible {
    outline: 2px solid var(--bm-amber-2);
    outline-offset: -2px;
}

.faq-num {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--bm-amber-2);
    background: rgba(255, 176, 32, 0.12);
    border: 1px solid rgba(255, 176, 32, 0.32);
    padding: 0.45rem 0.6rem;
    border-radius: 0.55rem;
    line-height: 1;
    min-width: 2.7rem;
    text-align: center;
}

.faq-q-wrap { min-width: 0; }
.faq-topic {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--bm-muted);
    margin-bottom: 0.3rem;
}
.faq-topic i { color: var(--bm-amber-2); font-size: 0.92rem; }
.faq-q {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bm-ink);
    letter-spacing: -0.01em;
    line-height: 1.4;
}

/* Plus → ✕ chevron */
.faq-chev {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--bm-cloud);
    color: var(--bm-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease,
                box-shadow 0.2s ease;
    flex-shrink: 0;
    border: 1px solid var(--bm-line);
}
.faq-trigger:hover .faq-chev {
    background: var(--bm-ink);
    color: #fff;
    border-color: var(--bm-ink);
}
.faq-trigger:not(.collapsed) .faq-chev {
    background: linear-gradient(180deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    color: #1a1206;
    border-color: transparent;
    transform: rotate(45deg);
    box-shadow: 0 6px 14px rgba(255, 138, 0, 0.32);
}

/* Answer ------------------------------------------------------------------ */
.faq-a {
    padding: 0 1.6rem 1.6rem 5.6rem;
    color: var(--bm-muted);
    line-height: 1.7;
    font-size: 0.97rem;
}

/* Empty state ------------------------------------------------------------- */
.faq-empty {
    margin: 1.5rem auto 0;
    text-align: center;
    color: var(--bm-muted);
}
.faq-empty a { color: var(--bm-amber-2); font-weight: 600; }

/* Talk-to-strategist card ------------------------------------------------- */
.faq-talk-card {
    margin-top: 2.5rem;
    padding: 1.85rem 1.85rem;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(620px 260px at 100% 0%, rgba(255, 176, 32, 0.20), transparent 60%),
        linear-gradient(180deg, var(--bm-ink) 0%, var(--bm-ink-2) 100%);
    color: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 28px 56px -20px rgba(11, 26, 43, 0.32);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem 1.5rem;
    justify-content: space-between;
}
.faq-talk-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%);
}
.faq-talk-stack { flex: 1 1 320px; position: relative; z-index: 1; }
.faq-talk-card h3 { color: #fff; }
.faq-talk-card p { color: rgba(255, 255, 255, 0.74); margin-bottom: 0; max-width: 46ch; }
.faq-talk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--bm-amber);
    margin-bottom: 0.6rem;
}
.faq-talk-eyebrow .dot {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bm-amber);
}
.faq-talk-eyebrow .dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 176, 32, 0.55);
    animation: bm-pulse 1.6s ease-out infinite;
    pointer-events: none;
}
/* `transform` + `opacity` only — both run on the compositor, so the pulse
   doesn't trigger a paint each frame the way an animated `box-shadow` does. */
@keyframes bm-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    80%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
.faq-talk-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}
/* "Ghost on dark" CTA used inside the talk-card */
.btn-faq-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.30);
    font-weight: 600;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                transform 0.15s ease;
}
.btn-faq-ghost:hover,
.btn-faq-ghost:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-1px);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .faq-trigger { gap: 0.7rem; padding: 1.1rem 1.05rem; }
    .faq-num     { font-size: 0.72rem; padding: 0.4rem 0.5rem; min-width: 2.3rem; }
    .faq-topic   { font-size: 0.66rem; }
    .faq-q       { font-size: 0.98rem; }
    .faq-a       { padding: 0 1.05rem 1.2rem 1.05rem; }
    .faq-chev    { width: 34px; height: 34px; font-size: 0.9rem; }
    .faq-talk-card { padding: 1.4rem; }
}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.cta-block {
    background:
        radial-gradient(800px 400px at 90% 0%, rgba(255,176,32,0.22), transparent 60%),
        linear-gradient(180deg, var(--bm-ink) 0%, var(--bm-ink-2) 100%);
    color: #fff;
    border-radius: 1.5rem;
    padding: 4rem;
    overflow: hidden;
    position: relative;
}
 
@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
 
        width: 95%;
        max-width: 1140px;
        
    }
    .hero::before {
        background-position: 77% top;
    }
}
@media (min-width: 1200px) {
    .hero::before {
        background-position: right top;
    }
}

@media (max-width: 768px) {
    .cta-block { padding: 2.5rem 1.75rem; }
}
.cta-block h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.cta-block p  { color: rgba(255,255,255,0.78); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    background: var(--bm-ink);
    color: rgba(255,255,255,0.7);
    padding: 4rem 0 1.5rem;
}
.footer h6 {
    color: #fff; text-transform: uppercase; font-size: 0.8rem;
    letter-spacing: 0.1em; margin-bottom: 1rem; font-weight: 700;
}
.footer a { color: rgba(255,255,255,0.7); text-decoration: none; display: block; padding: 0.25rem 0; }
.footer a:hover { color: var(--bm-amber); }
.footer-legal {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-legal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 28px 40px;
    align-items: start;
    width: 100%;
}

.footer-legal-col--meta {
    text-align: left;
}

.footer-legal-col--disclaimer {
    text-align: right;
}

.footer-legal-copy {
    margin: 0 0 10px;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.01em;
}

.footer-legal-address {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.5);
    max-width: 320px;
}

.footer-legal-disclaimer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.footer-legal-line {
    display: block;
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.58);
    text-wrap: balance;
}

.footer-legal-col--disclaimer .footer-legal-line {
    text-align: right;
}

@media (max-width: 767.98px) {
    .footer-legal-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-legal-col--meta,
    .footer-legal-col--disclaimer {
        text-align: center;
    }

    .footer-legal-col--disclaimer .footer-legal-line {
        text-align: center;
    }
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88rem;
}

.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    width: 100%;
    justify-content: center;
}

.footer-bottom-links a {
    display: inline-block;
    padding: 0;
}
.footer-button{
    display: block;
    padding: 15px 15px !important;
    color: #000 !important;
    width: 100%;
    max-width: 300px;
}
/* ==========================================================================
   National Coverage Section — full-bleed mission-control aesthetic
   ========================================================================== */

.coverage-section {
    position: relative;
    overflow: hidden;
    padding: 6rem 0 5rem;
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(255, 176, 32, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #061322 0%, #0b1a2b 35%, #0b1a2b 100%);
    color: #fff;
    isolation: isolate;
}
@media (max-width: 768px) {
    .coverage-section { padding: 4rem 0 3rem; }
}

/* --- Decorative backdrop (grid + soft glows) ------------------------------- */
.coverage-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.coverage-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
    opacity: 0.7;
}
.coverage-glow {
    position: absolute;
    width: 540px; height: 540px;
    border-radius: 50%;
    /* Capped at 32px — was 90px (one of the heaviest paint operations on
       the page). Visual difference is minimal because the underlying
       radial-gradient already feathers to transparent. */
    filter: blur(32px);
    opacity: 0.35;
}
.coverage-glow-l {
    top: 12%; left: -160px;
    background: radial-gradient(circle, var(--bm-amber-2), transparent 70%);
}
.coverage-glow-r {
    bottom: 4%; right: -180px;
    background: radial-gradient(circle, #2a6cff, transparent 70%);
    opacity: 0.22;
}

/* --- Header (centered, stacked rows) --------------------------------------- */
.coverage-header {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    /* flex-column ensures each child (badge, eyebrow, h2, p) gets its own line
       regardless of intrinsic display type. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.coverage-header > * { width: 100%; }
.coverage-header .live-badge {
    width: auto;
    margin-bottom: 0.85rem;
}
.coverage-header .eyebrow-amber {
    color: var(--bm-amber);
    margin-top: 0.4rem;
}
.coverage-title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 1rem;
    color: #fff;
}
.coverage-title::after {
    content: "";
    display: block;
    width: 64px; height: 3px;
    margin: 1rem auto 0;
    background: linear-gradient(90deg, var(--bm-amber), var(--bm-amber-2));
    border-radius: 99px;
}
.coverage-lead {
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.65;
    max-width: 680px;
    margin: 0 auto 2.5rem;
}

/* --- LIVE NETWORK pill ----------------------------------------------------- */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.95rem 0.45rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.78rem;
    line-height: 1;
}
.live-dot {
    position: relative;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    flex: 0 0 auto;
}
.live-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #22c55e;
    animation: bm-live-pulse 2s ease-out infinite;
}
@keyframes bm-live-pulse {
    0%   { opacity: 0.7; transform: scale(0.85); }
    80%  { opacity: 0;   transform: scale(2.4); }
    100% { opacity: 0;   transform: scale(2.4); }
}
.live-label {
    color: #22c55e;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.72rem;
}
.live-meta {
    color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 480px) {
    .live-meta { display: none; }
}

/* --- Map wrapper (full-bleed within the section) --------------------------- */
.coverage-map-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}
@media (max-width: 768px) {
    .coverage-map-wrapper { padding: 0 0.75rem; margin-bottom: 2rem; }
}

.coverage-map {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 720;
    border-radius: 1.25rem;
    overflow: hidden;
    /* background:
        radial-gradient(60% 75% at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 80%),
        rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 30px 80px -30px rgba(0, 0, 0, 0.55); */
}
@media (max-width: 768px) {
    .coverage-map { aspect-ratio: 4 / 2; border-radius: 0.85rem; }
}
.coverage-map svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- State shapes (light fill on dark, plus halo gradient on hover) -------- */
.coverage-map .state {
    fill: rgb(20 31 48);
    stroke: #67829f;
    stroke-width: 1;
    /* fill: rgba(233, 238, 245, 0.92);
    stroke: transparent;
    stroke-width: 0; */
    cursor: default;
    transition: fill 0.18s ease;
    outline: none;
}
.coverage-map .state[data-state]:hover {
    fill: #fff;
    cursor: pointer;
}
.coverage-map .state:focus-visible {
    fill: #fff;
    filter: drop-shadow(0 0 4px rgba(255, 176, 32, 0.5));
}
.coverage-map .state-border {
    fill: none;
    stroke: rgba(11, 26, 43, 0.16);
    stroke-width: 0.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}

/* --- Bubbles --------------------------------------------------------------- */
.coverage-map .bubble {
    cursor: pointer;
    outline: none;
}
.coverage-map .bubble-circle {
    fill: var(--bm-amber);
    stroke: #fff;
    stroke-width: 2.2;
    filter: drop-shadow(0 4px 8px rgba(11, 26, 43, 0.4));
    transition: fill 0.18s ease, transform 0.18s ease, stroke-width 0.18s ease;
    transform-origin: center;
    transform-box: fill-box;
}
.coverage-map .bubble:hover .bubble-circle,
.coverage-map .bubble:focus-visible .bubble-circle {
    fill: var(--bm-amber-2);
    stroke-width: 3;
    transform: scale(1.15);
}
.coverage-map .bubble-label {
    fill: #fff;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 1px 1px rgba(11, 26, 43, 0.45);
}

/* --- Leader pulse: top-3 states get a soft expanding halo ------------------ */
.coverage-map .bubble-leader-halo {
    fill: none;
    stroke: var(--bm-amber);
    stroke-width: 2;
    opacity: 0.6;
    transform-origin: center;
    transform-box: fill-box;
    animation: bm-bubble-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes bm-bubble-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    80%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .coverage-map .bubble-leader-halo { animation: none; opacity: 0.35; }
    .live-dot::after { animation: none; opacity: 0.35; }
    .how-cta-eyebrow .dot::after,
    .faq-talk-eyebrow .dot::after { animation: none; opacity: 0.35; }
}

/* --- Tooltip --------------------------------------------------------------- */
.coverage-map .coverage-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    background: rgba(6, 19, 34, 0.96);
    color: #fff;
    padding: 0.7rem 0.95rem;
    border-radius: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.35;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.55);
    transition: opacity 0.12s ease;
    min-width: 170px;
    border: 1px solid rgba(255, 176, 32, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.coverage-map .coverage-tooltip .tip-name {
    font-weight: 800;
    color: var(--bm-amber);
    margin-bottom: 0.2rem;
    letter-spacing: -0.01em;
}
.coverage-map .coverage-tooltip .tip-count {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
}
.coverage-map .coverage-tooltip .tip-count strong {
    color: #fff;
    font-size: 1.1rem;
    margin-right: 0.25rem;
}
.coverage-map .coverage-tooltip .tip-cta {
    display: inline-block;
    margin-top: 0.45rem;
    color: var(--bm-amber);
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    pointer-events: auto;
    letter-spacing: 0.02em;
}
.coverage-map .coverage-tooltip .tip-cta:hover { color: #fff; }

/* --- Fallback (if D3/topojson fail to load) -------------------------------- */
.coverage-map-fallback {
    padding: 2rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}
.coverage-map-fallback a { color: var(--bm-amber); }

/* --- KPI strip (frosted-glass cards) --------------------------------------- */
.coverage-footer {
    position: relative;
    z-index: 1;
}
.coverage-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
@media (max-width: 768px) {
    .coverage-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}
.cstat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.85rem;
    padding: 1.25rem 1.1rem;
    text-align: left;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.cstat:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 176, 32, 0.35);
    background: rgba(255, 255, 255, 0.05);
}
.cstat-num {
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;
    color: var(--bm-amber);
    letter-spacing: -0.02em;
}
.cstat-num [data-bm] { color: var(--bm-amber); }
.cstat-unit {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.55);
    margin-left: 0.2em;
    font-weight: 600;
}
.cstat-lab {
    margin-top: 0.45rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.35;
}

/* --- CTA + trust line ------------------------------------------------------ */
.coverage-cta {
    text-align: center;
}
.coverage-cta .btn {
    box-shadow: 0 18px 36px -10px rgba(255, 138, 0, 0.45);
}
.coverage-trust {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.75rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}
.coverage-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.coverage-trust i {
    color: var(--bm-amber);
    font-size: 0.95rem;
}

/* ==========================================================================
   Trusted Brands — infinite-scroll logo marquee
   ========================================================================== */

.brands-section .section-title {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}
.brands-section .eyebrow {
    color: var(--bm-amber-2);
}

.logo-marquee {
    position: relative;
    overflow: hidden;
    padding: 1.25rem 0;
    margin-top: 2rem;
    /* Fade edges so logos gently appear/disappear off-screen */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 8%,
        #000 92%,
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 8%,
        #000 92%,
        transparent 100%
    );
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: max-content;
    animation: bm-logo-scroll 48s linear infinite;
    will-change: transform;
}

/* Pause on hover/focus for accessibility */
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track {
    animation-play-state: paused;
}

.logo-item {
    flex: 0 0 auto;
    width: 80px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.65;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.logo-item:hover img,
.logo-item:focus-within img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

/* The track holds TWO copies of the logo set back-to-back, so
   translating by -50% creates a seamless loop. */
@keyframes bm-logo-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 768px) {
    .logo-track { gap: 2.25rem; animation-duration: 36s; }
    .logo-item  { width: 110px; height: 56px; }
    .coverage-map-wrapper {
     
        padding: 0 0rem;
    }

    
}
@media (max-width: 580px) {
    .cta-button{
        width: 100%;
        max-width: 320px;
    }
    .text-xs-center {
        text-align: center;
      } 
    .flex-mobile-center {
        justify-content: center;
    }
    .coverage-map {
        top:0px;
        width: 122%;
        left: -11%;
    }
    .hero::before {
        
        width: 100%;
        height: 100%;
        opacity: 32%;
         
        background-position-y: top;
        background-position-x: right 23%;
        background-blend-mode: luminosity;
    }
}
@media (prefers-reduced-motion: reduce) {
    .logo-track { animation: none; }
    .logo-marquee { overflow-x: auto; }
}

/* --- Social icons --------------------------------------------------------- */
.bm-social {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.footer .bm-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.footer .bm-social a:hover,
.footer .bm-social a:focus-visible {
    color: var(--bm-ink);
    background: var(--bm-amber);
    border-color: var(--bm-amber);
    transform: translateY(-1px);
}
.bm-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* ==========================================================================
   Digital vs Static Print — comparison section
   Dark, premium layout. The white card "floats" on the deep navy background
   with an amber halo so the comparison really stands out.
   ========================================================================== */

.vs-static {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(255, 176, 32, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #061322 0%, #0b1a2b 35%, #0b1a2b 100%);
    color: #fff;
    isolation: isolate;
}

.vs-static-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    transform: translateZ(0);
}
.vs-static .vs-static-grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.6;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
}
.vs-static-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(40px);
    background: radial-gradient(closest-side, rgba(255, 176, 32, 0.30), transparent 70%);
    opacity: 0.55;
}
.vs-static-glow-l { top: -160px; left: -160px; }
.vs-static-glow-r { bottom: -200px; right: -160px; background: radial-gradient(closest-side, rgba(80, 140, 255, 0.18), transparent 70%); }

/* Header copy turns light on the dark backdrop */
.vs-static .eyebrow,
.vs-static .eyebrow-amber {
    color: var(--bm-amber);
}
.vs-static .section-title { color: #fff; }
.vs-static .section-sub   { color: rgba(255, 255, 255, 0.72); }

.vs-static .accent-static {
    background: linear-gradient(90deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
 
}

/* --- Card shell that wraps both desktop table and mobile stack --------
   The card itself stays light so the comparison reads instantly, but it
   sits on a glowing amber halo + soft ring to feel elevated and premium. */
.vs-card {
    background: #fff;
    /* border: 4px solid rgb(255 244 226);
    border-radius: 1.25rem;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 30px 80px -24px rgba(0, 0, 0, 0.55),
        0 0 60px -10px rgba(255, 176, 32, 0.18); */
    overflow: hidden;
    position: relative;
}
.vs-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 176, 32, 0.55) 0%, rgba(255, 255, 255, 0.06) 40%, transparent 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.vs-table-wrap { overflow-x: auto; }

.vs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    min-width: 760px;
}

/* --- Table header --- */
.vs-table thead th {
    background: linear-gradient(180deg, var(--bm-ink) 0%, var(--bm-ink-2) 100%);
    color: #fff;
    padding: 1.5rem 1.5rem 1.4rem;
    font-weight: 700;
    text-align: left;
    vertical-align: bottom;
    border: none;
    position: relative;
}
.vs-table thead th .vs-th-eyebrow {
    display: block;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.3rem;
}
.vs-table thead th .vs-th-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: #fff;
}
.vs-table thead th .vs-th-title i { color: var(--bm-amber); font-size: 1.2rem; }
.vs-table thead th.vs-col-feature .vs-th-title { font-size: 1.05rem; color: rgba(255, 255, 255, 0.92); }

/* Highlighted Digital column header — amber wash + bottom rule */
.vs-table thead th.vs-col-digital {
    background:
        linear-gradient(180deg, rgba(255, 176, 32, 0.20) 0%, rgba(255, 138, 0, 0.06) 100%),
        linear-gradient(180deg, var(--bm-ink) 0%, var(--bm-ink-2) 100%);
    border-bottom: 3px solid var(--bm-amber);
    width: 34%;
}
.vs-table thead th.vs-col-static { width: 34%; }
.vs-table thead th.vs-col-static .vs-th-title i { color: rgba(255, 255, 255, 0.45); }

.vs-table thead th .vs-th-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    background: linear-gradient(180deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    color: #1a1206;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(255, 138, 0, 0.4);
}

/* --- Body cells --- */
.vs-table tbody th,
.vs-table tbody td {
    padding: 1.05rem 1.5rem;
    vertical-align: middle;
    font-size: 0.97rem;
    color: var(--bm-ink);
    border-bottom: 1px solid var(--bm-line);
    background: #fff;
    transition: background-color 0.18s ease;
}
.vs-table tbody tr:last-child th,
.vs-table tbody tr:last-child td { border-bottom: none; }

.vs-table tbody th.vs-col-feature {
    background: var(--bm-cloud);
    font-weight: 600;
    color: var(--bm-ink);
    text-align: left;
    width: 32%;
}
.vs-table tbody th.vs-col-feature i {
    color: var(--bm-amber-2);
    margin-right: 0.6rem;
    font-size: 1.05rem;
    width: 1.3em;
    display: inline-block;
    text-align: center;
}

/* Highlighted digital column runs a soft amber band through the table */
.vs-table td.vs-col-digital {
    background: linear-gradient(90deg, rgba(255, 176, 32, 0.06) 0%, rgba(255, 176, 32, 0.10) 100%);
    border-left: 1px solid rgba(255, 176, 32, 0.32);
    font-weight: 500;
}
.vs-table td.vs-col-static {
    color: var(--bm-muted);
    font-weight: 500;
}

.vs-table tbody tr:hover td.vs-col-digital {
    background: linear-gradient(90deg, rgba(255, 176, 32, 0.11) 0%, rgba(255, 176, 32, 0.17) 100%);
}
.vs-table tbody tr:hover td.vs-col-static { background: #fafbfd; }

.vs-table td .vs-copy { display: inline; }

/* Yes / No markers — reused inside the mobile stack as well */
.vs-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 0.65rem;
    vertical-align: middle;
}
.vs-yes {
    background: linear-gradient(180deg, var(--bm-amber) 0%, var(--bm-amber-2) 100%);
    color: #1a1206;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(255, 138, 0, 0.30);
}
.vs-no {
    background: #172334;
    color: #ffffff;
    border: 1px solid var(--bm-line);
    font-size: 1rem;
}

/* --- Mobile stacked cards --- */
.vs-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.vs-stack-item {
    padding: 1.1rem 1.1rem 1.2rem;
    border-bottom: 1px solid var(--bm-line);
    background: #fff;
}
.vs-stack-item:last-child { border-bottom: none; }
.vs-stack-feature {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bm-ink);
    margin-bottom: 0.85rem;
}
.vs-stack-feature i { color: var(--bm-amber-2); font-size: 1rem; }

/* Mobile: two columns side-by-side under each feature header.
   Wraps the two .vs-stack-row children of .vs-stack-item into a
   compact grid so users can compare Digital vs Static at a glance
   without scrolling vertically through paired rows. */
.vs-stack-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.6rem;
    row-gap: 0.65rem;
}
.vs-stack-feature {
    grid-column: 1 / -1;
}

.vs-stack-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem 0.7rem 0.8rem;
    border-radius: 0.75rem;
    border: 1px solid var(--bm-line);
    min-width: 0;
    background: #fff;
}
.vs-stack-row + .vs-stack-row { margin-top: 0; } /* grid handles spacing now */
.vs-stack-row-digital {
    background: linear-gradient(90deg, rgba(255, 176, 32, 0.06) 0%, rgba(255, 176, 32, 0.10) 100%);
    border-color: rgba(255, 176, 32, 0.35);
}
.vs-stack-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bm-muted);
}
.vs-stack-row-digital .vs-stack-label { color: var(--bm-ink); }
.vs-stack-label .vs-mark { width: 20px; height: 20px; margin-right: 0.4rem; font-size: 0.75rem; }
.vs-stack-copy {
    margin: 0;
    font-size: 0.86rem;
    color: var(--bm-ink);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.vs-stack-row-static .vs-stack-copy { color: var(--bm-muted); }

/* Very narrow phones: keep side-by-side but tighten further. */
@media (max-width: 360px) {
    .vs-stack-item { column-gap: 0.45rem; }
    .vs-stack-row { padding: 0.6rem 0.55rem 0.7rem; }
    .vs-stack-copy { font-size: 0.8rem; }
    .vs-stack-label { font-size: 0.6rem; }
    .vs-stack-label .vs-mark { width: 18px; height: 18px; margin-right: 0.3rem; font-size: 0.7rem; }
}

/* --- Section CTA --- */
.vs-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-top: 2.25rem;
    text-align: center;
}
.vs-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.vs-link:hover,
.vs-link:focus-visible {
    color: var(--bm-amber);
    border-bottom-color: var(--bm-amber);
}
.vs-link i { transition: transform 0.15s ease; }
.vs-link:hover i { transform: translateX(2px); }

/* --- Responsive tuning --- */
@media (max-width: 991.98px) {
    .vs-table thead th { padding: 1.2rem 1.1rem; }
    .vs-table tbody th,
    .vs-table tbody td { padding: 0.95rem 1.1rem; }
    .vs-table thead th .vs-th-title { font-size: 1.1rem; }
}
@media (max-width: 767.98px) {
    .vs-card { border-radius: 1rem; }
}

/* ==========================================================================
   Premium Section Rhythm
   --------------------------------------------------------------------------
   Replaces the pale white/gray middle sections with a cinematic palette.
   Cadence: dark (hero+coverage) → warm (how+brands) → dark (tracking+cases)
            → dark (vs-static) → warm (testimonials+faq) → dark (final CTA).
   Layout, copy, and components are intentionally untouched.
   ========================================================================== */

:root {
    --bm-deep:        #081120;  /* deep navy   — base canvas */
    --bm-section:     #101827;  /* section navy */
    --bm-elevated:    #172033;  /* elevated navy — wrappers / trays */
    --bm-card:        #1B2435;  /* card navy   — surface on dark */
    --bm-warm:        #F5F1E8;  /* warm neutral — premium light */
    --bm-warm-hi:     #FBF8F1;  /* warm highlight — slight lift */
    --bm-line-dark:   rgba(255, 255, 255, 0.06);
    --bm-line-dark-2: rgba(255, 255, 255, 0.10);
    --bm-text-on-dark:        #f5f7fb;
    --bm-text-on-dark-muted:  rgba(245, 247, 251, 0.72);
}

/* Reusable ambient amber/orange glow layer used inside dark sections.
   Applied as a backdrop pseudo-element so it never sits over text. */
.section-ambient {
    position: relative;
    isolation: isolate;
}
.section-ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 179, 0, 0.10), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(255, 140, 0, 0.08), transparent 40%);
}
.section-ambient > * { position: relative; z-index: 1; }

/* --- Coverage → How transition fade -------------------------------------- *
   Soft warm bleed at the bottom of the dark coverage section so the warm
   neutral "How it works" panel below feels intentional, not abrupt. */
.coverage-section::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 80px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(245, 241, 232, 0.18) 100%);
    z-index: 1;
}

/* ==========================================================================
   3. How it works  → warm neutral
   ========================================================================== */
.how-modern {
    background:
        radial-gradient(1100px 540px at 50% -10%, rgba(255, 176, 32, 0.05), transparent 60%),
        var(--bm-warm);
}
.how-modern .how-grid {
    background-image:
        radial-gradient(rgba(11, 26, 43, 0.07) 1px, transparent 1px),
        radial-gradient(900px 500px at 50% 30%, var(--bm-warm-hi) 0%, var(--bm-warm) 80%);
}
.how-card {
    background: #fff;
    box-shadow:
        0 1px 0 rgba(8, 17, 32, 0.04),
        0 18px 45px -22px rgba(8, 17, 32, 0.18);
}

/* ==========================================================================
   4. Trusted Brands  → warm neutral (slightly lifted highlight)
   ========================================================================== */
.brands-section.bg-cloud,
.brands-section {
    background: var(--bm-warm-hi);
}

/* ==========================================================================
   5. Tracking  → dark premium
   ========================================================================== */
#tracking.section {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 179, 0, 0.10), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(255, 140, 0, 0.08), transparent 40%),
        linear-gradient(180deg, var(--bm-section) 0%, var(--bm-elevated) 100%);
    color: var(--bm-text-on-dark);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
#tracking .section-title { color: var(--bm-text-on-dark); }
#tracking .section-sub,
#tracking .text-muted-2 { color: var(--bm-text-on-dark-muted) !important; }
#tracking .eyebrow { color: var(--bm-amber); }
#tracking .tracking-list li { color: var(--bm-text-on-dark); }
#tracking .tracking-list i { color: var(--bm-amber); }

/* The outer "tray" wrapper around the metric cards becomes elevated navy */
#tracking .bg-cloud {
    background: var(--bm-elevated) !important;
    border-color: var(--bm-line-dark) !important;
}
/* Inner metric cards become card-navy with subtle borders */
#tracking .bg-white {
    background: var(--bm-card) !important;
    border-color: var(--bm-line-dark) !important;
    color: var(--bm-text-on-dark);
}
#tracking .bg-white .text-muted-2 { color: var(--bm-text-on-dark-muted) !important; }
#tracking .bg-white .text-success { color: #4ade80 !important; }
#tracking .bg-white .fw-bold,
#tracking .bg-white .fs-3 { color: var(--bm-text-on-dark); }
#tracking .progress {
    background: rgba(255, 255, 255, 0.06);
}
/* Outline buttons need to be readable on dark */
#tracking .btn-outline-secondary {
    --bs-btn-color: var(--bm-text-on-dark);
    --bs-btn-border-color: rgba(255, 255, 255, 0.25);
    --bs-btn-hover-color: var(--bm-ink);
    --bs-btn-hover-bg: var(--bm-amber);
    --bs-btn-hover-border-color: var(--bm-amber);
}

/* ==========================================================================
   6. Case studies  → dark premium
   ========================================================================== */
#cases.section.bg-cloud,
#cases.section {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 179, 0, 0.10), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(255, 140, 0, 0.08), transparent 40%),
        linear-gradient(180deg, #111827 0%, var(--bm-elevated) 100%);
    color: var(--bm-text-on-dark);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
#cases .section-title { color: var(--bm-text-on-dark); }
#cases .section-sub,
#cases .text-muted-2 { color: var(--bm-text-on-dark-muted) !important; }
#cases .eyebrow { color: var(--bm-amber); }

#cases .case-card {
    background: var(--bm-card);
    border: 1px solid var(--bm-line-dark);
    color: var(--bm-text-on-dark);
    box-shadow: 0 18px 45px -22px rgba(0, 0, 0, 0.5);
}
#cases .case-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 0 1px var(--bm-line-dark-2);
}
#cases .case-card .case-icon {
    background: rgba(255, 176, 32, 0.10);
    color: var(--bm-amber);
}
#cases .case-card h3 { color: var(--bm-text-on-dark); }
#cases .case-card .case-uplift { color: #4ade80; }
#cases .case-card p.text-muted-2 { color: var(--bm-text-on-dark-muted) !important; }

/* ==========================================================================
   7. Why Digital Beats Static Print  → refined diagonal navy
   ========================================================================== */
.vs-static {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 179, 0, 0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 140, 0, 0.07), transparent 45%),
        linear-gradient(135deg, #09111F 0%, #0E1B31 50%, #132443 100%);
}

/* ==========================================================================
   8. Testimonials  → warm neutral (keeps cards crisp white)
   ========================================================================== */
#testimonials.section {
    background: var(--bm-warm);
}
#testimonials .testimonial-card {
    box-shadow:
        0 1px 0 rgba(8, 17, 32, 0.04),
        0 18px 45px -20px rgba(8, 17, 32, 0.14);
}
#testimonials .btn-outline-secondary {
    --bs-btn-color: var(--bm-ink);
    --bs-btn-border-color: rgba(8, 17, 32, 0.18);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bm-ink);
    --bs-btn-hover-border-color: var(--bm-ink);
}

/* ==========================================================================
   9. FAQ  → warm neutral with deeper card depth
   ========================================================================== */
.faq-modern {
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(255, 176, 32, 0.05), transparent 60%),
        var(--bm-warm);
}
.faq-modern .faq-grid {
    background-image:
        radial-gradient(rgba(11, 26, 43, 0.08) 1px, transparent 1px),
        radial-gradient(900px 540px at 50% 30%, var(--bm-warm-hi) 0%, var(--bm-warm) 75%);
}
/* The FAQ list as a whole gets stronger ambient depth as a "card stack". */
.faq-modern .faq-list {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 18px 45px rgba(8, 17, 32, 0.10);
    overflow: hidden;
}
.faq-modern .faq-item.is-open { background: #fffaf1; }

/* ==========================================================================
   Light tokens kept as variables for any future component reuse
   ========================================================================== */
.bg-warm     { background: var(--bm-warm); }
.bg-warm-hi  { background: var(--bm-warm-hi); }
.bg-card-navy{ background: var(--bm-card); color: var(--bm-text-on-dark); }

/* ==========================================================================
   Legal / policy pages (terms, privacy, etc.)
   ========================================================================== */
body.site-legal {
    background: var(--bm-cloud);
}

.legal-page {
    padding: 0 0 clamp(56px, 8vw, 96px);
}

.legal-page-hero {
    margin-top: 0;
    padding: clamp(28px, 4vw, 48px) 0 clamp(32px, 5vw, 56px);
    background:
        linear-gradient(135deg, var(--bm-ink) 0%, var(--bm-ink-2) 48%, var(--bm-ink-3) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.legal-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(640px 320px at 85% 10%, rgba(255, 176, 32, 0.22), transparent 60%),
        radial-gradient(480px 280px at 0% 100%, rgba(255, 255, 255, 0.06), transparent 55%);
    pointer-events: none;
}

.legal-page-hero-inner {
    position: relative;
    z-index: 1;
}

.legal-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 600;
}

.legal-breadcrumb a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.15s ease;
}

.legal-breadcrumb a:hover {
    color: var(--bm-amber);
}

.legal-breadcrumb [aria-current='page'] {
    color: rgba(255, 255, 255, 0.95);
}

.legal-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
}

.legal-page-hero-grid {
    display: grid;
    gap: 20px 32px;
    align-items: end;
}

@media (min-width: 768px) {
    .legal-page-hero-grid {
        grid-template-columns: 1fr auto;
    }
}

.legal-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.legal-page-title {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
}

.legal-page-lead {
    margin: 14px 0 0;
    max-width: 42rem;
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

.legal-page-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .legal-page-hero-meta {
        justify-content: flex-end;
    }
}

.legal-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.legal-meta-pill i {
    color: var(--bm-amber);
}

.legal-page-shell {
    margin-top: clamp(-20px, -2vw, -12px);
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.legal-page-layout {
    display: grid;
    gap: 24px;
    align-items: start;
}

@media (min-width: 992px) {
    .legal-page-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 32px;
    }
}

.legal-page-toc-card {
    background: #fff;
    border: 1px solid var(--bm-line);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: 0 12px 32px rgba(8, 17, 32, 0.06);
    padding: 18px 16px 16px;
}

@media (min-width: 992px) {
    .legal-page-toc {
        position: sticky;
        top: 24px;
    }
}

.legal-page-toc-title {
    margin: 0 0 12px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bm-muted);
}

.legal-page-toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}

.legal-page-toc-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bm-ink-3);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.legal-page-toc-list a:hover,
.legal-page-toc-list a:focus-visible {
    background: rgba(255, 176, 32, 0.12);
    color: var(--bm-ink);
}

.legal-toc-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    color: var(--bm-ink);
    background: var(--bm-cloud);
    border: 1px solid var(--bm-line);
}

.legal-page-card {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--bm-line);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: 0 20px 50px rgba(8, 17, 32, 0.08);
    padding: clamp(28px, 4vw, 48px) clamp(22px, 3.5vw, 44px);
}

.legal-page-body {
    max-width: 68ch;
}

.legal-section {
    scroll-margin-top: 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--bm-line);
}

.legal-section:first-child {
    padding-top: 0;
}

.legal-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.legal-section h2 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bm-ink);
    line-height: 1.35;
}

.legal-section-num {
    flex: 0 0 auto;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--bm-ink);
    background: linear-gradient(180deg, rgba(255, 176, 32, 0.28), rgba(255, 176, 32, 0.1));
    border: 1px solid rgba(255, 176, 32, 0.35);
}

.legal-page-body p,
.legal-page-body li {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--bm-ink-3);
}

.legal-page-body p {
    margin: 0 0 14px;
}

.legal-page-body p:last-child {
    margin-bottom: 0;
}

.legal-page-body ul {
    margin: 0 0 14px;
    padding-left: 1.25rem;
}

.legal-page-body li + li {
    margin-top: 8px;
}

.legal-page-body a {
    font-weight: 600;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.legal-page-body strong {
    color: var(--bm-ink);
    font-weight: 700;
}

.legal-page-dates {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--bm-ink-3);
    background: var(--bm-cloud);
    border: 1px solid var(--bm-line);
}

@media (max-width: 991.98px) {
    .legal-page-toc-card {
        display: none;
    }
}

/* Guide pages (creatives-guide) — reuse legal layout + resource styling */
.guide-page .legal-page-hero--guide::before {
    background:
        radial-gradient(640px 320px at 90% 20%, rgba(255, 176, 32, 0.28), transparent 58%),
        radial-gradient(480px 280px at 0% 100%, rgba(255, 255, 255, 0.06), transparent 55%);
}

.legal-page-body h3 {
    margin: 22px 0 10px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bm-ink);
    letter-spacing: -0.01em;
}

.legal-page-body h4 {
    margin: 16px 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bm-ink-2);
}

.legal-callout {
    margin: 0;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid var(--bm-line);
}

.legal-callout p {
    margin: 0;
}

.legal-callout p + p {
    margin-top: 10px;
}

.legal-callout-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--bm-ink);
}

.legal-callout--tip {
    background: linear-gradient(135deg, rgba(255, 176, 32, 0.14), rgba(255, 176, 32, 0.04));
    border-color: rgba(255, 176, 32, 0.35);
}

.legal-callout--tip .legal-callout-title i {
    color: var(--bm-amber-2);
}

.legal-callout--success {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.1), rgba(22, 163, 74, 0.03));
    border-color: rgba(22, 163, 74, 0.28);
}

.legal-callout--success .legal-callout-title i {
    color: var(--bm-success);
}

.legal-inline-tip {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.92rem;
    background: var(--bm-cloud);
    border-left: 3px solid var(--bm-amber);
}

.legal-spec-list code {
    font-size: 0.9em;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--bm-cloud);
    border: 1px solid var(--bm-line);
    color: var(--bm-ink);
}

.legal-mistake-list li {
    margin-bottom: 10px;
}

@media (max-width: 575.98px) {
    .legal-page-hero {
        padding-top: 24px;
    }

    .legal-section {
        padding: 18px 0;
    }

    .legal-section h2 {
        flex-direction: column;
        gap: 8px;
    }
}

/* Meet / book-a-call page (/pages/meet) */
.meet-page {
    background: var(--bm-cloud);
}

.meet-hero {
    position: relative;
    padding: 28px 0 32px;
    color: #fff;
    background: linear-gradient(135deg, var(--bm-ink) 0%, #122a45 48%, var(--bm-ink) 100%);
    overflow: hidden;
}

.meet-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(640px 320px at 88% 12%, rgba(255, 176, 32, 0.32), transparent 58%),
        radial-gradient(420px 240px at 4% 88%, rgba(255, 255, 255, 0.08), transparent 55%);
}

.meet-hero-inner {
    position: relative;
    z-index: 1;
}

.meet-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px;
    font-size: 0.82rem;
    font-weight: 600;
}

.meet-breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.meet-breadcrumb a:hover {
    color: #fff;
}

.meet-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
}

.meet-breadcrumb [aria-current="page"] {
    color: rgba(255, 255, 255, 0.92);
}

.meet-hero-grid {
    display: grid;
    gap: 20px;
    align-items: end;
}

@media (min-width: 768px) {
    .meet-hero-grid {
        grid-template-columns: 1fr auto;
        gap: 28px;
    }
}

.meet-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bm-amber);
    background: rgba(255, 176, 32, 0.14);
    border: 1px solid rgba(255, 176, 32, 0.35);
}

.meet-title {
    margin: 0 0 12px;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 1px 3px rgba(11, 26, 43, 0.45);
}

.meet-lead {
    margin: 0;
    max-width: 36rem;
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.meet-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.meet-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.meet-meta-pill i {
    color: var(--bm-amber);
}

.meet-shell {
    padding: 28px 0 48px;
}

.meet-layout {
    display: grid;
    gap: 24px;
    align-items: start;
    min-width: 0;
}

@media (max-width: 991.98px) {
    /* Calendar first on mobile — DOM has aside before embed. */
    .meet-calendly-wrap {
        order: -1;
    }
    .meet-aside {
        order: 1;
    }
}

@media (min-width: 992px) {
    .meet-layout {
        grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
        gap: 28px;
    }

    .meet-calendly-wrap,
    .meet-aside {
        order: unset;
    }
}

.meet-aside,
.meet-calendly-wrap {
    min-width: 0;
    max-width: 100%;
}

.meet-aside-card {
    padding: 22px 22px 20px;
    background: #fff;
    border: 1px solid var(--bm-line);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(11, 26, 43, 0.06);
}

.meet-aside-title {
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--bm-ink);
    letter-spacing: -0.02em;
}

.meet-perks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.meet-perks li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--bm-muted);
}

.meet-perks strong {
    color: var(--bm-ink);
    font-weight: 800;
}

.meet-perk-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255, 176, 32, 0.2), rgba(255, 176, 32, 0.06));
    color: var(--bm-amber-2, var(--bm-amber));
    font-size: 1rem;
}

.meet-aside-note {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--bm-ink-3);
    background: var(--bm-cloud);
    border: 1px solid var(--bm-line);
}

.meet-aside-note a {
    font-weight: 700;
}

.meet-open-external {
    margin-top: 16px;
}

.meet-calendly-card {
    background: #fff;
    border: 1px solid var(--bm-line);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(11, 26, 43, 0.08);
    overflow: hidden;
    max-width: 100%;
}

.meet-calendly-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--bm-line);
    background: linear-gradient(180deg, #fff 0%, var(--bm-cloud) 100%);
}

.meet-calendly-brand {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.35rem;
    color: var(--bm-amber);
    background: linear-gradient(145deg, rgba(255, 176, 32, 0.22), rgba(255, 176, 32, 0.08));
    border: 1px solid rgba(255, 176, 32, 0.3);
}

.meet-calendly-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bm-ink);
    letter-spacing: -0.02em;
}

.meet-calendly-sub {
    margin: 2px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bm-muted);
}

.meet-calendly-embed {
    padding: 0;
    background: #fafbfc;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    /* Starting height until Calendly posts page_height (data-resize). */
    min-height: 680px;
}

/* Let Calendly drive height — avoid nested scrollbars inside our card. */
.meet-calendly-embed .calendly-inline-widget {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.meet-calendly-embed .calendly-inline-widget iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: 0;
    overflow: hidden;
}

.meet-page .meet-shell {
    overflow-x: clip;
}

.meet-calendly-fineprint {
    margin: 0;
    padding: 12px 20px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bm-muted);
    text-align: center;
    border-top: 1px solid var(--bm-line);
    background: var(--bm-cloud);
}

.meet-calendly-fineprint a {
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .meet-calendly-embed {
        min-height: 720px;
    }
}

@media (max-width: 575.98px) {
    .meet-calendly-embed {
        min-height: 780px;
    }
}