/* Home `/` — rhythm map (DESIGN-BRIEF-v2 §5 + §1.1α):
   1 P1 hero ≤88svh · 1β A-01 own section 0/96 · 1α P0 columns 96/96 · 2 P2 split 160/160 · 3 P3 cards 96/120 (band)
   4 P4 hub 120/120 · 5 P5 row 96/96 · 6 P6 editorial 160/120 · 7 P7 sticky ledger 120/120 (band) · 8 P8 final 120/96 */

/* ---------- 1 · hero (≤88svh, founder 15/10 δ) ---------- */
.hero {
  position: relative; min-height: 72svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--header-h) + var(--s-12)); padding-bottom: var(--s-16); overflow: hidden; /* r3: 88svh/96 → 72svh/64: CTA→panel gap */
}
/* blueprint grid, fading out from the centre — atmosphere, no image */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px; background-position: center top; opacity: 0.35;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 75%);
}
.hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__title { max-width: 900px; }
.hero__sub { max-width: 40ch; margin-top: var(--s-6); }
.hero__ctas { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-8); }
/* rail from the hero down into the A-01 frame */
.hero__rail { position: absolute; left: 50%; bottom: 0; height: var(--s-16); width: 1px; background: var(--line); }
.hero__rail::before { content: ""; position: absolute; left: -4px; top: -4px; width: 7px; height: 7px; border: 1.5px solid var(--text-3); background: var(--bg); transform: rotate(45deg); }
@media (max-width: 599px) { .hero__ctas .btn { flex: 1 1 100%; } }

/* ---------- 1β · A-01 flow, own section ---------- */
.flow { margin-block: 0; }
.flow-sec { padding-top: 0; padding-bottom: var(--pad-m); }
.flow__frame { border: 1px solid var(--line); background: var(--bg); }
.flow__svg { width: 100%; height: auto; }
.flow__svg--h { display: none; }
.flow__caption { display: flex; gap: var(--s-3); align-items: baseline; margin-top: var(--s-4); max-width: 68ch; }
.flow__caption .gate { width: 7px; height: 7px; translate: 0 -1px; }
@media (min-width: 768px) {
  .flow__svg--h { display: block; }
  .flow__svg--v { display: none; }
}

.js .flow__dot--h { animation: dot-h 6s linear infinite; }
.js .flow__dot--v { animation: dot-v 6s linear infinite; }
.flow__breath { animation: breath 2.4s ease-in-out infinite alternate; }
.flow.is-paused .flow__dot, .flow.is-paused .flow__breath { animation-play-state: paused; }
@keyframes dot-h { from { transform: translateX(160px); } to { transform: translateX(1040px); } }
@keyframes dot-v { from { transform: translateY(112px); } to { transform: translateY(608px); } }
@keyframes breath { from { opacity: 0.7; } to { opacity: 1; } }
.flow__dot { transform: translateX(600px); }
.flow__dot--v { transform: translateY(380px); }
@media (prefers-reduced-motion: reduce) {
  .js .flow__dot--h { animation: none; transform: translateX(600px); }
  .js .flow__dot--v { animation: none; transform: translateY(380px); }
}

