/* start.armagi.co: page-specific rules on top of base.css */
#try { padding-top: 24px; }
.taps { display: grid; gap: 14px; padding: 22px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.taps .tag { color: var(--muted); margin-bottom: 8px; }
.taps .toggle { margin: 0; }

.path { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.step { position: relative; padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); animation: fade .3s ease-out; }
.step .n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--navy); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.step .tag { color: var(--muted); font-size: 11px; }
.step b { display: block; font-size: 17px; line-height: 1.3; margin-top: 4px; }
.step p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.step a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; font-size: 15px; }
.step.you, .step.move { background: var(--gold-bg); border-color: var(--gold-line); }
.step.you .n, .step.move .n { background: var(--gold); color: #1a1305; }
.step.idea { background: #0f1d3d; border-color: #0f1d3d; color: #e6ebf5; }
.step.idea .tag { color: var(--gold-soft); }
.step.idea p { color: #a4b0c8; }
.step.idea a { color: var(--gold-soft); }
.step.idea .n { background: rgba(255, 255, 255, .12); color: #fff; }

@media (max-width: 960px) {
  .path { grid-template-columns: minmax(0, 1fr); }
  .step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; }
  .step .n { grid-row: span 4; margin: 0; }
}
@media (max-width: 760px) {
  .taps { padding: 18px; }
}