/* Page-scoped CSS from mock-site/policies.html
   Generated; do not hand-edit. */
/* ==========================================================================
   PAGE-SCOPED ONLY. Three small components, all built from site.css tokens.
   Nothing in site.css is overridden and no shared component is restyled.
   ========================================================================== */

/* --- 1. The [POLICY TEXT TBD] slot ---------------------------------------
   A hole in the page that has to look like one. Dashed frame, warn tokens,
   mono value — it can never be mistaken for a rendered policy term.
   Same family as contact.html's .addr slot, deliberately NOT the .pending
   component, which is reserved for the two compliance placeholders. */
.tbd {
  display: grid; gap: var(--s-2);
  padding: var(--s-5); border-radius: var(--r-md);
  border: 1px dashed var(--c-warn-line); border-left: var(--rule) solid var(--c-warn);
  background: var(--c-warn-bg);
}
.tbd__k {
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--c-warn);
}
.tbd__v {
  font-family: var(--font-num); font-size: var(--t-h4); font-weight: 600;
  color: var(--text); word-break: break-word;
}
.tbd__note { font-size: var(--t-micro); color: var(--text-soft); }
.tbd__note + .tbd__note { margin-top: var(--s-2); }

/* --- 2. Jump list --------------------------------------------------------
   The eight anchors as squared chips. Not .filter-pill — that component is
   the catalog filter and reusing it here would imply a filtered view. */
.jump { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jump a {
  display: inline-block; padding: 6px var(--s-3);
  border: var(--hair-strong); border-radius: var(--r-sm);
  background: var(--bg-card); color: var(--text-soft);
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 600;
  text-decoration: none; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.jump a:hover, .jump a:focus-visible { border-color: var(--accent); color: var(--accent); }

/* --- 3. Section heading row ----------------------------------------------
   Numbered section title with its state chip on the same line, so the reader
   knows before reading a word whether there is anything in the box. */
.pol-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.pol-h h2 { margin: 0; }
.pol-n {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-micro); font-weight: 600; color: var(--text-mute);
}