/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb {
  font-size: .8rem;
  color: var(--muted);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { margin: 0 .35rem; }
.breadcrumb .current { color: var(--text); font-weight: 600; }

/* ── Inner page layout ───────────────────────────────────────────────────── */
.inner-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Inner hero ──────────────────────────────────────────────────────────── */
.inner-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .5rem 0 .25rem;
}

.inner-hero-text { flex: 1; }

.provider-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .4rem;
}

.inner-hero h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}

.inner-hero-sub {
  margin-top: .4rem;
  color: var(--muted);
  font-size: 1rem;
  max-width: 520px;
}

.byline {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .6rem;
}

.hero-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

.inner-hero-logo {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: .25rem;
}
.inner-hero-logo img {
  height: 36px;
  width: auto;
}
.inner-hero-logo-sep {
  color: var(--muted);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* Splitero's wordmark is cursive with a descender tail baked into the
   bottom of its own SVG viewBox; Hometap's lowercase "hometap"
   wordmark has a "p" descender plus extra top padding above its
   ascenders; Unlock's SVG viewBox is sized to its tall hexagon icon,
   leaving empty space below the "unlock" wordmark's own baseline.
   None of that is matched by Point's logo, so centering full bounding
   boxes (the default here) leaves all three sitting visibly higher
   than a paired logo without the same issue, even though the <img>
   boxes themselves are centered identically. Nudging each down
   compensates. All three values were tuned by eye against Point's "T"
   specifically (Point pairs with all three), then re-checked across
   each logo's other pairings (Splitero: Hometap/Unison/Unlock;
   Hometap: Unison/Unlock/Splitero; Unlock: Hometap/Splitero/Unison) --
   all read well, and pairings between two corrected logos (e.g.
   Hometap-vs-Splitero, Hometap-vs-Unlock) look better now that both
   sides are fixed instead of just one. Unison's wordmark has no
   descender and its bounding box already centers almost exactly with
   Point's (within 0.25px), but visually its shorter lowercase letters
   still read a hair high next to Point's full-height caps, so it gets
   a small 2px nudge -- much lighter than the other three. Scoped to
   :has(.inner-hero-logo-sep) so these only apply on the two-logo
   "X vs Y" compare-page hero -- not on any provider's own solo
   provider-review or is-X-legit hero, where the original centering
   already looks right. */
.inner-hero-logo:has(.inner-hero-logo-sep) img[alt="Splitero"] {
  transform: translateY(11px);
}
.inner-hero-logo:has(.inner-hero-logo-sep) img[alt="Hometap"] {
  transform: translateY(9px);
}
.inner-hero-logo:has(.inner-hero-logo-sep) img[alt="Unlock"] {
  transform: translateY(9px);
}
.inner-hero-logo:has(.inner-hero-logo-sep) img[alt="Unison"] {
  transform: translateY(2px);
}

/* ── Table of contents ──────────────────────────────────────────────────── */
.toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  padding: .85rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
}
.toc-label {
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .06em;
}
.toc a { color: var(--accent); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ── Bottom line callout ─────────────────────────────────────────────────── */
.bottom-line {
  background: var(--card);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  overflow: hidden;
}
.bottom-line h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .6rem;
}
.bottom-line p { line-height: 1.7; }
.bottom-line .best-for {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  background: #eef4fc;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 600;
  color: var(--navy);
}
.bottom-line-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(30,58,95,.14);
}
.bl-stat { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; }
.bl-stat-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.bl-stat-value { font-size: 1.05rem; font-weight: 800; color: var(--navy); }

/* ── Trust badges (BBB / Trustpilot / CFPB etc.) ────────────────────────── */
.trust-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.trust-badge {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-align: center;
}
.trust-badge-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.trust-badge-unit { font-size: 1.1rem; font-weight: 700; color: var(--muted); }
.trust-badge-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text);
  margin-top: .5rem;
}
.trust-badge-sub {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .3rem;
  line-height: 1.45;
}

