/* NuRoof landing pages. Tokens: warm-white ground, one type family (Archivo, self-hosted),
   one accent (#8C3B1F) used only on the primary CTA and the star rating. 4px corners max.
   No cards, no shadows, no gradients except the hero scrim. Sections split by whitespace and one 1px rule. */
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#FAF8F4;--ink:#1F1F1F;--muted:#5C5C5C;--rule:#DDD8CF;--field:#FFFFFF;--photo:#2A2623;
  --accent:#8C3B1F;--accent-hover:#743118;
  --r:4px;--max:1120px;--measure:68ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.55;font-weight:400}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
a{color:inherit}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* header: name left, phone right. no navigation. */
/* header: sticky and slim (56px on phones). logo image, outlined call button (ink, never the brick accent:
   brick stays reserved for the form CTA), and a quiet trust line that only appears from 720px up. */
.hdr{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--rule);background:var(--bg)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:12px;padding-block:6px}
.logo{display:block;flex:0 0 auto;line-height:0}
.logo img{display:block;height:40px;width:auto}
.trust{display:none;color:var(--muted);font-size:.85rem;line-height:1.3;margin:0 auto;text-align:center}
.callbtn{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;border:1.5px solid var(--ink);border-radius:var(--r);padding:6px 11px 6px 10px;color:var(--ink);background:transparent;text-decoration:none;font-weight:700;font-size:.95rem;line-height:1.1;white-space:nowrap}
.callbtn:hover{background:var(--ink);color:var(--bg)}
.callbtn svg{width:18px;height:18px;flex:0 0 18px}
.callbtn .txt{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.callbtn .lbl{font-size:.68rem;font-weight:600;color:var(--muted);letter-spacing:.01em}
.callbtn:hover .lbl{color:var(--bg)}
.callbtn .num{display:block;font-size:.95rem;font-weight:800;letter-spacing:.01em}
.hdr-call{font-weight:600;text-decoration:none;font-size:.95rem;border-bottom:1px solid var(--ink);padding-bottom:1px;white-space:nowrap}

/* hero: full-bleed photo, headline over a scrim, bottom-left. solid block until the photo arrives. */
.hero{padding:0}
.hero-media{position:relative;background:var(--photo);min-height:36vh;max-height:560px;display:flex;align-items:flex-end;overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media .scrim{position:relative;width:100%;background:linear-gradient(to top,rgba(20,16,14,.84) 0%,rgba(20,16,14,.5) 60%,rgba(20,16,14,0) 100%);padding-block:64px 22px}
.hero-media h1{color:#fff;font-weight:800;font-size:clamp(1.9rem,6.6vw,3.3rem);line-height:1.05;letter-spacing:-.015em;max-width:20ch}
.hero-media figcaption{color:rgba(255,255,255,.78);font-size:.92rem;margin-top:10px}
/* offer line on the scrim (option D, 2026-09-15): under the headline, above the proof widget, muted white like the caption.
   Phones only: from 720px the header row carries the same offer and a duplicate in one viewport reads as sloppy. */
.hero-media .offer{color:rgba(255,255,255,.82);font-size:.95rem;font-weight:600;margin-top:10px;line-height:1.3}
.hero-body{padding-block:20px 40px;display:grid;gap:22px}
.sub{font-size:clamp(1.02rem,3vw,1.2rem);line-height:1.5;max-width:var(--measure)}
.quiet{margin-top:10px;color:var(--muted);font-size:.95rem}
.proofw{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:1rem;flex-wrap:wrap}
.proofw .g{width:20px;height:20px;flex:0 0 20px}
.stars{color:var(--accent);letter-spacing:1px;font-size:1rem}
.proofw .lbl{border-bottom:1px solid var(--ink);padding-bottom:1px}
.proofw.onphoto{color:#fff;margin-top:14px}
.proofw.onphoto .lbl{border-bottom-color:rgba(255,255,255,.7)}
.proofw.onphoto .stars{color:#F2B24A}

/* the form panel: plain border, 4px, warm-white. this is the conversion device. */
.panel{border:1px solid var(--rule);border-radius:var(--r);background:var(--bg);padding:20px}
form.lead{display:grid;gap:14px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:600;font-size:1.3rem;line-height:1.25;margin-bottom:14px;padding:0}
legend b{font-weight:800}
.prog{color:var(--muted);font-size:.85rem;order:-1}
.choices{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px}
.choices label{position:relative;display:flex}
.choices input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choices span{flex:1;display:flex;align-items:center;justify-content:center;min-height:58px;text-align:center;font-weight:600;font-size:1rem;line-height:1.2;padding:12px 10px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--field)}
.choices input:checked + span{background:var(--ink);color:#fff}
.choices input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.choices .ns{grid-column:1/-1}
.choices .ns span{font-weight:500;border-color:var(--rule);color:var(--muted)}
.choices .ns input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)}
.step input:not([type=radio]){width:100%;font:inherit;font-size:1.1rem;padding:14px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--field);color:var(--ink)}
.step input::placeholder{color:#6B6B6B}
.step .btn{margin-top:12px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;line-height:1.2;padding:16px 24px;border:0;border-radius:var(--r);cursor:pointer;text-align:center;width:100%}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.back{justify-self:start;background:none;border:0;padding:0;font:inherit;font-size:.95rem;color:var(--muted);text-decoration:underline;cursor:pointer}
.consent{margin-top:12px;font-size:.85rem;color:var(--muted);line-height:1.45}
.consent a{color:var(--muted)}
.micro{color:var(--muted);font-size:.9rem;margin-top:8px}
.err{display:none;padding:10px 12px;border:1.5px solid var(--ink);border-radius:var(--r);font-weight:600;font-size:.95rem}
.err.show{display:block}
.stop{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
.stop-h{font-weight:700}
.stop p + p{margin-top:6px}
.stop .hdr-call{display:inline-block;margin-top:10px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
/* no-JS fallback: every step visible, one submit at the end */
html:not(.js) .step{display:block !important}
html:not(.js) .step[hidden]{display:block}
html:not(.js) .prog,html:not(.js) [data-next]{display:none}

/* below the fold: three bullets, one proof block */
.below{padding-block:44px 56px;border-top:1px solid var(--rule)}
/* full-width photo between the hero and the objections (rejuvenation). lazy, 16:10, no shift. */
.hiw{margin:0 0 34px}
.hiw img{display:block;width:100%;height:auto;border-radius:var(--r)}
.objections{list-style:none;padding:0;display:grid;gap:18px;max-width:var(--measure)}
.objections li b{font-weight:800}
.proofblock{margin:0}
.proofblock + .objections{margin-top:40px;padding-top:28px;border-top:1px solid var(--rule)}
/* gonano credential badge: third-party trust signal, sits under the hero subhead, never in the header */
.badge{margin:18px 0 0}
.badge img{display:block;width:auto;max-width:min(320px,100%);height:auto}
.quotes{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:18px}
.quotes blockquote{font-size:1.02rem;line-height:1.5;max-width:var(--measure)}
.quotes cite{display:block;font-style:normal;font-size:.9rem;color:var(--muted);margin-top:6px;font-weight:600}

footer{padding:26px 0 48px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--rule)}
footer p + p{margin-top:8px}
footer a + a{margin-left:14px}

/* thank-you and legal */
.ty{padding-block:48px 64px;display:grid;gap:18px;max-width:var(--measure)}
.ty h1{font-weight:800;font-size:clamp(2rem,7vw,3.2rem);line-height:1.05;letter-spacing:-.015em}
.ty .btn{margin-top:6px}
.ty ol{padding-left:22px;color:var(--muted)}
.ty ol li + li{margin-top:6px}
.ty h2{font-weight:700;font-size:1.25rem;margin-top:10px}

@media (min-width:720px){
  body{font-size:18px}
  .hdr .wrap{min-height:64px;gap:20px}
  .logo img{height:44px}
  .trust{display:block}
  .callbtn{padding:7px 14px 7px 12px;gap:10px}
  .callbtn .lbl{font-size:.72rem}
  .callbtn .num{font-size:1.05rem}
  .btn{width:100%}
  .hero-media{min-height:44vh}
  .hero-media .scrim{padding-block:120px 36px}
  .hero-media h1{max-width:16ch}
  .hero-media .offer{display:none}
  .hero-body{grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;padding-block:0 48px}
  .hero-body .copy{padding-top:30px}
  .panel{margin-top:-72px;padding:24px;position:relative}
  .choices{grid-template-columns:1fr 1fr}
  .objections{gap:20px}
  .quotes{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .quotes blockquote{font-size:1rem}
  .ty .btn{width:auto}
}
@media (min-width:1080px){
  .panel{margin-top:-96px;padding:28px}
}