/* ==========================================================================
   mybath — premium edition (/v5)
   Standalone stylesheet. Does not load site.css; it restyles every class
   site.js emits (wizard included) so there is no cascade to fight.

   Typography is modelled on exa.ai's system:
     display  ABC Arizona Flare (flared serif, wght 400, tight)  -> Fraunces
     sans     ABC Diatype (neo-grotesque)                        -> Geist
     mono     Geist Mono, uppercase micro-labels                 -> Geist Mono
   Arizona Flare and Diatype are commercial Dinamo faces, so the free
   equivalents above stand in. Swapping the real files back in is a matter of
   adding @font-face rules and repointing --font-serif / --font-sans.

   Palette and metrics are lifted from exa.ai's own tokens: cream ground,
   charcoal ink, greige text, gold accents, and a 2px default radius.
   ========================================================================== */

:root {
  /* --- ground & ink (exa.ai tokens) --- */
  --cream:          #faf9f7;
  --cream-darker:   #f0ece8;
  --paper:          #ffffff;
  --charcoal:       #111111;
  /* Dark bands are a very dark brown, not black; --charcoal stays the ink. */
  --espresso:       #16100a;
  --ink:            #111827;
  --greige:         #58544e;
  --greige-light:   #787572;
  --greige-lightest:#c2bfbb;
  --line:           #e6e1da;
  --line-strong:    #d6cfc5;
  --gold:           #e8ac16;
  --coral:          #d9614c;

  /* --- mybath signature, deepened for the premium tier --- */
  --brand:       #1b6e4c;
  --brand-deep:  #14543a;
  --brand-faint: #e8f1ec;

  /* exa.ai ships --border-radius-default: 2px. Sharp corners do most of the
     editorial heavy lifting, so everything inherits it. */
  --r:      2px;
  --r-pill: 1000px;

  --container: 1040px;
  --announce-h: 40px;
  --nav-h: 64px;
  /* announce + nav + the nav's 1px rule */
  --chrome: 105px;

  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:  'Geist', 'Inter', -apple-system, 'Trebuchet MS', sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shadow:    0 1px 2px rgba(17,17,17,.04);
  --shadow-lg: 0 18px 50px -12px rgba(17,17,17,.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--brand); color: #fff; }

/* ---------- Type primitives ----------
   The exa.ai hero is Arizona at wght 400 with leading below 1 and -0.03em
   tracking; that ratio is what makes the page read as editorial rather than
   as a SaaS landing page, so the display class reproduces it exactly. */
.display, h1, h2, h3, .wiz__q {
  font-family: var(--font-serif);
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--charcoal);
}
h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 0.94; }
h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: 21px; line-height: 1.12; }

/* Uppercase mono micro-label — exa.ai uses positive tracking from .08em to
   .14em on these; .12em sits in the middle of that range. */
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--greige-light);
}

.stars { color: var(--gold); letter-spacing: 0.14em; font-size: 18.5px; }

