/* ============================================================
   Layout — shell, sections, grids
   ============================================================ */

.shell {
    width: min(100% - var(--gutter) * 2, var(--max));
    margin-inline: auto;
}

.section {
    min-height: 100svh;
    padding-block: calc(4.5rem + var(--section-y)) var(--section-y);
    position: relative;
    display: grid;
    align-content: center;
}

/* The full-viewport minimum reads as intentional, deliberate pacing on a
   desktop scroll; on a phone it just means any section shorter than the
   viewport (the four small "how it works" cards, say) gets stretched
   with a huge dead gap of top/bottom padding to fill that height. The
   padding-block above already gives every section real breathing room
   on its own, so dropping the forced minimum here costs nothing on a
   tall section and fixes every short one. */
@media (max-width: 760px) {
    .section {
        min-height: 0;
        /* The desktop formula's fixed 4.5rem top component (on top of
           --section-y, which already scales with viewport height) is
           sized for a screen where a section's own scroll distance is
           large relative to its padding. On a phone it isn't — two
           adjacent sections each paying that same fixed cost stacks
           into a dead, contentless band between every section, which
           is exactly the "too much space" this cuts down. */
        padding-block: calc(1.75rem + var(--section-y)) calc(1rem + var(--section-y));
    }
}

.section--dark {
    background: var(--forest-900);
    color: var(--cream-050);
}

.section--dark .eyebrow {
    color: var(--brass-400);
}

.section--dark .lede,
.section--dark .muted {
    color: rgba(251, 248, 241, 0.68);
}

.section--tint {
    background: var(--surface-2);
}

.section-head {
    max-width: 62ch;
    margin-bottom: clamp(1.1rem, 2.4vh, 1.75rem);
}

.section-head .eyebrow {
    display: block;
    margin-bottom: 0.5rem;
}

.section-head h2 + .lede {
    margin-top: 0.55rem;
}

/* ---------- Nav ---------- */

.nav {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 90;
    transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
                backdrop-filter 0.4s var(--ease);
    border-bottom: 1px solid transparent;
}

.nav.is-stuck {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom-color: var(--line);
}

/* Over a scrubbed stage: no bar, light type, white CTA.

   Light type alone is not enough — the app deck brings bright device
   screens up past the top of the viewport, and white on white vanishes.
   A short wash behind the bar gives it something to sit on wherever the
   picture happens to be pale. It lives inside the nav's own stacking
   context, so it darkens the page behind the bar and nothing else. */
.nav.is-invert::before {
    content: "";
    position: absolute;
    inset: 0 0 -28px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(58, 6, 3, 0.46), rgba(58, 6, 3, 0.14) 62%, transparent);
}

.nav.is-invert .nav__brand {
    color: #fff;
}

.nav.is-invert .nav__toggle span,
.nav.is-invert .nav__toggle span::before,
.nav.is-invert .nav__toggle span::after {
    background: #fff;
}

@media (max-width: 980px) {
    /* The open mobile sheet is its own surface, so it keeps dark type. */
    .nav.is-invert.is-open .nav__toggle span,
    .nav.is-invert.is-open .nav__toggle span::before,
    .nav.is-invert.is-open .nav__toggle span::after {
        background: var(--ink);
    }
}

.nav__inner {
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    min-height: 76px;
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    justify-self: start;
}

.nav__brand img {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    box-shadow: var(--shadow-1);
}

.nav__end {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.nav__links {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.nav__links a,
.nav__cta,
.footer__pills a,
.footer__cta,
.footer__wa,
.footer__legal {
    --nav-top: #6fe3a4;
    --nav-mid: #2f8f63;
    --nav-bot: #176b42;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.48rem 1rem;
    border-radius: 999px;
    color: #f4fff8;
    text-shadow: 0 1px 0 rgba(8, 40, 24, 0.35);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, var(--nav-top) 0%, var(--nav-mid) 48%, var(--nav-bot) 100%);
    border: 1px solid rgba(12, 64, 38, 0.45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 -2px 0 rgba(8, 40, 24, 0.28) inset,
        0 3px 0 #0e4a2c,
        0 8px 14px -8px rgba(14, 74, 44, 0.7);
    transition: transform 0.15s var(--ease), filter 0.2s var(--ease), box-shadow 0.15s var(--ease);
}

.nav__links a::after {
    display: none;
}

.nav__links a:hover,
.nav__cta:hover,
.footer__pills a:hover,
.footer__cta:hover,
.footer__wa:hover,
.footer__legal:hover {
    color: #fff;
    filter: saturate(1.15) brightness(1.06);
    transform: translateY(-1px);
}

.nav__links a:active,
.nav__cta:active,
.footer__pills a:active,
.footer__cta:active,
.footer__wa:active,
.footer__legal:active {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 3px 8px rgba(8, 40, 24, 0.45) inset,
        0 1px 0 #0e4a2c;
    filter: none;
}

.nav__cta {
    --nav-top: #8af0b8;
    --nav-mid: #3cb878;
    --nav-bot: #1b7a4a;
    padding: 0.5rem 1.15rem;
    font-size: 0.82rem;
    font-weight: 700;
    overflow: visible;
}

.nav__cta:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, var(--nav-top) 0%, var(--nav-mid) 48%, var(--nav-bot) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 -2px 0 rgba(8, 40, 24, 0.28) inset,
        0 3px 0 #0e4a2c,
        0 8px 14px -8px rgba(14, 74, 44, 0.7);
}

.nav__toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    align-items: center;
    justify-content: center;
}

