/* ==========================================
   CSS CUSTOM PROPERTIES
   ========================================== */
@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/bodoni-moda-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-display: 'Fraunces', Georgia, serif;
    --bg-dark: #000000;
    --bg-mid: #101010;
    --accent-primary: #D4AF37;
    --accent-secondary: #E6C860;
    --accent-info: #E6C860;
    --text-on-accent: #000000;
    --text-muted: #A6A6A6;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    /* Strict type scale — five sizes, used everywhere. Anything else
       is overridden in the polish block at the bottom of this file. */
    --fs-display: 2.4rem;     /* hero h1 only */
    --fs-heading: 1.5rem;     /* section h2 */
    --fs-subhead: 1.05rem;    /* card titles, h3, h4 */
    --fs-body:    0.92rem;    /* body copy, default */
    --fs-meta:    0.78rem;    /* labels, sub-meta, table headers */

    /* Section-level vertical rhythm — two tokens.
       --section-gap-tight: between siblings in the same family (default).
       --section-gap-loose: deliberate breath before a new pillar. */
    --section-gap-tight: 28px;
    --section-gap-loose: 48px;
    --section-gap: 28px; /* legacy alias, points at -tight to keep old rules sane */
    --card-pad-desktop: 22px;
    --card-pad-mobile: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Safety net: never allow horizontal scroll (sideways-wobble jank). overflow-x
   on BODY alone doesn't stop the HTML element scrolling, so clip both, and pin
   the width so a stray wide child (e.g. the marquee ticker) can't push the page. */
html {
    overflow-x: hidden;
    max-width: 100%;
}
body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, #000000 0%, #101010 50%, #000000 100%);
    background-size: 400% 400%;
    animation: bodyGradient 15s ease infinite;
    min-height: 100vh;
    color: #fff;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100%;
}

/* iOS Safari zooms the whole page when you focus a text field smaller than 16px.
   Force every text-entry input to 16px on phones — kills the auto-zoom jank
   site-wide (signup, feedback, team-follow, chat, search). Desktop is untouched. */
@media (max-width: 768px) {
    input[type="text"], input[type="email"], input[type="search"],
    input[type="tel"], input[type="number"], input[type="password"], textarea, select {
        font-size: 16px !important;
    }
}

/* Skip to content link for accessibility */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    padding: 12px 24px;
    z-index: 10000;
    font-weight: 700;
    font-family: var(--font-heading);
    text-decoration: none;
    border-radius: 0;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 0;
}

/* Focus visible for keyboard nav */
*:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

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

/* Pitch lines overlay — centre circle + centre line */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.12;
    background:
        /* centre circle */
        radial-gradient(circle at 50% 50%, transparent 148px, rgba(255,255,255,0.5) 148px, rgba(255,255,255,0.5) 152px, transparent 152px),
        /* centre dot */
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.5) 5px, transparent 5px),
        /* centre line (horizontal) */
        linear-gradient(to bottom, transparent calc(50% - 1.5px), rgba(255,255,255,0.5) calc(50% - 1.5px), rgba(255,255,255,0.5) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
        /* touchline top */
        linear-gradient(to bottom, rgba(255,255,255,0.7) 0px, rgba(255,255,255,0.7) 3px, transparent 3px),
        /* touchline bottom */
        linear-gradient(to top, rgba(255,255,255,0.7) 0px, rgba(255,255,255,0.7) 3px, transparent 3px),
        /* sideline left */
        linear-gradient(to right, rgba(255,255,255,0.7) 0px, rgba(255,255,255,0.7) 3px, transparent 3px),
        /* sideline right */
        linear-gradient(to left, rgba(255,255,255,0.7) 0px, rgba(255,255,255,0.7) 3px, transparent 3px);
}

/* Pitch penalty boxes overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.12;
    background:
        /* left penalty box */
        linear-gradient(to right, rgba(255,255,255,0.7) 3px, transparent 3px) 0 25%   / 18% 50% no-repeat,
        linear-gradient(to bottom, rgba(255,255,255,0.7) 3px, transparent 3px) 0 25%   / 18% 3px no-repeat,
        linear-gradient(to top,    rgba(255,255,255,0.7) 3px, transparent 3px) 0 75%    / 18% 3px no-repeat,
        /* left six-yard box */
        linear-gradient(to right, rgba(255,255,255,0.6) 3px, transparent 3px) 0 37.5%  / 7% 25% no-repeat,
        linear-gradient(to bottom, rgba(255,255,255,0.6) 3px, transparent 3px) 0 37.5%  / 7% 3px no-repeat,
        linear-gradient(to top,    rgba(255,255,255,0.6) 3px, transparent 3px) 0 62.5%  / 7% 3px no-repeat,
        /* right penalty box */
        linear-gradient(to left,  rgba(255,255,255,0.7) 3px, transparent 3px) 100% 25% / 18% 50% no-repeat,
        linear-gradient(to bottom, rgba(255,255,255,0.7) 3px, transparent 3px) 82% 25% / 18% 3px no-repeat,
        linear-gradient(to top,    rgba(255,255,255,0.7) 3px, transparent 3px) 82% 75%  / 18% 3px no-repeat,
        /* right six-yard box */
        linear-gradient(to left,  rgba(255,255,255,0.6) 3px, transparent 3px) 100% 37.5% / 7% 25% no-repeat,
        linear-gradient(to bottom, rgba(255,255,255,0.6) 3px, transparent 3px) 93% 37.5% / 7% 3px no-repeat,
        linear-gradient(to top,    rgba(255,255,255,0.6) 3px, transparent 3px) 93% 62.5% / 7% 3px no-repeat;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    padding: 40px 0;
}

header h1 {
    font-size: 2.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    margin-bottom: 10px;
    color: #ffffff;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}
header h1::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #D4AF37;
    border-radius: 0;
}

.subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* ==========================================
   MODEL TESTING BANNER
   ========================================== */

.model-testing-banner {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 0;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.testing-icon {
    font-size: 1.3rem;
    color: #E6C860;
}

.testing-text {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.4;
}

.testing-text strong {
    color: #E6C860;
}

/* ==========================================
   HOW TO USE SECTION
   ========================================== */

.how-to-use {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    margin: 0 0 var(--section-gap-tight);
    overflow: hidden;
}

.htu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    cursor: pointer;
    transition: background 0.2s;
}

.htu-header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.htu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(212, 175, 55, 0.15);
    border-radius: 50%;
    color: #D4AF37;
    font-size: 0.8rem;
    font-weight: 700;
}

.htu-title {
    color: #A6A6A6;
    font-size: 0.9rem;
    flex: 1;
}

.htu-toggle {
    color: #747474;
    font-size: 0.7rem;
    transition: transform 0.3s;
}

.how-to-use.htu-expanded .htu-toggle {
    transform: rotate(180deg);
}

.htu-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.3s;
    padding: 0 20px;
}

.how-to-use.htu-expanded .htu-content {
    max-height: none;
    overflow: visible;
    padding: 18px 22px 22px;
}

.htu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 5px;
    margin-bottom: 20px;
}

.htu-step {
    display: flex;
    gap: 12px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0;
    border-left: 3px solid #D4AF37;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #D4AF37, #E6C860);
    border-radius: 50%;
    color: #000000;
    font-size: 0.85rem;
    font-weight: 700;
}

.step-content h4 {
    color: #fff;
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.step-content p {
    color: #A6A6A6;
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
}

.htu-tips {
    background: rgba(230, 200, 96, 0.06);
    border: 1px solid rgba(230, 200, 96, 0.15);
    border-radius: 0;
    padding: 15px;
}

.htu-tips h4 {
    color: #E6C860;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.htu-tips ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.htu-tips li {
    color: #A6A6A6;
    font-size: 0.75rem;
    line-height: 1.4;
}

.htu-tips li strong {
    color: #E6C860;
}

/* Step details list */
.step-details {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
}

.step-details li {
    color: #A6A6A6;
    font-size: 0.7rem;
    line-height: 1.5;
    padding: 2px 0;
}

.step-details li strong {
    color: #D4AF37;
}

/* Bet Types Section in How to Use */
.htu-bet-types {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #1E1E1E;
    border-radius: 0;
    padding: 15px;
    margin-bottom: 15px;
}

.htu-bet-types h4 {
    color: #D4AF37;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.bet-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bet-type-item {
    background: #151515;
    padding: 10px 12px;
    border-radius: 0;
    border-left: 3px solid #E6C860;
}

.bt-name {
    display: block;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 3px;
}

.bt-desc {
    color: #A6A6A6;
    font-size: 0.7rem;
}

.bet-types-note {
    color: #A6A6A6;
    font-size: 0.7rem;
    margin-top: 10px;
    text-align: center;
    font-style: italic;
}

@media (max-width: 992px) {
    .htu-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bet-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .htu-grid {
        grid-template-columns: 1fr;
    }

    .htu-tips ul {
        grid-template-columns: 1fr;
    }

    .bet-types-grid {
        grid-template-columns: 1fr;
    }

    .how-to-use.htu-expanded .htu-content {
        max-height: 60vh;
    }
}

/* Scrollbar styling for htu-content */
.htu-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.4) rgba(255, 255, 255, 0.1);
}

.htu-content::-webkit-scrollbar {
    width: 8px;
}

.htu-content::-webkit-scrollbar-track {
    background: #1E1E1E;
    border-radius: 0;
}

.htu-content::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.4);
    border-radius: 0;
    min-height: 40px;
}

.htu-content::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.6);
}

/* ==========================================
   LEAGUE SELECTOR
   ========================================== */

.league-selector {
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.league-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.league-header:hover {
    background: rgba(255, 255, 255, 0.10);
}

.league-title {
    color: #aaa;
    font-size: 0.85rem;
    flex: 1;
}

.league-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0;
    color: #D4AF37;
    font-size: 0.75rem;
    font-weight: 600;
}

.league-toggle {
    color: #A6A6A6;
    font-size: 0.7rem;
    transition: transform 0.3s;
}

.league-selector.league-expanded .league-toggle {
    transform: rotate(180deg);
}

.league-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.league-selector.league-expanded .league-content {
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px 15px 15px 15px;
}

.league-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    padding-top: 5px;
}


.league-action-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    color: #aaa;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.league-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(212, 175, 55, 0.3);
    color: #D4AF37;
}

.league-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.league-region {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 10px;
}

.league-region h4 {
    color: #fff;
    font-size: 0.8rem;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.league-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.league-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 0;
    transition: background 0.2s;
}

.league-option:hover {
    background: rgba(255, 255, 255, 0.10);
}

.league-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #D4AF37;
    cursor: pointer;
}

.league-option span {
    color: #a8a8a8;
    font-size: 0.75rem;
}

.league-option input:checked + span {
    color: #D4AF37;
}

@media (max-width: 1200px) {
    .league-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .league-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .league-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .league-selector.league-expanded .league-content {
        max-height: 80vh;
    }

    .league-region {
        padding: 8px;
    }

    .league-option {
        padding: 6px 8px;
    }

    .league-option span {
        font-size: 0.8rem;
    }

    .league-option input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .league-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .league-selector.league-expanded .league-content {
        max-height: 85vh;
    }

    .league-action-btn {
        flex: 1;
        text-align: center;
        padding: 8px 10px;
    }

    .league-region h4 {
        font-size: 0.75rem;
    }
}

.search-form {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    position: relative;
}
.search-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, #E6C860, transparent);
    opacity: 0.5;
}
.search-header {
    padding: 18px 24px 0;
    text-align: center;
}
.search-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 4px;
}
.search-subtitle {
    font-size: 0.78rem;
    color: #A6A6A6;
}
.search-form form {
    padding: 16px 24px 20px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.form-group {
    flex: 1;
    min-width: 140px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #999;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group select option {
    text-align: center;
    background: #000000;
    color: #fff;
}

/* Fix iOS date input styling */
.form-group input[type="date"] {
    min-height: 44px;
    line-height: 1.2;
}

.form-group input[type="date"]::-webkit-date-and-time-value {
    text-align: center;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

.form-group-btn {
    flex: 0 0 auto;
    min-width: 160px;
}

.btn-search {
    width: 100%;
    padding: 10px 28px;
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    border: none;
    border-radius: 0;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 44px;
    letter-spacing: 0.3px;
}

.btn-search:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
}

/* ── Find Matches: quick chips + custom row + sort+search row ──────── */
.fm-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    justify-content: center;
}
.fm-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #d8dde6;
    padding: 8px 16px;
    border-radius: 0;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--font-heading);
    cursor: pointer;
    transition: all 0.18s ease;
    letter-spacing: 0.2px;
}
.fm-chip:hover {
    border-color: rgba(212, 175, 55, 0.4);
    color: #fff;
    background: rgba(212, 175, 55, 0.08);
}
.fm-chip.active {
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    border-color: transparent;
    color: #000000;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}
.fm-custom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 auto 14px;
    max-width: 420px;
}
.fm-custom-row[hidden] { display: none; }
.fm-action-row {
    display: flex;
    gap: 12px;
    align-items: end;
    justify-content: center;
    max-width: 540px;
    margin: 0 auto;
}
.fm-sort-group {
    flex: 1 1 auto;
    max-width: 240px;
}
.fm-search-btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 180px;
    padding: 10px 24px !important;
}
@media (max-width: 540px) {
    .fm-action-row {
        flex-direction: column;
        align-items: stretch;
    }
    .fm-sort-group {
        max-width: none;
    }
    .fm-search-btn {
        width: 100% !important;
    }
    .fm-custom-row {
        grid-template-columns: 1fr;
    }
}

.results-header {
    margin-bottom: 20px;
    text-align: center;
}

.results-header h2 {
    color: #fff;
}

.no-results {
    color: #A6A6A6;
    text-align: center;
    font-style: italic;
}

.matches-grid {
    display: grid;
    gap: 20px;
}

.match-card {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.match-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 175, 55, 0.1);
}

.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.league-badge {
    background: linear-gradient(90deg, #ff6b6b, #D4AF37);
    padding: 5px 12px;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.match-date {
    color: #A6A6A6;
    font-size: 0.9rem;
}

.match-teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.team {
    flex: 1;
    text-align: center;
}

.team-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.odds-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.odds {
    font-size: 1.3rem;
    font-weight: 700;
    color: #D4AF37;
}

.probability {
    font-size: 1rem;
    padding: 3px 10px;
    border-radius: 0;
    display: inline-block;
}

.probability.high {
    background: rgba(212, 175, 55, 0.2);
    color: #E6C860;
}

.probability.medium {
    background: rgba(212, 175, 55, 0.2);
    color: #D4AF37;
}

.probability.low {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.bookmaker {
    font-size: 0.75rem;
    color: #A6A6A6;
}

.vs {
    font-size: 0.9rem;
    color: #A6A6A6;
    padding: 0 20px;
}

.draw-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #A6A6A6;
}

.draw-info .odds {
    font-size: 1rem;
}

.draw-info .probability {
    font-size: 0.85rem;
}

.match-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.favorite-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #A6A6A6;
}

.favorite-tag strong {
    color: #E6C860;
}

.win-prob {
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 0;
    font-size: 0.85rem;
    color: #E6C860;
}

.rank {
    font-size: 1.5rem;
    font-weight: 700;
    color: #D4AF37;
}

/* Stats Toggle Button */
.stats-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.stats-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.toggle-text {
    color: #D4AF37;
    font-size: 0.9rem;
    font-weight: 500;
}

.toggle-icon {
    color: #D4AF37;
    transition: transform 0.3s;
}

.match-card.expanded .toggle-icon {
    transform: rotate(180deg);
}

/* Stats Dropdown */
.stats-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, margin 0.3s;
    margin-top: 0;
}

.match-card.expanded .stats-dropdown {
    max-height: 2000px;
    overflow-y: auto;
    margin-top: 15px;
}

/* Predictions Section */
.predictions-section {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 15px;
    margin-bottom: 15px;
}

.predictions-section h4 {
    color: #fff;
    margin-bottom: 12px;
    font-size: 1rem;
    text-align: center;
}

.prediction-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.prediction-item {
    text-align: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0;
}

.prediction-label {
    display: block;
    font-size: 0.75rem;
    color: #A6A6A6;
    margin-bottom: 5px;
}

.prediction-value {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 0;
}

.prediction-value.high {
    background: rgba(212, 175, 55, 0.2);
    color: #E6C860;
}

.prediction-value.medium {
    background: rgba(212, 175, 55, 0.2);
    color: #D4AF37;
}

.prediction-value.low {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

/* Team Stats Section */
.team-stats-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.team-stats {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 15px;
}

.team-stats h4 {
    color: #fff;
    margin-bottom: 12px;
    font-size: 0.95rem;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    color: #A6A6A6;
    font-size: 0.8rem;
}

.stat-value {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Form indicators */
.form-display {
    display: flex;
    gap: 3px;
}

.form-w, .form-d, .form-l {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 600;
}

.form-w {
    background: rgba(212, 175, 55, 0.28);
    color: #D4AF37;
}

.form-d {
    background: rgba(230, 200, 96, 0.28);
    color: #E6C860;
}

.form-l {
    background: rgba(229, 72, 77, 0.28);
    color: #ff8a8d;
}

/* ── Recent Form (universal, works without league table) ─────────── */
.recent-form-section h2 {
    margin-bottom: 12px;
}
.recent-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.recent-form-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 14px 16px;
}
.recent-form-card h4 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: #fff;
    font-family: var(--font-heading);
}
.recent-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.recent-form-row:last-child { border-bottom: none; }
.recent-form-label {
    font-size: 0.8rem;
    color: #A6A6A6;
}
@media (max-width: 540px) {
    .recent-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Team page: recent form pills + table ────────────────────────── */
.team-form-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.team-form-pill-label,
.team-form-split-label {
    font-size: 0.78rem;
    color: #A6A6A6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-heading);
    margin-right: 6px;
}
.team-form-split {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.team-form-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.88rem;
}
.team-form-table th {
    text-align: left;
    padding: 8px 10px;
    color: #A6A6A6;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-heading);
}
.team-form-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #D2D2D2;
}
.form-letter-cell {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 0;
    font-weight: 700;
    font-size: 0.78rem;
}
@media (max-width: 540px) {
    .team-form-table { font-size: 0.78rem; }
    .team-form-table td, .team-form-table th { padding: 6px 4px; }
}

/* ── League predictions: form table ──────────────────────────────── */
.league-form-section {
    margin: 20px 0 30px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
}
.league-form-section h2 {
    margin: 0 0 4px;
    font-size: 1.2rem;
    color: #fff;
}
.league-form-sub {
    color: #A6A6A6;
    font-size: 0.82rem;
    margin: 0 0 14px;
}
.league-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}
.league-form-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.league-form-team {
    color: #D2D2D2;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.league-form-team:hover {
    color: #D4AF37;
}
.league-form-letters {
    flex-shrink: 0;
}
.league-form-points {
    color: #A6A6A6;
    font-size: 0.78rem;
    font-family: var(--font-heading);
    min-width: 50px;
    text-align: right;
}

/* Head-to-Head Section */
.h2h-section {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 15px;
    margin-top: 15px;
}

.h2h-section h4 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1rem;
    text-align: center;
}

.h2h-summary-bar {
    background: rgba(212, 175, 55, 0.1);
    border-radius: 0;
    padding: 12px;
    margin-bottom: 15px;
}

.h2h-record {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.h2h-team {
    font-weight: 600;
    color: #fff;
    font-size: 0.85rem;
}

.h2h-team.home-team {
    color: #D4AF37;
}

.h2h-team.away-team {
    color: #ff6b6b;
}

.h2h-wins {
    background: rgba(212, 175, 55, 0.2);
    color: #E6C860;
    padding: 4px 10px;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.85rem;
}

.h2h-draws {
    background: rgba(212, 175, 55, 0.2);
    color: #D4AF37;
    padding: 4px 10px;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.85rem;
}

.h2h-losses {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    padding: 4px 10px;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.85rem;
}

.h2h-matches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h2h-match {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    padding: 10px 12px;
    border-radius: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.h2h-date {
    color: #A6A6A6;
    font-size: 0.75rem;
    min-width: 80px;
}

.h2h-teams {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
}

.h2h-home, .h2h-away {
    color: #ccc;
    font-size: 0.8rem;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2h-home.winner, .h2h-away.winner {
    color: #E6C860;
    font-weight: 600;
}

.h2h-score {
    background: rgba(230, 200, 96, 0.15);
    color: #E6C860;
    padding: 4px 10px;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.85rem;
}

.no-h2h-message {
    color: #A6A6A6;
    font-size: 0.85rem;
    text-align: center;
    padding: 10px;
}

/* News Section */
.news-section {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 15px;
    margin-top: 15px;
}

.news-section h4 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1rem;
    text-align: center;
}

.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.team-news {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 12px;
}

.team-news h5 {
    color: #D4AF37;
    font-size: 0.85rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.news-item {
    margin-bottom: 10px;
}

.news-item:last-child {
    margin-bottom: 0;
}

.news-item a {
    display: block;
    text-decoration: none;
    padding: 8px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.2s;
}

.news-item a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.news-title {
    display: block;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.3;
    margin-bottom: 5px;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
}

.news-source {
    color: #E6C860;
}

.news-date {
    color: #A6A6A6;
}

.news-loading {
    color: #A6A6A6;
    font-size: 0.85rem;
    padding: 10px;
    text-align: center;
}

.news-error {
    color: #ff6b6b;
}

.no-news {
    color: #A6A6A6;
    font-size: 0.8rem;
    font-style: italic;
    text-align: center;
    padding: 10px;
    margin: 0;
}

.no-data {
    color: #A6A6A6;
    font-style: italic;
}

.no-stats-message {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 0;
    padding: 15px;
    margin-top: 15px;
}

.no-stats-message p {
    color: #D4AF37;
    font-size: 0.85rem;
    margin: 0;
    text-align: center;
}

footer {
    padding: 0;
    color: #A6A6A6;
    font-size: 0.85rem;
}

footer p {
    margin-bottom: 5px;
}

/* Footer CTA Banner */
/* Flat panel, not a blue-gradient band. Blue was a third accent used nowhere
   else on the site; unified to the standard flat dark card + green accent so it
   stops competing with each page's own hero. */
.footer-cta {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px;
    margin-bottom: 28px;
}
.footer-cta-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.footer-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-cta-text strong {
    color: #eee;
    font-size: 1rem;
}
.footer-cta-text span {
    color: #A6A6A6;
    font-size: 0.82rem;
}
.footer-cta-btn {
    display: inline-block;
    padding: 10px 24px;
    background: rgba(212, 175, 55, 0.14);
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 0;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.2s, transform 0.15s;
}
.footer-cta-btn:hover {
    background: rgba(212, 175, 55, 0.22);
    transform: translateY(-1px);
}
.footer-cta-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Inline email capture form (footer) */
.footer-cta-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.footer-cta-input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 10px 14px;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    color: #F5F5F5;
    font-size: 0.9rem;
    font-family: inherit;
}
.footer-cta-input::placeholder { color: #6b7784; }
.footer-cta-input:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}
/* In the form, the button is the primary action -> solid green. */
.footer-cta-form .footer-cta-btn {
    background: linear-gradient(90deg, #D4AF37, #D4AF37);
    color: #000000;
    border-color: transparent;
    white-space: nowrap;
    cursor: pointer;
}
.footer-cta-form .footer-cta-btn:hover { background: linear-gradient(90deg, #D4AF37, #D4AF37); }
.footer-cta-alt {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #8a97a5;
}
.footer-cta-alt a { color: #D4AF37; text-decoration: none; font-weight: 600; }
.footer-cta-alt a:hover { text-decoration: underline; }

/* "Keep reading" hook — turns a one-page visit into two or three */
.keep-reading { max-width: 1000px; margin: 40px auto 8px; padding: 0 18px; }
.kr-title {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff;
    text-align: center; margin: 0 0 18px;
}
.kr-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .kr-grid { grid-template-columns: repeat(3, 1fr); } }
.kr-card {
    display: flex; flex-direction: column; gap: 6px; text-decoration: none;
    background: #0D0D0D; border: 1px solid #1A1A1A; border-radius: 0; padding: 18px 20px;
    transition: border-color .18s ease, transform .18s ease;
}
.kr-card:hover { border-color: rgba(212, 175, 55, 0.45); transform: translateY(-2px); }
.kr-eyebrow {
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.6rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: #E6C860;
}
.kr-head { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.1rem; color: #fff; }
.kr-desc { color: #93a1b0; font-size: 0.88rem; line-height: 1.45; }
.kr-go { color: #D4AF37; font-weight: 600; font-size: 0.86rem; margin-top: auto; padding-top: 4px; }

/* Footer Grid */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
    gap: 28px;
    padding: 0 0 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
}
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.footer-brand {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: #ddd;
    margin-bottom: 8px;
}
.footer-desc {
    color: #888;
    font-size: 0.82rem;
    line-height: 1.5;
}
.footer-col-title {
    font-weight: 700;
    color: #bbb;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.footer-col a {
    display: block;
    color: #888;
    text-decoration: none;
    font-size: 0.82rem;
    padding: 3px 0;
    transition: color 0.15s;
}
.footer-col a:hover {
    color: #D4AF37;
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    padding-top: 20px;
}
.footer-data-source {
    color: #666;
    font-size: 0.78rem;
}
.footer-links {
    margin: 8px 0;
}
.footer-links a {
    color: #888;
    text-decoration: none;
    font-size: 0.78rem;
}
.footer-links a:hover {
    color: #D4AF37;
}
.footer-sep {
    color: #444;
    margin: 0 6px;
}
.footer-legal {
    color: #666;
    font-size: 0.75rem;
}
.footer-legal a {
    color: #D4AF37;
    text-decoration: none;
}
.footer-legal a:hover {
    text-decoration: underline;
}

/* Legacy social links (kept for any direct uses) */
.social-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 12px 0;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 0;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.social-links a:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.social-links .tg-link {
    background: rgba(0, 136, 204, 0.15);
    color: #29b6f6;
    border: 1px solid rgba(0, 136, 204, 0.3);
}

.social-links .tw-link {
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-cta-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* Responsive */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.8rem;
    }

    .search-form form {
        padding: 12px 16px 16px;
    }
    .search-header {
        padding: 14px 16px 0;
    }
    .form-group {
        min-width: 100%;
        text-align: center;
    }
    .form-group-btn {
        min-width: 100%;
    }

    .form-group label {
        text-align: center;
    }

    .match-teams {
        flex-direction: column;
        gap: 15px;
    }

    .vs {
        padding: 10px 0;
    }

    .match-footer {
        flex-direction: column;
        gap: 10px;
    }

    .favorite-tag {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .prediction-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-stats-section {
        grid-template-columns: 1fr;
    }

    .stat-label, .stat-value {
        font-size: 0.75rem;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    /* H2H Mobile */
    .h2h-record {
        gap: 8px;
    }

    .h2h-team {
        font-size: 0.75rem;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .h2h-wins, .h2h-draws, .h2h-losses {
        padding: 3px 8px;
        font-size: 0.75rem;
    }

    .h2h-match {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .h2h-teams {
        width: 100%;
        justify-content: space-between;
    }

    .h2h-home, .h2h-away {
        font-size: 0.75rem;
        max-width: 100px;
    }
}

/* ==========================================
   BUILD-A-BET SECTION
   ========================================== */

.build-a-bet {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    scroll-margin-top: 80px;
}

.bab-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 50px 22px 28px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(230, 200, 96, 0.08) 50%, rgba(212, 175, 55, 0.05) 100%);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    position: relative;
    text-align: center;
}

.bab-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, #E6C860, transparent);
    opacity: 0.4;
}

.bab-header:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(230, 200, 96, 0.12) 50%, rgba(212, 175, 55, 0.08) 100%);
}

.bab-header h2 {
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.4rem;
    margin: 0;
    letter-spacing: -0.01em;
}

.bab-subtitle {
    color: #A6A6A6;
    font-size: 0.9rem;
}

.bab-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.bab-header-badge {
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bab-header-stats {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.bab-stat {
    font-size: 0.85rem;
    color: #A6A6A6;
}
.bab-stat-value {
    color: #D4AF37;
    font-weight: 700;
}
.bab-no-matches {
    text-align: center;
    padding: 30px 20px;
    color: #A6A6A6;
}
.bab-no-matches p {
    margin-bottom: 15px;
    font-size: 0.95rem;
}

/* Collapsed state glow */
.build-a-bet:not(.bab-expanded) {
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.08);
}
.build-a-bet:not(.bab-expanded) .bab-header:hover {
    background: rgba(212, 175, 55, 0.05);
}

.bet-counter {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 0;
    padding: 5px 12px;
    margin-right: 10px;
}

.counter-value {
    color: #E6C860;
    font-weight: 700;
    font-size: 1rem;
}

.counter-label {
    color: #A6A6A6;
    font-size: 0.75rem;
}

.bab-header .toggle-icon {
    color: #D4AF37;
    transition: transform 0.3s;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.build-a-bet.bab-expanded .bab-header .toggle-icon {
    transform: translateY(-50%) rotate(180deg);
}

.bab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.3s;
    padding: 0 25px;
}

.build-a-bet.bab-expanded .bab-content {
    max-height: none;
    overflow-y: visible;
    padding: 28px;
}

/* Scrollbar styling for bab-content */
.bab-content::-webkit-scrollbar {
    width: 8px;
}

.bab-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0;
}

.bab-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0;
}

.bab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Quick Builder Form */
.bab-quick {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.06), rgba(255, 255, 255, 0.04));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 175, 55, 0.12);
    border-radius: 0;
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
}

.bab-quick h3 {
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.15rem;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.bab-description {
    color: #A6A6A6;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.bab-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.bab-form-group {
    flex: 1;
    min-width: 150px;
}

.bab-form-group label {
    display: block;
    margin-bottom: 6px;
    color: #aaa;
    font-size: 0.85rem;
    text-align: center;
}

.bab-form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.bab-form-group select option {
    text-align: center;
    background: #000000;
    color: #fff;
}

.bab-form-group select:focus {
    outline: none;
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

/* Custom Fold Input */
.custom-fold-input {
    width: 100%;
    padding: 10px 12px;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
}

.custom-fold-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.custom-fold-input:focus {
    outline: none;
    border-color: #D4AF37;
    background: rgba(255, 255, 255, 0.15);
}

/* Hide number input spinners */
.custom-fold-input::-webkit-outer-spin-button,
.custom-fold-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom-fold-input[type=number] {
    -moz-appearance: textfield;
}

/* Checkbox Styles */
.checkbox-group {
    display: none; /* Hidden by default, shown via JS when bet type is ALL */
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #D4AF37;
    cursor: pointer;
}

.checkbox-hint {
    display: block;
    font-size: 0.7rem;
    color: #A6A6A6;
    margin-top: 4px;
    text-align: center;
}

/* Quick Builder Grid Layout */
.bab-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 20px;
    align-items: start;
}

/* Toggle Pill Row */
.bab-toggles-row {
    display: none; /* Hidden by default, shown via JS when bet type is ALL */
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

.toggle-pill {
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    color: #aaa;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.85rem;
    user-select: none;
}

.toggle-pill input {
    display: none;
}

.toggle-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ccc;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toggle-pill:has(input:checked) {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(212, 175, 55, 0.4);
    color: #D4AF37;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Build Button Row */
.bab-build-row {
    margin-top: 15px;
}

/* Custom Bet Types Grid */
.custom-bet-types {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    margin-top: 10px;
}

.custom-bet-types > label {
    display: block;
    margin-bottom: 10px;
    color: #D4AF37;
    font-weight: 600;
    font-size: 0.9rem;
}

.custom-bet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.custom-bet-grid .checkbox-label {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0;
    transition: background 0.2s;
}

.custom-bet-grid .checkbox-label:hover {
    background: rgba(255, 255, 255, 0.1);
}

.custom-bet-grid .checkbox-label input:checked + span,
.custom-bet-grid .checkbox-label:has(input:checked) {
    color: #D4AF37;
}

/* Probability Slider Styles */
.prob-group {
    min-width: 200px !important;
}

.prob-slider-container {
    width: 100%;
    padding: 5px 0;
}

.prob-slider-container input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(212, 175, 55, 0.15));
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.prob-slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D4AF37, #E6C860);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.prob-slider-container input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.6);
}

.prob-slider-container input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D4AF37, #E6C860);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

.prob-buttons {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.prob-btn {
    padding: 8px 12px;          /* was 4px 8px — too small to tap on mobile */
    min-height: 36px;
    font-size: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.10);
    color: #D2D2D2;             /* was #aaa (~3.6:1) — lift for AA */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.prob-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(212, 175, 55, 0.4);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.prob-btn.active {
    background: rgba(255, 255, 255, 0.3);
    border-color: #D4AF37;
    color: #D4AF37;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.btn-build {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #D4AF37 0%, #D4AF37 40%, #E6C860 100%);
    background-size: 200% 100%;
    border: none;
    border-radius: 0;
    color: #000000;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-position 0.4s ease;
    animation: buildPulse 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.btn-build::after {
    content: '\2192';
    margin-left: 8px;
    display: inline-block;
    transition: transform 0.3s ease;
}

@keyframes buildPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 255, 255, 0.15); background-position: 0% 50%; }
    50%      { box-shadow: 0 0 20px rgba(212, 175, 55, 0.35), 0 0 40px rgba(212, 175, 55, 0.1); background-position: 100% 50%; }
}

.btn-build:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4), 0 0 30px rgba(212, 175, 55, 0.15);
    animation: none;
    background-position: 100% 50%;
}

.btn-build:hover::after {
    transform: translateX(4px);
}

/* Lucky Dip Inline */
.lucky-dip-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.or-text {
    color: #A6A6A6;
    font-size: 0.85rem;
}

.btn-lucky-dip-small {
    padding: 10px 20px;
    background: linear-gradient(135deg, #ff6b6b, #D4AF37);
    border: none;
    border-radius: 0;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-lucky-dip-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 107, 107, 0.4), 0 0 15px rgba(212, 175, 55, 0.2);
}

/* Error, Warning, and Info Messages */
.bab-error, .bab-warning, .bab-info {
    background: rgba(255, 107, 107, 0.15);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 0;
    padding: 15px;
    margin-bottom: 15px;
}

.bab-error p, .bab-warning p, .bab-info p {
    color: #ff6b6b;
    font-size: 0.9rem;
    margin: 0;
}

.bab-warning {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.3);
}

.bab-warning p {
    color: #D4AF37;
}

.bab-info {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(212, 175, 55, 0.3);
}

.bab-info p {
    color: #D4AF37;
}

/* Insights Row (Bankers + Value Bets dropdowns) */
.insights-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Insight Dropdown (shared styles for banker/value) */
.insight-dropdown {
    border-radius: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.insight-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.insight-header:hover {
    filter: brightness(1.15);
    transform: translateX(2px);
}

.insight-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
}

.insight-icon {
    font-size: 1.1rem;
}

.insight-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 0;
    font-size: 0.8rem;
}

.insight-hint {
    flex: 1;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    text-align: right;
}

.dropdown-arrow {
    font-size: 0.75rem;
    transition: transform 0.3s;
    opacity: 0.6;
}

.insight-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.insight-dropdown .insight-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 18px;
}

.insight-dropdown.open .insight-content {
    max-height: 800px;
    padding: 5px 18px 18px 18px;
}

/* Place Bet Dropdown — needs more room for bookmaker cards */
.place-bet-dropdown {
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: inset 3px 0 0 #D4AF37;
}

.place-bet-dropdown .insight-header {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.03));
}

.place-bet-dropdown .insight-title {
    color: #D4AF37;
}

.place-bet-dropdown .insight-badge {
    background: rgba(212, 175, 55, 0.25);
    color: #E6C860;
}

.place-bet-dropdown.open .insight-content {
    max-height: 3000px;
}

/* Banker Dropdown Specific */
.banker-dropdown {
    background: rgba(230, 200, 96, 0.08);
    border: 1px solid rgba(230, 200, 96, 0.25);
    box-shadow: inset 3px 0 0 #E6C860;
}

