.hero-banner {
  padding-top: var(--hero-pad-mobile-top, 64px);
  padding-bottom: var(--hero-pad-mobile-bottom, 64px);
  /* Fallback for browsers without overflow: clip (Safari 15 and older) */
  overflow: hidden;
  position: relative;
  background-color: var(--color-bg);
}

/* Clip only sideways: stops the glow, floating cards and arrows from causing a
   horizontal scrollbar, but lets the glow fade out past the bottom of the
   section instead of ending in a hard line. Unlike "hidden", "clip" keeps the
   other direction visible and doesn't turn the section into a scroll box. */
@supports (overflow: clip) {
  .hero-banner {
    overflow: visible;
    overflow-x: clip;
  }
}

.hero-banner::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.hero-banner::after {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 70%);
  bottom: -200px;
  left: -200px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero-banner {
    padding-top: var(--hero-pad-desktop-top, 112px);
    padding-bottom: var(--hero-pad-desktop-bottom, 112px);
  }
}

.hero-banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hero-gap-mobile, 3rem);
  align-items: center;
}

/* Image width: the image column takes --hero-image-width of the row and the
   text gets the rest, so the image grows toward the text from its own side */
@media (min-width: 1024px) {
  .hero-banner__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-image-width, 52%));
    gap: var(--hero-gap, 4rem);
  }
}

.hero-banner__heading {
  font-size: var(--fs-h1);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
  letter-spacing: -0.02em;
}

.hero-banner__highlight {
  background: var(--hero-highlight, linear-gradient(135deg, var(--color-primary), var(--color-accent)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.hero-banner__description {
  font-size: var(--fs-subheading);
  margin-bottom: 2.5rem;
  color: var(--color-body);
  max-width: 500px;
  position: relative;
  z-index: 2;
  line-height: 1.6;
}

.hero-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .hero-banner__actions {
    flex-direction: row;
    align-items: center;
  }
}

.hero-banner__video-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-heading);
}

.hero-banner__video-cta:hover {
  background: var(--color-bg-alt);
  color: var(--color-heading);
}

.hero-banner__features {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-body);
}

.hero-banner__features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-banner__check-icon {
  color: var(--color-primary);
}

/* Highlights: icon + title + short line (Content > Highlights) */
.hero-banner__highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.25rem 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.hero-banner__highlights-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.hero-banner__highlight-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  color: var(--hero-highlight, var(--color-primary));
  background-color: color-mix(in srgb, var(--hero-highlight, var(--color-primary)) 12%, transparent);
}

.hero-banner__highlight-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hero-banner__highlight-title {
  color: var(--color-heading);
  font-size: 0.9375rem;
}

.hero-banner__highlight-desc {
  color: var(--color-muted);
}

.hero-banner--image-bottom .hero-banner__highlights {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.hero-banner__visual {
  position: relative;
  perspective: 1000px;
  padding: 2rem;
}

.hero-banner__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-primary) 15%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-secondary) 10%, transparent) 0%, transparent 50%);
  z-index: -2;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  opacity: calc(0.4 + var(--hero-glow-strength, 0.7));
}

.hero-banner__image {
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px var(--shadow-color);
  width: 100%;
  position: relative;
  z-index: 2;
  display: block;
}

.hero-banner__placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  background-color: var(--color-bg-alt);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-subtle);
  font-weight: 500;
  border: 2px dashed var(--color-border);
  position: relative;
  z-index: 2;
}

