/* page-why-it-works: ported from pacspace-why-it-works-prototype.html (signed off 2026-07-13).
   Merges the former Recordation and Neutrality narratives. Shared chrome comes from
   global.css; this file carries the prototype's page-specific type scale and the
   record-diagram animation styling. */

/* Hero */
.hero h1 { font-size: clamp(30px, 7vw, 40px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; margin: 0 0 16px; }
.hero .sub { font-size: 16px; color: var(--muted); max-width: none; margin: 0 0 16px; }
.hero .lede { font-size: 15px; color: var(--muted); line-height: 1.65; margin: 0 0 20px; max-width: 52ch; }
.hero .tagline { font-size: 16px; font-weight: 500; margin: 0; }
.anim-wrap { margin-top: 32px; }

/* Record diagram (trust-gap + lock stages) */
.record-diagram { border: 1px solid var(--border-soft); border-radius: 18px; padding: 22px 16px 16px; background: var(--bg); cursor: pointer; }
.record-diagram svg { display: block; width: 100%; height: auto; max-width: 430px; margin: 0 auto; }
.record-diagram .cap { text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); margin: 10px 0 0; min-height: 18px; }
.record-diagram .lock-body { stroke-width: 2.6; }
.record-diagram .shackle { stroke-width: 4.5; }
.record-diagram .shackle.open { transform: translateY(-22px); }

/* Recordation section: split with lock animation, styled to match the hero */
.split { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.recordation-hero h2 { font-size: clamp(30px, 7vw, 40px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; margin: 0 0 16px; }
.desktop-break { display: none; }
.recordation-hero .lede { font-size: 15px; color: var(--muted); line-height: 1.65; margin: 0 0 20px; max-width: 52ch; }
.recordation-hero .lede:last-of-type { margin-bottom: 0; }

/* Sections */
.item h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; margin: 0 0 8px; }
.item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.prose { max-width: 700px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.note-card h3 { font-size: 17px; }
.note-card p { line-height: 1.5; }

.commit h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 12px; color: var(--faint); }
.commit p { margin: 0 0 9px; color: var(--text); font-size: 16px; font-weight: 500; }
.commit p:last-child { margin-bottom: 0; }

.finish h2 { font-size: clamp(22px, 5vw, 30px); letter-spacing: -0.02em; }

@media (min-width: 860px) {
  .hero { grid-template-columns: 1fr 440px; gap: 28px; }
  .split { grid-template-columns: 1fr 380px; gap: 40px; }
  .recordation-hero .split { grid-template-columns: 1fr 440px; gap: 28px; }
  .desktop-break { display: inline; }
}