/* ============ First purchase: card step in the purchase dialog ============
   With no saved card the dialog says what happens next (Stripe's checkout, then straight back); the demo shows a
   simulated test card instead. Scoped to the purchase dialog and the choose step. */
.checkout-card-step{display:flex;gap:12px;align-items:flex-start;margin:var(--s-4) 0 0;padding:14px 16px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--ink)}
.checkout-card-step strong{display:block;font-size:var(--t-md);font-weight:700}
.checkout-card-step p{margin:2px 0 0;font-size:var(--t-sm);line-height:1.5;color:var(--text-2)}
.checkout-step-icon{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;color:var(--accent);box-shadow:var(--shadow-xs)}
.demo-checkout{margin-top:var(--s-3);padding:12px 14px;border-radius:var(--r-md);background:var(--inset)}
.demo-checkout-badge{display:block;margin-bottom:8px;font-size:var(--t-xs);font-weight:600;color:var(--text-3)}
.demo-checkout-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.demo-checkout-card span{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-size:var(--t-sm);font-weight:600}
.demo-checkout-card strong{font-size:var(--t-md);letter-spacing:.02em}
.demo-checkout-card small{margin-left:auto;color:var(--text-3);font-size:var(--t-sm)}
/* Agent picker on the Walkthrough card: shown only when the chosen template puts the agent on camera. */
.product-agent{margin:var(--s-3) 0 0}
.product-agent .agent-picker{flex-wrap:wrap}
/* Template picker: cloud looks show their real template's name and preview video; the default is marked. */
.tpl-live{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:var(--r-md);background:#111;isolation:isolate}
.tpl-live.is-portrait{aspect-ratio:9/16}
.tpl-live>.tpl-preview{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:0}
.tpl-live>video{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 300ms ease}
.tpl-live>video.is-ready{opacity:1}
/* The real template's still (thumbnail) covers the mock-up once it loads; the video plays on hover, focus or tap. */
.tpl-live>.tpl-still{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 300ms ease}
.tpl-live>.tpl-still.is-ready{opacity:1}
.tpl-live>.is-failed{display:none}
.tpl-live>.tpl-live-badge{z-index:3;transition:opacity var(--ease)}
.tpl-live.is-playing>.tpl-live-badge,.tpl-live:has(>video.is-failed)>.tpl-live-badge{opacity:0}
.tpl-names{display:grid;gap:1px;min-width:0}
.tpl-names strong{overflow-wrap:anywhere}
.tpl-real{font-size:var(--t-xs);font-weight:500;color:var(--text-2);line-height:1.35}
.tpl-meta{align-items:flex-start}
.tpl-card .tpl-default{position:absolute;top:14px;left:14px;z-index:3;padding:2px 9px;border-radius:999px;background:#fff;color:var(--ink);font-size:var(--t-xs);font-weight:700;box-shadow:var(--shadow-xs)}
@media (max-width:520px){#dialog .tpl-grid.is-portrait{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}}