/* ---------- Announce bar ---------- */
.announce {
  background: var(--espresso);
  color: #f5f3ef;
  text-align: center;
  padding: 0 20px;
  height: var(--announce-h);
  display: flex; align-items: center; justify-content: center;
}
.announce a { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.announce a:hover b { color: #7fd0a4; }
.announce b { color: #fff; font-weight: 600; transition: color .15s ease; }
.announce .sep { color: #6b6660; margin: 0 10px; }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,249,247,.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--container); margin: 0 auto; padding: 0 24px;
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

/* ---------- Logo ----------
   Mark + wordmark lockup. The mark is an inline SVG droplet with an arch cut
   out of it (the alcove of a walk-in shower), so it reads as both water and
   bathroom at 24px. */
/* Small gap: the mark's PNG carries ~13% transparent margin of its own, so
   the optical spacing is wider than this number suggests. */
.logo { display: flex; align-items: center; gap: 3px; }
.logo__mark { width: 32px; height: 32px; flex: none; display: block; object-fit: contain; }
.logo__type {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.045em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  color: var(--charcoal);
  line-height: 1;
}
.logo__type .drop { color: var(--brand); }
/* The 3px gap keeps the droplet tight to the wordmark; the divider needs
   its own breathing room without loosening that. */
.logo__rule { width: 1px; height: 22px; background: var(--line-strong); margin: 0 12px; }
.logo__est {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--greige-light); line-height: 1.25; max-width: 88px;
}
.nav__right { display: flex; align-items: center; gap: 16px; }
.nav__note { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--greige-light); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  letter-spacing: -0.01em; line-height: 1.15;
  padding: 15px 26px; border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn--primary { background: var(--espresso); color: #fff; }
.btn--primary:hover { background: var(--brand-deep); }
.btn--call { background: var(--brand); color: #fff; border-radius: 4px; padding: 10px 16px; font-size: 14px; gap: 7px; white-space: nowrap; }
.btn--call b { font-weight: 700; letter-spacing: -0.005em; }
.btn--call:hover { background: var(--brand-deep); }
.btn--call svg { flex: none; }
.btn--ghost { background: transparent; color: var(--charcoal); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--charcoal); background: var(--paper); }
.btn--block { width: 100%; }
.btn--lg { font-size: 16px; padding: 17px 32px; }

/* ---------- Icons ----------
   Per-object transparent cutouts (see assets/icons-cutout), so they need no
   frame: they sit directly on whatever ground they land on. */
.ico { display: inline-block; line-height: 0; }
.ico img { height: 100%; width: auto; object-fit: contain; }

/* ---------- Hero ---------- */
.hero { border-bottom: 1px solid var(--line); background: var(--cream); }
.hero__wrap {
  max-width: var(--container); margin: 0 auto; padding: 48px 24px 52px;
  display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: stretch;
}
.hero__eyebrow { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; flex-wrap: wrap; }
.he {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--greige-light);
}
.he__ico { width: 16px; height: 16px; flex: none; color: var(--brand); }
.he__sep { width: 1px; height: 13px; background: var(--line-strong); flex: none; }
.hero h1 { margin-bottom: 26px; max-width: 20ch; font-size: clamp(38px, 5.4vw, 60px); font-weight: 560; letter-spacing: -0.032em; line-height: 1.0; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__lead {
  color: var(--greige); font-size: 16.5px; line-height: 1.55;
  max-width: 37ch; margin-bottom: 32px;
}
/* Hand-drawn underline: two passes at slightly different wobbles so it reads
   as pen rather than a rule. non-scaling-stroke keeps the weight even after
   preserveAspectRatio="none" stretches the box to the phrase. */
/* Crayon: three overlapping passes at different wobbles and weights, the way
   a hand goes round a word more than once. */
.mark { position: relative; white-space: nowrap; color: var(--charcoal); padding: 0 0.6em; margin: 0 -0.34em; }
.mark__circle {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 100%; height: 2.16em; overflow: visible;
  fill: none; stroke: var(--brand);
  stroke-width: 4.3; stroke-linecap: round; stroke-linejoin: round;
}
/* Weight drops off where the stroke starts and where the hand lifts. */
.mark .c-main  { opacity: .7; }
.mark .c-lead  { opacity: .22; stroke-width: 3.1; }
.mark .c-tail  { opacity: .3;  stroke-width: 3.5; }
.mark .c-pass2 { opacity: .18; stroke-width: 2.7; }

/* The rule sits directly under the lead; the product carousel below it takes
   whatever height is left in the copy column, so its tabs stay level with the
   bottom of the aside whichever column happens to be taller. */
.hero__copy { display: flex; flex-direction: column; }
.hero__rule { height: 1px; background: var(--line); margin-bottom: 26px; }
/* The estimate card, review card and call button stay grouped with their
   normal spacing and sit as a block in the vertical middle of the column. */
.hero__aside { display: flex; flex-direction: column; justify-content: center; }

/* Product carousel: one before/after graphic at a time, centred. The
   three labels double as tabs and mark where in the sequence we are. */
.prodcar { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* The stage is sized so the widest graphic fills the column edge to edge;
   the other two share its height, centred. */
.prodcar__stage { position: relative; flex: 1 1 auto; width: 100%; aspect-ratio: 570 / 330; min-height: 160px; }
.prodcar__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  opacity: 0; visibility: hidden; transition: opacity .35s ease;
}
.prodcar__img.is-active { opacity: 1; visibility: visible; }
/* Tabs share the column width equally, so their underlines read as one
   segmented bar. The active segment fills over the slide's dwell time
   (--prodcar-ms is set by the script) and pauses with the rotation. */
.prodcar__tabs { display: flex; gap: 16px; margin-top: 18px; }
.prodcar__tab {
  position: relative; flex: 1 1 auto; white-space: nowrap;
  background: none; border: 0; padding: 0 0 10px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--greige-lightest); text-align: left;
  transition: color .15s;
}
.prodcar__tab::after, .prodcar__tab::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
}
.prodcar__tab::after { background: var(--line); }
.prodcar__tab::before {
  z-index: 1; background: var(--brand);
  transform: scaleX(0); transform-origin: left center;
}
.prodcar__tab.is-active::before { animation: prodcar-fill var(--prodcar-ms, 4500ms) linear forwards; }
.prodcar.is-paused .prodcar__tab.is-active::before { animation-play-state: paused; }
.prodcar--static .prodcar__tab.is-active::before { animation: none; transform: scaleX(1); }
@keyframes prodcar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.prodcar__tab:hover { color: var(--greige); }
.prodcar__tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 2px; }
.prodcar__tab.is-active { color: var(--charcoal); }

/* Quote card */
.quote-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; box-shadow: var(--shadow-lg); }
.quote-card h2 { font-size: 27px; margin-bottom: 8px; }
.quote-card .sub { color: var(--greige-light); font-size: 14.5px; line-height: 1.5; margin-bottom: 22px; }
/* Price-tag shape: pointed left edge with a punched eyelet. The shadow lives
   on the wrapper as a drop-shadow filter so it follows the clip path — a
   box-shadow on the clipped element would be clipped away with it. */
