.gj_cc-hero {
  --gj-primary-blue: #00579f;
  --gj-radius-banner: 8px;
  --hero-cta-green: #70a340;
  --hero-cta-green-hover: #5f8c36;
  --hero-ink: #1a1a1a;
  --hero-muted: #5c5c5c;
  --hero-input-border: #d0d0d0;
  --hero-card-radius: 12px;
  --hero-field-height: 48px;
  /* ~½ typical card height — space for the half that hangs below the banner */
  --hero-card-overhang: clamp(6rem, 11vw, 8rem);

  box-sizing: border-box;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  overflow: visible;
  padding-bottom: var(--hero-card-overhang);
  width: 100%;
}

.gj_cc-hero *,
.gj_cc-hero *::before,
.gj_cc-hero *::after {
  box-sizing: border-box;
}

.gj_cc-hero__stage {
  overflow: visible;
  position: relative;
  width: 100%;
}

/* Banner + card share one box so the form’s vertical offset is from the image bottom */
.gj_cc-hero__banner-stack {
  height: min(70vh, 37.5rem);
  max-height: 37.5rem;
  position: relative;
  width: 100%;
}

.gj_cc-hero__banner {
  background: #2a2a2a;
  border-radius: var(--gj-radius-banner);
  inset: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.gj_cc-hero__banner-img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  width: 100%;
}

.gj_cc-hero__card-shell {
  align-items: flex-end;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 0 1rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 4;
}

