/*
 * Clever LCR Directory — scoped stylesheet.
 *
 * Status: Step 1 scaffolding. This file currently contains ONLY the design
 * tokens (CSS custom properties), the page-level scope rule, and a handful
 * of placeholder/empty-state styles. As we land each section in subsequent
 * steps, real component CSS gets appended below — translating each Tailwind
 * utility from the reference HTML to a prefixed class scoped under
 * .lcr-page-v1.
 *
 * No Tailwind. No frameworks. Every selector lives under .lcr-page-v1.
 */

/* ── Design tokens (byte-identical to tailwind.config in reference HTML) ── */
.lcr-page-v1 {
  /* Brand — from tailwind.config.theme.extend.colors.brand */
  --lcr-blue:           #0075EB;
  --lcr-blue-hover:     #005FBF;
  --lcr-blue-light:     #E8F2FE;
  --lcr-green:          #00B373;
  --lcr-green-hover:    #009960;
  --lcr-green-light:    #ECFDF5;
  --lcr-green-border:   #6EE7B7;

  /* Neutrals */
  --lcr-dark:           #161E26;   /* text-dark */
  --lcr-muted:          #6B7280;   /* text-muted */
  --lcr-border:         #E5E7EB;   /* border-border */
  --lcr-surface-subtle: #F9FAFB;   /* bg-surface-subtle */
  --lcr-white:          #FFFFFF;
  --lcr-lwc-navy:       #2F3B54;
  --lcr-star-gold:      #F5A623;

  /* Sentiment (positive/negative theme cards) */
  --lcr-sentiment-positive-bg:    #D1FAE5;
  --lcr-sentiment-positive-text:  #059669;
  --lcr-sentiment-negative-bg:    #FEF3C7;
  --lcr-sentiment-negative-text:  #B45309;

  /* Layout */
  --lcr-content-w:     1144px;     /* maxWidth.content */
  --lcr-radius-card:   12px;       /* borderRadius.card */
  --lcr-radius-btn:    8px;        /* borderRadius.btn */
  --lcr-radius-badge:  4px;        /* borderRadius.badge */
  --lcr-radius-pill:   100px;      /* borderRadius.pill */

  /* Typography */
  --lcr-font-sans:  'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --lcr-font-serif: 'Libre Baskerville', Georgia, serif;
  --lcr-tracking-clever: -0.02em;  /* letterSpacing.clever — applied to body */

  /* Scope */
  font-family: var(--lcr-font-sans);
  color: var(--lcr-dark);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--lcr-tracking-clever);
  -webkit-font-smoothing: antialiased;
}

/* Heading defaults (from reference body global rules) */
.lcr-page-v1 h1,
.lcr-page-v1 h2,
.lcr-page-v1 h3,
.lcr-page-v1 h4,
.lcr-page-v1 h5,
.lcr-page-v1 h6 {
  font-family: var(--lcr-font-sans);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.lcr-page-v1 p { margin: 0; }
.lcr-page-v1 a { color: inherit; text-decoration: none; }
.lcr-page-v1 ol, .lcr-page-v1 ul { margin: 0; padding: 0; }

/* Utility state classes (FFMLS convention) */
.lcr-page-v1 .lcr-hidden { display: none !important; }
.lcr-page-v1 .lcr-nowrap { white-space: nowrap; }

/* ── Tooltip system (scoped, reusable) ──────────────────────────────────
   Trigger = .lcr-tip-wrap (inline-flex by default, block via --block).
   Content = .lcr-tip — uses position:fixed so it ESCAPES any clipping
   ancestor (e.g. the carousel's overflow-x:auto). The wrap-relative
   coordinates that position:absolute would give us are computed by
   initTooltips() in script-view.js on hover/focus, then applied via
   inline top/left + a fixed translate(-50%, calc(-100% - 8px)) to
   center horizontally and sit 8px above the trigger.
   Used by: at-a-glance fee boxes, rating tooltips, top-5 stats (step 6). */
.lcr-page-v1 .lcr-tip-wrap {
  position: relative;
  display: inline-flex;
  cursor: help;
}
.lcr-page-v1 .lcr-tip-wrap--block {
  display: block;
  width: 100%;
}
.lcr-page-v1 .lcr-tip {
  position: fixed;
  top: 0;            /* JS sets per-show; default keeps it offscreen-ish */
  left: 0;
  transform: translate(-50%, calc(-100% - 8px));
  background: #161E26;
  color: #FFF;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 8px;
  white-space: normal;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 60;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  text-align: left;
  letter-spacing: 0;
}
.lcr-page-v1 .lcr-tip::after {
  content: '';
  position: absolute;
  /* The arrow is normally at the tip's horizontal center, but if initTooltips
     had to clamp the tip horizontally to keep it inside the viewport, it
     also writes a per-tip --lcr-tip-arrow-shift so the arrow continues to
     point at the trigger's center. */
  left: calc(50% + var(--lcr-tip-arrow-shift, 0px));
  transform: translateX(-50%);
  top: 100%;
  border: 5px solid transparent;
  border-top-color: #161E26;
}
/* Flipped variant — tip sits BELOW the trigger (used when the trigger is
   too close to the viewport top for the default above-position to fit).
   JS adds .lcr-tip--below; CSS shifts the transform downward instead of
   upward, and moves the arrow to the top edge pointing up. */
.lcr-page-v1 .lcr-tip.lcr-tip--below {
  transform: translate(-50%, 8px);
}
.lcr-page-v1 .lcr-tip.lcr-tip--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #161E26;
}
/* Visible on hover and on KEYBOARD focus only.
   Using :focus-visible (not :focus-within) means clicking the trigger
   doesn't make the tooltip stick around — once the cursor leaves, the
   tip hides. The .lcr-tip-show JS hook stays for touch tap-to-show. */
.lcr-page-v1 .lcr-tip-wrap:hover .lcr-tip,
.lcr-page-v1 .lcr-tip-wrap:focus-visible .lcr-tip,
.lcr-page-v1 .lcr-tip-wrap.lcr-tip-show .lcr-tip {
  opacity: 1;
  pointer-events: auto;
}
/* Tip content inherits — body contains <br>, <ul>, <li>. */
.lcr-page-v1 .lcr-tip ul {
  margin: 4px 0 0;
  padding-left: 18px;
  list-style: disc outside;
}
.lcr-page-v1 .lcr-tip li {
  margin-bottom: 2px;
  line-height: 1.4;
}
.lcr-page-v1 .lcr-tip strong { font-weight: 700; }

/* ── .lcr-main — content wrapper that mirrors the reference's <main>.
   Sections that need the 1144px cap live inside this. Full-width sections
   (footer-zone) sit outside .lcr-main but still inside .lcr-page-v1.
   Top padding is 0 — the hero section is the first child and provides its
   own top breathing room via gradient padding, so adding padding here just
   creates an unwanted gap between any wrapping theme/header and the hero. */
.lcr-page-v1 .lcr-main {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 16px;             /* px-4 */
  box-sizing: content-box;
}

/* Empty-state placeholder (also used by the harness for unimplemented sections) */
.lcr-page-v1--empty {
  max-width: var(--lcr-content-w);
  margin: 40px auto;
  padding: 24px;
  text-align: center;
  color: var(--lcr-muted);
}

/* Step 1 stub style: each unimplemented section partial outputs a marker box.
   These all disappear as real content lands. */
.lcr-stub {
  max-width: var(--lcr-content-w);
  margin: 12px auto;
  padding: 16px 24px;
  border: 1px dashed var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  background: var(--lcr-surface-subtle);
  font-size: 13px;
  color: var(--lcr-muted);
}
.lcr-stub strong {
  color: var(--lcr-dark);
  font-weight: 600;
}
.lcr-stub-meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--lcr-muted);
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 2 — BREADCRUMBS + HERO (left column: title, byline, TOC, intro)
   The right column (savings calculator) lands in step 3.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Breadcrumbs ──
   Reference: nav.mb-4.flex.flex-wrap.items-center.gap-1.5.text-[11px].font-semibold.text-brand-blue.uppercase.tracking-wider.leading-relaxed */
.lcr-page-v1 .lcr-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--lcr-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;        /* tracking-wider */
  line-height: 1.625;            /* leading-relaxed */
}
.lcr-page-v1 .lcr-breadcrumb-link {
  color: var(--lcr-blue);
  transition: color 0.15s ease;
}
.lcr-page-v1 .lcr-breadcrumb-link:hover {
  color: var(--lcr-blue-hover);
}
.lcr-page-v1 .lcr-breadcrumb-sep {
  color: var(--lcr-muted);
}
.lcr-page-v1 .lcr-breadcrumb-current {
  color: var(--lcr-dark);
  font-weight: 600;
}

/* ── Hero section ──
   Subtle vertical gradient (light blue → white) that visually distinguishes
   the hero zone from the breadcrumbs above and the gray storefront zone
   below. Uses the same full-bleed margin trick the gray-zone uses so the
   gradient extends edge-to-edge while inner content stays capped at
   .lcr-main width. */
