/* =========================================================
   INVESTMENT PAGE — THEME ALIGNED CSS (CLEANED)
   Palette: 🔴 #DE1F26  🟡 #FECD07 ⚫ #1C1C1C 🔵 #93A8AC
   Depends on: fonts.css + theme.css (optional)
========================================================= */

/* ---------- TOKENS (single source of truth) ---------- */
/* investment-hero.css */
:root {
    --brand-red: #DE1F26;
    --brand-yellow: #FECD07;
    --brand-dark: #1C1C1C;
    --brand-blue: #93A8AC;
    --ink: #13212a;
    --ink-2: #1b2b35;
    --muted: rgba(19,33,42,.62);
    --line: rgba(19,33,42,.10);
    --card: #ffffff;
    --shadow: 0 18px 50px rgba(19,33,42,.12);
    --radius: 18px;
    --radius-lg: 22px;
    --pill: 999px;
    /* design accents seen in screens */
    --accent-green: #2f8f6b;
    /*--accent-green: var(--brand-red);*/
    /*--cta-blue: #0b6c97;
    --cta-blue-hover: #0a5f84;*/
    --cta-blue: var(--brand-red);
    --cta-blue-hover: #b9151b;
    /* shared transitions */
    --t-fast: .12s ease;
    --t-med: .18s ease;
}

/* ---------- GLOBAL (scoped to investment page) ---------- */
html, body {
    height: 100%;
}

.inv-page {
    font-family: "Articulat CF", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--brand-dark);
    background: #e8f1ee;
}

/* helpers */
.py-lg-6 {
    padding-top: 4.25rem !important;
    padding-bottom: 4.25rem !important;
}

.mt-lg-6 {
    margin-top: 3.25rem !important;
}

/* shared typography patterns */
.inv-kicker {
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(19,33,42,.55);
    font-weight: 800;
}

.inv-h2 {
    font-weight: 850;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    margin: 0;
}

.inv-subtext {
    color: rgba(19,33,42,.60);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.65;
}

/* focus (scoped, not global site-wide) */
.inv-page a:focus-visible,
.inv-page button:focus-visible,
.inv-page .btn:focus-visible,
.inv-page .form-control:focus-visible {
    outline: 3px solid rgba(254,205,7,.55);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   SCREEN 1 — HERO
========================================================= */
.inv-hero {
    position: relative;
    overflow: hidden;
    /*min-height: 100vh;*/
    display: flex;
    align-items: center;
    background: radial-gradient(900px 520px at 18% 18%, rgba(147,168,172,.30) 0%, rgba(147,168,172,0) 60%), radial-gradient(900px 520px at 88% 35%, rgba(147,168,172,.24) 0%, rgba(147,168,172,0) 62%), linear-gradient(135deg, rgba(204,223,217,.75) 0%, rgba(223,234,230,.65) 45%, rgba(210,231,224,.65) 100%);
}

    .inv-hero::before {
        content: "";
        position: absolute;
        inset: -80px;
        background: linear-gradient(135deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 60%), repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0px, rgba(255,255,255,.10) 28px, rgba(255,255,255,0) 28px, rgba(255,255,255,0) 120px);
        pointer-events: none;
        opacity: .55;
    }

.inv-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .9rem;
    border-radius: var(--pill);
    background: rgba(147,168,172,.22);
    border: 1px solid rgba(147,168,172,.30);
    color: rgba(28,28,28,.80);
    font-weight: 650;
    font-size: .9rem;
    position: relative;
    z-index: 1;
}

    .inv-pill i {
        color: var(--cta-blue);
    }

.inv-title {
    position: relative;
    z-index: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: .95;
    font-size: clamp(2.6rem, 4.6vw, 4.2rem);
    margin: 0;
}

    .inv-title .t-dark {
        color: var(--ink-2);
    }

    .inv-title .t-green {
        color: var(--accent-green);
        text-decoration: underline;
        text-underline-offset: 10px;
        text-decoration-thickness: 3px;
    }

.inv-sub {
    position: relative;
    z-index: 1;
    color: rgba(27,43,53,.75);
    font-size: 1.07rem;
    max-width: 58ch;
}

    .inv-sub strong {
        color: var(--ink-2);
        font-weight: 800;
    }

