/* Everything below the first screen, in the first screen's world: the dusk palette, glass cards, Instrument Serif
   headings with an italic word in the roofer's glow, and the roofer's color on the buttons. Loaded last, after
   hero.css, so it wins over style.css, studio.css and journey.css; each rule starts with body so it also wins over
   the roofer's brand styles brand.mjs adds after it. Every color comes from the brand properties (--brand-fill,
   --on-brand, --brand-glow) or the dusk tokens below. Screens only: printing keeps the light page. */
@media screen{
/* The shared page tokens, read again for a dark page: text is light, the accent that reads on the page is the glow,
   and a tint is the glow through glass. The first screen keeps the page's own values, kept here at :root before the
   page reads them again (--light-*). Inside the white address box and its list in step 1, the accent stays the one
   that reads on white (--accent-on-light: the roofer's own accent, none without a roofer, as on the first screen). */
:root{--accent-on-light:var(--brand-accent);--light-ink:var(--ink);--light-muted:var(--muted);--light-line:var(--line);--light-control-line:var(--control-line);--light-cream:var(--cream);--light-green:var(--green);--light-lime:var(--lime);--light-brand-tint:var(--brand-tint);--light-brand-soft:var(--brand-soft);color-scheme:dark}
html:root{background:#060b0c}
body{
 --page:#060b0c;--deep:#081012;--card:#0c1517;--field:#0b1416;
 --rim:rgba(255,255,255,.1);--rim-2:rgba(255,255,255,.18);--field-line:rgba(246,243,236,.42);
 --text:#f6f3ec;--text-2:rgba(246,243,236,.86);--text-3:rgba(246,243,236,.7);
 --glow:var(--brand-glow,#78e9d1);
 --glow-10:color-mix(in srgb,var(--glow) 10%,transparent);--glow-16:color-mix(in srgb,var(--glow) 16%,transparent);
 --glow-35:color-mix(in srgb,var(--glow) 35%,transparent);--glow-55:color-mix(in srgb,var(--glow) 55%,transparent);
 --serif:'Instrument Serif','Aerial Serif',Georgia,'Times New Roman',serif;
 --sans:Manrope,'Aerial Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
 --ink:var(--text);--muted:var(--text-3);--line:var(--rim);--control-line:var(--field-line);--cream:var(--page);
 --brand-accent:var(--glow);--green:var(--glow);--brand-tint:var(--glow-16);--brand-soft:color-mix(in srgb,var(--glow) 42%,transparent);--lime:var(--brand-tint);
 background:var(--page);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
/* The first screen stays exactly as it was drawn: its own values of the page tokens, its controls and its type. The
   rules for every field, label and link below leave it out (:where(:not(.aerial *,.aerial-top *)), no weight). */
body .aerial,body .aerial-top{--brand-accent:var(--accent-on-light);--ink:var(--light-ink);--muted:var(--light-muted);--line:var(--light-line);--control-line:var(--light-control-line);--cream:var(--light-cream);--green:var(--light-green);--lime:var(--light-lime);--brand-tint:var(--light-brand-tint);--brand-soft:var(--light-brand-soft);color-scheme:normal;-moz-osx-font-smoothing:auto}
body .aerial-top{color:var(--ink);-webkit-font-smoothing:auto}
/* The white field and list in step 1 keep the light controls and scrollbars they were drawn with. */
body :is(#house-address,.house-search .house-suggestions){color-scheme:light}
body :is(.estimator,.confidence,.faq,.page-footer,dialog,#toast) ::selection{background:var(--glow-35);color:#fff}
body em{color:var(--glow)}
body :is(h1,h2,h3) em{font-style:italic;color:var(--glow);text-shadow:0 0 40px var(--glow-35)}
body :is(button,a,input,select,textarea,summary):where(:not(.aerial *,.aerial-top *)):focus-visible{outline:3px solid var(--glow);outline-offset:3px}
body [tabindex="-1"]:where(:not(.aerial *,.aerial-top *)):focus{outline:0}

/* ---- the edge the page rises on, over the first screen ---- */
body .aerial::after{background:linear-gradient(180deg,var(--aerial-edge,#0b1416),var(--page) 24px);box-shadow:inset 0 1px 0 var(--glow-35),0 -14px 36px -18px var(--glow-55)}

/* ---- the estimator: a faint aerial street and a soft glow behind its heading ---- */
body .estimator{position:relative;isolation:isolate;max-width:1480px;padding:clamp(44px,6vw,96px) 4% 0}
body .estimator::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:0;height:min(900px,100%);pointer-events:none;opacity:.16;
 background:url(assets/aerial-street.svg) 62% -160px/1800px auto no-repeat;
 -webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.5) 300px,transparent 760px);mask-image:linear-gradient(#000,rgba(0,0,0,.5) 300px,transparent 760px)}
body .estimator::after{content:'';position:absolute;z-index:-1;left:0;right:0;top:0;height:560px;pointer-events:none;background:radial-gradient(56% 100% at 50% 0,var(--glow-10),transparent 72%)}
body .eyebrow{font-family:var(--sans);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--glow)}
body .estimator-intro{align-items:end;margin-bottom:clamp(26px,3vw,40px)}
body .estimator-intro .eyebrow,body .confidence>.eyebrow,body .faq .eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;margin-bottom:18px}
body .estimator-intro .eyebrow::before,body .confidence>.eyebrow::before,body .faq .eyebrow::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 4px rgba(5,10,11,.6),0 0 0 5.5px color-mix(in srgb,var(--glow) 42%,transparent),0 0 12px var(--glow)}
body .confidence>.eyebrow{flex-direction:column;justify-content:center;gap:16px}
body .estimator-intro h2{font:400 clamp(48px,5.6vw,86px)/.95 var(--serif);letter-spacing:-.015em;color:#fff}
body .estimator-intro>p{max-width:24em;font-size:16px;line-height:1.55;color:var(--text-2);text-align:right}

/* ---- the three steps ---- */
body .stepper{gap:6px;padding:6px;margin-bottom:22px;border-radius:24px;background:rgba(255,255,255,.035);border:1px solid var(--rim);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px -40px rgba(0,0,0,.9)}
body .stepper button{min-height:76px;padding:14px 14px 14px 70px;border:1px solid transparent;border-radius:18px;background:transparent;color:var(--text-3);font-family:var(--sans);transition:background .25s,border-color .25s}
body .stepper button:hover{background:rgba(255,255,255,.04)}
body .stepper button>span{left:18px;top:calc(50% - 19px);width:38px;height:38px;border:1px solid var(--rim-2);background:rgba(255,255,255,.03);color:var(--text-3);font:italic 400 23px/1 var(--serif)}
body .stepper b{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text-2)}
body .stepper small{margin-top:3px;font-size:12.5px;color:var(--text-3)}
body .stepper button.active{background:linear-gradient(180deg,var(--glow-16),color-mix(in srgb,var(--glow) 5%,transparent));border-color:var(--glow-35);color:#fff;box-shadow:0 18px 40px -24px var(--glow-55),inset 0 1px 0 rgba(255,255,255,.08)}
body .stepper button.active b{color:#fff}
body .stepper .active small{color:var(--text-2);opacity:1}
body .stepper .active>span{background:var(--glow-10);border-color:var(--glow);color:var(--glow);box-shadow:0 0 18px -2px var(--glow-55);text-shadow:0 0 14px var(--glow-55)}
body .stepper .complete>span{background:var(--glow-16);border-color:var(--glow-35);color:var(--glow)}

/* ---- saved plan banner and the autosave line ---- */
body .saved-plan-banner{padding:18px 22px;border-radius:22px;background:linear-gradient(90deg,var(--glow-16),rgba(255,255,255,.03) 60%);border:1px solid var(--glow-35);box-shadow:0 20px 50px -30px var(--glow-55)}
body .saved-plan-banner b{font:400 24px/1.1 var(--serif);color:#fff}
body .saved-plan-banner span{color:var(--text-2);font-size:13px}
body .autosave-status{color:var(--text-3);font-size:12.5px}

/* ---- buttons, links and fields ---- */
body .button{gap:10px;min-height:48px;padding:13px 20px;border:1px solid var(--rim-2);border-radius:15px;background:rgba(255,255,255,.055);color:var(--text);font:700 14px/1.3 var(--sans);letter-spacing:-.005em;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s,filter .2s}
body .button:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:var(--glow-55);transform:translateY(-1px)}
body .button.primary{border:0;color:var(--on-brand,#fff);font-weight:800;
 background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%),var(--brand-fill,#183f37);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px var(--glow-55),0 12px 30px -10px color-mix(in srgb,var(--glow) 45%,transparent)}
/* Hovered, the fill only ever darkens a little: lighter, white text on a fill darkened just enough for it would drop
   under 4.5:1. The ring of glow brightens instead. */
body .button.primary:hover:not(:disabled){background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 45%),var(--brand-fill,#183f37);filter:brightness(.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 0 1px var(--glow),0 16px 40px -10px var(--glow-55)}
body .button.quiet{border-color:transparent;background:transparent;color:var(--text-2)}
body .button.quiet:hover:not(:disabled){background:rgba(255,255,255,.06);border-color:transparent}
body .text-button:where(:not(.aerial *,.aerial-top *)){min-height:44px;color:var(--glow);font-family:var(--sans);text-decoration-color:color-mix(in srgb,var(--glow) 50%,transparent)}
body .icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rim-2);background:rgba(255,255,255,.07);color:#fff;font-size:24px;line-height:1}
body .icon-button:hover{background:rgba(255,255,255,.14)}
body label:where(:not(.aerial *,.aerial-top *)){color:var(--text)}
body label:where(:not(.aerial *,.aerial-top *))>span{color:var(--text-3)}
body :is(input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]),select,textarea):where(:not(.aerial *,.aerial-top *)){min-height:50px;padding:12px 16px;border:1px solid var(--field-line);border-radius:14px;background:var(--field);color:var(--text);font-size:15px;transition:border-color .2s,box-shadow .2s}
body :is(input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]),select,textarea):where(:not(.aerial *,.aerial-top *)):hover{border-color:rgba(246,243,236,.6)}
body :is(input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]),select,textarea):where(:not(.aerial *,.aerial-top *)):focus-visible{outline:0;border-color:var(--glow);box-shadow:0 0 0 3px var(--glow-35),0 0 24px -6px var(--glow-55)}
body :where(:not(.aerial *,.aerial-top *))::placeholder{color:rgba(246,243,236,.5);opacity:1}
body :is(input[type=checkbox],input[type=radio]):where(:not(.aerial *,.aerial-top *)){accent-color:var(--glow)}
body .pill{padding:8px 12px;border:1px solid var(--glow-35);background:var(--glow-10);color:var(--glow);font:800 10.5px/1.2 var(--sans);letter-spacing:.08em}
body .hint{color:var(--text-3);font-size:13px}
body .error{padding:12px 14px;border:1px solid rgba(255,128,108,.42);border-radius:14px;background:rgba(255,96,74,.1);color:#ffc6ba;font-size:14px}
body details>summary::marker{color:var(--glow)}

/* ---- a step: one glass panel ---- */
body .panel{padding:34px;border:1px solid var(--rim);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 320px);box-shadow:0 50px 120px -60px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07)}
/* A thin line of light along each step's top edge, and a step that fades in as it opens. */
body .panel{position:relative}
body .panel::before{content:'';position:absolute;top:-1px;left:12%;right:12%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--glow-55),transparent)}
body .step-panel{animation:dusk-in .45s ease-out backwards}
@keyframes dusk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body .sectionhead{margin-bottom:26px}
body .sectionhead .eyebrow{margin-bottom:12px;font-size:11px}
body :is(#step-1,#step-2,#step-3) .sectionhead h2{margin-bottom:10px;font:400 clamp(36px,3.3vw,50px)/1.02 var(--serif);letter-spacing:-.012em;color:#fff}
body .sectionhead p:not(.eyebrow){font-size:15px;line-height:1.55;color:var(--text-3)}
body .mode-tabs{gap:6px;margin:22px 0 20px;padding:5px;border:1px solid var(--rim);border-radius:18px;background:rgba(255,255,255,.03)}
body .mode-tabs button{flex:1;min-height:46px;padding:10px 12px;border-radius:13px;color:var(--text-3);font:700 13.5px/1.25 var(--sans);transition:background .2s,color .2s}
body .mode-tabs button:hover{color:#fff;background:rgba(255,255,255,.04)}
body .mode-tabs button.selected{background:rgba(255,255,255,.1);color:#fff;font-weight:800;box-shadow:inset 0 0 0 1px var(--glow-35),0 10px 26px -14px var(--glow-55)}
body .manual-card{padding:26px;border:1px solid var(--rim);border-radius:24px;background:rgba(255,255,255,.028)}
body .manual-heading{gap:16px}
body .manual-heading>span{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid var(--glow-35);border-radius:15px;background:var(--glow-10);color:var(--glow);font-size:24px;box-shadow:0 0 26px -8px var(--glow-55)}
body .manual-heading h3{margin:0 0 6px;font:400 28px/1.05 var(--serif);letter-spacing:-.005em;color:#fff}
body .manual-heading p{font-size:14px;line-height:1.5;color:var(--text-3)}
body .field-grid label span,body .manual-card>label>span{color:var(--text-3);font-size:12px}
body .or-divider{color:var(--text-3);font-size:12px}
body .or-divider:before,body .or-divider:after{background:var(--rim-2)}
body .stories-choice legend{color:var(--text);font-size:13px}
body .stories-choice span{min-width:64px;min-height:46px;border:1px solid var(--rim-2);border-radius:14px;background:rgba(255,255,255,.05);color:var(--text);font:700 15px var(--sans)}
body .stories-choice input:checked+span{background:var(--glow);border-color:var(--glow);color:#06110f;box-shadow:0 0 22px -4px var(--glow-55)}
body .stories-choice input:focus-visible+span{outline:3px solid var(--glow);outline-offset:3px}

/* ---- see your home: the address box as on the first screen, its list, and the photo with the outline ---- */
body .house-search>label{margin:0 0 10px 4px;color:var(--text-2);font:800 12px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase}
body .house-combo{position:relative;padding:7px;border:1px solid rgba(255,255,255,.28);border-radius:23px;
 background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
 box-shadow:0 30px 70px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.35),0 0 64px -16px var(--glow-55)}
body .house-combo::before{content:'';position:absolute;z-index:1;left:25px;top:calc(50% - 11px);width:22px;height:22px;pointer-events:none;background:var(--accent-on-light,#183f37);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat}
body #house-address{height:60px;margin:0;padding:0 16px 0 52px;text-overflow:ellipsis;border:0;border-radius:17px;background:#fff;color:#101815;font:600 16.5px/1 var(--sans);letter-spacing:-.005em;box-shadow:none}
body #house-address::placeholder{color:#69716d;font-weight:500}
body #house-address:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 75%,transparent)}
body .house-search .house-status{margin:10px 4px 0;color:var(--text-2);font-size:14px}
body .house-search .house-status:empty{margin:0}
/* The list is white, as on the first screen. */
body .house-search .house-suggestions{--brand-accent:var(--accent-on-light);margin:10px 0 0;padding:8px;border:0;border-radius:22px;background:#fff;color:#101815;box-shadow:0 40px 90px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.5);overscroll-behavior:contain}
body .house-search .house-option{display:grid;grid-template-columns:40px 1fr 20px;grid-template-areas:'pin street go' 'pin place go';align-items:center;column-gap:12px;row-gap:1px;min-height:56px;padding:8px 12px;border-radius:15px;font-family:var(--sans);line-height:1.3}
body .house-search .house-option::before{content:'';grid-area:pin;width:40px;height:40px;border-radius:12px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23243d35'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2Z'/%3E%3C/svg%3E") center/19px no-repeat,color-mix(in srgb,var(--brand-fill,#183f37) 11%,white)}
body .house-search .house-option::after{content:'→';content:'→'/'';grid-area:go;font-size:18px;font-weight:700;color:var(--accent-on-light,#183f37);opacity:0}
body .house-search .house-option b{grid-area:street;overflow:hidden;font-size:16px;font-weight:500;color:#1d2420;white-space:nowrap;text-overflow:ellipsis}
body .house-search .house-option .house-typed{font-weight:800}
body .house-search .house-option span{grid-area:place;font-size:13.5px;color:#5c6360}
body .house-search .house-option[aria-selected="true"],body .house-search .house-option:hover{background:color-mix(in srgb,var(--brand-fill,#183f37) 9%,white)}
body .house-search .house-option[aria-selected="true"]::after{opacity:1}
/* The home from above: sharp on the dark, framed in the glow, the outline drawn in the roofer's glow. */
body .house-photo-card{position:relative;margin:22px 0 0}
body .house-photo{max-width:560px;border-radius:24px;background:var(--scene,#0b1512);box-shadow:0 0 0 1px var(--glow-35),0 44px 90px -40px rgba(0,0,0,.95),0 0 90px -24px color-mix(in srgb,var(--glow) 40%,transparent)}
body .house-photo::before{content:'';position:absolute;z-index:1;left:0;right:0;top:0;height:42%;pointer-events:none;opacity:0;
 background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--glow) 18%,transparent) 80%,color-mix(in srgb,var(--glow) 70%,white));animation:dusk-scan 1.5s .35s cubic-bezier(.4,0,.2,1) backwards}
body .house-photo::after{content:'';position:absolute;z-index:1;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(125% 95% at 50% 42%,transparent 58%,rgba(3,8,9,.42));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
@keyframes dusk-scan{0%{opacity:1;transform:translateY(-100%)}85%{opacity:1}100%{opacity:0;transform:translateY(240%)}}
body .house-outline{filter:drop-shadow(0 0 5px var(--glow-55))}
body .house-outline-halo{stroke:rgba(2,6,7,.6);stroke-width:7}
body .house-outline-line{fill:color-mix(in srgb,var(--glow) 13%,transparent);stroke:var(--glow);stroke-width:3}
body .house-wait{left:14px;right:14px;top:14px;padding:10px 14px;border:1px solid var(--rim-2);border-radius:999px;background:rgba(var(--night-rgb,6,12,13),.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text);font-size:13px}
body .house-credit{padding:6px 12px 7px;background:rgba(var(--night-rgb,4,9,10),.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:rgba(255,255,255,.9);font-size:10px}
body .house-photo-card figcaption{margin:14px 0 0;color:var(--text-3);font-size:13.5px}
body .house-confirm{margin:20px 0 0;padding:22px;border:1px solid var(--glow-35);border-radius:22px;background:linear-gradient(180deg,var(--glow-10),rgba(255,255,255,.025));box-shadow:0 24px 60px -36px var(--glow-55)}
body .house-confirm p{margin:0 0 16px;font:700 17px/1.45 var(--sans);letter-spacing:-.01em;color:#fff}
body .house-actions{gap:10px}
body .house-size-line{margin:18px 0 0;padding:2px 0 2px 16px;border-left:2px solid var(--glow);color:var(--text-2);font-size:15px;line-height:1.6}
body .house-home{margin-top:18px}
body .house-home-copy{color:var(--text-2);font-size:15px}
body .house-home>label>span{color:var(--text-3);font-size:12px}
body .house-notes{margin:16px 0 0;color:var(--text-3);font-size:13px}
body .house-notes li::marker{color:var(--glow)}

/* ---- the size and the slope ---- */
body .measurement-summary{gap:24px;padding:20px 24px;border:1px solid var(--glow-35);border-radius:22px;background:linear-gradient(135deg,var(--glow-10),rgba(255,255,255,.025) 70%);box-shadow:0 24px 60px -40px var(--glow-55)}
body .measurement-summary>div>span{margin-bottom:10px;color:var(--text-3);font:800 10.5px/1.4 var(--sans);letter-spacing:.16em}
body .measurement-summary b{font:400 46px/1 var(--serif);letter-spacing:-.01em;color:#fff}
body .measurement-summary small{color:var(--text-3);font-size:13px}
body .visual-question legend,body #step-1 .visual-question legend{font:400 32px/1.08 var(--serif);letter-spacing:-.008em;color:#fff}
body .question-help{color:var(--text-3);font-size:14px}
body #step-1>.visual-question{padding:24px;border:1px solid var(--rim);border-radius:24px;background:rgba(255,255,255,.028)}
body .roof-picture-card{border:1px solid var(--rim-2);border-radius:18px;background:var(--card);box-shadow:0 20px 44px -30px rgba(0,0,0,.95);transition:border-color .2s,box-shadow .2s,transform .2s}
body .roof-picture-card:hover{border-color:var(--glow-55)}
body .roof-picture-card:has(input:checked){border-color:var(--glow);background:color-mix(in srgb,var(--glow) 11%,var(--card));box-shadow:0 0 0 1px var(--glow),0 0 36px -10px var(--glow-55)}
body .roof-picture-card:has(input:focus-visible){outline:3px solid var(--glow);outline-offset:3px}
body .roof-picture-copy b,body #step-1 .roof-picture-copy b{color:#fff;font:700 14px/1.3 var(--sans)}
body .roof-picture-copy small,body #step-1 .roof-picture-copy small{color:var(--text-3);font-size:12px}
body .pitch-helper>span{color:var(--text-3);font-size:12.5px}
body .exact-pitch{color:var(--text-2);font-size:13px}
body .exact-pitch summary{padding:12px 0;line-height:20px}
body .visual-question>.hint{font-size:12.5px}
body .address-field>label{color:var(--text)}
body .step-actions{border-top-color:var(--rim)}
body .step-actions .button{min-height:50px;font-size:15px}
body .step-actions>span{color:var(--text-3);font-size:13px}

/* ---- the satellite map and the style concept (only with a map key): the same glass ---- */
body .map-guide,body .satellite-preview-empty{border:1px solid var(--rim);border-radius:18px;background:rgba(255,255,255,.03)}
body .guide-number{background:var(--glow);color:#06110f}
body .map-guide p,body .satellite-preview-empty p,body .map-caution,body .preview-disclaimer,body .satellite-preview-footer{color:var(--text-3)}
body .map-shell,body .roof-comparison{background:var(--card);border-radius:18px}
body .map-message{background:var(--card);color:var(--text)}
body .spinner{border-color:var(--rim-2);border-top-color:var(--glow)}
body .measurement-message{color:var(--glow)}
body .studio-view{border:1px solid var(--rim);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
body .visualizer-heading h3{font:400 34px/1.05 var(--serif);color:#fff}
body .compare-modes{background:rgba(255,255,255,.05)}
body .compare-modes button{color:var(--text-3)}
body .compare-modes .selected{background:var(--glow);color:#06110f}
body .satellite-label{background:rgba(var(--night-rgb,6,12,13),.86);color:#fff}
body .future-label{background:var(--glow);color:#06110f}

/* ---- step 2: the style studio ---- */
body .manual-inspiration{position:relative;border:1px solid var(--rim);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));box-shadow:0 50px 120px -60px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.25)}
body .manual-inspiration>img{-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
body .manual-inspiration figcaption{position:relative;margin-top:-64px;padding:0 30px 30px}
body .manual-inspiration figcaption>span{color:var(--glow);font:800 11px/1.5 var(--sans);letter-spacing:.2em;text-shadow:0 1px 12px rgba(0,0,0,.8)}
body .manual-inspiration h3{margin:10px 0 12px;font:400 clamp(40px,3.6vw,58px)/.98 var(--serif);letter-spacing:-.012em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.7)}
body .manual-inspiration .manual-style-finish{margin:0 0 10px;color:var(--text);font-size:15px}
body .manual-inspiration p{color:var(--text-3);font-size:14px;line-height:1.55}
body .studio-caption>span:first-child{color:var(--glow);font-weight:800;letter-spacing:.2em}
body .studio-caption b{font:400 26px/1.1 var(--serif);letter-spacing:-.005em;color:#fff}
body .studio-caption>span:last-child{color:var(--text-3);font-size:13px}
body .material-card{border:1px solid var(--rim-2);border-radius:20px;background:var(--card);box-shadow:0 22px 50px -34px rgba(0,0,0,.95);transition:border-color .2s,box-shadow .2s}
body .material-card:hover{border-color:var(--glow-55);box-shadow:0 22px 50px -30px rgba(0,0,0,.95),0 0 30px -14px var(--glow-55)}
body .material-card:has(input:checked){border:1px solid var(--glow);background:color-mix(in srgb,var(--glow) 10%,var(--card));box-shadow:0 0 0 1px var(--glow),0 0 44px -12px var(--glow-55)}
/* The photos melt into their dark cards where they meet the words. */
body :is(.roof-picture-card>img,.material-photo>img){-webkit-mask-image:linear-gradient(#000 68%,rgba(0,0,0,.5));mask-image:linear-gradient(#000 68%,rgba(0,0,0,.5))}
body .material-info b,body #step-2 .material-info>b{color:#fff;font:800 15px/1.3 var(--sans);letter-spacing:-.01em}
body .material-info small,body #step-2 .material-info>small{color:var(--text-3);font-size:12.5px;line-height:1.5}
body .material-info .tag,body #step-2 .material-info>.tag{color:var(--glow);font:800 10.5px/1.4 var(--sans);letter-spacing:.12em}
body #step-2 .material-selected{top:10px;left:10px;padding:7px 10px;border-radius:999px;background:var(--glow);color:#06110f;font:800 10.5px/1 var(--sans);letter-spacing:.08em;box-shadow:0 6px 18px -4px rgba(0,0,0,.7),0 0 18px -4px var(--glow-55)}
body .finish-selector{margin:28px 0 22px}
body .finish-selector h3{font:400 28px/1.1 var(--serif);color:#fff}
body .finish-selector #finish-name{color:var(--text-2);font-size:14px}
body .finish-swatch{width:52px;height:52px;padding:4px;border:2px solid transparent;border-radius:50%;background:transparent;transition:border-color .2s,box-shadow .2s}
body .finish-swatch>span{border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 2px 5px rgba(255,255,255,.18),inset 0 -4px 8px rgba(0,0,0,.35)}
body .finish-swatch[aria-pressed="true"]{border-color:var(--glow);box-shadow:0 0 20px -2px var(--glow-55)}
body .finish-selector .hint{font-size:12.5px}
body .compare-open{width:100%;justify-content:space-between;min-height:54px;padding:14px 20px}
body .climate-panel{margin-top:24px;padding:26px;border:1px solid var(--rim);border-radius:24px;background:radial-gradient(120% 140% at 0 0,var(--glow-10),transparent 60%),rgba(255,255,255,.028)}
body .climate-panel-heading{gap:14px}
body .climate-panel-heading>span{width:44px;height:44px;border:1px solid var(--glow-35);background:var(--glow-10);color:var(--glow);font-size:22px;box-shadow:0 0 24px -8px var(--glow-55)}
body .climate-panel-heading .eyebrow{margin-bottom:6px;font-size:10.5px;letter-spacing:.18em}
body .climate-panel h3{font:400 30px/1.05 var(--serif);letter-spacing:-.005em;color:#fff}
body .climate-facts b{color:#fff;font:800 14px var(--sans)}
body .climate-facts p{color:var(--text-2);font-size:14px;line-height:1.65}
body .climate-question{margin:22px 0 14px;padding:16px 18px;border:1px solid var(--glow-35);border-left:3px solid var(--glow);border-radius:14px;background:var(--glow-10);color:var(--text);font-size:14px;font-weight:600}
body .fact-sources{color:var(--text-3);font-size:13px}
body .fact-sources summary{min-height:0;padding:12px 0;line-height:20px}
body .fact-sources a{padding:12px 0;color:var(--text-2);text-decoration-color:var(--glow-55)}
body .climate-footnote{color:var(--text-3);font-size:12px}
body .finish-options{border-color:var(--rim)}
body .finish-options>summary{color:#fff;font:800 17px/1.3 var(--sans);letter-spacing:-.01em}
body .finish-options>summary small{color:var(--text-3);font-size:13px}
body .extra-card{border:1px solid var(--rim-2);border-radius:20px;background:var(--card);transition:border-color .2s,box-shadow .2s}
body .extra-card:hover{border-color:var(--glow-55)}
body .extra-card>img{-webkit-mask-image:linear-gradient(90deg,#000 68%,rgba(0,0,0,.5));mask-image:linear-gradient(90deg,#000 68%,rgba(0,0,0,.5))}
body .extra-card:has(input:checked){border:1px solid var(--glow);background:color-mix(in srgb,var(--glow) 9%,var(--card));box-shadow:0 0 0 1px var(--glow),0 0 40px -14px var(--glow-55)}
body .extra-card:focus-within{outline:0}
body .extra-card:has(input:focus-visible){outline:3px solid var(--glow);outline-offset:3px}
body .extra-copy b,body .finish-options .extra-copy>b{color:#fff;font:800 15px/1.3 var(--sans);letter-spacing:-.01em}
body .extra-copy>span:not(.tag),body .finish-options .extra-copy>span:not(.tag){color:var(--text-3);font-size:13px;line-height:1.55}
body .extra-copy .tag,body .finish-options .tag{color:var(--glow);font-size:10.5px;font-weight:800;letter-spacing:.12em}
body .selection-status{color:var(--glow);font-weight:700}
body .check-indicator{border-color:var(--rim-2)}

/* ---- step 3: the budget, a moment ---- */
body .result-image{border-radius:22px;box-shadow:0 0 0 1px var(--rim-2),0 30px 70px -40px rgba(0,0,0,.95)}
body .result-top{position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;margin-top:20px;padding:36px 28px 30px;border:1px solid color-mix(in srgb,var(--glow) 45%,transparent);border-radius:28px;text-align:center;
 background:radial-gradient(90% 110% at 50% 0,color-mix(in srgb,var(--glow) 24%,transparent),transparent 68%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
 box-shadow:0 50px 110px -50px var(--glow-55),inset 0 1px 0 rgba(255,255,255,.12);animation:dusk-rise .9s cubic-bezier(.2,.8,.2,1) backwards}
body .result-top::before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.22;background:url(assets/aerial-street.svg) 58% 46%/1800px auto no-repeat;
 -webkit-mask-image:radial-gradient(70% 80% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 80% at 50% 30%,#000,transparent 75%)}
body .result-top::after{content:'';position:absolute;z-index:-1;left:50%;top:-40%;width:70%;height:90%;transform:translateX(-50%);border-radius:50%;pointer-events:none;opacity:.7;background:radial-gradient(closest-side,var(--glow-35),transparent);filter:blur(10px);animation:dusk-bloom 1.8s .2s ease-out backwards}
@keyframes dusk-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dusk-bloom{0%{opacity:0;transform:translateX(-50%) scale(.6)}40%{opacity:1}100%{opacity:.7;transform:translateX(-50%) scale(1)}}
body .result-top .eyebrow{justify-content:center;margin-bottom:8px;font-size:11px;letter-spacing:.24em}
body .quote-range{font:400 clamp(38px,5vw,64px)/1.02 var(--serif);font-size:clamp(34px,13cqi,76px);letter-spacing:-.018em;color:#fff;white-space:normal;text-wrap:balance;text-shadow:0 0 30px color-mix(in srgb,var(--glow) 50%,transparent),0 2px 0 rgba(0,0,0,.25);font-variant-numeric:lining-nums}
body .result-top>p:not(.eyebrow){margin-left:auto;margin-right:auto;max-width:34em;color:var(--text-2);font-size:14px}
body .result-top .result-finish{color:var(--glow);font-weight:700}
body .quote-facts{padding:22px 4px;border-bottom-color:var(--rim)}
body .quote-facts>div{padding:14px 16px;border:1px solid var(--rim);border-radius:16px;background:rgba(255,255,255,.03)}
body .quote-facts span{margin-bottom:6px;color:var(--text-3);font:800 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
body .quote-facts b{color:#fff;font:700 16px/1.35 var(--sans)}
body .breakdown summary{min-height:48px;align-items:center;color:#fff;font:800 15px var(--sans)}
body .breakdown summary>span{color:var(--glow)}
body .quote-line,body .total-row{border-bottom:1px solid var(--rim);color:var(--text);font-size:14px}
body .quote-line span:first-child{color:var(--text-2)}
body .total-row{border-top-color:var(--rim-2)}
body .result-cta{margin-top:22px;padding:28px 24px;border:1px solid var(--rim);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
body .result-cta h3{margin-bottom:8px;font:400 32px/1.05 var(--serif);letter-spacing:-.008em;color:#fff}
body .result-cta p{color:var(--text-2);font-size:14.5px;line-height:1.6}
body .quote-actions #booking-link{min-height:58px;font-size:16px}
body .more-options>summary{padding:12px 0;line-height:20px;color:var(--text-3);font-size:13.5px}
body .more-options .text-button{font-size:13.5px}
body .disclaimer{padding:16px 18px;border:1px solid var(--rim);border-radius:16px;background:rgba(255,255,255,.025);color:var(--text-3);font-size:12px}
body #save-status{margin:16px 2px 0;color:var(--text-3)}
body .company{color:var(--text-2);font-size:13px}
body .company span{color:var(--text-3)}
body .range-caption,body .address-note{color:var(--text-3)}

/* ---- the climate cards, the questions, the footer ---- */
body .confidence{position:relative;isolation:isolate;max-width:none;margin:clamp(40px,6vw,80px) 0 0;padding:clamp(70px,9vw,140px) 5% clamp(60px,8vw,110px)}
body .confidence::before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.2;background:url(assets/aerial-street.svg) 40% 50%/1800px auto no-repeat;
 -webkit-mask-image:radial-gradient(60% 55% at 50% 45%,#000,transparent 80%);mask-image:radial-gradient(60% 55% at 50% 45%,#000,transparent 80%)}
body .confidence::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(50% 40% at 50% 38%,var(--glow-10),transparent 75%),linear-gradient(180deg,var(--page),rgba(6,11,12,.55) 30%,rgba(6,11,12,.55) 70%,var(--page))}
body .confidence h2{font:400 clamp(48px,5.6vw,86px)/.95 var(--serif);letter-spacing:-.015em;color:#fff}
body .confidence-grid{max-width:1280px;margin:clamp(34px,4vw,56px) auto 0;gap:18px}
body .confidence-grid article{padding:28px 24px 24px;border:1px solid var(--rim);border-radius:26px;text-align:left;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 40px 90px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08)}
body .confidence-grid article>span{width:48px;height:48px;margin-bottom:22px;border:1px solid var(--glow-35);border-radius:15px;background:var(--glow-10);color:var(--glow);font-size:24px;box-shadow:0 0 26px -8px var(--glow-55)}
body .confidence-grid h3{margin-bottom:10px;font:400 28px/1.05 var(--serif);letter-spacing:-.005em;color:#fff}
body .confidence-grid p{max-width:none;margin:0 0 6px;color:var(--text-2);font-size:14.5px;line-height:1.6}
body .climate-source{display:inline-flex;align-items:center;min-height:44px;color:var(--glow);font-size:13px;text-decoration-color:var(--glow-55)}
body .faq{position:relative;isolation:isolate;gap:clamp(24px,6vw,90px);max-width:1200px;margin:0 auto clamp(60px,7vw,110px);padding:clamp(40px,6vw,90px) 25px 0;border-top:0}
/* A soft glow behind the heading, and the answers together in one glass panel. */
body .faq::before{content:'';position:absolute;z-index:-1;left:-6%;top:0;width:min(640px,90%);height:min(560px,70%);pointer-events:none;background:radial-gradient(closest-side,var(--glow-10),transparent 78%)}
body .faq h2{font:400 clamp(44px,4.6vw,70px)/.98 var(--serif);letter-spacing:-.015em;color:#fff}
body .faq>div:last-child{align-self:start;padding:4px 28px;border:1px solid var(--rim);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:0 50px 120px -60px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07)}
body .faq details{border-bottom:1px solid var(--rim)}
body .faq details:last-child{border-bottom:0}
body .faq details[open] summary{color:var(--glow)}
body .faq summary{gap:20px;min-height:68px;padding:18px 0;color:#fff;font:700 17px/1.4 var(--sans);letter-spacing:-.01em}
body .faq summary>span{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid var(--rim-2);border-radius:50%;color:var(--glow);font-size:16px;transition:transform .2s,border-color .2s,box-shadow .2s}
body .faq details[open] summary>span{border-color:var(--glow);box-shadow:0 0 18px -4px var(--glow-55)}
body .faq details p{max-width:560px;color:var(--text-2);font-size:15.5px;line-height:1.7}
body .page-footer{position:relative;isolation:isolate;max-width:none;margin:0;padding:34px 5% 44px;border-top:1px solid var(--rim);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 80%)}
body .page-footer::before{content:'';position:absolute;left:50%;top:-1px;width:min(520px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--glow),transparent);opacity:.7}
/* The page closes, faintly, on the same street at dusk it opened on. */
body .page-footer::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.14;background:url(assets/aerial-street.svg) 50% 58%/1800px auto no-repeat;
 -webkit-mask-image:linear-gradient(transparent,#000 85%);mask-image:linear-gradient(transparent,#000 85%)}
body .page-footer .brand{min-height:44px;color:#fff}
body .page-footer p,body .page-footer small,body .rc-powered,body .rc-footer-company span{color:var(--text-3)}
body .page-footer p{font-size:13px}
body .page-footer small{font-size:11px}
body .rc-footer-company{color:var(--text)}

/* ---- toasts and dialogs ---- */
body #toast{border:1px solid var(--glow-35);border-radius:16px;background:rgba(var(--night-rgb,10,18,19),.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font-size:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.9),0 0 40px -16px var(--glow-55)}
body dialog{border:1px solid var(--rim-2);border-radius:28px;background:linear-gradient(180deg,var(--dialog-top,#0e181a),var(--dialog-bottom,#091113));color:var(--text);box-shadow:0 60px 140px -40px rgba(0,0,0,.95),0 0 90px -30px var(--glow-35)}
body dialog::backdrop{background:rgba(2,6,7,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body dialog h2,body :is(.dialog-head,#tutorial) h2{font:400 clamp(34px,4vw,44px)/1.02 var(--serif);letter-spacing:-.012em;color:#fff}
body dialog .eyebrow{font-size:11px}
body #lead-gate{border:1px solid var(--rim-2);border-radius:28px}
body #lead-close{background:rgba(var(--night-rgb,6,12,13),.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body .gate-image{background:var(--card)}
body .gate-image:after{background:linear-gradient(transparent,rgba(5,10,11,.9))}
body .gate-image>span{font-weight:800;letter-spacing:.2em;font-size:10.5px}
body #lead-form{padding:44px 36px 30px}
body #lead-form h2{font-size:clamp(36px,4vw,46px);line-height:1}
body #lead-form .gate-copy{color:var(--text-2);font-size:15px}
body #lead-form>label{color:var(--text);font-size:13px}
body #lead-form>label>span{color:var(--text-3);font-size:12px}
body #lead-form .gate-consent>span{color:var(--text-2);font-size:13px;line-height:1.6}
body #lead-form .gate-consent input{-webkit-appearance:none;appearance:none;display:grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--field-line);border-radius:7px;background:var(--field);cursor:pointer;transition:background .15s,border-color .15s}
body #lead-form .gate-consent input::after{content:'';width:10px;height:6px;margin-top:-3px;border:solid #06110f;border-width:0 0 2.5px 2.5px;transform:rotate(-45deg);opacity:0}
body #lead-form .gate-consent input:checked{border-color:var(--glow);background:var(--glow);box-shadow:0 0 16px -4px var(--glow-55)}
body #lead-form .gate-consent input:checked::after{opacity:1}
body #lead-submit{min-height:56px;font-size:16px}
body #gate-demo-note{color:var(--text-3);font-size:12.5px}
body #compare-dialog .dialog-head{background:transparent}
body #compare-dialog>.hint{margin:18px 0 0}
body .favorite-grid img{border-radius:18px;box-shadow:0 0 0 1px var(--rim-2)}
body .favorite-grid h3{font:400 28px/1.05 var(--serif);color:#fff}
body .favorite-grid b{color:#fff}
body .favorite-grid p{color:var(--text-2)}
body .favorite-grid label{color:var(--text-3)}
body #tutorial h2{max-width:380px}
body .tutorial-demo svg{border-radius:16px;box-shadow:0 0 0 1px var(--rim-2)}
body .tutorial-demo>span{color:var(--text-3)}
body .tutorial-steps li{color:#fff}
body .tutorial-steps li::marker{color:var(--glow)}
body .tutorial-steps span{color:var(--text-2)}
body .skip{border-radius:12px;background:var(--glow);color:#06110f;font-weight:800}

/* With reduced motion the photo, the budget and its glow show at once, as they end. */
@media (prefers-reduced-motion:reduce){
 body .house-photo::before,body .result-top,body .result-top::after,body .step-panel{animation:none}
}

/* ---- a phone or an upright tablet ---- */
@media (max-width:1050px){
 body .panel{padding:26px}
}
@media (max-width:800px){
 body .estimator{padding:clamp(40px,10vw,64px) 3% 0}
 body .estimator-intro h2{font-size:clamp(44px,12vw,60px)}
 body .stepper{gap:4px;padding:5px;border-radius:22px}
 body .stepper button{min-height:84px;padding:12px 4px;border-radius:17px}
 body .stepper button>span{width:34px;height:34px;margin:0 auto 8px;font-size:21px}
 body .panel{padding:26px 20px;border-radius:26px}
 body :is(#step-1,#step-2,#step-3) .sectionhead h2{font-size:clamp(34px,9vw,42px)}
 /* Step 1 is one column: the slope question stands apart from the card or the size summary above it. */
 body #step-1>.visual-question{margin-top:16px}
 body :is(input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]),select,textarea):where(:not(.aerial *,.aerial-top *)){font-size:16px}
 /* The next step floats over the page as a glass bar. */
 body .step-actions{bottom:12px;margin:22px -8px 0;padding:10px;border:1px solid var(--rim-2);border-radius:22px;background:rgba(9,16,17,.88);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 18px 50px -12px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.3)}
 /* Above a preview or review note fixed to the bottom, it keeps the same gap. */
 body:has(>.rc-preview-banner,>.rc-review-bar) .step-actions{bottom:calc(var(--rc-banner-h,34px) + 10px)!important}
 body .result-panel .step-actions{margin:22px 0 0;padding:18px 0 4px;border:0;border-top:1px solid var(--rim);border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
 body .step-actions .error{margin:0 0 4px}
 /* A toast shows above that bar, not over it. */
 body #toast{bottom:100px}
 body:has(>.rc-preview-banner,>.rc-review-bar) #toast{bottom:calc(var(--rc-banner-h,34px) + 96px)!important}
 body .confidence-grid{gap:14px}
 body .faq{padding:clamp(40px,10vw,70px) 0 0;margin:0 5% 50px}
 body .page-footer{padding:30px 5% 40px}
}
@media (max-width:540px){
 body .estimator{padding-left:12px;padding-right:12px}
 body .estimator-intro{margin-bottom:24px}
 body .stepper button b{font-size:12.5px}
 body .panel{padding:24px 16px;border-radius:24px}
 body .sectionhead p:not(.eyebrow){font-size:14.5px}
 body .mode-tabs{gap:4px;padding:4px;border-radius:16px}
 body .mode-tabs button{padding:8px 6px;font-size:12.5px}
 body .manual-card{padding:20px 16px;border-radius:22px}
 body .manual-heading{align-items:flex-start;gap:14px}
 body .manual-heading>span{width:44px;height:44px;border-radius:14px;font-size:22px}
 body .manual-heading h3{font-size:25px}
 body .house-photo{border-radius:20px}
 body .house-confirm{padding:18px 16px}
 body .measurement-summary{padding:18px}
 body .measurement-summary b{font-size:40px}
 body #step-1>.visual-question{padding:18px 14px}
 body .visual-question legend,body #step-1 .visual-question legend{font-size:29px}
 /* On a phone the home from above takes the whole width of the step. */
 body .manual-card.house-card{padding:6px 0 0;border:0;background:none}
 body .manual-inspiration figcaption{margin-top:-48px;padding:0 20px 22px}
 body .climate-panel{padding:20px 16px}
 body .result-top{padding:30px 16px 26px;border-radius:24px}
 body .result-cta{padding:22px 16px}
 body .confidence{padding-left:12px;padding-right:12px}
 body .confidence-grid article{padding:24px 20px 20px}
 body .faq summary{font-size:16px}
 body .faq>div:last-child{padding:2px 18px;border-radius:24px}
 body #lead-form{padding:26px 22px 24px}
 body .quote-actions #booking-link{padding:14px 14px;font-size:15px;letter-spacing:-.015em}
 body .quote-facts{grid-template-columns:1fr;gap:8px}
 body .quote-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
 body .quote-facts span{margin:0}
 body .quote-facts b{text-align:right}
 body #compare-dialog .dialog-head{background:var(--dialog-top,#0e181a)}
}
}