/* Landing — marketing homepage redesign (2026-08).
   Warm espresso + orange conversion system. Self-contained, prefixed `.lp-*`
   so it never collides with the older component styles still used by pages not
   yet ported. Loads alphabetically after hero.css, before layout.css.
   Tokens come from variable.css. Buttons reuse the shared .btn-* system. */

/* ========== SHARED BITS ========== */

.lp-section { padding: var(--space-24) 0; }

/* ========== STICKY MOBILE CALL / ESTIMATE BAR ========== */

/* Lives here (not navigation.css) because both the public layout and the
   campaign layout (app/views/layouts/campaign.html.erb, which has no
   .site-top and doesn't load navigation.css) render .mobile-cta and both
   already load landing.css. */
.mobile-cta {
  display: none;
}

@media (max-width: 640px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-white);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
  }

  .mobile-cta .btn {
    flex: 1;
    font-size: var(--text-sm);
    padding: 0.85rem;
  }

  /* Keep the pinned bar from covering the footer's last content. */
  body {
    padding-bottom: 4.5rem;
  }
}

.lp-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  /* primary-dark (not -active): small mono label must clear AA (4.5:1) on the
     cream section grounds, where -active lands at ~4.47:1. */
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.lp-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-primary);
  display: inline-block;
}

/* Reusable modifier for any dark-background context (not just .lp-hero,
   which already scopes this via .lp-hero .lp-eyebrow). */
.lp-eyebrow--on-dark { color: var(--color-primary-light); }

.lp-sec-head { text-align: center; max-width: 44ch; margin: 0 auto var(--space-16); }
.lp-sec-head h2 { font-size: clamp(2rem, 3.6vw, var(--text-5xl)); margin: var(--space-3) 0; }
.lp-sec-head p { color: var(--color-gray-600); font-size: var(--text-lg); line-height: 1.6; }

/* ========== HERO ========== */

.lp-hero { position: relative; background: var(--color-espresso); color: var(--color-white); overflow: hidden; }
.lp-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.22; }
.lp-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, var(--color-espresso) 44%, rgba(26,18,16,0.85) 60%, rgba(42,24,21,0.6) 100%);
}
/* warm ambient light from top-left — subtle, not a neon halo */
.lp-hero-glow {
  position: absolute; top: -25%; left: -15%; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,99,74,0.16), transparent 60%);
}
/* Two independent columns: the left column (copy + proof) and the offer card
   top-align and never share row heights, so the card growing/shrinking per
   wizard step can't shift the copy or open a gap between headline and proof. */
.lp-hero .container {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr;
  column-gap: var(--space-16); align-items: start;
  padding-top: var(--space-12); padding-bottom: var(--space-16);
}
.lp-hero-main { display: flex; flex-direction: column; gap: var(--space-8); }
.lp-hero .lp-offer-card { align-self: start; }

.lp-hero .lp-eyebrow { color: var(--color-primary-light); }
.lp-hero .lp-eyebrow::before { background: var(--color-primary); }
.lp-hero h1 { color: var(--color-white); font-size: clamp(2.25rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.03em; margin: var(--space-4) 0; }
.lp-hero h1 .lp-tint, .lp-page-hero-content h1 .lp-tint { color: var(--color-primary); }
.lp-hero-lead { font-size: var(--text-lg); line-height: 1.45; color: rgba(255,255,255,0.86); max-width: 40ch; margin-bottom: var(--space-5); }

.lp-hero-rating { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 0; }
.lp-stars { display: inline-flex; gap: 2px; color: var(--color-yellow); }
.lp-stars svg { fill: var(--color-yellow); stroke: var(--color-yellow); width: 18px; height: 18px; }
.lp-hero-rating-text { font-size: var(--text-sm); color: rgba(255,255,255,0.8); }
.lp-hero-rating-text b { color: var(--color-white); }

.lp-hero-checks { list-style: none; display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.lp-hero-checks li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-lg); color: rgba(255,255,255,0.92); }
.lp-hero-checks svg { color: var(--color-secondary); width: 22px; height: 22px; flex-shrink: 0; }

.lp-hero-badges {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.12);
}
.lp-hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); font-weight: 600;
  color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  padding: 0.45rem 0.8rem; border-radius: var(--radius-full);
}
.lp-hero-badge svg { color: var(--color-primary); width: 18px; height: 18px; }

/* ========== OFFER CARD (wraps the lead-form turbo-frame) ========== */

.lp-offer-card { background: var(--color-white); color: var(--color-text); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; }
.lp-offer-head {
  background: linear-gradient(135deg, var(--color-primary-active), #a82c00); color: var(--color-white);
  padding: var(--space-5) var(--space-6) var(--space-4); text-align: center;
}
.lp-offer-head img { width: 34px; height: 34px; display: block; margin: 0 auto var(--space-2); }
.lp-ribbon {
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-primary-light); display: block; margin-bottom: var(--space-2);
}
.lp-offer-head h2 { font-size: var(--text-3xl); line-height: 1; color: var(--color-white); }
.lp-offer-head p { font-size: var(--text-sm); color: rgba(255,255,255,0.9); margin-top: var(--space-2); }
.lp-offer-body { padding: var(--space-5); }

