/* =========================================================
   Plainpurse — ledger/statement visual system
   Palette:
     --ink        #122620  deep pine-ink (headlines, nav, body text)
     --ink-soft   #4B5A53  muted slate-green (secondary text)
     --paper      #EFF1EC  pale sage paper (page background)
     --paper-deep #E4E7DF  slightly deeper paper (alt sections)
     --card       #FBFBF8  near-white card surface
     --rule       #C9CCC2  hairline ledger rule
     --settled    #1F7A5C  settled green (positive, CTAs, links)
     --settled-dk #15573F  settled green, pressed/hover
     --caution    #B5502B  caution rust (negative figures, warnings only)
   Type:
     Display  — 'Space Grotesk' (headlines, wordmark)
     Body     — 'Inter' (prose, UI labels)
     Data     — 'IBM Plex Mono' (every figure, amount, %, calculator output)
   ========================================================= */

:root{
  --ink:#122620;
  --ink-soft:#4B5A53;
  --paper:#EFF1EC;
  --paper-deep:#E4E7DF;
  --card:#FBFBF8;
  --rule:#C9CCC2;
  --settled:#1F7A5C;
  --settled-dk:#15573F;
  --caution:#B5502B;
  --caution-bg:#F3E4DC;
  --max:1120px;
  --radius:4px;
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.wordmark,.btn,.nav a,.tag{
  font-family:'Space Grotesk',system-ui,sans-serif;
}

h1,h2,h3,h4{
  color:var(--ink);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,4.4vw,3.1rem);}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem);}
h3{font-size:1.3rem;}
h4{font-size:1.05rem;}

p{margin:0 0 1.1em;}
a{color:var(--settled); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--settled);
  outline-offset:2px;
}

.figure,.num,.amount,td.num,.stat-num,.q-result strong,.result-figure{
  font-family:'IBM Plex Mono',monospace;
  font-variant-numeric:tabular-nums;
}

img{max-width:100%;display:block;}
ul{padding-left:1.2em;}
.container{max-width:var(--max); margin:0 auto; padding:0 24px;}
.container--narrow{max-width:760px;}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:var(--max); margin:0 auto; gap:16px;
}
.wordmark{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:1.25rem; color:var(--ink); text-decoration:none;
}
.wordmark:hover{text-decoration:none;}
.wordmark .tick{
  width:22px;height:22px; border:1.6px solid var(--ink); border-radius:3px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.wordmark .tick svg{width:13px;height:13px;}

.nav{display:flex; align-items:center; gap:22px;}
.nav a{color:var(--ink); font-size:.95rem; font-weight:500; padding:6px 2px; position:relative;}
.nav a:hover{text-decoration:none; color:var(--settled);}
.nav .dropdown{position:relative;}
.nav .dropdown-menu{
  position:absolute; top:100%; left:0; padding-top:10px; margin-top:-1px;
  background:transparent;
  display:none;
}
.nav .dropdown-menu .dropdown-menu-inner{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  min-width:210px; padding:8px; box-shadow:0 8px 24px rgba(18,38,32,.08);
}
.nav .dropdown:hover .dropdown-menu,.nav .dropdown:focus-within .dropdown-menu,.nav .dropdown.open .dropdown-menu{display:block;}
.nav .dropdown-menu a{display:block; padding:8px 10px; border-radius:3px; font-weight:400;}
.nav .dropdown-menu a:hover{background:var(--paper-deep); text-decoration:none;}

.nav-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{
  width:38px;height:38px; border:1px solid var(--rule); background:var(--card);
  border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink);
}
.icon-btn:hover{border-color:var(--ink);}
.nav-toggle{display:none;}

