/* Product-first composition: the original brand heading, two genuine app screens.
   Native CSS folding motion with the official Duo cover and genuine app captures. Design 7 / motion 6 / density 3.
   One finite reveal explains the Duo opening; the slab establishes the familiar form. */
.product-hero{padding:25px 24px 15px}
.product-hero .hero-kicker{font-size:13px;margin-bottom:12px;letter-spacing:.12em}
.product-hero h1{font-size:clamp(50px,4.05vw,60px);line-height:1.12}
.product-hero .hero-description{font-size:16px;margin:16px 0 19px}
.hero-family-scene{position:relative;width:min(920px,100%);aspect-ratio:2.17;margin:28px auto 0;isolation:isolate}
.hero-ground{position:absolute;inset:auto 5% 0 9%;height:12%;background:radial-gradient(ellipse,rgba(48,55,70,.18),transparent 68%);filter:blur(13px);pointer-events:none}
.hero-duo{position:absolute;margin:0;left:30%;top:4%;width:61%;aspect-ratio:1646/1178;perspective:1800px;z-index:1}
.hero-duo-arrival,.hero-duo-angle,.hero-phone-arrival,.hero-phone-angle{width:100%;height:100%;transform-style:preserve-3d}
.hero-duo-angle{transform:rotateZ(1.25deg)}
.hero-duo .fold-device{transition:none}
.hero-duo .fold-flat{box-shadow:inset 0 0 0 1px #252629,0 0 0 1px #4c4e52,10px 22px 29px -19px rgba(32,38,52,.5)}
.hero-phone{position:absolute;margin:0;left:11%;top:0;width:20.5%;aspect-ratio:1320/2868;z-index:2;perspective:1800px}
.hero-phone-angle{transform:rotateZ(-6deg)}
.hero-phone-body{height:100%;padding:3px;border:1px solid #91949a;border-radius:30px;background:linear-gradient(115deg,#e4e6e9 0%,#7b7f86 30%,#cbd0d5 55%,#82868c 100%);box-shadow:0 0 0 1px rgba(45,49,56,.2),-9px 21px 30px -18px rgba(32,38,52,.55)}
.hero-phone-screen{height:100%;overflow:hidden;border:3px solid #17181b;border-radius:26px;background:#101012;-webkit-mask-image:linear-gradient(#fff,#fff);mask-image:linear-gradient(#fff,#fff)}
.hero-phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.hero-motion-bar{display:flex;justify-content:flex-end;width:min(1120px,100%);margin:2px auto 0;min-height:44px}
.hero-motion-control{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:108px;padding:10px 15px;border:0;border-radius:99px;background:transparent;color:var(--secondary);font-size:12px;line-height:1.5;transition:background .2s,color .2s}
.hero-motion-control:hover{background:var(--page);color:var(--ink)}
.hero-motion-control [data-hero-motion-symbol]{font-size:17px;line-height:1;width:17px;text-align:center}
.hero-motion-control[hidden]{display:none}
.hero-motion-control:focus-visible,.hero-media-error button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hero-media-error{margin:0 auto 10px;font-size:13px;line-height:1.8;color:var(--secondary)}
.hero-media-error button{border:0;min-height:44px;padding:5px;background:transparent;color:var(--accent);text-decoration:underline}
.product-hero[data-hero-playing=true] .hero-duo-arrival,.product-hero[data-hero-playing=true] .hero-phone-arrival{will-change:transform}
@media(min-width:768px) and (max-height:800px){
  .product-hero{padding-top:20px}
  .product-hero h1{font-size:48px}
  .product-hero .hero-kicker{font-size:12px;margin-bottom:9px}
  .product-hero .hero-description{font-size:14px;margin:12px 0 15px}
  .hero-family-scene{width:min(740px,100%);margin-top:23px}
}
@media(max-width:767px){
  .product-hero{padding:30px 14px 9px;border-radius:34px}
  .product-hero .hero-kicker{font-size:12px;margin-bottom:17px}
  .product-hero h1{font-size:clamp(39px,10.5vw,58px);line-height:1.14}
  .product-hero .hero-description{font-size:14px;letter-spacing:0;margin:19px 0 21px}
  .hero-family-scene{width:min(510px,100%);aspect-ratio:1.17;margin-top:36px}
  .hero-duo{left:18%;top:2%;width:79%;perspective:1100px}
  .hero-duo .fold-device{--case-radius:17px}
  .hero-duo-angle{transform:rotateZ(2deg)}
  .hero-phone{left:5%;top:21%;width:31.5%}
  .hero-phone-angle{transform:rotateZ(-7deg)}
  .hero-phone-body{padding:2px;border-radius:21px;box-shadow:0 0 0 1px rgba(45,49,56,.2),-5px 16px 22px -13px rgba(32,38,52,.55)}
  .hero-phone-screen{border-width:2px;border-radius:18px}
  .hero-duo .fold-flat,.hero-duo .fold-left,.hero-duo .fold-right{border-radius:17px}
  .hero-duo .fold-left{border-top-right-radius:0;border-bottom-right-radius:0}
  .hero-duo .fold-right{border-top-left-radius:0;border-bottom-left-radius:0}
  .hero-duo .fold-flat{padding:4px}
  .hero-duo .fold-flat img,.hero-duo .fold-inner img{border-radius:12px}
  .hero-ground{left:1%;right:0;bottom:0;height:13%;filter:blur(9px)}
  .hero-motion-bar{margin-top:3px}
  .hero-motion-control{min-width:104px;padding-inline:12px;font-size:11px}
}
@media(max-width:359px){
  .product-hero{padding-inline:12px}
  .product-hero .hero-description{font-size:12px}
  .hero-family-scene{margin-top:32px}
  .hero-phone-body{border-radius:18px}.hero-phone-screen{border-radius:15px}
}
@media(prefers-reduced-motion:reduce){
  .product-hero *{animation:none!important;transition:none!important}
  .hero-duo-arrival,.hero-phone-arrival{transform:none!important;opacity:1!important}
  .hero-motion-control{display:none}
}
@media(forced-colors:active){.hero-motion-control{border:1px solid ButtonText}}