/* =====================================================================
   CashHouseSales.com — PILOT PRODUCTION STYLESHEET  (/css/styles.css)
   Santa Maria reference implementation · AI-3 · 2026-08-11
   Mobile-first, zero-JS core UI, shared sitewide tokens.
   ===================================================================== */

:root {
  /* Brand identity — darkened only enough to make white text accessible. */
  --brand-blue: #075985;
  --brand-cyan: #007C91;
  --brand-white: #FFFFFF;

  --text-dark: #1F2D3D;
  --text-muted: #6B7280;
  --border: #CBD5E1;
  --surface: #F8FAFC;
  --surface-accent: #EAF7FA;

  --cta-color: #006B7A;
  --cta-color-hover: #005F73;
  --cta-text: #FFFFFF;

  --hero-gradient: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1140px;
  --contentw: 760px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --shadow-card: 0 16px 40px rgba(15, 43, 58, .14);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-dark);
  background: var(--brand-white);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a {
  color: var(--brand-blue);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}
a:hover { text-decoration-thickness: .12em; }
:focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: 3px;
}
h1, h2, h3 { line-height: 1.16; text-wrap: balance; }
h1 { font-size: clamp(2rem, 8vw, 3.55rem); }
h2 { font-size: clamp(1.55rem, 5vw, 2.25rem); margin-top: 0; }
h3 { font-size: clamp(1.12rem, 3.5vw, 1.3rem); }
p, li { max-width: 72ch; }

/* ---- Skip link ---- */
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  transform: translateY(-180%);
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--text-dark);
  color: #fff;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

/* ---- Header / zero-JS checkbox navigation ---- */
.site-header {
  position: relative;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .5rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .35rem .75rem;
}
.logo {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  width: fit-content;
}
.logo img { width: min(160px, 45vw); height: auto; }
.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav-toggle-label {
  grid-row: 1;
  grid-column: 2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dark);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}
.nav-toggle-label::after { content: " +"; margin-left: .25rem; color: var(--brand-cyan); }
.nav-toggle-input:checked + .nav-toggle-label::after { content: " −"; }
.nav-toggle-input:focus-visible + .nav-toggle-label {
  outline: 3px solid var(--brand-cyan);
  outline-offset: 3px;
}
.main-nav {
  grid-row: 3;
  grid-column: 1 / -1;
  display: none;
  width: 100%;
  padding: .45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.nav-toggle-input:checked ~ .main-nav { display: block; }
.main-nav ul { display: grid; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: .55rem .7rem;
  border-radius: 7px;
  color: var(--text-dark);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
}
.main-nav a:hover, .main-nav a:focus-visible { background: var(--surface-accent); }
.header-cta {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
}
.phone-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  font-size: .92rem;
  font-weight: 800;
  text-decoration: none;
}
.header-cta .btn { width: 100%; padding-left: .65rem; padding-right: .65rem; font-size: .92rem; }

/* ---- Buttons ---- */
.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .78rem 1.15rem;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.btn-cta { background: var(--cta-color); color: var(--cta-text); }
.btn-cta:hover { background: var(--cta-color-hover); }

/* ---- Breadcrumb ---- */
.breadcrumb {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .75rem 1rem;
  color: var(--text-muted);
  font-size: .9rem;
}
.breadcrumb a { color: var(--brand-blue); }
.breadcrumb [aria-current="page"] { font-weight: 700; color: var(--text-dark); }

/* ---- Hero ---- */
.hero {
  background: var(--hero-gradient);
  color: #fff;
  padding: clamp(2.4rem, 8vw, 4.75rem) 1rem;
  display: grid;
  gap: 2rem;
}
.hero-content { max-width: 680px; margin: 0 auto; }.hero h1,
.why-choose-us-page .hero .why-hero-bridge { margin: 0 0 1rem; color: #fff; }
.hero-subhead { margin: 0; max-width: 60ch; font-size: clamp(1.05rem, 3vw, 1.18rem); }
.hero-image {
  width: 100%;
  margin-top: 1.5rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 14px 30px rgba(0,0,0,.2);
}
.hero-form { width: 100%; max-width: 500px; margin: 0 auto; }

/* ---- Lead form ---- */
.chs-lead-form {
  width: 100%;
  max-width: 500px;
  padding: 1.25rem;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-dark);
  box-shadow: var(--shadow-card);
}
.chs-lead-form form { display: flex; flex-direction: column; gap: .25rem; }
.chs-lead-form label { margin-top: .8rem; font-size: .95rem; font-weight: 750; }
.chs-lead-form .optional { color: var(--text-muted); font-size: .86rem; font-weight: 500; }
.chs-lead-form input[type="text"],
.chs-lead-form input[type="tel"],
.chs-lead-form input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: .7rem .8rem;
  border: 1px solid #94A3B8;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-dark);
  font: inherit;
  font-size: 1rem;
}
.chs-lead-form input:focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: 2px;
  border-color: var(--brand-cyan);
}
.chs-lead-form .btn { width: 100%; margin-top: 1rem; }
.form-consent { margin: .8rem 0 0; color: var(--text-muted); font-size: .875rem; line-height: 1.5; }

