.feature-tour-track{--feature-stage-height:min(calc(100svh - 100px), 900px);--feature-scene-distance:120svh;--feature-transition-duration:.32s;height:calc(var(--feature-stage-height) + var(--feature-scene-count,4) * var(--feature-scene-distance))}.feature-tour-stage{height:var(--feature-stage-height);position:sticky;top:88px}.feature-tour-layout{max-width:1096px;transition:grid-template-columns var(--feature-transition-duration) cubic-bezier(.22, 1, .36, 1), max-width var(--feature-transition-duration) ease, gap var(--feature-transition-duration) ease;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}.feature-story{animation:feature-story-in var(--feature-transition-duration) ease-out both}.feature-phone-backdrop{background:color-mix(in oklch, var(--primary) 13%, var(--background))}.feature-phone-sticker{box-shadow:4px 4px 0 var(--foreground);animation:feature-sticker-in var(--feature-transition-duration) ease-out both;transition:top var(--feature-transition-duration) cubic-bezier(.22, 1, .36, 1), right var(--feature-transition-duration) cubic-bezier(.22, 1, .36, 1);top:9%;right:-14px;transform:rotate(7deg)}.feature-phone-sticker>span{animation:feature-device-screen-in var(--feature-transition-duration) ease both}.feature-chat-message{animation:feature-message-in var(--feature-transition-duration) cubic-bezier(.2, .8, .2, 1) both}.feature-chat-seen{animation:.2s ease-out both feature-story-in}.feature-typing i{animation:.6s ease-in-out infinite alternate feature-typing}.feature-typing i:nth-child(2){animation-delay:.12s}.feature-typing i:nth-child(3){animation-delay:.24s}.feature-phone-heart{box-shadow:3px 3px #161116}.mac-feature-base{background:linear-gradient(#dfdfe2 0%,#adadb2 65%,#7c7c82 100%)}.mac-feature-base>span{background:linear-gradient(90deg,#939399,#c9c9ce 18% 82%,#939399)}.marketing-preview-light{--background:oklch(100% 0 0);--foreground:oklch(14.5% .008 326);--card:oklch(100% 0 0);--stat-card:color-mix(in oklch, var(--card) 96%, var(--primary));--sidebar:oklch(98.5% 0 0);--chart-1:oklch(64% .16 65);--chart-2:oklch(55% .2 255);--chart-3:oklch(59.2% .249 .584);--chart-4:oklch(55% .16 145);--chart-5:oklch(55% .22 305);--chart-6:oklch(56% .11 205);--card-foreground:oklch(14.5% .008 326);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% .008 326);--primary:oklch(52.5% .223 3.958);--primary-foreground:oklch(97.1% .014 343.198);--secondary:oklch(96.7% .001 286.375);--secondary-foreground:oklch(21% .006 285.885);--muted:oklch(96% .003 325.6);--muted-foreground:oklch(54.2% .034 322.5);--success-foreground:oklch(55.069% .165421 146.61);--destructive:oklch(57.7% .245 27.325);--accent:oklch(52.5% .223 3.958);--accent-foreground:oklch(97.1% .014 343.198);--border:oklch(92.2% .005 325.62);--input:oklch(92.2% .005 325.62);--ring:oklch(71.1% .019 323.02)}.feature-device-space{--phone-width:clamp(252px, calc((100svh - 190px) * .485), 320px);--mac-width:min(680px, 92cqw);--mac-ratio:.58;height:calc(var(--phone-width) / .49)}.feature-device-frame{width:var(--phone-width);height:calc(var(--phone-width) / .49);aspect-ratio:auto;transition:width var(--feature-transition-duration) cubic-bezier(.22, 1, .36, 1), height var(--feature-transition-duration) cubic-bezier(.22, 1, .36, 1), border-radius var(--feature-transition-duration) ease, padding var(--feature-transition-duration) ease}.feature-device-frame[data-device=mac]{width:var(--mac-width);height:calc(var(--mac-width) * var(--mac-ratio));border-radius:18px 18px 8px 8px;padding:6px}.feature-device-frame[data-device=mac]>.feature-device-screen{border-radius:10px 10px 3px 3px;overflow:hidden}.feature-device-frame[data-device=phone]>.feature-device-screen{animation:feature-device-screen-in var(--feature-transition-duration) ease both}.feature-device-frame>.mac-feature-camera{width:3px;height:3px;transition:opacity var(--feature-transition-duration) ease;top:2px}.feature-device-frame>.mac-feature-base{width:108%;transition:opacity var(--feature-transition-duration) ease;position:absolute;top:calc(100% - 1px);left:-4%}.feature-tour-layout[data-device=mac] .feature-phone-sticker{top:calc((100% - var(--mac-width) * var(--mac-ratio)) / 2 - 32px);right:calc((100% - var(--mac-width)) / 2 - 22px)}.feature-tour-layout[data-device=mac]{grid-template-columns:minmax(352px,9fr) minmax(0,16fr);gap:32px;max-width:1200px}.feature-media-scale{zoom:calc(100cqw / 320px);width:320px;max-width:100%}@container (width<=561px){.feature-device-space{--mac-ratio:.67}}@media (width<=1199px){.feature-phone-sticker{top:-16px;right:calc((100% - var(--phone-width)) / 2 - 10px)}.feature-tour-layout[data-device=mac] .feature-phone-sticker{top:calc((100% - var(--mac-width) * var(--mac-ratio)) / 2 - 20px);right:calc((100% - var(--mac-width)) / 2 - 4px)}}@media (width<=1023px) and (width>=768px){.feature-tour-layout{gap:24px}}@media (width<=767px){.feature-tour-layout{grid-template-columns:minmax(0,1fr);gap:12px;max-width:470px}.feature-device-space{--phone-width:min(94cqw, clamp(200px, calc((100svh - 410px) * .49), 240px));transition:height var(--feature-transition-duration) cubic-bezier(.22, 1, .36, 1);--mac-ratio:.67}.feature-tour-layout[data-device=mac]{grid-template-columns:minmax(0,1fr);gap:12px;max-width:680px}.feature-tour-layout[data-device=mac] .feature-device-space{height:calc(var(--mac-width) * var(--mac-ratio) + 32px)}.feature-device-frame[data-device=mac]{border-radius:11px 11px 5px 5px;padding:3px}.feature-device-frame[data-device=mac]>.feature-device-screen{border-radius:6px 6px 2px 2px}.feature-device-frame>.mac-feature-camera{width:2px;height:2px;top:1px}}@media (width<=767px),(height<=640px),(prefers-reduced-motion:reduce){.feature-tour-track{height:auto}.feature-tour-stage{height:auto;max-height:none;padding-block:32px;position:relative;top:auto}}.feature-mobile-list{--feature-transition-duration:.32s}@media (prefers-reduced-motion:reduce){.feature-story,.feature-phone-sticker,.feature-phone-sticker>span,.feature-chat-message,.feature-chat-seen,.feature-typing i,.feature-device-frame[data-device=phone]>.feature-device-screen,.mac-feature-screen-content{animation:none}.feature-device-space,.feature-device-frame,.feature-phone-sticker,.feature-tour-layout,.feature-device-frame>.mac-feature-camera,.feature-device-frame>.mac-feature-base{transition:none}}@keyframes feature-message-in{0%{opacity:0;transform:translateY(9px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes feature-story-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes feature-sticker-in{0%{opacity:0;transform:rotate(3deg)scale(.94)}to{opacity:1;transform:rotate(7deg)scale(1)}}@keyframes feature-typing{0%{opacity:.35;transform:translateY(1px)}to{opacity:1;transform:translateY(-2px)}}@keyframes feature-device-screen-in{0%{opacity:0}to{opacity:1}}
