/* Legal articles (Terms, Privacy) — direction J (REC-240 design lock). Linked
   after site.css by Legal.astro. One article shape: kicker, headline,
   "Last updated" meta row, an "On this page" list (>= 1080: a plain 220px
   column left of the body, pinned under the compacted bar as the article
   scrolls; below: a closed details), and a 65ch body at 17px / 1.6. Adds
   no colour, no card and no icon. 8px grid.

   Ported from
   marketing/.impeccable/mocks/decision/composed/j-hybrid-gf-blue/legal.css —
   its top-bar (".on-light") and ".foot-col[aria-current]" overrides are NOT
   ported: this site's real header/footer already carry that styling
   (site.css's ".on-ground" rules, ".foot-col a[aria-current='page']"), under
   different selector names than the mock's standalone header. Duplicating
   them here would be dead CSS. */

.legal { padding: 40px 0 64px; }
/* one grid; 17px on the grid itself so 65ch is the body's own measure */
.l-grid { display: grid; grid-template-columns: minmax(0, 65ch); grid-template-areas: "head" "tocm" "body"; font-size: 17px; }
.l-toc { display: none; }

/* head: kicker, headline, meta row */
.l-head { grid-area: head; display: flex; flex-direction: column; }
.l-kicker { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); }
.l-h1 { margin-top: 16px; font-size: 40px; line-height: 1.04; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; max-width: 16ch; }
.l-meta { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 15px; line-height: 24px; color: var(--ink-3); }
.l-meta time { font-variant-numeric: tabular-nums; }

/* contents, phone + tablet: a plain details, closed at rest; the only cue is a typographic + / – */
.l-tocm { grid-area: tocm; margin-top: 32px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.l-tocm summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
.l-tocm summary::-webkit-details-marker { display: none; }
.l-tocm summary::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; color: var(--ink-3); }
.l-tocm[open] summary::after { content: "–"; }
.l-tocm ol { padding-bottom: 8px; }

/* the contents rows, both forms: plain text on hairline rows */
.l-toc ol, .l-tocm ol { counter-reset: none; }
.l-toc li, .l-tocm li { border-top: 1px solid var(--line); }
.l-toc a, .l-tocm a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 15px; line-height: 1.35; color: var(--ink-2); text-decoration: none; text-wrap: pretty; }
.l-toc a:hover, .l-tocm a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* body: 17px / 1.6 on 65ch, 1.1em rhythm */
.l-body { grid-area: body; margin-top: 40px; line-height: 1.6; color: var(--ink-2); }
.l-body > * + * { margin-top: 1.1em; }
.l-body p { text-wrap: pretty; }
.l-body > .l-lead { font-size: 19px; line-height: 1.55; color: var(--ink); }
.l-body > h2 { margin-top: 40px; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.l-body > h2 + * { margin-top: 12px; }
.l-body ul { display: flex; flex-direction: column; gap: .75em; }
.l-body li { position: relative; padding-left: 20px; text-wrap: pretty; }
.l-body li::before { content: ""; position: absolute; left: 1px; top: calc(.8em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.l-body .sp-name { color: var(--ink); font-weight: 600; }
/* links: the site's prose link, ledger blue, underlined */
.l-body a { color: var(--blue); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(52,67,201,.35); text-underline-offset: 4px; }
.l-body a:hover { color: var(--blue-hover); text-decoration-color: currentColor; }
/* the Questions address: About's mail-link treatment */
.l-body a.o-mail { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; font-weight: 600; }

/* ---------- >= 760 ---------- */
@media (min-width: 760px) {
  .legal { padding: 64px 0 88px; }
  .l-h1 { font-size: 52px; }
  .l-meta { margin-top: 32px; }
  .l-tocm { margin-top: 40px; }
  .l-body { margin-top: 48px; }
  .l-body > h2 { margin-top: 48px; }
}

/* ---------- >= 1080: contents in a plain 220px column left of the body, sticky 24px under the compacted bar (site.css's
   --hdr-h-s, plus its 1px hairline) for the length of the article; head sits over the body column ---------- */
@media (min-width: 1080px) {
  .legal { padding: 96px 0 120px; }
  .l-grid { grid-template-columns: 220px minmax(0, 65ch); column-gap: 80px; justify-content: center; grid-template-areas: ". head" "toc body"; }
  .l-h1 { font-size: 56px; line-height: 1.02; letter-spacing: -.042em; }
  .l-tocm { display: none; }
  .l-toc { display: block; grid-area: toc; align-self: start; margin-top: 64px; position: sticky; top: calc(var(--hdr-h-s) + 1px + 24px);
    max-height: calc(100dvh - var(--hdr-h-s) - 1px - 48px); overflow-y: auto; scrollbar-width: thin; }
  /* the pinned list scrolls within itself on a short viewport, so its ring sits inside the row instead of under the scroll box's edge */
  .l-toc a:focus-visible { outline-offset: -3px; }
  .l-toc-h { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); padding-bottom: 12px; }
  .l-toc li:last-child { border-bottom: 1px solid var(--line); }
  .l-body { margin-top: 64px; }
  .l-body > .l-lead + h2 { margin-top: 48px; }
}