/* ==========================================================
   NIRVEST — Phase 5 (Premium Rebuild)
   Design concept: "Stillness with conviction"
   A calm, paper/ink editorial world (echoing "Nirvana") that
   snaps into sharp, precise investor-grade detail — the halo
   ring around the mark is the one signature motif: a slow,
   breathing orbit that never fully stops, mirroring the
   crescent + star in the identity.
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,340;9..144,440;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
    --bg:#F6F3EC;
    --bg-alt:#EEEADD;
    --card:rgba(255,255,255,.70);
    --card-strong:rgba(255,255,255,.92);

    --text:#12161F;
    --muted:#5B6270;
    --faint:#8B909B;

    --primary:#0E9E86;
    --primary-2:#10B981;
    --gold:#B9860F;
    --gold-2:#E8C468;

    --ink-line:rgba(18,22,31,.10);
    --border:rgba(18,22,31,.09);

    --shadow:0 30px 70px rgba(20,22,15,.09);
    --shadow-sm:0 10px 24px rgba(20,22,15,.07);

    --radius:22px;
}

body.dark{
    --bg:#05070D;
    --bg-alt:#0A0E18;
    --card:rgba(15,20,32,.58);
    --card-strong:rgba(15,20,32,.86);

    --text:#F2F4F8;
    --muted:#9AA3B2;
    --faint:#69707E;

    --primary:#22C7A9;
    --primary-2:#10B981;
    --gold:#E8C468;
    --gold-2:#F3D98A;

    --ink-line:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.08);

    --shadow:0 40px 100px rgba(0,0,0,.55);
    --shadow-sm:0 12px 30px rgba(0,0,0,.35);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    min-height:100vh;
    opacity:0;
    transition:background .7s ease, color .7s ease;
}

body.loaded{ opacity:1; }

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

img{ display:block; max-width:100%; }

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

.eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:.72rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--gold);
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:var(--gold);
    display:inline-block;
}

h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:600;
    line-height:1.05;
    letter-spacing:-.01em;
}

/* ======================
   AMBIENT BACKGROUND
====================== */

body::before{
    content:"";
    position:fixed;
    inset:-15%;
    background:
        radial-gradient(circle at 12% 18%, rgba(14,158,134,.16), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(232,196,104,.14), transparent 26%),
        radial-gradient(circle at 55% 90%, rgba(14,158,134,.10), transparent 32%);
    filter:blur(60px);
    z-index:-2;
    animation:driftField 22s ease-in-out infinite alternate;
}

body.dark::before{
    background:
        radial-gradient(circle at 12% 18%, rgba(34,199,169,.20), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(232,196,104,.16), transparent 26%),
        radial-gradient(circle at 55% 90%, rgba(34,199,169,.12), transparent 32%);
}

@keyframes driftField{
    0%{ transform:translateY(0) scale(1); }
    100%{ transform:translateY(-40px) scale(1.06); }
}

/* Faint constellation dots, brand-specific atmosphere */
.stars{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.5;
}

.stars span{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:var(--gold-2);
    opacity:0;
    animation:twinkle 6s ease-in-out infinite;
}

@keyframes twinkle{
    0%,100%{ opacity:0; transform:scale(.6); }
    50%{ opacity:.85; transform:scale(1); }
}

/* ======================
   NAV
====================== */

.nav{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px clamp(20px,5vw,64px);
    background:transparent;
    backdrop-filter:blur(0px);
    transition:background .5s ease, backdrop-filter .5s ease, box-shadow .5s ease, border-color .5s ease;
    border-bottom:1px solid transparent;
}

.nav.scrolled{
    background:var(--card-strong);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-sm);
}

.nav-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.nav-brand img{
    width:38px;
    height:38px;
    border-radius:10px;
    object-fit:cover;
}

.nav-brand span{
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:.22em;
    font-size:.85rem;
    font-weight:500;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:clamp(18px,3vw,38px);
}

