/* ==========================================================================
   CLT Total, shared stylesheet
   One file cached across every page. Edit design tokens in :root.
   ========================================================================== */
:root{
  --paper:#F6F7F3; --card:#FFFFFF;
  --ink:#16211B; --body:#33413A; --muted:#4A574F;
  --green-900:#0C3B2B; --green-800:#10462F; --green-700:#15603F; --green-600:#1C7A4D; --green-50:#EAF2EC;
  --gold:#8F6C18; --gold-soft:#B98F2E; --gold-bg:#F4EEDD;
  --border:#E2E6DE; --border-strong:#CBD3CA;
  --error:#B23A2E; --error-bg:#FBEEEC;
  --shadow-sm:0 1px 2px rgba(16,40,30,.06);
  --shadow-md:0 4px 14px rgba(16,40,30,.08);
  --shadow-lg:0 10px 34px rgba(16,40,30,.14);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --maxw:1120px; --radius:10px; --radius-sm:7px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:"Atkinson Hyperlegible",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:"Lora",Georgia,serif; color:var(--ink); line-height:1.2; margin:0}
a{color:var(--green-700); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5)}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); font-weight:500}
.skip{position:absolute; left:-9999px; top:auto}
.skip:focus{left:16px; top:12px; z-index:60; background:var(--green-700); color:#fff; padding:10px 16px; border-radius:7px}

/* focus visibility */
a:focus-visible,button:focus-visible,.card:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--green-600); outline-offset:3px; border-radius:var(--radius-sm)}

/* ---------- top bar ---------- */
header.topbar{background:var(--paper); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:10px}
.seal{width:34px; height:34px; flex:none}
.brand .name{font-family:"Lora",serif; font-weight:700; font-size:21px; color:var(--ink); letter-spacing:-.01em}
.brand .name b{color:var(--green-700)}
.brand:hover{text-decoration:none}
nav.main{display:flex; align-items:center; gap:var(--sp-5)}
nav.main a{color:var(--body); font-size:15.5px; font-weight:400}
nav.main a:hover{color:var(--green-700); text-decoration:none}
nav.main a.nav-cta{display:inline-flex; align-items:center; gap:7px; background:var(--green-700); color:#fff; padding:9px 16px; border-radius:var(--radius-sm); font-weight:700; font-size:15px}
nav.main a.nav-cta:hover{background:var(--green-800); color:#fff; text-decoration:none}
.menu-btn{display:none; background:none; border:1px solid var(--border-strong); border-radius:7px; padding:8px; cursor:pointer}
.brand .logo{height:40px; width:auto; display:block}
/* ---- Calculadoras dropdown ---- */
.has-drop{position:relative; display:flex; align-items:center}
.has-drop::after{content:""; position:absolute; top:100%; left:0; right:0; height:14px}
.drop-toggle{display:inline-flex; align-items:center; gap:5px; color:var(--body); font-size:15.5px; font-weight:400; cursor:pointer}
.drop-toggle:hover{color:var(--green-700); text-decoration:none}
.drop-toggle .chev{transition:transform .18s ease}
.has-drop:hover .drop-toggle .chev,.has-drop.open .drop-toggle .chev{transform:rotate(180deg)}
.drop-menu{position:absolute; top:calc(100% + 12px); left:0; min-width:236px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:8px; display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease; z-index:40}
.has-drop:hover .drop-menu,.has-drop:focus-within .drop-menu,.has-drop.open .drop-menu{opacity:1; visibility:visible; transform:translateY(0)}
.drop-menu a{padding:9px 12px; border-radius:6px; font-size:15px; font-weight:400; color:var(--body); white-space:nowrap}
.drop-menu a:hover{background:var(--paper); color:var(--green-700); text-decoration:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:700; border-radius:var(--radius-sm); padding:13px 22px; font-size:16px; cursor:pointer; border:1px solid transparent; transition:background .2s ease,border-color .2s ease,color .2s ease; text-decoration:none}
.btn.btn-primary{background:var(--green-600); color:#fff; text-decoration:none}
.btn.btn-primary:hover{background:var(--green-700); color:#fff; text-decoration:none}
.btn.btn-ghost{background:transparent; color:var(--green-800); border-color:var(--border-strong); text-decoration:none}
.btn.btn-ghost:hover{border-color:var(--green-600); background:var(--green-50); color:var(--green-800); text-decoration:none}

/* ---------- hero (home) ---------- */
.hero{padding:var(--sp-8) 0 var(--sp-7)}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-8); align-items:center}
.hero h1{font-size:clamp(30px,4.4vw,46px); font-weight:600; letter-spacing:-.015em}
.hero h1 em{font-style:normal; color:var(--green-700)}
.hero p.lead{font-size:19px; color:var(--body); margin:var(--sp-4) 0 0; max-width:33ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6)}
.trust-line{display:flex; align-items:center; gap:9px; margin-top:var(--sp-5); color:var(--muted); font-size:14.5px}
.trust-line svg{flex:none; color:var(--green-600)}

/* holerite sample (signature) */
.holerite{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; max-width:420px; margin:0 auto}
.holerite .hl-head{background:var(--green-900); color:#fff; padding:16px 20px; display:flex; align-items:center; justify-content:space-between}
.holerite .hl-head .t{font-family:"Lora",serif; font-weight:600; font-size:16px}
.holerite .hl-head .tag{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--gold-soft); text-transform:uppercase}
.holerite .hl-body{padding:8px 20px 4px}
.hl-row{display:flex; align-items:baseline; justify-content:space-between; padding:11px 0; border-bottom:1px dashed var(--border)}
.hl-row .lbl{font-size:14.5px; color:var(--body)}
.hl-row .val{font-family:"IBM Plex Mono",monospace; font-size:15px; color:var(--ink); font-weight:500}
.hl-row.desc .val{color:var(--error)}
.hl-total{display:flex; align-items:baseline; justify-content:space-between; padding:16px 20px; background:var(--green-50); border-top:2px solid var(--green-600)}
.hl-total .lbl{font-family:"Lora",serif; font-weight:600; font-size:16px; color:var(--ink)}
.hl-total .val{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:22px; color:var(--green-700)}
.hl-foot{padding:11px 20px; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted); letter-spacing:.03em; text-align:center}

