/* Shared presentation rules; product colors and components stay intact. */
:root{--device-shell:#302a3c;--device-edge:#756b80;--device-radius:38px}
.ob-device,.phone,.home-phone,.cooking-phone{
 padding:6px;border:2px solid var(--device-edge);border-radius:var(--device-radius);
 background:var(--device-shell);box-shadow:0 28px 65px #3520441e,5px 8px 0 #b7b2c7;overflow:hidden;
}
.ob-device:after,.phone:after,.home-phone:after,.cooking-phone:after{
 content:'';position:absolute;top:11px;left:38%;width:25%;height:11px;
 background:#25212e;border-radius:15px;z-index:40;pointer-events:none;
}
.ob-app,.original-app,.calendar-app,.cooking-app,.reward-app{border-radius:30px;overflow:clip}
.ob-screen-scroll{padding-top:34px;padding-bottom:76px}
.ob-invite-screen .ob-glass{padding:13px 14px;margin:10px 0}
.ob-invite-screen .ob-toggle{margin-top:10px}
.ob-invite-screen .ob-demo-label{display:none}
.family-demo{background:#302640!important;color:#fff!important;border:1px solid #302640!important;font-family:var(--landing-font);font-weight:500;line-height:1.5;box-shadow:0 4px 12px #30264014;transition:background .2s}
.family-demo:hover{background:#473657!important;border-color:#473657!important}
.family-demo:focus-visible{outline:3px solid #a798d5;outline-offset:4px}
.ob-copy,.home-heading,.cooking-heading{top:14%;right:8%;left:auto;width:41%}
.ob-copy p,.home-heading p,.cooking-heading p{max-width:460px;color:#796b83;margin:0}
.home-kicker,.ob-eyebrow,.finale-kicker{font-family:var(--landing-font);font-size:13px;line-height:1.5;font-weight:600}
.home-actions,.cooking-actions{right:8%;width:41%}
@media(max-width:700px){
 .ob-copy,.home-heading,.cooking-heading{top:83px;right:6%;left:auto;width:88%;text-align:center}
 .ob-copy p,.home-heading p,.cooking-heading p{max-width:340px;margin-inline:auto}
 .home-kicker,.ob-eyebrow,.finale-kicker{font-size:11px}
 .home-actions,.cooking-actions{right:5%;width:90%;top:auto;bottom:17px;text-align:center}
}
/* Show complete recent-expense cards rather than half of the next list. */
.expense-phone{height:800px}
.expense-story .exp-fixed{display:none}
.expense-story .exp-overview{padding-top:36px;padding-bottom:82px}
.expense-story .exp-card{margin-bottom:12px}
/* Compact success receipt stays above the message composer. */
.inbox-story .keeper-chat.inbox-compact .inbox-source{padding:10px 12px;margin-bottom:8px}
.inbox-story .keeper-chat.inbox-compact .inbox-source p{font-size:13px;line-height:1.5;margin:5px 0}
.inbox-story .keeper-chat.inbox-compact .inbox-source>small{display:none}
.inbox-story .keeper-chat.inbox-compact .inbox-app-head{margin-bottom:12px}
.inbox-story .keeper-chat.inbox-compact .inbox-receipt{padding:10px;margin-top:8px}
.inbox-story .keeper-chat.inbox-compact .inbox-receipt span{display:none}
.inbox-story .keeper-chat .inbox-demo-note{display:none}
.inbox-story .keeper-chat .inbox-added{color:#98dbbd}
.ride-intro{top:14%;right:8%;width:41%;max-width:none}
.ride-intro>span{font-family:var(--landing-font);font-size:13px;font-weight:600;line-height:1.5}
.ride-intro p{max-width:460px;color:#796b83;margin:0}
@media(max-width:700px){
 .ride-intro{top:83px;right:6%;width:88%}
 .ride-intro>span{font-size:11px}
 .ride-intro p{max-width:340px;margin-inline:auto}
 .ride-intro .family-demo{position:absolute;top:calc(100svh - 138px);left:50%;transform:translateX(-50%);white-space:nowrap;margin:0}
}
@media(max-width:700px){.ob-manual-parents{display:none}}
/* Identical device proportions and stable scale across all story sections. */
.ob-device,.phone,.home-phone,.cooking-phone{width:390px!important;height:844px!important;max-width:none!important;transform-origin:50% 0}
.home-story .calendar-scroll{gap:12px}
.home-actions,.cooking-actions,.scene-demo-actions{position:absolute;right:8%;width:41%;top:65%!important;bottom:auto;z-index:20;transform:none!important}
.scene-demo-actions .family-demo{pointer-events:auto}
.ride-demo-actions{opacity:0}
.reward-demo-tabs{display:flex;gap:6px;margin:20px 0 8px;background:#efece7;padding:4px;border-radius:16px}
.reward-demo-tabs button{flex:1;font:inherit;font-size:12px;border:0;border-radius:12px;padding:10px 5px;background:none;color:#6f6b83}
.reward-demo-tabs button[aria-pressed=true]{background:#fff;color:#17152b}
.reward-demo-content{height:auto;min-height:620px}
.reward-demo-content .reward-view{padding-top:20px}
.reward-demo-status{padding:18px;border-radius:18px;background:#fff;line-height:1.7}
/* A close-knit, two-row family group; faces remain unobstructed. */
.ob-join-cast{width:500px;max-width:44%;height:260px;right:5%;bottom:6%}
.ob-cast-parents{left:29%;bottom:12%;width:220px;height:220px}
.ob-cast-person:nth-child(2){left:27%;bottom:0;width:110px;height:110px;z-index:3}
.ob-cast-person:nth-child(3){left:53%;right:auto;bottom:0;width:110px;height:110px;z-index:3}
.ob-cast-person:nth-child(4){left:10%;bottom:17%;width:140px;height:140px}
.ob-cast-person:nth-child(5){right:7%;bottom:17%;width:140px;height:140px}
.ob-cast-person:nth-child(6){left:0;bottom:0;width:140px;height:140px}
.ob-cast-person:nth-child(7){right:0;bottom:0;width:140px;height:140px}
@media(max-width:700px){
 .home-actions,.cooking-actions,.scene-demo-actions{top:auto!important;bottom:17px;right:5%;width:90%;text-align:center}
 .scene-demo-actions .family-demo{position:static;transform:none;white-space:nowrap;margin:0}
 .ob-join-cast{right:0;bottom:9%;width:190px;max-width:none;height:155px}
 .ob-cast-parents{left:25%;bottom:15%;width:105px;height:105px}
 .ob-cast-person:nth-child(2){left:25%;bottom:0;width:55px;height:55px}
 .ob-cast-person:nth-child(3){left:51%;bottom:0;width:55px;height:55px}
 .ob-cast-person:nth-child(4){left:5%;bottom:20%;width:68px;height:68px}
 .ob-cast-person:nth-child(5){right:3%;bottom:20%;width:68px;height:68px}
 .ob-cast-person:nth-child(6){left:-3%;bottom:0;width:68px;height:68px}
 .ob-cast-person:nth-child(7){right:-3%;bottom:0;width:68px;height:68px}
}

/* Footer-sized action space shared by every scene. */
.home-actions,.cooking-actions,.scene-demo-actions{top:auto!important;bottom:24px!important}
.reward-demo-actions{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s}
.reward-demo-actions.is-ready{opacity:1;visibility:visible;pointer-events:auto}
.home-actions>p{display:none}
@media(min-width:701px){
 :root{--section-title:clamp(32px,3.1vw,48px)}
 .home-actions,.cooking-actions,.scene-demo-actions{right:8%;width:41%}
}
@media(max-width:700px){
 .home-actions,.cooking-actions,.scene-demo-actions{bottom:17px!important}
}