/* ============================================================
   FluroServices — light/organic theme
   Shared stylesheet for the full-site mockup
   ------------------------------------------------------------
   Every page in /full-site/ pulls this in via:
     <link rel="stylesheet" href="styles.css">
   It is paired with Tailwind Play CDN; this file owns design
   tokens, font wiring, and a small set of reusable component
   classes that Tailwind on its own can't express cleanly
   (gradient text, watermark layering, the dark-green pill CTA).
   ============================================================ */

/* ---------- Design tokens -------------------------------------- */
:root {
  --bg:            #FDFBF7;  /* soft cream — page background */
  --green-dark:    #4A5D23;  /* brand dark green — headings, primary text, buttons, borders */
  --gold:          #A88E50;  /* brand gold/olive — borders, icons, gradient stops, decoration ONLY */
  --gold-text:     #806528;  /* darker olive — gold used as TEXT/link colour on cream (≈4.9:1, WCAG AA) */
  --gold-bright:   #F2DE9C;  /* luminous pale gold — text/icons ON dark-green button backgrounds */
  --green-bright:  #4ADE80;  /* live/active status dot */
  --text-mute:     #6B6B5C;  /* secondary copy */

  /* Gradient stops for the hero headline + section headings */
  --grad-from: #6B803B;
  --grad-via:  #8F8146;
  --grad-to:   #A88E50;

  /* Geometry */
  --container-max: 1280px;     /* 7xl — responsive, scales from mobile up */
  --radius-card:   1rem;       /* 16px — value-prop tiles */
  --radius-pill:   999px;
  --shadow-card:   0 1px 2px rgba(74, 93, 35, 0.06), 0 4px 12px rgba(74, 93, 35, 0.04);
  --shadow-cta:    0 6px 18px rgba(74, 93, 35, 0.18);

  /* Type */
  --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ---------- Reset / base --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--green-dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

.font-serif { font-family: var(--font-serif); }
.font-body  { font-family: var(--font-body); }

/* ---------- Layout container ----------------------------------- */
/* The page-shell IS the scroll container — html/body don't scroll.
   This is required so [data-snap] sections inside the shell snap
   correctly. Native CSS scroll-snap fires on the nearest scroll
   container; declaring snap-type on html/body while having the shell
   absorb scroll via overflow:hidden would break the snap chain. */
.page-shell {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  height: 100vh;               /* fixed scroll-container height */
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;            /* this is the scrolling axis */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: transparent;     /* let .bg-leaves layer bleed through */
}

/* ---------- Ambient leaf background ---------------------------- */
/* Fixed full-viewport layer that sits behind the scrolling shell.
   The shell is transparent so this bleeds through every section. */
.bg-leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
  background: var(--bg);       /* cream base */
}
.bg-leaves svg {
  position: absolute;
  display: block;
}

/* Legacy watermark (kept in case any service page still references it). */
.leaf-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.10;
  z-index: 0;
  width: 200px;
  height: auto;
}
/* Watermark placement variants — corner-anchored so they decorate the
   edges rather than dominating the centre on narrow .page-shell pages
   (privacy, terms, contact, login, success, etc.). */
.leaf-watermark--right {
  top: 60px;
  right: -40px;
  transform: rotate(18deg);
}
.leaf-watermark--bottom-left {
  bottom: 60px;
  left: -40px;
  transform: rotate(-160deg);
}
@media (min-width: 1024px) {
  .leaf-watermark { width: 260px; opacity: 0.08; }
  .leaf-watermark--right     { top: 80px;  right: -60px; }
  .leaf-watermark--bottom-left { bottom: 80px; left: -60px; }
}

/* ---------- Gradient text -------------------------------------- */
/* The hero headline + any heading that wants the olive→gold sheen. */
.text-gradient {
  background: linear-gradient(135deg, var(--grad-from) 0%, var(--grad-via) 55%, var(--grad-to) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ---------- Eyebrow + section heading -------------------------- */
/* V76.2 — eyebrow shifted from the lighter --grad-from olive-yellow to
   the deep brand --green-dark so the section headers on the main page
   carry the same olive tone as the hero h1 + CTA. */
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-dark);
  text-align: center;
}
.section-h2 {
  font-family: var(--font-serif);
  font-size: 1.875rem;     /* 30px */
  font-weight: 700;
  color: var(--green-dark);
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0.5rem 0 1.5rem;
}

/* ---------- Buttons ------------------------------------------- */
/* .btn-primary — dark-green pill with gold text. Used for the
   "Discover Services" hero CTA and any other dominant action. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  background: var(--green-dark);
  color: var(--gold-bright);
  font-size: 1.125rem;     /* 18px */
  font-weight: 600;
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-cta);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn-primary:hover    { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(74, 93, 35, 0.25); color: #FFFFFF; }
.btn-primary:hover svg { stroke: #FFFFFF; }
.btn-primary:active   { transform: translateY(0); }
.btn-primary svg      { stroke: var(--gold-bright); }

/* .btn-text — plain text link (header "Login", services panel link). */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  color: var(--green-dark);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0;
}
.btn-text:hover { color: var(--gold); }

/* ---------- Value-prop card ----------------------------------- */
.card-tile {
  background: #FFFFFF;
  border: 1px solid rgba(74, 93, 35, 0.20);
  border-radius: var(--radius-card);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  box-shadow: var(--shadow-card);
  min-height: 130px;
}
.card-tile svg     { width: 36px; height: 36px; margin-bottom: 0.5rem; }
.card-tile__label  {
  font-size: 11px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--green-dark);
}

/* ---------- Header avatar dot --------------------------------- */
.avatar-wrap {
  position: relative;
  width: 32px;
  height: 32px;
}
.avatar-wrap__img {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1.5px solid var(--gold);
  object-fit: cover;
  background: linear-gradient(135deg, #E9E0CC, #C9BFA3);
}
.avatar-wrap__dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--green-bright);
  box-shadow: 0 0 0 2px #FFFFFF;
}
.avatar-caption {
  font-size: 0.7rem;       /* matches Tailwind text-xs-ish */
  color: var(--green-dark);
  margin-top: 2px;
  text-align: center;
}