@media (max-width:880px){
  .nav{position:fixed; inset:64px 0 0 0; background:var(--paper); flex-direction:column;
       align-items:flex-start; padding:20px 24px; gap:4px; overflow-y:auto;
       transform:translateX(100%); transition:transform .25s ease; border-top:1px solid var(--rule);}
  .nav.open{transform:translateX(0);}
  .nav a{width:100%; padding:12px 0; border-bottom:1px solid var(--rule);}
  .nav .dropdown-menu{position:static; display:block; padding:0; margin-top:0;}
  .nav .dropdown-menu .dropdown-menu-inner{border:none; padding:0 0 0 12px; box-shadow:none; background:transparent;}
  .nav-toggle{display:flex;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:var(--radius); font-weight:600; font-size:.95rem;
  border:1.5px solid var(--ink); cursor:pointer; line-height:1; text-decoration:none;
}
.btn:hover{text-decoration:none;}
.btn-solid{background:var(--settled); border-color:var(--settled); color:#fff;}
.btn-solid:hover{background:var(--settled-dk); border-color:var(--settled-dk);}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}
.btn-sm{padding:8px 14px; font-size:.85rem;}
.btn-block{width:100%; justify-content:center;}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px; border-bottom:1px solid var(--rule);}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr;}}
.eyebrow{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--settled-dk);
  background:var(--paper-deep); border:1px solid var(--rule); padding:4px 10px;
  border-radius:3px; margin-bottom:16px;
}
.hero p.lede{font-size:1.15rem; color:var(--ink-soft); max-width:46ch;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px;}

/* mini-ledger signature widget in hero */
.mini-ledger{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  padding:22px 24px; box-shadow:0 10px 30px rgba(18,38,32,.06);
}
.mini-ledger .ml-title{font-family:'IBM Plex Mono',monospace; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); margin-bottom:14px;}
.ml-row{display:flex; justify-content:space-between; font-size:.95rem; padding:7px 0; border-bottom:1px dashed var(--rule);}
.ml-row .num{color:var(--ink);}
.ml-row.out .num{color:var(--caution);}
.ml-total{display:flex; justify-content:space-between; padding-top:14px; font-weight:700; font-size:1.05rem;}
.ml-total .num{font-size:1.2rem; color:var(--settled-dk);}
.total-rule{border-top:1.5px solid var(--ink); border-bottom:3px double var(--ink); padding:6px 0 4px; margin-top:2px;}

/* double-rule "settled total" — recurring signature for any hero figure */
.settled-total{
  border-top:1.5px solid var(--ink);
  border-bottom:3px double var(--ink);
  padding:10px 0;
  display:inline-block;
}

/* ---------- stat strip ---------- */
.stat-strip{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--rule);}
.stat-strip .stat{padding:28px 24px; text-align:center; border-left:1px solid var(--rule);}
.stat-strip .stat:first-child{border-left:none;}
.stat-num{font-size:1.9rem; font-weight:700; color:var(--settled-dk); display:block;}
.stat-label{font-size:.85rem; color:var(--ink-soft);}
@media (max-width:700px){.stat-strip{grid-template-columns:1fr;} .stat-strip .stat{border-left:none; border-bottom:1px solid var(--rule);} .stat-strip .stat:last-child{border-bottom:none;}}

/* ---------- sections ---------- */
.section{padding:56px 0;}
.section--alt{background:var(--paper-deep);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap;}
.section-head p{color:var(--ink-soft); margin:0;}

/* ---------- cards / grids ---------- */
.grid{display:grid; gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:880px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; gap:8px;
}
.cat-card{border-left:3px solid var(--settled);}
.cat-card .cat-no{font-family:'IBM Plex Mono',monospace; font-size:.75rem; color:var(--ink-soft);}
.cat-card h3{margin-bottom:2px;}
.cat-card p{color:var(--ink-soft); font-size:.93rem; margin-bottom:6px;}
.card-link{font-size:.88rem; font-weight:600;}

.tool-card{align-items:flex-start;}
.tool-icon{width:38px;height:38px; display:flex; align-items:center; justify-content:center; border:1.4px solid var(--ink); border-radius:6px; margin-bottom:6px;}
.tool-icon svg{width:20px;height:20px;}

.article-card .meta{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}
.article-card h3{font-size:1.1rem;}

/* ---------- trust strip ---------- */
.trust-strip{display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start;}
.trust-item{flex:1; min-width:220px;}
.trust-item h4{margin-bottom:4px; display:flex; gap:8px; align-items:center;}
.trust-item p{color:var(--ink-soft); font-size:.93rem; margin-bottom:0;}

/* ---------- ad slots ---------- */
.ad-slot{
  margin:32px 0; padding:14px; border:1px dashed var(--rule); border-radius:var(--radius);
  background:var(--card); text-align:center; min-height:90px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.ad-label{font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft);}
