/* AllArounder - Night (V2 "לילה") override for /how-it-works/.
   Loaded AFTER site.css + the page's inline <style>. Flips site.css's token-driven
   "paper ladder" LIGHT system to the v6 Night palette, then rescues the cases a token
   flip can't fix: hardcoded light rgba (.aa-nav--glass) and dual-use --forest
   (heading TEXT *and* the dark CTA/footer panel BG). Content is never touched. */

/* ── 1. token flip (declared after site.css :root → wins) ── */
:root{
  /* paper ladder (light surfaces) → void ladder (dark surfaces) */
  --paper-0:#253220;   /* card / plate surface */
  --paper-1:#1e2d1a;   /* page base */
  --paper-2:#23311d;   /* hero / alt sections */
  --paper-3:#2c3c27;   /* olive-tinted soft panel */
  --paper-4:#344530;   /* parchment accents */
  /* legacy surface aliases */
  --cream:#253220; --white:#253220; --light-sage:#E2C488; --lsage:#E2C488;
  /* text */
  --ink:#F5F0E8; --ink-soft:rgba(245,240,232,.82); --ink-mute:rgba(245,240,232,.58);
  --muted:rgba(245,240,232,.58); --sage-text:#CDC6B7;
  --forest:#F5F0E8;   /* was dark text/bg; bg uses rescued below */
  /* accents */
  --olive:#C8A96E; --oliveH:#E2C488; --sage:#7A9E6C;
  /* lines + decorative alphas */
  --border:rgba(245,240,232,.14); --hairline-c:rgba(245,240,232,.14);
  --hairline:1px solid rgba(245,240,232,.14);
  --blob-sage:rgba(122,158,108,.12); --glass-on-dark:rgba(245,240,232,.06);
  --rose-chip-bg:rgba(212,160,160,.14);
  /* texture + shadows for dark */
  --linen-dots:radial-gradient(rgba(245,240,232,.035) 1px, transparent 1.4px);
  --shadow-rest:0 6px 20px rgba(0,0,0,.35); --shadow-lift:0 16px 40px rgba(0,0,0,.5);
  --shadow-modal:0 24px 56px rgba(0,0,0,.6);
}

/* ── 2. base ── */
body{background:#1e2d1a;color:#F5F0E8;}

/* ── 3. nav: glass is a hardcoded LIGHT rgba → dark glass ── */
.aa-nav{background:rgba(30,45,26,.92);border-block-end:1px solid rgba(245,240,232,.12);}
.aa-nav--glass{background:rgba(30,45,26,.82)!important;}
.nav-logo{background:transparent!important;color:#F5F0E8!important;}
.nav-logo img{mix-blend-mode:normal!important;}
/* .nav-links color MOVED to single-source style.css (2026-06-22): the chrome typography+color lock
   there (nav.v6-nav .nav-links a) owns nav-link color + font site-wide, so this per-page .72
   override no longer competes (it was dimmer than the canonical .82 -> a divergence). One source. */
.nav-cta{background:linear-gradient(135deg,#E2C488,#C8A96E)!important;color:#23180a!important;}
.nav-lang{color:#C8A96E!important;border-color:rgba(200,169,110,.6)!important;}

/* ── 4. dual-use --forest as dark panel BG (flip made it cream) → re-dark ── */
.aa-cta-panel{background:linear-gradient(165deg,#2c3c27,#1e2d1a)!important;color:#F5F0E8!important;border:1px solid rgba(200,169,110,.3);}
.aa-cta-panel h2,.aa-cta-panel h3{color:#F5F0E8!important;}
.aa-footer{background:#16210f!important;color:rgba(245,240,232,.6)!important;}
.aa-footer a{color:rgba(245,240,232,.55)!important;}
.aa-footer a:hover{color:#E2C488!important;}
.skip-nav{background:#253220!important;color:#F5F0E8!important;}

/* ── 5. accent rescues: step numbers + chips read gold on dark ── */
.aa-figure-num{color:#E2C488!important;}
.aa-chip{background:linear-gradient(135deg,#E2C488,#A88A4E)!important;color:#23180a!important;border-color:transparent!important;}
.aa-chip-inline,.hero-eyebrow{background:rgba(200,169,110,.12)!important;color:#E2C488!important;border-color:rgba(200,169,110,.32)!important;}
.tstep .tnum{box-shadow:0 0 0 5px #1e2d1a!important;}

/* ── 6. headings + emphasis (some resolve via --forest, belt-and-suspenders) ── */
h1,h2,h3{color:#F5F0E8;}
em{color:#E2C488;}
.section-sub,.tstep p,.chain-box p,.month-card p,.demo-cta p,.faq-a p{color:rgba(245,240,232,.62);}
.tstep p strong,.chain-honest p{color:#F5F0E8;}

/* ── 7. cards / panels keep crisp borders on dark ── */
.chain-box,.month-card,.aa-plate,.demo-cta,.chain-honest{border-color:rgba(245,240,232,.12)!important;}
.demo-cta{background:#2c3c27!important;}

/* ── 8. buttons ── */
.btn-primary{background:linear-gradient(135deg,#E2C488,#C8A96E)!important;color:#23180a!important;}
.btn-outline,.btn-ghost-light{border:1px solid rgba(245,240,232,.3)!important;color:#F5F0E8!important;background:transparent!important;}
.btn-outline:hover,.btn-ghost-light:hover{background:rgba(245,240,232,.07)!important;}

/* ── 9. mobile menu (page ships its own .mobile-menu - re-dark) ── */
.mobile-menu{background:#1e2d1a!important;border-block-end:1px solid rgba(245,240,232,.12)!important;}
.mobile-menu a{color:#F5F0E8!important;border-block-end:1px solid rgba(245,240,232,.10)!important;}

/* ── 10. scroll-top in gold ── */
#scroll-top{background:linear-gradient(135deg,#E2C488,#C8A96E)!important;color:#23180a!important;}

/* ── 11. PLANTS REMOVED (Nave 2026-06-15: dropped the botanical theme on this page) ──
   Every decorative watercolor sprig/branch removed. Hero collapses to a single text
   column (no empty art column). Dividers become a faint centered gold hairline instead
   of a sprig. The corner branch wash on the timeline + month sections is hidden. */
.aa-hero-art, .aa-hero-wc{display:none!important;}
.aa-hero-grid{grid-template-columns:1fr!important;}
.aa-wc-divider{background:linear-gradient(90deg,transparent,rgba(200,169,110,.35),transparent)!important;-webkit-mask-image:none!important;mask-image:none!important;block-size:1px!important;inline-size:min(120px,40%)!important;margin-inline:auto!important;margin-block:44px!important;}
.aa-wash-corner::before{display:none!important;}

/* ── 12. v6 chrome — SINGLE-SOURCE in style.css (2026-06-22). The v6 nav background (.94 opaque
   forest), the .v6-nav.scrolled state, and the nav typography/color lock all live once in style.css
   now, so EVERY page (this one included) renders identical chrome. The earlier per-page .92
   background + .nav-links .72 color overrides here were exactly the divergence Nave caught on
   /blog/voice-dna/; removed so the header pulls from exactly one source. ── */