.inv-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 650;
    color: rgba(27,43,53,.88);
    font-size: .95rem;
}

    .inv-check i {
        color: var(--accent-green);
        font-size: 1.05rem;
    }

.inv-selector {
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 14px 36px rgba(28,28,28,.10);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

.inv-selector__label {
    color: rgba(27,43,53,.75);
    font-weight: 650;
    font-size: .95rem;
}

    .inv-selector__label span {
        color: rgba(27,43,53,.55);
        font-weight: 600;
    }

/* chips */
.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: var(--pill);
    padding: .55rem .95rem;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(27,43,53,.16);
    color: rgba(27,43,53,.88);
    font-weight: 650;
    font-size: .92rem;
    cursor: pointer;
    user-select: none;
    transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}

    .chip input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .chip:hover {
        transform: translateY(-1px);
        border-color: rgba(11,108,151,.35);
        box-shadow: 0 10px 20px rgba(28,28,28,.08);
    }

    .chip:has(input:checked) {
        background: rgba(11,108,151,.10);
        border-color: rgba(11,108,151,.35);
    }

        .chip:has(input:checked) span {
            color: #0b4662;
        }

/* buttons */
.inv-btn-primary {
    background: var(--cta-blue);
    border-color: var(--cta-blue);
    border-radius: 14px;
    font-weight: 750;
    box-shadow: 0 16px 28px rgba(11,108,151,.18);
}

    .inv-btn-primary:hover {
        background: var(--cta-blue-hover);
        border-color: var(--cta-blue-hover);
    }

.inv-btn-ghost {
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(27,43,53,.18);
    border-radius: 14px;
    font-weight: 750;
    color: rgba(27,43,53,.88);
}

    .inv-btn-ghost:hover {
        background: rgba(255,255,255,.92);
        border-color: rgba(27,43,53,.24);
    }

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    border-radius: var(--pill);
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.6);
    color: rgba(27,43,53,.70);
    font-weight: 650;
    font-size: .9rem;
}

    .trust-pill i {
        color: rgba(47,143,107,.95);
    }

/* right card */
.inv-card {
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.90);
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.9);
    max-width: 640px;
    position: relative;
    z-index: 1;
}

.inv-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(147,168,172,.18);
    border: 1px solid rgba(147,168,172,.30);
}

    .inv-icon i {
        font-size: 1.25rem;
        color: var(--accent-green);
    }

.inv-card__title {
    font-weight: 800;
    color: rgba(27,43,53,.92);
    line-height: 1.2;
}

.inv-card__sub {
    color: rgba(27,43,53,.62);
    font-weight: 650;
    font-size: .95rem;
}

/* split bar */
.inv-split__lbl {
    font-weight: 750;
    color: rgba(27,43,53,.70);
}

    .inv-split__lbl.left {
        color: #d25b22;
    }

    .inv-split__lbl.right {
        color: #1f7a63;
    }

.inv-split__bar {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(27,43,53,.10);
    border: 1px solid rgba(27,43,53,.08);
    display: flex;
}

