/* A restrained product system: one expressive hero, straight feature devices. */
.hero h1 { font-size:clamp(64px,7.6vw,106px); }

/* Keep the feature iPhones thin and familiar, not like decorative boxes. */
.feature { min-height:650px; padding-top:100px; padding-bottom:100px; gap:clamp(44px,8vw,128px); }
.iphone-card,.iphone-mini {
  overflow:visible;
  border:6px solid #12161d;
  border-radius:34px;
  background:#12161d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 22px 40px rgba(12,43,91,.19),0 5px 10px rgba(0,0,0,.16);
}
.iphone-card::before,.iphone-mini::before { display:none; }
.iphone-card::after,.iphone-mini::after { inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); }
.iphone-card img,.iphone-mini img { border-radius:27px; }
.iphone-mini { border-width:5px; border-radius:25px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 25px rgba(12,43,91,.16); }
.iphone-mini img { border-radius:20px; }
.phone-art::before,.widget-gallery::before,.health-pair::before { opacity:.72; }

/* Apple Watch: a compact rounded-square case, crown, and continuous sport band. */
.health-pair { gap:26px; }
.health-phone { width:195px; }
.watch-stage { width:190px; height:368px; }
.watch-shadow { width:250px; height:210px; opacity:.7; }
.watch-device {
  width:176px;
  height:214px;
  padding:7px;
  border:1px solid rgba(227,237,246,.8);
  border-radius:49px;
  background:linear-gradient(112deg,#e9edf2 0%,#8895a0 4%,#2c343d 10%,#151b22 72%,#7a8894 100%);
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.68),inset -1px -1px 2px rgba(0,0,0,.5),0 25px 40px rgba(4,35,82,.31);
  transform:perspective(900px) rotateX(4deg) rotateY(-13deg) rotateZ(-2deg);
}
.watch-device::after { inset:3px; border-radius:45px; }
.watch-screen { border-radius:42px; box-shadow:inset 0 0 0 1px #030609,inset 0 8px 16px rgba(255,255,255,.07); }
.watch-strap { width:91px; height:142px; border-radius:28px; background:linear-gradient(90deg,#0a0f15,#2b3540 48%,#0a0f15); box-shadow:inset 1px 0 rgba(255,255,255,.11),inset -1px 0 rgba(0,0,0,.5); }
.watch-strap-top { bottom:calc(100% - 24px); }
.watch-strap-bottom { top:calc(100% - 24px); }
.watch-lug { width:108px; height:24px; border-radius:14px; background:linear-gradient(90deg,#26313c,#a4b1bc 50%,#26313c); }
.watch-lug-top { top:-7px; }.watch-lug-bottom { bottom:-7px; }
.watch-crown { right:-15px; top:76px; width:14px; height:34px; border-radius:0 8px 8px 0; }
.watch-button { right:-12px; top:124px; width:8px; height:22px; }

/* A composed device family, rather than one flat screenshot. */
.device-ecosystem { position:relative; width:min(540px,100%); height:430px; justify-self:center; }
.device-ecosystem::before { content:""; position:absolute; inset:13% 4% 4%; border-radius:50%; background:radial-gradient(ellipse,rgba(54,149,255,.23),transparent 67%); }
.macbook-device { position:absolute; z-index:1; left:0; top:24px; width:345px; }
.macbook-screen { position:relative; overflow:hidden; aspect-ratio:16/10; padding:8px; border:5px solid #111820; border-bottom-width:7px; border-radius:13px 13px 4px 4px; background:linear-gradient(140deg,#7e8995,#202933 8%,#111820); box-shadow:0 22px 36px rgba(10,35,72,.26); }
.macbook-screen img { width:100%; height:100%; object-fit:cover; border-radius:4px; }
.macbook-camera { position:absolute; z-index:2; top:5px; left:50%; width:5px; height:5px; border-radius:50%; background:#252e38; transform:translateX(-50%); }
.macbook-base { position:absolute; left:-4%; bottom:-13px; width:108%; height:14px; border-radius:3px 3px 13px 13px; background:linear-gradient(180deg,#aab3bc,#66727c 42%,#36414b); box-shadow:0 12px 19px rgba(5,22,48,.18); }
.ipad-device { position:absolute; z-index:2; right:4px; top:73px; width:204px; aspect-ratio:4/3; padding:7px; border:5px solid #242c35; border-radius:19px; background:linear-gradient(135deg,#bcc6ce,#53616d 5%,#202831); box-shadow:0 22px 36px rgba(11,40,82,.25); }
.ipad-screen { height:100%; overflow:hidden; border-radius:10px; background:#191b1d; }.ipad-screen img { width:100%; height:100%; object-fit:cover; }
.ipad-camera { position:absolute; top:5px; left:50%; width:4px; height:4px; border-radius:50%; background:#4d5a67; transform:translateX(-50%); }
.ecosystem-iphone { position:absolute; z-index:4; left:42px; bottom:0; width:93px; aspect-ratio:1206/2622; border:5px solid #111820; border-radius:19px; background:#111820; box-shadow:0 18px 29px rgba(8,34,72,.25); }
.ecosystem-iphone::after { box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }.ecosystem-iphone img { border-radius:14px; }
.ecosystem-watch { position:absolute; z-index:3; right:46px; bottom:8px; width:105px; height:142px; display:grid; place-items:center; transform:rotate(-5deg); }
.ecosystem-watch-case { position:relative; z-index:1; width:78px; height:94px; padding:4px; border:1px solid #bcc6ce; border-radius:24px; background:linear-gradient(125deg,#eef2f5,#6e7a86 7%,#202933 17%,#4e5b67); box-shadow:0 15px 24px rgba(8,34,72,.24); }
.ecosystem-watch-screen { width:100%; height:100%; overflow:hidden; border-radius:20px; background:#000; }.ecosystem-watch-screen img { width:100%; height:100%; object-fit:cover; }
.ecosystem-watch-band { position:absolute; z-index:0; width:43px; height:54px; border-radius:17px; background:linear-gradient(90deg,#0b1016,#35414d 50%,#0b1016); }.ecosystem-watch-band-top { top:-2px; }.ecosystem-watch-band-bottom { bottom:-2px; }
.ecosystem-watch-crown { position:absolute; right:-9px; top:35px; width:8px; height:17px; border-radius:0 5px 5px 0; background:repeating-linear-gradient(0deg,#81909b 0 2px,#46535f 2px 4px); }

@media (max-width:800px) {
  .feature { min-height:0; padding-top:84px; padding-bottom:84px; }
  .health-pair { gap:24px; }.health-phone { width:195px; }.watch-stage { width:190px; height:360px; }
  .device-ecosystem { width:500px; max-width:100%; }.macbook-device { width:320px; }.ipad-device { width:188px; }
}

@media (max-width:480px) {
  .hero h1 { font-size:64px; }
  .feature { padding-top:72px; padding-bottom:72px; }
  .iphone-card { border-width:5px; border-radius:31px; }.iphone-card img { border-radius:25px; }
  .health-pair { gap:10px; }.health-phone { width:150px; }.watch-stage { width:142px; height:300px; }.watch-device { transform:perspective(900px) rotateX(4deg) rotateY(-13deg) rotateZ(-2deg) scale(.7); }
  .device-ecosystem { height:310px; width:340px; }.macbook-device { width:220px; top:18px; }.macbook-screen { padding:5px; border-width:3px; border-bottom-width:5px; border-radius:9px 9px 3px 3px; }.macbook-base { height:9px; bottom:-9px; }.ipad-device { right:1px; top:50px; width:130px; padding:4px; border-width:3px; border-radius:13px; }.ecosystem-iphone { left:24px; width:63px; border-width:3px; border-radius:13px; }.ecosystem-iphone img { border-radius:9px; }.ecosystem-watch { right:19px; bottom:4px; transform:rotate(-5deg) scale(.78); transform-origin:bottom right; }
}