/* Landing page styles. Extracted from Landing.razor (global, namespaced under .lh-*). */
    /* ─── TOKENS ───
       The landing sections used to redeclare their own copy of the colour and
       typography tokens. They now come from the application-wide :root block in
       wwwroot/app.css, which every page (landing included) loads, so the
       duplicate declarations have been removed. */

    .lh-hero,
    .lh-compare,
    .lh-steps,
    .lh-router,
    .lh-pricing-preview,
    .lh-faq,
    .lh-final-cta {
        font-family: var(--font-body);
    }

    .lh-hero h1,
    .lh-section-heading,
    .lh-step-card h3,
    .lh-final-cta-inner h2 {
        font-family: var(--font-heading);
    }

    .lh-section-sub {
        text-align: center;
        color: var(--gold-soft);
        font-size: 1rem;
        line-height: 1.6;
        margin: -24px auto 36px;
        max-width: 56ch;
    }

    .lh-heading-light {
        color: var(--ink-on-dark);
    }

    .lh-accent {
        color: var(--gold);
    }

    /* ─── HERO ─── */
    .lh-hero {
        padding: 112px 0 96px;
        background: linear-gradient(155deg, var(--bg-deep) 0%, var(--bg-surface) 60%, var(--bg-deep) 100%);
    }

    .lh-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        align-items: center;
        gap: 56px;
    }

    .lh-hero-copy {
        text-align: left;
        position: relative;
        z-index: 2;
    }

    .lh-hero h1 {
        color: var(--gold);
        font-size: clamp(2.8rem, 6vw, 4.6rem);
        line-height: 0.98;
        margin: 0 0 20px;
        font-weight: 900;
        letter-spacing: -0.035em;
    }

    .lh-hero-eyebrow {
        color: var(--gold-soft);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-size: 0.82rem;
        font-weight: 700;
        margin: 0 0 18px;
        opacity: 0.85;
    }

    .lh-hero-sub {
        max-width: 52ch;
        margin: 0 0 28px;
    }

    .lh-hero-ctas {
        justify-content: flex-start;
    }

    .lh-cta-reassurance {
        margin: 12px 0 0;
        color: var(--ink-on-dark-faint);
        font-size: 0.82rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        line-height: 1.4;
    }

    .lh-cta-reassurance-center {
        text-align: center;
        margin: 16px auto 0;
    }

    /* Trust pills */
    .lh-trust-pills {
        list-style: none;
        padding: 0;
        margin: 22px 0 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .lh-trust-pills li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(var(--c-gold-rgb), 0.06);
        color: var(--gold-soft);
        font-size: 0.88rem;
        font-weight: 600;
        line-height: 1;
    }

    .lh-trust-pills li span {
        font-size: 1rem;
    }

    /* Hero proof strip */
    .lh-hero-proof {
        background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg-warm-card, var(--bg-warm)) 100%);
        border-top: 1px solid rgba(var(--c-gold-rgb), 0.18);
        border-bottom: 1px solid rgba(var(--c-gold-rgb), 0.18);
        padding: 28px 0;
        box-shadow: inset 0 1px 0 rgba(var(--c-gold-rgb), 0.04);
    }

    /* Compact testimonial inside the hero proof strip */
    .lh-hero-proof .lh-pullquote {
        max-width: 1180px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 24px;
        text-align: left;
    }

    .lh-hero-proof .lh-pullquote blockquote {
        margin: 0;
        font-family: inherit;
        font-size: 1.05rem;
        line-height: 1.5;
        font-weight: 500;
        letter-spacing: 0;
        color: var(--ink-on-dark);
        flex: 1 1 auto;
        min-width: 0;
        max-width: 760px;
        position: relative;
        padding-left: 14px;
        border-left: 3px solid var(--gold);
    }

    .lh-hero-proof .lh-pullquote figcaption {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 0.9rem;
        color: var(--gold-soft);
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .lh-hero-proof .lh-pullquote-logo {
        width: auto;
        height: 128px;
        max-width: 280px;
        object-fit: contain;
        border-radius: 0;
        background: transparent;
        padding: 0;
        filter: invert(1) brightness(1.15) contrast(1.05);
        mix-blend-mode: screen;
    }

    @media (max-width: 720px) {
        .lh-hero-proof .lh-pullquote {
            flex-wrap: wrap;
            text-align: center;
            gap: 18px;
        }
        .lh-hero-proof .lh-pullquote blockquote {
            flex: 1 1 100%;
            text-align: left;
            max-width: none;
        }
        .lh-hero-proof .lh-pullquote figcaption {
            flex: 1 1 100%;
            justify-content: center;
            white-space: normal;
            flex-wrap: wrap;
        }
        .lh-hero-proof .lh-pullquote-logo {
            height: 88px;
            max-width: 200px;
        }
    }

    /* Hero visual */
    .lh-hero-visual {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: center;
        padding: 20px 60px 40px;
    }

    .lh-hero-visual-card {
        position: relative;
        /* The parent .lh-hero-visual is a flex container (default align-items: stretch) with a
           min-height, which would stretch this card vertically and defeat aspect-ratio. Center
           it instead so it keeps a true 16:9 shape. */
        align-self: center;
        width: 100%;
        max-width: 672px;
        aspect-ratio: 16 / 9;
        border-radius: 18px;
        overflow: hidden;
        background: var(--bg-surface);
        box-shadow: 0 30px 60px rgba(var(--c-black-rgb), 0.45),
                    0 0 0 1px rgba(var(--c-gold-rgb), 0.12);
        transform: rotate(-1.2deg);
    }

    .lh-hero-screens {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .lh-hero-screenshot {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        opacity: 0;
        animation: lh-hero-rotate 16s infinite ease-in-out;
    }

    .lh-hero-screenshot--1 { animation-delay: 0s; }
    .lh-hero-screenshot--2 { animation-delay: 4s; }
    .lh-hero-screenshot--3 { animation-delay: 8s; }
    .lh-hero-screenshot--4 { animation-delay: 12s; }

    @keyframes lh-hero-rotate {
        0%   { opacity: 0; }
        2%   { opacity: 1; }
        25%  { opacity: 1; }
        28%  { opacity: 0; }
        100% { opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
        .lh-hero-screenshot { animation: none; }
        .lh-hero-screenshot--1 { opacity: 1; }
    }

    .lh-hero-phone {
        position: absolute;
        bottom: -10px;
        width: 110px;
        height: auto;
        border-radius: 22px;
        background: var(--bg-deep);
        box-shadow: 0 18px 36px rgba(var(--c-black-rgb), 0.55),
                    0 0 0 2px rgba(var(--c-gold-rgb), 0.18);
        z-index: 2;
    }

    .lh-hero-phone--right {
        right: 4px;
        transform: rotate(7deg);
    }

    .lh-hero-visual-badge {
        position: absolute;
        top: 4px;
        right: 36px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: var(--gold);
        color: var(--bg-deep);
        font-weight: 800;
        font-size: 0.85rem;
        border-radius: 999px;
        box-shadow: 0 10px 24px rgba(var(--c-gold-rgb), 0.25);
        z-index: 3;
    }

    .lh-pulse {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--accent-live);
        box-shadow: 0 0 0 0 rgba(var(--c-brick-rgb), 0.7);
        animation: lh-pulse 1.6s infinite;
    }

    @keyframes lh-pulse {
        0% { box-shadow: 0 0 0 0 rgba(var(--c-brick-rgb), 0.6); }
        70% { box-shadow: 0 0 0 10px rgba(var(--c-brick-rgb), 0); }
        100% { box-shadow: 0 0 0 0 rgba(var(--c-brick-rgb), 0); }
    }

    /* Sticky mobile CTA */
    .lh-sticky-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(var(--c-bg-deep-rgb), 0.95);
        backdrop-filter: saturate(160%) blur(8px);
        border-top: 1px solid var(--border-on-dark);
        z-index: 60;
        display: none;
    }

    .lh-sticky-cta .lh-cta-primary {
        width: 100%;
        padding: 14px 20px;
        font-size: 1rem;
    }

    .lh-sticky-cta[hidden] {
        display: none !important;
    }

    @media (max-width: 768px) {
        .lh-sticky-cta:not([hidden]) {
            display: block;
        }
    }

    /* ─── USE-CASE ROUTER ─── */
    .lh-router {
        padding: 96px 0;
        background: var(--bg-deep);
    }

    .lh-router-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 1100px;
        margin: 0 auto;
    }

    .lh-router-card {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: var(--bg-surface);
        border: 1px solid var(--border-on-dark);
        border-radius: 16px;
        padding: 32px 28px;
        text-decoration: none;
        color: inherit;
        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .lh-router-card:hover {
        transform: translateY(-3px);
        border-color: var(--border-gold-strong);
        background: var(--bg-surface-hover);
        box-shadow: var(--shadow-card-hover);
    }

    .lh-router-eyebrow {
        color: var(--gold);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-family: var(--font-heading);
    }

    .lh-router-card h3 {
        color: var(--ink-on-dark);
        font-size: 1.25rem;
        font-weight: 800;
        margin: 0;
        font-family: var(--font-heading);
        line-height: 1.2;
        letter-spacing: -0.015em;
    }

    .lh-router-card p {
        color: var(--ink-on-dark-muted);
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0;
    }

    .lh-router-link {
        margin-top: auto;
        padding-top: 8px;
        color: var(--gold);
        font-weight: 700;
        font-size: 0.92rem;
    }

    .lh-router-stat {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--gold-soft);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin: 4px 0 0;
        padding: 10px 0 0;
        border-top: 1px solid var(--border-on-dark);
    }

    /* ─── PRICING PREVIEW (warm-dark) ─── */
    .lh-pricing-preview {
        padding: 112px 0;
        background: var(--bg-warm);
        color: var(--ink-on-dark);
    }

    .lh-pricing-preview .lh-section-heading {
        color: var(--gold);
    }

    /* ─── FINAL CTA DUAL ACTIONS ─── */
    .lh-final-cta-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

    .lh-hero-sub {
        color: var(--gold-soft);
        font-size: clamp(1.1rem, 2.2vw, 1.35rem);
        line-height: 1.55;
        margin: 0 0 32px;
        max-width: 52ch;
    }

    .lh-hero-ctas {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .lh-hero-video {
        margin-top: 24px;
        width: 100%;
        max-width: 920px;
        overflow: hidden;
    }

    .lh-hero-video.lh-video-open {
        animation: lh-video-open 0.4s ease-out forwards;
    }

    .lh-hero-video.lh-video-close {
        animation: lh-video-close 0.3s ease-in forwards;
    }

    .lh-video-wrap {
        border: 1px solid var(--border-gold-strong);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: var(--shadow-card);
    }

    .lh-video-frame {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        border: 0;
        background: var(--bg-deep);
    }

    @keyframes lh-video-open {
        from {
            opacity: 0;
            max-height: 0;
            transform: translateY(-16px);
        }
        to {
            opacity: 1;
            max-height: 600px;
            transform: translateY(0);
        }
    }

    @keyframes lh-video-close {
        from {
            opacity: 1;
            max-height: 600px;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            max-height: 0;
            transform: translateY(-16px);
        }
    }

    /* ─── SHARED CTAS ─── */
    .lh-cta-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--gold);
        color: var(--bg-deep);
        text-decoration: none;
        border-radius: 10px;
        padding: 16px 32px;
        font-weight: 700;
        font-size: 1.05rem;
        border: 2px solid var(--gold);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .lh-cta-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(var(--c-gold-rgb), 0.25);
        background: var(--gold-soft);
        color: var(--bg-deep);
    }

    .lh-cta-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: var(--gold);
        text-decoration: none;
        border-radius: 10px;
        padding: 16px 32px;
        font-weight: 700;
        font-size: 1.05rem;
        border: 2px solid var(--gold);
        transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }

    .lh-cta-secondary:hover {
        transform: translateY(-2px);
        background: rgba(var(--c-gold-rgb), 0.1);
        border-color: var(--gold);
    }

    .lh-cta-large {
        padding: 18px 40px;
        font-size: 1.12rem;
    }

    /* ─── COMPARE (warm-dark) ─── */
    .lh-compare {
        padding: 80px 0;
        background: var(--bg-warm);
        color: var(--ink-on-dark);
    }

    .lh-compare .lh-section-heading {
        color: var(--ink-on-dark);
    }

    .lh-compare .lh-section-heading .lh-accent {
        color: var(--gold-on-warm);
    }

    .lh-compare .lh-section-sub {
        color: var(--ink-on-warm-muted);
    }

    .lh-compare-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        max-width: 1060px;
        margin: 0 auto;
    }

    .lh-compare-col {
        background: var(--bg-warm-card);
        border: 1px solid var(--border-on-warm);
        border-radius: 14px;
        padding: 28px 24px;
        box-shadow: var(--shadow-card-warm);
    }

    .lh-compare-col h3 {
        margin: 0 0 14px;
        font-family: var(--font-heading);
        font-size: 1.35rem;
        font-weight: 900;
        line-height: 1.05;
        letter-spacing: -0.02em;
        color: var(--ink-on-dark);
    }

    .lh-compare-col ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .lh-compare-col li {
        font-size: 0.95rem;
        line-height: 1.5;
        padding-left: 22px;
        position: relative;
        color: var(--ink-on-warm-muted);
    }

    .lh-compare-bad h3 {
        color: var(--ink-on-warm-faint);
    }

    .lh-compare-bad li::before {
        content: "✕";
        position: absolute;
        left: 0;
        color: var(--accent-bad);
        font-weight: 700;
    }

    .lh-compare-good {
        background: var(--bg-warm-card-hover);
        border-color: var(--border-gold-strong);
        box-shadow: 0 14px 32px rgba(var(--c-black-rgb), 0.45), 0 0 0 1px rgba(var(--c-gold-rgb), 0.18);
    }

    .lh-compare-good h3 {
        color: var(--gold);
    }

    .lh-compare-good li {
        color: var(--gold-soft);
    }

    .lh-compare-good li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: var(--gold);
        font-weight: 800;
    }

    /* ─── PROOF + TESTIMONIAL ─── */
    .lh-pullquote {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }

    .lh-pullquote blockquote {
        margin: 0 0 22px;
        color: var(--ink-on-dark);
        font-family: var(--font-heading);
        font-size: clamp(1.7rem, 3.4vw, 2.6rem);
        line-height: 1.1;
        font-weight: 800;
        letter-spacing: -0.025em;
    }

    .lh-pullquote figcaption {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: var(--gold-soft);
        font-size: 0.92rem;
    }

    .lh-pullquote-logo {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border-radius: 999px;
    }

    .lh-pullquote figcaption strong {
        color: var(--gold);
    }

    .lh-pullquote figcaption a {
        color: var(--gold-soft);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .lh-pullquote figcaption a:hover {
        color: var(--ink-on-dark);
    }

    /* ─── HOW IT WORKS ─── */
    .lh-steps {
        padding: 80px 0;
        background: var(--bg-deep);
    }

    .lh-section-heading {
        color: var(--gold);
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 900;
        line-height: 1.02;
        letter-spacing: -0.025em;
        text-align: center;
        margin: 0 0 40px;
    }

    .lh-steps-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 1100px;
        margin: 0 auto;
    }

    .lh-step-card {
        background: rgba(var(--c-gold-rgb), 0.04);
        border: none;
        border-radius: 14px;
        padding: 28px 22px;
        text-align: center;
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .lh-step-card:hover {
        transform: translateY(-3px);
        background: rgba(var(--c-gold-rgb), 0.07);
    }

    .lh-step-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 999px;
        background: transparent;
        color: var(--gold);
        font-weight: 800;
        font-size: 1.15rem;
        margin-bottom: 16px;
        border: 2px solid var(--gold);
        letter-spacing: -0.02em;
        font-family: var(--font-heading);
    }

    .lh-step-card h3 {
        color: var(--ink-on-dark);
        font-size: 1.25rem;
        margin: 0 0 8px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .lh-step-card p {
        color: var(--gold-soft);
        font-size: 0.95rem;
        line-height: 1.55;
        margin: 0;
    }

    /* ─── FAQ ─── */
    .lh-faq {
        padding: 80px 0;
        background: var(--bg-surface);
    }

    .lh-faq-list {
        max-width: 720px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .lh-faq-item {
        background: var(--bg-surface);
        border: 1px solid var(--border-gold);
        border-radius: 10px;
        overflow: hidden;
    }

    .lh-faq-item summary {
        padding: 18px 22px;
        color: var(--ink-on-dark);
        font-weight: 800;
        font-size: 1.1rem;
        line-height: 1.25;
        letter-spacing: -0.01em;
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lh-faq-item summary::-webkit-details-marker {
        display: none;
    }

    .lh-faq-item summary::after {
        content: "+";
        color: var(--gold);
        font-size: 1.4rem;
        font-weight: 700;
        flex-shrink: 0;
        margin-left: 16px;
        transition: transform 0.2s ease;
    }

    .lh-faq-item[open] summary::after {
        content: "−";
    }

    .lh-faq-item p {
        padding: 0 22px 18px;
        color: var(--gold-soft);
        font-size: 0.98rem;
        line-height: 1.65;
        margin: 0;
    }

    /* ─── FINAL CTA ─── */
    .lh-final-cta {
        padding: 80px 0 96px;
        background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-surface) 100%);
    }

    .lh-final-cta-inner {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
        background: var(--bg-deep);
        border: 1px solid var(--border-gold-strong);
        border-radius: 14px;
        padding: 48px 32px;
    }

    .lh-final-cta-inner h2 {
        color: var(--gold);
        font-size: clamp(2rem, 4vw, 3rem);
        line-height: 1.02;
        letter-spacing: -0.025em;
        margin: 0 0 12px;
        font-weight: 900;
    }

    .lh-final-cta-inner p {
        color: var(--gold-soft);
        font-size: 1.02rem;
        margin: 0 0 24px;
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 1180px) {
        .lh-hero-grid {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .lh-hero-visual {
            order: -1;
            padding: 16px 40px 32px;
        }

        .lh-hero-visual-card {
            max-width: 460px;
            transform: rotate(-0.6deg);
        }

        .lh-hero-phone {
            width: 92px;
        }
    }

    @media (max-width: 1024px) {
        .lh-steps-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .lh-compare-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .lh-hero {
            padding: 72px 0 56px;
        }

        .lh-router-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 600px) {
        .lh-hero {
            padding: 60px 0 44px;
        }

        .lh-hero-ctas {
            flex-direction: column;
            align-items: stretch;
        }

        .lh-cta-primary,
        .lh-cta-secondary {
            width: 100%;
        }

        .lh-steps-grid {
            grid-template-columns: 1fr;
        }

        .lh-final-cta-inner {
            padding: 32px 20px;
        }
    }

    /* ─── CONVERSION REDESIGN OVERRIDES ─── */
    .lh-stage,
    .lh-sticky-cta {
        --tp-gold: var(--c-gold);
        --tp-gold-mid: rgba(var(--c-gold-light-rgb), 0.85);
        --tp-cream: var(--c-gold-soft);
        --tp-body: rgba(var(--c-stone-rgb), 0.85);
        --tp-muted: rgba(var(--c-gold-soft-rgb), 0.55);
        --tp-faint: rgba(var(--c-gold-soft-rgb), 0.42);
        --tp-base: var(--c-bg-abyss);
        --tp-surface: rgba(var(--c-white-rgb), 0.05);
        --tp-surface-soft: rgba(var(--c-white-rgb), 0.025);
        --tp-border: rgba(var(--c-gold-soft-rgb), 0.14);
        --tp-border-strong: rgba(var(--c-gold-rgb), 0.30);
        --tp-purple: rgba(var(--c-violet-rgb), 0.28);
        --tp-heading: 'Montserrat', sans-serif;
        --tp-body-font: 'Inter', 'Montserrat', sans-serif;
    }

    .lh-stage {
        position: relative;
        overflow: hidden;
        min-height: 100vh;
        background: var(--tp-base);
        color: var(--tp-body);
        font-family: var(--tp-body-font);
        isolation: isolate;
    }

    .lh-stage__ambient {
        position: absolute;
        inset: -20%;
        pointer-events: none;
        z-index: 0;
        background:
            radial-gradient(ellipse 55% 45% at 78% 45%, rgba(var(--c-gold-rgb), 0.18) 0%, rgba(var(--c-gold-rgb), 0.08) 30%, rgba(var(--c-gold-rgb), 0.02) 60%, transparent 100%),
            radial-gradient(ellipse 45% 40% at 18% 25%, rgba(var(--c-violet-rgb), 0.28) 0%, rgba(var(--c-violet-rgb), 0.12) 35%, rgba(var(--c-violet-rgb), 0.03) 65%, transparent 100%),
            radial-gradient(ellipse 65% 50% at 50% 110%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
        animation: lhStageAmbientDrift 20s ease-in-out infinite alternate;
        transform-origin: center;
        will-change: transform;
    }

    .lh-stage__noise {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.045;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
        background-size: 240px 240px;
    }

    .lh-stage__vignette {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(var(--c-black-rgb), 0.55) 100%);
    }

    .lh-stage__content {
        position: relative;
        z-index: 1;
    }

    @keyframes lhStageAmbientDrift {
        0%   { transform: translate3d(-15%, -10%, 0) scale(1.10); }
        100% { transform: translate3d(15%, 12%, 0) scale(1.25); }
    }

    .lh-stage .landing-container {
        max-width: 1240px;
        padding: 0 clamp(20px, 4vw, 32px);
    }

    .lh-stage .lh-hero,
    .lh-stage .lh-hero-proof,
    .lh-stage .lh-compare,
    .lh-stage .lh-steps,
    .lh-stage .lh-router,
    .lh-stage .lh-pricing-preview,
    .lh-stage .lh-faq,
    .lh-stage .lh-final-cta {
        position: relative;
        z-index: 1;
        background: transparent;
        color: var(--tp-body);
        font-family: var(--tp-body-font);
    }

    .lh-stage .lh-hero {
        padding: clamp(46px, 7vh, 72px) 0 clamp(36px, 6vh, 64px);
    }

    .lh-stage .lh-hero-grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(520px, 1.18fr);
        gap: clamp(28px, 3.2vw, 52px);
    }

    .lh-stage .lh-hero-copy {
        max-width: 540px;
        animation: lhStageEnter 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .lh-stage .lh-hero-eyebrow,
    .lh-stage .lh-router-eyebrow {
        color: var(--tp-muted);
        font-family: var(--tp-body-font);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        line-height: 1.45;
        margin-bottom: 18px;
        opacity: 1;
        text-transform: uppercase;
    }

    .lh-stage .lh-hero h1 {
        color: var(--tp-gold);
        font-family: var(--tp-heading);
        font-size: clamp(3rem, 5.2vw, 4.45rem);
        font-weight: 900;
        letter-spacing: -0.035em;
        line-height: 0.98;
        margin: 0;
        max-width: 13.5ch;
        text-wrap: balance;
    }

    .lh-hero-accent {
        width: 64px;
        height: 4px;
        margin: 22px 0 24px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--tp-gold), rgba(var(--c-gold-rgb), 0.3));
    }

    .lh-stage .lh-hero-sub,
    .lh-stage .lh-section-sub {
        color: var(--tp-body);
        font-family: var(--tp-body-font);
        font-size: clamp(1.08rem, 1.55vw, 1.36rem);
        font-weight: 300;
        line-height: 1.55;
        max-width: 62ch;
    }

    .lh-stage .lh-hero-sub {
        margin: 0 0 32px;
    }

    .lh-stage .lh-hero-ctas,
    .lh-stage .lh-final-cta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    .lh-stage .lh-cta-primary,
    .lh-sticky-cta .lh-cta-primary,
    .lh-stage .get-started-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        border: 1px solid rgba(var(--c-gold-rgb), 0.72);
        border-radius: 14px;
        background: linear-gradient(135deg, var(--tp-gold) 0%, var(--c-gold-light) 100%);
        box-shadow:
            0 18px 38px -18px rgba(var(--c-gold-rgb), 0.75),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.42);
        color: var(--tp-base);
        cursor: pointer;
        font-family: var(--tp-body-font);
        font-size: 1.02rem;
        font-weight: 800;
        line-height: 1.1;
        padding: 16px 28px;
        text-align: center;
        text-decoration: none;
        transition: transform 180ms ease-out, box-shadow 180ms ease-out, background 180ms ease-out;
    }

    .lh-stage .lh-cta-primary:hover,
    .lh-sticky-cta .lh-cta-primary:hover,
    .lh-stage .get-started-button:hover {
        background: linear-gradient(135deg, var(--c-gold-light) 0%, var(--tp-gold) 100%);
        box-shadow:
            0 22px 44px -18px rgba(var(--c-gold-rgb), 0.88),
            0 0 0 4px rgba(var(--c-gold-rgb), 0.10),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.48);
        color: var(--tp-base);
        transform: translateY(-2px);
    }

    .lh-stage .lh-cta-secondary,
    .lh-stage .pricing-card-button a[onclick] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 52px;
        border: 1px solid rgba(var(--c-gold-soft-rgb), 0.24) !important;
        border-radius: 14px;
        background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.055) 0%, rgba(var(--c-white-rgb), 0.018) 100%) !important;
        box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.07);
        color: var(--tp-gold-mid) !important;
        cursor: pointer;
        font-family: var(--tp-body-font);
        font-size: 1.02rem;
        font-weight: 700;
        line-height: 1.1;
        padding: 16px 26px;
        text-align: center;
        text-decoration: none;
        transition: transform 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
    }

    .lh-stage .lh-cta-secondary:hover,
    .lh-stage .pricing-card-button a[onclick]:hover {
        background: linear-gradient(145deg, rgba(var(--c-gold-light-rgb), 0.10) 0%, rgba(var(--c-white-rgb), 0.026) 100%) !important;
        border-color: rgba(var(--c-gold-light-rgb), 0.48) !important;
        box-shadow: 0 14px 30px -20px rgba(var(--c-gold-rgb), 0.55), inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
        color: var(--tp-gold-mid) !important;
        transform: translateY(-2px);
    }

    .lh-cta-play {
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 9px solid currentColor;
        transform: translateX(1px);
    }

    .lh-stage .lh-cta-reassurance {
        color: var(--tp-muted);
        font-size: 0.9rem;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.45;
        margin-top: 14px;
    }

    .lh-stage .lh-trust-pills {
        gap: 10px;
        margin-top: 24px;
    }

    .lh-stage .lh-trust-pills li {
        gap: 8px;
        border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
        border-radius: 999px;
        background: rgba(var(--c-white-rgb), 0.035);
        color: var(--tp-muted);
        font-size: 0.88rem;
        font-weight: 600;
        padding: 9px 14px;
    }

    .lh-trust-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--tp-gold-mid);
        box-shadow: 0 0 10px rgba(var(--c-gold-light-rgb), 0.32);
        flex: 0 0 auto;
    }

    .lh-stage .lh-hero-visual {
        box-sizing: border-box;
        width: 100%;
        min-height: clamp(340px, 38vw, 500px);
        padding: clamp(18px, 2.5vw, 28px) clamp(6px, 1vw, 16px) clamp(38px, 4vw, 56px);
        animation: lhStageEnter 520ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
    }

    .lh-hero-visual-halo {
        position: absolute;
        inset: -48% -44% -38% -44%;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(ellipse 50% 45% at 50% 45%, rgba(var(--c-gold-rgb), 0.22) 0%, rgba(var(--c-gold-rgb), 0.14) 22%, rgba(var(--c-gold-rgb), 0.06) 45%, rgba(var(--c-gold-rgb), 0.015) 70%, transparent 100%),
            radial-gradient(ellipse 65% 60% at 50% 40%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
        filter: blur(28px);
    }

    .lh-stage .lh-hero-visual-card {
        z-index: 2;
        max-width: clamp(528px, 55vw, 792px);
        border: 1px solid var(--tp-border);
        border-radius: 28px;
        background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.055) 0%, rgba(var(--c-white-rgb), 0.016) 100%);
        box-shadow:
            0 30px 60px -20px rgba(var(--c-black-rgb), 0.62),
            0 0 60px rgba(var(--c-gold-rgb), 0.07),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.09);
        transform: rotate(-1deg);
    }

    .lh-stage .lh-hero-visual-card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(var(--c-gold-soft-rgb), 0.08) 0%, transparent 28%, rgba(var(--c-black-rgb), 0.16) 100%);
        z-index: 2;
    }

    .lh-stage .lh-hero-screenshot {
        filter: saturate(1.04) contrast(1.03);
    }

    .lh-stage .lh-hero-phone {
        z-index: 3;
        width: clamp(88px, 9vw, 124px);
        border: 1px solid rgba(var(--c-gold-soft-rgb), 0.20);
        border-radius: 24px;
        background: var(--tp-base);
        box-shadow:
            0 24px 40px rgba(var(--c-black-rgb), 0.62),
            0 4px 12px rgba(var(--c-gold-rgb), 0.08),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.12);
    }

    .lh-stage .lh-hero-phone--right {
        right: clamp(4px, 1.5vw, 18px);
        bottom: clamp(10px, 2.5vw, 30px);
    }

    .lh-stage .lh-hero-visual-badge {
        position: absolute;
        z-index: 4;
        border: 1px solid rgba(var(--c-gold-soft-rgb), 0.16);
        border-radius: 999px;
        background: linear-gradient(145deg, rgba(var(--c-bg-deep-rgb), 0.88) 0%, rgba(var(--c-bg-deep-rgb), 0.54) 100%);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        box-shadow: 0 20px 40px -24px rgba(var(--c-black-rgb), 0.72), inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
        color: var(--tp-gold-mid);
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        padding: 10px 14px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .lh-stage .lh-hero-visual-badge {
        top: clamp(8px, 2vw, 22px);
        right: clamp(18px, 4vw, 54px);
    }

    .lh-hero-pedestal {
        position: absolute;
        left: 14%;
        right: 14%;
        bottom: clamp(10px, 2vw, 24px);
        z-index: 1;
        height: 36px;
        pointer-events: none;
        background: radial-gradient(ellipse at center, rgba(var(--c-black-rgb), 0.6) 0%, rgba(var(--c-black-rgb), 0.25) 45%, transparent 75%);
        filter: blur(6px);
    }

    .lh-stage .lh-pulse {
        background: var(--tp-gold);
        box-shadow: 0 0 0 0 rgba(var(--c-gold-rgb), 0.55);
    }

    .lh-stage .lh-hero-proof {
        padding: clamp(24px, 4vw, 40px) 0;
        border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.12);
        border-bottom: 1px solid rgba(var(--c-gold-soft-rgb), 0.12);
        background: linear-gradient(90deg, transparent 0%, rgba(var(--c-gold-soft-rgb), 0.035) 50%, transparent 100%);
    }

    .lh-stage .lh-hero-proof .lh-pullquote {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: clamp(20px, 4vw, 48px);
        align-items: center;
        max-width: 1080px;
        padding: clamp(20px, 3vw, 28px);
        border: 1px solid var(--tp-border);
        border-radius: 28px;
        background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
        box-shadow:
            0 30px 60px -24px rgba(var(--c-black-rgb), 0.6),
            0 0 60px rgba(var(--c-gold-rgb), 0.045),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    }

    .lh-stage .lh-hero-proof .lh-pullquote::before,
    .lh-stage .lh-router-card::before,
    .lh-stage .lh-step-card::before,
    .lh-stage .pricing-card::before,
    .lh-stage .lh-final-cta-inner::before {
        content: "";
        position: absolute;
        inset: -70% -80% -70% -80%;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.16) 0%, rgba(var(--c-gold-rgb), 0.08) 25%, rgba(var(--c-gold-rgb), 0.025) 55%, transparent 100%);
        filter: blur(28px);
    }

    .lh-stage .lh-hero-proof .lh-pullquote blockquote {
        border-left: 0;
        color: var(--tp-body);
        font-size: clamp(1rem, 1.4vw, 1.16rem);
        font-weight: 500;
        line-height: 1.62;
        padding-left: 0;
    }

    .lh-stage .lh-hero-proof .lh-pullquote figcaption {
        color: var(--tp-muted);
        white-space: normal;
    }

    .lh-stage .lh-hero-proof .lh-pullquote figcaption strong {
        color: var(--tp-gold-mid);
    }

    .lh-stage .lh-hero-proof .lh-pullquote figcaption a {
        color: var(--tp-muted);
    }

    .lh-stage .lh-hero-proof .lh-pullquote-logo {
        height: clamp(72px, 10vw, 112px);
        max-width: clamp(150px, 18vw, 240px);
        filter: invert(1) brightness(1.1) contrast(1.05);
        opacity: 0.82;
    }

    .lh-stage .lh-compare,
    .lh-stage .lh-steps,
    .lh-stage .lh-router,
    .lh-stage .lh-pricing-preview,
    .lh-stage .lh-faq,
    .lh-stage .lh-final-cta {
        padding: clamp(72px, 9vw, 112px) 0;
    }

    .lh-stage .lh-section-heading,
    .lh-stage .lh-final-cta-inner h2 {
        color: var(--tp-cream);
        font-family: var(--tp-heading);
        font-size: clamp(2.2rem, 4.8vw, 3.6rem);
        font-weight: 900;
        letter-spacing: -0.035em;
        line-height: 1.02;
        margin: 0 auto 18px;
        max-width: 900px;
        text-align: center;
        text-wrap: balance;
    }

    .lh-stage .lh-section-heading::after {
        content: "";
        display: block;
        width: 32px;
        height: 2px;
        margin: 20px auto 0;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--tp-gold), rgba(var(--c-gold-rgb), 0.3));
    }

    .lh-stage .lh-heading-light,
    .lh-stage .lh-pricing-preview .lh-section-heading,
    .lh-stage .lh-faq .lh-section-heading {
        color: var(--tp-cream);
    }

    .lh-stage .lh-accent {
        color: var(--tp-gold-mid);
    }

    .lh-stage .lh-section-sub {
        margin: 0 auto 40px;
        text-align: center;
    }

    .lh-stage .lh-compare-grid,
    .lh-stage .lh-steps-grid,
    .lh-stage .lh-router-grid {
        gap: 20px;
    }

    .lh-stage .lh-compare-col,
    .lh-stage .lh-step-card,
    .lh-stage .lh-router-card,
    .lh-stage .pricing-card,
    .lh-stage .lh-faq-item,
    .lh-stage .lh-final-cta-inner {
        position: relative;
        border: 1px solid var(--tp-border);
        border-radius: 24px;
        background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
        box-shadow:
            0 30px 60px -24px rgba(var(--c-black-rgb), 0.6),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
    }

    .lh-stage .lh-hero-proof .lh-pullquote,
    .lh-stage .lh-step-card,
    .lh-stage .lh-router-card,
    .lh-stage .pricing-card,
    .lh-stage .lh-final-cta-inner {
        overflow: visible;
    }

    .lh-stage .lh-compare-col,
    .lh-stage .lh-faq-item {
        overflow: hidden;
    }

    .lh-stage .lh-compare-col,
    .lh-stage .lh-step-card,
    .lh-stage .lh-router-card {
        padding: clamp(24px, 3vw, 32px);
    }

    .lh-stage .lh-step-card,
    .lh-stage .lh-router-card,
    .lh-stage .pricing-card {
        transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, background 180ms ease-out;
    }

    .lh-stage .lh-step-card:hover,
    .lh-stage .lh-router-card:hover,
    .lh-stage .pricing-card:hover {
        transform: translateY(-3px);
        border-color: rgba(var(--c-gold-light-rgb), 0.32);
        background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.07) 0%, rgba(var(--c-white-rgb), 0.022) 100%);
        box-shadow:
            0 34px 70px -24px rgba(var(--c-black-rgb), 0.68),
            0 0 50px rgba(var(--c-gold-rgb), 0.055),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.09);
    }

    .lh-stage .lh-compare-col h3,
    .lh-stage .lh-step-card h3,
    .lh-stage .lh-router-card h3,
    .lh-stage .pp-title {
        color: var(--tp-cream);
        font-family: var(--tp-heading);
        font-size: clamp(1.2rem, 1.8vw, 1.45rem);
        font-weight: 900;
        letter-spacing: -0.02em;
        line-height: 1.12;
    }

    .lh-stage .lh-compare-bad h3 {
        color: rgba(var(--c-gold-soft-rgb), 0.58);
    }

    .lh-stage .lh-compare-good {
        border-color: rgba(var(--c-gold-light-rgb), 0.34);
        background: linear-gradient(145deg, rgba(var(--c-gold-light-rgb), 0.075) 0%, rgba(var(--c-white-rgb), 0.018) 100%);
    }

    .lh-stage .lh-compare-good h3,
    .lh-stage .lh-step-num,
    .lh-stage .lh-router-link,
    .lh-stage .lh-router-stat {
        color: var(--tp-gold-mid);
    }

    .lh-stage .lh-compare-col li,
    .lh-stage .lh-step-card p,
    .lh-stage .lh-router-card p,
    .lh-stage .pp-tagline,
    .lh-stage .pricing-card-features li,
    .lh-stage .lh-faq-item p {
        color: var(--tp-body) !important;
        font-size: 0.96rem;
        line-height: 1.58;
    }

    .lh-stage .lh-compare-good li,
    .lh-stage .pricing-card-featured .pricing-card-features li {
        color: var(--tp-gold-mid) !important;
    }

    .lh-stage .lh-compare-bad li::before {
        color: rgba(var(--c-stone-rgb), 0.55);
    }

    .lh-stage .lh-compare-good li::before,
    .lh-stage .pricing-card-features li::before {
        color: var(--tp-gold-mid);
    }

    .lh-stage .lh-step-num {
        width: 52px;
        height: 52px;
        border: 1px solid rgba(var(--c-gold-light-rgb), 0.42);
        background: rgba(var(--c-gold-rgb), 0.035);
        box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.08), 0 0 24px rgba(var(--c-gold-rgb), 0.06);
    }

    .lh-stage .lh-router-stat {
        border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
        font-size: 0.74rem;
        letter-spacing: 0.10em;
    }

    .lh-stage .lh-pricing-preview {
        background: linear-gradient(180deg, rgba(var(--c-white-rgb), 0.025) 0%, transparent 100%);
    }

    .lh-stage .pricing-toggle-wrap {
        margin-bottom: clamp(32px, 5vw, 56px);
    }

    .lh-stage .pricing-toggle-group {
        border: 1px solid var(--tp-border);
        border-radius: 999px;
        background: rgba(var(--c-white-rgb), 0.035);
        box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    }

    .lh-stage .pricing-toggle-btn {
        color: var(--tp-muted);
        font-family: var(--tp-body-font);
        font-weight: 700;
    }

    .lh-stage .pricing-toggle-btn.is-active {
        background: linear-gradient(135deg, var(--tp-gold) 0%, var(--c-gold-light) 100%);
        box-shadow: 0 12px 28px -18px rgba(var(--c-gold-rgb), 0.75);
        color: var(--tp-base);
    }

    .lh-stage .pricing-toggle-save {
        background: rgba(var(--c-violet-rgb), 0.32);
        color: var(--tp-gold-mid);
    }

    .lh-stage .pricing-cards-container {
        max-width: 1240px;
        gap: 18px;
    }

    .lh-stage .pricing-card {
        min-height: clamp(560px, 58vw, 660px);
        border-width: 1px;
    }

    .lh-stage .pricing-card-featured {
        border-color: rgba(var(--c-gold-rgb), 0.42);
        box-shadow:
            0 34px 72px -28px rgba(var(--c-black-rgb), 0.72),
            0 0 0 1px rgba(var(--c-gold-rgb), 0.16),
            0 0 70px rgba(var(--c-gold-rgb), 0.07),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.09);
        transform: translateY(-10px);
    }

    .lh-stage .pricing-card-featured:hover {
        transform: translateY(-13px);
    }

    .lh-stage .featured-badge {
        /* Sits as a single-line banner inside the top of the featured card. Every card reserves
           matching top padding (see .pricing-card-content) so the title clears the badge and all
           cards' titles/prices stay aligned. */
        top: 12px;
        transform: translateX(-50%);
        border: 1px solid rgba(var(--c-gold-rgb), 0.38);
        border-radius: 999px;
        background: rgba(var(--c-gold-rgb), 0.12);
        color: var(--tp-gold-mid);
        letter-spacing: 0.08em;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .lh-stage .pp-title {
        color: var(--tp-cream);
    }

    .lh-stage .pp-price-amount,
    .lh-stage .pp-price-custom,
    .lh-stage .pricing-card-featured .pp-title,
    .lh-stage .pricing-card-featured .pp-price-amount {
        color: var(--tp-gold);
        font-family: var(--tp-heading);
        font-weight: 900;
        letter-spacing: -0.035em;
    }

    .lh-stage .pp-price-period {
        color: var(--tp-muted);
    }

    .lh-stage .pricing-card-content {
        /* Top padding reserves room for the featured card's "Most Popular" banner and is applied
           to every card so all titles/prices line up (the badge itself is out of flow). */
        padding: clamp(50px, 4vw, 58px) clamp(20px, 2.4vw, 28px) 28px;
    }

    .lh-stage .pricing-card-features li {
        position: relative;
        padding: 7px 0 7px 22px !important;
    }

    .lh-stage .pricing-card-features li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 1.05em;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--tp-gold-mid);
        box-shadow: 0 0 10px rgba(var(--c-gold-light-rgb), 0.18);
    }

    .lh-stage .lh-faq-list {
        max-width: 820px;
        gap: 12px;
    }

    .lh-stage .lh-faq-item {
        border-radius: 18px;
    }

    .lh-stage .lh-faq-item summary {
        color: var(--tp-cream);
        font-family: var(--tp-body-font);
        font-size: 1.05rem;
        font-weight: 800;
    }

    .lh-stage .lh-faq-item summary::after {
        color: var(--tp-gold-mid);
    }

    .lh-stage .lh-final-cta {
        padding-bottom: clamp(88px, 10vw, 128px);
    }

    .lh-stage .lh-final-cta-inner {
        max-width: 820px;
        padding: clamp(36px, 5vw, 64px);
        text-align: center;
    }

    .lh-stage .lh-final-cta-inner h2 {
        color: var(--tp-gold);
        margin-bottom: 14px;
    }

    .lh-stage .lh-final-cta-inner p {
        color: var(--tp-body);
        font-size: clamp(1rem, 1.7vw, 1.18rem);
        line-height: 1.55;
        margin: 0 auto 24px;
        max-width: 58ch;
    }

    .lh-stage .lh-video-wrap {
        border: 1px solid var(--tp-border);
        border-radius: 24px;
        background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
        box-shadow:
            0 30px 60px -24px rgba(var(--c-black-rgb), 0.6),
            0 0 60px rgba(var(--c-gold-rgb), 0.045),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    }

    .lh-sticky-cta {
        background: rgba(var(--c-bg-abyss-rgb), 0.92);
        border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.16);
        backdrop-filter: saturate(160%) blur(14px);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
    }

    .landing-page:has(.lh-stage) .landing-footer {
        border-top-color: rgba(var(--c-gold-soft-rgb), 0.14);
        background: var(--c-bg-abyss) !important;
    }

    @keyframes lhStageEnter {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .lh-stage__ambient,
        .lh-stage .lh-hero-copy,
        .lh-stage .lh-hero-visual,
        .lh-stage .lh-hero-screenshot,
        .lh-stage .lh-pulse {
            animation: none;
        }

        .lh-stage .lh-hero-screenshot--1 {
            opacity: 1;
        }
    }

    @media (max-width: 1180px) {
        .lh-stage .lh-hero-grid {
            grid-template-columns: 1fr;
        }

        .lh-stage .lh-hero-copy {
            max-width: 760px;
        }

        .lh-stage .lh-hero h1 {
            max-width: 12ch;
        }

        .lh-stage .lh-hero-visual {
            order: -1;
            max-width: 760px;
            margin: 0 auto;
            width: 100%;
        }

        .lh-stage .pricing-card-featured,
        .lh-stage .pricing-card-featured:hover {
            transform: none;
        }
    }

    @media (max-width: 1024px) {
        .lh-stage .lh-router-grid,
        .lh-stage .lh-compare-grid {
            grid-template-columns: 1fr;
            max-width: 760px;
        }

        .lh-stage .lh-hero-visual {
            order: 0;
            margin-top: clamp(28px, 5vw, 44px);
            min-height: clamp(300px, 46vw, 420px);
        }
    }

    @media (max-width: 768px) {
        .lh-stage .lh-hero {
            padding: 44px 0 56px;
        }

        .lh-stage .lh-hero h1 {
            font-size: clamp(2.55rem, 11vw, 3.45rem);
            max-width: 10ch;
        }

        .lh-stage .lh-hero-visual {
            min-height: clamp(280px, 72vw, 380px);
            padding: 16px 10px 42px;
        }

        .lh-stage .lh-trust-pills {
            display: none;
        }

        .lh-stage .lh-hero-visual-card {
            max-width: min(100%, 520px);
            border-radius: 22px;
        }

        .lh-stage .lh-hero-proof .lh-pullquote {
            grid-template-columns: 1fr;
            text-align: left;
        }

        .lh-stage .lh-final-cta-actions,
        .lh-stage .lh-hero-ctas {
            flex-direction: column;
            align-items: stretch;
        }

        .lh-stage .lh-cta-primary,
        .lh-stage .lh-cta-secondary {
            width: 100%;
        }
    }

    @media (max-width: 600px) {
        .lh-stage .landing-container {
            padding: 0 16px;
        }

        .lh-stage .lh-hero-visual-badge {
            font-size: 0.68rem;
            padding: 8px 10px;
        }

        .lh-stage .lh-hero-phone {
            width: clamp(72px, 18vw, 88px);
            border-radius: 18px;
        }

        .lh-stage .lh-compare,
        .lh-stage .lh-steps,
        .lh-stage .lh-router,
        .lh-stage .lh-pricing-preview,
        .lh-stage .lh-faq,
        .lh-stage .lh-final-cta {
            padding: 64px 0;
        }

        .lh-stage .lh-section-heading,
        .lh-stage .lh-final-cta-inner h2 {
            font-size: clamp(2rem, 11vw, 2.75rem);
        }
    }