.nav-links a:not(.cta-small){
    font-size:.95rem;
    color:var(--muted);
    position:relative;
    padding:4px 0;
    transition:color .3s ease;
}

.nav-links a:not(.cta-small)::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:0;
    height:1px;
    background:var(--gold);
    transition:width .3s ease;
}

.nav-links a.active,
.nav-links a:hover:not(.cta-small){
    color:var(--text);
}

.nav-links a.active::after,
.nav-links a:hover:not(.cta-small)::after{ width:100%; }

.cta-small{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:.88rem;
    padding:11px 20px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--primary-2),var(--primary));
    color:#04140F;
    box-shadow:0 10px 24px rgba(14,158,134,.28);
    transition:transform .3s ease, box-shadow .3s ease;
    white-space:nowrap;
}

.cta-small:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(14,158,134,.36); }

#themeToggle{
    width:42px;
    height:42px;
    border:1px solid var(--border);
    border-radius:50%;
    background:var(--card);
    color:var(--text);
    cursor:pointer;
    font-size:16px;
    backdrop-filter:blur(12px);
    transition:transform .35s ease, border-color .35s ease;
    margin-left:6px;
}

#themeToggle:hover{ transform:rotate(15deg) scale(1.06); border-color:var(--gold); }

.menu-toggle{
    display:none;
    width:42px; height:42px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text);
    font-size:18px;
    cursor:pointer;
}

/* ======================
   HERO
====================== */

main{ padding:0 clamp(20px,5vw,64px); }

.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:min(11vh,96px) 0 70px;
    position:relative;
}

.halo{
    position:relative;
    width:112px;
    height:112px;
    margin-bottom:28px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.halo::before{
    content:"";
    position:absolute;
    inset:-16px;
    border-radius:50%;
    border:1px solid var(--gold);
    opacity:.45;
    animation:breathe 7s ease-in-out infinite;
}

.halo::after{
    content:"";
    position:absolute;
    inset:-34px;
    border-radius:50%;
    border:1px solid var(--ink-line);
    animation:breathe 7s ease-in-out infinite 1.4s;
}

@keyframes breathe{
    0%,100%{ transform:scale(1); opacity:.5; }
    50%{ transform:scale(1.12); opacity:.15; }
}

.halo img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.hero .eyebrow{ margin-bottom:22px; }

h1.display{
    font-size:clamp(2.6rem,7vw,5.1rem);
    max-width:16ch;
}

h1.display .accent{
    background:linear-gradient(90deg,var(--gold),var(--primary-2));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.tagline{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:440;
    font-size:clamp(1.1rem,2vw,1.5rem);
    color:var(--muted);
    margin-top:20px;
}

.lede{
    max-width:640px;
    margin:26px auto 0;
    font-size:1.08rem;
    line-height:1.85;
    color:var(--muted);
}

.hero-ctas{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:40px;
    flex-wrap:wrap;
    justify-content:center;
}

/* ======================
   PRIMARY CTA BUTTON
====================== */

.cta{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:18px 34px;
    border-radius:999px;
    font-size:1.02rem;
    font-weight:700;
    color:#04140F;
    background:linear-gradient(135deg,var(--primary-2),var(--primary));
    box-shadow:0 18px 40px rgba(14,158,134,.30);
    overflow:hidden;
    transition:transform .35s ease, box-shadow .35s ease;
    animation:pulse 6s ease-in-out infinite;
}

.cta::before{
    content:"";
    position:absolute;
    top:0; left:-120%;
    width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-22deg);
    transition:left .8s ease;
}

.cta:hover{
    transform:translateY(-3px);
    box-shadow:0 24px 50px rgba(14,158,134,.4);
    animation-play-state:paused;
}

.cta:hover::before{ left:150%; }

.cta.ghost{
    background:transparent;
    color:var(--text);
    border:1px solid var(--border);
    box-shadow:none;
    animation:none;
}

.cta.ghost:hover{
    border-color:var(--gold);
    transform:translateY(-3px);
}

.availability{
    margin-top:16px;
    font-size:.88rem;
    color:var(--faint);
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:.02em;
}

/* ======================
   SECTION SHELL
====================== */

section{
    max-width:1080px;
    margin:0 auto;
    padding:90px 0;
    border-top:1px solid var(--ink-line);
}

section.no-line{ border-top:none; }

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:48px;
    flex-wrap:wrap;
}

