﻿/* extracted verbatim 2026-08-28 estate speed sweep. New content = new filename. */

        /* ============================================================
           500 ERROR — BetBetter design system (tokens from Site.Master)
           Surfaces/ink/accent/money are GLOBAL; only page styles here.
           Order by purpose: calm explanation -> the one fix -> routes
           back to value (home / picks / tools / results) -> diagnostics.
           ============================================================ */
        .err-stage {
            min-height: calc(100vh - 140px);
            display: flex; align-items: center; justify-content: center;
            padding: clamp(32px, 6vw, 72px) 20px;
            box-sizing: border-box;
            content-visibility: auto; contain: content;
        }

        .err-shell { width: 100%; max-width: 760px; }

        /* AMBIENT-LIFT card */
        .err-card {
            position: relative; overflow: hidden;
            background: var(--panel);
            border: 1px solid var(--card-edge);
            border-radius: 20px;
            box-shadow: 0 20px 42px -24px var(--accent-glow);
            padding: clamp(28px, 5vw, 52px);
        }
        .err-card::after {
            content: ""; position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(120% 80% at 50% -10%, rgba(70,140,255,.12), transparent 60%);
        }
        .err-card > * { position: relative; z-index: 1; }

        /* Status pill — accent (system status, NOT money green) */
        .err-eyebrow {
            display: inline-flex; align-items: center; gap: 9px;
            font-family: var(--mono); font-size: .72rem; font-weight: 600;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--action-hi);
            background: rgba(70,140,255,.08);
            border: 1px solid var(--card-edge);
            border-radius: 999px; padding: 6px 14px; margin: 0 0 22px;
        }
        .err-eyebrow .dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--action-hi);
            box-shadow: 0 0 0 4px rgba(70,140,255,.18);
        }
        .err-eyebrow .code {
            color: var(--ink-faint); letter-spacing: .14em;
        }

        /* H1 leads with reassurance, not the error number */
        .err-title {
            font-family: var(--display);
            font-size: clamp(1.7rem, 4.4vw, 2.5rem); font-weight: 700;
            color: var(--ink); margin: 0 0 12px; letter-spacing: -.02em;
            line-height: 1.1;
        }
        .err-sub {
            color: var(--ink-dim); font-size: 1.08rem; line-height: 1.6;
            margin: 0; max-width: 56ch;
        }

        /* Primary action zone — ONE clear fix at the intent peak */
        .err-actions {
            display: flex; flex-wrap: wrap; gap: 12px;
            margin: 28px 0 0;
        }
        .err-actions .btn {
            min-height: 48px;
            display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            padding: 0 24px; border-radius: 12px; cursor: pointer;
            font-family: var(--ui); font-size: 1rem; font-weight: 600;
            text-decoration: none; border: 1px solid transparent;
            transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
        }
        .err-actions .btn:focus-visible { outline: 2px solid var(--action-hi); outline-offset: 3px; }
        .btn-grad {
            flex: 2 1 240px;
            background: var(--accent-grad); color: #fff;
            box-shadow: 0 12px 28px -12px var(--accent-glow);
        }
        .btn-grad:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px var(--accent-glow); }
        .btn-line {
            flex: 1 1 180px;
            background: var(--panel-2); color: var(--ink);
            border-color: var(--line-strong);
        }
        .btn-line:hover { transform: translateY(-2px); border-color: var(--card-edge); color: var(--action-hi); }

        .err-microcopy {
            font-size: .85rem; color: var(--ink-faint); margin: 14px 0 0;
        }

        /* Routes back to value — no dead end */
        .err-routes { margin: 30px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
        .err-routes-label {
            font-family: var(--mono); font-size: .7rem; font-weight: 600;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--ink-faint); margin: 0 0 14px;
        }
        .route-grid {
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
        }
        .route-card {
            display: flex; align-items: center; gap: 12px;
            background: var(--panel-2); border: 1px solid var(--line);
            border-radius: 12px; padding: 13px 15px;
            color: var(--ink); text-decoration: none; min-height: 44px;
            transition: border-color .15s ease, transform .15s ease, background .15s ease;
        }
        .route-card:hover { border-color: var(--card-edge); transform: translateY(-2px); }
        .route-card:focus-visible { outline: 2px solid var(--action-hi); outline-offset: 2px; }
        .route-card i {
            width: 36px; height: 36px; flex: 0 0 36px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 9px; background: rgba(70,140,255,.1);
            color: var(--action-hi); font-size: .98rem;
        }
        /* money-green reserved for the PRO/value tease */
        .route-card.is-pro i { background: rgba(52,211,153,.12); color: var(--model); }
        .route-card .rt-t { display: block; font-weight: 600; font-size: .95rem; line-height: 1.2; }
        .route-card .rt-d { display: block; font-size: .8rem; color: var(--ink-faint); margin-top: 2px; }

        /* Diagnostics — collapsible, demoted below the value */
        .err-diag { margin: 26px 0 0; }
        .err-diag summary {
            cursor: pointer; list-style: none; user-select: none;
            display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
            font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
            color: var(--ink-faint); padding: 6px 0;
        }
        .err-diag summary::-webkit-details-marker { display: none; }
        .err-diag summary:focus-visible { outline: 2px solid var(--action-hi); outline-offset: 3px; }
        .err-diag summary i.chev { transition: transform .2s ease; font-size: .7rem; }
        .err-diag[open] summary i.chev { transform: rotate(90deg); }
        .err-diag summary:hover { color: var(--ink-dim); }

        .diag-body {
            margin-top: 12px;
            background: var(--void);
            border: 1px solid var(--line); border-radius: 12px;
            padding: 16px 18px; text-align: left;
        }
        .diag-row { font-size: .9rem; color: var(--ink-dim); }
        .diag-row strong { color: var(--ink); font-weight: 600; }
        .diag-meta {
            display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px;
            font-family: var(--mono); font-size: .8rem; color: var(--ink-faint);
        }
        .diag-meta code { color: var(--ink-dim); }
        .diag-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
        .diag-tools .mini {
            display: inline-flex; align-items: center; gap: 7px;
            min-height: 40px; padding: 0 16px; border-radius: 10px; cursor: pointer;
            font-family: var(--ui); font-size: .85rem; font-weight: 600;
            text-decoration: none; color: var(--ink-dim);
            background: var(--panel-2); border: 1px solid var(--line);
            transition: border-color .15s ease, color .15s ease;
        }
        .diag-tools .mini:hover { border-color: var(--card-edge); color: var(--action-hi); }
        .diag-tools .mini:focus-visible { outline: 2px solid var(--action-hi); outline-offset: 3px; }

        /* Compliance footnote */
        .err-compliance {
            margin: 22px 0 0; font-size: .76rem; line-height: 1.5;
            color: var(--ink-faint);
        }

        @media (max-width: 560px) {
            .route-grid { grid-template-columns: 1fr; }
            .err-actions .btn { flex: 1 1 100%; }
        }
        @media (prefers-reduced-motion: reduce) {
            .err-actions .btn, .route-card, .err-diag summary i.chev { transition: none !important; }
            .btn-grad:hover, .btn-line:hover, .route-card:hover { transform: none; }
        }
    