/* ========== SOCIAL-PROOF / TRUST STRIP (reuses shared _trust_bar) ========== */
/* Restyle the existing .trust-bar to the cream instrument strip. */
.trust-bar { background: var(--color-cream); border-bottom: 1px solid var(--color-gray-100); }
.trust-bar-items {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-5) 0; flex-wrap: wrap;
}
.trust-bar-item { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-sm); color: var(--color-gray-700); }
.trust-bar-item svg { width: 22px; height: 22px; color: var(--color-primary-active); flex-shrink: 0; }
@media (max-width: 900px) { .trust-bar-items { justify-content: center; gap: var(--space-6); } }

/* ========== SERVICES GRID ========== */

.lp-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* Scoped to the About page FAQ (5 questions) — the shared 4-column grid
   leaves a lone orphaned card in the last row; 3 columns wraps 5 items as
   3+2 instead. Not a change to .lp-svc-grid itself, which campaigns/_faq
   (4 cards) and other callers still need unchanged. */
.lp-svc-grid--faq-5 { grid-template-columns: repeat(3, 1fr); }

/* Scoped to the Shower Remodels FAQ (6 questions) — the shared 4-column grid
   leaves 4+2, an orphaned last row; 3 columns wraps 6 items evenly as 3+3.
   No tablet override needed like --faq-5's: the base rule's 2-column tablet
   layout already divides 6 evenly (3 rows of 2), unlike 5. */
.lp-svc-grid--faq-6 { grid-template-columns: repeat(3, 1fr); }
.lp-svc-card {
  background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition-base), box-shadow var(--transition-base); box-shadow: var(--shadow-sm);
}
.lp-svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-gray-200); }
.lp-svc-media { aspect-ratio: 4 / 3; background: var(--color-gray-100); position: relative; overflow: hidden; }
.lp-svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.lp-svc-card:hover .lp-svc-media img { transform: scale(1.05); }
.lp-svc-tag {
  position: absolute; top: var(--space-3); left: var(--space-3); background: rgba(26,18,16,0.85); color: var(--color-white);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border-radius: var(--radius-full);
}
.lp-svc-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.lp-svc-body h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.lp-svc-benefit { font-weight: 600; color: var(--color-primary-active); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.lp-svc-body p.lp-svc-desc { font-size: var(--text-sm); color: var(--color-gray-600); line-height: 1.6; margin-bottom: var(--space-4); }
.lp-svc-link { margin-top: auto; font-weight: 700; color: var(--color-text); display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); transition: gap var(--transition-base), color var(--transition-base); }
.lp-svc-link:hover { color: var(--color-primary-active); gap: 0.7rem; }
.lp-svc-link svg { width: 16px; height: 16px; }

/* ========== BEFORE/AFTER — ENHANCED GRID (Phase 4 Plan A) ==========
   Scoped modifier classes, not changes to .lp-svc-grid/.lp-svc-card —
   those are shared with why_choose_us, process, and the objections
   accordion and must stay unchanged for them. */

/* Fluid column count, not the shared grid's fixed 4 — the admin form
   allows 1-4 before/after photos (BEFORE_AFTER_SLOTS in
   Admin::CampaignsController), and tub-to-shower currently has 3, which
   left an empty gap in the shared 4-column grid. auto-fit sizes to
   however many blocks actually exist instead of hardcoding a count that
   breaks again the next time an admin adds or removes one. */
.lp-ba-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-8); }

.lp-ba-card { box-shadow: var(--shadow-md); }
.lp-ba-card:hover { box-shadow: var(--shadow-xl); }
.lp-ba-card .lp-svc-media { aspect-ratio: 5 / 4; }

/* ========== CAMPAIGN OFFER BAND (Phase 4 Plan B) ==========
   Distinct from .promo-* (the homepage's top nav promo bar, unchanged
   and out of scope) — this is a new, smaller component that renders
   inline wherever it's placed (inline-flex respects the parent's
   text-align, so it centers in .lp-final-cta and left-aligns in the
   hero's flex column without any extra placement CSS). */
.campaign-offer-band {
  display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-full); padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm); color: var(--color-white); margin-bottom: var(--space-5);
}
.campaign-offer-band-text b { color: var(--color-primary-light); }

/* ========== CAMPAIGN LANDING HERO — SPLIT LAYOUT (Phase 4 Plan B) ==========
   Distinct from .lp-hero (the homepage's own hero, unchanged) — landing
   pages get a real, full-brightness photo panel in its own column
   instead of a faded full-bleed background image. No overlay/opacity
   trick needed: the photo isn't behind the text anymore, so this is a
   new class family rather than a .lp-hero variant. */
