/* ==========================================================================
   GoToolsAI — Design System
   Identity: precision-instrument toolkit. Azure→violet signature, deep navy
   base, Space Grotesk display + JetBrains Mono I/O. Deliberately not the
   cream/serif/terracotta or black/acid-green AI defaults.
   ========================================================================== */

/* ----- Tokens ----------------------------------------------------------- */
:root {
  --brand:   #3b5bff;
  --brand-2: #7a5bff;
  --gold:    #f4a93b;
  --ok:      #17b890;
  --err:     #f0525b;

  --grad: linear-gradient(115deg, var(--brand) 0%, var(--brand-2) 100%);

  /* light theme (default) */
  --paper:  #f6f7f9;
  --surface:#ffffff;
  --surface-2:#f0f2f6;
  --ink:    #0e1320;
  --ink-soft:#2b3345;
  --muted:  #5b6577;
  --line:   #e4e7ee;
  --line-strong:#d3d8e2;
  --field:  #ffffff;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow-md: 0 8px 24px -8px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
  --shadow-lg: 0 24px 60px -20px rgba(30,40,90,.24);
  --brand-tint: rgba(59,91,255,.08);
  --grid-dot: rgba(20,30,70,.10);

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --maxw: 1200px;
  --header-h: 62px;

  --f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
  --paper:  #0b0e15;
  --surface:#141926;
  --surface-2:#1b2130;
  --ink:    #e9edf6;
  --ink-soft:#c4ccdb;
  --muted:  #8b95a9;
  --line:   #232a3a;
  --line-strong:#303a4f;
  --field:  #0f141f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.7);
  --brand-tint: rgba(90,120,255,.14);
  --grid-dot: rgba(150,170,255,.10);
}

/* ----- Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--f-body);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.15;margin:0;letter-spacing:-.02em}
p{margin:0 0 1rem}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand);color:#fff}
mark{background:var(--brand-tint);color:inherit;padding:0 .15em;border-radius:3px}

/* ----- Layout helpers --------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
.section{padding-block:64px}
.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);font-weight:500;display:inline-flex;align-items:center;gap:.5em;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.muted{color:var(--muted)}
.center{text-align:center}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ----- Buttons ---------------------------------------------------------- */
.btn{
  --bg:var(--surface);--fg:var(--ink);--bd:var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.62em 1.1em;border-radius:var(--r-sm);border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);font-weight:600;font-size:.94rem;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{--bg:var(--brand);--fg:#fff;--bd:transparent;background:var(--grad)}
.btn-primary:hover{box-shadow:0 8px 22px -8px rgba(59,91,255,.6)}
.btn-ghost{--bg:transparent;--bd:transparent}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:.42em .8em;font-size:.85rem}
.btn-block{width:100%}
.btn-icon{padding:.55em;width:2.4em;height:2.4em}

/* ----- Fields ----------------------------------------------------------- */
.field,textarea.field,select.field{
  width:100%;background:var(--field);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:.7em .85em;color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);outline:none}
textarea.field{resize:vertical;min-height:120px;font-family:var(--f-mono);font-size:.9rem;line-height:1.55}
.label{display:block;font-weight:600;font-size:.86rem;margin-bottom:.4em;color:var(--ink-soft)}
.hint{font-size:.8rem;color:var(--muted);margin-top:.35em}
.mono{font-family:var(--f-mono)}

