/* ============================================================
   Astra Tools — shared shell + theme (light-only)
   Wraps the HCODX tool webapps in the Astra "Manuscript" design.
   Loaded AFTER each tool's own <style> so the recolor wins.
   ============================================================ */

:root{
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --paper:#f5f5f0;
  --ink:#1a1c20;
  --ink-soft:#3a3f47;
  --muted:#6b7079;
  --faint:#8b909a;
  --line:#e6e6dd;
  --line-soft:#efefe8;

  --green:#157f5b;
  --green-d:#0f6046;
  --green-wash:#e8f3ec;

  --ai:#e8641f;
  --ai-d:#c2530f;
  --orange:#e8641f;

  --wrap:1120px;
  --radius-card:16px;
  --radius-tool:20px;
  --shadow-sm:0 1px 2px rgba(30,25,15,.05);
}

/* ---- Recolor the HCODX tool design tokens to the Astra palette.
   Both theme states map to the SAME light values so the (now hidden)
   theme toggle can never change the look or break. ---- */
:root[data-theme="light"], :root[data-theme="dark"], :root{
  --bg:#f5f5f0;
  --bg-elevated:#ffffff;
  --surface:#ffffff;
  --surface-2:#fbfbf8;
  --surface-3:#f0efe6;
  --border:#e6e6dd;
  --border-strong:#d9d9cc;
  --border-subtle:#efefe8;
  --text:#1a1c20;
  --text-2:#3a3f47;
  --text-3:#6b7079;
  --accent:#157f5b;
  --accent-2:#0f6046;
  --accent-soft:rgba(21,127,91,.08);
  --accent-glow:rgba(21,127,91,.18);
  --add:#157f5b;
  --add-bg:rgba(21,127,91,.10);
  --add-bg-strong:rgba(21,127,91,.20);
  --remove:#b91c1c;
  --remove-bg:rgba(200,60,40,.10);
  --remove-bg-strong:rgba(200,60,40,.20);
  --warn:#c2530f;
  --warn-bg:rgba(232,100,31,.12);
  --warn-bg-strong:rgba(232,100,31,.24);
  --purple:#e8641f;
  --purple-bg:rgba(232,100,31,.10);
  --purple-bg-strong:rgba(232,100,31,.22);
  --shadow-md:0 18px 40px -28px rgba(30,25,15,.35);
  --shadow-lg:0 30px 60px -34px rgba(30,25,15,.42);
  --shadow-glow:0 0 0 1px var(--accent-soft),0 12px 30px var(--accent-glow);
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  color-scheme:light;
}

/* ---------- Shell base ---------- */
*{box-sizing:border-box}
body.tools-page{margin:0}
.tools-page{background:var(--paper);color:var(--ink);font-family:var(--sans)}

/* ---------- Free-tools switcher bar (matches the landing pages; sits under the site nav) ---------- */
.tool-switch{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-elevated)}
.tool-switch-track{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:8px;padding:11px 24px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tool-switch-track::-webkit-scrollbar{display:none}
.tool-switch-label{flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin-right:4px}
.tool-switch a{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:14px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.tool-switch a:hover{border-color:var(--accent);color:var(--accent)}
.tool-switch a.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tool-switch a i{font-size:12px;opacity:.85}
@media(max-width:700px){.tool-switch-track{padding:10px 16px}.tool-switch-label{display:none}}
/* inline variant: sits right above a tool's input (like the landing pages) — clean pill row, no band */
.tool-switch--inline{border:0;background:transparent}
.tool-switch--inline .tool-switch-track{max-width:none;padding:0 0 10px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 55%,transparent) transparent}
.tool-switch--inline .tool-switch-track::-webkit-scrollbar{display:block;height:7px}
.tool-switch--inline .tool-switch-track::-webkit-scrollbar-track{background:transparent}
.tool-switch--inline .tool-switch-track::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 45%,transparent);border-radius:999px}
.tool-switch--inline .tool-switch-track:hover::-webkit-scrollbar-thumb{background:var(--accent)}
.tool-switch--inline .tool-switch-label{display:none}
@media(max-width:700px){.tool-switch--inline .tool-switch-track{padding:0 0 8px}}
/* shell links never carry the UA blue/underline (content links keep their own styles) */
.nav-logo,.footer-logo,.nav-link,.mobile-nav-link,.tool-crumbs a,.footer-col a,.tool-card{color:inherit;text-decoration:none}
#themeToggle[hidden]{display:none !important}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:0 0 10px 0;font-size:14px}
.skip-link:focus{left:0}

