.aa-cd { border-bottom: 1px solid var(--color-border); }

.aa-cd { position: relative; isolation: isolate; overflow: hidden; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(25, 111, 180, .16), transparent 60%), var(--color-bg); }
.aa-cd__inner .section-label { justify-content: center; }
.aa-cd__inner .section-title { margin: 0 auto; }
.aa-cd__clock { display: grid; grid-template-columns: repeat(4, minmax(0, 170px)); justify-content: center; gap: 1px; margin: 48px auto 0; background: var(--color-border); border: 1px solid var(--color-border); width: fit-content; }
.aa-cd__clock > div { background: var(--color-surface); padding: 26px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.aa-cd__n { font-size: clamp(40px, 6vw, 76px); font-weight: 200; letter-spacing: -.04em; line-height: 1; color: var(--color-fg); font-variant-numeric: tabular-nums; }
.aa-cd__u { font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-accent); }
.aa-cd__when { margin: 26px auto 0; max-width: 520px; color: var(--color-fg-muted); font-size: 14px; line-height: 1.7; }
.aa-cd__done { margin: 40px auto 0; font-size: 18px; color: var(--color-fg); }
.aa-cd__btn { margin-top: 30px; }
.aa-cd__btn::after { content: "\2197"; }
body.cms-edit .aa-cd__done[hidden] { display: block; opacity: .5; }
@media (max-width: 640px) {
  .aa-cd__clock { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}

/* Optional background image, darkened (evenly) so the text stays
   readable. The button that sets it only shows in the editor. */
.aa-cd__bg { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; }
.aa-cd__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(5, 7, 11, .45) 0%, rgba(5, 7, 11, .8) 60%, var(--color-bg) 100%); }
.aa-cd__bg-btn { display: none; }
body.cms-edit .aa-cd__bg-btn {
  display: inline-flex; position: absolute; right: 24px; bottom: 20px; z-index: 3;
  padding: 8px 12px; font: 12px var(--font-body); cursor: pointer;
  color: var(--color-fg); background: rgba(5, 7, 11, .75);
  border: 1px dashed var(--color-border); border-radius: 4px;
}
.aa-cd__clock > div { background: rgba(8, 12, 19, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }