/* ==========================================================================
   Legal template (privacy policy, terms of service). Prefix: .legal-
   Quiet document layout: mist title band with a doc switcher, sticky
   table of contents with scroll-spy, ~70ch measure, numbered sections
   with "In short" lines, hairline section rules.
   ========================================================================== */

/* Anchor jumps: site.css already clears the sticky header; on mobile also clear the sticky contents bar */
.legal-sec, .legal-history { scroll-margin-top: 8px; }
@media (max-width: 1023px) { .legal-sec, .legal-history { scroll-margin-top: 52px; } }

/* ---------- Title band ---------- */
.legal-hero { background: var(--mist); border-bottom: 1px solid var(--line); padding-top: clamp(28px, 3.6vw, 48px); }
/* Breadcrumb link: 44px touch target on touch screens, same look (negative margin keeps the row height) */
@media (hover: none), (max-width: 760px) { .legal-hero .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; } }
.legal-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 28px 64px; align-items: end; padding-top: 22px; padding-bottom: clamp(28px, 3.2vw, 40px); }
.legal-hero__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.legal-hero h1 { font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); line-height: 1.05; }

.legal-dates { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: var(--fs-sm); color: var(--text); }
.legal-dates > span { display: inline-flex; align-items: baseline; gap: 8px; }
.legal-dates__k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

.legal-facts { border-top: 1px solid var(--line-strong); font-size: var(--fs-sm); line-height: 1.45; }
.legal-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.legal-facts dt { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding-top: 2px; }
.legal-facts dd { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 960px) { .legal-hero__grid { grid-template-columns: minmax(0, 1fr); } .legal-facts { display: none; } }

/* Doc switcher: tabs sitting on the band's bottom hairline */
.legal-tabs { margin-bottom: -1px; position: relative; }
.legal-tabs ul { display: flex; gap: 0 32px; list-style: none; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.legal-tabs ul::-webkit-scrollbar { display: none; }
.legal-tabs li { flex: none; }
.legal-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; border-bottom: 2px solid transparent; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s; }
.legal-tabs a:hover { color: var(--text); border-bottom-color: var(--line-strong); }
.legal-tabs a[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--ink); }
.legal-tabs__sec { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); font-weight: 400; }
@media (max-width: 640px) {
  .legal-tabs { margin-inline: calc(-1 * var(--gutter)); }
  .legal-tabs ul { gap: 0 24px; padding-inline: var(--gutter); }
  .legal-tabs::after { content: ""; position: absolute; top: 0; right: 0; bottom: 2px; width: 40px; background: linear-gradient(90deg, transparent, var(--mist)); pointer-events: none; }
}

/* ---------- Body layout ---------- */
.legal-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; padding-block: clamp(40px, 5vw, 64px) var(--section-y); }
.legal-doc { max-width: 760px; min-width: 0; font-size: 1.0625rem; line-height: 1.75; color: var(--text); counter-reset: sec; }
.legal-doc p, .legal-doc li { max-width: 70ch; }
.legal-doc a:not(.btn):not(.legal-anchor) { color: var(--brand); font-weight: 500; text-decoration-color: var(--brand-tint-2); }
.legal-doc a:not(.btn):not(.legal-anchor):hover { text-decoration-color: currentColor; }
.legal-doc dfn { font-style: normal; font-weight: 600; }
.legal-doc code { font-family: var(--font-mono); font-size: .84em; background: var(--mist); border: 1px solid var(--line); padding: .05em .35em; border-radius: var(--r-xs); white-space: nowrap; }

/* Notices above the summary */
.legal-callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.55; }
.legal-callout > .i { width: 18px; height: 18px; margin-top: 2px; }
.legal-callout strong { font-weight: 600; }
.legal-callout--info { background: color-mix(in srgb, var(--info) 6%, var(--paper)); border: 1px solid color-mix(in srgb, var(--info) 22%, var(--paper)); }
.legal-callout--info > .i { color: var(--info); }
.legal-notice { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 8px 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); font-size: var(--fs-sm); line-height: 1.55; }
.legal-notice > .i { width: 18px; height: 18px; margin-top: 2px; color: var(--text-2); }
.legal-notice__body { flex: 1; min-width: 0; padding-top: 0; }
.legal-notice__body strong { font-weight: 600; }
.legal-notice__close { flex: none; width: 44px; height: 44px; margin: -11px 0 -11px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-3); display: grid; place-items: center; }
.legal-notice__close:hover { background: var(--mist); color: var(--text); }
.legal-notice__close .i { width: 18px; height: 18px; }

