/* Real CRM demo framed as a laptop; notification examples live in a phone. */
#tour .app-perspective.device-stage{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:38px;align-items:end;width:min(1380px,100%,calc((100svh - 300px)*1.78 + 286px));padding:4px 18px 0;perspective:none}
#tour .device-stage>.scene-caption{grid-column:1/-1;padding:5px 0 0;font-size:9px;line-height:1.5;letter-spacing:.7px}
#tour .story-layout{gap:16px;padding:18px 0 12px}
#tour .narrative{max-width:1270px;grid-template-columns:62px 1.2fr 1fr;gap:22px}
#tour .narrative-detail>p{font-size:12px;line-height:1.6;max-width:400px}
#tour .action-line p{font-size:11px;line-height:1.5}
#tour .story-controls{max-width:1270px}
#tour .chapter-list button{font-size:10px}
#tour .chapter-list button span{font-size:11px}
#tour #play-state{font-size:10px;width:100px}
.crm-device-laptop{position:relative;min-width:0;padding:14px 10px 21px;background:linear-gradient(135deg,#52514e,#1c1d1c 22%,#343532 80%,#62625d);border:1px solid #73736b;border-radius:18px 18px 9px 9px;margin:0 0 19px;box-shadow:0 22px 36px -23px #24251c70,inset 0 0 0 2px #131412}
.crm-device-laptop:before{content:'';position:absolute;top:5px;left:50%;width:4px;height:4px;border-radius:50%;background:#161d1d;box-shadow:0 0 0 1px #77786e}
.crm-device-laptop:after{content:'';position:absolute;height:14px;bottom:-13px;left:-3.5%;right:-3.5%;background:linear-gradient(#b8b9b1,#777b72 40%,#393e37);border-radius:2px 2px 50% 50%/2px 2px 10px 10px;box-shadow:0 16px 20px -9px #20241a45}
.crm-laptop-brand{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:6px;letter-spacing:2px;color:#bbbcb2;pointer-events:none}
.crm-laptop-notch{position:absolute;bottom:-4px;left:42%;right:42%;height:5px;background:linear-gradient(#343a32,#8b8e83);border-radius:0 0 8px 8px;z-index:2;pointer-events:none}
#tour .crm-device-laptop>.app-window.crm-frame{border:0;border-radius:5px;box-shadow:none;transform:none}
.crm-device-phone{position:relative;width:248px;max-width:100%;padding:10px 8px;background:linear-gradient(125deg,#696963,#171916 24%,#2d3029 80%,#7b7b70);border:1px solid #828477;border-radius:38px;box-shadow:0 23px 35px -20px #30352780,inset 0 0 0 2px #141611;isolation:isolate}
.crm-device-phone:before{content:'';position:absolute;left:-3px;top:90px;width:3px;height:40px;border-radius:2px 0 0 2px;background:#585c50}
.crm-phone-screen{position:relative;border-radius:29px;overflow:hidden;background:#f5f5ef;padding:0 12px 17px}
.crm-phone-status{height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 9px;color:#262b20;font-size:9px;font-weight:600}
.crm-phone-status:after{content:'';position:absolute;top:9px;left:50%;width:67px;height:16px;transform:translateX(-50%);border-radius:20px;background:#171a14}
.crm-phone-home{position:absolute;bottom:7px;left:36%;right:36%;height:3px;background:#24291d;border-radius:3px}
.crm-device-phone .notification-preview{background:none;box-shadow:none;border:0}
.crm-device-phone .notification-preview-top{display:block;padding:10px 2px 14px;border:0;font-size:20px;font-weight:500;letter-spacing:-.6px;color:#27251f}
.crm-device-phone .notification-preview-top small{display:block;font-size:9px;letter-spacing:1.4px;color:#8b6a38;margin-bottom:7px}
.crm-device-phone .notification-stream{padding:0;display:grid;gap:9px}
.crm-device-phone .notification-row{grid-template-columns:25px minmax(0,1fr);gap:9px;align-items:start;padding:14px 10px;border:1px solid #e0e2d6;border-radius:14px;background:#fff;opacity:1;transform:translateX(0);transition:opacity .6s,transform .6s,border-color .6s,box-shadow .6s}
.crm-device-phone .notification-row.is-current{opacity:1;transform:translateX(-3px);border-color:#b9a06d;box-shadow:0 4px 16px #7c694917}
.crm-device-phone .notification-icon{width:25px;height:25px;border:0;border-radius:7px;background:#eee8db;animation:none}
.crm-device-phone .notification-icon svg{width:16px;height:16px}
.crm-device-phone .notification-channel{font-size:8px;letter-spacing:.7px;line-height:1.4;display:block}
.crm-device-phone .notification-row h3{font-size:15px;line-height:1.3;margin:5px 0 4px;letter-spacing:-.3px}
.crm-device-phone .notification-row p{font-size:12px;line-height:1.5;color:#686b5e}
.crm-device-phone .notification-signal{display:none}
.crm-device-phone .notification-preview-note{padding:13px 0 3px;text-align:center;border:0;font-size:9px;line-height:1.5;color:#77796d;margin:0}
.crm-mobile-notifications{display:none;background:#fafaf7;color:#27251f;padding:60px 7%;border-top:1px solid #d9dad2}
.crm-mobile-notifications h2{font:400 48px/1.05 CRMSerif,Georgia,serif;letter-spacing:-1px;margin:18px 0}
.crm-mobile-notifications h2 em{color:#8b6a38;font-weight:400}
.crm-mobile-notifications p{font-size:16px;line-height:1.8;max-width:430px;color:#6d6c65}
.crm-mobile-notifications .crm-device-phone{width:300px;justify-self:center;margin-top:12px}
.crm-mobile-notifications .crm-device-phone .notification-row{padding:17px 12px;grid-template-columns:28px minmax(0,1fr)}
.crm-mobile-notifications .crm-device-phone .notification-channel{font-size:10px}
.crm-mobile-notifications .crm-device-phone .notification-row h3{font-size:18px}
.crm-mobile-notifications .crm-device-phone .notification-row p{font-size:14px;line-height:1.5;margin:0}
.crm-mobile-notifications .crm-device-phone .notification-preview-note{font-size:11px;margin:0}
.atelier-tour-intro .device-intro-note{max-width:360px;font-size:13px;line-height:1.7;margin-top:12px;color:#6d6c65}
@media(max-width:1050px),(max-height:760px){
 #tour .app-perspective.device-stage{display:block;width:min(1100px,96%,calc((100svh - 270px)*1.7143));padding:4px 16px 0}
 #tour .device-stage>.scene-caption{padding-top:12px}
 .crm-mobile-notifications{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px}
 #tour .narrative{grid-template-columns:48px 1.2fr 1fr;gap:14px}
 #tour .narrative-detail>p{font-size:11px}
}
@media(max-width:750px){
 #tour .story-pin{min-height:700px}
 #tour .app-perspective.device-stage{width:100%;padding:0 7px}
 #tour .story-layout{padding:14px 0 12px;gap:17px}
 #tour .narrative{grid-template-columns:35px 1fr;gap:9px}
 #tour .narrative-detail>p{font-size:11px;line-height:1.6}
 #tour .action-line p{font-size:10px}
 #tour .narrative h2{font-size:27px}
 #tour .chapter-list button{font-size:9px}
 #tour .chapter-list button span{font-size:8px;letter-spacing:-.3px}
 #tour .chapter-list{gap:2px}
 #tour .device-stage>.scene-caption{font-size:7px;letter-spacing:.3px;line-height:1.5}
 .crm-device-laptop{padding:10px 6px 16px;border-radius:12px 12px 6px 6px;margin-bottom:15px}
 .crm-device-laptop:before{top:3px;width:3px;height:3px}
 .crm-laptop-brand{font-size:5px;bottom:4px}
 .crm-device-laptop:after{height:10px;bottom:-9px;left:-2%;right:-2%}
 .crm-mobile-notifications{grid-template-columns:1fr;padding:55px 7%;gap:22px}
 .crm-mobile-notifications h2{font-size:46px}
 .crm-mobile-notifications .crm-device-phone{width:min(310px,100%)}
 .atelier-tour-intro .device-intro-note{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.crm-device-phone .notification-row{transition:none;transform:none!important;opacity:1}}
.motion-paused .crm-device-phone .notification-row{transition:none;transform:none;opacity:1}