/* Shared page chrome: the page frame controls every Hero image, never the source image. */
:root {
  --page-shell-width: 1440px;
  --page-shell: min(var(--page-shell-width), 92vw);
  --page-hero-height: 414px;
}

/* Every page uses the same full-width navigation and content edges. */
.site-header,
.fan-tool-page .site-header,
.lab-page .site-header {
  top: 0;
  right: 0;
  left: 0;
  min-height: 64px;
  padding: 11px max(4%, calc((100vw - var(--page-shell-width)) / 2));
  border: 0;
  border-bottom: 1px solid rgba(149, 184, 220, 0.18);
  border-radius: 0;
  background: rgba(3, 12, 23, 0.96);
}

.application-shell,
.about-shell,
.fan-tool-shell,
.lab-shell,
.blog-shell,
.article-shell {
  width: var(--page-shell);
}

/* Application Hero uses a real, fixed image frame rather than a free-form background image. */
.application-hero {
  position: relative;
  min-height: 0;
  padding: 94px 0 38px;
  overflow: hidden;
  background: #06111f;
}

.application-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  min-height: var(--page-hero-height);
  background: #07172a;
  overflow: hidden;
}

.application-hero-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 42px clamp(28px, 4vw, 64px);
}

.application-hero-media,
.about-hero-media,
.lab-hero-media {
  position: relative;
  width: 100%;
  height: var(--page-hero-height);
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.application-hero-media::after,
.about-hero-media::after,
.lab-hero-media::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
}

.application-hero-media::after,
.about-hero-media::after {
  background: linear-gradient(90deg, rgba(7, 23, 42, 0.56), transparent 30%);
}

.lab-hero-media::before {
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.78) 10%, rgba(255, 255, 255, 0.04) 48%);
}

.application-hero-media img,
.about-hero-media img,
.lab-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* About and Lab share the same fixed media column and visual height. */
.about-hero { padding: 94px 0 38px; }
.about-hero-grid,
.lab-hero-grid {
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  min-height: var(--page-hero-height);
  height: var(--page-hero-height);
}
.about-hero-copy { padding: 42px clamp(28px, 4vw, 64px); }
.lab-hero { min-height: 0; padding-top: 64px; }
.lab-hero-copy { align-self: center; padding: 30px clamp(28px, 4vw, 64px) 26px; }
.lab-hero-visual { min-height: 0; height: var(--page-hero-height); }
.lab-hero-media { inset: 0; }
.lab-flow-lines { right: 12%; width: 52%; }

/* Fan selector keeps its information column but fixes its product frame. */
.fan-tool-hero { padding-top: 64px; }
.fan-tool-hero-grid {
  grid-template-columns: minmax(0, 1fr) 420px 340px;
  grid-template-rows: var(--page-hero-height);
  min-height: var(--page-hero-height);
}
.fan-tool-hero-copy { align-self: center; padding: 30px 28px 28px 0; }
.fan-tool-hero-product { height: var(--page-hero-height); }
.hero-product-frame { width: 360px; height: 360px; }
.hero-product-frame img { width: 100%; height: 100%; object-fit: contain; }

/* Text-only Hero pages use the same navigation offset and content edges. */
.blog-hero,
.article-hero { padding-top: 128px; }

@media (max-width: 1120px) {
  .fan-tool-hero-grid { grid-template-columns: minmax(0, 1fr) 400px; }
  .fan-tool-hero-benefits { display: none; }
}

