/* Free tools (R13): /tools/, Lead Leak Audit, missed-call calculator, plus the form controls the contact and intake pages share.
   Loaded by tools_hub.j2, tool.j2, company_contact.j2 and company_start.j2, after v2-pages.css; on the v2 tokens (sitewide
   restyle 2026-10-21). Motion spec and sources: DESIGN.md "Free tools (R13)". Status colours (--ok --warn --bad) are in v2-pages.css. */

/* ---------- hub ---------- */
.tool-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tool-card { --c: 30px; position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 30px 32px 34px; text-decoration: none; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); transition: transform 240ms var(--ease); }
.tool-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 100ms var(--ease); background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 30%), rgba(0, 187, 255, .16), transparent 62%); }
.tool-card:hover::after { opacity: 1; }
.tool-card:hover { transform: translateY(-4px); }
.tool-ic { display: grid; place-items: center; height: 150px; margin: -8px -8px 4px; background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%); }
.tool-ic .ani { width: 100%; max-width: 190px; height: auto; overflow: visible; filter: drop-shadow(0 8px 12px rgba(0, 140, 230, .22)); }
.tool-card h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.tool-card p { color: var(--ink-2); line-height: 1.6; }
.tool-card .go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--f-head); color: var(--accent-ink); }
.tool-card .go .arr { width: 17px; height: 17px; transition: transform 240ms var(--ease); }
.tool-card:hover .go .arr { transform: translateX(6px); }

/* ---------- tool hero + panel ---------- */
.tool-hero .ph-in { grid-template-columns: minmax(0, 880px); }
.sx-tool { padding-top: 56px; }
.tool-panel { --c: 36px; margin-top: 0; padding: 34px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.tool-label { display: block; font: 700 15px/1.35 var(--f-head); letter-spacing: .01em; color: var(--ink); }
.hint { margin-top: 6px; font-size: 14px; color: var(--muted); }
.tool-input { display: block; width: 100%; min-height: 56px; margin-top: 12px; padding: 14px 16px; font: 600 17px var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 0; transition: border-color 100ms var(--ease), box-shadow var(--t-quick) var(--ease); }
.tool-input::placeholder { color: var(--muted); opacity: 1; }
.tool-input:hover { border-color: var(--accent-ink); }
.tool-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.tool-input[aria-invalid="true"] { border-color: var(--bad); }
select.tool-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field-err { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--bad); }
.js .field-err:not([hidden]) { animation: err-in 200ms var(--ease) both; }
@keyframes err-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.tool-privacy, .tool-noscript { margin-top: 14px; font-size: 14px; color: var(--muted); }
.tool-noscript { color: var(--ink-2); padding: 14px 16px; border: 1px dashed var(--line-2); }