.ad-slot--leaderboard{min-height:100px;}
.ad-slot--incontent{min-height:120px;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--rule); background:var(--paper-deep); padding:48px 0 24px; margin-top:40px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h5{font-family:'IBM Plex Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); margin-bottom:12px;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.footer-grid a{color:var(--ink); font-size:.92rem;}
.footer-grid a:hover{color:var(--settled);}
.footer-bottom{
  border-top:1px solid var(--rule); margin-top:32px; padding-top:18px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:var(--ink-soft);
}
.footer-disclaimer{max-width:760px; font-size:.82rem; color:var(--ink-soft); margin-top:18px; line-height:1.5;}

/* ---------- cookie banner ---------- */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--card); border-top:1px solid var(--ink);
  padding:18px 24px; display:none; box-shadow:0 -8px 24px rgba(18,38,32,.1);
}
#cookie-banner.show{display:block;}
.cookie-inner{max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cookie-inner p{margin:0; font-size:.88rem; color:var(--ink-soft); max-width:640px;}
.cookie-actions{display:flex; gap:10px; flex:none;}

/* ---------- breadcrumb ---------- */
.breadcrumb{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ink-soft); margin-bottom:18px;}
.breadcrumb a{color:var(--ink-soft);}

/* ---------- article ---------- */
.article-head{padding:48px 0 28px; border-bottom:1px solid var(--rule);}
.article-head .tag{display:inline-block; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--settled-dk); background:var(--paper-deep); border:1px solid var(--rule); padding:3px 9px; border-radius:3px; margin-bottom:14px;}
.article-meta{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--ink-soft); margin-top:14px;}
.article-body{padding:36px 0;}
.article-body h2{margin-top:1.6em;}
.article-body h2:first-child{margin-top:0;}
.callout{background:var(--paper-deep); border-left:3px solid var(--settled); padding:16px 18px; border-radius:0 var(--radius) var(--radius) 0; font-size:.95rem; margin:24px 0;}
.callout.caution{border-left-color:var(--caution); background:var(--caution-bg);}
.callout strong{display:block; margin-bottom:4px;}

.share-row{display:flex; gap:8px; align-items:center; margin:28px 0; flex-wrap:wrap;}
.share-row span.lbl{font-size:.85rem; color:var(--ink-soft); margin-right:4px;}
.share-btn{
  width:36px;height:36px; border:1px solid var(--rule); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  background:var(--card); cursor:pointer;
}
.share-btn:hover{border-color:var(--ink); text-decoration:none;}
.share-btn svg{width:16px;height:16px;}

.feedback-box{border:1px solid var(--rule); border-radius:var(--radius); padding:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:28px 0;}
.feedback-box .fb-actions{display:flex; gap:8px;}
.fb-btn{border:1px solid var(--rule); background:var(--card); padding:8px 14px; border-radius:var(--radius); cursor:pointer; font-family:'Inter';}
.fb-btn:hover{border-color:var(--settled);}
.fb-btn.active{background:var(--settled); color:#fff; border-color:var(--settled);}

.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px;}
@media (max-width:760px){.related-grid{grid-template-columns:1fr;}}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; margin:18px 0;}
th,td{padding:9px 10px; border-bottom:1px solid var(--rule); text-align:left; font-size:.92rem;}
th{font-family:'Space Grotesk'; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}

/* ---------- glossary ---------- */
.glossary-search{margin-bottom:24px;}
.glossary-letter{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--settled-dk); margin:28px 0 8px; border-bottom:1px solid var(--rule); padding-bottom:4px;}
.glossary-term{padding:14px 0; border-bottom:1px solid var(--rule);}
.glossary-term dt{font-weight:700; font-size:1.02rem;}
.glossary-term dd{margin:4px 0 0; color:var(--ink-soft);}
.glossary-empty{display:none; color:var(--ink-soft); padding:20px 0;}

