/* Ratably — the prose pages (terms, privacy, refunds, help, about …).
   Same Redline tokens as the landing page; this only adds what long-form
   reading needs. */
.page { max-width: 46rem; margin-inline: auto; padding-block: clamp(28px, 5vw, 56px) clamp(56px, 8vw, 96px) }
.page .eyebrow { margin-bottom: 12px }
.page h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.04; margin-bottom: 12px }
.page .updated { font: 400 .86rem/1.5 var(--mono); color: var(--ink2); margin-bottom: 8px }
.page .lede { font-size: 1.12rem; color: var(--ink2); margin-bottom: 36px }
.page h2 { font-size: 1.4rem; margin-top: 40px; margin-bottom: 10px }
.page h3 { font-size: 1.05rem; margin-top: 26px; margin-bottom: 6px }
.page p, .page li { color: var(--ink2) }
.page p { margin-bottom: 14px }
.page ul, .page ol { margin: 0 0 16px; padding-left: 1.3em; display: grid; gap: 6px }
.page strong { color: var(--ink) }
.page a { color: var(--green) }
.page table { width: 100%; border-collapse: collapse; font-size: .95rem; margin-bottom: 18px }
.page th, .page td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink2) }
.page thead th { font: 500 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3, var(--ink2)) }
.page .callout { border-left: 3px solid var(--green); background: var(--green-soft); padding: 14px 16px; margin-bottom: 20px }
.page .callout p:last-child { margin-bottom: 0 }
.page .callout.warn { border-left-color: var(--red); background: rgba(198, 54, 44, .07) }
.page .toc { list-style: none; padding: 0; margin-bottom: 32px }
.page .toc a { text-decoration: none }
.page dl { margin: 0 0 18px }
.page dt { font-weight: 600; color: var(--ink); margin-top: 16px }
.page dd { margin: 4px 0 0; color: var(--ink2) }

/* phone width: a four-column table does not fit, so each row becomes a stacked block with its column names */
@media (max-width: 640px) {
  .page table.stack tbody, .page table.stack tr, .page table.stack td { display: block }
  .page table.stack thead { display: none }
  .page table.stack tr { padding: 12px 0; border-bottom: 1px solid var(--rule) }
  .page table.stack td { border: 0; padding: 4px 0 }
  .page table.stack td::before { display: block; font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3, var(--ink2)) }
  .page table.stack td:first-child::before { content: none }
  .page table.stack.subprocessors td:nth-child(2)::before { content: "What it does" }
  .page table.stack.subprocessors td:nth-child(3)::before { content: "What it sees" }
  .page table.stack.subprocessors td:nth-child(4)::before { content: "Where" }
}