.bar-india {
    width: 56%;
    background: linear-gradient(90deg, #ff8a3d, #ff7a22);
}

.bar-germany {
    width: 44%;
    background: linear-gradient(90deg, #1f7a63, #2f8f6b);
}

.inv-split__hint {
    margin-top: .55rem;
    font-size: .82rem;
    color: rgba(27,43,53,.55);
    text-align: center;
    font-weight: 600;
}

/* list rows */
.inv-list {
    margin-top: .75rem;
}

.inv-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    background: rgba(147,168,172,.10);
    border: 1px solid rgba(147,168,172,.16);
    color: rgba(27,43,53,.85);
    font-weight: 700;
}

    .inv-row + .inv-row {
        margin-top: .75rem;
    }

    .inv-row i {
        color: var(--accent-green);
        font-size: 1.1rem;
    }

/* card CTA */
.inv-btn-card {
    background: var(--cta-blue);
    color: #fff;
    border-radius: 14px;
    font-weight: 800;
    border: 1px solid transparent;
}

    .inv-btn-card:hover {
        background: var(--cta-blue-hover);
        color: #fff;
    }

@media (max-width: 991.98px) {
    .inv-hero {
        min-height: auto;
        padding: 2rem 0 3rem;
    }

    .inv-card {
        max-width: 100%;
    }
}

/* =========================================================
   SCREEN 2 — HELP WITH (cards + hover)
========================================================= */
.inv-help {
    background: #fff;
}

.inv-help__head {
    max-width: 760px;
}

.inv-help__kicker {
    composes: inv-kicker;
}
/* (note: ignore if no build step) */
.inv-help__title {
    font-weight: 850;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-size: clamp(1.8rem,3.2vw,2.6rem);
    margin: 0;
}

.inv-help__sub {
    color: rgba(19,33,42,.60);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.65;
}

/* base card */
.inv-help-card {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 1.1rem;
    padding: 1.35rem;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid rgba(19,33,42,.08);
    box-shadow: 0 10px 22px rgba(19,33,42,.06);
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}

    .inv-help-card::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity var(--t-med);
        pointer-events: none;
        background: radial-gradient(600px 240px at 12% 10%, rgba(147,168,172,.22) 0%, rgba(147,168,172,0) 60%), linear-gradient(135deg, rgba(147,168,172,.12) 0%, rgba(255,255,255,0) 58%);
    }

    .inv-help-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        border: 1px solid rgba(47,143,107,0);
        opacity: 0;
        transition: opacity var(--t-med), border-color var(--t-med);
        pointer-events: none;
    }

.inv-help-card__icon,
.inv-help-card__body {
    position: relative;
    z-index: 1;
}

.inv-help-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(47,143,107,.10);
    border: 1px solid rgba(47,143,107,.18);
    flex: 0 0 auto;
    transition: background-color var(--t-med), border-color var(--t-med), transform var(--t-med);
}

    .inv-help-card__icon i {
        font-size: 1.35rem;
        color: var(--accent-green);
    }

.inv-help-card__title {
    font-size: 1.1rem;
    font-weight: 850;
    color: var(--ink);
    margin: .15rem 0 .45rem;
}

.inv-help-card__text {
    margin: 0 0 .65rem;
    color: rgba(19,33,42,.62);
    font-weight: 600;
    line-height: 1.6;
    font-size: .98rem;
}

.inv-help-card__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--accent-green);
    font-weight: 750;
    text-decoration: none;
    font-size: .95rem;
}

    .inv-help-card__link:hover {
        color: #25785a;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

/* hover */
.inv-help-card:hover,
.inv-help-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(19,33,42,.12);
    border-color: rgba(47,143,107,.25);
}

    .inv-help-card:hover::before,
    .inv-help-card:focus-within::before {
        opacity: 1;
    }

    .inv-help-card:hover::after,
    .inv-help-card:focus-within::after {
        opacity: 1;
        border-color: rgba(47,143,107,.32);
    }

    .inv-help-card:hover .inv-help-card__icon,
    .inv-help-card:focus-within .inv-help-card__icon {
        transform: translateY(-1px);
        background: rgba(47,143,107,.14);
        border-color: rgba(47,143,107,.26);
    }

    .inv-help-card:hover .inv-help-card__link,
    .inv-help-card:focus-within .inv-help-card__link {
        text-decoration: underline;
        text-underline-offset: 4px;
    }

/* per-card tint */
.inv-help-card.is-retire::before {
    background: radial-gradient(620px 260px at 12% 12%, rgba(147,168,172,.28) 0%, rgba(147,168,172,0) 60%), linear-gradient(135deg, rgba(147,168,172,.18) 0%, rgba(255,255,255,0) 58%);
}

.inv-help-card.is-insurance::before {
    background: radial-gradient(620px 260px at 12% 12%, rgba(47,143,107,.22) 0%, rgba(47,143,107,0) 60%), linear-gradient(135deg, rgba(47,143,107,.12) 0%, rgba(255,255,255,0) 58%);
}

.inv-help-card.is-invest::before {
    background: radial-gradient(620px 260px at 12% 12%, rgba(254,205,7,.18) 0%, rgba(254,205,7,0) 60%), linear-gradient(135deg, rgba(254,205,7,.10) 0%, rgba(255,255,255,0) 58%);
}

