/* non-critical core CSS (design system blocks 2-4), async-loaded 2026-08-29. Critical block 1 is inline in Site.Master. */

        :root {
            /* Original token names kept so existing pages keep theming */
            --bg-app:#0A0B10; --bg-panel:#0F1118; --bg-glass:rgba(15,17,24,.72);
            --color-primary:#3b82f6; --color-primary-glow:rgba(70,140,255,.5);
            --color-accent:#34D399; --color-danger:#F87171; --color-warning:#f59e0b;
            --font-ui:'Geist','Inter',sans-serif; --font-data:'JetBrains Mono',monospace;
            /* [2026-08-10] COLOR ONLY — every consumer site-wide composes this ("1px solid var(--border-subtle)",
               "color:var(...)", "background:var(...)"); a full-shorthand value makes those declarations invalid
               and silently drops borders/dividers (verified live: .ps-split/.ps-tab rendered 0px none in light theme). */
            --border-subtle:rgba(255,255,255,.08);
            --shadow-glow:0 0 20px var(--color-primary-glow);
            --shadow-card:0 10px 30px -10px rgba(0,0,0,.5);
            /* ===== Locked design system (2026-06-28): Electric blue + ambient-lift ===== */
            --void:#0A0B10; --panel:#0F1118; --panel-2:#15171F;
            --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.13);
            --ink:#E8EDF5; --ink-dim:#93A1B5; --ink-faint:#5A6B82;
            --model:#34D399; --model-dim:rgba(52,211,153,.12);
            --book:#F87171; --book-dim:rgba(248,113,113,.12);
            --action:#3B82F6; --action-hi:#60A5FA; --gold:#F5B301;
            /* Electric-blue accent — the locked CTA language (button/glow/lock) */
            --accent-1:#5AA0FF; --accent-2:#2F6FE6; --accent-grad:linear-gradient(180deg,#5AA0FF,#2F6FE6);
            --accent-glow:rgba(70,140,255,.8); --accent-ink:#BBD6FF; --card-edge:rgba(70,140,255,.2);
            --display:'Geist','Space Grotesk',sans-serif; --ui:'Geist','Inter',sans-serif; --mono:'JetBrains Mono',monospace;
            --maxw:1180px;
            /* chrome tokens — dark defaults = the current literals, so DARK output is byte-identical; light theme overrides below */
            --chrome-bg:rgba(5,8,15,.82); --rail-bg:#070B14; --drawer-bg:rgba(7,11,20,.98);
            --overlay-bg:rgba(5,8,15,.82); --modal-bg:rgba(5,8,15,.86); --botnav-bg:rgba(7,11,20,.94);
            --on-chrome:#ffffff; --toggle-bd:var(--line-strong);
        }
        /* ===== LIGHT THEME — considered (soft cool-paper, deeper blue), not an inversion. Explicit [data-theme] wins both ways. ===== */
        :root[data-theme="light"], html[data-theme="light"]{
            --bg-app:#EEF1F7; --bg-panel:#FFFFFF; --bg-glass:rgba(255,255,255,.72);
            --color-primary:#2563EB; --color-primary-glow:rgba(47,111,224,.32);
            --color-accent:#0F9D63; --color-danger:#DC4A41; --color-warning:#B4690E;
            --border-subtle:rgba(16,24,40,.10); /* color only — see dark-block note */
            --shadow-glow:0 0 20px var(--color-primary-glow); --shadow-card:0 14px 34px -16px rgba(23,37,64,.22);
            --void:#EEF1F7; --panel:#FFFFFF; --panel-2:#F6F8FC;
            --line:rgba(16,24,40,.08); --line-strong:rgba(16,24,40,.14);
            --ink:#111827; --ink-dim:#48566B; --ink-faint:#7C8AA0;
            --model:#0F9D63; --model-dim:rgba(15,157,99,.12); --book:#DC4A41; --book-dim:rgba(220,74,65,.12);
            --action:#2563EB; --action-hi:#1D4ED8; --gold:#A9791A;
            --accent-1:#3B82F6; --accent-2:#2563EB; --accent-grad:linear-gradient(180deg,#3B82F6,#2563EB);
            --accent-glow:rgba(47,111,224,.28); --accent-ink:#1D4ED8; --card-edge:rgba(47,111,224,.22);
            --chrome-bg:rgba(255,255,255,.85); --rail-bg:#EDF1F8; --drawer-bg:rgba(255,255,255,.98);
            --overlay-bg:rgba(20,30,50,.34); --modal-bg:rgba(20,30,50,.46); --botnav-bg:rgba(255,255,255,.92);
            --on-chrome:#111827; --toggle-bd:rgba(16,24,40,.16);
        }
        @media (prefers-color-scheme:light){:root:not([data-theme="dark"]):not([data-theme="light"]){
            --bg-app:#EEF1F7; --bg-panel:#FFFFFF; --bg-glass:rgba(255,255,255,.72);
            --color-primary:#2563EB; --color-primary-glow:rgba(47,111,224,.32);
            --color-accent:#0F9D63; --color-danger:#DC4A41; --color-warning:#B4690E;
            --border-subtle:rgba(16,24,40,.10); /* color only — see dark-block note */
            --shadow-glow:0 0 20px var(--color-primary-glow); --shadow-card:0 14px 34px -16px rgba(23,37,64,.22);
            --void:#EEF1F7; --panel:#FFFFFF; --panel-2:#F6F8FC;
            --line:rgba(16,24,40,.08); --line-strong:rgba(16,24,40,.14);
            --ink:#111827; --ink-dim:#48566B; --ink-faint:#7C8AA0;
            --model:#0F9D63; --model-dim:rgba(15,157,99,.12); --book:#DC4A41; --book-dim:rgba(220,74,65,.12);
            --action:#2563EB; --action-hi:#1D4ED8; --gold:#A9791A;
            --accent-1:#3B82F6; --accent-2:#2563EB; --accent-grad:linear-gradient(180deg,#3B82F6,#2563EB);
            --accent-glow:rgba(47,111,224,.28); --accent-ink:#1D4ED8; --card-edge:rgba(47,111,224,.22);
            --chrome-bg:rgba(255,255,255,.85); --rail-bg:#EDF1F8; --drawer-bg:rgba(255,255,255,.98);
            --overlay-bg:rgba(20,30,50,.34); --modal-bg:rgba(20,30,50,.46); --botnav-bg:rgba(255,255,255,.92);
            --on-chrome:#111827; --toggle-bd:rgba(16,24,40,.16);
        }}
        /* subscribe modal stays DARK in both themes (a dark dialog over a light page is intentional + keeps its rich styling) */
        #sub-modal{color:var(--ink);}
        /* light-mode content override: academy/guide/article pages wrap content in .wrapper (site chrome uses .wrap) on a token-flipping bg — their copy-pasted hardcoded #fff headings become ink so they're not white-on-white. Scoped to .wrapper so it never touches dark hero cards. */
        :root[data-theme="light"] :is(.wrapper,.tc-wrap) :is(h1,h2,h3,h4,summary),:root[data-theme="light"] :is(.wrapper,.tc-wrap) .section-title{color:var(--ink);}
        @media (prefers-color-scheme:light){:root:not([data-theme="dark"]):not([data-theme="light"]) :is(.wrapper,.tc-wrap) :is(h1,h2,h3,h4,summary),:root:not([data-theme="dark"]):not([data-theme="light"]) :is(.wrapper,.tc-wrap) .section-title{color:var(--ink);}}
        *{box-sizing:border-box;-webkit-font-smoothing:antialiased;}
        html{scroll-behavior:smooth;}
        body{margin:0;background:var(--void);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.6;overflow-x:hidden;}
        a{color:inherit;text-decoration:none;transition:.2s ease;}
        ul{margin:0;padding:0;list-style:none;}
        h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0;}
        .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
        .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
        :focus-visible{outline:2px solid var(--action-hi);outline-offset:3px;border-radius:4px;}
        img{max-width:100%;}

        /* ---------- dynamic ticker (server-driven; restyled) ---------- */
        .scarcity-bar{background:var(--rail-bg);border-bottom:1px solid var(--line);color:var(--ink-dim);font-family:var(--mono);font-size:.74rem;padding:9px 0;position:relative;overflow:hidden;}
        .scarcity-bar strong{color:#fff;margin-left:4px;}
        .scarcity-bar i{color:var(--model);margin-right:6px;}
        .marquee-content{display:flex;gap:40px;animation:marquee 30s linear infinite;white-space:nowrap;will-change:transform;}
        @keyframes marquee{0%{transform:translateX(2%);}100%{transform:translateX(-100%);}}
        @media (max-width:768px){.marquee-content{gap:18px;animation:marquee 16s linear infinite;}.marquee-item{margin-right:18px !important;}}

        /* [2026-08-21 owner] statusbar strip removed (was pure filler) */

        /* ---------- header / nav ---------- */
        .main-header{position:sticky;top:0;z-index:9000;height:66px;background:var(--chrome-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 5%;}
        /* Pin the whole top stack (ticker + status strip + nav) together on scroll — desktop
           only; mobile keeps just the nav sticky to protect the viewport. */
        @media (min-width:769px){
          .site-top{position:sticky;top:0;z-index:9000;}
          .site-top .main-header{position:static;}
        }

        /* ---------- upcoming-games strip (swipeable ticker) ---------- */
        .gstrip{background:var(--panel);border-bottom:1px solid var(--line);}
        .gstrip-inner{display:flex;align-items:center;gap:14px;padding:0 5%;height:46px;}
        .gstrip-scroll{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab;}
        .gstrip-scroll::-webkit-scrollbar{display:none;}
        /* while mouse-dragging: no snap/anim, grabbing cursor, cards ignore clicks so a swipe never navigates */
        .gstrip-scroll.gdrag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none;}
        .gstrip-scroll.gdrag .gm{pointer-events:none;}
        /* edge-fade cues (toggled by JS) so a partly-scrolled ticker signals there's more either side */
        .gstrip-scroll.ovl.ovr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);}
        .gstrip-scroll.ovr:not(.ovl){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);}
        .gstrip-scroll.ovl:not(.ovr){-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px);mask-image:linear-gradient(90deg,transparent,#000 24px);}
        .gstrip .gm{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:5px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);text-decoration:none;transition:border-color .15s ease,transform .15s ease;}
        .gstrip .gm:hover{border-color:var(--action);transform:translateY(-1px);}
        .gstrip .gm-l{font:700 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
        .gstrip .gm-t{display:flex;align-items:center;gap:6px;font:700 12px/1.1 var(--ui);color:var(--ink);white-space:nowrap;}
        .gstrip .gm-tw{display:inline-flex;align-items:center;gap:4px;}
        .gstrip .gm-tw img{width:17px;height:17px;object-fit:contain;border-radius:3px;}
        .gstrip .gm-at{color:var(--ink-faint);font-weight:600;}
        .gstrip-all{flex:0 0 auto;font:700 11px/1 var(--mono);color:var(--action);text-decoration:none;white-space:nowrap;}
        /* [2026-08-25] countdown states: imminent = green urgency, live = gold */
        .gm-when.gm-soon{color:var(--action-hi,#34D399);}
        .gm-when.gm-live{color:var(--gold,#F5B301);}
        @media (max-width:640px){.gstrip-all{display:none;}.gstrip-inner{gap:9px;padding:0 12px;}}
        /* flex:none — the wordmark must never be the thing that yields. Without it the brand is the
           first group flexbox compresses under pressure (measured: 194px -> 164px, clipping "BET
           BETTER") because the two groups beside it are wider. */
        .brand-area{display:flex;align-items:center;gap:11px;flex:none;}
        .brand-area img{height:30px;width:auto;}
        /* The brand mark is a WHITE logo — invert it to dark in light theme so it doesn't vanish on the light nav. */
        :root[data-theme="light"] .brand-area img{filter:invert(1);}
        @media (prefers-color-scheme:light){:root:not([data-theme="dark"]):not([data-theme="light"]) .brand-area img{filter:invert(1);}}
        /* Same white mark sits in every page's email-capture strip (.apk-/.app-email-logo) — same invert or it vanishes on light. */
        :root[data-theme="light"] .apk-email-logo,:root[data-theme="light"] .app-email-logo{filter:invert(1);}
        @media (prefers-color-scheme:light){:root:not([data-theme="dark"]):not([data-theme="light"]) .apk-email-logo,:root:not([data-theme="dark"]):not([data-theme="light"]) .app-email-logo{filter:invert(1);}}
        .brand-text{font-family:var(--display);font-weight:700;font-size:1.18rem;letter-spacing:-.03em;color:var(--on-chrome);}
        .brand-badge{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;background:rgba(70,140,255,.14);color:var(--accent-ink);padding:3px 7px;border-radius:5px;border:1px solid rgba(70,140,255,.3);text-transform:uppercase;}
        .nav-links{display:none;gap:20px;}
        .nav-links a{font-size:.9rem;font-weight:500;color:var(--ink-dim);position:relative;}
        .nav-links a:hover,.nav-links a.active{color:var(--on-chrome);}
        .nav-actions{display:flex;align-items:center;gap:14px;}
        .btn-glass{background:transparent;border:1px solid var(--line-strong);color:var(--ink);padding:9px 16px;border-radius:9px;font-family:var(--ui);font-weight:600;font-size:.88rem;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:8px;justify-content:center;}
        .btn-glass:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.04);}
        .btn-neon{background:var(--accent-grad);color:#fff !important;padding:10px 18px;border-radius:10px;font-family:var(--ui);font-weight:600;font-size:.88rem;border:none;cursor:pointer;transition:.18s;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 24px -6px var(--accent-glow);display:inline-flex;align-items:center;gap:8px;justify-content:center;text-transform:none;letter-spacing:0;}
        .btn-neon:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 30px -6px var(--accent-glow);}
        .hamburger-toggle{display:none;font-size:1.4rem;color:var(--on-chrome);cursor:pointer;}
        /* theme toggle (light/dark) — inline SVG icons so it never depends on the deferred FontAwesome */
        .theme-toggle{width:40px;height:40px;border-radius:10px;border:1px solid var(--toggle-bd);background:transparent;color:var(--ink-dim);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.18s;flex:none;}
        .theme-toggle:hover{color:var(--ink);border-color:var(--line-strong);}
        .theme-toggle .i-sun{display:inline-flex;}.theme-toggle .i-moon{display:none;}
        :root[data-theme="light"] .theme-toggle .i-sun{display:none;}:root[data-theme="light"] .theme-toggle .i-moon{display:inline-flex;}
        @media (prefers-color-scheme:light){:root:not([data-theme="dark"]):not([data-theme="light"]) .theme-toggle .i-sun{display:none;}:root:not([data-theme="dark"]):not([data-theme="light"]) .theme-toggle .i-moon{display:inline-flex;}}
        @media (min-width:1200px){.nav-links{display:flex;}}
        @media (max-width:1199px){.hamburger-toggle{display:block;}}
        /* THE SQUISH FIX. .main-header is a nowrap flex row, so when it runs out of room the flex
           items cannot wrap — the TEXT INSIDE them wraps instead, which is what produced the
           two-line "BET / BETTER", the folded "Today's Bet" and the split "Get access". Measured
           on the live nav: the three groups need 1206px (brand 194 + links 561 + actions 451) but
           padding:0 5% leaves only viewport x 0.90, so the full set needs a ~1420px viewport —
           while it all switched on at 1200px. That left a 220px squish band covering 1280x800 and
           1366x768, two of the commonest laptop sizes. */
        .brand-text,.nav-links a,.btn-neon,.btn-glass{white-space:nowrap;}
        /* In that band keep all seven links and both CTAs (they fit at 1026px) and drop only the
           184px inline search, which collapses to its icon and opens the same overlay as mobile. */
        @media (min-width:1200px) and (max-width:1419.98px){
          .nav-links{gap:14px;}
          .nav-links a{font-size:.86rem;}
        }
        /* Mobile header keeps a visible identity + a real conversion CTA (Get access). Only the badge + Log-in link fold away. */
        @media (max-width:919px){.brand-badge{display:none;}.nav-actions .btn-glass:not(.keep-mobile){display:none;}.btn-neon{padding:9px 14px;font-size:.82rem;}}
        @media (max-width:430px){.brand-text{display:none;}}

        /* ---------- mobile drawer ---------- */
        .menu-overlay{position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(6px);z-index:9998;opacity:0;pointer-events:none;transition:.3s;}
        .menu-drawer{position:fixed;top:0;right:-100%;bottom:0;width:86%;max-width:340px;background:var(--drawer-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-left:1px solid var(--line-strong);box-shadow:-10px 0 50px rgba(0,0,0,.8);z-index:9999;transition:.4s cubic-bezier(.19,1,.22,1);padding:88px 22px 24px;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
        .menu-open .menu-overlay{opacity:1;pointer-events:auto;}
        .menu-open .menu-drawer{right:0;}
        .close-menu{position:absolute;top:22px;right:22px;font-size:1.2rem;color:var(--ink-dim);background:var(--panel);border:1px solid var(--line-strong);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;}
        .close-menu:hover{border-color:var(--action);color:var(--ink);}
        #menu-root h3{font-family:var(--display);color:var(--ink);margin-bottom:22px;font-size:1.2rem;}
        .menu-item{padding:15px 12px;border-bottom:1px solid var(--line);font-family:var(--ui);font-size:1rem;font-weight:600;color:var(--ink-dim);display:flex;justify-content:space-between;align-items:center;border-radius:8px;transition:.2s;margin-bottom:4px;}
        .menu-item:hover{background:var(--panel);color:var(--ink);padding-left:18px;border-color:transparent;}
        .sports-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;}
        .sport-tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:.2s;text-decoration:none;}
        .sport-tile:hover{border-color:var(--action);transform:translateY(-3px);}
        .sport-tile img{width:30px;height:30px;object-fit:contain;}
        .sport-tile span{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
        /* retiered drawer: section caption + collapsible "For the sharps" fold */
        .mm-cap{font-family:var(--mono);color:var(--ink-faint);font-size:.72rem;text-transform:uppercase;margin:26px 0 6px;letter-spacing:1px;}
        .mm-tabs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel);margin:8px 0 4px;}
        .mm-tabs button{appearance:none;border:none;background:transparent;color:var(--ink-dim);font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;cursor:pointer;min-height:36px;}
        .mm-tabs button.on{background:var(--accent-grad);color:#fff;}
        .sport-tile.dim{opacity:.45;}
        .menu-fold{border-top:1px solid var(--line);margin-top:22px;}
        .menu-fold>.mf-h{display:flex;align-items:center;justify-content:space-between;padding:16px 12px;cursor:pointer;font-family:var(--ui);font-weight:600;color:var(--ink-dim);font-size:.98rem;}
        .menu-fold>.mf-h:hover{color:var(--ink);}
        .menu-fold>.mf-h .fa-chevron-down{transition:transform .2s;font-size:.78em;color:var(--ink-faint);}
        .menu-fold.open>.mf-h .fa-chevron-down{transform:rotate(180deg);}
        .menu-fold>.mf-body{display:none;padding-left:8px;}
        .menu-fold.open>.mf-body{display:block;}
        .menu-fold .menu-item{font-size:.9rem;padding:12px;}

        /* ---------- subscribe modal (structure preserved; restyled) ---------- */
        .modal-wrap{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.3s ease-out;background:var(--modal-bg);backdrop-filter:blur(12px);}
        .modal-wrap.show{opacity:1;pointer-events:auto;}
        .modal-box{background:var(--panel);border:1px solid var(--line-strong);box-shadow:0 0 0 1px rgba(0,0,0,.3),0 30px 70px -16px rgba(0,0,0,.8);border-radius:20px;width:95%;max-width:920px;display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;transform:scale(.94) translateY(16px);transition:.4s cubic-bezier(.19,1,.22,1);}
        .modal-wrap.show .modal-box{transform:scale(1) translateY(0);}
        .modal-left{padding:44px;background:radial-gradient(circle at 50% 0,rgba(70,140,255,.18) 0%,var(--panel) 68%);display:flex;flex-direction:column;align-items:center;text-align:center;border-right:1px solid var(--line);position:relative;overflow-y:auto;max-height:92vh;}
        .modal-right{padding:44px;background:var(--panel);display:flex;flex-direction:column;justify-content:center;}
        .modal-box.focused-mode{grid-template-columns:1fr;max-width:460px;}
        .modal-box.focused-mode .modal-right{display:none;}
        .modal-box.focused-mode .modal-left{border-right:none;}
        /* [2026-08-15] CHECKOUT MODE (step 3): the payment step takes the stage — wider on
           desktop, true full-screen on mobile — so the embedded Stripe form gets room instead of
           living in a cramped 460px modal. Declared AFTER focused-mode so it wins when both apply. */
        .modal-box.checkout-mode{grid-template-columns:1fr;max-width:580px;width:96%;}
        .modal-box.checkout-mode .modal-right{display:none;}
        .modal-box.checkout-mode .modal-left{border-right:none;max-height:96vh;}
        /* [2026-08-16] MOBILE STEP-1 COMPRESSION — the walkthrough found the BUY BUTTON below the
           fold on a 390x844 phone: logo ate ~110px, proof ~120px, and the CTA fell off-screen at
           the exact step where 66% of openers die. Logo goes (the brand is already in the header),
           spacing tightens, headline shrinks — price AND button now land in the first viewport. */
        @media (max-width: 850px) {
          .modal-left > img{display:none;}
          .modal-left .modal-h2{font-size:1.45rem;margin-top:2px;margin-bottom:10px;}
          .s1-proof{margin-top:2px;}
          .s1-proof .rp-win{padding:5px 0;}
          .plan-toggle{margin-top:12px;}
          .price-wrapper{margin-top:8px;}
          .price-wrapper .price-main{font-size:2.4rem;}
          .s1-mob-benefits{margin:10px auto 0;}
        }
        @media (max-width:850px){
          .modal-box.checkout-mode{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;}
          .modal-box.checkout-mode .modal-left{padding:16px 12px;}
        }
        /* Mobile: single compact column, feature panel hidden so step-1 fits the viewport without scrolling. */
        .s1-mob-benefits{display:none;}
        @media (max-width:850px){
          .modal-box{grid-template-columns:1fr;max-height:96vh;overflow-y:auto;border-radius:16px;}
          .modal-left{padding:24px 20px 22px;border-right:none;overflow-y:visible;max-height:none;}
          .modal-right{display:none;}
          .modal-h2{font-size:1.5rem;margin-bottom:10px;}
          .plan-toggle{margin-top:18px;}
          .price-wrapper{margin-top:16px;}
          .btn-upgrade-big{margin-top:18px;}
          .s1-mob-benefits{display:block;font:500 12px/1.5 var(--ui);color:var(--ink-dim);margin-top:12px;text-align:center;}
        }
        .modal-close-btn{transition:.2s;}
        .modal-close-btn:hover{color:var(--ink) !important;}
        .modal-h2{font-family:var(--display);font-size:1.8rem;color:var(--ink);line-height:1.1;margin:0 0 12px;}
        .modal-sub{color:var(--ink-dim);font-size:.98rem;line-height:1.55;max-width:340px;}
        .plan-toggle{background:rgba(255,255,255,.03);border:1px solid var(--line);padding:4px;border-radius:12px;display:flex;width:100%;margin:30px 0 0;}
        .toggle-item{flex:1;text-align:center;padding:10px;font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--ink-dim);cursor:pointer;border-radius:8px;transition:.2s;}
        .toggle-item:hover{color:var(--ink);}
        .toggle-item.active{background:var(--panel-2);color:var(--ink);border:1px solid var(--line-strong);}
        .toggle-item.best-val{position:relative;overflow:visible;}
        .toggle-item.best-val::after{content:'SAVE 73%';position:absolute;top:-10px;right:-4px;background:var(--model);color:#05080F;font-family:var(--mono);font-size:.58rem;padding:3px 6px;border-radius:4px;font-weight:700;}
        .toggle-item.popular{position:relative;overflow:visible;}
        .toggle-item.popular::after{content:'POPULAR';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--action);color:#fff;font-family:var(--mono);font-size:.58rem;padding:3px 6px;border-radius:4px;font-weight:700;}
        .price-wrapper{margin-top:26px;}
        .price-main{font-family:var(--mono);font-weight:700;font-size:2.6rem;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;}
        .price-sub{font-family:var(--mono);font-size:.78rem;color:var(--ink-faint);margin-top:6px;}
        /* ---- Step 1 inline proof (redesign): hero CLV stat + proof row + wins ticker ---- */
        .s1-eyebrow{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;}
        .s1-proof{margin:16px 0 4px;display:flex;flex-direction:column;gap:9px;width:100%;}
        .s1-wins{background:var(--panel-2);border:1px solid var(--card-edge);border-radius:14px;padding:9px 16px 11px;text-align:left;width:100%;}
        .s1-wins-h{font:500 10px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);margin:3px 0 1px;}
        .s1-ever{font:500 12.5px/1.45 var(--ui);color:var(--ink-dim);display:flex;gap:9px;align-items:center;justify-content:center;text-align:left;padding:13px 16px;background:var(--panel-2);border:1px solid var(--card-edge);border-radius:14px;width:100%;}
        .s1-ever i{color:var(--model);flex:none;}
        .rp-hero{background:var(--panel-2);border:1px solid var(--card-edge);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;}
        .rp-hero .rp-fig{font:600 40px/1 var(--mono);color:var(--model);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
        .rp-hero .rp-label{font:500 13px/1.25 var(--ui);color:var(--ink);}
        .rp-hero .rp-subfig{font:400 11px/1.3 var(--mono);color:var(--ink-faint);}
        .rp-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%;}
        .rp-cell{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;}
        .rp-cell .c-fig{font:600 20px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;}
        .rp-cell.pos .c-fig{color:var(--model);}
        .rp-cell .c-label{font:400 11px/1.2 var(--ui);color:var(--ink-dim);}
        .rp-ticker{margin:0 0 26px;text-align:left;}
        .rp-ticker-h{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 4px;}
        .rp-win{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font:400 12.5px/1.3 var(--ui);color:var(--ink-dim);}
        .rp-win .w-sel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
        .rp-win .w-num{flex:none;font:400 12px/1 var(--mono);color:var(--ink-faint);font-variant-numeric:tabular-nums;}
        .rp-win .w-num b{color:var(--model);font-weight:600;}
        .mr-h4{font-family:var(--mono);color:var(--ink);font-weight:700;margin:0 0 20px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:14px;}
        @media (max-width:850px){ .rp-hero .rp-fig{font-size:34px;} .rp-ticker{margin-bottom:16px;} }
        .form-control{font-family:var(--ui);}
        .form-control:focus{outline:none;border-color:var(--action) !important;}
        .btn-upgrade-big{margin-top:28px;width:100%;background:var(--accent-grad);color:#fff;border:none;border-radius:12px;padding:15px;font-family:var(--ui);font-weight:700;font-size:1rem;cursor:pointer;transition:.18s;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 26px -7px var(--accent-glow);display:inline-flex;align-items:center;justify-content:center;gap:8px;}
        .btn-upgrade-big:hover{filter:brightness(1.07);transform:translateY(-1px);}
        .btn-upgrade-big:disabled{opacity:.7;cursor:default;transform:none;filter:none;}
        .feature-list{display:flex;flex-direction:column;gap:20px;}
        .feature-item{display:flex;gap:14px;align-items:flex-start;color:var(--ink-dim);font-size:.92rem;line-height:1.45;}
        .feature-item strong{color:var(--ink);font-weight:600;}
        .feature-icon{flex:0 0 38px;height:38px;border-radius:9px;background:var(--model-dim);border:1px solid rgba(52,211,153,.25);display:flex;align-items:center;justify-content:center;color:var(--model);font-size:.95rem;}

        /* ---------- footer ---------- */
        /* Sport-aware related-links block (InternalLinks.Render) — sits above the footer. */
        .bb-illinks{max-width:var(--maxw);margin:34px auto 0;padding:22px 5% 0;border-top:1px solid var(--line);
            display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
        .bb-illinks .illink-h{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
            color:var(--ink-faint);margin:0 0 10px;font-weight:600;}
        .bb-illinks .illink-list{list-style:none;margin:0;padding:0;}
        .bb-illinks .illink-list li{margin-bottom:7px;}
        .bb-illinks .illink-list a{color:var(--ink-dim);font-size:.86rem;text-decoration:none;}
        .bb-illinks .illink-list a:hover{color:var(--action-hi);}
        /* responsible-gambling compliance line. Site-wide fallback so the canonical
           <p class="rg-line"> block renders correctly on every pick / odds / prediction
           surface. Pages that already define .rg-line locally (the betting guides) keep
           their own rule — this only fills the gap, it never overrides. */
        .rg-line{max-width:var(--maxw,1240px);margin:26px auto 0;padding:0 5%;font-size:.78rem;line-height:1.65;color:var(--ink-faint);font-family:var(--ui,'Inter',sans-serif);}
        .rg-line a{color:var(--ink-dim);border-bottom:1px solid var(--line);}
        .rg-line a:hover{color:var(--action-hi);}
        /* ---------- footer [2026-08-21 redesign: same links, grouped + laid out properly] ---------- */
        .site-footer{border-top:1px solid var(--line);background:var(--rail-bg);padding:0 5% 30px;font-size:.9rem;position:relative;}
        .site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--card-edge),transparent);}
        .ft-inner{max-width:var(--maxw);margin:0 auto;}
        .ft-brandband{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding:38px 0 30px;border-bottom:1px solid var(--line);}
        .ft-id{display:flex;align-items:center;gap:14px;}
        .ft-id img{height:38px;width:auto;}
        /* light theme flips the white logo to black — identical mechanism to the navbar brand */
        :root[data-theme="light"] .ft-id img{filter:invert(1);}
        @media (prefers-color-scheme:light){:root:not([data-theme="dark"]):not([data-theme="light"]) .ft-id img{filter:invert(1);}}
        .ft-id .ft-word{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);display:block;}
        .ft-id .ft-tag{display:block;color:var(--ink-faint);font-size:.82rem;margin-top:3px;max-width:52ch;line-height:1.5;}
        .ft-social{display:flex;align-items:center;gap:10px;}
        .ft-social a{width:38px;height:38px;border-radius:11px;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--ink-dim);font-size:1.05rem;transition:.18s;}
        .ft-social a:hover{color:var(--on-chrome);border-color:var(--card-edge);transform:translateY(-1px);}
        .ft-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:30px 26px;padding:34px 0 8px;}
        .ft-col h4{font-family:var(--mono);color:var(--ink);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 4px;padding-bottom:10px;border-bottom:1px solid var(--line);}
        .ft-col ul{margin:10px 0 0;}
        .ft-col li{margin:0;}
        .ft-col a{color:var(--ink-dim);font-size:.84rem;display:inline-block;padding:4.5px 0;min-height:22px;line-height:1.45;}
        .ft-col a:hover{color:var(--action-hi);}
        .ft-base{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:26px;padding-top:20px;color:var(--ink-faint);font-size:.75rem;font-family:var(--mono);}
        .ft-base .ft-pay{display:flex;align-items:center;gap:8px;opacity:.6;}
        @media (max-width:900px){.ft-links{grid-template-columns:repeat(2,1fr);gap:26px 20px;}.ft-brandband{padding:30px 0 24px;}}

        /* ---------- site-wide mobile bottom-nav (P8 → app-design port 2026-08-14) ----------
           Mirrors the Flutter AppBottomNav: a 64px flush translucent panel bar with a strong top
           hairline; quiet 22px line icons + 10px labels that brighten ink-faint → ink when active
           (no color flood — the raised center button carries the focus); center = raised 56px
           brand-gradient squircle (radius 19, 2.5px void ring, soft brand shadow) poking 18px
           above the bar, with a small action-blue label beneath. */
        .bb-botnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:8500;align-items:stretch;justify-content:space-around;background:var(--botnav-bg);background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line-strong);padding-bottom:env(safe-area-inset-bottom);}
        .bb-tab{flex:1;background:none;border:none;cursor:pointer;height:64px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-faint);transition:color .16s,transform .1s;-webkit-tap-highlight-color:transparent;text-decoration:none;}
        .bb-tab.active{color:var(--ink);}
        .bb-tab.active .lb{font-weight:600;}
        .bb-tab:active{transform:scale(.94);}
        .bb-tab .ic{line-height:0;}
        .bb-tab .ic svg{width:22px;height:22px;display:block;}
        .bb-tab .lb{font-family:var(--ui);font-size:10px;font-weight:400;line-height:1.2;letter-spacing:.02em;}
        .bb-botnav .bb-cta-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;transform:translateY(-18px);cursor:pointer;-webkit-tap-highlight-color:transparent;}
        .bb-botnav .bb-cta{width:56px;height:56px;flex:none;background:linear-gradient(135deg,var(--accent-2),var(--accent-1));border:2.5px solid var(--void);border-radius:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 22px -6px var(--accent-glow);box-shadow:0 12px 22px -6px color-mix(in srgb,var(--action) 50%,transparent);transition:filter .16s,transform .1s;padding:0;}
        .bb-botnav .bb-cta svg{width:26px;height:26px;display:block;color:#fff;}
        .bb-botnav .bb-cta-wrap:active .bb-cta{transform:scale(.94);}
        .bb-botnav .bb-cta-lb{font-family:var(--ui);font-size:10px;font-weight:600;line-height:1;color:var(--action-hi);}
        /* [2026-08-11] hover-capable devices ONLY — on touch, a :hover rule makes the first
           tap trigger the hover state and users must tap TWICE (classic iOS double-tap trap).
           The botnav is mobile-primary, so this was hitting exactly its own audience. */
        @media (hover: hover) and (pointer: fine) {
          .bb-tab:hover{color:var(--ink);}
          .bb-botnav .bb-cta-wrap:hover .bb-cta{filter:brightness(1.08);}
        }
        body.subscribed .bb-botnav .bb-cta-wrap{display:none;}
        @media (max-width:919px){.bb-botnav{display:flex;} body:not(:has(.bot-nav)){padding-bottom:calc(64px + env(safe-area-inset-bottom));}}
        body:has(.bot-nav) .bb-botnav{display:none;}

        /* ---------- shared content utilities (used by pages) ---------- */
        .reveal{opacity:0;transform:translateY(16px);transition:.7s cubic-bezier(.2,.7,.2,1);}
        .reveal.in{opacity:1;transform:none;}
        @media (prefers-reduced-motion:reduce){
            html{scroll-behavior:auto;}
            .reveal{opacity:1;transform:none;transition:none;}
            .bar-fill{transition:none !important;}
            .marquee-content{animation:none;}
        }

        /* ===== Locked components (Electric-blue · ambient-lift) — additive, opt-in per page ===== */
        .bb-eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);}
        /* ambient-lift PICK card: floats on a soft blue glow + lit top edge. Named .bb-pick to avoid the academy pages' existing .bb-card. */
        .bb-pick{position:relative;border-radius:16px;padding:16px;background:var(--panel);border:1px solid var(--card-edge);box-shadow:0 20px 40px -22px var(--accent-glow);overflow:hidden;}
        .bb-pick::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(140% 85% at 50% -12%,rgba(70,140,255,.12),transparent 62%);pointer-events:none;}
        .bb-pick>*{position:relative;z-index:1;}
        .bb-pick.is-locked{box-shadow:none;}
        /* edge / units / ROI / wins = money green ONLY, tabular mono */
        .bb-edge{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--model);line-height:1;}
        /* gradient button (the locked CTA) */
        .btn-grad{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-grad);color:#fff;border:none;border-radius:12px;padding:13px 20px;font-family:var(--ui);font-weight:600;font-size:.95rem;line-height:1;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 26px -7px var(--accent-glow);transition:.18s;text-decoration:none;}
        .btn-grad:hover{filter:brightness(1.07);transform:translateY(-1px);}
        .btn-grad:active{transform:translateY(0);}
        .btn-grad:disabled{opacity:.6;cursor:default;transform:none;filter:none;}
        /* gradient-ring lock for paywalled teases */
        .bb-lock{display:inline-flex;width:46px;height:46px;border-radius:50%;background:var(--accent-grad);padding:1.5px;box-shadow:0 0 16px -3px var(--accent-glow);}
        .bb-lock>i,.bb-lock>span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--panel);color:var(--accent-ink);font-size:1.05rem;}
        /* proof strip → /results (green = verified units) */
        .bb-proof{display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:9px 13px;font-family:var(--mono);font-size:.8rem;color:var(--ink-dim);text-decoration:none;}
        .bb-proof .u{color:var(--model);font-weight:600;}
        .bb-proof .pdot{width:6px;height:6px;border-radius:50%;background:var(--model);box-shadow:0 0 8px var(--model);}

        /* ambient-lift on EVERY money-card type across every sport (best-bets .tip-row · parlays .parlay-tip-row · picks .game-block + NBA/AFL variants · prop sheets .game-card · guide .prop-card). One master rule lifts them all — master CSS loads after page CSS so it wins the tie. */
        .tip-row,.parlay-tip-row,.game-block,.npk-game-block,.apk-game-block,.game-card,.prop-card{position:relative;border:1px solid var(--card-edge);box-shadow:0 20px 42px -24px var(--accent-glow);}
        .tip-row::after,.parlay-tip-row::after,.game-block::after,.npk-game-block::after,.apk-game-block::after,.game-card::after,.prop-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:radial-gradient(120% 80% at 50% -12%,rgba(70,140,255,.10),transparent 60%);}
        .tip-row>*,.parlay-tip-row>*,.game-block>*,.npk-game-block>*,.apk-game-block>*,.game-card>*,.prop-card>*{position:relative;z-index:1;}
        .tip-row:hover,.parlay-tip-row:hover,.game-block:hover,.npk-game-block:hover,.apk-game-block:hover,.game-card:hover,.prop-card:hover{border-color:var(--accent-1);box-shadow:0 26px 52px -18px var(--accent-glow);}

        /* whisper film-grain over content (chrome z-index > 7000 sits above it; non-interactive) */
        body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:7000;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

        /* ==== BEGIN tip-card consistency system (workflow-synthesized) ==== */
