/* Leadfillr: site styles. Direction "Clean Blue" (logo blues). Tokens live in tokens.css. */

/* ---------- Fonts: self-hosted (production CSP is font-src 'self') ----------
   Latin subset, variable weight. Geist and Geist Mono by Vercel, SIL OFL 1.1 (fonts/LICENSE.txt). */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/geist-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/geist-mono-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Local, derived values ---------- */
:root {
  --header-h: 4rem;
  --halo: rgb(14 76 127 / 0.14);          /* accent focus halo, visible on white */
  --control-h: 3.25rem;                    /* 52px stacked controls (mobile) */
  --control-h-inset: 3rem;                 /* 48px controls inside the joined pill */
  --field-pad: 0.3125rem;                  /* 5px: pill padding, keeps radii concentric */
  --split: minmax(0, 1fr) minmax(0, 1fr);  /* desktop two-column split, shared so columns line up */
  --split-gap: clamp(3rem, 7vw, 7rem);
  --claim-top: clamp(3rem, 6vw, 5rem);    /* #claim's own top padding (see Claim your city) */
}

@media (min-width: 64rem) {
  :root { --header-h: 4.5rem; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  z-index: 10;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.625rem 1rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 2;
  background: var(--paper);
  box-shadow: inset 0 -1px 0 var(--ring);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  text-decoration: none;
}
.wordmark img {                     /* the Leadfillr logo (arrow mark + wordmark), ratio 2.119 */
  display: block;
  height: 2.75rem;                  /* 44px */
  width: auto;
}
@media (max-width: 40rem) {
  .wordmark img { height: 2.5rem; } /* 40px on phones */
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 -0.75rem 0 0;          /* last link's text aligns with the container edge */
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0.75rem;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;   /* has :active and :focus-visible states */
}
.site-nav a:hover,
.site-nav a:active,
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a:focus-visible { outline-offset: -2px; }

.site-nav__wide { display: none; }

@media (min-width: 40rem) {
  .site-nav__wide { display: list-item; }
}

/* ---------- Hero ---------- */
/* Mobile first: the art is a band above the headline, cropped to its right side,
   fading out before the text starts. Desktop: text left, art bleeds off the right.
   The art geometry lives on <main> so the ribbon below the hero lines up with it to the pixel. */
main {
  --art-w: min(132vw, 30rem + 60vw);
  --band-h: calc(var(--art-w) * 0.5656);   /* the whole art, in miniature (1600 x 905) */
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

/* Phones: cap the band by height so the one action stays on the first screen. */
@media (max-width: 39.99rem) {
  main { --art-w: min(132vw, 55svh); }
}

.hero__art {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: var(--band-h);
  overflow: hidden;
  pointer-events: none;
  /* only the loop that meets the image's bottom edge dissolves, above the headline */
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, rgb(0 0 0 / 0.55) 82%, rgb(0 0 0 / 0.18) 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 66%, rgb(0 0 0 / 0.55) 82%, rgb(0 0 0 / 0.18) 93%, transparent 100%);
}

.hero__art img {
  position: absolute;
  top: 0;
  right: calc(var(--art-w) * -0.10);
  width: var(--art-w);
  max-width: none;
  height: auto;
}

.hero__inner {
  padding-top: var(--band-h);
  padding-bottom: clamp(3.5rem, 8vw, 5rem);
}

.hero__title {
  margin: 0;
  font-size: clamp(2.25rem, 1rem + 4.6vw, 4.25rem);
  font-weight: var(--display-weight);
  line-height: 1.02;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

.highlight {
  display: block;
  font-style: normal;
  color: var(--accent-text);
}

.hero__lede {
  margin: 1.25rem 0 0;
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  text-wrap: pretty;
}

/* ---------- The one action: city + Claim your city ---------- */
.city-form { margin-top: 2rem; }

.city-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.city-form input {
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  margin: 0;
  padding: 0 1.25rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--field-edge);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;                 /* 16px: no iOS zoom on focus */
  letter-spacing: -0.005em;
  outline: none;
  transition: box-shadow var(--t-fast) var(--ease);
  appearance: none;
}
.city-form input::placeholder { color: var(--ink-3); opacity: 1; }
.city-form input::-webkit-calendar-picker-indicator { display: none !important; }
.city-form input:focus-visible {
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--halo);
}
.city-form input[aria-invalid="true"] {
  box-shadow: 0 0 0 1px var(--error);
}
.city-form input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 1px var(--error), 0 0 0 4px var(--halo);
}