.inv-help-card.is-custom::before {
    background: radial-gradient(620px 260px at 12% 12%, rgba(147,168,172,.18) 0%, rgba(147,168,172,0) 60%), linear-gradient(135deg, rgba(205,170,255,.12) 0%, rgba(255,255,255,0) 58%);
}

/* CTA */
.inv-help__cta {
    background: var(--cta-blue);
    color: #fff;
    border-radius: 14px;
    font-weight: 850;
    border: 1px solid transparent;
    box-shadow: 0 18px 30px rgba(11,108,151,.18);
}

    .inv-help__cta:hover {
        background: var(--cta-blue-hover);
        color: #fff;
    }

.inv-help__meta {
    color: rgba(19,33,42,.55);
    font-weight: 650;
    font-size: .95rem;
}

@media (max-width: 575.98px) {
    .inv-help-card {
        padding: 1.15rem;
        gap: .95rem;
    }

    .inv-help-card__icon {
        width: 50px;
        height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inv-help-card, .inv-help-card::before, .inv-help-card::after, .inv-help-card__icon {
        transition: none !important;
    }
}

/* =========================================================
   SCREEN 4 — CONCERNS + COMPARE
========================================================= */
.inv-concerns {
    background: #f7faf9;
}

.inv-concerns__head {
    max-width: 760px;
}

.inv-concerns__pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .8rem;
    border-radius: var(--pill);
    background: rgba(147,168,172,.18);
    border: 1px solid rgba(147,168,172,.26);
    color: rgba(19,33,42,.78);
    font-weight: 750;
    font-size: .88rem;
}

    .inv-concerns__pill i {
        color: var(--cta-blue);
    }

/* concern card (single definition, hover included) */
.concern-card {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 1.05rem;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid rgba(19,33,42,.08);
    box-shadow: 0 10px 22px rgba(19,33,42,.06);
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}

    .concern-card::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-med);
        background: radial-gradient(620px 260px at 12% 12%, rgba(147,168,172,.22) 0%, rgba(147,168,172,0) 60%), linear-gradient(135deg, rgba(147,168,172,.12) 0%, rgba(255,255,255,0) 58%);
    }

    .concern-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        border: 1px solid rgba(47,143,107,0);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-med), border-color var(--t-med);
    }

.concern-card__icon,
.concern-card__body {
    position: relative;
    z-index: 1;
}

.concern-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(47,143,107,.10);
    border: 1px solid rgba(47,143,107,.18);
    flex: 0 0 auto;
    transition: background-color var(--t-med), border-color var(--t-med), transform var(--t-med);
}

    .concern-card__icon i {
        color: var(--accent-green);
        font-size: 1.15rem;
    }

.concern-card__title {
    font-weight: 850;
    color: rgba(19,33,42,.92);
    font-size: 1.05rem;
    margin: .1rem 0 .45rem;
    letter-spacing: -0.01em;
}

.concern-card__text {
    margin: 0 0 .75rem;
    color: rgba(19,33,42,.62);
    font-weight: 600;
    line-height: 1.6;
    font-size: .96rem;
}

/* tag pill shared */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .6rem;
    border-radius: var(--pill);
    background: rgba(47,143,107,.10);
    border: 1px solid rgba(47,143,107,.18);
    color: rgba(19,33,42,.70);
    font-weight: 750;
    font-size: .82rem;
    transition: background-color var(--t-med), border-color var(--t-med);
}

    .tag-pill i {
        color: var(--accent-green);
        font-size: .95rem;
    }

/* hover */
.concern-card:hover,
.concern-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(19,33,42,.12);
    border-color: rgba(47,143,107,.25);
}

    .concern-card:hover::before,
    .concern-card:focus-within::before {
        opacity: 1;
    }

    .concern-card:hover::after,
    .concern-card:focus-within::after {
        opacity: 1;
        border-color: rgba(47,143,107,.30);
    }

    .concern-card:hover .concern-card__icon,
    .concern-card:focus-within .concern-card__icon {
        background: rgba(47,143,107,.14);
        border-color: rgba(47,143,107,.26);
        transform: translateY(-1px);
    }

    .concern-card:hover .tag-pill,
    .concern-card:focus-within .tag-pill {
        background: rgba(47,143,107,.14);
        border-color: rgba(47,143,107,.30);
    }

