/* ═══════════════════════════════════════════════════════════════════
   BLUE BELMONT LANDING - clean rebuild

   Self-contained stylesheet. All classes use the bb- prefix so nothing
   collides with the in-app stylesheets (app.css, components.css, style.css).
   The page does not depend on any other CSS file at runtime.

   Design tokens
     Slate    #1c2331    primary text, dark sections, headlines
     Gold     #d4af37    accent, CTAs, lead-score "hot"
     Gold dk  #b5942a    secondary gold
     Cream    #faf8f4    section background
     Warm     #fffdf8    card background
     Border   #ebe6dd    hairlines

   Type
     Playfair Display    headlines, editorial moments
     Source Sans 3       body, UI
     DM Mono             numerics, eyebrows, labels

   Breakpoints
     ≤64em (1024px)      tablet - collapse to 2-col grids
     ≤48em (768px)       phone - single column, stack everything
     ≤30em (480px)       small phone - tight padding
   ═══════════════════════════════════════════════════════════════════ */


/* ─── Tokens ─── */
:root {
    --slate: #1c2331;
    --slate-2: #2a3447;
    --gold: #d4af37;
    /* Bumped from #b5942a (2.9:1 on --warm, fails AA) to #7a6315
       (4.95:1 on --warm). The only non-text usage is a single
       bottom-of-gradient stop which tolerates the deeper shade. */
    --gold-dk: #7a6315;
    --gold-soft: #e9c869;
    --cream: #faf8f4;
    --warm: #fffdf8;
    /* Section-scoped tones - small deltas (~5-8 units) so each section
       still reads warm+serious but a scroll between two of them is
       visually distinct. Order in the page alternates warm → cool →
       sand → warm → cool so no two neighbors share a shade. */
    --bg-warm: #fefcf5;
    --bg-cool: #f3f0e8;
    --bg-sand: #ebe5d4;
    --border: #ebe6dd;
    --border-dk: #d5cfc5;
    --text: #1c2331;
    --text-2: #5b5550;
    /* Bumped from #8b8680 (3.55:1 on --warm) to #6b6660 (4.8:1 on
       --warm) so uppercase eyebrows and muted labels meet WCAG AA. */
    --text-3: #6b6660;
    /* Dedicated gold for small text. --gold-dk (#b5942a, 2.9:1 on
       warm) fails AA and shouldn't be used for body copy - this
       darker variant is AA-safe and reserved for text usage only. */
    --gold-text: #7a6315;
    --bad: #b23a3a;
    --good: #2e7d32;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'DM Mono', 'SF Mono', Monaco, Menlo, monospace;

    --container: 76rem;
    --section-py: 6rem;
    --section-py-sm: 3.5rem;
    --hairline: 0.0625rem solid var(--border);
    --radius: 0.625rem;
    --radius-sm: 0.375rem;
    --radius-lg: 0.875rem;
    --shadow-sm: 0 0.125rem 0.5rem rgba(28, 35, 49, 0.04);
    --shadow: 0 0.5rem 1.5rem rgba(28, 35, 49, 0.07);
    --shadow-lg: 0 1rem 2.5rem rgba(28, 35, 49, 0.1);
    --easing: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── Reset + base ─── */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* When a URL with a #hash lands on the page (or within-page anchor
       clicks), browsers scroll the target to y=0. But our nav (.ln) is
       position:fixed at 4rem tall, so the target would hide under it.
       scroll-padding-top pushes every hash landing 4rem further down
       so the heading lands visible below the nav, not beneath it. */
    scroll-padding-top: calc(4.5rem + env(safe-area-inset-top, 0rem));
}

/* Every anchor target (section, h2, h3, whatever) clears the fixed nav
   when users jump to its id. scroll-margin-top is the modern way -
   preferred over padding-top hacks because it doesn't change the box.
   Includes the safe-area-inset so notched iPhones land headings below
   the notch padding, not behind it. */
[id]:not(html):not(body) {
    scroll-margin-top: calc(4.5rem + env(safe-area-inset-top, 0rem));
}

/* Persistent spacer for the fixed nav.
   site-chrome.js keeps #site-header in the DOM and just replaces its
   inner HTML. The min-height reserves the nav's full rendered height
   (4rem core + safe-area inset on notched iPhones) so body content
   never starts beneath the fixed nav. Without the env() term, content
   on notched mobile was sitting under the notch-padded portion of the
   nav (~47px on iPhone 13+). */
#site-header {
    display: block;
    /* 4.5rem (was 4rem) leaves a 0.5rem breathing band between the
       fixed nav and the first body element. Without the extra half-
       rem, content edges hugged the nav's bottom line and read as
       "overlapping" on mobile - particularly the platform-crumbs row
       on pages without a hero. */
    min-height: calc(4.5rem + env(safe-area-inset-top, 0rem));
    position: relative;
}
/* The landing hero (.lh) is designed to extend its map background
   UNDER the translucent nav for a full-bleed effect - it has its own
   internal padding-top:4rem. On that specific layout we collapse the
   spacer so the two don't stack. No other page uses .lh. */
body:has(.lh) #site-header {
    min-height: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2999;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--warm);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--text); text-decoration: none; transition: color 0.18s var(--easing); }
a:hover { color: var(--gold-dk); }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--slate);
    line-height: 1.15;
    letter-spacing: -0.005em;
}

p { margin: 0; }

code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: rgba(28, 35, 49, 0.06);
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.1875rem;
}

.bb-sr {
    position: absolute;
    width: 0.0625rem; height: 0.0625rem;
    padding: 0; margin: -0.0625rem;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.bb-skip {
    position: absolute;
    top: -3rem; left: 1rem;
    background: var(--slate); color: var(--gold);
    padding: 0.625rem 1rem; border-radius: var(--radius-sm);
    font-weight: 600; z-index: 1000;
    transition: top 0.2s var(--easing);
}
.bb-skip:focus { top: 1rem; color: var(--gold); }


/* ─── Container ─── */
.bb-section-i, .bb-nav-i, .bb-hero-i, .bb-foot-i {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}


/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.bb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6875rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 0.0625rem solid transparent;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s var(--easing);
    white-space: nowrap;
}

.bb-btn-primary {
    background: var(--slate);
    color: var(--gold);
    border-color: var(--slate);
}
.bb-btn-primary:hover {
    background: #2a3447;
    color: var(--gold-soft);
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow);
}

.bb-btn-gold {
    background: var(--gold);
    color: var(--slate);
    border-color: var(--gold);
}
.bb-btn-gold:hover {
    background: var(--gold-soft);
    color: var(--slate);
    transform: translateY(-0.0625rem);
    box-shadow: var(--shadow-lg);
}

.bb-btn-ghost {
    background: transparent;
    color: var(--slate);
    border-color: var(--border-dk);
}
.bb-btn-ghost:hover {
    background: var(--warm);
    border-color: var(--slate);
    color: var(--slate);
}

.bb-btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}
.bb-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.bb-btn-lg {
    padding: 0.875rem 1.625rem;
    font-size: 1rem;
}
.bb-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}
.bb-btn-block { width: 100%; }

/* Ultra-narrow viewports (Galaxy Fold closed at 280px, etc.): long
   button labels hit "Become a brokerage partner →" and overflow the
   viewport because of the default white-space:nowrap. Allow wrapping
   and cap width at 100% so content always fits. */
@media (max-width: 22.5em) {
    .bb-btn {
        white-space: normal;
        max-width: 100%;
        word-wrap: break-word;
    }
    .bb-btn-lg {
        padding: 0.75rem 1.25rem;
        font-size: 0.9375rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════════ */
/* Nav matches the footer: same slate backdrop so the page reads as one
   piece of chrome top and bottom, with the hero gradient blending into
   the parcel-map image just below. */
.bb-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--slate);
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.2s var(--easing), box-shadow 0.2s var(--easing);
    color: rgba(255, 255, 255, 0.85);
}
.bb-nav.is-scrolled {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}
/* Secondary logo ships with a dark stroke - flip to pure white on the
   slate nav. If we ever add a dedicated light SVG we drop this filter. */
.bb-nav-brand img { filter: brightness(0) invert(1); }
.bb-nav-links > a:not(.bb-btn):not(.bb-nav-signin) {
    color: rgba(255, 255, 255, 0.7);
}
.bb-nav-links > a:not(.bb-btn):not(.bb-nav-signin):hover {
    color: var(--gold);
}
.bb-nav-signin {
    color: var(--gold);
    transition: transform 180ms cubic-bezier(0.16, 0.84, 0.32, 1), color 180ms ease;
    transform-origin: center;
    will-change: transform;
}
.bb-nav-signin:hover { color: var(--gold); }
.bb-nav-signin:active {
    transform: scale(0.92);
    animation: bb-signin-pulse 320ms cubic-bezier(0.16, 0.84, 0.32, 1);
}
@keyframes bb-signin-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.bb-nav-toggle span { background: #ffffff; }
/* Primary CTA in the dark nav: flip to gold so it stands out against
   the slate backdrop (the default primary button is slate-on-gold,
   which would blend into the nav). */
.bb-nav-links > .bb-btn-primary {
    background: var(--gold);
    color: var(--slate);
    border-color: var(--gold);
}
.bb-nav-links > .bb-btn-primary:hover {
    background: var(--gold-soft, #e6c653);
    color: var(--slate);
    border-color: var(--gold-soft, #e6c653);
}

.bb-nav-i {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.bb-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--slate);
}
.bb-nav-brand:hover { color: var(--slate); }

.bb-nav-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; height: 2rem;
    background: var(--slate);
    color: var(--gold);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.9375rem;
    letter-spacing: -0.02em;
}

.bb-nav-brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--slate);
}

/* Nav links sit on the dark slate background, so the color is set
   once above (in the .bb-nav block) using white with light dim for
   inactive and gold on hover. The redundant dark-text rules that
   used to live here made the labels unreadable on the dark nav. */
.bb-nav-links > a:not(.bb-btn):not(.bb-nav-signin) {
    font-size: 0.9375rem;
    font-weight: 500;
}
.bb-nav-signin {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gold);
}

.bb-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 0.3125rem;
    background: transparent;
    border: none;
    padding: 0.5rem;
    margin: -0.5rem;
}
.bb-nav-toggle span {
    width: 1.375rem;
    height: 0.125rem;
    background: var(--slate);
    border-radius: 0.125rem;
    transition: transform 0.2s var(--easing), opacity 0.2s var(--easing);
}
.bb-nav-toggle.is-open span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.bb-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.bb-nav-toggle.is-open span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }


/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.bb-hero {
    position: relative;
    padding: 4rem 0 0;
    overflow: hidden;
    background: var(--cream);
    /* Tall hero so the slate gradient has room to carry the full text
       column before fading into the parcel-map image beneath. */
    min-height: clamp(40rem, 78vh, 52rem);
    display: flex;
    flex-direction: column;
}

/* The hero background is the actual parcel-map screenshot, covered at
   the top by a slate gradient that bleeds down from the nav. Opaque
   slate at y=0 matches the nav exactly; by ~28% down we're fully
   transparent so the map reads clean underneath. A second, faint gold
   radial glow warms the right edge to match the rest of the site. */
