/* ==========================================================================
   invest.css — Invest hub, investment calculator page, guides index and guide pages.
   Page layout only: every component comes from site.css (DESIGN.md §3). Semantic tokens only,
   mobile-first, breakpoints 640 / 980 / 1200.
   Page classes (please mirror in DESIGN.md if they become shared): .invest-thesis, .invest-driver(s),
   .invest-where, .invest-calc, .invest-teaser, .invest-compare, .invest-lead, .invest-meaning,
   .guides-grid, .guides-feature, .guide-card__link, .guide-rail, .guide-section, .guide-band,
   .guide-cards, .guide-checklist, .guide-cash, .guide-table, .guide-figures, .guide-sources, .guide-byline.
   ========================================================================== */

/* ---------------------------------------------------------------- shared */
.invest-where > .section-head,
.invest-calc__copy > .section-head,
.invest-lead__copy > .section-head,
.invest-meaning__intro > .section-head{ margin-bottom:0; }

/* ==========================================================================
   INVEST HUB
   ========================================================================== */

/* ---- hero: thesis card ---- */
.invest-hero__card{ gap:var(--space-4); }
.invest-thesis{ display:grid; grid-template-columns:minmax(0,1fr); }
.invest-thesis__item{
  display:grid; grid-template-columns:minmax(4.2ch,auto) minmax(0,1fr); align-items:baseline; gap:16px;
  padding-block:14px; border-top:1px solid var(--line);
}
.invest-thesis__item:first-child{ border-top:0; padding-top:2px; }
.invest-thesis__value{
  font:400 var(--fs-stat-md)/.9 var(--font-serif); letter-spacing:-.02em; color:var(--text);
  font-variant-numeric:lining-nums; white-space:nowrap;
}
.invest-thesis__text{ font-size:var(--fs-sm); line-height:1.45; color:var(--text-2); hyphens:auto; }
.invest-thesis__source{ display:block; margin-top:4px; font:500 var(--fs-micro)/1.45 var(--font-mono); color:var(--muted); hyphens:manual; }
.invest-thesis__source a{ color:inherit; }
.invest-thesis__source a:hover{ color:var(--text); }

/* ---- before and now ---- */
.invest-drivers{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); }
.invest-drivers__list{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
.invest-driver{
  display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-content:start; min-width:0;
  padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface);
}
.invest-driver__icon{ width:var(--icon-lg); height:var(--icon-lg); color:var(--icon-accent); }
.invest-driver__title{ font:600 var(--fs-h4)/1.3 var(--font-sans); letter-spacing:0; }
.invest-driver__change{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.invest-driver__before,.invest-driver__now{
  font:400 clamp(1.5rem,1.25rem + 1vw,2.125rem)/1.05 var(--font-serif); letter-spacing:-.015em; font-variant-numeric:lining-nums;
}
.invest-driver__before{ color:var(--muted); }
.invest-driver__now{ color:var(--text); }
.invest-driver__arrow{ width:var(--icon-md); height:var(--icon-md); color:var(--accent); }
.invest-driver__text{ font-size:var(--fs-sm); line-height:1.55; color:var(--text-2); hyphens:auto; }
@media (min-width:640px){
  .invest-drivers__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:980px){
  .invest-drivers--chart{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); align-items:start; gap:var(--space-6); }
  .invest-drivers--chart > .chart-card{ position:sticky; top:calc(var(--header-h) + 24px); }
}

/* ---- where to invest ---- */
.invest-where{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
.invest-where__map{ min-width:0; }
@media (min-width:980px){ .invest-where__chips{ justify-content:flex-start; } }

/* ---- calculator teaser ---- */
.invest-calc{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); }
.invest-calc__copy{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); align-content:start; }
.invest-calc__points{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.invest-calc__points li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.5; color:var(--text-2); }
.invest-calc__points .icon{ margin-top:1px; color:var(--positive); }
.invest-teaser{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-3); min-width:0; }
.invest-teaser > .calc__group{ box-shadow:var(--shadow-2); }
.invest-teaser input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.invest-teaser input[type="number"]::-webkit-inner-spin-button,
.invest-teaser input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
@media (min-width:980px){
  .invest-calc{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--space-8); }
}

/* ---- with Ricardo vs on your own ---- */
.invest-compare__alone{ font-size:var(--fs-xs); line-height:1.35; color:var(--muted); }
.invest-compare__note{
  max-width:62ch; margin:var(--space-5) auto 0; text-align:center;
  font-size:var(--fs-xs); line-height:1.6; color:var(--muted);
}
.invest-compare__note a{ color:var(--link); }