.button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  margin: 0;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
  color: #FFFFFF;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;             /* also used on links (roofing "Claim your city") */
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.button:hover { background: var(--accent-deep); }
.button:active { background: var(--accent-deep); }
.button:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: var(--r-pill);
}

.city-form__error {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0.75rem 0 0;
  color: var(--error);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}
.city-form__error[hidden] { display: none; }
.city-form__error::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--r-pill);
  background: currentColor;
}

.city-form__note {
  margin: 0.875rem 0 0;
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.5;
  text-wrap: balance;
}

/* Joined pill (Roofr / ServiceTitan move) once there is room: one field, one button. */
@media (min-width: 30rem) {
  .city-form__field {
    flex-direction: row;
    align-items: center;
    gap: 0;
    max-width: var(--form-w, 29rem);
    padding: var(--field-pad);
    border-radius: var(--r-pill);
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--field-edge);
    transition: box-shadow var(--t-fast) var(--ease);
  }
  .city-form__field:focus-within {
    box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--halo);
  }
  .city-form__field:has(input[aria-invalid="true"]) {
    box-shadow: 0 0 0 1px var(--error);
  }
  .city-form__field:has(input[aria-invalid="true"]):focus-within {
    box-shadow: 0 0 0 1px var(--error), 0 0 0 4px var(--halo);
  }
  .city-form input,
  .city-form input:focus-visible,
  .city-form input[aria-invalid="true"],
  .city-form input[aria-invalid="true"]:focus-visible {
    flex: 1;
    height: var(--control-h-inset);
    padding: 0 0.75rem 0 1rem;
    background: transparent;
    box-shadow: none;
  }
  .city-form .button { height: var(--control-h-inset); }
}

/* ---------- Desktop composition ---------- */
@media (min-width: 64rem) {
  main {
    --hero-h: max(40rem, 100svh - var(--header-h));
    --art-w: calc(var(--hero-h) * 1.768);        /* art is 1600 x 905 */
    --copy-w: 46rem;                             /* wide enough that "One business per city." stays on one line */
    --form-w: 29rem;
    --container-left: max(var(--gutter), (100% - var(--container)) / 2);
    /* The rows nearest the art are the form and microcopy (the headline sits higher,
       where the art is already far right). Keep the art's edge at that height (~48% in)
       clear of the form, and always let at least 7% of it bleed off the right edge.
       Percentages resolve against a full-width box: the hero art, and the ribbon below it. */
    --art-left: max(
      calc(var(--container-left) + var(--form-w) + 3.5rem - var(--art-w) * 0.48),
      calc(100% - var(--art-w) * 0.93)
    );
  }

  .hero {
    display: flex;
    align-items: center;
    min-height: var(--hero-h);
  }

  .hero__art {
    inset: 0;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__art img {
    top: 0;
    right: auto;
    height: var(--hero-h);
    width: var(--art-w);
    left: var(--art-left);
  }

  .hero__inner {
    width: min(var(--container), 100% - 2 * var(--gutter));
    padding-top: 3rem;
    padding-bottom: 4.5rem;
  }

  .hero__copy { max-width: var(--copy-w); }

  .hero__lede {
    margin-top: 1.5rem;
    font-size: 1.125rem;
  }

  .city-form { margin-top: 2.25rem; }
}

/* ---------- The glass ribbon below the hero (still art, decoration only) ----------
   Desktop: the hero's ribbon carries on under the hero at the same scale and position,
   sweeps right to left across the gap above the first section (twisting edge-on halfway)
   and leaves the page at the left edge. Just below, it comes back in from the left edge
   and weaves down the left side to the footer: one swing per 2508 art rows, out to an
   edge-on pinch that slips partly off the page, in to a wide bulge that reaches toward
   (never past) the text, then dissolves above the footer.
   Art units: the hero master is 2688 x 1520 px, drawn at --art-w wide.
   - Crossover: master x -1320 .. 2078, rows 1520+ (so it starts 0.49107 of the art left of it).
     Its tail reaches the left edge of any window up to 11:5; wider windows get a fallback.
   - Left run: screen-anchored, u = art px from the left edge. Its "in" extreme ends at
     u = 488 (wide) / 211 (compact); min() slides it further off the page when the gap
     beside the text is narrower than that, so it never reaches the text.
   Under 64rem (phones and tablets) only the hero: the hero art there is a band above the
   headline with no exit to cross from, and the 16-32px gutter fits at most a 22px sliver.
   64-72rem: the crossover only (the gutter beside the text is 32px).
   The woven art loads only after the page has loaded (script.js); the crossover is a lazy img. */
.flow {
  position: relative;
  isolation: isolate;
}

.ribbon {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  /* dissolve into the white page above the footer */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26rem), transparent calc(100% - 2rem));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26rem), transparent calc(100% - 2rem));
}