/* ---------- tools section ---------- */
section.tools{padding:var(--sp-8) 0}
.sec-head{margin-bottom:var(--sp-6); max-width:60ch}
.sec-head h2{font-size:clamp(24px,3vw,32px); font-weight:600; margin-top:8px}
.sec-head p{margin:10px 0 0; color:var(--muted); font-size:16.5px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4)}
.card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-5); text-decoration:none; box-shadow:var(--shadow-sm); transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.card:hover{border-color:var(--green-600); box-shadow:var(--shadow-md); transform:translateY(-2px); text-decoration:none}
.card .ico{width:44px; height:44px; border-radius:10px; background:var(--green-50); color:var(--green-700); display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-4)}
.card h3{font-size:19.5px; font-weight:600}
.card p{margin:7px 0 0; color:var(--body); font-size:15px; line-height:1.5}
.card .legal{margin-top:auto; padding-top:var(--sp-4); font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--gold); letter-spacing:.02em}
.card .go{display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp-3); color:var(--green-700); font-weight:700; font-size:14.5px}
.card:hover .go svg{transform:translateX(3px)}
.card .go svg{transition:transform .2s ease}

/* secondary tools */
.sub-tools{margin-top:var(--sp-6)}
.sub-tools .lbl{font-family:"IBM Plex Mono",monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:var(--sp-4)}
.chips{display:flex; flex-wrap:wrap; gap:var(--sp-3)}
.chip{display:inline-flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:9px 16px 9px 12px; color:var(--body); font-size:14.5px; font-weight:400; transition:border-color .2s ease,color .2s ease}
.chip:hover{border-color:var(--green-600); color:var(--green-800); text-decoration:none}
.chip svg{color:var(--green-700); flex:none}

