/* ============ TOKENS — CalculatorPlus (navy + lime green) ============ */
:root{
  --primary:#2E3D54; --primary-dark:#222E42; --primary-light:#3C5170;
  --accent:#8FD14F; --accent-strong:#6BB637; --accent-ink:#3F6B18; --gold:#A6E06A;
  --bg:#fff; --surface:#F7F6EF; --surface-2:#EEF1EA; --tint:#EBF3E0;
  --text:#1E2733; --text-muted:#5B6675; --border:#E1E4DC;
  --success:#4E9A3F; --warning:#B8860B; --danger:#C0392B;
  --font-head:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --fs-h1:clamp(2rem,4vw,3rem); --fs-h2:clamp(1.5rem,3vw,2.25rem); --fs-h3:1.3rem;
  --fs-body:1.0625rem; --fs-sm:.9rem;
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem; --sp-5:4rem; --sp-6:6rem;
  --r-sm:8px; --r-md:14px; --r-lg:24px; --r-full:999px;
  --sh-sm:0 1px 3px rgba(30,39,51,.08);
  --sh-md:0 8px 24px rgba(30,39,51,.10);
  --sh-lg:0 24px 60px rgba(30,39,51,.14);
  --maxw:1180px; --maxw-narrow:820px;
}
/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent-strong);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.2;margin:0 0 var(--sp-2);color:var(--primary);font-weight:800}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{margin:0 0 var(--sp-2)}
.muted{color:var(--text-muted);font-size:var(--fs-sm)}
.lead{font-size:1.15rem;color:var(--text-muted)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--primary);color:#fff;padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:0}
/* ============ LAYOUT ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-2)}
.wrap--narrow{max-width:var(--maxw-narrow)}
.section{padding:var(--sp-5) 0}
.section--tight{padding:var(--sp-4) 0 var(--sp-2)}
.section--surface{background:var(--surface)}
.grid{display:grid;gap:var(--sp-3)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr 1fr}
@media(min-width:640px){.grid--3{grid-template-columns:repeat(2,1fr)}.grid--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}
/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:var(--sh-sm)}
.header__inner{display:flex;align-items:center;gap:var(--sp-2);min-height:70px;justify-content:space-between}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:34px;width:auto}
.nav>ul{display:none;list-style:none;gap:var(--sp-3);margin:0;padding:0;align-items:center}
.nav a{color:var(--primary);font-weight:600;font-size:.95rem}
.nav-toggle{background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--primary);line-height:1}
.header__cta{display:none}
@media(min-width:960px){
  .header__inner{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-2)}
  .logo{justify-self:start}
  .nav{justify-self:center}
  .nav>ul{display:flex;justify-content:center}
  .header__cta{display:inline-flex;justify-self:end;padding:.5rem 1.1rem;font-size:.85rem}
  .nav-toggle{display:none}
}
.nav.is-open>ul{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:70px;left:0;right:0;background:#fff;padding:var(--sp-2);box-shadow:var(--sh-md);max-height:80vh;overflow-y:auto}
@media(max-width:959px){.site-header .header__cta{display:none}}
/* dropdown (categories mega-menu) */
.has-drop{position:relative}
.drop{display:none;list-style:none;margin:0;padding:0}
.drop__panel{padding:var(--sp-3)}
.drop__grid{display:grid;grid-template-columns:1fr;gap:.25rem}
.drop a{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:var(--r-sm);font-weight:600;font-size:.92rem;color:var(--primary);white-space:nowrap}
.drop a:hover{background:var(--tint);text-decoration:none}
.drop a .emoji{font-size:1.1rem}
.drop__all{grid-column:1/-1;margin-top:.4rem;color:var(--accent-ink);font-weight:700}
.has-drop>a::after{content:"▾";font-size:.7em;margin-left:.3rem;color:var(--text-muted)}
@media(min-width:960px){
  .drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:640px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-lg);margin-top:.5rem}
  .drop__grid{grid-template-columns:repeat(3,1fr)}
  .has-drop:hover>.drop,.has-drop:focus-within>.drop{display:block}
}
@media(max-width:959px){
  .drop{display:block;padding-left:var(--sp-2)}
  .drop__grid{grid-template-columns:1fr}
  .drop a{white-space:normal}
  .has-drop>a::after{content:""}
}
/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.3rem;border-radius:var(--r-full);font-weight:700;font-size:.95rem;border:2px solid transparent;transition:transform .15s,box-shadow .15s,background .15s;text-decoration:none;cursor:pointer}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-dark);color:#fff}
.btn--accent{background:var(--accent);color:var(--primary-dark)}
.btn--accent:hover{background:var(--accent-strong);color:var(--primary-dark)}
.btn--ghost{border-color:currentColor;color:var(--primary);background:transparent}
.btn--lg{padding:.95rem 1.8rem;font-size:1.02rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
/* ============ HERO ============ */
.hero{background:linear-gradient(155deg,var(--primary-dark) 0%,var(--primary-light) 100%);color:#fff;padding:var(--sp-5) 0}
.hero h1{color:#fff;max-width:22ch}
.hero h1 .hl{color:var(--accent)}
.hero__sub{font-size:1.15rem;opacity:.92;max-width:58ch}
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:800;color:var(--gold);margin:0 0 var(--sp-1)}
.hero__proof{margin-top:var(--sp-3);font-size:.9rem;opacity:.85}
/* hero search */
.hero__search{margin-top:var(--sp-3);display:flex;gap:.5rem;max-width:520px}
.hero__search input{flex:1;min-width:0;padding:.85rem 1rem;border:0;border-radius:var(--r-full);font:inherit}
.hero__search .btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:559px){.hero__search{flex-direction:column}.hero__search .btn{width:100%}}
/* ============ CATEGORY / TOOL CARDS ============ */
.cat-card{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3);box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s;color:inherit}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);text-decoration:none;border-color:var(--accent)}
.cat-card__icon{font-size:2rem;line-height:1;margin-bottom:.6rem}
.cat-card h3{margin-bottom:.3rem;font-size:1.15rem}
.cat-card p{color:var(--text-muted);font-size:.92rem;margin:0}
.cat-card__count{display:inline-block;margin-top:.6rem;font-size:.8rem;font-weight:700;color:var(--accent-ink);background:var(--tint);padding:.2rem .7rem;border-radius:var(--r-full)}
.card{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3);box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s;color:inherit}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);text-decoration:none;border-color:var(--accent)}
.card h3{margin-bottom:.3rem;font-size:1.1rem;display:flex;align-items:center;gap:.5rem}
.card h3 .emoji{font-size:1.25rem}
.card p{color:var(--text-muted);font-size:.93rem;margin:0 0 .6rem}
.card__link{color:var(--accent-ink);font-weight:700;font-size:.88rem}
/* category grouping on hub */
.cat-group{margin-bottom:var(--sp-5)}
.cat-group__head{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--sp-3);padding-bottom:.6rem;border-bottom:2px solid var(--tint)}
.cat-group__head .emoji{font-size:1.6rem}
.cat-group__head h2{margin:0}
.tool-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;grid-template-columns:1fr}
@media(min-width:640px){.tool-list{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.tool-list{grid-template-columns:1fr 1fr 1fr}}
.tool-list a{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);font-weight:600;font-size:.93rem;color:var(--primary)}
.tool-list a:hover{background:var(--tint);border-color:var(--accent);text-decoration:none}
.tool-list a .emoji{font-size:1.15rem}
/* ============ TOOL META (badge under h1) ============ */
.tool-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:var(--sp-2)}
.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;padding:.25rem .8rem;border-radius:var(--r-full);background:var(--tint);color:var(--accent-ink)}
/* ============ LISTS / STEPS / TABLE ============ */
.ticks{list-style:none;padding:0;margin:0 0 var(--sp-2)}
.ticks li{position:relative;padding-left:1.7rem;margin-bottom:.55rem}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.8rem;height:.45rem;border-left:3px solid var(--success);border-bottom:3px solid var(--success);transform:rotate(-45deg)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding-left:3rem;margin-bottom:var(--sp-3)}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:2.1rem;height:2.1rem;border-radius:var(--r-full);background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800}
.steps strong{display:block;color:var(--primary)}
.steps span{color:var(--text-muted)}
.chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0}
.chip-list a{display:inline-block;padding:.45rem 1rem;background:var(--surface-2);border-radius:var(--r-full);font-size:.9rem;font-weight:600}
.chip-list a:hover{background:var(--primary);color:#fff;text-decoration:none}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:.75rem;border-bottom:1px solid var(--border);text-align:left}
th{background:var(--surface-2);color:var(--primary)}
.answer-box{background:var(--tint);border-left:4px solid var(--accent-strong);padding:var(--sp-3);border-radius:var(--r-sm);font-size:1.08rem}
.formula{background:var(--primary-dark);color:#EAF2DC;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);font-family:"Cascadia Code",Consolas,monospace;font-size:1rem;overflow-x:auto;margin:0 0 var(--sp-2)}
/* callout / disclaimer / source */
.callout{padding:var(--sp-3);border-radius:var(--r-md);margin:0 0 var(--sp-3);font-size:.97rem}
.callout--warn{background:#FBF3E3;border-left:4px solid var(--warning)}
.callout--danger{background:#FBEAE8;border-left:4px solid var(--danger)}
.callout strong{color:var(--primary)}
.source-box{background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--r-md);padding:var(--sp-3);font-size:.92rem;margin:0 0 var(--sp-2)}
.source-box .verified{display:inline-block;font-weight:700;color:var(--accent-ink);background:var(--tint);padding:.15rem .6rem;border-radius:var(--r-full);font-size:.8rem}
.verify-note{background:#FBF3E3;border:1px solid #EAD9A6;border-left:4px solid var(--warning);border-radius:var(--r-sm);padding:.7rem 1rem;font-size:.88rem;color:var(--text-muted);margin:0}
.verify-note strong{color:var(--primary)}
.verify-note a{color:var(--accent-ink);font-weight:600}
.eeat{background:var(--surface-2);border:1px solid var(--border);border-left:4px solid var(--accent-strong);border-radius:var(--r-md);padding:var(--sp-3);font-size:.92rem}
.eeat__title{font-size:1.1rem;margin:0 0 var(--sp-2)}
.eeat__list{margin:var(--sp-2) 0 0;padding-left:1.1rem}
.eeat__list li{margin-bottom:.4rem}
.eeat a{color:var(--accent-ink);font-weight:600}
/* ============ FAQ ============ */
.faq__item{border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:.75rem;background:#fff}
.faq__item summary{cursor:pointer;padding:1rem 1.2rem;font-weight:700;color:var(--primary);list-style:none;position:relative;padding-right:2.6rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:1.2rem;font-size:1.4rem;color:var(--accent-ink)}
.faq__item[open] summary::after{content:"\2013"}
.faq__a{padding:0 1.2rem 1rem}
/* ============ CTA BAND ============ */
.cta-band{background:var(--primary);color:#fff;padding:var(--sp-5) 0;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{opacity:.92;max-width:54ch;margin-inline:auto}
.cta-band .btn-row{justify-content:center}
.cta-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
/* ============ BREADCRUMBS ============ */
.crumbs{padding-top:var(--sp-2)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;font-size:.85rem;color:var(--text-muted)}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--border)}
.crumbs a{color:var(--text-muted)}
/* ============ FORM ============ */
.lead-form{display:grid;gap:.4rem;max-width:520px}
.lead-form label{font-weight:600;font-size:.9rem;margin-top:.6rem}
.lead-form input,.lead-form textarea{padding:.75rem;border:1px solid var(--border);border-radius:var(--r-sm);font:inherit;width:100%}
.lead-form button{margin-top:var(--sp-2);justify-self:start}
/* ============ FOOTER ============ */
.site-footer{background:var(--primary-dark);color:#C6D0C1;padding:var(--sp-5) 0 var(--sp-3)}
.site-footer h3{color:var(--accent);font-size:1rem;margin-bottom:var(--sp-2);font-weight:700}
.site-footer a{color:#fff;font-size:.92rem}
.site-footer a:hover{color:var(--accent)}
.site-footer .muted{color:#fff}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.45rem}
.footer__grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media(min-width:768px){.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr}}
.footer__brand img{height:30px;margin-bottom:var(--sp-2);filter:brightness(0) invert(1)}
.footer__cats{columns:2;font-size:.9rem}
.footer__bottom{padding-top:var(--sp-3);margin-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:space-between}
/* ============ AD SLOTS (display-ad monetisation) ============ */
.ad-slot{margin:var(--sp-3) auto;text-align:center;min-height:90px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--r-sm);color:var(--text-muted);font-size:.8rem;max-width:100%}
.ad-slot[data-size="rect"]{min-height:250px;max-width:336px}
/* ============ MOTION ============ */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
  .reveal.is-in{opacity:1;transform:none}
}
/* ============ TOOL (mode: tool) ============ */
.tool{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-3);box-shadow:var(--sh-sm)}
.tool__row{display:grid;gap:.35rem;margin-bottom:var(--sp-2)}
@media(min-width:560px){.tool__row{grid-template-columns:200px 1fr;align-items:center;gap:var(--sp-2)}}
.tool__row label{font-weight:600;font-size:.92rem;color:var(--primary)}
.tool__row input,.tool__row select{padding:.75rem;border:1px solid var(--border);border-radius:var(--r-sm);font:inherit;background:#fff;width:100%}
.tool__row input:invalid{border-color:var(--danger)}
.tool__hint{font-size:.8rem;color:var(--text-muted);grid-column:1/-1;margin:-.2rem 0 0}
.tool__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:var(--sp-2) 0}
.tool__out{display:block;margin-top:var(--sp-2);padding:var(--sp-3);background:var(--primary);color:#fff;border-radius:var(--r-md);font-size:1.6rem;font-weight:800;font-family:var(--font-head);text-align:center}
.tool__out small{display:block;font-size:.8rem;font-weight:600;opacity:.85;margin-top:.3rem}
.tool__steps{margin-top:var(--sp-2);background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);font-size:.95rem}
.tool__steps ol{margin:.4rem 0 0;padding-left:1.2rem}
.tool__note{font-size:.85rem;color:var(--text-muted);margin-top:var(--sp-1)}
.tool fieldset{border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-2)}
.tool legend{font-weight:700;font-size:.9rem;color:var(--primary);padding:0 .4rem}