.app-story{height:760vh;position:relative;margin:50px 0}.story-sticky{position:sticky;top:0;height:100svh;min-height:600px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;padding:30px 60px;background:#e9eedf;border-radius:36px}.story-copy h2{font-size:clamp(32px,4vw,54px);max-width:470px;margin:22px 0}.story-count{font-size:12px;letter-spacing:2px}.story-controls{display:flex;gap:12px;margin-top:28px}.story-controls button{border:0;display:grid;place-items:center;padding:0;line-height:1;border-radius:50%;background:#b2ef76;color:#183d33;width:48px;height:48px;font-size:23px;cursor:pointer}.story-dots{display:flex;gap:8px;margin-top:30px}.story-dots span{height:4px;flex:1;background:#ccd8c1}.story-dots .active{background:#183d33}.story-phone{width:320px;height:650px;background:#183d33;border:6px solid #293c32;border-radius:46px;padding:5px;box-shadow:0 30px 65px #183d3320;justify-self:center;overflow:hidden;position:relative}.story-display{height:100%;border-radius:35px;background:#f7f9f2;overflow:hidden;position:relative}.story-status{height:42px;padding:13px 22px 0;font-size:12px;font-weight:bold;display:flex;justify-content:space-between;position:relative;z-index:2}.story-status:after{content:'';position:absolute;width:90px;height:23px;border-radius:20px;background:#14251b;left:calc(50% - 45px);top:7px}.story-screen{padding:14px 20px;animation:screen-in .4s ease both;height:calc(100% - 42px);overflow:hidden}.story-screen h3{font-size:23px;margin:15px 0}.story-screen .mini-title{font-size:12px}.story-screen .row{font-size:12px;padding:15px 0}.story-screen .row strong{font-size:12px}.story-screen p{font-size:12px}.story-screen .button{font-size:12px;width:100%;padding:15px 10px;border-radius:16px}.story-display.green-screen{background:#b2ef76}.story-dial{position:relative;width:260px;height:270px;left:50%;transform:translateX(-50%)}.story-dial svg{width:100%;height:100%}.story-number{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:66px;letter-spacing:-4px}.story-number small{font-size:12px;letter-spacing:0;margin-top:4px}.score-caption{text-align:center;margin-bottom:26px;font-size:13px}.story-launch{display:flex;flex-direction:column;align-items:center;justify-content:center;height:85%;gap:30px}.story-launch strong{font-size:48px;letter-spacing:-3px}.app-tile{width:85px;height:85px;background:#b2ef76;border-radius:24px;display:grid;place-items:center;font-size:60px}.loan-figure{font-size:39px;letter-spacing:-2px;margin:18px 0}.loan-card{background:white;border-radius:18px;padding:16px;margin:14px 0}.loan-card strong{font-size:13px}.debt-scroll{animation:debt-up .65s ease both}.story-broker{display:flex;gap:10px;align-items:center;padding:16px 10px;background:white;border-radius:14px;margin:10px 0;font-size:12px}.story-broker small{display:block;font-size:10px;margin-top:5px}.story-broker .avatar-mini{font-size:12px}.story-broker.selected{outline:2px solid #183d33;background:#e5f5d7}.story-success{display:flex;align-items:center;justify-content:center;flex-direction:column;height:80%;text-align:center}.success-ring{width:95px;height:95px;border-radius:50%;background:#b2ef76;display:grid;place-items:center;font-size:48px;animation:stamp .5s ease both}.story-footnote{font-size:11px;color:#52695c;max-width:330px;margin-top:22px}.story-start{display:inline-block;margin-top:20px}.phone-bottom{height:4px;width:100px;border-radius:5px;background:#183d33;position:absolute;bottom:9px;left:calc(50% - 50px)}@keyframes screen-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes debt-up{from{transform:translateY(90px);opacity:.5}to{transform:translateY(0);opacity:1}}@keyframes stamp{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@media(max-height:760px) and (min-width:761px){.story-phone{transform:scale(.85)}.story-sticky{min-height:550px}}@media(max-width:760px){.app-story{height:720vh}.story-sticky{grid-template-columns:1fr;gap:8px;padding:20px 18px;align-content:center;min-height:640px;border-radius:24px}.story-copy h2{font-size:27px;margin:8px 0;max-width:none}.story-count{font-size:10px}.story-controls{position:absolute;right:18px;top:20px;margin:0}.story-controls button{width:32px;height:32px;font-size:18px}.story-dots{margin-top:12px}.story-phone{width:270px;height:525px;border-radius:38px}.story-display{border-radius:28px}.story-screen{padding:8px 14px}.story-dial{width:220px;height:215px}.story-number{font-size:56px}.score-caption{margin-bottom:15px}.story-screen h3{font-size:20px;margin:10px 0}.story-broker{padding:10px;margin:8px 0}.story-screen .row{padding:11px 0}.story-footnote{display:none}.story-screen .loan-card{margin:8px 0;padding:12px}.loan-figure{font-size:30px;margin:10px 0}}@media(prefers-reduced-motion:reduce){.story-screen,.debt-scroll,.success-ring{animation:none}}
.app-story{overflow-anchor:none}.story-sticky *{overflow-anchor:none}@media(max-width:760px) and (max-height:740px){.story-sticky{min-height:0;padding:12px;gap:0}.story-copy h2{font-size:22px;margin:5px 0}.story-phone{zoom:.82}.story-dots{margin-top:6px}}@media(max-width:760px) and (max-height:600px){.story-phone{zoom:.70}.story-count{font-size:9px}}
/* Keep both screens in the same frame during a compositor-only transition. */
.story-screen{position:relative;padding:0;animation:none}.scene-page{position:absolute;inset:0;padding:14px 20px;overflow:hidden;transform-origin:50% 50%;backface-visibility:hidden}.story-display{transition:background-color 580ms cubic-bezier(.22,1,.36,1)}.story-dots span{transition:background-color .35s ease}.scene-page .debt-scroll{animation:none}.scene-page .success-ring{animation:stamp .65s .18s cubic-bezier(.22,1,.36,1) both}@media(max-width:760px){.story-screen{padding:0}.scene-page{padding:8px 14px}}@media(prefers-reduced-motion:reduce){.story-display,.story-dots span{transition:none}.scene-page .success-ring{animation:none}}
/* Long reading holds before advancing to the next screen. */
.app-story{height:2200svh}.story-screen{pointer-events:none;user-select:none}.dash-passport{background:#b2ef76;padding:22px;border-radius:20px;display:flex;flex-direction:column;gap:10px;margin:20px 0}.dash-passport>strong{font-size:50px;letter-spacing:-2px}.dash-passport small{font-size:13px;letter-spacing:0}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px}.dash-grid>div{background:#e9eedf;padding:15px;border-radius:15px;line-height:2}.mock-close{font-size:25px;width:30px;height:30px;text-align:center;border-radius:50%}.tap-target{transition:background-color .25s,box-shadow .25s,transform .25s}.show-tap .tap-target{box-shadow:0 0 0 4px #77b94066;background:#95d758!important;color:#183d33!important;transform:scale(.97)}.phone-scroll{will-change:transform}.replica-card{background:white;border:1px solid #dce5d4;border-radius:16px;padding:14px;margin:12px 0}.replica-person{display:flex;align-items:center;gap:10px;font-size:12px}.replica-person small{display:block;font-size:10px;margin-top:5px}.replica-person>span:last-child{margin-left:auto}.replica-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:10px;border-top:1px solid #e9eedf;padding-top:10px}.replica-bottom strong{display:block;margin-top:5px}.mock-profile{padding:8px;border-radius:8px}.mock-search{padding:12px;background:white;border:1px solid #dce5d4;border-radius:12px;font-size:11px;margin:12px 0}.mock-filters{display:flex;gap:8px;font-size:9px}.mock-filters span{padding:8px;border-radius:20px;background:#e9eedf}.mock-filters span:first-child{background:#183d33;color:white}.request-pill{background:#e9eedf;border-radius:12px;padding:12px;font-size:12px;line-height:1.5}.mock-agreement{padding:16px;border-radius:12px;font-size:12px;background:#e9eedf}.mock-button{margin-top:18px}.story-screen .check-row{font-size:12px}.story-controls button:hover{background:#95d758;transform:scale(1.05)}.story-controls button:active{transform:scale(.94)}.story-controls button:disabled{opacity:.35}.story-controls button:focus-visible{outline:3px solid #183d33;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tap-target{transition:none}.phone-scroll{will-change:auto}}
/* Match the app's type, surfaces and compact controls. */
.story-display{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f6f2;-webkit-font-smoothing:antialiased}.story-screen h3{font-weight:600;letter-spacing:-.045em}.story-screen .button{border-radius:14px;min-height:44px;font-weight:600;letter-spacing:-.02em;line-height:1.3}.story-screen .mini-title{font-weight:650}.story-portrait{width:42px;height:42px;flex:none;border-radius:50%;background-image:url('../assets/broker-portraits.png');background-size:600% 400%;background-repeat:no-repeat}.replica-card{border-radius:18px;box-shadow:0 3px 10px #183d3306}.replica-person strong{font-weight:650}.dashboard-next{padding:14px 0;font-size:11px;display:flex;flex-direction:column;gap:6px}.mock-app-nav{display:flex;justify-content:space-between;padding:12px 4px;border-top:1px solid #dce2d8;font-size:9px}.tap-target{position:relative;overflow:hidden;isolation:isolate;transition:background-color .22s,color .22s}.show-tap .tap-target{box-shadow:none;transform:none;background:#95d758!important;color:#183d33!important}.tap-target:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:#ffffff30;opacity:0;transition:opacity .22s}.show-tap .tap-target:after{opacity:1}.story-utility{display:flex;gap:20px;margin-top:22px}.story-utility button{background:none;border:0;padding:10px 0;color:#183d33;font:inherit;font-size:13px;cursor:pointer;text-decoration:none}.story-utility button:hover{color:#527b38}.story-utility button:focus-visible{outline:2px solid #183d33;outline-offset:4px}@media(max-width:760px){.story-utility{margin-top:4px;gap:18px}.story-utility button{font-size:11px;padding:6px 0}.dashboard-next{padding:10px 0}.dash-passport{padding:16px;margin:12px 0;gap:6px}.dash-passport>strong{font-size:42px}.dash-grid>div{padding:10px}.story-phone .loan-card{margin:8px 0}.mock-app-nav{padding:9px 0}.story-portrait{width:36px;height:36px}}@media(prefers-reduced-motion:reduce){.tap-target,.tap-target:after{transition:none}}
.real-app-frame{width:320px;height:669px;justify-self:center;overflow:hidden;flex:none}.real-app-frame iframe{width:384px;height:802px;border:0;transform:scale(.833333);transform-origin:top left;pointer-events:none}@media(max-width:760px){.real-app-frame{width:270px;height:564px}.real-app-frame iframe{transform:scale(.703125)}}@media(min-width:761px) and (max-height:760px){.real-app-frame{width:275px;height:575px}.real-app-frame iframe{transform:scale(.716146)}}@media(max-width:760px) and (max-height:740px){.real-app-frame{width:225px;height:470px}.real-app-frame iframe{transform:scale(.585938)}}@media(max-width:760px) and (max-height:600px){.real-app-frame{width:190px;height:397px}.real-app-frame iframe{transform:scale(.494792)}}
/* Match the approved homepage contact shadow beneath the walkthrough phone. */
.real-app-frame{position:relative;overflow:visible;isolation:isolate}
.real-app-frame::after{content:"";position:absolute;left:50%;bottom:-8px;width:130%;max-width:400px;height:28px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(24,38,30,.65) 0%,rgba(24,38,30,.4) 32%,rgba(24,38,30,.16) 58%,transparent 78%);filter:blur(5px);pointer-events:none;z-index:-1}
.real-app-frame::after{max-width:min(400px,calc(100vw - 24px))}
.real-app-viewport{width:100%;height:100%;overflow:hidden}

/* Original slim indicators, with invisible tap areas. */
.story-dots{gap:8px;align-items:center}
.story-dots button{position:relative;display:block;flex:1;min-width:0;height:4px;min-height:0;border:0;padding:0;background:#ccd8c1;cursor:pointer;border-radius:0;box-shadow:none;transition:background .18s}
.story-dots button::before{content:"";position:absolute;inset:-12px 0;background:transparent}
.story-dots button.active{background:#183d33}
.story-dots button:hover{background:#537b43}
.story-dots button:focus-visible{outline:2px solid #183d33;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.story-dots button{transition:none}}

.story-top{position:absolute;top:48px;left:60px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#b2ef76;color:#183d33;cursor:pointer;z-index:2;transition:background .18s}
.story-top:hover{background:#95d758}
.story-top:focus-visible{outline:2px solid #183d33;outline-offset:4px}
@media(max-width:760px){.story-top{top:28px;left:28px;width:32px;height:32px}.story-controls{right:18px}.story-copy{padding-top:44px}}

/* The walkthrough owns its progress; the outer page remains normal flow. */
.app-story{height:auto!important}.app-story .story-sticky{position:relative}
@media(max-width:760px){.app-story{margin-inline:12px}.app-story .story-sticky{padding-inline:12px}}