/* ===========================================================================
   iVPN — the public site.
   ---------------------------------------------------------------------------
   Loaded on every page in this application, including the admin console, so
   every rule here is scoped under `.site`. The console is a light, dense,
   utilitarian surface and this is a dark marketing one; they share a document
   head and must not share a single declaration.

   No external fonts, no icon font, no framework. Icons are inline SVG in the
   components, diagrams are inline SVG, and the only animation is decorative
   and switched off under prefers-reduced-motion.
   =========================================================================== */

.site {
    --ink: #e8ecf6;
    --ink-dim: #a6b0c8;
    --ink-faint: #7c88a3;
    --bg: #070b16;
    --panel: rgba(255, 255, 255, .035);
    --panel-strong: rgba(255, 255, 255, .06);
    --edge: rgba(255, 255, 255, .09);
    --edge-strong: rgba(255, 255, 255, .16);

    --cyan: #38bdf8;
    --indigo: #818cf8;
    --violet: #c084fc;
    --mint: #34d399;
    --amber: #fbbf24;
    --rose: #fb7185;

    --grad: linear-gradient(120deg, var(--cyan), var(--indigo) 46%, var(--violet));
    --radius: 16px;
    --measure: 1160px;

    position: relative;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* The page's own ground. Without this the console's light body colour shows
   through on overscroll and behind a page shorter than the viewport. */
body:has(.site) { background: #070b16; }

/* ---------------------------------------------------------------------------
   The backdrop: three fixed radial washes and a faint grid. Fixed rather than
   absolute so it does not stretch a long page into a gradient nobody can see.
   --------------------------------------------------------------------------- */
.site::before,
.site::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.site::before {
    background:
        radial-gradient(60rem 40rem at 12% -10%, rgba(56, 189, 248, .16), transparent 60%),
        radial-gradient(50rem 35rem at 88% 4%, rgba(192, 132, 252, .14), transparent 60%),
        radial-gradient(70rem 50rem at 50% 105%, rgba(129, 140, 248, .10), transparent 65%);
}

.site::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(120rem 70rem at 50% 0%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(120rem 70rem at 50% 0%, #000 20%, transparent 75%);
}

.site > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */
.site h1, .site h2, .site h3, .site h4 {
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
    font-weight: 650;
}

.site h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
.site h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); }
.site h3 { font-size: 1.12rem; letter-spacing: -.01em; }
.site h4 { font-size: .98rem; }
.site p { margin: 0 0 1rem; color: var(--ink-dim); }
.site strong { color: var(--ink); font-weight: 620; }
.site a { color: var(--cyan); text-decoration: none; }
.site a:hover { text-decoration: underline; }

.site .lead {
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
    color: var(--ink-dim);
    max-width: 62ch;
}

.site .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font: 600 .72rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: .9rem;
}
.site .eyebrow::before {
    content: "";
    width: 1.6rem; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan));
}

.site .grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.site code, .site .mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .86em;
}
.site code {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--edge);
    border-radius: 5px;
    padding: .1em .4em;
    color: #d9e2ff;
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */
/* The content column. Named `wrap` and not `shell`, which console.css has
   already claimed for the admin sidebar's full-height flex container — a name
   collision there centres this site's header in the middle of the viewport. */
.site .wrap { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }

/* console.css styles the bare <main> element for the admin console: a flex
   child with a 1100px cap and its own padding. None of that belongs here. */
.site main { flex: initial; padding: 0; max-width: none; width: 100%; }
.site section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.site section.tight { padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.site .section-head { max-width: 66ch; margin-bottom: 2.4rem; }
.site .section-head.center { margin-inline: auto; text-align: center; }
.site .section-head.center .eyebrow { justify-content: center; }

.site .rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--edge-strong), transparent);
    border: 0;
    margin: 0;
}

/* Explicit column counts rather than auto-fit. auto-fit packs in as many
   columns as will fit, so a `three` grid silently becomes four at a wide
   viewport and one inside a half-width .split column — the class stops meaning
   what it says. minmax(0, 1fr) rather than 1fr so a long unbroken string in a
   cell cannot push the track wider than its share. */