.lcr-page-v1 .lcr-hero {
  background: linear-gradient(180deg, var(--lcr-blue-light) 0%, #FFFFFF 100%);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-top: 20px;       /* breadcrumbs sit at the top of the gradient now */
  padding-bottom: 16px;
}

/* ── Hero wrapper ──
   Originally a 2-column flex layout (left: title/byline/TOC/intro,
   right: savings calculator). The calculator was removed per editorial
   review (Jamie); the wrapper now just provides bottom spacing for the
   single-column hero content. */
.lcr-page-v1 .lcr-hero-wrapper {
  margin-bottom: 24px;
}

/* ── H1 title ──
   Reference: h1.text-[34px] md:text-[40px].font-bold.text-dark.tracking-clever.leading-tight.mb-3 md:mb-2
   Title now flows to fill the hero width with no forced break point —
   wraps naturally at narrower viewports. */
.lcr-page-v1 .lcr-hero-title {
  font-size: 34px;
  font-weight: 700;
  color: var(--lcr-dark);
  letter-spacing: var(--lcr-tracking-clever);
  line-height: 1.1;            /* leading-tight */
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-hero-title {
    font-size: 40px;
    margin-bottom: 8px;
  }
}

/* Title prefix — the portion of the H1 BEFORE the date span. Treating it
   as a single non-breaking unit on desktop ensures that when a long title
   doesn't fit at the 1144px content cap, the wrap happens at the date
   boundary (the date drops to a new line) instead of mid-phrase. Mobile
   keeps default wrapping so the prefix can break naturally on narrow
   viewports where forcing a single line would overflow. */
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-hero-title-prefix { white-space: nowrap; }
}

/* ── Byline (Written by · Edited by · Last updated) ── */
.lcr-page-v1 .lcr-hero-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  font-size: 12px;
  color: #6B7280;              /* text-gray-500 */
  margin-bottom: 24px;
}
.lcr-page-v1 .lcr-hero-byline-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lcr-page-v1 .lcr-hero-byline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #374151;              /* text-gray-700 */
  transition: color 0.15s ease;
}
.lcr-page-v1 .lcr-hero-byline-link:hover {
  color: var(--lcr-blue);
}
.lcr-page-v1 .lcr-hero-byline-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.lcr-page-v1 .lcr-hero-byline-sep {
  display: none;
  color: #D1D5DB;              /* text-gray-300 */
}
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-hero-byline-sep { display: inline; }
}
.lcr-page-v1 .lcr-hero-byline-strong {
  font-weight: 600;
  color: #374151;
}

/* ── Editorial / monetization disclosure ──
   Subtle gray panel that sits between the byline and the TOC. Inline info
   icon at the end of the sentence is a .lcr-tip-wrap trigger; the longer
   explanation lives in the tooltip body. */
.lcr-page-v1 .lcr-disclosure {
  background: var(--lcr-surface-subtle);
  border-radius: var(--lcr-radius-btn);
  padding: 10px 14px;
  margin-bottom: 20px;
  /* Hug the text width instead of stretching to the container — keeps the
     panel from running out into empty space past the end of the sentence.
     max-width caps it at the column width so it still wraps gracefully on
     narrow viewports. */
  width: fit-content;
  max-width: 100%;
}
.lcr-page-v1 .lcr-disclosure-text {
  font-size: 13px;
  color: #4B5563;              /* gray-700 */
  line-height: 1.5;
}
.lcr-page-v1 .lcr-disclosure-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 1px;
  color: var(--lcr-muted);
  opacity: 0.7;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.lcr-page-v1 .lcr-tip-wrap:hover .lcr-disclosure-icon,
.lcr-page-v1 .lcr-tip-wrap:focus-visible .lcr-disclosure-icon {
  color: var(--lcr-blue);
  opacity: 1;
}

/* Generic inline info-circle icon for FAQ / body-copy tooltips. Same
   visual treatment as .lcr-disclosure-icon — muted gray that brightens
   to brand blue on hover/focus of the wrapping .lcr-tip-wrap. */
.lcr-page-v1 .lcr-info-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--lcr-muted);
  opacity: 0.7;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.lcr-page-v1 .lcr-tip-wrap:hover .lcr-info-icon,
.lcr-page-v1 .lcr-tip-wrap:focus-visible .lcr-info-icon {
  color: var(--lcr-blue);
  opacity: 1;
}

/* ── Table of Contents ("On this page") ──
   Reference: div.mb-6.max-w-xl.border.border-gray-200.rounded-lg.overflow-hidden.bg-white */
.lcr-page-v1 .lcr-toc {
  margin-bottom: 24px;
  max-width: 36rem;            /* max-w-xl */
  border: 1px solid #E5E7EB;
  border-radius: var(--lcr-radius-btn);
  overflow: hidden;
  background: #FFF;
}
.lcr-page-v1 .lcr-toc-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: inherit;
  transition: background-color 0.15s ease;
}
.lcr-page-v1 .lcr-toc-btn:hover {
  background: #F9FAFB;
}
.lcr-page-v1 .lcr-toc-btn-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.lcr-page-v1 .lcr-toc-chev {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.lcr-page-v1 .lcr-toc[aria-expanded="true"] .lcr-toc-chev,
.lcr-page-v1 .lcr-toc-btn[aria-expanded="true"] .lcr-toc-chev {
  transform: rotate(180deg);
}
.lcr-page-v1 .lcr-toc-body {
  padding: 0 16px 12px;
  border-top: 1px solid #F3F4F6;
}
.lcr-page-v1 .lcr-toc-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: disc inside;
  font-size: 12px;
  color: #4B5563;              /* text-gray-600 */
}
.lcr-page-v1 .lcr-toc-list li { margin: 8px 0; }
.lcr-page-v1 .lcr-toc-list a {
  transition: color 0.15s ease;
}
.lcr-page-v1 .lcr-toc-list a:hover {
  color: var(--lcr-blue);
}

/* ── Intro copy (3 paragraphs under the TOC) ──
   Reference: p.text-[15px].text-gray-600.mb-3 (last paragraph: mb-4) */
.lcr-page-v1 .lcr-intro-p {
  font-size: 15px;
  color: #4B5563;              /* text-gray-600 */
  margin-bottom: 12px;
  line-height: 1.625;
}
.lcr-page-v1 .lcr-intro-p:last-child { margin-bottom: 16px; }
.lcr-page-v1 .lcr-intro-p strong {
  font-weight: 600;
  color: #4B5563;              /* keep gray-600 within strong; reference doesn't darken */
}
.lcr-page-v1 .lcr-intro-link {
  font-weight: 600;
  color: var(--lcr-blue);
  transition: color 0.15s ease;
}
.lcr-page-v1 .lcr-intro-link:hover {
  color: var(--lcr-blue-hover);
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 4 — GRAY "STOREFRONT" ZONE + COMPACT FAQ DRAWERS + WHAT-TO-KNOW FAQ
   ──────────────────────────────────────────────────────────────────────── */

/* ── Gray zone wrapper ──
   Reference: bg-[#F9FAFB] pt-10 flow-root + negative-margin trick that lets
   the bg escape the parent's max-width and bleed to the viewport edges.
   Inner padding restores the 1144px effective content width. body has
   overflow-x:hidden as a defensive guard against horizontal scroll. */
.lcr-page-v1 .lcr-gray-zone {
  background: var(--lcr-surface-subtle);
  display: flow-root;
  padding-top: 40px;
  padding-bottom: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/* Anchor offset for sticky-header-aware scroll-into-view (was scroll-mt-28). */
.lcr-page-v1 [id="how-to-choose"],
.lcr-page-v1 [id="about-rankings"],
.lcr-page-v1 [id="at-a-glance"],
.lcr-page-v1 [id="top-5"],
.lcr-page-v1 [id="what-to-know"],
.lcr-page-v1 [id="more-companies"],
.lcr-page-v1 [id="methodology"] {
  scroll-margin-top: 112px;
}

/* ── Compact FAQ drawers ──────────────────────────────────────────────────
   Two drawers in a single rounded container. Each drawer is a borderless
   button row + a max-height-animated body. Second drawer has border-top
   for visual separation. */
.lcr-page-v1 .lcr-drawers {
  margin-bottom: 24px;     /* matches .lcr-personalize so drawers→personalize and personalize→first card share the same vertical rhythm */
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-card);
  overflow: hidden;
  background: var(--lcr-white);
}
.lcr-page-v1 .lcr-drawer + .lcr-drawer {
  border-top: 1px solid var(--lcr-border);
}
.lcr-page-v1 .lcr-drawer-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-family: inherit;
  letter-spacing: inherit;
}
.lcr-page-v1 .lcr-drawer-btn:hover { background: #F9FAFB; }
.lcr-page-v1 .lcr-drawer-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lcr-dark);
}
.lcr-page-v1 .lcr-drawer-btn-icon {
  display: inline-flex;
  align-items: center;
  color: var(--lcr-blue);
}
.lcr-page-v1 .lcr-drawer-chev {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--lcr-muted);
  transition: transform 0.3s ease;
}
.lcr-page-v1 .lcr-drawer-btn[aria-expanded="true"] .lcr-drawer-chev {
  transform: rotate(180deg);
}
.lcr-page-v1 .lcr-drawer-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.lcr-page-v1 .lcr-drawer-body.lcr-open {
  max-height: 2000px;
}
.lcr-page-v1 .lcr-drawer-body-inner {
  padding: 4px 20px 20px;
  border-top: 1px solid var(--lcr-border);
}

/* Drawer 1 (How to choose) — numbered step list */
.lcr-page-v1 .lcr-drawer-steps {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lcr-page-v1 .lcr-drawer-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.lcr-page-v1 .lcr-drawer-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lcr-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--lcr-blue);
}
.lcr-page-v1 .lcr-drawer-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--lcr-dark);
  margin-bottom: 4px;
}
.lcr-page-v1 .lcr-drawer-step-body {
  font-size: 13px;
  color: var(--lcr-muted);
  line-height: 1.625;
}
.lcr-page-v1 .lcr-drawer-step-body a {
  color: var(--lcr-blue);
}
.lcr-page-v1 .lcr-drawer-step-body a:hover {
  color: var(--lcr-blue-hover);
}

