/* ============================================================================
   Water Softener Quotes US (WSQUS) — shared design system.
   Tokens, resets, chrome, the wizard, and the motion layer.
   Page-specific layout stays inline on each page (fast first paint, matching the
   UK build); this file carries what must be shared or interactive.

   PALETTE: US sibling of the UK brand. Blues are the UK family; the CTA is ORANGE,
   not the UK's lime. Two reasons: lime reads as "eco/organic" to a US audience
   rather than "click me", and orange on navy is the highest-contrast pairing
   available here. Change --cta and every button follows.
   ============================================================================ */

:root{
  --navy:#0F2A5F;          /* header text, footer, wizard card, H1 */
  --navy-d:#0A1F47;
  --blue:#1E5FD1;          /* accents, links, large display type (on light grounds only) */
  --blue-text:#174AA6;     /* small blue text — AA on the tinted hero, not just on white */
  --blue-on-navy:#3B82F6;  /* selected tile fill INSIDE the navy card. #1E5FD1 only reaches
                              2.38:1 against the navy and fails the 3:1 non-text minimum —
                              it looked fine and was not. This clears it at 3.76:1. */
  --blue-l:#EFF4FE; --blue-b:#D7E4FA;

  /* CTA — lime, matching the UK site's button. Dark ink on a bright button, which is the
     pattern WSQUK already uses: #1B3309 on the lime measures 8.41:1, and 9.7:1 at the
     lighter top of the gradient. White would be 1.64:1 — nowhere near legible — so the ink
     stays dark whatever the hue.

     The hover is deliberately left as the orange it already was, per instruction. It still
     passes with this ink (5.3:1 and 6.85:1 across the gradient), so it is safe — but it is
     a hue jump rather than a shade change, so the button changes colour on mouseover rather
     than lighting up. If that reads wrong on screen, one line fixes it:
         --cta-h:#B8E86A;   and the hover gradient in the :hover rule below. */
  --cta:#A4DB4C; --cta-2:#B8E86A; --cta-h:#FF7A2E; --cta-ink:#1B3309;
  --sky:#7FD9FF;           /* focus ring inside the navy card */
  --hero:#E9F1FB;
  /* Ticks are 14px, so they need the full 4.5:1. #16A34A manages 3.3:1 on white and 3.02:1
     on the grey — it reads as "success green" but does not pass. --ok-text is the darker
     one used wherever green carries actual text or a glyph; --ok stays for larger fills. */
  --ok:#16A34A; --ok-text:#15803D; --err:#DC2626;
  --txt:#1e293b; --muted:#5B6480; --line:#E1E7F0; --bg-soft:#F3F5F9;
  --wrap:1180px; --read:760px;
  --r-card:18px; --r-btn:12px;
  --sh-rest:0 6px 18px rgba(15,42,95,.06);
  --sh-hover:0 14px 30px rgba(15,42,95,.12);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fff;font-family:'Poppins',system-ui,-apple-system,sans-serif;color:var(--txt);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{font-family:'Poppins',sans-serif;letter-spacing:-.01em;line-height:1.15;margin:0}

/* Accessibility */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wiz :focus-visible,.wsq-foot :focus-visible{outline-color:var(--sky)}
.wsq-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--blue-text);
  font-weight:800;padding:12px 18px;border-radius:0 0 12px 0}
.wsq-skip:focus{left:0}
.wsq-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ============================ HEADER ============================ */
.wsq-hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--blue-b)}
.wsq-hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:74px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.wsq-logo{display:flex;align-items:center;text-decoration:none;flex:none}
.wsq-logo img{display:block;height:46px;width:auto}
.wsq-nav{display:flex;align-items:center;gap:26px}
.wsq-nav a{text-decoration:none;font-size:15px;font-weight:600;color:var(--muted)}
.wsq-nav a:hover{color:var(--blue)}
.wsq-hdr-cta{display:flex;align-items:center;gap:12px;flex:none}
.wsq-tel{text-decoration:none;display:flex;align-items:center;gap:9px;
  border:1.5px solid var(--blue-b);border-radius:12px;padding:9px 16px}
.wsq-tel span{font-family:'Poppins',sans-serif;font-weight:800;font-size:16px;color:var(--navy)}
.wsq-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border:1.5px solid var(--blue-b);border-radius:12px;background:#fff;cursor:pointer}
.wsq-mnav{display:none;border-top:1px solid var(--blue-b);background:#fff;padding:14px 24px 18px}
.wsq-mnav a{display:block;padding:11px 0;text-decoration:none;font-weight:700;color:var(--navy);
  border-bottom:1px solid var(--bg-soft)}
.wsq-mnav-tel{text-align:center;color:var(--blue-text)!important;border-bottom:0!important}

/* ============================ CTA — the "pop" stack ============================ */
/* 1 gradient + glow, 2 hover lift, 3 press, 4 shimmer sweep, 5 arrow nudge,
   6 ripple (site.js), 7 loading state. Effects 2 and 4 are motion-gated. */
.wsq-btn-cta,.wiz-next{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Poppins',sans-serif;font-weight:900;font-size:17px;line-height:1;
  color:var(--cta-ink);text-decoration:none;cursor:pointer;border:0;
  padding:16px 30px;border-radius:var(--r-btn);
  background:linear-gradient(135deg,var(--cta-2),var(--cta));
  box-shadow:0 6px 18px rgba(164,219,76,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),filter .16s var(--ease-out)}
.wsq-btn-sm{font-size:15px;padding:12px 20px}
.wsq-btn-cta .arw,.wiz-next .arw{transition:transform .16s var(--ease-out)}
.wsq-btn-cta:active,.wiz-next:active{transform:translateY(0) scale(.98);transition-duration:.08s}
@media (hover:hover){
  .wsq-btn-cta:hover,.wiz-next:hover{transform:translateY(-2px) scale(1.02);
    background:linear-gradient(135deg,#FFA05C,var(--cta-h));
    box-shadow:0 10px 26px rgba(242,106,27,.5),inset 0 1px 0 rgba(255,255,255,.35)}
  .wsq-btn-cta:hover .arw,.wiz-next:hover .arw{transform:translateX(4px)}
}
/* Shimmer: only the wizard's own button runs it. Two shimmers on screen compete and
   neither reads as the thing to press. */
.wiz-next::after{content:"";position:absolute;top:-50%;bottom:-50%;width:42px;left:-60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);pointer-events:none}
.wiz-next:hover::after{animation-play-state:paused}
.wiz-submit.is-loading{color:transparent;pointer-events:none}
.wiz-submit.is-loading::before{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border:2.5px solid rgba(27,51,9,.25);border-top-color:var(--cta-ink);border-radius:50%;
  animation:wsqspin .7s linear infinite}
.wsq-ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(27,51,9,.18);animation:wsqripple .6s ease-out forwards}

/* ============================ WIZARD ============================ */
.wiz{position:relative;background:var(--navy);color:#fff;border-radius:var(--r-card);
  padding:28px 26px 22px;box-shadow:0 22px 48px -12px rgba(15,42,95,.45)}
.wiz-head{margin-bottom:20px}
.wiz-prog{height:3px;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden}
.wiz-prog span{display:block;height:100%;background:var(--sky);border-radius:3px;
  transition:width .4s var(--ease-out)}
.wiz-steplabel{margin-top:10px;font-size:13px;font-weight:700;color:var(--sky);letter-spacing:.02em}
.wiz-h1{font-size:25px;color:#fff;margin:0 0 6px}
.wiz-h1:focus{outline:none}
.wiz-sub{margin:0 0 18px;font-size:15px;color:rgba(255,255,255,.72)}
.wiz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:10px}
.wiz-opts-wide{grid-template-columns:1fr}
.wiz-opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  min-height:58px;padding:14px 16px;cursor:pointer;
  font-family:'Poppins',sans-serif;font-weight:800;font-size:17px;color:#fff;text-align:left;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);border-radius:var(--r-btn);
  transition:transform .18s var(--ease-out),border-color .18s,background .18s,box-shadow .18s}
.wiz-opts:not(.wiz-opts-wide) .wiz-opt{align-items:center;justify-content:center;text-align:center}
.wiz-opt small{font-weight:600;font-size:13px;color:rgba(255,255,255,.62)}
@media (hover:hover){.wiz-opt:hover{transform:translateY(-3px);border-color:var(--sky);
  background:rgba(127,217,255,.12);box-shadow:0 8px 20px -6px rgba(0,0,0,.35)}}