/* ---------- Top navigation ---------- */
.nav-container{position:sticky;top:0;z-index:100;background:var(--paper);border-top:3px solid var(--orange);border-bottom:1px solid var(--line)}
.nav-container.scrolled{box-shadow:0 1px 0 rgba(20,20,17,.04), 0 8px 24px -16px rgba(20,20,17,.18)}
.nav-content{max-width:var(--wrap);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px;position:relative;z-index:2}
.nav-logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:30px;height:30px;flex:none;display:inline-block;background:url("/assets/favicon.svg?v=bd01537baa") center/100% 100% no-repeat;font-size:0;color:transparent}
.logo-text{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.01em;color:var(--muted)}
.logo-text b{font-weight:600;color:var(--ink)}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-link{font-size:14.5px;color:var(--ink-soft);font-weight:500;padding:6px 2px;position:relative;transition:color .18s;text-decoration:none}
.nav-link:hover{color:var(--ink)}
.nav-link.active{color:var(--ink)}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);border-radius:2px}
.mobile-menu-btn{display:none;width:40px;height:40px;border-radius:9px;position:relative;margin-left:auto;background:none;border:0;cursor:pointer}
.mobile-menu-btn span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;margin:4px auto;transition:transform .25s, opacity .2s}
.mobile-menu-btn.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-menu-btn.active span:nth-child(2){opacity:0}
.mobile-menu-btn.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:90;background:var(--paper);display:none;padding:84px 28px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mobile-menu.active{display:block}
.mobile-menu-content{display:flex;flex-direction:column}
.mobile-nav-link{padding:18px 4px;font-family:var(--serif);font-size:21px;color:var(--ink);border-bottom:1px solid var(--line-soft);text-decoration:none}
.mobile-nav-link:last-child{border-bottom:0}

/* ---------- Breadcrumbs (scoped class to avoid tool CSS collisions) ---------- */
.tool-crumbs{border-bottom:1px solid var(--line-soft);background:var(--surface)}
.tool-crumbs-inner{max-width:var(--wrap);margin:0 auto;padding:11px 24px;display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);flex-wrap:wrap}
.tool-crumbs a{color:var(--muted);text-decoration:none}
.tool-crumbs a:hover{color:var(--green-d)}
.tool-crumbs .sep{color:var(--faint)}
.tool-crumbs span[aria-current]{color:var(--ink);font-weight:500}

/* ---------- Model-status bar (re-injected from removed tool header) ---------- */
.tool-statusbar{max-width:var(--wrap);margin:0 auto;padding:10px 24px 0;display:flex;justify-content:flex-end}

/* ---------- Tool body wrapper: Astra heading typography ---------- */
.tool-body h1,.tool-body h2,.tool-body h3,.tool-body h4{
  font-family:var(--serif) !important;
  letter-spacing:-.01em;
}
/* Keep the tool content aligned to the same width as the nav/footer/breadcrumbs
   so the whole page tracks the Astra --wrap on every screen size. */
.tool-body > .main{max-width:var(--wrap);margin-left:auto;margin-right:auto}

/* A few two-tone badges were authored blue→purple; the recolor turned them
   green→orange, which blends to a muddy brown. Force a clean Astra-green
   gradient on the step badges / connector so they read on-theme. */
