/* Landing — exact Presentation Theme mockup, fixed viewport */
html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

.landing-exact {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f4ef;
  overflow: hidden;
}

.landing-frame {
  position: relative;
  height: 100vh;
  width: auto;
  max-width: 100vw;
  line-height: 0;
}

.landing-mockup {
  height: 100vh;
  width: auto;
  max-width: 100vw;
  object-fit: contain;
  object-position: center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* When viewport is wider than the portrait mockup aspect, height drives size.
   When viewport is taller/narrower, width drives size so nothing crops. */
@supports (aspect-ratio: 1024 / 1536) {
  .landing-frame {
    aspect-ratio: 1024 / 1536;
    height: min(100vh, calc(100vw * 1536 / 1024));
    width: min(100vw, calc(100vh * 1024 / 1536));
  }
  .landing-mockup {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}

.landing-hotspot {
  position: absolute;
  z-index: 5;
  display: block;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  padding: 0;
}

.landing-hotspot:hover {
  background: rgba(242, 111, 4, 0.08);
  outline: 2px solid rgba(242, 111, 4, 0.35);
  outline-offset: 2px;
}

.landing-hotspot:focus-visible {
  outline: 2px solid #f26f04;
  outline-offset: 3px;
  background: rgba(242, 111, 4, 0.1);
}

/* Coordinates measured from mockup-landing.png (1024×1536) */
.landing-hotspot.cta {
  left: 20.5%;
  top: 86.7%;
  width: 58.5%;
  height: 5.9%;
}

.landing-hotspot.lang {
  left: 78%;
  top: 1.2%;
  width: 20%;
  height: 3.2%;
  border-radius: 8px;
}