/* =====================================================================================================================
   CareFigures  —  theme

   Deep jade against cool graphite. Money, trust and growth, without ever looking like a health brochure.
   The variable names are inherited and deliberately unchanged, so every hover, focus ring, glow and transition
   already written against them keeps working exactly as it did — only the colour underneath has moved.
   ===================================================================================================================== */

:root {
    --gold: #0F7A63;                                   /* the primary jade                                     */
    --gold-bright: #16A085;
    --gold-light: #58C5AA;
    --gold-text: #0C6B57;
    --gold-tint: rgba(15, 122, 99, 0.10);
    --gold-tint-line: rgba(15, 122, 99, 0.28);
    --champagne: #E4F2ED;                              /* the pale wash                                        */
    --primary: #0F7A63;
    --accent: #0F7A63;
    --accent-cyan: #16A085;
    --accent-glow: rgba(15, 122, 99, 0.28);
    --gradient-primary: linear-gradient(115deg, #0B6350 0%, #16A085 52%, #0B6350 100%);
    --ink: #0B1512;
    --bone: #FFFFFF;
    --bg-primary: #F6FAF8;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #EBF2EF;
    --bg-card: rgba(255, 255, 255, 0.84);
    --bg-glass: rgba(246, 250, 248, 0.82);
    --text-primary: #0B1512;
    --text-secondary: #4A5754;
    --text-muted: #8A9A95;
    --border: rgba(11, 21, 18, 0.10);
    --border-hover: rgba(15, 122, 99, 0.48);
    --rule: rgba(11, 21, 18, 0.09);
    --shadow-sm: 0 2px 10px rgba(11, 21, 18, 0.05);
    --shadow-md: 0 24px 56px -32px rgba(11, 21, 18, 0.32);
    --shadow-lg: 0 46px 100px -48px rgba(11, 21, 18, 0.42);
    --phone-screen: #061310;
    --input-bg: #FFFFFF;
    --input-border: rgba(11, 21, 18, 0.14);
    --input-focus-glow: rgba(15, 122, 99, 0.16);
    --success: #17835F;
    --error: #C0392B;
    --error-bright: #E74C3C;               /* the lift in the loss figure's sheen, as --gold-bright is for jade */
    --warning: #B5811F;

    /* Chart palette. Read by the report engine so amCharts never invents its own colours. */
    --chart-1: #0F7A63;
    --chart-2: #3E7BFA;
    --chart-3: #C6913C;
    --chart-4: #7C5CD6;
    --chart-5: #D8564B;
    --chart-6: #17B39A;
    --chart-7: #6C8A85;
    --chart-8: #D9A441;

    /* Text placed on a jade fill. Jade is dark in light mode and bright in dark mode, so this flips. */
    --on-accent: #FFFFFF;

    /* Behind anything that covers the page. Tinted rather than black, so a light page does not appear to have a
       hole punched in it. */
    --scrim: rgba(9, 26, 22, 0.46);

    --font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-lg: 26px;
}

[data-theme="dark"] {
    --gold: #2ED3A9;
    --gold-bright: #4AE3BC;
    --gold-light: #8CF0D6;
    --gold-text: #4AE3BC;
    --gold-tint: rgba(46, 211, 169, 0.13);
    --gold-tint-line: rgba(46, 211, 169, 0.32);
    --champagne: #D6F5EB;
    --primary: #2ED3A9;
    --accent: #2ED3A9;
    --accent-cyan: #4AE3BC;
    --accent-glow: rgba(46, 211, 169, 0.30);
    --gradient-primary: linear-gradient(115deg, #17A784 0%, #4AE3BC 52%, #17A784 100%);
    --bg-primary: #070D0B;
    --bg-secondary: #0E1614;
    --bg-tertiary: #16211E;
    --bg-card: rgba(17, 26, 23, 0.72);
    --bg-glass: rgba(7, 13, 11, 0.78);
    --text-primary: #EDF6F2;
    --text-secondary: #A6B8B2;
    --text-muted: #75867F;
    --border: rgba(237, 246, 242, 0.12);
    --border-hover: rgba(46, 211, 169, 0.48);
    --rule: rgba(237, 246, 242, 0.10);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 24px 56px -32px rgba(0, 0, 0, 0.85);
    --shadow-lg: 0 46px 100px -48px rgba(0, 0, 0, 0.95);
    --phone-screen: #040A08;
    --input-bg: #121B18;
    --input-border: rgba(237, 246, 242, 0.16);
    --input-focus-glow: rgba(46, 211, 169, 0.18);
    --ink: #051009;
    --bone: #EDF6F2;
    --success: #35C48D;
    --error: #E8695C;
    --error-bright: #FF9184;
    --warning: #D9A441;

    --chart-1: #2ED3A9;
    --chart-2: #6FA0FF;
    --chart-3: #E2B46A;
    --chart-4: #A688F0;
    --chart-5: #F08076;
    --chart-6: #4AE3BC;
    --chart-7: #93A9A3;
    --chart-8: #EFC77A;

    --on-accent: #04110D;
    --scrim: rgba(2, 8, 6, 0.68);
}

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

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: -0.011em;
    line-height: 1.62;
    background: var(--bg-primary);
    color: var(--text-primary);
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    transition: background 0.5s ease, color 0.5s ease;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

::selection {
    background: var(--gold);
    color: #FFFFFF;
}

*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 100px;
}

*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 100px;
    border: 3px solid var(--bg-primary);
}

    *::-webkit-scrollbar-thumb:hover,
    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover {
        background: var(--gold-light);
    }

*::-webkit-scrollbar-corner,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background: var(--bg-primary);
}

html.signed-out .auth-only,
html.signed-in .guest-only {
    display: none;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

    .row > * {
        box-sizing: border-box;
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
    }

.ambient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    contain: layout paint style;
    background: radial-gradient(90% 60% at 12% -10%, rgba(15, 122, 99, 0.2), transparent 62%), radial-gradient(70% 55% at 92% 8%, rgba(88, 197, 170, 0.16), transparent 64%), radial-gradient(80% 60% at 50% 110%, rgba(88, 197, 170, 0.14), transparent 66%);
}

    .ambient-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
        opacity: 0.07;
        mix-blend-mode: overlay;
    }

[data-theme="dark"] .ambient-bg::after {
    mix-blend-mode: screen;
    opacity: 0.07;
}

.ambient-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.2;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    animation: float-orb 26s ease-in-out infinite;
}

[data-theme="dark"] .ambient-orb {
    opacity: 0.15;
}

.orb-1 {
    width: 640px;
    height: 640px;
    background: var(--gold);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 520px;
    height: 520px;
    background: var(--gold-light);
    bottom: -150px;
    left: -100px;
    animation-delay: -9s;
}

.orb-3 {
    width: 460px;
    height: 460px;
    background: var(--champagne);
    top: 34%;
    left: 42%;
    animation-delay: -17s;
}

@keyframes float-orb {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(30px, -30px, 0);
    }

    50% {
        transform: translate3d(-20px, 20px, 0);
    }

    75% {
        transform: translate3d(20px, 30px, 0);
    }
}

@media (max-width: 900px) {
    .ambient-orb {
        animation: none;
        filter: blur(70px);
        will-change: auto;
    }

    .orb-3 {
        display: none;
    }
}

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 78px;
    padding: 0 clamp(18px, 4vw, 48px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    transition: background 0.4s ease, border-color 0.4s ease;
}

    .nav::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
        opacity: 0.4;
    }

.logo {
    display: flex;
    align-items: center;
    gap: 0;
    line-height: 0;
    flex: 0 0 auto;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
}

.logo-img {
    display: block;
    width: auto;
    height: 44px;
    max-width: 100%;
    object-fit: contain;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .nav .logo-img {
    content: url("/images/logo_dark.png");
}

.logo:hover .logo-img {
    opacity: 0.72;
}



.nav-links {
    display: flex;
    gap: clamp(18px, 2.2vw, 32px);
    align-items: center;
}

    .nav-links a {
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.88rem;
        letter-spacing: -0.01em;
        text-transform: none;
        transition: color 0.3s ease;
        position: relative;
        cursor: pointer;
    }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 0;
            height: 2px;
            border-radius: 2px;
            background: var(--gold);
            transition: width 0.3s ease;
        }

        .nav-links a:hover {
            color: var(--text-primary);
        }

            .nav-links a:hover::after {
                width: 100%;
            }

        .nav-links a.active {
            color: var(--text-primary);
            font-weight: 600;
        }

            .nav-links a.active::after {
                width: 100%;
            }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}



    















.theme-toggle {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease;
}

    .theme-toggle::before {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        background: var(--gold);
        border-radius: 999px;
        top: 3px;
        left: 3px;
        box-shadow: none;
        transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

[data-theme="dark"] .theme-toggle {
    background: transparent;
}

    [data-theme="dark"] .theme-toggle::before {
        transform: translateX(20px);
    }

.theme-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
    font-size: 12px;
    pointer-events: none;
}

.sun-icon {
    opacity: 0.6;
    font-size: 12px;
}

.moon-icon {
    opacity: 0.3;
    font-size: 12px;
}

[data-theme="dark"] .sun-icon {
    opacity: 0.3;
}

[data-theme="dark"] .moon-icon {
    opacity: 1;
}



.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    transition: all 0.3s ease;
}

    .mobile-menu-toggle:hover {
        border-color: var(--border-hover);
    }

.hamburger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 14px;
}

    .hamburger span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--text-primary);
        border-radius: 2px;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

        .hamburger span:nth-child(1) {
            top: 0;
        }

        .hamburger span:nth-child(2) {
            top: 50%;
            transform: translateY(-50%);
        }

        .hamburger span:nth-child(3) {
            bottom: 0;
        }

.mobile-menu-toggle.active .hamburger span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger span:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}

.mobile-menu-toggle.active .hamburger span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

    .mobile-menu-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 85%;
    height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--rule);
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 80px 24px 40px;
    pointer-events: none;
}

    .mobile-menu.active {
        transform: translateX(0);
        pointer-events: auto;
    }

.mobile-menu-links {
    list-style: none;
    margin-bottom: 32px;
}

    .mobile-menu-links li {
        margin-bottom: 8px;
    }

    .mobile-menu-links a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 4px;
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.98rem;
        text-transform: none;
        letter-spacing: -0.01em;
        border-radius: 14px;
        border-bottom: none;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .mobile-menu-links a:hover,
        .mobile-menu-links a.active {
            background: var(--gold-tint);
            color: var(--text-primary);
        }

        .mobile-menu-links a .menu-icon {
            font-size: 1.2rem;
        }

.mobile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 24px 0;
}

.mobile-menu-footer {
    padding: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 20px;
    text-align: left;
}

    .mobile-menu-footer p {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .mobile-menu-footer .btn {
        width: 100%;
    }

#app {
    position: relative;
    z-index: 10;
    width: 100%;
    min-height: 100vh;
    height: auto !important;
    overflow: visible !important;
}

.page {
    display: none;
    opacity: 0;
    min-height: 100vh;
    padding-top: 78px;
    position: relative;
}

    .page.active {
        display: block;
        opacity: 1;
        will-change: auto;
    }

    .page.entering {
        display: block;
        animation: pageEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        will-change: opacity, transform;
    }

    .page.leaving {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        pointer-events: none;
        animation: pageLeave 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        will-change: opacity, transform;
    }

@keyframes pageEnter {
    0% {
        opacity: 0;
        transform: translate3d(0, 40px, 0) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes pageLeave {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -30px, 0) scale(0.98);
    }
}

.page.entering .dashboard-card,
.page.entering .form-card,
.page.entering .stat-card,
.page.entering .support-info,
.page.entering .support-form {
    opacity: 0;
    animation: cardEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

    .page.entering .dashboard-card:nth-child(1),
    .page.entering .stat-card:nth-child(1),
    .page.entering .support-info {
        animation-delay: 0.1s;
    }

    .page.entering .dashboard-card:nth-child(2),
    .page.entering .stat-card:nth-child(2),
    .page.entering .support-form {
        animation-delay: 0.2s;
    }

    .page.entering .dashboard-card:nth-child(3),
    .page.entering .stat-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    .page.entering .stat-card:nth-child(4) {
        animation-delay: 0.4s;
    }

@keyframes cardEnter {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    height: 56px;
    padding: 0 34px;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 20px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    animation: none;
    transform: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

    .btn:hover,
    .btn:focus,
    .btn:active {
        transform: none;
        padding: 0 34px;
        height: 56px;
        letter-spacing: 0.14em;
        font-size: 0.72rem;
        box-shadow: none;
    }

    .btn:focus-visible {
        outline: 1px solid var(--gold);
        outline-offset: 4px;
    }

.btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--champagne);
}

    .btn-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: #FFFFFF;
        transform: translateY(101%);
        transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-primary::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4px;
        z-index: -1;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-primary:hover {
        color: #222222;
        border-color: var(--gold);
    }

        .btn-primary:hover::before {
            transform: translateY(0);
        }

        .btn-primary:hover::after {
            transform: scaleX(1);
        }

    .btn-primary:active::before {
        transform: translateY(0) scale(1.04);
        transition-duration: 0.15s;
    }

[data-theme="dark"] .btn-primary {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on-accent);
}

    [data-theme="dark"] .btn-primary::before {
        background: var(--bone);
    }

    [data-theme="dark"] .btn-primary:hover {
        color: var(--on-accent);
        border-color: var(--bone);
    }

.btn-secondary {
    background: transparent;
    border-color: var(--rule);
    color: var(--text-primary);
    backdrop-filter: none;
}

    .btn-secondary::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: #444444;
        transform: translateY(101%);
        transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-secondary:hover {
        color: #FFFFFF;
        border-color: var(--ink);
    }

        .btn-secondary:hover::before {
            transform: translateY(0);
        }

[data-theme="dark"] .btn-secondary:hover {
    color: #FFFFFF;
    border-color: var(--gold);
}

.btn-quiet {
    height: 56px;
    padding: 0 4px;
    border: none;
    overflow: visible;
    color: var(--text-secondary);
    letter-spacing: 0.16em;
}

    .btn-quiet:hover,
    .btn-quiet:focus,
    .btn-quiet:active {
        height: 56px;
        padding: 0 4px;
        letter-spacing: 0.16em;
    }

    .btn-quiet::after {
        content: '→';
        display: inline-block;
        font-size: 0.95rem;
        letter-spacing: 0;
        color: var(--gold);
        transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-quiet:hover {
        color: var(--gold);
    }

        .btn-quiet:hover::after {
            transform: translateX(7px);
        }

.btn-nav {
    height: 42px;
    padding: 12px 24px;
    font-size: 0.64rem;
}

    .btn-nav:hover,
    .btn-nav:focus,
    .btn-nav:active {
        height: 42px;
        padding: 12px 24px;
        font-size: 0.64rem;
    }

.btn-huge {
    width: auto;
    height: 64px;
    padding: 0 42px;
    font-size: 0.74rem;
}

    .btn-huge:hover,
    .btn-huge:focus,
    .btn-huge:active {
        height: 64px;
        padding: 0 42px;
        font-size: 0.74rem;
    }

.btn-small {
    height: 42px;
    padding: 0 22px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
}

    .btn-small:hover,
    .btn-small:focus,
    .btn-small:active {
        height: 42px;
        padding: 0 22px;
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

.form-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 60px 40px;
}

.form-card,
.legal-copy,
.support-info,
.support-form,
.dashboard-card,
.dashboard-sidebar,
.checkout-panel,
.credits-hero,
.stat-card,
.checkout-reassure {
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    backdrop-filter: none;
    box-shadow: var(--shadow-sm);
}

.form-card {
    padding: 48px 40px;
}

.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.form-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--gold-tint);
    border: 1px solid var(--gold-tint-line);
    color: var(--gold-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 20px;
    box-shadow: none;
}

.form-title,
.dashboard-card-title,
.checkout-panel-title,
.support-info h3,
.support-form h3,
.success-account h3,
.legal-copy h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.form-title {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.form-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.form-group {
    margin-bottom: 24px;
    position: relative;
}

.form-group-hero {
    margin-bottom: 6px;
    position: relative;
}

.form-input,
textarea.form-input,
select.form-input {
    width: 100%;
    padding: 16px 20px;
    height: 56px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 16px;
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    appearance: none;
}

textarea.form-input {
    height: auto;
    min-height: 120px;
    padding: 20px;
}

.form-input::placeholder {
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-input:focus::placeholder {
    opacity: 1;
}

.form-input:hover {
    border-color: var(--text-muted);
}

.form-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--input-focus-glow);
}


.form-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    transform-origin: left top;
    background: transparent;
    padding: 0 2px;
    border-radius: 4px;
}

textarea ~ .form-label {
    top: 26px;
    transform: translateY(-50%);
}

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label,
textarea:focus ~ .form-label,
textarea:not(:placeholder-shown) ~ .form-label {
    top: 0;
    transform: translateY(-50%) scale(0.85);
    color: var(--text-muted);
    font-weight: 600;
    background: var(--input-bg);
    padding: 0 6px;
}

.form-input:focus ~ .form-label {
    color: var(--primary);
}

[data-theme="dark"] .form-input:focus ~ .form-label {
    color: var(--accent);
}



.form-input.input-error,
.form-group.has-error .form-input {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(192, 68, 47, 0.18);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}



    

    

.form-footer {
    text-align: center;
    margin-top: 28px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

    .form-footer a,
.legal-copy a {
        color: var(--gold);
        text-decoration: none;
        font-weight: 600;
        cursor: pointer;
    }

        .form-footer a:hover {
            text-decoration: underline;
        }



    

    

.page-header {
    text-align: left;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(44px, 6vw, 78px) clamp(20px, 4vw, 48px) 34px;
}

.page-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 5.4vw, 4.4rem);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 12px;
}

.page-subtitle {
    margin: 14px 0 0;
    max-width: 56ch;
    font-size: 0.98rem;
    color: var(--text-secondary);
}



.lx-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}

.home-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 80px;
    padding-top: clamp(28px, 4vw, 44px);
}

.section-spacer {
    margin-top: clamp(64px, 9vw, 118px);
}

.section-header {
    text-align: left;
    margin-bottom: clamp(34px, 4vw, 52px);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    letter-spacing: -0.04em;
    margin: 16px 0 14px;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 0.97rem;
    max-width: 58ch;
}

.lx-sectionmark {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-secondary);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-secondary);
    width: fit-content;
}

    .lx-sectionmark::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold);
    }

.lx-hero {
    position: relative;
    padding: clamp(24px, 5vw, 62px) 0 clamp(24px, 5vw, 120px);
    overflow: hidden;
}