/* [2026-07-15] Tip-card design system — unifies picks/best-bets/prop-bets/parlays across all sports to the AFL look. Master CSS wins over page CSS. */

/* ============================================================================
   PAGE TYPE 1 — PICKS  (apk = AFL/ncaaf/ufc/wnba · npk = NBA · unprefixed = legacy MLB/NFL/nhl/all soccer/tennis)
   ========================================================================== */

/* GAME BLOCK (card) */
.apk-game-block, .npk-game-block, .game-block {
    background: var(--panel);
    border-radius: 16px;
    margin-bottom: 1.25em;
    overflow: hidden;
    will-change: transform;
}

/* SUBHEADER (league + teams + starts-in) */
.apk-game-subheader, .npk-game-subheader, .game-subheader {
    padding: 11px 16px;
    background: var(--panel-2);
    font-size: 0.85em;
    color: var(--ink-dim);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-family: var(--mono);
}
.apk-game-subheader .game-date, .npk-game-subheader .game-date, .game-subheader .game-date { color: var(--ink-faint); }
.apk-game-subheader .starts-in, .npk-starts-in, .game-subheader .starts-in { font-weight: 700; color: var(--action-hi); }

/* GAME HEADER (teams row) */
.apk-game-header, .npk-game-header, .game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.apk-team-info, .npk-team-info, .team-info { display: flex; align-items: center; flex-basis: 42%; }
.apk-away-team, .npk-away-team, .away-team { justify-content: flex-start; }
.apk-home-team, .npk-home-team, .home-team { justify-content: flex-end; flex-direction: row-reverse; }
.apk-team-name, .npk-team-name, .team-name { font-family: var(--display); font-size: 1.12em; font-weight: 700; margin: 0 8px; white-space: nowrap; color: var(--ink); }
.apk-team-label, .npk-team-label, .team-label { font-family: var(--mono); font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0 8px; }
.apk-team-logo, .npk-team-logo, .team-logo { height: 38px; width: 38px; object-fit: contain; }

