:root {
    --navy:#0b2e65;
    --deep:#071e44;
    --blue:#1766bd;
    --green:#64d987;
    --ink:#142743;
    --muted:#52647d;
    --line:#dce6f0;
    --pale:#f4f8fd;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:'DM Sans',Arial,sans-serif;
    color:var(--ink);
    background:white;
    font-size:16px;
    line-height:1.6;
}

h1,h2,h3,p {
    margin-top:0;
}

h1,h2,h3 {
    font-family:Manrope,Arial,sans-serif;
    line-height:1.12;
    letter-spacing:-.04em;
}

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

button {
    font:inherit;
}

img {
    max-width:100%;
}

.container {
    width:min(1160px,calc(100% - 48px));
    margin:auto;
}

.header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid #e5edf5;
}

.nav {
    min-height:76px;
    display:flex;
    align-items:center;
    gap:30px;
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font:800 20px Manrope,sans-serif;
    letter-spacing:-.05em;
    color:var(--navy);
    white-space:nowrap;
}

.mark {
    width:35px;
    height:35px;
    border-radius:10px;
    background:var(--navy);
    display:grid;
    place-items:center;
    color:var(--green);
    font:800 18px Manrope;
}

.nav-links {
    display:flex;
    align-items:center;
    gap:30px;
    margin-left:auto;
    font-weight:700;
    font-size:14px;
    color:#354b66;
}

.nav-links a:hover,.footer a:hover {
    color:var(--blue);
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:11px 22px;
    border-radius:12px;
    font-weight:800;
    font-size:14px;
    transition:transform .2s,background .2s;
    white-space:nowrap;
}

.button:hover {
    transform:translateY(-2px);
}

.button-primary {
    background:var(--green);
    color:var(--deep);
}

.button-dark {
    background:var(--navy);
    color:white;
}

.button-outline {
    border:1px solid #b9cbe1;
    color:var(--navy);
    background:white;
}

.nav-cta {
    margin-left:4px;
}

.menu-button {
    display:none;
    border:0;
    background:none;
    color:var(--navy);
    font-size:26px;
    margin-left:auto;
}

