:root {
    --bg: #f3f8fe;
    --bg-soft: #f8fbff;
    --text: #16305f;
    --text-soft: #4c638d;
    --heading: #20376b;
    --accent: #f28b1a;
    --accent-dark: #d76d00;
    --green: #4f8f1f;
    --line: #d6e7fb;
    --white: #ffffff;
    --shadow: 0 20px 60px rgba(52, 97, 154, .12);
    --shadow-soft: 0 12px 30px rgba(52, 97, 154, .08);
    --danger: #bf2d4f;
    --ok: #1f7f4d;
}

/* ===== Base ===== */

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 40px;
}

section[id],
[id] {
    scroll-margin-top: 40px;
}

body {
    margin: 0;
    font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #f7fbff 0%, #eef6ff 45%, #f8fbff 100%);
}

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

    a:hover {
        text-decoration: none;
    }

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

strong {
    color: var(--heading);
}

.hidden {
    display: none !important;
}

.nowrap {
    white-space: nowrap;
}

.container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.section {
    padding: 34px 0 56px;
}

.card-light {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(214,231,251,.95);
    border-radius: 28px;
    box-shadow: var(--shadow);
}

/* ===== Footer ===== */

.site-footer {
    margin-top: 24px;
    padding: 30px 0;
    background: #f5f8fc;
    border-top: 1px solid var(--line);
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    font-size: .95rem;
    color: var(--text-soft);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
}

.footer-phone-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: var(--heading);
    text-decoration: none;
}

    .footer-phone-link:hover {
        text-decoration: none;
    }

.footer-contact strong {
    color: var(--heading);
}

.footer-phone-number {
    display: block;
    margin-top: 2px;
    color: var(--text-soft);
}

.footer-email-link {
    color: var(--heading);
    text-decoration: none;
}

    .footer-email-link:hover {
        text-decoration: underline;
    }

.footer-copyright {
    color: var(--text-soft);
}

/* ===== Header / Nav ===== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(214,231,251,.9);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    color: var(--heading);
}

    .brand:hover {
        text-decoration: none;
    }

.brand-logo img {
    height: 68px;
    width: auto;
    display: block;
}

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

    .nav-links a {
        color: var(--text-soft);
        font-weight: 700;
        position: relative;
        transition: color .18s ease;
        text-decoration: none !important;
    }

        .nav-links a:hover {
            color: var(--heading);
            text-decoration: none !important;
        }

        .nav-links a::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -6px;
            height: 3px;
            border-radius: 999px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: center;
            transition: transform .18s ease;
        }

        .nav-links a.active {
            color: var(--heading);
            text-decoration: none !important;
        }

            .nav-links a:hover::after,
            .nav-links a.active::after {
                transform: scaleX(1);
            }

.nav-cta {
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--heading);
    color: #fff !important;
    box-shadow: var(--shadow-soft);
}

/* ===== Hero ===== */

.hero-shell {
    position: relative;
    padding: 34px 0 24px;
    overflow: hidden;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 28px;
    align-items: start;
}

.hero-copy {
    padding: 26px 8px 12px 4px;
}

.eyebrow,
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(214,231,251,.95);
    color: var(--green);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 900;
    box-shadow: var(--shadow-soft);
}

.hero-copy h1 {
    margin: 18px 0 14px;
    max-width: 12ch;
    color: var(--heading);
    font-size: clamp(2.7rem, 6vw, 4.7rem);
    line-height: .96;
    letter-spacing: -.05em;
}

.hero-sub {
    max-width: 60ch;
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--text-soft);
}

.hero-points {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    gap: 12px;
    max-width: 720px;
}

    .hero-points li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 14px 16px;
        background: rgba(255,255,255,.84);
        border: 1px solid rgba(214,231,251,.95);
        border-radius: 18px;
        box-shadow: var(--shadow-soft);
    }

    .hero-points span {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: rgba(79,143,31,.14);
        color: var(--green);
        font-weight: 900;
        flex: 0 0 28px;
    }

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.hero-note {
    margin-top: 14px;
    max-width: 62ch;
    color: var(--text-soft);
    font-size: .98rem;
}

.hero-panel {
    display: grid;
    gap: 16px;
}

.partner-logo {
    width: min(100%, 280px);
    justify-self: end;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(214,231,251,.95);
    border-radius: 22px;
    padding: 14px 16px;
    box-shadow: var(--shadow-soft);
}

.panel-card {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(214,231,251,.95);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}

.postcard-card {
    padding: 16px;
}

