/* ==========================================================================
   Legal & support documents
   Shared, page-scoped styles for Privacy Policy, Terms of Use, Community
   Guidelines, Delete Account, Cancellation, Refund, Contact, Listener Terms
   and Safety Center.

   Every selector is namespaced under .legal-page or a .legal-* class, so
   nothing here can reach the rest of the site.

   Design notes
   ------------
   The one loud element is the hero: a Tokify call window with a live
   waveform, the same illustration on every page with a different badge
   glyph. Everything below it is deliberately quiet - hairline-ruled document
   sections, one shadow on the whole page (the contents card), one gradient
   (the hero wash). Lists are tinted rows rather than a dozen identical
   cards, so the page reads as a document that belongs to a product, not as a
   marketing page wearing a document's clothes.

   Palette note: no new colours. Everything resolves to a token declared in
   css/styles.css, or to a tint of one.
   ========================================================================== */

.legal-page {
  /* tints of --color-primary; kept here so a future theme can override once */
  --lg-wash: rgba(77, 66, 254, 0.05);
  --lg-wash-strong: rgba(77, 66, 254, 0.10);
  --lg-edge: rgba(77, 66, 254, 0.16);
  --lg-ink-edge: rgba(42, 42, 42, 0.08);

  --lg-rule: var(--color-border);
  --lg-gutter: 4.5rem;
  --lg-measure: 68ch;

  background-color: var(--color-white);
}

.legal-page main .container {
  max-width: 1120px;
}

/* ==========================================================================
   Hero
   Wash + one blurred blob behind a two-column grid: document title on the
   left, the call-window illustration on the right.
   ========================================================================== */

.legal-masthead {
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl) 0 calc(var(--space-3xl) + var(--space-md));
  background:
    radial-gradient(120% 140% at 88% 0%, var(--lg-wash-strong) 0%, rgba(77, 66, 254, 0) 62%),
    linear-gradient(180deg, var(--color-light-bg) 0%, var(--color-white) 100%);
  border-bottom: 1px solid var(--lg-rule);
}

/* the single decorative blob - soft, off-canvas, never behind body text */
.legal-masthead::before {
  content: '';
  position: absolute;
  top: -14rem;
  right: -10rem;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 61, 232, 0.16) 0%, rgba(106, 61, 232, 0) 70%);
  pointer-events: none;
}

.legal-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--space-3xl);
  align-items: center;
}

.legal-hero-text {
  min-width: 0;
}

.legal-label {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 0.3125rem 0.75rem;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--lg-edge);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.legal-title {
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--color-text);
  max-width: 16ch;
  margin-bottom: var(--space-lg);
}

.legal-standfirst {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--color-text-light);
  max-width: 54ch;
  margin-bottom: var(--space-xl);
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

.legal-meta span {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--lg-ink-edge);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.6);
}

/* --- Hero illustration ---------------------------------------------------- */

.legal-hero-art {
  justify-self: end;
  width: 100%;
  max-width: 22rem;
}

.legal-hero-art svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The call window drifts a couple of pixels - it is a live call, so the one
   piece of ambient motion on the page belongs to it. */
