.transaction-stream{--stream-crossing:6s;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-container);background:var(--color-background-surface);height:150px;box-shadow:var(--shadow-low);position:relative;overflow:hidden;container-type:inline-size}.transaction-stream-seal{top:50%;right:var(--spacing-4);z-index:1;border:calc(var(--border-width) * 3) solid var(--color-accent);border-radius:var(--radius-full);background:var(--color-accent-muted);place-items:center;width:64px;height:64px;display:grid;position:absolute;transform:translateY(-50%)}.transaction-stream-packet{top:var(--top);align-items:center;gap:var(--spacing-2);padding:var(--spacing-1) var(--spacing-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full);background:var(--color-background-muted);color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);white-space:nowrap;opacity:0;animation:transaction-stream-flow var(--stream-crossing) linear infinite;animation-delay:var(--delay);animation-play-state:paused;display:inline-flex;position:absolute;left:0}.transaction-stream.in .transaction-stream-packet{animation-play-state:running}@keyframes transaction-stream-flow{0%{opacity:0;left:-14%}10%{opacity:1}72%{opacity:1}88%{opacity:0}to{opacity:0;left:74%}}html:not(.js) .transaction-stream-packet{left:var(--rest);opacity:1;animation:none}@media (prefers-reduced-motion:reduce){.transaction-stream-packet{left:var(--rest);opacity:1;animation:none!important}}@container (max-width:40rem){html:not(.js) .transaction-stream-packet:nth-of-type(n+6){display:none}}@media (prefers-reduced-motion:reduce){@container (max-width:40rem){.transaction-stream-packet:nth-of-type(n+6){display:none}}}
.hero{position:relative;overflow:hidden}.hero h1{max-width:18ch}.hero-bg-seal{opacity:.022;width:560px;height:560px;color:var(--color-text-primary);pointer-events:none;position:absolute;top:-190px;left:50%;transform:translate(-50%)}.hero-content{position:relative}.hero .sub{max-width:62ch}.hero-cta{padding-top:var(--spacing-2)}.hero-cta>p{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);line-height:1.4}#hooks .persona-cards{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:960px){#hooks .persona-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){#hooks .persona-cards{grid-template-columns:minmax(0,1fr)}}#hooks .persona-card{grid-template-rows:subgrid;row-gap:var(--spacing-3);grid-row:span 4;align-items:start;display:grid}.persona-card .module-picture{margin:0}.persona-card h3{max-width:20ch}.persona-line{max-width:36ch}.shift-mark{width:var(--spacing-5);height:var(--spacing-5);border-radius:var(--radius-full);flex:none;place-items:center;margin-top:2px;display:grid}.shift-mark-old{border:var(--border-width) solid var(--color-border);background:var(--color-background-surface);color:var(--color-text-faint)}.shift-mark-new{background:var(--color-accent);color:var(--color-on-accent)}.step-bar{border-radius:var(--radius-inner);background:var(--color-border);width:100%;height:2px;display:block;overflow:hidden}.step-bar:after{content:"";background:var(--color-accent);border-radius:inherit;width:100%;height:100%;display:block}.step-number{width:var(--spacing-9);height:var(--spacing-9);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full);background:var(--color-background-muted);transition:background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);place-items:center;display:grid}.js [data-steps] [data-step]{opacity:.42;transition:opacity var(--duration-medium) var(--ease-standard)}.js [data-steps] [data-step] .step-bar:after{width:0;transition:width var(--duration-slow-min) var(--ease-standard)}.js [data-steps] [data-step].on{opacity:1}.js [data-steps] [data-step].on .step-bar:after{width:100%}.js [data-steps] [data-step].on .step-number{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-on-accent)}.cta-copy{max-width:50ch}@media (prefers-reduced-motion:reduce){.js [data-steps] [data-step]{opacity:1}.js [data-steps] [data-step] .step-bar:after{width:100%}}