/* ── Stat row ────────────────────────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
  text-align: center;
}

.stat-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: .3rem;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
}

/* ── Inner card ──────────────────────────────────────────────────────────── */
.inner-card[id] { scroll-margin-top: 76px; }
.inner-card p { color: var(--text); line-height: 1.7; }
.inner-card p + p { margin-top: .75rem; }
.inner-card p + .fit-grid,
.inner-card p + .pros-cons { margin-top: 1rem; }
.inner-card h2 { margin-bottom: .85rem; }
.inner-card h3.subhead {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--navy);
  margin: 1.25rem 0 .5rem;
}
.inner-card h3.subhead.subhead-green { color: var(--green); }
.inner-card h3.subhead.subhead-amber { color: #b45309; }

/* Stacked (non-grid) content blocks and their neighbors — e.g. a full-width
   .pros/.cons/.fit-for/.fit-against used standalone rather than inside
   .pros-cons/.fit-grid, or a table right after a paragraph */
.inner-card > p + .pros,
.inner-card > p + .cons,
.inner-card > p + .fit-for,
.inner-card > p + .cost-table-wrap,
.inner-card > p + .table-fade-wrap,
.inner-card > p + .elig-table,
.inner-card > p + .provider-grid {
  margin-top: 1rem;
}
.inner-card > .pros + p,
.inner-card > .cons + p,
.inner-card > .fit-for + .fit-against,
.inner-card > .fit-against + p {
  margin-top: 1.1rem;
}

/* Inline prose links (e.g. a pro/con bullet linking to a fuller explainer section) */
.inner-card a, .pros-cons a, .fit-for a, .fit-against a {
  color: var(--accent);
  text-decoration: underline;
}
.inner-card a:hover, .pros-cons a:hover, .fit-for a:hover, .fit-against a:hover {
  color: var(--navy);
}
.inner-card a.btn-primary { color: white; text-decoration: none; }
.inner-card a.btn-secondary { color: var(--navy); text-decoration: none; }

/* ── Pros / Cons ─────────────────────────────────────────────────────────── */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.pros h3, .cons h3 {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .6rem;
}
.pros h3 { color: var(--green); }
.cons h3 { color: var(--red); }

.pros ul, .cons ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.pros ul li::before { content: '✓ '; color: var(--green); font-weight: 700; }
.cons ul li::before { content: '✗ '; color: var(--red);   font-weight: 700; }

.check-yes { color: var(--green); font-weight: 700; }
.check-no  { color: var(--red);   font-weight: 700; }

.pros ul li, .cons ul li {
  font-size: var(--body-text);
  line-height: 1.6;
}
.pros ul li strong, .cons ul li strong { color: var(--text); }

/* ── Disclosure ───────────────────────────────────────────────────────────── */
.disclosure {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  border-top: 1px solid var(--border);
  padding-top: .65rem;
  margin-top: .9rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted);
}
.disclosure::before {
  content: 'ⓘ';
  flex-shrink: 0;
  color: var(--accent);
  font-size: .95rem;
  line-height: 1.5;
}

/* ── Editorial note ──────────────────────────────────────────────────────── */
.editorial-note {
  border-left: 3px solid var(--accent);
  background: var(--bg);
  padding: .85rem 1.1rem;
  border-radius: calc(var(--radius) - 2px);
  margin-top: 1rem;
  margin-bottom: .9rem;
  font-size: var(--body-text);
  line-height: 1.6;
  color: var(--text);
}
.editorial-note strong { color: var(--navy); }

/* ── Best for / not a good fit ──────────────────────────────────────────── */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.fit-for h3, .fit-against h3 {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .6rem;
}
.fit-for h3 { color: var(--green); }
.fit-against h3 { color: #b45309; }
.fit-for ul, .fit-against ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.fit-for ul li::before { content: '✓ '; color: var(--green); font-weight: 700; }
/* Provider button at the foot of a "Choose X If" column (compare pages). The
   column is a flex column and the button takes the leftover space above it, so
   paired columns' buttons line up even when their lists differ in length. */
.fit-for:has(> .fit-cta), .fit-against:has(> .fit-cta) { display: flex; flex-direction: column; }
.fit-cta { margin-top: auto; padding-top: 1.1rem; }
.fit-cta a.btn-primary, .fit-cta a.btn-secondary { display: inline-block; text-decoration: none; line-height: 1.4; }
/* Match .btn-primary's size so paired fit-cta buttons line up (minus the border) */
.fit-cta a.btn-secondary { padding: calc(.72rem - 1.5px) 1.75rem; border-width: 1.5px; font-size: .95rem; border-radius: 6px; }
.fit-against ul li::before { content: '! '; color: #b45309; font-weight: 700; }
.fit-for ul li, .fit-against ul li {
  font-size: var(--body-text);
  line-height: 1.6;
}

/* ── Callout note (attention-grabbing aside within an inner-card) ───────── */
.callout-note {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.35);
  border-left: 4px solid #b45309;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: 1.1rem;
}
.callout-note-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #b45309;
  margin-bottom: .4rem;
}
.callout-note p { margin: 0; color: var(--text); line-height: 1.7; }
.callout-note p + p { margin-top: .5rem; }

