/* Shared styles for guide pages and the blog. Same palette and type as the home page. */
:root{
  --bg:#FBF8F1; --surface:#FFFDF8; --sage-50:#EDF3EB; --sage-100:#DCE8D9; --sage:#6E9A76; --green:#2F6B45; --on-green:#FFFFFF;
  --peach-50:#FDEEE3; --peach:#F5C4A6; --terra:#C0602F; --ink:#25302A; --muted:#56635A; --line:#E4DDCF;
  --shadow:0 1px 2px rgba(47,70,52,.06),0 8px 24px rgba(47,70,52,.08); --focus:#C0602F;
  --display:"Young Serif","Tiro Devanagari Hindi",Georgia,serif;
  --body:"Atkinson Hyperlegible Next","Hind",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-sm:10px; --r:18px; --r-lg:28px; --lh:1.7; --ls:0; --ws:0; --fs-user:1;
}
html[data-nn-theme="dark"]{
  color-scheme:dark;
  --bg:#161E19; --surface:#1F2922; --sage-50:#223027; --sage-100:#2B3C31; --sage:#86B08E; --green:#95C9A1; --on-green:#10201A;
  --peach-50:#33261F; --peach:#7A4B35; --terra:#F2A57E; --ink:#EEEADF; --muted:#B5BFB5; --line:#34413A;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); --focus:#F2A57E;
}
html.hc{ --bg:#FFFFFF; --surface:#FFFFFF; --sage-50:#FFFFFF; --sage-100:#F2F2F2; --ink:#000; --muted:#1A1A1A; --green:#0A4521; --on-green:#fff; --line:#000; --terra:#8A3008; --peach-50:#FFF; --peach:#FFD9C2; --focus:#0000EE; --shadow:none; }
html.hc.isdark{ --bg:#000; --surface:#000; --sage-50:#000; --sage-100:#111; --ink:#fff; --muted:#EEE; --green:#9CF0B4; --on-green:#000; --line:#fff; --terra:#FFB38A; --peach-50:#000; --peach:#5a2e18; --focus:#FFE600; }
html.calm{ --peach-50:var(--sage-50); --peach:var(--sage-100); --terra:var(--muted); --shadow:none; }
html.calm *, html.calm *::before, html.calm *::after{ animation:none!important; transition:none!important; }
html.easy{ --body:"Lexend","Hind",system-ui,sans-serif; --lh:1.9; --ls:.02em; --ws:.12em; }
html.ul a{ text-decoration:underline!important; text-underline-offset:3px; }
html[data-size="1"]{--fs-user:1.125} html[data-size="2"]{--fs-user:1.25} html[data-size="3"]{--fs-user:1.4}
html{font-size:calc(100% * var(--fs-user))}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:var(--lh); letter-spacing:var(--ls); word-spacing:var(--ws); padding-inline:16px; overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.25; text-wrap:balance; margin:0; letter-spacing:0; word-spacing:0}
h1{font-size:clamp(2rem,5vw,3rem)} h2{font-size:clamp(1.45rem,3vw,1.9rem)} h3{font-size:1.2rem}
a{color:var(--green)}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}
img{max-width:100%; height:auto}
.wrap{max-width:68rem; margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute; left:16px; top:-60px; background:var(--green); color:var(--on-green); padding:10px 16px; border-radius:10px; z-index:100}
.skip:focus{top:10px}
.eyebrow{font-size:.8rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--terra); margin:0}
.muted{color:var(--muted)}

/* header */
header.top{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(8px); margin-inline:-16px; padding-inline:16px; border-bottom:1px solid var(--line)}
.hbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-height:4.25rem; padding-block:6px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--terra); margin-right:auto}
.brand img{width:40px; height:auto}
.brand b{font-family:var(--display); font-weight:400; font-size:1.3rem; line-height:1}
.brand small{display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-top:3px; font-weight:700; white-space:nowrap}
nav.main{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; min-width:0}
nav.main a{white-space:nowrap; padding:10px 12px; border-radius:999px; text-decoration:none; color:var(--ink); font-weight:500; font-size:.95rem}
nav.main a:hover, nav.main a[aria-current]{background:var(--sage-50)}
.hbtn{min-height:44px; min-width:44px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); padding:0 14px; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.9rem; color:var(--ink); text-decoration:none; white-space:nowrap}
.help-now{background:var(--peach-50); border-color:var(--peach)}
@media (max-width:900px){ nav.main{order:5; width:100%; padding-bottom:6px} }
@media (max-width:420px){ .brand small{display:none} .brand b{font-size:1.1rem} .hbtn{padding:0 10px} }

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:999px; border:2px solid transparent; font-weight:700; text-decoration:none; cursor:pointer; font:inherit; font-weight:700}
.btn-primary{background:var(--green); color:var(--on-green)}
.btn-soft{background:var(--surface); color:var(--green); border-color:var(--sage-100)}

