/* Editorial product pages. Shared colors, type and controls come from styles.css. */
.product-page { padding-block-end: clamp(56px, 8vw, 100px); }
.page-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); align-items: center; gap: clamp(24px, 4vw, 60px); padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 80px); }
.page-intro-copy { min-width: 0; }
.page-intro .kicker { margin-block-end: 18px; }
.page-intro h1 { font-size: clamp(40px, 4.25vw, 64px); line-height: 1.04; }
.page-lede { margin-block-start: 22px; color: var(--ink-soft); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 24px; }
.page-actions .button { text-align: center; }
.page-figure { min-width: 0; }
.page-image-link { display: block; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); }
.page-image-link img { display: block; width: 100%; height: auto; }
.page-figure figcaption { margin-block-start: 12px; color: var(--ink-muted); font-size: 13px; line-height: 1.6; max-width: 80ch; }
.page-section { padding-block: clamp(32px, 5vw, 64px); border-block-start: 1px solid var(--line); scroll-margin-block-start: 90px; }
.page-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(24px, 6vw, 88px); }
.page-grid h2 { font-size: clamp(32px, 3.2vw, 46px); max-width: 16ch; }
.page-copy { min-width: 0; max-width: 75ch; color: var(--ink-soft); }
.page-copy > * + *, .page-setup > * + * { margin-block-start: 18px; }
.page-copy h3, .page-aside h3 { color: var(--ink); }
.page-copy h3:not(:first-child) { margin-block-start: 30px; }
.product-page a:not(.button):not(.page-image-link) { color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.page-copy a, .page-aside a, .page-next a { overflow-wrap: anywhere; }
.page-reference { display: grid; gap: 0; }
.page-reference > div { padding-block: 18px; border-block-end: 1px solid var(--line); }
.page-reference > div:first-child { padding-block-start: 0; }
.page-reference dt { color: var(--ink); font-weight: 600; margin-block-end: 6px; }
.page-steps { list-style: none; padding: 0; counter-reset: task-step; }
.page-steps > li { position: relative; padding-inline-start: 48px; padding-block-end: 28px; counter-increment: task-step; }
.page-steps > li::before { content: counter(task-step, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: 0; color: var(--accent); font: 500 13px/1.8 var(--font-mono); }
.page-steps > li:last-child { padding-block-end: 0; }
.page-steps h3 { margin-block-end: 8px; }
.page-steps p + p, .page-steps p + a { margin-block-start: 10px; }
.page-steps p + a { display: inline-block; }
.page-setup { padding-block-end: 24px; border-block-end: 1px solid var(--line); scroll-margin-block-start: 90px; }
.page-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block-start: 32px; }
.page-aside { margin-block-start: 32px; padding: clamp(22px, 3vw, 36px); border-inline-start: 3px solid var(--accent); background: var(--panel); color: var(--ink-soft); }
.page-aside p { max-width: 90ch; margin-block: 10px; }
.page-release { padding: 24px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-raised); }
.page-release p { margin-block-start: 10px; }
.page-release .dl-card-state { display: block; }
.page-next { display: flex; flex-wrap: wrap; gap: 12px 32px; border-block-start: 1px solid var(--line); padding-block-start: 28px; }
.page-next a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) {
  .page-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .page-intro h1 { font-size: clamp(34px, 4.6vw, 48px); }
  .page-evidence { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .page-intro, .page-grid { grid-template-columns: 1fr; }
  .page-intro { gap: 24px; padding-block-start: 28px; }
  .page-intro h1 { font-size: clamp(36px, 8.5vw, 52px); }
  .page-intro .kicker { margin-block-end: 12px; }
  .page-figure-brief img { aspect-ratio: 1 / 1; object-fit: cover; object-position: right bottom; }
  .page-lede { margin-block-start: 16px; }
  .page-actions { margin-block-start: 18px; }
  .page-grid { gap: 22px; }
  .page-grid h2 { max-width: 23ch; }
  .page-steps > li { padding-inline-start: 38px; }
}