.value-hero[data-operating-state] {
  min-height: 400px;
}

.operating-hero-media {
  position: absolute;
  inset: 0;
}

.operating-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}

.value-hero[data-operating-state] .value-hero-content {
  min-height: 400px;
  justify-content: flex-end;
  padding: 92px 16px 24px;
}

.value-hero[data-operating-state] h1 {
  max-width: 520px;
  font-size: clamp(27px, 6vw, 44px);
}

.value-hero[data-operating-state] .value-hero-content > p:not(.daily-kicker) {
  max-width: 520px;
}

.operating-benefit {
  display: block;
  width: fit-content;
  max-width: 520px;
  margin-top: 10px;
  padding: 7px 10px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.35;
  backdrop-filter: blur(8px);
}

.operating-safe-note {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
}

.operating-hero-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 22px 16px;
  background:
    linear-gradient(0deg, var(--surface-soft), var(--surface-soft)),
    var(--surface-soft);
}

.operating-hero-skeleton span,
.operating-hero-skeleton strong,
.operating-hero-skeleton i,
.operating-hero-skeleton button {
  display: block;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--surface-soft), var(--surface-soft), var(--surface-soft));
  background-size: 220% 100%;
  animation: operating-pulse 1.3s linear infinite;
}

.operating-hero-skeleton span {
  width: 112px;
  height: 12px;
}

.operating-hero-skeleton strong {
  width: min(520px, 88%);
  height: 54px;
}

.operating-hero-skeleton i {
  width: min(460px, 78%);
  height: 36px;
}

.operating-hero-skeleton button {
  width: 190px;
  height: 42px;
}

@keyframes operating-pulse {
  to { background-position: -220% 0; }
}

@media (min-width: 700px) {
  .value-hero[data-operating-state] {
    min-height: 430px;
  }

  .value-hero[data-operating-state] .value-hero-content {
    min-height: 430px;
    padding: 110px 34px 34px;
  }
}

@media (max-width: 360px) {
  .value-hero[data-operating-state],
  .value-hero[data-operating-state] .value-hero-content {
    min-height: 390px;
  }

  .value-hero[data-operating-state] .value-hero-content {
    padding: 72px 12px 18px;
  }

  .value-hero[data-operating-state] h1 {
    font-size: 25px;
  }

  .value-hero[data-operating-state] .hero-proof-row {
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .operating-hero-skeleton span,
  .operating-hero-skeleton strong,
  .operating-hero-skeleton i,
  .operating-hero-skeleton button {
    animation: none;
  }
}

/* The signed-in second-screen campaign retains its established image layout. */
.value-hero[data-operating-state] { position: relative; overflow: hidden; margin: 4px 0 12px; border-radius: var(--radius); color: var(--text); background: #11141b; }
.value-hero[data-operating-state] .value-hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,8,12,.9),rgba(6,10,14,.72) 23%,rgba(8,13,18,.24) 58%,rgba(8,13,18,.08)),linear-gradient(108deg,rgba(7,15,20,.82),rgba(7,15,20,.42) 45%,rgba(7,15,20,.08)); }
.value-hero[data-operating-state] .value-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; }
.value-hero[data-operating-state] h1 { margin: 0; font-weight: 800; line-height: 1.08; }
.value-hero[data-operating-state] .value-hero-content > p:not(.daily-kicker) { margin: 9px 0 0; color: var(--text); font-size: 13px; line-height: 1.42; }
.value-hero[data-operating-state] .value-hero-actions { display: grid; grid-template-columns: minmax(0,196px); gap: 8px; margin-top: 14px; }
.value-hero[data-operating-state] .value-hero-actions button { min-height: 42px; font-size: 12px; }
.value-hero[data-operating-state] .hero-proof-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.value-hero[data-operating-state] .hero-proof-row span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-size: 11px; background: rgba(0,0,0,.35); }