.walkthrough.how-it-works{background:var(--paper);height:600svh;padding:0;scroll-margin-top:0}.walkthrough-stage{background:var(--paper);flex-direction:column;height:100svh;min-height:0;padding:104px max(40px,50vw - 590px) 28px;display:flex;position:sticky;top:0;overflow:hidden}.walkthrough-top{z-index:1;justify-content:space-between;align-items:center;gap:20px;display:flex}.walkthrough-heading{letter-spacing:0;font-size:15px;font-weight:500;line-height:1.4}.walkthrough-main{flex:1;grid-template-columns:1.1fr 1fr;align-items:center;gap:60px;min-height:0;display:grid}.walkthrough-copy-window{min-width:0;overflow:hidden}.walkthrough-copy-track{will-change:transform;align-items:center;transition:transform .75s cubic-bezier(.22,1,.36,1);display:flex}.walkthrough-chapter{flex:0 0 100%;min-width:0;padding:28px 4px}.walkthrough-chapter h3{letter-spacing:-.055em;white-space:pre-line;margin:0 0 24px;font-size:clamp(42px,4.8vw,68px);font-weight:400;line-height:1.12}.walkthrough-description{color:#586d77;max-width:31ch;margin:0;font-size:clamp(22px,2vw,28px);line-height:1.55}.walkthrough-device{isolation:isolate;flex-direction:column;justify-content:center;align-items:center;min-width:0;height:100%;display:flex;position:relative}.walkthrough-device .preview{padding:0}.walkthrough-device .preview:before{display:none}.walkthrough-device .phone{zoom:1;width:352px;height:727px;box-shadow:none;transform:none}.walkthrough-device .conversation-header{height:auto}.walkthrough-device .message{font-size:22px}.walkthrough-device .phone-status{color:#141414}.walkthrough-conversation{scrollbar-width:thin;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;min-height:0;padding:10px 8px 16px;overflow-y:auto}.walkthrough-messages{flex-direction:column;align-items:flex-start;width:100%;animation:.45s both walkthrough-arrive;display:flex}.demo-image-card{color:#344f3e;background:#edf1eb;border-radius:18px;flex-direction:column;align-items:center;width:90%;margin:16px 0 0;padding:14px 8px;font-size:15px;display:flex}.demo-pung-tiles{justify-content:center;gap:0;width:100%;display:flex}.demo-pung-tiles img{object-fit:contain;width:33.333%;height:110px}.demo-image-card figcaption{text-align:center;margin-top:8px}.walkthrough button:focus-visible{outline-offset:-3px;outline:3px solid #5187ec}@keyframes walkthrough-arrive{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media (min-width:761px) and (max-height:1000px){.walkthrough-device .phone{zoom:.78}}@media (min-width:761px) and (max-height:820px){.walkthrough-device .phone{zoom:.66}.walkthrough-chapter h3{font-size:clamp(40px,4.5vw,60px)}}@media (min-width:761px) and (max-height:700px){.walkthrough-stage{padding-top:90px}.walkthrough-device .phone{zoom:.55}.walkthrough-chapter h3{font-size:38px}.walkthrough-description{font-size:22px}}@media (max-width:1000px){.walkthrough-main{gap:28px}.walkthrough-stage{padding-inline:30px}}@media (max-width:760px){.walkthrough-stage{padding:76px 20px 16px}.walkthrough-top{display:none}.walkthrough-main{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr;gap:14px}.walkthrough-chapter{padding:0 2px}.walkthrough-chapter h3{white-space:normal;max-width:20ch;margin:0 0 8px;font-size:32px}.walkthrough-description{max-width:36ch;font-size:17px;line-height:1.45}.walkthrough-device{justify-content:center;width:100%;height:100%;min-height:0;padding:0}.walkthrough-device .phone{zoom:var(--walkthrough-phone-scale,.85);border-radius:56px;flex:none;width:352px;height:727px}.walkthrough-device .phone-screen{border-radius:52px}.walkthrough-device .phone:before{border-radius:53px}.walkthrough-device .phone:after{border-radius:51px}.walkthrough-device .phone-status{padding-left:28px;padding-right:20px}.walkthrough-device .dynamic-island{width:104px;height:30px}.walkthrough-device .phone-signals{gap:5px}.walkthrough-device .phone-signals svg{width:15px}.walkthrough-device .message{font-size:22px}}@media (prefers-reduced-motion:reduce){.walkthrough-copy-track{transition:none}.walkthrough-messages{animation:none}}.demo-poll{color:#a05b05;--poll-tint:#fff3e2;--poll-color:#ffba59;width:94%;margin-top:16px}.demo-poll:first-child{margin-top:0}.demo-poll-options{flex-direction:column;align-items:flex-start;gap:5px;margin-top:10px;display:flex}.demo-poll-options button{text-align:left;background:var(--poll-tint);color:#a05b05;border-radius:999px;justify-content:space-between;align-items:center;gap:22px;min-width:68%;max-width:100%;padding:12px 14px 12px 18px;font-family:Inter,sans-serif;font-size:17px;font-weight:600;line-height:1.25;transition:background .15s;display:flex}.demo-poll-options button>span:first-child{overflow-wrap:anywhere}.demo-poll-options button[aria-pressed=true]{background:var(--poll-color);color:#513000}.demo-poll-voters{flex-shrink:0;align-items:center;display:flex}.demo-poll-circle{border:2px solid var(--poll-color);border-radius:50%;width:23px;height:23px}.demo-poll-avatar{color:#244968;background:#e8edf5;border:2px solid #fff;border-radius:50%;place-items:center;width:25px;height:25px;font-size:9px;font-weight:600;display:grid}.walkthrough-device .demo-poll-title{max-width:100%;margin:0}.demo-poll-add-choice{color:#a05b05;cursor:default;background:0 0;width:fit-content;padding:8px 18px;font-size:13px;display:block}.walkthrough-device .walkthrough-messages>.answer:first-child{margin-top:0}@media (max-height:599px) and (min-aspect-ratio:1){.walkthrough-stage{padding-top:82px;padding-bottom:12px}.walkthrough-main{grid-template-rows:1fr;grid-template-columns:1fr 1fr;gap:20px}.walkthrough-device .phone{zoom:.4}.walkthrough-chapter h3{font-size:25px}.walkthrough-description{font-size:17px}}html[data-theme=dark] .walkthrough-description{color:#b3c2c1}@media (max-width:780px){.walkthrough[data-reveal=pending] .walkthrough-stage{opacity:0;visibility:hidden;pointer-events:none}.walkthrough[data-reveal=visible] .walkthrough-stage{opacity:1;visibility:visible}}@media (max-width:780px) and (prefers-reduced-motion:no-preference){.walkthrough[data-reveal] .walkthrough-stage{transition:opacity .55s,visibility}.walkthrough[data-reveal=pending] .walkthrough-stage{transition:opacity .55s,visibility 0s .55s}.walkthrough[data-reveal] .walkthrough-main{transition:transform .55s cubic-bezier(.22,1,.36,1)}.walkthrough[data-reveal=pending] .walkthrough-main{transform:translateY(22px)}.walkthrough[data-reveal=visible] .walkthrough-main{transform:none}}@media (min-width:781px){:root{--desktop-phone-scale:1;--desktop-demo-header:76px}.hero.hero{max-width:1240px;min-height:calc(100svh - var(--desktop-demo-header));grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:45px;padding:8px 46px 16px}.walkthrough .walkthrough-stage{width:100%;max-width:1240px;padding:var(--desktop-demo-header) 46px 0;margin-inline:auto}.walkthrough .walkthrough-top{top:calc(var(--desktop-demo-header) + 12px);position:absolute;left:46px}.walkthrough .walkthrough-main{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:45px;padding:8px 0 16px}.hero>.preview,.walkthrough-device .preview{padding:8px 0 0}.hero .phone,.walkthrough-device .phone{zoom:var(--desktop-phone-scale);border-radius:56px;width:352px;height:727px}.hero .phone-screen,.walkthrough-device .phone-screen{border-radius:52px}.hero .phone:before,.walkthrough-device .phone:before{border-radius:53px}.hero .phone:after,.walkthrough-device .phone:after{border-radius:51px}.hero .phone-status,.walkthrough-device .phone-status{padding-left:28px;padding-right:20px}.hero .dynamic-island,.walkthrough-device .dynamic-island{width:104px;height:30px}.hero .phone-signals,.walkthrough-device .phone-signals{gap:5px}.hero .phone-signals svg,.walkthrough-device .phone-signals svg{width:15px}.hero .message,.walkthrough-device .message{font-size:22px}}@media (min-width:781px) and (max-height:880px){:root{--desktop-phone-scale:.82}}@media (min-width:781px) and (max-height:740px){:root{--desktop-phone-scale:.72;--desktop-demo-header:66px}}@media (min-width:781px) and (max-height:650px){:root{--desktop-phone-scale:.62}}@media (min-width:781px) and (max-height:540px){:root{--desktop-phone-scale:.48}}@media (min-width:781px) and (max-width:1100px){.hero .phone,.walkthrough-device .phone{zoom:min(var(--desktop-phone-scale),.82)}}