/* Drawer 2 (About our rankings) — intro p + 4-card grid + closing stat p */
.lcr-page-v1 .lcr-rankings-intro {
  margin-top: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--lcr-muted);
  line-height: 1.625;
}
.lcr-page-v1 .lcr-rankings-intro a {
  color: var(--lcr-blue);
}
.lcr-page-v1 .lcr-rankings-intro a:hover { color: var(--lcr-blue-hover); }
.lcr-page-v1 .lcr-rankings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lcr-page-v1 .lcr-rankings-card {
  background: var(--lcr-blue-light);
  border-radius: var(--lcr-radius-btn);
  padding: 16px;
  border: 1px solid #BFDBFE;
}
.lcr-page-v1 .lcr-rankings-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.lcr-page-v1 .lcr-rankings-card-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--lcr-blue);
}
.lcr-page-v1 .lcr-rankings-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--lcr-dark);
}
.lcr-page-v1 .lcr-rankings-card-body {
  font-size: 12px;
  color: var(--lcr-muted);
  line-height: 1.625;
}
.lcr-page-v1 .lcr-rankings-stat {
  margin-top: 16px;
  font-size: 12px;
  color: var(--lcr-muted);
}
.lcr-page-v1 .lcr-rankings-stat strong {
  color: var(--lcr-dark);
  font-weight: 600;
}

/* ── What-to-know FAQ accordion ───────────────────────────────────────────
   Reference: max-w-2xl (672px), border-t, items separated by border-b.
   Each item: button (always visible) + .lcr-faq-ans (max-height animated). */
