/* Onboarding scenes (scenes.js): product pictures built from real interface parts.
   A scene sits on the `.art` ground from styles.css (light, drift, grain, hover parallax) and adds
   a dot grid. Every part's resting style is the finished frame; the loops only hide and replay it,
   so reduced motion (which stops all animation) shows the complete picture. */

.scene {
  --T: 8s;
  height: 300px; padding: var(--s5); gap: 0;
  container-type: inline-size;
  isolation: isolate;
}
/* Dot grid that fades out toward the edges. */
.scene > .sc-grid, .scene::after { pointer-events: none; }
.scene { background:
  radial-gradient(circle at 1px 1px, rgba(10, 10, 10, 0.07) 1px, transparent 1.4px) 0 0 / 18px 18px,
  radial-gradient(120% 120% at 50% 0%, var(--brand-tint) 0%, var(--surface) 70%); }
.scene .bar { display: block; height: 6px; border-radius: 3px; background: var(--line); }

/* Narrow scenes shrink as a whole instead of reflowing. */
@container (max-width: 640px) { .scene > * { zoom: 0.82; } }
/* Phones: only the scene's result stays, near full size, so its words stay readable. */
@container (max-width: 520px) {
  .scene > * { zoom: 0.9; }
  .scene .hero__site, .scene .business__site, .scene .sc-link, .scene .prompt, .scene .code, .scene .sc-wire, .scene .pay__access { display: none; }
  .scene .hero__checkout, .scene .hero__dash, .scene .found, .scene .draft, .scene .conn, .scene .pay { left: 0; top: 0; margin-left: 0; }
  .scene--hero .hero__dash { margin-left: -40px; top: -30px; }
  .scene .pay { left: 0; top: 34px; }
  .scene .pay__toast { top: 5%; right: 3%; }
}
@container (max-width: 380px) {
  .scene > * { zoom: 0.8; }
  .scene--hero .hero__checkout { display: none; }
  .scene--hero .hero__dash { margin-left: 0; top: 0; }
}

/* Where the scenes sit in the app. */
.welcome__scene { width: 100%; margin: var(--s2) 0 var(--s3); }

/* ---------------------------------------------------------------- Shared parts */

.sw {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 12px 28px -10px rgba(40, 20, 90, 0.18), 0 30px 60px -24px rgba(40, 20, 90, 0.16);
  text-align: left; font-size: 12px; line-height: 1.4; color: var(--text);
}
.sw .sc-muted, .scene .sc-muted { color: var(--text-3); }
.sc-mono { font-family: var(--mono); letter-spacing: -0.01em; }
.sw svg.i { width: 13px; height: 13px; vertical-align: -2px; }

.sw__bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.sw__dots { display: inline-flex; gap: 5px; }
.sw__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.sw__url { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 8px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); font-size: 10.5px; color: var(--text-2); }
.sw__url svg.i { width: 10px; height: 10px; color: var(--text-3); }
.sw__body { position: relative; overflow: hidden; border-radius: 0 0 var(--radius) var(--radius); }

.sc-bolt { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--brand); color: #fff; }
.sc-bolt svg.i { width: 11px; height: 11px; fill: #fff; stroke: none; vertical-align: 0; }

.sc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--pill); font-size: 10.5px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
.sc-chip svg.i { width: 11px; height: 11px; vertical-align: 0; }
.sc-chip--brand { background: var(--brand-tint); color: var(--brand-ink); }
.sc-chip--ok { background: var(--ok-tint); color: var(--ok); }

.sc-input { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); font-size: 11.5px; color: var(--text); }
.sc-input svg.i { color: var(--text-3); }
.sc-pay { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: var(--pill); background: var(--action); color: #fff; font-size: 11.5px; font-weight: 600; }
.sc-pay--sm { padding: 5px 12px; font-size: 11px; }
.sc-amount { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; font-family: var(--mono); }
.sc-amount small { font-size: 11px; font-weight: 400; color: var(--text-3); letter-spacing: 0; font-family: var(--font); }
.sc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-mid); box-shadow: 0 0 0 3px var(--ok-tint); }