.bb-hero-bg {
    position: absolute;
    inset: 0;
    display: block;
    background:
        linear-gradient(
            180deg,
            var(--slate) 0%,
            rgba(28, 35, 49, 0.88) 18%,
            rgba(28, 35, 49, 0.62) 38%,
            rgba(28, 35, 49, 0.3) 55%,
            rgba(28, 35, 49, 0.08) 70%,
            rgba(28, 35, 49, 0) 82%
        ),
        radial-gradient(ellipse 50rem 30rem at 80% 0%, rgba(212, 175, 55, 0.12), transparent 70%),
        url('/static/hero-map.png?v=2') center top / cover no-repeat,
        var(--cream);
    /* Clickable CTA - pointer-events:auto overrides the default link focus
       ring since the anchor is purely decorative for mouse/touch users. */
    cursor: pointer;
    text-decoration: none;
}
.bb-hero-bg:focus { outline: none; }
/* Lift the hero content above the clickable background so buttons,
   text links, and the preview card receive clicks first. */
.bb-hero-i { z-index: 1; }

.bb-hero-i {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
    padding-top: 1.25rem;
    padding-bottom: 6rem;
    flex: 1;
}

/* The hero text column sits on top of the slate-to-map gradient; light
   type against the dark upper band, plus a subtle shadow so glyphs
   stay crisp even where the gradient starts fading into the map. */
.bb-hero-text {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 0.0625rem 0.5rem rgba(12, 17, 26, 0.25);
}
.bb-hero-text .bb-eyebrow { color: var(--gold); }
.bb-hero-text .bb-eyebrow-dot { background: var(--gold); }
.bb-hero-text .bb-h1 { color: #ffffff; }
.bb-hero-text .bb-h1-em { color: var(--gold); }
.bb-hero-text .bb-lede { color: var(--slate); }
.bb-hero-text .bb-hero-meta,
.bb-hero-text .bb-hero-meta span { color: var(--slate); }
/* Ghost CTA in hero: match the primary-button navy so the pairing reads
   as one coherent action row (blue outline + blue text). */
.bb-hero-text .bb-btn-ghost {
    color: var(--slate);
    border-color: var(--slate);
    background: transparent;
}
.bb-hero-text .bb-btn-ghost:hover {
    border-color: var(--slate);
    color: var(--slate);
    background: rgba(28, 35, 49, 0.06);
}


/* ─── Eyebrows ─── */
.bb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dk);
    margin-bottom: 1.25rem;
}
.bb-eyebrow-dark {
    color: var(--gold);
}
.bb-eyebrow-dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0.1875rem rgba(212, 175, 55, 0.18);
    animation: bb-pulse 2.4s ease-in-out infinite;
}
@keyframes bb-pulse {
    0%, 100% { box-shadow: 0 0 0 0.1875rem rgba(212, 175, 55, 0.18); }
    50%      { box-shadow: 0 0 0 0.3125rem rgba(212, 175, 55, 0.05); }
}


/* ─── Hero text ─── */
.bb-h1 {
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--slate);
    margin-bottom: 1.5rem;
}
.bb-h1-em {
    font-style: italic;
    color: var(--gold-dk);
    font-weight: 700;
}

.bb-lede {
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--text-2);
    max-width: 32rem;
    margin-bottom: 2rem;
}

.bb-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.bb-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-3);
}
.bb-meta-dot { opacity: 0.5; }


/* ─── Hero property card ─── */
.bb-hero-card {
    position: relative;
}

.bb-pcard {
    background: var(--warm);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.bb-pcard::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0.25rem;
    height: 100%;
    background: linear-gradient(180deg, var(--gold), var(--gold-dk));
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.bb-pcard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.bb-pcard-badge {
    display: inline-flex;
    align-items: center;
    background: var(--gold);
    color: var(--slate);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.3125rem 0.625rem;
    border-radius: 999rem;
}
.bb-pcard-county {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.bb-pcard-addr {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--slate);
    line-height: 1.2;
}
.bb-pcard-sub {
    font-size: 0.8125rem;
    color: var(--text-3);
    margin-top: 0.25rem;
    margin-bottom: 1.25rem;
}

.bb-pcard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem 1.25rem;
    padding: 1.25rem 0;
    border-top: var(--hairline);
    border-bottom: var(--hairline);
}
.bb-pcard-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 0.1875rem;
}
.bb-pcard-val {
    font-size: 0.875rem;
    color: var(--slate);
    font-weight: 500;
    line-height: 1.35;
}
.bb-pcard-val-num {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--gold-dk);
}

.bb-pcard-signals {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
    align-items: center;
}
.bb-pcard-signals-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    width: 100%;
    margin-bottom: 0.1875rem;
}
.bb-pcard-chip {
    background: rgba(212, 175, 55, 0.12);
    color: var(--gold-dk);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 999rem;
    border: 0.0625rem solid rgba(212, 175, 55, 0.25);
}


/* ─── Hero stat strip ─── */
.bb-hero-strip {
    position: relative;
    background: var(--slate);
    color: #fff;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.06);
}
.bb-hero-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: center;
    padding: 1.75rem 1.5rem;
    gap: 1rem;
}
.bb-strip-item { padding: 0 0.75rem; border-right: 0.0625rem solid rgba(255, 255, 255, 0.08); }
.bb-strip-item:last-child { border-right: none; }
.bb-strip-num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}
.bb-strip-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.5rem;
}


/* ═══════════════════════════════════════════════════════════════════
   GENERIC SECTION SHELL
   ═══════════════════════════════════════════════════════════════════ */
.bb-section {
    padding: var(--section-py) 0;
    position: relative;
}
.bb-section-dark {
    background: var(--slate);
    color: #fff;
}
.bb-section-dark h2,
.bb-section-dark h3,
.bb-section-dark h4 { color: #fff; }


/* ─── Block heads ─── */
.bb-block-head {
    margin-bottom: 3rem;
}
.bb-block-head.bb-center {
    text-align: center;
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

.bb-h2 {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--slate);
    margin-bottom: 1rem;
}
.bb-h2 em {
    font-style: italic;
    color: var(--gold-dk);
    font-weight: 700;
}
.bb-h2-light { color: #fff; }
.bb-h2-light em { color: var(--gold); }

.bb-h3 {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--slate);
    margin-bottom: 0.75rem;
}
.bb-h3 em { font-style: italic; color: var(--gold-dk); font-weight: 700; }

.bb-sub {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-2);
}
.bb-sub-light {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}


/* ═══════════════════════════════════════════════════════════════════
   PROBLEM (vs. comparison)
   ═══════════════════════════════════════════════════════════════════ */
.bb-problem { background: var(--bg-warm); }

.bb-vs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}
.bb-vs-col {
    background: #fff;
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.875rem 1.625rem;
}
.bb-vs-good {
    border-color: rgba(212, 175, 55, 0.45);
    background: linear-gradient(180deg, var(--warm) 0%, rgba(212, 175, 55, 0.04) 100%);
}
.bb-vs-tag {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 0.875rem;
}
.bb-vs-good .bb-vs-tag { color: var(--gold-dk); }
.bb-vs-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bb-vs-col li {
    position: relative;
    padding-left: 1.625rem;
    padding-bottom: 0.875rem;
    font-size: 0.9375rem;
    color: var(--text);
    line-height: 1.5;
}
.bb-vs-col li:last-child { padding-bottom: 0; }
.bb-vs-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
}
.bb-vs-bad li::before {
    background: rgba(178, 58, 58, 0.12);
    border: 0.125rem solid var(--bad);
}
.bb-vs-good li::before {
    background: var(--gold);
    box-shadow: 0 0 0 0.125rem rgba(212, 175, 55, 0.2);
}


/* ═══════════════════════════════════════════════════════════════════
   PILLARS (3 cards)
   ═══════════════════════════════════════════════════════════════════ */
.bb-pillars { background: var(--bg-sand); }

/* ─── Testimonials ─── */
.bb-testimonials {
    background: var(--bg-warm);
    position: relative;
}
.bb-testimonials-grid {
    display: grid;
    grid-template-columns: minmax(0, 46rem);
    justify-content: center;
    gap: 1.75rem;
    margin-top: 3rem;
}
.bb-testimonial {
    margin: 0;
    background: #ffffff;
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    box-shadow: 0 0.25rem 0.875rem rgba(28, 35, 49, 0.04);
}
.bb-testimonial-mark {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--gold);
    opacity: 0.75;
    flex-shrink: 0;
}
.bb-testimonial blockquote {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    font-weight: 400;
    letter-spacing: -0.005em;
    flex: 1;
}
.bb-testimonial figcaption {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-top: 1.25rem;
    border-top: 0.0625rem solid var(--border);
}
.bb-testimonial-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--slate) 0%, var(--slate-2) 100%);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 0 0.125rem rgba(201, 162, 39, 0.35), 0 0.25rem 0.75rem rgba(15, 23, 42, 0.12);
}
.bb-testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bb-testimonial-meta { min-width: 0; }
.bb-testimonial-name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text);
    line-height: 1.3;
}
.bb-testimonial-title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--text-3);
    margin-top: 0.1875rem;
    line-height: 1.35;
}
/* Hover polish - matches the rest of the card-lift family. */
.bb-testimonial {
    transition:
        transform 280ms cubic-bezier(0.2, 0.65, 0.3, 1),
        box-shadow 280ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
.bb-testimonial:hover {
    transform: translateY(-0.1875rem);
    box-shadow:
        0 0.875rem 2rem rgba(28, 35, 49, 0.08),
        0 0.125rem 0.375rem rgba(28, 35, 49, 0.04);
}
@media (max-width: 64em) {
    .bb-testimonials-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

.bb-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.bb-pillar {
    background: #fff;
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    transition: transform 0.2s var(--easing), border-color 0.2s var(--easing), box-shadow 0.2s var(--easing);
}
.bb-pillar:hover {
    transform: translateY(-0.25rem);
    border-color: var(--gold);
    box-shadow: var(--shadow);
}
.bb-pillar-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gold-dk);
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}
.bb-pillar-tag {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-dk);
    margin-bottom: 0.5rem;
}
.bb-pillar h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--slate);
    line-height: 1.25;
    margin-bottom: 0.75rem;
}
.bb-pillar p {
    color: var(--text-2);
    font-size: 0.9375rem;
    line-height: 1.55;
}


/* ═══════════════════════════════════════════════════════════════════
   PRODUCT SHOWCASE (4 screens)
   ═══════════════════════════════════════════════════════════════════ */
.bb-product { background: var(--bg-cool); }

.bb-screens {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.bb-screen {
    margin: 0;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: center;
}
.bb-screen:nth-child(even) {
    grid-template-columns: 1fr 1.4fr;
}
.bb-screen:nth-child(even) img { order: 2; }
.bb-screen:nth-child(even) figcaption { order: 1; }

.bb-screen img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 0.0625rem solid var(--border);
    box-shadow: var(--shadow);
    background: var(--cream);
}

