/* One screen geometry for both devices, independent of legacy mock-screen rules. */
.device-body .device-front{overflow:visible}
.device-scale{width:302px;height:635px}
.device-body .device-display{position:absolute;inset:5px;height:auto;width:auto;padding:0;overflow:hidden;background:#080808;transform:translateZ(0);isolation:isolate}
.app-demo .device-display .journey-screens,.app-demo .device-display .journey-scroll-track,.app-demo .device-display .journey-screen{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;max-height:none;transform:none}
.device-body .device-display .native-screen{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:top center}
.app-demo .device-display .journey-screen{transition:opacity .25s ease,visibility 0s .25s;visibility:hidden;opacity:0}
.app-demo .device-display .journey-screen[data-active=true]{visibility:visible;opacity:1;transition-delay:0s}
.product-hero .hero-copy{transform:none}
.device-ground{filter:none;background:radial-gradient(ellipse,#30273520,transparent 68%)}
.device-stage{perspective:1600px}
/* Transform timelines can run on Safari's scrolling thread. JS remains a fallback. */
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference) and (min-height:621px){
  .product-hero{view-timeline:--hero block;view-timeline-inset:52px 0}
  .app-demo{view-timeline:--journey block;view-timeline-inset:52px 0}
  .product-hero .device-body{animation:hero-camera linear both;animation-timeline:--hero;animation-range:contain 0% contain 68%}
  .app-scroll-live .device-body{animation:journey-camera linear both;animation-timeline:--journey;animation-range:contain 0% contain 70%}
  .product-hero .glass-light{animation:glass-pass linear both;animation-timeline:--hero;animation-range:contain 0% contain 100%}
  .product-hero .device-ground{animation:hero-ground linear both;animation-timeline:--hero;animation-range:contain 0% contain 68%}
  .app-scroll-live .device-ground{animation:app-ground linear both;animation-timeline:--journey;animation-range:contain 0% contain 100%}
  .app-scroll-live .glass-light{animation:glass-pass linear both;animation-timeline:--journey;animation-range:contain 0% contain 100%}
  .product-hero .hero-copy{transform:none}
  .app-progress span{animation:story-progress linear both;animation-timeline:--journey;animation-range:contain 0% contain 100%}
 }
}
@keyframes hero-camera{from{transform:translate3d(-20px,15px,0) rotateX(13deg) rotateY(-25deg) rotateZ(-13deg) scale(1.3)}to{transform:translate3d(0,0,0) rotateX(0) rotateY(-8deg) rotateZ(0) scale(1)}}
@keyframes journey-camera{from{transform:translate3d(120px,0,0) rotateY(24deg)}to{transform:translate3d(0,0,0) rotateY(0)}}
@keyframes glass-pass{from{transform:translateX(-65%)}to{transform:translateX(65%)}}
@keyframes hero-ground{from{transform:scaleX(1)}to{transform:scaleX(.8)}}
@keyframes app-ground{0%,100%{transform:scaleX(.8)}50%{transform:scaleX(.95)}}
@keyframes story-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Only visible, small text areas repaint; device animation stays on transform layers. */
.rainbow{position:relative;display:inline-block;background-image:linear-gradient(90deg,#086cc7 0%,#6744cf 7%,#bd289d 14%,#d34355 21%,#ad7400 27.5%,#19875f 34.5%,#008caa 41.5%,#086cc7 50%,#6744cf 57%,#bd289d 64%,#d34355 71%,#ad7400 77.5%,#19875f 84.5%,#008caa 91.5%,#086cc7 100%);background-size:200% 100%;background-position:0% 50%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;isolation:isolate;text-shadow:0 0 22px #b37bda18;animation:none}
.rainbow::after{content:none}
@media(prefers-reduced-motion:no-preference){.rainbow.rainbow-visible{animation:rainbow-flow 7s linear infinite}}
@keyframes rainbow-flow{to{background-position:-200% 50%}}
.calendar-frame .original-calendar{height:auto!important;min-height:0;padding:0;overflow:hidden;border-radius:24px;background:#fff}
#original-calendar-frame{width:100%;height:650px;border:0;pointer-events:auto}
.calendar-stage{margin-inline:0}.calendar-stage .demo-controls{margin-top:20px}
.calendar-stage figcaption{margin-top:15px}
.brand-scene{--profile-image:url('assets/salon-hair.jpg')}
.brand-app{background-image:linear-gradient(#ffffffdd,#fffffff5),var(--profile-image)!important;background-size:cover!important;background-position:center!important}
.brand-app>small[data-brand-slogan]{font-size:12px;line-height:1.4;max-width:150px;text-align:center}
@media(max-width:900px){
 .site-header{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
 .hero-device-figure .device-scale{left:50%;top:47%}
 .product-hero .hero-form{transform:translate(-50%,-50%);filter:none}
 .product-hero .hero-copy{transform:none}
 .app-scroll-live .device-scale{left:50%;top:48%}
 @keyframes hero-camera{from{transform:translate3d(-8px,10px,0) rotateX(10deg) rotateY(-22deg) rotateZ(-10deg) scale(1.05)}to{transform:translate3d(0,0,0) rotateX(0) rotateY(-6deg) rotateZ(0) scale(1)}}
 @keyframes journey-camera{from{transform:translate3d(40px,0,0) rotateY(24deg)}to{transform:translate3d(0,0,0) rotateY(0)}}
 .app-scroll-live .scroll-story-footer>p{display:none}
 .app-demo .scroll-chapters button{min-height:44px;font-size:12px;padding-inline:12px}
 .app-demo .immersive-figure figcaption{font-size:12px}
 .calendar-story .wrap{width:calc(100% - 32px)}
 .calendar-stage .calendar-frame{transform:none;will-change:auto}
 .calendar-frame .original-calendar{border-radius:20px;box-shadow:0 12px 32px #2623330b;border:1px solid #ece9f0}
 #original-calendar-frame{height:594px;min-width:0}
 .calendar-stage .demo-steps{display:flex;flex-wrap:wrap;gap:4px}.calendar-stage .demo-steps button{min-height:44px;font-size:12px;padding:8px 10px}.calendar-stage .demo-steps button span{display:none}
}
@media(max-width:600px){
 .app-scroll-live .editorial-copy h2{font-size:30px;line-height:1.1}
 .app-scroll-live .immersive-layout{width:calc(100% - 32px)}
 .app-scroll-live .scroll-story-footer{padding:10px 8px 16px}
 .brand-scene .brand-booking{transform:none!important}
 .feature-selector{justify-content:flex-start;gap:5px}.feature-selector button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.rainbow::after{animation:none;opacity:0}.mini-bars i{transform:none!important;transition:none}.device-body{animation:none!important}}
@media(max-width:600px){
 .personal-scroll .brand-sticky{height:auto;top:64px}
 .personal-live .brand-scene{height:auto;padding:20px}
 .personal-live .brand-world{height:430px;flex:none}
 .personal-live .brand-booking{left:0;top:0;right:0;width:100%;height:270px;bottom:auto;border-radius:18px}
 .personal-live .brand-app{left:0;right:0;top:280px;bottom:auto;width:100%;height:62px;padding:8px 12px;display:grid;grid-template-columns:44px 1fr;grid-template-rows:1fr 1fr;column-gap:12px;align-items:center;text-align:left;border-radius:16px;box-shadow:none}
 .personal-live .brand-app-icon{grid-column:1;grid-row:1/3;width:44px;height:44px;margin:0;border-radius:12px}
 .personal-live .brand-app-icon img{width:29px;height:29px}
 .personal-live .brand-app>strong{font-size:13px;align-self:end;margin:0}
 .personal-live .brand-app>small[data-brand-slogan]{font-size:11px;max-width:none;text-align:left;margin:0;align-self:start}
 .personal-live .brand-message{left:0;right:0;top:352px;bottom:auto;width:100%;min-height:72px;height:auto;padding:12px;box-shadow:none;border-radius:16px}
 .personal-live .brand-message p{font-size:11px;line-height:1.4}.personal-live .brand-message small{font-size:9px}
 .personal-live .brand-controls{padding-top:8px;gap:10px}.personal-live .salon-name-field input{min-height:44px;padding-block:10px}
}