/*
 * Clever LCR SBR — scoped stylesheet.
 *
 * Status: Step 2 scaffolding. Contains the design tokens (CSS custom
 * properties), the page-level scope rule, and a small scaffold-banner
 * placeholder. As we land each section in subsequent steps, real component
 * CSS gets appended below — translating each Tailwind utility from the
 * reference HTML mockup (sbr-hometiva-preview.html) into a prefixed class
 * scoped under .lcr-sbr-page-v1.
 *
 * No Tailwind. No frameworks. Every selector lives under .lcr-sbr-page-v1.
 *
 * Design-system sync note: the token block below is BYTE-IDENTICAL to
 * clever-lcr-directory/blocks/lcr-directory/style.css:15-59. The two plugins
 * are companion pages and the visual continuity is intentional. If a token
 * value diverges between the two files, treat it as a bug. SBR-only tokens
 * (e.g. donut segments) get added below the shared block with a comment
 * flagging them as candidates for back-port to the directory.
 */

/* ── Design tokens (sync source: clever-lcr-directory style.css:15-59) ── */
.lcr-sbr-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-highlight-tint: #F0F4FA;   /* soft blue-gray panel tint (directory-aligned) */
  --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;
  /* Subtle blue-light tint fading to white at BOTH ends of the page (top hero
     zone + a mirrored fade at the bottom CTA), over a white base. Transparent
     stop uses the blue-light color at 0 alpha so the fade never passes through
     grey. Each band is 520px tall, anchored to its edge. */
  background-color: #FFFFFF;
  background-image:
    linear-gradient(to bottom, var(--lcr-blue-light), rgba(232, 242, 254, 0)),
    linear-gradient(to top,    var(--lcr-blue-light), rgba(232, 242, 254, 0));
  background-repeat: no-repeat, no-repeat;
  background-position: top, bottom;
  background-size: 100% 520px, 100% 520px;
}

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

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

/* ── Empty / scaffold states ──────────────────────────────────────────── */
.lcr-sbr-page-v1--empty {
  padding: 32px 24px;
  background: var(--lcr-surface-subtle);
  border: 1px dashed var(--lcr-border);
  border-radius: var(--lcr-radius-card);
  color: var(--lcr-muted);
  text-align: center;
}

.lcr-sbr-page-v1 .lcr-sbr-main {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 24px 20px;
}
/* Mobile: match production's 4vw side gutter. Each in-<main> section adds its own
   10px, so the wrapper supplies the rest (4vw − 10px) → total content gutter = 4vw.
   (Trailing sections, which live outside <main>, set 4vw directly to match.) */
@media (max-width: 767px) {
  .lcr-sbr-page-v1 .lcr-sbr-main { padding-left: calc(4vw - 10px); padding-right: calc(4vw - 10px); }
}

/* ── Section 2 — Article title + byline ───────────────────────────────────
   Article-width container (1144px cap, matches the directory's content width
   and the mockup's max-w-article). Side padding collapses 24px → 16px on
   mobile (matches the mockup's px-6 → px-4 override). */
.lcr-sbr-page-v1 .lcr-sbr-article {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-article {
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* INTENTIONAL un-scoped rule (theme chrome lives outside the block root):
   this block renders its own article H1 + byline, so hide the Bricks "Post"
   template's #post-title / #post-details to avoid a duplicate header. Scoped
   with :has(.lcr-sbr-page-v1) so it ONLY applies on pages where this block is
   present (cut-over pages); legacy discount-brokers pages keep the Bricks header. */
body:has(.lcr-sbr-page-v1) #post-title,
body:has(.lcr-sbr-page-v1) #post-details { display: none !important; }
/* INTENTIONAL un-scoped rule: the Bricks template appends a site-wide #subfooter-cta
   on these pages; our block renders its own bottom CTA (.lcr-sbr-cta = the #startmsf
   funnel anchor), so suppress the duplicate on cut-over pages. Matches the directory,
   which shows only its own CTA. Scoped via :has() so legacy/other pages keep theirs. */
body:has(.lcr-sbr-page-v1) #subfooter-cta { display: none !important; }
/* Width parity with the harness. The Bricks "Post" template wraps the content in a
   boxed container capped at Bricks' (narrower) content width. On cut-over pages,
   widen that chain so the block's own column caps (.lcr-sbr-main = --lcr-content-w,
   sections) govern and center — reproducing the standalone harness. Scoped via
   :has() to cut-over pages; #brxe-xkjypa is the post container in this Bricks template. */
body:has(.lcr-sbr-page-v1) #post-content,
body:has(.lcr-sbr-page-v1) #post-wrapper,
body:has(.lcr-sbr-page-v1) #brxe-xkjypa,
/* Bricks' Post Content element caps the_content's children (~810px readable
   width); override it on our block so its own column caps govern. */
#post-content .lcr-sbr-page-v1 {
  max-width: none !important;
  width: 100% !important;
}
/* Edge-to-edge: zero the Bricks chrome's horizontal padding so the block — and its
   full-width gradient background band — reaches the viewport edges. Content keeps
   its gutters via the section padding + .lcr-sbr-main centering. */
body:has(.lcr-sbr-page-v1) #post-content,
body:has(.lcr-sbr-page-v1) #post-wrapper,
body:has(.lcr-sbr-page-v1) #brxe-xkjypa {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Remove the Bricks chrome's top AND bottom spacing around the block (container has
   padding: 75px 0; + post-content margin-top) so the gradient meets the site header
   above and the navy footer below with no white gap. The title's own 40px padding-top
   keeps it off the nav; the block's bottom gradient now meets the footer directly. */
body:has(.lcr-sbr-page-v1) #brxe-xkjypa { padding-top: 0 !important; padding-bottom: 0 !important; }
body:has(.lcr-sbr-page-v1) #post-content { margin-top: 0 !important; }
/* Mobile gutter: an ANCESTOR .brxe-container still carries Bricks' default
   horizontal padding (0 4vw on mobile), which stacks on top of each section's
   own 16px gutter (~30px total on a phone — the "narrow strip"). Zero it on
   mobile so the section padding is the single ~16px gutter. id-agnostic via
   :has() (the live container id varies prod↔sandbox). Desktop is unchanged —
   the section max-widths center the column there. */
@media (max-width: 767px) {
  .brxe-container:has(.lcr-sbr-page-v1) { padding-left: 0 !important; padding-right: 0 !important; }
}
.lcr-sbr-page-v1 .lcr-sbr-article--title {
  padding-top: 40px;   /* pt-10 */
  padding-bottom: 8px; /* pb-2 */
}
/* Mobile: tighten the empty space above the H1 (40px reads as too much on a phone). */
@media (max-width: 767px) {
  .lcr-sbr-page-v1 .lcr-sbr-article--title { padding-top: 20px; }
}

/* Title — values byte-aligned with the directory's .lcr-hero-title
   (34px mobile / 40px desktop, 700, leading-tight, tracking-clever). */
.lcr-sbr-page-v1 .lcr-sbr-article-title {
  font-size: 26px;           /* mobile: tuned so a typical title fits 2 lines (was 34) — keeps the hero tabs in the viewport */
  font-weight: 700;
  color: var(--lcr-dark);
  letter-spacing: var(--lcr-tracking-clever);
  line-height: 1.1;
  margin-bottom: 12px;
  overflow-wrap: anywhere;   /* long, space-less title tokens (e.g. "TexasRealEstateSavings.com:") wrap instead of overflowing the viewport on mobile */
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-article-title {
    font-size: 40px;
    margin-bottom: 8px;
  }
}

/* Byline — values ported from the directory's .lcr-hero-byline so the two
   pages read identically (13px, gray-500, 12px column gap, separators
   desktop-only, 20px round avatars). */
.lcr-sbr-page-v1 .lcr-sbr-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 8px;
}
.lcr-sbr-page-v1 .lcr-sbr-byline-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lcr-sbr-page-v1 .lcr-sbr-byline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #374151;
  transition: color 0.15s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-byline-link:hover {
  color: var(--lcr-blue);
}
.lcr-sbr-page-v1 .lcr-sbr-byline-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.lcr-sbr-page-v1 .lcr-sbr-byline-sep {
  display: none;
  color: #9CA3AF;   /* text-muted token */
  font-size: 18px;   /* larger, bolder middot so the separator reads on desktop */
  font-weight: 700;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-byline-sep { display: inline; }
}
.lcr-sbr-page-v1 .lcr-sbr-byline-strong {
  font-weight: 600;
  color: #374151;
}
/* Byline "+ more" drawer — mobile collapses Edited/Reviewed behind a toggle so
   the header stays short and the hero tabs land in the viewport. Desktop shows
   all three members inline (toggle hidden). */