.bb-screen figcaption {
    padding: 0;
}
.bb-screen-tag {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-dk);
    margin-bottom: 0.625rem;
}
.bb-screen-title {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--slate);
    line-height: 1.2;
    margin-bottom: 0.875rem;
}
.bb-screen p {
    color: var(--text-2);
    font-size: 0.9375rem;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════
   HOW IT WORKS (4 numbered steps, dark)
   ═══════════════════════════════════════════════════════════════════ */
.bb-how { background: var(--slate); color: #fff; }

.bb-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.bb-step {
    background: rgba(255, 255, 255, 0.03);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
}
.bb-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--gold);
    color: var(--slate);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1.25rem;
}
.bb-step h3 {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}
.bb-step p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.875rem;
    line-height: 1.6;
}

.bb-how-cta {
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════
   ROLES (6 cards)
   ═══════════════════════════════════════════════════════════════════ */
.bb-roles { background: var(--bg-cool); }

.bb-roles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.bb-role {
    background: #fff;
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.625rem;
    transition: transform 0.2s var(--easing), border-color 0.2s var(--easing);
}
.bb-role:hover {
    transform: translateY(-0.1875rem);
    border-color: var(--gold);
}
.bb-role-num {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gold-dk);
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}
.bb-role h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--slate);
    margin-bottom: 0.5rem;
}
.bb-role p {
    color: var(--text-2);
    font-size: 0.875rem;
    line-height: 1.55;
    margin-bottom: 1rem;
}
.bb-role-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-top: 0.875rem;
    border-top: var(--hairline);
}
.bb-role-tools span {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-3);
    background: var(--cream);
    padding: 0.25rem 0.5rem;
    border-radius: 0.1875rem;
}


/* ═══════════════════════════════════════════════════════════════════
   METHODOLOGY (open-book scoring, dark)
   ═══════════════════════════════════════════════════════════════════ */
.bb-method {
    background: linear-gradient(160deg, var(--slate) 0%, #161c28 100%);
}
.bb-method-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
}
.bb-method-text {
    padding-top: 0.5rem;
}
.bb-method-text .bb-eyebrow { margin-bottom: 1rem; }
.bb-method-text .bb-h2 { margin-bottom: 1rem; }

.bb-method-tiers {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.bb-tier {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.bb-tier-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.25rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.9375rem;
}
.bb-tier-hot { background: var(--gold); color: var(--slate); }
.bb-tier-warm { background: rgba(212, 175, 55, 0.25); color: var(--gold); }
.bb-tier-cold { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); }
.bb-tier-name {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1.125rem;
    margin-bottom: 0.125rem;
}
.bb-tier-desc {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
}

.bb-method-table {
    background: rgba(255, 255, 255, 0.03);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.bb-method-table-head {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem 0.875rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.5rem;
}
.bb-signal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.5rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.04);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
}
.bb-signal:last-child { border-bottom: none; }
.bb-signal > span:last-child {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--gold);
}


/* ═══════════════════════════════════════════════════════════════════
   PRICING (3 plans)
   ═══════════════════════════════════════════════════════════════════ */
.bb-pricing { background: var(--bg-warm); }

.bb-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}
.bb-plan {
    background: #fff;
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    position: relative;
}
.bb-plan-popular {
    border-color: var(--gold);
    box-shadow: var(--shadow);
    transform: translateY(-0.5rem);
}
.bb-plan-badge {
    position: absolute;
    top: -0.625rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--slate);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.3125rem 0.75rem;
    border-radius: 999rem;
}
.bb-plan h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--slate);
    margin-bottom: 0.25rem;
}
.bb-plan-tag {
    font-size: 0.875rem;
    color: var(--text-3);
    margin-bottom: 1.5rem;
}
.bb-plan-price {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
.bb-plan-amt {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--slate);
    line-height: 1;
}
.bb-plan-per {
    font-family: var(--font-mono);
    color: var(--text-3);
    font-size: 0.875rem;
}
.bb-plan-feat {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.bb-plan-feat li {
    position: relative;
    padding-left: 1.375rem;
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.5;
}
.bb-plan-feat li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4375rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0.125rem rgba(212, 175, 55, 0.2);
}

.bb-pricing-foot {
    margin-top: 2.5rem;
    text-align: center;
    color: var(--text-2);
    font-size: 0.9375rem;
}
.bb-pricing-foot a {
    color: var(--gold-dk);
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════ */
.bb-faq { background: var(--bg-sand); }

.bb-faq-list {
    max-width: 50rem;
    margin: 0 auto;
}
.bb-faq-item {
    background: #fff;
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: border-color 0.18s var(--easing);
}
.bb-faq-item[open] {
    border-color: var(--gold);
    box-shadow: var(--shadow-sm);
}
.bb-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.125rem 1.5rem;
    font-weight: 600;
    color: var(--slate);
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.bb-faq-item summary::-webkit-details-marker { display: none; }
.bb-faq-item summary::after {
    content: '+';
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gold-dk);
    line-height: 1;
    transition: transform 0.2s var(--easing);
    flex-shrink: 0;
}
.bb-faq-item[open] summary::after { transform: rotate(45deg); }
.bb-faq-item div {
    padding: 0 1.5rem 1.25rem;
    color: var(--text-2);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.bb-faq-item div a { color: var(--gold-dk); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════════════════════════ */
.bb-final { background: var(--bg-warm); padding-top: 3rem; padding-bottom: 5rem; }

.bb-final-card {
    background: linear-gradient(135deg, var(--slate) 0%, #2a3447 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 4rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.bb-final-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 30rem 20rem at 80% 0%, rgba(212, 175, 55, 0.18), transparent 70%);
    pointer-events: none;
}
.bb-final-card .bb-eyebrow { position: relative; }
.bb-final-h {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -0.015em;
}
.bb-final-h em {
    font-style: italic;
    color: var(--gold);
    font-weight: 700;
}
.bb-final-card p {
    position: relative;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.0625rem;
    line-height: 1.55;
    max-width: 36rem;
    margin: 0 auto 2rem;
}
.bb-final-cta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
}


/* ═══════════════════════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════════════════════ */
.bb-news {
    background: var(--bg-sand);
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.bb-news-i {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.bb-news .bb-h3 { margin-bottom: 0.75rem; }
.bb-news-sub {
    color: var(--text-2);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.bb-news-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    position: relative;
}
.bb-news-form input[type="email"] {
    flex: 1;
    min-width: 14rem;
    padding: 0.875rem 1rem;
    border: 0.0625rem solid var(--border-dk);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    color: var(--slate);
    transition: border-color 0.18s var(--easing), box-shadow 0.18s var(--easing);
}
.bb-news-form input[type="email"]:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 0.1875rem rgba(212, 175, 55, 0.18);
}
.bb-news-form .bb-btn { padding: 0.875rem 1.5rem; }
.bb-news-status {
    width: 100%;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-3);
    min-height: 1.25rem;
}
.bb-news-status.is-error { color: var(--bad); }
.bb-honey {
    position: absolute !important;
    left: -624.9375rem !important;
    width: 0.0625rem !important;
    height: 0.0625rem !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.bb-foot {
    background: var(--slate);
    color: rgba(255, 255, 255, 0.7);
    padding: 4rem 0 2rem;
}
.bb-foot-top {
    display: grid;
    /* Brand column + five link columns, all evenly balanced so the
       column headers (PLATFORM / SOLUTIONS / DATA / RESOURCES / COMPANY)
       sit on the same horizontal baseline. align-items:start pins them
       to the top; justify-content keeps the grid flush left. */
    grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr));
    gap: 2.25rem;
    align-items: start;
    padding-bottom: 2rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.bb-foot-brand {
    max-width: 22rem;
}
.bb-foot-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}
.bb-foot-logo:hover { color: var(--gold); }
.bb-foot-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; height: 2rem;
    background: var(--gold);
    color: var(--slate);
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 0.9375rem;
}
.bb-foot-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}
.bb-foot-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.bb-foot-trust span {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.45);
    padding: 0.25rem 0.5rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.12);
    border-radius: 0.1875rem;
}

.bb-foot-col {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}
.bb-foot-col-h {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    /* Fixed height so every column header sits on the exact same
       baseline regardless of wrapping - no drift between PLATFORM and
       SOLUTIONS when a label is one character longer. */
    height: 1.25rem;
    line-height: 1.25rem;
    margin-bottom: 0.5rem;
}
.bb-foot-col a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
}
.bb-foot-col a:hover { color: var(--gold); }

/* ─── Footer quick-contact (sleek + modern) ─────────────────────────────
   Floating-label inputs with underline-only affordance: no hard boxes,
   just a hairline that animates to gold on focus. Kept in the dark
   footer theme so it reads as a quiet invitation, not a second CTA. */
.bb-foot-contact {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 4rem;
    align-items: center;
    /* Sits at the very bottom of the footer. No border-top — the
       single divider above the copyright is the only horizontal line
       in the footer. */
    padding: 2.5rem 0 0.5rem;
    margin-top: 1.75rem;
}
.bb-foot-contact-copy { color: rgba(255, 255, 255, 0.82); max-width: 22rem; }
.bb-foot-contact-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.75rem;
}
.bb-foot-contact-head {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}
.bb-foot-contact p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
}

.bb-foot-contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.75rem;
    row-gap: 1.5rem;
    align-items: end;
}
.bb-foot-field { position: relative; }
.bb-foot-field-half { grid-column: span 1; }
.bb-foot-field-full { grid-column: 1 / -1; }

.bb-foot-field input,
.bb-foot-field textarea {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    background: transparent;
    border: 0;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.22);
    border-radius: 0;
    padding: 0.625rem 0 0.5rem;
    width: 100%;
    transition: border-color 0.2s ease, color 0.2s ease;
    caret-color: var(--gold);
}
.bb-foot-field textarea {
    resize: none;
    line-height: 1.5;
    min-height: 2.75rem;
    overflow: hidden;
}
.bb-foot-field input::placeholder,
.bb-foot-field textarea::placeholder { color: transparent; }

