/* =========================================================================
   Single-page landing stylesheet — the flyer's system, on the web.

   This deliberately reverses the old site.css, whose header read "deliberately
   plain … square-ish corners, flat colours, 1px borders, no hover animation".
   That was right for a nine-section brochure site. This page is the web version
   of a printed mailer, and a mailer decides what matters by how big it sets it.

   The emphasis order below is the flyer's, in the flyer's proportions:
     phone number > monthly price > coupon figures > entity name >
     headline promise > weekly items > report line > 24/7 claim

   Theme colours arrive as :root custom properties from the build, so every
   market keeps its own palette. --primary plays the flyer's navy, --highlight
   its gold, --accent its red.
   ========================================================================= */

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

:root {
  --ink: #14202b;
  --ink-soft: #4d5f6e;
  --surface: #ffffff;
  --soft: #eef5fa;
  --line: #d3e0ea;

  /* The gold band and the pill share one token so they can never drift apart. */
  --gold-band: var(--highlight);
  --on-gold: #5a3d00;

  /* Focus is a system affordance, not brand decoration. It used to borrow
     --accent, which is red on this site and orange on Phoenix: a warning colour
     around a field somebody has merely tapped into, which reads as "you got this
     wrong". Blue says "you are here" instead. Kept as a token so the dark bands
     can swap it for a light one — a mid blue ring on a navy panel is invisible. */
  --focus: #1668c9;

  --radius: 14px;
  --radius-lg: 22px;
  --pill: 999px;
  --maxw: 1200px;

  --font: Arial, "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Arial Black", "Arial Bold", Arial, "Helvetica Neue", Helvetica, sans-serif;

  --shadow: 0 10px 30px rgba(12, 40, 70, .13);
  --shadow-lg: 0 22px 60px rgba(12, 40, 70, .22);
}

/* Type scale.
   This page sells weekly pool service to homeowners, who skew well past fifty, and
   most of them arrive on a phone. So the type gets LARGER as the screen narrows,
   not smaller — the reverse of the usual reflex, and the reverse of what this
   stylesheet did before, which dropped the body text from 17px to 16px on mobile.
   Scaling the root is what does the work: every size below is in rem, so one
   change moves the whole scale together, and a reader who has set a larger default
   in their browser still gets it applied on top. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 100%; }
@media (max-width: 900px) { html { font-size: 106.25%; } }   /* 17px root */
@media (max-width: 620px) { html { font-size: 112.5%; } }    /* 18px root */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
svg { width: 1.15em; height: 1.15em; flex: none; }

