.demos-page .hero{padding-bottom:32px}
.demos-page .hero .intro{max-width:760px}
.demo-section{padding-top:18px;padding-bottom:clamp(44px,7vw,88px)}
.demo-section h2{font-size:clamp(30px,4.5vw,56px);margin:0 0 24px}
.demo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,34px)}
.demo-card{min-width:0}
.demo-card a{display:block;color:var(--ink)}
.demo-card a:hover{text-decoration:none}
.demo-cover{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#201e1b;border:1px solid var(--line);transition:transform .2s,border-color .2s}
.demo-cover.k-page{object-position:left top}            /* a page reads from its top-left: brand and headline */
.demo-cover.k-canvas{object-position:center top}         /* posters keep their headline line */
.demo-card a:hover .demo-cover{transform:translateY(-3px);border-color:var(--accent)}
.demo-card h3{font-size:clamp(20px,2vw,28px);margin:14px 0 5px}
.demo-kind{display:block;color:var(--accent);font:500 12px/1.4 var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.demo-line{color:var(--muted);margin:8px 0 0;line-height:1.55}
.system-demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.system-demo{border:1px solid var(--line);padding:20px}
.system-demo video,.system-demo-media,.system-demo-media img{display:block;width:100%;background:#201e1b}
.system-demo video,.system-demo-media{margin-bottom:18px}
.system-demo-media img{height:auto}
.system-demo h3{margin:8px 0}
.system-demo-links{display:flex;flex-wrap:wrap;gap:12px}
.status-pill{display:inline-block;border:1px solid var(--accent);border-radius:999px;padding:3px 8px;color:var(--accent);font:500 11px/1.3 var(--f-mono);text-transform:uppercase}
.demo-card a:focus-visible,.system-demo a:focus-visible,.concept-bar a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:899px){.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.demo-grid,.system-demo-grid{grid-template-columns:1fr}}

.concept-wrapper{margin:0;min-height:100dvh;overflow:hidden;background:#0e0d0c;color:#f4efe7;display:flex;flex-direction:column}
.concept-bar{min-height:58px;display:flex;align-items:center;gap:12px 22px;padding:10px max(16px,env(safe-area-inset-left)) 10px max(16px,env(safe-area-inset-right));border-bottom:1px solid #34312d;background:#0e0d0c;font:500 13px/1.3 var(--f-body);flex-wrap:wrap;z-index:2}
.concept-bar strong{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#ff6b1a}
.concept-bar .concept-actions{margin-left:auto;display:flex;gap:18px}
.concept-bar a{color:#f4efe7}
.live-demo-copy{display:flex;align-items:baseline;gap:12px 18px;min-width:0}
.live-demo-device{display:none}
.live-demo-credits{width:100%;color:#bbb3a8;font-size:11px;line-height:1.35}
.concept-frame{min-height:0;flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden}
.concept-frame.is-web{position:relative;display:block;flex:1 1 0}
.concept-frame.is-web iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:white}
.canvas-shell{position:relative;width:calc(var(--cw) * var(--scale));height:calc(var(--ch) * var(--scale));flex:none}
.canvas-shell iframe{position:absolute;inset:0;width:var(--cw);height:var(--ch);border:0;background:white;transform:scale(var(--scale));transform-origin:top left}
@media(max-width:600px){.concept-bar{gap:7px 14px}.concept-bar .concept-actions{width:100%;margin-left:0;justify-content:space-between}}
@media(max-width:700px){.live-demo-bar{align-items:flex-start}.live-demo-copy{width:100%;display:grid;gap:5px}.live-demo-bar .concept-actions{width:100%;margin-left:0;justify-content:space-between}.live-demo-device{display:block;color:#bbb3a8}}