.november-event {
  width: min(780px, calc(100% - 28px));
  max-width: 780px;
  padding: 0;
  border: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #f7f9ff;
  color: #172a68;
  box-shadow: 0 34px 100px rgba(9, 20, 67, 0.42);
}

.november-event::backdrop {
  background: rgba(6, 15, 54, 0.72);
  backdrop-filter: blur(8px);
}

.november-event-panel {
  position: relative;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  min-height: 500px;
}

.november-event-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(40, 57, 143, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: #52628e;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.november-calendar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 48px 34px;
  background: #273ca8;
  color: white;
  text-align: center;
  isolation: isolate;
}

.november-calendar::before,
.november-calendar::after {
  position: absolute;
  z-index: -1;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  content: "";
}

.november-calendar::before { top: -128px; left: -170px; }
.november-calendar::after { right: -205px; bottom: -135px; }
.november-calendar span { font-size: 24px; font-weight: 800; letter-spacing: -0.05em; }
.november-calendar strong {
  margin: 4px 0 -2px;
  color: #ffd949;
  font: 900 142px/0.95 "Manrope", sans-serif;
  letter-spacing: -0.1em;
  transform: translateX(-7px);
  text-shadow: 0 12px 30px rgba(8, 17, 67, 0.28);
}
.november-calendar small { font-size: 10px; font-weight: 800; letter-spacing: 0.17em; opacity: 0.72; }

.november-event-copy { display: flex; flex-direction: column; justify-content: center; padding: 54px 54px 40px; }
.november-event-label { margin: 0 0 14px; color: #2a43b7; font-size: 13px; font-weight: 900; }
.november-event-copy h2 { margin: 0; font-size: 38px; line-height: 1.18; letter-spacing: -0.06em; }
.november-event-copy > p:not(.november-event-label):not(.november-event-fineprint) {
  margin: 17px 0 0;
  color: #62739d;
  font-size: 14px;
  line-height: 1.7;
}
.november-event-copy ul { display: grid; gap: 8px; margin: 20px 0 24px; padding: 0; list-style: none; }
.november-event-copy li { color: #405580; font-size: 13px; font-weight: 700; }
.november-event-copy li::before { margin-right: 8px; color: #2b46be; content: "✓"; }
.november-event-cta {
  min-height: 54px;
  border: 0;
  border-radius: 12px;
  background: #273ca8;
  color: white;
  font-size: 15px;
  font-weight: 850;
  box-shadow: 0 12px 24px rgba(39, 60, 168, 0.24);
  cursor: pointer;
}
.november-event-cta:hover { background: #1f318e; }
.november-event-later { align-self: center; margin-top: 13px; border: 0; background: transparent; color: #69799c; font-size: 11px; text-decoration: underline; cursor: pointer; }
.november-event-fineprint { margin: 20px 0 0; color: #8996b1; font-size: 9px; line-height: 1.6; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .november-event[open] .november-event-panel { animation: november-reveal 0.36s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes november-reveal { from { opacity: 0; transform: translateY(14px) scale(.985); } }
}

@media (max-width: 640px) {
  .november-event { width: min(420px, calc(100% - 24px)); max-height: calc(100dvh - 24px); border-radius: 22px; }
  .november-event-panel { grid-template-columns: 1fr; min-height: 0; }
  .november-calendar { min-height: 142px; padding: 25px 24px 22px; }
  .november-calendar span { font-size: 16px; }
  .november-calendar strong { margin: 0; font-size: 74px; transform: translateX(-3px); }
  .november-calendar small { font-size: 8px; }
  .november-event-copy { padding: 29px 25px 24px; }
  .november-event-label { margin-bottom: 9px; font-size: 11px; }
  .november-event-copy h2 { font-size: 28px; }
  .november-event-copy > p:not(.november-event-label):not(.november-event-fineprint) { margin-top: 10px; font-size: 12px; }
  .november-event-copy ul { grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 14px 0 17px; }
  .november-event-copy li { font-size: 10px; }
  .november-event-copy li:last-child { grid-column: 1 / -1; }
  .november-event-cta { min-height: 49px; font-size: 13px; }
  .november-event-fineprint { margin-top: 12px; font-size: 8px; }
}