/* Give copy and artwork separate layout tracks, including small screens. */
.pl-hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
}
.pl-hero-copy { padding: 30px 12px 30px 26px; max-width: none; min-width: 0; }
.pl-hero h1 { font-size: clamp(30px, 3vw, 46px); }
.pl-hero-art { position: relative; inset: auto; align-self: stretch; min-height: 320px; overflow: hidden; }
.pl-hero-art img { width: 100%; height: calc(100% - 100px); right: 0; bottom: 0; object-fit: contain; }
.pl-hero-art::before { width: 90%; height: 55%; left: 5%; bottom: -15%; }
.pl-handwriting { top: 20px; right: 18px; bottom: auto; font-size: 15px; }
.pl-doodle-one { top: 26px; left: 10px; right: auto; bottom: auto; }
.pl-doodle-two { right: 12px; bottom: 14px; font-size: 28px; }
.pl-hero-buttons { max-width: none; }
.pl-hero-note { max-width: none; }
.pl-bed, .pl-food, .pl-toy { display: flex; flex-direction: column; }
.pl-bed > div, .pl-food > div, .pl-toy > div { width: 100%; padding: 18px 18px 8px; }
.pl-bed img, .pl-food img, .pl-toy img {
  position: static; width: 100%; max-width: 100%; height: 120px;
  object-fit: contain; object-position: center; margin-top: auto; flex-shrink: 0;
}
.pl-bed img { height: 225px; }
.pl-food h2, .pl-toy h2 { font-size: 16px; }
.pl-promo-stack { grid-template-rows: 1fr 1fr; }
.pl-discover {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px; padding: 24px; align-items: center;
}
.pl-discover > div { padding: 0; max-width: none; min-width: 0; }
.pl-discover h2 { font-size: clamp(18px, 1.7vw, 24px); }
.pl-discover img {
  position: static; width: 100%; max-width: 100%; height: 200px;
  object-fit: contain; transform: none;
}
.pl-banner-spark { right: 14px; top: 8px; font-size: 30px; }
@media (max-width: 1200px) {
  .pl-food, .pl-toy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .pl-food > div, .pl-toy > div { padding: 20px; }
  .pl-food img, .pl-toy img { height: 150px; margin: 0; }
  .pl-promo-stack { grid-template-rows: auto; }
}
@media (max-width: 900px) {
  .pl-hero { grid-template-columns: 1fr; min-height: 0; }
  .pl-hero-copy { padding: 24px; }
  .pl-hero h1 { font-size: 38px; }
  .pl-hero-buttons .pl-button { width: auto; }
  .pl-hero-art { min-height: 220px; }
  .pl-hero-art img { width: 78%; height: 100%; right: auto; left: 0; }
  .pl-hero-art::before { right: auto; left: 0; width: 78%; }
  .pl-handwriting { right: 15px; top: 15px; font-size: 15px; }
  .pl-doodle-one { left: 12px; top: 12px; font-size: 23px; }
  .pl-bed img { height: 240px; }
  .pl-discover { gap: 8px; padding: 20px 16px; }
  .pl-discover img { height: 160px; }
  .pl-discover h2 { font-size: 18px; }
  .pl-discover .pl-button { white-space: normal; }
}
@media (max-width: 600px) {
  .pl-promo-stack { grid-template-rows: 145px; }
  .pl-hero-copy { padding: 23px 21px 10px; }
  .pl-hero h1 { font-size: clamp(32px, 9vw, 39px); }
  .pl-intro { max-width: none; }
  .pl-hero-buttons { gap: 9px; margin-top: 17px; }
  .pl-hero-buttons .pl-button { width: auto; padding: 10px 13px; }
  .pl-hero-note { margin-top: 14px; }
  .pl-hero-art { min-height: 230px; }
  .pl-bed { display: none; }
  .pl-food, .pl-toy { display: grid; grid-template-columns: 46% 54%; align-items: center; }
  .pl-food > div, .pl-toy > div { grid-column: 1; grid-row: 1; width: auto; max-height: 125px; min-height: 0; overflow: hidden; padding: 12px 8px 12px 12px; z-index: 2; }
  .pl-food h2, .pl-toy h2 { font-size: 13px; line-height: 1.45; }
  .pl-food p, .pl-toy p { font-size: 8px; }
  .pl-food img, .pl-toy img { grid-column: 2; grid-row: 1; width: 100%; height: 100%; margin: 0; object-fit: contain; }
  .pl-discover { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 0; }
  .pl-discover h2 { font-size: clamp(16px, 4.6vw, 20px); }
  .pl-discover img { height: 150px; }
  .pl-discover .pl-button { padding: 9px 10px; }
}

/* Desktop keeps the original compact composition; the separated tracks above
   are only needed at tablet and phone widths. */
@media (min-width: 901px) {
  .pl-hero { grid-template-columns: 1.08fr 1fr; min-height: 370px; display: grid; gap: 0; }
  .pl-hero-copy { padding: 35px 0 31px 28px; }
  .pl-hero h1 { font-size: clamp(32px, 3.4vw, 53px); }
  .pl-hero-art { min-height: 370px; align-self: stretch; overflow: visible; }
  .pl-hero-art img { position: absolute; width: 130%; max-width: none; height: 100%; right: -12px; bottom: -10px; object-fit: contain; }
  .pl-hero-art::before { width: 270px; height: 270px; left: -5px; bottom: -70px; }
  .pl-handwriting { position: absolute; right: 17px; top: 27px; font-size: 17px; }
  .pl-doodle-one { left: 0; top: 48px; font-size: 33px; }
  .pl-doodle-two { right: 18px; bottom: 30px; font-size: 43px; }
  .pl-bed { display: block; }
  .pl-food, .pl-toy { display: grid; grid-template-columns: 46% 54%; align-items: center; }
  .pl-food > div, .pl-toy > div { grid-column: 1; grid-row: 1; width: auto; padding: 20px 12px 20px 20px; z-index: 2; }
  .pl-food h2, .pl-toy h2 { font-size: 16px; line-height: 1.55; }
  .pl-food p, .pl-toy p { font-size: 10px; }
  .pl-bed > div, .pl-food > div, .pl-toy > div { width: auto; padding: 26px 23px; }
  .pl-bed img { position: absolute; max-width: none; margin: 0; object-fit: contain; }
  .pl-food img, .pl-toy img { grid-column: 2; grid-row: 1; position: static; width: 100%; max-width: 100%; height: 100%; margin: 0; object-fit: contain; }
  .pl-bed img { width: 135%; height: 79%; bottom: -37px; right: -40px; }
  .pl-discover { display: flex; grid-template-columns: none; padding: 0; gap: 0; }
  .pl-discover > div { padding: 28px 34px; max-width: 65%; }
  .pl-discover h2 { font-size: 25px; }
  .pl-discover img { position: absolute; max-width: none; height: 280px; width: 43%; object-fit: contain; }
  .pl-play-banner img { right: 0; bottom: -40px; transform: rotate(-13deg); }
  .pl-cozy-banner img { right: -40px; bottom: -55px; width: 65%; height: 270px; transform: none; }
}