.landing-how .landing-how__layout{align-items:center;gap:1.5rem;display:grid}.landing-how .landing-how__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;display:grid}.landing-how .landing-how__step{border:1px solid var(--border);width:100%;height:100%;color:var(--muted-foreground);text-align:left;background:0 0;border-radius:1rem;justify-content:center;align-items:center;gap:.5rem;padding:.9rem .4rem;transition:background-color .18s,border-color .18s;display:flex;position:relative;overflow:hidden}.landing-how .landing-how__step:hover{border-color:color-mix(in oklch, var(--primary), transparent 55%);background:color-mix(in oklch, var(--mochi-surface), transparent 45%)}.landing-how .landing-how__step[aria-pressed=true]{border-color:color-mix(in oklch, var(--primary), transparent 65%);background:var(--mochi-surface);color:var(--foreground)}.landing-how .landing-how__step:focus-visible,.landing-how .landing-how__playback:focus-visible{outline:2px solid var(--primary);outline-offset:4px}.landing-how .landing-how__number{color:var(--primary);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.7rem;font-weight:600}.landing-how .landing-how__short-title{font-size:.875rem;font-weight:600}.landing-how .landing-how__title,.landing-how .landing-how__description{display:none}.landing-how .landing-how__mobile-description{min-height:5.25rem;color:var(--muted-foreground);margin-top:1rem;font-size:.875rem;line-height:1.75}.landing-how .landing-how__progress{background:color-mix(in oklch, var(--primary), transparent 88%);height:3px;position:absolute;inset:auto 0 0}.landing-how .landing-how__progress>span{transform-origin:0;background:var(--primary);height:100%;animation-name:landing-how-progress;animation-timing-function:linear;animation-play-state:paused;animation-fill-mode:forwards;display:block;transform:scaleX(0)}.landing-how[data-playing=true] .landing-how__progress>span{animation-play-state:running}.landing-how .landing-how__playback{border-radius:999px;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .75rem;font-weight:500;display:inline-flex}.landing-how .landing-how__playback:hover:not(:disabled){background:var(--secondary);color:var(--foreground)}.landing-how .landing-how__playback:disabled{opacity:.5;cursor:default}.landing-how .landing-how__visual{border:1px solid var(--border);background:color-mix(in oklch, var(--mochi-surface), var(--background) 45%);border-radius:1.75rem;min-width:0;min-height:46rem;padding:1.25rem 1rem 2rem;display:grid}.landing-how .landing-how__panel:not([hidden]){align-items:center;min-width:0;animation:.28s ease-out both landing-how-panel;display:flex}.landing-how .landing-how__panel>*{width:100%;min-width:0}.landing-how[data-playing=false] .landing-how__panel *{animation-play-state:paused}@keyframes landing-how-panel{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes landing-how-progress{to{transform:scaleX(1)}}@media (width>=640px){.landing-how .landing-how__visual{min-height:35rem;padding:2rem}}@media (width>=1024px){.landing-how .landing-how__layout{grid-template-columns:minmax(18rem,.8fr) minmax(0,1.4fr);gap:2.5rem}.landing-how .landing-how__steps{grid-template-columns:minmax(0,1fr);gap:.75rem}.landing-how .landing-how__step{border-radius:1.25rem;justify-content:flex-start;align-items:flex-start;gap:1rem;padding:1.25rem}.landing-how .landing-how__number{padding-top:.2rem;font-size:.8rem}.landing-how .landing-how__short-title,.landing-how .landing-how__mobile-description{display:none}.landing-how .landing-how__title{letter-spacing:-.02em;color:var(--foreground);font-size:1.125rem;font-weight:600;display:block}.landing-how .landing-how__description{color:var(--muted-foreground);margin-top:.5rem;font-size:.875rem;line-height:1.75;display:block}.landing-how .landing-how__visual{min-height:37rem;padding:1.75rem 1.5rem 2.25rem}}@media (prefers-reduced-motion:reduce){.landing-how .landing-how__step,.landing-how .landing-how__panel:not([hidden]),.landing-how .landing-how__visual *,.landing-how .landing-how__progress>span{transition:none;animation:none}}