.legal-hero-art .lg-art-window {
  animation: lg-float 7s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.legal-hero-art .lg-art-badge {
  animation: lg-float 7s ease-in-out infinite;
  animation-delay: -3.5s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@keyframes lg-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* the waveform reads as audio level, staggered bar by bar */
.legal-hero-art .lg-wave-bar {
  animation: lg-wave 1.7s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.legal-hero-art .lg-wave-bar:nth-child(2)  { animation-delay: 0.12s; }
.legal-hero-art .lg-wave-bar:nth-child(3)  { animation-delay: 0.24s; }
.legal-hero-art .lg-wave-bar:nth-child(4)  { animation-delay: 0.36s; }
.legal-hero-art .lg-wave-bar:nth-child(5)  { animation-delay: 0.48s; }
.legal-hero-art .lg-wave-bar:nth-child(6)  { animation-delay: 0.60s; }
.legal-hero-art .lg-wave-bar:nth-child(7)  { animation-delay: 0.72s; }
.legal-hero-art .lg-wave-bar:nth-child(8)  { animation-delay: 0.84s; }
.legal-hero-art .lg-wave-bar:nth-child(9)  { animation-delay: 0.96s; }
.legal-hero-art .lg-wave-bar:nth-child(10) { animation-delay: 1.08s; }
.legal-hero-art .lg-wave-bar:nth-child(11) { animation-delay: 1.20s; }

@keyframes lg-wave {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1); }
}

/* One page-load sequence, not a reveal on every section. */
.legal-hero-text > * {
  animation: lg-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.legal-hero-text > *:nth-child(2) { animation-delay: 0.06s; }
.legal-hero-text > *:nth-child(3) { animation-delay: 0.12s; }
.legal-hero-text > *:nth-child(4) { animation-delay: 0.18s; }

@keyframes lg-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Document layout
   ========================================================================== */

.legal-doc {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: start;
}

.legal-doc--single {
  grid-template-columns: minmax(0, 1fr);
}

/* --- Contents card -------------------------------------------------------
   The only element on the page carrying a shadow. It is the one thing a
   reader reaches for repeatedly, so it is the one thing that lifts.        */

.legal-index {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: var(--space-lg);
  border: 1px solid var(--lg-rule);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-white);
  box-shadow: 0 1px 2px rgba(42, 42, 42, 0.04), 0 12px 28px -18px rgba(42, 42, 42, 0.35);
}

.legal-index-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--lg-rule);
}

.legal-index-title::before {
  content: '';
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: var(--lg-icon-contents) center / contain no-repeat;
  mask: var(--lg-icon-contents) center / contain no-repeat;
}

.legal-index-list {
  counter-reset: lg-index;
}

.legal-index-list li {
  counter-increment: lg-index;
}

.legal-index-list a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
  padding: 0.4375rem var(--space-sm);
  margin: 0 calc(var(--space-sm) * -1);
  border-radius: var(--border-radius-sm);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.legal-index-list a::before {
  content: counter(lg-index);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-light);
  transition: color 0.2s ease;
}

.legal-index-list a:hover,
.legal-index-list a:focus-visible {
  color: var(--color-primary);
  background-color: var(--lg-wash);
}

.legal-index-list a:hover::before,
.legal-index-list a:focus-visible::before {
  color: var(--color-primary);
}

/* Documents whose sections carry no numeral drop the index counters too. */
.legal-index-list--plain a {
  grid-template-columns: minmax(0, 1fr);
}

.legal-index-list--plain a::before {
  content: none;
}

/* --- Preamble ------------------------------------------------------------ */

.legal-intro {
  padding-bottom: var(--space-xl);
}

.legal-intro p {
  font-size: 1.1875rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  max-width: 62ch;
}

.legal-intro p:last-child {
  margin-bottom: 0;
  color: var(--color-text-light);
}

/* ==========================================================================
   Sections
   The numeral sits in a tinted chip in its own gutter, so clause text keeps
   one clean left edge all the way down the document.
   ========================================================================== */

.legal-body {
  counter-reset: lg-section;
}

.legal-section {
  counter-increment: lg-section;
  margin-top: var(--space-xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--lg-rule);
  scroll-margin-top: 96px;
}

.legal-heading {
  display: grid;
  grid-template-columns: var(--lg-gutter) minmax(0, 1fr);
  align-items: center;
  margin-bottom: var(--space-lg);
}

.legal-heading::before {
  content: counter(lg-section);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--lg-edge);
  border-radius: var(--border-radius-md);
  background-color: var(--lg-wash);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

.legal-heading span {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-text);
}