.ribbon__lane { display: none; }

.ribbon__cross { display: none; }

.ribbon__left {
  display: none;
  position: absolute;
  bottom: 0;
  flex-direction: column;
  --u-in: 0.0785;                        /* 211 / 2688: the compact weave's widest reach */
  --u-w: 0.08929;                        /* 240 / 2688: its image width */
  width: calc(var(--art-w) * var(--u-w));
}

.ribbon__head {
  flex: none;
  height: calc(var(--art-w) * 0.19345);  /* 520 / 2688 */
  background-size: 100% 100%;
}

.ribbon__loop {
  flex: 1;
  background-repeat: repeat-y;
  background-size: 100% auto;
}

.ribbon-ready .ribbon__head {
  background-image: url("media/ribbon-left-compact-head-150.webp");
  background-image: image-set(url("media/ribbon-left-compact-head-150.avif") type("image/avif") 1x, url("media/ribbon-left-compact-head-225.avif") type("image/avif") 2x, url("media/ribbon-left-compact-head-150.webp") type("image/webp") 1x, url("media/ribbon-left-compact-head-225.webp") type("image/webp") 2x);
}
.ribbon-ready .ribbon__loop {
  background-image: url("media/ribbon-left-compact-loop-150.webp");
  background-image: image-set(url("media/ribbon-left-compact-loop-150.avif") type("image/avif") 1x, url("media/ribbon-left-compact-loop-225.avif") type("image/avif") 2x, url("media/ribbon-left-compact-loop-150.webp") type("image/webp") 1x, url("media/ribbon-left-compact-loop-225.webp") type("image/webp") 2x);
}

