.hc-card {
  --hero-card-max-width: var(--hero-max-width, 1680px);
  --hero-card-min-height: var(--hero-min-height, clamp(500px, 52vh, 640px));
  --hero-card-padding: var(--hero-padding, clamp(30px, 4vw, 54px));
  --hero-card-gap: var(--hero-gap, clamp(34px, 5vw, 86px));
  --hero-card-content-column: minmax(500px, 0.9fr);
  --hero-card-media-column: minmax(420px, 1.1fr);
  --hero-heading-font: var(--hero-font-heading, inherit);
  --hero-body-font: var(--hero-font-body, inherit);
  --hero-background: transparent;
  --hero-surface: color-mix(in srgb, Canvas 92%, transparent);
  --hero-text-color: CanvasText;
  --hero-muted-color: color-mix(in srgb, CanvasText 62%, transparent);
  --hero-primary-color: Highlight;
  --hero-secondary-color: color-mix(in srgb, Highlight 22%, Canvas);
  --hero-border-color: color-mix(in srgb, CanvasText 12%, transparent);
  --hero-radius: clamp(24px, 4vw, 42px);
  --hero-shadow: 0 28px 80px color-mix(in srgb, CanvasText 12%, transparent);
  --hero-heading-size: var(--bkry-type-h1-size, 64px);
  --hero-heading-weight: 800;
  --hero-kicker-size: var(--bkry-type-kicker-size, 15px);
  --hero-content-size: var(--bkry-type-body-size, 18px);
  --hero-list-size: var(--bkry-type-body-sm-size, 16px);
  --hero-button-size: 1rem;
  --hero-footer-size: var(--bkry-type-body-sm-size, 16px);
  --hero-animation-duration: 700ms;
  --hero-animation-easing: ease;
  background: var(--hero-background);
  box-sizing: border-box;
  color: var(--hero-text-color);
  font-family: var(--hero-body-font);
  padding: var(--hero-outer-padding, 0);
}

.hc-card *,
.hc-card *::before,
.hc-card *::after {
  box-sizing: border-box;
}

.hc-card__inner {
  align-items: center;
  background: var(--hero-surface);
  border: var(--hero-card-border, 1px solid var(--hero-border-color));
  border-radius: var(--hero-radius);
  box-shadow: var(--hero-shadow);
  display: grid;
  gap: var(--hero-card-gap);
  grid-template-columns: var(--hero-card-content-column) var(--hero-card-media-column);
  margin: 0 auto;
  max-width: var(--hero-card-max-width);
  min-height: var(--hero-card-min-height);
  overflow: hidden;
  padding: var(--hero-card-padding);
  width: 100%;
}

.hc-media-left .hc-card__zone--left {
  grid-column: 2;
}

.hc-media-left .hc-card__zone--right {
  grid-column: 1;
  grid-row: 1;
}

.hc-card__zone {
  min-width: 0;
}

.hc-card__zone--left {
  display: var(--hero-left-display, grid);
  gap: var(--hero-content-gap, 14px);
  justify-items: start;
  max-width: var(--hero-copy-max-width, 840px);
  text-align: var(--hero-left-align, left);
}

.hc-card__zone--right {
  display: grid;
  gap: var(--hero-media-gap, 22px);
  justify-items: var(--hero-media-justify-items, center);
}

.hc-card__kicker {
  color: var(--hero-kicker-color, var(--hero-primary-color)) !important;
  font-family: var(--hero-heading-font);
  font-size: var(--hero-kicker-size) !important;
  font-weight: var(--hero-kicker-weight, 800) !important;
  letter-spacing: var(--hero-kicker-letter-spacing, 0.12em) !important;
  line-height: var(--hero-kicker-line-height, 1.2) !important;
  margin: var(--hero-kicker-margin, 0) !important;
  opacity: var(--hero-kicker-opacity, 1) !important;
  text-align: var(--hero-kicker-align, left) !important;
  text-transform: var(--hero-kicker-transform, uppercase);
}