/* ---------- Services section ---------------------------------- */
/* Constrained to ~720px so the panel doesn't stretch awkwardly inside
   the wider page-shell on desktop. Centred via auto margins. */
.services-section {
  padding: 2rem 1.5rem 2.5rem;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .services-section { padding: 2rem 2rem; }
  .section-h2 { font-size: 2.5rem; }
  .eyebrow { font-size: 12px; }
}

/* ---------- Services marquee (top + bottom of services snap) ----
   Infinite horizontal scroll of "coming soon" chips, light-theme
   adaptation of the live site's roadmap row. Two duplicate groups
   inside .services-marquee__track loop seamlessly via translateX
   from 0 to -50%. Top row scrolls forward, bottom row reverses. */
.services-marquee {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.services-marquee__track {
  display: flex;
  width: max-content;
  animation: services-marquee-scroll 40s linear infinite;
}
.services-marquee[data-direction="reverse"] .services-marquee__track {
  animation-direction: reverse;
}
/* WCAG 2.2.2: pause the auto-scroll on hover OR keyboard focus so users
   who need to stop the >5s motion can. (Reduced-motion users get it
   disabled entirely below.) */
.services-marquee:hover .services-marquee__track,
.services-marquee:focus-within .services-marquee__track {
  animation-play-state: paused;
}
.services-marquee__group {
  display: flex;
  gap: 10px;
  padding-right: 10px;
  flex-shrink: 0;
}
@keyframes services-marquee-scroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .services-marquee__track { animation: none; }
}

/* Individual chip */
.services-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 7px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(74, 93, 35, 0.15);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(74, 93, 35, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  color: var(--green-dark);
}
.services-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(74, 93, 35, 0.12);
  border-color: rgba(74, 93, 35, 0.28);
}
.services-chip__icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.services-chip__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--green-dark);
}
.services-chip__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--text-mute);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 2px;
}
.services-chip__dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}

.tab-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(74, 93, 35, 0.30);
  background: transparent;
  color: var(--green-dark);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* V88.44/46 — the selected pill is SOLID-filled with its OWN service
   accent (Lawns green / Windows blue), white text + icon, matching the
   "See Fluro<X> plans" CTA button below. Each pill carries its accent via
   --svc keyed on data-tab; any tab without one falls back to brand green. */
.tab-pill { --svc: var(--green-dark); }
.tab-pill[data-tab="lawns"]   { --svc: #567A25; }
.tab-pill[data-tab="windows"] { --svc: #2563EB; }
.tab-pill[data-tab="solar"]   { --svc: #1E3A8A; }
.tab-pill[data-tab="gardens"] { --svc: #4D7C0F; }
.tab-pill[data-tab="gutters"] { --svc: #C2410C; }
.tab-pill[aria-selected="true"],
.tab-pill.is-active {
  /* V88.46 — solid fill, white text/icon, NO ring/glow (Dallas). Matches
     the "See Fluro<X> plans" CTA button exactly. */
  background: var(--svc);
  color: #FFFFFF;
  border-color: var(--svc);
  box-shadow: none;
}
.tab-pill.is-active:hover { filter: brightness(0.95); }
.tab-pill:hover:not(.is-active) { background: rgba(74, 93, 35, 0.06); }
/* V88.46 — keyboard focus ring: neutral + tight so it never re-creates a
   coloured glow on the filled pill (still overrides the browser-default blue). */
.tab-pill:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

.service-panel {
  background: #FFFFFF;
  border: 1px solid rgba(74, 93, 35, 0.18);
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  display: none;
}
.service-panel.is-active { display: block; }
.service-panel__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.service-panel__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(74, 93, 35, 0.10);
  color: var(--green-dark);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.service-panel__name {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0;
  line-height: 1.1;
}
.service-panel__tag {
  font-size: 0.8rem;
  color: var(--text-mute);
  margin-top: 2px;
}
.service-panel__bullets {
  list-style: none;
  margin: 0.75rem 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.service-panel__bullets li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  color: var(--green-dark);
  line-height: 1.4;
}
.service-panel__bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: rgba(74, 93, 35, 0.12);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234A5D23' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}
/* V88.x — filled pill button (was a plain gold text link). Matches the
   site's primary-button convention: --green-dark fill + --gold-bright
   label, same as .btn-primary and the active service tab pill above it. */
/* V88.45 — the "See <Service> plans" CTA takes its panel's own service
   accent (Windows = blue, Lawns = green …) to match the pill + icon,
   instead of one fixed olive. Each panel carries --svc; any without one
   falls back to the brand green. White text keeps WCAG AA on every accent. */
.service-panel { --svc: var(--green-dark); }
.service-panel[data-panel="lawns"]   { --svc: #567A25; }
.service-panel[data-panel="windows"] { --svc: #2563EB; }
.service-panel[data-panel="solar"]   { --svc: #1E3A8A; }
.service-panel[data-panel="gardens"] { --svc: #4D7C0F; }
.service-panel[data-panel="gutters"] { --svc: #C2410C; }
.service-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  background: var(--svc);
  border: 0;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(14, 28, 8, 0.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.service-panel__cta svg { stroke: #FFFFFF; }
.service-panel__cta:hover {
  color: #FFFFFF;
  filter: brightness(0.93);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14, 28, 8, 0.24);
}

/* ---------- Footer -------------------------------------------- */
/* Legacy minimal footer — kept for any /front page that hasn't been
   migrated to the cream-footer markup yet. */
.site-footer {
  padding: 1.5rem 1.5rem 2.5rem;
  text-align: center;
}
.site-footer__location {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gold-text); /* WCAG AA: gold-as-text on cream needs the darker olive token */
  letter-spacing: 0.04em;
}
.site-footer__links {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--text-mute);
}
.site-footer__links a { color: var(--text-mute); }
.site-footer__links a:hover { color: var(--green-dark); }
.site-footer__links span { margin: 0 0.4rem; opacity: 0.55; }

/* ---------- Cream footer (4-column) --------------------------- */
.cream-footer {
  border-top: 1px solid rgba(168, 142, 80, 0.22);
  background: var(--bg);
  padding: 56px 24px 24px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.cream-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 36px;
}
.cream-footer__brand {
  max-width: 360px;
}
.cream-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--green-dark);
}
/* V44.154 — footer logo gold-shield (was old sun emblem assets/logo.svg).
   Sized so the wordmark next to it still feels balanced. */
.cream-footer__logo-img {
  width: 36px;
  height: auto;
  display: block;
}
.cream-footer__brand-name {
  /* V44.154 — Inter extrabold (was Playfair Display via var(--font-serif),
     the slanted serif Dallas keeps asking to drop from cream marketing). */
  font-family: 'Inter', var(--font-body), system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--green-dark);
  letter-spacing: -0.02em;
  line-height: 1;
}
.cream-footer__blurb {
  margin-top: 16px;
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1.65;
}
.cream-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.cream-footer__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168, 142, 80, 0.28);
  color: var(--green-dark);
  border-radius: 10px;
  text-decoration: none;
  transition: color .18s, border-color .18s, background-color .18s;
  background: rgba(255, 255, 255, 0.4);
}
.cream-footer__icon:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(168, 142, 80, 0.08);
}
.cream-footer__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text); /* WCAG AA: 11px gold-as-text on cream → darker olive token */
  margin-bottom: 16px;
}
.cream-footer__link {
  display: block;
  color: var(--text-mute);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 0;
  transition: color .15s;
}
.cream-footer__link:hover { color: var(--green-dark); }
.cream-footer__soon {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* WCAG AA: 9px label on a pale-gold tint — needs the darker #6E5618 to clear 4.5:1 */
  color: #6E5618;
  background: rgba(168, 142, 80, 0.14);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
}
.cream-footer__bottom {
  border-top: 1px solid rgba(168, 142, 80, 0.18);
  padding: 20px 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text-mute);
  font-size: 13px;
}

