/* ==========================================================================
   ATEX DIGITAL · page-legal.css
   --------------------------------------------------------------------------
   The eight legal pages. Long-form prose with a sticky contents rail.
   Measure is capped hard — legal text is the one place on this site where
   people genuinely read every line, so line length matters more than layout.
   --------------------------------------------------------------------------
   01 · LAYOUT
   02 · CONTENTS RAIL
   03 · DOCUMENT
   04 · PENDING-COUNSEL BLOCKS
   ========================================================================== */


/* ===== 01 · LAYOUT =================================================== */

.legal {
  padding-block-start: calc(var(--hdr-h) + clamp(24px, 3vw, 44px));
}

.legal__grid {
  display: grid;
  gap: clamp(var(--s-7), 5vw, var(--s-9));
}

@media (min-width: 1080px) {
  .legal__grid {
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: clamp(var(--s-8), 6vw, var(--s-10));
  }
}


/* ===== 02 · CONTENTS RAIL =========================================== */

.legal__aside { min-inline-size: 0; }

@media (min-width: 1080px) {
  .legal__toc {
    position: sticky;
    inset-block-start: calc(var(--hdr-h-stuck) + var(--announce-h) + var(--s-7));
  }
}

.legal__toc .eyebrow { margin-block-end: var(--s-4); }

.legal__toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  border-inline-start: 1px solid var(--line);
}

.legal__toc li { counter-increment: toc; }

.legal__toc a {
  display: block;
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  margin-inline-start: -1px;
  border-inline-start: 1px solid transparent;
  font-size: var(--t-sm);
  color: var(--bone-dim);
  transition:
    color var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out);
}

.legal__toc a::before {
  content: counter(toc, decimal-leading-zero) "  ";
  color: var(--bone-faint);
  font-variant-numeric: tabular-nums;
}

.legal__toc a:hover {
  color: var(--bone);
  border-inline-start-color: var(--azure);
}


/* ===== 03 · DOCUMENT ================================================ */

.legal__doc { min-inline-size: 0; max-inline-size: 68ch; }

.legal__doc .crumb { display: block; }

.legal__doc h1 {
  font-size: var(--t-h2);
  margin-block-end: var(--s-6);
}

.legal__note {
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line-signal);
  border-radius: var(--r-md);
  background: var(--signal-wash);
  font-size: var(--t-sm);
  color: var(--bone-2);
  margin-block-end: var(--s-7);
}

.legal__s { margin-block-end: var(--s-6); scroll-margin-block-start: calc(var(--hdr-h-stuck) + var(--announce-h) + var(--s-6)); }

.legal__s h2 {
  font-size: var(--t-h3);
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--bone);
  margin-block-end: var(--s-4);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
}

.legal__s p {
  color: var(--bone-dim);
  text-wrap: pretty;
}

.legal__foot {
  margin-block-start: var(--s-9);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--bone-dim);
}


/* ===== 04 · PENDING-COUNSEL BLOCKS ================================== */
/* deliberately conspicuous: these must not reach launch unnoticed */

.legal__s--todo {
  padding: var(--s-6);
  border: 1px dashed var(--line-signal);
  border-radius: var(--r-md);
  background: var(--signal-wash);
}

.legal__s--todo h2 {
  border-block-start: 0;
  padding-block-start: 0;
  color: var(--signal-soft);
}