/**
 * BSMC Home v3 — "Members App Landing" redesign
 *
 * A field-driven marketing landing template. Order of sections is
 * fixed in page-home3.php; per-page copy comes from the Home v3 meta
 * box.
 *
 * Design tokens live at :root. Section BG contrast is intentional —
 * dark hero → light band → light "what" → dark testimonials → light
 * chooser → dark app → light screens → dark benefits → light products
 * → dark closing CTA / footer. Every section reads as a distinct
 * beat.
 *
 * All tickers use a shared .bsmc-h3-track keyframe animation. The
 * template part duplicates its slot markup once inline so the loop
 * appears seamless — no JS clone needed.
 */

/* ─── Font override — RECLAIM from parent theme ────────────────────
 * The BuddyBoss child's own inline stylesheet (functions.php ~L2244)
 * fires `html body p, html body span, html body a, html body div,
 * html body li { font-family: 'Montserrat' !important; }` sitewide,
 * which clobbers our body font AND every <span> we use inside a
 * Bebas headline. Same-specificity + !important reclaims it inside
 * the home3 body scope only; no leak to other pages.
 * Bebas Neue is Google-only weight 400 — forcing weight:400 keeps the
 * browser from substituting the body font when parent CSS sets weight:700.
 */
body.bsmc-home3-body,
html body.bsmc-home3-body p,
html body.bsmc-home3-body a,
html body.bsmc-home3-body div,
html body.bsmc-home3-body li,
html body.bsmc-home3-body ul,
html body.bsmc-home3-body input,
html body.bsmc-home3-body label,
html body.bsmc-home3-body select,
html body.bsmc-home3-body textarea {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
html body.bsmc-home3-body h1,
html body.bsmc-home3-body h2,
html body.bsmc-home3-body h3,
html body.bsmc-home3-body h4,
html body.bsmc-home3-body h5,
html body.bsmc-home3-body h6,
html body.bsmc-home3-body .bsmc-h3-h1,
html body.bsmc-home3-body .bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-h3,
html body.bsmc-home3-body .bsmc-h3-h4,
html body.bsmc-home3-body .bsmc-h3-h1 span,
html body.bsmc-home3-body .bsmc-h3-h2 span,
html body.bsmc-home3-body .bsmc-h3-h3 span,
html body.bsmc-home3-body .bsmc-h3-h4 span,
html body.bsmc-home3-body .bsmc-h3-band__headline,
html body.bsmc-home3-body .bsmc-h3-cta__headline,
html body.bsmc-home3-body .bsmc-h3-cta__headline span,
html body.bsmc-home3-body .bsmc-h3-hero__stat-top,
html body.bsmc-home3-body .bsmc-h3-what__stat-val,
html body.bsmc-home3-body .bsmc-h3-tier__price,
html body.bsmc-home3-body .bsmc-h3-tier__price-lg,
html body.bsmc-home3-body .bsmc-h3-tier__badge,
html body.bsmc-home3-body .bsmc-h3-app__tile h4,
html body.bsmc-home3-body .bsmc-h3-btn,
html body.bsmc-home3-body .bsmc-h3-header__cta,
html body.bsmc-home3-body .bsmc-h3-header__brand,
html body.bsmc-home3-body .bsmc-h3-footer__col h4,
html body.bsmc-home3-body .bsmc-h3-products__name,
html body.bsmc-home3-body .bsmc-h3-products__tag,
html body.bsmc-home3-body .bsmc-h3-tier__badge,
html body.bsmc-home3-body .bsmc-mhome__brand,
html body.bsmc-home3-body .bsmc-mhome__nav-link {
    font-family: 'Bebas Neue', Impact, 'Oswald', sans-serif !important;
    font-weight: 400 !important;
    color: #edeadf !important;
    -webkit-text-fill-color: #edeadf !important;
}
html body.bsmc-home3-body .bsmc-mhome__brand:hover,
html body.bsmc-home3-body .bsmc-mhome__nav-link:hover {
    color: #C8A96E !important;
    -webkit-text-fill-color: #C8A96E !important;
}
html body.bsmc-home3-body .bsmc-mhome__nav-sep {
    color: rgba(237, 234, 223, 0.4) !important;
    -webkit-text-fill-color: rgba(237, 234, 223, 0.4) !important;
}
/* Sticky header on home3 — parent home-public.css doesn't stick.
   Enforce here so the black bar rides along with scroll. */
html body.bsmc-home3-body .bsmc-mhome__header {
    position: sticky !important;
    top: 0;
    z-index: 40;
}
/* Reclaim underline on links but NOT color — every element that
   needs a specific color re-declares it below. Forcing `color:
   inherit` here made shared header/footer anchors (.bsmc-mhome__brand,
   .bsmc-mhome__nav-link) render black-on-black. */
html body.bsmc-home3-body a { text-decoration: none !important; }
/* Small span-color reset: Montserrat rule cascades to spans and
   would leave leftover color; keep accent spans in accent color. */
html body.bsmc-home3-body .bsmc-h3-accent { color: var(--h3-accent) !important; }

/* Section H2 color reset — parent theme may color <h2> gold via
   BuddyBoss "heading color" customizer settings. Light sections need
   ink black; dark sections need paper white. */
html body.bsmc-home3-body .bsmc-h3-what .bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-chooser .bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-screens .bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-products .bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-tier .bsmc-h3-h3,
html body.bsmc-home3-body .bsmc-h3-band__headline { color: var(--h3-ink) !important; }
html body.bsmc-home3-body .bsmc-h3-hero .bsmc-h3-h1,
html body.bsmc-home3-body .bsmc-h3-testimonials .bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-app .bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-benefits .bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-cta__headline,
html body.bsmc-home3-body .bsmc-h3-benefits .bsmc-h3-h4 { color: var(--h3-paper) !important; }
/* Accent overrides win over the base color reset for the accent span. */
html body.bsmc-home3-body .bsmc-h3-h1 .bsmc-h3-accent,
html body.bsmc-home3-body .bsmc-h3-h2 .bsmc-h3-accent,
html body.bsmc-home3-body .bsmc-h3-cta__headline .bsmc-h3-accent,
html body.bsmc-home3-body .bsmc-h3-kicker { color: var(--h3-accent) !important; }

:root {
    --h3-accent: #A18A55;
    --h3-accent-hover: #B89A5F;
    --h3-paper: #FFFFFF;
    --h3-paper-muted: #F7F5F0;
    --h3-ink: #0F0E0C;
    --h3-ink-2: #16150F;
    --h3-body: #3B3931;
    --h3-body-muted: #55524B;
    --h3-caption: #8A8375;
    --h3-line: rgba(15, 14, 12, 0.14);
    --h3-line-dark: rgba(255, 255, 255, 0.14);
    --h3-speed: 60s;
    --h3-max: 1240px;
}

/* Namespace body wrapper — set in page-home3.php so nothing leaks
   into parent-theme templates. */
body.bsmc-home3-body {
    margin: 0;
    padding: 0;
    background: var(--h3-paper);
    color: var(--h3-ink);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.bsmc-home3-body * { box-sizing: border-box; }
/* Only cap the max-width — do NOT set height: auto, or it beats
   home-public.css's `.bsmc-mhome__logo { height: 64px }` on specificity
   (body.bsmc-home3-body img = 0,1,2 vs the class = 0,1,0) and the
   header logo blows up to its intrinsic ~600px height. */
body.bsmc-home3-body img { max-width: 100%; display: block; }
body.bsmc-home3-body a { color: inherit; text-decoration: none; }

/* Container helper */
.bsmc-h3-container { max-width: var(--h3-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

/* Typography primitives */
.bsmc-h3-kicker {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--h3-accent);
}
.bsmc-h3-h1, .bsmc-h3-h2, .bsmc-h3-h3, .bsmc-h3-h4 {
    font-family: 'Bebas Neue', 'Oswald', sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 0.98;
    margin: 0;
}
.bsmc-h3-h1 { font-size: clamp(48px, 6vw, 86px); }
.bsmc-h3-h2 { font-size: clamp(36px, 4.6vw, 60px); }
.bsmc-h3-h3 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1; }
.bsmc-h3-h4 { font-size: 22px; letter-spacing: 0.04em; }
.bsmc-h3-accent { color: var(--h3-accent); }
.bsmc-h3-lede { font-size: 17px; line-height: 1.6; color: var(--h3-body-muted); }

/* Ticker — used by strip, testimonials, screens */
@keyframes bsmc-h3-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.bsmc-h3-track {
    display: flex;
    width: max-content;
    animation: bsmc-h3-marquee var(--h3-speed) linear infinite;
    will-change: transform;
}
.bsmc-h3-track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .bsmc-h3-track { animation: none; transform: none; }
}

/* ─── Header ───────────────────────────────────────────────────── */
.bsmc-h3-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--h3-ink);
    color: var(--h3-paper);
    border-bottom: 1px solid var(--h3-line-dark);
}
.bsmc-h3-header__inner {
    max-width: var(--h3-max);
    margin: 0 auto;
    padding: 14px clamp(20px, 4vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.bsmc-h3-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 0.08em;
}
.bsmc-h3-header__brand img { width: 40px; height: 40px; object-fit: contain; }
.bsmc-h3-header__nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
}
.bsmc-h3-header__nav a { opacity: 0.85; transition: opacity 0.15s; }
.bsmc-h3-header__nav a:hover { opacity: 1; }
.bsmc-h3-header__cta {
    background: var(--h3-paper);
    color: var(--h3-ink);
    padding: 10px 18px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background 0.15s, color 0.15s;
}
.bsmc-h3-header__cta:hover { background: var(--h3-accent); color: var(--h3-ink); }
@media (max-width: 720px) {
    .bsmc-h3-header__nav a:not(.bsmc-h3-header__cta) { display: none; }
}

