:root {
  --cream: #fff8ec;
  --paper: #fdfbf5;
  --green: #0f5132;
  --gold: #d6a84f;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  color: #0f2d1d;
  background:
    radial-gradient(circle at 50% 0, rgba(214, 168, 79, 0.12), transparent 42rem),
    linear-gradient(180deg, #fffdf8 0%, var(--cream) 100%);
  font-family: "Segoe UI", Arial, sans-serif;
}

.page-frame {
  display: grid;
  justify-items: center;
  min-height: 100vh;
  padding: 0;
}

.reference-page {
  position: relative;
  width: min(100%, 941px);
  background: #fffaf0;
  box-shadow: 0 20px 54px rgba(43, 40, 30, 0.1);
}

.reference-page img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.mobile-page {
  display: none;
}

.hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 10px;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(15, 81, 50, 0.14);
}

.hotspot:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  background: rgba(15, 81, 50, 0.08);
}

.hotspot-brand {
  left: 4.8%;
  top: 1.58%;
  width: 34%;
  height: 3.09%;
}

.hotspot-hero-install {
  left: 7.2%;
  top: 17.88%;
  width: 23.3%;
  height: 2.34%;
}

.hotspot-hero-view {
  left: 32.1%;
  top: 18.05%;
  width: 19.7%;
  height: 2.05%;
}

.hotspot-phone-share {
  left: 62.35%;
  top: 14.58%;
  width: 13.8%;
  height: 1.69%;
}

.hotspot-final-install {
  left: 29.1%;
  top: 94.79%;
  width: 40.4%;
  height: 2.48%;
  border-radius: 14px;
}

.hotspot-final-view {
  left: 37.6%;
  top: 97.52%;
  width: 22.4%;
  height: 1.18%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 941px) {
  .reference-page {
    box-shadow: none;
  }
}

@media (max-width: 700px) {
  body {
    overflow-x: hidden;
    background:
      radial-gradient(circle at 50% 0, rgba(214, 168, 79, 0.16), transparent 30rem),
      linear-gradient(180deg, #fffdf8 0%, var(--cream) 100%);
  }

  .page-frame {
    padding: 0;
  }

  .reference-page {
    display: none;
  }

  .mobile-page {
    display: block;
    width: min(100%, 430px);
    padding: 0;
  }

  .mobile-composite {
    position: relative;
    width: 100%;
    background: #fff8ec;
  }

  .mobile-composite img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
  }

  .mobile-hotspot {
    position: absolute;
    z-index: 3;
    display: block;
    border-radius: 10px;
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(15, 81, 50, 0.14);
  }

  .mobile-hotspot:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    background: rgba(15, 81, 50, 0.08);
  }

  .mobile-hero-install {
    left: 13.6%;
    top: 5.84%;
    width: 43.4%;
    height: 0.79%;
  }

  .mobile-hero-view {
    left: 60.6%;
    top: 6.06%;
    width: 36.6%;
    height: 0.67%;
  }

  .mobile-phone-share {
    left: 21.5%;
    top: 13.36%;
    width: 27.2%;
    height: 0.59%;
  }

  .mobile-final-install {
    left: 20.5%;
    top: 98.77%;
    width: 55.8%;
    height: 0.61%;
    border-radius: 10px;
  }

  .mobile-final-view {
    left: 32.2%;
    top: 99.41%;
    width: 31%;
    height: 0.29%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}