/* ══════════════════════════════════════════════════════════════════════
   feature-page.css — ONE stylesheet, all six feature-*.html pages.
   Each page is two things, top to bottom: a "See how it works in detail"
   hero, then the pathway flowchart (inline SVG, drawn in the same
   colours as the tsc-payments-public README flowchart).
   Page chrome uses tokens; the diagram's flowchart colours are content,
   fixed on purpose, like a screenshot would be.
   ══════════════════════════════════════════════════════════════════════ */

/* ── HERO: feature name pill + one title, nothing else ────────────────── */
.fp-hero { max-width: 760px; margin: 0 auto; text-align: center; }
.fp-hero .kicker {
  display: inline-block;
  background: var(--blurple-tint);
  color: var(--blurple);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.fp-hero h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.2rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
  margin: 0;
}

/* tighten the stack: hero panel keeps its top air, sheds its bottom */
.fp-head-panel { padding-bottom: 12px; }
.fp-diagram-panel { padding-top: 20px; }

/* ── DIAGRAM: the README-style flowchart, top to bottom.
   White card like the README page itself. On a phone the chart keeps its
   drawn width and scrolls sideways INSIDE this box, so the page body
   never overflows (mobile law: wide content scrolls in its own container). */
.fp-diagram {
  max-width: 860px; margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
  padding: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fp-diagram svg { display: block; width: 100%; height: auto; min-width: 620px; margin: 0 auto; }

@media (max-width: 700px) {
  .fp-diagram { padding: 12px; }
}