.campaign-hero { background: var(--color-espresso); color: var(--color-white); }
.campaign-hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); align-items: center;
  padding-top: var(--space-12); padding-bottom: var(--space-12);
}
.campaign-hero-content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.campaign-hero-content .lp-offer-card { align-self: stretch; }
.campaign-hero-content .lp-eyebrow { color: var(--color-primary-light); }
.campaign-hero-content .lp-eyebrow::before { background: var(--color-primary); }
.campaign-hero-content h1 { color: var(--color-white); font-size: clamp(2.25rem, 4.4vw, 3.2rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0; }
.campaign-hero-photo { border-radius: var(--radius-xl); overflow: hidden; }
.campaign-hero-img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

@media (max-width: 960px) {
  .campaign-hero-grid { grid-template-columns: 1fr; padding-top: var(--space-6); padding-bottom: var(--space-10); gap: var(--space-6); }
}

@media (max-width: 640px) {
  .campaign-hero-content h1 { font-size: 2.15rem; }
}

/* ========== STYLES & FINISHES GALLERY ========== */

.lp-gallery { background: var(--color-cream); }
.lp-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: var(--space-5); }
.lp-gallery-tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-gray-100); }
.lp-gallery-tile.lp-feature { grid-column: span 2; grid-row: span 2; }
.lp-gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.lp-gallery-tile:hover img { transform: scale(1.06); }
.lp-gallery-tile .lp-tag {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; background: rgba(26,18,16,0.82); color: var(--color-white);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: var(--radius-full);
}
.lp-gallery-tile .lp-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--space-8) var(--space-4) var(--space-3);
  color: var(--color-white); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.lp-gallery-note { text-align: center; margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-gray-600); }

/* ========== ONE-DAY BAND + PROCESS ========== */

.lp-oneday {
  background: linear-gradient(120deg, var(--color-espresso), var(--color-espresso-mid)); color: var(--color-white);
  border-radius: var(--radius-xl); padding: var(--space-10); display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-8); margin-bottom: var(--space-16); position: relative; overflow: hidden; flex-wrap: wrap;
}
.lp-oneday-glow { position: absolute; right: -8%; top: -40%; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255,99,74,0.16), transparent 60%); }
.lp-oneday-l { position: relative; z-index: 1; max-width: 34ch; }
.lp-oneday-big { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5xl); line-height: 1; color: var(--color-primary); }
.lp-oneday-l h3 { font-size: var(--text-2xl); margin: var(--space-2) 0; color: var(--color-white); }
.lp-oneday-l p { color: rgba(255,255,255,0.8); }

.lp-proc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); position: relative; }
.lp-proc-steps::before { content: ""; position: absolute; top: 32px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--color-gray-200) 0 8px, transparent 8px 16px); }
.lp-proc-step { text-align: center; position: relative; }
.lp-proc-num {
  width: 64px; height: 64px; border-radius: 50%; background: var(--color-white); border: 2px solid var(--color-primary);
  color: var(--color-primary-active); font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xl);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); position: relative; z-index: 1;
}
.lp-proc-step h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.lp-proc-step p { font-size: var(--text-sm); color: var(--color-gray-600); line-height: 1.6; }

/* ========== WHY / GUARANTEE (dark band) ========== */

.lp-why { background: var(--color-espresso); color: var(--color-white); }
.lp-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.lp-why-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius-lg); padding: var(--space-6); }
.lp-why-ic { width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(255,99,74,0.16); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.lp-why-ic svg { color: var(--color-primary); width: 24px; height: 24px; }
.lp-why-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); color: var(--color-white); }
.lp-why-card p { font-size: var(--text-sm); color: rgba(255,255,255,0.72); line-height: 1.6; }

/* ========== FINANCING BAND ========== */

.lp-finance { background: var(--color-primary-active); color: var(--color-white); padding: var(--space-16) 0; }
.lp-finance .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.lp-finance .lp-eyebrow { color: var(--color-white); }
.lp-finance .lp-eyebrow::before { background: var(--color-white); }
.lp-finance h2 { font-size: clamp(1.75rem, 3vw, var(--text-4xl)); margin: var(--space-3) 0; color: var(--color-white); }
.lp-finance p { color: var(--color-white); max-width: 46ch; }
.lp-finance-r { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ========== REVIEWS ========== */

/* Espresso ground so GoHighLevel's dark review-widget cards read as intentional
   (the widget's internal theme is set in GHL, not reachable by our CSS). */
.lp-reviews { background: var(--color-espresso); color: var(--color-white); }
.lp-reviews .lp-sec-head h2 { color: var(--color-white); }
.lp-reviews .lp-sec-head p { color: rgba(255, 255, 255, 0.75); }
.lp-reviews .lp-eyebrow { color: var(--color-primary-light); }
.lp-reviews .lp-eyebrow::before { background: var(--color-primary); }
.lp-rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.lp-rev-card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-4); }
.lp-rev-card .lp-stars svg { width: 18px; height: 18px; }
.lp-rev-quote { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text); }
.lp-rev-person { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.lp-rev-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-active); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; flex-shrink: 0; }
.lp-rev-person b { display: block; font-size: var(--text-sm); }
.lp-rev-person span { font-size: var(--text-xs); color: var(--color-gray-500); }
.lp-rev-verified { margin-left: auto; font-size: var(--text-2xs); color: var(--color-secondary-dark); display: flex; align-items: center; gap: 0.3rem; font-weight: 600; }
.lp-rev-verified svg { width: 13px; height: 13px; }

/* GoHighLevel review widget: we can only style the container (the iframe's
   internals are cross-origin, configured in GHL). Center it and cap the width
   so it reads as part of the section rather than edge-to-edge. */