/* ---- Content sections ---- */
main > section:not(.hero) { padding: clamp(2.6rem, 7vw, 4.5rem) 1rem; }
main > section:not(.hero) > * { max-width: var(--contentw); margin-left: auto; margin-right: auto; }
main > section:not(.hero) > :first-child { margin-top: 0; }
main > section:not(.hero) > :last-child { margin-bottom: 0; }
.local-intro { background: var(--surface); }
.local-intro .section-image {
  width: 100%;
  margin-top: 1.4rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.how-it-works { background: #fff; }
.how-it-works ol {
  list-style: none;
  counter-reset: chs-step;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.how-it-works li {
  counter-increment: chs-step;
  position: relative;
  padding: 1.25rem 1.15rem 1.25rem 3.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.how-it-works li::before {
  content: counter(chs-step);
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-cyan);
  color: #fff;
  font-weight: 850;
}
.situation { border-top: 1px solid #E2E8F0; }
.situation h2 { position: relative; padding-left: 1rem; }
.situation h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .08em;
  bottom: .08em;
  width: 4px;
  border-radius: 4px;
  background: var(--brand-cyan);
}
.why-us { background: var(--surface-accent); }
.why-us ul { padding-left: 1.25rem; }
.why-us li + li { margin-top: .65rem; }
.owner-image {
  width: min(100%, 520px);
  margin-top: 1.5rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.bbb-link { display: inline-block; margin-top: 1.1rem; border-radius: var(--radius-sm); }
.bbb-badge { width: 200px; height: auto; }
.faq h3 {
  margin: 2rem auto .4rem;
  padding-top: 1.2rem;
  border-top: 1px solid #E2E8F0;
}
.faq h2 + h3 { margin-top: 1rem; }
.final-cta {
  background: var(--surface-accent);
  text-align: center;
  border-top: 1px solid #CFE8EE;
}
.final-cta .chs-lead-form { margin-top: 1.4rem; text-align: left; }

/* ---- Footer ---- */
.site-footer { background: var(--brand-blue); color: #fff; padding: 2.75rem 1rem 1.25rem; }
.footer-columns {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
.footer-col h3 { margin: 0 0 .65rem; color: #fff; font-size: 1rem; }
.footer-col p { margin-top: .4rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: .35rem; }
.footer-col a, .footer-bottom a { color: #fff; }
.footer-col a { text-decoration: none; }
.footer-col a:hover, .footer-col a:focus-visible { text-decoration: underline; }
.footer-bottom {
  max-width: var(--maxw);
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.42);
  text-align: center;
  font-size: .9rem;
}
.copyright { margin: .55rem auto 0; color: #fff; opacity: 1; }

/* ---- Tablet / desktop ---- */
@media (min-width: 760px) {
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-it-works ol { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--maxw); }
  .how-it-works li { padding-left: 1.15rem; padding-top: 3.5rem; }
  .how-it-works li::before { top: 1rem; }
}

@media (min-width: 900px) {
  .header-inner { display: flex; flex-wrap: nowrap; min-height: 76px; padding: .75rem 1rem; }
  .logo { flex: 0 0 auto; justify-self: auto; }
  .nav-toggle-input, .nav-toggle-label { display: none; }
  .main-nav {
    flex: 1 1 auto;
    display: block;
    width: auto;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .main-nav ul { display: flex; align-items: center; justify-content: flex-end; gap: .15rem; }
  .main-nav a { padding: .55rem .6rem; font-size: .95rem; }
  .header-cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
  }
  .phone-link { padding: .4rem .2rem; font-size: 1rem; }
  .header-cta .btn { width: auto; padding-left: 1.15rem; padding-right: 1.15rem; font-size: 1rem; }

  .hero {
    grid-template-columns: minmax(1rem, 1fr) minmax(0, 610px) minmax(360px, 500px) minmax(1rem, 1fr);
    gap: 2.5rem;
    align-items: center;
  }
  .hero-content { grid-column: 2; width: 100%; max-width: none; margin: 0; }
  .hero-form { grid-column: 3; width: 100%; max-width: none; margin: 0; }

  .local-intro, .why-us {
    max-width: calc(var(--maxw) + 2rem);
    margin-left: auto;
    margin-right: auto;
  }
  .local-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .95fr);
    gap: 2.5rem;
    align-items: center;
  }
  .local-intro > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  .local-intro .section-image { margin-top: 0; }

  .why-us {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    column-gap: 3rem;
    align-items: start;
  }
  .why-us > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  .why-us h2 { grid-column: 1 / -1; }
  .why-us ul { grid-column: 1; grid-row: 2 / span 2; }
  .owner-image { grid-column: 2; grid-row: 2; margin-top: 0; }
  .bbb-link { grid-column: 2; grid-row: 3; }

  .footer-columns { grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Mobile header refinement — stacked logo spans both utility rows */
@media (min-width: 360px) and (max-width: 899px) {
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: .45rem;
  }

  .logo {
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: center;
  }

  .nav-toggle-label {
    grid-row: 1;
    grid-column: 3;
  }

  .header-cta {
    display: contents;
  }

  .phone-link {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    white-space: nowrap;
  }

  .header-cta .btn {
    grid-row: 2;
    grid-column: 2 / 4;
    width: 100%;
  }

  .main-nav {
    grid-row: 3;
    grid-column: 1 / -1;
  }
}

/* Mobile hero — tighter above-the-fold conversion layout */
@media (max-width: 699px) {
  .hero {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}

/* Mobile form fields — compact but touch-friendly */
@media (max-width: 699px) {
  .chs-lead-form input[type="text"],
  .chs-lead-form input[type="tel"],
  .chs-lead-form input[type="email"] {
    height: 54px;
    padding: .75rem .875rem;
    font-size: 1rem;
  }
}

/* Mobile consent — fully visible, readable, less visually dominant */
@media (max-width: 699px) {
  .form-consent-check {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: .55rem;
    align-items: start;
    margin-top: .8rem;
  }

  .form-consent-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: .15rem 0 0;
  }

  .form-consent-check label {
    margin: 0;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.45;
  }
}

/* Homepage desktop hero — LOCKED final composition */
@media (min-width: 900px) {
  .home-hero {
    grid-template-columns:
      minmax(1rem, 1fr)
      minmax(0, 460px)
      minmax(280px, 400px)
      minmax(360px, 500px)
      minmax(1rem, 1fr);
    gap: 1.5rem;
    padding-bottom: 2rem;
  }

  .home-hero .hero-content {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .home-hero::before {
    content: "";
    grid-column: 3;
    grid-row: 1;
    width: 118%;
    aspect-ratio: 1 / 1;
    align-self: start;
    justify-self: center;
    margin-top: 0;
    margin-bottom: 0;
    transform: translateY(24px);
    background:
      url("/images/kari-saul-california-cash-home-buyers.webp")
      center bottom / contain no-repeat;
    -webkit-mask-image:
      linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
    pointer-events: none;
  }

  .home-hero .hero-form {
    grid-column: 4;
    grid-row: 1;
  }
}

/* Desktop consent — fully visible, readable, less visually dominant */
@media (min-width: 900px) {
  .form-consent-check {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: .55rem;
    align-items: start;
    margin-top: .75rem;
  }

  .form-consent-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: .15rem 0 0;
  }

  .form-consent-check label {
    margin: 0;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.45;
  }
}

/* Homepage desktop hero — BBB trust module */
.home-hero-bbb {
  display: none;
}

@media (min-width: 900px) {
  .home-hero-bbb {
    display: block;
    width: min(100%, 360px);
    margin-top: 2rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  }

  .home-hero-bbb img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* Homepage — three-step section */
main > section.steps > * {
  max-width: var(--maxw);
}

.steps h2 {
  margin-bottom: 1.4rem;
}

.steps ol {
  list-style: none;
  counter-reset: chs-step;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.steps li {
  counter-increment: chs-step;
  position: relative;
  padding: 1.25rem 1.15rem 1.25rem 3.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.steps li::before {
  content: counter(chs-step);
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-cyan);
  color: #fff;
  font-weight: 850;
}

.steps > p {
  margin-top: 1.25rem;
  font-weight: 700;
}

.steps > p a {
  text-underline-offset: .2em;
}

@media (min-width: 900px) {
  .steps ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .steps li {
    padding-left: 1.15rem;
    padding-top: 3.5rem;
  }

  .steps li::before {
    top: 1rem;
  }
}

/* Homepage — steps to situations spacing */
main > section.steps {
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

main > section.steps + section.situations {
  padding-top: clamp(2.25rem, 4vw, 3rem);
}

/* Homepage — seller situations cards */
main > section.steps + section.situations > * {
  max-width: var(--maxw);
}

main > section.steps + section.situations > p {
  margin-top: .85rem;
  margin-bottom: 1.5rem;
}

main > section.steps + section.situations ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}

main > section.steps + section.situations li {
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-cyan);
  border-radius: var(--radius-md);
  background: var(--surface);
}

main > section.steps + section.situations li a {
  font-weight: 800;
  text-underline-offset: .2em;
}

@media (min-width: 900px) {
  main > section.steps + section.situations ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  main > section.steps + section.situations li {
    grid-column: span 2;
  }

  main > section.steps + section.situations li:nth-child(4) {
    grid-column: 2 / span 2;
  }

  main > section.steps + section.situations li:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

/* Homepage — situations to honest spacing */
main > section.steps + section.situations {
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

main > section.steps + section.situations + section.honest {
  padding-top: clamp(2.25rem, 4vw, 3rem);
}

/* Homepage — honesty trust band */
main > section.steps + section.situations + section.honest {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Homepage — owners trust section */
main > section.who {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

main > section.who h2 {
  position: relative;
  padding-left: 1rem;
}

main > section.who h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .08em;
  bottom: .08em;
  width: 4px;
  border-radius: 4px;
  background: var(--brand-cyan);
}

main > section.who p:last-child {
  margin-top: 1.25rem;
  font-weight: 700;
}

main > section.who p:last-child a {
  text-underline-offset: .2em;
}

/* Bakersfield city-page visual pilot — 2026-08-17 */

/* Local editorial sections */
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .local {
  position: relative;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .hero + .local {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .local h2,
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .situations h2,
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .process h2,
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .nearby h2,
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .faq h2 {
  position: relative;
  padding-bottom: .8rem;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .local h2::after,
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .situations h2::after,
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .process h2::after,
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .nearby h2::after,
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) main > .faq h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: .7rem;
  border-radius: 999px;
  background: var(--brand-cyan);
}

/* Seller situations */
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .situations {
  background: #fff;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .situations ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .85rem;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .situations li {
  position: relative;
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .situations a {
  font-weight: 800;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .situations a::after,
.situations-click-targets a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.situations-click-targets li {
  position: relative;
}

/* Process */
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .process {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .process ol {
  list-style: none;
  counter-reset: bak-step;
  padding: 0;
  display: grid;
  gap: 1rem;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .process li {
  counter-increment: bak-step;
  position: relative;
  padding: 1.15rem 1.1rem 1.15rem 3.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .process li::before {
  content: counter(bak-step);
  position: absolute;
  left: 1.05rem;
  top: 1.05rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-cyan);
  color: #fff;
  font-weight: 850;
}

/* Honest-sale trust band */
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .honest {
  background: var(--surface-accent);
  border-top: 1px solid #CFE8EE;
  border-bottom: 1px solid #CFE8EE;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .honest h2 {
  color: var(--brand-blue);
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .honest p {
  font-size: 1.05rem;
}

/* Nearby-area navigation cards — reusable city-page component */
.nearby ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.nearby li {
  margin: 0;
}

.nearby ul > li > a {
  display: block;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-weight: 750;
  text-decoration: none;
}

.nearby ul > li > a:hover,
.nearby ul > li > a:focus-visible {
  text-decoration: underline;
  border-color: var(--brand-cyan);
}

/* FAQ cards */
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq h3 {
  margin: 1rem auto 0;
  padding: 1rem 1.1rem .4rem;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: #fff;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq h2 + h3 {
  margin-top: .35rem;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq h3 + p {
  margin-top: 0;
  padding: 0 1.1rem 1rem;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: #fff;
}

@media (min-width: 760px) {
  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .situations ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .situations li:last-child {
    grid-column: 1 / -1;
  }

  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .process ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nearby ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Exactly four destinations use a balanced 2x2 grid. */
  .nearby ul:has(> li:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Bakersfield process — closing-cost reassurance */
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .process ol + p {
  margin-top: 1.35rem;
  text-align: center;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--brand-blue);
}

/* Standard-city process reassurance — desktop breathing room only.
   Transform changes visual position without increasing section height. */
@media (min-width: 760px) {
  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .process ol + p {
    transform: translateY(.6rem);
  }
}

/* Bakersfield process — wider desktop card row */
@media (min-width: 760px) {
  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .process ol {
    max-width: var(--maxw);
  }
}

/* Bakersfield honesty band — heading accent */
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .honest h2 {
  position: relative;
  padding-bottom: .8rem;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .honest h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: .7rem;
  border-radius: 999px;
  background: var(--brand-cyan);
}

/* Bakersfield FAQ accordion pilot — 2026-08-17 */
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq-item {
  max-width: var(--contentw);
  margin: .9rem auto 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq h2 + .faq-item {
  margin-top: .35rem;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq-item summary {
  position: relative;
  padding: 1.1rem 3.5rem 1.1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  color: var(--brand-blue);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.35;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq-item summary::-webkit-details-marker {
  display: none;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 1.15rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--brand-blue);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq-item[open] summary::after {
  content: "−";
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq-item[open] summary {
  border-bottom: 1px solid var(--border);
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq-item summary:hover {
  background: var(--surface);
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq-item summary:focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: -3px;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq-answer {
  padding: 1rem 1.1rem 1.1rem;
}

:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .faq-answer p {
  margin: 0;
}


/* Bakersfield final CTA — focused desktop form width */
@media (min-width: 760px) {
  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .final-cta .chs-lead-form {
    max-width: 800px;
  }
}

/* Santa Maria future local-photo placeholders — hidden until authentic photography is installed */
.city-page-santa-maria .hero-image[hidden],
.city-page-santa-maria .section-image[hidden] {
  display: none !important;
}

/* Santa Maria owner portrait + BBB desktop composition — 2026-08-18 */
@media (min-width: 900px) {
  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .why-us ul {
    grid-column: 1;
    grid-row: 2;
  }

  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .owner-image {
    grid-column: 2;
    grid-row: 2 / span 2;
    width: min(100%, 520px);
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    justify-self: center;
    align-self: start;
    margin-top: 0;
  }

  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .bbb-link {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    align-self: start;
    margin-top: 1.25rem;
  }
}

/* Santa Maria owner portrait finishing pass — desktop + mobile — 2026-08-18 */

/*
 * Preserve the complete square source portrait instead of forcing it through
 * the older 4:3 crop. A subtle lower mask keeps the photographed lower edge
 * from ending abruptly against the section background.
 */
:is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .owner-image {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 88%,
    rgba(0, 0, 0, .96) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 88%,
    rgba(0, 0, 0, .96) 92%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Mobile: full portrait, centered; BBB becomes a deliberate trust module. */
@media (max-width: 899px) {
  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .owner-image {
    display: block;
    width: min(88%, 420px);
    max-width: none;
    margin: 1.75rem auto 0;
  }

  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .bbb-link {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 2rem auto 0;
  }

  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .bbb-badge {
    display: block;
    width: min(180px, 70vw);
    height: auto;
  }
}

/*
 * Desktop: enlarge the owners roughly 20% from the former 520px cap and
 * visually lower them through the section's bottom padding so the portrait
 * finishes at the blue/white boundary rather than floating above it.
 */
@media (min-width: 900px) {
  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .owner-image {
    width: min(120%, 625px);
    max-width: none;
    justify-self: center;
    align-self: end;
    margin-top: 0;
    transform: translateY(4.5rem);
  }

  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .bbb-link {
    align-self: start;
    margin-top: 1.5rem;
  }
}

/* Santa Maria desktop BBB trust-module refinement — 2026-08-18 */
@media (min-width: 900px) {
  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .bbb-link {
    display: block;
    grid-column: 1;
    grid-row: 3;
    width: min(100%, 360px);
    max-width: 100%;
    justify-self: center;
    align-self: start;
    margin: 1.75rem auto 0;
  }

  :is(.city-page-bakersfield, .city-page-santa-barbara, .city-page-ventura, .city-page-huntington-beach, .city-page-santa-maria) .bbb-badge {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* =====================================================================
   CHS-SIT-FINAL-INHERITED-CONSOLIDATED
   Inherited House final visual CSS — consolidated 2026-08-18.
   Scoped to .situation-page-inherited only.
   ===================================================================== */

/* ---- Section rhythm / surfaces ---- */

.situation-page-inherited .situational-trust {
  background: var(--surface-accent);
  border-top: 1px solid #CFE8EE;
  border-bottom: 1px solid #CFE8EE;
  overflow: hidden;
}

.situation-page-inherited :is(
  .process,
  .fit,
  .honest,
  .where,
  .faq
) {
  border-top: 1px solid var(--border);
}

.situation-page-inherited :is(
  .process,
  .fit,
  .honest,
  .where,
  .faq
) h2 {
  line-height: 1.15;
  margin-bottom: 1rem;
}


/* ---- Kari + BBB trust module ---- */

.situation-page-inherited .situational-trust .kari-owner-image {
  display: block;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  -webkit-mask-image: none;
  mask-image: none;
  transform: none;
}

.situation-page-inherited .situational-trust .bbb-link {
  display: block;
}

.situation-page-inherited .situational-trust .bbb-badge {
  display: block;
  width: 100%;
  height: auto;
}


/* ---- Process ---- */

.situation-page-inherited .process ol {
  list-style: none;
  counter-reset: chs-process;
  padding: 0;
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

.situation-page-inherited .process ol > li {
  counter-increment: chs-process;
  position: relative;
  margin: 0;
  padding: 1.15rem 1.15rem 1.15rem 4rem;
  background: var(--surface-accent);
  border: 1px solid #CFE8EE;
  border-radius: var(--radius-md);
}

.situation-page-inherited .process ol > li::before {
  content: counter(chs-process);
  position: absolute;
  top: 1.1rem;
  left: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cta-color);
  color: #fff;
  font-weight: 800;
  line-height: 1;
}

.situation-page-inherited .process > ol + p:last-child {
  width: 100%;
  max-width: var(--maxw);
  margin: 1.35rem auto 0;
  padding: 0;
  text-align: center;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--brand-blue);
  background: transparent;
  border: 0;
  border-radius: 0;
  transform: translateY(.6rem);
}


/* ---- Why an as-is cash sale often fits ---- */

.situation-page-inherited .fit {
  background: var(--surface-accent);
  border-bottom: 1px solid #CFE8EE;
}

.situation-page-inherited .fit > h2,
.situation-page-inherited .fit > p,
.situation-page-inherited .fit > ul {
  width: min(100%, 980px);
  margin-left: auto;
  margin-right: auto;
}

.situation-page-inherited .fit ul {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

.situation-page-inherited .fit li {
  margin: 0;
  padding: 1.15rem 1.2rem;
  background: var(--surface);
  border: 1px solid #CFE8EE;
  border-radius: var(--radius-md);
}


/* ---- Honest comparison ---- */

.situation-page-inherited .honest table {
  width: 100%;
  margin-top: 1.5rem;
  border-collapse: separate;
  border-spacing: 0;
}

.situation-page-inherited .honest th,
.situation-page-inherited .honest td {
  text-align: left;
  vertical-align: top;
}


/* ---- Where We Buy ---- */

.situation-page-inherited .where {
  background: var(--surface);
}

.situation-page-inherited .where > h2,
.situation-page-inherited .where > p,
.situation-page-inherited .where > ul {
  width: min(100%, 980px);
  margin-left: auto;
  margin-right: auto;
}

.situation-page-inherited .where ul {
  list-style: none;
  padding: 0;
  margin-top: 1.35rem;
  margin-bottom: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
}

.situation-page-inherited .where li {
  margin: 0;
}

.situation-page-inherited .where li a {
  display: inline-block;
  min-height: 44px;
  padding: .6rem .9rem;
  border: 1px solid #B9DDE5;
  border-radius: 999px;
  background: var(--surface-accent);
  font-weight: 700;
  text-decoration: none;
}

.situation-page-inherited .where li a:hover,
.situation-page-inherited .where li a:focus-visible {
  text-decoration: underline;
}

.situation-page-inherited .where > p:last-child {
  text-align: center;
}


/* ---- Native FAQ accordion ---- */

.situation-page-inherited .faq {
  background: var(--surface-accent);
  border-bottom: 1px solid #CFE8EE;
}

.situation-page-inherited .faq > h2 {
  max-width: var(--contentw);
  margin-left: auto;
  margin-right: auto;
}

.situation-page-inherited .faq-item {
  max-width: var(--contentw);
  margin: .9rem auto 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}

.situation-page-inherited .faq h2 + .faq-item {
  margin-top: .35rem;
}

.situation-page-inherited .faq-item summary {
  position: relative;
  padding: 1.1rem 3.5rem 1.1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  color: var(--brand-blue);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.35;
}

.situation-page-inherited .faq-item summary::-webkit-details-marker {
  display: none;
}

.situation-page-inherited .faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 1.15rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--brand-blue);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.situation-page-inherited .faq-item[open] summary::after {
  content: "−";
}

.situation-page-inherited .faq-item[open] summary {
  border-bottom: 1px solid var(--border);
}

.situation-page-inherited .faq-item summary:hover {
  background: var(--surface);
}

.situation-page-inherited .faq-item summary:focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: -3px;
}

.situation-page-inherited .faq-answer {
  padding: 1rem 1.1rem 1.1rem;
}

.situation-page-inherited .faq-answer p {
  margin: 0;
}


/* ---- Small screens: honest comparison cards ---- */

@media (max-width: 699px) {
  .situation-page-inherited .honest table,
  .situation-page-inherited .honest tbody,
  .situation-page-inherited .honest tr,
  .situation-page-inherited .honest th,
  .situation-page-inherited .honest td {
    display: block;
    width: 100%;
  }

  .situation-page-inherited .honest thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .situation-page-inherited .honest tbody tr {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    background: var(--surface-accent);
    border: 1px solid #CFE8EE;
    border-radius: var(--radius-md);
  }

  .situation-page-inherited .honest tbody :is(th, td) {
    padding: .35rem 0;
    border: 0;
  }

  .situation-page-inherited .honest tbody :is(th, td):first-child {
    padding-top: 0;
    font-size: 1.08rem;
    font-weight: 800;
  }

  .situation-page-inherited .honest tbody :is(th, td):nth-child(2)::before {
    content: "Makes sense when";
  }

  .situation-page-inherited .honest tbody :is(th, td):nth-child(3)::before {
    content: "The trade-off";
  }

  .situation-page-inherited .honest tbody :is(th, td):nth-child(2)::before,
  .situation-page-inherited .honest tbody :is(th, td):nth-child(3)::before {
    display: block;
    margin-bottom: .15rem;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
}


/* ---- Mobile / tablet trust composition ---- */

@media (max-width: 859px) {
  .situation-page-inherited .situational-trust {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: .75rem;
    align-items: end;
    overflow: hidden;
    padding-bottom: 0;
  }

  .situation-page-inherited .situational-trust h2 {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .situation-page-inherited .situational-trust ul {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: .5rem;
  }

  .situation-page-inherited .situational-trust .bbb-link {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: 150px;
    justify-self: center;
    align-self: center;
    margin: 0 auto !important;
    transform: none;
  }

  .situation-page-inherited .situational-trust .kari-owner-image {
    grid-column: 2;
    grid-row: 3;
    position: static;
    width: min(100%, 180px);
    max-width: none;
    justify-self: center;
    align-self: end;
    margin: -1rem auto -1.75rem !important;
    transform: none;
  }
}


/* ---- 700px+ intermediate layouts ---- */

@media (min-width: 700px) {
  .situation-page-inherited .process ol,
  .situation-page-inherited .fit ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .situation-page-inherited .honest table {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .situation-page-inherited .honest thead th {
    padding: .9rem 1rem;
    background: var(--surface-accent);
    border-bottom: 1px solid var(--border);
    font-weight: 800;
  }

  .situation-page-inherited .honest tbody :is(th, td) {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
  }

  .situation-page-inherited .honest tbody tr:last-child :is(th, td) {
    border-bottom: 0;
  }
}


/* ---- Final desktop geometry ---- */

@media (min-width: 860px) {
  .situation-page-inherited .situational-trust {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
    column-gap: 3rem;
    align-items: start;
    max-width: calc(var(--maxw) + 2rem);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    min-height: 700px;
    padding-bottom: 1rem;
  }

  .situation-page-inherited .situational-trust > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .situation-page-inherited .situational-trust h2 {
    grid-column: 1 / -1;
  }

  .situation-page-inherited .situational-trust ul {
    grid-column: 1;
    grid-row: 2;
  }

  .situation-page-inherited .situational-trust .kari-owner-image {
    position: absolute;
    z-index: 1;
    right: clamp(1.5rem, 5vw, 5rem);
    bottom: -7.5rem;
    width: min(34vw, 480px);
    max-width: none;
    height: auto;
    margin: 0 !important;
    transform: none;
    object-fit: contain;
  }

  .situation-page-inherited .situational-trust .bbb-link {
    grid-column: 1;
    grid-row: 3;
    width: min(100%, 320px);
    justify-self: center;
    align-self: start;
    margin: .75rem auto 0 !important;
    transform: none;
  }

  .situation-page-inherited .process > ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    max-width: var(--maxw);
    margin-left: auto;
    margin-right: auto;
  }

  .situation-page-inherited .process > ol > li {
    height: 100%;
  }
}

/* =====================================================================
   CHS-SCAM-FINAL-CONSOLIDATED
   Is Selling to a Cash Buyer a Scam? — final approved situational CSS.

   Approved PREVIEW components:
   - Native zero-JS FAQ accordion
   - Evidence-first verification dossier + BBB proof
   - Five-check open sequential rail
   - Open warning-sign list
   - Where We Buy pill treatment

   Scoped to .situation-page-scam.
   Consolidated after mobile + desktop visual QA.
   ===================================================================== */

.situation-page-scam .faq {
  background: var(--surface-accent);
  border-bottom: 1px solid #CFE8EE;
}

.situation-page-scam .faq > h2 {
  max-width: var(--contentw);
  margin-left: auto;
  margin-right: auto;
}

.situation-page-scam .faq-item {
  max-width: var(--contentw);
  margin: .9rem auto 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}

.situation-page-scam .faq h2 + .faq-item {
  margin-top: .35rem;
}

.situation-page-scam .faq-item summary {
  position: relative;
  padding: 1.1rem 3.5rem 1.1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  color: var(--brand-blue);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.35;
}

.situation-page-scam .faq-item summary::-webkit-details-marker {
  display: none;
}

.situation-page-scam .faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 1.15rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--brand-blue);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.situation-page-scam .faq-item[open] summary::after {
  content: "−";
}

.situation-page-scam .faq-item[open] summary {
  border-bottom: 1px solid var(--border);
}

.situation-page-scam .faq-item summary:hover {
  background: var(--surface);
}

.situation-page-scam .faq-item summary:focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: -3px;
}

.situation-page-scam .faq-answer {
  padding: 1rem 1.1rem 1.1rem;
}

.situation-page-scam .faq-answer p {
  margin: 0;
}


.situation-page-scam .verification-us {
  background: var(--surface-accent);
  border-top: 1px solid #CFE8EE;
  border-bottom: 1px solid #CFE8EE;
}

.situation-page-scam .verification-us > h2,
.situation-page-scam .verification-us > p,
.situation-page-scam .verification-us > ul,
.situation-page-scam .verification-us > .verification-bbb {
  width: min(100%, 980px);
  margin-left: auto;
  margin-right: auto;
}

.situation-page-scam .verification-us > h2 {
  line-height: 1.15;
  margin-bottom: 1rem;
}

.situation-page-scam .verification-us > ul {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  margin-bottom: 0;
  display: grid;
  gap: 1rem;
}

.situation-page-scam .verification-us > ul > li {
  margin: 0;
  padding: 1.1rem 1.15rem;
  background: #fff;
  border: 1px solid #CFE8EE;
  border-radius: var(--radius-md);
}

.situation-page-scam .verification-us > ul > li strong {
  color: var(--brand-blue);
}

.situation-page-scam .verification-us > ul > li a {
  font-weight: 700;
}

.situation-page-scam .verification-bbb {
  display: flex;
  justify-content: center;
  margin-top: 1.4rem;
  margin-bottom: 1.25rem;
}

.situation-page-scam .verification-bbb .bbb-link {
  display: block;
  width: min(100%, 190px);
}

.situation-page-scam .verification-bbb .bbb-badge {
  display: block;
  width: 100%;
  height: auto;
}

.situation-page-scam .verification-transparency {
  margin-top: 0;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #CFE8EE;
  border-left: 4px solid var(--cta-color);
  border-radius: var(--radius-md);
}

@media (min-width: 700px) {
  .situation-page-scam .verification-us > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .situation-page-scam .verification-us > ul > li {
    height: 100%;
  }

  .situation-page-scam .verification-us > ul > li:last-child {
    grid-column: 1 / -1;
  }

  .situation-page-scam .verification-bbb .bbb-link {
    width: min(100%, 230px);
  }
}


.situation-page-scam .checks {
  border-top: 1px solid var(--border);
}

.situation-page-scam .checks > h2,
.situation-page-scam .checks > .checks-rail {
  width: min(100%, 900px);
  margin-left: auto;
  margin-right: auto;
}

.situation-page-scam .checks > h2 {
  line-height: 1.15;
  margin-bottom: 1rem;
}

.situation-page-scam .checks-rail {
  position: relative;
  margin-top: 1.6rem;
}

.situation-page-scam .checks-rail::before {
  content: "";
  position: absolute;
  top: .55rem;
  bottom: .55rem;
  left: .55rem;
  width: 2px;
  background: #B9DDE5;
}

.situation-page-scam .check-step {
  position: relative;
  margin: 0;
  padding: 0 0 1.8rem 2.55rem;
}

.situation-page-scam .check-step:last-child {
  padding-bottom: 0;
}

.situation-page-scam .check-step::before {
  content: "";
  position: absolute;
  top: .42rem;
  left: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 3px solid var(--cta-color);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px #fff;
}

.situation-page-scam .check-step h3 {
  margin: 0 0 .55rem;
  color: var(--brand-blue);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.35;
}

.situation-page-scam .check-step p {
  margin: 0;
}

.situation-page-scam .check-step + .check-step {
  padding-top: .15rem;
}

@media (min-width: 700px) {
  .situation-page-scam .checks > h2,
  .situation-page-scam .checks > .checks-rail {
    width: min(100%, 860px);
  }

  .situation-page-scam .check-step {
    padding-left: 3rem;
    padding-bottom: 2rem;
  }

  .situation-page-scam .checks-rail::before {
    left: .65rem;
  }

  .situation-page-scam .check-step::before {
    left: .08rem;
    width: 1.25rem;
    height: 1.25rem;
  }
}


.situation-page-scam .warnings {
  border-top: 1px solid var(--border);
}

.situation-page-scam .warnings > h2,
.situation-page-scam .warnings > ul {
  width: min(100%, 900px);
  margin-left: auto;
  margin-right: auto;
}

.situation-page-scam .warnings > h2 {
  line-height: 1.15;
  margin-bottom: 1rem;
}

.situation-page-scam .warnings > ul {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.situation-page-scam .warnings > ul > li {
  position: relative;
  margin: 0;
  padding: 1rem 0 1rem 2.65rem;
  border-bottom: 1px solid var(--border);
}

.situation-page-scam .warnings > ul > li:first-child {
  padding-top: .35rem;
}

.situation-page-scam .warnings > ul > li:last-child {
  padding-bottom: .35rem;
  border-bottom: 0;
}

.situation-page-scam .warnings > ul > li::before {
  content: "!";
  position: absolute;
  top: 1.05rem;
  left: .15rem;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border: 2px solid #9A6700;
  border-radius: 50%;
  background: #FFF8E6;
  color: #7A4B00;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1;
}

.situation-page-scam .warnings > ul > li:first-child::before {
  top: .4rem;
}

.situation-page-scam .warnings > ul > li strong {
  color: var(--text-dark);
  font-weight: 800;
}

@media (min-width: 700px) {
  .situation-page-scam .warnings > h2,
  .situation-page-scam .warnings > ul {
    width: min(100%, 860px);
  }

  .situation-page-scam .warnings > ul > li {
    padding-left: 3rem;
  }
}


.situation-page-scam .where {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.situation-page-scam .where > h2,
.situation-page-scam .where > p,
.situation-page-scam .where > ul {
  width: min(100%, 980px);
  margin-left: auto;
  margin-right: auto;
}

.situation-page-scam .where > h2 {
  line-height: 1.15;
  margin-bottom: 1rem;
}

.situation-page-scam .where ul {
  list-style: none;
  padding: 0;
  margin-top: 1.35rem;
  margin-bottom: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
}

.situation-page-scam .where li {
  margin: 0;
}

.situation-page-scam .where li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .6rem .9rem;
  border: 1px solid #B9DDE5;
  border-radius: 999px;
  background: var(--surface-accent);
  font-weight: 700;
  text-decoration: none;
}

.situation-page-scam .where li a:hover,
.situation-page-scam .where li a:focus-visible {
  text-decoration: underline;
}

.situation-page-scam .where > p:last-child {
  text-align: center;
}

/* === CHS-REPAIRS-PILOT-1 ===============================================
   House Needs Repairs — as-is economics / decision-triage archetype
   PREVIEW ONLY. Scoped to .situation-page-repairs.
   ===================================================================== */

/* ---- Shared heading width ---- */
.situation-page-repairs .recognition > h2,
.situation-page-repairs .what-we-buy > h2,
.situation-page-repairs .process > h2,
.situation-page-repairs .honest > h2,
.situation-page-repairs .disclosure > h2,
.situation-page-repairs .where > h2,
.situation-page-repairs .faq > h2 {
  max-width: 46rem;
}

/* Wider measure for the longer disclosure heading. */
.situation-page-repairs .disclosure > h2 {
  max-width: 64rem;
  text-wrap: balance;
}


/* ---- Editorial opening + repair image ---- */
.situation-page-repairs .recognition {
  background: var(--surface);
}

.situation-page-repairs .recognition-layout {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.5rem auto 0 !important;
  display: grid;
  gap: 1.6rem;
  align-items: center;
}

.situation-page-repairs .recognition-copy {
  max-width: 44rem;
}

.situation-page-repairs .recognition-copy > :first-child {
  margin-top: 0;
}

.situation-page-repairs .recognition-copy > :last-child {
  margin-bottom: 0;
}

.situation-page-repairs .recognition-intro,
.situation-page-repairs .honest-intro {
  font-size: 1.08rem;
  color: var(--text-dark);
}

.situation-page-repairs .honest-intro {
  max-width: 46rem;
  margin: 0 auto 1.2rem !important;
  text-align: center;
}

.situation-page-repairs .repair-relief-visual {
  width: min(100%, 471px);
  margin: .4rem auto 1rem;
}

.situation-page-repairs .repair-relief-visual img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(148, 163, 184, .48);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 16px 30px rgba(15, 35, 55, .14);
}


/* ---- Open repair-condition ledger ---- */
.situation-page-repairs .repair-ledger {
  width: 100%;
  max-width: var(--maxw) !important;
  list-style: none;
  margin: 1.5rem auto 0 !important;
  padding: 0;
  display: grid;
  gap: 0 1.4rem;
}

.situation-page-repairs .repair-ledger li {
  position: relative;
  margin: 0;
  padding: .95rem .25rem .95rem 1rem;
  border: 0;
  border-bottom: 1px solid #DCE5ED;
  background: transparent;
}

.situation-page-repairs .repair-ledger li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.18rem;
  width: 4px;
  height: 1.15rem;
  border-radius: 3px;
  background: var(--brand-cyan);
}


/* ---- Reusable section-ending signal: no redundant divider ---- */
.situation-page-repairs .section-close {
  max-width: 54rem;
  margin: 1.8rem auto 0 !important;
  padding: 0;
  border: 0;
  text-align: center;
  line-height: 1.65;
}

.situation-page-repairs .repair-ledger-note {
  margin-bottom: 0;
}


/* ---- Three-step assessment rail ---- */
.situation-page-repairs .process {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f7fafc 100%
  );
}

.situation-page-repairs .process-steps {
  width: 100%;
  max-width: var(--maxw) !important;
  list-style: none;
  counter-reset: repairs-step;
  margin: 1.6rem auto 0 !important;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.situation-page-repairs .process-steps > li {
  counter-increment: repairs-step;
  position: relative;
  margin: 0;
  padding: 1rem 0 1rem 3.4rem;
  background: transparent;
}

.situation-page-repairs .process-steps > li::before {
  content: counter(repairs-step);
  position: absolute;
  left: 0;
  top: .85rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 800;
}

.situation-page-repairs .process-steps > li::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 3.35rem;
  bottom: -.85rem;
  width: 1px;
  background: #BCD8E0;
}

.situation-page-repairs .process-steps > li:last-child::after {
  display: none;
}

.situation-page-repairs .process-start-link {
  color: var(--brand-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .14em;
}

.situation-page-repairs .process-start-link:hover,
.situation-page-repairs .process-start-link:focus-visible {
  color: var(--brand-cyan);
}

.situation-page-repairs .process-reassurance {
  max-width: var(--contentw);
  margin: 1.5rem auto 0 !important;
  padding: 0;
  text-align: center;
  font-weight: 750;
}


/* ---- Three-card repair decision architecture ---- */
.situation-page-repairs .honest {
  background: #fff;
}

.situation-page-repairs .decision-and {
  font-style: italic;
  text-decoration-line: underline;
  text-decoration-color: var(--brand-cyan);
  text-decoration-thickness: .11em;
  text-underline-offset: .13em;
  text-decoration-skip-ink: auto;
}

.situation-page-repairs .decision-split {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.5rem auto 0 !important;
  display: grid;
  gap: 1rem;
}

.situation-page-repairs .decision-card {
  position: relative;
  padding: 1.2rem 1.15rem 1.25rem;
  border: 1px solid #D7E1E9;
  border-top: 4px solid var(--brand-cyan);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.situation-page-repairs .decision-card p {
  margin: 0;
}

.situation-page-repairs .honest-takeaway {
  max-width: 55rem;
  font-size: 1.03rem;
}


/* ---- Disclosure: narrative + concrete examples ---- */
.situation-page-repairs .disclosure {
  background: var(--surface);
}

.situation-page-repairs .disclosure-layout {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.4rem auto 0 !important;
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.situation-page-repairs .disclosure-copy {
  padding: 1.1rem 1.15rem;
  border-left: 4px solid var(--brand-blue);
  background: #fff;
}

.situation-page-repairs .disclosure-copy > :first-child {
  margin-top: 0;
}

.situation-page-repairs .disclosure-copy > :last-child {
  margin-bottom: 0;
}

/* Larger explanatory copy, ordinary-sized supporting link. */
.situation-page-repairs .disclosure-copy > p:not(:last-child) {
  font-size: 1.14rem;
  line-height: 1.78;
}

.situation-page-repairs .disclosure-copy > p:last-child {
  font-size: 1rem;
  line-height: 1.6;
}

.situation-page-repairs .disclosure-examples {
  padding: 1.15rem;
  border: 1px solid #D6E1E9;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.situation-page-repairs .disclosure-examples-title {
  margin: 0 0 .65rem;
  font-size: 1.05rem;
}

.situation-page-repairs .condition-examples {
  list-style: none;
  margin: 0;
  padding: 0;
}

.situation-page-repairs .condition-examples li {
  position: relative;
  margin: 0;
  padding: .65rem 0 .65rem 1.45rem;
  border-bottom: 1px solid #E1E8EE;
}

.situation-page-repairs .condition-examples li:last-child {
  border-bottom: 0;
}

.situation-page-repairs .condition-examples li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: 1.08rem;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 0 4px rgba(0, 124, 145, .10);
}

.situation-page-repairs .disclosure-reassurance {
  margin: .85rem 0 0;
  padding-top: .85rem;
  border-top: 1px solid #D6E1E9;
  font-size: .94rem;
}


/* ---- Where We Buy ---- */
.situation-page-repairs .where-pills {
  width: 100%;
  max-width: var(--contentw) !important;
  list-style: none;
  margin: 1.35rem auto 0 !important;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.situation-page-repairs .where-pills li {
  margin: 0;
}

.situation-page-repairs .where-pills a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: .6rem .95rem;
  border: 1px solid #B9DDE4;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-blue);
  font-weight: 700;
  text-decoration: none;
}

.situation-page-repairs .where-pills a:hover,
.situation-page-repairs .where-pills a:focus-visible {
  background: var(--surface-accent);
}


/* ---- Distinct native FAQ component ---- */
.situation-page-repairs .faq {
  background: #F7F9FB;
  border-top: 1px solid #E0E7ED;
  border-bottom: 1px solid #E0E7ED;
}

.situation-page-repairs .faq > h2 {
  margin-bottom: 1.15rem;
}

.situation-page-repairs .faq-shell {
  width: 100%;
  max-width: var(--contentw) !important;
  margin: 1rem auto 0 !important;
  overflow: hidden;
  border: 1px solid #D5E0E8;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 35, 55, .08);
}

.situation-page-repairs .faq-item {
  width: 100%;
  margin: 0;
  border-top: 1px solid #DCE4EA;
}

.situation-page-repairs .faq-item:first-child {
  border-top: 0;
}

.situation-page-repairs .faq-item summary {
  position: relative;
  min-height: 56px;
  display: block;
  padding: 1rem 3rem 1rem 1rem;
  cursor: pointer;
  list-style: none;
  transition: background .15s ease;
}

.situation-page-repairs .faq-item summary::-webkit-details-marker {
  display: none;
}

.situation-page-repairs .faq-item summary:hover {
  background: #F3F8FA;
}

.situation-page-repairs .faq-item[open] summary {
  background: var(--surface-accent);
}

.situation-page-repairs .faq-item summary h3 {
  position: relative;
  margin: 0;
  padding: 0 0 0 1rem;
  border: 0;
  font-size: 1.08rem;
  line-height: 1.35;
}

.situation-page-repairs .faq-item summary h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .05rem;
  bottom: .05rem;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-cyan);
}

.situation-page-repairs .faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: .95rem;
  color: var(--brand-blue);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

.situation-page-repairs .faq-item[open] summary::after {
  content: "−";
}

.situation-page-repairs .faq-item summary:focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: -3px;
}

.situation-page-repairs .faq-answer {
  padding: 0 3rem 1.1rem 2rem;
  background: #fff;
}

.situation-page-repairs .faq-answer p {
  margin: 0;
}


/* ---- Tablet / desktop ---- */
@media (min-width: 760px) {

  .situation-page-repairs .repair-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .situation-page-repairs .process-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .situation-page-repairs .process-steps > li {
    padding: 3.4rem 1rem 1rem 0;
    border-top: 2px solid #CFE1E7;
  }

  .situation-page-repairs .process-steps > li::before {
    left: 0;
    top: .8rem;
  }

  .situation-page-repairs .process-steps > li::after {
    display: none;
  }
}

@media (min-width: 900px) {

  .situation-page-repairs .decision-split {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

@media (min-width: 1000px) {

  .situation-page-repairs .recognition-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 471px);
    gap: 2.7rem;
  }

  .situation-page-repairs .repair-ledger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .situation-page-repairs .disclosure-layout {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 2rem;
  }
}
/* Mobile-only: tighten the white-to-white transition between
   the repair ledger and the three-step process. */
@media (max-width: 759px) {
  .situation-page-repairs .what-we-buy {
    padding-bottom: 1.5rem;
  }

  .situation-page-repairs .process {
    padding-top: 1.5rem;
  }
}


/* === CHS-VACANT-PILOT-1 ================================================
   Vacant House — Carrying Cost / Exposure / Decision Clock archetype
   PREVIEW pilot. Entire block scoped to .situation-page-vacant.
   ===================================================================== */

/* ---- Common reading measure ---- */
.situation-page-vacant .recognition > h2,
.situation-page-vacant .costs > h2,
.situation-page-vacant .fit > h2,
.situation-page-vacant .process > h2,
.situation-page-vacant .honest > h2,
.situation-page-vacant .where > h2,
.situation-page-vacant .faq > h2 {
  max-width: 52rem;
}

/* ---- Editorial recognition: why vacancy happens ---- */
.situation-page-vacant .recognition {
  background: var(--surface);
}

.situation-page-vacant .recognition > p,
.situation-page-vacant .vacancy-paths {
  width: min(100%, 52rem);
}

.situation-page-vacant .recognition > p:first-of-type {
  font-size: 1.08rem;
  color: var(--text-dark);
}

.situation-page-vacant .vacancy-paths {
  list-style: none;
  margin-top: 1.35rem;
  margin-bottom: 1.35rem;
  padding: 0;
}

.situation-page-vacant .vacancy-paths > li {
  position: relative;
  margin: 0;
  padding: .8rem .2rem .8rem 1.45rem;
  border-bottom: 1px solid #DCE5ED;
}

.situation-page-vacant .vacancy-paths > li:last-child {
  border-bottom: 0;
}

.situation-page-vacant .vacancy-paths > li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: 1.22rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 0 4px rgba(0,124,145,.10);
}

/* ---- Decision Clock centerpiece: carrying cost + compounding exposure ---- */
.situation-page-vacant .costs {
  background: #fff;
}

.situation-page-vacant .costs > p,
.situation-page-vacant .vacancy-exposure-rail {
  width: min(100%, 56rem);
}

.situation-page-vacant .costs > p:first-of-type {
  font-size: 1.1rem;
  line-height: 1.75;
}

.situation-page-vacant .costs > p:nth-of-type(2) {
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--brand-blue);
  background: var(--surface-accent);
  font-weight: 650;
}

.situation-page-vacant .vacancy-exposure-rail {
  position: relative;
  list-style: none;
  margin-top: 1.6rem;
  margin-bottom: 1.4rem;
  padding: 0;
}

.situation-page-vacant .vacancy-exposure-rail::before {
  content: "";
  position: absolute;
  top: .55rem;
  bottom: .55rem;
  left: .63rem;
  width: 2px;
  background: #B9DDE5;
}

.situation-page-vacant .vacancy-exposure-rail > li {
  position: relative;
  margin: 0;
  padding: .2rem 0 1.45rem 2.65rem;
}

.situation-page-vacant .vacancy-exposure-rail > li:last-child {
  padding-bottom: .15rem;
}

.situation-page-vacant .vacancy-exposure-rail > li::before {
  content: "";
  position: absolute;
  left: .08rem;
  top: .32rem;
  width: 1.15rem;
  height: 1.15rem;
  border: 3px solid var(--cta-color);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px #fff;
}

.situation-page-vacant .costs > p:last-of-type {
  margin-top: 1.35rem;
  font-weight: 700;
}

/* ---- Conventional-listing friction: narrative, not cards ---- */
.situation-page-vacant .fit {
  background: linear-gradient(180deg, #F7FAFC 0%, #FFFFFF 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.situation-page-vacant .fit > p {
  width: min(100%, 54rem);
}

.situation-page-vacant .fit > p:first-of-type {
  font-size: 1.08rem;
}

.situation-page-vacant .fit > p:last-of-type {
  margin-top: 1.2rem;
  padding-left: 1rem;
  border-left: 4px solid var(--brand-cyan);
}

/* ---- Three-step exit path ---- */
.situation-page-vacant .process {
  background: #fff;
}

.situation-page-vacant .vacancy-process-steps {
  width: 100%;
  max-width: var(--maxw) !important;
  list-style: none;
  counter-reset: vacant-step;
  margin: 1.55rem auto 0 !important;
  padding: 0;
}

.situation-page-vacant .vacancy-process-steps > li {
  counter-increment: vacant-step;
  position: relative;
  margin: 0;
  padding: .9rem .2rem 1.25rem 3.35rem;
  border-bottom: 1px solid #DCE5ED;
}

.situation-page-vacant .vacancy-process-steps > li:last-child {
  border-bottom: 0;
}

.situation-page-vacant .vacancy-process-steps > li::before {
  content: counter(vacant-step);
  position: absolute;
  left: 0;
  top: .7rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 850;
}

.situation-page-vacant .process > p {
  max-width: 50rem;
  margin: 1.45rem auto 0 !important;
  padding: .9rem 1rem;
  border-top: 1px solid #CFE1E7;
  border-bottom: 1px solid #CFE1E7;
  text-align: center;
  font-weight: 750;
}

/* ---- Honest decision checkpoint ---- */
.situation-page-vacant .honest {
  background: var(--surface);
}

.situation-page-vacant .honest > p {
  width: min(100%, 54rem);
}

.situation-page-vacant .honest > p:first-of-type {
  margin-top: 1.25rem;
  padding: 1.05rem 1.15rem;
  border-left: 4px solid var(--cta-color);
  background: #fff;
  font-size: 1.08rem;
}

.situation-page-vacant .honest > p:last-of-type {
  margin-top: 2rem;
  font-weight: 650;
}

/* ---- Where We Buy pills ---- */
.situation-page-vacant .where {
  border-top: 1px solid var(--border);
}

.situation-page-vacant .where > p,
.situation-page-vacant .vacant-where-pills {
  width: min(100%, var(--contentw));
}

.situation-page-vacant .vacant-where-pills {
  list-style: none;
  margin: 1.35rem auto !important;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.situation-page-vacant .vacant-where-pills > li {
  margin: 0;
}

.situation-page-vacant .vacant-where-pills a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: .6rem .95rem;
  border: 1px solid #B9DDE4;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-blue);
  font-weight: 700;
  text-decoration: none;
}

.situation-page-vacant .vacant-where-pills a:hover,
.situation-page-vacant .vacant-where-pills a:focus-visible {
  background: var(--surface-accent);
  text-decoration: underline;
}

/* ---- Native zero-JS FAQ: open editorial rows, not a card wall ---- */
.situation-page-vacant .faq {
  background: #F7F9FB;
  border-top: 1px solid #E0E7ED;
  border-bottom: 1px solid #E0E7ED;
}

.situation-page-vacant .vacant-faq-list {
  width: 100%;
  max-width: var(--contentw) !important;
  margin: 1rem auto 0 !important;
  border-top: 1px solid #D5E0E8;
}

.situation-page-vacant .vacant-faq-item {
  margin: 0;
  border-bottom: 1px solid #D5E0E8;
}

.situation-page-vacant .vacant-faq-item summary {
  position: relative;
  min-height: 58px;
  display: block;
  padding: 1rem 3rem 1rem .15rem;
  cursor: pointer;
  list-style: none;
}

.situation-page-vacant .vacant-faq-item summary::-webkit-details-marker {
  display: none;
}

.situation-page-vacant .vacant-faq-item summary:hover {
  background: #F1F7F9;
}

.situation-page-vacant .vacant-faq-item[open] summary {
  background: var(--surface-accent);
}

.situation-page-vacant .vacant-faq-item summary:focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: -3px;
}

.situation-page-vacant .vacant-faq-item summary h3 {
  margin: 0;
  padding: 0 0 0 1rem;
  border-left: 3px solid var(--brand-cyan);
  font-size: 1.08rem;
  line-height: 1.35;
}

.situation-page-vacant .vacant-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: .95rem;
  color: var(--brand-blue);
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1;
}

.situation-page-vacant .vacant-faq-item[open] summary::after {
  content: "−";
}

.situation-page-vacant .vacant-faq-answer {
  padding: 0 1rem 1.1rem 1.15rem;
}

.situation-page-vacant .vacant-faq-answer > p {
  margin: 0;
}

/* ---- Desktop: keep the clock concept, avoid a generic card grid ---- */
@media (min-width: 760px) {
  .situation-page-vacant .vacancy-paths {
    columns: 2;
    column-gap: 2.25rem;
  }

  .situation-page-vacant .vacancy-paths > li {
    break-inside: avoid;
  }

  .situation-page-vacant .vacancy-process-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .situation-page-vacant .vacancy-process-steps > li {
    padding: 3.35rem .85rem 1rem 0;
    border-top: 2px solid #CFE1E7;
    border-bottom: 0;
  }

  .situation-page-vacant .vacancy-process-steps > li::before {
    top: .7rem;
  }
}
/* === CHS-VACANT-DESKTOP-REFINE-1 =====================================
   Vacant House final desktop refinements.
   Mobile presentation intentionally unchanged.
   ===================================================================== */

@media (min-width: 760px) {

  /* Center heading and intro above the two-column pathway list. */
  .situation-page-vacant .recognition > h2,
  .situation-page-vacant .recognition > p:first-of-type {
    width: min(100%, 52rem);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Center and emphasize the recognition-section takeaway. */
  .situation-page-vacant .recognition > p:last-of-type {
    width: min(100%, 58rem);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-weight: 700;
  }

  /* Visually lower the Decision Clock closing sentence without
     increasing the section's layout footprint. */
  .situation-page-vacant .costs > p:last-of-type {
    transform: translateY(.7rem);
  }
}

/* === CHS-VACANT-MOBILE-WRAP-1 =========================================
   Vacant House mobile H2 refinement.
   Disable global balanced wrapping so headings use available line width
   naturally on phones. Desktop presentation intentionally unchanged.
   ===================================================================== */
@media (max-width: 759px) {
  .situation-page-vacant h2 {
    text-wrap: wrap;
  }
}

/* === CHS-VACANT-MOBILE-CONTACT-LINE-1 ================================
   Keep "contact us" together on the second line of the process H2 on
   phones. Desktop heading remains visually unchanged.
   ===================================================================== */
@media (max-width: 759px) {
  .situation-page-vacant .process > h2 .vacant-mobile-contact-line {
    display: block;
    white-space: nowrap;
  }
}
/* =====================================================================
   CHS-LANDLORD-1 — Tired Landlord situational-page pilot
   Archetype: operational burden / landlord fatigue / exit decision
   Scope: .situation-page-landlord ONLY
   ===================================================================== */

.situation-page-landlord .recognition {
  background:
    linear-gradient(
      180deg,
      rgba(7, 89, 133, .055),
      rgba(0, 124, 145, .025)
    );
}

.situation-page-landlord .recognition ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  counter-reset: landlord-burden;
  border: 1px solid rgba(7, 89, 133, .18);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 45, 62, .07);
}

.situation-page-landlord .recognition li {
  counter-increment: landlord-burden;
  position: relative;
  min-height: 76px;
  padding: 17px 18px 17px 58px;
  border-bottom: 1px solid rgba(7, 89, 133, .12);
}

.situation-page-landlord .recognition li:last-child {
  border-bottom: 0;
}

.situation-page-landlord .recognition li::before {
  content: counter(landlord-burden, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 17px;
  font-size: .76rem;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--brand-blue, #075985);
}

.situation-page-landlord .recognition > p:last-child {
  margin-top: 22px;
  font-weight: 650;
  color: var(--text-dark, #1f2d3d);
}


/* Three exit blockers — centerpiece, intentionally not a card grid. */

.situation-page-landlord .obstacles {
  background:
    linear-gradient(
      145deg,
      #103747 0%,
      #0a2935 100%
    );
  color: #fff;
}

.situation-page-landlord .obstacles h2 {
  color: #fff;
}

.situation-page-landlord .landlord-blockers {
  counter-reset: landlord-blocker;
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.situation-page-landlord .landlord-blocker {
  counter-increment: landlord-blocker;
  position: relative;
  padding: 24px 22px 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 4px solid var(--brand-cyan, #007c91);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
}

.situation-page-landlord .landlord-blocker::before {
  content: counter(landlord-blocker, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-size: .75rem;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: .11em;
  color: #a9e8ef;
}

.situation-page-landlord .landlord-blocker h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(1.15rem, 2.4vw, 1.38rem);
}

.situation-page-landlord .landlord-blocker p {
  color: rgba(255, 255, 255, .9);
}

.situation-page-landlord .landlord-blocker p:last-child {
  margin-bottom: 0;
}


/* Listing friction — operational sequence rather than another card wall. */

.situation-page-landlord .fit ul {
  list-style: none;
  padding: 4px 0 0;
  counter-reset: landlord-friction;
}

.situation-page-landlord .fit li {
  counter-increment: landlord-friction;
  position: relative;
  padding: 0 0 26px 54px;
}

.situation-page-landlord .fit li::before {
  content: counter(landlord-friction);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 124, 145, .11);
  border: 1px solid rgba(0, 124, 145, .3);
  color: var(--brand-blue, #075985);
  font-weight: 800;
}

.situation-page-landlord .fit li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 38px;
  bottom: 4px;
  width: 2px;
  background: rgba(0, 124, 145, .18);
}


/* Established CashHouseSales three-step seller process. */

.situation-page-landlord .process ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-left: 0;
  list-style: none;
  counter-reset: landlord-process;
}

.situation-page-landlord .process li {
  counter-increment: landlord-process;
  position: relative;
  padding: 22px 20px 20px 58px;
  border: 1px solid rgba(7, 89, 133, .16);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 45, 62, .055);
}

.situation-page-landlord .process li::before {
  content: counter(landlord-process);
  position: absolute;
  left: 18px;
  top: 20px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--brand-blue, #075985);
  color: #fff;
  font-weight: 800;
  line-height: 1;
}


/* Honest keep / list / cash-choice section. */

.situation-page-landlord .honest {
  background: rgba(7, 89, 133, .045);
}

.situation-page-landlord .honest p {
  padding: 18px 20px;
  margin-top: 12px;
  border-left: 3px solid rgba(7, 89, 133, .42);
  background: rgba(255, 255, 255, .78);
}

.situation-page-landlord .honest p:nth-of-type(2) {
  border-left-color: rgba(0, 124, 145, .52);
}

.situation-page-landlord .honest p:nth-of-type(3) {
  border-left-color: var(--cta-color, #006b7a);
}


/* Where We Buy — compact pills. */

.situation-page-landlord .where ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0;
}

.situation-page-landlord .where li {
  margin: 0;
}

.situation-page-landlord .where li a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid rgba(7, 89, 133, .22);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-blue, #075985);
  font-weight: 700;
  text-decoration: none;
}

.situation-page-landlord .where li a:hover,
.situation-page-landlord .where li a:focus-visible {
  border-color: var(--brand-blue, #075985);
  background: rgba(7, 89, 133, .06);
}


/* Native FAQ accordions — zero JavaScript. */

.situation-page-landlord .faq .landlord-faq-item {
  border-top: 1px solid rgba(7, 89, 133, .2);
}

.situation-page-landlord .faq .landlord-faq-item:last-child {
  border-bottom: 1px solid rgba(7, 89, 133, .2);
}

.situation-page-landlord .faq summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 46px 18px 0;
}

.situation-page-landlord .faq summary::-webkit-details-marker {
  display: none;
}

.situation-page-landlord .faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 124, 145, .1);
  color: var(--brand-blue, #075985);
  font-size: 1.2rem;
  font-weight: 800;
}

.situation-page-landlord .faq details[open] summary::after {
  content: "−";
}

.situation-page-landlord .faq summary h3 {
  margin: 0;
  padding: 0;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--text-dark, #1f2d3d);
}

.situation-page-landlord .faq .landlord-faq-item > p,
.situation-page-landlord .faq .landlord-faq-item > ul,
.situation-page-landlord .faq .landlord-faq-item > ol {
  margin-top: 0;
  padding-right: 42px;
}

.situation-page-landlord .faq .landlord-faq-item[open] {
  padding-bottom: 16px;
}


@media (min-width: 760px) {
  .situation-page-landlord .recognition ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .situation-page-landlord .recognition li {
    border-right: 1px solid rgba(7, 89, 133, .12);
  }

  .situation-page-landlord .recognition li:nth-child(3n) {
    border-right: 0;
  }

  .situation-page-landlord .recognition li:nth-last-child(-n + 3) {
    border-bottom: 0;
  }

  .situation-page-landlord .process ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =====================================================================
   CHS-LANDLORD-3 — PREVIEW visual-review refinement
   Scope: .situation-page-landlord ONLY
   ===================================================================== */

/* Recognition close — give the concluding sentence more breathing room. */
.situation-page-landlord .recognition > p:last-child {
  margin-top: 34px;
  padding-top: 4px;
  max-width: 900px;
  line-height: 1.62;
}

/* Dark blocker section — keep the cards, drop the numbering. */
.situation-page-landlord .landlord-blocker {
  padding: 22px 22px 22px;
}

.situation-page-landlord .landlord-blocker::before {
  content: none;
  display: none;
}

/* Listing-friction section — keep the vertical rail, remove the numbers. */
.situation-page-landlord .fit {
  background:
    linear-gradient(
      180deg,
      rgba(7, 89, 133, .050),
      rgba(0, 124, 145, .028)
    );
}

.situation-page-landlord .fit li {
  padding: 0 0 28px 60px;
}

.situation-page-landlord .fit li::before {
  content: "";
  left: 12px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand-blue, #075985);
  border: 0;
}

.situation-page-landlord .fit li:not(:last-child)::after {
  left: 16px;
  top: 22px;
  bottom: 4px;
  width: 2px;
  background: rgba(7, 89, 133, .20);
}

/* Process section — wider, stronger horizontal read, and centered closing note. */
.situation-page-landlord .process > h2,
.situation-page-landlord .process > ol,
.situation-page-landlord .process > p {
  max-width: 1240px;
}

.situation-page-landlord .process {
  padding-top: 56px;
}

.situation-page-landlord .process ol {
  gap: 18px;
}

.situation-page-landlord .process li {
  padding: 20px 18px 18px 54px;
}

.situation-page-landlord .process li::before {
  left: 16px;
  top: 18px;
}

.situation-page-landlord .process > p {
  margin-top: 26px;
  margin-bottom: 0;
  text-align: center;
  font-weight: 700;
  line-height: 1.65;
  max-width: 980px;
}

/* FAQ — light-blue section with cleaner single-card accordions, not zebra lines. */
.situation-page-landlord .faq {
  background:
    linear-gradient(
      180deg,
      rgba(7, 89, 133, .055),
      rgba(0, 124, 145, .035)
    );
}

.situation-page-landlord .faq .landlord-faq-item {
  border: 1px solid rgba(7, 89, 133, .18);
  border-radius: 14px;
  background: #fff;
  margin: 0 0 14px;
  overflow: hidden;
  padding-bottom: 0;
  box-shadow: 0 10px 24px rgba(15, 45, 62, .04);
}

.situation-page-landlord .faq .landlord-faq-item:last-child {
  margin-bottom: 0;
}

.situation-page-landlord .faq summary {
  padding: 20px 58px 20px 22px;
}

.situation-page-landlord .faq summary::after {
  right: 16px;
  background: rgba(0, 124, 145, .10);
}

.situation-page-landlord .faq summary h3 {
  font-size: 1.06rem;
}

.situation-page-landlord .faq .landlord-faq-item > p,
.situation-page-landlord .faq .landlord-faq-item > ul,
.situation-page-landlord .faq .landlord-faq-item > ol {
  padding: 0 22px 20px;
  margin-bottom: 0;
}

.situation-page-landlord .faq details[open] {
  border-color: rgba(0, 124, 145, .28);
  box-shadow: 0 14px 30px rgba(15, 45, 62, .06);
}

/* Slightly stronger desktop width for the 3-step cards. */
@media (min-width: 980px) {
  .situation-page-landlord .process ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =====================================================================
   CHS-LANDLORD-4B — targeted copy + visual refinement
   Scope: .situation-page-landlord ONLY
   ===================================================================== */

/* Dark centerpiece heading: use its natural available width. */
.situation-page-landlord .obstacles > h2 {
  width: 100%;
  max-width: none;
  text-wrap: balance;
}

/* Listing-friction rail: preserve rail, reduce trailing air. */
.situation-page-landlord .fit {
  padding-bottom: 30px;
}

.situation-page-landlord .fit ul {
  margin-bottom: 0;
}

.situation-page-landlord .fit li:last-child {
  padding-bottom: 0;
}

.situation-page-landlord .fit li:last-child::after {
  display: none;
}

/* Process heading centered over the horizontal three-step treatment. */
.situation-page-landlord .process > h2 {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}

/* FAQ cards: restore the auto horizontal margins removed in prior pass. */
.situation-page-landlord .faq .landlord-faq-item {
  margin: 0 auto 14px;
}

.situation-page-landlord .faq .landlord-faq-item:last-child {
  margin: 0 auto;
}

@media (max-width: 759px) {
  .situation-page-landlord .obstacles > h2 {
    width: 100%;
    max-width: none;
    font-size: clamp(1.85rem, 7.5vw, 2.3rem);
    text-wrap: balance;
  }

  .situation-page-landlord .fit {
    padding-bottom: 24px;
  }

  .situation-page-landlord .process > h2 {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* =====================================================================
   CHS-LANDLORD-5 — desktop heading alignment refinement
   Scope: .situation-page-landlord ONLY
   Mobile intentionally deferred to separate visual review.
   ===================================================================== */

@media (min-width: 760px) {

  /* Dark centerpiece: return heading to centered content alignment. */
  .situation-page-landlord .obstacles > h2 {
    width: auto;
    max-width: var(--maxw, 1140px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-wrap: balance;
  }

  /* Listing-friction heading: center it over the vertical rail. */
  .situation-page-landlord .fit > h2 {
    width: 100%;
    max-width: var(--maxw, 1140px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-wrap: balance;
  }
}

/* =====================================================================
   CHS-LANDLORD-6 — mobile heading-wrap refinement
   Two headings only. Desktop intentionally unchanged.
   ===================================================================== */

@media (max-width: 759px) {

  /*
     Give these longer headings enough room to wrap naturally instead
     of producing unnecessarily short first lines.
  */
  .situation-page-landlord .fit > h2,
  .situation-page-landlord .honest > h2 {
    width: 100%;
    max-width: none;
    font-size: clamp(1.65rem, 6.8vw, 1.9rem);
    line-height: 1.14;
    letter-spacing: -0.012em;
    text-wrap: pretty;
  }
}

/* =====================================================================
   CHS-REVIEWS-5 — Reviews integrity / verification archetype
   PREVIEW refinement. Entire block scoped to .reviews-page.
   - hero integrity statement
   - review-policy vertical evidence rail
   - centered BBB verification proof
   ===================================================================== */

.reviews-page .reviews-hero-manifesto {
  margin: clamp(2.25rem, 6vh, 4.75rem) 0 0;
  max-width: 15ch;
  font-size: clamp(1.65rem, 3vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 750;
  text-wrap: balance;
}

.reviews-page .reviews-hero-manifesto span,
.reviews-page .reviews-hero-manifesto strong {
  display: block;
}

.reviews-page .reviews-hero-manifesto span {
  color: rgba(255, 255, 255, 0.82);
}

.reviews-page .reviews-hero-manifesto strong {
  margin-top: 0.3em;
  color: #fff;
  font-weight: 800;
}

/* Review policy: open vertical rail, not a card wall. */
.reviews-page .policy ul {
  position: relative;
  list-style: none;
  margin-top: 1.75rem;
  padding: 0 0 0 2.1rem;
  border-left: 3px solid var(--cta-color);
}

.reviews-page .policy li {
  position: relative;
  margin: 0;
  padding: 0 0 1.35rem 0.45rem;
}

.reviews-page .policy li:last-child {
  padding-bottom: 0;
}

.reviews-page .policy li::before {
  content: "";
  position: absolute;
  left: -2.62rem;
  top: 0.55em;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  background: var(--cta-color);
  box-shadow: 0 0 0 5px #fff;
}

.reviews-page .policy li strong {
  color: var(--text-dark);
}

/* BBB proof is the visual conclusion to the verification section. */
.reviews-page .verify .bbb-link {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 1.6rem auto 0;
}

.reviews-page .verify .bbb-badge {
  display: block;
  width: min(200px, 70vw);
  height: auto;
}

@media (max-width: 699px) {
  .reviews-page .reviews-hero-manifesto {
    margin-top: 2rem;
    max-width: 17ch;
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .reviews-page .policy ul {
    padding-left: 1.75rem;
  }

  .reviews-page .policy li {
    padding-left: 0.3rem;
  }

  .reviews-page .policy li::before {
    left: -2.25rem;
  }
}

/* =====================================================================
   CHS-REVIEWS-6-v2 — Reviews desktop visual refinement
   Entire block scoped to .reviews-page.
   ===================================================================== */

/* One strong white treatment for all three manifesto lines. */
.reviews-page .reviews-hero-manifesto span,
.reviews-page .reviews-hero-manifesto strong {
  color: #fff;
}

/* Replace the full-height policy border with a line that begins at
   the first evidence marker, eliminating the short protrusion above it. */
.reviews-page .policy ul {
  border-left: 0;
}

.reviews-page .policy ul::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 0.15rem;
  width: 3px;
  border-radius: 999px;
  background: var(--cta-color);
}

/* Give the verification section a deliberate visual axis. */
.reviews-page .verify > h2 {
  text-align: center;
}

.reviews-page .verify > p:last-child {
  text-align: center;
}

/* =====================================================================
   CHS-REVIEWS-7 — manifesto weight + policy-rail geometry
   Entire block scoped to .reviews-page.
   ===================================================================== */

/* Treat the three-line manifesto as one equally strong statement.
   Semantic <strong> remains in the HTML, but visual weight is unified. */
.reviews-page .reviews-hero-manifesto span,
.reviews-page .reviews-hero-manifesto strong {
  font-weight: 800;
}

/* Center the 3px rail through the circular markers instead of allowing
   the rail to sit a few pixels to their right. Desktop geometry:
   2.10rem ul padding - 2.62rem dot offset + .39rem dot radius = -.13rem.
   Subtract half the 3px rail width to place the rail's CENTER there. */
.reviews-page .policy ul::before {
  left: calc(-0.13rem - 1.5px);
}

/* Mobile uses slightly different policy padding / marker offsets:
   1.75rem - 2.25rem + .39rem = -.11rem. */
@media (max-width: 699px) {
  .reviews-page .policy ul::before {
    left: calc(-0.11rem - 1.5px);
  }
}

/* =====================================================================
   CHS-REVIEWS-8 — mobile spacing + rail tail + manifesto wrap
   Entire block scoped to .reviews-page and mobile only.
   ===================================================================== */

@media (max-width: 699px) {
  /* Let the manifesto use the full mobile width and wrap naturally,
     instead of balancing into an early break. */
  .reviews-page .reviews-hero-manifesto {
    max-width: none;
    font-size: clamp(1.32rem, 6.6vw, 1.78rem);
    line-height: 1.06;
    text-wrap: normal;
  }

  /* Tighten section spacing so the page still feels deliberate,
     but less airy than before on mobile. */
  .reviews-page .hero {
    padding-bottom: 2.75rem;
  }

  .reviews-page .why-empty,
  .reviews-page .policy,
  .reviews-page .verify,
  .reviews-page .share,
  .reviews-page .final-cta {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  /* Cover the small rail tail beneath the final marker. */
  .reviews-page .policy li:last-child::after {
    content: "";
    position: absolute;
    left: calc(-1.86rem - 1.5px);
    top: calc(0.55em + 0.78rem);
    width: 3px;
    height: 4rem;
    background: #fff;
    pointer-events: none;
  }
}

/* ================================================================
   CHS-WHY-6J: UNIFIED HERO TYPOGRAPHY + DESKTOP MEASURE
   Page-scoped.
   ================================================================ */

.why-choose-us-page .reason h2 {
  display: block;
  margin-top: 0;
  margin-bottom: .9rem;
}

.why-choose-us-page .reason h2::before {
  content: none;
}


/* 01 — owners. Subtle low fade only. */

.why-choose-us-page main > .reason-owner {
  max-width: 900px;
  margin-inline: auto;
  padding-block: clamp(2.2rem, 5vw, 3.5rem);
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.why-choose-us-page main > .reason-owner > p {
  max-width: 46rem;
  margin-top: 0;
  margin-bottom: 0;
}

.why-choose-us-page .why-owner-proof {
  width: min(100%, 330px);
  margin: .35rem auto 0;
  background: transparent;
}

.why-choose-us-page .why-owner-proof img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 91%,
    rgba(0, 0, 0, .88) 94%,
    rgba(0, 0, 0, .45) 97%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 91%,
    rgba(0, 0, 0, .88) 94%,
    rgba(0, 0, 0, .45) 97%,
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}


/* 02 + 03 */

.why-choose-us-page .why-proof-pair {
  max-width: 1040px;
  margin-inline: auto;
  padding:
    clamp(1rem, 2vw, 1.5rem)
    clamp(1rem, 3vw, 1.5rem)
    clamp(2.6rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.why-choose-us-page .why-proof-pair .reason {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 0;
}

.why-choose-us-page .why-proof-pair .reason > p {
  margin-bottom: 0;
}


/* 04 + 05 */

.why-choose-us-page .why-proof-band {
  width: 100%;
  background: #075985;
  color: #fff;
  padding:
    clamp(2.8rem, 6vw, 4.8rem)
    1rem;
}

.why-choose-us-page .why-proof-band-inner {
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
}

.why-choose-us-page .why-proof-band .reason {
  padding: clamp(1rem, 2vw, 1.25rem) 0;
}

.why-choose-us-page .why-proof-band .reason h2 {
  color: #fff;
}

.why-choose-us-page .why-proof-band .reason p {
  color: #eef8fc;
}

.why-choose-us-page .why-proof-band .reason-fit {
  padding-left: 0;
  border-left: 0;
}

.why-choose-us-page .why-bbb-proof {
  width: min(100%, 390px);
  margin: 1.35rem auto .15rem;
}

.why-choose-us-page .why-bbb-proof a {
  display: block;
  border-radius: 14px;
}

.why-choose-us-page .why-bbb-proof img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .30);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.why-choose-us-page .why-bbb-proof a:focus-visible {
  outline: 3px solid #cbd5e1;
  outline-offset: 4px;
}


/* 06 + 07 */

.why-choose-us-page main > .reason-private,
.why-choose-us-page main > .reason-pressure {
  max-width: 900px;
  margin-inline: auto;
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
  border: 0;
}

.why-choose-us-page main > .reason-private h2,
.why-choose-us-page main > .reason-pressure h2 {
  width: 100%;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}

.why-choose-us-page main > .reason-private > p,
.why-choose-us-page main > .reason-pressure > p {
  max-width: 56rem;
  margin: 0 auto;
}


/* Approved honesty transition. */

.why-choose-us-page main > .honest {
  max-width: 940px;
  margin:
    clamp(1rem, 3vw, 2rem)
    auto
    clamp(2.5rem, 6vw, 4rem);
  padding:
    clamp(2rem, 5vw, 3.25rem)
    clamp(1rem, 4vw, 2.4rem);
  background: #f3f8fa;
  border-top: 1px solid rgba(7, 89, 133, .20);
  border-bottom: 1px solid rgba(7, 89, 133, .20);
  box-shadow: none;
}

.why-choose-us-page main > .honest h2,
.why-choose-us-page main > .honest ul {
  max-width: 46rem;
}

.why-choose-us-page main > .honest h2 {
  margin-top: 0;
}

.why-choose-us-page main > .honest ul {
  padding-left: 1.25rem;
}

.why-choose-us-page main > .honest li + li {
  margin-top: .85rem;
}


/* Desktop */

@media (min-width: 760px) {
  .why-choose-us-page main > .reason-owner {
    grid-template-columns:
      minmax(0, 1.65fr)
      minmax(230px, .72fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }

  .why-choose-us-page main > .reason-owner h2,
  .why-choose-us-page main > .reason-owner > p {
    grid-column: 1;
  }

  .why-choose-us-page .why-owner-proof {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    justify-self: end;
  }

  .why-choose-us-page .why-proof-pair,
  .why-choose-us-page .why-proof-band-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-choose-us-page .why-proof-band-inner > .reason-bbb {
    padding-right: clamp(1.8rem, 4vw, 2.8rem);
  }

  /*
    Right side gets a little more breathing room from the divider.
    This is intentionally a small shift, not a new layout.
  */
  .why-choose-us-page .why-proof-band-inner > .reason-fit {
    border-left: 1px solid rgba(148, 163, 184, .50);
    padding-left: clamp(3rem, 6vw, 4.5rem);
  }
}

/* ---------------------------------------------------------------
   CHS-WHY-6D additions:
   hero bridge + mobile-only finish.
   --------------------------------------------------------------- */

.why-choose-us-page .hero h1,
.why-choose-us-page .hero .why-hero-bridge {
  font-family: inherit;
  font-size: clamp(2rem, 8vw, 3.55rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.16;
  letter-spacing: normal;
  color: #fff;
  text-wrap: balance;
}

.why-choose-us-page .hero .why-hero-bridge {
  max-width: 18ch;
  margin-top: clamp(2.25rem, 5vw, 4.5rem);
  margin-bottom: 0;
}

@media (max-width: 759px) {
  /*
    Keep the successful 02 / 03 spacing untouched.

    Tighten only the 06 -> 07 white-background transition so it
    follows approximately the same visual rhythm.
  */
  .why-choose-us-page main > .reason-private {
    padding-bottom: 1.6rem;
  }

  .why-choose-us-page main > .reason-pressure {
    padding-top: 1.6rem;
  }

  /*
    Remove the small white interruption between the pale honesty
    field and the colored final CTA on mobile.
  */
  .why-choose-us-page main > .honest {
    margin-bottom: 0;
  }

  .why-choose-us-page main > .honest + .final-cta {
    margin-top: 0;
  }

  /*
    Strong enough to occupy the hero's empty real estate, but scaled
    appropriately for the narrow mobile layout.
  */
  .why-choose-us-page .hero .why-hero-bridge {
    max-width: 100%;
    margin-top: 2rem;
  }
}

/* =====================================================================
   CHS-REVIEWS-TYPE-2: H1-COMPATIBLE MANIFESTO LETTER TREATMENT
   Genuine-defect correction only.
   Preserve manifesto size, line-height, measure, and mobile wrapping.
   ===================================================================== */
.reviews-page .reviews-hero-manifesto {
  font-family: inherit;
  font-weight: 700;
  font-style: normal;
  letter-spacing: normal;
  color: #fff;
}

.reviews-page .reviews-hero-manifesto span,
.reviews-page .reviews-hero-manifesto strong {
  color: inherit;
  font-weight: inherit;
}

/* =====================================================================
   CHS-REVIEWS-TYPE-3: MOBILE MANIFESTO RHETORICAL SPACING
   Preserve the approved desktop break; tighten only the mobile gap.
   ===================================================================== */
@media (max-width: 699px) {
  .reviews-page .reviews-hero-manifesto strong {
    margin-top: 0;
  }
}

/* =====================================================================
   CHS-HOW-3-FLAGSHIP-PILOT
   How It Works — transparency / offer-economics / realistic-timeline pilot.
   PREVIEW pilot. Entire block scoped to .how-it-works-page.
   ===================================================================== */

.how-it-works-page .how-kicker {
  margin: 0 0 .55rem;
  color: var(--brand-blue);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.how-it-works-page .how-section-intro {
  max-width: 54rem;
  margin-top: .8rem;
  font-size: 1.08rem;
}

.how-it-works-page :is(
  .how-overview,
  .how-step,
  .offer-math,
  .offer-integrity,
  .how-timeline,
  .how-skip,
  .how-honest-choice,
  .how-faq,
  .how-alt
) > h2 {
  max-width: 54rem;
}

.how-it-works-page .how-overview {
  background: #fff;
}

.how-it-works-page .how-overview > :is(h2, p) {
  text-align: center;
}

.how-it-works-page .how-overview-grid {
  max-width: var(--maxw) !important;
  margin: 1.75rem auto 0 !important;
  padding: 0;
  list-style: none;
  counter-reset: how-overview;
  display: grid;
  gap: 1rem;
}

.how-it-works-page .how-overview-grid li {
  counter-increment: how-overview;
  position: relative;
  padding: 4.1rem 1.25rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 12px 26px rgba(15, 45, 62, .055);
}

.how-it-works-page .how-overview-grid li::before {
  content: counter(how-overview);
  position: absolute;
  top: 1.15rem;
  left: 1.25rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 850;
}

.how-it-works-page .how-overview-grid strong {
  display: block;
  color: var(--text-dark);
  font-size: 1.08rem;
  line-height: 1.3;
}

.how-it-works-page .how-overview-grid span {
  display: block;
  margin-top: .55rem;
}

.how-it-works-page .how-step {
  background: linear-gradient(180deg, #fff 0%, #f7fafc 100%);
  border-top: 1px solid #e2e8f0;
}

.how-it-works-page .how-step-heading {
  max-width: var(--maxw) !important;
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.35rem !important;
}

.how-it-works-page .how-step-heading h2 {
  margin: 0;
}

.how-it-works-page .how-step-heading .how-kicker {
  margin-bottom: .25rem;
}

.how-it-works-page .how-step-number {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--cta-color);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0, 107, 122, .18);
}

.how-it-works-page .how-two-up {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.45rem auto 0 !important;
  display: grid;
  gap: 1rem;
}

.how-it-works-page .how-info-panel {
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}

.how-it-works-page .how-info-panel-good {
  border-top: 4px solid var(--cta-color);
}

.how-it-works-page .how-info-panel h3 {
  margin: 0 0 .7rem;
  color: var(--brand-blue);
  font-size: 1.08rem;
}

.how-it-works-page .how-info-panel ul {
  margin: 0;
  padding-left: 1.25rem;
}

.how-it-works-page .how-info-panel li + li {
  margin-top: .45rem;
}

.how-it-works-page .how-next {
  max-width: var(--maxw) !important;
  margin-top: 1.4rem !important;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--cta-color);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-accent);
}

.how-it-works-page .offer-math {
  background: linear-gradient(135deg, #092531 0%, #0b3945 100%);
  color: #fff;
}

.how-it-works-page .offer-math > :is(h2, p) {
  color: #fff;
}

.how-it-works-page .offer-math .how-kicker {
  color: #9ee9f0;
}

.how-it-works-page .offer-formula {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.7rem auto 0 !important;
  display: grid;
  gap: .75rem;
}

.how-it-works-page .formula-item {
  min-height: 104px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.07);
}

.how-it-works-page .formula-label {
  display: block;
  color: #bce6eb;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.how-it-works-page .formula-item strong {
  display: block;
  margin-top: .35rem;
  color: #fff;
  line-height: 1.25;
}

.how-it-works-page .formula-result {
  border-color: #58c6d2;
  background: #fff;
}

.how-it-works-page .formula-result .formula-label {
  color: var(--brand-blue);
}

.how-it-works-page .formula-result strong {
  color: var(--text-dark);
}

.how-it-works-page .formula-symbol {
  display: grid;
  place-items: center;
  min-height: 2rem;
  color: #a9d8dd;
  font-size: 1.5rem;
  font-weight: 900;
}

.how-it-works-page .how-truth-note {
  max-width: var(--contentw) !important;
  margin: 1.6rem auto 0 !important;
  padding: 1.15rem 1.25rem;
  border-left: 4px solid #67d3de;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255,255,255,.1);
}

.how-it-works-page .how-truth-note h3 {
  margin: 0 0 .45rem;
  color: #fff;
}

.how-it-works-page .how-truth-note p {
  margin: 0;
}

.how-it-works-page .offer-integrity {
  background: #fff;
}

.how-it-works-page .how-timeline {
  background: var(--surface-accent);
  border-top: 1px solid #cfe8ee;
  border-bottom: 1px solid #cfe8ee;
}

.how-it-works-page .timeline-grid {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.5rem auto 0 !important;
  display: grid;
  gap: 1rem;
}

.how-it-works-page .timeline-card {
  padding: 1.3rem 1.35rem;
  border: 1px solid #bcdde3;
  border-radius: var(--radius-md);
  background: #fff;
}

.how-it-works-page .timeline-label {
  color: var(--brand-blue);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.how-it-works-page .timeline-card h3 {
  margin: .35rem 0 .65rem;
}

.how-it-works-page .timeline-card p {
  margin-bottom: 0;
}

.how-it-works-page .how-timing-caveat {
  max-width: var(--contentw) !important;
  margin-top: 1.4rem !important;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--brand-blue);
  background: #fff;
}

.how-it-works-page .how-skip {
  background: #fff;
}

.how-it-works-page .how-table-wrap {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.5rem auto 0 !important;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(15,45,62,.06);
}

.how-it-works-page .how-compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
}

.how-it-works-page .how-compare-table :is(th, td) {
  padding: .95rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.how-it-works-page .how-compare-table thead th {
  background: #0b2f3c;
  color: #fff;
}

.how-it-works-page .how-compare-table tbody th {
  width: 25%;
  color: var(--text-dark);
}

.how-it-works-page .how-compare-table tbody td:nth-child(2) {
  color: #075985;
  font-weight: 700;
  background: #f4fbfc;
}

.how-it-works-page .how-compare-table tr:last-child :is(th, td) {
  border-bottom: 0;
}

.how-it-works-page .how-honest-choice {
  background: #f7f9fb;
  border-top: 1px solid #e0e7ed;
  border-bottom: 1px solid #e0e7ed;
}

.how-it-works-page .choice-grid {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.4rem auto 0 !important;
  display: grid;
  gap: 1rem;
}

.how-it-works-page .choice-card {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}

.how-it-works-page .choice-card h3 {
  margin-top: 0;
  color: var(--brand-blue);
}

.how-it-works-page .choice-card ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.how-it-works-page .how-honesty-line {
  max-width: var(--contentw) !important;
  margin-top: 1.35rem !important;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--cta-color);
  background: #fff;
}

.how-it-works-page .how-faq {
  background: var(--surface-accent);
}

.how-it-works-page .how-faq-shell {
  width: 100%;
  max-width: var(--contentw) !important;
  margin: 1.25rem auto 0 !important;
  overflow: hidden;
  border: 1px solid #cbdde3;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 14px 30px rgba(15,35,55,.07);
}

.how-it-works-page .how-faq-item {
  margin: 0;
  border-top: 1px solid #dce4ea;
}

.how-it-works-page .how-faq-item:first-child {
  border-top: 0;
}

.how-it-works-page .how-faq-item summary {
  position: relative;
  min-height: 58px;
  display: block;
  padding: 1rem 3.25rem 1rem 1.05rem;
  cursor: pointer;
  list-style: none;
}

.how-it-works-page .how-faq-item summary::-webkit-details-marker {
  display: none;
}

.how-it-works-page .how-faq-item summary:hover {
  background: #f3f8fa;
}

.how-it-works-page .how-faq-item[open] summary {
  background: var(--surface-accent);
  border-bottom: 1px solid #dce4ea;
}

.how-it-works-page .how-faq-item summary:focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: -3px;
}

.how-it-works-page .how-faq-item summary h3 {
  margin: 0;
  color: var(--text-dark);
  font-size: 1.06rem;
  line-height: 1.35;
}

.how-it-works-page .how-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-blue);
  font-size: 1.4rem;
  font-weight: 850;
}

.how-it-works-page .how-faq-item[open] summary::after {
  content: "−";
}

.how-it-works-page .how-faq-answer {
  padding: 1rem 1.1rem 1.15rem;
}

.how-it-works-page .how-faq-answer p {
  margin: 0;
}

.how-it-works-page .how-alt {
  background: #fff;
  text-align: center;
}

.how-it-works-page .how-alt h2 {
  margin-left: auto;
  margin-right: auto;
}

.how-it-works-page .how-alt p {
  max-width: 50rem !important;
}

@media (min-width: 760px) {
  .how-it-works-page .how-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .how-it-works-page .how-two-up,
  .how-it-works-page .timeline-grid,
  .how-it-works-page .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .how-it-works-page .offer-formula {
    grid-template-columns:
      minmax(0, 1fr) auto
      minmax(0, 1fr) auto
      minmax(0, 1fr) auto
      minmax(0, 1fr) auto
      minmax(0, 1.1fr);
    align-items: stretch;
  }

  .how-it-works-page .formula-symbol {
    min-height: 104px;
  }
}

@media (max-width: 759px) {
  .how-it-works-page .how-step-heading {
    align-items: flex-start;
  }

  .how-it-works-page .how-step-number {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.2rem;
  }

  .how-it-works-page .how-table-wrap {
    border-radius: var(--radius-sm);
  }
}

/* =====================================================================
   CHS-HOW-4-UNDERWRITING-TRANSPARENCY
   Hypothetical underwriting classroom + assignment economics +
   contract-transparency framework.
   PREVIEW pilot. Entire block scoped to .how-it-works-page.
   ===================================================================== */

.how-it-works-page .worked-example {
  background: #f7f9fb;
  border-top: 1px solid #dfe8ee;
  border-bottom: 1px solid #dfe8ee;
}

.how-it-works-page .worked-example > h2,
.how-it-works-page .assignment-transparency > h2,
.how-it-works-page .contract-transparency > h2 {
  max-width: 54rem;
}

.how-it-works-page .example-disclaimer {
  max-width: var(--contentw) !important;
  margin: 1.25rem auto 0 !important;
  padding: 1rem 1.1rem;
  border: 1px solid #b9dbe2;
  border-left: 5px solid var(--brand-cyan);
  border-radius: var(--radius-sm);
  background: #fff;
}

.how-it-works-page .example-disclaimer strong {
  display: block;
  color: var(--brand-blue);
}

.how-it-works-page .example-disclaimer p {
  margin: .35rem 0 0;
}

.how-it-works-page .example-property {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.35rem auto 0 !important;
  display: grid;
  gap: .8rem;
}

.how-it-works-page .example-property > div {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}

.how-it-works-page .example-label {
  display: block;
  margin-bottom: .25rem;
  color: var(--text-muted);
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.how-it-works-page .example-property strong {
  color: var(--brand-blue);
  font-size: 1.1rem;
}

.how-it-works-page .example-math-shell {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.25rem auto 0 !important;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 35, 55, .06);
}

.how-it-works-page .example-math-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.how-it-works-page .example-math-table :is(th, td) {
  padding: .9rem 1rem;
  border-bottom: 1px solid #e1e9ee;
  text-align: left;
  vertical-align: top;
}

.how-it-works-page .example-math-table thead th {
  background: #0b2f3c;
  color: #fff;
}

.how-it-works-page .example-math-table tbody th {
  width: 25%;
  color: var(--text-dark);
}

.how-it-works-page .example-math-table .amount {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.how-it-works-page .example-math-table .positive {
  color: var(--brand-blue);
}

.how-it-works-page .example-math-table .subtotal-row {
  background: #f4fafb;
}

.how-it-works-page .example-math-table .result-row {
  background: #eaf7f8;
}

.how-it-works-page .example-math-table .result-row :is(th, td) {
  border-top: 2px solid var(--brand-cyan);
  border-bottom: 0;
  font-weight: 850;
}

.how-it-works-page .example-equation {
  width: 100%;
  max-width: var(--contentw) !important;
  margin: 1.35rem auto 0 !important;
  padding: 1.15rem 1.25rem;
  display: grid;
  gap: .4rem;
  border-radius: var(--radius-md);
  background: #0b2f3c;
  color: #d9f1f4;
  font-variant-numeric: tabular-nums;
}

.how-it-works-page .example-equation strong {
  margin-top: .25rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 1.13rem;
}

.how-it-works-page .example-explain-grid {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.35rem auto 0 !important;
  display: grid;
  gap: 1rem;
}

.how-it-works-page .profit-sensitivity {
  max-width: var(--maxw) !important;
  margin: 1.6rem auto 0 !important;
  padding: 1.25rem;
  border: 1px solid #ccdfe5;
  border-radius: var(--radius-md);
  background: #fff;
}

.how-it-works-page .profit-sensitivity > h3 {
  margin-top: 0;
  color: var(--brand-blue);
}

.how-it-works-page .profit-table-wrap {
  margin-top: 1rem;
  overflow-x: auto;
}

.how-it-works-page .profit-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.how-it-works-page .profit-table :is(th, td) {
  padding: .8rem .9rem;
  border-bottom: 1px solid #e1e9ee;
  text-align: left;
}

.how-it-works-page .profit-table thead th {
  background: #f1f6f8;
  color: var(--text-dark);
}

.how-it-works-page .profit-table .selected-row {
  background: #eaf7f8;
}

.how-it-works-page .profit-note {
  margin-bottom: 0;
  padding-top: .85rem;
}

.how-it-works-page .assignment-transparency {
  background: #fff;
}

.how-it-works-page .three-party-economics {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.5rem auto 0 !important;
  display: grid;
  gap: 1rem;
}

.how-it-works-page .economics-card {
  position: relative;
  padding: 3.7rem 1.2rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.how-it-works-page .economics-card-accent {
  border-top: 4px solid var(--cta-color);
  background: #f3fbfc;
}

.how-it-works-page .economics-number {
  position: absolute;
  top: 1rem;
  left: 1.15rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 850;
}

.how-it-works-page .economics-card h3 {
  margin: 0 0 .6rem;
  color: var(--brand-blue);
}

.how-it-works-page .economics-card p {
  margin-bottom: 0;
}

.how-it-works-page .assignment-example {
  max-width: var(--maxw) !important;
  margin: 1.5rem auto 0 !important;
  padding: 1.25rem;
  border: 1px solid #cfe1e7;
  border-radius: var(--radius-md);
  background: #f7f9fb;
}

.how-it-works-page .assignment-example h3 {
  margin-top: 0;
}

.how-it-works-page .assignment-flow {
  margin: 1rem 0;
  display: grid;
  gap: .65rem;
}

.how-it-works-page .assignment-flow > div {
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.how-it-works-page .assignment-flow > div span {
  display: block;
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 750;
}

.how-it-works-page .assignment-flow > div strong {
  display: block;
  margin-top: .2rem;
  color: var(--brand-blue);
  font-size: 1.15rem;
}

.how-it-works-page .assignment-flow .assignment-endbuyer {
  border-color: #77c9d2;
  background: #eefafb;
}

.how-it-works-page .assignment-plus,
.how-it-works-page .assignment-equals {
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  font-size: 1.4rem;
  font-weight: 900;
}

.how-it-works-page .speed-bridge {
  max-width: var(--contentw) !important;
  margin: 1.5rem auto 0 !important;
  padding: 1.3rem 1.35rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #092531 0%, #0b3945 100%);
  color: #fff;
}

.how-it-works-page .speed-bridge .how-kicker {
  color: #9ee9f0;
}

.how-it-works-page .speed-bridge h3 {
  margin: .25rem 0 .75rem;
  color: #fff;
}

.how-it-works-page .speed-bridge p:last-child {
  margin-bottom: 0;
}

.how-it-works-page .assignment-principle {
  max-width: var(--contentw) !important;
  margin: 1.35rem auto 0 !important;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--cta-color);
  background: var(--surface-accent);
}

.how-it-works-page .assignment-principle strong,
.how-it-works-page .assignment-principle span {
  display: block;
}

.how-it-works-page .assignment-principle span {
  margin-top: .25rem;
}

.how-it-works-page .contract-transparency {
  background: #f7f9fb;
  border-top: 1px solid #dfe8ee;
  border-bottom: 1px solid #dfe8ee;
}

.how-it-works-page .contract-checks {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.35rem auto 0 !important;
  display: grid;
  gap: .8rem;
}

.how-it-works-page .contract-checks > div {
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}

.how-it-works-page .contract-checks strong {
  display: block;
  color: var(--brand-blue);
}

.how-it-works-page .contract-checks span {
  display: block;
  margin-top: .3rem;
}

.how-it-works-page .contract-future-note {
  max-width: var(--contentw) !important;
  margin-top: 1.3rem !important;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--brand-cyan);
  background: #fff;
}

@media (min-width: 760px) {
  .how-it-works-page .example-property {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .how-it-works-page .example-explain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-it-works-page .three-party-economics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .how-it-works-page .contract-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .how-it-works-page .assignment-flow {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr);
    align-items: stretch;
  }
}

/* =====================================================================
   CHS-HOW-5-MOBILE-TABLE-REFLOW
   Mobile-only reflow for the three information-heavy How It Works tables.
   Desktop table geometry is intentionally unchanged.
   Entire block scoped to .how-it-works-page.
   ===================================================================== */

@media (max-width: 759px) {

  /* ---------------------------------------------------------------
     Shared: remove horizontal-scroll dependency.
     --------------------------------------------------------------- */

  .how-it-works-page .example-math-shell,
  .how-it-works-page .profit-table-wrap,
  .how-it-works-page .how-table-wrap {
    overflow: visible;
  }

  .how-it-works-page .example-math-table,
  .how-it-works-page .profit-table,
  .how-it-works-page .how-compare-table {
    min-width: 0;
  }

  /* ---------------------------------------------------------------
     Hypothetical underwriting table
     Each underwriting line becomes one readable mobile record.
     --------------------------------------------------------------- */

  .how-it-works-page .example-math-shell {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .how-it-works-page .example-math-table,
  .how-it-works-page .example-math-table tbody,
  .how-it-works-page .example-math-table tr,
  .how-it-works-page .example-math-table th,
  .how-it-works-page .example-math-table td {
    display: block;
    width: 100%;
  }

  .how-it-works-page .example-math-table thead {
    display: none;
  }

  .how-it-works-page .example-math-table tbody {
    display: grid;
    gap: .8rem;
  }

  .how-it-works-page .example-math-table tbody tr {
    padding: 1rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 35, 55, .035);
  }

  .how-it-works-page .example-math-table tbody th,
  .how-it-works-page .example-math-table tbody td {
    padding: 0;
    border: 0;
  }

  .how-it-works-page .example-math-table tbody th {
    margin-bottom: .35rem;
    color: var(--brand-blue);
    font-size: 1rem;
    line-height: 1.3;
  }

  .how-it-works-page .example-math-table tbody td:nth-child(2) {
    color: var(--text-dark);
    line-height: 1.5;
  }

  .how-it-works-page .example-math-table tbody .amount {
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid #e1e9ee;
    text-align: left;
    color: var(--text-dark);
    font-size: 1.08rem;
  }

  .how-it-works-page .example-math-table tbody .amount::before {
    content: "Amount";
    display: block;
    margin-bottom: .18rem;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .how-it-works-page .example-math-table tbody tr.subtotal-row {
    background: #f4fafb;
  }

  .how-it-works-page .example-math-table tbody tr.result-row {
    border: 2px solid var(--brand-cyan);
    background: #eaf7f8;
  }

  .how-it-works-page .example-math-table .result-row :is(th, td) {
    border-top: 0;
  }

  .how-it-works-page .example-math-table .result-row .amount {
    border-top: 1px solid #b9dce2;
    color: var(--brand-blue);
    font-size: 1.18rem;
  }

  /* ---------------------------------------------------------------
     Buyer-profit sensitivity table
     Show all three values without horizontal scrolling.
     --------------------------------------------------------------- */

  .how-it-works-page .profit-table-wrap {
    overflow: visible;
  }

  .how-it-works-page .profit-table,
  .how-it-works-page .profit-table tbody,
  .how-it-works-page .profit-table tr,
  .how-it-works-page .profit-table td {
    display: block;
    width: 100%;
  }

  .how-it-works-page .profit-table thead {
    display: none;
  }

  .how-it-works-page .profit-table tbody {
    display: grid;
    gap: .7rem;
  }

  .how-it-works-page .profit-table tbody tr {
    padding: .95rem 1rem;
    border: 1px solid #d9e4e9;
    border-radius: var(--radius-sm);
    background: #fff;
  }

  .how-it-works-page .profit-table tbody tr.selected-row {
    border-color: #79c9d2;
    background: #eaf7f8;
  }

  .how-it-works-page .profit-table tbody td {
    padding: .2rem 0;
    border: 0;
  }

  .how-it-works-page .profit-table tbody td::before {
    display: block;
    margin-bottom: .05rem;
    color: var(--text-muted);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .how-it-works-page .profit-table tbody td:nth-child(1)::before {
    content: "Target profit";
  }

  .how-it-works-page .profit-table tbody td:nth-child(2)::before {
    content: "Dollar target";
  }

  .how-it-works-page .profit-table tbody td:nth-child(3)::before {
    content: "Resulting seller-side MAO";
  }

  .how-it-works-page .profit-table tbody td:nth-child(3) {
    margin-top: .35rem;
    padding-top: .55rem;
    border-top: 1px solid #dce6ea;
    color: var(--brand-blue);
    font-size: 1.07rem;
  }

  /* ---------------------------------------------------------------
     Direct cash vs traditional listing table
     One selling task per card, with both paths visible together.
     --------------------------------------------------------------- */

  .how-it-works-page .how-table-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .how-it-works-page .how-compare-table,
  .how-it-works-page .how-compare-table tbody,
  .how-it-works-page .how-compare-table tr,
  .how-it-works-page .how-compare-table th,
  .how-it-works-page .how-compare-table td {
    display: block;
    width: 100%;
  }

  .how-it-works-page .how-compare-table thead {
    display: none;
  }

  .how-it-works-page .how-compare-table tbody {
    display: grid;
    gap: .85rem;
  }

  .how-it-works-page .how-compare-table tbody tr {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
  }

  .how-it-works-page .how-compare-table tbody th,
  .how-it-works-page .how-compare-table tbody td {
    padding: .9rem 1rem;
    border: 0;
  }

  .how-it-works-page .how-compare-table tbody th {
    width: 100%;
    background: #0b2f3c;
    color: #fff;
    font-size: 1rem;
  }

  .how-it-works-page .how-compare-table tbody td {
    color: var(--text-dark);
    font-weight: 500;
    background: #fff;
  }

  .how-it-works-page .how-compare-table tbody td:nth-child(2) {
    color: var(--brand-blue);
    font-weight: 700;
    background: #f0fafb;
  }

  .how-it-works-page .how-compare-table tbody td:nth-child(3) {
    border-top: 1px solid #e1e9ee;
  }

  .how-it-works-page .how-compare-table tbody td::before {
    display: block;
    margin-bottom: .22rem;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .how-it-works-page .how-compare-table tbody td:nth-child(2)::before {
    content: "Direct sale to us";
    color: var(--brand-blue);
  }

  .how-it-works-page .how-compare-table tbody td:nth-child(3)::before {
    content: "Traditional listing";
    color: var(--text-muted);
  }
}

/* =====================================================================
   CHS-HOW-6-MOBILE-UNDERWRITE-LABEL-WIDTH
   Genuine mobile specificity correction.
   Desktop rule gives underwriting row headings width:25%.
   CHS-HOW-5 converted rows to cards but the more-specific desktop
   heading width continued to win in the cascade.
   ===================================================================== */

@media (max-width: 759px) {
  .how-it-works-page .example-math-table tbody th {
    width: 100%;
    max-width: none;
  }
}

/* =====================================================================
   CHS-HOW-8-DESKTOP-OFFER-FORMULA-REFLOW
   The underwriting formula now contains six economic cards.
   Earlier desktop geometry was built for five and therefore wrapped
   "=" + the MAO result onto a second row.
   Mobile/tablet stacked behavior is intentionally unchanged.
   ===================================================================== */

@media (min-width: 980px) {

  .how-it-works-page .offer-formula {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.35rem;
    align-items: stretch;
  }

  /*
    The original operator elements remain in the HTML for semantic
    sequence and mobile presentation. On desktop they no longer consume
    separate grid columns; operators are positioned between the six
    economic cards instead.
  */
  .how-it-works-page .offer-formula > .formula-symbol {
    display: none;
  }

  .how-it-works-page .offer-formula > .formula-item {
    position: relative;
    min-width: 0;
    min-height: 190px;
    padding: 1.1rem;
    justify-content: center;
  }

  .how-it-works-page .offer-formula > .formula-item:not(:first-child)::before {
    content: "−";
    position: absolute;
    left: -.675rem;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #a9d8dd;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
  }

  .how-it-works-page .offer-formula > .formula-result::before {
    content: "=";
  }

  .how-it-works-page .offer-formula > .formula-result {
    border-width: 2px;
  }
}

/* =====================================================================
   CHS-HOW-9-DESKTOP-SECTION-EYEBROW-ALIGNMENT
   Align top-level How It Works section eyebrows to the main content
   geometry instead of the browser edge.
   Nested/card kickers are intentionally excluded.
   Mobile geometry is intentionally unchanged.
   ===================================================================== */

@media (min-width: 760px) {

  .how-it-works-page :is(
    .how-overview,
    .offer-math,
    .worked-example,
    .assignment-transparency,
    .offer-integrity,
    .contract-transparency,
    .how-timeline,
    .how-skip,
    .how-honest-choice,
    .how-faq
  ) > .how-kicker {
    width: 100%;
    max-width: var(--maxw);
    margin-left: auto;
    margin-right: auto;
  }
}

/* =====================================================================
   CHS-HOW-10-DESKTOP-SECTION-EYEBROW-VERTICAL-NUDGE
   Move top-level section eyebrows approximately one text line upward
   into existing section whitespace.

   IMPORTANT:
   - no section padding is changed
   - no section margin is changed
   - no section height is increased
   - mobile geometry is intentionally unchanged
   - nested/card kickers remain untouched
   ===================================================================== */

@media (min-width: 760px) {

  .how-it-works-page :is(
    .how-overview,
    .offer-math,
    .worked-example,
    .assignment-transparency,
    .offer-integrity,
    .contract-transparency,
    .how-timeline,
    .how-skip,
    .how-honest-choice,
    .how-faq
  ) > .how-kicker {
    position: relative;
    top: -1rem;
  }
}

/* =====================================================================
   CHS-HOW-11-DESKTOP-STEP-EYEBROW-BREATHING-ROOM
   Give the three numbered-process step eyebrows more breathing room
   above their large headings by moving ONLY the eyebrow upward.

   Applies to:
     START HERE
     THE UNDERWRITING
     YOUR DECISION

   IMPORTANT:
   - numbered circles are not moved
   - large step headings are not moved
   - section padding is not changed
   - section margins are not changed
   - page-wide section eyebrows retain their CHS-HOW-10 geometry
   - mobile geometry is intentionally unchanged
   ===================================================================== */

@media (min-width: 760px) {
  .how-it-works-page .how-step-heading .how-kicker {
    position: relative;
    top: -0.625rem;
  }
}

/* =====================================================================
   CHS-HOW-13-TRANSPARENT-BY-DESIGN
   A simple hero principle occupying existing visual real estate.
   No card, badge, border, or additional marketing paragraph.
   ===================================================================== */

.how-it-works-page .how-hero-transparency {
  margin: 1.25rem 0 0;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .01em;
}

@media (min-width: 760px) {
  .how-it-works-page .how-hero-transparency {
    margin-top: clamp(2.5rem, 5vh, 4rem);
    font-size: clamp(1.2rem, 1.45vw, 1.45rem);
  }
}

/* =====================================================================
   CHS-HOW-14A-STRUCTURAL-HERO-MOTTO-PLACEMENT

   Desktop strategy:
   Let the existing hero grid and the actual form height establish the
   vertical geometry. The left hero-content column stretches to the same
   row height as the form, then flexbox pushes "Transparent by Design."
   into the unused lower-left real estate.

   No absolute positioning.
   No transforms.
   No fixed top coordinate.
   No added hero padding.
   Mobile geometry remains unchanged.
   ===================================================================== */

@media (min-width: 900px) {

  .how-it-works-page .hero-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .how-it-works-page .how-hero-transparency {
    margin-top: auto;
    margin-bottom: .75rem;
  }
}

/* =====================================================================
   CHS-HOW-14B-CENTER-HERO-MOTTO-IN-REMAINING-SPACE

   CHS-HOW-14A correctly tied the left hero column to the actual form
   height, but margin-top:auto placed the motto at the bottom.

   Give the motto automatic space on BOTH sides instead. This centers
   it within the unused portion of the left hero column while continuing
   to follow the form's real height.

   No absolute positioning.
   No transforms.
   No fixed vertical coordinate.
   No added hero padding.
   Mobile remains unchanged.
   ===================================================================== */

@media (min-width: 900px) {
  .how-it-works-page .how-hero-transparency {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* =====================================================================
   CHS-HOW-14C-UPPER-THIRD-HERO-MOTTO

   CHS-HOW-14B centered the motto in the available hero space.
   Visually, that remains too low.

   Desktop-only correction:
   Convert the stretched left hero column to a five-row grid:

     headline
     introductory paragraph
     1fr unused space
     transparency motto
     2fr unused space

   The motto therefore occupies approximately the upper third of the
   naturally unused vertical territory while remaining responsive to
   the ACTUAL form/grid-row height.

   No absolute positioning.
   No transform.
   No fixed pixel/viewport vertical coordinate.
   No added hero padding.
   Mobile remains unchanged.
   ===================================================================== */

@media (min-width: 900px) {

  .how-it-works-page .hero-content {
    align-self: stretch;
    display: grid;
    grid-template-rows:
      auto
      auto
      minmax(0, 1fr)
      auto
      minmax(0, 2fr);
    row-gap: 0;
  }

  .how-it-works-page .how-hero-transparency {
    grid-row: 4;
    align-self: center;
    margin: 0;
  }
}

/* =====================================================================
   CHS-HOW-14D3-REVIEWS-GEOMETRY-H1-SCALE-MOTTO

   Two deliberate corrections:

   1. "Transparent by Design." inherits the site's actual H1-scale
      typographic proportions instead of behaving like small supporting
      copy.

   2. On desktop, retire the stretched five-row hero-content treatment
      as the ACTIVE layout and return the left column to the same basic
      vertical-centering mechanism used by the Reviews hero.

      The form still establishes the hero row height. The left content
      now behaves as one natural content block centered against that form.

   Existing CHS-HOW-14A/B/C source remains preserved below in history;
   this later page-scoped rule supersedes its desktop geometry.
   ===================================================================== */

.how-it-works-page .how-hero-transparency {
  font-size: clamp(2rem, 8vw, 3.55rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: normal;
}

@media (min-width: 900px) {

  .how-it-works-page .hero-content {
    align-self: center;
    display: block;
  }

  .how-it-works-page .how-hero-transparency {
    grid-row: auto;
    align-self: auto;
    margin: clamp(2.25rem, 6vh, 4.75rem) 0 0;
  }
}

/* =====================================================================
   CHS-HOW-15-FIRST-USE-MATH-LANGUAGE

   First-use math legend only.

   In the introductory Offer Economics diagram:
     − becomes MINUS
     = becomes EQUALS

   Purpose: teach the reader the arithmetic relationship explicitly
   before later worked examples return to normal mathematical notation.

   Desktop CHS-HOW-8 pseudo-operators receive word labels.
   Mobile/stacked standalone operator elements receive matching treatment.
   Other dashes, minus signs and equals signs elsewhere remain unchanged.
   ===================================================================== */

  .how-it-works-page .formula-symbol {
  font-size: .76rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .how-it-works-page .offer-formula > .formula-item:not(:first-child)::before {
    content: "MINUS";
    font-size: .68rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  .how-it-works-page .offer-formula > .formula-result::before {
    content: "EQUALS";
    font-size: .68rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .1em;
    white-space: nowrap;
  }
}

/* =====================================================================
   CHS-HOW-15A-DESKTOP-EQUALS-SPECIFICITY

   The Seller-side MAO result card is also a formula-item, so the generic
   non-first-child MINUS pseudo-selector can match it.

   This later selector deliberately matches the generic rule's specificity
   while also identifying the result card explicitly. Because it appears
   later in source order, EQUALS wins for the result card only.

   No other formula operators are changed.
   ===================================================================== */

@media (min-width: 900px) {
  .how-it-works-page .offer-formula > .formula-item.formula-result::before {
    content: "EQUALS";
  }
}

/* =====================================================================
   CHS-HOW-15B2-DESKTOP-EXPLICIT-OPERATOR-LANES

   Wide-desktop legibility correction for the introductory Offer
   Economics equation only.

   Restore the five real HTML operator words and give them dedicated
   horizontal grid lanes:

       MINUS / MINUS / MINUS / MINUS / EQUALS

   The former desktop pseudo-operators are suppressed at this breakpoint.
   Mobile and narrower layouts remain untouched.
   ===================================================================== */

@media (min-width: 1280px) {

  .how-it-works-page .offer-formula {
    grid-template-columns:
      minmax(0, 1fr) 3.45rem
      minmax(0, 1fr) 3.45rem
      minmax(0, 1fr) 3.45rem
      minmax(0, 1fr) 3.45rem
      minmax(0, 1fr) 3.75rem
      minmax(0, 1fr);
    column-gap: .35rem;
    align-items: stretch;
  }

  .how-it-works-page .offer-formula > .formula-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 0;
    font-size: .72rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .how-it-works-page .offer-formula > .formula-item:not(:first-child)::before,
  .how-it-works-page .offer-formula > .formula-item.formula-result::before {
    content: none;
  }
}

/* =====================================================================
   CHS-HOW-16B2-SEVEN-CARD-SELLER-NET

   Seller Payoffs + Obligations adds a seventh economic card and a fifth
   MINUS operator before EQUALS.

   This later page-scoped rule supersedes the six-card geometry in
   CHS-HOW-8 / CHS-HOW-15B2 without deleting that source history.

   980-1279px:
   Retain the existing pseudo-operator architecture with seven card lanes.

   1280px+:
   Preserve CHS-HOW-15B2's explicit real HTML operator-word lanes while
   allowing the equation enough horizontal room for seven cards.
   ===================================================================== */

@media (min-width: 980px) and (max-width: 1279px) {
  .how-it-works-page .offer-formula {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
  }

  .how-it-works-page .offer-formula > .formula-item {
    min-height: 200px;
    padding: .9rem;
  }
}

@media (min-width: 1280px) {
  .how-it-works-page .offer-formula {
    width: 100%;
    max-width: 1280px !important;
    grid-template-columns:
      minmax(0, 1fr) 2.75rem
      minmax(0, 1fr) 2.75rem
      minmax(0, 1fr) 2.75rem
      minmax(0, 1fr) 2.75rem
      minmax(0, 1fr) 2.75rem
      minmax(0, 1fr) 3.3rem
      minmax(0, 1fr);
    column-gap: .18rem;
    align-items: stretch;
  }

  .how-it-works-page .offer-formula > .formula-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 0;
    font-size: .64rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .how-it-works-page .offer-formula > .formula-item {
    min-width: 0;
    min-height: 200px;
    padding: .9rem;
  }

  .how-it-works-page .offer-formula > .formula-item:not(:first-child)::before,
  .how-it-works-page .offer-formula > .formula-item.formula-result::before {
    content: none;
  }
}

/* =====================================================================
   CHS-HOW-17B-TWO-EQUATION-REALITY

   Reality-based offer architecture:

     UNDERWRITING
       -> Maximum Allowable Offer (MAO)

     CLOSING RECONCILIATION
       -> Projected Seller Net Proceeds

   The approved seven-card CHS-HOW-16B2 geometry remains in place for
   the underwriting equation. This block adds the ARV definition panel,
   stage labels, the separate closing equation, example bridge, and
   MAO-row treatment.
   ===================================================================== */

.how-it-works-page .arv-definition {
  max-width: var(--contentw) !important;
  margin: 1.25rem auto 0 !important;
  padding: 1rem 1.1rem;
  border: 1px solid #b9dbe2;
  border-left: 5px solid var(--brand-cyan);
  border-radius: var(--radius-sm);
  background: #eefafb;
}

.how-it-works-page .arv-definition > strong {
  display: block;
  color: var(--brand-blue);
  font-size: 1.05rem;
}

.how-it-works-page .arv-definition > p {
  margin: .35rem 0 0;
}

.how-it-works-page .equation-stage-label {
  width: 100%;
  max-width: 1280px !important;
  margin: 1.35rem auto .8rem !important;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem .75rem;
}

.how-it-works-page .equation-stage-label > strong {
  color: #8fe6ed;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .1em;
}

.how-it-works-page .equation-stage-label > span {
  color: #fff;
  font-weight: 750;
}

.how-it-works-page .equation-connector {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: 1.35rem auto .4rem !important;
  text-align: center;
  color: #8fe6ed;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.how-it-works-page .equation-stage-second {
  margin-top: .45rem !important;
}

.how-it-works-page .closing-formula {
  width: 100%;
  max-width: var(--maxw) !important;
  margin: .8rem auto 1.35rem !important;
  display: grid;
  gap: .8rem;
}

.how-it-works-page .closing-formula > .formula-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: .25rem 0;
}

.how-it-works-page .example-equation-bridge {
  max-width: var(--maxw) !important;
  margin: .8rem auto !important;
  text-align: center;
  color: var(--brand-blue);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .11em;
}

.how-it-works-page .example-closing-equation {
  border: 2px solid var(--brand-cyan);
}

.how-it-works-page .example-math-table .mao-row :is(th, td) {
  border-top: 2px solid #9fcfd6;
  background: #f4fafb;
  font-weight: 700;
}

.how-it-works-page .example-math-table .mao-row .amount {
  color: var(--brand-blue);
}

@media (max-width: 759px) {
  .how-it-works-page .equation-stage-label {
    display: block;
  }

  .how-it-works-page .equation-stage-label > strong,
  .how-it-works-page .equation-stage-label > span {
    display: block;
  }

  .how-it-works-page .equation-stage-label > span {
    margin-top: .25rem;
  }

  .how-it-works-page .example-math-table tbody tr.mao-row {
    border: 2px solid #9fcfd6;
    background: #f4fafb;
  }
}

@media (min-width: 760px) {
  .how-it-works-page .closing-formula {
    grid-template-columns:
      minmax(0, 1fr) 3.25rem
      minmax(0, 1.25fr) 3.25rem
      minmax(0, 1fr);
    column-gap: .5rem;
    align-items: stretch;
  }

  .how-it-works-page .closing-formula > .formula-item {
    min-width: 0;
    min-height: 155px;
    justify-content: center;
  }

  .how-it-works-page .closing-formula > .formula-symbol {
    min-height: 0;
    align-self: center;
    white-space: nowrap;
  }
}

/* =====================================================================
   CHS-HOW-17C-VISUAL-REFINEMENTS

   Visual / wording refinements after CHS-HOW-17B preview inspection:
   - keep repeated MAO card visually consistent in closing reconciliation
   - give Projected Seller Net Proceeds a distinct light-blue identity
   - add mobile breathing room around THEN AT CLOSING / stage 2 heading
   - soften premature wrapping in the "Why we do not call..." note
   - slightly improve readability of the long 7% reserve card
   ===================================================================== */

.how-it-works-page .closing-formula > .formula-item.formula-mao-repeat {
  background: #fbf8f2;
  border-color: var(--brand-cyan);
}

.how-it-works-page .closing-formula > .formula-item.formula-mao-repeat .formula-label,
.how-it-works-page .closing-formula > .formula-item.formula-netproceeds .formula-label {
  color: var(--brand-blue);
}

.how-it-works-page .closing-formula > .formula-item.formula-netproceeds {
  background: #e9f8fc;
  border-color: #8fd9e7;
}

.how-it-works-page .formula-transaction-reserve .formula-label {
  font-size: .84rem;
}

.how-it-works-page .formula-transaction-reserve strong {
  line-height: 1.18;
}

@media (max-width: 759px) {
  .how-it-works-page .equation-connector {
    margin: 1.35rem auto .95rem !important;
  }

  .how-it-works-page .equation-stage-second {
    margin-top: .95rem !important;
  }

  .how-it-works-page .how-truth-note {
    padding: 1.15rem 1rem;
  }

  .how-it-works-page .how-truth-note p {
    font-size: 1.02rem;
    line-height: 1.72;
  }
}

@media (min-width: 980px) {
  .how-it-works-page .formula-transaction-reserve .formula-label {
    font-size: .8rem;
  }

  .how-it-works-page .formula-transaction-reserve strong {
    font-size: .98rem;
  }
}

/* ===============================================================
   CHS-CAL-HUB-3
   California / Where We Buy hub — scoped visual refinement.
   PREVIEW pilot. No protected content or architecture changes.
   =============================================================== */

.california-hub-page main > .region > *,
.california-hub-page main > .situations > * {
  max-width: var(--maxw);
}

/* Geographic sections */
.california-hub-page main > .region {
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
  background: #fff;
}

.california-hub-page main > .hero + .region {
  padding-top: clamp(2.75rem, 6vw, 4rem);
}

.california-hub-page main > .region + .region {
  padding-top: .65rem;
}

.california-hub-page main > .region + .anywhere {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.california-hub-page .region h2,
.california-hub-page .anywhere h2,
.california-hub-page .situations h2,
.california-hub-page .statewide h2 {
  position: relative;
  padding-bottom: .8rem;
}

.california-hub-page .region h2::after,
.california-hub-page .anywhere h2::after,
.california-hub-page .situations h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: .7rem;
  border-radius: 999px;
  background: var(--brand-cyan);
}

.california-hub-page .region ul {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  display: grid;
  gap: 1rem;
}

.california-hub-page .region li {
  position: relative;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-cyan);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}

.california-hub-page .region li a {
  font-weight: 800;
  text-underline-offset: .2em;
}

.california-hub-page .region li a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Statewide availability band */
.california-hub-page main > .anywhere {
  background: var(--surface-accent);
  border-top: 1px solid #CFE8EE;
  border-bottom: 1px solid #CFE8EE;
}

.california-hub-page .anywhere p {
  font-size: 1.04rem;
}

.california-hub-page .anywhere a {
  font-weight: 800;
}

/* Seller-situation cards */
.california-hub-page main > .situations {
  background: #fff;
}

.california-hub-page .situations > p {
  margin-top: .85rem;
  margin-bottom: 1.5rem;
}

.california-hub-page .situations ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.california-hub-page .situations li {
  position: relative;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.california-hub-page .situations li a {
  font-weight: 800;
  text-underline-offset: .2em;
}

.california-hub-page .situations li a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Statewide process / trust band */
.california-hub-page main > .statewide {
  background: var(--brand-blue);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.california-hub-page .statewide h2 {
  color: #fff;
}

.california-hub-page .statewide h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: .7rem;
  border-radius: 999px;
  background: var(--brand-cyan);
}

.california-hub-page .statewide a {
  color: #fff;
  font-weight: 800;
  text-underline-offset: .2em;
}

/* Desktop card arrangements */
@media (min-width: 720px) {
  .california-hub-page .region ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .california-hub-page .region li:only-child {
    grid-column: 1 / -1;
  }

  .california-hub-page .situations ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .california-hub-page .situations li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .california-hub-page .situations ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .california-hub-page .situations li:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .california-hub-page .situations li:nth-child(4) {
    grid-column: 1 / span 1;
  }

  .california-hub-page .situations li:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

/* ===============================================================
   CHS-CAL-HUB-4E
   California geographic gateway refinement.
   Fully scoped to .california-hub-page.
   =============================================================== */

.california-hub-page .california-region-directory {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.75rem, 6vw, 4.5rem) 1rem;
  display: grid;
  gap: 1.25rem;
}

.california-hub-page .california-region-directory > .region {
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-top: 5px solid var(--brand-cyan);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFC 100%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}

.california-hub-page .california-region-directory > .region h2 {
  margin: 0 0 1.15rem;
  padding-bottom: .7rem;
  font-size: clamp(1.45rem, 3vw, 1.8rem);
}

.california-hub-page .california-region-directory > .region ul {
  grid-template-columns: 1fr;
  gap: .75rem;
  margin: 0;
}

.california-hub-page .california-region-directory > .region li,
.california-hub-page .california-region-directory > .region li:only-child {
  grid-column: auto;
  position: relative;
  min-height: 88px;
  padding: 1rem 3.25rem 1rem 1rem;
  display: flex;
  align-items: center;
  border: 1px solid #C7D8E2;
  border-top: 1px solid #C7D8E2;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.california-hub-page .california-region-directory > .region li::after {
  content: "→";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-blue);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.california-hub-page .california-region-directory > .region li:hover,
.california-hub-page .california-region-directory > .region li:focus-within {
  border-color: var(--brand-cyan);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
  transform: translateY(-2px);
}

.california-hub-page .california-region-directory > .region li a {
  position: relative;
  z-index: 1;
}

@media (min-width: 1000px) {
  .california-hub-page .california-region-directory {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .california-hub-page .california-region-directory > .region {
    display: flex;
    flex-direction: column;
  }

  .california-hub-page .california-region-directory > .region ul {
    flex: 1;
  }

  .california-hub-page .situations ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .california-hub-page .situations li {
    grid-column: span 2;
  }

  .california-hub-page .situations li:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .california-hub-page .situations li:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

@media (min-width: 720px) and (max-width: 999px) {
  .california-hub-page .california-region-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .california-hub-page .california-region-directory > .region:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 719px) {
  .california-hub-page .california-region-directory {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .california-hub-page .california-region-directory > .region {
    padding: 1.15rem;
  }

  .california-hub-page .california-region-directory > .region li {
    min-height: 76px;
  }
}

/* ===============================================================
   CHS-CAL-HUB-5
   Geographic card flow repair.
   Prevent anchor and descriptive prose from becoming separate
   flex items inside each city card.
   =============================================================== */

.california-hub-page .california-region-directory > .region li,
.california-hub-page .california-region-directory > .region li:only-child {
  display: block;
  min-height: 0;
  padding: 1rem 3.25rem 1rem 1rem;
  line-height: 1.55;
}

.california-hub-page .california-region-directory > .region li a {
  position: static;
  display: inline;
}

.california-hub-page .california-region-directory > .region li a::after {
  z-index: 2;
}

.california-hub-page .california-region-directory > .region li::after {
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 719px) {
  .california-hub-page .california-region-directory > .region li {
    min-height: 0;
  }
}

/* =====================================================================
   CHS-CAL-HERO-2
   California hub second major hero declaration.

   Reference architecture:
   CHS-HOW-14D3-REVIEWS-GEOMETRY-H1-SCALE-MOTTO

   Design rule:
   H1-scale visual authority without becoming a second semantic H1.
   Normal content flow.
   Responsive breathing room.
   No absolute positioning.
   No transforms.
   No invented grid rows.
   Fully scoped to .california-hub-page.
   ===================================================================== */

.california-hub-page .california-hero-reach {
  margin: 1.5rem 0 0;
  color: #fff;
  font-size: clamp(2rem, 8vw, 3.55rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: normal;
}

.california-hub-page .california-hero-reach span {
  display: block;
}

@media (min-width: 900px) {
  .california-hub-page .hero-content {
    align-self: center;
    display: block;
  }

  .california-hub-page .california-hero-reach {
    margin: clamp(2.25rem, 6vh, 4.75rem) 0 0;
  }
}

/* ===============================================================
   CHS-CAL-QA-1B
   Final California visual QA.

   1. Remove repeated city-card arrows.
   2. Let the statewide H2 fill each line naturally instead of using
      the site's global balanced-heading wrap behavior.
   No typography reduction. No paragraph changes.
   =============================================================== */

.california-hub-page .california-region-directory > .region li,
.california-hub-page .california-region-directory > .region li:only-child {
  padding-right: 1rem;
}

.california-hub-page .california-region-directory > .region li::after {
  content: none;
}

.california-hub-page .statewide h2 {
  text-wrap: normal;
}

/* ===============================================================
   CHS-CAL-QA-1C
   Mobile-only statewide H2 fit correction.

   CHS-CAL-QA-1B correctly restored normal wrapping, but at very
   narrow widths the standard site H2 scale still causes "everywhere"
   to fall prematurely onto line two.

   Reduce only this one H2 slightly on mobile.
   Desktop/tablet typography and all paragraph copy remain unchanged.
   =============================================================== */

@media (max-width: 719px) {
  .california-hub-page .statewide h2 {
    max-width: none;
    font-size: 1.45rem;
    text-wrap: normal;
  }
}

/* ===============================================================
   CHS-CAL-QA-1E
   California statewide H2 — mobile wrap correction.

   The global heading rule uses:
       text-wrap: balance;

   Earlier attempts did not correctly neutralize that behavior.

   This later, page-scoped mobile rule restores normal line filling
   with the valid:
       text-wrap: wrap;

   Normal site H2 sizing is also restored.
   No paragraph, HTML, desktop, or tablet changes.
   =============================================================== */

@media (max-width: 719px) {
  .california-hub-page .statewide h2 {
    max-width: none;
    font-size: clamp(1.55rem, 5vw, 2.25rem);
    text-wrap: wrap;
  }
}



/* =====================================================================
   CHS-ABOUT-01: ABOUT US TRUST / HUMANITY PASS
   Page-scoped. No global page architecture changes.
   ===================================================================== */

.about-us-page .owners {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  column-gap: clamp(28px, 5vw, 58px);
  align-items: center;
}

.about-us-page .owners > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.about-us-page .owners > h2,
.about-us-page .owners > p {
  grid-column: 1;
}

.about-us-page .about-owner-photo {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
}

.about-us-page .about-owner-photo img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}

.about-us-page .about-owner-photo figcaption {
  margin-top: 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.45;
}


/* Values become three readable principles rather than one text wall. */
.about-us-page .values {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.about-us-page .values > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.about-us-page .values > h2 {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

.about-us-page .values > p {
  margin-top: 0;
  margin-bottom: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
}


/* Keep biographies comfortably readable. */
.about-us-page .bio {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.about-us-page .bio > * {
  max-width: none;
}

.about-us-page .bio h2 {
  margin-bottom: 16px;
}

.about-us-page .bio p {
  max-width: 72ch;
}


/* Give operating principles some separation. */
.about-us-page .how {
  background: #f8fafc;
}

.about-us-page .how li {
  margin-bottom: 12px;
}

.about-us-page .how li::marker {
  color: var(--brand-blue);
}


/* The page's strongest honesty statement. */
.about-us-page .honest {
  background: var(--brand-blue);
  color: #fff;
}

.about-us-page .honest h2,
.about-us-page .honest p {
  color: #fff;
}

.about-us-page .honest a {
  color: #fff;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}


/* Independent verification near direct contact information. */
.about-us-page .reach {
  text-align: center;
}

.about-us-page .reach > p {
  max-width: 760px;
}

.about-us-page .about-verification {
  max-width: 520px;
  margin: 28px auto 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}

.about-us-page .about-verification p {
  margin-top: 0;
}

.about-us-page .about-verification a {
  display: inline-block;
}

.about-us-page .about-verification img {
  width: min(100%, 280px);
  height: auto;
  margin: 0 auto;
}


/* Mobile: return introduction and values to natural flow. */
@media (max-width: 760px) {
  .about-us-page .owners {
    display: block;
  }

  .about-us-page .about-owner-photo {
    margin-top: 26px;
  }

  .about-us-page .values {
    display: block;
  }

  .about-us-page .values > p {
    margin-bottom: 14px;
  }

  .about-us-page .values > p:last-child {
    margin-bottom: 0;
  }
}


/* =====================================================================
   CHS-ABOUT-02: ABOUT US IMAGE / CARD / BBB REFINEMENT PASS
   PREVIEW refinement layer. Entirely scoped to .about-us-page.
   ===================================================================== */


/* ---------------------------------------------------------------------
   WHO WE ARE
   Photo LEFT / copy RIGHT on desktop.
   --------------------------------------------------------------------- */

.about-us-page .owners {
  grid-template-columns:
    minmax(280px, .95fr)
    minmax(0, 1.05fr);
  column-gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.about-us-page .owners > h2,
.about-us-page .owners > p {
  grid-column: 2;
}

.about-us-page .about-owner-photo {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: end;

  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 500px;
  margin: 0;
}


/* Transparent-background photograph. */
.about-us-page .about-owner-photo img {
  width: 100%;
  height: auto;

  border-radius: 0;
  box-shadow: none;

  filter:
    drop-shadow(
      0 16px 28px rgba(15, 23, 42, .14)
    );
}


/*
   Edge blending:
   - TOP intentionally untouched.
   - RIGHT receives strongest transition toward surrounding white.
   - BOTTOM gets a softer dissolve.
   - LEFT gets only a subtle treatment.

   This is an overlay, not destructive image editing.
*/
.about-us-page .about-owner-photo::after {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;
  z-index: 2;

  background:
    linear-gradient(
      to left,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.72) 6%,
      rgba(255,255,255,0) 22%
    ),
    linear-gradient(
      to top,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.42) 7%,
      rgba(255,255,255,0) 20%
    ),
    linear-gradient(
      to right,
      rgba(255,255,255,.68) 0%,
      rgba(255,255,255,0) 12%
    );
}

.about-us-page .about-owner-photo figcaption {
  position: relative;
  z-index: 3;

  margin-top: 10px;
}


/* ---------------------------------------------------------------------
   VALUES
   Stronger perimeter. These are supposed to feel foundational.
   --------------------------------------------------------------------- */

.about-us-page .values > p {
  position: relative;

  padding: 26px 24px;

  background: #fff;

  border: 3px solid var(--brand-blue);
  border-radius: 16px;

  box-shadow:
    0 13px 28px rgba(15, 23, 42, .10),
    inset 0 0 0 1px rgba(255,255,255,.75);
}

.about-us-page .values > p strong {
  color: var(--brand-blue);
}


/* ---------------------------------------------------------------------
   REACHING US
   --------------------------------------------------------------------- */

.about-us-page .reach > p.about-contact-lines {
  max-width: 800px;

  margin-top: 0;
  margin-bottom: 0;

  line-height: 1.95;
}


/*
   More separation from the address above.
*/
.about-us-page .about-verification {
  margin-top: 50px;

  padding:
    32px
    24px
    26px;
}


/* Verification question gets its own centered line. */
.about-us-page .about-verify-q {
  max-width: none;

  margin:
    0
    auto
    7px;

  text-align: center;

  font-size: 1.08rem;
}


/* BBB explanation gets its own centered second line. */
.about-us-page .about-verify-a {
  max-width: none;

  margin:
    0
    auto
    21px;

  text-align: center;

  color: var(--text-dark);
}


.about-us-page .about-verification img {
  width: min(100%, 300px);
}


/* ---------------------------------------------------------------------
   MOBILE
   Preserve the already-good single-column structure.
   --------------------------------------------------------------------- */

@media (max-width: 760px) {

  .about-us-page .owners {
    display: block;
  }

  .about-us-page .about-owner-photo {
    width: min(100%, 480px);

    margin:
      28px
      auto
      0;
  }

  /*
     Make the mobile blend a touch gentler because the photograph
     has the entire viewport width available.
  */
  .about-us-page .about-owner-photo::after {
    background:
      linear-gradient(
        to left,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,0) 16%
      ),
      linear-gradient(
        to top,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,0) 17%
      ),
      linear-gradient(
        to right,
        rgba(255,255,255,.45) 0%,
        rgba(255,255,255,0) 9%
      );
  }

  .about-us-page .about-verification {
    margin-top: 40px;
  }
}


/* =====================================================================
   CHS-ABOUT-03: BIOGRAPHY PORTRAITS + VALUES CARD COLOR PASS
   PREVIEW refinement layer. Entirely scoped to .about-us-page.
   ===================================================================== */


/* ---------------------------------------------------------------------
   VALUES
   These are not ordinary cards. Give them a more unmistakable identity.
   --------------------------------------------------------------------- */

.about-us-page .values > p {
  background:
    linear-gradient(
      180deg,
      #eef7ff 0%,
      #e2f1ff 100%
    );

  border: 3px solid var(--brand-blue);

  box-shadow:
    0 14px 30px rgba(15, 23, 42, .10),
    inset 0 0 0 1px rgba(255,255,255,.70);
}


/* ---------------------------------------------------------------------
   INDIVIDUAL BIOGRAPHIES
   Saul and Kari each get their own portrait on desktop.
   --------------------------------------------------------------------- */

.about-us-page .bio {
  max-width: var(--maxw);

  margin-left: auto;
  margin-right: auto;

  display: grid;
  column-gap: clamp(30px, 4.5vw, 58px);
  align-items: center;
}

.about-us-page .bio > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}


/* Saul: photo LEFT, text RIGHT */
.about-us-page .bio.bio-saul {
  grid-template-columns:
    minmax(240px, .80fr)
    minmax(0, 1.20fr);
}

.about-us-page .bio.bio-saul > h2,
.about-us-page .bio.bio-saul > p {
  grid-column: 2;
}

.about-us-page .bio.bio-saul .about-bio-photo {
  grid-column: 1;
  grid-row: 1 / span 4;
}


/* Kari: text LEFT, photo RIGHT */
.about-us-page .bio.bio-kari {
  grid-template-columns:
    minmax(0, 1.20fr)
    minmax(240px, .80fr);
}

.about-us-page .bio.bio-kari > h2,
.about-us-page .bio.bio-kari > p {
  grid-column: 1;
}

.about-us-page .bio.bio-kari .about-bio-photo {
  grid-column: 2;
  grid-row: 1 / span 4;
}


.about-us-page .about-bio-photo {
  width: 100%;
  max-width: 380px;
  margin: 0;
  align-self: start;
  position: relative;
}

.about-us-page .about-bio-photo img {
  width: 100%;
  height: auto;
  display: block;

  border-radius: 18px;

  box-shadow:
    0 16px 34px rgba(15, 23, 42, .14);
}


/* subtle blue backing plate so the portraits feel integrated */
.about-us-page .about-bio-photo::before {
  content: "";
  position: absolute;
  inset: 16px -12px -12px 16px;
  z-index: -1;

  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      rgba(7, 89, 133, .16) 0%,
      rgba(0, 124, 145, .12) 100%
    );
}

.about-us-page .bio h2 {
  margin-bottom: 16px;
}

.about-us-page .bio p {
  max-width: 72ch;
}


/* ---------------------------------------------------------------------
   MOBILE
   Preserve the structure you already like.
   --------------------------------------------------------------------- */

@media (max-width: 760px) {

  .about-us-page .bio {
    display: block;
  }

  .about-us-page .about-bio-photo {
    width: min(100%, 360px);
    margin:
      20px
      auto
      24px;
  }

  .about-us-page .about-bio-photo::before {
    inset: 12px -8px -8px 12px;
  }
}


/* =====================================================================
   CHS-ABOUT-05: MOBILE VERTICAL RHYTHM REFINEMENT

   Mobile only.
   Reduces cumulative top + bottom section padding on the long About Us
   page while preserving the approved desktop composition.
   ===================================================================== */

@media (max-width: 759px) {

  /*
     Base mobile section rhythm.

     The site's general section system gives each consecutive section
     generous padding on BOTH sides. On a long mobile page those values
     accumulate and create oversized blank transitions.

     This override is intentionally scoped to About Us only.
  */
  .about-us-page main > section:not(.hero) {
    padding-top: 1.55rem;
    padding-bottom: 1.55rem;
  }


  /*
     WHO WE ARE -> VALUES

     This is the transition visible in the supplied screenshot.
     Compress it more aggressively because the owner caption already
     provides a natural visual ending to the preceding section.
  */
  .about-us-page .owners {
    padding-bottom: .85rem;
  }

  .about-us-page .values {
    padding-top: .95rem;
  }


  /*
     Values cards retain their visual importance, but the empty space
     BETWEEN the section heading/cards and neighboring sections is reduced.
  */
  .about-us-page .values > h2 {
    margin-bottom: .9rem;
  }

  .about-us-page .values > p {
    margin-top: .7rem;
    margin-bottom: .7rem;
  }


  /*
     INDIVIDUAL BIOS

     Keep enough separation that Saul and Kari still read as distinct
     biographies without the page feeling vertically stretched.
  */
  .about-us-page .bio.bio-saul,
  .about-us-page .bio.bio-kari {
    padding-top: 1.65rem;
    padding-bottom: 1.65rem;
  }

  .about-us-page .bio h2 {
    margin-bottom: .8rem;
  }

  .about-us-page .about-bio-photo {
    margin-top: .9rem;
    margin-bottom: 1.05rem;
  }


  /*
     HOW WE WORK / REACHING US

     Slightly tighter than the previous general mobile rhythm.
  */
  .about-us-page .how,
  .about-us-page .reach {
    padding-top: 1.7rem;
    padding-bottom: 1.7rem;
  }

  .about-us-page .how > h2,
  .about-us-page .reach > h2 {
    margin-bottom: .9rem;
  }


  /*
     HONESTY BAND

     Keep a little more breathing room because the dark color transition
     is intentionally a major visual beat.
  */
  .about-us-page .honest {
    padding-top: 2.1rem;
    padding-bottom: 2.1rem;
  }


  /*
     FINAL CTA

     Also remains slightly roomier so the conversion form does not feel
     crowded at the end of the page.
  */
  .about-us-page .final-cta {
    padding-top: 2.1rem;
    padding-bottom: 2.1rem;
  }
}

/* =====================================================================
   CHS-HOW-22C-10PCT-ARV-CARD
   Displays the established illustrative 10% of ARV assumption directly
   beneath the Negotiation Room + Assignment Fee label.
   ===================================================================== */

.how-it-works-page .formula-label.formula-assumption {
  display: block;
  margin-top: .42rem;
  margin-bottom: .28rem;
  text-transform: none;
}

/* =====================================================================
   CHS-FAQ-FINAL-ACCORDION
   Final CashHouseSales FAQ presentation:
   centered category headers, single-column native accordions,
   teal/blue accents, responsive mobile treatment.
   ===================================================================== */

.faq-page main > section.faq {
  margin: 2rem 0;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid rgba(19, 94, 122, 0.12);
  border-radius: 20px;
  background: #f5fafc;
}

.faq-page main > section.faq:nth-of-type(odd) {
  background: #eef7fa;
}

.faq-page main > section.faq > h2 {
  display: table;
  width: auto;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  padding: .68rem 1.05rem;
  border-radius: 9px;
  background: linear-gradient(135deg, #087f92, #16679c);
  color: #fff;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 5px 14px rgba(16, 87, 116, .14);
}

.faq-page .faq-columns {
  display: block;
  width: min(100%, 980px);
  margin-left: auto;
  margin-right: auto;
}

.faq-page .faq-column {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  width: 100%;
  min-width: 0;
}

.faq-page .faq-column + .faq-column {
  margin-top: .85rem;
}

.faq-page .faq-item {
  overflow: hidden;
  width: 100%;
  margin: 0;
  border: 1px solid rgba(15, 83, 112, .16);
  border-left: 5px solid #078da0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(16, 68, 92, .07);
}

.faq-page .faq-column .faq-item:nth-child(even) {
  border-left-color: #2174ad;
}

.faq-page .faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 1rem 3.25rem 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  color: #102f45;
  font-weight: 750;
  line-height: 1.35;
  transition:
    background-color .18s ease,
    color .18s ease;
}

.faq-page .faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-page .faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: #078da0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.faq-page .faq-column .faq-item:nth-child(even) summary::after {
  color: #2174ad;
}

.faq-page .faq-item summary:hover {
  background: #eef8fa;
}

.faq-page .faq-item[open] summary {
  background: #eaf6f8;
}

.faq-page .faq-column .faq-item:nth-child(even)[open] summary {
  background: #edf5fb;
}

.faq-page .faq-item[open] summary::after {
  content: "−";
}

.faq-page .faq-question-text {
  display: block;
  font-size: 1.05rem;
}

.faq-page .faq-answer {
  padding: 0 1.15rem 1.15rem;
  border-top: 1px solid rgba(15, 83, 112, .10);
}

.faq-page .faq-answer p {
  margin: 1rem 0 0;
  max-width: none;
  line-height: 1.7;
}

.faq-page .faq-answer a {
  font-weight: 650;
}

.faq-page .faq-item summary:focus-visible {
  outline: 3px solid rgba(7, 141, 160, .32);
  outline-offset: -3px;
}

@media (max-width: 759px) {
  .faq-page main > section.faq {
    margin: 1.25rem 0;
    padding: 1.15rem .85rem 1.3rem;
    border-radius: 15px;
  }

  .faq-page main > section.faq > h2 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.1rem;
    padding: .58rem .78rem;
  }

  .faq-page .faq-columns {
    width: 100%;
  }

  .faq-page .faq-column {
    gap: .7rem;
  }

  .faq-page .faq-column + .faq-column {
    margin-top: .7rem;
  }

  .faq-page .faq-item summary {
    min-height: 60px;
    padding: .88rem 2.8rem .88rem .9rem;
  }

  .faq-page .faq-question-text {
    font-size: 1rem;
  }

  .faq-page .faq-answer {
    padding: 0 .95rem 1rem;
  }
}

/* === CHS-HOME-V2 ==================================================
   Homepage flagship refinement.
   Scoped entirely to .home-page.
   ================================================================== */

/* Stronger section rhythm */
.home-page main > section:not(.hero):not(.final-cta) {
  padding-top: clamp(3rem, 6vw, 4.75rem);
  padding-bottom: clamp(3rem, 6vw, 4.75rem);
}

.home-page main > section:not(.hero):not(.final-cta) > h2 {
  position: relative;
  margin-bottom: 1.35rem;
  padding-bottom: .8rem;
  line-height: 1.12;
}

.home-page main > section:not(.hero):not(.final-cta) > h2::after {
  content: "";
  display: block;
  width: 3.4rem;
  height: 4px;
  margin-top: .75rem;
  border-radius: 999px;
  background: var(--brand-cyan);
}

/* Small visual section identifiers */
.home-page :is(.steps, .situations, .honest, .what-we-buy, .where, .who) > h2::before {
  display: block;
  margin-bottom: .55rem;
  color: var(--brand-cyan);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-page .steps > h2::before {
  content: "THE PROCESS";
}

.home-page .situations > h2::before {
  content: "COMMON SITUATIONS";
}

.home-page .honest > h2::before {
  content: "THE TRADE-OFF";
}

.home-page .what-we-buy > h2::before {
  content: "PROPERTY CONDITION";
}

.home-page .where > h2::before {
  content: "OUR REACH";
}

.home-page .who > h2::before {
  content: "REAL PEOPLE";
}

/* Hero gets a more flagship introduction */
.home-page .home-hero .hero-content::before {
  content: "CALIFORNIA CASH HOME BUYERS";
  display: block;
  margin-bottom: .7rem;
  color: rgba(255,255,255,.88);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .09em;
}

.home-page .home-hero h1 {
  max-width: 12ch;
}

.home-page .home-hero .hero-subhead {
  max-width: 38rem;
}

/* Three-step cards */
.home-page .steps li {
  min-height: 100%;
  box-shadow: 0 8px 24px rgba(15, 55, 75, .06);
}

.home-page .steps li strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--brand-blue);
}

/* Seller-situation cards become full click targets */
.home-page .situations li {
  position: relative;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.home-page .situations li:hover {
  transform: translateY(-2px);
  border-color: #9FD6E1;
  box-shadow: 0 10px 26px rgba(15, 55, 75, .08);
}

.home-page .situations li a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Honesty checkpoint */
.home-page .honest {
  background: var(--surface-accent);
  border-top: 1px solid #CFE8EE;
  border-bottom: 1px solid #CFE8EE;
}

.home-page .honest > * {
  width: min(100%, 58rem);
}

.home-page .honest h2 {
  color: var(--brand-blue);
}

.home-page .honest p {
  font-size: 1.05rem;
}

.home-page .honest p:last-child {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--cta-color);
  background: #fff;
}

/* What We Buy — compact condition cards */
.home-page .what-we-buy {
  background: #fff;
}

.home-page .what-we-buy ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .9rem;
}

.home-page .what-we-buy li {
  position: relative;
  padding: 1.05rem 1.1rem 1.05rem 1.35rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-cyan);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* Statewide reach gets its own visual beat */
.home-page .where {
  background:
    linear-gradient(
      135deg,
      var(--brand-blue),
      var(--cta-color)
    );
  color: #fff;
}

.home-page .where h2,
.home-page .where p,
.home-page .where a {
  color: #fff;
}

.home-page .where > h2::before {
  color: rgba(255,255,255,.78);
}

.home-page .where > h2::after {
  background: #fff !important;
}

.home-page .where a {
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

/* Owner trust section */
.home-page .who {
  background: var(--surface);
  border-top: 0;
  border-bottom: 1px solid var(--border);
}

.home-page .who > * {
  width: min(100%, 58rem);
}

.home-page .who h2 {
  padding-left: 0;
}

.home-page .who h2::before {
  position: static;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

.home-page .who p:first-of-type {
  font-size: 1.08rem;
}

.home-page .who p:last-child {
  display: inline-block;
  margin-top: 1.35rem;
  padding: .8rem 1rem;
  border: 1px solid #B9DDE5;
  border-radius: var(--radius-md);
  background: #fff;
}

/* Desktop refinement */
@media (min-width: 760px) {
  .home-page .what-we-buy ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .home-page .situations li {
    transition: none;
  }

  .home-page .situations li:hover {
    transform: none;
  }
}

/* === CHS-HOME-V2D =================================================
   Homepage process-to-situations rhythm polish.
   Scoped entirely to .home-page.
   ================================================================= */

.home-page .steps > p {
  margin-top: 1.5rem;
  margin-bottom: 0;
  text-align: center;
}

.home-page main > section.steps {
  padding-bottom: clamp(1.4rem, 2.5vw, 1.9rem);
}

.home-page main > section.steps + section.situations {
  padding-top: clamp(1.4rem, 2.5vw, 1.9rem);
}

/* === CHS-HOME-V2E =================================================
   Homepage who-section final polish.
   Scoped entirely to .home-page.
   ================================================================= */

.home-page .who p:last-child {
  display: table;
  margin: 1.35rem auto 0;
  text-align: center;
}

/* === CHS-LEGAL-PAGE-INTRO-GUTTER === */
/*
   Legal/static page intro alignment.
   Match the breadcrumb's centered desktop container so page titles
   and Effective Date metadata do not begin at the viewport edge.
*/
main > .page-intro {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}


/* =====================================================================
   HOW-IT-WORKS — SHORT VIDEO
   Lightweight local poster; YouTube iframe loads only after user clicks.
   ===================================================================== */

.how-it-works-page .how-video-short {
  padding: 2.8rem 1rem 2.25rem;
  border-top: 1px solid #dbe5ec;
  border-bottom: 1px solid #dbe5ec;
  background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
}

.how-it-works-page .how-video-short-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

.how-it-works-page .how-video-short h2 {
  max-width: none;
  margin: 0;
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  line-height: 1.15;
  color: var(--text-dark);
}

.how-it-works-page .how-video-short-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: 1.8rem;
}

.how-it-works-page .how-video-short-copy p {
  margin: 0;
  font-size: clamp(1.12rem, 2vw, 1.38rem);
  line-height: 1.6;
  color: var(--text-dark);
}

.how-it-works-page .how-video-short-copy strong {
  display: block;
  margin-bottom: .45rem;
  color: var(--brand-blue);
  font-size: 1.12em;
  line-height: 1.3;
}

.how-it-works-page .how-video-short-media {
  min-width: 0;
}

.how-it-works-page .how-video-facade,
.how-it-works-page .how-video-short-media iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #071923;
  box-shadow: 0 16px 34px rgba(15, 45, 62, .16);
}

.how-it-works-page .how-video-facade {
  position: relative;
  display: block;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.how-it-works-page .how-video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease, filter .2s ease;
}

.how-it-works-page .how-video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .02) 45%,
    rgba(0, 0, 0, .58) 100%
  );
  pointer-events: none;
}

.how-it-works-page .how-video-facade:hover img {
  transform: scale(1.012);
  filter: brightness(.96);
}

.how-it-works-page .how-video-facade:focus-visible {
  outline: 4px solid var(--brand-cyan);
  outline-offset: 4px;
}

.how-it-works-page .how-video-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: clamp(4rem, 8vw, 5.4rem);
  height: clamp(4rem, 8vw, 5.4rem);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-blue);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.how-it-works-page .how-video-play::before {
  content: "";
  display: block;
  margin-left: .3rem;
  border-top: .75rem solid transparent;
  border-bottom: .75rem solid transparent;
  border-left: 1.2rem solid #fff;
}

.how-it-works-page .how-video-watch {
  position: absolute;
  z-index: 2;
  left: 1rem;
  right: 1rem;
  bottom: .85rem;
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.how-it-works-page .how-video-short-media iframe {
  display: block;
}

.how-it-works-page .how-video-transition {
  margin-top: 2.2rem;
  padding-top: 1.35rem;
  border-top: 2px solid var(--brand-blue);
  text-align: center;
}

.how-it-works-page .how-video-transition span {
  display: inline-block;
  color: var(--brand-blue);
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .how-it-works-page .how-video-short {
    padding-top: 2.25rem;
  }

  .how-it-works-page .how-video-short-grid {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }

  .how-it-works-page .how-video-short-copy {
    text-align: center;
  }

  .how-it-works-page .how-video-short-copy p {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }

  .how-it-works-page .how-video-transition {
    margin-top: 1.8rem;
  }
}


/* HOW-IT-WORKS — VIDEO REFINEMENT PASS 1
   Visual polish after desktop + mobile review.
   Does NOT implement the forthcoming large in-depth-version heading.
   ------------------------------------------------------------------ */

.how-it-works-page .how-video-transition {
  margin-top: 1.85rem;
  padding-top: 1.05rem;
}

.how-it-works-page .how-video-transition span {
  font-size: .96rem;
  font-weight: 750;
}

.how-it-works-page .how-video-short {
  padding-bottom: 1.55rem;
}

/* Tighten the handoff into the existing detailed section. */
.how-it-works-page .how-video-short + .how-overview {
  padding-top: 2.35rem;
}

@media (max-width: 760px) {
  .how-it-works-page .how-video-short-copy p {
    font-size: 1.02rem;
    line-height: 1.55;
  }

  .how-it-works-page .how-video-short-copy strong {
    font-size: 1.16em;
  }

  .how-it-works-page .how-video-transition {
    margin-top: 1.5rem;
    padding-top: 1rem;
  }

  .how-it-works-page .how-video-transition span {
    font-size: .93rem;
    line-height: 1.45;
  }

  .how-it-works-page .how-video-short {
    padding-bottom: 1.25rem;
  }

  .how-it-works-page .how-video-short + .how-overview {
    padding-top: 1.8rem;
  }
}


/* HOW-IT-WORKS — LARGE IN-DEPTH HEADING
   Creates a deliberate visual counterpart to
   "The Short 2-Minute Version."
   -------------------------------------------------- */

.how-it-works-page .how-video-transition {
  padding-top: 1.6rem;
}

.how-it-works-page .how-video-transition h2 {
  max-width: none;
  margin: 0;
  color: var(--text-dark);
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  line-height: 1.15;
  font-weight: 800;
  text-align: center;
}

.how-it-works-page .how-video-transition p {
  margin: .7rem auto 0;
  max-width: 42rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
}

@media (max-width: 760px) {
  .how-it-works-page .how-video-transition {
    padding-top: 1.35rem;
  }

  .how-it-works-page .how-video-transition p {
    margin-top: .6rem;
    font-size: .95rem;
  }
}


/* HOW-IT-WORKS — DEPTH TRANSITION ORDER SWAP
   Places the explanatory sentence above the large heading
   and ensures the sentence is explicitly centered.
   ------------------------------------------------------ */

.how-it-works-page .how-video-transition p {
  margin: 0 auto .8rem;
  max-width: 42rem;
  text-align: center;
}

.how-it-works-page .how-video-transition h2 {
  margin-top: 0;
}

@media (max-width: 760px) {
  .how-it-works-page .how-video-transition p {
    margin-bottom: .65rem;
  }
}


/* HOW-IT-WORKS — FORCE DEPTH SENTENCE CENTER
   Make the transition sentence span the complete available width
   so its visual center matches the large heading beneath it.
   ------------------------------------------------------------- */

.how-it-works-page .how-video-transition > p {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 .8rem;
  padding: 0;
  text-align: center !important;
}

@media (max-width: 760px) {
  .how-it-works-page .how-video-transition > p {
    margin-bottom: .65rem;
  }
}


/* HOW-IT-WORKS — DEPTH HEADING CLEANUP PASS
   Removes the smaller sentence and gives the written
   in-depth explanation heading clear breathing room.
   -------------------------------------------------- */

.how-it-works-page .how-video-transition {
  margin-top: 2.15rem;
  padding-top: 1.55rem;
  padding-bottom: .35rem;
}

.how-it-works-page .how-video-transition > p {
  display: none !important;
}

.how-it-works-page .how-video-transition h2 {
  margin: 0 auto;
  max-width: none;
}

.how-it-works-page .how-video-short + .how-overview {
  padding-top: 2.75rem;
}

@media (max-width: 760px) {
  .how-it-works-page .how-video-transition {
    margin-top: 1.8rem;
    padding-top: 1.3rem;
    padding-bottom: .2rem;
  }

  .how-it-works-page .how-video-short + .how-overview {
    padding-top: 2.2rem;
  }
}


/* HOW-IT-WORKS — DEPTH HEADING VISUAL REFINEMENT
   Make the in-depth heading feel more elegant and less heavy,
   while giving it clearer separation as a new advanced section.
   ------------------------------------------------------------ */

.how-it-works-page .how-video-transition {
  margin-top: 2.45rem;
  padding-top: 2.05rem;
  padding-bottom: .95rem;
}

.how-it-works-page .how-video-transition h2 {
  margin: 0 auto;
  max-width: none;
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
}

.how-it-works-page .how-video-short + .how-overview {
  padding-top: 3.05rem;
}

@media (max-width: 760px) {
  .how-it-works-page .how-video-transition {
    margin-top: 2rem;
    padding-top: 1.7rem;
    padding-bottom: .65rem;
  }

  .how-it-works-page .how-video-transition h2 {
    line-height: 1.12;
    font-weight: 700;
  }

  .how-it-works-page .how-video-short + .how-overview {
    padding-top: 2.45rem;
  }
}


/* HOW-IT-WORKS — THICK DEPTH DIVIDER
   Make the divider between the short video area and the
   in-depth explanation area much more assertive.
   --------------------------------------------------- */

.how-it-works-page .how-video-transition {
  border-top-width: 16px;
  padding-top: 2.35rem;
}

@media (max-width: 760px) {
  .how-it-works-page .how-video-transition {
    border-top-width: 16px;
    padding-top: 1.95rem;
  }
}


/* HOMEPAGE — MOBILE H1 BALANCED WRAP
   Homepage only. Desktop and all other pages remain unchanged.
   ------------------------------------------------------------ */

@media (max-width: 760px) {
  .home-page .home-hero h1 {
    width: 100%;
    max-width: 16ch;
    font-size: clamp(2.75rem, 12vw, 3.15rem);
    line-height: 1.16;
    text-wrap: balance;
  }
}