.bb-foot-field label {
    position: absolute;
    left: 0;
    top: 0.625rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    transform-origin: 0 0;
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.bb-foot-field input:focus,
.bb-foot-field textarea:focus {
    outline: none;
    border-bottom-color: var(--gold);
}
.bb-foot-field input:focus + label,
.bb-foot-field input:not(:placeholder-shown) + label,
.bb-foot-field textarea:focus + label,
.bb-foot-field textarea:not(:placeholder-shown) + label {
    transform: translateY(-1.1rem) scale(0.72);
    color: var(--gold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
}

.bb-foot-contact-submit {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0e1726;
    background: linear-gradient(135deg, var(--gold) 0%, #e6c064 100%);
    border: 0;
    border-radius: 62.4375rem;
    padding: 0.875rem 1.625rem;
    cursor: pointer;
    box-shadow: 0 0.375rem 1.25rem rgba(181, 148, 42, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    margin-top: 0.25rem;
}
.bb-foot-contact-submit svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}
.bb-foot-contact-submit:hover {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.5rem 1.5rem rgba(181, 148, 42, 0.35);
    filter: brightness(1.04);
}
.bb-foot-contact-submit:hover svg { transform: translateX(0.25rem); }
.bb-foot-contact-submit:active { transform: translateY(0); box-shadow: 0 0.25rem 0.875rem rgba(181, 148, 42, 0.28); }

@media (max-width: 48em) {
    .bb-foot-contact { grid-template-columns: 1fr; gap: 2.25rem; padding: 2.25rem 0 1.5rem; margin-top: 2rem; }
    .bb-foot-contact-form { column-gap: 1.25rem; row-gap: 1.25rem; }
    .bb-foot-field-half { grid-column: 1 / -1; }
}

.bb-foot-bottom {
    padding-top: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

/* Tablet ─ 1024px and below */
@media (max-width: 64em) {
    :root { --section-py: 4.5rem; }

    .bb-hero-i {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding-bottom: 3.5rem;
    }
    .bb-hero-card { max-width: 28rem; }

    .bb-hero-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bb-strip-item:nth-child(2n) { border-right: none; }
    .bb-strip-item:nth-child(-n+2) { padding-bottom: 1.25rem; border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08); }

    .bb-pillars-grid,
    .bb-roles-grid,
    .bb-plans,
    .bb-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bb-plan-popular { transform: none; }

    .bb-method-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .bb-screen, .bb-screen:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .bb-screen:nth-child(even) img,
    .bb-screen:nth-child(even) figcaption {
        order: initial;
    }

    .bb-news-i {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .bb-foot-top {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .bb-foot-brand { grid-column: 1 / -1; max-width: none; }
}

/* Mobile ─ 768px and below */
@media (max-width: 48em) {
    :root { --section-py: 3.5rem; }

    .bb-section-i, .bb-nav-i, .bb-hero-i, .bb-foot-i {
        padding-left: 1.125rem;
        padding-right: 1.125rem;
    }

    .bb-nav-toggle { display: flex; }
    .bb-nav-links {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--warm);
        border-top: var(--hairline);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.75rem 1.125rem 1.125rem;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.25s var(--easing), opacity 0.18s var(--easing), padding 0.25s var(--easing);
    }
    .bb-nav-links.is-open {
        max-height: 28rem;
        opacity: 1;
        box-shadow: var(--shadow);
    }
    .bb-nav-links > a:not(.bb-btn) {
        padding: 0.875rem 0;
        border-bottom: var(--hairline);
        font-size: 1rem;
    }
    .bb-nav-links > a:not(.bb-btn):last-of-type { border-bottom: none; }
    .bb-nav-links > .bb-btn { margin-top: 0.875rem; width: 100%; }
    .bb-nav-i { position: relative; }

    .bb-hero { padding-top: 2.5rem; }
    .bb-hero-strip { padding: 1.25rem 1rem; gap: 0.75rem; }
    .bb-strip-num { font-size: 1.625rem; }

    .bb-pillars-grid,
    .bb-roles-grid,
    .bb-plans,
    .bb-steps,
    .bb-vs {
        grid-template-columns: 1fr;
    }

    .bb-block-head { margin-bottom: 2rem; }
    .bb-screens { gap: 2rem; }

    .bb-final-card { padding: 2.5rem 1.5rem; }
    .bb-final-cta { flex-direction: column; align-items: stretch; }
    .bb-final-cta .bb-btn { width: 100%; }

    .bb-foot-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding-bottom: 2rem;
    }
    .bb-foot-bottom { justify-content: center; text-align: center; }

    .bb-pcard-grid { grid-template-columns: 1fr; gap: 0.75rem; }

    .bb-method-table { padding: 1rem; }
}

/* Small phone ─ 480px and below */
@media (max-width: 30em) {
    .bb-h1 { font-size: 2.25rem; }
    .bb-h2 { font-size: 1.625rem; }
    .bb-final-h { font-size: 1.625rem; }

    .bb-hero-cta { flex-direction: column; align-items: stretch; }
    .bb-hero-cta .bb-btn { width: 100%; }

    .bb-hero-strip { grid-template-columns: 1fr; }
    .bb-strip-item { border-right: none !important; }
    .bb-strip-item:not(:last-child) { padding-bottom: 1rem; border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08); }

    .bb-foot-top { grid-template-columns: 1fr; }

    .bb-news-form { flex-direction: column; }
    .bb-news-form .bb-btn { width: 100%; }
}


/* ─── Reduced motion ─── */
/* ═══════════════════════════════════════════════════════════════════
   POLISH LAYER - scroll progress, section bridges, reveal, hover lift

   Everything below is additive: the page renders identically if any of
   these rules are removed, and the reveal states are gated on the
   `html.js-reveal` class so a broken or skipped script never hides a
   section permanently.
   ═══════════════════════════════════════════════════════════════════ */

/* Scroll progress - a hairline gold bar across the bottom of the nav
   that grows as the user reads down the page. Variable is written by
   landing.js on every scroll frame. */
.bb-nav { overflow: hidden; }
.bb-nav::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.125rem;
    width: var(--bb-scroll, 0%);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.35) 0%, var(--gold) 55%, rgba(212, 175, 55, 0.35) 100%);
    box-shadow: 0 0 0.5rem rgba(212, 175, 55, 0.35);
    pointer-events: none;
    transition: width 120ms linear;
}

/* Section bridges - softly bleed the next section's tone up over the
   current one's bottom edge so adjacent panels read like they belong
   to the same page instead of a stack of cards. A ::before on the
   darker section pulls a sliver of the previous light tone into its
   top band, smoothing the seam. */
.bb-how,
.bb-final,
.bb-news {
    position: relative;
    isolation: isolate;
}
.bb-how::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3.5rem;
    background: linear-gradient(180deg, var(--cream) 0%, rgba(252, 249, 241, 0) 100%);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}
.bb-how .bb-section-i { position: relative; z-index: 1; }

/* The newsletter and final-CTA sections trail into the dark footer -
   soft fade at the bottom of the last light section so the transition
   into slate doesn't slam. */
.bb-news::after,
.bb-pillars::after {
    content: '';
    display: block;
    height: 2.5rem;
    margin-bottom: -2.5rem;
    background: linear-gradient(180deg, transparent 0%, rgba(28, 35, 49, 0.04) 100%);
    pointer-events: none;
}

/* Card-style surfaces get a quiet lift on hover. Multiple sections use
   similar patterns, so we style them together with a shared shadow
   + translate curve. Keep the delta small (2px) - any larger and the
   page starts to feel jumpy on a long scroll with many cards. */
.bb-pillar,
.bb-plan,
.bb-role,
.bb-faq-item,
.bb-screen .bb-screen-card,
.bb-pcard {
    transition:
        transform 280ms cubic-bezier(0.2, 0.65, 0.3, 1),
        box-shadow 280ms cubic-bezier(0.2, 0.65, 0.3, 1),
        border-color 280ms ease;
    will-change: transform;
}
.bb-pillar:hover,
.bb-plan:hover,
.bb-role:hover,
.bb-faq-item:hover {
    transform: translateY(-0.125rem);
    box-shadow:
        0 0.75rem 1.75rem rgba(28, 35, 49, 0.08),
        0 0.125rem 0.375rem rgba(28, 35, 49, 0.04);
}

/* Screens (the four product mock-ups) get a tighter crop-and-shift feel:
   the image rises slightly and gains a warm shadow. Caption stays put. */
.bb-screen img {
    transition:
        transform 420ms cubic-bezier(0.2, 0.65, 0.3, 1),
        box-shadow 420ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
.bb-screen:hover img {
    transform: translateY(-0.1875rem) scale(1.008);
    box-shadow:
        0 1.25rem 2.75rem rgba(28, 35, 49, 0.14),
        0 0.375rem 0.875rem rgba(28, 35, 49, 0.06);
}

/* Nav links: existing :hover just changes color. Add an underline that
   grows from center - 90ms delay so fast mouse passes don't flicker. */
.bb-nav-links > a:not(.bb-btn):not(.bb-nav-signin) {
    position: relative;
    padding-bottom: 0.25rem;
}
.bb-nav-links > a:not(.bb-btn):not(.bb-nav-signin)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 0.0625rem;
    background: var(--gold);
    transform: translateX(-50%);
    transition: width 220ms ease 90ms;
}
.bb-nav-links > a:not(.bb-btn):not(.bb-nav-signin):hover::after,
.bb-nav-links > a:not(.bb-btn):not(.bb-nav-signin):focus-visible::after {
    width: 100%;
}

/* Scroll-reveal - elements listed here start at `opacity:0` and rise
   into place once the IntersectionObserver tags them `is-visible`.
   Gated on `html.js-reveal` so the initial-hidden state is ONLY ever
   active when the JS has run far enough to arm it (see landing.js §5).
   Nothing can stay hidden if the script never attaches. */
html.js-reveal .bb-pillar,
html.js-reveal .bb-screen,
html.js-reveal .bb-vs-col,
html.js-reveal .bb-step,
html.js-reveal .bb-role,
html.js-reveal .bb-plan,
html.js-reveal .bb-faq-item,
html.js-reveal .bb-block-head,
html.js-reveal .bb-testimonial {
    opacity: 0;
    /* Larger vertical offset + a near-miss scale gives the reveal real
       presence without looking cartoony. 820ms with a soft overshoot
       curve reads as "considered," not fast-and-jumpy. */
    transform: translateY(2.25rem) scale(0.965);
    filter: blur(0.25rem);
    transition:
        opacity 820ms cubic-bezier(0.16, 0.84, 0.32, 1),
        transform 820ms cubic-bezier(0.16, 0.84, 0.32, 1),
        filter 620ms cubic-bezier(0.16, 0.84, 0.32, 1);
}
html.js-reveal .is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Staggered reveals so sibling cards don't all pop in on the same
   frame - creates a gentle cascade. Up to 4 siblings covered; beyond
   that we let them fall on the base timing to keep scroll feeling snappy. */