a { color: var(--primary); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* On a dark ground the mid blue disappears, so those surfaces raise their own. */
.band--ink, .band--photo, .site-footer, .article-head, .cta-band,
.check-panel, .coupon, .thanks { --focus: #7cc0ff; }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; text-wrap: balance; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing: -.015em; }
h3 { font-size: 1.12rem; font-weight: 700; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
s { opacity: .72; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .5em;
}
.lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- bands ------------------------------------------------------- */
/* overflow:hidden crops the pool artwork at the band edge, the way the flyer's
   props are cropped by the edge of the paper, and keeps a scaled scene from
   spilling over the next section. */
.band { position: relative; padding: clamp(2.75rem, 6vw, 4.75rem) 0; isolation: isolate; overflow: hidden; }
.band--waved { padding-bottom: clamp(4.5rem, 9vw, 7.5rem); }
/* Two bands on the same ground put 4.75rem of padding against another 4.75rem with
   no colour change to justify the gap, so the pair reads as one section with a hole
   in the middle. Where the ground really does change, the full double gap stays and
   is what separates them.

   --surface is white, --soft is #eef5fa, and a veiled water band is 86% white over
   #b3dbf2 — which lands between the two. All three are close enough that the step
   between any of them is a tint, not a section break, so the join collapses for
   every pairing. Only ink, photography and the unveiled hero water keep the full
   double gap, and those are the ones where the ground genuinely changes. */
:is(.band--surface, .band--soft, .band--pale)
+ :is(.band--surface, .band--soft, .band--pale) { padding-top: 0; }
.band-inner { position: relative; z-index: 2; }
.band--surface { background: var(--surface); }
.band--soft { background: var(--soft); }
.band--ink { background: var(--primary-dark); color: #dceaf6; }
.band--ink h2, .band--ink h3 { color: #fff; }
.band--ink .lead { color: #b9d3e8; }
.band--ink .eyebrow { color: var(--highlight); }
.band--water { color: var(--ink); }
.band-head { max-width: 62ch; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* The flyer's own pool artwork, converted from the Illustrator source. One
   cached request grounds the whole page. */
.band-water { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.band-water .water-field { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Props are sized deliberately and bleed off their corner, the way the flyer crops
   them against the edge of the paper. Stretching them with the water instead scales
   them by the band's width — about 2.5x on a desktop hero — and they take the page
   over. They sit above the veil so a washed band keeps its colour accents. */
.pool-prop { position: absolute; z-index: 1; width: auto; height: auto; pointer-events: none; }
.pool-prop--tl { top: 0; left: 0; width: clamp(110px, 13vw, 215px); transform: translate(-14%, -16%); }
.pool-prop--tr { top: 0; right: 0; width: clamp(120px, 15vw, 245px); transform: translate(16%, -18%); }
.pool-prop--bl { bottom: 0; left: 0; width: clamp(100px, 12vw, 195px); transform: translate(-16%, 14%); }
.pool-prop--br { bottom: 0; right: 0; width: clamp(190px, 25vw, 400px); transform: translate(10%, 14%); }
/* The quote form is taller than the headline column beside it, so the hero ends
   with a stretch of open water and nothing in it. This fills that gap. It is
   placed clear of the life ring in the corner below it, and only exists while the
   two columns sit side by side — stacked, there is no gap to fill. */
.pool-prop--deco { left: 13%; bottom: 6%; width: clamp(150px, 20vw, 330px); }
@media (max-width: 1100px) { .pool-prop--deco { display: none; } }
@media (max-width: 700px) {
  /* Stacked, the quote form fills the foot of the hero, so a prop in its bottom
     right corner would sit behind an opaque card. The rest stay — a page whose
     only decoration is one ring in the header reads as a desktop design that was
     shrunk, which is exactly what it was. */
  .band-hero .pool-prop--br { display: none; }
  .pool-prop--tl { width: 128px; }
  .pool-prop--bl { width: 118px; }
  .pool-prop--tr { width: 132px; }
  .pool-prop--br { width: 150px; }
}
/* A soft wash for bands whose text sits on the water rather than inside a panel.
   The artwork's white caustics are bright enough to swallow body copy without it. */
.band-water--veil::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
}
/* The hero sets dark copy straight onto the artwork, and the props drift in from
   the corners behind it. This wash is weighted to the left, where the headline
   and the price pill sit, and clears to nothing on the right so the scene still
   reads behind the form card. */
.band-hero .band-water::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 38%,
                                       rgba(255,255,255,.32) 62%, rgba(255,255,255,.08) 100%);
}
@media (max-width: 900px) {
  /* Stacked, the copy spans the full width, so a left-weighted wash cannot
     protect it. Washing the whole hero instead flattens the water and buries the
     props — so the copy gets its own panel, which is what the flyer does with its
     own text, and the water stays vivid around it. */
  .band-hero .band-water::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .48));
  }
  .hero-copy {
    background: rgba(255, 255, 255, .93);
    border: 3px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: 1.3rem 1.1rem 1.5rem;
    box-shadow: var(--shadow-lg);
  }
  /* The water bands read as flat grey-blue under a heavy wash at this width. */
  .band-water--veil::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .6));
  }
  /* A 38px divider is a hairline on a phone. */
  .wave { height: 54px; }
}

/* full-bleed photography, variant "split" only */
.band--photo { color: #fff; }
.band--photo h2, .band--photo h3 { color: #fff; }
.band--photo .lead { color: #dbe9f5; }
.band--photo .eyebrow { color: var(--highlight); }
.band-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.band-photo img { width: 100%; height: 100%; object-fit: cover; }
.band-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, var(--primary-dark) 12%, rgba(0, 24, 60, .74) 62%, rgba(0, 24, 60, .58));
}


/* Sits at the foot of the band it closes and is painted in the NEXT band's
   colour, so the two grounds meet on a curve with nothing showing between. */
.wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; display: block; width: 100%; height: clamp(38px, 5vw, 72px); }
.wave-flip { transform: rotate(180deg); }

/* ---------- header ------------------------------------------------------ */
/* Rank 4 — the entity name, gold on the flyer's navy band. */
.entity-band { background: var(--primary); color: var(--highlight); }
.entity-band .wrap { display: flex; justify-content: center; padding-block: 7px; }
.entity-name {
  font-family: var(--display); font-weight: 400; font-size: clamp(.72rem, 1.9vw, 1.02rem);
  letter-spacing: .07em; text-transform: uppercase; text-align: center; line-height: 1.3;
}

.site-header {
  position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px); border-bottom: 2px solid var(--line);
}
/* padding-block, NOT `padding: 10px 0` — this element is also a .wrap, and the
   shorthand silently zeroed the 20px side padding it inherits from it. On desktop
   the wrap is centred in a wider viewport so it merely sat flush; on a phone the
   wrap IS the viewport, and the phone icon was clipped by the screen edge. */
