:root{--accent:#2f3d90;--pale:#d0d5f2;--bg:#f5f6fa;--ink:#111;--line:#e0e0e0}*{box-sizing:border-box}body{margin:0;font-family:Poppins,Arial,sans-serif;color:var(--ink);background:var(--bg)}button,input,textarea,select{font:inherit}button{cursor:pointer}.app{min-height:100vh;display:grid;grid-template-columns:98px minmax(0,1fr)}.sidebar{background:#fafafa;display:flex;align-items:center;flex-direction:column;gap:10px;padding-top:22px;z-index:3}.logo{font:bold italic 28px Georgia;color:var(--accent);margin-bottom:45px}.logo span{font-size:24px}.nav{width:71px;height:43px;display:grid;place-items:center;color:#999;font-size:23px;border-radius:5px}.nav.active{background:#333;color:#fff}main{min-width:0;min-height:100vh;display:flex;flex-direction:column}header{height:101px;flex:none}.steps{height:81px;max-width:680px;margin:auto;display:flex;justify-content:space-between;align-items:flex-start;padding-top:20px}.step{min-width:80px;text-align:center;color:var(--accent);font-size:9px;font-weight:600}.bubble{width:24px;height:24px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;margin:auto auto 3px;font-size:10px;font-weight:500}.step.done .bubble{background:var(--accent);color:white}.track{height:20px;background:var(--pale);overflow:hidden}.track-fill{height:100%;width:20%;background:var(--accent);border-radius:0 20px 20px 0;transition:width calc(850ms / var(--playback-speed, 1)) cubic-bezier(.22,1,.36,1)}.stage{flex:1;position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;padding:70px 42px 90px}.scene{width:100%;max-width:1200px;animation:arrive calc(.55s / var(--playback-speed, 1)) ease both}.scene.center{text-align:center}.scene h1{font-size:36px;line-height:1.25;margin:0 0 15px;font-weight:600}.scene .sub{font-size:16px;font-weight:300;margin:0 auto 25px;max-width:800px}.form{width:min(553px,100%);margin:0 auto;text-align:left}.field{display:block;margin:0 0 22px;font-size:14px;font-weight:500}.field input,.field textarea,.field select{display:block;width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 25px;margin-top:5px;outline-color:var(--accent);font-size:14px;font-weight:400}.field textarea{height:143px;resize:vertical}.field small{display:block;color:#999;text-align:right;font-weight:400;margin-top:5px}.upload-guide{margin:80px auto 0;max-width:760px;display:flex;align-items:center;gap:70px;text-align:left}.file-card{background:white;border:1px solid var(--line);border-radius:14px;padding:35px 45px;box-shadow:0 10px 25px #1d2a6610}.file-card .file-icon{font-size:45px;color:var(--accent)}.link{color:var(--accent);font-weight:600}.dropzone{width:min(510px,100%);height:240px;margin:24px auto 18px;border:2px dashed #ccc;background:#eee;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;transition:calc(.3s / var(--playback-speed, 1))}.dropzone.dragged{border-color:var(--accent);background:#e6e9fa;transform:scale(1.02)}.dropzone .cloud{font-size:42px;line-height:1}.dropzone small{color:#999}.uploaded{width:min(510px,100%);margin:auto;border:1px solid #333;border-radius:9px;padding:17px 23px;text-align:left;background:transparent;box-shadow:0 2px 5px #0002}.uploaded strong{color:var(--accent)}.uploaded small{display:block;color:#aaa;margin-left:27px}.method-grid{display:flex;gap:36px;justify-content:center;margin-top:100px}.method{width:280px;height:220px;background:#fff;border:2px solid #ddd;border-radius:20px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;transition:calc(.25s / var(--playback-speed, 1))}.method.selected,.method:hover{border-color:var(--accent);box-shadow:0 16px 35px #2f3d901f;transform:translateY(-4px)}.method .glyph{font-size:48px;color:var(--accent)}.voice-layout{display:grid;grid-template-columns:1.45fr .85fr;gap:24px;margin:-70px -42px -90px;height:calc(100vh - 101px)}.voice-left{background:#e4e7f6;padding:45px 30px;display:flex;flex-direction:column;gap:35px;min-height:0}.script-card{background:#fff;border-radius:15px;padding:42px 25px 25px;flex:1;min-height:0;display:flex;flex-direction:column;text-align:left}.script-card textarea{border:0;resize:none;flex:1;width:100%;outline:0;font-weight:500;font-size:18px;line-height:1.65}.chips-box{background:#e4ebf0;border-radius:10px;padding:14px}.chips-box small{color:#777}.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.chip{background:#fff;border:2px solid var(--accent);border-radius:7px;padding:8px 14px;font-size:13px;white-space:nowrap}.chip.dark{background:#333;color:white}.player{height:70px;background:white;border-radius:12px;display:flex;align-items:center;gap:15px;padding:0 30px}.player .line{height:3px;background:#ddd;flex:1}.player .line:before{content:'';display:block;width:15%;height:3px;background:var(--accent)}.voice-right{padding:15px 25px;min-height:0;overflow-y:auto;scroll-behavior:smooth}.tabs{display:flex;justify-content:space-around;border-bottom:4px solid #e3e6f4;margin:-15px -25px 30px}.tab{width:50%;padding:17px;text-align:center;color:#999;border:0;background:transparent}.tab.active{color:var(--accent);border-bottom:4px solid var(--accent);margin-bottom:-4px}.voice-right p{font-size:14px;color:#999;text-align:left}.voice-right textarea{width:100%;height:170px;border:0;border-radius:15px;padding:15px;resize:none}.right-chips{margin-top:15px}.right-chips .chip{font-size:13px}.create-button{margin:20px 0 0 auto;display:block;background:#999;color:white;border:0;border-radius:25px;padding:12px 35px}.voice-list{display:grid;gap:13px;text-align:left}.voice-list label{color:#999;font-size:14px}.voice-option{background:white;border:1px solid #e1e1e1;border-radius:12px;padding:15px 20px;cursor:pointer}.voice-option.active{border-color:var(--accent);color:var(--accent)}.voice-option.extra{margin-top:5px}.schedule-inputs{display:flex;justify-content:center;gap:12px;margin:30px auto}.schedule-inputs input,.schedule-inputs select{background:#fff;border:1px solid var(--line);border-radius:9px;padding:15px;color:#777}.calendar{width:315px;background:white;border-radius:12px;box-shadow:0 18px 50px #1a22591a;padding:25px;margin:0 auto;text-align:center}.calendar .month{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:20px}.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:12px}.days span{padding:7px 0;border-radius:50%}.days .muted{color:#bbb}.days .chosen{background:#aebfea;color:#fff}.calendar-foot{display:flex;justify-content:space-between;margin-top:20px;font-size:12px}.calendar-foot button{border:0;background:#aebfea;color:#fff;padding:8px 25px;border-radius:4px}.follow-choice{display:flex;justify-content:center;gap:20px;margin:30px}.follow-choice button{width:148px;padding:12px;background:#fff;border:1px solid #ddd;border-radius:10px}.follow-choice button.active{border:2px solid var(--accent)}.timeline{position:relative;width:78%;height:7px;background:#d0d5f2;margin:130px auto 0}.timeline-fill{height:100%;width:0;background:var(--accent);transition:width calc(1.2s / var(--playback-speed, 1)) ease}.timeline.ready .timeline-fill{width:100%}.timeline:before,.timeline:after{content:'';position:absolute;top:-11px;width:30px;height:30px;border-radius:50%;background:var(--accent)}.timeline:before{left:-15px}.timeline:after{right:-15px}.timeline-labels{width:82%;display:flex;justify-content:space-between;margin:25px auto;color:var(--accent)}.callback{width:330px;margin:25px 23%;padding:25px;border-radius:16px;background:white;box-shadow:0 15px 25px #0001;text-align:left;color:var(--accent)}.donut{float:right;width:100px;height:100px;border-radius:50%;background:conic-gradient(var(--accent) 25%,#afbfed 25%);display:grid;place-items:center}.donut:after{content:'';width:60px;height:60px;border-radius:50%;background:#fff}.delay{margin:35px auto 15px;display:flex;justify-content:center;align-items:center;gap:20px}.delay:before,.delay:after{content:'';width:180px;height:2px;background:#ccc}.pill{background:var(--accent);color:#fff;border-radius:22px;padding:13px 30px}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1050px;margin:30px auto;text-align:left}.review-box{background:white;border:1px solid #ddd;border-radius:10px;padding:18px 24px;min-height:55px;margin:5px 0 20px;font-size:14px}.review-label{font-size:14px;font-weight:500}.review-box.message{min-height:255px;line-height:1.65}.success{margin:100px auto;color:var(--accent)}footer{height:80px;padding:0 44px;display:flex;justify-content:space-between;align-items:center;flex:none}footer span{font-size:12px;color:#8c92a8}.actions{display:flex;gap:10px}.actions button{width:192px;height:40px;border:0;border-radius:5px;font-size:14px}.primary{background:var(--accent);color:#fff}.secondary{background:#c8c8c8;color:#333}.actions button:active,.clicked{transform:scale(.94);filter:brightness(.87)}.demo-cursor{position:fixed;z-index:10;left:55%;top:55%;width:18px;height:25px;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 2px #0005);transition:left calc(.7s / var(--playback-speed, 1)) ease,top calc(.7s / var(--playback-speed, 1)) ease,opacity calc(.2s / var(--playback-speed, 1));clip-path:polygon(0 0,0 100%,28% 75%,47% 100%,64% 92%,43% 66%,80% 64%);background:#151d44;border:1px solid white}.demo-cursor.show{opacity:1}.demo-cursor.press{transform:scale(.72)}@keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.drag-document{position:fixed;z-index:9;width:145px;height:80px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#fff;border:1px solid #cbd1e8;border-radius:9px;box-shadow:0 12px 30px #121a4f3b;color:var(--accent);font-size:30px;pointer-events:none;transform:rotate(-8deg)}.drag-document small{font-size:10px}.drag-document.moving{transition:left calc(1s / var(--playback-speed, 1)) cubic-bezier(.2,.75,.2,1),top calc(1s / var(--playback-speed, 1)) cubic-bezier(.2,.75,.2,1),transform calc(1s / var(--playback-speed, 1));transform:rotate(0deg) scale(.8)}
.sidebar{gap:0}.sidebar .logo{width:54px;height:27px;margin:2px 0 61px;overflow:hidden;position:relative}.sidebar .logo img{position:absolute;width:73.3px;height:73.3px;max-width:none;left:-9.65px;top:-23.14px}.sidebar .nav{height:50px;margin-bottom:3px}.sidebar .nav img{display:block;max-width:25px;max-height:25px;width:auto;height:auto}.sidebar .nav.active img{width:18px;height:18px}.steps{transform:translateX(-49px)}.bubble{border:0;position:relative}.bubble img{display:block;width:23.99px;height:23.99px}.bubble span{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent)}.step.done .bubble{background:transparent}.step.done .bubble span{color:white}.track{width:calc(100% + 98px);margin-left:-98px}.track-fill{border-radius:0 20px 20px 0}
.guide-scene .sub{max-width:720px;margin:25px auto 20px}.template-preview{width:min(797px,100%);height:118px;margin:0 auto;background:#fff;border-radius:10px;padding:31px 10px;overflow:hidden;display:flex;align-items:center}.template-preview img{width:100%;height:auto;display:block}.guide-caption{font-size:16px;font-weight:300;margin:19px 0 20px}.template-button{height:40px;border:0;background:#333;color:#fff;border-radius:5px;padding:0 14px;display:inline-flex;align-items:center;gap:15px;font-size:16px;font-weight:500}.template-button img{width:21px;height:19.27px}
.template-preview{position:relative}.template-preview:before{content:'';position:absolute;top:0;left:0;right:0;height:38px;background:#fff;z-index:1}
.dropzone .cloud{width:38px;height:38px;display:block;margin-bottom:5px}.uploaded{display:flex;align-items:center;gap:16px;height:77px;position:relative}.uploaded .file-icon{width:23px;height:29px}.uploaded small{margin-left:0}.remove-upload{border:0;background:transparent;margin-left:auto;padding:0;display:grid;place-items:center}.remove-upload img{width:27px;height:27px}.drag-document img{width:25px;height:32px}
.method-scene .sub{margin-top:24px}.method-scene .link{font-weight:300}.method-scene .method-grid{gap:69px;margin-top:44px}.method-scene .method{width:227px;height:227px;gap:28px}.method-scene .method b{font-size:27.74px;font-weight:600}.method-scene .method img{width:68px;height:60px;object-fit:contain}
.tab{display:flex;align-items:center;justify-content:center;gap:6px}.tab img{width:auto;height:14px}.play-icon{background:none;border:0;padding:0;width:28px;height:28px;display:grid;place-items:center}.play-icon img{width:24.34px;height:17.25px;transform:rotate(90deg)}.play-icon.is-playing{opacity:.55}.voice-option{display:flex;align-items:center;gap:14px}.voice-option .voice-play{width:10.44px;height:7.4px;transform:rotate(90deg)}.icon-action{width:40px;height:40px;border:0;background:none;padding:0;vertical-align:middle;margin-left:6px}.icon-action img{width:40px;height:40px}.voice-right .search{width:calc(100% - 100px)!important}
main{height:100vh;position:relative;overflow:hidden}.stage{min-height:0}footer{position:absolute;bottom:0;left:0;right:0;z-index:6;pointer-events:none}footer .actions,footer span{pointer-events:auto}.voice-layout{max-width:none;width:calc(100% + 84px);grid-template-columns:856fr 486fr}.voice-left{padding:45px 30px 80px}.voice-right{padding-bottom:90px}
.calendar .month img{width:5.23px;height:10.38px}.date-input{position:relative;display:block}.date-input input{width:250px;padding-right:50px}.date-input img{position:absolute;right:15px;top:11px;width:27px;height:27px}.select-input{position:relative}.select-input select{appearance:none;min-width:73px;padding-right:30px}.select-input img{position:absolute;width:19px;height:19px;right:8px;top:15px;pointer-events:none}.schedule-inputs>select:last-child{padding:8px 5px;background:var(--accent);color:white}
.follow-scene .follow-choice{margin-top:29px}.follow-scene .timeline{width:955px;max-width:80%;margin:175px auto 0;transform:translateX(15px);height:8px}.follow-scene .timeline:before,.follow-scene .timeline:after{display:none}.endpoint{position:absolute;top:-12px;width:32px;height:32px}.endpoint.left{left:-29px}.endpoint.right{right:-16px}.event-icon{position:absolute;top:-101px;width:93.53px;height:102.53px}.event-icon>img:first-child{display:block;width:93.53px;height:102.53px}.event-icon .symbol{position:absolute;top:24px;left:28px;width:28px;height:28px}.event-icon.phone .symbol{width:29.51px;height:32px}.event-icon.first{left:-52px}.event-icon.first-phone{left:292px}.event-icon.second{left:633px}.event-icon.second-phone{right:-45px}.follow-scene .callback{position:absolute;top:17px;left:155px;width:363.53px;height:230.53px;margin:0;padding:0;background:none;box-shadow:none}.callout-bg{width:363.53px;height:230.53px}.callout-content{position:absolute;inset:50px 35px 30px;text-align:left;color:var(--accent);font-size:14px}.callout-content b{font-weight:500}.callout-content p{font-size:13px;margin:14px 0 0}.callout-content i{display:inline-block;width:18px;height:16px;margin-right:8px;vertical-align:middle}.success-square{background:var(--accent)}.unresponsive-square{background:#afbfed}.callout-content .chart{position:absolute;top:0;right:0;width:131px;height:131px}.follow-tag{position:absolute;top:20px;left:565px;width:225.53px;height:89.53px}.follow-tag img{width:225.53px;height:89.53px}.follow-tag span{position:absolute;top:33px;left:57px;color:var(--accent);font-size:13px}.follow-scene .timeline-labels{width:955px;max-width:80%;transform:translateX(15px);margin:19px auto;font-size:14px}
.follow-schedule .sub{margin-bottom:24px}.delay-control{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 auto;width:630px;max-width:100%;height:60px}.delay-control>img{width:184px;height:12px}.delay-control label{position:relative;background:#fff;border:1px solid #e0e0e0;border-radius:10px;width:200px;height:58px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px}.delay-control select{appearance:none;background:#fff;border:1px solid #ddd;border-radius:6px;padding:7px 16px 7px 8px;font-size:11px}.delay-control .delay-caret{position:absolute;right:13px;width:7px;height:4px;pointer-events:none}.follow-timeline{width:955px;max-width:80%;height:32px;position:relative;margin:25px auto 0}.follow-timeline-line{position:absolute;left:0;right:0;top:13px;height:8px;background:#d0d5f2}.follow-timeline-fill{height:100%;background:var(--accent);animation:extend-line calc(1.2s / var(--playback-speed, 1)) ease both}.follow-timeline .pill{position:absolute;top:0;min-width:196px;font-size:14px;padding:7px 16px}.follow-timeline .pill.left{left:-16px}.follow-timeline .pill.right{right:-16px}.follow-dates{width:955px;max-width:80%;margin:10px auto 0;display:flex;justify-content:space-between;color:var(--accent);font-size:14px}.follow-schedule .schedule-inputs{margin:4px auto 0}.follow-schedule .calendar{transform:scale(.88);transform-origin:top center;margin-top:0}@keyframes extend-line{from{width:0}to{width:100%}}
.follow-schedule .follow-timeline,.follow-schedule .follow-dates{width:850px}.follow-schedule .schedule-inputs{transform:translateX(290px)}.follow-schedule .calendar{transform:translateX(190px) scale(.88)}
.review-scene .review-grid{grid-template-columns:472px 472px;gap:78px;width:1022px;max-width:none;margin:30px auto 0;transform:translateX(-17px)}.review-scene .review-box{height:56px;min-height:56px;position:relative;padding:16px 26px;margin-bottom:20px}.review-scene .review-box.message{height:274px;min-height:274px;padding:24px 26px 45px;font-size:14px;line-height:1.55}.review-scene .edit-icon{position:absolute;right:14px;top:17px;width:21px;height:21px}.review-scene .message .edit-icon{top:auto;bottom:14px}.review-scene .voice-review{display:flex;align-items:center;gap:10px;padding-top:7px;padding-bottom:7px}.review-scene .avatar{width:40px;height:40px;border-radius:50%;background:#fff;position:relative;overflow:visible;border:1px solid #ddd}.review-scene .avatar>img:first-child{width:100%;height:100%;object-fit:contain;border-radius:50%}.review-scene .avatar .check{position:absolute;right:-3px;bottom:0;width:10px;height:10px}.review-scene .dropdown-icon{margin-left:auto;width:24px;height:24px}.review-scene .schedule-inputs{justify-content:flex-start;gap:8px;margin:5px 0 20px}.review-scene .schedule-inputs input{width:250px}.review-scene .schedule-inputs .select-input select{min-width:73px}
.calendar .days{position:relative}.selection-band{position:absolute;left:0;top:calc(2 * (32px + 6px) + (32px - 22.75px) / 2);width:184.54px;height:22.75px;z-index:0}.calendar .days span{position:relative;z-index:1}.range-date .days span:nth-of-type(n+15):nth-of-type(-n+19){color:#fff}.period-toggle{width:44px;display:flex;flex-direction:column;border-radius:9px;overflow:hidden;border:1px solid #ddd;background:#fff}.period-toggle button{font-size:11px;height:24px;padding:0;border:0;background:#fff;color:#333}.period-toggle button.active{background:var(--accent);color:#fff}.review-scene{position:relative;top:16px}.review-scene .review-grid{transform:translateX(-28px)}
.follow-scene .event-icon .symbol{left:50%;top:31px;transform:translateX(-50%)}.follow-scene .event-icon.phone .symbol{top:29px}

/* Scale the complete 1440×900 design canvas uniformly in every browser viewport. */
html,body{width:100%;height:100%;overflow:hidden}body{background:#e9ebf2}.app{position:absolute;left:50%;top:50%;width:1440px;height:900px;min-height:0;grid-template-columns:98px 1342px;transform:translate(-50%,-50%) scale(var(--canvas-scale,1));transform-origin:center center;overflow:hidden;background:var(--bg)}main{width:1342px;height:900px;min-height:0;overflow:hidden}.stage{height:799px;min-height:0;flex:none}.voice-layout{height:799px}.steps{max-width:680px}.track{width:1440px;margin-left:-98px}footer{bottom:0}.review-scene .review-grid{grid-template-columns:472px 472px;gap:78px;width:1022px;transform:translateX(-28px)}
/* Page 08: the axis draws across the screen and reveals each Figma marker in order. */
.follow-scene .timeline{background:transparent}
.follow-scene .timeline-fill{width:0;transition:width calc(3.8s / var(--playback-speed, 1)) linear}
.follow-scene .timeline.ready .timeline-fill{width:100%}
.follow-scene .event-icon,.follow-scene .callback,.follow-scene .follow-tag,.follow-scene .endpoint.right{opacity:0;transform:translateY(8px);transition:opacity calc(.28s / var(--playback-speed, 1)) ease,transform calc(.28s / var(--playback-speed, 1)) ease}
.follow-scene .timeline.ready .event-icon,.follow-scene .timeline.ready .callback,.follow-scene .timeline.ready .follow-tag,.follow-scene .timeline.ready .endpoint.right{opacity:1;transform:translateY(0)}
.follow-scene .timeline.ready .event-icon.first{transition-delay:.08s}
.follow-scene .timeline.ready .event-icon.first-phone{transition-delay:1.25s}
.follow-scene .timeline.ready .callback{transition-delay:1.48s}
.follow-scene .timeline.ready .event-icon.second{transition-delay:2.55s}
.follow-scene .timeline.ready .follow-tag{transition-delay:2.78s}
.follow-scene .timeline.ready .event-icon.second-phone{transition-delay:3.5s}
.follow-scene .timeline.ready .endpoint.right{transition-delay:3.7s}
.follow-scene .chart-percent{position:absolute;z-index:1;color:#fff;font-size:12.79px;font-weight:300;line-height:1}
.follow-scene .chart-percent.success{top:21px;right:9px}
.follow-scene .chart-percent.unresponsive{top:106px;right:53px}
.follow-scene .chart-percent.success{margin:0}
@keyframes timeline-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.follow-scene .timeline.ready .event-icon,.follow-scene .timeline.ready .callback,.follow-scene .timeline.ready .follow-tag,.follow-scene .timeline.ready .endpoint.right{animation:timeline-reveal calc(.28s / var(--playback-speed, 1)) ease both;transition:none}
.follow-scene .timeline.ready .event-icon.first{animation-delay:.08s}
.follow-scene .timeline.ready .event-icon.first-phone{animation-delay:1.25s}
.follow-scene .timeline.ready .callback{animation-delay:1.48s}
.follow-scene .timeline.ready .event-icon.second{animation-delay:2.55s}
.follow-scene .timeline.ready .follow-tag{animation-delay:2.78s}
.follow-scene .timeline.ready .event-icon.second-phone{animation-delay:3.5s}
.follow-scene .timeline.ready .endpoint.right{animation-delay:3.7s}
.follow-scene .event-icon>img:first-child{transform:scaleY(-1)}
.follow-scene .event-icon .symbol{left:calc(50% - 3px)}
.follow-scene .event-icon{top:-106px}
.follow-scene .event-icon .symbol{left:calc(50% - 5px)}
/* Complete vector bubbles exported from Figma, positioned above the axis. */
.follow-scene .event-icon{top:-111px}
.follow-scene .event-icon>img:first-child{transform:none}