html.js-reveal .bb-pillars-grid > .bb-pillar:nth-child(2),
html.js-reveal .bb-screens > .bb-screen:nth-child(2),
html.js-reveal .bb-steps > .bb-step:nth-child(2),
html.js-reveal .bb-plans > .bb-plan:nth-child(2),
html.js-reveal .bb-testimonials-grid > .bb-testimonial:nth-child(2) { transition-delay: 120ms; }
html.js-reveal .bb-pillars-grid > .bb-pillar:nth-child(3),
html.js-reveal .bb-screens > .bb-screen:nth-child(3),
html.js-reveal .bb-steps > .bb-step:nth-child(3),
html.js-reveal .bb-plans > .bb-plan:nth-child(3),
html.js-reveal .bb-testimonials-grid > .bb-testimonial:nth-child(3) { transition-delay: 240ms; }
html.js-reveal .bb-screens > .bb-screen:nth-child(4),
html.js-reveal .bb-steps > .bb-step:nth-child(4),
html.js-reveal .bb-plans > .bb-plan:nth-child(4) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
    }
    .bb-eyebrow-dot { animation: none; }
    html { scroll-behavior: auto; }
    /* Reveal layer off entirely: any element is immediately visible
       whether or not js-reveal is armed. */
    html.js-reveal .bb-pillar,
    html.js-reveal .bb-screen,
    html.js-reveal .bb-vs-col,
    html.js-reveal .bb-step,
    html.js-reveal .bb-role,
    html.js-reveal .bb-plan,
    html.js-reveal .bb-faq-item,
    html.js-reveal .bb-block-head {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ─── Print ─── */
@media print {
    .bb-nav, .bb-hero-strip, .bb-final, .bb-news, .bb-foot { display: none; }
    body { background: #fff; color: #000; }
    .bb-section { padding: 1.5rem 0; page-break-inside: avoid; }
    .bb-section-dark { background: #fff; color: #000; }
    .bb-section-dark h2, .bb-section-dark h3, .bb-section-dark h4 { color: #000; }
    .bb-pcard, .bb-pillar, .bb-vs-col, .bb-screen img, .bb-step, .bb-role, .bb-plan, .bb-faq-item {
        box-shadow: none;
        border-color: #ccc !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO TERTIARY LINK - the quiet "Schedule a walkthrough" beneath the
   two primary CTAs. Reads as a third option without competing.
   ═══════════════════════════════════════════════════════════════════ */
.bb-hero-tertiary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--slate);
    text-decoration: none;
    border-bottom: 0.0625rem solid transparent;
    padding-bottom: 0.125rem;
    transition: color 180ms ease, border-color 180ms ease, transform 180ms cubic-bezier(0.16, 0.84, 0.32, 1);
}
.bb-hero-tertiary:hover,
.bb-hero-tertiary:focus-visible {
    color: var(--gold-dk);
    border-bottom-color: var(--gold);
    transform: translateX(0.125rem);
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO INDEX-STATUS BAR - status header above the 4 stats, with a
   live pulsing green dot. Mirrors the editorial "dataset as product"
   angle: the page shows you the dataset's current state.
   ═══════════════════════════════════════════════════════════════════ */
.bb-strip-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.bb-strip-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0.1875rem rgba(74, 222, 128, 0.18);
    animation: bb-strip-pulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes bb-strip-pulse {
    0%, 100% { box-shadow: 0 0 0 0.1875rem rgba(74, 222, 128, 0.18); }
    50%      { box-shadow: 0 0 0 0.3125rem rgba(74, 222, 128, 0.04); }
}
.bb-strip-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 1.25rem 1.5rem 1.75rem;
    gap: 1rem;
    text-align: center;
}
.bb-strip-items .bb-strip-item {
    padding: 0 0.75rem;
    border-right: 0.0625rem solid rgba(255, 255, 255, 0.08);
}
.bb-strip-items .bb-strip-item:last-child { border-right: none; }

@media (max-width: 48em) {
    .bb-strip-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bb-strip-items .bb-strip-item:nth-child(2n) { border-right: none; }
    .bb-strip-items .bb-strip-item:nth-child(-n+2) {
        padding-bottom: 1.25rem;
        border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MISSION - centered editorial section. Ivory background, serif
   quote, subtle attribution. One sentence, one idea.
   ═══════════════════════════════════════════════════════════════════ */
/* Mission - matches the newsletter's slate-gradient + gold-glow
   treatment so the two editorial dark sections read as a pair. */
.bb-mission {
    background: linear-gradient(180deg, var(--slate) 0%, #131923 100%);
    padding: 6.5rem 2rem;
    position: relative;
    overflow: hidden;
    border-top: 0;
    border-bottom: 0;
}
.bb-mission::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 62rem 38rem at 50% 68%, rgba(212, 175, 55, 0.22), transparent 72%);
    pointer-events: none;
}
.bb-mission .bb-section-i { position: relative; }
.bb-mission-inner {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.bb-mission-tag {
    font-family: var(--font-mono);
    /* The tag is now the only text in the mission block - pump the
       size up slightly so it carries the section instead of reading
       like an orphaned subhead. */
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 0;
    text-align: center;
}
.bb-mission-quote {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.625rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0 0 1.75rem;
}
.bb-mission-quote em {
    font-style: italic;
    color: var(--gold-soft);
    font-weight: 700;
}
.bb-mission-attr {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

/* ── Three-row sliding marquee of brokerage logos ─────────────────
   Smoothness, drag-to-scrub, and momentum are driven by the JS
   controller in /js/marquee.js - this stylesheet only owns layout,
   colors, and the edge-fade mask. Critically, NO CSS animation runs
   on the track: every transform is set per-frame from rAF so we
   never collide with the GPU compositor's keyframe interpolation
   (the source of the prior jitter). */
.bb-mission-marquee {
    margin: 4rem auto 0;
    max-width: 72rem;
    display: flex;
    flex-direction: column;
    /* Generous between-row gap so the bigger row-padding on each side
       (added below for hover headroom) doesn't pinch its neighbors. */
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    /* Edge-fade mask so the loop seam never reveals the wrap point. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    position: relative;
    /* Disable text/image selection at the container level so dragging
       a row doesn't accidentally start selecting the page. */
    -webkit-user-select: none;
    user-select: none;
}
.bb-marquee-row {
    display: block;
    width: 100%;
    /* The row IS the viewport for its track. We clip horizontally
       (so the doubled content stays out of view) but keep VERTICAL
       overflow visible so the hover scale-up doesn't get its top and
       bottom shaved off when a logo lifts. The vertical padding gives
       the hover transform room to expand without overlapping the
       neighboring row. */
    overflow-x: hidden;
    overflow-y: visible;
    padding-block: clamp(0.5rem, 1.2vw, 1rem);
    /* Cursor signals the row is grabbable; flips to grabbing while
       the JS controller sets .is-dragging during an active drag. */
    cursor: grab;
    /* touch-action: pan-y lets vertical page scroll pass through while
       horizontal drag stays with us. Without this, the browser fights
       with our pointermove handler on every touch and the gesture
       feels sticky. */
    touch-action: pan-y;
    /* Force its own compositor layer so transforms on the inner track
       can't trigger reflow on neighboring rows. */
    contain: layout paint;
}
.bb-marquee-row.is-dragging {
    cursor: grabbing;
}
.bb-marquee-track {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    /* width: max-content lets the doubled content span its full
       intrinsic width. The JS controller measures scrollWidth/2 to
       know where to wrap. */
    width: max-content;
    flex-shrink: 0;
    /* will-change + a no-op translateZ promotes the track onto its
       own GPU layer so transform writes don't trigger paint cycles. */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    /* Avoid layout-impacting transitions - only the controller
       drives transform, so any CSS transition would fight it. */
    transition: none;
}
.bb-marquee-track img {
    /* Larger than before so the row reads with presence on every
       screen size. The clamp scales smoothly from phone (1.875rem) to
       tablet to desktop (2.625rem). */
    height: clamp(1.875rem, 2.8vw, 2.625rem);
    width: auto;
    flex-shrink: 0;
    /* Knock the SVGs to white-on-dark, keep them muted until hover.
       The brand colors aren't used here - uniform monochrome lets
       the wall read as a single editorial element rather than a
       distracting rainbow. */
    filter: brightness(0) invert(1);
    opacity: 0.55;
    /* Slightly faster transitions so hover feedback is snappy
       without dropping into "twitchy" territory. */
    transition: opacity 220ms var(--easing), transform 220ms var(--easing);
    /* Keep transforms on their own compositor layer for buttery
       hover scale animations. */
    transform-origin: center center;
    /* The drag handler picks up clicks intentionally; native image
       drag would otherwise fight the pointer-drag gesture. */
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: auto;
}
.bb-marquee-track img:hover,
.bb-marquee-track img:focus-visible {
    opacity: 1;
    /* Slightly less aggressive scale + the row's vertical padding
       gives the lift room to land without clipping at the top or
       bottom of the row. */
    transform: scale(1.12);
    outline: none;
}
.bb-marquee-row.is-dragging .bb-marquee-track img {
    /* Mute the per-image hover lift while a drag is in progress so
       the row reads as a single moving rail, not 13 wobbling logos. */
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    .bb-marquee-track {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        transform: none !important;
    }
    .bb-marquee-row { cursor: default; }
}

/* ── Tablet breakpoint ─────────────────────────────────────────── */
@media (max-width: 64em) {
    .bb-mission-marquee {
        margin-top: 3rem;
    }
    .bb-marquee-track {
        gap: 3rem;
    }
}

/* ── Phone breakpoint ──────────────────────────────────────────── */
@media (max-width: 48em) {
    .bb-mission-marquee {
        margin-top: 2.5rem;
        /* Bigger inter-row gap than the previous 0.5rem so the
           three-row wall reads as a substantial panel, not a thin
           strip. Stays fluid via clamp + vw. */
        gap: clamp(0.625rem, 2.2vw, 1.125rem);
        /* Looser side-fade than 5%/95% so a 360–414px viewport keeps
           ~94% of its width usable for logos. The previous 5% on each
           side was eating ~36px on a 360px screen. */
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
    }
    .bb-marquee-row {
        /* More vertical headroom per row so the marquee panel has
           presence on phones instead of feeling flat. */
        padding-block: clamp(0.75rem, 3vw, 1.125rem);
    }
    .bb-marquee-track {
        gap: clamp(1.75rem, 6vw, 2.75rem);
    }
    .bb-marquee-track img {
        /* Override the base clamp (which pegs at its 1.875rem min on
           any narrow viewport) so logos read more substantially on
           mobile. ~34px at the smallest phone widths, scaling up
           toward the tablet edge of the breakpoint. */
        height: clamp(2.125rem, 6vw, 2.625rem);
    }
}

/* ── Micro phone (<=22.5em / 360px) ──────────────────────────── */
@media (max-width: 22.5em) {
    .bb-mission-marquee {
        /* Pull the side-fade in even further at 360px - every
           percentage of mask is a meaningful slice of viewport at
           this width. */
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
    }
    .bb-marquee-track {
        gap: 1.5rem;
    }
    .bb-marquee-track img {
        /* Keep logos legible on the smallest phones - the previous
           1.625rem was too small to recognize the wordmarks. */
        height: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   NEWSLETTER TRUST ROW + CONSENT - below the email form, a quiet
   consent sentence and a 3-chip trust row. Mirrors GDPR + social
   proof conventions without shouting.
   ═══════════════════════════════════════════════════════════════════ */
.bb-news-consent {
    margin-top: 1rem;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--text-3);
    max-width: 32rem;
}
.bb-news-consent a {
    color: var(--text-2);
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
    text-decoration-color: rgba(181, 148, 42, 0.4);
    transition: color 140ms ease, text-decoration-color 140ms ease;
}
.bb-news-consent a:hover {
    color: var(--gold-dk);
    text-decoration-color: var(--gold);
}
.bb-news-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.bb-news-trust span {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-3);
    padding: 0.3125rem 0.625rem;
    background: rgba(12, 17, 26, 0.03);
    border: 0.0625rem solid var(--border);
    border-radius: 62.4375rem;
}

/* ═══════════════════════════════════════════════════════════════════
   MEGA-MENU NAV - Platform / Solutions / Data / Resources
   ═══════════════════════════════════════════════════════════════════ */
.bb-nav { position: sticky; }
/* Every direct child of the nav-links flex row - mega-trigger wraps,
   Pricing, Sign in, and the Start-free-trial CTA - locks to the exact
   same 2.5rem baseline. Keep this rule as the single source of truth
   for nav-row geometry. */
.bb-nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.bb-nav-links > * {
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
    box-sizing: border-box;
}
/* The Start-free-trial CTA is a .bb-btn whose padding comes from
   .bb-btn-sm (top/bottom 0.5rem). Overriding to vertical padding:0
   via .bb-nav-links > * above could collapse the button visually.
   Put the padding back with horizontal only. */
.bb-nav-links > .bb-btn { padding: 0 1.125rem; }
.bb-nav-item { position: static; }
.bb-nav-trigger {
    all: unset;
    height: 100%;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    transition: color 140ms ease;
}
.bb-nav-trigger:hover,
.bb-nav-trigger:focus-visible,
.bb-nav-mega-wrap.is-open > .bb-nav-trigger {
    color: var(--gold);
    outline: none;
}
.bb-nav-caret {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 200ms cubic-bezier(0.16, 0.84, 0.32, 1);
}
.bb-nav-mega-wrap.is-open .bb-nav-caret { transform: rotate(180deg); }

.bb-nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 140ms ease;
}
.bb-nav-link:hover { color: var(--gold); }

/* The mega panel spans the full viewport width, anchored to the nav.
   It lives inside the nav-item for accessibility / focus management but
   positions against the nav itself via `left: 0; right: 0`. */
.bb-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #ffffff;
    color: var(--slate);
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1.25rem 3rem rgba(12, 17, 26, 0.18);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.16, 0.84, 0.32, 1), visibility 220ms;
}
/* Invisible hover bridge. The trigger sits at the top of the nav; the
   panel floats below with a small visible gap. Without this bridge the
   cursor crosses "empty" DOM while traveling between them, firing a
   spurious mouseleave on the wrap. The ::before extends the panel's
   hit-area upward through the gap so the browser treats trigger → gap
   → panel as one continuous region. */
.bb-mega::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1rem;
    height: 1rem;
    background: transparent;
}
.bb-nav-mega-wrap.is-open .bb-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.bb-mega-i {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2.5rem 2rem 2.75rem;
}
.bb-mega-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.15fr;
    gap: 3rem;
}
.bb-mega-col-h {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold-dk);
    margin-bottom: 1.125rem;
}
.bb-mega-link {
    display: block;
    padding: 0.625rem 0;
    color: inherit;
    text-decoration: none;
    border-radius: 0.375rem;
    transition: color 140ms ease, transform 180ms cubic-bezier(0.16, 0.84, 0.32, 1);
}
.bb-mega-link:hover,
.bb-mega-link:focus-visible {
    color: var(--gold-dk);
    transform: translateX(0.1875rem);
    outline: none;
}
.bb-mega-link-h {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--slate);
    margin-bottom: 0.1875rem;
    line-height: 1.3;
}
.bb-mega-link:hover .bb-mega-link-h,
.bb-mega-link:focus-visible .bb-mega-link-h { color: var(--gold-dk); }
.bb-mega-link-sub {
    font-size: 0.8125rem;
    color: var(--text-2);
    line-height: 1.5;
}

