/* A product page: its name and one sentence, the main capture, three features
   beside their captures, then the smaller points. Display for headings, tone
   for the rest; space separates, no rules. */
.product-page { padding-block: 1.5rem 0; }
.product-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; padding-block: 2rem 2.5rem; }
.product-title { display: flex; align-items: center; gap: 1rem; }
.product-title img { flex-shrink: 0; }
.product-title h1 { margin: 0; font-family: var(--font-display); font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-leading); }
.product-lead { margin: 1.25rem 0 0; max-width: 44ch; font-size: var(--type-title-size); line-height: var(--type-body-leading); }
.product-fact { margin: 0.6rem 0 0; color: var(--faint); font-size: var(--type-small-size); line-height: var(--type-small-leading); }
.product-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0; }
.product-links .ui-button { text-decoration: none; }

/* Features alternate sides, so the eye zigzags down the page. */
.feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem 3.5rem; align-items: center; padding-top: 5.5rem; }
.feature:nth-of-type(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.feature:nth-of-type(even) .feature-text { order: 2; }
.feature h2 { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: var(--type-headline-size); font-weight: var(--type-headline-weight); line-height: var(--type-headline-leading); }
.feature p { margin: 0; color: var(--muted); max-width: 40ch; }

.product-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem 2rem; margin: 5.5rem 0 0; padding: 0; list-style: none; color: var(--muted); }
.product-points strong { color: var(--fg); font-weight: var(--type-label-weight); }

@media (max-width: 800px) {
  .product-hero { padding-block: 1rem 2rem; }
  .feature, .feature:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-top: 3.5rem; }
  .feature:nth-of-type(even) .feature-text { order: 0; }
  .product-points { margin-top: 3.5rem; }
}