.lx-hero-aura {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 130%;
    z-index: 0;
    pointer-events: none;

    /* The hero clips its overflow, which was slicing these blurred orbs off dead flat at the section boundary and
       leaving a visible horizontal seam where the tint stopped. Fading the layer out before it reaches the clip
       means the glow dissolves into the page background instead of being cut. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 88%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 88%);
}

    .lx-hero-aura span {
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        opacity: 0.26;
        animation: none;
    }

        .lx-hero-aura span:nth-child(1) {
            width: 42vw;
            height: 42vw;
            left: 4%;
            top: 2%;
            background: var(--gold);
        }

        .lx-hero-aura span:nth-child(2) {
            width: 34vw;
            height: 34vw;
            right: 6%;
            top: 12%;
            background: var(--gold-light);
        }

        .lx-hero-aura span:nth-child(3) {
            width: 30vw;
            height: 30vw;
            right: 28%;
            bottom: 2%;
            background: var(--champagne);
            opacity: 0.22;
        }

.lx-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
}

.lx-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    margin-bottom: 26px;
    padding: 8px 18px 8px 14px;
    border: 1px solid var(--gold-tint-line);
    border-radius: 999px;
    background: var(--gold-tint);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-text);
}

.lx-kicker-rule {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: kickPulse 2.8s ease-in-out infinite;
}

@keyframes kickPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.55;
    }
}

.lx-display {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 5vw, 3.8rem);
    line-height: 0.96;
    letter-spacing: -0.045em;
    margin-bottom: 26px;
}

    .lx-display em {
        font-style: normal;
        color: var(--gold-text);
    }

.lx-lede {
    color: var(--text-secondary);
    font-size: 1.08rem;
    line-height: 1.72;
    max-width: 52ch;
    margin-bottom: 32px;
}

.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.lx-assurances {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0;
}



.lx-assurances li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.76rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

    .lx-assurances li::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--gold);
        opacity: 0.9;
    }


















    





    

























    





    

    

    

    

    



    















    










/* each word sweeps up, then settles back */


    

    

    



/* final word holds its emphasis instead of settling back */




/* hairline rule that draws under the final word */






/* accessibility fallback */





/* shorter screen: 9:16 video area + ~30px of room at the bottom */


/* video fills the top of that area, sitting 30px off the bottom */










    




    



    

        

        

        

        

        

        

        

        

        



















    



    

    

    









    

        





















    































    



.lx-step {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    padding: clamp(26px, 3vw, 40px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.4s ease;
}

    

    .lx-step:hover {
        transform: translateY(-6px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }





.lx-step p {
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.7;
}

    



.lx-process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 22px);
}

.lx-step-no {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gold-text);
    background: var(--gold-tint);
    border: 1px solid var(--gold-tint-line);
}

.lx-step h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.28rem;
    letter-spacing: -0.03em;
    margin: 16px 0 10px;
}

.mid-cta {
    margin-top: clamp(34px, 5vw, 56px);
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-tint-line);
    background: linear-gradient(135deg, var(--gold-tint) 0%, transparent 70%), var(--bg-secondary);
    text-align: center;
}



    







.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: clamp(16px, 2vw, 26px);
    align-items: stretch;
}

.pricing-card {
    position: relative;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(30px, 3.4vw, 46px) clamp(22px, 2.6vw, 34px);
    text-align: center;
    transform: none;
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out, border-color 0.3s ease;
}

    .pricing-card:hover {
        transform: translateY(-10px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-lg);
        z-index: 3;
    }



.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 15px 7px;
    border-radius: 999px;
    background: var(--gold);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 22px -12px var(--accent-glow);
}

[data-theme="dark"] .popular-badge {
    color: var(--on-accent);
}

.pack-name {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.pack-tagline {
    color: var(--gold-text);
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0.01em;
    min-height: 22px;
}



    .credits-hero-value,
.stat-value,
.sidebar-credits-value {
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--gold-text);
    }

    

.pack-per-credit {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}





    



.price-amount {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.8rem, 4.4vw, 3.6rem);
    color: var(--text-primary);
    margin: 22px 0 6px;
}

.price-currency {
    font-size: 1rem;
    margin-top: 10px;
    margin-right: 4px;
}

.price-period {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ---------------------------------------------------------------------------------------------------------------------
   "THE REPORT IS YOURS TO KEEP"

   The one promise every tier makes, and the objection every price raises: what happens when the pass runs out. It
   does not run out — the pass buys time in the calculator, the report is exported and kept. Rendered from
   js/pricing.js into the pricing cards, the inline buy panel and the checkout, so all three read identically.
   --------------------------------------------------------------------------------------------------------------------- */

.keep-note {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    margin: 20px 0 4px;
    padding: 15px 16px;
    border-radius: 15px;
    border: 1px solid var(--gold-tint-line);
    background: var(--gold-tint);
    text-align: left;
}

.keep-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--gold-text);
    font-size: 0.95rem;
}

.keep-body strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.keep-body > span {
    display: block;
    margin-top: 5px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.keep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.keep-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--gold-tint-line);
    background: var(--bg-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

    .keep-chip i { color: var(--gold-text); }

/* Under the tier tabs there is no room for the chips, and the sentence is doing the work anyway. */
.keep-compact {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

    .keep-compact > i {
        margin-top: 2px;
        color: var(--gold-text);
    }

    .keep-compact strong { color: var(--text-primary); }

.pricing-features {
    list-style: none;
    margin: 24px 0 32px;
    text-align: left;
}

    .pricing-features li {
        padding: 12px 0;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.9rem;
        border-bottom: 1px solid var(--rule);
    }

        .pricing-features li:last-child {
            border-bottom: none;
        }

    .pricing-features i {
        color: var(--gold);
        font-size: 1rem;
    }



    





    







.faq-section h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    letter-spacing: -0.04em;
    margin: 34px 0 12px;
}

.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
    transition: border-color 0.4s ease, background 0.4s ease;
}

    .faq-item.faq-open {
        border-color: var(--border-hover);
    }

.faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: opacity 0.2s ease;
}

    .faq-trigger:hover {
        opacity: 0.8;
    }

.faq-question {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1.4;
    flex: 1;
    transition: color 0.3s ease;
}

.faq-item.faq-open .faq-question {
    color: var(--gold-text);
    font-style: normal;
}

.faq-icon {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    transition: background 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-item.faq-open .faq-icon {
    background: var(--gold);
    border-color: var(--gold);
    transform: rotate(90deg);
}

.faq-icon-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--text-secondary);
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-icon-horizontal {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-icon-vertical {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
}

.faq-item.faq-open .faq-icon-bar {
    background: var(--on-accent);
}

.faq-item.faq-open .faq-icon-vertical {
    height: 0;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.faq-answer {
    padding: 0 24px 26px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 68ch;
}



    

    


    

    
























    











    



























    












































    

    



    



    

        

    







    



    











.checkout-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 80px;
    display: grid;
    grid-template-columns: minmax(0, 1080px);
    gap: 28px;
    align-items: start;
    justify-content: center;
}

/* ---------------------------------------------------------------------------------------------------------------------
   TWO THIRDS PAYMENT, ONE THIRD REASSURANCE

   On a desktop the panel that takes the money holds two thirds of the row and the assurance panel sits beside it in
   the remaining third, in eyeline of the PayPal button rather than under it. Below 900px the two stack, payment
   first, because on a phone the reasons to finish are read on the way down to the button anyway.
   --------------------------------------------------------------------------------------------------------------------- */

.checkout-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

.checkout-panel {
    padding: 32px;
    min-width: 0;
}

.checkout-split > .assure {
    margin-top: 0;
    min-width: 0;
}

    /* One narrow column of claims, so the icons line up down the edge instead of reflowing at every width. */
    .checkout-split > .assure .assure-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

@media (max-width: 900px) {
    .checkout-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .checkout-split > .assure {
        margin-top: 0;
    }

    /* Back to a flowing grid once it has the full width to itself. */
    .checkout-split > .assure .assure-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

.checkout-panel-title {
    font-size: 1.15rem;
    margin-bottom: 20px;
}

.checkout-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.checkout-line-info strong {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.checkout-line-info span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.checkout-line-price {
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

    /* The list price sits above what is actually being charged, not beside it. */
    .checkout-line-price s {
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration-color: var(--error);
        color: var(--text-muted);
    }

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 12px;
    font-size: 1.05rem;
    color: var(--text-secondary);
}

    .checkout-total-row strong {
        font-size: 1.7rem;
        font-weight: 800;
        color: var(--text-primary);
    }



    

    

.checkout-reassure {
    list-style: none;
    margin: 0 0 24px;
    padding: 20px 22px;
}

    .checkout-reassure li {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        padding: 7px 0;
        color: var(--text-secondary);
        font-size: 0.88rem;
        line-height: 1.6;
    }

    .checkout-reassure i {
        color: var(--gold);
        margin-top: 4px;
        flex-shrink: 0;
    }

.checkout-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: -8px 0 24px;
}

/* PayPal renders into whatever width it is given, and a 700px wide pay button reads as a banner rather than a
   button. Held to a sensible width and centred. */
.paypal-buttons-holder {
    min-height: 52px;
    max-width: 340px;
    margin-inline: auto;
}

.checkout-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning);
    border-radius: 14px;
    padding: 16px 18px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

    .checkout-notice i {
        color: var(--warning);
        margin-top: 2px;
    }

    .checkout-notice code {
        font-family: 'Space Mono', monospace;
        font-size: 0.85em;
        color: var(--text-primary);
    }

.checkout-secure {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 20px;
    line-height: 1.5;
}

    .checkout-secure i {
        color: var(--success);
        margin-right: 4px;
    }

.checkout-success {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 24px 80px;
    text-align: center;
}

.checkout-success-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    box-shadow: 0 14px 44px rgba(15, 122, 99, 0.35);
    animation: successPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-left: auto;
    margin-right: auto;
}

@keyframes successPop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}







.success-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

    .success-meta span {
        display: block;
        color: var(--text-muted);
        font-size: 0.8rem;
        margin-bottom: 4px;
    }

    .success-meta strong {
        font-weight: 700;
        font-size: 0.98rem;
        word-break: break-word;
    }

.success-account {
    background: var(--gold-tint);
    border: 1px solid var(--success);
    border-radius: 18px;
    padding: 24px;
    text-align: left;
    margin-bottom: 28px;
    border-color: var(--gold-tint-line);
}

    .success-account h3 {
        font-size: 1.05rem;
        margin-bottom: 8px;
    }

        .success-account h3 i {
            color: var(--success);
            margin-right: 6px;
        }

    .success-account p {
        color: var(--text-secondary);
        font-size: 0.93rem;
        line-height: 1.6;
    }



    

    

    

.success-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.dashboard-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    padding-top: clamp(34px, 5vw, 56px);
}

.dashboard-sidebar {
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 96px;
}

.sidebar-nav {
    list-style: none;
}

    .sidebar-nav li {
        margin-bottom: 8px;
    }

    .sidebar-nav a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        border-radius: 14px;
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.94rem;
        text-transform: none;
        letter-spacing: -0.01em;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, background 0.3s ease;
        cursor: pointer;
        position: relative;
    }

        .sidebar-nav a:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            box-shadow: inset 3px 0 0 0 #999999;
        }

        .sidebar-nav a.active {
            background: var(--gold);
            color: #FFFFFF;
            box-shadow: 0 12px 26px -14px var(--accent-glow);
            overflow: hidden;
            animation: none;
        }

            .sidebar-nav a.active::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
                transition: left 0.5s ease;
            }

            .sidebar-nav a.active:hover::before {
                left: 100%;
            }

            .sidebar-nav a.active:hover {
                transform: none;
                box-shadow: none;
            }

    .sidebar-nav .nav-icon {
        font-size: 1.2rem;
        transition: transform 0.3s ease;
    }

    .sidebar-nav a:hover .nav-icon {
        transform: scale(1.15);
    }