/* Featured card on the right of each mega - the Cotality pattern that
   separates a mega-menu from a plain dropdown. */
.bb-mega-feature {
    background: linear-gradient(165deg, var(--bg-warm) 0%, #fbf7ee 100%);
    padding: 1.75rem;
    border-radius: 0.875rem;
    border: 0.0625rem solid var(--border);
    display: flex;
    flex-direction: column;
}
.bb-mega-feature-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold-dk);
    margin-bottom: 0.625rem;
}
.bb-mega-feature-h {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--slate);
    line-height: 1.25;
    margin: 0 0 0.625rem;
    letter-spacing: -0.01em;
}
.bb-mega-feature p {
    font-size: 0.875rem;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0 0 1rem;
}
.bb-mega-feature-cta {
    margin-top: auto;
    color: var(--slate);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 140ms ease, transform 180ms ease;
}
.bb-mega-feature-cta:hover {
    color: var(--gold-dk);
    transform: translateX(0.1875rem);
}

/* Scrim behind the open panel - dims the rest of the page so the menu
   reads as a modal surface, not a floating tooltip. Fixed-positioned
   full viewport; a top offset equal to the nav height would require a
   CSS variable the nav doesn't expose, so we simply sit behind the
   nav (z-index 40 < nav's 100) and the nav visually clips the top. */
.bb-nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(12, 17, 26, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 40;
}
body.bb-mega-open .bb-nav-scrim {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile: the nav collapses behind the hamburger, and each trigger
   becomes an inline accordion - the mega panel renders in the flow
   of the stacked nav, not as an overlay. */
@media (max-width: 64em) {
    .bb-nav-links { gap: 0.75rem; }
    .bb-nav-trigger { font-size: 1rem; }
    .bb-nav-item { display: block; width: 100%; }
    .bb-nav-mega-wrap { display: block; }
    .bb-mega {
        position: static;
        box-shadow: none;
        border-top: 0;
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.85);
        transform: none;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: opacity 220ms ease, max-height 320ms cubic-bezier(0.16, 0.84, 0.32, 1), visibility 220ms;
    }
    .bb-nav-mega-wrap.is-open .bb-mega {
        opacity: 1;
        visibility: visible;
        max-height: 60rem;
    }
    .bb-mega-i { padding: 1rem 0.5rem 0.25rem; }
    .bb-mega-cols { grid-template-columns: 1fr; gap: 1.25rem; }
    .bb-mega-col-h { color: var(--gold); }
    .bb-mega-link-h { color: #ffffff; }
    .bb-mega-link-sub { color: rgba(255, 255, 255, 0.6); }
    .bb-mega-feature { display: none; }  /* keep mobile menu scannable */
    .bb-nav-scrim { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   TRUST BAND - social-proof section directly below the hero. Full-
   width ivory panel, centered intro, a row of metro-name "chips" so
   the page reads as "these are real places using this" without faking
   logos we don't have permission for.
   ═══════════════════════════════════════════════════════════════════ */
.bb-trust-band {
    background: var(--bg-warm);
    padding: 3.5rem 0 3.75rem;
    border-bottom: 0.0625rem solid var(--border);
}
.bb-trust-band .bb-section-i {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}
.bb-trust-band-lead .bb-eyebrow {
    color: var(--gold-dk);
    margin-bottom: 1rem;
}
.bb-trust-band-h {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 700;
    color: var(--slate);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}
.bb-trust-band-sub {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0;
    max-width: 28rem;
}
.bb-trust-band-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-content: flex-start;
}
.bb-trust-chip {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--slate);
    padding: 0.4375rem 0.875rem;
    background: #ffffff;
    border: 0.0625rem solid var(--border);
    border-radius: 2rem;
    transition: border-color 140ms ease, transform 180ms cubic-bezier(0.16, 0.84, 0.32, 1);
}
.bb-trust-chip:hover {
    border-color: var(--gold);
    transform: translateY(-0.0625rem);
}
@media (max-width: 54em) {
    .bb-trust-band .bb-section-i {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   TESTIMONIAL CAROUSEL - interactive, 7 slides, one on screen.
   ═══════════════════════════════════════════════════════════════════ */
.bb-carousel {
    position: relative;
    max-width: 56rem;
    margin: 3rem auto 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}
.bb-carousel-viewport {
    overflow: hidden;
    border-radius: 1rem;
    position: relative;
}
.bb-carousel-track {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
    transition: transform 520ms cubic-bezier(0.16, 0.84, 0.32, 1);
    will-change: transform;
}
.bb-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 0.25rem 0.5rem;
    opacity: 0.35;
    transition: opacity 420ms ease;
}
.bb-carousel-slide.is-active { opacity: 1; }

.bb-carousel-slide .bb-testimonial {
    margin: 0;
    background: #ffffff;
    border: 0.0625rem solid var(--border);
    border-radius: 1rem;
    padding: 2.25rem 2.25rem 1.875rem;
    box-shadow: 0 0.5rem 2rem rgba(12, 17, 26, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 18rem;
    transition: box-shadow 420ms ease, border-color 420ms ease;
}
.bb-carousel-slide.is-active .bb-testimonial {
    box-shadow: 0 1.25rem 3rem rgba(12, 17, 26, 0.08);
    border-color: rgba(201, 162, 39, 0.2);
}
.bb-carousel-slide .bb-testimonial blockquote {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text);
    flex: 1;
}
.bb-carousel-slide .bb-testimonial-mark {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--gold);
    flex-shrink: 0;
}
.bb-carousel-slide .bb-testimonial figcaption {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-top: 1rem;
    border-top: 0.0625rem solid var(--border);
}

/* Icon-style avatar for the testimonials without a real photo. */
.bb-avatar-icon {
    background: linear-gradient(135deg, var(--slate) 0%, #2a3447 100%) !important;
    color: var(--gold) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 0.125rem rgba(201, 162, 39, 0.25), 0 0.25rem 0.75rem rgba(12, 17, 26, 0.15) !important;
}
.bb-avatar-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

/* Prev / next arrows - circular, gold accent on hover. */
.bb-carousel-nav {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #ffffff;
    border: 0.0625rem solid var(--border);
    color: var(--slate);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0.5rem 1.5rem rgba(12, 17, 26, 0.06);
    transition: color 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.16, 0.84, 0.32, 1), box-shadow 220ms ease;
    flex-shrink: 0;
}
.bb-carousel-nav svg { width: 1.125rem; height: 1.125rem; }
.bb-carousel-nav:hover,
.bb-carousel-nav:focus-visible {
    color: var(--gold-dk);
    border-color: var(--gold);
    box-shadow: 0 0.75rem 2rem rgba(12, 17, 26, 0.1);
    outline: none;
    transform: translateY(-0.0625rem);
}
.bb-carousel-nav:active { transform: translateY(0); }

/* Pagination dots - thin pills, filled gold for the active one. */
.bb-carousel-dots {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.bb-carousel-dot {
    width: 1.5rem;
    height: 0.25rem;
    border-radius: 62.4375rem;
    background: rgba(12, 17, 26, 0.12);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 200ms ease, width 300ms cubic-bezier(0.16, 0.84, 0.32, 1);
}
.bb-carousel-dot:hover { background: rgba(12, 17, 26, 0.24); }
.bb-carousel-dot.is-active {
    background: var(--gold);
    width: 2.25rem;
}
.bb-carousel-dot:focus-visible {
    outline: 0.125rem solid var(--gold);
    outline-offset: 0.25rem;
}

@media (max-width: 48em) {
    .bb-carousel { grid-template-columns: 1fr; gap: 0.75rem; }
    .bb-carousel-nav { grid-row: 2; justify-self: start; }
    .bb-carousel-next { justify-self: end; grid-row: 2; grid-column: 1; }
    .bb-carousel-viewport { grid-row: 1; grid-column: 1; }
    .bb-carousel-dots { grid-row: 3; margin-top: 1rem; }
    .bb-carousel-slide .bb-testimonial { padding: 1.75rem 1.25rem 1.5rem; min-height: 0; }
    .bb-carousel-slide .bb-testimonial blockquote { font-size: 0.9375rem; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
    .bb-carousel-track { transition: none; }
    .bb-carousel-slide { opacity: 1; }
}

/* "Read more customer stories" - small, confident row under the single
   hero testimonial. Gold underline grows on hover, same motion vocab
   as the nav link hover. */
.bb-testimonials-more {
    text-align: center;
    margin-top: 2.25rem;
}
.bb-testimonials-more-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--slate);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    padding-bottom: 0.1875rem;
    border-bottom: 0.125rem solid transparent;
    transition: color 180ms ease, border-color 180ms ease, transform 180ms cubic-bezier(0.16, 0.84, 0.32, 1);
}
.bb-testimonials-more-cta:hover,
.bb-testimonials-more-cta:focus-visible {
    color: var(--gold-dk);
    border-bottom-color: var(--gold);
    transform: translateX(0.1875rem);
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   LH HERO - exact port of the editorial "parcel dataset" hero from
   the prior iteration. Single-column headline-first layout with a
   slate map background, live-indicator eyebrow, four-stat ticker,
   and a subordinate live-preview card pinned to the bottom-right.
   ═══════════════════════════════════════════════════════════════════ */
.lh {
    position: relative;
    padding-top: 4rem;                         /* reserve nav height for content */
    min-height: min(100vh, 56rem);
    background: var(--slate);
    overflow: hidden;
}
/* Map fills the entire hero, including the area under the fixed nav -
   so the nav's translucent slate sits on top of the map/overlay and
   visually blends, rather than sitting above a solid strip. */
.lh-map-bg { position: absolute; inset: 0; }
.lh-map-bg #hero-map {
    width: 100%;
    height: 100%;
    background: #2a3447; /* pre-tile fallback while MapLibre loads */
}
/* MapLibre's canvas inherits the container background; no filter
   so the basemap reads as it does in the backup, with only the
   .lh-overlay gradient providing the dark wash. */
.lh-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(15, 19, 28, 0.97) 0%,
            rgba(18, 23, 33, 0.94) 38%,
            rgba(20, 26, 38, 0.78) 66%,
            rgba(20, 26, 38, 0.46) 86%,
            transparent 100%),
        radial-gradient(ellipse 60rem 36rem at 22% 32%, rgba(212, 175, 55, 0.10), transparent 70%);
    z-index: 2;
    pointer-events: none;
}
.lh-i {
    position: relative;
    z-index: 3;
    max-width: 86rem;
    margin: 0 auto;
    padding: 8rem 2.5rem 6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.lh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6875rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold-soft);
    margin-bottom: 2rem;
    padding: 0.4375rem 0.9375rem;
    background: rgba(212, 175, 55, 0.05);
    border: 0.0625rem solid rgba(212, 175, 55, 0.22);
    border-radius: 2rem;
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
}
.lh-eyebrow-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0.1875rem rgba(212, 175, 55, 0.22);
    flex-shrink: 0;
}
.lh-text { max-width: 60rem; }
.lh h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4.6vw, 5rem);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 0 0 1.5rem 0;
    text-shadow: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.46);
}
.lh h1 .gold-accent {
    color: var(--gold-soft);
    font-style: italic;
    font-weight: 800;
}
.lh-s {
    font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.62;
    margin: 0 0 2.75rem 0;
    font-weight: 400;
    max-width: 50rem;
    text-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.4);
}
.lh-s strong { color: #fff; font-weight: 600; }
.lh-a {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}
.lh-a .bb-btn { font-size: 0.9375rem; padding: 0.875rem 1.625rem; }
.lh-a .bb-btn-primary {
    box-shadow: 0 0.625rem 1.875rem rgba(181, 148, 42, 0.32);
    font-weight: 700;
}
.lh-a .bb-btn-primary:hover {
    box-shadow: 0 1rem 2.5rem rgba(181, 148, 42, 0.42);
    transform: translateY(-0.0625rem);
}
.lh-a .btn-on-dark {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
}
.lh-a .btn-on-dark:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(212, 175, 55, 0.6) !important;
    color: #fff !important;
    transform: translateY(-0.0625rem);
}
.lh-a .btn-on-dark:active { transform: translateY(0); }
.lh-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    transition: color 0.2s ease;
}
.lh-cta-secondary a {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 0.0625rem solid rgba(212, 175, 55, 0.5);
    /* Bigger hit target on touch devices without changing desktop
       visuals - padding-top/bottom expands the bounding box to 44px
       minimum on mobile, inline-block so it respects line flow. */
    display: inline-block;
    padding: 0.625rem 0 0.125rem;
    min-height: 2.75rem;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.lh-cta-secondary a:hover {
    color: var(--gold-soft);
    border-bottom-color: var(--gold-soft);
}

.lh-ticker-wrap {
    width: 100%;
    max-width: 70rem;
    padding-top: 2.5rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.12);
}
.lh-ticker-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.46);
    margin-bottom: 1.5rem;
}
.lh-ticker-meta-dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0.1875rem rgba(74, 222, 128, 0.18);
    flex-shrink: 0;
}
.lh-ticker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem 3rem;
}
.lh-ticker-item { display: flex; flex-direction: column; gap: 0.5rem; }
.lh-ticker-num {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 3.4vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    line-height: 0.92;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.02em;
}
.lh-ticker-num .accent { color: var(--gold-soft); font-weight: 700; }
.lh-ticker-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   HERO "LIVE PREVIEW" CARD
   Exact visual clone of the real map parcel popup (see explorer.js
   buildPopupHtml + style.css .popup-*). Every selector below is scoped
   to .lh-card so nothing on the landing page can leak into other
   contexts. Values are hardcoded (not via CSS vars that aren't loaded
   on the landing page) so the rendering is deterministic.
   ═══════════════════════════════════════════════════════════════════ */