/* ---------- trust band ---------- */
section.trust{background:var(--green-900); color:#DDE7DF; padding:var(--sp-8) 0}
section.trust .eyebrow{color:var(--gold-soft)}
section.trust h2{color:#fff; font-size:clamp(23px,2.8vw,30px); font-weight:600; margin-top:8px; max-width:24ch}
.trust-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); margin-top:var(--sp-7)}
.trust-item{border-top:2px solid var(--green-600); padding-top:var(--sp-4)}
.trust-item .n{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--gold-soft); letter-spacing:.06em}
.trust-item h3{color:#fff; font-size:19px; font-weight:600; margin:8px 0 8px}
.trust-item p{margin:0; color:#B9C9BE; font-size:15.5px; line-height:1.55}

/* ---------- guides teaser ---------- */
section.guides{padding:var(--sp-8) 0}
.guides-inner{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center}
.guides-inner h2{font-size:clamp(23px,2.8vw,30px); font-weight:600}
.guides-inner p{color:var(--muted); font-size:16.5px; margin:12px 0 0}
.guide-list{display:flex; flex-direction:column; gap:var(--sp-3)}
.guide-list a{display:flex; align-items:center; justify-content:space-between; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; color:var(--ink); font-family:"Lora",serif; font-size:17px; font-weight:500; transition:border-color .2s ease}
.guide-list a:hover{border-color:var(--green-600); text-decoration:none}
.guide-list a span.meta{font-family:"Atkinson Hyperlegible",sans-serif; font-size:13px; color:var(--muted); font-weight:400}

/* ---------- about + faq ---------- */
section.about{padding:var(--sp-8) 0 0}
.about-inner{max-width:760px}
.about-inner h2{font-size:clamp(23px,2.8vw,30px); font-weight:600; margin-top:8px}
.about-inner p{font-size:17px; color:var(--body); margin:16px 0 0}
.about-inner p strong{color:var(--ink)}
section.faq{padding:var(--sp-8) 0}
.faq-inner{max-width:760px}
.faq-list{margin-top:var(--sp-5); border-top:1px solid var(--border)}
.faq-list details{border-bottom:1px solid var(--border)}
.faq-list summary{list-style:none; cursor:pointer; padding:18px 0; font-family:"Lora",serif; font-size:18px; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .ic{flex:none; color:var(--green-600); transition:transform .2s ease}
.faq-list details[open] summary .ic{transform:rotate(45deg)}
.faq-list details p{margin:0 0 20px; color:var(--body); font-size:16px; max-width:66ch; line-height:1.6}

/* ---------- interior page header ---------- */
.page-head{background:var(--green-900); color:#fff; padding:var(--sp-7) 0 var(--sp-8)}
.page-head .eyebrow{color:var(--gold-soft)}
.page-head h1{color:#fff; font-size:clamp(28px,4vw,40px); font-weight:600; margin-top:10px; max-width:22ch}
.page-head p.sub{color:#B9C9BE; margin:14px 0 0; max-width:62ch; font-size:17px}
.page-head .updated{margin-top:18px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--gold-soft); letter-spacing:.04em}
.crumb{font-family:"IBM Plex Mono",monospace; font-size:12px; color:#8FA79A; letter-spacing:.03em; margin-bottom:6px}
.crumb a{color:#8FA79A}
.crumb a:hover{color:#fff}

/* ---------- article prose ---------- */
.prose{max-width:760px; margin:0 auto; padding:var(--sp-8) 0}
.prose > p:first-of-type{font-size:19px; color:var(--body)}
.prose h2{font-size:clamp(22px,2.6vw,28px); font-weight:600; margin:var(--sp-7) 0 var(--sp-3)}
.prose h3{font-size:20px; font-weight:600; color:var(--ink); margin:var(--sp-5) 0 var(--sp-2)}
.prose p{margin:0 0 var(--sp-4); color:var(--body)}
.prose ul,.prose ol{margin:0 0 var(--sp-4); padding-left:22px; color:var(--body)}
.prose li{margin:7px 0}
.prose a{color:var(--green-700); text-decoration:underline}
.prose strong{color:var(--ink)}
.prose .callout{background:var(--green-50); border-left:3px solid var(--green-600); border-radius:8px; padding:16px 18px; margin:0 0 var(--sp-5); color:var(--ink); font-size:15.5px}
.prose .callout strong{color:var(--green-800)}
.table-wrap{overflow-x:auto; margin:0 0 var(--sp-5)}
.prose table{width:100%; border-collapse:collapse; font-size:15px; min-width:420px}
.prose th,.prose td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--border)}
.prose thead th{font-family:"IBM Plex Mono",monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:500; border-bottom:1px solid var(--border-strong)}
.prose td.num,.prose th.num{font-family:"IBM Plex Mono",monospace; text-align:right; white-space:nowrap}
.prose .src{font-size:14px; color:var(--muted)}
.reviewer{display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; margin:var(--sp-5) 0}
.reviewer .rv-ic{width:42px;height:42px;flex:none;border-radius:50%;background:var(--green-50);color:var(--green-700);display:flex;align-items:center;justify-content:center}
.reviewer .rv-t{font-family:"Lora",serif;font-weight:600;color:var(--ink);font-size:16px;margin:0 0 3px}
.reviewer p{margin:0;font-size:14.5px;color:var(--muted)}

/* ---------- forms (contact + future calculators) ---------- */
.form-card{max-width:640px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:var(--sp-6)}

/* ===== Blog / artigos ===== */
.page-head .byline{margin-top:14px; display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--gold-soft); letter-spacing:.03em}
.page-head .byline .who{color:#fff}
.prose .tbl-wrap{overflow-x:auto; margin:0 0 var(--sp-5)}
.prose .keyanswer{background:#FBF7EA; border:1px solid var(--border); border-left:3px solid var(--gold); border-radius:8px; padding:16px 18px; margin:0 0 var(--sp-5)}
.prose .keyanswer p{margin:0; color:var(--ink); font-size:16.5px}
.prose .keyanswer .lbl{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block; margin-bottom:7px}
.cta-tool{background:var(--green-900); color:#fff; border-radius:var(--radius); padding:22px 24px; margin:var(--sp-5) 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px}
.cta-tool .ct-x{min-width:240px; flex:1}
.cta-tool .ct-t{font-family:"Lora",serif; font-weight:600; font-size:18px; color:#fff; margin:0 0 4px}
.cta-tool p{margin:0; color:#B9C9BE; font-size:15px}
.cta-tool .btn{flex:none}
.author-box{max-width:760px; margin:var(--sp-6) auto 0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; display:flex; gap:16px; align-items:flex-start}
.author-box .ab-ic{flex:none; width:44px; height:44px; border-radius:10px; background:var(--green-50); display:flex; align-items:center; justify-content:center; color:var(--green-700)}
.author-box .ab-n{font-family:"Lora",serif; font-weight:600; color:var(--ink); margin:0 0 4px; font-size:16px}
.author-box p{margin:0; font-size:14.5px; color:var(--muted)}
.rel-list{list-style:none; padding:0; margin:0 0 var(--sp-4)}
.rel-list li{margin:0; border-bottom:1px solid var(--border)}
.rel-list li:last-child{border-bottom:none}
.rel-list a{display:block; padding:12px 0; text-decoration:none; color:var(--ink); font-weight:600; font-family:"Lora",serif}
.rel-list a:hover{color:var(--green-700)}
/* Blog index cards */
.blog-list{display:grid; gap:16px; max-width:760px; margin:0 auto; padding:var(--sp-8) 0}
.blog-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); text-decoration:none; display:block; overflow:hidden}
.blog-card:hover{border-color:var(--green-600)}
.blog-card .bc-img{display:block; width:100%; height:auto; border-bottom:1px solid var(--border)}
.blog-card .bc-body{padding:20px 24px}
.blog-card .bc-cat{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); font-weight:600}
/* Featured cover on the article page */
.post-cover{max-width:760px; margin:0 auto; padding:var(--sp-6) 0 0}
.post-cover img{display:block; width:100%; border-radius:var(--radius); border:1px solid var(--border)}
/* Article table of contents (built by clt.js) */
.post-toc{background:var(--green-50); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; margin:var(--sp-5) 0}
.post-toc .toc-t{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 10px}
.post-toc ol{margin:0; padding-left:22px; color:var(--body)}
.post-toc li{margin:6px 0}
.post-toc a{color:var(--green-700); text-decoration:none}
.post-toc a:hover{color:var(--gold); text-decoration:underline}
.prose h2, .prose h3{scroll-margin-top:84px}
.blog-card h2,.blog-card h3{font-family:"Lora",serif; font-size:21px; color:var(--ink); margin:8px 0 6px; font-weight:600}
.blog-card p{margin:0; color:var(--body); font-size:15.5px}
/* Homepage "Do blog" band */
section.home-blog{background:var(--green-50); padding:var(--sp-8) 0}
.home-blog-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:var(--sp-5)}
.home-blog-head h2{font-size:clamp(22px,2.6vw,28px); font-weight:600; margin:6px 0 0; color:var(--ink)}
.blog-all{display:inline-flex; align-items:center; gap:7px; color:var(--green-700); font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap}
.blog-all:hover{color:var(--gold); text-decoration:none}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:860px){.blog-grid{grid-template-columns:1fr 1fr}.home-blog-head{align-items:flex-start}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}
.form-row{margin:0 0 var(--sp-4)}
.form-row label{display:block; font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:6px}
.form-row input,.form-row textarea{width:100%; font-family:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:12px 14px; transition:border-color .15s ease,box-shadow .15s ease}
.form-row input:focus,.form-row textarea:focus{outline:none; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(28,122,77,.16)}
.form-row textarea{min-height:140px; resize:vertical}
.form-hint{font-size:13px; color:var(--muted); margin-top:6px}

/* ---------- 404 ---------- */
.err{min-height:54vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--sp-8) var(--sp-4)}
.err .code{font-family:"IBM Plex Mono",monospace; color:var(--green-600); font-size:14px; letter-spacing:.12em}
.err h1{font-size:clamp(28px,4vw,40px); font-weight:600; margin:10px 0 12px}
.err p{color:var(--muted); max-width:46ch; margin:0 auto var(--sp-5)}
.err-links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}

/* ---------- footer ---------- */
footer{background:var(--paper); border-top:1px solid var(--border); padding:var(--sp-8) 0 var(--sp-6)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--sp-6)}
.foot-brand .name{font-family:"Lora",serif; font-weight:700; font-size:20px; color:var(--ink)}
.foot-brand .name b{color:var(--green-700)}
.foot-brand p{color:var(--muted); font-size:14.5px; margin:12px 0 0; max-width:34ch}
.foot-col h4{font-family:"IBM Plex Mono",monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:500; margin:0 0 14px}
.foot-col a{display:block; color:var(--body); font-size:15px; padding:5px 0}
.foot-col a:hover{color:var(--green-700); text-decoration:none}
.foot-bottom{border-top:1px solid var(--border); margin-top:var(--sp-7); padding-top:var(--sp-5); display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between; align-items:center}
.foot-bottom p{margin:0; font-size:13.5px; color:var(--muted); max-width:70ch}
.foot-bottom .cr{font-family:"IBM Plex Mono",monospace; font-size:12.5px}

/* ---------- cookie consent (LGPD) ---------- */
.cookie{position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--card); border-top:1px solid var(--border-strong); box-shadow:var(--shadow-lg)}
.cookie-inner{max-width:var(--maxw); margin:0 auto; padding:16px var(--sp-5); display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap}
.cookie-inner p{margin:0; flex:1 1 320px; font-size:14px; color:var(--body)}
.cookie-inner p a{color:var(--green-700); text-decoration:underline}
.cookie-actions{display:flex; gap:10px; flex:none}
.cookie-actions .btn{padding:10px 18px; font-size:14.5px}

/* ---------- calculators (shared across all tool pages) ---------- */
.calc-shell{display:grid; grid-template-columns:1fr; gap:var(--sp-6); align-items:start}
@media(min-width:900px){.calc-shell{grid-template-columns:1.02fr .98fr}}
.calc-form{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:var(--sp-6)}
.calc-form h2{font-size:20px; font-weight:600; margin-bottom:var(--sp-4)}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
@media(max-width:520px){.field-grid{grid-template-columns:1fr}}
.field{margin:0 0 var(--sp-4)}
.field label{display:block; font-weight:700; font-size:14px; color:var(--ink); margin-bottom:6px}
.field input,.field select{width:100%; font-family:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:11px 13px; transition:border-color .15s ease,box-shadow .15s ease}
.field input:focus,.field select:focus{outline:none; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(28,122,77,.16)}
.field .hint{font-size:12.5px; color:var(--muted); margin-top:5px}
.field.invalid input,.field.invalid select{border-color:var(--error); background:var(--error-bg)}
.err-msg{display:none; color:var(--error); font-size:13px; margin-top:5px; font-weight:700}
.field.invalid .err-msg{display:block}
fieldset.types{border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; margin:0 0 var(--sp-4)}
fieldset.types legend{font-weight:700; font-size:14px; color:var(--ink); padding:0 6px}
.type-opt{display:flex; align-items:flex-start; gap:10px; padding:9px 0; cursor:pointer; border-bottom:1px solid var(--border)}
.type-opt:last-child{border-bottom:none}
.type-opt input{margin-top:4px; flex:none}
.type-opt .to-t{font-weight:700; color:var(--ink); font-size:15px; display:block}
.type-opt .to-d{font-size:12.5px; color:var(--muted)}
.result{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; position:sticky; top:82px}
.result .r-head{background:var(--green-900); color:#fff; padding:16px 20px; display:flex; justify-content:space-between; align-items:center}
.result .r-head .t{font-family:"Lora",serif; font-weight:600; font-size:16px}
.result .r-head .tag{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--gold-soft); text-transform:uppercase}
.r-section{padding:2px 20px}
.r-section h4{font-family:"IBM Plex Mono",monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:16px 0 2px}
.vrow{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-bottom:1px dashed var(--border)}
.vrow .vl{font-size:14.5px; color:var(--body)}
.vrow .vl .art{display:block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--gold); margin-top:2px}
.vrow .vv{font-family:"IBM Plex Mono",monospace; font-size:15px; color:var(--ink); font-weight:500; white-space:nowrap}
.vrow.debit .vv{color:var(--error)}
.r-total{display:flex; justify-content:space-between; align-items:baseline; padding:16px 20px; background:var(--green-50); border-top:2px solid var(--green-600)}
.r-total .vl{font-family:"Lora",serif; font-weight:600; font-size:17px; color:var(--ink)}
.r-total .vv{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:23px; color:var(--green-700); white-space:nowrap}
.r-empty{padding:48px 24px; text-align:center; color:var(--muted); font-size:15px}
.r-empty svg{color:var(--border-strong); margin-bottom:12px}
.r-note{padding:12px 20px; font-size:12px; color:var(--muted); border-top:1px solid var(--border)}
.r-actions{display:flex; gap:8px; padding:14px 20px 4px; flex-wrap:wrap}
.r-actions .btn{flex:1; min-width:130px; padding:11px 16px; font-size:14.5px}
.compare{width:100%; border-collapse:collapse; margin-top:var(--sp-3); font-size:14.5px}
.compare th,.compare td{padding:11px 12px; border-bottom:1px solid var(--border); text-align:right; white-space:nowrap}
.compare th:first-child,.compare td:first-child{text-align:left; white-space:normal}
.compare thead th{font-family:"IBM Plex Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:500}
.compare td.val{font-family:"IBM Plex Mono",monospace}
.compare tr.best td{background:var(--green-50)}
.compare td.val.best{color:var(--green-700); font-weight:700}
.rights th,.rights td{text-align:center}
.rights th:first-child,.rights td:first-child{text-align:left}
.rights .yes{color:var(--green-700); font-weight:700}
.rights .no{color:var(--border-strong)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:var(--sp-7)}
  .hero .holerite{order:-1}
  .grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:1fr; gap:var(--sp-5)}
  .guides-inner{grid-template-columns:1fr; gap:var(--sp-6)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .menu-btn{display:inline-flex}
  nav.main{display:none}
  nav.main.open{display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--border); padding:8px var(--sp-5) var(--sp-5); box-shadow:var(--shadow-md)}
  nav.main.open a{padding:13px 0; font-size:16px; border-bottom:1px solid var(--border)}
  nav.main.open a.nav-cta{justify-content:center; margin-top:14px; border-bottom:none}
  .has-drop{flex-direction:column; align-items:stretch; width:100%}
  .has-drop::after{display:none}
  .drop-toggle{justify-content:space-between; width:100%}
  .drop-menu{position:static; display:none; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; border-radius:0; padding:0 0 0 14px; min-width:0; background:transparent}
  .has-drop.open .drop-menu{display:flex}
  .drop-menu a{padding:12px 0; font-size:15.5px; border-bottom:1px solid var(--border)}
  .drop-menu a:hover{background:transparent}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 var(--sp-4)}
  .hero{padding:var(--sp-7) 0 var(--sp-6)}
  .grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .btn{width:100%; justify-content:center}
  .cookie-actions{flex:1 1 100%}
  .cookie-actions .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
  .card:hover{transform:none}
}