.banker-dropdown .insight-header {
    background: linear-gradient(90deg, rgba(230, 200, 96, 0.15), rgba(230, 200, 96, 0.05));
}

.banker-dropdown .insight-title {
    color: #E6C860;
}

.banker-dropdown .insight-badge {
    background: rgba(230, 200, 96, 0.3);
    color: #E6C860;
}

/* Value Dropdown Specific */
.value-dropdown {
    background: rgba(138, 43, 226, 0.08);
    border: 1px solid rgba(138, 43, 226, 0.25);
    box-shadow: inset 3px 0 0 #D4AF37;
}

.value-dropdown .insight-header {
    background: linear-gradient(90deg, rgba(138, 43, 226, 0.15), rgba(138, 43, 226, 0.05));
}

.value-dropdown .insight-title {
    color: #D4AF37;
}

.value-dropdown .insight-badge {
    background: rgba(138, 43, 226, 0.3);
    color: #b57edc;
}

.banker-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.banker-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0;
    border-left: 3px solid #E6C860;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.banker-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(230, 200, 96, 0.1);
}

.banker-card:first-child {
    background: rgba(230, 200, 96, 0.1);
}

.banker-match {
    display: flex;
    align-items: center;
    gap: 10px;
}

.banker-rank {
    font-size: 0.9rem;
    font-weight: 700;
    color: #E6C860;
}

.banker-teams {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.banker-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.banker-type {
    color: #E6C860;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.banker-pick {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    margin-right: auto;
}

.banker-probability {
    background: rgba(212, 175, 55, 0.25);
    color: #E6C860;
    padding: 3px 10px;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 600;
}

.banker-decimal {
    color: #E6C860;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Value Bets Styles */
.value-explainer {
    color: #a8a8a8;
    font-size: 0.7rem;
    text-align: center;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: rgba(138, 43, 226, 0.15);
    border-radius: 0;
    line-height: 1.3;
}

.value-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.value-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0;
    border-left: 3px solid #D4AF37;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.value-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(138, 43, 226, 0.1);
}

.value-card:first-child {
    background: rgba(138, 43, 226, 0.1);
}

.value-match {
    display: flex;
    align-items: center;
    gap: 10px;
}

.edge-value {
    color: #E6C860;
    font-weight: 700;
    font-size: 0.9rem;
}

.value-teams {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.value-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.value-type {
    color: #D4AF37;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.value-pick {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    margin-right: auto;
}

.value-probability {
    background: rgba(212, 175, 55, 0.25);
    color: #E6C860;
    padding: 3px 10px;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 600;
}

.value-decimal {
    color: #D4AF37;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Odds Disclaimer */
.odds-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 0;
    margin-bottom: 15px;
}

.odds-disclaimer .disclaimer-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.odds-disclaimer span {
    color: #ccc;
    font-size: 0.8rem;
    line-height: 1.4;
}

.odds-disclaimer strong {
    color: #E6C860;
}

/* Accumulator Result */
.accumulator-result {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(230, 200, 96, 0.04) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 0;
    padding: 24px;
    animation: accaSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    position: relative;
}

.accumulator-result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #D4AF37, #E6C860, #D4AF37);
    background-size: 200% 100%;
    border-radius: 0;
    animation: accaShimmer 3s ease infinite;
}

@keyframes accaSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

.acca-header {
    margin-bottom: 20px;
}

.acca-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.acca-header h3 {
    color: #E6C860;
    font-size: 1.3rem;
    margin: 0;
    text-align: center;
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}

.btn-clear {
    padding: 6px 15px;
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.4);
    border-radius: 0;
    color: #ff6b6b;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-clear:hover {
    background: rgba(255, 107, 107, 0.3);
    color: #fff;
}

.acca-summary {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.acca-stat {
    text-align: center;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0;
    min-width: 120px;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.acca-stat:hover {
    background: rgba(255, 255, 255, 0.08);
}

.acca-stat.highlight {
    background: linear-gradient(135deg, rgba(230, 200, 96, 0.12), rgba(212, 175, 55, 0.08));
    border: 1px solid rgba(230, 200, 96, 0.3);
    box-shadow: 0 0 20px rgba(230, 200, 96, 0.08);
}

.acca-label {
    display: block;
    color: #A6A6A6;
    font-size: 0.75rem;
    margin-bottom: 5px;
}

.acca-value {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: #fff;
}

.acca-value.odds-value {
    color: #D4AF37;
}

.acca-value.return-value {
    color: #E6C860;
    font-size: 1.6rem;
    text-shadow: 0 0 20px rgba(230, 200, 96, 0.3);
}

/* Stake Calculator */
.stake-calculator {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stake-title {
    display: block;
    color: #A6A6A6;
    font-size: 0.8rem;
    margin-bottom: 10px;
    text-align: center;
}

.stake-options {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.stake-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    min-width: 75px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.stake-option:hover {
    background: rgba(230, 200, 96, 0.08);
    border-color: rgba(230, 200, 96, 0.2);
    transform: translateY(-2px);
}

/* Bookmaker Odds Checker */
.bookmaker-checker {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.checker-header {
    margin-bottom: 10px;
}

.checker-title {
    color: #A6A6A6;
    font-size: 0.8rem;
}

.checker-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.bookmaker-select {
    flex: 1;
    min-width: 180px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
}

.bookmaker-select option {
    background: #000000;
    color: #fff;
}

.btn-check-odds {
    padding: 10px 20px;
    background: linear-gradient(135deg, #D4AF37, #E6C860);
    border: none;
    border-radius: 0;
    color: #000000;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-check-odds:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.btn-clear-odds {
    padding: 10px 16px;
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.4);
    border-radius: 0;
    color: #ff6b6b;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-clear-odds:hover {
    background: rgba(255, 107, 107, 0.3);
    border-color: rgba(255, 107, 107, 0.6);
}

.bookmaker-results {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0;
}

.bookmaker-results.collapsed .bookmaker-odds-body {
    display: none;
}

.bookmaker-odds-body {
    transition: all 0.3s ease;
}

.loading-odds {
    text-align: center;
    color: #D4AF37;
    font-size: 0.9rem;
    padding: 20px;
}

.odds-error {
    text-align: center;
    color: #ff6b6b;
    font-size: 0.9rem;
    padding: 20px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 0;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.odds-error.rate-limited {
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    line-height: 1.6;
}

.odds-error.rate-limited strong {
    color: #ff6b6b;
    font-size: 1.1rem;
}

.bookmaker-odds-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: opacity 0.2s;
}

.bookmaker-odds-header:hover {
    opacity: 0.8;
}

.bm-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bm-collapse-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0;
    color: #D4AF37;
    font-weight: 700;
    font-size: 0.9rem;
}

.bm-name {
    color: #D4AF37;
    font-weight: 600;
    font-size: 1rem;
}

.bm-found {
    color: #A6A6A6;
    font-size: 0.8rem;
}

.bookmaker-odds-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bm-selection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.bm-selection.no-odds {
    opacity: 0.6;
}

.bm-match {
    color: #fff;
    font-size: 0.85rem;
    flex: 1;
    min-width: 150px;
}

.bm-bet {
    color: #A6A6A6;
    font-size: 0.75rem;
    text-transform: capitalize;
}

.bm-odds {
    color: #E6C860;
    font-weight: 600;
    font-size: 0.9rem;
}

.bm-odds.unavailable {
    color: #ff6b6b;
}

.bookmaker-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bookmaker-total span {
    color: #A6A6A6;
    font-size: 0.9rem;
}

.bm-total-odds {
    color: #E6C860 !important;
    font-weight: 700;
    font-size: 1.2rem !important;
}

.odds-error {
    text-align: center;
    color: #ff6b6b;
    font-size: 0.9rem;
    padding: 20px;
}

.stake-amount {
    color: #A6A6A6;
    font-size: 0.75rem;
    margin-bottom: 3px;
}

.stake-return {
    color: #E6C860;
    font-weight: 700;
    font-size: 0.95rem;
}

/* Selection Cards */
.acca-selections {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 150px;
    overflow-x: hidden;
    padding-right: 5px;
    counter-reset: selcard;
}

/* Staggered entrance for selection cards */
.selection-card {
    animation: selCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.selection-card:nth-child(1) { animation-delay: 0.05s; }
.selection-card:nth-child(2) { animation-delay: 0.1s; }
.selection-card:nth-child(3) { animation-delay: 0.15s; }
.selection-card:nth-child(4) { animation-delay: 0.2s; }
.selection-card:nth-child(5) { animation-delay: 0.25s; }
.selection-card:nth-child(6) { animation-delay: 0.3s; }
.selection-card:nth-child(7) { animation-delay: 0.35s; }
.selection-card:nth-child(8) { animation-delay: 0.4s; }
.selection-card:nth-child(9) { animation-delay: 0.45s; }
.selection-card:nth-child(10) { animation-delay: 0.5s; }

@keyframes selCardIn {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Scrollbar styling for selections */
.acca-selections::-webkit-scrollbar {
    width: 6px;
}

.acca-selections::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0;
}

.acca-selections::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0;
}

.acca-selections::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ========================================
   Accumulator Selection Cards (Redesigned)
   ======================================== */

.selection-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, rgba(25, 25, 25, 0.95), rgba(19, 19, 19, 0.98));
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.selection-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.selection-card.market-unavailable {
    border-color: rgba(212, 175, 55, 0.15);
}

.selection-unavailable-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(212, 175, 55, 0.15);
    border-radius: 0;
    margin-bottom: 5px;
}

.unavailable-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #E6C860;
    color: #000000;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.unavailable-text {
    color: #E6C860;
    font-size: 0.75rem;
}

/* --- Top bar: Leg number + Teams + Odds badge --- */
.sel-card-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sel-leg-number {
    color: #000000;
    font-size: 0.7rem;
    font-weight: 800;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    padding: 6px 12px;
    border-radius: 0;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.sel-match-info {
    flex: 1;
    min-width: 0;
}

.sel-teams {
    color: #F5F5F5;
    font-weight: 700;
    font-size: 1.05rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sel-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.sel-league {
    color: #8A8A8A;
    font-size: 0.75rem;
}

.sel-kickoff {
    color: #D4AF37;
    font-size: 0.68rem;
    padding: 1px 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0;
}

/* --- Pick summary shown inline on top bar --- */
.sel-pick-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.sel-pick-type {
    color: #D4AF37;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 0;
}

.sel-pick-arrow {
    color: #4a5a6a;
    font-size: 0.7rem;
}

.sel-pick-selection {
    color: #e0e8f0;
    font-weight: 600;
    font-size: 0.82rem;
}

.sel-pick-prob {
    color: #E6C860;
    font-weight: 700;
    font-size: 0.75rem;
    background: rgba(212, 175, 55, 0.1);
    padding: 2px 8px;
    border-radius: 0;
}

.sel-odds-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(230, 200, 96, 0.05));
    border-radius: 0;
    border: 1px solid rgba(212, 175, 55, 0.2);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.selection-card:hover .sel-odds-badge {
    border-color: rgba(230, 200, 96, 0.35);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(230, 200, 96, 0.08));
}

.sel-odds-value {
    color: #D4AF37;
    font-weight: 800;
    font-size: 1.2rem;
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

.sel-odds-bookie {
    color: #4a5a6a;
    font-size: 0.6rem;
    margin-top: 1px;
}

/* --- Body: Insights + Reasoning --- */
.sel-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sel-prediction {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sel-bet-type {
    color: #D4AF37;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 10px;
    border-radius: 0;
}

.sel-pick-name {
    color: #F5F5F5;
    font-weight: 700;
    font-size: 1.0rem;
}

.sel-prob-pill {
    margin-left: auto;
    background: rgba(212, 175, 55, 0.12);
    color: #E6C860;
    padding: 5px 14px;
    border-radius: 0;
    font-size: 0.88rem;
    font-weight: 700;
    border: 1px solid rgba(212, 175, 55, 0.15);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* --- Insights row (H2H, Form) --- */
.sel-insights {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sel-insight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 0;
    font-size: 0.88rem;
}

.sel-insight-label {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 45px;
}

.sel-insight-value {
    font-weight: 600;
    font-size: 0.9rem;
}

.sel-insight-detail {
    color: #8A8A8A;
    font-size: 0.82rem;
    margin-left: 4px;
}

.sel-h2h {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.15);
}
.sel-h2h .sel-insight-label {
    color: #D4AF37;
}
.sel-h2h .sel-insight-value {
    color: #c8e6c9;
}

.sel-form-home {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.sel-form-home .sel-insight-label {
    color: #D4AF37;
}
.sel-form-home .sel-insight-value {
    color: #b2ebf2;
    font-size: 0.85rem;
}

.sel-form-away {
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.12);
}
.sel-form-away .sel-insight-label {
    color: #D4AF37;
}
.sel-form-away .sel-insight-value {
    color: #E6C860;
    font-size: 0.85rem;
}

/* --- Reasoning --- */
.sel-reasoning {
    padding: 12px 16px;
    background: rgba(230, 200, 96, 0.06);
    border-radius: 0;
    border: 1px solid rgba(230, 200, 96, 0.1);
}

.sel-reasoning-text {
    color: #D4AF37;
    font-size: 0.85rem;
    line-height: 1.6;
    display: block;
    font-style: italic;
}

/* Odds Across Bookmakers - collapsible section */
.selection-bookmaker-odds {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.2s;
}

.selection-bookmaker-odds:hover {
    background: rgba(255, 255, 255, 0.08);
}

.selection-bookmaker-odds .bm-odds-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.selection-bookmaker-odds .bm-odds-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0;
    color: #D4AF37;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.selection-bookmaker-odds .bm-odds-label {
    color: #D4AF37;
    font-size: 0.7rem;
    font-weight: 600;
}

.selection-bookmaker-odds .bm-odds-count {
    color: #A6A6A6;
    font-size: 0.65rem;
}

.selection-bookmaker-odds .bm-odds-best {
    color: #E6C860;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: auto;
}

.selection-bookmaker-odds .bm-odds-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Collapsed state - hide the list */
.selection-bookmaker-odds.collapsed .bm-odds-list {
    display: none;
}

.selection-bookmaker-odds.collapsed .bm-odds-toggle {
    content: '+';
}

.selection-bookmaker-odds:not(.collapsed) .bm-odds-toggle::after {
    content: '';
}

.selection-bookmaker-odds:not(.collapsed) .bm-odds-toggle {
    background: rgba(212, 175, 55, 0.2);
    color: #E6C860;
}

/* Update toggle icon based on state */
.selection-bookmaker-odds.collapsed .bm-odds-toggle::before {
    content: '+';
}

.selection-bookmaker-odds:not(.collapsed) .bm-odds-toggle::before {
    content: '-';
}

.selection-bookmaker-odds .bm-odds-toggle {
    font-size: 0;
}

.selection-bookmaker-odds .bm-odds-toggle::before {
    font-size: 0.75rem;
}

.bm-odds-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.10);
    padding: 3px 8px;
    border-radius: 0;
    font-size: 0.72rem;
}

.bm-odds-name {
    color: #aaa;
}

.bm-odds-value {
    color: #E6C860;
    font-weight: 600;
}

.selection-no-bookmaker-odds {
    margin-top: 6px;
}

.no-odds-message {
    color: #A6A6A6;
    font-size: 0.7rem;
    font-style: italic;
}

.h2h-label {
    color: #D4AF37;
    font-size: 0.7rem;
    font-weight: 600;
}

.h2h-summary {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
}

.h2h-detail {
    color: #A6A6A6;
    font-size: 0.7rem;
}

/* Mobile Responsive for Build-a-Bet & Pick & Mix */
@media (max-width: 768px) {
    .bab-header {
        gap: 6px;
        padding: 15px 40px 15px 20px;
    }

    .bab-header h2 {
        font-size: 1.1rem;
    }

    .bab-subtitle {
        font-size: 0.8rem;
    }

    .bab-header-stats {
        gap: 12px;
    }
    .bab-stat {
        font-size: 0.8rem;
    }

    .byob-header {
        gap: 6px;
        padding: 15px 40px 15px 20px;
    }
    .byob-header h2 {
        font-size: 1.1rem;
    }
    .byob-subtitle {
        font-size: 0.8rem;
    }

    .bab-form-group {
        min-width: 100%;
    }

    .bab-controls-grid {
        grid-template-columns: 1fr;
    }

    .acca-summary {
        flex-direction: column;
        gap: 10px;
    }

    .acca-stat {
        min-width: 100%;
    }

    .sel-card-top {
        flex-wrap: wrap;
        gap: 8px;
    }

    .sel-odds-badge {
        margin-left: auto;
    }

    .sel-prediction {
        flex-wrap: wrap;
    }

    .sel-insights {
        flex-direction: column;
    }

    .sel-reasoning-text {
        font-size: 0.7rem;
    }

    /* Bookmaker checker mobile */
    .checker-controls {
        flex-direction: column;
        gap: 8px;
    }

    .bookmaker-select {
        width: 100%;
        min-width: unset;
    }

    .btn-check-odds,
    .btn-clear-odds {
        width: 100%;
        padding: 12px;
    }

    .bm-selection {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px;
    }

    .bm-match {
        min-width: unset;
        width: 100%;
        font-size: 0.8rem;
    }

    .bm-bet {
        font-size: 0.7rem;
    }

    .bm-odds {
        font-size: 0.85rem;
    }

    /* Bookmaker odds in selections - mobile */
    .selection-bookmaker-odds {
        padding: 6px 8px;
    }

    .selection-bookmaker-odds .bm-odds-header {
        gap: 4px;
    }

    .selection-bookmaker-odds .bm-odds-label {
        font-size: 0.62rem;
    }

    .selection-bookmaker-odds .bm-odds-count {
        font-size: 0.58rem;
    }

    .selection-bookmaker-odds .bm-odds-best {
        font-size: 0.65rem;
    }

    .selection-bookmaker-odds .bm-odds-list {
        gap: 4px 8px;
        margin-top: 6px;
        padding-top: 6px;
    }

    .bm-odds-item {
        padding: 2px 6px;
        font-size: 0.65rem;
        gap: 3px;
    }

    .bm-odds-name {
        max-width: 55px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ==========================================
   NAVIGATION
   ========================================== */

/* Sticky header wrapper */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(19, 19, 19, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    /* Full-width sticky header that breaks out of the container's 20px padding
       WITHOUT overflowing the viewport. The old `margin:-20px -20px` pushed the
       header 20px past the right edge (scrollWidth 1300 > 1280 = sideways scroll
       on desktop). This spans the container's own width instead. */
    margin: -20px 0 20px;
    padding: 10px 20px;
}

.site-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
}
.site-logo .fbb-mark { display: block; flex: 0 0 auto; }
.site-logo-word {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FFFFFF;
}

.main-nav {
    display: flex;
    justify-content: center;
    gap: 4px;
    grid-column: 2;
    justify-self: center;
}

/* Right-hand cluster — search icon + Build a Bet CTA pill. */
.nav-actions {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border-radius: 0;
    background: linear-gradient(135deg, #D4AF37 0%, #D4AF37 100%);
    color: #000000;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.2px;
    text-decoration: none;
    box-shadow: 0 4px 12px -4px rgba(212, 175, 55, 0.35);
    transition: transform 120ms ease, box-shadow 120ms ease;
    white-space: nowrap;
}
.nav-cta:hover,
.nav-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgba(212, 175, 55, 0.55);
    outline: none;
}

/* Nav search — small icon button that expands to an inline input. */
.nav-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}
/* Drawer-only team search lives inside .main-nav; hidden on desktop where the
   header .nav-search (icon that expands) is used instead. Shown in the mobile
   media query below. */
.nav-search--drawer {
    display: none;
}
.nav-search-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-search-toggle:hover,
.nav-search-toggle:focus-visible {
    color: #D4AF37;
    border-color: rgba(212, 175, 55, 0.4);
    outline: none;
}
/* Collapse-from-0 animation applies ONLY to the icon-expand variant
   (bare .nav-search + data-open). The always-open bar (.nav-search--bar) and
   the mobile drawer (.nav-search--drawer) are excluded here so the base rule
   can never collapse their inputs to width:0. */
.nav-search:not(.nav-search--bar):not(.nav-search--drawer) .nav-search-input {
    width: 0;
    padding: 0;
    transition: width 0.2s ease, padding 0.2s ease;
}
.nav-search-input {
    border: none;
    background: rgba(255, 255, 255, 0.04);
    color: #F5F5F5;
    font: inherit;
    border-radius: 0;
    height: 36px;
}
.nav-search[data-open="true"] .nav-search-input {
    width: 220px;
    padding: 0 12px;
    border: 1px solid rgba(212, 175, 55, 0.4);
}
.nav-search[data-open="true"] .nav-search-toggle {
    color: #D4AF37;
}

/* Always-visible desktop search bar (July 2026). The input sits open at rest
   with a decorative in-field magnifier, instead of hiding behind a toggle. */
.nav-search--bar {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0;
    padding: 0 10px;
    height: 38px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.nav-search--bar:focus-within {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(255, 255, 255, 0.06);
}
.nav-search-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    margin-right: 6px;
    flex: 0 0 auto;
}
.nav-search--bar:focus-within .nav-search-icon { color: #D4AF37; }
/* Always its full width. !important is belt-and-braces so a stale or
   mis-ordered deploy of the base .nav-search-input rule can never collapse
   this always-visible bar to width:0 (the "search doesn't open" desktop bug). */
/* RESTS COMPACT, EXPANDS OVER THE BAR. A 200px always-open field could not fit:
   the header row is 1120px inside the container and demanded 1304px on the home
   page, 1353px where the "Build a Bet" CTA also shows, so the field was shoved past
   the right edge with its placeholder sliced mid-word. Slimming the nav recovered
   96px, nowhere near enough. So the field rests as a 38px magnifier and expands to
   320px ON FOCUS, overlaying the nav rather than widening the row. The input is
   stretched across the whole resting box, so a click anywhere in it focuses the
   field with no JS, and it is still tab-reachable. The wrap keeps its 38px slot
   while focused so the CTA beside it never jumps. */
.nav-search--bar { width: 38px; padding: 0; justify-content: center; }
.nav-search--bar .nav-search-input {
    position: absolute;
    inset: 0;
    width: 100% !important;
    padding: 0;
    height: 100%;
    background: transparent;
    border: none;
    color: transparent;   /* no text peeking out of a 38px box */
    cursor: pointer;
}
/* Hidden at rest: a placeholder in a 38px field is the clipped-text bug itself.
   The full wording stays in aria-label, so screen readers keep it either way. */
.nav-search--bar .nav-search-input::placeholder { color: transparent; }
.nav-search--bar .nav-search-icon { margin: 0; pointer-events: none; }

.nav-search--bar:focus-within .nav-search-input {
    position: absolute;
    /* left/bottom MUST be released. The resting rule uses inset: 0, so left: 0 is
       still in play here; left + right + an explicit width is over-constrained and
       the browser drops `right`, which anchored the expanded field to the wrap's
       LEFT edge and ran it 320px off the right of the viewport. */
    left: auto;
    bottom: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 320px !important;
    max-width: calc(100vw - 48px);
    height: 36px;
    padding: 0 12px;
    background: #0D0D0D;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 0;
    color: #F5F5F5;
    cursor: text;
    z-index: 1300;
}
.nav-search--bar:focus-within .nav-search-input::placeholder { color: var(--text-muted); }
/* The resting magnifier sits mid-box, which would land in the middle of the
   expanded field. Drop it while expanded; the green border reads as focus. */
.nav-search--bar:focus-within .nav-search-icon { opacity: 0; }

/* THE HEADER ROW HAS NO SLACK, so the two things that can go, go, rather than
   letting anything overflow the header again.
   1. 1101-1240px: the container has not yet reached its 1200px cap, so the row is
      narrower than the doors need. Drop the "Build a Bet" pill -- the builder is
      still one tap away under Bets, and on the home page the hero carries it.
   2. Whenever the seasonal World Cup door is in the bar it adds ~110px, which is
      more slack than exists. :has() spots it in the markup and drops the pill for
      the duration, so the header cannot break when the next tournament flips it on
      (this is why the guard is a selector and not a hardcoded width). */
@media (max-width: 1240px) {
    .nav-actions .nav-cta { display: none; }
}
.site-header:has(.nav-link-wc) .nav-actions .nav-cta { display: none; }
/* Results anchor under the whole bar. */
.nav-search--bar[data-has-results="true"] .nav-search-results {
    display: flex;
    flex-direction: column;
}
/* Intermediate desktop band (901–1100px): the full nav is shown (hamburger only
   kicks in ≤900px now) but space is tight, so a 200px bar overflows. Shrink the
   input progressively so the row never pushes past the viewport. */
.nav-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: rgba(17, 17, 17, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 6px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 60;
}
.nav-search[data-open="true"][data-has-results="true"] .nav-search-results {
    display: flex;
    flex-direction: column;
}
.nav-search-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 0;
    color: #D2D2D2;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-search-result:hover,
.nav-search-result:focus-visible {
    background: rgba(212, 175, 55, 0.1);
    color: #fff;
    outline: none;
}
.nav-search-result-name { font-weight: 600; }
.nav-search-result-meta {
    color: #747474;
    font-size: 0.74rem;
}
.nav-search-empty {
    padding: 14px 12px;
    color: #A6A6A6;
    font-size: 0.85rem;
    text-align: center;
}
/* "Ask our Football AI" handoff — a button styled like a result but accented
   as the answer-engine action, so a dead team search becomes a live question. */
.nav-search-askai {
    width: 100%;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.06);
    cursor: pointer;
    text-align: left;
    margin-top: 4px;
    font: inherit;
}
.nav-search-askai:hover,
.nav-search-askai:focus-visible {
    background: rgba(212, 175, 55, 0.16);
    border-color: rgba(212, 175, 55, 0.55);
}
.nav-search-askai .nav-search-result-meta { color: #D4AF37; }
.nav-search-section-label {
    padding: 8px 12px 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #747474;
}
.nav-search-result.nav-search-all {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    color: #D4AF37;
    font-weight: 600;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    /* Effective padding is set by the append-only override block at the end of this
       file (.nav-link, "Nav polish May 2026"), which is later and same-specificity,
       so it wins over anything set here. Change it there, not here. */
    padding: 8px 14px;
    border-radius: 0;
    font-size: 0.9rem;
    font-family: var(--font-heading);
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.nav-link:hover {
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.08);
}

.nav-link.active {
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.1);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: #D4AF37;
    border-radius: 0;
}

