/* Roofer Buddy: canonical neutral restyle (preview). Loaded after editorial.css and lock.css.
   Neutral base + glass; the Roofer Buddy orange (the page's existing accent, #E0642F) is the single burst colour, carried through
   hero, eyebrows, links, step numbers, dividers, focus and the lock panel. */
:root{
  --rb:#E0642F;                 /* the page's existing orange (lock.css --l-accent): 5.7:1 on #090a0b, used for text/lines/markers only */
  --rb-soft:rgba(224,100,47,.14);
  --hair:#303338;--hair-2:rgba(238,238,239,.26);
  --glass:rgba(16,18,20,.72);
  --l-accent:var(--rb);
}
html{scroll-behavior:smooth}
body{background:#090a0b}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--rb);outline-offset:4px;border-radius:4px}
::selection{background:var(--rb);color:#090a0b}

/* fallback in-page header (previews do not run the canonical header; live replaces this) */
.site-head{background:#090a0b;border-bottom:1px solid var(--hair)}
.site-head .brand{text-decoration:none;letter-spacing:.06em;display:inline-flex;align-items:center;min-height:44px}
.site-head .brand span{color:var(--rb)}
.site-head .site-nav a,.site-head .nav-products summary{min-width:44px;color:#a4a6aa;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding-block:0}
.site-head .site-nav a:hover,.site-head .nav-products summary:hover{color:#eeeeef;text-decoration:underline;text-underline-offset:5px}
.site-head .nav-products summary{list-style:none;cursor:pointer;gap:8px}
.site-head .nav-products summary::-webkit-details-marker{display:none}
.site-head .caret{display:inline-block;width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nav-panel{background:rgba(16,18,20,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--hair);border-radius:8px;padding:8px}
.nav-panel li{max-width:none}
.nav-panel a{padding:10px 12px;border-radius:6px;min-height:44px;text-decoration:none}
.nav-panel a b{font-weight:400;color:#eeeeef}
.nav-panel a[aria-current=page] b{color:var(--rb)}
.site-head .menu summary{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;list-style:none;cursor:pointer;padding:0}
.site-head .menu summary::-webkit-details-marker{display:none}
.site-head .burger{display:grid;gap:5px}
.site-head .burger i{display:block;width:20px;height:1px;background:#eeeeef}
.menu-panel{position:absolute;right:var(--gutter);top:100%;z-index:30;display:grid;min-width:min(320px,calc(100vw - 2*var(--gutter)));background:rgba(16,18,20,.96);border:1px solid var(--hair);border-radius:8px;padding:8px}
.site-head .bar{position:relative}
.menu-panel a{display:grid;min-height:44px;padding:10px 12px;text-decoration:none;color:#eeeeef}
.menu-panel a span{font-size:13px;color:#a4a6aa}
.menu-panel .group{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#a4a6aa;padding:10px 12px}
.menu-panel .products{display:grid}

/* type */
h1{max-width:16ch}
.eyebrow{color:#a4a6aa}
.eyebrow span:first-child{color:var(--rb)}
.motto{color:#eeeeef}
.hero{padding:72px 0 64px}
.lede{color:#a4a6aa}

/* buttons: text style with an arrow; no box, no fill */
.btn,.btn-primary,.btn-secondary,.btn-text{display:inline-flex;align-items:center;min-height:44px;padding:10px 0;border:0;border-radius:0;background:transparent;color:#eeeeef;box-shadow:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(238,238,239,.4);gap:10px}
.btn::after,.btn-text::after{content:"→" / "";text-decoration:none;display:inline-block;transition:transform .2s}
.btn:hover,.btn-primary:hover,.btn-text:hover{background:transparent;color:#fff;text-decoration-color:currentColor}
.btn:hover::after,.btn-text:hover::after{transform:translateX(3px)}
.btn-primary{text-decoration-color:var(--rb)}
.btn-primary::after{color:var(--rb)}
.btn-primary:hover{text-decoration-color:var(--rb);text-decoration-thickness:2px}
.btn-secondary{color:#a4a6aa}
.actions{gap:8px 32px}
a{text-decoration-color:rgba(238,238,239,.4)}
p a,dd a{text-decoration-color:var(--rb)}

/* facts + cards: hairline rows, burst tick */
.facts{gap:0 40px}
.fact,.card,.faqs details,.faq{border-color:var(--hair)}
.fact{position:relative}
.fact::before,.card::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:2px;background:var(--rb)}
.card{position:relative}
.fact dt{color:#eeeeef}
.card .eyebrow span{color:var(--rb)}
.card h3{font-size:22px}

/* hero showcase: real captures on glass */
.showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;padding:clamp(16px,3vw,32px);border:1px solid var(--hair);border-radius:8px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.showcase .phone{max-width:240px;width:100%}
.showcase .cap{grid-column:1/-1;margin:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:#a4a6aa}
.showcase .cap span:first-child{color:#a4a6aa}
.phone img{border:1px solid var(--hair);border-radius:8px}
#actions-title ~ *{max-width:60ch}
section[aria-labelledby="actions-title"] .showcase{grid-template-columns:minmax(0,260px);justify-content:center}

/* voice walk steps */
section[aria-labelledby="walk-title"] .card .eyebrow span{color:var(--rb)}

/* pre-launch lock panel: glass, hairline, no filled button */
.er-lock{max-width:760px;margin:clamp(40px,6vw,80px) auto;padding:clamp(24px,5vw,48px);border:1px solid var(--hair);border-radius:8px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#eeeeef;font-family:Arial,sans-serif;position:relative}
.er-lock::before{content:"";position:absolute;left:-1px;top:28px;bottom:28px;width:2px;background:var(--rb);border-radius:2px}
.er-lock__eyebrow{font:400 12px/1.5 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--rb)}
.er-lock h2{font-family:Arial,sans-serif;font-weight:400;letter-spacing:-.03em;color:#eeeeef;max-width:none}
.er-lock p{color:#a4a6aa;max-width:60ch}
.er-lock label.er-lock__label{font-weight:400;font-size:14px;color:#a4a6aa}
.er-lock input[type=email]{min-height:48px;background:rgba(9,10,11,.6);border:1px solid #55585d;border-radius:6px;color:#eeeeef;font-family:Arial,sans-serif}
.er-lock input[type=email]::placeholder{color:#8b8e93}
.er-lock input[type=email]:focus{outline:2px solid var(--rb);outline-offset:2px;border-color:var(--rb)}
.er-lock button{min-height:48px;padding:12px 20px;font:400 16px/1.2 Arial,sans-serif;color:#eeeeef;background:transparent;border:1px solid var(--hair-2);border-radius:6px;display:inline-flex;align-items:center;gap:10px}
.er-lock button::after{content:"→" / "";color:var(--rb)}
.er-lock button:hover{border-color:var(--rb);background:var(--rb-soft)}
.er-lock__status{color:#eeeeef}
.er-lock a{color:#eeeeef;text-decoration-color:var(--rb)}
.er-lock__beta{font-weight:400;min-width:44px}

/* FAQ */
.faqs summary{display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none;font-size:18px}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";color:var(--rb);font-size:22px;line-height:1}
.faqs details[open] summary::after{content:"–"}

/* footer */
.site-foot{border-top:1px solid var(--hair)}
.site-foot a{color:#a4a6aa;text-decoration:none;min-width:44px}
.site-foot a:hover{color:#eeeeef;text-decoration:underline;text-underline-offset:5px}
.site-foot .motto{color:#eeeeef}

@media(max-width:800px){
  .hero{padding:40px 0 48px}
  .showcase{gap:16px;padding:16px}
  .showcase .phone{max-width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(min-width:1100px){section[aria-labelledby="walk-title"] .grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Support launcher clearance (replaces the old Ask Frank bubble rules).
   The site-wide /assets/frank-chat.js loads button.em-support-launcher: position:fixed, bottom-right, 58x50 at 12px up to 520px wide, 129x50 at 16px from 521px.
   The page adapts; no rule here selects or restyles the launcher. --launcher-safe = launcher width + its offset + air (78px compact, 160px full).
   Text, links, inputs and buttons never sit in that right-hand strip, so nothing is under the launcher at rest, mid-scroll or at the end of the page.
   At 761-1100px the right gutter is 160px (>=140px required). --launcher-clear shrinks toward the normal gutter once the centred column leaves the strip on its own. */
:root{--launcher-safe:78px;--launcher-clear:max(var(--gutter),calc(var(--launcher-safe) - max(0px,(100vw - 1280px)/2)))}
@media(min-width:521px){:root{--launcher-safe:160px}}
main .wrap,.site-foot .wrap{padding-right:var(--launcher-clear)}
main>.er-lock{box-sizing:border-box;width:min(760px,calc(100% - var(--gutter) - var(--launcher-clear)));max-width:760px;margin-left:calc(var(--gutter) + max(0px,(100% - var(--gutter) - var(--launcher-clear) - 760px)/2));margin-right:0}
@media(max-width:760px){.site-foot{padding-bottom:max(96px,calc(72px + env(safe-area-inset-bottom,0px)))}}