:root{
    --bg:#FFFFFF; --bg2:#F7F8FA; --ink:#111827; --slate:#4B5563; --mute:#9CA3AF;
    --blue:#3B5BFD; --blue-deep:#2E4AE8; --blue-tint:#EEF1FF;
    --green:#10B981; --green-deep:#0B9C6C; --green-tint:#E9F9F2;
    --line:#E7E9EE; --line2:#D9DCE3; --err:#DC2626;
    --f:"Plus Jakarta Sans",system-ui,sans-serif;
    --r:16px; --r-lg:22px;
    --sh1:0 1px 2px rgba(17,24,39,.05),0 3px 10px rgba(17,24,39,.04);
    --sh2:0 2px 4px rgba(17,24,39,.04),0 14px 36px rgba(17,24,39,.09);
    --sh3:0 6px 14px rgba(17,24,39,.05),0 30px 70px rgba(17,24,39,.14);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--f);background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  h1,h2,h3{line-height:1.12;letter-spacing:-.025em}
  a{color:inherit}
  :focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
  ::selection{background:var(--blue-tint)}
  .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1;transform:none}

  nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .navrow{display:flex;align-items:center;justify-content:space-between;height:68px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none}
  .lmk{width:30px;height:30px;border-radius:9px;background:var(--blue);display:grid;place-items:center;flex:none;box-shadow:0 3px 8px rgba(59,91,253,.3)}
  .lmk svg{width:15px;height:15px;color:#fff}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f);font-weight:700;font-size:15.5px;border-radius:12px;padding:14px 24px;text-decoration:none;border:none;cursor:pointer;background:var(--blue);color:#fff;transition:background .18s,transform .18s,box-shadow .18s}
  .btn:hover{background:var(--blue-deep);transform:translateY(-1px);box-shadow:0 10px 24px rgba(59,91,253,.32)}
  .btn:active{transform:none}
  .btn-nav{padding:10px 18px;font-size:14px}

  /* HERO + FORM */
  .hero{padding:56px 0 72px;position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;left:60%;top:-320px;width:840px;height:640px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(59,91,253,.07),rgba(59,91,253,0));pointer-events:none}
  .hgrid{display:grid;grid-template-columns:1fr 460px;gap:52px;align-items:start;position:relative}
  .crumb{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--blue-deep);background:var(--blue-tint);border-radius:100px;padding:7px 14px;margin-bottom:20px}
  h1{font-size:clamp(2.2rem,4.4vw,3.3rem);font-weight:800;max-width:15ch}
  .hsub{margin-top:18px;font-size:17.5px;color:var(--slate);max-width:40ch}
  .hsub b{color:var(--ink);font-weight:700}
  .facts{display:grid;gap:12px;margin-top:26px}
  .fact{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;font-weight:600;color:var(--slate)}
  .fact svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:2px}
  .fact b{color:var(--ink)}

  .formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh3);padding:26px 26px 24px;scroll-margin-top:88px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow:clip}
  .fhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .fhead h3{font-size:18px;font-weight:800}
  .fstep{font-size:12.5px;font-weight:800;color:var(--blue-deep);letter-spacing:.04em;white-space:nowrap}
  .pbar{height:5px;background:var(--bg2);border-radius:10px;margin-top:12px;overflow:hidden}
  .pfill{display:block;height:100%;width:33.3%;background:var(--blue);border-radius:10px;transition:width .35s cubic-bezier(.2,.7,.3,1)}
  .fs{display:none;margin-top:18px}
  .fs.active{display:block}
  .field{margin-top:15px}
  .field:first-child{margin-top:0}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .frow>.field{min-width:0;margin-top:0}
  .field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
  .field input,.field select,.field textarea{width:100%;max-width:100%;padding:13px 14px;border:1.5px solid var(--line2);border-radius:12px;font:500 15px var(--f);background:var(--bg2);color:var(--ink);text-overflow:ellipsis}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px var(--blue-tint)}
  .field textarea{resize:vertical}
  .field .err{border-color:var(--err)!important}
  .seg{display:flex;flex-direction:column;gap:8px;position:relative}
  .seg.row{flex-direction:row}
  .seg input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
  .seg label{flex:1;text-align:left;padding:13px 15px;border:1.5px solid var(--line2);border-radius:12px;font-size:14.5px;font-weight:600;cursor:pointer;margin:0;transition:border-color .18s,background .18s,color .18s}
  .seg.row label{text-align:center}
  .seg input:checked+label{border-color:var(--blue);background:var(--blue-tint);color:var(--blue-deep)}
  .seg input:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
  .opt{font-weight:500;font-size:11.5px;color:var(--mute);margin-left:5px}
  .fnav{display:flex;gap:10px;margin-top:22px}
  .fnav .btn{flex:1;padding:15px;border-radius:100px;font-size:15.5px}
  .fnav .btn-ghost{flex:0 0 auto;padding:15px 20px;display:none;background:transparent;color:var(--slate);border:1.5px solid var(--line2)}
  .fnav .btn-ghost:hover{background:var(--bg2);color:var(--ink);box-shadow:none}
  .fnav.canback .btn-ghost{display:inline-flex}
  .fnote{margin-top:13px;text-align:center;font-size:12.5px;color:var(--slate);font-weight:500;line-height:1.55}
  .ferr{display:none;margin-top:12px;font-size:13px;font-weight:600;color:var(--err);text-align:center}
  .ferr.show{display:block}
  .done{display:none;text-align:center;padding:28px 6px}
  .done .dico{width:56px;height:56px;border-radius:50%;background:var(--green-tint);display:grid;place-items:center;margin:0 auto 18px}
  .done .dico svg{width:26px;height:26px;color:var(--green-deep)}
  .done h3{font-size:21px;font-weight:800}
  .done p{margin-top:10px;color:var(--slate);font-size:15px;max-width:38ch;margin-left:auto;margin-right:auto}
  .done p b{color:var(--ink)}

  section{padding:84px 0}
  .sec2{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep)}
  h2{font-size:clamp(1.7rem,3.4vw,2.35rem);font-weight:800;margin-top:10px}
  .lede{margin-top:14px;font-size:16.5px;color:var(--slate);max-width:54ch}
  .ctr{text-align:center}
  .ctr .lede{margin-left:auto;margin-right:auto}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
  .step{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--sh1)}
  .snum{width:38px;height:38px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;margin-bottom:16px}
  .step h3{font-size:18px;font-weight:800}
  .step p{margin-top:8px;font-size:14.5px;color:var(--slate)}

  .qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:44px}
  .qrow{display:flex;gap:13px;align-items:flex-start;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh1)}
  .qi{width:40px;height:40px;border-radius:12px;background:var(--blue-tint);display:grid;place-items:center;flex:none}
  .qi svg{width:19px;height:19px;color:var(--blue-deep)}
  .qrow b{display:block;font-size:15.5px;line-height:1.35}
  .qgrid3{grid-template-columns:repeat(3,1fr);max-width:820px;margin-left:auto;margin-right:auto}
  .qrow span{font-size:13.5px;color:var(--slate);font-weight:500;line-height:1.55;display:block;margin-top:2px}
  .caplist{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:760px;margin:40px auto 0}
  .cap{background:#fff;border:1px solid var(--line);border-radius:100px;padding:12px 20px;font-size:15px;font-weight:600;color:var(--ink);box-shadow:var(--sh1)}

  details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 20px;margin-top:10px;box-shadow:var(--sh1)}
  summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 0;font-weight:700;font-size:15.5px}
  summary::-webkit-details-marker{display:none}
  .pm{width:20px;height:20px;color:var(--blue-deep);flex:none;transition:transform .25s}
  details[open] .pm{transform:rotate(45deg)}
  .a{padding:0 0 18px;font-size:14.5px;color:var(--slate)}

  .final{background:var(--ink);border-radius:26px;padding:66px 30px;text-align:center;position:relative;overflow:hidden}
  .final::before{content:"";position:absolute;left:50%;top:-240px;transform:translateX(-50%);width:560px;height:560px;border-radius:50%;
    background:radial-gradient(circle,rgba(59,91,253,.36),rgba(59,91,253,0) 65%)}
  .final h2{color:#fff;position:relative}
  .final .lede{color:#A6ADBB;margin:12px auto 0;position:relative}
  .final .btn{margin-top:28px;position:relative;border-radius:100px;padding:16px 30px}
  .final .sm{margin-top:16px;font-size:13.5px;color:#7C8494;position:relative}

  footer{padding:42px 0 52px;margin-top:84px;border-top:1px solid var(--line)}
  .foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;font-size:13.5px;color:var(--mute)}
  .foot .fb{max-width:52ch;line-height:1.65}
  .foot a{color:var(--slate);font-weight:600;text-decoration:none}
  .foot a:hover{color:var(--ink)}
  .disclaimer{margin-top:22px;font-size:12px;color:var(--mute);line-height:1.6;max-width:80ch}

  .hqs{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
  .hqs li{font-size:16px;font-weight:600;color:var(--ink);padding-left:20px;position:relative}
  .hqs li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:.5}
  .hsub2{margin-top:20px;font-size:16.5px;color:var(--slate);max-width:42ch}
  .ucases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
  .uc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh1)}
  .uc b{display:block;font-size:16px;font-weight:800}
  .uc span{display:block;margin-top:6px;font-size:14px;color:var(--slate);line-height:1.55}
  .ucnote{margin-top:26px;text-align:center;font-size:15px;color:var(--slate);max-width:56ch;margin-left:auto;margin-right:auto;font-weight:500}

  @media(max-width:920px){
    .ucases{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
    .hgrid{grid-template-columns:1fr;gap:34px}
    .hero{padding:40px 0 56px}
    .steps{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
    .qgrid,.qgrid3{grid-template-columns:1fr}
    section{padding:60px 0}
  }
  @media(max-width:560px){
    .frow{grid-template-columns:1fr}
    h1{font-size:clamp(1.9rem,8vw,2.4rem)}
    .hsub{font-size:16px}
  }
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .rv{opacity:1;transform:none;transition:none}
    .pfill{transition:none}
  }


    /* select: kill native chrome so the styled box isn't doubled */
    .field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:18px;padding-right:42px}
    .field select::-ms-expand{display:none}
  
    /* fieldset: kill UA border + min-width:min-content (the latter causes date-input overflow) */
    .fs{border:0;min-width:0;padding:0;margin-top:18px}
    /* date input: match the other fields, don't blow out the container */
    .field input[type="date"]{-webkit-appearance:none;appearance:none;min-width:0;width:100%;
      text-align:left;font:500 15px var(--f);color:var(--ink);line-height:1.2}
    .field input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
    .field input[type="date"]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
    .field input[type="date"]:invalid{color:var(--mute)}
  
    /* .qrow span (the description) was overriding .qi's display:grid, so the icon
       sat top-left instead of centred. Higher specificity restores it. */
    .qrow span.qi{display:grid;place-items:center;margin-top:0;line-height:0;font-size:0}
  
    /* ---------- design polish pass ---------- */
    h1{letter-spacing:-.028em;line-height:1.08}
    h2{letter-spacing:-.022em;line-height:1.14}
    /* even out ragged headings; ignored by browsers without support */
    h1,h2{text-wrap:balance}
    .hsub{line-height:1.6}
    .btn,.btn-nav{border-radius:100px}
    details{border-radius:16px}
    .snum{border-radius:12px}
    section{padding:88px 0}
    .hero{padding:44px 0 64px}
    @media(max-width:720px){ section{padding:64px 0} .hero{padding:26px 0 46px} }
    .uc,.step{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
    @media(hover:hover){
      .uc:hover,.step:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
      details{transition:box-shadow .22s ease}
      details:hover{box-shadow:var(--sh2)}
    }
    .formcard{padding:28px 28px 26px;border-top:3px solid var(--blue)}
    /* radio groups: the input is visually hidden, so an .err class on it is invisible.
       The error state goes on the .seg container and shows on every option in the
       group — the question is unanswered, not one option wrong. Must sit after
       .seg input:checked+label (equal specificity, later wins). */
    .field .seg.err label{border-color:var(--err)}
    /* group question for a radio set — a <label> with no control is not labelable,
       so it's a <p class="flabel"> tied to the group with aria-labelledby */
    .field .flabel{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
    /* a required control that is hidden (the Places element replaces #loc) can't
       show its own error state, so the field's label carries it */
    .field.err > label,.field.err > .flabel{color:var(--err)}
    [hidden]{display:none!important}
    /* phone: country selector + national input share one row */
    .telrow{display:flex;gap:8px}
    .telrow select{flex:0 0 auto;width:auto;padding-right:34px}
    .telrow input{flex:1 1 auto;min-width:0}
    /* honeypot: off-screen, real users never see or focus it */
    .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
    .tswrap:empty{display:none}
    .tswrap{margin-top:14px;min-height:0}
    /* OTP verification panel */
    .otp{padding:6px 2px 2px}
    .otpback{background:none;border:none;color:var(--slate);font:600 13px var(--f);cursor:pointer;padding:4px 0;margin-bottom:6px}
    .otpback:hover{color:var(--ink)}
    .confirmnum{font:800 24px var(--f);letter-spacing:.01em;color:var(--ink);
      text-align:center;margin:14px 0 20px;padding:14px;background:var(--bg2);border-radius:12px}
    .otplink{background:none;border:none;color:var(--blue-deep);font:inherit;font-weight:700;
      cursor:pointer;padding:0;text-decoration:underline}
    .otp h3{font-size:19px;font-weight:800}
    .otplede{margin-top:8px;font-size:14.5px;color:var(--slate)}
    .otplede b{color:var(--ink);white-space:nowrap}
    .otpinputs{display:flex;gap:8px;margin-top:18px;width:100%}
    .otpinputs input{flex:1 1 0;width:0;min-width:0;max-width:56px;text-align:center;font:700 22px var(--f);
      padding:12px 0;border:1.5px solid var(--line2);border-radius:12px;background:var(--bg2);color:var(--ink);box-sizing:border-box}
    .otpinputs input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px var(--blue-tint)}
    #otpVerify{margin-top:22px!important}
    .otpgiveup{margin-top:14px;text-align:center;font-size:13px;color:var(--slate)}
    .otpinputs.err input{border-color:var(--err)}
    .otperr{margin-top:12px;font-size:13px;font-weight:600;color:var(--err)}
    .otpfoot{display:flex;justify-content:center;gap:18px;margin-top:16px;flex-wrap:wrap}
    .otpfoot button{background:none;border:none;font:600 13.5px var(--f);color:var(--blue-deep);cursor:pointer}
    .otpfoot button:disabled{color:var(--mute);cursor:default}
    .otpfoot button:not(:disabled):hover{text-decoration:underline}
    /* hero bullets: the bolded clause carries the criterion (capability, area,
       availability); the qualifier is elaboration. Below the breakpoint the
       qualifier is dropped so the three read as a scannable checklist and the
       form sits higher up the page. */
    @media(max-width:720px){ .fact .q{display:none} }
    .fhint{margin-top:6px;font-size:12px;color:var(--mute);font-weight:500;line-height:1.45}
    /* .seg.row labels are flex:1 with no min-width, so their summed min-content
       sets the floor for the hero's 1fr column. Longer option labels push that
       past .wrap's padding at 390 — and .hero{overflow:hidden} clips the hero
       bullets rather than showing a scrollbar, so the overflow check misses it.
       Stack on narrow screens; allow shrink in between. */
    .seg.row label{min-width:0}
    @media(max-width:560px){ .seg.row{flex-direction:column} }
    /* .hero and .final both use a large decorative ::before that overflows to
       the right, so overflow:hidden turns them into scroll containers. Focusing
       a form field inside then scrolls the whole block sideways — measured at
       -147px on step 3 at 390 — and with no scrollbar the user can't get back.
       overflow:clip clips on both axes exactly as hidden did, but never creates
       a scroll container. Must NOT be overflow-x:clip alone: that leaves
       overflow-y visible and .final::before blooms up into the section above. */
    .hero,.final{overflow:clip}
    /* Places autocomplete element, when a key is present */
    #locMount:empty{display:none}
    #locMount gmp-place-autocomplete{width:100%;display:block}
    /* mid-page CTA fine print — .sm is only styled inside .final */
    /* the closing section carried padding-top:0 with padding-bottom:88 AND the
       footer's 84px margin below it: 14px of air above the card, 158px below.
       Top padding restored, bottom dropped — the footer margin does that job. */
    .close{padding:56px 0 0}
    /* CTA labels take the niche noun, so they vary in length. On a 360 screen
       Back eats ~94px of the row and leaves the submit button 160px — enough to
       wrap "Find an Inspector" onto two lines. Stack them instead: primary full
       width on top, Back beneath. min-width:0 stops a long label widening the
       row past the card. */
    .fnav .btn{min-width:0;white-space:normal}
    @media(max-width:420px){
      .fnav{flex-wrap:wrap}
      .fnav #nextBtn{order:1;flex:1 0 100%}
      .fnav .btn-ghost{order:2;flex:1 0 100%}
    }
    /* Continue is redundant on a step that advances on selection. It is hidden
       until a keydown shows someone is on a keyboard — arrow keys move through
       radios without advancing, so those users still need a way forward. */
    .fnav.autoadv #nextBtn{display:none}
    .midcta{margin-top:38px}
    /* no max-width: 34ch wrapped the tick line onto two lines on desktop while
       the identical line in .final sat on one */
    .midcta .sm{margin-top:14px;font-size:13.5px;color:var(--mute);line-height:1.5}

/* ===== HOME PAGE COMPONENTS (search, tries, result, goals, proband) ===== */
  .searchbox{max-width:660px;margin:38px auto 0;position:relative;text-align:left;scroll-margin-top:84px}
  .sbar{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line2);border-radius:100px;padding:8px 8px 8px 24px;box-shadow:var(--sh2);transition:border-color .2s,box-shadow .2s}
  .searchbox.focus .sbar{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-tint),var(--sh2)}
  .sico{width:21px;height:21px;color:var(--mute);flex:none}
  #need{flex:1;border:none;outline:none;font:500 17px var(--f);color:var(--ink);background:transparent;min-width:0;padding:12px 6px}
  #need::placeholder{color:var(--mute)}
  .sgo{flex:none;border-radius:100px}
  .sgo .garr{display:none;width:19px;height:19px}

  .tries{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px}
  .tries.hide{display:none}
  .try{font:600 13.5px var(--f);color:var(--slate);background:var(--bg2);border:1px solid var(--line);border-radius:100px;padding:8px 16px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s}
  .try:hover{background:var(--blue-tint);border-color:var(--blue);color:var(--blue-deep);transform:translateY(-1px)}

  /* live result */
  .result{margin:10px 0 0;text-align:left;display:none}
  .result.show{display:block;animation:rslide .38s cubic-bezier(.2,.8,.3,1)}
  @keyframes rslide{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
  .rcard{background:#fff;border:1.5px solid var(--green);border-radius:var(--r-lg);box-shadow:var(--sh3);overflow:hidden}
  .rtop{display:flex;align-items:center;gap:15px;padding:18px 20px}
  .rico{width:48px;height:48px;border-radius:14px;background:var(--green-tint);display:grid;place-items:center;flex:none}
  .rico svg{width:23px;height:23px;color:var(--green-deep)}
  .rbody{flex:1;min-width:0}
  .rkick{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep)}
  .rbody h3{font-size:18.5px;font-weight:800;margin-top:1px}
  .rbody p{font-size:13.5px;color:var(--slate);margin-top:1px}
  .rcard .btn{flex:none;padding:13px 21px;font-size:14.5px;border-radius:100px}
  .rmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);background:var(--bg2);padding:12px 20px;font-size:13px;color:var(--slate);font-weight:500}
  .rmeta b{color:var(--ink);font-weight:700}
  .rmeta .sep{color:var(--line2)}
  /* coming-soon variant */
  .result.soon .rcard{border-color:var(--line2)}
  .result.soon .rico{background:var(--blue-tint)}
  .result.soon .rico svg{color:var(--blue-deep)}
  .result.soon .rkick{color:var(--blue-deep)}
  .rmiss{display:none;margin:10px 0 0;background:var(--bg2);border:1.5px dashed var(--line2);border-radius:var(--r-lg);padding:18px 22px;text-align:center;font-size:14.5px;color:var(--slate)}
  .rmiss.show{display:block;animation:rslide .38s cubic-bezier(.2,.8,.3,1)}
  .rmiss a{font-weight:700;color:var(--blue-deep)}

  /* SCOPED to .hero-home. Unscoped, these override the niche pages' .facts/.fact
     (defined much earlier as a left-aligned grid) and make niche hero bullets
     center-align individually — a ragged, staggered left edge. Keep the scope. */
  .hero-home .facts{display:flex;gap:22px;justify-content:center;margin-top:28px;flex-wrap:wrap}
  .hero-home .fact{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--slate)}
  .hero-home .fact svg{width:15px;height:15px;color:var(--green);flex:none}

  /* goals — problems, not industries */
  .goals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
  .goal{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh1);padding:30px 28px;display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
  .goal:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--blue)}
  .gico{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--blue-tint),#fff);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:20px}
  .gico svg{width:24px;height:24px;color:var(--blue-deep)}
  .goal h3{font-size:20.5px;font-weight:800}
  .goal>p{margin-top:7px;font-size:14.5px;color:var(--slate);line-height:1.55}
  .glinks{margin-top:20px;border-top:1px solid var(--line)}
  .glink{display:flex;align-items:center;justify-content:space-between;padding:13px 2px;border-bottom:1px solid var(--line);text-decoration:none;font-size:15.5px;font-weight:700;color:var(--ink);transition:color .15s,padding-left .2s}
  .glink:hover{color:var(--blue-deep);padding-left:7px}
  .glink .arr{color:var(--mute);font-size:13px;transition:color .15s,transform .2s}
  .glink:hover .arr{color:var(--blue-deep);transform:translateX(2px)}
  .gsoon{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;font-size:14px;color:var(--slate);line-height:1.7;flex:1}
  .gcta{margin-top:14px;font-size:14px;font-weight:700;color:var(--blue-deep);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
  .gcta:hover{text-decoration:underline}
  .goalnote{margin-top:30px;text-align:center;font-size:15px;color:var(--slate)}
  .goalnote b{color:var(--ink)}

  /* pro band */
  .proband{display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh1);padding:34px 36px}
  .proband h3{font-size:21px;font-weight:800;margin-top:8px}
  .proband p:not(.eyebrow){margin-top:8px;font-size:15px;color:var(--slate);max-width:52ch}
  .proband .btn{flex:none;border-radius:100px}
  @media(max-width:700px){.proband{flex-direction:column;align-items:flex-start}.proband .btn{width:100%}}