/* ── Leagues dropdown ─────────────────────────────────────────────────── */
.nav-leagues { position: relative; display: inline-flex; align-items: center; }
.nav-leagues-toggle {
    background: transparent; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--text-muted);
    font-family: var(--font-heading); font-weight: 500; font-size: 0.9rem;
    padding: 8px 14px; border-radius: 0; transition: all 0.2s ease;
    /* Buttons take line-height: normal from the UA sheet while the sibling <a>
       links inherit the body's 1.6, so the toggles measured 34px tall against the
       links' 39px. Same padding, different box -- the hover/active pill on a
       dropdown was visibly shorter than on a plain link and the bar read as
       mismatched. Pin them to the same line box. */
    line-height: 1.6;
}
.nav-leagues-toggle:hover { color: #D4AF37; background: rgba(212, 175, 55,0.08); }
.nav-leagues.active > .nav-leagues-toggle { color: #D4AF37; background: rgba(212, 175, 55,0.1); }
.nav-leagues-caret { font-size: 0.6rem; transition: transform 0.2s ease; }
.nav-leagues:hover .nav-leagues-caret,
.nav-leagues[data-open="true"] .nav-leagues-caret { transform: rotate(180deg); }

.nav-leagues-menu {
    /* Anchored to the RIGHT edge of the (rightmost) Leagues toggle, opening
       leftward. Uses auto-fit so the 5 columns REFLOW to fewer at narrower widths
       instead of staying a fixed 760px panel that clipped at the viewport edge
       on laptops. Capped in both axes so it can never run off screen; scrolls if
       the reflow makes it tall. */
    position: absolute; top: calc(100% + 8px); right: 0; left: auto; transform: translateY(6px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 22px;
    /* .site-header sets text-align: center for the bar, and it cascaded all the way
       down into these panels, so every list rendered centred: each link started at a
       different x and the gold group header sat over the ragged middle of its own
       column. That is what made the headers and their children look unrelated. Menus
       read down a left edge, so pin one. */
    text-align: left;
    background: rgba(19, 19, 19, 0.99);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.10); border-radius: 0;
    padding: 18px 22px; box-shadow: 0 20px 50px rgba(0, 0, 0,0.5);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 1200;
    width: min(760px, calc(100vw - 32px));
    max-height: min(70vh, calc(100vh - 90px));
    overflow-y: auto;
}
/* HOVER BRIDGE. The panel sits 8px below the toggle (top: 100% + 8px) and that gap
   was dead space: moving the mouse from the button down into the menu left
   .nav-leagues, dropped :hover, and the menu vanished before you could reach it —
   so every dropdown needed a click to use. This invisible strip spans the gap, and
   because it is part of .nav-leagues, hovering it keeps :hover alive, which keeps
   the rule that draws it matching. Self-sustaining, no JS.
   It MUST hang off the container, not the menu: the menu sets overflow-y: auto for
   tall reflows, and an overflow container clips its own pseudo-elements, so a
   .nav-leagues-menu::before bridge is clipped out of existence (measured — all four
   dropdowns still closed on the way down). Gated on :hover so a dead 10px band is
   never sitting over page content swallowing clicks, and on desktop only since the
   mobile drawer stacks the menus inline with no gap to bridge. */
@media (min-width: 1021px) {
    .nav-leagues:hover::after {
        content: "";
        position: absolute;
        top: 100%; left: 0; right: 0; height: 10px;
    }
}
/* Fewer, wider columns on laptop-ish widths so the panel fits without clipping. */
@media (max-width: 1080px) {
    .nav-leagues-menu { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); width: min(620px, calc(100vw - 24px)); }
}
.nav-leagues:hover .nav-leagues-menu,
.nav-leagues:focus-within .nav-leagues-menu,
.nav-leagues[data-open="true"] .nav-leagues-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
}
.nav-leagues-col { display: flex; flex-direction: column; }
.nav-leagues-head {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: #E6C860; margin: 0 0 8px; padding-left: 8px;
}
.nav-leagues-menu a {
    display: block; color: #CECECE; text-decoration: none;
    font-size: 0.86rem; padding: 6px 8px; border-radius: 0; transition: all 0.15s ease;
}
.nav-leagues-menu a:hover { color: #D4AF37; background: rgba(212, 175, 55,0.08); }
.nav-leagues-all { color: #D4AF37 !important; font-weight: 600; margin-top: 4px; }

/* Compact dropdown (July 2026): the Bets + Predictions groups reuse the league
   dropdown markup but have only a handful of links, so they must NOT inherit the
   760px, 5-column, right-anchored league panel (which rendered them as a giant
   near-full-width box). This makes them a tight, single-column, left-anchored
   menu sized to their content. Desktop only; the mobile drawer flattens all
   dropdowns to a stacked list, so this override is scoped above the mobile bp. */
@media (min-width: 1021px) {
    .nav-leagues-menu.nav-menu-compact {
        display: block;                 /* single column, not the auto-fit grid */
        grid-template-columns: none;
        width: max-content;             /* only as wide as the longest link */
        min-width: 190px;
        max-width: 260px;
        left: 0; right: auto;           /* open under the toggle, not right-anchored */
        padding: 8px;
        gap: 0;
    }
    .nav-leagues-menu.nav-menu-compact .nav-leagues-col { gap: 1px; }
    .nav-leagues-menu.nav-menu-compact a { font-size: 0.88rem; padding: 8px 10px; }

    /* The wide panel is right-anchored because it was built for Leagues, which sits
       at the far right of the bar. The groups in .nav-primary sit at the LEFT, so
       right-anchoring threw their panel leftward off the screen: Predictions measured
       at x=-202..558 in a 1440 viewport, 202px of it unreachable. Left-anchor
       anything opening from the primary spine. */
    .nav-primary .nav-leagues-menu { left: 0; right: auto; }

    /* Grouped panels get exactly as many columns as they have groups. auto-fit was
       dividing the fixed 760px by minmax(150px) and handing Predictions FOUR columns
       for three groups, so the panel sprawled with a dead column on the end -- the
       "too much going on" look. Sizing to content instead makes the panel as big as
       its contents and no bigger. */
    .nav-leagues-menu.nav-menu-2col { grid-template-columns: repeat(2, minmax(140px, max-content)); }
    .nav-leagues-menu.nav-menu-3col { grid-template-columns: repeat(3, minmax(140px, max-content)); }
    .nav-leagues-menu.nav-menu-2col,
    .nav-leagues-menu.nav-menu-3col {
        width: max-content;
        max-width: calc(100vw - 32px);
    }
}
/* Leagues holds five regions. At 760px auto-fit gave it four columns, so the fifth
   region wrapped onto a second row and the panel read as a ragged block rather than
   five tidy lists. Widen just enough for all five to line up where there is room. */
@media (min-width: 1200px) {
    .nav-secondary .nav-leagues-menu {
        grid-template-columns: repeat(5, minmax(136px, 1fr));
        width: min(900px, calc(100vw - 32px));
    }
}

/* Hamburger toggle (CSS-only) */
.nav-toggle {
    display: none;
}
.nav-toggle-label {
    display: none;
    cursor: pointer;
    padding: 8px;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    background: #fff;
    height: 2px;
    width: 24px;
    border-radius: 0;
    position: relative;
    transition: all 0.3s;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    content: '';
    position: absolute;
}
.nav-toggle-label span::before { top: -7px; }
.nav-toggle-label span::after { top: 7px; }

/* Hamburger animation when checked */
.nav-toggle:checked + .nav-toggle-label span { background: transparent; }
.nav-toggle:checked + .nav-toggle-label span::before { top: 0; transform: rotate(45deg); }
.nav-toggle:checked + .nav-toggle-label span::after { top: 0; transform: rotate(-45deg); }

/* ==========================================================================
   MOBILE DRAWER — rebuilt from skeleton 13 Aug 2026.
   Why: reader screenshot ("This bit looks buggy on mobile"). The old drawer
   was an absolute panel positioned inside the header's padded container, so
   it floated INSET from the screen edges with page content bleeding around
   it, and its rows mixed three visual languages (plain links, boxed social
   rows, a gold-boxed Founders pill) inherited from desktop dropdown CSS.
   Now: a full-screen takeover panel with ONE row language, a slide-in from
   the right, body scroll-lock, sticky Menu/close head, sticky gold CTA bar.
   The #nav-toggle checkbox remains the single source of truth so the menu
   still opens with CSS alone; JS only adds scroll-lock + close-on-navigate.
   ========================================================================== */

/* Drawer-only chrome is invisible on desktop; the scroll shell dissolves so
   the desktop bar layout never sees the extra wrapper. */
.drawer-head, .drawer-eyebrow, .drawer-cta, .drawer-social,
.dw-acct, .dw-pro, .dw-foot, .dw-sub { display: none; }
.drawer-scroll { display: contents; }

/* Body scroll-lock while the drawer is open (class set by nav.html JS). */
html.drawer-open, html.drawer-open body { overflow: hidden; }
/* While the drawer owns the screen, fixed bottom furniture yields. The
   header is a stacking context (sticky, z:100), so the drawer's own z-index
   can NEVER out-stack the cookie banner (z:9999) or sticky CTAs - hide them
   for the duration instead; they return the moment the drawer closes. */
html.drawer-open #fbb-cookie-banner,
html.drawer-open .mobile-sticky-cta,
html.drawer-open .cw-fab,
html.drawer-open #fbb-slip-chip { display: none !important; }

/* Hamburger breakpoint raised 768→900px (July 2026), then 900→1100px (Jul 25) for
   the same reason one band wider. Measured: at a 1024px viewport the header row is
   944px and the eight doors plus wordmark plus search need 985px even with the CTA
   hidden, so there is no arrangement that fits. Small laptops get the clean drawer
   (where search already lives) rather than a row that bleeds off-screen. */
@media (max-width: 1020px) {
    /* backdrop-filter creates a CONTAINING BLOCK for fixed descendants - with
       it on, the full-screen drawer positions against the header's box and
       renders as a squeezed strip (verified via screenshot, 13 Aug). The
       header background is 95% opaque so losing the blur is invisible;
       losing the drawer is not. */
    .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(19, 19, 19, 0.98);
    }
    .nav-toggle-label {
        display: block;
        order: 1;
    }
    .site-header-inner {
        position: relative;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }
    .site-logo {
        order: 2;
        justify-self: center;
        font-size: 1.15rem;
    }
    .nav-actions {
        order: 3;
        gap: 6px;
    }
    .nav-cta {
        padding: 8px 14px;
        font-size: 0.82rem;
    }
    /* Search icon hides — search lives inside the open hamburger panel only. */
    .nav-actions .nav-search {
        display: none;
    }
    /* THE PANEL: a fixed full-screen takeover, not a header dropdown. inset:0
       kills the old inset-float bug at the root - the panel owns the whole
       viewport, so nothing can bleed around its edges, and 100dvh quirks
       don't apply. Slide-in from the right; visibility gates keyboard/AT
       access while closed. */
    /* .site-header prefix: a later bar-layout rule (~line 11363) sets
       .main-nav{align-items:center} at equal specificity and would win on
       file order, centring (and shrink-wrapping) every drawer row. */
    .site-header .main-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        position: fixed;
        inset: 0;
        /* The drawer is a grid child; desktop sets justify-self:center, and on
           an abspos/fixed grid child that alignment SHRINK-TO-FITS the box
           between left/right instead of stretching it (measured: 260px wide,
           centered). Stretch restores true full-bleed. */
        justify-self: stretch;
        align-self: stretch;
        /* Above the cookie banner (inline z-index:9999 in footer.html) - the
           open menu owns the screen; the banner returns on close. */
        z-index: 10000;
        background: #0D0D0F;
        padding: 0 0 0;
        gap: 0;
        /* App-shell: the PANEL doesn't scroll. Head and CTA are static rows;
           .drawer-scroll (flex:1) owns the scrolling. The first cut made the
           panel the scroller with sticky head/CTA inside it, and iOS Safari
           momentum scroll renders sticky glitchily - bars jumped over rows
           mid-flick ("its all collided"). No sticky = nothing to glitch. */
        overflow: hidden;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 260ms;
    }
    .nav-toggle:checked ~ .main-nav {
        transform: translateX(0);
        visibility: visible;
        transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    @media (prefers-reduced-motion: reduce) {
        .main-nav { transition: none; }
        .nav-toggle:checked ~ .main-nav { transition: none; }
    }

    /* Drawer head: static "Menu" bar with the close X, above the scroll region. */
    .drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        min-height: 60px;
        padding: 0 8px 0 20px;
        background: #0D0D0F;
        border-bottom: 1px solid rgba(212, 175, 55, 0.22);
    }
    /* The one scrolling region between head and CTA bar. */
    .drawer-scroll {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 14px;
    }
    /* Social pills at the top (owner, 14 Aug): one row, three doors. */
    .drawer-social {
        display: flex;
        gap: 8px;
        margin: 12px 20px 0;
    }
    .drawer-social a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0 6px;
        font-size: 0.78rem;
        color: rgba(237, 237, 237, 0.85);
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .drawer-social a:active { color: #D4AF37; border-color: rgba(212, 175, 55, 0.5); }
    /* The Social accordion is redundant in the drawer now - pills own it. */
    .main-nav .nav-social { display: none; }
    .drawer-head-title {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.68rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: #E6C860;
    }
    .drawer-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 1.05rem;
        color: #EDEDED;
        cursor: pointer;
    }
    .drawer-close:active { color: #D4AF37; }

    /* Section eyebrows: tiny mono gold labels, centred (owner, 14 Aug). */
    .drawer-eyebrow {
        display: block;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.6rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgba(230, 200, 96, 0.75);
        padding: 18px 20px 6px;
        text-align: center;
    }

    /* Static bottom CTA bar: the drawer's ONE gold moment. */
    .drawer-cta {
        display: flex;
        gap: 10px;
        flex: 0 0 auto;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
        background: #0D0D0F;
        border-top: 1px solid rgba(212, 175, 55, 0.22);
    }
    .drawer-cta a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.95rem;
        text-decoration: none;
    }
    .drawer-cta-build {
        background: linear-gradient(135deg, #D4AF37, #C9A22E);
        color: #000000;
    }
    .drawer-cta-founders {
        color: #E6C860;
        border: 1px solid rgba(230, 200, 96, 0.45);
        background: rgba(230, 200, 96, 0.07);
    }
    /* Drawer team search: full-width, always-open input at the top of the panel,
       with results shown inline (in-flow, not the desktop absolute flyout) so the
       drawer scrolls to them. This is the fix for "mobile had no team search". */
    .nav-search--drawer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: auto;
        max-width: 100%;
        margin: 14px 20px 4px;
        order: 0;
    }
    .nav-search--drawer .nav-search-input {
        /* !important: the drawer wrapper carries data-open="true", so the
           desktop rule .nav-search[data-open] .nav-search-input {width:220px}
           outranks this on specificity and shrank the field to 220px. */
        width: 100% !important;
        height: 48px;                 /* comfortable tap target */
        padding: 0 16px;
        font-size: 16px;              /* ≥16px stops iOS zoom-on-focus jump */
        color: #EDEDED;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0;
        text-align: left;
        transition: border-color 140ms ease;
    }
    .nav-search--drawer .nav-search-input:focus {
        outline: none;
        border-color: rgba(212, 175, 55, 0.6);
    }
    .nav-search--drawer .nav-search-results {
        position: static;             /* in-flow so the drawer scrolls to it */
        min-width: 0;
        width: 100%;
        max-height: none;
        margin-top: 8px;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.03);
    }
    /* In the drawer, results show whenever there are any (no data-open gate,
       since the drawer input is always open). */
    .nav-search--drawer[data-has-results="true"] .nav-search-results {
        display: flex;
        flex-direction: column;
    }
    .nav-search--drawer .nav-search-result {
        text-align: left;
    }
    /* Groups flow as full-width columns; the desktop primary/secondary divider
       (a vertical border) is reset so it can't draw a stray line down the panel. */
    .main-nav .nav-primary,
    .main-nav .nav-secondary {
        display: flex; flex-direction: column; align-items: stretch;
        width: 100%; max-width: 100%; min-width: 0;
        padding-left: 0; border-left: none;
    }

    /* ONE ROW LANGUAGE, CENTRED (owner, 14 Aug). Every top-level item - plain
       link or group toggle - is the same 52px row: centred label, caret
       pinned to the right edge, hairline below. */
    .main-nav .nav-link {
        text-align: center;
        width: 100%;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 12px 44px;
        font-size: 0.98rem;
        color: #EDEDED;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        border-radius: 0;
        background: none;
    }
    .main-nav .nav-link:active { background: rgba(255, 255, 255, 0.04); }
    .main-nav .nav-link-live,
    .main-nav .nav-link-wc,
    .main-nav .nav-leagues-toggle {
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    /* Group toggles: caret pinned to the right edge so the centred label
       stays truly centred; larger and dimmed so it reads as an affordance. */
    .main-nav .nav-leagues-toggle .nav-leagues-caret {
        position: absolute;
        right: 20px;
        top: 50%;
        translate: 0 -50%;
        margin-left: 0;
        font-size: 0.95rem;
        color: rgba(237, 237, 237, 0.45);
        transition: transform 0.18s ease, color 0.18s ease;
    }
    .nav-leagues[data-open="true"] > .nav-leagues-toggle .nav-leagues-caret {
        transform: rotate(180deg);
        color: #D4AF37;
    }
    .nav-leagues[data-open="true"] > .nav-leagues-toggle {
        color: #D4AF37;
    }
    /* Kill the desktop underline indicator inside the drawer (it rendered as a
       stray bar under the active item). Gold left inset marks active instead. */
    .nav-link.active::after { display: none; }
    .main-nav .nav-link.active {
        color: #D4AF37;
        box-shadow: inset 3px 0 0 #D4AF37;
    }
    /* The Founders pill leaves the list - it lives in the sticky CTA bar. */
    .main-nav .nav-founders { display: none; }

    /* Groups take full width; toggles are rows like everything else. */
    .nav-leagues { display: block; width: 100%; max-width: 100%; min-width: 0; }
    .nav-leagues-toggle {
        width: 100%; justify-content: flex-start;
        min-height: 52px; padding: 12px 20px; font-size: 0.98rem;
        border-bottom: 1px solid rgba(255,255,255,0.055);
    }

    /* SUBMENU PANELS: closed = zero space. Open = an indented column of rows
       inside the same surface (no boxed island), marked by a gold hairline
       down the left. Also resets the desktop absolute/translate positioning
       that used to shove panels off-screen. */
    .nav-leagues .nav-leagues-menu {
        display: none !important;
        position: static !important; left: auto !important; top: auto !important;
        transform: none !important;
        width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
        box-shadow: none; opacity: 1; visibility: visible;
        background: rgba(255, 255, 255, 0.025);
        border: none; border-radius: 0;
        border-bottom: 1px solid rgba(255,255,255,0.055);
        padding: 6px 0 10px; white-space: normal; margin: 0;
        overflow: hidden; text-align: left;
        grid-template-columns: none;
    }
    .nav-leagues:hover .nav-leagues-menu,
    .nav-leagues:focus-within .nav-leagues-menu { display: none !important; }
    .nav-leagues[data-open="true"] .nav-leagues-menu { display: block !important; pointer-events: auto; }

    /* Page-link submenus (Bets / Predictions / Tools): centred rows on the
       tinted surface - the SAME language as the top level, quieter type. */
    .nav-leagues-menu .nav-leagues-col { display: block; width: 100%; padding: 0; }
    .nav-leagues-menu a {
        display: flex; align-items: center; justify-content: center;
        min-height: 46px; padding: 10px 20px;
        font-size: 0.93rem; color: rgba(237, 237, 237, 0.88);
        background: none; border: none; border-radius: 0;
        box-shadow: none;
        white-space: normal; text-align: center;
    }
    .nav-leagues-menu a:active { background: rgba(212, 175, 55, 0.10); color: #D4AF37; }
    .nav-leagues-menu .nav-leagues-head {
        position: static; display: flex; align-items: flex-end; justify-content: center;
        width: 100%; min-height: 30px;
        margin: 8px 0 2px; padding: 0 20px;
        box-shadow: none;
        text-align: center !important;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(230, 200, 96, 0.7);
    }

    /* LEAGUES: the one submenu where chips EARN their place - 20 short labels
       wrap into tidy rows instead of a screen-long list. Region heads share
       the indented spine; chips sit beneath each head. */
    /* Full compound selector: the general drawer-panel rule above is
       .nav-leagues .nav-leagues-menu (0,2,0) and zeroes horizontal padding -
       this must outrank it or the chips print flush against the screen edge. */
    .nav-leagues .nav-leagues-menu.nav-menu-leagues { padding: 4px 20px 16px; }
    .nav-menu-leagues .nav-leagues-col {
        display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;
        width: 100%; max-width: 100%; min-width: 0;
        overflow: visible; padding: 0; justify-content: center;
    }
    .nav-menu-leagues .nav-leagues-head {
        flex: 0 0 100%; min-height: 0;
        margin: 14px 0 7px; padding: 0;
        box-shadow: none;
    }
    .nav-menu-leagues .nav-leagues-col:first-child .nav-leagues-head { margin-top: 6px; }
    .nav-menu-leagues a {
        flex: 0 0 auto; display: inline-flex; min-height: 0;
        padding: 8px 14px; margin-left: 0;
        font-size: 0.84rem; color: #EDEDED;
        background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
        border-radius: 100px; white-space: nowrap; text-align: center;
        box-shadow: none;
    }
    .nav-menu-leagues a:active { background: rgba(212, 175, 55,0.14); }
    .nav-menu-leagues .nav-leagues-all {
        display: flex; flex: 0 0 100%; margin: 14px 0 0; justify-content: center;
        background: rgba(212, 175, 55,0.10); border-color: rgba(212, 175, 55,0.3);
    }
}

/* ==========================================
   ABOUT PAGE
   ========================================== */

.about-section {
    max-width: 900px;
    margin: 0 auto;
}

.about-hero {
    text-align: center;
    margin-bottom: 40px;
}

.about-hero h1,
.about-hero h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-tagline {
    color: #A6A6A6;
    font-size: 1.1rem;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.about-card {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.about-card h3 {
    color: #D4AF37;
    font-size: 1.3rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-card p {
    color: #ccc;
    line-height: 1.7;
    margin-bottom: 12px;
}

.about-card p:last-child {
    margin-bottom: 0;
}

/* Feature List */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: linear-gradient(135deg, #D4AF37, #E6C860);
    border-radius: 50%;
    color: #000000;
    font-weight: 700;
    font-size: 1rem;
}

.feature-text strong {
    display: block;
    color: #fff;
    margin-bottom: 5px;
}

.feature-text p {
    color: #aaa;
    font-size: 0.9rem;
    margin: 0;
}

/* Model List */
.model-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 15px 0;
}

.model-list li {
    color: #ccc;
    padding-left: 20px;
    position: relative;
    line-height: 1.6;
}

.model-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #E6C860;
    border-radius: 50%;
}

.model-list strong {
    color: #fff;
}

.model-note {
    color: #888 !important;
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 10px !important;
}

/* Markets Grid */
.markets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.market-item {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 15px;
    border-radius: 0;
    border-left: 3px solid #D4AF37;
}

.market-name {
    display: block;
    color: #fff;
    font-weight: 600;
    margin-bottom: 4px;
}

.market-desc {
    color: #A6A6A6;
    font-size: 0.85rem;
}

/* Leagues Grid */
.leagues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
}

.league-group h4 {
    color: #D4AF37;
    font-size: 1rem;
    margin-bottom: 10px;
}

.league-group ul {
    list-style: none;
}

.league-group li {
    color: #aaa;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.9rem;
}

.league-group li:last-child {
    border-bottom: none;
}

/* Early Access Card */
.about-card.early-access {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
}

.about-card.early-access h3 {
    color: #E6C860;
}

.about-card.early-access ul {
    list-style: none;
    margin-top: 15px;
}

.about-card.early-access li {
    color: #ccc;
    padding: 8px 0 8px 25px;
    position: relative;
    font-size: 0.95rem;
}

.about-card.early-access li::before {
    content: "!";
    position: absolute;
    left: 0;
    top: 8px;
    width: 18px;
    height: 18px;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    color: #E6C860;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Feedback Card */
.about-card.feedback {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
}

.about-card.feedback h3 {
    color: #E6C860;
}

.feedback-note {
    color: #888 !important;
    font-size: 0.9rem;
    font-style: italic;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 15px !important;
}

/* About Page Responsive */
@media (max-width: 768px) {
    .about-hero h1,
    .about-hero h2 {
        font-size: 1.5rem;
    }

    .about-card {
        padding: 20px;
    }

    .markets-grid {
        grid-template-columns: 1fr;
    }

    .leagues-grid {
        grid-template-columns: 1fr;
    }

    .feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .feature-text strong {
        margin-top: 10px;
    }
}

/* ==========================================
   AFFILIATE LINKS
   ========================================== */

.affiliate-link {
    color: #D4AF37;
    text-decoration: none;
    transition: color 0.2s, text-shadow 0.2s;
}

.affiliate-link:hover {
    color: #E6C860;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.affiliate-link .odds {
    color: inherit;
}

.affiliate-disclaimer {
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 0;
    padding: 10px 16px;
    margin-bottom: 15px;
    text-align: center;
}

.affiliate-disclaimer p {
    color: #a8a8a8;
    font-size: 0.8rem;
    margin: 0;
}

.match-preview-link {
    display: inline-block;
    color: #D4AF37;
    font-size: 0.8rem;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    transition: all 0.2s;
}

.match-preview-link:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #D4AF37;
}

.match-preview-btn {
    display: inline-block;
    color: #000000;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 18px;
    background: linear-gradient(135deg, #D4AF37, #E6C860);
    border-radius: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.02em;
}

.match-preview-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* Centre text in match cards */
.match-footer {
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.draw-info {
    text-align: center;
}

.predictions-section h4,
.h2h-section h4,
.news-section h4,
.no-stats-message {
    text-align: center;
}

.no-stats-message p,
.no-h2h-message {
    text-align: center;
}

.h2h-summary-bar {
    justify-content: center;
}

footer {
    text-align: center;
}

/* ==========================================
   MATCH PREVIEW PAGE
   ========================================== */

/* Match preview entrance animation */
@keyframes mpFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mpScaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes mpSlideRight {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mpProbPulse {
    0%, 100% { text-shadow: 0 0 8px currentColor; }
    50%      { text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
}
@keyframes mpGlowBorder {
    0%, 100% { border-color: rgba(212, 175, 55, 0.15); }
    50%      { border-color: rgba(212, 175, 55, 0.35); }
}

.breadcrumbs {
    color: #A6A6A6;
    font-size: 0.82rem;
    margin-bottom: 20px;
    padding: 8px 0;
    animation: mpFadeUp 0.5s ease-out both;
}

.breadcrumbs a {
    color: #D4AF37;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumbs a:hover {
    color: #E6C860;
    text-decoration: underline;
}

.breadcrumb-sep {
    margin: 0 8px;
    color: #444;
}

/* ---- HERO SECTION ---- */
.match-preview-hero {
    background: linear-gradient(160deg, rgba(212, 175, 55, 0.06) 0%, rgba(255, 255, 255, 0.04) 40%, rgba(230, 200, 96, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 36px 30px 28px;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: mpScaleIn 0.6s ease-out both;
}
/* Diagonal accent stripe */
.match-preview-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 5%, #D4AF37 30%, #E6C860 70%, transparent 95%);
    border-radius: 0;
}

.match-preview-h1 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 18px 0;
    line-height: 1.25;
    letter-spacing: -0.02em;
    animation: mpFadeUp 0.6s ease-out 0.15s both;
}

.hero-league {
    margin-bottom: 18px;
    animation: mpFadeUp 0.5s ease-out 0.1s both;
}
.hero-league .league-badge {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(230, 200, 96, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.25);
    padding: 5px 16px;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #D4AF37;
}

.hero-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    animation: mpFadeUp 0.6s ease-out 0.2s both;
}

.hero-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 160px;
    padding: 12px 8px;
    border-radius: 0;
    transition: background 0.3s;
}
.hero-team:hover {
    background: rgba(255, 255, 255, 0.04);
}

.hero-team-name {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: var(--font-heading);
    color: #fff;
    letter-spacing: -0.01em;
}

.hero-team-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #E6C860;
    text-decoration: none;
    border-bottom: 1px dotted rgba(230, 200, 96, 0.4);
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}
.hero-team-link:hover,
.hero-team-link:focus-visible {
    color: #D4AF37;
    border-bottom-color: #D4AF37;
}

.hero-prob {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-heading);
    transition: text-shadow 0.3s;
}
.hero-prob.high {
    color: #E6C860;
    text-shadow: 0 0 12px rgba(230, 200, 96, 0.3);
}
.hero-prob.medium { color: #E6C860; }
.hero-prob.low { color: #ff6b6b; }

.hero-odds {
    font-size: 0.95rem;
    color: #D4AF37;
    font-weight: 600;
    background: rgba(212, 175, 55, 0.1);
    padding: 2px 10px;
    border-radius: 0;
}

.hero-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.vs-text {
    font-size: 1.3rem;
    color: #444;
    font-weight: 800;
    font-family: var(--font-heading);
    letter-spacing: 0.1em;
}

.hero-date {
    font-size: 0.85rem;
    color: #A6A6A6;
}

.hero-draw {
    margin-bottom: 10px;
    color: #aaa;
    font-size: 0.92rem;
    animation: mpFadeUp 0.6s ease-out 0.3s both;
}

.hero-favorite {
    color: #ccc;
    font-size: 1rem;
    font-weight: 500;
    animation: mpFadeUp 0.6s ease-out 0.35s both;
}

.hero-favorite strong {
    color: #E6C860;
    font-weight: 700;
}

/* Share Buttons */
.share-buttons {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
    flex-wrap: wrap;
    animation: mpFadeUp 0.5s ease-out 0.4s both;
}
.share-btn {
    padding: 7px 18px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0;
    background: rgba(255,255,255,0.05);
    color: #bbb;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
}
.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.share-x:hover {
    background: rgba(29,155,240,0.15);
    border-color: #1DA1F2;
    color: #1DA1F2;
}
.share-tg:hover {
    background: rgba(0,136,204,0.15);
    border-color: #0088cc;
    color: #0088cc;
}
.share-copy:hover {
    background: rgba(212, 175, 55,0.15);
    border-color: #D4AF37;
    color: #D4AF37;
}
.share-wa:hover {
    background: rgba(212, 175, 55,0.15);
    border-color: #D4AF37;
    color: #D4AF37;
}

/* Score Prediction Heading */
.writeup-score-prediction h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #E6C860;
    text-align: center;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0 1rem;
    background: rgba(230, 200, 96,0.08);
    border: 1px solid rgba(230, 200, 96,0.2);
    border-radius: 0;
}

/* Kickoff Countdown */
.countdown-upcoming {
    color: #E6C860 !important;
    font-weight: 600;
}
.countdown-live {
    color: #FF6B6B !important;
    font-weight: 700;
    animation: pulse-live 1.5s ease-in-out infinite;
}
@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.countdown-finished {
    color: #888 !important;
}

/* ---- PREVIEW SECTIONS ---- */
.preview-section {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 28px;
    margin-bottom: 24px;
    animation: mpFadeUp 0.5s ease-out both;
    transition: border-color 0.3s;
}
.preview-section:hover {
    border-color: rgba(255, 255, 255, 0.12);
}
/* Stagger section entrance delays */
.preview-section:nth-of-type(1) { animation-delay: 0.1s; }
.preview-section:nth-of-type(2) { animation-delay: 0.18s; }
.preview-section:nth-of-type(3) { animation-delay: 0.26s; }
.preview-section:nth-of-type(4) { animation-delay: 0.34s; }
.preview-section:nth-of-type(5) { animation-delay: 0.4s; }
.preview-section:nth-of-type(6) { animation-delay: 0.46s; }
.preview-section:nth-of-type(7) { animation-delay: 0.5s; }
.preview-section:nth-of-type(8) { animation-delay: 0.54s; }
.preview-section:nth-of-type(9) { animation-delay: 0.58s; }
.preview-section:nth-of-type(10) { animation-delay: 0.6s; }

.preview-section h2 {
    font-size: 1.35rem;
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 22px;
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.01em;
    position: relative;
    padding-bottom: 12px;
}
.preview-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #D4AF37, transparent);
    border-radius: 0;
}

/* ---- WRITEUP SECTION (Editorial) ---- */
.writeup-section h3 {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: #e0e0e0;
    margin: 28px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
}
.writeup-section h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 14px;
    background: currentColor;
    border-radius: 0;
    margin-right: 8px;
    vertical-align: middle;
    opacity: 0.6;
}
.writeup-section h3:first-of-type {
    margin-top: 16px;
}
.writeup-section p {
    color: #bcc0c8;
    line-height: 1.8;
    font-size: 0.93rem;
    margin-bottom: 0;
}
.writeup-intro {
    font-size: 1.05rem !important;
    color: #DADADA !important;
    font-weight: 500;
    border-left: 3px solid #D4AF37;
    padding: 12px 16px;
    margin-bottom: 10px !important;
    background: rgba(212, 175, 55, 0.04);
    border-radius: 0;
    line-height: 1.7 !important;
}
.insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}
.insight-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 14px;
    transition: border-color 0.25s, transform 0.2s;
}
.insight-card:hover {
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-1px);
}
.insight-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.insight-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.insight-label {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    color: #D4AF37;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.insight-text {
    font-size: 0.85rem;
    color: #b0b0b8;
    line-height: 1.45;
}
/* Calmer "solid info" styling: flat panel, a single quiet left-accent instead of
   the old green→gold gradient glow + coloured border. Reads as information, not a
   shouty card. */
.writeup-verdict {
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-left: 3px solid rgba(212, 175, 55, 0.55);
    border-radius: 0;
    padding: 14px 18px;
    margin-top: 14px;
    position: relative;
    overflow: hidden;
}
/* Verdict (our read) + pick (our odds) read as ONE connected unit, not two
   floating cards: pull the pick box up tight under the verdict above it. */
.writeup-verdict + .pick-callout,
.writeup-verdict + div > .pick-callout {
    margin-top: 0.5rem;
}
.writeup-verdict h3 {
    margin-top: 0;
    border-bottom-color: rgba(230, 200, 96, 0.25);
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.writeup-verdict p {
    color: #DADADA !important;
    font-weight: 500;
    font-size: 0.95rem;
}
/* AI editor's read — same card, with an honest little provenance tag so readers
   know it's model-grounded, not a human hot-take. */
.writeup-verdict--ai .writeup-ai-tag {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #D4AF37;
    opacity: 0.75;
    font-weight: 600;
}
.writeup-value h3 {
    color: #E6C860;
}
.writeup-confidence {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 8px 14px;
    background: rgba(230, 200, 96, 0.05);
    border-radius: 0;
    width: fit-content;
}
.confidence-label {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    color: #a0a0a8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.confidence-stars .star {
    font-size: 1.15rem;
    letter-spacing: 2px;
    transition: transform 0.2s;
}
.confidence-stars .star.filled {
    color: #E6C860;
    text-shadow: 0 0 6px rgba(230, 200, 96, 0.4);
}
.confidence-stars .star.empty {
    color: #303030;
}
.writeup-stakes {
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 0;
    padding: 16px 18px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}
.writeup-stakes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #E6C860;
    border-radius: 0;
}
.writeup-stakes h3 {
    color: #E6C860;
    margin-top: 0;
    border-bottom-color: rgba(212, 175, 55, 0.2);
}
.writeup-injuries h3 {
    color: #FF6B6B;
    border-bottom-color: rgba(231, 76, 60, 0.2);
}
.writeup-h2h h3 {
    color: #D4AF37;
    border-bottom-color: rgba(155, 89, 182, 0.2);
}
.writeup-news h3 {
    color: #3498DB;
    border-bottom-color: rgba(52, 152, 219, 0.2);
}
.news-loading {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
    padding: 8px 0;
}
.news-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.news-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    text-decoration: none;
    transition: all 0.25s ease;
}
.news-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(52, 152, 219, 0.25);
    transform: translateX(4px);
}
.news-team {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    color: #3498DB;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.news-title {
    font-size: 0.88rem;
    color: #d0d0d8;
    line-height: 1.4;
}
.news-meta {
    font-size: 0.75rem;
    color: #888;
}
.writeup-xg h3 {
    color: #D4AF37;
    border-bottom-color: rgba(212, 175, 55, 0.2);
}
.writeup-markets h3 {
    color: #D4AF37;
    border-bottom-color: rgba(212, 175, 55, 0.2);
}

/* Quick Verdict Banner */
.writeup-quick-verdict {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(230, 200, 96, 0.06));
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 0;
    flex-wrap: wrap;
}
.qv-label {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #000000;
    background: linear-gradient(135deg, #D4AF37, #E6C860);
    padding: 3px 10px;
    border-radius: 0;
    white-space: nowrap;
}
.qv-text {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: #DADADA;
    letter-spacing: 0.01em;
}

/* Tactical Preview */
.writeup-tactical h3 {
    color: #8B5CF6;
    border-bottom-color: rgba(139, 92, 246, 0.2);
}

/* Atmosphere */
.writeup-atmosphere {
    background: rgba(230, 200, 96, 0.04);
    border: 1px solid rgba(230, 200, 96, 0.12);
    border-radius: 0;
    padding: 16px 18px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}
.writeup-atmosphere::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #E6C860;
    border-radius: 0;
}
.writeup-atmosphere h3 {
    color: #E6C860;
    margin-top: 0;
    border-bottom-color: rgba(230, 200, 96, 0.2);
}
.writeup-atmosphere p {
    font-style: italic;
    color: #c8c0b0 !important;
}

/* ---- PREDICTIONS GRID ---- */
.preview-predictions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.preview-prediction-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 18px;
    transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
}
.preview-prediction-card:hover {
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.preview-prediction-card h4 {
    color: #D4AF37;
    font-size: 0.85rem;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--font-heading);
}

.prediction-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    color: #bbb;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    gap: 8px;
    flex-wrap: wrap;
}
.prediction-row .pred-label {
    min-width: 70px;
    flex-shrink: 0;
}

.prediction-row:last-child {
    border-bottom: none;
}

.pred-value {
    font-weight: 700;
    color: #fff;
    font-family: var(--font-heading);
}

.pred-value.high { color: #E6C860; text-shadow: 0 0 8px rgba(230, 200, 96, 0.2); }
.pred-value.low { color: #ff6b6b; }

/* Builder CTAs on preview pages */
.preview-builder-ctas {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.builder-cta {
    flex: 1;
    display: inline-block;
    text-align: center;
    color: #fff;
    padding: 12px 28px;
    border-radius: 0;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.02em;
}
.builder-cta-ai {
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
}
.builder-cta-pick {
    background: linear-gradient(135deg, #E6C860, #D4AF37);
}
.builder-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
    color: #fff;
}
.builder-cta-pick:hover {
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}
@media (max-width: 600px) {
    .preview-builder-ctas {
        flex-direction: column;
    }
}

/* Previews page builder banner */
.previews-builder-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    font-size: 0.95rem;
    color: #A6A6A6;
    flex-wrap: wrap;
}
.previews-builder-banner a {
    color: #D4AF37;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}
.previews-builder-banner a:hover {
    color: #E6C860;
}
.previews-builder-banner .banner-divider {
    color: #666;
}

/* ---- ODDS COMPARISON TABLE ---- */
.odds-comparison-table {
    overflow-x: auto;
    border-radius: 0;
}

.odds-comparison-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.odds-comparison-table th {
    text-align: left;
    padding: 12px 14px;
    color: #D4AF37;
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid rgba(212, 175, 55, 0.15);
    white-space: nowrap;
}

.odds-comparison-table td {
    padding: 10px 14px;
    color: #bbb;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s;
}

.odds-comparison-table tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

.odds-cell {
    color: #E6C860;
    font-weight: 700;
    font-family: var(--font-heading);
}

.odds-cell .affiliate-link {
    color: #E6C860;
    text-decoration: none;
    transition: color 0.2s;
}
.odds-cell .affiliate-link:hover {
    color: #D4AF37;
    text-decoration: underline;
}

/* ---- TEAM STATS GRID ---- */
.preview-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.preview-stat-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 20px;
    transition: border-color 0.25s, transform 0.2s;
}
.preview-stat-card:hover {
    border-color: rgba(212, 175, 55, 0.15);
    transform: translateY(-1px);
}

.preview-stat-card h4 {
    color: #D4AF37;
    margin-bottom: 16px;
    font-size: 0.95rem;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-label {
    color: #A6A6A6;
    font-size: 0.85rem;
}

.stat-value {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: var(--font-heading);
}

.form-display {
    display: flex;
    gap: 3px;
}

.form-w, .form-d, .form-l {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 700;
}
/* Football form colours: green win, amber draw, red loss. Solid fills, dark
   text on the light green/amber and white on red, all WCAG AA. */
.form-w {
    color: #000000;
    background: #D4AF37;
}
.form-d {
    color: #000000;
    background: #E6C860;
}
.form-l {
    color: #fff;
    background: #E5484D;
}

/* ---- H2H SECTION ---- */
.h2h-summary-bar {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.06));
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.h2h-stat {
    color: #bbb;
    font-size: 0.9rem;
    font-family: var(--font-heading);
}

.h2h-stat strong {
    color: #D4AF37;
    font-size: 1.2rem;
    display: block;
    text-align: center;
}

.h2h-matches {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2h-match-row {
    display: flex;
    gap: 15px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #bbb;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0;
    transition: background 0.2s;
}
.h2h-match-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
.h2h-match-row:last-child {
    border-bottom: none;
}

.h2h-date {
    color: #707070;
    min-width: 85px;
    font-size: 0.82rem;
}

/* ---- RELATED MATCHES ---- */
.related-matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.related-match-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    text-decoration: none;
    transition: all 0.25s ease;
}

.related-match-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(212, 175, 55, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.related-teams {
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    font-family: var(--font-heading);
}

.related-date {
    color: #A6A6A6;
    font-size: 0.8rem;
}

.related-prob {
    color: #E6C860;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: var(--font-heading);
}

/* ---- RESPONSIVE (match preview) ---- */
@media (max-width: 600px) {
    .match-preview-hero {
        padding: 24px 16px 20px;
        border-radius: 0;
    }
    .match-preview-h1 {
        font-size: 1.25rem;
    }
    .hero-teams {
        flex-direction: column;
        gap: 12px;
    }
    .hero-team {
        min-width: unset;
    }
    .hero-team-name {
        font-size: 1.25rem;
    }
    .hero-prob {
        font-size: 1.5rem;
    }
    .preview-section {
        padding: 20px 16px;
        border-radius: 0;
    }
    .h2h-summary-bar {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .preview-predictions-grid {
        grid-template-columns: 1fr;
    }
    .preview-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .match-preview-hero,
    .preview-section,
    .breadcrumbs,
    .match-preview-h1,
    .hero-league,
    .hero-teams,
    .hero-draw,
    .hero-favorite,
    .share-buttons {
        animation: none !important;
    }
}

/* ========================================
   Place This Bet Section
   ======================================== */

.place-bet-section {
    margin-top: 28px;
    padding: 28px;
    background: linear-gradient(145deg, rgba(17, 17, 17, 0.92), rgba(24, 24, 24, 0.95));
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.place-bet-title {
    color: #f0f0f0;
    font-size: 1.3rem;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.place-bet-title::before {
    content: "\1F3AF";
    font-size: 1.15rem;
}

.place-bet-intro {
    color: #8A8A8A;
    font-size: 0.8rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.bookmaker-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.bookmaker-card {
    background: linear-gradient(165deg, rgba(29, 29, 29, 0.97), rgba(20, 20, 20, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    padding: 0;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.bookmaker-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(100, 120, 140, 0.3), rgba(100, 120, 140, 0.1));
    border-radius: 0;
}

.bookmaker-card.bm-card-complete::before {
    background: linear-gradient(90deg, #D4AF37, #D4AF37, rgba(135, 120, 68, 0.2));
}

.bookmaker-card.bm-card-has-estimates::before {
    background: linear-gradient(90deg, #D4AF37, #d97706, rgba(217, 119, 6, 0.2));
}

.bookmaker-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.bookmaker-card.bm-card-incomplete {
    opacity: 0.5;
    filter: grayscale(0.3);
}

.bookmaker-card.bm-card-incomplete:hover {
    opacity: 0.7;
}

.bm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.bm-card-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bm-card-name {
    font-weight: 800;
    color: #f0f0f0;
    font-size: 1.08rem;
    letter-spacing: 0.01em;
}

.bm-card-badge {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bm-badge-best {
    background: rgba(212, 175, 55, 0.15);
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.25);
}

.bm-card-availability {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bm-avail-full {
    background: rgba(147, 131, 77, 0.1);
    color: #E6C860;
    border: 1px solid rgba(147, 131, 77, 0.18);
}

.bm-avail-partial {
    background: rgba(212, 175, 55, 0.08);
    color: #E6C860;
    border: 1px solid rgba(212, 175, 55, 0.18);
}

.bm-card-legs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    flex-grow: 1;
}

.bm-card-leg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 0;
    font-size: 0.78rem;
    border-left: 3px solid rgba(212, 175, 55, 0.35);
    transition: background 0.15s;
}

.bm-card-leg:hover {
    background: rgba(0, 0, 0, 0.28);
}

.bm-card-leg.bm-leg-estimated {
    border-left-color: rgba(212, 175, 55, 0.4);
}

.bm-card-leg.bm-leg-unavailable {
    border-left-color: rgba(239, 68, 68, 0.3);
    opacity: 0.4;
}

.bm-leg-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.bm-leg-match {
    color: #6b7a8a;
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-leg-bet {
    color: #c8d0d8;
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-leg-odds-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 12px;
    flex-shrink: 0;
}

.bm-leg-odds {
    color: #E6C860;
    font-weight: 700;
    font-size: 0.88rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.bm-leg-odds-est {
    color: #E6C860;
    font-weight: 600;
}

.bm-leg-est-label {
    color: #D4AF37;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.bm-leg-na {
    color: #ef4444;
    font-weight: 400;
    font-size: 0.75rem;
    font-family: inherit;
}

.bm-card-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 14px 16px;
    margin-top: auto;
}

.bm-card-returns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(212, 175, 55, 0.04);
    border-radius: 0;
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.bm-returns-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bm-combined-label {
    color: #6b7a8a;
    font-size: 0.75rem;
}

.bm-combined-odds {
    color: #b0bcc8;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.bm-returns-highlight {
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.bm-return-label {
    color: #8899aa;
    font-size: 0.8rem;
}

.bm-return-value {
    color: #E6C860;
    font-weight: 800;
    font-size: 1.05rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.bm-card-note {
    font-size: 0.7rem;
    color: #D4AF37;
    text-align: center;
    padding: 5px 8px;
    background: rgba(212, 175, 55, 0.06);
    border-radius: 0;
    border: 1px solid rgba(212, 175, 55, 0.1);
    line-height: 1.4;
}

.bm-card-warning {
    font-size: 0.7rem;
    color: #E6C860;
    text-align: center;
    padding: 5px 8px;
    background: rgba(212, 175, 55, 0.06);
    border-radius: 0;
}

.bm-card-place-btn {
    display: block;
    text-align: center;
    padding: 13px 18px;
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    color: white;
    text-decoration: none;
    border-radius: 0;
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
    box-shadow: 0 3px 12px rgba(135, 120, 68, 0.2);
}

.bm-card-place-btn span::after {
    content: ' \2192';
    display: inline-block;
    transition: transform 0.2s ease;
}

.bm-card-place-btn:hover span::after {
    transform: translateX(4px);
}

.bm-card-place-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(135, 120, 68, 0.35);
    background: linear-gradient(135deg, #796a3a, #D4AF37);
}

.bm-card-place-btn:active {
    transform: translateY(0);
}

.place-bet-disclaimer {
    color: #556677;
    font-size: 0.7rem;
    text-align: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .bookmaker-cards-grid {
        grid-template-columns: 1fr;
    }

    .place-bet-section {
        padding: 16px;
    }

    /* Selection cards — breathe on mobile */
    .sel-card-top {
        gap: 6px;
        padding: 12px;
    }

    .sel-leg-number {
        display: none;
    }

    .sel-teams {
        font-size: 0.92rem;
        white-space: normal;
        line-height: 1.3;
    }

    .sel-pick-summary {
        gap: 4px;
    }

    .sel-pick-type {
        font-size: 0.68rem;
    }

    .sel-pick-selection {
        font-size: 0.78rem;
    }

    .sel-pick-prob {
        font-size: 0.78rem;
    }

    .sel-odds-badge {
        padding: 6px 10px;
    }

    .sel-insight-item {
        padding: 8px 10px;
        font-size: 0.78rem;
    }

    /* Bookmaker card legs — more room to read */
    .bm-card-legs {
        gap: 4px;
        padding: 8px 10px;
    }

    .bm-card-leg {
        padding: 6px 8px;
        gap: 6px;
    }

    .bm-leg-match {
        font-size: 0.65rem;
        white-space: normal;
    }

    .bm-leg-bet {
        font-size: 0.72rem;
        white-space: normal;
    }

    .bm-leg-odds-col {
        margin-left: 6px;
    }

    .bm-leg-odds {
        font-size: 0.82rem;
    }
}

@media (max-width: 400px) {
    /* Very small screens — stack leg info and odds */
    .bm-card-leg {
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 8px;
    }

    .bm-leg-odds-col {
        margin-left: 0;
        margin-top: 2px;
        flex-direction: row;
        gap: 6px;
        align-items: center;
    }

    .sel-card-top {
        padding: 10px;
    }

    .sel-teams {
        font-size: 0.85rem;
    }
}

/* ========================================
   Tooltip Icons (Noob-friendly)
   ======================================== */

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 200, 200, 0.15);
    color: #22d3ee;
    font-size: 11px;
    cursor: help;
    margin-left: 4px;
    vertical-align: middle;
    border: 1px solid rgba(0, 200, 200, 0.3);
}

/* ==========================================
   F6: Enhanced H2H Stats
   ========================================== */
.h2h-enhanced-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 18px 0;
    padding: 18px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.04), rgba(230, 200, 96, 0.03));
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.h2h-stat-item {
    text-align: center;
    padding: 6px 0;
}

.h2h-stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    font-family: var(--font-heading);
    color: #D4AF37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.h2h-stat-label {
    display: block;
    color: #909090;
    font-size: 0.75rem;
    font-family: var(--font-heading);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ==========================================
   F7: Correct Score Grid
   ========================================== */
.correct-score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.score-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0;
    padding: 16px 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.score-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}

.score-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.2);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.07);
}
.score-card:hover::before {
    opacity: 1;
}

.score-line {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--font-heading);
    color: #D4AF37;
    margin-bottom: 4px;
}

.score-prob {
    display: block;
    color: #909090;
    font-size: 0.82rem;
    font-family: var(--font-heading);
    font-weight: 600;
}

/* ==========================================
   F8: Form Alerts
   ========================================== */
.form-alert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
    font-family: var(--font-heading);
}

.form-alert.alert-negative {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.form-alert.alert-positive {
    background: rgba(230, 200, 96, 0.08);
    border: 1px solid rgba(230, 200, 96, 0.2);
    color: #E6C860;
}

@media (max-width: 600px) {
    .h2h-enhanced-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 12px;
    }

    .h2h-stat-value {
        font-size: 1.2rem;
    }

    .correct-score-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }

    .score-card {
        padding: 12px 8px;
    }

    .score-line {
        font-size: 1.15rem;
    }
}

/* ==========================================
   LANDING PAGE — Hero, Stats Bar, Features
   ========================================== */

.landing-hero {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 48px 28px 36px;
    text-align: center;
    margin: 0 0 var(--section-gap-tight);
    position: relative;
    overflow: hidden;
}

.landing-hero::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 40%);
    animation: heroGradientDrift 8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes heroGradientDrift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-5%, 3%) scale(1.05); }
    100% { transform: translate(3%, -2%) scale(1); }
}