.section-head h2{
    font-size:clamp(1.8rem,3.4vw,2.6rem);
    max-width:14ch;
}

.section-head p{
    max-width:36ch;
    color:var(--muted);
    line-height:1.7;
}

/* ======================
   MISSION / ABOUT
====================== */

.mission-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:start;
}

.mission-copy p{
    color:var(--muted);
    line-height:1.9;
    font-size:1.05rem;
}

.mission-copy p + p{ margin-top:18px; }

.audience-list{
    display:flex;
    flex-direction:column;
    gap:0;
}

.audience-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:20px 0;
    border-bottom:1px solid var(--ink-line);
    transition:padding-left .3s ease;
}

.audience-row:hover{ padding-left:8px; }

.audience-row .tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:.75rem;
    color:var(--gold);
    letter-spacing:.08em;
}

.audience-row h4{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:1.15rem;
}

.audience-row span.who{
    text-align:right;
    color:var(--muted);
    font-size:.92rem;
    max-width:22ch;
}

/* ======================
   PRODUCT / LENS
====================== */

.lens-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:clamp(28px,5vw,56px);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}

.lens-card::before{
    content:"";
    position:absolute;
    top:0; left:-130%;
    width:50%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
    transform:skewX(-20deg);
    animation:reflection 16s infinite;
}

@keyframes reflection{
    0%{ left:-150%; }
    100%{ left:180%; }
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    margin-top:36px;
}

.feature{
    padding:22px 4px 0;
    border-top:1px solid var(--ink-line);
}

.feature .num{
    font-family:'IBM Plex Mono',monospace;
    font-size:.75rem;
    color:var(--gold);
    letter-spacing:.1em;
    display:block;
    margin-bottom:12px;
}

.feature h4{
    font-family:'Fraunces',serif;
    font-size:1.2rem;
    margin-bottom:8px;
}

.feature p{
    color:var(--muted);
    font-size:.94rem;
    line-height:1.7;
}

/* ======================
   BENEFITS
====================== */

.benefits{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.benefit{
    padding:26px 20px;
    border-radius:16px;
    background:var(--card);
    border:1px solid var(--border);
    backdrop-filter:blur(12px);
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    font-size:.95rem;
    font-weight:500;
}

.benefit:hover{
    transform:translateY(-4px);
    border-color:var(--gold);
    box-shadow:var(--shadow-sm);
}

.benefit .mark{ color:var(--primary); margin-right:8px; }

/* ======================
   FINAL CTA
====================== */

.final-cta{
    text-align:center;
    border-radius:28px;
    background:var(--card-strong);
    border:1px solid var(--border);
    padding:70px clamp(24px,6vw,80px);
    box-shadow:var(--shadow);
}

.final-cta h2{
    font-size:clamp(1.8rem,4vw,2.8rem);
    max-width:18ch;
    margin:0 auto 16px;
}

.final-cta p{ color:var(--muted); max-width:46ch; margin:0 auto 34px; line-height:1.8; }

/* ======================
   FOOTER
====================== */

footer{
    padding:70px clamp(20px,5vw,64px) 50px;
    border-top:1px solid var(--ink-line);
}

.footer-grid{
    max-width:1080px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:40px;
}

.footer-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.footer-brand img{ width:34px; height:34px; border-radius:9px; }

.footer-brand strong{
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:.2em;
    font-size:.85rem;
}

.footer-links{
    display:flex;
    gap:48px;
    flex-wrap:wrap;
}

.footer-col h5{
    font-family:'IBM Plex Mono',monospace;
    font-size:.72rem;
    letter-spacing:.15em;
    color:var(--gold);
    margin-bottom:14px;
    text-transform:uppercase;
}

.footer-col a{
    display:block;
    color:var(--muted);
    font-size:.92rem;
    margin-bottom:10px;
    transition:color .3s ease;
}

.footer-col a:hover{ color:var(--text); }

.footer-bottom{
    max-width:1080px;
    margin:50px auto 0;
    padding-top:24px;
    border-top:1px solid var(--ink-line);
    display:flex;
    justify-content:space-between;
    color:var(--faint);
    font-size:.82rem;
    flex-wrap:wrap;
    gap:12px;
}

/* ======================
   BLOG PAGE
====================== */

.blog-hero{
    padding:min(10vh,80px) 0 40px;
    text-align:center;
}

.blog-hero h1{
    font-size:clamp(2.2rem,5vw,3.6rem);
    margin-top:18px;
}

.blog-hero p{
    max-width:520px;
    margin:20px auto 0;
    color:var(--muted);
    line-height:1.8;
}

.empty-state{
    max-width:640px;
    margin:60px auto 0;
    text-align:center;
    padding:60px clamp(24px,5vw,60px);
    border-radius:var(--radius);
    background:var(--card);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
}

.empty-state .mark-orbit{
    width:64px;
    height:64px;
    margin:0 auto 26px;
    position:relative;
}

.empty-state .mark-orbit::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1px dashed var(--gold);
    animation:spin 18s linear infinite;
}