/* ---------- Lead Leak Audit ---------- */
.leak-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.leak-row .btn { min-height: 56px; }
.btn[aria-disabled="true"] { opacity: .6; cursor: progress; transform: none; }
.leak-out { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.leak-out.busy { min-height: min(560px, 70vh); }       /* reserved on submit so the result grows into space already taken */
.leak-progress p { color: var(--ink-2); }
.leak-progress .elapsed { margin-top: 8px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.leak-bar { position: relative; height: 4px; margin-top: 18px; background: var(--line); overflow: hidden; }
.leak-bar span { position: absolute; inset: 0 auto 0 0; width: 34%; background: linear-gradient(90deg, rgba(0, 187, 255, 0), var(--accent)); animation: scan 1800ms cubic-bezier(.4, 0, .2, 1) infinite alternate; }
@keyframes scan { from { transform: translateX(-10%); } to { transform: translateX(206%); } }
.leak-msg { padding: 22px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.leak-msg p { color: var(--ink-2); }
.leak-msg .cta-row { margin-top: 18px; }
.leak-result:focus { outline: none; }
.leak-score { display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: end; }
.leak-score .lbl { grid-column: 1 / -1; font: 700 12px var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.leak-score .num { font: 800 clamp(64px, 8vw, 96px)/.9 var(--f-head); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.leak-score .num small { display: block; margin-top: 10px; font: 600 14px var(--f-body); letter-spacing: 0; color: var(--muted); }
.leak-score .verdict { font: 700 clamp(22px, 2.4vw, 30px)/1.2 var(--f-head); color: var(--ink); padding-bottom: 6px; }
.meter { grid-column: 1 / -1; height: 8px; margin-top: 16px; background: var(--line); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--c, var(--ok)); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform var(--t-slow) var(--ease) 100ms; }
.meter.from-zero span { transform: scaleX(0); }
.based { margin-top: 16px; font-size: 14px; color: var(--muted); }
.leak-result h3 { margin-top: 34px; font-size: 22px; }
.findings { list-style: none; margin-top: 14px; border-top: 1px solid var(--line-2); }
.findings li { display: grid; grid-template-columns: 128px 1fr; gap: 6px 20px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.findings b { display: block; color: var(--ink); font: 700 17px/1.3 var(--f-head); }
.findings p { margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.findings small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.badge { justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--f-head); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; box-shadow: inset 0 0 0 1px currentColor; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.f-pass .badge { color: var(--ok); } .f-warn .badge { color: var(--warn); } .f-fail .badge { color: var(--bad); } .f-na .badge, .f-info .badge { color: var(--muted); }
.js .findings li.enter { animation: rise var(--t-slow) var(--ease) calc(100ms + var(--i, 0) * 50ms) both; }
.field-line { margin-top: 20px; font-size: 14px; color: var(--muted); }
.google-link { margin-top: 14px; font-size: 15px; }
.google-link a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.leak-next { margin-top: 28px; padding: 24px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; }
.leak-next p { color: var(--ink-2); }
.js .leak-result.enter, .js .leak-msg.enter, .js .form-done.enter { animation: rise var(--t-slow) var(--ease) both; }
.leak-progress.leave { animation: leave 240ms var(--ease-in) both; }
@keyframes leave { to { opacity: 0; transform: translate3d(0, -8px, 0); } }

/* method rows: the numeral is the points value */
.checks-rows .xrow { grid-template-columns: 90px minmax(0, .8fr) minmax(0, 1.2fr); }

/* ---------- forms (tools report form, contact, intake) ---------- */
.report-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.report-grid .sx-head { margin-bottom: 0; }
.lead-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.lead-form fieldset[disabled] { opacity: .55; }
.lead-form .wide { grid-column: 1 / -1; }
.lead-form .tool-input { margin-top: 8px; }
.consent { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 15px; cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.lead-form .small { font-size: 13px; color: var(--muted); }
.lead-form .small a { color: var(--accent-ink); }
.form-off { margin-bottom: 22px; padding: 16px 18px; color: var(--ink); font-size: 15px; background: color-mix(in srgb, var(--warn) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--warn); }
.form-status { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.form-status.err { color: var(--bad); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { padding: 26px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.form-done h3 { display: flex; align-items: center; gap: 12px; font-size: 22px; }
.form-done svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-dasharray: 24; stroke-dashoffset: 0; }
.js .form-done.enter svg { animation: draw 150ms var(--ease) 100ms both; }
@keyframes draw { from { stroke-dashoffset: 24; } }
.form-done p { margin-top: 10px; color: var(--ink-2); }
.privacy-h { font-size: 20px; margin-bottom: 10px; }
.privacy-note .sa-note { max-width: 860px; margin-top: 0; }
.privacy-note .sa-note p { color: var(--ink-2); }

/* ---------- calculator ---------- */
.tool-panel.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.calc-form { padding: 34px; display: grid; gap: 26px; align-content: start; border-right: 1px solid var(--line-2); }
.affixed { position: relative; }
.affix { position: absolute; top: 12px; bottom: 0; display: flex; align-items: center; font: 700 17px var(--f-body); color: var(--muted); pointer-events: none; }
.affix.pre { left: 16px; } .affix.suf { right: 16px; }
.has-prefix .tool-input { padding-left: 34px; } .has-suffix .tool-input { padding-right: 40px; }
.tool-input[type="number"] { -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.tool-input[type="number"]::-webkit-inner-spin-button, .tool-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-out { padding: 34px; background: var(--navy); color: var(--navy-ink); }
.calc-big { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--navy-line); }
.calc-big .lbl { font: 700 12px/1.35 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--navy-muted); }
.calc-big output { display: block; margin-top: 8px; font: 800 clamp(34px, 4vw, 52px)/1 var(--f-head); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.calc-big div + div output { font-size: clamp(26px, 2.8vw, 36px); color: var(--cyan); }
.calc-h { margin-top: 24px; font-size: 20px; font-weight: 700; }
.calc-out .calc-h { color: #fff; }
.calc-lines { margin: 12px 0 0; padding-left: 1.4em; display: grid; gap: 10px; color: var(--navy-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.calc-lines li::marker { color: var(--navy-muted); }
.calc-note { margin-top: 18px; font-size: 13px; color: var(--navy-muted); }
.calc-note.err { color: var(--bad); font-weight: 600; }
.calc-out .tool-noscript { color: var(--navy-ink); border-color: var(--navy-line); }
.tick { animation: tick var(--t-quick) var(--ease) both; }
@keyframes tick { from { opacity: .45; transform: translate3d(0, 4px, 0); } }
.calc-offer { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr auto; gap: 20px 40px; align-items: center; padding: 30px 34px; border-top: 1px solid var(--line-2); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.calc-offer .kicker { margin-bottom: 8px; }
.calc-offer .calc-h { margin-top: 0; font-size: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.calc-offer .amount { font: 800 24px var(--f-head); color: var(--accent-ink); }
.calc-offer .amount small { font: 600 14px var(--f-body); color: var(--muted); }
.calc-offer p { margin-top: 10px; color: var(--ink-2); font-size: 15px; max-width: 70ch; }
.calc-offer .breakeven { color: var(--ink); }
.formula { max-width: 860px; display: grid; gap: 18px; }
.formula p { color: var(--ink-2); }
.formula .eq { font: 700 clamp(19px, 1.8vw, 23px)/1.5 var(--f-head); color: var(--ink); padding: 22px 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .tool-panel.calc, .report-grid { grid-template-columns: minmax(0, 1fr); }
  .report-grid { gap: 28px; }
  .calc-form { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .calc-offer { grid-template-columns: minmax(0, 1fr); }
  .leak-next { grid-template-columns: minmax(0, 1fr); }
  .checks-rows .xrow { grid-template-columns: 56px minmax(0, 1fr); }
  .checks-rows .xrow .body { grid-column: 2; }
}
@media (max-width: 640px) {
  .tool-cards, .lead-form fieldset { grid-template-columns: minmax(0, 1fr); }
  .tool-card { padding: 26px 22px; }
  .tool-panel { padding: 22px 18px; }
  .tool-panel.calc { padding: 0; }
  .calc-form, .calc-out, .calc-offer { padding: 24px 18px; }
  .leak-row { grid-template-columns: minmax(0, 1fr); }
  .leak-row .btn { width: 100%; }
  .findings li { grid-template-columns: minmax(0, 1fr); }
  .calc-big { grid-template-columns: 1fr 1fr; }
  .leak-next .btn, .calc-offer .btn { width: 100%; }
}

/* ---------- reduced motion: opacity only, no loops (DESIGN.md) ---------- */
@media (prefers-reduced-motion: reduce) {
  .leak-bar span { animation: none; width: 100%; background: linear-gradient(90deg, rgba(0, 187, 255, .15), rgba(0, 187, 255, .5)); }
  .js .findings li.enter, .js .leak-result.enter, .js .leak-msg.enter, .js .form-done.enter, .tick, .js .field-err:not([hidden]) { animation: fade 160ms linear both; }
  .leak-progress.leave { animation: none; }
  .js .form-done.enter svg { animation: none; }
  .meter span { transition: none; }
}