.boAudiencePage {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: clip !important;
}

/* Ensure landing hero background is always present and points to the nested project's image
   This rule is intentionally global (outside the desktop media block) so the WM.png
   asset at BecomingOne/wwwroot/Images/WM.png is applied in all viewports. */
#homeLandingHero .homeLandingBg{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:calc(var(--nav-height,88px)) !important;
    bottom:0 !important;
    background-image: url('/Images/WM.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    pointer-events: none !important;
    z-index:0 !important;
}

/* Offer section component styles (shared, variant-aware) */
/* noop: context anchor for subsequent patch insertions */
.boOfferSection{padding:48px 0;position:relative}
.boOfferInner{width:min(1100px,92vw);margin:0 auto;padding:18px 0}
.boOfferHeader{text-align:center;margin-bottom:22px}
.boOfferTitle{font-family:Playfair Display, Georgia, serif;font-size:clamp(1.6rem,3vw,2.6rem);margin:0;color:var(--ivory)}
.boOfferSubtitle{font-weight:600;color:var(--ivory);margin:6px 0 0}
.boOfferNote{color:rgba(255,249,239,.82);margin-top:8px}
.boOfferRows{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.boOfferRow{position:relative;display:grid;grid-template-columns:120px 1fr 180px;gap:24px;align-items:center;width:min(1100px,92vw);margin:0 auto 12px;padding:22px 26px;border-radius:20px;border:1px solid rgba(255,215,140,.18);background:linear-gradient(135deg,rgba(10,18,38,.82),rgba(24,10,28,.78));backdrop-filter:blur(10px);box-shadow:0 0 30px rgba(0,0,0,.12),inset 0 0 18px rgba(255,255,255,.02)}
.boOfferIcon{width:86px;height:86px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.04);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);color:var(--offer-accent)}

/* ENERGY ORB: base styles (replace pictorial icons with layered gradients + pseudo elements) */
.bo-energy-orb{
    --orb-color: 61, 226, 224; /* fallback turquoise */
    --orb-size-desktop: 86px;
    --orb-size-mobile: 74px;

    position: relative;
    width: var(--orb-size-desktop);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: inline-block;
    margin-inline: auto;
    transform: translateZ(0);
    pointer-events: none; /* base orb does not intercept pointer; wrapper handles events */

    background:
        radial-gradient(circle at 42% 36%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.9) 4%, rgba(var(--orb-color),1) 14%, rgba(var(--orb-color),0.72) 30%, rgba(var(--orb-color),0.22) 56%, transparent 72%);

    box-shadow:
        0 0 6px rgba(255,255,255,0.9),
        0 0 16px rgba(var(--orb-color),0.9),
        0 0 36px rgba(var(--orb-color),0.55),
        0 0 70px rgba(var(--orb-color),0.18);

    filter: saturate(1.05) contrast(1.02);
    transition: box-shadow 360ms ease, filter 360ms ease;
    animation: boOrbBreathe 4500ms ease-in-out infinite;
}

.bo-energy-orb::before{
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 1px solid rgba(var(--orb-color),0.12);
    box-shadow: 0 0 18px rgba(var(--orb-color),0.16), inset 0 0 14px rgba(var(--orb-color),0.08);
    opacity: .6;
    transition: opacity 360ms ease, transform 360ms ease;
    animation: boOrbHalo 6000ms ease-in-out infinite;
    pointer-events: none;
}

.bo-energy-orb::after{
    content: "";
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    background: rgba(255,255,255,0.65);
    filter: blur(8px);
    box-shadow: 0 0 18px rgba(255,255,255,0.65), 0 0 30px rgba(var(--orb-color),0.8);
    pointer-events: none;
}

@keyframes boOrbBreathe{
    0%,100%{ transform: scale(.98); filter: brightness(.94); }
    50%{ transform: scale(1.03); filter: brightness(1.08); }
}

