.dayloom-teaser,
.dayloom-hero,
.dayloom-how,
.dayloom-family,
.dayloom-conversation,
.dayloom-memory,
.dayloom-close {
  color: #f8f5ff;
}

.dayloom-teaser {
  overflow: hidden;
  background: radial-gradient(circle at 74% 48%, rgba(101, 55, 233, .26), transparent 37%), #0d0918;
  border-top: 1px solid rgba(167, 129, 226, .12);
}

.dayloom-teaser-inner,
.dayloom-hero-inner,
.dayloom-family-grid,
.dayloom-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}

.dayloom-teaser-inner {
  min-height: 650px;
  padding-block: 74px;
}

.dayloom-label {
  display: inline-block;
  color: #b890ff;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.dayloom-teaser h2,
.dayloom-hero h1 {
  margin: 15px 0 0;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: .95;
  letter-spacing: -.07em;
}

.dayloom-teaser-headline,
.dayloom-lead {
  max-width: 600px;
  margin: 22px 0 0;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.04em;
}

.dayloom-teaser-copy > p:not(.dayloom-teaser-headline),
.dayloom-hero-copy > p:not(.dayloom-lead) {
  max-width: 620px;
  color: #b9add0;
  line-height: 1.7;
}

.dayloom-mini-preview {
  max-width: 445px;
  margin: 30px 0;
  padding: 18px;
  background: rgba(25, 17, 40, .9);
  border: 1px solid #4c356f;
  border-radius: 22px;
}

.dayloom-mini-streak {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  column-gap: 8px;
}

.dayloom-mini-streak > span {
  grid-row: span 2;
  color: #a875ff;
  font-size: 1.6rem;
}

.dayloom-mini-streak strong { font-size: 1.05rem; }
.dayloom-mini-streak small { color: #ac9bbf; }
.dayloom-mini-preview ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 18px 0 0; list-style: none; }
.dayloom-mini-preview li { padding: 10px 12px; background: #120d1f; border-radius: 12px; }
.dayloom-mini-preview li span, .dayloom-mini-preview li small { display: block; }
.dayloom-mini-preview li span { font-weight: 750; }
.dayloom-mini-preview li small { color: #aa96c1; font-size: .72rem; }
.dayloom-mini-preview > p { margin: 12px 0 0; color: #8e80a3; font-size: .72rem; }
.dayloom-teaser-link { gap: 12px; }

.dayloom-teaser-visual,
.dayloom-hero-image,
.dayloom-phone-visual {
  display: grid;
  justify-items: center;
  min-width: 0;
}

.dayloom-teaser-visual img,
.dayloom-hero-image img,
.dayloom-phone-visual img {
  display: block;
  width: min(100%, 470px);
  height: auto;
  object-fit: contain;
}

.dayloom-teaser-visual img { width: min(100%, 425px); }

.dayloom-hero {
  overflow: hidden;
  background: radial-gradient(circle at 72% 35%, rgba(101, 55, 233, .25), transparent 38%), linear-gradient(145deg, #090611, #170c29);
}

.dayloom-hero-inner { min-height: 700px; padding-block: 80px; }
.dayloom-hero-copy > p:not(.dayloom-lead) { font-size: 1.05rem; }
.dayloom-hero-image p { margin: 4px 0 0; color: #9e8db4; font-size: .75rem; }
.dayloom-text-link { display: inline-flex; gap: 10px; margin-top: 14px; color: #c9afff; font-weight: 800; }
.dayloom-text-link:hover, .dayloom-text-link:focus-visible { color: #fff; }

.dayloom-how,
.dayloom-family,
.dayloom-conversation,
.dayloom-memory,
.dayloom-close { padding-block: clamp(72px, 10vw, 120px); }
.dayloom-how { background: #0d0918; }
.dayloom-section-heading { max-width: 760px; margin-bottom: 42px; }
.dayloom-section-heading h2,
.dayloom-family h2,
.dayloom-conversation h2,
.dayloom-memory h2,
.dayloom-close h2 { margin: 0; font-size: clamp(2.35rem, 5vw, 4.5rem); line-height: 1.06; letter-spacing: -.055em; }
.dayloom-section-heading > p:last-child,
.dayloom-family-grid > div:first-child > p:not(.section-kicker),
.dayloom-split > div > p:not(.section-kicker),
.dayloom-close-inner > p:not(.section-kicker) { color: #b9add0; font-size: 1.04rem; line-height: 1.75; }
.dayloom-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.dayloom-step-grid article { padding: 28px; background: linear-gradient(145deg, #1a112a, #110b1d); border: 1px solid #46355f; border-radius: 24px; }
.dayloom-step-grid article > span { color: #a875ff; font-size: .76rem; font-weight: 850; letter-spacing: .1em; }
.dayloom-step-grid h3 { margin: 28px 0 8px; font-size: 1.22rem; line-height: 1.2; }
.dayloom-step-grid p { margin: 0; color: #ac9ebf; font-size: .91rem; line-height: 1.65; }

.dayloom-family { background: radial-gradient(circle at 85% 30%, rgba(101, 55, 233, .16), transparent 38%), #100a1d; }
.dayloom-family-grid > div:first-child > p:not(.section-kicker) { max-width: 590px; }
.dayloom-family-card { padding: clamp(24px, 4vw, 38px); background: #1a1128; border: 1px solid #52396d; border-radius: 26px; }
.dayloom-family-card > p { margin: 0 0 18px; color: #a98cc9; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dayloom-family-card > div { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid rgba(210, 186, 243, .12); }
.family-initial { display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: #6537e9; border-radius: 50%; font-weight: 800; }
.dayloom-family-card strong { font-size: .95rem; }
.dayloom-family-card small { color: #af9bc6; text-align: right; }

.dayloom-conversation { background: #0c0816; }
.dayloom-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.dayloom-split > div > p:not(.section-kicker) { max-width: 600px; }
.dayloom-conversation .dayloom-phone-visual img { width: min(100%, 390px); }
.dayloom-memory { background: radial-gradient(circle at 70% 50%, rgba(101, 55, 233, .17), transparent 40%), #130b22; }
.dayloom-memory-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.dayloom-memory h2 span { color: #b996ff; }
.dayloom-memory .dayloom-phone-visual img { width: min(100%, 410px); }
.memory-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 600px; margin-top: 30px; }
.memory-path span { color: #cdbde1; font-size: .79rem; font-weight: 800; }
.memory-path span:nth-child(odd) { padding: 9px 11px; background: #221633; border: 1px solid #573c79; border-radius: 999px; }
.memory-path span:nth-child(even) { color: #a875ff; }

.dayloom-close { text-align: center; background: radial-gradient(circle at 50% 12%, rgba(101, 55, 233, .28), transparent 45%), #0a0715; }
.dayloom-close-inner { display: grid; justify-items: center; }
.dayloom-close h2 { max-width: 830px; margin-top: 22px; }
.dayloom-close-inner > p:not(.section-kicker) { max-width: 650px; }
.dayloom-days { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; color: #efe7ff; background: #211332; border: 1px solid #613e94; border-radius: 999px; font-weight: 850; }
.dayloom-days > span { color: #b990ff; }
.dayloom-days small { color: #9f8cb5; font-size: .7rem; font-weight: 600; }
.dayloom-close-inner > .dayloom-private { color: #e2d5f5 !important; font-weight: 650; }
.dayloom-final { display: grid; gap: 5px; margin: 30px 0 25px; }
.dayloom-final span { color: #b9add0; }
.dayloom-final strong { font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.25; }
.dayloom-store-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dayloom-store-links .button-quiet { border: 1px solid #654886 !important; }
.dayloom-close-inner > .dayloom-availability { margin-top: 18px; color: #9688a7 !important; font-size: .82rem !important; }

@media (max-width: 900px) {
  .dayloom-teaser-inner, .dayloom-hero-inner, .dayloom-family-grid, .dayloom-split, .dayloom-memory-grid { grid-template-columns: 1fr; }
  .dayloom-teaser-inner { padding-block: 72px 0; }
  .dayloom-teaser-visual img { width: min(80vw, 380px); }
  .dayloom-hero-inner { padding-block: 72px 50px; }
  .dayloom-hero-image img { width: min(80vw, 420px); }
  .dayloom-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dayloom-conversation .dayloom-phone-visual { order: 2; }
  .dayloom-conversation .dayloom-phone-visual img, .dayloom-memory .dayloom-phone-visual img { width: min(80vw, 370px); }
}

@media (max-width: 560px) {
  .dayloom-teaser-inner { gap: 24px; }
  .dayloom-teaser h2, .dayloom-hero h1 { font-size: clamp(3.8rem, 17vw, 5.5rem); }
  .dayloom-mini-preview { max-width: 100%; }
  .dayloom-step-grid { grid-template-columns: 1fr; }
  .dayloom-step-grid article { padding: 22px; }
  .dayloom-step-grid h3 { margin-top: 14px; }
  .dayloom-family-card > div { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; }
  .dayloom-family-card small { grid-column: 2; margin-top: -10px; text-align: left; }
  .dayloom-days { border-radius: 18px; }
  .dayloom-store-links, .dayloom-store-links .button, .dayloom-teaser-link { width: 100%; }
  .dayloom-phone-visual img { max-width: 100%; }
}