/* ── Landing shell (header, nav, main, footer) ──
   Moved out of LandingLayout.razor; shared by every page using LandingLayout. */
/* Universal box-sizing for proper width calculations */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Reset any inherited styles and ensure full-width layout */
body, html {
    margin: 0;
    padding: 0;
}

.landing-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--c-bg-surface) !important;
    width: 100%;
}

/* Keyboard users get to the article without tabbing through the whole nav.
   Off-screen until focused rather than display:none, which would take it out
   of the tab order entirely. It has to out-stack the sticky header, which
   otherwise paints over the focused link. */
.skip-to-content {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    z-index: 1100;
    padding: 0.7rem 1.15rem;
    border: 1px solid rgba(var(--c-gold-rgb), 0.72);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-light) 100%);
    box-shadow: 0 18px 38px -18px rgba(var(--c-gold-rgb), 0.75);
    color: var(--c-bg-abyss);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: top 0.15s ease-out;
}

.skip-to-content:focus {
    top: 0.5rem;
}

/* Header — a pane of glass the page's own stage shows through, rather than a
   solid slab laid over it. */
.landing-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    background: rgba(var(--c-bg-abyss-rgb), 0.82);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow:
        0 18px 40px -28px rgba(var(--c-black-rgb), 0.9),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.05);
}