.postcard-kicker {
    margin-bottom: 12px;
    color: var(--text-soft);
    font-size: .85rem;
    font-weight: 800;
}

.postcard-card img {
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

.mini-trust {
    padding: 18px;
}

.mini-trust-title {
    font-size: 1rem;
    font-weight: 900;
    color: var(--heading);
    margin-bottom: 10px;
}

.mini-trust ul {
    margin: 0;
    padding-left: 18px;
    color: var(--text-soft);
    display: grid;
    gap: 8px;
}

/* ===== Buttons ===== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 999px;
    font-weight: 900;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
}

.btn-primary {
    background: linear-gradient(180deg, var(--accent), var(--accent-dark));
    color: #fff;
    box-shadow: 0 16px 26px rgba(242,139,26,.24);
}

    .btn-primary:hover {
        filter: brightness(1.03);
    }

.btn-secondary {
    background: #fff;
    color: var(--heading);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

    .btn-secondary:hover {
        background: var(--heading);
        color: #fff;
        border-color: var(--heading);
        text-decoration: none;
    }

.btn-full {
    width: 100%;
}

/* ===== Form ===== */

.form-section {
    padding-top: 12px;
}

.form-layout {
    display: grid;
    grid-template-columns: minmax(280px,.82fr) minmax(0,1.18fr);
    gap: 22px;
    align-items: start;
}

.form-intro {
    padding: 28px;
}

    .form-intro h2,
    .section-head h2,
    .trust-copy h2 {
        margin: 12px 0 10px;
        color: var(--heading);
        font-size: clamp(1.9rem,3.2vw,2.7rem);
        line-height: 1.05;
    }

    .form-intro p,
    .section-head p,
    .trust-copy p,
    .resource-card p,
    .form-copy,
    .small-note {
        color: var(--text-soft);
        line-height: 1.7;
    }

.form-card {
    padding: 28px;
}

.form-title {
    margin: 10px 0 6px;
    color: var(--heading);
    font-size: 2rem;
    line-height: 1.06;
}

.form-copy {
    margin: 0 0 16px;
}

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

label {
    display: block;
    margin: 0 0 6px;
    font-size: .92rem;
    font-weight: 800;
    color: var(--heading);
}

input,
textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    outline: none;
    font: inherit;
}

    input:focus,
    textarea:focus {
        border-color: #8ab8f2;
        box-shadow: 0 0 0 4px rgba(91,143,206,.12);
    }

.hint {
    font-size: .85rem;
    color: var(--text-soft);
    margin-top: 6px;
    line-height: 1.5;
}

.err {
    display: none;
    margin-top: 6px;
    font-size: .85rem;
    color: var(--danger);
    font-weight: 700;
}

.agree {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 18px;
    color: var(--text-soft);
    line-height: 1.6;
}

    .agree input {
        width: 18px;
        height: 18px;
        margin-top: 2px;
    }

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 18px;
}

.btn-submit {
    min-width: 230px;
}

.status {
    display: none;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
}

.status-ok,
.status-bad {
    display: block;
}

.status-ok {
    border-color: rgba(31,127,77,.25);
    background: rgba(31,127,77,.08);
    color: #135737;
}

.status-bad {
    border-color: rgba(191,45,79,.25);
    background: rgba(191,45,79,.08);
    color: #87253d;
}

.form-note {
    margin-top: 16px;
}

/* ===== Generic content blocks ===== */

.section-head {
    max-width: 760px;
    margin: 0 auto 28px;
}

    .section-head.center {
        text-align: center;
    }

.how-boxes {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.how-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(214,231,251,.95);
    box-shadow: var(--shadow-soft);
}

    .how-box.compact {
        padding: 0;
    }

    .how-box.large {
        min-height: 220px;
    }

.how-num {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(180deg, var(--green), #41761b);
    box-shadow: 0 10px 18px rgba(79,143,31,.24);
}

.how-box strong {
    display: block;
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.how-box span {
    display: block;
    color: var(--text-soft);
    line-height: 1.6;
}

.compact {
    margin-top: 18px;
    grid-template-columns: 1fr;
    display: grid;
    gap: 12px;
}

    .compact .how-box {
        padding: 14px 16px;
        border-radius: 18px;
    }

    .compact .how-num {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 12px;
    }

.trust-grid {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr);
    gap: 22px;
}

.trust-copy,
.resource-card {
    padding: 28px;
}

.trust-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}

    .trust-list > div {
        padding: 16px;
        border-radius: 20px;
        background: rgba(238,247,255,.7);
        border: 1px solid var(--line);
    }

    .trust-list strong {
        display: block;
        margin-bottom: 6px;
    }

    .trust-list span {
        display: block;
        color: var(--text-soft);
        line-height: 1.5;
    }