.lcr-page-v1 .lcr-faq {
  margin-bottom: 40px;
}
.lcr-page-v1 .lcr-faq-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--lcr-blue);
  margin-bottom: 24px;
  line-height: 1.1;
  letter-spacing: var(--lcr-tracking-clever);
}
.lcr-page-v1 .lcr-faq-list {
  max-width: 42rem;          /* max-w-2xl */
  border-top: 1px solid var(--lcr-border);
}
.lcr-page-v1 .lcr-faq-item {
  border-bottom: 1px solid var(--lcr-border);
}
.lcr-page-v1 .lcr-faq-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: inherit;
}
.lcr-page-v1 .lcr-faq-btn-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--lcr-dark);
  padding-right: 16px;
}
.lcr-page-v1 .lcr-faq-chev {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
  color: var(--lcr-muted);
}
.lcr-page-v1 .lcr-faq-btn[aria-expanded="true"] .lcr-faq-chev {
  transform: rotate(180deg);
}
.lcr-page-v1 .lcr-faq-ans {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.lcr-page-v1 .lcr-faq-ans.lcr-open {
  max-height: 4000px;       /* generous; FAQ 6 has the longest body */
}
.lcr-page-v1 .lcr-faq-ans p {
  font-size: 14px;
  color: #4B5563;          /* gray-600 */
  margin-bottom: 12px;
  line-height: 1.625;
}
.lcr-page-v1 .lcr-faq-ans p:last-child { padding-bottom: 16px; }
.lcr-page-v1 .lcr-faq-ans p strong {
  font-weight: 600;
  color: #4B5563;
}
.lcr-page-v1 .lcr-faq-ans ul,
.lcr-page-v1 .lcr-faq-ans ol {
  font-size: 14px;
  color: #4B5563;
  padding-left: 20px;
  margin-bottom: 12px;
}
.lcr-page-v1 .lcr-faq-ans ul { list-style: disc outside; }
.lcr-page-v1 .lcr-faq-ans ol { list-style: decimal outside; }
.lcr-page-v1 .lcr-faq-ans ul li,
.lcr-page-v1 .lcr-faq-ans ol li { margin-bottom: 8px; line-height: 1.5; }
.lcr-page-v1 .lcr-faq-ans a {
  color: var(--lcr-blue);
  transition: color 0.15s ease;
}
.lcr-page-v1 .lcr-faq-ans a:hover { color: var(--lcr-blue-hover); }
.lcr-page-v1 .lcr-faq-pros-label,
.lcr-page-v1 .lcr-faq-cons-label,
.lcr-page-v1 .lcr-faq-section-label {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}

/* "Good news" callout box at bottom of FAQ 6 */
.lcr-page-v1 .lcr-good-news-box {
  background: var(--lcr-blue-light);
  border: 1px solid #BFDBFE;
  border-radius: var(--lcr-radius-btn);
  padding: 16px;
  margin: 16px 0;
  font-size: 14px;
  color: var(--lcr-dark);
}
.lcr-page-v1 .lcr-good-news-box strong { font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════
   STEP 5 — AT-A-GLANCE CAROUSEL + PERSONALIZE INPUT + STAR UTILITIES
   ──────────────────────────────────────────────────────────────────────── */

/* ── Star rating utilities (used by glance cards now, top-5 cards in step 6) ──
   Two-color text-clip technique: gold gradient over the chosen %, gray for
   the rest. Buckets are 10/20/.../90 to keep CSS bounded. */
.lcr-page-v1 .lcr-stars { white-space: nowrap; font-size: 14px; }
.lcr-page-v1 .lcr-star-gold  { color: var(--lcr-star-gold); }
.lcr-page-v1 .lcr-star-empty { color: var(--lcr-border); }
.lcr-page-v1 .lcr-star-partial-10,
.lcr-page-v1 .lcr-star-partial-20,
.lcr-page-v1 .lcr-star-partial-30,
.lcr-page-v1 .lcr-star-partial-40,
.lcr-page-v1 .lcr-star-partial-50,
.lcr-page-v1 .lcr-star-partial-60,
.lcr-page-v1 .lcr-star-partial-70,
.lcr-page-v1 .lcr-star-partial-80,
.lcr-page-v1 .lcr-star-partial-90 {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lcr-page-v1 .lcr-star-partial-10 { background-image: linear-gradient(90deg, #F5A623 10%, #E5E7EB 10%); }
.lcr-page-v1 .lcr-star-partial-20 { background-image: linear-gradient(90deg, #F5A623 20%, #E5E7EB 20%); }
.lcr-page-v1 .lcr-star-partial-30 { background-image: linear-gradient(90deg, #F5A623 30%, #E5E7EB 30%); }
.lcr-page-v1 .lcr-star-partial-40 { background-image: linear-gradient(90deg, #F5A623 40%, #E5E7EB 40%); }
.lcr-page-v1 .lcr-star-partial-50 { background-image: linear-gradient(90deg, #F5A623 50%, #E5E7EB 50%); }
.lcr-page-v1 .lcr-star-partial-60 { background-image: linear-gradient(90deg, #F5A623 60%, #E5E7EB 60%); }
.lcr-page-v1 .lcr-star-partial-70 { background-image: linear-gradient(90deg, #F5A623 70%, #E5E7EB 70%); }
.lcr-page-v1 .lcr-star-partial-80 { background-image: linear-gradient(90deg, #F5A623 80%, #E5E7EB 80%); }
.lcr-page-v1 .lcr-star-partial-90 { background-image: linear-gradient(90deg, #F5A623 90%, #E5E7EB 90%); }

/* State-only: pill row under the at-a-glance heading — quick-jump links to
   each top city's LCR page, with a trailing "More cities" pill that jumps
   to the nearby-cities section. Visually matches the in-state nearby-cities
   pill grid but slightly tighter (smaller padding + font) since this row
   is a supporting nav, not primary content. */
.lcr-page-v1 .lcr-glance-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
}
.lcr-page-v1 .lcr-glance-pills-label {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--lcr-dark);
  margin-right: 4px;
}
.lcr-page-v1 .lcr-glance-pill {
  display: inline-block;
  background: var(--lcr-white);
  border: 1px solid #BFDBFE;
  color: var(--lcr-blue);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lcr-page-v1 .lcr-glance-pill:hover {
  background: var(--lcr-blue);
  color: var(--lcr-white);
  border-color: var(--lcr-blue);
}

/* ── At-a-glance carousel ─────────────────────────────────────────────── */
.lcr-page-v1 .lcr-glance {
  position: relative;
  margin-bottom: 24px;
}
@media (min-width: 1024px) {
  /* Desktop section spacing — small bump (~8px) between major H2 sections
     in the gray storefront zone to give each "chapter" a touch more
     breathing room. Mobile spacing stays tight; desktop has the room. */
  .lcr-page-v1 .lcr-glance         { margin-bottom: 40px; }
  .lcr-page-v1 .lcr-top-5          { margin-bottom: 48px; }
  .lcr-page-v1 .lcr-faq            { margin-bottom: 48px; }
  .lcr-page-v1 .lcr-more-companies { margin-bottom: 48px; }
}

.lcr-page-v1 .lcr-glance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.lcr-page-v1 .lcr-glance-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--lcr-blue);
  line-height: 1.1;
  letter-spacing: var(--lcr-tracking-clever);
}
.lcr-page-v1 .lcr-glance-arrows-desktop {
  display: none;
  align-items: center;
  gap: 8px;
}
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-glance-arrows-desktop { display: flex; }
}
.lcr-page-v1 .lcr-glance-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--lcr-border);
  background: var(--lcr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--lcr-dark);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.lcr-page-v1 .lcr-glance-arrow:hover { background: #F9FAFB; }
.lcr-page-v1 .lcr-glance-arrow.lcr-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.lcr-page-v1 .lcr-glance-carousel-wrap {
  position: relative;
}
.lcr-page-v1 .lcr-glance-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;        /* keep card shadows / borders from clipping */
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-glance-carousel { gap: 16px; }
}
.lcr-page-v1 .lcr-glance-carousel::-webkit-scrollbar { display: none; }
.lcr-page-v1 .lcr-glance-carousel { scrollbar-width: none; }

/* Soft fade on horizontal overflow edges. Widths flip via JS-toggled
   classes below — default 0 keeps the mask invisible when the carousel
   doesn't actually overflow. The trailing-edge fade signals "more this
   way"; the mirrored leading-edge fade reads as intentional once the
   user scrolls right rather than a hard clip. */
/* Edge fade — implemented via overlay pseudo-elements on the carousel
   WRAPPER (instead of mask-image on the carousel itself). mask-image
   clips ALL descendants at the masked element's bounds — including
   position:fixed tooltips — which made tooltips on the first + last
   cards get cropped. The overlay approach has no such clipping side
   effect: it just paints a gradient from the gray-zone bg color to
   transparent, sitting above the carousel cards but below tooltips. */
.lcr-page-v1 .lcr-glance-carousel-wrap {
  position: relative;
}
.lcr-page-v1 .lcr-glance-carousel-wrap::before,
.lcr-page-v1 .lcr-glance-carousel-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lcr-page-v1 .lcr-glance-carousel-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--lcr-surface-subtle), transparent);
}
.lcr-page-v1 .lcr-glance-carousel-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--lcr-surface-subtle), transparent);
}
/* Sync the fades with the same scroll-state classes the JS sets on the
   inner carousel — :has() lets the wrapper read its child's class. */
.lcr-page-v1 .lcr-glance-carousel-wrap:has(.lcr-can-scroll-left)::before  { opacity: 1; }
.lcr-page-v1 .lcr-glance-carousel-wrap:has(.lcr-can-scroll-right)::after { opacity: 1; }

/* Carousel cards */
.lcr-page-v1 .lcr-glance-card {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 280px;
  background: var(--lcr-white);
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-glance-card { width: 260px; }
}
.lcr-page-v1 .lcr-glance-card--best {
  border-width: 2px;
  border-color: var(--lcr-blue);
}

.lcr-page-v1 .lcr-glance-ribbon {
  background: var(--lcr-blue-light);
  padding: 6px 16px;
}
.lcr-page-v1 .lcr-glance-ribbon-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  vertical-align: middle;
  color: var(--lcr-blue);  /* default: matches the blue ribbon-label color */
}
.lcr-page-v1 .lcr-glance-ribbon--best .lcr-glance-ribbon-icon {
  color: var(--lcr-white); /* Best Overall tile — white icon on solid blue */
}
.lcr-page-v1 .lcr-glance-ribbon-icon svg {
  display: block;
}
.lcr-page-v1 .lcr-glance-ribbon-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--lcr-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.lcr-page-v1 .lcr-glance-ribbon--best { background: var(--lcr-blue); }
.lcr-page-v1 .lcr-glance-ribbon--best .lcr-glance-ribbon-label { color: var(--lcr-white); }

.lcr-page-v1 .lcr-glance-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.lcr-page-v1 .lcr-glance-card-logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  margin-bottom: 12px;
  margin-right: auto;
}
.lcr-page-v1 .lcr-glance-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--lcr-dark);
  margin-bottom: 2px;
}
.lcr-page-v1 .lcr-glance-card-loc {
  display: block;
  font-size: 12px;
  color: var(--lcr-muted);
  margin-bottom: 12px;
}
.lcr-page-v1 .lcr-glance-card-rating-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;       /* fills the gap left by removing reviews count */
}
.lcr-page-v1 .lcr-glance-card-rating {
  font-size: 16px;
  font-weight: 700;
  color: var(--lcr-dark);
}
.lcr-page-v1 .lcr-glance-card-fee {
  background: var(--lcr-surface-subtle);
  border-radius: var(--lcr-radius-btn);
  padding: 8px 12px;
  margin-bottom: 16px;
}
.lcr-page-v1 .lcr-glance-card-fee-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--lcr-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.lcr-page-v1 .lcr-glance-card-fee-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--lcr-blue);
}
.lcr-page-v1 .lcr-glance-card-ctas {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lcr-page-v1 .lcr-glance-card-cta {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
  border-radius: var(--lcr-radius-btn);
  color: var(--lcr-white);
  transition: background-color 0.15s ease;
}
.lcr-page-v1 .lcr-glance-card-cta--green { background: var(--lcr-green); }
.lcr-page-v1 .lcr-glance-card-cta--green:hover { background: var(--lcr-green-hover); }
.lcr-page-v1 .lcr-glance-card-cta--blue  { background: var(--lcr-blue); }
.lcr-page-v1 .lcr-glance-card-cta--blue:hover { background: var(--lcr-blue-hover); }
.lcr-page-v1 .lcr-glance-card-secondary {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--lcr-muted);
  transition: color 0.15s ease;
}
.lcr-page-v1 .lcr-glance-card-secondary:hover { color: var(--lcr-blue); }
.lcr-page-v1 .lcr-glance-card-secondary-spacer {
  display: block;
  text-align: center;
  font-size: 12px;
  visibility: hidden;
}

/* ── Our take callout (sits below the carousel) ──────────────────────── */
.lcr-page-v1 .lcr-our-take {
  background: var(--lcr-blue-light);
  border: 1px solid #BFDBFE;
  border-radius: var(--lcr-radius-card);
  padding: 20px;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-our-take { margin-top: 16px; }
}
.lcr-page-v1 .lcr-our-take p {
  font-size: 15px;
  color: var(--lcr-dark);
  line-height: 1.625;
  margin-bottom: 12px;
}
.lcr-page-v1 .lcr-our-take p:last-child { margin-bottom: 0; }
.lcr-page-v1 .lcr-our-take p strong { font-weight: 600; }

/* ── Personalize input form ───────────────────────────────────────────── */
.lcr-page-v1 .lcr-personalize {
  background: var(--lcr-white);
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-card);
  padding: 20px;
  margin-bottom: 24px;
  transition: border-color 0.15s ease;
}
.lcr-page-v1 .lcr-personalize:hover { border-color: var(--lcr-blue); }
.lcr-page-v1 .lcr-personalize-row {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-personalize-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
  }
}
.lcr-page-v1 .lcr-personalize-icon-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-personalize-icon-wrap { margin-bottom: 0; }
}
.lcr-page-v1 .lcr-personalize-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lcr-surface-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lcr-blue);
}
.lcr-page-v1 .lcr-personalize-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--lcr-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lcr-page-v1 .lcr-personalize-label--mobile { display: block; }
.lcr-page-v1 .lcr-personalize-label--desktop { display: none; }
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-personalize-label--mobile { display: none; }
  .lcr-page-v1 .lcr-personalize-label--desktop { display: block; margin-bottom: 4px; }
}
.lcr-page-v1 .lcr-personalize-field {
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-personalize-field { margin-bottom: 0; }
}
.lcr-page-v1 .lcr-personalize-input-wrap {
  position: relative;
}
.lcr-page-v1 .lcr-personalize-input-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--lcr-muted);
  font-weight: 500;
}
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-personalize-input-prefix { font-size: 14px; }
}
.lcr-page-v1 .lcr-personalize-input {
  width: 100%;
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  padding: 12px 12px 12px 28px;
  font-size: 16px;
  font-weight: 500;
  color: var(--lcr-dark);
  background: var(--lcr-white);
  font-family: inherit;
  letter-spacing: inherit;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.lcr-page-v1 .lcr-personalize-input:focus {
  outline: none;
  border-color: var(--lcr-blue);
}
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-personalize-input { width: 200px; padding: 8px 12px 8px 28px; font-size: 14px; }
  /* Match the input + button height exactly so they sit flush in the row.
     Without this, the input's 1px border makes it ~2px taller than the
     border-less button. */
  .lcr-page-v1 .lcr-personalize-input,
  .lcr-page-v1 .lcr-personalize-submit {
    height: 38px;
    box-sizing: border-box;
  }
}
.lcr-page-v1 .lcr-personalize-submit {
  width: 100%;
  background: var(--lcr-green);
  color: var(--lcr-white);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--lcr-radius-btn);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: inherit;
  transition: background-color 0.15s ease;
}
.lcr-page-v1 .lcr-personalize-submit:hover { background: var(--lcr-green-hover); }
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-personalize-submit { width: auto; font-size: 14px; padding: 8px 16px; }
}
.lcr-page-v1 .lcr-personalize-error {
  margin-top: 12px;
  font-size: 12px;
  color: #DC2626;
}
.lcr-page-v1 .lcr-personalize-success {
  margin-top: 12px;
  font-size: 12px;
  color: var(--lcr-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 6a — TOP-5 SECTION + CARD SHELL + TABS
   Tab body content lands in steps 6b–6d.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Top-5 section ─────────────────────────────────────────────────────── */
.lcr-page-v1 .lcr-top-5 {
  margin-bottom: 40px;
}
.lcr-page-v1 .lcr-top-5-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--lcr-blue);
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: var(--lcr-tracking-clever);
}

/* ── Card shell ─────────────────────────────────────────────────────────── */
.lcr-page-v1 .lcr-card {
  background: var(--lcr-white);
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-card);
  margin-bottom: 24px;
  overflow: hidden;     /* clips ribbon corners to card radius */
  scroll-margin-top: 112px;
}

/* Ribbon — light-blue default; solid blue + white text for "best_overall" */
.lcr-page-v1 .lcr-card-ribbon {
  background: var(--lcr-blue-light);
  padding: 8px 20px;
}
@media (min-width: 768px) { .lcr-page-v1 .lcr-card-ribbon { padding: 8px 24px; } }
.lcr-page-v1 .lcr-card-ribbon--best { background: var(--lcr-blue); }
.lcr-page-v1 .lcr-card-ribbon-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  vertical-align: middle;
  color: var(--lcr-blue);  /* default: matches the blue ribbon-label color */
}
.lcr-page-v1 .lcr-card-ribbon--best .lcr-card-ribbon-icon {
  color: var(--lcr-white); /* Best Overall ribbon — white icon on solid blue */
}
.lcr-page-v1 .lcr-card-ribbon-icon svg {
  display: block;          /* avoid descender-based misalignment */
}
.lcr-page-v1 .lcr-card-ribbon-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--lcr-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.lcr-page-v1 .lcr-card-ribbon--best .lcr-card-ribbon-label { color: var(--lcr-white); }

