:root {
    --blue:#1760ff;
    --ink:#071735;
    --muted:#50617d;
    --line:#dce5f0;
    --tint:#f0f8ff;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
    color:var(--ink);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px;
    line-height:1.55;
}
a {
    color:inherit;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
button,input,textarea,select {
    font:inherit;
}
button {
    cursor:pointer;
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible {
    outline:3px solid #1760ff;
    outline-offset:4px;
}
.container {
    max-width:1380px;
    margin:auto;
    padding:0 48px;
}
.site-header {
    background:white;
    border-bottom:1px solid #edf2f7;
}
.header-row {
    display:flex;
    align-items:center;
    gap:26px;
    min-height:84px;
}
.brand img {
    display:block;
    object-fit:contain;
    max-width:190px;
    height:auto;
    max-height:64px;
}
.desktop-nav {
    display:flex;
    align-items:center;
    gap:24px;
    flex:1;
    justify-content:center;
    font-size:14px;
}
.header-actions {
    display:flex;
    gap:12px;
    align-items:center;
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    background:var(--blue);
    border:1px solid var(--blue);
    color:#fff;
    border-radius:7px;
    padding:13px 23px;
    font-weight:600;
    min-height:46px;
    font-size:15px;
    text-decoration:none;
}
.button:hover {
    background:#084cde;
    text-decoration:none;
}
.button.secondary {
    color:var(--blue);
    background:white;
}
.button.secondary:hover {
    background:#edf5ff;
}
.header-actions .button {
    padding:10px 18px;
    font-size:14px;
}
.roles-menu {
    position:relative;
}
.roles-menu summary {
    cursor:pointer;
    min-height:44px;
    display:flex;
    align-items:center;
    gap:6px;
}
.roles-menu summary:after {
    content:'⌄';
}
.roles-menu>div {
    position:absolute;
    top:42px;
    width:200px;
    z-index:9;
    background:white;
    border:1px solid var(--line);
    box-shadow:0 14px 36px #07173515;
    border-radius:10px;
    padding:10px;
}
.roles-menu a {
    display:block;
    padding:9px;
}
.mobile-menu {
    display:none;
}
.tint {
    background:linear-gradient(110deg,#eff8ff,#f7fbff);
}
.hero {
    padding:50px 0 52px;
}
.split {
    display:grid;
    grid-template-columns:0.82fr 1.18fr;
    gap:46px;
    align-items:center;
}
h1,h2,h3,p {
    margin-top:0;
}
h1 {
    font-size:clamp(34px,3.5vw,52px);
    line-height:1.08;
    letter-spacing:-1.8px;
    margin-bottom:12px;
    font-weight:800;
}
h1 span {
    display:block;
    color:var(--blue);
}
h2 {
    font-size:clamp(25px,2.3vw,34px);
    letter-spacing:-1px;
    line-height:1.2;
    margin-bottom:8px;
}
h3 {
    font-size:18px;
    line-height:1.35;
}
.subtitle {
    font-size:20px;
    line-height:1.4;
    margin-bottom:18px;
}
.body-copy {
    color:var(--muted);
    white-space:pre-line;
    max-width:690px;
    margin-bottom:24px;
}
.section-subtitle {
    font-size:18px;
    color:var(--muted);
    margin-bottom:28px;
}
.checks {
    list-style:none;
    padding:0;
    margin:20px 0 28px;
}
.checks li {
    position:relative;
    padding-left:29px;
    margin:8px 0;
}
.checks li:before {
    content:'✓';
    position:absolute;
    left:0;
    top:3px;
    background:var(--blue);
    color:white;
    border-radius:50%;
    width:18px;
    height:18px;
    font-size:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}
.buttons {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}
.section {
    padding:34px 0 42px;
}
.journey {
    display:flex;
    list-style:none;
    padding:0;
    margin:28px 0 0;
    overflow-x:auto;
    scrollbar-width:thin;
}
.journey li {
    flex:1;
    min-width:135px;
    text-align:center;
    position:relative;
    padding:0 8px 34px;
    font-size:12px;
}
.journey strong,.journey span {
    display:block;
}
.journey strong {
    font-size:13px;
    margin:8px 0 4px;
}
.journey span {
    color:var(--muted);
}
.site-icon {
    width:36px;
    height:36px;
    color:var(--blue);
    flex-shrink:0;
}
.journey li:after {
    content:'';
    height:2px;
    background:var(--blue);
    position:absolute;
    bottom:10px;
    left:0;
    right:0;
}
.journey i {
    height:15px;
    width:15px;
    border:3px solid var(--blue);
    border-radius:50%;
    position:absolute;
    bottom:4px;
    left:calc(50% - 7px);
    background:white;
    z-index:1;
}
.role-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
.role-card {
    padding:22px 20px 14px;
    border:1px solid #e0e8f2;
    border-radius:11px;
    background:white;
    display:flex;
    flex-direction:column;
    min-width:0;
}
.role-title {
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:9px;
}
.role-title h3 {
    font-size:16px;
    margin:0;
}
.role-card .checks {
    font-size:14px;
    color:var(--muted);
    margin:12px 0 20px;
    flex:1;
}
.role-card .checks li {
    padding-left:25px;
}
.role-card .checks li:before {
    width:15px;
    height:15px;
    font-size:10px;
    top:4px;
}
.card-footer {
    font-size:13px;
    color:var(--muted);
    margin:8px 0 0;
}
.site-media {
    margin:0;
}
.site-media img {
    width:100%;
    height:auto;
    display:block;
    border-radius:9px;
}
.site-media figcaption {
    font-size:12px;
    color:var(--muted);
    margin-top:6px;
}
.guest-section {
    margin-top:12px;
}
.guest-section .split {
    grid-template-columns:1.1fr 0.9fr;
}
.guest-preview {
    background:white;
    border:1px solid var(--line);
    border-radius:13px;
    padding:28px;
    box-shadow:0 12px 30px #17315d08;
}
.guest-preview p {
    color:var(--muted);
}
.guest-route {
    background:linear-gradient(135deg,#e5f0e3,#e0effb);
    border-radius:9px;
    padding:50px 15px;
    text-align:center;
    font-size:14px;
    margin:20px 0 8px;
}
.guest-route span {
    color:var(--blue);
    font-size:30px;
    margin:0 15px;
}
.final-cta {
    background:linear-gradient(120deg,#fff 35%,#ecf5ff 100%);
    border-bottom:1px solid var(--line);
}
.benefits {
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    font-size:13px;
    margin-bottom:0;
}
.site-footer {
    padding:24px 0;
    color:var(--muted);
    font-size:13px;
}
.site-footer>.container {
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    align-items:center;
    justify-content:space-between;
}
.site-footer nav {
    display:flex;
    gap:22px;
    flex-wrap:wrap;
}
.site-footer p:empty {
    display:none;
}
.product-preview {
    display:grid;
    grid-template-columns:105px 1fr;
    border:1px solid #e0e8f3;
    border-radius:16px;
    overflow:hidden;
    background:white;
    box-shadow:0 18px 42px #092b5420;
    transform:perspective(1400px) rotateY(-2deg);
    min-width:0;
}
.product-preview aside {
    background:#06233a;
    color:#cedce8;
    padding:16px 8px;
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:10px;
}
.product-preview aside img {
    width:100%;
    height:auto;
    margin-bottom:18px;
}
.product-preview aside span {
    padding:9px 7px;
}
.product-preview .selected {
    background:var(--blue);
    border-radius:5px;
    color:white;
}
.preview-main {
    padding:24px 18px 16px;
    background:#f4f7fb;
    min-width:0;
}
.preview-main strong {
    font-size:14px;
}
.preview-main p {
    font-size:11px;
    color:var(--muted);
    margin-top:5px;
}
.preview-metrics {
    display:flex;
    gap:8px;
    margin:16px 0;
}
.preview-metrics>div {
    background:white;
    border:1px solid #e6ecf5;
    border-radius:5px;
    flex:1;
    padding:12px 8px;
    font-size:9px;
    color:var(--muted);
}
.preview-metrics span {
    display:block;
    font-size:13px;
    font-weight:700;
    color:var(--ink);
    margin-top:6px;
}
.preview-map {
    position:relative;
    background:#dce9e3;
    border-radius:8px;
    overflow:hidden;
}
.preview-map svg {
    width:100%;
    display:block;
}
.map-label {
    position:absolute;
    top:18%;
    left:24%;
    padding:12px;
    background:white;
    border:1px solid var(--line);
    border-radius:7px;
    font-size:12px;
    box-shadow:0 4px 12px #0001;
}
.map-label span {
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-top:3px;
}
.preview-progress {
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:11px;
    margin-top:17px;
    border-top:2px solid var(--blue);
    padding-top:10px;
    color:var(--muted);
}
.preview-main small,.guest-preview small {
    font-size:10px;
    color:var(--muted);
}
.page-hero {
    max-width:1100px;
}
.page-hero h1 {
    font-size:48px;
}
.feature-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-bottom:30px;
}
.feature-card {
    border:1px solid var(--line);
    border-radius:12px;
    padding:25px;
}
.feature-card h3 {
    margin:15px 0 0;
}
.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
}
.contact-form label {
    display:block;
    margin-bottom:17px;
    font-weight:600;
}
.contact-form input,.contact-form textarea {
    display:block;
    width:100%;
    padding:12px;
    margin-top:5px;
    border:1px solid #aebed4;
    border-radius:6px;
    background:white;
}
.honeypot {
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}
.preview-banner {
    padding:12px;
    background:#071735;
    color:white;
    text-align:center;
}
.preview-banner a {
    text-decoration:underline;
}
.skip-link {
    position:absolute;
    left:10px;
    top:-60px;
    background:white;
    padding:12px;
    z-index:20;
}
.skip-link:focus {
    top:10px;
}
.eyebrow {
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
    color:var(--blue);
}
@media(max-width:1150px) {
    .container {
        padding:0 28px;
    }
    .desktop-nav {
        gap:14px;
        font-size:13px;
    }
    .header-row {
        gap:18px;
    }
    .brand img {
        max-width:150px;
    }
    .header-actions .button {
        padding:9px 12px;
    }
    .split {
        gap:28px;
    }
    .role-grid {
        gap:12px;
    }
    .role-card {
        padding:18px 14px;
    }
    .journey li {
        min-width:120px;
    }
}
@media(max-width:950px) {
    .desktop-nav {
        display:none;
    }
    .mobile-menu {
        display:block;
        margin-left:auto;
        position:relative;
    }
    .mobile-menu summary {
        padding:12px;
        cursor:pointer;
    }
    .mobile-menu nav {
        position:absolute;
        right:0;
        top:44px;
        background:white;
        width:250px;
        border:1px solid var(--line);
        box-shadow:0 12px 30px #07173520;
        border-radius:9px;
        padding:10px;
        z-index:10;
    }
    .mobile-menu a {
        display:block;
        padding:11px;
    }
    .role-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .split {
        grid-template-columns:1fr 1fr;
    }
    .product-preview {
        grid-template-columns:70px 1fr;
    }
    .product-preview aside {
        font-size:8px;
    }
    .preview-main {
        padding:16px 10px;
    }
    .preview-metrics {
        gap:4px;
    }
    .preview-metrics>div {
        padding:9px 5px;
    }
    .preview-metrics span {
        font-size:10px;
    }
    .feature-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:650px) {
    .container {
        padding:0 20px;
    }
    .header-row {
        gap:8px;
        min-height:72px;
    }
    .brand img {
        max-width:140px;
    }
    .header-actions {
        display:none;
    }
    .hero {
        padding:32px 0;
    }
    .split,.guest-section .split,.contact-grid {
        grid-template-columns:1fr;
        gap:30px;
    }
    h1 {
        font-size:39px;
        letter-spacing:-1.3px;
    }
    .subtitle {
        font-size:18px;
    }
    .section {
        padding:30px 0;
    }
    .section-subtitle {
        font-size:16px;
    }
    .role-grid,.feature-grid {
        grid-template-columns:1fr;
    }
    .role-card {
        padding:23px;
    }
    .product-preview {
        grid-template-columns:85px 1fr;
        transform:none;
    }
    .preview-main {
        padding:18px 12px;
    }
    .journey li {
        min-width:125px;
    }
    .guest-preview {
        padding:20px;
    }
    .buttons .button {
        flex:1;
        min-width:160px;
    }
    .benefits {
        display:block;
    }
    .site-footer>.container {
        display:block;
    }
    .site-footer nav {
        margin:22px 0;
        gap:14px;
    }
    .site-footer small {
        display:block;
    }
    .page-hero h1 {
        font-size:38px;
    }
}
.final-cta {
    position:relative;
    overflow:hidden;
}
.final-cta>.container {
    position:relative;
    z-index:1;
}
.cta-background {
    position:absolute;
    right:0;
    top:0;
    width:60%;
    height:100%;
    object-fit:cover;
    mask-image:linear-gradient(to right,transparent,#000 70%);
    opacity:.7;
}
.final-cta:has(.cta-background)>.container {
    padding-right:35%;
}
@media(max-width:650px) {
    .cta-background {
        width:100%;
        opacity:.15;
    }
    .final-cta:has(.cta-background)>.container {
        padding-right:20px;
    }
}
.feature-card .body-copy {
    font-size:15px;
    margin:12px 0 0;
}
.journey-steps {
    counter-reset:step;
}
.journey-steps .feature-card {
    position:relative;
}
.journey-steps .feature-card:before {
    counter-increment:step;
    content:counter(step);
    position:absolute;
    right:22px;
    top:22px;
    color:#bacceb;
    font-size:30px;
    font-weight:800;
}
.pricing-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
.pricing-card h2 { font-size: 26px; text-align: left; }
.pricing-card .pricing-amount { font-size: 36px; font-weight: 800; color: var(--blue, #1764c0); }
.pricing-amount small { font-size: 16px; }
.pricing-card .button { margin-top: auto; align-self: flex-start; }