.demo{flex-direction:column;gap:40px;padding-block:8px 24px;display:flex}@media (min-width:1024px){.demo{gap:56px;padding-block:16px 48px}}.demo-top{flex-direction:column;gap:24px;display:flex}.demo-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.demo-head-copy{flex-direction:column;gap:12px;display:flex}.demo-h1{font:800 clamp(2.25rem, 6vw, 3.75rem)/1 var(--font-heading);letter-spacing:-.04em;color:var(--color-ink)}.demo-lede{max-width:36rem;font:400 18px/1.45 var(--font-body);color:var(--color-ink-secondary)}.demo-h2{font:800 clamp(1.5rem, 3vw, 2rem)/1.05 var(--font-heading);letter-spacing:-.03em;color:var(--color-ink)}.demo-block{flex-direction:column;gap:16px;display:flex}.demo-note{font:400 13px/1.4 var(--font-body);color:var(--color-ink-muted)}.demo-film{border-radius:var(--radius-xl);background:var(--color-surface-1);box-shadow:inset 0 0 0 1px var(--color-hairline);margin:0;position:relative;overflow:hidden}.demo-film-poster{aspect-ratio:16/10;object-fit:cover;object-position:top;opacity:.45;width:100%;height:auto;display:block}.demo-film-pending{border-radius:var(--radius-full);background:var(--color-surface-1);width:fit-content;max-width:calc(100% - 32px);color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-hairline);font:600 14px/1.3 var(--font-body);align-items:center;gap:10px;padding:10px 16px;display:flex;position:absolute;inset:auto 16px 16px}.demo-film-pending:before{content:"";border-radius:var(--radius-full);background:var(--color-accent);flex:none;width:8px;height:8px}.demo-film-frame{aspect-ratio:16/9;border:0;width:100%;height:auto;display:block}.demo-film-caption{font:400 13px/1.5 var(--font-body);color:var(--color-ink-secondary);flex-wrap:wrap;align-items:center;gap:6px 16px;padding:8px 16px;display:flex}.demo-film-caption a{min-height:44px;color:var(--color-ink);text-underline-offset:3px;align-items:center;text-decoration:underline;display:inline-flex}.demo-claims{gap:12px;display:grid}@media (min-width:640px){.demo-claims{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1280px){.demo-claims{grid-template-columns:repeat(4,minmax(0,1fr))}}.demo-claim{border-radius:var(--radius-lg);background:var(--color-surface-1);color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-hairline);transition:box-shadow var(--duration-hover) var(--ease-out);flex-direction:column;gap:10px;padding:20px;display:flex}.demo-claim:hover{box-shadow:inset 0 0 0 1px var(--color-accent)}.demo-claim-icon{border-radius:var(--radius-full);background:var(--color-surface-2);place-items:center;width:40px;height:40px;display:grid}.demo-claim-icon svg{width:20px;height:20px}.demo-claim-title{font:700 18px/1.2 var(--font-body)}.demo-claim-line{font:400 15px/1.45 var(--font-body);color:var(--color-ink-secondary)}.demo-claim-cta{font:700 14px/1 var(--font-body);color:var(--color-accent);align-items:center;gap:4px;margin-top:auto;display:inline-flex}.demo-claim-cta svg{width:16px;height:16px;transition:translate .15s var(--ease-out)}.demo-claim:hover .demo-claim-cta svg{translate:2px}.demo-figures{gap:12px;display:grid}@media (min-width:640px){.demo-figures{grid-template-columns:repeat(3,minmax(0,1fr))}}.demo-figures>li{display:flex}.demo-figures>li>.demo-figure{flex:1}.demo-figure{border-radius:var(--radius-lg);background:var(--color-surface-1);min-height:96px;box-shadow:inset 0 0 0 1px var(--color-hairline);flex-direction:column;gap:4px;padding:20px;display:flex}.demo-figure:hover{box-shadow:inset 0 0 0 1px var(--color-accent)}.demo-figure-label{font:500 14px/1.3 var(--font-body);color:var(--color-ink-secondary)}.demo-figure-value{font:700 clamp(1.5rem, 3vw, 2rem)/1.1 var(--font-data);color:var(--color-ink)}.demo-receipts-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;display:flex}.demo-receipts{flex-wrap:wrap;gap:8px;display:flex}.demo-receipt{border-radius:var(--radius-full);background:var(--color-surface-2);min-height:44px;color:var(--color-ink);font:600 13px/1 var(--font-body);align-items:center;gap:6px;padding-inline:14px;display:inline-flex}.demo-receipt:hover{background:var(--color-surface-3)}.demo-receipt svg{width:14px;height:14px}@media (prefers-reduced-motion:reduce){.demo-claim,.demo-claim-cta svg{transition:none}.demo-claim:hover .demo-claim-cta svg{translate:none}}