.subpage-hero { padding: 96px 0 80px; }
.narrow-copy { max-width: 860px; display: grid; gap: 20px; }
.docs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.doc-card { background: #fff; border: 1px solid var(--stampos-border); border-radius: 22px; padding: 28px; box-shadow: var(--shadow-soft); display: grid; gap: 14px; }
.doc-card p { color: var(--stampos-muted); }
.doc-status { width: fit-content; border-radius: 999px; padding: 6px 10px; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.doc-status.live { background: rgba(25,169,116,.12); color: #0d6f4c; }
.doc-status.progress { background: rgba(245,166,35,.14); color: #8a5600; }
.doc-status.planned { background: #eaf0f4; color: var(--stampos-muted); }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.swatches span { min-height: 110px; border-radius: 16px; padding: 14px; display: flex; align-items: flex-end; color: #fff; font-weight: 800; font-size: .82rem; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.timeline { display: grid; gap: 18px; max-width: 940px; }
.timeline-item { position: relative; background: #fff; border: 1px solid var(--stampos-border); border-radius: 22px; padding: 26px 28px 26px 78px; box-shadow: var(--shadow-soft); }
.timeline-item::before { content: ""; position: absolute; left: 28px; top: 28px; width: 30px; height: 30px; border-radius: 10px; background: var(--stampos-green); box-shadow: 0 8px 18px rgba(25,169,116,.24); }
.timeline-item.progress::before { background: var(--stampos-warning); }
.timeline-item.planned::before { background: #b7c4ce; }
.timeline-item h2 { font-size: 1.45rem; margin-bottom: 8px; }
.timeline-item p { color: var(--stampos-muted); }
.release-list { display: grid; gap: 20px; }
.release-card { background: #fff; border: 1px solid var(--stampos-border); border-radius: 24px; padding: 30px; box-shadow: var(--shadow-soft); }
.release-card header { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; margin-bottom: 18px; }
.release-card time { color: var(--stampos-muted); font-weight: 700; }
.release-card ul { margin: 0; padding-left: 22px; color: var(--stampos-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a:hover { color: #fff; }
.error-page { min-height: 100vh; display: grid; place-items: center; }
.error-content { max-width: 760px; display: grid; gap: 24px; text-align: center; justify-items: center; }
.error-logo { width: 88px; height: 88px; border-radius: 24px; }
@media (max-width: 900px) { .docs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .docs-grid, .swatches { grid-template-columns: 1fr; } .timeline-item { padding-left: 68px; } .release-card header { align-items: flex-start; flex-direction: column; } }