/* JAS Cleaning — single-purpose ad landing pages (/house-cleaning, /deep-cleaning,
   /move-out-cleaning, /airbnb-cleaning, /office-cleaning, /post-construction-cleaning
   + /es mirrors). Linked from landing/LandingContent.tsx via <PageStyles page="/landing.css">.
   Base tokens/type/buttons/cards come from styles.css; site.css chrome loads but the page
   authors its own minimal header/footer (no nav — one page, one CTA). Keep this sheet
   lean: these pages are Google Ads Quality-Score-critical (mobile speed). */

/* ── Minimal chrome ─────────────────────────────────────────────────────────── */
.lp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--line-soft);
}
.lp-head .logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 20px; }
/* The shared .lang pill markup is styled for the utility bar (.ub .lang) only —
   restyle it for this light header (the booking-wizard.css .bk-header .lang pattern).
   Inactive label uses full-opacity --ink-3 (the /bookings header's AA-passing recipe);
   an opacity fade here fails the axe contrast gate on this white ground. */
.lp-head .lang { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }
.lp-head .lang b, .lp-head .lang span { cursor: pointer; font-weight: 400; color: var(--ink-3); opacity: 1; padding: 4px 2px; transition: color 0.18s ease; }
.lp-head .lang b.on, .lp-head .lang span.on { color: var(--leaf); }

.lp-foot {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; text-align: center;
  padding: 28px 24px 40px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--ink-3);
}
.lp-foot a { color: var(--ink-3); text-decoration: underline; }

/* ── Hero ───────────────────────────────────────────────────────────────────── */
/* .page-h supplies the eyebrow/h1/lead scale — trim it for a landing page (the
   88px homepage display size pushes the CTA below the fold on mobile). */
.lp-hero { padding-bottom: 40px; }
.lp-hero h1 { font-size: 60px; margin: 12px 0 20px; }
.hero-ctas { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.hero-microcopy { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* Trust row. Only the DIRECT children get flex display — the inner bilingual
   <span lang> pairs keep the global animations.css visibility rules (the
   quote.css/home.css re-assert trap). */
.lp-trust { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); margin-top: 18px; }
.lp-trust > span { display: inline-flex; gap: 6px; align-items: center; }
.lp-trust .ck, .lp-guarantee .ck { color: var(--leaf); font-weight: 700; }

/* CLS guard: while [hidden] (pre-hydration honesty state) the badge still reserves
   its one line of height — invisible, not display:none — so the reveal never shifts
   the pricing card below. applyReveal removes `hidden` and the normal rule applies. */
.lp-google-badge { margin-top: 16px; min-height: 24px; }
.lp-google-badge[hidden] { display: block; visibility: hidden; }
.lp-stars { color: var(--gold); letter-spacing: 3px; font-size: 16px; }
.lp-google-badge-text { margin-left: 10px; color: var(--ink-2); font-size: 14.5px; }

/* ── Pricing + form cards ───────────────────────────────────────────────────── */
.lp-price, .lp-form, .lp-bottom-cta, .lp-proof { padding-top: 28px; padding-bottom: 28px; }
.lp-price-card, .lp-form-card { max-width: 640px; margin: 0 auto; padding: 28px 30px; }
.lp-price-main { font-family: var(--display); font-size: 42px; letter-spacing: -0.02em; margin-top: 10px; line-height: 1.1; }
.lp-price-meta { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.lp-price-note { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.lp-price-fine { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-3); }

.lp-form-card h2 { font-family: var(--display); font-size: 30px; letter-spacing: -0.01em; font-weight: 400; }
.lp-form-sub { font-size: 14px; color: var(--ink-3); margin-top: 6px; }

/* ── Proof band (CleanCheck + guarantee; owner-supplied work photos slot in later) ── */
.lp-proof-body { max-width: 640px; margin: 0 auto; text-align: center; }
.lp-proof-copy { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.lp-guarantee { margin-top: 12px; font-size: 15.5px; font-weight: 600; }

.lp-bottom-cta { text-align: center; }

/* ── Google reviews marquee (continuous left→right flow) ────────────────────── */
/* Hidden shells cost 0px until hydration reveals real cards; the band reserves
   height so the reveal causes no layout shift. Two identical halves + a
   percentage keyframe make the loop seamless even as hydration changes the
   track's width (a px measurement would drift). Transform-only, one layer, no JS. */
.lp-reviews { overflow: hidden; padding: 28px 0 36px; border-top: 1px solid var(--line-soft); min-height: 300px; }
/* Summary-only payloads reveal the hero badge (which suppresses the empty state)
   while zero review CARDS hydrate — collapse the band entirely rather than show
   an empty bordered strip. Progressive: browsers without :has() keep the band. */
.lp-reviews:not(:has(.rev-card:not([hidden]))):not(:has([data-reviews-empty]:not([hidden]))) { display: none; }
.rev-marquee { overflow: hidden; }
.rev-marquee-track { display: flex; width: max-content; animation: lp-marquee-right 70s linear infinite; will-change: transform; }
.rev-marquee-half { display: flex; gap: 18px; padding-right: 18px; }
.rev-marquee .rev-card { width: 320px; flex: 0 0 auto; }
@keyframes lp-marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
/* Pause on hover + keyboard focus into the band (no visible pause control —
   owner 2026-08-13; reduced-motion users get the static strip below). */
.rev-marquee:hover .rev-marquee-track,
.rev-marquee:focus-within .rev-marquee-track { animation-play-state: paused; }
/* Reduced motion: no animation, no duplicate content, user-scrollable strip.
   (The global animations.css kill also freezes keyframes; this makes the intent
   explicit and drops the aria-hidden duplicate so nothing reads twice.) */
@media (prefers-reduced-motion: reduce) {
  .rev-marquee-track { animation: none; }
  .rev-marquee-dup { display: none; }
  .rev-marquee { overflow-x: auto; }
}
.lp-reviews-empty { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-hero h1 { font-size: 42px; }
  .page-h.lp-hero { padding: 40px 24px 32px; }
  section.pg.lp-price, section.pg.lp-form, section.pg.lp-proof, section.pg.lp-bottom-cta { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 480px) {
  .lp-hero h1 { font-size: 34px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .lp-bottom-cta .btn { width: 100%; justify-content: center; }
}