/* ---------- PARTICIPANT IMAGE SLOT: team logo | athlete face | initials monogram ----------
   Emitted in exactly one place, BetBetter.Helpers.AthleteFaces.Img, which is called from the
   navbar strip (every page) and from the sport/athlete pages. These rules are deliberately
   UNSCOPED — do not put a parent selector in front of them, every page needs them.
   Promoted from the .gteam .nm .tlogo-ph copy in Default.aspx so the two cannot drift. */
.tlogo-ph {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; overflow: hidden; border-radius: 50%;
    background: var(--panel-2, rgba(127,140,170,.14));
    border: 1px solid var(--line, rgba(127,140,170,.28));
    font-family: var(--mono); font-weight: 700; letter-spacing: .02em;
    color: var(--ink-dim, #9aa6b8);
}
/* Size modifiers — one class set serves every slot. The number is the px the renderer was asked
   for, so AthleteFaces.Img(..., 17, ...) always lands on .bb-ph-17. Add a rule when adding a size. */
.bb-ph-17 { width: 17px; height: 17px; font-size: .44rem; border-radius: 3px; } /* navbar strip: matches the square team-logo slot */
.bb-ph-18 { width: 18px; height: 18px; font-size: .44rem; border-radius: 3px; } /* history rows */
.bb-ph-20 { width: 20px; height: 20px; font-size: .46rem; }
.bb-ph-22 { width: 22px; height: 22px; font-size: .5rem; }
.bb-ph-34 { width: 34px; height: 34px; font-size: .68rem; }
.bb-ph-26 { width: 26px; height: 26px; font-size: .6rem; }
.bb-ph-30 { width: 30px; height: 30px; font-size: .62rem; }
.bb-ph-38 { width: 38px; height: 38px; font-size: .72rem; }
.bb-ph-60 { width: 60px; height: 60px; font-size: 1rem; }
.bb-ph-66 { width: 66px; height: 66px; font-size: 1.05rem; }
.bb-ph-96 { width: 96px; height: 96px; font-size: 1.5rem; }
/* A headshot must be CROPPED, not letterboxed — object-fit:contain leaves bars above and below a
   face in a square slot, which is why this cannot just reuse the team-logo rule above. */
/* object-position biases the crop TOWARDS THE HEAD. Without it, cover centres the source, which
   is fine for the ESPN/TheSportsDB head-and-shoulders shots but decapitates the Wikimedia rows —
   those are full-body action photos (Ben Shelton is 250x352 with the face in the top third), so a
   centred square crop lands on the torso and racket. Verified by eye on the real images. */
img.bb-face { border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: var(--panel-2, rgba(127,140,170,.14)); }
/* The strip has its own `.gstrip .gm-tw img` rule (object-fit:contain, 3px corners) which outranks
   the unscoped rule above on specificity, so the crop has to be restated for that one context. */
.gstrip .gm-tw img.bb-face { object-fit: cover; border-radius: 50%; }

/* VS separator — flatten NBA's .npk-vs pill to AFL's plain inline text look */
.apk-vs-text, .npk-vs, .vs-text {
    font-family: var(--mono); font-weight: 700; font-size: 0.95em; margin: 0 15px; color: var(--ink-faint);
    background: none; border: none; padding: 0; border-radius: 0;
}

/* TOGGLE BUTTON */
.apk-toggle-btn, .npk-toggle-btn, .toggle-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--panel-2);
    color: var(--accent-ink);
    font-family: var(--ui);
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    border-top: 1px solid var(--line);
    user-select: none;
    transition: background 0.15s;
}
.apk-toggle-btn:hover, .npk-toggle-btn:hover, .toggle-button:hover { background: rgba(70,140,255,0.12); }
.apk-toggle-btn i, .npk-toggle-btn i, .toggle-button i { transition: transform 0.3s ease; }