.coupon {
  position: absolute; top: -15px; right: -14px; z-index: 3;
  transform: rotate(2.5deg);
  filter: drop-shadow(0 7px 14px rgba(150, 58, 40, .30));
}
.coupon__body {
  display: block; position: relative;
  background: var(--coral); color: #fff;
  padding: 7px 15px 7px 29px;
  border-radius: 5px;
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 56%, 0 44%);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
}
.coupon__edge {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: rgba(255, 255, 255, .6);
  stroke-width: 1; stroke-dasharray: 3 2.6;
}
.coupon__body::after {
  content: ""; position: absolute; left: 17px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
}
.zip-row { display: flex; gap: 8px; }
.zip-row .btn { transition: max-width .25s ease, padding .25s ease, opacity .18s ease; max-width: 200px; }
.zip-form--collapsed .zip-row { gap: 0; }
.zip-form--collapsed .zip-row .btn {
  max-width: 0; padding-left: 0; padding-right: 0; opacity: 0;
  overflow: hidden; border-width: 0; pointer-events: none;
}
.zip-row input {
  flex: 1; min-width: 0; background: var(--cream);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 15px 15px; font-size: 15px; font-family: var(--font-sans); font-weight: 400;
  color: var(--charcoal); outline: none; transition: border-color .15s, background .15s;
}
.zip-row input::placeholder { color: var(--greige-lightest); }
.zip-row input:focus { border-color: var(--brand); background: var(--paper); }
.fineprint { color: var(--greige-light); font-size: 12px; margin-top: 16px; line-height: 1.5; }