/* ─── Hero ─────────────────────────────────────────────────────── */
.bsmc-h3-hero {
    position: relative;
    background: var(--h3-ink);
    color: var(--h3-paper);
    overflow: hidden;
}
.bsmc-h3-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.bsmc-h3-hero__media video,
.bsmc-h3-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Cloudflare Stream iframe branch — no object-fit on iframes; size and
 * translate so the video fills the container. */
.bsmc-h3-hero__media iframe {
    position: absolute;
    top: 50%; left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.78%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}
.bsmc-h3-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, rgba(15, 14, 12, 0.9) 0%, rgba(15, 14, 12, 0.78) 45%, rgba(15, 14, 12, 0.35) 100%);
}
.bsmc-h3-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--h3-max);
    margin: 0 auto;
    padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 40px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.bsmc-h3-hero__body {
    max-width: 620px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--h3-paper);
    margin: 20px 0 32px;
}
.bsmc-h3-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}
.bsmc-h3-btn {
    display: inline-block;
    padding: 15px 28px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
}
/* Button variants — every `background`, `color`, `border` gets !important
 * to survive the parent theme's `html body a { color: ...; background: ... }`
 * cascade. */
.bsmc-h3-btn--primary {
    background: var(--h3-paper) !important;
    color: var(--h3-ink) !important;
}
.bsmc-h3-btn--primary:hover { background: var(--h3-accent) !important; color: var(--h3-ink) !important; }
.bsmc-h3-btn--ghost {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: var(--h3-paper) !important;
}
.bsmc-h3-btn--ghost:hover { border-color: var(--h3-paper) !important; }
.bsmc-h3-btn--dark {
    background: var(--h3-ink) !important;
    color: var(--h3-paper) !important;
}
.bsmc-h3-btn--dark:hover { background: var(--h3-accent) !important; color: var(--h3-ink) !important; }
.bsmc-h3-btn--outline {
    background: transparent !important;
    border-color: rgba(15, 14, 12, 0.3) !important;
    color: var(--h3-ink) !important;
}
.bsmc-h3-btn--outline:hover { border-color: var(--h3-ink) !important; }
/* Header CTA pill also needs an explicit color-reclaim. */
.bsmc-h3-header__cta { background: var(--h3-paper) !important; color: var(--h3-ink) !important; }
.bsmc-h3-header__cta:hover { background: var(--h3-accent) !important; color: var(--h3-ink) !important; }