/* Card body padding wrapper */
.lcr-page-v1 .lcr-card-body { padding: 20px; }
@media (min-width: 1024px) { .lcr-page-v1 .lcr-card-body { padding: 20px 24px; } }

/* ── Header section (logo + content with stats/CTA flowing inside) ──────
   At ≥1024px the header is a 2-col single-row grid: 220px logo on the
   left, content on the right. Stats+CTA live INSIDE the content column,
   flowing directly under product type — so they visually align with the
   rating row in the logo column instead of being pushed to a separate
   row. The header has a single bottom border separating it from the
   tabs. At <1024px everything stacks. */
.lcr-page-v1 .lcr-card-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-header {
    display: grid;
    grid-template-columns: 220px 1fr;
    column-gap: 24px;
    align-items: start;       /* top-align both columns to their content */
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--lcr-border);
  }
}

/* Logo column — centered logo at mobile; left-aligned with right border
   at desktop. */
.lcr-page-v1 .lcr-card-logo-col {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-logo-col {
    display: block;
    margin-bottom: 0;
    padding-right: 24px;
    border-right: 1px solid var(--lcr-border);
    align-self: stretch;      /* fill row height so the right border runs full-card */
  }
}
.lcr-page-v1 .lcr-card-logo {
  height: 80px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-logo {
    height: 72px;
    max-width: 190px;
    margin-bottom: 8px;
    display: block;
  }
}

/* Content column — at desktop becomes a stretching flex-col so the
   stats+CTA can push to the bottom (margin-top: auto), aligning with the
   rating row in the logo column instead of bunching near the top. */
.lcr-page-v1 .lcr-card-content-col { min-width: 0; }
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-content-col {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
}
.lcr-page-v1 .lcr-card-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--lcr-dark);
  line-height: 1.2;
  margin-bottom: 4px;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-name { font-size: 20px; margin-bottom: 4px; }
}
.lcr-page-v1 .lcr-card-product-type {
  font-size: 14px;
  color: var(--lcr-muted);          /* gray-500, not link-blue — Jamie: stop mimicking an anchor */
  margin-bottom: 12px;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-product-type { margin-bottom: 8px; }
}
/* Dotted-underline affordance — applied only when a tooltip body actually
   exists to discover. The first child <span> inside .lcr-tip-wrap is the
   visible text; the conditional second child .lcr-tip carries the body. */
.lcr-page-v1 .lcr-card-product-type .lcr-tip-wrap:has(> .lcr-tip) > span:first-child {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: #9CA3AF;   /* gray-400 — softer than the text */
}
.lcr-page-v1 .lcr-card-product-type .lcr-tip-wrap:hover > span:first-child,
.lcr-page-v1 .lcr-card-product-type .lcr-tip-wrap:focus-visible > span:first-child {
  color: var(--lcr-dark);           /* slight darken on hover signals interactivity */
}

/* Rating + location block — rendered twice; one variant visible per breakpoint */
.lcr-page-v1 .lcr-card-rating-loc--desktop { display: none; }
.lcr-page-v1 .lcr-card-rating-loc--mobile  { display: block; }
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-rating-loc--desktop { display: block; }
  .lcr-page-v1 .lcr-card-rating-loc--mobile  { display: none; }
}
.lcr-page-v1 .lcr-card-rating-wrap {
  display: inline-flex;
  margin-bottom: 8px;
}
.lcr-page-v1 .lcr-card-rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 4px;
}
.lcr-page-v1 .lcr-card-rating-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--lcr-dark);
  line-height: 1;
}
.lcr-page-v1 .lcr-card-top-rated {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--lcr-radius-badge);
  margin-left: 4px;
  background: #D1FAE5;       /* sentiment-positive bg */
  color: #059669;            /* sentiment-positive text */
}
.lcr-page-v1 .lcr-card-location {
  font-size: 12px;
  color: var(--lcr-muted);
  margin-bottom: 16px;
}
.lcr-page-v1 .lcr-card-location-icon {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 4px;
}
@media (min-width: 1024px) {
  /* Last element in the desktop logo column — no trailing space needed.
     Mobile keeps the 16px since the rating-loc block sits between content
     and stats inside .lcr-card-content-col. */
  .lcr-page-v1 .lcr-card-rating-loc--desktop .lcr-card-location { margin-bottom: 0; }
}

/* ── Stats + CTA — lives inside .lcr-card-content-col. At desktop,
   margin-top:auto pushes it to the bottom of the stretched content-col
   so its top edge aligns with the rating row on the left (the rating
   sits roughly at the same y once logo + 12px gap pushes it down).
   At mobile the flex-col runs naturally; the CTA already lives below
   the stats box via the wrapper's flex-col. */
.lcr-page-v1 .lcr-card-stats-cta {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-stats-cta {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: auto;        /* push toward the bottom of .lcr-card-content-col */
    margin-bottom: 4px;      /* small nudge — keeps the stat values' baseline at
                                roughly the rating-number height on the left */
  }
}

/* Stats wrapper — bordered+rounded box at mobile (3 stacked rows with internal
   dividers); flat horizontal row at desktop (3 cells side-by-side, no border). */
.lcr-page-v1 .lcr-card-stats {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  overflow: hidden;
  margin-bottom: 16px;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-stats {
    flex: 1 1 0;
    flex-direction: row;
    gap: 12px;
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 0;
  }
}
.lcr-page-v1 .lcr-card-stat {
  flex: 1 1 0;
  display: flex;       /* lcr-tip-wrap is inline-flex by default; force flex for layout */
}
.lcr-page-v1 .lcr-card-stat-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  width: 100%;
  border-top: 1px solid var(--lcr-border);
}
.lcr-page-v1 .lcr-card-stats > .lcr-card-stat:first-child .lcr-card-stat-inner { border-top: 0; }
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-stat-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    border-top: 0;
  }
}
.lcr-page-v1 .lcr-card-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--lcr-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) { .lcr-page-v1 .lcr-card-stat-label { margin-bottom: 4px; } }
.lcr-page-v1 .lcr-card-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--lcr-dark);
}
@media (min-width: 1024px) { .lcr-page-v1 .lcr-card-stat-value { font-size: 20px; } }
.lcr-page-v1 .lcr-card-stat-value--savings { color: #059669; }   /* green for positive savings */

/* CTA — full width below stats at mobile; fixed 180px to the right at desktop */
.lcr-page-v1 .lcr-card-cta {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
  border-radius: var(--lcr-radius-btn);
  color: var(--lcr-white);
  transition: background-color 0.15s ease;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-cta { width: 180px; flex-shrink: 0; font-size: 14px; padding: 10px; }
}
.lcr-page-v1 .lcr-card-cta--green { background: var(--lcr-green); }
.lcr-page-v1 .lcr-card-cta--green:hover { background: var(--lcr-green-hover); }
.lcr-page-v1 .lcr-card-cta--blue  { background: var(--lcr-blue); }
.lcr-page-v1 .lcr-card-cta--blue:hover  { background: var(--lcr-blue-hover); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
/* Border between header/stats and tabs. At desktop, the header section already
   has its own bottom border, so we suppress the redundant top border here. */
.lcr-page-v1 .lcr-card-tabs-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--lcr-border);
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-tabs-section {
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
  }
}