.legal-body--unnumbered .legal-heading {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

/* an accent rule instead of the numeral, so unnumbered documents keep a
   visible section marker */
.legal-body--unnumbered .legal-heading::before {
  content: '';
  width: 2.25rem;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.legal-body--unnumbered .legal-prose,
.legal-body--unnumbered .legal-lead {
  padding-left: 0;
}

.legal-lead {
  padding-left: var(--lg-gutter);
  margin-bottom: var(--space-lg);
  font-size: 1.0625rem;
  color: var(--color-text-light);
  line-height: 1.75;
  max-width: var(--lg-measure);
}

/* --- Prose --------------------------------------------------------------- */

.legal-prose {
  padding-left: var(--lg-gutter);
}

.legal-prose > * {
  max-width: var(--lg-measure);
}

.legal-prose p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}

/* sub-headings get a short accent bar in the margin rather than a bolder size */
.legal-prose h3 {
  position: relative;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.legal-prose h3::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 0.5em;
  width: 0.625rem;
  height: 2px;
  border-radius: 999px;
  background-color: var(--color-primary);
}

.legal-prose h3:not(:first-child) {
  margin-top: var(--space-xl);
}

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

.legal-prose strong {
  color: var(--color-text);
  font-weight: 500;
}

.legal-prose a,
.legal-link {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease, background-color 0.2s ease;
  border-radius: 2px;
}

.legal-prose a:hover,
.legal-link:hover {
  color: var(--color-primary-dark);
  background-color: var(--lg-wash);
}

/* ==========================================================================
   Lists
   Tinted rows with a waveform-style marker: three short bars, a nod to the
   audio level in the hero. Not twelve identical cards.
   ========================================================================== */

.legal-list {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.legal-list > li {
  position: relative;
  padding: var(--space-md) var(--space-lg) var(--space-md) 2.5rem;
  border: 1px solid var(--lg-rule);
  border-radius: var(--border-radius-md);
  background-color: var(--color-light-bg);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-light);
}

.legal-list > li::before {
  content: '';
  position: absolute;
  left: var(--space-md);
  top: 1.55em;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--color-primary);
  -webkit-mask: var(--lg-icon-wave) center / contain no-repeat;
  mask: var(--lg-icon-wave) center / contain no-repeat;
}

.legal-list > li strong {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--color-text);
  font-weight: 500;
}

.legal-list > li p {
  font-size: inherit;
  margin-bottom: var(--space-sm);
}

.legal-list > li p:last-child {
  margin-bottom: 0;
}

/* Short scannable items (prohibited conduct etc.) stay as a plain list -
   forty tinted rows in a row would be worse than none. */
.legal-list--tight {
  gap: 0;
}

.legal-list--tight > li {
  padding: var(--space-sm) 0 var(--space-sm) 1.75rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: 1rem;
}

.legal-list--tight > li + li {
  border-top: 1px solid var(--lg-rule);
}

.legal-list--tight > li::before {
  left: 0;
  top: 1.15em;
  width: 0.625rem;
  height: 0.625rem;
}

/* Numbered clauses (indemnity etc.) - digit replaces the wave icon. */
.legal-list--numbered {
  counter-reset: legal-item;
}

.legal-list--numbered > li {
  counter-increment: legal-item;
}

.legal-list--numbered > li::before {
  content: counter(legal-item) '.';
  top: var(--space-sm);
  width: auto;
  height: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
  color: var(--color-primary);
  font-weight: 500;
}

/* ==========================================================================
   Numbered clauses
   For documents written as clauses rather than prose - the number hangs in
   the same gutter the section numerals use, so a clause and a paragraph share
   one left edge all the way down the page.
   ========================================================================== */

.legal-clauses {
  counter-reset: lg-clause;
  margin-bottom: var(--space-lg);
}

.legal-clauses > li {
  counter-increment: lg-clause;
  position: relative;
  padding-left: var(--lg-gutter);
  margin-bottom: var(--space-lg);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-light);
  max-width: var(--lg-measure);
}

.legal-clauses > li::before {
  content: counter(lg-section) "." counter(lg-clause);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 2.2;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

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

.legal-clauses > li strong {
  color: var(--color-text);
  font-weight: 500;
}

/* A clause that opens with its own title puts that title on its own line. */
.legal-clauses > li > strong:first-child {
  display: block;
}

/* Documents whose first numbered section is 2, because their preamble is
   section 1 and carries no heading. Offsets the section numerals and the
   matching contents numbers together, so the two never drift apart. */
.legal-doc--from-two .legal-body {
  counter-reset: lg-section 1;
}

.legal-doc--from-two .legal-index-list {
  counter-reset: lg-index 1;
}

/* Nested clauses (1.1.1, 1.1.2 ...) sit inside a tinted block, so a nested
   list reads as part of its parent clause rather than as a new section. */
.legal-subclauses {
  counter-reset: lg-subclause;
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  border-left: 2px solid var(--lg-edge);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  background-color: var(--color-light-bg);
}

.legal-subclauses > li {
  counter-increment: lg-subclause;
  position: relative;
  padding-left: 3.5rem;
  margin-bottom: var(--space-md);
  font-size: 1rem;
  line-height: 1.7;
}

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

.legal-subclauses > li::before {
  content: counter(lg-section) "." counter(lg-clause) "." counter(lg-subclause);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 2.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-light);
}

