.day-page main {
  --day-ink: #221c42;
  --day-muted: #5b596a;
  --day-sage: #426b4a;
  --day-soft: #dde7df;
  --day-peach: #ffe1c9;
  color: var(--day-ink);
}

.day-page main p { max-width: 58ch; }
.day-page .day-hero { padding: 64px 0 72px; background: var(--day-soft); }
.day-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); gap: 64px; align-items: center; }
.day-app-icon { width: 88px; height: 88px; margin-bottom: 25px; border-radius: 22px; }
.day-page h1 { max-width: 8ch; font-size: clamp(3rem, 6.2vw, 5.2rem); }
.day-page h2 { font-size: clamp(1.9rem, 3.7vw, 3.25rem); }
.day-stage { color: var(--day-muted); margin: 22px 0 0; }
.day-lead { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.45; margin: 22px 0 14px; }
.day-note { font-size: .9rem; color: var(--day-muted); }
.day-page .day-button { color: #fff; background: var(--day-sage); }
.day-page .day-button:focus-visible, .day-page main a:focus-visible { outline: 3px solid var(--day-ink); outline-offset: 4px; }
.day-product { margin: 0; justify-self: center; width: min(100%, 300px); }
.day-product img { width: 100%; height: auto; border-radius: 26px; }
.day-product figcaption { margin-top: 14px; font-size: .85rem; color: var(--day-muted); text-align: center; }
.day-overview { background: #f3f7f2; }
.day-details, .day-timing { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 76px; align-items: start; }
.day-details h2 + p, .day-timing h2 + p { margin-top: 24px; }
.day-audiences { margin: 0; display: grid; gap: 28px; }
.day-audiences dt { font-size: 1.3rem; font-weight: 780; line-height: 1.2; }
.day-audiences dd { margin: 8px 0 0; }
.day-timing { align-items: center; }
.day-release { background: var(--day-soft); padding: clamp(28px, 4vw, 48px); border-radius: 24px; }
.day-release p { font-size: clamp(2.75rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -.04em; font-weight: 800; margin: 0 0 16px; white-space: nowrap; }
.day-release span { font-size: 1.1rem; }
.day-preview { background: var(--day-peach); }
.day-preview-notes h3 { font-size: 1.35rem; }
.day-preview-notes p:first-of-type { margin-top: 16px; }
.day-preview-notes a { text-underline-offset: 4px; }

@media (max-width: 820px) {
  .day-hero-grid { gap: 42px; }
  .day-details, .day-timing { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 620px) {
  .day-page .day-hero { padding: 38px 0 54px; }
  .day-hero-grid { grid-template-columns: 1fr; }
  .day-app-icon { width: 72px; height: 72px; margin-bottom: 20px; }
  .day-product { width: min(82%, 300px); }
}