.landing-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    height: 70px;
}

.logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.logo-text {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.45rem, 3.4vw, 1.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}

.main-nav {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 2.2vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-list a {
    position: relative;
    color: rgba(var(--c-gold-soft-rgb), 0.72);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.18s ease-out;
}

/* The hero accent bar in miniature, drawn rather than underlined so it can
   open from the centre. */
.nav-list a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -8px;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
    transition: left 0.18s ease-out, right 0.18s ease-out;
}

.nav-list a:not(.nav-cta):hover,
.nav-list a:not(.nav-cta):focus-visible {
    color: var(--c-gold-light);
}

.nav-list a:not(.nav-cta):hover::after,
.nav-list a:not(.nav-cta):focus-visible::after {
    left: 0;
    right: 0;
}

.nav-list a.nav-login {
    color: rgba(var(--c-gold-light-rgb), 0.85);
    font-weight: 600;
}

.nav-list a.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.72);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-light) 100%);
    box-shadow:
        0 14px 30px -16px rgba(var(--c-gold-rgb), 0.75),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.42);
    color: var(--c-bg-abyss);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.1;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out;
}

.nav-list a.nav-cta:hover,
.nav-list a.nav-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        0 18px 36px -16px rgba(var(--c-gold-rgb), 0.85),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.5);
    color: var(--c-bg-abyss);
    filter: brightness(1.04);
}

