/* ==========================================================================
   THE DOCUMENT — /privacy/ and /terms/. A full-width masthead over one narrow
   measure column of numbered clauses. Editorial document: a rhythm no other
   page on the site uses, which is what stops these reading as a stripped-down
   marketing page.

   Three of the seven uniqueness moves apply and four deliberately do not.
   Applied: the mono spec line under the heading (move 4), the tick rule as
   the only divider on the page (move 6, and the principal device here), and
   the bracketed coordinate, which from --bp-xl hangs in the LEFT MARGIN
   outside the measure column — a document that annotates itself in the margin
   is what a marked-up document actually looks like (move 7). Not applied: the
   chamfer runs once, on .doc__meta only, because a legal clause is not a card;
   no specimen treatment, because there are no photographs; no stat band,
   because there is no figure to plot. 0 images.
   ========================================================================== */

.doc {
  background: var(--surface-page);
  /* no hero to sit under, so the block clears the fixed header itself */
  padding-block-start: calc(var(--header-h) + var(--space-xl));
  /* the coordinate hangs outside the measure column; nothing may scroll */
  overflow: hidden;
}

/* the masthead is the page's one wide object: it sits in .wrap--wide while the
   clause body sits in .wrap--prose, so the heading opens several hundred pixels
   before its own document. It sets at display scale because .sec-title is
   --text-h2, which would put the h1:body ratio at 3.5:1 and fail the
   type-contrast law — the same reasoning quote.css records for /book/. */
.doc__masthead { margin-block-end: var(--space-stack); }
.doc__masthead .sec-head { max-width: none; }
.doc__masthead .sec-title {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.doc__body { display: grid; gap: var(--space-xl); }

/* every clause opens on a tick rule. There is no .rule element on either page:
   this is uniqueness move 6 applied literally rather than decoratively. */
.doc__section {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  padding-block-start: var(--space-md);
  background: var(--tick-rule);
  background-position: top;
}

.doc__head {
  font-size: var(--text-h3);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  color: var(--text-primary);
}
.doc__p { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--text-secondary); }

.doc__list { display: grid; gap: var(--space-2xs); }
.doc__item {
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-width-bar) solid var(--border-strong);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}
.doc__item b { color: var(--text-secondary); font-weight: var(--weight-semibold); }

/* same construction as .refusal__why a */
.doc__p a, .doc__item a, .doc__meta-val a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border-accent);
  text-underline-offset: var(--space-3xs);
  transition: color var(--dur-fast) var(--ease-state);
}
.doc__p a:hover, .doc__item a:hover, .doc__meta-val a:hover { color: var(--text-primary); }

/* the one chamfered plate on the page. Cutting exactly one corner keeps the
   site's shape signature without pretending the document is a product
   surface — chamfering every clause would be decoration. */
.doc__meta {
  --chamfer: var(--chamfer-md);
  display: grid;
  gap: var(--space-3xs);
  padding: var(--card-pad-lg);
  background: var(--chamfer-edge), var(--surface-raised);
  border: var(--border-width-hair) solid var(--border-hairline);
  border-radius: var(--radius-card);
  clip-path: var(--chamfer-clip);
}
.doc__meta-key { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
.doc__meta-val { font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--text-secondary); }

@media (min-width: 1280px) {
  /* THE MARGIN BREAK. The coordinate leaves the measure column and hangs in
     the margin beside its own clause. It never wraps, and .doc clips. */
  .doc__section > .eyebrow {
    position: absolute;
    inset-inline-end: 100%;
    inset-block-start: var(--space-md);
    margin-inline-end: var(--space-lg);
    white-space: nowrap;
  }
}