.resource-card h3 {
    margin: 6px 0 10px;
    font-size: 1.55rem;
    color: var(--heading);
}

.resource-links {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.small-note {
    font-size: .92rem;
}

.questions-card {
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

    .questions-card h2 {
        margin: 12px 0 10px;
        color: var(--heading);
        font-size: clamp(1.8rem,3vw,2.4rem);
        line-height: 1.06;
    }

    .questions-card p {
        margin: 0;
        color: var(--text-soft);
        line-height: 1.7;
    }

.trust-bar {
    background: #f7f9fc;
    padding: 28px 0;
    border-top: 1px solid #e6e9ef;
    border-bottom: 1px solid #e6e9ef;
}

    .trust-bar .trust-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
        gap: 16px;
        font-size: 15px;
        font-weight: 500;
        text-align: center;
    }

.trust-gov {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
}

/* ===== Variant backgrounds ===== */

body.variant-corporate {
    background: linear-gradient(180deg, #eef4ff 0%, #f7fafe 46%, #f4f7fb 100%);
}

body.variant-microsoft {
    background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 42%, #f3f8fd 100%);
}

/* ===== Corporate variant ===== */

.hero-corporate {
    padding: 44px 0 22px;
}

.hero-grid-corporate {
    grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr);
    align-items: center;
}

.hero-copy-corporate h1 {
    max-width: 11ch;
    font-size: clamp(3rem,6vw,5rem);
    line-height: .93;
    letter-spacing: -.05em;
}

.hero-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 22px;
}

.proof-chip {
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(214,231,251,.95);
    box-shadow: var(--shadow-soft);
}

    .proof-chip strong {
        display: block;
        margin-bottom: 4px;
    }

    .proof-chip span {
        display: block;
        color: var(--text-soft);
        font-size: .93rem;
        line-height: 1.45;
    }

.hero-side-stack {
    display: grid;
    gap: 16px;
}

.postcard-preview {
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(214,231,251,.95);
    border-radius: 28px;
    padding: 18px;
    box-shadow: var(--shadow);
}

.postcard-label {
    font-weight: 900;
    color: var(--heading);
    margin-bottom: 10px;
}

.postcard-preview img {
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

.credential-panel {
    display: grid;
    gap: 14px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(214,231,251,.95);
    border-radius: 28px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
}

.credential-links {
    display: grid;
    gap: 10px;
}

    .credential-links a {
        color: var(--heading);
        font-weight: 800;
        text-decoration: none;
        padding: 12px 14px;
        border-radius: 16px;
        background: #f5f9ff;
        border: 1px solid var(--line);
    }

.trust-ribbon {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .trust-ribbon span {
        padding: 10px 14px;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid var(--line);
        box-shadow: var(--shadow-soft);
        color: var(--heading);
        font-weight: 800;
        font-size: .92rem;
    }

.trust-strip {
    padding: 16px 0 8px;
}

.trust-strip-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
}

    .trust-strip-grid > div {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 22px;
        padding: 18px;
        box-shadow: var(--shadow-soft);
    }

    .trust-strip-grid strong {
        display: block;
        margin-bottom: 6px;
    }

    .trust-strip-grid span {
        display: block;
        color: var(--text-soft);
        line-height: 1.45;
    }

.form-layout-premium {
    display: grid;
    grid-template-columns: minmax(280px,.78fr) minmax(0,1.22fr);
    gap: 22px;
    align-items: start;
}

.mini-steps {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

    .mini-steps > div {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 12px 14px;
        border-radius: 18px;
        background: #f5f9ff;
        border: 1px solid var(--line);
    }

    .mini-steps strong {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: var(--heading);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: .88rem;
    }

    .mini-steps span {
        color: var(--text-soft);
        font-weight: 700;
    }

.three-cards,
.faq-grid,
.microsoft-steps {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}

.info-card,
.faq-card,
.microsoft-step-card {
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(214,231,251,.95);
    border-radius: 26px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

    .info-card h3,
    .faq-card h3 {
        margin: 0 0 10px;
        color: var(--heading);
    }

    .info-card p,
    .faq-card p {
        margin: 0;
        color: var(--text-soft);
        line-height: 1.65;
    }

/* ===== Microsoft step cards: number inline with heading ===== */

.microsoft-step-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "badge title"
        "body body";
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
}

    .microsoft-step-card .step-badge {
        grid-area: badge;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: linear-gradient(180deg, var(--green), #41761b);
        color: #fff;
        font-weight: 900;
        margin: 0;
        box-shadow: 0 10px 18px rgba(79,143,31,.24);
    }

    .microsoft-step-card h3 {
        grid-area: title;
        margin: 0;
        color: var(--heading);
        line-height: 1.25;
    }

    .microsoft-step-card p {
        grid-area: body;
        margin: 0;
        color: var(--text-soft);
        line-height: 1.65;
    }

.split-highlight {
    display: grid;
    grid-template-columns: minmax(0,1.12fr) minmax(280px,.88fr);
    gap: 22px;
}

.copy-panel,
.quote-panel,
.microsoft-trust-card,
.microsoft-resource-card {
    padding: 30px;
}

    .microsoft-trust-card h2 {
        margin: 0 0 10px;
    }

.check-list {
    margin: 18px 0 0;
    padding-left: 20px;
    color: var(--text-soft);
    display: grid;
    gap: 10px;
}

.quote-kicker {
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 10px;
}

.quote-panel h3 {
    margin: 0 0 10px;
    color: var(--heading);
    font-size: 1.6rem;
}

.quote-panel p {
    color: var(--text-soft);
    line-height: 1.7;
}

/* ===== Microsoft variant ===== */

.ms-hero {
    position: relative;
    padding: 52px 0 26px;
}

    .ms-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 10% 20%, rgba(0,120,212,.12) 0, rgba(0,120,212,0) 26%), radial-gradient(circle at 85% 15%, rgba(80,160,255,.12) 0, rgba(80,160,255,0) 22%);
        pointer-events: none;
    }

.ms-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,.92fr);
    gap: 28px;
    align-items: center;
}

