/* =============================================================================
   M10 M11 M12 M15 M16 · Legal + error pages
   Ports to: app/assets/stylesheets/marketing/pages/legal.css

   The document archetype itself lives in pages.css (.legal-page, .legal-body,
   .legal-toc), because /terms, /privacy and the broker confidentiality
   agreement all use it and 404/500 borrow it. This file holds only what is
   specific to those pages.
   ============================================================================= */

/* ═══ M12 — the public confidentiality agreement's framing block ═══════════
   Deliberately public: a seller weighing a broker's connection request reads it
   without an account, so the page opens with plain-language framing above the
   legal text. */
.agreement-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: var(--sp-8) 0 var(--sp-12); }
.agreement-why__item { border-radius: var(--radius-tile); background: var(--surface); box-shadow: var(--shadow-card); padding: var(--sp-5) var(--sp-6); }
.agreement-why__item .ico { --ico: 19px; color: var(--brand-500); }
.agreement-why__item b { display: block; margin: var(--sp-3) 0 4px; font-family: var(--font-display); font-size: var(--e-body-sm); font-weight: var(--fw-semibold); color: var(--text); }
.agreement-why__item span { display: block; font-size: var(--e-micro); line-height: 1.6; color: var(--text-secondary); }
@media (max-width: 767px) { .agreement-why { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-8); } }

/* ═══ M15 M16 — 404 and 500 ═══════════════════════════════════════════════
   New pages: there are no views for these today (/404 redirects). Kept to the
   document archetype plus one clear route back. */
.errpage { display: flex; align-items: center; min-height: 62vh; padding: var(--sp-16) 0 var(--sp-22); }
.errpage__code { display: inline-flex; align-items: center; height: 28px; padding: 0 13px; border-radius: var(--radius-pill); background: var(--gray-50); color: var(--text-tertiary); font-family: var(--font-display); font-size: var(--e-micro); font-weight: var(--fw-bold); letter-spacing: var(--tk-eyebrow); }
.errpage h1 { margin: var(--sp-6) 0 var(--sp-5); max-width: 680px; }
.errpage .lede-lg { margin-bottom: var(--sp-8); }
.errpage__links { margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: var(--border-hairline) solid var(--hairline); }
.errpage__note { margin-top: var(--sp-10); max-width: 520px; }
.errpage__links-label { font-size: var(--e-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--tk-eyebrow); text-transform: uppercase; color: var(--text-tertiary); }
.errpage__links-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }


/* ═══ THE DOCUMENT BODY ════════════════════════════════════════════════════
   Rebranded 2026-09-04 onto Satoshi and the --da-* inks. These rules were
   originally a restoration: the v2 extraction kept a rule block only when its
   FIRST selector compound named a legacy class, and none of these matched that
   shape, so the section rendered at browser defaults.

   The MEASURE matters more than anything else here: about 68 characters, which
   is a reading column, where a legal document set to the full 924px of
   .da-wrap--narrow is a wall. The header and the body BOTH read
   --legal-measure, which is why the rule above the text lines up with the text.
   That variable is a rem length rather than the 68ch of --measure-legal, and
   the block rule in pages.css explains why ch cannot do this job.

   The heading scale is deliberately NOT --da-h2 / --da-h3. Those are display
   sizes built for a landing page, and a clause heading inside a contract at
   38px reads as a section of a brochure. --e-card-title and --e-card-title-sm
   keep the hierarchy legible without shouting. */
.legal-page__body {
  /* --legal-measure, from .legal-page, NOT --measure-legal directly: the header
     reads the same variable, which is what keeps its hairline aligned with this
     text. See the block rule in pages.css. */
  max-width: var(--legal-measure);
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.75;
  color: var(--da-sec-body);
}

.legal-page__body h2 {
  margin: var(--sp-12) 0 var(--sp-4);
  font-family: var(--font-brand);
  font-size: var(--e-card-title);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--da-sec-ink);
  /* An anchored clause has to clear the sticky nav, same as .da-sec[id]. */
  scroll-margin-top: calc(var(--nav-h) + var(--sp-4));
}
.legal-page__body h2:first-child { margin-top: 0; }

.legal-page__body h3 {
  margin: var(--sp-8) 0 var(--sp-3);
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--da-sec-ink);
}

.legal-page__body p { margin: 0 0 var(--sp-4); text-wrap: pretty; }

.legal-page__body ul,
.legal-page__body ol {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.legal-page__body li { margin: 0; }
.legal-page__body li::marker { color: var(--da-sec-muted); }

.legal-page__body a {
  color: var(--da-sec-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--fw-medium);
}
.legal-page__body a:hover { opacity: 0.72; }

.legal-page__body strong { color: var(--da-sec-ink); font-weight: var(--fw-semibold); }

@media (max-width: 640px) {
  .legal-page__body h2 { margin-top: var(--sp-10); }
}