.site .grid { display: grid; gap: 1.1rem; }
.site .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
    .site .grid.three, .site .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .site .grid.two, .site .grid.three, .site .grid.four { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(7, 11, 22, .72);
    border-bottom: 1px solid var(--edge);
}

.site-header .bar {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-height: 66px;
}

.site .logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -.02em;
    color: #fff;
    margin-right: auto;
}
.site .logo:hover { text-decoration: none; }
.site .logo .mark {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--grad);
    box-shadow: 0 6px 18px -8px rgba(129, 140, 248, .9);
}
.site .logo .mark svg { width: 17px; height: 17px; display: block; }

.site-nav { display: flex; align-items: center; gap: .2rem; }
.site-nav a {
    color: var(--ink-dim);
    padding: .45rem .68rem;
    border-radius: 8px;
    font-size: .92rem;
    font-weight: 500;
    white-space: nowrap;
}
.site-nav a:hover { color: #fff; background: var(--panel-strong); text-decoration: none; }
.site-nav a.active { color: #fff; }
.site-nav a.active::after {
    content: "";
    display: block;
    height: 2px;
    margin: .3rem .2rem -.35rem;
    border-radius: 2px;
    background: var(--grad);
}

.site .header-actions { display: flex; align-items: center; gap: .55rem; }

/* Links that exist only inside the collapsed menu panel, where the header's
   own buttons have been hidden for width. */
.site-nav .on-menu { display: none; }

/* CSS-only mobile menu. These pages are statically rendered and a public site
   should not need a live circuit to open its own navigation. */
.site .menu-toggle, .site .menu-button { display: none; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.site .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .62rem 1.15rem;
    border-radius: 10px;
    border: 1px solid var(--edge-strong);
    background: var(--panel-strong);
    color: var(--ink);
    font: 600 .92rem/1.2 inherit;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.site .btn:hover { background: rgba(255, 255, 255, .1); text-decoration: none; color: #fff; }
.site .btn:active { transform: translateY(1px); }

.site .btn.primary {
    background: var(--grad);
    border-color: transparent;
    color: #0a0f1e;
    font-weight: 700;
    box-shadow: 0 10px 30px -14px rgba(129, 140, 248, .95);
}
.site .btn.primary:hover { filter: brightness(1.08); color: #0a0f1e; }

.site .btn.ghost { background: transparent; }
.site .btn.big { padding: .8rem 1.5rem; font-size: 1rem; }
.site .btn svg { width: 16px; height: 16px; }

.site .btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */
.site .card {
    position: relative;
    /* console.css's .card sets a 150px floor that would stop these columns
       shrinking on a phone. */
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    padding: 1.4rem 1.45rem;
    overflow: hidden;
}
.site .card > :last-child { margin-bottom: 0; }
.site .card p { font-size: .95rem; }

.site a.card { color: inherit; display: block; transition: border-color .18s ease, transform .18s ease; }
.site a.card:hover { border-color: var(--edge-strong); transform: translateY(-2px); text-decoration: none; }

/* The hairline of colour along the top edge that makes a wall of cards read as
   a set rather than a list. */
.site .card.lit::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--grad);
    opacity: .7;
}

.site .card .icon {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(56, 189, 248, .12);
    border: 1px solid rgba(56, 189, 248, .22);
    margin-bottom: .95rem;
    color: var(--cyan);
}
.site .card .icon svg { width: 19px; height: 19px; }
.site .card .icon.violet { background: rgba(192, 132, 252, .12); border-color: rgba(192, 132, 252, .24); color: var(--violet); }
.site .card .icon.mint { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .24); color: var(--mint); }
.site .card .icon.amber { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .24); color: var(--amber); }
.site .card .icon.indigo { background: rgba(129, 140, 248, .14); border-color: rgba(129, 140, 248, .26); color: var(--indigo); }

.site .card h3 { margin-bottom: .45rem; }
.site .card .more {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .88rem; font-weight: 600; color: var(--cyan); margin-top: .8rem;
}
.site .card .more svg { width: 15px; height: 15px; flex: none; }
.site a.card:hover .more { gap: .55rem; }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.site .hero { padding: clamp(3.2rem, 7vw, 5.6rem) 0 clamp(2.6rem, 5vw, 4rem); }
.site .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.6rem, 4vw, 3.4rem);
    align-items: center;
}
.site .hero h1 { margin-bottom: 1.1rem; }
.site .hero .lead { font-size: clamp(1.05rem, 1.7vw, 1.24rem); }

