:root {
            --bg: #05070d;
            --bg-soft: #0b1020;
            --panel: rgba(17, 22, 37, 0.86);
            --panel-solid: #111625;
            --border: rgba(255, 224, 168, 0.18);
            --gold: #f3d7a0;
            --gold-bright: #ffe7b6;
            --blue: #9ad9ff;
            --lavender: #d7c5ff;
            --text: #f6f3ed;
            --muted: #c8c6cb;
            --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
            --radius-lg: 28px;
            --radius-md: 18px;
            --max-width: 1180px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-height: 100vh;
            color: var(--text);
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.65;
            background:
                radial-gradient(circle at 18% 8%, rgba(57, 83, 160, 0.22), transparent 34rem),
                radial-gradient(circle at 82% 18%, rgba(105, 62, 147, 0.18), transparent 31rem),
                radial-gradient(circle at 50% 92%, rgba(25, 85, 120, 0.14), transparent 33rem),
                linear-gradient(180deg, #05070d 0%, #070b15 45%, #05070d 100%);
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: 0.5;
            background-image:
                radial-gradient(circle, rgba(255,255,255,.72) 0 1px, transparent 1.4px),
                radial-gradient(circle, rgba(150,190,255,.48) 0 1px, transparent 1.3px);
            background-size: 62px 62px, 91px 91px;
            background-position: 0 0, 17px 29px;
            z-index: -2;
        }

        body::after {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(2,3,8,.05), rgba(2,3,8,.48));
            z-index: -1;
        }

        a {
            color: inherit;
        }

        img {
            max-width: 100%;
            display: block;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            backdrop-filter: blur(15px);
            background: rgba(5, 7, 13, 0.82);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .nav-wrap {
            width: min(calc(100% - 32px), var(--max-width));
            margin: 0 auto;
            min-height: 74px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(1.5rem, 2.5vw, 2.15rem);
            color: var(--gold);
            text-decoration: none;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .nav-links a {
            color: var(--muted);
            text-decoration: none;
            font-size: 0.95rem;
        }

        .nav-links a:hover,
        .nav-links a:focus {
            color: var(--gold-bright);
        }

        .nav-cta {
            padding: 10px 16px;
            border: 1px solid rgba(243, 215, 160, 0.45);
            border-radius: 999px;
            color: var(--gold-bright) !important;
            background: rgba(243, 215, 160, 0.08);
        }

        main {
            width: min(calc(100% - 32px), var(--max-width));
            margin: 0 auto;
        }

        .hero {
            padding: clamp(28px, 4vw, 42px) 0 18px;
        }

        .hero-copy {
            max-width: 1180px;
            margin: 0 auto 34px;
            text-align: center;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
            color: var(--blue);
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .eyebrow::before,
        .eyebrow::after {
            content: "";
            width: 35px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--blue));
        }

        .eyebrow::after {
            background: linear-gradient(90deg, var(--blue), transparent);
        }

        h1,
        h2,
        h3 {
            font-family: Georgia, "Times New Roman", serif;
            line-height: 1.12;
            margin-top: 0;
        }

        h1 {
            margin-bottom: 20px;
            color: var(--gold-bright);
            font-size: clamp(1.05rem, 1.7vw, 1.35rem);
            font-weight: 500;
            line-height: 1.35;
            white-space: nowrap;
            text-shadow: 0 2px 24px rgba(255, 220, 160, 0.12);
        }

        .hero-copy p {
            max-width: 760px;
            margin: 0 auto;
            font-size: clamp(1.08rem, 2vw, 1.35rem);
            color: #e7e4e3;
        }

        .free-report-line {
            margin: 8px 0 0;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(1.15rem, 2vw, 1.5rem);
            font-weight: 700;
            color: var(--text);
        }

        .free-report-line .free-highlight {
            color: #7ffcff;
            text-shadow: 0 0 18px rgba(127, 252, 255, 0.35);
        }

        .hero-image-wrap {
            position: relative;
            border-radius: var(--radius-lg);
            padding: 1px;
            background: linear-gradient(135deg, rgba(255, 224, 168, 0.52), rgba(133, 187, 255, 0.16), rgba(255, 255, 255, 0.05));
            box-shadow: var(--shadow);
        }

        .hero-image-wrap::before {
            content: "";
            position: absolute;
            inset: -20px;
            z-index: -1;
            border-radius: 40px;
            background: radial-gradient(circle, rgba(78, 114, 210, 0.18), transparent 70%);
            filter: blur(20px);
        }

        .hero-image {
            width: 100%;
            border-radius: calc(var(--radius-lg) - 1px);
        }

        .hero-actions {
            display: flex;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 30px;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 50px;
            padding: 12px 22px;
            border-radius: 999px;
            text-decoration: none;
            font-weight: 700;
            transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
        }

        .button:hover,
        .button:focus {
            transform: translateY(-2px);
        }

        .button-primary {
            color: #17110a;
            background: linear-gradient(135deg, #ffe9bb, #d9ae65);
            box-shadow: 0 14px 35px rgba(215, 170, 95, 0.2);
        }

        .button-secondary {
            color: var(--gold-bright);
            border: 1px solid rgba(255, 231, 182, 0.34);
            background: rgba(255, 255, 255, 0.04);
        }

        section {
            padding: clamp(22px, 3vw, 34px) 0;
        }

        .section-heading {
            max-width: 770px;
            margin: 0 auto 18px;
            text-align: center;
        }

        .section-heading h2 {
            margin-bottom: 16px;
            font-size: clamp(2rem, 4vw, 3.5rem);
            color: var(--gold);
            font-weight: 500;
        }

        .section-heading p {
            margin: 0;
            color: var(--muted);
            font-size: 1.08rem;
        }

        .cards {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 22px;
        }

        .card {
            min-height: 100%;
            padding: 28px;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: linear-gradient(180deg, rgba(20, 27, 44, 0.9), rgba(13, 17, 29, 0.9));
            box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
        }

        .card-number {
            display: inline-grid;
            place-items: center;
            width: 42px;
            height: 42px;
            margin-bottom: 18px;
            border-radius: 50%;
            color: #191209;
            font-weight: 800;
            background: linear-gradient(135deg, #ffeabf, #c99c52);
        }

        .card h3 {
            margin-bottom: 11px;
            color: #f8e3b9;
            font-size: 1.45rem;
            font-weight: 500;
        }

        .card p {
            margin: 0;
            color: var(--muted);
        }

        .feature-layout {
            display: grid;
            grid-template-columns: 0.95fr 1.05fr;
            gap: clamp(30px, 5vw, 72px);
            align-items: center;
        }

        .feature-copy h2 {
            margin-bottom: 20px;
            color: var(--gold);
            font-size: clamp(2.1rem, 4vw, 3.7rem);
            font-weight: 500;
        }

        .feature-copy p {
            color: var(--muted);
            font-size: 1.06rem;
        }

        .score-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            margin-top: 28px;
        }

        .score-item {
            padding: 17px 18px;
            border-radius: 14px;
            border: 1px solid rgba(154, 217, 255, 0.16);
            background: rgba(154, 217, 255, 0.05);
        }

        .score-item strong {
            display: block;
            margin-bottom: 3px;
            color: var(--blue);
        }

        .score-item span {
            color: var(--muted);
            font-size: 0.92rem;
        }

        .report-panel {
            padding: clamp(26px, 4vw, 42px);
            border: 1px solid rgba(216, 197, 255, 0.2);
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 85% 10%, rgba(98, 63, 149, 0.2), transparent 19rem),
                linear-gradient(160deg, rgba(19, 24, 41, 0.96), rgba(11, 15, 27, 0.96));
            box-shadow: var(--shadow);
        }

        .report-panel h3 {
            margin-bottom: 15px;
            color: var(--lavender);
            font-size: clamp(1.8rem, 3vw, 2.6rem);
            font-weight: 500;
        }

        .report-panel p {
            color: var(--muted);
        }

        .report-points {
            list-style: none;
            padding: 0;
            margin: 25px 0 0;
        }

        .report-points li {
            position: relative;
            padding: 10px 0 10px 28px;
            border-bottom: 1px solid rgba(255,255,255,.06);
            color: #ddd9e5;
        }

        .report-points li::before {
            content: "✦";
            position: absolute;
            left: 0;
            color: var(--gold);
        }

        .compare-strip {
            padding: clamp(30px, 5vw, 48px);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background: rgba(16, 21, 35, 0.84);
            text-align: center;
        }

        .compare-strip h2 {
            margin-bottom: 16px;
            color: var(--gold);
            font-size: clamp(2rem, 4vw, 3.2rem);
            font-weight: 500;
        }

        .compare-strip p {
            max-width: 780px;
            margin: 0 auto;
            color: var(--muted);
            font-size: 1.07rem;
        }

        .compare-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin-top: 25px;
        }

        .compare-tags span {
            padding: 9px 15px;
            border: 1px solid rgba(255, 231, 182, 0.16);
            border-radius: 999px;
            color: #e9deca;
            background: rgba(255,255,255,.035);
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 22px;
            max-width: 980px;
            margin: 0 auto;
        }

        .price-card {
            position: relative;
            padding: 34px 26px;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: linear-gradient(180deg, rgba(20, 26, 44, 0.94), rgba(12, 16, 29, 0.94));
            text-align: center;
        }

        .price-card.featured {
            transform: translateY(-8px);
            border-color: rgba(255, 225, 168, 0.5);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
        }

        .price-label {
            display: block;
            color: var(--blue);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            font-weight: 700;
            font-size: 0.78rem;
        }

        .price {
            margin: 14px 0 4px;
            color: var(--gold-bright);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 3.3rem;
            line-height: 1;
        }

        .price-note {
            color: var(--muted);
        }

        .featured-badge {
            position: absolute;
            top: -13px;
            left: 50%;
            transform: translateX(-50%);
            padding: 6px 13px;
            border-radius: 999px;
            color: #181108;
            background: linear-gradient(135deg, #ffe9bb, #d6a95f);
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            white-space: nowrap;
        }

        .launch-panel {
            padding: clamp(38px, 6vw, 66px);
            border-radius: var(--radius-lg);
            text-align: center;
            background:
                radial-gradient(circle at 50% 0%, rgba(84, 118, 210, 0.22), transparent 27rem),
                linear-gradient(180deg, rgba(18, 23, 40, 0.96), rgba(10, 13, 24, 0.96));
            border: 1px solid rgba(154, 217, 255, 0.18);
            box-shadow: var(--shadow);
        }

        .launch-panel h2 {
            margin-bottom: 18px;
            color: var(--gold-bright);
            font-size: clamp(2.15rem, 4.5vw, 3.8rem);
            font-weight: 500;
        }

        .launch-panel p {
            max-width: 720px;
            margin: 0 auto;
            color: var(--muted);
            font-size: 1.08rem;
        }

        .launch-status {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 27px;
            padding: 12px 18px;
            border: 1px solid rgba(154, 217, 255, 0.22);
            border-radius: 999px;
            color: var(--blue);
            background: rgba(154, 217, 255, 0.06);
            font-weight: 700;
        }

        .launch-status::before {
            content: "";
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--blue);
            box-shadow: 0 0 18px rgba(154, 217, 255, 0.8);
        }

        footer {
            width: min(calc(100% - 32px), var(--max-width));
            margin: 0 auto;
            padding: 35px 0 48px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            color: #aaa9af;
            text-align: center;
            font-size: 0.92rem;
        }

        .tm {
            font-size: 0.55em;
            vertical-align: super;
        }

        @media (max-width: 900px) {
            .nav-wrap {
                min-height: auto;
                padding: 16px 0;
                align-items: flex-start;
            }

            .nav-links {
                display: none;
            }

            .cards,
            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .feature-layout {
                grid-template-columns: 1fr;
            }

            .price-card.featured {
                transform: none;
            }
        }

        @media (max-width: 620px) {
            main,
            .nav-wrap,
            footer {
                width: min(calc(100% - 20px), var(--max-width));
            }

            .hero {
                padding-top: 34px;
            }

            .hero-copy {
                text-align: left;
            }

            h1 {
                white-space: normal;
            }

            .eyebrow {
                justify-content: flex-start;
            }

            .eyebrow::before {
                display: none;
            }

            .hero-copy p {
                margin-left: 0;
            }

            .hero-actions {
                justify-content: stretch;
            }

            .button {
                width: 100%;
            }

            .score-list {
                grid-template-columns: 1fr;
            }

            .card,
            .report-panel,
            .compare-strip,
            .price-card,
            .launch-panel {
                padding-left: 21px;
                padding-right: 21px;
            }
        }

