.legal-page {
  /* The same shell as the reference: a sidebar, a gutter, the measure, its slack, and the
     on-this-page rail. dub.co/docs, which the reference was drawn from, reads at ~1480 as
     sidebar 325 | 88 | a ~615 measure | ~140 | rail 210 - the article breathing on both sides
     between two columns that are visibly columns. A policy page with no left column had
     nothing for a gutter to belong to, which is why every width tried for its one gap still
     read as empty. */
  --legal-nav-width: 260px;
  --legal-rail-width: 212px;
  --legal-gutter: 88px;
  /* One measure for everything in the reading column. This was 760 while .legal-section used the
     720 editorial reading width, so the contact card ran 40px past the rules of every section
     under it. */
  --legal-measure: var(--editorial-reading-width);
  /* A policy page is a sheet of type with an index beside it, and its frame is the width those
     two need - not the landing page's 1280. At 1280 the reading track was 969px for a 720px
     measure, which left 280-320px of empty column between the text and the rail at every
     desktop width; on prose it passed for a gutter, on the contact card's border against the
     rail's rule it read as a hole. 1120 and 1040 were tried; both still read as a gap, because
     the problem was never the number - a flush-left column with all its slack on one side does
     not read as a page with room, it reads as a page with a hole. 1360 is the docs shell: the
     three columns fill it exactly (260 + 888 + 212), the reading track holds 88 of gutter, 720
     of measure and 80 of slack, and the masthead and footer read the same width through
     --page-inset so all three bands stay on one edge. */
  --editorial-width: 1360px;
  background: var(--editorial-paper);
}

.legal-main {
  padding: clamp(52px, 6vw, 84px) 0 96px;
}

.legal-hero {
  max-width: 940px;
  margin: 0 auto clamp(50px, 6vw, 72px);
  text-align: center;
}

.legal-hero h1 {
  margin: 14px 0 18px;
  padding-bottom: 4px;
  font-size: clamp(42px, 4.6vw, 62px);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -.048em;
}

.legal-hero > p:not(.legal-updated) {
  max-width: 760px;
  margin: 0 auto;
  color: var(--editorial-muted);
  font-size: 17px;
  line-height: 1.72;
}

.legal-updated {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  margin: 20px 0 0;
  padding: 0 12px;
  border-left: 2px solid var(--editorial-green);
  color: var(--editorial-muted);
  font-size: 12px;
  font-weight: 650;
}

/* Three columns filling the frame edge to edge, so the sidebar's left and the rail's right line
   up with the masthead above and the footer below. Two earlier shapes are worth remembering:
   a bounded pair centred inside a wider frame, which left 114px of empty gutter down each page
   edge; and a flush-left reading column with one rail, which put all of the slack on one side
   and read as a hole however narrow the frame was cut. */
.legal-layout {
  display: grid;
  grid-template-columns: var(--legal-nav-width) minmax(0, 1fr) var(--legal-rail-width);
  align-items: start;
}

/* Placement by area, so the document order can stay what reads best in one column - the index
   strip first, then the policy - while the three-column page puts the sidebar left, the
   reading column centre and the index right. */
.legal-nav { grid-area: 1 / 1; }
.legal-content { grid-area: 1 / 2; }
.legal-toc { grid-area: 1 / 3; }

/* The policy set, in the footer's own grouping. Its links used to sit in the rail under
   "Related", where they were the only thing on the page that was not about this page; a
   sidebar is where a reader expects the set, and the rail keeps to the headings. Same
   geometry as .docs-nav so the two surfaces are one shell, not two that resemble each other. */