.lp-reviews-widget { max-width: 1040px; margin: 0 auto; }
.lp-reviews-widget iframe { display: block; width: 100%; border: 0; }

/* ========== SERVICE AREA ========== */

.lp-areas .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.lp-areas h2 { font-size: clamp(1.75rem, 3vw, var(--text-4xl)); margin: var(--space-3) 0; }
.lp-areas-list { list-style: none; display: grid; gap: var(--space-3); margin: var(--space-6) 0 var(--space-8); }
.lp-areas-list li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-lg); }
.lp-areas-list svg { color: var(--color-secondary); width: 22px; height: 22px; flex-shrink: 0; }
/* Southern Nevada service-area map — hand-built inline SVG (no external embed).
   Warm cream land on the white section, orange city pins + coverage rings, a
   subtle map-dot texture, and the Las Vegas metro drawn as the glowing hub. */
.lp-area-map { margin: 0; position: relative; }
/* Compact variant — the smaller map used in the contact page's service-area row. */
.lp-area-map--compact { max-width: 340px; }
.lp-area-map-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-area-land { fill: var(--color-cream); stroke: none; }
.lp-area-land-tex { fill: url(#area-dots); stroke: none; }
/* Only the real state borders are stroked; the cropped edges fade into the section. */
.lp-area-border { fill: none; stroke: var(--color-primary-dark); stroke-width: 2.6; stroke-opacity: 0.55; stroke-linejoin: round; stroke-linecap: round; }
/* Lake Mead — a muted slate water accent (cool, so it reads as water against the warm land). */
.lp-area-water { fill: #bcd4dc; opacity: 0.75; }
.lp-area-water-line { fill: none; stroke: #8fb0bb; stroke-width: 1; opacity: 0.6; }
.lp-area-water-label { fill: #5b7d88; font-family: var(--font-sans); font-size: 9px; font-style: italic; font-weight: 500; }
/* Highways: a white casing under a tan line so they read as roads on the light land. */
.lp-area-road-casing { fill: none; stroke: var(--color-white); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.lp-area-road { fill: none; stroke: #c2b1a4; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lp-area-road--i15 { stroke: #b7a08f; stroke-width: 2; }
.lp-area-watermark {
  fill: var(--color-primary-dark); opacity: 0.13; font-family: var(--font-mono);
  font-size: 20px; font-weight: 700; letter-spacing: 0.2em;
}
/* Each city is its own street-grid patch (masked to fade at the edges — no ring). */
.lp-area-grid { fill: url(#city-grid); }
.lp-area-dot { fill: var(--color-primary); }
.lp-area-dot--hub { fill: var(--color-primary-active); }
.lp-area-dot-core { fill: var(--color-white); }
.lp-area-label {
  fill: var(--color-text); font-family: var(--font-sans); font-size: 15px;
  font-weight: 600; dominant-baseline: middle;
  /* Cream knockout halo so labels stay legible where roads/grid pass behind them. */
  paint-order: stroke; stroke: var(--color-cream); stroke-width: 3px;
}
.lp-area-label--hub { font-size: 19px; font-weight: 700; }
.lp-area-map-cap {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin-top: var(--space-4); color: var(--color-gray-600); font-size: var(--text-sm);
  font-weight: 500; text-align: center;
}
.lp-area-map-cap svg { color: var(--color-primary-active); flex-shrink: 0; }

/* ========== INTERIOR PAGE HERO (service / about / contact) ========== */

.lp-page-hero { position: relative; background: var(--color-espresso); color: var(--color-white); overflow: hidden; }
.lp-page-hero .container { position: relative; z-index: 2; padding-top: var(--space-16); padding-bottom: var(--space-16); }
.lp-page-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: center; }
.lp-page-hero-content h1 { color: var(--color-white); font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; margin: var(--space-4) 0; }
.lp-page-hero-lead { font-size: var(--text-lg); line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 42ch; margin-bottom: var(--space-8); }
.lp-page-hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.lp-page-hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }
.lp-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); margin-bottom: var(--space-5); }
.lp-breadcrumb a { color: rgba(255,255,255,0.7); }
.lp-breadcrumb a:hover { color: var(--color-primary); }
.lp-breadcrumb span { color: var(--color-primary-light); }

/* ========== BENEFITS (service pages) ========== */

.lp-benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.lp-benefits-text h2 { font-size: clamp(1.75rem, 3vw, var(--text-4xl)); margin: var(--space-3) 0 var(--space-5); }
.lp-benefits-body { color: var(--color-gray-600); line-height: 1.8; }
.lp-benefits-body p { margin-bottom: var(--space-4); }
.lp-benefit-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.lp-benefit-card { background: var(--color-cream); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-6); }
.lp-benefit-ic { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-primary-light); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.lp-benefit-ic svg { color: var(--color-primary-active); width: 24px; height: 24px; }
.lp-benefit-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.lp-benefit-card p { color: var(--color-gray-600); font-size: var(--text-sm); line-height: 1.6; }

/* ========== WARRANTY BAND ========== */

.lp-warranty { background: var(--color-espresso); color: var(--color-white); padding: var(--space-16) 0; }
.lp-warranty-inner { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.lp-warranty-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--color-yellow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-warranty-ic svg { color: var(--color-espresso); }
.lp-warranty-copy { flex: 1; min-width: 280px; }
.lp-warranty-copy h3 { color: var(--color-white); font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.lp-warranty-copy p { color: rgba(255,255,255,0.75); line-height: 1.7; max-width: 46ch; }

/* ========== CONTACT PAGE ========== */

.lp-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.lp-contact-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-8); }
.lp-contact-list { display: flex; flex-direction: column; gap: var(--space-6); margin: 0; }
/* Each row holds only dt/dd (valid <dl>). The icon lives inside the dt but is
   positioned absolutely so it still reads as a left badge spanning the row; the
   content is padded clear of it. min-height keeps single-line rows icon-tall. */
.lp-contact-row { position: relative; min-height: 44px; padding-left: calc(44px + var(--space-3)); }
.lp-contact-ic { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-primary-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-contact-ic svg { color: var(--color-primary-active); width: 20px; height: 20px; }
.lp-contact-row dt { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-gray-500); margin-bottom: var(--space-1); }
.lp-contact-row dd { margin: 0; }
.lp-contact-phone { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); letter-spacing: -0.02em; }

/* ========== ABOUT PAGE ========== */

.lp-about-story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.lp-about-story p { color: var(--color-gray-700); line-height: 1.8; margin-bottom: var(--space-4); }
.lp-about-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.lp-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.lp-value-card { text-align: center; background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); }
.lp-value-ic { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--color-primary-light); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }
.lp-value-ic svg { color: var(--color-primary-active); width: 28px; height: 28px; }
.lp-value-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.lp-value-card p { color: var(--color-gray-600); font-size: var(--text-sm); line-height: 1.6; }

@media (max-width: 900px) {
  .lp-page-hero-grid, .lp-benefits-grid, .lp-contact-grid, .lp-about-story { grid-template-columns: 1fr; gap: var(--space-8); }
  .lp-page-hero-media { order: -1; }
  .lp-benefit-cards { grid-template-columns: 1fr 1fr; }
  .lp-value-grid { grid-template-columns: 1fr; }
  .lp-warranty-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .lp-benefit-cards { grid-template-columns: 1fr; }
}

/* ========== BLOG INDEX ========== */

.lp-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.lp-post-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.lp-post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-gray-200); }
.lp-post-media { aspect-ratio: 16 / 10; background: var(--color-gray-100); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lp-post-media img { width: 100%; height: 100%; object-fit: cover; }
.lp-post-media svg { color: var(--color-gray-300); }
.lp-post-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.lp-post-body h3 { font-size: var(--text-xl); line-height: 1.3; margin-bottom: var(--space-3); }
.lp-post-body h3 a { color: var(--color-text); transition: color var(--transition-fast); }
.lp-post-body h3 a:hover { color: var(--color-primary-active); }
.lp-post-excerpt { color: var(--color-gray-600); font-size: var(--text-sm); line-height: 1.6; margin-bottom: var(--space-4); }
.lp-post-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); margin-top: auto; }
.lp-post-date { color: var(--color-gray-500); display: flex; align-items: center; gap: var(--space-1); }
.lp-post-more { font-weight: 700; color: var(--color-primary-active); }
@media (max-width: 900px) { .lp-post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .lp-post-grid { grid-template-columns: 1fr; } }

