/* Dayton Roofing Guide — plain CSS, no build step, no web fonts.
   Deep-green base with clay/terracotta actions; intentionally distinct from
   the sister windows site and the IV palette. */

:root{
  --brand:#A54F32; --brand-dark:#793621; --brand-pale:#F8ECE7;
  --navy:#174A3F; --navy-dark:#0D3029;
  --alert:#9D3F35; --alert-pale:#FAEFEC;
  --ink:#1E2926; --ink-soft:#52635E;
  --line:#DDE5E1; --bg:#fff; --bg-alt:#F4F7F5;
  --max:1160px; --radius:6px;
  --font-head:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.7;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:#fff;padding:10px 14px;border-radius:var(--radius)}

h1,h2,h3,h4{font-family:var(--font-head);line-height:1.25;color:var(--navy);margin:0 0 .5em}
h1{font-size:clamp(1.8rem,1.2rem + 2.6vw,2.7rem)}
h2{font-size:clamp(1.4rem,1.1rem + 1.4vw,1.95rem);margin-top:1.8em}
h3{font-size:clamp(1.12rem,1rem + .6vw,1.35rem);margin-top:1.4em}
p,ul,ol,table{margin:0 0 1.1em}
ul,ol{padding-left:1.3em}
li{margin-bottom:.4em}
strong{color:var(--navy)}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.header-top{background:var(--navy);color:#fff}
.header-top__inner{max-width:var(--max);margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nav__logo{color:#fff;text-decoration:none;font-family:var(--font-head);font-size:1.15rem;font-weight:700;letter-spacing:.01em}
.nav__logo span{color:var(--brand)}
.header-contact{display:flex;gap:20px;flex-wrap:wrap;font-size:.85rem}
.header-contact__item{color:#D7E8E2;text-decoration:none}
.header-contact__item:hover{color:#fff}

.site-nav{background:var(--brand)}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between}
.nav__toggle{display:none;background:none;border:0;color:#fff;font-size:1.4rem;padding:12px 4px;cursor:pointer;line-height:1}
.nav__links{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap;align-items:center;flex:1}
.nav__links li:last-child{margin-left:auto}
.nav__links li{margin:0}
.nav__links a{display:block;color:var(--navy-dark);text-decoration:none;padding:13px 14px;font-size:.93rem;font-weight:700}
.nav__links a:hover{background:rgba(255,255,255,.32)}
.nav__call{background:var(--navy);color:#fff!important;border-radius:var(--radius);margin:8px 0;padding:9px 16px!important}
.nav__call:hover{background:var(--navy-dark)!important}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,var(--brand-pale) 0%,#fff 78%);padding:44px 0 38px;border-bottom:1px solid var(--line)}
.hero__split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.hero__inner{max-width:70ch}
.hero__eyebrow{display:inline-block;background:var(--navy);color:#fff;font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:3px;margin:0 0 14px}
.hero__sub{font-family:var(--font-head);font-size:1.05rem;color:var(--ink-soft);margin:0 0 6px}
.hero h1{margin-bottom:.45em}
.hero__checklist{list-style:none;padding:0;margin:0 0 22px}
.hero__checklist li{position:relative;padding-left:28px;margin-bottom:9px}
.hero__checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand-dark);font-weight:700}
.hero__cta{display:flex;gap:11px;flex-wrap:wrap}
.hero__photo img{border-radius:var(--radius)}

/* ---------- sections ---------- */
/* Every section centres its header, and the prose column sits centred under
   it (text stays left-aligned for readability) — the section-header rhythm of
   polished competitor pages. Card sections centre their lead text too. */
.section h2{text-align:center}
.section--cards .section__lead{margin:0 auto 26px;text-align:center;max-width:62ch}
.section{padding:34px 0}
.section--alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section__lead{max-width:68ch;margin:0 auto}
.section__lead>*:last-child{margin-bottom:0}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.94rem;padding:11px 20px;border-radius:var(--radius);border:2px solid transparent;transition:background .15s}
.btn--brand{background:var(--brand);color:#fff}
.btn--brand:hover{background:var(--brand-dark);color:#fff}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-dark)}
.btn--ghost{background:transparent;color:#fff;border-color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--outline{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn--outline:hover{background:var(--bg-alt)}
.btn--lg{font-size:1.02rem;padding:14px 26px}

/* ---------- cards / grids / lists ---------- */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:var(--radius);padding:18px 20px}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.linklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.linklist li{margin:0}
.linklist a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;text-decoration:none;color:var(--navy);font-weight:600;background:#fff}
.linklist a:hover{border-color:var(--brand);background:var(--brand-pale)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;margin:0 0 1.1em}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--navy);color:#fff;font-family:var(--font-body);font-size:.86rem;letter-spacing:.02em}
tbody tr:nth-child(even){background:var(--bg-alt)}

/* ---------- alert box (NEW — add back to component library) ---------- */
.alert-box{background:var(--alert-pale);border-left:4px solid var(--alert);border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;margin:26px 0}
.alert-box h2,.alert-box h3{color:var(--alert);margin-top:0}
.alert-box ul{margin-bottom:.6em}
.alert-box>*:last-child{margin-bottom:0}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;background:#fff}
.faq summary{cursor:pointer;padding:14px 46px 14px 17px;font-weight:700;color:var(--navy);font-family:var(--font-head);font-size:1.04rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:1.4rem;color:var(--brand-dark);font-family:var(--font-body)}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .faq__a{padding:14px 17px}
.faq .faq__a>*:last-child{margin-bottom:0}

/* ---------- phone strip ---------- */
.phone-strip{background:var(--navy);color:#fff;padding:44px 0;margin:34px 0 0;text-align:center}
.phone-strip h2{color:#fff;margin-top:0}
.phone-strip .sub{color:#D7E8E2;max-width:60ch;margin:0 auto}
.phone-strip .btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px;justify-content:center}

/* ---------- form ---------- */
.form-card{background:var(--brand-pale);border:1px solid #E8C9BC;border-radius:var(--radius);padding:22px 24px}
.form-card h3{margin-top:0}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px;color:var(--navy)}
.field input,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:.95rem;background:#fff}
.field textarea{min-height:100px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- byline / meta ---------- */
.byline{border-top:1px solid var(--line);margin-top:34px;padding-top:18px;font-size:.9rem;color:var(--ink-soft)}
.byline p{margin-bottom:.5em}
.breadcrumb{font-size:.85rem;color:var(--ink-soft);padding:12px 0 0}
.breadcrumb a{color:var(--ink-soft)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#D5E3DE;margin-top:46px;padding:38px 0 0;font-size:.92rem}
.site-footer a{color:#D5E3DE;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .footer-grid h2{color:#fff;font-size:.98rem;margin:0 0 12px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;padding-bottom:26px}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:7px}
.footer-brand{font-family:var(--font-head);font-size:1.1rem;color:#fff;margin-bottom:10px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding:16px 0;font-size:.84rem;color:#B7CDC5}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav__toggle{display:block}
  /* The nav bar is navigation only on mobile. An earlier fix promoted the call
     button out of the collapsed menu, because at the time it was the only
     prominent CTA and it was hidden behind the hamburger. The sticky call bar
     replaced that job and does it better — it is always on screen rather than
     scrolling away — so keeping both put the number on screen three times and
     left a dark button floating in the nav band that read as a glitch.
     One tap target in the header, one pinned to the bottom. */
  .site-nav .wrap{flex-wrap:wrap}
  .nav__links{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:8px}
  .nav__links.open{display:flex}
  .nav__call{margin:6px 0 0}
  .nav__links li:last-child{margin-left:0}
  .hero__split{grid-template-columns:1fr}
  .hero__photo{order:-1}
  /* The hero photo sits above the headline on mobile, so at its natural 4:3 it
     eats most of the first screen and pushes the H1 to the fold. Crop it to a
     band: enough to establish credibility, not so much that the reader has to
     scroll to find out what the page is. */
  .hero__photo img{width:100%;max-height:260px;object-fit:cover}
  /* A diagram hero is content, not scenery: the crop above would decapitate
     it, and uncropped it would push the H1 off the first screen. The page
     copy carries the same information, so on mobile it simply goes. */
  .hero__photo--diagram{display:none}
  .grid--3,.linklist{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .grid--2,.grid--3,.linklist,.form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero__cta,.phone-strip .btns{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
  /* The number is the action; the strapline restates the H1 two rows below it,
     so on a phone it costs a line of a very short screen for no new
     information. Keep the number, drop the label, stay on one row. */
  .header-contact{gap:12px;font-size:.8rem;flex-wrap:nowrap}
  .header-contact__item:not(.wc-phone){display:none}
  .header-contact .wc-phone{font-size:1rem;font-weight:700;color:#fff}
  .hero__photo img{max-height:200px}
}
/* ---------- sticky call bar ----------
   Mobile only, and only on pages the engine is allowed to put a CTA on —
   see page_allows_cta() in build.py. Acute-intent local service is phone-driven
   and mobile-first, so a persistent tap target earns its space; the AUTHORITY
   pages that decline to sell never receive the markup at all. */
.call-bar{display:none}
@media (max-width:900px){
  .call-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);
    box-shadow:0 -2px 14px rgba(18,58,69,.10);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))}
  .call-bar .btn{display:flex;width:100%;align-items:center;text-align:center}
  .call-bar .btn__what,.call-bar .btn__number{width:100%;text-align:center}
  /* Keep the bar from covering the end of the page. Scoped with :has() so pages
     without a bar get no dead space. */
  body:has(.call-bar){padding-bottom:86px}
}

@media print{
  .site-nav,.phone-strip,.site-footer,.nav__toggle,.call-bar{display:none}
  .faq details{border:0}
  .faq .faq__a{display:block!important}
}

/* ---------- imagery ---------- */
.image-band{padding:8px 0 22px}
.image-band img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--radius)}
.image-band--diagram img{max-height:none;height:auto;object-fit:contain}
.hero__photo img{border-radius:var(--radius);box-shadow:0 2px 18px rgba(18,58,69,.13)}
.portrait{margin:0 0 24px;max-width:290px;float:right;padding:0 0 14px 22px}
.portrait img{border-radius:var(--radius);background:var(--brand-pale)}
.portrait figcaption{font-size:.84rem;color:var(--ink-soft);padding-top:8px;line-height:1.5}
@media (max-width:700px){.portrait{float:none;max-width:100%;padding:0 0 14px}}

/* footer column headings are h2 for heading-order validity, styled small */
.site-footer .footer-grid h2{color:#fff;font-size:.98rem;margin:0 0 12px;font-family:var(--font-head);line-height:1.25}

/* ---------- transparent phone CTA (what you're calling for, then the number) ---------- */
.btn--phone{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:9px 20px;line-height:1.2;text-align:left}
.btn--phone .btn__what{font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;opacity:.82}
.btn--phone .btn__number{font-size:1.04rem;font-weight:800}
@media (max-width:600px){
  .btn--phone .btn__what{font-size:.64rem}
}

/* phone-strip CTA row: align the button and the secondary link on one baseline */
.phone-strip .btns{align-items:center}
.phone-strip .btns a:not(.btn){color:var(--brand-dark);font-weight:600;text-decoration:underline}

/* ---------- layout variants (2026-09-08) ----------
   Switched on by `layout` knobs in site.json, which the engine turns into
   classes on <body> (and on the header/hero). With no knobs set none of these
   rules match, so the reference look is untouched. Use them to make sibling
   sites differ (build-standard §7) — not to make every site look like this. */

/* header: "single-row" — one sticky white bar: wordmark, links, call pill, menu
   button. The pill is a sibling of the link list, never a list item, so it
   cannot wrap under the links (rebuilt 2026-09-10 after that happened on a
   seven-link site). Below 1060px the list becomes a slide-in panel from the
   right with a backdrop; dropdowns open on tap via the caret button. */
.site-header--single{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.site-header--single .site-nav{background:var(--bg)}
.site-header--single .site-nav .wrap{gap:18px;padding-top:8px;padding-bottom:8px}
.site-header--single .nav__logo{color:var(--navy);text-decoration:none;font-family:var(--font-head);font-size:1.2rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.site-header--single .nav__logo span{color:var(--brand)}
.site-header--single .nav__links{flex:1 1 auto;min-width:0;flex-wrap:nowrap;justify-content:flex-end}
.site-header--single .nav__links a{color:var(--ink);font-weight:600;font-size:.95rem;padding:12px 11px;white-space:nowrap}
.site-header--single .nav__links li:last-child{margin-left:0}
.site-header--single .nav__logo{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.site-header--single .nav__links a:hover{background:none;color:var(--brand-dark)}
.site-header--single .nav__call{background:var(--brand);color:#fff!important;margin:0;padding:10px 16px!important;border-radius:var(--radius);font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap}
.site-header--single .nav__call:hover{background:var(--brand-dark)!important}
.site-header--single .nav__toggle{color:var(--ink);position:relative;z-index:70;width:44px;height:44px;padding:0;font-size:0;flex:0 0 auto}
.site-header--single .nav__toggle-bars,.site-header--single .nav__toggle-bars::before,.site-header--single .nav__toggle-bars::after{content:"";display:block;position:absolute;left:10px;width:24px;height:2px;background:var(--ink);transition:transform .2s,background .2s}
.site-header--single .nav__toggle-bars{top:21px}
.site-header--single .nav__toggle-bars::before{left:0;top:-7px}
.site-header--single .nav__toggle-bars::after{left:0;top:7px}
.site-header--single .nav__toggle[aria-expanded="true"] .nav__toggle-bars{background:transparent}
.site-header--single .nav__toggle[aria-expanded="true"] .nav__toggle-bars::before{transform:translateY(7px) rotate(45deg)}
.site-header--single .nav__toggle[aria-expanded="true"] .nav__toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}
.site-header--single .has-dropdown{display:flex;align-items:center}
.site-header--single .dropdown__toggle{display:inline-block;background:none;border:0;cursor:pointer;width:22px;height:22px;margin-left:-8px;padding:0;position:relative}
.site-header--single .dropdown__toggle::before{content:"";position:absolute;left:5px;top:4px;width:7px;height:7px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.site-header--single .has-dropdown.open .dropdown{display:block}
@media (max-width:1060px){
  .site-header--single .nav__toggle{display:block}
  .site-header--single .site-nav .wrap{flex-wrap:nowrap}
  .site-header--single .nav__call{margin-left:auto;padding:8px 12px!important;font-size:.9rem}
  /* The sticky call bar already pins the number to the bottom of a phone
     screen; a second copy of it in a 375px header only crowds out the menu
     button and clips. Keep it on tablets, drop it on phones. */
  @media (max-width:640px){.site-header--single .nav__call{display:none}}
  .site-header--single .nav__links{display:flex;position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);flex-direction:column;align-items:stretch;justify-content:flex-start;background:#fff;padding:72px 22px 24px;box-shadow:-8px 0 30px rgba(0,0,0,.18);transform:translateX(105%);transition:transform .22s ease;z-index:65;overflow-y:auto}
  .site-header--single .nav__links.open{transform:none}
  .site-header--single .nav__links li{border-bottom:1px solid var(--line)}
  .site-header--single .nav__links a{padding:14px 4px;font-size:1.05rem;white-space:normal}
  .site-header--single .has-dropdown{flex-wrap:wrap}
  .site-header--single .has-dropdown>a{flex:1}
  /* The desktop hover bridge under a dropdown would overlap the next link. */
  .site-header--single .has-dropdown::after{display:none}
  .site-header--single .dropdown__toggle{width:44px;height:44px;margin:0}
  .site-header--single .dropdown__toggle::before{left:16px;top:15px}
  .site-header--single .has-dropdown.open .dropdown__toggle::before{transform:rotate(-135deg);top:19px}
  .site-header--single .dropdown{position:static;box-shadow:none;border:0;padding:0 0 8px 14px;min-width:0;width:100%}
  .site-header--single .has-dropdown:hover .dropdown,.site-header--single .has-dropdown:focus-within .dropdown{display:none}
  .site-header--single .has-dropdown.open .dropdown{display:block}
  .site-header--single .dropdown a{font-size:.98rem;padding:10px 4px}
  /* position:fixed is the scroll lock iOS Safari actually honours; the nav
     script stores the scroll offset in body's top and restores it on close. */
  body.nav-open{overflow:hidden;position:fixed;left:0;right:0}
  .site-header--single .nav__links{overscroll-behavior:contain;touch-action:pan-y}
  /* The sticky header is its own stacking layer (z 50), and the panel lives
     inside it. The backdrop must sit BELOW the header, or it covers the panel
     and every tap lands on the backdrop — which is exactly what shipped on
     2026-09-10: the menu opened and nothing in it could be tapped. */
  body.nav-open::before{content:"";position:fixed;inset:0;background:rgba(16,36,56,.45);z-index:40}
  /* The bottom call bar (z 120) would overlap the panel's last links. */
  body.nav-open .call-bar{display:none}
}
/* nav dropdown (any header): `["group:<name>", "Label"]` in nav */
.has-dropdown{position:relative}
.dropdown__toggle{display:none}
.dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);min-width:240px;padding:6px 0;margin:0;list-style:none;box-shadow:0 12px 30px rgba(0,0,0,.08);z-index:60}
.has-dropdown::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{display:block}
.dropdown li{margin:0}
.dropdown a{display:block;padding:9px 16px;font-size:.92rem;color:var(--ink)!important;font-weight:500!important}
.dropdown a:hover{background:var(--bg-alt)!important}

/* hero: "overlay" — full-bleed photo under a dark gradient, copy on top */
.hero--overlay{position:relative;padding:0;border-bottom:0;background:var(--navy);color:#fff}
.hero--overlay .hero__media{position:absolute;inset:0;z-index:0}
.hero--overlay .hero__media img{width:100%;height:100%;object-fit:cover;border-radius:0}
.hero--overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,33,27,.55),rgba(12,33,27,.8));z-index:1}
.hero--overlay .wrap{position:relative;z-index:2;padding-top:88px;padding-bottom:88px}
.hero--overlay .hero__inner{max-width:52ch}
.hero--overlay h1,.hero--overlay .hero__sub,.hero--overlay .hero__checklist{color:#fff}
.hero--overlay .hero__checklist li::before{color:#fff}
.hero--overlay strong,.hero--overlay .hero__inner a{color:#fff}
.hero--overlay .hero__eyebrow{background:rgba(255,255,255,.16)}

/* headings: "left" — section headers and lead columns sit left, not centred */
.layout--left .section h2{text-align:left}
.layout--left .section__lead{margin:0}
.layout--left .section--cards .section__lead{margin:0 0 26px;text-align:left}

/* density: "airy" — more space between sections */
.layout--airy .section{padding:60px 0}
.layout--airy .hero{padding:64px 0 56px}
.layout--airy .phone-strip{padding:56px 0;margin-top:0}

/* cards: "quiet" — hairline only, no accent edge */
.layout--quiet .card{border-top:1px solid var(--line);box-shadow:none}

@media (max-width:900px){
  .dropdown{position:static;display:block;box-shadow:none;border:0;padding:0 0 4px 14px;min-width:0}
  .hero--overlay .wrap{padding-top:56px;padding-bottom:56px}
}

/* ---------- TABLE / STEPS blocks (2026-09-08) ----------
   `## TABLE — heading` = lead + one table + a required Source: line.
   `## STEPS — heading` = lead + numbered process (real <ol>, so the order is
   in the markup). Both are the structures answer engines lift most readily. */
.section--table .section__lead,.section--steps .section__lead{margin:0 auto 22px;max-width:68ch}
.layout--left .section--table .section__lead,.layout--left .section--steps .section__lead{margin:0 0 22px}
.table-source{font-size:.84rem;color:var(--ink-soft);margin:-.4em 0 0}
.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 66px;counter-increment:step}
.step::before{content:counter(step);position:absolute;left:20px;top:18px;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--font-body)}
.step h3{margin:0 0 .35em}
.step>*:last-child{margin-bottom:0}
@media (max-width:700px){.steps{grid-template-columns:1fr}}

/* ---------- EMBED block (2026-09-09) ----------
   `## EMBED — heading` = raw vendor markup (a lead form) on conversion pages
   only. The wrapper keeps the vendor's widget inside the column and gives it a
   card so it reads as part of the page, whatever the vendor's own CSS does. */
.section--embed .embed{max-width:720px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.section--embed .embed iframe,.section--embed .embed form{max-width:100%}

/* ---------- hero lead form (2026-09-10) ----------
   `hero_form` in site.json: a white card beside the hero copy on the pages
   that opt in. Above the fold, because a form at the foot of a page is a form
   nobody reaches. Stacks under the copy below 900px. The vendor's embed
   brings its own field styling; these rules only keep it inside the card. */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:40px;align-items:center}
.hero__form{background:#fff;color:var(--ink);border-radius:var(--radius);padding:24px 26px 22px;box-shadow:0 14px 40px rgba(0,0,0,.18)}
.hero__form h2{font-size:1.25rem;margin:0 0 6px;color:var(--navy);text-align:left}
.hero__form-lead{font-size:.92rem;color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
.hero__form-embed form,.hero__form-embed iframe{max-width:100%}
.hero__form-embed input:not([type=checkbox]):not([type=radio]):not([type=submit]),.hero__form-embed select,.hero__form-embed textarea{width:100%;box-sizing:border-box}
.hero__form-note{font-size:.85rem;color:var(--ink-soft);margin:12px 0 0}
.hero__form-note a{color:var(--brand-dark)}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr;gap:28px}}

/* ---------- lead-link mode (affiliate / CPL sites, 2026-09-17) ----------
   The conversion is a link to a partner lander, not a phone. Every placement
   carries .lead-link + data-slot so one selector binds the click event. */
.btn--lead{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.1}
.btn--lead .btn__label{font-size:1.02rem;font-weight:800}
.btn--lead .btn__sub{font-size:.68rem;font-weight:600;letter-spacing:.02em;opacity:.85}
.call-bar--lead .btn--lead{align-items:center}
.call-bar--lead .btn__label,.call-bar--lead .btn__sub{width:100%;text-align:center}
.lead-band{background:var(--navy);color:#fff;text-align:center}
.lead-band h2,.lead-band p{color:#fff}
.lead-band .btns{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin-top:14px}
.ad-slot{margin:18px auto;text-align:center;max-width:var(--max);padding:0 20px}
.byline--author{border-top:0;margin:14px 0 0;padding-top:0;font-size:.9rem;color:var(--ink-soft)}
.byline--author a{font-weight:700}

/* empty ad wrappers take no space (engine f2d9de8) */
.ad-slot--empty{margin:0;padding:0;height:0;overflow:hidden}
body:has(.lead-band) .site-footer{margin-top:0}