/* ---------- Footer Services dropdown (opens upward) ----------- */
/* The footer lives at the bottom of the page, so a normal <details>
   that expands DOWN would clip off-screen. We position the panel
   absolutely with bottom: 100% so it floats upward when open. */
.cream-footer__services {
  position: relative;
}
.cream-footer__services-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 0;
  margin-bottom: 16px;
  color: var(--gold-text); /* WCAG AA: summary is text — darker olive token */
}
.cream-footer__services-summary::-webkit-details-marker { display: none; }
.cream-footer__services-summary .cream-footer__heading {
  margin-bottom: 0;
}
.cream-footer__chevron {
  color: var(--gold-text); /* WCAG AA: chevron affordance reads as text alongside the heading */
  transition: transform .18s ease;
}
.cream-footer__services[open] .cream-footer__chevron {
  transform: rotate(180deg);
}
.cream-footer__services-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 20;
  /* V44.154 — 2-column grid going downwards per Dallas. Wider min-width
     to fit two columns side-by-side. Items flow column 1 top-to-bottom,
     then column 2 top-to-bottom. */
  min-width: 360px;
  background: #FFFFFF;
  border: 1px solid rgba(74, 93, 35, 0.20);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(74, 93, 35, 0.18);
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  column-gap: 6px;
  row-gap: 0;
  animation: cream-footer-pop .14s ease-out;
}
.cream-footer__services-panel .cream-footer__link {
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--green-dark);
  white-space: nowrap;
}
.cream-footer__services-panel .cream-footer__link:hover {
  background: rgba(74, 93, 35, 0.06);
  color: var(--green-dark);
}
@keyframes cream-footer-pop {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cream-footer__built {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 820px) {
  .cream-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 520px) {
  .cream-footer { padding: 40px 20px 20px; }
  .cream-footer__grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; }
  .cream-footer__bottom { justify-content: center; text-align: center; }
}