/* ---------- 1α · what usually goes wrong ---------- */
.wrong { padding-block: var(--pad-m); }
.wrong__title { color: var(--text-2); font-weight: 500; }
.wrong__list { display: grid; gap: 0; margin-top: var(--s-8); border-top: 1px solid var(--line); }
.wrong__list li { padding: var(--s-6) 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: var(--fs-h3); line-height: 1.4; font-weight: 500; }
@media (min-width: 900px) {
  .wrong__list { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .wrong__list li { border-bottom: 0; padding: var(--s-8) var(--s-8) var(--s-8) 0; }
  .wrong__list li + li { border-left: 1px solid var(--line); padding-left: var(--s-8); }
}

/* ---------- 2 · value (P2 split) ---------- */
.value { padding-block: var(--pad-xl); }
.value__ledger { margin: var(--s-12) 0 0; }
@media (min-width: 1024px) {
  .value__title { grid-column: 1 / span 5; align-self: start; }
  .value__ledger { grid-column: 7 / span 6; margin-top: 0; }
  .ledger__row { grid-template-columns: 180px 1fr; gap: var(--s-6); padding: var(--s-8) 0; }
}

/* ---------- 3 · build (P3 7+5) ---------- */
.build { padding-top: var(--pad-m); padding-bottom: var(--pad-l); }
.build__cards { display: grid; gap: var(--gutter); margin-top: var(--s-12); }
@media (min-width: 900px) {
  .build__cards { grid-template-columns: 7fr 5fr; }
  .card { padding: var(--s-8); }
  .card--wide { padding: var(--s-12) var(--s-8) var(--s-8); }
  .card--wide .h3 { font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; }
}

/* ---------- 5 · steps (P5) ---------- */
.steps { padding-block: var(--pad-m); }
.steps__list { list-style: none; margin: var(--s-12) 0 0; padding: 0; display: grid; border-left: 1px solid var(--line); }
.steps__list li { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4) 0 var(--s-6) var(--s-6); position: relative; }
.steps__list li::before { content: ""; position: absolute; left: -5px; top: 22px; width: 9px; height: 9px; background: var(--bg); border: 1.5px solid var(--text-3); transform: rotate(45deg); }
.steps__list p { font-size: 1rem; }
@media (min-width: 900px) {
  .steps__list { grid-template-columns: repeat(5, 1fr); border-left: 0; border-top: 1px solid var(--line); }
  .steps__list li { padding: var(--s-8) var(--s-6) 0 0; border: 0; }
  .steps__list li + li { border-left: 1px solid var(--line); padding-left: var(--s-6); }
  .steps__list li::before { display: none; }
  .steps__list .label { margin-bottom: var(--s-8); }
}

/* ---------- 6 · use cases (P6 text-only) ---------- */
.uses { padding-top: var(--pad-xl); padding-bottom: var(--pad-l); }
.uses__title { color: var(--text-2); font-weight: 500; }
.uses__row { padding: var(--s-8) 0; border-top: 1px solid var(--line); row-gap: var(--s-4); }
.uses__row:first-of-type { margin-top: var(--s-8); }
.uses__row--minor { border-bottom: 1px solid var(--line); }
.uses__text { max-width: 60ch; display: grid; gap: var(--s-3); justify-items: start; }
.uses__text .wf { width: 100%; margin-top: var(--s-6); }
.uses__text strong { color: var(--text); font-weight: 600; }
@media (min-width: 1024px) {
  .uses__row { padding: var(--s-12) 0; align-items: baseline; }
  .uses__name { grid-column: 1 / span 5; }
  .uses__text { grid-column: 7 / span 6; }
}


/* ---------- 1β · production-system panel (Run 2b) ---------- */
.sys { margin-block: 0; }
.sys__steps { list-style: none; margin: 0; padding: var(--s-6); display: grid; gap: calc(2 * var(--s-4) + 1em); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); }
.sys__step { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg); }
.sys__n { font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: 0.06em; color: var(--text-3); }
.sys__name { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; color: var(--text); }
.sys__desc { font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); }
.sys__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.sys__step--gate { border-color: var(--forge); box-shadow: inset 0 0 0 1px var(--forge); }
.sys__step + .sys__step::before { content: "↓"; position: absolute; top: calc(-1 * var(--s-4) - 1em); height: 1em; left: var(--s-4); color: var(--text-3); font-size: var(--fs-small); line-height: 1; background: var(--surface-1); }
.sys__cap { margin-top: var(--s-4); max-width: 68ch; color: var(--text-2); }
@media (min-width: 900px) {
  .sys__steps { grid-template-columns: 1fr 1.6fr 1fr 1fr; gap: var(--s-8); padding: var(--s-8); }
  .sys__step + .sys__step::before { content: "→"; top: 50%; left: calc(-1 * var(--s-8) + 4px); width: calc(var(--s-8) - 8px); text-align: center; margin-top: -0.5em; }
}