/* =========================================================================
   QPN Catalyst — "Why it matters" band  (.qpn-why)  ·  GRAPH treatment
   -------------------------------------------------------------------------
   A distinct, surface-2 band that gives the network-purpose beat real
   presence between the hero and "How it works" — WITHOUT competing with the
   hero's email mock. Replaces the prior plain text-only .qpn-section
   treatment of the "Why add Catalyst at all?" beat.

   WHY THIS EXISTS (design rationale):
     • Rhythm — the old beat was a second .qpn-section intro (eyebrow + serif
       title + paragraph) stacked directly before How it works' own intro.
       Two identical shapes back-to-back read as a false start. Making the
       "why" a BAND (not a section) removes the twin-intro collision.
     • Weight — this is the most conceptual idea on the page (threads joining
       a contribution graph). It had the plainest treatment. The graph
       diagram lets the band SHOW the sentence instead of only asserting it.

   The figure is deliberately quiet line-art (hairline edges, small navy
   nodes, one gold "your record" node) so it stays lighter than the hero's
   solid compose card and never reads as a second hero.

   Load order: … → qpn-howitworks.css → THIS FILE.
   Tokens only; the single raw values are the system gold-tint alphas
   rgba(138,107,46,*) already used across the system (--qpn-accent #8A6B2E).
   ========================================================================= */

.qpn-why {
  background: var(--qpn-surface-2);
  border-top: var(--qpn-rule-hair) solid var(--qpn-rule);
  border-bottom: var(--qpn-rule-hair) solid var(--qpn-rule);
  font-family: var(--qpn-font-body);
}

.qpn-why__wrap {
  max-width: var(--qpn-w-marketing);
  margin: 0 auto;
  padding: var(--qpn-sp-8) var(--qpn-sp-7);
}

/* ── Shared type ───────────────────────────────────────────────────────── */
.qpn-why__eyebrow {
  font-family: var(--qpn-font-body);
  font-size: var(--qpn-fs-label);
  letter-spacing: var(--qpn-tracking-label);
  text-transform: uppercase;
  color: var(--qpn-accent);
  font-weight: 600;
  margin: 0 0 var(--qpn-sp-4);
}

.qpn-why__lead {
  font-family: var(--qpn-font-display);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--qpn-ink);
  margin: 0;
  text-wrap: balance;
}
/* The load-bearing phrase, lifted in gold italic. */
.qpn-why__lead em {
  font-style: italic;
  color: var(--qpn-accent);
}

.qpn-why__support {
  font-family: var(--qpn-font-body);
  font-size: var(--qpn-fs-body);
  line-height: var(--qpn-lh-body);
  color: var(--qpn-ink-muted);
  margin: var(--qpn-sp-5) 0 0;
}
.qpn-why__support strong {
  color: var(--qpn-ink);
  font-weight: 600;
}

/* ── GRAPH layout — copy left, contribution-graph diagram right ────────── */
.qpn-why--graph .qpn-why__wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--qpn-sp-8);
  align-items: center;
}
.qpn-why--graph .qpn-why__lead {
  font-size: clamp(24px, 2.6vw, 30px);
  max-width: 18ch;
}
.qpn-why--graph .qpn-why__support { max-width: 46ch; }

.qpn-why__figure {
  position: relative;
  margin: 0;
}
.qpn-why__figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.qpn-why__fignote {
  margin: var(--qpn-sp-4) 0 0;
  font-family: var(--qpn-font-mono);
  font-size: var(--qpn-fs-micro);
  letter-spacing: var(--qpn-tracking-mono);
  text-transform: uppercase;
  color: var(--qpn-ink-faint);
  text-align: center;
}

/* ── Diagram primitives ────────────────────────────────────────────────── */
.qpn-graph__edge {
  fill: none;
  stroke: var(--qpn-rule);
  stroke-width: 1;
}
.qpn-graph__edge--in {            /* edges feeding the focal "your record" node */
  stroke: var(--qpn-accent);
  stroke-opacity: 0.55;
}
.qpn-graph__node {                /* cluster nodes — hollow */
  fill: var(--qpn-surface);
  stroke: var(--qpn-ink-muted);
  stroke-width: 1.5;
}
.qpn-graph__node--solid {         /* loose "thread" nodes — filled */
  fill: var(--qpn-ink-muted);
  stroke: none;
}
.qpn-graph__you {                 /* the focal node = your record */
  fill: var(--qpn-accent);
  stroke: none;
}
.qpn-graph__you-ring {
  fill: none;
  stroke: var(--qpn-accent);
  stroke-width: 1.25;
  stroke-opacity: 0.4;
}
.qpn-graph__label {
  font-family: var(--qpn-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--qpn-accent);
}

/* ── One-time draw-in on first paint ───────────────────────────────────────
   IMPORTANT: the visible, fully-drawn diagram is the BASE state — so print,
   PDF export, reduced-motion, and any non-animating context all show real
   content. The animation only supplies a hidden FROM-state via keyframes
   (animation-fill-mode: both); it is NEVER a persistent base style.
   The [data-why-animate] hook is added by a tiny IntersectionObserver (see
   README) so the draw-in fires when the band scrolls into view. If you don't
   want JS, drop the attribute selector and the diagram simply renders static. */
@media (prefers-reduced-motion: no-preference) {
  .qpn-why--graph[data-why-animate] .qpn-graph__edge {
    stroke-dasharray: 240;
    animation: qpn-graph-draw 0.9s ease both;
  }
  .qpn-why--graph[data-why-animate] .qpn-graph__edge--in { animation-delay: 0.35s; }
  .qpn-why--graph[data-why-animate] .qpn-graph__node--solid,
  .qpn-why--graph[data-why-animate] .qpn-graph__node,
  .qpn-why--graph[data-why-animate] .qpn-graph__you,
  .qpn-why--graph[data-why-animate] .qpn-graph__you-ring {
    animation: qpn-graph-pop 0.5s ease both;
  }
  .qpn-why--graph[data-why-animate] .qpn-graph__you,
  .qpn-why--graph[data-why-animate] .qpn-graph__you-ring { animation-delay: 0.7s; }
  .qpn-why--graph[data-why-animate] .qpn-graph__label { animation: qpn-graph-pop 0.5s 0.85s ease both; }
}
@keyframes qpn-graph-draw { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes qpn-graph-pop  { from { opacity: 0; } to { opacity: 1; } }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .qpn-why__wrap { padding: var(--qpn-sp-7) var(--qpn-sp-5); }
  .qpn-why--graph .qpn-why__wrap {
    grid-template-columns: 1fr;
    gap: var(--qpn-sp-6);
  }
  .qpn-why--graph .qpn-why__figure { max-width: 420px; }
}

@media (max-width: 480px) {
  .qpn-why__wrap { padding-left: var(--qpn-sp-4); padding-right: var(--qpn-sp-4); }
}