/* Mobile Menu */
.mobile-menu-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
}

#mobile-menu-toggle:focus-visible + .landing-container .mobile-menu-toggle {
    outline: 2px solid var(--c-gold);
    outline-offset: 4px;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    cursor: pointer;
    transition: border-color 0.18s ease-out, background 0.18s ease-out;
}

.mobile-menu-toggle:hover {
    border-color: rgba(var(--c-gold-rgb), 0.45);
    background: rgba(var(--c-gold-rgb), 0.07);
}

.hamburger {
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: var(--c-gold);
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    transform-origin: center;
}

#mobile-menu-toggle:checked + .landing-container .mobile-menu-toggle .hamburger:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#mobile-menu-toggle:checked + .landing-container .mobile-menu-toggle .hamburger:nth-child(2) {
    opacity: 0;
}

#mobile-menu-toggle:checked + .landing-container .mobile-menu-toggle .hamburger:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
    max-height: 0;
    padding: 0;
    /* Transparent until opened: a solid rule here doubles up with the header's
       own bottom border on desktop, where the panel is never shown. */
    border-top: 1px solid transparent;
    background: linear-gradient(180deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

#mobile-menu-toggle:checked ~ .mobile-menu {
    max-height: 520px;
    padding: 16px 0 22px;
    border-top-color: rgba(var(--c-gold-soft-rgb), 0.14);
    opacity: 1;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav li {
    margin: 0;
}

.mobile-nav a {
    display: block;
    padding: 13px 4px;
    color: rgba(var(--c-gold-soft-rgb), 0.78);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    text-decoration: none;
    transition: color 0.18s ease-out;
}

.mobile-nav li + li a:not(.mobile-cta) {
    border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.08);
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
    color: var(--c-gold-light);
}

