/* "See it run": a page with nothing yet shows the product at work in one small example, with one action.
   Each element's own style is the finished example, so it simply stands there under reduced motion. */

@keyframes run-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes run-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes run-carry { 0%, 16% { transform: translateX(0); } 46%, 100% { transform: translateX(calc(100% + var(--run-token))); } }
@keyframes run-fill { 0%, 16% { transform: scaleX(0); opacity: 1; } 46%, 60% { transform: scaleX(1); opacity: 1; } 72%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes run-leave { 0%, 8% { opacity: 0; } 12% { opacity: .9; } 26%, 100% { opacity: 0; } }
@keyframes run-land { 0%, 44% { opacity: 0; } 49% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes run-arrive { 0%, 45% { opacity: 0; transform: translateY(8px); } 53%, 90% { opacity: 1; transform: none; } 96% { opacity: 0; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes run-was { 0%, 8% { opacity: 1; } 11%, 91% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes run-now { 0%, 8% { opacity: 0; transform: scale(.92); } 11% { opacity: 1; transform: scale(1.08); } 15%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

.deck-hero.run { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 34px; height: auto; padding: 28px 30px; }
.run-text { min-width: 0; animation: run-in .55s var(--ease) both; }
.run-title { margin: 18px 0 0; font-size: clamp(27px, 2.7vw, 38px); font-weight: 600; line-height: 1.08; letter-spacing: var(--tr-tight); color: var(--stage-ink); }
.run-lede { margin: 10px 0 0; font-size: var(--fs-l); line-height: 1.5; color: var(--stage-muted); }
.run-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.run-actions .btn { min-height: var(--h-lg); padding: 0 18px; font-size: var(--fs-m); }
.btn.run-ghost { border-color: color-mix(in srgb, var(--stage-ink) 26%, transparent); background: none; color: var(--stage-ink); box-shadow: none; }
.btn.run-ghost:hover:not(:disabled) { border-color: color-mix(in srgb, var(--stage-ink) 42%, transparent); background: var(--stage-fill); color: var(--stage-ink); }

.run-demo { --run-lap: 9s; --run-token: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; row-gap: 14px; min-width: 0; }
.run-rec { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 16px; border-radius: 18px; background: var(--stage-card); outline: 1px solid var(--stage-grid); outline-offset: -1px; }
.run-rec.from { animation: run-in .55s var(--ease) .12s both; }
.run-rec.to { animation: run-in .55s var(--ease) .24s both; }
.run-rec::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px var(--stage-flow), 0 0 26px -6px var(--stage-flow); opacity: 0; pointer-events: none; }
.run-rec.from::after { animation: run-leave var(--run-lap) ease-out infinite; }
.run-rec.to::after { animation: run-land var(--run-lap) ease-out infinite; }
.run-rec.to > :not(.brandmark) { animation: run-arrive var(--run-lap) ease-out infinite; }
.run-rec .brandmark { width: 100%; height: 50px; margin-bottom: 12px; padding: 0 16px; border-radius: var(--r-l); }
.run-rec .type, .run-rec b, .run-rec strong, .run-rec .state { padding-inline: 6px; }
.run-rec .type { font-size: var(--fs-xs); font-weight: 600; }
.run-rec.from .type { color: var(--stage-rt-deal); }
.run-rec.to .type { color: var(--stage-rt-invoice); }
.run-rec b { margin-top: 2px; font-size: var(--fs-l); font-weight: 600; letter-spacing: var(--tr-snug); color: var(--stage-ink); }
.run-rec strong { margin-top: 6px; font-size: 25px; line-height: 1.1; font-weight: 600; letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; color: var(--stage-ink); }
.run-rec .state { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--stage-muted); }
.run-rec .state i { width: 7px; height: 7px; border-radius: 50%; background: var(--stage-muted); }
.run-rec .state.swap { display: inline-grid; justify-items: start; }
.run-rec .swap > span { display: inline-flex; align-items: center; gap: 7px; grid-area: 1 / 1; transform-origin: left center; }
.run-rec .was { opacity: 0; animation: run-was var(--run-lap) linear infinite; }
.run-rec .now { color: var(--stage-ink); animation: run-now var(--run-lap) ease-out infinite; }
.run-rec .now i { background: var(--stage-ok); }

.run-lane { position: relative; align-self: stretch; overflow: hidden; }
.run-beam { position: absolute; top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; overflow: hidden; background: color-mix(in srgb, var(--stage-flow) 30%, transparent); }
.run-beam::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 40%; background: linear-gradient(90deg, transparent, var(--stage-ink), transparent); transform: translateX(-100%); animation: run-sweep 1.8s linear infinite; }
.run-beam::after { content: ""; position: absolute; inset: 0; background: var(--stage-flow); transform-origin: left center; animation: run-fill var(--run-lap) cubic-bezier(.5, 0, .3, 1) infinite; }
.run-carrier { position: absolute; inset: 0; display: flex; align-items: center; transform: translateX(calc(100% + var(--run-token))); animation: run-carry var(--run-lap) cubic-bezier(.5, 0, .3, 1) infinite; }
.run-token {
  display: grid; place-items: center; flex: none; width: var(--run-token); height: var(--run-token); margin-left: calc(var(--run-token) * -1); border-radius: 50%;
  background: var(--stage-flow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-flow) 24%, transparent); color: var(--stage-bg);
}
.run-token svg { width: 55%; height: 55%; }
.run-note { grid-column: 1 / -1; margin: 0; font-size: var(--fs-s); text-align: center; color: var(--stage-muted); }

@media (max-width: 1100px) {
  .deck-hero.run { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 760px) {
  .deck-hero.run { padding: 20px; }
  .run-demo { --run-token: 20px; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
  .run-rec { padding: 10px 10px 12px; }
  .run-rec .brandmark { height: 40px; padding: 0 10px; }
  .run-rec strong { font-size: 20px; }
  .run-actions .btn { flex: 1 1 100%; }
}