/* Health check landing page (#/health-check before the quiz starts). The hero reuses the site's
   photo hero (.hero / .hero-photo in styles.css and responsive.css); this file only adds what is
   specific to this page. Hero: shop-counter-stock (licensed stock, owner decision 30 Sep 2026); next steps: terrace-3518 (owner photo). */

.health-hero .hero-photo img { object-position: 68% 50%; }
.hc-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--blue); margin-bottom: 18px; }

.hc-topics h2, .hc-next h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.1; max-width: 18ch; }
.hc-sub { margin-top: 16px; max-width: 54ch; font-size: 17px; line-height: 1.6; color: var(--muted); }
.hc-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: 48px; }
.hc-topic { border-top: 1px solid var(--line); padding-top: 26px; }
.hc-topic .icon { width: 26px; height: 26px; color: var(--blue); }
.hc-topic h3 { margin-top: 16px; font-size: 22px; }
.hc-topic ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.hc-topic li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.hc-topic li::before { content: ''; position: absolute; left: 0; top: .78em; width: 8px; height: 1px; background: var(--blue); }

.hc-next { background: var(--pale); padding-block: clamp(64px, 8vw, 112px); }
.hc-next-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.hc-next-photo { margin: 0; }
.hc-next-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 38% 30%; border-radius: var(--radius); }
.hc-next-photo figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.hc-steps { list-style: none; counter-reset: hc-step; margin: 34px 0 0; padding: 0; display: grid; gap: 24px; }
.hc-steps li { counter-increment: hc-step; display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 18px; }
.hc-steps li::before {
  content: counter(hc-step); grid-row: span 2; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid #b9ccd4; background: #fff; display: grid; place-items: center; font-size: 15px; color: var(--deep);
}
.hc-steps strong { font-size: 19px; font-weight: 500; color: var(--ink); align-self: center; }
.hc-steps span { margin-top: 4px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.hc-next .actions { margin-top: 36px; }
.hc-next .demo-note { margin-top: 18px; max-width: 46ch; }

/* Gentle fade-up as sections scroll in (app.js revealOnScroll). Reduced motion shows them at once. */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
.hc-topic-grid .hc-topic:nth-child(2) { transition-delay: .08s; }
.hc-topic-grid .hc-topic:nth-child(3) { transition-delay: .16s; }

@media (max-width: 900px) {
  .hc-topic-grid { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .hc-topic { padding-block: 22px; }
  .hc-next-grid { grid-template-columns: 1fr; }
  .hc-next-photo { order: 2; }
}

@media (max-width: 600px) {
  .hc-eyebrow { margin-bottom: 12px; }
  .hc-topics h2, .hc-next h2 { font-size: clamp(28px, 8vw, 36px); }
  .hc-sub { font-size: 16px; }
  .hc-steps strong { font-size: 17px; }
  .hc-steps span, .hc-topic li { font-size: 15px; }
  .hc-next .actions .button { width: 100%; justify-content: space-between; }
}