/* loops.armagi.co: page-specific rules on top of base.css */
.offer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.offer .panel + .panel { margin-top: 0; }
.offer .panel:last-child { background: var(--tint); border-color: transparent; }
.offer .tag { color: var(--muted); }
.offer b { display: block; font-size: 18px; margin-top: 6px; }
.offer p { margin: 6px 0 0; color: var(--ink-2); font-size: 15.5px; }

.loop { animation: fade .3s ease-out; }
.loop-v { font-size: 19px; font-weight: 500; margin: 0; }
.loop .fine { margin-top: 6px; }
.stage-list { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 12px; }
.stage-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); font-size: 14.5px; }
.stage-btn .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tint); font-family: var(--mono); font-size: 11px; color: var(--navy); }
.stage-btn[aria-pressed="true"] { background: #1B3A7B; border-color: #1B3A7B; color: #fff; }
.stage-btn[aria-pressed="true"] .n { background: rgba(255, 255, 255, .18); color: #fff; }
.stage-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stage-card > div { padding: 16px 18px; border-radius: 14px; }
.stage-card .tag { font-size: 11px; }
.stage-card p { margin: 6px 0 0; font-size: 15.5px; }
.stage-card .we { background: var(--tint); }
.stage-card .proof { background: var(--gold-bg); border: 1px solid var(--gold-line); }
.stage-card .next { background: var(--page); }
.stage-card .next .tag { color: var(--muted); }

.ratio .tag:first-child { color: var(--navy); font-size: 13px; }
.ratio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.ratio-grid .tag { color: var(--muted); font-size: 11px; }
.ratio-grid p { margin: 6px 0 0; }

@media (max-width: 860px) {
  .offer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-card, .ratio-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .offer { grid-template-columns: minmax(0, 1fr); }
}