.gj_cc-hero__card {
  background: #fff;
  border-radius: var(--hero-card-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  max-width: 520px;
  padding: 1.5rem 1.5rem 1.25rem;
  pointer-events: auto;
  /* Half on the banner, half below (anchor = bottom of .gj_cc-hero__banner-stack) */
  transform: translateY(50%);
  width: 100%;
}

.gj_cc-hero__card-title {
  color: var(--hero-ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 1rem;
}

.gj_cc-hero__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.gj_cc-hero__api-error {
  color: #b00020;
  font-size: 0.875rem;
  line-height: 1.4;
  margin: -0.35rem 0 1rem;
  text-align: left;
}

.gj_cc-hero__api-success {
  color: #1b5e20;
  font-size: 0.875rem;
  line-height: 1.4;
  margin: -0.35rem 0 1rem;
  text-align: left;
}

/* Offer not in pilot area — info notice (matches Costco LP design) */
.gj_cc-hero__pilot-unavailable {
  background: #e8f4fc;
  border: 1px solid #0a5fa0;
  border-radius: 4px;
  padding: 1rem 1.125rem;
  margin: -0.35rem 0 1rem;
  text-align: left;
}

.gj_cc-hero__pilot-unavailable__title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.gj_cc-hero__pilot-unavailable__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #333;
}

.gj_cc-hero__pilot-unavailable__link {
  color: #00579f;
  font-weight: 600;
  text-decoration: underline;
}

.gj_cc-hero__pilot-unavailable__link:hover {
  text-decoration: underline;
}

.gj_cc-hero__pilot-unavailable__link-text {
  color: #00579f;
  font-weight: 600;
  text-decoration: underline;
}

.gj_cc-hero__pilot-unavailable__link-btn {
  background: none;
  border: 0;
  color: #00579f;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.gj_cc-hero__pilot-unavailable__link-btn:hover {
  color: #003d73;
}

@media (max-width: 768px) {
  .gj_cc-hero {
    /* Taller stacked card + notice — reserve more scroll space below banner */
    --hero-card-overhang: clamp(13rem, 48vh, 26rem);
  }

  /* Banner height — card stays tied via .gj_cc-hero__card-shell + translateY */
  .gj_cc-hero__banner-stack {
    height: 240px;
    max-height: 240px;
    min-height: 240px;
  }

  /* Mobile spec: 16px outer gutters, 20px card inset, 20px vertical rhythm */
  .gj_cc-hero__card-shell {
    padding: 0 16px;
  }

  .gj_cc-hero__card {
    padding: 20px;
    /* Only 30px of the card overlaps the banner; rest sits below the stack */
    transform: translateY(calc(100% - 30px));
  }

  .gj_cc-hero__card-title {
    margin: 0 0 20px;
  }

  .gj_cc-hero__row {
    gap: 20px;
    margin-bottom: 20px;
  }

  .gj_cc-hero__api-error,
  .gj_cc-hero__api-success {
    margin: 0 0 20px;
  }

  .gj_cc-hero__pilot-unavailable {
    margin: 0 0 20px;
  }
}

.gj_cc-hero__submit:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

@media (max-width: 520px) {
  .gj_cc-hero__row {
    flex-direction: column;
  }

  /* In column flex, flex-basis applies to height — reset so the field stays 48px tall */
  .gj_cc-hero__input-wrap {
    flex: 0 0 auto;
    width: 100%;
  }
}

.gj_cc-hero__input-wrap {
  align-items: center;
  border: 1px solid var(--hero-input-border);
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 200px;
  height: var(--hero-field-height);
  max-height: var(--hero-field-height);
  min-height: var(--hero-field-height);
  min-width: 0;
  overflow: hidden;
}

.gj_cc-hero__input-icon {
  align-items: center;
  color: var(--hero-muted);
  display: flex;
  flex-shrink: 0;
  padding-left: 0.75rem;
}

.gj_cc-hero__input {
  align-self: stretch;
  border: 0;
  color: var(--hero-ink);
  flex: 1;
  font-size: 1rem;
  height: 100%;
  line-height: 1.25;
  min-height: 0;
  min-width: 0;
  outline: none;
  padding: 0 0.75rem 0 0.35rem;
}

.gj_cc-hero__input::placeholder {
  color: #8a8a8a;
}

.gj_cc-hero__submit {
  background: var(--hero-cta-green);
  border: none;
  border-radius: 6px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 700;
  height: var(--hero-field-height);
  max-height: var(--hero-field-height);
  min-height: var(--hero-field-height);
  padding: 0 1.25rem;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.gj_cc-hero__submit:hover {
  background: var(--hero-cta-green-hover);
}

.gj_cc-hero__footer {
  color: var(--hero-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0;
  text-align: center;
}

.gj_cc-hero__footer a {
  color: #00579f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.gj_cc-hero__footer a:hover {
  color: var(--hero-ink);
}

/* Notify modal (non-pilot “sign up to be notified”) */
.gj_cc-hero__notify-modal-backdrop {
  align-items: center;
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: auto;
  position: fixed;
  z-index: 10000;
}

.gj_cc-hero__notify-modal {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  max-height: min(90vh, 640px);
  max-width: 420px;
  overflow: auto;
  position: relative;
  width: 100%;
}

.gj_cc-hero__notify-modal__close {
  background: transparent;
  border: 0;
  color: #444;
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
  padding: 0.35rem 0.65rem;
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
}

.gj_cc-hero__notify-modal__close:hover {
  color: #000;
}

.gj_cc-hero__notify-modal__inner {
  padding: 2rem 1.75rem 1.5rem;
  text-align: center;
}

.gj_cc-hero__notify-modal__icon {
  display: block;
  margin: 0 auto 0.75rem;
}

.gj_cc-hero__notify-modal__headline {
  color: #00579f;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

.gj_cc-hero__notify-modal__subtext {
  color: #5c5c5c;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}

.gj_cc-hero__notify-modal__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.gj_cc-hero__notify-modal__field {
  display: block;
  margin: 0;
}

.gj_cc-hero__notify-modal__visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.gj_cc-hero__notify-modal__input-wrap {
  align-items: center;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  display: flex;
  min-height: 48px;
}

.gj_cc-hero__notify-modal__input-icon {
  align-items: center;
  color: #8a8a8a;
  display: flex;
  flex-shrink: 0;
  padding-left: 0.75rem;
}

.gj_cc-hero__notify-modal__input {
  border: 0;
  flex: 1;
  font-size: 1rem;
  min-width: 0;
  outline: none;
  padding: 0.65rem 0.75rem 0.65rem 0.35rem;
}

.gj_cc-hero__notify-modal__input::placeholder {
  color: #8a8a8a;
}

.gj_cc-hero__notify-modal__consent {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 0.625rem;
  margin: 0;
  text-align: left;
}

.gj_cc-hero__notify-modal__checkbox {
  appearance: none;
  background: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  height: 1.125rem;
  margin-top: 0.125rem;
  position: relative;
  width: 1.125rem;
}

.gj_cc-hero__notify-modal__checkbox:checked {
  background: #00579f;
  border-color: #00579f;
}

.gj_cc-hero__notify-modal__checkbox:checked::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  height: 0.5rem;
  left: 0.3125rem;
  position: absolute;
  top: 0.0625rem;
  transform: rotate(45deg);
  width: 0.25rem;
}

.gj_cc-hero__notify-modal__checkbox:focus-visible {
  outline: 2px solid #00579f;
  outline-offset: 2px;
}

.gj_cc-hero__notify-modal__checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.gj_cc-hero__notify-modal__consent-text {
  color: #333;
  font-size: 0.875rem;
  line-height: 1.4;
}

.gj_cc-hero__notify-modal__error {
  color: #b00020;
  font-size: 0.875rem;
  margin: 0;
  text-align: left;
}

.gj_cc-hero__notify-modal__success {
  color: #1b5e20;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 1rem;
  text-align: center;
}

.gj_cc-hero__notify-modal__submit {
  background: #00579f;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 48px;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  width: 100%;
}

.gj_cc-hero__notify-modal__submit:hover:not(:disabled) {
  background: #004a87;
}

.gj_cc-hero__notify-modal__submit:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

.gj_cc-hero__notify-modal__privacy {
  color: #6a6a6a;
  font-size: 0.6875rem;
  line-height: 1.45;
  margin: 1rem 0 0;
  text-align: center;
}

.gj_cc-hero__notify-modal__privacy-link {
  color: #00579f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.1em;
  padding-left: 4px;
}

.gj_cc-hero__notify-modal__privacy-link:hover {
  color: #003d73;
}