/* Stat row: three inline stats sit under one horizontal rule spanning
 * the whole group. No boxes — matches the design. */
.bsmc-h3-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 4vw, 56px);
    max-width: 620px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.bsmc-h3-hero__stat {
    padding: 0;
    background: transparent;
    border: 0;
}
.bsmc-h3-hero__stat-top {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(18px, 2.2vw, 22px);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--h3-paper);
    margin: 0 0 6px;
}
.bsmc-h3-hero__stat-bot {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}
.bsmc-h3-hero__mockup {
    display: flex;
    justify-content: center;
    align-items: center;
}
.bsmc-h3-hero__mockup img {
    width: 100%;
    max-width: 460px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
}
@media (max-width: 900px) {
    /* Mobile hero: copy-first, phone below the fold as a scroll reveal.
     * The full value prop (kicker + headline + body + CTAs + stats) owns
     * the fold. Phone appears below as a natural second beat, tilted and
     * dropped-shadowed for presence, but never fighting the copy for
     * attention. Same pattern Apple / Spotify / Linear use on mobile. */
    .bsmc-h3-hero__inner {
        grid-template-columns: 1fr;
        text-align: left;
        padding: 24px clamp(20px, 4vw, 40px) 40px;
        gap: 32px;
    }
    .bsmc-h3-hero__copy   { order: 1; min-width: 0; }
    .bsmc-h3-hero__mockup {
        order: 2;
        margin: 0;
        padding: 0;
        justify-content: center;
    }
    /* body-prefixed for specificity (0,2,2) — beats the body img base
     * rule (0,1,2) that would otherwise clamp to 100% of the column. */
    body.bsmc-home3-body .bsmc-h3-hero__mockup img {
        max-width: 240px;
        width: 100%;
        transform: rotate(-6deg);
        filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    }
    .bsmc-h3-hero__body { margin: 14px 0 20px; font-size: 15px; line-height: 1.5; }
    .bsmc-h3-hero__ctas { margin-bottom: 24px; }
    .bsmc-h3-hero__stats { padding-top: 14px; gap: 20px; }
}
@media (max-width: 480px) {
    .bsmc-h3-hero__inner { padding: 20px 20px 32px; gap: 28px; }
    body.bsmc-home3-body .bsmc-h3-hero__mockup img { max-width: 200px; }
    .bsmc-h3-hero__body { margin: 12px 0 16px; font-size: 14px; }
    .bsmc-h3-hero__ctas { gap: 10px; margin-bottom: 18px; }
    .bsmc-h3-btn { padding: 12px 20px; font-size: 15px; }
}