/* Plain-English summary */
.legal-summary { margin-top: 24px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-xs); }
.legal-summary__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.legal-summary__head h2 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.01em; }
.legal-summary__time { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.legal-summary ul { list-style: none; padding: 0; margin: 16px 0 0; }
.legal-summary li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.55; max-width: none; }
.legal-summary li .i { width: 18px; height: 18px; margin-top: 3px; color: var(--brand); }
.legal-doc .legal-summary__foot { max-width: none; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-3); }

/* ---------- Sections ---------- */
.legal-sec { counter-increment: sec; counter-reset: clause; margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line); }
.legal-sec > * + * { margin-top: 1.05em; }
.legal-sec h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.375rem, 1.22rem + .55vw, 1.625rem); line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.legal-sec h3 { display: flex; align-items: baseline; gap: 12px; margin-top: 1.9em; font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; }
.legal-sec__n { flex: none; font-family: var(--font-mono); font-size: .72em; font-weight: 400; letter-spacing: 0; color: var(--text-3); min-width: 1.6em; }
.legal-sec h3 .legal-sec__n { font-size: .8em; min-width: 2.2em; }
.legal-anchor { flex: none; align-self: center; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: -4px; border-radius: var(--r-sm); color: var(--text-3); opacity: 0; transition: opacity .15s, background-color .15s, color .15s; }
.legal-anchor .i { width: 16px; height: 16px; }
.legal-anchor:hover { background: var(--mist); color: var(--text); }
.legal-sec h2:hover .legal-anchor, .legal-anchor:focus-visible, .legal-anchor.is-copied { opacity: 1; }
.legal-anchor.is-copied { color: var(--brand); }
@media (hover: none) { .legal-anchor { opacity: 1; width: 44px; height: 44px; margin-block: -6px; } }

/* "In short" line under each numbered heading */
.legal-doc .legal-inshort { display: flex; gap: 6px 14px; align-items: baseline; margin-top: 14px; padding: 12px 16px; border-radius: var(--r-md); background: var(--mist); font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); max-width: none; }
.legal-inshort b { flex: none; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text); }
.legal-sec .legal-inshort + * { margin-top: 1.5em; }
@media (max-width: 520px) { .legal-inshort { flex-direction: column; gap: 4px; } }

/* Decimal clauses: 4.1, 4.2 … driven by the section counter */
.legal-clauses { list-style: none; padding: 0; }
.legal-clauses > li { position: relative; padding-left: 52px; counter-increment: clause; }
@media (max-width: 520px) { .legal-clauses > li { padding-left: 44px; } }
.legal-clauses > li + li { margin-top: .9em; }
.legal-clauses > li::before { content: counter(sec) "." counter(clause); position: absolute; left: 0; top: .28em; font-family: var(--font-mono); font-size: .8em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.legal-clauses ul, .legal-sec > ul { padding-left: 1.15em; }
.legal-clauses ul { margin-top: .6em; }
.legal-clauses ul li + li, .legal-sec > ul li + li { margin-top: .45em; }
.legal-doc ul li::marker { color: var(--text-3); }
.legal-caps { font-size: var(--fs-sm); letter-spacing: .015em; }

/* Covered / not covered pair (replacement guarantee) */
.legal-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.legal-pair > div { padding: 20px 22px; min-width: 0; }
.legal-pair > div + div { border-left: 1px solid var(--line); background: var(--mist); }
.legal-sec .legal-pair h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--fs-sm); line-height: 1.4; letter-spacing: 0; }
.legal-pair h3 .i { width: 18px; height: 18px; }
.legal-pair .is-yes { color: var(--brand); }
.legal-pair .is-no { color: var(--text-3); }
.legal-pair ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.legal-pair li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; }
.legal-pair li .i { width: 16px; height: 16px; margin-top: 2px; }
@media (max-width: 640px) { .legal-pair { grid-template-columns: minmax(0, 1fr); } .legal-pair > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Tables (cookies, retention, processors) */
.legal-doc .table-wrap { border-top: 1px solid var(--line-strong); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--line); }
.legal-table th:last-child, .legal-table td:last-child { padding-right: 0; }
.legal-table thead th { padding-block: 10px; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.legal-table tbody th { font-weight: 600; }
.legal-table td { color: var(--text-2); }
.legal-table .badge { height: 22px; font-size: 11.5px; justify-self: start; }
@media (max-width: 640px) {
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal-table tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .legal-table th, .legal-table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 3px 0; border: 0; }
  .legal-table tbody th { padding-bottom: 6px; }
  .legal-table [data-label]::before { content: attr(data-label); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding-top: 2px; }
  .legal-table tbody th:not([data-label]) { display: block; }
}

