/* /demos: live demo apps (landing round 2026-11-03 section 6). Tokens from /styles.css only. */
.demos-hero { padding: clamp(32px, 5vw, 64px) 0 0; }
.demos-hero h1 { color: var(--brand); font: 700 var(--fs-h1)/1.1 var(--body); letter-spacing: -0.03em; margin: 0 0 12px; max-width: 16em; text-wrap: balance; }
.demos-hero .lede { max-width: 38em; display: inline; }
.demos-info { display: inline-block; vertical-align: middle; margin-left: 6px; }
.demos-info summary { list-style: none; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1.5px solid var(--primary); border-radius: 50%; color: var(--primary); font: 700 14px/1 var(--body); }
.demos-info summary::-webkit-details-marker { display: none; }
.demos-info summary::after { content: ""; position: absolute; inset: -10px; }
.demos-info summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.demos-info[open] summary { background: var(--primary); color: var(--on-primary, #fff); }
.demos-info p { margin: 10px 0 0; padding: 10px 14px; max-width: 28em; font-size: var(--fs-sm); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }

.demos-grid-wrap { padding: var(--s-6) 0 0; }
.demo-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-7) var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.demo-card { display: flex; flex-direction: column; min-width: 0; margin: 0; scroll-margin-top: 96px; }
.demo-shot { display: block; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); transition: transform var(--ease), box-shadow var(--ease); }
.demo-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.demo-shot:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30, 29, 25, 0.14); }
.demo-shot:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.demo-shot-plain { display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--brand); font: 700 clamp(26px, 3vw, 36px)/1.1 var(--body); letter-spacing: -0.02em; text-align: center; padding: 16px; }
.demo-name { margin: var(--s-4) 0 2px; font: 600 var(--fs-h3)/1.3 var(--body); color: var(--ink); letter-spacing: 0; }
.demo-line { margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--muted); }
.demo-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: auto; }
.demos-close { padding: var(--section) 0; }
.demos-close p { margin: 0; font-size: var(--fs-lede); }
@media (prefers-reduced-motion: reduce) { .demo-shot { transition: none; } .demo-shot:hover { transform: none; } }