/* ─── Download band + image strip ──────────────────────────────── */
/* Section specs from design source L85 — full-bleed white bg with a
 * bottom border rule that separates the copy row from the marquee. */
.bsmc-h3-band {
    background: var(--h3-paper);
    color: var(--h3-ink);
    border-bottom: 1px solid rgba(15, 14, 12, 0.12);
}
/* Copy row (headline LEFT, badges RIGHT). Padding matches L86: 24px
 * vertical, container padding horizontal. */
.bsmc-h3-band__row {
    max-width: var(--h3-max);
    margin: 0 auto;
    padding: 24px clamp(20px, 4vw, 40px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
/* Headline matches L87: Bebas, 22–30px, letter-spacing 0.06em. */
.bsmc-h3-band__headline {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.bsmc-h3-band__badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}
/* Both badges rendered at the same height (44px per design L89-90).
 * Their SVG viewBoxes (Apple 135×40, Google 180×53.333) are pill-tight
 * so matched `height` renders matched pills. */
.bsmc-h3-band__badge {
    display: inline-flex;
    align-items: center;
    height: 44px;
    line-height: 0;
}
.bsmc-h3-band__badge img {
    height: 100%;
    width: auto;
    display: block;
}

/* Strip specs from design L93-96: overflow-hidden container with a
 * top rule, items 220-360w × 150-240h, 4px margin-right per item,
 * NO gradient overlay. */
.bsmc-h3-strip {
    overflow: hidden;
    padding-bottom: 0;
}
.bsmc-h3-strip__track {
    --h3-speed: 60s;
    gap: 0;
    padding: 0;
}
.bsmc-h3-strip__item {
    position: relative;
    flex-shrink: 0;
    width: clamp(220px, 26vw, 360px);
    height: clamp(150px, 17vw, 240px);
    overflow: hidden;
    background: #F1F1F1;
    margin-right: 4px;
}
.bsmc-h3-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ─── What Membership Is ───────────────────────────────────────── */
/* Specs pulled 1:1 from the Figma export (section starting L104):
 *   Section padding    clamp(64px,8vw,110px) clamp(20px,4vw,40px)
 *   Grid gap           clamp(32px,5vw,72px)
 *   Right col          vertically centered (justify-content: center)
 *   Body p             font-size 18px, line-height 1.6, gap 18px
 *   Stats grid         minmax(160px,1fr), gap 32px, top-rule 16% ink
 *   Stat value         Bebas clamp(36px,4vw,52px)
 *   Stat label         11px, 0.16em, #8A8375
 */
.bsmc-h3-what {
    background: var(--h3-paper);
    color: var(--h3-ink);
    padding: clamp(64px, 8vw, 110px) 0;
}
.bsmc-h3-what__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(32px, 5vw, 72px);
    align-items: stretch;
    margin-bottom: clamp(48px, 6vw, 80px);
}
/* Right column matches the design's flex-column with center-justify so
   the two paragraphs sit visually against the headline block. */
.bsmc-h3-what__grid > .bsmc-h3-what__col:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}
.bsmc-h3-what__col p {
    margin: 0;
    color: var(--h3-body);
    font-size: 18px;
    line-height: 1.6;
    text-wrap: pretty;
}
.bsmc-h3-what__col p + p { color: var(--h3-body-muted); }
.bsmc-h3-what__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(15, 14, 12, 0.16);
}
.bsmc-h3-what__stat-val {
    margin: 0 0 6px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1;
}
.bsmc-h3-what__stat-lbl {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8A8375;
}

