/* Live-checker results + contact form for the v2 homepage.
   Rules lifted from v2.css (what audit.js / forms.js render into), scoped
   under .htw-widget with the tokens they expect, recoloured to the v2 palette. */
.htw-widget{
  --white:#fff; --soft:#f2f1ec; --tint:#e9e7df; --line:#d9d6cc; --line-2:#e4e2da;
  --ink:#1c1c1a; --body:#45453f; --body-2:#55554f;
  --indigo:#1c1c1a; --indigo-d:#000; --indigo-t:#f3fbe0;
  --ok:#0F7A4E; --ok-bg:#E4F6EC; --warn:#9A4A05; --warn-bg:#FDEEDF; --bad:#B3261E; --bad-bg:#FCE9E7;
  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(0,0,0,.06); --sh-2:0 8px 24px rgba(0,0,0,.08);
  color:var(--body); font-size:16px;
}
.audit-card .htw-widget:has(#auditStage:not(:empty), #auditResult:not(:empty)){
  background:#fff; border-radius:18px; padding:clamp(16px,3vw,28px);
}
.htw-widget h3{color:var(--ink); margin:0}
.htw-widget .btn-pill{background:var(--lime,#c8f53c); color:#1c1c1a}
.htw-widget .field{
  flex:1 1 260px; min-width:0; padding:15px 17px; font:inherit; font-size:1rem;
  color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:13px;
}
.htw-widget .field::placeholder{color:#666E8C}
.htw-widget .field:focus{outline:none; border-color:var(--indigo); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
.htw-widget .audit-form .btn{padding:15px 24px; font-size:1rem; border-radius:13px}
.htw-widget .audit-note{margin-top:13px; font-size:.86rem; color:var(--body-2)}
.htw-widget #auditStage:not(:empty),.htw-widget #auditResult:not(:empty){margin-top:24px}

/* live scan steps — audit.js emits li.audit-step > i + span, then .on / .done */
.htw-widget #auditSteps{display:grid; gap:8px}
.htw-widget .audit-step{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border:1px solid var(--line-2); border-radius:11px;
  font-size:.92rem; color:var(--body-2); background:#FBFCFF;
  opacity:0; transform:translateY(4px);
  animation:auditIn .34s ease forwards;
  transition:border-color .2s, background .2s, color .2s;
}
@keyframes auditIn{to{opacity:1; transform:none}}
.htw-widget .audit-step i{
  width:16px;height:16px;flex:0 0 16px;border-radius:50%;position:relative;
  background:var(--tint); box-shadow:inset 0 0 0 1.5px var(--line);
}
.htw-widget .audit-step.on{
  color:var(--ink); background:var(--white); border-color:#C7CDF0;
  box-shadow:0 0 0 3px rgba(67,56,202,.10);
}
.htw-widget .audit-step.on i{
  background:var(--indigo-t); box-shadow:inset 0 0 0 1.5px var(--indigo);
  animation:auditPulse 1s ease-in-out infinite;
}
@keyframes auditPulse{50%{box-shadow:inset 0 0 0 1.5px var(--indigo), 0 0 0 4px rgba(67,56,202,.14)}}
.htw-widget .audit-step.done{color:var(--body); background:var(--white); border-color:var(--line-2)}
.htw-widget .audit-step.done i{background:var(--ok-bg); box-shadow:inset 0 0 0 1.5px rgba(15,122,78,.4)}
.htw-widget .audit-step.done i::after{
  content:""; position:absolute; left:5px; top:3.5px; width:4px; height:7px;
  border:solid var(--ok); border-width:0 1.9px 1.9px 0; transform:rotate(42deg);
}

/* result */
.htw-widget #auditResult{opacity:0; transition:opacity .35s ease}
.htw-widget #auditResult.show{opacity:1}
.htw-widget .audit-head{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:22px}
.htw-widget .audit-ring{
  width:92px;height:92px;flex:0 0 92px;border-radius:50%;
  display:grid; place-content:center; text-align:center;
  border:4px solid var(--line); background:var(--white); box-shadow:var(--sh-1);
}
.htw-widget .audit-ring span{display:block; font-size:2rem; font-weight:800; line-height:1; color:var(--ink); letter-spacing:-.03em}
.htw-widget .audit-ring small{font-size:.72rem; color:var(--body-2); font-weight:600}
.htw-widget .audit-ring.ring-good{border-color:#0F7A4E} .audit-ring.ring-good span{color:#0B5D3B}
.htw-widget .audit-ring.ring-mid{border-color:#9A4A05}  .audit-ring.ring-mid span{color:#8A4205}
.htw-widget .audit-ring.ring-bad{border-color:#B3261E}  .audit-ring.ring-bad span{color:#9F211A}
.htw-widget .audit-head h3{font-size:clamp(1.3rem,2.6vw,1.75rem); margin-bottom:4px}
.htw-widget .audit-url{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.84rem; color:var(--body-2);
  overflow-wrap:anywhere;
}

.htw-widget .audit-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:24px;
}
.htw-widget .audit-stats>div{
  background:#FBFCFF; border:1px solid var(--line-2); border-radius:var(--r-m);
  padding:14px 15px; min-width:0;
}
.htw-widget .audit-stats b{
  display:block; font-size:1.12rem; font-weight:800; color:var(--ink);
  letter-spacing:-.02em; overflow-wrap:anywhere;
}
.htw-widget .audit-stats small{
  display:block; margin-top:4px; font-size:.7rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--body-2);
}

.htw-widget .audit-findings{display:grid; gap:12px; margin-bottom:26px}
.htw-widget .audit-findings li{
  border:1px solid var(--line-2); border-left:4px solid var(--line); border-radius:var(--r-m);
  padding:15px 17px; background:var(--white); box-shadow:var(--sh-1);
  opacity:0; animation:auditIn .4s ease forwards;
}
.htw-widget .audit-findings .sev{
  display:block; margin-bottom:6px; font-size:.68rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--body-2);
}
.htw-widget .audit-findings h4{font-size:1.02rem; margin-bottom:6px}
.htw-widget .audit-findings p{font-size:.94rem; color:var(--body)}
.htw-widget .audit-findings li.sev-high{border-left-color:#B3261E} .audit-findings li.sev-high .sev{color:#B3261E}
.htw-widget .audit-findings li.sev-med{border-left-color:#9A4A05}  .audit-findings li.sev-med .sev{color:#9A4A05}
.htw-widget .audit-findings li.sev-low{border-left-color:var(--indigo)} .audit-findings li.sev-low .sev{color:var(--indigo)}

.htw-widget .audit-clean{
  border:1px solid var(--line-2); border-left:4px solid #0F7A4E; border-radius:var(--r-m);
  padding:20px 22px; background:#FBFCFF; margin-bottom:26px;
}
.htw-widget .audit-clean h4{font-size:1.1rem; margin-bottom:8px}
.htw-widget .audit-clean p{font-size:.95rem; color:var(--body); margin-bottom:12px}
.htw-widget .audit-clean p:last-child{margin-bottom:0}
.htw-widget .audit-next{display:grid; gap:9px; margin:0 0 14px}
.htw-widget .audit-next li{
  position:relative; padding-left:22px; font-size:.94rem; color:var(--body); line-height:1.5;
}
.htw-widget .audit-next li::before{
  content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%;
  background:var(--indigo);
}
.htw-widget .audit-next b{color:var(--ink)}
.htw-widget .audit-error{
  border:1px solid #F0CFCC; border-left:4px solid #B3261E; border-radius:var(--r-m);
  padding:16px 18px; background:var(--bad-bg); color:#8E1E17; font-weight:600;
}
.htw-widget .audit-cta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--line-2);
}
.htw-widget .audit-cta .btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--indigo); color:#fff; text-decoration:none; font-weight:600; font-size:.96rem;
  padding:14px 22px; border-radius:13px;
  box-shadow:0 1px 2px rgba(14,19,48,.2), 0 6px 18px rgba(67,56,202,.28);
}
.htw-widget .audit-cta .btn-pill:hover{background:var(--indigo-d)}
.htw-widget .audit-cta span{font-size:.88rem; color:var(--body-2)}

.htw-widget .contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:52px; align-items:start}
.htw-widget .contact-lines{display:grid; gap:8px; margin-top:28px}
.htw-widget .contact-lines a{color:var(--lav); text-decoration:none; font-weight:700; font-size:1.05rem}
.htw-widget .contact-lines a:hover{text-decoration:underline}
.htw-widget .contact-lines span{color:var(--on-dark-2); font-size:.95rem}
.htw-widget.form-card{
  background:var(--white); border-radius:var(--r-xl); padding:30px 28px; box-shadow:var(--sh-4);
}
.htw-widget.form-card form{display:grid; gap:12px}
.htw-widget .frow{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.htw-widget.form-card input,.htw-widget.form-card select,.htw-widget.form-card textarea{
  width:100%; min-width:0; padding:13px 15px; font:inherit; font-size:.97rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:12px;
}
.htw-widget.form-card textarea{min-height:132px; resize:vertical}
.htw-widget.form-card input::placeholder,.htw-widget.form-card textarea::placeholder{color:#666E8C}
.htw-widget.form-card :is(input,select,textarea):focus{
  outline:none; border-color:var(--indigo); box-shadow:0 0 0 4px rgba(67,56,202,.14);
}
.htw-widget .notice{
  display:none; margin-top:16px; padding:16px 18px; border-radius:14px;
  background:var(--indigo-t); border:1px solid #CFCBF6;
}
.htw-widget .notice p{margin-bottom:8px; font-size:.92rem; color:var(--body)}
.htw-widget .notice a{font-weight:700}

/* contact section in the v2 layout */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);padding:120px var(--pad,24px);max-width:1520px;margin:0 auto;align-items:start}
.contact-copy{display:flex;flex-direction:column;gap:20px}
.contact-lines{display:grid;gap:6px;font-weight:600}
.contact-lines a{color:var(--ink,#1c1c1a);text-decoration:underline;text-underline-offset:3px}
.contact-lines span{color:var(--ink2,#55554f);font-weight:500}
.form-card.htw-widget{background:#fff;border-radius:var(--r);padding:clamp(20px,3vw,36px);border:1px solid #e4e2da}
.htw-widget.form-card{border-radius:24px}
.contact .btn-pill.full{width:100%;min-height:52px}
@media (max-width:1024px){.contact{grid-template-columns:1fr;padding-top:80px;padding-bottom:80px}}