/* ---------- Modal (used by + More tab) ------------------------ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 24, 12, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}
.modal-backdrop.is-open { display: flex; }
.modal-card {
  background: var(--bg);
  border-radius: 1.25rem;
  width: 100%;
  max-width: 420px;
  padding: 1.5rem;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  border: 1px solid rgba(74, 93, 35, 0.15);
  /* V91.5 — cap the card so a long service list never outgrows the
     viewport; the list itself scrolls (see .modal-list) while the title
     and Close button stay pinned. */
  max-height: min(72vh, 620px);
  display: flex;
  flex-direction: column;
}
.modal-card h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
  color: var(--green-dark);
}
.modal-card p {
  font-size: 0.85rem;
  color: var(--text-mute);
  margin: 0 0 1rem;
}
.modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  /* V91.5 — scroll inside the capped card. min-height:0 lets the flex
     item shrink below content height; the right padding keeps rows
     clear of the scrollbar. */
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 4px;
}
.modal-list li {
  background: #FFFFFF;
  border: 1px solid rgba(74, 93, 35, 0.15);
  border-radius: 0.75rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.modal-list li[data-waitlist]:hover,
.modal-list li[data-waitlist]:focus-visible {
  background: #F7F4EC;
  border-color: rgba(74, 93, 35, 0.4);
  transform: translateX(2px);
  outline: none;
}
/* WCAG 2.4.4: live-service rows are real links. The <a> fills the whole
   <li> (negative margin cancels the li padding, padding reapplies the
   inset) so the ENTIRE row is the click target and lays out name/pill via
   its own flex. (Bug: display:contents made the <a> draw no box, leaving
   the row effectively unclickable — live services wouldn't open.) */
.modal-list li > a {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: -0.6rem -0.85rem;
  padding: 0.6rem 0.85rem;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
.modal-list li:hover {
  background: #F7F4EC;
  border-color: rgba(74, 93, 35, 0.4);
  transform: translateX(2px);
}
/* The <a> has display:contents so it draws no box — surface its keyboard
   focus ring on the <li> wrapper instead. */
.modal-list li:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.modal-list .pill {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.pill--soon { background: rgba(168, 142, 80, 0.15); color: #6E5618; } /* WCAG AA: SOON label on pale-gold tint → darker olive to clear 4.5:1 */
.pill--live { background: rgba(74, 222, 128, 0.18); color: #1F7A3C; }
.modal-close {
  margin-top: 1rem;
  width: 100%;
  padding: 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--green-dark);
  color: var(--gold-bright);
  border: none;
  font-weight: 600;
  transition: color 0.18s ease, background 0.18s ease;
}
.modal-close:hover { color: #FFFFFF; }
/* V95.x (Dallas) — kill the default blue focus ring that Safari/iOS draws around
   a button/link after a TAP. `:focus:not(:focus-visible)` removes it only for
   pointer/touch focus; keyboard users still get a visible ring (the explicit
   :focus-visible rules above + the browser default for keyboard), so a11y holds. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.modal-close:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; }

/* ---------- Utility ------------------------------------------- */
.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;
}

/* ---------- Accessible focus indicators (WCAG 2.4.7) -----------
   Inline outline:none on these inputs left keyboard users with no
   visible focus ring. Restore a visible 2px gold ring on focus.
   .a11y-focus is the reusable class for the repeated service-page
   waitlist-modal inputs (pests/pools/cleaning/detail/pressure). */
#waitlist-email:focus-visible,
.a11y-focus:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Skip-to-content link: visually hidden until it receives keyboard focus. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  margin: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--green-dark);
  color: var(--gold-bright);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* WCAG 1.3.1: the <main> landmark wrapper around the snap sections.
   display:contents keeps the snap sections as flow children of the
   scroll container so scroll-snap is unaffected. */
.main-landmark { display: contents; }

/* ===== SCROLL-SNAP (site-wide) =====
   Note: snap-type lives on .page-shell (above), not html/body — the
   shell IS the scroll container. These rules just describe the snap
   targets that live inside it. */
.snap-section,
[data-snap] {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;          /* horizontally center children that have a max-width */
  width: 100%;
}
/* V44.192/V44.194/V44.195 — on iPhone-narrow widths give the snap
   sections after the hero an extra 100px of vertical room so expanded
   accordion content has space, with symmetric top/bottom centring.
   Hero stays flush at 100dvh with its existing snap-align: start.
   Non-hero sections snap to their centre so the centred content lands
   in the middle of the viewport instead of the top edge. */
@media (max-width: 768px) {
  .snap-section:not(:first-of-type),
  [data-snap]:not(:first-of-type) {
    min-height: calc(100dvh + 100px);
    scroll-snap-align: center;
  }
}
.snap-section > *,
[data-snap] > * {
  width: 100%;                  /* full-width children unless they cap themselves */
}

[data-snap-end] {
  scroll-snap-align: end;
  min-height: auto;            /* footer is short — don't force 100dvh */
}

/* Allow first section (hero) to start with content at top, not centred,
   so the header stays where it is — content is naturally top-aligned
   because the header is the first child. Override the flex-centring
   for the hero specifically. */
[data-snap]:first-of-type {
  justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  .page-shell { scroll-snap-type: none; scroll-behavior: auto; }
}

/* ===== SECTION HEADING WRAPPER ===== */
.section-header {
  text-align: center;
  padding: 0 24px;
  margin-bottom: 32px;
}
.section-header .eyebrow { margin-bottom: 8px; }
.section-header h2 { margin-bottom: 14px; }
.section-intro {
  color: var(--text-mute);
  font-size: 15px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* ===== HOW-IT-WORKS GRID ===== */
.how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0 24px;
}
@media (min-width: 720px) {
  .how-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; padding: 0 32px; }
}
/* V76.2 — added deep-olive left accent so the how-it-works cards visually
   tie to the hero h1 + CTA. Mirrors the .why-card left-border pattern
   used in the "Why subscribe" section directly below. */
.how-card {
  background: #fff;
  border: 1px solid rgba(74, 93, 35, 0.18);
  border-left: 3px solid var(--green-dark);
  border-radius: 18px;
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(74, 93, 35, 0.06);
}
.how-card__numeral {
  position: absolute;
  top: 10px;
  right: 16px;
  font: 800 36px/1 var(--font-serif, "Playfair Display");
  color: rgba(168, 142, 80, 0.18);
  letter-spacing: -0.04em;
}
.how-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(74, 93, 35, 0.08);
  color: var(--green-dark);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.how-card__title {
  font: 700 17px/1.2 var(--font-serif, "Playfair Display");
  color: var(--green-dark);
  margin: 0 0 6px;
}
.how-card__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-mute);
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(74, 93, 35, 0.15);
}

/* ===== FOLD-DOWN CARD (details/summary) =====
   Applies to both `.how-card` and `.why-card` when rendered as
   <details><summary>…</summary><p>…</p></details>. Summary becomes the
   clickable header row; body only shows when the card is open. */
details.how-card,
details.why-card {
  cursor: pointer;
}
details.how-card > summary,
details.why-card > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  outline: none;
  user-select: none;
}
details.how-card > summary::-webkit-details-marker,
details.why-card > summary::-webkit-details-marker {
  display: none;
}
details.how-card > summary .how-card__icon,
details.why-card > summary .why-card__icon {
  margin-bottom: 0;
  flex-shrink: 0;
}
/* Numeral re-styled as a small chip when the card is a fold-down so it
   doesn't overlap with the chevron on the right edge.
   V76.2 — gold chip swapped for olive so the numeral matches the icon
   + title colour instead of clashing with them. */
