:root{color-scheme:light;--ink:#172d3f;--blue:#2952e3;--muted:#526777}*{box-sizing:border-box}body{margin:0;background:#fffdf8;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}header,main,footer{max-width:1240px;margin:auto;padding-inline:36px}header{display:flex;justify-content:space-between;align-items:center;padding-block:28px;border-bottom:1px solid #e5e8e9}.brand{display:flex;gap:10px;align-items:center;font-size:38px;font-weight:800;letter-spacing:-3px;color:var(--blue)}.brand>span{font-size:19px;letter-spacing:-.7px;color:var(--ink)}.brand small{font-weight:400}.back{font-size:13px;font-weight:600}.intro{text-align:center;padding:70px 0 40px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.7px;color:var(--blue)}h1{font-size:clamp(44px,6vw,78px);letter-spacing:-4px;line-height:1.04;margin:22px 0}h1 em{font-family:Georgia,serif;color:var(--blue);font-weight:400}.lead{font-size:17px;line-height:1.7;color:var(--muted)}.journey{padding:24px;border:1px solid #dae0e6;border-radius:24px;background:#f1f4f8}.controls{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:37px;margin-bottom:25px}.demo-label{font-size:10px;letter-spacing:1px;font-weight:650;display:flex;align-items:center;gap:8px}.demo-label i{width:7px;height:7px;border-radius:50%;background:#368060}button{border:1px solid #c1cedb;background:white;border-radius:30px;padding:9px 14px;color:var(--ink);font:600 12px system-ui;cursor:pointer}button:hover{background:#e3eaff}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.track{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:start}.step{min-width:0}.step-label{font-size:10px;letter-spacing:1.2px;font-weight:700;display:flex;gap:10px;align-items:center;margin-bottom:14px}.step-label>span{display:grid;place-items:center;width:27px;height:27px;border:1px solid #bdc9d7;border-radius:50%;font-size:10px;letter-spacing:0}.scene{height:345px;border-radius:13px;overflow:hidden;border:1px solid #cad5df;box-shadow:0 7px 16px #172d3f08;background:white;transition:transform .6s,box-shadow .6s,border-color .6s}.step.active .scene{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 15px 28px #2952e319}.step.active .step-label>span{background:var(--blue);color:white;border-color:var(--blue)}.chrome{display:flex;justify-content:space-between;padding:12px;background:#f9fafc;font-size:9px;color:#526777;border-bottom:1px solid #e5e8ec}.chrome>span:first-child{letter-spacing:2px;color:#acb8c7}.browser-body{padding:18px;background:#edf3ff;height:100%}.mini-logo{font-size:18px;font-weight:800;letter-spacing:-1px}.scene h2{font-size:23px;line-height:1.12;letter-spacing:-.9px;margin:13px 0 18px}.fake-field{background:#fff;border:1px solid #ced8e7;border-radius:5px;padding:8px 10px;margin-bottom:8px}.fake-field>span{display:block;font-size:9px;color:#536578;margin-bottom:4px}.fake-field strong{display:block;font-size:11px;font-weight:500}.fake-submit{display:flex;justify-content:space-between;background:var(--blue);color:#fff;padding:10px 12px;border-radius:5px;font-size:11px;font-weight:650}.receipt{display:block;font-size:10px;color:#276247;margin-top:11px}.connector{padding-top:180px;text-align:center;color:#657892;font-size:23px}.inbox-top{display:flex;justify-content:space-between;padding:18px 16px;font-size:16px;font-weight:700;border-bottom:1px solid #e1e8df}.badge{font-size:9px;background:#e0efd8;padding:5px 8px;border-radius:20px;color:#315d24}.mail{display:flex;gap:10px;padding:14px 16px;background:#eff7e9;align-items:center}.mail strong{font-size:11px;display:block}.mail small{font-size:9px;display:block;margin-top:5px;color:#526777}.mail-icon{background:#d5e8c9;border-radius:9px;padding:8px}.message{padding:18px 16px}.tag{font-size:8px;letter-spacing:1px;color:#346127}.message h2{margin:9px 0}.message p{font-size:11px;line-height:1.6;margin:0}dl{font-size:10px;margin:15px 0 0}dl>div{display:flex;justify-content:space-between;gap:5px;margin:8px 0}dt{color:#526777}dd{margin:0}.inbox-bottom{padding:8px 16px;font-size:10px;color:#346127;border-top:1px solid #e1e8df}.reply{padding:19px;background:#fff1d0}.reply-top{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:700}.avatar{display:grid;place-items:center;width:37px;height:37px;background:#ffe2a0;border-radius:50%;font-size:10px}.reply-top small{display:block;font-size:9px;font-weight:400;margin-top:5px}.reply-bubble{background:white;border-radius:0 13px 13px 13px;margin-top:22px;padding:18px;font-size:12px;line-height:1.55;box-shadow:0 5px 15px #7e5b1110}.reply-bubble p{margin:12px 0}.human{margin-top:18px;font-size:10px;font-weight:600}.human>span{display:inline-block;margin-right:6px;color:#346127}.step h3{font-size:20px;letter-spacing:-.6px;margin:21px 0 9px}.step>p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}.progress{display:flex;gap:5px;justify-content:center;margin-top:27px}.progress span{width:23px;height:4px;background:#c7d2df;border-radius:4px}.progress .on{background:var(--blue)}.caption{text-align:center;font-size:10px;color:#526777;line-height:1.7;margin:15px 0 0}.next{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:65px 0}.next h2{font-size:34px;letter-spacing:-1.4px;margin:12px 0}.next p{font-size:14px;line-height:1.8;max-width:630px;color:var(--muted)}.cta{flex-shrink:0;background:var(--blue);color:white;padding:17px 20px;border-radius:9px;font-size:13px;font-weight:650}.cta span{margin-left:17px}footer{display:flex;justify-content:space-between;border-top:1px solid #e1e7ed;padding-block:23px;font-size:11px;color:var(--muted)}@media(max-width:800px){header,main,footer{padding-inline:20px}.track{grid-template-columns:1fr;gap:0;max-width:430px;margin:auto}.connector{padding:14px;transform:rotate(90deg)}.controls{align-items:flex-start;flex-direction:column}.scene{height:345px}.intro{padding:44px 0 25px}h1{letter-spacing:-2px}.lead{font-size:15px}.journey{padding:20px}.step>p{font-size:14px}.next{flex-direction:column;align-items:flex-start;gap:12px;padding:40px 0}.next h2{font-size:30px}.back{max-width:110px;text-align:right;line-height:1.5}.brand>span{font-size:15px}.progress{display:none}footer{gap:25px;line-height:1.5}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.step.active .scene{transform:none}}
.browser-body{height:calc(100% - 36px)}.step.active .mail,.step.active .reply-bubble,.step.active .receipt{animation:arrive .65s ease both}@keyframes arrive{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#play{background:var(--blue);color:white;border-color:var(--blue);font-size:14px;padding:12px 18px}#replay{font-size:14px;padding:12px 16px}.controls{position:sticky;top:0;z-index:5;background:#f1f4f8;padding-block:12px;margin-top:-12px;border-bottom:1px solid #d6dfe9}.controls>div{display:flex;gap:8px}.journey-status{font-size:14px;line-height:1.6;color:#344d64;margin:0 0 24px}.step{scroll-margin-top:85px}.intro{padding-top:35px;padding-bottom:20px}h1{font-size:clamp(38px,5vw,60px)}@media(max-width:800px){.step{scroll-margin-top:115px}.intro{padding-top:25px}.lead{margin-bottom:10px}}
/* A pinned scene whose progress is controlled entirely by the visitor's scroll. */
.scroll-hint{font-size:14px;color:#344d64}.controls{position:static;flex-direction:row;align-items:center}.scroll-stage{width:100%}.scroll-driven{height:230vh;padding:0;position:relative;background:transparent;border:0}.scroll-driven .scroll-stage{position:sticky;top:16px;background:#f1f4f8;border:1px solid #dae0e6;border-radius:24px;padding:24px;overflow:hidden}.scroll-driven .track{display:block;position:relative;height:385px;max-width:none;margin:0}.scroll-driven .step{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;gap:0 44px;align-content:center;will-change:transform,opacity}.scroll-driven .scene{grid-column:2;grid-row:1/4;width:100%;max-width:430px;height:345px;align-self:center;transform:none!important;box-shadow:0 12px 28px #172d3f12;border-color:#cad5df}.scroll-driven .step-label{grid-column:1;align-self:end;margin:60px 0 0;font-size:12px}.scroll-driven .step h3{grid-column:1;font-size:clamp(26px,3vw,40px);line-height:1.1;margin:20px 0}.scroll-driven .step>p{grid-column:1;font-size:16px;line-height:1.8;max-width:380px}.scroll-driven .connector{display:none}.scroll-driven .active .mail,.scroll-driven .active .reply-bubble,.scroll-driven .active .receipt{animation:none}.scroll-driven .progress{display:flex;margin-top:8px}.scroll-driven .journey-status{font-size:14px;margin:0 0 14px}.scroll-driven .caption{font-size:12px}.scroll-driven .controls{margin:0 0 15px;padding:0 0 15px;gap:12px}.scroll-driven .step-label>span{background:var(--blue);color:white}.scroll-driven .progress span{width:45px}.scroll-driven .scene *{transition:none}
@media(max-width:800px){.scroll-driven{height:250vh}.scroll-driven .scroll-stage{padding:18px;top:8px}.scroll-driven .controls{align-items:flex-start;flex-direction:column;gap:8px}.scroll-driven .track{height:490px}.scroll-driven .step{display:flex;flex-direction:column;gap:0}.scroll-driven .step-label{align-self:flex-start;margin:0 0 12px}.scroll-driven .scene{height:310px;min-height:310px;max-width:430px}.scroll-driven .step h3{font-size:25px;margin:18px 0 8px}.scroll-driven .step>p{font-size:14px;line-height:1.55;max-width:none}.scroll-driven .caption{font-size:11px;line-height:1.45}.scroll-driven .browser-body{padding:12px 16px}.scroll-driven .scene h2{margin:8px 0 12px}.scroll-driven .reply{padding:15px}.scroll-driven .reply-bubble{margin-top:15px;padding:13px}.scroll-driven .human{margin-top:12px}}
@media(max-height:700px) and (max-width:800px){.scroll-driven .track{height:420px}.scroll-driven .scene{height:265px;min-height:265px}.scroll-driven .fake-field{padding:5px 8px}.scroll-driven .receipt{display:none}.scroll-driven .browser-body h2{font-size:20px}.scroll-driven .reply-bubble{font-size:11px;margin-top:8px;padding:10px}.scroll-driven .reply-bubble p{margin:8px 0}.scroll-driven .message{padding:10px 16px}.scroll-driven .inbox-top{padding:12px 16px}.scroll-driven .human{margin-top:8px}.scroll-driven .caption{display:none}.scroll-driven .controls{gap:5px;padding-bottom:8px;margin-bottom:8px}.scroll-driven .journey-status{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.scroll-hint{display:none}}
@media(min-height:701px) and (max-width:800px){.scroll-driven .scene{height:345px;min-height:345px}.scroll-driven .track{height:525px}}