.hero-banner__float-1 {
  position: absolute;
  top: 5%;
  left: -5%;
  z-index: 4;
  border-radius: 1rem;
  box-shadow: 0 15px 35px var(--shadow-color);
  background-color: var(--hero-float-bg, var(--color-card, #ffffff));
  border: 1px solid var(--color-border, #e5e7eb);
  padding: 1rem;
  max-width: 90%;
  height: auto;
}

.hero-banner__float-2 {
  position: absolute;
  bottom: 10%;
  right: -5%;
  z-index: 6;
  border-radius: 1rem;
  box-shadow: 0 20px 40px var(--shadow-color);
  background-color: var(--hero-float-bg, var(--color-card, #ffffff));
  border: 1px solid var(--color-border, #e5e7eb);
  padding: 1rem;
  max-width: 90%;
  height: auto;
}

.hero-banner__ai-card {
  position: absolute;
  bottom: 5%;
  left: -5%;
  width: 280px;
  background-color: var(--hero-float-bg, var(--color-card));
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: 0 20px 40px var(--shadow-color);
  padding: 0.7rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-banner__ai-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-banner__ai-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.hero-banner__ai-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--hero-float-text, var(--color-heading));
}

.hero-banner__ai-desc {
  font-size: 0.875rem;
  color: var(--hero-float-text, var(--color-body));
  line-height: 1.4;
  margin: 0;
}

.hero-banner__ai-cta {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* Styles > Floating cards > Show border */
.hero-banner--float-no-border .hero-banner__float-1,
.hero-banner--float-no-border .hero-banner__float-2,
.hero-banner--float-no-border .hero-banner__ai-card {
  border-color: transparent;
}

/* Decorative lines around the image */
.hero-banner__deco {
  position: absolute;
  z-index: -1;
  color: var(--color-heading);
  pointer-events: none;
}

.hero-banner__deco-top {
  top: -30px;
  right: 20px;
}

.hero-banner__deco-bottom {
  bottom: -40px;
  right: -20px;
}

/* Arrows sit on the text side of the image and point toward the text.
   Image right: move them to the left edge and mirror them. "scale" is used
   instead of transform so it doesn't clash with the load animation or parallax. */
.hero-banner--image-right .hero-banner__deco-top {
  right: auto;
  left: 20px;
  scale: -1 1;
}

.hero-banner--image-right .hero-banner__deco-bottom {
  right: auto;
  left: -20px;
  scale: -1 1;
}

/* Image at the bottom: no arrows */
.hero-banner--image-bottom .hero-banner__deco {
  display: none;
}

/* Parallax (module.js) moves floating items with the "translate" property,
   so it combines with the float animation instead of overriding it */
.hero-banner__float,
.hero-banner__image {
  transition: translate 0.3s ease-out;
}

/* ---------- Image position ---------- */
@media (min-width: 1024px) {
  .hero-banner--image-left .hero-banner__inner {
    grid-template-columns: minmax(0, var(--hero-image-width, 52%)) minmax(0, 1fr);
  }

  .hero-banner--image-left .hero-banner__visual {
    order: -1;
  }
}

/* Bottom: centered text above a wide image */
.hero-banner--image-bottom .hero-banner__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hero-gap-mobile, 3rem);
  justify-items: center;
}

.hero-banner--image-bottom .hero-banner__content {
  max-width: 48rem;
  text-align: center;
}

.hero-banner--image-bottom .hero-banner__description {
  margin-left: auto;
  margin-right: auto;
  max-width: 38rem;
}

.hero-banner--image-bottom .hero-banner__actions,
.hero-banner--image-bottom .hero-banner__features {
  justify-content: center;
}

.hero-banner--image-bottom .hero-banner__visual {
  width: 100%;
}

@media (min-width: 1024px) {
  .hero-banner--image-bottom .hero-banner__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-banner--image-bottom .hero-banner__visual {
    width: var(--hero-image-width-bottom, 100%);
  }
}

/* Floating cards can hang outside the image only where there is room */
@media (max-width: 767px) {

  .hero-banner__float-1,
  .hero-banner__float-2,
  .hero-banner__ai-card {
    display: none;
  }
}

/* ---------- Load animation ---------- */
@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroVisualIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroPop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes heroGlow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Text lines rise in one after another */
.hero-banner--animate .hero-banner__content>* {
  animation: heroRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-banner--animate .hero-banner__content> :nth-child(1) {
  animation-delay: 0.05s;
}

.hero-banner--animate .hero-banner__content> :nth-child(2) {
  animation-delay: 0.15s;
}

.hero-banner--animate .hero-banner__content> :nth-child(3) {
  animation-delay: 0.25s;
}

.hero-banner--animate .hero-banner__content> :nth-child(4) {
  animation-delay: 0.35s;
}

.hero-banner--animate .hero-banner__content> :nth-child(5) {
  animation-delay: 0.45s;
}

/* Then the dashboard image slides up */
.hero-banner--animate .hero-banner__image,
.hero-banner--animate .hero-banner__placeholder {
  animation: heroVisualIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.hero-banner--animate .hero-banner__glow {
  animation: heroGlow 1.6s ease-out 0.3s both;
}

.hero-banner--animate .hero-banner__deco {
  animation: heroRise 0.8s ease-out 1s both;
}

/* Floating cards pop in last, then keep drifting gently */
.hero-banner--animate .hero-banner__float-1 {
  animation: heroPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both, heroFloat 6s ease-in-out 1.5s infinite;
}

.hero-banner--animate .hero-banner__ai-card {
  animation: heroPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both, heroFloat 7s ease-in-out 1.7s infinite;
}

.hero-banner--animate .hero-banner__float-2 {
  animation: heroPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both, heroFloat 6.5s ease-in-out 1.9s infinite;
}

/* ---------- Tablet and phone mockup (Styles > Visual) ----------
   The tablet fills the column and runs past it toward the page edge; the
   phone overlaps its left side, a little lower. */
.hero-banner--devices .hero-banner__visual {
  padding: 0;
  perspective: none;
}

/* Both devices are centred on the same vertical midline */
.hero-banner__devices {
  position: relative;
  aspect-ratio: 25 / 23;
}

.hero-banner__device {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  height: auto;
  margin: auto 0;
  transition: translate 0.3s ease-out;
}

.hero-banner__device--tablet {
  left: 20%;
  width: 104%;
  filter: drop-shadow(0 30px 50px var(--shadow-color));
}

.hero-banner__device--phone {
  left: 0;
  z-index: 2;
  width: 36%;
  filter: drop-shadow(0 30px 40px var(--shadow-color));
}

/* Image on the left: mirror the overlap */
.hero-banner--image-left .hero-banner__device--tablet {
  left: auto;
  right: 20%;
}

.hero-banner--image-left .hero-banner__device--phone {
  left: auto;
  right: 0;
}

/* Below the text: centred, both devices inside the page */
.hero-banner--image-bottom .hero-banner__devices {
  max-width: 56rem;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
}

.hero-banner--image-bottom .hero-banner__device--tablet {
  left: 22%;
  width: 78%;
}

.hero-banner--image-bottom .hero-banner__device--phone {
  left: 6%;
  width: 26%;
}

@media (max-width: 1023px) {
  .hero-banner__devices {
    max-width: 36rem;
    margin: 0 auto;
  }

  .hero-banner__device--tablet {
    width: 80%;
  }
}

.hero-banner--animate .hero-banner__device--tablet {
  animation: heroVisualIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.hero-banner--animate .hero-banner__device--phone {
  animation: heroPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both, heroFloat 7s ease-in-out 1.5s infinite;
}

/* No animation for visitors who turn off motion */
@media (prefers-reduced-motion: reduce) {

  .hero-banner--animate .hero-banner__content>*,
  .hero-banner--animate .hero-banner__image,
  .hero-banner--animate .hero-banner__placeholder,
  .hero-banner--animate .hero-banner__glow,
  .hero-banner--animate .hero-banner__deco,
  .hero-banner--animate .hero-banner__float,
  .hero-banner--animate .hero-banner__device {
    animation: none;
  }
}

/* ---------- Background glow ---------- */
/* Large soft color blobs behind the whole section. Radial gradients are
   already soft, so no blur filter is needed (cheaper to animate). */
.hero-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--hero-glow-strength, 0.7);
}

/* Fade the glow out toward the bottom edge so it blends into the next section */
.hero-banner__bg--fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.hero-banner__blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.hero-banner__blob--1 {
  top: -25%;
  right: -10%;
  width: 70vw;
  max-width: 900px;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-glow-1, var(--color-primary)) 45%, transparent) 0%, transparent 65%);
}

.hero-banner__blob--2 {
  bottom: -35%;
  left: -15%;
  width: 65vw;
  max-width: 820px;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-glow-2, var(--color-accent)) 40%, transparent) 0%, transparent 65%);
}

