:root {
    --brand: #026273;
    --ink: #0f172a;
    --muted: #6b7280;
    --border: #e5e7eb;
    --bg: #fff;
    --alt: #fafafa;
    --header-h: 20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid var(--border);font-weight:650}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-outline{background:#fff}
.micro{font-size:12px}.tiny{font-size:11px}
.lead{font-size:18px;line-height:1.55}
.list{margin:0;padding-left:18px}

.site-header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(6px);border-bottom:1px solid var(--border);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;font-size:22px;color:var(--brand)}
.nav{display:flex;gap:16px;align-items:center;font-size:14px}

.hero{padding:20px 0}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
.hero-copy h1{font-size:42px;margin:.2em 0}
.hero-copy p{color:var(--muted);max-width:62ch}
.hero-ctas{display:flex;gap:12px;margin:14px 0}
.device-card{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center}
.phone-mock {
    width: 220px;
    height: 440px;
    border: 16px solid #111;
    border-bottom-width: 20px;
    border-radius: 32px;
    background: #000;
    overflow: hidden; /* keeps it inside the rounded edges */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .phone-mock img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* make the whole screenshot fit inside without cropping */
        border-radius: 14px;
    }
.section{padding:48px 0}
.section.alt{background:var(--alt)}
.section h2{margin:0 0 14px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.grid{display:grid;gap:16px}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.step .icon{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:8px}
.cta{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}
.cta-inline{display:flex;gap:10px;margin-top:12px}
.muted{color:var(--muted)}

.foot{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:10px}
.section[id],
[id].section {
    scroll-margin-top: calc(var(--header-h) + 12px);
}
.br-mobile {
    display: none;
}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .cards-2,.cards-3{grid-template-columns:1fr}
    .br-mobile {
        display: block !important; /* acts like a <br> */
        height: 0;
    }
}
/* ---- Burger button ---- */
.nav-toggle {
    display: none; /* hidden on desktop */
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .nav-toggle .bar {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--ink);
    }

    .nav-toggle:focus {
        outline: 2px solid var(--brand);
        outline-offset: 2px
    }

/* Desktop nav stays inline (you already have .nav defaults) */

/* ---- Mobile layout ---- */
@media (max-width: 860px) {
    .nav-toggle {
        display: inline-flex;
        z-index: 2000;
    }
    /* show burger */
    .nav {
        position: fixed;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--border);
        transform: translateY(-120%);
        transition: transform .25s ease;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px 16px;
        z-index: 60;
    }

    .nav-toggle img {
        width: 24px; /* or whatever size fits */
        height: auto;
        display: block;
        z-index: 1999;
    }


    .nav.open {
        transform: translateY(0);
        padding: 240px 36px 36px 36px;
    }
        /* slide down */
        .nav a {
            display: block;
            padding: 10px 8px
        }
        /* tappable rows */
        .nav .btn {
            width: 100%;
            text-align: center
        }
    /* Join not cut */
    .header-inner {
        gap: 10px
    }
    /* room for burger */
    .br-mobile {
        display: block; /* acts like a <br> */
        height: 0;
    }
}