/* =========================================================
   Account and form pages
   ========================================================= */

.account-page main.account-main {
    width: min(calc(100% - 28px), 760px);
    margin: 0 auto;
    padding: 34px 0 42px;
}

.account-card {
    overflow: hidden;
    border: 1px solid rgba(179, 150, 199, 0.34);
    border-radius: 18px;
    background: rgba(25, 18, 34, 0.95);
    box-shadow: 0 22px 60px rgba(0,0,0,.44);
}

.account-card .card-header {
    padding: 28px 26px 22px;
    text-align: center;
    background: linear-gradient(135deg, rgba(95,71,115,.96), rgba(65,42,83,.96));
    border-bottom: 3px solid rgba(191,255,255,.5);
}

.account-card .card-header h1 {
    margin: 0 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.9rem, 5vw, 2.5rem);
    color: #fff;
}

.account-card .card-header p {
    margin: 0;
    color: #e8dff0;
    line-height: 1.5;
}

.account-card .free-note {
    margin-top: 13px !important;
    font-weight: 700;
    color: #fff !important;
}

.account-card .free-word {
    color: #bff;
    text-shadow: 0 0 12px rgba(187,255,255,.32);
}

.account-card .card-body {
    padding: 28px;
}

.notice {
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 154, 174, .52);
    border-radius: 10px;
    background: rgba(145, 38, 58, 0.34);
    color: #ffd3dc;
    line-height: 1.5;
}

