/*
 redesign.css — MCAA homepage redesign custom override layer.

 Lives in the gitignored microsite folder /MCAA/MicroSite/mcaahomepage/ (local
 staging only) and is deployed to the live site via FTP at
 /microsite/mcaahomepage/redesign.css. It is NOT committed to the repo.

 WHY: Site.Master concatenates pageStyles from rows 49872 (body) -> 49873
 (header) -> 49874 (footer); each block re-loads Bootstrap + style.compiled.css.
 This file is linked LAST in EVERY block (right after style.compiled.css), and
 the footer block emits last, so redesign.css is the globally-final stylesheet
 and always wins the cascade over any Bootstrap/style.compiled.css reload --
 no !important needed. Custom overrides previously lived in inline <style>
 blocks that a later block's Bootstrap reload could clobber (e.g. the news-module
 grid collapsing). Edit here, not in the DB rows.

 Built by concatenating the former inline overrides of row 49872 (body) then
 row 49873 (header).
*/

/* ===================== BODY OVERRIDES (was row 49872 inline) ===================== */

        /*
 CMS container escape
 MCAAGlobal wraps homepage in container-fluid p-0 (page type Webpage)
 but IF the page type is accidentally set to Article/Magazine (328/968)
 it uses <div class='container'><article> which adds max-width + padding.
 These rules break out of that container so the design stays full-bleed.
*/
        .container:has(> article > #main-content),
        .container:has(> #main-content) {
            max-width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            width: 100% !important;
        }
        article:has(> #main-content) {
            padding: 0 !important;
            margin: 0 !important;
        }
        /*
 Wrapper gutter strip (Site.Master + Default.aspx chain)
 Even with Webpage type, content renders inside:
 Site.Master: .container-fluid > .row > [Content]
 Default.aspx: .col-lg-12 > .row > .container-fluid.p-0 > #main-content
 Each Bootstrap wrapper adds a 15px gutter that keeps full-bleed hero
 sections from hitting the viewport edge. These rules zero the
 gutters on any ancestor wrapper that contains #main-content, so the
 redesign renders edge-to-edge. Scoped by :has(#main-content) so
 the rest of the site is unaffected.
*/
        .container-fluid:has(#main-content),
        .col-lg-12:has(#main-content) {
            padding-left: 0 !important;
            padding-right: 0 !important;
            max-width: 100% !important;
        }
        .row:has(#main-content) {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        /* Author/avatar */
        .author-img {
            width: 65px;
            height: 65px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        /* Images */
        /*
 Blur-backdrop pattern for hero/feature images. Staff often upload
 portraits/headshots into slots that expect landscape 16:9 or 16:6,
 and object-fit: cover crops heads off. Fix without enforcing upload
 rules: show the full image (object-fit: contain) with a blurred
 copy of the same image filling the otherwise-letterboxed area.
*/
        .news-carousel-slide .news-carousel-image,
        .feature-hero-image {
            position: relative;
            overflow: hidden;
            background: #1a1a1a;
            transition: background-color 0.4s ease;
        }
        /*
 Feature hero frames get their background filled with the dominant
 color of the current image (sampled by JS). The --hero-fill var
 is updated per slide when each image loads.
*/
        .feature-hero-image {
            background-color: var(--hero-fill, #1a1a1a);
        }
        /*
 style.compiled.css hardcodes .news-carousel-image to height: 280px
 which beats aspect-ratio. Force !important + height: auto so the
 aspect-ratio actually drives the height, and give the carousel
 enough min-height to accommodate image + content without the
 title/excerpt getting cropped.
*/
        .news-carousel-slide .news-carousel-image {
            height: auto !important;
            min-height: 340px !important;
            aspect-ratio: 16 / 9.8;
            border-radius: 0.3rem;
        }
        @media (max-width: 1199.98px) {
            .news-carousel-slide .news-carousel-image {
                min-height: 270px !important;
            }
        }
        /*
 style.compiled.css forces .news-carousel-slide to position: absolute
 with height: 100% of a min-height: 600px container, plus overflow:
 hidden on .news-carousel-slides any slide whose content exceeds
 that gets clipped at the bottom. Switch to a CSS-grid stacking
 pattern: every slide shares the same grid cell at its natural
 height, so the container auto-sizes to the tallest slide.
 Transitions are opacity/visibility only (no translate), so this is
 a drop-in for the existing JS.
*/
        .news-carousel { min-height: 0 !important; overflow: visible !important; min-width: 0 !important; }
        .news-carousel-slides {
            display: grid !important;
            /*
 Clamp grid track to available space without this, the
 implicit auto-sized column expands to max-content (image
 natural width), bleeding the carousel into adjacent
 news-module columns. minmax(0, 1fr) confines it.
*/
            grid-template-columns: minmax(0, 1fr) !important;
            overflow: visible !important;
            min-width: 0 !important;
        }
        .news-carousel-slide {
            position: relative !important;
            grid-column: 1;
            grid-row: 1;
            width: 100% !important;
            min-width: 0 !important;
            height: auto !important;
        }
        /*
 Loosen the 2-line title clamp from compiled.css; longer headlines
 are common in CMS data and the new natural-height layout has room
 for them.
*/
        .news-carousel-slide .news-carousel-title {
            -webkit-line-clamp: 3;
            line-clamp: 3;
        }
        /*
 Clamp excerpt so a single very long story doesn't make the
 carousel column dramatically taller than the headlines column.
*/
        .news-carousel-excerpt {
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .feature-hero-image { aspect-ratio: 16 / 7.2; }
        @media (max-width: 768px) { .feature-hero-image { aspect-ratio: 16 / 9; } }

        /* Backdrop layer: blurred duplicate of the same image filling the frame. */
        .news-carousel-slide .news-carousel-image > img.hero-backdrop,
        .feature-hero-image > img.hero-backdrop {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(36px) brightness(0.55) saturate(0.9);
            transform: scale(1.18);
            z-index: 0;
            pointer-events: none;
        }
        /* Foreground image: fully visible (no crop). */
        .news-carousel-slide .news-carousel-image > img:not(.hero-backdrop),
        .feature-hero-image > img:not(.hero-backdrop) {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
        }
        /*
 News carousel: when JS detects aspect fits within ~20%, skip the
 backdrop and use crisp cover-fit.
*/
        .news-carousel-slide .news-carousel-image.fits-natively > img:not(.hero-backdrop) {
            object-fit: cover;
            object-position: center center;
        }
        .news-carousel-slide .news-carousel-image.fits-natively > img.hero-backdrop {
            display: none;
        }
        /*
 Feature hero: main image always contained and centered. Pillarbox
 gets filled by the JS-sampled dominant color (--hero-fill) so the
 sides always carry color from the current image. A lightly-blurred
 copy of the image sits behind the foreground contained image at
 30% opacity so the color reads as alive rather than flat.
*/
        .feature-hero-image.fits-natively > img:not(.hero-backdrop) {
            object-fit: contain;
            object-position: center center;
        }
        .feature-hero-image.fits-natively > img.hero-backdrop {
            display: block !important;
        }
        .feature-hero-image > img.hero-backdrop {
            display: block !important;
            opacity: 0.45;
            filter: blur(40px) saturate(1.5) brightness(0.95);
            transform: scale(1.3);
        }

        /* Modern section headers */
        .section-header {
            padding: 4rem 0 2rem;
            text-align: center;
        }
        /*
 Small UI text switches away from Barlow Barlow is tall/slightly
 condensed and gets cramped below ~0.9rem. System sans-serif renders
 cleaner at small sizes and keeps eyebrows/meta readable.
*/
        .section-eyebrow {
            display: inline-block;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--bs-mcaa);
            margin-bottom: 0.75rem;
        }

        /*
 Feature hero overlay nav left unstyled so the component's own
 markup + default CSS handles positioning. My earlier custom
 overlay + relocated controls looked broken.
*/
        .section-heading {
            font-size: clamp(2.4rem, 4.5vw, 3.4rem);
            font-weight: 400;
            letter-spacing: 0.01em;
            line-height: 1.15;
            color: #111;
            margin-bottom: 0.75rem;
        }
        .section-subheading {
            font-size: 1.05rem;
            color: #4b5563;
            max-width: 620px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* Benefit / cert cards */
        #membership-benefits-section .col > div,
        #certification-section .col > div {
            background: #fff;
            border: 1px solid #f0f0f0;
            border-radius: 1rem;
            padding: 2rem 1.5rem;
            height: 100%;
            transition: box-shadow 0.22s, transform 0.22s;
        }
        #membership-benefits-section .col > div:hover,
        #certification-section .col > div:hover {
            box-shadow: 0 8px 32px rgba(0,0,0,0.08);
            transform: translateY(-3px);
        }
        #membership-benefits-section .bs-icon-primary {
            background: var(--bs-mcaa) !important;
            color: #fff !important;
            border-radius: 0.75rem !important;
        }
        #certification-section .bs-icon-primary {
            background: var(--bs-black-cons) !important;
            color: #fff !important;
            border-radius: 0.75rem !important;
        }
        #membership-benefits-section h5,
        #certification-section h5 {
            font-weight: 700;
            letter-spacing: 0.01em;
        }
        #business-savings-section { background: #f8f9fa; }

        /* Testimonials */
        .testimonials-section {
            position: relative;
            background-color: #1a1a1a;
            overflow: hidden;
            /*
 Horizontal padding on the SECTION itself survives the row/col
 negative-margin cancellation chain that was collapsing content
 flush to the viewport edge.
*/
            padding: 6rem clamp(1.5rem, 4vw, 4rem);
        }
        .testimonials-section .masonry-pattern {
            position: absolute;
            inset: 0;
            opacity: 0.35;
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='200'%3E%3Crect x='5' y='5' width='155' height='85' rx='8' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3Crect x='170' y='5' width='165' height='85' rx='8' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3Crect x='-80' y='100' width='155' height='85' rx='8' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3Crect x='85' y='100' width='155' height='85' rx='8' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3Crect x='250' y='100' width='155' height='85' rx='8' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E");
            background-size: 340px 200px;
            pointer-events: none;
        }
        /*
 Testimonial markup now uses live-site Bootstrap utilities
 (bg-body-tertiary border rounded p-4 on the quote, text-light /
 text-primary on the attribution). Lightly nudge the quote card to
 match the section's dark tone use a soft off-white rather than
 Bootstrap's default body-tertiary grey which can read as muddy on
 this dark brick backdrop. Scoped to the testimonials section.
*/
        .testimonials-section .carousel-item .bg-body-tertiary {
            background: #f3f4f6 !important;
            color: #1f2937;
            line-height: 1.75;
            font-size: 1rem;
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
            max-width: 640px;
        }
        .testimonials-section .carousel-item .text-light {
            font-size: 1.05rem;
            letter-spacing: 0.005em;
            margin-top: 1rem;
        }
        .testimonials-section .carousel-item .text-primary {
            font-size: 0.95rem;
            color: var(--bs-mcaa) !important;
            margin-top: 0.15rem !important;
        }

        /* Reasons to Join */
        #reasons-to-join-section {
            background: var(--bs-black-cons);
        }
        .reasons-split {
            display: flex;
            min-height: 620px;
        }
        .reasons-content {
            flex: 1 1 48%;
            padding: 5.5rem 4rem 5.5rem 6rem;
            max-width: 640px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .reasons-hero-img {
            flex: 1 1 50%;
            background: url('/microsite/brunotest/MasonContractors/assets/img/reasons-hero.jpg') center / cover no-repeat;
            position: relative;
        }
        .reasons-hero-img::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, var(--bs-black-cons) 0%, transparent 30%);
        }
        .reasons-content h3 {
            font-size: clamp(2.6rem, 4.5vw, 3.6rem);
            font-weight: 400;
            letter-spacing: 0.01em;
            line-height: 1.1;
            color: #fff;
        }
        .reasons-content > p {
            color: rgba(255,255,255,0.7);
            font-size: 1.1rem;
            max-width: 480px;
            margin: 0.75rem 0 1.5rem;
            line-height: 1.7;
        }
        .reasons-cta {
            display: inline-flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        @media (max-width: 991.98px) {
            .reasons-split { flex-direction: column; }
            .reasons-hero-img { min-height: 320px; }
            .reasons-hero-img::after { background: linear-gradient(to bottom, var(--bs-black-cons) 0%, transparent 30%); }
            .reasons-content { padding: 3rem 2rem; }
        }

        /* Organization Info */
        #organization-info-section {
            background: #f8f9fa;
            padding: 5rem 0;
        }
        #organization-info-section h1 {
            font-size: clamp(2.4rem, 4.5vw, 3.2rem);
            font-weight: 400;
            letter-spacing: 0.01em;
        }
        #organization-info-section p {
            color: #4b5563;
            line-height: 1.8;
        }

        /* Contact section */
        #contact-info-section {
            position: relative;
            overflow: hidden;
        }
        .contact-overlay {
            background: rgba(0,0,0,0.65);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            max-width: none;
            width: 100%;
            border-radius: 0;
            padding: 2.5rem;
            border-left: 4px solid var(--bs-mcaa);
        }
        .contact-overlay h3 {
            font-size: 2.6rem;
            font-weight: 400;
            letter-spacing: 0.04em;
        }
        .contact-overlay p {
            color: rgba(255,255,255,0.85);
            margin-bottom: 0.5rem;
        }
        .contact-icon-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.3);
            transition: background 0.2s, border-color 0.2s;
        }
        .contact-icon-link:hover {
            background: var(--bs-mcaa);
            border-color: var(--bs-mcaa);
        }
        .contact-icon-link img { max-width: 22px; filter: brightness(0) invert(1); }

        /* News headlines */
        /*
 Columns were set to 'stretch' so they'd match height; that left dead
 space under the shorter middle column when the news carousel had less
 content than the headlines list. 'start' makes each column its
 natural height no dead space.
*/
        .news-module-grid { align-items: flex-start; }
        .news-module-grid > [class*="col-"] { min-width: 0; }

        /*
 News module grid v2 (gridded layout with spanning DD promo)
 Two-row CSS grid on desktop:
 headlines carousel chat row 1
 rail
 DD promo row 2
 Collapsed chat: narrow ~90px rail, carousel gets the slack.
 Expanded chat: chat column grows to ~3fr, carousel shrinks, DD
 stays under carousel. Falls back to stacked flow on < lg.
*/
        @media (min-width: 992px) {
            /*
 Specificity bump: `.row.news-module-grid--v2` (0,0,2,0) beats Bootstrap's
 `.row { display:flex }` (0,0,1,0) regardless of source order. Required
 because when this page is assembled by Site.Master, the footer row
 (49874) re-loads bootstrap.min.css AFTER this inline <style>, so a plain
 `.news-module-grid--v2` (equal specificity to `.row`) loses on order and
 the grid silently falls back to flex -> all four columns stack full-width.
*/
            .row.news-module-grid--v2 {
                display: grid;
                /* Chat (narrow rail) | Headlines | Carousel | Daily Digest */
                grid-template-columns: 114px minmax(0, 4fr) minmax(0, 5fr) minmax(240px, 3fr);
                grid-template-areas: "chat headlines carousel digest";
                gap: 1.25rem;
                align-items: start;
                --bs-gutter-x: 0;
                margin-left: 0;
                margin-right: 0;
            }
            /*
 When the chat expands (JS toggles `.chat-expanded` on the grid),
 the Daily Digest column disappears and the chat column grows
 into a proper panel. Using a JS-toggled class instead of :has()
 is more reliable across browsers and avoids specificity issues
 when the digest has other display rules.
*/
            .news-module-grid--v2.chat-expanded {
                grid-template-columns: minmax(240px, 3fr) minmax(0, 4fr) minmax(0, 5fr);
                grid-template-areas: "chat headlines carousel";
            }
            .news-module-grid--v2 > .is-chat      { grid-area: chat;      max-width: 100%; width: 100%; flex: 1 1 auto; padding-left: 0; padding-right: 0; }
            .news-module-grid--v2 > .is-headlines { grid-area: headlines; max-width: 100%; width: 100%; flex: 1 1 auto; padding-left: 0; padding-right: 0; }
            .news-module-grid--v2 > .is-carousel  { grid-area: carousel;  max-width: 100%; width: 100%; flex: 1 1 auto; padding-left: 0; padding-right: 0; }
            .news-module-grid--v2 > .is-digest    { grid-area: digest;    max-width: 100%; width: 100%; flex: 1 1 auto; padding-left: 0; padding-right: 0; display: flex !important; flex-direction: column; gap: 2.5rem; }
            .news-module-grid--v2.chat-expanded > .is-chat {
                align-self: stretch;
            }
            /*
 Daily Digest column vanishes when chat expands. Use !important so
 it beats any inline/specificity wars, and also covers the edge
 case where the grid-area "digest" no longer exists in the
 expanded template (auto-placement would otherwise push it
 into a new row).
*/
            .news-module-grid--v2.chat-expanded > .is-digest {
                display: none !important;
            }
        }
        #newsCarouselContainer {
            width: 100%;
            min-width: 0;
            flex: 1 1 auto;
        }
        .news-headlines-container {
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            outline: none !important;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 100%;
        }
        @media (min-width: 992px) {
            .news-headlines-container { height: 100%; }
            .george-chat-col { padding-left: 0; min-width: 0; }
        }

        /* Chat an Author widget (collapsible) */
        .chat-author-widget {
            background: transparent;
            width: 100%;
            min-width: 0;
            position: relative;
        }
        /*
 Collapsed state: narrow rail hugs the right edge with vertical label
 + avatar stack. The full panel is hidden.
*/
        .chat-author-widget.is-collapsed .chat-author-panel { display: none; }
        .chat-author-widget:not(.is-collapsed) .chat-author-rail { display: none; }

        /*
 Collapsed rail narrow vertical strip in its dedicated leftmost
 column. Compact icon stacked AUTHOR/CHAT label avatar tower
 chevron, with the yellow George chin at the bottom.
*/
        .chat-author-rail {
            width: 100%;
            max-width: 114px;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            padding: 1.05rem 0.6rem 0;
            background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
            border: 1px solid #e5e7eb;
            border-radius: 0.35rem;
            cursor: pointer;
            transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
            overflow: hidden;
        }
        /* Yellow chin at the bottom of the rail just the George logo. */
        .chat-author-rail-chin {
            margin-top: 0.7rem;
            margin-inline: -0.5rem;
            width: calc(100% + 1rem);
            padding: 0.45rem 0.35rem;
            background: #FFF700;
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px solid rgba(0,0,0,0.05);
        }
        .chat-author-rail-chin img {
            height: 16px;
            width: auto;
            display: block;
        }
        .chat-author-rail:hover,
        .chat-author-rail:focus-visible {
            box-shadow: 0 10px 24px rgba(0,0,0,0.08);
            border-color: #111;
            transform: translateY(-1px);
            outline: none;
        }
        .chat-author-rail-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: transparent;
            color: #111;
            font-size: 1.45rem;
            flex-shrink: 0;
            transition: transform 0.2s ease, color 0.2s ease;
        }
        .chat-author-rail:hover .chat-author-rail-icon,
        .chat-author-rail:focus-visible .chat-author-rail-icon {
            transform: scale(1.06);
        }
        .chat-author-rail-caption {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1.05;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            color: #1f2937;
            margin-top: -0.3rem;
            gap: 0.15rem;
        }
        .chat-author-rail-caption > span { display: block; }
        .chat-author-rail:hover .chat-author-rail-caption,
        .chat-author-rail:focus-visible .chat-author-rail-caption { color: #111; }
        .chat-author-rail-avatars {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.15rem;
        }
        .chat-author-rail-avatars img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 1px 2px rgba(0,0,0,0.15);
            margin-top: -10px;
        }
        .chat-author-rail-avatars img:first-child { margin-top: 0; }
        .chat-author-rail-expand {
            margin-top: 0.25rem;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #f3f4f6;
            color: #6b7280;
            font-size: 0.65rem;
            transition: background 0.2s, color 0.2s;
        }
        .chat-author-rail:hover .chat-author-rail-expand,
        .chat-author-rail:focus-visible .chat-author-rail-expand {
            background: #111;
            color: #fff;
        }

        /*
 Subtle once-per-minute attention orbit around the collapsed rail.
 A glowing yellow dot traces the rail's perimeter; an SVG stroke is
 drawn in behind it as it goes. After a full lap (~7s) both fade out
 and stay invisible until the next minute mark.
*/
        .chat-author-widget:not(.is-collapsed) .chat-author-rail-glow { display: none; }
        .chat-author-rail-glow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            max-width: 114px;
            height: 100%;
            pointer-events: none;
            overflow: visible;
            z-index: 1;
        }
        .chat-author-rail-glow-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
        }
        .chat-author-rail-glow-stroke {
            x: 1.5px;
            y: 1.5px;
            width: calc(100% - 3px);
            height: calc(100% - 3px);
            rx: 7px;
            ry: 7px;
            fill: none;
            stroke: #FFF700;
            stroke-width: 1.75;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            filter: drop-shadow(0 0 3px rgba(255, 247, 0, 0.85))
                    drop-shadow(0 0 7px rgba(255, 247, 0, 0.45));
            /*
 120s cycle (every 2 min) with a 13.8s startup delay so the
 first fade-in (1% of cycle = 1.2s) completes at ~15s after
 page load rather than firing instantly.
*/
            animation: chatAuthorGlowStroke 120s ease-in-out 13.8s infinite;
        }
        .chat-author-rail-glow-dot {
            position: absolute;
            top: 0;
            left: 0;
            width: 9px;
            height: 9px;
            margin: -4.5px 0 0 -4.5px;
            border-radius: 50%;
            background: radial-gradient(circle, #fffacd 0%, #FFF700 50%, rgba(255, 247, 0, 0) 100%);
            box-shadow: 0 0 5px #FFF700,
                        0 0 12px rgba(255, 247, 0, 0.75),
                        0 0 22px rgba(255, 247, 0, 0.4);
            offset-path: inset(1.5px round 7px);
            offset-distance: 0%;
            opacity: 0;
            animation: chatAuthorGlowDot 120s ease-in-out 13.8s infinite;
        }
        /*
 Stroke and dot share the SAME motion segment [1%, 10%] of the
 120s cycle (10.8s of motion) so the dot stays pinned to the
 leading edge of the drawn stroke.
*/
        @keyframes chatAuthorGlowStroke {
            0%   { stroke-dashoffset: 1000; opacity: 0; }
            1%   { stroke-dashoffset: 1000; opacity: 1; }
            10%  { stroke-dashoffset: 0;    opacity: 1; }
            13%  { stroke-dashoffset: 0;    opacity: 0; }
            100% { stroke-dashoffset: 0;    opacity: 0; }
        }
        @keyframes chatAuthorGlowDot {
            0%   { offset-distance: 0%;   opacity: 0; }
            1%   { offset-distance: 0%;   opacity: 1; }
            10%  { offset-distance: 100%; opacity: 1; }
            13%  { offset-distance: 100%; opacity: 0; }
            100% { offset-distance: 100%; opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .chat-author-rail-glow { display: none; }
        }

        /* Expanded panel the original full list. */
        .chat-author-panel {
            overflow: hidden;
            height: 480px;
            width: 100%;
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 0.3rem;
            box-shadow: 0 14px 38px rgba(0,0,0,0.08);
            animation: chatAuthorExpand 0.22s ease-out;
        }
        @keyframes chatAuthorExpand {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .chat-author-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.85rem 0.85rem 0.75rem 1rem;
            border-bottom: 1px solid #e5e7eb;
        }
        .chat-author-header h3 {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            color: #111;
            margin: 0;
            line-height: 1;
        }
        .chat-author-close {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.25rem;
            background: #f3f4f6;
            color: #6b7280;
            border: none;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            flex-shrink: 0;
        }
        .chat-author-close:hover { background: var(--bs-mcaa); color: #fff; }
        .chat-author-list {
            flex: 1;
            overflow-y: auto;
            padding: 0.5rem 0.5rem;
        }
        .chat-author-list::-webkit-scrollbar { width: 3px; }
        .chat-author-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
        .chat-author-card {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.65rem 0.7rem;
            border-radius: 0.75rem;
            cursor: default;
            transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            text-decoration: none;
            color: inherit;
            border: 1px solid transparent;
            position: relative;
        }
        .chat-author-card:hover {
            background: #f9fafb;
            border-color: #e5e7eb;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            transform: translateY(-1px);
            color: inherit;
            text-decoration: none;
        }
        .chat-author-avatar {
            position: relative;
            flex-shrink: 0;
        }
        .chat-author-avatar img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e5e7eb;
            transition: border-color 0.2s;
        }
        .chat-author-card:hover .chat-author-avatar img { border-color: var(--bs-mcaa); }
        .chat-author-avatar .status-dot {
            position: absolute;
            bottom: 2px; right: 2px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #10b981;
            border: 2px solid #fff;
            box-shadow: 0 0 0 1px rgba(16,185,129,0.2);
        }
        .chat-author-info { min-width: 0; flex: 1; }
        .chat-author-name {
            font-size: 0.85rem;
            font-weight: 700;
            color: #111;
            line-height: 1.25;
            display: block;
        }
        .chat-author-role {
            font-size: 0.7rem;
            color: #9ca3af;
            line-height: 1.3;
            display: block;
        }
        .chat-author-topic {
            display: inline-block;
            font-size: 0.6rem;
            font-weight: 600;
            color: #6b7280;
            background: #f3f4f6;
            padding: 0.15rem 0.45rem;
            border-radius: 1rem;
            margin-top: 0.25rem;
            letter-spacing: 0.02em;
            transition: background 0.15s, color 0.15s;
        }
        .chat-author-card:hover .chat-author-topic {
            background: rgba(233,29,45,0.08);
            color: var(--bs-mcaa);
        }
        .chat-author-arrow {
            margin-left: auto;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #f3f4f6;
            color: #9ca3af;
            font-size: 0.8rem;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        .chat-author-card:hover .chat-author-arrow {
            background: var(--bs-mcaa);
            color: #fff;
            transform: translateX(2px);
        }
        .chat-author-footer {
            padding: 0.7rem 0.5rem;
            text-align: center;
            background: #FFF700;
            border-top: 1px solid rgba(0,0,0,0.05);
        }
        .chat-author-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: #111;
            text-transform: uppercase;
        }
        .chat-author-badge .george-logo-img {
            height: 18px;
            width: auto;
            vertical-align: middle;
            margin: 0 2px;
        }

        /*
 Announcements rail (vertically scrolling between MCAA auction
 and Daily Digest launch) sits above the Daily Digest feed.
 Includes circular dot indicators (bottom-right) that pulse in
 sync with which slide is visible, like the carousel controls.
*/
        .digest-announcement-rail {
            position: relative;
            overflow: hidden;
            height: 108px;
            background: #111;
            border: 0;
            border-radius: 0.3rem;
        }
        /*
 JS drives the vertical slide via data-announce-index on the rail.
 Transition is short (0.5s) so the swap feels snappy; the dwell
 time (~20s) is handled by setInterval in JS so it's trivial to
 pause on hover or jump with the up/down buttons.
*/
        .digest-announcement-track {
            display: flex;
            flex-direction: column;
            transition: transform 0.5s cubic-bezier(0.6, 0.05, 0.3, 1);
        }
        .digest-announcement-rail[data-announce-index="0"] .digest-announcement-track { transform: translateY(0); }
        .digest-announcement-rail[data-announce-index="1"] .digest-announcement-track { transform: translateY(-108px); }
        @media (prefers-reduced-motion: reduce) {
            .digest-announcement-track { transition: none; }
        }
        /*
 Up / Down navigation buttons small chevrons on the right edge,
 stacked vertically so the user can step through announcements.
*/
        .digest-announcement-nav {
            position: absolute;
            right: 6px;
            width: 22px;
            height: 22px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.14);
            border: 1px solid rgba(255,255,255,0.08);
            color: #fff;
            font-size: 0.6rem;
            border-radius: 0.25rem;
            cursor: pointer;
            z-index: 3;
            transition: background 0.15s, transform 0.1s;
        }
        .digest-announcement-nav:hover,
        .digest-announcement-nav:focus-visible {
            background: rgba(255,255,255,0.28);
            outline: none;
        }
        .digest-announcement-nav:active { transform: scale(0.92); }
        .digest-announcement-nav--up   { top: 6px; right: 6px; }
        .digest-announcement-nav--down { bottom: 6px; right: 6px; }
        /*
 Dot indicators. JS-less each dot has its own keyframe synced to
 the 12s track animation so whichever slide is visible has its dot
 at full white.
*/
        .digest-announcement-dots {
            position: absolute;
            top: 50%;
            right: 14px;
            transform: translateY(-50%);
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.3rem;
            pointer-events: none;
        }
        .digest-announcement-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.35);
            transition: background 0.25s ease;
        }
        .digest-announcement-rail[data-announce-index="0"] .digest-announcement-dot:nth-child(1),
        .digest-announcement-rail[data-announce-index="1"] .digest-announcement-dot:nth-child(2) {
            background: #fff;
        }
        .digest-announcement {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.25rem;
            min-height: 108px;
            padding: 0.75rem 3.25rem 0.75rem 1rem;
            color: #fff;
            text-decoration: none;
            background: #111;
            transition: background 0.2s;
        }
        .digest-announcement--accent { background: #4472C4; }
        .digest-announcement:hover {
            color: #fff;
            text-decoration: none;
            background: #1f2937;
        }
        .digest-announcement--accent:hover { background: #365fa0; }
        .digest-announcement-kicker {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.6rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #FFD84A;
            display: inline-block;
            width: fit-content;
        }
        .digest-announcement--accent .digest-announcement-kicker { color: #fff; }
        .digest-announcement-title {
            font-family: 'Barlow', sans-serif;
            font-size: 0.92rem;
            font-weight: 700;
            line-height: 1.25;
            color: #fff;
        }
        .digest-announcement-cta {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.85);
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

        /*
 Daily Digest column feed
 Styled to mirror the Industry Headlines module (flat list,
 dividers between items, no bounding box). The blue header bar
 matches the feed's editorial identity without adding a frame
 around the whole block.
*/
        .chat-col-digest {
            display: flex;
            flex-direction: column;
            background: transparent;
        }
        .chat-col-digest-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.65rem 0.9rem;
            background: #4472C4;
            color: #fff;
            border-radius: 0.3rem;
        }
        .chat-col-digest-eyebrow {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #fff;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }
        .chat-col-digest-eyebrow .fa-envelope {
            font-size: 0.85rem;
            opacity: 0.9;
        }
        .chat-col-digest-link {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #fff;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            opacity: 0.88;
            transition: opacity 0.15s;
        }
        .chat-col-digest-link:hover { opacity: 1; color: #fff; text-decoration: none; }
        .chat-col-digest-feed {
            display: flex;
            flex-direction: column;
            max-height: 440px;
            overflow-y: auto;
        }
        .chat-col-digest-item {
            display: block;
            padding: 0.7rem 0.25rem;
            text-decoration: none;
            color: inherit;
            transition: background 0.15s;
            border-top: 1px solid #eef0f2;
        }
        .chat-col-digest-item:first-child { border-top: 0; }
        .chat-col-digest-item:hover { background: #fafbfd; color: inherit; text-decoration: none; }
        .chat-col-digest-title {
            display: block;
            font-family: 'Barlow', sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            line-height: 1.2;
            color: #1f2937;
            margin-bottom: 0.35rem;
        }
        .chat-col-digest-item:hover .chat-col-digest-title { color: var(--bs-mcaa, #e91d2d); }
        .chat-col-digest-meta {
            display: block;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.72rem;
            color: #6b7280;
            line-height: 1.3;
        }

        /* Mini Daily Digest promo (banner below carousel) */
        .digest-mini-promo {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1rem;
            padding: 0.9rem 1.25rem;
            background: linear-gradient(90deg, #4472C4 0%, #365fa0 100%);
            border: 1px solid #365fa0;
            border-radius: 0.75rem;
            text-decoration: none;
            color: #fff;
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }
        .digest-mini-promo:hover,
        .digest-mini-promo:focus-visible {
            transform: translateY(-1px);
            box-shadow: 0 12px 28px rgba(68,114,196,0.25);
            filter: brightness(1.05);
            color: #fff;
            text-decoration: none;
            outline: none;
        }
        .digest-mini-promo-badge {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.6rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #4472C4;
            background: #fff;
            padding: 0.2rem 0.55rem;
            border-radius: 2rem;
            line-height: 1.3;
            flex-shrink: 0;
        }
        .digest-mini-promo-logo {
            height: 38px;
            width: auto;
            flex-shrink: 0;
            display: block;
            filter: brightness(0) invert(1); /* render the blue/black PNG logo in white */
        }
        .digest-mini-promo-text {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.88rem;
            font-weight: 500;
            line-height: 1.35;
            color: rgba(255,255,255,0.95);
            flex: 1 1 auto;
        }
        .digest-mini-promo-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #fff;
            background: rgba(255,255,255,0.14);
            padding: 0.45rem 0.85rem;
            border-radius: 2rem;
            flex-shrink: 0;
            transition: background 0.2s ease;
        }
        .digest-mini-promo:hover .digest-mini-promo-cta { background: rgba(255,255,255,0.22); }
        @media (max-width: 767.98px) {
            .digest-mini-promo { flex-wrap: wrap; gap: 0.65rem 0.85rem; padding: 0.85rem 1rem; }
            .digest-mini-promo-text { font-size: 0.82rem; flex: 1 1 100%; order: 3; }
            .digest-mini-promo-cta { order: 4; }
        }

        .news-headlines-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: #111;
            color: #fff;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            border-radius: 0.3rem;
        }
        .news-headlines-header svg { opacity: 0.7; }
        /*
 Industry Headlines simpler markup (no dividers, no pill wrappers,
 whole-card clickable via ::after), site-standard typography.
*/
        .news-headline-item {
            padding: 1.1rem 1rem;
            position: relative;
            cursor: pointer;
            transition: background 0.15s;
        }
        .news-headline-item:first-child { padding-top: 0.7rem; }
        .news-headline-item:hover { background: #fafafa; }
        .news-headline-item + .news-headline-item { border-top: 1px solid #f0f0f0; }
        .news-headline-cat {
            display: block;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: var(--bs-mcaa);
            margin-bottom: 0.4rem;
        }
        .news-headline-item h3 {
            font-size: 1.55rem;
            font-weight: 700;
            line-height: 1.2;
            margin: 0 0 0.6rem;
            color: #1f2937;
        }
        .news-headline-item h3 a { color: inherit; text-decoration: none; }
        .news-headline-item h3 a::after { content: ''; position: absolute; inset: 0; }
        .news-headline-item:hover h3 a { color: var(--bs-mcaa); }
        .news-headline-meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.75rem;
            color: #9ca3af;
        }
        .news-headline-meta .news-headline-author { font-weight: 600; color: #374151; }
        .news-headline-meta .news-headline-dot { color: #9ca3af; line-height: 1; }
        .news-headline-link {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--bs-mcaa);
            text-decoration: none;
            transition: color 0.15s;
            position: relative;
            z-index: 2;
        }
        .news-headline-link:hover { color: var(--bs-mcaa-dark); }
        .news-headlines-scroll {
            max-height: 420px;
            overflow-y: auto;
            flex: 1 1 auto;
            min-height: 0;
        }
        .news-headlines-scroll::-webkit-scrollbar { width: 4px; }
        .news-headlines-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
        @media (min-width: 992px) {
            .news-headlines-scroll { max-height: none; }
        }

        /* News carousel refinement */
        .news-carousel-link { position: relative; z-index: 2; }
        .news-carousel-category { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bs-mcaa); }
        .news-carousel-content { position: relative; }
        .news-carousel-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
        .news-carousel-title a { color: inherit; text-decoration: none; }
        .news-carousel-title a::after { content: ''; position: absolute; inset: 0; }
        .news-carousel-content:hover .news-carousel-title a { color: var(--bs-mcaa); }
        .news-carousel-excerpt { color: #6b7280; font-size: 0.9rem; line-height: 1.65; }
        .news-carousel-meta small { font-size: 0.75rem; color: #9ca3af; }

        /* GEORGE section */
        #try-george {
            background: var(--bs-black-cons);
            position: relative;
            overflow: hidden;
            overflow: hidden;
            --george-yellow: #FFF700;
            --george-yellow-dark: #e6de00;
        }
        /*
 Two subtle yellow glows placed behind content anchors, with a slow
 ethereal drift animation (different durations so they never sync).
 Extended well past the section edges so the gradient's fade-out
 happens off-screen prevents a visible hard edge on the bottom-
 left glow when it drifts. Noise texture overlay adds grain so the
 glows read as light rather than flat fills.
*/
        #try-george::before {
            content: '';
            position: absolute;
            bottom: -25%;
            left: -20%;
            width: 90%;
            height: 120%;
            background: radial-gradient(ellipse 60% 55% at 30% 80%, rgba(255,247,0,0.22) 0%, rgba(255,247,0,0.08) 40%, transparent 72%);
            pointer-events: none;
            z-index: 0;
            will-change: transform, opacity;
            animation: george-glow-a 22s ease-in-out infinite alternate;
        }
        #try-george::after {
            content: '';
            position: absolute;
            top: -20%;
            right: -20%;
            width: 90%;
            height: 120%;
            background: radial-gradient(ellipse 55% 50% at 75% 30%, rgba(255,247,0,0.18) 0%, rgba(255,247,0,0.06) 40%, transparent 72%);
            pointer-events: none;
            z-index: 0;
            will-change: transform, opacity;
            animation: george-glow-b 28s ease-in-out infinite alternate;
        }
        /*
 Grain/noise overlay on top of the glows SVG fractal noise scaled
 down, blended in at low opacity so the solid radial gradients get
 some texture instead of looking like flat fills.
*/
        #try-george > .george-noise {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0.18;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
            background-size: 220px 220px;
        }
        @keyframes george-glow-a {
            0%   { transform: translate3d(0, 0, 0) scale(1);         opacity: 0.85; }
            30%  { transform: translate3d(8%, -6%, 0) scale(1.08);   opacity: 1; }
            60%  { transform: translate3d(-6%, 9%, 0) scale(0.94);   opacity: 0.7; }
            100% { transform: translate3d(5%, -10%, 0) scale(1.05);  opacity: 0.95; }
        }
        @keyframes george-glow-b {
            0%   { transform: translate3d(0, 0, 0) scale(1);         opacity: 0.8; }
            35%  { transform: translate3d(-10%, 8%, 0) scale(1.06);  opacity: 1; }
            70%  { transform: translate3d(9%, -7%, 0) scale(0.96);   opacity: 0.75; }
            100% { transform: translate3d(-4%, 11%, 0) scale(1.03);  opacity: 0.9; }
        }
        /* Accessibility honor reduced-motion preference. */
        @media (prefers-reduced-motion: reduce) {
            #try-george::before,
            #try-george::after {
                animation: none;
            }
        }
        #try-george > .container {
            position: relative;
            z-index: 1;
        }
        #try-george .george-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--george-yellow);
            border: 1px solid rgba(255,247,0,0.45);
            border-radius: 2rem;
            padding: 0.35rem 0.9rem;
            margin-bottom: 1.25rem;
        }
        #try-george h2, #try-george h3 { color: #fff; }
        #try-george h2.display-6 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
        #try-george p, #try-george .lead { color: rgba(255,255,255,0.7); }
        #try-george .george-feature-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }
        #try-george .george-feature-item:last-child { border-bottom: none; }
        #try-george .george-feature-icon { flex-shrink: 0; width: 1.25rem; color: var(--george-yellow); margin-top: 0.2rem; }
        #try-george .george-feature-item strong { color: #fff; }
        #try-george .george-feature-item span { color: rgba(255,255,255,0.85); font-size: 0.95rem; }
        /*
 Hover: wash the whole row in GEORGE yellow with black text for the
 entire line (bold label, description, check icon everything). No
 more black-on-black invisibility from the site-default red-hover.
*/
        #try-george .george-feature-item {
            margin-inline: -0.65rem;
            padding-inline: 0.65rem;
            border-radius: 0.25rem;
            transition: background 0.15s ease;
        }
        #try-george .george-feature-item:hover,
        #try-george .george-feature-item.is-highlighted {
            background: var(--george-yellow);
            border-bottom-color: transparent;
        }
        #try-george .george-feature-item:hover,
        #try-george .george-feature-item:hover *,
        #try-george .george-feature-item:hover strong,
        #try-george .george-feature-item:hover span,
        #try-george .george-feature-item:hover .george-feature-icon,
        #try-george .george-feature-item.is-highlighted,
        #try-george .george-feature-item.is-highlighted *,
        #try-george .george-feature-item.is-highlighted strong,
        #try-george .george-feature-item.is-highlighted span,
        #try-george .george-feature-item.is-highlighted .george-feature-icon {
            color: #111 !important;
        }
        #try-george .btn-george {
            background: var(--george-yellow);
            color: #111;
            border: none;
            padding: 0.75rem 2rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            border-radius: 0.375rem;
            transition: background 0.2s, transform 0.15s;
        }
        #try-george .btn-george:hover { background: var(--george-yellow-dark); color: #111; transform: translateY(-2px); }
        .george-mockup {
            background: #1e1e1e;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
        }
        .george-mockup-bar {
            background: #2a2a2a;
            padding: 0.75rem 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .george-mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); }
        .george-mockup-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
        .george-mockup-logo { text-align: center; padding-bottom: 0.5rem; }
        .george-mockup-logo img { max-width: 140px; filter: brightness(0) invert(1); }
        .george-bubble { border-radius: 1rem; padding: 0.85rem 1.1rem; font-size: 0.9rem; line-height: 1.5; max-width: 85%; }
        .george-bubble.user {
            background: var(--george-yellow);
            color: #111;
            align-self: flex-end;
            border-bottom-right-radius: 0.25rem;
            margin-left: auto;
        }
        .george-bubble.ai {
            background: #5a5a5a;
            color: #ffffff;
            border: 1px solid rgba(255,255,255,0.22);
            border-bottom-left-radius: 0.25rem;
        }
        .george-mockup-input {
            background: #141414;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            padding: 0.6rem 1rem;
            gap: 0.75rem;
            border: 1px solid rgba(255,255,255,0.2);
        }
        .george-mockup-input span { flex: 1; color: rgba(255,255,255,0.85); font-size: 0.875rem; }
        .george-mockup-input i { color: var(--george-yellow); }
        .george-headline-text {
            display: inline;
        }
        .george-beta-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #111;
            background: var(--george-yellow);
            border-radius: 2rem;
            padding: 0.35rem 0.9rem 0.3rem;
            margin-left: 0.9rem;
            vertical-align: 0.25em;
            line-height: 1;
            white-space: nowrap;
        }
        /*
 GEORGE mockup wrapped in an <a href="/Login"> remove link defaults
 and add a hover-hint CTA that invites login.
*/
        .george-mockup-link {
            display: block;
            position: relative;
            text-decoration: none;
            color: inherit;
        }
        /*
 Ghost background windows blurry, low-opacity, decorative. Placed
 behind the main mockup to fake depth-of-field.
*/
        .george-ghost-stack {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }
        .george-ghost {
            position: absolute;
            width: 58%;
            padding: 0.9rem 1rem 1.25rem;
            background: rgba(30, 30, 30, 0.65);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 0.75rem;
            backdrop-filter: blur(1.5px);
            filter: blur(3px) saturate(0.9);
            opacity: 0.55;
            box-shadow: 0 20px 50px rgba(0,0,0,0.4);
        }
        .george-ghost--tl { top: -6%; left: -14%; transform: rotate(-4deg); }
        .george-ghost--br { bottom: -8%; right: -14%; transform: rotate(3deg); }
        .george-ghost-bar {
            display: flex;
            gap: 0.4rem;
            margin-bottom: 1rem;
        }
        .george-ghost-bar span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
        }
        .george-ghost-row {
            height: 10px;
            border-radius: 3px;
            background: linear-gradient(90deg, rgba(255,247,0,0.18), rgba(255,255,255,0.08));
            margin: 0.55rem 0;
        }
        .george-ghost-row.short { width: 55%; }
        .george-ghost-button {
            width: 40%;
            height: 22px;
            margin-top: 0.9rem;
            border-radius: 0.25rem;
            background: rgba(255,247,0,0.3);
        }
        .george-ghost-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.35rem;
            margin: 0.25rem 0 0.75rem;
        }
        .george-ghost-grid i {
            height: 26px;
            border-radius: 0.2rem;
            background: rgba(255,255,255,0.08);
        }
        .george-mockup { position: relative; z-index: 1; }

        /* Mockup stack: variants cross-fade on feature hover */
        .george-mockup-stack {
            position: relative;
            z-index: 1;
        }
        .george-mockup-stack .george-mockup {
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
        .george-mockup-stack .george-mockup:not(:first-child) {
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: none;
        }
        .george-mockup-stack[data-preview="translate"] .george-mockup--chat,
        .george-mockup-stack[data-preview="bracing"] .george-mockup--chat,
        .george-mockup-stack[data-preview="productivity"] .george-mockup--chat,
        .george-mockup-stack[data-preview="safety"] .george-mockup--chat,
        .george-mockup-stack[data-preview="more"] .george-mockup--chat { opacity: 0; }
        .george-mockup-stack[data-preview="translate"] .george-mockup--translate,
        .george-mockup-stack[data-preview="bracing"] .george-mockup--bracing,
        .george-mockup-stack[data-preview="productivity"] .george-mockup--productivity,
        .george-mockup-stack[data-preview="safety"] .george-mockup--safety,
        .george-mockup-stack[data-preview="more"] .george-mockup--more {
            opacity: 1;
            pointer-events: auto;
        }
        /*
 Touch devices: hover is sticky, so the swap can get stuck in a
 non-default state after a tap. Keep the default chat demo only
 and hide the feature-hover variants.
*/
        @media (hover: none), (max-width: 767.98px) {
            .george-mockup-stack .george-mockup:not(.george-mockup--chat) {
                display: none !important;
            }
            .george-mockup-stack .george-mockup--chat {
                opacity: 1 !important;
            }
        }

        /*
 Skeleton UI primitives (gsk-*) rectangles + simple glyphs
 that read as "some interface" without committing to content.
*/
        .gsk { gap: 0.9rem; }
        .gsk-title {
            margin-left: 0.75rem;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.55);
            white-space: nowrap;
        }
        .gsk-bar {
            display: block;
            height: 10px;
            border-radius: 4px;
            background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.1));
        }
        .gsk-bar.short { width: 60%; }
        .gsk-label {
            flex: 0 0 35%;
            height: 8px;
            border-radius: 3px;
            background: rgba(255,255,255,0.18);
        }
        .gsk-label.short { flex-basis: 22%; }
        .gsk-value {
            flex: 1;
            height: 12px;
            border-radius: 3px;
            background: linear-gradient(90deg, rgba(255,247,0,0.35), rgba(255,247,0,0.1));
        }
        .gsk-value.short { flex: 0 0 35%; }
        .gsk-kv { display: flex; align-items: center; gap: 0.75rem; }
        .gsk-cta {
            align-self: flex-start;
            width: 45%;
            height: 30px;
            border-radius: 0.25rem;
            background: var(--george-yellow);
            margin-top: 0.25rem;
        }
        /* Translate variant */
        .gsk-lang-row {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 0.75rem;
            align-items: stretch;
        }
        .gsk-lang-panel {
            display: flex; flex-direction: column; gap: 0.55rem;
            padding: 0.9rem 0.85rem;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 0.5rem;
        }
        .gsk-lang-panel--accent {
            background: rgba(255,247,0,0.08);
            border-color: rgba(255,247,0,0.25);
        }
        .gsk-lang-tag {
            font-family: system-ui, sans-serif;
            font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
            color: rgba(255,255,255,0.7); margin-bottom: 0.2rem;
        }
        .gsk-arrow { align-self: center; color: var(--george-yellow); font-size: 0.9rem; }
        .gsk-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
        .gsk-chip {
            width: 32px; height: 32px; border-radius: 50%;
            background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.8rem;
        }
        .gsk-chip-wide { flex: 1; height: 32px; border-radius: 999px; background: rgba(255,255,255,0.06); }
        /*
 Bracing diagram SVG for precise line endpoints so the brace
 pole always connects the ground anchor to the wall face.
*/
        .gsk-diagram-svg {
            display: block;
            width: 100%;
            max-width: 360px;
            height: auto;
            margin: 0 auto 0.5rem;
        }
        /* Productivity gauge */
        .gsk-gauge { position: relative; align-self: center; width: 180px; height: 95px; margin: 0 auto 0.75rem; }
        .gsk-gauge-arc {
            position: absolute; inset: 0;
            border: 8px solid rgba(255,255,255,0.12); border-bottom: 0;
            border-radius: 200px 200px 0 0; box-sizing: border-box;
        }
        .gsk-gauge-needle {
            position: absolute; left: 50%; bottom: 6px; width: 3px; height: 70%;
            background: var(--george-yellow);
            transform-origin: bottom center; transform: translateX(-50%) rotate(18deg);
            border-radius: 2px;
        }
        .gsk-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem; }
        .gsk-metric {
            display: flex; flex-direction: column; gap: 0.3rem;
            padding: 0.5rem 0.6rem; background: rgba(255,255,255,0.04);
            border-radius: 0.25rem;
        }
        .gsk-metric-bar {
            height: 6px; border-radius: 3px;
            background: linear-gradient(90deg, var(--george-yellow), rgba(255,247,0,0.2));
        }
        .gsk-metric-bar.short { width: 55%; }
        .gsk-metric-val { height: 14px; width: 50%; border-radius: 3px; background: rgba(255,255,255,0.18); }
        /* Safety */
        .gsk-check-row { display: flex; align-items: center; gap: 0.75rem; }
        .gsk-check {
            flex: 0 0 auto; width: 16px; height: 16px; border-radius: 3px;
            background: var(--george-yellow); position: relative;
        }
        .gsk-check::after {
            content: ''; position: absolute; left: 4px; top: 2px;
            width: 5px; height: 9px; border: solid #111; border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        .gsk-check--pending { background: rgba(255,255,255,0.15); }
        .gsk-check--pending::after { display: none; }
        .gsk-check-row .gsk-bar { flex: 1; }
        .gsk-badge-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
        .gsk-badge {
            flex: 1; height: 28px; border-radius: 999px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
        }
        /* More (tile grid) */
        .gsk-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
        .gsk-tile {
            aspect-ratio: 1; border-radius: 0.3rem;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .gsk-tile--plus {
            display: flex; align-items: center; justify-content: center;
            background: rgba(255,247,0,0.12);
            border-color: rgba(255,247,0,0.3);
            color: var(--george-yellow); font-size: 1.1rem;
        }

        @media (max-width: 767.98px) {
            /* Hide ghosts on mobile too small to read, adds noise. */
            .george-ghost-stack { display: none; }
        }
        .george-mockup-link:hover,
        .george-mockup-link:focus { text-decoration: none; color: inherit; }
        .george-mockup-link .george-mockup {
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .george-mockup-link:hover .george-mockup {
            transform: translateY(-3px);
            box-shadow: 0 24px 48px rgba(0,0,0,0.35);
        }
        .george-mockup-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 0.9rem;
            padding: 0.55rem 1rem;
            background: rgba(255,255,255,0.06);
            border: 1px dashed rgba(255,255,255,0.35);
            border-radius: 0.5rem;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: rgba(255,255,255,0.85);
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity 0.25s ease, transform 0.25s ease;
            pointer-events: none;
        }
        .george-mockup-link:hover .george-mockup-cta,
        .george-mockup-link:focus-visible .george-mockup-cta {
            opacity: 1;
            transform: translateY(0);
        }
        @media (hover: none) {
            /* Touch devices: show the CTA always so the login affordance is visible. */
            .george-mockup-cta { opacity: 1; transform: none; }
        }

        /* Content Tabs Section Redesign */
        #content-tabs-section {
            background: #fff;
            padding: 4rem 0 0;
            border-top: none;
            position: relative;
            z-index: 2;
            margin-top: -2px;
        }
        #content-tabs-section .section-header {
            padding: 0 0 2.5rem;
            border-bottom: none !important;
        }

        /* Pill-style segmented tabs */
        .content-tabs-nav-wrap {
            display: flex;
            justify-content: center;
            margin-bottom: 0;
        }
        .content-tabs-pills {
            display: inline-flex;
            background: #e5e7eb;
            border-radius: 0.75rem;
            padding: 0.3rem;
            gap: 0.25rem;
            list-style: none;
            margin: 0;
        }
        .content-tabs-pills .nav-link {
            display: inline-flex !important;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: #1f2937 !important;
            background: transparent !important;
            border: none !important;
            border-radius: 0.55rem;
            padding: 0.6rem 1.4rem;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            white-space: nowrap;
            box-shadow: none;
            outline: none !important;
            -webkit-appearance: none;
            appearance: none;
        }
        .content-tabs-pills .nav-link i {
            font-size: 0.9rem;
        }
        .content-tabs-pills .nav-link:hover {
            color: #111 !important;
            background: rgba(255,255,255,0.65) !important;
        }
        .content-tabs-pills .nav-link.active {
            color: #fff !important;
            background: var(--bs-mcaa) !important;
            box-shadow: none !important;
            outline: none !important;
        }
        /* Per-tab accent colors when active */
        #podcast-tab.active {
            background: #111 !important;
            box-shadow: none !important;
        }
        #digest-tab.active {
            background: #4472C4 !important;
            box-shadow: none !important;
        }
        #stories-tab.active {
            background: #1e2329 !important;
            box-shadow: none !important;
        }
        #socials-tab.active {
            background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
            box-shadow: none !important;
        }
        #socials-tab.active .pill-new-badge,
        #podcast-tab.active .pill-new-badge {
            background: rgba(255,255,255,0.25);
            color: #fff;
        }
        .pill-new-badge {
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.12em;
            box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 2px 6px rgba(233,29,45,0.35);
            text-transform: uppercase;
            background: #4472C4;
            color: #fff;
            padding: 0.15rem 0.4rem;
            border-radius: 2rem;
            margin-left: 0.15rem;
            vertical-align: middle;
            line-height: 1;
        }
        .content-tabs-pills .nav-link.active .pill-new-badge {
            background: #fff;
            color: var(--bs-mcaa);
        }
        #digest-tab.active .pill-new-badge {
            background: #fff;
            color: #4472C4;
        }

        /* Tab content wrapper custom crossfade */
        .content-tabs-body {
            width: 100%;
        }
        .content-tabs-body .tab-pane {
            width: 100%;
            display: none;
        }
        .content-tabs-body .tab-pane.active {
            display: block;
            animation: tabFadeIn 0.4s ease both;
        }
        @keyframes tabFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Magazine tab */
        /* Shared panel height */
        .magazine-panel,
        .podcast-panel,
        .socials-panel {
            min-height: 540px;
            box-sizing: border-box;
        }

        .magazine-panel {
            position: relative;
            background-size: cover;
            background-position: center;
            padding: 4rem 0;
            display: flex;
            align-items: center;
        }
        .magazine-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.35) 100%);
        }
        .magazine-panel .container { position: relative; z-index: 1; }
        .magazine-panel .container.container-wide {
            max-width: 1120px;
            margin: 0 auto;
            padding-inline: clamp(1.5rem, 4vw, 3rem);
        }
        @media (max-width: 575.98px) {
            .magazine-panel .container.container-wide {
                padding-inline: clamp(1rem, 6vw, 1.5rem);
            }
        }

        .magazine-cover-wrap {
            perspective: 800px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .magazine-cover-inner {
            position: relative;
            display: inline-block;
            transform: rotateY(-6deg) rotateX(2deg);
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .magazine-cover-wrap:hover .magazine-cover-inner {
            transform: rotateY(0deg) rotateX(0deg) scale(1.03);
        }
        .magazine-cover-img {
            max-width: 260px;
            width: 100%;
            border-radius: 0.5rem;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
        }
        .magazine-issue-badge {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--bs-mcaa);
            color: #fff;
            font-size: 0.6rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.35rem 0.7rem;
            border-radius: 2rem;
            box-shadow: 0 4px 12px rgba(233,29,45,0.4);
        }

        /* Magazine info all left-aligned */
        .magazine-info {
            padding-left: 1rem;
        }
        .magazine-panel .mag-logo {
            display: block;
            width: 100%;
            max-width: 360px;
            height: auto;
            margin-bottom: 0.25rem;
        }
        .magazine-info h4 {
            font-size: clamp(2rem, 3.5vw, 2.8rem);
            font-weight: 400;
            color: #fff;
            line-height: 1.1;
            margin-bottom: 1rem;
        }
        .magazine-info .mag-description {
            color: rgba(255,255,255,0.75);
            font-size: 0.95rem;
            line-height: 1.75;
            max-width: 460px;
            margin-bottom: 1.5rem;
        }
        .magazine-info .mag-stats {
            display: flex;
            gap: 2rem;
            margin-bottom: 1.75rem;
        }
        .mag-stat {
            text-align: left;
        }
        .mag-stat-value {
            display: block;
            font-size: 1.6rem;
            font-weight: 800;
            color: #fff;
            line-height: 1.2;
        }
        .mag-stat-label {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(255,255,255,0.5);
        }
        .magazine-btns {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        .magazine-btns .btn-mcaa-primary {
            background: var(--bs-mcaa);
            color: #fff;
            border: none;
            padding: 0.65rem 1.75rem;
            font-weight: 700;
            font-size: 0.85rem;
            letter-spacing: 0.04em;
            border-radius: 0.375rem;
            transition: background 0.2s, transform 0.15s;
        }
        .magazine-btns .btn-mcaa-primary:hover {
            background: var(--bs-mcaa-dark, #c1171b);
            transform: translateY(-2px);
        }
        .magazine-btns .btn-outline-light {
            padding: 0.65rem 1.25rem;
            font-weight: 600;
            font-size: 0.85rem;
            border-radius: 0.375rem;
        }

        /* Podcast tab */
        /* Podcast info left-aligned */
        .podcast-info {
            padding-left: 1rem;
        }
        .podcast-panel .pod-logo {
            display: block;
            max-width: 160px;
            height: auto;
            margin-bottom: 0;
        }

        .podcast-panel {
            --podcast-bars-front-size: 32rem 11rem;
            --podcast-bars-front-shift: -32rem;
            position: relative;
            background: #111;
            display: flex;
            align-items: center;
            overflow: hidden;
            padding: 4rem 0;
            isolation: isolate;
        }
        .podcast-panel .container.container-wide {
            max-width: 1120px;
            margin: 0 auto;
            padding-inline: clamp(1.5rem, 4vw, 3rem);
        }
        .podcast-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 20% 50%, rgba(233,29,45,0.08) 0%, transparent 60%),
                        radial-gradient(ellipse at 80% 80%, rgba(233,29,45,0.05) 0%, transparent 50%);
            pointer-events: none;
        }
        .podcast-panel::after {
            content: '';
            position: absolute;
            left: 28%;
            right: -8%;
            top: 16%;
            bottom: 14%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 608 220' fill='none'%3E%3Crect x='10' y='92' width='12' height='36' rx='6' fill='%23e91d2d' fill-opacity='.24'/%3E%3Crect x='42' y='58' width='12' height='104' rx='6' fill='%23e91d2d' fill-opacity='.36'/%3E%3Crect x='74' y='114' width='12' height='48' rx='6' fill='%23e91d2d' fill-opacity='.2'/%3E%3Crect x='106' y='34' width='12' height='156' rx='6' fill='%23e91d2d' fill-opacity='.42'/%3E%3Crect x='138' y='80' width='12' height='64' rx='6' fill='%23e91d2d' fill-opacity='.28'/%3E%3Crect x='170' y='102' width='12' height='28' rx='6' fill='%23e91d2d' fill-opacity='.18'/%3E%3Crect x='202' y='54' width='12' height='112' rx='6' fill='%23e91d2d' fill-opacity='.34'/%3E%3Crect x='234' y='88' width='12' height='54' rx='6' fill='%23e91d2d' fill-opacity='.22'/%3E%3Crect x='266' y='24' width='12' height='172' rx='6' fill='%23e91d2d' fill-opacity='.46'/%3E%3Crect x='298' y='72' width='12' height='78' rx='6' fill='%23e91d2d' fill-opacity='.26'/%3E%3Crect x='330' y='106' width='12' height='36' rx='6' fill='%23e91d2d' fill-opacity='.18'/%3E%3Crect x='362' y='44' width='12' height='128' rx='6' fill='%23e91d2d' fill-opacity='.38'/%3E%3Crect x='394' y='84' width='12' height='60' rx='6' fill='%23e91d2d' fill-opacity='.24'/%3E%3Crect x='426' y='116' width='12' height='30' rx='6' fill='%23e91d2d' fill-opacity='.16'/%3E%3Crect x='458' y='30' width='12' height='160' rx='6' fill='%23e91d2d' fill-opacity='.44'/%3E%3Crect x='490' y='94' width='12' height='50' rx='6' fill='%23e91d2d' fill-opacity='.22'/%3E%3Crect x='522' y='64' width='12' height='96' rx='6' fill='%23e91d2d' fill-opacity='.32'/%3E%3Crect x='554' y='108' width='12' height='34' rx='6' fill='%23e91d2d' fill-opacity='.18'/%3E%3Crect x='586' y='48' width='12' height='120' rx='6' fill='%23e91d2d' fill-opacity='.36'/%3E%3C/svg%3E");
            background-repeat: repeat-x;
            background-size: var(--podcast-bars-front-size);
            background-position: 0 54%;
            opacity: 0.34;
            pointer-events: none;
            filter: drop-shadow(0 0 14px rgba(233,29,45,0.06));
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
            will-change: background-position;
            animation: podcastBarsDrift 34s linear infinite;
        }
        .podcast-panel .container { position: relative; z-index: 1; }

        @keyframes podcastBarsDrift {
            0% {
                background-position: 0 54%;
            }
            100% {
                background-position: var(--podcast-bars-front-shift) 54%;
            }
        }
        @media (max-width: 575.98px) {
            .podcast-panel .container.container-wide {
                padding-inline: clamp(1rem, 6vw, 1.5rem);
            }
        }

        .podcast-video-wrap {
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
            border: 1px solid rgba(255,255,255,0.08);
        }

        .podcast-info .podcast-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--bs-mcaa);
            border: 1px solid rgba(233,29,45,0.3);
            border-radius: 2rem;
            padding: 0.3rem 0.8rem;
            margin-bottom: 1rem;
        }
        .podcast-info .podcast-badge i { font-size: 0.7rem; }
        .podcast-info h4 {
            color: #fff;
            font-size: clamp(1.8rem, 3vw, 2.4rem);
            font-weight: 400;
            line-height: 1.15;
            margin-bottom: 0.75rem;
        }
        .podcast-info .podcast-desc {
            color: rgba(255,255,255,0.65);
            font-size: 0.92rem;
            line-height: 1.7;
            margin-bottom: 1.5rem;
            max-width: 420px;
        }
        .podcast-platforms {
            display: flex;
            gap: 0.6rem;
            flex-wrap: wrap;
        }
        .podcast-platform-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.55rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.78rem;
            font-weight: 700;
            text-decoration: none;
            transition: transform 0.2s, box-shadow 0.2s;
            border: none;
        }
        .podcast-platform-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }
        .podcast-platform-btn i { font-size: 1rem; }
        .podcast-platform-btn.spotify { background: #1DB954; color: #fff; }
        .podcast-platform-btn.apple { background: #a855f7; color: #fff; }
        .podcast-platform-btn.youtube { background: #FF0000; color: #fff; }

        /* Social Media tab */
        .socials-panel {
            background: #fff;
            padding: 4rem 0;
            display: flex;
            align-items: center;
        }
        .socials-panel .container.container-wide {
            max-width: 1120px;
            margin: 0 auto;
            padding-inline: clamp(1.5rem, 4vw, 3rem);
        }
        .socials-panel .row {
            --bs-gutter-x: clamp(2rem, 4vw, 4rem);
        }
        .socials-intro {
            text-align: left;
            margin-bottom: 1.5rem;
            max-width: 30rem;
        }
        .socials-intro h4 {
            font-size: clamp(1.4rem, 2.5vw, 1.8rem);
            font-weight: 400;
            color: #111;
            margin-bottom: 0.35rem;
        }
        .socials-intro p {
            color: #6b7280;
            font-size: 0.88rem;
            max-width: none;
            margin: 0;
        }
        .social-cards-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
        @media (max-width: 575.98px) {
            .socials-panel .container.container-wide {
                padding-inline: clamp(1rem, 6vw, 1.5rem);
            }
            .social-cards-grid { grid-template-columns: 1fr; }
        }
        .social-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 1rem;
            padding: 1.75rem 1.25rem;
            text-align: center;
            text-decoration: none;
            color: inherit;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }
        .social-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.1);
            border-color: transparent;
            color: inherit;
            text-decoration: none;
        }
        .social-card-icon {
            width: 52px;
            height: 52px;
            border-radius: 0.85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: #fff;
            margin-bottom: 0.35rem;
            transition: transform 0.3s;
        }
        .social-card:hover .social-card-icon {
            transform: scale(1.1);
        }
        .social-card-icon.facebook { background: #1877F2; }
        .social-card-icon.instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
        .social-card-icon.linkedin { background: #0A66C2; }
        .social-card-icon.youtube { background: #FF0000; }

        .social-card-name {
            font-size: 0.85rem;
            font-weight: 700;
            color: #111;
        }
        .social-card-handle {
            font-size: 0.72rem;
            color: #9ca3af;
        }
        .social-card-follow {
            display: inline-block;
            margin-top: 0.25rem;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--bs-mcaa);
            transition: color 0.2s;
        }
        .social-card:hover .social-card-follow { color: var(--bs-mcaa-dark, #c1171b); }
        .social-ambient-shell {
            position: relative;
            min-height: 34rem;
            padding: 1rem 1rem 1.15rem;
            border: 1px solid #e5e7eb;
            border-radius: 1.75rem;
            background:
                radial-gradient(circle at top, rgba(193,23,27,0.12), transparent 38%),
                linear-gradient(180deg, #fbfbfc 0%, #f3f4f6 100%);
            overflow: hidden;
            pointer-events: none;
        }
        .social-ambient-shell::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.6), transparent 45%, rgba(17,24,39,0.04));
            pointer-events: none;
        }
        .social-ambient-viewport {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.9rem;
            min-height: 30rem;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
        }
        .social-ambient-lane {
            position: relative;
            min-height: 30rem;
        }
        .social-ambient-lane:nth-child(2) {
            transform: translateY(-1rem);
        }
        .social-ambient-lane.lane-one { --ambient-duration: 30s; }
        .social-ambient-lane.lane-two { --ambient-duration: 36s; }
        .social-ambient-card {
            position: absolute;
            inset-inline: 0;
            top: 50%;
            padding: 1rem 0.95rem;
            border: 1px solid rgba(229,231,235,0.96);
            border-radius: 1.15rem;
            background: rgba(255,255,255,0.9);
            box-shadow: 0 18px 45px rgba(15,23,42,0.08);
            backdrop-filter: blur(8px);
            transform-origin: center center;
            animation: socialAmbientFloat var(--ambient-duration, 20s) linear infinite;
            animation-delay: var(--ambient-delay, 0s);
        }
        .social-ambient-card-head {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.8rem;
        }
        .social-ambient-icon {
            width: 42px;
            height: 42px;
            border-radius: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: #fff;
            flex-shrink: 0;
            box-shadow: inset 0 -10px 18px rgba(0,0,0,0.12);
        }
        .social-ambient-icon.facebook { background: #1877F2; }
        .social-ambient-icon.instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
        .social-ambient-icon.linkedin { background: #0A66C2; }
        .social-ambient-icon.youtube { background: #FF0000; }
        .social-ambient-platform {
            display: block;
            font-size: 0.78rem;
            font-weight: 700;
            color: #111827;
            line-height: 1.2;
        }
        .social-ambient-handle {
            display: block;
            margin-top: 0.08rem;
            font-size: 0.68rem;
            color: #6b7280;
        }
        .social-ambient-card p {
            margin: 0;
            font-size: 0.78rem;
            line-height: 1.55;
            color: #4b5563;
        }
        @keyframes socialAmbientFloat {
            0% {
                transform: translateY(calc(225px - 50%)) scale(0.82);
                opacity: 0;
            }
            12% {
                opacity: 0.3;
            }
            50% {
                transform: translateY(-50%) scale(1.02);
                opacity: 0.95;
            }
            88% {
                opacity: 0.22;
            }
            100% {
                transform: translateY(calc(-225px - 50%)) scale(0.82);
                opacity: 0;
            }
        }
        @media (max-width: 575.98px) {
            .social-ambient-viewport {
                grid-template-columns: 1fr;
                min-height: 22rem;
            }
            .social-ambient-lane {
                min-height: 22rem;
            }
            .social-ambient-lane:nth-child(2) {
                display: none;
            }
            @keyframes socialAmbientFloat {
                0% {
                    transform: translateY(calc(150px - 50%)) scale(0.84);
                    opacity: 0;
                }
                12% {
                    opacity: 0.28;
                }
                50% {
                    transform: translateY(-50%) scale(1.01);
                    opacity: 0.92;
                }
                88% {
                    opacity: 0.2;
                }
                100% {
                    transform: translateY(calc(-150px - 50%)) scale(0.84);
                    opacity: 0;
                }
            }
        }
        @media (max-width: 575.98px) {
            .social-ambient-viewport {
                grid-template-columns: 1fr;
            }
            .social-ambient-lane:nth-child(2) {
                display: none;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .social-ambient-shell {
                display: none;
            }
        }

        /* Daily Digest tab */
        .digest-panel {
            background: #fafbfc;
            padding: 3rem 0 4rem;
            min-height: 540px;
            box-sizing: border-box;
        }
        .digest-panel .container.container-wide {
            max-width: 1120px;
            margin: 0 auto;
            padding-inline: clamp(1.5rem, 4vw, 3rem);
        }
        .digest-masthead-wrap {
            margin-bottom: 2rem;
        }
        .digest-logo {
            display: block;
            max-width: 200px;
            height: auto;
            margin-bottom: 0.75rem;
        }
        .digest-tagline {
            color: #6b7280;
            font-size: 0.88rem;
            line-height: 1.6;
            max-width: 480px;
            margin: 0;
        }
        .digest-feed {
            max-height: 520px;
            overflow-y: auto;
            padding-right: 0.5rem;
            scroll-behavior: smooth;
        }
        .digest-feed::-webkit-scrollbar { width: 4px; }
        .digest-feed::-webkit-scrollbar-track { background: transparent; }
        .digest-feed::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
        .digest-feed::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

        .digest-item {
            padding: 1.25rem 0;
            border-bottom: 1px solid #e5e7eb;
            transition: background 0.2s;
        }
        .digest-item:first-child { padding-top: 0; }
        .digest-item:last-child { border-bottom: none; }
        .digest-item:hover {
            background: rgba(0,0,0,0.015);
        }
        .digest-item-cat {
            display: inline-block;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #4472C4;
            margin-bottom: 0.3rem;
        }
        .digest-item-title {
            font-family: 'Barlow', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            color: #111;
            line-height: 1.35;
            margin: 0 0 0.3rem;
            cursor: pointer;
            transition: color 0.2s;
        }
        .digest-item-title a {
            color: inherit;
            text-decoration: none;
        }
        .digest-item:hover .digest-item-title { color: #4472C4; }
        .digest-item-meta {
            font-size: 0.72rem;
            color: #9ca3af;
            margin: 0 0 0.35rem;
        }
        .digest-item-excerpt {
            font-size: 0.82rem;
            color: #6b7280;
            line-height: 1.6;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Loading spinner */
        .digest-loading {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            padding: 1.5rem 0;
            color: #9ca3af;
            font-size: 0.78rem;
        }
        .digest-loading.visible { display: flex; }
        .digest-spinner {
            width: 18px;
            height: 18px;
            border: 2px solid #e5e7eb;
            border-top-color: #4472C4;
            border-radius: 50%;
            animation: digestSpin 0.7s linear infinite;
        }
        @keyframes digestSpin {
            to { transform: rotate(360deg); }
        }

        /* Sidebar */
        .digest-sidebar {
            position: sticky;
            top: 2rem;
        }
        .digest-subscribe-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            padding: 1.5rem;
            margin-bottom: 1.25rem;
        }
        .digest-subscribe-card h5 {
            font-family: 'Barlow', sans-serif;
            font-size: 1.05rem;
            font-weight: 700;
            color: #111;
            margin: 0 0 0.4rem;
        }
        .digest-subscribe-card p {
            font-size: 0.8rem;
            color: #6b7280;
            margin: 0 0 1rem;
            line-height: 1.5;
        }
        .digest-subscribe-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .btn-digest-subscribe,
        .btn-digest-subscribe-alt {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.78rem;
            font-weight: 700;
            padding: 0.6rem 1.1rem;
            border-radius: 0.4rem;
            white-space: nowrap;
            text-decoration: none;
            border: 1px solid transparent;
            transition: background 0.2s, color 0.2s, transform 0.15s, border-color 0.2s;
        }
        .btn-digest-subscribe {
            background: #4472C4;
            color: #fff;
            border-color: #4472C4;
        }
        .btn-digest-subscribe:hover {
            background: #365fa0;
            border-color: #365fa0;
            color: #fff;
            transform: translateY(-1px);
        }
        .btn-digest-subscribe-alt {
            background: #fff;
            color: #4472C4;
            border-color: #c6d4ec;
        }
        .btn-digest-subscribe-alt:hover {
            background: #eef3fb;
            color: #365fa0;
            border-color: #4472C4;
            transform: translateY(-1px);
        }

        @media (max-width: 991.98px) {
            .digest-panel { padding: 2.5rem 0 3rem; }
            .digest-sidebar { position: static; margin-top: 2rem; }
        }
        @media (max-width: 767.98px) {
            .digest-feed { max-height: 400px; }
        }
        @media (max-width: 575.98px) {
            .digest-panel .container.container-wide {
                padding-inline: clamp(1rem, 6vw, 1.5rem);
            }
        }

        /* Content tabs responsive */
        @media (max-width: 991.98px) {
            #content-tabs-section { padding: 3rem 0 0; }
            .content-tabs-pills {
                flex-wrap: wrap;
                justify-content: center;
                border-radius: 0.75rem;
            }
            .content-tabs-pills .nav-link {
                font-size: 0.72rem;
                padding: 0.5rem 1rem;
            }
            .magazine-cover-img { max-width: 200px; }
            .magazine-info { padding-left: 0; }
            .magazine-info .mag-stats { gap: 1.25rem; }
            .mag-stat-value { font-size: 1.3rem; }
            .podcast-info { padding-left: 0; }
        }
        @media (max-width: 767.98px) {
            .magazine-info { text-align: center; margin-top: 2rem; }
            .magazine-panel .mag-logo { margin-left: auto; margin-right: auto; }
            .magazine-info .mag-description { margin-left: auto; margin-right: auto; }
            .magazine-info .mag-stats { justify-content: center; }
            .magazine-btns { justify-content: center; }
            .podcast-panel {
                --podcast-bars-front-size: 24rem 8.5rem;
                --podcast-bars-front-shift: -24rem;
            }
            .podcast-info { text-align: center; margin-top: 2rem; }
            .podcast-panel .pod-logo { margin-left: auto; margin-right: auto; }
            .podcast-panel::after {
                left: 6%;
                right: -18%;
                top: 24%;
                bottom: 10%;
                background-position: 0 54%;
            }
            .podcast-info .podcast-desc { margin-left: auto; margin-right: auto; }
            .podcast-platforms { justify-content: center; }
        }
        @media (prefers-reduced-motion: reduce) {
            .podcast-panel::after {
                animation: none;
                background-position: -8rem 54%;
            }
        }

        /* BSP partner cards */
        .bsp-intro {
            max-width: 640px;
            margin: 0 auto 0;
            text-align: center;
        }
        .bsp-intro img { max-width: 220px; margin-bottom: 1.25rem; }
        .bsp-intro p  { color: #555; font-size: 0.95rem; }

        /* Stat strip */
        .bsp-stats {
            display: flex;
            justify-content: center;
            gap: 0;
            margin: 2.5rem auto 3rem;
            background: var(--bs-black-cons);
            border-radius: 14px;
            max-width: 680px;
            overflow: hidden;
        }
        .bsp-stat {
            flex: 1;
            text-align: center;
            padding: 1.5rem 1rem;
        }
        .bsp-stat + .bsp-stat {
            border-left: 1px solid rgba(255,255,255,0.08);
        }
        .bsp-stat-number {
            display: block;
            font-family: 'Bebas Neue', sans-serif;
            font-size: 2.6rem;
            color: var(--bs-mcaa);
            line-height: 1;
        }
        .bsp-stat-label {
            display: block;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            color: #9ca3af;
            margin-top: 0.3rem;
        }

        /* Card grid 4 col full-width */
        .bsp-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.25rem;
        }
        @media (max-width: 991.98px) {
            .bsp-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 575.98px) {
            .bsp-grid { grid-template-columns: 1fr; }
        }

        .bsp-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-top: 3px solid var(--bs-mcaa);
            border-radius: 12px;
            padding: 1.75rem 1.25rem 1.5rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .bsp-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.10);
        }

        /* Logo pill */
        .bsp-card-logo-wrap {
            background: #f4f5f6;
            border-radius: 10px;
            padding: 0.85rem 1.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 130px;
            min-height: 70px;
            margin-bottom: 1rem;
        }
        .bsp-card-logo {
            height: 40px;
            width: auto;
            max-width: 130px;
            object-fit: contain;
        }

        /*
 Membership Benefits asymmetric split layout
 Left: sticky intro block (eyebrow + heading + subhead + CTA).
 Right: 3 horizontal benefit cards stacked vertically.
 Replaces the centered-stack 3-col grid pattern so the section
 reads as deliberately composed rather than template-default.
*/
        /* Huge image display at the top of the member benefits section. */
        .benefits-hero {
            position: relative;
            width: 100%;
            overflow: hidden;
            background: #111;
        }
        .benefits-hero-img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 520px;
            object-fit: cover;
            object-position: center center;
        }
        @media (max-width: 991.98px) {
            .benefits-hero-img { max-height: 360px; }
        }
        /* White photo-credit pill, sits bottom-right on hero/backdrop images. */
        .photo-credit {
            position: absolute;
            right: clamp(0.75rem, 2vw, 1.5rem);
            bottom: clamp(0.75rem, 2vw, 1.5rem);
            z-index: 2;
            background: rgba(255,255,255,0.95);
            color: #1f2937;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            padding: 0.35rem 0.8rem;
            border-radius: 999px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.18);
            pointer-events: none;
        }
        .photo-credit strong { font-weight: 700; color: #111; }
        .benefits-split {
            display: grid;
            grid-template-columns: minmax(280px, 1fr) minmax(0, 1.7fr);
            gap: clamp(2.5rem, 5vw, 5rem);
            align-items: start;
            padding-block: clamp(3rem, 6vw, 5rem);
            padding-inline: clamp(3rem, 12vw, 12rem);
        }
        @media (max-width: 991.98px) {
            .benefits-split {
                grid-template-columns: 1fr;
                gap: 2.5rem;
                padding-block: 3rem;
                padding-inline: clamp(1.25rem, 5vw, 2.5rem);
            }
        }
        .benefits-intro {
            padding-top: 0.5rem;
        }
        @media (min-width: 992px) {
            .benefits-intro {
                position: sticky;
                top: calc(var(--leaderboard-ad-height, 90px) + 180px);
            }
        }
        .benefits-intro .section-eyebrow {
            margin-bottom: 1rem;
        }
        .benefits-intro .section-heading {
            text-align: left;
            font-size: clamp(2rem, 3.2vw, 2.7rem);
            line-height: 1.12;
            margin-bottom: 1rem;
        }
        .benefits-intro .section-subheading {
            text-align: left;
            margin: 0 0 1.75rem;
            max-width: 100%;
            font-size: 1.05rem;
        }
        .benefits-intro-cta {
            display: inline-block;
        }
        @media (max-width: 991.98px) {
            .benefits-intro {
                text-align: center;
            }
            .benefits-intro .section-heading,
            .benefits-intro .section-subheading {
                text-align: center;
            }
        }
        .benefits-cards {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }
        .benefit-card {
            display: grid;
            grid-template-columns: 56px 1fr;
            gap: 1.5rem;
            padding: 1.75rem;
            background: #fff;
            border: 1px solid #eef0f2;
            border-radius: 1rem;
            align-items: start;
            transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.2s ease;
        }
        .benefit-card:hover {
            box-shadow: 0 12px 32px rgba(0,0,0,0.06);
            transform: translateY(-2px);
            border-color: rgba(233,29,45,0.12);
        }
        .benefit-card .bs-icon {
            width: 56px !important;
            height: 56px !important;
            min-width: 56px !important;
            border-radius: 50% !important;
            background: rgba(233, 29, 45, 0.08) !important;
            color: var(--bs-mcaa) !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }
        .benefit-card:hover .bs-icon {
            background: rgba(233, 29, 45, 0.14) !important;
        }
        .benefit-card .bs-icon svg {
            width: 1.4rem;
            height: 1.4rem;
            fill: currentColor;
        }
        .benefit-card-body h5 {
            font-size: 1.2rem;
            font-weight: 800;
            color: #1f2937;
            margin: 0 0 0.5rem;
            letter-spacing: 0.01em;
        }
        .benefit-card-body p {
            font-size: 0.97rem;
            color: #4b5563;
            line-height: 1.62;
            margin: 0;
        }

        /*
 Horizontal padding baseline org-split only. .benefits-split has
 its own larger padding defined above (clamp(3rem, 12vw, 12rem));
 including it here would clobber that with a narrower value.
*/
        .org-split {
            padding-inline: clamp(1rem, 3vw, 2rem);
        }

        /*
 In-section ad columns
 MC-HOME-AD-1 lives in the feature-hero row (next to story text).
 MC-HOME-AD-2 lives in the testimonials row (next to the quote).
 Both match the live homepage pattern ads nestle into existing
 column layouts rather than interrupting the flow with their own
 wrapper sections.
*/
        .feature-hero-ad-col {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .feature-hero-ad-col > div[id^="MC-HOME-AD-"] {
            max-width: 500px;
            min-height: 250px;
        }
        .testimonials-ad-col {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .testimonials-ad-col > div[id^="MC-HOME-AD-"] {
            max-width: 500px;
            min-height: 250px;
        }
        @media (max-width: 991.98px) {
            .feature-hero-ad-col,
            .testimonials-ad-col {
                margin-top: 1.5rem;
            }
        }

        /*
 JOIN button radio-pulse
 Outward-expanding ring on the primary JOIN CTA reads as a live
 "ping" indicator without being as loud as a solid flashing glow.
 Scoped to the nav so it doesn't paint on other btn-mcaa.animate-glow
 instances elsewhere on the page.
*/
        header.sticky-navigation .btn-mcaa.animate-glow {
            position: relative;
            isolation: isolate;
        }
        header.sticky-navigation .btn-mcaa.animate-glow::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            box-shadow: 0 0 0 0 rgba(233, 29, 45, 0.55);
            animation: join-radio-pulse 2s cubic-bezier(0.2, 0.9, 0.3, 1) infinite;
            z-index: -1;
        }
        @keyframes join-radio-pulse {
            0%   { box-shadow: 0 0 0 0 rgba(233, 29, 45, 0.55); }
            70%  { box-shadow: 0 0 0 14px rgba(233, 29, 45, 0); }
            100% { box-shadow: 0 0 0 0 rgba(233, 29, 45, 0); }
        }
        @media (prefers-reduced-motion: reduce) {
            header.sticky-navigation .btn-mcaa.animate-glow::after {
                animation: none;
            }
        }

        /*
 Business Savings matches live homepage pattern
 Red full-width title bar split row (sticky BSP intro left,
 Bootstrap accordion right). Single-open-at-a-time accordion.
*/
        .bsp-title-bar {
            background: var(--bs-mcaa);
            color: #fff;
            text-align: center;
            font-size: clamp(1.5rem, 3vw, 2.1rem);
            font-weight: 700;
            padding: 1.25rem 1.5rem;
            margin: 0;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .bsp-split-v2 {
            display: grid;
            grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr);
            gap: clamp(2rem, 5vw, 4rem);
            align-items: start;
            padding-block: clamp(2.5rem, 5vw, 4rem);
            padding-inline: clamp(1rem, 3vw, 2rem);
        }
        @media (max-width: 991.98px) {
            .bsp-split-v2 { grid-template-columns: 1fr; gap: 2rem; }
        }
        .bsp-intro-sticky {
            text-align: left;
        }
        @media (min-width: 992px) {
            .bsp-intro-sticky {
                position: sticky;
                top: calc(var(--leaderboard-ad-height, 90px) + 140px);
            }
        }
        .bsp-intro-logo {
            max-width: 280px;
            width: 100%;
            height: auto;
            margin-bottom: 1.25rem;
        }
        .bsp-intro-sticky h3 {
            font-size: clamp(1.4rem, 2.2vw, 1.75rem);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.01em;
            color: #1f2937;
            margin-bottom: 0.85rem;
        }
        .bsp-intro-sticky p {
            font-size: 1rem;
            line-height: 1.65;
            color: #4b5563;
            max-width: 500px;
            margin-bottom: 1.25rem;
        }
        @media (max-width: 991.98px) {
            .bsp-intro-sticky { text-align: center; }
            .bsp-intro-sticky p { margin-inline: auto; }
        }

        /*
 Accordion column uses Bootstrap .accordion / .accordion-flush and
 just restyles the flush variant for a cleaner look.
*/
        .bsp-accordion-col .accordion-flush .accordion-item {
            border: none;
            border-bottom: 1px solid #e5e7eb;
            background: transparent;
        }
        .bsp-accordion-col .accordion-flush .accordion-item:first-child {
            border-top: 1px solid #e5e7eb;
        }
        .bsp-accordion-col .accordion-button {
            background: transparent;
            border: none;
            padding: 1.25rem 0.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            font-size: 1.15rem;
            font-weight: 500;
            color: #1f2937;
            box-shadow: none !important;
            transition: color 0.15s ease;
        }
        .bsp-accordion-col .accordion-button:not(.collapsed) {
            background: transparent;
            color: var(--bs-mcaa);
        }
        .bsp-accordion-col .accordion-button::after {
            /* keep Bootstrap's default chevron */
            flex-shrink: 0;
        }
        .bsp-acc-title {
            flex: 1 1 auto;
            text-align: left;
        }
        .bsp-acc-title strong {
            color: #1f2937;
            font-weight: 800;
        }
        .bsp-accordion-col .accordion-button:not(.collapsed) .bsp-acc-title strong {
            color: var(--bs-mcaa);
        }
        .bsp-acc-inline-logo {
            max-width: 100px;
            max-height: 44px;
            width: auto;
            height: auto;
            object-fit: contain;
            flex-shrink: 0;
        }
        .bsp-accordion-col .accordion-body {
            padding: 0.25rem 0.5rem 1.75rem;
            color: #4b5563;
        }
        .bsp-accordion-col .accordion-body p {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }
        .bsp-accordion-col .accordion-body .btn-group {
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .bsp-accordion-col .accordion-body .btn-group .btn {
            border-radius: 0.25rem !important;
        }
        .bsp-acc-extra-logos {
            margin: 0.5rem 0 0.85rem;
        }
        .bsp-acc-extra-logos img {
            max-height: 28px;
            opacity: 0.85;
        }
        @media (max-width: 575.98px) {
            .bsp-accordion-col .accordion-button {
                font-size: 1rem;
                gap: 1rem;
                padding: 1rem 0.5rem;
            }
            .bsp-acc-inline-logo {
                max-width: 70px;
                max-height: 32px;
            }
        }

        /*
 Organization Info text-left / stat-panel-right split
 Replaces centered-stack that was reading as plain and
 afterthought-y. Now feels like a dedicated "about panel".
*/
        .org-split {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: clamp(2rem, 5vw, 4.5rem);
            align-items: center;
            padding-block: clamp(2rem, 5vw, 4rem);
            max-width: 1200px;
        }
        @media (max-width: 991.98px) {
            .org-split {
                grid-template-columns: 1fr;
                gap: 2.5rem;
                text-align: center;
            }
        }
        .org-intro {
            text-align: left;
        }
        @media (max-width: 991.98px) {
            .org-intro { text-align: center; }
        }
        .org-intro .org-brand-mark {
            margin-bottom: 1rem;
        }
        .org-intro .org-brand-mark img {
            max-width: 56px;
        }
        .org-intro .section-eyebrow {
            margin-bottom: 0.9rem;
        }
        .org-intro h1 {
            font-size: clamp(1.9rem, 3.2vw, 2.6rem);
            font-weight: 400;
            line-height: 1.12;
            letter-spacing: 0.01em;
            margin-bottom: 1rem;
        }
        .org-intro p {
            font-size: 1.05rem;
            line-height: 1.7;
            color: #4b5563;
            max-width: 560px;
            margin-bottom: 1.75rem;
        }
        @media (max-width: 991.98px) {
            .org-intro p { margin-inline: auto; }
        }
        .org-intro-ctas {
            display: flex;
            gap: 0.85rem;
            flex-wrap: wrap;
        }
        @media (max-width: 991.98px) {
            .org-intro-ctas { justify-content: center; }
        }
        .org-stats-panel {
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 2.25rem 2.5rem;
            background: #fff;
            border: 1px solid #eef0f2;
            border-radius: 1.25rem;
            box-shadow: 0 4px 28px rgba(0,0,0,0.05);
        }
        .org-stats-panel .org-stat {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: baseline;
            gap: 1.25rem;
            padding-block: 1.25rem;
            border-bottom: 1px solid #f3f4f6;
            text-align: left;
        }
        .org-stats-panel .org-stat:first-child { padding-top: 0; }
        .org-stats-panel .org-stat:last-child { border-bottom: none; padding-bottom: 0; }
        .org-stats-panel .org-stat-number {
            font-size: clamp(2.5rem, 3.5vw, 3.25rem);
            font-weight: 800;
            color: var(--bs-mcaa);
            line-height: 1;
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.01em;
        }
        .org-stats-panel .org-stat-label {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.92rem;
            font-weight: 600;
            color: #6b7280;
            letter-spacing: 0.01em;
            line-height: 1.3;
        }

        /* Savings badge */
        .bsp-badge {
            display: inline-block;
            background: #fff3f3;
            color: var(--bs-mcaa);
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            padding: 0.18rem 0.55rem;
            border-radius: 50px;
            border: 1px solid rgba(233,29,45,0.18);
            margin-bottom: 0.65rem;
        }

        .bsp-card-label {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.15rem;
            letter-spacing: 0.06em;
            color: #111;
            margin-bottom: 0.4rem;
        }
        .bsp-card p {
            font-size: 0.84rem;
            color: #666;
            margin: 0;
            line-height: 1.5;
            flex: 1;
        }
        .bsp-card-actions { margin-top: auto; padding-top: 1rem; }
        .bsp-card .bsp-extra-logos {
            display: flex;
            gap: 0.75rem;
            justify-content: center;
            align-items: center;
            margin: 0.6rem 0;
        }
        .bsp-card .bsp-extra-logos img {
            height: 28px;
            width: auto;
            object-fit: contain;
            opacity: 0.8;
        }

        /* Certification section */

        /* Contact section background */
        #contact-info-section .contact-bg {
            background: url('/microsite/brunotest/MasonContractors/assets/img/library.jpg') center / cover no-repeat;
            min-height: 400px;
        }

        /* Chat author arrow icon */
        .chat-author-arrow i { font-size: 0.6rem; }

        /* Inline-style extractions */
        /*
 "container-wide" escapes Bootstrap's .container max-width but still
 caps at a sane width so content doesn't stretch edge-to-edge on
 ultra-wide viewports. Panel-specific overrides below go narrower.
*/
        .container-wide,
        .container-contact {
            width: 100%;
            max-width: 1600px;
            margin-inline: auto;
            padding-inline: clamp(1.25rem, 4vw, 3.5rem);
        }
        /* Org info is a text block; constrain for readable line length. */
        .container-org {
            width: 100%;
            max-width: 900px;
            margin-inline: auto;
            padding-inline: clamp(1.25rem, 4vw, 2.5rem);
        }

        /*
 Section horizontal breathing-room pass
 Sections that use a bare .container-fluid (no .container-wide inside)
 need explicit horizontal padding so content doesn't slam into the
 viewport edges. Scoped to #main-content so the header/footer/other
 CMS-rendered regions are unaffected. Full-bleed sections opt out
 individually below.
*/
        #main-content > section > .container-fluid {
            padding-inline: clamp(1.25rem, 4vw, 3.5rem);
        }
        /*
 Full-bleed opt-outs sections that intentionally hit the edges
 (logo strip, hero imagery, contact-section background image). Every
 other section gets the default padding above.
*/
        #partner-showcase-section > .container-fluid,
        #feature-hero-section .feature-hero-container,
        #contact-info-section > .container-fluid {
            padding-inline: 0 !important;
        }
        /*
 Feature hero carousel: break ONLY the image carousel out to full
 viewport width so the blurred color backdrop fills edge-to-edge.
 The overlay nav (< >), the indicator dots, and the story text
 below all stay within the normal container width.
*/
        #feature-hero-section .feature-hero-carousel {
            width: 100vw;
            max-width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
        }
        /*
 Paint the dominant color directly on the section (and the carousel
 breakout inside it) so the fill is guaranteed to reach the viewport
 edges regardless of what a sibling element's width happens to be.
*/
        #feature-hero-section,
        #feature-hero-section .feature-hero-carousel,
        #feature-hero-section .carousel-inner,
        #feature-hero-section .carousel-item,
        #feature-hero-section .feature-hero-image {
            background-color: var(--hero-fill, #1a1a1a);
            transition: background-color 0.4s ease;
        }
        #membership-benefits-section > .section-header .container,
        #membership-benefits-section > .container,
        #membership-benefits-section .testimonials-section .container,
        #business-savings-section > .section-header .container,
        #business-savings-section > .container-xl,
        #certification-section > .section-header .container,
        #certification-section > .container {
            width: 100%;
            max-width: none;
        }
        .partner-row-bg  { background: #fff; }
        #partner-showcase-section { background: #fff; padding: 1rem 0 0.75rem; border-bottom: 1px solid #f0f0f0; }
        #partner-showcase-section #logoRow { padding-top: 0.4rem; padding-bottom: 0.4rem; gap: 1rem 1.25rem; }
        #partner-showcase-section #logoRow > [class*="col-"] { padding-inline: 0.25rem; }
        #partner-showcase-section #initialAlert { margin-top: 0.5rem !important; }
        /*
 Tablet+ : shrink-to-fit single row instead of wrapping. Prior
 layout would orphan one logo onto a second row at certain
 widths (~900-1100px). flex-wrap: nowrap + flex: 1 1 0 on each
 col gives every logo an equal share of available width;
 max-width: 100% on the image makes each logo scale down within
 its slot rather than overflow. max-height caps growth on very
 wide viewports so logos don't get visually huge.
*/
        @media (min-width: 768px) {
            #partner-showcase-section #logoRow {
                flex-wrap: nowrap !important;
            }
            #partner-showcase-section #logoRow > [class*="col-"] {
                flex: 1 1 0;
                min-width: 0;
            }
            #partner-showcase-section #logoRow .partner-logo-link {
                max-width: 100%;
                height: auto;
                max-height: 50px;
            }
        }
        /*
 Mobile: shrink the partner strip so 10 cornerstone logos don't
 swallow the whole viewport on load. Smaller logos, tighter gaps,
 tighter section padding.
*/
        @media (max-width: 767.98px) {
            #partner-showcase-section { padding: 0.75rem 0 0.5rem; }
            #partner-showcase-section #logoRow {
                padding-top: 0.35rem;
                padding-bottom: 0.35rem;
                gap: 0.9rem 1.25rem;
            }
            .partner-component .logo-large {
                max-height: 40px !important;
                max-width: 80px !important;
            }
            .partner-component .logo-small {
                max-height: 34px !important;
            }
            /*
 Tighten the membership-alert row that sits inside the partner
 section so it doesn't add extra mobile height.
*/
            #partner-showcase-section #initialAlert {
                padding: 0.35rem 0.25rem !important;
                font-size: 0.8rem;
            }
            #partner-showcase-section .partner-alert-inner {
                font-size: 0.8rem;
                gap: 0.35rem !important;
            }
        }
        @media (max-width: 480px) {
            .partner-component .logo-large {
                max-height: 34px !important;
                max-width: 70px !important;
            }
            #partner-showcase-section #logoRow { gap: 0.75rem 1rem; }
        }
        .partner-alert-inner { max-width: 95%; }
        .partner-progress { height: 3px; max-width: 320px; margin: 0.25rem auto 0; border-radius: 2px; }
        #initialProgressBar { transition: width 8s linear; }
        .content-tabs-header { padding-bottom: 1.5rem; border-bottom: none !important; }
        .testimonials-section .container { z-index: 1; }
        #mobileMenu { z-index: 900021 !important; }

        /* Section rhythm / alternating bg */
        #news-module-section { background: #fff; padding-top: 1.5rem; }
        #george-section { border-top: none; }
        #membership-benefits-section { background: #fff; }
        #certification-section { background: #f8f9fa; }
        #contact-info-section { border-top: 1px solid #f0f0f0; }

        /* Masonry Wall */
        .masonry-wall {
            background: var(--bs-black-cons);
            padding: 4rem 0;
            overflow: hidden;
            position: relative;
        }
        .masonry-wall-header {
            text-align: center;
            margin-bottom: 2.5rem;
            position: relative;
            z-index: 2;
        }
        .masonry-wall-header h2 {
            font-size: clamp(2.4rem, 4.5vw, 3.4rem);
            font-weight: 400;
            letter-spacing: 0.02em;
            color: #fff;
            margin: 0 0 0.5rem;
        }
        .masonry-wall-header p {
            color: rgba(255,255,255,0.5);
            font-size: 1rem;
            margin: 0;
        }
        .wall-viewport {
            position: relative;
            /* edge fades */
        }
        .wall-viewport::before,
        .wall-viewport::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 120px;
            z-index: 2;
            pointer-events: none;
        }
        .wall-viewport::before {
            left: 0;
            background: linear-gradient(to right, var(--bs-black-cons) 0%, transparent 100%);
        }
        .wall-viewport::after {
            right: 0;
            background: linear-gradient(to left, var(--bs-black-cons) 0%, transparent 100%);
        }
        .wall-row {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
            will-change: transform;
        }
        .wall-row:nth-child(even) {
            padding-left: 140px; /* brick offset */
        }
        .wall-brick {
            flex: 0 0 280px;
            height: 160px;
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            isolation: isolate;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .wall-brick:hover {
            transform: scale(1.04);
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
            z-index: 3;
        }
        .wall-brick img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            position: relative;
            z-index: 0;
            transition: transform 0.4s ease;
        }
        .wall-brick:hover img {
            transform: scale(1.08);
        }
        .wall-brick-overlay {
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 0.75rem 1rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .wall-brick:hover .wall-brick-overlay {
            opacity: 1;
        }
        .wall-brick-cat {
            display: inline-flex;
            align-self: flex-start;
            align-items: center;
            padding: 0.24rem 0.55rem;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--bs-mcaa) 0%, var(--bs-mcaa-dark, #c1171b) 100%);
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: 0 6px 18px rgba(0,0,0,0.28);
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #fff;
            text-shadow: 0 1px 1px rgba(0,0,0,0.18);
            margin-bottom: 0.2rem;
        }
        .wall-brick-title {
            font-family: 'Barlow', sans-serif;
            font-size: 0.82rem;
            font-weight: 600;
            color: #fff;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .wall-cta {
            text-align: center;
            margin-top: 2rem;
            position: relative;
            z-index: 2;
        }
        /* Reduced motion: no scroll parallax, static layout */
        @media (prefers-reduced-motion: reduce) {
            .wall-row { will-change: auto; }
            .wall-brick-overlay { opacity: 1; }
            .wall-brick, .wall-brick img { transition: none; }
        }
        @media (max-width: 767.98px) {
            .wall-brick { flex: 0 0 200px; height: 120px; }
            .wall-row:nth-child(even) { padding-left: 80px; }
            .wall-viewport::before, .wall-viewport::after { width: 60px; }
        }

        /* Reasons to Join grid */
        .reasons-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.25rem;
            margin: 1.5rem 0 2rem;
            text-align: left;
        }
        .reasons-grid .reason-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }
        .reasons-grid .reason-icon {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            background: var(--bs-mcaa);
            color: #fff;
            font-size: 0.85rem;
        }
        .reasons-grid .reason-text h6 {
            font-family: 'Barlow', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin: 0 0 0.25rem;
            color: #fff;
        }
        .reasons-grid .reason-text p {
            font-size: 0.9rem;
            color: rgba(255,255,255,0.6);
            margin: 0;
            line-height: 1.5;
        }
        @media (max-width: 767.98px) {
            .reasons-grid { grid-template-columns: 1fr; }
        }

        /* Certification promo banner */
        .cert-feature {
            display: flex;
            align-items: center;
            gap: 2.5rem;
            max-width: 960px;
            margin: 0 auto;
        }
        .cert-feature-img {
            flex: 0 0 340px;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
        }
        .cert-feature-img img {
            width: 100%;
            height: 260px;
            object-fit: cover;
            display: block;
        }
        .cert-feature-body h4 {
            font-weight: 400;
            font-size: 1.8rem;
            margin: 0 0 0.5rem;
            color: var(--bs-black-cons);
        }
        .cert-feature-body p {
            color: #4b5563;
            font-size: 0.95rem;
            line-height: 1.7;
            margin: 0 0 0.5rem;
        }
        .cert-feature-body .cert-pricing {
            font-size: 0.85rem;
            color: #6b7280;
            margin: 0 0 1rem;
        }
        .cert-feature-body .cert-pricing strong { color: var(--bs-mcaa); }
        .cert-feature-body .btn { font-weight: 600; }
        @media (max-width: 767.98px) {
            .cert-feature { flex-direction: column; text-align: center; }
            .cert-feature-img { flex: none; width: 100%; }
        }

        /* Organization Info enhanced */
        .org-brand-mark {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 0.75rem;
        }
        .org-brand-mark img {
            height: 60px;
            width: auto;
        }
        .org-stats {
            display: flex;
            gap: 2.5rem;
            justify-content: center;
            margin: 2rem 0;
        }
        .org-stat { text-align: center; }
        .org-stat-number {
            display: block;
            font-size: 2rem;
            font-weight: 800;
            color: var(--bs-mcaa);
            line-height: 1.2;
        }
        .org-stat-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #6b7280;
        }

        /* Back to top strip */
        .back-to-top-strip {
            background: #111;
            padding: 1.25rem 0;
            text-align: center;
        }
        .back-to-top-strip a {
            color: #6b7280;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            text-decoration: none;
            transition: color 0.15s;
        }
        .back-to-top-strip a:hover { color: #fff; }

        /*
 ACCESSIBILITY Skip link, focus, contrast
*/
        .skip-link {
            position: absolute;
            top: -100%;
            left: 1rem;
            z-index: 999999;
            padding: 0.75rem 1.5rem;
            background: var(--bs-mcaa);
            color: #fff;
            font-weight: 700;
            font-size: 0.85rem;
            border-radius: 0 0 0.5rem 0.5rem;
            text-decoration: none;
            transition: top 0.2s;
        }
        .skip-link:focus {
            top: 0;
            outline: 3px solid var(--bs-mcaa);
            outline-offset: 2px;
        }

        /* Global focus-visible ring */
        :focus-visible {
            outline: 2px solid var(--bs-mcaa);
            outline-offset: 2px;
        }
        /* Remove default outline for mouse users */
        :focus:not(:focus-visible) {
            outline: none;
        }
        /* Buttons and links focus ring */
        a:focus-visible,
        button:focus-visible,
        .btn:focus-visible,
        .nav-link:focus-visible {
            outline: 2px solid var(--bs-mcaa);
            outline-offset: 2px;
            box-shadow: none;
        }
        /* Tab pills focus */
        .content-tabs-pills .nav-link:focus-visible {
            outline: none !important;
            box-shadow: none !important;
        }
        .content-tabs-pills .nav-link:focus,
        .content-tabs-pills .nav-link:active,
        .content-tabs-pills .nav-link.active:focus,
        .content-tabs-pills .nav-link.active:focus-visible {
            outline: none !important;
            box-shadow: none !important;
        }
        /* Social cards focus */
        .social-card:focus-visible {
            outline: 2px solid var(--bs-mcaa);
            outline-offset: 2px;
            box-shadow: 0 0 0 4px rgba(233,29,45,0.12);
        }
        /* News headline focus */
        .news-headline-item h3 a:focus-visible {
            outline: 2px solid var(--bs-mcaa);
            outline-offset: 4px;
        }
        /* Carousel control focus */
        .carousel-control-prev:focus-visible,
        .carousel-control-next:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

        /*
 RESPONSIVE Mobile & Tablet polish
*/

        /* Tablet (991px) */
        @media (max-width: 991.98px) {
            /* George section */
            #try-george .george-mockup { margin-top: 2rem; }

            /* Testimonials */
            .testimonials-section .carousel-item .bg-body-tertiary { max-width: 100%; font-size: 0.95rem; padding: 1.5rem !important; }

            /* Contact */
            .contact-overlay { padding: 2rem 1.5rem; }
            .contact-overlay h3 { font-size: 2rem; }

            /* BSP stats */
            .bsp-stats { max-width: 100%; border-radius: 10px; }
            .bsp-stat { padding: 1.25rem 0.5rem; }
            .bsp-stat-number { font-size: 2rem; }
        }

        /* Mobile (767px) */
        @media (max-width: 767.98px) {
            /* Section headers */
            .section-heading { font-size: clamp(1.8rem, 6vw, 2.4rem); }
            .section-subheading { font-size: 0.92rem; }

            /* George mockup */
            .george-bubble { font-size: 0.82rem; padding: 0.65rem 0.9rem; }
            #try-george h2.display-6 { font-size: 1.8rem; }

            /* Testimonials carousel */
            .testimonials-section { padding: 4rem 0; }
            .testimonials-section .carousel-item .bg-body-tertiary { font-size: 0.9rem; line-height: 1.7; padding: 1.25rem !important; }

            /* BSP stats stack */
            .bsp-stats { flex-direction: column; border-radius: 10px; }
            .bsp-stat + .bsp-stat { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }

            /* Organization info */
            .org-stats { gap: 1.5rem; flex-wrap: wrap; }
            .org-stat-number { font-size: 1.6rem; }
            #organization-info-section h1 { font-size: clamp(1.8rem, 5.5vw, 2.4rem); }

            /* Contact */
            .contact-overlay h3 { font-size: 1.6rem; letter-spacing: 0.02em; }
            #contact-info-section .contact-bg { min-height: 320px; }

            /* News module */
            /*
 Mobile: rail + digest stack vertically inside col 3, expanded
 panel shrinks to fit. The rail is already a horizontal grid
 at all widths; only fine-tune spacing here.
*/
            /*
 Chat rail at mobile widths horizontal banner across the
 full column instead of a narrow vertical rail floating in
 otherwise-empty space.
*/
            .chat-author-rail {
                max-width: none;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 0.75rem;
                padding: 0.6rem 0.8rem 0;
            }
            .chat-author-rail-caption {
                flex-direction: row;
                align-items: baseline;
                gap: 0.3rem;
                font-size: 0.78rem;
                margin-top: 0;
            }
            .chat-author-rail-caption > span::after { content: ' '; }
            .chat-author-rail-avatars {
                flex-direction: row;
                gap: 0;
            }
            .chat-author-rail-avatars img {
                width: 28px;
                height: 28px;
                margin-top: 0;
                margin-left: -8px;
            }
            .chat-author-rail-avatars img:first-child { margin-left: 0; }
            .chat-author-rail-chin {
                order: 5;
                margin: 0.55rem -0.8rem 0;
                width: calc(100% + 1.6rem);
            }
            /* Mobile rail is a full-width horizontal banner match it. */
            .chat-author-rail-glow { max-width: none; }
            .chat-author-panel { height: auto; max-height: 500px; }
            .chat-col-digest-feed { max-height: 360px; }
            /* Daily Digest column spacing gets a little tighter on mobile. */
            .news-module-grid--v2 > .is-digest { gap: 1.25rem !important; }
            /* Announcements ticker shorter slides on mobile. */
            .digest-announcement-rail { height: 94px; }
            .digest-announcement { min-height: 94px; padding: 0.6rem 2.5rem 0.6rem 0.85rem; }
            .digest-announcement-title { font-size: 0.88rem; }
            .digest-announcement-rail[data-announce-index="1"] .digest-announcement-track {
                transform: translateY(-94px);
            }
            .news-headlines-scroll { max-height: 320px; }
            .news-headline-item h3 { font-size: 1.3rem; }

            /* Content tabs */
            .content-tabs-pills { gap: 0.15rem; padding: 0.2rem; }
            .content-tabs-pills .nav-link { font-size: 0.65rem; padding: 0.45rem 0.65rem; gap: 0.3rem; }
            .content-tabs-pills .nav-link i { font-size: 0.75rem; }
            .pill-new-badge { font-size: 0.45rem; padding: 0.1rem 0.3rem; }

            /* Social panel mobile */
            .socials-intro h4 { font-size: 1.4rem; }
            .social-card { padding: 1.25rem 1rem; }
            .social-card-icon { width: 40px; height: 40px; font-size: 1.1rem; }

            /* George feature items */
            #try-george .george-feature-item { padding: 0.5rem 0; }
            #try-george .george-feature-item span { font-size: 0.88rem; }
        }

        /* Small phones (480px) */
        @media (max-width: 480px) {
            .mobile-top-bar { padding: 0.5rem 0; }
            .mobile-logo { max-height: 36px; }
            .content-tabs-pills .nav-link { font-size: 0.6rem; padding: 0.4rem 0.5rem; }
            .magazine-cover-img { max-width: 160px; }
            .podcast-video-wrap { border-radius: 0.5rem; }
            .reasons-content { padding: 2rem 1.25rem; }
            .reasons-content h3 { font-size: 2rem; }
            .cert-feature-body h4 { font-size: 1.4rem; }
        }

        /*
 MICRO-INTERACTIONS Cards, stats, icons
*/

        /* Stat number pop on count-up */
        .bsp-stat-number,
        .org-stat-number {
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .bsp-stat:hover .bsp-stat-number,
        .org-stat:hover .org-stat-number {
            transform: scale(1.08);
        }

        /* BSP card icon lift */
        .bsp-card .bsp-card-logo-wrap {
            transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s;
        }
        .bsp-card:hover .bsp-card-logo-wrap {
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.06);
        }

        /* BSP badge shimmer on card hover */
        .bsp-badge {
            position: relative;
            overflow: hidden;
        }
        .bsp-badge::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s ease;
        }
        .bsp-card:hover .bsp-badge::after {
            left: 100%;
        }

        /* Benefit / cert card icon pulse on hover */
        #membership-benefits-section .bs-icon-primary,
        #certification-section .bs-icon-primary {
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
        }
        #membership-benefits-section .col > div:hover .bs-icon-primary,
        #certification-section .col > div:hover .bs-icon-primary {
            transform: scale(1.1);
            box-shadow: 0 4px 14px rgba(233,29,45,0.2);
        }

        /* George CTA button glow pulse */
        .btn-george {
            position: relative;
        }
        .btn-george::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            background: var(--george-yellow);
            opacity: 0;
            z-index: -1;
            filter: blur(12px);
            transition: opacity 0.3s;
        }
        .btn-george:hover::after {
            opacity: 0.4;
        }

        /* Contact icon link subtle scale */
        .contact-icon-link {
            transition: background 0.2s, border-color 0.2s, transform 0.2s;
        }
        .contact-icon-link:hover {
            transform: scale(1.1);
        }

        /* Reasons-to-join icon rotate on hover */
        .reasons-grid .reason-icon {
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
        }
        .reasons-grid .reason-item:hover .reason-icon {
            transform: rotate(-8deg) scale(1.08);
        }

        /*
 REDUCED MOTION Accessibility
*/
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
            .carousel-item { transition: none; }
            [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
        }

    