.header-inner { display: flex; align-items: center; gap: 16px; padding-block: 10px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; margin-right: auto; min-width: 0; }
.logo-mark { width: 42px; height: 42px; border-radius: 12px; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.logo-entity { font-family: var(--display); font-weight: 400; font-size: 1rem; color: var(--primary); letter-spacing: -.01em; }
.logo-tag { font-size: .78rem; color: var(--ink-soft); }
.header-phone { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--primary); }
.header-phone svg { width: 1.5em; height: 1.5em; }
.header-phone-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); white-space: nowrap; }
.header-phone-number { display: block; font-family: var(--display); font-weight: 400; font-size: 1.22rem; letter-spacing: -.01em; white-space: nowrap; }
.header-phone, .header-quote { flex: none; }
@media (max-width: 720px) {
  /* The label collapses and the icon is all that is left, so give it a real tap
     target rather than a 24px glyph. */
  .header-phone-text { display: none; }
  .header-phone {
    justify-content: center; min-width: 44px; min-height: 44px;
    border-radius: var(--pill); border: 2px solid var(--primary);
  }
  .header-phone svg { width: 1.35em; height: 1.35em; }
  /* The navy band directly above already carries the full legal name, so the
     header repeating it AND the tagline costs two lines of a sticky bar for
     nothing. Restoring the side padding and giving the phone a real tap target
     takes ~80px off the logo's width, and without this it simply wraps onto more
     lines and the header grows instead. */
  .logo-mark { width: 36px; height: 36px; }
  .logo-entity { font-size: .92rem; }
  .logo-tag { display: none; }
}

/* ---------- buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 3px solid transparent; border-radius: var(--pill);
  padding: .78em 1.5em; font-family: var(--font); font-size: 1.02rem; font-weight: 700;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-call, .btn-gold { background: var(--highlight); color: var(--primary); border-color: var(--primary); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: rgba(255, 255, 255, .82); color: var(--primary); border-color: var(--primary); }
.band--ink .btn-ghost, .band--photo .btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4rem 0 0; }

/* ---------- 03 · hero --------------------------------------------------- */
.band-hero { padding-top: clamp(2rem, 4vw, 3.25rem); }
/* A notch smaller than the global h1. The hero headline now shares its column with
   the ticked checklist, the price pill, two buttons and the service-area card, so
   it no longer needs to carry the whole hero on its own. The floor stays at 2rem:
   the small end of this clamp is the phone, where the type was deliberately
   enlarged for an older audience and must not shrink back. */
.hero-copy h1 { font-size: clamp(2rem, 4.4vw, 2.95rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 3.5vw, 3rem); align-items: start; }
.hero-flag {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 1rem;
  background: var(--accent); color: #fff; border-radius: var(--pill);
  padding: .5em 1.1em; font-weight: 700; font-size: .96rem;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .12);
}

/* ---------- the weekly visit, in the hero ------------------------------- */
/* Two columns of ticked pills rather than a paragraph of commas. The list being
   long is the argument, so it is set to be counted at a glance. */
/* Kept tight on purpose: eight rows plus a lead and a footer sit between the
   headline and the price pill, and the pill is the thing that has to be on screen
   without scrolling. Every value below was pulled in from a roomier original. */
.hero-checks { margin: .9rem 0 0; }
.hc-lead {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 .5rem; font-weight: 700; font-size: .98rem; color: var(--primary);
}
.hc-lead svg { color: var(--accent); width: 1.15em; height: 1.15em; flex: none; }
.hc-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .38rem .6rem;
}
.hc-list li {
  display: flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--pill);
  padding: .26rem .8rem .26rem .3rem;
  font-weight: 700; font-size: .92rem; line-height: 1.2; color: var(--ink);
}
.hc-tick {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 23px; height: 23px; border-radius: var(--pill);
  background: var(--highlight); color: var(--primary);
}
.hc-tick svg { width: 14px; height: 14px; stroke-width: 3.4; }
/* The two standing promises the list does not itself state. */
.hc-foot {
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
  margin: .6rem 0 0; font-weight: 700; font-size: .93rem; color: var(--primary);
}
.hc-foot span { display: inline-flex; align-items: center; gap: 7px; }
.hc-foot svg { color: var(--accent); width: 1.15em; height: 1.15em; flex: none; }