@media(max-width:920px){ .goals{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto} }
@media(max-width:700px){ .proband{flex-direction:column;align-items:flex-start}.proband .btn{width:100%} }

  /* ===== HOME NAV VARIANT (navlinks — home page only) ===== */
  .navlinks{display:flex;align-items:center;gap:26px}
  .navlinks a:not(.btn){font-size:14.5px;font-weight:600;color:var(--slate);text-decoration:none}
  .navlinks a:not(.btn):hover{color:var(--ink)}
  .btn-ghost.btn-nav{background:transparent;color:var(--slate);border:1.5px solid var(--line2);box-shadow:none}
  .btn-ghost.btn-nav:hover{background:var(--bg2);color:var(--ink)}
  @media(max-width:700px){
    .navlinks a:not(.btn){display:none}
    .navlinks .btn-ghost{display:none}   /* drop the secondary button too; keep only Find a Pro */
    .navlinks{gap:0}
  }

  /* generic pro line on the home hero */
  .proline{margin-top:30px;font-size:14px}
  .proline a{color:var(--slate);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:1px}
  .proline a:hover{color:var(--ink)}

  /* ===== HOME HERO (centered, with decorative glow) — niche heroes are left-aligned ===== */
  .hero-home{text-align:center;padding:88px 0 80px}
  .hero-home::before{content:"";position:absolute;left:50%;top:-360px;transform:translateX(-50%);
    width:980px;height:680px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(59,91,253,.075),rgba(59,91,253,0));pointer-events:none}
  .hero-home .hsub{margin-left:auto;margin-right:auto;max-width:52ch}
  .hero-home .facts{justify-content:center}
  @media(max-width:720px){ .hero-home{padding:40px 0 52px} }
  .hero-home h1{margin-left:auto;margin-right:auto}

  /* Two-column hero: the form column is a fixed 460px, so below ~1040px the copy
     column squeezes under 460px and the hero looks lopsided (copy narrower than the
     form) — visibly odd through roughly 940–1040px. Collapse to one column earlier
     rather than letting the copy get cramped. */
  @media(max-width:1040px){ .hgrid{grid-template-columns:1fr;gap:34px} }

  /* --- 3-step story component (chassis: Why ServicePros section) --- */
  .spsgrid{display:flex;justify-content:center;align-items:stretch;gap:22px;margin-top:36px;text-align:left}
  .spscard{flex:1;max-width:265px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh1);padding:20px;display:flex;flex-direction:column}
  .spslbl{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
  .spsbody{flex:1;display:flex;align-items:center;margin-top:14px}
  .spsbub{width:100%;background:var(--blue);color:#fff;padding:13px 15px;font-size:13.5px;font-weight:500;line-height:1.5;border-radius:14px;border-bottom-left-radius:5px}
  .spspool{width:100%;display:flex;align-items:center;justify-content:center;gap:11px}
  .spscand{width:30px;height:30px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;color:var(--mute)}
  .spscand svg{width:14px;height:14px}
  .spscand.pick{position:relative;width:44px;height:44px;background:var(--blue-tint);border:2px solid var(--green);color:var(--blue-deep);box-shadow:0 0 0 4px var(--green-tint)}
  .spscand.pick svg{width:20px;height:20px}
  .spscand.pick .tk{position:absolute;bottom:-4px;right:-4px;width:17px;height:17px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}
  .spscand.pick .tk svg{width:10px;height:10px}
  .spsmsg{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:5px;padding:11px 13px;display:flex;gap:10px;align-items:flex-start}
  .spsmsg .av{width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-size:12.5px;font-weight:800;display:grid;place-items:center;flex:none;margin-top:1px}
  .spsmsg .who{display:block;font-size:11.5px;font-weight:800;color:var(--ink);margin-bottom:3px}
  .spsmsg .tx{font-size:13px;font-weight:500;color:var(--slate);line-height:1.5}
  @media (max-width:640px){
    .spsgrid{flex-direction:column;align-items:center;gap:14px;margin-top:30px}
    .spscard{max-width:310px;width:100%}
    .spsbody{margin-top:12px}
  }

  /* step-1 quote treatment (3-step story component) */
  .spsquote{width:100%;font-size:14px;font-weight:600;color:var(--ink);line-height:1.55;text-align:left}
  .spsquote .qm{color:var(--blue);font-size:1.35em;font-weight:800;line-height:0}