@media (prefers-reduced-motion: reduce) {
    .concern-card, .concern-card::before, .concern-card::after, .concern-card__icon {
        transition: none !important;
    }
}

/* compare box */
.inv-compare {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.inv-compare__inner {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(47,143,107,.26);
    box-shadow: 0 18px 45px rgba(19,33,42,.10);
    padding: 2rem 1.25rem 1.5rem;
    backdrop-filter: blur(10px);
}

    .inv-compare__inner::before {
        content: "";
        position: absolute;
        inset: -80px;
        pointer-events: none;
        background: radial-gradient(780px 420px at 50% 35%, rgba(47,143,107,.16) 0%, rgba(47,143,107,0) 60%), radial-gradient(680px 360px at 20% 20%, rgba(147,168,172,.14) 0%, rgba(147,168,172,0) 60%);
        opacity: .9;
    }

.inv-compare__title {
    position: relative;
    z-index: 1;
    font-weight: 850;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.compare-col {
    position: relative;
    z-index: 1;
}

.compare-col__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 850;
    color: rgba(19,33,42,.92);
    margin-bottom: .75rem;
}

    .compare-col__head.bad i {
        color: var(--brand-red);
    }

    .compare-col__head.good i {
        color: var(--accent-green);
    }

.compare-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .compare-list li {
        position: relative;
        padding-left: 1.3rem;
        margin: .55rem 0;
        color: rgba(19,33,42,.62);
        font-weight: 600;
        line-height: 1.55;
        font-size: .95rem;
    }

    .compare-list.bad li::before {
        content: "•";
        position: absolute;
        left: .3rem;
        top: 0;
        color: var(--brand-red);
        font-weight: 900;
    }

    .compare-list.good li::before {
        content: "•";
        position: absolute;
        left: .3rem;
        top: 0;
        color: var(--accent-green);
        font-weight: 900;
    }

.inv-compare__cta {
    position: relative;
    z-index: 1;
    background: var(--cta-blue);
    color: #fff;
    border-radius: 14px;
    font-weight: 850;
    border: 1px solid transparent;
    box-shadow: 0 18px 30px rgba(11,108,151,.18);
}

    .inv-compare__cta:hover {
        background: var(--cta-blue-hover);
        color: #fff;
    }

.inv-compare__meta {
    position: relative;
    z-index: 1;
    color: rgba(19,33,42,.55);
    font-weight: 650;
    font-size: .95rem;
}

@media (max-width: 575.98px) {
    .inv-compare__inner {
        padding: 1.5rem 1rem 1.25rem;
    }
}

/* =========================================================
   SCREEN 5 — STEPS
========================================================= */
.inv-steps {
    background: #f6f8f8;
}

.inv-steps__head {
    max-width: 760px;
}

.inv-steps__wrap {
    position: relative;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.25rem 0;
}

    .inv-steps__wrap::before {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        top: 114px;
        height: 2px;
        background: rgba(47,143,107,.35);
        border-radius: 999px;
        z-index: 0;
        opacity: .7;
    }

@media (max-width: 991.98px) {
    .inv-steps__wrap::before {
        display: none;
    }
}

.step-card {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid rgba(19,33,42,.10);
    box-shadow: 0 12px 26px rgba(19,33,42,.08);
    padding: 2.1rem 1.5rem 1.4rem;
    text-align: center;
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}

    .step-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(19,33,42,.12);
        border-color: rgba(47,143,107,.22);
    }

.step-card__num {
    width: 62px;
    height: 62px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--accent-green);
    color: #fff;
    font-weight: 900;
    font-size: 1.3rem;
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    box-shadow: 0 16px 26px rgba(47,143,107,.25);
}

.step-card__icon {
    margin-top: 78px;
    display: grid;
    place-items: center;
    color: var(--accent-green);
}

    .step-card__icon i {
        font-size: 1.45rem;
    }