/* Tab bar — pill buttons, scrolls horizontally on mobile if they overflow */
.lcr-page-v1 .lcr-card-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.lcr-page-v1 .lcr-card-tabs::-webkit-scrollbar { display: none; }
.lcr-page-v1 .lcr-card-tabs { scrollbar-width: none; }
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-tabs { overflow-x: visible; padding-bottom: 0; }
}
.lcr-page-v1 .lcr-card-tab {
  background: var(--lcr-surface-subtle);
  color: var(--lcr-muted);
  font-family: inherit;
  letter-spacing: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--lcr-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
@media (min-width: 1024px) { .lcr-page-v1 .lcr-card-tab { padding: 6px 16px; } }
.lcr-page-v1 .lcr-card-tab:hover {
  background: #E8F2FE;       /* blue-light */
  color: var(--lcr-blue);
}
.lcr-page-v1 .lcr-card-tab--active,
.lcr-page-v1 .lcr-card-tab[aria-selected="true"] {
  background: var(--lcr-blue);
  color: var(--lcr-white);
  font-weight: 600;
}
.lcr-page-v1 .lcr-card-tab--active:hover,
.lcr-page-v1 .lcr-card-tab[aria-selected="true"]:hover {
  background: var(--lcr-blue);
  color: var(--lcr-white);
}

/* Tab panels — base typography */
.lcr-page-v1 .lcr-card-panel {
  font-size: 14px;
  color: var(--lcr-dark);
  line-height: 1.625;
}

/* ── Step 6b — Summary tab body ───────────────────────────────────────── */
.lcr-page-v1 .lcr-card-summary {
  font-size: 14px;
  color: var(--lcr-dark);
  line-height: 1.625;
}
.lcr-page-v1 .lcr-card-summary strong { font-weight: 600; }
.lcr-page-v1 .lcr-card-summary a {
  color: var(--lcr-blue);
  transition: color 0.15s ease;
}
.lcr-page-v1 .lcr-card-summary a:hover { color: var(--lcr-blue-hover); }
.lcr-page-v1 .lcr-card-summary--empty {
  color: var(--lcr-muted);
  font-style: italic;
}

/* ── Step 6b — Company Info tab body ──────────────────────────────────── */
.lcr-page-v1 .lcr-card-info {
  font-size: 14px;
  color: var(--lcr-dark);
  line-height: 1.625;
}
.lcr-page-v1 .lcr-card-info-row {
  margin-bottom: 8px;
}
.lcr-page-v1 .lcr-card-info-row:last-child { margin-bottom: 0; }
.lcr-page-v1 .lcr-card-info-row strong {
  font-weight: 600;
  color: var(--lcr-dark);
  margin-right: 4px;
}
.lcr-page-v1 .lcr-card-info-link {
  color: var(--lcr-blue);
  transition: color 0.15s ease;
  word-break: break-word;       /* long URLs wrap cleanly on narrow widths */
}
.lcr-page-v1 .lcr-card-info-link:hover { color: var(--lcr-blue-hover); }
.lcr-page-v1 .lcr-card-info-claim {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
}
.lcr-page-v1 .lcr-card-info-claim-icon {
  display: inline-flex;
  color: var(--lcr-muted);
  flex-shrink: 0;
}
.lcr-page-v1 .lcr-card-info-claim-question {
  color: #374151;          /* gray-700 — readable but secondary */
}
.lcr-page-v1 .lcr-card-info-claim-link {
  color: var(--lcr-blue);
  opacity: 0.75;           /* softer than standard link blue per Jamie */
  transition: opacity 0.15s ease;
}
.lcr-page-v1 .lcr-card-info-claim-link:hover { opacity: 1; }

/* ── Step 6c — Pros & Cons tab body ───────────────────────────────────── */
.lcr-page-v1 .lcr-card-proscons {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-proscons {
    flex-direction: row;
    gap: 24px;
  }
  .lcr-page-v1 .lcr-card-proscons-pros,
  .lcr-page-v1 .lcr-card-proscons-cons { flex: 1 1 0; }
}
.lcr-page-v1 .lcr-card-proscons-pros { margin-bottom: 20px; }
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-card-proscons-pros { margin-bottom: 0; }
}
.lcr-page-v1 .lcr-card-proscons-heading {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.lcr-page-v1 .lcr-card-proscons-heading--pros { color: var(--lcr-green); }
.lcr-page-v1 .lcr-card-proscons-heading--cons { color: #DC2626; }   /* red-600 */
.lcr-page-v1 .lcr-card-proscons-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lcr-page-v1 .lcr-card-proscons-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.lcr-page-v1 .lcr-card-proscons-item:last-child { margin-bottom: 0; }
.lcr-page-v1 .lcr-card-proscons-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.lcr-page-v1 .lcr-card-proscons-pros .lcr-card-proscons-item span {
  color: var(--lcr-dark);
}
.lcr-page-v1 .lcr-card-proscons-cons .lcr-card-proscons-item span {
  color: var(--lcr-muted);
}

/* ── Step 6d — Reviews tab body ───────────────────────────────────────── */

/* AI summary block — light-blue panel with sparkle icon + label + body */
.lcr-page-v1 .lcr-card-ai-summary {
  background: var(--lcr-blue-light);
  border: 1px solid #BFDBFE;
  border-radius: var(--lcr-radius-btn);
  padding: 16px;
  margin-bottom: 16px;
}
.lcr-page-v1 .lcr-card-ai-summary-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.lcr-page-v1 .lcr-card-ai-summary-sparkle {
  color: var(--lcr-blue);
  flex-shrink: 0;
}
.lcr-page-v1 .lcr-card-ai-summary-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--lcr-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lcr-page-v1 .lcr-card-ai-summary-body {
  font-size: 14px;
  color: var(--lcr-dark);
  line-height: 1.625;
}
.lcr-page-v1 .lcr-card-ai-summary-body strong { font-weight: 600; }
/* v2 confidence line — single-sentence sample-size qualifier rendered
   below the main blurb. De-emphasized so the narrative reads first;
   suppressed entirely for the Thin archetype (N is named in the blurb). */
.lcr-page-v1 .lcr-card-ai-summary-confidence {
  margin-top: 8px;
  font-size: 12px;
  color: var(--lcr-muted);
  font-style: italic;
}

/* Sentiment theme grid — 1-col mobile, 2-col tablet/desktop */
.lcr-page-v1 .lcr-card-sentiment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
@media (min-width: 640px) {
  .lcr-page-v1 .lcr-card-sentiment-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.lcr-page-v1 .lcr-card-theme {
  /* Match the prototype's flat tile look — no card border / background /
     padding. Each tile is just (icon+name | pct) above a thin progress
     bar. The grid gap provides separation between tiles. flex-col +
     bar-bottom keeps bars aligned across the row when names wrap. */
  display: flex;
  flex-direction: column;
}
.lcr-page-v1 .lcr-card-theme-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.lcr-page-v1 .lcr-card-theme-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.lcr-page-v1 .lcr-card-theme-bar {
  margin-top: auto;       /* pins the bar to the bottom of the card */
}
.lcr-page-v1 .lcr-card-theme-name {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lcr-dark);
  line-height: 1.35;
  min-width: 0;
}
.lcr-page-v1 .lcr-card-theme-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.lcr-page-v1 .lcr-card-theme-icon--pos { color: var(--lcr-blue); }
.lcr-page-v1 .lcr-card-theme-icon--neg { color: #D97706; }   /* amber-600 */
.lcr-page-v1 .lcr-card-theme-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--lcr-dark);
  flex-shrink: 0;
  margin-top: 1px;
}
/* Raw mention count — sits parenthetical after the %, lighter weight + muted
   color so the count reads as anchoring context rather than competing with
   the primary % signal that drives the progress bar below. */
.lcr-page-v1 .lcr-card-theme-count {
  font-weight: 500;
  color: var(--lcr-muted);
  margin-left: 2px;
}
.lcr-page-v1 .lcr-card-theme-bar {
  display: block;
  width: 100%;
  height: 8px;
  background: #F3F4F6;       /* gray-100 */
  border-radius: 9999px;
  overflow: hidden;
}
.lcr-page-v1 .lcr-card-theme-bar-fill {
  display: block;
  height: 100%;
  border-radius: 9999px;
}
.lcr-page-v1 .lcr-card-theme-bar-fill.lcr-card-theme-bar--pos { background: var(--lcr-blue); }
.lcr-page-v1 .lcr-card-theme-bar-fill.lcr-card-theme-bar--neg { background: #F59E0B; }   /* amber-500 */

/* Insufficient-reviews fallback */
.lcr-page-v1 .lcr-card-sentiment-empty {
  background: #F9FAFB;
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}
.lcr-page-v1 .lcr-card-sentiment-empty p {
  font-size: 14px;
  color: var(--lcr-muted);
  font-style: italic;
}

/* Review-platforms summary — replaces the prior full-platform table per
   Jamie's CLO v1 pattern. Two stat pills (overall rating + total reviews) +
   inline sources line. Sentiment grid above is the meatier content in this
   tab; the by-platform table competed with it for visual weight. */
.lcr-page-v1 .lcr-card-reviews-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.lcr-page-v1 .lcr-card-reviews-stat {
  display: inline-flex;
  flex-direction: column;
  background: var(--lcr-blue-light);
  padding: 8px 14px;
  border-radius: var(--lcr-radius-btn);
}
.lcr-page-v1 .lcr-card-reviews-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--lcr-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.lcr-page-v1 .lcr-card-reviews-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--lcr-dark);
}
/* N/A state — no public review profile found for this company. Muted
   color signals "missing data" without alarming; the tooltip on the
   wrapping .lcr-tip-wrap explains why. */
.lcr-page-v1 .lcr-card-reviews-stat-value--na {
  color: var(--lcr-muted);
  font-weight: 600;
}
.lcr-page-v1 .lcr-card-reviews-sources {
  font-size: 13px;
  color: var(--lcr-muted);
}
.lcr-page-v1 .lcr-card-reviews-source {
  color: var(--lcr-blue);
  transition: color 0.15s ease;
}
.lcr-page-v1 .lcr-card-reviews-source:hover { color: var(--lcr-blue-hover); }

/* ── Tags row (highlights + positive sentiment) ────────────────────────
   Sits inside .lcr-card-body, after the tab panels. Top border separates
   it from whichever panel is currently visible. JS hides this row on
   non-Summary tabs (initCardTabs in script-view.js).
   - Highlight pills (blue): editorial labels from directory_highlights_list.
   - Sentiment pills (green): top positive themes; hover triggers tooltip
     showing "X% of reviewers mentioned this. {description}". */
.lcr-page-v1 .lcr-card-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--lcr-border);
}
.lcr-page-v1 .lcr-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--lcr-radius-badge);
  line-height: 1.2;
  /* All positive pills share these colors per Jamie's 2-color schema —
     "good" reads as the same green regardless of source (editorial
     highlights vs. sentiment). The .lcr-card-tag--highlight class is
     kept in the DOM as a semantic flag (analytics, future re-treatments)
     but doesn't surface visually. Negatives will get amber when they're
     added in the tag-discipline pass. */
  color: var(--lcr-green);
  background: var(--lcr-green-light);
}
.lcr-page-v1 .lcr-card-tag--sentiment {
  cursor: help;
  transition: background-color 0.15s ease;
}
.lcr-page-v1 .lcr-tip-wrap:hover .lcr-card-tag--sentiment,
.lcr-page-v1 .lcr-tip-wrap:focus-visible .lcr-card-tag--sentiment {
  background: #BBF7D0;       /* slightly stronger green on hover */
}
/* Negative-sentiment override — amber over the green base. Reuses the
   same design tokens the Reviews-tab theme grid uses for negative themes
   so amber stays consistent across the page. */