.ms-pill {
    background: rgba(0,120,212,.08);
    color: #005a9e;
    border-color: rgba(0,120,212,.15);
    box-shadow: none;
}

.ms-copy h1 {
    margin: 18px 0 16px;
    max-width: 10ch;
    color: #0f172a;
    font-size: clamp(3rem,6vw,5rem);
    line-height: .95;
    letter-spacing: -.055em;
}

.ms-action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.microsoft-primary {
    background: #0078d4;
    box-shadow: 0 16px 26px rgba(0,120,212,.22);
}

.microsoft-secondary {
    box-shadow: none;
    border-color: #d8e7f5;
}

.ms-inline-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

    .ms-inline-points span {
        padding: 10px 14px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid #d8e7f5;
        color: #17406a;
        font-weight: 700;
    }

.ms-visual {
    display: flex;
    justify-content: flex-end;
}

.ms-product-card {
    width: min(100%, 470px);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.96));
    border: 1px solid #d8e7f5;
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(27,77,137,.12);
}

.ms-card-top {
    font-weight: 900;
    color: #17406a;
    margin-bottom: 12px;
}

.ms-product-card img {
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

.microsoft-band {
    padding: 10px 0 6px;
}

.microsoft-band-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
}

.band-card {
    background: #fff;
    border: 1px solid #d8e7f5;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 24px rgba(28,76,135,.08);
}

    .band-card strong {
        display: block;
        color: #0f172a;
        margin-bottom: 6px;
    }

    .band-card span {
        display: block;
        color: #55708f;
    }

.microsoft-form-layout {
    display: grid;
    grid-template-columns: minmax(280px,.76fr) minmax(0,1.24fr);
    gap: 22px;
    align-items: start;
}

.ms-side-copy h2 {
    margin: 12px 0 10px;
    color: #0f172a;
    font-size: clamp(2rem,3.3vw,2.8rem);
    line-height: 1.05;
}

.ms-side-copy p {
    color: #55708f;
    line-height: 1.7;
}

.ms-process-mini {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

    .ms-process-mini > div {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 16px;
        background: #fff;
        border: 1px solid #d8e7f5;
        border-radius: 18px;
    }

    .ms-process-mini strong {
        color: #0f172a;
    }

    .ms-process-mini span {
        color: #55708f;
    }

.microsoft-form-card {
    padding: 28px;
    border-color: #d8e7f5;
    box-shadow: 0 20px 56px rgba(27,77,137,.10);
}

.microsoft-trust-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.microsoft-trust-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px;
}

    .microsoft-trust-list > div {
        padding: 16px;
        border-radius: 18px;
        background: #f7fbff;
        border: 1px solid #d8e7f5;
    }

    .microsoft-trust-list strong {
        display: block;
        margin-bottom: 6px;
        color: #0f172a;
    }

    .microsoft-trust-list span {
        display: block;
        color: #55708f;
        line-height: 1.5;
    }

