/* assets/css/legal.css
 * Shared layout for the three document pages: terms.html, privacy.html and
 * security.html. One stylesheet rather than three, because these pages are
 * the same page with different words in it.
 *
 * Deliberately not a hero. A hero is a sales device and these are reference
 * documents — somebody arrives here to find one clause, usually from a
 * footer link, and the fastest thing the page can do is show them the
 * contents list. The head is a compact band instead of the 560px
 * --hero-h the marketing pages use.
 */

/* ---- Page head ------------------------------------------------------ */

.legal-head {
  padding: 62px 0 54px;
  background: var(--band);
}

.legal-head__inner {
  max-width: 780px;
}

.legal-head__title {
  /* FACE AND WEIGHT STATED, NOT INHERITED.
     These relied on the global `h1` rule for bold. That holds while the hero
     is an <h1> on a page that loaded base.css in the usual order — and stops
     holding the moment one is rendered from a React page, wrapped in another
     element, or reached with a different stylesheet order. A hero headline
     should not depend on which tag it happens to be in. */
  font-family: var(--font-heading);
  font-weight: 700;

  --hard-shadow-offset: 3px;
  font-size: var(--hero);
  line-height: var(--hero-lh);
}

/* The date is the single most load-bearing fact on a legal page — it is what
   tells a reader whether the version they remember is the version in front
   of them. It sits above the title rather than buried at the bottom. */
.legal-head__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid var(--forest);
  border-radius: var(--radius-btn);
  font-size: var(--small);
  line-height: var(--small-lh);
  color: var(--forest);
}

.legal-head__lead {
  max-width: 620px;
  margin-top: 18px;
  font-size: var(--lead);
  line-height: 28px;
  color: var(--ink-soft);
}

/* ---- Body ------------------------------------------------------------
 * Contents rail on the left, document on the right. The rail is sticky
 * because these documents are long and the whole point of the rail is that
 * it is reachable from clause 14 as easily as from clause 1.
 */

.legal {
  padding: 62px 0 96px;
}

.legal__inner {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 68px;
  align-items: start;
}

.legal__rail {
  position: sticky;
  top: 28px;
}

.legal__rail-title {
  margin-bottom: 14px;
  font-family: var(--font-accent);
  font-size: 20px;
  line-height: 20.8px;
  color: var(--ink);
}

.legal__rail-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
  border-left: 2px solid var(--line);
}

.legal__rail-list a {
  font-size: var(--small);
  line-height: 19px;
  color: var(--ink-soft);
  text-decoration: none;
}

.legal__rail-list a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- The document ---------------------------------------------------- */

.legal__doc {
  max-width: 720px;
}

.legal__section {
  scroll-margin-top: 28px;
}

.legal__section + .legal__section {
  margin-top: 46px;
}

/* Numbered by hand in the markup rather than with a counter, so the numbers
   survive being quoted in an email or a support ticket. A clause anybody can
   refer to by number is worth more than a tidy stylesheet. */
.legal__section h2 {
  font-size: var(--h5);
  line-height: var(--h5-lh);
}

.legal__section h3 {
  margin-top: 26px;
  font-size: var(--h6);
  line-height: var(--h6-lh);
}

.legal__section p,
.legal__section li {
  font-size: var(--lead);
  line-height: 30px;
  color: var(--ink-soft);
}

.legal__section p {
  margin-top: 16px;
}

.legal__section ul,
.legal__section ol {
  margin: 16px 0 0;
  padding-left: 22px;
}

.legal__section li + li {
  margin-top: 10px;
}

.legal__section strong {
  color: var(--ink);
  font-weight: 500;
}

.legal__section a {
  color: var(--brand);
  text-underline-offset: 3px;
}

/* The security page names one SQL keyword in a callout. Nothing else on the
   site sets code, so it is scoped here rather than added to base.css for a
   single word. --font-data is the Inter already loaded for figures; it is not
   monospaced, but it reads as a different register from the body face, which
   is all this needs to do. */
.legal__section code {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--white);
  font-family: var(--font-data);
  font-size: 0.9em;
  color: var(--ink);
}

/* ---- Callout ---------------------------------------------------------
 * Same shape as .kit-note__text on the hardware page. Used where a clause
 * has a plain-English answer that matters more than the clause does.
 */

.legal__note {
  margin-top: 20px;
  padding: 20px 26px;
  border-left: 4px solid var(--brand);
  border-radius: 0;
  background: var(--paper);
}

.legal__note p {
  margin-top: 0;
}

.legal__note p + p {
  margin-top: 14px;
}

/* ---- Definition table ------------------------------------------------
 * Privacy needs a data-categories table and security needs a controls
 * table. Built here so those two pages are content only.
 */

.legal__table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  text-align: left;
}

.legal__table th,
.legal__table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-size: var(--body);
  line-height: 22px;
  vertical-align: top;
}

.legal__table th {
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 500;
}

.legal__table thead th {
  border-bottom: 2px solid var(--line);
}

.legal__table td {
  color: var(--ink-soft);
}

.legal__table tbody th {
  width: 34%;
  font-weight: 500;
}

/* ---- Sign-off --------------------------------------------------------- */

.legal__signoff {
  margin-top: 56px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.legal__signoff h3 {
  margin-top: 0;
  font-size: var(--h6);
  line-height: var(--h6-lh);
}

.legal__signoff p {
  margin-top: 12px;
  font-size: var(--body);
  line-height: 24px;
  color: var(--ink-soft);
}

.legal__signoff a {
  color: var(--brand);
  text-underline-offset: 3px;
}

/* ---- Responsive -------------------------------------------------------
 * The rail stops being a rail and becomes a contents box above the
 * document. It does not collapse behind a toggle: a 16-clause document is
 * exactly the case where a reader needs to see the whole list at once, and
 * a details element would hide it behind a tap on the page where hiding
 * things is least welcome.
 */

@media (max-width: 1100px) {
  .legal-head {
    padding: 48px 0 42px;
  }

  

  .legal {
    padding: 44px 0 72px;
  }

  .legal__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .legal__rail {
    position: static;
    padding: 22px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
  }

  .legal__rail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 26px;
    padding-left: 0;
    border-left: 0;
  }

  .legal__doc {
    max-width: none;
  }
}

@media (max-width: 640px) {
  

  .legal__rail-list {
    grid-template-columns: 1fr;
  }

  .legal__section p,
  .legal__section li {
    font-size: var(--body);
    line-height: 27px;
  }

  .legal__note {
    padding: 18px 20px;
  }

  .legal__signoff {
    padding: 22px 20px;
  }

  /* A two-column table at 390px is unreadable, so the row header stacks
     above its cell and the table reads as a list of labelled blocks. */
  .legal__table thead {
    display: none;
  }

  .legal__table tbody th,
  .legal__table td {
    display: block;
    width: auto;
    padding: 0 0 4px;
    border-bottom: 0;
  }

  .legal__table tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
}