/* ── Worked cost example ─────────────────────────────────────────────────── */
.cost-example {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: .85rem 0 1rem;
}
.fit-grid > .worked-example { margin: 0; }
.worked-example {
  background: rgba(59,130,246,.06);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: .85rem 0 1rem;
}
.worked-example p { margin: 0; line-height: 1.6; }
.worked-example-list {
  list-style: none;
  padding: 0;
  margin: .85rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: var(--body-text);
}
.worked-example-list li { display: flex; justify-content: space-between; gap: 1rem; }
.worked-example-list li > span:last-child { white-space: nowrap; flex-shrink: 0; }
.worked-example-list li.worked-total {
  margin-top: .25rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(59,130,246,.25);
  font-size: 1rem;
  font-weight: 700;
  color: var(--green);
}
.plain-list {
  list-style: disc;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: .75rem 0;
}
.age-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}
.age-risk-card {
  background: rgba(59,130,246,.06);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-align: center;
}
.age-risk-age {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 .35rem;
}
.age-risk-life {
  font-size: .8rem;
  color: var(--muted);
  margin: 0 0 .9rem;
  line-height: 1.4;
}
.age-risk-life strong { color: var(--navy); font-weight: 700; }
.age-risk-terms {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.age-risk-terms li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  gap: .5rem;
}
@media (max-width: 640px) {
  .age-risk-grid { grid-template-columns: 1fr; }
}
.risk-tag {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.risk-tag.risk-high { background: rgba(220,38,38,.12); color: var(--red); }
.risk-tag.risk-mid  { background: rgba(180,83,9,.12); color: #b45309; }
.risk-tag.risk-low  { background: rgba(22,163,74,.12); color: var(--green); }

.scenario-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}
.scenario-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: .88rem; /* spec-style row (like a table), kept compact so it stays on one line */
  color: var(--text);
}
.scenario-box { margin-bottom: 1.25rem; }
.scenario-list li:not(:last-child)::after {
  content: '\00B7';
  color: var(--muted);
  margin: 0 .6rem;
}
.elig-table { margin-bottom: 1.25rem; }
.elig-table.compare-table { min-width: 640px; table-layout: fixed; }
.elig-table.compare-table col.compare-label-col { width: 130px; }
.elig-table.compare-table th { width: auto; white-space: normal; }
/* "Get Quote" link row at the foot of the all-provider Feature Comparison */
.compare-table tfoot td { border-top: 2px solid var(--border); }
.compare-table tfoot .btn-quote { font-size: .85rem; }

/* Quick Comparison table (HEI vs Reverse Mortgage) -- freeze the row-label
   column so it stays visible while scrolling to compare the two product
   columns. th already gets a navy background sitewide, so it stays opaque
   over the cells scrolling underneath it. Separate borders (same approach
   .heat-table below uses) so each cell paints its own border instead of
   sharing one via border-collapse. will-change forces the sticky cell onto
   its own GPU-composited layer -- Safari in particular can otherwise lag
   repainting a sticky table cell during an active scroll gesture, which
   shows up as its border/background visually drifting mid-scroll before
   snapping back into place once scrolling stops. */
#quick-compare table.compare-table {
  border-collapse: separate;
  border-spacing: 0;
}

#quick-compare table th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  will-change: transform;
}

/* Two scroll chevrons for an unusually tall compare table (e.g. the
   16-row Feature Comparison table) -- scoped to #specs-fade-wrap rather
   than applied globally, since a normal-height table doesn't need this
   and it shouldn't change how the shorter tables elsewhere look. The
   default .scroll-chevron centers itself on the *whole* table's height,
   so on a table this tall it isn't visible until scrolled about halfway
   down. Instead, split the table into thirds and place one chevron at
   each dividing line, using percentages (not a fixed px guess at the
   table's height, which varies by viewport width as row text wraps
   differently) so the space above the first chevron, between the two,
   and below the second stays equal at any height. */
