/* PickedPros landing preview, round 4.
   Layout: mobile is a centred call hero, a soft band holding the quote form, then long-form job sections;
   desktop keeps the call card sticky on the left for the whole page while the form and sections scroll on the right.
   One family (Plus Jakarta Sans), slate text on white, one strong blue for every action, green only for status. */
:root{
  color-scheme:light;
  --bg:#ffffff;--soft:#f3f6fb;--soft-2:#e8eef8;
  --ink:#0c1526;--text:#3b4659;--muted:#687386;--line:#e2e7ef;--line-2:#cdd6e3;
  --blue:#1f5eff;--blue-hover:#184ce0;--blue-press:#1440bd;--blue-tint:#eef3ff;--blue-line:#c4d4ff;
  --star:#f5b301;--green:#16a34a;--green-tint:#e9f7ef;--green-ink:#14532d;
  --red:#d92d20;--red-tint:#fef1ef;--red-line:#f6c9c4;--amber-ink:#7a4b00;--amber-tint:#fff6df;--amber-line:#f2dca5;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r-lg:20px;--r:14px;--r-sm:10px;
  --shadow:0 1px 2px rgb(12 21 38/.05),0 18px 40px -12px rgb(12 21 38/.16);
  --ease:cubic-bezier(.2,.7,.2,1);
  --bar-h:0px;
  --header-h:67px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px;scroll-padding-bottom:calc(var(--bar-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--font);-webkit-font-smoothing:antialiased;padding-bottom:var(--bar-h)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{color:var(--ink);font-weight:800;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
a{color:var(--blue)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.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}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.icon{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:20px}

/* ---------- Partner preview strip (public partner page only) ---------- */
.partner-strip{background:var(--ink);color:#dbe3ef;font-size:13px;line-height:1.35;padding:7px 16px;text-align:center}
.partner-strip a{color:#fff;font-weight:700;margin-left:4px}

/* ---------- Header ---------- */
.site-header{background:var(--bg);border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;height:66px}
.wordmark{font:800 23px/1 var(--font);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.wordmark span{color:var(--blue)}
.header-call{display:grid;justify-items:end;gap:5px;text-decoration:none;line-height:1}
.hc-top{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.hc-num{display:inline-flex;align-items:center;gap:6px;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.hc-num .icon{color:var(--blue);font-size:15px}
.avail-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.avail-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--green);opacity:0;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:.6}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}

/* ---------- Layout ---------- */
.layout{display:block}
.main-col,.hero-col{min-width:0}

/* ---------- Hero ---------- */
.hero{margin-inline:-20px;padding:20px 24px 34px;text-align:center;background:linear-gradient(180deg,#fff 0%,var(--soft) 100%)}
/* The job photo with the headline on a dark fade across its foot. */
/* The photo fills the top, left and right of the hero, with no margin inside it. */
.hero-media{position:relative;margin:-20px -24px 0;aspect-ratio:16/11;overflow:hidden;background:#1d2533;display:flex;align-items:flex-end}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(8 12 20/0) 30%,rgb(8 12 20/.45) 58%,rgb(8 12 20/.86) 100%)}
.hero h1{position:relative;z-index:1;width:100%;padding:0 16px 18px;color:#fff;font-size:clamp(26px,7.4vw,32px);line-height:1.12;text-shadow:0 2px 14px rgb(0 0 0/.35)}
.hero-sub{margin-top:18px;font-size:18px;line-height:1.6;color:var(--text);text-wrap:balance}
.benefits{margin:26px auto 0;display:inline-grid;gap:14px;text-align:left}
.benefits li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.4;font-weight:600;color:var(--ink)}
.benefits .tick{color:var(--blue);font-size:20px;line-height:1;margin-top:1px;display:flex}
.hero-actions{margin-top:28px;display:grid;gap:12px}
.call-note{font-size:12.5px;line-height:1.5;color:var(--muted);max-width:40ch;margin-inline:auto}
.hero-status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--muted)}
.hero-status:empty{display:none}
.hero-status.is-done{color:var(--green)}
.is-checking{opacity:.45;pointer-events:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--r);font:800 17px/1.15 var(--font);letter-spacing:-.01em;text-decoration:none;min-height:56px;padding:15px 24px;transition:background-color .15s,transform .12s,box-shadow .15s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px -10px rgb(31 94 255/.65)}
.btn-primary:active{background:var(--blue-press)}
.btn-call{width:100%;min-height:62px;font-size:18.5px}
.btn-call .icon{font-size:22px}
.btn-block{width:100%}
.btn-ghost,.btn-secondary{background:var(--bg);color:var(--ink);border:1.5px solid var(--line-2)}
.btn-white{background:#fff;color:var(--blue)}
.btn-outline-white{background:transparent;color:#fff;border:1.5px solid rgb(255 255 255/.55)}
.btn-quiet{background:none;border:0;color:var(--blue);font-weight:700;font-size:15.5px;padding:8px 0;min-height:44px;display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-underline-offset:3px}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn[aria-disabled="true"]{opacity:.62;box-shadow:none}
@media (hover:hover){
  .btn-primary:hover{background:var(--blue-hover)}
  .btn-ghost:hover,.btn-secondary:hover{border-color:var(--blue);color:var(--blue)}
  .btn-white:hover{background:var(--blue-tint)}
  .btn-outline-white:hover{border-color:#fff;background:rgb(255 255 255/.08)}
  .option:hover{border-color:var(--blue-line)}
  .faq-toggle:hover{color:var(--blue)}
}

/* ---------- Form band and card ---------- */
.form-band{margin-inline:-20px;padding:8px 16px 44px;background:var(--soft)}
/* Matching and later steps fill the screen, so the footer starts below it. */
body.focus .form-band{min-height:calc(100svh - 72px);padding-top:16px}
.quote-card{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;scroll-margin-top:16px}
.quote-card:focus{outline:none}
.card-inner{padding:30px 22px 32px}
.form-title{font-size:27px;line-height:1.2;margin-bottom:26px;outline:none}
.form-title .ft-phone{display:none}
.card-head{margin-bottom:22px}
.card-head h2{font-size:26px;line-height:1.2;outline:none}
.stage{animation:stage-in .4s var(--ease) both}
@keyframes stage-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.field{display:grid;gap:10px;margin-bottom:28px}
.field>label,.q-label{font-weight:700;font-size:16.5px;line-height:1.35;color:var(--ink)}
.q-help{font-size:14.5px;color:var(--muted);line-height:1.5}
.input{width:100%;min-height:58px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;padding:14px 16px;font-size:17px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:#9aa3b2}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgb(31 94 255/.14)}
.input[aria-invalid="true"]{border-color:var(--red)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23687386' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
textarea.input{min-height:110px;resize:vertical}
.field-error{display:flex;gap:7px;align-items:flex-start;color:var(--red);font-size:14.5px;font-weight:600;line-height:1.4}
.field-error .icon{margin-top:3px}
.pp-contact-hint{font-size:14.5px!important;line-height:1.45;margin:0!important;padding:10px 12px;border-radius:10px}
.pp-contact-hint[data-state="error"]{color:#8f1d14;background:var(--red-tint)}
.pp-contact-hint[data-state="suggestion"]{color:var(--blue-press);background:var(--blue-tint)}
.pp-contact-hint[data-state="warning"]{color:var(--amber-ink);background:var(--amber-tint)}
.pp-contact-hint-fix{font-weight:700!important;min-height:32px}

/* ZIP */
.zip-wrap{position:relative}
.zip-wrap .pin{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:21px;display:flex;pointer-events:none}
.zip-input{padding-left:48px;min-height:62px;font-size:21px;font-weight:700;letter-spacing:.06em}
.zip-input::placeholder{letter-spacing:0;font-weight:500;font-size:17px}
.zip-status{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:26px;height:26px}
.spinner{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--blue);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.zip-ok{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;animation:pop .35s var(--ease) both}
.zip-ok svg{width:14px;height:14px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.place{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.place.show{grid-template-rows:1fr}
.place>div{overflow:hidden}
.place-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--green-tint);color:var(--green-ink);font-size:15.5px;line-height:1.35;opacity:0;transform:translateY(-4px);transition:opacity .35s var(--ease) .08s,transform .35s var(--ease) .08s}
.place.show .place-row{opacity:1;transform:none}
.place-row .icon{font-size:19px;color:var(--green)}
.place-row strong{font-weight:800}
.place-row.neutral{background:var(--soft);color:var(--text)}
.place-row.neutral .icon{color:var(--muted)}

/* Questions and options */
.q{margin-bottom:28px}
.q-head{display:grid;gap:4px;margin-bottom:14px}
.options{display:grid;gap:10px}
.option{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:58px;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-weight:600;font-size:16.5px;line-height:1.3;color:var(--ink);transition:border-color .15s,background-color .15s,box-shadow .15s}
/* Choices are plain buttons: the selected one has the blue border and tint (no check mark). */
.option[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-tint);box-shadow:inset 0 0 0 1px var(--blue)}
/* Phones: one row per choice, a small photo on the left and the words on the right (as the live form). */
.options.photo .option{gap:14px;padding:8px 16px 8px 8px;min-height:74px}
.options.photo .option img{width:64px;height:58px;flex:none;object-fit:cover;border-radius:8px;background:var(--soft)}
.options.photo .option.text-only{padding:12px 16px;min-height:58px}
.options.seg{grid-template-columns:1fr}
/* Two or more trailing text-only choices after photo choices share one row in equal widths (round 13). */
.options .text-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:inherit}
.options .text-row .option.text-only{padding-inline:12px}
.followups{margin:0}
.card-actions{display:grid;gap:14px;margin-top:8px}
.card-note{font-size:14.5px;color:var(--muted);text-align:center;text-wrap:balance}
.form-alert{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:13px 15px;font-size:15px;line-height:1.45;margin-bottom:18px}
.form-alert .icon{font-size:19px;margin-top:1px}
.form-alert.bad{background:var(--red-tint);color:#8f1d14;border:1px solid var(--red-line)}
.form-alert.warn{background:var(--amber-tint);color:var(--amber-ink);border:1px solid var(--amber-line)}
.form-alert.info{background:var(--blue-tint);color:var(--blue-press);border:1px solid var(--blue-line)}
.form-alert.ok{background:var(--green-tint);color:var(--green-ink)}
.recap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--soft);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600;color:var(--text);max-width:100%}
.back-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;min-height:40px;font-weight:700;font-size:15px;color:var(--blue);margin:-8px 0 10px}

/* Matching */
.matching{text-align:center;padding:10px 0 4px}
.matching h2{font-size:25px}
.matching p{color:var(--text);margin-top:10px;font-size:17px}
/* The ZIP-area map with the pulsing pin on its centre (the ZIP, never the house). */
.match-map{position:relative;margin:4px 0 22px;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--soft);display:grid;place-items:center}
.match-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease)}
.match-map img.is-loaded{opacity:1}
.radar{position:relative;width:104px;height:104px;display:grid;place-items:center}
.radar::before,.radar::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue-line);animation:radar 2.4s var(--ease) infinite}
.radar::after{animation-delay:1.2s}
@keyframes radar{0%{transform:scale(.45);opacity:.9}100%{transform:scale(1.15);opacity:0}}
.radar .core{position:relative;width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:25px;box-shadow:0 10px 24px -8px rgb(31 94 255/.7)}
.match-bar{width:100%;height:8px;border-radius:8px;background:var(--soft-2);overflow:hidden;margin:24px auto 6px;max-width:300px}
.match-bar span{display:block;height:100%;width:0;border-radius:inherit;background:var(--blue)}
.matching.is-found .radar::before,.matching.is-found .radar::after{animation:none;opacity:0}
.matching.is-found .core{background:var(--green);box-shadow:0 10px 24px -8px rgb(22 163 74/.6);transition:background .25s}

/* Results */
.result{text-align:center;padding:4px 0}
.result-icon{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:30px}
.result-icon.ok{background:var(--green-tint);color:var(--green)}
.result-icon.neutral{background:var(--soft);color:var(--text)}
.result-icon.bad{background:var(--red-tint);color:var(--red)}
.result h2{font-size:25px}
.result>p{margin-top:10px;color:var(--text)}
.result .card-actions{margin-top:22px;text-align:left}
.next-steps{text-align:left;margin-top:22px;display:grid;gap:16px;counter-reset:n}
.next-steps li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;font-size:16px;line-height:1.55;color:var(--text)}
.next-steps li::before{counter-increment:n;content:counter(n);width:32px;height:32px;border-radius:50%;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;font:800 15px/1 var(--font)}
.next-steps strong{color:var(--ink);display:block}
.draw-check path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.match-banner{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--green-tint);color:var(--green-ink);font-size:15.5px;font-weight:700;margin-bottom:22px;animation:stage-in .45s var(--ease) both}
.match-banner .icon{color:var(--green);font-size:19px}

