:root {
    --navy: #0F2A47;
    --navy-deep: #0A1E33;
    --gold: #C9992E;
    --gold-soft: #E8CD8E;
    --cream: #FAF6EE;
    --paper: #FFFFFF;
    --ink: #22201B;
    --ink-soft: #5B5A54;
    --sage: #3F6E56;
    --rust: #B5482E;
    --line: #E4DCC9;
}

/** {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Inter',sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'Fraunces',serif;
    color: var(--navy-deep);
    margin: 0 0 .4em 0;
    line-height: 1.15;
    font-weight: 600;
}

a {
    color: inherit;
    text-decoration: none;
}*/

.mono {
    font-family: 'IBM Plex Mono',monospace;
}

.wrap {
/*    max-width: 1180px;*/
    margin:auto;
/*    padding: 32px;*/
}

/* ===== Header / Nav (matches SavingsManual) ===== */
header.site {
    background: var(--navy-deep);
    border-bottom: 3px solid var(--gold);
}

.nav-row {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.brand {
    font-family: 'Fraunces',serif;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .2px;
}

    .brand span {
        color: var(--gold);
    }

nav.links {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    align-items: center;
}

    nav.links a {
        color: #EAE3D2;
        font-size: .92rem;
        font-weight: 500;
        padding: 6px 2px;
        border-bottom: 2px solid transparent;
        transition: border-color .15s ease, color .15s ease;
    }

        nav.links a:hover {
            color: #fff;
            border-bottom-color: var(--gold);
        }

        nav.links a.cta {
            background: var(--gold);
            color: var(--navy-deep);
            padding: 9px 18px;
            border-radius: 3px;
            font-weight: 600;
            border-bottom: none;
        }

            nav.links a.cta:hover {
                background: var(--gold-soft);
            }

/* ===== Hero ===== */
.hero {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    /* padding: 74px 0 96px;*/
    position: relative;
    overflow: hidden;
    min-height: 10vh;
    padding:80px 20px;
}

    .hero .wrap {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 26px;
        align-items: center;
    }

.eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono',monospace;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-soft);
    border: 1px solid rgba(232,205,142,.4);
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 22px;
}

.hero h1 {
    color: #fff;
    font-size: 2.6rem;
    font-weight: 700;
    max-width: 13ch;
}

    .hero h1 em {
        font-style: normal;
        color: var(--gold-soft);
    }

.hero p.lead {
    color: #D9DEE6;
    font-size: 1.08rem;
    max-width: 48ch;
    margin: 20px 0 30px;
}

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

.btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 3px;
    font-weight: 600;
    font-size: .95rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-gold {
    background: var(--gold);
    color: var(--navy-deep);
}

    .btn-gold:hover {
        box-shadow: 0 6px 18px rgba(201,153,46,.35);
        transform: translateY(-1px);
    }

.btn-outline {
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
}

    .btn-outline:hover {
        border-color: var(--gold-soft);
        color: var(--gold-soft);
    }



/* Receipt / tally signature card */
.receipt {
    background: var(--paper);
    color: var(--ink);
    border-radius: 6px;
    padding: 30px 28px 26px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
    transform: rotate(2deg);
}

    .receipt::before {
        content: "- MEMBER SAVINGS GUIDE -";
        display: block;
        font-family: 'IBM Plex Mono',monospace;
        font-size: .68rem;
        letter-spacing: .12em;
        color: #000099;
        text-align: center;
        margin-bottom: 10px;
    }

    .receipt .r-title {
        text-align: center;
        font-family: 'Fraunces',serif;
        font-weight: 700;
        font-size: 1.5rem;
        color: var(--navy-deep);
        margin-bottom: 6px;
    }

    .receipt .r-sub {
        text-align: center;
        font-size: .78rem;
        color: #333333;
        padding-bottom: 16px;
        border-bottom: 1px dashed var(--line);
        margin-bottom: 14px;
    }

.r-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.9rem;
    padding: 7px 0;
    color: var(--ink);
}

    .r-line .dots {
        flex: 1;
        border-bottom: 1px dotted #C9C2AD;
        margin: 0 6px 5px;
    }

    .r-line .amt {
        font-family: 'IBM Plex Mono',monospace;
        font-weight: 600;
        color: var(--sage);
        white-space: nowrap;
    }

.r-total {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 2px solid var(--navy-deep);
    font-family: 'IBM Plex Mono',monospace;
    font-weight: 700;
    font-size: 1rem;
}

    .r-total .amt {
        color: var(--gold);
    }

.receipt .r-foot {
    text-align: center;
    font-size: .8rem;
    color: #333333;
    margin-top: 14px;
    font-style: italic;
}








/* Case-file / funnel signature card */
.casefile {
    background: var(--paper);
    color: var(--ink);
    border-radius: 6px;
    padding: 30px 28px 26px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
    transform: rotate(-1.1deg);
}

    .casefile::before {
        content: "CLAIM DENIAL OUTCOMES · 2024";
        display: block;
        font-family: 'IBM Plex Mono',monospace;
        font-size: .66rem;
        letter-spacing: .1em;
        color: var(--ink-soft);
        text-align: center;
        margin-bottom: 16px;
    }

