/* Long-form prose: legal terms, policies and press releases. One readable column, the site's own rhythm. */
.page-hero-prose { padding-bottom: 0; }
.page-hero-prose .container { max-width: 820px; }
.page-hero-prose h1 { font-size: clamp(32px, 4.2vw, 52px); }

.section-prose { padding-top: 64px; }
.prose { max-width: 820px; margin: 0 auto; font-size: 16px; line-height: 1.75; color: var(--fg-2); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 48px 0 16px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.prose h3 { margin: 36px 0 12px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); }
.prose h4 { margin: 28px 0 10px; font-size: 17px; font-weight: 600; color: var(--fg); }
.prose p { margin: 0 0 18px; }
.prose strong, .prose b { color: var(--fg); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--fg-0); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); }
.prose blockquote { margin: 26px 0; padding: 2px 0 2px 22px; border-left: 2px solid var(--accent); color: var(--fg); font-style: italic; }
/* The legal pages carry wide tables — sub-processors, the cookie list. Their natural width runs to
   773px, which pushed the whole page sideways at 390px. Scroll inside the table's own box instead;
   `display: block` makes it the scroll container while the rows still lay out as a table. */
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 24px 0; border-collapse: collapse; font-size: 15px; }
.prose table > * { min-width: max-content; }
.prose th, .prose td { padding: 11px 14px; border: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.prose th { color: var(--fg); font-weight: 600; background: rgb(var(--ink) / .03); }

@media (max-width: 560px) {
  .section-prose { padding-top: 44px; }
  .prose { font-size: 15.5px; }
  .prose h2 { font-size: 23px; margin-top: 38px; }
}

/* Video case studies: the story is the embed */
.case-video { margin: 0 0 32px; }
.case-video .frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #000; }
.case-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case-video figcaption { margin-top: 12px; font-size: 14px; color: var(--fg-3); }

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] .prose li::marker,
:root[data-theme="light"] .prose a:hover { color: var(--mint); }