.legal-nav {
  position: sticky;
  top: calc(var(--editorial-header-height) + 24px);
  max-height: calc(100vh - var(--editorial-header-height) - 24px);
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 0 24px 48px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.legal-nav__group {
  display: grid;
  gap: 1px;
}

.legal-nav__label {
  margin-bottom: 8px;
  padding-inline: 10px;
  color: var(--editorial-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.legal-nav a {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--editorial-muted);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition: color .12s ease, background-color .12s ease;
}

.legal-nav a:hover,
.legal-nav a:focus-visible {
  color: var(--editorial-ink);
  background: var(--color-surface-sunken);
}

.legal-nav a[aria-current="page"] {
  color: var(--editorial-brand);
  background: var(--editorial-brand-soft);
  font-weight: 500;
}

/* A short page with no sections to index drops the table-of-contents column rather than
   leaving the reading column stranded in the rail meant for it. With a single track there is no
   second edge to be flush with, so it stays centred. */
.legal-layout--single {
  grid-template-columns: minmax(0, var(--legal-measure));
  justify-content: center;
}

.legal-toc {
  position: sticky;
  top: calc(var(--editorial-header-height) + 24px);
  max-height: calc(100vh - var(--editorial-header-height) - 48px);
  padding-left: 18px;
  overflow-y: auto;
  border-left: 1px solid var(--editorial-line);
  scrollbar-color: var(--editorial-line) transparent;
  scrollbar-gutter: stable;
}

.legal-toc__group {
  display: grid;
  gap: 2px;
  padding-bottom: 18px;
}

.legal-toc__group strong {
  margin-bottom: 10px;
  color: var(--editorial-ink);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.legal-toc__group a {
  min-height: 44px;
  display: flex;
  align-items: center;
  margin-left: -10px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--editorial-muted);
  font-size: 12px;
  line-height: 1.45;
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}

.legal-toc__group a:hover,
.legal-toc__group a:focus-visible {
  color: var(--editorial-brand);
  background: var(--editorial-brand-soft);
}

.legal-content {
  min-width: 0;
  /* The measure belongs to the prose, not to the track. The track reaches the rail; the
     paragraphs stop at a line a reader can follow back. The gutter from the sidebar is the
     column's own padding, so what remains of the track past the measure is the slack to the
     rail - 80px on the full shell. */
  max-width: calc(var(--legal-measure) + var(--legal-gutter));
  padding-left: var(--legal-gutter);
  color: #313a50;
  font-size: 17px;
  line-height: 1.82;
}

.legal-section {
  max-width: var(--editorial-reading-width);
  padding: 40px 0;
  border-bottom: 1px solid var(--editorial-line);
  scroll-margin-top: calc(var(--editorial-header-height) + 24px);
}

.legal-section:first-child:not(.legal-section--request) {
  padding-top: 8px;
}

.legal-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.legal-section h2 {
  margin: 0;
  color: var(--editorial-ink);
  font-size: clamp(29px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.038em;
}

.legal-section h3 {
  margin: 30px 0 10px;
  color: var(--editorial-ink);
  font-size: 20px;
}

.legal-section :is(p, ul) {
  margin: 16px 0 0;
}

.legal-section :is(p, li) {
  color: var(--editorial-muted);
}

.legal-section ul {
  display: grid;
  gap: 9px;
  padding-left: 24px;
}

.legal-section a {
  color: var(--editorial-brand);
  font-weight: 650;
}

.legal-section--request {
  max-width: var(--legal-measure);
  margin-bottom: 10px;
  padding: clamp(24px, 4vw, 34px);
  border: 1px solid var(--editorial-line);
  border-radius: 12px;
  background: var(--editorial-paper);
  box-shadow: var(--editorial-shadow);
}

.legal-section__route {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  color: var(--editorial-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.legal-section__route :is(span, strong) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.legal-section__route :is(i, strong::before, span:last-child::before) {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: var(--legal-route-node-radius, 2px);
  background: var(--legal-route-node-fill, var(--editorial-paper));
  box-shadow: 0 0 0 var(--legal-route-node-ring, 0) var(--legal-route-node-ring-color, transparent);
}

.legal-section__route strong {
  --legal-route-node-fill: var(--editorial-brand);
  --legal-route-node-radius: 50%;
  --legal-route-node-ring: 3px;
  --legal-route-node-ring-color: var(--editorial-brand-soft);
  color: var(--editorial-brand);
}

.legal-section__route span:last-child {
  --legal-route-node-fill: var(--editorial-green);
  color: var(--editorial-green);
}

.legal-section__route b {
  width: 24px;
  height: 1px;
  flex: 0 1 24px;
  background: var(--editorial-line);
}

.contact-request-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.contact-request-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.contact-request-form label {
  display: grid;
  gap: 8px;
  color: var(--editorial-ink);
  font-size: var(--control-label-size);
  font-weight: 600;
}


.contact-request-form__hint {
  margin: 0;
  color: var(--editorial-muted);
  font-size: var(--control-help-size);
  font-weight: 400;
  line-height: 1.5;
}

/* Sits in the same place and at the same size as the hint, so a field that gains an error does
   not move the fields under it. The red ring on the control is form-controls.css's, keyed on the
   `aria-invalid` this message is announced by. */
.contact-request-form__error {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--control-help-size);
  font-weight: 500;
  line-height: 1.5;
}

/* form-controls.css owns height, radius, padding, fill and ring for every control on this
   surface. What stays here is layout: the field fills its column, and a textarea is the one
   control whose height is not the control height. */
.contact-request-form :is(input, select, textarea) {
  width: 100%;
}

/* form-controls.css floors every textarea at 88px and owns the resize affordance. A support
   message wants room to describe a delivery problem without scrolling, so the surface raises
   the height - and only the height. The .legal-page prefix is what outranks the shared rule;
   both selectors are otherwise equal and the shared file loads later. */
.legal-page .contact-request-form textarea {
  height: auto;
  min-height: 160px;
}

.contact-request-form .btn {
  min-width: 148px;
  justify-self: start;
}

.contact-request-form .btn:disabled {
  opacity: .62;
  cursor: wait;
}

.contact-request-form__status {
  min-height: 0;
  margin: 0;
  color: var(--editorial-muted);
  font-size: var(--control-help-size);
  line-height: 1.5;
}

/* Every outcome drew the same green rule, so "Request not sent" was styled as a success. The
   tone is set by the code that knows which one happened; the neutral rule is the fallback for a
   message that arrives without one. */
.contact-request-form__status:not(:empty) {
  padding-left: 12px;
  border-left: 2px solid var(--editorial-line);
}

.contact-request-form__status[data-tone="pending"] {
  border-left-color: var(--editorial-brand);
}

.contact-request-form__status[data-tone="success"] {
  border-left-color: var(--editorial-green);
  color: var(--editorial-ink);
}

.contact-request-form__status[data-tone="error"] {
  border-left-color: var(--color-danger);
  color: var(--color-danger);
}

.legal-page .editorial-footer .console-footer__trust {
  margin-top: 16px;
  color: var(--editorial-muted);
}

html[data-theme="dark"] .legal-page {
  background: var(--editorial-canvas);
}

html[data-theme="dark"] .legal-content {
  color: var(--editorial-muted);
}

html[data-theme="dark"] .legal-section--request {
  border-color: var(--editorial-line);
  background: var(--editorial-paper);
  box-shadow: var(--editorial-shadow);
}

/* Three columns need 260 + 88 + 720 + 80 + 212 plus the page gutters, about 1408. The sidebar is
   the column to give up first: its five links are in the footer of every page, and the rail is
   the one thing on the page that is about this page. With two columns the reading column
   centres in its track rather than sitting on one edge with the slack on the other, which is
   what the reference does when its own third column leaves. */
@media (max-width: 1320px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr) var(--legal-rail-width);
    /* The least the rail may sit from the prose. Without it the centred column met the rail's
       rule at exactly 0px once the track had shrunk to the measure. */
    column-gap: 40px;
  }

  .legal-nav { display: none; }

  .legal-content {
    grid-area: 1 / 1;
    max-width: var(--legal-measure);
    margin-inline: auto;
    padding-left: 0;
  }

  .legal-toc { grid-area: 1 / 2; }
}

/* The rail leaves at the width where keeping it would cramp the reading track, not at a round
   number. The track is the window less the two 24px gutters, the 40px column gap and the rail;
   at 1020 that is exactly the 720 measure, so above this the prose is never squeezed for a
   column, and below it the page is one column. The old 900 collapsed after the track had
   already been cut to 540. */
@media (max-width: 1020px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* One column, so the placement goes back to document order - index first, then the policy.
     The measure stays on: the index strip, the card and the sections all stop at the same 720,
     which is what keeps one right edge down the page. It used to be lifted here, so the index
     ran full width as a bordered panel while the card beneath it stayed at 720 - two edges,
     and a composition that jumped at the breakpoint instead of degrading. */
  .legal-content, .legal-toc { grid-area: auto; }
  .legal-content { margin-inline: 0; }

  /* Not a panel: a strip. A boxed two-column index above a boxed form was a frame around a
     frame, and it was the thing that changed shape at the breakpoint. The links wrap on one
     line or two under a hairline, on the column's own measure. */
  .legal-toc {
    position: static;
    max-width: var(--legal-measure);
    max-height: none;
    padding: 0 0 14px;
    overflow: visible;
    border-left: 0;
    border-bottom: 1px solid var(--editorial-line);
    scrollbar-gutter: auto;
  }

  .legal-toc__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    padding-bottom: 0;
  }

  .legal-toc__group strong {
    margin: 0 12px 0 0;
  }

  .legal-toc__group a {
    margin-left: 0;
    padding-inline: 8px;
  }

  .legal-toc__group a:first-of-type {
    margin-left: -8px;
  }
}

@media (max-width: 620px) {
  .legal-page .editorial-brand__divider,
  .legal-page .editorial-brand__section {
    display: none;
  }

  .legal-main {
    padding: 38px 0 72px;
  }

  .legal-hero {
    margin-bottom: 38px;
    text-align: left;
  }

  .legal-hero h1 {
    margin-top: 12px;
    font-size: 38px;
    line-height: 1.08;
  }

  .legal-hero > p:not(.legal-updated) {
    margin: 0;
    font-size: 16px;
  }

  .legal-content {
    font-size: 16px;
  }

  .legal-section {
    padding: 34px 0;
  }

  .legal-section h2 {
    font-size: 28px;
  }

  .legal-section--request {
    padding: 22px 18px;
  }

  .legal-section__route {
    display: grid;
    grid-template-columns: auto 18px auto 18px auto;
    gap: 6px;
    overflow: hidden;
  }

  .legal-section__route b {
    width: 18px;
  }

  .contact-request-form__grid {
    grid-template-columns: 1fr;
  }

  .contact-request-form .btn {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .legal-section__route {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
    overflow: visible;
  }

  .legal-section__route :is(span, strong) {
    align-items: start;
    white-space: normal;
  }

  .legal-section__route b {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-toc__group a,
  .contact-request-form :is(input, select, textarea) {
    transition-duration: .01ms;
  }
}