details.how-card > summary .how-card__numeral {
  position: static;
  font: 700 13px/1 var(--font-body, system-ui);
  letter-spacing: 0.04em;
  color: var(--green-dark);
  background: rgba(74, 93, 35, 0.10);
  padding: 5px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
details.how-card > summary .how-card__title,
details.why-card > summary .why-card__title {
  margin: 0;
  flex: 1;
}
.fold-chevron {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(74, 93, 35, 0.08);
  color: var(--green-dark);
  flex-shrink: 0;
  transition: transform 0.22s ease, background 0.18s ease;
}
details[open] .fold-chevron {
  transform: rotate(180deg);
  background: rgba(74, 93, 35, 0.18);
}
details.how-card:hover .fold-chevron,
details.why-card:hover .fold-chevron {
  background: rgba(74, 93, 35, 0.16);
}

/* ===== WHY-SUBSCRIBE GRID ===== */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0 24px;
}
@media (min-width: 720px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1000px; margin: 0 auto; padding: 0 32px; }
}
.why-card {
  background: #fff;
  border: 1px solid rgba(74, 93, 35, 0.18);
  border-left-width: 3px;
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 2px 10px rgba(74, 93, 35, 0.06);
}
.why-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.why-card__title {
  font: 700 18px/1.25 var(--font-serif, "Playfair Display");
  color: var(--green-dark);
  margin: 0 0 8px;
}
.why-card__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-mute);
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(74, 93, 35, 0.15);
}

/* ===== Homepage "How it works" + "Why subscribe" cards — v2 look (Dallas) =====
   Scoped to .page-home (the homepage <main>) so the per-service brand-coloured
   cards on the service pages (lawns green, windows blue, etc.) are untouched.
   The .page-home prefix wins on specificity, so this needs no !important and the
   old page-level <style> override hacks were removed. The Lucide icons use
   stroke="currentColor", so `color` drives the icon colour. */
.page-home .how-card,
.page-home .why-card {
  background: #fff;
  border: 1px solid rgba(74, 93, 35, 0.12);
  border-top: 3px solid #7a9445;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(31, 45, 12, 0.04),
    0 8px 24px rgba(31, 45, 12, 0.06);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    border-top-color 0.25s ease;
}
.page-home .how-card:hover,
.page-home .why-card:hover {
  transform: translateY(-4px);
  border-top-color: #5a7233;
  box-shadow:
    0 2px 4px rgba(31, 45, 12, 0.05),
    0 16px 36px rgba(31, 45, 12, 0.1);
}
/* Icon tiles — soft sage, light outline */
.page-home .how-card__icon,
.page-home .why-card__icon {
  background: #eef2e3;
  border: 1px solid rgba(122, 148, 69, 0.25);
  border-radius: 14px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.page-home .how-card__icon svg,
.page-home .why-card__icon svg {
  color: #4a5d23;
}
.page-home .how-card:hover .how-card__icon,
.page-home .why-card:hover .why-card__icon {
  background: #e3ebd0;
  transform: translateY(-1px);
}
/* Step numerals — quiet muted sage */
.page-home .how-card__numeral {
  color: rgba(122, 148, 69, 0.45);
  font-weight: 700;
}
/* In fold-down (summary) mode the numeral renders as a chip — give it the same
   muted sage so it reads with the v2 palette instead of the old olive. */
.page-home details.how-card > summary .how-card__numeral {
  background: #eef2e3;
  color: #5a7233;
}
/* Titles — slightly deeper brand green */
.page-home .how-card__title,
.page-home .why-card__title {
  color: #324516;
}

/* ===== PRICING GRID ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0 24px;
}
@media (min-width: 560px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 720px; margin: 0 auto; }
}
@media (min-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(4, 1fr); max-width: 1100px; gap: 16px; padding: 0 32px; }
}
.pricing-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(74, 93, 35, 0.18);
  border-radius: 18px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(74, 93, 35, 0.06);
}
.pricing-card--popular {
  border-width: 2px;
}
.pricing-card__ribbon {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-card__tier {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pricing-card__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
}
.pricing-card__price {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.1;
  margin-top: 10px;
}
.pricing-card__cadence {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 2px;
  margin-bottom: 14px;
}
.pricing-card__features {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pricing-card__features li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--green-dark);
  position: relative;
  padding-left: 18px;
}
.pricing-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.pricing-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pricing-card__cta:hover { transform: translateY(-1px); }

.pricing-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 18px;
  padding: 0 24px;
}

/* ===== HERO CARD (service detail) ===== */
.hero-card {
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(74, 93, 35, 0.15);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hero-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 1rem;
  flex-shrink: 0;
}
.hero-card__icon svg { width: 32px; height: 32px; stroke: #fff; }
.hero-card__name {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.1;
  margin: 0;
}
.hero-card__tag {
  font-size: 0.875rem;
  color: var(--text-mute);
  margin: 0.25rem 0 0;
  line-height: 1.45;
}

/* Launch-date pill shown on unlive service hero cards. The brand
   tint (bg + border) is set per-page via inline style so each
   service keeps its own colour. Text + sizing stay consistent. */
.hero-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.5rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.hero-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold-text); /* WCAG AA: back-link is text on cream — darker olive token */
  border: 1px solid currentColor; /* V96.x (Dallas) — outline pill, matches the app's back pill */
  border-radius: 999px;
  padding: 5px 14px 5px 11px !important; /* beat per-page mobile overrides that flatten the old text link */
  margin-top: 0.5rem;
  text-decoration: none;
  line-height: 1;
}
.hero-back-link:hover { color: var(--green-dark); }