/* COLLAPSIBLE  (NBA uses .npk-picks-content, NOT .npk-picks-collapsible) */
.apk-picks-collapsible, .npk-picks-content, .picks-collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    background: var(--void);
}
.apk-picks-collapsible.expanded, .npk-picks-content.expanded, .picks-collapsible-content.expanded { max-height: 100%; overflow: visible; }

/* BET ROW */
.apk-bet-item, .npk-bet-item, .bet-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 0.9em;
}
.apk-bet-item:last-child, .npk-bet-item:last-child, .bet-item:last-child { border-bottom: none; }
.apk-bet-desc-section, .npk-bet-desc, .bet-description-section {
    flex-grow: 1;
    margin-right: 20px;
    display: flex;
    align-items: center;
}
/* description text: AFL .apk-desc-text; NBA + legacy both use inner .description-text */
.apk-desc-text, .description-text { font-weight: 700; color: var(--ink); }

/* DETAILS group (probability / edge / odds) */
.apk-bet-details, .npk-bet-stats, .bet-details-section {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
}
.apk-detail-item, .npk-detail, .detail-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 72px;
    text-align: right;
}
.apk-detail-item .lbl, .npk-detail .label, .detail-item .label {
    font-family: var(--mono); font-size: 0.66em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 3px;
}
.apk-detail-item .val, .npk-detail .value, .detail-item .value {
    font-family: var(--mono); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
/* EDGE = money green. Every per-sport edge mechanism listed (AFL/NBA/EPL modifier on wrapper; MLB class on value span) */
.apk-detail-item.is-edge .val,
.npk-detail.npk-edge .value,
.detail-item.edge-item .value,
.detail-item .value.edge-value { color: var(--model); }
/* ODDS value (AFL .apk-odds-val; NBA + legacy inner .odds-value) */
.apk-odds-val, .odds-value { font-family: var(--mono); font-weight: 700; color: var(--model); font-variant-numeric: tabular-nums; }

/* REASONING */
.apk-bet-reasoning, .npk-reasoning, .bet-reasoning {
    font-size: 0.9em;
    color: var(--ink-dim);
    margin-top: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    line-height: 1.55;
}
/* reasoning content: AFL .apk-reasoning-content; NBA + legacy both use inner .bet-reasoning-content */
.apk-reasoning-content, .bet-reasoning-content { display: block; padding: 10px; }
.apk-reasoning-content h1, .apk-reasoning-content h2, .apk-reasoning-content h3,
.bet-reasoning-content h1, .bet-reasoning-content h2, .bet-reasoning-content h3 {
    font-family: var(--display); font-size: 1.2em; font-weight: 700; margin-top: 1em; margin-bottom: 0.5em; color: var(--ink);
}
.apk-reasoning-content p, .bet-reasoning-content p { margin-top: 0.5em; margin-bottom: 0.5em; }
.apk-reasoning-content hr, .bet-reasoning-content hr { border: 0; height: 1px; background: var(--line); margin: 1em 0; }

/* PICKS MOBILE — mirror AFL @media(max-width:768px) */
@media (max-width: 768px) {
    .apk-game-header, .npk-game-header, .game-header { flex-direction: column; align-items: flex-start; padding: 12px 15px; }
    .apk-team-info, .npk-team-info, .team-info { width: 100%; margin-bottom: 6px; }
    .apk-vs-text, .npk-vs, .vs-text { display: none; }
    .apk-bet-item, .npk-bet-item, .bet-item { flex-direction: column; align-items: flex-start; padding: 12px 15px; }
    .apk-bet-desc-section, .npk-bet-desc, .bet-description-section { margin-right: 0; margin-bottom: 10px; width: 100%; }
    .apk-bet-details, .npk-bet-stats, .bet-details-section { flex-direction: row; justify-content: space-between; width: 100%; flex-wrap: wrap; gap: 8px; }
    .apk-detail-item, .npk-detail, .detail-item { flex-direction: column; align-items: flex-start; text-align: left; flex: 1; }
}

/* ============================================================================
   PAGE TYPE 2 — BEST-BETS  (AFL = bespoke .bb-* · legacy .tip-row [WITHOUT .player-prop-row] = NBA/MLB/all others)
   Legacy best-bets cards are scoped with :not(.player-prop-row) so prop-bets .tip-row cards are never touched.
   ========================================================================== */

/* CARD — ambient-lift */
.bb-tip-card, .tip-row:not(.player-prop-row) {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--card-edge);
    border-radius: 16px;
    padding: 1.25em;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 20px 42px -24px var(--accent-glow);
    transition: border-color 0.16s, box-shadow 0.16s, transform 0.12s;
}
.bb-tip-card::after, .tip-row:not(.player-prop-row)::after {
    content: '';
    position: absolute;
    top: -50%; left: 50%;
    width: 150%; height: 70%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(70,140,255,0.10), transparent 70%);
    pointer-events: none;
}
.bb-tip-card:hover, .tip-row:not(.player-prop-row):hover {
    border-color: var(--action);
    box-shadow: 0 26px 52px -18px var(--accent-glow);
    transform: translateY(-2px);
}
.bb-tip-card > *, .tip-row:not(.player-prop-row) > * { position: relative; }