/* ─── Testimonials ─────────────────────────────────────────────── */
.bsmc-h3-testimonials {
    background: var(--h3-ink);
    color: var(--h3-paper);
    padding: clamp(56px, 7vw, 90px) 0;
}
.bsmc-h3-testimonials__intro {
    max-width: var(--h3-max);
    margin: 0 auto clamp(32px, 4vw, 48px);
    padding: 0 clamp(20px, 4vw, 40px);
}
.bsmc-h3-testimonials__scroller { overflow: hidden; }
.bsmc-h3-testimonials__track { --h3-speed: 75s; }
.bsmc-h3-testimonials__item {
    position: relative;
    width: clamp(240px, 24vw, 320px);
    height: clamp(320px, 32vw, 420px);
    flex-shrink: 0;
    overflow: hidden;
    background: var(--h3-ink-2);
    margin-right: 4px;
}
.bsmc-h3-testimonials__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
.bsmc-h3-testimonials__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 14, 12, 0.92) 0%, rgba(15, 14, 12, 0.6) 22%, transparent 45%);
}
.bsmc-h3-testimonials__quote-wrap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px;
}
.bsmc-h3-testimonials__quote {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--h3-paper);
}
.bsmc-h3-testimonials__rule {
    width: 28px; height: 2px;
    background: var(--h3-accent);
}

/* ─── Chooser (membership tiers) ───────────────────────────────── */
.bsmc-h3-chooser {
    background: var(--h3-paper);
    color: var(--h3-ink);
    padding: clamp(64px, 8vw, 110px) 0;
}
.bsmc-h3-chooser__intro {
    max-width: 620px;
    margin-bottom: clamp(36px, 4vw, 56px);
}
.bsmc-h3-chooser__intro p {
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--h3-body-muted);
}
.bsmc-h3-chooser__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}
.bsmc-h3-tier {
    background: var(--h3-paper);
    display: flex;
    flex-direction: column;
}
.bsmc-h3-tier--mobile    { border: 1px solid var(--h3-accent); }
.bsmc-h3-tier--clubhouse { border: 1px solid rgba(15, 14, 12, 0.16); }
.bsmc-h3-tier__badge {
    padding: 7px 16px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 0.16em;
    align-self: flex-start;
}
.bsmc-h3-tier--mobile    .bsmc-h3-tier__badge { background: var(--h3-accent); color: var(--h3-ink); }
.bsmc-h3-tier--clubhouse .bsmc-h3-tier__badge { background: rgba(15, 14, 12, 0.08); color: var(--h3-body-muted); }
.bsmc-h3-tier__body {
    padding: clamp(24px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.bsmc-h3-tier__title { margin: 0 0 12px; }
.bsmc-h3-tier__intro {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--h3-body-muted);
}
.bsmc-h3-tier__price-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 4px;
}
.bsmc-h3-tier__price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 6vw, 70px);
    line-height: 0.9;
}
.bsmc-h3-tier__price-lg {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1;
}
.bsmc-h3-tier__period {
    font-size: 14px;
    color: var(--h3-caption);
    padding-bottom: 8px;
}
.bsmc-h3-tier__price-note {
    margin: 0 0 28px;
    font-size: 15px;
    color: var(--h3-body-muted);
}
.bsmc-h3-tier__price-note strong { color: var(--h3-accent); font-weight: 600; }
.bsmc-h3-tier__features-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-bottom: 32px;
    flex: 1;
    border-top: 1px solid rgba(15, 14, 12, 0.12);
    padding-top: 24px;
}
.bsmc-h3-tier__features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.bsmc-h3-tier__features li {
    display: flex;
    gap: 12px;
    font-size: 15px;
    color: var(--h3-body);
}
.bsmc-h3-tier__features li::before {
    content: "";
    width: 5px; height: 5px;
    margin-top: 8px;
    flex-shrink: 0;
    background: var(--h3-accent);
}
.bsmc-h3-tier--clubhouse .bsmc-h3-tier__features li::before { background: var(--h3-ink); }
.bsmc-h3-tier__image {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    object-position: 50% 45%;
    display: block;
}
.bsmc-h3-tier__ctas {
    display: flex;
    gap: 12px;
}
.bsmc-h3-tier__ctas .bsmc-h3-btn { flex: 1; }

/* ─── App ──────────────────────────────────────────────────────── */
.bsmc-h3-app {
    background: var(--h3-ink);
    color: var(--h3-paper);
}
.bsmc-h3-app__inner {
    max-width: var(--h3-max);
    margin: 0 auto;
    padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 40px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.bsmc-h3-app__phone {
    display: flex;
    justify-content: center;
    order: 2;
}
.bsmc-h3-app__phone img {
    width: 100%;
    max-width: 460px;
    object-fit: contain;
}
.bsmc-h3-app__copy { order: 1; }
.bsmc-h3-app__body {
    margin: 20px 0 36px;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--h3-paper);
}
.bsmc-h3-app__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.bsmc-h3-app__tile {
    background: var(--h3-ink);
    padding: 22px;
}
.bsmc-h3-app__tile h4 {
    margin: 0 0 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--h3-accent);
}
.bsmc-h3-app__tile p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--h3-paper);
}