.hero__proof {
  margin-top: 20px; padding: 26px 28px 16px; flex: none;
  display: flex; flex-direction: column;
  background: var(--cream-darker); border: 1px solid var(--line); border-radius: var(--r);
}
/* Inactive slides are taken out of flow so the card's height follows the one
   on screen instead of the tallest quote. */
.hp__track { position: relative; flex: 1; min-height: 132px; display: flex; flex-direction: column; justify-content: center; }
.hp__slide {
  margin: 0; position: absolute; inset: 0; opacity: 0; visibility: hidden;
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity .35s ease;
}
.hp__slide.is-active { position: relative; opacity: 1; visibility: visible; }
.hero__proof .stars { display: block; font-size: 20px; margin-bottom: 14px; }
/* Every quote occupies exactly three rows, so the card never resizes as the
   carousel advances. */
.hero__proof p {
  font-size: 16.5px; line-height: 1.55; color: var(--greige); margin-bottom: 16px;
  min-height: calc(3em * 1.55);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hero__proof .who { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--greige-lightest); }
.hero__proof .who b { color: var(--greige); font-weight: 400; }

/* Call CTA under the testimonial card: the header's .btn--call, stretched to
   the full width of the aside column. */
.hero__call { margin-top: 16px; }

.hp__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.hp__arrow {
  width: 28px; height: 28px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent;
  color: var(--greige); font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.hp__arrow:hover { border-color: var(--brand); color: var(--brand); }
.hp__dots { display: flex; gap: 7px; }
.hp__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--greige-lightest); cursor: pointer; transition: background .15s; }
.hp__dot.is-active { background: var(--brand); }

/* ---------- Above-the-fold block ----------
   Hero and trust strip sized to land inside the first screen, the way
   rugiet.com seats its stat row on the fold line. Scoped to viewports tall
   and wide enough to hold it; below that the page reverts to normal flow. */
@media (min-width: 941px) and (min-height: 760px) and (max-height: 1250px) {
  .fold { min-height: calc(100svh - var(--chrome)); display: flex; flex-direction: column; }
  /* The hero takes exactly the height left above the trust strip. Its grid
     row is minmax(0, 1fr) so both columns are pinned to that height and the
     carousel stage (and the review card) shrink or grow to fit. */
  .fold .hero { flex: 1 1 0; min-height: 0; display: flex; align-items: stretch; }
  .fold .hero__wrap { width: 100%; grid-template-rows: minmax(0, 1fr); padding-top: clamp(20px, 2.8vh, 44px); padding-bottom: clamp(20px, 2.8vh, 44px); }
  .fold .trust { flex: 0 0 auto; }
  .fold .hero h1 { font-size: clamp(33px, min(5vw, 6.6vh), 61px); }
  .fold .hero__lead { margin-bottom: clamp(18px, 3vh, 32px); }
  .fold .hero__eyebrow { margin-bottom: clamp(14px, 2.6vh, 26px); }
  .fold .hero h1 { margin-bottom: clamp(16px, 2.6vh, 26px); }
  .fold .hero__rule { margin-bottom: clamp(14px, 2.6vh, 26px); }
  .fold .prodcar__stage { min-height: 120px; }
  .fold .prodcar__tabs { margin-top: clamp(12px, 1.8vh, 18px); }
  .fold .quote-card { padding: clamp(20px, 3vh, 30px) 26px; }
  .fold .hero__proof { margin-top: clamp(12px, 1.6vh, 20px); padding: clamp(14px, 2.2vh, 22px) 24px; }
  .fold .hero__call { margin-top: clamp(10px, 1.4vh, 16px); }
  .fold .trust__item { padding: clamp(15px, 2.4vh, 26px) 18px; }
}