/* ----- Cards ------------------------------------------------------------ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}

/* ----- Header ----------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:80;background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);
}
.hbar{height:var(--header-h);display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:.55em;font-family:var(--f-display);font-weight:700;font-size:1.12rem;letter-spacing:-.03em}
.brand .logo{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px -4px rgba(59,91,255,.6);flex:0 0 auto}
.brand .logo svg{width:17px;height:17px}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;align-items:center;gap:2px;margin-left:8px}
.nav a{padding:.5em .7em;border-radius:var(--r-sm);font-size:.9rem;font-weight:500;color:var(--ink-soft);transition:background .15s,color .15s}
.nav a:hover,.nav a[aria-current="page"]{background:var(--surface-2);color:var(--ink)}
.hspace{flex:1}
.searchbtn{
  display:inline-flex;align-items:center;gap:.6em;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.5em .7em;color:var(--muted);
  font-size:.86rem;cursor:pointer;min-width:190px;transition:border-color .15s,background .15s
}
.searchbtn:hover{border-color:var(--line-strong)}
.searchbtn kbd{margin-left:auto;font-family:var(--f-mono);font-size:.72rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:5px;padding:.1em .4em;color:var(--ink-soft)}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink-soft);transition:background .15s,color .15s,transform .12s}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn svg{width:18px;height:18px}
.menu-toggle{display:none}
.theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .moon{display:block}

/* mobile nav drawer */
.drawer{position:fixed;inset:var(--header-h) 0 0;z-index:75;background:var(--paper);padding:16px 16px 90px;overflow-y:auto;overflow-x:hidden;display:none;animation:drawerIn .18s ease}
.drawer.open{display:block !important}
@keyframes drawerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* drawer search bar */
.drawer-search{width:100%;display:flex;align-items:center;gap:.6em;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-md);padding:.85em 1em;color:var(--muted);font-size:.95rem;cursor:pointer;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.drawer-search svg{width:18px;height:18px;flex:0 0 auto}
.drawer-search span{flex:1;font-size:.95rem}
.drawer-search kbd{margin-left:auto;font-family:var(--f-mono);font-size:.7rem;border:1px solid var(--line-strong);border-radius:5px;padding:.1em .4em;color:var(--ink-soft)}
/* drawer category links */
.drawer-title{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 4px 8px;display:block}
.drawer-nav{display:grid;gap:5px}
.drawer-nav a{display:flex !important;align-items:center;gap:.8em;padding:.75em .9em;border-radius:var(--r-md);font-size:.97rem;font-weight:500;color:var(--ink) !important;background:var(--surface);border:1px solid var(--line);transition:border-color .15s,background .15s}
.drawer-nav a:hover,.drawer-nav a:active{background:var(--brand-tint);border-color:var(--brand)}
.drawer-nav a .di{width:32px;height:32px;border-radius:9px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;flex:0 0 auto}
.drawer-nav a .di svg{width:17px;height:17px}
.drawer-nav a .dcount{margin-left:auto;font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
.drawer-nav.compact a{padding:.55em .75em;background:none;border:none;font-size:.9rem}
.drawer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
/* body padding when sticky ad visible */
@media (max-width:720px){body{padding-bottom:58px}}

/* ----- Command palette -------------------------------------------------- */
.cmdk-back{position:fixed;inset:0;z-index:120;background:rgba(6,10,20,.55);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.cmdk-back.open{display:flex}
.cmdk{width:min(600px,92vw);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .16s ease}
@keyframes pop{from{transform:translateY(-8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.cmdk-in{display:flex;align-items:center;gap:.6em;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmdk-in svg{width:18px;height:18px;color:var(--muted);flex:0 0 auto}
.cmdk-in input{flex:1;border:none;background:none;outline:none;font-size:1.02rem}
.cmdk-in .esc{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);border:1px solid var(--line-strong);border-radius:5px;padding:.15em .45em}
.cmdk-list{max-height:52vh;overflow:auto;padding:8px}
.cmdk-item{display:flex;align-items:center;gap:.7em;padding:.65em .8em;border-radius:var(--r-sm);cursor:pointer;transition:background .1s}
.cmdk-item .ci-ic{width:32px;height:32px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto;color:var(--brand)}
.cmdk-item .ci-ic svg{width:17px;height:17px}
.cmdk-item .ci-name{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item .ci-blurb{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.cmdk-item .ci-cat{margin-left:auto;padding-left:.5em;font-family:var(--f-mono);font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto;text-align:right}
.cmdk-item.active,.cmdk-item:hover{background:var(--brand-tint)}
.cmdk-empty{padding:26px;text-align:center;color:var(--muted)}

/* ----- Hero ------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:72px 40px}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 15%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 15%,#000 40%,transparent 100%);
}
.hero-inner{position:relative;z-index:1;max-width:820px;margin-inline:auto;text-align:center}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.6rem);letter-spacing:-.035em;margin-bottom:.5rem}
.hero .lede{font-size:clamp(1.02rem,2.1vw,1.22rem);color:var(--muted);max-width:600px;margin:0 auto 1.8rem}
.hero-search{display:flex;align-items:center;gap:.5em;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:.5em .5em .5em 1em;box-shadow:var(--shadow-md);max-width:560px;margin-inline:auto}
.hero-search svg{width:20px;height:20px;color:var(--muted);flex:0 0 auto}
.hero-search input{flex:1;border:none;background:none;outline:none;font-size:1.02rem}
.hero-stats{display:flex;gap:26px;justify-content:center;margin-top:1.6rem;flex-wrap:wrap}
.hero-stats div{font-size:.9rem;color:var(--muted)}
.hero-stats b{font-family:var(--f-display);font-size:1.35rem;color:var(--ink);display:block;line-height:1}
.chip-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:1.3rem}
.chip{font-size:.82rem;padding:.4em .8em;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--brand);color:var(--brand)}

/* ----- Tool grid -------------------------------------------------------- */
.grid{display:grid;gap:16px}
.grid-cards{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.tool-card{position:relative;padding:18px;display:flex;flex-direction:column;gap:10px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;overflow:hidden}
.tool-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .16s}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.tool-card:hover::after{opacity:1}
.tc-top{display:flex;align-items:center;gap:11px}
.tc-ic{width:40px;height:40px;border-radius:11px;background:var(--brand-tint);display:grid;place-items:center;color:var(--brand);flex:0 0 auto}
.tc-ic svg{width:20px;height:20px}
.tc-name{font-family:var(--f-display);font-weight:600;font-size:1.02rem}
.tc-desc{font-size:.86rem;color:var(--muted);flex:1;line-height:1.5}
.tc-foot{display:flex;align-items:center;gap:8px;margin-top:2px}
.slug-tag{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:.15em .5em}
.fav-btn{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;border-radius:6px;transition:color .15s,background .15s}
.fav-btn:hover{background:var(--surface-2)}
.fav-btn.on{color:var(--gold)}
.fav-btn svg{width:17px;height:17px}

/* category header row */
.cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.cat-head h2{font-size:1.5rem}
.cat-count{font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}

/* category pills (filter) */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.pill{padding:.5em 1em;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font-size:.88rem;font-weight:500;cursor:pointer;color:var(--ink-soft);transition:all .15s}
.pill:hover{border-color:var(--brand)}
.pill.active{background:var(--grad);color:#fff;border-color:transparent}

/* ----- Breadcrumb ------------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;gap:.4em;align-items:center;font-size:.84rem;color:var(--muted);padding-block:16px}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--ink-soft);font-weight:500}

/* ----- Tool page shell -------------------------------------------------- */
.tool-hero{padding-block:8px 22px}
.tool-hero h1{font-size:clamp(1.8rem,4vw,2.7rem);margin-bottom:.5rem}
.tool-hero .lede{color:var(--muted);max-width:680px;font-size:1.05rem}
.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
@media (max-width:980px){.tool-layout{grid-template-columns:1fr}.tool-aside{display:none}}
.tool-aside{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:20px}

/* the interactive tool surface */
.workbench{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.wb-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.wb-dot{width:10px;height:10px;border-radius:50%;background:var(--brand)}
.wb-title{font-family:var(--f-mono);font-size:.82rem;color:var(--ink-soft);letter-spacing:.02em}
.wb-actions{margin-left:auto;display:flex;gap:8px}
.wb-body{padding:20px}
.wb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:680px){.wb-grid2{grid-template-columns:1fr}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:14px}

/* dropzone */
.dropzone{border:2px dashed var(--line-strong);border-radius:var(--r-md);padding:34px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:var(--surface-2)}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--brand-tint)}
.dropzone svg{width:34px;height:34px;color:var(--muted);margin:0 auto 10px}
.dropzone .dz-main{font-weight:600}
.dropzone .dz-sub{font-size:.84rem;color:var(--muted);margin-top:4px}

/* result / output */
.output{background:var(--field);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:14px;font-family:var(--f-mono);font-size:.88rem;white-space:pre-wrap;word-break:break-word;max-height:420px;overflow:auto;line-height:1.55}
.stat-row{display:flex;gap:10px;flex-wrap:wrap}
.stat{flex:1;min-width:90px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.stat .v{font-family:var(--f-display);font-size:1.5rem;font-weight:600;line-height:1}
.stat .k{font-size:.76rem;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}

/* progress */
.progress{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.progress > i{display:block;height:100%;width:0;background:var(--grad);transition:width .25s ease}

/* toast + inline alerts */
.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:var(--paper);padding:.7em 1.1em;border-radius:var(--r-sm);font-size:.9rem;font-weight:500;box-shadow:var(--shadow-lg);animation:tin .2s ease}
html[data-theme="dark"] .toast{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
@keyframes tin{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.alert{padding:.7em .9em;border-radius:var(--r-sm);font-size:.88rem;display:flex;gap:.6em;align-items:flex-start}
.alert svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px}
.alert-err{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err);border:1px solid color-mix(in srgb,var(--err) 30%,transparent)}
.alert-ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}

/* range + controls */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--brand);cursor:pointer;border:3px solid var(--surface);box-shadow:var(--shadow-sm)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--brand);cursor:pointer;border:3px solid var(--surface)}
input[type=color]{width:44px;height:38px;padding:2px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--field);cursor:pointer}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:3px}
.seg button{border:none;background:none;padding:.4em .8em;border-radius:7px;font-size:.85rem;font-weight:500;cursor:pointer;color:var(--muted)}
.seg button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.switch{position:relative;display:inline-flex;align-items:center;gap:.6em;cursor:pointer;font-size:.9rem}
.switch input{position:absolute;opacity:0}
.switch .track{width:40px;height:23px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-strong);transition:background .15s;position:relative;flex:0 0 auto}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:var(--shadow-sm)}
.switch input:checked + .track{background:var(--brand)}
.switch input:checked + .track::after{transform:translateX(17px)}