/* Long unbreakable tokens - email addresses, URLs - must wrap rather than push
   the page sideways on a narrow screen. Grid items also need min-width: 0, or
   the track floors at the item's min-content width and overflows the viewport.
   reset.css already does this for <p> and headings; list and card rows need it
   too. */
.legal-list > li,
.legal-defs > div,
.legal-defs dd,
.legal-clauses > li,
.legal-subclauses > li,
.legal-steps > li,
.legal-related-list a {
  min-width: 0;
  overflow-wrap: break-word;
}

/* --- Steps ---------------------------------------------------------------- */

.legal-steps {
  counter-reset: lg-step;
  margin-bottom: var(--space-lg);
  padding-left: 0.8125rem;
  border-left: 1px dashed var(--lg-edge);
}

.legal-steps > li {
  counter-increment: lg-step;
  position: relative;
  padding: 0 0 var(--space-lg) 2.25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-light);
}

.legal-steps > li::before {
  content: counter(lg-step);
  position: absolute;
  left: -0.8125rem;
  top: 0;
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-white);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-white);
}

.legal-steps > li:last-child {
  padding-bottom: 0;
}

/* ==========================================================================
   Definition cards
   Two columns on desktop, stacked on mobile. The term sits on a tinted
   surface so a long run of them still scans.
   ========================================================================== */

.legal-defs {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  max-width: var(--lg-measure);
}

.legal-defs > div {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--lg-rule);
  border-radius: var(--border-radius-md);
  background-color: var(--color-white);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.legal-defs > div:hover {
  border-color: var(--lg-edge);
  background-color: var(--lg-wash);
}

.legal-defs dt {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
}

.legal-defs dd {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-light);
}

/* ==========================================================================
   Callouts
   A notice card: tinted surface, coloured edge, one icon. Three severities.
   ========================================================================== */

.legal-callout {
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 3.25rem;
  margin-bottom: var(--space-lg);
  max-width: var(--lg-measure);
  border: 1px solid var(--lg-edge);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--border-radius-md);
  background-color: var(--lg-wash);
}

.legal-callout::before {
  content: '';
  position: absolute;
  left: var(--space-lg);
  top: var(--space-lg);
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--color-primary);
  -webkit-mask: var(--lg-icon-info) center / contain no-repeat;
  mask: var(--lg-icon-info) center / contain no-repeat;
}

.legal-callout p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: var(--space-sm);
}

.legal-callout p:last-child {
  margin-bottom: 0;
}

.legal-callout strong {
  color: var(--color-text);
  font-weight: 500;
}

.legal-callout--warning {
  border-color: rgba(245, 158, 11, 0.3);
  border-left-color: var(--color-warning);
  background-color: rgba(245, 158, 11, 0.07);
}

.legal-callout--warning::before {
  background-color: #B45309;
  -webkit-mask-image: var(--lg-icon-warning);
  mask-image: var(--lg-icon-warning);
}

.legal-callout--critical {
  border-color: rgba(239, 68, 68, 0.28);
  border-left-color: var(--color-error);
  background-color: rgba(239, 68, 68, 0.06);
}

.legal-callout--critical::before {
  background-color: #B91C1C;
  -webkit-mask-image: var(--lg-icon-critical);
  mask-image: var(--lg-icon-critical);
}

/* --- Table ---------------------------------------------------------------- */

.legal-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-lg);
  max-width: var(--lg-measure);
  border: 1px solid var(--lg-rule);
  border-radius: var(--border-radius-md);
}

