.product-hero__image img { height: auto; }
.urbanist-audience { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; margin: 44px 0; padding: clamp(32px, 4vw, 64px); border: 1px solid var(--border, #303030); border-radius: 24px; background: linear-gradient(110deg, #141414, #0b0b0b); scroll-margin-top: 100px; }
.urbanist-audience h2 { margin: 16px 0 32px; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.05; letter-spacing: -.045em; }
.urbanist-audience article { padding: 22px 0; border-top: 1px solid var(--border, #303030); }
.urbanist-audience h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.025em; }
.urbanist-audience article p { margin: 0; color: var(--muted, #aaa); font-size: 15px; line-height: 1.7; }
.urbanist-audience__visual { min-width: 0; margin: 0; }
.urbanist-audience__visual img { display: block; width: 100%; height: min(46vw, 640px); object-fit: contain; opacity: .92; }
.urbanist-audience__visual figcaption { margin-top: 18px; color: var(--muted, #aaa); font-size: 12px; line-height: 1.7; text-align: center; }
.urbanist-routing { width: 100%; border-collapse: collapse; table-layout: fixed; color: var(--muted, #aaa); font-size: 14px; line-height: 1.6; }
.urbanist-routing caption { margin-bottom: 20px; text-align: left; color: var(--text, #eee); font-size: 16px; font-weight: 600; }
.urbanist-routing th, .urbanist-routing td { padding: 20px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border, #303030); overflow-wrap: break-word; }
.urbanist-routing thead th { padding-top: 0; color: var(--text, #eee); font-weight: 600; }
.urbanist-routing th:first-child { width: 14%; padding-left: 0; color: var(--accent); font-family: var(--font-technical, monospace); font-weight: 400; }
.urbanist-routing tbody tr:last-child th, .urbanist-routing tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 820px) {
  .urbanist-audience { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }
  .urbanist-audience__visual img { height: clamp(360px, 88vw, 520px); }
}
@media (max-width: 480px) {
  .urbanist-routing { font-size: 13px; }
  .urbanist-routing th, .urbanist-routing td { padding: 16px 8px; }
  .urbanist-routing th:first-child { width: 16%; white-space: nowrap; }
}