#specs-fade-wrap .scroll-chevron { top: 33.33%; }
#specs-fade-wrap .scroll-chevron-mid { top: 66.66%; }
.cost-table-wrap { overflow-x: auto; margin-bottom: 1.25rem; }
.table-fade-wrap::after { border-radius: 0; }
.cost-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .85rem; table-layout: fixed; }
.cost-table th, .cost-table td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.cost-table th:first-child, .cost-table td:first-child { width: 22%; }
.cost-table th:first-child, .cost-table th:last-child { border-radius: 0; }
.cost-table th {
  color: rgba(255,255,255,.9);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: normal;
}
.cost-table td.apr { font-weight: 800; color: var(--navy); }
.cost-table tr:last-child td { border-bottom: none; }

/* Wider variant (e.g. Exit Year + Home Value + 5 providers) — the 22%/15%
   first-column width above is tuned for a 4-column 2-provider table and
   makes the first column oversized once there are more columns. Also
   raise the min-width: at the base table's 460px, 7 roughly-equal
   columns are too narrow on mobile for a dollar figure like $1,403,397
   to render on one line, so figures crowd/run together. */
.cost-table.cost-table-wide { min-width: 740px; }
.cost-table.cost-table-wide th:first-child,
.cost-table.cost-table-wide td:first-child { width: auto; }

.text-link {
  display: inline-block;
  margin-top: .5rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Heat matrix (e.g. exit-year × appreciation cost range) ────────────────── */
.heat-table-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}
.heat-table {
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: .88rem;
}
.heat-col-axis { width: 44px; }
.heat-col-label { width: 130px; }
.heat-table th, .heat-table td { padding: .6rem .35rem; text-align: center; box-shadow: inset -1px -1px 0 0 rgba(255,255,255,.5); }
.heat-table thead th { background: var(--navy); color: white; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.heat-table tbody th { background: var(--navy); color: white; font-weight: 600; text-align: left; padding-left: .85rem; white-space: nowrap; }
.heat-table td { font-weight: 700; color: var(--navy); }
/* Neutralize the sitewide th:first-child/th:last-child corner-rounding — rowspan/colspan
   gaps mean several heat-table cells are the DOM first/last th of their row without being
   the table's actual outer edge, which rounded corners that should stay square. */
.heat-table th { border-radius: 0; }
.heat-table thead th.heat-corner { background: transparent; box-shadow: none; }
.heat-table thead th.heat-exit-year { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.heat-table tbody th.heat-row-label { padding-left: .5rem; padding-right: .3rem; font-size: .8rem; }
.heat-table tbody th.heat-row-axis {
  position: relative;
  padding: 0;
  text-align: center;
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.heat-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
.heat-row-axis span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.heat-1 { background: rgba(22,163,74,.22); }
.heat-2 { background: rgba(22,163,74,.10); }
.heat-3 { background: rgba(245,158,11,.16); }
.heat-4 { background: rgba(245,158,11,.30); }
.heat-5 { background: rgba(220,38,38,.16); }
.heat-6 { background: rgba(220,38,38,.30); }
.heat-na { color: var(--muted); font-style: italic; font-weight: 400; box-shadow: inset -1px 0 0 0 var(--border), inset 0 -1px 0 0 var(--border); }
/* Override the sitewide tbody tr:hover td rule so hovering/tapping a row doesn't wash out the heat colors */
.heat-table tbody tr:hover td.heat-1,
.cost-table tbody tr:hover td.heat-1 { background: rgba(22,163,74,.22); }
.heat-table tbody tr:hover td.heat-2,
.cost-table tbody tr:hover td.heat-2 { background: rgba(22,163,74,.10); }
.heat-table tbody tr:hover td.heat-3,
.cost-table tbody tr:hover td.heat-3 { background: rgba(245,158,11,.16); }
.heat-table tbody tr:hover td.heat-4,
.cost-table tbody tr:hover td.heat-4 { background: rgba(245,158,11,.30); }
.heat-table tbody tr:hover td.heat-5,
.cost-table tbody tr:hover td.heat-5 { background: rgba(220,38,38,.16); }
.heat-table tbody tr:hover td.heat-6,
.cost-table tbody tr:hover td.heat-6 { background: rgba(220,38,38,.30); }
.heat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: .85rem;
  font-size: .78rem;
  color: var(--muted);
  align-items: center;
}
.heat-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.heat-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ── Reference rate panel (static snapshot, not a live feed) ───────────────── */
.rate-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.1rem;
}
.rate-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.rate-card .rate-label {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: .4rem;
}
.rate-card .rate-value { font-size: 1.4rem; font-weight: 800; color: var(--navy); margin-top: auto; }
.rate-card .rate-sub { font-size: .72rem; color: var(--muted); margin-top: .2rem; }
.rate-asof { font-size: .78rem; color: var(--muted); margin-top: .85rem; text-align: right; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: .9rem 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
  font-size: .95rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--muted);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p {
  margin-top: .6rem;
  color: var(--text);
  line-height: 1.65;
  font-size: var(--body-text);
}

/* ── Takeaway list (Learn articles) ─────────────────────────────────────── */
.takeaway-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-top: .9rem;
}
.takeaway-list li {
  font-size: var(--body-text);
  line-height: 1.6;
  padding-left: 1.5rem;
  position: relative;
}
.takeaway-list li::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
  position: absolute;
  left: 0;
}
.takeaway-list li strong { color: var(--navy); }

