/* ==========================================================================
   Post Mantra homepage (index.html). Scoped under .page-home.
   Five blocks: dark hero with the product list · Agent Guru (alt) ·
   Agent Jasmine · how buying works (dark) · closing contact band (glow).
   Tokens only: no hex, no rgba, no !important. System breakpoints.
   ========================================================================== */

/* ---------- 1 · Hero (dark brand surface): headline left, the product list right ---------- */
.page-home .home-hero {
  --glow-x: 74%; --glow-y: 50%;
  padding-top: clamp(48px, 6.4vw, 96px); padding-bottom: clamp(56px, 6.8vw, 104px);
}
.page-home .home-hero__split { align-items: center; }
@media (min-width: 921px) {
  .page-home .home-hero__split { --a: 1 / span 7; --b: 8 / span 5; }
  .page-home .home-hero__visual { padding-left: clamp(0px, 1.6vw, 24px); }
}
@media (max-width: 920px) {
  .page-home .home-hero { --glow-x: 50%; --glow-y: 78%; }
  .page-home .home-hero__visual { max-width: 600px; }
}
.page-home .home-hero .hero__title { max-width: 16ch; }
.page-home .home-hero .hero__standfirst { max-width: 44ch; }
.page-home .home-hero__kicker {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: clamp(18px, 2vw, 26px);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: var(--accent);
}
.page-home .home-hero__kicker::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--mark); }
.page-home .home-hero .hero__note { display: flex; align-items: center; gap: 8px; }
.page-home .home-hero .hero__note .i { color: var(--mark); }

/* The product list on the dark panel */
.page-home .home-products { padding: 16px 22px 18px; }
.page-home .home-products .status-table caption { padding-bottom: 10px; }
.page-home .home-products .status-table th,
.page-home .home-products .status-table td { padding: 16px 0 17px; }
.page-home .home-products .status-table__name { font-size: 1.375rem; }
.page-home .home-products .status-table__desc { max-width: 30ch; }
.page-home .home-products__foot {
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-size: var(--fs-small); color: var(--fg-2);
}
.page-home .home-products__foot .arrow-link { color: var(--fg); }
@media (max-width: 520px) {
  .page-home .home-products { padding-inline: 16px; }
  .page-home .home-products .status-table__name { font-size: 1.1875rem; }
  .page-home .home-products .state { font-size: var(--fs-caption); }
}

/* ---------- Shared: price line, a button row with an arrow link ---------- */
.page-home .home-actions { gap: 14px 28px; align-items: center; }
.page-home .home-price { margin-top: var(--space-5); max-width: 42ch; font-size: var(--fs-caption); line-height: 1.55; color: var(--fg-2); }
.page-home .home-price b {
  display: block; margin-bottom: 2px;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--fg);
}
.page-home .home-price .arrow-link { color: var(--fg); font-size: var(--fs-small); font-weight: 500; }
.page-home .home-more { margin-top: var(--space-5); font-size: var(--fs-small); }

/* ---------- 2 · Agent Guru: headline and line on top, then the product window and the details ---------- */
.page-home .home-guru__head .home-guru__lead { max-width: 36ch; }
@media (min-width: 921px) {
  .page-home .home-guru__head > .home-guru__lead { justify-self: start; }
  .page-home .home-guru { --a: 1 / span 7; --b: 8 / span 5; align-items: center; }
  .page-home .home-guru__head > .home-guru__lead,
  .page-home .home-guru__more { padding-left: clamp(0px, 2.6vw, 48px); }
}
.page-home .home-guru { row-gap: var(--space-6); }
.page-home .home-guru .home-actions { margin-top: var(--space-6); }

/* Coaching window: conversation left, the chapter score right */
@media (min-width: 761px) {
  .page-home .home-coach .ui__body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
@media (min-width: 921px) and (max-width: 1180px) {
  .page-home .home-coach .ui__crumb { display: none; }
}
.page-home .home-coach .score__status { white-space: nowrap; }
.page-home .home-coach .msg { max-width: 96%; }
.page-home .home-coach .kp li:last-child { border-bottom: 0; }
.page-home .home-coach .score__num span { font-size: 3rem; }
@media (max-width: 760px) {
  .page-home .home-coach .kp { display: none; }
}

/* ---------- 3 · Agent Jasmine ---------- */
@media (min-width: 921px) {
  .page-home .home-jasmine { --a: 1 / span 5; --b: 6 / span 7; align-items: center; }
}
.page-home .home-jasmine .home-actions { margin-top: var(--space-6); }
.page-home .home-jasmine .spread { --spread-h: clamp(220px, 22vw, 320px); }
@media (max-width: 600px) {
  .page-home .home-jasmine .spread { --spread-cols: 1.3fr 1fr 1fr; --spread-h: clamp(150px, 44vw, 220px); gap: 8px; }
  .page-home .home-jasmine .spread > :first-child { grid-column: auto; }
  .page-home .home-jasmine .spread__label { font-size: var(--fs-micro); }
  .page-home .home-jasmine .spread__label b { display: block; margin: 0; }
}

/* ---------- 4 · How buying works (dark band, flat) ---------- */
.page-home .home-buy .flow { margin-top: var(--space-2); }
.page-home .home-buy .flow__link { margin-top: auto; padding-top: 4px; font-size: var(--fs-small); }
.page-home .home-custom {
  margin-top: clamp(40px, 4.4vw, 64px); padding-top: var(--space-5); border-top: 1px solid var(--line-2);
  font-size: var(--fs-small); line-height: 1.55; color: var(--fg-2);
}
.page-home .home-custom a { color: var(--fg); white-space: nowrap; }
.page-home .home-custom a .i { display: inline-block; margin-left: 3px; vertical-align: -1px; }

/* ---------- 5 · Closing contact band (dark brand surface, glow) ---------- */
.page-home .home-cta { align-items: center; }
.page-home .home-cta .contact-lines { margin-top: var(--space-3); }
@media (min-width: 921px) {
  .page-home .home-cta { --a: 1 / span 6; --b: 8 / span 5; }
}

/* ---------- Phones: a tighter vertical rhythm for this page ---------- */
@media (max-width: 520px) {
  .page-home .section { padding-block: 48px; }
  .page-home :is(.section, .hero):not(.surface--alt, .surface--accent, .surface--dark) + .section:not(.surface--alt, .surface--accent, .surface--dark) { padding-top: 0; }
  .page-home .section-head { margin-bottom: 28px; }
}