/* =====================================================================
   CRAFT & EFFECT — PROSE PAGES  (/privacy/)
   A plain document: one column, one measure, no stage and no script.
   Loads on top of tokens.css and shell.css.

   Everything here is type and rhythm. The only component is the retention
   table, and even that is a definition list rather than a <table>, because
   it is a list of pairs and reads better than one aloud.
   ===================================================================== */

.doc { padding-block: clamp(2.5rem, 7svh, 4rem) clamp(3rem, 9svh, 5rem); }

/* 34rem is roughly 68 characters at this size, which is where a long read
   stops being work. The shell is 62rem, so the column sits left of centre
   and lines up with the top bar's wordmark rather than floating. */
.doc__head { max-width: 38rem; display: grid; gap: 0.9rem; }
.doc__title { font-size: clamp(2rem, 5.5vw, 3rem); line-height: 1.04; }
.doc__lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--text-secondary);
             max-width: 34rem; }
.doc__stamp { font: 400 0.8125rem/1.5 var(--font-mono); color: var(--text-secondary); }

/* --- The short version ----------------------------------------------- */
.gist {
  margin-top: clamp(2rem, 5svh, 2.75rem);
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
  background: var(--surface-card);
  border: 1px solid var(--rule-card);
  border-radius: 5px;
  max-width: 38rem;
  display: grid; gap: 0.85rem;
}
.gist h2 { font-size: 1.0625rem; }
.gist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.gist li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.6rem;
           font-size: 0.9375rem; line-height: 1.55; }
/* The same dot the results screen marks its steps with. A short rule was the
   first try and it read as a column of em dashes, which is the one thing
   this page's voice cannot afford. */
.gist li::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; margin-top: 0.58em;
  background: var(--accent); justify-self: center;
}

/* --- Sections -------------------------------------------------------- */
.sect { margin-top: clamp(2.25rem, 6svh, 3.25rem); max-width: 38rem;
        display: grid; gap: 0.85rem; }
.sect h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1.2;
  padding-top: 1.35rem; border-top: 1px solid var(--rule-card);
}
.sect p { line-height: 1.65; max-width: 34rem; }

.sect ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.5rem;
           max-width: 34rem; line-height: 1.6; }
.sect ul li::marker { color: var(--accent); }
.sect ul b { font-weight: 600; }

/* The third parties, and the retention list. Label above value on a phone,
   side by side as soon as there is room for a 9rem label. */
.pairs { margin: 0.35rem 0 0; display: grid; gap: 0.9rem; max-width: 36rem; }
.pairs > div { display: grid; gap: 0.2rem; padding-bottom: 0.9rem;
               border-bottom: 1px solid var(--rule-card); }
.pairs > div:last-child { border-bottom: 0; padding-bottom: 0; }
.pairs dt { font: 600 0.9375rem/1.4 var(--font-display); letter-spacing: -0.01em; }
.pairs dd { margin: 0; font-size: 0.9375rem; line-height: 1.6;
            color: var(--text-secondary); }
@media (min-width: 46rem) {
  .pairs > div { grid-template-columns: 9.5rem 1fr; gap: 1.25rem; align-items: baseline; }
}

.fine { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary);
        max-width: 34rem; }
.mono { font-family: var(--font-mono); font-size: 0.9em; word-break: break-word; }

.doc__cta { margin-top: clamp(2.25rem, 6svh, 3rem); padding-top: 1.5rem;
            border-top: 1px solid var(--rule-card); display: grid; gap: 0.9rem;
            justify-items: start; max-width: 38rem; }

/* --- Print -----------------------------------------------------------
   Somebody's compliance folder is a real destination for this page, so it
   has to survive the printer: no reveals mid-fade, no page break between a
   heading and the paragraph it introduces, and link targets spelled out
   where paper cannot carry them.
   -------------------------------------------------------------------- */
@media print {
  .topbar, .doc__cta { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .doc { padding-block: 0; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .sect, .gist { break-inside: avoid; page-break-inside: avoid; max-width: none; }
  .sect h2 { break-after: avoid; page-break-after: avoid; }
  .gist { border: 1px solid #999; background: #fff; }
  .pairs > div { break-inside: avoid; page-break-inside: avoid; }
  a { text-decoration: underline; }
  .sect a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}