.empty-state .mark-orbit::after{
    content:"";
    position:absolute;
    top:-3px;
    left:50%;
    width:7px;
    height:7px;
    margin-left:-3.5px;
    border-radius:50%;
    background:var(--gold-2);
    box-shadow:0 0 12px var(--gold-2);
    animation:spin 18s linear infinite;
    transform-origin:3.5px 35px;
}

@keyframes spin{ to{ transform:rotate(360deg); } }

.empty-state h3{ font-size:1.4rem; margin-bottom:12px; }

.empty-state p{ color:var(--muted); line-height:1.8; margin-bottom:26px; }

.topic-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin:46px 0 0;
}

.topic-tags span{
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
    letter-spacing:.04em;
    padding:9px 16px;
    border-radius:999px;
    border:1px solid var(--border);
    color:var(--muted);
}

/* ======================
   BLOG — POST GRID
====================== */

.post-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:56px;
}

.post-card{
    display:flex;
    flex-direction:column;
    padding:0 0 26px;
    border-radius:18px;
    background:var(--card);
    border:1px solid var(--border);
    backdrop-filter:blur(14px);
    box-shadow:var(--shadow-sm);
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    min-height:270px;
    overflow:hidden;
}

.post-card img{
    width:100%;
    height:170px;
    object-fit:cover;
    display:block;
    border-bottom:1px solid var(--ink-line);
    transition:transform .5s ease;
}

.post-card:hover img{ transform:scale(1.04); }

.post-card .post-card-body{
    padding:24px 26px 0;
    display:flex;
    flex-direction:column;
    flex:1;
}

.post-card:hover{
    transform:translateY(-5px);
    border-color:var(--gold);
    box-shadow:var(--shadow);
}

.post-card .post-tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:16px;
}

.post-card h3{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:1.28rem;
    line-height:1.28;
    margin-bottom:12px;
}

.post-card p{
    color:var(--muted);
    font-size:.92rem;
    line-height:1.7;
    flex:1;
}

.post-card .post-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:22px;
    padding-top:16px;
    border-top:1px solid var(--ink-line);
    font-family:'IBM Plex Mono',monospace;
    font-size:.76rem;
    color:var(--faint);
}

.post-card .post-meta .arrow{
    color:var(--primary);
    transition:transform .3s ease;
}

.post-card:hover .post-meta .arrow{ transform:translateX(4px); }

.blog-footnote{
    text-align:center;
    color:var(--faint);
    font-size:.88rem;
    margin-top:50px;
}

/* ======================
   BLOG — SINGLE ARTICLE
====================== */

