/* RoofEstimator.ai platform — palette from Anthony's mockups: blue primary, ink text, green price,
   white cards on #f6f8fb, 1px #e2e8f0 borders, 12px radius, Inter. Orange only for "quote" accent. */
:root{--blue:#1d4ed8;--blue-d:#1e40af;--blue-l:#eef3ff;--ink:#0f172a;--mut:#475569;--mut2:#94a3b8;--line:#e2e8f0;--bg:#f6f8fb;--card:#fff;--green:#15803d;--green-l:#ecfdf5;--amber:#d97706;--amber-l:#fffbeb;--purple:#6d28d9;--purple-l:#f5f3ff;--orange:#ea580c;--r:12px;--sh:0 1px 2px rgba(15,23,42,.06),0 4px 14px rgba(15,23,42,.05)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%}button,input,select,textarea{font:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
h1{font-size:clamp(28px,3.4vw,40px);line-height:1.12;margin:0 0 12px;font-weight:800;letter-spacing:-.02em}
h2{font-size:22px;margin:0 0 8px;font-weight:700;letter-spacing:-.01em}h3{font-size:16px;margin:0 0 6px;font-weight:700}
p{margin:0 0 10px}.mut{color:var(--mut)}.small{font-size:13px}.tiny{font-size:12px;color:var(--mut2)}
.eyebrow{color:var(--blue);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--blue);background:var(--blue);color:#fff;border-radius:10px;padding:12px 20px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--blue-d);text-decoration:none}.btn.sm{padding:8px 14px;font-size:14px}.btn.lg{padding:15px 26px;font-size:17px}
.btn.ghost{background:#fff;color:var(--blue)}.btn.ghost:hover{background:var(--blue-l)}
.btn.quiet{background:#fff;color:var(--ink);border-color:var(--line)}.btn.quiet:hover{background:#f8fafc}
.btn.green{background:var(--green);border-color:var(--green)}.btn:disabled{opacity:.55;cursor:default}
.btn.block{width:100%}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh)}
.card+.card{margin-top:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.grow{flex:1}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.grid3,.grid4,.grid6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.grid2,.grid3,.grid4,.grid6{grid-template-columns:1fr}}

/* header */
.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.top-in{display:flex;align-items:center;gap:22px;height:66px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}.brand img{height:34px;width:auto}.brand .tag{font-size:12px;color:var(--mut);font-weight:500}
.nav{display:flex;gap:20px;margin-left:auto}.nav a{color:var(--ink);font-weight:600;font-size:14px}
.top-actions{display:flex;gap:10px;align-items:center}
.dot{width:9px;height:9px;border-radius:50%;background:var(--amber);display:inline-block}.dot.saved{background:var(--green)}
.show-mobile{display:none}
@media(max-width:1000px){.nav,.brand .tag{display:none}.top-actions{margin-left:auto}.show-mobile{display:inline-flex}}

/* step bar */
.stepbar{background:#fff;border-bottom:1px solid var(--line)}
.stepbar .wrap{display:flex;gap:0;overflow-x:auto}
.step{display:flex;align-items:center;gap:10px;padding:14px 18px 12px;border-bottom:3px solid transparent;color:var(--mut);font-size:13px;white-space:nowrap}
.step b{display:inline-flex;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);align-items:center;justify-content:center;font-size:12px;color:var(--mut)}
.step.done b{background:var(--green-l);border-color:var(--green);color:var(--green)}.step.cur{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}.step.cur b{background:var(--blue);border-color:var(--blue);color:#fff}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;padding-top:22px;padding-bottom:40px;align-items:start}
.side{position:sticky;top:84px}
@media(max-width:1000px){.layout{grid-template-columns:1fr}.side{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:40;display:none;padding:20px;overflow:auto}.side.open{display:block}.side .advisor{max-width:520px;margin:0 auto}#profilePanel{display:none}}

/* advisor */
.advisor{padding:16px;display:flex;flex-direction:column;gap:12px}
.adv-head{display:flex;gap:10px;align-items:center}.adv-avatar{width:40px;height:40px;border-radius:12px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.online{font-size:12px;color:var(--green)}.online i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:4px}
.x{margin-left:auto;background:none;border:0;font-size:24px;cursor:pointer;color:var(--mut)}
.adv-msgs{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;padding-right:2px}
.m{padding:10px 12px;border-radius:10px;font-size:14px;line-height:1.45;white-space:pre-wrap}
.m.a{background:var(--blue-l);color:var(--ink)}.m.u{background:#f1f5f9;align-self:flex-end;max-width:90%}.m.t{color:var(--mut2);font-style:italic}
.adv-quick{display:flex;flex-direction:column;gap:6px}
.adv-quick button{text-align:left;background:#fff;border:1px solid #c7d7ff;color:var(--blue);border-radius:9px;padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between}.adv-quick button:hover{background:var(--blue-l)}
.adv-form{display:flex;gap:8px}.adv-form input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.privacy{background:var(--blue-l);border-radius:10px;padding:12px;font-size:13px;color:var(--mut)}.privacy b{color:var(--ink);display:block}

/* profile panel */
.pp h3{display:flex;justify-content:space-between;align-items:center}.pp .badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--blue-l);color:var(--blue)}
.pp .addr{font-weight:600}.pp img{border-radius:10px;width:100%;height:150px;object-fit:cover;margin:10px 0}
.kv{display:flex;gap:10px;font-size:13px;padding:6px 0;border-bottom:1px solid #f1f5f9}.kv span:first-child{color:var(--mut);min-width:96px}.kv b{font-weight:600}
.check{list-style:none;padding:0;margin:8px 0;font-size:13px}.check li{padding:3px 0;color:var(--mut)}.check li.on{color:var(--ink)}.check li::before{content:"○ ";color:var(--mut2)}.check li.on::before{content:"✓ ";color:var(--green);font-weight:700}
.conf{margin-top:8px}.conf .lvl{font-weight:700;font-size:15px}.conf .lvl.Preliminary{color:var(--blue)}.conf .lvl.Fair{color:var(--amber)}.conf .lvl.Good,.conf .lvl.Strong{color:var(--green)}
.bars{display:flex;gap:4px;margin:6px 0}.bars i{flex:1;height:6px;border-radius:3px;background:#e2e8f0}.bars i.on{background:var(--blue)}.bars.g i.on{background:var(--green)}
.price{color:var(--green);font-weight:800;font-size:26px;letter-spacing:-.02em}.price.lg{font-size:40px}
.mo{font-weight:700;font-size:18px}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.hero h1 .b{color:var(--blue)}
.addr-form{display:flex;gap:8px;margin:16px 0 14px;position:relative}
.addr-form input{flex:1;min-width:0;border:1px solid #cbd5e1;border-radius:10px;padding:14px 14px 14px 40px;font-size:16px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M12 22s7-7.1 7-12a7 7 0 1 0-14 0c0 4.9 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") 12px center no-repeat}
.sugg{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);z-index:20;overflow:hidden}
.sugg div{padding:10px 14px;cursor:pointer;font-size:14px}.sugg div:hover,.sugg div.sel{background:var(--blue-l)}
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px}.promises div{font-size:13px}.promises b{display:block;color:var(--ink)}
.hero-img{position:relative}.hero-img img{border-radius:14px;width:100%;height:340px;object-fit:cover}
.est-float{position:absolute;left:18px;bottom:-18px;background:#fff;border-radius:12px;padding:14px 16px;box-shadow:var(--sh);border:1px solid var(--line)}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid}
.pill.g{color:var(--green);border-color:#a7f3d0;background:var(--green-l)}.pill.b{color:var(--blue);border-color:#c7d7ff;background:var(--blue-l)}.pill.a{color:var(--amber);border-color:#fde68a;background:var(--amber-l)}.pill.p{color:var(--purple);border-color:#ddd6fe;background:var(--purple-l)}
.hand{font-family:"Segoe Script","Bradley Hand",cursive;color:var(--blue);font-size:15px;margin-top:8px}
.qcards .card{text-align:center;padding:22px 14px;display:flex;flex-direction:column;align-items:center}.qcards .card p{flex:1}.qcards .btn{white-space:normal;text-align:center}.qcards .ic{font-size:26px;margin-bottom:6px}
.steps6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.steps6 div{font-size:13px}.steps6 b.n{display:inline-flex;width:26px;height:26px;border-radius:50%;color:#fff;align-items:center;justify-content:center;font-size:12px;margin-bottom:6px}
@media(max-width:900px){.steps6{grid-template-columns:repeat(2,1fr)}}
.feature img,.feature .fake{border-radius:8px;height:110px;object-fit:cover;width:100%;background:#eef2f7}
.banner{display:flex;gap:12px;align-items:center;background:var(--green-l);border:1px solid #a7f3d0;border-radius:10px;padding:12px 14px;margin-bottom:16px}.banner .ok{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.banner.info{background:var(--blue-l);border-color:#c7d7ff}.banner.info .ok{background:var(--blue)}
.banner.warn{background:var(--amber-l);border-color:#fde68a}.banner.warn .ok{background:var(--amber)}
.aerial{border-radius:12px;overflow:hidden;position:relative;background:#e2e8f0;min-height:260px}.aerial img{display:block;width:100%;height:100%;object-fit:cover}
.aerial .lbl{position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.95);padding:6px 10px;border-radius:8px;font-size:12px;font-weight:600}
.sv{border:1px solid var(--line);border-radius:12px;padding:14px}.sv img{border-radius:8px;width:100%;height:210px;object-fit:cover;background:#e2e8f0}
.drop{border:2px dashed #cbd5e1;border-radius:10px;padding:24px;text-align:center;color:var(--mut);cursor:pointer;background:#fafbfd}.drop:hover{border-color:var(--blue)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.facts div{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px}.facts b{display:block;font-size:14px}
@media(max-width:600px){.facts{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid #cbd5e1;background:#fff;border-radius:10px;padding:10px 14px;font-size:14px;cursor:pointer;font-weight:500}
.chip:hover{border-color:var(--blue)}.chip.on{border-color:var(--blue);background:var(--blue-l);color:var(--blue);font-weight:600;box-shadow:inset 0 0 0 1px var(--blue)}
.q{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}.q h3{margin-bottom:10px}.q .hint{font-size:12px;color:var(--mut2);margin-top:8px}
.know{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.know div{font-size:13px;padding:8px 0}.know span{color:var(--mut);display:block;font-size:12px}.know b{font-weight:600}
@media(max-width:800px){.know{grid-template-columns:repeat(2,1fr)}}
.next{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.next .card{padding:16px}.next .card:hover{border-color:var(--blue)}
@media(max-width:900px){.next{grid-template-columns:repeat(2,minmax(0,1fr))}}
.save-box{background:var(--blue-l);border:1px solid #c7d7ff;border-radius:12px;padding:16px;margin-top:16px}.save-box form{display:flex;gap:8px;margin:10px 0 6px}.save-box input{flex:1;border:1px solid #cbd5e1;border-radius:10px;padding:11px 12px}
.sys{border:1px solid var(--line);border-radius:14px;padding:18px;position:relative;display:flex;flex-direction:column}.sys.rec{border:2px solid var(--blue);box-shadow:0 8px 24px rgba(29,78,216,.12)}
.sys .ribbon{max-width:calc(100% - 20px);text-align:center;position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px;white-space:nowrap}
.sys ul{padding-left:0;list-style:none;margin:10px 0;font-size:13px}.sys li{padding:3px 0}.sys li::before{content:"✓ ";color:var(--green);font-weight:700}
.sys .why{background:var(--blue-l);border-radius:10px;padding:10px 12px;font-size:13px;margin:8px 0}.sys .why li::before{content:"• ";color:var(--blue)}
.sys .pr{margin-top:auto;padding-top:10px}.sys .pr .price{font-size:22px;white-space:normal}.sys .btn{white-space:normal}.sys .why:empty,.sys .why.empty{display:none}
.sys.v .pr{background:var(--green-l);border-radius:10px;padding:12px}.sys.e .pr{background:var(--blue-l);border-radius:10px;padding:12px}.sys.p .pr{background:var(--purple-l);border-radius:10px;padding:12px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.tabs button{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 12px;font-size:13px;cursor:pointer}.tabs button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.opt{border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;display:flex;gap:12px;align-items:flex-start}.opt:hover{border-color:var(--blue)}.opt.on{border-color:var(--blue);background:var(--blue-l)}.opt .d{margin-left:auto;font-weight:700;white-space:nowrap}
.sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.sw div{cursor:pointer;text-align:center;font-size:12px}.sw i{display:block;height:46px;border-radius:8px;border:3px solid transparent}.sw div.on i{border-color:var(--blue)}
.review dl{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:14px;margin:0}.review dt{color:var(--mut)}.review dd{margin:0;font-weight:600}
.fin{display:flex;gap:8px;margin:8px 0}.fin button{flex:1;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px;cursor:pointer}.fin button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.docs li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
.choices .card{cursor:pointer}.choices .card:hover{border-color:var(--blue)}
label.f{display:block;font-size:13px;font-weight:600;margin:10px 0 4px}input.f,select.f,textarea.f{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:11px 12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;z-index:60;box-shadow:var(--sh)}
.foot{background:#0b1a33;color:#c7d2e6;margin-top:30px;padding:34px 0 22px}.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px;font-size:13px}.foot a{display:block;color:#c7d2e6;margin-top:6px}.foot b{color:#fff;display:block;margin-bottom:6px}.foot-logo{height:28px;filter:brightness(0) invert(1);margin-bottom:8px}.copy{font-size:11px;color:#8ea3c4;margin-top:22px}
@media(max-width:800px){.foot-in{grid-template-columns:1fr 1fr}}
.spin{display:inline-block;width:16px;height:16px;border:2px solid #c7d7ff;border-top-color:var(--blue);border-radius:50%;animation:s .8s linear infinite;vertical-align:middle}@keyframes s{to{transform:rotate(360deg)}}
.hidden{display:none!important}

/* mobile: the hero column must never be wider than the phone. The address form and the three
   promises were forcing min-content width past 375px and clipping the headline. */
@media(max-width:600px){
  .addr-form{flex-wrap:wrap}.addr-form input,.addr-form .btn{flex:1 1 100%}
  .promises{grid-template-columns:1fr;gap:8px}
  .hero-img img{height:230px}.est-float{left:10px;right:10px;bottom:-14px;padding:10px 12px}.price{font-size:22px}.price.lg{font-size:30px}
  h1{font-size:26px}.wrap{padding:0 14px}.card{padding:16px}
  .steps6{grid-template-columns:1fr}.facts{grid-template-columns:1fr}.know{grid-template-columns:1fr}.next{grid-template-columns:1fr}.sw{grid-template-columns:repeat(2,1fr)}
  .review dl{grid-template-columns:110px 1fr}.tabs{gap:4px}.tabs button{padding:6px 9px;font-size:12px}
  .foot-in{grid-template-columns:1fr}
}

/* configurator: main + sticky summary; stacks on mobile */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;align-items:start}
.cfg .sum{position:sticky;top:90px}
@media(max-width:900px){.cfg{grid-template-columns:1fr}.cfg .sum{position:static}}

/* brand: Concept C mark + Sora wordmark (Terry's pick, Sep 1) */
.brand{gap:9px}.brand svg{width:34px;height:34px;flex:none}
.wordmark{font-family:Sora,Inter,system-ui,sans-serif;font-weight:800;font-size:21px;letter-spacing:-.035em;color:var(--ink);line-height:1}
.wordmark i{font-style:normal;color:var(--blue);font-weight:700}
.foot .wordmark{color:#fff}.foot .wordmark i{color:#8fb0ff}
a:focus:not(:focus-visible){outline:none}a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* mobile profile strip: the sidebar is hidden under 1000px, this is what replaces it */
.mprof{display:none}
@media(max-width:1000px){
  .mprof{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:14px}
  .mprof summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
  .mprof summary::-webkit-details-marker{display:none}
  .mprof summary .price{font-size:18px}.mprof .body{padding-top:10px;border-top:1px solid #f1f5f9;margin-top:8px}
  .mprof .kv span:first-child{min-width:110px}
}
.nextstep{display:block;margin-top:2px}
.cmp{width:100%;border-collapse:collapse;font-size:11px}.cmp td,.cmp th{padding:4px 6px;border-bottom:1px solid #eef2f7;text-align:left}.cmp th{color:var(--mut);font-weight:600}.cmp .ok{color:var(--green)}.cmp .no{color:var(--mut2)}
/* phone header: mark + two buttons fits 375px; the wordmark does not, so it yields to the mark */
@media(max-width:600px){
  .top-in{gap:10px;height:58px}.brand svg{width:30px;height:30px}.wordmark{display:none}
  .top-actions{gap:6px}.top-actions .btn{padding:8px 10px;font-size:13px}
}

/* video block (Anthony's mockup: dark frame, title over the poster, play button) */
.vframe{position:relative;border-radius:14px;overflow:hidden;background:#0b1628;aspect-ratio:16/9;min-height:200px}
.vframe img,.vframe video,.vframe iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.vframe img{opacity:.55}
.vovl{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.vtitle{color:#fff;font-weight:800;font-size:22px;line-height:1.15;letter-spacing:-.01em}.vtitle span{color:#8fb0ff}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:22px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.play:hover{transform:translate(-50%,-50%) scale(1.06)}
.vbar{color:#c7d2e6;font-family:ui-monospace,Menlo,monospace;font-size:12px}
.benefits{gap:12px 18px;margin-top:10px}.benefits b{display:block;font-size:14px}
.promo{margin-top:16px;padding:16px}.promo b{font-size:15px;line-height:1.3;display:block}
@media(max-width:1000px){.promo{display:none}}