.site .badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .32rem .8rem .32rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--edge-strong);
    background: var(--panel-strong);
    font-size: .8rem;
    color: var(--ink-dim);
    margin-bottom: 1.3rem;
}
.site .badge .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
}

/* ---------------------------------------------------------------------------
   Stat strip
   --------------------------------------------------------------------------- */
.site .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--edge);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    overflow: hidden;
}
.site .stats div { background: #0a0f1d; padding: 1.15rem 1.25rem; }
.site .stats .n {
    font: 700 1.5rem/1.1 ui-monospace, "Cascadia Mono", Consolas, monospace;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.site .stats .k { font-size: .8rem; color: var(--ink-faint); margin-top: .3rem; }

/* ---------------------------------------------------------------------------
   Numbered steps
   --------------------------------------------------------------------------- */
.site .steps { counter-reset: step; display: grid; gap: 1px; background: var(--edge);
    border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; }
.site .steps .step { background: #0a0f1d; padding: 1.35rem 1.5rem 1.35rem 4.2rem; position: relative; }
.site .steps .step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 1.35rem; top: 1.3rem;
    width: 1.9rem; height: 1.9rem;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--grad);
    color: #0a0f1e;
    font: 700 .85rem/1 ui-monospace, Consolas, monospace;
}
.site .steps .step h3 { margin-bottom: .3rem; font-size: 1.02rem; }
.site .steps .step p { margin: 0; font-size: .94rem; }
.site .steps .step .who {
    font: 600 .7rem/1 ui-monospace, Consolas, monospace;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint); display: block; margin-bottom: .4rem;
}

/* ---------------------------------------------------------------------------
   Feature rows — an alternating text/figure block used on the detail pages.
   --------------------------------------------------------------------------- */
.site .split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: clamp(1.4rem, 4vw, 3rem);
    align-items: center;
}
.site .split + .split { margin-top: clamp(2.6rem, 6vw, 4.2rem); }
.site .split.flip > :first-child { order: 2; }

/* ---------------------------------------------------------------------------
   Spec list — a label/value table that stays readable at phone width.
   --------------------------------------------------------------------------- */
.site .spec { border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; }
.site .spec > div {
    display: grid;
    grid-template-columns: minmax(160px, 24%) 1fr;
    gap: 1rem;
    padding: .85rem 1.2rem;
    border-bottom: 1px solid var(--edge);
    background: var(--panel);
    font-size: .93rem;
}
.site .spec > div:last-child { border-bottom: 0; }
.site .spec .k { color: var(--ink-faint); font-weight: 600; margin: 0; }
.site .spec .v { margin: 0; color: var(--ink-dim); }
.site .spec .v strong { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Callouts
   --------------------------------------------------------------------------- */
.site .note {
    color: var(--ink-dim);
    font-size: .95rem;
    border: 1px solid var(--edge);
    border-left: 3px solid var(--cyan);
    background: rgba(56, 189, 248, .06);
    border-radius: 12px;
    padding: 1.05rem 1.25rem;
    margin: 1.5rem 0;
}
.site .note > :last-child { margin-bottom: 0; }
.site .note.warn { border-left-color: var(--amber); background: rgba(251, 191, 36, .06); }
.site .note.violet { border-left-color: var(--violet); background: rgba(192, 132, 252, .06); }
.site .note h4 { margin-bottom: .35rem; }

/* ---------------------------------------------------------------------------
   Checklists
   --------------------------------------------------------------------------- */
.site ul.checks { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.site ul.checks li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--ink-dim);
    font-size: .95rem;
}
.site ul.checks li::before {
    content: "";
    position: absolute;
    left: 0; top: .42em;
    width: 1.05rem; height: 1.05rem;
    border-radius: 50%;
    background: rgba(52, 211, 153, .14);
    border: 1px solid rgba(52, 211, 153, .4);
}
.site ul.checks li::after {
    content: "";
    position: absolute;
    left: .32rem; top: .68em;
    width: .42rem; height: .22rem;
    border-left: 1.6px solid var(--mint);
    border-bottom: 1.6px solid var(--mint);
    transform: rotate(-45deg);
}
.site ul.checks.crosses li::before { background: rgba(251, 113, 133, .12); border-color: rgba(251, 113, 133, .38); }
.site ul.checks.crosses li::after {
    left: .33rem; top: .62em;
    width: .4rem; height: .4rem;
    border: 0;
    background:
        linear-gradient(45deg, transparent 43%, var(--rose) 43%, var(--rose) 57%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, var(--rose) 43%, var(--rose) 57%, transparent 57%);
    transform: none;
}

