/* ===========================================================================
   legal.css — the long-form documents. privacy.html today; terms if it comes.

   THESE PAGES ARE NOT LEAVES, and that is the whole reason this sheet exists.
   Every other page on the site lives inside .card — one fixed-height stage that
   a leaf is laid into, sized so nothing ever scrolls inside it. That device is
   right for a slide and wrong for thirteen sections of legal text: a privacy
   notice has to be readable, linkable section by section, findable with the
   browser's own find, and printable. So this one is a document. It keeps the
   site's typefaces, colour and hairlines, and gives up the card.

   It also deliberately drops the source's own styling. The text was generated
   by Termly, which ships it wrapped in inline `font-family: Arial !important`
   and a fixed 15px. The words are the part that matters and they are reproduced
   as supplied; the Arial is not.
   ======================================================================== */

.legal{
  background: var(--plate-foam);
  color: var(--stencil);
  min-height: 100svh;
}

/* The masthead, borrowed in spirit from .chrome--mark but standing on its own:
   this page has no card for the real one to sit in the corner of. */
.legal__bar{
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) clamp(18px, 4vw, 56px);
  background: color-mix(in oklab, var(--plate-foam) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.legal__bar > a{ color: inherit; text-decoration: none }
.legal__bar > a:last-child{
  font-family: var(--f-label);
  font-variation-settings: "wdth" 100;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.legal__bar > a:last-child:hover{ color: var(--seal-blue) }

/* The wordmark, restated. chrome.css owns the real one, but that sheet is built
   for the corner of a .card whose plate colour animates under it — none of which
   exists here, and pulling it in would drag card.css with it. Same shapes, same
   tokens, one fixed ground. */
.legal .mark{ display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-label) }
.legal .mark__tiles{ display: inline-flex; gap: 3px; font-size: 0.9375rem }
.legal .mark__tiles > span{
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 5px;
  background: var(--stencil);
  color: var(--plate-foam);
  font-variation-settings: "wdth" 84, "wght" 700;
}
.legal .mark__tag{
  font-variation-settings: "wdth" 74, "wght" 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stencil-2);
}
@media (max-width: 34rem){ .legal .mark__tag{ display: none } }

.legal__doc{
  /* 68ch, and it is the one number on this page worth arguing about. Legal text
     is read in long unbroken paragraphs, so the measure matters more here than
     anywhere else on the site; much past 70 characters and the eye loses the
     line return. */
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 6rem) clamp(18px, 4vw, 56px) clamp(4rem, 10vw, 9rem);
}

.legal h1{
  font-family: var(--f-display);
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
.legal__meta{
  font-family: var(--f-label);
  font-variation-settings: "wdth" 100;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stencil-2);
  margin: var(--s-4) 0 0;
}
.legal__rule{
  border: 0;
  border-top: 1px solid var(--rule-strong);
  margin: var(--s-6) 0 var(--s-7);
}

.legal h2{
  font-family: var(--f-display);
  font-variation-settings: "opsz" 40;
  font-weight: 400;
  font-size: clamp(1.45rem, 3.1vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  /* Scroll-margin so the table of contents' own anchors do not land a heading
     under the sticky bar. */
  scroll-margin-top: 5.5rem;
  margin: var(--s-8) 0 var(--s-4);
}
.legal h3{
  font-family: var(--f-label);
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stencil);
  margin: var(--s-6) 0 var(--s-3);
}

.legal p,
.legal li{
  font-family: var(--f-label);
  font-variation-settings: "wdth" 100;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--stencil-2);
}
.legal p{ margin: 0 0 var(--s-4) }
.legal strong{ color: var(--stencil); font-weight: 600 }

.legal ul,
.legal ol{ margin: 0 0 var(--s-4); padding-left: 1.15rem }
.legal li{ margin: 0 0 var(--s-2) }
.legal ul{ list-style: square }

/* The "In Short:" gloss that opens most sections — the source's own device, and
   a genuinely useful one, so it is given a real treatment rather than left as
   an italic run inside the paragraph. */
.legal .inshort{
  margin: 0 0 var(--s-5);
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-left: 2px solid var(--kraft-lit);
  font-style: italic;
  color: var(--stencil-2);
}
.legal .inshort strong{ font-style: normal }

.legal a{
  color: var(--seal-blue);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  word-break: break-word;
}
.legal a:hover{ text-decoration-thickness: 2px }
.legal a:focus-visible{ outline: 2px solid var(--focus, var(--seal-blue)); outline-offset: 3px }

/* Table of contents — a numbered index, not a bulleted list of links. */
.legal__toc{ margin: 0 0 var(--s-4); padding: 0; list-style: none; counter-reset: toc }
.legal__toc li{
  counter-increment: toc;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.legal__toc li::before{
  content: counter(toc, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-num);
  letter-spacing: 0.1em;
  color: var(--stencil-3);
}

/* The categories-of-personal-information table. It has to stay a table — it is
   a three-column claim about what is and is not collected — so it scrolls
   sideways on a narrow screen rather than crushing the columns. */
.legal__tablewrap{ overflow-x: auto; margin: 0 0 var(--s-5) }
.legal table{ border-collapse: collapse; width: 100%; min-width: 34rem }
.legal th,
.legal td{
  font-family: var(--f-label);
  font-variation-settings: "wdth" 100;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
  padding: var(--s-3);
  border-bottom: 1px solid var(--rule);
  color: var(--stencil-2);
}
.legal th{
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stencil);
  border-bottom: 1px solid var(--rule-strong);
}
.legal td:last-child,
.legal th:last-child{ text-align: center; white-space: nowrap }
.legal .yes{ color: var(--stencil); font-weight: 600 }
.legal .no{ color: var(--stencil-3) }

.legal address{
  font-style: normal;
  font-family: var(--f-label);
  font-variation-settings: "wdth" 100;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--stencil-2);
}

.legal__foot{
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--stencil-3);
}

.legal__top{
  display: inline-block;
  margin-top: var(--s-5);
  font-family: var(--f-label);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media print{
  .legal__bar{ display: none }
  .legal__doc{ max-width: none; padding: 0 }
  .legal a{ color: inherit; text-decoration: none }
}