/* Product pages share Eagle Reach's typography and Purrpose's warm palette. */
.purrpose-page {
  --product-card: #f8ecd7;
  --product-line: rgba(92, 62, 33, 0.2);
}

.product-hero,
.product-section,
.product-download {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: calc(var(--header-height) + 3rem) 4rem;
}

.product-hero__copy { max-width: 40rem; }
.product-hero__back { margin-bottom: 2rem; }
.product-identity { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.product-identity img { width: 3.5rem; height: 3.5rem; border-radius: 0.875rem; }
.product-identity p { margin: 0; font-size: 1.1rem; font-weight: 600; }
.product-identity span { display: block; color: var(--app-muted); font-size: 0.875rem; font-weight: 400; }
.product-hero h1 { margin: 0; font: 400 clamp(3rem, 6vw, 6.5rem)/1.02 var(--serif); letter-spacing: -0.045em; }
.product-hero__description { max-width: 34rem; margin-block: 1.75rem; color: var(--app-muted); font-size: 1.125rem; line-height: 1.75; }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.product-actions .button { gap: 0.65rem; text-align: center; }
.product-hero .section-label { margin-bottom: 1.5rem; }
.product-meta { margin-top: 1.25rem; color: var(--app-muted); font-size: 0.875rem; line-height: 1.8; }
.product-hero__art { width: min(100%, 22rem); margin: 0; justify-self: center; }
.product-hero__art img { display: block; width: 100%; height: auto; border-radius: 1rem; }

.product-section { padding-block: 4.5rem; scroll-margin-top: 6rem; }
.product-section__intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.product-section h2,
.product-download h2 { margin: 0; font: 400 clamp(2.25rem, 4vw, 4rem)/1.08 var(--serif); letter-spacing: -0.035em; }
.product-section__intro p,
.product-section__description { max-width: 34rem; color: var(--app-muted); line-height: 1.75; }
.product-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.product-gallery figure { margin: 0; }
.product-gallery img { display: block; width: 100%; height: auto; border-radius: 1rem; }
.product-gallery figcaption { padding-top: 1.5rem; }
.product-gallery h3,
.product-tools h3,
.product-plans h3 { margin: 0 0 0.75rem; font: 400 1.75rem/1.15 var(--serif); }
.product-gallery p,
.product-tools p,
.product-plans p { margin-block: 0.75rem 0; color: var(--app-muted); line-height: 1.75; }
.product-gallery .section-label { margin-block: 0 0.75rem; }

.product-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; border-block: 1px solid var(--product-line); }
.product-watch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); align-items: center; gap: 2rem; }
.product-watch img { display: block; width: 100%; height: auto; border: 0.5rem solid var(--app-text); border-radius: 2.5rem; }
.product-tools__list { display: grid; gap: 2rem; }

.product-plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.7fr); gap: 3rem; align-items: center; }
.product-plans h2 { margin-bottom: 2rem; }
.product-plan { align-self: start; }
.product-plan ul { margin: 1.25rem 0; padding-left: 1.25rem; color: var(--app-muted); line-height: 1.75; }
.product-plan li + li { margin-top: 0.75rem; }
.product-plans__art { margin: 0; }
.product-plans__art img { display: block; width: 100%; height: auto; border-radius: 1rem; }
.product-plans__art figcaption { margin-top: 1rem; color: var(--app-muted); font-size: 0.875rem; }

.product-faq { border-top: 1px solid var(--product-line); }
.product-faq details { scroll-margin-top: 6rem; border-bottom: 1px solid var(--product-line); padding-block: 1.5rem; }
.product-faq summary { cursor: pointer; font-weight: 600; }
.product-faq details p { max-width: 46rem; color: var(--app-muted); line-height: 1.75; }
.product-download { padding-block: 4rem; background: var(--product-card); }
.product-download > p { max-width: 36rem; margin-block: 1.5rem 2rem; color: var(--app-muted); line-height: 1.75; }
.product-support { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--product-line); font-size: 0.875rem; }
.product-support a { text-decoration: underline; text-underline-offset: 0.2em; }
.directory-card__actions { margin-top: 1.75rem; }

@media (max-width: 1024px) {
  .product-watch { grid-template-columns: 1fr; }
  .product-watch img { max-width: 11rem; }
  .product-plans { gap: 2rem; }
}

@media (max-width: 900px) {
  /* The shared menu uses opacity; hidden links must also leave the tab order. */
  .purrpose-page .primary-nav:not(.is-open) { visibility: hidden; }
}

@media (max-width: 768px) {
  .product-hero { grid-template-columns: 1fr; padding-top: calc(var(--header-height) + 2rem); }
  .product-hero__art { width: min(100%, 20rem); }
  .product-hero__copy { max-width: 100%; }
  .product-hero h1 { font-size: clamp(3rem, 9vw, 5rem); }
  .product-section__intro,
  .product-tools { grid-template-columns: 1fr; }
  .product-gallery { grid-template-columns: 1fr; gap: 3rem; }
  .product-gallery figure { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
  .product-gallery figcaption { padding: 0; }
  .product-watch { grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); }
  .product-plans { grid-template-columns: 1fr 1fr; }
  .product-plans__art { grid-column: 1 / -1; max-width: 18rem; justify-self: center; }
  .product-section { padding-block: 3rem; }
}

@media (max-width: 480px) {
  .product-hero h1 br { display: none; }
  .product-actions { align-items: flex-start; flex-direction: column; }
  .product-gallery figure,
  .product-watch,
  .product-plans { grid-template-columns: 1fr; }
  .product-gallery figure { gap: 1.5rem; }
  .product-gallery img { width: min(100%, 20rem); margin-inline: auto; }
  .product-watch img { justify-self: center; }
  .product-plans__art { grid-column: auto; }
}