@media (min-width: 64rem) {
  main { --fold: calc(var(--section-y) + 16rem); }   /* the text-free gap the ribbon crosses (+6rem for v2) */

  .section.benefits { padding-top: var(--fold); }   /* beats .section, which comes later */

  /* Safety net: below the fold line the ribbon shows only left of the text column, so it never
     sits under text at any window shape. The art already clears the text at every tested size. */
  .ribbon__lane {
    display: block;
    position: absolute;
    inset: 0;
    container-type: inline-size;         /* 100cqw = the page width, for .ribbon__left's top */
    -webkit-mask-image:
      linear-gradient(to bottom, #000 calc(var(--fold) - 1.25rem), transparent calc(var(--fold) - 0.75rem)),
      linear-gradient(to right, #000 calc(var(--container-left) - 1.5rem), transparent calc(var(--container-left) - 0.5rem));
    mask-image:
      linear-gradient(to bottom, #000 calc(var(--fold) - 1.25rem), transparent calc(var(--fold) - 0.75rem)),
      linear-gradient(to right, #000 calc(var(--container-left) - 1.5rem), transparent calc(var(--container-left) - 0.5rem));
  }

  .ribbon__cross {
    display: block;
    position: absolute;
    top: 0;
    left: calc(var(--art-left) - var(--art-w) * 0.49107);   /* master x -1320 */
    width: calc(var(--art-w) * 1.26414);                     /* 3398 / 2688 */
    /* its far-left end is off the page in every window up to 11:5; if it ever shows, it fades, not stops */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%);
    mask-image: linear-gradient(to right, transparent, #000 4%);
  }
  .ribbon__cross img { width: 100%; height: auto; }
}

@media (min-width: 72rem) {
  /* Starts where the crossover leaves the page. Its lowest glass at the left edge is
     min(art-w * 0.21397 + art-left * 0.15151, art-w * 0.17321 + art-left * 0.34522) below the hero
     (fitted, within 11 art rows); the head's first glass is 400 art rows down, and 24 art rows of air
     sit between them. --al is --art-left rebuilt in container units (the lane is the container),
     because in `top` a percentage would resolve against the page height: keep it in step with main. */
  .ribbon__left {
    display: flex;
    --al: max(
      calc(max(var(--gutter), (100cqw - var(--container)) / 2) + var(--form-w) + 3.5rem - var(--art-w) * 0.48),
      calc(100cqw - var(--art-w) * 0.93)
    );
    top: min(
      calc(var(--art-w) * 0.07409 + var(--al) * 0.15151),
      calc(var(--art-w) * 0.03333 + var(--al) * 0.34522)
    );
    left: min(0px, calc(var(--container-left) - 1.5rem - var(--art-w) * var(--u-in)));
  }
}

/* Ultrawide windows (11:5 and wider): the page edge is further left than any tail can reach, so the
   crossover dissolves before the text column instead (and never reaches below the text's top edge),
   and the left run (which would start far from it) stays hidden. */
@media (min-width: 64rem) and (min-aspect-ratio: 11/5) {
  .ribbon__lane {
    -webkit-mask-image:
      linear-gradient(to right, transparent calc(var(--container-left) + 4rem), #000 calc(var(--container-left) + 22rem)),
      linear-gradient(to bottom, #000 calc(var(--fold) - 1.25rem), transparent calc(var(--fold) - 0.75rem));
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent calc(var(--container-left) + 4rem), #000 calc(var(--container-left) + 22rem)),
      linear-gradient(to bottom, #000 calc(var(--fold) - 1.25rem), transparent calc(var(--fold) - 0.75rem));
    mask-composite: intersect;
  }
  .ribbon__left { display: none; }
}

@media (min-width: 110rem) {
  .ribbon__left {
    --u-in: 0.18155;                     /* 488 / 2688: the wide weave's widest reach */
    --u-w: 0.18601;                      /* 500 / 2688 */
  }
  .ribbon-ready .ribbon__head {
    background-image: url("media/ribbon-left-wide-head-312.webp");
    background-image: image-set(url("media/ribbon-left-wide-head-312.avif") type("image/avif") 1x, url("media/ribbon-left-wide-head-469.avif") type("image/avif") 2x, url("media/ribbon-left-wide-head-312.webp") type("image/webp") 1x, url("media/ribbon-left-wide-head-469.webp") type("image/webp") 2x);
  }
  .ribbon-ready .ribbon__loop {
    background-image: url("media/ribbon-left-wide-loop-312.webp");
    background-image: image-set(url("media/ribbon-left-wide-loop-312.avif") type("image/avif") 1x, url("media/ribbon-left-wide-loop-469.avif") type("image/avif") 2x, url("media/ribbon-left-wide-loop-312.webp") type("image/webp") 1x, url("media/ribbon-left-wide-loop-469.webp") type("image/webp") 2x);
  }
}

/* tall screens draw the art bigger: use the sharper weave at any pixel density */
@media (min-width: 72rem) and (min-height: 68rem) {
  .ribbon-ready .ribbon__head {
    background-image: url("media/ribbon-left-compact-head-225.webp");
    background-image: image-set(url("media/ribbon-left-compact-head-225.avif") type("image/avif"), url("media/ribbon-left-compact-head-225.webp") type("image/webp"));
  }
  .ribbon-ready .ribbon__loop {
    background-image: url("media/ribbon-left-compact-loop-225.webp");
    background-image: image-set(url("media/ribbon-left-compact-loop-225.avif") type("image/avif"), url("media/ribbon-left-compact-loop-225.webp") type("image/webp"));
  }
}
@media (min-width: 110rem) and (min-height: 68rem) {
  .ribbon-ready .ribbon__head {
    background-image: url("media/ribbon-left-wide-head-469.webp");
    background-image: image-set(url("media/ribbon-left-wide-head-469.avif") type("image/avif"), url("media/ribbon-left-wide-head-469.webp") type("image/webp"));
  }
  .ribbon-ready .ribbon__loop {
    background-image: url("media/ribbon-left-wide-loop-469.webp");
    background-image: image-set(url("media/ribbon-left-wide-loop-469.avif") type("image/avif"), url("media/ribbon-left-wide-loop-469.webp") type("image/webp"));
  }
}

/* ---------- One gentle load reveal (hero copy only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy { animation: rise var(--t-base) var(--ease) both; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Sections (shared) ---------- */
/* White sections separated by space, not boxes. Two sections in a row share one gap. */
.section { padding-block: var(--section-y); }
.section + .section { padding-top: 0; }

.section__title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  font-weight: var(--display-weight);
  line-height: 1.08;
  letter-spacing: var(--h2-tracking);
  text-wrap: balance;
}

.section__intro {
  margin: 1rem 0 0;
  max-width: var(--measure);
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (min-width: 64rem) {
  .section__title { letter-spacing: var(--display-tracking); }   /* headlines >= 40px */
  .section__intro { margin-top: 1.25rem; font-size: 1.125rem; }
}

/* Inline text link. The vertical padding widens the tap area to 44px
   without moving the line (inline padding does not change the line box). */
.text-link {
  padding-block: 0.8125rem;
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;   /* has :active and :focus-visible states */
}
.text-link:hover,
.text-link:active { color: var(--accent-deep); text-decoration-thickness: 2px; }
.text-link:focus-visible {
  padding-block: 0;                  /* the focus ring hugs the words, not the tap area */
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Benefits ---------- */
.benefits__list {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.benefit {
  padding-block: 1.5rem;
  box-shadow: inset 0 1px 0 var(--ring);
}
.benefit:last-child {
  box-shadow: inset 0 1px 0 var(--ring), inset 0 -1px 0 var(--ring);
}

.benefit__lead {
  margin: 0;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.benefit__text {
  margin: 0.375rem 0 0;
  max-width: var(--measure);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Desktop: the headline holds the left column while the five points pass on the right. */
@media (min-width: 64rem) {
  .benefits__inner {
    display: grid;
    grid-template-columns: var(--split);
    column-gap: var(--split-gap);
    align-items: start;
  }
  .benefits__head {
    position: sticky;
    top: 2.5rem;
  }
  .benefits__list { margin-top: 0.5rem; }
  .benefit { padding-block: 1.75rem; }
  .benefit__lead { font-size: 1.25rem; }
}

/* ---------- How it works ---------- */
/* Four numbered steps on one hairline track: down the page on phones, across on desktop. No icons. */
.steps {
  --num: 2.25rem;                              /* 36px number disc */
  --step-gap: clamp(1.5rem, 3vw, 3rem);
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--num) minmax(0, 1fr);
  column-gap: 1rem;
  padding-bottom: 2.25rem;
}
.step:last-child { padding-bottom: 0; }

/* the track between one number and the next */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--num) + 0.5rem);
  bottom: 0.5rem;
  left: calc(var(--num) / 2);
  width: 1px;
  background: var(--ring-strong);
}

.step__num {
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: var(--num);
  height: var(--num);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--ring-strong);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.step__title {
  grid-column: 2;
  margin: 0;
  padding-top: 0.34rem;                        /* first line sits level with the disc */
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.step__text {
  grid-column: 2;
  margin: 0.375rem 0 0;
  max-width: var(--measure);
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (min-width: 64rem) {
  .steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--step-gap);
    margin-top: 3.5rem;
  }
  .step {
    display: block;
    padding-bottom: 0;
  }
  .step:not(:last-child)::before {
    top: calc(var(--num) / 2);
    bottom: auto;
    left: calc(var(--num) + 0.75rem);
    right: calc(0.75rem - var(--step-gap));    /* runs through the gap, stops short of the next disc */
    width: auto;
    height: 1px;
  }
  .step__title {
    margin-top: 1.5rem;
    padding-top: 0;
    font-size: 1.25rem;
  }
}

/* ---------- Dot list (FAQ answers) ---------- */
.dot-list {
  margin: 0.625rem 0 0;
  padding: 0;
  max-width: var(--measure);
  color: var(--ink-2);
  list-style: none;
}
.dot-list li {
  position: relative;
  padding-left: 1.125rem;
  text-wrap: pretty;
}
.dot-list li + li { margin-top: 0.375rem; }
.dot-list li::before {                       /* a small ink dot on the first line, not an icon */
  content: "";
  position: absolute;
  left: 0.125rem;
  top: calc(0.8em - 0.15625rem);
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: var(--r-pill);
  background: var(--ink-3);
}

/* ---------- Live now: roofing (compact) ---------- */
/* What a lead is in one sentence, beside the example lead. The details live on faq.html. */
.lead-card { margin: 2.5rem 0 0; }

.roofing__next {
  margin: 2rem 0 0;
  max-width: var(--measure);
  color: var(--ink-2);
}

.roofing__label {
  color: var(--ink);
  font-weight: 600;
}

.roofing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 1.25rem;
}

.roofing__more {                             /* standalone: a real 44px box */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: 0;
}

/* Desktop: the sentence, what's next and the actions on the left; the example lead on the right. */
@media (min-width: 64rem) {
  .roofing__inner {
    display: grid;
    grid-template-columns: var(--split);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head card"
      "next card"
      "act  card";
    column-gap: var(--split-gap);
    align-items: start;
  }
  .roofing__head    { grid-area: head; }
  .lead-card        { grid-area: card; margin-top: 0; }
  .roofing__next    { grid-area: next; margin-top: 1.75rem; font-size: 1.125rem; }
  .roofing__actions { grid-area: act; margin-top: 2rem; }
}

/* ---------- Example lead (the product shot) ---------- */
/* A text message, not a phone: one soft card, Geist Mono for the data,
   one soft shadow (the only one on the page), made-up details, labelled as such. */
.lead-card__caption {
  margin: 0 0 1rem;
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.5;
}

.lead-card__msg {
  max-width: 26rem;
  padding: 1rem 1.25rem 1.25rem;
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm);   /* message-bubble corner */
  background: var(--paper-soft);
  box-shadow: 0 0 0 1px var(--ring), 0 18px 40px -24px rgb(10 32 46 / 0.30);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
}

.lead-card__from {
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  box-shadow: inset 0 -1px 0 var(--ring);
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.lead-card__title {
  margin: 0;
  font-weight: 600;
}

.lead-card__data {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 1ch;
  row-gap: 0.125rem;
  margin: 0.5rem 0 0;
}
.lead-card__data dt { color: var(--ink-2); }
.lead-card__data dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.lead-card__confirm {
  margin: 0.75rem 0 0;
  color: var(--ink-2);
}

@media (min-width: 64rem) {
  .lead-card__msg { font-size: 0.9375rem; }
}

/* ---------- Bad-lead guarantee: one line (the full policy is on faq.html) ---------- */
/* The claim section below brings its own top padding: together they make one section gap,
   the same as the gap above the line. */
.section.guarantee { padding-bottom: calc(var(--section-y) - var(--claim-top)); }

.guarantee__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 1.25rem;
  box-shadow: inset 0 1px 0 var(--ring), inset 0 -1px 0 var(--ring);
}

.guarantee__title {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.guarantee__link {                           /* standalone: a real 44px box */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: 0;
}

@media (min-width: 64rem) {
  .guarantee__row { padding-block: 1.75rem; }
  .guarantee__title {
    font-size: 1.5rem;
    letter-spacing: var(--h2-tracking);
  }
}

/* ---------- Claim your city (the form) ---------- */
/* Everything on the page leads here. #claim keeps its own top padding, so the hero's
   jump lands with the headline clear of the viewport edge. The form is product,
   so it sits in the soft card. */
.section.claim { padding-top: var(--claim-top); }

.claim__body { margin-top: 2rem; }

.claim-form {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: var(--r-lg);
  background: var(--paper-soft);
  box-shadow: 0 0 0 1px var(--ring);
}

.field {
  display: grid;
  gap: 0.4375rem;
}

.field__label {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

.field__input {
  width: 100%;
  min-width: 0;
  height: 3rem;                              /* 48px */
  margin: 0;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--r-md);
  background-color: var(--paper);
  box-shadow: 0 0 0 1px var(--field-edge);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;                           /* 16px: no iOS zoom on focus */
  letter-spacing: -0.005em;
  outline: none;
  appearance: none;
  transition: box-shadow var(--t-fast) var(--ease);
}
.field__input:focus-visible {
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--halo);
}
.field__input[aria-invalid="true"] {
  box-shadow: 0 0 0 1px var(--error);
}
.field__input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 1px var(--error), 0 0 0 4px var(--halo);
}

.field__select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23475467' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem;
  cursor: pointer;
}
.field__select:has(option[value=""]:checked) { color: var(--ink-3); }
.field__select option { color: var(--ink); }

.field__error {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0;
  color: var(--error);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}
.field__error[hidden] { display: none; }
.field__error::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--r-pill);
  background: currentColor;
}

.claim-form__submit {
  width: 100%;
  margin-top: 0.25rem;
}

/* Honeypot: present in the DOM for bots that fill every field, invisible and
   untabbable for everyone else. Not display:none, so it still submits. */
.field--hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.claim-consent {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-3);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-wrap: pretty;
}
/* .text-link's padding-block trick clears 44px at body/footer font sizes but not at this
   small a size, so give the "Privacy" link extra padding here without touching the shared class. */