.hc-card__pre,
.hc-card__extra {
  color: var(--hero-extra-color, var(--hero-muted-color)) !important;
  font-size: var(--hero-extra-size, var(--hero-content-size)) !important;
  line-height: var(--hero-extra-line-height, 1.6) !important;
  margin: var(--hero-extra-margin, 0) !important;
  max-width: var(--hero-extra-max-width, 100%);
  text-align: var(--hero-extra-align, left) !important;
}

.hc-card__pre a,
.hc-card__extra a {
  color: var(--hero-extra-link-color, var(--hero-primary-color)) !important;
  text-decoration: none;
}

.hc-card__extra input[type="search"],
.hc-card__extra input[type="text"] {
  background: var(--hero-extra-input-bg, #fff);
  border: 1px solid var(--hero-extra-input-border, var(--hero-border-color));
  color: var(--hero-text-color);
  display: block;
  font: inherit;
  min-height: var(--hero-extra-input-height, 58px);
  padding: var(--hero-extra-input-padding, 0 18px);
  width: 100%;
}

.hc-card__heading {
  color: var(--hero-text-color) !important;
  font-family: var(--hero-heading-font);
  font-size: var(--hero-heading-size) !important;
  font-weight: var(--hero-heading-weight) !important;
  letter-spacing: var(--hero-heading-letter-spacing, 0) !important;
  line-height: var(--hero-heading-line-height, 1.08) !important;
  margin: var(--hero-heading-margin, 0) !important;
  max-width: var(--hero-heading-max-width, 840px);
  text-align: var(--hero-heading-align, left) !important;
}

.hc-card__content {
  color: var(--hero-muted-color) !important;
  font-size: var(--hero-content-size) !important;
  line-height: var(--hero-content-line-height, 1.6) !important;
  margin: var(--hero-content-margin, 0) !important;
  max-width: var(--hero-content-max-width, 720px);
  opacity: var(--hero-content-opacity, 1) !important;
  text-align: var(--hero-content-align, left) !important;
}

.hc-card__content p {
  margin: 0 !important;
}

.hc-card__content p + p {
  margin-top: 0.8em !important;
}

.hc-card__list {
  display: grid;
  gap: var(--hero-list-gap, 10px);
  list-style: none;
  margin: var(--hero-list-margin, 8px 0 0);
  padding: 0;
}

.hc-card__list li {
  align-items: flex-start;
  color: var(--hero-list-color, var(--hero-text-color)) !important;
  display: flex;
  font-size: var(--hero-list-size) !important;
  font-weight: var(--hero-list-weight, 700) !important;
  gap: var(--hero-list-item-gap, 0.75em);
  line-height: var(--hero-list-line-height, 1.45) !important;
}

.hc-card__list-icon {
  color: var(--hero-list-icon-color, var(--hero-primary-color)) !important;
  flex: 0 0 auto;
  line-height: var(--hero-list-icon-line-height, 1.4);
}

.hc-card__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-button-gap, 14px);
  justify-content: var(--hero-button-justify, flex-start);
  margin-top: var(--hero-button-margin-top, 10px);
}

.hc-card__buttons--right {
  justify-content: var(--hero-right-button-justify, center);
  justify-self: var(--hero-right-button-justify-self, auto);
  margin-inline: var(--hero-right-button-margin-inline, 0);
  max-width: var(--hero-right-button-max-width, none);
  width: var(--hero-right-button-width, auto);
}

.hc-card__button {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: var(--hero-button-height, 52px);
  min-width: var(--hero-button-min-width, auto);
  padding: var(--hero-button-padding, 0 26px);
  text-decoration: none;
  white-space: nowrap;
}