.site ul.plain { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .55rem; }
.site ul.plain li { color: var(--ink-dim); font-size: .95rem; padding-left: 1.1rem; position: relative; }
.site ul.plain li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: .35rem; height: .35rem; border-radius: 50%; background: var(--indigo);
}

/* ---------------------------------------------------------------------------
   Figures and diagrams
   --------------------------------------------------------------------------- */
.site figure {
    margin: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    padding: 1.3rem;
    overflow: hidden;
}
.site figure svg { display: block; width: 100%; height: auto; }
.site figcaption {
    font-size: .82rem;
    color: var(--ink-faint);
    margin-top: .9rem;
    text-align: center;
}

/* A terminal-ish block for the commands an operator actually runs. */
.site .term {
    background: #05080f;
    border: 1px solid var(--edge);
    border-radius: 12px;
    overflow: hidden;
    margin: 1.2rem 0;
}
.site .term .term-bar {
    display: flex; align-items: center; gap: .4rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--edge);
    background: rgba(255, 255, 255, .03);
}
.site .term .term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2c3550; }
.site .term .term-bar span {
    margin-left: .5rem; font: 600 .72rem/1 ui-monospace, Consolas, monospace;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.site .term pre {
    margin: 0;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    font: .84rem/1.75 ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: #cfe0ff;
}
.site .term pre .c { color: #5f6f92; }
.site .term pre .p { color: var(--mint); }

/* ---------------------------------------------------------------------------
   Tag / pill
   --------------------------------------------------------------------------- */
.site .tag {
    display: inline-block;
    margin: 0;
    padding: .18rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--edge-strong);
    background: var(--panel-strong);
    font: 600 .74rem/1.5 ui-monospace, Consolas, monospace;
    color: var(--ink-dim);
}
.site .tag.ok { color: var(--mint); border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .1); }
.site .tag.warn { color: var(--amber); border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .1); }
.site .tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .9rem; }

/* ---------------------------------------------------------------------------
   Page header on interior pages
   --------------------------------------------------------------------------- */