/* ----- Content prose (SEO body) ---------------------------------------- */
.prose{max-width:760px}
.prose h2{font-size:1.55rem;margin:2.2rem 0 .9rem;scroll-margin-top:calc(var(--header-h) + 12px)}
.prose h3{font-size:1.12rem;margin:1.5rem 0 .5rem}
.prose p,.prose li{color:var(--ink-soft);font-size:1.02rem;line-height:1.72}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.1rem}
.prose li{margin-bottom:.5rem}
.prose strong{color:var(--ink)}
.steps{list-style:none;padding:0;counter-reset:step;display:grid;gap:12px}
.steps li{counter-increment:step;position:relative;padding:16px 16px 16px 58px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.steps li::before{content:counter(step);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:8px;background:var(--grad);color:#fff;font-family:var(--f-display);font-weight:600;display:grid;place-items:center;font-size:.9rem}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.feat{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.feat .fi{width:34px;height:34px;border-radius:9px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;margin-bottom:10px}
.feat .fi svg{width:18px;height:18px}
.feat h3{font-size:1rem;margin:0 0 .3rem}
.feat p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.55}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.faq summary{padding:16px 46px 16px 18px;font-weight:600;cursor:pointer;position:relative;list-style:none;font-family:var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--brand);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .faq-a{padding:0 18px 16px;color:var(--ink-soft);line-height:1.7}

/* related tools + CTA */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.rel{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);transition:transform .14s,border-color .14s}
.rel:hover{transform:translateY(-2px);border-color:var(--brand)}
.rel .ri{width:32px;height:32px;border-radius:8px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;flex:0 0 auto}
.rel .ri svg{width:16px;height:16px}
.rel .rn{font-size:.9rem;font-weight:600;line-height:1.2}
.cta{position:relative;overflow:hidden;text-align:center;padding:44px 24px;border-radius:var(--r-xl);background:var(--grad);color:#fff}
.cta h2{color:#fff;font-size:1.7rem;margin-bottom:.5rem}
.cta p{color:rgba(255,255,255,.85);max-width:520px;margin:0 auto 1.4rem}
.cta .btn{--bg:#fff;--fg:var(--brand);--bd:transparent}

/* ----- Ads -------------------------------------------------------------- */
.ad-slot{display:flex;align-items:center;justify-content:center;margin-inline:auto;position:relative;background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r-md);overflow:hidden}
.ad-slot::before{content:"Advertisement";position:absolute;top:6px;left:8px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.7}
.ad-inline{max-width:100%}
.ad-sticky{position:fixed;bottom:0;left:0;right:0;z-index:70;display:none;align-items:center;justify-content:center;padding:5px 0;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:saturate(150%) blur(10px);border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.ad-sticky .ad-slot{border:none !important;background:transparent !important}
.ad-sticky .close{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--surface);border:1px solid var(--line);border-radius:6px;width:22px;height:22px;cursor:pointer;color:var(--muted);display:grid;place-items:center;font-size:.85rem;line-height:1;z-index:1}
@media (max-width:780px){.ad-sticky{display:flex}}

/* ----- Footer ----------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:70px;padding-block:52px 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{color:var(--muted);font-size:.9rem;max-width:280px;margin-top:12px}
.foot-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px;font-family:var(--f-mono);font-weight:500}
.foot-col a{display:block;padding:.28em 0;font-size:.9rem;color:var(--ink-soft);transition:color .15s}
.foot-col a:hover{color:var(--brand)}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}

/* ----- Page header (legal/simple pages) --------------------------------- */
.page-head{padding-block:36px 8px}
.page-head h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.legal{max-width:760px}
.legal h2{font-size:1.3rem;margin:2rem 0 .7rem}
.legal p,.legal li{color:var(--ink-soft);line-height:1.72}

/* ----- Reveal animation ------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ----- Responsive header ------------------------------------------------ */
@media (max-width:900px){
  .nav{display:none}
  .searchbtn{min-width:0}
  .searchbtn .sb-label{display:none}
  .menu-toggle{display:inline-grid}
}
@media (max-width:560px){
  .section{padding-block:44px}
  .hero{padding-block:48px 30px}
  .searchbtn{display:none}
}

/* utility */
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.divider{height:1px;background:var(--line);margin-block:22px;border:none}
.tag-list{display:flex;gap:6px;flex-wrap:wrap}
.kv{display:flex;justify-content:space-between;gap:12px;padding:.5em 0;border-bottom:1px solid var(--line);font-size:.9rem}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{font-family:var(--f-mono);font-weight:500}

/* ----- Responsive ad rows (Adsterra size-swap, CLS-safe) ---------------- */
.ad-row{display:flex;justify-content:center;margin:26px 0}
.ad-row .ad-desktop,.ad-row .ad-tablet{display:none}
.ad-row .ad-mobile{display:flex}
@media (min-width:768px){.ad-row .ad-mobile{display:none}.ad-row .ad-tablet{display:flex}}
@media (min-width:1024px){.ad-row .ad-tablet{display:none}.ad-row .ad-desktop{display:flex}}
.ad-sky{display:none}
@media (min-width:981px){.ad-sky{display:flex}}