.hero-banner__blob--3 {
  top: 20%;
  left: 35%;
  width: 45vw;
  max-width: 600px;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-glow-1, var(--color-primary)) 30%, transparent) 0%, transparent 65%);
}

@keyframes heroBlob1 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(-8%, 10%) scale(1.1);
  }

  66% {
    transform: translate(6%, -6%) scale(0.95);
  }
}

@keyframes heroBlob2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(12%, -10%) scale(1.15);
  }
}

@keyframes heroBlob3 {

  0%,
  100% {
    transform: translate(0, 0) scale(0.9);
  }

  50% {
    transform: translate(-15%, 12%) scale(1.1);
  }
}

.hero-banner__bg--flow .hero-banner__blob--1 {
  animation: heroBlob1 18s ease-in-out infinite;
}

.hero-banner__bg--flow .hero-banner__blob--2 {
  animation: heroBlob2 22s ease-in-out infinite;
}

.hero-banner__bg--flow .hero-banner__blob--3 {
  animation: heroBlob3 16s ease-in-out infinite;
}

/* Fade the glow in with the rest of the load animation */
.hero-banner--animate .hero-banner__bg {
  animation: heroGlowIn 1.4s ease-out both;
}

@keyframes heroGlowIn {
  from {
    opacity: 0;
  }

  to {
    opacity: var(--hero-glow-strength, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-banner__blob,
  .hero-banner--animate .hero-banner__bg {
    animation: none;
  }
}

.hero-banner__features--pills {
  gap: 0.75rem;
}

.hero-banner__features--pills li {
  background-color: var(--color-bg-alt, #f8f9fa);
  border: 1px solid var(--color-border, #e5e7eb);
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-heading);
}

.hero-banner__features-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
}

/* ---------- Modal Styles ---------- */
.hero-banner-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hero-banner-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.hero-banner-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-banner-modal__content {
  position: relative;
  border-radius: 1rem;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: visible;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-banner-modal__content--video {
  background-color: #000;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

.hero-banner-modal.is-open .hero-banner-modal__content {
  transform: scale(1) translateY(0);
}

.hero-banner-modal__close {
  position: absolute;
  top: -2.5rem;
  right: -0.5rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, transform 0.2s;
  z-index: 10;
}

@media (max-width: 1024px) {
  .hero-banner-modal__close {
    top: -2.5rem;
    right: -0.5rem;
  }
}

@media (max-width: 1024px) {
  .hero-banner-modal__close {
    top: -2.5rem;
    right: 0;
  }
}

.hero-banner-modal__close:hover {
  color: #f1f5f9;
  transform: scale(1.1);
}

.hero-banner-modal__video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 0.5rem;
}

.hero-banner-modal__video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Pop-up form ----------
   A card with a tinted header band and a scrolling form body. The fields
   use the theme's form styles (css/forms.css). */
.hero-banner-modal__content--form {
  display: flex;
  flex-direction: column;
  width: min(100% - 2rem, 34rem);
  max-width: 34rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: 1.25rem;
  background-color: var(--color-card);
  box-shadow: 0 40px 80px -30px rgba(15, 23, 42, 0.45);
}

/* The body wrapper passes the card height on, so the form area can scroll */
.hero-banner-modal__content--form .hero-banner-modal__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.hero-banner-modal__form-header {
  position: relative;
  flex-shrink: 0;
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-card)), var(--color-card));
  text-align: left;
}