/* ===================== HEADER OVERRIDES (was row 49873 inline) ===================== */

        /* Cloud mode */
        :root { --leaderboard-ad-height: 90px; }

        /*
 Auth-state visibility
 Default render = anonymous. Signed-in chrome (Dashboard button,
 greeting) is hidden by default and revealed when the
 UserContext fetch flips html.is-logged-in. !important wins over
 Bootstrap's display utilities (e.g. d-none / d-lg-block) which
 we still use on the same elements for breakpoint-specific
 hiding.
*/
        [data-auth-show="signedin"] { display: none !important; }
        html.is-logged-in [data-auth-show="anon"]     { display: none !important; }
        html.is-logged-in [data-auth-show="signedin"] { display: revert !important; }
        .auth-greeting {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            font-size: 0.85rem;
            color: #6b7280;
            margin-right: 0.4rem;
            white-space: nowrap;
        }
        .auth-greeting [data-user-firstname] {
            font-weight: 600;
            color: #1f2937;
        }

        /* Base */
        /*
 `overflow-x: clip` (not hidden/auto) kills horizontal scrollbars
 caused by Bootstrap's negative .row margins without establishing a
 scroll container so position: sticky on descendants still works.
 Difference between platforms: macOS overlay scrollbars hide the
 bleed, Windows fixed-width scrollbars expose it clip normalizes
 both.
*/
        html, body { overflow-x: clip !important; height: auto !important; }
        html {
            scroll-behavior: smooth;
            /*
 Keep in-page anchors + back-to-top scrolls from landing behind
 the sticky leaderboard + nav stack. Desktop reserves the full
 two-tier nav (~200px); mobile drops to single-tier.
*/
            scroll-padding-top: calc(var(--leaderboard-ad-height, 90px) + 210px);
        }
        @media (max-width: 991.98px) {
            html { scroll-padding-top: calc(var(--leaderboard-ad-height, 90px) + 100px); }
        }
        body {
            font-size: 1rem;
            line-height: 1.7;
        }

        /* Navigation */
        /*
 Two-tier sticky stack (leaderboard + nav)
 Both pin as you scroll. Leaderboard sticks at top:0. Nav sticks at
 top:<leaderboard height> directly below the leaderboard so
 they stack visually instead of overlapping. JS keeps
 --leaderboard-ad-height in sync with the real ad height (90px for
 a standard banner, 250px for a super-leaderboard).
 Also need html/body overflow-x: visible because brunotest's
 style.compiled.css sets overflow-x: auto on them, which silently
 breaks every position: sticky descendant.
*/
        #leaderboard_div.top-leaderboard-container {
            position: -webkit-sticky !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 90001 !important;
            background: #fff;
            width: 100%;
            text-align: center;
            min-height: var(--leaderboard-ad-height, 90px);
            border-bottom: 1px solid #f0f0f0;
        }
        /*
 Leaderboard ads off on mobile reclaims 90250px of vertical
 real estate and lets the nav sit flush at the top.
*/
        @media (max-width: 767.98px) {
            #leaderboard_div.top-leaderboard-container,
            .bottom-leaderboard-ad,
            #MC-HOME-BOTTOM-AUTO-AD {
                display: none !important;
            }
            /* With the top leaderboard gone the nav can pin right at top:0. */
            header.sticky-navigation { top: 0 !important; }
            :root { --leaderboard-ad-height: 0px; }
            /*
 Some mobile browsers (iOS Safari especially) treat position:
 sticky inside a <form> ancestor inconsistently on first paint,
 which can leave the cornerstone partner strip covered by the
 nav at load. Swap the nav to position: fixed on mobile and
 pad the body to reserve the exact nav height underneath.
*/
            header.sticky-navigation {
                position: fixed !important;
                left: 0;
                right: 0;
            }
            body { padding-top: var(--mobile-nav-height, 72px); }
        }

        header.sticky-navigation {
            position: -webkit-sticky !important;
            position: sticky !important;
            top: var(--leaderboard-ad-height, 90px) !important;
            z-index: 90000 !important;
            width: 100%;
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
            /*
 Composite hint keeps the sticky nav on its own GPU layer so
 it doesn't force a paint of everything behind it on every
 scroll frame.
*/
            will-change: transform;
            transform: translateZ(0);
        }

        /*
 Compact / condensed nav on scroll
 When .sticky-navigation has .is-compact applied (added by JS when
 scrolled past threshold), the top-bar collapses to zero height and
 the second-tier absorbs the logo + quick-links + utility buttons
 into a single row. Smooth transitions on collapse.
*/
        header.sticky-navigation .top-bar {
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.22s ease, padding 0.3s ease;
            max-height: 120px;
        }
        header.sticky-navigation.is-compact .top-bar {
            max-height: 0;
            opacity: 0;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            border: 0 !important;
        }
        /*
 In compact mode, swap the solid-white bar for a vertical fade
 solid at the top, still solid through the middle where the nav
 items sit, fading to nearly transparent at the bottom edge so it
 blends into the scrolling content. Backdrop blur adds a glassy
 read against whatever scrolls underneath.
*/
        header.sticky-navigation.is-compact {
            /*
 backdrop-filter removed too expensive during scroll and was
 the main source of stutter on Chromium/Firefox. The gradient
 itself (solid top, fade at the bottom) reads cleanly without
 the frost.
*/
            background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 1) 62%,
                rgba(255, 255, 255, 0.88) 85%,
                rgba(255, 255, 255, 0.25) 100%
            ) !important;
            border-bottom: 0 !important;
            box-shadow: none;
        }
        /*
 Give the second-tier row room to breathe, especially in compact
 mode where it's the only row showing.
*/
        .second-tier {
            padding-block: 0.5rem;
        }
        header.sticky-navigation.is-compact .second-tier {
            padding-block: 0.75rem;
        }

        /*
 Compact logo hidden by default, revealed in compact mode on the
 far left of the second-tier.
*/
        .second-tier .tier2-logo {
            display: none;
            align-items: center;
            flex-shrink: 0;
            padding: 0.25rem 0;
            margin-right: 0.85rem;
            transition: opacity 0.2s ease;
        }
        .second-tier .tier2-logo img {
            height: 34px;
            width: auto;
            display: block;
        }
        header.sticky-navigation.is-compact .second-tier .tier2-logo {
            display: flex;
        }

        /*
 Partner logos bump the shrunk size
 style.compiled.css sets .partner-component .logo-small to 40px;
 override to a larger size so the cornerstone logos stay readable
 even after the partner-showcase collapse.
*/
        .partner-component .logo-small {
            max-height: 58px !important;
        }

        /*
 Disable the legacy logo-shrink on scroll
 nav-interactions.js adds a `.shrunk` class to .logo-full around
 scrollY=70 (exit at 30). That 40px hysteresis gap is tight enough
 that fast-flick scrolls visibly pulse the logo between 80px and
 40px, and the class-driven transition can flicker near the
 threshold. We already collapse the whole top-bar in compact mode
 (at scrollY=210), so the shrink step isn't needed neutralize it
 by making .shrunk render identically to the base logo so the class
 toggle is a no-op visually. Same for mobile.
*/
        .logo-full,
        .logo-full.shrunk {
            height: 80px !important;
            transform: none !important;
            transition: none !important;
        }
        .mobile-logo,
        .mobile-logo.shrunk {
            transform: none !important;
            transition: none !important;
        }
        /*
 Likewise keep the top-bar padding constant don't squish on
 .scrolled (which is also added by nav-interactions.js).
*/
        .top-bar,
        .top-bar.scrolled {
            padding-top: inherit;
            padding-bottom: inherit;
        }

        /* Hide the ticker in compact mode so the row doesn't blow out width. */
        header.sticky-navigation.is-compact .second-tier .news-ticker-container {
            display: none !important;
        }

        /* Compact extras quick-links + utility group on the right. */
        .second-tier .tier2-compact-extras {
            display: none;
            align-items: center;
            gap: 0.75rem;
            margin-left: auto;
        }
        header.sticky-navigation.is-compact .second-tier .tier2-compact-extras {
            display: flex;
        }
        .tier2-quick-links {
            display: flex;
            gap: 0.35rem;
            align-items: center;
        }
        .tier2-quick-links .btn {
            font-size: 0.72rem;
            padding: 0.3rem 0.65rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .tier2-utility {
            display: flex;
            gap: 0.4rem;
            align-items: center;
        }
        .tier2-utility .btn {
            font-size: 0.72rem;
            padding: 0.6rem 0.6rem;
            white-space: nowrap;
        }
        .tier2-utility .tier2-search {
            padding: 0.35rem 0.55rem;
        }
        /* Tighten the primary-nav-bar gap in compact mode so all items fit */
        header.sticky-navigation.is-compact .second-tier .primary-nav-bar .nav-link {
            padding: 0.55rem 0.65rem !important;
            font-size: 0.88rem !important;
        }
        /*
 When too narrow for all items, hide the "Partner" quick link first,
 then Buyer's Guide keeps Find a Mason visible as highest-priority.
*/
        @media (max-width: 1450px) {
            header.sticky-navigation.is-compact .tier2-quick-links .btn:nth-child(3) { display: none; }
        }
        @media (max-width: 1280px) {
            header.sticky-navigation.is-compact .tier2-quick-links .btn:nth-child(2) { display: none; }
        }

        /*
 Cart trigger button + mini-cart drawer
 Trigger lives in both the desktop top bar (.cart-trigger) and the
 mobile top bar (.cart-trigger--mobile). Clicking opens #cartDrawer
 (Bootstrap offcanvas) with current cart summary.
*/
        .cart-trigger {
            position: relative;
            padding: 0.35rem 0.65rem !important;
            border: 1px solid #e5e7eb !important;
            background: #fff !important;
            color: #1f2937 !important;
        }
        .cart-trigger:hover,
        .cart-trigger:focus {
            background: #f3f4f6 !important;
            color: var(--bs-mcaa) !important;
        }
        .cart-trigger .fa-shopping-cart { font-size: 0.95rem; }
        .cart-trigger-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            min-width: 15px;
            height: 15px;
            padding: 0 3px;
            background: var(--bs-mcaa);
            color: #fff !important;
            font-size: 0.58rem;
            font-weight: 700;
            line-height: 15px;
            text-align: center;
            border-radius: 7.5px;
            box-shadow: 0 0 0 1.5px #fff;
            box-sizing: border-box;
            pointer-events: none;
        }
        .cart-trigger-badge[data-cart-count="0"] { display: none; }

        /* Drawer shell */
        .cart-drawer {
            width: min(420px, 92vw) !important;
            display: flex;
            flex-direction: column;
            /*
 Leaderboard is z-index:90001, nav is 90000. Drawer must sit
 above both (and its backdrop above them too).
*/
            z-index: 100001 !important;
        }
        .offcanvas-backdrop {
            z-index: 100000 !important;
        }
        .cart-drawer-header {
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
            padding: 1.25rem 1.5rem 1rem;
            align-items: flex-start;
        }
        .cart-drawer-title {
            font-weight: 800;
            font-size: 1.15rem;
            color: #1f2937;
            margin: 0;
            letter-spacing: 0.01em;
        }
        .cart-drawer-title .fa-shopping-cart {
            color: var(--bs-mcaa);
            font-size: 1rem;
        }
        .cart-drawer-subtitle {
            font-size: 0.8rem;
            color: #6b7280;
            margin-top: 0.15rem;
            letter-spacing: 0.02em;
        }
        .cart-drawer-body {
            padding: 0.5rem 1.5rem;
            flex: 1 1 auto;
            overflow-y: auto;
        }

        /* Drawer items */
        .cart-drawer-item {
            display: grid;
            grid-template-columns: 72px 1fr auto;
            gap: 0.75rem;
            padding: 1rem 0;
            border-bottom: 1px solid #f3f4f6;
            align-items: start;
        }
        .cart-drawer-item:last-child { border-bottom: none; }
        .cart-drawer-item-thumb {
            width: 72px;
            height: 72px;
            border-radius: 6px;
            overflow: hidden;
            background: #f3f4f6;
            display: block;
            border: 1px solid #eaeaea;
        }
        .cart-drawer-item-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .cart-drawer-item-info {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }
        .cart-drawer-item-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: #1f2937;
            text-decoration: none;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .cart-drawer-item-title:hover { color: var(--bs-mcaa); }
        .cart-drawer-item-meta {
            font-size: 0.7rem;
            color: #6b7280;
            margin: 0;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            font-weight: 600;
        }
        .cart-drawer-item-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-top: 0.15rem;
        }
        .cart-drawer-qty {
            display: inline-flex;
            align-items: center;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
        }
        .cart-drawer-qty-btn {
            appearance: none;
            background: transparent;
            border: none;
            width: 26px;
            height: 26px;
            font-size: 0.95rem;
            font-weight: 600;
            color: #4b5563;
            cursor: pointer;
            transition: background 0.12s, color 0.12s;
        }
        .cart-drawer-qty-btn:hover { background: #f3f4f6; color: var(--bs-mcaa); }
        .cart-drawer-qty-value {
            min-width: 28px;
            text-align: center;
            font-size: 0.85rem;
            font-weight: 700;
            color: #1f2937;
            border-left: 1px solid #e5e7eb;
            border-right: 1px solid #e5e7eb;
            line-height: 26px;
        }
        .cart-drawer-item-remove {
            appearance: none;
            background: transparent;
            border: none;
            color: #9ca3af;
            font-size: 0.85rem;
            padding: 0.25rem 0.35rem;
            cursor: pointer;
            transition: color 0.12s;
        }
        .cart-drawer-item-remove:hover { color: var(--bs-mcaa); }
        .cart-drawer-item-price {
            font-size: 0.95rem;
            font-weight: 700;
            color: #1f2937;
            white-space: nowrap;
        }

        /* Empty state */
        .cart-drawer-empty {
            text-align: center;
            padding: 3rem 1rem;
            color: #6b7280;
        }
        .cart-drawer-empty .fa-shopping-cart {
            font-size: 2.2rem;
            color: #d1d5db;
            margin-bottom: 0.75rem;
        }
        .cart-drawer-empty h6 {
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 0.35rem;
        }
        .cart-drawer-empty p {
            font-size: 0.85rem;
            margin-bottom: 1rem;
        }

        /* Footer (totals + CTAs) */
        .cart-drawer-footer {
            background: #f9fafb;
            border-top: 1px solid #e5e7eb;
            padding: 1rem 1.5rem 1.25rem;
            flex: 0 0 auto;
        }
        .cart-drawer-totals { margin-bottom: 0.85rem; }
        .cart-drawer-totals-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            font-size: 0.95rem;
            font-weight: 700;
            color: #1f2937;
        }
        .cart-drawer-totals-value { font-size: 1.1rem; }
        .cart-drawer-totals-note {
            font-size: 0.72rem;
            color: #6b7280;
            margin: 0.25rem 0 0;
            letter-spacing: 0.02em;
        }
        .cart-drawer-actions .btn-mcaa:hover {
            filter: brightness(0.95);
        }

        /* Top bar */
        .top-bar .btn-sm {
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            padding: 0.3rem 0.65rem;
            border-radius: 0.25rem;
            /*
 Keep all label text on a single line. Without this, the
 three left-side quick-link buttons can wrap their text to
 two lines at narrower lg widths since "Find a contractor"
 is 17 characters.
*/
            white-space: nowrap;
        }
        .top-bar .col-lg-4.text-start > .d-flex {
            /*
 Tighten gap so the nowrap buttons fit even when the col-lg-4
 column is at its narrowest (~320px at the lg breakpoint).
 Bootstrap's gap-2 (0.5rem) plus side padding was pushing
 them past the column edge.
*/
            gap: 0.35rem !important;
        }
        /*
 At the narrow lg range (992-1199px) the col-lg-4 is ~320px,
 which still can't fit all three quick-link buttons even with
 nowrap and a tightened gap. Drop the third (Partner with us)
 in this band it's the least direct user CTA of the three
 and the remaining two (Find a contractor, Buyer's guide) sit
 comfortably on a single line. xl+ shows all three again.
*/
        @media (min-width: 992px) and (max-width: 1199.98px) {
            .top-bar .col-lg-4.text-start > .d-flex > a:nth-child(3) {
                display: none;
            }
        }
        .top-bar .btn-light { border: 1px solid #e5e7eb; background: #fff; }
        .top-bar .btn-light:hover { background: #f3f4f6; }
        .top-bar .btn-outline-dark { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; }
        .top-bar .animate-glow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
        .top-bar a.is-current,
        .top-bar a[aria-current="page"] {
            color: var(--bs-mcaa) !important;
            background: #fff5f5 !important;
            border-color: rgba(233,29,45,0.2) !important;
        }

        /* Second tier clean white, no red */
        .second-tier {
            background: #fff !important;
            width: 100%;
            border-top: 1px solid #f0f0f0;
            border-bottom: none !important;
        }
        .second-tier .container {
            display: flex;
            align-items: center;
        }
        @media (max-width: 991.98px) { .second-tier { display: none !important; } }

        /* Ticker */
        .second-tier .news-ticker-container {
            flex: 0 0 auto;
            background: #f0fdf4;
            border: 1px solid #d1d5db;
            border-radius: 0.35rem;
            padding: 0.4rem 0.75rem;
            transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
        }
        .second-tier .news-ticker-container:hover {
            background: #bbf7d0;
            border-color: #4ade80;
            box-shadow: 0 0 8px rgba(74, 222, 128, 0.35);
        }
        .second-tier .news-stories-container {
            position: relative;
            height: 22px;
            min-width: 280px;
        }
        .second-tier .news-story {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            white-space: nowrap;
        }
        .second-tier .news-story.active {
            opacity: 1;
        }
        .second-tier .ticker-badge {
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            padding: 0.2rem 0.5rem;
            border-radius: 2rem;
            background: #16a34a;
            color: #fff;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }
        .second-tier .ticker-badge::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #fff;
            animation: tickerPulse 1.5s ease-in-out infinite;
        }
        @keyframes tickerPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        .second-tier .ticker-content a {
            font-size: 0.88rem;
            font-weight: 600;
            color: #374151;
            text-decoration: none;
            transition: color 0.15s;
        }
        .second-tier .ticker-content a:hover { color: #16a34a; }

        /* Nav links dark text, red accent on hover */
        .second-tier .primary-nav-bar {
            margin-left: auto;
            background: transparent !important;
            border: none !important;
            box-shadow: none;
        }
        .second-tier .primary-nav-bar .nav-link {
            font-size: 0.95rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.03em;
            color: #1f2937 !important;
            padding: 0.55rem 0.85rem !important;
            border: none !important;
            border-radius: 0.25rem !important;
            transition: color 0.15s, background 0.15s !important;
        }
        .second-tier .primary-nav-bar .nav-link:hover,
        .second-tier .primary-nav-bar .nav-link:focus {
            color: var(--bs-mcaa) !important;
            background: rgba(233,29,45,0.06) !important;
            text-decoration: none !important;
            border-color: transparent !important;
        }
        .second-tier .primary-nav-bar .dropdown-toggle::after {
            border-top-color: #6b7280 !important;
            margin-left: 6px !important;
        }
        .second-tier .primary-nav-bar .nav-link:hover .dropdown-toggle::after,
        .second-tier .primary-nav-bar .dropdown-toggle:hover::after {
            border-top-color: var(--bs-mcaa) !important;
        }

        /* Dropdown menus */
        .simple-dropdown {
            border: 1px solid #e5e7eb;
            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
            border-radius: 0.5rem;
            padding: 0.35rem;
            background: #fff !important;
            margin-top: 0.25rem;
        }
        .simple-dropdown .dropdown-item {
            font-size: 0.82rem;
            padding: 0.45rem 0.85rem;
            font-weight: 500;
            color: #374151 !important;
            border-radius: 0.35rem;
        }
        .simple-dropdown .dropdown-item:hover {
            background: #f3f4f6 !important;
            color: var(--bs-mcaa) !important;
        }
        .simple-dropdown .dropdown-item.is-current,
        .simple-dropdown .dropdown-item[aria-current="page"] {
            background: rgba(233,29,45,0.08) !important;
            color: var(--bs-mcaa) !important;
            font-weight: 700;
        }

        .second-tier .container {
            gap: 1rem;
        }
        .primary-nav-bar .navbar-nav {
            gap: 0.15rem;
        }
        .primary-nav-bar .dropdown {
            position: relative;
        }
        .primary-nav-bar .dropdown-toggle {
            display: inline-flex !important;
            align-items: center;
            gap: 0.2rem;
            background: transparent !important;
            border: 0 !important;
            appearance: none;
            cursor: pointer;
            font: inherit;
            line-height: 1.2;
            white-space: nowrap;
        }
        .primary-nav-bar .dropdown-toggle::after {
            transition: transform 0.18s ease, border-top-color 0.18s ease;
        }
        .primary-nav-bar .dropdown.has-current > .dropdown-toggle,
        .primary-nav-bar .dropdown-toggle.is-current,
        .primary-nav-bar .dropdown.is-open > .dropdown-toggle,
        .primary-nav-bar .dropdown-toggle[aria-expanded="true"] {
            color: var(--bs-mcaa) !important;
            background: rgba(233,29,45,0.06) !important;
        }
        .primary-nav-bar .dropdown.has-current > .dropdown-toggle,
        .primary-nav-bar .dropdown-toggle.is-current {
            box-shadow: inset 0 -2px 0 var(--bs-mcaa);
        }
        .primary-nav-bar .dropdown.has-current > .dropdown-toggle::after,
        .primary-nav-bar .dropdown-toggle.is-current::after {
            border-top-color: var(--bs-mcaa) !important;
        }
        .primary-nav-bar .dropdown.is-open > .dropdown-toggle::after,
        .primary-nav-bar .dropdown-toggle[aria-expanded="true"]::after {
            transform: rotate(180deg);
            border-top-color: var(--bs-mcaa) !important;
        }
        .simple-dropdown {
            --dropdown-base-shift: 0px;
            --dropdown-inline-shift: 0px;
            display: block;
            position: absolute;
            /*
 top: 100% (not 100% + gap) so there's no dead zone between
 the toggle and the menu that would trigger mouseleave on
 .dropdown as the cursor moves down. The visual separation
 from the toggle is handled by margin below instead.
*/
            top: 100%;
            left: 0;
            min-width: 16rem;
            list-style: none;
            margin: 0;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            z-index: 30;
            max-width: calc(100vw - 1rem);
            max-height: min(70vh, 32rem);
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
            transform: translate(calc(var(--dropdown-base-shift) + var(--dropdown-inline-shift)), 8px);
            transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
        }
        /*
 Belt-and-suspenders hover bridge. Even with top:100% above, we
 keep a transparent strip above the menu so small rounding or
 sub-pixel gaps can't break continuous hover.
*/
        .dropdown.is-open > .simple-dropdown::before {
            content: '';
            position: absolute;
            top: -1rem;
            left: 0;
            right: 0;
            height: 1rem;
            background: transparent;
            pointer-events: auto;
        }
        .dropdown.is-open > .simple-dropdown,
        .simple-dropdown.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate(calc(var(--dropdown-base-shift) + var(--dropdown-inline-shift)), 0);
        }
        .dropdown-list {
            padding: 0.35rem;
        }
        .dropdown-wide > .simple-dropdown {
            --dropdown-base-shift: -50%;
            width: min(48rem, calc(100vw - 2rem));
            padding: 1rem;
            left: 50%;
        }
        .structured-dropdown {
            min-width: 40rem;
        }
        .structured-dropdown-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(14rem, 0.95fr);
            gap: 1rem;
            align-items: stretch;
        }
        .dropdown-group {
            min-width: 0;
        }
        .dropdown-group-title {
            margin: 0 0 0.65rem;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #6b7280;
        }
        .dropdown-links {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 0.3rem;
        }
        .structured-dropdown .dropdown-item {
            display: block;
            padding: 0.55rem 0.75rem;
            white-space: normal;
            line-height: 1.35;
        }
        .structured-dropdown .dropdown-item span {
            display: block;
        }
        .dropdown-feature {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 0.85rem;
            padding: 1.1rem 1.15rem;
            border-radius: 0.3rem;
            background: linear-gradient(160deg, #111827 0%, #1f2937 100%);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
        }
        /*
 Kicker eyebrow removed per design; keep the rule in case markup
 still contains one, hidden so it doesn't render.
*/
        .dropdown-feature-eyebrow { display: none; }
        .dropdown-feature h6 {
            margin: 0 0 0.5rem;
            color: #fff;
            font-family: 'Barlow', sans-serif;
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1.18;
            letter-spacing: 0;
        }
        .dropdown-feature p {
            margin: 0;
            color: rgba(255,255,255,0.75);
            font-family: 'Barlow', sans-serif;
            font-size: 0.95rem;
            line-height: 1.45;
        }
        .dropdown-feature .btn {
            align-self: flex-start;
            font-weight: 700;
        }
        .dropdown-feature .btn.is-current,
        .dropdown-feature .btn[aria-current="page"] {
            background: var(--bs-mcaa);
            border-color: var(--bs-mcaa);
            color: #fff;
        }

        .mobile-nav-stack {
            display: grid;
            gap: 0.75rem;
        }
        .mobile-nav-group {
            border: 1px solid #e5e7eb;
            border-radius: 0.9rem;
            background: #fff;
            overflow: hidden;
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }
        .mobile-nav-group[open] {
            border-color: #d1d5db;
            box-shadow: 0 10px 24px rgba(17,24,39,0.08);
        }
        .mobile-nav-group.has-current {
            border-color: rgba(233,29,45,0.24);
            box-shadow: 0 12px 28px rgba(233,29,45,0.08);
        }
        .mobile-nav-group summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.95rem 1rem;
            font-size: 0.95rem;
            font-weight: 700;
            color: #111;
            transition: background 0.18s ease, color 0.18s ease;
        }
        .mobile-nav-group summary::-webkit-details-marker {
            display: none;
        }
        .mobile-nav-group summary:hover {
            background: #f9fafb;
        }
        .mobile-nav-group[open] summary {
            color: var(--bs-mcaa);
        }
        .mobile-nav-group.has-current summary {
            color: var(--bs-mcaa);
            background: #fff5f5;
        }
        .mobile-nav-group summary .summary-copy {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
        }
        .mobile-nav-group summary .summary-copy i {
            color: var(--bs-mcaa);
            width: 1rem;
            text-align: center;
        }
        .mobile-nav-group summary .summary-chevron {
            color: #9ca3af;
            transition: transform 0.2s ease, color 0.2s ease;
        }
        .mobile-nav-group[open] summary .summary-chevron {
            transform: rotate(180deg);
            color: var(--bs-mcaa);
        }
        .mobile-nav-group-body {
            padding: 0 1rem 1rem;
            display: grid;
            gap: 0.9rem;
            border-top: 1px solid #f3f4f6;
            background: linear-gradient(180deg, #fcfcfd 0%, #ffffff 100%);
        }
        .mobile-nav-subgroup {
            display: grid;
            gap: 0.35rem;
        }
        .mobile-nav-subgroup-title {
            margin: 0.15rem 0 0.15rem;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #6b7280;
        }
        .mobile-nav-links {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
        }
        .mobile-nav-links li {
            margin: 0;
        }
        .mobile-nav-links a {
            display: block;
            padding: 0.45rem 0;
            font-size: 0.92rem;
            color: #374151;
            text-decoration: none;
            border-bottom: 1px solid #f3f4f6;
        }
        .mobile-nav-links li:last-child a {
            border-bottom: none;
        }
        .mobile-nav-links a:hover {
            color: var(--bs-mcaa);
        }
        .mobile-nav-links a.is-current,
        .mobile-nav-links a[aria-current="page"] {
            color: var(--bs-mcaa);
            font-weight: 700;
        }
        .mobile-quick-links .nav-link {
            border: 1px solid #e5e7eb;
        }
        .mobile-quick-links .nav-link:hover {
            background: #f9fafb;
            border-color: #d1d5db;
        }
        .mobile-quick-links .nav-link.is-current,
        .mobile-quick-links .nav-link[aria-current="page"] {
            color: var(--bs-mcaa);
            background: #fff5f5;
            border-color: rgba(233,29,45,0.2);
        }

        @media (max-width: 1199.98px) {
            .second-tier .news-ticker-container {
                display: none !important;
            }
            .second-tier .container {
                justify-content: center;
            }
            .primary-nav-bar .nav-link {
                font-size: 0.9rem !important;
                padding: 0.55rem 0.65rem !important;
            }
            .dropdown-wide > .simple-dropdown {
                width: min(42rem, 90vw);
            }
        }
        @media (max-width: 991.98px) {
            .structured-dropdown-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .dropdown-feature {
                grid-column: 1 / -1;
            }
        }

        /* Partner alert bar */
        #initialAlert {
            border-radius: 0;
            border: none;
            background: #fafafa;
            border-top: 1px solid #f0f0f0;
            font-size: 0.8rem;
            color: #6b7280;
        }
        #initialAlert .alert-link { font-size: 0.8rem; }

        /* Mobile */
        .mobile-top-bar { padding: 0.65rem 0; }
        .mobile-menu-toggle { border: 1px solid #e5e7eb; background: #fff; padding: 0.45rem 0.65rem; }

        /* Logo smooth transition (compiled CSS handles sizes) */
        .logo-full, .mobile-logo {
            transition: height 0.3s ease;
        }