@keyframes boOrbHalo{
    0%,100%{ transform: scale(.96); opacity:.42 }
    50%{ transform: scale(1.08); opacity:.82 }
}

/* Per-card color tokens (women) */
.bo-orb-1{ --orb-color: 61, 226, 224; } /* turquoise/cyan */
.bo-orb-2{ --orb-color: 255, 86, 190; } /* rose pink */
.bo-orb-3{ --orb-color: 177, 113, 255; } /* violet */
.bo-orb-4{ --orb-color: 255, 201, 105; } /* warm gold */
.bo-orb-5{ --orb-color: 236, 121, 199; --orb-color-2: 61,226,224; } /* pink/turquoise blend */

/* Men variant overrides (keep same class names; colors will be set on per-section context) */
.boOfferSection--men .bo-orb-1{ --orb-color: 38, 210, 207; } /* electric turquoise */
.boOfferSection--men .bo-orb-2{ --orb-color: 38, 110, 255; } /* deep celestial blue */
.boOfferSection--men .bo-orb-3{ --orb-color: 177, 113, 255; } /* violet */
.boOfferSection--men .bo-orb-4{ --orb-color: 255, 201, 105; } /* warm gold */
.boOfferSection--men .bo-orb-5{ --orb-color: 46,182,224; } /* blue-turquoise blend */

/* Blend orb (card 5) overlay to create two-tone effect */
.bo-orb-5{
    background:
        radial-gradient(circle at 46% 42%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.9) 4%, rgba(var(--orb-color),1) 12%, rgba(var(--orb-color),0.7) 28%, rgba(236,121,199,0.22) 54%, transparent 72%),
        radial-gradient(circle at 64% 38%, rgba(236,121,199,0.16) 0%, rgba(236,121,199,0.06) 30%, transparent 60%);
}

