/* Pawprints uses the public site's Fetch layout, shared cards and artwork.
   These styles are scoped to its homepage panel and feature page. */
.pawprints-wordmark { display: block; width: min(260px, 100%); aspect-ratio: 3 / 1; margin: 0 auto 18px; background: var(--teal-text); mask: url('/assets/pawprints/wordmark.webp') center / contain no-repeat; }
.pawprints-hero-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr); gap: 42px; align-items: center; }
.pawprints-hero-layout > div { min-width: 0; }
.pawprints-hero-art { display: grid; justify-items: center; position: relative; isolation: isolate; }
.pawprints-hero-art::before { content: ''; position: absolute; z-index: -1; width: 100%; aspect-ratio: 1; top: 50%; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--amber) 16%, transparent), transparent 70%); }
.pawprints-hero-art > img { width: 100%; max-width: 440px; height: auto; }
.pawprints-hero-art > p { margin: 20px 0 0; color: var(--teal-text); font-weight: 800; text-align: center; font-size: .9rem; }
.pawprints-home { text-align: center; }
.pawprints-home > .pawprints-wordmark { margin: 0 auto 14px; width: min(280px, 80%); }
.pawprints-home > .lede { max-width: 64ch; margin-inline: auto; }
.pawprints-home-panel { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; max-width: 960px; margin: 32px auto 0; padding: 32px 38px; border: 1.5px solid color-mix(in srgb, var(--teal) 24%, var(--line)); border-radius: 30px; background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 8%, var(--card)), color-mix(in srgb, var(--amber) 7%, var(--card))); box-shadow: var(--shadow); }
.pawprints-home-art { width: 100%; max-width: 350px; height: auto; margin-inline: auto; }
.pawprints-home-points { display: grid; gap: 22px; text-align: left; }
.pawprints-home-point { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; }
.pawprints-home-point > img { width: 64px; height: 64px; object-fit: contain; }
.pawprints-home-point h3 { font-family: 'Fredoka', sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.2; margin: 0 0 5px; }
.pawprints-home-point p { color: var(--sub); font-size: .96rem; line-height: 1.5; margin: 0; }
.pawprints-home .hero-ctas { justify-content: center; margin-top: 30px; }
.pawprints-home-note { color: var(--sub); font-size: .86rem; line-height: 1.5; margin: 18px auto 0; max-width: 62ch; }
.pawprints-family { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(180px, .6fr); gap: 34px; align-items: center; }
.pawprints-family p:not(.kicker) { color: var(--sub); line-height: 1.65; max-width: 68ch; margin: 20px 0; }
.pawprints-family > img { width: 100%; height: auto; max-width: 300px; justify-self: center; }
.pawprints-moments { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr); gap: 52px; align-items: center; }
.pawprints-moments-art > img { width: 100%; height: auto; max-width: 400px; margin-inline: auto; }
@media (max-width: 900px) {
  .pawprints-hero-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; }
  .pawprints-home-panel { gap: 24px; padding: 28px; }
  .pawprints-moments { gap: 30px; }
}
@media (max-width: 680px) {
  .pawprints-hero-layout, .pawprints-home-panel, .pawprints-family, .pawprints-moments { grid-template-columns: minmax(0, 1fr); }
  .pawprints-hero-layout { gap: 30px; }
  .pawprints-hero-art > img { max-width: 310px; }
  .pawprints-hero-art > p { margin-top: 12px; }
  .pawprints-wordmark { width: 220px; }
  .pawprints-home-panel { padding: 24px 20px; gap: 28px; border-radius: 24px; }
  .pawprints-home-art { max-width: 250px; }
  .pawprints-home-points { gap: 24px; }
  .pawprints-home-point { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; }
  .pawprints-home-point > img { width: 52px; height: 52px; }
  .pawprints-home .hero-ctas { gap: 12px; }
  .pawprints-home .hero-ctas .btn { width: 100%; max-width: 340px; }
  .pawprints-family { gap: 24px; }
  .pawprints-family > img { max-width: 210px; }
  .pawprints-moments { gap: 28px; }
  .pawprints-moments-art > img { max-width: 280px; }
}