.hero-banner-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  box-shadow: 0 10px 20px -10px var(--color-primary);
}

.hero-banner-modal__eyebrow {
  display: block;
  width: fit-content;
  margin-bottom: 0.625rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-banner-modal__title {
  margin: 0 0 0.375rem;
  padding-right: 2.5rem;
  color: var(--color-heading);
  font-size: clamp(1.375rem, 3vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
}

.hero-banner-modal__desc {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.hero-banner-modal__form-body {
  flex: 1;
  min-height: 0;
  padding: 1.5rem 2rem 1.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hero-banner-modal__form-body fieldset {
  max-width: none;
}

.hero-banner-modal__form-body .hs-form-field {
  margin-bottom: 1rem;
}

.hero-banner-modal__form-body .hs-button,
.hero-banner-modal__form-body input[type="submit"] {
  width: 100%;
  margin-top: 0.5rem;
  background-image: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 40%, #2563EB));
}

.hero-banner-modal__hint {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--color-border);
  border-radius: 0.75rem;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.hero-banner-modal__note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

.hero-banner-modal__note svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-heading);
}

/* Close button: a soft circle inside the card */
.hero-banner-modal__content--form .hero-banner-modal__close {
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--color-card) 80%, transparent);
  color: var(--color-heading);
}

.hero-banner-modal__content--form .hero-banner-modal__close:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-heading);
  transform: rotate(90deg);
}

