/* Device hardware is decorative; the screen artwork remains the original Yours content. */
.phone-stage {
  --phone-center-width: 224px;
  --phone-side-width: 200px;
  position: relative;
  isolation: isolate;
  width: calc(100% - 40px);
  max-width: 700px;
  height: 514px;
  margin-inline: auto;
  margin-top: 40px;
}

.phone-link {
  position: absolute;
  display: block;
  width: var(--phone-side-width);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}

.phone-link .iphone, .phone-link .phone-label { pointer-events: auto; }

.phone-link--left { left: 2%; top: 30px; z-index: 1; }
.phone-link--right { right: 2%; top: 30px; z-index: 2; }
.phone-link--center {
  left: calc((100% - var(--phone-center-width)) / 2);
  top: 0;
  z-index: 3;
  width: var(--phone-center-width);
}

.phone-link:focus-visible {
  z-index: 4;
  outline: 3px solid #007aff;
  outline-offset: 7px;
  border-radius: 42px;
}

.iphone {
  --phone-radius: 38px;
  --phone-bezel: 7px;
  --island-height: 18px;
  --artwork-inset: 32px;
  --screen-color: #f3f4ef;
  --home-indicator: #17191c;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 2.14;
  border: 1px solid #5f6267;
  border-radius: var(--phone-radius);
  background: linear-gradient(100deg, #202226 0%, #777a80 1%, #24262a 2.4%, #090a0c 4.2%, #090a0c 95.8%, #41444a 97.4%, #83868b 99%, #24262a 100%);
  box-shadow: inset 0 0 0 1px #a0a3a870, inset 0 0 0 3px #15171a, 0 18px 26px -17px #111b2c45, 0 5px 9px -5px #111b2c45;
}

.phone-link--center .iphone {
  --phone-radius: 42px;
  --island-height: 20px;
  --artwork-inset: 35px;
  box-shadow: inset 0 0 0 1px #a0a3a870, inset 0 0 0 3px #15171a, 0 24px 34px -21px #111b2c50, 0 7px 12px -7px #111b2c45;
}

.iphone::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 3px;
  border: 1px solid #060709;
  border-radius: calc(var(--phone-radius) - 3px);
  box-shadow: inset 0 0 0 1px #ffffff08;
  pointer-events: none;
}

.iphone::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 19%;
  right: 19%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c7c9cb75 45%, #94979b60 60%, transparent);
  pointer-events: none;
}

.iphone-button {
  position: absolute;
  left: -3px;
  width: 3px;
  border: 1px solid #4b4e53;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, #8c8f94, #3a3d42 52%, #181a1d);
  box-shadow: -1px 0 1px #ffffff20;
  pointer-events: none;
}
.iphone-button--action { top: 17%; height: 4%; }
.iphone-button--volume { top: 25%; height: 7%; }
.iphone-button--volume::after {
  content: "";
  position: absolute;
  top: calc(100% + 8px);
  left: -1px;
  width: 3px;
  height: 100%;
  box-sizing: border-box;
  border: inherit;
  border-radius: inherit;
  background: inherit;
}
.iphone-button--power {
  left: auto;
  right: -3px;
  top: 28%;
  height: 13%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #181a1d, #45484d 55%, #92959a);
  box-shadow: 1px 0 1px #ffffff20;
}

.iphone-screen {
  position: absolute;
  inset: var(--phone-bezel);
  overflow: hidden;
  border-radius: calc(var(--phone-radius) - var(--phone-bezel));
  background: var(--screen-color);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #ffffff0a;
}
.phone-link[data-example="type"] .iphone {
  --screen-color: #294dde;
  --home-indicator: #fff8e8;
}
.phone-link[data-example="collage"] .iphone { --screen-color: #f3f4ef; }
.phone-link[data-example="journal"] .iphone { --screen-color: #f6e8e8; }

.iphone-screen::after {
  content: "";
  position: absolute;
  z-index: 6;
  bottom: 6px;
  left: 35%;
  width: 30%;
  height: 3px;
  border-radius: 99px;
  background: var(--home-indicator);
  opacity: .86;
  pointer-events: none;
}

.iphone-island {
  position: absolute;
  z-index: 5;
  top: 9px;
  left: 35%;
  width: 30%;
  height: var(--island-height);
  box-sizing: border-box;
  border: 1px solid #000;
  border-radius: 99px;
  background: #030405;
  box-shadow: 0 0 0 1px #121419, inset 0 1px 1px #373b4038;
  pointer-events: none;
}
.iphone-island::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  width: calc(var(--island-height) * .39);
  height: calc(var(--island-height) * .39);
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 37% 32%, #475e8155 0 12%, #152437 20%, #060b14 47%, #020304 70%);
  box-shadow: 0 0 0 1px #151b23, inset 0 0 0 1px #0b1017;
}
.iphone-island::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 14%;
  width: 32%;
  height: 2px;
  border-radius: 99px;
  background: #101319;
}

.iphone-page {
  position: absolute;
  top: var(--artwork-inset);
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

.phone-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  color: #5c6470;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}
.phone-label > span { font-size: 15px; line-height: 1; }
.phone-link--center .phone-label { color: #29323e; }

/* The genuine app capture already includes its own status bar. */
.iphone--app { width: 258px; --phone-radius: 42px; --island-height: 20px; --artwork-inset: 0px; }
.iphone-capture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 760px) {
  .phone-stage {
    --phone-center-width: 210px;
    --phone-side-width: 188px;
    height: 480px;
  }
  .phone-link--left, .phone-link--right { top: 25px; }
  .iphone { --phone-radius: 34px; --phone-bezel: 6px; --island-height: 16px; --artwork-inset: 30px; }
  .phone-link--center .iphone { --phone-radius: 37px; --island-height: 18px; --artwork-inset: 32px; }
  .iphone--app { --phone-radius: 42px; --phone-bezel: 7px; --island-height: 20px; --artwork-inset: 0px; }
}

@media (max-width: 520px) {
  .phone-stage {
    --phone-center-width: clamp(134px, 41.0256vw, 160px);
    --phone-side-width: clamp(120px, 36.9231vw, 144px);
    height: calc(var(--phone-center-width) * 2.14 + 4px);
  }
  .phone-link--left { left: 3px; top: 22px; }
  .phone-link--right { right: 3px; top: 22px; }
  .iphone { --phone-radius: 27px; --phone-bezel: 5px; --island-height: 12px; --artwork-inset: 25px; }
  .phone-link--center .iphone { --phone-radius: 30px; --island-height: 14px; --artwork-inset: 27px; }
  .iphone-button { width: 2px; left: -2px; }
  .iphone-button--volume::after { width: 2px; top: calc(100% + 5px); }
  .iphone-button--power { left: auto; right: -2px; }
  .iphone-island { top: 7px; }
  .iphone-island::before { right: 4px; }
  .iphone-screen::after { bottom: 5px; height: 2px; }
  .phone-label { display: none; }
  .phone-label > span { font-size: 12px; }
  .phone-link:focus-visible { border-radius: 30px; outline-offset: 5px; }
  .iphone--app { --phone-radius: 39px; --phone-bezel: 7px; --island-height: 19px; --artwork-inset: 0px; }
}