/* ========== FINAL CTA ========== */

.lp-final { background: linear-gradient(120deg, var(--color-espresso), var(--color-espresso-mid)); color: var(--color-white); text-align: center; position: relative; overflow: hidden; }
.lp-final-glow { position: absolute; left: 50%; top: -30%; width: 760px; height: 760px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,99,74,0.14), transparent 58%); }
.lp-final .container { position: relative; z-index: 1; }
.lp-final h2 { font-size: clamp(2rem, 4vw, var(--text-5xl)); max-width: 20ch; margin: 0 auto var(--space-5); color: var(--color-white); }
.lp-final p { color: rgba(255,255,255,0.82); font-size: var(--text-lg); max-width: 52ch; margin: 0 auto var(--space-8); }
.lp-final-btns { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* ========== RESPONSIVE ========== */

@media (max-width: 960px) {
  /* Flatten the left wrapper so copy / card / proof become direct grid items,
     then order them: headline+rating, then the form (above the fold), then
     the supporting proof below it. */
  .lp-hero .container { grid-template-columns: 1fr; gap: var(--space-6); }
  .lp-hero-main { display: contents; }
  .lp-hero-copy { order: 1; }
  .lp-hero .lp-offer-card { order: 2; align-self: stretch; }
  .lp-hero-proof { order: 3; }
  .lp-areas .container { grid-template-columns: 1fr; gap: var(--space-10); }
  .lp-svc-grid { grid-template-columns: 1fr 1fr; }
  .lp-svc-grid--faq-5 { grid-template-columns: 1fr 1fr; }
  .lp-rev-grid, .lp-why-grid, .lp-proc-steps { grid-template-columns: 1fr; }
  .lp-proc-steps::before { display: none; }
  .lp-gallery-grid { grid-template-columns: 1fr 1fr; }
  .lp-gallery-tile.lp-feature { grid-column: span 2; grid-row: auto; min-height: 300px; }
}

@media (max-width: 640px) {
  .lp-section { padding: var(--space-16) 0; }
  /* Tighten the vertical rhythm above the lead form so the zip field clears the
     ~730px mobile fold. The decorative offer-card stamp is dropped on phones —
     above-the-fold space is better spent lifting the form (see homepage_fold_test). */
  .lp-hero .container { padding-top: var(--space-4); padding-bottom: var(--space-10); gap: var(--space-4); }
  .lp-hero h1 { font-size: 2.15rem; margin: var(--space-2) 0; }
  .lp-offer-head img { display: none; }
  .lp-hero-checks li { font-size: var(--text-base); }
  .lp-svc-grid, .lp-gallery-grid { grid-template-columns: 1fr; }
  .lp-gallery-tile.lp-feature { grid-column: span 1; }
}

/* ========== STICKY CALL BAR ========== */

.lp-sticky-call-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  background: var(--color-primary-active);
}