.ms-partner-logo {
    justify-self: center;
    background: #fff;
    border-color: #d8e7f5;
}

.contact-box {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f7fbff;
    border: 1px solid #d8e7f5;
    color: #55708f;
    line-height: 1.6;
}

    .contact-box a {
        color: var(--heading);
        text-decoration: none;
        font-weight: 700;
    }

        .contact-box a:hover {
            text-decoration: underline;
        }

/* ===== Upload area ===== */

.upload-col {
    position: relative;
}

.sr-file-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
    padding: 24px;
    border-radius: 22px;
    border: 1.5px dashed #9ec4ef;
    background: linear-gradient(180deg,#fbfdff,#f4f9ff);
    cursor: pointer;
    transition: .18s ease;
}

    .upload-dropzone:hover,
    .upload-dropzone.is-dragging {
        border-color: #4b8ed9;
        background: linear-gradient(180deg,#ffffff,#eef6ff);
        transform: translateY(-1px);
    }

.upload-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #eaf3ff;
    color: #19589b;
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 12px;
}

.upload-title {
    font-size: 1.02rem;
    font-weight: 900;
    color: var(--heading);
}

.upload-subtitle {
    margin-top: 4px;
    color: var(--text-soft);
    line-height: 1.5;
}

.upload-link {
    margin-top: 12px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-weight: 800;
    color: var(--heading);
}

.upload-file-name {
    margin-top: 12px;
    font-size: .92rem;
    color: var(--text-soft);
}

.secure-note {
    color: var(--text-soft);
    font-size: .92rem;
    font-weight: 700;
}

.full-span {
    grid-column: 1 / -1;
}

.lead-form-microsoft .upload-dropzone {
    border-color: #bcd6ee;
    background: linear-gradient(180deg,#fbfeff,#f4f9fe);
}

.lead-form-microsoft .upload-icon {
    background: #e8f3fc;
    color: #0078d4;
}

.lead-form-microsoft input:focus,
.lead-form-microsoft textarea:focus {
    border-color: #0078d4;
    box-shadow: 0 0 0 4px rgba(0,120,212,.10);
}

/* ===== Microsoft variant color overrides ===== */

.variant-microsoft .nav-cta {
    background: #0078d4;
}

.variant-microsoft .nav-links a {
    color: #486581;
}

.variant-microsoft .form-title,
.variant-microsoft .section-head h2,
.variant-microsoft h2,
.variant-microsoft h3 {
    color: #0f172a;
}

.variant-microsoft .small-note,
.variant-microsoft .form-copy,
.variant-microsoft .hint,
.variant-microsoft .hero-sub,
.variant-microsoft p {
    color: #55708f;
}

.variant-microsoft strong {
    color: #0f172a;
}

/* ===== Embedded signing ===== */

.embedded-sign-wrapper {
    margin-top: 28px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(214,231,251,.95);
    box-shadow: var(--shadow-soft);
}

    .embedded-sign-wrapper h3 {
        margin: 0 0 8px;
        color: var(--heading);
        font-size: 1.55rem;
    }

    .embedded-sign-wrapper p {
        margin: 0 0 16px;
        color: var(--text-soft);
        line-height: 1.6;
    }

#embedded-signing-container {
    min-height: 680px;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
}

/* ===== Responsive ===== */

@media (max-width: 1050px) {
    .hero-grid,
    .form-layout,
    .trust-grid {
        grid-template-columns: 1fr;
    }

    .partner-logo {
        justify-self: start;
    }

    .questions-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 980px) {
    .hero-grid-corporate,
    .ms-hero-inner,
    .form-layout-premium,
    .microsoft-form-layout,
    .split-highlight,
    .microsoft-trust-layout,
    .trust-grid,
    .hero-grid,
    .form-layout {
        grid-template-columns: 1fr;
    }

    .hero-proof-grid,
    .trust-strip-grid,
    .microsoft-band-grid,
    .three-cards,
    .faq-grid,
    .microsoft-steps {
        grid-template-columns: 1fr;
    }

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

    .partner-logo,
    .ms-partner-logo {
        justify-self: start;
    }
}