.step-card__title {
    margin: .8rem 0 .55rem;
    font-weight: 850;
    color: rgba(19,33,42,.92);
    font-size: 1.05rem;
}

.step-card__text {
    margin: 0 auto 1.1rem;
    max-width: 34ch;
    color: rgba(19,33,42,.62);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.65;
}

.step-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .8rem;
    border-radius: var(--pill);
    background: rgba(47,143,107,.10);
    border: 1px solid rgba(47,143,107,.18);
    color: rgba(19,33,42,.70);
    font-weight: 750;
    font-size: .82rem;
}

.inv-steps__cta {
    background: var(--cta-blue);
    color: #fff;
    border-radius: 14px;
    font-weight: 850;
    border: 1px solid transparent;
    box-shadow: 0 18px 30px rgba(11,108,151,.18);
    padding-left: 2.1rem !important;
    padding-right: 2.1rem !important;
}

    .inv-steps__cta:hover {
        background: var(--cta-blue-hover);
        color: #fff;
    }

@media (max-width: 575.98px) {
    .step-card {
        padding: 2.05rem 1.15rem 1.3rem;
    }

    .step-card__text {
        max-width: 40ch;
    }
}

/* =========================================================
   SCREEN 6 — FORM (step 1 + step 2)
========================================================= */
.inv-form-step {
    background: #f4f7f7;
}

.inv-form-step__trust .trust-mini {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .9rem;
    border-radius: var(--pill);
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.75);
    color: rgba(19,33,42,.70);
    font-weight: 650;
    font-size: .92rem;
}

    .inv-form-step__trust .trust-mini i {
        color: var(--accent-green);
        font-size: 1.05rem;
    }

.inv-form-card {
    max-width: 620px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(47,143,107,.22);
    border-radius: calc(var(--radius-lg) + 6px);
    box-shadow: 0 18px 55px rgba(19,33,42,.14);
    padding: 2rem 1.75rem 1.6rem;
    position: relative;
    overflow: hidden;
}

    .inv-form-card::before {
        content: "";
        position: absolute;
        inset: -120px;
        pointer-events: none;
        background: radial-gradient(820px 520px at 50% 25%, rgba(47,143,107,.14) 0%, rgba(47,143,107,0) 60%), radial-gradient(720px 420px at 85% 15%, rgba(147,168,172,.14) 0%, rgba(147,168,172,0) 60%), linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%);
        opacity: .9;
    }

    .inv-form-card > * {
        position: relative;
        z-index: 1;
    }

.inv-form-card__dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
}

    .inv-form-card__dots .dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(19,33,42,.14);
    }

        .inv-form-card__dots .dot.active {
            background: var(--accent-green);
        }

.inv-form-card__pill {
    display: inline-flex;
    align-items: center;
    padding: .25rem .7rem;
    border-radius: var(--pill);
    background: rgba(47,143,107,.10);
    border: 1px solid rgba(47,143,107,.18);
    color: rgba(19,33,42,.72);
    font-weight: 750;
    font-size: .82rem;
}

.inv-form-card__title {
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-size: clamp(1.65rem, 2.8vw, 2.1rem);
    margin: 0;
}

.inv-form-card__sub {
    color: rgba(19,33,42,.60);
    font-weight: 600;
    margin-top: .4rem;
}

.inv-label {
    font-weight: 750;
    color: rgba(19,33,42,.84);
    font-size: .95rem;
}

    .inv-label .opt {
        color: rgba(19,33,42,.50);
        font-weight: 650;
    }

.pick-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    padding: .7rem .95rem;
    background: #fff;
    border: 1px solid rgba(19,33,42,.18);
    color: rgba(19,33,42,.86);
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    user-select: none;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}

    .pick-chip input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .pick-chip:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 20px rgba(19,33,42,.08);
        border-color: rgba(11,108,151,.28);
    }

    .pick-chip:has(input:checked) {
        background: rgba(47,143,107,.10);
        border-color: rgba(47,143,107,.28);
        box-shadow: 0 12px 20px rgba(19,33,42,.06);
    }

