/* =========================================================================
   Tools — shared standalone-page styles (_tool.css)
   Brand-token base for every tool page + LeadGateModal + common primitives.
   Pulls the canonical Inter font + tokens from the hub's colors_and_type.css
   (each page also <link>s ../../colors_and_type.css for the @font-face).
   ========================================================================= */
:root{
  --blue:#0058C8; --blue-hover:#0048A3; --blue-light:#2D6DF0; --navy:#001B5E;
  --gold:#D4AF37; --gold-light:#F2D97A; --gold-dark:#A67C18;
  --tx-h:#111827; --tx:#181D27; --tx-body:#535862; --tx-2:#667085; --tx-muted:#9CA3AF;
  --bg:#FBF6EA; --bg-alt:#F3E8D6; --white:#fff; --cream:#FAF8F5;
  --line:#EAECF0; --line-strong:#D0D5DD;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-full:9999px;
  --sh-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --sh-md:0 4px 6px -1px rgba(0,0,0,.10),0 2px 4px -1px rgba(0,0,0,.06);
  --sh-lg:0 10px 15px -3px rgba(0,0,0,.10),0 4px 6px -2px rgba(0,0,0,.05);
  --sh-blue:0 6px 18px rgba(0,87,184,.28);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --grad-blue:linear-gradient(135deg,#0058C8 0%,#2D6DF0 100%);
  --grad-navy:linear-gradient(160deg,#001B5E 0%,#0058C8 100%);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);color:var(--tx-body);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--tx-h);line-height:1.2;margin:0 0 .4em}
a{color:var(--blue);text-decoration:none}
.tool-wrap{max-width:980px;margin:0 auto;padding:32px 20px 80px}
.tool-hero{text-align:center;margin:8px 0 28px}
.tool-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:color-mix(in srgb,var(--blue) 9%,transparent);padding:5px 12px;border-radius:var(--r-full);margin-bottom:12px}
.tool-hero h1{font-size:clamp(28px,5vw,44px)}
.tool-hero p{font-size:16px;color:var(--tx-body);max-width:64ch;margin:8px auto 0}

/* generic primitives the ports use */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-sm);padding:20px}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;cursor:pointer;border-radius:var(--r-lg);padding:12px 22px;border:1px solid transparent;transition:all .15s}
.btn-primary{background:var(--grad-blue);color:#fff;box-shadow:var(--sh-blue)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:var(--white);color:var(--blue);border-color:var(--line-strong)}
.opt{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--white);border:2px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;font:inherit;transition:all .15s}
.opt:hover{border-color:var(--blue-light)}
.opt.sel{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 5%,var(--white))}
.opt-label{font-weight:600;color:var(--tx)}
.opt-desc{font-size:13px;color:var(--tx-2)}
.grid-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.steps{display:flex;gap:8px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.step-dot{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tx-muted)}
.step-dot.on{color:var(--blue);font-weight:600}
.step-num{width:24px;height:24px;border-radius:var(--r-full);display:grid;place-items:center;background:var(--line);font-size:12px;font-weight:700}
.step-dot.on .step-num{background:var(--blue);color:#fff}
.disclaimer{font-size:12px;color:var(--tx-muted);font-style:italic;margin-top:24px;text-align:center;max-width:70ch;margin-inline:auto}
.blurred{filter:blur(6px);pointer-events:none;user-select:none}

/* ---------- LeadGateModal ---------- */
.lg-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:1000;padding:20px}
.lg-card{position:relative;background:var(--white);border-radius:var(--r-2xl);box-shadow:var(--sh-lg);padding:32px 28px;width:100%;max-width:420px}
.lg-close{position:absolute;top:14px;right:16px;border:none;background:none;font-size:24px;line-height:1;color:var(--tx-muted);cursor:pointer}
.lg-eyebrow{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);margin:0 0 4px}
.lg-headline{font-size:20px;margin:0 0 6px}
.lg-context{font-size:14px;color:var(--tx-body);margin:0 0 16px}
.lg-label{display:block;font-size:13px;font-weight:600;color:var(--tx);margin:12px 0 0}
.lg-input{width:100%;margin-top:5px;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--r-lg);font:inherit}
.lg-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
.lg-error{color:#C0392B;font-size:13px;margin:10px 0 0}
.lg-submit{width:100%;margin-top:18px;background:var(--grad-blue);color:#fff;border:none;border-radius:var(--r-lg);padding:13px;font:inherit;font-weight:700;cursor:pointer;box-shadow:var(--sh-blue)}
.lg-submit:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.lg-privacy{font-size:11.5px;color:var(--tx-muted);margin:14px 0 0;text-align:center}

@media (max-width:560px){ .tool-wrap{padding:20px 14px 64px} }