.hero {
    overflow:hidden;
    background:radial-gradient(circle at 82% 29%,#1d67ad 0,transparent 33%),linear-gradient(120deg,#071f49 0%,#0d3977 65%,#0a4a86 100%);
    color:#fff;
}

.hero-inner {
    min-height:610px;
    display:grid;
    grid-template-columns:1.07fr .93fr;
    align-items:center;
    gap:50px;
    padding:72px 0 64px;
}

.eyebrow {
    display:inline-block;
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:12px;
    font-weight:800;
    color:var(--green);
    margin-bottom:22px;
}

.hero h1 {
    font-size:clamp(43px,5.2vw,70px);
    max-width:680px;
    margin-bottom:24px;
}

.hero h1 span {
    color:var(--green);
}

.hero p {
    font-size:19px;
    max-width:570px;
    color:#dce9fa;
    margin-bottom:32px;
}

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

.hero .button-outline {
    background:transparent;
    border-color:#789ac4;
    color:#fff;
}

.hero-note {
    font-size:13px;
    color:#c6d9ee;
    margin:22px 0 0;
}

.phone-wrap {
    height:500px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.orbit {
    position:absolute;
    width:490px;
    height:490px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
}

.orbit:before {
    content:'';
    position:absolute;
    inset:55px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
}

.phone {
    width:267px;
    height:486px;
    border:8px solid #172746;
    border-radius:38px;
    background:#f5f8fc;
    box-shadow:0 30px 65px #0413329c;
    position:relative;
    transform:rotate(5deg);
    overflow:hidden;
    color:var(--ink);
}

.phone:before {
    content:'';
    position:absolute;
    top:0;
    left:75px;
    width:102px;
    height:18px;
    border-radius:0 0 15px 15px;
    background:#172746;
    z-index:3;
}

.phone-head {
    height:116px;
    background:linear-gradient(130deg,#0b3069,#1762b2);
    color:#fff;
    padding:31px 17px 14px;
}

.phone-title {
    font:800 17px Manrope;
}

.phone-small {
    font-size:10px;
    opacity:.8;
}

.phone-search {
    margin:12px 12px 0;
    padding:10px 12px;
    background:white;
    border-radius:9px;
    color:#8190a3;
    font-size:11px;
    box-shadow:0 2px 10px #102d5914;
}

.phone-body {
    padding:13px;
}

.phone-label {
    font:800 11px Manrope;
    margin:2px 0 9px;
}

.listing {
    display:flex;
    gap:9px;
    background:white;
    border-radius:11px;
    padding:9px;
    margin-bottom:8px;
    box-shadow:0 2px 13px #11356713;
}

.listing-icon {
    width:37px;
    height:37px;
    flex:none;
    border-radius:9px;
    display:grid;
    place-items:center;
    font-size:17px;
    background:#eaf5ff;
}

.listing:nth-of-type(3) .listing-icon {
    background:#e8f8ed;
}

.listing:nth-of-type(4) .listing-icon {
    background:#f5edff;
}

.listing b {
    display:block;
    font-size:10px;
}

.listing span {
    display:block;
    font-size:9px;
    color:#687a90;
}

.listing i {
    display:block;
    width:70px;
    height:4px;
    background:#e5edf5;
    border-radius:4px;
    margin-top:6px;
}

.phone-bottom {
    position:absolute;
    bottom:0;
    width:100%;
    background:#fff;
    border-top:1px solid #e9edf5;
    padding:12px 15px;
    color:#7b8ba1;
    font-size:12px;
    display:flex;
    justify-content:space-around;
}

.float-card {
    position:absolute;
    background:#fff;
    color:var(--ink);
    padding:12px 16px;
    border-radius:14px;
    box-shadow:0 18px 38px #031b4180;
    font-size:12px;
    font-weight:800;
    z-index:2;
    display:flex;
    align-items:center;
    gap:8px;
}

.float-card .bubble {
    width:28px;
    height:28px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#dff9e7;
    color:#09663e;
}

.float-one {
    top:81px;
    left:5px;
    transform:rotate(-7deg);
}

.float-two {
    right:-3px;
    bottom:74px;
    transform:rotate(6deg);
}

.section {
    padding:92px 0;
}

.section-heading {
    max-width:680px;
    margin-bottom:38px;
}

.section-heading .eyebrow {
    color:var(--blue);
    margin-bottom:14px;
}

.section h2 {
    font-size:clamp(32px,3.5vw,47px);
    margin-bottom:16px;
    color:var(--deep);
}

.lead {
    font-size:18px;
    color:var(--muted);
}

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

.benefit {
    border:1px solid var(--line);
    border-radius:19px;
    padding:28px;
    min-height:225px;
    background:white;
}

.benefit-icon {
    height:45px;
    width:45px;
    border-radius:12px;
    background:#eaf4ff;
    display:grid;
    place-items:center;
    color:var(--blue);
    margin-bottom:25px;
}

.benefit svg {
    width:24px;
    height:24px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.benefit h3 {
    font-size:19px;
    margin-bottom:10px;
}

.benefit p {
    color:var(--muted);
    margin:0;
    font-size:15px;
}

.split {
    background:var(--pale);
}

.split-inner {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:75px;
    align-items:center;
}

.feature-panel {
    background:#fff;
    border-radius:24px;
    padding:32px;
    box-shadow:0 16px 55px #0b2e6515;
    border:1px solid #e4edf5;
}

.panel-top {
    display:flex;
    align-items:center;
    gap:11px;
    padding-bottom:20px;
    border-bottom:1px solid var(--line);
    font-weight:800;
    color:var(--navy);
}

.panel-logo {
    background:#e8f8ee;
    color:#168450;
    border-radius:10px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
}

.panel-row {
    display:flex;
    gap:15px;
    padding:18px 0;
    border-bottom:1px solid #e9eef5;
}

.panel-row:last-child {
    border:0;
    padding-bottom:0;
}

.number {
    font-weight:800;
    color:var(--blue);
    font-size:13px;
}

.panel-row strong {
    display:block;
    font-size:15px;
}

.panel-row span {
    font-size:13px;
    color:var(--muted);
}

.check-list {
    padding:0;
    margin:27px 0;
    list-style:none;
}

.check-list li {
    display:flex;
    gap:12px;
    margin:12px 0;
    color:#3c516d;
}

.check-list li:before {
    content:'✓';
    color:#087a43;
    font-weight:900;
}

.business-band {
    background:var(--deep);
    color:white;
    position:relative;
    overflow:hidden;
}

.business-band:before {
    content:'';
    position:absolute;
    width:520px;
    height:520px;
    border:1px solid #ffffff20;
    border-radius:50%;
    right:-130px;
    top:-210px;
}

.business-band h2 {
    color:white;
}

.business-band .lead {
    color:#cedef2;
}

.business-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:17px;
    margin-top:35px;
}

.business-item {
    padding:25px;
    border:1px solid #ffffff32;
    border-radius:17px;
    background:#ffffff0b;
}

.business-item b {
    display:block;
    color:var(--green);
    font:800 26px Manrope;
    margin-bottom:25px;
}

.business-item h3 {
    font-size:17px;
    margin-bottom:8px;
}

.business-item p {
    font-size:14px;
    color:#c9d9ef;
    margin:0;
}

.steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.step {
    padding-top:24px;
    border-top:3px solid var(--green);
}

.step span {
    font:800 14px Manrope;
    color:var(--blue);
}

.step h3 {
    font-size:21px;
    margin:18px 0 10px;
}

.step p {
    color:var(--muted);
    font-size:15px;
}

.cta {
    background:linear-gradient(130deg,#e8f5ff,#eaf9ed);
    padding:76px 0;
}

.cta-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.cta h2 {
    margin-bottom:12px;
    max-width:570px;
}

.cta p {
    color:var(--muted);
    margin:0;
    max-width:600px;
}

.cta-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.footer {
    background:#071a3b;
    color:#dce8f7;
    padding:50px 0 30px;
}

.footer-inner {
    display:flex;
    justify-content:space-between;
    gap:30px;
}

.footer .brand {
    color:white;
}

.footer p {
    color:#a8bdd6;
    font-size:14px;
    max-width:440px;
}

.footer-links {
    display:flex;
    gap:22px;
    align-items:start;
    font-size:14px;
}

.footer-end {
    border-top:1px solid #ffffff20;
    margin-top:38px;
    padding-top:22px;
    color:#95adc9;
    font-size:13px;
}

*:focus-visible {
    outline:3px solid #4aa4ff;
    outline-offset:3px;
}

@media(max-width:900px) {
    .hero-inner {
        grid-template-columns:1fr;
        gap:0;
        padding:64px 0 40px;
    }

    .hero-copy {
        max-width:700px;
    }

    .phone-wrap {
        height:480px;
    }

    .split-inner {
        gap:35px;
    }

    .business-grid {
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:680px) {
    .container {
        width:min(100% - 36px,1160px);
    }

    .nav {
        min-height:66px;
    }

    .brand {
        font-size:18px;
    }

    .nav-cta {
        display:none;
    }

    .menu-button {
        display:block;
    }

    .nav-links {
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:66px;
        background:white;
        box-shadow:0 20px 25px #14274320;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px 18px 20px;
    }

    .nav-links.open {
        display:flex;
    }

    .nav-links a {
        padding:12px;
    }

    .hero-inner {
        padding:55px 0 15px;
    }

    .hero h1 {
        font-size:clamp(40px,10vw,55px);
    }

    .hero p {
        font-size:17px;
    }

    .phone-wrap {
        height:445px;
    }

    .phone {
        transform:scale(.85) rotate(5deg);
    }

    .orbit {
        width:350px;
        height:350px;
    }

    .float-one {
        left:-4px;
        top:60px;
    }

    .float-two {
        right:0;
        bottom:50px;
    }

    .section {
        padding:66px 0;
    }

    .benefit-grid,.split-inner,.steps {
        grid-template-columns:1fr;
    }

    .benefit {
        min-height:0;
    }

    .split-inner {
        gap:28px;
    }

    .business-grid {
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .business-item {
        padding:17px;
    }

    .business-item b {
        margin-bottom:16px;
    }

    .cta-inner,.footer-inner {
        display:block;
    }

    .cta-actions {
        justify-content:flex-start;
        margin-top:24px;
    }

    .footer-links {
        margin-top:24px;
        flex-wrap:wrap;
    }

    .section h2 {
        font-size:34px;
    }

}

@media(max-width:390px) {
    .business-grid {
        grid-template-columns:1fr;
    }

    .hero-actions .button,.cta-actions .button {
        width:100%;
    }

    .float-card {
        font-size:10px;
        padding:9px;
    }

    .phone-wrap {
        height:400px;
    }

    .phone {
        transform:scale(.77) rotate(5deg);
    }

}

.feature-nav {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px;
}

.feature-nav a {
    display:block;
    padding:12px 17px;
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--navy);
    background:white;
    font-weight:700;
}

.feature-nav a:hover {
    background:#eaf4ff;
}

.page-hero {
    padding:64px 0 48px;
    background:var(--deep);
    color:white;
}

.page-hero h1 {
    font-size:clamp(36px,5vw,58px);
    max-width:850px;
}

.page-hero p {
    max-width:760px;
    font-size:19px;
    color:#dce9fa;
}

.breadcrumb {
    font-size:14px;
    margin-bottom:28px;
    color:#c9d9ef;
}

.page-content {
    max-width:850px;
}

.page-content h2 {
    font-size:30px;
    margin-top:42px;
}

.page-content h3 {
    font-size:21px;
    margin-top:28px;
}

.page-content p,.page-content li {
    font-size:17px;
    color:var(--muted);
}

.page-content li {
    margin:12px 0;
}

.page-content ol {
    padding-left:24px;
}

.note {
    padding:22px;
    border-left:4px solid var(--green);
    background:var(--pale);
    margin:28px 0;
}

.section[id] {
    scroll-margin-top:90px;
}

.footer-links {
    flex-wrap:wrap;
}

.nav-links {
    gap:18px;
}

@media(max-width:900px) {
    .nav {
        gap:12px;
    }

    .nav-links {
        gap:12px;
    }

}

@media(max-width:680px) {
    .page-hero {
        padding:40px 0;
    }

    .page-content h2 {
        font-size:27px;
    }

}

/* Navigation and branding */
.header {
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--line);
}

.nav {
    min-height:80px;
    gap:20px;
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.brand-logo {
    display:block;
    width:48px;
    height:48px;
    object-fit:contain;
}

.brand-logo[hidden] {
    display:none;
}

.brand-name {
    font:800 20px Manrope,Arial,sans-serif;
    letter-spacing:-.035em;
    white-space:nowrap;
}

.nav-links {
    gap:18px;
}

.nav-group {
    position:relative;
}

.submenu-toggle {
    display:flex;
    align-items:center;
    gap:7px;
    padding:12px 0;
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    cursor:pointer;
}

.submenu {
    position:absolute;
    top:100%;
    left:0;
    width:260px;
    padding:8px;
    background:white;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 14px 40px #071e4420;
    color:var(--ink);
}

.submenu[hidden] {
    display:none;
}

.submenu a {
    display:block;
    padding:11px 12px;
    border-radius:8px;
    white-space:normal;
}

.submenu a:hover,.submenu a[aria-current="page"] {
    background:var(--pale);
    color:var(--blue);
}

/* Complete supplied app preview, without cropping */
.hero-inner {
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:48px;
}

.hero-copy {
    min-width:0;
}

.hero h1 {
    font-size:clamp(42px,4.6vw,64px);
}

.app-preview {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
}

.app-preview-frame {
    width:100%;
    height:auto;
    padding:8px;
    background:#ffffff12;
    border:1px solid #ffffff30;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 24px 60px #071e4440;
}

.app-preview-frame img {
    position:static;
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:contain;
    border-radius:14px;
    transform:none;
}

@media(max-width:1050px) {
    .nav {
        min-height:72px;
        flex-wrap:wrap;
        gap:12px;
    }

    .menu-button {
        display:block;
    }

    .nav-cta {
        display:none;
    }

    .nav-links {
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        max-height:calc(100dvh - 72px);
        overflow:auto;
        background:white;
        padding:14px 24px;
        box-shadow:0 16px 30px #071e4420;
        flex-direction:column;
        align-items:stretch;
        gap:0;
    }

    .nav-links.open {
        display:flex;
    }

    .nav-links>a,.submenu-toggle {
        width:100%;
        padding:14px 8px;
        text-align:left;
        justify-content:space-between;
    }

    .submenu {
        position:static;
        width:100%;
        box-shadow:none;
        margin-bottom:8px;
        background:var(--pale);
    }

}

@media(max-width:900px) {
    .hero-inner {
        grid-template-columns:1fr;
        gap:36px;
    }

    .app-preview-frame {
        max-width:560px;
    }

}

@media(max-width:680px) {
    .brand-name {
        font-size:18px;
    }

    .brand-logo {
        width:42px;
        height:42px;
    }

    .hero-inner {
        padding:44px 0;
    }

    .hero h1 {
        font-size:clamp(38px,9vw,50px);
    }

}


/* Native dropdowns: submenu pages work without JavaScript. */
.submenu-toggle {
    list-style: none;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
}
.submenu-toggle::-webkit-details-marker { display: none; }
.nav-group:not([open]) > .submenu { display: none; }
.nav-group[open] > .submenu { display: block; }
@media (hover: hover) and (min-width: 1051px) {
    .nav-group:hover > .submenu { display: block; }
}
/* Frame the phone in the supplied browser capture. */
.app-preview-frame {
    position: relative;
    width: min(100%, 270px);
    aspect-ratio: 478 / 940;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 30px;
    overflow: hidden;
    background: transparent;
}
.app-preview-frame img {
    position: absolute;
    width: 412.343%;
    max-width: none;
    height: auto;
    left: -197.699%;
    top: -34.681%;
    border-radius: 0;
}
@media (max-width: 680px) {
    .app-preview-frame { width: min(100%, 240px); }
}

/* Final native dropdown layout */
.header { overflow: visible; z-index: 100; }
.nav-group { position: relative; flex-shrink: 0; }
.nav-group > summary {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 0; list-style: none; cursor: pointer;
    white-space: nowrap; font: inherit; font-weight: 700;
    color: var(--ink);
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::marker { content: ''; }
.nav-group > .submenu {
    position: absolute; top: 100%; left: 0; z-index: 110;
    display: none; width: 260px; padding: 8px;
    background: white; border: 1px solid var(--line);
    border-radius: 14px; box-shadow: 0 14px 40px #071e442e;
}
.nav-group[open] > .submenu { display: block; }
.nav-group > .submenu a {
    display: block; padding: 12px; border-radius: 8px;
    line-height: 1.4; white-space: normal; color: var(--navy);
}
.nav-group > .submenu a:hover { background: var(--pale); }
/* Current main-menu.png is a portrait screenshot: no crop offsets. */
.app-preview-frame {
    width: min(100%, 270px); height: auto; aspect-ratio: auto;
    padding: 7px; border: 1px solid #ffffff40; border-radius: 30px;
    background: var(--deep); overflow: hidden;
}
.app-preview-frame img {
    position: static; display: block; width: 100%; max-width: 100%;
    height: auto; left: auto; top: auto; object-fit: contain;
    border-radius: 23px;
}
@media (max-width: 1050px) {
    .nav-group > summary { justify-content: space-between; padding: 14px 8px; }
    .nav-group > .submenu {
        position: static; width: 100%; margin-bottom: 8px;
        background: var(--pale); box-shadow: none;
    }
}

            /* Privacy-only layout; colours and typography use css/styles.css. */
            .privacy-content { margin: 0 auto; }
            .privacy-contents {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px 24px;
                margin: 28px 0 40px;
                padding: 24px;
                border: 1px solid var(--line);
                border-radius: 16px;
                background: var(--pale);
            }
            .privacy-contents a { color: var(--navy); font-weight: 700; }
            .privacy-contents a:hover { color: var(--blue); text-decoration: underline; }
            .privacy-content p a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
            .privacy-content h2[id] { scroll-margin-top: 110px; }
            .privacy-content ul { padding-left: 24px; }
            @media (max-width: 640px) {
                .privacy-contents { grid-template-columns: 1fr; padding: 20px; }
            }