.claim-consent .text-link {
  padding-block: 1rem;
}

.claim-done {
  padding: 1rem 1.125rem;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  box-shadow: 0 0 0 1px var(--ring);
}
.claim-done__title {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}
.claim-done__text {
  margin: 0.25rem 0 0;
  color: var(--ink-2);
  text-wrap: pretty;
}

.claim__alt {
  margin: 1.25rem 0 0;
  color: var(--ink-2);
}

@media (min-width: 30rem) {
  .claim-form__submit {
    justify-self: start;
    width: auto;
  }
}

@media (min-width: 64rem) {
  .claim__inner {
    display: grid;
    grid-template-columns: var(--split);
    column-gap: var(--split-gap);
    align-items: start;
  }
  .claim__body { margin-top: 0; }
  .claim-form {
    gap: 1.375rem;
    padding: 1.75rem;
  }
}

/* ---------- Footer (identity) ---------- */
.site-footer {
  padding-block: 2rem 2.5rem;
  box-shadow: inset 0 1px 0 var(--ring);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.site-footer__inner {
  display: grid;
  gap: 1rem;
}

.site-footer__name {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {                         /* standalone: a real 44px box */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: 0;
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 2rem;
  }
}

/* ---------- Privacy page ---------- */
.legal { padding-block: clamp(3rem, 6vw, 5rem) var(--section-y); }

.legal__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: 0;
  margin-bottom: 1.5rem;
}