/* ---------- Slogan ---------- */
.slogan { background: var(--espresso); }
.slogan p {
  max-width: 900px; margin: 0 auto; padding: 84px 24px;
  text-align: center; color: #f5f3ef;
  font-family: var(--font-serif); font-weight: 400;
  font-optical-sizing: auto; font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-size: clamp(22px, 3.1vw, 35px); line-height: 1.24; letter-spacing: -0.028em;
}

/* ---------- Authority band ----------
   A run of negations rather than a stat block: what the homeowner is spared
   lands harder here than the number, which already carries the hero. */
.authority { position: relative; overflow: hidden; background: var(--cream); color: var(--ink); }
/* Tile texture, scaled independently of the section, veiled so the type stays
   readable and faded out at the margins so it dissolves into the page. */
.authority::before {
  content: ""; position: absolute; inset: 0;
  background-image: url(room/tile.webp);
  background-repeat: repeat;
  background-size: 480px auto;
}
.authority::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(125% 100% at 50% 45%,
    rgba(250,249,247,.34) 0%,
    rgba(250,249,247,.66) 45%,
    rgba(250,249,247,.94) 78%,
    var(--cream) 100%);
}
.authority__wrap { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 104px 24px; }
.manifesto {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.65vw, 18.5px); line-height: 1.95;
  color: var(--greige); max-width: 64ch; letter-spacing: -0.008em;
}
.manifesto b { color: var(--charcoal); font-weight: 600; }
.manifesto__end {
  margin-top: 36px; max-width: 22ch;
  font-family: var(--font-serif); font-weight: 400;
  font-optical-sizing: auto; font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-size: clamp(24px, 3.2vw, 38px); line-height: 1.18; letter-spacing: -0.03em; color: var(--charcoal);
}

/* ---------- Trust strip ---------- */
.trust { background: var(--paper); border-bottom: 1px solid var(--line); }
.trust__wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(5, 1fr); }
.trust__item { padding: 26px 18px; border-left: 1px solid var(--line); }
.trust__item:first-child { border-left: none; padding-left: 0; }
.trust__item .t { font-family: var(--font-serif); font-weight: 400; font-optical-sizing: auto; font-variation-settings: 'SOFT' 0, 'WONK' 0; font-size: 25px; letter-spacing: -0.03em; color: var(--charcoal); line-height: 1; margin-bottom: 7px; }
.trust__item .d { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--greige-lightest); }