/* ─── Screens (iPhone-framed ticker) ───────────────────────────── */
.bsmc-h3-screens {
    background: var(--h3-paper);
    color: var(--h3-ink);
    padding: clamp(64px, 8vw, 100px) 0;
}
.bsmc-h3-screens__intro {
    max-width: var(--h3-max);
    margin: 0 auto clamp(32px, 4vw, 48px);
    padding: 0 clamp(20px, 4vw, 40px);
}
.bsmc-h3-screens__intro h2 { margin: 0 0 12px; }
/* Screens section only — flip the visual weight: kicker becomes the
 * hero-of-the-section, headline shrinks to a secondary subhead. */
.bsmc-h3-screens .bsmc-h3-screens__intro .bsmc-h3-kicker {
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: 0.14em;
    margin: 0 0 12px;
}
.bsmc-h3-screens .bsmc-h3-screens__intro h2.bsmc-h3-h2 {
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.2;
    letter-spacing: 0.02em;
}
.bsmc-h3-screens__intro p {
    margin: 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--h3-body-muted);
}
.bsmc-h3-screens__scroller { overflow: hidden; }
.bsmc-h3-screens__track {
    --h3-speed: 50s;
    gap: 24px;
    padding: 8px 12px 24px;
}
.bsmc-h3-screens__item {
    flex-shrink: 0;
    width: 210px;
}
.bsmc-h3-screens__frame {
    position: relative;
    background: #000;
    border-radius: 34px;
    padding: 9px;
    box-shadow: 0 0 0 2px #E5E5E5, 0 18px 40px rgba(15, 14, 12, 0.18);
}
.bsmc-h3-screens__frame::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: #000;
    border-radius: 999px;
    width: 84px;
    height: 22px;
}
.bsmc-h3-screens__screen {
    overflow: hidden;
    border-radius: 26px;
    aspect-ratio: 9 / 19.5;
    background: #000;
}
.bsmc-h3-screens__screen img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ─── Benefits (What you get) ──────────────────────────────────── */
.bsmc-h3-benefits {
    background: var(--h3-ink);
    color: var(--h3-paper);
}
.bsmc-h3-benefits__inner {
    max-width: var(--h3-max);
    margin: 0 auto;
    padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 40px);
}
.bsmc-h3-benefits__intro {
    max-width: 620px;
    margin-bottom: clamp(36px, 4vw, 56px);
}
.bsmc-h3-benefits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.bsmc-h3-benefit {
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: border-color 0.15s;
    background: transparent;
}
.bsmc-h3-benefit:hover { border-color: rgba(161, 138, 85, 0.6); }
.bsmc-h3-benefit__image-wrap {
    height: 200px;
    overflow: hidden;
    background: var(--h3-ink-2);
}
.bsmc-h3-benefit__image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.bsmc-h3-benefit__body { padding: 22px; }
.bsmc-h3-benefit__body h3 { margin: 0 0 8px; }
.bsmc-h3-benefit__body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--h3-paper);
}

/* ─── Products ─────────────────────────────────────────────────── */
.bsmc-h3-products {
    background: var(--h3-paper);
    color: var(--h3-ink);
    padding: clamp(64px, 8vw, 110px) 0;
}
.bsmc-h3-products__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(28px, 3vw, 40px);
}
.bsmc-h3-products__link {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--h3-accent);
    border-bottom: 1px solid var(--h3-accent);
    padding-bottom: 4px;
}
.bsmc-h3-products__link:hover { color: var(--h3-accent-hover); border-bottom-color: var(--h3-accent-hover); }

/* Render style for the bsmc_product_grid inside this section — the
   grid template outputs its own markup; we frame it in a proper CSS
   grid here so the tiles align to the new design. Products may use
   .bsmc-product-grid classes from other templates; scope everything
   under .bsmc-h3-products__grid so nothing leaks.*/
.bsmc-h3-products__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.bsmc-h3-products__grid a {
    border: 1px solid rgba(15, 14, 12, 0.14);
    background: var(--h3-paper);
    display: block;
    transition: border-color 0.15s;
}
.bsmc-h3-products__grid a:hover { border-color: var(--h3-accent); }
.bsmc-h3-products__grid .bsmc-h3-products__thumb {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #F1F1F1;
}
.bsmc-h3-products__grid .bsmc-h3-products__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.bsmc-h3-products__grid .bsmc-h3-products__tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--h3-accent);
    color: var(--h3-ink);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    padding: 4px 10px;
    text-transform: uppercase;
}
/* Same treatment for the tier badge chips (Recommended / Upgrade) so
   they render in Bebas + ink text on the accent chip, not beige body. */
