/* frontier.armagi.co: page-specific rules on top of base.css */
.stage { animation: fade .3s ease-out; }
.stage > .tag { color: var(--muted); }
.stage h3 { font-size: 24px; letter-spacing: -.015em; line-height: 1.25; margin: 8px 0 6px; }
.desc { color: var(--ink-2); margin: 0; max-width: 46em; }
.ex { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ex li { padding: 8px 14px; border-left: 3px solid var(--gold); background: var(--page); border-radius: 0 10px 10px 0; font-size: 15.5px; }
.stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.stage-grid > div { padding: 14px 16px; border-radius: 14px; }
.stage-grid .tag { font-size: 11px; }
.stage-grid p { margin: 6px 0 0; font-size: 15.5px; }
.stage-grid .we { background: var(--tint); }
.stage-grid .proof { background: var(--gold-bg); border: 1px solid var(--gold-line); }
.stage-grid .person { background: #0f1d3d; color: #e6ebf5; }
.stage-grid .person .tag { color: var(--gold-soft); }

.evals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.evals div { padding: 14px 16px; border-radius: 14px; background: var(--tint); }
.evals div:nth-child(3) { background: var(--red-bg); }
.evals b { display: block; font-size: 32px; letter-spacing: -.02em; color: var(--navy); }
.evals div:nth-child(3) b { color: var(--red); }
.evals span { font-size: 14px; color: var(--ink-2); }
.eval-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.eval-lists .tag { color: var(--navy); font-size: 11px; }
.eval-lists .warn-t { color: var(--red); }
.eval-lists ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--ink-2); }

.reuse { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.reuse div { padding: 12px; border-radius: 14px; text-align: center; }
.reuse .once { background: var(--card); border: 1px solid var(--line); }
.reuse .per { background: var(--gold-bg); border: 1px solid var(--gold-line); }
.reuse b { display: block; font-size: 15px; }
.reuse span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

@media (max-width: 860px) {
  .stage-grid, .eval-lists { grid-template-columns: minmax(0, 1fr); }
  .evals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reuse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}