@media (max-width: 820px) {
    .how-boxes,
    .trust-list,
    .form-grid-simple {
        grid-template-columns: 1fr;
    }

    .topbar-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .nav-links {
        width: 100%;
    }
}

@media (max-width: 760px) {
    html {
        scroll-padding-top: 43px;
    }

    section[id],
    [id] {
        scroll-margin-top: 43px;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .topbar-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px 0;
    }

    .brand {
        justify-content: center;
    }

    .brand-logo img {
        height: 40px;
    }

    .nav-links a[href="#offer"] {
        display: none !important;
    }

    .nav-links {
        display: flex !important;
        gap: 8px;
        width: 100%;
        overflow: visible;
        padding-bottom: 0;
        flex-wrap: nowrap;
    }

        .nav-links a {
            flex: 1 1 0;
            min-width: 0;
            min-height: 34px;
            padding: 6px 8px;
            white-space: normal;
            text-align: center;
            line-height: 1.15;
            font-size: .8rem;
            font-weight: 800;
            border: none;
            background: transparent;
            border-radius: 999px;
            text-decoration: none !important;
        }

            .nav-links a::after {
                bottom: -4px;
            }

    .nav-cta {
        width: auto;
    }

    .section {
        padding: 24px 0 34px;
    }

    .hero-shell,
    .ms-hero {
        padding: 16px 0 10px;
    }

    .container {
        width: min(100% - 16px, 1180px);
    }

    .hero-grid,
    .ms-hero-inner,
    .microsoft-form-layout,
    .microsoft-trust-layout,
    .trust-grid,
    .form-layout {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .hero-copy,
    .ms-copy {
        padding: 8px 0 0;
    }

        .hero-copy h1,
        .ms-copy h1 {
            max-width: none;
            font-size: clamp(2rem, 10vw, 2.9rem);
            line-height: .98;
            letter-spacing: -.04em;
            margin: 12px 0 10px;
        }

    .hero-copy-corporate h1 {
        max-width: none;
        font-size: clamp(2.4rem,11vw,3.8rem);
    }

    .hero-sub {
        font-size: 1rem;
        line-height: 1.55;
    }

    .hero-actions,
    .ms-action-row {
        flex-direction: column;
        gap: 10px;
        margin-top: 18px;
    }

    .btn {
        width: 100%;
        min-height: 50px;
        padding: 0 16px;
    }

    .hero-points {
        gap: 10px;
        margin-top: 18px;
    }

        .hero-points li {
            padding: 12px 14px;
            border-radius: 16px;
        }

    .ms-visual,
    .partner-logo,
    .ms-partner-logo {
        justify-content: center;
        justify-self: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    .ms-product-card,
    .postcard-preview,
    .credential-panel {
        width: 100%;
        padding: 14px;
        border-radius: 22px;
    }

    .microsoft-band-grid,
    .hero-proof-grid,
    .trust-strip-grid,
    .three-cards,
    .faq-grid,
    .microsoft-steps,
    .how-boxes,
    .trust-list,
    .microsoft-trust-list,
    .form-grid-simple {
        grid-template-columns: 1fr !important;
    }

        .band-card,
        .info-card,
        .faq-card,
        .microsoft-step-card,
        .how-box,
        .trust-list > div,
        .microsoft-trust-list > div {
            border-radius: 18px;
        }

            .how-box.large {
                min-height: 0;
            }

    .form-card,
    .form-intro,
    .trust-copy,
    .resource-card,
    .questions-card,
    .microsoft-form-card {
        padding: 18px;
        border-radius: 22px;
    }

    .form-title {
        font-size: 1.5rem;
    }

    label {
        font-size: .9rem;
        margin-bottom: 5px;
    }

    input,
    textarea {
        padding: 13px 14px;
        border-radius: 14px;
        font-size: 16px;
    }

    .upload-dropzone {
        min-height: 150px;
        padding: 18px;
        border-radius: 18px;
    }

    .upload-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .upload-title {
        font-size: .98rem;
    }

    .upload-subtitle,
    .hint,
    .secure-note,
    .small-note {
        font-size: .9rem;
        line-height: 1.45;
    }

    .actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .btn-submit {
        min-width: 0;
        width: 100%;
    }

    .agree {
        align-items: flex-start;
        gap: 10px;
    }

        .agree input {
            flex: 0 0 18px;
            margin-top: 3px;
        }

    .ms-side-copy {
        display: none !important;
    }

    .microsoft-form-layout {
        gap: 14px;
    }

    .ms-process-mini {
        display: none !important;
    }

    #process .section-head {
        margin: 0 auto 14px;
    }

    #process .section-eyebrow {
        margin-bottom: 6px;
    }

    #process h2 {
        margin: 6px 0 8px;
        font-size: 1.55rem;
        line-height: 1.08;
    }

    #process .section-head p {
        margin: 0;
        font-size: .95rem;
        line-height: 1.45;
    }

    .microsoft-steps {
        gap: 8px;
    }

    .microsoft-step-card {
        padding: 12px 14px;
        border-radius: 16px;
        column-gap: 10px;
        row-gap: 6px;
    }

        .microsoft-step-card .step-badge {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            font-size: .9rem;
        }

        .microsoft-step-card h3 {
            font-size: .98rem;
            line-height: 1.2;
        }

        .microsoft-step-card p {
            font-size: .9rem;
            line-height: 1.4;
        }

    .microsoft-resource-card {
        display: grid;
        justify-items: center;
        gap: 12px;
        text-align: center;
    }

    .partner-logo.ms-partner-logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        justify-self: center !important;
    }

    .microsoft-resource-card .btn-full {
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .contact-box {
        width: 100%;
        text-align: center;
        margin-top: 4px;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .footer-contact {
        line-height: 1.5;
    }

    .embedded-sign-wrapper {
        margin-top: 20px;
        padding: 16px;
        border-radius: 18px;
    }

    #embedded-signing-container {
        min-height: 540px;
    }

    .trust-ribbon,
    .ms-inline-points {
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(100% - 20px, 1180px);
    }

    .hero-copy h1 {
        max-width: 11ch;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .hero-copy h1,
    .ms-copy h1 {
        font-size: clamp(1.85rem, 11vw, 2.45rem);
    }

    .eyebrow,
    .section-eyebrow {
        font-size: 11px;
        padding: 6px 10px;
    }

    .footer-contact {
        font-size: .92rem;
    }
}

/* ===== MOBILE HERO IMPROVEMENTS ===== */
.hero-break-mobile {
    display: none;
}
.desktop-only {
    display: block;
}
.contact-box {
    width: 100%;
    text-align: center;
    margin-top: 8px;
}

    .contact-box .contact-phone-link,
    .contact-box a[href^="mailto:"] {
        display: inline-block;
    }
@media (max-width: 760px) {

    .hero-break-mobile {
        display: inline;
    }
    .desktop-only {
        display: none !important;
    }
    /* remove postcard on mobile */
    .ms-visual {
        display: none;
    }

    .nav-links .nav-cta {
        background: transparent;
        color: var(--text-soft) !important;
        box-shadow: none;
    }

        .nav-links .nav-cta:hover,
        .nav-links .nav-cta.active {
            color: var(--heading) !important;
        }

    .ms-copy h1 {
        font-size: clamp(2.8rem, 11vw, 4rem);
        line-height: .96;
        letter-spacing: -.05em;
        margin: 12px 0 16px;
        max-width: none;
    }

    .nav-links a[href="#trust"] {
        white-space: nowrap;
    }

        .hero-sub-checks {
            display: grid;
            gap: 8px;
            margin-top: 4px;
        }

            .hero-sub-checks div {
                display: grid;
                grid-template-columns: 20px 1fr;
                align-items: start;
                column-gap: 4px;
                font-size: .98rem;
                line-height: 1.35;
                color: var(--text-soft);
            }

                .hero-sub-checks div::before {
                    content: "✓";
                    font-size: 1.5rem;
                    line-height: 1;
                    color: var(--green);
                    font-weight: 900;
                    transform: translateY(-1px);
                }
    }

@media (max-width: 760px) {
    .nav-links {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        gap: 6px;
        width: 100%;
        overflow: visible;
        padding-bottom: 0;
    }

        .nav-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            min-height: 38px;
            padding: 6px 8px;
            text-align: center;
            line-height: 1.15;
            font-size: .8rem;
            font-weight: 800;
            border: none;
            background: transparent;
            border-radius: 999px;
            text-decoration: none !important;
        }

        .nav-links .nav-cta {
            width: 100%;
        }
}

