/* Hardware is separate from the live app screens: metal edge, glass, buttons and crown. */
.device-stage { position:relative; padding:18px 18px 90px; isolation:isolate; overflow:clip; overflow-clip-margin:20px; }
.phone-model {
  position:relative; width:70%; max-width:354px; margin-left:4%; padding:5px;
  border-radius:14% / 6.5%; transform:rotate(-5deg);
  background:linear-gradient(110deg,#676d74 0%,#f0f1f2 4%,#a0a7ae 8%,#cfd3d7 15%,#727a82 30%,#e4e6e8 53%,#626970 72%,#cbd0d4 94%,#5d646b 100%);
  box-shadow:inset 0 0 0 1px #555c65,inset 2px 0 2px #ffffffd9,inset -2px 0 1px #33383d,12px 26px 35px #11263126,1px 3px 4px #11263130;
}
.phone-bezel { padding:5px; border-radius:13% / 6%; background:#080a0c; box-shadow:0 0 0 1px #171a1d; overflow:hidden; }
.phone-display { overflow:hidden; border-radius:12.5% / 5.75%; background:var(--seepegel-background); }
.phone-button { position:absolute; width:3px; border-radius:2px; background:linear-gradient(90deg,#646b72,#e1e4e7,#656c74); box-shadow:0 0 0 .5px #596068; }
.phone-button.action { left:-3px; top:16%; height:3.5%; }
.phone-button.volume-up { left:-3px; top:24%; height:7%; }
.phone-button.volume-down { left:-3px; top:33%; height:7%; }
.phone-button.power { right:-3px; top:27%; height:11%; }
.phone-antenna { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,#58616b 5px,transparent 5px,transparent calc(100% - 5px),#58616b calc(100% - 5px)); }
.phone-antenna.top { top:11%; }.phone-antenna.bottom { bottom:11%; }
.watch-model { position:relative; width:194px; isolation:isolate; }
.device-stage>.watch-model { position:absolute; width:37%; max-width:196px; right:2%; bottom:19%; transform:rotate(9deg); }
.watch-band {
  position:absolute; width:67%; height:186%; top:-43%; left:16.5%; z-index:-1;
  border-radius:28% / 14%; border:1px solid #11171d;
  background:linear-gradient(90deg,#0f141a,#303a43 9%,#1b242d 17%,#202b34 50%,#17212a 83%,#37424c 94%,#101820);
  box-shadow:inset 2px 0 2px #74818a40,inset -2px 0 2px #0008;
}
.watch-band::after { content:''; position:absolute; width:10%; height:20%; bottom:4%; left:45%; background:radial-gradient(ellipse 42% 17% at center,#080e14 80%,transparent 100%) center / 100% 22% repeat-y; }
.watch-case {
  position:relative; padding:6px; border-radius:25% / 20%;
  background:linear-gradient(120deg,#777e85,#e6e9eb 10%,#9ba3aa 25%,#5b646e 53%,#c4cacf 78%,#606a74);
  box-shadow:inset 0 0 0 1px #404a54,inset 1px 1px 2px #fff9,7px 17px 26px #0a1f2b38;
}
.watch-bezel { border-radius:23% / 18%; padding:5px; background:#030404; overflow:hidden; box-shadow:0 0 0 1px #12191e; }
.watch-display { border-radius:21% / 17%; overflow:hidden; background:#000; }
.watch-crown { position:absolute; right:-6%; top:26%; width:8%; height:19%; z-index:-1; border-radius:35%; border:1px solid #59636e; background:repeating-linear-gradient(0deg,#65717c 0px,#d5dadd 1px,#87929b 2px,#313d48 3px); box-shadow:inset -2px 0 2px #131c25; }
.watch-side { position:absolute; right:-2%; top:57%; width:4%; height:20%; border-radius:4px; background:linear-gradient(90deg,#4f5b67,#b3bdc6,#515f6b); z-index:-1; }
.app-screen {
  width:100%; height:auto; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;
  font-variant-numeric:tabular-nums; color:var(--device-text); fill:var(--device-text);
  --device-background:var(--seepegel-background); --device-text:var(--seepegel-text-primary);
  --device-muted:var(--seepegel-text-secondary); --device-accent:var(--seepegel-accent);
  --device-accent-strong:var(--seepegel-accent-strong); --device-surface:var(--seepegel-surface); --device-border:var(--seepegel-border);
  --device-system:#080d10;
}
.screen-background { fill:var(--device-background); }.screen-muted { fill:var(--device-muted); }
.system-ink { fill:var(--device-system); color:var(--device-system); }
.screen-share rect { fill:var(--device-background); stroke:var(--device-border); stroke-width:.6; }
.screen-card { fill:var(--device-surface); stroke:var(--device-border); stroke-width:1; }
.tab-glass { fill:var(--device-background); stroke:var(--device-border); stroke-width:.6; }
.tab-selected { fill:var(--device-text); opacity:.07; }.tab-active { color:var(--device-accent-strong); fill:var(--device-accent-strong); }
[data-device-status] { fill:var(--seepegel-error-text,#993f42); }[data-device-status].data-available { fill:#28c65b; }
.device-trend { fill:none; stroke:var(--device-accent-strong); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.device-trend-dot { fill:var(--device-accent-strong); }
.watch-screen { --device-text:#f3f7f6; --device-muted:#acbdc1; --device-accent:#73d4de; }
.feature-image.watch-live { overflow:visible; background:transparent; align-items:center; height:248px; padding:45px 0; }
.watch-live .watch-model { width:122px; transform:rotate(-7deg); }
.product figcaption { position:relative; margin-top:0; }
.chart-band-note { font-size:12px; color:var(--seepegel-text-secondary); margin:8px 0 0; }
@media(prefers-color-scheme:dark) { .iphone-screen { --device-system:#f3f7f6; } }
[data-theme=dark] .iphone-screen { --device-system:#f3f7f6; }
[data-theme=light] .iphone-screen { --device-system:#080d10; }
@media(max-width:1199px) {
  .device-stage { padding:15px 8px 76px; }
  .phone-model { width:80%; margin-left:0; }
  .device-stage>.watch-model { width:42%; right:-1%; bottom:18%; }
}
@media(max-width:767px) {
  .product { width:min(390px,100%); }
  .device-stage { padding:18px 8px 70px; }
  .phone-model { width:74%; margin-left:3%; }
  .device-stage>.watch-model { width:39%; right:1%; bottom:20%; }
  .phone-model { padding:4px; }.phone-bezel { padding:4px; }
  .watch-case { padding:4px; }.watch-bezel { padding:3px; }
}