/* ---- consultation (also used on the calculator page) ---- */
.invest-lead{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); }
.invest-lead__copy{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); align-content:start; min-width:0; }
.invest-lead__form{ min-width:0; }
.invest-lead__disclaimer{ grid-column:1 / -1; }
@media (min-width:980px){
  .invest-lead{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; column-gap:var(--space-8); }
  .invest-lead__copy{ position:sticky; top:calc(var(--header-h) + 24px); }
}

/* ---- calculator page ---- */
.invest-calc-fallback{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); max-width:var(--measure); color:var(--text-2); }
.invest-calc-page__note{ max-width:var(--measure); margin-top:var(--space-4); }
.invest-meaning{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); }
.invest-meaning__intro{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); align-content:start; min-width:0; }
.invest-meaning__hint{ font-size:var(--fs-sm); line-height:1.55; color:var(--text-2); }
.invest-meaning__faq .faq__note{ margin-top:var(--space-5); }
@media (min-width:980px){
  .invest-meaning{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start; column-gap:var(--space-8); }
}
.faq--compact > .faq__note{ margin-top:var(--space-5); }

/* ==========================================================================
   GUIDES INDEX + CARDS
   ========================================================================== */
/* Four cards: a scroll-snap row below 640, 2 x 2 from 640, one row of four from 980. */
.guides-grid{
  display:flex; gap:var(--space-4); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter); scroll-padding-inline:var(--gutter);
}
.guides-grid::-webkit-scrollbar{ display:none; }
.guides-grid > .guides-grid__item{ flex:0 0 72%; scroll-snap-align:start; }
@media (min-width:640px){
  .guides-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6) var(--space-5); overflow:visible; margin:0; padding:0; }
}
@media (min-width:980px){
  .guides-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.guides-grid__item{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-content:start; min-width:0; }
.guides-grid__meta{ font:500 var(--fs-micro)/1.45 var(--font-mono); letter-spacing:.02em; color:var(--muted); hyphens:manual; }
.guides-grid__summary{ font-size:var(--fs-sm); line-height:1.55; color:var(--text-2); hyphens:auto; }

/* The title link covers the whole card; the visual CTA is decorative. */
.guide-card__link{ color:inherit; text-decoration:none; }
.guide-card__link:hover{ color:inherit; }
.guide-card__link::after{ content:""; position:absolute; inset:0; z-index:1; }
.guide-card__link:focus-visible{ box-shadow:none; }
.guide-card:has(.guide-card__link:focus-visible){ box-shadow:var(--ring); }
.guide-card__img.placeholder{ transition:transform var(--dur-slow) var(--ease); }
.guide-card:hover .guide-card__img{ transform:scale(1.03); }
.guide-card:hover .guide-card__cta{ background:var(--accent-hover); }
.guide-card__cta{ pointer-events:none; }

.guides-feature{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
.guides-feature__card{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-content:start; max-width:400px; min-width:0; }
.guides-feature__copy{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); align-content:start; justify-items:start; min-width:0; }
.guides-feature__title{ font-size:var(--fs-h2); line-height:1.1; max-width:20ch; }
.guides-feature__summary{ font-size:var(--fs-lede); line-height:1.55; color:var(--text-2); max-width:56ch; }
.guides-feature__steps{ display:grid; grid-template-columns:minmax(0,1fr); width:100%; max-width:560px; }
.guides-feature__steps li{
  display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:baseline;
  padding-block:10px; border-top:1px solid var(--line); font-weight:600;
}
.guides-feature__steps li:last-child{ border-bottom:1px solid var(--line); }
.guides-feature__steps small{ display:block; font-size:var(--fs-xs); font-weight:400; color:var(--muted); }
.guides-feature__num{ font:500 var(--fs-micro)/1.6 var(--font-mono); letter-spacing:.08em; color:var(--eyebrow); }
.guides-feature .hero__actions{ width:100%; }
.guides-disclaimer{ padding-block:var(--space-6) 0; }
@media (min-width:640px){
  .guides-feature{ grid-template-columns:minmax(0,280px) minmax(0,1fr); align-items:center; }
}
@media (min-width:980px){
  .guides-feature{ grid-template-columns:minmax(0,360px) minmax(0,1fr); column-gap:var(--space-8); }
}

/* ==========================================================================
   GUIDE PAGE
   ========================================================================== */
.guide-hero .hero__title{ max-width:18ch; }
.guide-hero__card .facts__row > dd{ max-width:60%; }
.guide-hero__note{ padding-top:12px; }

/* author byline under the lede: avatar (when there is a photo) + "By … · TREC # · brokerage", date, reviewer */
.guide-byline{ display:flex; align-items:flex-start; gap:12px; max-width:60ch; padding-top:var(--space-4); border-top:1px solid var(--line); }
.guide-byline__avatar{ flex:none; width:44px; height:44px; border-radius:50%; object-fit:cover; }
.guide-byline__text{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px; min-width:0; }
.guide-byline__author{ font-size:var(--fs-sm); line-height:1.45; color:var(--text-2); }
.guide-byline__author a{ font-weight:600; color:var(--text); text-decoration-color:var(--line-strong); }
.guide-byline__author a:hover{ color:var(--link-hover); text-decoration-color:currentColor; }
.guide-byline__meta{ font-size:var(--fs-xs); line-height:1.45; color:var(--muted); }
.guide-byline__meta a{ color:inherit; }

.guide-rail{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); align-content:start; min-width:0; }
.guide-rail__ask{ display:none; }
.guide-rail__ask .contact-card__agent small{ overflow-wrap:anywhere; }
@media (min-width:980px){
  .guide-rail{
    position:sticky; top:calc(var(--header-h) + 24px);
    max-height:calc(100vh - var(--header-h) - 48px); overflow-y:auto; overscroll-behavior:contain;
    padding:4px; margin:-4px; scrollbar-width:thin;
  }
  .guide-rail > .toc{ position:static; }
  .guide-rail__ask{ display:grid; }
}