/* ---------- Sections ---------- */
.pad { max-width: var(--container); margin: 0 auto; padding: 96px 24px; }
.section-head { max-width: 620px; margin-bottom: 52px; }
.h2emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 0.74em; margin-right: 0.28em; line-height: 1;
  font-variation-settings: normal; letter-spacing: normal;
}
.section-head .label { display: block; margin-bottom: 16px; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { color: var(--greige-light); font-size: 17px; line-height: 1.55; }

/* ---------- Comparison ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.compare__head {
  height: 58px; padding: 0 26px;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.compare__col--bad { background: var(--cream); }
.compare__col--bad .compare__head { color: var(--greige-lightest); }
.compare__col--good { border-left: 1px solid var(--line); }
/* The winning column is badged with the logo rather than a black fill. */
.compare__col--good .compare__head {
  background: var(--brand-faint); color: var(--charcoal); gap: 3px;
  text-transform: none; letter-spacing: normal;
}
.compare__head--brand .logo__mark { width: 26px; height: 26px; }
.compare__head--brand .logo__type { font-size: 20px; }
.compare__row { display: flex; gap: 14px; padding: 18px 26px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; align-items: flex-start; color: var(--greige); }
.compare__col--good .compare__row { color: var(--ink); }
/* Round green badge with a white tick. */
.chk {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.chk svg { width: 11px; height: 11px; }
.compare__col--bad .compare__row svg { width: 15px; height: 15px; flex: none; margin-top: 5px; }
.compare__row strong { font-weight: 500; color: var(--charcoal); }
.compare .center-cta { grid-column: 1 / -1; padding: 28px 26px; border-top: 1px solid var(--line); background: var(--cream); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.compare .center-cta .label { max-width: none; white-space: nowrap; font-size: 12.5px; letter-spacing: 0.1em; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.gtile .ico { height: 132px; margin-bottom: 16px; display: block; width: 100%; }
.gtile .ico img { margin: 0 auto; }
.gtile span { font-size: 14px; font-weight: 500; color: var(--charcoal); display: block; }
.gtile .sub { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--greige-lightest); margin-top: 3px; }

/* ---------- Featured testimonial ----------
   One review, set at display scale. This is the page's social-proof anchor;
   the three-up review grid further down is corroboration, not the headline. */
.spotlight { background: var(--espresso); color: #f5f3ef; }
.spotlight__wrap { max-width: 900px; margin: 0 auto; padding: 96px 24px; text-align: center; }
.spotlight__stars { font-size: 31px; letter-spacing: 0.22em; color: var(--gold); margin-bottom: 10px; }
.spotlight__rating { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.13em; color: #8d877f; margin-bottom: 34px; }
.spotlight blockquote {
  font-family: var(--font-serif); font-weight: 400; font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-size: clamp(25px, 3.6vw, 40px); line-height: 1.14; letter-spacing: -0.03em;
  color: #fff; margin-bottom: 38px;
}
.spotlight__who { display: inline-flex; align-items: center; gap: 14px; }
.spotlight__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: #2a8a5f; color: #fff;
  font-family: var(--font-serif); font-size: 17px; font-weight: 400; letter-spacing: -0.02em;
  display: flex; align-items: center; justify-content: center;
}
.spotlight__meta { text-align: left; }
.spotlight__meta .n { font-size: 14.5px; font-weight: 500; color: #fff; }
.spotlight__meta .r { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em; color: #a8a29a; margin-top: 2px; }
.spotlight__meta .r .check { color: #7fd0a4; }

/* ---------- Offers ---------- */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ocard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: border-color .18s ease; }
.ocard:hover { border-color: var(--line-strong); }
.ocard__img { position: relative; height: 186px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--cream); border-bottom: 1px solid var(--line); }
.ocard__img img { max-height: 100%; width: auto; object-fit: contain; }
.ocard__badge { position: absolute; top: 14px; left: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 11px; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--greige); }
.ocard__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.ocard__body h3 { font-size: 22px; margin-bottom: 10px; }
.ocard__body p { color: var(--greige-light); font-size: 14.5px; line-height: 1.55; margin-bottom: 24px; flex: 1; }

/* ---------- Reviews ---------- */
.reviews-band { background: var(--cream); border-top: 1px solid var(--line); }
.reviews-band .pad { padding-top: 88px; padding-bottom: 88px; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.review { background: var(--paper); padding: 28px 26px; display: flex; flex-direction: column; }
.review .stars { margin-bottom: 16px; }
.review p { font-size: 15px; line-height: 1.62; color: var(--greige); flex: 1; }
.review .who { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em; display: flex; gap: 8px; flex-wrap: wrap; }
.review .who .verify { color: var(--brand); }
.review .who .loc { color: var(--greige-lightest); }

/* ---------- Steps ----------
   Tinted band: this now sits directly after the comparison, and two cream
   sections back to back had nothing separating them. */
.steps-band { background: var(--brand-faint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-bottom: 96px; }
.steps-band .steps { margin-bottom: 0; }

.steps { max-width: calc(var(--container) - 48px); margin: 0 auto 96px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.step { background: var(--paper); padding: 36px 30px 34px; }
/* The step numeral is the card's anchor, with a crayon rule under it. */
.step__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.step__top .step__ico { margin-bottom: 0; }
.step__n {
  position: relative; display: inline-block;
  font-family: var(--font-serif);
  font-optical-sizing: auto; font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-size: 62px; line-height: .84; letter-spacing: -0.045em;
  font-weight: 700; color: #e7e4de;
}
.step__ico { margin-bottom: 22px; }
.step__ico .ico { height: 84px; }
.step h3 { font-size: 24px; margin-bottom: 10px; }
.step p { color: var(--greige-light); font-size: 15px; line-height: 1.55; }

/* ---------- Final CTA ---------- */
.final { background: var(--espresso); color: #f5f3ef; }
.final__wrap { max-width: 760px; margin: 0 auto; padding: 104px 24px; text-align: center; }
.final .label { color: #8d877f; display: block; margin-bottom: 20px; }
.final h2 { color: #fff; margin-bottom: 18px; }
.final p { color: #a8a29a; font-size: 17px; margin-bottom: 34px; }
.final .zip-row { max-width: 470px; margin: 0 auto; }
.final .zip-row input { background: #322419; border-color: #46352a; color: #fff; }
.final .zip-row input::placeholder { color: #6b6660; }
.final .zip-row input:focus { border-color: #7a6656; background: #3a2a1e; }
.final .btn--primary { background: #fff; color: var(--charcoal); }
.final .btn--call { background: var(--brand); color: #fff; }
.final .btn--call:hover { background: #22855c; }
.final__actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.final__actions .or { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: #6b6660; }
.final .btn--primary:hover { background: var(--cream-darker); }
.states { margin-top: 26px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: #6b6660; }

/* ---------- Footer ---------- */
footer.site { background: var(--cream); border-top: 1px solid var(--line); }
.footer__wrap { max-width: var(--container); margin: 0 auto; padding: 48px 24px; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.footer__links { display: flex; gap: 26px; flex-wrap: wrap; font-size: 13.5px; color: var(--greige-light); }
.footer__links a:hover { color: var(--charcoal); }
.footer__bot { padding-top: 24px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__bot p { font-size: 12px; color: var(--greige-lightest); line-height: 1.6; max-width: 62ch; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(250,249,247,.95); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 10px 16px; display: none; }

/* ---------- Wizard ----------
   site.js builds this markup, so the class names are fixed; only the skin
   changes here. */
.wiz-overlay { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(17,17,17,.55); backdrop-filter: blur(5px); padding: 20px; overflow-y: auto; }
.wiz-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.wiz { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); width: 100%; max-width: 620px; margin: auto; padding: 26px 32px 32px; position: relative; box-shadow: 0 40px 90px rgba(0,0,0,.4); animation: wizIn .25s ease; }
@keyframes wizIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wiz__close { position: absolute; top: 18px; right: 20px; width: 30px; height: 30px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); color: var(--greige-light); font-size: 18px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s; }
.wiz__close:hover { border-color: var(--charcoal); color: var(--charcoal); }
.wiz__top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.wiz__back { background: none; border: none; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--greige-light); cursor: pointer; padding: 4px 0; visibility: hidden; }
.wiz__back.show { visibility: visible; }
.wiz__back:hover { color: var(--charcoal); }
.wiz__stepno { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--greige-lightest); }
.wiz__bar { height: 2px; background: var(--line); overflow: hidden; margin: 10px 0 26px; }
.wiz__fill { height: 100%; width: 8%; background: var(--brand); transition: width .3s ease; }
.wiz__q { font-size: clamp(22px, 3.5vw, 28px); text-align: center; line-height: 1.12; margin-bottom: 26px; }
.wiz__hero { display: flex; justify-content: center; margin: -4px 0 20px; }
.wiz__hero img { height: 88px; width: auto; }

.wopts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.wopt { flex: 1 1 128px; max-width: 168px; min-width: 108px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 16px 10px 13px; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 9px; transition: border-color .15s, background .15s; }
.wopt:hover { border-color: var(--line-strong); }
.wopt.sel { border-color: var(--brand); background: var(--brand-faint); }
.wopt img { height: 58px; width: auto; object-fit: contain; }
.wopt span { font-size: 13px; font-weight: 500; color: var(--charcoal); line-height: 1.3; }
.wopts--2 .wopt { flex: 1 1 200px; max-width: 240px; padding: 22px 14px 16px; }
.wopts--2 .wopt img { height: 84px; }
.wopts--chips .wopt { flex: 1 1 160px; max-width: 220px; padding: 16px 14px; }

.wiz__next { display: block; margin: 28px auto 4px; min-width: 200px; }
.wiz__done { text-align: center; padding: 10px 4px; }
.wiz__done .tick { width: 60px; height: 60px; border-radius: 50%; background: var(--brand-faint); color: var(--brand); display: flex; align-items: center; justify-content: center; margin: 6px auto 22px; font-size: 28px; }
.wiz__done h3 { font-size: 30px; margin-bottom: 12px; }
.wiz__done p { color: var(--greige-light); font-size: 15px; max-width: 400px; margin: 0 auto 26px; line-height: 1.55; }
.wiz__done strong { color: var(--charcoal); font-weight: 500; }
.wiz__field { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto; }
.wiz__field input { border: 1px solid var(--line-strong); border-radius: var(--r); padding: 15px 15px; font-size: 15px; font-family: var(--font-sans); background: var(--paper); color: var(--charcoal); outline: none; transition: border-color .15s; width: 100%; }
.wiz__field input::placeholder { color: var(--greige-lightest); }
.wiz__field input:focus { border-color: var(--brand); }
.wiz__field .lbl2 { text-align: center; color: var(--greige-lightest); font-size: 12px; line-height: 1.5; margin-top: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav__note { display: none; }
}
@media (max-width: 940px) {
  .hero__wrap { grid-template-columns: 1fr; gap: 44px; padding: 36px 24px 40px; }
  .hero h1 { max-width: 16ch; }
  .authority__wrap { grid-template-columns: 1fr; gap: 26px; padding: 52px 24px; }
  .trust__wrap { grid-template-columns: repeat(3, 1fr); }
  .trust__item:nth-child(4) { border-left: none; padding-left: 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .offers, .reviews, .steps { grid-template-columns: 1fr; }
  .logo__rule, .logo__est { display: none; }
}
@media (max-width: 640px) {
  .pad { padding: 64px 20px; }
  .compare { grid-template-columns: 1fr; }
  .compare__col--bad { display: none; }
  .compare__col--good { border-left: none; }
  /* nowrap overflows at this width; and the header CTA plus the sticky
     footer already carry the call, so the inline one is redundant here. */
  .compare .center-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .compare .center-cta .label { white-space: normal; line-height: 1.7; font-size: 11px; }
  .compare .center-cta .btn { display: none; }
  /* Proper grid: 1px gaps over a line-coloured wrap draw every divider,
     horizontal ones included, instead of only the left borders. The odd
     fifth cell spans the full width rather than dangling. */
  .trust__wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px; padding: 0; background: var(--line);
  }
  .trust__item {
    padding: 20px 18px; border-left: 0; background: var(--paper);
  }
  .trust__item:first-child { padding-left: 18px; }
  .trust__item:last-child { grid-column: 1 / -1; }
  .sticky-cta { display: block; }
  body { padding-bottom: 72px; }
  .spotlight__wrap, .final__wrap { padding: 64px 20px; }
  .slogan p { padding: 56px 20px; }
  .steps { margin: 0 20px 64px; }
  .nav { padding: 0 20px; }
  .btn--call { padding: 10px 13px; font-size: 13px; }
  .prodcar__tabs { gap: 10px; flex-wrap: wrap; }
  .prodcar__tab { font-size: 10px; letter-spacing: 0.05em; }
}
@media (max-width: 520px) {
  .wiz { padding: 24px 18px 26px; }
  .wopt { flex-basis: 44%; min-width: 44%; }
  .wopts--2 .wopt { flex-basis: 46%; }
}