.hero-title {
    font-size: clamp(2.2rem, 5.5vw, 3.4rem);
    font-weight: 900;
    font-family: var(--font-heading);
    margin: 0 auto 18px;
    color: #ffffff;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-align: center;
    max-width: 900px;
}
/* Single-accent green underline below the H1 — replaces the 3-stop
   animated gradient that read as 'crypto site'. */
.hero-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    background: #D4AF37;
    border-radius: 0;
    margin: 12px auto 0;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.3vw, 1.2rem);
    color: #F5F5F5;
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.55;
    text-align: center;
    font-weight: 500;
}
.hero-subtitle strong {
    color: #D4AF37;
    font-weight: 700;
}

.hero-tip {
    display: inline-block;
    margin-top: 16px;
    padding: 8px 20px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 0;
    color: #93c5fd;
    font-size: 0.85rem;
    font-family: var(--font-heading);
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    min-width: 240px;
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    color: #fff;
    font-family: var(--font-heading);
    border: none;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-align: left;
    animation: ctaPulse 3s ease-in-out infinite;
}

.hero-cta-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 0;
}

.hero-cta-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.hero-cta-title {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.2px;
    line-height: 1.15;
}

.hero-cta-sub {
    font-weight: 500;
    font-size: 0.78rem;
    opacity: 0.85;
    line-height: 1.2;
    font-family: var(--font-body);
}

.hero-cta::after {
    content: '\2192';
    font-size: 1.2rem;
    transition: transform 0.2s;
    flex-shrink: 0;
    opacity: 0.75;
}

.hero-cta:hover::after {
    transform: translateX(4px);
    opacity: 1;
}

@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
    50%      { box-shadow: 0 0 25px rgba(212, 175, 55, 0.4), 0 0 50px rgba(212, 175, 55, 0.15); }
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Hero trust strip ─────────────────────────────────────────────── */
.hero-trust {
    list-style: none;
    margin: 0 auto 24px;
    padding: 10px 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    max-width: 760px;
    font-size: 0.88rem;
    color: #D2D2D2;
    background: rgba(212, 175, 55, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 999px;
}
.hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hero-trust li::before {
    content: '✓';
    color: #D4AF37;
    font-weight: 700;
    margin-right: 4px;
}
.hero-trust strong {
    color: #fff;
    font-weight: 700;
}
.hero-trust-links {
    margin: 14px 0 0;
    font-size: 0.84rem;
    color: #A6A6A6;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.hero-trust-links a {
    color: #A6A6A6;
    text-decoration: none;
    border-bottom: 1px dotted rgba(166, 166, 166, 0.4);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.hero-trust-links a:hover,
.hero-trust-links a:focus-visible {
    color: #D4AF37;
    border-color: #D4AF37;
}
.hero-trust-links span {
    color: #4A5568;
}
@media (max-width: 540px) {
    .hero-trust {
        font-size: 0.8rem;
        gap: 4px 14px;
        border-radius: 0;
    }
    .hero-trust-links {
        font-size: 0.78rem;
    }
}

/* ── Quick Shortcuts strip ─────────────────────────────────────────── */
.quick-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 940px;
    margin: 0 auto 28px;
    padding: 0 8px;
}
.qs-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    text-decoration: none;
    color: #fff;
    transition: all 0.2s ease;
    min-height: 64px;
}
.qs-btn:hover {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.12);
}
.qs-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}
.qs-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.qs-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}
.qs-sub {
    font-size: 0.72rem;
    color: #A6A6A6;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 720px) {
    .quick-shortcuts {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 380px) {
    .quick-shortcuts {
        grid-template-columns: 1fr;
    }
}

.hero-cta-secondary {
    background: transparent;
    border: 1.5px solid #D4AF37;
    color: #D4AF37;
    animation: none;
}
.hero-cta-secondary .hero-cta-icon {
    background: rgba(212, 175, 55, 0.12);
}
.hero-cta-secondary:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: #D4AF37;
}

/* Tertiary CTA — neutral ghost so only the primary green CTA pulls the eye.
   Was previously gold which fought the green for attention. */
.hero-cta-tertiary {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    color: #D2D2D2;
    animation: none;
}
.hero-cta-tertiary .hero-cta-icon {
    background: rgba(255, 255, 255, 0.06);
}
.hero-cta-tertiary:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Mobile — stack full-width and tighten spacing */
@media (max-width: 640px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0 8px;
    }
    .hero-cta {
        min-width: 0;
        width: 100%;
        padding: 12px 16px;
        gap: 12px;
        animation: none;
    }
    .hero-cta-icon {
        width: 32px;
        height: 32px;
        font-size: 1.25rem;
    }
    .hero-cta-title {
        font-size: 0.95rem;
    }
    .hero-cta-sub {
        font-size: 0.75rem;
    }
}

.league-logos-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.league-logo-badge {
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* --- Hero Quick Picks --- */
.hero-picks {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-picks-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888;
    margin-bottom: 12px;
}
.hero-picks-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-pick-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    min-width: 160px;
    transition: border-color 0.2s, transform 0.15s;
}
.hero-pick-chip:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}
.hero-pick-time {
    font-size: 0.66rem;
    font-weight: 600;
    color: #A6A6A6;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-family: var(--font-heading);
}
.hero-pick-teams {
    font-size: 0.82rem;
    font-weight: 600;
    color: #ddd;
    text-align: center;
    line-height: 1.25;
}
.hero-pick-bet {
    font-size: 0.72rem;
    color: #D4AF37;
    font-weight: 600;
}
.hero-pick-prob {
    font-size: 0.85rem;
    font-weight: 800;
    color: #E6C860;
    font-family: var(--font-heading);
}
.hero-picks-more {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.8rem;
    color: #D4AF37;
    text-decoration: none;
    font-weight: 600;
}
.hero-picks-more:hover {
    text-decoration: underline;
}

/* Mobile — horizontal scroll instead of long vertical stack */
@media (max-width: 640px) {
    .hero-picks {
        margin-top: 20px;
        padding-top: 14px;
    }
    .hero-picks-label {
        font-size: 0.7rem;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }
    .hero-picks-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 6px;
        justify-content: flex-start;
        /* Hide horizontal scrollbar but keep functional */
        scrollbar-width: none;
    }
    .hero-picks-row::-webkit-scrollbar {
        display: none;
    }
    .hero-pick-chip {
        flex: 0 0 auto;
        min-width: 140px;
        max-width: 160px;
        padding: 8px 12px;
        gap: 2px;
        scroll-snap-align: start;
    }
    .hero-pick-teams {
        font-size: 0.78rem;
    }
    .hero-pick-bet {
        font-size: 0.68rem;
    }
    .hero-pick-prob {
        font-size: 0.82rem;
    }
}

/* --- Live Stats Bar --- */

.live-stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.live-stat-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 24px 16px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.live-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.2);
}

.live-stat-value {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-heading);
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.live-stat-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: var(--font-heading);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Social Bar --- */

.social-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 20px;
    margin-bottom: 24px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 0;
}

.social-bar-text {
    color: #ccc;
    font-size: 0.95rem;
    font-weight: 500;
}

.social-bar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.social-bar-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.social-telegram {
    background: #229ED9;
    color: #fff;
}

/* ── Tips strip: email signup + Telegram ──────────────────────────── */
.tips-strip {
    margin-bottom: 24px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.04));
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 0;
}
.tips-strip-inner {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 14px;
    align-items: center;
}
.tips-strip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tips-strip-text strong {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
}
.tips-strip-text span {
    color: #A6A6A6;
    font-size: 0.82rem;
}
.tips-strip-form {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}
.tips-strip-form input[type="email"] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 9px 14px;
    border-radius: 0;
    font-size: 0.9rem;
    min-width: 220px;
    transition: border-color 0.2s;
}
.tips-strip-form input[type="email"]:focus {
    outline: none;
    border-color: #D4AF37;
}
.tips-strip-form input[type="email"]::placeholder {
    color: #7E7E7E;
}
.tips-strip-btn {
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    color: #000000;
    border: none;
    padding: 9px 18px;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-heading);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.tips-strip-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}
.tips-strip-or {
    color: #7E7E7E;
    font-size: 0.82rem;
    text-transform: lowercase;
}
.tips-strip-tg {
    background: #229ED9;
    color: #fff;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-heading);
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.tips-strip-tg:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 158, 217, 0.35);
}
.tips-strip-msg {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #A6A6A6;
    text-align: center;
    min-height: 1em;
}
.tips-strip-msg-success { color: #D4AF37; }
.tips-strip-msg-error   { color: #FF6B6B; }
.visually-hidden {
    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: 760px) {
    .tips-strip-inner {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .tips-strip-text { text-align: center; }
    .tips-strip-form input[type="email"] {
        flex: 1 1 auto;
        min-width: 0;
    }
    .tips-strip-or { display: none; }
    .tips-strip-tg { text-align: center; }
}

.social-twitter {
    background: #191919;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- Feature Cards --- */

/* ==========================================
   WHAT WE OFFER — Compact inline grid
   ========================================== */
.what-we-offer {
    margin-bottom: 24px;
}
.wwo-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #D4AF37;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 auto 18px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.wwo-heading::before,
.wwo-heading::after {
    content: '';
    flex: 0 0 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
}
.wwo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.wwo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #151515;
    border: 1px solid #1E1E1E;
    border-radius: 0;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
}
.wwo-item:hover {
    border-color: rgba(212, 175, 55, 0.3);
    background: #222222;
}
.wwo-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.wwo-title {
    color: #F5F5F5;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 4px;
}
.wwo-desc {
    color: #747474;
    font-size: 0.72rem;
    line-height: 1.3;
    display: none;
}

/* Show descriptions on wider screens */
@media (min-width: 993px) {
    .wwo-item {
        flex-wrap: wrap;
    }
    .wwo-desc {
        display: block;
        flex-basis: 100%;
        padding-left: 30px;
        margin-top: -4px;
    }
}

/* Legacy feature grid classes - keep for non-homepage pages that may use them */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 30px;
    position: relative;
}
.feature-card {
    background: #151515;
    border: 1px solid #1E1E1E;
    border-radius: 0;
    padding: 18px 16px;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
}
.feature-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    background: #222222;
}
.feature-icon {
    width: 36px;
    height: 36px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin: 0 auto 10px;
    color: #D4AF37;
}
.feature-title {
    color: #F5F5F5;
    font-size: 0.9rem;
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: 4px;
}
.feature-desc {
    color: #747474;
    font-size: 0.78rem;
    line-height: 1.4;
}
.feature-card-link {
    cursor: pointer;
}
.feature-card-link:hover .feature-title {
    color: #D4AF37;
}
.feature-card-highlight {
    border-color: rgba(230, 200, 96, 0.2);
}
.feature-card-highlight:hover {
    border-color: rgba(230, 200, 96, 0.4);
}
.feature-card-highlight .feature-title {
    color: #E6C860;
}
.feature-card-highlight .feature-icon {
    background: rgba(230, 200, 96, 0.1);
    color: #E6C860;
}

/* --- Landing Responsive --- */

@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wwo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .landing-hero {
        padding: 40px 20px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
    .wwo-grid {
        grid-template-columns: 1fr;
    }

    .social-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 16px;
    }

    .social-bar-text {
        width: 100%;
        text-align: center;
        font-size: 0.85rem;
    }

    .social-bar-link {
        flex: 1;
        justify-content: center;
        padding: 10px 14px;
    }
}

/* ==========================================
   MUST-WIN / TOP PICKS DROPDOWN (Cyan Theme)
   ========================================== */

.mustwin-dropdown {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 3px 0 0 #D4AF37;
}

.mustwin-dropdown .insight-header {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.10));
}

.mustwin-dropdown .insight-title {
    color: #D4AF37;
}

.mustwin-dropdown .insight-badge {
    background: rgba(255, 255, 255, 0.3);
    color: #D4AF37;
}

/* ==========================================
   MOBILE PERFORMANCE & REDUCED MOTION
   ========================================== */

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
        background-size: 100% 100%;
    }

    .btn-build,
    .hero-cta {
        animation: none;
    }

    .match-card,
    .selection-card,
    .toggle-pill,
    .live-stat-card,
    .feature-card,
    .stake-option,
    .banker-card,
    .value-card,
    .prob-btn,
    .btn-build,
    .btn-search,
    .btn-lucky-dip-small,
    .nav-link,
    .bab-header,
    .league-action-btn,
    .insight-header,
    .score-card,
    .acca-stat,
    .social-links a {
        transition-duration: 0.1s;
    }
}

/* Disable backdrop-filter on smaller/lower-powered mobile devices */
@media (max-width: 768px) {
    .search-form,
    .match-card,
    .build-a-bet,
    .byob-section,
    .bab-quick,
    .live-stat-card,
    .feature-card,
    .insight-dropdown,
    .how-to-use,
    .league-selector,
    .accumulator-result {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Simpler body animation on mobile (slower = less GPU work) */
    body {
        animation-duration: 25s;
    }

    /* Hide penalty boxes on mobile — they extend off-screen */
    body::after {
        display: none;
    }

    /* Slightly reduce pitch centre elements on mobile */
    body::before {
        opacity: 0.08;
    }

    /* Full-width preview button on mobile */
    .match-preview-btn {
        width: 100%;
        text-align: center;
        padding: 10px;
    }
}

/* ==========================================
   WIN STREAK BANNER
   ========================================== */
.streak-banner {
    background: linear-gradient(90deg, rgba(230, 200, 96,0.15), rgba(230, 200, 96,0.05));
    border: 1px solid rgba(230, 200, 96,0.3);
    border-radius: 0;
    padding: 10px 20px;
    text-align: center;
    margin: 0 0 12px;
}
.streak-text {
    color: #E6C860;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

/* ==========================================
   LIVE SCORES STRIP (Homepage)
   ========================================== */
.live-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 0 0 12px;
    background: linear-gradient(90deg, rgba(255, 59, 48, 0.12), rgba(212, 175, 55, 0.08));
    border: 1px solid rgba(255, 59, 48, 0.25);
    border-radius: 0;
    text-decoration: none;
    color: #eee;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
}
.live-strip:hover {
    border-color: rgba(255, 59, 48, 0.5);
    background: linear-gradient(90deg, rgba(255, 59, 48, 0.18), rgba(212, 175, 55, 0.12));
}
.live-strip-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #FF3B30;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1px;
    border-radius: 0;
    animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.live-strip-scores {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
}
.live-strip-match {
    font-size: 0.85rem;
    font-weight: 600;
}
.live-strip-teams {
    color: #eee;
}
.live-strip-minute {
    color: #D4AF37;
    font-weight: 700;
    font-size: 0.8rem;
}
.live-strip-more {
    flex-shrink: 0;
    color: #888;
    font-size: 0.8rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .live-strip-scores {
        gap: 10px;
    }
    .live-strip-match {
        font-size: 0.78rem;
    }
}

/* ==========================================
   RECENT RESULTS TICKER
   ========================================== */
.results-ticker {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 0;
    padding: 8px 16px;
    margin: 0 0 var(--section-gap-tight);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ticker-label {
    color: #E6C860;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.ticker-track {
    overflow: hidden;
    flex: 1;
    /* min-width:0 lets this flex item shrink below its content width so the
       marquee can't force the row wider than the viewport (fixed a 7px mobile
       horizontal overflow — July 2026). */
    min-width: 0;
}
.ticker-content {
    display: flex;
    gap: 24px;
    animation: ticker-scroll 30s linear infinite;
    white-space: nowrap;
}
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}
.outcome-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.outcome-badge.win {
    background: rgba(212, 175, 55,0.2);
    color: #D4AF37;
}
.outcome-badge.loss {
    background: rgba(231,76,60,0.2);
    color: #FF6B6B;
}
.ticker-match {
    color: #fff;
    font-weight: 500;
}
.ticker-market {
    color: #a8a8a8;
    font-size: 0.8rem;
}

/* ==========================================
   TODAY'S ACCUMULATORS (TIERED)
   ========================================== */
.todays-accas {
    margin-bottom: 16px;
}
.accas-heading {
    font-size: 1.05rem;
    color: #E6C860;
    margin-bottom: 8px;
    font-weight: 700;
    font-family: var(--font-heading);
}
.accas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.acca-tier-card {
    background: rgba(255,255,255,0.05);
    border-radius: 0;
    padding: 12px;
    border-left: 4px solid #666;
    transition: transform 0.2s, box-shadow 0.2s;
    max-height: 360px;
    display: flex;
    flex-direction: column;
}
.acca-tier-card .tier-legs {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.acca-tier-card:hover {
    transform: translateY(-2px);
}
.acca-tier-safe { border-left-color: #D4AF37; }
.acca-tier-safe:hover { box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15); }
.acca-tier-value { border-left-color: #E6C860; }
.acca-tier-value:hover { box-shadow: 0 8px 24px rgba(230, 200, 96, 0.15); }
.acca-tier-longshot { border-left-color: #FF6B6B; }
.acca-tier-longshot:hover { box-shadow: 0 8px 24px rgba(231, 76, 60, 0.15); }

.tier-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.tier-badge {
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 0;
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.acca-tier-safe .tier-badge { background: rgba(212, 175, 55,0.2); color: #D4AF37; }
.acca-tier-value .tier-badge { background: rgba(230, 200, 96,0.2); color: #E6C860; }
.acca-tier-longshot .tier-badge { background: rgba(231,76,60,0.2); color: #FF6B6B; }

.tier-fold {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ccc;
}

.tier-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px;
    background: rgba(0, 0, 0,0.2);
    border-radius: 0;
}
.tier-stat {
    flex: 1;
    text-align: center;
}
.tier-stat-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 3px;
    font-family: var(--font-heading);
}
.tier-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: #fff;
}
.tier-returns {
    color: #D4AF37;
    font-size: 1.05rem;
}

.tier-legs {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tier-leg-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s ease;
    border-radius: 0;
    position: relative;
}
.tier-leg-link:nth-child(even) {
    background: rgba(255,255,255,0.02);
}
.tier-leg-link:last-child {
    border-bottom: none;
}
.tier-leg-link:hover {
    background: rgba(212, 175, 55, 0.08);
    padding-left: 12px;
}
.tier-leg-link:hover .leg-teams {
    color: #D4AF37;
}
.leg-number {
    font-size: 0.65rem;
    font-weight: 800;
    font-family: var(--font-heading);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: rgba(255,255,255,0.08);
    color: #a8a8a8;
    flex-shrink: 0;
}
.leg-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.leg-teams {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leg-bet {
    font-size: 0.72rem;
    color: #D4AF37;
}
.leg-date {
    font-size: 0.65rem;
    color: #888;
    font-weight: 400;
}
.leg-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}
.leg-odds {
    font-size: 0.8rem;
    font-weight: 600;
    color: #E6C860;
}
.leg-prob {
    font-size: 0.68rem;
    color: #A6A6A6;
}
.tier-disclaimer {
    font-size: 0.6rem;
    color: #A6A6A6;
    text-align: center;
    margin-top: 10px;
    font-style: italic;
}

@media (max-width: 768px) {
    .accas-grid {
        grid-template-columns: 1fr;
    }
    .results-ticker {
        flex-direction: column;
        gap: 6px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
    }
    .ticker-label {
        align-self: flex-start;
    }
}

/* ==========================================
   PROBABILITY BARS (visual probability display)
   ========================================== */

.prob-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.prob-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0;
    overflow: hidden;
}

.prob-bar-fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.6s ease;
}

.prob-bar-fill.high {
    background: linear-gradient(90deg, #D4AF37, #D4AF37);
}

.prob-bar-fill.medium {
    background: linear-gradient(90deg, #E6C860, #E6C860);
}

.prob-bar-fill.low {
    background: linear-gradient(90deg, #FF6B6B, #c0392b);
}

.prob-bar-value {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--font-heading);
    min-width: 42px;
    text-align: right;
}

.prob-bar-value.high { color: #D4AF37; }
.prob-bar-value.medium { color: #E6C860; }
.prob-bar-value.low { color: #FF6B6B; }

/* Probability bar in prediction rows */
.prediction-row .prob-bar {
    margin-top: 4px;
}

/* ==========================================
   BUILD YOUR OWN BET (BYOB)
   ========================================== */
.byob-section {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    scroll-margin-top: 80px;
}
.byob-section:not(.byob-expanded) {
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.08);
}
.byob-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 50px 22px 28px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(230, 200, 96, 0.08) 50%, rgba(212, 175, 55, 0.05) 100%);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    position: relative;
    text-align: center;
}
.byob-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, #E6C860, transparent);
    opacity: 0.4;
}
.byob-header:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(230, 200, 96, 0.12) 50%, rgba(212, 175, 55, 0.08) 100%);
}
.byob-section:not(.byob-expanded) .byob-header:hover {
    background: rgba(212, 175, 55, 0.05);
}
.byob-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.byob-header h2 {
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.4rem;
    margin: 0;
    letter-spacing: -0.01em;
}
.byob-header-badge {
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.byob-subtitle {
    color: #A6A6A6;
    font-size: 0.9rem;
}
.byob-header .toggle-icon {
    color: #D4AF37;
    transition: transform 0.3s;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.byob-expanded .byob-header .toggle-icon {
    transform: translateY(-50%) rotate(180deg);
}
.byob-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.byob-expanded .byob-content {
    max-height: 8000px;
    overflow: visible;
}

/* Controls bar (date filter + count) */
.byob-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 24px 12px;
}
.byob-date-filter {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55,0.3) transparent;
    -webkit-overflow-scrolling: touch;
}
.byob-date-filter::-webkit-scrollbar {
    height: 4px;
}
.byob-date-filter::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55,0.3);
    border-radius: 0;
}
.byob-date-pill {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: #aaa;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.byob-date-pill:hover {
    background: rgba(212, 175, 55,0.1);
    border-color: rgba(212, 175, 55,0.25);
    color: #ddd;
}
.byob-date-active {
    background: rgba(212, 175, 55,0.18) !important;
    border-color: #D4AF37 !important;
    color: #fff !important;
    font-weight: 600;
}
.byob-pick-count {
    color: #888;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* League dropdown — sits next to date pills, narrows the picks pool. */
.byob-league-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.byob-league-label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #A6A6A6;
}
.byob-league-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.04);
    color: #F5F5F5;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    padding: 7px 28px 7px 12px;
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2394A3B8' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s ease;
}
.byob-league-select:hover,
.byob-league-select:focus {
    border-color: rgba(212, 175, 55, 0.5);
    outline: none;
}
.byob-league-select option {
    background: #101010;
    color: #F5F5F5;
}

/* Show More button */
.byob-show-more-wrap {
    grid-column: 1 / -1;
    text-align: center;
    padding: 12px 0 4px;
}
.byob-show-more {
    padding: 10px 32px;
    border-radius: 0;
    border: 1px solid rgba(212, 175, 55,0.3);
    background: rgba(212, 175, 55,0.08);
    color: #D4AF37;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.byob-show-more:hover {
    background: rgba(212, 175, 55,0.18);
    border-color: #D4AF37;
    color: #fff;
}

/* Category pills */
.byob-categories {
    display: flex;
    gap: 8px;
    padding: 0 24px 16px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55,0.3) transparent;
    -webkit-overflow-scrolling: touch;
}
.byob-categories::-webkit-scrollbar {
    height: 4px;
}
.byob-categories::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55,0.3);
    border-radius: 0;
}
.byob-cat-pill {
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #ccc;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.byob-cat-pill:hover {
    background: rgba(212, 175, 55,0.12);
    border-color: rgba(212, 175, 55,0.3);
    color: #fff;
}
.byob-cat-active {
    background: rgba(212, 175, 55,0.2) !important;
    border-color: #D4AF37 !important;
    color: #fff !important;
    font-weight: 600;
}
.byob-cat-count {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 0;
    margin-left: 5px;
}
.byob-cat-active .byob-cat-count {
    background: rgba(212, 175, 55,0.35);
}

/* Layout: picks grid + slip */
.byob-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    padding: 0 24px 24px;
    align-items: start;
}

/* Picks grid */
.byob-picks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.byob-picks-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 0.9rem;
}

/* Pick card */
.byob-pick-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.byob-pick-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-1px);
}
.byob-pick-selected {
    border-color: #D4AF37 !important;
    background: rgba(212, 175, 55,0.06) !important;
    box-shadow: 0 0 12px rgba(212, 175, 55,0.15);
}
.byob-pick-selected::after {
    content: '\2713';
    position: absolute;
    top: 8px;
    right: 10px;
    color: #D4AF37;
    font-size: 1rem;
    font-weight: 700;
}
.byob-pick-match {
    font-size: 0.82rem;
    font-weight: 600;
    color: #eee;
    margin-bottom: 4px;
    padding-right: 20px;
}
.byob-pick-league {
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 8px;
}
.byob-pick-market {
    display: inline-block;
    background: rgba(230, 200, 96,0.12);
    color: #E6C860;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 0;
    margin-bottom: 6px;
}
.byob-pick-selection {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}
/* Evidence nugget (Stage 1, June 2026) — one factual line backing the pick,
   the gambling.com "reasoning nugget" device. Gold dot + muted text so it
   reads as supporting evidence, not a headline. */
/* Money Model's Verdict — the earned stamp on a proven, confident pick.
   Gold, subtly glowing, so it reads as a badge of authority. Only rendered
   when the feed flags moneyModelVerdict=true (proven league + market + 70%+). */
.byob-pick-verdict {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #E6C860;
    background: rgba(230, 200, 96, 0.10);
    border: 1px solid rgba(230, 200, 96, 0.35);
    border-radius: 999px;
    padding: 3px 10px;
    margin: 2px 0 8px;
    line-height: 1.2;
}
.byob-pick-nugget {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: #C4C4C4;
    margin: 0 0 8px;
    line-height: 1.3;
}
.byob-pick-nugget::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #E6C860;
    box-shadow: 0 0 5px rgba(230, 200, 96, 0.6);
}
.byob-pick-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.byob-pick-prob {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: #D4AF37;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Unproven-league picks (2026-07-20): the % is a model ESTIMATE, not a rated
   call. The muted "est." qualifier keeps the number honest — no HIGH/MED tier
   or coloured bar accompanies it, so it never reads as a tracked confidence. */
.byob-pick-prob-est {
    color: #8A96A6;
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
}
.byob-pick-odds {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    color: #E6C860;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Stage 2 (June 2026) — probability ranking bar: a slim 0-100% fill under
   each pick (the gambling.com "score out of 100" device). Tier colours the
   fill; the track is barely-there so it reads as a quiet quant signal. */
.byob-pick-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin: 0 0 8px;
}
.byob-pick-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #A6A6A6;
    transition: width 0.4s ease;
}
.byob-pick-bar-fill.byob-tier-high { background: #D4AF37; }
.byob-pick-bar-fill.byob-tier-medium { background: #E6C860; }
/* Informational pick (player/stat market — e.g. World Cup pre-market): gold
   left-accent + pill, "model est." note on the odds. Visually distinct from
   tracked, odds-backed picks but still selectable into the slip. */
.byob-pick-card.byob-pick-info {
    border-left: 3px solid rgba(230, 200, 96, 0.55);
}
.byob-pick-badge--info {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(230, 200, 96, 0.14);
    color: #E6C860;
    vertical-align: middle;
    white-space: nowrap;
}
.byob-pick-odds-note {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #A6A6A6;
    opacity: 0.8;
}
.byob-pick-tier {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 0;
    text-transform: uppercase;
}
.byob-tier-high {
    background: rgba(212, 175, 55,0.15);
    color: #D4AF37;
}
.byob-tier-medium {
    background: rgba(230, 200, 96,0.15);
    color: #E6C860;
}

/* Bet slip */
.byob-slip {
    position: sticky;
    top: 80px;
    background: rgba(19, 19, 19,0.95);
    border: 1px solid rgba(212, 175, 55,0.2);
    border-radius: 0;
    overflow: hidden;
}
.byob-slip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(212, 175, 55,0.1), rgba(230, 200, 96,0.06));
    border-bottom: 1px solid rgba(212, 175, 55,0.15);
}
.byob-slip-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}
.byob-slip-count {
    background: #D4AF37;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 0;
}
.byob-slip-body {
    padding: 12px 16px;
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55,0.3) transparent;
}
.byob-slip-empty {
    text-align: center;
    padding: 24px 12px;
    color: #777;
    font-size: 0.82rem;
}
.byob-slip-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.byob-slip-item:last-child {
    border-bottom: none;
}
.byob-slip-item-info {
    flex: 1;
    min-width: 0;
}
.byob-slip-item-match {
    font-size: 0.72rem;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.byob-slip-item-sel {
    font-size: 0.8rem;
    font-weight: 600;
    color: #eee;
}
.byob-slip-item-market {
    font-size: 0.68rem;
    color: #E6C860;
}
.byob-slip-item-odds {
    font-size: 0.82rem;
    font-weight: 700;
    color: #E6C860;
    flex-shrink: 0;
}
.byob-slip-item-remove {
    color: #666;
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
    padding: 0 2px;
    transition: color 0.2s;
}
.byob-slip-item-remove:hover {
    color: #FF6B6B;
}
.byob-slip-summary {
    padding: 14px 16px;
    border-top: 1px solid rgba(212, 175, 55,0.15);
    background: rgba(212, 175, 55,0.05);
}
.byob-slip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.82rem;
}
.byob-slip-row:last-child {
    margin-bottom: 0;
}
.byob-slip-label {
    color: #aaa;
}
.byob-slip-value {
    font-weight: 700;
    color: #fff;
}
.byob-slip-odds {
    color: #E6C860;
    font-size: 1.05rem;
}
.byob-slip-prob {
    color: #D4AF37;
}
.byob-slip-returns {
    color: #D4AF37;
    font-weight: 700;
}
.byob-slip-stakes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 10px;
}
.byob-stake-btn {
    padding: 6px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #ccc;
    font-size: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.byob-stake-btn:hover {
    border-color: rgba(212, 175, 55,0.4);
    background: rgba(212, 175, 55,0.1);
}
.byob-stake-active {
    border-color: #D4AF37 !important;
    background: rgba(212, 175, 55,0.2) !important;
    color: #fff !important;
    font-weight: 600;
}
.byob-stake-label {
    font-size: 0.68rem;
    color: #888;
}
.byob-stake-return {
    font-size: 0.82rem;
    font-weight: 700;
    color: #D4AF37;
}
.byob-slip-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.byob-clear-btn {
    flex: 1;
    padding: 8px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: #aaa;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.byob-clear-btn:hover {
    border-color: #FF6B6B;
    color: #FF6B6B;
}
/* Explain this bet — the value-add: hands the slip to the AI to explain the
   model's reasoning. Green, prominent (it's the differentiator), sits left of Clear. */
.byob-explain-btn {
    flex: 2;
    padding: 8px;
    border-radius: 0;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.12);
    color: #D4AF37;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
}
.byob-explain-btn:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: #D4AF37;
}

