/* =========================
   Banner / Stage CSS (360x450)
   Replace previous banner-related blocks with this
   ========================= */

/* Raleway variable font (ensure the path is correct) */
@font-face {
  font-family: "RalewayVF";
  src: url("Raleway-VariableFont_wght.0a6c83ff.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Force Raleway inside the ad canvas */
.stage,
.banner,
.banner * {
  font-family: "RalewayVF", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stage is in the grid flow (not fixed) so it won't overlap neighboring columns */
.stage {
  position: relative;
  margin: 0 auto;
  width: 360px; /* canvas width */
  height: 450px; /* canvas height */
  pointer-events: auto; /* allow clicks on CTA */
  contain: layout;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  background: #313852;
  border-radius: 20px;
  overflow: hidden;
}

/* Banner canvas (absolute inside stage) */
.banner {
  position: absolute;
  left: 0;
  top: 0;
  width: 360px;
  height: 450px;
  transform-origin: top left;
  overflow: hidden;
  visibility: hidden; /* JS will reveal when ready */
  border-radius: 20px;
  background-color: #313852;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* Hide all animated elements initially to prevent flash */
.banner .bg-svg,
.banner .biopharma,
.banner .headline,
.banner .subhead,
.banner .cta-svg,
.banner .disclaimer {
  visibility: hidden;
}

/* Background clip wrapper (used by animation) */
.banner .bg-clip {
  position: absolute;
  inset: 0;
  width: 360px;
  height: 450px;
  z-index: 0;
}

/* Make SVG background fill the clip */
.banner .bg-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Ref SVG if used */
.banner .ref-svg {
  position: absolute;
  inset: 0;
  width: 360px;
  height: 450px;
  object-fit: cover;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}

/* Copy groups - centered horizontally */
.banner .copy1,
.banner .copy2 {
  position: absolute;
  width: 100%;
  margin: 0 !important;
  text-align: center;
  color: #fff !important;
  z-index: 2;
  box-sizing: border-box;
}

/* Halved vertical positions (from original 232 & 305) */
.banner .copy1 {
  top: 128px;
}
.banner .copy2 {
  top: 162px;
}

/* Biopharma art - halved and centered */
.banner .biopharma {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 64px; /* was ~129 */
  z-index: 2;
  width: 150px; /* halved target width; adjust as needed */
  max-width: 50%; /* keep responsive in case of scaling */
  height: auto;
  pointer-events: none;
}

/* Headlines & bold style */
.banner .headline {
  line-height: 1.1 !important;
  font-size: 30px !important; /* halved from 60 */
  font-weight: 500 !important;
  letter-spacing: -1px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #ffffff !important;
  text-wrap: balance;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.banner .headline .strong {
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.45),
    0 0 12px rgba(255, 255, 255, 0.12);
}

/* Subhead */
.banner .subhead {
  position: absolute;
  width: 100%;
  top: 104px; /* match copy1 top so it lines up with headlines */
  margin: 0 !important;
  text-align: center;
  color: #fff !important;
  font-size: 13px !important; /* halved from 26 */
  font-weight: 500 !important;
  letter-spacing: -0.5px !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  z-index: 2;
}

/* Superscripts adjusted for smaller canvas */
.banner sup {
  font-size: 9px !important;
  vertical-align: 6px !important;
  letter-spacing: 2px !important;
  font-family: Arial, sans-serif !important;
  color: #fff !important;
  line-height: 1 !important;
}

/* =========================
   CTA (halved)
   ========================= */

/* Ensure CTA is centered inside the banner and clickable */
.banner .cta-link {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 296px !important; /* half of 590 */
  transform: translateX(-50%) !important;
  z-index: 40 !important;
  pointer-events: auto !important;
  text-decoration: none;
  display: block;
}

/* CTA wrapper (halved pill size) */
.banner .cta-svg {
  position: relative !important;
  width: 128px !important; /* half of 256 */
  height: 49px !important; /* half of 97 */
  display: block !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

/* Prevent inner images/SVGs from using original large intrinsic size */
.banner .cta-svg img,
.banner .cta-svg svg {
  position: absolute !important;
  transform: none !important;
  transform-origin: center center !important;
  max-width: none !important;
  image-rendering: -webkit-optimize-contrast;
  pointer-events: none !important;
  display: block !important;
}

/* Pill background */
.banner img.cta-button {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  /* opacity: 0 !important; */
}

/* Small left icon (halved and positioned) */
.banner img.cta-icon {
  left: 9px !important; /* shifted 10px total from original */
  top: 4px !important; /* shifted 5px up */
  width: 33px !important;
  height: 33px !important;
}

/* GUARDANT wordmark: force halved width and reposition inside pill */
.banner img.cta-guardant {
  left: 47px !important; /* shifted 10px total from original */
  top: 12px !important; /* shifted 5px up */
  width: 22px !important;
  height: auto !important;
  /* transform: scale(0.5); */
}

/* Infinity text (SVG) */
.banner .cta-infinity {
  position: absolute !important;
  left: 47px !important; /* shifted 10px total from original */
  top: 18px !important; /* shifted 5px up */
  width: 48px !important;
  height: auto !important;
  pointer-events: none !important;
}

/* TM */
.banner img.cta-tm {
  left: 96px !important; /* shifted 10px total from original */
  top: 15px !important; /* shifted 5px up */
  width: 4px !important;
  height: 4px !important;
}

/* Prevent stray scaling on any CTA children */
.banner .cta-svg img,
.banner .cta-svg svg,
.banner .cta-svg * {
  transform: none !important;
  transform-origin: center center !important;
}

/* =========================
   Disclaimer (halved and white)
   ========================= */

.banner .disclaimer {
  position: absolute !important;
  top: 354px !important; /* moved up ~30px from bottom edge */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(88% + 10px) !important; /* widened ~27px total from original */
  color: #ffffff !important; /* force white */
  text-align: center !important;
  font-size: 3px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  pointer-events: none !important;
  z-index: 30 !important;
  font-family: "RalewayVF", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Ensure disclaimer paragraphs wrap and don't overflow */
.banner .disclaimer br {
  display: block;
}

/* =========================
   Helpful debug outlines (uncomment while debugging)
   ========================= */
/*
.banner { visibility: visible !important; outline: 1px dashed rgba(0,255,0,0.6); }
.banner .cta-svg { outline: 1px dashed rgba(255,0,0,0.6); }
.banner .disclaimer { outline: 1px dashed rgba(255,165,0,0.8); }
*/

/* =========================
   Responsive adjustments (optional)
   These keep the banner legible if the outer stage gets scaled by the JS fit()
   ========================= */
@media (max-width: 420px) {
  .banner .headline {
    font-size: 26px !important;
  }
  .banner .biopharma {
    width: 140px !important;
    top: 56px !important;
  }
  .banner .cta-svg {
    width: 110px !important;
    height: 42px !important;
  }
  .banner .cta-guardant {
    left: 62px !important;
    width: 40px !important;
  }
  .banner .disclaimer {
    top: 379px !important;
    font-size: 7px !important;
    width: calc(88% + 10px) !important;
  }
}