/* The Majic AI Gate (/platform): the gate flow diagram, the stairs, the story. */
.gate-story { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; margin-top: var(--space-8); }
@media (max-width: 860px) { .gate-story { grid-template-columns: minmax(0, 1fr); } }
.gate-story p { font-size: var(--text-lg); line-height: 1.6; margin: 0 0 var(--space-4); }
.gate-story .sig { font-size: var(--text-sm); color: var(--color-text-muted); }
.stairs-art { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.stairs-art svg { display: block; width: 100%; height: auto; }
.stairs-art figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); }

.flow { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.25fr) 44px minmax(0, 1fr); align-items: stretch; margin-top: var(--space-10); }
.flow-col { display: flex; flex-direction: column; gap: 10px; }
.flow-col h3 { font-size: var(--text-sm); font-family: var(--font-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 4px; }
.flow-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; font-weight: 600; }
.flow-item span { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }
.flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
.flow-arrow svg { width: 30px; height: 30px; }
.gate-box { background: #1d1450; color: #f1edff; border-radius: 16px; padding: 18px; box-shadow: 0 0 0 4px var(--color-primary-highlight, rgba(91, 61, 240, 0.2)); display: flex; flex-direction: column; gap: 10px; }
.gate-box h3 { color: #cfc6ff; }
.gate-box > p { margin: 0; color: #d9d2ff; font-size: var(--text-sm); }
.gate-rule { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; background: rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 9px 10px; font-size: var(--text-sm); }
.gate-rule b { font-family: var(--font-mono, monospace); font-size: 0.78rem; letter-spacing: 0.06em; padding: 3px 0; text-align: center; border-radius: 5px; color: #06201d; }
.gate-rule.pass b { background: #35e0cf; } .gate-rule.mask b { background: #ffd166; } .gate-rule.hold b { background: #ff9f68; } .gate-rule.block b { background: #ff6b81; color: #2a0710; }
@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-arrow { height: 40px; } .flow-arrow svg { transform: rotate(90deg); }
}
.flow-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-5); }

.stairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.stair { border-radius: var(--radius-lg); padding: var(--space-6); border: 1px solid var(--color-border); background: var(--color-surface); border-top: 6px solid var(--tone); }
.stair.free { --tone: #12a594; } .stair.gated { --tone: #e8590c; } .stair.locked { --tone: #c92a4a; }
.stair h3 { margin: 0; font-size: var(--text-lg); }
.stair .tag { font-family: var(--font-mono, monospace); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone); }
.stair ul { margin: var(--space-3) 0 0; padding-left: 1.1em; color: var(--color-text-muted); }
.stair li { margin: 4px 0; }