/* ==========================================================================
   Toolbantu brand layer — design tokens + shared components.
   Loaded AFTER css/style.css (and tool-page.css / articles.css) on every page.
   Edit tokens here; do not hard-code colours elsewhere.
   ========================================================================== */
:root{
  /* palette */
  --tb-red:#DC2626;--tb-red-700:#B91C1C;--tb-red-50:#FEF2F2;
  --tb-ink:#0F172A;--tb-bg:#F8FAFC;--tb-white:#FFFFFF;
  --tb-slate-600:#475569;--tb-slate-300:#CBD5E1;--tb-slate-200:#E2E8F0;--tb-slate-100:#F1F5F9;
  /* category accents (subtle secondary colours) */
  --cat-image:#0F766E;--cat-developer:#6D28D9;--cat-text:#B45309;--cat-security:#15803D;--cat-other:#475569;
  /* semantic colours (dark theme redefines these) */
  --c-bg:var(--tb-bg);--c-surface:var(--tb-white);--c-sunken:var(--tb-slate-100);
  --c-text:var(--tb-ink);--c-muted:var(--tb-slate-600);--c-line:var(--tb-slate-200);--c-line-strong:var(--tb-slate-300);
  --c-accent:var(--tb-red);--c-accent-hover:var(--tb-red-700);--c-accent-ink:var(--tb-red-700);--c-accent-soft:var(--tb-red-50);
  --c-on-accent:#fff;--c-dark:var(--tb-ink);--c-on-dark:var(--tb-bg);--c-on-dark-muted:var(--tb-slate-300);--c-ok:#15803D;
  /* typography */
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-h1:clamp(2.5rem,1.5rem + 4.2vw,4.25rem);--fs-h2:clamp(1.6rem,1.25rem + 1.3vw,2.25rem);--fs-h3:1.125rem;
  --fs-body:1rem;--fs-lead:clamp(1.05rem,1rem + .3vw,1.25rem);--fs-small:.9rem;--fs-label:.8125rem;--fs-meta:.8125rem;
  --lh-tight:1.1;--lh-snug:1.3;--lh-body:1.6;--fw-body:400;--fw-label:600;--fw-head:700;--fw-display:800;
  /* spacing */
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-7:3rem;--sp-8:5rem;
  /* shape, depth, motion */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;
  --sh-sm:0 1px 2px rgb(15 23 42/.06);--sh-md:0 10px 30px rgb(15 23 42/.08);
  --ease:cubic-bezier(.2,.7,.2,1);--dur:.16s;
  /* layout */
  --w-page:1160px;--w-read:760px;--w-tool:1160px;--gutter:clamp(1rem,4vw,1.5rem);
  /* component tokens */
  --btn-h:46px;--card-pad:var(--sp-5);--ring:0 0 0 3px color-mix(in srgb,var(--tb-red) 35%,transparent);
  /* map the older variables used by style.css / tool-page.css onto the tokens */
  --bg:var(--c-bg);--surface:var(--c-surface);--surface-2:var(--c-sunken);--text:var(--c-text);--muted:var(--c-muted);
  --border:var(--c-line);--accent:var(--c-accent-ink);--accent-2:var(--c-accent-hover);--shadow:var(--sh-md);--radius:var(--r-lg);--max:var(--w-page);
}
html[data-theme=dark]{
  --c-bg:#0B1120;--c-surface:#111A2E;--c-sunken:#162033;--c-text:#E5EDF8;--c-muted:#A3B1C6;--c-line:#243049;--c-line-strong:#33425F;
  --c-accent-ink:#F87171;--c-accent-soft:#2A1519;--c-dark:#050A18;--c-ok:#4ADE80;
  --sh-sm:0 1px 2px rgb(0 0 0/.4);--sh-md:0 10px 30px rgb(0 0 0/.35);
  --bg:var(--c-bg);--surface:var(--c-surface);--surface-2:var(--c-sunken);--text:var(--c-text);--muted:var(--c-muted);
  --border:var(--c-line);--accent:var(--c-accent-ink);--accent-2:var(--c-accent-hover);--shadow:var(--sh-md);
}
/* ---------- Base type ---------- */
body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:var(--fw-head);line-height:var(--lh-snug);letter-spacing:-.02em;text-wrap:balance}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.eyebrow{margin:0 0 var(--sp-2);color:var(--c-accent-ink);font-size:var(--fs-label);font-weight:var(--fw-label);letter-spacing:0;text-transform:none}
.skip{position:absolute;left:-999px;top:8px;z-index:100;padding:10px 14px;border-radius:var(--r-sm);background:var(--c-surface);border:1px solid var(--c-line)}
.skip:focus{left:8px}
.ic{flex:none;display:block}
/* ---------- Buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--btn-h);padding:0 var(--sp-5);border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-text);font-weight:var(--fw-label);cursor:pointer;transition:background var(--dur),border-color var(--dur),color var(--dur)}
.button:hover{transform:none;box-shadow:none;background:var(--c-sunken);border-color:var(--c-line-strong)}
.button.primary{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}
.button.primary:hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover)}
.button.on-dark{background:transparent;border-color:rgb(248 250 252/.35);color:var(--c-on-dark)}
.button.on-dark:hover{background:rgb(248 250 252/.1)}
.chip{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--r-pill);background:var(--c-sunken);color:var(--c-muted);font-size:var(--fs-meta);font-weight:var(--fw-label);line-height:1.6}
.priv{display:inline-flex;align-items:center;gap:6px;color:var(--c-muted);font-size:var(--fs-meta)}
.priv .ic{color:var(--c-ok)}
/* ---------- Header + navigation ---------- */
.site-header{display:block;position:sticky;top:0;z-index:50;max-width:none;margin:0;padding:0;background:color-mix(in srgb,var(--c-bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--c-line)}
.header-in{display:flex;align-items:center;gap:var(--sp-5);max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter);min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:1.3rem;font-weight:var(--fw-display);letter-spacing:-.03em;color:var(--c-text)}
.brand img{border-radius:9px}
.site-nav{display:flex;align-items:center;flex:1;gap:var(--sp-4);margin:0;padding:0;border:0;background:none;position:static;box-shadow:none}
.nav-list{display:flex;align-items:center;gap:var(--sp-1);flex:1;margin:0;padding:0;list-style:none}
.nav-list li:last-child{margin-left:auto}
.nav-list a,.site-nav .theme-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-3);border-radius:var(--r-md);color:var(--c-muted);font-size:.95rem;font-weight:var(--fw-label);background:none;border:0;cursor:pointer;transition:color var(--dur),background var(--dur)}
.nav-list a:hover,.site-nav .theme-toggle:hover{color:var(--c-text);background:var(--c-sunken)}
.nav-list a[aria-current]{color:var(--c-text);box-shadow:inset 0 -2px var(--c-accent);border-radius:0}
.nav-search{border:1px solid var(--c-line)!important;background:var(--c-surface)!important}
.header-actions{display:flex;align-items:center}
.menu-toggle{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;padding:0;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-surface);cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--c-text);transition:transform var(--dur),opacity var(--dur)}
.bars{position:relative}.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-6px}.bars::after{top:6px}
.menu-toggle[aria-expanded=true] .bars{background:transparent}
.menu-toggle[aria-expanded=true] .bars::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded=true] .bars::after{top:0;transform:rotate(-45deg)}
@media (max-width:800px){
  .header-in{gap:var(--sp-3)}
  .menu-toggle{display:inline-flex}
  .site-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;padding:var(--sp-3) var(--gutter) var(--sp-5);background:var(--c-surface);border-bottom:1px solid var(--c-line);box-shadow:var(--sh-md);max-height:calc(100vh - 64px);overflow:auto}
  .site-nav.open{display:flex;animation:menu-in .18s var(--ease)}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list li:last-child{margin:var(--sp-3) 0 0}
  .nav-list a{width:100%;min-height:52px;padding:0 var(--sp-2);border-radius:0;border-bottom:1px solid var(--c-line);font-size:1.05rem}
  .nav-list a[aria-current]{box-shadow:none;color:var(--c-accent-ink)}
  .nav-search{justify-content:center;border-radius:var(--r-md)!important;border:1px solid var(--c-line-strong)!important}
  .header-actions{margin-top:var(--sp-3)}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ---------- Homepage ---------- */
