/* A coherent device photograph with native content projected onto each display. */
.stage{--stage-height:clamp(360px,32vw,650px);height:var(--stage-height)}
.specimen{display:block;border:0;isolation:isolate;container-type:size}
.scene-media{position:relative;width:100%;height:100%;container-type:size;overflow:hidden}
.scene-caption,.mobile-scene-meta,.scene-peek{display:none}
.craft-view{background:linear-gradient(105deg,#d9e9f2,#b8d3e5)}
.app-view{background:linear-gradient(110deg,#73797e,#32383e 38%,#1c2127)}
.device-group{position:absolute;width:max(100cqw,150cqh);aspect-ratio:3/2;left:50%;top:50%;transform:translate(-50%,-50%)}
.scene-photo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.device{position:absolute;inset:0;pointer-events:none}
.device--phone{z-index:2}
.device-screen{position:absolute;left:0;top:0;width:640px;height:385px;overflow:hidden;transform-origin:0 0;pointer-events:auto;visibility:hidden;background:#f7fafb}
.screens-ready .device-screen{visibility:visible}
.device--phone .device-screen{width:180px;height:401px;border-radius:22px;background:#f7fafb}
.device-viewport{width:100%;height:100%;container:screen / size}
.screen-camera{position:absolute;top:7px;left:calc(50% - 27px);width:54px;height:15px;border-radius:20px;background:#07090b;box-shadow:inset 0 0 0 1px #15191d;pointer-events:none;z-index:4}
.app-view .device-screen{background:#171c22}
.scene-detail{position:absolute;z-index:5;bottom:20px;left:24px;display:flex;align-items:center;gap:22px;min-height:44px;padding:8px 14px;background:#151b1e;color:#fff;border:1px solid #151b1e;box-shadow:0 3px 12px #00000012;transition:background .25s,box-shadow .25s}
.price-label{display:flex;align-items:center;gap:12px;line-height:1.15}.price-label strong{font-size:15px;font-weight:750;letter-spacing:.12em}.price-label small{font-size:10px;font-weight:500;letter-spacing:.06em;opacity:.8}
.app-view .scene-detail{background:#fff;color:#151b1e;border-color:#fff}
.scene-detail:is(:hover,:focus-visible){background:#29343b;box-shadow:0 5px 16px #00000020}.app-view .scene-detail:is(:hover,:focus-visible){background:#e9eef0}
.detail-arrow{display:grid;place-items:center;width:22px;height:22px;overflow:hidden}
.detail-arrow .icon{grid-area:1/1;width:20px;height:20px;transition:transform .45s var(--ease)}
.detail-arrow .icon+ .icon{transform:translate(-120%,120%)}
.scene-detail:is(:hover,:focus-visible) .icon:first-child{transform:translate(120%,-120%)}
.scene-detail:is(:hover,:focus-visible) .icon+ .icon{transform:translate(0)}

.screen-scroll{position:relative;height:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:#b9c8ce #f7fafb;scroll-behavior:smooth;overscroll-behavior-y:auto;touch-action:pan-y;outline-offset:-3px}
.screen-scroll:focus-visible{outline:2px solid #846a46}
@media(max-width:1050px){.offerings{padding-block:24px 70px}.stage{--stage-height:360px;height:360px}}
@media(max-width:767px){
  .hero.page-width{--gutter:20px}
  
  .stage,.stage.scene-active{display:flex;flex-direction:row;gap:12px;height:auto;width:calc(100% + 20px);padding-right:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;align-items:start;isolation:auto}
  .stage::-webkit-scrollbar{display:none}
  .stage .specimen,.stage.scene-active .specimen{flex:0 0 calc(100% - 44px);width:auto;height:auto;aspect-ratio:auto;min-height:0;margin:0;container-type:normal;overflow:hidden;background:transparent;scroll-snap-align:start}
  .scene-media{height:auto;aspect-ratio:1.28;isolation:isolate}
  .stage .device-group{transform:translate(-50%,-50%) translateX(var(--photo-offset,0px)) scale(1.045)}
  .stage .device-screen{pointer-events:none}
  .stage .scene-detail{bottom:12px;left:12px;min-height:44px;gap:16px;padding:8px 12px;opacity:0;transition:opacity .25s,background .3s}
  .stage .is-mobile-active .scene-detail{opacity:1}
  .scene-peek{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:4;padding:0;color:#f6fafb}
  .scene-peek>span{position:absolute;top:20px;left:12px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:.08em}
  .scene-peek .icon{width:18px;height:18px}
  .craft-view .scene-peek{color:#223b46}
  .craft-view .scene-peek>span{left:auto;right:12px}
  .craft-view .scene-peek .icon{transform:rotate(180deg)}
  .is-mobile-active .scene-peek{display:none}
  .scene-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 0 8px;min-height:88px;color:#111315}
  .specimen:not(.is-mobile-active) .scene-caption{opacity:0}
  .scene-copy{min-width:0}
  .scene-index{display:block;font-size:8px;font-weight:500;letter-spacing:.12em;color:#707a7f;margin-bottom:5px}
  .scene-copy h2{font-size:19px;font-weight:700;line-height:1.5;letter-spacing:-.04em;white-space:nowrap}
  .scene-copy p{font-size:10px;line-height:1.6;color:#646e73;margin-top:4px;white-space:nowrap}
  .mobile-scene-meta{display:flex;align-items:center;gap:12px;min-height:38px;color:#687379;font-size:9px}
  .mobile-scene-count{font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.08em;color:#172229}
  .mobile-scene-progress{display:block;width:40px;height:2px;background:#dfe4e6;overflow:hidden}
  .mobile-scene-progress i{display:block;width:50%;height:100%;background:#172229}
  .mobile-scene-meta>span:last-child{display:flex;align-items:center;gap:8px;margin-left:auto;letter-spacing:.02em}
  .mobile-scene-meta .icon{width:17px;height:17px}
  .offerings{padding-block:24px 52px}
  .no-js .stage{display:flex;flex-direction:column;width:100%;padding:0}
  .no-js .stage .specimen{width:100%;flex:auto;min-height:0;margin:0}
  .no-js .specimen .scene-caption,.no-js .stage .scene-detail{opacity:1}
}


/* Scene identity stays separate from the price navigation. */
.scene-service-name{position:absolute;z-index:3;top:22px;left:24px;font-size:clamp(24px,2.05vw,36px);font-weight:700;line-height:1.4;letter-spacing:-.03em;color:#20343e;pointer-events:none}
.app-view .scene-service-name{color:#f3f6f8}
.stage[data-scene="web"] .craft-view .scene-media,.stage[data-scene="app"] .app-view .scene-media{cursor:pointer}.device-screen{cursor:auto}
.no-js .scene-peek,.no-js .mobile-scene-meta{display:none}











@media(max-width:767px){
 
 
 .scene-service-name{top:14px;left:14px;font-size:20px}
 .price-label strong{font-size:12px}.price-label small{font-size:9px}
 .specimen:not(.is-mobile-active) .scene-service-name{opacity:0}
}