.lp-sticky-call-bar a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
}

/* ========== FINAL CTA ========== */

.lp-final-cta {
  text-align: center;
  padding: var(--space-16) 0;
}

/* ========== FOOTER ========== */

.lp-footer {
  padding: var(--space-6) 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ========== PROSE SECTION ========== */
/* Single-column heading + body text, used by the service-page and about-page
   content sections that are plain prose rather than a card grid or a
   two-column benefits layout. */

.lp-prose-section { max-width: 44rem; }
.lp-prose-section h2 { font-size: clamp(1.75rem, 3vw, var(--text-4xl)); margin: 0 0 var(--space-5); }
.lp-prose-section p { color: var(--color-gray-600); line-height: 1.8; margin-bottom: var(--space-4); }
.lp-prose-section ul { color: var(--color-gray-600); line-height: 1.8; margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.lp-prose-section li { margin-bottom: var(--space-2); }

/* ========== ABOUT PAGE REDESIGN (2026-08-31) ========== */
/* From the Claude Design canvas "About Page Redesign.dc.html" — see
   docs/superpowers/specs/2026-08-31-about-page-redesign-design.md. */

/* Single source of truth for the two stacked sticky bars' heights, so every
   element that needs to clear them (the jump nav itself, anchor targets,
   sticky sidebars within the page) derives from the same numbers instead of
   each carrying its own independently-measured magic number. */
:root {
  --lp-about-header-offset: 111px; /* site's .site-top once its is-scrolled state shrinks it — see navigation.css */
  --lp-about-jumpnav-height: 58px; /* .lp-jump-nav's rendered height */
}

/* --- Hero stat grid --- */
.lp-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lp-stat-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg); padding: var(--space-4); }
.lp-stat-num { font-size: var(--text-3xl); font-weight: 800; color: var(--color-primary); line-height: 1; }
.lp-stat-label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: var(--space-2); }

/* --- Sticky jump nav --- */
/* top offset clears the site's own sticky .site-top header, so the two
   sticky bars stack instead of overlapping. */
.lp-jump-nav { position: sticky; top: var(--lp-about-header-offset); z-index: 5; background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--color-gray-100); }
/* Anchor targets need to clear both sticky bars (site header + jump nav) so
   a jump-nav click doesn't land the section underneath them. */
#story, #vetting, #services, #process, #coverage, #faq {
  scroll-margin-top: calc(var(--lp-about-header-offset) + var(--lp-about-jumpnav-height) + var(--space-2));
}
.lp-jump-nav-inner { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) 0; }
.lp-jump-link { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-600); border: 1px solid var(--color-gray-100); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); white-space: nowrap; }
.lp-jump-link:hover { color: var(--color-primary-active); border-color: var(--color-gray-200); }

/* --- Story + specialist 2-column layout --- */
.lp-about2-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-16); align-items: start; }
/* Must clear both sticky bars (site header + jump nav) — a bare offset here
   left this sidebar rendering underneath the opaque jump nav for its top
   ~80px whenever it engaged. */
