/* ==========================================================================
   National Coverage Group, quiz styling. ONE file for all five funnels.
   Ported from the approved preview: 10 Black Label Leads/redesign-preview/
   ncg-quiz-flow-v2-preview.html, signed off by Colton 2026-08-18.

   Palette of record, second review round: navy and bone carry the page, blue
   is the button and nothing else, red is a hairline accent only.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0d2444;
  --navy-2:#0a1c36;
  --navy-900:#07162a;
  --bone:#f6f3ec;
  --bone-2:#ebe5d8;
  --cream:#f2ede3;
  --ink:#16233a;
  --ink-soft:#4b5567;
  --ink-mute:#7b8397;
  --blue:#3b5bdb;
  --blue-hover:#4a6ae6;
  --blue-press:#2f49b0;
  --red:#c8322e;
  --good:#1d7a52;
  --line:rgba(13,36,68,0.13);
  --line-dark:rgba(242,237,227,0.14);
}
body{font-family:'Mulish',system-ui,sans-serif;background:var(--bone);color:var(--ink);line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased;padding-bottom:44px}
img{display:block;max-width:100%}

/* ============ BRAND BAR ============ */
.topbar{background:var(--navy-2);border-bottom:1px solid var(--line-dark);padding:15px 20px;display:flex;justify-content:center}
.lockup{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none}
.mark{width:36px;height:36px;flex:none;border-radius:8px}
.wm{display:flex;flex-direction:column;line-height:1.05}
.wm .nm{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:17px}
.wm .tag{display:flex;align-items:center;gap:7px;font-size:8.5px;font-weight:800;letter-spacing:.26em;opacity:.62;margin-top:5px}
.wm .tag::before{content:"";width:14px;height:2px;background:var(--red);flex:none}

.wrap{max-width:580px;margin:26px auto 0;padding:0 14px}

.card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(13,36,68,.10);overflow:hidden}
.bar{height:7px;background:var(--bone-2)}
.bar > i{display:block;height:100%;width:15%;background:var(--blue);transition:width .35s ease;border-radius:0 4px 4px 0}
.pad{padding:32px 28px 28px}

.eyebrow{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.16em;margin-bottom:12px}
.eyebrow::before{content:"";width:20px;height:3px;background:var(--red);border-radius:2px;flex:none}
h1{font-family:'Fraunces',Georgia,serif;font-style:normal;font-size:25px;line-height:1.24;color:var(--ink);margin-bottom:9px;font-weight:600;letter-spacing:-.01em}
.sub{font-size:15.5px;color:var(--ink-soft);margin-bottom:24px}

