/* HomeKnight fullscreen funnel — TEST variant styles (lander-split-test).
   Loaded only when PostHog assigns 'test' on /quote/roofing/. Self-hosted
   Inter — no Google Fonts. Pairs with funnel-fs.js, which replaces
   .funnel-body with .fs-root > .fs-shell.

   SELF-CONTAINED: the roofing split-test middleware strips the page's inline
   control <style> on the TEST variant so ONLY this file governs the fullscreen
   funnel (no control-CSS bleed). That means the Inter @font-face must live here
   too — it can no longer be inherited from the page. */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-var.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#FAF8F3;            /* HomeKnight parchment cream */
  --card:#FFFFFF;
  --ink:#000000;
  --muted:#6B6B6B;
  --line:#E7E1D2;
  --gold:#C1962D; --gold-600:#B0851F; --tint:#FAF3DF;
  --red:#E2473C; --red-700:#C8362C;
  --r:16px; --r-sm:12px; --pad:clamp(18px,5vw,30px);
  --label-size:1.474rem; /* question headings & zip prompt = 1.34rem x 1.10 */
  --field-label-size:calc(var(--label-size) * 0.8); /* field labels 20% smaller than headings */
  --input-size:calc(var(--label-size) * 0.85); /* inputs 15% smaller than headings */
  --w-headline:700; --w-heading:700; --w-title:700; --w-label:600; --w-input:500; --w-btn:700; /* mobile weights */
}
@media (hover:hover) and (pointer:fine){ /* desktop: ~20% lighter + original button heights */
  :root{--w-headline:700; --w-heading:600; --w-title:660; --w-label:500; --w-input:400; --w-btn:600;}
  .btn--cta{height:62px} .btn--next{height:52px}
  .fs-logo{height:54px}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{margin:0;background:var(--bg);font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
.fs-root{min-height:100vh;min-height:100dvh;background:var(--bg)}
.fs-root .funnel-header,.fs-root .funnel-foot{display:none}
.fs-shell{min-height:100vh;min-height:100svh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}

/* header: logo centred */
.fs-header{flex:0 0 auto;padding:18px var(--pad) 0;display:flex;justify-content:center;align-items:center}
.fs-logo{height:44px;width:auto;display:block}

/* progress: below logo, full width, between logo and questions */
.fs-prog{flex:0 0 auto;width:100%;height:6px;background:#E7E1D2;overflow:hidden;margin-top:14px}
.fs-prog-fill{height:100%;width:12%;background:linear-gradient(90deg,var(--gold),#D9AE4A);transition:width .45s cubic-bezier(.4,0,.2,1)}

/* main / form */
.fs-main{flex:1 1 auto;display:flex;min-height:0;width:100%;max-width:560px;margin:0 auto}
.fs-form{flex:1;display:flex;flex-direction:column;min-height:0;width:100%}
.fs-card{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(18px,4.5vw,30px) var(--pad) 10px;display:flex;flex-direction:column}
.fs-host{flex:1 1 auto;display:flex;flex-direction:column}
.fs-slide{width:100%;padding-top:clamp(16px,11vh,96px)}
.fs-slide--zip{padding-top:clamp(10px,2.5vh,20px)}
.fs-slide--tall{padding-top:clamp(12px,3.5vh,34px)}
.fs-slide--center{padding-top:0;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.fs-slide--q{padding-top:clamp(16px,5vh,42px)}
.fs-slide--q2{padding-top:clamp(34px,9vh,80px)}

/* headline */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.qh-line{text-align:center;font-weight:var(--w-title);letter-spacing:-.02em;font-size:var(--label-size);line-height:1.18;color:var(--ink);margin:0;text-transform:capitalize}
@media (hover:hover) and (pointer:fine){.qh-line{font-size:1.9rem}}
.qh-sub{text-align:center;color:var(--muted);font-size:15px;margin:0 0 4px}

/* question */
/* v269: the geo headline moved off the (deleted) ZIP slide onto the first QUESTION
   slide. .zip-label used to supply the gap beneath it via its own margin-top, so
   question slides need that spacing declared explicitly. Same clamp for parity. */
.fs-slide--q>.quote-headline,.fs-slide--q2>.quote-headline{margin:0 0 clamp(32px,7vw,46px)}
.quiz-q{display:flex;flex-direction:column}
.q-title{font-weight:var(--w-title);letter-spacing:-.02em;color:var(--ink);font-size:var(--label-size);line-height:1.2;margin:2px 0 4px}

/* choices = white cards on cream */
.choices{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.choice{display:flex;align-items:center;gap:14px;width:100%;min-height:70px;padding:15px 18px;background:var(--card);border:2px solid #DCD3BE;border-radius:var(--r);color:var(--ink);font-size:18px;font-weight:var(--w-label);cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;box-shadow:0 2px 4px rgba(26,40,72,.07),0 8px 18px rgba(26,40,72,.10);transition:border-color .15s,background .12s,box-shadow .12s,transform .08s}
@media(hover:hover){.choice:hover{border-color:#D8C58A;box-shadow:0 10px 24px rgba(26,40,72,.14);transform:translateY(-1px)}}
.choice:active{transform:scale(.975);background:#F4EFE3;box-shadow:0 1px 3px rgba(26,40,72,.12)}
.ch-ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#F2ECDD;color:var(--ink);transition:background .15s,color .15s}
.ch-ic svg{width:24px;height:24px}
.choice-label{flex:1 1 auto}
.choice-arrow{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:#BCB196;transition:color .15s,transform .15s}
.choice-arrow svg{width:22px;height:22px}
.choice.selected{border-color:var(--gold);background:var(--tint);box-shadow:0 4px 16px rgba(193,150,45,.18)}
.choice.selected .ch-ic{background:var(--gold);color:#fff}
.choice.selected .choice-arrow{color:var(--gold)}
.choice.confirm{border-color:var(--gold);background:var(--gold);color:#fff;animation:chPop .2s ease}
.choice.confirm .ch-ic{background:rgba(255,255,255,.24);color:#fff}
.choice.confirm .choice-arrow{color:#fff}
@keyframes chPop{0%{transform:scale(1)}45%{transform:scale(1.025)}100%{transform:scale(1)}}

/* fields */
.field{display:flex;flex-direction:column;margin-top:16px}
/* v291 REVEAL FIX. #wrap-zip and #wrap-email carry the `hidden` attribute AND the
   .field class above. `hidden` only works via the UA stylesheet's
   [hidden]{display:none}, and an AUTHOR rule beats a UA rule regardless of
   specificity -- so .field's display:flex won and both fields rendered from the
   start. The JS was always correct; nothing showed for it. */
[hidden]{display:none}
.zip-label{display:block;text-align:center;font-weight:var(--w-title);font-size:var(--label-size);color:#000;margin:clamp(32px,7vw,46px) 0 0}
.field-row{display:flex;gap:12px;margin-top:4px}
.field-row .field{flex:1}
.field label{display:block;font-size:var(--field-label-size);font-weight:var(--w-label);color:#000;margin-bottom:7px}
.field input{width:100%;height:60px;padding:0 16px;font-size:var(--input-size);font-weight:var(--w-input);color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:#A9A290;font-weight:400}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(193,150,45,.16)}
.reveal{animation:reveal .28s ease}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.field-err{color:var(--red);font-size:13px;font-weight:600;margin-top:7px}

/* zip field with check in the box */
.zip-wrap{position:relative;margin-top:10px}
.zip-wrap input{width:100%;height:64px;padding:0 18px;font-size:var(--input-size);font-weight:var(--w-input);letter-spacing:.04em;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.zip-wrap input::placeholder{color:#A9A290;font-weight:500;letter-spacing:normal}
.zip-wrap input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(193,150,45,.16)}
.zip-check{position:absolute;right:16px;top:50%;transform:translateY(-50%) scale(.6);opacity:0;width:30px;height:30px;border-radius:99px;background:#1FA45C;display:flex;align-items:center;justify-content:center;transition:opacity .2s,transform .2s}
.zip-check svg{width:17px;height:17px;stroke:#fff}
.zip-check.show{opacity:1;transform:translateY(-50%) scale(1)}
.field .zip-wrap{margin-top:0}
.field .zip-wrap input{height:60px;letter-spacing:.02em}

/* phone */
.phone-wrap{display:flex;align-items:stretch}
.phone-prefix{display:flex;align-items:center;gap:7px;padding:0 12px;border:1.5px solid var(--line);border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm);background:#FBF8F0;font-weight:600;color:var(--ink);font-size:16px}
.us-flag{border-radius:2px;display:block}
.phone-wrap input{border-radius:0 var(--r-sm) var(--r-sm) 0}

/* trust (slide 1 only) — original landing-page styling, centered */
.quote-trust{text-align:center;margin-top:22px;padding-top:15px;border-top:1px solid var(--line);color:#54585f;font-weight:600;line-height:1.3;font-size:clamp(11px,calc(4.221vw - 4.16px),16px);white-space:nowrap}
.quote-trust .qt-rate{display:inline-flex;align-items:center;gap:.45em;vertical-align:middle}
.quote-trust .qt-faces{display:inline-flex}
.quote-trust .qt-face{width:1.8em;height:1.8em;border-radius:50%;border:2px solid #fff;margin-left:-.6em;overflow:hidden;background:#dfe3ea;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.quote-trust .qt-face:first-child{margin-left:0}
.quote-trust .qt-face img{width:100%;height:100%;object-fit:cover;display:block}
.quote-trust .qt-stars{color:var(--gold);letter-spacing:1.5px;white-space:nowrap}
.quote-trust .qt-text{color:#2A2E36}
.quote-trust .qt-ticks{display:block;margin-top:8px}
.quote-trust .qt-quote{white-space:normal;font-style:italic;font-weight:500;color:#54585f;line-height:1.35;max-width:30em;margin:6px auto 0;display:block}

/* buttons: red, faded when not ready, solid when ready */
.fs-actions{margin-top:clamp(16px,4vh,30px)}
.fs-actions--next{display:flex;justify-content:center}
.btn{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;font-weight:var(--w-btn);letter-spacing:-.01em;color:#fff;background:linear-gradient(180deg,var(--red),var(--red-700));opacity:.42;transition:opacity .18s,box-shadow .18s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn.is-ready{opacity:1;box-shadow:0 8px 22px -8px rgba(226,71,60,.55)}
.btn--cta{width:100%;height:70px;padding:0 22px;border-radius:14px;font-size:19.5px}
.btn--next{height:58px;padding:0 36px;border-radius:13px;font-size:18px}
.btn svg{width:20px;height:20px}

/* tcpa */
.tcpa{font-size:11px;line-height:1.45;color:var(--muted);margin:22px 0 0;text-align:center}
.tcpa a{color:var(--muted);text-decoration:underline}

/* end screens */
.quiz-done{text-align:center;padding:30px 8px;display:flex;flex-direction:column;align-items:center;gap:14px}
.quiz-done h2{font-size:24px;font-weight:800;color:var(--ink);margin:0}
.quiz-done p{color:var(--muted);font-size:15.5px;line-height:1.5;margin:0;max-width:30ch}
.check,.dq-mark{width:64px;height:64px;border-radius:99px;display:flex;align-items:center;justify-content:center}
.check{background:var(--tint);color:var(--gold)}
.check svg{width:34px;height:34px}
.dq-mark{background:#EEE9DC;color:var(--muted)}
.dq-mark svg{width:34px;height:34px}
.btn--ghost{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 22px;border:1.5px solid var(--line);border-radius:12px;color:var(--ink);font-weight:700;text-decoration:none;font-size:15px;background:none;cursor:pointer;font-family:inherit;opacity:1}

/* ===== Field redesign (v173): floating labels + phone/email icons + larger Places dropdown ===== */
:root{ --mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,monospace; }

/* floating labels — all .fl text fields */
.fl .fl-box{position:relative}
.fl .fl-input{height:64px;padding:22px 16px 6px}
.fl .fl-box label{position:absolute;left:16px;top:50%;transform:translateY(-50%);margin:0;padding:0;font-size:var(--input-size);font-weight:var(--w-input);color:#8A8474;pointer-events:none;transition:top .14s ease,font-size .14s ease,color .14s ease,transform .14s ease,font-weight .14s ease}
.fl .fl-input:focus + label,.fl .fl-input:not(:placeholder-shown) + label{top:11px;transform:none;font-size:12.5px;font-weight:600;color:var(--gold-600)}

/* email field — gold mail icon on the left */
.fl-mail .fl-box{position:relative}
.fl-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:flex;pointer-events:none;z-index:2;color:var(--gold)}
.fl-ic svg{width:22px;height:22px;display:block}
.fl-mail .fl-input{padding-left:48px}
.fl-mail .fl-box label{left:48px}

/* phone field — clean lock + inline +1 + on-focus mask */
.fl-phone .fl-box{position:relative;padding:0}
.pf-lock{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;pointer-events:none;z-index:3}
.pf-lock svg{width:24px;height:24px;display:block}
.fl-phone .fl-box label{left:50px}
.fl-phone .pf-input{font-family:inherit;font-weight:500;color:transparent;caret-color:var(--ink);padding-left:calc(50px + 2.5ch)}
.fl-phone .pf-input::selection{background:rgba(193,150,45,.25)}
.pf-cc,.pf-render{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-family:inherit;font-size:var(--input-size);font-weight:500;pointer-events:none;opacity:0;transition:opacity .12s ease;padding-top:15px;white-space:pre;z-index:3}
.pf-cc{left:50px;color:var(--ink)}
.pf-render{left:calc(50px + 2.5ch);color:var(--ink)}
.pf-box.active .pf-cc,.pf-box.active .pf-render{opacity:1}
.pf-render .g-d{color:var(--ink);font-weight:500}
.pf-render .g-u{color:#BDB8A8}
.pf-render .g-f{color:#6f6a5c}
.qh-sub--left{text-align:left;margin:6px 0 2px}

/* Google Places autocomplete — larger touch targets, HomeKnight styling */
.pac-container{z-index:99999;margin-top:8px;background:#fff;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 18px 44px rgba(26,40,72,.18);font-family:'Inter',-apple-system,sans-serif;padding:0}
.pac-item{padding:13px 14px;border-top:1px solid var(--line);border-radius:0;font-size:14px;line-height:1.4;color:#54585f;cursor:pointer}
.pac-item:first-child{border-top:0}
.pac-item:hover,.pac-item-selected{background:var(--tint)}
.pac-icon{width:0;height:0;overflow:hidden;margin:0;background:none!important}
.pac-item-query{font-size:14px;font-weight:600;color:var(--ink)}
.pac-matched{font-weight:700;color:var(--ink)}

/* ===== EMBEDDED-FORM REDESIGN =====
   Type scale, radio/choice styling, inputs, buttons and trust row. The shell
   chrome itself is full-screen: see "FULL-SCREEN SHELL" at the bottom of this
   file, which layers on top of the base .fs-root/.fs-shell rules.
   HISTORY (v281): funnel-layout-v1 concluded — the full-screen arm won and shipped
   to 100%. The card layout that used to live here (navy page, 440px cream panel,
   radius, shadow) is GONE, along with the per-arm attribute selector it was scoped
   to and the edge middleware that wrote that attribute. */
/* typed input text: clearly smaller than the question titles (was ~1.25rem) */
:root{--input-size:1.16rem}
.fs-logo{height:46px}
/* v297: progress bar sits BELOW the logo (logo -> bar -> question), matching the
   reference layout. It used to be hoisted above the header with order:-1; that is
   removed so the bar falls in DOM order (header, then .fs-prog). The bar stays
   full-bleed edge-to-edge because .fs-prog is a direct child of the .fs-shell flex
   column and carries no horizontal padding -- only the logo inside .fs-header is
   centred. Do NOT reintroduce order:-1. */
.fs-prog{margin-top:13px}
/* mobile: headline reduced (fits 3 lines); "Enter ZIP"/question titles unified */
.qh-line{font-size:1.5rem;line-height:1.2}
.zip-label,.q-title{font-size:1.36rem;line-height:1.2}
/* choices: radio cards, back to original height (64px) */
.ch-ic{display:none}
.choices{gap:9px;margin-top:14px}
/* v291: option outline gold in both states. Selection is now carried by the
   background tint and the checkmark rather than by the border colour. */
.choice{min-height:64px;padding:15px 16px;gap:12px;border-width:1.5px;border-color:rgba(193,150,45,.3);border-radius:13px;box-shadow:0 1px 2px rgba(26,40,72,.05);font-size:var(--input-size)}
.choice.selected,.choice.confirm{border-color:var(--gold);background:var(--card);color:var(--ink)}
.choice-arrow{position:relative;width:22px;height:22px;border:2px solid #C6C2B4;border-radius:50%;background:#fff}
.choice-arrow svg{display:none}
.choice.selected .choice-arrow,.choice.confirm .choice-arrow{border-color:var(--gold)}
/* v291: checkmark instead of a filled dot. Two borders on a rotated box --
   no extra markup, so showDqError() and the existing selectors still apply. */
.choice.selected .choice-arrow::after,.choice.confirm .choice-arrow::after{content:"";width:5px;height:9px;border:solid var(--gold);border-width:0 2.5px 2.5px 0;border-radius:0;background:none;transform:rotate(45deg);margin-top:-2px}
/* text inputs stay at their original height (64px, from base) */
/* field text: typed near-black; darker resting labels + placeholders/mask for legibility (text fields only, not radios) */
.fl .fl-input:not(.pf-input),.zip-wrap input{color:#1a1a1a}
.pf-render .g-d,.pf-render .g-f,.pf-cc{color:#1a1a1a}
.fl .fl-box label{color:#5f5a4b}
.field input::placeholder,.zip-wrap input::placeholder{color:#5f5a4b}
.pf-render .g-u{color:#6b6658}
.fl .fl-input{padding-top:22px;padding-bottom:6px}
.fl .fl-input:focus + label,.fl .fl-input:not(:placeholder-shown) + label{top:11px;font-size:12.5px}
.field input,.zip-wrap input{border-radius:13px}
/* button (unchanged: 56 / 60) */
.fs-actions{margin-top:16px}
.fs-actions--next{display:block}
.btn--next{width:100%;height:64px;padding:0;border-radius:13px}
.btn--cta{height:64px;border-radius:13px}
/* trust: double the space above it, black text */
.quote-trust{margin:32px 0 0;padding:13px 0 15px}
.quote-trust .qt-text{color:#000}
@media (min-width:760px){
  :root{--w-title:660;--w-heading:600;--w-label:500;--w-input:400;--w-btn:600;--w-headline:700}
  /* desktop: whole heading block ~15% smaller; zip-label unified with q-title */
  .qh-line{font-size:1.6rem}
  .zip-label,.q-title{font-size:1.3rem}
  .zip-label{margin-top:28px}
  .fs-logo{height:55px}
  .choice{min-height:64px}
  .btn--next,.btn--cta{height:64px}
  /* keep the trust quote on a single line on desktop */
  .quote-trust .qt-quote{font-size:12.65px;white-space:normal;max-width:30em}
}

/* mis-tapped DQ answer: red outline + inline message (stays put, does not advance) */
.choice.selected.dq,.choice.confirm.dq,.choice.dq{border-color:#E2473C;background:#FDECEA;color:var(--ink);box-shadow:0 0 0 1px #E2473C}
.choice.dq .choice-arrow{border-color:#E2473C}
.choice.dq .choice-arrow::after{background:none;border-color:#E2473C}
.choice-dq-msg{color:#C8362C;font-size:.92rem;font-weight:600;text-align:center;line-height:1.4;margin-top:14px}


/* ===== FULL-SCREEN SHELL =====
   Inherits the base layer: the shell is a 100dvh flex column and .fs-card scrolls.
   These rules must stay AFTER the redesign block above — they win on source order,
   not specificity, now that the per-arm prefix is gone. */

/* Page tint: #EEF2F9, the same pale-navy as .section--parchment ("What We Help With")
   on the homeowner homepage — so the white (var(--card)) choice cards read exactly
   like the vertical cards do there. Applied to body too, so iOS overscroll doesn't
   flash the base cream past the top/bottom of the shell. */
body,
.fs-root,
.fs-shell{background:#EEF2F9}

.fs-header{padding:20px var(--pad) 0}
/* content column never runs edge-to-edge on a phone */
.fs-card{padding-left:max(var(--pad),20px);padding-right:max(var(--pad),20px);padding-bottom:max(14px,env(safe-area-inset-bottom))}
.fs-slide,
.fs-slide--tall,
.fs-slide--q,
.fs-slide--q2{padding-top:clamp(10px,2.5vh,28px)}

/* FIRST SLIDE — no longer special-cased (v297).
   It used to be pulled up tight under the logo (.fs-card.is-first padding-top:4px and
   .fs-slide--first padding-top:0) because the logo sat directly above it with nothing
   between. Now the progress bar sits between them, and the tightening left the headline
   noticeably closer to the bar than every other slide's question is -- ~12px against the
   ~38px the standard rules give. Both overrides are removed so the first slide inherits
   the same .fs-card and .fs-slide padding as the rest of the funnel and the gap under the
   bar is identical on every step.
   The .is-first and .fs-slide--first classes are still applied by render(); they are kept
   as styling hooks. Do NOT re-add a padding-top override here without also checking the
   first slide against a later one side by side. */

/* Trust row: a FIXED gap below the CTA rather than pinned to the bottom of the
   viewport. .fs-host must stop growing or flex pushes the trust row down to the
   bottom edge and the gap becomes viewport-height-dependent. */
.fs-host{flex:0 0 auto}
.quote-trust{margin:32px 0 6px}

@media (min-width:760px){
  .fs-card{padding-top:clamp(18px,4vh,52px)}
}