.showcase { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--wash); aspect-ratio: 16 / 9; }
.showcase > img { width: 100%; height: 100%; object-fit: cover; }
.media-label { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; padding: 28px 32px; font-size: 13px; color: white; background: linear-gradient(transparent, hsl(207 52% 5% / .8)); }
.pills { display: flex; width: max-content; max-width: 100%; flex-wrap: wrap; justify-content: center; margin: 30px auto 0; background: var(--wash); padding: 5px; border-radius: 99px; gap: 4px; }
.pills button { border: 0; background: transparent; color: var(--muted); border-radius: 99px; padding: 13px 24px; min-height: 46px; font-size: 14px; }
.pills button[aria-selected="true"] { background: var(--deep); color: white; }
.media-caption { text-align: center; color: var(--muted); font-size: 18px; line-height: 1.65; max-width: 65ch; margin: 26px auto 0; min-height: 3.3em; }
.media-caption strong { color: var(--ink); font-weight: 600; }
.demo-rail { display: flex; gap: 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 0 max(var(--gutter), calc((100vw - 1440px) / 2)) 24px; scrollbar-width: none; scroll-padding-left: max(var(--gutter), calc((100vw - 1440px) / 2)); }
.demo-rail::-webkit-scrollbar { display: none; }
.demo-card { flex: 0 0 min(64vw, 860px); scroll-snap-align: start; min-width: 0; }
.demo-thumb { position: relative; display: block; width: 100%; border: 0; padding: 0; overflow: hidden; border-radius: var(--radius); background: hsl(204 15% 89%); aspect-ratio: 1.45; text-align: left; }
.demo-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform 500ms ease; }
.demo-thumb:hover img { transform: scale(1.025); }
.demo-thumb .demo-open { position: absolute; right: 24px; bottom: 24px; background: white; color: var(--ink); padding: 13px 20px; border-radius: 99px; font-size: 13px; box-shadow: 0 2px 14px hsl(0 0% 0% / .1); }
.demo-copy { padding: 26px 8px 0; max-width: 62ch; }
.demo-audience { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); margin-bottom: 12px; }
.demo-copy h3 { font-size: 26px; }.demo-copy p:last-child { font-size: 16px; line-height: 1.65; color: var(--muted); margin-top: 12px; }
.rail-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 18px; }
.rail-footer p { font-size: 13px; color: var(--muted); }.arrow-buttons { display: flex; gap: 10px; }
.arrow-buttons button { width: 46px; height: 46px; border: 0; border-radius: 50%; color: var(--ink); background: hsl(190 14% 89%); font-size: 23px; }
.closer-grid { margin-top: 64px; padding: 52px; border-radius: var(--radius); background: var(--wash); display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
.steps { padding-block: 12px; }.step { border-bottom: 1px solid var(--line); padding: 24px 0; }.step:first-child { padding-top: 0; }.step:last-child { border: 0; }
.step h3 button { display: flex; align-items: center; gap: 13px; width: 100%; border: 0; padding: 8px 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1.35; text-align: left; }
.step h3 button[aria-expanded="true"] { color: var(--ink); }.step-number { font: 11px Inter, sans-serif; color: var(--brand); }.step-symbol { margin-left: auto; font: 22px Inter, sans-serif; }
.step > div { padding: 18px 0 0 29px; }.step p { color: var(--muted); font-size: 16px; line-height: 1.7; margin-bottom: 16px; }.step p:first-child { color: var(--ink); }
.step .text-link { font-size: 14px; }
.closer-media { position: sticky; top: 112px; align-self: start; margin-block: 16px; }
.closer-media img { width: 100%; aspect-ratio: 1.15; object-fit: contain; border-radius: 18px; background: hsl(204 15% 89%); }
.closer-media figcaption { text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 18px; }
.plugin-showcase { margin-top: 88px; }.plugin-showcase h3 { margin-bottom: 30px; }
.plugin-stage { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--wash); }
.plugin-stage img { width: 100%; height: auto; aspect-ratio: 1366 / 735; object-fit: contain; }
.viewer-dialog { border: 0; border-radius: 24px; padding: 0; width: min(1500px, 94vw); max-width: none; height: min(940px, 92dvh); max-height: none; color: var(--ink); background: white; overflow: hidden; }
.viewer-dialog[open] { display: flex; flex-direction: column; }.viewer-dialog::backdrop { background: hsl(207 52% 5% / .75); }
.viewer-head { padding: 24px 28px; display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.viewer-head h2 { font-size: 25px; letter-spacing: -.025em; }.viewer-head p { color: var(--muted); font-size: 13px; margin-top: 8px; }
.viewer-actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }.viewer-actions a { font-size: 13px; color: var(--brand); }
.viewer-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--wash); font-size: 25px; }
.viewer-copy { padding: 0 28px 22px; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 110ch; }
.viewer-body { position: relative; flex: 1; min-height: 0; background: var(--wash); }.viewer-body img, .viewer-body iframe { width: 100%; height: 100%; object-fit: contain; border: 0; }
.viewer-body iframe { position: absolute; inset: 0; background: white; }.viewer-status { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 14px 22px; border-radius: 16px; background: white; font-size: 14px; line-height: 1.5; text-align: center; box-shadow: 0 3px 20px hsl(0 0% 0% / .12); }
@media (max-width: 1000px) {
  .closer-grid { padding: 32px; gap: 30px; grid-template-columns: 1fr 1.2fr; }.step h3 button { font-size: 18px; }
}
@media (max-width: 650px) {
  .showcase { aspect-ratio: 1.2; }.showcase > img { object-fit: contain; }.media-label { padding: 20px; font-size: 11px; }.media-label span:last-child { display: none; }
  .pills { gap: 0; width: 100%; }.pills button { padding: 12px 14px; flex: 1; font-size: 12px; }.media-caption { font-size: 16px; min-height: 6.6em; }
  .demo-rail { gap: 16px; }.demo-card { flex-basis: 86vw; }.demo-thumb { aspect-ratio: 1.1; }.demo-thumb .demo-open { right: 16px; bottom: 16px; }
  .demo-copy { padding: 22px 2px 0; }.demo-copy h3 { font-size: 24px; }.demo-copy p:last-child { font-size: 15px; }.rail-footer p { max-width: 22ch; line-height: 1.5; }
  .closer-grid { margin-top: 38px; padding: 24px; display: flex; flex-direction: column; gap: 24px; }.steps { width: 100%; }.closer-media { position: static; width: 100%; margin: 0; }
  .closer-media img { aspect-ratio: 1.2; }.step h3 button { font-size: 18px; }.step > div { padding-left: 0; }.screening-note { margin-top: 28px; }
  .viewer-dialog { width: 100vw; height: 100dvh; border-radius: 0; }.viewer-head { padding: 18px; gap: 12px; }.viewer-head h2 { font-size: 20px; }.viewer-head p { display: none; }
  .viewer-actions { gap: 14px; }.viewer-actions a { max-width: 90px; line-height: 1.5; }.viewer-copy { padding: 0 18px 18px; font-size: 13px; }.viewer-status { width: max-content; }
}