@media (max-width: 700px) {
  .site-header,
  .fan-tool-page .site-header,
  .lab-page .site-header { padding: 11px 6%; }
  .application-hero,
  .about-hero { padding: 88px 0 32px; }
  .application-hero-grid,
  .about-hero-grid,
  .lab-hero-grid { display: block; height: auto; }
  .application-hero-copy,
  .about-hero-copy,
  .lab-hero-copy { padding: 34px 24px; }
  .application-hero-media,
  .about-hero-media,
  .lab-hero-visual,
  .lab-hero-media { height: 260px; }
  .fan-tool-hero { padding-top: 64px; }
  .fan-tool-hero-grid { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .fan-tool-hero-copy { padding: 26px 0 18px; }
  .fan-tool-hero-product { height: 230px; }
  .hero-product-frame { width: 220px; height: 220px; }
}

/* Keep longer localized navigation labels inside the shared header. */
@media (min-width: 701px) and (max-width: 1200px) {
  .site-header { padding-right: 16px; padding-left: 16px; }
  .main-nav { gap: clamp(10px, 1.4vw, 18px); font-size: 12px; }
  .nav-cta { padding: 10px 12px; font-size: 12px; white-space: nowrap; }
  .language-switcher { gap: 5px; font-size: 11px; }
}

/* The home Hero must not keep 680px + 620px minimum columns on medium screens. */
@media (min-width: 1001px) and (max-width: 1300px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-copy { padding-left: clamp(32px, 5vw, 70px); }
  .hero h1 { font-size: clamp(44px, 5vw, 62px); }
  .hero-lead { max-width: 480px; font-size: 16px; }
  .hero-actions .button { padding: 13px 17px; font-size: 12px; }
  .hero-metrics { padding-left: clamp(32px, 5vw, 70px); }
  .main-nav { gap: clamp(9px, 1.1vw, 15px); font-size: 11px; }
  .nav-cta { padding: 9px 10px; font-size: 11px; }
}

/* Localized home pages need a compact header before the full desktop nav fits. */
@media (min-width: 701px) and (max-width: 1200px) {
  .site-header { min-height: 64px; }
  .menu-toggle { display: block; font-size: 13px; }
  .main-nav { position: absolute; top: 64px; right: 4%; left: 4%; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 18px; border: 1px solid rgba(190, 213, 235, .35); border-radius: 14px; background: #0b1521; }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 11px 0; }
  .nav-cta { margin-top: 8px; text-align: center; }
  .language { padding: 11px 0; }
}

/* Localized home pages need room for translated copy, not a compressed fixed Hero.
   Applies at ALL desktop widths >=701px: the base .hero grid locks height:560px,
   which clipped longer ES/FR/AR copy (buttons cut, metrics row invisible). */
@media (min-width: 701px) {
  html[lang="es"] .hero,
  html[lang="fr"] .hero,
  html[lang="ar"] .hero {
    display: block;
    height: auto;
    min-height: 680px;
  }

  html[lang="es"] .hero-copy,
  html[lang="fr"] .hero-copy,
  html[lang="ar"] .hero-copy {
    box-sizing: border-box;
    width: 56%;
    padding: 128px 24px 20px 6%;
  }

  html[lang="es"] .hero h1,
  html[lang="fr"] .hero h1,
  html[lang="ar"] .hero h1 {
    max-width: 100%;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 0.98;
    overflow-wrap: anywhere;
  }

  html[lang="es"] .hero-lead,
  html[lang="fr"] .hero-lead,
  html[lang="ar"] .hero-lead {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.45;
  }

  html[lang="es"] .hero-actions,
  html[lang="fr"] .hero-actions,
  html[lang="ar"] .hero-actions {
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  html[lang="es"] .hero-metrics,
  html[lang="fr"] .hero-metrics,
  html[lang="ar"] .hero-metrics {
    box-sizing: border-box;
    width: 56%;
    padding: 0 24px 24px 6%;
  }

  html[lang="es"] .hero-art,
  html[lang="fr"] .hero-art,
  html[lang="ar"] .hero-art {
    position: absolute;
    inset: 0 0 0 48%;
    opacity: 0.72;
  }
}

/* EN home hero (measured 2026-09-24): the fixed 560px grid clipped the bottom.
   hero-copy needs ~485px but grid row 1 only got 464px (1fr of 560 - 96), pushing
   the metrics row down to 581px where overflow:hidden cut it; at 1001-1300px the
   four metric columns also collided with each other. Let the hero grow and stack
   the metrics 2x2 on narrow desktop instead of clipping or overlapping. */
@media (min-width: 1001px) {
  .hero {
    height: auto;
    min-height: 560px;
    grid-template-rows: 1fr auto;
  }
}

@media (min-width: 1001px) and (max-width: 1300px) {
  .hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
    max-width: 680px;
  }
}