.mobile-nav a.mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 16px;
    padding: 0 26px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.72);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-light) 100%);
    box-shadow:
        0 16px 32px -16px rgba(var(--c-gold-rgb), 0.75),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.42);
    color: var(--c-bg-abyss);
    font-size: 1rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    .main-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .header-content {
        height: 60px;
    }
}

@media (max-width: 600px) {
    .landing-container {
        padding: 0 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skip-to-content,
    .nav-list a,
    .nav-list a:not(.nav-cta)::after,
    .nav-list a.nav-cta,
    .mobile-menu,
    .mobile-menu-toggle,
    .mobile-nav a,
    .hamburger {
        transition: none;
    }

    .nav-list a.nav-cta:hover {
        transform: none;
    }
}

/* Main Content */
.landing-main {
    flex: 1;
}

/* Footer — the closing panel of the same stage. No margin-top: any gap here
   shows the body background as a lighter seam above the footer. */
.landing-footer {
    padding: 80px 0 40px;
    border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    background: var(--c-bg-deep) !important;
    color: rgba(var(--c-stone-rgb), 0.85);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 0.95rem;
}

.footer-top-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.footer-column h3 {
    margin: 0 0 20px;
    color: var(--c-gold);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Miniature of the hero accent bar, so a footer column opens the way a page
   section does. Decorative, so it lives here rather than in the heading. */
.footer-column h3::after {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    margin-top: 10px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 12px;
}

.footer-column a,
.footer-link-button {
    color: rgba(var(--c-stone-rgb), 0.85);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.18s ease-out;
}

.footer-column a:hover,
.footer-column a:focus-visible,
.footer-link-button:hover,
.footer-link-button:focus-visible {
    color: var(--c-gold-light);
}

/* The cookie preferences control has to be a button for the consent library
   to bind to it, but it must read as one of the surrounding links. */
.footer-link-button {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* Middle Section: Brand & Social */
.footer-middle-section {
    border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-bottom: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    padding: 36px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-brand-area {
    flex: 1;
    min-width: 240px;
}

.brand-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-logo-img {
    height: auto;
    width: clamp(180px, 40vw, 250px);
    max-width: 100%;
}

.footer-social-area {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 240px;
}

.footer-social-icons-large {
    display: flex;
    gap: 14px;
}

/* Circular glass targets: the surface language of the cards, at icon scale. */
.footer-social-icons-large a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    color: rgba(var(--c-gold-light-rgb), 0.85);
    transition: transform 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out, box-shadow 0.18s ease-out;
}

.footer-social-icons-large svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.footer-social-icons-large a:hover,
.footer-social-icons-large a:focus-visible {
    border-color: rgba(var(--c-gold-rgb), 0.5);
    color: var(--c-gold);
    transform: translateY(-3px);
}

/* Each network keeps a trace of its own colour in the hover glow — enough to
   recognise, not enough to leave the gold palette. */
.footer-social-icons-large .social-facebook:hover,
.footer-social-icons-large .social-facebook:focus-visible {
    box-shadow:
        0 12px 26px -12px rgba(var(--c-facebook-rgb), 0.75),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.12);
}

.footer-social-icons-large .social-x:hover,
.footer-social-icons-large .social-x:focus-visible {
    box-shadow:
        0 12px 26px -12px rgba(var(--c-white-rgb), 0.35),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.12);
}

.footer-social-icons-large .social-discord:hover,
.footer-social-icons-large .social-discord:focus-visible {
    box-shadow:
        0 12px 26px -12px rgba(var(--c-discord-rgb), 0.75),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.12);
}