.tool-body .step-num{background:linear-gradient(135deg,var(--green),var(--green-d)) !important}
.tool-body .steps-fill{background:linear-gradient(90deg,var(--green),var(--green-d)) !important}

/* ---------- Site footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--surface-2);padding:56px 0 26px;margin-top:64px}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.footer-top{display:grid;grid-template-columns:1.5fr 3.5fr;gap:44px}
.footer-brand-col{max-width:320px}
.footer-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.footer-note{font-size:14px;color:var(--muted);line-height:1.65;margin-top:14px}
.footer-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px 20px}
.footer-col h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:600;margin-bottom:14px;font-family:var(--sans)}
.footer-col a{display:block;font-size:14px;color:var(--ink-soft);line-height:1.35;margin-bottom:11px;text-decoration:none}
.footer-col a:hover{color:var(--green-d)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint)}

/* ---------- Tools hub (split hero — matches the landing pages) ---------- */
.tool-hub-hero{max-width:var(--wrap);margin:0 auto;padding:48px 24px 10px;display:grid;grid-template-columns:1.4fr .6fr;gap:44px;align-items:center;text-align:left}
.tool-hub-hero .thh-content{min-width:0}
.tool-hub-hero .thh-art{min-width:0;display:flex;align-items:center;justify-content:center}
.tool-hub-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:var(--green);font-weight:600;margin-bottom:14px}
.tool-hub-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.2vw,46px);line-height:1.07;letter-spacing:-.02em;color:var(--ink);margin:0}
.tool-hub-hero h1 .kw{background-image:linear-gradient(180deg,transparent 58%,rgba(255,209,64,.85) 58%,rgba(255,209,64,.85) 95%,transparent 95%);padding:0 .04em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tool-hub-hero p{font-size:clamp(17px,2vw,20px);line-height:1.6;color:var(--muted);margin-top:16px;max-width:none}
.tool-hub-hero .ed-facts{margin-top:20px}
.hero-scan{width:100%;max-width:430px;height:auto;display:block;margin:0 auto}
@media (min-width:1600px){.hero-scan{max-width:480px}}
@media (max-width:900px){
  .tool-hub-hero{display:block;text-align:center;padding-top:34px}
  .tool-hub-hero .thh-art{display:none}
  .tool-hub-hero .ed-facts{justify-content:center}
}
.tool-hub-grid{max-width:var(--wrap);margin:0 auto;padding:12px 24px 72px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.tool-card{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:26px 24px;text-decoration:none;transition:transform .18s, box-shadow .18s, border-color .18s}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--green)}
.tool-card-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--green-wash);color:var(--green);font-size:20px}
.tool-card h2{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.tool-card p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.tool-card .tool-card-go{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--green);display:inline-flex;align-items:center;gap:7px}
.tool-card:hover .tool-card-go{color:var(--green-d)}