/* GAME HEADER */
.bb-game-header, .tip-row:not(.player-prop-row) .game-details {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.82em; color: var(--ink-dim);
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.75em; margin-bottom: 1em; gap: 0.75em;
}
.bb-game-header .bb-mono { font-family: var(--mono); }
.bb-starts-in, .tip-row:not(.player-prop-row) .starts-in {
    font-family: var(--mono); font-weight: 700; color: var(--action-hi); white-space: nowrap; font-size: 0.9em;
}

/* SELECTION / PICK NAME */
.bb-selection-tag {
    display: inline-block;
    background: rgba(70,140,255,0.10);
    padding: 0.25em 0.6em; border-radius: 12px;
    border: 1px solid var(--card-edge);
    font-family: var(--mono); font-size: 0.72em;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent-ink); margin-bottom: 0.5em;
}
.bb-pick-name, .tip-row:not(.player-prop-row) .player-name {
    font-size: 1.15em; font-weight: 700; color: var(--ink); margin: 0 0 0.35em; line-height: 1.25;
}
.bb-pick-detail, .tip-row:not(.player-prop-row) .selection { font-size: 0.85em; color: var(--ink-dim); }
.bb-pick-detail .bb-dim { color: var(--ink-faint); }

/* STATS BLOCK — AFL canonical (.bb-stat-cell = two sibling spans) */
.bb-stats-block {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--line-strong); border: 1px solid var(--line-strong);
    border-radius: 12px; overflow: hidden; margin: 0.9em 0;
}
.bb-stat-cell { background: var(--panel-2); padding: 0.75em; text-align: center; display: flex; flex-direction: column; gap: 0.2em; }
.bb-stat-label { font-size: 0.65em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-family: var(--mono); }
.bb-stat-val { font-family: var(--mono); font-weight: 700; font-size: 1.15em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bb-stat-val.bb-green { color: var(--model); text-shadow: 0 0 12px rgba(52,211,153,0.3); }

/* STATS BLOCK — legacy reproduction (.stats-body > span.probability/.edge = strong label + span value).
   Rebuilt into AFL's 2-col grid; label-on-top / value-below. */
.tip-row:not(.player-prop-row) .stats-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--line-strong); border: 1px solid var(--line-strong);
    border-radius: 12px; overflow: hidden; margin: 0.9em 0;
}
.tip-row:not(.player-prop-row) .stats-body > span {
    background: var(--panel-2); padding: 0.75em; text-align: center;
    display: flex; flex-direction: column; gap: 0.2em; width: auto;
}
.tip-row:not(.player-prop-row) .stats-body > span > strong {
    font-size: 0.65em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-family: var(--mono); font-weight: 700;
}
.tip-row:not(.player-prop-row) .stats-body > span > span {
    font-family: var(--mono); font-weight: 700; font-size: 1.15em; color: var(--ink); font-variant-numeric: tabular-nums;
}
/* edge green — normalized to .edge span (also fixes MLB's broken .edge span span selector as a side effect) */
.tip-row:not(.player-prop-row) .stats-body .edge span { color: var(--model); text-shadow: 0 0 12px rgba(52,211,153,0.3); }