.hero-cta-row {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  padding: 0 24px;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(74, 93, 35, 0.18);
  transition: transform 0.15s ease;
}
.hero-cta:hover { transform: translateY(-1px); }

.hero-section-content {
  padding: 0 24px;
}

/* ---------- Lawns hero (cream /front/lawns) -------------------- */
.lawns-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 24px 0;
  max-width: 760px;
  margin: 0 auto;
}
.lawns-hero__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(34, 197, 94, 0.14);
  color: #1F7A3C;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.18);
}
.lawns-hero__icon svg { width: 32px; height: 32px; }
.lawns-hero__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #22C55E;
  margin-bottom: 14px;
}
.lawns-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 6.5vw, 60px);
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-bottom: 18px;
}
.lawns-hero__title-em {
  display: block;
  font-style: normal;
  font-weight: 700;
  margin-top: 6px;
}
.lawns-hero__lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-mute);
  max-width: 580px;
  margin: 0 auto 22px;
}
.lawns-hero__chips {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
}
.lawns-hero__chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-dark);
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 999px;
  padding: 6px 12px;
}
.lawns-hero__chips li svg { color: #22C55E; }

@media (max-width: 520px) {
  .lawns-hero { padding-top: 8px; }
  .lawns-hero__icon { width: 56px; height: 56px; margin-bottom: 14px; }
  .lawns-hero__icon svg { width: 28px; height: 28px; }
  .lawns-hero__lede { font-size: 15px; }
  .lawns-hero__chips { gap: 6px 8px; margin-bottom: 22px; }
  .lawns-hero__chips li { font-size: 12px; padding: 5px 10px; }
}

/* ===== Shared service-page header chrome (lawns / solar / windows)
   Used by the top 3-column header — All services / Brand / Login. */
.lawns-header__all-services {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 4px;
  /* Keep "All services" on one line — on a narrow iPhone the centre
     wordmark eats most of the row and the 1fr side column squeezes
     the label to wrap into "All / services" otherwise (Dallas's
     screenshot from V44.149 deploy). */
  white-space: nowrap;
  transition: color 0.15s;
}
.lawns-header__all-services:hover { color: var(--gold); }
/* V96.x (Dallas) — every marketing service page uses its OWN
   {service}-header__all-services class for the back link AND a matching
   {service}-header__login class for the Login / "Name ›" pill (lawns, gardens,
   gutters, solar, windows); the older pages use .hero-back-link. This one shared
   rule makes BOTH header pills identical to the app's canonical back pill
   (.fl-back-pill — gap 4, padding 5/13/5/10, 13.5px/600, chevron-left icon) so
   the left "‹ All" and right "Login / Dallas ›" pills are the exact same size on
   every page. currentColor border = picks up each page's accent; !important beats
   the Tailwind text-base/font-medium on the login anchor + per-page mobile
   font-size overrides that would otherwise mismatch the two. */
/* V96.x (Dallas) — the {service}-header__login pill was REMOVED from this shared
   rule: the header account link is now the responsive `.fl-acct` control (round
   icon on phones, pill on laptop+) styled in its own block below. The back link
   ("‹ All") keeps this canonical pill treatment. */
[class*="-header__all-services"], .hero-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  padding: 5px 13px 5px 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
/* V96.x (Dallas) — the "‹ All" back pill was rendering TALLER than the text-only
   Login pill: the lucide chevron defaults to 16px, taller than the 13.5px text,
   so it drove the flex row's height up and made the whole pill taller. Constrain
   the chevron to UNDER the text height so the TEXT sets the line height and both
   pills come out exactly the same height. */
[class*="-header__all-services"] svg, .hero-back-link svg {
  width: 13px !important;
  height: 13px !important;
  stroke-width: 1.75 !important;
}
.lawns-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.lawns-header__brand-name {
  /* Inter extrabold — Playfair Display was the "slanted serif" Dallas
     repeatedly asked to drop from cream marketing. Matches the homepage
     H1 "One Login. Every Service. On Autopilot." */
  font-family: 'Inter', var(--font-body), system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--green-dark);
  letter-spacing: -0.02em;
  line-height: 1;
}
.lawns-header__login {
  color: var(--green-dark);
  transition: color 0.15s;
}
.lawns-header__login:hover { color: var(--gold); }
.windows-h1-gradient {
  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 60%, #2563EB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (min-width: 720px) {
  .lawns-header__brand-name { font-size: 30px; }
}
@media (max-width: 480px) {
  .lawns-header__brand-name { font-size: 22px; }
  .lawns-header__all-services { font-size: 12px; }
}

/* ===== DESKTOP: locked-open fold cards render like the main FluroServices
   info tiles — no chevron, no click-to-toggle, numeral floating top-right,
   icon and title stacked, body always showing. */
@media (min-width: 720px) {
  details.details-locked-open > summary {
    cursor: default;
    pointer-events: none;
    display: block;       /* break the flex row so numeral can float top-right */
  }
  details.details-locked-open > summary .fold-chevron { display: none; }
  details.details-locked-open.how-card > summary .how-card__icon,
  details.details-locked-open.why-card > summary .why-card__icon {
    margin-bottom: 16px;
  }
  /* Numeral goes back to faded top-right corner */
  details.details-locked-open.how-card > summary .how-card__numeral {
    position: absolute;
    top: 14px;
    right: 18px;
    background: transparent;
    padding: 0;
    font: 800 38px/1 var(--font-serif, 'Playfair Display');
    color: rgba(168, 142, 80, 0.22);
    letter-spacing: -0.04em;
  }
  /* Body sits below the title with no dashed separator on desktop tiles */
  details.details-locked-open > .how-card__body,
  details.details-locked-open > .why-card__body {
    border-top: none;
    padding-top: 0;
    margin-top: 6px;
  }
}

/* Mobile compaction for fold-down cards — sits between the original
   chunky desktop sizing and the too-small first-pass. */