.sidebar-credits {
    background: var(--bg-tertiary);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-credits-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sidebar-credits-value {
    font-size: 1.2rem;
}

.dashboard-main {
    min-width: 0;
}

    .dashboard-main:only-child {
        grid-column: 1 / -1;
    }

.dashboard-card {
    padding: 32px;
    margin-bottom: 24px;
}

.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.dashboard-card-title {
    font-size: 1.3rem;
}

.dashboard-card,
.stat-card,
.credits-hero,
.support-item {
    transition: border-color 0.4s ease, box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease;
}

    .dashboard-card:hover,
.stat-card:hover,
.credits-hero:hover {
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
        transform: none;
    }

/* ---------------------------------------------------------------------------------------------------------------------
   THE FREE REPORT'S HEADLINE CARDS

   Label, then figure, then the qualifier under it — the same three-line shape the paid report uses for .rp-stat, so
   the free summary and the thing it is selling look like one product.

   These are laid out as a grid rather than left to flow. The three parts are <span>s, and as inline boxes they ran
   into each other and wrapped mid-figure, which is what made the cards look warped. Banded values like
   "$34,120–$58,900" are the widest thing that lands here, so the column floor leaves room for one and the figure
   scales with the card rather than overflowing it.
   --------------------------------------------------------------------------------------------------------------------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 20px;
    text-align: left;
}

.stat-label {
    display: block;
    min-width: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--text-muted);
}

.stat-value {
    display: block;
    min-width: 0;
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.credits-hero {
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

    .credits-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gold);
        opacity: 0.85;
    }

.credits-hero-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 700;
}

.credits-hero-value {
    font-size: 4rem;
    line-height: 1.1;
    margin: 8px 0 24px;
}







.usage-table {
    width: 100%;
    border-collapse: collapse;
}

    .usage-table th,
    .usage-table td {
        padding: 16px 20px;
        text-align: left;
        border-bottom: 1px solid var(--border);
    }

    .usage-table th {
        font-family: var(--font-sans);
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.76rem;
        text-transform: none;
        letter-spacing: 0.02em;
    }

    .usage-table td {
        font-size: 0.95rem;
    }

    .usage-table tr:last-child td {
        border-bottom: none;
    }

    .usage-table tr:hover td {
        background: var(--gold-tint);
    }

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}



.table-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 16px !important;
}

.status-badge {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
}

.status-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.status-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}



    

.empty-state {
    text-align: center;
    padding: 48px 24px;
}

    .empty-state i {
        font-size: 2.4rem;
        color: var(--text-muted);
        margin-bottom: 16px;
        display: block;
    }

    .empty-state p {
        color: var(--text-secondary);
        margin-bottom: 20px;
    }





    

#ProfileInitials {
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: 0.02em;
}



.support-info,
.support-form {
    padding: 40px;
}

.support-info {
    margin-bottom: 28px;
}

    .support-info h3,
    .support-form h3 {
        font-size: 1.3rem;
        margin-bottom: 24px;
    }

.support-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.support-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid var(--gold-tint-line);
    background: var(--gold-tint);
    color: var(--gold-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.support-item-text strong {
    display: block;
    margin-bottom: 4px;
}

.support-item-text span {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.legal-copy {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px;
}

    .legal-copy h3 {
        font-size: 1.15rem;
        margin: 32px 0 10px;
    }

        .legal-copy h3:first-child {
            margin-top: 0;
        }

    .legal-copy p {
        color: var(--text-secondary);
        line-height: 1.75;
    }



    

.footer {
    position: relative;
    background: var(--ink);
    border-top: none;
    padding: clamp(50px, 7vw, 86px) clamp(20px, 4vw, 48px) 34px;
    text-align: left;
}

    .footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gradient-primary);
        opacity: 0.9;
    }

.footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    justify-content: space-between;
    align-items: start;
    gap: clamp(30px, 5vw, 64px);
    flex-wrap: wrap;
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(247, 245, 240, 0.12);
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr);
}

.footer-logo {
    display: block;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    line-height: 0;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    color: #F7F5F0;
}

    .footer-logo .logo-img {
    height: 44px;
    width: auto;
}

.footer-line {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    max-width: 36ch;
    line-height: 1.6;
}

.footer-links {
    display: grid;
    flex-direction: unset;
    align-items: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: clamp(22px, 3vw, 40px);
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

    .footer-links a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 0.86rem;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0.01em;
        cursor: pointer;
        transition: color 0.3s ease;
    }

        .footer-links a:hover {
            color: #FFFFFF;
        }

.footer-copy {
    max-width: 1240px;
    margin: 26px auto 0;
    color: rgba(247, 245, 240, 0.32);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

.buy-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    align-items: center;
    justify-content: center;
    padding: 12px clamp(16px, 4vw, 40px) calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(7, 27, 22, 0.94) 0%, rgba(5, 18, 15, 0.97) 100%);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-top: 1px solid rgba(74, 227, 188, 0.22);
    box-shadow: 0 -18px 50px -30px rgba(0, 0, 0, 0.7);
}

.buy-bar-copy strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.1;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.buy-bar-copy span {
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.55);
}

.buy-bar .btn {
    padding: 14px 26px;
    white-space: nowrap;
    flex-shrink: 0;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.loading-spinner {
    font-size: 1.5rem;
    color: var(--gold);
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
}

/* Toasts, dialogs and the loading scrim are themed at the end of this file. */

@keyframes revealIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

html.reveal-ready .reveal:not(.revealed) {
    opacity: 0;
    transform: translateY(24px);
}

html.reveal-ready .reveal.revealed {
    animation: revealIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

html.reveal-ready .reveal-stagger:not(.revealed) > * {
    opacity: 0;
    transform: translateY(20px);
}

html.reveal-ready .reveal-stagger.revealed > * {
    animation: revealIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(1) {
        animation-delay: 0.05s;
    }

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(2) {
        animation-delay: 0.14s;
    }

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(3) {
        animation-delay: 0.23s;
    }

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(4) {
        animation-delay: 0.32s;
    }

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(5) {
        animation-delay: 0.41s;
    }

    html.reveal-ready .reveal-stagger.revealed > *:nth-child(6) {
        animation-delay: 0.50s;
    }


@media (max-width: 1024px) {
    .dashboard-container {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        position: static;
    }

    .lx-hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }


    

    .lx-process {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .checkout-container {
        grid-template-columns: 1fr;
    }

    
}



@media (max-width: 860px) {
    .lx-process {
        grid-template-columns: 1fr;
    }

        

    

    .footer-inner {
        flex-direction: column;
    }

    .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px 24px;
    }

    

    

    

    

    

        

    

    

    

    

    
}

@media (max-width: 768px) {
    html {
        overflow-x: clip;
    }

    .nav {
        height: 64px;
        padding: 0 16px;
    }

    .nav-links,
    .btn-nav,
    #theme-toggle-desktop {
        display: none;
    }

    .logo-img {
        height: 34px;
    }

    

    .mobile-menu-toggle,
    .mobile-menu,
    .mobile-menu-overlay {
        display: block;
    }

    /* The rail is hidden outright at this width, so position is set with it rather than in a second block. */
    .dashboard-sidebar {
        display: none !important;
        position: static;
    }

    .dashboard-container {
        padding: 20px;
    }

    .dashboard-card {
        padding: 20px;
    }

    .page {
        padding-top: 64px;
    }

    .form-container {
        padding: 40px 20px;
    }

    .form-card {
        padding: 32px 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .page-header {
        padding: 34px 20px 24px;
    }

    .home-container {
        padding: 0 20px 116px;
    }

    .lx-display {
        font-size: clamp(2.4rem, 11vw, 2.4rem);
    }

    .hero-cta-row {
        gap: 14px;
        width: 100%;
    }

        .hero-cta-row .btn-huge {
            width: 100%;
        }


    

        

    

    

    

    

    

    

    

    .lx-step {
        padding: 24px 22px;
    }

    

    .faq-icon {
        width: 24px;
        height: 24px;
    }

    .faq-icon-horizontal {
        width: 10px;
    }

    .faq-icon-vertical {
        height: 10px;
    }

    .legal-copy {
        padding: 32px 24px;
    }

    

    

    

    

    

    

    .checkout-panel {
        padding: 24px;
    }

    

    .credits-hero-value {
        font-size: 3rem;
    }

    .footer-logo .logo-img {
        height: 42px;
    }

    

    
}

@media (max-width: 768px) and (orientation: portrait) {
    .lx-hero-grid {
        display: flex;
        flex-direction: column;
        gap: 0;

        /* The base rule centres items for the two column desktop layout. Once this becomes a column flex container
           the cross axis is horizontal, so that same declaration makes every child shrink-wrap to its content and
           sit centred — which is why the estimate panel stopped short of the screen edges. */
        align-items: stretch;
    }

    .lx-hero-copy {
        display: contents;
    }

    .lx-kicker {
        order: 1;
        margin-bottom: 14px;
    }

    .lx-display {
        order: 2;
        margin-bottom: 0;
    }


    /* Without an explicit order this defaults to 0 and jumps above the kicker, so the first thing on a phone was
       a calculator with no explanation of what the site is. It now sits under the headline. */
    .hero-stage {
        order: 3;

        /* Full bleed, measured rather than guessed.

           A negative margin only widens a box whose width is auto. The panel inside this one is width:100%, so
           negative margins on it merely shifted it left and left a gap on the right. Instead the wrapper is given
           an explicit viewport width and pulled back by exactly half the difference:

               50%   = half this element's containing block (the shell content box)
               50vw  = half the viewport

           so the margin resolves to precisely the shell's gutter, whatever that gutter happens to be. Change the
           padding on .lx-shell and this keeps working. */
        width: 100vw;
        margin: 20px calc(50% - 50vw) 24px;
    }

    .lx-lede {
        order: 4;
        margin: 4px 0 26px;
        max-width: none;
    }

    .hero-cta-row {
        order: 5;
        margin-bottom: 22px;
    }

    .lx-assurances {
        order: 6;
        margin-bottom: 4px;
    }

    /* ---- the estimate panel, edge to edge ----

       Breaking out of the shell gutter buys about 40px of width, which is the difference between three input
       fields fitting on one row and not. */
    /* The wrapper above already spans the viewport, so the panel simply fills it. */
    .lx-hero .quickcalc {
        width: 100%;
        margin-inline: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .lx-hero .quickcalc-head,
    .lx-hero .quickcalc-body,
    .lx-hero .quickcalc-result {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Three across, on a phone. */
    .lx-hero .quickcalc-body {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

        .lx-hero .quickcalc-body .form-group:last-child {
            grid-column: auto;
        }

    .lx-hero .quickcalc .input-money { --field-h: 44px; }

    .lx-hero .quickcalc .form-input {
        height: 44px;
        padding: 10px 8px 10px 19px !important;
        font-size: 0.8rem;
        border-radius: 10px;
    }

    .lx-hero .quickcalc .input-money > span {
        left: 8px;
        font-size: 0.75rem;
    }

    .lx-hero .quick-label {
        font-size: 0.66rem;
        letter-spacing: -0.01em;
    }

        /* The qualifier is dropped; "Assets", "Income" and "Home" carry it at this width. */
        .lx-hero .quick-label em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    

    

    html.reveal-ready .reveal,
    html.reveal-ready .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .page.entering,
    .page.leaving {
        animation-duration: 0.01ms !important;
    }

    
}


/* =====================================================================================================================
   =====================================================================================================================
   CareFigures  —  components

   Everything below is new markup for the calculator, the report and the guides. It reuses the existing motion
   language deliberately: the same cubic-bezier curves, the same lift on hover, the same focus glow, so nothing
   reads as bolted on.
   =====================================================================================================================
   ===================================================================================================================== */

.btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
}

.access-pill {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--gold-tint);
    border: 1px solid var(--gold-tint-line);
    color: var(--gold-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

html.has-access .access-pill {
    display: inline-flex;
}

html.no-access .access-only {
    display: none !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
   MONEY AND PERCENT INPUTS
   --------------------------------------------------------------------------------------------------------------------- */

.input-money,
.input-pct {
    position: relative;
    display: flex;
    align-items: center;
}

/* The slider drops onto its own row underneath the field. --field-h is the height of that field, so the dollar sign
   can centre on the input alone rather than on the input plus the slider. */
.input-money {
    --field-h: 56px;
    flex-wrap: wrap;
}

    .input-money > input[type="text"] { flex: 1 1 100%; }


/* ---------------------------------------------------------------------------------------------------------------------
   MONEY SLIDERS

   Under every money field, and deliberately quiet: a hairline until you touch the field it belongs to. It should read
   as part of the input rather than as a control competing with it.
   --------------------------------------------------------------------------------------------------------------------- */

.money-slider {
    /* The inset lives in flex-basis, not width. As a flex item its basis wins, so `flex: 0 0 100%` plus a side
       margin would lay it out full width and then push it 32px past the right edge. */
    flex: 0 0 calc(100% - 32px);
    height: 14px;                                  /* the hit area; the visible track is 3px inside it */
    margin: 1px 16px 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

    .money-slider:focus { outline: none; }

/* --- Track --- */
/* One flat rule, no filled portion. The thumb already says where the value sits; a coloured bar behind it is a second
   answer to a question that only has one.
   Both engines need their own selector and will drop the whole rule if they are grouped, so these stay apart. */
.money-slider::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 999px;
    background: var(--input-border);
}

.money-slider::-moz-range-track {
    height: 3px;
    border-radius: 999px;
    background: var(--input-border);
}

/* --- Thumb ---
   Out of the way until the field is in use, then it comes forward. The two vendor pseudo elements cannot share a
   selector list: a browser that does not know one of them throws the whole rule away, so they stay written out. */
.money-slider::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4.5px;                            /* centres a 12px thumb on a 3px track */
    border: 2px solid var(--bg-secondary);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 1px 4px rgba(11, 21, 18, 0.25);
    opacity: 0.55;
    cursor: grab;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    appearance: none;
    -webkit-appearance: none;
}

.money-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid var(--bg-secondary);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 1px 4px rgba(11, 21, 18, 0.25);
    opacity: 0.55;
    cursor: grab;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.input-money:hover .money-slider::-webkit-slider-thumb,
.input-money:focus-within .money-slider::-webkit-slider-thumb { opacity: 1; }

.input-money:hover .money-slider::-moz-range-thumb,
.input-money:focus-within .money-slider::-moz-range-thumb { opacity: 1; }

.money-slider:active::-webkit-slider-thumb {
    transform: scale(1.25);
    box-shadow: 0 0 0 5px var(--accent-glow);
    cursor: grabbing;
}

.money-slider:active::-moz-range-thumb {
    transform: scale(1.25);
    box-shadow: 0 0 0 5px var(--accent-glow);
    cursor: grabbing;
}

    /* Pinned to the top of the wrapper and given the field's own height, so adding a slider row below cannot drag
       the dollar sign down with it. */
    .input-money > span {
        position: absolute;
        left: 16px;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        height: var(--field-h);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-muted);
        pointer-events: none;
        transition: color 0.4s ease;
    }

    /* Scoped to the text field. The slider is also a child and must keep its full width and zero padding. */
    .input-money > input[type="text"] {
        padding-left: 32px !important;
        font-variant-numeric: tabular-nums;
    }

    .input-money:focus-within > span {
        color: var(--gold-text);
    }

    .input-pct > span {
        position: absolute;
        right: 16px;
        z-index: 2;
        font-size: 0.78rem;
        color: var(--text-muted);
        pointer-events: none;
    }

    .input-pct > input {
        padding-right: 74px !important;
        font-variant-numeric: tabular-nums;
    }
/* The hero estimate panel is defined near the end of this file. */



/* ---------------------------------------------------------------------------------------------------------------------
   HOME  —  the gap
   --------------------------------------------------------------------------------------------------------------------- */

.gap-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 22px;
    align-items: stretch;
}

.gap-card {
    padding: 30px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

    .gap-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }

    .gap-card h3 {
        margin: 12px 0 18px;
        font-family: var(--font-display);
        font-size: 1.24rem;
        font-weight: 700;
        color: var(--text-primary);
    }

.gap-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.gap-bad .gap-tag {
    background: rgba(192, 57, 43, 0.12);
    color: var(--error);
}

.gap-good .gap-tag {
    background: var(--gold-tint);
    color: var(--gold-text);
}

.gap-good {
    border-color: var(--gold-tint-line);
    box-shadow: var(--shadow-md), 0 0 70px -50px var(--accent-glow);
}

.gap-list {
    list-style: none;
    display: grid;
    gap: 11px;
}

    .gap-list li {
        display: flex;
        gap: 11px;
        font-size: 0.86rem;
        line-height: 1.5;
        color: var(--text-secondary);
    }

    .gap-list i {
        margin-top: 3px;
        flex-shrink: 0;
        font-size: 0.78rem;
    }

.gap-bad .gap-list i { color: var(--error); }
.gap-good .gap-list i { color: var(--success); }

.gap-figure {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

    .gap-figure span {
        display: block;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .gap-figure strong {
        display: block;
        margin-top: 6px;
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

.gap-good .gap-figure strong { color: var(--gold-text); }

.gap-versus {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .gap-versus span {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

.gap-note {
    margin-top: 22px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

    .gap-note a {
        color: var(--gold-text);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        text-decoration-color: var(--gold-tint-line);
        transition: text-decoration-color 0.35s ease;
    }

    .gap-note a:hover { text-decoration-color: var(--gold); }


/* ---------------------------------------------------------------------------------------------------------------------
   HOME  —  the three way comparison
   --------------------------------------------------------------------------------------------------------------------- */

.compare-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.compare-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

    .compare-table th,
    .compare-table td {
        padding: 17px 20px;
        text-align: left;
        font-size: 0.86rem;
        border-bottom: 1px solid var(--rule);
    }

    .compare-table thead th {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-primary);
        vertical-align: bottom;
    }

        .compare-table thead th span {
            display: block;
            margin-top: 4px;
            font-family: var(--font-sans);
            font-size: 0.68rem;
            font-weight: 400;
            color: var(--text-muted);
        }

    .compare-table tbody td:first-child {
        font-weight: 500;
        color: var(--text-primary);
    }

    .compare-table tbody td {
        color: var(--text-secondary);
    }

    .compare-table tbody tr:last-child td { border-bottom: 0; }

.compare-bad { color: var(--error) !important; }

.compare-hero {
    position: relative;
    background: var(--gold-tint);
    color: var(--text-primary) !important;
}

thead .compare-hero { color: var(--gold-text) !important; }
.compare-table tbody .compare-hero strong { color: var(--gold-text); }


/* ---------------------------------------------------------------------------------------------------------------------
   HOME  —  mid page and closing calls to action
   --------------------------------------------------------------------------------------------------------------------- */



    .mid-cta p {
        margin-bottom: 18px;
        font-family: var(--font-display);
        font-size: clamp(1.05rem, 2.2vw, 1.35rem);
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text-primary);
    }

.final-cta {
    padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: linear-gradient(150deg, var(--bg-tertiary) 0%, var(--bg-secondary) 62%);
    box-shadow: var(--shadow-md);
    text-align: center;
}

    .final-cta h2 {
        font-family: var(--font-display);
        font-size: clamp(1.7rem, 4vw, 2.7rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--text-primary);
    }

    .final-cta p {
        max-width: 640px;
        margin: 16px auto 28px;
        font-size: 0.96rem;
        line-height: 1.7;
        color: var(--text-secondary);
    }

.final-cta-sub {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
   HOME  —  deadlines, what is included, trust
   --------------------------------------------------------------------------------------------------------------------- */

.deadline-grid,
.whatsin-grid {
    display: grid;
    gap: 20px;
}

.deadline-grid { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.whatsin-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.deadline-card {
    padding: 26px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.5s ease;
}

    .deadline-card:hover {
        transform: translateY(-4px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }

    .deadline-card h3 {
        margin: 14px 0 10px;
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .deadline-card p {
        font-size: 0.83rem;
        line-height: 1.65;
        color: var(--text-secondary);
    }

    .deadline-card a {
        color: var(--gold-text);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--gold-tint-line);
        transition: text-decoration-color 0.35s ease;
    }

    .deadline-card a:hover { text-decoration-color: var(--gold); }

.deadline-num {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--gold-text);
}

.whatsin-col {
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.whatsin-paid {
    border-color: var(--gold-tint-line);
    background: linear-gradient(160deg, var(--gold-tint) 0%, transparent 58%), var(--bg-secondary);
    box-shadow: var(--shadow-md);
}

.whatsin-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
}

    .whatsin-head i { color: var(--gold-text); }

.whatsin-list {
    list-style: none;
    display: grid;
    gap: 13px;
}

    .whatsin-list li {
    display: grid;
    gap: 11px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-secondary);
    grid-template-columns: 18px 1fr;
    align-items: start;
}

    .whatsin-list i {
    margin-top: 3px;
    flex-shrink: 0;
    font-size: 0.82rem;
    color: var(--gold);
    width: 18px;
    line-height: 1.4;
    text-align: center;
}

    .whatsin-free i {
    color: var(--success);
}

    .whatsin-list strong {
    color: var(--text-primary);
    font-weight: 600;
}

.trust-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 26px;
    padding: clamp(30px, 4vw, 46px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.trust-item i {
    font-size: 1.25rem;
    color: var(--gold-text);
}

.trust-item h4 {
    margin: 13px 0 8px;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-primary);
}

.trust-item p {
    font-size: 0.81rem;
    line-height: 1.62;
    color: var(--text-secondary);
}

.pricing-note {
    margin-top: 22px;
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.pricing-featured {
    border-color: var(--gold-tint-line);
    box-shadow: var(--shadow-lg), 0 0 90px -54px var(--accent-glow);
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE CALCULATOR
   --------------------------------------------------------------------------------------------------------------------- */

.calc-container,
.report-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px 90px;
}

.calc-caretype {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.caretype-btn {
    display: grid;
    gap: 5px;
    padding: 20px 18px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.5s ease;
}

    .caretype-btn i {
        font-size: 1.1rem;
        color: var(--text-muted);
        transition: color 0.35s ease;
    }

    .caretype-btn strong {
        font-family: var(--font-display);
        font-size: 0.96rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .caretype-btn span {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    .caretype-btn:hover {
        transform: translateY(-3px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-sm);
    }

    .caretype-btn.active {
        border-color: var(--gold);
        background: var(--gold-tint);
        box-shadow: 0 0 0 1px var(--gold-tint-line) inset;
    }

        .caretype-btn.active i { color: var(--gold-text); }

.calc-modebar {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}

.calc-modes {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease, box-shadow 0.4s ease;
}

    .mode-btn.active {
        background: var(--bg-secondary);
        color: var(--text-primary);
        box-shadow: var(--shadow-sm);
    }

.calc-modehint {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------------------------------------------------------
   THE HOOK

   The calculator is the paid search landing page, so the first screen has to earn the three minutes it is about to
   ask for. Deliberately sized to leave the first question visible without scrolling on a laptop: the argument is
   what stops the bounce, but the interaction is what stops it better, and burying it under a manifesto trades one
   for the other.
   --------------------------------------------------------------------------------------------------------------------- */

.calc-hook {
    margin-bottom: clamp(20px, 2.6vw, 26px);
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(192, 57, 43, 0.28);
    background:
        radial-gradient(130% 130% at 0% 0%, rgba(192, 57, 43, 0.11) 0%, transparent 58%),
        var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .calc-hook {
    border-color: rgba(232, 105, 92, 0.26);
    background:
        radial-gradient(130% 130% at 0% 0%, rgba(232, 105, 92, 0.12) 0%, transparent 58%),
        var(--bg-secondary);
}

.ch-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(192, 57, 43, 0.13);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--error);
}

[data-theme="dark"] .ch-eyebrow { background: rgba(232, 105, 92, 0.16); }

.ch-title {
    margin: 13px 0 10px;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.16;
    color: var(--text-primary);
}

    .ch-title em {
        font-style: normal;
        color: var(--error);
        font-variant-numeric: tabular-nums;
    }

.ch-lede {
    max-width: 720px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

    .ch-lede strong { color: var(--text-primary); }

.ch-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 18px 0 14px;
}

.ch-stat {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
}

    .ch-stat strong {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
    }

    .ch-stat span {
        font-size: 0.7rem;
        line-height: 1.4;
        color: var(--text-muted);
    }

/* Now a three line promise rather than a one line nudge, so the arrow aligns to the first line instead of floating
   in the middle of the block, and the weight is carried by the clause that matters rather than by all of it. */
.ch-close {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

    .ch-close i {
        margin-top: 3px;
        flex-shrink: 0;
        color: var(--gold-text);
    }

    .ch-close strong {
        font-weight: 700;
        color: var(--gold-text);
    }

/* From step two on, the case has been made and the screen belongs to the question. */
.hook-slim {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    font-size: 0.79rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

    .hook-slim i { color: var(--error); }

    .hook-slim strong {
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }


/* ---- One true thing per step -------------------------------------------------------------------------------------
   Under the step rather than inside it, so it reads as a consequence of the answer just given rather than as another
   field to deal with.
   ------------------------------------------------------------------------------------------------------------- */

.step-reality {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: -18px 0 22px;
    padding: 15px 17px;
    border-radius: 15px;
    border: 1px solid var(--gold-tint-line);
    background: var(--gold-tint);
}

.sr-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--bg-secondary);
    font-size: 0.8rem;
    color: var(--gold-text);
}

.sr-body strong {
    display: block;
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.sr-body span {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-secondary);
}


/* ---- Why careful people still get this wrong ---------------------------------------------------------------------- */

/* Three short cards, not four long ones. This block sits between the visitor and the Continue button, so it is
   sized to be absorbed at a glance and stepped over — the argument only has to register, and the guides carry the
   detail for anybody who wants it. */

.calc-unfair {
    margin-bottom: 22px;
}

.cu-title {
    margin-bottom: 11px;
    font-family: var(--font-display);
    font-size: 0.97rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--text-primary);
}

.cu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 11px;
}

.cu-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 14px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.cu-icon {
    display: grid;
    place-items: center; /* same as align-items + justify-content */
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 11px;
    background: rgba(192, 57, 43, 0.11);
    font-size: 0.85rem;
    color: var(--error);
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 11px;
}

    .cu-icon i {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }


[data-theme="dark"] .cu-icon { background: rgba(232, 105, 92, 0.14); }

.cu-item strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.cu-item span {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.cu-item a {
    display: inline-block;
    margin-top: 7px;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--gold-text);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--gold-tint-line);
}

    .cu-item a:hover { text-decoration-color: var(--gold); }


/* ---------------------------------------------------------------------------------------------------------------------
   THE STEP METER

   Above the form, always visible, and the only thing on the page that says how much is left. Two readings, because
   people want different ones: "Step 3 of 6" answers how far, the bar answers how much, and the named steps answer
   what is still coming — which is the one that stops somebody guessing it goes on forever.

   Every step in the list is a button. Coming back from the report to change one figure has to be one click, not six
   Backs.
   --------------------------------------------------------------------------------------------------------------------- */

/* Marks where the questions actually begin. After the hook above it, the meter alone was not enough of a signal
   that this is the thing to start doing. */
.calc-begin {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-size: clamp(1.02rem, 2.5vw, 1.28rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.3;
    color: var(--text-primary);
}

    .calc-begin i {
        flex-shrink: 0;
        font-size: 1.05em;
        color: var(--gold-text);
    }

.calc-steps {
    margin-bottom: clamp(20px, 2.6vw, 28px);
}

.cs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.cs-count {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.cs-pct {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--gold-text);
}

.cs-meter {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.cs-meter-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--gradient-primary);
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The named steps. They scroll sideways rather than wrapping onto three lines on a phone — the row has to stay one
   row, or the meter stops reading as a single journey. */
.cs-list {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-bottom: 4px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

    .cs-list::-webkit-scrollbar { display: none; }

.cs-item button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px 6px 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

    .cs-item button:hover {
        border-color: var(--border);
        background: var(--bg-secondary);
        color: var(--text-secondary);
    }

.cs-dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-tertiary);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: background 0.3s ease, color 0.3s ease;
}

.cs-item.cs-done button { color: var(--text-secondary); }

.cs-item.cs-done .cs-dot {
    background: var(--gold-tint);
    color: var(--gold-text);
}

.cs-item.cs-on button {
    border-color: var(--gold-tint-line);
    background: var(--gold-tint);
    color: var(--gold-text);
}

.cs-item.cs-on .cs-dot {
    background: var(--gradient-primary);
    color: var(--on-accent);
}

@media (max-width: 620px) {
    /* The name is dropped on the current step only — the others are already the width of their number, and the one
       you are on is named in the heading right underneath. */
    .cs-item:not(.cs-on) .cs-name { display: none; }

    .cs-item:not(.cs-on) button { padding: 6px; }
}


/* ---- Moving between them ------------------------------------------------------------------------------------- */

.calc-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: -12px;
}

.calc-nav-note {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.calc-next,
.calc-back {
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .calc-nav {
        gap: 10px;
    }

    /* On a phone the count is already in the meter above, so the middle line goes rather than squeezing the
       buttons down to their text. */
    .calc-nav-note { display: none; }

    .calc-next { flex: 1 1 auto; justify-content: center; }
}


/* ---- The last step: their own answers, read back ----------------------------------------------------------------- */

.calc-review {
    display: grid;
    gap: 8px;
    margin-bottom: 4px;
}

.cr-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--bg-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
}

    .cr-row:hover {
        border-color: var(--gold-tint-line);
        background: var(--gold-tint);
    }

.cr-label {
    min-width: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.cr-value {
    font-size: 0.82rem;
    font-weight: 700;
    text-align: right;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.cr-edit {
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--gold-text);
    opacity: 0;
    transition: opacity 0.25s ease;
}

    .cr-row:hover .cr-edit,
    .cr-row:focus-visible .cr-edit { opacity: 1; }

@media (max-width: 560px) {
    .cr-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
    }

    /* No hover to reveal it on, so it sits under the label permanently and out of the value's way. */
    .cr-edit {
        grid-column: 1 / -1;
        text-align: left;
        opacity: 1;
    }
}

.calc-sublabel {
    display: block;
    margin-bottom: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}

.calc-block {
    margin-bottom: 34px;
    padding: 28px clamp(20px, 3vw, 32px) 12px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

/* The step on screen arrives rather than appearing. Short, and only forwards — a transition long enough to notice
   on the sixth step is a transition that is in the way by then. */
.calc-step {
    animation: calcStepIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The care type and mode controls were written to sit loose above the form, with a rule under them separating the
   two. Inside a step card they are the card, so the separator and the gap it needed both come off. */
.calc-step .calc-caretype { margin-bottom: 20px; }

.calc-step .calc-modebar {
    margin-bottom: 8px;
    padding-bottom: 0;
    border-bottom: 0;
}

@keyframes calcStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .calc-step { animation: none; }
    .cs-meter-fill { transition: none; }
}

.calc-block-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

    .calc-block-title span {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border-radius: 9px;
        background: var(--gold-tint);
        color: var(--gold-text);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0;
    }

.calc-block-lede {
    margin: -12px 0 20px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.calc-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}

    .calc-label .opt {
        margin-left: 5px;
        font-size: 0.68rem;
        font-weight: 400;
        color: var(--text-muted);
    }

/* ---------------------------------------------------------------------------------------------------------------------
   FIELD HELP  —  the "?" beside a label

   Most people filling this in have never heard of a RAD, a means tested amount or a protected person, and will not
   go and look them up. The plain English explanation has to be one movement away.

   The button is deliberately small, quiet and inline: it sits at the end of the label text, so it takes no line of
   its own, never pushes an input around, and follows the last word when a long label wraps on a phone. It only
   colours up on hover — at rest it is a grey dot that the eye skips unless it is looking for it.
   --------------------------------------------------------------------------------------------------------------------- */

.fh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0;
    flex-shrink: 0;
    vertical-align: -2px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    font-size: 0.53rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: help;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

    .fh-btn:hover,
    .fh-btn[aria-expanded="true"] {
        border-color: var(--gold-tint-line);
        background: var(--gold-tint);
        color: var(--gold-text);
    }

    .fh-btn:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

/* A finger is not a cursor. The tap target is grown past the drawn circle with a transparent ring, so the button
   stays 16px to the eye and 30px to a thumb without moving anything around it. */
@media (hover: none) {
    .fh-btn {
        position: relative;
        width: 18px;
        height: 18px;
        font-size: 0.58rem;
    }

        .fh-btn::after {
            content: '';
            position: absolute;
            top: -7px;
            right: -7px;
            bottom: -7px;
            left: -7px;
        }
}

/* ---- The bubble --------------------------------------------------------------------------------------------------
   Fixed, and placed by script. Everything about where it lands — clamped to the viewport, flipped above the button
   when there is no room under it, arrow slid along to keep pointing — is worked out in placeFieldHelp(), because
   none of it can be expressed in CSS and all of it is the difference between usable and useless at 320px.
   ------------------------------------------------------------------------------------------------------------- */

.fh-pop {
    position: fixed;
    z-index: 9990;
    display: none;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border-hover);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

    .fh-pop.fh-on {
        opacity: 1;
        transform: none;
    }

.fh-arrow {
    position: absolute;
    top: -6px;
    width: 11px;
    height: 11px;
    margin-left: -5px;
    border-top: 1px solid var(--border-hover);
    border-left: 1px solid var(--border-hover);
    border-radius: 2px 0 0 0;
    background: var(--bg-secondary);
    transform: rotate(45deg);
}

    /* Flipped: the bubble is above the button, so the arrow moves to the bottom edge and turns over. */
    .fh-above .fh-arrow {
        top: auto;
        bottom: -6px;
        border-top: 0;
        border-left: 0;
        border-right: 1px solid var(--border-hover);
        border-bottom: 1px solid var(--border-hover);
        border-radius: 0 0 2px 0;
    }

.fh-title {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.fh-body {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.fh-note {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--rule);
    font-size: 0.73rem;
    line-height: 1.55;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .fh-pop { transition: none; transform: none; }
}

.calc-help {
    margin-top: 8px;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-muted);
}

    .calc-help a {
        color: var(--gold-text);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: var(--gold-tint-line);
    }

    .calc-help a:hover { text-decoration-color: var(--gold); }

.mix-row {
    margin-bottom: 12px;
}

    .mix-row label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px;
        font-size: 0.76rem;
        color: var(--text-secondary);
    }

    .mix-row label span {
        font-weight: 600;
        color: var(--gold-text);
        font-variant-numeric: tabular-nums;
    }

    .mix-row input[type=range] {
        width: 100%;
        height: 4px;
        appearance: none;
        -webkit-appearance: none;
        border-radius: 999px;
        background: var(--bg-tertiary);
        outline: none;
        cursor: pointer;
    }

        .mix-row input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: var(--gold);
            border: 2px solid var(--bg-secondary);
            box-shadow: 0 2px 8px -2px var(--accent-glow);
            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .mix-row input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); }

        .mix-row input[type=range]::-moz-range-thumb {
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: var(--gold);
            border: 2px solid var(--bg-secondary);
            cursor: pointer;
        }

.calc-submit {
    margin-top: 34px;
    text-align: center;
}

.calc-submit-note {
    margin-top: 14px;
    font-size: 0.76rem;
    color: var(--text-muted);
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE FREE SUMMARY
   --------------------------------------------------------------------------------------------------------------------- */

.status-block {
    display: flex;
    gap: 16px;
    padding: 22px 24px;
    margin-bottom: 26px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

    .status-block i {
        font-size: 1.3rem;
        margin-top: 2px;
    }

    .status-block strong {
        display: block;
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .status-block p {
        margin-top: 7px;
        font-size: 0.85rem;
        line-height: 1.62;
        color: var(--text-secondary);
    }

.status-good {
    border-color: rgba(23, 131, 95, 0.34);
    background: linear-gradient(120deg, rgba(23, 131, 95, 0.09) 0%, transparent 60%), var(--bg-secondary);
}

    .status-good i { color: var(--success); }

.status-warn {
    border-color: rgba(181, 129, 31, 0.34);
    background: linear-gradient(120deg, rgba(181, 129, 31, 0.09) 0%, transparent 60%), var(--bg-secondary);
}

    .status-warn i { color: var(--warning); }

.stat-sub {
    display: block;
    min-width: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.stat-value small {
    margin-left: 5px;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
}

.stat-primary { border-color: var(--gold-tint-line); }
.stat-primary .stat-value { color: var(--gold-text); }
.stat-good .stat-value { color: var(--success); }
.stat-warn .stat-value { color: var(--warning); }
.stat-accent .stat-value { color: var(--gold-text); }

/* A banded figure — the real one is behind the paywall. The card says so with a padlock rather than by looking
   broken, which is how an un-styled band used to read. */
.stat-locked {
    border-style: dashed;
    border-color: var(--gold-tint-line);
}

    .stat-locked .stat-value {
        color: var(--text-secondary);
    }

    .stat-locked .stat-label i {
        margin-left: 6px;
        font-size: 0.9em;
        color: var(--gold-text);
    }

.summary-h2 {
    margin: 38px 0 16px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.fee-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    margin-bottom: 10px;
    transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

    .fee-row:hover {
        transform: translateX(3px);
        border-color: var(--border-hover);
    }

.fee-flag i { font-size: 1rem; }
.fee-on .fee-flag i { color: var(--success); }
.fee-off .fee-flag i { color: var(--text-muted); }
.fee-off { opacity: 0.66; }

.fee-body {
    flex: 1;
    min-width: 0;
}

    .fee-body strong {
        display: block;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .fee-body span {
        display: block;
        margin-top: 3px;
        font-size: 0.76rem;
        line-height: 1.5;
        color: var(--text-muted);
    }

.fee-amount {
    flex-shrink: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--gold-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .fee-amount i {
        margin-right: 4px;
        font-size: 0.7rem;
    }

.fee-off .fee-amount { color: var(--text-muted); }

.summary-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 34px;
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE PAYWALL
   --------------------------------------------------------------------------------------------------------------------- */

.paywall {
    position: relative;
    margin-top: 40px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--gold-tint-line);
    box-shadow: var(--shadow-lg), 0 0 120px -70px var(--accent-glow);
}

.paywall-blur {
    padding: 26px 30px;
    background: var(--bg-secondary);
    filter: blur(5px);
    opacity: 0.5;
    user-select: none;
    pointer-events: none;
}

.pw-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

    .pw-row em {
        font-style: normal;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: 0.04em;
    }

.paywall-panel {
    position: relative;
    padding: clamp(28px, 4vw, 44px);
    background: linear-gradient(165deg, var(--gold-tint) 0%, transparent 46%), var(--bg-secondary);
    border-top: 1px solid var(--gold-tint-line);
}

.paywall-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--on-accent);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.paywall-title {
    margin: 18px 0 12px;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.6vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.14;
    color: var(--text-primary);
}

    .paywall-title em {
        font-style: normal;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

.paywall-lede {
    max-width: 620px;
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------------------------------------------------
   THE LAST ASK  —  exit intent

   Hidden until script opens it, and it opens once per visit at most. Kept under the toast layer on purpose: a
   confirmation the reader cannot see because a panel is over it is worse than no panel.
   --------------------------------------------------------------------------------------------------------------------- */

.exit-modal {
    position: fixed;
    inset: 0;
    z-index: 9980;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(7, 13, 11, 0.62);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

    .exit-modal.exit-on {
        opacity: 1;
        visibility: visible;
    }

.exit-card {
    position: relative;
    width: min(460px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: clamp(24px, 4vw, 32px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-hover);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    transform: translateY(12px) scale(0.985);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    .exit-modal.exit-on .exit-card { transform: none; }

.exit-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
}

    .exit-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.exit-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(23, 131, 95, 0.14);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--success);
}

[data-theme="dark"] .exit-eyebrow { background: rgba(53, 196, 141, 0.17); }

.exit-title {
    margin: 13px 0 9px;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--text-primary);
}

.exit-lede {
    margin-bottom: 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.exit-fine {
    margin-top: 12px;
    font-size: 0.71rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* ---- The link itself -------------------------------------------------------------------------------------------- */

.share-box {
    display: flex;
    gap: 9px;
    margin-bottom: 4px;
}

    .share-box .form-input {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.8rem;
        font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    }

    .share-box .btn { flex: 0 0 auto; }

/* ---- A shared report, opened by somebody who has never been here before ------------------------------------------ */

.share-head {
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
}

.share-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--gold-tint);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.share-meta {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

    .share-meta strong { color: var(--text-secondary); }

.share-foot {
    margin-top: 40px;
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    text-align: center;
}

    .share-foot p {
        margin-bottom: 18px;
        font-size: 0.82rem;
        line-height: 1.65;
        color: var(--text-secondary);
    }

    .share-foot strong { color: var(--text-primary); }

.exit-done {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 18px 0 8px;
    text-align: center;
}

    .exit-done i {
        font-size: 2rem;
        color: var(--success);
    }

    .exit-done p {
        font-size: 0.88rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

@media (prefers-reduced-motion: reduce) {
    .exit-modal,
    .exit-card { transition: none; }
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE LOSS, DECOMPOSED

   The headline figure again, in units a person can feel. Six figures is an abstraction — everybody has learned to
   read it as a number off a brochure. A daily rate is a bill, and it is the same arithmetic.
   --------------------------------------------------------------------------------------------------------------------- */

.paywall-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0 18px;
}

.pb-item {
    display: grid;
    gap: 3px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(192, 57, 43, 0.26);
    background: rgba(192, 57, 43, 0.06);
}

[data-theme="dark"] .pb-item {
    border-color: rgba(232, 105, 92, 0.26);
    background: rgba(232, 105, 92, 0.08);
}

.pb-value {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 3.1vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--error);
    font-variant-numeric: tabular-nums;
}

.pb-label {
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* The last one is the total, so it carries the weight the other two build towards. */
.pb-total {
    border-color: var(--error);
}

@media (max-width: 560px) {
    .paywall-breakdown { grid-template-columns: minmax(0, 1fr); gap: 8px; }

    .pb-item {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        gap: 10px;
        padding: 11px 14px;
    }
}

/* Their own inputs, echoed. Cheap to render and it is the line that stops the figure reading as marketing. */
.paywall-proof {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--text-muted);
}

    .paywall-proof i {
        margin-top: 3px;
        color: var(--success);
    }

    .paywall-proof a {
        color: var(--gold-text);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

/* ---------------------------------------------------------------------------------------------------------------------
   THE TURN

   Everything above this panel is red, because everything above it is what goes wrong. This is the one block on the
   screen that is the way out, so it is the one block that is jade — the colour swap is doing the argument's work
   before a word of it is read. It also gets the heaviest frame on the page: it is the last thing between the
   reader and the button.
   --------------------------------------------------------------------------------------------------------------------- */

.paywall-solution {
    margin: 0 0 22px;
    padding: clamp(18px, 2.6vw, 24px);
    border-radius: 17px;
    border: 1px solid var(--gold);
    background:
        radial-gradient(120% 130% at 0% 0%, var(--gold-tint) 0%, transparent 62%),
        var(--bg-secondary);
    box-shadow: 0 0 60px -34px var(--accent-glow), inset 0 0 0 1px var(--gold-tint);
}

.pso-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--gold-tint);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.pso-title {
    margin: 12px 0 9px;
    font-family: var(--font-display);
    font-size: clamp(1.12rem, 2.7vw, 1.42rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--text-primary);
}

    .pso-title em {
        font-style: normal;
        color: var(--gold-text);
        font-variant-numeric: tabular-nums;
    }

.pso-body {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

    .pso-body strong { color: var(--text-primary); }

/* The whole argument as three numbers: what is at risk, what it costs to remove the risk, and the ratio between
   them. The middle one is the only figure on the page the reader controls, so it is the one that is tinted. */
.pso-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 14px;
}

.pso-fig {
    display: grid;
    gap: 3px;
    padding: 13px 14px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
}

.pso-value {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.9vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.pso-label {
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.pso-fig-loss .pso-value { color: var(--error); }

.pso-fig-cost {
    border-color: var(--gold);
    background: var(--gold-tint);
}

    .pso-fig-cost .pso-value { color: var(--gold-text); }

.pso-fig-ratio .pso-value { color: var(--gold-text); }

/* The line that reframes the price. Given the weight of a pull quote because it is the sentence people repeat to
   whoever else is in the room. */
.pso-close {
    padding-top: 13px;
    border-top: 1px solid var(--gold-tint-line);
    font-size: clamp(0.88rem, 2.2vw, 1rem);
    line-height: 1.55;
    color: var(--text-secondary);
}

    .pso-close strong { color: var(--text-primary); font-weight: 700; }

/* ---- "Show me exactly what I get" ---------------------------------------------------------------------------------
   The list is one click away rather than in the flow, because the paragraph above already says what the report does
   and the panel is long enough. Opening it is also a small act of intent from somebody who was going to read it.
   ------------------------------------------------------------------------------------------------------------- */

.pso-reveal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 15px;
    border: 1px solid var(--gold-tint-line);
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.79rem;
    font-weight: 700;
    color: var(--gold-text);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

    .pso-reveal:hover {
        border-color: var(--gold);
        background: var(--gold-tint);
    }

    .pso-reveal i {
        font-size: 0.68rem;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .pso-reveal[aria-expanded="true"] i { transform: rotate(180deg); }

.paywall-reveal {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}

    .paywall-reveal.reveal-open { opacity: 1; }

    /* The list carried its own spacing when it sat in the flow; inside the drawer the top margin is the gap. */
    .paywall-reveal .paywall-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin: 16px 0 2px;
    }

@media (prefers-reduced-motion: reduce) {
    .paywall-reveal { transition: none; }
    .pso-reveal i { transition: none; }
}

@media (max-width: 560px) {
    /* Three figures at 100px each is unreadable — they stack, and the ratio keeps its own line. */
    .pso-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .pso-fig-ratio { grid-column: 1 / -1; }
}

.paywall-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 11px 24px;
    margin: 26px 0 28px;
}

    .paywall-list li {
        display: flex;
        gap: 11px;
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--text-secondary);
    }

    .paywall-list i {
        margin-top: 3px;
        flex-shrink: 0;
        font-size: 0.72rem;
        color: var(--gold);
    }

.paywall-anchor {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.pa-item {
    flex: 1;
    min-width: 190px;
    padding: 16px 18px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

    .pa-item span {
        display: block;
        font-size: 0.72rem;
        color: var(--text-muted);
    }

    .pa-item strong {
        display: block;
        margin-top: 5px;
        font-family: var(--font-display);
        font-size: 1.24rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
    }

.pa-strike strong {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--error);
    color: var(--text-muted);
}

.pa-win {
    border-color: var(--gold);
    background: var(--gold-tint);
}

    .pa-win strong { color: var(--gold-text); }

/* ---------------------------------------------------------------------------------------------------------------------
   THE INLINE BUY PANEL

   Sits directly under the figure their own calculation produced, so the distance between wanting the report and
   owning it is one tap. Framed as a raised slab rather than a plain button so it reads as the point of the page.
   --------------------------------------------------------------------------------------------------------------------- */

.inline-buy {
    margin-top: 22px;
    padding: 20px 20px 18px;
    border: 1px solid var(--gold-tint-line);
    border-radius: 20px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
}

.inline-buy-label {
    display: block;
    margin-bottom: 12px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Three terms on one line, always. Cycling between them must not move anything else on the page. */
.tier-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--bg-tertiary);
}

.tier-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 11px 4px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

    .tier-tab:hover {
        background: var(--bg-secondary);
        border-color: var(--border-hover);
        transform: translateY(-1px);
    }

    .tier-tab .tier-term {
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--text-secondary);
        transition: color 0.22s ease;
    }

    .tier-tab .tier-price {
        font-family: var(--font-display);
        font-size: 1.28rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
        transition: color 0.22s ease;
    }

.tier-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gradient-primary);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--on-accent);
}

.tier-on {
    background: var(--bg-secondary);
    border-color: var(--gold);
    box-shadow: 0 6px 18px -10px var(--accent-glow), inset 0 0 0 1px var(--gold-tint);
}

    .tier-on .tier-term { color: var(--gold-text); }

    .tier-on .tier-price { color: var(--gold-text); }

    .tier-on:hover { border-color: var(--gold); }

/* ---------------------------------------------------------------------------------------------------------------------
   THE OFFER

   Shown only while the server says one is running. Everything here is driven by WasPrice and OfferEnds, so when the
   offer lapses these elements are simply never emitted.
   --------------------------------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------------------------------
   "IF THIS IS YOU"

   Five cards of recognition and one of relief. The last card is the answer, so it is the only one that carries the
   theme colour — everything before it is deliberately flat and grey, because that is how the reader feels.
   --------------------------------------------------------------------------------------------------------------------- */

.pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
}

.pain-card {
    padding: 26px 24px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

    .pain-card:hover {
        transform: translateY(-3px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }

.pain-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--bg-tertiary);
    font-size: 1.05rem;
    color: var(--text-muted);
    transition: background 0.3s ease, color 0.3s ease;
}

    .pain-card h3 {
        margin-bottom: 9px;
        font-family: var(--font-display);
        font-size: 1.06rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
    }

    .pain-card p {
        font-size: 0.9rem;
        line-height: 1.72;
        color: var(--text-secondary);
    }

/* The turn. After five cards of the problem, this one is the answer and has to look like it. */
.pain-card-answer {
    border-color: var(--gold-tint-line);
    background: linear-gradient(150deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary);
}

    .pain-card-answer .pain-icon {
        background: var(--gradient-primary);
        color: var(--on-accent);
    }

    .pain-card-answer h3 { color: var(--gold-text); }

/* Why nobody has already told them. Three columns, stated flatly. */
.gapfill {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    margin-top: 22px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--rule);
    overflow: hidden;
}

.gapfill-item {
    padding: 22px 22px 20px;
    background: var(--bg-secondary);
}

    .gapfill-item strong {
        display: block;
        margin-bottom: 7px;
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: -0.015em;
        color: var(--text-primary);
    }

    .gapfill-item span {
        display: block;
        font-size: 0.85rem;
        line-height: 1.68;
        color: var(--text-secondary);
    }

@media (max-width: 560px) {

    .pain-card { padding: 20px 18px 18px; }

    .pain-icon { width: 38px; height: 38px; margin-bottom: 12px; }

    .gapfill-item { padding: 18px; }
}


.offer-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 12px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--gradient-primary);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--on-accent);
    box-shadow: 0 8px 22px -12px var(--accent-glow);
}

    .offer-flag i { font-size: 0.78rem; }

    .offer-flag em {
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        font-style: normal;
        font-size: 0.68rem;
    }

.price-was {
    display: block;
    margin-bottom: -2px;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--error);
    color: var(--text-muted);
}

.offer-line {
    margin-top: -4px;
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold-text);
}

    .offer-line strong { color: var(--gold-text); }

/* The featured card carries the offer, so it gets the stronger frame. */
.pricing-offer {
    border-color: var(--gold);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--gold-tint);
}

/* The same offer, compressed into a tab. */
.tier-deal .tier-price s {
    display: block;
    margin-bottom: -1px;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration-color: var(--error);
    color: var(--text-muted);
}

.tn-deal {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-weight: 600;
    color: var(--gold-text);
}

.tier-note {
    margin: 12px 2px 14px;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

    .tier-note strong { color: var(--text-primary); }

.inline-buy-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px 16px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--rule);
    font-size: 0.7rem;
    color: var(--text-muted);
}

    .inline-buy-foot i {
        margin-right: 5px;
        color: var(--gold);
    }

.inline-buy-more {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 11px;
    font-size: 0.74rem;
    color: var(--text-muted);
}

    .inline-buy-more a {
        color: var(--gold-text);
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        border-bottom: 1px solid var(--gold-tint-line);
        transition: border-color 0.2s ease;
    }

        .inline-buy-more a:hover { border-bottom-color: var(--gold); }


/* ---------------------------------------------------------------------------------------------------------------------
   THE VALUE REMINDER

   Their own figure, carried onto the pricing and checkout pages. It is the whole argument, so it should be the
   first thing on the page and it should not look like a decoration.
   --------------------------------------------------------------------------------------------------------------------- */

.value-reminder {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 720px;
    margin: 0 auto 30px;
    padding: 15px 20px;
    border: 1px solid var(--gold-tint-line);
    border-radius: 16px;
    background: var(--gold-tint);
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE PRICING PAGE INTRO  —  the cost of getting it wrong, beside what you keep

   Two panels, matching heights, above the cards. The stretch is what makes it work: the left panel is short and the
   right one is wordy, so left to themselves they sit at different heights and the pair reads as two unrelated boxes
   rather than as one argument with two halves.

   It opens as a single column. Until the calculator has been run there is no figure to put on the left, and a lone
   panel in a half width column looks like something failed to load — pi-solo is dropped in script the moment there
   is a real number to show.
   --------------------------------------------------------------------------------------------------------------------- */

.pricing-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(16px, 2vw, 22px);
    margin: 0 0 clamp(22px, 3vw, 32px);
}

    .pricing-intro.pi-solo {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Both children fill the row rather than sitting at their natural heights. */
    .pricing-intro > * {
        min-width: 0;
        margin: 0;
        max-width: none;
    }

    .pricing-intro > #PricingKeep {
        display: grid;
    }

    .pricing-intro .keep-note {
        height: 100%;
        align-content: center;
        margin: 0;
        padding: clamp(20px, 2.6vw, 28px);
        border-radius: 16px;
    }

@media (max-width: 860px) {
    .pricing-intro {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---- The left half: what this decision could take off them ------------------------------------------------------
   The figure is the whole panel. It gets the display face at hero size, the gradient sheen every other headline
   number on the site uses, and it counts up on arrival — a number that lands is read; a number that is simply
   already there is skimmed past on the way to the prices.
   ------------------------------------------------------------------------------------------------------------ */

.vr-loss {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    padding: clamp(20px, 2.6vw, 28px);
    border-color: rgba(192, 57, 43, 0.30);
    background:
        radial-gradient(120% 130% at 0% 0%, rgba(192, 57, 43, 0.13) 0%, transparent 58%),
        var(--bg-secondary);
    overflow: hidden;
}

[data-theme="dark"] .vr-loss {
    border-color: rgba(232, 105, 92, 0.28);
    background:
        radial-gradient(120% 130% at 0% 0%, rgba(232, 105, 92, 0.14) 0%, transparent 58%),
        var(--bg-secondary);
}

.vr-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.vr-loss .vr-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(192, 57, 43, 0.13);
    color: var(--error);
    font-size: 0.85rem;
}

[data-theme="dark"] .vr-loss .vr-icon { background: rgba(232, 105, 92, 0.16); }

.vr-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--error);
}

