.announcement-stack {
  display: grid;
  gap: 12px;
  margin-block: 18px;
}
.announcement-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px clamp(18px, 4vw, 34px);
  border: 1px solid color-mix(in srgb, var(--secondary) 36%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 95% 0, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 48%),
    var(--panel);
  box-shadow: var(--shadow-soft);
}
.announcement-banner-copy { min-width: 0; }
.announcement-banner-image { width: 96px; height: 72px; flex: 0 0 auto; border-radius: 13px; object-fit: cover; }
.announcement-banner-copy strong { color: var(--primary); font-size: clamp(1.1rem, 2.5vw, 1.45rem); }
.announcement-banner-copy p { margin: 5px 0 0; color: var(--text-soft); line-height: 1.7; }
.announcement-cta { flex: 0 0 auto; text-align: center; text-decoration: none; }
.announcement-dialog {
  position: relative;
  width: min(520px, calc(100% - 28px));
  padding: clamp(28px, 6vw, 46px);
  border: 1px solid color-mix(in srgb, var(--secondary) 35%, var(--border));
  border-radius: 26px;
  color: var(--text);
  background:
    radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 48%),
    var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
}
.announcement-dialog::backdrop { background: rgba(8, 16, 26, .68); backdrop-filter: blur(4px); }
.announcement-dialog h2 { margin: 16px 0 10px; color: var(--primary); font-size: clamp(1.6rem, 5vw, 2.2rem); }
.announcement-dialog-image { display: block; width: 100%; max-height: 240px; margin-top: 20px; border-radius: 16px; object-fit: cover; }
.announcement-dialog p { margin: 0 0 24px; color: var(--text-soft); line-height: 1.9; white-space: pre-line; }
.announcement-dialog .announcement-cta { display: inline-flex; justify-content: center; }
.announcement-eyebrow { color: var(--secondary); font-weight: 800; }
.announcement-close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  background: var(--bg);
  font-size: 1.5rem;
  cursor: pointer;
}
@media (max-width: 640px) {
  .announcement-banner { align-items: stretch; flex-direction: column; gap: 14px; }
  .announcement-banner-image { width: 100%; height: 160px; }
  .announcement-cta { width: 100%; }
}