/* Toast notification */
.byob-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: rgba(19, 19, 19,0.95);
    border: 1px solid rgba(212, 175, 55,0.3);
    color: #fff;
    padding: 12px 24px;
    border-radius: 0;
    font-size: 0.85rem;
    z-index: 9999;
    transition: transform 0.3s ease;
    pointer-events: none;
}
.byob-toast.byob-toast-show {
    transform: translateX(-50%) translateY(0);
}

/* Responsive */
@media (max-width: 992px) {
    .byob-layout {
        grid-template-columns: 1fr;
    }
    .byob-slip {
        position: static;
        order: -1;
    }
}
@media (max-width: 576px) {
    .byob-header {
        padding: 16px 40px 16px 16px;
    }
    .byob-header h2 {
        font-size: 1.1rem;
    }
    .byob-controls {
        padding: 0 16px 10px;
    }
    .byob-categories {
        padding: 0 16px 12px;
    }
    .byob-layout {
        padding: 0 16px 16px;
    }
    .byob-picks-grid {
        grid-template-columns: 1fr;
    }
    .byob-pick-card {
        padding: 12px;
    }
}

/* Hero tertiary CTA */
.hero-cta-tertiary {
    background: transparent;
    border: 1px solid rgba(212, 175, 55,0.5);
    color: #D4AF37;
}
.hero-cta-tertiary:hover {
    background: rgba(212, 175, 55,0.15);
    border-color: #D4AF37;
    color: #fff;
}

/* BYOB feature card (legacy) */
.feature-card-byob {
    border-color: rgba(212, 175, 55,0.3) !important;
}
.feature-card-byob:hover {
    border-color: rgba(212, 175, 55,0.5) !important;
}

/* ==========================================
   AESTHETIC ENHANCEMENTS — Section Flow & Polish
   ========================================== */

/* --- Scroll-triggered entrance animations --- */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hero staggered entrance */
.landing-hero .hero-title {
    animation: fadeSlideUp 0.7s ease-out both;
    animation-delay: 0.1s;
}
.landing-hero .hero-subtitle {
    animation: fadeSlideUp 0.7s ease-out both;
    animation-delay: 0.25s;
}
.landing-hero .hero-actions {
    animation: fadeSlideUp 0.7s ease-out both;
    animation-delay: 0.4s;
}
.landing-hero .league-logos-bar {
    animation: fadeSlideUp 0.7s ease-out both;
    animation-delay: 0.55s;
}

/* --- Section dividers — subtle gradient lines between sections --- */
/* Use border-image for grid containers (::before breaks grid layout) */
.todays-accas::before {
    content: '';
    display: block;
    height: 1px;
    margin-bottom: 20px;
    background: linear-gradient(90deg, transparent 5%, rgba(212, 175, 55,0.25) 30%, rgba(230, 200, 96,0.3) 50%, rgba(212, 175, 55,0.25) 70%, transparent 95%);
}
.live-stats-bar,
.features-grid,
.what-we-offer {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent 5%, rgba(212, 175, 55,0.25) 30%, rgba(230, 200, 96,0.3) 50%, rgba(212, 175, 55,0.25) 70%, transparent 95%) 1;
    padding-top: 20px;
}

/* Stats bar — accent border on hover, subtle top glow */
.live-stat-card {
    border-top: 2px solid transparent;
    position: relative;
}
.live-stat-card:hover {
    border-top-color: rgba(212, 175, 55,0.6);
}
.live-stat-card:nth-child(2):hover {
    border-top-color: rgba(230, 200, 96,0.6);
}
.live-stat-card:nth-child(3):hover {
    border-top-color: rgba(212, 175, 55,0.6);
}

/* Ticker — subtle green glow on left label */
.ticker-label::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #D4AF37;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    animation: tickerDot 2s ease-in-out infinite;
}
@keyframes tickerDot {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(212, 175, 55,0.6); }
    50%      { opacity: 0.4; box-shadow: none; }
}

/* Social bar — enhance with glow from link colors */
.social-telegram {
    box-shadow: 0 0 16px rgba(34,158,217,0.15);
}
.social-twitter {
    box-shadow: 0 0 16px rgba(255,255,255,0.05);
}

/* Accumulator cards — improved visual hierarchy */
.acca-tier-card {
    position: relative;
    overflow: hidden;
}
.acca-tier-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    pointer-events: none;
}
.acca-tier-safe .tier-badge {
    box-shadow: 0 0 8px rgba(212, 175, 55,0.2);
}
.acca-tier-value .tier-badge {
    box-shadow: 0 0 8px rgba(230, 200, 96,0.2);
}
.acca-tier-longshot .tier-badge {
    box-shadow: 0 0 8px rgba(231,76,60,0.2);
}
/* Leg number — tier-colored on hover */
.acca-tier-safe .tier-leg-link:hover .leg-number {
    background: rgba(212, 175, 55,0.2);
    color: #D4AF37;
}
.acca-tier-value .tier-leg-link:hover .leg-number {
    background: rgba(230, 200, 96,0.2);
    color: #E6C860;
}
.acca-tier-longshot .tier-leg-link:hover .leg-number {
    background: rgba(231,76,60,0.2);
    color: #FF6B6B;
}

/* Feature cards — staggered scroll entrance */
.features-grid .feature-card {
    opacity: 0;
    animation: fadeSlideIn 0.5s ease-out forwards;
}
.features-grid .feature-card:nth-child(1) { animation-delay: 0.05s; }
.features-grid .feature-card:nth-child(2) { animation-delay: 0.12s; }
.features-grid .feature-card:nth-child(3) { animation-delay: 0.19s; }
.features-grid .feature-card:nth-child(4) { animation-delay: 0.26s; }
.features-grid .feature-card:nth-child(5) { animation-delay: 0.33s; }
.features-grid .feature-card:nth-child(6) { animation-delay: 0.40s; }
.features-grid .feature-card:nth-child(7) { animation-delay: 0.47s; }

/* WVO items — staggered entrance */
.wwo-grid .wwo-item {
    opacity: 0;
    animation: fadeSlideIn 0.4s ease-out forwards;
}
.wwo-grid .wwo-item:nth-child(1) { animation-delay: 0.05s; }
.wwo-grid .wwo-item:nth-child(2) { animation-delay: 0.10s; }
.wwo-grid .wwo-item:nth-child(3) { animation-delay: 0.15s; }
.wwo-grid .wwo-item:nth-child(4) { animation-delay: 0.20s; }
.wwo-grid .wwo-item:nth-child(5) { animation-delay: 0.25s; }
.wwo-grid .wwo-item:nth-child(6) { animation-delay: 0.30s; }

/* Feature card icon — hover rotation */
.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(-5deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Feature card — subtle inner glow on hover */
.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55,0.06) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.feature-card:hover::after {
    opacity: 1;
}
.feature-card-highlight::after {
    background: radial-gradient(ellipse at 50% 0%, rgba(230, 200, 96,0.06) 0%, transparent 70%);
}

