/* ============================================================================
   Pain Journal: homepage sections. Loads after base.css.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(40px, 6vw, 76px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.7rem, 6.2vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--pine);
  margin: 0;
}

.hero h1 em {
  font-style: italic;
  color: var(--terracotta);
}

.hero .lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.42rem);
  color: var(--ink);
  max-width: 30ch;
  margin: 20px 0 0;
  line-height: 1.4;
  text-wrap: balance;
}

.hero .sub {
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 14px 0 0;
  font-size: 1rem;
}

.hero .cta-row { margin-top: 30px; }
.hero .microtrust { margin-top: 20px; }

.hero-visual {
  position: relative;
  justify-self: center;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: -10% -6% -4% -8%;
  /* Soft terracotta wash tied to the body-map pain signal, not a generic aurora. */
  background: radial-gradient(56% 50% at 52% 42%, color-mix(in srgb, var(--terracotta) 10%, transparent), transparent 72%);
  z-index: 0;
}

.hero-visual .phone {
  z-index: 1;
  width: clamp(240px, 32vw, 318px);
}

/* ---------- Steps 01 / 02 / 03 ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(40px, 5vw, 64px);
}

.step {
  padding-top: 26px;
  border-top: 2px solid var(--rule);
}

.step .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--terracotta);
}

.step h3 {
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  color: var(--pine);
  margin: 14px 0 8px;
}

.step p {
  color: var(--ink-muted);
  font-size: 0.98rem;
}

/* ---------- Doctor report wedge (dark) ---------- */
.wedge {
  color: var(--paper);
  background: var(--grad-wedge);
}

.wedge .kicker { color: var(--terracotta-soft); }

.wedge-grid {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}

.wedge .section-title { color: var(--paper); }
.wedge .section-title em { color: var(--terracotta-soft); }

.wedge p.body {
  color: var(--pine-light);
  font-size: 1.06rem;
  line-height: 1.66;
  margin-top: 18px;
  max-width: 46ch;
}

.compare {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compare-row {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 0.98rem;
  color: var(--paper);
}

.compare-row .mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}

.compare-row.yes .mark {
  background: color-mix(in srgb, var(--pine-soft) 22%, transparent);
  color: var(--pine-light);
}

.compare-row.no .mark {
  background: color-mix(in srgb, var(--terracotta-light) 18%, transparent);
  color: var(--terracotta-soft);
}

.compare-row.no { color: var(--pine-light); }

.wedge-visual {
  justify-self: center;
  position: relative;
}

.wedge-visual .phone { width: clamp(240px, 30vw, 316px); }

/* ---------- Features (alternating media rows) ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

.section-title + .feature-row { margin-top: clamp(40px, 5vw, 64px); }
.feature-row + .feature-row { margin-top: clamp(52px, 7vw, 96px); }
.feature-row.reverse .feature-visual { order: -1; }

.feature-copy h3 {
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--pine);
  margin: 0;
}

.feature-copy p {
  color: var(--ink-muted);
  margin-top: 14px;
  font-size: 1.04rem;
  max-width: 42ch;
}

.feature-visual {
  justify-self: center;
  position: relative;
}

.feature-visual .phone {
  z-index: 1;
  width: clamp(214px, 27vw, 272px);
}

/* Value list (compact, deliberately distinct from media rows) */
.values {
  margin-top: clamp(56px, 8vw, 100px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}

/* .value item look lives in base.css (shared with for-clinicians .reason). */

/* ---------- Trust quote ---------- */
.trust {
  background: var(--paper-raised);
  border-block: 1px solid var(--rule-soft);
}

.trust-inner {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.trust .quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--terracotta);
}

.trust blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.55rem, 3.4vw, 2.4rem);
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--pine);
  margin: 18px 0 0;
}

.trust .attr {
  margin-top: 20px;
  color: var(--ink-muted);
  font-size: 0.92rem;
  font-weight: 500;
}

/* Maker's note: the dev's answer to the patient's quote. A signed line, not a
   row of chips: the honest-indie story is a differentiator, so lean into it. */
.trust .maker {
  max-width: 50ch;
  margin: 32px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.trust .maker strong {
  font-weight: 600;
  font-style: italic;
  color: var(--terracotta);
}

/* ---------- Resources ---------- */
.resources-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* "See more" arrow link: same pine -> terracotta + gap-expand as .related a. */
.see-all {
  text-decoration: none;
  color: var(--pine);
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  transition: gap 0.18s var(--ease-out), color 0.15s ease;
}

.see-all:hover { gap: 10px; color: var(--terracotta); }

/* .res-grid / .res-card live in base.css (shared with the resources hub). */
.res-grid { margin-top: clamp(30px, 4vw, 46px); }

/* The final CTA uses the shared .cta-band component (base.css), same as every
   interior page's closing CTA. */

/* ---------- Homepage responsive ---------- */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 44px;
  }

  .hero .lede,
  .hero .sub { margin-inline: auto; }

  .hero .cta-row,
  .hero .microtrust { justify-content: center; }

  .wedge-grid { grid-template-columns: 1fr; gap: 44px; }
  .wedge-visual { order: -1; }

  .feature-row { grid-template-columns: 1fr; gap: 32px; text-align: center; }

  .feature-row .feature-visual { order: -1; }

  .feature-copy p { margin-inline: auto; }
}

@media (max-width: 680px) {
  .steps { grid-template-columns: 1fr; gap: 6px; }

  .step {
    padding-block: 22px;
    border-top: none;
    border-bottom: 1px solid var(--rule);
  }

  .step:first-child { border-top: 2px solid var(--rule); }

  .values { grid-template-columns: 1fr; gap: 4px; }

  .value {
    padding-block: 20px;
    border-top: none;
    border-bottom: 1px solid var(--rule);
  }

  .value:first-child { border-top: 1px solid var(--rule); }
}