﻿/* extracted verbatim 2026-08-28 estate speed sweep. New content = new filename. */

    /* ============================================================
       MBG = MLB Betting Guide namespace.
       Built on the GLOBAL design system (Site.Master tokens).
       Surfaces: --void/--panel/--panel-2 · Action: --accent-grad/--action-hi
       Money: --model (green) / loss: --book (red) · Type: --display/--ui/--mono
       ============================================================ */

    .mbg-wrapper {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 1.5em 5% 3em;
        box-sizing: border-box;
        font-family: var(--ui);
        content-visibility: auto;
        contain-intrinsic-size: 1px 1600px;
    }

    /* --- BREADCRUMB --- */
    .mbg-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;
        align-items: center;
        margin-bottom: 1.5em;
        font-family: var(--mono);
        font-size: 0.72em;
        color: var(--ink-faint);
        text-transform: uppercase;
        letter-spacing: 0.07em;
    }
    .mbg-breadcrumb a      { color: var(--ink-dim); text-decoration: none; transition: color 0.15s; }
    .mbg-breadcrumb a:hover { color: var(--action-hi); }
    .mbg-breadcrumb .sep   { color: var(--line-strong); }

    /* --- POP WRAP --- */
    .mbg-pop-wrap { margin-bottom: 1.5em; }

    /* ============================================================
       AMBIENT-LIFT — shared recipe for every card on the page.
       panel bg + 1px card-edge + soft blue under-glow + radial top-light
       ============================================================ */
    .mbg-lift {
        position: relative;
        background: var(--panel);
        border: 1px solid var(--card-edge);
        border-radius: 16px;
        box-shadow: 0 20px 42px -24px var(--accent-glow);
        overflow: hidden;
    }
    .mbg-lift::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 80% at 18% -10%, rgba(70,140,255,0.10), transparent 60%);
        pointer-events: none;
    }
    .mbg-lift > * { position: relative; z-index: 1; }

    /* --- HERO HEADER --- */
    .mbg-page-header {
        padding: 1.9em 1.9em 1.75em;
        margin-bottom: 1.5em;
    }
    .mbg-eyebrow {
        font-family: var(--mono);
        font-size: 0.72em;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-faint);
        margin: 0 0 0.85em;
        display: flex;
        align-items: center;
        gap: 0.6em;
        flex-wrap: wrap;
    }
    .mbg-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--model); box-shadow: 0 0 8px var(--model); }
    .mbg-h1 {
        font-family: var(--display);
        font-size: clamp(1.7rem, 4.2vw, 2.6rem);
        font-weight: 800;
        color: var(--ink);
        letter-spacing: -0.025em;
        line-height: 1.1;
        margin: 0 0 0.55em;
    }
    .mbg-h1 .mbg-accent { color: var(--action-hi); }
    .mbg-desc {
        font-size: 1.02em;
        color: var(--ink-dim);
        max-width: 760px;
        line-height: 1.65;
        margin: 0 0 1.25em;
    }
    .mbg-desc strong { color: var(--ink); font-weight: 600; }
    .mbg-hero-cta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.85em;
        margin-bottom: 1.1em;
    }
    .mbg-hero-cta .btn-grad { min-height: 46px; }
    .mbg-hero-cta .microcopy {
        font-family: var(--mono);
        font-size: 0.72em;
        color: var(--ink-faint);
        letter-spacing: 0.03em;
    }
    .mbg-quick-links { display: flex; flex-wrap: wrap; gap: 0.5em; }
    .mbg-quick-link {
        display: inline-flex;
        align-items: center;
        gap: 0.45em;
        min-height: 38px;
        padding: 0.5em 0.95em;
        border-radius: 99px;
        background: var(--panel-2);
        border: 1px solid var(--line-strong);
        color: var(--ink-dim);
        font-size: 0.82em;
        font-weight: 600;
        text-decoration: none;
        transition: border-color 0.14s, color 0.14s;
    }
    .mbg-quick-link:hover { border-color: var(--card-edge); color: var(--ink); }
    .mbg-quick-link i { color: var(--action-hi); }

    /* --- AEO ANSWER CAPSULE --- */
    .mbg-aeo-panel {
        padding: 1.6em 1.85em;
        margin: 0 0 1.5em;
    }
    .mbg-aeo-grid {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 1.5em;
        align-items: start;
    }
    @media (max-width: 900px) { .mbg-aeo-grid { grid-template-columns: 1fr; } }
    .mbg-kicker {
        font-family: var(--mono);
        color: var(--ink-faint);
        font-size: 0.7em;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin: 0 0 0.6em;
        display: block;
    }
    .mbg-answer {
        font-size: 0.95em;
        color: var(--ink-dim);
        line-height: 1.7;
        margin: 0 0 0.9em;
        max-width: 820px;
    }
    .mbg-answer strong { color: var(--ink); font-weight: 600; }
    .mbg-def-cards { display: grid; gap: 0.6em; }
    .mbg-def-card {
        background: var(--panel-2);
        border: 1px solid var(--line);
        border-radius: 11px;
        padding: 0.9em 1em;
    }
    .mbg-def-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5em;
        margin: 0 0 0.4em;
        font-family: var(--display);
        font-size: 0.92em;
        font-weight: 700;
        color: var(--ink);
    }
    .mbg-def-pill {
        font-family: var(--mono);
        font-size: 0.66em;
        border: 1px solid var(--line-strong);
        color: var(--ink-faint);
        border-radius: 99px;
        padding: 0.22em 0.6em;
        letter-spacing: 0.03em;
    }
    .mbg-def-card p { margin: 0; font-size: 0.86em; color: var(--ink-dim); line-height: 1.55; }

    /* --- GUIDE CARDS --- */
    .mbg-card {
        padding: 1.6em;
        margin-bottom: 1.5em;
    }
    .mbg-card-head {
        display: flex;
        align-items: center;
        gap: 0.75em;
        margin-bottom: 0.95em;
        padding-bottom: 0.85em;
        border-bottom: 1px solid var(--line);
    }
    .mbg-card-ico {
        flex: 0 0 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(70,140,255,0.12);
        border: 1px solid var(--card-edge);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--action-hi);
        font-size: 1em;
    }
    .mbg-card-head h2,
    .mbg-card-head h3 { margin: 0; font-family: var(--display); font-size: 1.12em; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
    .mbg-card p { margin: 0 0 0.9em; font-size: 0.95em; color: var(--ink-dim); line-height: 1.7; }
    .mbg-card p:last-child { margin-bottom: 0; }
    .mbg-card strong { color: var(--ink); font-weight: 600; }
    .mbg-card ol { margin: 0.75em 0 0.75em 1.25em; color: var(--ink-dim); font-size: 0.95em; line-height: 1.8; }
    .mbg-card ol li { margin-bottom: 0.5em; }
    .mbg-card ol strong { color: var(--ink); }

    /* --- TERMINAL EXAMPLES --- */
    .mbg-terminal {
        background: var(--void);
        border: 1px solid var(--line);
        border-left: 3px solid var(--action-hi);
        padding: 1em 1.1em;
        margin: 1.1em 0 0;
        border-radius: 0 11px 11px 0;
        font-family: var(--mono);
        font-size: 0.86em;
        line-height: 1.7;
        color: var(--ink-dim);
        font-variant-numeric: tabular-nums;
    }
    .mbg-terminal .pos  { color: var(--model); font-weight: 600; }
    .mbg-terminal .neg  { color: var(--book);  font-weight: 600; }
    .mbg-terminal .num  { color: var(--action-hi); font-weight: 600; }
    .mbg-terminal .dim  { color: var(--ink-faint); }

    /* --- GRID LAYOUTS --- */
    .mbg-grid-2 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25em;
        margin-bottom: 1.5em;
    }
    @media (min-width: 768px) { .mbg-grid-2 { grid-template-columns: 1fr 1fr; } }
    .mbg-grid-2 .mbg-card { margin-bottom: 0; }

    .mbg-props-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.7em;
        margin-top: 1.1em;
    }
    @media (min-width: 640px) { .mbg-props-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 880px) { .mbg-props-grid { grid-template-columns: repeat(3, 1fr); } }

    .mbg-prop-item {
        background: var(--panel-2);
        border: 1px solid var(--line);
        border-radius: 11px;
        padding: 0.9em 1em;
        transition: border-color 0.14s;
    }
    .mbg-prop-item:hover { border-color: var(--card-edge); }
    .mbg-prop-item strong { display: block; color: var(--ink); margin-bottom: 0.3em; font-size: 0.92em; font-weight: 600; }
    .mbg-prop-item span   { color: var(--ink-dim); font-size: 0.82em; line-height: 1.5; }

    /* --- COMPARE TABLE --- */
    .mbg-compare {
        margin: 0 0 1.5em;
    }
    .mbg-compare-head {
        padding: 1.1em 1.3em 0.95em;
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        gap: 0.7em;
    }
    .mbg-compare-head .mbg-card-ico { width: 34px; flex-basis: 34px; height: 34px; }
    .mbg-compare-head h2 { margin: 0; font-family: var(--display); font-size: 1.12em; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
    .mbg-table-scroll { overflow-x: auto; }
    .mbg-compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9em; }
    .mbg-compare-table th {
        text-align: left;
        font-size: 0.72em;
        font-family: var(--mono);
        letter-spacing: 0.08em;
        color: var(--ink-faint);
        text-transform: uppercase;
        background: var(--panel-2);
        padding: 0.75em 1.1em;
        border-bottom: 1px solid var(--line-strong);
    }
    .mbg-compare-table td {
        padding: 0.85em 1.1em;
        border-bottom: 1px solid var(--line);
        color: var(--ink-dim);
        vertical-align: top;
        line-height: 1.55;
    }
    .mbg-compare-table tr:last-child td { border-bottom: none; }
    .mbg-compare-table tbody tr:hover td { background: rgba(70,140,255,0.04); }
    .mbg-compare-table strong { color: var(--ink); font-weight: 600; }

    /* --- TRUST STRIP --- */
    .mbg-trust-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.7em;
        margin: 0 0 1.5em;
    }
    @media (max-width: 760px) { .mbg-trust-strip { grid-template-columns: 1fr; } }
    .mbg-trust-card {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 1.1em 1.15em;
    }
    .mbg-trust-title {
        margin: 0 0 0.45em;
        font-family: var(--display);
        font-weight: 700;
        font-size: 0.95em;
        color: var(--ink);
        display: flex;
        align-items: center;
        gap: 0.55em;
    }
    .mbg-trust-title i { color: var(--action-hi); }
    .mbg-trust-card p { margin: 0; color: var(--ink-dim); font-size: 0.86em; line-height: 1.6; }

    /* --- CALLOUT --- */
    .mbg-callout {
        background: var(--panel-2);
        border: 1px solid var(--line);
        border-left: 3px solid var(--action-hi);
        border-radius: 0 11px 11px 0;
        padding: 0.95em 1.1em;
        margin: 1.1em 0 0;
        font-size: 0.92em;
        color: var(--ink-dim);
        line-height: 1.65;
    }
    .mbg-callout strong { color: var(--ink); font-weight: 600; }

    /* --- FORWARD CTA BANNER (intent peak) --- */
    .mbg-cta-banner {
        padding: 1.75em 1.9em;
        margin: 0 0 1.5em;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1.25em;
    }
    .mbg-cta-copy h2 {
        margin: 0 0 0.4em;
        font-family: var(--display);
        font-size: 1.3em;
        font-weight: 800;
        color: var(--ink);
        letter-spacing: -0.015em;
    }
    .mbg-cta-copy p { margin: 0; color: var(--ink-dim); font-size: 0.95em; line-height: 1.6; max-width: 560px; }
    .mbg-cta-copy p .mbg-edge { font-family: var(--mono); color: var(--model); font-weight: 600; font-variant-numeric: tabular-nums; }
    .mbg-cta-actions { display: flex; flex-direction: column; gap: 0.6em; align-items: flex-start; }
    .mbg-cta-actions .btn-grad { min-height: 48px; white-space: nowrap; }
    .mbg-cta-actions .microcopy { font-family: var(--mono); font-size: 0.7em; color: var(--ink-faint); }

    /* --- INTERNAL LINKS --- */
    .mbg-links-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.65em;
        margin-top: 0.9em;
    }
    .mbg-link-item {
        display: flex;
        align-items: center;
        gap: 0.6em;
        min-height: 44px;
        padding: 0.75em 1em;
        background: var(--panel-2);
        border: 1px solid var(--line);
        border-radius: 11px;
        color: var(--ink-dim);
        font-size: 0.9em;
        font-weight: 600;
        text-decoration: none;
        transition: border-color 0.14s, color 0.14s, transform 0.14s;
    }
    .mbg-link-item:hover { border-color: var(--card-edge); color: var(--ink); transform: translateY(-1px); }
    .mbg-link-item i { color: var(--action-hi); flex-shrink: 0; }
    .mbg-link-item .arr { margin-left: auto; color: var(--ink-faint); font-size: 0.85em; }
    .mbg-links-label { margin: 1.4em 0 0; font-family: var(--mono); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }

    /* --- FAQ --- */
    .mbg-faq {
        margin-top: 0.5em;
    }
    .mbg-faq-head {
        padding: 1.1em 1.3em;
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75em;
    }
    .mbg-faq-head h2 { margin: 0; font-family: var(--display); font-size: 1.12em; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
    .mbg-faq-meta { font-family: var(--mono); font-size: 0.7em; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }
    .mbg-faq-list { padding: 0.6em; }
    .mbg-faq-item {
        border: 1px solid var(--line);
        background: var(--panel-2);
        border-radius: 11px;
        margin: 0.6em 0;
        overflow: hidden;
        transition: border-color 0.15s;
    }
    .mbg-faq-item[open] { border-color: var(--card-edge); }
    .mbg-faq-item summary {
        padding: 0.95em 1.05em;
        min-height: 44px;
        box-sizing: border-box;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.95em;
        color: var(--ink);
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
        gap: 1em;
    }
    .mbg-faq-item summary::-webkit-details-marker { display: none; }
    .mbg-faq-item summary::after { content: '+'; font-family: var(--mono); font-size: 1.1em; color: var(--action-hi); flex-shrink: 0; }
    .mbg-faq-item[open] summary::after { content: '\2212'; }
    .mbg-faq-answer {
        padding: 0 1.05em 0.95em;
        font-size: 0.9em;
        line-height: 1.75;
        color: var(--ink-dim);
        border-top: 1px solid var(--line);
    }
    .mbg-faq-answer p { margin-top: 0.8em; margin-bottom: 0; color: var(--ink-dim); }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .mbg-card, .mbg-link-item, .mbg-prop-item, .mbg-quick-link, .btn-grad { transition: none !important; }
        .mbg-link-item:hover, .btn-grad:hover { transform: none !important; }
    }

    /* sr-only */
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

    @media (max-width: 600px) {
        .mbg-wrapper { padding: 1.25em 4% 2.5em; }
        .mbg-page-header, .mbg-card, .mbg-aeo-panel, .mbg-cta-banner { padding: 1.3em; }
        .mbg-cta-actions { width: 100%; }
        .mbg-cta-actions .btn-grad { width: 100%; }
    }
