/* Legal register. The service-page hero, then a single readable column:
   mono section labels, hairline boundaries, no numbering and no forced split. */

.legal-hero {
  padding-top: clamp(5rem, 9vw, 8rem);
  overflow: hidden;
  background: radial-gradient(circle at 82% 12%, rgba(168, 126, 20, 0.09), rgba(247, 246, 244, 0) 42%), var(--bg);
}

.legal-hero .container {
  max-width: 1100px;
}

.legal-hero h1 {
  max-width: 1000px;
}

.legal-hero-lede {
  max-width: 66ch;
  margin-bottom: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
}

/* A slim tint band carries the revision label. It gives the page the same
   light / tint / light rhythm the other pages get from alternating sections,
   without banding a continuous legal read into stripes. */
.legal-meta {
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  border-block: 1px solid var(--hairline);
  background: var(--surface-tint);
}

.legal-updated {
  margin: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.legal-section {
  border-block: 1px solid var(--hairline);
  background: var(--surface-tint);
}

/* One column on the reading measure. The measure is set on the blocks, not on
   the container, so the column stays on the left rail every other section
   opens on instead of centring itself in the page. */
.legal-block {
  max-width: 68ch;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--hairline);
  margin-inline: auto;
}

.legal-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.legal-block:last-child > :last-child {
  margin-bottom: 0;
}

/* In this register the section label replaces the display heading: the same
   mono marker the numbered sections carry in their left rail. */
.legal-block > h2 {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
}

.legal-content p,
.legal-content li,
.legal-content td,
.legal-content th {
  overflow-wrap: anywhere;
}

.legal-content a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

/* Lists as quiet hairline rows. */
.legal-list {
  margin: 0 0 1.5rem;
  padding: 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}

.legal-list li {
  margin: 0;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* A list that closes a section stops on the section rule rather than drawing a
   second hairline a few millimetres above it. */
.legal-block > .legal-list:last-child {
  margin-bottom: 0;
}

.legal-block > .legal-list:last-child li:last-child {
  border-bottom: 0;
}

.legal-list--labelled strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Tables keep their structure and join the hairline system: horizontal rules
   only, first and last cells flush with the column edges. */
.legal-table-wrap {
  margin: 0 0 1.5rem;
  overflow-x: auto;
}

.legal-table-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.legal-block > .legal-table-wrap:last-child {
  margin-bottom: 0;
}

.legal-block > .legal-table-wrap:last-child tbody tr:last-child td {
  border-bottom: 0;
}

.legal-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.legal-table th,
.legal-table td {
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 1.5rem clamp(0.9rem, 2vw, 1.2rem) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-soft);
  text-align: left;
  vertical-align: top;
}

.legal-table th:last-child,
.legal-table td:last-child {
  padding-right: 0;
}

.legal-table th {
  padding-top: 0;
  border-bottom-color: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Both tables run name / purpose / provider, so the middle column carries the
   sentences and takes half the measure. */
.legal-table th:first-child {
  width: 26%;
}

.legal-table th:last-child {
  width: 24%;
}

@media (max-width: 560px) {
  .legal-table {
    min-width: 30rem;
  }

  .legal-table th,
  .legal-table td {
    padding-right: 1rem;
  }
}