/* ==========================================================================
   Page chrome: the sticky header and the compliance footer. Split out from
   the section layouts because these two frame every section rather than
   being one.
   ========================================================================== */

/* --- Navigation: one line, 64px, never taller --------------------------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
@media (prefers-reduced-transparency: reduce) {
    .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav__inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; letter-spacing: -.02em; }
.nav__brand img { width: 28px; height: 28px; border-radius: 6px; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ink-3);
    text-decoration: none;
    transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__links a:hover { color: var(--ink); background: var(--surface-2); }
.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav__login { font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--ink-2); padding: 7px 4px; }
.nav__login:hover { color: var(--accent); }

/* --- Hamburger -------------------------------------------------------- */

.nav__toggle {
    display: none;               /* desktop shows the inline links instead */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.nav__toggle:hover { background: var(--surface-2); border-color: var(--ink-4); }
.nav__toggle:active { transform: translateY(1px); }

/* One button, two glyphs: whichever matches the current state is shown. */
.nav__toggle-close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-close { display: block; }

/* --- Mobile panel ------------------------------------------------------ */

.nav__panel {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 49;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.nav__panel-inner { display: grid; gap: 2px; padding-block: 12px 18px; }
.nav__panel-inner a {
    padding: 12px 8px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
}
.nav__panel-inner a:hover { background: var(--surface-2); color: var(--ink); }
/* No CTA in here on purpose: the header keeps its own, visible at every width,
   and two identical buttons on screen at once is noise. */

.nav__scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(20, 24, 28, .38);
}
/* A light scrim reads as haze against a dark page, so it goes heavier there. */
@media (prefers-color-scheme: dark) {
    .nav__scrim { background: rgba(0, 0, 0, .6); }
}

/* Opening is a state change, so it gets a short motion. */
@media (prefers-reduced-motion: no-preference) {
    .nav__panel { animation: nav-panel-in .22s var(--ease); }
    .nav__scrim { animation: nav-scrim-in .22s var(--ease); }
}
@keyframes nav-panel-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes nav-scrim-in { from { opacity: 0; } }

@media (max-width: 1023px) {
    .nav__links { display: none; }
    .nav__toggle { display: inline-flex; }
}
@media (max-width: 599px) {
    .nav__login { display: none; }
    /* Keep the CTA in the bar on phones, just tighter: it is the primary
       conversion path and should not live only behind the hamburger. */
    .nav__inner { gap: 12px; }
    .nav__actions > .btn { padding: 10px 14px; font-size: .875rem; }

    /* The wordmark cannot fit beside the CTA and the toggle without wrapping to
       a second line, which would double the header height. It is clipped rather
       than removed so the brand link keeps its accessible name. */
    .nav__brand-name {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Above the breakpoint the panel can never be reached, so it stays closed
   even if the viewport is resized while it is open. */
@media (min-width: 1024px) {
    .nav__panel, .nav__scrim { display: none !important; }
}

/* Without JavaScript the toggle cannot open anything, so the links are laid out
   inline under the brand instead. Better a wrapped header than no navigation. */
.no-js .nav__toggle { display: none; }
@media (max-width: 1023px) {
    .no-js .nav__inner { flex-wrap: wrap; height: auto; padding-block: 10px; }
    .no-js .nav__links {
        display: flex;
        flex-wrap: wrap;
        order: 3;
        width: 100%;
        margin-left: 0;
        padding-bottom: 4px;
    }
    .no-js .nav__links a { padding-inline: 8px; }
}

/* --- Footer ------------------------------------------------------------- */

.foot { background: var(--bg-sunk); border-top: 1px solid var(--line); font-size: .875rem; }
.foot__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    padding-block: clamp(40px, 5vw, 60px);
}
.foot h2 { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.foot__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 12px; }
.foot__brand img { width: 26px; height: 26px; border-radius: 6px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: var(--ink-3); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot p { margin: 0 0 6px; color: var(--ink-3); line-height: 1.6; }
.foot__legal { border-top: 1px solid var(--line); padding-block: 20px; color: var(--ink-4); font-size: .8125rem; }

@media (max-width: 899px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 519px) { .foot__grid { grid-template-columns: 1fr; } }