/* Four signals on select — colour, border, tick, weight — plus the spring as a fifth.
   Motion is never the only signal. */
.wiz-opt.is-on{background:var(--blue-on-navy);border-color:var(--sky);animation:wsqpick .32s var(--spring)}
.wiz-opt .tick{position:absolute;top:8px;right:10px;font-size:14px;color:var(--sky)}
.wiz-label{display:block;font-size:13px;font-weight:700;color:rgba(255,255,255,.8);margin-bottom:6px}
.wiz-input{width:100%;padding:15px 16px;font-size:16px;font-family:inherit;color:var(--navy);
  background:#fff;border:1.5px solid transparent;border-radius:var(--r-btn)}
.wiz-input:focus{outline:3px solid var(--sky);outline-offset:2px}
.wiz-input-zip{max-width:220px;letter-spacing:.0em;font-weight:700}
.wiz-names{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wiz-field{margin-top:14px}
.wiz-autofill-trap{opacity:0;height:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px}
.wiz-err{margin-top:10px;font-size:14px;font-weight:600;color:#FFC9C9}
.wiz-err-block{display:block;margin-top:14px}
.wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px}
.wiz-back{background:none;border:0;cursor:pointer;font-size:14px;font-weight:700;
  color:rgba(255,255,255,.65);padding:8px 2px}
.wiz-back:hover{color:#fff}
.wiz-consent{margin:16px 0 0;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.62)}
.wiz-consent a{color:var(--sky)}
.wiz-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;font-weight:600;color:rgba(255,255,255,.7)}

/* Coverage interstitial — the droplet fills bottom-to-top, then "Good news". */
.wiz-loading{text-align:center;padding:30px 0 14px}
.wiz-drop{width:54px;height:54px;margin:0 auto 20px;position:relative;
  background:rgba(255,255,255,.14);
  -webkit-mask:radial-gradient(circle at 50% 62%,#000 39%,transparent 40%) ,none;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;overflow:hidden}
.wiz-drop span{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--sky);
  animation:wsqfill 1.4s var(--ease-out) infinite}

/* ============================ FOOTER ============================ */
.wsq-foot{background:var(--navy);color:rgba(255,255,255,.78)}
.wsq-foot-in{max-width:var(--wrap);margin:0 auto;padding:54px 24px 30px}
.wsq-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.wsq-foot h3{font-size:14px;color:#fff;margin:0 0 12px;letter-spacing:.04em;text-transform:uppercase}
.wsq-foot a{color:rgba(255,255,255,.78);text-decoration:none}
.wsq-foot a:hover{color:#fff;text-decoration:underline}
.wsq-foot-grid div a{display:block;padding:5px 0;font-size:14.5px}
.wsq-foot-blurb{font-size:14px;line-height:1.6;max-width:44ch;color:rgba(255,255,255,.66)}
.wsq-foot-legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;color:rgba(255,255,255,.55)}
.wsq-foot-legal p{margin:6px 0}

/* ============================ CONTENT COMPONENTS ============================ */
.wsq-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  font-size:13.5px;font-weight:700;background:#DCFCE7;color:#166534}
.wsq-h1{font-size:44px;color:var(--navy)}
.wsq-lead{font-size:18px;color:var(--muted)}
.wsq-fact{border-left:4px solid var(--blue);background:var(--blue-l);border-radius:0 12px 12px 0;
  padding:18px 22px;margin:26px 0}
.wsq-fact b{display:block;font-family:'Poppins',sans-serif;font-size:32px;color:var(--navy);line-height:1.1}
.wsq-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0}
.wsq-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.wsq-table th,.wsq-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.wsq-table thead th{background:var(--bg-soft);color:var(--navy);font-weight:800}
.wsq-table tbody tr:nth-child(even){background:#FAFBFD}
details[data-faq]{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:10px 0}
details[data-faq] summary{list-style:none;cursor:pointer;font-weight:800;color:var(--navy);
  display:flex;justify-content:space-between;gap:16px}
details[data-faq] summary::-webkit-details-marker{display:none}
details[data-faq] [data-faq-ic]{transition:transform .2s ease;color:var(--blue)}
details[data-faq][open] [data-faq-ic]{transform:rotate(45deg)}

/* ============================ MOTION ============================ */
/* Everything below is transform/opacity only, so nothing here can move layout (CLS 0),
   and all of it is off under prefers-reduced-motion. */
@keyframes wsqspin{to{transform:rotate(360deg)}}
@keyframes wsqripple{to{transform:scale(2.6);opacity:0}}
@keyframes wsqsweep{0%{left:-60%}55%,100%{left:130%}}
@keyframes wsqpick{0%{transform:scale(1)}45%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes wsqfill{0%{height:0}70%,100%{height:100%}}
@keyframes wsqrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wsqin{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  .wiz-next::after{animation:wsqsweep 4s ease-in-out 2.5s infinite}
  [data-step]:not([hidden]){animation:wsqin .22s var(--ease-out) both}
  [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease}
  [data-reveal="in"]{opacity:1;transform:none}
  .wsq-hero-stagger>*{animation:wsqrise .5s var(--ease-out) both}
  .wsq-hero-stagger>*:nth-child(2){animation-delay:.06s}
  .wsq-hero-stagger>*:nth-child(3){animation-delay:.12s}
  .wsq-hero-stagger>*:nth-child(4){animation-delay:.18s}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  /* The submit spinner is a state, not decoration — it stays. */
  .wiz-submit.is-loading::before{animation:wsqspin 1s linear infinite!important}
}
/* No-JS: reveal everything rather than hiding content behind an observer that never runs. */
.no-js [data-reveal]{opacity:1;transform:none}

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  .wsq-foot-grid{grid-template-columns:1fr 1fr}
  .wsq-h1{font-size:34px}
}
@media (max-width:820px){
  [data-desk-nav]{display:none!important}
  .wsq-burger{display:inline-flex}
  .wsq-hdr-in{height:64px}
  .wiz{padding:22px 18px 18px;border-radius:16px}
  .wiz-h1{font-size:22px}
  .wiz-names{grid-template-columns:1fr}
  .wsq-foot-grid{grid-template-columns:1fr;gap:28px}
}

/* ============================================================================
   PPC LANDER + FUNNEL PAGES
   ============================================================================ */
.ppc-hdr .wsq-hdr-in{justify-content:space-between}
.ppc-hdr-right{display:flex;align-items:center;gap:14px}
.ppc-badge{font-size:13px;font-weight:700;color:var(--ok-text);background:#DCFCE7;padding:7px 13px;border-radius:999px}
.ppc-hero{background:linear-gradient(160deg,var(--hero) 0%,#F3F7FD 55%,#fff 100%)}
/* The hero IMAGE is set per page (each state lander uses its own regional shot), so only
   the sizing lives here. See the <style> block in ppc-landing.aspx. */
@media (min-width:821px){.ppc-hero{background-size:cover;background-position:center right}}
.ppc-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding-top:52px;padding-bottom:60px}
.wsq-h1 .accent{color:var(--blue)}
.ppc-ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.ppc-ticks li{position:relative;padding-left:28px;font-weight:600;color:#334155}
.ppc-ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--ok-text);font-weight:900}
.ppc-card{position:relative}
/* The wizard card supplies its own shadow and radius (.wiz-card), so this wrapper is
   positioning only — adding a second shadow here muddies both. */

/* Once the wizard starts, everything below the hero goes. Someone mid-wizard has no use for
   the sales copy and it only offers them somewhere else to go. */
body.wiz-started .ppc-below{display:none}
body.wiz-step6 .ppc-hdr{position:static}
body.wiz-step6 .ppc-hdr-right{display:none}

.ppc-band{padding:56px 0}
.ppc-band-alt{background:var(--bg-soft)}
.ppc-band h2{font-size:30px;color:var(--navy);margin-bottom:26px}
.ppc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ppc-tiles div{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px;
  box-shadow:var(--sh-rest)}
.ppc-tiles b{display:block;font-family:'Poppins',sans-serif;font-size:40px;color:var(--blue);line-height:1}
.ppc-tiles span{display:block;margin-top:8px;font-size:14.5px;color:var(--muted)}
.ppc-src{margin-top:16px;font-size:13px;color:var(--muted)}
.ppc-src a{color:var(--blue-text)}
.ppc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ppc-cols h3{font-size:18px;color:var(--navy);margin-bottom:8px}
.ppc-cols p{margin:0;color:var(--muted);font-size:15px}
.ppc-steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:18px}
.ppc-steps li{counter-increment:s;position:relative;padding-left:56px}
.ppc-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--blue);color:#fff;font-family:'Poppins',sans-serif;font-weight:900}
.ppc-steps b{display:block;color:var(--navy);font-size:17px}
.ppc-steps span{color:var(--muted);font-size:15px}
.ppc-cta-band{margin-top:32px}
.ppc-foot{background:var(--navy);color:rgba(255,255,255,.6);padding:30px 0;margin-top:40px;font-size:12.5px}
.ppc-foot p{margin:6px 0}
.ppc-foot a{color:rgba(255,255,255,.78)}

/* ---- wizard page + thank-you ---- */
.wiz-page{background:linear-gradient(160deg,var(--hero) 0%,#fff 70%);padding:44px 0 64px}
.wiz-page-in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.wiz-pitch h1{font-size:34px;color:var(--navy)}
.wiz-pitch p{color:var(--muted);font-size:17px}
.wsq-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px;
  box-shadow:var(--sh-rest)}
.wsq-narrow{padding-top:8px}

.ty-range{background:var(--navy);color:#fff;border-radius:var(--r-card);padding:34px 30px;
  box-shadow:0 22px 48px -14px rgba(15,42,95,.45);margin-top:24px}
.ty-range-figs{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-family:'Poppins',sans-serif;font-weight:900;line-height:1}
.ty-range-figs .lo,.ty-range-figs .hi{font-size:52px}
.ty-range-figs .dash{font-size:34px;color:var(--sky)}
.ty-range-sub{margin:14px 0 0;color:rgba(255,255,255,.72);font-size:15px}
.ty-well{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);
  color:var(--sky);font-size:14.5px;font-weight:600}
.ty-next{list-style:none;counter-reset:t;padding:0;margin:16px 0 0;display:grid;gap:16px}
.ty-next li{counter-increment:t;position:relative;padding-left:44px}
.ty-next li::before{content:counter(t);position:absolute;left:0;top:2px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--blue-l);color:var(--blue-text);font-weight:900;font-size:14px}
.ty-next b{display:block;color:var(--navy)}
.ty-next span{color:var(--muted);font-size:15px}
.ty-links{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.ty-links h3{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:10px}
.ty-links a{display:block;padding:9px 0;color:var(--blue-text);font-weight:700;text-decoration:none}
.ty-links a:hover{text-decoration:underline}

@media (max-width:820px){
  .ppc-hero-in,.wiz-page-in{grid-template-columns:1fr;gap:28px;padding-top:30px}
  /* Mobile gets the gradient, never the hero image: on a paid click, downloading a hero
     for a phone is the most expensive thing this page could do. */
  .ppc-hero{background-image:none}
  .ppc-tiles,.ppc-cols{grid-template-columns:1fr}
  .ppc-band h2{font-size:24px}
  .ty-range-figs .lo,.ty-range-figs .hi{font-size:38px}
}

/* ============================================================================
   CONTENT PAGES — the reading layout, shared by every guide and state page.
   ============================================================================ */
.cp-hero{background:linear-gradient(160deg,var(--hero) 0%,#F5F8FD 60%,#fff 100%);padding:44px 0 38px}
.cp-eyebrow{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.cp-hero h1{font-size:40px;color:var(--navy);margin:10px 0 0;max-width:19ch}
/* The answer-first paragraph. This is the AEO snippet: it must answer the page's question
   outright, in under 50 words, with a number in it. Everything else on the page supports it. */
.cp-answer{margin:16px 0 0;font-size:19px;line-height:1.55;color:var(--navy);max-width:62ch;font-weight:500}
.cp-byline{margin-top:18px;font-size:13.5px;color:var(--muted)}
.cp-byline b{color:var(--navy)}

.cp-body{display:grid;grid-template-columns:minmax(0,var(--read)) 300px;gap:52px;
  max-width:var(--wrap);margin:0 auto;padding:42px 24px 0;align-items:start}
.cp-article h2{font-size:29px;color:var(--navy);margin:42px 0 12px;padding-left:16px;
  border-left:3px solid var(--blue)}
.cp-article h3{font-size:20px;color:var(--navy);margin:28px 0 8px}
.cp-article p{margin:0 0 16px;font-size:17px;line-height:1.7}
.cp-article ul,.cp-article ol{margin:0 0 18px;padding-left:22px}
.cp-article li{margin-bottom:8px;font-size:17px;line-height:1.65}
.cp-article a{color:var(--blue-text);font-weight:600}
.cp-sources{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.cp-sources a{color:var(--muted)}

/* Sticky sidebar: table of contents, then the price card that stays in view. */
.cp-side{position:sticky;top:96px;display:grid;gap:18px}
.cp-toc{border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.cp-toc h4{margin:0 0 10px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cp-toc a{display:block;padding:6px 0;font-size:14.5px;color:var(--muted);text-decoration:none;
  border-left:2px solid transparent;padding-left:12px;margin-left:-12px;transition:color .15s,border-color .15s}
.cp-toc a:hover{color:var(--navy)}
.cp-toc a.is-on{color:var(--blue-text);font-weight:700;border-left-color:var(--blue)}
.cp-pricecard{background:var(--navy);color:#fff;border-radius:14px;padding:20px}
.cp-pricecard h4{margin:0 0 6px;font-size:13px;color:var(--sky);text-transform:uppercase;letter-spacing:.05em}
.cp-pricecard b{display:block;font-family:'Poppins',sans-serif;font-size:27px;line-height:1.15}
.cp-pricecard span{display:block;margin:6px 0 14px;font-size:13.5px;color:rgba(255,255,255,.7)}
.cp-pricecard .wsq-btn-cta{width:100%;font-size:15px;padding:13px 18px}

/* Mid-article CTA band — one per ~600 words, never two in view at once. */
.cp-ctaband{background:var(--blue-l);border:1px solid var(--blue-b);border-radius:var(--r-card);
  padding:26px 28px;margin:38px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cp-ctaband p{margin:0;font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;color:var(--navy)}
.cp-ctaband .wsq-btn-cta{flex:none}

.cp-proscons{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}
.cp-proscons>div{border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.cp-proscons h4{margin:0 0 10px;font-size:15px}
.cp-proscons ul{list-style:none;padding:0;margin:0}
.cp-proscons li{position:relative;padding-left:24px;font-size:15px;margin-bottom:8px}
.cp-pros li::before{content:"\2713";position:absolute;left:0;color:var(--ok-text);font-weight:900}
.cp-cons li::before{content:"\2013";position:absolute;left:0;color:var(--muted);font-weight:900}

/* The wizard embed that closes every content page. */
.cp-embed{background:var(--bg-soft);padding:52px 0;margin-top:48px}
.cp-embed-in{max-width:880px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;
  gap:40px;align-items:center}
.cp-embed h2{font-size:28px;color:var(--navy);margin-bottom:10px}
.cp-embed p{color:var(--muted);font-size:16px}

@media (max-width:1020px){
  .cp-body{grid-template-columns:1fr;gap:0}
  .cp-side{position:static;margin-top:34px}
  .cp-toc{display:none}
}
@media (max-width:820px){
  .cp-hero h1{font-size:30px}
  .cp-answer{font-size:17px}
  .cp-article h2{font-size:23px}
  .cp-ctaband{flex-direction:column;align-items:stretch;text-align:center}
  .cp-proscons,.cp-embed-in{grid-template-columns:1fr}
}

/* ============================================================================
   HOME
   ============================================================================ */
.hm-hero{background:linear-gradient(160deg,var(--hero) 0%,#EFF4FE 55%,#fff 100%)}
/* The home hero photo is a real <img> in a card (the defaultv2 pattern), not a background
   image — so it is discoverable in the markup, gets proper alt text, and holds its own
   aspect ratio. The section keeps only the gradient. */
.hm-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;
  padding-top:54px;padding-bottom:62px}
.hm-ticks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:20px 0 0;font-weight:600;color:#334155}
.hm-ticks span{display:flex;align-items:center;gap:8px}
.hm-ticks span::before{content:"\2713";color:var(--ok-text);font-weight:900}
.hm-band{padding:54px 0}
.hm-band-alt{background:var(--bg-soft)}
.hm-band h2{font-size:31px;color:var(--navy);margin-bottom:8px}
.hm-band .sub{color:var(--muted);font-size:17px;margin:0 0 26px;max-width:62ch}
.hm-symptoms{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hm-symptom{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff;
  box-shadow:var(--sh-rest);transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
@media (hover:hover){.hm-symptom:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}}
.hm-symptom img{display:block;width:100%;height:170px;object-fit:cover;aspect-ratio:4/3;background:var(--bg-soft)}
.hm-symptom div{padding:16px 18px 20px}
.hm-symptom b{display:block;color:var(--navy);font-family:'Poppins',sans-serif;font-size:17px}
.hm-symptom span{display:block;margin-top:5px;font-size:14.5px;color:var(--muted)}
.hm-three{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hm-three h3{font-size:19px;color:var(--navy);margin-bottom:8px}
.hm-three p{margin:0;color:var(--muted);font-size:15.5px}
.hm-types{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hm-type{border:1px solid var(--line);border-radius:var(--r-card);padding:26px;background:#fff;
  box-shadow:var(--sh-rest);display:flex;flex-direction:column}
@media (hover:hover){.hm-type:hover{box-shadow:var(--sh-hover)}}
.hm-type h3{font-size:19px;color:var(--navy)}
.hm-type .pr{display:block;margin:10px 0 12px;font-family:'Poppins',sans-serif;font-weight:900;
  font-size:23px;color:var(--blue)}
.hm-type p{margin:0;font-size:15px;color:var(--muted)}
/* The two guide links under the cards were floating loose. Pull them up and mark them as a
   pair rather than a sentence that happens to contain links. */
.hm-typelinks{display:flex;flex-wrap:wrap;gap:10px 24px;margin:22px 0 0}
.hm-typelinks a{color:var(--blue-text);font-weight:700;text-decoration:none;font-size:15px}
.hm-typelinks a:hover{text-decoration:underline}
.hm-faq{max-width:var(--read);margin:0 auto}
@media (max-width:900px){
  .hm-hero-in{grid-template-columns:1fr;gap:30px;padding-top:32px}
  .hm-symptoms,.hm-three,.hm-types{grid-template-columns:1fr}
  .hm-band h2{font-size:25px}
}

/* ---- OTP page: the platform control renders its own markup, so this styles it from the
   outside rather than replacing it. ---- */
.otp-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px;box-shadow:var(--sh-rest);margin-top:22px}
.otp-card .confirm_code h2{font-size:20px;color:var(--navy);margin:0 0 10px}
.otp-card input[type=text],.otp-card input[type=tel],.otp-card input[type=number]{
  width:100%;max-width:240px;padding:15px 16px;font-size:20px;font-weight:800;letter-spacing:.3em;
  color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-btn)}
.otp-card input:focus{outline:3px solid var(--blue);outline-offset:2px}
.otp-card .btnOTPCode,.otp-card input[type=submit],.otp-card .btn{
  display:inline-flex;align-items:center;justify-content:center;margin-top:18px;
  font-family:'Poppins',sans-serif;font-weight:900;font-size:17px;color:var(--cta-ink);
  border:0;cursor:pointer;padding:16px 30px;border-radius:var(--r-btn);
  background:linear-gradient(135deg,var(--cta-2),var(--cta));
  box-shadow:0 6px 18px rgba(164,219,76,.45)}
.otp-card .btnOTPCode:hover,.otp-card input[type=submit]:hover{filter:brightness(1.04)}
.otp-help{margin-top:24px;font-size:14.5px;color:var(--muted)}
.otp-help p{margin:8px 0}
.otp-help a{color:var(--blue-text);font-weight:700}
.otp-help .fine{font-size:12.5px;margin-top:14px}

/* ---- Legal pages: narrower measure, tighter type, no CTA furniture. ---- */
.lg-article h2{font-size:24px;margin-top:36px}
.lg-article h3{font-size:17px;margin-top:22px}
.lg-article p,.lg-article li{font-size:16px;line-height:1.65}
.lg-notice{background:#FEF3C7;border:1px solid #FCD34D;border-radius:12px;padding:16px 20px;
  margin-bottom:28px;font-size:15px;color:#78350F}
.lg-notice strong{display:block;margin-bottom:4px}
body.pg-legal .cp-hero{padding-bottom:26px}

/* ---- Legal request form (do-not-sell) ---- */
.lg-form{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px;margin:18px 0 8px;display:grid;gap:16px}
.lg-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lg-lab{color:var(--navy)!important;font-size:13.5px}
.lg-lab .opt{font-weight:500;color:var(--muted)}
.lg-input{width:100%;padding:13px 14px;font-size:16px;font-family:inherit;color:var(--txt);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-btn)}
.lg-input:focus{outline:3px solid var(--blue);outline-offset:2px}
.lg-fieldset{border:0;padding:0;margin:0}
.lg-fieldset legend{padding:0;margin-bottom:8px;font-weight:700}
.lg-checks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.lg-checks li label{font-size:15.5px;margin-left:8px}
.lg-agent{font-size:13.5px;color:var(--muted);margin:0}
.lg-gpc{background:#DCFCE7;border:1px solid #86EFAC;border-radius:12px;padding:16px 20px;
  margin-bottom:26px;font-size:15px;color:#166534}
.lg-gpc strong{display:block;margin-bottom:4px}
.lg-done{background:#DCFCE7;border:1px solid #86EFAC;border-radius:var(--r-card);padding:24px;margin:18px 0}
.lg-done h3{color:#166534;margin:0 0 10px}
@media (max-width:820px){.lg-row{grid-template-columns:1fr}}

/* Honeypot: off-screen rather than display:none — some bots skip hidden fields. */
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}

/* One line of local proof on a state lander, directly under the lead. A state page whose
   only state-specific content is the H1 reads as the national page with a word swapped. */
.ppc-hardness{margin:16px 0 0;padding:12px 16px;border-left:3px solid var(--blue);
  background:rgba(255,255,255,.62);border-radius:0 10px 10px 0;
  font-size:15.5px;color:var(--navy);max-width:56ch}

/* ============================================================================
   WIZARD LAYOUTS
   The steps are identical in all three; only the wrapper differs.
     .wiz            plain embed — foot of the content pages, navy card
     .wiz-rail       get-quotes.aspx — rail + step column
     .wiz-card       PPC landers — compact card in the hero
   ============================================================================ */

/* ---- RAIL (get-quotes.aspx) ---- */
.wiz.wiz-rail{display:grid;grid-template-columns:300px 1fr;gap:0;padding:0;
  background:#fff;border:1px solid #E6ECF5;border-radius:22px;overflow:hidden;
  box-shadow:0 18px 44px rgba(15,42,95,.12);color:var(--txt)}
.wiz-rail .wiz-rail{display:flex} /* no-op guard if nested */
aside.wiz-rail{background:linear-gradient(160deg,var(--navy-d),var(--navy));color:#fff;
  padding:30px 26px;display:flex;flex-direction:column;gap:24px}
.wiz-rail-logo{display:block}
.wiz-rail-logo img{height:44px;width:auto;display:block}
.wiz-pitch{font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;line-height:1.3;margin:0;color:#fff}
.wiz-prog-title{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:700}
.wiz-prog-row{display:flex;justify-content:space-between;gap:10px;font-size:14px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.wiz-prog-row span:last-child{font-weight:800;color:var(--sky)}
aside.wiz-rail .wiz-trust{display:flex;flex-direction:column;gap:8px;margin-top:auto;
  font-size:13.5px;border:0;padding:0}
aside.wiz-rail .wiz-trust div{display:flex;gap:8px;align-items:center;color:rgba(255,255,255,.85)}
aside.wiz-rail .wiz-trust span{color:var(--sky);font-weight:900}

/* The step column on the rail layout is light, so the step type inverts from the
   navy-card version — everything inside .wiz-body here sits on white. */
.wiz-rail .wiz-body{padding:34px 40px 40px;background:#fff}
.wiz-rail .wiz-h1{color:var(--navy);font-size:30px}
.wiz-rail .wiz-sub{color:var(--muted)}
.wiz-rail .wiz-steplabel{font-family:'Poppins',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text)}
.wiz-rail .wiz-prog{height:8px;background:#EFF1F8;border-radius:999px;margin:10px 0 26px}
.wiz-rail .wiz-prog span{background:linear-gradient(90deg,var(--navy),var(--blue))}
.wiz-rail .wiz-opt{color:var(--navy);background:#F0F5FF;border:2px solid var(--blue-b)}
.wiz-rail .wiz-opt small{color:var(--muted)}
.wiz-rail .wiz-opt.is-on{background:var(--blue-l);border-color:var(--blue);
  box-shadow:0 8px 20px rgba(15,42,95,.15)}
.wiz-rail .wiz-opt .tick{color:var(--ok-text)}
.wiz-rail .wiz-label{color:var(--navy)}
.wiz-rail .wiz-input{border:2px solid var(--blue-b);background:#F7FAFF}
.wiz-rail .wiz-err{color:var(--err)}
.wiz-rail .wiz-consent{color:var(--muted)}
.wiz-rail .wiz-consent a{color:var(--blue-text)}
.wiz-rail .wiz-loading .wiz-h1{color:var(--navy)}
.wiz-rail .wiz-drop{background:var(--blue-b)}
.wiz-rail .wiz-back{background:#fff;border:2px solid var(--blue-b);color:var(--navy)}
.wiz-rail .wiz-back:hover{border-color:var(--blue);color:var(--blue-text)}

/* Nav stacked, primary on top. On a phone the thumb sits at the bottom of the screen,
   so a full-width primary above a full-width Back is both easier to hit and harder to
   mis-hit than a left/right pair. */
.wiz-rail .wiz-nav,.wiz-card .wiz-nav{display:flex;flex-direction:column-reverse;
  align-items:stretch;gap:12px;margin-top:28px}
.wiz-rail .wiz-nav > span,.wiz-card .wiz-nav > span{display:none}
.wiz-rail .wiz-next,.wiz-card .wiz-next{width:100%}
.wiz-rail .wiz-back,.wiz-card .wiz-back{width:100%;text-align:center;padding:13px 20px;
  border-radius:var(--r-btn)}

/* Standalone shell around the rail card */
.wiz-shell{max-width:1000px;margin:0 auto;padding:28px 20px 56px}
.wiz-back-home{display:inline-flex;align-items:center;gap:8px;color:var(--muted);
  text-decoration:none;font-size:14px;font-weight:600;margin:0 0 16px;padding:0}
.wiz-back-home:hover{color:var(--blue-text)}

/* ---- CARD (PPC landers) ---- */
.wiz.wiz-card{padding:0;background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 22px 48px -12px rgba(15,42,95,.4);color:var(--txt)}
.wiz-cardhead{background:linear-gradient(160deg,var(--navy-d),var(--navy));color:#fff;padding:20px 24px}
.wiz-cardhead h2{font-size:21px;margin:0;color:#fff}
.wiz-cardhead p{margin:5px 0 0;font-size:14px;color:rgba(255,255,255,.72)}
.wiz-card .wiz-body{padding:24px}
.wiz-card .wiz-h1{color:var(--navy);font-size:22px}
.wiz-card .wiz-sub{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.wiz-card .wiz-steplabel{color:var(--blue-text);font-weight:800;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase}
.wiz-card .wiz-prog{height:7px;background:#EFF1F8;border-radius:999px;margin:8px 0 20px}
.wiz-card .wiz-prog span{background:linear-gradient(90deg,var(--navy),var(--blue))}
.wiz-card .wiz-opt{color:var(--navy);background:#F0F5FF;border:2px solid var(--blue-b);min-height:52px}
.wiz-card .wiz-opt small{color:var(--muted)}
.wiz-card .wiz-opt.is-on{background:var(--blue-l);border-color:var(--blue)}
.wiz-card .wiz-opt .tick{color:var(--ok-text)}
.wiz-card .wiz-label{color:var(--navy)}
.wiz-card .wiz-input{border:2px solid var(--blue-b);background:#F7FAFF}
.wiz-card .wiz-err{color:var(--err)}
.wiz-card .wiz-consent{color:var(--muted)}
.wiz-card .wiz-consent a{color:var(--blue-text)}
.wiz-card .wiz-loading .wiz-h1{color:var(--navy)}
.wiz-card .wiz-drop{background:var(--blue-b)}
.wiz-card .wiz-back{background:#fff;border:2px solid var(--blue-b);color:var(--navy)}
.wiz-foottrust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted)}

@media (max-width:860px){
  .wiz.wiz-rail{grid-template-columns:1fr}
  /* The rail goes below the steps on a phone and sheds the pitch and the progress
     list — on a small screen those push the first question off the fold, which is
     the one thing that must not happen. */
  aside.wiz-rail{order:2;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px;padding:18px 22px}
  .wiz-pitch,.wiz-progress{display:none}
  aside.wiz-rail .wiz-trust{flex-direction:row;flex-wrap:wrap;margin:0}
  .wiz-rail .wiz-body{order:1;padding:26px 22px 30px}
  .wiz-rail .wiz-h1{font-size:25px}
  .wiz-rail .wiz-opts{grid-template-columns:repeat(3,1fr)}
}

/* ---- PPC standalone chrome (no master, so the header/footer live here) ---- */
.ppc-hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--blue-b)}
.ppc-hdr-bar{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:70px;
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.ppc-hdr-right{display:flex;align-items:center;gap:14px}
.ppc-phone{display:flex;flex-direction:column;text-decoration:none;
  font-family:'Poppins',sans-serif;font-weight:800;font-size:17px;color:var(--navy);line-height:1.1}
.ppc-phone small{font-weight:500;font-size:11.5px;color:var(--muted);margin-top:2px}
/* The whole header sheds on the contact step — at that point the visitor is typing and
   anything else on screen is competition. */
body.wiz-step6 .ppc-hdr{position:static}
body.wiz-step6 .ppc-hdr-right{display:none}
/* Focus mode: once the wizard is under way, only header + hero remain. */
body.wiz-started .below-hero{display:none}
@media (max-width:820px){
  .ppc-hdr-right .wsq-btn-cta,.ppc-phone{display:none}
  .ppc-hdr-bar{height:60px}
}

/* ============================================================================
   HOME HERO (defaultv2 pattern) + CTA BANDS
   The wizard lives on its own page; every CTA on the organic site points at it.
   ============================================================================ */
.hm-hero-img{display:block}
.wsq-hero-photo{border-radius:24px;overflow:hidden;box-shadow:0 22px 48px -12px rgba(15,42,95,.35);
  background:var(--bg-soft)}
.wsq-hero-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.wsq-herocard{background:#fff;border-radius:20px;box-shadow:0 14px 28px -6px rgba(30,95,209,.35);
  padding:22px;margin-top:24px;max-width:560px}
.hm-hero-btn{width:100%;justify-content:center;font-size:18px;padding:16px 34px}
.wsq-herocard-note{text-align:center;font-size:13.5px;color:var(--muted);margin-top:14px}
.wsq-herocard-trust{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;color:#334155}
.hm-herostats{display:flex;gap:34px;margin-top:28px;flex-wrap:wrap}
.hm-herostats b{display:block;font-family:'Poppins',sans-serif;font-weight:900;font-size:26px;
  color:var(--navy);line-height:1.1}
.hm-herostats span{display:block;font-size:13px;color:var(--muted);margin-top:2px}

/* Mid-page CTA. Two problems with the first version: it added 56px of its own padding on
   top of the 58px the bands either side already carry, leaving a hole big enough to look
   like a broken section; and a bare button floating in whitespace with nothing holding it
   reads as a stray element rather than a deliberate one. Now a contained panel with its
   own modest spacing. */
.hm-midcta{padding:0 0 10px}
.hm-midcta .wsq-wrap{max-width:720px}
.hm-midcta-panel{text-align:center;background:var(--blue-l);border:1px solid var(--blue-b);
  border-radius:var(--r-card);padding:30px 28px}
.hm-midcta-panel h3{font-size:21px;color:var(--navy);margin:0 0 8px}
.hm-midcta-panel p{margin:14px 0 0;font-size:13.5px;color:var(--muted)}

/* ---- Shared closing CTA band (guides, state pages) ---- */
/* max-width without margin:auto left the box hard against the left of the wrap while the
   text inside it was centred — which reads as a layout bug rather than a choice. */
.cp-cta-final{text-align:center;max-width:680px;margin:0 auto}
.cp-cta-final h2{font-size:28px;color:var(--navy);margin-bottom:10px}
.cp-cta-final p{color:var(--muted);font-size:16px;margin:0 0 22px}
.cp-cta-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-top:18px;
  font-size:13px;font-weight:600;color:var(--muted)}

/* ---- The same band, inverted, as the home page's closing section ----
   These MUST come after the shared rules above. .hm-final h2 and .cp-cta-final h2 have
   identical specificity, so when the light-ground rules were declared last they won and the
   heading rendered navy on navy — invisible — with the paragraph in grey on navy underneath.
   Ordering alone is fragile, so these are scoped through .hm-final as well. */
.hm-final{background:var(--navy);padding:60px 0}
.hm-final .cp-cta-final h2{color:#fff}
.hm-final .cp-cta-final p{color:rgba(255,255,255,.75)}
.hm-final .cp-cta-trust{color:rgba(255,255,255,.8)}
.hm-final .cp-cta-trust span{color:rgba(255,255,255,.8)}

/* ---- STATE PAGE HERO: copy left, regional photo right ---- */
.st-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.st-hero-in h1{max-width:none}
.st-hero-cta{margin:22px 0 0}
.st-hero-img{border-radius:20px;overflow:hidden;box-shadow:0 18px 40px -12px rgba(15,42,95,.32);
  background:var(--bg-soft)}
.st-hero-img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

@media (max-width:900px){
  .hm-hero-in,.st-hero-in{grid-template-columns:1fr;gap:28px}
  /* Photo below the copy on a phone: the headline and the CTA are what have to be on the
     fold, not the picture. */
  .hm-hero-img,.st-hero-img{order:2}
  .hm-herostats{gap:22px}
  .hm-herostats b{font-size:22px}
}

/* ============================================================================
   HOME — enquiry verification + 3-step process refresh
   Scoped to .pg-home so PPC landing pages keep their compact list treatment.
   ============================================================================ */
.pg-home .hm-section-head{max-width:760px;margin-bottom:30px}
.pg-home .hm-section-head .sub{margin-bottom:0}
.pg-home .hm-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;
  padding:7px 11px;border:1px solid var(--blue-b);border-radius:999px;background:#fff;
  color:var(--blue-text);font-size:12px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(15,42,95,.04)}
.pg-home .hm-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok-text);
  box-shadow:0 0 0 4px rgba(21,128,61,.10)}

/* Verification cards: strong enough to read as a system, without looking like testimonials. */
.pg-home .hm-check-band{position:relative;overflow:hidden}
.pg-home .hm-check-band::before{content:"";position:absolute;width:430px;height:430px;right:-180px;top:-220px;
  border-radius:50%;background:radial-gradient(circle,rgba(30,95,209,.10),rgba(30,95,209,0) 68%);pointer-events:none}
.pg-home .hm-check-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pg-home .hm-check-card{position:relative;min-height:286px;padding:24px 24px 20px;background:#fff;
  border:1px solid #DDE6F2;border-radius:20px;box-shadow:0 10px 28px rgba(15,42,95,.07);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s ease}
.pg-home .hm-check-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue),#62A6FF);opacity:.9}
.pg-home .hm-check-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.pg-home .hm-check-icon{position:relative;width:46px;height:46px;border-radius:14px;background:var(--blue-l);
  border:1px solid var(--blue-b);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.pg-home .hm-check-step{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-text);background:#F5F8FD;border:1px solid var(--line);border-radius:999px;padding:6px 9px}
.pg-home .hm-check-card h3{font-size:19px;color:var(--navy);margin:0 0 9px}
.pg-home .hm-check-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.65}
.pg-home .hm-check-proof{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;
  color:#31506F;font-size:13px;font-weight:700}
.pg-home .hm-check-proof span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:#DCFCE7;color:#166534;font-size:12px}
.pg-home .hm-check-note{position:relative;display:flex;align-items:flex-start;gap:13px;margin-top:18px;padding:17px 18px;
  background:linear-gradient(135deg,#F8FBFF,#EEF5FF);border:1px solid var(--blue-b);border-radius:15px}
.pg-home .hm-check-note-mark{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--navy);color:#fff;font-size:13px;font-weight:900}
.pg-home .hm-check-note p{margin:1px 0 0;color:#42536A;font-size:14px;line-height:1.55}
.pg-home .hm-check-note strong{color:var(--navy)}

/* Tiny CSS line icons; no external icon set or extra request. */
.pg-home .hm-check-icon-phone::before{content:"";position:absolute;left:15px;top:10px;width:15px;height:24px;
  border:2px solid var(--blue);border-radius:4px}
.pg-home .hm-check-icon-phone::after{content:"";position:absolute;left:20px;bottom:9px;width:5px;height:2px;
  border-radius:2px;background:var(--blue)}
.pg-home .hm-check-icon-doc::before{content:"";position:absolute;left:14px;top:10px;width:18px;height:24px;
  border:2px solid var(--blue);border-radius:3px;background:linear-gradient(var(--blue),var(--blue)) 4px 7px/9px 2px no-repeat,
  linear-gradient(var(--blue),var(--blue)) 4px 12px/9px 2px no-repeat,
  linear-gradient(var(--blue),var(--blue)) 4px 17px/6px 2px no-repeat}
.pg-home .hm-check-icon-review::before{content:"";position:absolute;left:13px;top:13px;width:20px;height:20px;
  border:2px solid var(--blue);border-radius:50%}
.pg-home .hm-check-icon-review::after{content:"";position:absolute;left:19px;top:18px;width:8px;height:5px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}

@media (hover:hover){
  .pg-home .hm-check-card:hover{transform:translateY(-5px);border-color:#C6D9F4;
    box-shadow:0 18px 40px rgba(15,42,95,.12)}
}

/* Three-step journey: connected cards with a contained CTA footer. */
.pg-home .hm-process-head{text-align:center;margin-left:auto;margin-right:auto}
.pg-home .hm-process-head .sub{margin-left:auto;margin-right:auto}
.pg-home .hm-process-shell{background:#fff;border:1px solid #DCE5F0;border-radius:24px;padding:28px;
  box-shadow:0 14px 34px rgba(15,42,95,.08)}
.pg-home .ppc-steps.hm-process-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  counter-reset:s;padding:0;margin:0;overflow:visible}
.pg-home .ppc-steps.hm-process-steps::before{content:"";position:absolute;left:16.67%;right:16.67%;top:25px;height:2px;
  background:linear-gradient(90deg,#BFD3F4,#8FB8F0,#BFD3F4);z-index:0}
.pg-home .ppc-steps.hm-process-steps li{counter-increment:s;position:relative;z-index:1;padding:68px 22px 22px;
  min-height:220px;background:linear-gradient(180deg,#fff 0%,#FBFCFE 100%);border:1px solid var(--line);
  border-radius:18px;box-shadow:0 6px 18px rgba(15,42,95,.045);text-align:left}
.pg-home .ppc-steps.hm-process-steps li::before{content:counter(s);position:absolute;left:22px;top:0;
  transform:translateY(-1px);width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  border:6px solid #fff;border-radius:50%;background:linear-gradient(145deg,var(--navy),var(--blue));color:#fff;
  font-family:'Poppins',sans-serif;font-weight:900;font-size:17px;box-shadow:0 6px 16px rgba(30,95,209,.22)}
.pg-home .ppc-steps.hm-process-steps li::after{content:"";position:absolute;top:18px;left:76px;width:20px;height:12px;
  border-top:2px solid var(--blue-b);opacity:.9}
.pg-home .ppc-steps.hm-process-steps li:last-child::after{display:none}
.pg-home .ppc-steps.hm-process-steps .hm-step-kicker{display:inline-flex;width:auto;margin:0 0 9px;padding:5px 8px;
  border-radius:7px;background:var(--blue-l);color:var(--blue-text);font-size:11.5px;font-weight:800;
  letter-spacing:.035em;text-transform:uppercase}
.pg-home .ppc-steps.hm-process-steps b{font-size:18px;line-height:1.3;color:var(--navy);margin-bottom:8px}
.pg-home .ppc-steps.hm-process-steps li>span:not(.hm-step-kicker){display:block;color:var(--muted);font-size:14.5px;line-height:1.62}
.pg-home .hm-process-action{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;
  padding:20px 22px;border-radius:16px;background:linear-gradient(100deg,var(--navy-d),var(--navy));color:#fff}
.pg-home .hm-process-action div{display:grid;gap:3px}
.pg-home .hm-process-action strong{font-size:16px}
.pg-home .hm-process-action div span{font-size:13px;color:rgba(255,255,255,.68)}
.pg-home .hm-process-action .wsq-btn-cta{flex:none;font-size:15px;padding:14px 20px}

@media (hover:hover){
  .pg-home .ppc-steps.hm-process-steps li{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s ease}
  .pg-home .ppc-steps.hm-process-steps li:hover{transform:translateY(-4px);border-color:#C9D9EF;
    box-shadow:0 12px 28px rgba(15,42,95,.09)}
}

@media (max-width:900px){
  .pg-home .hm-check-grid{grid-template-columns:1fr}
  .pg-home .hm-check-card{min-height:0}
  .pg-home .ppc-steps.hm-process-steps{grid-template-columns:1fr;gap:14px}
  .pg-home .ppc-steps.hm-process-steps::before{left:24px;right:auto;top:25px;bottom:25px;width:2px;height:auto;
    background:linear-gradient(180deg,#BFD3F4,#8FB8F0,#BFD3F4)}
  .pg-home .ppc-steps.hm-process-steps li{min-height:0;padding:22px 20px 22px 82px}
  .pg-home .ppc-steps.hm-process-steps li::before{left:0;top:18px;transform:translateX(-1px);width:50px;height:50px}
  .pg-home .ppc-steps.hm-process-steps li::after{display:none}
  .pg-home .hm-process-action{align-items:stretch;flex-direction:column}
  .pg-home .hm-process-action .wsq-btn-cta{width:100%}
}

@media (max-width:560px){
  .pg-home .hm-section-head{margin-bottom:22px}
  .pg-home .hm-process-shell{padding:18px;border-radius:18px}
  .pg-home .ppc-steps.hm-process-steps li{padding:18px 16px 18px 70px}
  .pg-home .ppc-steps.hm-process-steps li::before{width:44px;height:44px;top:16px;border-width:5px}
  .pg-home .ppc-steps.hm-process-steps::before{left:21px}
  .pg-home .hm-check-card{padding:20px}
  .pg-home .hm-check-note{padding:15px}
}

/* ============================================================================
   WIZARD TAP CONTROLS — app-style interaction refresh
   Makes every answer feel like an intentional, touch-first selection control.
   Markup and wizard behaviour stay unchanged.
   ============================================================================ */

/* Give answer groups more breathing room so each control reads as a separate action. */
.wiz-opts{gap:12px}
.wiz-opts-wide{gap:12px}

/* Base tap target — tactile card rather than a flat bordered row. */
.wiz-opt{
  min-height:64px;
  padding:15px 48px 15px 18px;
  border-radius:16px;
  border-width:2px;
  line-height:1.25;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
  box-shadow:0 2px 0 rgba(15,42,95,.03),0 7px 18px rgba(15,42,95,.055);
  transition:transform .14s var(--ease-out),border-color .16s ease,background .16s ease,
    box-shadow .16s ease,color .16s ease;
}

/* Wide question rows get a familiar app-navigation affordance on the right. */
.wiz-opts-wide .wiz-opt::after{
  content:"\203A";
  position:absolute;
  right:16px;
  top:50%;
  width:30px;
  height:30px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(30,95,209,.08);
  color:var(--blue-text);
  font-size:25px;
  font-weight:700;
  line-height:1;
  transition:transform .16s var(--ease-out),background .16s ease,color .16s ease,opacity .12s ease;
}

/* Compact number choices behave more like selectable app tiles. */
.wiz-opts:not(.wiz-opts-wide) .wiz-opt{
  min-height:68px;
  padding:14px 12px;
  border-radius:16px;
  font-size:18px;
  box-shadow:0 5px 14px rgba(15,42,95,.05);
}
.wiz-opts:not(.wiz-opts-wide) .wiz-opt::after{
  content:"";
  position:absolute;
  top:8px;
  right:8px;
  width:9px;
  height:9px;
  border:2px solid currentColor;
  border-radius:50%;
  opacity:.22;
}

/* Keep secondary copy clearly subordinate inside a tappable choice. */
.wiz-opt small{margin-top:3px;line-height:1.3;font-weight:600}

/* Pressed feedback is immediate on touch screens as well as mouse. */
.wiz-opt:active{
  transform:scale(.985);
  box-shadow:0 2px 7px rgba(15,42,95,.08);
  transition-duration:.06s;
}

/* One clear selected treatment: blue surface + blue ring + green confirmation badge. */
.wiz-opt.is-on{
  transform:none;
  box-shadow:0 0 0 3px rgba(30,95,209,.11),0 9px 22px rgba(15,42,95,.10);
}
.wiz-opt.is-on::after{opacity:0}
.wiz-opt .tick{
  top:50%;
  right:15px;
  width:30px;
  height:30px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#E7F8EC;
  border:1px solid #B9E8C7;
  color:#147A36;
  font-size:17px;
  font-weight:900;
  line-height:1;
  box-shadow:0 2px 7px rgba(20,122,54,.10);
}
.wiz-opts:not(.wiz-opts-wide) .wiz-opt .tick{
  top:7px;
  right:7px;
  width:23px;
  height:23px;
  transform:none;
  font-size:13px;
}

/* Light wizard layouts (PPC card + rail): clean white controls with stronger hierarchy. */
.wiz-card .wiz-opt,.wiz-rail .wiz-opt{
  color:var(--navy);
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F9FD 100%);
  border-color:#D5E0F1;
}
.wiz-card .wiz-opt small,.wiz-rail .wiz-opt small{color:#68738A}
.wiz-card .wiz-opt.is-on,.wiz-rail .wiz-opt.is-on{
  color:#11265A;
  background:linear-gradient(180deg,#F4F7FF 0%,#EAF1FF 100%);
  border-color:#3560D7;
}
.wiz-card .wiz-opt.is-on::before,.wiz-rail .wiz-opt.is-on::before{
  content:"";
  position:absolute;
  left:-2px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:0 4px 4px 0;
  background:#3560D7;
}

/* Hover should suggest clickability without making the control jump around. */
@media (hover:hover){
  .wiz-card .wiz-opt:hover,.wiz-rail .wiz-opt:hover{
    transform:translateY(-2px);
    border-color:#9DB6E5;
    background:#fff;
    box-shadow:0 9px 22px rgba(15,42,95,.10);
  }
  .wiz-opts-wide .wiz-opt:hover::after{
    transform:translateY(-50%) translateX(2px);
    background:rgba(30,95,209,.13);
  }
  .wiz-card .wiz-opt.is-on:hover,.wiz-rail .wiz-opt.is-on:hover{
    border-color:#3560D7;
    background:linear-gradient(180deg,#F4F7FF 0%,#EAF1FF 100%);
  }
}

/* Keyboard users get the same obvious interaction boundary as touch users. */
.wiz-opt:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px rgba(30,95,209,.20),0 9px 22px rgba(15,42,95,.10);
}

/* Primary action: make Continue/Submit feel like the next app action. */
.wiz-card .wiz-next,.wiz-rail .wiz-next{
  min-height:56px;
  border-radius:16px;
  font-size:16px;
  letter-spacing:-.01em;
  box-shadow:0 8px 20px rgba(164,219,76,.32),inset 0 1px 0 rgba(255,255,255,.45);
}

/* Back is still a button, but visually secondary and easier to understand than loose text. */
.wiz-card .wiz-back,.wiz-rail .wiz-back{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px;
  background:#F8FAFD;
  border-color:#DDE5F0;
  color:#506078;
  font-size:14px;
  font-weight:700;
}
.wiz-card .wiz-back::before,.wiz-rail .wiz-back::before{
  content:"\2190";
  font-size:17px;
  line-height:1;
}
@media (hover:hover){
  .wiz-card .wiz-back:hover,.wiz-rail .wiz-back:hover{
    background:#fff;
    border-color:#B9CAE4;
    color:var(--navy);
  }
}

/* Inputs now share the same app-control language as the tap choices. */
.wiz-card .wiz-input,.wiz-rail .wiz-input{
  min-height:54px;
  border-radius:14px;
  border-color:#D5E0F1;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(15,42,95,.035);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.wiz-card .wiz-input:focus,.wiz-rail .wiz-input:focus{
  outline:0;
  border-color:#3560D7;
  background:#fff;
  box-shadow:0 0 0 4px rgba(53,96,215,.12);
}

/* Mobile: generous thumb targets, less dead space, clearer selected state. */
@media (max-width:620px){
  .wiz-card .wiz-body{padding:20px 18px 22px}
  .wiz-opts{gap:10px}
  .wiz-opt{min-height:62px;padding:14px 46px 14px 16px;border-radius:15px;font-size:16px}
  .wiz-opts-wide .wiz-opt::after{right:13px;width:28px;height:28px}
  .wiz-opt .tick{right:13px;width:28px;height:28px}
  .wiz-opts:not(.wiz-opts-wide) .wiz-opt{min-height:64px;padding:13px 9px;font-size:17px}
  .wiz-card .wiz-next,.wiz-rail .wiz-next{min-height:58px;font-size:16px}
  .wiz-card .wiz-back,.wiz-rail .wiz-back{min-height:50px}
}

/* ============================================================================
   WIZARD TAP CONTROLS v2 — compact, obvious, app-like
   Overrides the first refresh above. Numeric answers are quick-select chips/tiles;
   text answers are radio-style action rows. Only the selected answer shows a tick.
   ============================================================================ */

/* Never allow the author display rule to defeat the native hidden state. */
.wiz .wiz-opt .tick[hidden]{display:none!important}

/* ---------- Numeric answers: bathrooms + people ---------- */
.wiz-card [data-choice="bathrooms"],
.wiz-rail [data-choice="bathrooms"]{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
}
.wiz-card [data-choice="people"],
.wiz-rail [data-choice="people"]{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;
}

.wiz-card .wiz-opts:not(.wiz-opts-wide) .wiz-opt,
.wiz-rail .wiz-opts:not(.wiz-opts-wide) .wiz-opt{
  min-width:0;
  min-height:60px;
  padding:10px 8px;
  border:1.5px solid #D9E2F0;
  border-radius:14px;
  background:#fff;
  color:#14285E;
  box-shadow:none;
  font-size:21px;
  font-weight:900;
  line-height:1;
}

/* Remove the decorative dot/check furniture from numeric choices. */
.wiz-card .wiz-opts:not(.wiz-opts-wide) .wiz-opt::before,
.wiz-card .wiz-opts:not(.wiz-opts-wide) .wiz-opt::after,
.wiz-rail .wiz-opts:not(.wiz-opts-wide) .wiz-opt::before,
.wiz-rail .wiz-opts:not(.wiz-opts-wide) .wiz-opt::after{
  content:none!important;
  display:none!important;
}
.wiz-card .wiz-opts:not(.wiz-opts-wide) .wiz-opt .tick,
.wiz-rail .wiz-opts:not(.wiz-opts-wide) .wiz-opt .tick{
  display:none!important;
}

.wiz-card .wiz-opts:not(.wiz-opts-wide) .wiz-opt.is-on,
.wiz-rail .wiz-opts:not(.wiz-opts-wide) .wiz-opt.is-on{
  color:#fff;
  background:linear-gradient(145deg,#173878,#245FD0);
  border-color:#245FD0;
  box-shadow:0 5px 14px rgba(30,95,209,.22);
}

@media (hover:hover){
  .wiz-card .wiz-opts:not(.wiz-opts-wide) .wiz-opt:hover,
  .wiz-rail .wiz-opts:not(.wiz-opts-wide) .wiz-opt:hover{
    transform:none;
    background:#F5F8FE;
    border-color:#AFC3E4;
    box-shadow:none;
  }
  .wiz-card .wiz-opts:not(.wiz-opts-wide) .wiz-opt.is-on:hover,
  .wiz-rail .wiz-opts:not(.wiz-opts-wide) .wiz-opt.is-on:hover{
    color:#fff;
    background:linear-gradient(145deg,#173878,#245FD0);
    border-color:#245FD0;
  }
}

/* ---------- Text answers: obvious single-select rows ---------- */
.wiz-card .wiz-opts-wide .wiz-opt,
.wiz-rail .wiz-opts-wide .wiz-opt{
  min-height:62px;
  padding:13px 54px 13px 52px;
  border:1.5px solid #D9E2F0;
  border-radius:14px;
  background:#fff;
  color:#14285E;
  box-shadow:none;
  font-size:16px;
  font-weight:800;
}

/* Radio cue on the left. */
.wiz-card .wiz-opts-wide .wiz-opt::before,
.wiz-rail .wiz-opts-wide .wiz-opt::before{
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  bottom:auto;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  border:2px solid #B8C7DB;
  border-radius:50%;
  background:#fff;
  box-shadow:none;
}

/* Chevron says “tap this row”; selected state swaps it for the real tick. */
.wiz-card .wiz-opts-wide .wiz-opt::after,
.wiz-rail .wiz-opts-wide .wiz-opt::after{
  content:"\203A";
  position:absolute;
  right:18px;
  top:50%;
  width:auto;
  height:auto;
  transform:translateY(-50%);
  display:block;
  border:0;
  background:transparent;
  color:#8090A8;
  font-size:27px;
  font-weight:500;
  opacity:1;
}

.wiz-card .wiz-opts-wide .wiz-opt.is-on,
.wiz-rail .wiz-opts-wide .wiz-opt.is-on{
  color:#14285E;
  background:#F3F7FF;
  border-color:#3B66D9;
  box-shadow:0 0 0 3px rgba(59,102,217,.09);
}
.wiz-card .wiz-opts-wide .wiz-opt.is-on::before,
.wiz-rail .wiz-opts-wide .wiz-opt.is-on::before{
  border-color:#2E5CCC;
  background:radial-gradient(circle at center,#2E5CCC 0 45%,#fff 48% 100%);
}
.wiz-card .wiz-opts-wide .wiz-opt.is-on::after,
.wiz-rail .wiz-opts-wide .wiz-opt.is-on::after{
  opacity:0;
}
.wiz-card .wiz-opts-wide .wiz-opt .tick,
.wiz-rail .wiz-opts-wide .wiz-opt .tick{
  top:50%;
  right:16px;
  width:27px;
  height:27px;
  transform:translateY(-50%);
  border:0;
  background:#E7F7EC;
  color:#147A36;
  font-size:15px;
  box-shadow:none;
}

@media (hover:hover){
  .wiz-card .wiz-opts-wide .wiz-opt:hover,
  .wiz-rail .wiz-opts-wide .wiz-opt:hover{
    transform:none;
    background:#F8FAFE;
    border-color:#AFC3E4;
    box-shadow:none;
  }
}

/* Back should be a quiet navigation action, not a second giant CTA. The arrow is already
   in the markup, so do not generate a second one in CSS. */
.wiz-card .wiz-nav,.wiz-rail .wiz-nav{gap:8px;margin-top:20px}
.wiz-card .wiz-back,.wiz-rail .wiz-back{
  width:auto;
  min-height:40px;
  align-self:flex-start;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#627087;
  box-shadow:none;
}
.wiz-card .wiz-back::before,.wiz-rail .wiz-back::before{content:none!important;display:none!important}
@media (hover:hover){
  .wiz-card .wiz-back:hover,.wiz-rail .wiz-back:hover{
    background:#F3F6FA;
    border:0;
    color:var(--navy);
  }
}

/* More compact on phones, while retaining >=52px tap targets. */
@media (max-width:620px){
  .wiz-card [data-choice="bathrooms"],
  .wiz-card [data-choice="people"],
  .wiz-rail [data-choice="bathrooms"],
  .wiz-rail [data-choice="people"]{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .wiz-card .wiz-opts:not(.wiz-opts-wide) .wiz-opt,
  .wiz-rail .wiz-opts:not(.wiz-opts-wide) .wiz-opt{
    min-height:54px;
    font-size:19px;
    border-radius:12px;
  }
  .wiz-card .wiz-opts-wide .wiz-opt,
  .wiz-rail .wiz-opts-wide .wiz-opt{
    min-height:58px;
    padding-left:48px;
    padding-right:48px;
    border-radius:12px;
  }
  .wiz-card .wiz-opts-wide .wiz-opt::before,
  .wiz-rail .wiz-opts-wide .wiz-opt::before{left:16px}
}