.post-article{
    max-width:720px;
    margin:0 auto;
    padding:min(9vh,72px) 0 60px;
}

.back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:.82rem;
    color:var(--muted);
    margin-bottom:38px;
    transition:color .3s ease, gap .3s ease;
}

.back-link:hover{ color:var(--text); gap:12px; }

.post-cover{
    width:100%;
    height:clamp(200px,32vw,340px);
    object-fit:cover;
    border-radius:18px;
    margin-bottom:40px;
    border:1px solid var(--border);
}

.post-header .post-tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:.75rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--gold);
    display:block;
    margin-bottom:18px;
}

.post-header h1{
    font-size:clamp(2rem,5vw,2.9rem);
    line-height:1.12;
    margin-bottom:20px;
}

.post-header .post-dek{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:440;
    font-size:1.2rem;
    color:var(--muted);
    line-height:1.6;
    margin-bottom:26px;
}

.post-header .post-meta-row{
    display:flex;
    align-items:center;
    gap:14px;
    font-family:'IBM Plex Mono',monospace;
    font-size:.8rem;
    color:var(--faint);
    padding-bottom:34px;
    border-bottom:1px solid var(--ink-line);
    margin-bottom:44px;
}

.post-header .post-meta-row .dot{
    width:3px; height:3px;
    border-radius:50%;
    background:var(--faint);
}

.post-body p{
    color:var(--text);
    font-size:1.08rem;
    line-height:1.95;
    margin-bottom:26px;
}

.post-body h2{
    font-size:1.5rem;
    margin:48px 0 18px;
}

.post-body strong{ color:var(--text); }

.post-body blockquote{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:440;
    font-size:1.35rem;
    line-height:1.6;
    color:var(--text);
    border-left:2px solid var(--gold);
    padding:4px 0 4px 26px;
    margin:38px 0;
}

.post-body ul{
    margin:0 0 26px 22px;
    color:var(--text);
}

.post-body li{
    line-height:1.85;
    margin-bottom:10px;
    padding-left:6px;
}

.post-footer{
    margin-top:56px;
    padding-top:32px;
    border-top:1px solid var(--ink-line);
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.post-footer .footer-cta-text h4{
    font-family:'Fraunces',serif;
    font-size:1.15rem;
    margin-bottom:6px;
}

.post-footer .footer-cta-text p{
    color:var(--muted);
    font-size:.92rem;
    max-width:34ch;
}

/* ======================
   SCROLLBAR / SELECTION / FOCUS
====================== */

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--primary-2),var(--gold)); border-radius:20px; }

::selection{ background:var(--primary-2); color:#04140F; }

button:focus-visible, a:focus-visible{
    outline:2px solid var(--primary-2);
    outline-offset:4px;
}

/* ======================
   RESPONSIVE
====================== */

@media(max-width:900px){
    .mission-grid{ grid-template-columns:1fr; gap:36px; }
    .feature-grid{ grid-template-columns:1fr 1fr; }
    .benefits{ grid-template-columns:1fr 1fr; }
    .post-grid{ grid-template-columns:1fr 1fr; }
}

@media(max-width:720px){
    .nav-links{
        position:fixed;
        top:78px; right:20px; left:20px;
        background:var(--card-strong);
        border:1px solid var(--border);
        border-radius:18px;
        padding:22px;
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
        backdrop-filter:blur(20px);
        box-shadow:var(--shadow);
        transform:translateY(-14px);
        opacity:0;
        pointer-events:none;
        transition:.3s ease;
    }
    .nav-links.open{
        transform:translateY(0);
        opacity:1;
        pointer-events:auto;
    }
    .menu-toggle{ display:block; }
    .nav-links .cta-small{ width:100%; text-align:center; }
    .feature-grid{ grid-template-columns:1fr; }
    .benefits{ grid-template-columns:1fr; }
    .post-grid{ grid-template-columns:1fr; }
    .post-footer{ flex-direction:column; align-items:flex-start; }
    .footer-grid{ flex-direction:column; }
}