.story{--ff-display:var(--story-font-display);--ff-sans:var(--story-font-sans);--fu-font-display:var(--ff-display);--fu-font-sans:var(--ff-sans);color:var(--text-primary);font-family:var(--ff-sans);padding-block:var(--section-py);position:relative}.story__title{margin-bottom:var(--space-32)}.story__steps{list-style:none;margin:0;padding:0}.story__step{display:grid;gap:var(--grid-gap);min-width:0;padding-block:var(--space-32)}.story__copy{min-width:0;overflow-wrap:anywhere}.story__number{color:var(--ink);font-family:var(--ff-display);font-size:var(--story-number-mobile);font-weight:800;line-height:1;margin:0 0 var(--space-16);overflow:hidden}.story__number-line{display:block}.story__description{margin:var(--space-16) 0 0}.story__device-col{display:none}.story__device-size{container-type:inline-size;margin:0 auto;max-width:var(--story-tablet-width);width:100%}.story__device-size--phone{max-width:var(--story-phone-width)}.story__device{aspect-ratio:var(--story-tablet-ratio);background:var(--surface-ink);border-radius:var(--story-tablet-radius);font-size:clamp(.25px,.13889cqw,1px);height:calc(100cqw/(var(--story-tablet-ratio)));padding:var(--story-tablet-bezel);position:relative;width:100%}.story__device:after{border:var(--border-w) solid var(--neutral-700);border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.story__device--phone{aspect-ratio:var(--story-phone-ratio);border-radius:var(--story-phone-radius);font-size:clamp(.25px,.30303cqw,1px);height:calc(100cqw/(var(--story-phone-ratio)));padding:var(--story-phone-bezel)}.story__screen{border-radius:var(--story-tablet-screen-radius);height:100%;overflow:hidden;position:relative;width:100%}.story__device--tablet .story__screen{background:var(--bg-surface)}.story__device--phone .story__screen{border-radius:var(--story-phone-screen-radius)}.story__shot{display:block;height:100%;object-fit:cover;object-position:left top;width:100%}.story__device--tablet .story__shot{object-fit:contain}.story__device--phone .story__shot{object-position:center top}.story__camera{background:var(--neutral-700);border-radius:50%;height:var(--story-camera);top:calc((var(--story-tablet-bezel) - var(--story-camera))/2);width:var(--story-camera)}.story__camera,.story__island{left:50%;position:absolute;transform:translateX(-50%)}.story__island{background:var(--surface-ink);border-radius:var(--story-island-radius);height:var(--story-island-height);top:var(--story-island-top);width:var(--story-island-width);z-index:1}.story__status{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.story__progress{align-items:center;display:flex;flex-direction:column;gap:calc(var(--story-step-pitch) - var(--story-hit-height));isolation:isolate;position:relative}.story__progress:after,.story__progress:before{background:var(--border-strong);content:"";height:var(--story-track-height,0);left:calc(50% - var(--border-w)/2);pointer-events:none;position:absolute;top:calc(50% - var(--story-track-height, 0px)/2);width:var(--border-w);z-index:-1}.story__progress:after{background:var(--btn-brand-bg);transform:scaleY(var(--story-progress,0));transform-origin:top}.story__node{background:transparent;border:0;color:var(--text-secondary);cursor:pointer;display:grid;flex:none;font:600 var(--fs-body-sm)/1 var(--ff-sans);height:var(--story-hit-height);padding:0;place-items:center;position:relative;text-align:center;width:var(--story-hit-width);z-index:1}.story__marker,.story__node-number{grid-area:1/1}.story__marker{background:var(--bg-surface);border:var(--border-w) solid var(--ink);border-radius:var(--radius-button);box-sizing:border-box;height:var(--story-hit-height);transition:background-color var(--dur-button) var(--ease),border-color var(--dur-button) var(--ease),box-shadow var(--dur-button) var(--ease),transform var(--dur-button) var(--ease);width:var(--story-hit-height)}.story__node-number{pointer-events:none;position:relative}.story__node.is-complete{color:var(--ink)}.story__node.is-complete .story__marker{background:var(--bg-brand-subtle);border-color:var(--btn-brand-bg)}.story__node[aria-current=step]{color:var(--ink);font-size:var(--fs-body);font-weight:700}.story__node[aria-current=step] .story__marker{background:var(--btn-brand-bg);border-color:var(--ink);box-shadow:var(--shadow-brutal-sm)}.story__node:focus-visible{outline:none}.story__node:focus-visible .story__marker{outline:var(--border-w) solid var(--brand-primary);outline-offset:var(--space-4)}@media (hover:hover) and (pointer:fine){.story__node:hover .story__marker{background:var(--bg-brand-subtle);box-shadow:var(--shadow-brutal-sm);transform:translate(calc(var(--move)*-1),calc(var(--move)*-1))}.story__node[aria-current=step]:hover .story__marker{background:var(--btn-brand-bg-hover);box-shadow:var(--shadow-brutal-md)}}.story__node:active .story__marker{box-shadow:none;transform:none}@media (min-width:1024px) and (min-height:640px) and (prefers-reduced-motion:no-preference){html.js :where(body,body *):has(.story){contain:none!important;filter:none!important;overflow:visible!important;transform:none!important;will-change:auto!important}html.js .reveal:has(.story){opacity:1!important;transition:none!important}html.js .story__layout{align-items:start;column-gap:var(--grid-gap);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr)}html.js .story__step{display:flex;flex-direction:column;justify-content:center;min-height:var(--story-viewport)}html.js .story__number{font-size:var(--story-number)}html.js .story__step>[data-story-inline]{display:none}html.js .story__device-col{align-items:center;display:grid;gap:var(--grid-gap);grid-template-columns:var(--story-hit-width) minmax(0,1fr);height:calc(var(--story-viewport) - var(--header-h, 0px));min-width:0;padding-block:var(--story-device-space);position:sticky;top:var(--header-h,0)}html.js .story__device-stage{display:grid;height:100%;min-width:0;place-items:center}html.js .story__frame{grid-area:1/1;opacity:0;pointer-events:none;width:min(100%,var(--story-tablet-width),calc((var(--story-viewport) - var(--header-h, 0px) - var(--story-device-space)*2)*(var(--story-tablet-ratio))))}html.js .story__frame.story__device-size--phone{width:min(100%,var(--story-phone-width),calc((var(--story-viewport) - var(--header-h, 0px) - var(--story-device-space)*2)*(var(--story-phone-ratio))))}html.js .story__frame[data-active=true]{opacity:1;pointer-events:auto}html.js .story__shot{inset:0;opacity:0;position:absolute}html.js .story__shot[data-active=true]{opacity:1}html.js .story[data-story-ready] .story__copy{opacity:var(--story-copy-opacity,var(--story-inactive-opacity));transform:translateY(var(--story-copy-shift,var(--story-shift-distance)))}html.js .story[data-story-ready] .story__number-line{transform:translateY(105%)}html.js .story[data-story-ready] .story__step.has-entered .story__number-line{transform:none}html.js .story[data-story-ready] .story__step.is-active:not(.is-copy-ready) .story__text{opacity:var(--story-inactive-opacity)}html.js .story[data-story-ready] .story__text{transition:opacity var(--motion-step-duration) var(--motion-ease)}html.js .story[data-story-motion] .story__copy{transition:opacity var(--motion-step-duration) var(--motion-ease),transform var(--motion-step-duration) var(--motion-ease)}html.js .story[data-story-motion] .story__number-line{transition:transform var(--motion-base) var(--motion-ease)}html.js .story[data-story-motion] .story__frame,html.js .story[data-story-motion] .story__shot{transition:opacity var(--motion-step-duration) var(--motion-ease)}html.js .story[data-story-motion] .story__progress:after{transition:transform var(--motion-step-duration) var(--motion-ease)}}