.lcr-page-v1 .lcr-card-tag--negative {
  color: var(--lcr-sentiment-negative-text);
  background: var(--lcr-sentiment-negative-bg);
}
.lcr-page-v1 .lcr-tip-wrap:hover .lcr-card-tag--negative,
.lcr-page-v1 .lcr-tip-wrap:focus-visible .lcr-card-tag--negative {
  background: #FDE68A;       /* amber-200 — small hover darken */
}
.lcr-page-v1 .lcr-card-tag-icon {
  flex-shrink: 0;
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 7 — MORE COMPANIES SECTION
   Reuses the .lcr-card shell (with --collapsible modifier) for cards 6+.
   Mobile gets a per-card "See details" toggle to save vertical scroll;
   ≥1024px hides the toggle and forces details open.
   When >7 cards, section-level "View more / View fewer" pagination kicks
   in (matches both the reference HTML and the production page).
   ──────────────────────────────────────────────────────────────────────── */

.lcr-page-v1 .lcr-more-companies {
  margin-bottom: 40px;
  scroll-margin-top: 112px;
}
.lcr-page-v1 .lcr-more-companies-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--lcr-blue);
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: var(--lcr-tracking-clever);
}

/* Intro callout — light-blue panel, three labeled paragraphs. */
.lcr-page-v1 .lcr-more-companies-intro {
  background: var(--lcr-blue-light);
  border: 1px solid #BFDBFE;            /* blue-200 from reference */
  border-radius: var(--lcr-radius-card);
  padding: 20px;
  margin-bottom: 24px;
}
.lcr-page-v1 .lcr-more-companies-intro p {
  font-size: 15px;
  color: var(--lcr-dark);
  line-height: 1.625;
  margin-bottom: 12px;
}
.lcr-page-v1 .lcr-more-companies-intro p:last-child { margin-bottom: 0; }

/* ── More-card "See details" toggle ─────────────────────────────────────
   Sits as a sibling immediately before .lcr-more-card-collapse, inside
   .lcr-card-body. Stretches full-width with a top border so it reads as
   a footer action; centered label + chevron. Mobile-only. */
.lcr-page-v1 .lcr-more-card-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  padding: 20px 0 0 0;
  border: 0;
  border-top: 1px solid var(--lcr-border);
  background: transparent;
  font-family: inherit;
  letter-spacing: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--lcr-blue);
  cursor: pointer;
  transition: color 0.15s ease;
}
.lcr-page-v1 .lcr-more-card-toggle:hover { color: var(--lcr-blue-hover); }
.lcr-page-v1 .lcr-more-card-chev {
  display: inline-block;
  transition: transform 0.2s ease;
}
.lcr-page-v1 .lcr-more-card-toggle.lcr-open .lcr-more-card-chev { transform: rotate(180deg); }

/* Collapse wrap — collapsed by default; .lcr-open reveals tab section.
   `display: none` is harsh but matches the reference's approach (the tab
   section's height isn't worth animating — too much variation across
   cards, and the user's expectation is a simple show/hide). */
.lcr-page-v1 .lcr-more-card-collapse { display: none; }
.lcr-page-v1 .lcr-more-card-collapse.lcr-open { display: block; }

/* Desktop override: ≥1024px the section is always open and the toggle
   is hidden. Cards then look + behave just like Top-5 cards (minus the
   ribbon, which card.php already suppresses for collapsible mode). */
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-more-card-toggle { display: none; }
  .lcr-page-v1 .lcr-more-card-collapse { display: block; }
}

/* ── Section-level pagination buttons (View more / View fewer) ─────────
   Solid blue, full-width-feel via flex+inline-flex pattern from reference.
   Both buttons share the same shape; they're toggled via [hidden]. */
.lcr-page-v1 .lcr-more-companies-toggle {
  display: flex;
  margin-bottom: 24px;
}
.lcr-page-v1 .lcr-more-companies-toggle[hidden] { display: none; }
.lcr-page-v1 .lcr-more-companies-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lcr-blue);
  border: 1px solid var(--lcr-blue);
  color: var(--lcr-white);
  font-family: inherit;
  letter-spacing: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--lcr-radius-btn);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lcr-page-v1 .lcr-more-companies-btn:hover {
  background: var(--lcr-blue-hover);
  border-color: var(--lcr-blue-hover);
}
.lcr-page-v1 .lcr-more-companies-hidden[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   STEP 8a — FIND TOP-RATED CTA
   Bottom CTA banner: heading + light-panel with subhead, zip input,
   Compare Agents button, Trustpilot footer. Last block in the gray zone;
   #startmsf is the page-wide scroll target for in-page Compare anchors.
   ──────────────────────────────────────────────────────────────────────── */

.lcr-page-v1 .lcr-cta {
  margin-top: 48px;
  margin-bottom: 40px;
  scroll-margin-top: 112px;
}
.lcr-page-v1 .lcr-cta-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--lcr-blue);
  margin-bottom: 24px;
  line-height: 1.1;
  letter-spacing: var(--lcr-tracking-clever);
}

/* Light panel — distinct from intro callout (#E8F2FE); this one is a
   slightly cooler blue-gray so the CTA stands out against neighboring
   blue-light callouts. */
.lcr-page-v1 .lcr-cta-panel {
  background: #F0F4FA;
  border-radius: 16px;
  padding: 32px 20px;
  text-align: center;
}
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-cta-panel { padding: 40px 24px; }
}

.lcr-page-v1 .lcr-cta-sub {
  font-size: 15px;
  color: #4B5563;          /* gray-700 */
  line-height: 1.5;
  margin: 0 auto 32px;
  max-width: 680px;
}
@media (min-width: 768px) { .lcr-page-v1 .lcr-cta-sub { font-size: 16px; } }
@media (min-width: 1024px) { .lcr-page-v1 .lcr-cta-sub { font-size: 17px; } }

/* Form row — column on mobile, row on ≥640px. Capped width so the
   input + button don't stretch on a wide panel.
   Defensive overrides: the form keeps the .zipForm + .zipFormOffersCta
   classes for compatibility with WPCodeBox's startFunnel JS hook on
   production. wpcodebox's algo_reviews_styling.css ships a rule on
   .zipFormOffersCta that treats the form AS the panel (bg + 50px
   padding + 40px margin + border-radius) — we null those out here so
   our .lcr-cta-panel is the only panel in play. */
.lcr-page-v1 .lcr-cta-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 512px;        /* max-w-lg */
  margin: 0 auto 32px;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
@media (min-width: 640px) {
  .lcr-page-v1 .lcr-cta-form { flex-direction: row; }
}

/* ZIP input wrapper — relative so the pin icon can sit absolutely inside */
.lcr-page-v1 .lcr-cta-zip-wrap {
  position: relative;
  width: 100%;
}
@media (min-width: 640px) { .lcr-page-v1 .lcr-cta-zip-wrap { flex: 1; } }

.lcr-page-v1 .lcr-cta-zip-input {
  width: 100%;
  background: var(--lcr-white);
  border: 1px solid #D1D5DB;            /* gray-300 */
  border-radius: var(--lcr-radius-btn);
  padding: 14px 40px 14px 16px;          /* extra right padding for icon */
  font-family: inherit;
  letter-spacing: inherit;
  font-size: 16px;
  color: #4B5563;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
@media (min-width: 768px) { .lcr-page-v1 .lcr-cta-zip-input { font-size: 15px; } }
.lcr-page-v1 .lcr-cta-zip-input::placeholder { color: #9CA3AF; }
.lcr-page-v1 .lcr-cta-zip-input:focus {
  border-color: var(--lcr-blue);
  box-shadow: 0 0 0 1px var(--lcr-blue);
}
.lcr-page-v1 .lcr-cta-zip-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  pointer-events: none;
}

/* Compare Agents button */
.lcr-page-v1 .lcr-cta-btn {
  width: 100%;
  background: var(--lcr-blue);
  border: 0;
  color: var(--lcr-white);
  font-family: inherit;
  letter-spacing: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: var(--lcr-radius-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
@media (min-width: 640px) { .lcr-page-v1 .lcr-cta-btn { width: auto; } }
.lcr-page-v1 .lcr-cta-btn:hover { background: var(--lcr-blue-hover); }

/* Trustpilot footer line */
.lcr-page-v1 .lcr-cta-trustpilot {
  font-size: 12px;
  color: #6B7280;          /* gray-500 */
  line-height: 1.5;
}
@media (min-width: 768px) { .lcr-page-v1 .lcr-cta-trustpilot { font-size: 14px; } }
.lcr-page-v1 .lcr-cta-tp-excellent {
  color: #00B67A;          /* Trustpilot green */
  font-weight: 700;
}
.lcr-page-v1 .lcr-cta-tp-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}
.lcr-page-v1 .lcr-cta-tp-brand-name {
  font-weight: 700;
  color: #1F2937;          /* gray-800 */
}
.lcr-page-v1 .lcr-cta-tp-star { fill: #00B67A; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════
   STEP 8b — NEARBY CITIES (city template variant)
   Full-width section below <main>. Visually continues the gray storefront
   zone — same #F9FAFB background. Inner container caps at 1144px to align
   with .lcr-main. Pill links wrap into rows, alphabetical.
   ──────────────────────────────────────────────────────────────────────── */

.lcr-page-v1 .lcr-nearby {
  background: var(--lcr-surface-subtle);     /* #F9FAFB — matches gray zone */
  padding: 0 0 40px;
  scroll-margin-top: 112px;
}
@media (min-width: 1024px) { .lcr-page-v1 .lcr-nearby { padding-bottom: 48px; } }

/* Inner container — capped width matching .lcr-main, with horizontal padding
   so pills don't run to the edge on mobile. */
.lcr-page-v1 .lcr-nearby-inner {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .lcr-page-v1 .lcr-nearby-inner { padding: 0 24px; } }

.lcr-page-v1 .lcr-nearby-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--lcr-blue);
  margin-bottom: 24px;
  line-height: 1.1;
  letter-spacing: var(--lcr-tracking-clever);
}

/* Pill grid — flex-wrap so cities fill rows naturally. */
.lcr-page-v1 .lcr-nearby-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (min-width: 768px) { .lcr-page-v1 .lcr-nearby-list { gap: 12px; } }

.lcr-page-v1 .lcr-nearby-pill {
  display: inline-block;
  background: var(--lcr-white);
  border: 1px solid #BFDBFE;            /* blue-200 — same hue as intro callout border */
  color: var(--lcr-blue);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lcr-page-v1 .lcr-nearby-pill:hover {
  background: var(--lcr-blue);
  color: var(--lcr-white);
  border-color: var(--lcr-blue);
}

/* State variant: lives inside the gray storefront zone alongside the other
   gray-zone sections, so we drop the duplicate panel bg + the inner cap div.
   Top margin matches the rhythm between adjacent gray-zone sections. */
.lcr-page-v1 .lcr-nearby--state {
  background: transparent;
  padding: 0;
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-nearby--state { padding-bottom: 0; margin-top: 40px; }
}

/* ════════════════════════════════════════════════════════════════════════
   STATE TEMPLATE — TOP CITIES (Phase 3)
   "Top discount real estate brokers near you" — H2 section with 5 city
   groups. Each group: H3 ("Best discount realtors in {City}, {ST}") +
   horizontal carousel of company tiles (reuses .lcr-glance-carousel
   markup so initCarousels picks it up automatically) + a "See all N
   companies in {City}" CTA link to the city's LCR page.
   ──────────────────────────────────────────────────────────────────── */

.lcr-page-v1 .lcr-top-cities {
  margin-top: 40px;
  scroll-margin-top: 112px;
}
@media (min-width: 1024px) { .lcr-page-v1 .lcr-top-cities { margin-top: 48px; } }

.lcr-page-v1 .lcr-top-cities-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--lcr-blue);
  line-height: 1.1;
  letter-spacing: var(--lcr-tracking-clever);
  margin: 0 0 24px;
}

