/*
 * Home-page layout only (D2.2). The hero is a full-width PRODUCT CANVAS, not a phone parked in a
 * corner: real app screens composed into one scene, with the mesh behind them.
 */

/* ── Hero ─────────────────────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-block: var(--sp-64) var(--sp-96);
  overflow: hidden;
}

/*
 * Copy on the left, product on the right - but the product half is DOMINANT (5/7) and the screens are
 * rendered large enough to actually read. An earlier version put three ~200px thumbnails in a row, which
 * is exactly the "phone parked in a corner" the brief rules out: you could not read a single number in
 * any of them, so the product proved nothing.
 */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-64);
  align-items: center;
}

.hero h1 {
  margin-bottom: var(--sp-24);
  letter-spacing: -0.03em;
}

.hero .lede {
  margin-bottom: var(--sp-32);
  max-width: 46ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-bottom: var(--sp-16);
}

.hero__fineprint {
  font-size: var(--fs-14);
  color: var(--faint);
  margin: 0;
}

@media (max-width: 1040px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-48);
  }
}

/*
 * Overlapping stack: one lead screen at full size with two supporting screens tucked behind it. The
 * lead screen is ~2x the width of the old thumbnails, so the net-worth figure, the allocation split and
 * the search results are all legible at a glance.
 */
.canvas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  min-height: 620px;
  /* Keeps the tilted back screens off the container edge - without this the right-hand screen is sliced
     by the hero's overflow:hidden and reads as a rendering bug rather than a composition. */
  padding-inline: 5%;
}

.canvas__screen {
  grid-row: 1;
}

.canvas__screen--lead {
  grid-column: 4 / span 6;
  z-index: 3;
}

.canvas__screen--back-left {
  grid-column: 1 / span 5;
  z-index: 2;
  transform: translateY(26px) scale(0.8) rotate(-3deg);
  transform-origin: bottom right;
}

.canvas__screen--back-right {
  grid-column: 8 / span 5;
  z-index: 1;
  transform: translateY(-26px) scale(0.8) rotate(3deg);
  transform-origin: top left;
}

/* The supporting screens sit behind, so they read as context rather than competing for the eye. */
.canvas__screen--back-left .device,
.canvas__screen--back-right .device {
  opacity: 0.94;
}

@media (max-width: 1040px) {
  .canvas {
    min-height: 0;
  }
  .canvas__screen--back-left {
    transform: translateY(18px) scale(0.8) rotate(-3deg);
  }
  .canvas__screen--back-right {
    transform: translateY(-18px) scale(0.8) rotate(3deg);
  }
}

@media (max-width: 720px) {
  /* On a phone one screen IS the story; the rest would be thumbnails again. */
  .canvas__screen--back-left,
  .canvas__screen--back-right {
    display: none;
  }
  .canvas__screen--lead {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas__screen--back-left,
  .canvas__screen--back-right {
    transform: scale(0.86);
  }
}

/* ── Section headers ──────────────────────────────────────────────────────────────────────────── */

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--sp-48);
}

.section--tint {
  background: var(--surface-2);
}

/* ── The inline allocation-ring demo ──────────────────────────────────────────────────────────── */

/* Sits inside a stat row next to the net-worth figure it explains, not floating on its own. */
.ring-row {
  display: flex;
  align-items: center;
  gap: var(--sp-32);
  margin-top: var(--sp-32);
  flex-wrap: wrap;
}

.ring {
  display: block;
  width: 148px;
  flex: none;
}

.ring__track {
  stroke: var(--line);
}

.ring__label {
  text-anchor: middle;
  fill: var(--ink);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ring__sub {
  text-anchor: middle;
  fill: var(--muted);
  font-size: 7px;
}

/* ── Compare-tray demo ────────────────────────────────────────────────────────────────────────── */

.tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-16);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.tray__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-full);
  background: var(--chip);
  color: var(--ink);
  font-size: var(--fs-14);
  font-weight: 550;
}

.tray__count {
  font-size: var(--fs-12);
  color: var(--muted);
  margin-inline-end: auto;
  width: 100%;
}

/* ── Evidence list (Health story) ─────────────────────────────────────────────────────────────── */

.evidence {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-12);
}

.evidence li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--sp-12);
  align-items: start;
  margin: 0;
}

.evidence svg {
  width: 20px;
  height: 20px;
  color: var(--brand-600);
  margin-top: 2px;
}

/* ── Net-worth ticker block ───────────────────────────────────────────────────────────────────── */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.stat__value {
  font-size: var(--fs-48);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

.stat__label {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat__delta {
  font-size: var(--fs-14);
  color: var(--positive);
  font-variant-numeric: tabular-nums;
}