/* HomeAnvil — quote funnel. Tokens only (see /assets/tokens.css, docs/UI_SYSTEM.md).
   Layout (category-marketplace pattern): centered logo → thin progress bar → one question per slide on a flat
   white page; answers as one bordered radio list; Back/Next pinned to the bottom on phones. */

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--color-surface);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-body);color:var(--color-text);-webkit-font-smoothing:antialiased}
[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}
a{color:var(--color-brand-text);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring)}

/* ---- shell ---- */
.fs-root{min-height:100vh;min-height:100dvh;background:var(--color-surface)}
.fs-shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.fs-header{flex:0 0 auto;display:flex;justify-content:center;align-items:center;padding:var(--space-3) var(--gutter);background:var(--color-surface)}
.fs-header a{display:block;border-radius:var(--radius-sm)}
.fs-logo{height:36px;width:auto;display:block}
.fs-prog{flex:0 0 auto;width:100%;height:4px;background:var(--color-surface-2);overflow:hidden}
.fs-prog-fill{height:100%;width:12%;background:var(--color-action);transition:width var(--dur-slow) var(--ease-out)}
.fs-main{flex:1 1 auto;width:100%;max-width:var(--funnel-max);margin:0 auto;padding:var(--space-6) var(--gutter) max(var(--space-8),env(safe-area-inset-bottom,0px))}
.fs-form{display:flex;flex-direction:column;width:100%}
.fs-card{display:flex;flex-direction:column}
.fs-host{display:flex;flex-direction:column}
.fs-slide{width:100%}
.fs-slide--center{display:flex;flex-direction:column;justify-content:center}

/* ---- headline (slide 0) ---- */
.quote-headline{margin:0 0 var(--space-6)}
.qh-line{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:var(--leading-tight);color:var(--color-text);margin:0}
.qh-sub{font-size:var(--text-sm);font-weight:var(--weight-quote);color:var(--color-text-muted);margin:var(--space-2) 0 0}
/* The selector's city line keeps to one line, a long city cut with an ellipsis, so the city that arrives after the first
   paint moves nothing below it (proposed 0052: CLS); a lander's .qh-sub lines wrap as before */
.qh-sub--one-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- question ---- */
.quote-headline + .quiz-q .q-title{font-family:var(--font-display);font-size:var(--text-lg)}
.quiz-q{display:flex;flex-direction:column}
.q-title{font-size:var(--text-2xl);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:var(--leading-snug);color:var(--color-text);margin:0}

/* ---- answers: one bordered list of radio rows ---- */
.choices{display:flex;flex-direction:column;margin-top:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-control);overflow:hidden;background:var(--color-surface)}
.choice{display:flex;align-items:center;gap:var(--space-4);width:100%;min-height:var(--tile-min-h);padding:var(--space-3) var(--space-4);
  background:var(--color-surface);border:0;border-bottom:1px solid var(--color-border);border-radius:0;
  color:var(--color-text);font-family:inherit;font-size:var(--input-size);font-weight:var(--weight-quote);line-height:var(--leading-snug);text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;transition:background-color var(--dur-fast)}
.choice:last-child{border-bottom:0}
.choice:hover{background:var(--color-bg)}
.choice-label{flex:1 1 auto;font-weight:var(--weight-medium)}
.choice-icon{flex:none;width:36px;height:36px;color:var(--color-action);--icon-main:var(--color-action);--icon-accent:var(--color-brand-text)}
.choice-icon-image{flex:none;width:48px;height:48px;object-fit:contain}
.choice-photo{flex:none;width:64px;height:44px;object-fit:cover;border-radius:var(--radius-sm)}
.choice-radio{flex:none;width:22px;height:22px;border:var(--border-w) solid var(--color-border-strong);border-radius:var(--radius-full);background:var(--color-surface);display:flex;align-items:center;justify-content:center}
.choice.selected,.choice.confirm{background:var(--color-brand-soft)}
.choice.selected .choice-radio,.choice.confirm .choice-radio{border-color:var(--color-focus)}
.choice.selected .choice-radio::after,.choice.confirm .choice-radio::after{content:"";width:10px;height:10px;border-radius:var(--radius-full);background:var(--color-focus)}
/* multi-select: square boxes with a check */
.multi .choice-radio{border-radius:var(--radius-sm)}
/* mis-tapped disqualifying answer: danger outline + inline message; stays put */
.choice.dq{background:var(--color-danger-soft)}
.choice.dq .choice-radio{border-color:var(--color-danger)}
.choice.dq .choice-radio::after{background:var(--color-danger)}
.choices.is-invalid{border-color:var(--color-danger)}
/* On the selector a row is its lander's link: no underline */
a.choice{text-decoration:none}
/* The ring above is drawn outside an element, and .choices clips its rows to its corners, so on a row it was cut
   away: a row's focus is drawn inside it (WCAG 2.4.7, 2.4.11) */
