/* Privacy Policy, Terms of Use and DMCA only. Loaded after site.css.
 *
 * All three pages are generated by tools/build-legal.mjs from
 * src/js/data/legal.js, so every class here is emitted by that script. */

/* --------------------------------------------------------------- hero */

.legal-hero__lede {
  max-width: var(--measure-hero);
}

/* Was 70% white for the navy hero this used to sit on. The hero's words are on
   the light panel now, where that is invisible. */
.legal-hero__updated {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------- document switcher */

/* The three documents are siblings, not a hierarchy, so they get a tab row
 * rather than a nav item each. The current one is the only difference. */
.legal-tabs {
  background: #fff;
  border-bottom: 1px solid var(--border-subtle);
}

.legal-tabs__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.legal-tabs__link {
  padding: 16px 0 14px;
  border-bottom: 2px solid transparent;
  color: var(--navy-800);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.legal-tabs__link:hover {
  color: var(--primary);
  text-decoration: none;
}

.legal-tabs__link--current {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

/* --------------------------------------------------------------- shape */

.legal__grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* ---------------------------------------------------------------- rail */

/* Plain anchor links, so the page is navigable with JavaScript off. The rail
 * scrolls independently: these documents run to 20 sections. */
.legal__rail {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 12px;
}

.legal__rail-heading {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.legal__rail-list {
  list-style: none;
  display: grid;
  gap: 2px;
}

.legal__rail-link {
  display: block;
  padding: 7px 0 7px 12px;
  border-left: 2px solid var(--border-subtle);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.legal__rail-link:hover {
  border-left-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}

/* ------------------------------------------------------------- article */

.legal__body {
  display: grid;
  gap: 20px;
  min-width: 0;
  max-width: var(--measure);
}

/* A long table would otherwise force the grid column wider than its track. */
.legal__body > * {
  min-width: 0;
}

.legal__h {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--navy-800);
  /* The header is sticky, so an unadjusted jump lands the heading under it. */
  scroll-margin-top: 120px;
}

.legal__h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-800);
}

.legal__h3--italic {
  font-style: italic;
}

.legal__p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
  text-wrap: pretty;
}

.legal__p--strong,
.legal__p strong,
.legal__lead {
  font-weight: 500;
  color: var(--navy-800);
}

/* ---------------------------------------------------------------- lists */

.legal__list {
  list-style: none;
  display: grid;
  gap: 12px;
}

.legal__item {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
}

.legal__bullet {
  flex: 0 0 auto;
  margin-top: 4px;
  font-size: 18px;
  color: var(--gold-500);
}

.legal__steps {
  list-style: none;
  display: grid;
  gap: 12px;
}

.legal__step {
  display: flex;
  gap: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
}

.legal__step-n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--grey-100);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy-800);
}

/* --------------------------------------------------------------- tables */

.legal__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.legal__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

.legal__table th,
.legal__table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.legal__table th {
  /* The handoff states this fill literally and it is not on the token scale:
   * a warm near-white, where --grey-50 is cool. Named here rather than
   * repeated as a raw hex, and kept local to this page. */
  --legal-table-head: #f9f9f9;

  background: var(--legal-table-head);
  color: var(--text-secondary);
  font-weight: 500;
}

.legal__table td {
  padding: 14px 16px;
  color: var(--text-body);
}

/* ------------------------------------------------------------ addresses */

.legal__addr {
  display: grid;
  gap: 4px;
  padding: 22px 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--grey-100);
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
}

/* -------------------------------------------------------------- contact */

.legal__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

.legal__contact-label {
  font-size: 13px;
  color: var(--text-muted);
}

.legal__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
}

.legal__contact-icon {
  font-size: 18px;
}

/* ---------------------------------------------------------- breakpoints */

@media (max-width: 1000px) {
  .legal__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Stacked, a sticky rail would pin itself over the document. */
  .legal__rail {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 640px) {
  /* Stacked, the rail is the page's primary navigation, so its rows need a
   * full touch target rather than the desktop rail's tight rhythm. */
  .legal__rail-link {
    padding: 13px 0 13px 12px;
  }
}