/* extracted verbatim 2026-08-28 estate speed sweep. New content = new filename. */

    /* ===========================================================
       NFL Betting hub — money-picks archetype.
       Uses the global Site.Master design tokens directly:
       --void --panel --panel-2 --line --line-strong
       --ink --ink-dim --ink-faint
       --accent-grad --accent-glow --accent-ink --card-edge
       --action-hi (accent-as-text) --model (money green) --book (loss)
       --display --ui --mono
       =========================================================== */

    .nfl { width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 5% 8px;
           box-sizing: border-box; font-family: var(--ui);
           content-visibility: auto; contain-intrinsic-size: 1px 1100px; }

    .nfl a { color: inherit; text-decoration: none; transition: color .18s ease, border-color .18s ease; }

    .mono { font-family: var(--mono); }
    .edge { color: var(--model); font-family: var(--mono); font-weight: 700; }

    /* ---- breadcrumb ---- */
    .nfl-crumbs { margin-bottom: 18px; font-family: var(--mono); font-size: .72rem;
                  color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; }
    .nfl-crumbs a:hover { color: var(--action-hi); }
    .nfl-crumbs .here { color: var(--action-hi); }

    /* ---- eyebrow / labels ---- */
    .bb-eyebrow { display: inline-flex; align-items: center; gap: 7px;
                  font-family: var(--mono); font-size: .72rem; font-weight: 600;
                  letter-spacing: .12em; text-transform: uppercase; color: var(--action-hi); }

    /* ---- hero ---- */
    .nfl-hero { margin-bottom: 30px; }
    .nfl-hero .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .tag { display: inline-flex; align-items: center; gap: 6px;
           font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .06em;
           text-transform: uppercase; color: var(--accent-ink);
           background: rgba(70,140,255,.08); border: 1px solid var(--card-edge);
           padding: 5px 10px; border-radius: 999px; }
    .tag i { color: var(--action-hi); }
    .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--model);
                box-shadow: 0 0 8px var(--model); display: inline-block; }

    .nfl-h1 { font-family: var(--display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800;
              letter-spacing: -.03em; line-height: 1.04; margin: 0 0 14px; color: var(--ink); }
    .nfl-sub { font-size: 1.08rem; line-height: 1.6; color: var(--ink-dim); max-width: 720px; margin: 0; }
    .nfl-sub a { color: var(--action-hi); }
    .nfl-sub a:hover { color: var(--accent-ink); }
    .nfl-sub strong { color: var(--ink); }

    /* ---- proof strip → /results ---- */
    .bb-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
                margin: 22px 0 4px; padding: 16px 20px; border-radius: 14px;
                background: var(--panel); border: 1px solid var(--card-edge);
                box-shadow: 0 18px 40px -26px var(--accent-glow); }
    .bb-proof .stat { display: flex; flex-direction: column; gap: 2px; }
    .bb-proof .num { font-family: var(--mono); font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--ink); }
    .bb-proof .num.pos { color: var(--model); }
    .bb-proof .lbl { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
                     text-transform: uppercase; color: var(--ink-faint); }
    .bb-proof .verify { margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
                        font-weight: 700; font-size: .9rem; color: var(--action-hi); }
    .bb-proof .verify:hover { color: var(--accent-ink); }
    .bb-proof .verify i { font-size: .8rem; }

    /* ---- generic ambient-lift card recipe ---- */
    .lift { position: relative; background: var(--panel); border: 1px solid var(--card-edge);
            border-radius: 16px; box-shadow: 0 20px 42px -24px var(--accent-glow); overflow: hidden; }
    .lift::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                   background: radial-gradient(120% 80% at 50% -20%, rgba(70,140,255,.10), transparent 60%); }

    /* ---- section heads ---- */
    .nfl-band { margin: 44px 0 18px; }
    .nfl-band h2 { font-family: var(--display); font-size: 1.55rem; font-weight: 800;
                   letter-spacing: -.02em; margin: 8px 0 4px; color: var(--ink); }
    .nfl-band p { margin: 0; color: var(--ink-dim); font-size: .98rem; }

    /* ---- quick market cards ---- */
    .market-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
    .market-card { position: relative; display: flex; flex-direction: column; gap: 8px;
                   padding: 18px; min-height: 44px;
                   background: var(--panel); border: 1px solid var(--card-edge); border-radius: 14px;
                   box-shadow: 0 16px 36px -26px var(--accent-glow);
                   transition: transform .16s ease, border-color .16s ease; }
    .market-card::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
                          background: radial-gradient(120% 70% at 50% -30%, rgba(70,140,255,.10), transparent 60%); }
    .market-card:hover { transform: translateY(-3px); border-color: var(--accent-glow); }
    .market-card .kicker { position: relative; z-index: 1; font-family: var(--mono); font-size: .68rem;
                           letter-spacing: .1em; text-transform: uppercase; color: var(--action-hi); }
    .market-card h3 { position: relative; z-index: 1; font-family: var(--display); font-size: 1.12rem;
                      font-weight: 800; margin: 0; color: var(--ink); }
    .market-card p { position: relative; z-index: 1; margin: 0; color: var(--ink-dim); font-size: .9rem; line-height: 1.55; }
    .market-card .go { position: relative; z-index: 1; margin-top: auto; font-weight: 700; font-size: .85rem;
                       color: var(--action-hi); display: inline-flex; align-items: center; gap: 6px; }
    .market-card:hover .go { color: var(--accent-ink); }

    /* ---- picks grids (data-bound repeaters) ---- */
    #new-articles-grid, #articles-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }

    .article-card { position: relative; display: flex; flex-direction: column; height: 100%;
                    background: var(--panel); border: 1px solid var(--card-edge); border-radius: 16px;
                    padding: 18px; overflow: hidden;
                    box-shadow: 0 20px 42px -24px var(--accent-glow);
                    transition: transform .18s ease, border-color .18s ease;
                    content-visibility: auto; contain-intrinsic-size: 1px 460px; }
    .article-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                           background: radial-gradient(120% 60% at 50% -20%, rgba(70,140,255,.10), transparent 55%); }
    .article-card:hover { transform: translateY(-3px); border-color: var(--accent-glow); }
    .article-card > * { position: relative; z-index: 1; }
    .article-image { width: 100%; height: 184px; background-size: cover; background-position: center;
                     border-radius: 11px; margin-bottom: 14px; display: block; will-change: transform; }
    .article-meta { display: flex; justify-content: space-between; align-items: center;
                    margin-bottom: 10px; }
    .article-category { font-family: var(--mono); font-weight: 700; font-size: .72rem;
                        letter-spacing: .06em; text-transform: uppercase; color: var(--action-hi); }
    .article-time { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }
    .article-title { font-family: var(--display); font-size: 1.08rem; font-weight: 700; line-height: 1.35;
                     margin: 0; color: var(--ink); }
    .article-title a:hover { color: var(--action-hi); }

    /* PRO badge on gated cards (locked-tease) */
    .pro-flag { position: absolute; top: 12px; left: 12px; z-index: 3;
                display: inline-flex; align-items: center; gap: 5px;
                font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .08em;
                text-transform: uppercase; color: #fff;
                background: var(--accent-grad); padding: 4px 9px; border-radius: 999px;
                box-shadow: 0 6px 16px -6px var(--accent-glow); }

    /* ---- primary conversion block (paywall) ---- */
    .upsell { position: relative; overflow: hidden; text-align: center;
              background: var(--panel); border: 1px solid var(--card-edge); border-radius: 18px;
              padding: 36px 28px; margin: 34px 0;
              box-shadow: 0 26px 60px -30px var(--accent-glow); }
    .upsell::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                     background: radial-gradient(110% 80% at 50% -10%, rgba(70,140,255,.14), transparent 60%); }
    .upsell > * { position: relative; z-index: 1; }
    .bb-lock { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
               display: grid; place-items: center; color: var(--accent-ink);
               background: var(--panel-2); border: 1px solid var(--card-edge);
               box-shadow: 0 0 0 4px rgba(70,140,255,.10), 0 0 22px -4px var(--accent-glow); font-size: 1.2rem; }
    .upsell h2, .upsell h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
                             margin: 0 0 10px; color: var(--ink); }
    .upsell h2 { font-size: 1.7rem; }
    .upsell p { margin: 0 auto 22px; max-width: 540px; color: var(--ink-dim); font-size: 1rem; line-height: 1.6; }
    .upsell .reassure { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em;
                        color: var(--ink-faint); margin: 16px auto 0; }

    /* gradient CTA (shared look for <button> and asp:Button) */
    .btn-grad { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
                background: var(--accent-grad); color: #fff; border: none; cursor: pointer;
                font-family: var(--ui); font-weight: 700; font-size: 1rem; line-height: 1;
                padding: 15px 30px; min-height: 48px; border-radius: 12px;
                box-shadow: 0 14px 30px -10px var(--accent-glow);
                transition: transform .15s ease, box-shadow .15s ease; }
    .btn-grad:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -12px var(--accent-glow); }
    .btn-grad:active { transform: translateY(0); }

    /* ---- SEO / method essay (demoted) ---- */
    .nfl-essay { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line);
                 color: var(--ink-dim); }
    .nfl-essay h2 { font-family: var(--display); color: var(--ink); margin-top: 38px;
                    font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
    .nfl-essay h3 { font-family: var(--display); color: var(--ink); margin-top: 24px;
                    font-size: 1.15rem; font-weight: 700; }
    .nfl-essay p { margin-bottom: 15px; line-height: 1.75; }
    .nfl-essay ol, .nfl-essay ul { padding-left: 22px; margin-bottom: 16px; line-height: 1.8; }
    .nfl-essay li { margin-bottom: 8px; }
    .nfl-essay strong { color: var(--ink); }
    .nfl-essay a { color: var(--action-hi); border-bottom: 1px solid rgba(70,140,255,.3); }
    .nfl-essay a:hover { color: var(--accent-ink); }

    .toc { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 14px 0 8px; }
    .toc a { display: block; text-align: center; padding: 11px 12px; border-radius: 11px;
             border: 1px solid var(--line); background: var(--panel-2);
             font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .04em;
             text-transform: uppercase; color: var(--ink-dim); }
    .toc a:hover { color: var(--ink); border-color: var(--card-edge); }

    .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px;
                  background: var(--panel); margin: 16px 0 20px; }
    table.seo-table { width: 100%; border-collapse: collapse; min-width: 720px; }
    .seo-table th, .seo-table td { padding: 13px 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
    .seo-table th { text-align: left; font-family: var(--mono); color: var(--ink); font-size: .72rem;
                    letter-spacing: .08em; text-transform: uppercase; background: var(--panel-2); }
    .seo-table td { color: var(--ink-dim); line-height: 1.7; }
    .seo-table td strong { color: var(--ink); }
    .seo-table tr:last-child td { border-bottom: none; }

    .note-box { border: 1px solid var(--card-edge); background: rgba(70,140,255,.06);
                border-radius: 14px; padding: 15px 16px; margin: 18px 0; color: var(--ink-dim); line-height: 1.65; }
    .note-box strong { color: var(--action-hi); }

    /* FAQ native <details> */
    .faq { margin-top: 12px; }
    details.faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
                       padding: 14px 16px; margin: 10px 0; }
    details.faq-item[open] { border-color: var(--card-edge); }
    details.faq-item summary { cursor: pointer; font-family: var(--display); font-weight: 700;
                               color: var(--ink); list-style: none; outline: none;
                               display: flex; justify-content: space-between; align-items: center; gap: 14px; }
    details.faq-item summary::-webkit-details-marker { display: none; }
    details.faq-item summary::after { content: '+'; font-family: var(--mono); color: var(--action-hi); flex-shrink: 0; }
    details.faq-item[open] summary::after { content: '\2212'; }
    details.faq-item p { margin: 12px 0 0; color: var(--ink-dim); line-height: 1.7; }

    /* ---- footer email signup (forward path) ---- */
    .full-width-email-signup { position: relative; overflow: hidden;
        background: var(--panel); border-top: 1px solid var(--line); padding: 64px 5%; margin-top: 72px; }
    .full-width-email-signup::after { content: ""; position: absolute; inset: 0; pointer-events: none;
        background: radial-gradient(80% 120% at 50% 0%, rgba(70,140,255,.08), transparent 60%); }
    .signup-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; text-align: center; }
    .signup-inner h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 800;
                       letter-spacing: -.02em; color: var(--ink); margin: 0 0 10px; }
    .signup-inner > p { color: var(--ink-dim); margin: 0 0 22px; line-height: 1.6; }
    .signup-inner > p strong { color: var(--model); font-family: var(--mono); }
    .email-input { background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--ink);
                   font-family: var(--ui); font-size: 1rem; padding: 14px 16px; border-radius: 11px;
                   width: 100%; box-sizing: border-box; min-height: 48px; }
    .email-input::placeholder { color: var(--ink-faint); }
    .email-input:focus { outline: none; border-color: var(--action-hi); box-shadow: 0 0 0 3px rgba(70,140,255,.18); }
    .signup-button { background: var(--accent-grad); color: #fff; font-family: var(--ui); font-weight: 700;
                     font-size: 1rem; padding: 14px; border: none; border-radius: 11px; width: 100%;
                     margin-top: 11px; min-height: 48px; cursor: pointer;
                     box-shadow: 0 14px 30px -10px var(--accent-glow); transition: transform .15s ease; }
    .signup-button:hover { transform: translateY(-2px); }
    .fineprint { font-size: .74rem; color: var(--ink-faint); margin-top: 20px; line-height: 1.6; }
    .fineprint a, .signup-inner a { color: var(--action-hi); }

    /* ---- accessibility ---- */
    .nfl a:focus-visible, .btn-grad:focus-visible, .signup-button:focus-visible,
    .email-input:focus-visible, .toc a:focus-visible, summary:focus-visible {
        outline: 2px solid var(--action-hi); outline-offset: 2px; border-radius: 8px; }

    @media (prefers-reduced-motion: reduce) {
        .nfl *, .full-width-email-signup * { transition: none !important; }
        .market-card:hover, .article-card:hover, .btn-grad:hover, .signup-button:hover { transform: none; }
    }

    @media (max-width: 920px) {
        .market-grid { grid-template-columns: 1fr; }
        .toc { grid-template-columns: repeat(2, minmax(0,1fr)); }
        .bb-proof .verify { margin-left: 0; }
    }
    @media (max-width: 768px) {
        #new-articles-grid, #articles-grid { grid-template-columns: 1fr; gap: 14px; }
        .upsell { padding: 30px 20px; }
    }