.vr-loss .vr-body {
    display: block;
    font-size: 0.86rem;
}

/* Hero size, and it wins the panel. clamp() keeps a seven figure loss inside a half width column. */
.vr-loss .vr-figure {
    display: block;
    margin: 0 0 6px;
    font-size: clamp(2.4rem, 6.2vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

/* The count up is driven from script; this is the arrival, one pass only.

   Both animations have to be named in the one declaration. .money-shine carries the sheen on its own `animation`
   shorthand, and a second rule setting `animation` would replace it rather than add to it — the sheen would go the
   moment the figure landed. Listed together, the arrival plays once and the sheen keeps its own 9 second cycle.
   The class is only ever applied by script, and script does not apply it when reduced motion is asked for. */
.vr-loss .vr-figure.vr-figure-pop {
    animation:
        vrFigurePop 0.75s cubic-bezier(0.16, 1, 0.3, 1) both,
        moneyShine 9s ease-in-out infinite;
}

@keyframes vrFigurePop {
    0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
    60%  { opacity: 1; transform: translateY(0) scale(1.015); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.vr-loss .vr-action {
    align-self: flex-start;
    margin-top: 2px;
}

/* Nothing has been calculated, so there is no figure to dress up — the panel drops back to plain type and asks. */
.vr-loss.vr-prompt {
    border-color: var(--border);
    background: var(--bg-tertiary);
}

    .vr-loss.vr-prompt .vr-icon { background: var(--text-muted); color: var(--on-accent); }

    .vr-loss.vr-prompt .vr-eyebrow { display: none; }

@media (max-width: 860px) {
    .vr-loss .vr-figure { font-size: clamp(2.2rem, 11vw, 3rem); }
}

.vr-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--gradient-primary);
    font-size: 1rem;
    color: var(--on-accent);
}

.vr-body {
    min-width: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

    .vr-body strong { color: var(--text-primary); }

    /* The figure itself. A class rather than :first-child, because the pricing panel puts an eyebrow above it. */
    .vr-figure {
        margin-right: 6px;
        font-family: var(--font-display);
        font-size: 1.24rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--gold-text);
    }

.vr-action {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Nobody has run anything yet, so there is no figure to celebrate — the strip asks instead of claims. */
.vr-prompt {
    border-color: var(--border);
    background: var(--bg-tertiary);
}

    .vr-prompt .vr-icon { background: var(--text-muted); }

    /* In the prompt state the element holds a sentence, not a number. The gradient fill has to come off with it,
       or the copy renders as clipped jade text. */
    .vr-prompt .vr-figure {
        display: block;
        margin-right: 0;
        margin-bottom: 2px;
        font-size: 0.95rem;
        line-height: 1.4;
        letter-spacing: -0.01em;
        background-image: none;
        -webkit-text-fill-color: currentColor;
        color: var(--text-primary);
        filter: none;
        animation: none;
    }

/* Narrow screens: the tabs stay on one line — that is the point of them — so the padding gives way instead. */
@media (max-width: 560px) {

    .inline-buy {
        padding: 16px 13px 15px;
        border-radius: 17px;
    }

    .tier-tabs { gap: 5px; }

    .tier-tab { padding: 10px 2px 9px; }

        .tier-tab .tier-term { font-size: 0.68rem; }

        .tier-tab .tier-price { font-size: 1.1rem; }

    /* Two of the three tabs carry a badge, so at this width they have to give ground or they collide. */
    .tier-badge {
        padding: 2px 6px;
        font-size: 0.5rem;
        letter-spacing: 0.04em;
    }

    .tier-note { font-size: 0.74rem; }

    .inline-buy-foot { gap: 5px 12px; font-size: 0.66rem; }

    /* flex-wrap drops the button onto its own row rather than squeezing the sentence into a column. */
    .value-reminder {
        gap: 12px;
        padding: 13px 15px;
        margin-bottom: 22px;
        flex-wrap: wrap;
    }

    .vr-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 0.85rem; }

    .vr-body { font-size: 0.79rem; }

        .vr-body strong:first-child { font-size: 1.1rem; }

    .vr-action { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------------------------------------------------
   "SEND IT TO ME INSTEAD"

   The second offer on the paywall, and for most visitors the only one they take today. It used to be a rule and two
   lines of grey text under the buy button, which read as a footnote and performed like one. It is now a panel in its
   own right: its own surface, its own eyebrow, its own headline and a primary button — deliberately distinct from
   the gold of the paid tiers so it reads as a different, free thing rather than a weaker version of the purchase.
   --------------------------------------------------------------------------------------------------------------------- */

.paywall-email {
    margin-top: 30px;
    padding: clamp(20px, 3vw, 26px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(23, 131, 95, 0.32);
    background: linear-gradient(140deg, rgba(23, 131, 95, 0.10) 0%, rgba(23, 131, 95, 0.02) 55%), var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.pe-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(23, 131, 95, 0.14);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--success);
}

.pe-title {
    margin: 12px 0 8px;
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 2.4vw, 1.28rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
}

.pe-lede {
    margin-bottom: 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.pe-form .form-input {
    background: var(--bg-secondary);
}

.pe-form .btn {
    white-space: nowrap;
}

.pe-fine {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 13px;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-muted);
}

    .pe-fine i {
        margin-top: 2px;
        color: var(--success);
    }

[data-theme="dark"] .paywall-email {
    border-color: rgba(53, 196, 141, 0.3);
    background: linear-gradient(140deg, rgba(53, 196, 141, 0.11) 0%, rgba(53, 196, 141, 0.02) 55%), var(--bg-primary);
}

[data-theme="dark"] .pe-eyebrow { background: rgba(53, 196, 141, 0.17); }

.inline-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .inline-form input {
        flex: 1;
        min-width: 210px;
    }

.paywall-sent {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.85rem;
    color: var(--success);
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE FULL REPORT
   --------------------------------------------------------------------------------------------------------------------- */

.report-toolbar {
    position: sticky;
    top: 88px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding: 13px 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-glass);
    backdrop-filter: blur(22px);
    box-shadow: var(--shadow-sm);
}

.report-toolbar-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.report-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--success);
}

.report-building {
    padding: 90px 24px;
    text-align: center;
}

    .report-building i {
        font-size: 1.7rem;
        color: var(--gold);
    }

    .report-building h3 {
        margin: 18px 0 8px;
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .report-building p {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

/* ---- cover ---- */

.rp-cover {
    position: relative;
    padding: clamp(38px, 6vw, 68px) clamp(26px, 5vw, 56px);
    margin-bottom: 44px;
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, #071B16 0%, #0F3A30 55%, #071B16 100%);
    color: #EDF6F2;
    overflow: hidden;
}

    .rp-cover::after {
        content: '';
        position: absolute;
        inset: auto -20% -60% auto;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(46, 211, 169, 0.28) 0%, transparent 66%);
        pointer-events: none;
    }

.rp-cover-mark {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(237, 246, 242, 0.62);
}

.rp-cover-title {
    margin: 20px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

    .rp-cover-title em {
        font-style: normal;
        color: #4AE3BC;
    }

.rp-cover-for {
    font-size: 0.95rem;
    color: rgba(237, 246, 242, 0.72);
}

.rp-cover-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(237, 246, 242, 0.16);
}

    .rp-cover-meta span {
        display: grid;
        gap: 4px;
        font-size: 0.85rem;
        color: #EDF6F2;
    }

    .rp-cover-meta strong {
        font-size: 0.63rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(237, 246, 242, 0.5);
    }

/* ---- sections ---- */

.rp-section {
    margin-bottom: 54px;
    scroll-margin-top: 90px;
}

.rp-section-head {
    display: flex;
    gap: 18px;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
}

.rp-section-num {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gold-text);
    padding-top: 5px;
}

.rp-section-head h3 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.8vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.rp-section-lede {
    margin-top: 8px;
    max-width: 720px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.rp-h4 {
    margin: 26px 0 14px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rp-lead-in {
    margin-bottom: 16px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.rp-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 26px;
    align-items: start;
}

.rp-split-top { margin-top: 26px; }

/* ---- stats ---- */

.rp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.rp-stats-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.rp-stat {
    display: grid;
    gap: 6px;
    padding: 20px;
    border-radius: 17px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

    .rp-stat:hover {
        transform: translateY(-3px);
        border-color: var(--border-hover);
    }

.rp-stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rp-stat-value {
    font-family: var(--font-display);
    font-size: 1.62rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

    .rp-stat-value small {
        display: block;
        margin-top: 4px;
        font-family: var(--font-sans);
        font-size: 0.66rem;
        font-weight: 400;
        letter-spacing: 0;
        color: var(--text-muted);
    }

.rp-stat-sub {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.rp-stat-primary { border-color: var(--gold-tint-line); background: linear-gradient(145deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary); }
.rp-stat-primary .rp-stat-value { color: var(--gold-text); }
.rp-stat-good .rp-stat-value { color: var(--success); }
.rp-stat-warn .rp-stat-value { color: var(--warning); }
.rp-stat-accent .rp-stat-value { color: var(--gold-text); }

/* ---- callouts ---- */

.rp-callout {
    padding: 19px 22px;
    border-radius: 16px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    background: var(--bg-tertiary);
    margin-bottom: 22px;
}

    .rp-callout strong {
        display: block;
        font-family: var(--font-display);
        font-size: 0.97rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .rp-callout p {
        margin-top: 7px;
        font-size: 0.85rem;
        line-height: 1.65;
        color: var(--text-secondary);
    }

.rp-callout-good { border-left-color: var(--success); }
.rp-callout-key { border-left-color: var(--gold); }
.rp-callout-warn { border-left-color: var(--warning); }

/* ---- tables ---- */

.rp-scroll {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--border);
}

.rp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
    border-radius: 16px;
    overflow: hidden;
}

.rp-scroll .rp-table { border-radius: 0; }

    .rp-table th,
    .rp-table td {
        padding: 12px 15px;
        text-align: left;
        font-size: 0.82rem;
        border-bottom: 1px solid var(--rule);
        white-space: nowrap;
    }

    .rp-table thead th {
        background: var(--bg-tertiary);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .rp-table td { color: var(--text-secondary); }
    .rp-table td:first-child { color: var(--text-primary); white-space: normal; }

    .rp-table tbody tr:last-child td { border-bottom: 0; }

    .rp-table tbody tr:hover td { background: var(--gold-tint); }

.rp-table-tight th,
.rp-table-tight td { padding: 9px 13px; }

.rp-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.rp-strong { font-weight: 700; color: var(--text-primary) !important; }
.rp-pos { color: var(--success) !important; }
.rp-neg { color: var(--error) !important; }

.rp-table .rp-total td,
.rp-table .rp-total th {
    background: var(--bg-tertiary);
    font-weight: 700;
    color: var(--text-primary);
    border-top: 1px solid var(--border);
}

.rp-table .rp-sub td {
    font-weight: 600;
    color: var(--text-primary);
}

.rp-table .rp-lead td {
    background: var(--gold-tint);
    font-weight: 600;
}

    .rp-table .rp-lead td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

.rp-rank {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-muted) !important;
}

.rp-lead .rp-rank { color: var(--gold-text) !important; }

.rp-tag {
    display: inline-block;
    margin-left: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gold-tint);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.rp-flag {
    display: block;
    margin-top: 3px;
    font-size: 0.68rem;
    color: var(--warning);
}

.rp-hint {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--text-muted);
    white-space: normal;
}

/* ---- charts ---- */

.rp-chart {
    margin: 22px 0;
    padding: 16px 14px 12px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    min-width: 0;
    overflow: hidden;
}

.rp-chart-canvas {
    width: 100%;
    min-height: 240px;
    min-width: 220px;
}

.rp-chart figcaption {
    margin-top: 10px;
    padding: 0 6px;
    font-size: 0.73rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ---- notes ---- */

.rp-notes {
    margin-top: 22px;
    padding: 20px 22px;
    border-radius: 16px;
    background: var(--bg-tertiary);
}

    .rp-notes p {
        font-size: 0.83rem;
        line-height: 1.7;
        color: var(--text-secondary);
    }

        .rp-notes p + p { margin-top: 12px; }

    .rp-notes strong { color: var(--text-primary); }

/* ---- observations ---- */

.rp-observations {
    display: grid;
    gap: 14px;
}

.rp-obs {
    padding: 21px 24px;
    border-radius: 17px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    background: var(--bg-secondary);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

    .rp-obs:hover {
        transform: translateX(4px);
        box-shadow: var(--shadow-sm);
    }

    .rp-obs h4 {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text-primary);
    }

    .rp-obs p {
        margin-top: 8px;
        font-size: 0.85rem;
        line-height: 1.68;
        color: var(--text-secondary);
    }

.rp-obs-headline {
    border-left-color: var(--gold);
    background: linear-gradient(120deg, var(--gold-tint) 0%, transparent 55%), var(--bg-secondary);
}

    .rp-obs-headline h4 { font-size: 1.14rem; }

.rp-obs-good { border-left-color: var(--success); }
.rp-obs-warn { border-left-color: var(--warning); }
.rp-obs-watch { border-left-color: var(--chart-2); }
.rp-obs-key { border-left-color: var(--gold); }
.rp-obs-note { border-left-color: var(--text-muted); }

/* ---- questions ---- */

.rp-questions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.rp-qgroup {
    padding: 22px 24px;
    border-radius: 17px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

    .rp-qgroup h4 {
        margin-bottom: 14px;
        padding-bottom: 11px;
        border-bottom: 1px solid var(--rule);
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--gold-text);
    }

    .rp-qgroup ul {
        list-style: none;
        display: grid;
        gap: 11px;
    }

    .rp-qgroup li {
        position: relative;
        padding-left: 20px;
        font-size: 0.83rem;
        line-height: 1.55;
        color: var(--text-secondary);
    }

        .rp-qgroup li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 1px solid var(--gold);
        }

/* ---- compare cards ---- */

.rp-compare-card {
    padding: 24px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

    .rp-compare-card h4 {
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .rp-compare-card p {
        font-size: 0.83rem;
        line-height: 1.65;
        color: var(--text-secondary);
    }

.rp-compare-figure {
    margin: 12px 0 12px !important;
    font-family: var(--font-display);
    font-size: 1.85rem !important;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--gold-text) !important;
}

    .rp-compare-figure small {
        display: block;
        margin-top: 3px;
        font-family: var(--font-sans);
        font-size: 0.68rem;
        font-weight: 400;
        letter-spacing: 0;
        color: var(--text-muted);
    }

/* ---- disclaimer ---- */

.rp-disclaimer {
    padding: 26px 28px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

    .rp-disclaimer h3 {
        margin-bottom: 14px;
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .rp-disclaimer p {
        font-size: 0.8rem;
        line-height: 1.72;
        color: var(--text-secondary);
    }

        .rp-disclaimer p + p { margin-top: 12px; }

    .rp-disclaimer strong { color: var(--text-primary); }

.rp-fineprint {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
   PRICING AND ACCESS
   --------------------------------------------------------------------------------------------------------------------- */

.access-live {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    margin-bottom: 28px;
    border-radius: 17px;
    border: 1px solid rgba(23, 131, 95, 0.34);
    background: linear-gradient(120deg, rgba(23, 131, 95, 0.09) 0%, transparent 60%), var(--bg-secondary);
}

    .access-live > i {
        font-size: 1.3rem;
        color: var(--success);
    }

    .access-live > div { flex: 1; min-width: 220px; }

    .access-live strong {
        display: block;
        font-size: 0.96rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .access-live span {
        display: block;
        margin-top: 4px;
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .access-live em {
        font-style: normal;
        font-weight: 600;
        color: var(--gold-text);
    }

.value-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
    margin: clamp(36px, 5vw, 60px) 0;
}

.value-item {
    padding: 24px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    text-align: center;
}

    .value-item strong {
        display: block;
        font-family: var(--font-display);
        font-size: 1.55rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--text-primary);
    }

    .value-item span {
        display: block;
        margin-top: 8px;
        font-size: 0.78rem;
        line-height: 1.55;
        color: var(--text-muted);
    }

.value-item-win {
    border-color: var(--gold);
    background: var(--gold-tint);
}

    .value-item-win strong { color: var(--gold-text); font-size: 2rem; }

.pricing-faq { margin-top: clamp(40px, 6vw, 70px); }

.saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.saved-card {
    padding: 22px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.5s ease;
}

    .saved-card:hover {
        transform: translateY(-4px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }

    .saved-card header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 14px;
    }

    .saved-card h3 {
        font-family: var(--font-display);
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.saved-ref {
    flex-shrink: 0;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.saved-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

    .saved-meta dt {
        font-size: 0.63rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .saved-meta dd {
        margin-top: 3px;
        font-size: 0.8rem;
        color: var(--text-primary);
    }

.saved-best {
    display: flex;
    gap: 9px;
    margin-bottom: 16px;
    padding: 10px 13px;
    border-radius: 12px;
    background: var(--gold-tint);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

    .saved-best i { color: var(--gold-text); margin-top: 2px; }

.saved-actions {
    display: flex;
    gap: 9px;
}


/* ---------------------------------------------------------------------------------------------------------------------
   GUIDES
   --------------------------------------------------------------------------------------------------------------------- */

.guides-cluster { margin-bottom: 48px; }

.guides-cluster-title {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gold-text);
}

.guides-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    gap: 18px;
}

.guide-card {
    display: block;
    cursor: pointer;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.5s ease;
}

    .guide-card:hover {
        transform: translateY(-5px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }

.guide-card-img {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--gold-tint) 0%, var(--bg-tertiary) 100%);
    overflow: hidden;
}

    .guide-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .guide-card:hover .guide-card-img img { transform: scale(1.05); }

.guide-card-noimg::after {
    content: '\f02d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    color: var(--gold-text);
    opacity: 0.35;
}

.guide-card-body { padding: 20px 22px 22px; }

    .guide-card-body h3 {
        font-family: var(--font-display);
        font-size: 1.03rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text-primary);
    }

    .guide-card-body p {
        margin: 9px 0 14px;
        font-size: 0.81rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

.guide-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-text);
}

    .guide-card-meta i { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }

    .guide-card:hover .guide-card-meta i { transform: translateX(4px); }


/* ---------------------------------------------------------------------------------------------------------------------
   AN INFORMATION PAGE
   --------------------------------------------------------------------------------------------------------------------- */

.guide {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px 90px;
}

.guide-hero {
    margin-bottom: 30px;
    padding-top: 0;
}

.guide-lede {
    margin-top: 16px;
    font-size: clamp(1rem, 2.1vw, 1.15rem);
    line-height: 1.65;
    color: var(--text-secondary);
}

.guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: 0.72rem;
    color: var(--text-muted);
}

    .guide-meta i { margin-right: 6px; color: var(--gold-text); }

.guide-image {
    margin: 0 0 34px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, var(--gold-tint) 0%, var(--bg-tertiary) 100%);
    aspect-ratio: 16 / 8;
}

    .guide-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.key-points {
    padding: 26px 28px;
    margin-bottom: 36px;
    border-radius: 20px;
    border: 1px solid var(--gold-tint-line);
    background: linear-gradient(155deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary);
}

    .key-points h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gold-text);
    }

    .key-points ul {
        list-style: none;
        display: grid;
        gap: 11px;
    }

    .key-points li {
        position: relative;
        padding-left: 21px;
        font-size: 0.88rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

        .key-points li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--gold);
        }

    .key-points strong { color: var(--text-primary); }

    .key-points a { color: var(--gold-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* The effective date and operating entity at the head of the legal pages. Set apart from the prose so it reads as
   the document's masthead rather than as its first paragraph. */
.legal-meta {
    margin-bottom: 26px;
    padding: 14px 16px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

    .legal-meta strong { color: var(--text-primary); }

.prose h2 {
    margin: 40px 0 16px;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.7vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.prose h3 {
    margin: 30px 0 12px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.prose p {
    margin-bottom: 17px;
    font-size: 0.96rem;
    line-height: 1.78;
    color: var(--text-secondary);
}

.prose ul,
.prose ol {
    margin: 0 0 20px 20px;
    display: grid;
    gap: 10px;
}

.prose li {
    font-size: 0.94rem;
    line-height: 1.72;
    color: var(--text-secondary);
}

.prose strong { color: var(--text-primary); font-weight: 600; }
.prose em { color: var(--text-primary); }

.prose a {
    color: var(--gold-text);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--gold-tint-line);
    transition: text-decoration-color 0.35s ease, color 0.35s ease;
}

    .prose a:hover {
        color: var(--gold-bright);
        text-decoration-color: var(--gold);
    }

.formula {
    padding: 18px 22px;
    margin-bottom: 20px !important;
    border-radius: 14px;
    border-left: 3px solid var(--gold);
    background: var(--bg-tertiary);
    font-family: 'Consolas', 'SF Mono', ui-monospace, monospace;
    font-size: 0.85rem !important;
    line-height: 1.9 !important;
    color: var(--text-primary) !important;
}

.figure-callout {
    padding: 18px 22px;
    margin-bottom: 20px !important;
    border-radius: 14px;
    background: var(--gold-tint);
    border: 1px solid var(--gold-tint-line);
    font-size: 1.02rem !important;
    color: var(--text-primary) !important;
}

    .figure-callout strong { color: var(--gold-text); }

.guide-table {
    width: 100%;
    margin: 8px 0 26px;
    border-collapse: collapse;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

    .guide-table th,
    .guide-table td {
        padding: 11px 15px;
        text-align: left;
        font-size: 0.83rem;
        border-bottom: 1px solid var(--rule);
    }

    .guide-table thead th {
        background: var(--bg-tertiary);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .guide-table td { color: var(--text-secondary); }
    .guide-table td:first-child { color: var(--text-primary); }
    .guide-table tbody tr:last-child td { border-bottom: 0; }
    .guide-table tbody tr:hover td { background: var(--gold-tint); }

    .guide-table .guide-total td {
        background: var(--bg-tertiary);
        font-weight: 700;
        color: var(--text-primary);
    }

    .guide-table a { color: var(--gold-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.guide-cta {
    margin-top: 44px;
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-tint-line);
    background: linear-gradient(140deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary);
    text-align: center;
}

    .guide-cta h3 {
        font-family: var(--font-display);
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-primary);
    }

    .guide-cta p {
        margin: 11px auto 22px;
        max-width: 520px;
        font-size: 0.87rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

.guide-next {
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid var(--rule);
}

    .guide-next h4 {
        margin-bottom: 14px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

/* ---- Read next, as cards --------------------------------------------------------------------------------------------
   This was a list of text links, and those rules are gone rather than overridden. .guide-card is display:block with
   its own border, radius and padding; an anchor rule sitting over it fought every one of those, and the display
   swap in particular turned the image and the body into side by side flex items. Nothing styles the anchor now, so
   the card renders exactly as it does on the guides index — which is the whole point of sharing guideCard().

   Two by two rather than four across. The article column is 820px against the index's 1240, so four in a row would
   be 182px each — the same card, a third of the width, which is precisely what "not the same as the guides list"
   looks like. At two across they land near 380px, which is the width they were designed at.
   ------------------------------------------------------------------------------------------------------------------ */

.guide-next .guides-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 620px) {
    .guide-next .guides-cards { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE STICKY BUY BAR
   --------------------------------------------------------------------------------------------------------------------- */

.buy-bar.buy-bar-show {
    display: flex;
    animation: buyBarIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes buyBarIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.buy-bar-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.35s ease, color 0.35s ease;
}

    .buy-bar-close:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
    }


/* ---------------------------------------------------------------------------------------------------------------------
   FOOTER COLUMNS
   --------------------------------------------------------------------------------------------------------------------- */

.footer-col h4 {
    margin-bottom: 13px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.footer-col a {
    display: block;
    margin-bottom: 9px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    transition: color 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

    .footer-col a:hover {
    color: #FFFFFF;
    transform: translateX(3px);
}


/* ---------------------------------------------------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------------------------------------------------- */

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

    .gap-versus { padding: 4px 0; }

    .rp-split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .calc-container,
    .report-container,
    .guide { padding-left: 18px; padding-right: 18px; }


    .report-toolbar {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }

    .report-toolbar-right .btn { flex: 1; justify-content: center; }

    .paywall-list { grid-template-columns: 1fr; }

    .rp-cover-meta { gap: 18px; }

    .guide-table { font-size: 0.78rem; }
}


/* ---------------------------------------------------------------------------------------------------------------------
   PRINT  —  the report, and nothing else
   --------------------------------------------------------------------------------------------------------------------- */

@media print {
    .nav,
    .mobile-menu,
    .mobile-menu-overlay,
    .footer,
    .buy-bar,
    .ambient-bg,
    .report-toolbar,
    .summary-actions,
    .paywall,
    .loading-overlay { display: none !important; }

    body { background: #FFFFFF !important; }

    .page { display: none !important; }

    .page.active {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .report-container { max-width: 100%; padding: 0; }

    .rp-section {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .rp-cover {
        page-break-after: always;
        break-after: page;
    }

    .rp-chart,
    .rp-scroll,
    .rp-obs { page-break-inside: avoid; break-inside: avoid; }

    .rp-scroll { overflow: visible; }

    .rp-table th,
    .rp-table td { white-space: normal; }

    a { text-decoration: none !important; color: inherit !important; }
}


/* =====================================================================================================================
   =====================================================================================================================
   CareFigures  —  corrections

   Appended last so these win on source order without having to raise specificity anywhere.
   =====================================================================================================================
   ===================================================================================================================== */


/* ---------------------------------------------------------------------------------------------------------------------
   FOOTER

   The inherited .footer-links was a single vertical stack of links. The new footer has four titled columns inside it,
   so it needs to be a grid — otherwise every column lands on top of the last one, hard against the left edge.
   --------------------------------------------------------------------------------------------------------------------- */



.footer-brand {
    display: block;
}



    





.footer-col {
    min-width: 0;
}

    

    

        

.footer-copy p {
    margin-bottom: 8px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.42);
}

    .footer-copy p strong {
        color: rgba(255, 255, 255, 0.62);
    }

@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }

    .footer-links {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        flex-direction: unset;
        gap: 26px;
    }
}


/* ---------------------------------------------------------------------------------------------------------------------
   VERTICAL RHYTHM

   Every page sits under a fixed 78px nav. The containers had no top padding of their own, so on any page whose first
   element was not a .page-header — an article, the report, the dashboard — the first heading landed hard against the
   nav. These give every page the same opening gap, and stop .page-header from double padding inside a container that
   already has its own gutters.
   --------------------------------------------------------------------------------------------------------------------- */

.calc-container,
.report-container,
.guide {
    padding-top: clamp(34px, 5vw, 58px);
}





.calc-container > .page-header,
.report-container .page-header,
.home-container > .page-header,
.dashboard-main > .page-header,
.guide > .page-header {
    max-width: none;
    margin: 0;
    padding: 0 0 clamp(24px, 3vw, 36px);
}

/* An article opens with its own header rather than a .page-header. */


.guide-hero .page-title {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    line-height: 1.06;
}

/* A section mark immediately followed by a title needs air between them, not just line height. */
.page-header .lx-sectionmark,
.guide-hero .lx-sectionmark,
.section-header .lx-sectionmark {
    display: block;
    margin-bottom: 14px;
}

.section-header .section-title {
    margin-top: 0;
}

.section-header .section-subtitle {
    margin-top: 16px;
}

/* Two blocks in a row inside the prose used to touch when the first ended in a table or a callout. */
.prose > .guide-table + h2,
.prose > .formula + h2,
.prose > .figure-callout + h2,
.prose > ul + h2,
.prose > ol + h2 {
    margin-top: 44px;
}

.prose > h2 + h3 {
    margin-top: 18px;
}

.prose > p + h3 {
    margin-top: 28px;
}

.summary-fees {
    margin-top: 8px;
}

.stats-grid + .summary-fees {
    margin-top: 34px;
}

/* The sticky report toolbar has to clear the fixed nav or it hides underneath it. */



/* ---------------------------------------------------------------------------------------------------------------------
   NAVIGATION

   The theme toggle sits to the LEFT of the primary call to action on desktop, and stays in the bar on mobile — to the
   left of the menu button — rather than being buried inside the drawer.
   --------------------------------------------------------------------------------------------------------------------- */



@media (max-width: 768px) {
    /* Overrides the earlier rule that hid the toggle alongside the desktop nav links. */
    #theme-toggle-desktop {
        display: block;
    }

    /* With the toggle now living in the bar, the copy inside the drawer would be a second one. */
    

    .nav-actions {
        gap: 10px;
    }

    .access-pill {
        padding: 6px 10px;
        font-size: 0.68rem;
    }
}

@media (max-width: 380px) {
    .access-pill {
        display: none !important;
    }
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE MEMBER DASHBOARD

   Shown on the home page instead of the sales funnel once a visitor is signed in with live access. Selling to somebody
   who has already bought is just noise in their way.
   --------------------------------------------------------------------------------------------------------------------- */

#MemberHome {
    display: none;
}

html.has-access.signed-in #MemberHome {
    display: block;
}

html.has-access.signed-in .funnel-only {
    display: none !important;
}

.dash-hero {
    position: relative;
    padding: clamp(32px, 5vw, 54px) clamp(24px, 4vw, 48px);
    margin-bottom: 28px;
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, #071B16 0%, #0F3A30 58%, #071B16 100%);
    color: #EDF6F2;
    overflow: hidden;
}

    .dash-hero::after {
        content: '';
        position: absolute;
        inset: auto -14% -70% auto;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(46, 211, 169, 0.26) 0%, transparent 66%);
        pointer-events: none;
    }

.dash-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.dash-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #4AE3BC;
}

.dash-title {
    margin: 14px 0 8px;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.032em;
    line-height: 1.1;
}

.dash-sub {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(237, 246, 242, 0.72);
    max-width: 46ch;
}

.dash-meter {
    min-width: 210px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(237, 246, 242, 0.18);
    background: rgba(7, 19, 16, 0.5);
    backdrop-filter: blur(10px);
}

.dash-meter-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(237, 246, 242, 0.5);
}

.dash-meter-value {
    display: block;
    margin: 7px 0 4px;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #4AE3BC;
}

.dash-meter-sub {
    display: block;
    font-size: 0.72rem;
    color: rgba(237, 246, 242, 0.6);
}

.dash-meter-track {
    margin-top: 13px;
    height: 4px;
    border-radius: 999px;
    background: rgba(237, 246, 242, 0.16);
    overflow: hidden;
}

.dash-meter-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #17A784, #4AE3BC);
    width: 0;
    transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.dash-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 26px 24px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.5s ease;
}

    .dash-card:hover {
        transform: translateY(-5px);
        border-color: var(--border-hover);
        box-shadow: var(--shadow-md);
    }

.dash-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--gold-tint);
    color: var(--gold-text);
    font-size: 1.05rem;
}

.dash-card h3 {
    margin: 16px 0 7px;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dash-card p {
    font-size: 0.83rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.dash-card-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-text);
}

    .dash-card-go i {
        transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

.dash-card:hover .dash-card-go i {
    transform: translateX(4px);
}

.dash-section {
    margin-bottom: 34px;
}

.dash-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}

    .dash-section-head h2 {
        font-family: var(--font-display);
        font-size: 1.12rem;
        font-weight: 700;
        letter-spacing: -0.015em;
        color: var(--text-primary);
    }

    .dash-section-head a {
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--gold-text);
        cursor: pointer;
    }

.dash-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.dash-fact {
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
}

    .dash-fact span {
        display: block;
        font-size: 0.68rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .dash-fact strong {
        display: block;
        margin-top: 7px;
        font-family: var(--font-display);
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -0.025em;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

    .dash-fact em {
        display: block;
        margin-top: 4px;
        font-style: normal;
        font-size: 0.72rem;
        color: var(--text-muted);
    }


/* ---------------------------------------------------------------------------------------------------------------------
   PRICING, WHEN THEY ALREADY HAVE ACCESS
   --------------------------------------------------------------------------------------------------------------------- */



html.has-access .buy-only {
    display: none !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
   CHART CONTAINERS

   amCharts measures its container on init. A pie inside a grid cell that has not resolved its width yet renders at
   zero and never recovers, so the canvas is given a floor here rather than being left to the grid.
   --------------------------------------------------------------------------------------------------------------------- */





.rp-split > div {
    min-width: 0;
}

.rp-chart-failed {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 30px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}


/* ---------------------------------------------------------------------------------------------------------------------
   Small containers that only needed sane defaults.
   --------------------------------------------------------------------------------------------------------------------- */

.guides-grid {
    display: block;
}

.report-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.summary-status {
    display: block;
}


/* =====================================================================================================================
   =====================================================================================================================
   CareFigures  —  corrections, second pass
   =====================================================================================================================
   ===================================================================================================================== */



/* ---------------------------------------------------------------------------------------------------------------------
   THE GAP SECTION VERDICT

   The two family cards state the outcomes. This states the difference, which is the only number that matters.
   --------------------------------------------------------------------------------------------------------------------- */

.gap-verdict {
    display: block;
    margin-top: 26px;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold);
    background: linear-gradient(150deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary);
    box-shadow: var(--shadow-md), 0 0 110px -60px var(--accent-glow);
    text-align: center;
}

.gap-verdict-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.gap-verdict-value {
    display: block;
    margin: 12px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 5.6rem);
    font-weight: 700;
    line-height: 0.94;
    font-variant-numeric: tabular-nums;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gap-verdict-sub {
    display: block;
    max-width: 60ch;
    margin: 0 auto;
    font-size: 0.94rem;
    line-height: 1.68;
    color: var(--text-secondary);
}

    .gap-verdict-sub strong { color: var(--text-primary); }

.gap-verdict-multiple {
    display: block;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--gold-tint-line);
    font-size: 1rem;
    color: var(--text-secondary);
}

    .gap-verdict-multiple strong {
        font-family: var(--font-display);
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--gold-text);
    }


/* ---------------------------------------------------------------------------------------------------------------------
   THE ACCOUNT BUTTON
   --------------------------------------------------------------------------------------------------------------------- */

.nav-user {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, color 0.35s ease, background 0.35s ease;
}

    .nav-user:hover {
        transform: translateY(-2px);
        border-color: var(--border-hover);
        color: var(--gold-text);
    }

    .nav-user:focus-visible {
        outline: 1px solid var(--gold);
        outline-offset: 3px;
    }

.nav-user-in {
    border-color: var(--gold-tint-line);
    background: var(--gold-tint);
    color: var(--gold-text);
}

/* A quiet dot, only once they are actually signed in. */
.nav-user-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--bg-primary);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.signed-in .nav-user-dot {
    opacity: 1;
    transform: scale(1);
}


/* ---------------------------------------------------------------------------------------------------------------------
   CHECKOUT

   The container was a two column grid built for a panel plus a summary. With one panel, the confirmation landed in the
   left column and left the right half of the screen empty. It is a single centred column now, in both states.
   --------------------------------------------------------------------------------------------------------------------- */



#CheckoutDone,
#CheckoutPay {
    grid-column: 1 / -1;
    min-width: 0;
}



    .checkout-success .page-header {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    .checkout-success .page-subtitle {
        margin-left: auto;
        margin-right: auto;
    }






/* ---------------------------------------------------------------------------------------------------------------------
   THE STICKY BUY BAR

   A mobile media query was setting it to display:flex outright, which overrode the script entirely and showed it to
   paying customers. It is now opt-in on every width, and never shown to anybody with live access.
   --------------------------------------------------------------------------------------------------------------------- */





html.has-access .buy-bar,
html.has-access .buy-bar.buy-bar-show {
    display: none !important;
}

@media (max-width: 768px) {
    .buy-bar {
        display: none;
    }

    .buy-bar.buy-bar-show {
        display: flex;
    }

    html.has-access .buy-bar,
    html.has-access .buy-bar.buy-bar-show {
        display: none !important;
    }
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE MEMBER HOME, WITH THE ACCOUNT RAIL
   --------------------------------------------------------------------------------------------------------------------- */

#MemberHome .dashboard-container {
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
}

#MemberHome .dash-hero {
    margin-top: 0;
}

/* The rail is sticky so it stays with the reader down a long dashboard. */


@media (max-width: 768px) {
    #MemberHome .dashboard-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .dash-hero-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-meter {
        min-width: 0;
    }

    .nav-user {
        width: 38px;
        height: 38px;
    }
}