.lh-card {
    position: absolute;
    z-index: 3;
    right: 2.5rem;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 22rem;
    max-width: calc(100vw - 2rem);
    background: #fffdf8;
    border: 0.0625rem solid #d5cfc5;
    border-radius: 0.375rem;
    padding: 0.75rem 0.875rem;
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.18),
                0 1.5rem 3.75rem rgba(0, 0, 0, 0.28);
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #2c2c2c;
}
.lh-card::before {
    content: 'LIVE PREVIEW';
    position: absolute;
    top: -0.5rem;
    right: 0.875rem;
    background: #d4af37;
    color: #1c2331;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.1875rem;
    letter-spacing: 0.14em;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.2);
}

/* Title - Playfair, bold, with hairline under it */
.lh-card .popup-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.2;
    color: #1c2331;
    margin: 0 0 0.25rem;
    padding-bottom: 0.1875rem;
    border-bottom: 0.0625rem solid #ebe6dd;
}

/* Row - flex split, tight padding so 15+ rows fit on one screen */
.lh-card .popup-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.0625rem 0;
    min-height: 1.15rem;
}

.lh-card .popup-label {
    color: #6b655c;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    line-height: 1.35;
}

.lh-card .popup-value {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-weight: 500;
    color: #2c2c2c;
    font-size: 0.6563rem;
    text-align: right;
    word-break: break-word;
    line-height: 1.35;
}

/* Factors sub-row - appears right under the lead score */
.lh-card .popup-factors {
    font-size: 0.625rem;
    color: #706b63;
    margin-top: 0.125rem;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.35;
}

/* Hairline group separators */
.lh-card .popup-divider {
    height: 0.0625rem;
    background: #ebe6dd;
    margin: 0.15rem 0;
}

/* Badges - same shell the app-side popup uses */
.lh-card .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
.lh-card .badge-lg {
    height: 1.5rem;
    min-height: 1.5rem;
    font-size: 0.75rem;
    padding: 0 0.625rem;
}
.lh-card .badge-xs {
    height: 0.875rem;
    min-height: 0.875rem;
    font-size: 0.5625rem;
    padding: 0 0.3125rem;
    letter-spacing: 0.02em;
}
.lh-card .badge-gold {
    background: #faefcd;
    color: #8a6f1f;
    border: 0.0625rem solid rgba(212, 175, 55, 0.45);
}
.lh-card .badge-warning {
    background: #fff3e0;
    /* Darkened from #c75300 (4.10:1, fails AA) to #a84500 (4.85:1
       on #fff3e0 background, passes WCAG AA for small text). */
    color: #a84500;
    border: 0.0625rem solid rgba(245, 124, 0, 0.2);
}
.lh-card .badge-neutral {
    background: #f4f1ec;
    color: #6b655c;
    border: 0.0625rem solid #ebe6dd;
}
.lh-card .badge-outline {
    background: transparent;
    color: #4a453e;
    border: 0.0625rem solid #d5cfc5;
}

/* Lead-score tier text next to the gold badge */
.lh-card .popup-row-tier {
    font-size: 0.6875rem;
    color: #706b63;
    text-transform: capitalize;
    font-family: 'Source Sans 3', system-ui, sans-serif;
}

/* Action row + CTA - matches components.css .popup-actions */
.lh-card .popup-actions {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 0.0625rem solid #ebe6dd;
    display: flex;
    gap: 0.5rem;
}
.lh-card .popup-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2rem;
    background: #d4af37;
    color: #1c2331;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    border: 0.0625rem solid transparent;
    transition: opacity 0.15s ease;
}
.lh-card .popup-action-btn:hover { opacity: 0.88; }

.lh-rail {
    position: absolute;
    bottom: 1.75rem;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 86rem;
    margin: 0 auto;
    padding: 0 2.5rem;
    pointer-events: none;
}
.lh-rail > * { pointer-events: auto; }
.lh-map-hint {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(20, 26, 38, 0.84);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    padding: 0.5rem 1.0625rem;
    border-radius: 2rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 0.0625rem solid rgba(212, 175, 55, 0.22);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.lh-map-hint::before {
    content: '';
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--gold);
}
.lh-scroll {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.52);
    text-decoration: none;
    transition: color 0.2s ease;
}
.lh-scroll:hover { color: var(--gold-soft); }
.lh-scroll-line {
    position: relative;
    width: 0.0625rem;
    height: 1.875rem;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}
.lh-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5rem;
    background: linear-gradient(transparent, var(--cream));
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 64em) {
    .lh-i { padding: 4.25rem 1.75rem 5rem; }
    .lh-card { display: none; }
    .lh-rail { padding: 0 1.75rem; }
}
@media (max-width: 48em) {
    .lh-ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Pull the hero copy up on phones - 5rem of top padding put the
       "Indiana only · all 92 counties · nightly refresh" badge well
       below the fold on a mid-size viewport. 2.75rem keeps clearance
       under the top nav while letting the badge breathe near the top
       of the section. */
    .lh-i { padding: 2.75rem 1.25rem 4.5rem; }
    /* Center the eyebrow badge on phones so it reads as a centered
       label across the section instead of clinging to the left edge.
       The headline and body copy stay left-aligned for readability.
       The big margin-bottom is intentional: pushes the "Find leads
       before your competitors know they exist." headline (and every
       block below it) substantially down the section so the eyebrow
       sits clean near the top with real breathing room before the
       headline begins. clamp() scales the gap with viewport height
       so a small Android phone gets ~3rem and a larger device ~5.5rem. */
    .lh-eyebrow {
        align-self: center;
        margin-bottom: clamp(3rem, 7vh, 5.5rem);
        text-align: center;
    }
    .lh-map-hint { display: none; }
}

