:root{
  --green-700:#0a7d45;--green-600:#0d8f4f;--green-500:#12a862;--green-50:#eaf7f0;
  --ink-900:#0a1a12;--ink-700:#25332c;--ink-500:#5d6f66;--ink-400:#8d9c94;
  --line:#dfe6e2;--bg:#fbfcfb;--white:#fff;--red:#b3261e;
  --r:14px;--shadow:0 1px 2px rgba(10,26,18,.05),0 8px 24px rgba(10,26,18,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink-900);
  font:400 16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--green-700)}
img{max-width:100%;height:auto}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

.bar{background:var(--white);border-bottom:1px solid var(--line)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand img{height:32px;width:auto;display:block}
.util{font-size:.9rem;color:var(--ink-500)}
.util strong{color:var(--ink-900)}

h1{font-size:clamp(1.6rem,4vw,2.1rem);letter-spacing:-.02em;margin:34px 0 20px}

.steps{list-style:none;display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:0 0 26px;font-size:.9rem;color:var(--ink-400)}
.steps li{display:flex;align-items:center;gap:8px}
.steps li+li::before{content:"";width:22px;height:1px;background:var(--line);margin-right:2px}
.steps__n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--white);border:1px solid var(--line);font-size:.8rem;font-weight:650}
.steps .is-current{color:var(--ink-900);font-weight:600}
.steps .is-current .steps__n{background:var(--green-600);border-color:var(--green-600);color:#fff}
.steps .is-done .steps__n{background:var(--green-50);border-color:var(--green-500);color:var(--green-700)}

.layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;padding-bottom:56px}
@media (max-width:860px){.layout{grid-template-columns:1fr}.side{order:-1}}

.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:26px}
fieldset{border:0;margin:0;padding:0}
legend{font-size:1.1rem;font-weight:650;margin-bottom:18px;padding:0}

.field{margin-bottom:18px}
.grid2{display:grid;grid-template-columns:1fr 160px;gap:14px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
label{display:block;font-size:.88rem;font-weight:600;color:var(--ink-700);margin-bottom:6px}
input[type=text],input[type=email],input[type=tel]{
  width:100%;padding:12px 14px;font:inherit;color:var(--ink-900);background:var(--white);
  border:1px solid var(--line);border-radius:10px}
input:focus{outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500)}
input[readonly]{background:var(--bg);color:var(--ink-500)}
.hint{display:block;margin-top:6px;font-size:.83rem;color:var(--green-700)}
.err{display:none;margin-top:6px;font-size:.83rem;color:var(--red)}
.is-bad input{border-color:var(--red)}
.is-bad .err{display:block}
#consent-err{display:none}

.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.9rem;color:var(--ink-700)}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--green-600);flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.help{margin-top:10px}
.help summary{cursor:pointer;font-size:.85rem;color:var(--green-700);font-weight:550}
.help p{font-size:.86rem;color:var(--ink-500);margin:8px 0 0}

.legal{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.79rem;line-height:1.55;color:var(--ink-500)}
.legal p{margin:0 0 10px}

.actions{display:flex;gap:12px;margin-top:24px}
.btn{font:inherit;font-weight:650;border-radius:10px;padding:12px 22px;cursor:pointer;border:1px solid transparent}
.btn--primary{background:var(--green-600);color:#fff;flex:1}
.btn--primary:hover{background:var(--green-700)}
.btn--primary:disabled{opacity:.6;cursor:default}
.btn--ghost{background:var(--white);border-color:var(--line);color:var(--ink-700)}
.formfail{margin-top:16px;padding:12px 14px;border-radius:10px;background:#fdf2f1;
  color:var(--red);font-size:.88rem}

.side{display:grid;gap:16px}
.rate{background:var(--green-700);color:#fff;border-radius:var(--r);padding:22px;display:grid;gap:4px}
.rate__term{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.rate__n{font-size:2.6rem;font-weight:750;line-height:1.05;letter-spacing:-.02em}
.rate__n small{font-size:.95rem;font-weight:600;margin-left:4px;opacity:.9}
.rate__sub{font-size:.83rem;opacity:.85}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.9rem;color:var(--ink-700)}
.ticks li{padding-left:24px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:13px;height:8px;
  border-left:2.5px solid var(--green-500);border-bottom:2.5px solid var(--green-500);transform:rotate(-45deg)}
.summary{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin:0;font-size:.88rem;display:grid;grid-template-columns:auto 1fr;gap:8px 14px}
.summary dt{color:var(--ink-400)}
.summary dd{margin:0;font-weight:600;overflow-wrap:anywhere}

.foot{border-top:1px solid var(--line);background:var(--white);padding:26px 0 40px;
  font-size:.82rem;color:var(--ink-500);line-height:1.6}
.foot p{margin:0 0 12px;max-width:72ch}
.foot__meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center}

.done{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:44px;text-align:center;max-width:620px;margin:44px auto 64px}
.done h1{margin-top:0}
.done .tick{width:60px;height:60px;border-radius:50%;background:var(--green-50);
  display:grid;place-items:center;margin:0 auto 20px}
.prose{max-width:70ch;margin:32px auto 64px}
.prose h2{font-size:1.1rem;margin:28px 0 8px}
.prose li{margin-bottom:8px}

/* On a phone the side panel sits above the form; an empty summary before the
   customer has typed anything is just noise, so hold it back until step 2. */
@media (max-width:860px){ body.step-1 .summary{display:none} }