/* ---------- Astra toast (HCODX_toast shim target) ---------- */
.astra-toast-wrap{position:fixed;left:0;right:0;bottom:22px;z-index:400;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.astra-toast{pointer-events:auto;max-width:min(90vw,420px);display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;font-family:var(--sans);font-size:14px;font-weight:500;color:#fff;background:var(--ink);box-shadow:0 12px 30px -12px rgba(20,20,17,.5);opacity:0;transform:translateY(10px);transition:opacity .22s, transform .22s}
.astra-toast.show{opacity:1;transform:translateY(0)}
.astra-toast.success{background:var(--green)}
.astra-toast.error{background:#b3341f}
.astra-toast.info{background:var(--ink)}
.astra-toast i{font-size:15px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .footer-top{grid-template-columns:1fr;gap:30px}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .nav-links{display:none}
  .mobile-menu-btn{display:block}
}
@media (max-width:520px){
  .footer-cols{grid-template-columns:repeat(2,1fr);gap:22px 16px}
  .tool-hub-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tool-card,.astra-toast{transition:none}
}

/* ---------- Large-screen scaling — mirrors the main site's styles.css so the
     nav / footer / content width match the detector pages on wide displays. ---------- */
@media (min-width:1600px){ :root{--wrap:1340px} }
@media (min-width:1920px){ :root{--wrap:1460px} }
@media (min-width:2560px){
  :root{--wrap:1820px}
  .nav-content{padding:22px 28px}
  .logo-icon{width:38px;height:38px}
  .logo-text{font-size:25px}
  .nav-link{font-size:18px}
  .footer-note{font-size:16px}
  .footer-col a{font-size:15px}
  .footer-bottom{font-size:14px}
}
@media (min-width:3840px){
  :root{--wrap:2520px}
  .nav-content{padding:30px 32px}
  .logo-icon{width:50px;height:50px}
  .logo-text{font-size:34px}
  .nav-link{font-size:24px}
}

/* ============================================================
   Editorial content system (.ed-*) — matches the main site (styles.css)
   so the tools hub uses the same UI as the detector pages.
   ============================================================ */
:root{--hu-high:#aaddbd;--ai-low:#fde6c8;--ai-mod:#fac889;--ai-high:#f2a05e}
.ed-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.ed-section{padding:72px 0;border-top:1px solid var(--line)}
.ed-section:first-of-type{border-top:0}
.ed-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px 72px;align-items:start}
.ed-head{position:sticky;top:24px}
.ed-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
.ed-kicker .num{font-family:var(--serif);font-weight:600;font-size:14px;color:var(--ai);font-variant-numeric:tabular-nums}
.ed-kicker .lbl{text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:600;color:var(--green)}
.ed-kicker .rule{width:26px;height:1px;background:var(--line)}
.ed-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(27px,3.2vw,38px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:0}
.ed-head .ed-sub{margin-top:14px;font-size:15px;line-height:1.65;color:var(--muted);max-width:34ch}
.ed-body{max-width:72ch}
.ed-body > p{font-size:16.5px;line-height:1.78;color:var(--ink-soft)}
.ed-body > p + p{margin-top:1.1em}
.ed-body a{color:var(--green-d);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.ed-body a:hover{color:var(--ink)}
.ed-body strong{color:var(--ink);font-weight:600}
.ed-body em{font-style:italic}
.ed-body code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.88em;background:var(--surface-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--ink)}
.ed-lead{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2vw,22px);line-height:1.62;color:var(--ink);padding-left:22px;border-left:3px solid var(--green);margin-bottom:1.1em}
.ed-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ed-fact{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);padding:9px 15px;border-radius:999px;box-shadow:var(--shadow-sm)}
.ed-fact i{color:var(--green);font-size:13px}
.ed-chipstrip{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}
.ed-chipstrip .cs-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);font-weight:600;margin-right:4px}
.ed-chipstrip .cs-chip{font-size:13px;color:var(--ink-soft);border:1px solid var(--line);background:var(--surface);padding:7px 13px;border-radius:999px;box-shadow:var(--shadow-sm)}
.ed-points{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0}
.ed-point{display:flex;gap:13px;align-items:flex-start;padding:17px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm)}
.ed-point > i{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:15px;color:var(--green-d);background:var(--green-wash);border:1px solid #cfe6d8}
.ed-point b{display:block;font-size:14.5px;color:var(--ink);font-weight:600;margin-bottom:3px}
.ed-point span{font-size:13px;color:var(--muted);line-height:1.5}
@media (max-width:900px){.ed-points{grid-template-columns:1fr}}
.ed-section.wide .ed-grid{display:block}
.ed-section.wide .ed-head{position:static;margin-bottom:36px;max-width:760px}
.ed-section.wide .ed-head h2{font-size:clamp(28px,3.4vw,40px)}
.ed-section.wide .ed-sub{max-width:62ch;font-size:16px;color:var(--muted)}
.ed-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;counter-reset:edstep}
.ed-step{counter-increment:edstep;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:28px 24px 26px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.ed-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#d9d9cd}
.ed-step .step-num{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--green-d);background:var(--green-wash);border:1px solid #cfe6d8;margin-bottom:18px}
.ed-step .step-num::before{content:counter(edstep,decimal-leading-zero)}
.ed-step h3{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:8px}
.ed-step p{font-size:14.5px;line-height:1.62;color:var(--muted)}
.ed-step .step-ico{position:absolute;top:30px;right:24px;font-size:16px;color:var(--faint)}
.ed-scale{margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:22px 24px;box-shadow:var(--shadow-sm)}
.ed-scale-bar{height:14px;border-radius:8px;background:linear-gradient(90deg,var(--hu-high),var(--ai-low) 42%,var(--ai-mod) 70%,var(--ai-high));margin-bottom:12px}
.ed-scale-labels{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.ed-scale-labels b{color:var(--ink);font-weight:600}
.ed-cards{display:grid;gap:20px}
.ed-cards.cols-3{grid-template-columns:repeat(3,1fr)}
.ed-cards.cols-2{grid-template-columns:repeat(2,1fr)}
.ed-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:28px 26px;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.ed-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--green),var(--ai));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.ed-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#d9d9cd}
.ed-card:hover::before{transform:scaleX(1)}
.ed-card .card-badge{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--green-d);background:var(--green-wash);border:1px solid #cfe6d8;margin-bottom:18px;font-size:20px}
.ed-card h3{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:8px}
.ed-card p{font-size:14.5px;line-height:1.62;color:var(--muted);margin-bottom:12px}
.ed-card .card-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--green-d);text-decoration:none}
.ed-card .card-link i{font-size:12px;transition:transform .18s}
.ed-card:hover .card-link i{transform:translateX(3px)}
.ed-signals{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ed-signal{display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow-sm);transition:border-color .18s,box-shadow .18s}
.ed-signal:hover{border-color:#d9d9cd;box-shadow:var(--shadow-md)}
.ed-signal .sig-ico{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:16px;color:var(--green-d);background:var(--green-wash);border:1px solid #cfe6d8}
.ed-signal h4{font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:5px}
.ed-signal p{font-size:14px;line-height:1.6;color:var(--muted)}
.ed-signal em{font-style:italic;color:var(--ink-soft)}
.ed-callout{display:flex;gap:14px;align-items:flex-start;margin-top:26px;padding:18px 20px;background:var(--green-wash);border-left:3px solid var(--green);border-radius:12px}
.ed-callout > i{color:var(--green);font-size:18px;margin-top:2px;flex:none}
.ed-callout p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-soft)}
.ed-callout strong{color:var(--ink);font-weight:600}
.ed-signal a,.ed-callout a,.ed-note a,.ed-point a{color:var(--green-d);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;font-weight:600}
.ed-signal a:hover,.ed-callout a:hover,.ed-note a:hover,.ed-point a:hover{color:var(--ink)}
.ed-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);background:var(--surface)}
.ed-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:620px}
.ed-table th,.ed-table td{text-align:left;padding:15px 18px;vertical-align:middle;border-bottom:1px solid var(--line)}
.ed-table tbody tr:last-child td{border-bottom:0}
.ed-table thead th{background:var(--surface-2);color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.ed-table tbody td:first-child{font-weight:600;color:var(--ink)}
.ed-table td:not(:first-child),.ed-table th:not(:first-child){white-space:nowrap}
.ed-table tbody tr:hover td{background:rgba(21,127,91,.035)}
.ed-table th:nth-child(2),.ed-table td:nth-child(2){background:var(--green-wash);border-left:2px solid var(--green);border-right:2px solid var(--green)}
.ed-table thead th:nth-child(2){background:var(--green);color:#fff}
.ed-table tbody td:nth-child(2){color:var(--green-d);font-weight:600}
.ed-table tbody tr:last-child td:nth-child(2){border-bottom:2px solid var(--green)}
.ed-table .yes{color:var(--green-d);font-weight:600}
.ed-table .no{color:var(--faint)}
.ed-table .yes i,.ed-table .no i{margin-right:5px;font-size:12px}
.ed-faq{columns:2;column-gap:26px}
.ed-faqitem{break-inside:avoid;margin-bottom:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .16s}
.ed-faqitem[open]{border-color:#d5d5c8}
.ed-faqitem summary{cursor:pointer;list-style:none;padding:18px 46px 18px 20px;position:relative;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.4}
.ed-faqitem summary::-webkit-details-marker{display:none}
.ed-faqitem summary::after{content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:18px;top:19px;font-size:12px;color:var(--green);transition:transform .2s}
.ed-faqitem[open] summary::after{content:"\f068"}
.ed-faqitem p{padding:0 20px 20px;font-size:14.5px;color:var(--ink-soft);line-height:1.68}
.ed-faqitem a{color:var(--green-d);text-decoration:underline;text-underline-offset:2px}
.ed-note{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-card);padding:30px 32px}
.ed-note p{font-size:15.5px;line-height:1.72;color:var(--ink-soft)}
.ed-note p + p{margin-top:1em}
.ed-note strong{color:var(--ink);font-weight:600}
@media (max-width:900px){
  .ed-section{padding:52px 0}
  .ed-grid{grid-template-columns:1fr;gap:22px}
  .ed-head{position:static}
  .ed-head .ed-sub{max-width:none}
  .ed-cards.cols-3,.ed-cards.cols-2{grid-template-columns:1fr}
  .ed-signals{grid-template-columns:1fr}
  .ed-faq{columns:1}
}
@media (max-width:520px){
  .ed-wrap{padding-left:18px;padding-right:18px}
  .ed-lead{font-size:18px}
}

/* ============================================================
   Editorial restyle of the HCODX tool CONTENT sections so every
   /tools/* page matches the landing-page UI. Scoped to .tool-body
   and never targets the functional app (main.main), so tools keep working.
   ============================================================ */
.tool-body{counter-reset:tsec}
.tool-body .section{counter-increment:tsec;max-width:var(--wrap);margin:0 auto;padding:64px 24px;border-top:1px solid var(--line)}
.tool-body .section > *{max-width:100%}
/* numbered editorial kicker (01 · LABEL) */
.tool-body .section-eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:600;color:var(--green);margin:0 0 14px;font-family:var(--sans)}
.tool-body .section-eyebrow::before{content:counter(tsec,decimal-leading-zero) "  \00b7  ";color:var(--ai);font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:0}
.tool-body .section h2{font-family:var(--serif) !important;font-weight:600;font-size:clamp(27px,3.3vw,38px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
.tool-body .section-lede{font-size:16px;line-height:1.7;color:var(--muted);max-width:64ch;margin:0 0 6px}
/* prose blocks */
.tool-body .section .prose{max-width:none}
.tool-body .section .prose p{font-size:16.5px;line-height:1.78;color:var(--ink-soft)}
.tool-body .section .prose p + p{margin-top:1.1em}
.tool-body .section .prose h3{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);margin:1.4em 0 .4em}
.tool-body .section .prose a{color:var(--green-d);text-decoration:underline;text-underline-offset:2px}
.tool-body .section .prose a:hover{color:var(--ink)}
.tool-body .section .prose strong{color:var(--ink);font-weight:600}
/* use-case grid -> editorial cards */
.tool-body .use-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.tool-body .use-case{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:28px 26px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.tool-body .use-case::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--green),var(--ai));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.tool-body .use-case:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#d9d9cd}
.tool-body .use-case:hover::before{transform:scaleX(1)}
.tool-body .use-case-icon{display:grid !important;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--green-wash);border:1px solid #cfe6d8;color:var(--green-d);font-size:20px;margin-bottom:18px}
.tool-body .use-case h3{font-family:var(--serif) !important;font-weight:600;font-size:19px;color:var(--ink);margin:0 0 8px}
.tool-body .use-case p{font-size:14.5px;line-height:1.62;color:var(--muted);margin:0}
/* how-to steps -> editorial step cards */
/* How-to steps: full-width stacked cards with a big FADED number — no columns, so uneven
   step lengths never leave dead space (the old equal-height grid did). */
.tool-body .steps{display:flex;flex-direction:column;gap:16px;margin-top:30px;grid-template-columns:none}
.tool-body .steps::before{display:none !important}
.tool-body .step{display:flex;align-items:flex-start;gap:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:24px 30px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden}
.tool-body .step:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#d9d9cd}
.tool-body .steps .step-num{flex:0 0 auto;min-width:1.5em;width:auto !important;height:auto !important;display:block !important;background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0;margin:-4px 0 0;font-family:var(--serif) !important;font-weight:600;font-size:clamp(42px,5.2vw,56px);line-height:.85;color:color-mix(in srgb,var(--green) 34%,transparent) !important;text-align:center;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tool-body .step-body{flex:1 1 auto;min-width:0}
.tool-body .step h3,.tool-body .step-body h3{font-family:var(--serif) !important;font-weight:600;font-size:19px;color:var(--ink);margin:2px 0 7px}
.tool-body .step p,.tool-body .step-body p{font-size:15px;line-height:1.66;color:var(--muted);margin:0}
/* FAQ -> editorial card accordion (keeps the JS max-height toggle intact) */
.tool-body .faq-list{max-width:none}
.tool-body .faq-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);margin-bottom:14px;overflow:hidden;transition:border-color .16s}
.tool-body .faq-item:hover{border-color:#d9d9cd}
.tool-body .faq-question{padding:17px 20px;font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.4}
.tool-body .faq-toggle{color:var(--green)}
.tool-body .faq-answer-inner{padding:0 20px 20px;font-size:14.5px;line-height:1.68;color:var(--ink-soft)}
.tool-body .faq-answer-inner a{color:var(--green-d);text-decoration:underline;text-underline-offset:2px}
/* related tools -> editorial cards */
.tool-body .related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:26px}
.tool-body .related-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:22px 22px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.tool-body .related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#d9d9cd}
.tool-body .related-name{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink);display:block;margin-bottom:5px}
.tool-body .related-desc{font-size:14px;line-height:1.6;color:var(--muted)}
/* tool hero -> editorial hero */
.tool-body .hero{max-width:var(--wrap);margin:0 auto;padding:14px 24px 22px;text-align:left}
.tool-body .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:600;color:var(--green);margin-bottom:14px}
.tool-body .hero h1{font-family:var(--serif) !important;font-weight:600;font-size:clamp(34px,5vw,52px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:0}
.tool-body .hero h1 .accent{background-image:linear-gradient(180deg,transparent 58%,rgba(255,209,64,.85) 58%,rgba(255,209,64,.85) 95%,transparent 95%);padding:0 .04em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tool-body .hero > p{font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:none;margin-top:16px}
.tool-body .hero > p a{color:var(--green-d);text-decoration:underline;text-underline-offset:2px}

/* ---- Content prose + lists polish: .about-body (the normalizer "Under the hood" section)
   was completely unstyled, and no <ol> styling existed anywhere. Give .about-body full prose
   parity and turn raw ordered/unordered lists into designed rows. ---- */
.tool-body .section .about-body{max-width:none}
.tool-body .section .about-body > p{font-size:16.5px;line-height:1.78;color:var(--ink-soft);margin:0 0 1.1em}
.tool-body .section .about-body > p:first-child{margin-top:0}
.tool-body .section .about-body > p:last-child{margin-bottom:0}
.tool-body .section .about-body strong{color:var(--ink);font-weight:600}
.tool-body .section .about-body code,
.tool-body .section .prose code{background:var(--green-wash);border:1px solid #dfeee6;padding:1px 6px;border-radius:5px;font-size:13px;font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--green-d)}
/* Ordered lists -> numbered chip rows */
.tool-body .section .about-body ol,
.tool-body .section .prose ol{list-style:none;counter-reset:tli;margin:22px 0 6px;padding:0;display:grid;gap:10px}
.tool-body .section .about-body ol > li,
.tool-body .section .prose ol > li{counter-increment:tli;position:relative;padding:14px 18px 14px 60px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);font-size:15px;line-height:1.62;color:var(--ink-soft)}
.tool-body .section .about-body ol > li::before,
.tool-body .section .prose ol > li::before{content:counter(tli,decimal-leading-zero);position:absolute;left:14px;top:13px;width:32px;height:32px;display:grid;place-items:center;background:var(--green-wash);border:1px solid #cfe6d8;border-radius:9px;color:var(--green-d);font-family:var(--serif);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.tool-body .section .about-body ol > li strong,
.tool-body .section .prose ol > li strong{color:var(--ink);font-weight:600}
/* Unordered lists -> diamond bullets */
.tool-body .section .about-body ul,
.tool-body .section .prose ul{list-style:none;margin:16px 0 6px;padding:0;display:grid;gap:9px}
.tool-body .section .about-body ul > li,
.tool-body .section .prose ul > li{position:relative;padding-left:24px;font-size:16px;line-height:1.7;color:var(--ink-soft)}
.tool-body .section .about-body ul > li::before,
.tool-body .section .prose ul > li::before{content:"";position:absolute;left:4px;top:10px;width:7px;height:7px;border-radius:2px;background:var(--green);transform:rotate(45deg)}
/* Step cards: match the use-case accent top-line for a unified, less-empty look */
.tool-body .step{position:relative;overflow:hidden}
.tool-body .step::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--green),var(--ai));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.tool-body .step:hover::before{transform:scaleX(1)}

@media (max-width:900px){
  .tool-body .section{padding:48px 24px}
  .tool-body .use-cases{grid-template-columns:1fr}
  .tool-body .section .about-body ol > li{padding-left:56px}
  .tool-body .step{gap:16px;padding:20px 20px}
  .tool-body .steps .step-num{font-size:38px}
}

/* AI Text Normalizer — show the per-character breakdown in a wide, readable main card */
.tool-body .nz-details{background:var(--surface);border:1px solid var(--line) !important;border-radius:var(--radius-card) !important;box-shadow:var(--shadow-sm);overflow:hidden;margin-top:18px}
.tool-body .nz-details > summary{padding:16px 22px;font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--ink)}
.tool-body .nz-details-table{display:table !important;width:100% !important;max-height:none !important;overflow:visible !important;font-size:13.5px !important;border-collapse:collapse}
.tool-body .nz-details-table thead{display:table-header-group}
.tool-body .nz-details-table tbody{display:table-row-group}
.tool-body .nz-details-table tr{display:table-row}
.tool-body .nz-details-table th,.tool-body .nz-details-table td{display:table-cell}
.tool-body .nz-details-table th:nth-child(1),.tool-body .nz-details-table td:nth-child(1){width:7%}
.tool-body .nz-details-table th:nth-child(2),.tool-body .nz-details-table td:nth-child(2){width:16%}
.tool-body .nz-details-table th:nth-child(3),.tool-body .nz-details-table td:nth-child(3){width:26%}
.tool-body .nz-details-table th:nth-child(4),.tool-body .nz-details-table td:nth-child(4){width:26%}
.tool-body .nz-details-table th:nth-child(5),.tool-body .nz-details-table td:nth-child(5){width:25%}
.tool-body .nz-details-table th{background:var(--surface-2);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:11.5px;font-weight:600;padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.tool-body .nz-details-table td{padding:10px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:top}
.tool-body .nz-details-table tbody tr:nth-child(even) td{background:rgba(21,127,91,.03)}
.tool-body .nz-details-table tbody tr:last-child td{border-bottom:0}