.play-styles {
  --play-ink: #172019;
  --play-muted: #526057;
  --play-line: #c9d1c6;
  color: var(--play-ink);
  background: #f7f3e8;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  scroll-margin-top: 6rem;
}

.play-styles .play-styles__shell {
  width: min(calc(100% - clamp(2.5rem, 9vw, 9rem)), 1180px);
  margin-inline: auto;
}

.play-styles :where(h2, h3, h4, p, figure, dl, dd) { margin: 0; }
.play-styles :where(h2, h3, h4) {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.play-styles h2 { font-size: clamp(2.2rem, 4vw, 3.8rem); }
.play-styles h3 { font-size: clamp(1.85rem, 3vw, 2.6rem); }
.play-styles p { line-height: 1.65; }
.play-styles .play-styles__kicker {
  margin-bottom: .85rem;
  color: #345541;
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.play-styles__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
.play-styles__intro > p { max-width: 49ch; color: var(--play-muted); }
.play-styles__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.play-styles__option { min-width: 0; }
.play-styles__media { margin-bottom: 1.8rem; }
.play-styles__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #12291d;
}
.play-styles__media figcaption {
  margin-top: .6rem;
  color: var(--play-muted);
  font-size: .75rem;
  line-height: 1.5;
}
.play-styles__media figcaption a { color: inherit; text-underline-offset: .2em; }
.play-styles__option > p:not(.play-styles__kicker) { margin-top: 1rem; color: var(--play-muted); max-width: 53ch; }
.play-styles__facts { margin-block: 1.5rem; border-top: 1px solid var(--play-line); }
.play-styles__facts > div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--play-line);
  font-size: .875rem;
  line-height: 1.6;
}
.play-styles__facts dt { color: var(--play-muted); }
.play-styles__facts dd { font-weight: 600; }
.play-styles .play-styles__link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  color: #214b32;
  font-size: .9rem;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.play-styles__link img { width: 20px; height: 20px; flex: 0 0 auto; }
.play-styles__link:hover { text-decoration-thickness: 2px; }
.play-styles a:focus-visible { outline: 3px solid #1f6591; outline-offset: 5px; }
.play-styles__closing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--play-line);
}
.play-styles__closing p { max-width: 62ch; font-size: .9rem; color: var(--play-muted); }
.play-styles__closing a { flex-shrink: 0; }

.play-styles .play-styles__browse { display: flex; width: fit-content; font-weight: 500; font-size: .8rem; }
.play-styles__games {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--play-line);
  scroll-margin-top: 7rem;
}
.play-styles__games-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: end; margin-bottom: 2rem; }
.play-styles__games-intro > p { color: var(--play-muted); max-width: 53ch; font-size: .95rem; }
.play-styles__game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.play-styles__game { min-width: 0; }
.play-styles__game .play-styles__media { margin-bottom: 1rem; }
.play-styles__game h4 { font-size: clamp(1.45rem, 2vw, 1.8rem); margin-bottom: .75rem; }
.play-styles__game > p { color: var(--play-muted); font-size: .875rem; }
.play-styles__game .play-styles__game-type { color: #345541; font-size: .7rem; font-weight: 650; margin-bottom: .5rem; }
.play-styles .play-styles__source { margin-top: 1rem; font-size: .75rem; color: var(--play-muted); }
.play-styles__source a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.play-styles__video { display: grid; grid-template-columns: 48px 1fr auto; gap: 1.5rem; align-items: center; margin-top: 1.75rem; padding: 1.75rem 2rem; background: #193c2b; color: #fcfbf7; }
.play-styles__video-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; padding-left: 3px; color: #d7e3b1; font-size: 1rem; }
.play-styles__video h4 { font-size: 1.7rem; }
.play-styles__video .play-styles__kicker { color: #d7e3b1; font-size: .65rem; margin-bottom: .5rem; }
.play-styles__video p:not(.play-styles__kicker) { max-width: 61ch; margin-top: .5rem; font-size: .85rem; color: #e0e8de; }
.play-styles__video .play-styles__link { color: #fcfbf7; white-space: nowrap; }
.play-styles__video a:focus-visible { outline-color: #e3eab9; }
.play-styles__challenges { display: grid; grid-template-columns: 1fr 1.35fr; gap: 3rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--play-line); }
.play-styles__challenges h4 { font-size: 1.7rem; }
.play-styles__challenges > div > p:not(.play-styles__kicker) { max-width: 43ch; margin-top: .85rem; color: var(--play-muted); font-size: .9rem; }
.play-styles__challenge-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; }
.play-styles__challenge-list dt { font-size: .875rem; font-weight: 700; margin-bottom: .4rem; }
.play-styles__challenge-list dd { color: var(--play-muted); font-size: .85rem; line-height: 1.6; }

/* A compact introduction; the complete comparison lives on Packages. */
.play-styles--preview { background: #fcfbf7; padding-block: clamp(2.5rem, 5vw, 4rem); }
.play-styles__preview-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 2rem; align-items: center; }
.play-styles__preview-copy h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.play-styles__preview-copy > p:not(.play-styles__kicker) { margin-block: 1rem .6rem; color: var(--play-muted); }
.play-styles__preview-option { min-width: 0; align-self: start; }
.play-styles__preview-option .play-styles__media { margin-bottom: 1rem; }
.play-styles__preview-option h3 { font-size: 1.6rem; }
.play-styles__preview-option > p { color: var(--play-muted); font-size: .85rem; margin-top: .4rem; }

.play-styles--birthday { background: #fcfbf7; }
.play-styles__feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.play-styles__feature-copy > p:not(.play-styles__kicker) { margin-top: 1.2rem; color: var(--play-muted); }
.play-styles__feature-copy .play-styles__link { margin-top: 1rem; }
.play-styles__feature .play-styles__media { margin: 0; }

@media (max-width: 899px) {
  .play-styles__video { grid-template-columns: 48px 1fr; }
  .play-styles__video > a { grid-column: 2; }
  .play-styles__game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .play-styles__games-intro, .play-styles__challenges { gap: 1.5rem; }
  .play-styles__preview-grid { grid-template-columns: 1fr 1fr; }
  .play-styles__preview-copy { grid-column: 1 / -1; max-width: 38rem; }
  .play-styles__intro { gap: 1.5rem; }
  .play-styles__grid { gap: 1.5rem; }
}
@media (max-width: 639px) {
  .play-styles .play-styles__shell { width: calc(100% - 2.5rem); }
  .play-styles__intro, .play-styles__grid, .play-styles__feature { grid-template-columns: 1fr; }
  .play-styles__intro { gap: 1rem; margin-bottom: 2rem; }
  .play-styles__grid { gap: 3rem; }
  .play-styles__closing { flex-direction: column; align-items: start; gap: .5rem; }
  .play-styles__preview-grid { gap: 1.5rem 1rem; }
  .play-styles__preview-option h3 { font-size: 1.4rem; }
  .play-styles__preview-option .play-styles__media figcaption { font-size: .68rem; }
  .play-styles__feature { gap: 2rem; }
  .play-styles__games-intro, .play-styles__challenges, .play-styles__game-grid { grid-template-columns: 1fr; }
  .play-styles__game h4 { font-size: 1.8rem; }
  .play-styles__game-grid { gap: 2.25rem; }
  .play-styles__challenge-list { gap: 1.25rem; }
  .play-styles__video { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem; }
  .play-styles__video > a { grid-column: auto; }
}
@media (forced-colors: active) {
  .play-styles__media img, .play-styles__facts > div { border: 1px solid CanvasText; }
}