@media (max-width: 720px) {
  .how-grid,
  .why-grid {
    gap: 12px !important;
    padding: 0 18px !important;
  }
  details.how-card,
  details.why-card {
    padding: 16px 18px !important;
    border-radius: 14px !important;
  }
  details.how-card > summary,
  details.why-card > summary {
    gap: 12px !important;
  }
  details.how-card > summary .how-card__icon,
  details.why-card > summary .why-card__icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }
  details.how-card > summary .how-card__icon svg,
  details.why-card > summary .why-card__icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  details.how-card > summary .how-card__title,
  details.why-card > summary .why-card__title {
    font-size: 15.5px !important;
    line-height: 1.2 !important;
  }
  details.how-card > summary .how-card__numeral {
    font-size: 12px !important;
    padding: 5px 9px !important;
  }
  .fold-chevron {
    width: 26px !important;
    height: 26px !important;
  }
  .fold-chevron svg {
    width: 15px !important;
    height: 15px !important;
  }
  .how-card__body,
  .why-card__body {
    font-size: 13px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
  }
  /* Section intro padding tighter on mobile too */
  .section-header { margin-bottom: 16px !important; padding: 0 20px !important; }
  .section-intro { font-size: 13px !important; line-height: 1.5 !important; }
  /* V44.206 — shrink section h2 + tighten how-card padding on iPhone
     so the "Four steps to set-and-forget" section doesn't dominate
     the viewport above the accordions. */
  .section-h2 { font-size: 1.6rem !important; line-height: 1.15 !important; }
  details.how-card,
  details.why-card {
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
  }

  /* V44.214 — homepage "Four steps" uses the dark-theme proportions per
     Dallas: slightly larger card padding + tighter inter-card gap. The
     name="four-steps" group already gives single-open behaviour natively.
     V44.215 — same modifier reused on .why-grid for "Why subscribe" per
     Dallas: "make it the same as the how it works". */
  .how-grid.four-steps,
  .why-grid.four-steps { gap: 8px !important; }
  .how-grid.four-steps details.how-card,
  .why-grid.four-steps details.why-card {
    padding: 16px 18px !important;
    margin-bottom: 0 !important;
    border-radius: 14px !important;
  }
}

/* ===== Shared Alex avatar + FluroBot chat modal =====
   Used on /front/index.html — same pattern as lawns/solar/windows pages
   (those still keep their inline copy; this is the shared home for new
   pages). POSTs to /api/chat. Avatar btn lives in the page header. */
.alex-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 4px 6px 4px 2px;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.alex-avatar-btn:hover { background: rgba(74, 93, 35, 0.08); }
.alex-avatar-btn__img-wrap {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: visible;
}
.alex-avatar-btn__img-wrap img {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  box-shadow: 0 1px 3px rgba(74, 93, 35, 0.18);
  transition: transform 0.15s ease;
}
.alex-avatar-btn:hover .alex-avatar-btn__img-wrap img { transform: scale(1.04); }
.alex-avatar-btn__dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  background: #4ADE80;
  border: 2px solid #FDFBF7;
  border-radius: 999px;
}
.alex-avatar-btn__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--green-dark);
  letter-spacing: -0.005em;
}
@media (max-width: 480px) {
  .alex-avatar-btn__img-wrap,
  .alex-avatar-btn__img-wrap img { width: 36px; height: 36px; }
  .alex-avatar-btn__label { font-size: 12px; }
}

.alex-chat-modal[hidden] { display: none; }
.alex-chat-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.alex-chat-modal--open { opacity: 1; }
.alex-chat-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(74, 93, 35, 0.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.alex-chat-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: min(640px, 88vh);
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid rgba(74, 93, 35, 0.18);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(74, 93, 35, 0.20);
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 0.22s ease;
}
.alex-chat-modal--open .alex-chat-modal__panel { transform: translateY(0); }
.alex-chat-modal__panel > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #FDFBF7;
  border-bottom: 1px solid rgba(74, 93, 35, 0.12);
}
.alex-chat-modal__brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.alex-chat-modal__brand img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
.alex-chat-modal__brand strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.1;
}
.alex-chat-modal__brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.25;
}
.alex-chat-modal__close {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  color: var(--green-dark);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.alex-chat-modal__close:hover { background: rgba(74, 93, 35, 0.10); }
.alex-chat-modal__messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FDFBF7;
}
.alex-chat-msg {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.alex-chat-msg a { color: inherit; text-decoration: underline; }
.alex-chat-msg--bot {
  align-self: flex-start;
  background: rgba(74, 93, 35, 0.08);
  color: var(--green-dark);
  border-bottom-left-radius: 4px;
}
.alex-chat-msg--user {
  align-self: flex-end;
  background: var(--green-dark);
  color: #F2DE9C;
  border-bottom-right-radius: 4px;
}
.alex-chat-msg--pending { opacity: 0.6; font-style: italic; }
.alex-chat-modal__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: #FFFFFF;
  border-top: 1px solid rgba(74, 93, 35, 0.12);
}
.alex-chat-modal__form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(74, 93, 35, 0.25);
  background: #FFFFFF;
  color: var(--green-dark);
  border-radius: 999px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}
.alex-chat-modal__form input:focus { border-color: var(--gold); }
/* WCAG 2.4.7: the inputs set outline:none with a border-colour-only focus
   cue. Pair it with a visible box-shadow ring so keyboard focus is clear. */
