/* Landing-only presentation. Device geometry/assets are reused unchanged. */
.hero-device-product{padding:28px clamp(16px,2vw,40px);min-width:0;overflow:hidden;background:#dfeade}
.phone-demo{width:100%;max-width:1000px;margin:auto;text-align:center}
.demo-kicker{display:flex;justify-content:center;gap:14px;font-size:14px;line-height:1.6;color:#3c5845}
.demo-kicker>span{color:#75917b}
.demo-kicker>.demo-platform{color:#3c5845}
.demo-stage{position:relative;width:100%;height:clamp(400px,65svh,960px);isolation:isolate;overflow:hidden}
.demo-scene{position:absolute;left:50%;top:50%;width:760px;height:760px;transform:translate(-50%,-50%) scale(var(--demo-scale,.6));transform-origin:center}
.demo-phone{position:absolute;top:50%;left:50%;transform-origin:center;pointer-events:none;filter:drop-shadow(0 24px 20px #1b3e2426)}
.demo-iphone{width:511px;height:968px;transform:translate(-50%,-50%) translate(210px,45px) rotate(0deg) scale(.52);z-index:2}
.demo-android{width:566px;height:1022px;transform:translate(-50%,-50%) translate(-45px,240px) rotate(-90deg) scale(.483);z-index:3}
.demo-tablet{width:1080px;height:824px;transform:translate(-50%,-50%) translate(-30px,-85px) scale(.62);background:linear-gradient(145deg,#66706c,#202422 28%,#101311 70%,#66706c);border:2px solid #88918c;border-radius:40px;box-shadow:inset 0 0 0 2px #101511;z-index:1}
.demo-tablet:before{content:'';position:absolute;top:8px;left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:#080b09;box-shadow:inset 1px 1px 2px #58665f}
.demo-bezel{position:absolute;inset:0;width:100%;height:100%;max-width:none;user-select:none}
.demo-iphone>.demo-bezel{z-index:3}
.demo-screen{position:absolute;background:#fff;overflow:hidden;isolation:isolate}
.demo-iphone .demo-screen{left:59px;top:58px;width:393px;height:852px;border-radius:42px}
.demo-android .demo-screen{left:70px;top:35px;width:427px;height:952px;border-radius:58px}
.demo-tablet .demo-screen{left:24px;top:24px;width:1032px;height:776px;border-radius:20px}
.demo-view{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
.demo-landscape{opacity:0;transform-origin:top left}
.demo-iphone .demo-landscape{width:852px;height:393px;transform:translateX(393px) rotate(90deg)}
.demo-android .demo-portrait{opacity:0}
.demo-android .demo-landscape{opacity:1;width:952px;height:427px;transform:translateX(427px) rotate(90deg)}
.demo-capture{position:absolute;max-width:none!important;width:1880px!important;height:1314px!important;opacity:0;user-select:none}
.demo-iphone .demo-portrait .demo-capture{left:-743.5px;top:-231px}
.demo-iphone .demo-landscape .demo-capture{left:-514px;top:-460.5px}
.demo-android .demo-portrait .demo-capture{left:-727px;top:-181px}
.demo-android .demo-landscape .demo-capture{left:-464px;top:-443px}
.demo-tablet .demo-capture{left:-426px;top:-271px}
.demo-capture.is-poster{opacity:1}
.demo-copy-layer{pointer-events:none}
.demo-copy-layer>span{position:absolute;display:flex;align-items:center;padding:0 2px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-align:left;font-family:Arial,sans-serif;line-height:1.2}
.demo-tap{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:3px solid #1f6b45;background:#e7fff0aa;box-shadow:0 0 0 8px #3e9e6726;z-index:5;opacity:0}
.demo-tap:after{content:'';position:absolute;inset:12px;background:#1f6b45;border-radius:50%}
.demo-caption{position:relative;display:grid;overflow:hidden;font-size:clamp(18px,1.5vw,23px);line-height:1.5;letter-spacing:-.02em;color:#214e33;min-height:1.5em;margin-top:0}
.demo-caption-line{grid-area:1/1;align-self:center;min-width:0;visibility:hidden}
.demo-controls{margin:18px auto 0;max-width:570px;min-height:44px;opacity:0;visibility:hidden;pointer-events:none}
.demo-controls.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .7s ease}
.demo-control-row{display:flex;align-items:center;justify-content:flex-end;gap:18px;text-align:left}
.demo-control-row button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;background:transparent;border:0;padding:0 2px;color:#1f5939;font-size:16px}
.demo-control-row button:hover{text-decoration:underline;text-underline-offset:4px}
.demo-control-row svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.demo-static-note{font-size:14px;line-height:1.6;color:#425c49;margin-top:12px}
.demo-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:1100px) and (min-width:761px){
  .hero-main{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .hero-copy{padding-inline:28px}
  .hero-copy h1{font-size:clamp(48px,5.2vw,60px)}
  .hero-device-product{padding-inline:18px}
  .demo-control-row{gap:12px}
}
@media(max-width:760px){
  .hero-device-product{padding:20px 24px 18px;overflow:hidden}
  .demo-stage{height:clamp(240px,calc(100svh - 580px),400px)}
  .demo-scene{--demo-scale:.3}
  .demo-kicker{font-size:14px}
  .demo-caption{font-size:19px}
  .demo-controls{margin-top:10px}
  .demo-control-row{gap:14px}
}
@media(max-width:370px){.hero-device-product{padding-inline:18px}.demo-control-row{gap:12px}.demo-scene{--demo-scale:.28}}
@media(prefers-reduced-motion:reduce){.demo-controls.is-visible{transition:none}}
@media print{.hero-device-product{display:none}}