.legal__title {
  margin: 0;
  font-size: clamp(2.25rem, 1.2rem + 3vw, 3.5rem);
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

.legal__h2 {
  margin: 2.5rem 0 0;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.legal p {
  max-width: var(--measure);
  margin: 0.625rem 0 0;
  color: var(--ink-2);
  text-wrap: pretty;
}
.legal .legal__lede { margin-top: 1rem; }
.legal .legal__contact-name { color: var(--ink); font-weight: 500; }

/* ---------- FAQ page ---------- */
/* Plain Q&A on hairline rows, like the rest of the site. Desktop: question left, answer right. */
.faq__list { margin-top: 2.5rem; }

.faq__item {
  padding-block: 1.5rem 1.75rem;
  box-shadow: inset 0 1px 0 var(--ring);
}
.faq__item:last-child {
  box-shadow: inset 0 1px 0 var(--ring), inset 0 -1px 0 var(--ring);
}

.faq__q {
  margin: 0;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-wrap: balance;
  scroll-margin-top: 1.5rem;                 /* a jump from the home page lands with air above */
}

.faq__a strong {
  color: var(--ink);
  font-weight: 600;
}

.nowrap { white-space: nowrap; }             /* keep hyphenated names whole */

.faq__close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 3rem;
}
.legal .faq__alt { margin: 0; }

@media (min-width: 64rem) {
  .faq__list { margin-top: 3.5rem; }
  .faq__item {
    display: grid;
    grid-template-columns: var(--split);
    column-gap: var(--split-gap);
    align-items: start;
    padding-block: 1.75rem 2rem;
  }
  .faq__q { font-size: 1.25rem; }
  .faq__a { padding-top: 0.125rem; }         /* first line meets the question's */
  .faq__a > :first-child { margin-top: 0; }
}