/* Per-city group — flow vertically, slightly tighter spacing than the
   section heading. */
.lcr-page-v1 .lcr-top-cities-group + .lcr-top-cities-group {
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .lcr-page-v1 .lcr-top-cities-group + .lcr-top-cities-group { margin-top: 40px; }
}

.lcr-page-v1 .lcr-top-cities-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.lcr-page-v1 .lcr-top-cities-city-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--lcr-fg);
  line-height: 1.25;
  margin: 0;
}

/* "See all N companies in {City}" — bordered pill button. Sits below
   the carousel as the natural read-direction next step. */
.lcr-page-v1 .lcr-top-cities-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lcr-blue);
  background: transparent;
  border: 1px solid var(--lcr-blue);
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lcr-page-v1 .lcr-top-cities-cta:hover {
  background: var(--lcr-blue);
  color: var(--lcr-white);
  text-decoration: none;
}
.lcr-page-v1 .lcr-top-cities-cta svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.lcr-page-v1 .lcr-top-cities-cta:hover svg {
  transform: translateX(2px);
}

/* Ribbon-less card variant — at-a-glance cards have a colored top ribbon
   that doubles as visual top padding; tiles in this section have no
   ribbon, so restore that visual breathing room via card-body padding. */
.lcr-page-v1 .lcr-glance-card--noribbon .lcr-glance-card-body {
  padding-top: 16px;
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 8c — RELATED GUIDES
   Mirrors clever-ffmls-page/partials/related-resources.php — wraps the
   [related] shortcode's HTML in .lcr-related-list and styles the
   inner .related-posts / .related-post / .related-image / .related-title /
   .related-excerpt elements (same DOM shape the WP plugin emits).
   ──────────────────────────────────────────────────────────────────────── */

.lcr-page-v1 .lcr-related-guides {
  background: var(--lcr-surface-subtle);     /* continues gray storefront band */
  padding: 0 0 40px;
  scroll-margin-top: 112px;
}
@media (min-width: 1024px) { .lcr-page-v1 .lcr-related-guides { padding-bottom: 48px; } }

.lcr-page-v1 .lcr-related-inner {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .lcr-page-v1 .lcr-related-inner { padding: 0 24px; } }

.lcr-page-v1 .lcr-related-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--lcr-blue);
  margin-bottom: 24px;
  line-height: 1.1;
  letter-spacing: var(--lcr-tracking-clever);
}
@media (min-width: 1024px) { .lcr-page-v1 .lcr-related-heading { margin-bottom: 32px; } }

/* Inner shortcode HTML — DOM identical to FFMLS's port. */
.lcr-page-v1 .lcr-related-list .related-posts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lcr-page-v1 .lcr-related-list .related-post {
  display: flex;
  gap: 16px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.lcr-page-v1 .lcr-related-list .related-image {
  flex: 0 0 auto;
  width: 140px;
}
.lcr-page-v1 .lcr-related-list .related-image img {
  width: 140px;
  height: auto;
  max-height: 90px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  margin: 0;
  background: #E5E7EB;     /* fallback shade for empty preview placeholders */
  aspect-ratio: 4 / 2;
}
.lcr-page-v1 .lcr-related-list .related-info { flex: 1 1 auto; min-width: 0; }
.lcr-page-v1 .lcr-related-list .related-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
  color: var(--lcr-dark);
  text-wrap: pretty;
}
.lcr-page-v1 .lcr-related-list .related-excerpt {
  font-size: 15px;
  color: var(--lcr-muted);
  line-height: 1.5;
  text-wrap: pretty;
}
.lcr-page-v1 .lcr-related-list .related-post:hover .related-title {
  color: var(--lcr-blue);
}

@media (max-width: 640px) {
  .lcr-page-v1 .lcr-related-list .related-post {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    text-align: left;
  }
  .lcr-page-v1 .lcr-related-list .related-image {
    width: 130px;
    margin: 0 !important;
    text-align: left;
  }
  .lcr-page-v1 .lcr-related-list .related-image img {
    width: 130px;
    max-height: 80px;
    margin: 0 !important;
  }
  .lcr-page-v1 .lcr-related-list .related-title { font-size: 14px; }
  .lcr-page-v1 .lcr-related-list .related-excerpt { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 8d — METHODOLOGY + AUTHOR
   Two stacked white sections. Both cap at a narrow 672px reading column
   inside the 1144px container (mirrors reference HTML's max-w-2xl).
   Methodology has the page-wide #methodology anchor (jumped to from "see
   our full methodology" links). Author block visually separates with a
   top border on its inner column.
   ──────────────────────────────────────────────────────────────────────── */

.lcr-page-v1 .lcr-methodology {
  background: var(--lcr-white);
  padding: 40px 0 0;
  scroll-margin-top: 112px;
}
@media (min-width: 1024px) { .lcr-page-v1 .lcr-methodology { padding-top: 48px; } }

.lcr-page-v1 .lcr-methodology-inner,
.lcr-page-v1 .lcr-author-inner {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .lcr-page-v1 .lcr-methodology-inner,
  .lcr-page-v1 .lcr-author-inner { padding: 0 24px; }
}

/* Both inner columns also constrain reading width — sub-container narrowing
   matches the reference's max-w-2xl on each section. */
.lcr-page-v1 .lcr-methodology-inner > *,
.lcr-page-v1 .lcr-author-inner > * {
  max-width: 672px;
}

.lcr-page-v1 .lcr-methodology-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--lcr-blue);
  margin-bottom: 24px;
  line-height: 1.1;
  letter-spacing: var(--lcr-tracking-clever);
}

/* Author section — sits under methodology with a divider rule above the
   content. Padding lighter on top (it's the divider) and heavier on
   bottom (visual breathing room before the page footer). */
.lcr-page-v1 .lcr-author {
  background: var(--lcr-white);
  padding: 24px 0 40px;
}
@media (min-width: 1024px) { .lcr-page-v1 .lcr-author { padding-bottom: 48px; } }
.lcr-page-v1 .lcr-author-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--lcr-dark);
  margin: 0 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--lcr-border);
}

/* ── .lcr-prose — shared rich-text typography for the WYSIWYG body. ────
   Used by methodology + author. Tight 14px / 1.5 line-height — matches the
   reference HTML's text-sm + leading-relaxed treatment for these sections. */
.lcr-page-v1 .lcr-prose h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--lcr-dark);
  margin: 24px 0 12px;
  line-height: 1.25;
}
.lcr-page-v1 .lcr-prose h3:first-child { margin-top: 0; }
.lcr-page-v1 .lcr-prose p {
  font-size: 14px;
  color: #4B5563;          /* gray-700, slightly cooler than --lcr-muted */
  line-height: 1.625;
  margin: 0 0 16px;
}
.lcr-page-v1 .lcr-prose p:last-child { margin-bottom: 0; }
.lcr-page-v1 .lcr-prose ul {
  list-style: disc outside;
  padding-left: 20px;
  margin: 0 0 16px;
}
.lcr-page-v1 .lcr-prose li {
  font-size: 14px;
  color: #4B5563;
  line-height: 1.625;
  margin: 8px 0;
}
.lcr-page-v1 .lcr-prose a { color: var(--lcr-blue); }
.lcr-page-v1 .lcr-prose a:hover { color: var(--lcr-blue-hover); }
.lcr-page-v1 .lcr-prose strong { color: var(--lcr-dark); }