.choice:focus-visible{box-shadow:none;outline:2px solid var(--color-focus);outline-offset:-4px}

/* ---- error messages (icon + sentence) ---- */
.field-err,.choice-dq-msg,.vf-err,.um-dq{display:flex;align-items:flex-start;gap:var(--space-2);color:var(--color-danger-text);font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:var(--leading-snug)}
.field-err::before,.choice-dq-msg::before,.vf-err::before,.um-dq::before{content:"";flex:none;width:1.15em;height:1.15em;margin-top:.1em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E") center/contain no-repeat}
.field-err{margin-top:var(--space-2)}
.choice-dq-msg{margin-top:var(--space-4)}
.vf-err{margin:0 0 var(--space-3)}

/* ---- text fields (floating labels) ---- */
.field{display:flex;flex-direction:column;margin-top:var(--space-4)}
.field-row{display:flex;gap:var(--space-3)}
.field-row .field{flex:1;min-width:0}
.field input{width:100%;height:var(--control-h);padding:var(--space-5) var(--space-4) var(--space-1);font-family:inherit;font-size:var(--input-size);font-weight:var(--weight-regular);color:var(--color-text);
  background:var(--color-surface);border:var(--border-w) solid var(--color-border-strong);border-radius:var(--radius-control);outline:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.field input:focus{border-color:var(--color-focus);box-shadow:var(--ring)}
.field input.is-invalid{border-color:var(--color-danger)}
.fl-box{position:relative}
.fl-box label{position:absolute;left:var(--space-4);top:0;height:100%;display:flex;align-items:center;margin:0;padding:0;font-size:var(--input-size);color:var(--color-text-muted);pointer-events:none;
  transition:top var(--dur-fast),font-size var(--dur-fast)}
.fl-input:focus + label,.fl-input:not(:placeholder-shown) + label{top:var(--space-2);height:auto;font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-brand-text)}

/* email: envelope icon */
.fl-ic,.pf-lock{position:absolute;left:var(--space-4);top:0;bottom:0;margin:auto 0;width:22px;height:22px;display:flex;pointer-events:none;z-index:var(--z-raised);color:var(--color-structure)}
.fl-ic svg,.pf-lock svg{width:22px;height:22px;display:block}
.fl-mail .fl-input{padding-left:var(--space-12)}
.fl-mail .fl-box label,.fl-phone .fl-box label{left:var(--space-12)}

/* phone: lock icon + "+1" + on-focus mask */
.fl-phone .pf-input{color:transparent;caret-color:var(--color-text);padding-left:calc(var(--space-12) + 2.5ch);font-variant-numeric:tabular-nums}
.fl-phone .pf-input::selection{background:var(--color-brand-soft)}
.pf-cc,.pf-render{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-top:var(--space-4);font-size:var(--input-size);font-variant-numeric:tabular-nums;white-space:pre;pointer-events:none;opacity:0;z-index:var(--z-raised);color:var(--color-text)}
.pf-cc{left:var(--space-12)}
.pf-render{left:calc(var(--space-12) + 2.5ch)}
.pf-box.active .pf-cc,.pf-box.active .pf-render{opacity:1}
.pf-render .g-u,.pf-render .g-f{color:var(--color-text-muted)}

/* ---- buttons ---- */
.fs-actions{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.fs-actions .btn{flex:2 1 0}
.fs-actions .btn--back{flex:1 1 0}
/* Back/Next sit directly under the answers at every screen size (never pinned to the screen edge) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-h);padding:0 var(--space-6);font-family:inherit;font-size:var(--text-base);font-weight:var(--weight-bold);
  border-radius:var(--radius-button);border:1px solid var(--color-action-edge);background:var(--color-action);color:var(--color-action-fg);text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.btn:hover{background:var(--color-action-hover)}
.btn svg{width:20px;height:20px}
.btn--cta{width:100%}
/* not yet satisfiable: muted until the step can be completed (still clickable → shows the error) */
.btn--next:not(.is-ready),.btn--cta:not(.is-ready),.btn:disabled{background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text-muted)}
.btn:disabled{cursor:default}
.btn--secondary,.btn--ghost{background:var(--color-surface);border:var(--border-w) solid var(--color-border-strong);color:var(--color-text)}
.btn--secondary:hover,.btn--ghost:hover{background:var(--color-surface);border-color:var(--color-text)}

/* ---- TCPA ---- */
.tcpa{font-size:var(--text-sm);line-height:var(--leading-body);color:var(--color-text-muted);margin:var(--space-5) 0 0}
.tcpa a{color:var(--color-brand-text)}

/* ---- end screens (centered) ---- */
.quiz-done{text-align:center;padding:var(--space-8) 0;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.quiz-done h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);color:var(--color-text);margin:0}
.quiz-done p{color:var(--color-text-muted);line-height:var(--leading-body);margin:0;max-width:32ch}
.check,.dq-mark{width:64px;height:64px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}
.check{background:var(--color-success-soft);color:var(--color-success-text)}
.dq-mark{background:var(--color-surface-2);color:var(--color-text-muted)}
.check svg,.dq-mark svg{width:32px;height:32px}