.home-hero{padding:clamp(3rem,9vw,6.5rem) var(--gutter) clamp(2.5rem,6vw,4.5rem);text-align:center;border-bottom:1px solid var(--c-line);background:var(--c-surface)}
.hero-in{max-width:760px;margin:0 auto;animation:hero-in .5s var(--ease) both}
@keyframes hero-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-mark{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--sp-5);font-size:1rem;font-weight:var(--fw-display);letter-spacing:.14em;text-transform:uppercase;color:var(--c-text)}
.hero-mark img{border-radius:8px}
.home-hero h1{margin:0 0 var(--sp-4);font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:var(--fw-display);letter-spacing:-.04em}
.hero-copy{margin:0 auto var(--sp-2);max-width:36rem;color:var(--c-muted);font-size:var(--fs-lead)}
.hero-tag{margin:0;color:var(--c-text);font-weight:var(--fw-label)}
.hero-search{position:relative;max-width:640px;margin:var(--sp-6) auto var(--sp-4);text-align:left}
.search-box{display:flex;align-items:center;gap:var(--sp-3);min-height:62px;padding:0 var(--sp-4);background:var(--c-surface);border:1.5px solid var(--c-line-strong);border-radius:var(--r-lg);box-shadow:var(--sh-md);transition:border-color var(--dur),box-shadow var(--dur)}
.search-box:focus-within{border-color:var(--c-accent);box-shadow:var(--ring),var(--sh-md)}
.search-box .ic{color:var(--c-muted)}
.search-box input{flex:1;min-width:0;height:60px;border:0;outline:0;background:transparent;color:var(--c-text);font-size:1.1rem}
.search-box input::placeholder{color:var(--c-muted)}
.search-box input:focus-visible{box-shadow:none}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;margin:0;padding:var(--sp-2);list-style:none;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-md);max-height:340px;overflow:auto}
.search-results a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:48px;padding:0 var(--sp-3);border-radius:var(--r-md);font-weight:var(--fw-label)}
.search-results a small{color:var(--c-muted);font-weight:var(--fw-body);font-size:var(--fs-meta)}
.search-results li.is-active a,.search-results a:hover{background:var(--c-sunken)}
.sr-empty{padding:var(--sp-3);color:var(--c-muted);font-size:var(--fs-small)}
.hero-popular{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp-2)}
.hero-popular>span{color:var(--c-muted);font-size:var(--fs-small);margin-right:var(--sp-1)}
.hero-popular a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-4);border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-bg);font-size:var(--fs-small);font-weight:var(--fw-label);transition:border-color var(--dur),background var(--dur)}
.hero-popular a:hover{border-color:var(--c-accent);background:var(--c-accent-soft)}
.home-section{max-width:var(--w-page);margin:0 auto;padding:clamp(3rem,7vw,5rem) var(--gutter) 0}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-3) var(--sp-5);margin-bottom:var(--sp-6)}
.section-head h2{margin:0;font-size:var(--fs-h2)}
.section-head p{flex:0 0 100%;margin:var(--sp-2) 0 0;max-width:none;color:var(--c-muted);font-size:var(--fs-lead)}
.text-link{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;color:var(--c-accent-ink);font-weight:var(--fw-label)}
.text-link:hover{text-decoration:underline;text-underline-offset:3px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--sp-4)}
.tool-card{display:flex;flex-direction:column;gap:0;min-height:0;padding:var(--card-pad);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);cursor:pointer;transition:border-color var(--dur),box-shadow var(--dur)}
.tool-card:hover{transform:none;border-color:color-mix(in srgb,var(--c-accent) 45%,var(--c-line));box-shadow:var(--sh-md)}
.tool-card .tool-icon,.cat-head .tool-icon{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:color-mix(in srgb,var(--cat) 10%,var(--c-surface));color:var(--cat)}
html[data-theme=dark] .tool-card .tool-icon,html[data-theme=dark] .cat-head .tool-icon{color:color-mix(in srgb,var(--cat) 45%,#fff)}
.tool-card h3{margin:var(--sp-4) 0 var(--sp-1);font-size:var(--fs-h3)}
.tool-card p{margin:0 0 var(--sp-4);color:var(--c-muted);font-size:.95rem}
.tool-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin-top:auto}
.tool-open{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--c-line);color:var(--c-accent-ink);font-weight:var(--fw-label)}
.tool-open .ic{transition:transform var(--dur)}.tool-card:hover .tool-open .ic{transform:translateX(3px)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--sp-4)}
.cat-panel{padding:var(--card-pad);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);scroll-margin-top:84px}
.cat-head{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.cat-head h3{margin:0;font-size:var(--fs-h3)}.cat-head p{margin:0;color:var(--c-muted);font-size:var(--fs-small)}
.cat-links{margin:0;padding:0;list-style:none}
.cat-links a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:48px;border-top:1px solid var(--c-line);font-weight:var(--fw-label)}
.cat-links a .ic{color:var(--c-muted);transition:transform var(--dur),color var(--dur)}
.cat-links a:hover{color:var(--c-accent-ink)}.cat-links a:hover .ic{color:var(--c-accent-ink);transform:translateX(3px)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--sp-6)}
.why-item{padding-top:var(--sp-4);border-top:2px solid var(--c-text)}
.why-item .ic{color:var(--c-accent-ink);margin-bottom:var(--sp-3)}
.why-item h3{margin:0 0 var(--sp-2);font-size:var(--fs-h3)}.why-item p{margin:0;color:var(--c-muted);font-size:.95rem}
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:var(--sp-6) var(--sp-7);align-items:start}
.faq-layout .section-head{margin:0}
.cta-band{max-width:var(--w-page);margin:clamp(3rem,7vw,5rem) auto 0;padding:0 var(--gutter)}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-5);padding:clamp(1.75rem,5vw,3.5rem);border-radius:var(--r-xl);background:var(--c-dark);color:var(--c-on-dark)}
.cta-in h2{margin:0 0 var(--sp-2);font-size:var(--fs-h2);color:var(--c-on-dark)}
.cta-in p{margin:0;max-width:34rem;color:var(--c-on-dark-muted)}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
@media (max-width:860px){.faq-layout{grid-template-columns:1fr}}
@media (max-width:560px){.cta-actions .button{flex:1 1 100%}}
/* ---------- Shared: FAQ, breadcrumbs, guides/articles ---------- */
.about-faq details{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md)}
.about-faq details[open]{background:var(--c-surface)}
.about-faq summary{min-height:52px}
.about-faq summary::after{color:var(--c-accent-ink)}
.breadcrumbs{max-width:var(--w-page);padding:var(--sp-4) var(--gutter) 0;font-size:var(--fs-small)}
.article-card,.article-tool-cta{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.article-card:hover{transform:none;border-color:color-mix(in srgb,var(--c-accent) 45%,var(--c-line));box-shadow:var(--sh-md)}
.article-card-footer span{color:var(--c-accent-ink);font-weight:var(--fw-label)}
.article-hero h1,.article-body h2,.article-body h3{letter-spacing:-.02em}
.article-body{max-width:var(--w-read)}
.article-body code{overflow-wrap:anywhere}
.article-callout{background:var(--c-sunken);border-radius:var(--r-md)}
.article-tool-cta{border-left:3px solid var(--c-accent);box-shadow:var(--sh-sm)}
.about-card,.workspace-shell,.howto-card{border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
/* ---------- Footer ---------- */
.site-footer{max-width:none;margin:var(--sp-8) 0 0;padding:var(--sp-7) 0 var(--sp-5);background:var(--c-surface);border-top:1px solid var(--c-line)}
.footer-in{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter)}
.footer-top{grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.footer-brand a{font-size:1.25rem;letter-spacing:-.03em}
.footer-brand p{margin:var(--sp-3) 0 0;color:var(--c-text);font-weight:var(--fw-label)}
.footer-brand .footer-sub{margin-top:var(--sp-1);color:var(--c-muted);font-weight:var(--fw-body)}
.footer-col h2{margin-bottom:var(--sp-3);font-size:var(--fs-label);font-weight:var(--fw-head);letter-spacing:0;color:var(--c-text)}
.footer-col a{padding:var(--sp-2) 0;min-height:36px}
@media (max-width:860px){.footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-brand{grid-column:1/-1}}
@media (max-width:520px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-col a{padding:var(--sp-3) 0}}
/* ---------- Tool pages ---------- */
body.tool{--ta:var(--c-accent);--cat-ink:var(--cat,var(--c-accent-ink));--wrap:var(--w-tool);--r:var(--r-md);--r-lg:var(--r-lg)}
html[data-theme=dark] body.tool{--ta-ink:var(--c-accent-ink);--cat-ink:color-mix(in srgb,var(--cat,var(--tb-red)) 45%,#fff)}
body.tool :focus-visible{box-shadow:var(--ring);outline:none}
.crumbs{max-width:var(--w-tool);margin:0 auto;padding:var(--sp-4) var(--gutter) 0;font-size:var(--fs-small)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:0;padding:0;list-style:none;color:var(--c-muted)}
.crumbs li+li::before{content:"/";margin-right:var(--sp-2);color:var(--c-line-strong)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--c-muted)}.crumbs a:hover{color:var(--c-accent-ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--c-text);font-weight:var(--fw-label)}
body.tool .t-wrap{padding:0 var(--gutter)}
body.tool .t-hero{padding:var(--sp-5) 0 var(--sp-4)}
body.tool .t-hero h1{font-weight:var(--fw-display);letter-spacing:-.03em}
.t-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);margin:var(--sp-4) 0 0}
.t-meta a.chip:hover{background:var(--c-line)}
body.tool .t-trust{margin-top:var(--sp-3)}
body.tool .t-trust li::before{color:var(--c-ok)}
body.tool .t-bench{border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
body.tool .t-glyph{width:36px;height:36px;padding:0;border:0;border-radius:var(--r-md);background:color-mix(in srgb,var(--cat,var(--tb-red)) 10%,var(--c-surface));color:var(--cat-ink)}
body.tool .t-rel{border-radius:var(--r-lg);align-items:center}
body.tool .t-rel:hover{border-color:color-mix(in srgb,var(--c-accent) 45%,var(--c-line))}
body.tool .t-articles,body.tool .t-faq{border-radius:var(--r-lg)}
body.tool .t-art::after{color:var(--c-accent-ink)}
/* ---------- Motion + small screens ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (max-width:560px){.home-hero h1{letter-spacing:-.03em}.search-box{min-height:56px}.search-box input{height:54px;font-size:1rem}.hero-mark{letter-spacing:.1em}}