.legal-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--lg-rule);
  line-height: 1.6;
  vertical-align: top;
}

.legal-table thead th {
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-light-bg);
}

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

.legal-table td {
  color: var(--color-text-light);
}

/* ==========================================================================
   Cross-links & closing note
   ========================================================================== */

.legal-related {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--lg-rule);
}

.legal-related-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.legal-related-title::before {
  content: '';
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: var(--lg-icon-contents) center / contain no-repeat;
  mask: var(--lg-icon-contents) center / contain no-repeat;
}

.legal-related-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-sm);
}

.legal-related-list a {
  display: block;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--lg-rule);
  border-radius: var(--border-radius-md);
  background-color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.legal-related-list a:hover,
.legal-related-list a:focus-visible {
  color: var(--color-primary);
  border-color: var(--lg-edge);
  background-color: var(--lg-wash);
}

.legal-note {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border: 1px solid var(--lg-rule);
  border-radius: var(--border-radius-md);
  background-color: var(--color-light-bg);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-light);
  max-width: var(--lg-measure);
}

.legal-note a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Icons (masks, so they inherit a token colour and can never go missing in a
   future theme)
   ========================================================================== */

.legal-page {
  --lg-icon-contents: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h2M4 12h2M4 18h2M10 6h10M10 12h10M10 18h10'/%3E%3C/svg%3E");
  --lg-icon-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 9v6M12 4v16M20 9v6'/%3E%3C/svg%3E");
  --lg-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5h.01'/%3E%3C/svg%3E");
  --lg-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19L12 3.5Z'/%3E%3Cpath d='M12 9.5v4.5M12 17.5h.01'/%3E%3C/svg%3E");
  --lg-icon-critical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.legal-page a:focus-visible,
.legal-page button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .legal-page *,
  .legal-page *::before,
  .legal-page *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .legal-hero-text > * {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .legal-hero-grid {
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--space-2xl);
  }

  .legal-doc {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

@media (max-width: 900px) {
  /* the illustration moves above the title and shrinks, rather than being
     dropped - it is what makes the page feel like part of the product */
  .legal-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .legal-hero-art {
    order: -1;
    justify-self: start;
    max-width: 14rem;
  }

  .legal-doc {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    padding-top: var(--space-2xl);
  }

  .legal-index {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .legal-index-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-lg);
  }
}

@media (max-width: 768px) {
  .legal-page {
    --lg-gutter: 3.5rem;
  }

  .legal-masthead {
    padding: var(--space-2xl) 0;
  }

  .legal-title {
    font-size: 2.125rem;
    letter-spacing: -0.03em;
    max-width: none;
  }

  .legal-standfirst {
    font-size: 1.0625rem;
  }

  .legal-index-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-intro p {
    font-size: 1.0625rem;
  }

  .legal-heading::before {
    width: 2.125rem;
    height: 2.125rem;
    font-size: 0.9375rem;
  }

  .legal-heading span {
    font-size: 1.25rem;
  }

  .legal-lead,
  .legal-prose p,
  .legal-list > li,
  .legal-steps > li,
  .legal-clauses > li {
    font-size: 1rem;
  }

  .legal-clauses > li::before {
    font-size: 0.8125rem;
    line-height: 2.15;
  }

  .legal-subclauses > li {
    padding-left: 3.25rem;
    font-size: 0.9375rem;
  }

  .legal-defs > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-md);
  }

  .legal-prose h3::before {
    display: none;
  }

  .legal-table th,
  .legal-table td {
    padding: var(--space-sm) var(--space-md);
  }
}

@media (max-width: 420px) {
  .legal-page {
    --lg-gutter: 0rem;
  }

  .legal-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    justify-items: start;
  }

  .legal-prose,
  .legal-lead {
    padding-left: 0;
  }

  .legal-clauses > li {
    padding-left: 0;
    padding-top: 1.5rem;
  }

  .legal-subclauses > li {
    padding-left: 0;
    padding-top: 1.35rem;
  }

  .legal-hero-art {
    max-width: 11rem;
  }

  .legal-callout {
    padding-left: 2.75rem;
  }

  .legal-list > li {
    padding-right: var(--space-md);
  }
}