/* ── Ordered list ────────────────────────────────────────────────────────── */
.inner-ol {
  padding-left: 1.4rem;
  margin-top: .75rem;
  margin-bottom: .75rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.inner-ol li { line-height: 1.65; font-size: var(--body-text); }

/* ── Eligibility table ───────────────────────────────────────────────────── */
.elig-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.elig-table th, .elig-table td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.elig-table td { white-space: normal; }
.elig-table th {
  font-weight: 600;
  color: rgba(255,255,255,.9);
  width: 25%;
  white-space: nowrap;
  border-radius: 0;
}
.elig-table tr:last-child th,
.elig-table tr:last-child td { border-bottom: none; }

/* ── CTA card ────────────────────────────────────────────────────────────── */
.inner-cta-card {
  background: var(--navy);
  color: white;
  text-align: center;
}
.inner-cta-card h2 { color: white; margin-bottom: .6rem; }
.inner-cta-card p  { color: rgba(255,255,255,.8); margin-bottom: 1.25rem; }
.inner-cta-card a.btn-primary {
  background: white;
  color: var(--navy);
  text-decoration: none;
}
.inner-cta-card a.btn-primary:hover { background: #e5edf7; }
.inner-cta-card a.btn-secondary {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,.5);
  text-decoration: none;
}
.inner-cta-card a.btn-secondary:hover { border-color: white; }
/* Same size as the white .btn-primary beside it (which has no border) */
.inner-cta-card a.btn-primary,
.inner-cta-card a.btn-secondary { line-height: 1.4; }
.inner-cta-card a.btn-secondary { padding: calc(.72rem - 1.5px) 1.75rem; font-size: .95rem; border-radius: 6px; }
.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
}
/* Quieter secondary path under a CTA card's buttons */
.inner-cta-card .cta-alt-link {
  display: inline-block;
  margin-top: 1rem;
  color: rgba(255,255,255,.85);
  font-size: .88rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.inner-cta-card .cta-alt-link:hover { color: white; }
/* "Or read a review: Point · Hometap · …" line under a Learn article's CTA buttons */
.inner-cta-card p.cta-review-links { margin: 1rem 0 0; font-size: .88rem; color: rgba(255,255,255,.75); }
.inner-cta-card p.cta-review-links a { color: rgba(255,255,255,.95); text-decoration: underline; text-underline-offset: 2px; }
.inner-cta-card p.cta-review-links a:hover { color: white; }
/* Five equal-width provider buttons in one row (all-provider CTA card),
   under a small "Get started with" label */
.inner-cta-card p.cta-row-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.7);
  margin-bottom: .6rem;
}
.cta-actions.cta-actions-five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 720px;
  margin: 0 auto;
}
.cta-actions-five a.btn-primary { padding-left: .5rem; padding-right: .5rem; text-align: center; }
@media (max-width: 640px) {
  .cta-actions.cta-actions-five { grid-template-columns: 1fr; max-width: 240px; }
}

/* ── Buttons (secondary) ─────────────────────────────────────────────────── */
.btn-secondary {
  display: inline-block;
  padding: .55rem 1.1rem;
  background: white;
  color: var(--navy);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: border-color .15s;
}
.btn-secondary:hover { border-color: var(--navy); }