.lp-about2-sticky { position: sticky; top: calc(var(--lp-about-header-offset) + var(--lp-about-jumpnav-height) + var(--space-4)); }
.lp-about2-verdict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* --- Verdict rows (specialist section: what we do / don't do) --- */
.lp-verdict-row { display: flex; gap: var(--space-3); align-items: flex-start; border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.lp-verdict-mark { flex: none; font-weight: 700; font-size: var(--text-lg); }
.lp-verdict-mark--yes { color: var(--color-secondary); }
.lp-verdict-mark--no { color: var(--color-primary-active); }

/* --- Accordion (native <details>/<summary>, three groups: vetting, deep, faq) ---
   Sign character ("+"/"–") swaps on [open] via ::after content, matching the
   design; the native marker is hidden. Light and dark variants share
   structure, differ only in color. */
.lp-accordion-item { border-radius: var(--radius-lg); overflow: hidden; }
.lp-accordion-item + .lp-accordion-item { margin-top: var(--space-2); }
.lp-accordion-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; font-weight: 700; }
.lp-accordion-summary::-webkit-details-marker { display: none; }
.lp-accordion-sign { flex: none; font-size: var(--text-xl); color: var(--color-primary-active); }
.lp-accordion-sign::after { content: "+"; }
.lp-accordion-item[open] .lp-accordion-sign::after { content: "\2013"; } /* en dash, reads as a minus */
.lp-accordion-body { padding: 0 var(--space-5) var(--space-5); color: var(--color-gray-600); line-height: 1.6; }
.lp-accordion-body p + p { margin-top: var(--space-3); }

.lp-accordion-item--light { background: var(--color-white); border: 1px solid var(--color-gray-100); }

.lp-accordion-item--dark { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.lp-accordion-item--dark .lp-accordion-summary { color: var(--color-white); }
.lp-accordion-item--dark .lp-accordion-sign { color: var(--color-primary); }
.lp-accordion-item--dark .lp-accordion-body { color: rgba(255,255,255,0.82); }

/* Vetting accordion's numbered ring (dark theme only). */
.lp-vetting-num { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--color-primary); color: var(--color-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lp-accordion-item--dark .lp-accordion-body--indent { padding-left: calc(var(--space-5) + 30px + var(--space-4)); }

/* --- Coverage area tags --- */
.lp-area-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lp-area-tag { font-size: var(--text-sm); font-weight: 600; border: 1px solid var(--color-gray-100); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); }

/* --- Section heading (this page's h2 scale — smaller than .lp-sec-head h2's,
   since these sections are denser than a typical hero-led landing section) --- */
.lp-h2 { font-size: clamp(1.75rem, 3vw, var(--text-4xl)); letter-spacing: -0.03em; margin: var(--space-3) 0 var(--space-5); }
.lp-h2--tight { margin: var(--space-3) 0 var(--space-2); }
.lp-h2--bottom-only { margin: 0 0 var(--space-8); }
.lp-h2--on-dark { color: var(--color-white); }

/* --- Lead paragraph (matches .lp-sec-head p's sizing without requiring the
   centered .lp-sec-head wrapper — used in left-aligned two-column intros) --- */
.lp-lead { font-size: var(--text-lg); line-height: 1.6; color: var(--color-gray-600); }

/* --- Accordion question text (the <summary>'s flex:1 sibling of .lp-accordion-sign) --- */
.lp-accordion-q { flex: 1; }
.lp-accordion-q--lg { font-size: var(--text-lg); }
.lp-accordion-q--xl { font-size: var(--text-xl); letter-spacing: -0.015em; line-height: 1.3; }

/* --- Two-column grid ratio modifiers (vetting: copy narrower than the
   accordion; deep-reads: accordion wider than the sidebar) --- */
.lp-about2-grid--narrow-left { grid-template-columns: 0.8fr 1.2fr; }
.lp-about2-grid--wide-left { grid-template-columns: 1.2fr 0.8fr; }
.lp-about2-grid--even { grid-template-columns: 1fr 1fr; }

/* --- Services grid, used as page links (About's "What we do" cards link
   straight to each service page, unlike the marketing-copy .lp-svc-card
   elsewhere that always pairs with a separate .lp-svc-link "Explore" row) --- */
.lp-svc-card--link { padding: var(--space-6); text-decoration: none; color: var(--color-text); }
.lp-svc-card--link .lp-svc-body { padding: 0; }
.lp-svc-card--link .lp-svc-arrow { color: var(--color-primary-active); font-size: var(--text-xl); }
.lp-svc-card--link h3 { margin-top: var(--space-2); }

/* --- Coverage + mini-warranty sidebar cards --- */
.lp-coverage-card { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-2xl); padding: var(--space-6); }
.lp-coverage-card h3 { font-size: var(--text-2xl); letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.lp-warranty-mini { background: var(--color-espresso); color: var(--color-white); border-radius: var(--radius-2xl); padding: var(--space-6); }
.lp-warranty-mini-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary-light); margin-bottom: var(--space-3); }
.lp-warranty-mini p { font-size: var(--text-base); line-height: 1.6; color: rgba(255,255,255,0.75); margin-top: var(--space-3); }
.lp-warranty-mini p:first-of-type { font-size: var(--text-xl); line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; color: var(--color-white); margin-top: 0; }

/* --- Final CTA license line --- */
.lp-final-license { font-size: var(--text-sm); color: rgba(255,255,255,0.55); margin-top: var(--space-4); }

/* ========== SHOWER REMODELS REDESIGN (2026-08-31) ========== */
/* From the Claude Design canvas "Shower Remodels Page.dc.html" — see
   docs/superpowers/specs/2026-08-31-shower-remodels-redesign-design.md.
   Reuses the About redesign's .lp-jump-nav*, .lp-h2, .lp-lead,
   .lp-accordion-*, .lp-eyebrow--on-dark, .lp-tint, .lp-stat-grid/-card,
   .lp-vetting-num, .lp-coverage-card, .lp-warranty-mini, and the
   --lp-about-header-offset/--lp-about-jumpnav-height custom properties. */

/* --- Hero photo (real <img>, not a decorative background — see spec) --- */
.lp-hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }

