@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/hanken-grotesk-latin.woff2)format("woff2")}:root{--demo-bg:#fff;--demo-ground:#f3f3f3;--demo-ink:#232323;--demo-muted:#555;--demo-border:#e4e4e4;--demo-mint:#a1ffcb;--demo-soft-mint:#e3ffed;--demo-dark:#232323;--demo-dark-ink:#f7f7f4;--demo-page:1200px;--demo-gutter:clamp(20px, 4vw, 48px);--demo-radius:16px}*{box-sizing:border-box}body{background:var(--demo-bg);color:var(--demo-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-family:Hanken Grotesk,Helvetica Neue,Arial,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}img{max-width:100%;height:auto;display:block}::selection{background:var(--demo-mint);color:var(--demo-ink)}:focus-visible{outline:2px solid var(--demo-ink);outline-offset:4px}.demo-page{overflow:clip}.demo-header{max-width:var(--demo-page);padding:20px var(--demo-gutter);justify-content:space-between;align-items:center;gap:18px;margin:0 auto;display:flex}.demo-brand{letter-spacing:-.02em;align-items:center;gap:9px;font-weight:600;display:flex}.demo-brand img{border-radius:8px;width:28px;height:28px}.demo-header-links{align-items:center;gap:20px;font-size:13px;font-weight:500;display:flex}.demo-header-links a{border-bottom:1px solid var(--demo-ink);padding-bottom:2px}.demo-hero{max-width:var(--demo-page);padding:clamp(40px, 7vw, 92px) var(--demo-gutter) clamp(48px, 8vw, 104px);grid-template-columns:minmax(0,1fr) minmax(280px,360px);align-items:center;gap:clamp(36px,8vw,110px);margin:0 auto;display:grid}.demo-hero-copy{min-width:0}.demo-kicker{color:var(--demo-muted);letter-spacing:.13em;text-transform:uppercase;margin:0;font-size:11px;font-weight:600}.demo-hero h1{letter-spacing:-.065em;margin:14px 0 20px;font-size:clamp(56px,9vw,112px);font-weight:600;line-height:.9}.demo-lede{max-width:41ch;color:var(--demo-muted);letter-spacing:-.012em;margin:0;font-size:clamp(18px,2vw,23px);line-height:1.35}.demo-meta{color:var(--demo-muted);flex-wrap:wrap;gap:6px 18px;margin-top:22px;font-size:12px;display:flex}.demo-meta span+span{padding-left:18px;position:relative}.demo-meta span+span:before{content:"";background:var(--demo-mint);border-radius:50%;width:4px;height:4px;position:absolute;top:.55em;left:0}.demo-hero-actions{flex-wrap:wrap;align-items:center;gap:18px;margin-top:28px;display:flex}.demo-button{background:var(--demo-ink);min-height:46px;color:var(--demo-dark-ink);border-radius:999px;justify-content:center;align-items:center;padding:0 20px;font-size:14px;font-weight:600;display:inline-flex}.demo-button:hover{background:#000}.demo-link{border-bottom:1px solid;padding-bottom:2px;font-size:13px;font-weight:500;display:inline-block}.demo-stage{flex-direction:column;align-items:center;display:flex;position:relative}.demo-stage:before{content:"";background:var(--demo-soft-mint);z-index:0;border-radius:42% 58% 52% 48%;position:absolute;inset:8% 2% 6%}.demo-phone{z-index:1;background:#171717;border-radius:48px;width:min(100%,318px);padding:9px;position:relative;box-shadow:0 24px 70px #0000002e,0 3px 10px #0000001f}.demo-phone-screen{aspect-ratio:1206/2622;background:#fff;border-radius:39px;overflow:hidden}.demo-phone-screen img{object-fit:cover;width:100%;height:100%;animation:.22s ease-out both demo-fade}@keyframes demo-fade{0%{opacity:.55}to{opacity:1}}.demo-caption{z-index:1;color:var(--demo-muted);text-align:center;margin:16px 0 0;font-size:11px;position:relative}.demo-tour{max-width:var(--demo-page);padding:0 var(--demo-gutter) clamp(64px, 8vw, 110px);margin:0 auto}.demo-tour-top{border-bottom:1px solid var(--demo-border);justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:18px;display:flex}.demo-counter{letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:7px 0 0;font-size:clamp(26px,4vw,44px);font-weight:600;line-height:1}.demo-play{color:var(--demo-muted);align-items:center;gap:12px;font-size:11px;display:flex}.demo-play-button{border:1px solid var(--demo-border);background:var(--demo-bg);cursor:pointer;border-radius:999px;min-height:34px;padding:0 13px;font-size:12px;font-weight:600}.demo-play-button:hover{background:var(--demo-ground)}.demo-chapters{scrollbar-width:none;gap:4px;padding:18px 0;display:flex;overflow-x:auto}.demo-chapters::-webkit-scrollbar{display:none}.demo-chapters button{min-height:40px;color:var(--demo-muted);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:7px;flex:none;align-items:center;gap:12px;padding:0 13px;font-size:13px;font-weight:500;display:flex}.demo-chapters button:hover{background:var(--demo-ground)}.demo-chapters button.is-active{background:var(--demo-mint);color:var(--demo-ink);font-weight:600}.demo-chapters small{font-variant-numeric:tabular-nums;font-size:10px}.demo-detail{border-radius:var(--demo-radius);background:var(--demo-ground);grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:clamp(24px,5vw,64px);padding:clamp(24px,4vw,42px);display:grid}.demo-story h2{letter-spacing:-.045em;margin:8px 0 0;font-size:clamp(30px,4vw,54px);font-weight:600;line-height:1}.demo-user-story{letter-spacing:-.012em;max-width:46ch;margin:18px 0 0;font-size:clamp(17px,2vw,21px);line-height:1.35}.demo-notes{max-width:52ch;color:var(--demo-muted);margin:12px 0 18px;font-size:14px;line-height:1.55}.demo-navigation{flex-direction:column;justify-content:space-between;gap:24px;display:flex}.demo-screen-tabs{flex-direction:column;gap:2px;display:flex}.demo-screen-tabs button{width:100%;color:var(--demo-muted);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;align-items:baseline;gap:12px;padding:9px 10px;font-size:12px;line-height:1.3;display:flex}.demo-screen-tabs button:hover{background:#ffffffb3}.demo-screen-tabs button.is-active{background:var(--demo-bg);color:var(--demo-ink);font-weight:600}.demo-screen-tabs span{color:var(--demo-muted);font-variant-numeric:tabular-nums;flex:0 0 22px;font-size:10px}.demo-arrows{color:var(--demo-muted);align-items:center;gap:12px;font-size:12px;display:flex}.demo-arrows button{border:1px solid var(--demo-border);background:var(--demo-bg);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:inline-flex}.demo-arrows button:hover{background:var(--demo-mint);border-color:#0000}.demo-arrows span{text-align:center;font-variant-numeric:tabular-nums;min-width:70px}.demo-notes-section{max-width:var(--demo-page);padding:0 var(--demo-gutter) clamp(64px, 8vw, 110px);background:var(--demo-border);border-top:1px solid var(--demo-border);border-bottom:1px solid var(--demo-border);grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0 auto;display:grid}.demo-note{background:var(--demo-bg);padding:clamp(24px,3vw,38px) clamp(18px,3vw,30px)}.demo-note h2{letter-spacing:-.03em;margin:9px 0 10px;font-size:clamp(22px,2.4vw,30px);font-weight:600;line-height:1.08}.demo-note p{color:var(--demo-muted);margin:0 0 14px;font-size:14px;line-height:1.55}.demo-note .demo-kicker{color:var(--demo-muted)}.demo-cta{max-width:var(--demo-page);padding:clamp(36px, 5vw, 64px) var(--demo-gutter);background:var(--demo-dark);color:var(--demo-dark-ink);border-radius:var(--demo-radius);margin:0 auto clamp(56px,7vw,92px)}.demo-cta h2{letter-spacing:-.045em;max-width:16ch;margin:12px 0;font-size:clamp(30px,4.6vw,58px);font-weight:600;line-height:.98}.demo-cta p:not(.demo-kicker){color:#f7f7f4ad;max-width:46ch;margin:0 0 24px;font-size:15px}.demo-cta .demo-kicker{color:#f7f7f48c}.demo-cta .demo-button{background:var(--demo-mint);color:var(--demo-ink)}.demo-cta .demo-button:hover{background:#8df5b6}.demo-footer{max-width:var(--demo-page);padding:0 var(--demo-gutter) 46px;color:var(--demo-muted);margin:0 auto;font-size:12px}.demo-footer p{margin:0 0 7px}.demo-footer a{border-bottom:1px solid}@media (width<=900px){.demo-hero{grid-template-columns:1fr;gap:40px}.demo-hero-copy{min-width:0}.demo-stage{order:1}.demo-phone{width:min(100%,292px)}.demo-stage:before{inset:10% 12% 8%}.demo-detail,.demo-notes-section{grid-template-columns:1fr}.demo-tour-top{flex-direction:column;align-items:flex-start}.demo-play{justify-content:space-between;width:100%}}@media (width<=560px){.demo-header-links{gap:10px;font-size:12px}.demo-header-links a:last-child{display:none}.demo-hero{padding-top:26px}.demo-hero h1{letter-spacing:-.05em;font-size:clamp(48px,13.5vw,62px)}.demo-stage:before{inset:7% 4%}.demo-phone{width:min(100%,272px)}.demo-tour{padding-bottom:56px}.demo-detail{padding:20px}.demo-chapters button{padding:0 10px}.demo-chapters small{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.demo-phone-screen img{animation:none}}