.nav__toggle span {
    display: block;
    width: 20px;
    height: 1.6px;
    background: var(--ink);
    position: relative;
    transition: background 0.2s var(--ease);
}

.nav__toggle span::before,
.nav__toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 1.6px;
    background: var(--ink);
    transition: transform 0.3s var(--ease);
}

.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }

.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
    .nav__toggle { display: flex; }

    .nav__inner {
        grid-template-columns: 1fr auto;
    }

    /* The open menu is a compact dropdown, not a full-screen takeover —
       intentional, it's only 4 links. Without something behind it
       though, the page carries on right where the dropdown ends with no
       separation at all, which read as an unfinished/broken overlay.
       This dims everything below it while it's open, tap-to-close. */
    .nav::after {
        content: "";
        position: fixed;
        inset: 72px 0 0;
        z-index: -1;
        background: rgba(10, 14, 11, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s var(--ease);
    }

    .nav.is-open::after {
        opacity: 1;
        pointer-events: auto;
    }

    .nav__links {
        position: fixed;
        inset: 72px 0 auto;
        justify-self: stretch;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        padding: 0.85rem var(--gutter) 1.35rem;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 16px 32px -20px rgba(8, 20, 12, 0.45);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
    }

    .nav.is-open .nav__links {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .nav__links a {
        width: 100%;
        padding-block: 0.75rem;
        font-size: var(--step-0);
    }

    .nav .nav__cta {
        display: none;
    }
}

/* ---------- Generic grids ---------- */

.grid {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.5rem);
}

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

@media (max-width: 900px) {
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .grid--3 { grid-template-columns: 1fr; }
    .grid--2 { grid-template-columns: 1fr; }
}

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

.footer {
    background: var(--forest-900);
    color: var(--cream-050);
    padding-block: clamp(3.5rem, 7vw, 5.5rem)
                   calc(2.5rem + env(safe-area-inset-bottom));
}

.footer__top {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 5vw, 4rem);
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(251, 248, 241, 0.12);
    align-items: start;
}

.footer__cta {
    margin-top: 1.15rem;
    padding: 0.55rem 1.2rem;
    font-size: 0.84rem;
    font-weight: 700;
}

.footer__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer__pills a {
    font-size: 0.78rem;
    font-weight: 700;
}

.footer__brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-display);
    font-size: var(--step-1);
    margin-bottom: 1rem;
}

.footer__brand img {
    width: 46px;
    height: 46px;
    border-radius: 13px;
}

.footer p {
    color: rgba(251, 248, 241, 0.62);
    max-width: 34ch;
}

.footer h4 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brass-400);
    margin-bottom: 1.1rem;
    font-weight: 500;
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: rgba(251, 248, 241, 0.45);
}

.footer__legalRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.1rem;
}

.footer__legal {
    color: rgba(251, 248, 241, 0.68);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(251, 248, 241, 0.3);
}

.footer__wa {
    margin-left: auto;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.wa-float {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1.1rem, env(safe-area-inset-bottom));
    z-index: 80;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, #4de07f 0%, #25d366 52%, #128c3e 100%);
    border: 1px solid rgba(8, 64, 28, 0.35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 4px 0 #0d6b32,
        0 12px 24px -8px rgba(18, 140, 62, 0.65);
    transition: transform 0.15s var(--ease), filter 0.2s var(--ease), box-shadow 0.15s var(--ease);
}

.wa-float svg {
    width: 30px;
    height: 30px;
}

.wa-float:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.wa-float:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 8px rgba(8, 64, 28, 0.4) inset,
        0 1px 0 #0d6b32;
}

@media (max-width: 760px) {
    .footer__top {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}