/* Explanation layers only; the original 3D stage and reveal transforms stay intact. */
.hero-switch { position: relative; }
.feature-switch-heading {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #e8e1ff;
  font-size: 10px;
  letter-spacing: .03em;
  pointer-events: none;
}
.feature-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  padding: 12px 14px;
  border: 1px solid #b7ffe340;
  border-radius: 9px;
  background: #241b43;
  box-shadow: 0 8px 24px #140c3033;
  color: #faf8ff;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.feature-tooltip::after {
  content: "";
  position: absolute;
  right: -4px;
  top: calc(50% - 4px);
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border-top: 1px solid #b7ffe340;
  border-right: 1px solid #b7ffe340;
  background: #241b43;
}
.feature-tooltip strong { display: block; font-size: 12px; font-weight: 600; }
.feature-tooltip small { display: block; margin-top: 5px; color: #ded5f1; font-size: 10px; line-height: 1.6; }
.hero-switch:hover .feature-tooltip,
.hero-switch:focus-visible .feature-tooltip { opacity: 1; visibility: visible; }
@media (min-width: 701px) {
  .hero-switches:has(.hero-switch:focus-visible) .hero-switch:not(:focus-visible) .feature-tooltip { opacity: 0; visibility: hidden; }
}
.interface-notes {
  list-style: none;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #dbd1ff40;
}
.interface-notes[hidden], .interface-pin-layer[hidden] { display: none; }
.interface-notes li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.interface-notes li + li { margin-top: 12px; }
.interface-note-number {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #c0ffdf70;
  border-radius: 50%;
  background: #122d3c55;
  color: #d6fff0;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.interface-notes strong { display: block; padding-top: 2px; color: #fcfbff; font-size: 12px; font-weight: 600; line-height: 1.5; }
.interface-notes small { display: block; margin-top: 3px; color: #e0d8f4; font-size: 11px; line-height: 1.5; }
.product-image-action { position: relative; }
/* Align the numbered SVG pins with the contained, unmodified source screenshot. */
.interface-pin-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: calc(100% * 835 / 868);
  pointer-events: none;
}
.interface-pin-layer[data-tall="true"] { width: calc(100% * 868 / 875); height: 100%; }
.interface-pin { position: absolute; width: 28px; height: 28px; transform: translate(-50%, -50%); }
.interface-pin svg { display: block; width: 100%; height: 100%; overflow: visible; }
.interface-pin circle { fill: #17483f; stroke: #d6fff0; stroke-width: 1.7; }
.interface-pin text { fill: #f4fff9; stroke: none; text-anchor: middle; font: 600 12px "Geologica", sans-serif; }
@media (min-width: 701px) and (max-height: 780px) {
  .interface-notes li { align-items: center; }
  .interface-notes li + li { margin-top: 10px; }
  .interface-notes strong { padding-top: 0; }
  .interface-notes small { display: none; }
}
@media (max-width: 700px) {
  .feature-switch-heading { bottom: calc(100% + 13px); font-size: 9px; }
  .feature-tooltip { width: auto; padding: 7px 10px; }
  .feature-tooltip strong { white-space: nowrap; font-size: 11px; }
  .feature-tooltip small { display: none; }
  .hero-switch.is-active .feature-tooltip { opacity: 1; visibility: visible; }
  .experience-stage.is-open .hero-switches { gap: clamp(14px, 4.8vw, 20px); }
  .experience-stage.is-open .feature-switch-heading { display: none; }
  .experience-stage.is-open .feature-tooltip {
    top: calc(100% + 9px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 62px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    opacity: 1;
    visibility: visible;
    color: #e4dcf9;
  }
  .experience-stage.is-open .feature-tooltip::after { display: none; }
  .experience-stage.is-open .feature-tooltip strong { font-size: 11px; font-weight: 400; line-height: 1.4; white-space: normal; }
  .experience-stage.is-open .hero-switch.is-active .feature-tooltip { color: #fff; }
  .experience-stage.is-open .hero-switch.is-active .feature-tooltip strong { font-weight: 600; }
  .inside-copy > p { max-width: 100%; line-height: 1.6; }
  .interface-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px; padding-top: 10px; }
  .interface-notes li { grid-template-columns: 20px 1fr; gap: 5px; align-items: center; }
  .interface-notes li + li { margin-top: 0; }
  .interface-note-number { width: 20px; height: 20px; font-size: 10px; }
  .interface-notes strong { padding-top: 0; font-size: 11px; line-height: 1.45; }
  .interface-notes small { display: none; }
  .interface-pin { width: 23px; height: 23px; }
}