.notice ul {
    margin: 0;
    padding-left: 20px;
}

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
    color: #faf6fc;
}

.required {
    color: #ffc1ce;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #8c7898;
    border-radius: 9px;
    background: #fff;
    color: #221927;
    font: inherit;
}

.field input:focus {
    border-color: #bff;
    outline: 3px solid rgba(187,255,255,.16);
}

.terms-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 22px 0 20px;
    color: #c8becd;
    line-height: 1.5;
}

.terms-row input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.terms-row a,
.login-link a,
.site-footer a {
    color: #bff;
}

.account-card .button {
    display: block;
    width: 100%;
}

.login-link {
    margin: 21px 0 0;
    text-align: center;
    color: #c8becd;
    line-height: 1.5;
}

.login-link a {
    font-weight: 700;
    text-decoration: none;
}

.login-link a:hover,
.login-link a:focus {
    text-decoration: underline;
}

.privacy-note {
    margin: 18px 0 0;
    text-align: center;
    color: #aaa0af;
    font-size: .88rem;
    line-height: 1.5;
}

/* Shared header/footer navigation for the application */
.site-header .brand {
    white-space: nowrap;
}

.site-header .nav-links {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.site-header .nav-links .nav-cta {
    border: 1px solid rgba(255, 231, 182, .45);
    border-radius: 999px;
    padding: 9px 14px;
}

.site-footer {
    width: min(calc(100% - 32px), var(--max-width));
    margin: 0 auto;
    padding: 28px 0 42px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #aaa9af;
    text-align: center;
    font-size: .92rem;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    margin: 0 0 12px;
}

.site-footer-links a {
    text-decoration: none;
}

.site-footer-links a:hover,
.site-footer-links a:focus {
    text-decoration: underline;
}

@media (max-width: 900px) {
    /* Keep essential account navigation visible on phones/tablets. */
    .site-header .nav-links {
        display: flex;
    }

    .site-header .nav-wrap {
        align-items: center;
    }
}

@media (max-width: 620px) {
    .site-header .nav-wrap {
        min-height: auto;
        padding: 12px 0;
        align-items: flex-start;
    }

    .site-header .brand {
        font-size: 1.18rem;
    }

    .site-header .nav-links {
        gap: 7px 10px;
    }

    .site-header .nav-links a {
        font-size: .84rem;
    }

    .site-header .nav-links .nav-cta {
        padding: 7px 10px;
    }

    .account-page main.account-main {
        padding-top: 20px;
    }

    .account-card .card-header {
        padding: 23px 18px 19px;
    }

    .account-card .card-body {
        padding: 22px 18px;
    }
}