.hc-card__button:not(.bkry-btn) {
  border: 1px solid var(--hero-button-border-color, transparent);
  border-radius: var(--hero-button-radius, 999px);
  font-family: var(--hero-body-font);
  font-size: var(--hero-button-size);
  font-weight: var(--hero-button-weight, 700);
  line-height: 1;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.hc-card__button:not(.bkry-btn):hover,
.hc-card__button:not(.bkry-btn):focus-visible {
  transform: translateY(-1px);
}

.hc-card__button--primary:not(.bkry-btn) {
  background: var(--hero-primary-color);
  border-color: var(--hero-primary-color);
  color: var(--hero-primary-text-color, Canvas) !important;
}

.hc-card__button--secondary:not(.bkry-btn) {
  background: var(--hero-secondary-button-bg, transparent);
  border-color: var(--hero-secondary-button-border, var(--hero-primary-color));
  color: var(--hero-secondary-button-text, var(--hero-text-color)) !important;
}

.hc-card__footer {
  color: var(--hero-footer-color, var(--hero-muted-color)) !important;
  font-size: var(--hero-footer-size) !important;
  line-height: var(--hero-footer-line-height, 1.55) !important;
  margin: var(--hero-footer-margin, 8px 0 0) !important;
  max-width: var(--hero-footer-max-width, 720px);
  opacity: var(--hero-footer-opacity, 1) !important;
  text-align: var(--hero-footer-align, left) !important;
}

.hc-card__image {
  display: grid;
  justify-self: var(--hero-image-justify-self, auto);
  justify-items: center;
  margin: var(--hero-image-margin, 0);
  max-width: var(--hero-image-max-width, 760px);
  width: 100%;
}

.hc-card__image img {
  display: block;
  filter: var(--hero-image-filter, none);
  height: auto;
  max-height: var(--hero-image-max-height, 460px);
  max-width: 100%;
  object-fit: contain;
  width: var(--hero-image-width, auto);
}

.hc-card__image-caption {
  color: var(--hero-image-caption-color, var(--hero-text-color)) !important;
  font-family: var(--hero-heading-font);
  font-size: var(--hero-image-caption-size, var(--bkry-type-h5-size, 22px)) !important;
  font-weight: var(--hero-image-caption-weight, 800) !important;
  line-height: var(--hero-image-caption-line-height, 1.25) !important;
  margin-top: var(--hero-image-caption-margin-top, 18px);
  max-width: var(--hero-image-caption-max-width, none);
  text-align: var(--hero-image-caption-align, center) !important;
}

.hc-animate [data-hc-part] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity var(--hero-animation-duration) var(--hero-animation-easing),
    transform var(--hero-animation-duration) var(--hero-animation-easing);
  transition-delay: var(--hc-animation-delay, 0ms);
  will-change: opacity, transform;
}

.hc-animate [data-hc-part="image"] {
  transform: translateY(38px) scale(0.96);
}

.hc-animate.hc-is-visible [data-hc-part] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hc-animate.hc-is-visible [data-hc-part="image"] {
  transform: translate3d(0, 0, 0) scale(1);
}

@media (scripting: none) {
  .hc-animate [data-hc-part],
  .hc-animate [data-hc-part="image"] {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1080px) {
  .hc-card__inner {
    grid-template-columns: 1fr;
  }

  .hc-media-left .hc-card__zone--left,
  .hc-media-left .hc-card__zone--right {
    grid-column: auto;
    grid-row: auto;
  }

  .hc-card__buttons--right {
    justify-self: center;
    margin-inline: 0;
  }
}

@media (max-width: 760px) {
  .hc-card {
    --hero-card-padding: var(--hero-mobile-padding, 22px 18px);
    --hero-card-min-height: 0;
    --hero-heading-size: var(--hero-mobile-heading-size, var(--bkry-type-h1-size, 36px));
  }

  .hc-card__inner {
    border-radius: var(--hero-mobile-radius, 24px);
  }

  .hc-card__buttons,
  .hc-card__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hc-animate [data-hc-part],
  .hc-animate [data-hc-part="image"] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}