/* =====================================================================================================================
   =====================================================================================================================
   CareFigures  —  proof, preview, guarantee, sample
   =====================================================================================================================
   ===================================================================================================================== */


/* ---------------------------------------------------------------------------------------------------------------------
   THE COUNTED STRIP

   Numbers the site is allowed to publish about itself. Hidden entirely until the counts are worth publishing, which
   is decided on the server, not here.
   --------------------------------------------------------------------------------------------------------------------- */

.proof-strip-wrap {
    margin-top: clamp(28px, 4vw, 44px);
}

.proof-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--rule);
    overflow: hidden;
}

.proof-item {
    padding: 20px 22px;
    background: var(--bg-secondary);
    text-align: center;
}

    .proof-item strong {
        display: block;
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--gold-text);
        font-variant-numeric: tabular-nums;
    }

    .proof-item span {
        display: block;
        margin-top: 6px;
        font-size: 0.74rem;
        line-height: 1.45;
        color: var(--text-muted);
    }


/* ---------------------------------------------------------------------------------------------------------------------
   THE REDACTED PREVIEW

   Real bars, real spread, real money — and no way to tell which is which. Drawn in CSS so it lands the instant the
   paywall does.
   --------------------------------------------------------------------------------------------------------------------- */

.preview {
    margin-top: 34px;
    padding: clamp(24px, 3.5vw, 34px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.preview-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.preview-title {
    margin: 12px 0 10px;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--text-primary);
}

.preview-lede {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

    .preview-lede strong { color: var(--text-primary); }

.preview-chart {
    margin-top: 22px;
}

.pv-row {
    display: grid;
    grid-template-columns: minmax(96px, 150px) 1fr minmax(84px, auto);
    align-items: center;
    gap: 14px;
    padding: 7px 0;
}

.pv-label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
}

    .pv-label i {
        flex-shrink: 0;
        font-size: 0.62rem;
        color: var(--gold-text);
        opacity: 0.75;
    }

.pv-redact {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.6rem;
    letter-spacing: -0.06em;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.34;
    user-select: none;
}

.pv-track {
    position: relative;
    display: block;
    height: 22px;
    border-radius: 7px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.pv-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 7px;
    background: var(--chart-7);
    opacity: 0.5;
    transition: width 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.pv-bar-low {
    background: var(--gradient-primary);
    opacity: 1;
}

.pv-bar-high {
    background: var(--error);
    opacity: 0.72;
}

.pv-value {
    text-align: right;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pv-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--rule);
    font-size: 0.73rem;
    color: var(--text-muted);
}

.pv-key {
    display: inline-block;
    width: 22px;
    height: 8px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
}

.pv-key-low { background: var(--gradient-primary); }
.pv-key-high { background: var(--error); opacity: 0.72; }

.pv-legend-gap {
    margin-left: auto;
    font-weight: 700;
    color: var(--gold-text);
    font-variant-numeric: tabular-nums;
    font-size: 20px;
}

.preview-caveat {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 13px;
    border-left: 3px solid var(--gold);
    background: var(--bg-tertiary);
    font-size: 0.79rem;
    line-height: 1.62;
    color: var(--text-secondary);
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE COUNTDOWN

   A legislated date, counted from today. There is no shortage of real deadlines here, so none are invented.
   --------------------------------------------------------------------------------------------------------------------- */

.paywall-clock {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 22px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--gold-tint-line);
    background: var(--bg-secondary);
}

.pc-days {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 16px;
    background: var(--gradient-primary);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

    /* Sits straight under the number. Its own line box plus a top margin was leaving "45" and "DAYS" looking like
       two separate things rather than one figure. */
    .pc-days em {
        display: block;
        margin-top: -1px;
        line-height: 1;
        font-family: var(--font-sans);
        font-style: normal;
        font-size: 0.56rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        opacity: 0.85;
    }

.pc-body strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pc-body span {
    display: block;
    margin-top: 5px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-secondary);
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE GUARANTEE

   Moved out of the FAQ and put where the decision is actually made.
   --------------------------------------------------------------------------------------------------------------------- */

.guarantee {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 16px;
    padding: 15px 17px;
    border-radius: 14px;
    border: 1px solid rgba(23, 131, 95, 0.30);
    background: rgba(23, 131, 95, 0.06);
}

    .guarantee > i {
        flex-shrink: 0;
        margin-top: 2px;
        font-size: 1rem;
        color: var(--success);
    }

    .guarantee span {
        font-size: 0.81rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

    .guarantee strong { color: var(--text-primary); }

    .guarantee a {
        color: var(--gold-text);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.guarantee-wide {
    max-width: 780px;
    margin: 26px auto 0;
    justify-content: flex-start;
}


/* ---------------------------------------------------------------------------------------------------------------------
   REVIEWS
   --------------------------------------------------------------------------------------------------------------------- */

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
}

.review-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

    .review-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .review-card h3 {
        margin: 12px 0 8px;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .review-card p {
        flex: 1;
        font-size: 0.86rem;
        line-height: 1.68;
        color: var(--text-secondary);
    }

    .review-card footer {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--rule);
    }

.review-rating i {
    font-size: 0.78rem;
    color: var(--gold);
}

.review-rating .star-off { color: var(--rule); }

.review-who {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.review-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ---- leaving one ---- */

.review-invite {
    margin-top: 40px;
    padding: 26px;
    border-radius: 20px;
    border: 1px dashed var(--gold-tint-line);
    background: var(--bg-tertiary);
    text-align: left;
}

    .review-invite h3 {
        font-family: var(--font-display);
        font-size: 1.08rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .review-invite > p {
        margin: 8px 0 18px;
        font-size: 0.83rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

.review-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
}

.star {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--rule);
    font-size: 1.15rem;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}

    .star:hover {
        transform: scale(1.14);
        background: var(--gold-tint);
    }

.star.star-on { color: var(--gold); }

.review-stars-label {
    margin-left: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.review-thanks {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

    .review-thanks i {
        font-size: 1.3rem;
        color: var(--success);
    }

    .review-thanks strong {
        display: block;
        font-size: 0.98rem;
        color: var(--text-primary);
    }

    .review-thanks span {
        display: block;
        margin-top: 5px;
        font-size: 0.82rem;
        color: var(--text-secondary);
    }


/* ---------------------------------------------------------------------------------------------------------------------
   THE SAMPLE REPORT
   --------------------------------------------------------------------------------------------------------------------- */

.sample-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding: 17px 20px;
    border-radius: 17px;
    border: 1px solid var(--gold-tint-line);
    background: linear-gradient(120deg, var(--gold-tint) 0%, transparent 62%), var(--bg-secondary);
}

    .sample-banner > i {
        font-size: 1.2rem;
        color: var(--gold-text);
    }

    .sample-banner > div { flex: 1; min-width: 240px; }

    .sample-banner strong {
        display: block;
        font-size: 0.95rem;
        color: var(--text-primary);
    }

    .sample-banner span {
        display: block;
        margin-top: 5px;
        font-size: 0.81rem;
        line-height: 1.6;
        color: var(--text-secondary);
    }

/* The watermark makes it unmistakable in a screenshot, without making it unreadable. */
.sample-sheet {
    position: relative;
}

    .sample-sheet::before {
        content: 'SAMPLE';
        position: absolute;
        inset: 0;
        z-index: 3;
        display: grid;
        place-items: center;
        font-family: var(--font-display);
        font-size: clamp(4rem, 17vw, 12rem);
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--gold);
        opacity: 0.055;
        transform: rotate(-24deg);
        pointer-events: none;
        user-select: none;
    }

/* ---------------------------------------------------------------------------------------------------------------------
   THE LOCKED HALF

   The back five sections are laid out in full and then put out of focus. Showing the shape of what is missing is a
   far stronger argument than describing it, so the blur is heavy enough to be unreadable and light enough that the
   headings, tables and charts are still recognisably there.
   --------------------------------------------------------------------------------------------------------------------- */

.sample-locked {
    position: relative;
    margin-top: 10px;
    /* All five sections are laid out, but only enough of them is shown to make the point. Scrolling through five
       full sections of blur is a chore; one screenful of it is an argument. */
    max-height: clamp(640px, 80vh, 920px);
    /* Also clips the blur at the edges, which otherwise bleeds a soft halo past the sheet. */
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.sample-locked-body {
    filter: blur(7px) saturate(0.85);
    opacity: 0.62;
    /* Nothing in here is reachable — not by pointer, not by tab, not by selection. */
    pointer-events: none;
    user-select: none;
    /* The blur softens the top edge into the open half, so the first locked section is trimmed back. */
    margin-top: -12px;
}

/* Charts are never drawn behind the blur — drawing them to hide them is wasted work — so a static shape stands in. */
.rp-chart-ghost {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6%;
    width: 100%;
    padding: 18px 12%;
    border-radius: 14px;
    background: var(--bg-tertiary);
}

    .rp-chart-ghost span {
        flex: 1;
        border-radius: 6px 6px 0 0;
        background: var(--gold);
        opacity: 0.5;
    }

        .rp-chart-ghost span:nth-child(1) { height: 46%; }
        .rp-chart-ghost span:nth-child(2) { height: 74%; }
        .rp-chart-ghost span:nth-child(3) { height: 58%; }
        .rp-chart-ghost span:nth-child(4) { height: 88%; opacity: 0.75; }
        .rp-chart-ghost span:nth-child(5) { height: 36%; }
        .rp-chart-ghost span:nth-child(6) { height: 64%; }

/* The veil sits over the blur and carries the only thing in this half that is meant to be read. */
.sample-locked-veil {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    /* Transparent through the middle so the blurred layout reads, opaque at both edges so the clip has no hard line. */
    background: linear-gradient(to bottom,
                var(--bg-primary) 0%,
                rgba(0, 0, 0, 0) 20%,
                rgba(0, 0, 0, 0) 62%,
                var(--bg-primary) 97%);
}

.sample-locked-card {
    width: 100%;
    max-width: 560px;
    padding: clamp(26px, 4vw, 40px);
    border: 1px solid var(--gold-tint-line);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--gold-tint) 0%, transparent 60%), var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.sample-locked-mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: var(--gradient-primary);
    font-size: 1.25rem;
    color: var(--on-accent);
}

    .sample-locked-card h3 {
        font-family: var(--font-display);
        font-size: clamp(1.25rem, 3vw, 1.7rem);
        font-weight: 700;
        letter-spacing: -0.025em;
        color: var(--text-primary);
    }

    .sample-locked-card p {
        max-width: 46ch;
        margin: 0 auto;
        font-size: 0.86rem;
        line-height: 1.7;
        color: var(--text-secondary);
    }

.sample-locked-list {
    display: grid;
    gap: 7px;
    margin: 20px 0;
    padding: 16px 14px;
    border-radius: 14px;
    background: var(--bg-tertiary);
    text-align: left;
    list-style: none;
}

    .sample-locked-list li {
        display: grid;
        grid-template-columns: 30px 1fr;
        align-items: center;
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

        .sample-locked-list li span {
            font-family: var(--font-display);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: var(--gold-text);
        }

.sample-locked-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

@media (max-width: 560px) {

    .sample-locked-body { filter: blur(5px) saturate(0.85); }

    .sample-locked { max-height: clamp(560px, 88vh, 760px); }

    .sample-locked-veil { padding: 24px 12px; }

    .sample-locked-actions .btn { width: 100%; }
}


/* ---------------------------------------------------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------------------------------------------------- */

@media (max-width: 620px) {
    .pv-row {
        grid-template-columns: 60px 1fr minmax(72px, auto);
        gap: 9px;
    }

    .pv-redact { font-size: 0.5rem; }

    .pv-value { font-size: 0.75rem; }

    .paywall-clock {
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;
    }

    .proof-item { padding: 16px 14px; }

    .proof-item strong { font-size: 1.25rem; }
}


/* Containers that only needed sane defaults. */

.preview-head {
    display: block;
}

.rp-table-rank td:nth-child(2) {
    min-width: 240px;
    white-space: normal;
}


/* ---------------------------------------------------------------------------------------------------------------------
   IS THAT ROOM PRICE NORMAL?

   Appears as they type. The bar is a position in the observed range, not a percentile, and the copy says so — a
   median drawn from nine published prices should not be dressed up as a survey.
   --------------------------------------------------------------------------------------------------------------------- */

.bench {
    margin: 4px 0 22px;
    padding: 20px 22px;
    border-radius: 17px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    background: var(--bg-tertiary);
}

.bench-at { border-left-color: var(--success); }
.bench-below,
.bench-well-below { border-left-color: var(--success); }
.bench-above { border-left-color: var(--warning); }
.bench-well-above { border-left-color: var(--error); }

.bench-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.bench-verdict {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

    .bench-verdict strong { color: var(--text-primary); }

.bench-conf {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}

.bench-scale {
    margin-bottom: 16px;
}

.bench-track {
    position: relative;
    display: block;
    height: 10px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    margin: 26px 0 8px;
}

.bench-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--gradient-primary);
    opacity: 0.28;
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.bench-median,
.bench-you {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 20px;
    transform: translate(-50%, -50%);
}

.bench-median {
    background: var(--text-muted);
    opacity: 0.5;
}

.bench-you {
    background: var(--gold);
    height: 26px;
    box-shadow: 0 0 0 3px var(--bg-tertiary);
    transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

    .bench-median em,
    .bench-you em {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-style: normal;
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .bench-median em {
        top: -17px;
        color: var(--text-muted);
    }

    .bench-you em {
        bottom: -18px;
        font-weight: 700;
        color: var(--gold-text);
    }

.bench-ends {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.bench-note {
    font-size: 0.81rem;
    line-height: 1.62;
    color: var(--text-secondary);
}

    .bench-note strong { color: var(--text-primary); }

.bench-source {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--rule);
    font-size: 0.68rem;
    line-height: 1.55;
    color: var(--text-muted);
}


/* =====================================================================================================================
   =====================================================================================================================
   CareFigures  —  toasts, dialogs and the loading scrim

   Everything that appears over the top of the page. All three were inherited from the previous build still wearing
   its palette — flat navy panels, a cyan success state, a scrim of pure black — and none of them knew the theme
   existed. They now read from the same variables as everything else and answer to light and dark.

   Toasts sit top right, clear of the fixed nav and clear of the sticky buy bar at the bottom. On a phone they run
   across the top instead, where a thumb is not already covering them.
   =====================================================================================================================
   ===================================================================================================================== */


/* ---------------------------------------------------------------------------------------------------------------------
   TOASTS
   --------------------------------------------------------------------------------------------------------------------- */

.toast-notification {
    position: fixed;
    top: 92px;
    right: clamp(14px, 3vw, 30px);
    z-index: 10000;

    display: flex;
    align-items: flex-start;
    gap: 13px;

    max-width: min(400px, calc(100vw - 28px));
    padding: 15px 18px 15px 16px;

    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 16px;
    background: var(--bg-glass);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;

    font-size: 0.86rem;
    line-height: 1.5;
    text-align: left;
    color: var(--text-primary);

    opacity: 0;
    transform: translateX(24px) scale(0.97);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

    .toast-notification.toast-show {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    /* The icon sits in a tinted chip, the same treatment the dashboard cards and the report use. */
    .toast-notification i {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        margin: -1px 0 0;
        border-radius: 9px;
        font-size: 0.78rem;
        background: var(--gold-tint);
        color: var(--gold-text);
    }

    /* A quiet timer, so a toast that is about to vanish says so. */
    .toast-notification::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background: var(--gold);
        opacity: 0.5;
        transform-origin: left center;
        animation: toastTimer 4s linear forwards;
    }

@keyframes toastTimer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* ---- the four states ---- */

.toast-notification.toast-success {
    border-left-color: var(--success);
}

    .toast-notification.toast-success i {
        background: rgba(23, 131, 95, 0.13);
        color: var(--success);
    }

    .toast-notification.toast-success::after { background: var(--success); }

.toast-notification.toast-error {
    border-left-color: var(--error);
}

    .toast-notification.toast-error i {
        background: rgba(192, 57, 43, 0.13);
        color: var(--error);
    }

    .toast-notification.toast-error::after { background: var(--error); }

.toast-notification.toast-warning {
    border-left-color: var(--warning);
}

    .toast-notification.toast-warning i {
        background: rgba(181, 129, 31, 0.14);
        color: var(--warning);
    }

    .toast-notification.toast-warning::after { background: var(--warning); }

.toast-notification.toast-info {
    border-left-color: var(--gold);
}

    .toast-notification.toast-info i {
        background: var(--gold-tint);
        color: var(--gold-text);
    }

    .toast-notification.toast-info::after { background: var(--gold); }

[data-theme="dark"] .toast-notification.toast-success i { background: rgba(53, 196, 141, 0.16); }
[data-theme="dark"] .toast-notification.toast-error i { background: rgba(232, 105, 92, 0.16); }
[data-theme="dark"] .toast-notification.toast-warning i { background: rgba(217, 164, 65, 0.16); }

@media (max-width: 620px) {
    .toast-notification {
        top: 76px;
        left: 12px;
        right: 12px;
        max-width: none;
        transform: translateY(-16px) scale(0.98);
    }

        .toast-notification.toast-show {
            transform: translateY(0) scale(1);
        }
}

@media (prefers-reduced-motion: reduce) {
    .toast-notification { transition-duration: 0.01ms; }
    .toast-notification::after { animation: none; opacity: 0.35; }
}


/* ---------------------------------------------------------------------------------------------------------------------
   DIALOGS

   Replaces window.confirm and window.prompt, which no amount of CSS can touch and which arrive wearing the
   operating system rather than the site.
   --------------------------------------------------------------------------------------------------------------------- */

.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    background: var(--scrim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0;
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

    .dialog-overlay.dialog-show { opacity: 1; }

.dialog {
    width: 100%;
    max-width: 460px;
    padding: clamp(26px, 4vw, 34px);

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);

    transform: translateY(18px) scale(0.97);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.dialog-overlay.dialog-show .dialog {
    transform: translateY(0) scale(1);
}

.dialog-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 15px;
    background: var(--gold-tint);
    color: var(--gold-text);
    font-size: 1.1rem;
}

.dialog-danger .dialog-icon {
    background: rgba(192, 57, 43, 0.12);
    color: var(--error);
}

[data-theme="dark"] .dialog-danger .dialog-icon { background: rgba(232, 105, 92, 0.16); }

.dialog-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.dialog-message {
    margin-top: 9px;
    font-size: 0.88rem;
    line-height: 1.62;
    color: var(--text-secondary);
}

.dialog-input {
    margin-top: 20px;
}

    /* The site normally hides placeholders until focus, because its inputs carry floating labels. A dialog input
       has no label, so its placeholder has to earn its keep from the start. */
    .dialog-input::placeholder {
        opacity: 1;
    }

    .dialog-input.input-error {
        border-color: var(--error);
        box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
    }

.dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 26px;
}

    .dialog-actions .btn {
        min-width: 116px;
        justify-content: center;
    }

.dialog-danger .dialog-actions .btn-primary {
    background: var(--error);
    border-color: var(--error);
    color: #FFFFFF;
}

    .dialog-danger .dialog-actions .btn-primary:hover {
        color: var(--ink);
    }

@media (max-width: 480px) {
    .dialog-actions {
        flex-direction: column-reverse;
    }

        .dialog-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dialog-overlay,
    .dialog { transition-duration: 0.01ms; }
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE LOADING SCRIM

   Was a flat 70% black in both themes, which reads as a hole in the page in light mode.
   --------------------------------------------------------------------------------------------------------------------- */






/* =====================================================================================================================
   =====================================================================================================================
   CareFigures  —  the hero estimate, the money numbers, and the remaining fixes
   =====================================================================================================================
   ===================================================================================================================== */


/* ---------------------------------------------------------------------------------------------------------------------
   BIG MONEY NUMBERS

   Every figure that represents money the reader could keep gets the same treatment: the jade gradient it already had,
   plus a highlight that sweeps across it and a soft glow beneath. The point of these numbers is that somebody notices
   them, and a flat number in a wall of text does not get noticed.

   drop-shadow rather than text-shadow, because the glyphs are painted through a background clip and text-shadow would
   land on the transparent fill rather than the visible colour.
   --------------------------------------------------------------------------------------------------------------------- */

.money-shine,
.qc-gap-value,
.gap-verdict-value,
.paywall-title em,
.dash-meter-value,
.buy-bar-copy strong {
    /* Two layers, and the split is what fixes the double flash.

       The base gradient never moves and always covers the element, so the glyphs can never be left with nothing
       painted behind them — under background-clip:text that would render the number invisible.

       The sheen is a separate, no-repeat layer. Because it does not tile, exactly one highlight band exists in the
       whole element, so it can only ever be seen once per cycle. The previous version travelled a single tiled
       gradient 1.6 tile widths, which is why the band appeared, left, and then appeared again. */
    background-image:
        linear-gradient(100deg,
            rgba(255, 255, 255, 0) 38%,
            rgba(255, 255, 255, 0.50) 47%,
            rgba(255, 255, 255, 0.82) 50%,
            rgba(255, 255, 255, 0.50) 53%,
            rgba(255, 255, 255, 0) 62%),
        linear-gradient(115deg,
            var(--gold) 0%,
            var(--gold-bright) 52%,
            var(--gold) 100%);
    background-size: 220% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: 210% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 14px var(--accent-glow));
    animation: moneyShine 9s ease-in-out infinite;
}

/* The sweep runs, then rests. A highlight that never stops reads as a loading state. */
@keyframes moneyShine {
    0% { background-position: 210% 0, 0 0; }
    52% { background-position: -110% 0, 0 0; }
    100% { background-position: -110% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .money-shine,
    .qc-gap-value,
    .gap-verdict-value,
    .paywall-title em,
    .dash-meter-value,
    .buy-bar-copy strong {
        animation: none;
        background-position: -110% 0, 0 0;
    }
}

/* The dark hero panels carry their own brighter mix, since jade on near black needs more lift. */
.dash-meter-value,
.buy-bar-copy strong {
    filter: drop-shadow(0 2px 16px rgba(46, 211, 169, 0.34));
}

/* ---------------------------------------------------------------------------------------------------------------------
   THE ONE FIGURE THAT IS NOT GOOD NEWS

   Every other number wearing the sheen is jade, because every other number is something the visitor gains. The
   homepage loss figure is the opposite, and jade was quietly telling them it was fine.

   Both gradient layers have to be restated rather than just the colour one: they share a single background-image,
   so overriding it replaces the sheen along with the fill. The mechanics — sizes, positions, clip, animation — are
   inherited from the .money-shine rule above, and this changes nothing but the colour and the glow. Placed after
   that rule deliberately; both are single class selectors, so source order is what decides it.
   --------------------------------------------------------------------------------------------------------------------- */

.money-shine-loss,
.qc-gap-value,
.gap-verdict-value,
.paywall-title.pt-loss em {
    background-image:
        linear-gradient(100deg,
            rgba(255, 255, 255, 0) 38%,
            rgba(255, 255, 255, 0.50) 47%,
            rgba(255, 255, 255, 0.82) 50%,
            rgba(255, 255, 255, 0.50) 53%,
            rgba(255, 255, 255, 0) 62%),
        linear-gradient(115deg,
            var(--error) 0%,
            var(--error-bright) 52%,
            var(--error) 100%);
    filter: drop-shadow(0 2px 14px rgba(192, 57, 43, 0.38));
}

[data-theme="dark"] .money-shine-loss,
[data-theme="dark"] .qc-gap-value,
[data-theme="dark"] .gap-verdict-value,
[data-theme="dark"] .paywall-title.pt-loss em {
    filter: drop-shadow(0 2px 16px rgba(232, 105, 92, 0.34));
}

/* pt-loss is a modifier on the title rather than a class on the figure, because the same element carries good news
   too — a supported resident is told what being supported is WORTH, and that one stays jade. Two classes deep so it
   outranks the .paywall-title em rule in the jade group above without depending on source order. */

/* .qc-gap-value is listed above as well as in the .money-shine group, so it keeps working without a markup change.
   Anything else wanting the red treatment carries BOTH classes — money-shine for the mechanics, money-shine-loss
   for the colour — because the two layers, the clip and the animation all live on the .money-shine rule. */

/* The panel around it is recoloured where it is defined, further down, rather than overridden from here — the
   original rule comes later in the file and would win. */


/* ---------------------------------------------------------------------------------------------------------------------
   THE HERO ESTIMATE

   Rebuilt at roughly half the height. The three inputs run across rather than down, the worked calculation sits on
   tighter rows, and every padding step was cut — the panel was taller than the hero copy beside it, which pushed the
   whole fold down the page for no gain at all.
   --------------------------------------------------------------------------------------------------------------------- */

.hero-stage {
    display: flex;
    align-items: center;
    min-width: 0;
}

.quickcalc {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease;
}

    .quickcalc::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: var(--gradient-primary);
    }

    .quickcalc:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg), 0 0 90px -46px var(--accent-glow);
        border-color: var(--border-hover);
    }

.quickcalc-head {
    padding: 20px 24px 0;
}

.quickcalc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.quickcalc-title {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

/* Three across. This is the single biggest saving in the panel. */
.quickcalc-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 15px 24px 0;
}

.quick-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
}

    .quick-label em {
        display: block;
        font-style: normal;
        font-size: 0.62rem;
        font-weight: 400;
        color: var(--text-muted);
    }

/* Compact inputs, scoped so the rest of the site keeps its full size fields. */
.quickcalc .input-money { --field-h: 48px; }

.quickcalc .form-input {
    height: 48px;
    padding: 10px 12px 10px 24px !important;
    font-size: 0.88rem;
    border-radius: 11px;
}

.quickcalc .input-money > span {
    left: 11px;
    font-size: 0.82rem;
}

.quickcalc-result {
    margin-top: 14px;
    padding: 15px 24px 20px;
    border-top: 1px solid var(--rule);
    background: linear-gradient(180deg, var(--gold-tint) 0%, transparent 62%);
}

.qc-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    color: var(--text-secondary);
}

    .qc-status.qc-good { color: var(--success); }
    .qc-status.qc-warn { color: var(--warning); }
    .qc-status strong { color: var(--text-primary); }

/* ---- the worked calculation ---- */

.qc-calc {
    margin: 10px 0 3px;
    border-top: 1px solid var(--rule);
}

.qc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule);
}

