.marketing-hero {
  min-height: 100vh;
  min-height: 100dvh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Fades the bottom of the art into the page background (inset, soft falloff) */
  box-shadow: inset 0 -10rem 7rem -2rem var(--bs-body-bg);
}

/* Below 1320px: full-height flex, logo top + CTA bottom; panel aligned to the right. */
.marketing-hero-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  max-width: 786px;
  align-self: flex-end;
  width: min(100%, 786px);
  margin-top: 2rem;
}

.marketing-hero-cta {
  margin-top: auto;
}

.marketing-hero-subtitle {
  margin-bottom: 1rem;
}

/* >=1320px: logo + blurb + CTA stacked at top, absolute top-right. */
@media (min-width: 1441px) {
  .marketing-hero-panel {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    margin: 3rem 3rem 0 3rem;
    flex: 0 0 auto;
    align-self: auto;
    width: auto;
  }

  .marketing-hero-cta {
    margin-top: 0;
    text-align: start;
  }

  .marketing-hero-subtitle {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}

.marketing-hero-logo {
  max-width: 100%;
  height: auto;
}

.marketing-setting-banner {
  position: relative;
  isolation: isolate;
  min-height: 14rem;
  overflow: hidden;
}

.marketing-setting-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bs-body-bg) 50%, transparent),
    color-mix(in srgb, var(--bs-body-bg) 82%, transparent)
  );
}

.marketing-setting-banner > .container {
  position: relative;
  z-index: 1;
}

.marketing-setting-banner--neon {
  background: linear-gradient(
    125deg,
    color-mix(in srgb, #0dcaf0 28%, var(--bs-body-bg)) 0%,
    color-mix(in srgb, var(--bs-body-bg) 90%, #0dcaf0) 42%,
    color-mix(in srgb, var(--bs-danger) 22%, var(--bs-body-bg)) 100%
  );
}

.marketing-setting-banner--veil {
  background: linear-gradient(
    235deg,
    color-mix(in srgb, #6f42c1 26%, var(--bs-body-bg)) 0%,
    color-mix(in srgb, var(--bs-body-bg) 85%, #d63384) 48%,
    color-mix(in srgb, var(--bs-body-bg) 92%, #fd7e14) 100%
  );
}

.marketing-mechanics {
  background: color-mix(in srgb, var(--bs-body-color) 4%, var(--bs-body-bg));
}

.marketing-mechanics-card {
  background-color: var(--bs-body-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.marketing-mechanics-card:hover {
  border-color: var(--bs-border-color) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
}