/* CARD FOOTER (odds: DEC / US) */
.bb-card-footer, .tip-row:not(.player-prop-row) .tip-footer {
    margin-top: auto; padding-top: 0.75em;
    border-top: 1px dashed var(--line-strong);
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 0.78em;
    color: var(--ink-dim); font-variant-numeric: tabular-nums; gap: 0.75em;
}

/* BEST-BETS MOBILE — AFL keeps stats 2-col; force legacy to match (override its native 1-col stack) */
@media (max-width: 768px) {
    .tip-row:not(.player-prop-row) .stats-body { grid-template-columns: 1fr 1fr; }
    .tip-row:not(.player-prop-row) .stats-body > span { flex-direction: column; width: auto; justify-content: center; }
}

/* ============================================================================
   PAGE TYPE 3 — PROP-BETS  (AFL/MLB/all legacy share .tip-row.player-prop-row · NBA = .npp-* )
   All prop rules scoped to .player-prop-row / .npp-tip-row so best-bets .tip-row is never affected.
   ========================================================================== */

/* CARD / ROW */
.tip-row.player-prop-row, .npp-tip-row {
    background: var(--panel);
    border-radius: 0.85em;
    padding: 20px; margin-bottom: 18px;
    transition: transform 0.18s, box-shadow 0.18s;
}
.tip-row.player-prop-row:hover, .npp-tip-row:hover { transform: translateY(-2px); }

/* GAME HEADER */
.tip-row.player-prop-row .game-details, .npp-tip-row .npp-game-details {
    padding-bottom: 12px; border-bottom: 1px solid var(--line);
    font-size: 0.88em; color: var(--ink-dim);
    margin-bottom: 16px; font-family: var(--mono);
}
.tip-row.player-prop-row .game-details .game a, .npp-tip-row .npp-game-details .game a { color: var(--action-hi); text-decoration: none; }
.tip-row.player-prop-row .game-details .game a:hover, .npp-tip-row .npp-game-details .game a:hover { text-decoration: underline; }
.tip-row.player-prop-row .game-details .starts-in, .npp-starts-in { font-weight: 700; color: var(--action-hi); }
.tip-row.player-prop-row .bet-units { visibility: hidden; height: 0; }

/* PLAYER NAME  (NBA drops the .player-info wrapper — name element is .npp-player-name directly) */
.player-prop-row { }
.tip-row.player-prop-row .player-section, .npp-tip-row .player-section { margin-bottom: 14px; }
.tip-row.player-prop-row .player-info .player-name, .npp-player-name {
    font-size: 1.18em; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
}
.tip-row.player-prop-row .player-info .player-name a:hover, .npp-player-name a:hover { color: var(--action-hi); }

