/* A one-time logo shower in the hero. JS sets the pile height so the
   floor tracks the Chrome CTA instead of a fixed pixel box. */
.breadly-home .hero {
  /* The rain layer is position:absolute against this box. */
  position: relative;
  isolation: isolate;
}
.breadly-home .hero-logo-stage {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: clamp(210px, 20vw, 260px);
  margin: 0 calc((100% - 100vw) / 2) 12px;
}
.breadly-home .hero-logo-stage .hero-companion {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
  margin: 0 auto;
  pointer-events: none;
}
.breadly-home .hero > .hero-logo-pile {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  /* JS writes the pixel height so the floor tracks the live CTA. */
  height: 0;
  /* Full-bleed without transform, so overflow:hidden can clip tiles. */
  margin-left: -50vw;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: layout paint;
}
.breadly-home .hero > .wrap {
  position: relative;
  z-index: 1;
}
/* Soft white halo: tiles may pass behind copy, but type stays readable. */
.breadly-home .hero-copy > :is(.kicker, h1, .sub, .hero-cta) {
  position: relative;
  background: #fff;
  box-shadow: 0 0 22px 14px #fff;
  border-radius: 20px;
}
.breadly-home .hero-copy > .kicker {
  width: fit-content;
  margin-inline: auto;
}
.breadly-home .falling-company-logo {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  border: 1px solid #e8e6e3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px #2d1c1110;
  visibility: hidden;
}
.breadly-home .falling-company-logo img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  border-radius: 5px;
}
@media (max-width: 560px) {
  .breadly-home .hero-logo-stage { height: 210px; margin-bottom: 12px; }
  .breadly-home .falling-company-logo { border-radius: 9px; }
}