/* Shared public-site finish for the Modern Animated Film artwork.
   Keep the established grid, typography, image dimensions and responsive order. */
.modern-3d {
  --art-shadow: 0 8px 16px #214b3d0a, 0 24px 48px #214b3d17;
}
.modern-3d .hero-media {
  background: #e3f6e9;
}
.modern-3d .memory-section {
  background: radial-gradient(ellipse at 15% 45%, #fff0cc66, transparent 58%), #fffefb;
}
.modern-3d .memory-art img,
.modern-3d .card-img,
.modern-3d .moment-img,
.modern-3d .screen-time-shot,
.modern-3d .final-art img {
  border-radius: 20px;
  box-shadow: var(--art-shadow);
}
.modern-3d .memory-art::before,
.modern-3d .style-gallery::before,
.modern-3d .hardcover-section .media::before,
.modern-3d .final-art::before {
  border-radius: 22px;
}
.modern-3d .memory-art::after,
.modern-3d .style-gallery::after,
.modern-3d .hardcover-section .media::after,
.modern-3d .final-art::after {
  border-radius: 18px;
  box-shadow: inset 0 2px 3px #ffffffa6, 0 5px 0 #203d3614, 0 12px 24px #203d361c;
}
.modern-3d .hero .cta-pill,
.modern-3d .story-cta-band .btn {
  background: linear-gradient(180deg, #218267, #176d54);
  box-shadow: inset 0 2px 0 #ffffff26, 0 5px 0 #094b3d, 0 14px 26px #176d5426;
}
.modern-3d .hero .cta-pill:hover,
.modern-3d .story-cta-band .btn:hover {
  background: linear-gradient(180deg, #19795e, #10583f);
}
.modern-3d .hero .cta-pill:active,
.modern-3d .story-cta-band .btn:active {
  box-shadow: inset 0 2px 4px #094b3d24, 0 2px 0 #094b3d;
}
.modern-3d .book-count {
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px #176d5412;
}
/* Same scenes and page hierarchy, with a softer, dimensional finish. */
.modern-3d .pricing-intro,
.modern-3d .pricing-finale {
  background-image: url('/assets/images/home-modern-3d/story-cta.webp');
}
.modern-3d .price-plan,
.modern-3d .pricing-extras,
.modern-3d .signin-panel {
  border-radius: 22px;
  box-shadow: inset 0 2px 0 #fff, 0 6px 0 #b6d2c24d, var(--art-shadow);
}
.modern-3d .signin-panel::before { left: 20px; right: 20px; }
.modern-3d .plan-art { filter: drop-shadow(0 12px 9px #264b3324); }
.modern-3d .included-grid article > img,
.modern-3d .included-coloring,
.modern-3d .story-reading {
  border-radius: 20px;
  box-shadow: var(--art-shadow);
}
.modern-3d .legal-hero {
  background: linear-gradient(90deg, #eef9f2ad, #f4fbf4f0 30% 70%, #eef9f2ad),
    url('/assets/images/home-modern-3d/story-cta.webp') center 55% / cover;
  border-bottom: 1px solid #c6dfce;
}
.modern-3d.public-legal .legal-hero { padding-bottom: 32px; }
.modern-3d .legal {
  background: #fffefb;
  box-shadow: 0 6px 0 #d9e9dd80, var(--art-shadow);
  overflow-wrap: anywhere;
}
.modern-3d.public-legal .legal { border-radius: 24px; }
.modern-3d.public-legal .legal-sec { padding-inline: 20px; }
@media (max-width: 560px) {
  .modern-3d .moment-img {
    border-radius: 14px;
    box-shadow: 0 8px 18px #214b3d17;
  }
  .modern-3d .price-plan,
  .modern-3d .signin-panel,
  .modern-3d.public-legal .legal { border-radius: 18px; }
  .modern-3d .legal-hero {
    background-image: linear-gradient(#f4fbf4e8, #f4fbf4df),
      url('/assets/images/home-modern-3d/story-cta.webp');
  }
}