/*
  DiagnostiX cross-browser device fixes
  Keeps logos, laptops, tablets and phones proportional in Chrome, Edge,
  Firefox and Safari. Loaded after landing-v2.css and seo-pages.css.
*/

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

/* Never hide important page content when an animation API or script fails. */
.reveal,
.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Safari prefix and a readable fallback when blur is unavailable. */
.site-header.is-scrolled,
.floating-status,
.device-list {
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

/* Preserve the original EXZA logo ratio instead of forcing width and height. */
.site-brand {
  width: 160px !important;
  height: 74px !important;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}

.site-brand img {
  display: block;
  width: auto !important;
  height: 66px !important;
  max-width: 100% !important;
  max-height: 66px !important;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}

.final-inner > img,
.footer-brand img,
img[src*="exza-logo-header"]:not(.site-brand img) {
  height: auto !important;
  object-fit: contain;
}

/* Provide the normal viewport fallback before the newer small viewport unit. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
}

.hero-devices,
.browser-visual,
.phone-scene,
.seo-phone-stage,
.seo-device-stage {
  max-width: 100%;
}

/* ---------- Main hero laptop ---------- */
.laptop-device {
  width: min(690px, 100%) !important;
  max-width: 100%;
  transform: rotateY(-5deg) rotateX(1deg);
  transform-origin: 50% 50%;
  will-change: auto !important;
}

.laptop-lid,
.laptop-base {
  width: 100%;
}

/* Padding-ratio technique is stable even where aspect-ratio behaves differently. */
.laptop-screen {
  position: relative;
  width: 100%;
  height: 0 !important;
  padding-top: 62.5%;
  aspect-ratio: auto !important;
  overflow: hidden;
}

.laptop-screen-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 35px minmax(0, 1fr);
  overflow: hidden;
}

.laptop-screen-content > .browser-bar {
  height: auto !important;
  min-height: 0;
}

.laptop-screen-content > .platform-ui {
  width: 100%;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.platform-main,
.platform-side {
  min-width: 0;
  min-height: 0;
}

/* ---------- Phones ---------- */
.phone-device,
.phone-large,
.phone-hero {
  aspect-ratio: auto !important;
}

.phone-bezel {
  width: 100%;
  height: auto !important;
  aspect-ratio: auto !important;
}

.phone-bezel img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 9 / 20;
  object-fit: contain !important;
  object-position: center top;
}

.phone-device::after,
.phone-bezel::after {
  pointer-events: none;
}

/* ---------- Tablet / browser visual ---------- */
.tablet-device {
  aspect-ratio: auto !important;
  max-width: 100%;
}

.tablet-screen {
  position: relative;
  width: 100%;
  height: 0 !important;
  padding-top: 75%;
  aspect-ratio: auto !important;
  overflow: hidden;
}

.tablet-screen-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 13% minmax(0, 87%);
  overflow: hidden;
}

.tablet-screen-content > .tablet-top,
.tablet-screen-content > .tablet-body {
  height: auto !important;
  min-width: 0;
  min-height: 0;
}

/* ---------- SEO landing-page laptop ---------- */
.seo-laptop {
  width: min(690px, 100%) !important;
  max-width: 100%;
  transform: rotateY(-5deg) rotateX(1deg);
  transform-origin: 50% 50%;
}

.seo-laptop-screen {
  position: relative;
  width: 100%;
  height: 0 !important;
  padding-top: 62.5%;
  aspect-ratio: auto !important;
  overflow: hidden;
}

.seo-laptop-screen-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  overflow: hidden;
}

.seo-laptop-screen-content > .seo-browserbar {
  height: auto !important;
  min-height: 0;
}

.seo-laptop-screen-content > .seo-platform {
  width: 100%;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.seo-phone {
  aspect-ratio: auto !important;
}

.seo-phone img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 9 / 20;
  object-fit: contain !important;
  object-position: center top;
}

