/* Scoped product and documentation styles. */
.product-page { font-family: "Segoe UI", system-ui, sans-serif; }
.product-content { max-width: 860px; padding: clamp(40px, 7vw, 88px) 24px; margin: 0 auto; }
.product-content h1 { font-size: clamp(36px, 7vw, 64px); letter-spacing: -.04em; line-height: 1.08; margin: 0 0 24px; overflow-wrap: anywhere; }
.product-lede { font-size: clamp(19px, 3vw, 24px); line-height: 1.5; color: var(--cream-soft); max-width: 38ch; }
.product-content section { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.product-content h2 { font-size: clamp(22px, 4vw, 28px); line-height: 1.25; margin: 0 0 16px; }
.product-content section p, .product-content li { color: var(--cream-soft); }
.product-content li { margin-bottom: 12px; padding-left: 5px; }
.product-content ol { padding-left: 24px; }
.product-content section a, .text-link { text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.product-content a:hover { color: white; }
.product-content .cta:hover { color: var(--brand-deep); }
.release-note { color: var(--cream-mute); font-size: 15px; }
.app-icon { border-radius: 25px; margin-bottom: 24px; }
.product-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.product-actions .cta { margin: 0; }
.skip-link { position: absolute; top: -100px; left: 20px; padding: 12px; background: var(--brand-deep); z-index: 10; }
.skip-link:focus { top: 10px; }
@media (max-width: 600px) { .product-page .masthead { flex-direction: column; align-items: flex-start; } .product-page .nav { flex-wrap: wrap; gap: 20px; } .product-content { padding-inline: 20px; } }