/* mobile sizing */
@media (max-width:767px){
    .bo-energy-orb{ width: var(--orb-size-mobile); }
    .bo-energy-orb::before{ inset: -12px; }
    .bo-energy-orb::after{ inset: 18%; filter: blur(6px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .bo-energy-orb, .bo-energy-orb::before, .bo-energy-orb::after{ animation: none !important; transition: none !important; }
}
.boOfferCopy h3{margin:0;font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:.01em}
.boOfferCopy p{margin:6px 0 0;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.45;color:rgba(255,249,239,.92)}
.boOfferPrice{text-align:right;font-weight:800;font-size:clamp(2rem,3vw,3rem);color:var(--ivory)}

/* Reusable gold style for investment heading, hero price, and item prices */
.boGoldValue{
    color: #f6d77a !important;
    background: linear-gradient(105deg,
        #9f6b18 0%,
        #d9a83e 18%,
        #fff1ad 35%,
        #fffbe0 45%,
        #e9bc55 55%,
        #fff3b0 68%,
        #b77b20 84%,
        #f4cf68 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 6px rgba(255,222,120,.25), 0 0 14px rgba(255,190,55,.18);
    animation: boGoldShimmer 5s ease-in-out infinite;
}

.boGoldValue--label{
    /* FULL TRANSFORMATION — adjusted to fit on one mobile line while remaining bold */
    font-size: clamp(1.35rem, 5.2vw, 2.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: .025em !important;
    white-space: nowrap !important;
}
.boGoldValue--heroPrice{
    /* $1,777 — largest, bold, strong glow */
    font-size: clamp(3rem, 11vw, 4.5rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
    /* stronger glow than item prices */
    filter: drop-shadow(0 0 8px rgba(255,215,100,.40)) drop-shadow(0 0 20px rgba(255,180,45,.22));
}
.boGoldValue--itemPrice{ font-size: clamp(2rem,5vw,3rem); font-weight:700; }

@keyframes boGoldShimmer{ 0%{ background-position:100% 50%; } 50%{ background-position:0% 50%; } 100%{ background-position:100% 50%; } }

@media (prefers-reduced-motion: reduce){ .boGoldValue{ animation:none !important; background-size:100% 100% !important; } }
.boOfferTotals{display:grid;grid-template-columns:1fr 8px 1fr;gap:18px;align-items:center;margin:22px auto;padding:18px 0;width:min(1100px,92vw)}
.boOfferTotals__left,.boOfferTotals__right{text-align:center}
.boOfferTotals__label{font-size:1rem;color:rgba(255,249,239,.78);letter-spacing:.08em;font-weight:700}
.boOfferTotals__value{font-size:clamp(1.6rem,3.5vw,2.8rem);font-weight:900;color:var(--ivory);margin-top:6px}

/* Shimmering premium gold treatment for the investment label+price (right column)
   Only apply to the YOUR 3-MONTH INVESTMENT label and its value on the right side. */
.boOfferTotals__right .boOfferTotals__label,
.boOfferTotals__right .boOfferTotals__value{
    /* fallback color */
    color: #f6d77a !important;

    /* metallic gold gradient clipped to text */
    background: linear-gradient(105deg,
        #9f6b18 0%,
        #d9a83e 18%,
        #fff1ad 35%,
        #fffbe0 45%,
        #e9bc55 55%,
        #fff3b0 68%,
        #b77b20 84%,
        #f4cf68 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 0 6px rgba(255, 222, 120, .22),
        0 0 14px rgba(255, 190, 55, .12);

    animation: boGoldShimmer 5s ease-in-out infinite;
}

/* Slightly stronger glow for the actual price value */
.boOfferTotals__right .boOfferTotals__value{
    filter: drop-shadow(0 0 5px rgba(255,215,100,.30)) drop-shadow(0 0 12px rgba(255,180,45,.18));
}

@keyframes boGoldShimmer{
    0%{ background-position: 100% 50%; }
    50%{ background-position: 0% 50%; }
    100%{ background-position: 100% 50%; }
}

/* Respect reduced motion: keep static gold but remove movement */
@media (prefers-reduced-motion: reduce){
    .boOfferTotals__right .boOfferTotals__label,
    .boOfferTotals__right .boOfferTotals__value{
        animation: none !important;
        background-size: 100% 100% !important;
    }
}
.boOfferTotals__divider{width:100%;height:2px;background:linear-gradient(to right,transparent,rgba(255,220,150,.85),transparent);opacity:.7}
.boOfferBenefits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.boOfferBenefit{background:rgba(255,255,255,.02);padding:12px;border-radius:12px;text-align:center;font-weight:700;color:var(--ivory)}
.boOfferCta{text-align:center;margin-top:20px}

/* Responsive adjustments */
@media(max-width:767px){
    .boOfferRow{display:flex;flex-direction:column;grid-template-columns:unset;padding:22px 18px;width:calc(100% - 32px);text-align:center}
    .boOfferIcon{width:86px;height:86px;margin:0 auto}
    .boOfferPrice{text-align:center;border-left:none;border-top:1px solid rgba(255,255,255,.04);width:100%;padding-top:18px;margin-top:6px;font-size:clamp(1.8rem,8vw,2.5rem)}
    .boOfferCopy p{font-size:clamp(1rem,4.5vw,1.15rem);line-height:1.6}
    .boOfferCopy h3{font-size:clamp(1.25rem,5.5vw,1.6rem)}
    .boOfferTotals{grid-template-columns:1fr;gap:10px;padding:12px}
    .boOfferBenefits{grid-template-columns:repeat(2,1fr)}

    /* Mobile: force the outer offer section and inner wrapper to center and
       avoid any rightward drift caused by vw/translate offsets. These
       overrides intentionally use !important to ensure they win over any
       earlier layout helpers affecting audience pages. */
    .boOfferSection{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;

        overflow-x: clip !important;
    }

    .boOfferInner{
        width: min(calc(100% - 32px), 720px) !important;
        max-width: 720px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;

        text-align: center !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Ensure each card centers and has equal left/right spacing */
    .boOfferRow{
        width: 100% !important;
        max-width: 650px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }

    .boOfferCopy,
    .boOfferPrice,
    .boOfferIcon{
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    /* Totals stack and center on mobile */
    .boOfferTotals{
        grid-template-columns:1fr !important;
        gap:10px !important;
        padding:12px !important;
        width:100% !important;
        max-width:650px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        text-align:center !important;
    }

    .boOfferTotals__left, .boOfferTotals__right{ text-align:center !important; }

    .boOfferTotals__divider{
        width: calc(100% - 32px) !important;
        max-width: 640px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Benefit icons: centered 2x2 grid */
    .boOfferBenefits{
        grid-template-columns:repeat(2,1fr) !important;
        gap:12px !important;
        width:100% !important;
        max-width:650px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .boOfferBenefit{ text-align:center !important; }

    /* CTA stays centered */
    .boOfferCta{ text-align:center !important; }

    /* Mobile: ensure the CTA button is centered and never clipped on small viewports.
       Use the real project selector (.b1OfferButton) and its wrapper (.boOfferCta).
       Do not change visual appearance beyond sizing/centering. */
    .boOfferCta{
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .boOfferCta .b1OfferButton{
        display: inline-flex !important;
        width: min(90vw, 600px) !important;
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        min-width: 0 !important;
    }

    /* Reduce excessive vertical gaps on mobile for audience hero and method sections.
       Fixes large empty background areas that push following sections down. */
    /* Make the hero immersive (nearly full viewport) while still allowing
       the inner content to avoid the fixed header. Use svh for mobile-safe
       viewport height when available. */
    .b1WomenHero,
    .b1MenHero {
        /* Mobile-safe hero sizing: reserve the viewport while subtracting
           the site header height which is in normal document flow. Use svh
           for mobile browser chrome safety and fall back to vh when needed. */
        min-height: calc(100svh - var(--nav-height,72px)) !important;
        min-height: calc(100vh - var(--nav-height,72px)) !important;
        height: calc(100dvh - var(--nav-height,72px)) !important; /* Desktop-like full viewport under header for supporting browsers */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* do not hide overflow on the page-level hero wrapper to avoid
           clipping subsequent sections or interfering with normal flow */
        overflow: visible !important;
        /* ensure cinematic background behavior if the view does not set it */
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

    /* Desktop: prefer per-hero composition adjustments only (do not force
       viewport-height with absolute/important rules that remove flow). */
    @media (min-width: 1024px) {
        /* Desktop: make the audience heroes fill the visible viewport below the header */
        .b1WomenHero { background-position: right center !important; }
        .b1MenHero { background-position: center center !important; }

        .b1WomenHero,
        .b1MenHero,
        #homeLandingHero {
            /* use desktop dVh to respect browser UI changes on mobile separately */
            min-height: calc(100dvh - var(--nav-height,88px)) !important;
            height: calc(100dvh - var(--nav-height,88px)) !important;
            box-sizing: border-box !important;
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            overflow: hidden !important;
        }

/* Landing page background layer used by Root.cshtml */
/* Landing background: ensure WM.png is applied with strong specificity so later shorthands don't remove it */
#homeLandingHero .homeLandingBg{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:calc(var(--nav-height,88px)) !important;
    bottom:0 !important;
    background-image: url('/Images/WM.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    pointer-events: none !important;
    z-index:0 !important;
}
    }

    /* Reduce large view-scoped hero content padding injected inline in views */
    .b1WomenHero__content,
    .b1MenHero__content,
    .inner-hero .inner-hero-content,
    .audience-page .page-shell.inner-hero-content {
        padding-top: clamp(14px, 3.5vw, 28px) !important;
        padding-bottom: clamp(14px, 3.5vw, 28px) !important;
        margin-bottom: 0 !important;
    }

    /* Ensure footer appears and is not hidden by root-mode on audience pages */
    body.audience-page .site-footer { display: block !important; }

    /* Reduce large bottom gap before footer across audience pages */
    /* Keep normal document flow on audience pages so footer follows content (avoid forcing flex layout) */
    body.audience-page { display: block !important; }
    body.audience-page main.site-main { padding-bottom: 8px !important; }

    /* Reduce footer inner padding slightly only on audience pages to tighten spacing */
    body.audience-page .site-footer { padding: 2rem 1.5rem !important; }

    /* Ensure program-offer sections don't add bottom whitespace */
    body.audience-page .program-offer { margin-bottom: 0 !important; padding-bottom: 4px !important; }

    /* Tighten final CTA spacing specifically so button sits close to footer */
    body.audience-page section.inner-hero.program-offer,
    body.audience-page .inner-hero.program-offer {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.audience-page .inner-hero.program-offer > .page-shell.inner-hero-content {
        padding-top: 0 !important;
        padding-bottom: 6px !important;
        margin-bottom: 0 !important;
    }

    body.audience-page .inner-hero.program-offer .b1OfferWrap,
    body.audience-page .inner-hero.program-offer .page-shell.inner-hero-content {
        margin-bottom: 0 !important;
    }

    body.audience-page .btn-luminous,
    body.audience-page .b1OfferButton {
        margin-bottom: 0 !important;
    }

    /* Ensure the program-offer section itself does not add excessive top spacing */
    .program-offer,
    .program-offer .page-shell,
    section.program-offer {
        margin-top: 0 !important;
        padding-top: clamp(12px, 3vw, 28px) !important;
    }

    /* Miracle Making Model: reduce gap before the section and make it content-driven */
    #making-miracles-model,
    #making-miracles-model.section,
    #making-miracles-model > .page-shell.inner-hero-content.method-content {
        min-height: 0 !important;
        height: auto !important;
        padding-top: clamp(16px, 4vw, 32px) !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
    }

    /* Reduce any large bottom padding on the section preceding the model */
    .method-intro,
    .method-section {
        margin-bottom: 0 !important;
        padding-bottom: clamp(12px, 3vw, 28px) !important;
    }

    /* Specific: collapse excessive space inside portal-content sections (the
       comparison area that contains "CHOOSE WHAT COMES NEXT" and the lower
       comparison headline). This ensures the lower message moves up closer to
       the button on mobile without changing background imagery. */
    .inner-hero.portal-content-section,
    .inner-hero.inner-hero-comparison.portal-content-section,
    .inner-hero.inner-hero-comparison {
        min-height: 0 !important;
        height: auto !important;
        padding-top: clamp(14px, 3.5vw, 28px) !important;
        padding-bottom: clamp(14px, 3.5vw, 28px) !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Ensure the inner content container for these portal sections does not
       force large vertical spacing (many views inject large padding). */
    .inner-hero.portal-content-section > .page-shell.inner-hero-content,
    .inner-hero.inner-hero-comparison > .page-shell.inner-hero-content,
    .inner-hero.portal-content-section .page-shell.inner-hero-content {
        padding-top: clamp(12px, 3vw, 24px) !important;
        padding-bottom: clamp(12px, 3vw, 24px) !important;
        margin-bottom: 0 !important;
    }

    /* Ensure first heading/content in image-driven hero sections is not
       overlapped by the fixed header on mobile. Increase inner content
       top padding so the heading begins clearly below the sticky nav. */
    .b1WomenHero__content,
    .b1MenHero__content,
    .inner-hero .inner-hero-content,
    .audience-page .page-shell.inner-hero-content {
        padding-top: clamp(14px, 3.5vw, 28px) !important;
        box-sizing: border-box !important;
    }

/* DESKTOP: (removed full-viewport override here) */

    /* Extra guard: if any portal-content-section or inner-hero is using
       flex distribution with space-between, force flex-start and a modest gap
       so upper and lower items don't stretch apart across a tall container. */
    .inner-hero.portal-content-section,
    .inner-hero.inner-hero-comparison {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: clamp(12px, 4vw, 32px) !important;
    }

    /* Ensure the comparison-grid itself doesn't add excessive top margin on mobile */
    .inner-hero-comparison .comparison-grid,
    .comparison-grid { margin-top: 0 !important; padding-top: 0 !important; }

    /* If any child panels use large min-heights, collapse them on mobile */
    .cmp-panel, .cmp-left, .cmp-right { min-height: 0 !important; height: auto !important; }

    /* Strict mobile centering overrides: keep outer/inner wrappers and key
       grids mathematically centered to remove residual rightward drift. */
    .boOfferSection{
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .boOfferInner{
        width: min(calc(100% - 32px), 720px) !important;
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .boOfferTotals,
    .boOfferBenefits,
    .boOfferCta{
        width: 100% !important;
        max-width: 650px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .boOfferCta .b1OfferButton{
        width: min(100%, 600px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }
}

/* Page variants */
.boOfferSection--women{--offer-accent:#ff7bc8;--offer-accent-2:#d65cff;--offer-accent-3:#36e0d0;--gold:#f5d28b}
.boOfferSection--men{--offer-accent:#39a8ff;--offer-accent-2:#19d7d0;--offer-accent-3:#7d5cff;--gold:#f5d28b}
.boOfferSection--women .boOfferRow{border-color:rgba(255,183,200,.12);box-shadow:0 0 30px rgba(255,110,180,.04),inset 0 0 20px rgba(255,255,255,.02)}
.boOfferSection--men .boOfferRow{border-color:rgba(100,170,255,.12);box-shadow:0 0 30px rgba(40,130,255,.04),inset 0 0 20px rgba(255,255,255,.02)}
.boOfferSection--women .boOfferIcon{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,120,200,.02));border:1px solid rgba(255,120,200,.08)}
.boOfferSection--men .boOfferIcon{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(40,150,255,.02));border:1px solid rgba(40,150,255,.08)}
.boOfferSection--women .boOfferPrice{color:var(--gold)}
.boOfferSection--men .boOfferPrice{color:var(--gold)}

/* Pillar title luminous glow (match Miracle Making Model family but color-coded per pillar)
   Applies only to pillar H3 titles inside .mmm-pillar. Uses existing --pillar-rgb
   variables defined on each .mmm-pillar--N class. Keeps glyphs white-hot with
   colored aura produced via text-shadow. Respects reduced-motion and restrains
   glow on small screens. */
.mmm-pillar h3{
    color: #fff8ff;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

    text-shadow:
        0 0 4px rgba(255,255,255,0.95),
        0 0 10px rgba(var(--pillar-rgb),0.95),
        0 0 22px rgba(var(--pillar-rgb),0.70),
        0 0 38px rgba(var(--pillar-rgb),0.45);

    animation: pillarTitleGlow 3.8s ease-in-out infinite;
}

@keyframes pillarTitleGlow{
    0%,100%{
        text-shadow:
            0 0 4px rgba(255,255,255,0.9),
            0 0 10px rgba(var(--pillar-rgb),0.75),
            0 0 20px rgba(var(--pillar-rgb),0.45);
    }
    50%{
        text-shadow:
            0 0 5px rgba(255,255,255,1),
            0 0 14px rgba(var(--pillar-rgb),1),
            0 0 30px rgba(var(--pillar-rgb),0.70),
            0 0 48px rgba(var(--pillar-rgb),0.40);
    }
}

@media (max-width:600px){
    .mmm-pillar h3{
        text-shadow:
            0 0 3px rgba(255,255,255,0.92),
            0 0 8px rgba(var(--pillar-rgb),0.88),
            0 0 18px rgba(var(--pillar-rgb),0.62),
            0 0 30px rgba(var(--pillar-rgb),0.36);
    }
}

@media (prefers-reduced-motion: reduce){
    .mmm-pillar h3{ animation: none !important; }
}

/* Miracle Making Model heading adjustments.
   Keep desktop styling and glow intact. Allow wrapping and force a two-line
   heading on mobile (<=600px) using a simple two-line markup structure.
   This preserves animations and font-family while preventing overflow. */
#making-miracles-model h2 .miracle-making-brand{
    display: inline !important;
    line-height: 1 !important;
    /* keep the earlier size boost but allow wrapping */
    font-size: calc(100% + 1rem) !important;
    white-space: normal !important;
}

/* Remove helper rules for the temporary duplicate heading structure; instead
   directly style the existing glowing .miracle-making-brand H2 on mobile so
   the heading can wrap naturally and fit without overflow. */
@media (max-width: 600px){
    #making-miracles-model h2{
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: clamp(1.9rem, 7.5vw, 2.45rem) !important;
        line-height: 1.06 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
    /* Ensure the branded span inherits the mobile sizing and can wrap */
    #making-miracles-model h2 .miracle-making-brand{
        font-size: inherit !important;
        white-space: normal !important;
    }
    /* Keep 'Miracle Maker' inline if used in intro (no overflow). Use the
       existing branded class instead when possible; this helper exists as
       a fallback but is not required when .miracle-making-brand is applied. */
    .miracle-maker-highlight{ display:inline-block; white-space:nowrap; }
}

.boAudiencePage > section {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    float: none !important;

    transform: none !important;
}

/* Improve headline readability with a soft cinematic aura and stronger shadowing
   Applied only within audience pages so backgrounds remain visible and colors preserved. */
/* White-hot core inside gradient letters (per-page color variants below) */
.boAudiencePage .glow-gold {
    position: relative;
    isolation: isolate;
    z-index: 2;

    /* Layered backgrounds clipped to the glyphs:
       1) thin white-hot core (top layer) centered vertically
       2) underlying colored gradient (preserve existing look)
    */
    background-image:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 25%,
            rgba(255,255,255,.35) 38%,
            rgba(255,255,255,.98) 48%,
            #ffffff 50%,
            rgba(255,255,255,.98) 52%,
            rgba(255,255,255,.35) 62%,
            rgba(255,255,255,0) 75%
        ),
        linear-gradient(90deg, #ffd37a, #ffc6f0, #7ef0de);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* Make white core narrow and centered: white layer is first, sized to a thin band */
    background-size: 100% 14%, 100% 100%;
    background-position: center center, left center;
    background-repeat: no-repeat, no-repeat;

    /* Subtle white bloom and preserve colored glow */
    text-shadow: 0 2px 3px rgba(0,0,0,.85),
                 0 0 6px rgba(255,255,255,.22),
                 0 6px 24px rgba(255,214,135,.20);
    -webkit-text-stroke: .18px rgba(255,255,255,.06); /* ultra-subtle edge to keep crisp */

    /* animate the white core very subtly (slow breathe) */
    animation: b1CoreBreathe 5.2s ease-in-out infinite;
}

@keyframes b1CoreBreathe {
    0% { background-position: center 48%, left center; }
    50% { background-position: center 52%, left center; }
    100% { background-position: center 48%, left center; }
}

/* Subhead / comparison heading readability */
.boAudiencePage .cmp-heading,
.boAudiencePage .cmp-sub {
    color: #fff; /* keep off-white */
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,.95),
                 0 4px 12px rgba(0,0,0,.85),
                 0 0 20px rgba(0,0,0,.55);
    -webkit-text-stroke: .25px rgba(5,3,15,.18);
}

/* Very subtle local backdrop if needed (keeps background visible) */
.boAudiencePage .glow-gold-backdrop {
    background: rgba(7, 4, 18, .06);
    backdrop-filter: blur(2px);
}

/* Per-page color overrides: keep white core but replace underlying colored gradient */
.boAudiencePage--women .glow-gold {
    background-image:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 25%,
            rgba(255,255,255,.35) 38%,
            rgba(255,255,255,.98) 48%,
            #ffffff 50%,
            rgba(255,255,255,.98) 52%,
            rgba(255,255,255,.35) 62%,
            rgba(255,255,255,0) 75%
        ),
        linear-gradient(90deg, #ffd37a, #ff78c4, #7ef0de);
}

.boAudiencePage--men .glow-gold {
    background-image:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 25%,
            rgba(255,255,255,.35) 38%,
            rgba(255,255,255,.98) 48%,
            #ffffff 50%,
            rgba(255,255,255,.98) 52%,
            rgba(255,255,255,.35) 62%,
            rgba(255,255,255,0) 75%
        ),
        linear-gradient(90deg, #67c8ff, #8a5cff, #15e0d0);
}

/* Responsive fix: ensure Miracle Making Model pillars are single-column on mobile/tablet
   and each pillar uses the full phone width while preserving desktop animations/colors. */
@media (max-width: 1024px) {
    /* Prefer one column up through tablet to keep readability */
    .method-steps {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        width: 100% !important;
        align-items: stretch !important;
    }
}

@media (max-width: 767px) {
    /* Mobile: single-column pillars, centered and nearly full-width */
    .method-steps,
    .audience-page .method-steps {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        width: 100% !important;
        align-items: stretch !important;
        padding: 0 0 24px !important;
    }

    .method-steps > .mmm-pillar {
        width: min(92vw, 560px) !important;
        max-width: 560px !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        flex: none !important;
        grid-column: auto !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        height: auto !important;
        min-height: unset !important;
        padding: 32px 22px !important;
        box-sizing: border-box !important;
    }

    /* Ensure content area is wide and centered */
    .mmm-pillar__content {
        max-width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
    }

    /* Pillar label fits on one line */
    .mmm-pillar__number {
        font-size: clamp(.85rem, 4vw, 1rem) !important;
        letter-spacing: .12em !important;
        white-space: nowrap !important;
        margin-bottom: 10px !important;
    }

    /* Pillar title sizing and wrapping */
    .mmm-pillar h3 {
        font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
        line-height: 1.1 !important;
        max-width: 100% !important;
        text-align: center !important;
        hyphens: none !important;
    }

    /* Description readability */
    .mmm-pillar p {
        font-size: clamp(1rem, 4.5vw, 1.15rem) !important;
        line-height: 1.6 !important;
        max-width: 46ch !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    /* Neutralize horizontal layout positioning but preserve animations on energy layer */
    .mmm-pillar,
    .method-steps .mmm-pillar {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Keep energy visuals but disable pointer interaction on mobile */
    .mmm-pillar__energy { pointer-events: none !important; }

    /* Prevent horizontal overflow from residual rules */
    .boAudiencePage { overflow-x: clip !important; }
}

/* Fix rightward offset for the Miracle Making Model section on mobile */
@media (max-width: 767px) {
    /* Ensure the section uses true viewport width and no unwanted 100vw tricks */
    #making-miracles-model {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: clip !important;
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }

    /* Center the inner page-shell that contains the intro + pillars */
    #making-miracles-model > .page-shell.inner-hero-content.method-content,
    #making-miracles-model .page-shell.inner-hero-content.method-content {
        width: min(calc(100% - 32px), 720px) !important;
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Center the intro text block */
    #making-miracles-model .method-intro {
        width: 100% !important;
        max-width: 680px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Center the pillar container and ensure it fills the centered column */
    #making-miracles-model .method-steps {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 28px !important;
        box-sizing: border-box !important;
    }

    /* Each pillar centered and equal left/right spacing */
    #making-miracles-model .method-steps > .mmm-pillar {
        width: 100% !important;
        max-width: 650px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Override any global 100vw centering trick on .section that may leak in */
    #making-miracles-model.section,
    #making-miracles-model .section {
        width: 100% !important;
        left: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}