.invoice-toggle-card {
    display: grid;
    gap: 10px;
}

.invoice-toggle {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.invoice-toggle-btn {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--heading);
    border-radius: 999px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}

    .invoice-toggle-btn.active {
        background: var(--heading);
        color: #fff;
        border-color: var(--heading);
    }

@media (max-width: 760px) {
    .invoice-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .invoice-toggle-btn {
        width: 100%;
        text-align: center;
    }
}
.microsoft-trust-list > div {
    padding: 20px 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fbfdff, #f4f9ff);
    border: 1px solid #d8e7f5;
    box-shadow: 0 10px 24px rgba(28,76,135,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .microsoft-trust-list > div:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(28,76,135,.10);
        border-color: #bfd8f3;
    }

.microsoft-trust-list strong {
    font-size: 1.02rem;
    line-height: 1.3;
    margin-bottom: 8px;
}

.microsoft-trust-list span {
    font-size: .96rem;
    line-height: 1.6;
}

.microsoft-proof-row {
    margin-top: 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fbfdff, #f4f9ff);
    border: 1px solid #d8e7f5;
    box-shadow: 0 10px 24px rgba(28,76,135,.06);
}

.ms-proof-logo {
    width: 240px;
    max-width: 100%;
    height: auto;
    display: block;
}

.ms-proof-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.ms-proof-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d8e7f5;
    color: #17406a;
    font-weight: 800;
    text-decoration: none;
    transition: .18s ease;
    box-shadow: 0 8px 20px rgba(28,76,135,.05);
}

    .ms-proof-link:hover {
        background: #f4f9ff;
        border-color: #bfd8f3;
        text-decoration: none;
        transform: translateY(-1px);
    }

