html {
    height:100%
}

body {
    margin:0;
    font-family:Inter,sans-serif;
    color:#1f2937;
    min-height:100vh;
    display:flex;
    flex-direction:column
} 

.wrap {
    max-width:1150px;
    margin:auto;
    padding:0 24px;
    text-align: center
}

header {
    position:sticky;
    top:0;
    background:#fff;
    /*border-bottom:1px solid #eee;*/
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.05);
    z-index:100
}

/*.wrap {
    text-align: center;
    display:block
}*/

header .wrap {
    position:relative;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    height:72px
}

/* Text-based logo (replaces the header image logo, now that the hero
   banner carries the main brand artwork on every page) */
.logo {
    font:800 1.4rem Manrope,sans-serif;
    text-decoration:none;
    color:#1f2937;
    letter-spacing:.02em
}

.logo span {
    color:#2563eb
}

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

nav a {
    margin-left:22px;
    text-decoration:none;
    color:#1f2937
}

nav a.active {
    color:#2563eb;
    font-weight:600
}

/* Hamburger button - hidden on desktop, shown on narrow screens */
.nav-toggle {
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:36px;
    height:36px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer
}

.nav-toggle span {
    display:block;
    width:100%;
    height:2px;
    background:#1f2937;
    border-radius:2px;
    transition:transform .2s ease,opacity .2s ease
}

.nav-toggle.open span:nth-child(1) {
    transform:translateY(7px) rotate(45deg)
}

.nav-toggle.open span:nth-child(2) {
    opacity:0
}

.nav-toggle.open span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg)
}

.hero {
    padding:0 0 80px;
    background:#f8fafc
}

/* Full-width hero banner image, edge-to-edge above the hero copy */
.hero-banner {
    width:100%;
    background:#fff;
    display:flex;
    justify-content:center;
    overflow:hidden
}

.hero-banner img {
    width:100%;
    max-height:380px;
    object-fit:contain;
    display:block
}

.hero-content {
    max-width:700px;
    margin:0 auto;
    padding-top:56px;
    text-align:center
}

.hero-content .lead {
    margin-left:auto;
    margin-right:auto
}

h1 {
    font:800 3.8rem Manrope;
    line-height:1.05
}

h1 span {
    color:#2563eb
}

.lead {
    font-size:1.15rem;
    max-width:42rem
}

.eyebrow {
    color:#2563eb;
    font-weight:700
}

.btn {
    display:inline-block;
    background:#2563eb;
    color:#fff;
    padding:14px 22px;
    border-radius:12px;
    text-decoration:none;
    margin-right:12px
}

.secondary {
    background:#fff;
    color:#2563eb;
    border:2px solid #2563eb
}

section {
    padding:70px 0
}

.cards {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px
}

.card {
    box-sizing:border-box;
    flex:1 1 240px;
    max-width:272px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:24px;
    box-shadow:0 8px 20px rgba(0,0,0,.05)
}

.alt {
    background:#f8fafc
}

.cta {
    background:#2563eb;
    color:#fff;
    text-align:center
}

footer {
    background:#1f2937;
    color:#fff;
    padding:30px 0;
    margin-top:auto
}

.section-intro { max-width:700px; margin:0 auto 34px; color:#4b5563; font-size:1.05rem; line-height:1.7 }
.pricing-cards .card { max-width:420px }
.highlight-card { padding:30px }
.price-label { margin:0 0 6px; color:#2563eb; font:800 1.8rem Manrope }
.price-detail { margin:0 0 18px; color:#6b7280; font-size:.95rem }
.price-note { margin-top:20px; padding-top:16px; border-top:1px solid #e5e7eb; font-size:.95rem }
.pricing-table-wrap { width:100%; overflow-x:auto; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,.05) }
.pricing-table { width:100%; border-collapse:collapse; text-align:left; background:#fff; min-width:760px }
.pricing-table th, .pricing-table td { padding:18px 20px; border-bottom:1px solid #e5e7eb; vertical-align:top; line-height:1.55 }
.pricing-table th { background:#f8fafc; font:700 1rem Manrope; color:#1f2937 }
.pricing-table tr:last-child td { border-bottom:none }
.pricing-table .price { white-space:nowrap; color:#2563eb; font-weight:700 }
.reassurance { text-align:center }
.reassurance .wrap { max-width:800px }
.reassurance-points { margin-top:26px; font-size:1.05rem }
.cta p { margin:0 auto 24px; color:rgba(255,255,255,.9) }
.cta .btn { background:#fff; color:#2563eb; margin-right:0 }

@media(max-width:800px) {
    h1 {
        font-size:2.6rem
    }

    .nav-toggle {
        display:flex
    }

    nav {
        display:none;
        position:absolute;
        top:72px;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        background:#fff;
        border-bottom:1px solid #eee;
        box-shadow:0 12px 20px rgba(0,0,0,.06);
        padding:6px 24px 18px
    }

    nav.open {
        display:flex
    }

    nav a {
        margin-left:0;
        padding:12px 0;
        border-bottom:1px solid #f1f5f9
    }

    .pricing-table-wrap {
        overflow-x:visible;
        border:none;
        box-shadow:none
    }

    .pricing-table {
        min-width:0;
        border:1px solid #e5e7eb;
        border-radius:16px;
        box-shadow:0 8px 20px rgba(0,0,0,.05);
        border-collapse:separate;
        border-spacing:0;
        overflow:hidden
    }

    .pricing-table thead {
        display:none
    }

    .pricing-table, .pricing-table tbody, .pricing-table tr, .pricing-table td {
        display:block;
        width:100%;
        box-sizing:border-box
    }

    .pricing-table tr {
        border-bottom:8px solid #f8fafc
    }

    .pricing-table tr:last-child {
        border-bottom:none
    }

    .pricing-table th,
    .pricing-table td {
        padding:12px 16px;
        border-bottom:1px solid #f1f5f9
    }

    .pricing-table td:last-child {
        border-bottom:none
    }

    .pricing-table td::before {
        content:attr(data-label);
        display:block;
        font:700 .72rem Manrope;
        text-transform:uppercase;
        letter-spacing:.04em;
        color:#6b7280;
        margin-bottom:4px
    }

    .section-intro {
        font-size:1rem
    }

    .hero-banner img {
        max-height:220px
    }

    .hero-content {
        padding-top:36px
    }
}

.contact-card {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    text-decoration:none;
    color:inherit;
    transition:transform .15s ease,box-shadow .15s ease
}

.contact-card:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.08)
}

.contact-icon {
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    border-radius:50%;
    margin-bottom:14px;
    color:#2563eb
}

.contact-icon svg {
    width:26px;
    height:26px
}

.contact-card h3 {
    margin:0 0 6px;
    font:700 1.1rem Manrope
}

.contact-card p {
    margin:0;
    color:#4b5563
}