/* ── Provider directory grid (homepage) ─────────────────────────────────── */
.provider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.provider-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.provider-card-head {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.provider-card-head img {
  width: 90px;
  height: 32px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}
.provider-card-highlight {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy);
}
.provider-card-highlight::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
}
.provider-card-best-for {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text);
}
.provider-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  padding-top: .65rem;
  border-top: 1px solid var(--border);
}
.pc-stat { text-align: center; }
.pc-stat-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  display: block;
}
.pc-stat-value {
  font-size: .82rem;
  font-weight: 800;
  color: var(--navy);
  margin-top: .15rem;
  display: block;
}
.provider-card-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .1rem;
}
.provider-card-actions .btn-secondary,
.provider-card-actions .btn-primary { padding: .45rem .9rem; font-size: .85rem; }
/* Same-color border so it matches the bordered .btn-secondary's height */
.provider-card-actions .btn-primary { border: 1.5px solid var(--navy); }
.provider-card-actions .btn-primary:hover { border-color: var(--navy-dark); }

/* ── Link columns (head-to-head / learn lists) ──────────────────────────── */
.link-columns {
  list-style: none;
  columns: 2;
  column-gap: 1.5rem;
  margin-top: .75rem;
}
.link-columns li { break-inside: avoid; margin-bottom: .6rem; font-size: .9rem; }
.link-columns + .link-columns-label { margin-top: 1.25rem; }
.link-columns-label {
  display: block;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .provider-grid { grid-template-columns: 1fr; }
  .provider-card-stats { grid-template-columns: repeat(2, 1fr); }
  .provider-card-actions { gap: .5rem; flex-wrap: nowrap; }
  .provider-card-actions .btn-secondary,
  .provider-card-actions .btn-primary { padding: .4rem .7rem; font-size: .8rem; white-space: nowrap; }
  .link-columns { columns: 1; }

  .inner-hero { flex-direction: column-reverse; gap: .75rem; }
  .inner-hero-logo img { height: 26px; }
  .rate-asof { text-align: left; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .pros-cons { grid-template-columns: 1fr; }
  .fit-grid { grid-template-columns: 1fr; }
  .inner-hero h1 { font-size: 1.6rem; }
  .toc { font-size: .88rem; display: grid; grid-template-columns: 1fr; gap: .6rem; padding: .75rem .9rem; }
  .toc-label { grid-column: 1 / -1; }
  .scenario-list {
    list-style: disc;
    padding-left: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
  }
  .scenario-list li:not(:last-child)::after { content: none; margin: 0; }
  .bottom-line-stats { grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
  .cost-table { font-size: .78rem; }
  .cost-table th, .cost-table td { padding: .4rem .35rem; }
  .cost-table th:first-child, .cost-table td:first-child { width: 15%; }
  .cost-table th { font-size: .64rem; line-height: 1.3; white-space: normal; }
  .elig-table { table-layout: fixed; }
  .elig-table th:first-child { width: 128px; white-space: normal; }
  /* Quick Comparison table -- the 2 data columns default to splitting the
     remaining width evenly (256px each), far more than short yes/no phrases
     need. Narrowing them (and dropping the table's 640px min-width so the
     narrower widths actually take effect) cuts how much horizontal scroll
     is needed to see the Reverse Mortgage column at all. */
  #quick-compare table.compare-table { min-width: 0; }
  #quick-compare table th:not(:first-child) { width: 140px; }
  .heat-table { font-size: .78rem; }
  .heat-table th, .heat-table td { padding: .45rem .3rem; }
  .heat-col-axis { width: 39px; }
  .heat-col-label { width: 112px; }
  .heat-table tbody th.heat-row-label { padding-left: .4rem; padding-right: .25rem; font-size: .72rem; }
  .heat-row-axis span { font-size: .68rem; }
  .rate-panel { grid-template-columns: 1fr 1fr; }
}

/* ── Related-links card (reviews: "Keep Researching X"; head-to-heads: "Related Comparisons") ── */
.related-card .related-row { margin-top: .6rem; line-height: 1.8; }
.related-card .related-row:first-of-type { margin-top: .4rem; }
.related-card .related-label { font-weight: 600; color: var(--navy); margin-right: .25rem; }
.related-card .related-row a { white-space: nowrap; } /* wrap between links, not mid-name */