/* Homepage (design system v2). Uses site.css tokens and components only:
   .display, .lead, .search, .range-chart, .data-table, .section-title, .lead-magnet, .photo.
   Sections are separated by space and a single hairline; one alternate band ("How we work").
   Photo slots (render only when configured): hero photo under the headline column, "how we work" photo
   under that heading. */

/* ---------- Hero: headline + search (8/12) | Start here (4/12) ---------- */
.home-hero { padding-block: clamp(32px, 5vw, 80px) clamp(40px, 4vw, 64px); }
.home-hero__grid { display: grid; gap: var(--space-12); align-items: start; }
.home-hero__main { display: grid; gap: var(--space-5); min-width: 0; }
.home-hero__title { max-width: 13em; }
.home-hero__dek { max-width: 40em; }
.home-hero__search { margin-top: var(--space-3); }
.home-hero__meta { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
.home-hero__meta a { color: var(--color-text-soft); }
.home-hero__meta a:hover { color: var(--color-primary); }

.home-start { border-top: 3px solid var(--color-text); padding-top: var(--space-4); min-width: 0; }
.home-start__title { font-size: var(--fs-body); line-height: 1.3; font-weight: 700; color: var(--color-text); }
.home-start__list { margin-top: var(--space-2); }
.home-start__item { display: grid; gap: 2px; padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.home-start__item:last-child { border-bottom: 0; padding-bottom: 0; }
.home-start__link {
  font-size: var(--fs-body); line-height: 1.35; font-weight: 650; color: var(--color-text);
  text-decoration-line: underline; text-decoration-color: var(--color-border-strong);
}
.home-start__link:hover { color: var(--color-primary); text-decoration-color: currentColor; }
.home-start__text { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-soft); }
.home-start__item--thumb { grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--space-4); align-items: start; }
.home-start__item--thumb > * { grid-column: 2; }
.home-start__item--thumb > .home-start__thumb { grid-column: 1; grid-row: 1 / span 2; }
.home-start__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); outline: 1px solid var(--color-border); outline-offset: -1px; }
.home-start__item--crisis .home-start__link { color: var(--color-accent-ink); text-decoration-color: currentColor; }
.home-start__item--crisis .home-start__link:hover { color: var(--color-accent-ink); }

/* Optional hero photo (slot "home-hero"): phones show it after the search box, before "Start here";
   desktop puts it under the headline column while "Start here" stays beside the headline (asymmetric). */
.home-hero__photo { min-width: 0; }
@media (min-width: 960px) {
  .home-hero__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(48px, 6vw, 96px); }
  .home-start { margin-top: 0.6rem; }
  .home-hero__grid--photo { row-gap: var(--space-10); }
  .home-hero__grid--photo .home-hero__main { grid-column: 1; grid-row: 1; }
  .home-hero__grid--photo .home-hero__photo { grid-column: 1; grid-row: 2; }
  .home-hero__grid--photo .home-start { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- Sections ---------- */
.home-section { padding-block: var(--section-pad); }
.home-section + .home-section:not(.home-section--alt) { border-top: 1px solid var(--color-border); }
.home-section--alt { background: var(--color-bg-alt); border-block: 1px solid var(--color-border); }
.home-section--alt + .home-section { border-top: 0; }
.home-hero + .home-section { border-top: 1px solid var(--color-border); }

/* Asymmetric split: heading 4/12, body 8/12 */
.home-split { display: grid; gap: var(--space-5); }
.home-split__head { display: grid; gap: var(--space-6); align-content: start; min-width: 0; }
.home-split__body { min-width: 0; max-width: var(--measure); color: var(--color-text-soft); }
.home-split__body > p + p { margin-top: var(--space-4); }
@media (min-width: 960px) {
  .home-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(48px, 6vw, 96px); }
}

/* ---------- Cost: range chart + our reading of it ---------- */
.home-cost { display: grid; gap: var(--space-10); align-items: start; }
.home-cost__chart { min-width: 0; }
.home-cost__take { display: grid; gap: var(--space-4); max-width: 60ch; }
.home-verdict { font-size: var(--fs-lead-lg); line-height: 1.45; font-weight: 650; color: var(--color-text); }
.home-cost__note { font-size: var(--fs-sm); line-height: 1.55; color: var(--color-text-muted); }
@media (min-width: 1080px) {
  .home-cost { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(48px, 5vw, 80px); }
  .home-cost__take { padding-top: var(--space-8); }
}

/* ---------- Where the centers are: ranked table ---------- */
.home-clusters .data-table { min-width: 640px; }
.home-clusters .data-table th:first-child { width: 30%; }
.home-clusters .data-table th:nth-child(2) { width: 18%; }
.home-count { white-space: nowrap; }
.home-count__n { display: block; font-weight: 600; }
.home-count__bar { display: block; width: 80px; height: 6px; margin-top: 8px; background: var(--color-bg-alt); position: relative; }
.home-count__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--n); background: var(--color-primary); }

/* ---------- What we cover ---------- */
.home-next { font-size: var(--fs-label); color: var(--color-text-muted); }

/* ---------- How we work: three one-line statements with hairline rules ---------- */
.home-principles { display: grid; border-top: 1px solid var(--color-border-strong); }
.home-principle { padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.home-principle:last-child { border-bottom: 0; padding-bottom: 0; }
.home-principle p { font-size: var(--fs-body); line-height: 1.55; color: var(--color-text-soft); }
.home-principle strong { font-weight: 700; color: var(--color-text); }
.home-principle a { white-space: nowrap; }