/* Avoid browser-specific lazy layout placeholders on the product pages. */
.site-footer,
.seo-intro,
.seo-steps,
.seo-compat,
.seo-faq,
.seo-related,
.final-cta {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

@media (max-width: 1120px) {
  .laptop-device,
  .seo-laptop {
    transform: none;
  }
}

@media (max-width: 820px) {
  .site-brand {
    width: 132px !important;
    min-width: 132px;
    height: 64px !important;
  }

  .site-brand img {
    height: 56px !important;
    max-height: 56px !important;
  }

  .laptop-device,
  .seo-laptop {
    width: 100% !important;
    transform: none !important;
  }

  .laptop-screen-content {
    grid-template-rows: 30px minmax(0, 1fr);
  }

  .seo-laptop-screen-content {
    grid-template-rows: 32px minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .site-brand {
    width: 108px !important;
    min-width: 108px;
    height: 58px !important;
  }

  .site-brand img {
    height: 50px !important;
    max-height: 50px !important;
  }

  .hero-devices {
    min-height: 410px !important;
  }

  .laptop-screen-content,
  .seo-laptop-screen-content {
    grid-template-rows: 26px minmax(0, 1fr);
  }

  .platform-main {
    padding: 10px !important;
  }

  .platform-health {
    margin-top: 8px !important;
  }

  .platform-chart {
    height: 34px !important;
  }

  .browser-visual {
    min-height: 420px !important;
  }

  .tablet-device {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Keep grid tracks from being widened by long headings or device internals. */
.hero-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
}

.hero-copy,
.hero-devices,
.browser-copy,
.browser-visual,
.product-copy,
.phone-scene,
.seo-hero-copy,
.seo-phone-stage,
.seo-device-stage {
  min-width: 0;
}

.hero h1 {
  max-width: 100%;
  font-size: clamp(56px, 6.15vw, 90px) !important;
}

@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: clamp(44px, 14vw, 58px) !important;
    line-height: 0.94;
    letter-spacing: -0.055em;
  }

  .hero-copy,
  .hero-devices {
    width: 100%;
    max-width: 100%;
  }

  .hero-devices {
    overflow: visible;
  }
}

@media (min-width: 1121px) {
  .hero h1 {
    font-size: clamp(54px, 5.5vw, 80px) !important;
  }
}


/* ---------- Safari-safe phone positioning ---------- */
/* Absolute children inside flex containers can be laid out differently in Safari.
   We anchor the phone mockups explicitly to the center of the scene so Chrome,
   Safari, Firefox and Edge render the same spacing. */
.phone-scene,
.seo-phone-stage {
  position: relative;
  overflow: visible;
}

.phone-large,
.seo-phone {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  margin: 0;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Use 2D transforms only for the stacked phones to avoid Safari perspective drift. */
.phone-back {
  transform: translate(calc(-50% - 106px), calc(-50% + 18px)) rotate(-8deg) !important;
  z-index: 1;
}

.phone-front {
  transform: translate(calc(-50% + 92px), calc(-50% - 8px)) rotate(5deg) !important;
  z-index: 2;
}

.seo-phone-back {
  transform: translate(calc(-50% - 92px), calc(-50% + 24px)) rotate(-7deg) !important;
  z-index: 1;
}

.seo-phone-front {
  transform: translate(calc(-50% + 88px), calc(-50% - 4px)) rotate(5deg) !important;
  z-index: 2;
}

/* Keep the decorative labels away from the phones on Safari too. */
.phone-caption {
  left: max(3%, 12px);
  bottom: 55px;
}

.live-pill {
  right: max(2%, 10px);
}

@media (max-width: 820px) {
  .phone-back {
    transform: translate(calc(-50% - 82px), calc(-50% + 16px)) rotate(-8deg) !important;
  }

  .phone-front {
    transform: translate(calc(-50% + 72px), calc(-50% - 6px)) rotate(5deg) !important;
  }

  .seo-phone-back {
    transform: translate(calc(-50% - 66px), calc(-50% + 22px)) rotate(-7deg) !important;
  }

  .seo-phone-front {
    transform: translate(calc(-50% + 67px), calc(-50% - 4px)) rotate(5deg) !important;
  }
}

@media (max-width: 520px) {
  .phone-back {
    transform: translate(calc(-50% - 58px), calc(-50% + 14px)) rotate(-7deg) !important;
  }

  .phone-front {
    transform: translate(calc(-50% + 56px), calc(-50% - 4px)) rotate(4deg) !important;
  }

  .seo-phone-back {
    transform: translate(calc(-50% - 52px), calc(-50% + 18px)) rotate(-7deg) !important;
  }

  .seo-phone-front {
    transform: translate(calc(-50% + 52px), calc(-50% - 2px)) rotate(5deg) !important;
  }

  .phone-caption {
    left: 12px;
    bottom: 24px;
  }

  .live-pill {
    top: 20px;
    right: 10px;
  }
}


/* ---------- Final Safari cleanup: remove edge lines and keep hero phone in front ---------- */
/* Remove the tiny corner/edge line artifacts on phone mockups. */
.phone-device::after,
.phone-bezel::after,
.seo-phone::after {
  display: none !important;
  background: none !important;
}

.phone-bezel,
.seo-phone img,
.phone-bezel img {
  box-shadow: none !important;
}

.phone-bezel {
  background: #000 !important;
  box-shadow: none !important;
  outline: none !important;
}

.phone-bezel img,
.seo-phone img {
  display: block;
  border-radius: inherit;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Ensure the floating hero phone always sits above the laptop in Safari and mobile. */
.hero-devices {
  isolation: isolate;
}

.laptop-device {
  position: relative;
  z-index: 2 !important;
}

.phone-hero {
  z-index: 8 !important;
  right: 0;
  bottom: 35px;
  -webkit-transform: translateZ(140px) rotate(7deg) !important;
  transform: translateZ(140px) rotate(7deg) !important;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.floating-status,
.status-one,
.status-two {
  z-index: 9 !important;
}

@media (max-width: 820px) {
  .phone-hero {
    bottom: 8px;
    right: 0;
    -webkit-transform: translateZ(120px) rotate(7deg) !important;
    transform: translateZ(120px) rotate(7deg) !important;
  }
}

@media (max-width: 520px) {
  .phone-hero {
    bottom: 6px;
    right: 2px;
    -webkit-transform: translateZ(110px) rotate(6deg) !important;
    transform: translateZ(110px) rotate(6deg) !important;
  }

  .phone-device,
  .phone-large,
  .phone-hero,
  .seo-phone {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}


/* ---------- Final foreground layering for Safari hero elements ---------- */
/* Safari can still flatten some 3D children unexpectedly. Force the important
   foreground elements onto their own front layer with explicit positioning. */
.hero-devices,
.seo-device-stage {
  isolation: isolate;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.status-one,
.status-two,
.floating-status {
  position: absolute;
  z-index: 12 !important;
  -webkit-transform: translateZ(180px) !important;
  transform: translateZ(180px) !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.status-one {
  left: 3%;
  bottom: 90px;
}

.status-two {
  right: 5%;
  top: 78px;
}

.seo-laptop {
  position: relative;
  z-index: 2 !important;
}

.seo-browser-phone {
  position: absolute;
  z-index: 10 !important;
  width: 145px;
  right: 1.5%;
  bottom: 18px;
  top: auto;
  left: auto;
  opacity: 1 !important;
  -webkit-transform: translateZ(150px) rotate(7deg) !important;
  transform: translateZ(150px) rotate(7deg) !important;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (max-width: 820px) {
  .status-one {
    left: 2%;
    bottom: 34px;
  }

  .status-two {
    right: 2%;
    top: 52px;
  }

  .seo-browser-phone {
    width: 112px;
    right: 0.5%;
    bottom: 6px;
    -webkit-transform: translateZ(135px) rotate(7deg) !important;
    transform: translateZ(135px) rotate(7deg) !important;
  }
}

@media (max-width: 520px) {
  .status-one,
  .status-two {
    display: none;
  }

  .seo-browser-phone {
    width: 82px;
    right: 2px;
    bottom: 0;
    -webkit-transform: translateZ(120px) rotate(6deg) !important;
    transform: translateZ(120px) rotate(6deg) !important;
  }
}


/* ---------- Mobile-only smartphone layout refinement ---------- */
/* Improves all phone mockups on real smartphones without touching desktop/tablet. */
@media (max-width: 680px) {
  .hero-devices,
  .phone-scene,
  .seo-phone-stage,
  .seo-device-stage,
  .browser-visual,
  .community-phone-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .hero-devices {
    min-height: 360px !important;
    padding-inline: 4px;
  }

  .phone-scene {
    min-height: 430px !important;
    margin-inline: 0 !important;
    padding-inline: 6px;
  }

  .seo-phone-stage {
    min-height: 410px !important;
    margin-inline: 0 !important;
    padding-inline: 6px;
  }

  .browser-visual,
  .seo-device-stage {
    min-height: 330px !important;
    padding-inline: 4px;
  }

  .phone-large {
    width: clamp(148px, 40vw, 178px) !important;
    padding: 5px !important;
    border-radius: 32px !important;
  }

  .phone-large .phone-bezel {
    border-radius: 28px !important;
  }

  .phone-large .phone-island {
    top: 7px !important;
    height: 16px !important;
    width: 34% !important;
  }

  .phone-back {
    transform: translate(calc(-50% - 44px), calc(-50% + 18px)) rotate(-6deg) !important;
  }

  .phone-front {
    transform: translate(calc(-50% + 44px), calc(-50% - 6px)) rotate(4deg) !important;
  }

  .phone-caption {
    left: 10px !important;
    right: auto;
    bottom: 16px !important;
    max-width: 62% !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    gap: 3px !important;
  }

  .phone-caption small {
    font-size: 8px !important;
  }

  .phone-caption strong {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  .live-pill {
    top: 18px !important;
    right: 8px !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    border-radius: 999px !important;
  }

  .live-pill b {
    font-size: 10px !important;
  }

  .live-pill small {
    font-size: 7px !important;
  }

  .phone-hero {
    width: clamp(82px, 24vw, 104px) !important;
    right: 2px !important;
    bottom: 4px !important;
    padding: 4px !important;
    border-radius: 24px !important;
  }

  .phone-hero .phone-bezel {
    border-radius: 20px !important;
  }

  .phone-hero .phone-island {
    top: 5px !important;
    height: 11px !important;
  }

  .status-one {
    left: 6px !important;
    bottom: 16px !important;
  }

  .status-two {
    right: 6px !important;
    top: 16px !important;
  }

  .floating-status {
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
    max-width: calc(100% - 14px) !important;
  }

  .floating-status small {
    font-size: 7px !important;
  }

  .seo-phone {
    width: clamp(146px, 39vw, 172px) !important;
    padding: 5px !important;
    border-radius: 34px !important;
  }

  .seo-phone img {
    border-radius: 28px !important;
  }

  .seo-phone .phone-island {
    top: 9px !important;
    height: 16px !important;
    width: 35% !important;
  }

  .seo-phone-back {
    transform: translate(calc(-50% - 40px), calc(-50% + 18px)) rotate(-6deg) !important;
  }

  .seo-phone-front {
    transform: translate(calc(-50% + 40px), calc(-50% - 4px)) rotate(4deg) !important;
  }

  .seo-browser-phone {
    width: clamp(78px, 22vw, 96px) !important;
    right: 4px !important;
    bottom: 0 !important;
  }

  .community-phone {
    width: min(100%, 380px) !important;
    padding: 14px !important;
    border-radius: 26px !important;
  }
}

@media (max-width: 430px) {
  .hero-devices {
    min-height: 332px !important;
  }

  .phone-scene {
    min-height: 400px !important;
  }

  .seo-phone-stage {
    min-height: 390px !important;
  }

  .phone-large {
    width: clamp(136px, 41vw, 160px) !important;
  }

  .phone-back {
    transform: translate(calc(-50% - 36px), calc(-50% + 16px)) rotate(-5deg) !important;
  }

  .phone-front {
    transform: translate(calc(-50% + 36px), calc(-50% - 5px)) rotate(4deg) !important;
  }

  .seo-phone {
    width: clamp(134px, 40vw, 156px) !important;
  }

  .seo-phone-back {
    transform: translate(calc(-50% - 34px), calc(-50% + 16px)) rotate(-5deg) !important;
  }

  .seo-phone-front {
    transform: translate(calc(-50% + 34px), calc(-50% - 3px)) rotate(4deg) !important;
  }

  .phone-caption {
    max-width: 58% !important;
    bottom: 12px !important;
  }

  .live-pill {
    top: 12px !important;
    right: 6px !important;
  }

  .floating-status {
    transform: none !important;
    -webkit-transform: none !important;
  }
}

@media (max-width: 360px) {
  .phone-scene,
  .seo-phone-stage {
    min-height: 370px !important;
  }

  .phone-large {
    width: 132px !important;
  }

  .seo-phone {
    width: 128px !important;
  }

  .phone-back {
    transform: translate(calc(-50% - 28px), calc(-50% + 14px)) rotate(-4deg) !important;
  }

  .phone-front {
    transform: translate(calc(-50% + 28px), calc(-50% - 4px)) rotate(3deg) !important;
  }

  .seo-phone-back {
    transform: translate(calc(-50% - 28px), calc(-50% + 14px)) rotate(-4deg) !important;
  }

  .seo-phone-front {
    transform: translate(calc(-50% + 28px), calc(-50% - 3px)) rotate(3deg) !important;
  }

  .phone-caption,
  .live-pill {
    display: none !important;
  }

  .phone-hero {
    width: 76px !important;
  }
}


/* ---------- Mobile hero phone final correction ---------- */
/* Prevent cropping on the right edge and hide tiny case-button artifacts on phones. */
@media (max-width: 680px) {
  .hero-devices,
  .seo-device-stage {
    overflow: visible !important;
    padding-right: 12px !important;
  }

  .phone-hero,
  .seo-browser-phone {
    max-width: none !important;
    left: auto !important;
    top: auto !important;
    transform-origin: 50% 100% !important;
    -webkit-transform-origin: 50% 100% !important;
  }

  /* Move the mobile hero phone further inside the viewport and reduce rotation. */
  .phone-hero {
    width: clamp(78px, 22vw, 92px) !important;
    right: 12px !important;
    bottom: 10px !important;
    -webkit-transform: translateZ(110px) rotate(4deg) !important;
    transform: translateZ(110px) rotate(4deg) !important;
  }

  /* Same correction on the Browser-Diagnose page hero. */
  .seo-browser-phone {
    width: clamp(76px, 21vw, 90px) !important;
    right: 12px !important;
    bottom: 8px !important;
    -webkit-transform: translateZ(120px) rotate(4deg) !important;
    transform: translateZ(120px) rotate(4deg) !important;
  }

  /* Remove the two small side-line artifacts that appear on mobile. */
  .phone-hero .phone-button,
  .phone-large .phone-button {
    display: none !important;
  }

  /* Keep the full phone body visible when rotated. */
  .phone-hero,
  .seo-browser-phone,
  .phone-large,
  .seo-phone {
    overflow: visible !important;
  }
}

@media (max-width: 430px) {
  .hero-devices,
  .seo-device-stage {
    padding-right: 14px !important;
  }

  .phone-hero {
    width: 84px !important;
    right: 14px !important;
    bottom: 8px !important;
    -webkit-transform: translateZ(105px) rotate(3deg) !important;
    transform: translateZ(105px) rotate(3deg) !important;
  }

  .seo-browser-phone {
    width: 82px !important;
    right: 14px !important;
    bottom: 6px !important;
    -webkit-transform: translateZ(112px) rotate(3deg) !important;
    transform: translateZ(112px) rotate(3deg) !important;
  }
}

@media (max-width: 360px) {
  .phone-hero {
    width: 78px !important;
    right: 12px !important;
    bottom: 6px !important;
  }

  .seo-browser-phone {
    width: 76px !important;
    right: 12px !important;
    bottom: 4px !important;
  }
}


/* ---------- Final browser-diagnose phone styling ---------- */
/* Match the Browser-Diagnose hero phone to the slimmer start-page phone style. */
.seo-browser-phone {
  padding: 4px !important;
  border-radius: 25px !important;
}

.seo-browser-phone img {
  border-radius: 21px !important;
}

.seo-browser-phone .phone-island {
  top: 5px !important;
  height: 12px !important;
  width: 32% !important;
}

.seo-browser-phone .phone-island::after {
  right: 6px !important;
  top: 3px !important;
  width: 5px !important;
  height: 5px !important;
}

@media (max-width: 680px) {
  .seo-browser-phone {
    padding: 4px !important;
    border-radius: 24px !important;
  }

  .seo-browser-phone img {
    border-radius: 20px !important;
  }

  .seo-browser-phone .phone-island {
    top: 5px !important;
    height: 11px !important;
    width: 33% !important;
  }
}