/* ---- Google Places dropdown (body prefix beats Google's later-injected stylesheet) ---- */
body .pac-container{margin-top:var(--space-2);padding:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-control);box-shadow:var(--shadow-md);overflow:hidden;font-family:var(--font-sans)}
body .pac-item{padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border);font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--color-text-muted);cursor:pointer}
body .pac-item:first-child{border-top:0}
body .pac-item:hover,body .pac-item-selected{background:var(--color-brand-soft)}
body .pac-icon{width:0;height:0;overflow:hidden;margin:0;background:none}
body .pac-item-query{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text)}
body .pac-matched{font-weight:var(--weight-bold);color:var(--color-text)}

/* ---- verification overlay (verify.js) ---- */
.vf-overlay{position:fixed;inset:0;z-index:var(--z-overlay);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-6);text-align:center;
  background:color-mix(in srgb,var(--color-surface) 90%,transparent)}
.vf-overlay.solid{background:var(--color-surface)}
.vf-spin{width:36px;height:36px;border:4px solid var(--color-surface-2);border-top-color:var(--color-structure);border-radius:var(--radius-full);animation:vfspin .7s linear infinite}
@keyframes vfspin{to{transform:rotate(360deg)}}
.vf-label{font-weight:var(--weight-medium);color:var(--color-text)}
.vf-title{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--color-text);max-width:26rem}
.vf-sub{font-size:var(--text-sm);color:var(--color-text-muted)}

@media (min-width:48rem){
  .fs-header{padding-block:var(--space-4)}
  .fs-logo{height:42px}
  .fs-main{padding-top:var(--space-12);padding-bottom:var(--space-16)}
}
/* Forced colours paint every background the canvas colour, the checked row's dot with it: it is drawn in the text colour */
@media (forced-colors:active){.choice.selected .choice-radio::after,.choice.confirm .choice-radio::after{forced-color-adjust:none;background:CanvasText}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Plan 12.7: the place a whole ZIP names, quiet beside the field; empty it takes no room. */
.field-hint{margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-sm)}
.field-hint:empty{display:none}