/* Bottom Bar */
.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 4px;
}

.footer-legal-text {
    margin-left: auto;
    font-size: 0.8rem;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    line-height: 1.5;
    text-align: right;
}

.footer-legal-text p {
    margin: 0 0 6px 0;
}

.company-address-sm {
    /* No further dimming: the meta tier already measures 5.1:1 here, and a
       second opacity on top of it drops under the 4.5 floor. */
    margin-bottom: 10px !important;
}

.legal-links-inline {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.legal-links-inline a,
.legal-links-inline .footer-link-button {
    color: rgba(var(--c-gold-soft-rgb), 0.7);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.18s ease-out;
}

.legal-links-inline a:hover,
.legal-links-inline a:focus-visible,
.legal-links-inline .footer-link-button:hover,
.legal-links-inline .footer-link-button:focus-visible {
    color: var(--c-gold-light);
}

.separator {
    color: rgba(var(--c-gold-soft-rgb), 0.3);
}

/* Responsive */
@media (max-width: 900px) {
    .landing-footer {
        padding: 64px 0 36px;
    }

    .footer-top-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
        margin-bottom: 48px;
    }
}

@media (max-width: 600px) {
    .landing-footer {
        padding: 56px 0 32px;
    }

    .footer-top-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 40px;
    }

    .footer-middle-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 28px 0;
    }

    .footer-social-area {
        justify-content: flex-start;
        min-width: 0;
    }

    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-legal-text {
        margin-left: 0;
        text-align: left;
    }

    .legal-links-inline {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-column a,
    .footer-link-button,
    .footer-social-icons-large a,
    .legal-links-inline a {
        transition: none;
    }

    .footer-social-icons-large a:hover {
        transform: none;
    }
}