/* Contact */
.grid-2{display:grid;grid-template-columns:1fr;gap:0 14px}
.grid-2.pair{grid-template-columns:1fr}
[data-contact-form] .field{gap:8px;margin-bottom:18px;align-content:start}
[data-contact-form] .field>div:empty{display:none}
.section-label{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:4px 0 4px}
.section-note{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.address-block{border-top:1px solid var(--line);padding-top:22px;margin-top:6px}
.address-block.needs-more{animation:stage-in .45s var(--ease) both}
.addr-wrap{position:relative}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;background:#fff;border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow);padding:6px;max-height:280px;overflow:auto}
.suggest [role="option"]{display:flex;gap:10px;align-items:center;padding:12px;border-radius:10px;font-size:15.5px;line-height:1.35;cursor:pointer;color:var(--ink)}
.suggest [role="option"] .icon{color:var(--muted)}
.suggest [role="option"][aria-selected="true"]{background:var(--blue-tint)}
.suggest .suggest-foot{font-size:13px;color:var(--muted);padding:8px 12px 4px;border-top:1px solid var(--line);margin-top:4px}
.consent{border:1.5px solid var(--line);border-radius:14px;padding:16px;background:var(--soft);margin:8px 0 18px;transition:border-color .2s}
.consent.need{border-color:var(--red)}
.consent label{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;cursor:pointer}
.consent input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--blue)}
.consent-text{font-size:13px;line-height:1.55;color:var(--text)}
.consent-text a,.consent-text button{color:var(--blue);font:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.verify{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text);margin:-6px 0 14px}
.verify .spinner{width:16px;height:16px;border-width:2px}
.call-alt{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:15.5px;color:var(--text)}
.call-alt a{font-weight:800;text-decoration:none;display:inline-flex;gap:8px;align-items:center;color:var(--ink);min-height:44px}
.call-alt a .icon{color:var(--blue)}
.btn .btn-spin{width:19px;height:19px;border-radius:50%;border:2.5px solid rgb(255 255 255/.45);border-top-color:#fff;animation:spin .8s linear infinite}
.widget-frame{border:1.5px dashed var(--blue-line);border-radius:14px;background:var(--blue-tint);min-height:220px;display:grid;place-items:center;text-align:center;padding:22px;font-size:15px;color:var(--blue-press)}

/* ---------- Long-form sections ---------- */
.section{padding-top:56px}
.section h2{font-size:30px;line-height:1.18}
.section-intro{margin-top:14px;font-size:18px;line-height:1.7;color:var(--text);max-width:62ch}
.numbered{margin-top:22px;counter-reset:num}
.numbered li{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.numbered li:first-child{padding-top:6px}
.numbered li::before{counter-increment:num;content:counter(num) ".";grid-row:1;color:var(--blue);font-weight:800;font-size:18px;line-height:1.4}
.numbered h3{font-size:18.5px;letter-spacing:-.015em;line-height:1.4;grid-column:2}
.numbered p{grid-column:2;font-size:17px;line-height:1.65;color:var(--text)}
.numbered.compact li{padding:16px 0}
.callout{margin-top:26px;padding:22px 20px;border-radius:var(--r);background:var(--soft)}
.callout p{font-size:17px;line-height:1.65;color:var(--text)}
.callout strong{color:var(--ink)}
.callout a{color:var(--blue);font-weight:800;white-space:nowrap}
.section-photo{margin-top:26px}
.section-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)}
.checklist{margin-top:18px;display:grid}
.checklist li{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:600;color:var(--ink)}
.checklist .icon{color:var(--blue);font-size:19px}
.problems{margin-top:24px;display:grid;gap:22px}
.problems div{display:grid;gap:6px}
.problems dt{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.015em;display:flex;align-items:center;gap:10px}
.problems dt::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--blue);flex:none}
.problems dd{font-size:17px;line-height:1.65;color:var(--text);padding-left:18px}
.section-actions{display:grid;gap:12px;margin-top:30px}
.faqs{margin-top:18px;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq-h{font:inherit;margin:0}
.faq-toggle{width:100%;border:0;background:none;text-align:left;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:17.5px;font-weight:700;letter-spacing:-.01em;line-height:1.4;min-height:64px}
.chev{width:32px;height:32px;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--ink);transition:transform .3s var(--ease),background-color .2s;flex:none}
.faq.open .chev{transform:rotate(180deg);background:var(--blue-tint);color:var(--blue)}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease),visibility .35s;visibility:hidden}
.faq.open .faq-body{grid-template-rows:1fr;visibility:visible}
.faq-body>div{overflow:hidden;min-height:0}
.faq-body p{padding:0 0 20px;color:var(--text);font-size:17px;line-height:1.7;max-width:64ch}
.faq-body p+p{margin-top:-8px}
.closing{margin:64px -20px 0;padding:48px 24px;background:var(--blue);color:#fff;text-align:center;display:grid;gap:14px}
.closing h2{font-size:30px;color:#fff}
.closing p{color:rgb(255 255 255/.86);font-size:17.5px;text-wrap:balance}
.closing-actions{display:grid;gap:12px;margin-top:10px}
.closing .btn{min-height:60px}
body.focus .landing-only{display:none}

/* ---------- Footer ---------- */
.site-footer{background:#0f1520;padding:40px 0 48px;font-size:14.5px;color:rgb(255 255 255/.72)}
.site-footer p{max-width:70ch}
.site-footer .fine{margin-top:12px;font-size:13.5px}
.site-footer .links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;align-items:center}
.site-footer .links a{color:#fff;font-weight:600;font-size:14.5px}
.site-footer button{background:none;border:0;padding:0;color:#fff;font-weight:600;text-decoration:underline;font-size:14.5px;min-height:36px}
.site-footer .fine{color:rgb(255 255 255/.55)}

/* ---------- Mobile call bar ---------- */
.call-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgb(255 255 255/.96);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgb(12 21 38/.1);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr auto;gap:10px;transform:translateY(110%);transition:transform .3s var(--ease);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.call-bar.show{transform:none}
.call-bar .btn{min-height:54px;font-size:17px;padding:12px 16px}
.call-bar .btn-call{width:auto}
.call-bar .btn-secondary{font-size:15.5px}
.call-bar .bar-sub{display:block;font-size:12.5px;font-weight:600;opacity:.9;letter-spacing:0}
.call-bar .btn-call span{display:grid;text-align:left;gap:2px}
/* No call route: one full-width "Get Paving Quotes" button. */
.call-bar.form-only{grid-template-columns:1fr}
.call-bar.form-only .btn-call{display:none}
.call-bar.form-only [data-bar-form]{background:var(--blue);color:#fff;border-color:var(--blue);font-size:17px;box-shadow:0 10px 24px -10px rgb(31 94 255/.65)}

/* ---------- Legal dialog, toast, review panel ---------- */
dialog.legal{border:0;border-radius:var(--r-lg);padding:0;width:min(720px,calc(100vw - 24px));max-height:min(86vh,900px);box-shadow:0 30px 80px rgb(0 0 0/.3);color:var(--text)}
dialog.legal::backdrop{background:rgb(12 21 38/.5)}
.legal-head{position:sticky;top:0;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.legal-head h2{font-size:20px}
.legal-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:20px;color:var(--ink)}
.legal-body{padding:6px 22px 26px;font-size:15.5px;line-height:1.65}
.legal-body h1{display:none}
.legal-body h2{font-size:18px;margin:22px 0 6px}
.legal-body p{margin:8px 0}
.legal-body ul{list-style:disc;padding-left:20px;margin:8px 0}
/* Hidden fully (not only moved up) so its edge and shadow never show at the top of the page. */
.preview-toast{position:fixed;left:50%;top:14px;transform:translate(-50%,calc(-100% - 40px));visibility:hidden;z-index:60;background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;font-size:14.5px;line-height:1.4;max-width:min(92vw,420px);box-shadow:0 12px 30px rgb(0 0 0/.25);transition:transform .3s var(--ease),visibility 0s linear .3s}
.preview-toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .3s var(--ease),visibility 0s}
.review-panel{margin-top:28px;padding:18px 16px;border:2px dashed var(--line-2);border-radius:14px;background:#fff;display:grid;gap:12px;font-size:14px;color:var(--text)}
.review-panel h2{font-size:18px}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px}
.rp-grid>*{min-width:0}
.rp-field{display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.rp-field select{width:100%;min-width:0;font:15px var(--font);color:var(--ink);text-transform:none;letter-spacing:0;min-height:44px;border:1px solid var(--line-2);border-radius:8px;background:#fff;padding:6px 8px}
.rp-buyers{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.rp-buyers legend{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;padding:0}
.rp-buyers label{display:inline-flex;gap:6px;align-items:center;min-height:36px}
.rp-actions{display:flex;flex-wrap:wrap;gap:8px}
.rp-actions button{min-height:44px;border:1px solid var(--line-2);border-radius:8px;background:var(--soft);padding:8px 12px;font-weight:600;font-size:14px}

/* ---------- Wider screens ---------- */
@media (min-width:420px){.grid-2{grid-template-columns:1fr 1fr}}
@media (min-width:640px){
  .wrap{padding-inline:28px}
  .hero,.form-band,.closing{margin-inline:-28px}
  .hero-col,.main-col{max-width:640px;margin-inline:auto}
  .hero-actions{max-width:420px;margin-inline:auto}
  .form-band{padding-inline:28px}
  .card-inner{padding:34px 32px 36px}
  /* Wider screens: photo tiles, three across. */
  .options.photo{grid-template-columns:repeat(3,1fr);gap:12px}
  .options.photo .option{flex-direction:column;align-items:stretch;gap:10px;padding:8px 8px 13px;min-height:0}
  .options.photo .option img{width:100%;height:auto;aspect-ratio:4/3}
  .options.photo .option .opt-text{padding:0 4px;font-size:15px;font-weight:700}
  .options.photo .option.text-only{grid-column:1/-1;flex-direction:row;align-items:center;padding:14px 16px;min-height:58px}
  .options.photo .option.text-only.tile,.options.photo .option.text-only.gap3-1{grid-column:auto;flex-direction:column;align-items:flex-start;justify-content:flex-end;background:var(--soft)}
  .options.photo .option.text-only.gap3-2{grid-column:span 2}
  .options.photo .text-row .option.text-only{grid-column:auto}
  .options.seg{grid-template-columns:1fr 1fr}
  .grid-2.pair{grid-template-columns:1fr 1fr}
  .checklist{grid-template-columns:1fr 1fr;column-gap:28px}
  .section-actions,.closing-actions{display:flex;flex-wrap:wrap;justify-content:center}
  .section-actions{justify-content:flex-start}
}
@media (min-width:960px){
  .header-row{height:76px}
  :root{--header-h:77px}
  .hc-top{font-size:13px}
  .hc-num{font-size:20px}
  .layout{display:grid;grid-template-columns:400px minmax(0,1fr);gap:56px;align-items:start}
  .hero-col{position:sticky;top:24px;margin:32px 0 0;max-width:none}
  .hero{margin:0;padding:38px 32px 34px;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
  .hero-media{margin:-38px -32px 0;border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
  .hero h1{font-size:28px}
  .hero-sub{font-size:17px}
  .benefits li{font-size:16px}
  .hero-actions{max-width:none}
  .main-col{max-width:740px;margin:0}
  .form-band{margin:32px 0 0;padding:0;background:none}
  .card-inner{padding:38px 40px 40px}
  .section{padding-top:72px}
  .section h2{font-size:34px}
  .closing{margin:72px 0 0;border-radius:var(--r-lg);padding:52px 48px}
  .call-bar{display:none}
  .site-footer{margin-top:72px}
}
@media (max-width:959px){
  body.focus .hero-col{display:none}
  /* The matching page fills the phone screen below the header; the map takes the spare height. */
  body.is-matching .form-band{min-height:0;padding-bottom:16px}
  body.is-matching .quote-card{min-height:calc(100svh - var(--header-h) - 32px);display:flex;flex-direction:column}
  body.is-matching .card-inner,body.is-matching .matching{flex:1;display:flex;flex-direction:column}
  body.is-matching .match-map{flex:1 1 auto;aspect-ratio:auto;min-height:180px}
  /* Form heading centred, like the hero (Josh, 13 Oct round 10). */
  .form-title{text-align:center}
  /* ZIP to next question: a third less space (38 px to 25 px with no town line). */
  [data-zip-field]{margin-bottom:15px}
  /* No call route: one section. The hero headline leads into the form, with no form button; the
     form keeps a small heading that marks the break. */
  body.no-call .hero{padding-bottom:14px}
  body.no-call .hero-actions{display:none}
  .form-title .ft-wide{display:none}
  .form-title .ft-phone{display:inline}
  body.no-call .form-title{font-size:21px;margin-bottom:20px}
}
/* Phones: the photo keeps its 16:11 shape. When the call button would fall below the first screen,
   app.js (fitHero) shrinks the photo once at load. No viewport-height units or height media queries:
   Safari changes the height as its toolbar hides, which made the hero jump while scrolling. */
@media (max-width:639px){
  .hero{padding-bottom:20px}
  .hero-actions{margin-top:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .avail-dot::after,.radar::before,.radar::after{display:none}
}

/* Round 15: number answers (fire damage stories and rooms, on the contact step). */
.num-input { max-width: 180px; }