.funnel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
}

    .funnel-row:last-child {
        border-bottom: none;
    }

    .funnel-row .f-label {
        font-size: 1.2rem;
        color: var(--ink);
        max-width: 36ch;
    }

    .funnel-row .f-num {
        font-family: 'IBM Plex Mono',monospace;
        font-weight: 700;
        font-size: 1.2rem;
        text-align: right;
    }

    .funnel-row.f1 .f-num {
        color: var(--rust);
    }

    .funnel-row.f2 .f-num {
        color: var(--ink-soft);
    }

    .funnel-row.f3 .f-num {
        color: var(--sage);
    }

.casefile .r-foot {
    text-align: center;
    font-size: .72rem;
    color: #333333;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 2px solid var(--navy-deep);
    font-style: italic;
}

/* ===== Sections ===== */
section {
    padding: 40px 0;
}

.kicker {
    font-family: 'IBM Plex Mono',monospace;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 10px;
    display: block;
}

.lead-copy {
    max-width: 200ch;
    color: var(--ink-soft);
    font-size: 1.04rem;
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    margin-top: 44px;
}

.stat-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 26px 24px;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

    .stat-card .stat-num {
        font-family: 'IBM Plex Mono',monospace;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--navy);
        display: block;
    }

        .stat-card .stat-num.up {
            color: var(--rust);
        }

        .stat-card .stat-num.good {
            color: var(--sage);
        }

    .stat-card p {
        margin: 8px 0 0;
        color: var(--ink-soft);
        font-size: .92rem;
    }

.callout {
    background: var(--navy-deep);
    color: #fff;
    border-radius: 8px;
    padding: 36px 40px;
    margin-top: 52px;
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

    .callout p {
        color: #D9DEE6;
        margin: 6px 0 0;
        max-width: 56ch;
    }

    .callout h3 {
        color: #fff;
        margin-bottom: 0;
    }



/* Category grid (real counts from the source content) */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 22px;
    margin-top: 40px;
}

.cat-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 28px 26px;
    position: relative;
}

.cat-count {
    font-family: 'IBM Plex Mono',monospace;
    font-weight: 600;
    font-size: 1rem;
    color: var(--navy);
    background: var(--gold-soft);
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 14px;
}

.cat-card h4 {
    font-size: 1.12rem;
    margin-bottom: 8px;
}

.cat-card p {
    color: var(--ink-soft);
    font-size: .94rem;
    margin: 0;
}

/* Tools list */
.tools {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 38px 40px;
    margin-top: 20px;
}

    .tools ul {
        list-style: none;
        margin: 18px 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 30px;
    }

    .tools li {
        padding-left: 26px;
        position: relative;
        color: var(--ink);
        font-size: .96rem;
    }

        .tools li::before {
            content: "$";
            position: absolute;
            left: 0;
            top: 0;
            font-family: 'IBM Plex Mono',monospace;
            font-weight: 700;
            color: var(--sage);
        }

/* Process steps — real sequence, so numbering is appropriate here */
.steps {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
    margin-top: 40px;
}

.step-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    /*padding: 28px 26px;*/
    padding: 10px 10px;
    position: relative;
    margin-top: 20px;
}

.step-num {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /*font-family: 'IBM Plex Mono',monospace;*/
    font-weight: 400;
    font-size: 1.0rem;
    color: var(--navy);
    background: var(--gold-soft);
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 14px;
}

.step-card h4 {
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.step-card p {
    color: var(--ink-soft);
    font-size: .94rem;
    margin: 0;
}

/* Rights panel */
.rights {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 38px 40px;
    margin-top: 20px;
}

    .rights blockquote {
        margin: 0 0 18px;
        padding-left: 20px;
        border-left: 3px solid var(--gold);
        font-family: 'Fraunces',serif;
        font-size: 1.2rem;
        color: var(--navy-deep);
        font-weight: 500;
    }

    .rights p {
        color: var(--ink-soft);
        margin: 0 0 14px;
    }

/* Cross-sell + coming soon */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 20px;
}

.panel {
    border-radius: 8px;
    padding: 30px 28px;
}

    .panel.advocate {
        background: var(--paper);
        border: 1px solid var(--line);
    }

    .panel.soon {
        background: linear-gradient(135deg, var(--sage) 0%, #2E5342 100%);
        color: #fff;
    }

        .panel.soon h4 {
            color: #fff;
        }

        .panel.soon p {
            color: #DCEAE2;
        }

.tag {
    display: inline-block;
    font-family: 'IBM Plex Mono',monospace;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 12px;
}

.panel.advocate .tag {
    background: var(--gold-soft);
    color: var(--navy);
}

.panel.soon .tag {
    background: rgba(255,255,255,.18);
    color: #fff;
}

/* Final CTA */
.final-cta {
    background: linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
    color: #fff;
    border-radius: 8px;
    text-align: center;
    padding: 10px 10px;
    margin-bottom: 60px;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

    .final-cta h2 {
        color: #fff;
        font-size: 2rem;
        max-width: 80ch;
        margin: 0 auto 16px;
    }

    .final-cta p {
        color: #D9DEE6;
        max-width: 180ch;
/*        margin: 0 auto 30px;*/
    }


@@media (max-width:880px) {
    .hero .wrap {
        grid-template-columns: 1fr;
    }

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

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

    .split {
        grid-template-columns: 1fr;
    }

    .foot-grid {
        grid-template-columns: 1fr 1fr;
    }

    .casefile {
        transform: none;
    }
}