/* The customer's own website. */
.site { display: grid; gap: 7px; padding: 12px 14px 14px; }
.site__nav { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.site__nav strong { flex: 1; font-size: 12px; letter-spacing: -0.02em; }
.site__nav span { width: 22px; height: 5px; border-radius: 3px; background: var(--line); }
.site__title { font-size: 15px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; max-width: 22ch; }
.site__cta { justify-self: start; margin-top: 6px; padding: 6px 11px; border-radius: var(--pill); background: #1f3b2c; color: #fff; font-size: 10.5px; font-weight: 600; }
.site__foot { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-size: 10.5px; color: var(--text-3); }

/* Moving dots between two parts. */
.sc-link { display: flex; gap: 5px; margin: 0 14px; --depth: 0.5; }
.sc-link i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: sc-beam 1.6s infinite var(--ease); }
.sc-link i:nth-child(2) { animation-delay: 0.15s; }
.sc-link i:nth-child(3) { animation-delay: 0.3s; }

/* ---------------------------------------------------------------- Hero: the whole journey */

.scene--hero { --T: 9s; height: 290px; }
.hero__site { width: 290px; --depth: 0.6; left: 0; top: -10px; }
.hero__site .site__cta { animation: hero-cta var(--T) infinite var(--ease); }
.hero__checkout { width: 214px; margin-left: -70px; padding: 14px; display: grid; gap: 6px; z-index: 2; left: 0; top: 22px; --depth: 1.4;
  animation: sc-pop var(--T) infinite var(--ease); }
.hero__checkout .sc-input { margin-top: 4px; }
.hero__checkout .sc-input.sc-mono { animation: sc-type-19 var(--T) infinite; }
.hero__checkout .sc-pay { animation: hero-press var(--T) infinite var(--ease); }
.hero__dash { width: 226px; margin-left: -18px; padding: 12px; display: grid; gap: 9px; z-index: 3; left: 0; top: -34px; --depth: 2; }
.hero__dash-head { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.hero__dash-head strong { flex: 1; }
.hero__row { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.hero__row .sc-mono { flex: 1; font-weight: 600; }
.hero__row--new { margin: 0 -6px; padding: 4px 6px; border-radius: 8px; background: var(--ok-tint); animation: hero-row var(--T) infinite var(--ease); }

/* ---------------------------------------------------------------- Business */

.business__site { width: 260px; --depth: 0.6; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 36px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.16) 70%, rgba(139, 92, 246, 0.55) 100%);
  border-bottom: 1px solid var(--brand); animation: sc-scan var(--T) infinite var(--ease-in-out); }
.found { width: 290px; padding: 12px 12px 14px; display: grid; gap: 2px; left: 0; top: 16px; --depth: 1.6; }
.found__head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.found__row { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 6px 8px; border-radius: 8px;
  animation: found-row var(--T) calc(var(--k) * 0.45s) infinite var(--ease) both; }
.found__label { grid-column: 1; font-size: 10.5px; color: var(--text-3); }
.found__value { grid-column: 1; font-weight: 600; font-size: 12.5px;
  animation: sc-reveal var(--T) calc(var(--k) * 0.45s) infinite var(--ease) both; }
.found__tag { grid-column: 2; grid-row: 1 / 3; align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-3);
  animation: sc-fade var(--T) calc(var(--k) * 0.45s) infinite var(--ease) both; }
.found__tag svg.i { width: 11px; height: 11px; }
.found__ok { position: absolute; top: -11px; right: 12px; animation: sc-badge var(--T) infinite var(--spring); }

/* ---------------------------------------------------------------- Offer */

