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

        /* ============================================================
           ResponsibleGambling.aspx — LEGAL archetype
           Help-first, scannable, calm. Built on the global Site.Master tokens.
           Order by purpose: header -> get-help band (highest value, above fold)
           -> sticky nav + legal article -> route-forward CTA.
           ============================================================ */

        .rg-page {
            width: 100%; max-width: 1040px; margin: 0 auto;
            padding: 56px 24px 96px; box-sizing: border-box;
            content-visibility: auto; contain: content;
            color: var(--ink); font-family: var(--ui); line-height: 1.7;
        }

        /* ---------- Header ---------- */
        .rg-head { max-width: 780px; }
        .rg-eyebrow {
            font-family: var(--mono); font-size: .72rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .18em;
            color: var(--action-hi); margin: 0 0 16px;
            display: inline-flex; align-items: center; gap: 8px;
        }
        .rg-eyebrow::before {
            content: ""; width: 18px; height: 1px; background: var(--action-hi);
            display: inline-block; opacity: .6;
        }
        .rg-head h1 {
            font-family: var(--display); font-weight: 800;
            font-size: clamp(2.1rem, 5.2vw, 3.2rem); line-height: 1.06;
            letter-spacing: -.025em; color: var(--ink); margin: 0 0 16px;
        }
        .rg-lede {
            font-size: clamp(1.02rem, 2vw, 1.18rem); line-height: 1.6;
            color: var(--ink-dim); margin: 0 0 22px; max-width: 700px;
        }

        /* at-a-glance fact chips */
        .rg-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 22px; }
        .rg-chip {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--panel-2); border: 1px solid var(--line);
            border-radius: 999px; padding: 7px 14px;
            font-family: var(--mono); font-size: .76rem; font-weight: 700;
            letter-spacing: .03em; color: var(--ink-dim);
        }
        .rg-chip i { color: var(--action-hi); font-size: .85rem; }

        .rg-meta {
            display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
            padding: 14px 0 0; margin: 0;
            border-top: 1px solid var(--line);
            font-family: var(--mono); font-size: .82rem; color: var(--ink-faint);
        }
        .rg-meta .rg-meta-item { display: inline-flex; align-items: center; gap: 7px; }
        .rg-meta i { color: var(--action-hi); opacity: .85; }
        .rg-meta strong { color: var(--ink-dim); font-weight: 700; }

        /* ---------- Get-help band (promoted above the fold) ---------- */
        .rg-helpband {
            position: relative; overflow: hidden;
            background: var(--panel); border: 1px solid var(--card-edge);
            border-radius: 18px; padding: 28px 30px; margin: 32px 0 0;
            box-shadow: 0 24px 48px -28px var(--accent-glow);
        }
        .rg-helpband::after {
            content: ""; position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(120% 70% at 0% 0%, rgba(70,140,255,.09), transparent 60%);
        }
        .rg-helpband > * { position: relative; z-index: 1; }
        .rg-helpband .rg-help-kicker {
            font-family: var(--mono); font-size: .7rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .14em;
            color: var(--action-hi); margin: 0 0 6px;
            display: inline-flex; align-items: center; gap: 8px;
        }
        .rg-helpband h2 {
            font-family: var(--display); font-weight: 800; font-size: 1.42rem;
            color: var(--ink); margin: 0 0 6px; letter-spacing: -.015em;
        }
        .rg-helpband .rg-help-sub {
            color: var(--ink-dim); font-size: .98rem; margin: 0 0 18px; max-width: 640px;
        }

        /* ---------- Help resources: structured action cards ---------- */
        .rg-resources {
            display: grid; gap: 12px; margin: 0;
            grid-template-columns: repeat(3, 1fr);
        }
        .rg-resource {
            display: flex; flex-direction: column; gap: 10px;
            background: var(--panel-2); border: 1px solid var(--line);
            border-radius: 14px; padding: 16px 16px 14px; min-height: 44px;
            text-decoration: none;
            transition: border-color .15s ease, transform .15s ease, background .15s ease;
        }
        .rg-resource:hover, .rg-resource:focus-visible {
            border-color: var(--card-edge); background: var(--panel);
            transform: translateY(-2px); color: inherit;
        }
        .rg-resource .rg-res-top { display: flex; align-items: center; gap: 10px; }
        .rg-resource .rg-flag {
            font-family: var(--mono); font-size: .7rem; font-weight: 700;
            letter-spacing: .08em; color: var(--action-hi);
            border: 1px solid var(--card-edge); border-radius: 7px;
            padding: 4px 8px; flex: 0 0 auto;
        }
        .rg-resource .rg-res-name { color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.3; }
        .rg-resource .rg-res-go {
            color: var(--ink-faint); font-size: .82rem; font-family: var(--mono);
            display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
        }
        .rg-resource:hover .rg-res-go, .rg-resource:focus-visible .rg-res-go { color: var(--action-hi); }
        .rg-other {
            font-size: .9rem; color: var(--ink-faint); margin: 16px 0 0;
        }

        /* ---------- Layout: nav rail + article ---------- */
        .rg-layout {
            display: grid; grid-template-columns: 240px 1fr;
            gap: 40px; align-items: start; margin-top: 36px;
        }

        /* ---------- Jump nav (sticky rail) ---------- */
        .rg-toc {
            position: sticky; top: 96px;
            background: var(--panel); border: 1px solid var(--line);
            border-radius: 14px; padding: 22px 20px;
        }
        .rg-toc .rg-toc-title {
            display: block; font-family: var(--mono); font-size: .68rem;
            font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
            color: var(--ink-faint); margin: 0 0 14px;
        }
        .rg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
        .rg-toc li { margin: 0; }
        .rg-toc a {
            counter-increment: toc;
            display: flex; align-items: center; gap: 11px;
            padding: 9px 10px; border-radius: 9px; min-height: 44px;
            box-sizing: border-box;
            color: var(--ink-dim); text-decoration: none;
            font-size: .92rem; line-height: 1.35;
            transition: background .15s ease, color .15s ease;
        }
        .rg-toc a::before {
            content: counter(toc, decimal-leading-zero);
            font-family: var(--mono); font-size: .74rem; font-weight: 700;
            color: var(--action-hi); flex: 0 0 auto;
        }
        .rg-toc a:hover, .rg-toc a:focus-visible {
            background: var(--panel-2); color: var(--ink);
        }

        /* ---------- Article ---------- */
        .rg-article { min-width: 0; }
        .rg-section {
            position: relative;
            background: var(--panel);
            border: 1px solid var(--card-edge);
            border-radius: 16px;
            padding: 30px 34px;
            margin: 0 0 22px;
            box-shadow: 0 20px 42px -28px var(--accent-glow);
            scroll-margin-top: 96px;
            overflow: hidden;
        }
        .rg-section::after {
            content: ""; position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(120% 60% at 0% 0%, rgba(70,140,255,.07), transparent 60%);
        }
        .rg-section > * { position: relative; z-index: 1; }

        .rg-section h2 {
            font-family: var(--display); font-weight: 700;
            font-size: 1.32rem; line-height: 1.25; color: var(--ink);
            margin: 0 0 14px; padding-bottom: 14px;
            border-bottom: 1px solid var(--line);
            display: flex; align-items: center; gap: 12px; letter-spacing: -.01em;
        }
        .rg-section h2 .rg-num {
            font-family: var(--mono); font-size: .82rem; font-weight: 700;
            color: var(--action-hi);
            background: var(--card-edge); border: 1px solid var(--card-edge);
            border-radius: 8px; padding: 4px 9px; flex: 0 0 auto; letter-spacing: 0;
        }
        .rg-section p { margin: 0 0 16px; color: var(--ink-dim); font-size: 1rem; }
        .rg-section p:last-child { margin-bottom: 0; }
        .rg-section strong { color: var(--ink); font-weight: 700; }

        .rg-section ul { margin: 4px 0 16px; padding: 0; list-style: none; }
        .rg-section ul li {
            position: relative; padding: 0 0 0 26px; margin: 0 0 12px;
            color: var(--ink-dim); font-size: 1rem; line-height: 1.6;
        }
        .rg-section ul li::before {
            content: ""; position: absolute; left: 4px; top: .62em;
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--action-hi); box-shadow: 0 0 8px var(--accent-glow);
        }
        .rg-section ul li:last-child { margin-bottom: 0; }
        .rg-section ul li strong { color: var(--ink); }

        .rg-section a {
            color: var(--action-hi); text-decoration: none;
            border-bottom: 1px solid rgba(96,165,250,.32);
            transition: border-color .15s ease, color .15s ease;
        }
        .rg-section a:hover, .rg-section a:focus-visible {
            color: var(--accent-ink); border-bottom-color: var(--action-hi);
        }

        /* ---------- CTA ---------- */
        .rg-cta {
            position: relative; overflow: hidden;
            background: var(--panel);
            border: 1px solid var(--card-edge); border-radius: 18px;
            padding: 40px 34px; margin-top: 44px; text-align: center;
            box-shadow: 0 28px 56px -30px var(--accent-glow);
        }
        .rg-cta::after {
            content: ""; position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(110% 70% at 50% 0%, rgba(70,140,255,.10), transparent 62%);
        }
        .rg-cta > * { position: relative; z-index: 1; }
        .rg-cta h2 {
            font-family: var(--display); font-weight: 800;
            font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--ink);
            margin: 0 0 12px; letter-spacing: -.02em;
        }
        .rg-cta p { color: var(--ink-dim); max-width: 560px; margin: 0 auto 26px; font-size: 1.02rem; }
        .rg-cta-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            background: var(--accent-grad); color: #fff !important;
            padding: 15px 32px; border-radius: 999px; min-height: 44px;
            font-family: var(--ui); font-weight: 700; font-size: 1rem;
            text-decoration: none; border: none;
            box-shadow: 0 14px 30px -10px var(--accent-glow);
            transition: transform .18s ease, box-shadow .18s ease;
        }
        .rg-cta-btn:hover, .rg-cta-btn:focus-visible {
            transform: translateY(-2px); box-shadow: 0 20px 40px -12px var(--accent-glow);
            text-decoration: none;
        }
        .rg-cta-note {
            display: block; margin-top: 16px; font-family: var(--mono);
            font-size: .78rem; color: var(--ink-faint); letter-spacing: .02em;
        }

        :where(.rg-page) a:focus-visible,
        .rg-cta-btn:focus-visible {
            outline: 2px solid var(--action-hi); outline-offset: 3px; border-radius: 4px;
        }

        /* ---------- Responsive ---------- */
        @media (max-width: 920px) {
            .rg-resources { grid-template-columns: 1fr; }
            .rg-layout { grid-template-columns: 1fr; gap: 24px; }
            .rg-toc { position: static; top: auto; }
            .rg-toc ol {
                display: flex; flex-wrap: wrap; gap: 6px;
            }
            .rg-toc li { flex: 1 1 auto; }
        }
        @media (max-width: 560px) {
            .rg-page { padding: 36px 16px 72px; }
            .rg-helpband { padding: 24px 20px; }
            .rg-section { padding: 24px 20px; }
            .rg-cta { padding: 32px 22px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .rg-toc a, .rg-resource, .rg-cta-btn, .rg-section a {
                transition: none !important;
            }
            .rg-cta-btn:hover, .rg-resource:hover { transform: none; }
        }