/* =========================================================================
   Legal pages (Hybrid): /legal/, /privacy-policy/ and /legal/<document>/. Loaded after kb.css, whose
   article grid, prose, table of contents and breadcrumbs these pages reuse. Generated by tools/build-legal.mjs.
   The document text is shown verbatim (all-caps headings and disclaimers included), so the styling keeps
   caps calm: smaller, tracked headings and a clear date at the top of every document.
   ========================================================================= */

/* ---------- date + "can change" note (document pages) ---------- */
.legal__date { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; color: var(--ink-2); }
.legal__date .ico { width: 18px; height: 18px; color: var(--blue-t); }
.legal__date time { font-weight: 650; color: var(--ink); }
.legal-note { margin-bottom: 26px; padding: 14px 18px; border-radius: 14px; background: var(--bg-2); box-shadow: inset 3px 0 0 var(--sky); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* ---------- the document ---------- */
.legal-doc__title { padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.5; color: var(--ink-2); }
.legal-doc__title span { display: block; margin-top: 2px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--ink-3); }
.legal-doc__body { font-size: 16.5px; line-height: 1.7; }
.legal-doc__body h2 { margin-top: 2em; font-size: 17px; line-height: 1.4; letter-spacing: .015em; font-weight: 750; scroll-margin-top: calc(var(--hdr) + 24px); }
.legal-doc__body h3 { margin-top: 1.6em; font-size: 16px; letter-spacing: .01em; scroll-margin-top: calc(var(--hdr) + 24px); }
.legal-doc__body h2 + *, .legal-doc__body h3 + * { margin-top: .5em; }
.legal-doc__body strong { font-weight: 700; }
.legal__foot { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 15px; color: var(--ink-2); }
.legal__foot a:not(.link), .legal-more a:not(.link) { color: var(--blue-t); font-weight: 600; }
.legal__cookies { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.legal__cookies:hover { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue-t); }

/* ---------- rail: the other documents ---------- */
.legal-others ul { display: grid; gap: 12px; }
.legal-others a { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.legal-others a:hover { color: var(--blue-t); text-decoration: none; }
.legal-others small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }

/* ---------- hub ---------- */
.legal--hub { padding: clamp(28px, 4vw, 48px) 0 clamp(60px, 8vw, 104px); }
.legal-hero { max-width: 780px; }
.legal-hero .eyebrow { margin-top: clamp(14px, 2vw, 26px); }
.legal-hero__h { font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; text-wrap: balance; }
.legal-hero__lede { margin-top: 16px; max-width: 54ch; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.legal-alert { margin-top: clamp(26px, 3.4vw, 38px); max-width: 860px; display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: 16px; background: #fff9ea; box-shadow: inset 3px 0 0 var(--yellow), inset 0 0 0 1px rgba(254, 192, 32, .3); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.legal-alert .ico { width: 20px; height: 20px; margin-top: 2px; color: #a97800; }
.legal-alert b { color: var(--ink); font-weight: 650; }
.legal-list { margin-top: clamp(26px, 3.4vw, 40px); max-width: 980px; display: grid; gap: 12px; }
.legal-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px 22px; padding: 20px 22px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); color: inherit; transition: box-shadow .2s, transform .25s var(--ease-out); }
.legal-item:hover { position: relative; text-decoration: none; transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0, 128, 178, .35), var(--shadow-2); }
.legal-item:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4px; } /* hover stays put (styles.css, .btn) */
.legal-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.legal-item__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-3); color: var(--blue-t); }
.legal-item__ic .ico { width: 22px; height: 22px; }
.legal-item__t b { display: block; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.legal-item__t small { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.legal-item__d { text-align: right; white-space: nowrap; font-size: 15px; font-weight: 650; color: var(--ink); }
.legal-item__d small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.legal-item__go { color: var(--blue-t); }
.legal-item__go svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.legal-item:hover .legal-item__go svg { transform: translateX(3px); }
.legal-more { margin-top: clamp(30px, 4vw, 44px); max-width: 860px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.legal-more .pg-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 14px; }

@media (max-width: 640px) {
  .legal-item { grid-template-columns: auto minmax(0, 1fr); padding: 18px; gap: 12px 16px; align-items: start; }
  .legal-item__d { grid-column: 2; text-align: left; display: flex; gap: 6px; align-items: baseline; font-size: 14px; }
  .legal-item__d small { font-size: 11.5px; }
  .legal-item__go { display: none; }
  .legal-doc__body { font-size: 16px; }
  .legal__foot { flex-direction: column; align-items: flex-start; }
    }
@media (prefers-reduced-motion: reduce) {
  .legal-item, .legal-item__go svg { transition: none; }
  .legal-item:hover { transform: none; }
}
@media print {
  .legal-note, .legal__foot .link,   .legal-doc__body { font-size: 11pt; line-height: 1.5; }
  .legal-doc__body a { color: inherit; text-decoration: none; }
}