.prompt { width: 318px; padding: 12px; display: grid; gap: 8px; left: 0; top: -44px; --depth: 0.7; }
.prompt__label { font-size: 10.5px; font-weight: 600; color: var(--text-2); }
.prompt__text { display: flex; align-items: center; padding: 8px 10px; border: 1px solid var(--brand); border-radius: 8px; box-shadow: 0 0 0 3px var(--brand-tint); white-space: nowrap; overflow: hidden; font-size: 11.5px; }
.prompt__type { animation: sc-type-44 var(--T) infinite; }
.caret { width: 1.5px; height: 14px; margin-left: 1px; background: var(--brand); animation: sc-caret 1s steps(1) infinite; }
.prompt__btn { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--pill); background: var(--action); color: #fff; font-size: 11px; font-weight: 600;
  animation: offer-press var(--T) infinite var(--ease); }
.prompt__btn svg.i { color: #c4b5fd; }
:where(.scene) .draft { width: 276px; margin-left: -48px; z-index: 2; left: 0; top: 40px; --depth: 1.6; animation: sc-pop var(--T) infinite var(--ease); }
.draft__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.draft__body { display: grid; padding: 4px 12px; }
.draft__row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 11.5px; position: relative;
  animation: sc-fade var(--T) calc(var(--k) * 0.25s) infinite var(--ease) both; }
.draft__row:last-child { border-bottom: 0; }
.draft__row > span { color: var(--text-3); }
.draft__row strong { font-weight: 600; text-align: right; }
.draft__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); font-size: 10.5px; }
.draft__foot .sc-muted { display: inline-flex; align-items: center; gap: 4px; }
.draft__foot .sc-pay { animation: sc-nudge var(--T) infinite var(--ease); }

/* ---------------------------------------------------------------- Connect */

.code { width: 318px; background: #121214; border-color: #26262b; color: #e8e8ea; --depth: 0.7; left: 0; top: -8px; }
.code__bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #26262b; }
.code .sw__dots i { background: #3a3a40; }
.code__file { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; background: #1d1d22; font-size: 10.5px; color: #c9c9cf; }
.code__file svg.i { color: #a78bfa; }
.code__body { display: grid; padding: 8px 0 10px; font: 11px/1.75 var(--mono); }
.code__line { display: flex; gap: 10px; padding: 0 12px 0 0; white-space: nowrap; }
.code__line > i { width: 26px; flex: none; text-align: right; font-style: normal; color: #55555d; }
.code__line > span { padding-left: calc(var(--in) * 12px); }
.code__line.is-add { background: rgba(34, 197, 94, 0.09); box-shadow: inset 2px 0 0 #22c55e;
  animation: code-line var(--T) calc(var(--k) * 0.22s) infinite var(--ease) both; }
.code__line.is-key { background: rgba(34, 197, 94, 0.18); }
.t-tag { color: #9ca3af; }
.t-attr { color: #c4b5fd; }
.t-str { color: #fcd34d; }
.t-ok { color: #4ade80; font-weight: 600; }
.sc-wire { position: relative; width: 56px; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--brand-line) 0 6px, transparent 6px 11px); --depth: 0.4; }
.sc-wire__pulse { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); animation: sc-run 1.8s infinite var(--ease); }
.conn { width: 252px; padding: 12px; display: grid; gap: 2px; left: 0; top: 14px; --depth: 1.6; }
.conn__head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.conn-row { display: grid; grid-template-columns: 22px 1fr auto 18px; align-items: center; gap: 7px; padding: 6px 2px;
  animation: conn-row var(--T) calc(var(--k) * 0.4s) infinite var(--ease) both; }
.conn-row__icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); }
.conn-row__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-row__tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-mid); color: #fff;
  animation: sc-tick var(--T) calc(var(--k) * 0.4s) infinite var(--spring) both; }
.conn-row__tick svg.i { width: 11px; height: 11px; stroke-width: 3; vertical-align: 0; }
.conn__ok { position: absolute; top: -11px; right: 12px; animation: sc-badge var(--T) infinite var(--spring); }

/* ---------------------------------------------------------------- Pay */

.pay { width: 360px; display: grid; grid-template-columns: 132px 1fr; overflow: hidden; --depth: 0.9; left: -96px; top: 44px; }
.pay__summary { display: grid; align-content: start; gap: 4px; padding: 14px; background: var(--surface-2); border-right: 1px solid var(--line); }
.pay__summary strong { font-size: 12.5px; line-height: 1.3; }
.pay__summary .sc-amount { margin-top: 6px; font-size: 18px; }
.pay__summary .sc-amount small { display: block; margin-top: 1px; }
.pay__form { display: grid; gap: 7px; padding: 14px; }
.pay__label { font-size: 10.5px; font-weight: 600; color: var(--text-2); }
.pay__card { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.pay__digits { animation: sc-type-19 var(--T) infinite; }
.pay__split { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pay__btn { position: relative; margin-top: 2px; background: var(--ok-mid); animation: pay-btn var(--T) infinite var(--ease); }
.pay__btn-text { opacity: 0; animation: pay-text var(--T) infinite; }
.pay__btn-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; animation: pay-done var(--T) infinite var(--spring); }
.pay__btn-done svg.i { width: 12px; height: 12px; stroke-width: 3; vertical-align: 0; }
.pay__note { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--brand-ink); }
.pay__note svg.i { width: 11px; height: 11px; vertical-align: 0; }
:where(.sw).toast { position: absolute; right: 7%; display: flex; align-items: center; gap: 9px; padding: 9px 12px 9px 9px; border-radius: 12px; z-index: 3; }
:where(.sw).toast > span:last-child { display: grid; gap: 1px; }
:where(.sw).toast .sc-mono { font-size: 10.5px; }
.toast__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ok-tint); color: var(--ok); }
.toast__icon svg.i { width: 14px; height: 14px; stroke-width: 2.5; vertical-align: 0; }
.toast__icon--brand { background: var(--brand-tint); color: var(--brand-ink); }
.pay__toast { top: 7%; right: 9%; --depth: 2; animation: toast-in var(--T) infinite var(--ease); }
.pay__access { top: 27%; right: 3%; --depth: 2.4; animation: toast-in var(--T) 0.5s infinite var(--ease) both; }

