/* ---- Website style fix 01: original type + a centred, fully reachable tour ----
   Heading faces, weights, width axes and chrome above are the original design.
   Keep the original local assets/fonts files; do not substitute a system face.
   Only the tour layout below changes. Other sections and copy are untouched. */
.tour {
  --tour-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + clamp(12px, 2vh, 24px));
  --tour-bottom: clamp(16px, 2.4vh, 28px);
  height: auto;
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.tour-sticky {
  position: relative;
  min-height: 0;
  padding-top: var(--tour-top);
  padding-bottom: var(--tour-bottom);
}
.tour-sticky > .wrap {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: clamp(16px, 2vh, 24px);
  min-width: 0;
}
.tour .section-head {
  max-width: none;
  margin: 0;
  text-align: center;
}
.tour .section-head > p { margin-inline: auto; }
.tour .section-head .eyebrow { margin-bottom: 10px; }
.tour .section-head h2 { margin-bottom: 14px; }
.tour .section-head > p:last-child { margin-bottom: 0; }
.tour .device-stage { min-width: 0; }
.tour .device { margin-inline: auto; }
.tour .pin-card {
  width: min(760px, 100%);
  max-width: 100%;
  margin: 0 auto;
}

/* A short/touch viewport gets ordinary document scrolling, never an oversized
   pinned panel or a miniature device. The full image and caption remain reachable. */
@media (max-width: 920px), (max-height: 719px) {
  .tour .device { transform: none; will-change: auto; }
}

/* The middle grid row receives exactly the height left by the heading/caption.
   Its query units size the WHOLE device (image + pins) at the source aspect ratio.
   A little breathing room also keeps the existing 3D entry tilt clear of text. */
@supports (width: 1cqw) and (height: 1svh) {
  @media (min-width: 921px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
    .tour { height: 240vh; }
    .tour-sticky {
      position: sticky;
      top: 0;
      height: 100svh;
      min-height: 0;
    }
    .tour-sticky > .wrap {
      height: 100%;
      min-height: 0;
      grid-template-rows: auto minmax(0, 1fr) auto;
    }
    .tour .section-head h2 {
      font-size: clamp(2.05rem, min(4.6vw, 5.9svh), 3.9rem);
    }
    .tour .device-stage {
      container-type: size;
      min-height: 0;
      display: grid;
      place-items: center;
    }
    .tour .device {
      width: min(1100px, 96cqw, calc(96cqh * 1800 / 1131));
    }
    .tour .pin-card {
      /* Reserve three description lines so auto-selected pins do not resize
         the screenshot as you scroll. Text is never clipped or line-clamped. */
      min-height: calc(34px + 1.2rem * 1.62 + 6px + .95rem * 1.62 * 3);
    }
  }
}


/* ---- Website style fix 02: keep the hero tagline fully visible ----
   On shorter desktop viewports the original centred hero can place the headline
   too low. Keep the same visual style, but move the block upward and reduce the
   scale slightly so the full text remains visible without changing the wording. */
@media (max-height: 860px) {
  .hero {
    align-items: flex-start;
    min-height: auto;
    padding-top: calc(var(--bar-h) + clamp(26px, 5.5vh, 64px));
    padding-bottom: clamp(28px, 5vh, 64px);
  }
  .hero-logo {
    width: min(920px, 100%);
    margin: 0 0 4px -1.2%;
  }
  .tagline {
    font-size: clamp(1.85rem, 4.5vw, 3.95rem);
    line-height: 0.98;
    margin: 8px 0 18px;
    max-width: 15ch;
  }
  .lede { max-width: 56ch; }
}

@media (max-height: 700px) {
  .hero {
    padding-top: calc(var(--bar-h) + 20px);
    padding-bottom: 24px;
  }
  .hero-logo {
    width: min(840px, 100%);
    margin-left: -0.8%;
  }
  .tagline {
    font-size: clamp(1.55rem, 4.1vw, 3.25rem);
    margin: 6px 0 14px;
    max-width: 14.5ch;
  }
  .lede {
    font-size: clamp(0.98rem, 1.35vw, 1.12rem);
    max-width: 54ch;
  }
  .cta-row { margin: 10px 0 28px; }
}


/* ---- Website style fix 03: hero text always above visuals and fully inside short viewports ---- */
.hero {
  overflow: visible;
}
.hero-grid {
  position: relative;
  z-index: 8;
}
.hero .eyebrow,
.hero .hero-logo,
.hero .tagline,
.hero .lede,
.hero .cta-row,
.hero .demo-box,
.hero .hero-stats,
.hero .fineprint {
  position: relative;
  z-index: 9;
}

/* On laptop/short browser windows, reserve the first screen for the logo +
   complete tagline instead of letting the second line fall below the viewport. */
@media (min-width: 721px) and (max-height: 700px) {
  .hero {
    align-items: flex-start;
    min-height: 100svh;
    padding-top: calc(var(--bar-h) + 12px);
    padding-bottom: 38px;
  }
  .hero .eyebrow {
    margin-bottom: 8px;
  }
  .hero-logo {
    width: min(740px, 72vw);
    margin: -2px 0 0 -0.6%;
  }
  .tagline {
    font-size: clamp(2rem, 4.15vw, 3.25rem);
    line-height: .96;
    max-width: 15ch;
    margin: 4px 0 16px;
  }
}

@media (min-width: 721px) and (max-height: 590px) {
  .hero {
    padding-top: calc(var(--bar-h) + 6px);
  }
  .hero-logo {
    width: min(660px, 66vw);
  }
  .tagline {
    font-size: clamp(1.85rem, 3.8vw, 2.85rem);
    max-width: 15ch;
    margin-top: 2px;
  }
}