/* Every direct child of .bb-nav-links - mega wraps, Pricing, Sign in,
   and the Start-free-trial CTA - must be CLICKABLE. Defensive
   pointer-events declaration so nothing silently blocks clicks. */
.bb-nav-links > * { pointer-events: auto; }
.bb-mega { pointer-events: none; }
.bb-nav-mega-wrap.is-open .bb-mega,
.bb-nav-mega-wrap.is-open .bb-mega * { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════════
   LN NAV - exact port of the backup's fixed translucent nav with
   brand logomark, three mega dropdowns, and a gold "Start trial"
   pill. Single container, blurred slate background, gold accents.
   ═══════════════════════════════════════════════════════════════════ */
.ln {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 3000;
    background: rgba(20, 26, 38, 0.92);
    backdrop-filter: blur(0.875rem) saturate(1.4);
    -webkit-backdrop-filter: blur(0.875rem) saturate(1.4);
    /* Hairline divider as a box-shadow so it doesn't add to the
       nav's box height - `#site-header`'s min-height matches `.ln`'s
       4rem core exactly, and a 1px border-bottom on `.ln` was pushing
       its rendered height to 65px and leaving 1px of content beneath
       the nav line. */
    box-shadow: 0 0.0625rem 0 rgba(212, 175, 55, 0.08);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}
.ln.is-scrolled {
    background: rgba(20, 26, 38, 0.97);
    /* Compose the hairline divider on top of the scroll-elevation shadow
       so the gold rule under the nav stays visible while scrolled. */
    box-shadow:
        0 0.0625rem 0 rgba(212, 175, 55, 0.08),
        0 0.625rem 2.5rem rgba(0, 0, 0, 0.32);
}
.ln-i {
    max-width: 86rem;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}
.ln-b {
    display: inline-flex;
    align-items: center;
    gap: 0.6875rem;
    color: var(--gold-soft);
    text-decoration: none;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}
.ln-b:hover { opacity: 0.82; }
/* The bluebelmont-secondary logo ships with a black stroke + white
   fill - designed for light backgrounds. We invert it on the dark
   nav so the outline is white and reads crisply. */
.ln-b-logo {
    height: 2.5rem;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}
.ln-b-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(181, 148, 42, 0.06) 100%);
    border: 0.0625rem solid rgba(212, 175, 55, 0.32);
    color: var(--gold-soft);
    box-shadow: 0 0.0625rem 0 rgba(255, 255, 255, 0.06) inset;
}
.ln-b-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    gap: 0.0625rem;
}
.ln-b-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: #fff;
    letter-spacing: 0.005em;
}
.ln-b-region {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(212, 175, 55, 0.85);
}

.ln-l {
    display: flex;
    gap: 1.625rem;
    align-items: center;
}
.ln-l a {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    position: relative;
}
.ln-l a:hover { color: #fff; }
.ln-l a::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -0.5rem;
    height: 0.0625rem;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.ln-l a:hover::after { transform: scaleX(1); }
.ln-l a.ln-c {
    background: var(--gold);
    color: var(--slate) !important;
    padding: 0.5rem 1.125rem;
    border-radius: 0.625rem;
    font-weight: 700;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ln-l a.ln-c::after { display: none; }
.ln-l a.ln-c:hover { background: var(--gold-soft); }
.ln-l a.ln-c:active { transform: translateY(0); }
.ln-l a.ln-signin {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.ln-h {
    display: none;
    flex-direction: column;
    gap: 0.3125rem;
    cursor: pointer;
    padding: 0.625rem;
    background: none;
    border: none;
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    align-items: center;
}
.ln-h span {
    display: block;
    width: 1.25rem;
    height: 0.125rem;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 0.0625rem;
    transition: all 0.3s ease;
}
.ln-h.open span:nth-child(1) { transform: rotate(45deg) translate(0.3125rem, 0.3125rem); }
.ln-h.open span:nth-child(2) { opacity: 0; }
.ln-h.open span:nth-child(3) { transform: rotate(-45deg) translate(0.3125rem, -0.3125rem); }

/* Mega triggers + panels - click-sticky on hover ambiguous contexts. */
.ln-mega { position: relative; }
.ln-mega-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}
.ln-mega-trigger:hover,
.ln-mega.is-open .ln-mega-trigger,
.ln-mega-trigger[aria-expanded="true"] { color: #fff; }
.ln-mega-trigger::after {
    content: '';
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-right: 0.0625rem solid currentColor;
    border-bottom: 0.0625rem solid currentColor;
    transform: rotate(45deg) translateY(-0.0625rem);
    transition: transform 0.2s ease;
    margin-left: 0.125rem;
}
.ln-mega.is-open .ln-mega-trigger::after,
.ln-mega-trigger[aria-expanded="true"]::after {
    transform: rotate(-135deg) translateY(0);
}

.ln-mega-panel {
    position: absolute;
    top: calc(100% + 1rem);
    left: 50%;
    transform: translateX(-50%) translateY(-0.375rem);
    min-width: 18rem;
    max-width: 22rem;
    background: rgba(20, 26, 38, 0.97);
    backdrop-filter: blur(0.625rem) saturate(1.2);
    -webkit-backdrop-filter: blur(0.625rem) saturate(1.2);
    border: 0.0625rem solid rgba(212, 175, 55, 0.22);
    border-radius: 0.875rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.42);
    padding: 1.125rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.25s ease;
    z-index: 100;
}
.ln-mega.is-open .ln-mega-panel {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.ln-mega-panel-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold-soft);
    margin-bottom: 0.6875rem;
    padding-bottom: 0.6875rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
}
.ln-mega-panel a {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.625rem;
    margin: 0 -0.625rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.ln-mega-panel a::after { display: none; }
.ln-mega-panel a:hover {
    background: rgba(212, 175, 55, 0.06);
    color: #fff;
}
.ln-mega-panel a strong {
    display: block;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0.0625rem;
}
.ln-mega-panel a span {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}
.ln-mega-panel-foot {
    margin-top: 0.6875rem;
    padding-top: 0.6875rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.08);
}
.ln-mega-panel-foot a {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold-soft);
    padding: 0.5rem 0.625rem;
}
.ln-mega-panel-foot a:hover { color: var(--gold-soft); }

/* Mobile: hamburger shows, links stack */
@media (max-width: 64em) {
    .ln-h { display: flex; }
    .ln-l {
        display: none;
        position: fixed;
        top: 4rem;
        left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        padding: 1rem 1.5rem 2rem;
        background: rgba(20, 26, 38, 0.98);
        backdrop-filter: blur(0.875rem);
        -webkit-backdrop-filter: blur(0.875rem);
        border-bottom: 0.0625rem solid rgba(212, 175, 55, 0.2);
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
    }
    .ln-l.is-open { display: flex; }
    .ln-l a { padding: 0.75rem 0; font-size: 1rem; }
    .ln-l a::after { display: none; }
    .ln-mega { width: 100%; }
    .ln-mega-trigger { width: 100%; padding: 0.75rem 0; font-size: 1rem; justify-content: space-between; }
    .ln-mega-panel {
        position: static;
        transform: none;
        min-width: 0;
        max-width: none;
        background: rgba(255, 255, 255, 0.03);
        border: 0;
        border-radius: 0.5rem;
        padding: 0.75rem;
        margin: 0.5rem 0 1rem;
        box-shadow: none;
        display: none;
    }
    .ln-mega.is-open .ln-mega-panel { display: block; transform: none; }
}

/* Hero `.lh` has its own padding-top: 4rem to account for the fixed
   nav - we do NOT put body padding, so the hero's slate extends all
   the way up behind the translucent nav for a continuous background. */

/* ═══════════════════════════════════════════════════════════════════
   NS NEWSLETTER - exact port from the backup. Slate gradient band
   with a faint gold radial glow, centered editorial layout, thin
   gold rule flanking the eyebrow, and a 3-chip trust row with
   inline gold bullets.
   ═══════════════════════════════════════════════════════════════════ */
.ns {
    background: linear-gradient(180deg, var(--slate) 0%, #131923 100%);
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
}
.ns::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50rem 30rem at 50% 40%, rgba(212, 175, 55, 0.1), transparent 60%);
    pointer-events: none;
}
.ns-i {
    position: relative;
    max-width: 72rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
    text-align: left;
}
@media (max-width: 56em) {
    .ns-i { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
}
.ns-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gold-soft);
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}
.ns-eyebrow::before,
.ns-eyebrow::after {
    content: '';
    width: 1.75rem;
    height: 0.0625rem;
    background: var(--gold-soft);
}
.ns h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 1.125rem 0;
}
.ns h2 em { font-style: italic; color: var(--gold-soft); font-weight: 800; }
.ns p {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.65;
    margin: 0 auto 2.25rem;
    max-width: 38rem;
}
.ns-form {
    display: flex;
    gap: 0.625rem;
    max-width: 32rem;
    margin: 0 auto 1.25rem;
    align-items: center;
    justify-content: center;
}
.ns-form input[type="email"] {
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    padding: 0.875rem 1.125rem;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.06);
    border: 0.0625rem solid rgba(255, 255, 255, 0.18);
    color: #fff;
    outline: none;
    transition: all 0.2s ease;
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
}
.ns-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.38); }
.ns-form input[type="email"]:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--gold);
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.18);
}
.ns-form button {
    font-size: 0.9375rem;
    padding: 0.875rem 1.625rem;
    font-weight: 700;
    flex-shrink: 0;
}
/* Newsletter CTA - invert the base slate-on-gold to gold-on-slate so
   it reads against the dark slate gradient behind it. */
.ns-form .bb-btn-primary,
.ns-form .bb-btn-primary:visited {
    background: var(--gold);
    color: var(--slate);
    border-color: var(--gold);
}
.ns-form .bb-btn-primary:hover,
.ns-form .bb-btn-primary:focus-visible {
    background: var(--gold-soft);
    color: var(--slate);
    border-color: var(--gold-soft);
    box-shadow: 0 0.5rem 1.5rem rgba(212, 175, 55, 0.28);
    transform: translateY(-0.0625rem);
}
.ns-form .bb-btn-primary:active { transform: translateY(0); }
.ns-status {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    min-height: 1.125rem;
}
.ns-status.is-success { color: #6ee7a8; }
.ns-status.is-error { color: #ff8585; }
.ns-consent {
    margin: 0.75rem auto 0;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.5;
    max-width: 28rem;
}
.ns-consent a {
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
}
.ns-trust {
    margin-top: 2.5rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.ns-trust span { display: inline-flex; align-items: center; gap: 0.4375rem; }
.ns-trust span::before {
    content: '';
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--gold-soft);
}

@media (max-width: 48em) {
    .ns { padding: 4.5rem 1.5rem; }
    .ns-form { flex-direction: column; }
    .ns-form input[type="email"] { width: 100%; }
    .ns-form button { width: 100%; }
    .ns-trust { flex-direction: column; gap: 0.75rem; }
}

/* Ultra-wide desktop tier (> 80em) - constrain content so it does
   not stretch into illegible 1600px+ line lengths on ultrawide monitors. */
@media (max-width: 80em) {
    .bb-section-i, .bb-nav-i, .bb-hero-i, .bb-foot-i { max-width: 80rem; }
}