.motion-card{--mc-accent:var(--orange-light);--mc-c:38px;--mc-g:6px;--mc-w:108px;--mc-step:3s;--mc-ease:cubic-bezier(.22, .68, .18, 1);border:1px solid var(--edge);border-radius:var(--radius-2xl);background:var(--canvas-surface);min-width:0;box-shadow:var(--shadow-card);color:var(--ink-primary);font-family:var(--font-hank);padding:24px;overflow:hidden;container-type:inline-size}.motion-card-teal{--mc-accent:var(--teal-light)}.motion-card-violet{--mc-accent:var(--violet-light)}.motion-card-magenta{--mc-accent:var(--magenta-light)}.motion-card-top{justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.motion-card-eyebrow{font:var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--mc-accent)}.motion-card-pause{border:1px solid var(--edge-strong);border-radius:var(--radius-full);min-height:44px;color:var(--ink-secondary);font:var(--body-sm);cursor:pointer;background:0 0;align-items:center;gap:6px;padding:0 14px;transition:color .16s,border-color .16s;display:inline-flex}.motion-card-pause:hover{color:var(--ink-primary);border-color:var(--mc-accent)}.motion-card-pause:focus-visible,.motion-card-steps button:focus-visible{outline:2px solid var(--mc-accent);outline-offset:3px}.motion-card-title{max-width:18em;font:var(--heading-xl);letter-spacing:-.01em;margin:12px 0 8px}.motion-card-subtitle{font:var(--body-sm);color:var(--ink-secondary);margin:0}.motion-card-stage{isolation:isolate;background:radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--mc-accent) 13%, transparent), transparent 63%);height:250px;margin:16px -24px 0;position:relative;overflow:hidden}.motion-card-orbit{border:1px solid var(--edge);border-radius:50%;width:340px;height:160px;margin-left:-170px;position:absolute;top:38px;left:50%;transform:rotate(-20deg)}.motion-card-orbit-two{width:430px;height:190px;margin-left:-215px;top:22px;transform:rotate(22deg)}.motion-card-beam{background:linear-gradient(90deg, transparent, var(--mc-accent), transparent);opacity:.25;width:65%;height:1px;position:absolute;top:106px;left:17.5%}.motion-card-hub{border:1px solid var(--edge-strong);background:linear-gradient(145deg, var(--canvas-overlay), var(--canvas-raised));width:88px;height:88px;box-shadow:var(--shadow-card-hover);color:var(--mc-accent);border-radius:25px;place-items:center;margin-left:-44px;animation:6s ease-in-out infinite paused mc-float;display:grid;position:absolute;top:36px;left:50%;transform:rotate(-7deg)}.motion-card-hub-dot{background:var(--mc-accent);width:9px;height:9px;box-shadow:0 0 15px var(--mc-accent);border-radius:50%;position:absolute;top:10px;right:10px}.motion-card-status{inset-inline:0;font:var(--body-sm);color:var(--ink-primary);animation:mc-status .4s var(--mc-ease) both;justify-content:center;align-items:center;gap:8px;margin:0;display:flex;position:absolute;top:142px}.motion-card-status-dot{background:var(--mc-accent);border-radius:50%;width:6px;height:6px}.motion-card-row{width:calc(4 * var(--mc-c) + 3 * var(--mc-g) + var(--mc-w));height:var(--mc-c);margin-left:calc((4 * var(--mc-c) + 3 * var(--mc-g) + var(--mc-w)) / -2);position:absolute;top:186px;left:50%}.motion-card-capsule{width:calc(var(--mc-c) + var(--mc-w));height:var(--mc-c);border:1px solid color-mix(in srgb, var(--mc-accent) 55%, var(--edge));border-radius:var(--radius-full);background:color-mix(in srgb, var(--mc-accent) 12%, var(--canvas-raised));box-shadow:var(--shadow-card);transition:transform .4s var(--mc-ease);position:absolute;top:0;left:0}.motion-card[data-step="1"] .motion-card-capsule{transform:translateX(calc(var(--mc-c) + var(--mc-g)))}.motion-card[data-step="2"] .motion-card-capsule{transform:translateX(calc(2 * (var(--mc-c) + var(--mc-g))))}.motion-card[data-step="3"] .motion-card-capsule{transform:translateX(calc(3 * (var(--mc-c) + var(--mc-g))))}.motion-card-capsule span{left:var(--mc-c);width:var(--mc-w);font:var(--body-sm);line-height:calc(var(--mc-c) - 2px);white-space:nowrap;color:var(--mc-accent);opacity:0;padding-right:12px;transition:opacity .2s;position:absolute;top:0}.motion-card-capsule span.is-active{opacity:1;transition-delay:.16s}.motion-card-pill{width:var(--mc-c);height:var(--mc-c);border:1px solid var(--edge-strong);background:var(--canvas-raised);color:var(--ink-secondary);transition:transform .4s var(--mc-ease), color .3s ease, background-color .3s ease, border-color .3s ease;border-radius:50%;place-items:center;display:grid;position:absolute;top:0}.motion-card-pill:first-of-type{left:0}.motion-card-pill:nth-of-type(2){left:calc(var(--mc-c) + var(--mc-g))}.motion-card-pill:nth-of-type(3){left:calc(2 * (var(--mc-c) + var(--mc-g)))}.motion-card-pill:nth-of-type(4){left:calc(3 * (var(--mc-c) + var(--mc-g)))}.motion-card-pill.is-after{transform:translateX(var(--mc-w))}.motion-card-pill.is-active{color:var(--mc-accent);background:0 0;border-color:#0000}.motion-card-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 20px;padding:0;list-style:none;display:grid}.motion-card-steps button{width:100%;min-height:56px;color:var(--ink-secondary);font:var(--body-sm);text-align:left;overflow-wrap:anywhere;cursor:pointer;background:0 0;border:0;padding:0 0 4px;transition:color .2s;display:block}.motion-card-steps button:hover,.motion-card-steps button.is-active{color:var(--ink-primary)}.motion-card-steps small{color:var(--ink-tertiary);margin-bottom:2px;font-size:11px;display:block}.motion-card-track{border-radius:var(--radius-full);background:var(--edge);height:2px;margin-bottom:10px;display:block;overflow:hidden}.motion-card-progress{background:var(--mc-accent);transform-origin:0;height:100%;animation:mc-progress var(--mc-step) linear forwards paused;display:block}.motion-card:not(:has(.motion-card-pause)) .motion-card-progress{animation:none}.motion-card[data-running=true] .motion-card-hub,.motion-card[data-running=true] .motion-card-progress{animation-play-state:running}.motion-card-values{border-top:1px solid var(--edge);grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding-top:20px;display:grid}.motion-card-values div{flex-direction:column-reverse;justify-content:flex-end;gap:6px;display:flex}.motion-card-values dd{letter-spacing:-.01em;white-space:nowrap;margin:0;font-size:clamp(17px,4.9cqi,26px);font-weight:700;line-height:1.15}.motion-card-values div:last-child dd{color:var(--mc-accent)}.motion-card-values dt{color:var(--ink-secondary);font-size:12px;line-height:1.4}.motion-card-note{color:var(--ink-secondary);margin:20px 0 0;font-size:12px;line-height:1.6}@keyframes mc-float{0%,to{transform:translateY(0)rotate(-7deg)}50%{transform:translateY(-9px)rotate(2deg)}}@keyframes mc-status{0%{opacity:0;transform:translateY(6px)}}@keyframes mc-progress{0%{transform:scaleX(0)}}@container (max-width:360px){.motion-card-title{font:var(--heading-lg)}.motion-card-row{--mc-c:34px;--mc-w:96px}.motion-card-values{gap:8px}}@media (prefers-reduced-motion:reduce){.motion-card-hub,.motion-card-status,.motion-card-progress{animation:none}.motion-card-capsule,.motion-card-capsule span,.motion-card-pill{transition:none}.motion-card-pause{display:none}}.motion-split{grid-template-columns:minmax(0,1fr) minmax(320px,460px);align-items:center;gap:clamp(32px,5vw,72px);display:grid}.motion-split .section-head{margin-bottom:0}.motion-split+*{margin-top:clamp(36px,4.5vw,56px)}.motion-solo{max-width:520px;margin-inline:auto}.motion-solo+*{margin-top:clamp(36px,4.5vw,56px)}@media (max-width:900px){.motion-split{grid-template-columns:minmax(0,1fr)}.motion-split .motion-card{max-width:520px}}.motion-split-after{margin-top:clamp(48px,6vw,80px)}.motion-card-compact .motion-card-stage{margin-top:0}.motion-card-compact .motion-card-steps{margin-bottom:0}.process-grid:has(.motion-card){align-items:start}.process-right{flex-direction:column;gap:16px;min-width:0;display:flex}.process-right .motion-card{--mc-step:5s}@media (min-width:901px){.process-grid:has(.motion-card) .process-left{position:sticky;top:120px}}
