/* Leakplate v2 — prose.css: guide, privacy and 404 pages. Tokens only, no hex. Linked after blocks.css. */

.wrap { max-width: calc(var(--content-max) + var(--page-margin) * 2); margin-inline: auto; padding-inline: var(--page-margin); }
.page { padding-block: var(--space-8) var(--space-9); }
.page h1, .privacy-page h1 { max-width: 22ch; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); }
.privacy-page, .page-404 { max-width: 46rem; padding-block: var(--space-8); }
.privacy-page h2 { margin-top: var(--space-7); font-size: 1.375rem; max-width: none; }
.privacy-page p, .privacy-page ul { margin-top: var(--space-3); max-width: var(--measure-body); }
.privacy-page ul { padding-left: var(--space-5); }

.crumbs ol { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-5); font-size: var(--step-caption); color: var(--graphite-500); }
.crumbs li + li::before { content: '/'; margin-right: var(--space-2); color: var(--graphite-400); }
.crumbs a { color: var(--graphite-500); }

.asof { margin-top: var(--space-4); font-family: var(--font-data); font-size: var(--step-cite); letter-spacing: var(--tr-cite); text-transform: uppercase; color: var(--graphite-500); }
.intro { margin-top: var(--space-4); max-width: var(--measure-lead); font-size: var(--step-lead); line-height: var(--lh-lead); }

.gs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6); padding-block: var(--space-6); border-top: var(--bw-hairline) solid var(--frost-200); margin-top: var(--space-6); }
.gs > h2 { font-size: var(--step-h3); line-height: var(--lh-h3); letter-spacing: 0; max-width: 18ch; }
.gs-body > * + * { margin-top: var(--space-4); }
.gs-body { max-width: var(--measure-body); }
.gs--wide .gs-body { max-width: none; }

.quote { margin: 0; padding: var(--space-4) var(--space-5); background: var(--frost-100); border: var(--bw-hairline) solid var(--frost-200); border-left: var(--bw-plate) solid var(--ice-400); border-radius: var(--r-none); }
.quote p + p { margin-top: var(--space-3); }
.src, .srcline { font-family: var(--font-data); font-size: var(--step-cite); letter-spacing: var(--tr-cite); color: var(--graphite-500); }
.cfr, .mono { font-family: var(--font-data); font-size: var(--step-data); }
.label-box { display: inline-block; padding: var(--space-2) var(--space-3); border: var(--bw-hairline) dashed var(--graphite-400); font-size: var(--step-caption); color: var(--graphite-500); }
.blank { display: inline-block; min-width: 4ch; border-bottom: var(--bw-plate) solid var(--graphite-400); }

table { width: 100%; border-collapse: collapse; font-size: var(--step-caption); background: var(--frost-050); }
caption { text-align: left; padding-bottom: var(--space-2); color: var(--graphite-500); font-size: var(--step-caption); }
th, td { text-align: left; vertical-align: top; padding: var(--space-3); border: var(--bw-hairline) solid var(--frost-200); }
thead th { background: var(--frost-100); color: var(--graphite-900); font-weight: 600; }
td { font-family: var(--font-data); font-size: var(--step-data); }

.faq details { border-top: var(--bw-hairline) solid var(--frost-200); padding-block: var(--space-3); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--graphite-900); }
.faq .a { margin-top: var(--space-2); }

.plate { position: relative; background: var(--frost-100); border: var(--bw-plate) solid var(--frost-200); box-shadow: var(--shadow-plate); padding: var(--space-6); }
.endcta { margin-top: var(--space-8); display: grid; gap: var(--space-3); justify-items: start; }
.lp-demo__screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--frost-300); }
.lp-demo__screw--tl { left: 8px; top: 8px; } .lp-demo__screw--tr { right: 8px; top: 8px; }
.lp-demo__screw--bl { left: 8px; bottom: 8px; } .lp-demo__screw--br { right: 8px; bottom: 8px; }
.page-404 { margin-block: var(--space-8); }
.page-404 ul { padding-left: var(--space-5); margin-top: var(--space-3); }

@media (max-width: 767px) {
  .gs { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; left: -9999px; }
  td[data-label]::before { content: attr(data-label) ': '; color: var(--graphite-500); }
  tr { margin-bottom: var(--space-3); border: var(--bw-hairline) solid var(--frost-200); }
  th, td { border: 0; }
}