/* --- Tile vs. grout-free comparison --- */
.lp-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.lp-compare-card { border-radius: var(--radius-xl); overflow: hidden; }
.lp-compare-card--cons { border: 1px solid var(--color-gray-100); }
.lp-compare-card--pros { border: 2px solid var(--color-primary-active); }
.lp-compare-header { padding: var(--space-4) var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; }
/* gray-600 (not gray-500) — gray-500 fails AA contrast at this text size
   against the cream background this label sits on. */
.lp-compare-card--cons .lp-compare-header { background: var(--color-cream); border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-600); }
.lp-compare-card--pros .lp-compare-header { background: var(--color-primary-active); color: var(--color-white); }
.lp-compare-list { padding: var(--space-2) 0; }
.lp-compare-item { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-5); font-size: var(--text-base); line-height: 1.45; }
.lp-compare-item-mark { flex: none; font-weight: 700; }
.lp-compare-card--cons .lp-compare-item { color: var(--color-gray-600); }
.lp-compare-card--cons .lp-compare-item-mark { color: var(--color-gray-400); }
.lp-compare-card--pros .lp-compare-item-mark { color: var(--color-secondary); }

/* --- Cost section --- */
.lp-cost-box { background: var(--color-espresso); color: var(--color-white); border-radius: var(--radius-2xl); padding: var(--space-6); }
.lp-cost-box-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary-light); }
.lp-big-num { font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--color-primary); font-size: clamp(2.5rem, 5vw, 4rem); margin: var(--space-3) 0; }
.lp-cost-box p { font-size: var(--text-base); line-height: 1.6; color: rgba(255,255,255,0.8); }
.lp-driver-row { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; gap: var(--space-4); align-items: flex-start; }
.lp-driver-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-cream); color: var(--color-primary-dark); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* --- Included checklist --- */
.lp-check-list { border: 1px solid var(--color-gray-100); border-radius: var(--radius-xl); overflow: hidden; }
.lp-check-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); font-size: var(--text-base); border-bottom: 1px solid #f0eeec; }
.lp-check-item:last-child { border-bottom: 0; }
.lp-check-item:nth-child(even) { background: var(--color-cream); }
.lp-check-mark { color: var(--color-secondary); font-weight: 700; }

/* --- Timeline callout --- */
.lp-timeline-num { font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--color-primary-active); font-size: clamp(3rem, 7vw, 5rem); margin: var(--space-4) 0; }
.lp-timeline-fact { border: 1px solid var(--color-gray-100); border-radius: var(--radius-lg); padding: var(--space-5); font-size: var(--text-base); line-height: 1.55; }

/* --- "Which one is yours?" project picker (CSS-only radio tabs) --- */
.lp-picker-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.lp-picker-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.lp-picker-chip { display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: var(--space-3) var(--space-5); font-size: var(--text-base); font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.lp-picker-input:checked + .lp-picker-chip { border-color: var(--color-primary-active); background: var(--color-primary-active); color: var(--color-white); }
.lp-picker-input:focus-visible + .lp-picker-chip { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }
.lp-picker-panel { display: none; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-2xl); padding: var(--space-8); }
/* Each radio input shows its own panel via a general sibling selector — the
   inputs and panels are flat siblings in source order (inputs+chips first,
   then panels), so #id:checked ~ .lp-picker-panel[for-id] works without JS. */
#which-replace:checked ~ .lp-picker-panel[data-for="replace"],
#which-convert:checked ~ .lp-picker-panel[data-for="convert"],
#which-safety:checked ~ .lp-picker-panel[data-for="safety"] { display: block; }
.lp-picker-panel h3 { font-size: var(--text-2xl); letter-spacing: -0.02em; color: var(--color-white); }
.lp-picker-panel p { font-size: var(--text-lg); line-height: 1.6; color: rgba(255,255,255,0.82); margin-top: var(--space-3); }
.lp-picker-best { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.12); }
.lp-picker-best-mark { flex: none; color: var(--color-secondary); font-weight: 700; }
.lp-picker-best span:last-child { font-size: var(--text-base); line-height: 1.5; color: var(--color-white); }

/* --- Light card variant (desktop warranty sidebar card, with CTA) --- */
.lp-info-card-light { background: var(--color-white); border: 1px solid var(--color-gray-100); border-radius: var(--radius-2xl); padding: var(--space-6); }
.lp-info-card-light .lp-warranty-mini-label { color: var(--color-primary-dark); }
.lp-info-card-light p:first-of-type { color: var(--color-text); }
.lp-info-card-light p { color: var(--color-gray-600); }

@media (max-width: 900px) {
  .lp-compare-grid { grid-template-columns: 1fr; }
}

/* Responsive overrides — placed after every base rule above (not the earlier
   @media (max-width: 900px) block) since a same-specificity rule defined
   later in the file always wins; a media-scoped override placed before its
   own base rule is silently ignored at every viewport. */
@media (max-width: 900px) {
  .lp-about2-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .lp-about2-sticky { position: static; }
  .lp-about2-verdict-grid { grid-template-columns: 1fr; }
  /* Jump nav: horizontal scroll instead of wrapping to 2-3 cramped rows. */
  .lp-jump-nav-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lp-jump-link { flex: none; }
}