/* Accumulators heading — green→gold gradient text like hero */
.accas-heading {
    background: linear-gradient(90deg, #E6C860, #D4AF37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Smooth spacing improvements between major sections.
   .results-ticker margin handled by canonical rule at line 7418. */
.todays-accas {
    margin-bottom: 24px;
}

/* League logo badges — hover glow */
.league-logo-badge {
    transition: all 0.2s ease;
}
.league-logo-badge:hover {
    border-color: rgba(212, 175, 55,0.4);
    color: #ccc;
    background: rgba(212, 175, 55,0.06);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .landing-hero .hero-title,
    .landing-hero .hero-subtitle,
    .landing-hero .hero-actions,
    .landing-hero .league-logos-bar,
    .features-grid .feature-card,
    .wwo-grid .wwo-item {
        animation: none !important;
        opacity: 1 !important;
    }
    .ticker-label::after {
        animation: none;
    }
}

/* ==========================================
   OFFERS PAGE
   ========================================== */
.offers-hero {
    text-align: center;
    padding: 60px 20px 30px;
}
.offers-hero h1 {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 800;
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}
.offers-hero-sub {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 520px;
    margin: 0 auto 16px;
}
.offers-hero-badges {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.offers-badge {
    padding: 4px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    color: #A6A6A6;
    font-size: 0.75rem;
    font-weight: 600;
}
.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 20px 0 60px;
}
.offers-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    padding: 24px 20px;
    text-align: center;
    transition: border-color 0.3s, transform 0.3s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.offers-card:hover {
    border-color: rgba(212, 175, 55,0.3);
    transform: translateY(-3px);
}
.offers-card-name {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.offers-card-offer {
    color: var(--accent-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 12px;
}
.offers-card-terms {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-bottom: 18px;
}
.offers-cta-btn {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.offers-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55,0.4);
}
.offers-cta-outline {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #D4AF37;
}
.offers-cta-outline:hover {
    background: rgba(212, 175, 55, 0.1);
}
.offers-cta-disabled {
    background: rgba(255,255,255,0.1);
    color: #888;
    cursor: default;
}
.offers-cta-disabled:hover {
    transform: none;
    box-shadow: none;
}
.offers-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.offers-card-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 0;
    background: rgba(212, 175, 55, 0.12);
    color: #D4AF37;
}
.offers-card-features {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.offers-feature {
    font-size: 0.68rem;
    padding: 3px 10px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.05);
    color: #999;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.offers-rg-notice {
    text-align: center;
    padding: 24px 20px;
    margin: 20px 0 40px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
}
.offers-rg-notice h3 {
    color: #ccc;
    font-size: 1rem;
    margin-bottom: 8px;
}
.offers-rg-notice p {
    color: #888;
    font-size: 0.78rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .offers-hero h1 {
        font-size: 1.8rem;
    }
    .offers-grid {
        grid-template-columns: 1fr;
        padding: 20px 0 40px;
    }
}

/* ==========================================
   VALUE BET BADGES
   ========================================== */
.value-badge {
    display: inline-block;
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 8px;
    vertical-align: middle;
    animation: valuePulse 2s ease-in-out infinite;
}

/* Headline pick + best-odds conversion CTA (top of predictions) */
.pick-callout {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; margin: 0 0 20px; padding: 16px 18px;
    background: linear-gradient(135deg, rgba(212, 175, 55,0.10), rgba(230, 200, 96,0.06));
    border: 1px solid rgba(212, 175, 55,0.3); border-radius: 0;
}
.pick-callout-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pick-callout-tag {
    font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    color: #D4AF37; background: rgba(212, 175, 55,0.14); border: 1px solid rgba(212, 175, 55,0.35);
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.pick-callout-sel { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.1rem; color: #F8F8F8; }
.pick-callout-prob { color: #A6A6A6; font-size: 0.85rem; }
.pick-callout-value {
    font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    color: #fff; background: linear-gradient(135deg,#D4AF37,#D4AF37); padding: 2px 7px; border-radius: 0;
}
.pick-callout-odds { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pick-callout-price { color: #cbd3de; font-size: 0.9rem; }
.pick-callout-price strong { color: #E6C860; font-size: 1.05rem; }
.pick-callout-book { color: #A6A6A6; font-size: 0.82rem; }
.pick-callout-btn {
    background: linear-gradient(135deg,#D4AF37,#D4AF37); color: #fff; text-decoration: none;
    font-weight: 700; font-size: 0.9rem; padding: 9px 18px; border-radius: 0; white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease;
}
.pick-callout-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(212, 175, 55,0.35); }
@media (max-width: 560px) {
    .pick-callout { flex-direction: column; align-items: stretch; }
    .pick-callout-odds { justify-content: space-between; }
}

/* Retention tie-in to the Smart Acca builder */
.acca-tiein {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 18px; border-radius: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55,0.10), rgba(212, 175, 55,0.06));
    border: 1px solid rgba(212, 175, 55,0.28);
}
.acca-tiein-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acca-tiein-text strong { font-family: 'Outfit', sans-serif; color: #F8F8F8; font-size: 1.02rem; }
.acca-tiein-text span { color: #A6A6A6; font-size: 0.86rem; }
.acca-tiein-btn {
    background: linear-gradient(135deg,#D4AF37,#D4AF37); color: #fff; text-decoration: none;
    font-weight: 700; font-size: 0.9rem; padding: 9px 18px; border-radius: 0; white-space: nowrap; flex-shrink: 0;
    transition: transform .15s ease, box-shadow .15s ease;
}
.acca-tiein-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(212, 175, 55,0.35); }

/* Visible FAQ accordion */
.preview-faq .faq-item {
    border: 1px solid rgba(255,255,255,0.08); border-radius: 0;
    padding: 0; margin-bottom: 10px; background: rgba(255,255,255,0.025);
}
.preview-faq .faq-item summary {
    cursor: pointer; padding: 14px 16px; font-family: 'Outfit', sans-serif; font-weight: 600;
    color: #ECECEC; font-size: 0.98rem; list-style: none;
}
.preview-faq .faq-item summary::-webkit-details-marker { display: none; }
.preview-faq .faq-item summary::after { content: '+'; float: right; color: #D4AF37; font-weight: 700; }
.preview-faq .faq-item[open] summary::after { content: '\2212'; }
.preview-faq .faq-item p { margin: 0; padding: 0 16px 14px; color: #A6A6A6; font-size: 0.9rem; line-height: 1.6; }

@media (max-width: 560px) {
    .acca-tiein { flex-direction: column; align-items: stretch; }
}
@keyframes valuePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
    50% { box-shadow: 0 0 8px 2px rgba(212, 175, 55, 0.2); }
}

/* ==========================================
   STATISTICAL TREND CALLOUTS
   ========================================== */
.trend-callouts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.trend-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #D4AF37;
    border-radius: 0;
    padding: 12px 16px;
}
.trend-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}
.trend-text {
    color: #d0d0d0;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ==========================================
   FORM STRIPS (preview cards)
   ========================================== */
.preview-form-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 0;
}
.form-mini {
    display: flex;
    gap: 2px;
}
.fm-w, .fm-d, .fm-l, .fm-unknown {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 0;
    text-align: center;
    font-size: 0.6rem;
    line-height: 16px;
    font-weight: 700;
}
.fm-w { background: rgba(212, 175, 55, 0.35); color: #D4AF37; }
.fm-d { background: rgba(212, 175, 55, 0.3); color: #D4AF37; }
.fm-l { background: rgba(255, 107, 107, 0.3); color: #ff6b6b; }
.fm-unknown {
    background: rgba(255, 255, 255, 0.06);
    color: #747474;
    font-weight: 500;
}
.form-vs {
    color: #666;
    font-size: 0.65rem;
}

/* Preview match cards (Saturday Acca, Previews) */
.preview-card {
    display: block;
    background: #151515;
    border: 1px solid #1E1E1E;
    border-radius: 0;
    padding: 16px;
    text-decoration: none;
    color: #F5F5F5;
    transition: border-color 0.2s, transform 0.15s;
    box-shadow: 0 2px 10px rgba(0, 0, 0,0.15);
}
.preview-card:hover {
    border-color: #D4AF37;
    transform: translateY(-2px);
}
.preview-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.preview-league {
    font-size: 0.72rem;
    font-weight: 700;
    color: #D4AF37;
    background: rgba(212, 175, 55,0.1);
    padding: 2px 8px;
    border-radius: 0;
}
.preview-kickoff {
    font-size: 0.75rem;
    color: #747474;
    font-weight: 600;
}
.preview-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #FF6B6B;
    background: rgba(255, 107, 107, 0.12);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 107, 107, 0.3);
}
.preview-live-pill .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF6B6B;
    animation: live-pulse 1.4s ease-in-out infinite;
}
.preview-live-pill .live-minute {
    color: #F5F5F5;
    font-weight: 700;
    font-size: 0.68rem;
}
.preview-ft-pill {
    font-size: 0.72rem;
    font-weight: 800;
    color: #747474;
    background: rgba(90, 107, 127, 0.12);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(90, 107, 127, 0.3);
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.preview-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.preview-teams .vs {
    color: #747474;
    font-size: 0.75rem;
    font-weight: 400;
}
.preview-fav {
    font-size: 0.72rem;
    color: #D4AF37;
    margin-top: 6px;
    font-weight: 600;
}

/* Preview card mini probability bars */
.preview-mini-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.preview-mini-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #A6A6A6;
}
.preview-mini-bar-row .bar-label {
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}
.preview-mini-bar-row .bar-track {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    overflow: hidden;
}
.preview-mini-bar-row .bar-fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.4s ease;
}
.preview-mini-bar-row .bar-fill.high { background: #D4AF37; }
.preview-mini-bar-row .bar-fill.medium { background: #E6C860; }
.preview-mini-bar-row .bar-fill.low { background: #FF6B6B; }
.preview-mini-bar-row .bar-val {
    width: 30px;
    font-weight: 600;
    font-size: 0.72rem;
}
.preview-mini-bar-row .bar-val.high { color: #D4AF37; }
.preview-mini-bar-row .bar-val.medium { color: #E6C860; }
.preview-mini-bar-row .bar-val.low { color: #FF6B6B; }

/* ==========================================
   H2H DOMINANCE BAR
   ========================================== */
.h2h-dominance-bar {
    display: flex;
    height: 32px;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 16px;
}
.h2h-bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 30px;
    transition: width 0.4s ease;
}
.h2h-bar-segment.home { background: rgba(212, 175, 55, 0.3); color: #D4AF37; }
.h2h-bar-segment.draw { background: rgba(212, 175, 55, 0.25); color: #D4AF37; }
.h2h-bar-segment.away { background: rgba(212, 175, 55, 0.3); color: #E6C860; }

/* H2H match result indicators */
.h2h-result-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}
.h2h-result-dot.home-win { background: #D4AF37; }
.h2h-result-dot.draw-result { background: #D4AF37; }
.h2h-result-dot.away-win { background: #E6C860; }

.h2h-match-row {
    display: flex;
    align-items: center;
}

/* ==========================================
   TOP CORRECT SCORE BADGE
   ========================================== */
.score-card.top-score {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.08);
    position: relative;
}
.top-score-badge {
    display: block;
    font-size: 0.55rem;
    font-weight: 800;
    color: #D4AF37;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* ==========================================
   NEWSLETTER CTA
   ========================================== */
.newsletter-section {
    margin: 40px 0 24px;
    padding: 28px 24px;
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 0;
    text-align: center;
}
.newsletter-inner h3 {
    font-size: 1.2rem;
    color: #eee;
    margin-bottom: 6px;
}
.newsletter-inner p {
    color: #A6A6A6;
    font-size: 0.9rem;
    margin-bottom: 16px;
}
.newsletter-form {
    display: flex;
    gap: 8px;
    max-width: 420px;
    margin: 0 auto;
}
.newsletter-form input[type="email"] {
    flex: 1;
    background: #101010;
    color: #eee;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    padding: 10px 14px;
    font-size: 0.9rem;
    outline: none;
}
.newsletter-form input[type="email"]:focus {
    border-color: #D4AF37;
}
.newsletter-form button {
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.newsletter-form button:hover { opacity: 0.85; }
.newsletter-success {
    color: #D4AF37;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 10px;
}
.newsletter-error {
    color: #FF6B6B;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 10px;
}

@media (max-width: 500px) {
    .newsletter-form {
        flex-direction: column;
    }
}

/* ==========================================
   NEWSLETTER SIGNUP CARD (retention uplift, May 2026)
   Used on accuracy, track-record, themed-accas, themed-acca-detail,
   match-preview, saturday-acca. Self-contained block with consent copy.
   ========================================== */
/* Flat panel, not a green-glow band. The gradient fill + bright green border made
   this the loudest thing on otherwise-clean data pages; unified to the standard
   flat dark card so it stops competing. The green stays on the button (the action). */
.newsletter-signup-card {
    margin: 32px 0 28px;
    padding: 24px 24px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    text-align: center;
}
.newsletter-signup-card h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.3;
}
.newsletter-signup-card > p {
    color: #D2D2D2;
    font-size: 0.95rem;
    margin: 0 auto 16px;
    max-width: 540px;
    line-height: 1.5;
}
.newsletter-signup-card .signup-form {
    display: flex;
    gap: 8px;
    max-width: 460px;
    margin: 0 auto 12px;
}
.newsletter-signup-card .signup-form input[type="email"] {
    flex: 1;
    background: #101010;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    padding: 11px 14px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    min-width: 0;
}
.newsletter-signup-card .signup-form input[type="email"]:focus {
    border-color: #D4AF37;
}
.newsletter-signup-card .signup-form input[type="email"]::placeholder {
    color: #7E7E7E;
}
.newsletter-signup-card .signup-form button {
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    color: #000000;
    border: none;
    border-radius: 0;
    padding: 11px 22px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
}
.newsletter-signup-card .signup-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}
.newsletter-signup-card .consent-note {
    color: #A6A6A6;
    font-size: 0.78rem;
    margin: 0;
    line-height: 1.5;
}
.newsletter-signup-card .consent-note a {
    color: #A6A6A6;
    text-decoration: underline;
}
.newsletter-signup-card .consent-note a:hover { color: #D4AF37; }
.newsletter-signup-card .signup-msg {
    margin-top: 10px;
    font-size: 0.88rem;
    min-height: 1em;
}
.newsletter-signup-card .signup-msg.is-success { color: #D4AF37; font-weight: 600; }
.newsletter-signup-card .signup-msg.is-error   { color: #FF6B6B; font-weight: 600; }
@media (max-width: 520px) {
    .newsletter-signup-card .signup-form { flex-direction: column; }
}

/* ==========================================
   DAILY ACCA CTA CARD (above-fold homepage promo, May 2026)
   ========================================== */
.daily-acca-cta-card {
    margin: 20px 0 24px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(230, 200, 96, 0.10), rgba(212, 175, 55, 0.06));
    border: 1px solid rgba(230, 200, 96, 0.30);
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}
.daily-acca-cta-card .daca-text {
    flex: 1 1 280px;
    min-width: 0;
}
.daily-acca-cta-card .daca-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #E6C860;
    margin: 0 0 4px;
}
.daily-acca-cta-card .daca-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #fff;
    margin: 0 0 4px;
    font-weight: 700;
}
.daily-acca-cta-card .daca-sub {
    color: #D2D2D2;
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.45;
}
.daily-acca-cta-card .daca-btn {
    background: linear-gradient(135deg, #E6C860, #D4AF37);
    color: #000000;
    border: none;
    border-radius: 0;
    padding: 11px 22px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
    display: inline-block;
}
.daily-acca-cta-card .daca-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(230, 200, 96, 0.4);
}
.daily-acca-cta-card.daca-compact {
    padding: 14px 18px;
    gap: 12px;
}
.daily-acca-cta-card.daca-compact .daca-title { font-size: 1.05rem; }
.daily-acca-cta-card.daca-compact .daca-sub { font-size: 0.82rem; }

/* ==========================================
   SATURDAY ACCA PAGE
   ========================================== */
.sat-acca-hero {
    text-align: center;
    margin-bottom: 32px;
}
.sat-acca-hero h1 {
    font-size: 2rem;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #E6C860, #D4AF37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sat-acca-hero .sat-date {
    color: #A6A6A6;
    font-size: 1.05rem;
}
.sat-acca-summary {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 0;
    padding: 24px;
    margin-bottom: 32px;
    text-align: center;
}
.sat-acca-summary .combined-odds {
    font-size: 2rem;
    font-weight: 800;
    color: #E6C860;
    font-family: var(--font-heading);
}
.sat-acca-summary .combined-label {
    color: #A6A6A6;
    font-size: 0.85rem;
    margin-top: 4px;
}
.sat-acca-legs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}
.sat-acca-leg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 14px 18px;
    transition: border-color 0.2s;
}
.sat-acca-leg:hover { border-color: #D4AF37; }
.sat-leg-match {
    font-weight: 600;
    color: #eee;
    font-size: 0.95rem;
}
.sat-leg-pick {
    color: #D4AF37;
    font-weight: 600;
    font-size: 0.85rem;
}
.sat-leg-prob {
    font-size: 0.82rem;
    color: #A6A6A6;
}
.sat-leg-odds {
    color: #E6C860;
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 50px;
    text-align: right;
}

@media (max-width: 600px) {
    .sat-acca-leg {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .sat-leg-odds {
        text-align: left;
    }
}

/* ==========================================
   VALUE BETS PAGE
   ========================================== */
.vb-hero {
    text-align: center;
    margin-bottom: 28px;
}
.vb-hero h1 {
    font-size: 2.2rem;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.vb-subtitle {
    color: #A6A6A6;
    font-size: 1.05rem;
    margin-bottom: 16px;
}
.vb-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 0;
    padding: 6px 18px;
}
.vb-count-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: #D4AF37;
    font-family: var(--font-heading);
}
.vb-count-label {
    color: #A6A6A6;
    font-size: 0.85rem;
}
.vb-explainer {
    margin-bottom: 32px;
}
.vb-explainer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.vb-explainer-item {
    display: flex;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 16px;
}
.vb-explainer-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.vb-explainer-item strong {
    color: #eee;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 4px;
}
.vb-explainer-item p {
    color: #A6A6A6;
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
}
.vb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}
.vb-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 18px;
    transition: border-color 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vb-card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}
.vb-card.vb-top {
    border-color: rgba(212, 175, 55, 0.2);
    background: rgba(212, 175, 55, 0.04);
}
.vb-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.vb-confidence {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.vb-league {
    color: #888;
    font-size: 0.78rem;
}
.vb-match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
    color: #eee;
}
.vb-vs {
    color: #555;
    font-size: 0.8rem;
    font-weight: 400;
}
.vb-pick {
    text-align: center;
}
.vb-pick-type {
    color: #888;
    font-size: 0.78rem;
    display: block;
}
.vb-pick-selection {
    color: #D4AF37;
    font-weight: 700;
    font-size: 0.95rem;
}
.vb-edge-display {
    margin: 4px 0;
}
.vb-edge-bar-track {
    position: relative;
    height: 20px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0;
    overflow: hidden;
}
.vb-implied {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(231, 76, 60, 0.25);
    border-radius: 0;
    z-index: 1;
}
.vb-model {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(212, 175, 55, 0.35);
    border-radius: 0;
    z-index: 2;
    border-right: 2px solid #D4AF37;
}
.vb-edge-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}
.vb-edge-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #A6A6A6;
}
.vb-edge-label strong {
    color: #ddd;
}
.vb-edge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.vb-edge-dot.bookmaker {
    background: rgba(231, 76, 60, 0.6);
}
.vb-edge-dot.model {
    background: #D4AF37;
}
.vb-edge-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vb-edge-pct {
    color: #D4AF37;
    font-weight: 800;
    font-size: 1rem;
    font-family: var(--font-heading);
}
.vb-odds {
    color: #E6C860;
    font-weight: 700;
    font-size: 0.95rem;
}
.vb-reasoning {
    color: #A6A6A6;
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.4;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 8px;
}
.vb-bookmaker {
    font-size: 0.78rem;
    color: #888;
}
.vb-bookmaker strong {
    color: #bbb;
}
.vb-empty {
    text-align: center;
    padding: 60px 20px;
    color: #A6A6A6;
}
.vb-empty h2 {
    color: #ccc;
    margin-bottom: 12px;
}
.vb-empty ul {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}
.vb-empty li {
    padding: 4px 0;
}
.vb-empty li::before {
    content: "\2022";
    color: #D4AF37;
    margin-right: 8px;
}
.vb-faq {
    margin: 40px 0;
}
.vb-faq h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #ddd;
    font-size: 1.3rem;
}
.vb-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.vb-faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 16px;
}
.vb-faq-item h3 {
    color: #eee;
    font-size: 0.9rem;
    margin-bottom: 6px;
}
.vb-faq-item p {
    color: #A6A6A6;
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 768px) {
    .vb-explainer-inner,
    .vb-faq-grid {
        grid-template-columns: 1fr;
    }
    .vb-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   EDGE BADGES (Value Edge Display)
   ========================================== */
.edge-badge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.12);
    color: #D4AF37;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 0;
    border: 1px solid rgba(212, 175, 55, 0.25);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* Edge badge on accumulator legs */
.leg-edge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.12);
    color: #D4AF37;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 0;
    border: 1px solid rgba(212, 175, 55, 0.2);
    margin-top: 2px;
}

/* Edge badge on hero pick chips */
.hero-pick-edge {
    display: block;
    background: rgba(212, 175, 55, 0.15);
    color: #D4AF37;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 0;
    margin-top: 2px;
    text-align: center;
}

/* ==========================================
   XG SECTION (Match Preview)
   ========================================== */
.xg-section .xg-subtitle {
    color: #A6A6A6;
    font-size: 0.9rem;
    margin-bottom: 24px;
    line-height: 1.5;
}

.xg-comparison {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 28px;
}

.xg-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xg-label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.xg-bar-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.xg-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.xg-team-label {
    min-width: 110px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #eee;
    text-align: right;
}

.xg-bar-track {
    flex: 1;
    height: 22px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.xg-bar-fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.6s ease;
    min-width: 4px;
}

.xg-bar-fill.xg-home {
    background: linear-gradient(90deg, #D4AF37, #D4AF37);
}

.xg-bar-fill.xg-away {
    background: linear-gradient(90deg, #E6C860, #D4AF37);
}

.xg-bar-fill.xg-against-home {
    background: linear-gradient(90deg, #FF6B6B, #c0392b);
}

.xg-bar-fill.xg-against-away {
    background: linear-gradient(90deg, #E6C860, #D4AF37);
}

.xg-value {
    min-width: 40px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: #fff;
}

/* xG Performance Cards */
.xg-performance-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.xg-performance-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.xg-performance-card.xg-over {
    border-color: rgba(231, 76, 60, 0.3);
    background: rgba(231, 76, 60, 0.06);
}

.xg-performance-card.xg-under {
    border-color: rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.06);
}

.xg-performance-card.xg-inline {
    border-color: rgba(255, 255, 255, 0.12);
}

.xg-perf-team {
    font-weight: 600;
    font-size: 0.9rem;
    color: #eee;
}

.xg-perf-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

.xg-over .xg-perf-value { color: #FF6B6B; }
.xg-under .xg-perf-value { color: #D4AF37; }
.xg-inline .xg-perf-value { color: #A6A6A6; }

.xg-perf-label {
    font-size: 0.78rem;
    color: #888;
}

/* xG Last 5 */
.xg-last5 h4 {
    font-family: var(--font-heading);
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.xg-last5-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.xg-last5-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.xg-l5-team {
    font-weight: 600;
    font-size: 0.85rem;
    color: #eee;
}

.xg-l5-stat {
    font-size: 0.82rem;
    color: #A6A6A6;
}

.xg-l5-stat strong {
    color: #fff;
}

@media (max-width: 600px) {
    .xg-performance-row,
    .xg-last5-grid {
        grid-template-columns: 1fr;
    }
    .xg-team-label {
        min-width: 80px;
        font-size: 0.78rem;
    }
}

/* ==========================================
   TREND BADGES (Rolling Accuracy)
   ========================================== */
.trend-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 0;
    white-space: nowrap;
}

.trend-badge.trend-up {
    background: rgba(212, 175, 55, 0.12);
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.25);
}

.trend-badge.trend-up::before {
    content: "\25B2 ";
    font-size: 0.65rem;
}

.trend-badge.trend-down {
    background: rgba(255, 107, 107, 0.12);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.25);
}

.trend-badge.trend-down::before {
    content: "\25BC ";
    font-size: 0.65rem;
}

.trend-badge.trend-stable {
    background: rgba(255, 255, 255, 0.06);
    color: #A6A6A6;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.trend-badge.trend-stable::before {
    content: "\25C6 ";
    font-size: 0.6rem;
}

.trend-badge.trend-na {
    color: #555;
    background: none;
    border: none;
}

/* ==========================================
   FLOATING FOOTBALLS BACKGROUND
   ========================================== */

/* ── Team page: scoring profile ───────────────────────────────────── */
.team-scoring-sub {
    color: var(--text-muted);
    font-size: var(--fs-meta);
    margin: 0 0 14px;
}
.team-scoring-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.team-scoring-stat {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0;
    padding: 14px 16px;
    text-align: center;
}
.team-scoring-value {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: #D4AF37;
    line-height: 1.1;
}
.team-scoring-label {
    color: var(--text-muted);
    font-size: var(--fs-meta);
    margin-top: 4px;
}

/* ── Featured teams strip on homepage ─────────────────────────────── */
.featured-teams {
    max-width: 940px;
    margin: 0 auto 28px;
    padding: 0 8px;
}
.featured-teams-title {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.featured-teams-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.featured-team-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 7px 14px;
    color: #D2D2D2;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.18s ease;
}
.featured-team-chip:hover {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.06);
    color: #fff;
}

/* ── Team-name links ──────────────────────────────────────────────── */
.team-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(212, 175, 55, 0.35);
    transition: color 0.15s, border-color 0.15s;
}
.team-link:hover {
    color: #D4AF37;
    border-bottom-color: #D4AF37;
}
.team-vs-sep {
    color: var(--text-muted);
    margin: 0 4px;
}

/* ==========================================
   POLISH PASS — typography, whitespace, accent discipline.
   Loaded last so it overrides earlier rules. Three goals:
     1. Lock type scale to five sizes
     2. Replace decorative borders with subtle shadows
     3. Demote gold/blue/red to status-only roles, lean on green
   ========================================== */

/* Hero — one display size, tightened tracking */
.hero-title,
.landing-hero h1 {
    font-size: var(--fs-display) !important;
    letter-spacing: -0.015em;
    line-height: 1.05;
}
@media (max-width: 540px) {
    .hero-title,
    .landing-hero h1 {
        font-size: 1.75rem !important;
    }
}

/* Section h2 — single weight + size, no gradient text on long blocks */
.preview-section h2,
.team-section h2,
.about-section h2,
.recent-form-section h2,
.changelog-section h2,
.search-title,
.accas-heading,
.todays-accas h2,
.about-card h3 {
    font-size: var(--fs-heading) !important;
    letter-spacing: -0.005em;
    font-weight: 700;
}

/* Card / sub-section titles */
.preview-stat-card h4,
.recent-form-card h4,
.feature-card h3,
.tier-header,
.acca-tier-card h4,
.qs-title,
.tips-strip-text strong {
    font-size: var(--fs-subhead) !important;
    font-weight: 700;
}

/* Body + meta sizing — kill the 0.65/0.68/0.72/0.78/0.82/0.88 chaos */
.preview-section p,
.recent-form-card p,
.team-section p,
.about-card p,
.changelog-section p {
    font-size: var(--fs-body);
    line-height: 1.65;
}
.tier-stat-label,
.recent-form-label,
.team-form-pill-label,
.team-form-split-label,
.qs-sub,
.tips-strip-text span,
.league-form-points,
.release-date,
.release-tag,
.bab-stat,
.live-stat-label {
    font-size: var(--fs-meta) !important;
}

/* Vertical rhythm — sections that AREN'T governed by the homepage repaint
   block (search-form, build-a-bet, byob-section, tips-strip, results-ticker
   and how-to-use are all owned by the repaint at line 11531+). */
.preview-section,
.team-section,
.changelog-section .release,
.todays-accas,
.what-we-offer,
.live-stats-bar {
    margin-bottom: var(--section-gap-tight);
}

/* Replace decorative borders on cards with subtle elevation.
   Keep semantic accent borders (.acca-tier-* left bar, .release left bar). */
.feature-card,
.preview-stat-card,
.recent-form-card,
.qs-btn,
.live-stat-card,
.about-card,
.team-section,
.preview-section,
.search-form,
.build-a-bet,
.tips-strip {
    border-color: transparent !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 12px 32px -16px rgba(0, 0, 0, 0.6);
}

/* Card padding — bigger on desktop, tight on mobile */
.feature-card,
.preview-stat-card,
.recent-form-card,
.about-card,
.qs-btn,
.tips-strip {
    padding: var(--card-pad-desktop);
}
@media (max-width: 540px) {
    .feature-card,
    .preview-stat-card,
    .recent-form-card,
    .about-card,
    .qs-btn,
    .tips-strip {
        padding: var(--card-pad-mobile);
    }
}

/* Accent discipline — green is the signature.
   Gold reserved for: form table points, value/edge markers.
   Blue reserved for: live status only.
   Red reserved for: losses only. */

/* Strip gold from generic headings — keep it where it has meaning */
.search-title,
.accas-heading,
.offers-hero h1,
.team-hero h1 {
    /* Keep gradient on hero title only — these were copying it everywhere */
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

/* Solid-white H1s with single-accent green underline — replaces the
   green→gold gradient that read as 'crypto site' on every hero. */
.landing-hero .hero-title,
.changelog-hero h1 {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

/* Quieten gold/amber across decorative chrome — keep where semantic */
.tier-fold,
.feature-card-highlight {
    color: #D2D2D2;
}

/* Typography: heading family + crisper rendering */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Cleaner button feel across CTAs */
.btn-search,
.fm-search-btn,
.tips-strip-btn,
.hero-cta {
    border-radius: 0;
    letter-spacing: 0.01em;
}



/* ── Match-preview: Team intel (injuries with photos) ───────────── */
.injury-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.injury-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 0;
}
.injury-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.injury-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.injury-name {
    color: #F5F5F5;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
}
.injury-reason {
    color: #A6A6A6;
    font-size: 0.78rem;
    text-transform: capitalize;
}
.injury-list::-webkit-scrollbar { width: 6px; }
.injury-list::-webkit-scrollbar-track { background: transparent; }
.injury-list::-webkit-scrollbar-thumb {
    background: rgba(255, 138, 138, 0.3);
    border-radius: 0;
}

/* ── Match-preview disclosure blocks (Form & goals / Team news / Other markets) ── */
.writeup-disclosure summary {
    transition: color 0.15s ease;
}
.writeup-disclosure summary:hover {
    color: #D4AF37 !important;
}
.writeup-disclosure summary span:first-child {
    display: inline-block;
    transition: transform 0.18s ease;
}
.writeup-disclosure[open] summary span:first-child {
    transform: rotate(90deg);
}
.writeup-disclosure summary::-webkit-details-marker { display: none; }
.writeup-disclosure summary::marker { content: ""; }

/* ── Track-record W/L pop styling ─────────────────────────────────── */
.tr-wl-stack {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.tr-wl-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1em;
    /* Glow halo removed — it made the middle W/L tile shout while its two flat
       neighbours stayed calm, so the KPI row read as inconsistent. Colour alone
       (green wins / red losses) carries the meaning. */
    letter-spacing: -0.02em;
}
.tr-wl-wins {
    color: #D4AF37;
}
.tr-wl-losses {
    color: #FF6B6B;
    font-size: 0.78em;
    opacity: 0.8;
}
.tr-wl-sep {
    color: #4A5568;
    font-weight: 300;
    font-size: 0.7em;
}

/* ==========================================
   HOMEPAGE POLISH PASS — 2026-05-04 (cache buster 20260505g)
   Five surgical fixes. Loaded last so these win the cascade.
   ==========================================
   1. CTA hierarchy: primary green > outlined green > ghost neutral
   2. Hero pick chips read as data, not decoration
   3. Quick Shortcuts vs Popular Teams visual separation
   4. Results ticker readability
   5. Newsletter input focus state
   ========================================== */

/* --- 1. Hero CTA hierarchy --------------------------------------- */
/* Primary stays untouched (filled green gradient). Demote secondary
   to outlined green and tertiary to ghost neutral. */
.hero-actions .hero-cta.hero-cta-secondary {
    background: transparent !important;
    border: 1.5px solid #D4AF37 !important;
    color: #D4AF37 !important;
    animation: none !important;
    box-shadow: none !important;
}
.hero-actions .hero-cta.hero-cta-secondary .hero-cta-icon {
    background: rgba(212, 175, 55, 0.12);
    color: #D4AF37;
}
.hero-actions .hero-cta.hero-cta-secondary .hero-cta-title,
.hero-actions .hero-cta.hero-cta-secondary .hero-cta-sub {
    color: #D4AF37;
}
.hero-actions .hero-cta.hero-cta-secondary:hover {
    background: rgba(212, 175, 55, 0.08) !important;
    border-color: #D4AF37 !important;
    transform: translateY(-1px);
}

.hero-actions .hero-cta.hero-cta-tertiary {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    color: #D2D2D2 !important;
    animation: none !important;
    box-shadow: none !important;
}
.hero-actions .hero-cta.hero-cta-tertiary .hero-cta-icon {
    background: rgba(255, 255, 255, 0.06);
    color: #D2D2D2;
}
.hero-actions .hero-cta.hero-cta-tertiary .hero-cta-title,
.hero-actions .hero-cta.hero-cta-tertiary .hero-cta-sub {
    color: #D2D2D2;
}
.hero-actions .hero-cta.hero-cta-tertiary:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* --- 2. Hero pick chips: data tiles, not decoration -------------- */
.hero-picks .hero-pick-chip {
    background: var(--bg-2, #101010) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    transition: transform 0.15s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.hero-picks .hero-pick-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(212, 175, 55, 0.45) !important;
    box-shadow: 0 6px 18px -8px rgba(212, 175, 55, 0.25);
}
.hero-picks .hero-pick-teams {
    color: #F5F5F5;
}
.hero-picks .hero-pick-prob {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-feature-settings: "tnum" 1;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #A6A6A6; /* default muted; overridden by data attrs below */
}
/* Probability colour cascade — pure CSS using attribute selectors on the
   rendered text. Falls through to the muted default above for <60. */
.hero-picks .hero-pick-chip:has(.hero-pick-prob[data-prob-tier="hi"]) .hero-pick-prob,
.hero-picks .hero-pick-prob[data-prob-tier="hi"] { color: #D4AF37; }
.hero-picks .hero-pick-chip:has(.hero-pick-prob[data-prob-tier="mid"]) .hero-pick-prob,
.hero-picks .hero-pick-prob[data-prob-tier="mid"] { color: #E6C860; }

/* Pure-CSS fallback for prob colour without data attrs: scan the text.
   Browsers that don't support :has fall back to the default muted then
   we paint over with these attribute-free signal rules. */
.hero-picks .hero-pick-prob { color: #F5F5F5; } /* visible default */

/* --- 3. Quick Shortcuts ↔ Popular Teams separation --------------- */
.quick-shortcuts {
    margin-bottom: 16px !important;
}
.featured-teams {
    margin-top: 8px !important;
    margin-bottom: 28px;
}
/* Demote popular team chips to text-style "secondary nav" */
.featured-teams .featured-team-chip {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 4px 6px !important;
    color: #A6A6A6 !important;
    font-size: 0.82rem !important;
    font-weight: 500;
    transition: color 0.15s ease;
}
.featured-teams .featured-team-chip:hover {
    background: transparent !important;
    color: #fff !important;
    text-decoration: underline;
    text-decoration-color: #D4AF37;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
}
.featured-teams .featured-teams-row {
    gap: 14px;
}

/* --- 4. Recent Results ticker readability ------------------------ */
.results-ticker {
    padding: 10px 16px !important;
}
.results-ticker .ticker-item {
    font-size: 0.92rem;
}
.results-ticker .ticker-content {
    animation-duration: 60s !important;
}
.results-ticker .outcome-badge.win {
    background: transparent;
    color: #D4AF37 !important;
    font-weight: 800;
}
.results-ticker .outcome-badge.loss {
    background: transparent;
    color: #FF6B6B !important;
    font-weight: 800;
}
.results-ticker .ticker-match {
    color: #F5F5F5;
}

/* --- 5. Newsletter input focus + button hover -------------------- */
.tips-strip-form input[type="email"]:focus,
.tips-strip-form input:focus {
    border-color: #D4AF37 !important;
    outline: 2px solid rgba(212, 175, 55, 0.2);
    outline-offset: 1px;
}
.tips-strip-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -4px #D4AF37;
}

/* ============================================================
   Nav polish (May 5, 2026) — two-group nav, active state pill,
   live red-dot pulse, card-vs-link affordance consistency.
   Appended overrides; do not edit earlier rules.
   ============================================================ */

/* Two-group nav layout.
   SPACING IS TIGHT ON PURPOSE. The header sits inside the 1200px container, so its
   inner row is 1120px at any viewport, and the row wanted 1304px on the home page /
   1353px where the "Build a Bet" CTA also shows. That overflow pushed the search
   field, and on CTA pages the CTA itself, clean past the right edge of the header --
   the field was cut off mid-placeholder. Every value below was measured, not
   guessed: these trims plus the compact resting search recover ~300px. */
.main-nav {
    align-items: center;
    gap: 10px;
}
.nav-primary,
.nav-secondary {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.nav-secondary {
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* Base nav-link — explicit padding + radius for active pill.
   This block is later and same-specificity, so it beats the .nav-link and
   .nav-leagues-toggle rules further up the file. Set nav link padding HERE. */
.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 0;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Hover — text strengthens + faint underline; no background fill so it
   stays visibly distinct from the active pill. */
.nav-link:hover {
    color: var(--text-strong);
    background: transparent;
    box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.6);
}

/* Active — solid pill + green text + bold inset bottom-border (no layout shift) */
.nav-link.active {
    background: rgba(212, 175, 55, 0.12);
    color: var(--accent-primary);
    box-shadow: inset 0 -2px 0 var(--accent-primary);
}
.nav-link.active:hover {
    background: rgba(212, 175, 55, 0.16);
    color: var(--accent-primary);
}
/* Suppress the older ::after underline in favour of the inset shadow */
.nav-link.active::after {
    display: none;
}

/* Meta links (Accuracy / Track Record) — slightly dimmer baseline */
.nav-link-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.85;
    /* "Track Record" was wrapping onto two lines in the bar, which read as a broken
       layout rather than a deliberate two-line label. */
    white-space: nowrap;
}
.nav-link-meta:hover {
    opacity: 1;
}

/* Founders — the join/money CTA. Stands out from the muted meta links as a
   gold pill with a money-bag, so the one commercial door in the nav is enticing
   without shouting. */
.nav-founders {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #E6C860;
    background: rgba(230, 200, 96, 0.10);
    border: 1px solid rgba(230, 200, 96, 0.35);
    border-radius: 999px;
    padding: 5px 13px;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.nav-founders .nav-founders-icon {
    font-size: 0.95rem;
    line-height: 1;
    animation: navFoundersBob 2.8s ease-in-out infinite;
}
.nav-founders:hover {
    color: #E6C860;
    background: rgba(230, 200, 96, 0.18);
    border-color: rgba(230, 200, 96, 0.6);
    transform: translateY(-1px);
}
.nav-founders.active {
    background: rgba(230, 200, 96, 0.2);
    border-color: rgba(230, 200, 96, 0.7);
}
@keyframes navFoundersBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-founders .nav-founders-icon { animation: none; }
}

/* Live link with optional pulsing red dot */
.nav-link-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FF6B6B;
    animation: navLivePulse 1.6s ease-out infinite;
    flex-shrink: 0;
}
@keyframes navLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 107, 107, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
}

/* World Cup nav link: dot for "in tournament window", gold pip for "live now". */
.nav-link-wc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav-wc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D4AF37;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.55);
}
.nav-wc-live {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #1A1300;
    background: #E6C860;
    border-radius: 0;
    padding: 1px 5px;
    margin-left: 2px;
    animation: navLivePulse 1.6s ease-out infinite;
}

/* World Cup landing-page surfaces (homepage hero + /previews section).
   Lights up during COUNTDOWN_START..TOURNAMENT_END only; outside that
   window the Thymeleaf guards keep the markup off the page entirely. */
.wc-surface {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(230, 200, 96, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 0;
    padding: 20px 22px;
    margin: 0 0 28px;
}
.wc-surface-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #D4AF37;
    margin-bottom: 6px;
}
.wc-surface-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #F6F6F6;
}
.wc-surface-sub {
    color: #A6A6A6;
    font-size: 0.95rem;
    margin: 0 0 14px;
}
.wc-opener {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 0.92rem;
    color: #D2D2D2;
    margin: 0 0 14px;
}
.wc-opener-teams {
    color: #F6F6F6;
    font-weight: 600;
}
.wc-opener-meta {
    color: #A6A6A6;
}

.wc-fixture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 0 0 14px;
}
.wc-fixture-card {
    display: block;
    background: #101010;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.wc-fixture-card:hover {
    border-color: #D4AF37;
    transform: translateY(-1px);
}
.wc-fixture-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: #A6A6A6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.wc-fixture-stage {
    color: #D4AF37;
    font-weight: 600;
}
.wc-fixture-kick {
    font-weight: 600;
    color: #D2D2D2;
}
.wc-fixture-live {
    background: #E6C860;
    color: #1A1300;
    font-weight: 800;
    border-radius: 0;
    padding: 1px 6px;
    letter-spacing: 0.04em;
}
.wc-fixture-teams {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #F6F6F6;
    margin-bottom: 4px;
    line-height: 1.25;
}
.wc-fixture-vs {
    color: #7E7E7E;
    margin: 0 6px;
    font-weight: 400;
}
.wc-fixture-venue,
.preview-venue {
    font-size: 0.82rem;
    color: #A6A6A6;
    margin-top: 8px;
}

.wc-surface-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}
.wc-surface-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 0;
    text-decoration: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.wc-surface-cta--primary {
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    color: #fff;
}
.wc-surface-cta--ghost {
    background: transparent;
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.4);
}
.wc-surface-cta:hover { transform: translateY(-1px); opacity: 0.95; }

.wc-fixture-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}
.wc-fixture-list li {
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    font-size: 0.92rem;
    color: #D2D2D2;
}
.wc-fixture-list li:last-child { border-bottom: 0; }
.wc-fixture-list .wc-mini-time {
    display: inline-block;
    min-width: 60px;
    color: #A6A6A6;
    font-weight: 600;
}
.wc-fixture-list .wc-mini-teams {
    color: #F6F6F6;
    font-weight: 500;
}
.wc-fixture-list .wc-mini-stage {
    color: #D4AF37;
    font-size: 0.78rem;
    margin-left: 6px;
}

/* =====================================================================
   World Cup HERO — premium homepage block (June 2026 redesign)
   ---------------------------------------------------------------------
   Replaces the old text-only .wc-surface treatment with a three-tile
   composition: (1) opener feature, (2) compact upcoming-fixture cards,
   (3) quiet secondary links. Distinct .wc-hero-* namespace so existing
   .wc-surface / .wc-fixture-* rules on /previews and /world-cup keep
   working untouched.
   ===================================================================== */
.wc-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 0% 0%, rgba(212, 175, 55, 0.10), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(230, 200, 96, 0.07), transparent 55%),
        linear-gradient(155deg, #151515 0%, #141414 100%);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 0;
    padding: 26px 26px 22px;
    margin: 0 0 30px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 20px 50px -30px rgba(0, 0, 0, 0.6);
}
/* Subtle geometric depth — concentric stadium-style arcs at ~4% opacity. */
/* The decorative pattern MUST stay out of flow. It's a direct div child of
   .wc-hero, so the `.wc-hero > div { position: relative }` rule below would
   otherwise override `position: absolute` (equal specificity, later wins) and
   drop the 520px-tall pattern into normal flow — which created a ~520px empty
   gap at the top of the hero (the "void"). The `:not(.wc-hero-pattern)` on the
   flow rule keeps the pattern absolute; `!important` here is belt-and-braces. */
.wc-hero-pattern {
    position: absolute !important;
    top: -40%;
    right: -10%;
    width: 520px;
    height: 520px;
    pointer-events: none;
    background:
        repeating-radial-gradient(
            circle at center,
            transparent 0,
            transparent 28px,
            rgba(212, 175, 55, 0.06) 29px,
            transparent 30px
        );
    opacity: 0.55;
    z-index: 0;
}
.wc-hero > div:not(.wc-hero-pattern),
.wc-hero > header,
.wc-hero > nav {
    position: relative;
    z-index: 1;
}

/* Eyebrow + small head */
.wc-hero-head {
    margin: 0 0 16px;
}
.wc-hero-eyebrow {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E6C860;
    padding: 4px 10px;
    border: 1px solid rgba(230, 200, 96, 0.32);
    border-radius: 999px;
    background: rgba(230, 200, 96, 0.06);
}
.wc-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #F6F6F6;
    margin: 12px 0 0;
    letter-spacing: -0.01em;
}

/* ---------- Tile 1: OPENER FEATURE ---------- */
.wc-opener-tile {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 28px;
    align-items: center;
    padding: 22px 24px;
    margin: 0 0 22px;
    background: linear-gradient(150deg,
                rgba(212, 175, 55, 0.10) 0%,
                rgba(0, 0, 0, 0.55) 55%,
                rgba(230, 200, 96, 0.07) 100%);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.wc-opener-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.wc-opener-countdown-num {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 5.5rem;
    line-height: 0.9;
    background: linear-gradient(135deg, #D4AF37 0%, #E6C860 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.04em;
}
.wc-opener-countdown-label {
    margin-top: 6px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: #A6A6A6;
}
.wc-opener-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.wc-opener-matchup {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.wc-opener-side {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.wc-opener-flag {
    font-size: 2.4rem;
    line-height: 1;
    /* Native emoji rendering on system fonts — avoid forcing serif fallbacks. */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
/* Flag IMAGE variant — used in preference to the emoji span because Windows
   desktop browsers don't render regional-indicator flag emoji (they show the
   bare "MX"/"ZA" code). Sized to sit on the matchup baseline like the emoji. */
.wc-opener-flag-img {
    width: 44px;
    height: 30px;
    object-fit: cover;
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
}
.wc-opener-team {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
    color: #F6F6F6;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.wc-opener-versus {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    color: #7E7E7E;
    font-size: 1rem;
    text-transform: lowercase;
}
.wc-opener-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wc-opener-meta-cell { min-width: 0; }
.wc-opener-meta-cell dt {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7E7E7E;
    margin: 0 0 3px;
}
.wc-opener-meta-cell dd {
    font-family: 'Outfit', sans-serif;
    font-size: 0.98rem;
    font-weight: 600;
    color: #F6F6F6;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Primary CTA — green gradient button */
.wc-hero-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.98rem;
    color: #000000;
    text-decoration: none;
    padding: 11px 22px;
    border-radius: 0;
    background: linear-gradient(135deg, #D4AF37 0%, #D4AF37 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 8px 22px -8px rgba(212, 175, 55, 0.55);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.wc-hero-cta-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 12px 28px -8px rgba(212, 175, 55, 0.65);
}
.wc-hero-cta-primary--inline {
    margin-top: 6px;
}
/* Hero CTA pair — primary "Build a bet" + secondary "hub". */
.wc-hero-cta-pair {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.wc-hero-cta-secondary-btn {
    display: inline-flex;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    color: #E8E8E8;
    text-decoration: none;
    padding: 11px 18px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: background 0.18s ease, border-color 0.18s ease;
}
.wc-hero-cta-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(212, 175, 55, 0.45);
}

/* ---------- Tile 2: UPCOMING fixtures ---------- */
.wc-upcoming { margin: 0 0 18px; }
.wc-upcoming-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #A6A6A6;
    margin: 0 0 10px;
}
.wc-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.wc-upcoming-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(21, 21, 21, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.wc-upcoming-card:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(21, 21, 21, 0.9);
}
.wc-upcoming-stage {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #D4AF37;
}
.wc-upcoming-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #F6F6F6;
    font-size: 0.95rem;
    flex-wrap: wrap;
}
.wc-upcoming-flag {
    font-size: 1.1rem;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.wc-upcoming-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wc-upcoming-v { color: #7E7E7E; font-weight: 400; }
.wc-upcoming-foot {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: #A6A6A6;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wc-upcoming-dot { color: #475569; }

/* ---------- Tournament-active TODAY grid ---------- */
.wc-today-grid {
    display: grid;
    /* Cap card width (was 1fr) so a single fixture doesn't stretch across the
       whole band and read as thin/empty; left-align the row. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
    justify-content: start;
    gap: 12px;
    margin: 0 0 18px;
}
.wc-today-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(21, 21, 21, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.wc-today-card:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.5);
}
.wc-today-card--live {
    border-color: rgba(230, 200, 96, 0.5);
    background:
        linear-gradient(180deg, rgba(230, 200, 96, 0.06), transparent 60%),
        rgba(21, 21, 21, 0.85);
}
.wc-today-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.wc-today-stage {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #D4AF37;
}
.wc-today-kick {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    color: #D2D2D2;
}
.wc-today-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #E6C860;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(230, 200, 96, 0.12);
    border: 1px solid rgba(230, 200, 96, 0.35);
}
.wc-today-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E6C860;
    box-shadow: 0 0 0 0 rgba(230, 200, 96, 0.6);
    animation: wcLivePulse 1.4s ease-out infinite;
}
@keyframes wcLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(230, 200, 96, 0.65); }
    70%  { box-shadow: 0 0 0 8px rgba(230, 200, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 200, 96, 0); }
}
.wc-today-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.wc-today-side {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex: 1;
}
.wc-today-side:last-child {
    flex-direction: row-reverse;
    text-align: right;
}
.wc-today-flag {
    font-size: 1.5rem;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    flex-shrink: 0;
}
.wc-today-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #F6F6F6;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wc-today-v {
    color: #475569;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
}
/* Finished match: full-time badge + score replace the kickoff/"v". */
.wc-today-ft {
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #A6A6A6;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(166, 166, 166, 0.12);
    border: 1px solid rgba(166, 166, 166, 0.3);
}
.wc-today-score {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: #D4AF37;
    padding: 0 10px;
}
.wc-today-card--done { opacity: 0.92; }
.wc-today-venue {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: #A6A6A6;
}

/* ---------- Tile 3: SECONDARY links (quiet, no buttons) ---------- */
.wc-hero-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wc-hero-secondary-link {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #A6A6A6;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.wc-hero-secondary-link:hover {
    color: #D4AF37;
    border-bottom-color: rgba(212, 175, 55, 0.5);
}

/* ---------- Mobile / narrow ---------- */
@media (max-width: 680px) {
    .wc-hero { padding: 20px 18px 18px; }
    .wc-opener-tile {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px 16px;
    }
    .wc-opener-countdown {
        flex-direction: row;
        gap: 14px;
        align-items: baseline;
        justify-content: flex-start;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 0 0 14px;
    }
    .wc-opener-countdown-num { font-size: 4rem; }
    .wc-opener-countdown-label {
        margin-top: 0;
        font-size: 0.7rem;
    }
    .wc-opener-matchup { gap: 12px; }
    .wc-opener-team { font-size: 1.4rem; }
    .wc-opener-flag { font-size: 2rem; }
    .wc-opener-meta-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 0;
    }
    .wc-hero-cta-primary { width: 100%; justify-content: center; }
    .wc-hero-pattern { display: none; }
    .wc-today-name { font-size: 0.95rem; }
    .wc-today-flag { font-size: 1.3rem; }
    .wc-hero-secondary { gap: 14px; }
}

/* Card-vs-link affordance consistency
   ------------------------------------
   Cards = clickable surfaces with lift + border shift.
   Links = subtle underline only.
   Static = no hover.
*/

/* Cards: cursor + transition baseline */
.match-card,
.hero-pick-chip,
.banker-card,
.value-card,
.featured-team-chip {
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* Cards: unified hover lift */
.match-card:hover,
.hero-pick-chip:hover,
.banker-card:hover,
.value-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent-primary);
}

/* Ticker items only get pointer/lift if they're actually links */
a.ticker-item {
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
a.ticker-item:hover {
    transform: translateY(-1px);
    border-color: var(--accent-primary);
}

/* Text links: subtle underline only — no transform, no elevation */
.featured-team-chip {
    transform: none;
}
.featured-team-chip:hover {
    transform: none;
    box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.6);
}
.tips-strip-tg {
    transition: box-shadow 0.18s ease, color 0.18s ease;
}
.tips-strip-tg:hover {
    box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.6);
}
.hero-trust-links a {
    transition: box-shadow 0.18s ease, color 0.18s ease;
}
.hero-trust-links a:hover {
    box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.6);
    transform: none;
}

/* Static / read-only surfaces — explicitly no hover affordance */
.hero-trust-num,
.hero h1,
.hit-rate-display {
    cursor: default;
}

/* ---- Visual breadcrumb (inner pages) ---- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 22px;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.84rem;
    color: #A6A6A6;
    flex-wrap: wrap;
}
.breadcrumb a {
    color: #A6A6A6;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}
.breadcrumb a:hover {
    color: #D4AF37;
    border-bottom-color: rgba(212, 175, 55, 0.5);
}
.breadcrumb .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.18);
    font-size: 0.95rem;
    line-height: 1;
    margin: 0;
}
.breadcrumb-current {
    color: #D2D2D2;
    font-weight: 500;
}
@media (max-width: 600px) {
    .breadcrumb { font-size: 0.78rem; gap: 6px; }
}

/* ---- Hero meta link (homepage, under hero-actions) ---- */
.hero-meta-link {
    text-align: center;
    margin: 14px 0 0;
    font-size: 0.84rem;
    color: #A6A6A6;
}
.hero-meta-link a {
    color: #A6A6A6;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}
.hero-meta-link a:hover {
    color: #D4AF37;
    border-bottom-color: rgba(212, 175, 55, 0.5);
}


/* ==========================================
   SMART ACCA — Phase 1 preset surface
   Scoped under .smart-acca-hero / .sa-* prefixes.
   Uses existing tokens: --accent-primary (green),
   --accent-secondary (gold), --accent-info (blue),
   --bg-dark, --bg-mid, --text-muted.
   ========================================== */

.smart-acca-hero {
    margin: 24px 0 28px;
    padding: 18px 18px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    box-shadow: none;
}

.sa-hero-head {
    text-align: center;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.sa-hero-head-text {
    text-align: center;
}
.sa-hero-head-text {
    flex: 1;
    min-width: 0;
}
.sa-toggle-icon {
    color: var(--accent-primary, #D4AF37);
    font-size: 0.7rem;
    line-height: 1;
    margin-top: 6px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.smart-acca-hero.sa-collapsed .sa-toggle-icon {
    transform: rotate(180deg);
}
.smart-acca-hero.sa-collapsed .sa-hero-head {
    margin-bottom: 0;
}
.sa-collapsible-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    max-height: 2000px;
    opacity: 1;
}
.smart-acca-hero.sa-collapsed .sa-collapsible-body {
    max-height: 0;
    opacity: 0;
}
.sa-eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-primary);
    padding: 4px 10px;
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.08);
}
.sa-title {
    margin: 8px 0 4px;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.18;
    letter-spacing: -0.01em;
}
.sa-sub {
    margin: 0;
    max-width: none;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ----- Preset row ----- */
.sa-preset-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.sa-preset {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    min-width: 240px;
    flex: 1 1 240px;
    max-width: 320px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    text-align: left;
    color: #D2D2D2;
    font-family: var(--font-heading);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s, color 0.2s;
    overflow: hidden;
}
.sa-preset::after {
    content: '\2192';
    font-size: 1.2rem;
    transition: transform 0.2s, opacity 0.2s;
    flex-shrink: 0;
    opacity: 0.65;
    margin-left: auto;
}
.sa-preset:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.sa-preset:hover::after {
    transform: translateX(4px);
    opacity: 1;
}
.sa-preset:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

/* Banker — outline green (matches hero Smart Acca CTA) */
.sa-preset--banker {
    border-color: #D4AF37;
    color: #D4AF37;
}
.sa-preset--banker:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: #D4AF37;
    color: #D4AF37;
}
.sa-preset--banker .sa-preset-icon {
    background: rgba(212, 175, 55, 0.12);
    color: #D4AF37;
}

/* Balanced — gold outline (default preset, mirrors Banker/Long Shot outline style) */
.sa-preset--balanced {
    background: transparent;
    border-color: #E6C860;
    color: #E6C860;
}
.sa-preset--balanced:hover {
    background: rgba(230, 200, 96, 0.08);
    border-color: #E6C860;
    color: #E6C860;
}
.sa-preset--balanced .sa-preset-icon {
    background: rgba(230, 200, 96, 0.12);
    color: #E6C860;
}

/* Long Shot — neutral ghost outline (matches hero Build a Bet tertiary CTA) */
.sa-preset--long-shot {
    border-color: rgba(255, 255, 255, 0.18);
    color: #D2D2D2;
}
.sa-preset--long-shot:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.sa-preset--long-shot .sa-preset-icon {
    background: rgba(255, 255, 255, 0.06);
    color: #D2D2D2;
}

/* Active state — slight inset glow without breaking the CTA shape */
.sa-preset.is-active {
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.45);
}
/* Ribbon repositioned to top-right with hero-style polish */
.sa-preset-ribbon {
    position: absolute;
    top: 8px;
    right: 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.6px;
    color: #E6C860;
    background: rgba(230, 200, 96, 0.12);
    border: 1px solid rgba(230, 200, 96, 0.4);
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    font-weight: 700;
}
.sa-preset-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}
.sa-preset-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.sa-preset-name {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.2px;
    line-height: 1.15;
    color: inherit;
}
.sa-preset-tagline {
    display: none;
}
.sa-preset-meta {
    font-weight: 500;
    font-size: 0.78rem;
    opacity: 0.85;
    line-height: 1.2;
    font-family: var(--font-body);
    color: inherit;
}
.sa-preset--long-shot .sa-preset-meta {
    color: var(--accent-secondary);
}
.sa-preset-desc {
    display: block;
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1.2;
    opacity: 0.95;
    font-family: var(--font-body);
    color: inherit;
}

/* ----- Result host ----- */
.sa-result-host {
    display: none;
    margin-top: 4px;
}
.sa-result-host:not(:empty) {
    display: block;
}

/* ----- Skeleton ----- */
.sa-result-skeleton {
    padding: 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    margin-top: 18px;
}
.sa-skel-row {
    height: 18px;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: saSkelPulse 1.4s ease-in-out infinite;
    margin: 10px 0;
}
.sa-skel-headline {
    height: 36px;
    width: 60%;
}
@keyframes saSkelPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.sa-result-status {
    margin-top: 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* ----- Result block (populated fragment) ----- */
.smart-acca-result {
    margin-top: 18px;
    padding: 20px;
    background: rgba(16, 16, 16, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    animation: saFadeIn 220ms ease-out both;
}
@keyframes saFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sa-result-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sa-track-record {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    margin-left: auto;
    background: rgba(212, 175, 55, 0.10);
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 999px;
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.74rem;
    transition: background 150ms ease, border-color 150ms ease;
}
.sa-track-record:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.5);
}

/* ----- Headline (combined odds + returns) ----- */
.sa-headline {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    margin-bottom: 14px;
}
.sa-combined-odds {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 2.8rem;
    line-height: 1;
    color: var(--accent-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.sa-returns {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--accent-secondary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ----- Stake chips ----- */
.sa-stake-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}
.sa-stake-chip {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.86rem;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.sa-stake-chip:hover {
    border-color: rgba(212, 175, 55, 0.5);
    color: var(--accent-primary);
}
.sa-stake-chip.is-active {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
    font-weight: 700;
}
.sa-stake-chip:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.sa-stake-custom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sa-stake-custom-input {
    width: 84px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.86rem;
}
.sa-stake-custom-input:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
    border-color: rgba(212, 175, 55, 0.5);
}

/* ----- Legs ----- */
.sa-leg, .smart-acca-leg {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    grid-template-areas:
        "num fixture odds"
        "num meta odds"
        "num market market"
        "num prob badge"
        ".   reasoning reasoning";
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* prob + badge share a row under the market; badge right-aligned so the
   "Tracked"/"Informational" pill sits opposite the probability and never
   gets auto-placed into the narrow num column (which wrapped it word-by-word). */
.sa-leg-prob { grid-area: prob; align-self: center; margin-left: 0; }
.sa-leg-badge {
    grid-area: badge;
    justify-self: end;
    align-self: center;
    margin-top: 0;
    white-space: nowrap;
}
.sa-leg-why { grid-area: reasoning; }
.sa-leg:last-of-type, .smart-acca-leg:last-of-type {
    border-bottom: none;
}
.sa-leg-num {
    grid-area: num;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--accent-secondary);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
}
.sa-leg-fixture {
    grid-area: fixture;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.02rem;
    color: #fff;
}
.sa-leg-meta {
    grid-area: meta;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.sa-leg-market {
    grid-area: market;
    margin-top: 4px;
    color: #fff;
    font-size: 0.92rem;
}
.sa-leg-prob {
    color: var(--accent-primary);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.86rem;
    margin-left: 8px;
}
.sa-leg-odds {
    grid-area: odds;
    align-self: start;
    justify-self: end;             /* hug the right edge, don't stretch the column */
    display: inline-flex;
    flex-direction: column;        /* price over its source label, so the pill stays narrow */
    align-items: center;
    gap: 1px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 5px 9px;
    background: rgba(212, 175, 55, 0.10);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 0;
    white-space: nowrap;
    max-width: 40vw;               /* hard cap so a long src label can never push it off-screen */
}
/* The "AVG ODDS" / "model est." source label sits UNDER the price inside the pill
   (was inline with margin-left, which made the nowrap pill wide enough to overflow
   the leg row on narrow phones). */
.sa-leg-odds .sa-leg-odds-src {
    margin-left: 0;
    line-height: 1.1;
    text-align: center;
}
.sa-leg-reasoning {
    grid-area: reasoning;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    border-left: 2px solid rgba(212, 175, 55, 0.32);
    padding-left: 10px;
}

/* ----- Why expander ----- */
.sa-why-expander {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.sa-why-expander > summary {
    cursor: pointer;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.sa-why-expander > summary::-webkit-details-marker { display: none; }
.sa-why-expander > summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 8px;
    transition: transform 160ms ease;
    color: var(--accent-primary);
}
.sa-why-expander[open] > summary::before {
    transform: rotate(90deg);
}

/* ----- Actions ----- */
.sa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    align-items: center;
}
.sa-regenerate {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 11px 18px;
    border-radius: 0;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.sa-regenerate:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(212, 175, 55, 0.06);
}
.sa-regenerate:disabled, .sa-regenerate.is-locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.sa-add-to-slip {
    flex: 1 1 auto;
    min-width: 180px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text-on-accent);
    background: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    padding: 12px 20px;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    transition: background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
    box-shadow: 0 6px 18px -10px rgba(212, 175, 55, 0.7);
}
.sa-add-to-slip:hover {
    background: #D4AF37;
    transform: translateY(-1px);
}
.sa-add-to-slip:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ----- Partial banner ----- */
.sa-partial-banner {
    margin: 14px 0;
    padding: 10px 14px;
    background: rgba(230, 200, 96, 0.08);
    border: 1px solid rgba(230, 200, 96, 0.32);
    border-left: 3px solid var(--accent-secondary);
    border-radius: 0;
    color: var(--accent-secondary);
    font-size: 0.88rem;
}

/* ----- Customise disclosure ----- */
.sa-customise-disclosure {
    margin-top: 12px;
    text-align: left;
}
.sa-customise-link {
    color: var(--text-muted);
    font-size: 0.88rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(166, 166, 166, 0.25);
    padding-bottom: 1px;
    transition: color 140ms ease, border-color 140ms ease;
}
.sa-customise-link:hover {
    color: var(--accent-primary);
    border-bottom-color: rgba(212, 175, 55, 0.5);
}
.sa-customise-details {
    margin: 18px 0 28px;
}
.sa-customise-details > summary {
    list-style: none;
    cursor: pointer;
    display: none; /* hidden because the disclosure link controls open state */
}
.sa-customise-details > summary::-webkit-details-marker { display: none; }
.sa-customise-caption {
    margin: 4px 0 14px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-style: italic;
    text-align: center;
}

/* ----- Error card + toast ----- */
.sa-error-card {
    margin-top: 18px;
    padding: 18px;
    background: rgba(255, 100, 100, 0.06);
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-radius: 0;
    color: #fff;
    text-align: center;
}
.sa-error-card p { margin: 0 0 12px; }
.sa-error-retry {
    font-family: var(--font-heading);
    font-weight: 600;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    padding: 9px 18px;
    border-radius: 0;
    cursor: pointer;
}
.sa-toast {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 9000;
    max-width: 320px;
    padding: 12px 16px;
    background: rgba(16, 16, 16, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 3px solid var(--accent-primary);
    border-radius: 0;
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 250ms ease, transform 250ms ease;
}
.sa-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ----- Responsive (≤640px) ----- */
@media (max-width: 640px) {
    .smart-acca-hero {
        padding: 22px 16px 18px;
    }
    .sa-title {
        font-size: 1.4rem;
    }
    .sa-preset-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .sa-preset {
        min-height: 96px;
        padding: 14px 14px 12px;
    }
    .sa-headline {
        flex-direction: row;
        gap: 14px;
        padding: 14px 14px;
    }
    .sa-combined-odds {
        font-size: 2rem;
    }
    .sa-returns {
        font-size: 1.5rem;
    }
    .sa-leg-reasoning {
        display: none;
    }
    .sa-leg.is-reasoning-open .sa-leg-reasoning,
    .smart-acca-leg.is-reasoning-open .sa-leg-reasoning {
        display: block;
    }
    .sa-actions {
        flex-direction: column-reverse; /* Add to Slip on top */
        align-items: stretch;
    }
    .sa-add-to-slip, .sa-regenerate {
        width: 100%;
    }
    .sa-toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .sa-skel-row,
    .smart-acca-result,
    .sa-toast,
    .sa-preset {
        animation: none !important;
        transition: none !important;
    }
    .sa-preset:hover {
        transform: none;
    }
}

/* ==========================================
   SMART ACCA — fragment-shipped class aliases
   The backend agent's fragment ships its own
   class names. These selectors style what they
   actually emit (.sa-header, .sa-headline-cell,
   .sa-headline-num, .sa-chip, .sa-leg-list, etc.)
   without breaking the brief's primary names.
   ========================================== */

.smart-acca-result .sa-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sa-preset-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.sa-preset-pill .sa-preset-name {
    font-weight: 700;
    color: #fff;
    /* override the hero card's display */
    display: inline;
    font-size: 0.78rem;
    line-height: 1;
}
.sa-preset-pill .sa-preset-sep {
    color: var(--text-muted);
    margin: 0 2px;
}
.sa-preset-pill .sa-leg-count {
    color: var(--text-muted);
}
.sa-preset-pill.sa-preset-banker {
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.08);
}
.sa-preset-pill.sa-preset-balanced {
    border-color: rgba(212, 175, 55, 0.4);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.10), rgba(230, 200, 96, 0.10));
}
.sa-preset-pill.sa-preset-long-shot {
    border-color: rgba(230, 200, 96, 0.45);
    background: rgba(230, 200, 96, 0.10);
}

.sa-track-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.sa-track-rate {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 0.86rem;
}
.sa-track-detail {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.74rem;
}
.sa-track-arrow {
    color: var(--accent-primary);
    margin-left: 2px;
}

/* Headline cells emitted by the fragment */
.sa-headline-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sa-headline-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--accent-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
    word-break: break-word;
}
.sa-headline-cell:nth-of-type(2) .sa-headline-num {
    color: var(--accent-secondary);
    font-size: 1.9rem;
}
.sa-headline-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* Chips emitted by fragment (.sa-chip / data-stake-chip) */
.sa-chip {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.86rem;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.sa-chip:hover {
    border-color: rgba(212, 175, 55, 0.5);
    color: var(--accent-primary);
}
.sa-chip-active, .sa-chip.sa-chip-active {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
    font-weight: 700;
}
.sa-chip:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.sa-chip-custom {
    width: 96px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.86rem;
}
.sa-chip-custom:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
    border-color: rgba(212, 175, 55, 0.5);
}

/* Leg list emitted as <ol class="sa-leg-list"><li class="smart-acca-leg">...</li></ol> */
.sa-leg-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.smart-acca-result .smart-acca-leg {
    /* explicit styles override the grid the .sa-leg shared rule applies */
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;   /* minmax(0,..) lets the fixture column shrink instead of forcing the odds column off-screen */
    grid-template-areas:
        "num fixture odds"
        "num meta odds"
        "num market market"
        "num prob badge"
        ".   reasoning reasoning";
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.smart-acca-result .smart-acca-leg:last-child {
    border-bottom: none;
}
/* NARROW PHONES: a rigid "32px 1fr auto" row with a long fixture name + a
   nowrap odds pill + a nowrap "Tracked" badge overflowed the row off the
   right edge. Collapse to two columns (leg-number rail + a stacked content
   column); the odds pill and badge sit on their own rows, left-aligned,
   so nothing can push past the viewport. */
@media (max-width: 560px) {
    .smart-acca-result .smart-acca-leg {
        grid-template-columns: 28px minmax(0, 1fr);
        grid-template-areas:
            "num fixture"
            "num meta"
            "num market"
            "num odds"
            "num prob"
            "num badge"
            ".   reasoning";
        column-gap: 12px;
    }
    .smart-acca-result .smart-acca-leg .sa-leg-odds {
        justify-self: start;       /* left-aligned on its own row, not hugging a right column */
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        max-width: 100%;
        margin-top: 2px;
    }
    .smart-acca-result .smart-acca-leg .sa-leg-odds .sa-leg-odds-src {
        margin-left: 2px;
    }
    .smart-acca-result .smart-acca-leg .sa-leg-badge {
        justify-self: start;
    }
}

/* "Why these picks?" expander emitted as <details class="sa-why">...</details> */
.sa-why {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.sa-why > summary {
    cursor: pointer;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.sa-why > summary::-webkit-details-marker { display: none; }
.sa-why > summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 8px;
    transition: transform 160ms ease;
    color: var(--accent-primary);
}
.sa-why[open] > summary::before {
    transform: rotate(90deg);
}
.sa-why-body {
    margin-top: 10px;
    line-height: 1.6;
}

/* Action row buttons emitted as .sa-btn / .sa-btn-ghost / .sa-btn-primary */
.sa-btn {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 11px 18px;
    border-radius: 0;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.sa-btn-ghost {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.22);
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
    flex: 0 0 auto;
}
.sa-btn-ghost:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(212, 175, 55, 0.06);
}
.sa-btn-ghost:disabled, .sa-btn-ghost.is-locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.sa-btn-primary {
    color: var(--text-on-accent);
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    font-weight: 700;
    box-shadow: 0 6px 18px -10px rgba(212, 175, 55, 0.7);
    transition: background 140ms ease, transform 120ms ease;
    flex: 1 1 auto;
    min-width: 180px;
}
.sa-btn-primary:hover {
    background: #D4AF37;
    transform: translateY(-1px);
}
.sa-addslip-form {
    flex: 1 1 auto;
    margin: 0;
    display: flex;
}
.sa-addslip-form .sa-btn-primary {
    width: 100%;
}

@media (max-width: 640px) {
    .sa-headline-num {
        font-size: 1.7rem;
    }
    .sa-headline-cell:nth-of-type(2) .sa-headline-num {
        font-size: 1.45rem;
    }
    .sa-actions {
        flex-direction: column-reverse;
    }
    .sa-addslip-form, .sa-btn-ghost { width: 100%; }
}

/* ----- Per-leg "Why this pick?" dropdown (Smart Acca per-leg reasoning) -----
   On mobile (<=560px) the reasoning collapses behind a summary toggle so the
   leg row stays compact. On wider viewports the summary is hidden and the
   reasoning shows inline by default. Default-open state is also driven by
   a small inline script that toggles the `open` attribute on viewport
   change (see smart-acca.html). */
.smart-acca-result .smart-acca-leg .sa-leg-why {
    grid-area: reasoning;
    margin-top: 6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
}
.smart-acca-result .sa-leg-why > summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-muted);
    list-style: none;
    user-select: none;
    text-decoration: underline dotted rgba(255, 255, 255, 0.28);
    text-underline-offset: 3px;
    padding: 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.smart-acca-result .sa-leg-why > summary::-webkit-details-marker { display: none; }
.smart-acca-result .sa-leg-why > summary::after {
    content: "\25BE";
    display: inline-block;
    transition: transform 140ms ease;
    color: var(--accent-primary);
    font-size: 0.85rem;
}
.smart-acca-result .sa-leg-why[open] > summary::after {
    transform: rotate(180deg);
}
.smart-acca-result .sa-leg-why .sa-leg-why-body {
    margin: 4px 0 0;
    padding-top: 4px;
    padding-left: 10px;
    border-left: 2px solid rgba(212, 175, 55, 0.32);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}
/* Desktop: show inline by default, hide the toggle entirely. */
@media (min-width: 561px) {
    .smart-acca-result .sa-leg-why > summary {
        display: none;
    }
    .smart-acca-result .sa-leg-why .sa-leg-why-body {
        display: block;
    }
}

/* ================================================================
   Homepage flow repaint — pulls .build-a-bet, .byob-section, and
   .search-form into the Smart Acca / hero-CTA visual language.
   Flat translucent panels, single green (#D4AF37), 12px radius,
   no gradient text, no gradient header bars.
   ================================================================ */

/* --- Section shells --- */
.build-a-bet,
.byob-section,
.search-form {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    margin: 24px 0 28px !important;
}

.build-a-bet:not(.bab-expanded),
.byob-section:not(.byob-expanded) {
    box-shadow: none !important;
}

/* --- Headers: kill gradient bg + gradient text + accent underline --- */
.bab-header,
.byob-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 18px 22px !important;
    text-align: center !important;
    align-items: center !important;
}
.bab-header::before,
.byob-header::before {
    display: none !important;
}
.bab-header:hover,
.byob-header:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}
.bab-header h2,
.byob-header h2 {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
.bab-header-main,
.byob-header-main,
.bab-subtitle,
.byob-subtitle,
.bab-header-stats,
.byob-header-stats {
    justify-content: center !important;
    text-align: center !important;
}
/* Chevron now aligns with the new 22px gutter */
.bab-header .toggle-icon,
.byob-header .toggle-icon {
    right: 22px !important;
}

/* --- Badges: outline pill instead of gradient solid --- */
.bab-header-badge,
.byob-header-badge {
    background: rgba(212, 175, 55, 0.10) !important;
    color: #D4AF37 !important;
    border: 1px solid rgba(212, 175, 55, 0.32) !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.62rem !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
}

/* --- Stat values: unified to brand green --- */
.bab-stat-value,
.byob-stat-value {
    color: #D4AF37 !important;
}

/* --- Find Matches header: same flat language, centred to match
       Smart Acca / Build Your Own Acca / BYOB headers above. --- */
.search-form .search-header,
.search-form .search-title {
    text-align: center !important;
}
.search-form .search-title {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
.search-form .search-subtitle {
    color: #A6A6A6 !important;
}
/* Kill the green→gold→green hairline accent */
.search-form .search-header::after,
.search-form::before,
.search-form::after {
    display: none !important;
}

/* --- Tips strip at the bottom: same family --- */
.tips-strip {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0;
    padding: 18px 22px !important;
    margin: 24px 0 28px !important;
}

/* --- How It Works lives inside Smart Acca as a collapsible disclosure --- */
.sa-howitworks {
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
}
.sa-howitworks-summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #A6A6A6;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(166, 166, 166, 0.25);
    padding-bottom: 1px;
    transition: color 140ms ease, border-color 140ms ease;
}
.sa-howitworks-summary::-webkit-details-marker { display: none; }
.sa-howitworks-summary:hover {
    color: #D4AF37;
    border-bottom-color: rgba(212, 175, 55, 0.5);
}
.sa-howitworks-icon {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.sa-howitworks[open] .sa-howitworks-icon {
    transform: rotate(90deg);
}
.sa-howitworks .htu-tldr-grid {
    margin-top: 12px;
}

/* --- How It Works tile system (used inside Smart Acca disclosure) --- */
.htu-tldr-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.htu-tldr-tile {
    position: relative;
    padding: 14px 16px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
}
.htu-tldr-num {
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    color: rgba(212, 175, 55, 0.85);
    font-weight: 700;
}
.htu-tldr-title {
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2px;
}
.htu-tldr-body {
    margin: 0;
    color: #A6A6A6;
    font-size: 0.82rem;
    line-height: 1.45;
}
.htu-tldr-link {
    margin: 14px 0 0;
    text-align: left;
}
.htu-tldr-link a {
    color: #A6A6A6;
    text-decoration: none;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(166, 166, 166, 0.25);
    padding-bottom: 1px;
    transition: color 140ms ease, border-color 140ms ease;
}
.htu-tldr-link a:hover {
    color: #D4AF37;
    border-bottom-color: rgba(212, 175, 55, 0.5);
}
@media (max-width: 640px) {
    .htu-tldr-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   Hero proof pill — quiet green-tinted pill that surfaces the
   verified hit rate above the fold. Sits between .hero-subtitle
   and .hero-trust, links through to /accuracy. Honesty rules
   (sample size + min rate) are enforced server-side via th:if.
   ================================================================ */
.hero-proof {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 14px auto 18px;
    padding: 10px 22px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 999px;
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    max-width: 540px;
}
.hero-proof:hover,
.hero-proof:focus-visible {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-1px);
    outline: none;
}
.hero-proof-line {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    font-size: 1.02rem;
    line-height: 1.2;
}
.hero-proof-num {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    color: #D4AF37;
    font-size: 1.12rem;
    letter-spacing: 0.2px;
}
.hero-proof-text {
    color: #ffffff;
    font-weight: 500;
    font-size: 0.98rem;
}
.hero-proof-sep {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}
.hero-proof-caption {
    color: #A6A6A6;
    font-size: 0.78rem;
    letter-spacing: 0.15px;
}
.hero-proof-text-short {
    display: none;
}
@media (max-width: 540px) {
    .hero-proof {
        padding: 8px 16px;
        margin: 12px auto 14px;
    }
    .hero-proof-line {
        font-size: 0.95rem;
    }
    .hero-proof-num {
        font-size: 1.02rem;
    }
    .hero-proof-caption {
        display: none;
    }
}
@media (max-width: 360px) {
    .hero-proof-text-long,
    .hero-proof-hitrate {
        display: none;
    }
    .hero-proof-text-short {
        display: inline;
    }
    .hero-proof-line {
        gap: 4px;
        font-size: 0.9rem;
    }
}

/* ==========================================
   UNIFIED EMPTY-STATE CARD (.fb-empty)
   Single source of truth for empty surfaces:
   BYOB section, BYOB filter, /previews, /search,
   Smart Acca slim-day. Translucent panel matching
   the Smart Acca shell. CTAs stack below 480px.
   ========================================== */
.fb-empty {
    margin: 18px auto;
    max-width: 640px;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    text-align: center;
    color: #D2D2D2;
}
.fb-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.10);
    color: var(--accent-primary, #D4AF37);
    font-size: 1.2rem;
}
.fb-empty-headline {
    margin: 0 0 8px;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}
.fb-empty-body {
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #A6A6A6;
}
.fb-empty-banner {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(230, 200, 96, 0.10);
    border: 1px solid rgba(230, 200, 96, 0.32);
    color: var(--accent-secondary, #E6C860);
    font-size: 0.82rem;
    font-weight: 600;
}
.fb-empty-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}
.fb-empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 0;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.08);
    color: var(--accent-primary, #D4AF37);
    transition: background 140ms ease, transform 140ms ease;
}
.fb-empty-cta:hover {
    background: rgba(212, 175, 55, 0.16);
    transform: translateY(-1px);
}
.fb-empty-cta--ai {
    background: var(--accent-primary, #D4AF37);
    color: #111111;
    border-color: var(--accent-primary, #D4AF37);
    font: inherit;
    font-weight: 700;
}
.fb-empty-cta--ai:hover {
    background: #D4AF37;
}
.fb-empty-cta--ghost {
    border-color: rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #D2D2D2;
}
.fb-empty-cta--ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}
@media (max-width: 480px) {
    .fb-empty {
        padding: 1.25rem 1rem;
    }
    .fb-empty-headline { font-size: 1.1rem; }
    .fb-empty-body { font-size: 0.9rem; }
    .fb-empty-cta-row {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    .fb-empty-cta { width: 100%; }
}

/* Auto-expansion banner — sits above a results grid to explain
   why we widened the search. Yellow/amber for the "we did something" tone. */
.fb-expansion-banner {
    margin: 14px auto;
    max-width: 960px;
    padding: 10px 16px;
    background: rgba(230, 200, 96, 0.08);
    border: 1px solid rgba(230, 200, 96, 0.32);
    border-left: 3px solid var(--accent-secondary, #E6C860);
    border-radius: 0;
    color: var(--accent-secondary, #E6C860);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* ----------------------------------------------------------------
   Odds freshness signal — "Updated 3 min ago" caption rendered
   under Smart Acca / Build-a-Bet / BYOB headers. Hydrated client-
   side from /api/v1/odds-freshness every 30s. JS handles the ≤360px
   "Updated" prefix removal so we don't need a CSS swap.
   ---------------------------------------------------------------- */
.odds-freshness {
    display: inline-block;
    margin-top: 6px;
    font-family: 'DM Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    color: #A6A6A6;
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.odds-freshness:empty {
    display: none;
}
.odds-freshness::before {
    content: '\00B7';
    margin-right: 6px;
    color: #7E7E7E;
}
.odds-freshness.is-stale {
    color: #E6C860;
}
.odds-freshness.is-error {
    color: #A6A6A6;
    opacity: 0.7;
}
@media (max-width: 480px) {
    .odds-freshness {
        font-size: 0.65rem;
        margin-top: 4px;
    }
}

/* ════════════════════════════════════════════════════════════════
   BUILDER HUB — June 2026 homepage redesign.
   One home for the bet builder: hub header + mode toggle wrapping
   the existing Smart Acca / Customise / Pick & Mix sections.
   ════════════════════════════════════════════════════════════════ */
.builder-hub {
    margin: 28px 0 32px;
    scroll-margin-top: 80px;
}
.builder-hub-head {
    text-align: center;
    margin-bottom: 18px;
}
.bh-eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #D4AF37;
    margin-bottom: 6px;
}
.bh-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.bh-sub {
    color: #A6A6A6;
    font-size: 0.95rem;
    margin: 0 auto;
    max-width: 560px;
}
.bh-proof {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: #A6A6A6;
}
.bh-proof strong {
    color: #D4AF37;
    font-weight: 700;
}
.bh-proof a {
    color: #A6A6A6;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bh-proof a:hover { color: #fff; }

/* Mode toggle — segmented pair */
.builder-mode-row {
    display: flex;
    gap: 10px;
    max-width: 680px;
    margin: 0 auto 18px;
}
.builder-mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0;
    color: #A6A6A6;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.builder-mode:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #E8E8E8;
}
.builder-mode.is-active {
    background: rgba(212, 175, 55, 0.10);
    border-color: rgba(212, 175, 55, 0.45);
    color: #fff;
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.10);
}
.builder-mode:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 2px;
}
.builder-mode-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
}
.builder-mode-desc {
    font-size: 0.78rem;
    opacity: 0.8;
    line-height: 1.3;
}
.builder-pane[hidden] { display: none; }

/* Embedded sections: the hub owns the outer rhythm now */
.builder-hub .smart-acca-hero { margin-top: 0; }
.builder-hub .byob-section { margin-top: 0; }
.builder-hub .sa-hero-head--static {
    cursor: default;
    user-select: auto;
    justify-content: center;
}
/* The hub owns show/hide now — the old collapse clamp (max-height 2000px +
   overflow hidden) CLIPPED long Smart Acca results (big pick pools were
   cut off with no way to scroll). Unclamp inside the hub. */
.builder-hub .sa-collapsible-body {
    max-height: none !important;
    overflow: visible !important;
}
.builder-hub .byob-header--static { cursor: default; }
.builder-hub .byob-header--static:hover {
    background: transparent !important;
}
/* Static byob header keeps no toggle icon; kill reserved space */
.builder-hub .byob-header--static { padding-right: 28px; }

/* Hero: two-CTA row (primary builder + quiet today's matches) */
.hero-actions--duo {
    justify-content: center;
}
.hero-actions--duo .hero-cta {
    max-width: 380px;
}

@media (max-width: 640px) {
    .builder-mode-row {
        gap: 8px;
    }
    .builder-mode { padding: 11px 10px; }
    .builder-mode-name { font-size: 0.92rem; }
    .builder-mode-desc { font-size: 0.7rem; }
    .bh-title { font-size: 1.35rem; }
}

/* WC hero — verified-record proof line under the eyebrow */
.wc-hero-proof {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.78);
}

/* ════════════════════════════════════════════════════════════════
   LOWER-HALF REDESIGN — June 2026.
   Shared band-header system (.lb-*), Today's Edges trend cards,
   Toolkit showcase, compact How It Works, Match Finder reskin,
   stand-out nav tabs, BYOB lazy-load states.
   ════════════════════════════════════════════════════════════════ */

/* --- Shared band header --- */
.lb-head {
    text-align: center;
    margin-bottom: 22px;
}
.lb-eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #D4AF37;
    margin-bottom: 8px;
}
/* Verified-proof chip surfaced in match/league heroes — the moat as a NUMBER
   on the pages Google lands people, not a bare "Verified" adjective. Shares
   the single-sourced ${overallSuccessRate}/${totalVerified} vars sitewide. */
