/* Figma hero strips: rotate the narrow inner images, not their outer bounds. */
.hero-accent img{
  transform:rotate(36.66deg);
  transform-origin:center;
}
.hero-accent{
  /* Figma's flex wrappers do not clip the rotated inner strips. */
  overflow:visible;
}
.accent-a img{
  left:239.507px;
  top:7.022px;
  width:324.986px;
  height:909.952px;
}
.accent-b img{
  left:158.201px;
  top:4.197px;
  width:213.001px;
  height:600.495px;
}
.accent-c img{
  left:103.767px;
  top:2.752px;
  width:139.712px;
  height:393.878px;
}
a.click.white-text{color:#fff}
a.click.white-text:hover,
a.click.white-text:focus-visible{color:#55bdf0}

/* Hero's Figma overlay is intentionally translucent while preserving all
   diagonal image strips above it. */
.hero-overlay{opacity:.7}

/* The translucent mid-page shape is a background layer, never an overlay. */
.mid-bg{z-index:0}

/* News & Events cards: the gray panel overlaps the image by 33px in Figma.
   Keep the image at the bottom, the panel above it, and all copy on top. */
.news-image{z-index:6}
.news-panel{z-index:7}
.news-card-title,.news-card-copy{z-index:9}

/* Figma node 25:30 uses a 32px line height inside its 76px text box. */
.news-title{line-height:32px}

/* Figma node 25:40 floats across both feature rows as a foreground asset. */
.product-floating{z-index:6;pointer-events:none}

/* Main product: background photo < foreground blower < blue copy panel/text. */
.product-main-overlay{z-index:2;pointer-events:none}
.product-copy-panel{z-index:3}

/* Figma positions the chevrons outside the text frames. */
.footer-link::before{
  content:"";
  position:absolute;
  left:-19px;
  top:8px;
  width:14px;
  height:16px;
  background:url("assets/figma/arrow-footer-a.svg") center/16px 14px no-repeat;
  transform:rotate(90deg);
}