/* PROBABILITY + EDGE (label=strong / value=span) — GREEN = money */
.tip-row.player-prop-row .stats-body, .npp-stats-body {
    display: flex; gap: 22px; align-items: center; margin-bottom: 16px;
    font-family: var(--mono); font-size: 0.92em; flex-wrap: wrap;
}
.tip-row.player-prop-row .stats-body strong, .npp-stats-body strong { color: var(--ink-dim); font-weight: 500; margin-right: 5px; }
.tip-row.player-prop-row .stats-body .probability span, .npp-prob span { color: var(--model); font-weight: 700; }
.tip-row.player-prop-row .stats-body .edge, .npp-edge { color: var(--model); font-weight: 700; }

/* ODDS FOOTER */
.tip-row.player-prop-row .tip-footer, .npp-tip-footer {
    display: flex; gap: 22px; padding-top: 16px;
    border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: 0.92em; flex-wrap: wrap;
}
.tip-row.player-prop-row .tip-footer strong, .npp-tip-footer strong { color: var(--ink-dim); font-weight: 500; margin-right: 5px; }
.tip-row.player-prop-row .tip-footer .decimal-odds,
.tip-row.player-prop-row .tip-footer .american-odds,
.npp-tip-footer .npp-dec-odds,
.npp-tip-footer .npp-us-odds { color: var(--ink); font-weight: 700; }

/* PROP-BETS MOBILE */
@media (max-width: 768px) {
    .tip-row.player-prop-row .stats-body, .npp-stats-body,
    .tip-row.player-prop-row .tip-footer, .npp-tip-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
    .promo-row-container.item-as-promo, .npp-promo-row { flex-direction: column; text-align: center; }
    .promo-icon { display: none; }
}

/* ============================================================================
   PAGE TYPE 4 — PARLAYS  (ALL sports share identical class names — one group, no variant translation)
   ========================================================================== */
.parlay-tip-row {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--card-edge);
    border-radius: 0.75em;
    padding: 1.25em; margin-bottom: 1.25em;
    box-shadow: 0 20px 42px -24px var(--accent-glow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}
.parlay-tip-row::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 18% 0%, rgba(70,140,255,0.10), transparent 60%);
    pointer-events: none;
}
.parlay-tip-row:hover { border-color: var(--accent-glow); box-shadow: 0 26px 50px -22px var(--accent-glow); transform: translateY(-2px); }
.parlay-tip-row > * { position: relative; z-index: 1; }
.parlay-topbar { display: flex; justify-content: space-between; align-items: center; gap: 0.75em; margin-bottom: 1em; padding-bottom: 0.75em; border-bottom: 1px solid var(--line); }
.parlay-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.sgp-badge { background: var(--accent-grad); color: #fff; padding: 0.25em 0.6em; border-radius: 0.75em; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 0 14px -2px var(--accent-glow); }
.parlay-timeline { position: relative; margin: 0 0 1em 0; }
.timeline-line { position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--line-strong); }
.parlay-legs { margin-left: 1.25em; }
.parlay-leg-item { position: relative; padding: 0.75em 0; border-bottom: 1px dashed var(--line); }
.parlay-leg-item:last-child { border-bottom: none; }
.leg-item-dot { position: absolute; left: -1.75em; top: 1em; width: 12px; height: 12px; background: var(--accent-grad); border-radius: 50%; border: 2px solid var(--panel-2); box-shadow: 0 0 10px -1px var(--accent-glow); z-index: 2; }
.leg-info strong { display: block; margin-bottom: 0.25em; font-size: 0.9em; color: var(--ink); }
.leg-odds-stats { display: flex; gap: 1em; align-items: center; margin-top: 0.5em; font-family: var(--mono); font-size: 0.82em; flex-wrap: wrap; color: var(--ink-dim); }
.stat-item { display: flex; align-items: center; gap: 0.4em; }
/* money green on BOTH prob + edge — .parlay-tip-row scope out-specifies EPL's blue .probability-data .stat-value (equal specificity, Master loads later) */
.parlay-tip-row .stat-value { color: var(--model); font-weight: 800; }
.leg-icon { color: var(--ink-faint); font-size: 0.75em; }
/* uniform legs: hide per-leg stat labels (NBA/EPL omit them; policy = hide everywhere) */
.parlay-tip-row .stat-label { display: none; }

/* ---- SHARED ACCORDION (used by BOTH prop-bets and parlays — one definition) ---- */
.tip-reasoning, .npp-reasoning, .parlay-reasoning { margin-top: 1em; padding-top: 1em; border-top: 1px solid var(--line); }
.reason-toggle, .npp-reason-toggle {
    display: flex; justify-content: space-between; align-items: center; gap: 0.75em;
    padding: 0.7em 0.85em; min-height: 44px;
    background: var(--panel-2); border-radius: 8px; cursor: pointer;
    font-weight: 700; font-size: 0.9em; color: var(--ink);
    border: 1px solid var(--line); width: 100%;
    transition: border-color 0.15s, background 0.15s;
}
.reason-toggle:hover, .npp-reason-toggle:hover { background: rgba(70,140,255,0.1); border-color: var(--action); }
.reason-toggle .chev { transition: transform 0.2s ease; }
.reason-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.reason-text, .npp-reason-text {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
    padding: 0 0.75em; font-size: 0.9em; line-height: 1.65; color: var(--ink-dim);
}
.reason-text.expanded, .npp-reason-text.expanded { max-height: 4000px; padding: 0.75em; }

/* ---- SHARED UNLOCK CTA (picks .apk-unlock-container / npk+legacy .unlock-bet-container across all types) ---- */
.apk-unlock-container, .unlock-bet-container { text-align: center; padding: 6px 0; }
.apk-btn-unlock, .btn-unlock {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    min-height: 44px; padding: 0.7em 1.25em; box-sizing: border-box;
    background: var(--accent-grad); color: #fff; border: none; border-radius: 8px;
    text-decoration: none; font-family: var(--ui); font-weight: 700; font-size: 0.9em; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 24px -8px var(--accent-glow);
    transition: filter 0.18s, transform 0.18s;
}
.apk-btn-unlock:hover, .btn-unlock:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .tip-row.player-prop-row, .npp-tip-row, .parlay-tip-row, .bb-tip-card, .tip-row:not(.player-prop-row),
    .reason-text, .npp-reason-text, .btn-unlock, .apk-btn-unlock { transition: none !important; }
    .tip-row.player-prop-row:hover, .npp-tip-row:hover, .parlay-tip-row:hover,
    .bb-tip-card:hover, .tip-row:not(.player-prop-row):hover { transform: none !important; }
}

/* NEEDS-MARKUP (CSS-grouping cannot fully equalize these — flagged, not faked):
   1. PICKS · NBA .npk-vs renders the literal text 'VS' (AFL/legacy render 'vs.'); pill styling is neutralized above but the text string itself is markup, not CSS.
   2. BEST-BETS · AFL markup (.bb-tip-card > .bb-stats-block > .bb-stat-cell w/ two sibling spans + a .bb-selection-tag 'Recommended Pick') differs from legacy (.tip-row > .player-section/.stats-body > span>strong+span, no selection tag). Card look is matched via the legacy reproduction rules, but AFL's 'Recommended Pick' tag has no legacy equivalent and legacy cards have no equivalent tag element.
   3. PARLAYS · topbar is element-different: AFL is flat (no .parlay-logos wrapper, no .parlay-time); NBA/MLB/EPL add a two-column logo/time split + .parlay-time + per-leg .bookmaker-leg-logo. AFL will never render a game time or bookmaker logo because those elements are absent from its markup.
   4. PARLAYS · unlock button border-radius normalized to 8px for cross-page-type consistency; AFL parlays natively uses a 2em pill (.btn-unlock). Change markup/per-page CSS if the pill must be preserved on parlays.
   5. PROP-BETS · NBA drops the .player-info wrapper (name = .npp-player-name directly); handled via the .npp-player-name selector, but a .player-info descendant rule has no match in NBA by design. */
        /* ==== END tip-card consistency system ==== */

/* ==== [2026-08-18] MOBILE CONTENT-FIRST — league page families ====
   MEASURED (live, 375x812, /mlb/picks): screen one held ZERO picks. Stack was
   game-chips -> header -> trust strip -> breadcrumb -> 14-league nav pills (115px)
   -> Popular Pages bar (44px) -> H1 -> intro paragraph (130px) -> 3 CTA buttons
   (156px), and the first actual BET landed at y=1238 — 1.5 screens of chrome
   before a single thing the visitor came for. GA4 (7d, humans): /mlb/picks is the
   #1 organic lander (45 users, 82% engaged) yet 55-57% leave in the 0-25% band and
   bb_sec_view says more users saw the PRO banner and the Popular-Pages widget than
   ever saw the picks section. Law 2 of the attention doctrine: content beats chrome.

   Fix is display-only and additive: every element stays in the DOM in source order
   (no SEO/markup change, same precedent as the 2026-08-16 PopularityWidget collapse) —
   the wrapper simply becomes a flex column on phones so the two navigation blocks
   render AFTER the picks instead of in front of them, the SEO intro clamps to two
   lines, and the now-redundant "Jump to today's picks" button (the picks are the very
   next thing) is dropped. Measured after: picks section 862 -> 473, first bet
   1238 -> 750. Desktop is untouched (rules live inside the 850px query).
   `body ` prefix keeps specificity above each page's own .xxx-wrapper rule regardless
   of stylesheet order. To revert: delete this block. */
