/* Homepage sections. The hero's own component styles live in home-hero.css. */
@layer page {
  /* Baseline for the hero markup, so the page reads correctly before home-hero.css loads. */
  .home-hero { padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(32px, 4vw, 56px); }
  .home-hero h1 { max-width: 20ch; font-size: var(--fs-4xl); line-height: 1.06; }
  .home-hero .product-lead { margin-top: var(--space-5); font-size: clamp(18px, 1.6vw, 22px); }
  .home-hero .product-actions { margin-top: var(--space-6); }
  .home-demo-note, .home-facts { margin-top: var(--space-3); max-width: var(--measure); color: var(--muted); font-size: var(--fs-sm); }
  .home-facts a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }

  /* The worked example: what the caller says, and what the desk receives. */
  .home-example { padding-inline: clamp(20px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--bg-soft); }
  .home-example-label { margin-bottom: var(--space-2); color: var(--secondary); font-size: var(--fs-sm); font-weight: 700; }
  .home-example-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
  .home-example h3 { margin-bottom: var(--space-3); color: var(--muted); font-size: var(--fs-sm); letter-spacing: .02em; }
  .home-example blockquote { margin: 0; padding-left: var(--space-4); border-left: 3px solid var(--secondary); color: var(--ink); font-size: clamp(20px, 2vw, 25px); font-weight: 700; line-height: 1.4; }
  .home-example-call > p { margin-top: var(--space-4); max-width: 52ch; }
  .home-ticket { margin: 0; padding: 4px var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-sm); }
  .home-ticket div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
  .home-ticket div:last-child { border-bottom: 0; }
  .home-ticket dt { color: var(--muted); }
  .home-ticket dd { margin: 0; color: var(--ink); font-weight: 700; }
  .home-example .text-link { margin-top: var(--space-2); }
  .home-example + .product-section { border-top: 0; }

  .home-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
  .home-outcomes > div { padding-top: var(--space-4); border-top: 3px solid var(--secondary); }
  .home-outcomes h3 { font-size: var(--fs-md); }
  .home-outcomes p { margin-top: var(--space-2); font-size: 15px; }
  .product-section > .home-outcomes + .note { margin-top: var(--space-6); }

  .home-start p { max-width: var(--measure); }
  .home-start p + p { margin-top: var(--space-3); }
  .home-start h2 { margin-bottom: var(--space-4); }

  @media (max-width: 860px) {
    .home-outcomes, .home-example-grid { grid-template-columns: 1fr; }
    .home-ticket div { grid-template-columns: 1fr; gap: 2px; }
  }
}

/* The four objections buyers raise, answered near the call to action rather than in a FAQ. */
@layer page {
  .objections { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .objections .card h3 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); }
  .objections .card p { margin: 0; max-width: var(--measure); }
  .objections-next { margin-top: var(--space-5); }
  @media (max-width: 760px) { .objections { grid-template-columns: 1fr; } }
}