/*
 * Blue hero stage for the homepage and the interface guides.
 * The zone stays white from the top of the page to the end of the proof bar;
 * the page continues on --paper below it. Text sits on the deeper blue on the
 * reading side (white text at least 4.5:1); the bright logo blue stays behind
 * the demo window.
 */
.hero-stage-zone {
  position: relative;
  isolation: isolate;
}

.hero-stage-zone::before {
  position: absolute;
  z-index: -1;
  inset: -400px 0 0;
  content: "";
  background: #fff;
  pointer-events: none;
}

.hero-stage-zone .hero.section-shell {
  min-height: auto;
  margin-top: 18px;
  padding: 72px clamp(28px, 4vw, 64px);
  border-radius: 40px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620'%3E%3Cg fill='%23ffffff'%3E%3Crect x='0' y='180' width='154' height='250' rx='77' opacity='.12'/%3E%3Crect x='225' y='90' width='154' height='430' rx='77' opacity='.16'/%3E%3Crect x='450' y='0' width='154' height='610' rx='77' opacity='.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -60px bottom -170px / 720px,
    radial-gradient(ellipse 38% 65% at 88% 18%, rgba(255, 255, 255, 0.18), transparent 62%),
    linear-gradient(100deg, #0a6fe0 0%, #0a74e6 48%, #2b94ff 74%, #4da6ff 100%);
}

@media (min-width: 1241px) {
  html[dir="rtl"] .hero-stage-zone .hero.section-shell {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620'%3E%3Cg fill='%23ffffff'%3E%3Crect x='466' y='180' width='154' height='250' rx='77' opacity='.12'/%3E%3Crect x='241' y='90' width='154' height='430' rx='77' opacity='.16'/%3E%3Crect x='16' y='0' width='154' height='610' rx='77' opacity='.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat left -60px bottom -170px / 720px,
      radial-gradient(ellipse 38% 65% at 12% 18%, rgba(255, 255, 255, 0.18), transparent 62%),
      linear-gradient(260deg, #0a6fe0 0%, #0a74e6 48%, #2b94ff 74%, #4da6ff 100%);
  }
}

/* Two columns: the stage padding narrows the copy, so the homepage heading
   steps down to keep three lines; German keeps its container-based fit. */
@media (min-width: 1241px) {
  .hero-stage-zone .hero:not(.interface-product-hero) > .hero-copy h1 {
    font-size: clamp(44px, 5.2vw, 84px);
  }

  /* The widest unbreakable piece sets the size, as in styles.css: the lines "Die Lautstärketasten" and
     "funktionieren wieder." in German (neither wraps), the longest word in French, Portuguese and Italian. The divisors are the widest ratios measured
     between 320 and 1920 px, with a little room. */
  html:lang(de) .hero-stage-zone .hero:not(.interface-product-hero) > .hero-copy h1 {
    font-size: min(clamp(44px, 5.2vw, 84px), calc((100cqi - 8px) / 10.7 - 0.05px));
  }

  html:lang(fr) .hero-stage-zone .hero:not(.interface-product-hero) > .hero-copy h1 {
    font-size: min(clamp(44px, 5.2vw, 84px), calc((100cqi - 8px) / 5.6 - 0.05px));
  }

  html:lang(pt-BR) .hero-stage-zone .hero:not(.interface-product-hero) > .hero-copy h1 {
    font-size: min(clamp(44px, 5.2vw, 84px), calc((100cqi - 8px) / 5.75 - 0.05px));
  }

  html:lang(it) .hero-stage-zone .hero:not(.interface-product-hero) > .hero-copy h1 {
    font-size: min(clamp(44px, 5.2vw, 84px), calc((100cqi - 8px) / 5.1 - 0.05px));
  }
}

/* Stacked layout: the copy sits on top, so the gradient runs downwards. */
@media (max-width: 1240px) {
  .hero-stage-zone .hero.section-shell {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620'%3E%3Cg fill='%23ffffff'%3E%3Crect x='0' y='180' width='154' height='250' rx='77' opacity='.12'/%3E%3Crect x='225' y='90' width='154' height='430' rx='77' opacity='.16'/%3E%3Crect x='450' y='0' width='154' height='610' rx='77' opacity='.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -60px bottom -170px / 480px,
      linear-gradient(180deg, #0a6fe0 0%, #0a74e6 62%, #2b94ff 100%);
  }
}

@media (max-width: 780px) {
  .hero-stage-zone .hero.section-shell {
    width: calc(100% - 24px);
    padding: 44px 20px 28px;
    border-radius: 28px;
  }
}

.hero-stage-zone .hero-copy h1,
.hero-stage-zone .hero-copy .kicker,
.hero-stage-zone .hero-lede,
.hero-stage-zone .hero-meta,
.hero-stage-zone .hero-references,
.hero-stage-zone .hero-references > span:first-child {
  color: #fff;
}

.hero-stage-zone .hero.section-shell .hero-copy h1 em {
  color: rgba(255, 255, 255, 0.82);
}

.hero-stage-zone .hero-meta {
  font-size: 13px;
  font-weight: 650;
}

.hero-stage-zone .hero-meta span:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.75);
}

.hero-stage-zone .hero-references a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.hero-stage-zone .hero-references a:hover {
  text-decoration-color: #fff;
}

.hero-stage-zone .hero .button-primary,
.hero-stage-zone .hero .button-primary:hover {
  color: #0060c8;
  background: #fff;
  border-color: #fff;
}

.hero-stage-zone .hero .button-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}

.hero-stage-zone .hero .button-outline:hover {
  border-color: #fff;
}

/* White focus only on the blue copy side; the light demo keeps the blue ring. */
.hero-stage-zone .hero-copy :focus-visible {
  outline-color: #fff;
}

.hero-stage-zone .demo-glow {
  display: none;
}

.hero-stage-zone .hero-demo .demo-window {
  box-shadow:
    inset 0 1px 0 #fff,
    0 30px 80px rgba(0, 40, 100, 0.32),
    0 80px 140px rgba(0, 30, 80, 0.2);
}

.hero-stage-zone .interface-demo-note {
  width: fit-content;
  max-width: 620px;
  padding: 8px 14px;
  color: #fff;
  border-radius: 12px;
  background: rgba(6, 40, 74, 0.58);
}

.hero-stage-zone .proof-bar {
  margin-top: 28px;
  border-top: 0;
  background: transparent;
}