/* Global Landing Page Styles */
:global(.landing-hero) {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-grey-50) 0%, var(--c-mist-dim) 100%);
}

:global(.landing-content) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

:global(.hero-text h1) {
    font-size: 3rem;
    font-weight: bold;
    color: var(--c-grey-800);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

:global(.subtitle) {
    font-size: 1.3rem;
    color: var(--c-grey-600);
    margin-bottom: 2rem;
    line-height: 1.6;
}

:global(.benefits) {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

:global(.benefits li) {
    padding: 8px 0;
    color: var(--c-grey-700);
    font-size: 1.1rem;
    position: relative;
    padding-left: 30px;
}

:global(.benefits li::before) {
    content: "✓";
    color: var(--c-sage);
    font-weight: bold;
    position: absolute;
    left: 0;
}

:global(.cta-primary) {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    border: none;
    padding: 16px 32px;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    margin-bottom: 1rem;
    text-decoration: none;
    display: inline-block;
}

:global(.cta-primary:hover) {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(var(--c-gold-rgb), 0.3);
    background: var(--c-gold-soft);
    color: var(--c-bg-deep);
    text-decoration: none;
}

:global(.cta-secondary) {
    background: transparent;
    color: var(--c-gold);
    border: 2px solid var(--c-gold);
    padding: 14px 30px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 1rem;
    text-decoration: none;
    display: inline-block;
}

:global(.cta-secondary:hover) {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    text-decoration: none;
}

:global(.trust-signals) {
    margin-top: 2rem;
    color: var(--c-grey-500);
    font-size: 0.9rem;
}

:global(.features-section) {
    padding: 80px 0;
    background: white;
}

:global(.features-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

:global(.feature-card) {
    text-align: center;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(var(--c-black-rgb), 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

:global(.feature-card:hover) {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(var(--c-black-rgb), 0.12);
}

:global(.feature-icon) {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

:global(.feature-card h3) {
    color: var(--c-grey-800);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

:global(.feature-card p) {
    color: var(--c-grey-600);
    line-height: 1.6;
    font-size: 1rem;
}


/* Table-of-contents links scroll rather than jump. Set on the scrolling element,
   because scroll-behavior on the content box itself does nothing, and limited to
   pages that have a table of contents so the rest of the site is unaffected. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.article-toc) {
        scroll-behavior: smooth;
    }
}

/* ── Blog category accents ────────────────────────────────────────────────────
   Category tags, chips and breadcrumbs all read --c-accent-* so the same
   category is the same colour wherever it appears. Global rather than scoped
   because the blog index and the article page both set these classes.
   BlogUrls.CategoryAccentClass picks the bucket from the category slug. */

.blog-accent-1 {
    --c-accent-rgb: var(--c-gold-rgb);
    --c-accent-ink: var(--c-gold);
}

.blog-accent-2 {
    --c-accent-rgb: var(--c-amber-rgb);
    --c-accent-ink: var(--c-amber);
}

.blog-accent-3 {
    --c-accent-rgb: var(--c-lime-rgb);
    --c-accent-ink: var(--c-lime);
}

.blog-accent-4 {
    --c-accent-rgb: var(--c-bronze-rgb);
    --c-accent-ink: var(--c-bronze);
}

.blog-accent-5 {
    --c-accent-rgb: var(--c-mist-rgb);
    --c-accent-ink: var(--c-mist);
}

/* Fallback for anything rendered without an accent class. */
.article-category-tag,
.article-card-category,
.category-chip {
    --c-accent-rgb: var(--c-gold-rgb);
    --c-accent-ink: var(--c-gold);
}

/* The blog stages paint their own background end to end, so the shared CTA
   band's gradient would land as a lighter box in the middle of one. */
.blog-stage .lh-final-cta,
.article-stage .lh-final-cta {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* ============================================================
   ACCOUNT PAGES — Log in / Register / Confirm email
   Signing up is one journey across three screens, so they share
   a single stage: ambient light, grain and vignette behind one
   glass card. Global rather than scoped because every rule here
   reaches into MudBlazor's own markup, which never carries a
   component's scope attribute.
   These pages render as static SSR, so nothing may depend on a
   class MudBlazor only applies from an interactive event handler
   (.mud-focused and friends) — :focus-within does that work.
   ============================================================ */

.auth-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 70px);
    padding: clamp(32px, 7vh, 72px) clamp(16px, 4vw, 32px) clamp(48px, 8vh, 88px);
    background: var(--c-bg-abyss);
    color: rgba(var(--c-stone-rgb), 0.85);
    font-family: 'Inter', 'Montserrat', sans-serif;
}

.auth-stage__ambient {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 78% 45%, rgba(var(--c-gold-rgb), 0.10) 0%, rgba(var(--c-gold-rgb), 0.045) 30%, rgba(var(--c-gold-rgb), 0.012) 60%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 25%, rgba(var(--c-violet-rgb), 0.18) 0%, rgba(var(--c-violet-rgb), 0.08) 35%, rgba(var(--c-violet-rgb), 0.02) 65%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 110%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    animation: authAmbientDrift 20s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes authAmbientDrift {
    0%   { transform: translate3d(-15%, -10%, 0) scale(1.10); }
    100% { transform: translate3d(15%, 12%, 0) scale(1.25); }
}

.auth-stage__noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.auth-stage__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(var(--c-black-rgb), 0.55) 100%);
}

.auth-stage__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    animation: authEnter 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes authEnter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Hero: the star of the page ─── */

.auth-hero {
    margin: 0 0 clamp(24px, 4vh, 36px);
    text-align: center;
}

.auth-eyebrow {
    margin: 0 0 14px;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.45;
    text-transform: uppercase;
}

.auth-title {
    margin: 0;
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.6rem, 7vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.98;
    text-wrap: balance;
}

.auth-accent {
    width: 64px;
    height: 4px;
    margin: 20px auto 18px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

.auth-sub {
    margin: 0 auto;
    max-width: 46ch;
    color: rgba(var(--c-stone-rgb), 0.85);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    font-weight: 300;
    line-height: 1.55;
    text-align: center;
}

/* ─── Glass card ─── */

.auth-card-wrap {
    position: relative;
}

/* Echo of the hero halo, one step gentler, so the card reads as lifted
   off the stage rather than pasted onto it. */
.auth-card__halo {
    position: absolute;
    inset: -55% -45%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.10) 0%, rgba(var(--c-gold-rgb), 0.05) 25%, rgba(var(--c-gold-rgb), 0.015) 55%, transparent 100%);
    filter: blur(28px);
}

/* The dark base under the glass matters: without it the ambient behind the card
   shows through the controls unevenly and tints whichever field it happens to
   sit behind. */
.auth-card {
    position: relative;
    z-index: 1;
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%),
        rgba(var(--c-bg-deep-rgb), 0.9);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(var(--c-black-rgb), 0.6),
        0 0 60px rgba(var(--c-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
}

.auth-card .mud-alert {
    margin-bottom: 20px;
    border-radius: 14px;
}

/* ─── Form ─── */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-form .mud-input-control {
    margin: 0;
}

/* Stack the label above the field instead of floating it. A floated label
   depends on MudBlazor's interactive shrink state, which static SSR never
   reaches, and the stacked form reads as the eyebrow tier of the hierarchy. */
.auth-form .mud-input-control-input-container {
    display: flex;
    flex-direction: column;
}

.auth-form .mud-input-label {
    position: static !important;
    order: -1;
    transform: none !important;
    margin: 0 0 8px 2px;
    color: rgba(var(--c-gold-soft-rgb), 0.72);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.auth-form .mud-input {
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.16);
    border-radius: 14px;
    background: linear-gradient(rgba(var(--c-white-rgb), 0.03), rgba(var(--c-white-rgb), 0.03)), var(--c-bg-abyss);
    color: var(--c-white);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.auth-form .mud-input::before,
.auth-form .mud-input::after {
    display: none;
}

.auth-form .mud-input:hover {
    border-color: rgba(var(--c-gold-soft-rgb), 0.32);
}

.auth-form .mud-input:focus-within {
    border-color: rgba(var(--c-gold-rgb), 0.7);
    background: linear-gradient(rgba(var(--c-gold-rgb), 0.07), rgba(var(--c-gold-rgb), 0.07)), var(--c-bg-abyss);
    box-shadow: 0 0 0 3px rgba(var(--c-gold-rgb), 0.14);
}

/* Qualified with the element: MudBlazor's own slot rule carries an `input`
   qualifier, so a class-only selector here loses and the field keeps its
   cramped 6px/0 padding. */
.auth-form input.mud-input-slot {
    padding: 14px 16px;
    color: var(--c-white);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.4;
}

.auth-form input.mud-input-slot::placeholder {
    color: rgba(var(--c-gold-soft-rgb), 0.32);
    opacity: 1;
}

/* Chrome paints its own near-white slab over autofilled fields; the inset
   shadow is the only way to repaint it. */
.auth-form .mud-input-slot:-webkit-autofill,
.auth-form .mud-input-slot:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--c-white);
    -webkit-box-shadow: 0 0 0 1000px var(--c-bg-deep) inset;
    caret-color: var(--c-white);
    border-radius: 13px;
}

.auth-form .mud-input-control-helper-container {
    margin-top: 6px;
    padding: 0 2px;
}

.auth-form .mud-input-helper-text {
    font-size: 0.8rem;
    line-height: 1.4;
}

.auth-form .validation-message {
    display: block;
    margin-top: 6px;
    color: var(--mud-palette-error);
    font-size: 0.8rem;
}

/* Turnstile is invisible unless Cloudflare asks for interaction, so the
   container may legitimately be zero-height — it gets no reserved space. */
.auth-turnstile {
    display: flex;
    justify-content: center;
}

.auth-submit.mud-button-root {
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    padding: 14px 28px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.72);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-light) 100%);
    box-shadow:
        0 18px 38px -18px rgba(var(--c-gold-rgb), 0.75),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.42);
    color: var(--c-bg-abyss);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-transform: none;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out;
}