/* ---------------------------------------------------------------- Sandbox facts */

.fact-vis { display: grid; place-items: center start; height: 58px; margin: -2px 0 8px; }
.fv-card { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font-size: 11px; }
.fv-card__icon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--brand-tint); color: var(--brand-ink); }
.fv-card__icon svg.i { width: 14px; height: 14px; }
.fv-card__text { display: grid; flex: 1; min-width: 0; }
.fv-card__text strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-card__text .sc-mono { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.fv-card .sc-chip { font-size: 9.5px; padding: 1px 6px; flex: none; }
.fv-card .sc-chip svg.i { display: none; }
.fact-vis--key { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; }
.fv-key { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; font-size: 10.5px; white-space: nowrap; }
.fv-key svg.i { width: 12px; height: 12px; vertical-align: 0; }
.fv-key--on { background: var(--surface); border: 1px solid var(--brand-line); color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-tint); }
.fv-key--off { border: 1px dashed var(--line-2); color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--bad-mid); }
.fv-key--off svg.i { color: var(--bad-mid); }
.fv-plastic { position: relative; display: grid; align-content: space-between; width: 116px; height: 58px; padding: 7px 9px; border-radius: 8px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 45%, #a78bfa 100%); box-shadow: 0 6px 14px -6px rgba(109, 40, 217, 0.6); rotate: -4deg; }
.fv-plastic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 45%, transparent 60%); animation: sc-sheen 5s infinite var(--ease); }
.fv-plastic__top { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 600; }
.fv-plastic__top svg.i { width: 10px; height: 10px; fill: #fff; stroke: none; vertical-align: 0; }
.fv-plastic__chip { width: 16px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.fv-plastic__no { font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; }

/* ---------------------------------------------------------------- Keyframes (each loop ends hidden and replays) */

@keyframes sc-beam { 0%, 100% { opacity: 0.25; transform: translateX(-4px); } 50% { opacity: 1; transform: translateX(4px); } }
@keyframes sc-run { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes sc-caret { 50% { opacity: 0; } }
@keyframes sc-sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes sc-fade { 0%, 26% { opacity: 0; transform: translateY(4px); } 34%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sc-reveal { 0%, 26% { clip-path: inset(0 100% 0 0); } 36%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes sc-pop { 0%, 18% { opacity: 0; transform: translateY(12px) scale(0.96); } 28%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }
@keyframes sc-badge { 0%, 74% { opacity: 0; transform: scale(0.5); } 80%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sc-tick { 0%, 48% { transform: scale(0); } 56%, 94% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sc-nudge { 0%, 82% { box-shadow: 0 0 0 0 rgba(10, 10, 10, 0); } 86% { box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.3); } 92%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } }
@keyframes sc-scan { 0%, 4% { top: -36px; opacity: 0; } 8% { opacity: 1; } 30% { top: 100%; opacity: 1; } 34%, 100% { top: 100%; opacity: 0; } }
/* Typing: the text reveals one character at a time, holds, then clears for the next loop. */
@keyframes sc-type-19 { 0%, 26% { clip-path: inset(0 100% 0 0); } 40% { clip-path: inset(0 0 0 0); animation-timing-function: steps(1); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes sc-type-44 { 0%, 4% { clip-path: inset(0 100% 0 0); } 24% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.pay__digits, .hero__checkout .sc-input.sc-mono { animation-timing-function: steps(19, end); }
.prompt__type { animation-timing-function: steps(44, end); }

@keyframes hero-cta { 0%, 10% { transform: none; } 13% { transform: scale(0.92); box-shadow: 0 0 0 4px rgba(31, 59, 44, 0.2); } 17%, 100% { transform: none; } }
@keyframes hero-press { 0%, 44% { transform: none; } 47% { transform: scale(0.94); } 50%, 100% { transform: none; } }
@keyframes hero-row { 0%, 52% { opacity: 0; transform: translateY(-8px); background: transparent; } 58% { opacity: 1; transform: none; background: var(--ok-tint); } 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes found-row { 0%, 30% { background: transparent; } 34% { background: var(--brand-tint); } 44%, 100% { background: transparent; } }
@keyframes offer-press { 0%, 24% { transform: none; } 27% { transform: scale(0.92); } 30%, 100% { transform: none; } }
@keyframes code-line { 0%, 8% { opacity: 0; transform: translateX(-6px); } 16%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes conn-row { 0%, 40% { opacity: 0.4; } 52%, 94% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes pay-btn { 0%, 46% { background: var(--action); transform: none; } 48% { transform: scale(0.95); } 52% { transform: none; background: var(--action); } 58%, 94% { background: var(--ok-mid); } 100% { background: var(--action); } }
@keyframes pay-text { 0%, 52% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes pay-done { 0%, 56% { opacity: 0; transform: scale(0.6); } 62%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes toast-in { 0%, 60% { opacity: 0; transform: translateX(16px) scale(0.97); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 600px) {
  .scene { height: 240px; padding: var(--s4); }
}

/* ---------------------------------------------------------------- Walkthrough card pictures
   A band across the top of the walkthrough card, above its text. Same rule as the scenes:
   the resting style is the finished frame. */

.tour-vis {
  --T: 4.8s;
  position: relative; display: grid; place-items: center; height: 108px; margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 1px solid var(--line); overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(10, 10, 10, 0.07) 1px, transparent 1.4px) 0 0 / 16px 16px,
    radial-gradient(130% 140% at 50% 0%, var(--brand-tint) 0%, var(--surface) 75%);
  font-size: 11px;
}
.tour-vis .sw { box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 8px 20px -8px rgba(40, 20, 90, 0.2); }
.tour-vis .bar { display: block; height: 6px; border-radius: 3px; background: var(--line); }

/* Path: four dots fill in order. */
.tv-path { position: relative; display: grid; grid-template-columns: repeat(4, 56px); width: 224px; }
.tv-path__track { position: absolute; top: 12px; left: 28px; right: 28px; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.tv-path__fill { position: absolute; inset: 0; background: var(--ok-mid); transform-origin: left; animation: tv-fill var(--T) infinite var(--ease-in-out); }
.tv-path__step { position: relative; display: grid; justify-items: center; gap: 6px; color: var(--text-2); font-weight: 500; text-align: center; line-height: 1.25; }
.tv-path__dot { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ok-mid); color: #fff; box-shadow: 0 0 0 4px var(--surface);
  animation: tv-dot var(--T) calc(var(--k) * 0.6s) infinite var(--spring) both; }
.tv-path__dot b { position: absolute; font-size: 11px; color: var(--text-2); opacity: 0; animation: tv-num var(--T) calc(var(--k) * 0.6s) infinite both; }
.tv-path__dot svg.i { width: 13px; height: 13px; stroke-width: 3; animation: tv-check var(--T) calc(var(--k) * 0.6s) infinite var(--spring) both; }
@keyframes tv-fill { 0%, 8% { transform: scaleX(0); } 52%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes tv-dot { 0%, 8% { background: var(--surface); box-shadow: 0 0 0 4px var(--surface), inset 0 0 0 1px var(--line-2); } 14%, 92% { background: var(--ok-mid); box-shadow: 0 0 0 4px var(--surface); } 100% { background: var(--surface); box-shadow: 0 0 0 4px var(--surface), inset 0 0 0 1px var(--line-2); } }
@keyframes tv-num { 0%, 8% { opacity: 1; } 12%, 100% { opacity: 0; } }
@keyframes tv-check { 0%, 9% { transform: scale(0); } 16%, 92% { transform: none; } 100% { transform: scale(0); } }

/* Sandbox: the switch turns on, a sandbox card slides in. */
.tv-sandbox { position: relative; display: flex; align-items: center; gap: 18px; }
.tv-switch { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.tv-switch strong { font-size: 12px; color: var(--brand-ink); }
.tv-switch__track { position: relative; width: 34px; height: 20px; border-radius: var(--pill); background: var(--brand); animation: tv-track var(--T) infinite var(--ease); }
.tv-switch__knob { position: absolute; top: 2px; left: 16px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); animation: tv-knob var(--T) infinite var(--spring); }
.tv-sandbox__card { animation: tv-card var(--T) infinite var(--ease) both; }
.tv-sandbox__note { position: absolute; right: -6px; bottom: -14px; animation: tv-late var(--T) infinite var(--spring) both; }
@keyframes tv-track { 0%, 14% { background: var(--line-2); } 22%, 92% { background: var(--brand); } 100% { background: var(--line-2); } }
@keyframes tv-knob { 0%, 14% { left: 2px; } 24%, 92% { left: 16px; } 100% { left: 2px; } }
@keyframes tv-card { 0%, 26% { opacity: 0; transform: translateX(14px) rotate(4deg); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tv-late { 0%, 50% { opacity: 0; transform: scale(0.7); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Know before you start: the three intro facts arrive in turn. */
.tv-know { display: grid; gap: 6px; width: 200px; }
.tv-know__row { display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: 7px; padding: 4px 8px 4px 4px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-weight: 600;
  animation: tv-row var(--T) calc(var(--k) * 0.35s) infinite var(--ease) both; }
.tv-know__icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--brand-tint); color: var(--brand-ink); }
.tv-know__icon svg.i { width: 11px; height: 11px; vertical-align: 0; }
@keyframes tv-row { 0%, 6% { opacity: 0; transform: translateY(6px); } 16%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Saved progress, and the finished setup on the dashboard. */
.tv-save { position: relative; }
.tv-save__card { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; }
.tv-save__text { display: grid; gap: 1px; text-align: left; }
.tv-save__text strong { font-size: 12px; }
.tv-save__chip { position: absolute; right: -10px; bottom: -13px; animation: tv-late var(--T) infinite var(--spring) both; }
.tv-ring { position: relative; display: grid; place-items: center; width: 38px; height: 38px; }
.tv-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.tv-ring circle { fill: none; stroke: var(--line); stroke-width: 3.5; }
.tv-ring .tv-ring__fill { stroke: var(--ok-mid); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: var(--off, 0); animation: tv-ring var(--T) infinite var(--ease); }
.tv-ring b { font: 600 10px var(--mono); }
@keyframes tv-ring { 0%, 6% { stroke-dashoffset: 94.25; } 46%, 92% { stroke-dashoffset: var(--off, 0); } 100% { stroke-dashoffset: 94.25; } }

/* Help: the button opens a panel of answers. */
.tv-help { position: relative; display: flex; align-items: center; gap: 14px; }
.tv-help__btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line-2); font-weight: 600; color: var(--text);
  animation: tv-press var(--T) infinite var(--ease); }
.tv-help__btn svg.i { width: 13px; height: 13px; vertical-align: 0; }
.tv-help__panel { display: grid; gap: 6px; width: 140px; padding: 9px 10px; animation: tv-panel var(--T) infinite var(--ease) both; }
.tv-help__panel strong { font-size: 11.5px; }
.tv-help__q { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.tv-help__q .bar { flex: none; }
.tv-help__q svg.i { width: 11px; height: 11px; color: var(--text-3); vertical-align: 0; }
.tv-help__doc { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--brand-ink); }
.tv-help__doc svg.i { width: 11px; height: 11px; vertical-align: 0; }
@keyframes tv-press { 0%, 12% { transform: none; } 16% { transform: scale(0.9); box-shadow: 0 0 0 4px var(--brand-tint); } 22%, 100% { transform: none; } }
@keyframes tv-panel { 0%, 18% { opacity: 0; transform: translateX(18px); } 32%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Dashboard numbers: the revenue line draws itself. */
.tv-tiles { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 6px; width: 270px; }
.tv-tile { display: grid; gap: 1px; padding: 7px 9px; text-align: left; font-size: 10px; animation: tv-row var(--T) infinite var(--ease) both; }
.tv-tile strong { font-size: 13px; }
.tv-tile:nth-child(2) { animation-delay: 0.2s; }
.tv-tile:nth-child(3) { animation-delay: 0.4s; }
.tv-spark { width: 100%; height: 18px; margin-top: 2px; }
.tv-spark path { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 130; stroke-dashoffset: 0; animation: tv-draw var(--T) infinite var(--ease); }
@keyframes tv-draw { 0%, 16% { stroke-dashoffset: 130; } 52%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 130; } }

/* Navigation: the highlight moves down the pages. */
.tv-nav { position: relative; display: grid; gap: 2px; width: 150px; padding: 5px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.tv-nav__item { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; height: 20px; padding: 0 7px; font-weight: 500; color: var(--text-2); }
.tv-nav__item svg.i { width: 12px; height: 12px; vertical-align: 0; }
.tv-nav__hl { position: absolute; left: 5px; right: 5px; top: 5px; height: 20px; border-radius: 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); animation: tv-hl var(--T) infinite var(--ease-in-out); }
@keyframes tv-hl { 0%, 14% { transform: none; } 22%, 36% { transform: translateY(22px); } 44%, 58% { transform: translateY(44px); } 66%, 86% { transform: translateY(66px); } 100% { transform: none; } }

/* Sandbox or Live: the thumb slides across and back. */
.tv-env__switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--pill); background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.tv-env__thumb { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: var(--pill); background: var(--brand); animation: tv-env var(--T) infinite var(--ease-in-out); }
.tv-env__opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 14px; font-size: 12px; font-weight: 600; }
.tv-env__opt svg.i { width: 13px; height: 13px; vertical-align: 0; }
.tv-env__opt--sandbox { color: #fff; animation: tv-env-a var(--T) infinite var(--ease-in-out); }
.tv-env__opt--live { color: var(--text-2); animation: tv-env-b var(--T) infinite var(--ease-in-out); }
@keyframes tv-env { 0%, 30% { transform: none; background: var(--brand); } 42%, 72% { transform: translateX(100%); background: var(--action); } 84%, 100% { transform: none; background: var(--brand); } }
@keyframes tv-env-a { 0%, 32% { color: #fff; } 40%, 74% { color: var(--text-2); } 82%, 100% { color: #fff; } }
@keyframes tv-env-b { 0%, 32% { color: var(--text-2); } 40%, 74% { color: #fff; } 82%, 100% { color: var(--text-2); } }