/* RX Roofing Free Roof Estimate test site. Phone first. Tokens from the RX design system. */
:root{--black:#111111;--red:#BE1E2E;--red-deep:#8E1622;--signal:#E0313C;--char:#3A3A3C;--steel:#A6A6A6;--cloud:#F2F2F2;--line:#E2E2E2;--line-dark:#2C2C2E;--gold:#FFC629;--display:'Bebas Neue',Impact,sans-serif;--sans:Montserrat,Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--black);font:500 16px/1.5 var(--sans);overflow-wrap:anywhere}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:.98;letter-spacing:.01em}
p{margin:0}
a{color:inherit}
.test-bar{background:#FFC629;color:#111;font:700 12px/1.3 var(--sans);text-align:center;padding:6px 10px}
.btn{display:block;width:100%;min-height:54px;text-align:center;text-decoration:none;background:var(--red);color:#fff;font:800 17px/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:18px 16px;border:0;border-radius:14px;box-shadow:0 4px 0 var(--red-deep);cursor:pointer}
.btn:hover{background:var(--red-deep)}
.btn[disabled]{background:#6b6b6d;box-shadow:none;cursor:default}
.btn.dark{background:var(--black);box-shadow:0 4px 0 #000}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.stars{display:flex;gap:3px}
.stars svg{width:22px;height:22px;display:block}
.fine{font:500 12px/1.45 var(--sans);color:#5A5A5C}
/* landing */
.lp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 5%}
.lp-top img{width:150px}
.lp-phone{font:400 28px/1 var(--display);letter-spacing:.03em;text-decoration:none;white-space:nowrap}
section{padding:48px 5%}
.wrap{max-width:1160px;margin:0 auto}
.dark{background:var(--black);color:#fff}
.cloud{background:var(--cloud)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:36px;align-items:center}
.stack{display:flex;flex-direction:column;gap:16px}
.eyebrow{font:800 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.lp-h1{font-size:clamp(50px,13vw,86px);line-height:.94}
.lp-h2{font-size:clamp(40px,8vw,58px)}
.lead{font-size:clamp(17px,2.4vw,20px);color:#E6E6E6}
.sub{font-size:18px;color:var(--char)}
.cta-wrap{max-width:420px;width:100%}
.hero-img{position:relative}
.hero-img img{width:100%;height:clamp(280px,50vw,420px);object-fit:cover}
.sample{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;color:var(--black);padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.sample b{display:block;font:400 clamp(28px,7vw,36px)/1 var(--display);margin-top:4px}
.sample small{font:800 11px/1.1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.sample span{font:700 13px/1.3 var(--sans);text-align:right;flex:none}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:14px;margin-top:24px}
.step{background:#fff;border-top:5px solid var(--red);padding:18px 20px}
.step i{display:block;font:400 48px/1 var(--display);color:var(--red)}
.step h3{font-size:30px;margin:4px 0 6px}
.step p{font-size:15px;color:var(--char)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font:600 17px/1.4 var(--sans)}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks svg{flex:none;width:20px;height:20px;margin-top:2px}
.docs{background:var(--black);padding:24px;display:flex;justify-content:center;gap:14px}
.doc{flex:1 1 0;min-width:0;max-width:230px;aspect-ratio:230/298;background:#fff;color:var(--black);display:flex;flex-direction:column;overflow:hidden}
.doc-top{background:var(--black);padding:8px 10px}
.doc-top img{width:70%}
.doc-in{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.doc-t{font:400 clamp(14px,4vw,19px)/1 var(--display)}
.doc-p{font:400 clamp(18px,5vw,26px)/1 var(--display);color:var(--red)}
.doc img.ph{width:100%;height:28%;object-fit:cover}
.bar{height:5px;background:var(--line)}
.rate{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.rate-n{display:flex;align-items:flex-end;gap:14px}
.rate-n b{font:400 90px/.85 var(--display)}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px;margin-top:24px}
figure{margin:0}
.rev{background:#fff;color:var(--black);padding:22px;display:flex;flex-direction:column;gap:12px}
.rev blockquote{margin:0;font:600 16px/1.5 var(--sans)}
.rev figcaption{font:800 14px/1 var(--sans)}
.faq{max-width:860px;margin:0 auto}
.faq>div{padding:18px 0;border-top:1px solid #D0D0D0}
.faq h3{font:800 18px/1.3 var(--sans);letter-spacing:0}
.faq p{margin-top:6px;color:var(--char)}
.closing{background:var(--red);color:#fff;text-align:center}
.closing .stack{align-items:center;max-width:760px;margin:0 auto}
.closing a.ph{color:#fff;text-decoration:none;font:400 32px/1 var(--display);letter-spacing:.03em}
.credit{font:500 12px/1.4 var(--sans);color:#5A5A5C;padding:14px 5%;text-align:center}
/* funnel */
.f-head{position:sticky;top:0;z-index:5;background:var(--black);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.f-head img{width:112px}
.f-head a{color:#fff;font:400 22px/1 var(--display);letter-spacing:.03em;text-decoration:none;white-space:nowrap;padding:8px 0}
.progress{height:6px;background:var(--line)}
.progress div{height:6px;background:var(--red);transition:width .25s}
.screen{min-height:calc(100dvh - 64px);background:#fff;color:var(--black)}
.screen.is-dark{background:var(--black);color:#fff}
.screen.is-dark .progress{background:var(--line-dark)}
.body{max-width:520px;margin:0 auto;padding:22px 18px 28px;display:flex;flex-direction:column;gap:16px}
.lab{font:800 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--char)}
.is-dark .lab{color:#D8D8D8}
.q{font-size:clamp(38px,10vw,44px);outline:0}
.txt{color:var(--char)}
.is-dark .txt{color:#E6E6E6}
.is-dark strong{color:#fff}
.is-dark .fine{color:#BDBDBD}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:block;width:100%;text-align:left;background:#fff;color:var(--black);border:2px solid var(--black);padding:15px 16px;font:inherit;cursor:pointer}
.opt:hover{background:var(--cloud)}
.opt b{display:block;font:800 17px/1.25 var(--sans)}
.opt span{display:block;margin-top:3px;font:500 14px/1.4 var(--sans);color:var(--char)}
.rung{padding:12px 14px}
.rung small{display:block;font:800 11px/1.25 var(--sans);letter-spacing:.15em;text-transform:uppercase}
.rung b{display:block;margin-top:5px;font:400 26px/1 var(--display);letter-spacing:.02em}
.rung span{display:block;margin-top:4px;font:500 13px/1.4 var(--sans)}
.rungs{display:flex;flex-direction:column;gap:6px}
.r1{background:var(--black);color:#fff;width:100%}.r2{background:var(--steel);width:92%}.r3{background:var(--cloud);width:84%}
.callout{background:var(--red);color:#fff;padding:14px 16px;font:700 16px/1.4 var(--sans)}
.list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:14px;line-height:1.4;color:var(--char)}
.gaf{width:168px;align-self:center}
.big49{display:flex;align-items:flex-end;gap:14px}
.big49 b{font:400 96px/.85 var(--display)}
label{display:block;font:800 14px/1 var(--sans);margin-bottom:7px}
input{width:100%;font:500 17px var(--sans);padding:14px;border:2px solid var(--black);border-radius:0;background:#fff;color:var(--black);min-height:52px}
.err{color:var(--red);font:700 14px/1.3 var(--sans);margin-top:6px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.map{position:relative;background:var(--char);aspect-ratio:8/5;overflow:hidden}
.map img,.map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.map small{position:absolute;right:4px;bottom:4px;background:rgba(17,17,17,.75);color:#fff;font:500 10px/1.2 var(--sans);padding:3px 5px}
.rows>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.rows span{flex:none;font:600 14px/1.3 var(--sans);color:var(--char)}
.tight .rows>div{padding:5px 0}
.gm{font:400 12px/1.3 Roboto,Arial,sans-serif;color:#5E5E5E}
.gm span{white-space:nowrap}
.is-dark .gm{color:#fff}
.rows b{font:800 14px/1.3 var(--sans);text-align:right}
.note{background:var(--cloud);padding:12px 14px;font:600 14px/1.45 var(--sans)}
.linkbtn{background:none;border:0;padding:8px;font:700 15px/1.3 var(--sans);color:inherit;text-decoration:underline;cursor:pointer;min-height:44px}
.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:2px solid var(--black)}
.tabs button{background:#fff;color:var(--black);border:0;padding:13px 6px;font:800 14px/1.1 var(--sans);cursor:pointer;min-height:46px}
.tabs button[aria-pressed=true]{background:var(--black);color:#fff}
.h-lab{font:800 13px/1 var(--sans)}
.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sw{padding:0;background:#fff;border:3px solid var(--line);cursor:pointer;text-align:left;position:relative;color:var(--black)}
.sw[aria-pressed=true]{border-color:var(--red)}
.sw img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#D0D0D0}
.sw span{display:block;padding:6px 5px;font:700 12px/1.2 var(--sans)}
.pitches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pitch{position:relative;padding:12px 10px;background:#fff;border:3px solid var(--line);color:var(--black);text-align:center;cursor:pointer;font:inherit}
.pitch[aria-pressed=true]{border-color:var(--red)}
.pitch svg{display:block;width:100%;height:auto}
.pitch[aria-pressed=true] .rf{stroke:var(--red)}
.pitch b{display:block;margin-top:6px;font:800 15px/1.2 var(--sans)}
.pitch span{display:block;margin-top:2px;font:500 13px/1.3 var(--sans);color:var(--char)}
.pitch i{position:absolute;left:7px;top:7px;width:24px;height:24px;box-sizing:border-box;border:2px solid var(--black);background:#fff;display:flex;align-items:center;justify-content:center}
.pitch i svg{display:none;width:16px}
.pitch[aria-pressed=true] i{background:var(--red);border-color:var(--red)}
.pitch[aria-pressed=true] i svg{display:block}
.nq{aspect-ratio:160/100;display:flex;align-items:center;justify-content:center;font:400 64px/1 var(--display);color:var(--char)}
.sw i{position:absolute;right:4px;top:4px;width:24px;height:24px;background:var(--red);display:none;align-items:center;justify-content:center}
.sw[aria-pressed=true] i{display:flex}
.house{position:relative;margin-bottom:6px;touch-action:pan-y}
.house .hp{width:100%;aspect-ratio:3/2;object-fit:cover;background:#D0D0D0}
.house .hs{position:absolute;right:10px;bottom:-22px;width:88px;height:88px;object-fit:cover;border:4px solid #fff}
.h-name{padding-right:100px}
.h-name b{display:block;font:400 34px/1 var(--display);letter-spacing:.02em}
.h-name small{display:block;margin-top:3px;font:700 12px/1.2 var(--sans);color:var(--char)}
.h-nav{display:flex;align-items:stretch;gap:10px}
.h-nav .arr{width:54px;flex:none;background:var(--black);border:0;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff}
.h-nav .btn{flex:1;min-width:0;font-size:15px;padding:16px 6px}
.val{padding:12px 0;border-top:1px solid var(--line-dark)}
.val b{display:block;font:800 16px/1.3 var(--sans)}
.val span{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:#D8D8D8}
.callink{display:block;text-align:center;color:#fff;font:400 26px/1 var(--display);letter-spacing:.03em;text-decoration:none;padding:8px}
.card{background:#fff;color:var(--black);padding:18px}
.card small{display:block;font:800 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.card b{display:block;margin-top:8px;font:400 clamp(38px,11vw,46px)/1 var(--display);letter-spacing:.01em}
.card span{display:block;margin-top:6px;font:600 14px/1.4 var(--sans);color:var(--char)}
.box{background:var(--line-dark);padding:14px 16px;font-size:15px;color:#E6E6E6}
.call-big{display:block;text-align:center;text-decoration:none;background:var(--red);color:#fff;font:400 34px/1 var(--display);letter-spacing:.03em;padding:16px;border-radius:14px;box-shadow:0 4px 0 var(--red-deep)}
.spin{display:inline-block;width:16px;height:16px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:s 1s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes s{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}.progress div{transition:none}}
/* pdf */
.pdf-tools{background:var(--black);padding:12px 16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pdf-tools .btn{width:auto;min-width:220px}
.pdf-tools a{color:#fff;align-self:center;font-weight:700}
.sheet{max-width:816px;margin:0 auto;background:#fff}
.pg{padding:24px 28px;display:flex;flex-direction:column;gap:16px}
.pg-head{background:var(--black);color:#fff;padding:20px 28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.pg-head img{width:170px}
.pg-head h1{font-size:34px}
.pg-head small{font:600 13px/1.3 var(--sans)}
.pg-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;align-items:start}
.pg-price{font:400 clamp(44px,10vw,58px)/1 var(--display);color:var(--red);margin-top:6px}
.pg-photo{position:relative}
.pg-photo .p{width:100%;height:232px;object-fit:cover}
.pg-photo .s{position:absolute;right:8px;bottom:8px;width:72px;height:72px;object-fit:cover;border:3px solid #fff}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.pg h2{font-size:30px;margin-bottom:8px}
.pg ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:5px;font-size:14px;line-height:1.35}
.elite{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);padding-top:14px;font:600 13px/1.4 var(--sans);margin-top:14px}
.elite img{width:104px;flex:none}
.pg-cta{background:var(--red);color:#fff;padding:14px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font:700 15px/1.35 var(--sans)}
.pg-cta b{font:400 38px/1 var(--display);letter-spacing:.03em;white-space:nowrap}
.tiny{font:500 10px/1.35 var(--sans);color:#5A5A5C}
.qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px 24px}
.qs>div{display:flex;gap:10px}
.qs i{flex:none;width:26px;font:400 30px/1 var(--display);color:var(--red)}
.qs b{display:block;font:800 14px/1.3 var(--sans)}
.qs span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--char)}
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:480px;font:500 13px/1.3 var(--sans)}
th,td{border:1px solid #BDBDBD;padding:6px 10px;text-align:left;vertical-align:top}
th{font-weight:800}
.take{background:var(--black);color:#fff;padding:14px 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.take h2{margin-bottom:6px}
.take p{font-size:13px;line-height:1.45}
.pg-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-top:3px solid var(--black);padding-top:12px}
.pg-foot img{width:150px}
.pg-foot b{display:block;font:400 34px/1 var(--display);letter-spacing:.03em}
.pg-foot small{font:600 12px/1.3 var(--sans)}
@media print{
  @page{size:letter;margin:0}
  .pdf-tools,.test-bar{display:none}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sheet{max-width:none}
  .p1{break-after:page}
  .pg-top,.two-col,.qs,.take{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-top{grid-template-columns:3fr 2fr}
}

#pin{cursor:grab;touch-action:none;outline:0}
#pin.grabbing{cursor:grabbing}
#pin:focus-visible path{stroke:#FFC629}
.drag-hint{font:700 15px/1.4 var(--sans);color:var(--red);margin-top:-6px}