.step{display:none;animation:fade .25s ease}
.step.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.opts{display:flex;flex-direction:column;gap:11px}
.opt{display:block;width:100%;text-align:left;background:#fff;border:2px solid var(--line);border-radius:13px;padding:17px;font-size:16.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s;font-family:'Mulish',sans-serif;min-height:60px}
.opt:hover{border-color:var(--blue);background:#f7f9ff;transform:translateY(-1px)}
.opt:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(59,91,219,.18)}
.opt.sel{border-color:var(--blue);background:rgba(59,91,219,.08)}

.chips{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.chip{border:2px solid var(--line);border-radius:12px;padding:15px 8px;text-align:center;cursor:pointer;background:#fff;transition:.15s;font-size:14.5px;font-weight:700;color:var(--ink-soft);font-family:'Mulish',sans-serif;min-height:56px}
.chip:hover{border-color:var(--blue);background:#f7f9ff}
.chip:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(59,91,219,.18)}
.chip.sel{border-color:var(--blue);background:rgba(59,91,219,.08);color:var(--navy)}
.chip.wide{grid-column:1 / -1}

label.fld{display:block;font-size:13.5px;font-weight:700;color:var(--ink-soft);margin:18px 0 6px}
label.fld:first-of-type{margin-top:0}
input[type=text],input[type=tel],input[type=email],input[type=number],select{width:100%;border:2px solid var(--line);border-radius:11px;padding:14px 15px;font-size:16px;color:var(--ink);font-family:'Mulish',sans-serif;background:var(--bone);appearance:none;-webkit-appearance:none}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(59,91,219,.12);background:#fff}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237b8397' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.age-input{font-size:27px;text-align:center;letter-spacing:.04em;font-weight:600}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.opt-tag{font-weight:500;color:var(--ink-mute)}

/* Reassurance sits ABOVE the field it is reassuring, Phase 3B item 6. */
.fieldnote{font-size:12.5px;color:var(--ink-mute);line-height:1.55;margin:6px 0 8px}

.routenote{margin-top:16px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:0 12px 12px 0;padding:15px 16px;font-size:14.5px;color:var(--ink-soft);display:none}
.routenote.show{display:block}
.routenote a{color:var(--blue);font-weight:700}

.benerow{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.addlink{display:inline-block;margin-top:2px;font-size:14.5px;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px;background:none;border:none;cursor:pointer;font-family:'Mulish',sans-serif;padding:6px 0}

.reveal{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);display:none}
.reveal.show{display:block;animation:fade .3s ease}
.reveal h2{font-family:'Fraunces',Georgia,serif;font-style:normal;font-size:21px;font-weight:600;line-height:1.28;color:var(--ink);margin-bottom:16px}

.customwrap{margin-top:10px;display:none}
.customwrap.show{display:block;animation:fade .25s ease}

/* THE BLUE BOX. Same shape on every step so the visitor learns one control. */
.cta{margin-top:24px;width:100%;background:var(--blue);color:#fff;border:none;border-radius:12px;min-height:60px;padding:18px;font-size:18px;font-weight:800;cursor:pointer;font-family:'Mulish',sans-serif;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 8px 22px rgba(59,91,219,.34);transition:background .14s ease,transform .08s ease,box-shadow .14s ease}
.cta:hover{background:var(--blue-hover);transform:translateY(-2px);box-shadow:0 12px 30px rgba(59,91,219,.40)}
.cta:active{background:var(--blue-press);transform:translateY(1px);box-shadow:0 3px 10px rgba(59,91,219,.34)}
.cta:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(59,91,219,.42)}
.cta:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.cta.hidden{display:none}

.consent{display:flex;gap:11px;align-items:flex-start;margin-top:22px;background:var(--bone);border:1px solid var(--line);border-radius:12px;padding:15px;cursor:pointer}
.consent input{margin-top:2px;width:24px;height:24px;flex:none;accent-color:var(--blue);cursor:pointer}
.consent span{font-size:13px;color:var(--ink-soft);line-height:1.55}
.consent a{color:var(--blue)}

.trust{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;background:var(--bone);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:0 10px 10px 0;font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.45}
.trust svg{flex-shrink:0}

.err{display:none;color:#b42318;font-size:13px;font-weight:700;margin-top:10px}
.err.show{display:block}

/* Per field message on the contact step, created by script next to its own
   control so the approved last step markup never had to be touched. Sits
   tighter than .err because it hangs directly off the input above it. */
.ferr{display:none;color:#b42318;font-size:12.5px;font-weight:700;margin-top:6px;line-height:1.4}
.ferr.show{display:block}
input.bad,select.bad{border-color:#b42318;background:#fff6f5}

.skip{display:inline-block;margin-top:16px;font-size:14px;color:var(--ink-mute);cursor:pointer;text-decoration:underline;text-underline-offset:3px;background:none;border:none;font-family:'Mulish',sans-serif}
.skip:hover{color:var(--ink-soft)}
.back{display:inline-block;margin-top:18px;font-size:14px;color:var(--ink-mute);cursor:pointer;text-decoration:underline;text-underline-offset:3px;background:none;border:none;font-family:'Mulish',sans-serif}
.back:hover{color:var(--ink-soft)}

/* ============ AGENT MATCH, the product mark ============ */
.am{display:inline-flex;align-items:baseline;gap:5px;font-weight:800;color:var(--navy);letter-spacing:.004em;white-space:nowrap}
.am svg{width:13px;height:13px;color:var(--blue);flex:none;align-self:center}
.am sup{font-size:.52em;font-weight:700;color:var(--ink-mute);letter-spacing:0;margin-left:-2px}

/* ============ THE LOADING SCREEN ============ */
.ld{text-align:center}
.ld h1{font-size:23px;margin:0 0 8px}
.ld .sub{margin-bottom:26px}
.spin{width:52px;height:52px;margin:6px auto 22px;border-radius:50%;border:4px solid var(--bone-2);border-top-color:var(--blue);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.ldsteps{list-style:none;text-align:left;max-width:340px;margin:0 auto;padding:0}
.ldsteps li{display:flex;align-items:center;gap:11px;padding:11px 0;font-size:15.5px;color:var(--ink-mute);opacity:.45;transition:opacity .3s ease,color .3s ease}
.ldsteps li.on{opacity:1;color:var(--ink-soft)}
.ldsteps li.done{opacity:1;color:var(--ink)}
.ldsteps li .box{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;transition:.3s}
.ldsteps li.on .box{border-color:var(--blue);border-top-color:transparent;animation:sp .7s linear infinite}
.ldsteps li.done .box{border-color:var(--good);background:var(--good);animation:none}
.ldsteps li .box svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity .2s ease}
.ldsteps li.done .box svg{opacity:1}
.ldbrand{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-mute);letter-spacing:.02em}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90;display:none}

/* ============ THE HANDSHAKE, audit A4b ============ */
.hs .hsmark{height:50px;width:auto;margin-bottom:20px}
.hs .ring{width:54px;height:54px;border-radius:50%;background:rgba(29,122,82,.12);color:var(--good);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.hs h1{margin-bottom:24px;font-size:26px}

.agent{text-align:center;padding:26px 20px 24px;background:var(--bone);border:1px solid var(--line);border-radius:16px}
.agent img{width:168px;height:168px;border-radius:50%;object-fit:cover;margin:0 auto 18px;border:4px solid #fff;box-shadow:0 10px 30px rgba(13,36,68,.16)}
.agent .nm{font-family:'Fraunces',Georgia,serif;font-style:normal;font-size:23px;font-weight:600;color:var(--ink);line-height:1.2}
/* one credit per line. The pair never fit on one line at any width the card allows, so the old
   inline middot separator was always orphaned at a line end and the tenure phrase broke in half. */
.agent .credit{font-size:14.5px;color:var(--ink-soft);margin-top:8px;font-weight:400;line-height:1.55;
  display:flex;flex-direction:column;align-items:center;gap:1px}
.agent .credit .tenure{white-space:nowrap}

.why{margin-top:16px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:0 12px 12px 0;padding:16px 17px;font-size:15px;color:var(--ink-soft);line-height:1.6}
.why b{color:var(--ink);font-weight:800}

.numblock{margin-top:20px;background:rgba(59,91,219,.09);border:1px solid rgba(59,91,219,.26);border-radius:13px;padding:18px 17px;font-size:17px;font-weight:800;color:var(--navy);line-height:1.5}
.numblock .digits{font-size:24px;white-space:nowrap}
.hs p.body{font-size:16px;color:var(--ink-soft);margin-top:18px;font-weight:400}

footer{max-width:580px;margin:24px auto 0;text-align:center;padding:0 18px}
footer p{font-size:11px;color:var(--ink-mute);line-height:1.8}
footer a{color:var(--ink-soft)}

/* The way out. Small, plain, below the footer, last in tab order. */
.homeout{max-width:580px;margin:18px auto 0;text-align:center}
.homeout a{font-size:12.5px;color:var(--ink-mute);text-decoration:underline;text-underline-offset:3px}
.homeout a:hover{color:var(--ink-soft)}

@media (max-width:440px){
  .pad{padding:26px 20px 24px}
  .chips{grid-template-columns:1fr}
  .benerow{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  h1{font-size:23px}
  .hs h1{font-size:24px}
  .agent img{width:148px;height:148px}
  .wm .tag{display:none}
}