/* ───────────────────────────────────────────────────────────────────
   Legal pages on the marketing kit, SCREEN ONLY (2026-11-01).

   Linked after marketing.css on every legal/*.html document page and the
   legal directory. It restyles the cover block (eyebrow, title, effective
   date, callout), the Save-as-PDF button and the contents list that
   legal-toc.js builds, so the legal pages read as the same site.

   It never changes the legal text, and it is wrapped in @media screen so
   the printed / rendered PDFs (legal-print.css) are untouched.
   ─────────────────────────────────────────────────────────────────── */

@media screen {

  /* ── Cover block on every document page ───────────────────────── */
  .lgl-shell { padding-top: 80px; position: relative; }
  .lgl-shell .lgl-eyebrow { font: 600 13px/1.4 'Inter', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-link); margin-bottom: 14px; }
  .lgl-shell h1 { font-family: var(--sn-font-display, 'Inter', system-ui, sans-serif); font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; color: var(--mk-ink); margin: 0 0 16px; text-wrap: balance; }
  .lgl-shell .lgl-meta { font: 500 11.5px/1.6 var(--mk-mono); letter-spacing: .06em; color: var(--mk-muted); margin-bottom: 28px; }
  .lgl-shell .lgl-callout { border: 0; border-radius: 14px; background: var(--mk-art); box-shadow: inset 0 0 0 1px rgba(10,37,64,.06); padding: 22px 26px; font-size: 14.5px; }

  /* Save as PDF: a quiet secondary action under the callout, left-aligned
     with the text column, instead of a dark button floating on the right. */
  .lgl-shell .lgl-pdf-btn-wrap { justify-content: flex-start; margin: 0 0 32px; }
  .lgl-shell .lgl-pdf-btn { background: #fff; color: var(--mk-ink) !important; border: 0; border-radius: 8px; padding: 10px 16px; box-shadow: var(--mk-card); font-size: 14px; }
  .lgl-shell a.lgl-pdf-btn, .lgl-shell a.lgl-pdf-btn:link, .lgl-shell a.lgl-pdf-btn:visited, .lgl-shell a.lgl-pdf-btn:hover { color: var(--mk-ink) !important; border-bottom: 0; }
  .lgl-shell .lgl-pdf-btn:hover { box-shadow: var(--mk-card); transform: translateY(-1px); }

  /* One heading scale on every document. */
  .lgl-shell h2 { font-size: 22px; font-weight: 650; letter-spacing: -0.012em; color: var(--mk-ink); }
  .lgl-shell h3 { font-size: 16px; color: var(--mk-ink); }
  .lgl-shell h2[id], .lgl-shell h3[id] { scroll-margin-top: calc(var(--sn-header-h, 76px) + 20px); }

  /* ── Contents (built by legal-toc.js) ─────────────────────────── */
  .lgl-toc { margin: 0 0 32px; }
  .lgl-toc details { border-radius: 14px; box-shadow: var(--mk-card); background: #fff; }
  .lgl-toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font: 500 11.5px/1.6 var(--mk-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mk-muted); }
  .lgl-toc summary::-webkit-details-marker { display: none; }
  .lgl-toc summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--mk-link); border-bottom: 2px solid var(--mk-link); transform: rotate(45deg); transition: transform .2s ease; }
  .lgl-toc details[open] summary::after { transform: rotate(-135deg); }
  .lgl-toc ol { list-style: none; margin: 0; padding: 4px 20px 16px; }
  .lgl-toc li { margin: 0; padding: 0; font-size: 14px; line-height: 1.4; }
  .lgl-toc a { display: block; padding: 6px 0; color: var(--mk-soft) !important; border-bottom: 0 !important; text-decoration: none; }
  .lgl-toc a:hover, .lgl-toc a[aria-current="true"] { color: var(--mk-link) !important; }
  .lgl-toc a:focus-visible { outline: 2px solid var(--mk-link); outline-offset: 2px; border-radius: 4px; }

  /* Wide screens: the contents sit in a rail to the left of the text and
     follow you down the page. */
  @media (min-width: 1340px) {
    .lgl-shell:has(.lgl-toc) { left: 100px; }
    .lgl-toc { position: absolute; top: 80px; bottom: 96px; left: -210px; width: 190px; margin: 0; }
    .lgl-toc details { position: sticky; top: calc(var(--sn-header-h, 76px) + 24px); box-shadow: none; background: transparent; max-height: calc(100vh - var(--sn-header-h, 76px) - 48px); overflow-y: auto; }
    .lgl-toc summary { padding: 0 0 8px; cursor: default; pointer-events: none; }
    .lgl-toc summary::after { display: none; }
    .lgl-toc ol { padding: 0; border-left: 1px solid var(--mk-line); }
    .lgl-toc li { font-size: 13px; }
    .lgl-toc a { padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; }
    .lgl-toc a[aria-current="true"] { border-left-color: var(--mk-link); }
  }

  /* ── Procurement bundle + security questionnaire: same label sizes ── */
  .pb-head-eyebrow, .sq-head-eyebrow { font: 600 13px/1.4 'Inter', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-link); }
  .pb-section-tag, .sq-section-tag, .pb-toc-label, .sq-toc-label, .pb-kv-key,
  .pb-head-meta, .sq-head-meta, .sq-id, .sq-status, .sq-toc-n { font-size: 11.5px; letter-spacing: .06em; }
  .pb-section-tag, .sq-section-tag, .pb-toc-label, .sq-toc-label { font-weight: 500; }

  @media (max-width: 720px) {
    .lgl-shell { padding-top: 48px; }
    .lgl-shell .lgl-pdf-btn-wrap { margin-bottom: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lgl-toc summary::after, .lgl-shell .lgl-pdf-btn { transition: none; }
    .lgl-shell .lgl-pdf-btn:hover { transform: none; }
  }
}

@media print {
  .lgl-toc { display: none !important; }
}