.qc-row-label {
    font-size: 0.76rem;
    line-height: 1.25;
    color: var(--text-secondary);
}

    /* The explanatory line is dropped on narrow panels; the label alone carries it. */
    .qc-row-label em {
        display: inline;
        font-style: normal;
        font-size: 0.62rem;
        color: var(--text-muted);
    }

    /* Separator, so the note reads as an aside rather than as part of the label. */
    .qc-row-label em::before {
        content: ' · ';
        opacity: 0.6;
    }

.qc-row-value {
    flex-shrink: 0;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qc-row-locked .qc-row-value {
    color: var(--gold-text);
    letter-spacing: 0.03em;
}

    .qc-row-locked .qc-row-value i {
        margin-right: 2px;
        font-size: 0.6rem;
    }

/* ---- the total ---- */

.qc-figure {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 10px;
    flex-wrap: wrap;
    row-gap: 2px;
}

.qc-figure-label,
.qc-figure-unit {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.qc-figure-value {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.6vw, 2.05rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ---- the gap, which is the whole point of the panel ---- */

/* Red, not jade. This is the one panel on the site reporting something the visitor stands to lose, and a jade box
   around a red figure reads as an argument with itself. */
.qc-gap {
    display: block;
    margin: 14px 0 12px;
    padding: 14px 16px;
    border-radius: 13px;
    border: 1px solid rgba(192, 57, 43, 0.42);
    background: linear-gradient(150deg, rgba(192, 57, 43, 0.10) 0%, transparent 72%), var(--bg-secondary);
    box-shadow: 0 0 50px -30px rgba(192, 57, 43, 0.6);
    text-align: center;
}

[data-theme="dark"] .qc-gap {
    border-color: rgba(232, 105, 92, 0.4);
    background: linear-gradient(150deg, rgba(232, 105, 92, 0.12) 0%, transparent 72%), var(--bg-secondary);
}

.qc-gap-label {
    display: block;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--error);
}

.qc-gap-value {
    display: block;
    margin: 4px 0 6px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.qc-gap-sub {
    display: inline;
    font-size: 0.74rem;
    line-height: 1.42;
    color: var(--text-secondary);
}

    .qc-gap-sub strong { color: var(--text-primary); }

.qc-gap-multiple {
    display: inline;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

    .qc-gap-multiple strong {
        color: var(--gold-text);
        font-weight: 700;
    }

.quickcalc .btn {
    height: 48px;
    padding: 0 22px;
    font-size: 0.74rem;
}

.qc-fineprint {
    margin-top: 9px;
    font-size: 0.66rem;
    line-height: 1.4;
    text-align: center;
    color: var(--text-muted);
}

@media (max-width: 1080px) {
    .quickcalc-body {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .quick-label em { display: none; }
}

@media (max-width: 560px) {
    .quickcalc-head,
    .quickcalc-body,
    .quickcalc-result { padding-left: 16px; padding-right: 16px; }

    .quickcalc-body { grid-template-columns: 1fr 1fr; }

    .quickcalc-body .form-group:last-child { grid-column: 1 / -1; }

    .qc-row-label em { display: none; }
}


/* ---------------------------------------------------------------------------------------------------------------------
   WHAT IS IN THE REPORT

   The two panels used different check glyphs, which are different widths, so the text ran on two different left
   edges and the paid column read as warped. Same glyph in both now, fixed width, and the text in its own box so a
   bold fragment cannot drag the first line out of alignment.
   --------------------------------------------------------------------------------------------------------------------- */





.whatsin-list li > span {
    display: block;
    min-width: 0;
}






/* ---------------------------------------------------------------------------------------------------------------------
   SELECT DROPDOWNS

   appearance:none strips the native arrow, which left them looking like plain text fields. The chevron is an inline
   SVG so it needs no request, and it is drawn in currentColor so it follows the theme.
   --------------------------------------------------------------------------------------------------------------------- */

select.form-input {
    padding-right: 44px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A9A95' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 17px center;
    background-size: 12px 8px;
    transition: background-position 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] select.form-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2375867F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

    select.form-input:hover,
    select.form-input:focus {
        background-position: right 15px center;
    }

    /* The native list is drawn by the operating system; at minimum stop it inheriting a transparent background. */
    select.form-input option {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }


/* ---------------------------------------------------------------------------------------------------------------------
   THE STICKY BUY BAR

   Was pinned to the outer edges of the viewport, so on a wide screen the copy sat in one corner and the button in
   the other. It now runs on the same measure as the rest of the site.
   --------------------------------------------------------------------------------------------------------------------- */

.buy-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 3vw, 32px);
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.buy-bar-copy {
    text-align: right;
}



@media (max-width: 720px) {
    .buy-bar-inner {
        justify-content: space-between;
        gap: 12px;
    }

    .buy-bar-copy {
        text-align: left;
    }
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE CHECKOUT ASSURANCE PANEL
   --------------------------------------------------------------------------------------------------------------------- */

.assure {
    margin-top: 22px;
    padding: clamp(24px, 3.5vw, 32px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.assure-title {
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--text-primary);
}

.assure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.assure-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: start;
    gap: 13px;
}

    .assure-item strong {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.35;
        color: var(--text-primary);
    }

    .assure-item span {
        display: block;
        margin-top: 4px;
        font-size: 0.77rem;
        line-height: 1.55;
        color: var(--text-secondary);
    }

    .assure-item sup {
        color: var(--gold-text);
        font-size: 0.7em;
    }

.assure-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--gold-tint);
    color: var(--gold-text);
    font-size: 0.85rem;
    padding: 8px 0px 0px 12px;
}

/* The refund promise is the one that closes the sale, so it spans and it is tinted. */
.assure-hero {
    grid-column: 1 / -1;
    padding: 16px 18px;
    border-radius: 15px;
    border: 1px solid rgba(23, 131, 95, 0.3);
    background: rgba(23, 131, 95, 0.06);
    grid-template-columns: 40px 1fr;
}

    .assure-hero .assure-icon {
        width: 40px;
        height: 40px;
        background: rgba(23, 131, 95, 0.14);
        color: var(--success);
        font-size: 1rem;
    }

    .assure-hero strong { font-size: 0.94rem; }

[data-theme="dark"] .assure-hero { background: rgba(53, 196, 141, 0.08); }
[data-theme="dark"] .assure-hero .assure-icon { background: rgba(53, 196, 141, 0.16); }

.assure-fine {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    font-size: 0.71rem;
    line-height: 1.6;
    color: var(--text-muted);
}

    .assure-fine strong { color: var(--text-secondary); }

    .assure-fine sup { color: var(--gold-text); }

/* The total and the gap sit on as few lines as the type will allow — the panel shares the fold with the hero copy
   beside it, so every line it does not need is a line the headline gets back. */




/* ---------------------------------------------------------------------------------------------------------------------
   THE GAP  —  the pointer down to the verdict

   The two family cards state two outcomes. The panel below states the difference between them, which is the only
   number on the section that matters, so the eye is walked down to it rather than left to find it.
   --------------------------------------------------------------------------------------------------------------------- */

.gap-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 22px 0 -4px;
    pointer-events: none;
}

.gap-arrow-line {
    display: block;
    width: 2px;
    height: 0px;
    border-radius: 2px;
    background: linear-gradient(to bottom, transparent, var(--gold));
    opacity: 0.55;
}

.gap-arrow-head {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-top: -28px;
    border-radius: 50%;
    border: 1px solid var(--gold-tint-line);
    background: var(--bg-secondary);
    color: var(--gold-text);
    font-size: 0.82rem;
    box-shadow: 0 6px 20px -10px var(--accent-glow);
    animation: gapNudge 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* A short, unhurried nudge. Enough to draw the eye downward, not enough to nag. */
@keyframes gapNudge {
    0%, 62%, 100% { transform: translateY(0); }
    76% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .gap-arrow-head { animation: none; }
}

@media (max-width: 900px) {
    .gap-arrow {
        margin: 16px 0 -2px;
    }

    .gap-arrow-line {
        height: 24px;
    }
}


/* ---------------------------------------------------------------------------------------------------------------------
   THE BUY BAR ON A PHONE

   Portrait screens are short, and the bar is fixed over the content. The strapline is the first thing to go: the
   headline already carries the figure, and the price is on the button's destination. Everything else steps down a
   size, which takes roughly a quarter off the height it was stealing from the page.
   --------------------------------------------------------------------------------------------------------------------- */

@media (max-width: 768px) and (orientation: portrait) {
    .buy-bar {
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    }

    .buy-bar-inner {
        gap: 12px;
    }

    .buy-bar-copy strong {
        font-size: 0.95rem;
        line-height: 1.15;
    }

    /* "Every option priced and ranked — $29". The button says the rest. */
    .buy-bar-copy span {
        display: none;
    }

    .buy-bar .btn {
        padding: 10px 16px;
        height: auto;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
    }

    .buy-bar-close {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }
}