.site .page-head { padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.site .page-head .lead { margin-bottom: 0; }
.site .crumbs { font-size: .84rem; color: var(--ink-faint); margin-bottom: .9rem; }
.site .crumbs a { color: var(--ink-faint); }
.site .crumbs a:hover { color: var(--cyan); }

/* Next/previous chapter links at the foot of a detail page. */
.site .pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.site .pager a {
    border: 1px solid var(--edge);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    color: var(--ink);
}
.site .pager a:hover { border-color: var(--edge-strong); text-decoration: none; }
.site .pager .k { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .25rem; }

/* ---------------------------------------------------------------------------
   FAQ — <details>, so it works with no script at all.
   --------------------------------------------------------------------------- */
.site details.faq {
    border: 1px solid var(--edge);
    border-radius: 12px;
    background: var(--panel);
    margin-bottom: .7rem;
    overflow: hidden;
}
.site details.faq > summary {
    cursor: pointer;
    padding: 1rem 1.2rem;
    font-weight: 600;
    color: #fff;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .8rem;
}
.site details.faq > summary::-webkit-details-marker { display: none; }
.site details.faq > summary::after {
    content: "+";
    margin-left: auto;
    font: 400 1.3rem/1 ui-monospace, Consolas, monospace;
    color: var(--cyan);
}
.site details.faq[open] > summary::after { content: "\2212"; }
.site details.faq .body { padding: 0 1.2rem 1.1rem; }
.site details.faq .body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Forms — the contact page. Overrides console.css, which also styles inputs.
   --------------------------------------------------------------------------- */
.site .form { display: grid; gap: 1rem; }
.site .form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.site .form label {
    display: block;
    font: 600 .82rem/1.4 inherit;
    color: var(--ink);
    margin: 0 0 .4rem;
    letter-spacing: 0;
    text-transform: none;
}
.site .form .req { color: var(--cyan); }
.site .form .hint { font-size: .82rem; color: var(--ink-faint); margin: .35rem 0 0; }

.site .form input[type="text"],
.site .form input[type="email"],
.site .form textarea {
    width: 100%;
    padding: .7rem .85rem;
    border-radius: 10px;
    border: 1px solid var(--edge-strong);
    background: rgba(255, 255, 255, .04);
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
}
.site .form textarea { min-height: 190px; resize: vertical; line-height: 1.6; }
.site .form input::placeholder, .site .form textarea::placeholder { color: #56617c; }
.site .form input:focus, .site .form textarea:focus {
    outline: none;
    border-color: rgba(56, 189, 248, .65);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .14);
    background: rgba(255, 255, 255, .06);
}

/* Honeypot. Off-screen rather than display:none — a bot reading the computed
   style skips a hidden field, and this one is meant to be filled in. */
.site .form .trap {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.site .banner {
    margin: 0;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    border: 1px solid var(--edge);
    font-size: .95rem;
}
.site .banner.ok { border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .09); color: #b8f0d9; }
.site .banner.bad { border-color: rgba(251, 113, 133, .4); background: rgba(251, 113, 133, .09); color: #ffd2d8; }
.site .banner strong { color: inherit; }

/* ---------------------------------------------------------------------------
   Closing call to action
   --------------------------------------------------------------------------- */
.site .cta {
    border: 1px solid var(--edge-strong);
    border-radius: 22px;
    padding: clamp(2rem, 5vw, 3.2rem);
    text-align: center;
    background:
        radial-gradient(40rem 20rem at 50% 0%, rgba(129, 140, 248, .18), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
}
.site .cta .btn-row { justify-content: center; }
.site .cta p { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--edge);
    padding: 3rem 0 2.2rem;
    margin-top: 2rem;
    background: rgba(5, 8, 15, .6);
}
.site-footer .cols {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
    gap: 2rem;
    margin-bottom: 2.2rem;
}
.site-footer h4 {
    font: 600 .74rem/1 ui-monospace, Consolas, monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: .9rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.site-footer a { color: var(--ink-dim); font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.site-footer .blurb { color: var(--ink-faint); font-size: .9rem; max-width: 34ch; margin: .9rem 0 0; }
.site-footer .base {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.6rem;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--edge);
    font-size: .85rem;
    color: var(--ink-faint);
}
.site-footer .base .spacer { margin-left: auto; }

/* ---------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .site .hero-grid { grid-template-columns: 1fr; }
    .site .split.flip > :first-child { order: 0; }

    .site .menu-button {
        margin: 0;
        font-size: 1rem;
        display: inline-grid;
        place-items: center;
        width: 40px; height: 38px;
        border-radius: 9px;
        border: 1px solid var(--edge-strong);
        background: var(--panel-strong);
        color: var(--ink);
        cursor: pointer;
    }
    .site .menu-button svg { width: 18px; height: 18px; }

    /* flex-wrap plus a fixed height would let the wrapped nav line overflow
       the header's background and float over the page behind it. */
    .site-header .bar { flex-wrap: wrap; height: auto; }
    .site-nav {
        display: none;
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: .1rem;
        padding: .3rem 0 1rem;
        border-top: 1px solid var(--edge);
    }
    .site-nav a { padding: .68rem .5rem; }
    .site-nav a.active::after { display: none; }
    .site .menu-toggle:checked ~ .site-nav { display: flex; }
    .site .header-actions .btn.ghost { display: none; }
    .site-nav .on-menu { display: block; }
    .site-nav .on-menu.first { margin-top: .4rem; border-top: 1px solid var(--edge); padding-top: .8rem; }
}

@media (max-width: 560px) {
    .site .spec > div { grid-template-columns: 1fr; gap: .2rem; }
    .site .steps .step { padding: 1.2rem 1.1rem 1.2rem 1.1rem; }
    .site .steps .step::before { position: static; margin-bottom: .6rem; }
    .site .btn-row .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .site *, .site *::before, .site *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}