@media (max-width: 850px) {
    /* Selected STRUCTURALLY, not by prefix: the page wrapper is whichever element holds the
       shared league nav as a direct child. Prefixes differ per sport AND per page type
       (apk-/app-/apl-/bb-/aod-/npp-/mlp-/mbo-...), so an enumerated list silently misses
       pages; :has() cannot. It also cannot touch .ad-wrapper or the modal's .price-wrapper,
       which have no .bbn-wrap child. Browsers without :has() simply keep today's layout. */
    body [class$="-wrapper"]:has(> .bbn-wrap) { display: flex; flex-direction: column; }
    /* the 14-league pill nav (115px) and the Popular Pages bar (44px) render after the board */
    body [class$="-wrapper"]:has(> .bbn-wrap) > .bbn-wrap { order: 60; }
    body [class$="-wrapper"]:has(> .bbn-wrap) > [class*="-pop-wrap"] { order: 61; }
    /* SEO intro stays in the DOM, clamped so it cannot push the board off-screen. Scoped to a
       direct child of the hero so no bet's reasoning text can ever be caught by it. */
    body [class$="-wrapper"]:has(> .bbn-wrap) > [class$="-hero"] > [class$="-desc"],
    body [class$="-wrapper"]:has(> .bbn-wrap) > [class$="-hero"] > [class$="-lede"] {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* redundant once the picks are the next block on screen */
    body .apk-decision .apk-jump { display: none; }

    /* ---- MATCHUP pages (mu-wrapper) — worst template on the estate: 173 users/7d at 93%
       early-exit, first priced pick buried at y=2595 (3.2 screens) behind a 787px hero.
       The page has exactly one job: what is the call on THIS game. #pnlAnswerFirst already
       holds that answer ("the model's one call for this game") — it just sat below the
       team-logo showpiece. Answer moves to the top; the calibrated model-vs-market table
       (MODEL PROB · FAIR ODDS · EDGE — pure jargon by the ICP law) drops below the useful
       sections; the two graded-counts stack becomes one row and the hero blurb clamps.
       MEASURED: answer 1035 -> 234, hero 787 -> 662, first odds 2595 -> 2517. */
    body .mu-wrapper > div:has(> .mu-hero) { display: flex; flex-direction: column; }
    body .mu-wrapper > div:has(> .mu-hero) > #pnlAnswerFirst { order: -1; }
    body .mu-wrapper > div:has(> .mu-hero) > #pnlCalibSection { order: 40; }
    body .mu-hero .mu-pick-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    body .mu-hero .mu-hero-sub {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* ---- TEAM pages (tp-wrapper) — 62 users/7d at 72% early-exit, with today's actual bet
       at y=1341 behind an 878px hero (logo + blurb + proof + next-game + record block).
       A visitor searching "<team> odds" wants this team's bet, so the pick section leads.
       MEASURED: #pnlGamePickSection 1341 -> 218, hero to 1066, no overflow. */
    body #pnlMain:has(> .tp-hero) { display: flex; flex-direction: column; }
    body #pnlMain:has(> .tp-hero) > #pnlGamePickSection { order: -1; }
}

/* [2026-08-18] ICP JARGON — the pick card's third stat. Card labels across the 20 league
   picks templates now read "Chance to win" and "Best price" (markup pass, same wave), but
   "Edge 33.7%" is jargon that cannot be relabelled into plain English — it is the exact
   term the validated buyer asked about ("what is an edge?"). It stays in the DOM and stays
   visible to MEMBERS (who paid for the depth); guests simply do not see it in the reading
   path. Guest/member split uses the body.subscribed class Site.Master already stamps from
   BbGate.IsPaidLevel (line ~2215). Applies at all widths — jargon is jargon on desktop too.
   NOTE: prop-bets pages carry a separate "Edge:" span (<span class="edge">) on ~62 markup
   sites incl. FAQ/odds; deliberately NOT swept here without a live check — next wave. */
body:not(.subscribed) .apk-detail-item.is-edge { display: none; }
/* ==== END mobile content-first ==== */
    

/* ==== block boundary (source order preserved) ==== */


        /* Desktop inline search (shown at >=1200px alongside nav-links) */
        .bb-search{position:relative;display:none;align-items:center;}
        /* 1420, not 1200: the inline input is 184px and the rest of the nav already needs the full
           content box between 1200 and 1420 (see the squish-fix note in the header CSS above). */
        @media(min-width:1420px){.bb-search{display:flex;}}
        .bb-search .bb-si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none;display:inline-flex;}
        .bb-search input{width:184px;height:40px;background:var(--panel-2);border:1px solid var(--line-strong);border-radius:10px;color:var(--ink);font-family:var(--ui);font-size:.86rem;padding:0 12px 0 34px;transition:width .18s ease,border-color .18s ease,background .18s ease;outline:none;}
        .bb-search input::placeholder{color:var(--ink-faint);}
        .bb-search input:focus{width:236px;border-color:var(--action);background:var(--panel);}
        /* Mobile trigger icon (shown < 1200px, matches theme-toggle sizing) */
        .bb-search-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--toggle-bd);background:transparent;color:var(--ink-dim);cursor:pointer;flex:none;transition:.18s;}
        .bb-search-btn:hover{color:var(--ink);border-color:var(--line-strong);}
        @media(min-width:1420px){.bb-search-btn{display:none;}}
        /* The Session["DiscordNudge"] bar adds a ~140px "Link Discord" button, which overflows even
           at 1440px (measured -37px, compressing the wordmark). When it is present, yield the inline
           search instead — the icon opens the identical overlay. :has() matches the existing
           body:not(:has(.bot-nav)) pattern already used in this file. */
        @media(min-width:1420px){
          .nav-actions:has(.keep-mobile) .bb-search{display:none;}
          .nav-actions:has(.keep-mobile) .bb-search-btn{display:inline-flex;}
        }
        /* Shared results dropdown (desktop popover) */
        .bb-sr{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:82vw;max-height:min(60vh,440px);overflow-y:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-card);z-index:9600;padding:6px;display:none;-webkit-overflow-scrolling:touch;}
        .bb-sr.open{display:block;}
        .bb-sr-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink);cursor:pointer;}
        .bb-sr-item:hover,.bb-sr-item.active{background:var(--panel-2);}
        .bb-sr-type{font:700 10px/1 var(--mono);letter-spacing:.04em;color:var(--ink-faint);width:14px;text-align:center;flex:none;}
        .bb-sr-name{font-family:var(--ui);font-weight:600;font-size:.9rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
        .bb-sr-chip{font:700 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim);white-space:nowrap;flex:none;}
        .bb-sr-empty{padding:16px;text-align:center;color:var(--ink-faint);font-family:var(--ui);font-size:.85rem;}
        /* Mobile full-width overlay (thumb-reach input at top) */
        .bb-ovl{position:fixed;inset:0;z-index:10001;background:var(--void);display:none;flex-direction:column;}
        .bb-ovl.open{display:flex;}
        .bb-ovl-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--chrome-bg);}
        .bb-ovl-top .bb-si{color:var(--ink-faint);display:inline-flex;flex:none;}
        .bb-ovl-top input{flex:1;min-width:0;height:46px;background:var(--panel-2);border:1px solid var(--line-strong);border-radius:12px;color:var(--ink);font-family:var(--ui);font-size:1rem;padding:0 14px;outline:none;}
        .bb-ovl-top input:focus{border-color:var(--action);}
        .bb-ovl-top input::placeholder{color:var(--ink-faint);}
        .bb-ovl-close{background:transparent;border:none;color:var(--ink-dim);font-family:var(--ui);font-size:.9rem;font-weight:700;cursor:pointer;padding:8px 6px;flex:none;}
        .bb-ovl-results{flex:1;overflow-y:auto;padding:8px 12px;-webkit-overflow-scrolling:touch;}
        .bb-ovl-results .bb-sr-item{padding:15px 10px;border-bottom:1px solid var(--line);border-radius:0;}
        .bb-ovl-results .bb-sr-name{font-size:1rem;}
    

/* ==== block boundary (source order preserved) ==== */


    .bb-more-hidden { display: none !important; }
    .bb-showmore-btn {
        display: block; width: 100%; padding: 12px 16px; margin: 8px 0 0;
        background: transparent; border: none;
        border-top: 1px solid var(--line, rgba(255,255,255,0.09));
        color: var(--model, var(--accent-ink, #46a0ff));
        font-family: var(--mono, ui-monospace, monospace);
        font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
        text-transform: uppercase; cursor: pointer; text-align: center;
    }
    .bb-showmore-btn:hover { background: rgba(70,140,255,0.09); }
    /* card-list "show more" spans the full grid width so it doesn't sit in one grid cell */
    .bb-showmore-cards { grid-column: 1 / -1; border: 1px dashed var(--line, rgba(255,255,255,0.12)); border-radius: 10px; margin: 4px 0 10px; }