html body.bsmc-home3-body .bsmc-h3-products__grid .bsmc-h3-products__tag,
html body.bsmc-home3-body .bsmc-h3-tier__badge {
    color: var(--h3-ink) !important;
    -webkit-text-fill-color: var(--h3-ink) !important;
    text-transform: uppercase !important;
}
/* Clubhouse badge sits on a muted bg — its label should be body-muted
   ink, not straight black-on-black. */
html body.bsmc-home3-body .bsmc-h3-tier--clubhouse .bsmc-h3-tier__badge {
    color: var(--h3-body-muted) !important;
    -webkit-text-fill-color: var(--h3-body-muted) !important;
}
.bsmc-h3-products__grid .bsmc-h3-products__meta { padding: 16px; }
.bsmc-h3-products__grid .bsmc-h3-products__name {
    margin: 0 0 6px;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.1;
    letter-spacing: 0.03em;
}
.bsmc-h3-products__grid .bsmc-h3-products__price {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--h3-accent);
}

/* ─── Closing CTA ──────────────────────────────────────────────── */
.bsmc-h3-cta {
    position: relative;
    background: var(--h3-ink);
    color: var(--h3-paper);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
/* Optional bg image + dark scrim. Only rendered when the admin has
   picked an image (or the bundled coffee.jpg is present). */
.bsmc-h3-cta__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.bsmc-h3-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.bsmc-h3-cta__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Lighter dark tint — image reads through more, text still legible
       thanks to the darker center of the radial and Bebas's heavy weight. */
    background:
        radial-gradient(ellipse at center, rgba(15, 14, 12, 0.60) 0%, rgba(15, 14, 12, 0.45) 55%, rgba(15, 14, 12, 0.30) 100%);
    backdrop-filter: saturate(110%);
}
.bsmc-h3-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(72px, 9vw, 130px) clamp(20px, 4vw, 40px);
}
.bsmc-h3-cta__icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 28px;
}
.bsmc-h3-cta__headline {
    margin: 0 0 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(38px, 5.6vw, 76px);
    line-height: 0.96;
}
.bsmc-h3-cta__body {
    margin: 0 auto 36px;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--h3-paper);
    text-wrap: pretty;
}
.bsmc-h3-cta__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
}
.bsmc-h3-cta__badges img { height: 50px; display: block; }
.bsmc-h3-cta__trial {
    margin: 20px 0 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--h3-accent);
}

/* ─── Footer ───────────────────────────────────────────────────── */
.bsmc-h3-footer {
    background: var(--h3-ink);
    color: var(--h3-paper);
    border-top: 1px solid var(--h3-line-dark);
}
.bsmc-h3-footer__inner {
    max-width: var(--h3-max);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 72px) clamp(20px, 4vw, 40px);
}
.bsmc-h3-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--h3-line-dark);
}
.bsmc-h3-footer__brand { grid-column: span 2; min-width: 0; }
.bsmc-h3-footer__brand img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-bottom: 20px;
}
.bsmc-h3-footer__brand p {
    margin: 0 0 14px;
    max-width: 320px;
    font-size: 15px;
    line-height: 1.6;
}
.bsmc-h3-footer__brand a { font-size: 15px; }
.bsmc-h3-footer__col h4 {
    margin: 0 0 16px;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0.16em;
    color: var(--h3-accent);
}
.bsmc-h3-footer__col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
}
.bsmc-h3-footer__col a { transition: color 0.15s; }
.bsmc-h3-footer__col a:hover { color: var(--h3-accent); }
.bsmc-h3-footer__bottom {
    padding-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    font-size: 13px;
}
.bsmc-h3-footer__bottom p { margin: 0; }
@media (max-width: 720px) {
    .bsmc-h3-footer__brand { grid-column: auto; }
}

/* ─── FINAL OVERRIDES ──────────────────────────────────────────────
 * These sit at the END of the file on purpose. Parent theme has a
 * `wp_footer` inline stylesheet at priority 9999 that overrides
 * button/link colors AND sets `-webkit-text-fill-color` (which beats
 * plain `color` in WebKit/Blink). Anything below uses:
 *   - Max specificity (tag + body class + double button class)
 *   - Long-form `background-color` in addition to shorthand
 *   - `-webkit-text-fill-color` so no cascade cliff hides text
 * Nothing outside this block should override these.
 */