/* ---------- FAQ accordion ---------- */
.faq-item{border-bottom:1px solid var(--rule);}
.faq-item summary{
  cursor:pointer; padding:16px 0; font-weight:600; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .faq-no{font-family:'IBM Plex Mono',monospace; color:var(--ink-soft); font-weight:400; font-size:.8rem; margin-right:10px;}
.faq-item summary .plus{font-size:1.3rem; color:var(--settled); flex:none;}
.faq-item[open] summary .plus{transform:rotate(45deg);}
.faq-item p{color:var(--ink-soft); padding-bottom:16px; margin:0;}

/* ---------- forms / tools ---------- */
.tool-shell{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;}
@media (max-width:880px){.tool-shell{grid-template-columns:1fr;}}
.field{margin-bottom:16px;}
.field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:6px;}
.field .hint{font-size:.78rem; color:var(--ink-soft); margin-top:4px;}
input[type=number],input[type=text],input[type=range],select{
  width:100%; padding:10px 12px; border:1px solid var(--rule); border-radius:var(--radius);
  font-family:'IBM Plex Mono',monospace; font-size:.95rem; background:var(--card); color:var(--ink);
}
input[type=range]{padding:0; accent-color:var(--settled);}
.tabs{display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--rule); flex-wrap:wrap;}
.tab-btn{
  padding:10px 16px; border:none; background:transparent; cursor:pointer;
  font-family:'Space Grotesk'; font-weight:600; font-size:.92rem; color:var(--ink-soft);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-btn.active{color:var(--settled-dk); border-bottom-color:var(--settled);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.result-card{background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:24px; position:sticky; top:96px;}
.result-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--rule); font-size:.94rem;}
.result-row .num{font-weight:600;}
.result-row.bad .num{color:var(--caution);}
.result-row.good .num{color:var(--settled-dk);}
.result-figure{font-size:2rem; font-weight:700; display:block; margin:4px 0 2px; color:var(--settled-dk);}
.result-figure.bad{color:var(--caution);}

.bar-wrap{margin:10px 0;}
.bar-label{display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:4px;}
.bar-track{height:10px; background:var(--paper-deep); border-radius:6px; overflow:hidden;}
.bar-fill{height:100%; background:var(--settled); border-radius:6px;}
.bar-fill.over{background:var(--caution);}

.quiz-q{margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--rule);}
.quiz-q p.qtext{font-weight:600; margin-bottom:10px;}
.quiz-opts{display:flex; flex-direction:column; gap:8px;}
.quiz-opt{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--rule); border-radius:var(--radius); cursor:pointer;}
.quiz-opt:hover{border-color:var(--settled);}
.quiz-opt input{margin-top:3px;}
#quiz-result{display:none; margin-top:24px;}
#quiz-result.show{display:block;}
.quiz-band{font-family:'Space Grotesk'; font-weight:700; font-size:1.3rem; color:var(--settled-dk);}

/* ---------- legal pages ---------- */
.legal-body h2{margin-top:1.8em;}
.legal-body p,.legal-body li{color:var(--ink-soft);}
.legal-updated{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--ink-soft); margin-bottom:30px;}

/* ---------- author bio ---------- */
.bio-card{display:flex; gap:18px; align-items:flex-start;}
.bio-avatar{width:64px; height:64px; border-radius:50%; background:var(--paper-deep); border:1.5px solid var(--ink); flex:none; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; color:var(--ink);}
.bio-role{font-size:.85rem; color:var(--settled-dk); font-weight:600; margin-bottom:6px;}

/* ---------- header search bar ---------- */
.header-search{position:relative; display:flex; align-items:center; flex:1 1 auto; max-width:220px; min-width:90px;}
.header-search-icon{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--ink-soft); pointer-events:none;
}
.header-search input{
  width:100%; padding:9px 10px 9px 32px; border:1px solid var(--rule); border-radius:18px;
  font-family:'Inter',sans-serif; font-size:.88rem; background:var(--card); color:var(--ink);
}
.header-search input:focus{border-color:var(--settled);}
.header-search-results{
  position:absolute; top:calc(100% + 8px); right:0;
  width:min(320px, 88vw); max-height:60vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(18,38,32,.12); padding:6px; display:none; z-index:60;
}
.header-search-results.show{display:block;}
.header-search-results a{display:block; padding:9px 8px; border-radius:3px; color:var(--ink);}
.header-search-results a:hover{background:var(--paper-deep); text-decoration:none;}
.header-search-results .sr-type{font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--ink-soft); text-transform:uppercase;}
@media (max-width:600px){
  .header-search{max-width:140px;}
  .header-search input{font-size:.82rem; padding:8px 8px 8px 28px;}
}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:100;}
.skip-link:focus{left:12px; top:12px;}