/* Tokens match the original stoppaying.rent (Google Site) + logo:
   dark top bar #212121, orange hero band #EF8622, gray bands #F2F2F2, yellow #FFD966 / logo #F5C12E, Lato. */
:root{
  --ink:#212121; --muted:#5e5e5e; --bg:#ffffff; --band:#f2f2f2; --card:#ffffff; --line:#e2e2e2;
  --dark:#212121; --on-dark:#d9d9d9;
  --brand:#ef8622; --brand-ink:#212121; --brand-deep:#a9540a; /* deep = orange text on white (AA) */
  --sun:#f5c12e; --sun-soft:#fff6dc; --gold:#ffd966;
  --ok:#2f7d5a; --err:#b3261e;
  --radius:14px; --max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 "Lato",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-deep)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

header.top{background:var(--dark)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px}
.logo img{height:64px;width:64px}

.btn{display:inline-block;border:0;font-family:inherit;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-weight:900;font-size:17px;letter-spacing:.02em;padding:14px 26px;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.btn.small{padding:10px 18px;font-size:15px}
.btn:disabled{opacity:.6;cursor:wait}

h1,h2,h3{font-family:"Lato",system-ui,sans-serif;font-weight:900;line-height:1.1;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(34px,6vw,56px)}
h2{font-size:clamp(26px,4vw,36px)}
h3{font-size:21px;font-weight:700}

.hero{padding:56px 0 48px;background:var(--brand);color:var(--ink)}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.hero h1{color:var(--dark)}
.lede{font-size:20px;color:var(--muted);max-width:34em}
.hero .lede{color:var(--dark)}
.hero ul.lede li{margin:4px 0}
.hero ul.lede li::marker{color:var(--dark)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 6px 24px rgba(33,33,33,.08)}
.hero .card{border:0;box-shadow:0 14px 40px rgba(33,33,33,.22)}
.step-label{font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep)}
label{display:block;font-weight:700;font-size:15px;margin:14px 0 6px}
select,input{width:100%;font:inherit;padding:12px 14px;border:1px solid #cfcfcf;border-radius:10px;background:#fff;color:var(--ink)}
select:focus,input:focus{outline:3px solid rgba(239,134,34,.35);border-color:var(--brand)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fine{font-size:13px;color:var(--muted);line-height:1.5}
.estimate{margin:18px 0;padding:16px;border-radius:12px;background:var(--sun-soft);border:1px solid var(--sun)}
.estimate strong{font-size:26px;display:block;font-weight:900}
.err{color:var(--err);font-size:14px;margin-top:8px;min-height:1em}
.hidden{display:none}

section{padding:56px 0}
main section:nth-of-type(odd){background:var(--band)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cols3 .card h3{border-left:4px solid var(--brand);padding-left:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:12px}
.faq summary{font-weight:700;cursor:pointer;font-size:18px}
.faq summary::marker{color:var(--brand)}
.faq details[open] summary{margin-bottom:8px}
.answers-list a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-weight:700;text-decoration:none}
.answers-list a.btn{display:inline-block;border:0;padding:14px 26px}
article.answer{max-width:760px;padding:48px 0}
article.answer .short{font-size:20px;background:var(--sun-soft);border-left:4px solid var(--brand);padding:16px 20px;border-radius:8px}

footer{background:var(--dark);color:var(--on-dark);padding:32px 0;font-size:14px}
footer strong{color:#fff}
footer a{color:var(--gold)}
footer .eho{font-weight:700;color:#fff}

@media (max-width:820px){
  .hero .grid,.cols3{grid-template-columns:1fr}
  .hero{padding:24px 0 32px}
  .hero ul.lede{display:none}
  .hero .lede{font-size:17px}
  h1{font-size:32px}
  header.top .wrap{min-height:68px}
  .logo img{height:52px;width:52px}
}