/* On photography the pills keep their light ground; only the loose text moves. */
.band--photo .hc-lead, .band--photo .hc-foot { color: #fff; }
.band--photo .hc-lead svg, .band--photo .hc-foot svg { color: var(--highlight); }
/* The service area sits at the foot of the copy column, which is exactly where the
   hero's decorative prop is anchored — on a wide screen a fifteen-town list ran
   straight across the umbrella. Rather than move the artwork (the copy column's
   height varies by market: Austin has no town list at all), the block gets its own
   card, so it stays legible whatever is behind it and the prop reads as sitting
   behind a card rather than colliding with text. */
.hero-area {
  margin: 1.3rem 0 0; padding: .85rem 1.1rem 1rem;
  background: rgba(255, 255, 255, .92);
  border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-serving { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--primary); }
.band--photo .hero-serving { color: var(--primary); }
.band--photo .hero-area { background: rgba(255, 255, 255, .94); }
.hero-serving svg { color: var(--accent); }
.band--photo .hero-serving svg { color: var(--accent); }
/* The towns on the route, under the five-name summary. Long enough to wrap on any
   screen, so it gets its own line height rather than the body default. */
.hero-cities {
  margin: .4rem 0 0; font-size: .92rem; font-weight: 700; line-height: 1.75; color: var(--ink-soft);
}
/* The same coverage list as the .zip-row band below, compressed to one line so it
   sits in the hero card beside the quote form. Tabular numerals so eight five-digit
   figures scan as a column of digits rather than a sentence. */
.hero-zips {
  margin: .5rem 0 0; padding-top: .5rem; border-top: 2px solid var(--line);
  font-size: .92rem; line-height: 1.7; color: var(--ink-soft);
}
.hero-zips strong { color: var(--primary); }
.hero-zips span { font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 1100px) { .hero-zips { border-top-color: rgba(0, 0, 0, .12); } }

/* The card exists to lift the text off the artwork. Below 1100px the prop it was
   colliding with is hidden and the whole copy column already sits on its own
   panel, so a second box inside the first is just a box. */
@media (max-width: 1100px) {
  .hero-area { background: none; border: 0; box-shadow: none; padding: 0; }
}

/* ---------- rank 2 · the price pill ------------------------------------- */
.price-block { margin: 1.1rem 0 0; }
.price-pill {
  display: inline-flex; align-items: baseline; gap: .5rem;
  background: var(--highlight); color: var(--primary);
  border: 4px solid var(--primary); border-radius: var(--pill);
  padding: .35em 1.15em .45em; box-shadow: 0 8px 0 rgba(0, 0, 0, .16);
}
.pp-only, .pp-per { font-weight: 700; font-size: clamp(.9rem, 1.7vw, 1.2rem); text-transform: uppercase; letter-spacing: .04em; }
.price-fine { margin: .7rem 0 0; font-size: .82rem; color: var(--ink-soft); }
.band--ink .price-fine, .band--photo .price-fine { color: #a9c6de; }

/* dollars large, cents raised — the flyer's own price typography */
.bigprice { display: inline-flex; align-items: flex-start; font-family: var(--display); font-weight: 400; line-height: .86; letter-spacing: -.035em; }
.bp-cur { font-size: .46em; margin-top: .18em; }
.bp-d { font-size: 1em; }
.bp-c { font-size: .42em; margin-top: .12em; margin-left: .06em; letter-spacing: 0; }
.price-block--md .bigprice { font-size: clamp(2.4rem, 5vw, 3.2rem); }
.price-block--lg .bigprice { font-size: clamp(3rem, 7vw, 4.2rem); }
.price-block--xl .bigprice { font-size: clamp(3.4rem, 8vw, 5rem); }

/* ---------- rank 1 · the gold phone band -------------------------------- */
.phone-band { background: var(--gold-band); color: var(--primary); position: relative; z-index: 4; }
.phone-band-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 26px; padding: clamp(1rem, 2.4vw, 1.6rem) 20px;
}
.phone-band--compact .phone-band-inner { padding-block: .9rem; }
.pb-main { display: flex; flex-direction: column; }
.pb-number {
  font-family: var(--display); font-weight: 400; letter-spacing: -.025em; text-decoration: none;
  color: var(--primary); font-size: clamp(2.3rem, 6.4vw, 4.1rem); line-height: .95;
}
.pb-number:hover { text-decoration: underline; }
.pb-avail {
  margin: .25rem 0 0; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  font-size: clamp(.72rem, 1.5vw, .92rem); color: var(--on-gold);
}
.pb-addr { margin: 0; font-size: .88rem; color: var(--on-gold); text-align: right; }

/* ---------- claim row --------------------------------------------------- */
.band--claims { padding-block: clamp(1.2rem, 2.5vw, 1.8rem); }
.claim-row { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; }
.claim-row li {
  display: inline-flex; align-items: center; gap: 9px;
  border: 2px solid var(--line); border-radius: var(--pill);
  padding: .48em 1.05em; font-weight: 700; font-size: .93rem; background: var(--surface);
}
.claim-row svg { color: var(--accent); width: 1.3em; height: 1.3em; }

/* ---------- ranks 5-7 · the navy checklist panel ------------------------ */
.price-band-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start; }
.check-panel { background: var(--primary); border: 4px solid var(--highlight); border-radius: var(--radius-lg); padding: clamp(1.3rem, 2.6vw, 2rem); }
.cp-head { color: #fff; font-size: clamp(1.35rem, 2.7vw, 1.95rem); margin-bottom: .8em; }
.cp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.2rem; }
.cp-list li { display: flex; align-items: flex-start; gap: 10px; color: #eaf3fb; font-size: 1rem; line-height: 1.35; }
.cp-list svg { color: var(--highlight); width: 1.25em; height: 1.25em; margin-top: .12em; stroke-width: 3.2; }
.report-line {
  margin: 1.3rem 0 0; padding-top: 1rem; border-top: 2px dashed rgba(255, 255, 255, .3);
  color: var(--highlight); font-weight: 700; font-size: .96rem; display: flex; gap: 10px; align-items: flex-start;
}
.report-line svg { margin-top: .15em; }
.rl-sub { display: block; font-weight: 400; color: #cfe3f5; font-size: .88rem; }
.price-band-side { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.price-strike { margin: 0; font-size: 1rem; color: #cfe3f5; }
.price-strike strong { color: var(--highlight); font-size: 1.15em; }
.side-photo { width: 100%; border-radius: var(--radius); overflow: hidden; border: 4px solid var(--highlight); }

/* ---------- rank 6 · the weekly icon grid ------------------------------- */
.icon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.7rem); }
.ig-item { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.band--water .ig-item { box-shadow: var(--shadow); border-color: transparent; }
.ig-disc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: var(--pill); flex: none;
  background: var(--primary); color: var(--highlight); margin-bottom: .85rem;
}
.ig-disc svg { width: 1.75em; height: 1.75em; stroke-width: 2.4; }
.ig-item h3 { margin-bottom: .4em; }
.ig-item p { margin: 0; font-size: .93rem; color: var(--ink-soft); }

/* ---------- rank 3 · the coupon ----------------------------------------- */
.coupon {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center; background: var(--primary); color: #fff;
  border: 5px dashed var(--highlight); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.5vw, 2.6rem); max-width: 900px;
}
.coupon-tab {
  position: absolute; top: -1rem; left: clamp(1.5rem, 4vw, 3rem);
  background: var(--highlight); color: var(--primary); border-radius: var(--pill);
  padding: .3em 1.3em; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .12em; font-size: .88rem;
}
.coupon-burst {
  width: clamp(112px, 17vw, 158px); aspect-ratio: 1; border-radius: var(--pill);
  background: var(--accent); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: .9;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .2);
}
.cb-n { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.03em; }
.cb-w { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: .06em; }
.coupon-kicker { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--highlight); font-size: .88rem; }
.coupon-only { margin: .1rem 0 0; font-size: 1.15rem; color: #cfe3f5; }
.coupon .bigprice { color: var(--highlight); font-size: clamp(3.4rem, 9vw, 5.4rem); }
.coupon-term { margin: .35rem 0 0; font-size: 1.05rem; font-weight: 700; }
.coupon-reg { margin: .5rem 0 0; font-size: .95rem; color: #b9d3e8; }
.coupon-reg strong { color: #fff; }
.coupon-code { margin: .6rem 0 0; font-weight: 700; color: var(--highlight); }
.coupon-cut { position: absolute; right: 1rem; bottom: .7rem; color: var(--highlight); opacity: .65; }
.coupon-cut svg { width: 1.6em; height: 1.6em; }
.coupon-fine { margin: 1.4rem 0 0; font-size: .84rem; color: var(--ink-soft); max-width: 78ch; }

/* ---------- seasons, differentiators, areas ----------------------------- */
.season-row, .diff-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.season-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.diff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.season-row li, .diff-card {
  background: var(--surface); border-radius: var(--radius); padding: 1.35rem;
  border: 2px solid var(--line); color: var(--ink);
}
.band--photo .season-row li { background: rgba(255, 255, 255, .95); border-color: transparent; box-shadow: var(--shadow-lg); }
.band--water .season-row li { border-color: transparent; box-shadow: var(--shadow); }
.season-row h3, .diff-card h3 { margin-bottom: .4em; color: var(--ink); }
.season-row p, .diff-card p { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.season-row .ig-disc { width: 46px; height: 46px; margin-bottom: .7rem; }

.area-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.5rem; }
.area-row li {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface);
  border-radius: var(--pill); padding: .5em 1.1em; font-weight: 700; font-size: .95rem;
  box-shadow: var(--shadow);
}
.area-row svg { color: var(--accent); }
.zip-drawer { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 900px; }

/* The up-front ZIP band (`zipsUpFront`). Bigger and higher-contrast than the
   .zip-list inside the drawer: this one has to be readable at a glance by
   somebody scanning for their own five digits, so the numbers are set in a
   tabular face at body size rather than shrunk to a footnote. */
.band--zips .band-head { margin-bottom: 1.25rem; }
.zip-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.zip-row li {
  background: var(--surface); border: 2px solid var(--accent); border-radius: var(--pill);
  padding: .42em 1.05em; font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  box-shadow: var(--shadow);
}
.zip-row-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-soft); font-weight: 700; }
.zip-row-note svg { color: var(--accent); flex: none; }
@media (max-width: 560px) {
  .zip-row { gap: 8px; }
  .zip-row li { font-size: .98rem; padding: .38em .85em; }
}
.zip-list { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 1.3rem 1.3rem; }
.zip-list li {
  border: 2px solid var(--line); border-radius: 8px; padding: .22em .6em;
  font-size: .9rem; font-variant-numeric: tabular-nums;
}

