/* Page-specific additions for /iq — built on top of tokens/base/components/layout. */

/* HERO — full-bleed editorial image (see .editorial-hero in layout.css) */
.iq-hero{
  --glow: var(--turquoise);
  padding: 130px var(--side) 110px;
  min-height: 640px;
  display: flex; align-items: center;
}
.iq-hero .hero-content{ max-width: 760px; }
.iq-hero h1{ font-size: 58px; line-height: 1.05; }
.iq-hero .lede{ font-size: 18px; line-height: 1.6; color: var(--paper-soft); max-width: 620px; }
.iq-hero .subline{ font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.05em; color: var(--ink-soft); }

/* THREE QUESTIONS — the visual anchor of the page */
.questions-block{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.question-card{
  background: color-mix(in srgb, var(--surface) var(--veil-card), transparent); border: 1px solid var(--line); border-radius: 16px;
  padding: 40px 32px; display: flex; flex-direction: column; gap: 18px;
}
.question-card .num{ font-family: var(--font-mono); font-size: 14px; color: var(--turquoise); }
.question-card h3{ font-size: 26px; line-height: 1.2; }
.question-card p{ font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

/* PROCESS — three wide phase cards in a row, each holding two steps.
   Replaces the earlier alternating vertical timeline; see git history if
   that treatment is ever needed again. */
.phase-row{ display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 4px; }
.phase-card{
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; display: flex; flex-direction: column; gap: 20px;
}
.phase-card--result{
  background: linear-gradient(160deg, color-mix(in srgb, var(--turquoise) 10%, var(--surface)) 0%, color-mix(in srgb, var(--surface) 55%, transparent) 72%);
  border-color: color-mix(in srgb, var(--turquoise) 30%, var(--line));
}
.phase-card__head{ display: flex; flex-direction: column; gap: 6px; }
.phase-card__name{ font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--text); }
.phase-card__sub{ font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); }
.phase-card__steps{
  display: flex; flex-direction: column; gap: 18px;
  border-top: 1px solid var(--line-dark); padding-top: 20px;
}
.phase-step{ display: flex; flex-direction: column; gap: 6px; }
.phase-step + .phase-step{ border-top: 1px solid var(--line-dark); padding-top: 18px; }
.phase-step__num{ font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; letter-spacing: 0.01em; color: var(--turquoise); }
.phase-step p{ font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.phase-arrow{ display: flex; align-items: center; justify-content: center; padding: 0 6px; color: var(--turquoise); opacity: 0.7; }
.phase-arrow svg{ width: 18px; height: 18px; flex: none; }

/* QUIET STATEMENT — "Evidence before hype" */
.quiet-statement{
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  max-width: 880px; margin: 0 auto; padding: 56px 64px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--turquoise) 30%, var(--line-dark));
  background: linear-gradient(135deg, color-mix(in srgb, var(--turquoise) 7%, var(--surface)) 0%, color-mix(in srgb, var(--surface) var(--veil-card), transparent) 65%);
}
.quiet-statement h2{ font-size: 34px; }
.quiet-statement .line{ font-size: 17px; line-height: 1.6; color: var(--paper-soft); max-width: 620px; }
.quiet-statement .line--final{
  font-size: 19px; color: var(--text); font-weight: 600; margin-top: 8px; padding-top: 26px; position: relative;
}
.quiet-statement .line--final::before{
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 64px; height: 1px; background: var(--line-dark);
}

/* BULLET LIST (who it's for / after the assessment) */
.bullet-list{ display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
.bullet-list li{ list-style: none; font-size: 15.5px; line-height: 1.5; color: var(--text); padding-left: 22px; position: relative; }
.bullet-list li::before{ content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--turquoise); }
.bullet-list--muted li{ color: var(--paper-soft); }

/* WHO IT'S FOR — 2x2 grid of themed problem cards, then a stakeholders row */
.who-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.who-card{
  border: 1px solid color-mix(in srgb, var(--turquoise) 35%, var(--line-dark));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) var(--veil-card), transparent);
  padding: 28px 30px; display: flex; flex-direction: column; gap: 14px;
}
.who-card__head{ display: flex; align-items: center; gap: 14px; }
.who-card__icon{ flex: none; display: flex; color: var(--turquoise); }
.who-card__icon svg{ width: 22px; height: 22px; }
.who-card h3{ font-size: 19px; }
.who-card p{ font-size: 14.5px; line-height: 1.6; color: var(--paper-soft); }
.who-card p + p{ margin-top: 4px; }

.stakeholders{ padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 14px; }
.stakeholders .label{ font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; color: var(--ink-soft); }
.stakeholders__list{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 15px; color: var(--text); }
.stakeholders__list span:not(:last-child)::after{ content: "|"; margin-left: 14px; color: var(--line-dark); }

@media (max-width: 640px){
  .iq-hero{ padding: 56px var(--side) 48px; }
  .iq-hero h1{ font-size: 34px; }
  .questions-block{ grid-template-columns: 1fr; }
  .question-card h3{ font-size: 22px; }
  .quiet-statement{ padding: 36px 24px; border-radius: 16px; }
  .who-grid{ grid-template-columns: 1fr; }
  .who-card{ padding: 22px 22px; }
  .quiet-statement h2{ font-size: 26px; }

  /* Phase cards stack in reading order; the connecting arrows only make
     sense in a horizontal row, so they're hidden rather than rotated. */
  .phase-row{ grid-template-columns: 1fr; gap: 16px; }
  .phase-arrow{ display: none; }
  .phase-card{ padding: 28px 24px; }
}