/* Contact block */
.legal-contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.legal-contact__who { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: var(--mist); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.45; }
.legal-contact__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 600; font-size: .95rem; letter-spacing: .02em; flex: none; }
.legal-contact__who strong { display: block; font-weight: 600; font-size: 1rem; }
.legal-contact__who p span { color: var(--text-2); }
.legal-contact__cell { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; min-width: 0; font-size: var(--fs-sm); line-height: 1.5; }
.legal-contact__cell + .legal-contact__cell { border-left: 1px solid var(--line); }
.legal-contact__k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.legal-contact__k .i { width: 15px; height: 15px; }
.legal-contact__cell a { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; overflow-wrap: anywhere; }
.legal-contact__cell address { font-style: normal; color: var(--text-2); }
@media (max-width: 760px) {
  .legal-contact { grid-template-columns: minmax(0, 1fr); }
  .legal-contact__cell + .legal-contact__cell { border-left: 0; border-top: 1px solid var(--line); }
}

/* Version history */
.legal-history { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line); }
.legal-history h2 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.01em; }
.legal-history p { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.legal-history ol { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.5; }
.legal-history li { display: grid; grid-template-columns: 64px 148px minmax(0, 1fr); gap: 4px 16px; padding: 13px 0; border-bottom: 1px solid var(--line); max-width: none; }
.legal-history__v { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text); padding-top: 1px; }
.legal-history__d { color: var(--text-3); }
.legal-history__c { color: var(--text-2); }
.legal-history .badge { height: 22px; font-size: 11.5px; margin-right: 8px; vertical-align: 1px; }
@media (max-width: 560px) { .legal-history li { grid-template-columns: 56px minmax(0, 1fr); } .legal-history__c { grid-column: 2; } }

/* ---------- Table of contents ---------- */
.legal-aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 8px; }
.legal-toc summary { list-style: none; }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc__label { display: block; margin: 0; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); }
.legal-toc ol { list-style: none; padding: 0; margin: 14px 0 0; border-left: 1px solid var(--line); }
.legal-toc li a { display: flex; gap: 10px; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-2); text-decoration: none; transition: color .15s, border-color .15s; }
.legal-toc li a:hover { color: var(--text); }
.legal-toc li a span { flex: none; min-width: 1.7em; font-family: var(--font-mono); font-size: 12px; line-height: 1.75; color: var(--text-3); font-variant-numeric: tabular-nums; }
.legal-toc li a.is-active { color: var(--text); font-weight: 600; border-left-color: var(--ink); }
.legal-toc li a.is-active span { color: var(--text); }
.legal-toc__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-3); }
.legal-toc__foot a { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.legal-toc__top { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.legal-toc__top .i { width: 14px; height: 14px; transform: rotate(-90deg); }

@media (min-width: 1024px) {
  .legal-toc[open] summary { display: none; }
}
@media (max-width: 1023px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 0; }
  .legal-doc { max-width: none; }
  .legal-aside { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 6; max-height: none; overflow: visible; padding: 0; margin-inline: calc(-1 * var(--gutter)); background: var(--paper); border-bottom: 1px solid var(--line); }
  .legal-toc summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 var(--gutter); cursor: pointer; font-size: var(--fs-sm); }
  .legal-toc summary .legal-toc__label { flex: none; }
  .legal-toc__current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
  .legal-toc summary > .i { width: 18px; height: 18px; color: var(--text-3); transition: transform .2s var(--ease); }
  .legal-toc[open] summary > .i { transform: rotate(180deg); }
  .legal-toc { position: relative; }
  .legal-toc__panel { position: absolute; left: 0; right: 0; top: 100%; max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--gutter) 18px; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 24px 32px -24px color-mix(in srgb, var(--ink) 35%, transparent); }
  .legal-toc ol { margin-top: 12px; }
  .legal-toc li a { align-items: center; min-height: 44px; padding-block: 8px; }
  .legal-toc__foot, .legal-toc__label--desk { display: none; }
}
@media (min-width: 1024px) { .legal-toc__current { display: none; } .legal-toc summary > .i { display: none; } }