.inv-radio .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0;
    border-color: rgba(19,33,42,.22);
}

    .inv-radio .form-check-input:checked {
        background-color: var(--cta-blue);
        border-color: var(--cta-blue);
    }

.inv-radio .form-check-label {
    font-weight: 650;
    color: rgba(19,33,42,.78);
}

.inv-textarea {
    border-radius: 14px;
    border-color: rgba(19,33,42,.18);
    font-weight: 600;
    color: rgba(19,33,42,.86);
    padding: .85rem .95rem;
    resize: none;
    box-shadow: none;
}

    .inv-textarea::placeholder {
        color: rgba(19,33,42,.45);
        font-weight: 600;
    }

    .inv-textarea:focus {
        border-color: rgba(47,143,107,.38);
        box-shadow: 0 0 0 .2rem rgba(254,205,7,.18);
    }

/* primary CTA used in both steps */
.inv-form-cta {
    /*background: rgba(11,108,151,.95);*/
    background: rgb(222, 31, 38,.95);
    border-color: transparent;
    color: #fff;
    font-weight: 850;
    border-radius: 12px;
}

    .inv-form-cta:hover {
        background: rgba(11,108,151,.75);
        color: #fff;
    }

    .inv-form-cta.is-disabled {
        opacity: .55;
        cursor: not-allowed;
        pointer-events: none;
    }

.inv-form-note {
    font-size: .86rem;
    color: rgba(19,33,42,.58);
    font-weight: 600;
}

/* step-2 additions */
.inv-input {
    border-radius: 10px;
    border-color: rgba(19,33,42,.18);
    font-weight: 600;
    color: rgba(19,33,42,.86);
    padding: .75rem .9rem;
    box-shadow: none;
    background: rgba(255,255,255,.92);
}

    .inv-input::placeholder {
        color: rgba(19,33,42,.45);
        font-weight: 600;
    }

    .inv-input:focus {
        border-color: rgba(47,143,107,.38);
        box-shadow: 0 0 0 .2rem rgba(254,205,7,.18);
    }

.req {
    color: rgba(19,33,42,.55);
    font-weight: 750;
}

.inv-consent {
    border-radius: 12px;
    background: rgba(147,168,172,.10);
    border: 1px solid rgba(147,168,172,.16);
    padding: 1rem;
    color: rgba(19,33,42,.66);
    font-weight: 600;
    line-height: 1.55;
}

    .inv-consent .form-check-input {
        width: 1.05rem;
        height: 1.05rem;
        border-color: rgba(19,33,42,.22);
    }

        .inv-consent .form-check-input:checked {
            background-color: var(--cta-blue);
            border-color: var(--cta-blue);
        }

.inv-btn-back {
    border-radius: 12px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(19,33,42,.18);
    color: rgba(19,33,42,.80);
    font-weight: 800;
}

    .inv-btn-back:hover {
        background: rgba(255,255,255,.95);
        border-color: rgba(19,33,42,.24);
        color: rgba(19,33,42,.90);
    }

@media (max-width: 575.98px) {
    .inv-form-card {
        padding: 1.6rem 1.05rem 1.2rem;
    }

    .pick-chip {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   SCREEN 7 — FAQ
========================================================= */
.inv-faq {
    background: #fff;
}

.inv-faq__head {
    max-width: 720px;
}

.inv-faq__title {
    font-weight: 850;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.inv-faq__list {
    max-width: 820px;
}

.faq-item {
    border-radius: 14px;
    border: 1px solid rgba(19,33,42,.14);
    background: #fff;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .faq-item.is-open {
        border-color: rgba(47,143,107,.35);
        box-shadow: 0 14px 30px rgba(19,33,42,.08);
    }

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.15rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 750;
    font-size: 1rem;
    color: var(--ink);
    cursor: pointer;
}

    .faq-question i {
        font-size: 1.1rem;
        transition: transform .25s ease;
    }

.faq-item.is-open .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease;
}

.faq-item.is-open .faq-answer {
    max-height: 220px;
    opacity: 1;
}

.faq-answer p {
    padding: 0 1.25rem 1.2rem;
    margin: 0;
    color: rgba(19,33,42,.62);
    font-weight: 600;
    line-height: 1.6;
    font-size: .96rem;
}