/* Phones: a sheet that slides up from the bottom */
@media (max-width: 639px) {
  .hero-banner-modal:has(.hero-banner-modal__content--form) {
    align-items: flex-end;
  }

  .hero-banner-modal__content--form {
    width: 100%;
    max-height: 92vh;
    border-radius: 1.25rem 1.25rem 0 0;
    transform: translateY(100%);
  }

  .hero-banner-modal__form-header {
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .hero-banner-modal__form-body {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

.hero-banner__ai-cta {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  width: auto;
}

/* Library or uploaded icon size */
.hero-banner__highlight-icon,
.hero-banner__ai-icon {
  --sf-icon-size: 1.375rem;
}

/* ---------- Background overlap (Styles > Background overlap) ----------
   The section itself is see-through; a backdrop behind the content paints
   the hero background (and soft glows) from the top down to a point partway
   up the image, so the rest of the image sits over the page below. */
/* Clipped at the top and sides only: the image's shadow may spill over the
   next section (drawn above it), while the backdrop never paints above the hero */
.hero-banner--overlap {
  z-index: 1;
  overflow: visible;
  overflow-x: clip;
  background-color: transparent;
  clip-path: inset(0 0 -12rem 0);
}

.hero-banner--overlap::after {
  display: none;
}

/* The animated glow (Background effect) and the animated background stay
   inside the backdrop: above it, and ending where it ends. module.js
   measures that line (--hero-band-bottom, from the section's bottom). */
.hero-banner--overlap > :is(.hero-banner__bg, .sf-bgfx) {
  z-index: 0;
  bottom: var(--hero-band-bottom, 45%);
}

/* Layer order in the overlap design, from the back: the backdrop, the glow
   and animated background, then the text and image. The content wrapper
   doesn't form its own layer here, or the backdrop inside it would cover
   the effects; its two columns are lifted above the effects instead. */
.hero-banner--overlap .hero-banner__inner {
  z-index: auto;
}

.hero-banner--overlap .hero-banner__content {
  position: relative;
}

/* No stacking context on the image column, so the backdrop can sit behind the text */
.hero-banner--overlap .hero-banner__visual {
  perspective: none;
}

.hero-banner--overlap .hero-banner__visual::before {
  content: "";
  position: absolute;
  top: -200vh;
  right: -100vw;
  bottom: var(--hero-overlap, 50%);
  left: -100vw;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 20% 85%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 75%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%),
    var(--hero-bg, var(--color-bg-alt));
  pointer-events: none;
}

.hero-banner--overlap.theme-dark .hero-banner__visual::before {
  background:
    radial-gradient(ellipse 60% 50% at 20% 85%, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 75%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
    var(--hero-bg, var(--color-bg));
}

/* The image's shadow carries onto the page below */
.hero-banner--overlap .hero-banner__image {
  box-shadow: 0 40px 80px -30px rgba(15, 23, 42, 0.45);
}

/* Styles > Space between text and image, on desktop for the image-below layout */
@media (min-width: 1024px) {
  .hero-banner--image-bottom .hero-banner__inner {
    gap: var(--hero-gap, 3.5rem);
  }
}
/* ---------- Stat badges on the hero image ---------- */
.hero-banner__badge {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: 0.875rem;
  background-color: var(--hero-float-bg, var(--color-card));
  box-shadow: 0 16px 34px -18px var(--shadow-color);
  transition: translate 0.3s ease-out;
}

.hero-banner__badge--1 { top: 6%; left: -2%; }
.hero-banner__badge--2 { top: 14%; right: -3%; }
.hero-banner__badge--3 { bottom: 14%; right: -3%; }

.hero-banner__badge-icon {
  --sf-icon-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--badge, var(--color-primary)) 14%, var(--color-card));
  color: var(--badge, var(--color-primary));
}

.hero-banner__badge--1 { --badge: #10B981; }
.hero-banner__badge--2 { --badge: var(--color-primary); }
.hero-banner__badge--3 { --badge: #3B82F6; }

.hero-banner__badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.hero-banner__badge-text strong {
  color: var(--hero-float-text, var(--color-heading));
  font-size: 1.0625rem;
}

.hero-banner__badge-text small {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.hero-banner--animate .hero-banner__badge {
  animation: heroPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both, heroFloat 7s ease-in-out infinite;
}

.hero-banner--animate .hero-banner__badge--1 { animation-delay: 0.8s, 1.5s; }
.hero-banner--animate .hero-banner__badge--2 { animation-delay: 1s, 1.7s; }
.hero-banner--animate .hero-banner__badge--3 { animation-delay: 1.2s, 1.9s; }

@media (max-width: 767px) {
  .hero-banner__badge {
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  }

  .hero-banner__badge--1 { left: 0; }
  .hero-banner__badge--2,
  .hero-banner__badge--3 { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner--animate .hero-banner__badge {
    animation: none;
  }
}

/* Forms from HubSpot's new form editor: same full-width gradient button as
   classic forms, and no extra space around the fields */
.hero-banner-modal__form-body [data-hsfc-id="Renderer"][data-hsfc-id="Renderer"] .hsfc-NavigationRow__Buttons {
  justify-content: stretch;
}

.hero-banner-modal__form-body [data-hsfc-id="Renderer"][data-hsfc-id="Renderer"] .hsfc-Button {
  width: 100%;
  margin-top: 0.5rem;
  background-image: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 40%, #2563EB));
}

/* Form pop-up header: icon on the left, label, title and text on the right */
.hero-banner-modal__form-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.125rem;
  align-items: center;
  padding-right: 4.25rem;
}

.hero-banner-modal__badge {
  grid-row: 1 / span 3;
  grid-column: 1;
  align-self: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0;
}

.hero-banner-modal__form-header > :not(.hero-banner-modal__badge) {
  grid-column: 2;
}

.hero-banner-modal__form-header .hero-banner-modal__title {
  padding-right: 0;
}

@media (max-width: 479px) {
  .hero-banner-modal__form-header {
    column-gap: 0.875rem;
    padding-right: 3.75rem;
  }

  .hero-banner-modal__badge {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ---------- Image position: Background ----------
   The hero image or video covers the hero behind an overlay; the text sits
   on top, vertically centered, at least Minimum height tall on desktop */
.hero-banner__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.hero-banner__media-file,
.hero-banner__media .sf-image-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-media-focus, center);
}

.hero-banner__media-overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-media-overlay, rgba(14, 18, 40, 0.85));
}

@media (min-width: 1024px) {
  .hero-banner--image-background:not(.hero-banner--overlay-even) .hero-banner__media-overlay {
    background: linear-gradient(90deg, var(--hero-media-overlay, rgba(14, 18, 40, 0.85)) 0%, var(--hero-media-overlay, rgba(14, 18, 40, 0.85)) 32%, transparent 78%);
  }

  .hero-banner--image-background {
    display: flex;
    align-items: center;
    min-height: var(--hero-media-height, 640px);
  }

  .hero-banner--image-background > .hero-banner__inner {
    width: 100%;
  }
}

.hero-banner--image-background {
  background-color: var(--color-bg);
}

.hero-banner--image-background .hero-banner__inner {
  grid-template-columns: minmax(0, 1fr);
}

.hero-banner--image-background .hero-banner__content {
  max-width: 40rem;
  text-align: left;
}

/* The decorative corner glows would sit on the video */
.hero-banner--image-background::before,
.hero-banner--image-background::after {
  display: none;
}

/* YouTube background: a 16:9 player scaled to cover the hero (like
   object-fit: cover), faded in once it has started */
.hero-banner__media {
  container-type: size;
}

.hero-banner__media-yt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  border: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.8s ease;
}

.hero-banner__media-yt.is-playing {
  opacity: 1;
}