.mp-proof-chip,
.lp-proof-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55,0.35);
    background: rgba(212, 175, 55,0.08);
    color: #D4AF37;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 600;
    text-decoration: none;
    vertical-align: middle;
    transition: background .15s ease, border-color .15s ease;
}
.mp-proof-chip:hover,
.lp-proof-chip:hover {
    background: rgba(212, 175, 55,0.14);
    border-color: rgba(212, 175, 55,0.55);
}
/* Inline proof link in the previews tagline — underlined accent, not a pill. */
.pv-proof-link {
    color: #D4AF37;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(212, 175, 55,0.45);
}
.pv-proof-link:hover { text-decoration-color: #D4AF37; }

/* Follow-by-email strip on the match hero — the owned-audience capture at the
   highest-intent moment. Calm, not a Build-a-Bet shove: one tidy card. */
.mp-follow {
    max-width: 560px;
    margin: 22px auto 0;
    padding: 16px 18px;
    border-radius: 0;
    border: 1px solid rgba(212, 175, 55,0.22);
    background: linear-gradient(180deg, rgba(212, 175, 55,0.06), rgba(212, 175, 55,0.02));
    text-align: left;
}
.mp-follow-lead { margin: 0 0 12px; color: #CECECE; font-size: 0.92rem; line-height: 1.5; }
.mp-follow-lead strong { color: #fff; }
.mp-follow-teams { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mp-follow-team {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: 999px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
    font-size: 0.88rem; color: #EAEAEA; cursor: pointer;
}
.mp-follow-team input { accent-color: #D4AF37; width: 15px; height: 15px; }
.mp-follow-team:hover { border-color: rgba(212, 175, 55,0.4); }
.mp-follow-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-follow-input {
    flex: 1 1 200px; min-width: 0;
    padding: 11px 13px; border-radius: 0;
    border: 1px solid rgba(255,255,255,0.14); background: #0B0B0B;
    color: #EAEAEA; font-size: 0.92rem;
}
.mp-follow-input:focus { outline: none; border-color: rgba(212, 175, 55,0.55); }
.mp-follow-btn {
    padding: 11px 22px; border: 0; border-radius: 0;
    background: #D4AF37; color: #000000; font-weight: 700; font-size: 0.9rem;
    font-family: 'Outfit', sans-serif; cursor: pointer;
    transition: background .15s ease;
}
.mp-follow-btn:hover { background: #D4AF37; }
.mp-follow-msg { margin: 10px 0 0; font-size: 0.86rem; min-height: 1em; color: #A6A6A6; }
.mp-follow-msg.is-success { color: #D4AF37; font-weight: 600; }
.mp-follow-msg.is-error { color: #FF6B6B; }

/* Post-World-Cup / off-season band — the returning-visitor reason-to-come-back
   that replaces an empty builder. Warm, dated, capture-led. */
.season-gap-band {
    margin: 0 0 18px;
    border-radius: 0;
    border: 1px solid rgba(212, 175, 55,0.24);
    background:
        radial-gradient(520px 220px at 20% 0%, rgba(212, 175, 55,0.10), transparent 70%),
        radial-gradient(420px 220px at 88% 20%, rgba(230, 200, 96,0.08), transparent 70%),
        linear-gradient(180deg, #1a1a1a, #151515);
    padding: 30px 26px;
    text-align: center;
}
.season-gap-inner { max-width: 620px; margin: 0 auto; }
.season-gap-eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: #E6C860; margin-bottom: 12px;
}
.season-gap-head {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800;
    letter-spacing: -0.02em; margin: 0 0 10px; color: #fff;
}
.season-gap-num {
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.season-gap-body { color: #BCBCBC; line-height: 1.6; margin: 0 0 20px; font-size: 0.96rem; }
.season-gap-cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.season-gap-cta {
    display: inline-block; padding: 12px 24px; border-radius: 0;
    background: #D4AF37; color: #000000; font-weight: 700; font-size: 0.92rem;
    font-family: 'Outfit', sans-serif; text-decoration: none;
    transition: background .15s ease;
}
.season-gap-cta:hover { background: #D4AF37; }
.season-gap-cta--ghost {
    background: transparent; color: #D4AF37;
    border: 1px solid rgba(212, 175, 55,0.4);
}
.season-gap-cta--ghost:hover { background: rgba(212, 175, 55,0.08); }
.lb-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 6px;
}
.lb-sub {
    color: #A6A6A6;
    font-size: 0.93rem;
    max-width: 560px;
    margin: 0 auto;
}

/* --- Today's Edges (trend hooks) --- */
.trend-band {
    margin: 40px 0;
    padding-top: 28px;
    position: relative;
}
.trend-band::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent);
}
.trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}
.trend-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.trend-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #D4AF37, rgba(212, 175, 55, 0));
}
.trend-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 18px rgba(212, 175, 55, 0.08);
}
.trend-fact {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.35;
    color: #fff;
}
.trend-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #A6A6A6;
}
.trend-odds {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: #E6C860;
    font-weight: 600;
}
.trend-cta {
    margin-top: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: #D4AF37;
}

/* --- Toolkit showcase --- */
.showcase {
    margin: 44px 0;
    padding-top: 30px;
    position: relative;
}
.showcase::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.show-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px 18px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.show-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}
.show-card--green::before  { background: linear-gradient(90deg, #D4AF37, rgba(212, 175, 55,0)); }
.show-card--gold::before   { background: linear-gradient(90deg, #E6C860, rgba(230, 200, 96,0)); }
.show-card--blue::before   { background: linear-gradient(90deg, #D4AF37, rgba(212, 175, 55,0)); }
.show-card--proof::before  { background: linear-gradient(90deg, #D4AF37, #E6C860); }
.show-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}
.show-card--green:hover { border-color: rgba(212, 175, 55, 0.5); }
.show-card--gold:hover  { border-color: rgba(230, 200, 96, 0.5); }
.show-card--blue:hover  { border-color: rgba(212, 175, 55, 0.5); }
.show-card--proof:hover { border-color: rgba(212, 175, 55, 0.6); }
.show-card-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.show-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.show-card-body {
    color: #A6A6A6;
    font-size: 0.87rem;
    line-height: 1.55;
    margin: 0;
}
.show-card-stat {
    font-size: 0.82rem;
    color: #D2D2D2;
}
.show-card-stat strong {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    color: #D4AF37;
    font-size: 1.05rem;
}
.show-card--gold .show-card-stat strong { color: #E6C860; }
/* WC card uses GOLD text (blue text read as unstyled-link "errors" on our
   green/gold palette — user feedback June 10). Blue survives only as the
   hairline accent. */
.show-card--blue .show-card-stat strong { color: #E6C860; }
.show-card-stat--big strong {
    display: block;
    font-size: 2rem;
    line-height: 1.1;
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.show-card-cta {
    margin-top: auto;
    font-size: 0.83rem;
    font-weight: 600;
    color: #D4AF37;
}
.show-card--gold .show-card-cta { color: #E6C860; }
.show-card--blue .show-card-cta { color: #E6C860; }

/* --- Compact How It Works --- */
.htu-compact {
    margin: 44px 0 36px;
    padding: 30px 0 0;
    position: relative;
    background: none;
    border: none;
}
.htu-compact::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}
.htu-tldr-grid--standalone {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.htu-compact-links {
    text-align: center;
    margin: 18px 0 0;
    font-size: 0.88rem;
    color: #7E7E7E;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.htu-compact-links a {
    color: #A6A6A6;
    text-decoration: none;
    font-weight: 600;
}
.htu-compact-links a:hover { color: #D4AF37; }

/* --- Match Finder reskin --- */
.search-form .lb-eyebrow { margin-bottom: 6px; }
.search-form .search-header { text-align: center; }
.search-form .search-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* --- BYOB lazy-load states --- */
.byob-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 20px;
    color: #A6A6A6;
    font-size: 0.95rem;
}
.byob-loading[hidden] { display: none; }
.byob-loading-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(212, 175, 55, 0.25);
    border-top-color: #D4AF37;
    border-radius: 50%;
    animation: byobSpin 0.8s linear infinite;
}
@keyframes byobSpin { to { transform: rotate(360deg); } }

/* --- Stand-out nav tabs ---
   THIS is the rule that decides nav link padding. There are three .nav-link padding
   declarations in this file (one in the base block, one in the May 2026 append-only
   overrides, and this one); this selector is 0,3,0 so it beats both, and edits to
   the others do nothing. 9px not 13px: eight doors at 13px overran the 1120px header
   row by 184px and shoved the search field off the right edge. */
.site-header .nav-primary .nav-link,
.site-header .nav-secondary .nav-link {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: 0.015em;
    padding: 8px 9px;
    border-radius: 0;
    position: relative;
    transition: color 0.18s ease, background 0.18s ease;
}
.site-header .nav-primary .nav-link:hover,
.site-header .nav-secondary .nav-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.site-header .main-nav .nav-link.active {
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.12);
}
.site-header .main-nav .nav-link.active::after {
    content: '';
    position: absolute;
    left: 13px; right: 13px; bottom: 3px;
    height: 2px;
    border-radius: 0;
    background: #D4AF37;
}
.site-header .nav-link-wc {
    color: #E6C860;
}
.site-header .nav-link-wc:hover { color: #E6C860; }
.site-header .main-nav .nav-link-wc.active {
    color: #E6C860;
    background: rgba(230, 200, 96, 0.12);
}
.site-header .main-nav .nav-link-wc.active::after { background: #E6C860; }

/* --- Builder mode tabs: louder --- */
.builder-mode {
    padding: 16px 18px;
    border-width: 1.5px;
}
.builder-mode-name { font-size: 1.08rem; }
.builder-mode.is-active {
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.06));
    border-color: rgba(212, 175, 55, 0.65);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25), 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 24px rgba(212, 175, 55, 0.12);
}
.builder-mode.is-active::after {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 0;
    margin-top: 6px;
    background: linear-gradient(90deg, #D4AF37, #E6C860);
}

/* --- Tips strip polish --- */
.tips-strip {
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 0;
    background:
        radial-gradient(600px 200px at 20% 0%, rgba(212, 175, 55, 0.08), transparent),
        rgba(255, 255, 255, 0.04);
}

@media (max-width: 640px) {
    .lb-title { font-size: 1.3rem; }
    .trend-band, .showcase, .htu-compact { margin: 30px 0; }
    .show-card-stat--big strong { font-size: 1.6rem; }
}

/* ════════════════════════════════════════════════════════════════
   FOLD RESHUFFLE — June 10 evening. Hero sells the site first; the
   World Cup becomes a slim gold ribbon above it and the full WC
   block moves to second position.
   ════════════════════════════════════════════════════════════════ */

/* --- WC urgency ribbon --- */
.wc-ribbon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 6px;
    padding: 11px 18px;
    background: linear-gradient(90deg, rgba(230, 200, 96, 0.14), rgba(230, 200, 96, 0.05) 60%, rgba(212, 175, 55, 0.06));
    border: 1px solid rgba(230, 200, 96, 0.35);
    border-radius: 0;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.wc-ribbon:hover {
    border-color: rgba(230, 200, 96, 0.65);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3), 0 0 18px rgba(230, 200, 96, 0.1);
    transform: translateY(-1px);
}
.wc-ribbon-cup { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.wc-ribbon-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}
.wc-ribbon-text strong {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.98rem;
    color: #E6C860;
    letter-spacing: 0.01em;
}
.wc-ribbon-sub {
    color: #D2D2D2;
    font-size: 0.85rem;
}
.wc-ribbon-cta {
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    color: #000000;
    background: linear-gradient(135deg, #E6C860, #D4AF37);
    padding: 7px 14px;
    border-radius: 0;
    white-space: nowrap;
}
@media (max-width: 560px) {
    .wc-ribbon { flex-wrap: wrap; padding: 10px 14px; }
    .wc-ribbon-cta { width: 100%; text-align: center; }
}

/* --- Hero punch-up: bigger display type, gradient pay-off line --- */
.landing-hero .hero-title {
    font-size: clamp(2.2rem, 5.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}
.hero-title-accent {
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.landing-hero .hero-proof {
    transform: scale(1.04);
}

/* The full WC block is the SECOND beat now — soften its entrance so it
   reads as a featured section, not a rival hero. */
.landing-hero + .wc-hero,
.landing-hero ~ .wc-hero {
    margin-top: 8px;
}

/* --- Hero atmosphere: soft radial glow, pure CSS --- */
.landing-hero {
    background:
        radial-gradient(560px 300px at 50% 0%, rgba(212, 175, 55, 0.09), transparent 70%),
        radial-gradient(420px 240px at 80% 8%, rgba(230, 200, 96, 0.06), transparent 70%);
    border-radius: 0;
}

/* ════════════════════════════════════════════════════════════════
   POP PASS — stats band (count-up), coverage chip rails,
   scroll-reveal motion. June 10 evening.
   ════════════════════════════════════════════════════════════════ */

/* --- The Numbers band --- */
.stats-band {
    margin: 36px 0;
    padding: 22px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
}
.stats-band-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 46px;
}
.stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 110px;
}
.stat-cell-num {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-cell:nth-child(even) .stat-cell-num {
    background: linear-gradient(90deg, #E6C860, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-cell-label {
    font-size: 0.78rem;
    color: #A6A6A6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --- Everything We Cover: chip rails --- */
.coverage-band {
    margin: 40px 0;
    padding-top: 28px;
    position: relative;
}
.coverage-band::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}
.chip-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}
.chip-rail-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7E7E7E;
    margin-right: 4px;
    flex-shrink: 0;
}
.cov-chip {
    display: inline-block;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    color: #D2D2D2;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.cov-chip:hover {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.45);
    color: #fff;
    transform: translateY(-1px);
}
.cov-chip--gold {
    border-color: rgba(230, 200, 96, 0.4);
    color: #E6C860;
}
.cov-chip--gold:hover {
    background: rgba(230, 200, 96, 0.12);
    border-color: rgba(230, 200, 96, 0.65);
    color: #E6C860;
}

/* --- Scroll-reveal motion (armed only when JS + motion OK) --- */
.reveal-armed .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-armed .reveal.is-in {
    opacity: 1;
    transform: none;
}
.reveal-armed .reveal .reveal-stagger > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-armed .reveal.is-in .reveal-stagger > * {
    opacity: 1;
    transform: none;
}
.reveal-armed .reveal.is-in .reveal-stagger > *:nth-child(1) { transition-delay: 0.08s; }
.reveal-armed .reveal.is-in .reveal-stagger > *:nth-child(2) { transition-delay: 0.16s; }
.reveal-armed .reveal.is-in .reveal-stagger > *:nth-child(3) { transition-delay: 0.24s; }
.reveal-armed .reveal.is-in .reveal-stagger > *:nth-child(4) { transition-delay: 0.32s; }
.reveal-armed .reveal.is-in .reveal-stagger > *:nth-child(n+5) { transition-delay: 0.4s; }

@media (max-width: 640px) {
    .stats-band-grid { gap: 14px 26px; }
    .stat-cell { min-width: 88px; }
    .stat-cell-num { font-size: 1.5rem; }
    .chip-rail { justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════════
   LAUNCHER FOLD — June 10 late. The hero becomes the launchpad:
   one mega Build-a-Bet CTA + a tile grid of every door on the site
   (absorbs the old mid-page Toolkit showcase). Match Finder
   collapses; ticker chips get the new card language.
   ════════════════════════════════════════════════════════════════ */

/* --- Hero trust pills (Free forever / No sign-up inline) --- */
.hero-trust-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #D4AF37;
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 2px;
}

/* --- Mega CTA --- */
/* Football AI hero feature — the flagship "ask anything" box. */
.hero-ai {
    max-width: 720px;
    margin: 0 auto 18px;
    padding: 16px 16px 14px;
    background: linear-gradient(135deg, rgba(212, 175, 55,0.10), rgba(230, 200, 96,0.06));
    border: 1px solid rgba(212, 175, 55,0.30);
    border-radius: 0;
}
.hero-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hero-ai-badge {
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.66rem;
    letter-spacing: 0.06em; text-transform: uppercase; color: #000000;
    background: #D4AF37; border-radius: 0; padding: 2px 7px;
}
.hero-ai-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.02rem; color: #F8F8F8; }
.hero-ai-form { display: flex; gap: 8px; }
.hero-ai-input {
    flex: 1; min-width: 0; height: 46px; padding: 0 14px;
    background: rgba(0, 0, 0,0.7); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0; color: #F5F5F5; font: inherit; font-size: 0.95rem;
}
.hero-ai-input:focus { outline: none; border-color: rgba(212, 175, 55,0.55); }
.hero-ai-input::placeholder { color: #A6A6A6; }
.hero-ai-send {
    flex-shrink: 0; height: 46px; padding: 0 18px; cursor: pointer;
    background: #D4AF37; border: none; border-radius: 0; color: #000000;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.92rem;
    transition: background .15s ease, transform .15s ease;
}
.hero-ai-send:hover { background: #D4AF37; transform: translateY(-1px); }
.hero-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hero-ai-chip {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    color: #D2D2D2; border-radius: 999px; padding: 6px 12px; font-size: 0.8rem;
    cursor: pointer; font-family: inherit;
}
.hero-ai-chip:hover { border-color: rgba(212, 175, 55,0.45); color: #D4AF37; }
@media (max-width: 480px) {
    .hero-ai-send { padding: 0 14px; }
    .hero-ai-chip { font-size: 0.76rem; }
}

/* Top-of-page email capture — calm, compact, centred. Sits between the AI box
   and the launcher tiles. Deliberately understated (one line + one field). */
.hero-capture {
    max-width: 520px; margin: 18px auto 4px; text-align: center;
    display: flex; flex-direction: column; gap: 9px;
}
.hero-capture-lead { color: #CBCBCB; font-size: 0.92rem; }
.hero-capture-row { display: flex; gap: 8px; }
.hero-capture-input {
    flex: 1; min-width: 0; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 0;
    padding: 11px 14px; color: #EDEDED; font-size: 0.95rem;
}
.hero-capture-input:focus { outline: none; border-color: #D4AF37; }
.hero-capture-btn {
    flex: 0 0 auto; background: #D4AF37; color: #101010; border: 0; cursor: pointer;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.92rem;
    padding: 11px 18px; border-radius: 0; white-space: nowrap;
}
.hero-capture-btn:hover { filter: brightness(1.06); }
.hero-capture-msg { font-size: 0.84rem; min-height: 1em; color: #A6A6A6; }
.hero-capture-msg.is-success { color: #D4AF37; font-weight: 600; }
.hero-capture-msg.is-error { color: #FF6B6B; }
@media (max-width: 520px) {
    .hero-capture-row { flex-direction: column; }
    .hero-capture-btn { width: 100%; }
}
.hero-launch {
    max-width: 720px;
    margin: 0 auto;
}
.hero-cta--mega {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Was width:100% which stretched the bar to 720px and flung the icon/text
       to the left and the arrow to the far right, leaving a dead middle. Size to
       content (fit-content) + centre via margin auto, so icon + text + arrow read
       as one tight, centred unit with no dead gap. */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
    padding: 16px 30px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.07));
    border: 1.5px solid rgba(212, 175, 55, 0.55);
    border-radius: 0;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 28px rgba(212, 175, 55, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hero-cta--mega:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.85);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 38px rgba(212, 175, 55, 0.2);
}
/* The body no longer greedily fills the bar — it hugs its text so the arrow
   sits right after the copy, not pinned to a far edge. */
.hero-cta--mega .hero-cta-body { flex: 0 1 auto; }
.hero-cta--mega .hero-cta-title {
    font-size: 1.25rem;
    font-weight: 800;
}
.hero-cta--mega .hero-cta-arrow {
    font-size: 1.4rem;
    color: #D4AF37;
    flex-shrink: 0;
}
/* Kill the duplicate pseudo-element arrow on the mega CTA — the markup already
   has a single <span class="hero-cta-arrow">, so ::after was a second arrow. */
.hero-cta--mega::after { content: none; }
.hero-cta--mega:hover .hero-cta-arrow { transform: translateX(4px); transition: transform 0.2s; }

/* --- Launch tile grid --- */
/* Flex (not grid): tile count varies (WC tile is seasonal, Value Bets
   added June 10) — wrap + center keeps any count balanced. */
.launch-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}
.launch-tile {
    flex: 1 1 30%;
    min-width: 150px;
    max-width: 235px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 13px 10px 11px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    text-decoration: none;
    text-align: center;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.launch-tile:hover {
    transform: translateY(-3px);
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.launch-tile-icon {
    font-size: 1.3rem;
    line-height: 1;
}
.launch-tile-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    line-height: 1.2;
}
.launch-tile-sub {
    font-size: 0.74rem;
    color: #D4AF37;
    font-weight: 600;
    line-height: 1.25;
}
.launch-tile--gold:hover {
    background: rgba(230, 200, 96, 0.09);
    border-color: rgba(230, 200, 96, 0.5);
}
.launch-tile--gold .launch-tile-sub { color: #E6C860; }
@media (max-width: 640px) {
    .launch-grid { gap: 8px; }
    .launch-tile { flex: 1 1 44%; min-width: 130px; max-width: none; padding: 11px 8px 9px; }
    .hero-cta--mega { padding: 15px 18px; }
    .hero-cta--mega .hero-cta-title { font-size: 1.08rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CLEAN HERO redesign (body.hero-clean). Scoped so flipping the flag
   homepage.clean-hero.enabled=false instantly reverts to the original hero
   with zero markup/CSS change. Goal: flat labelled panels, ONE accent
   (green), a quiet proof line, a calm centred "Explore the site" grid —
   matching the match-preview house style.
   ═══════════════════════════════════════════════════════════════════════ */
/* Calm the hero container: flat, no heavy card chrome. */
body.hero-clean .landing-hero {
    background: transparent;
    border: none;
    padding: 40px 20px 20px;
}
/* KILL the drifting radial-gradient "circle" glow behind the hero — the single
   most-visible bit of noise, and it MOVES (animation). This is what made the
   hero look busy; flattening the panels alone didn't touch it. */
body.hero-clean .landing-hero::before { display: none; content: none; }
/* Title: one accent. Kill any gold on the accent span. */
body.hero-clean .hero-title-accent { color: #D4AF37; -webkit-text-fill-color: #D4AF37; background: none; }
/* Subtitle emphasis was GREEN ("No hiding losses…") — a second accent competing
   with the title. Make it white-bold so green is used once, on the title only. */
body.hero-clean .hero-subtitle strong { color: #EAEAEA; }
/* Proof pill + trust row → one quiet inline line, no boxes. */
body.hero-clean .hero-proof {
    background: transparent; border: none; padding: 4px 0; box-shadow: none;
    display: inline-flex; gap: 8px; align-items: baseline;
}
body.hero-clean .hero-proof-num { color: #D4AF37; }
body.hero-clean .hero-proof-caption { color: #7A7A7A; }
body.hero-clean .hero-trust-pill {
    background: none; border: none; padding: 0; color: #909090; font-weight: 500;
}
/* Hero record card → unbox into three hairline-separated numbers, the founders
   treatment. The bordered .botd-receipts box was the last "accreted box" in the
   hero; flatten it so the proof reads as type, not a widget. Green is the only
   accent (the "see the record" cell was gold). */
body.hero-clean .botd-record-hero { max-width: 560px; }
body.hero-clean .botd-receipts {
    background: transparent; border: none; border-radius: 0; padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.hero-clean .botd-receipts:hover { transform: none; border-color: rgba(255,255,255,0.08); }
body.hero-clean .botd-receipt { padding: 12px 8px; }
body.hero-clean .botd-receipt-num { font-size: 1.9rem; letter-spacing: -0.03em; color: #F8F8F8; }
body.hero-clean .botd-receipt:first-child .botd-receipt-num { color: #D4AF37; }
body.hero-clean .botd-receipt-cta .botd-receipt-num { color: #D4AF37; }
body.hero-clean .botd-receipt-lbl { color: #7E7E7E; font-size: 0.66rem; letter-spacing: 0.1em; }
body.hero-clean .botd-receipt-sep { background: rgba(255,255,255,0.08); margin: 6px 0; }
/* Eyebrow + "verified in public" tag → one quiet mono line, no filled pill. */
body.hero-clean .botd-record-hero .botd-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: 0.72rem;
    letter-spacing: 0.18em; text-transform: uppercase; color: #D4AF37;
}
body.hero-clean .botd-record-hero .botd-tag {
    background: none; color: #7E7E7E; padding: 0; font-weight: 500;
    font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em;
}
body.hero-clean .botd-record-hero .botd-tag::before { content: '\00B7\00A0'; color: rgba(255,255,255,0.3); }
body.hero-clean .botd-record-caption { color: #7E7E7E; }

/* AI ask box → flat labelled panel. */
body.hero-clean .hero-ai {
    background: #0A0A0A; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0; padding: 18px 20px;
}
body.hero-clean .hero-ai-title {
    font-family: 'Outfit', sans-serif; text-transform: uppercase;
    letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: #D4AF37;
}
body.hero-clean .hero-ai-badge {
    background: rgba(212, 175, 55,0.15); color: #D4AF37;
}
/* Email capture → flat panel to match the AI box. */
body.hero-clean .hero-capture {
    background: #0A0A0A; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0; padding: 16px 20px;
}
body.hero-clean .hero-capture-btn {
    background: rgba(212, 175, 55,0.14); color: #D4AF37; border: 1px solid rgba(212, 175, 55,0.4);
}
/* Build-a-Bet mega CTA → flat green panel, not a gradient banner. */
body.hero-clean .hero-cta--mega {
    background: rgba(212, 175, 55,0.08); border: 1px solid rgba(212, 175, 55,0.3);
    box-shadow: none;
}
/* "Explore the site" section label above the grid. */
body.hero-clean .launch-grid-label {
    font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em; color: #888888;
    text-align: center; margin: 26px 0 14px;
}
/* Grid tiles → flat dark panels for a consistent structure, but the ICONS keep
   their full colour and pop against the dark background (the user likes that
   contrast — it's life, not confetti). Just seat each icon in a subtle rounded
   badge so the grid reads tidy. No desaturation. */
body.hero-clean .launch-tile {
    background: #0A0A0A; border: 1px solid rgba(255,255,255,0.08); gap: 8px; padding: 18px 12px;
}
body.hero-clean .launch-tile-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 0;
    background: rgba(255,255,255,0.055); font-size: 1.35rem;
    /* full colour, no filter — let the emoji contrast against the dark tile */
}
/* Soften the busy concentric-circle "pitch" pattern in the WC hero. */
body.hero-clean .wc-hero-pattern { opacity: 0.18; }

/* Remove the site-wide FOOTBALL PITCH drawn behind everything (body::before =
   centre circle + lines + touchlines, body::after = penalty boxes). This is the
   "football background" that made the page feel busy. Scoped to the clean homepage
   so it's flag-revertible and other pages keep it until we decide to go global. */
body.hero-clean::before,
body.hero-clean::after { display: none !important; content: none !important; }

/* Bet-builder section — flow it with the clean hero above. Hide the duplicate
   "69% verified hit rate" proof line (already shown in the hero proof line + the
   Track Record tile); calm the section header's gold accent to the single green. */
body.hero-clean .bh-proof { display: none; }
body.hero-clean .bh-title,
body.hero-clean .sa-title {
    background: none; -webkit-text-fill-color: initial; color: #F8F8F8;
}
body.hero-clean .sa-eyebrow { color: #D4AF37; }

/* --- Match Finder: collapsed by default --- */
.search-form .search-header {
    cursor: pointer;
    position: relative;
    user-select: none;
}
.search-form .fm-toggle-icon {
    display: block;
    margin-top: 6px;
    color: #D4AF37;
    font-size: 0.75rem;
    transition: transform 0.25s ease;
}
.search-form.fm-expanded .fm-toggle-icon { transform: rotate(180deg); }
.search-form .fm-body {
    display: none;
    margin-top: 16px;
}
.search-form.fm-expanded .fm-body { display: block; }
.search-form:not(.fm-expanded) .search-header { margin-bottom: 0; }

/* --- Results ticker: chips in the new card language --- */
.results-ticker .ticker-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    padding: 5px 12px 5px 6px;
}
.results-ticker .ticker-match { color: #E8E8E8; font-weight: 600; }
.results-ticker .ticker-market { color: #A6A6A6; }

/* ════════════════════════════════════════════════════════════════
   EVERYWHERE PASS — the new card language (soft card bg, hairline
   border, hover lift, accent glow) applied to every remaining
   surface, top of page to bottom. CSS-only; shared classes also
   upgrade the same components on other pages.
   ════════════════════════════════════════════════════════════════ */

/* Streak banner → gold pill in the band language */
.streak-banner {
    /* It's an <a>, so default display:inline made the border fragment when the
       text wrapped on mobile - the second line ("board ->") spilled out of the
       box and collided with the section below. Block contains the whole thing. */
    display: block !important;
    background: linear-gradient(90deg, rgba(230, 200, 96, 0.14), rgba(230, 200, 96, 0.05)) !important;
    border: 1px solid rgba(230, 200, 96, 0.35) !important;
    border-radius: 0;
    box-shadow: none !important;
}
.streak-banner .streak-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #E6C860;
}

/* Live strip → card chrome + lift */
.live-strip {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 99, 99, 0.3) !important;
    border-radius: 0;
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.live-strip:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 99, 99, 0.55) !important;
}

/* Top Picks chips → trend-card language */
.hero-pick-chip {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.hero-pick-chip:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 16px rgba(212, 175, 55, 0.08) !important;
}
.hero-pick-prob {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: #D4AF37;
    font-weight: 700;
}

/* Smart Acca presets → launch-tile language (hover lift + active glow) */
.sa-preset {
    border-radius: 0;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}
.sa-preset:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.sa-preset.is-active {
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 22px rgba(212, 175, 55, 0.12) !important;
}

/* Builder section headers → band-header typography */
.bab-header h2,
.byob-header h2 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}
.bab-subtitle,
.byob-subtitle {
    font-size: 0.88rem !important;
}

/* How-it-works / 3-step tiles → card language (also used inside Smart Acca) */
.htu-tldr-tile {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    transition: transform 0.18s ease, border-color 0.18s ease !important;
}
.htu-tldr-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.35) !important;
}
.htu-tldr-num {
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Insight dropdowns (Banker/Value/Top Picks inside Customise) + selection
   cards → consistent hairline + radius */
.insight-dropdown,
.selection-card,
.banker-card,
.value-card {
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
}
.selection-card:hover,
.banker-card:hover,
.value-card:hover {
    border-color: rgba(212, 175, 55, 0.35) !important;
}

/* BYOB pick cards + slip → same card language */
.byob-pick-card {
    border-radius: 0;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}
.byob-pick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Section spacing rhythm — consistent vertical beat all the way down */
.landing-hero { margin-bottom: 34px; }
.wc-hero { margin-bottom: 34px; }

/* ════════════════════════════════════════════════════════════════
   CUSTOMISE YOUR ACCA — form controls in the new design language.
   Control groups become card panels with mono eyebrow labels; the
   build button gets the mega-CTA treatment.
   ════════════════════════════════════════════════════════════════ */
.build-a-bet .bab-quick h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.build-a-bet .bab-controls-grid .bab-form-group {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    padding: 14px 16px;
}
.build-a-bet .bab-form-group > label,
.build-a-bet .custom-bet-types > label {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #A6A6A6;
    margin-bottom: 8px;
}
.build-a-bet .bab-form-group select,
.build-a-bet .custom-fold-input {
    width: 100%;
    background: #101010 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0;
    padding: 10px 12px !important;
    font-size: 0.95rem;
    transition: border-color 0.18s ease;
}
.build-a-bet .bab-form-group select:focus,
.build-a-bet .custom-fold-input:focus {
    border-color: rgba(212, 175, 55, 0.6) !important;
    outline: none;
}
.build-a-bet input[type="range"] {
    accent-color: #D4AF37;
}
.build-a-bet .prob-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    color: #A6A6A6 !important;
    font-weight: 600;
    transition: all 0.15s ease;
}
.build-a-bet .prob-btn:hover {
    border-color: rgba(212, 175, 55, 0.45) !important;
    color: #fff !important;
}
.build-a-bet .prob-btn.active {
    background: rgba(212, 175, 55, 0.14) !important;
    border-color: rgba(212, 175, 55, 0.6) !important;
    color: #D4AF37 !important;
}
.build-a-bet .toggle-pill span {
    border-radius: 999px !important;
}
.build-a-bet .checkbox-label {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    padding: 7px 10px !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.build-a-bet .checkbox-label:hover {
    border-color: rgba(212, 175, 55, 0.4);
}
.build-a-bet .checkbox-label input[type="checkbox"] {
    accent-color: #D4AF37;
}
.build-a-bet .btn-build {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    padding: 14px 34px !important;
    border-radius: 0;
    background: linear-gradient(135deg, #D4AF37, #D4AF37) !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 22px rgba(212, 175, 55, 0.15) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.build-a-bet .btn-build:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), 0 0 30px rgba(212, 175, 55, 0.25) !important;
}
.build-a-bet .btn-lucky-dip-small {
    background: rgba(230, 200, 96, 0.1) !important;
    border: 1px solid rgba(230, 200, 96, 0.4) !important;
    color: #E6C860 !important;
    border-radius: 0;
    font-weight: 700;
    transition: all 0.18s ease;
}
.build-a-bet .btn-lucky-dip-small:hover {
    background: rgba(230, 200, 96, 0.18) !important;
    border-color: rgba(230, 200, 96, 0.7) !important;
}

/* --- Customise tap-chip layer (Smart Acca flow) ---
   Chips proxy the native controls; .bab-enhanced (JS) hides the native
   legs select and the old numeric prob buttons. No-JS keeps everything. */
.bab-leg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    margin-bottom: 10px;
}
.bab-leg-chip {
    min-width: 42px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    color: #D2D2D2;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.bab-leg-chip:hover {
    border-color: rgba(212, 175, 55, 0.45);
    color: #fff;
    transform: translateY(-1px);
}
.bab-leg-chip.is-active {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.65);
    color: #D4AF37;
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.12);
}
.bab-leg-chip--more { font-size: 0.82rem; font-weight: 600; }
.bab-enhanced .bab-native-legs { display: none; }
.bab-enhanced.bab-show-native-legs .bab-native-legs { display: block; }

.bab-conf-chips {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-bottom: 12px;
}
.bab-conf-chip {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}
.bab-conf-chip:hover {
    border-color: rgba(212, 175, 55, 0.45);
    transform: translateY(-1px);
}
.bab-conf-chip.is-active {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.65);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.12);
}
.bab-conf-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.86rem;
    color: #fff;
}
.bab-conf-sub {
    font-size: 0.7rem;
    color: #A6A6A6;
}
.bab-conf-chip.is-active .bab-conf-sub { color: #D4AF37; }
/* Slider stays for fine-tuning; the 7 numeric quick-buttons retire when
   the chip layer is active (they remain the no-JS fallback). */
.bab-enhanced .prob-buttons { display: none; }

/* --- Build skeleton (shown in #bab-result-host during the AJAX build) --- */
.bab-skeleton {
    padding: 22px 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}
.bab-skel-bar {
    height: 16px;
    border-radius: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06) 25%,
        rgba(212, 175, 55, 0.12) 50%,
        rgba(255, 255, 255, 0.06) 75%);
    background-size: 200% 100%;
    animation: babShimmer 1.2s ease-in-out infinite;
    width: 70%;
}
.bab-skel-bar--wide { width: 92%; height: 22px; }
.bab-skel-bar--short { width: 45%; }
@keyframes babShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .bab-skel-bar { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   FIRST-VISIT TOUR (Stage 4, June 2026) — spotlight coachmarks.
   Paired with /js/site-tour.js. gambling.com-inspired.
   ════════════════════════════════════════════════════════════════ */
.fbbt-scrim {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(10, 10, 10, 0.55);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
body.fbbt-open .fbbt-scrim { opacity: 1; pointer-events: auto; }

/* Spotlight = a transparent box that dims everything around it via a huge
   box-shadow, with a gold ring + glow on the highlighted element. */
.fbbt-spot {
    position: fixed; z-index: 10001;
    border-radius: 0;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 0 9999px rgba(10, 10, 10, 0.72),
                0 0 0 2px rgba(230, 200, 96, 0.9),
                0 0 22px 4px rgba(230, 200, 96, 0.35);
    transition: opacity 0.25s ease, left 0.3s ease, top 0.3s ease,
                width 0.3s ease, height 0.3s ease;
}
body.fbbt-open .fbbt-spot { opacity: 1; }

.fbbt-pop {
    position: fixed; z-index: 10002;
    width: 320px; max-width: calc(100vw - 24px);
    background: #101010;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 0;
    padding: 16px 18px 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, left 0.3s ease, top 0.3s ease;
    font-family: 'DM Sans', sans-serif;
}
body.fbbt-open .fbbt-pop { opacity: 1; pointer-events: auto; }
.fbbt-pop--center { width: 380px; padding: 22px 24px 18px; }

.fbbt-arrow {
    position: absolute; width: 0; height: 0;
}
.fbbt-arrow--up {
    top: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent;
    border-bottom: 9px solid rgba(212, 175, 55, 0.4);
}
.fbbt-arrow--down {
    bottom: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent;
    border-top: 9px solid rgba(212, 175, 55, 0.4);
}

.fbbt-count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: #D4AF37; margin-bottom: 8px; opacity: 0.85;
}
.fbbt-title {
    font-family: 'Outfit', sans-serif; font-weight: 800;
    font-size: 1.12rem; color: #fff; margin: 0 0 6px; letter-spacing: -0.01em;
}
.fbbt-body { color: #C4C4C4; font-size: 0.9rem; line-height: 1.5; margin: 0 0 14px; }
.fbbt-actions { display: flex; align-items: center; gap: 8px; }
.fbbt-spacer { flex: 1; }
.fbbt-skip {
    background: none; border: none; color: #7E7E7E;
    font-size: 0.82rem; cursor: pointer; padding: 6px 4px; font-family: inherit;
}
.fbbt-skip:hover { color: #A6A6A6; }
.fbbt-back {
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
    color: #D2D2D2; border-radius: 0; padding: 7px 14px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit;
}
.fbbt-back:hover { border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.fbbt-next {
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    border: none; color: #fff; border-radius: 0; padding: 7px 18px;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.fbbt-next:hover { filter: brightness(1.08); }
.fbbt-next:focus-visible, .fbbt-back:focus-visible, .fbbt-skip:focus-visible {
    outline: 2px solid #D4AF37; outline-offset: 2px;
}

/* Replay pill — bottom-right, pulsing gold dot. */
.fbbt-pill {
    /* Sits ABOVE the chat FAB (which is right:20px; bottom:20px; 56px tall) so the
       two bottom-right controls stack instead of overlapping. */
    position: fixed; right: 16px; bottom: 88px; z-index: 9997;
    display: inline-flex; align-items: center; gap: 8px;
    background: #101010; border: 1px solid rgba(212, 175, 55, 0.4);
    color: #E8E8E8; border-radius: 999px; padding: 9px 16px;
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.85rem;
    cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.fbbt-pill:hover { transform: translateY(-2px); border-color: rgba(212, 175, 55, 0.7); }
/* When the chat panel is open it fills the bottom-right — hide the tour pill so
   the two never overlap. Body gets .cw-open from the chat widget. */
body.cw-open .fbbt-pill { display: none !important; }
.fbbt-pill-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #E6C860;
    box-shadow: 0 0 0 0 rgba(230, 200, 96, 0.6);
    animation: fbbtPulse 2s ease-in-out infinite;
}
@keyframes fbbtPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 200, 96, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(230, 200, 96, 0); }
}

/* Email-capture finale inside the popover. */
.fbbt-capture { margin: 0 0 12px; }
.fbbt-cap-form { display: flex; gap: 8px; }
.fbbt-cap-email, .fbbt-cap-team {
    flex: 1; min-width: 0;
    background: #000000; border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0; padding: 9px 12px; color: #fff;
    font-family: 'DM Sans', sans-serif; font-size: 0.9rem; outline: none;
}
.fbbt-cap-email:focus, .fbbt-cap-team:focus { border-color: rgba(212, 175, 55, 0.6); }
.fbbt-cap-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #D4AF37, #D4AF37);
    border: none; color: #fff; border-radius: 0; padding: 9px 16px;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.85rem; cursor: pointer;
    white-space: nowrap;
}
.fbbt-cap-btn:hover { filter: brightness(1.08); }
.fbbt-cap-btn:disabled { opacity: 0.7; cursor: default; }
.fbbt-cap-msg { font-size: 0.82rem; margin-top: 8px; min-height: 1em; }
.fbbt-cap-msg--ok { color: #D4AF37; }
.fbbt-cap-msg--err { color: #ff8a8a; }
.fbbt-cap-fine { color: #7E7E7E; font-size: 0.72rem; margin: 8px 0 0; }

@media (max-width: 560px) {
    /* Popover becomes a bottom sheet on phones. Cap its height and let it scroll
       so a tall step (the email+team capture) never runs off the top, and pad the
       bottom for the home indicator / safe area. */
    .fbbt-pop, .fbbt-pop--center {
        left: 0 !important; right: 0; top: auto !important; bottom: 0;
        width: 100%; max-width: 100%; transform: none !important;
        border-radius: 0;
        max-height: 85dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }
    .fbbt-arrow { display: none !important; }
    /* Centred on mobile so it clears the corner chat FAB horizontally; sit it a
       touch above the very bottom edge. */
    .fbbt-pill { left: 50%; right: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
    /* Capture form stacks; 16px inputs so iOS Safari doesn't auto-zoom on focus. */
    .fbbt-cap-form { flex-direction: column; }
    .fbbt-cap-email, .fbbt-cap-team { font-size: 16px; padding: 12px; }
    .fbbt-cap-btn { padding: 12px 16px; font-size: 0.95rem; }
    /* Bigger, easier tour buttons on touch. */
    .fbbt-skip, .fbbt-back, .fbbt-next { padding: 10px 14px; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fbbt-spot, .fbbt-pop { transition: opacity 0.2s ease; }
    .fbbt-pill-dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   FREE TOOLS (June 2026) — calculator pages (/tools/*). Design
   language: card surface, mono numbers, green/gold, no blue.
   ════════════════════════════════════════════════════════════════ */
.tool-hero {
    text-align: center;
    margin: 18px 0 22px;
    padding: 26px 16px 6px;
    background:
        radial-gradient(520px 260px at 50% 0%, rgba(212, 175, 55, 0.09), transparent 70%),
        radial-gradient(380px 220px at 80% 8%, rgba(230, 200, 96, 0.06), transparent 70%);
    border-radius: 0;
}
.tool-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 4.6vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 6px 0 8px;
    background: linear-gradient(90deg, #D4AF37, #E6C860);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tool-sub { color: #A6A6A6; font-size: 1rem; max-width: 600px; margin: 0 auto; line-height: 1.55; }
.tool-sub strong { color: #D2D2D2; }

.tool-card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 22px;
    margin: 0 auto 18px;
    max-width: 760px;
}
.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.tool-field { display: flex; flex-direction: column; gap: 6px; }
.tool-field label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #A6A6A6;
}
.tool-field input, .tool-field select {
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    padding: 12px 14px;
    color: #fff;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.05rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.15s ease;
}
.tool-field input:focus, .tool-field select:focus { border-color: rgba(212, 175, 55, 0.6); }
.tool-hint { font-size: 0.72rem; color: #7E7E7E; }

.tool-returns, .tool-result {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.tool-returns-label, .tool-result-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #A6A6A6;
}
.tool-returns-val, .tool-result-val {
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.6rem; color: #D4AF37;
}
.tool-result-val.is-neg { color: #A6A6A6; }
.tool-result-val.is-pos { color: #D4AF37; }
.tool-returns-note { font-size: 0.78rem; color: #7E7E7E; }

/* result rows (EV / Kelly / Poisson markets etc) */
.tool-rows { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.tool-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 12px; border-radius: 0;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
}
.tool-row-k { color: #D2D2D2; font-size: 0.9rem; }
.tool-row-v { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; color: #fff; }
.tool-row-v.pos { color: #D4AF37; }
.tool-row-v.neg { color: #A6A6A6; }
.tool-verdict {
    margin-top: 14px; text-align: center; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem;
}
.tool-verdict.pos { color: #D4AF37; }
.tool-verdict.neg { color: #A6A6A6; }

/* score grid (Poisson) */
.tool-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-top: 14px; }
.tool-score { text-align: center; padding: 10px 6px; border-radius: 0; background: rgba(212, 175, 55, 0.06); border: 1px solid rgba(212, 175, 55, 0.18); }
.tool-score-s { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #fff; font-size: 1.05rem; }
.tool-score-p { font-family: 'JetBrains Mono', monospace; color: #D4AF37; font-size: 0.82rem; }

/* add/remove leg buttons (accumulator) */
.tool-leg-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.tool-btn {
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    color: #D2D2D2; border-radius: 0; padding: 10px 14px; cursor: pointer;
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.85rem;
}
.tool-btn:hover { border-color: rgba(212, 175, 55, 0.45); color: #fff; }
.tool-btn-rm { padding: 10px 12px; color: #A6A6A6; }

/* CTA into the real product */
.tool-cta {
    max-width: 760px; margin: 0 auto 22px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.04) 60%, rgba(230, 200, 96, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 0;
}
.tool-cta-text { color: #D2D2D2; font-size: 0.92rem; }
.tool-cta-text strong { color: #fff; font-family: 'Outfit', sans-serif; }
.tool-cta-btn {
    background: linear-gradient(135deg, #D4AF37, #D4AF37); color: #fff; font-family: 'Outfit', sans-serif;
    font-weight: 700; font-size: 0.88rem; padding: 9px 16px; border-radius: 0; text-decoration: none; white-space: nowrap;
}

.tool-explainer { max-width: 760px; margin: 0 auto 22px; }
.tool-explainer h2 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.3rem; color: #fff; margin: 0 0 12px; }
.tool-explainer p { color: #C4C4C4; line-height: 1.7; margin: 0 0 12px; }
.tool-explainer code { font-family: 'JetBrains Mono', monospace; background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 0; color: #E6C860; }
.tool-explainer a { color: #D4AF37; text-decoration: underline; text-underline-offset: 2px; }
.tool-trust { font-size: 0.9rem; color: #A6A6A6; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 12px; }

.tool-related { max-width: 760px; margin: 0 auto 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; }
.tool-related-label { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7E7E7E; margin-right: 4px; }

/* hub grid */
.tool-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 920px; margin: 0 auto 24px; }
.tool-hub-card {
    display: flex; flex-direction: column; gap: 6px; padding: 18px;
    background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0;
    text-decoration: none; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.tool-hub-card:hover { transform: translateY(-3px); border-color: rgba(212, 175, 55, 0.45); box-shadow: 0 10px 26px rgba(0, 0, 0,0.35); }
.tool-hub-card h3, .tool-hub-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; margin: 0; }
.tool-hub-card p, .tool-hub-desc { color: #A6A6A6; font-size: 0.85rem; margin: 0; line-height: 1.5; }
.tool-hub-card span, .tool-hub-open { margin-top: auto; color: #D4AF37; font-size: 0.82rem; font-weight: 600; }
.tool-hub-name, .tool-hub-desc, .tool-hub-open { display: block; }

/* results container + note + table (used by EV/Kelly/accumulator/Poisson) */
.tool-results { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.tool-result-note { font-size: 0.78rem; color: #7E7E7E; margin-top: 6px; }
.tool-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.tool-table th, .tool-table td {
    padding: 8px 10px; text-align: left; font-size: 0.88rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tool-table th {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #A6A6A6;
}
.tool-table td { color: #D2D2D2; }
.tool-table td:last-child, .tool-table th:last-child { text-align: right; }
.tool-table .num { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #D4AF37; }

@media (max-width: 560px) {
    .tool-leg-row { grid-template-columns: 1fr 1fr; }
    .tool-card { padding: 16px; }
}

/* ── More fixtures (July 2026) ────────────────────────────────────────────
   Footer module on single-fixture pages. Built because 59% of the readers who
   did NOT bounce off a /match/ page navigated to /previews by hand: the fixture
   list was the most-wanted next step and the page never offered it.

   Deliberately NOT a new visual style. The card surface matches
   .related-match-card (its neighbour on the match page) and the league pill
   matches .preview-league (the fixture card on /previews), so the module reads
   as part of the site rather than as something bolted on. If either of those
   changes, change this with them. */
.more-fixtures {
    margin: 2.5rem 0 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mf-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.mf-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}
.mf-all {
    color: #D4AF37;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
}
.mf-all:hover { text-decoration: underline; }
/* Same grid as .related-matches-grid. */
.mf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}
/* The site's canonical inner-card treatment, copied value for value. Both pages
   this module appears on already define it inline for their own cards
   (match-preview: .related-match-card / .score-card / .injury-column and three
   more; bet-builder: .bet-builder-card / .alternatives / .match-stats and two
   more), so the module has to match or it reads as foreign next to them. */
.mf-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.mf-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 16px rgba(212, 175, 55, 0.08);
}
/* Same green pill as .preview-league on the previews page. */
.mf-league {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.1);
    padding: 2px 8px;
    border-radius: 0;
}
/* Same as .related-teams. */
.mf-teams {
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    font-family: var(--font-heading);
}
/* Same as .related-date. */
.mf-when {
    color: #A6A6A6;
    font-size: 0.8rem;
}
@media (prefers-reduced-motion: reduce) {
    .mf-card { transition: none; }
    .mf-card:hover { transform: none; }
}
.related-all-link {
    display: inline-block;
    /* Vertical padding, not just margin: as a bare 23px-tall line of text this
       failed the 24px minimum touch target on mobile. Negative margins keep the
       spacing identical to before the padding was added. */
    padding: 10px 0;
    margin: -0.6rem 0 0.5rem;
    color: #D4AF37;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
}
.related-all-link:hover { text-decoration: underline; }