/* ---------- FAQ + drawers ----------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.faq details, .zip-drawer { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.faq summary, .zip-drawer summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 1.05rem 1.3rem; font-weight: 700; cursor: pointer; list-style: none; font-size: 1.03rem;
}
.faq summary::-webkit-details-marker, .zip-drawer summary::-webkit-details-marker { display: none; }
.faq summary svg, .zip-drawer summary svg { color: var(--accent); transform: rotate(90deg); transition: transform .2s ease; }
.faq details[open] summary svg, .zip-drawer[open] summary svg { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .faq summary svg, .zip-drawer summary svg { transition: none; } }
.faq-body { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); }
.faq-body p { margin: 0; }

/* ---------- 12 · closing ------------------------------------------------ */
.closing-grid { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(1.6rem, 3.5vw, 3rem); align-items: start; }
.closing-phone {
  display: inline-block; margin: .8rem 0 .2rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -.025em; color: var(--highlight);
  text-decoration: none; line-height: 1;
}
.closing-phone:hover { text-decoration: underline; }
.closing-avail { display: flex; align-items: center; gap: 8px; margin: 0 0 1.5rem; font-weight: 700; color: #cfe3f5; }
.steps { display: flex; flex-direction: column; gap: 1rem; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.step-n {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--pill);
  background: var(--highlight); color: var(--primary);
  font-family: var(--display); font-weight: 400; font-size: 1.15rem;
}
.steps h3 { margin-bottom: .2em; color: #fff; }
.steps p { margin: 0; font-size: .93rem; color: #b9d3e8; }
/* One line per step instead of a heading and a paragraph: the disc centres on the
   line rather than sitting above it, and the text is the statement rather than
   sub-copy under a heading, so it takes the brighter ink. */
.steps--lines li { align-items: center; }
.steps--lines p { font-size: 1rem; color: #eaf3fb; }
.band--photo .steps p, .band--photo .closing-avail { color: #dceaf6; }

/* ---------- forms ------------------------------------------------------- */
.quote-card {
  background: var(--surface); color: var(--ink); border-radius: var(--radius-lg);
  border: 4px solid var(--primary); padding: clamp(1.3rem, 2.6vw, 1.9rem); box-shadow: var(--shadow-lg);
}
.quote-card h2 { font-size: clamp(1.25rem, 2.3vw, 1.6rem); color: var(--ink); margin-bottom: .35em; }
.form-intro { font-size: .94rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: .85rem; font-weight: 700; }
.req { color: var(--accent); }
.field input, .field textarea {
  font: inherit; font-size: 1rem; padding: .68em .85em; color: var(--ink);
  border: 2px solid var(--line); border-radius: 10px; background: #fbfdff; width: 100%;
}
/* :focus, not :focus-visible — a text field shows focus for pointer users too. */
.field input:focus, .field textarea:focus { border-color: var(--focus); background: #fff; }
.field textarea { min-height: 92px; resize: vertical; }
.consent { display: flex; gap: 11px; align-items: flex-start; margin: .4rem 0 1.1rem; font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: .1em; accent-color: var(--primary); }
.form-footnote { margin: .9rem 0 0; font-size: .82rem; color: var(--ink-soft); }
.alert { border-radius: 10px; padding: .8em 1em; margin-bottom: 1rem; font-weight: 700; }
.alert-err { background: #fdecea; color: #a3261a; border: 2px solid #f0b7ae; }

/* ---------- footer + call bar ------------------------------------------- */
.site-footer { background: var(--primary-dark); color: #b9d3e8; padding: clamp(2rem, 4vw, 3rem) 0 1.4rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); }
.site-footer h4 { color: #fff; margin: 0 0 .7em; font-size: 1rem; }
.site-footer a { color: #fff; }
.site-footer li { margin-bottom: .5em; display: flex; gap: 9px; align-items: flex-start; }
.site-footer li svg { color: var(--highlight); margin-top: .18em; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 2rem; padding-top: 1.2rem; font-size: .85rem;
}
.footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }

.callbar { display: none; }
@media (max-width: 760px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--primary); box-shadow: 0 -6px 20px rgba(0, 0, 0, .25);
  }
  .callbar a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: var(--pill); padding: .72em; font-weight: 700; text-decoration: none; font-size: .98rem;
  }
  .cb-call { background: var(--highlight); color: var(--primary); }
  .cb-quote { background: transparent; color: #fff; border: 2px solid #fff; }
  body { padding-bottom: 70px; }
}

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 1040px) {
  .icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .season-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-grid, .price-band-grid, .closing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pb-addr { text-align: left; }
}
@media (max-width: 620px) {
  .cp-list { grid-template-columns: 1fr; }
  .icon-grid, .season-row, .diff-grid, .field-row, .footer-grid { grid-template-columns: 1fr; }
  .hc-list { grid-template-columns: 1fr; }
  .coupon { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .coupon-main { display: flex; flex-direction: column; align-items: center; }
  .phone-band-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- print ------------------------------------------------------- */
/* This audience arrives from a piece of paper; some of them will want the coupon
   back on paper. Everything that is not the offer is dropped. */
@media print {
  .site-header, .callbar, .wave, .band-water, .band-photo, .faq, .zip-drawer,
  .quote-card, .site-footer, .season-row, .diff-grid { display: none !important; }
  body { font-size: 12pt; }
  .band { padding: .5rem 0; }
  .coupon { border-color: #000; color: #000; background: #fff; page-break-inside: avoid; }
  .coupon .bigprice, .coupon-kicker, .coupon-code { color: #000; }
  .coupon-reg, .coupon-only { color: #333; }
  .coupon-burst { background: #000; }
  .phone-band { background: #fff; border-top: 2px solid #000; }
}

/* ---------- anchor nav (single page: anchors, not pages) ---------------- */
.anchor-nav { display: flex; gap: 18px; margin-right: auto; flex: none; }
.anchor-nav a { font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--ink-soft); white-space: nowrap; }
.anchor-nav a:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 1200px) { .anchor-nav { display: none; } }
@media (max-width: 560px) { .header-quote { display: none; } }
.site-footer .logo-entity { color: #fff; }
.site-footer .logo-tag { color: #b9d3e8; }
.site-footer li em { font-style: normal; opacity: .75; font-size: .88em; }

/* =========================================================================
   Interior pages — privacy, accessibility, thank-you, 404.

   The only pages that survive beside the landing page. They reuse the markup
   the old page modules already emit (.prose, .article-head, .cta-band), so the
   rules below give that markup a home in the new system rather than forcing a
   rewrite of pages whose content is legal text and does not change.
   ========================================================================= */
.section { padding: clamp(2rem, 4.5vw, 3.25rem) 0; }
.section-soft { background: var(--soft); }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.center { text-align: center; }

.article-head { background: var(--primary-dark); color: #dceaf6; padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.6rem, 3vw, 2.2rem); }
.article-head h1 { color: #fff; }
.article-head .lead { color: #b9d3e8; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; margin-bottom: 1rem; color: #a9c6de; }
.crumbs a { color: #fff; }

.prose { font-size: 1.02rem; }
.prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 2rem; }
.prose h3 { margin-top: 1.4rem; }
.prose ul, .prose ol { list-style: revert; padding-left: 1.4em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose a { font-weight: 700; }

.btn-lg { font-size: 1.08rem; padding: .85em 1.7em; }
.btn-row.center { justify-content: center; }
.card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.35rem; }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--pill);
  background: var(--primary); color: var(--highlight); margin-bottom: .8rem;
}
.card-icon svg { width: 1.6em; height: 1.6em; }
.area-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.area-list li a, .area-list li {
  display: inline-flex; gap: 7px; align-items: center; background: var(--surface);
  border: 2px solid var(--line); border-radius: var(--pill); padding: .4em 1em;
  font-size: .92rem; text-decoration: none;
}

.cta-band { background: var(--primary-dark); color: #dceaf6; text-align: center; padding: clamp(2rem, 4.5vw, 3.25rem) 0; }
.cta-band h2 { color: #fff; }
.cta-serving { font-weight: 700; color: var(--highlight); }
.cta-phone {
  display: inline-block; font-family: var(--display); font-weight: 400; color: var(--highlight);
  font-size: clamp(2rem, 5.5vw, 3.2rem); letter-spacing: -.025em; text-decoration: none; line-height: 1;
}

/* =========================================================================
   Getting in touch

   The form asks a stranger for their phone number. These two blocks are what
   make that a reasonable thing to ask: `.form-next` says what happens after the
   button, before anything is typed, and `.form-reassure` answers the objections
   that stop people pressing it — cost, a salesman at the door, and who ends up
   with the number.
   ========================================================================= */
.form-next {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--soft); border-radius: var(--radius);
  padding: .95rem 1.1rem; margin: 0 0 1.1rem;
}
.form-next li { display: flex; gap: 11px; align-items: flex-start; font-size: .91rem; line-height: 1.4; }
.fn-n {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: var(--pill);
  background: var(--primary); color: var(--highlight);
  font-family: var(--display); font-weight: 400; font-size: .78rem;
}
.form-reassure { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .85rem 0 0; }
.form-reassure li { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-soft); }
.form-reassure svg { color: var(--success, #17794a); width: 1.05em; height: 1.05em; stroke-width: 3; }
.closing-note {
  display: flex; gap: 10px; align-items: flex-start; margin: 1.5rem 0 0;
  font-size: .93rem; color: #cfe3f5;
}
.closing-note svg { color: var(--highlight); margin-top: .15em; }
.band--photo .closing-note { color: #dceaf6; }

/* ---------- thank you --------------------------------------------------- */
/* The one page where something was genuinely completed. */
.thanks { min-height: 78vh; display: flex; align-items: center; }
.confetti {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.thanks-card { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; text-align: center; }
.thanks-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 82px; height: 82px; border-radius: var(--pill); margin-bottom: 1.2rem;
  background: var(--highlight); color: var(--primary);
  box-shadow: 0 10px 0 rgba(0, 0, 0, .18);
}
.thanks-tick svg { width: 2.6em; height: 2.6em; stroke-width: 2.6; }
.thanks-card h1 { color: #fff; }
.thanks-card .lead { color: #cfe3f5; margin-left: auto; margin-right: auto; }
.thanks-next { background: rgba(255, 255, 255, .1); text-align: left; margin: 1.6rem 0; }
.thanks-next li { color: #eaf3fb; }
.thanks-next .fn-n { background: var(--highlight); color: var(--primary); }
.thanks-hurry { margin: 1.4rem 0 0; color: #cfe3f5; }
.thanks-hurry strong { color: #fff; }
.thanks-card .closing-avail { justify-content: center; margin-bottom: 1.6rem; }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* ---------- who answers the phone --------------------------------------- */
/* Initials, not photographs. The page names the people who pick up and claims
   nothing further about them. */
.team {
  display: flex; align-items: center; gap: 12px;
  background: var(--primary); color: #eaf3fb; border-radius: var(--radius);
  padding: .8rem 1rem; margin: 0 0 1.1rem;
}
.team p { margin: 0; font-size: .9rem; line-height: 1.4; }
.team strong { color: var(--highlight); }
.team-faces { display: flex; flex: none; }
.team-faces i {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--pill);
  background: var(--highlight); color: var(--primary);
  font-family: var(--display); font-weight: 400; font-style: normal; font-size: .95rem;
  border: 2px solid var(--primary); margin-left: -10px;
}
.team-faces i:first-child { margin-left: 0; }
/* A market that has not named its phone staff gets one icon disc in place of the
   initials, so the block keeps its shape without inventing people. */
.team-faces i svg { width: 17px; height: 17px; }

/* ---------- consent by submission --------------------------------------- */
/* No tick box: the disclosure sits directly above the button that signs it, so it
   has to be legible rather than tucked away. Small, but not smaller than the rest
   of the fine print on the page, and the link is a real link. */
/* display:block matters — .consent (the checkbox layout) is flex, and without
   this the statement's three paragraphs lay out as three columns. */
.consent--statement {
  display: block;
  margin: 1rem 0 0; font-size: .72rem; line-height: 1.5; color: var(--ink-soft);
  border-left: 3px solid var(--line); padding-left: .9rem;
}
.consent--statement p { margin: 0 0 .5em; }
.consent--statement p:last-child { margin-bottom: 0; }
.consent--statement a { color: var(--primary); font-weight: 700; }

/* ---------- optional fields --------------------------------------------- */
/* With nothing mandatory there is no asterisk to explain the rules, so the form
   says them plainly once, at the top. */
.field-note {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--accent-soft, #fdece7); border-radius: var(--radius);
  padding: .7rem .9rem; margin: 0 0 1rem;
  font-size: .84rem; line-height: 1.45; color: var(--ink);
}
.field-note svg { color: var(--accent); margin-top: .12em; flex: none; }

/* =========================================================================
   Legibility on a phone

   The root scale above lifts everything at once, but a handful of sizes were set
   small enough that even scaled they stay under 15px. Four of them sit inside the
   quote form — the consent disclosure, the field labels, the reassurance row and
   the footnote — where text nobody can read costs a lead outright. Nothing here
   drops below about 15px, and the form's own labels sit at 17px.

   The two guards at the end exist because bigger type can overflow a 390px
   screen: the price pill's labels give up room so its number can stay large, and
   the sticky call bar's label shrinks with the viewport rather than wrapping.
   ========================================================================= */
@media (max-width: 620px) {
  body { line-height: 1.65; }

  .consent, .form-footnote, .price-fine, .coupon-fine,
  .field-note, .form-reassure li, .footer-bottom, .crumbs, .pb-addr,
  .rl-sub, .coupon-kicker { font-size: .87rem; }
  /* Smaller than the rest of the fine print, but still a step up from desktop —
     this is the phone, and it is still a disclosure someone may need to read. */
  .consent--statement { font-size: .82rem; }
  .field label { font-size: .95rem; }
  .form-next li, .team p, .claim-row li, .area-row li { font-size: .97rem; }
  .ig-item p, .diff-card p, .season-row p, .steps p, .faq-body { font-size: 1rem; }
  .hc-list li, .hc-foot { font-size: 1rem; }
  .lead { font-size: 1.08rem; }

  /* Uppercase, letter-spaced labels read smaller than their size suggests. */
  .eyebrow { font-size: .82rem; }
  .entity-name { font-size: .8rem; }
  .pb-avail { font-size: .82rem; }

  /* The number keeps its scale; the words around it give up the room. */
  .pp-only, .pp-per { font-size: .8rem; }
  .price-pill { padding: .3em .85em .4em; gap: .35rem; }
}

/* The call bar is two buttons sharing a narrow row, and one of them carries a
   twelve-digit phone number. Shrinking with the viewport keeps it on one line. */
@media (max-width: 760px) {
  .callbar a { font-size: clamp(.9rem, 3.8vw, 1.02rem); }
  .header-phone-label { font-size: .78rem; }
}

/* On the narrowest phones the price pill runs out of room before the panel does.
   The number gives up 5px rather than the pill wrapping — it is still the largest
   thing on the screen. */
@media (max-width: 430px) {
  .price-block--lg .bigprice, .price-block--xl .bigprice { font-size: 2.7rem; }
}