/* One device geometry for every real Better capture. The image sets the height. */
.atmosphere-site .phone {
  --phone-radius: 42px;
  position: relative;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #6d7075;
  border-radius: var(--phone-radius);
  overflow: visible;
  background: linear-gradient(105deg,#d8dbdf 0%,#777c82 3%,#25282d 7%,#101114 48%,#363a40 92%,#babec4 98%,#6d7279 100%);
  box-shadow: inset 0 0 0 1px #e1e4e875,0 20px 44px -16px #0a152e3d,0 4px 9px #11182718;
  line-height: 0;
  isolation: isolate;
}
.atmosphere-site .phone::before,.atmosphere-site .phone::after {
  content: '';position: absolute;width: 2px;border-radius: 2px;background: #70757c;z-index: -1;
}
.atmosphere-site .phone::before { left: -3px;top: 22%;height: 7%;box-shadow: 0 45px 0 #70757c; }
.atmosphere-site .phone::after { right: -3px;top: 29%;height: 13%; }
.atmosphere-site .phone>img,.atmosphere-site .phone .demo-viewport {
  display: block;width: 100%;height: auto;aspect-ratio: 23/50;
  border-radius: calc(var(--phone-radius) - 6px);overflow: hidden;
}
.atmosphere-site .phone>img { object-fit: contain;background: #080909; }
.atmosphere-site .demo-viewport { position: relative;isolation: isolate;background: #080909; }
.atmosphere-site .demo-phone .demo-screen {
  position: absolute;inset: 0;width: 100%;height: 100%;object-fit: contain;
  border-radius: 0;transition: opacity .4s ease;pointer-events: none;
}
.atmosphere-site .metric-phone .metric-incoming {
  position: absolute;inset: 5px;width: calc(100% - 10px);height: auto;
  aspect-ratio: 23/50;object-fit: contain;border-radius: calc(var(--phone-radius) - 6px);
}

/* Bevel's clear focal hierarchy: a main phone with its Watch companion. */
.atmosphere-home .hero-showcase {
  width: 100%;max-width: 650px;transform: none;
}
.atmosphere-home .hero-experience .hero-stage {
  --hero-phone-width: 270px;
  position: relative;display: block;width: 100%;max-width: 620px;height: auto;
  min-height: 0;margin: 0 auto;padding: 4px 0 30px;left: auto;transform: none;
}
.atmosphere-home .hero-experience .demo-phone {
  --phone-radius: 43px;
  position: relative;top: auto;width: var(--hero-phone-width);margin: 0 auto;
  left: auto;translate: -32px 0;transform: perspective(1600px) rotateY(-8deg) rotateZ(-4deg);
  border-width: 1px;border-radius: var(--phone-radius);
  box-shadow: inset 0 0 0 1px #e1e4e875,4px 4px 0 #5b616b,8px 8px 0 -2px #8f969f,0 28px 48px -15px #10234455;
}
.atmosphere-home .hero-experience .watch-product {
  position: absolute;top: 36%;left: calc(50% + 52px);right: auto;bottom: auto;
  width: 166px;aspect-ratio: 7/11;transform: rotate(5deg);z-index: 3;
  filter: drop-shadow(0 16px 15px #0b183544);
}
.watch-product .watch-shell { display: block;width: 100%;height: auto; }
.watch-actual {
  position: absolute;left: 10.8%;top: 22.2%;width: 77.7%;height: 57.6%;
  object-fit: cover;border-radius: 22%;background: #000;
}
.atmosphere-home .preview-controls { max-width: 560px;gap: 10px; }
.atmosphere-home .preview-views { justify-content: center;flex-wrap: wrap;border-radius: 22px;overflow: visible; }
.atmosphere-home .preview-views button { min-height: 38px; }
.atmosphere-home .preview-play { min-width: 38px;min-height: 38px; }

/* Full devices stay inside naturally sized feature canvases. */
.atmosphere-site .daily-visual {
  height: auto;min-height: 0;padding: 48px 30px;align-items: center;
}
.atmosphere-site .daily-visual .phone { width: min(100%,268px);flex: none; }
.atmosphere-site .beto-section .phone { width: min(100%,268px);margin-inline: auto; }
.atmosphere-site .food-visual {
  height: auto;min-height: 0;padding: 48px 30px;display: grid;place-items: center;
}
.atmosphere-site .food-visual .phone { width: min(100%,268px);margin: 0; }
.atmosphere-site .food-visual .meal-cutout { display: none; }
.atmosphere-site .sub-visual:has(.phone) { max-height: none; }
.atmosphere-site .sub-hero .phone { width: min(100%,248px); }
:root[data-theme=dark] .atmosphere-site .phone { box-shadow: inset 0 0 0 1px #e1e4e860,0 22px 50px -12px #0009; }
:root[data-theme=dark] .atmosphere-home .hero-experience .demo-phone { box-shadow: inset 0 0 0 1px #e1e4e875,4px 4px 0 #5b616b,8px 8px 0 -2px #8f969f,0 28px 48px -15px #000b; }
@media(max-width:1000px) {
  .atmosphere-home .hero-experience .hero-stage { --hero-phone-width: 248px; }
  .atmosphere-home .hero-experience .watch-product { width: 150px;left: calc(50% + 43px); }
}
@media(max-width:760px) {
  .atmosphere-home .hero-showcase { max-width: 430px; }
  .atmosphere-home .hero-experience .hero-stage { --hero-phone-width: 216px;padding-bottom: 28px; }
  .atmosphere-home .hero-experience .demo-phone { --phone-radius: 35px;translate: -23px 0; }
  .atmosphere-home .hero-experience .watch-product { width: 128px;left: calc(50% + 40px);top: 38%; }
  .atmosphere-home .preview-controls { align-items: center;max-width: 360px; }
  .atmosphere-home .preview-views { flex: 1;padding: 4px;gap: 1px; }
  .atmosphere-home .preview-views button { font-size: 9px;padding: 8px 10px;min-height: 36px; }
  .atmosphere-site .daily-visual,.atmosphere-site .food-visual { padding: 35px 25px; }
  .atmosphere-site .daily-visual .phone,.atmosphere-site .food-visual .phone,.atmosphere-site .beto-section .phone { --phone-radius: 38px;width: min(100%,246px); }
}
@media(max-width:390px) {
  .atmosphere-home .hero-experience .hero-stage { --hero-phone-width: 198px; }
  .atmosphere-home .hero-experience .demo-phone { --phone-radius: 33px;translate: -24px 0; }
  .atmosphere-home .hero-experience .watch-product { width: 115px;left: calc(50% + 33px); }
  .atmosphere-home .preview-views button { padding-inline: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .atmosphere-site .demo-phone .demo-screen,.atmosphere-site .metric-phone img { transition: none; }
}