.lcr-sbr-page-v1 .lcr-sbr-byline-more {
  display: none;
  font: inherit;
  font-weight: 600;
  color: var(--lcr-blue);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.lcr-sbr-page-v1 .lcr-sbr-byline-more:hover { color: var(--lcr-blue-hover); }
@media (max-width: 767px) {
  .lcr-sbr-page-v1 .lcr-sbr-byline-extra { display: none; }
  .lcr-sbr-page-v1 .lcr-sbr-byline.is-open .lcr-sbr-byline-extra { display: inline-flex; }
  .lcr-sbr-page-v1 .lcr-sbr-byline-more { display: inline; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED SYSTEMS — ported byte-for-byte from clever-lcr-directory, scoped to
   .lcr-sbr-page-v1. Class names reused (.lcr-tip, .lcr-star-gold, …) so the
   two companion pages render these components identically.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Star ratings (5-star w/ partial-fill via gradient text-clip) ── */
.lcr-sbr-page-v1 .lcr-star-gold  { color: var(--lcr-star-gold); }
.lcr-sbr-page-v1 .lcr-star-empty { color: var(--lcr-border); }
.lcr-sbr-page-v1 .lcr-star-partial-10,
.lcr-sbr-page-v1 .lcr-star-partial-20,
.lcr-sbr-page-v1 .lcr-star-partial-30,
.lcr-sbr-page-v1 .lcr-star-partial-40,
.lcr-sbr-page-v1 .lcr-star-partial-50,
.lcr-sbr-page-v1 .lcr-star-partial-60,
.lcr-sbr-page-v1 .lcr-star-partial-70,
.lcr-sbr-page-v1 .lcr-star-partial-80,
.lcr-sbr-page-v1 .lcr-star-partial-90 {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lcr-sbr-page-v1 .lcr-star-partial-10 { background-image: linear-gradient(90deg, #F5A623 10%, #E5E7EB 10%); }
.lcr-sbr-page-v1 .lcr-star-partial-20 { background-image: linear-gradient(90deg, #F5A623 20%, #E5E7EB 20%); }
.lcr-sbr-page-v1 .lcr-star-partial-30 { background-image: linear-gradient(90deg, #F5A623 30%, #E5E7EB 30%); }
.lcr-sbr-page-v1 .lcr-star-partial-40 { background-image: linear-gradient(90deg, #F5A623 40%, #E5E7EB 40%); }
.lcr-sbr-page-v1 .lcr-star-partial-50 { background-image: linear-gradient(90deg, #F5A623 50%, #E5E7EB 50%); }
.lcr-sbr-page-v1 .lcr-star-partial-60 { background-image: linear-gradient(90deg, #F5A623 60%, #E5E7EB 60%); }
.lcr-sbr-page-v1 .lcr-star-partial-70 { background-image: linear-gradient(90deg, #F5A623 70%, #E5E7EB 70%); }
.lcr-sbr-page-v1 .lcr-star-partial-80 { background-image: linear-gradient(90deg, #F5A623 80%, #E5E7EB 80%); }
.lcr-sbr-page-v1 .lcr-star-partial-90 { background-image: linear-gradient(90deg, #F5A623 90%, #E5E7EB 90%); }

/* ── Tooltip system (.lcr-tip-wrap trigger + .lcr-tip fixed-position body).
   position:fixed escapes clipping ancestors; coords set per-show by
   initTooltips() in script-view.js. ── */
.lcr-sbr-page-v1 .lcr-tip-wrap {
  position: relative;
  display: inline-flex;
  cursor: help;
}
.lcr-sbr-page-v1 .lcr-tip-wrap--block {
  display: block;
  width: 100%;
}
/* Visible (i) cue on tooltip triggers (fee callouts + score rows + similar fee),
   so the cursor:help affordance reads as tappable on mobile (Ben/Ashley). */
.lcr-sbr-page-v1 .lcr-sbr-tip-icon {
  flex-shrink: 0;
  /* inherits currentColor → the icon matches the color of the label it follows */
  margin-left: 4px;
  vertical-align: -0.15em;
}
/* Keeps the last word + (i) icon together so the icon never orphans to its own
   line when a narrow label wraps (tablet cost cells). */
.lcr-sbr-page-v1 .lcr-sbr-tip-label { white-space: nowrap; }
/* Smaller (i) on the score-factor rows (Experience/Pricing/…) so it reads as a
   quiet cue and doesn't compete with the rating stars opposite it. */
.lcr-sbr-page-v1 .lcr-sbr-score-label .lcr-sbr-tip-icon { width: 11px; height: 11px; }
/* Tablet-portrait band: the 3 fee-callout labels wrap unevenly (one fits, two
   don't). Force all of them to a uniform 2-line stack so the row reads cleanly;
   they snap back to one line each at >=900px where all three fit. Cost cells only. */
@media (min-width: 768px) and (max-width: 899px) {
  .lcr-sbr-page-v1 .lcr-sbr-cost-label .lcr-sbr-tip-head,
  .lcr-sbr-page-v1 .lcr-sbr-cost-label .lcr-sbr-tip-label { display: block; }
}
/* Dashed-underline cue (like production) on the location + product-type tooltip
   triggers, shown only when a tooltip is actually present (:has). */
.lcr-sbr-page-v1 .lcr-tip-wrap:has(> .lcr-tip) .lcr-sbr-hero-loc,
.lcr-sbr-page-v1 .lcr-tip-wrap:has(> .lcr-tip) .lcr-sbr-similar-type {
  text-decoration: underline dashed;
  text-decoration-color: #9CA3AF;   /* text-muted token */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.lcr-sbr-page-v1 .lcr-tip {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, calc(-100% - 8px));
  background: #161E26;
  color: #FFF;
  font-family: var(--lcr-font-sans); /* pin: don't inherit a heading font when the trigger sits in an <h4> (e.g. Services column titles) */
  font-size: 14px;
  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-sbr-page-v1 .lcr-tip::after {
  content: '';
  position: absolute;
  left: calc(50% + var(--lcr-tip-arrow-shift, 0px));
  transform: translateX(-50%);
  top: 100%;
  border: 5px solid transparent;
  border-top-color: #161E26;
}
.lcr-sbr-page-v1 .lcr-tip.lcr-tip--below {
  transform: translate(-50%, 8px);
}
.lcr-sbr-page-v1 .lcr-tip.lcr-tip--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #161E26;
}
.lcr-sbr-page-v1 .lcr-tip-wrap:hover .lcr-tip,
.lcr-sbr-page-v1 .lcr-tip-wrap:focus-visible .lcr-tip,
.lcr-sbr-page-v1 .lcr-tip-wrap.lcr-tip-show .lcr-tip {
  opacity: 1;
  pointer-events: auto;
}
/* Scroll dismiss: while the page or a carousel is scrolling, force any open
   tooltip closed (even one held open by iOS's sticky :hover after a tap), so it
   doesn't stick/float. JS adds .lcr-tip-suppressed to the root on scroll and
   removes it on the next pointer/focus interaction with a trigger. */
.lcr-sbr-page-v1.lcr-tip-suppressed .lcr-tip { opacity: 0 !important; pointer-events: none !important; }
.lcr-sbr-page-v1 .lcr-tip ul {
  margin: 4px 0 0;
  padding-left: 18px;
  list-style: disc outside;
}
.lcr-sbr-page-v1 .lcr-tip li { margin-bottom: 2px; line-height: 1.4; }
.lcr-sbr-page-v1 .lcr-tip strong { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 3 — Hero / company-overview card
   ══════════════════════════════════════════════════════════════════════════ */
.lcr-sbr-page-v1 .lcr-sbr-hero {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 12px 10px 24px;   /* mobile: tighter gap above the card (was 24px top); 10px sides to align the card with the other sections */
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-hero { padding: 24px; }
}
.lcr-sbr-page-v1 .lcr-sbr-hero-card {
  position: relative;
  background: var(--lcr-white);
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-card);
  box-shadow: 0 1px 3px rgba(22, 30, 38, 0.06), 0 6px 16px rgba(22, 30, 38, 0.06);
}
.lcr-sbr-page-v1 .lcr-sbr-hero-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: var(--lcr-blue);
  color: #FFF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 16px 5px 12px;
  border-radius: 12px 0 8px 0;
}
.lcr-sbr-page-v1 .lcr-sbr-hero-body {
  padding: 48px 16px 16px;   /* pt-12 px-4 pb-4 (mobile) */
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-hero-body { padding: 40px 24px 20px; }  /* pt-10 px-6 pb-5 */
}
.lcr-sbr-page-v1 .lcr-sbr-hero-cols { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-hero-cols { flex-direction: row; gap: 32px; }
}
/* Mobile: center the identity stack (logo, name, location, rating) — matches
   the directory card's centered mobile header. Desktop reverts to left-aligned
   when the two columns split at 768px. */
.lcr-sbr-page-v1 .lcr-sbr-hero-left { width: 100%; margin-bottom: 12px; text-align: center; }
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-hero-left { width: 220px; flex-shrink: 0; margin-bottom: 0; text-align: left; }
}
.lcr-sbr-page-v1 .lcr-sbr-hero-logo {
  height: 56px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  margin: 0 auto 12px;       /* centered on mobile */
  display: block;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-hero-logo { height: 72px; max-width: 190px; margin-left: 0; margin-right: 0; }
}
/* Rating row centers on mobile with the rest of the identity stack. */
.lcr-sbr-page-v1 .lcr-sbr-hero-rating-row { justify-content: center; }
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-hero-rating-row { justify-content: flex-start; }
}
.lcr-sbr-page-v1 .lcr-sbr-hero-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--lcr-dark);
  margin-bottom: 2px;
  overflow-wrap: anywhere;   /* safety: an extreme name wraps within its column rather than overlapping the tabs */
}
/* Long, space-less names (longest token >18 chars; flagged in hero-card.php) get a
   smaller size so a domain like "TexasRealEstateSavings.com" fits the left column
   on one line instead of overflowing into the tab bar. */
.lcr-sbr-page-v1 .lcr-sbr-hero-name--long { font-size: 15px; }
.lcr-sbr-page-v1 .lcr-sbr-hero-loc {
  font-size: 14px;
  color: var(--lcr-muted);
  margin-bottom: 12px;
}
.lcr-sbr-page-v1 .lcr-sbr-hero-rating { margin-bottom: 16px; }
.lcr-sbr-page-v1 .lcr-sbr-hero-rating-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--lcr-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.lcr-sbr-page-v1 .lcr-sbr-hero-rating-row {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  /* Wrap so a longer callout ("Recommended", "Worth considering") drops to its
     own line inside the fixed-width identity column instead of spilling past it. */
  flex-wrap: wrap;
}
.lcr-sbr-page-v1 .lcr-sbr-hero-rating-num {
  font-size: 30px;
  font-weight: 700;
  color: var(--lcr-dark);
  line-height: 1;
}
.lcr-sbr-page-v1 .lcr-sbr-hero-rating-row .lcr-stars { font-size: 15px; }
.lcr-sbr-page-v1 .lcr-sbr-hero-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--lcr-radius-pill);
  /* color/background supplied by the shared .lcr-sbr-tag--* tier class */
}

/* 4 score-metric rows — desktop only (mobile shows them in the Ratings tab, 5b) */
.lcr-sbr-page-v1 .lcr-sbr-hero-scores { display: none; }
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-hero-scores { display: block; }
}
.lcr-sbr-page-v1 .lcr-sbr-hero-scores .lcr-tip-wrap { margin-bottom: 6px; }
.lcr-sbr-page-v1 .lcr-sbr-hero-scores .lcr-tip-wrap:last-child { margin-bottom: 0; }
.lcr-sbr-page-v1 .lcr-sbr-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lcr-highlight-tint);            /* unified highlight tint */
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  padding: 8px 12px;             /* slimmer vertical padding so the 4 score cards take less stack height */
}
.lcr-sbr-page-v1 .lcr-sbr-score-label { font-size: 14px; font-weight: 500; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-score-val { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.lcr-sbr-page-v1 .lcr-sbr-score-num { font-size: 14px; font-weight: 700; color: var(--lcr-dark); }

/* RIGHT column */
.lcr-sbr-page-v1 .lcr-sbr-hero-right { flex: 1 1 0%; min-width: 0; }

/* Cost cells — stacked rows w/ dividers on mobile, side-by-side columns at md.
   Each .lcr-tip-wrap.lcr-sbr-cost-wrap is an equal-width flex child. */
.lcr-sbr-page-v1 .lcr-sbr-cost-cells {
  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: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-cost-cells {
    flex-direction: row;
    gap: 12px;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
}
.lcr-sbr-page-v1 .lcr-sbr-cost-wrap { flex: 1 1 0%; display: flex; width: auto; }
.lcr-sbr-page-v1 .lcr-sbr-cost-wrap + .lcr-sbr-cost-wrap .lcr-sbr-cost-cell {
  border-top: 1px solid var(--lcr-border);
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-cost-wrap + .lcr-sbr-cost-wrap .lcr-sbr-cost-cell { border-top: 0; }
}
.lcr-sbr-page-v1 .lcr-sbr-cost-cell {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-cost-cell {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 20px;
  }
}
.lcr-sbr-page-v1 .lcr-sbr-cost-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--lcr-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-cost-label { margin-bottom: 4px; }
}
.lcr-sbr-page-v1 .lcr-sbr-cost-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--lcr-dark);
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-cost-value { font-size: 24px; }
}
.lcr-sbr-page-v1 .lcr-sbr-cost-value--savings { color: var(--lcr-sentiment-positive-text); }

/* ── Hero card tab bar + panels (Overview / Ratings-mobile / About) ── */
.lcr-sbr-page-v1 .lcr-sbr-hero-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  overflow-x: auto;                 /* tabs scroll horizontally (carousel) within the card on mobile instead of spilling past the edge — mirrors the directory's .lcr-card-tabs */
  scrollbar-width: none;            /* Firefox: hide scrollbar */
  -webkit-overflow-scrolling: touch;
}
.lcr-sbr-page-v1 .lcr-sbr-hero-tabs::-webkit-scrollbar { display: none; }  /* WebKit: hide scrollbar */
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-hero-tabs { margin-top: 16px; }
}
.lcr-sbr-page-v1 .lcr-sbr-hero-tab {
  flex-shrink: 0;              /* keep tab width so the bar scrolls rather than the tabs squashing/overflowing */
  white-space: nowrap;
  padding: 7px 18px;
  font-size: 15px;
  font-weight: 500;
  border: 0;
  border-radius: var(--lcr-radius-pill);
  background: var(--lcr-surface-subtle);
  color: var(--lcr-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-hero-tab:hover { background: #E5E7EB; }
.lcr-sbr-page-v1 .lcr-sbr-hero-tab--active,
.lcr-sbr-page-v1 .lcr-sbr-hero-tab--active:hover {
  background: var(--lcr-blue);
  color: #FFF;
  font-weight: 600;
}
/* Ratings tab is mobile-only — desktop shows the score rows in the left column. */
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-hero-tab--mobile { display: none; }
}

.lcr-sbr-page-v1 .lcr-sbr-hero-panel { padding-top: 16px; }

/* Overview panel */
.lcr-sbr-page-v1 .lcr-sbr-hero-summary {
  font-size: 16px;
  line-height: 1.625;
  color: var(--lcr-dark);
  margin-bottom: 20px;
}
.lcr-sbr-page-v1 .lcr-sbr-hero-highlights-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--lcr-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}
.lcr-sbr-page-v1 .lcr-sbr-hero-highlights { display: flex; flex-direction: column; gap: 10px; }
.lcr-sbr-page-v1 .lcr-sbr-hero-highlight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  color: var(--lcr-dark);
  line-height: 1.5;
  margin: 0 !important;  /* neutralize Bricks' generic li { margin:8px 0 } so only the flex gap (10px) governs — matches the harness (live was 26px gaps: 8+10+8) */
}
.lcr-sbr-page-v1 .lcr-sbr-hero-check { margin-top: 2px; flex-shrink: 0; }

/* Ratings panel (mobile) — same score rows as the desktop left column */
.lcr-sbr-page-v1 .lcr-sbr-hero-panel-scores .lcr-tip-wrap { margin-bottom: 10px; }
.lcr-sbr-page-v1 .lcr-sbr-hero-panel-scores .lcr-tip-wrap:last-child { margin-bottom: 0; }

/* About panel — 2-col field grid */
.lcr-sbr-page-v1 .lcr-sbr-hero-about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 16px;
  font-size: 16px;
}
.lcr-sbr-page-v1 .lcr-sbr-about-label { color: var(--lcr-muted); margin-bottom: 4px; }
.lcr-sbr-page-v1 .lcr-sbr-about-value { color: var(--lcr-dark); font-weight: 500; }
.lcr-sbr-page-v1 .lcr-sbr-about-link { color: var(--lcr-blue); font-weight: 500; }
.lcr-sbr-page-v1 .lcr-sbr-about-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 4b — Personalize this page
   Compact OG layout (production #personalize-page): a single bordered input
   with the "Your Home Value" label notched into its top border + the
   Personalize button on the same line. Horizontal at all widths.
   ══════════════════════════════════════════════════════════════════════════ */
.lcr-sbr-page-v1 .lcr-sbr-personalize {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 10px 24px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-personalize { padding: 0 24px 24px; }
}
.lcr-sbr-page-v1 .lcr-sbr-personalize-row {
  display: flex;
  flex-wrap: wrap;             /* fallback: button drops below the input on very narrow viewports */
  align-items: stretch;        /* input + button share height */
  gap: 8px;
  max-width: 440px;
}
.lcr-sbr-page-v1 .lcr-sbr-personalize-field {
  position: relative;          /* anchors the floating label + $ prefix */
  flex: 1 1 140px;             /* base at 140 (not the input's intrinsic ~20ch) so it grows to fill but only wraps the button below once 140 + button can't fit */
  min-width: 140px;            /* keeps the home value legible right up to the wrap */
}
/* "Your Home Value" label notched into the input's top border (OG pattern):
   the white background masks the border line behind the text. */
.lcr-sbr-page-v1 .lcr-sbr-personalize-label {
  position: absolute;
  top: 0;
  left: 9px;
  transform: translateY(-50%);
  padding: 0 5px;
  background: var(--lcr-white);
  font-size: 13px;
  font-weight: 500;
  color: var(--lcr-muted);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;         /* never wrap "Your Home Value" onto a 2nd line */
  pointer-events: none;
  transition: color 0.15s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-personalize-input:focus ~ .lcr-sbr-personalize-label { color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-personalize-input-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--lcr-muted);
  font-weight: 500;
  pointer-events: none;
}
.lcr-sbr-page-v1 .lcr-sbr-personalize-input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  padding: 0 12px 0 26px;
  font-size: 15px;
  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-sbr-page-v1 .lcr-sbr-personalize-input:focus { outline: none; border-color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-personalize-submit {
  flex-shrink: 0;
  height: 44px;
  background: var(--lcr-green);
  color: var(--lcr-white);
  font-size: 15px;
  font-weight: 600;
  padding: 0 18px;
  border: 0;
  border-radius: var(--lcr-radius-btn);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  letter-spacing: inherit;
  transition: background-color 0.15s ease;
  box-sizing: border-box;
}
.lcr-sbr-page-v1 .lcr-sbr-personalize-submit:hover { background: var(--lcr-green-hover); }
.lcr-sbr-page-v1 .lcr-sbr-personalize-error   { margin-top: 10px; font-size: 14px; color: #DC2626; }
.lcr-sbr-page-v1 .lcr-sbr-personalize-success { margin-top: 10px; font-size: 14px; color: var(--lcr-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   Shared section heading — the 22px semibold blue H2 used by sections
   4c, 4d, 5, 6, 9, 10, 11 (mockup's text-[22px] font-semibold text-brand-blue).
   ══════════════════════════════════════════════════════════════════════════ */
.lcr-sbr-page-v1 .lcr-sbr-section-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--lcr-blue);
  line-height: 1.25;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 4c — Where company is available
   ══════════════════════════════════════════════════════════════════════════ */
.lcr-sbr-page-v1 .lcr-sbr-where {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 10px 40px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-where { padding: 0 24px 40px; }
}
/* Soft blue panel — same --lcr-highlight-tint backdrop the directory uses for its
   find-top-rated CTA panel, so the wayfinding block reads as intentional. */
.lcr-sbr-page-v1 .lcr-sbr-where-panel {
  background: var(--lcr-highlight-tint);
  border-radius: var(--lcr-radius-card);
  padding: 20px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-where-panel { padding: 28px 32px; }
}
.lcr-sbr-page-v1 .lcr-sbr-where-subtext {
  font-size: 15px;
  color: #374151;
  margin-top: 10px;
  margin-bottom: 18px;
}
.lcr-sbr-page-v1 .lcr-sbr-where-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* White pills pop against the blue panel; MapPin icon + label, subtle lift on hover. */
.lcr-sbr-page-v1 .lcr-sbr-where-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--lcr-blue);
  background: var(--lcr-white);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-where-pill:hover {
  border-color: var(--lcr-blue);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 117, 235, 0.12);
}
.lcr-sbr-page-v1 .lcr-sbr-where-pin {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--lcr-blue);
}
/* "Show all N markets" / "Show fewer" toggle — text-link style. */
.lcr-sbr-page-v1 .lcr-sbr-where-toggle {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--lcr-blue);
  letter-spacing: inherit;
}
.lcr-sbr-page-v1 .lcr-sbr-where-toggle:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 4d — Similar companies nearby (carousel)
   Mobile (<1024px): horizontal scroll-snap carousel, 280px tiles, floating
   arrows. Desktop (≥1024px): equal-width flex columns, no scroll.
   ══════════════════════════════════════════════════════════════════════════ */
.lcr-sbr-page-v1 .lcr-sbr-similar {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 10px 40px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-similar { padding: 0 24px 40px; }
}
.lcr-sbr-page-v1 .lcr-sbr-similar .lcr-sbr-section-title { margin-bottom: 16px; }
.lcr-sbr-page-v1 .lcr-sbr-similar-viewport { position: relative; }
.lcr-sbr-page-v1 .lcr-sbr-similar-carousel {
  display: flex;
  align-items: stretch;
  gap: 16px;
  /* Top padding gives the Clever overhang tab room to sit above its card
     WITHOUT escaping the carousel box (overflow-x:auto would otherwise clip
     it vertically on mobile). */
  padding-top: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* NOTE: deliberately NOT using -webkit-overflow-scrolling: touch — on iOS Safari
     it traps the tiles' position:fixed tooltips inside the scroller and clips them
     ("cut off / stuck on scroll"). Modern iOS has native momentum scroll anyway. */
  scrollbar-width: none;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-carousel::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .lcr-sbr-page-v1 .lcr-sbr-similar-carousel { overflow: visible; }
}
.lcr-sbr-page-v1 .lcr-sbr-similar-tile {
  position: relative;            /* anchor for the Clever overhang tab */
  scroll-snap-align: start;
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  background: var(--lcr-white);
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-card);
}
@media (min-width: 1024px) {
  .lcr-sbr-page-v1 .lcr-sbr-similar-tile { flex: 1 1 0%; }
}
.lcr-sbr-page-v1 .lcr-sbr-similar-tile--clever {
  border: 2px solid var(--lcr-blue);
  /* Top edge is provided by the overhang tab, so square the top corners and
     drop the top border — tab + card then read as one continuous outline. */
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Overhang tab — sits ABOVE the Clever card (absolute, bottom:100%) so the
   card body keeps the same dimensions as the non-ribboned tiles. The carousel
   reserves top padding for it (see .lcr-sbr-similar-carousel) so it isn't
   clipped by the mobile horizontal-scroll container. */
.lcr-sbr-page-v1 .lcr-sbr-similar-ribbon {
  position: absolute;
  bottom: 100%;
  left: -2px;                     /* span the card's full outer width (over the 2px side borders) */
  right: -2px;
  margin-bottom: -1px;            /* tuck 1px into the card top so there's no hairline seam */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--lcr-blue);
  color: #FFF;
  font-size: 13px;                /* match directory ribbon label (bumped from 11px) */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 16px;
  border-radius: var(--lcr-radius-card) var(--lcr-radius-card) 0 0;  /* match card's 12px top */
}
.lcr-sbr-page-v1 .lcr-sbr-similar-ribbon-icon { flex-shrink: 0; width: 16px; height: 16px; }  /* match directory ribbon icon */
.lcr-sbr-page-v1 .lcr-sbr-similar-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  padding: 20px;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: center;
  margin-bottom: 12px;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--lcr-dark);
  margin-bottom: 2px;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-type {
  font-size: 14px;
  color: var(--lcr-muted);
  display: inline-block;
  margin-bottom: 12px;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-rating-num { font-size: 16px; font-weight: 700; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-similar-rating .lcr-stars { font-size: 14px; }
.lcr-sbr-page-v1 .lcr-sbr-similar-fee-wrap { margin-bottom: 16px; }
.lcr-sbr-page-v1 .lcr-sbr-similar-fee {
  background: var(--lcr-surface-subtle);
  border-radius: var(--lcr-radius-btn);
  padding: 8px 12px;
  text-align: center;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-fee-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--lcr-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-fee-value { font-size: 16px; font-weight: 700; color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-similar-ctas {
  margin-top: auto;       /* push CTAs to the bottom so they align across tiles */
  align-self: stretch;    /* keep full-width CTAs under the body's align-items:center */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-cta-primary {
  display: block;
  text-align: center;
  background: var(--lcr-blue);
  color: #FFF;
  font-size: 15px;
  font-weight: 600;
  padding: 10px;
  border-radius: var(--lcr-radius-btn);
  transition: background-color 0.15s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-cta-primary:hover { background: var(--lcr-blue-hover); color: #FFF; }
.lcr-sbr-page-v1 .lcr-sbr-similar-cta-primary--clever { background: var(--lcr-green); }
.lcr-sbr-page-v1 .lcr-sbr-similar-cta-primary--clever:hover { background: var(--lcr-green-hover); color: #FFF; }
.lcr-sbr-page-v1 .lcr-sbr-similar-cta-secondary {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--lcr-muted);
  transition: color 0.15s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-cta-secondary:hover { color: var(--lcr-blue); }
/* Invisible stand-in for an absent secondary link — same line height (13px)
   so the primary CTA stays aligned across tiles. */
.lcr-sbr-page-v1 .lcr-sbr-similar-cta-spacer {
  display: block;
  text-align: center;
  font-size: 13px;
  visibility: hidden;
}

/* Floating arrows (tablet 768–1023px only; mobile is swipe-only, desktop is static columns) */
.lcr-sbr-page-v1 .lcr-sbr-similar-arrow {
  position: absolute;
  top: 0;                 /* JS vertically centers on the carousel */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lcr-white);
  border: 1px solid var(--lcr-border);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lcr-dark);
  cursor: pointer;
  transition: opacity 0.15s ease;
  z-index: 5;
}
.lcr-sbr-page-v1 .lcr-sbr-similar-arrow--prev { left: 8px; }
.lcr-sbr-page-v1 .lcr-sbr-similar-arrow--next { right: 8px; }
.lcr-sbr-page-v1 .lcr-sbr-similar-arrow.lcr-disabled { opacity: 0.4; pointer-events: none; }
@media (max-width: 767px) {
  .lcr-sbr-page-v1 .lcr-sbr-similar-arrow { display: none; }
}
@media (min-width: 1024px) {
  .lcr-sbr-page-v1 .lcr-sbr-similar-arrow { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 5 — Rating scale viz ("How does {company} compare?")
   ══════════════════════════════════════════════════════════════════════════ */
.lcr-sbr-page-v1 .lcr-sbr-rating {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 10px 40px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-rating { padding: 0 24px 40px; }
}
.lcr-sbr-page-v1 .lcr-sbr-rating-card {
  /* UNBOXED (Hannah's call): the rating-scale viz sits on the page, no card. */
  padding: 0;
}
.lcr-sbr-page-v1 .lcr-sbr-rating .lcr-sbr-section-title { margin-bottom: 4px; }
.lcr-sbr-page-v1 .lcr-sbr-rating-subtext {
  font-size: 16px;            /* match regular body text (expert take / directory .lcr-intro-p) */
  color: #4B5563;             /* gray-600 */
  line-height: 1.625;
  margin: 0 0 20px;
}
.lcr-sbr-page-v1 .lcr-sbr-rating-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--lcr-muted);
  margin-bottom: 8px;
}
/* Gradient + marker geometry copied verbatim from the mockup
   (sbr-hometiva-preview.html .rating-gradient-bar). The gradient stops are
   viz-specific decorative colors — intentionally not tokenized. */
.lcr-sbr-page-v1 .lcr-sbr-rating-bar {
  background: linear-gradient(to right, #E8F2FE 0%, #E8F2FE 33.333%, #de775a 33.333%, #e7ca55 65%, #49db4e 96.667%, #E8F2FE 96.667%);
  height: 10px;
  border-radius: var(--lcr-radius-pill);
  position: relative;
  overflow: visible;
  margin-bottom: 88px; /* room for the score badge that hangs below the bar */
}
.lcr-sbr-page-v1 .lcr-sbr-rating-marker {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lcr-sbr-page-v1 .lcr-sbr-rating-marker-stem {
  width: 2px;
  height: 12px;
  background: var(--lcr-dark);
}
/* Production-style score badge: bold white value in a solid blue circle
   (mirrors overall_rating_shortcode.php's .overall-rating span). */
.lcr-sbr-page-v1 .lcr-sbr-rating-value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--lcr-radius-pill);
  background: var(--lcr-blue);
  color: var(--lcr-white);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}
.lcr-sbr-page-v1 .lcr-sbr-rating-band {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--lcr-muted);
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--lcr-border);
}
/* Mobile: keep the qualitative band (Ben's note) but shrink it so the four
   labels fit without crowding. */
@media (max-width: 767px) {
  .lcr-sbr-page-v1 .lcr-sbr-rating-band { font-size: 11px; margin-top: 16px; gap: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 6 — Our expert take (recommendation callout)
   ══════════════════════════════════════════════════════════════════════════ */
.lcr-sbr-page-v1 .lcr-sbr-expert {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 10px 40px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-expert { padding: 0 24px 40px; }
}
.lcr-sbr-page-v1 .lcr-sbr-expert .lcr-sbr-section-title { margin-bottom: 16px; }
/* De-boxed expert take (Hannah's call): plain directory-style body copy
   (matches .lcr-intro-p on the LCR directory — 16px / gray-600 / 1.625) with
   the tier as an inline tag in the heading (production "Our expert take:
   Top-rated" pattern). */
.lcr-sbr-page-v1 .lcr-sbr-expert-tag {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--lcr-font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  padding: 4px 12px;
  border-radius: var(--lcr-radius-pill);
}
/* Shared tier-tag palette — used by both the hero card badge (.lcr-sbr-hero-badge)
   and the expert-take tag (.lcr-sbr-expert-tag) via lcr_sbr_callout_tag_class(),
   so a tier reads the same color everywhere. Production-aligned, cleaned up
   (bg = color at ~19% alpha). */
.lcr-sbr-page-v1 .lcr-sbr-tag--top-rated         { color: #26B42F; background: #26B42F30; }
.lcr-sbr-page-v1 .lcr-sbr-tag--recommended       { color: #60B988; background: #60B98830; }
.lcr-sbr-page-v1 .lcr-sbr-tag--worth-considering { color: #9DB960; background: #9DB96030; }
.lcr-sbr-page-v1 .lcr-sbr-tag--decent-value      { color: #C8902A; background: #C8902A30; }
.lcr-sbr-page-v1 .lcr-sbr-tag--mixed-value       { color: #FFA500; background: #FFA50030; }
.lcr-sbr-page-v1 .lcr-sbr-tag--default           { color: #808080; background: #80808030; }
.lcr-sbr-page-v1 .lcr-sbr-expert-blurb {
  font-size: 16px;
  color: #4B5563;            /* match directory .lcr-intro-p (gray-600) */
  line-height: 1.625;
  margin: 0 0 12px;
}
.lcr-sbr-page-v1 .lcr-sbr-expert-blurb:last-of-type { margin-bottom: 16px; }
.lcr-sbr-page-v1 .lcr-sbr-expert-blurb strong { font-weight: 600; color: #4B5563; }  /* directory keeps strong gray-600; also guards Bricks strong{font-weight:500} */
/* "Be sure to interview…" tip box — production's lightbulb .textbox.has-icon
   pattern (faint-blue fill, thin blue border, icon column + text). */
.lcr-sbr-page-v1 .lcr-sbr-expert-tip {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: center;
  /* Match the "Where available" panel: soft light-blue fill, no border. */
  background: var(--lcr-highlight-tint);
  border-radius: var(--lcr-radius-card);
  padding: 20px;
}
.lcr-sbr-page-v1 .lcr-sbr-expert-tip-icon { display: flex; color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-expert-tip-icon svg { width: 32px; height: 32px; }
.lcr-sbr-page-v1 .lcr-sbr-expert-tip-text {
  font-size: 16px;
  color: #4B5563;            /* match directory .lcr-intro-p (gray-600) */
  line-height: 1.625;
  margin: 0;
}
.lcr-sbr-page-v1 .lcr-sbr-expert-cta {
  font-weight: 600;
  color: var(--lcr-blue);
  text-decoration: none;     /* arrow stays attached via &nbsp; in the markup */
}
.lcr-sbr-page-v1 .lcr-sbr-expert-cta:hover { color: var(--lcr-blue-hover); }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 7 — Detailed scoring breakdown (accordions)
   ══════════════════════════════════════════════════════════════════════════ */
.lcr-sbr-page-v1 .lcr-sbr-scoring {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 10px 40px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-scoring { padding: 0 24px 40px; }
}
.lcr-sbr-page-v1 .lcr-sbr-scoring .lcr-sbr-section-title { margin-bottom: 16px; }

/* Accordion shell */
.lcr-sbr-page-v1 .lcr-sbr-acc {
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-card);
  margin-bottom: 12px;
  overflow: hidden;
}
.lcr-sbr-page-v1 .lcr-sbr-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  background: var(--lcr-white);
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.lcr-sbr-page-v1 .lcr-sbr-acc-head:hover { background: var(--lcr-surface-subtle); }
.lcr-sbr-page-v1 .lcr-sbr-acc-title { font-size: 16px; font-weight: 600; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-acc-meta { display: flex; align-items: center; gap: 12px; }
.lcr-sbr-page-v1 .lcr-sbr-acc-score { font-size: 18px; font-weight: 700; color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-acc-meta .lcr-stars { font-size: 14px; }
.lcr-sbr-page-v1 .lcr-sbr-acc-chevron { flex-shrink: 0; color: var(--lcr-muted); transition: transform 0.3s ease; }
.lcr-sbr-page-v1 .lcr-sbr-acc--open .lcr-sbr-acc-chevron { transform: rotate(180deg); }
.lcr-sbr-page-v1 .lcr-sbr-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.lcr-sbr-page-v1 .lcr-sbr-acc--open .lcr-sbr-acc-body { max-height: 5000px; }
.lcr-sbr-page-v1 .lcr-sbr-acc-inner {
  padding: 4px 20px 24px;
  border-top: 1px solid var(--lcr-border);
}

/* Key metrics strip */
.lcr-sbr-page-v1 .lcr-sbr-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 24px;
  background: var(--lcr-highlight-tint);                       /* tinted panel instead of per-cell boxes (Ashley) */
  border-radius: var(--lcr-radius-card);
  padding: 12px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lcr-sbr-page-v1 .lcr-sbr-metric {
  padding: 12px;
  text-align: center;
}
/* Mobile: left-justify the 2-col metric cells to mirror Ashley's mock (desktop 4-col stays centered).
   Parent class included so this wins over the later `.lcr-sbr-tr-vital { text-align:center }` base rule. */
@media (max-width: 767px) {
  .lcr-sbr-page-v1 .lcr-sbr-metrics .lcr-sbr-metric,
  .lcr-sbr-page-v1 .lcr-sbr-tr-vitals .lcr-sbr-tr-vital { text-align: left; }
}
.lcr-sbr-page-v1 .lcr-sbr-metric-value { font-size: 18px; font-weight: 700; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-metric-label { font-size: 13px; color: var(--lcr-muted); margin-top: 2px; }
.lcr-sbr-page-v1 .lcr-sbr-metric-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 6px;
  border-radius: var(--lcr-radius-badge);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent; /* reserve space so all polarities match size; neutral fills it in */
}
.lcr-sbr-page-v1 .lcr-sbr-metric-badge--good {
  background: var(--lcr-sentiment-positive-bg);
  color: var(--lcr-sentiment-positive-text);
}
.lcr-sbr-page-v1 .lcr-sbr-metric-badge--caution {
  background: var(--lcr-sentiment-negative-bg);
  color: var(--lcr-sentiment-negative-text);
}
.lcr-sbr-page-v1 .lcr-sbr-metric-badge--neutral {
  background: var(--lcr-white);
  color: var(--lcr-muted);
  border-color: var(--lcr-border);
}
/* Badge as its own tooltip trigger (cursor:help via .lcr-tip-wrap). */
.lcr-sbr-page-v1 .lcr-sbr-metric-badge-wrap { margin-top: 6px; }
.lcr-sbr-page-v1 .lcr-sbr-metric-badge-wrap .lcr-sbr-metric-badge { margin-top: 0; }

/* AI Review Summary — UNBOXED (Hannah's call): the summary prose sits directly on
   the accordion surface (the blue eyebrow label is the marker) instead of inside a
   light-blue box. Reserves boxes for data objects and restores section rhythm;
   mirrors the de-boxed "Our expert take". */
.lcr-sbr-page-v1 .lcr-sbr-ai-summary {
  padding: 0;
  margin: 16px 0 20px; /* top gap matters when it's the first body element (7b); collapses with the metrics strip in 7a */
}
.lcr-sbr-page-v1 .lcr-sbr-ai-summary-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.lcr-sbr-page-v1 .lcr-sbr-ai-summary-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--lcr-blue);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.lcr-sbr-page-v1 .lcr-sbr-ai-summary-text { font-size: 16px; color: var(--lcr-dark); line-height: 1.625; margin: 0; } /* matches .lcr-sbr-expert-blurb */
.lcr-sbr-page-v1 .lcr-sbr-ai-summary-text + .lcr-sbr-ai-summary-text { margin-top: 12px; }
/* Sectioned variant: shortcode-driven blurbs (7a customer-experience, 7d
   track-record). The partial renders one <p> per section: a leading Lucide
   icon + a <span> wrapping the bolded label + body. Flex keeps the icon as a
   fixed-width gutter while the body wraps freely under itself. */
.lcr-sbr-page-v1 .lcr-sbr-ai-summary-text--sectioned p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
}
.lcr-sbr-page-v1 .lcr-sbr-ai-summary-text--sectioned p:last-child { margin-bottom: 0; }
.lcr-sbr-page-v1 .lcr-sbr-section-icon { flex-shrink: 0; color: var(--lcr-blue); margin-top: 4px; }
.lcr-sbr-page-v1 .lcr-sbr-section-body { flex: 1 1 auto; }
/* Blurb labels ("Customer score", "Overall rating", etc.) are <strong>; the harness
   renders them at the default bold (700), but Bricks' front_css.css sets strong{font-weight:500}.
   Pin 700 to restore the harness weight (scoped rule beats Bricks' plain `strong` on specificity). */
.lcr-sbr-page-v1 .lcr-sbr-section-body strong { font-weight: 700; }
/* De-emphasized sample-size/confidence line under the sentiment overview. */
.lcr-sbr-page-v1 .lcr-sbr-ai-summary-confidence {
  font-size: 14px;
  font-style: italic;
  color: var(--lcr-muted);
  line-height: 1.5;
  margin: 10px 0 0;
}

/* Desktop: nudge up the small supporting text (metric labels + badges, and the
   Review Summary eyebrow) — they read too small on wide viewports. */
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-metric-label { font-size: 14px; }
  .lcr-sbr-page-v1 .lcr-sbr-metric-badge { font-size: 13px; }
  .lcr-sbr-page-v1 .lcr-sbr-ai-summary-eyebrow { font-size: 14px; }
  .lcr-sbr-page-v1 .lcr-sbr-svc-col-title { font-size: 14px; }
}

/* "What customers talk about" — theme bars + inline detail */
.lcr-sbr-page-v1 .lcr-sbr-themes-title { font-size: 16px; font-weight: 600; color: var(--lcr-dark); margin: 0 0 4px; }
.lcr-sbr-page-v1 .lcr-sbr-themes-sub { font-size: 14px; color: var(--lcr-muted); margin: 0 0 12px; }
.lcr-sbr-page-v1 .lcr-sbr-themes-empty {
  font-size: 14px;
  color: var(--lcr-muted);
  background: var(--lcr-surface-subtle);
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  padding: 16px;
  margin: 12px 0 0;
}
.lcr-sbr-page-v1 .lcr-sbr-themes { margin-bottom: 4px; }
.lcr-sbr-page-v1 .lcr-sbr-themes-divider { border-top: 1px dashed var(--lcr-border); margin: 10px 0; }

.lcr-sbr-page-v1 .lcr-sbr-theme-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s;
}
.lcr-sbr-page-v1 .lcr-sbr-theme-row:hover { background: var(--lcr-surface-subtle); }
.lcr-sbr-page-v1 .lcr-sbr-theme--open .lcr-sbr-theme-row { background: var(--lcr-blue-light); }
.lcr-sbr-page-v1 .lcr-sbr-theme--neg.lcr-sbr-theme--open .lcr-sbr-theme-row { background: #FEF9EE; }

/* flex-basis:0 so the name starts at 0 for the wrap calc — keeps the % and chevron on
   line 1 (the name then grows to fill); with flex-wrap, a content-width basis would push
   the chevron onto its own line on mobile. min-width:0 lets the label wrap inside it. */
.lcr-sbr-page-v1 .lcr-sbr-theme-name { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; color: var(--lcr-dark); }
/* negative theme name stays dark (matches the positive rows); amber is carried only by the icon + bar */
.lcr-sbr-page-v1 .lcr-sbr-theme-icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-theme--neg .lcr-sbr-theme-icon { color: #D97706; }
.lcr-sbr-page-v1 .lcr-sbr-theme-track {
  flex: 1 1 100%;
  order: 3;
  height: 8px;
  background: #F3F4F6;
  border-radius: var(--lcr-radius-pill);
  overflow: hidden;
}
.lcr-sbr-page-v1 .lcr-sbr-theme-bar { display: block; height: 100%; min-width: 2px; border-radius: var(--lcr-radius-pill); background: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-theme--neg .lcr-sbr-theme-bar { background: #D97706; }
.lcr-sbr-page-v1 .lcr-sbr-theme-pct { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--lcr-dark); }
/* negative theme % stays dark (matches the positive rows) */
.lcr-sbr-page-v1 .lcr-sbr-theme-chevron { display: block; flex: 0 0 auto; color: var(--lcr-muted); transition: transform 0.2s ease; }
.lcr-sbr-page-v1 .lcr-sbr-theme--open .lcr-sbr-theme-chevron { transform: rotate(180deg); }
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-theme-row { flex-wrap: nowrap; }
  .lcr-sbr-page-v1 .lcr-sbr-theme-name { flex: 0 0 220px; }  /* widened from 180px so 16px names stay on one line */
  .lcr-sbr-page-v1 .lcr-sbr-theme-track { flex: 1 1 auto; order: 0; height: 24px; }
  .lcr-sbr-page-v1 .lcr-sbr-theme-pct { width: 48px; text-align: right; }
}

/* Inline detail panel (narrative + quote cards) */
.lcr-sbr-page-v1 .lcr-sbr-theme-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-theme--open .lcr-sbr-theme-detail { max-height: 1000px; opacity: 1; }
.lcr-sbr-page-v1 .lcr-sbr-theme-detail-inner {
  margin: 8px 0;
  padding: 16px 20px;
  background: var(--lcr-white);
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
}
.lcr-sbr-page-v1 .lcr-sbr-theme-narrative { font-size: 16px; color: var(--lcr-dark); line-height: 1.625; margin: 0 0 12px; }
.lcr-sbr-page-v1 .lcr-sbr-theme-quotes-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--lcr-muted);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin: 0 0 8px;
}
.lcr-sbr-page-v1 .lcr-sbr-theme-quotes { display: flex; flex-direction: column; gap: 8px; }
.lcr-sbr-page-v1 .lcr-sbr-quote {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--lcr-dark);
  text-decoration: none;
  background: var(--lcr-white);
  border: 1px solid var(--lcr-border);
  border-left: 3px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  transition: border-color 0.15s, background 0.15s;
}
.lcr-sbr-page-v1 a.lcr-sbr-quote:hover { border-left-color: var(--lcr-blue); background: var(--lcr-blue-light); }
.lcr-sbr-page-v1 .lcr-sbr-theme--neg a.lcr-sbr-quote:hover { border-left-color: #D97706; background: #FEF9EE; color: #D97706; }
.lcr-sbr-page-v1 .lcr-sbr-quote-text { display: block; }
.lcr-sbr-page-v1 .lcr-sbr-quote-source {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lcr-muted);
  transition: color 0.15s;
}
.lcr-sbr-page-v1 a.lcr-sbr-quote:hover .lcr-sbr-quote-source { color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-theme--neg a.lcr-sbr-quote:hover .lcr-sbr-quote-source { color: #D97706; }
/* Mobile has no hover, so show the quote-card highlight by default — the same
   light-blue (positive) / amber (negative) treatment the desktop :hover gives. */
@media (max-width: 767px) {
  .lcr-sbr-page-v1 .lcr-sbr-quote { border-left-color: var(--lcr-blue); background: var(--lcr-blue-light); }
  .lcr-sbr-page-v1 .lcr-sbr-theme--neg .lcr-sbr-quote { border-left-color: #D97706; background: #FEF9EE; }
  .lcr-sbr-page-v1 .lcr-sbr-quote-source { color: var(--lcr-blue); }
}

/* ── Section 7b — Pricing & Fees: fee breakdown table + cost calculator ── */
.lcr-sbr-page-v1 .lcr-sbr-fee-table-wrap {
  margin-top: 16px;
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  overflow: hidden;
}
.lcr-sbr-page-v1 .lcr-sbr-fee-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lcr-sbr-page-v1 .lcr-sbr-fee-table tr + tr td { border-top: 1px solid var(--lcr-border); }
.lcr-sbr-page-v1 .lcr-sbr-fee-label {
  width: 50%;
  padding: 12px 16px;
  font-size: 16px;                           /* match body text (Hannah) */
  font-weight: 600;
  color: var(--lcr-dark);
  vertical-align: top;
}
.lcr-sbr-page-v1 .lcr-sbr-fee-value {
  padding: 12px 16px;
  font-size: 16px;                           /* match body text (Hannah) */
  color: var(--lcr-dark);
  vertical-align: top;
}
.lcr-sbr-page-v1 .lcr-sbr-fee-value ul { margin: 0; padding-left: 18px; list-style: disc; }
.lcr-sbr-page-v1 .lcr-sbr-fee-value li { margin-bottom: 4px; line-height: 1.4; }
.lcr-sbr-page-v1 .lcr-sbr-fee-value li:last-child { margin-bottom: 0; }
.lcr-sbr-page-v1 .lcr-sbr-fee-value { overflow-wrap: break-word; } /* safety net for wide values */
/* Phone widths: the fixed 50/50 column split is too narrow for price ranges like
   "$300K - $500K: $3,995". Stack each row vertically — label on top (smaller
   eyebrow style), value below at full width. */
@media (max-width: 640px) {
  .lcr-sbr-page-v1 .lcr-sbr-fee-table,
  .lcr-sbr-page-v1 .lcr-sbr-fee-table tbody,
  .lcr-sbr-page-v1 .lcr-sbr-fee-table tr,
  .lcr-sbr-page-v1 .lcr-sbr-fee-label,
  .lcr-sbr-page-v1 .lcr-sbr-fee-value { display: block; width: auto; }
  .lcr-sbr-page-v1 .lcr-sbr-fee-table tr { padding: 12px 16px; }
  .lcr-sbr-page-v1 .lcr-sbr-fee-table tr + tr { border-top: 1px solid var(--lcr-border); }
  .lcr-sbr-page-v1 .lcr-sbr-fee-table tr + tr td { border-top: 0; }
  .lcr-sbr-page-v1 .lcr-sbr-fee-label,
  .lcr-sbr-page-v1 .lcr-sbr-fee-value { padding: 0; font-size: 16px; }
  .lcr-sbr-page-v1 .lcr-sbr-fee-label { margin-bottom: 6px; font-size: 16px; }
}

/* Services breakdown (7c) */
.lcr-sbr-page-v1 .lcr-sbr-svc {
  margin-top: 16px;
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  overflow: hidden;
}
.lcr-sbr-page-v1 .lcr-sbr-svc-col { padding: 16px; }
.lcr-sbr-page-v1 .lcr-sbr-svc-col + .lcr-sbr-svc-col { border-top: 1px solid var(--lcr-border); }
.lcr-sbr-page-v1 .lcr-sbr-svc-col-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lcr-border);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lcr-dark);
}
.lcr-sbr-page-v1 .lcr-sbr-svc-col-title .lcr-tip-wrap { display: inline-flex; align-items: center; gap: 4px; }
.lcr-sbr-page-v1 .lcr-sbr-svc-col-title .lcr-tip { text-transform: none; font-weight: 400; }
.lcr-sbr-page-v1 .lcr-sbr-svc-col--premium .lcr-sbr-svc-col-title { color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-svc-info { flex-shrink: 0; color: var(--lcr-muted); }
.lcr-sbr-page-v1 .lcr-sbr-svc-col--premium .lcr-sbr-svc-info { color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-svc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-svc-list { grid-template-columns: 1fr 1fr; }
}
.lcr-sbr-page-v1 .lcr-sbr-svc-item { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-svc-icon { flex-shrink: 0; }
.lcr-sbr-page-v1 .lcr-sbr-svc-icon--included { color: var(--lcr-green); }
.lcr-sbr-page-v1 .lcr-sbr-svc-icon--unverified { color: var(--lcr-muted); }
.lcr-sbr-page-v1 .lcr-sbr-svc-icon--not_included { color: #DC2626; }
/* Icon legend */
.lcr-sbr-page-v1 .lcr-sbr-svc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 12px 16px;
  border-top: 1px solid var(--lcr-border);
  background: var(--lcr-surface-subtle);
}
.lcr-sbr-page-v1 .lcr-sbr-svc-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--lcr-muted); }

/* Cost calculator */
.lcr-sbr-page-v1 .lcr-sbr-calc {
  margin-top: 16px;
  padding: 20px;
  background: var(--lcr-highlight-tint);            /* unified highlight tint */
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
}
.lcr-sbr-page-v1 .lcr-sbr-calc-title { font-size: 16px; font-weight: 600; color: var(--lcr-dark); margin: 0 0 4px; }
.lcr-sbr-page-v1 .lcr-sbr-calc-sub { font-size: 14px; color: var(--lcr-muted); margin: 0 0 12px; }
.lcr-sbr-page-v1 .lcr-sbr-calc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lcr-sbr-page-v1 .lcr-sbr-calc-input-wrap { position: relative; flex: 0 0 150px; max-width: none; }
.lcr-sbr-page-v1 .lcr-sbr-calc-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 500;
  color: var(--lcr-muted);
}
.lcr-sbr-page-v1 .lcr-sbr-calc-input {
  width: 100%;
  height: 40px;                 /* fixed height (like the personalize input) defeats Bricks' input{line-height:40px} inflation so it matches the button */
  box-sizing: border-box;
  padding: 10px 12px 10px 26px;
  font-family: var(--lcr-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--lcr-dark);
  background: var(--lcr-white);
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  transition: border-color 0.15s;
}
.lcr-sbr-page-v1 .lcr-sbr-calc-input:focus { outline: none; border-color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-calc--error .lcr-sbr-calc-input { border-color: #DC2626; }
.lcr-sbr-page-v1 .lcr-sbr-calc-submit {
  flex: 0 0 150px;               /* match the input box width (both 150px) */
  height: 40px;                  /* match the input height (personalize pattern: fixed 40px + border-box) */
  box-sizing: border-box;
  display: inline-flex;          /* center the label in the now-fixed 150x40 box (both axes) */
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: var(--lcr-font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--lcr-white);
  background: var(--lcr-green);
  border: 0;
  border-radius: var(--lcr-radius-btn);
  cursor: pointer;
  transition: background 0.15s;
}
.lcr-sbr-page-v1 .lcr-sbr-calc-submit:hover { background: var(--lcr-green-hover); }
.lcr-sbr-page-v1 .lcr-sbr-calc-error { display: none; margin: 8px 0 0; font-size: 14px; color: #DC2626; }
.lcr-sbr-page-v1 .lcr-sbr-calc--error .lcr-sbr-calc-error { display: block; }
.lcr-sbr-page-v1 .lcr-sbr-calc-result {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--lcr-border);
  font-size: 15px;
  line-height: 1.6;
  color: var(--lcr-dark);
}
.lcr-sbr-page-v1 .lcr-sbr-calc-result strong { font-weight: 700; }
.lcr-sbr-page-v1 .lcr-sbr-calc-clever {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lcr-dark);
}
.lcr-sbr-page-v1 .lcr-sbr-calc-clever strong { font-weight: 700; }
.lcr-sbr-page-v1 .lcr-sbr-calc-clever-icon { color: var(--lcr-blue); vertical-align: -3px; margin-right: 6px; }
.lcr-sbr-page-v1 .lcr-sbr-calc-clever-link {
  color: var(--lcr-blue);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lcr-sbr-page-v1 .lcr-sbr-calc-clever-link:hover { text-decoration: underline; }

/* ── Section 7d — Track Record: rating-consistency tiles + online presence ── */
.lcr-sbr-page-v1 .lcr-sbr-tr-box {
  margin-top: 16px;
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  overflow: hidden;
  background: #FFF;
}
.lcr-sbr-page-v1 .lcr-sbr-tr-box-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--lcr-highlight-tint);            /* unified highlight tint */
  border-bottom: 1px solid var(--lcr-border);
}
.lcr-sbr-page-v1 .lcr-sbr-tr-box-eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lcr-dark);
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-tr-box-eyebrow { font-size: 14px; }
}
/* Activity Snapshot — CX-style metrics on a single tinted panel (de-boxed), polarity badges per cell */
/* Activity Snapshot — bare tinted metric panel at the TOP of the drawer (mirrors Customer Experience). */
.lcr-sbr-page-v1 .lcr-sbr-tr-vitals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  margin: 12px 0 24px;                       /* same rhythm as .lcr-sbr-metrics */
  background: var(--lcr-highlight-tint);                       /* tinted panel instead of per-cell boxes (Ashley) */
  border-radius: var(--lcr-radius-card);
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-tr-vitals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lcr-sbr-page-v1 .lcr-sbr-tr-vital {
  padding: 12px;
  text-align: center;
}
.lcr-sbr-page-v1 .lcr-sbr-tr-vital-value { font-size: 18px; font-weight: 700; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-tr-vital-label { font-size: 13px; color: var(--lcr-muted); margin-top: 2px; }
.lcr-sbr-page-v1 .lcr-sbr-tr-vital-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--lcr-radius-badge);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent; /* reserve space so all polarities match size; neutral fills it in */
}
.lcr-sbr-page-v1 .lcr-sbr-tr-vital-badge--good    { background: var(--lcr-sentiment-positive-bg); color: var(--lcr-sentiment-positive-text); }
.lcr-sbr-page-v1 .lcr-sbr-tr-vital-badge--caution { background: var(--lcr-sentiment-negative-bg); color: var(--lcr-sentiment-negative-text); }
.lcr-sbr-page-v1 .lcr-sbr-tr-vital-badge--neutral { background: var(--lcr-white); color: var(--lcr-muted); border-color: var(--lcr-border); }
.lcr-sbr-page-v1 .lcr-sbr-tr-vital-badge-wrap { display: inline-block; margin-top: 6px; }
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-tr-vital-label { font-size: 14px; }
  .lcr-sbr-page-v1 .lcr-sbr-tr-vital-badge { font-size: 13px; }
}
/* Online Presence — per-platform bars */
.lcr-sbr-page-v1 .lcr-sbr-tr-platforms { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.lcr-sbr-page-v1 .lcr-sbr-tr-platform-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.lcr-sbr-page-v1 .lcr-sbr-tr-platform-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--lcr-dark);
  text-decoration: none;
}
.lcr-sbr-page-v1 a.lcr-sbr-tr-platform-name:hover { color: var(--lcr-blue); text-decoration: underline; }
.lcr-sbr-page-v1 .lcr-sbr-tr-ext { flex-shrink: 0; color: currentColor; }
.lcr-sbr-page-v1 .lcr-sbr-tr-platform-meta { font-size: 14px; font-weight: 600; color: var(--lcr-blue); white-space: nowrap; }
.lcr-sbr-page-v1 .lcr-sbr-tr-bar-track {
  width: 100%;
  height: 8px;
  background: var(--lcr-border);
  border-radius: 999px;
  overflow: hidden;
}
.lcr-sbr-page-v1 .lcr-sbr-tr-bar { height: 100%; background: var(--lcr-blue); border-radius: 999px; }

/* ── Section 9 — Competitor comparison table (pivoted layout) ─────────────
   Row labels in a left "head" column, vertical company cards stacked
   side-by-side on the right. CSS Grid + subgrid forces every cell in a given
   attribute row to share the same height across head + all cards. ───────── */
.lcr-sbr-page-v1 .lcr-sbr-compare {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 10px 40px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-compare { padding: 0 24px 40px; }
}
.lcr-sbr-page-v1 .lcr-sbr-compare .lcr-sbr-section-title { margin-bottom: 28px; }
.lcr-sbr-page-v1 .lcr-sbr-compare-wrap {
  position: relative;
}
/* Scroll container. Desktop: a transparent pass-through (the inner card body
   does its own scrolling). Mobile: becomes the horizontal scroller for the
   whole table so the sticky Company column pins to it (see the ≤767px block). */
.lcr-sbr-page-v1 .lcr-sbr-compare-scroller {
  display: block;
  overflow-x: auto;   /* scrolls when the grid overflows; head pins via position:sticky */
}
/* Production-style flex layout: head is a fixed-width column on the left;
   body is a horizontally-scrollable flex row of vertical company cards.
   Both head and body stretch to the same height via the parent's default
   align-items: stretch, and each container uses justify-content: space-between
   to distribute its 6 cells — mirrors lwc-sand's `.table-flip` rules. */
.lcr-sbr-page-v1 .lcr-sbr-compare-grid {
  /* Robust row alignment via subgrid: this grid owns the 6 attribute rows; the
     head column and every card subgrid those same row tracks, so each row's cells
     all take the tallest cell's height — head labels stay aligned with their data
     regardless of content/theme text metrics (replaces the fragile flex +
     space-between/min-height trick). The ≤767px block overrides to display:table. */
  display: grid;
  grid-template-columns: 160px;
  grid-auto-columns: minmax(200px, 260px);
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
}
.lcr-sbr-page-v1 .lcr-sbr-compare-head {
  grid-column: 1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;     /* share the grid's 6 row tracks */
  position: sticky;                /* pin the label column during horizontal scroll */
  left: 0;
  z-index: 2;
  background: #FFF;
  color: var(--lcr-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-head-cell {
  padding: 18px 16px 18px 0;
  text-align: left;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-body {
  display: contents;   /* cards become direct grid items so they can subgrid the shared rows */
}
.lcr-sbr-page-v1 .lcr-sbr-compare-card {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;     /* share the grid's 6 row tracks → aligns with the head */
  grid-template-columns: minmax(0, 1fr);  /* fill the card width so cells stretch & content centers (else the implicit auto column shrinks to content and pins left, drifting dividers off-center) */
  position: relative;
  border-left: 1px solid var(--lcr-border);
  background: #FFF;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-card--self {
  border: 2px solid var(--lcr-blue);
  border-radius: var(--lcr-radius-card);
}
/* Ribbon sits flush with the top of the self card, inner-radius matches the
   card's outer radius minus the 2px border so it looks like part of the tile. */
.lcr-sbr-page-v1 .lcr-sbr-compare-ribbon {
  position: absolute;
  top: 0; left: 0; right: 0;
  text-align: center;
  background: var(--lcr-blue);
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 0;
  border-top-left-radius: calc(var(--lcr-radius-card) - 2px);
  border-top-right-radius: calc(var(--lcr-radius-card) - 2px);
  z-index: 1;
}
/* Give the self card's first cell extra top padding so the ribbon doesn't sit
   on top of the logo. (Under the flex layout this makes the self card's first
   cell taller than peers; that minor row-drift is accepted, as in production.) */
.lcr-sbr-page-v1 .lcr-sbr-compare-card--self .lcr-sbr-compare-cell-company {
  padding-top: 36px;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-cell {
  padding: 18px 16px;
  border-bottom: 1px solid var(--lcr-border);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-cell:last-child { border-bottom: 0; }
.lcr-sbr-page-v1 .lcr-sbr-compare-card--self .lcr-sbr-compare-cell { border-bottom-color: var(--lcr-border); }

/* Logo + name (top cell) */
.lcr-sbr-page-v1 .lcr-sbr-compare-cell-company { gap: 8px; }
.lcr-sbr-page-v1 .lcr-sbr-compare-logo {
  height: 40px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--lcr-blue-light);
  color: var(--lcr-blue);
  font-weight: 700;
  font-size: 16px;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-name { font-size: 14px; font-weight: 600; color: var(--lcr-dark); }

/* Rating cluster: big number + 5-star widget + small callout */
.lcr-sbr-page-v1 .lcr-sbr-compare-rating-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--lcr-dark);
  line-height: 1;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-stars {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--lcr-border);
  font-family: serif; /* nicer star glyph rendering */
}
.lcr-sbr-page-v1 .lcr-sbr-compare-stars-fill {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  width: calc(var(--rating) / 5 * 100%);
  color: #F5A623;
  white-space: nowrap;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-callout {
  font-size: 12px;
  color: var(--lcr-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-cell-value { font-size: 15px; color: var(--lcr-dark); font-weight: 500; }

/* CTA cell — anchor primary button to a fixed top position so the row of
   buttons lines up across all cards (secondary link sits below). */
.lcr-sbr-page-v1 .lcr-sbr-compare-cta-cell {
  justify-content: flex-start;
  padding-top: 18px;
  gap: 8px;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 150px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--lcr-radius-btn);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-cta-button--visit { background: var(--lcr-green); color: #FFF; }
.lcr-sbr-page-v1 .lcr-sbr-compare-cta-button--visit:hover { background: var(--lcr-green-hover); color: #FFF; }
.lcr-sbr-page-v1 .lcr-sbr-compare-cta-button--read  { background: var(--lcr-blue);  color: #FFF; }
.lcr-sbr-page-v1 .lcr-sbr-compare-cta-button--read:hover  { background: var(--lcr-blue-hover); color: #FFF; }
.lcr-sbr-page-v1 .lcr-sbr-compare-cta-subtext {
  font-size: 13px;
  color: var(--lcr-blue);
  font-weight: 500;
  text-decoration: none;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-cta-subtext:hover { text-decoration: underline; }

/* Horizontal-scroll hint for the card body. initCompareScroll (script-view.js)
   adds .is-scrollable to .lcr-sbr-compare-wrap when the body overflows and
   .at-end once it's scrolled to the right edge; the fade + chevron show only
   while scrollable AND not at the end. Progressive enhancement — no JS means no
   hint, the body still scrolls normally. The fade sits over the body's right
   edge (the head is on the left, so it isn't covered). */
.lcr-sbr-page-v1 .lcr-sbr-compare-fade {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFF);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-scroll-next {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--lcr-border);
  background: #FFF;
  color: var(--lcr-blue);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.15s ease;
  z-index: 3;
}
.lcr-sbr-page-v1 .lcr-sbr-compare-scroll-next:hover { background: var(--lcr-blue-light); }
.lcr-sbr-page-v1 .lcr-sbr-compare-scroll-next svg { width: 20px; height: 20px; }
.lcr-sbr-page-v1 .lcr-sbr-compare-wrap.is-scrollable:not(.at-end) .lcr-sbr-compare-fade { opacity: 1; }
.lcr-sbr-page-v1 .lcr-sbr-compare-wrap.is-scrollable:not(.at-end) .lcr-sbr-compare-scroll-next {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop (≥768px) — align each attribute label with the vertical middle of its
   row. The head and every card are top-stacked (flex-start) and share the same
   per-row heights (the natural content maxima), so head label i and card cell i
   occupy the same vertical band → their centres line up. Without this the head's
   even space-between distribution drifts against the cards' content-sized cells
   (labels rode ~40-60px too high up top). If a company's content exceeds a row's
   height (e.g. a very long name/fee that wraps), only that one card drifts below
   that row — the head and other cards stay aligned. */
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-compare-head { justify-content: flex-start; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-card { justify-content: flex-start; }
  /* Per-row min-heights are CONTENT-box values just large enough for each row's
     content (NOT border-box — padding is added on top). Sized to restore the
     table's original compact height while keeping head + cards on shared rows. */
  .lcr-sbr-page-v1 .lcr-sbr-compare-head-cell:nth-child(1),
  .lcr-sbr-page-v1 .lcr-sbr-compare-card .lcr-sbr-compare-cell:nth-child(1) { min-height: 70px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-head-cell:nth-child(2),
  .lcr-sbr-page-v1 .lcr-sbr-compare-card .lcr-sbr-compare-cell:nth-child(2) { min-height: 64px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-head-cell:nth-child(3),
  .lcr-sbr-page-v1 .lcr-sbr-compare-card .lcr-sbr-compare-cell:nth-child(3) { min-height: 28px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-head-cell:nth-child(4),
  .lcr-sbr-page-v1 .lcr-sbr-compare-card .lcr-sbr-compare-cell:nth-child(4) { min-height: 24px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-head-cell:nth-child(5),
  .lcr-sbr-page-v1 .lcr-sbr-compare-card .lcr-sbr-compare-cell:nth-child(5) { min-height: 24px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-head-cell:nth-child(6),
  .lcr-sbr-page-v1 .lcr-sbr-compare-card .lcr-sbr-compare-cell:nth-child(6) { min-height: 64px; }
  /* Reserve the "This company" ribbon's space on EVERY first cell (head label +
     all cards), not just the self card — otherwise the self card's company cell
     is 18px taller and the whole self column drifts down a row. Uniform → all
     row-1 cells share a height → labels stay aligned. */
  .lcr-sbr-page-v1 .lcr-sbr-compare-head-cell:nth-child(1),
  .lcr-sbr-page-v1 .lcr-sbr-compare-cell-company { padding-top: 36px; }
}

/* Mobile (≤767px) — undo the desktop "flip" and render a standard table, the
   way production does on small screens: the attribute labels become a header
   row across the top, each company is a horizontal row, the Company column is
   sticky-pinned on the left, and the whole table scrolls horizontally inside
   .lcr-sbr-compare-scroller. Cell order is unchanged, so this is a pure CSS
   display-swap (grid→table, body→contents, head/cards→rows, cells→table-cell). */
@media (max-width: 767px) {
  /* The scroller becomes the horizontal scroll container; the fade + chevron
     stay in .lcr-sbr-compare-wrap (outside it) so they don't scroll away. */
  .lcr-sbr-page-v1 .lcr-sbr-compare-scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lcr-sbr-page-v1 .lcr-sbr-compare-grid { display: table; width: 100%; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-body { display: contents; }

  /* Labels → header row across the top. Tighter columns + smaller type than
     desktop so more fit per phone screen. */
  .lcr-sbr-page-v1 .lcr-sbr-compare-head { display: table-row; flex: none; position: static; background: none; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-head-cell {
    display: table-cell;
    min-width: 80px;
    padding: 10px 8px;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    white-space: normal;     /* allow labels to wrap so columns can be narrow */
    border-bottom: 1px solid var(--lcr-border);
  }

  /* Each company → a horizontal row. */
  .lcr-sbr-page-v1 .lcr-sbr-compare-card {
    display: table-row;
    flex: none;
    min-width: 0;
    max-width: none;
    border-left: 0;
    background: transparent;
  }
  .lcr-sbr-page-v1 .lcr-sbr-compare-card--self { border: 0; border-radius: 0; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-cell {
    display: table-cell;
    min-width: 80px;
    padding: 10px 8px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--lcr-border);
    border-left: 0;
  }
  /* Row separators: every cell underlines (override the desktop last-cell reset);
     the last company row drops its underline. */
  .lcr-sbr-page-v1 .lcr-sbr-compare-cell:last-child { border-bottom: 1px solid var(--lcr-border); }
  .lcr-sbr-page-v1 .lcr-sbr-compare-card:last-child .lcr-sbr-compare-cell { border-bottom: 0; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-card--self .lcr-sbr-compare-cell { border-bottom-color: var(--lcr-border); }

  /* Sticky Company column — header + every row's first cell pin to the left.
     A soft shadow on the right edge lets the scrolling columns fade under the
     pinned column instead of being cut off with a hard line. */
  .lcr-sbr-page-v1 .lcr-sbr-compare-head-cell:first-child,
  .lcr-sbr-page-v1 .lcr-sbr-compare-cell-company {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    min-width: 104px;
    background: #FFF;
    box-shadow: 8px 0 8px -6px rgba(15, 23, 42, 0.18);
  }
  .lcr-sbr-page-v1 .lcr-sbr-compare-head-cell:first-child {
    font-size: 0;            /* hide the "Company" header label (production does too) */
    z-index: 3;
  }
  .lcr-sbr-page-v1 .lcr-sbr-compare-cell-company { padding: 10px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-card--self .lcr-sbr-compare-cell-company {
    background: var(--lcr-highlight-tint);       /* unified highlight tint */
    padding-top: 28px;       /* clear the ribbon (bumped from 24px when ribbon went 9px→11px) */
  }

  /* Ribbon now lives inside the (positioned) sticky Company cell → pins with it.
     Small tag at top-left with rounded bottom corners, like production. */
  .lcr-sbr-page-v1 .lcr-sbr-compare-ribbon {
    right: auto;
    padding: 3px 8px;
    font-size: 11px;
    white-space: nowrap;       /* keep "This company" on ONE line so it doesn't wrap past the 24px clearance and cut off the logo */
    border-radius: 0 0 4px 4px;
  }

  /* CTA cell — stack the primary button over the secondary subtext, centered. */
  .lcr-sbr-page-v1 .lcr-sbr-compare-cta-cell { padding: 10px 8px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-cta-button { display: flex; margin: 0 auto; font-size: 13px; padding: 6px 10px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-cta-subtext { display: block; text-align: center; margin-top: 5px; font-size: 11px; }

  /* Shrink the in-cell content so the narrower columns stay legible. */
  .lcr-sbr-page-v1 .lcr-sbr-compare-logo { height: 28px; max-width: 76px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-name { font-size: 12px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-rating-num { font-size: 16px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-stars { font-size: 12px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-callout { font-size: 12px; }
  .lcr-sbr-page-v1 .lcr-sbr-compare-cell-value { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 10a — Customer reviews (platform table + rating distribution)
   ══════════════════════════════════════════════════════════════════════════ */
.lcr-sbr-page-v1 .lcr-sbr-reviews {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 10px 40px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-reviews { padding: 0 24px 40px; }
}
.lcr-sbr-page-v1 .lcr-sbr-reviews .lcr-sbr-section-title { margin-bottom: 16px; }

/* Two cards stacked on mobile, side-by-side on desktop. The table gets a bit
   more room than the distribution (≈3:2). A lone card (company with only
   profiles or only a distribution) fills the row via flex-grow. */
.lcr-sbr-page-v1 .lcr-sbr-reviews-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.lcr-sbr-page-v1 .lcr-sbr-reviews-grid > .lcr-sbr-reviews-platforms-card,
.lcr-sbr-page-v1 .lcr-sbr-reviews-grid > .lcr-sbr-reviews-dist-card { margin-bottom: 0; }
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-reviews-grid { flex-direction: row; align-items: flex-start; gap: 24px; }
  .lcr-sbr-page-v1 .lcr-sbr-reviews-grid > .lcr-sbr-reviews-platforms-card { flex: 3 1 0; }
  .lcr-sbr-page-v1 .lcr-sbr-reviews-grid > .lcr-sbr-reviews-dist-card { flex: 2 1 0; }
}

/* ── Card 1: review platforms as cards — an Overall summary tile + one card per
   platform. No table columns, so long platform names ("Redfin East/Central FL")
   wrap freely and nothing is clipped on narrow screens. ──────────────────── */
.lcr-sbr-page-v1 .lcr-sbr-reviews-platforms-card {
  border: 0;                                 /* de-box: drop the outer frame (Ashley); inner platform cards stay */
  background: transparent;
  padding: 0;
}
/* Overall summary tile (blue-light, mirrors the directory's review stat tiles) */
.lcr-sbr-page-v1 .lcr-sbr-reviews-overall-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--lcr-highlight-tint);            /* unified highlight tint */
  border-radius: var(--lcr-radius-btn);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.lcr-sbr-page-v1 .lcr-sbr-reviews-overall-tile-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--lcr-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lcr-sbr-page-v1 .lcr-sbr-reviews-overall-tile-rating { display: flex; align-items: center; gap: 6px; }
.lcr-sbr-page-v1 .lcr-sbr-reviews-overall-tile-num { font-size: 20px; font-weight: 700; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-reviews-overall-tile-count { font-size: 14px; color: var(--lcr-muted); }

/* Per-platform cards */
.lcr-sbr-page-v1 .lcr-sbr-reviews-platform-list { display: flex; flex-direction: column; gap: 8px; }
.lcr-sbr-page-v1 .lcr-sbr-reviews-platform-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  padding: 10px 12px;
}
.lcr-sbr-page-v1 .lcr-sbr-reviews-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--lcr-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* Linked platforms render as a fully clickable card (the whole card is an <a>):
   pointer cursor, hover/focus highlight, and an external-link icon by the name
   so it's unmistakable the card navigates out to the platform. */
.lcr-sbr-page-v1 a.lcr-sbr-reviews-platform-card--link {
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.lcr-sbr-page-v1 a.lcr-sbr-reviews-platform-card--link:hover,
.lcr-sbr-page-v1 a.lcr-sbr-reviews-platform-card--link:focus-visible {
  border-color: var(--lcr-blue);
  background: var(--lcr-blue-light);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.lcr-sbr-page-v1 a.lcr-sbr-reviews-platform-card--link:focus-visible { outline: 2px solid var(--lcr-blue); outline-offset: 2px; }
.lcr-sbr-page-v1 .lcr-sbr-reviews-platform-name-wrap { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lcr-sbr-page-v1 .lcr-sbr-reviews-platform-name { font-weight: 500; font-size: 14px; color: var(--lcr-dark); }
.lcr-sbr-page-v1 a.lcr-sbr-reviews-platform-card--link .lcr-sbr-reviews-platform-name { color: var(--lcr-blue); }
.lcr-sbr-page-v1 a.lcr-sbr-reviews-platform-card--link:hover .lcr-sbr-reviews-platform-name { text-decoration: underline; }
.lcr-sbr-page-v1 .lcr-sbr-reviews-extlink-icon { width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; flex-shrink: 0; color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-reviews-platform-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.lcr-sbr-page-v1 .lcr-sbr-reviews-platform-rating { display: flex; align-items: center; gap: 5px; }
.lcr-sbr-page-v1 .lcr-sbr-reviews-rating-val { font-weight: 600; color: var(--lcr-dark); font-size: 14px; }
.lcr-sbr-page-v1 .lcr-sbr-reviews-platform-count { font-size: 14px; color: var(--lcr-muted); }
.lcr-sbr-page-v1 .lcr-sbr-reviews-stars { font-size: 11px; }

/* ── Card 2: rating distribution bars ───────────────────────────────────── */
.lcr-sbr-page-v1 .lcr-sbr-reviews-dist-card {
  border: 0;                                 /* de-box: drop the outer frame (Ashley) */
  background: transparent;
  padding: 0;
  margin-bottom: 24px;
}
.lcr-sbr-page-v1 .lcr-sbr-reviews-dist-title {
  /* Match the "Overall rating" tile-label eyebrow on the platforms card. This is
     an eyebrow LABEL, not a section heading, so it takes the directory's body/label
     font (Poppins). Bricks forces h1-h6 to Rubik with !important, which beats any
     plain rule regardless of specificity — so !important is required here to win.
     (Section titles are left as Bricks' Rubik, matching the directory's headings.) */
  font-family: var(--lcr-font-sans) !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--lcr-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.lcr-sbr-page-v1 .lcr-sbr-reviews-dist-rows { display: flex; flex-direction: column; gap: 8px; }
.lcr-sbr-page-v1 .lcr-sbr-reviews-dist-row { display: flex; align-items: center; gap: 12px; }
.lcr-sbr-page-v1 .lcr-sbr-reviews-dist-label {
  width: 50px;
  flex-shrink: 0;
  text-align: right;
  font-size: 14px;
  color: var(--lcr-dark);
}
.lcr-sbr-page-v1 .lcr-sbr-reviews-dist-track {
  flex: 1 1 auto;
  height: 16px;
  background: #F3F4F6;
  border-radius: 999px;
  overflow: hidden;
}
.lcr-sbr-page-v1 .lcr-sbr-reviews-dist-fill { display: block; height: 100%; background: var(--lcr-blue); border-radius: 999px; }
.lcr-sbr-page-v1 .lcr-sbr-reviews-dist-pct {
  width: 42px;
  flex-shrink: 0;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--lcr-dark);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 10b — "What N reviewers talk about" (transaction-type donut +
   per-segment top-theme cards)
   ══════════════════════════════════════════════════════════════════════════ */
.lcr-sbr-page-v1 .lcr-sbr-sentiment {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 10px 40px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-sentiment { padding: 0 24px 40px; }
}
.lcr-sbr-page-v1 .lcr-sbr-sentiment .lcr-sbr-section-title { margin-bottom: 24px; }  /* a bit more gap before the legend/donut now that the card is unboxed */
.lcr-sbr-page-v1 .lcr-sbr-sentiment-card {
  /* UNBOXED (Hannah's call): the donut + legend + theme grid sit on the page —
     the boxed theme cards (which hold the review quotes) stay as the boxes,
     creating boxed-vs-unboxed contrast. */
  padding: 0;
}

/* ── Donut + clickable legend ───────────────────────────────────────────── */
.lcr-sbr-page-v1 .lcr-sbr-sentiment-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-sentiment-top { flex-direction: row-reverse; gap: 32px; align-items: center; }  /* donut on the right, legend on the left (desktop) */
}
.lcr-sbr-page-v1 .lcr-sbr-donut {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lcr-sbr-page-v1 .lcr-sbr-donut-hole {
  position: absolute;
  inset: 26px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lcr-sbr-page-v1 .lcr-sbr-donut-count { font-size: 20px; font-weight: 700; color: var(--lcr-dark); line-height: 1.1; }
.lcr-sbr-page-v1 .lcr-sbr-donut-label { font-size: 14px; color: var(--lcr-muted); }
/* Brief "pop" when the donut recolors on segment select (conic-gradient itself
   can't transition, so a quick scale gives the change a tactile feel). */
@keyframes lcr-sbr-donut-pop { 0% { transform: scale(0.94); } 100% { transform: scale(1); } }
.lcr-sbr-page-v1 .lcr-sbr-donut.is-pulsing { animation: lcr-sbr-donut-pop 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .lcr-sbr-page-v1 .lcr-sbr-donut.is-pulsing { animation: none; }
}

.lcr-sbr-page-v1 .lcr-sbr-sentiment-legend { flex: 1 1 auto; min-width: 0; }
.lcr-sbr-page-v1 .lcr-sbr-sentiment-legend-title { font-size: 15px; font-weight: 600; color: var(--lcr-dark); margin: 0 0 12px; }
@media (max-width: 767px) {
  .lcr-sbr-page-v1 .lcr-sbr-sentiment-legend-title { text-align: center; }
}
.lcr-sbr-page-v1 .lcr-sbr-seg-buttons { display: flex; flex-direction: column; gap: 6px; }
.lcr-sbr-page-v1 .lcr-sbr-seg-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--lcr-radius-btn);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-seg-btn:hover { background: #F9FAFB; }
.lcr-sbr-page-v1 .lcr-sbr-seg-btn.is-active { background: #F3F4F6; border-color: var(--lcr-border); }
.lcr-sbr-page-v1 .lcr-sbr-seg-btn:focus-visible { outline: 2px solid var(--lcr-blue); outline-offset: 2px; }
.lcr-sbr-page-v1 .lcr-sbr-seg-swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.lcr-sbr-page-v1 .lcr-sbr-seg-name { font-size: 15px; color: var(--lcr-dark); font-weight: 500; }
.lcr-sbr-page-v1 .lcr-sbr-seg-btn.is-active .lcr-sbr-seg-name { font-weight: 600; }
.lcr-sbr-page-v1 .lcr-sbr-seg-count { font-size: 14px; color: var(--lcr-muted); margin-left: auto; }
.lcr-sbr-page-v1 .lcr-sbr-seg-pct { font-size: 13px; font-weight: 600; color: var(--lcr-dark); min-width: 36px; text-align: right; }
.lcr-sbr-page-v1 .lcr-sbr-seg-hint { font-size: 14px; color: var(--lcr-muted); margin: 12px 0 0; }

/* ── Per-segment theme cards ────────────────────────────────────────────── */
.lcr-sbr-page-v1 .lcr-sbr-sentiment-themes { border-top: 1px solid var(--lcr-border); margin-top: 20px; padding-top: 20px; }
/* Fallback (no donut) — no divider needed since there's nothing above it. */
.lcr-sbr-page-v1 .lcr-sbr-sentiment-themes--solo { border-top: 0; margin-top: 0; padding-top: 0; }
.lcr-sbr-page-v1 .lcr-sbr-seg-themes-heading { font-size: 16px; font-weight: 600; color: var(--lcr-dark); margin: 0 0 12px; }
.lcr-sbr-page-v1 .lcr-sbr-seg-grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lcr-sbr-page-v1 .lcr-sbr-seg-grid.is-active { display: grid; }
@media (max-width: 767px) {
  .lcr-sbr-page-v1 .lcr-sbr-seg-grid.is-active { grid-template-columns: 1fr; }
}
.lcr-sbr-page-v1 .lcr-sbr-theme-card {
  border: 1px solid var(--lcr-border);
  border-radius: var(--lcr-radius-btn);
  background: var(--lcr-blue-light);   /* SEMANTIC: positive-sentiment tint, parallels the negative variant's amber (#FEF9EE) — the white quote box sits on top */
  padding: 12px;
}
/* Negative theme → amber card (instead of the light-blue positive card), matching
   the negative-theme accent (#D97706) used elsewhere in the sentiment section. */
.lcr-sbr-page-v1 .lcr-sbr-theme-card--neg { background: #FEF9EE; border-color: #FDE68A; }
.lcr-sbr-page-v1 .lcr-sbr-theme-card--neg .lcr-sbr-theme-card-icon,
.lcr-sbr-page-v1 .lcr-sbr-theme-card--neg .lcr-sbr-theme-icon,
.lcr-sbr-page-v1 .lcr-sbr-theme-card--neg .lcr-sbr-theme-card-pct { color: #D97706; }
.lcr-sbr-page-v1 .lcr-sbr-theme-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.lcr-sbr-page-v1 .lcr-sbr-theme-card-icon { color: var(--lcr-blue); display: inline-flex; flex-shrink: 0; }
.lcr-sbr-page-v1 .lcr-sbr-theme-card-icon svg { width: 16px; height: 16px; }
.lcr-sbr-page-v1 .lcr-sbr-theme-card-name { font-size: 15px; font-weight: 600; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-theme-card-pct { font-size: 18px; font-weight: 700; color: var(--lcr-blue); margin-bottom: 8px; }
.lcr-sbr-page-v1 .lcr-sbr-theme-quote {
  background: #fff;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 15px;
  color: var(--lcr-dark);
  line-height: 1.5;
}
.lcr-sbr-page-v1 .lcr-sbr-theme-quote-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--lcr-dark);
  text-decoration: none;
}
.lcr-sbr-page-v1 .lcr-sbr-theme-quote-link:hover { text-decoration: underline; }
.lcr-sbr-page-v1 .lcr-sbr-theme-quote-arrow { width: 12px; height: 12px; flex-shrink: 0; }

/* Per-segment insight line (swapped by the segment-switch JS). Box tint is
   sentiment-coded (Hannah): positive = light blue, neutral = grey, negative =
   amber. The --polarity modifier is set in PHP and re-applied by the JS on
   segment switch; the base keeps a neutral fallback if no modifier is present. */
.lcr-sbr-page-v1 .lcr-sbr-seg-insight {
  margin: 16px 0 0;
  background: #F3F4F6;            /* neutral fallback */
  border-radius: var(--lcr-radius-btn);
  padding: 12px 14px;
  font-size: 15px;
  color: var(--lcr-dark);
  line-height: 1.5;
}
.lcr-sbr-page-v1 .lcr-sbr-seg-insight--positive { background: #E8F2FE; }  /* light blue (matches positive theme cards) */
.lcr-sbr-page-v1 .lcr-sbr-seg-insight--neutral  { background: #F3F4F6; }  /* grey */
.lcr-sbr-page-v1 .lcr-sbr-seg-insight--negative { background: #FEF9EE; }  /* amber (matches negative theme cards) */

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 11 — FAQ accordion
   ══════════════════════════════════════════════════════════════════════════ */
.lcr-sbr-page-v1 .lcr-sbr-faq {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 10px 40px;
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-faq { padding: 0 24px 40px; }
}
.lcr-sbr-page-v1 .lcr-sbr-faq .lcr-sbr-section-title { margin-bottom: 16px; }
.lcr-sbr-page-v1 .lcr-sbr-faq-list { max-width: 672px; border-top: 1px solid var(--lcr-border); }

.lcr-sbr-page-v1 .lcr-sbr-faq-item { border-bottom: 1px solid var(--lcr-border); }
.lcr-sbr-page-v1 .lcr-sbr-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.lcr-sbr-page-v1 .lcr-sbr-faq-q-text { font-size: 16px; font-weight: 600; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-faq-chev {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--lcr-muted);
  transition: transform 0.2s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-faq-item.is-open .lcr-sbr-faq-chev { transform: rotate(180deg); }

.lcr-sbr-page-v1 .lcr-sbr-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner { padding: 0 0 18px; font-size: 16px; line-height: 1.625; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner > :first-child { margin-top: 0; }
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner > :last-child { margin-bottom: 0; }
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner p { margin: 0 0 12px; }
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner ol,
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner ul { margin: 0 0 12px; padding-left: 22px; }
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner li { margin-bottom: 8px; }
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner li::marker { color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner strong { font-weight: 600; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner a { color: var(--lcr-blue); text-decoration: none; transition: color 0.15s ease; }
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner a:hover { color: var(--lcr-blue-hover); }
/* Bolded text inside a link follows the link color, not the dark <strong> color. */
.lcr-sbr-page-v1 .lcr-sbr-faq-a-inner a strong { color: inherit; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 11b — Related guides ("Explore more ways to sell your house")
   Styles the [related] shortcode output (.related-post / .related-image / …).
   ══════════════════════════════════════════════════════════════════════════ */
/* Aligns to the .lcr-sbr-main content column (these sections live outside <main>).
   max-width = content width (same box as <main>); the 44px horizontal padding =
   main's 20px wrapper + the section's own 24px, so inner content lines up with the
   in-<main> sections. NOTE: this was 1096px to match the content-box OUTER box, but
   Bricks renders border-box on live (max-width IS the box) — 1096 shifted the box
   24px in and pushed content right. content-w + 44px aligns under border-box. */
.lcr-sbr-page-v1 .lcr-sbr-related {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 4vw 40px;   /* mobile gutter = 4vw, matches production + the in-<main> sections */
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-related { padding: 0 44px 40px; }
}
.lcr-sbr-page-v1 .lcr-sbr-related .lcr-sbr-section-title { margin-bottom: 24px; }
.lcr-sbr-page-v1 .lcr-sbr-related-list .related-posts { display: flex; flex-direction: column; gap: 24px; }
.lcr-sbr-page-v1 .lcr-sbr-related-list .related-post { display: flex; align-items: flex-start; justify-content: flex-start; gap: 16px; text-decoration: none; }
/* The site ships global critical CSS for the shortcode's classes:
   .related-post{justify-content:space-between} .related-image{width:45%} .related-info{width:52%}.
   Left un-neutralized, the 140px image + 52% info + space-between spread the leftover
   width into a big gap between thumbnail and text. justify-content:flex-start (above) and
   letting .related-info grow to fill the row (below) close that gap — matching how the
   LCR Directory renders the same [related] output. */
.lcr-sbr-page-v1 .lcr-sbr-related-list .related-info { flex: 1 1 auto; min-width: 0; }
.lcr-sbr-page-v1 .lcr-sbr-related-list .related-image {
  flex-shrink: 0;
  width: 140px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
}
.lcr-sbr-page-v1 .lcr-sbr-related-list .related-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lcr-sbr-page-v1 .lcr-sbr-related-list .related-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--lcr-dark);
  margin: 0 0 4px;
  transition: color 0.15s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-related-list .related-post:hover .related-title { color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-related-list .related-excerpt { font-size: 16px; color: #4B5563; line-height: 1.6; }
@media (max-width: 640px) {
  .lcr-sbr-page-v1 .lcr-sbr-related-list .related-title { font-size: 14px; }
  .lcr-sbr-page-v1 .lcr-sbr-related-list .related-excerpt { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS 11c/11d — Methodology + Author (shared prose)
   ══════════════════════════════════════════════════════════════════════════ */
/* Align to the .lcr-sbr-main content column (live outside <main>) — see note above. */
.lcr-sbr-page-v1 .lcr-sbr-methodology,
.lcr-sbr-page-v1 .lcr-sbr-author {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 4vw 40px;   /* mobile gutter = 4vw, matches production + the in-<main> sections */
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-methodology,
  .lcr-sbr-page-v1 .lcr-sbr-author { padding: 0 44px 40px; }
}
.lcr-sbr-page-v1 .lcr-sbr-methodology .lcr-sbr-section-title { max-width: 672px; margin-bottom: 16px; }
.lcr-sbr-page-v1 .lcr-sbr-author-heading {
  max-width: 672px;
  border-top: 1px solid var(--lcr-border);
  padding-top: 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--lcr-dark);
  margin: 0 0 12px;
}

.lcr-sbr-page-v1 .lcr-sbr-prose { max-width: 672px; font-size: 16px; line-height: 1.6; color: #4B5563; }
.lcr-sbr-page-v1 .lcr-sbr-prose > :first-child { margin-top: 0; }
.lcr-sbr-page-v1 .lcr-sbr-prose > :last-child { margin-bottom: 0; }
.lcr-sbr-page-v1 .lcr-sbr-prose p { margin: 0 0 16px; }
.lcr-sbr-page-v1 .lcr-sbr-prose h3 { font-size: 16px; font-weight: 600; color: var(--lcr-dark); margin: 32px 0 12px; }
.lcr-sbr-page-v1 .lcr-sbr-prose ol,
.lcr-sbr-page-v1 .lcr-sbr-prose ul { margin: 0 0 16px; padding-left: 22px; }
.lcr-sbr-page-v1 .lcr-sbr-prose li { margin-bottom: 8px; }
.lcr-sbr-page-v1 .lcr-sbr-prose li::marker { color: var(--lcr-blue); }
.lcr-sbr-page-v1 .lcr-sbr-prose strong { font-weight: 600; color: var(--lcr-dark); }
.lcr-sbr-page-v1 .lcr-sbr-prose a { color: var(--lcr-blue); text-decoration: none; transition: color 0.15s ease; }
.lcr-sbr-page-v1 .lcr-sbr-prose a:hover { color: var(--lcr-blue-hover); }
.lcr-sbr-page-v1 .lcr-sbr-prose a strong { color: inherit; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 12 — Bottom CTA (#startmsf — page-wide funnel target)
   ══════════════════════════════════════════════════════════════════════════ */
/* Align to the .lcr-sbr-main content column (lives outside <main>) — see note above. */
.lcr-sbr-page-v1 .lcr-sbr-cta {
  max-width: var(--lcr-content-w);
  margin: 0 auto;
  padding: 0 4vw 40px;   /* mobile gutter = 4vw, matches production + the in-<main> sections */
}
@media (min-width: 768px) {
  .lcr-sbr-page-v1 .lcr-sbr-cta { padding: 0 44px 40px; }
}
.lcr-sbr-page-v1 .lcr-sbr-cta-panel {
  background: var(--lcr-blue);
  border-radius: var(--lcr-radius-card);
  padding: 32px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 117, 235, 0.18);
}
.lcr-sbr-page-v1 .lcr-sbr-cta-heading { font-size: 22px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.lcr-sbr-page-v1 .lcr-sbr-cta-sub { font-size: 15px; color: rgba(255, 255, 255, 0.8); margin: 0 auto 24px; max-width: 28rem; }
/* flex-direction/background/padding/border-radius explicitly set to override the
   site's global .zipFormOffersCta funnel CSS (gray box, 50px padding, column stack),
   which the harness stubs out — restores the harness's compact side-by-side form. */
.lcr-sbr-page-v1 .lcr-sbr-cta-form { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; max-width: 24rem; margin: 0 auto; background: transparent; padding: 0; border-radius: 0; }
.lcr-sbr-page-v1 .lcr-sbr-cta-zip {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: var(--lcr-radius-btn);
  padding: 12px 16px;
  font-size: 14px;
  line-height: normal;   /* override Bricks' input{line-height:40px} that inflated the field to ~64px */
  color: var(--lcr-dark);
  background: #fff;
}
.lcr-sbr-page-v1 .lcr-sbr-cta-zip::placeholder { color: var(--lcr-muted); }
.lcr-sbr-page-v1 .lcr-sbr-cta-zip:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.lcr-sbr-page-v1 .lcr-sbr-cta-btn {
  flex-shrink: 0;
  background: var(--lcr-green);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--lcr-radius-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.lcr-sbr-page-v1 .lcr-sbr-cta-btn:hover { background: var(--lcr-green-hover); }
/* Small phones: stack the form so the ZIP input gets full width (the "Enter ZIP
   code" placeholder was getting clipped when input + button shared one row). */
@media (max-width: 480px) {
  .lcr-sbr-page-v1 .lcr-sbr-cta-form { flex-direction: column; align-items: stretch; }
  .lcr-sbr-page-v1 .lcr-sbr-cta-btn { width: 100%; }
}

/* Reassurance chips */
.lcr-sbr-page-v1 .lcr-sbr-cta-chips { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.lcr-sbr-page-v1 .lcr-sbr-cta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 4px 12px;
}
.lcr-sbr-page-v1 .lcr-sbr-cta-chip svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Satisfaction-guarantee footnote */
.lcr-sbr-page-v1 .lcr-sbr-cta-guarantee {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 36rem;
  margin: 20px auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 16px;
}