html body.bsmc-home3-body a.bsmc-h3-btn.bsmc-h3-btn--primary,
html body.bsmc-home3-body a.bsmc-h3-header__cta {
    background: var(--h3-paper) !important;
    background-color: var(--h3-paper) !important;
    color: var(--h3-ink) !important;
    -webkit-text-fill-color: var(--h3-ink) !important;
    border: 1px solid var(--h3-paper) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
html body.bsmc-home3-body a.bsmc-h3-btn.bsmc-h3-btn--primary:hover,
html body.bsmc-home3-body a.bsmc-h3-header__cta:hover {
    background: var(--h3-accent) !important;
    background-color: var(--h3-accent) !important;
    color: var(--h3-ink) !important;
    -webkit-text-fill-color: var(--h3-ink) !important;
    border-color: var(--h3-accent) !important;
}
html body.bsmc-home3-body a.bsmc-h3-btn.bsmc-h3-btn--ghost {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--h3-paper) !important;
    -webkit-text-fill-color: var(--h3-paper) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    opacity: 1 !important;
}
html body.bsmc-home3-body a.bsmc-h3-btn.bsmc-h3-btn--ghost:hover {
    border-color: var(--h3-paper) !important;
}
html body.bsmc-home3-body a.bsmc-h3-btn.bsmc-h3-btn--dark {
    background: var(--h3-ink) !important;
    background-color: var(--h3-ink) !important;
    color: var(--h3-paper) !important;
    -webkit-text-fill-color: var(--h3-paper) !important;
    border: 1px solid var(--h3-ink) !important;
    opacity: 1 !important;
}
html body.bsmc-home3-body a.bsmc-h3-btn.bsmc-h3-btn--dark:hover {
    background: var(--h3-accent) !important;
    background-color: var(--h3-accent) !important;
    color: var(--h3-ink) !important;
    -webkit-text-fill-color: var(--h3-ink) !important;
    border-color: var(--h3-accent) !important;
}
html body.bsmc-home3-body a.bsmc-h3-btn.bsmc-h3-btn--outline {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--h3-ink) !important;
    -webkit-text-fill-color: var(--h3-ink) !important;
    border: 1px solid rgba(15,14,12,0.3) !important;
    opacity: 1 !important;
}
html body.bsmc-home3-body a.bsmc-h3-btn.bsmc-h3-btn--outline:hover {
    border-color: var(--h3-ink) !important;
}

/* Section heading colors — reinforce with -webkit-text-fill-color so
   any parent rule that sets text-fill for BuddyBoss headings can't
   pin the wrong color. */
/* Content headings on LIGHT sections — ink black.
   Parent BuddyBoss theme sets `h1..h6 { color: var(--bb-headings-color) }`
   in theme.min.css which paints every heading beige if I don't override. */
html body.bsmc-home3-body .bsmc-h3-what h2.bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-chooser h2.bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-screens h2.bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-products h2.bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-tier h3.bsmc-h3-h3,
html body.bsmc-home3-body h2.bsmc-h3-band__headline,
html body.bsmc-home3-body h4.bsmc-h3-products__name,
html body.bsmc-home3-body p.bsmc-h3-what__stat-val,
html body.bsmc-home3-body span.bsmc-h3-tier__price,
html body.bsmc-home3-body span.bsmc-h3-tier__price-lg {
    color: var(--h3-ink) !important;
    -webkit-text-fill-color: var(--h3-ink) !important;
}
/* Content headings on DARK sections — paper white (or accent for the
   6 app tile titles specifically). */
html body.bsmc-home3-body .bsmc-h3-hero h1.bsmc-h3-h1,
html body.bsmc-home3-body .bsmc-h3-testimonials h2.bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-app h2.bsmc-h3-h2,
html body.bsmc-home3-body .bsmc-h3-benefits h2.bsmc-h3-h2,
html body.bsmc-home3-body h2.bsmc-h3-cta__headline,
html body.bsmc-home3-body .bsmc-h3-benefits h3.bsmc-h3-h4,
html body.bsmc-home3-body .bsmc-h3-benefit__body h3 {
    color: var(--h3-paper) !important;
    -webkit-text-fill-color: var(--h3-paper) !important;
}
html body.bsmc-home3-body .bsmc-h3-app__tile h4,
html body.bsmc-home3-body .bsmc-h3-footer__col h4 {
    color: var(--h3-accent) !important;
    -webkit-text-fill-color: var(--h3-accent) !important;
}
/* Accent span wins over the parent heading color reset. */
html body.bsmc-home3-body h1.bsmc-h3-h1 span.bsmc-h3-accent,
html body.bsmc-home3-body h2.bsmc-h3-h2 span.bsmc-h3-accent,
html body.bsmc-home3-body h2.bsmc-h3-cta__headline span.bsmc-h3-accent,
html body.bsmc-home3-body p.bsmc-h3-kicker {
    color: var(--h3-accent) !important;
    -webkit-text-fill-color: var(--h3-accent) !important;
}