/* The AI Estimator — by RoofMetric. Clean, minimal, icon-free design.
   Light layout, single indigo accent, refined typography. */

:root{
  --ink:#0a0e17;
  --body:#454c5a;
  --muted:#8a909c;
  --line:#ececf0;
  --bg:#ffffff;
  --bg-soft:#f7f8fa;
  --accent:#4f46e5;
  --accent-ink:#4338ca;
  --accent-soft:#eef0ff;
  --radius:16px;
  --maxw:1120px;
  /* back-compat aliases for legacy inline styles */
  --indigo:#4f46e5;
  --indigo-dark:#4338ca;
  --cyan:#0891b2;
  --blue:#4f46e5;
  --slate:#454c5a;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--body);line-height:1.65;background:var(--bg);-webkit-font-smoothing:antialiased;font-size:17px;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-ink);}
img{max-width:100%;}
h1,h2,h3,h4{color:var(--ink);}

.brand .mark{display:none;}
.card .ic{display:none;}

/* Nav */
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 28px;max-width:var(--maxw);margin:0 auto;}
.brand{display:flex;align-items:center;gap:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--ink);}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{font-size:15px;color:var(--body);font-weight:450;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{background:var(--ink) !important;color:#fff !important;padding:10px 18px;border-radius:10px;font-weight:550;font-size:14px;white-space:nowrap;}
.nav-cta:hover{background:#1c2433 !important;}
@media(max-width:780px){.nav-links a:not(.nav-cta){display:none;}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:inherit;font-weight:550;border-radius:11px;padding:14px 24px;font-size:16px;line-height:1;transition:background .15s ease,transform .08s ease,box-shadow .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary,.btn-cyan{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(79,70,229,.25),0 8px 24px -8px rgba(79,70,229,.55);}
.btn-primary:hover,.btn-cyan:hover{background:var(--accent-ink);color:#fff;}
.btn-ghost,.btn-ghost-dark{background:#fff;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover,.btn-ghost-dark:hover{border-color:#d7d9e0;color:var(--ink);}
.btn-lg{padding:16px 28px;font-size:16px;}

/* Hero (light) */
.hero{background:var(--bg);}
.hero-in{max-width:var(--maxw);margin:0 auto;padding:84px 28px 72px;display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:54px;line-height:1.05;letter-spacing:-.035em;margin:0 0 20px;font-weight:600;color:var(--ink);}
.hero h1 .hl{color:var(--accent);background:none;-webkit-text-fill-color:var(--accent);}
.hero p.sub{font-size:19px;color:var(--body);margin:0 0 28px;max-width:540px;line-height:1.6;}
.hero .trust{margin-top:22px;font-size:14px;color:var(--muted);display:flex;gap:22px;flex-wrap:wrap;}
.hero .trust span{position:relative;}
.hero .trust span+span::before{content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;border-radius:50%;background:#cfd3db;transform:translateY(-50%);}
.hero .trust b{color:var(--ink);font-weight:600;}
.hero-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;padding:30px;}
.hero-card h3{font-family:'Space Grotesk',sans-serif;margin:0 0 18px;font-size:16px;color:var(--ink);font-weight:600;}
.hero-card .step{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;color:var(--body);font-size:15px;}
.hero-card .step .n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff;}
@media(max-width:880px){.hero-in{grid-template-columns:1fr;gap:40px;padding-top:52px;}.hero h1{font-size:40px;}}

/* Sections */
.section{max-width:var(--maxw);margin:0 auto;padding:80px 28px;}
.section.tight{max-width:760px;}
.section h2{font-family:'Space Grotesk',sans-serif;font-size:34px;letter-spacing:-.025em;margin:0 0 12px;text-align:center;font-weight:600;color:var(--ink);}
.section .lead-c{text-align:center;color:var(--body);max-width:620px;margin:0 auto 44px;font-size:18px;}
.eyebrow{text-align:center;color:var(--accent);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:13px;margin-bottom:12px;}
.soft{background:var(--bg-soft);}

.grid{display:grid;gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:820px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:border-color .15s ease,box-shadow .2s ease,transform .15s ease;}
.card:hover{border-color:#e0e2e8;box-shadow:0 18px 40px -24px rgba(10,14,23,.25);transform:translateY(-3px);}
.card h3{font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 10px;font-weight:600;letter-spacing:-.01em;}
.card p{margin:0;color:var(--body);font-size:15.5px;}
.card a.more{display:inline-block;margin-top:16px;font-weight:550;font-size:14.5px;color:var(--accent);}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:880px;margin:0 auto;}
.stat{text-align:center;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;}
.stat .big{font-family:'Space Grotesk',sans-serif;font-size:38px;font-weight:600;letter-spacing:-.02em;color:var(--accent);}
.stat .lbl{color:var(--muted);font-size:14px;margin-top:4px;}
@media(max-width:620px){.stats{grid-template-columns:1fr;gap:14px;}}

/* Article */
.article{max-width:720px;margin:0 auto;padding:64px 28px;}
.article h1{font-family:'Space Grotesk',sans-serif;font-size:44px;line-height:1.1;letter-spacing:-.03em;margin:0 0 16px;font-weight:600;}
.article .meta{display:flex;gap:10px;font-size:14px;color:var(--muted);margin-bottom:36px;}
.article .meta span+span::before{content:"·";margin-right:10px;color:#cfd3db;}
.article > p:first-of-type,.article .standfirst{font-size:20px;color:var(--ink);line-height:1.55;}
.article h2{font-family:'Space Grotesk',sans-serif;font-size:28px;margin:52px 0 14px;letter-spacing:-.02em;font-weight:600;}
.article h3{font-family:'Space Grotesk',sans-serif;font-size:20px;margin:32px 0 8px;font-weight:600;}
.article p,.article li{font-size:17px;color:var(--body);}
.article ul,.article ol{padding-left:22px;}
.article li{margin-bottom:9px;}
.callout{background:var(--accent-soft);border:1px solid #dfe0ff;padding:20px 24px;margin:28px 0;border-radius:14px;}
.callout strong{color:var(--accent-ink);}
.note{background:var(--bg-soft);border:1px solid var(--line);padding:18px 22px;margin:24px 0;border-radius:14px;font-size:16px;}
table.cost{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px;}
table.cost th,table.cost td{border-bottom:1px solid var(--line);padding:13px 14px;text-align:left;}
table.cost th{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--ink);background:var(--bg-soft);}

/* CTA band */
.cta-band{background:var(--ink);color:#fff;border-radius:24px;padding:60px 32px;text-align:center;margin:64px auto;max-width:880px;}
.cta-band h2{font-family:'Space Grotesk',sans-serif;font-size:30px;margin:0 0 12px;color:#fff;letter-spacing:-.025em;font-weight:600;}
.cta-band p{font-size:18px;color:#aeb4c0;margin:0 auto 26px;max-width:520px;}
.cta-band .btn-cyan,.cta-band .btn-primary{background:var(--accent);}
.cta-band small{display:block;margin-top:16px;color:#7e8593;font-size:13px;}

/* FAQ */
.faq{max-width:740px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);padding:6px 4px;background:transparent;}
.faq summary{cursor:pointer;font-weight:600;font-family:'Space Grotesk',sans-serif;font-size:17px;padding:20px 0;list-style:none;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';float:right;color:var(--muted);font-size:22px;line-height:1;font-weight:400;}
.faq details[open] summary::after{content:'–';}
.faq details p{margin:0 0 20px;color:var(--body);font-size:16px;}

/* Footer */
.footer{background:var(--bg-soft);border-top:1px solid var(--line);color:var(--body);padding:60px 28px 40px;margin-top:80px;}
.footer-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;}
.footer h4{color:var(--ink);font-family:'Space Grotesk',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 14px;font-weight:600;}
.footer a{color:var(--body);display:block;font-size:14.5px;margin-bottom:10px;}
.footer a:hover{color:var(--ink);}
.footer .brand{color:var(--ink);margin-bottom:14px;}
.footer .legal{max-width:var(--maxw);margin:40px auto 0;border-top:1px solid var(--line);padding-top:24px;font-size:13.5px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media(max-width:820px){.footer-in{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-in{grid-template-columns:1fr;}}