:root{
  --navy:#0f172a;
  --orange:#d93829;
  --orange-soft:#fef2f2;
  --slate:#1e293b;
  --gray:#64748b;
  --border:#e2e8f0;
  --bg:#f8fafc;
  --panel:#f1f5f9;
  --green:#16a34a;
  --error:#d93025;
  --radius:12px;
  --radius-lg:20px;
  --shadow:0 4px 24px rgba(16,30,54,.08);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--navy);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

#progress-track{height:4px;background:#E4E8EE;overflow:hidden;transition:height .2s ease,opacity .2s ease}
#progress-bar{height:100%;width:0;background:var(--orange);transition:width .32s cubic-bezier(.4,0,.2,1)}
#progress-track.is-hidden{height:0;opacity:0}

.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:56px 20px 0}
.card{width:100%;max-width:620px;background:#fff;border-radius:var(--radius-lg);padding:48px 40px;box-shadow:var(--shadow)}

.step{display:none}
.step.active{display:block;animation:stepIn .2s ease-out}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.step-icon{display:flex;justify-content:center;margin-bottom:22px}
.step-icon svg{width:56px;height:56px;stroke:var(--orange);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.step-icon.is-success svg{stroke:var(--green)}

h1{font-size:clamp(27px,5vw,38px);font-weight:800;line-height:1.18;letter-spacing:-.02em;text-align:center;margin:0 0 28px}
h1:focus{outline:none}
.subhead{text-align:center;color:var(--gray);margin:-18px 0 26px;font-size:17px}

/* ---- options ---- */
.options{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.options[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.options[data-cols="5"]{grid-template-columns:repeat(5,1fr)}
.options[data-cols="1"]{grid-template-columns:1fr}
.options.spread{grid-template-columns:repeat(2,1fr);gap:16px}

.opt{
  font-family:inherit;font-size:16px;font-weight:600;color:var(--navy);background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);padding:20px 12px;cursor:pointer;
  text-align:center;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;
}
.opt:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 4px 12px rgba(217,56,41,.14)}
.opt[aria-checked="true"]{border:2px solid var(--orange);background:var(--orange-soft)}
.opt:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.options[data-cols="5"] .opt{padding:16px 6px}
.options[data-cols="3"].compact .opt{padding:16px 8px;font-size:15px}

/* ---- logo tiles ---- */
.options.logos{grid-template-columns:repeat(3,1fr)}
.opt.tile{min-height:142px;display:flex;align-items:center;justify-content:center;padding:18px}
.logo-slot{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:66px}
.logo-slot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:0;transition:opacity .22s ease}
.logo-slot img.ready{opacity:1}
.logo-slot.loading::after{
  content:"";position:absolute;inset:6px;border-radius:8px;
  background:linear-gradient(90deg,#F1F3F6 25%,#E7EAEF 37%,#F1F3F6 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.wordmark{font-weight:700;font-size:15px;color:var(--navy);letter-spacing:-.01em;text-align:center;line-height:1.3}

/* ---- roof picture cards ---- */
.options.pictures{grid-template-columns:repeat(2,1fr);gap:16px}
.opt.picture{padding:0;overflow:hidden;display:flex;flex-direction:column;text-align:center}
.opt.picture .art{width:100%;aspect-ratio:5/3;background:#EEF2F7;display:block}
.opt.picture .art svg,.opt.picture .art img{width:100%;height:100%;display:block;object-fit:cover}
.opt.picture .cap{padding:14px 10px;font-size:15.5px;font-weight:600}

/* ---- inputs ---- */
.field{margin-bottom:16px}
.field .lbl{display:block;font-size:14.5px;font-weight:600;color:var(--navy);margin:0 0 7px 2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

input[type="text"],input[type="email"],input[type="tel"]{
  font-family:inherit;font-size:17px;color:var(--navy);width:100%;padding:19px 18px;
  border:1px solid var(--border);border-radius:var(--radius);background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
input::placeholder{color:#9AA1AC}
input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(217,56,41,.12)}
input:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
input.invalid{border-color:var(--error);background:#FEF6F5}
#zip{text-align:center;font-size:20px;letter-spacing:.04em}

.helper{font-size:13px;color:var(--gray);margin:8px 2px 0}

.date-row{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:12px}
.date-row input{text-align:center;letter-spacing:.06em}

.field-error{color:var(--error);font-size:14px;font-weight:500;margin-top:8px}
.field-error:empty{display:none}
.form-error{text-align:center}

/* ---- buttons ---- */
.btn{
  font-family:inherit;font-size:18px;font-weight:700;color:#fff;background:var(--navy);border:none;
  border-radius:var(--radius);padding:19px 24px;width:100%;cursor:pointer;transition:background .15s,transform .12s;
}
.btn:hover:not(:disabled){background:var(--slate);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.btn:disabled{background:#C9CED6;cursor:not-allowed;transform:none}
.btn.loading{position:relative;color:transparent}
.btn.loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;
  border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.nav-row{display:flex;align-items:center;gap:16px;margin-top:22px}
.nav-row .btn{flex:1}
.back{
  display:block;margin:22px auto 0;background:none;border:none;font-family:inherit;font-size:16px;
  color:var(--gray);cursor:pointer;padding:8px 12px;border-radius:8px;
}
.back:hover{color:var(--navy)}
.back:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.nav-row .back{margin:0;flex:0 0 auto}

/* ---- tooltip ---- */
.tip-wrap{position:relative;display:inline-block;vertical-align:middle;margin-left:8px}
.tip-btn{
  width:26px;height:26px;border-radius:50%;border:1.6px solid var(--gray);background:#fff;color:var(--gray);
  font-family:inherit;font-size:15px;font-weight:600;line-height:1;cursor:pointer;padding:0;
}
.tip-btn:hover{border-color:var(--orange);color:var(--orange)}
.tip-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.tip-bubble{
  position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);background:var(--navy);color:#fff;
  font-size:14px;font-weight:400;line-height:1.45;text-align:left;padding:12px 14px;border-radius:8px;
  width:max-content;max-width:260px;box-shadow:0 6px 20px rgba(16,30,54,.22);z-index:20;
  opacity:0;visibility:hidden;transition:opacity .15s;
}
.tip-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--navy)}
.tip-bubble.below{bottom:auto;top:calc(100% + 12px)}
.tip-bubble.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--navy)}
.tip-wrap.open .tip-bubble{opacity:1;visibility:visible}

/* ---- info panel ---- */
.info{display:flex;gap:12px;background:var(--panel);border-left:3px solid var(--border);border-radius:8px;padding:16px 18px;margin-top:24px}
.info svg{flex:0 0 auto;width:20px;height:20px;stroke:var(--gray);fill:none;stroke-width:2;margin-top:2px}
.info b{display:block;font-size:15px;font-weight:600;margin-bottom:2px}
.info span{font-size:15px;font-style:italic;color:var(--gray)}

/* ---- consent ---- */
.consent{display:flex;gap:14px;border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin:20px 0 4px;cursor:pointer}
.consent.invalid{border-color:var(--error);background:#FEF6F5}
.consent input{flex:0 0 auto;width:20px;height:20px;margin-top:2px;accent-color:var(--orange);cursor:pointer}
.consent span{font-size:14.5px;line-height:1.55;color:var(--navy)}
.secure{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gray);font-size:15px;margin-top:18px}
.secure svg{width:16px;height:16px;stroke:var(--gray);fill:none;stroke-width:2}
.legal{text-align:center;font-size:13px;color:var(--gray);margin-top:10px}
.legal a{color:var(--orange);text-decoration:none}
.legal a:hover{text-decoration:underline}

/* ---- address autocomplete ---- */
.ac-wrap{position:relative}
.ac-list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);z-index:30;overflow:hidden;display:none;
}
.ac-list.open{display:block}
.ac-item{padding:14px 18px;font-size:15px;cursor:pointer;border-bottom:1px solid #EEF1F5}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.hi{background:var(--orange-soft)}

/* ---- thank you ---- */
.banner{background:var(--orange);color:#fff;border-radius:var(--radius);padding:28px 24px;text-align:center;margin-bottom:28px}
.banner strong{display:block;font-size:26px;font-weight:800;margin-bottom:12px}
.banner p{margin:0 0 12px;font-size:17px;line-height:1.45}
.banner em{font-style:normal;font-weight:700;font-size:15px}
.call{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;font-size:22px;font-weight:700;text-decoration:none;padding:18px 34px;border-radius:var(--radius)}
.call:hover{background:var(--slate)}
.call svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.center{text-align:center}
.lede{color:var(--gray);font-size:16.5px;line-height:1.6;margin:26px 0}
.next-panel{background:var(--panel);border-radius:var(--radius);padding:24px}
.next-panel h2{font-size:19px;font-weight:700;text-align:center;margin:0 0 16px}
.next-panel ul{list-style:none;margin:0;padding:0}
.next-panel li{display:flex;gap:12px;align-items:flex-start;padding:7px 0;font-size:15.5px}
.next-panel li svg{flex:0 0 auto;width:19px;height:19px;stroke:var(--green);fill:none;stroke-width:2.2;margin-top:3px}

.footer-disclosure{max-width:900px;margin:0 auto;padding-top:28px;color:#94a3b8;font-size:12.5px;line-height:1.65}
.footer-disclosure p{margin:0 0 14px}

/* ---- responsive ---- */
@media (max-width:900px){ .options[data-cols="5"]{grid-template-columns:repeat(4,1fr)} }
@media (max-width:640px){
  .page{padding:28px 16px 0}
  .card{padding:30px 20px;border-radius:16px}
  h1{margin-bottom:22px}
  .options[data-cols="5"]{grid-template-columns:repeat(3,1fr)}
  .opt{padding:17px 10px;font-size:15px}
  .banner strong{font-size:22px}
  .call{font-size:19px;padding:16px 26px}
}
@media (max-width:480px){
  .options.logos{grid-template-columns:repeat(2,1fr)}
  .opt.tile{min-height:106px}
}
@media (max-width:420px){
  .options[data-cols="3"]{grid-template-columns:repeat(2,1fr)}
  .options.pictures{grid-template-columns:1fr}
  .date-row{grid-template-columns:1fr 1fr 1.4fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .opt:hover{transform:none}
}

.qr-legal {
    padding: 10vw 15vw;
}
@media (max-width: 600px){
    .qr-legal {
        padding: 15vw;
    }
}