.alex-chat-modal__form input:focus-visible {
  box-shadow: 0 0 0 3px rgba(168, 142, 80, 0.35);
}
.alex-chat-modal__form button {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: var(--green-dark);
  color: var(--gold-bright);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.alex-chat-modal__form button:hover { background: #3A4B20; }
.alex-chat-modal__form button:disabled { opacity: 0.5; cursor: not-allowed; }

/* V44.371 — Footer Services dropdown flattened: <details> stays in
   markup for back-compat but acts as a static heading + panel. The
   `open` attribute forces panel visible on first paint; CSS below
   removes the chevron + click affordance so users can't collapse it.
   V44.372 — strip the absolute-positioned popover styling from the
   panel so it flows inline beneath the heading like the other footer
   columns. Single-column list, no white card. */
.cream-footer__services > summary {
  list-style: none;
  cursor: default;
  pointer-events: none;
}
.cream-footer__services > summary::-webkit-details-marker { display: none; }
.cream-footer__services > summary > .cream-footer__chevron { display: none !important; }
.cream-footer__services > .cream-footer__services-panel {
  position: static;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-auto-flow: row;
  row-gap: 4px;
  animation: none;
}
.cream-footer__services > .cream-footer__services-panel .cream-footer__link {
  white-space: nowrap;
  padding: 4px 0;
  white-space: normal;
}

/* V44.343 — mobile-only override for section headings/headers.
   V44.344 — tighter pricing-selector-grid gap on mobile. !important
   because the per-page styles in lawns.html / gardens.html /
   windows.html / solar.html load AFTER this stylesheet via inline
   <style>, so the cascade would otherwise lose. */
@media (max-width: 640px) {
  .section-h2 {
    font-size: clamp(2rem, 8.5vw, 2.5rem) !important;
    margin: 0.25rem 0px 0.75rem;
  }

  .section-header {
    margin-bottom: 16px;
  }

  .pricing-selector-grid {
    margin-bottom: 12px !important;
  }
}

/* ── Header account control (V96.x, Dallas) ───────────────────────────────
   The top-right header account link, rendered by assets/session-header.js as
   `.fl-acct` (logged out) / `.fl-acct.fl-acct--in` (logged in).
   • Phones (≤767px): a round, TRANSPARENT, outlined person-icon button — the
     same compact icon whether logged in or out ("in our styling, transparent").
   • Laptop+ (≥768px): logged-OUT shows the outlined "Login" pill; logged-IN
     shows a richer pill — a filled olive avatar (person icon) with a green
     "online" dot, then "Logged in" / "<Name>".
   Scoped to <header> so the footer "Customer login" link is untouched. The
   colour !importants beat the per-page Tailwind text utilities on the homepage
   login anchor. A no-JS fallback (no `.fl-acct`) just shows the bare "Login". */
header a[href="/portal/login"].fl-acct,
header a[data-session-swapped="1"].fl-acct {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px;
  border: 1px solid var(--green-dark);
  border-radius: 999px;
  color: var(--green-dark) !important;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  line-height: 1;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.fl-acct__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  /* V96.x (Dallas) — transparent + outlined, same as the iPhone icon (was a
     filled olive circle). Olive person on a see-through, olive-ringed circle. */
  background: transparent;
  border: 1px solid var(--green-dark);
  color: var(--green-dark);
}
.fl-acct__person { width: 18px; height: 18px; fill: currentColor; display: block; }
.fl-acct__dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #22C55E;
  border: 2px solid #FBF8F1;       /* cream ring so the dot reads on the avatar */
}
.fl-acct__meta { display: flex; flex-direction: column; gap: 1px; padding-right: 4px; }
.fl-acct__hi { font-size: 11px; font-weight: 500; color: var(--text-mute, #6B6B5C); line-height: 1.1; }
.fl-acct__name { font-size: 15px; font-weight: 700; color: var(--green-dark); line-height: 1.1; }
.fl-acct__label { font-size: 14px; font-weight: 600; }

/* Logged-in pill: tighten the left so the avatar hugs the edge. */
header a.fl-acct--in { padding: 4px 9px 4px 4px; gap: 8px; }
/* Logged-OUT desktop (Dallas): show the circular avatar + "Login" (the same
   look as the logged-in pill, minus the green online dot + the name). Phones
   keep the icon-only round button via the ≤767px block below. */
header a.fl-acct:not(.fl-acct--in) .fl-acct__avatar { display: grid; }
.fl-acct--in .fl-acct__label { display: none; }

@media (hover: hover) {
  header a.fl-acct:not(.fl-acct--in):hover { background: var(--green-dark); color: #fff !important; }
  header a.fl-acct--in:hover { border-color: var(--gold); }
}

/* ── Phones (≤767px): round, transparent person-icon button (both states) ── */
@media (max-width: 767px) {
  header a[href="/portal/login"].fl-acct,
  header a[data-session-swapped="1"].fl-acct {
    gap: 0;
    padding: 0;
    width: 40px; height: 40px;
    justify-content: center;
    background: transparent;
  }
  /* Show the icon even when logged out (override the desktop :not hide); same
     specificity as that rule but later + in-media so it wins on phones only. */
  header a.fl-acct:not(.fl-acct--in) .fl-acct__avatar { display: grid; }
  header a.fl-acct .fl-acct__avatar {
    width: 100%; height: 100%;
    background: transparent;        /* transparent in our styling */
    border: none;                   /* the 40px button's ring is the outline (no double ring) */
    color: var(--green-dark);       /* olive person icon */
  }
  header a.fl-acct .fl-acct__person { width: 21px; height: 21px; }
  header a.fl-acct .fl-acct__meta,
  header a.fl-acct .fl-acct__label,
  header a.fl-acct .fl-acct__dot { display: none; }
}

/* ── Laptop+ (≥768px, Dallas): the logged-out pill hugs its circular avatar to
   the left edge so it mirrors the logged-in pill's silhouette ([avatar] Login),
   instead of the old bare centred "Login" text. Scoped min-width so the ≤767px
   icon-only button above is untouched. ── */
@media (min-width: 768px) {
  header a[href="/portal/login"].fl-acct:not(.fl-acct--in) { padding: 4px 14px 4px 4px; gap: 8px; }
}