/* Isolated styles for the MyPush interaction rail, integrated from experiments/block-2. */
.mypush-demo-cases{--motion:cubic-bezier(.2,.82,.25,1)}
.mypush-demo-cases{--case-rail-gutter:max(var(--side-padding),calc((100% - var(--container)) / 2));padding-block:clamp(3rem,6vw,5rem)}.mypush-demo-case-list{display:grid;width:100%;grid-auto-flow:column;grid-auto-columns:clamp(370px,34vw,455px);align-items:stretch;gap:var(--space-5);padding:0 var(--case-rail-gutter) var(--space-4);overflow-x:auto;overflow-y:visible;overscroll-behavior-inline:contain;scroll-padding-inline:var(--case-rail-gutter);scroll-snap-type:none;scrollbar-color:var(--color-teal-bright) transparent;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.mypush-demo-case-list::-webkit-scrollbar{height:8px}.mypush-demo-case-list::-webkit-scrollbar-track{margin-inline:var(--case-rail-gutter);border-radius:var(--radius-pill);background:rgba(213,248,255,.08)}.mypush-demo-case-list::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:var(--radius-pill);background:var(--color-teal-bright);background-clip:padding-box}
.mypush-demo-micro-case{min-width:0;display:grid;grid-template-rows:minmax(225px,auto) 590px;align-content:start;scroll-snap-align:none}.mypush-demo-case-copy{padding:.25rem 0 var(--space-5)}.mypush-demo-case-copy h3{max-width:12ch;color:var(--color-sky);font-size:clamp(2rem,3vw,3rem)}.mypush-demo-case-copy p{max-width:42ch;margin-top:.8rem;color:var(--color-muted-light);font-size:.9rem;line-height:1.55}.mypush-demo-case-copy p:last-child{color:var(--color-white)}
.mypush-demo-scene{position:relative;overflow:visible;display:grid;place-items:center;background:transparent}.mypush-demo-phone{position:relative;z-index:2;width:260px;height:535px;padding:7px;border:1px solid #272727;border-radius:43px;background:#050505;box-shadow:0 24px 48px rgba(0,0,0,.4)}.mypush-demo-phone::before{content:"";position:absolute;z-index:8;left:50%;top:11px;width:72px;height:22px;transform:translateX(-50%);border-radius:13px;background:#000}.mypush-demo-phone-screen{position:relative;height:100%;overflow:hidden;border-radius:35px;background:#1b2631}.mypush-demo-status{position:relative;z-index:7;height:43px;display:flex;justify-content:space-between;padding:13px 18px 0;color:#fff;font-size:9px;font-weight:750}.mypush-demo-home-bar{position:absolute;z-index:9;left:50%;bottom:8px;width:86px;height:4px;transform:translateX(-50%);border-radius:4px;background:#fff}
.mypush-demo-screen-dim{position:absolute;z-index:4;inset:0;background:rgba(8,11,14,.43);opacity:0;backdrop-filter:blur(2px)}.mypush-demo-stk-dialog{position:absolute;z-index:5;left:50%;top:50%;width:calc(100% - 28px);overflow:hidden;transform:translate(-50%,-45%) scale(.94);border:1px solid rgba(255,255,255,.72);border-radius:26px;background:rgba(244,246,248,.94);box-shadow:0 20px 48px rgba(0,0,0,.36);color:#17191d;text-align:center;opacity:0;backdrop-filter:blur(24px) saturate(1.2)}.mypush-demo-stk-dialog p{padding:25px 18px 22px;font-size:12px;font-weight:600;line-height:1.48}.mypush-demo-stk-dialog>div{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(64,70,77,.18)}.mypush-demo-stk-dialog button{height:45px;border:0;background:transparent;color:#0875e1;font-size:10px;font-weight:800}.mypush-demo-stk-dialog button+button{border-left:1px solid rgba(64,70,77,.18)}
.mypush-demo-ambient-ui{position:absolute;inset:0;padding:62px 18px 24px;background:#24303c}.mypush-demo-ambient-ui i{display:block;border-radius:16px;background:var(--gradient-brand)}.mypush-demo-ambient-ui i:first-child{height:218px}.mypush-demo-ambient-ui i:nth-child(2),.mypush-demo-ambient-ui i:nth-child(3){height:9px;margin-top:16px;background:rgba(213,248,255,.42)}.mypush-demo-ambient-ui i:nth-child(3){width:62%}
.mypush-demo-scene--compatibility{grid-template-columns:1fr 1fr;gap:16px;padding-inline:16px}.mypush-demo-feature-phone{position:relative;z-index:2;width:170px;height:360px;padding:12px;border:1px solid #272727;border-radius:28px 28px 34px 34px;background:#050505;box-shadow:0 22px 40px rgba(0,0,0,.38)}.mypush-demo-feature-screen{height:187px;position:relative;overflow:hidden;border:4px solid #000;border-radius:7px;background:#bfd2b5;color:#263126;font-family:"Courier New",monospace}.mypush-demo-feature-idle{display:grid;place-items:center;padding-top:50px}.mypush-demo-feature-idle b{font-size:23px}.mypush-demo-feature-idle span{margin-top:8px;font-size:9px}.mypush-demo-feature-dialog{position:absolute;inset:8px 5px 5px;display:grid;grid-template-rows:1fr auto;border:2px solid #344034;background:#d2dfca;opacity:0;transform:scale(.94)}.mypush-demo-feature-dialog p{padding:13px 7px;font-size:8.5px;line-height:1.4}.mypush-demo-feature-dialog>div{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #536053}.mypush-demo-feature-dialog span{padding:6px 2px;text-align:center;font-size:7px;font-weight:700}.mypush-demo-feature-dialog span+span{border-left:1px solid #536053}.mypush-demo-feature-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px 10px;margin:16px 14px 0}.mypush-demo-feature-keys i{height:14px;border-radius:7px;background:#1b1b1b}.mypush-demo-feature-keys i:nth-child(1),.mypush-demo-feature-keys i:nth-child(3){background:#143d35}.mypush-demo-phone--small{width:193px;height:405px}.mypush-demo-phone--small .mypush-demo-stk-dialog{width:calc(100% - 18px);border-radius:21px}.mypush-demo-phone--small .mypush-demo-stk-dialog p{padding:20px 11px 17px;font-size:9px}.mypush-demo-phone--small .mypush-demo-stk-dialog button{height:38px;font-size:8px}
.mypush-demo-browser-ui{position:absolute;inset:0;padding:61px 15px 20px;background:#f1f4f2}.mypush-demo-browser-bar{height:35px;display:flex;align-items:center;gap:7px;padding:0 11px;border-radius:16px;background:#dce4e2}.mypush-demo-browser-bar i:first-child{width:10px;height:10px;border-radius:50%;background:var(--color-teal-bright)}.mypush-demo-browser-bar i:last-child{width:74%;height:7px;border-radius:6px;background:#aebcba}.mypush-demo-browser-content{display:grid;gap:12px;margin-top:17px}.mypush-demo-browser-content i{height:151px;border-radius:18px;background:var(--gradient-brand)}.mypush-demo-browser-content i:nth-child(n+2){height:10px;background:#b8c8c5}.mypush-demo-browser-content i:nth-child(3){width:78%}.mypush-demo-browser-content i:nth-child(4){width:56%}
.mypush-demo-map-ui{position:absolute;inset:0;background:#d9ddcf}.mypush-demo-map-ui i{position:absolute;width:400px;height:29px;border:8px solid #f7f4e9;border-inline:0;background:#d4c9ac}.mypush-demo-map-ui i:first-child{left:-82px;top:150px;transform:rotate(32deg)}.mypush-demo-map-ui i:nth-child(2){left:-54px;top:315px;transform:rotate(-45deg)}.mypush-demo-map-ui i:nth-child(3){left:5px;top:108px;transform:rotate(78deg)}.mypush-demo-map-ui b{position:absolute;left:108px;top:200px;width:24px;height:24px;border:7px solid #247dde;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#fff}.mypush-demo-touch-point,.mypush-demo-journey-touch{position:absolute;z-index:7;width:40px;height:40px;opacity:0;pointer-events:none}.mypush-demo-touch-point{left:185px;top:437px}.mypush-demo-touch-point i,.mypush-demo-journey-touch i{position:absolute;inset:8px;border:2px solid #fff;border-radius:50%;background:rgba(57,168,187,.78);box-shadow:0 0 0 8px rgba(57,168,187,.17)}.mypush-demo-touch-point i::after,.mypush-demo-journey-touch i::after{content:"";position:absolute;inset:-10px;border:1px solid var(--color-sky);border-radius:50%;opacity:0}
.mypush-demo-social-ui{position:absolute;inset:0;background:#13181d}.mypush-demo-social-top{position:absolute;z-index:2;left:0;right:0;top:43px;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid rgba(255,255,255,.1);background:#151b20}.mypush-demo-social-top i:first-child{width:67px;height:10px;border-radius:8px;background:var(--color-sky)}.mypush-demo-social-top i:last-child{width:20px;height:20px;border:3px solid #fff;border-radius:50%}.mypush-demo-social-feed{position:absolute;left:0;right:0;top:91px;display:grid;gap:11px;padding:11px}.mypush-demo-post{padding:11px;border-radius:16px;background:#20272d}.mypush-demo-post i{display:block;height:205px;border-radius:12px;background:var(--gradient-brand)}.mypush-demo-post:nth-child(2) i{background:linear-gradient(120deg,#1e6979,#39a8bb 52%,#ffc51b)}.mypush-demo-post:nth-child(3) i{background:linear-gradient(120deg,#d71e5b,#ef6245 55%,#1e6979)}.mypush-demo-post b{display:block;width:34%;height:8px;margin-top:11px;border-radius:7px;background:#eef3f4}.mypush-demo-post span{display:block;height:7px;margin-top:8px;border-radius:6px;background:#69747a}.mypush-demo-post span:last-child{width:67%}
.mypush-demo-data-ui{position:absolute;inset:0;display:flex;align-items:end;justify-content:center;gap:11px;padding:112px 31px 105px;background:#18232e}.mypush-demo-data-ui i{width:29px;border-radius:15px 15px 5px 5px;background:var(--color-teal-bright)}.mypush-demo-data-ui i:nth-child(1){height:44%}.mypush-demo-data-ui i:nth-child(2){height:70%;background:#1e6979}.mypush-demo-data-ui i:nth-child(3){height:56%;background:var(--color-coral)}.mypush-demo-data-ui i:nth-child(4){height:84%;background:#ffc51b}.mypush-demo-journey-dialog--confirm{opacity:0}.mypush-demo-journey-touch{left:176px;top:315px}.mypush-demo-activation-result{position:absolute;z-index:5;left:50%;top:50%;width:calc(100% - 32px);padding:34px 11px;transform:translate(-50%,-45%) scale(.94);border-radius:26px;background:rgba(244,246,248,.95);box-shadow:0 20px 48px rgba(0,0,0,.36);color:#17191d;text-align:center;opacity:0}.mypush-demo-activation-result strong{font-size:16px;letter-spacing:-.02em}.mypush-demo-activation-result span{display:inline-grid;place-items:center;width:25px;height:25px;margin-left:5px;border-radius:50%;background:#3a9c70;color:#fff}
.mypush-demo-scene--compatibility.mypush-demo-is-playing .mypush-demo-feature-dialog{animation:mypush-demo-compat-feature 4.5s var(--motion) infinite}.mypush-demo-scene--compatibility.mypush-demo-is-playing .mypush-demo-phone .mypush-demo-stk-dialog{animation:mypush-demo-compat-dialog 4.5s var(--motion) infinite}.mypush-demo-scene--compatibility.mypush-demo-is-playing .mypush-demo-phone .mypush-demo-screen-dim{animation:mypush-demo-compat-dim 4.5s infinite}.mypush-demo-scene--overlay.mypush-demo-is-playing .mypush-demo-browser-content{animation:mypush-demo-browser-motion 4.4s var(--motion) infinite}.mypush-demo-scene--overlay.mypush-demo-is-playing .mypush-demo-stk-dialog{animation:mypush-demo-overlay-dialog 4.4s var(--motion) infinite}.mypush-demo-scene--overlay.mypush-demo-is-playing .mypush-demo-screen-dim{animation:mypush-demo-overlay-dim 4.4s infinite}.mypush-demo-scene--swipe.mypush-demo-is-playing .mypush-demo-touch-point{animation:mypush-demo-touch-loop 4.6s var(--motion) infinite}.mypush-demo-scene--swipe.mypush-demo-is-playing .mypush-demo-touch-point i::after{animation:mypush-demo-touch-ring 4.6s ease-out infinite}.mypush-demo-scene--swipe.mypush-demo-is-playing .mypush-demo-stk-dialog{animation:mypush-demo-swipe-dialog 4.6s var(--motion) infinite}.mypush-demo-scene--swipe.mypush-demo-is-playing .mypush-demo-screen-dim{animation:mypush-demo-swipe-dim 4.6s infinite}.mypush-demo-scene--persistent.mypush-demo-is-playing .mypush-demo-social-feed{animation:mypush-demo-feed-loop 4.8s var(--motion) infinite}.mypush-demo-scene--persistent.mypush-demo-is-playing .mypush-demo-stk-dialog{animation:mypush-demo-persistent-dialog 4.8s var(--motion) infinite}.mypush-demo-scene--persistent.mypush-demo-is-playing .mypush-demo-screen-dim{animation:mypush-demo-persistent-dim 4.8s infinite}.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-screen-dim{animation:mypush-demo-journey-dim 4.8s infinite}.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-dialog--offer{animation:mypush-demo-journey-offer 4.8s var(--motion) infinite}.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-dialog--confirm{animation:mypush-demo-journey-confirm 4.8s var(--motion) infinite}.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-activation-result{animation:mypush-demo-journey-result 4.8s var(--motion) infinite}.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-touch{animation:mypush-demo-journey-tap 4.8s infinite}.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-touch i::after{animation:mypush-demo-journey-ring 4.8s infinite}.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ui i{animation:mypush-demo-data-pulse 2s ease-in-out infinite alternate}.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ui i:nth-child(2){animation-delay:.2s}.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ui i:nth-child(3){animation-delay:.4s}.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ui i:nth-child(4){animation-delay:.6s}
@keyframes mypush-demo-compat-feature{0%,12%,100%{opacity:0;transform:scale(.94)}22%,88%{opacity:1;transform:scale(1)}}@keyframes mypush-demo-compat-dialog{0%,15%,100%{opacity:0;transform:translate(-50%,-44%) scale(.94)}25%,88%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes mypush-demo-compat-dim{0%,16%,100%{opacity:0}25%,88%{opacity:1}}
@keyframes mypush-demo-browser-motion{0%,8%{transform:translateY(0)}40%,100%{transform:translateY(-18px)}}@keyframes mypush-demo-overlay-dialog{0%,16%,100%{opacity:0;transform:translate(-50%,-44%) scale(.94)}25%,88%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes mypush-demo-overlay-dim{0%,17%,100%{opacity:0}25%,88%{opacity:1}}
@keyframes mypush-demo-touch-loop{0%,26%,100%{opacity:0;transform:translate3d(0,0,0) scale(1)}34%{opacity:1}67%,76%{opacity:1;transform:translate3d(-140px,-326px,0) scale(1)}71%{transform:translate3d(-140px,-326px,0) scale(.72)}86%{opacity:0;transform:translate3d(-140px,-326px,0)}}@keyframes mypush-demo-touch-ring{0%,66%{opacity:0;transform:scale(.5)}71%{opacity:1}80%,100%{opacity:0;transform:scale(1.9)}}@keyframes mypush-demo-swipe-dialog{0%,10%,100%{opacity:0;transform:translate(-50%,-44%) scale(.94)}18%,66%{opacity:1;transform:translate(-50%,-50%) scale(1)}69%{opacity:1;transform:translate(calc(-50% - 8px),-50%) rotate(-1deg)}72%{opacity:1;transform:translate(calc(-50% + 8px),-50%) rotate(1deg)}75%{opacity:1;transform:translate(calc(-50% - 4px),-50%)}79%,92%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0}}@keyframes mypush-demo-swipe-dim{0%,11%,100%{opacity:0}18%,92%{opacity:1}}
@keyframes mypush-demo-feed-loop{0%,8%{transform:translateY(0)}28%{transform:translateY(-150px)}34%{transform:translateY(-150px)}45%,94%{transform:translateY(-330px)}100%{transform:translateY(-350px)}}@keyframes mypush-demo-persistent-dialog{0%,31%,100%{opacity:0;transform:translate(-50%,-44%) scale(.94)}40%,93%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes mypush-demo-persistent-dim{0%,32%,100%{opacity:0}40%,93%{opacity:1}}
@keyframes mypush-demo-data-pulse{to{filter:brightness(1.24);transform:translateY(-6px)}}@keyframes mypush-demo-journey-dim{0%,7%,100%{opacity:0}13%,94%{opacity:1}}@keyframes mypush-demo-journey-offer{0%,7%,37%,100%{opacity:0;transform:translate(-50%,-44%) scale(.94)}13%,31%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes mypush-demo-journey-confirm{0%,35%,69%,100%{opacity:0;transform:translate(-50%,-44%) scale(.94)}42%,63%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes mypush-demo-journey-result{0%,67%,100%{opacity:0;transform:translate(-50%,-44%) scale(.94)}74%,93%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes mypush-demo-journey-tap{0%,23%,100%{opacity:0;transform:scale(1)}27%,32%{opacity:1}30%{transform:scale(.7)}35%,55%{opacity:0}59%,64%{opacity:1;transform:scale(1)}62%{transform:scale(.7)}68%{opacity:0}}@keyframes mypush-demo-journey-ring{0%,27%,34%,59%,66%,100%{opacity:0;transform:scale(.5)}30%,62%{opacity:1;transform:scale(1.7)}}
@media(max-width:760px){.mypush-demo-site-header{height:72px}.mypush-demo-brand{width:116px}.mypush-demo-header-divider,.mypush-demo-header-label,.mypush-demo-header-nav a:first-child{display:none}.mypush-demo-hero{padding-block:4.5rem}.mypush-demo-case-list{grid-auto-columns:min(90vw,390px);gap:var(--space-4)}.mypush-demo-micro-case{grid-template-rows:minmax(230px,auto) 540px}.mypush-demo-case-copy h3{font-size:2.35rem}.mypush-demo-scene--compatibility{gap:8px;padding-inline:8px}.mypush-demo-feature-phone{width:145px;height:325px}.mypush-demo-feature-screen{height:168px}.mypush-demo-phone--small{width:172px;height:370px}.mypush-demo-phone:not(.mypush-demo-phone--small){width:238px;height:495px}.mypush-demo-stk-dialog p{font-size:11px}.mypush-demo-touch-point{left:169px;top:405px}.mypush-demo-journey-touch{left:159px;top:290px}}
.mypush-demo-scene{justify-items:start}
.mypush-demo-scene--compatibility{grid-template-columns:auto auto;justify-content:start;gap:16px;padding-inline:0}
@media(max-width:760px){.mypush-demo-scene--compatibility{gap:8px;padding-inline:0}}

/* One clipping surface for every iPhone screen. */
.mypush-demo-micro-case,.mypush-demo-scene{contain:none}
.mypush-demo-phone{width:260px;height:535px;padding:6px;border:1px solid #242424;border-radius:43px;background:#050505;box-shadow:0 16px 30px rgba(0,0,0,.34);contain:layout paint}
.mypush-demo-phone::before{display:none}
.mypush-demo-phone-screen{position:relative;height:100%;overflow:hidden;border-radius:36px;clip-path:inset(0 round 36px);isolation:isolate;contain:paint;background:#1b2631}
.mypush-demo-phone-screen::before{content:"";position:absolute;z-index:8;top:5px;left:50%;width:72px;height:22px;transform:translateX(-50%);border-radius:13px;background:#000;pointer-events:none}
.mypush-demo-screen-dim{backdrop-filter:none}
.mypush-demo-stk-dialog{background:#f4f6f8;box-shadow:0 12px 28px rgba(0,0,0,.3);backdrop-filter:none}
@media(max-width:760px){.mypush-demo-case-list{grid-auto-columns:min(94vw,390px)}.mypush-demo-scene .mypush-demo-phone{width:225px;height:465px}.mypush-demo-feature-phone{width:125px;height:295px}.mypush-demo-feature-screen{height:150px}.mypush-demo-touch-point{left:157px;top:378px}.mypush-demo-journey-touch{left:150px;top:272px}}

/* Case separators use the same quiet rule as the JoyMobi header and footer. */
.mypush-demo-micro-case{position:relative}
.mypush-demo-micro-case:not(:last-child)::after{content:"";position:absolute;z-index:10;top:0;right:0;bottom:0;width:1px;background:var(--color-line-dark);pointer-events:none}

/* Classic iOS alert presentation, shared with the operator-story phone. */
.mypush-demo-screen-dim{background:rgba(8,11,14,.34)}
.mypush-demo-stk-dialog{left:50%;top:50%;width:calc(100% - 26px);height:auto;padding:19px 0 0;overflow:hidden;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.58);border-radius:22px;background:rgba(242,242,247,.94);box-shadow:0 14px 36px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.72);color:#17191d;text-align:center;opacity:0;backdrop-filter:blur(22px) saturate(1.12)}
.mypush-demo-stk-dialog p{position:static;padding:0 18px 18px;transform:none;color:#17191d;font-size:12px;font-weight:650;line-height:1.4;letter-spacing:-.01em;text-shadow:none}
.mypush-demo-stk-dialog p strong,.mypush-demo-stk-dialog p span{display:block}.mypush-demo-stk-dialog p strong{font-size:12.5px;font-weight:750}.mypush-demo-stk-dialog p span{margin-top:3px;font-size:11.5px;font-weight:450}
.mypush-demo-stk-dialog>div{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;border-top:1px solid rgba(60,60,67,.24)}
.mypush-demo-stk-dialog button{height:44px;display:grid;place-items:center;padding:1px 6px 0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#007aff;font-size:12px;font-weight:500;line-height:1;letter-spacing:0}
.mypush-demo-stk-dialog button+button{border-left:1px solid rgba(60,60,67,.24);background:transparent;color:#007aff;font-weight:600}

/* Background motion shares each scene's loop, then resets while the alert is hidden. */
.mypush-demo-scene--compatibility.mypush-demo-is-playing .mypush-demo-ambient-ui{animation:mypush-demo-ambient-loop 4.5s var(--motion) infinite}
.mypush-demo-scene--swipe.mypush-demo-is-playing .mypush-demo-map-ui b{animation:mypush-demo-location-loop 4.6s var(--motion) infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ui i{animation:mypush-demo-data-loop 4.8s var(--motion) infinite;transform-origin:center bottom}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ui i:nth-child(1){--data-lift:-3px}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ui i:nth-child(2){--data-lift:-7px;animation-delay:0s}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ui i:nth-child(3){--data-lift:-5px;animation-delay:0s}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ui i:nth-child(4){--data-lift:-9px;animation-delay:0s}

@keyframes mypush-demo-ambient-loop{0%,8%,96.01%,100%{transform:translateY(0)}22%,96%{transform:translateY(-7px)}}
@keyframes mypush-demo-browser-motion{0%,8%,94.01%,100%{transform:translateY(0)}24%,94%{transform:translateY(-18px)}}
@keyframes mypush-demo-compat-dialog{0%,15%,94%,100%{opacity:0;transform:translate(-50%,-50%)}25%,88%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes mypush-demo-overlay-dialog{0%,15%,94%,100%{opacity:0;transform:translate(-50%,-50%)}24%,86%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes mypush-demo-overlay-dim{0%,16%,94%,100%{opacity:0}24%,86%{opacity:1}}
@keyframes mypush-demo-location-loop{0%,9%,95.01%,100%{box-shadow:0 0 0 0 rgba(36,125,222,0)}22%,95%{box-shadow:0 0 0 10px rgba(36,125,222,.15)}}
@keyframes mypush-demo-feed-loop{0%,7%,94.01%,100%{transform:translateY(0)}33%,94%{transform:translateY(-175px)}}
@keyframes mypush-demo-swipe-dialog{0%,10%,100%{opacity:0;transform:translate(-50%,-50%)}18%,66%{opacity:1;transform:translate(-50%,-50%)}69%{opacity:1;transform:translate(calc(-50% - 6px),-50%)}72%{opacity:1;transform:translate(calc(-50% + 6px),-50%)}75%{opacity:1;transform:translate(calc(-50% - 3px),-50%)}79%,92%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes mypush-demo-persistent-dialog{0%,29%,94%,100%{opacity:0;transform:translate(-50%,-50%)}38%,88%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes mypush-demo-persistent-dim{0%,30%,94%,100%{opacity:0}38%,88%{opacity:1}}
@keyframes mypush-demo-data-loop{0%,7%,96.01%,100%{transform:translateY(0);filter:brightness(1)}22%,96%{transform:translateY(var(--data-lift));filter:brightness(1.12)}}
@keyframes mypush-demo-journey-offer{0%,7%,37%,100%{opacity:0;transform:translate(-50%,-50%)}13%,31%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes mypush-demo-journey-confirm{0%,35%,69%,100%{opacity:0;transform:translate(-50%,-50%)}42%,63%{opacity:1;transform:translate(-50%,-50%)}}
.mypush-demo-journey-touch{--journey-confirm-y:-19px;left:155px;top:284px}

@media(max-width:760px){.mypush-demo-micro-case:not(:last-child)::after{bottom:1rem}.mypush-demo-stk-dialog{padding:17px 0 0;border-radius:20px}.mypush-demo-stk-dialog p{position:static;padding:0 15px 16px;transform:none;font-size:11px}.mypush-demo-stk-dialog button{height:42px;font-size:11px}.mypush-demo-journey-touch{--journey-confirm-y:-18px;left:129px;top:246px}}

/* Full-width free-scrolling rail. Its content and scrollbar track still follow the site grid. */
.mypush-demo-case-list{width:100%;margin-inline:0;grid-auto-columns:455px;padding:0 var(--case-rail-gutter) 4rem;overflow-y:visible;scroll-padding-inline:var(--case-rail-gutter);scroll-snap-type:none;cursor:grab;touch-action:pan-x pan-y}
.mypush-demo-case-list.mypush-demo-is-dragging{cursor:grabbing;user-select:none}
.mypush-demo-case-list::-webkit-scrollbar-track{margin-inline:var(--case-rail-gutter)}

/* Outer presentation layers keep device shadows visible. Screen content clips itself. */
.mypush-demo-micro-case,.mypush-demo-scene{contain:layout}
.mypush-demo-scene{overflow:visible}
.mypush-demo-phone{contain:layout}

/* iPhone status bar drawn from native-sized indicators instead of text glyphs. */
.mypush-demo-status{height:43px;align-items:flex-start;padding:12px 14px 0 16px;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;font-size:9.5px;font-weight:700;line-height:1}
.mypush-demo-status-time{letter-spacing:-.02em}
.mypush-demo-status-icons{display:flex;align-items:center;gap:5px;height:10px;color:inherit}
.mypush-demo-status-icons i{display:block;flex:none;color:inherit}
.mypush-demo-status-cell{width:14px;height:9px;background:linear-gradient(currentColor,currentColor) 0 100%/2px 3px no-repeat,linear-gradient(currentColor,currentColor) 4px 100%/2px 5px no-repeat,linear-gradient(currentColor,currentColor) 8px 100%/2px 7px no-repeat,linear-gradient(currentColor,currentColor) 12px 100%/2px 9px no-repeat}
.mypush-demo-status-wifi{width:13px;height:9px;background:radial-gradient(circle at 50% 100%,currentColor 0 1px,transparent 1.3px),radial-gradient(circle at 50% 100%,transparent 0 3px,currentColor 3.2px 4px,transparent 4.2px),radial-gradient(circle at 50% 100%,transparent 0 6px,currentColor 6.2px 7px,transparent 7.2px)}
.mypush-demo-status-battery{position:relative;width:17px;height:8px;margin-left:1px;border:1px solid currentColor;border-radius:2px;opacity:.94}
.mypush-demo-status-battery::before{content:"";position:absolute;top:1px;bottom:1px;left:1px;width:11px;border-radius:1px;background:currentColor}
.mypush-demo-status-battery::after{content:"";position:absolute;top:2px;right:-3px;width:2px;height:4px;border-radius:0 2px 2px 0;background:currentColor;opacity:.72}
.mypush-demo-scene--overlay .mypush-demo-status,.mypush-demo-scene--swipe .mypush-demo-status{color:#15191d}

@media(max-width:760px){.mypush-demo-case-list{width:100%;grid-auto-columns:min(94vw,390px);padding-inline:var(--side-padding);scroll-padding-inline:var(--side-padding)}.mypush-demo-scene--compatibility{gap:8px}.mypush-demo-feature-phone{width:110px;height:280px}.mypush-demo-status{padding-inline:15px 13px}}

/* Rebuilt screen content: native-scale iOS chrome and quiet dark interfaces. */
.mypush-demo-status{position:absolute;z-index:9;inset:0 0 auto;height:43px;display:flex;align-items:flex-start;justify-content:space-between;padding:12px 14px 0 16px;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;font-size:10.5px;font-weight:650;line-height:1;font-variant-numeric:tabular-nums}
.mypush-demo-status-time{display:block;min-width:34px;letter-spacing:-.035em}
.mypush-demo-status-icons{display:flex;align-items:center;gap:4px;height:11px;color:#fff}
.mypush-demo-status-icons i{display:block;flex:none;background-position:center;background-repeat:no-repeat;background-size:contain}
.mypush-demo-status-cell{width:15px;height:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.mypush-demo-w3.mypush-demo-org/2000/svg' width='15' height='10' viewBox='0 0 15 10'%3E%3Crect x='0' y='7' width='2.2' height='3' rx='1' fill='%23fff'/%3E%3Crect x='4.2' y='5' width='2.2' height='5' rx='1' fill='%23fff'/%3E%3Crect x='8.4' y='2.5' width='2.2' height='7.5' rx='1' fill='%23fff'/%3E%3Crect x='12.6' width='2.2' height='10' rx='1' fill='%23fff'/%3E%3C/svg%3E")}
.mypush-demo-status-wifi{width:14px;height:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.mypush-demo-w3.mypush-demo-org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1 3.3A9.2 9.2 0 0 1 13 3.3M3.3 5.7a5.7 5.7 0 0 1 7.4 0M5.8 8a1.9 1.9 0 0 1 2.4 0' fill='none' stroke='%23fff' stroke-width='1.45' stroke-linecap='round'/%3E%3C/svg%3E")}
.mypush-demo-status-battery{width:20px;height:10px;margin:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.mypush-demo-w3.mypush-demo-org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Crect x='.6' y='.6' width='16.2' height='8.8' rx='2.3' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3Crect x='2.2' y='2.1' width='11.7' height='5.8' rx='1.2' fill='%23fff'/%3E%3Cpath d='M18 3.2v3.6c.9-.3 1.4-.9 1.4-1.8S18.9 3.5 18 3.2Z' fill='%23fff' opacity='.7'/%3E%3C/svg%3E");border:0;border-radius:0;opacity:1}
.mypush-demo-status-battery::before,.mypush-demo-status-battery::after{display:none}
.mypush-demo-scene--overlay .mypush-demo-status,.mypush-demo-scene--swipe .mypush-demo-status{color:#fff}
.mypush-demo-phone-screen::before{z-index:10;top:5px;width:74px;height:22px;border-radius:14px}
.mypush-demo-home-bar{z-index:11;width:86px;height:4px;opacity:.95}

/* Case 1: restrained brand gradient, animated as a calm 2D field. */
.mypush-demo-ambient-ui{position:absolute;inset:0;overflow:hidden;padding:0;background:#0d1219}
.mypush-demo-ambient-ui i{position:absolute;display:block;border-radius:50%;filter:blur(26px);will-change:transform;opacity:.62}
.mypush-demo-ambient-ui i:nth-child(1){left:-64px;top:74px;width:220px;height:260px;background:radial-gradient(circle at 60% 45%,rgba(215,30,91,.88),rgba(239,98,69,.5) 45%,transparent 72%)}
.mypush-demo-ambient-ui i:nth-child(2){right:-70px;top:130px;width:235px;height:260px;background:radial-gradient(circle at 42% 48%,rgba(57,168,187,.72),rgba(30,105,121,.42) 48%,transparent 73%)}
.mypush-demo-ambient-ui i:nth-child(3){left:42px;bottom:-86px;width:210px;height:220px;background:radial-gradient(circle at 52% 42%,rgba(255,197,27,.46),rgba(239,98,69,.2) 45%,transparent 72%)}
.mypush-demo-scene--compatibility.mypush-demo-is-playing .mypush-demo-ambient-ui{animation:none}
.mypush-demo-scene--compatibility.mypush-demo-is-playing .mypush-demo-ambient-ui i:nth-child(1){animation:mypush-demo-gradient-drift-a 4.8s ease-in-out infinite}
.mypush-demo-scene--compatibility.mypush-demo-is-playing .mypush-demo-ambient-ui i:nth-child(2){animation:mypush-demo-gradient-drift-b 4.8s ease-in-out infinite}
.mypush-demo-scene--compatibility.mypush-demo-is-playing .mypush-demo-ambient-ui i:nth-child(3){animation:mypush-demo-gradient-drift-c 4.8s ease-in-out infinite}
.mypush-demo-feature-screen{background:#101713;color:#d7ead7}.mypush-demo-feature-idle{padding-top:50px}.mypush-demo-feature-dialog{background:#cddbc7;color:#263126}

/* Cases 2–4: one reusable dark social skeleton with two repeated posts. */
.mypush-demo-feed-ui{--mypush-demo-feed-shift:260px;position:absolute;inset:0;overflow:hidden;background:#0f1318;color:#69717a}
.mypush-demo-feed-ui::before{content:"";position:absolute;z-index:2;inset:0 0 auto;height:43px;background:#0f1318}
.mypush-demo-feed-top{position:absolute;z-index:2;top:43px;right:0;left:0;height:43px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.055);background:rgba(15,19,24,.96)}
.mypush-demo-feed-top i{width:23px;height:23px;border-radius:50%;background:#2a3037}.mypush-demo-feed-top b{width:68px;height:7px;border-radius:999px;background:#333a42}.mypush-demo-feed-top span{width:18px;height:18px;margin-left:auto;border:2px solid #343b43;border-radius:50%}
.mypush-demo-feed-track{position:absolute;top:97px;right:10px;left:10px;display:grid;gap:14px;will-change:transform}
.mypush-demo-feed-post{height:246px;padding:11px;border:1px solid rgba(255,255,255,.045);border-radius:15px;background:#181d23;box-shadow:0 8px 22px rgba(0,0,0,.13)}
.mypush-demo-feed-post header{height:24px;display:flex;align-items:center;gap:8px}.mypush-demo-feed-post header i{width:22px;height:22px;border-radius:50%;background:#30373f}.mypush-demo-feed-post header span{width:74px;height:7px;border-radius:999px;background:#343b43}
.mypush-demo-feed-post>b{display:block;height:132px;margin-top:9px;border-radius:10px;background:#242a31}
.mypush-demo-feed-post p{display:grid;gap:6px;margin-top:10px}.mypush-demo-feed-post p i{display:block;height:6px;border-radius:999px;background:#343b43}.mypush-demo-feed-post p i:last-child{width:68%}
.mypush-demo-feed-post footer{display:flex;gap:18px;margin-top:11px}.mypush-demo-feed-post footer i{width:17px;height:7px;border-radius:999px;background:#2e353c}
.mypush-demo-feed-tabs{position:absolute;z-index:3;right:0;bottom:0;left:0;height:45px;display:flex;align-items:center;justify-content:space-around;padding:0 23px 7px;border-top:1px solid rgba(255,255,255,.055);background:rgba(15,19,24,.96)}
.mypush-demo-feed-tabs i{width:15px;height:15px;border:2px solid #343b43;border-radius:5px}.mypush-demo-feed-tabs i:first-child{border-color:#65707a;background:#252c33}
.mypush-demo-feed-ui--gallery{--mypush-demo-feed-shift:230px}.mypush-demo-feed-ui--gallery .mypush-demo-feed-post{height:216px}.mypush-demo-feed-ui--gallery .mypush-demo-feed-post>b{height:92px;display:grid;grid-template-columns:1fr 1fr;gap:5px;background:transparent}.mypush-demo-feed-ui--gallery .mypush-demo-feed-post>b i{border-radius:9px;background:#252b32}.mypush-demo-feed-ui--gallery .mypush-demo-feed-post p i:first-child{width:84%}
.mypush-demo-feed-ui--article{--mypush-demo-feed-shift:244px}.mypush-demo-feed-ui--article .mypush-demo-feed-post{height:230px}.mypush-demo-feed-ui--article .mypush-demo-feed-post>b{height:42px;background:#252c33}.mypush-demo-feed-ui--article .mypush-demo-feed-post p{gap:7px;margin-top:13px}.mypush-demo-feed-ui--article .mypush-demo-feed-post p i:nth-child(2){width:91%}.mypush-demo-feed-ui--article .mypush-demo-feed-post p i:nth-child(3){width:78%}.mypush-demo-feed-ui--article .mypush-demo-feed-post p i:nth-child(4){width:52%}

.mypush-demo-screen-touch{--action-x:-13px;--tap-y:-96px;position:absolute;z-index:7;left:168px;top:380px;width:40px;height:40px;opacity:0;pointer-events:none;will-change:transform,opacity}
.mypush-demo-screen-touch>i{position:absolute;inset:8px;border:2px solid rgba(255,255,255,.94);border-radius:50%;background:rgba(57,168,187,.8);box-shadow:0 0 0 8px rgba(57,168,187,.16)}
.mypush-demo-screen-touch>i::after{content:"";position:absolute;inset:-10px;border:1px solid var(--color-sky);border-radius:50%;opacity:0}

.mypush-demo-scene--overlay.mypush-demo-is-playing .mypush-demo-feed-track{animation:mypush-demo-feed-shift 4.8s var(--motion) infinite}
.mypush-demo-scene--overlay.mypush-demo-is-playing .mypush-demo-screen-touch--overlay{animation:mypush-demo-finger-overlay 4.8s var(--motion) infinite}
.mypush-demo-scene--overlay.mypush-demo-is-playing .mypush-demo-screen-touch--overlay>i::after{animation:mypush-demo-finger-ring-overlay 4.8s ease-out infinite}
.mypush-demo-scene--overlay.mypush-demo-is-playing .mypush-demo-stk-dialog{animation:mypush-demo-overlay-card-cycle 4.8s var(--motion) infinite}
.mypush-demo-scene--overlay.mypush-demo-is-playing .mypush-demo-screen-dim{animation:mypush-demo-overlay-dim-cycle 4.8s linear infinite}
.mypush-demo-scene--swipe.mypush-demo-is-playing .mypush-demo-feed-track{animation:mypush-demo-feed-shift 4.8s var(--motion) infinite}
.mypush-demo-scene--swipe.mypush-demo-is-playing .mypush-demo-screen-touch--outside{animation:mypush-demo-finger-outside 4.8s var(--motion) infinite}
.mypush-demo-scene--swipe.mypush-demo-is-playing .mypush-demo-screen-touch--outside>i::after{animation:mypush-demo-finger-ring-outside 4.8s ease-out infinite}
.mypush-demo-scene--swipe.mypush-demo-is-playing .mypush-demo-stk-dialog{animation:mypush-demo-outside-card-cycle 4.8s var(--motion) infinite}
.mypush-demo-scene--swipe.mypush-demo-is-playing .mypush-demo-screen-dim{animation:mypush-demo-outside-dim-cycle 4.8s linear infinite}
.mypush-demo-scene--persistent.mypush-demo-is-playing .mypush-demo-feed-track{animation:mypush-demo-feed-shift 4.8s var(--motion) infinite}
.mypush-demo-scene--persistent.mypush-demo-is-playing .mypush-demo-screen-touch--persistent{animation:mypush-demo-finger-persistent 4.8s var(--motion) infinite}
.mypush-demo-scene--persistent.mypush-demo-is-playing .mypush-demo-screen-touch--persistent>i::after{animation:mypush-demo-finger-ring-persistent 4.8s ease-out infinite}
.mypush-demo-scene--persistent.mypush-demo-is-playing .mypush-demo-stk-dialog{animation:mypush-demo-persistent-card-cycle 4.8s var(--motion) infinite}
.mypush-demo-scene--persistent.mypush-demo-is-playing .mypush-demo-screen-dim{animation:mypush-demo-persistent-dim-cycle 4.8s linear infinite}

/* Case 5: the on-screen journey and the adjacent four-step progress share one loop. */
.mypush-demo-scene--journey{grid-template-columns:260px minmax(0,145px);gap:18px;align-items:center}
.mypush-demo-data-ui{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;padding:0;background:radial-gradient(circle at 50% 42%,#1c2c39,#101720 68%)}
.mypush-demo-data-ring{width:126px;height:126px;display:grid;place-content:center;border:9px solid rgba(213,248,255,.09);border-top-color:#39a8bb;border-right-color:#1e6979;border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 38px rgba(57,168,187,.08)}
.mypush-demo-data-ring span,.mypush-demo-data-ring small{transform:rotate(18deg);text-align:center}.mypush-demo-data-ring span{font-size:34px;font-weight:500;letter-spacing:-.06em}.mypush-demo-data-ring small{margin-top:2px;color:#9bb1b6;font-size:7px;font-weight:750;letter-spacing:.14em}.mypush-demo-data-ui>p{margin-top:14px;color:#aebdc0;font-size:10px}
.mypush-demo-journey-progress{position:relative;z-index:2;display:grid;gap:17px;width:100%;margin:0;padding:0;list-style:none}
.mypush-demo-journey-progress::before,.mypush-demo-journey-progress::after{content:"";position:absolute;z-index:-1;left:13px;top:14px;width:1px;height:calc(100% - 28px);transform-origin:top;background:rgba(213,248,255,.18)}
.mypush-demo-journey-progress::after{background:#39a8bb;transform:scaleY(0)}
.mypush-demo-journey-progress li{display:grid;grid-template-columns:27px 1fr;align-items:center;gap:9px;color:#68777b;font-size:9px;letter-spacing:.07em;text-transform:uppercase;opacity:.55}
.mypush-demo-journey-progress li span{display:grid;place-items:center;width:27px;height:27px;border:1px solid currentColor;border-radius:50%;background:#24282b;color:inherit;font-size:8px;font-weight:750}
.mypush-demo-journey-progress li strong{font:inherit;font-weight:750;white-space:nowrap}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-progress::after{animation:mypush-demo-journey-line 4.8s var(--motion) infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-progress li:nth-child(1){animation:mypush-demo-journey-step-offer 4.8s linear infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-progress li:nth-child(2){animation:mypush-demo-journey-step-action 4.8s linear infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-progress li:nth-child(3){animation:mypush-demo-journey-step-confirm 4.8s linear infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-progress li:nth-child(4){animation:mypush-demo-journey-step-activation 4.8s linear infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ring{animation:mypush-demo-data-ring-breathe 4.8s ease-in-out infinite}

@keyframes mypush-demo-gradient-drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(28px,18px,0) scale(1.08)}}
@keyframes mypush-demo-gradient-drift-b{0%,100%{transform:translate3d(0,0,0) scale(1.04)}50%{transform:translate3d(-24px,24px,0) scale(.96)}}
@keyframes mypush-demo-gradient-drift-c{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(14px,-22px,0) scale(1.08)}}
@keyframes mypush-demo-feed-shift{0%,7%{transform:translateY(0)}26%,99.99%{transform:translateY(calc(-1 * var(--mypush-demo-feed-shift)))}100%{transform:translateY(0)}}
@keyframes mypush-demo-overlay-card-cycle{0%,27%,76%,100%{opacity:0;transform:translate(-50%,-50%) scale(.97)}33%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes mypush-demo-overlay-dim-cycle{0%,28%,75%,100%{opacity:0}34%,70%{opacity:1}}
@keyframes mypush-demo-finger-overlay{0%,6%,100%{opacity:0;transform:translate3d(0,0,0) scale(1)}9%{opacity:1;transform:translate3d(0,0,0)}22%{opacity:1;transform:translate3d(-18px,-170px,0)}26%,59%{opacity:0;transform:translate3d(-18px,-170px,0)}63%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0) scale(1)}67%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0) scale(.72)}71%{opacity:0;transform:translate3d(var(--action-x),var(--tap-y),0) scale(1)}}
@keyframes mypush-demo-finger-ring-overlay{0%,63%,100%{opacity:0;transform:scale(.45)}67%{opacity:1}72%{opacity:0;transform:scale(1.8)}}
@keyframes mypush-demo-outside-card-cycle{0%,28%,100%{opacity:0;transform:translate(-50%,-50%) scale(.97)}34%,59%{opacity:1;transform:translate(-50%,-50%)}61%{opacity:1;transform:translate(calc(-50% - 6px),-50%)}64%{opacity:1;transform:translate(calc(-50% + 6px),-50%)}67%{opacity:1;transform:translate(calc(-50% - 3px),-50%)}70%,92%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes mypush-demo-outside-dim-cycle{0%,29%,100%{opacity:0}35%,92%{opacity:1}}
@keyframes mypush-demo-finger-outside{0%,6%,100%{opacity:0;transform:translate3d(0,0,0) scale(1)}9%{opacity:1}22%{opacity:1;transform:translate3d(-18px,-170px,0)}27%,48%{opacity:0}52%{opacity:1;transform:translate3d(-120px,-238px,0)}60%{opacity:1;transform:translate3d(-120px,-238px,0) scale(.7)}66%{opacity:0;transform:translate3d(-120px,-238px,0) scale(1)}}
@keyframes mypush-demo-finger-ring-outside{0%,55%,100%{opacity:0;transform:scale(.45)}60%{opacity:1}67%{opacity:0;transform:scale(1.8)}}
@keyframes mypush-demo-persistent-card-cycle{0%,27%,90%,100%{opacity:0;transform:translate(-50%,-50%) scale(.97)}34%,84%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes mypush-demo-persistent-dim-cycle{0%,28%,89%,100%{opacity:0}35%,84%{opacity:1}}
@keyframes mypush-demo-finger-persistent{0%,6%,100%{opacity:0;transform:translate3d(0,0,0) scale(1)}9%{opacity:1}22%{opacity:1;transform:translate3d(-18px,-170px,0)}27%,76%{opacity:0}79%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0)}83%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0) scale(.7)}88%{opacity:0;transform:translate3d(var(--action-x),var(--tap-y),0) scale(1)}}
@keyframes mypush-demo-finger-ring-persistent{0%,79%,100%{opacity:0;transform:scale(.45)}83%{opacity:1}89%{opacity:0;transform:scale(1.8)}}
@keyframes mypush-demo-journey-line{0%,12%,100%{transform:scaleY(0)}29%{transform:scaleY(.33)}56%{transform:scaleY(.66)}74%,94%{transform:scaleY(1)}}
@keyframes mypush-demo-journey-step-offer{0%,7%,100%{color:#68777b;opacity:.55}11%,24%{color:#d5f8ff;opacity:1;transform:translateX(2px)}28%,94%{color:#39a8bb;opacity:.82}}
@keyframes mypush-demo-journey-step-action{0%,24%,100%{color:#68777b;opacity:.55}27%,38%{color:#d5f8ff;opacity:1;transform:translateX(2px)}42%,94%{color:#39a8bb;opacity:.82}}
@keyframes mypush-demo-journey-step-confirm{0%,38%,100%{color:#68777b;opacity:.55}42%,64%{color:#d5f8ff;opacity:1;transform:translateX(2px)}68%,94%{color:#39a8bb;opacity:.82}}
@keyframes mypush-demo-journey-step-activation{0%,68%,100%{color:#68777b;opacity:.55}73%,94%{color:#d5f8ff;opacity:1;transform:translateX(2px)}}
@keyframes mypush-demo-data-ring-breathe{0%,100%{transform:rotate(-18deg);filter:brightness(.9)}50%{transform:rotate(-12deg) scale(1.025);filter:brightness(1.06)}}

@media(max-width:760px){.mypush-demo-status{padding:11px 13px 0 15px;font-size:9.5px}.mypush-demo-scene--journey{grid-template-columns:225px minmax(0,112px);gap:8px}.mypush-demo-journey-progress{gap:14px}.mypush-demo-journey-progress li{grid-template-columns:23px 1fr;gap:6px;font-size:7px}.mypush-demo-journey-progress li span{width:23px;height:23px}.mypush-demo-journey-progress::before,.mypush-demo-journey-progress::after{left:11px;top:12px;height:calc(100% - 24px)}.mypush-demo-screen-touch{--action-x:-14px;--tap-y:-82px;left:143px;top:328px}.mypush-demo-feed-post{padding:10px}}
@media(max-width:370px){.mypush-demo-scene .mypush-demo-phone{width:210px;height:435px}.mypush-demo-scene--compatibility{gap:6px}.mypush-demo-feature-phone{width:86px}.mypush-demo-scene--journey{grid-template-columns:210px 86px;gap:6px}.mypush-demo-journey-progress li strong{white-space:normal}.mypush-demo-journey-touch{--journey-confirm-y:-19px;left:103px;top:220px}.mypush-demo-screen-touch{--action-x:-25px;--tap-y:-80px;left:128px;top:300px}}
@media(prefers-reduced-motion:reduce){.mypush-demo-scene.mypush-demo-is-playing .mypush-demo-ambient-ui i,.mypush-demo-scene.mypush-demo-is-playing .mypush-demo-feed-track,.mypush-demo-scene.mypush-demo-is-playing .mypush-demo-screen-touch,.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-progress::after,.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-progress li,.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ring{animation:none}.mypush-demo-screen-touch{display:none}.mypush-demo-journey-progress li:first-child{color:#d5f8ff;opacity:1}}

/* Compact charcoal body for the basic phone, ending directly below the keypad. */
.mypush-demo-feature-phone{height:300px;padding:10px 12px 9px;border-color:#4a4e4f;border-radius:27px 27px 30px 30px;background:#272b2c;box-shadow:0 18px 34px rgba(0,0,0,.28)}
.mypush-demo-feature-screen{border-color:#141718}
.mypush-demo-feature-keys{margin-top:14px}
.mypush-demo-feature-keys i{background:#424647}
.mypush-demo-feature-keys i:nth-child(1),.mypush-demo-feature-keys i:nth-child(3){background:#2b6056}
@media(max-width:760px){.mypush-demo-feature-phone{height:264px;padding-bottom:8px}.mypush-demo-feature-keys{margin-top:12px}}

/* A slower journey leaves enough time to read each decision and result. */
.mypush-demo-scene--journey{--journey-cycle:8s}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-screen-dim{animation:mypush-demo-journey-dim var(--journey-cycle) linear infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-dialog--offer{animation:mypush-demo-journey-offer var(--journey-cycle) var(--motion) infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-dialog--confirm{animation:mypush-demo-journey-confirm var(--journey-cycle) var(--motion) infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-activation-result{animation:mypush-demo-journey-result var(--journey-cycle) var(--motion) infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-touch{animation:mypush-demo-journey-tap var(--journey-cycle) linear infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-journey-touch i::after{animation:mypush-demo-journey-ring var(--journey-cycle) linear infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing>.mypush-demo-journey-progress::after{animation:mypush-demo-journey-line var(--journey-cycle) var(--motion) infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing>.mypush-demo-journey-progress li:nth-child(1){animation:mypush-demo-journey-step-offer var(--journey-cycle) linear infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing>.mypush-demo-journey-progress li:nth-child(2){animation:mypush-demo-journey-step-action var(--journey-cycle) linear infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing>.mypush-demo-journey-progress li:nth-child(3){animation:mypush-demo-journey-step-confirm var(--journey-cycle) linear infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing>.mypush-demo-journey-progress li:nth-child(4){animation:mypush-demo-journey-step-activation var(--journey-cycle) linear infinite}
.mypush-demo-scene--journey.mypush-demo-is-playing .mypush-demo-data-ring{animation:mypush-demo-data-ring-breathe var(--journey-cycle) ease-in-out infinite}
@keyframes mypush-demo-journey-line{0%,19%{transform:scaleY(0)}23%,39%{transform:scaleY(.33)}43%,69%{transform:scaleY(.66)}73%,99.99%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes mypush-demo-journey-step-offer{0%,19%{color:#d5f8ff;opacity:1;transform:translateX(2px)}20%,99.99%{color:#39a8bb;opacity:.82;transform:translateX(0)}100%{color:#68777b;opacity:.55;transform:translateX(0)}}
@keyframes mypush-demo-journey-step-action{0%,19%{color:#68777b;opacity:.55;transform:translateX(0)}20%,39%{color:#d5f8ff;opacity:1;transform:translateX(2px)}40%,99.99%{color:#39a8bb;opacity:.82;transform:translateX(0)}100%{color:#68777b;opacity:.55;transform:translateX(0)}}
@keyframes mypush-demo-journey-step-confirm{0%,39%{color:#68777b;opacity:.55;transform:translateX(0)}40%,69%{color:#d5f8ff;opacity:1;transform:translateX(2px)}70%,99.99%{color:#39a8bb;opacity:.82;transform:translateX(0)}100%{color:#68777b;opacity:.55;transform:translateX(0)}}
@keyframes mypush-demo-journey-step-activation{0%,69%{color:#68777b;opacity:.55;transform:translateX(0)}70%,99.99%{color:#d5f8ff;opacity:1;transform:translateX(2px)}100%{color:#68777b;opacity:.55;transform:translateX(0)}}

/* A shared copy row keeps every iPhone on the same horizontal baseline. */
.mypush-demo-micro-case{grid-template-rows:280px 590px}
@media(max-width:760px){.mypush-demo-micro-case{grid-template-rows:minmax(230px,auto) 540px}}

/* Slim feature phone: the SIM message replaces the screen instead of floating in a panel. */
.mypush-demo-feature-phone{width:136px;height:262px;padding:18px 9px 8px;border-color:#4a4f50;border-radius:25px 25px 28px 28px;background:#2b3031;box-shadow:0 18px 34px rgba(0,0,0,.27)}
.mypush-demo-feature-phone::before{content:"";position:absolute;top:8px;left:50%;width:28px;height:3px;transform:translateX(-50%);border-radius:999px;background:#555b5c}
.mypush-demo-feature-screen{height:155px;border:2px solid #15191a;border-radius:9px;background:#101713}
.mypush-demo-feature-idle{padding-top:43px}.mypush-demo-feature-idle b{font-size:20px}.mypush-demo-feature-idle span{margin-top:6px}
.mypush-demo-feature-dialog{inset:0;border:0;border-radius:6px;background:#cddbc7;transform:none}
.mypush-demo-feature-dialog p{padding:16px 8px 10px;font-size:8px;line-height:1.38}
.mypush-demo-feature-dialog>div{border-top-color:#536053}.mypush-demo-feature-dialog span{padding:6px 1px;font-size:6.5px}
.mypush-demo-feature-keys{gap:6px 8px;margin:14px 8px 0}.mypush-demo-feature-keys i{height:12px;border-radius:999px}
@keyframes mypush-demo-compat-feature{0%,14%,100%{opacity:0;transform:none}20%,90%{opacity:1;transform:none}}
@media(max-width:760px){.mypush-demo-feature-phone{width:96px;height:244px;padding:17px 8px 7px}.mypush-demo-feature-phone::before{top:7px;width:24px}.mypush-demo-feature-screen{height:144px}.mypush-demo-feature-idle{padding-top:40px}.mypush-demo-feature-keys{gap:5px 7px;margin:10px 6px 0}.mypush-demo-feature-keys i{height:11px}}
@media(max-width:370px){.mypush-demo-feature-phone{width:84px}}

/* Higher-contrast feed surfaces make the push dimming state unmistakable. */
.mypush-demo-feed-ui{background:#0b1015;color:#84909a}
.mypush-demo-feed-ui::before{background:#0b1015}
.mypush-demo-feed-top{border-bottom-color:rgba(255,255,255,.09);background:rgba(13,19,25,.97)}
.mypush-demo-feed-top i{background:#3a444e}.mypush-demo-feed-top b{background:#46515b}.mypush-demo-feed-top span{border-color:#4b5660}
.mypush-demo-feed-post{border-color:rgba(255,255,255,.085);background:#222a31;box-shadow:0 9px 24px rgba(0,0,0,.2)}
.mypush-demo-feed-post header i{background:#414c56}.mypush-demo-feed-post header span{background:#4a5661}
.mypush-demo-feed-post>b{background:#343e47}.mypush-demo-feed-post p i{background:#4a5660}.mypush-demo-feed-post footer i{background:#3f4953}
.mypush-demo-feed-tabs{border-top-color:rgba(255,255,255,.09);background:rgba(13,19,25,.97)}
.mypush-demo-feed-tabs i{border-color:#4a5560}.mypush-demo-feed-tabs i:first-child{border-color:#7a8791;background:#303a43}
.mypush-demo-feed-ui--gallery .mypush-demo-feed-post>b i{background:#343e47}
.mypush-demo-feed-ui--article .mypush-demo-feed-post>b{background:#37424c}
.mypush-demo-scene--overlay .mypush-demo-screen-dim,.mypush-demo-scene--swipe .mypush-demo-screen-dim,.mypush-demo-scene--persistent .mypush-demo-screen-dim{background:rgba(2,5,8,.58)}

/* The four product-property cases resolve with OK. */
.mypush-demo-screen-touch{--action-x:-13px}
.mypush-demo-scene--compatibility.mypush-demo-is-playing .mypush-demo-screen-touch--compatibility{animation:mypush-demo-compatibility-ok 4.5s var(--motion) infinite}
.mypush-demo-scene--compatibility.mypush-demo-is-playing .mypush-demo-screen-touch--compatibility>i::after{animation:mypush-demo-compatibility-ok-ring 4.5s ease-out infinite}
@keyframes mypush-demo-compatibility-ok{0%,69%,100%{opacity:0;transform:translate3d(var(--action-x),var(--tap-y),0) scale(1)}73%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0) scale(1)}78%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0) scale(.7)}83%{opacity:0;transform:translate3d(var(--action-x),var(--tap-y),0) scale(1)}}
@keyframes mypush-demo-compatibility-ok-ring{0%,73%,100%{opacity:0;transform:scale(.45)}78%{opacity:1}85%{opacity:0;transform:scale(1.8)}}
@keyframes mypush-demo-finger-overlay{0%,6%,100%{opacity:0;transform:translate3d(0,0,0) scale(1)}9%{opacity:1;transform:translate3d(0,0,0)}22%{opacity:1;transform:translate3d(-18px,-170px,0)}26%,59%{opacity:0;transform:translate3d(-18px,-170px,0)}63%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0) scale(1)}67%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0) scale(.72)}71%{opacity:0;transform:translate3d(var(--action-x),var(--tap-y),0) scale(1)}}
@keyframes mypush-demo-finger-persistent{0%,6%,100%{opacity:0;transform:translate3d(0,0,0) scale(1)}9%{opacity:1}22%{opacity:1;transform:translate3d(-18px,-170px,0)}27%,76%{opacity:0}79%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0)}83%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0) scale(.7)}88%{opacity:0;transform:translate3d(var(--action-x),var(--tap-y),0) scale(1)}}
@keyframes mypush-demo-outside-card-cycle{0%,28%,89%,100%{opacity:0;transform:translate(-50%,-50%) scale(.97)}34%,59%{opacity:1;transform:translate(-50%,-50%)}61%{opacity:1;transform:translate(calc(-50% - 6px),-50%)}64%{opacity:1;transform:translate(calc(-50% + 6px),-50%)}67%{opacity:1;transform:translate(calc(-50% - 3px),-50%)}70%,84%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes mypush-demo-outside-dim-cycle{0%,29%,89%,100%{opacity:0}35%,84%{opacity:1}}
@keyframes mypush-demo-finger-outside{0%,6%,100%{opacity:0;transform:translate3d(0,0,0) scale(1)}9%{opacity:1}22%{opacity:1;transform:translate3d(-18px,-170px,0)}27%,48%{opacity:0}52%{opacity:1;transform:translate3d(-120px,-238px,0)}60%{opacity:1;transform:translate3d(-120px,-238px,0) scale(.7)}66%,75%{opacity:0;transform:translate3d(-120px,-238px,0) scale(1)}78%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0) scale(1)}83%{opacity:1;transform:translate3d(var(--action-x),var(--tap-y),0) scale(.7)}88%{opacity:0;transform:translate3d(var(--action-x),var(--tap-y),0) scale(1)}}
@keyframes mypush-demo-finger-ring-outside{0%,55%,64%,78%,100%{opacity:0;transform:scale(.45)}60%,83%{opacity:1}68%,89%{opacity:0;transform:scale(1.8)}}
@media(max-width:760px){.mypush-demo-screen-touch{--action-x:-14px}}
@media(max-width:370px){.mypush-demo-screen-touch{--action-x:-25px}}

/* Keep both journey taps centered on their own OK button. */
@keyframes mypush-demo-journey-tap{0%,23%,35%{opacity:0;transform:translateY(0) scale(1)}27%,32%{opacity:1;transform:translateY(0) scale(1)}30%{transform:translateY(0) scale(.7)}55%{opacity:0;transform:translateY(var(--journey-confirm-y)) scale(1)}59%,64%{opacity:1;transform:translateY(var(--journey-confirm-y)) scale(1)}62%{transform:translateY(var(--journey-confirm-y)) scale(.7)}68%,99.99%{opacity:0;transform:translateY(var(--journey-confirm-y)) scale(1)}100%{opacity:0;transform:translateY(0) scale(1)}}

/* The rail stays viewport-wide; only its visual scrollbar follows the site container. */
.mypush-demo-case-list{scrollbar-width:none}
.mypush-demo-case-list::-webkit-scrollbar{display:none}
.mypush-demo-case-scrollbar{position:relative;width:min(calc(100% - (var(--side-padding) * 2)),var(--container));height:8px;margin-inline:auto;border-radius:var(--radius-pill);background:rgba(213,248,255,.08);cursor:pointer;touch-action:none}
.mypush-demo-case-scrollbar[hidden]{display:none}
.mypush-demo-case-scrollbar>span{position:absolute;inset:0 auto 0 0;width:var(--scroll-thumb-width,25%);border:2px solid transparent;border-radius:var(--radius-pill);background:var(--color-teal-bright);background-clip:padding-box;transform:translate3d(var(--scroll-thumb-x,0),0,0);will-change:transform}
.mypush-demo-case-scrollbar:focus-visible{outline:3px solid #ffcf3d;outline-offset:4px}
.mypush-demo-case-scrollbar.mypush-demo-is-dragging>span{background-color:var(--color-sky)}

/* Activation is returned as plain system text, without an app-style success badge. */
.mypush-demo-activation-result{width:calc(100% - 26px);padding:19px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.58);border-radius:22px;background:rgba(242,242,247,.94);box-shadow:0 14px 36px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.72)}
.mypush-demo-activation-result p{padding:0 18px 18px;font-size:12px;font-weight:650;line-height:1.4}
.mypush-demo-activation-result strong{font-size:12.5px;font-weight:750;letter-spacing:-.01em}
.mypush-demo-activation-result button{display:grid;width:100%;height:44px;place-items:center;padding:1px 6px 0;border:0;border-top:1px solid rgba(60,60,67,.24);border-radius:0;background:transparent;box-shadow:none;color:#007aff;font-size:12px;font-weight:600;line-height:1;letter-spacing:0}
@media(max-width:760px){.mypush-demo-activation-result{padding:17px 0 0;border-radius:20px}.mypush-demo-activation-result p{padding:0 15px 16px;font-size:11px}.mypush-demo-activation-result button{height:42px;font-size:11px}}

/* Landing integration: compact vertical desktop cases; mobile keeps one full case plus a preview. */
.mypush-demo-cases {
  --case-gap: var(--space-5);
  --case-width: 455px;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.mypush-demo-case-list {
  display: flex;
  gap: var(--case-gap);
  padding-bottom: var(--space-5);
}

.mypush-demo-micro-case {
  flex: 0 0 var(--case-width);
  width: var(--case-width);
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 280px 590px;
  align-items: start;
  contain: none;
}

.mypush-demo-case-copy {
  align-self: start;
  padding: 0 0 var(--space-5);
}

.mypush-demo-case-copy h3 {
  max-width: 12ch;
  font-size: clamp(2rem, 3vw, 3rem);
}

.mypush-demo-case-copy p {
  font-size: 0.9rem;
}

.mypush-demo-scene {
  width: 100%;
  height: 590px;
  justify-items: start;
  place-items: center start;
}

.mypush-demo-scene--compatibility {
  justify-content: start;
}

@media (max-width: 760px) {
  .mypush-demo-cases {
    --case-gap: 1rem;
    --case-peek: 2.25rem;
    --case-width: calc(
      100vw - var(--side-padding) - var(--case-gap) - var(--case-peek)
    );
    padding-block: var(--space-5) var(--space-6);
  }

  .mypush-demo-case-list {
    gap: var(--case-gap);
    padding-inline: var(--side-padding);
    scroll-padding-inline: var(--side-padding);
  }

  .mypush-demo-micro-case {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(235px, auto) 540px;
    align-items: start;
  }

  .mypush-demo-case-copy {
    align-self: start;
    padding: 0 0 var(--space-4);
  }

  .mypush-demo-case-copy h3 {
    max-width: 11ch;
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }

  .mypush-demo-case-copy p {
    font-size: 0.84rem;
    line-height: 1.5;
  }

  .mypush-demo-scene {
    height: 540px;
    justify-items: center;
  }

  .mypush-demo-scene--journey {
    grid-template-columns: minmax(0, 225px) minmax(0, 78px);
    justify-content: center;
    gap: 0;
  }

  .mypush-demo-scene--compatibility {
    display: flex;
    justify-content: center;
    gap: 0;
  }

  .mypush-demo-scene--compatibility .mypush-demo-feature-phone {
    margin-left: -28px;
    transform: translateY(28px);
  }
}

@media (max-width: 370px) {
  .mypush-demo-cases {
    --case-width: calc(
      100vw - var(--side-padding) - var(--case-gap) - 1.75rem
    );
  }

  .mypush-demo-micro-case {
    grid-template-rows: minmax(250px, auto) 490px;
  }

  .mypush-demo-scene {
    height: 490px;
  }

  .mypush-demo-scene .mypush-demo-phone {
    width: 190px;
    height: 395px;
  }

  .mypush-demo-scene--journey {
    grid-template-columns: minmax(0, 190px) minmax(0, 58px);
  }

  .mypush-demo-journey-progress {
    gap: 11px;
  }

  .mypush-demo-journey-progress li {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 4px;
    font-size: 6px;
  }

  .mypush-demo-journey-progress li span {
    width: 20px;
    height: 20px;
  }

  .mypush-demo-journey-progress::before,
  .mypush-demo-journey-progress::after {
    left: 10px;
    top: 10px;
    height: calc(100% - 20px);
  }

  .mypush-demo-scene--compatibility .mypush-demo-feature-phone {
    margin-left: -26px;
  }
}

[data-mypush-scene="journey"] .mypush-demo-case-copy p:last-child {
  color: var(--color-muted-light);
}

@media (max-width: 760px) {
  [data-mypush-scene="journey"] {
    grid-template-rows: auto auto 465px;
  }

  [data-mypush-scene="journey"] .mypush-demo-case-copy {
    grid-row: 1;
  }

  .mypush-demo-scene--journey {
    display: contents;
  }

  .mypush-demo-scene--journey .mypush-demo-journey-progress {
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 0 0 var(--space-4);
  }

  .mypush-demo-scene--journey .mypush-demo-journey-progress::before,
  .mypush-demo-scene--journey .mypush-demo-journey-progress::after {
    top: 13px;
    left: 13px;
    width: calc(100% - 26px);
    height: 1px;
    transform-origin: left;
  }

  .mypush-demo-scene--journey .mypush-demo-journey-progress::after {
    transform: scaleX(0);
  }

  .mypush-demo-scene--journey .mypush-demo-journey-progress li {
    grid-template-columns: 1fr;
    grid-template-rows: 27px auto;
    justify-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 0.42rem;
    line-height: 1.25;
    text-align: center;
  }

  .mypush-demo-scene--journey .mypush-demo-journey-progress li strong {
    white-space: normal;
  }

  .mypush-demo-scene--journey .mypush-demo-phone {
    grid-row: 3;
    align-self: start;
    justify-self: center;
  }

  .mypush-demo-scene--journey.mypush-demo-is-playing > .mypush-demo-journey-progress::after {
    animation-name: mypush-demo-journey-line-mobile;
  }
}

@media (max-width: 370px) {
  [data-mypush-scene="journey"] {
    grid-template-rows: auto auto 395px;
  }

  .mypush-demo-scene--journey .mypush-demo-journey-progress::before,
  .mypush-demo-scene--journey .mypush-demo-journey-progress::after {
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
  }

  .mypush-demo-scene--journey .mypush-demo-journey-progress li {
    grid-template-rows: 20px auto;
    gap: 0.35rem;
    font-size: 0.36rem;
  }
}

@keyframes mypush-demo-journey-line-mobile {
  0%, 19% { transform: scaleX(0); }
  23%, 39% { transform: scaleX(0.33); }
  43%, 69% { transform: scaleX(0.66); }
  73%, 99.99% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* Keep the phones aligned while tightening the shared copy-to-visual floor. */
.mypush-demo-micro-case {
  grid-template-rows: 240px 590px;
}

@media (max-width: 760px) {
  .mypush-demo-micro-case {
    grid-template-rows: 220px 540px;
  }

  [data-mypush-scene="journey"] {
    grid-template-rows: auto auto 465px;
  }
}

@media (max-width: 370px) {
  .mypush-demo-micro-case {
    grid-template-rows: 215px 490px;
  }

  [data-mypush-scene="journey"] {
    grid-template-rows: auto auto 395px;
  }
}

/* On mobile the readable feature phone sits in front of the smartphone's Cancel side. */
@media (max-width: 760px) {
  .mypush-demo-scene--compatibility .mypush-demo-feature-phone {
    order: -1;
    z-index: 3;
    flex: 0 0 112px;
    width: 112px;
    margin-right: -48px;
    margin-left: 0;
    transform: translateY(28px);
  }

  .mypush-demo-scene--compatibility .mypush-demo-phone {
    z-index: 2;
    flex: 0 0 auto;
  }
}

@media (max-width: 370px) {
  .mypush-demo-scene--compatibility .mypush-demo-feature-phone {
    flex-basis: 110px;
    width: 110px;
    margin-right: -44px;
  }
}