/* article layout */
.crumbs{font-size:.88rem; color:var(--muted); padding-top:24px}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0}
.crumbs li+li::before{content:"›"; margin-right:6px}
.crumbs a{color:var(--muted)}
.page-head{display:grid; gap:14px; padding-block:24px 8px; max-width:46rem}
.page-head .lede{font-size:1.18rem; color:var(--muted); margin:0}
.byline{display:flex; align-items:center; gap:12px; font-size:.92rem; color:var(--muted); line-height:1.45}
.byline > span{display:grid; gap:2px}
.byline img{width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--peach)}
.byline b{color:var(--ink)}
.tools{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.tools a{font-size:.9rem; font-weight:700; text-decoration:none; border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 14px; color:var(--green)}
.layout{display:grid; grid-template-columns:minmax(0,46rem) minmax(0,18rem); gap:48px; align-items:start; padding-block:16px 56px}
@media (max-width:980px){ .layout{grid-template-columns:minmax(0,1fr)} }
.prose{max-width:46rem}
.prose > * + *{margin-top:1.05em}
.prose h2{margin-top:1.9em}
.prose h3{margin-top:1.5em}
.prose p, .prose li{max-width:68ch}
.prose ul, .prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose blockquote{margin-inline:0; padding:14px 18px; border-left:4px solid var(--sage); background:var(--sage-50); border-radius:0 var(--r) var(--r) 0; font-family:var(--display); color:var(--ink)}
.prose table{border-collapse:collapse; width:100%; font-size:.95rem; display:block; overflow-x:auto}
.prose th, .prose td{border:1px solid var(--line); padding:8px 12px; text-align:left; vertical-align:top}
.prose th{background:var(--sage-50)}
.note{background:var(--peach-50); border:1.5px solid var(--peach); border-radius:var(--r); padding:16px 18px}
.note.calm{background:var(--sage-50); border-color:var(--sage-100)}
.steps-list{counter-reset:s; list-style:none; padding:0!important}
.steps-list li{counter-increment:s; position:relative; padding-left:48px; min-height:36px}
.steps-list li::before{content:counter(s); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background:var(--green); color:var(--on-green); display:grid; place-items:center; font-weight:700; font-size:.95rem}
.cta{background:var(--sage-50); border-radius:var(--r-lg); padding:clamp(22px,4vw,34px); display:grid; gap:12px; margin-top:2.2em}
.cta h2{margin:0!important}
.cta .row{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.faq details{border:1.5px solid var(--line); border-radius:var(--r); background:var(--surface); padding:4px 18px}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:700; padding:12px 0; min-height:44px}
.faq details > div{padding-bottom:14px}

/* sidebar */
.side{display:grid; gap:16px; position:sticky; top:96px}
@media (max-width:980px){ .side{position:static} }
.side .card{background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:20px; display:grid; gap:10px}
.side .card h2{font-size:1.15rem}
.side ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.side ul a{text-decoration:none; font-weight:500}
.side ul a:hover{text-decoration:underline}
.side .help{background:var(--peach-50); border-color:var(--peach)}
.side .help a{font-weight:700; font-variant-numeric:tabular-nums}

/* cards (blog + guides index) */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr)); gap:18px; padding:0; margin:0; list-style:none}
.cards > li{background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px; display:grid; gap:8px; align-content:start; position:relative}
.cards > li:hover{border-color:var(--sage)}
.cards h2, .cards h3{font-size:1.2rem}
.cards a.stretch{text-decoration:none; color:var(--ink)}
.cards a.stretch::after{content:""; position:absolute; inset:0; border-radius:inherit}
.cards .meta{font-size:.85rem; color:var(--muted)}
.cards p{margin:0; color:var(--muted)}
.tag{display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--terra)}
.section{padding-block:24px 48px}
.section > h2{margin-bottom:18px}
.status{color:var(--muted); font-size:.95rem}

/* footer */
footer{border-top:1.5px solid var(--line); padding-block:36px 28px; margin-top:24px}
.fgrid{display:flex; flex-wrap:wrap; gap:24px 48px; justify-content:space-between}
.fgrid nav{display:grid; gap:6px; align-content:start}
.fgrid nav b{font-size:.95rem}
.fgrid nav a{color:var(--ink); text-decoration:none; font-size:.95rem}
.fgrid nav a:hover{text-decoration:underline}
.fgrid .about{max-width:40ch; color:var(--muted); font-size:.92rem; margin-top:10px}
.copy{margin-top:24px; font-size:.85rem; color:var(--muted)}
.wa-float{position:fixed; right:16px; bottom:16px; z-index:30; background:#1F7A4A; color:#fff; border-radius:999px; padding:0 18px; min-height:52px; display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; box-shadow:var(--shadow)}
body{padding-bottom:88px}
@media print{ header.top, .side, .wa-float, footer, .tools{display:none!important} }