.guide-section{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); min-width:0; scroll-margin-top:calc(var(--header-h) + 24px); }
.guide-section__head{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding-top:var(--space-5); border-top:1px solid var(--line); }
.guide-layout__main > .guide-section:first-child .guide-section__head{ padding-top:0; border-top:0; }
.guide-section__title{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem); line-height:1.15; max-width:24ch; }
.guide-section .prose h3{ margin-top:1.4em; }

/* checklist: green check discs instead of bullets */
.prose .guide-checklist{ padding-left:0; list-style:none; }
.guide-checklist li{ position:relative; padding-left:32px; }
.guide-checklist li::before{
  content:""; position:absolute; left:0; top:.25em; width:20px; height:20px; border-radius:50%; background:var(--positive-soft);
}
.guide-checklist li::after{
  content:""; position:absolute; left:6px; top:calc(.25em + 6px); width:8px; height:4px;
  border:solid var(--positive); border-width:0 0 2px 2px; transform:rotate(-45deg);
}

/* cards (financing options, rental income options) */
.guide-cards{ grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
@media (min-width:640px){ .guide-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.guide-cards .card__body{ gap:10px; }
.guide-cards__icon{ width:var(--icon-lg); height:var(--icon-lg); color:var(--icon-accent); }
.guide-cards .card__title{ -webkit-line-clamp:unset; display:block; }
.guide-cards__note{ width:100%; margin-top:auto; padding-top:10px; border-top:1px solid var(--line); font-size:var(--fs-xs); line-height:1.5; color:var(--muted); }

/* dark trust band inside the article */
.guide-band{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); padding:var(--space-6) var(--space-5); border-radius:var(--radius-lg); }
.guide-band .trust-grid__list{ gap:var(--space-6) var(--space-6); }
@media (min-width:640px){ .guide-band{ padding:var(--space-7) var(--space-6); } }
@media (min-width:980px){ .guide-band .trust-grid__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* steps stay vertical inside the narrower article column */
@media (min-width:980px){
  .guide-layout .steps--track .steps__list{ grid-auto-flow:row; grid-auto-columns:auto; gap:var(--space-6); }
  .guide-layout .steps--track .steps__list::before{ left:3.5px; right:auto; top:6px; bottom:6px; width:1px; height:auto; }
  .guide-layout .steps--track .step{ padding:0 0 0 24px; }
  .guide-layout .steps--track .step__marker{ top:4px; }
}
.guide-steps .step__title{ font-size:var(--fs-h4); }

/* FAQ: one column inside the article (no aside) */
@media (min-width:980px){
  .guide-layout .faq:not(.faq--compact){ display:flex; }
}

/* cash-to-close example */
.guide-cash{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-3); max-width:var(--measure);
  padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface);
}
.guide-cash__caption{ font-size:15px; line-height:1.5; color:var(--text-2); }
.guide-cash__caption b{ color:var(--text); font-variant-numeric:tabular-nums; }

/* figures and tables */
.guide-figures{ max-width:100%; }
.guide-table{ max-width:var(--measure); }
.guide-table th,.guide-table td{ white-space:normal; vertical-align:top; }
.guide-table tbody th{ font-weight:500; text-align:left; }
.guide-table :is(th,td):last-child{ width:7rem; font-weight:600; }

/* sources */
.guide-sources .guide-sources__list{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding-left:1.2em; list-style:square; font-size:var(--fs-sm); line-height:1.5; }
.guide-sources__list li::marker{ color:var(--accent); }
.guide-sources__list a{ overflow-wrap:anywhere; }
.guide-sources__review{ font-size:var(--fs-xs); line-height:1.6; color:var(--muted); }

@media (prefers-reduced-motion:reduce){
  .guide-card:hover .guide-card__img{ transform:none; }
}