@import url('/studio/20261031-personas/phone.css');
.proposal-ribbon{padding:8px 16px;text-align:center;background:#e8effb;color:#3e5575;font-size:11px}
/* Preserve the complete 3:2 source photograph: no zoom and no object-fit crop. */
body .hero{height:auto;min-height:0;max-height:none;aspect-ratio:3/2;max-width:1500px;margin:0 auto;border-radius:20px}
body .hero-photo{width:100%;height:100%;object-fit:contain;object-position:center;transform:none!important;animation:none!important}
body .hero-content{width:43%;max-width:600px;padding-top:clamp(60px,8vw,150px);padding-bottom:0;margin-left:5%}
body .hero h1{font-size:clamp(45px,5.8vw,84px)}
body .hero-content>p{max-width:310px}
body .hero-note{display:none}
body .hero-bottom{bottom:40px;left:5%;right:auto}
body .hero-scroll{margin-left:30px}
body .hero:before{background:linear-gradient(90deg,#09253b55,transparent 52%)}
.phone-story{height:225vh;position:relative;background:#edf2fa;border-top:1px solid #e1e9f3;border-bottom:1px solid #e1e9f3;margin-top:60px;scroll-margin-top:0}
.phone-pin{position:sticky;top:88px;min-height:680px;height:calc(100svh - 88px);max-height:900px;max-width:1220px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:35px 50px;gap:55px;overflow:hidden}
.phone-copy h2{font-size:clamp(36px,4vw,58px);line-height:1.1}
.phone-copy>p{max-width:340px;margin-top:25px;color:#526780;font-size:17px}
.phone-steps{display:flex;flex-direction:column;margin-top:32px;gap:5px}
.phone-steps button{display:flex;align-items:center;gap:15px;border:0;background:none;text-align:left;border-radius:9px;color:#61738b;padding:12px 10px;font-size:16px;font-weight:550;transition:color 180ms,background 180ms}
.phone-steps button>span{font-size:11px;color:#8092ab}
.phone-steps button[aria-pressed=true]{background:#fff;color:#164ce6}
.phone-steps button[aria-pressed=true]>span{color:#164ce6}
.phone-copy p.phone-story-text{font-size:13px;min-height:44px;margin-top:20px}
.phone-play{border:0;border-bottom:1px solid #93a7c3;background:transparent;padding:8px 0;display:flex;align-items:center;gap:25px;color:#164ce6;font-size:13px;font-weight:650}
.phone-copy>small{display:block;font-size:10px;color:#697a91;margin-top:18px}
.phone-stage{position:relative;display:grid;place-items:center;min-height:620px;isolation:isolate}
.phone-scale{perspective:1100px;position:relative;z-index:1}
.phone-halo{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,#d2e1ff 0,#e3ecfb 55%,transparent 72%);z-index:0}
.phone-stage .phone-object{transform:rotateY(-24deg) rotateX(9deg) rotateZ(-10deg)}
.phone-base-note{position:absolute;bottom:-10px;font-size:11px;color:#657c9c;letter-spacing:.01em}
.phone-stage svg{max-width:100%;flex-shrink:0}
.phone-stage .phone-screen{font-family:DM,Arial,sans-serif}
.phone-stage .balance-label{text-transform:none;letter-spacing:0}
.phone-stage .bank-row>div{line-height:1.2}
.phone-stage .phone-head>div{line-height:1.25}
.phone-stage .phone-head small,.phone-stage .bank-row small{line-height:1.3}
.phone-stage .bank-row{padding-top:7px;padding-bottom:7px}
.phone-stage .movement-heading{margin-top:10px}
@media(min-width:1600px){body .hero{margin-left:auto;margin-right:auto}}
@media(min-width:761px) and (max-width:1050px){body .hero-content{padding-top:60px}body .hero-content>p{font-size:15px;max-width:280px}body .hero-actions{flex-wrap:wrap;gap:18px;margin-top:22px}body .hero h1{font-size:50px}.hero-caption{display:none}.phone-pin{padding:30px;gap:10px}.phone-stage{transform:scale(.85);transform-origin:center}.phone-copy h2{font-size:40px}}
@media(max-width:760px){
 .proposal-ribbon{font-size:9px;padding:7px 8px}.header{position:sticky}
 body .hero{display:flex;flex-direction:column;aspect-ratio:auto;height:auto;min-height:0;max-height:none;margin:0 12px;border-radius:18px;background:#102c43}
 body .hero:before{display:none}
 body .hero-photo{position:relative;order:2;inset:auto;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;z-index:0}
 body .hero-content{order:1;width:100%;max-width:none;margin:0;padding:32px 28px 30px}
 body .hero h1{font-size:43px;line-height:1.08;max-width:320px;margin-top:18px}body .hero h1 br{display:none}body .hero h1 em:before{content:' '}
 body .hero-content>p{font-size:14px;max-width:300px;margin-top:18px}
 body .hero-actions{gap:20px;margin-top:25px;flex-wrap:wrap}
 body .hero-actions .button{min-height:47px;font-size:12px;padding:0 17px}
 body .hero-actions .text-link{font-size:12px}
 body .hero-bottom{position:relative;order:3;inset:auto;padding:13px 20px}.hero-caption{display:none}body .hero-scroll{margin:0;width:100%;justify-content:space-between}
 .phone-story{height:235vh;margin-top:35px;scroll-margin-top:0}
 .phone-pin{top:72px;height:calc(100svh - 72px);min-height:660px;max-height:850px;display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:28px 24px 12px}
 .phone-copy{width:100%;max-width:440px;text-align:center}.phone-copy .eyebrow{display:none}.phone-copy h2{font-size:32px;line-height:1.12}.phone-copy>p:not(.phone-story-text){font-size:13px;margin:12px auto 0;line-height:1.45;max-width:270px}
 .phone-steps{flex-direction:row;justify-content:center;gap:4px;margin-top:16px}.phone-steps button{padding:8px 10px;font-size:11px;gap:0;min-height:38px}.phone-steps button>span{display:none}
 .phone-copy p.phone-story-text{margin:9px auto 0;font-size:11px;min-height:18px;max-width:330px;line-height:1.3}
 .phone-play{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);white-space:nowrap;font-size:11px;z-index:3}
 .phone-copy>small{display:none}.phone-stage{min-height:0;flex:1;width:100%;display:grid;place-items:center;margin-top:5px;margin-bottom:33px}
 .phone-scale{transform:scale(.64);transform-origin:center;position:absolute}.phone-halo{width:310px;height:310px}.phone-base-note{display:none}
}
@media(max-width:370px){body .hero h1{font-size:38px}body .hero-content{padding:28px 22px}.phone-pin{padding-left:15px;padding-right:15px}.phone-copy h2{font-size:29px}.phone-scale{transform:scale(.6)}}
@media(prefers-reduced-motion:reduce){.phone-story{height:auto}.phone-pin{position:relative;top:0}.phone-stage .phone-object{transform:none!important}}

/* Recovered from the first proposal: a wrapping ribbon and scroll-linked cards. */
.phone-art{position:relative;width:500px;height:620px;isolation:isolate}
.phone-art .phone-scale{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.demo-ring{position:absolute;left:50%;top:61%;width:495px;height:205px;border:36px solid #2364f1;border-radius:50%;transform:translate(-50%,-50%) rotate(-24deg);pointer-events:none}
.ring-back{z-index:1;box-shadow:inset 0 -7px 1px #0a40b7,0 10px 0 #9ec1ff}
.ring-front{z-index:3;border-color:transparent transparent #2a68f1 transparent;clip-path:inset(64% 0 0 0)}
.motion-receipt{position:absolute;z-index:4;background:#fff;border:1px solid #e9eff8;border-radius:17px;display:flex;align-items:center;padding:14px;gap:10px;box-shadow:0 18px 48px #24406a20;min-width:220px;pointer-events:none}
.motion-receipt small{font-size:10px;color:#667a91;display:block}
.motion-receipt b{display:block;margin:4px 0;font-size:20px;font-weight:650;color:#173552;letter-spacing:-.5px}
.motion-receipt div>span{font-size:9px;color:#728398}
.receipt-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#edf7f1;color:#168260;font-size:22px}
.receipt-expense .receipt-symbol{color:#c34551;background:#fff0f0}
.receipt-status{margin-left:auto;background:#eef8f3;border-radius:50%;display:grid;place-items:center;width:19px;height:19px;color:#168260;font-size:11px}
.receipt-income{left:-6px;top:86px}
.receipt-expense{right:-8px;bottom:112px;opacity:0}
.motion-currency{position:absolute;z-index:4;left:0;bottom:49px;border:1px solid #e0e8f1;background:white;border-radius:15px;padding:13px 16px;display:grid;grid-template-columns:25px auto;gap:4px 10px;box-shadow:0 12px 32px #17417818;pointer-events:none}
.motion-currency img{width:23px;height:16px;object-fit:contain;align-self:center;border-radius:3px}
.motion-currency b{font-size:13px}.motion-currency span{grid-column:1/3;font-size:10px;color:#718197}
@media(min-width:761px) and (max-width:1050px){.phone-art{transform:scale(.89)}}
@media(max-width:760px){.phone-art{position:absolute;transform:scale(.59);transform-origin:center}.phone-art .phone-scale{transform:translate(-50%,-50%)}.phone-halo{width:300px;height:300px}}
@media(max-width:370px){.phone-art{transform:scale(.55)}}
@media(prefers-reduced-motion:reduce){.demo-ring{transform:translate(-50%,-50%) rotate(-10deg)!important}.motion-receipt,.motion-currency{transform:none!important}}