@media (max-width: 760px) {
    .microsoft-proof-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 16px;
        gap: 14px;
    }

    .ms-proof-logo {
        width: min(100%, 220px);
    }

    .ms-proof-links {
        width: 100%;
        justify-content: center;
    }

    .ms-proof-link {
        width: 100%;
        max-width: 320px;
    }
}

.trust-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

    .trust-heading-row h2 {
        margin: 0;
    }

.trust-heading-logo {
    width: 220px;
    max-width: 34%;
    height: auto;
    flex: 0 0 auto;
    display: block;
}

@media (max-width: 760px) {
    .trust-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .trust-heading-logo {
        width: min(220px, 100%);
        max-width: none;
    }
 }

.microsoft-trust-card {
    padding: 28px 32px;
}

.trust-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

    .trust-heading-row h2 {
        margin: 0;
        line-height: 1.08;
    }

.trust-heading-logo {
    width: 210px;
    max-width: 32%;
    height: auto;
    flex: 0 0 auto;
    display: block;
}

@media (max-width: 760px) {
    .trust-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .trust-heading-logo {
        width: 180px;
        max-width: 100%;
    }
}

.microsoft-trust-card {
    display: inline-flex;
    padding: 22px 28px;
    width: auto;
    max-width: 100%;
}

.trust-heading-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
}

    .trust-heading-row h2 {
        margin: 0;
        white-space: nowrap;
    }

.trust-heading-logo {
    width: 180px;
    height: auto;
    display: block;
    flex: 0 0 auto;
}

.microsoft-trust-card {
    justify-self: start;
}
.microsoft-trust-card {
    display: inline-flex;
    padding: 18px 24px;
    border-radius: 24px;
}

@media (max-width: 760px) {
    .microsoft-trust-card {
        display: block;
        width: 100%;
    }

    .trust-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

        .trust-heading-row h2 {
            white-space: normal;
        }

    .trust-heading-logo {
        width: 170px;
    }
}
#trust.section {
    padding-bottom: 20px;
}
#process.section {
    padding-bottom: 96px;
}
.microsoft-trust-card {
    padding: 14px 24px;
}
.trust-heading-row h2 {
    margin: 0;
}

.desktop-only-text {
    display: block;
}

.mobile-only-text {
    display: none;
}

@media (max-width: 760px) {
    .desktop-only-text {
        display: none;
    }

    .mobile-only-text {
        display: block;
    }

    /* Fix Microsoft partner card layout */
    .trust-card-partner {
        text-align: center;
    }

        .trust-card-partner h3 {
            text-align: center;
            margin-bottom: 14px;
        }

        .trust-card-partner img {
            max-width: 220px;
            height: auto;
        }
}

/* =========================================
   MOBILE ONLY - FIRST TRUST CARD FIX
========================================= */
@media (max-width: 760px) {
    .microsoft-trust-card {
        padding: 18px 20px 6px 20px;
    }

    .trust-heading-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
    }

        .trust-heading-row h2 {
            font-size: 2rem;
            line-height: 1.08;
            letter-spacing: -0.02em;
            margin: 0 auto;
            max-width: none;
            text-wrap: balance;
        }

    .trust-heading-logo {
        width: 220px;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
}