/* ==========================================================
   VERYQUERY · legal pages (terms, privacy)
   Shared styling for long-form policy prose. Sits on top of
   design-system.css + styles.css.
========================================================== */

/* Metadata strip at the top of each page: entity, effective date. */
.legal-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s-3) var(--s-6);
  margin: var(--s-6) 0 var(--s-8);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--ink-mid);
}
.legal-meta__row > span:first-child {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mid);
  margin-bottom: 0.2em;
  font-size: var(--t-2xs);
}
.legal-meta__row > span:last-child {
  color: var(--ink);
}

/* Section body tightens up on legal pages: long prose reads better
   at 66ch max. Override the default wide layout. */
.legal .sec__inner { max-width: 56rem; }
.legal .sec__h { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }

/* Sub-headings inside clauses: used for grouping rules (e.g.
   "prohibited content" inside the acceptable-use section). */
.legal-subh {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: var(--s-5) 0 var(--s-2);
}

/* Rule lists: enumerated items within a clause. */
.legal-list {
  margin: var(--s-3) 0;
  padding-left: var(--s-5);
  list-style: decimal;
}
.legal-list > li {
  margin-bottom: var(--s-3);
  color: var(--ink);
  line-height: 1.6;
}
.legal-list > li::marker {
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Unordered inline rule lists (prohibitions, etc.). */
.legal-bullets {
  margin: var(--s-3) 0;
  padding-left: var(--s-5);
  list-style: disc;
}
.legal-bullets > li {
  margin-bottom: var(--s-2);
  color: var(--ink);
  line-height: 1.55;
}

/* Dense key/value block for single-pair metadata (e.g. governing law). */
.legal-kv {
  display: grid;
  grid-template-columns: minmax(10rem, auto) 1fr;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-4) 0;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
}
.legal-kv dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
}
.legal-kv dd { color: var(--ink); margin: 0; }

/* Inline contact callout: monospace email address inside prose. Mono
   glyphs have different metrics than the proportional body font, so
   they read cramped against neighbouring words. A hair of inline
   margin restores breathing room. */
.legal-email {
  font-family: var(--font-mono);
  color: var(--accent);
  margin-inline: 0.15em;
}
.legal-email:hover { color: var(--ink); }

/* Inline code inside prose: same rationale as .legal-email. */
.legal .prose code,
.legal .legal-bullets code,
.legal .legal-list code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  margin-inline: 0.15em;
  padding: 0.05em 0.3em;
  background: var(--paper-tint, rgba(0, 0, 0, 0.04));
  border-radius: 2px;
}

/* Bold callouts inside prose: a little horizontal air so "We do not
   sell your data" doesn't smash against surrounding text. */
.legal .prose strong,
.legal .legal-bullets strong,
.legal .legal-list strong {
  margin-inline: 0.08em;
}

/* Italic <em> inside prose shares the treatment. */
.legal .prose em,
.legal .legal-bullets em,
.legal .legal-list em {
  margin-inline: 0.08em;
}

/* Section-number anchor: so merchants can deep-link to a clause. */
.sec[id] { scroll-margin-top: 5rem; }

@media (max-width: 640px) {
  .legal-meta { font-size: var(--t-2xs); }
  .legal-kv { grid-template-columns: 1fr; gap: var(--s-1); }
  .legal-kv dt { margin-top: var(--s-2); }
}