.auth-submit.mud-button-root:hover {
    transform: translateY(-1px);
    box-shadow:
        0 22px 44px -18px rgba(var(--c-gold-rgb), 0.85),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.5);
    filter: brightness(1.04);
}

.auth-submit.mud-button-root:disabled {
    border-color: rgba(var(--c-gold-soft-rgb), 0.16);
    background: rgba(var(--c-white-rgb), 0.04);
    box-shadow: none;
    color: rgba(var(--c-gold-soft-rgb), 0.35);
}

/* ─── Terms consent ─── */

.auth-terms {
    margin-top: -4px;
    color: rgba(var(--c-stone-rgb), 0.85);
    font-size: 0.9rem;
    line-height: 1.5;
}

.auth-terms .mud-checkbox {
    align-items: flex-start;
}

/* MudBlazor pads the icon button, which optically indents the box from the
   column every other control lines up on. */
.auth-terms .mud-checkbox .mud-icon-button {
    margin-left: -4px;
}

/* MudBlazor wraps the consent copy in its own body1 paragraph, which carries a
   font-size of its own. Pull it back to the low-emphasis tier. */
.auth-terms .mud-typography-body1 {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Idle checkbox is supporting metadata, not the active number - keep pure gold
   for the checked state only. */
.auth-terms .mud-checkbox-false,
.auth-terms .mud-checkbox-false .mud-icon-root {
    color: rgba(var(--c-gold-soft-rgb), 0.45);
}

.auth-terms a {
    color: var(--c-gold-light);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--c-gold-light-rgb), 0.35);
}

.auth-terms a:hover {
    color: var(--c-gold);
    border-bottom-color: var(--c-gold);
}

/* ─── Password requirements ─── */

.auth-requirements {
    margin-top: -6px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.1);
    border-radius: 14px;
    background: linear-gradient(rgba(var(--c-white-rgb), 0.025), rgba(var(--c-white-rgb), 0.025)), var(--c-bg-abyss);
}

.auth-requirements .password-requirement {
    color: rgba(var(--c-stone-rgb), 0.85);
    font-size: 0.85rem;
}

.auth-requirements .password-requirement.requirement-unmet {
    color: rgba(var(--c-gold-soft-rgb), 0.55);
}

/* ─── Supporting links ─── */

.auth-footnote {
    margin: 18px 0 0;
    text-align: center;
    font-size: 0.9rem;
}

.auth-switch {
    margin: clamp(20px, 3vh, 28px) 0 0;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    text-align: center;
    font-size: 0.95rem;
}

.auth-link {
    color: var(--c-gold);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--c-gold-rgb), 0.3);
    transition: color 0.18s ease, border-color 0.18s ease;
}

.auth-link:hover {
    color: var(--c-gold-light);
    border-bottom-color: var(--c-gold-light);
}

.auth-link--quiet {
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-weight: 500;
    border-bottom-color: transparent;
}

.auth-link--quiet:hover {
    color: var(--c-gold-light);
    border-bottom-color: rgba(var(--c-gold-light-rgb), 0.4);
}

/* ─── Small screens ─── */

@media (max-width: 599.98px) {
    .auth-stage {
        padding: 28px 14px 56px;
    }

    .auth-card {
        padding: 20px 16px;
        border-radius: 22px;
    }

    .auth-card__halo {
        inset: -40% -20%;
    }

    .auth-title {
        font-size: clamp(2.1rem, 11vw, 2.9rem);
    }

    .auth-form {
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-stage__ambient,
    .auth-stage__content {
        animation: none;
    }

    .auth-submit.mud-button-root,
    .auth-form .mud-input,
    .auth-link {
        transition: none;
    }

    .auth-submit.mud-button-root:hover {
        transform: none;
    }
}