/*
  Curate Wine — User Agreements
  © Curate Software Corporation | https://legal.curate.wine

  DIRECTION CONTRACT
  THESIS         A legal agreement rendered as a citable instrument, not a docs page. Refuses the
                 category default (full-width grey wall of headings beside a framework sidenav) by
                 giving every clause a numeral in the margin, a permalink, and a fixed measure, and
                 by making the contents rail a reading instrument rather than a link list.
  OWN-WORLD      Inherited unchanged from app/DESIGN.md — Sandstone canvas, Rich Cream sheet built
                 from the app's live .c-card material (full 4-layer shadow, not the <noscript>
                 fallback's flattened line), Tyrian Purple glass chrome, Domaine Display 400
                 heads over Soehne body.
  STORY          A user arrives from a billing screen or a signup checkbox, lands on the clause they
                 were sent to, sees where it sits in the whole, and reads it without fighting the page.
  FIRST VIEWPORT Tyrian glass bar; sandstone below carrying eyebrow, Domaine title, hairline, document
                 strip; the Rich Cream sheet's top edge and first section break the fold.
  FORM           Marginal-rail statute layout, derived from the content (2 documents, 35 sections,
                 3 data tables). Pinned by brief.

  NAMESPACE SPLIT
    .c-doc / c-doc__*   Portable prose system. Lifts into the App's legal modal as-is; scopes under
                        `.c-note-modal .c-doc` with no renames. Depends on nothing outside itself
                        except the token block below.
    .c-legal-*          Page-only chrome (header, nav, rail, masthead, footer, back-to-top). Never ported.
*/

/* ==========================================================================
   1 · Faces
   Soehne is licensed at 400/400i/500/600/700; Domaine Display at 400 only.
   Heading hierarchy therefore comes from size, colour, and space — never weight.
   ========================================================================== */

@font-face {
  font-family: 'Domaine Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://static.curate.software/wine/brand/fonts/domaine-display--regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Soehne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://static.curate.software/wine/brand/fonts/soehne--buch.woff2') format('woff2');
}

@font-face {
  font-family: 'Soehne';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://static.curate.software/wine/brand/fonts/soehne--buch-kursiv.woff2') format('woff2');
}

@font-face {
  font-family: 'Soehne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://static.curate.software/wine/brand/fonts/soehne--kraftig.woff2') format('woff2');
}

@font-face {
  font-family: 'Soehne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://static.curate.software/wine/brand/fonts/soehne--halbfett.woff2') format('woff2');
}

@font-face {
  font-family: 'Soehne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://static.curate.software/wine/brand/fonts/soehne--dreiviertelfett.woff2') format('woff2');
}

/* ==========================================================================
   2 · Tokens
   ========================================================================== */

:root {
  /* Surfaces */
  --c-page:              #f5f4ef;  /* Sandstone — canvas */
  --c-surface:           #fbfaf6;  /* Rich Cream — the document sheet */
  --c-surface-recessed:  #f0ede9;  /* wells cut into the sheet: notices, table heads */
  --c-surface-row:       #f4f2ef;  /* table banding */

  /* Ink — ratios measured against both grounds; see §11 */
  --c-ink:               #2d2926;  /* 13.09 sandstone · 13.80 cream */
  --c-ink-secondary:     #615b54;  /*  6.09 sandstone ·  6.42 cream */
  --c-ink-tertiary:      #7d7670;  /*  4.06 / 4.28 — FAILS AA for normal text.
                                      Permitted only on non-text UI and >=24px display. */

  /* Edges */
  --c-border:            #e4e0db;
  --c-border-subtle:     #f0ede9;
  --c-border-strong:     #d1cdc7;
  --c-edge-sheen:        rgb(255 255 255 / 0.6);  /* the app card's light-catching edge */

  /* Brand */
  --c-tyrian:            #4d0834;
  --c-tyrian-deep:       #27071f;
  --c-tyrian-band:       #46022d;  /* app's second header band (app/src/sass/app/_global.scss) —
                                       keeps the header gradient inside the vivid Tyrian family
                                       instead of fading toward near-black */
  --c-accent:            #6f0c4a;
  --c-accent-hover:      #85175e;
  --c-accent-faint:      #c4b0bd;

  /* Chrome ink — on Tyrian ground */
  --c-chrome-ink:        #ffffff;  /* 18.48 on tyrian-deep */
  --c-chrome-ink-soft:   #e0cae0;  /* 12.05 */
  --c-chrome-ink-dim:    #b992ae;  /*  6.85 */

  /* Elevation — the live app .c-card 4-layer stack (app/src/sass/curate/_cards.scss),
     not the flattened single-shadow line the app's own <noscript> fallback settles for. */
  --c-shadow-sheet:      0 -1px 2px rgb(45 41 38 / 0.03), inset 0 1px 0 rgb(255 255 255 / 0.55),
                         0 1px 2px rgb(45 41 38 / 0.06), 0 14px 34px -24px rgb(45 41 38 / 0.13);
  --c-shadow-chrome:     0 10px 30px -18px rgb(39 7 31 / 0.55);

  /* Faces */
  --c-font-display:      'Domaine Display', 'Georgia Pro', Georgia, Baskerville, 'Times New Roman', serif;
  --c-font-body:         'Soehne', -apple-system, 'Segoe UI Variable', 'Segoe UI', 'Noto Sans',
                         'Helvetica Neue', Ubuntu, Roboto, Cantarell, ui-sans-serif, system-ui, sans-serif;
  --c-ff-default:        'kern' 1, 'liga' 1, 'calt' 1, 'ss02' 1, 'zero' 1;

  /* Metrics */
  --c-header-h:          5.5rem;
  --c-header-h-compact:  3.5rem;
  --c-scroll-offset:     5rem;    /* compact header + breathing room (WCAG 2.2 §2.4.11) */
  --c-rail-w:            15rem;
  --c-gutter:            3rem;    /* section numeral column inside the sheet */
  --c-measure:           66ch;
  --c-shell-max:         72rem;
  --c-ease:              cubic-bezier(0.22, 1, 0.36, 1);
  --c-ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);  /* back-out overshoot — approximates
                                                                 the spring motion on Fern's docs
                                                                 TOC indicator (no native CSS spring) */
}

/* ==========================================================================
   3 · Reset & page
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--c-scroll-offset);
}

body {
  margin: 0;
  background-color: var(--c-page);
  color: var(--c-ink);
  font-family: var(--c-font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.62;
  font-feature-settings: var(--c-ff-default);
  font-variant-numeric: lining-nums proportional-nums;
  font-synthesis: none;  /* Domaine ships at 400 only — refuse faux bold outright */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: calc(0.18em - 1px);
  transition: color 160ms ease;
}

a:hover {
  color: var(--c-accent-hover);
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background-color: rgb(111 12 74 / 0.14);
}

/* Anchor and focus targets clear the fixed header via `scroll-padding-top` on the root
   scroller above. Deliberately NOT paired with a `scroll-margin-top` on [id]: the two
   offsets stack, and it also covers focusable elements that carry no id at all — which
   is what WCAG 2.2 §2.4.11 actually asks for. */

.c-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Scroll marker for the header state — occupies the document origin, no layout cost. */
.c-legal-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.c-skip-link {
  position: absolute;
  top: 0;
  left: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background-color: var(--c-surface);
  color: var(--c-accent);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  box-shadow: var(--c-shadow-sheet);
  transform: translateY(-110%);
  transition: transform 180ms var(--c-ease);
}

.c-skip-link:focus-visible {
  transform: translateY(0);
}

/* ==========================================================================
   4 · Chrome — header
   Blur lives on the header element; the opaque gradient that hides it at rest lives on
   ::before and is the only thing whose opacity animates. Never animate opacity on a node
   carrying backdrop-filter (see web/css/curate.css:260 for the same constraint).
   ========================================================================== */

.c-legal-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  isolation: isolate;
  contain: layout;  /* the height transition can never escape the fixed subtree */
  background-color: rgb(77 8 52 / 0.86);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.c-legal-header.is-scrolled {
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
          backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: var(--c-shadow-chrome);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .c-legal-header {
    background-color: rgb(77 8 52 / 0.98);
  }
}

/* Both stops stay inside the vivid Tyrian family (app's own two-band header split is
   #4d0834 / #46022d, app/src/sass/app/_global.scss) rather than fading to near-black. */
.c-legal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(178deg, var(--c-tyrian) 0%, var(--c-tyrian-band) 100%);
  transition: opacity 320ms ease;
  pointer-events: none;
}

.c-legal-header.is-scrolled::before {
  opacity: 0;
}

.c-legal-header::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  height: 1px;
  background: linear-gradient(to right, transparent, rgb(185 146 174 / 0.4), transparent);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

.c-legal-header.is-scrolled::after {
  opacity: 1;
}

.c-legal-header__inner {
  position: relative;
  z-index: 2;
  max-width: var(--c-shell-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.c-legal-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--c-header-h);
  transition: height 340ms ease;
}

.c-legal-header.is-scrolled .c-legal-header__bar {
  height: var(--c-header-h-compact);
}

.c-legal-header__wordmark {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  border-radius: 4px;
}

.c-legal-header__wordmark img {
  width: 12rem;
  height: auto;
  transform-origin: left center;
  transition: transform 340ms ease;
}

/* Scaled down (rather than a smaller `width`) so the shrink stays a
   compositor-only transform during scroll — same technique as the base
   rule's transform-origin. 0.7 is calibrated so the scrolled-state size
   matches what it was before the base `width` grew (9.75rem * 0.86 ≈
   12rem * 0.7), not an independent shrink amount. */
.c-legal-header.is-scrolled .c-legal-header__wordmark img {
  transform: scale(0.7);
}

/* --- Reading progress: pure CSS, scroll-driven, invisible where unsupported --- */

.c-legal-progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 4;
  height: 3px;
  background-color: #d61a24;  /* brand red — the purple accent read too close to the header's own Tyrian to be visible */
  transform-origin: left center;
  scale: 0 1;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .c-legal-progress {
    animation: c-legal-progress-fill linear;
    animation-timeline: scroll(root block);
  }
}

@keyframes c-legal-progress-fill {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

/* ==========================================================================
   5 · Chrome — navigation
   ========================================================================== */

.c-legal-nav {
  display: none;
}

.c-legal-nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-legal-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--c-chrome-ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}

.c-legal-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  width: 100%;
  height: 2px;
  border-radius: 9999px;
  background-color: var(--c-chrome-ink-dim);
  translate: -50% 0;
  scale: 0 1;
  transition: scale 220ms ease-out, background-color 220ms ease-out;
}

.c-legal-nav__link:hover,
.c-legal-nav__link:focus-visible {
  color: var(--c-chrome-ink);
}

.c-legal-nav__link:hover::after {
  scale: 1 1;
  background-color: var(--c-chrome-ink);
}

.c-legal-nav__link[aria-current='page'] {
  color: var(--c-chrome-ink);
}

.c-legal-nav__link[aria-current='page']::after {
  scale: 0.5 1;
}

.c-legal-header :focus-visible {
  outline-color: var(--c-chrome-ink-soft);
}

/* --- Mobile disclosure: a <details>, so it works with JavaScript disabled --- */

.c-legal-menu {
  position: relative;
  flex-shrink: 0;
}

.c-legal-menu__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;   /* 44px — iOS HIG and WCAG 2.2 §2.5.8 */
  height: 2.75rem;
  margin-right: -0.625rem;
  border-radius: 8px;
  color: var(--c-chrome-ink);
  cursor: pointer;
  list-style: none;
}

.c-legal-menu__summary::-webkit-details-marker {
  display: none;
}

.c-legal-menu__summary svg {
  width: 1.375rem;
  height: 1.375rem;
}

.c-legal-menu__summary .c-legal-menu__icon--close,
.c-legal-menu[open] .c-legal-menu__summary .c-legal-menu__icon--open {
  display: none;
}

.c-legal-menu[open] .c-legal-menu__summary .c-legal-menu__icon--close {
  display: block;
}

/* position: fixed, not absolute — a backdrop-filter on a descendant of an element that
   already has its own backdrop-filter (the scrolled .c-legal-header's blur) silently fails
   to blur the page behind it in Chromium and WebKit both; it ends up sampling the header's
   already-composited layer instead of the real content, so no visible blur ever appeared.
   `position: fixed` gives the panel its own independent compositing context, which sidesteps
   the nested-backdrop-filter bug entirely. Confirmed live: with `absolute` the text behind
   stayed crisp at any opacity; with `fixed`, identical CSS otherwise, it blurs correctly.
   top/right below reconstruct the same visual position `top: calc(100% + 0.75rem)` /
   `right: -0.625rem` gave when relative to .c-legal-menu — fixed can't reference that
   ancestor, so they're rebuilt from the two things that actually determine it: the mobile
   header's fixed compact height and the summary button's own size. */
.c-legal-menu__panel {
  position: fixed;
  right: calc(clamp(1.25rem, 4vw, 2.5rem) - 0.625rem);
  top: calc((var(--c-header-h-compact) + 2.75rem) / 2 + 0.75rem);
  z-index: 5;
  min-width: 14rem;
  padding: 0.5rem;
  border: 1px solid rgb(185 146 174 / 0.28);
  border-radius: 14px;
  background-color: rgb(39 7 31 / 0.95);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6);
  list-style: none;
  margin: 0;
  transition: opacity 200ms var(--c-ease), translate 200ms var(--c-ease);
}

@supports (transition-behavior: allow-discrete) {
  .c-legal-menu__panel {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .c-legal-menu[open] .c-legal-menu__panel {
      opacity: 0;
      translate: 0 -0.5rem;
    }
  }
}

/* legal.js portals the panel out to <body> so its own backdrop-filter has a clean page
   behind it to sample, rather than the header's already-blurred layer (see the position:
   fixed comment above — this is the other half of that fix). Once portaled, it's no longer
   a descendant of <details>, so native open/close visibility no longer applies to it; this
   takes over that job instead, toggled by legal.js in sync with the <details>'s own
   'toggle' event. Only ever added by JS — the un-portaled, no-JS state above is unaffected. */
.c-legal-menu__panel--portaled {
  opacity: 0;
  visibility: hidden;
  translate: 0 -0.5rem;
  transition: opacity 200ms var(--c-ease), translate 200ms var(--c-ease), visibility 0ms 200ms;
}

.c-legal-menu__panel--portaled.is-open {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 200ms var(--c-ease), translate 200ms var(--c-ease);
}

.c-legal-menu__panel a {
  display: block;
  padding: 0.6875rem 0.875rem;
  border-radius: 9px;
  color: var(--c-chrome-ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.c-legal-menu__panel a:hover,
.c-legal-menu__panel a:focus-visible {
  background-color: rgb(255 255 255 / 0.08);
  color: var(--c-chrome-ink);
}

.c-legal-menu__panel a[aria-current='page'] {
  color: var(--c-chrome-ink);
  background-color: rgb(255 255 255 / 0.06);
}

@media (min-width: 62rem) {
  .c-legal-nav {
    display: block;
  }

  .c-legal-menu {
    display: none;
  }
}

/* Below the nav breakpoint the header is pinned compact and never animates its height.
   Overriding the token alone also corrects the masthead's top offset. A height transition
   here fights the iOS address bar (same constraint as web/css/curate.css:526). */
@media (max-width: 61.99rem) {
  :root {
    --c-header-h: 3.5rem;
    --c-scroll-offset: 4.5rem;  /* less clearance than the 5rem desktop default — landing lower on the page, closer under the compact mobile header, was the direction actually wanted */
  }

  .c-legal-header__bar {
    transition: none;
  }

  .c-legal-header.is-scrolled .c-legal-header__wordmark img {
    transform: none;
  }
}

/* ==========================================================================
   6 · Masthead
   ========================================================================== */

.c-legal-shell {
  max-width: var(--c-shell-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.c-legal-masthead {
  padding-top: calc(var(--c-header-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 46rem;
}

.c-legal-masthead__title {
  margin: 0;
  font-family: var(--c-font-display);
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.c-legal-masthead__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.c-legal-masthead__doc {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.c-legal-masthead__doc a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  width: fit-content;
}

.c-legal-masthead__doc a:hover {
  text-decoration: underline;
}

/* file-contract (ToS) / shield-keyhole (PP), FA Pro v7 — light at rest, solid on hover
   (reverts on hover-out, pure CSS). Two stacked currentColor <path> layers, swapped via
   opacity; no duotone/active-group state here (that lived on the TOC labels briefly and
   proved unnecessary — see ref--legal-shell.md). */
.c-legal-masthead__icon {
  flex-shrink: 0;
  height: 0.875rem;
  width: auto;
}

.c-legal-masthead__icon-path {
  transition: opacity 160ms ease;
}

.c-legal-masthead__icon-path--light {
  opacity: 1;
}

.c-legal-masthead__icon-path--solid {
  opacity: 0;
}

.c-legal-masthead__doc a:hover .c-legal-masthead__icon-path--light {
  opacity: 0;
}

.c-legal-masthead__doc a:hover .c-legal-masthead__icon-path--solid {
  opacity: 1;
}

.c-legal-masthead__stamp {
  color: var(--c-ink-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ==========================================================================
   7 · Layout — rail + sheet
   ========================================================================== */

.c-legal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-bottom: clamp(4rem, 8vw, 7rem);
  align-items: start;
}

@media (min-width: 68rem) {
  .c-legal-body {
    grid-template-columns: var(--c-rail-w) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

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

.c-legal-toc__heading {
  margin: 0 0 0.875rem;
  color: var(--c-ink-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-feature-settings: var(--c-ff-default), 'case' 1;
}

.c-legal-toc__groups {
  position: relative;
  margin: 0;
  padding-left: 0.9375rem;
  list-style: none;
  /* The rail doubles as a progress instrument: filled above the reader, plain below. */
  background:
    linear-gradient(
      to bottom,
      var(--c-accent-faint) var(--c-toc-progress, 0%),
      var(--c-border)       var(--c-toc-progress, 0%)
    )
    left 0 top 0 / 1px 100% no-repeat;
}

/* Spans every currently-visible tracked heading, not just the single "current" one — when
   two adjacent short sections are both in view the bar grows to cover both (legal.js keeps
   only one aria-current for assistive tech; this is a purely visual multi-in-view read). The
   spring-ish overshoot on both translate and height is the "bouncier" feel from Fern's docs
   TOC (inspected live: a 2px bar driven by --top/--height custom properties, animated by JS
   rather than a CSS transition — no timing values to copy, so this bezier approximates it). */
.c-legal-toc__groups::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: var(--c-toc-h, 0px);
  border-radius: 9999px;
  background-color: var(--c-accent);
  translate: 0 var(--c-toc-y, 0px);
  opacity: 0;
  transition: translate 420ms var(--c-ease-spring), height 420ms var(--c-ease-spring), opacity 200ms ease;
}

.c-legal-toc__groups.is-tracking::before {
  opacity: 1;
}

.c-legal-toc__group + .c-legal-toc__group {
  margin-top: 1.5rem;
}

.c-legal-toc__label {
  display: block;
  margin: 0 0 0.375rem;
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  color: var(--c-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
}

.c-legal-toc__label:hover {
  color: var(--c-accent);
}

.c-legal-toc__label[aria-current='true'] {
  color: var(--c-accent);
}

.c-legal-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-legal-toc__link {
  display: block;
  min-height: 1.75rem;  /* >=24px target, WCAG 2.2 §2.5.8 */
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  border-radius: 5px;
  color: var(--c-ink-secondary);
  font-size: 0.8125rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.c-legal-toc__link:hover {
  color: var(--c-ink);
  background-color: rgb(45 41 38 / 0.04);
}

.c-legal-toc__link[aria-current='true'] {
  color: var(--c-accent);
  font-weight: 500;
}

@media (min-width: 68rem) {
  .c-legal-toc {
    position: sticky;
    top: calc(var(--c-header-h-compact) + 1.5rem);
    max-height: calc(100dvh - var(--c-header-h-compact) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
    padding-bottom: 1rem;
  }

  .c-legal-toc::-webkit-scrollbar {
    width: 4px;
  }

  .c-legal-toc::-webkit-scrollbar-track {
    background: transparent;
  }

  .c-legal-toc::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background-color: var(--c-border);
  }
}

/* Below the rail breakpoint the whole thing folds into a disclosure. */
@media (max-width: 67.99rem) {
  .c-legal-toc {
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background-color: rgb(251 250 246 / 0.82);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
            backdrop-filter: blur(14px) saturate(1.1);
    box-shadow: var(--c-shadow-sheet);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .c-legal-toc {
      background-color: var(--c-surface);
    }
  }

  .c-legal-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    padding: 0.75rem 1.125rem;
    color: var(--c-ink);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
  }

  .c-legal-toc__summary::-webkit-details-marker {
    display: none;
  }

  .c-legal-toc__summary svg {
    width: 1rem;
    height: 1rem;
    color: var(--c-ink-secondary);
    transition: rotate 200ms var(--c-ease);
  }

  .c-legal-toc[open] .c-legal-toc__summary svg {
    rotate: 180deg;
  }

  /* Bounded so that with JavaScript off — where the disclosure stays open — 35 entries
     cannot bury the document they point at. */
  .c-legal-toc__panel {
    max-height: 55vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 1.125rem 1.25rem;
  }

  .c-legal-toc__heading {
    display: none;
  }

  /* The desktop rail's line-and-indicator is a live "you are here" instrument on a sticky
     panel that stays in view while scrolling — neither part of that premise holds once the
     rail is a disclosure the reader closes before scrolling past it. Simplify accordingly:
     drop the moving accent bar and the scroll-progress fill entirely (nothing left to
     indicate), and move the plain guide line from the outer .c-legal-toc__groups — where it
     ran the full list height, through the gap between policies — onto each policy's own
     .c-legal-toc__list, so it starts and ends with that policy's own sections. */
  .c-legal-toc__groups {
    padding-left: 0;
    background: none;
  }

  .c-legal-toc__groups::before {
    display: none;
  }

  /* margin-left + padding-left together (0.8125rem + 0.625rem = 1.4375rem) match the old
     0.5rem + 0.9375rem total exactly — the line (drawn at the margin/padding boundary)
     moves 5px right without shifting where the link text itself starts. */
  .c-legal-toc__list {
    margin-left: 0.8125rem;
    padding-left: 0.625rem;
    border-left: 1px solid var(--c-border);
  }

  /* No position indication at all on mobile, including per-item — not just the line/bar
     above. There's nothing to indicate once the disclosure is closed before scrolling past
     it, so an item styled as "current" the moment the panel is reopened would just be stale. */
  .c-legal-toc__link[aria-current='true'] {
    color: var(--c-ink-secondary);
    font-weight: 400;
  }

  .c-legal-toc__label[aria-current='true'] {
    color: var(--c-ink);
  }
}

@media (min-width: 68rem) {
  .c-legal-toc__summary {
    display: none;
  }
}

/* ==========================================================================
   8 · The document sheet
   Material is the live app .c-card, not its slimmed <noscript> fallback: Rich Cream,
   white edge sheen, the full 4-layer warm shadow stack (see --c-shadow-sheet, §2).
   The .c-card__head chevron sheen itself has no analogue here — it is scoped to a
   fixed-height head bar, and .c-doc has no such strip; the inset top-edge sheen line
   in --c-shadow-sheet carries the same "catches the light" read at document scale.
   ========================================================================== */

/* Page-only chrome: two independent .c-doc cards (one per agreement), not the single
   combined sheet the shell shipped with. Each card already draws its own border/shadow,
   so the gap between them is plain spacing — no divider rule needed. */
.c-legal-doc-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.c-doc {
  border: 1px solid var(--c-edge-sheen);
  border-radius: 16px;
  background-color: var(--c-surface);
  box-shadow: var(--c-shadow-sheet);
  padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.5rem);
  overflow-wrap: break-word;
}

.c-doc__agreement {
  counter-reset: c-doc-section;
}

.c-doc__title {
  margin: 0 0 0.75rem;
  font-family: var(--c-font-display);
  font-size: clamp(2rem, 4vw, 2.625rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* --- Sections ---
   The numeral hangs in the sheet's left gutter, the way a clause number sits in the
   margin of a printed statute. It is wayfinding, not an eyebrow: these sections are
   cited by number from the App, from support replies, and from the prose itself. */

.c-doc__section {
  --c-section-top: clamp(1.125rem, 2vw, 1.625rem);
  --c-heading-size: clamp(1.5rem, 2.4vw, 1.75rem);  /* shared with .c-doc__heading so the
                                                        § numeral's centering math (below)
                                                        tracks the heading at any viewport,
                                                        not just its desktop-max size */
  position: relative;
  counter-increment: c-doc-section;
  padding-top: var(--c-section-top);
  /* The id lives on this element, but its own top padding is dead space above the § numeral —
     landing here with only `scroll-padding-top` (§3 tokens) left that whole gap visible below
     the header, reading as "the prior section is still showing". This is not the stacking this
     file's WCAG 2.4.11 note warns against (that was two offsets pushing the SAME direction to
     160px); this one is negative, pulling the snap point down to cancel just the section's own
     padding so the landing spot sits right above the numeral instead of above the empty gutter. */
  scroll-margin-top: calc(-1 * var(--c-section-top));
}

.c-doc__section::before {
  content: '§ ' counter(c-doc-section);
  display: block;
  margin-bottom: 0.375rem;
  color: var(--c-accent);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums lining-nums;
}

@media (min-width: 48rem) {
  .c-doc__section {
    padding-left: var(--c-gutter);
  }

  .c-doc__section::before {
    position: absolute;
    left: 0;
    /* line-height: 1 on the numeral makes its own box exactly font-size tall, so centering
       against the heading's font-size (not its taller line-box, which includes leading
       above/below the glyphs) is just half the size delta between the two —
       --c-heading-size is shared with .c-doc__heading so this tracks it at any viewport.
       The trailing -1px is an eyeballed nudge so the numeral sits vertically centered
       with the heading beside it. */
    top: calc(var(--c-section-top) + (var(--c-heading-size) - 1rem) / 2 + 0.25rem - 1px);
    margin: 0;
  }
}

.c-doc__heading {
  margin: 0 0 1rem;
  font-family: var(--c-font-display);
  font-size: var(--c-heading-size);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Permalink — an icon, not the literal '&#167;' character. The glyph text stays in the DOM
   (font-size: 0 hides it) so the prose gate never registers this as a content edit; the icon
   is FA light link-simple, embedded once as a currentColor mask so hover/copy can recolor it
   without a second asset. A pure-CSS tooltip (::after) reuses the existing aria-label text
   rather than duplicating it in a new attribute — no JS needed for that part. */
.c-doc__anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;   /* 24px, WCAG 2.2 §2.5.8 */
  height: 1.5rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  border-radius: 5px;
  color: var(--c-accent-faint);
  font-size: 0;
  text-decoration: none;
  opacity: 0;
  transition: opacity 160ms ease, color 160ms ease, background-color 160ms ease;
}

.c-doc__anchor::before {
  content: '';
  display: block;
  width: 0.8125rem;
  height: 0.8125rem;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23fff' d='M0 256C0 150 86 64 192 64l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-48 0C103.6 96 32 167.6 32 256s71.6 160 160 160l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-48 0C86 448 0 362 0 256zm160 0c0-8.8 7.2-16 16-16l224 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-224 0c-8.8 0-16-7.2-16-16zM384 64c106 0 192 86 192 192S490 448 384 448l-48 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l48 0c88.4 0 160-71.6 160-160S472.4 96 384 96l-48 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l48 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23fff' d='M0 256C0 150 86 64 192 64l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-48 0C103.6 96 32 167.6 32 256s71.6 160 160 160l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-48 0C86 448 0 362 0 256zm160 0c0-8.8 7.2-16 16-16l224 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-224 0c-8.8 0-16-7.2-16-16zM384 64c106 0 192 86 192 192S490 448 384 448l-48 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l48 0c88.4 0 160-71.6 160-160S472.4 96 384 96l-48 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l48 0z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: background-color 160ms ease;
}

.c-doc__section:hover .c-doc__anchor,
.c-doc__anchor:focus-visible {
  opacity: 1;
}

.c-doc__anchor:hover {
  color: var(--c-accent);
  background-color: rgb(111 12 74 / 0.08);
}

/* Tooltip — "Copy link" at rest, "Copied!" while .is-copied. `content: 'Copy link'` lives
   here, not as a duplicate HTML attribute; the aria-label already carries the accessible
   name, so the visual tooltip is free to say something shorter and less repetitive. */
.c-doc__anchor::after {
  content: 'Copy link';
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  z-index: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background-color: var(--c-ink);
  color: var(--c-surface);
  font-family: var(--c-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  translate: -50% 0.1875rem;
  transition: opacity 140ms ease, translate 140ms ease;
}

.c-doc__anchor:hover::after,
.c-doc__anchor:focus-visible::after {
  opacity: 1;
  translate: -50% 0;
}

/* Copy feedback (legal.js): click copies the section's permalink; the icon swaps to a
   clipboard-check for ~1.6s, the tooltip echoes it, and the anchor stays visible even
   after the pointer leaves. */
.c-doc__anchor.is-copied {
  opacity: 1;
  color: var(--c-accent);
}

.c-doc__anchor.is-copied::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23fff' d='M248 0c22.3 0 41.6 13.1 50.6 32L320 32c35.3 0 64 28.7 64 64l0 352c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l21.4 0c9-18.9 28.3-32 50.6-32L248 0zM64 64C46.3 64 32 78.3 32 96l0 352c0 17.7 14.3 32 32 32l256 0c17.7 0 32-14.3 32-32l0-352c0-17.7-14.3-32-32-32l-16.6 0c-3.9 27.1-27.2 48-55.4 48l-112 0c-28.2 0-51.6-20.9-55.4-48L64 64zM259.1 218.2c5.2-7.1 15.2-8.7 22.3-3.5s8.7 15.2 3.5 22.3L179.3 382.2c-2.8 3.8-7.1 6.2-11.8 6.5s-9.3-1.4-12.6-4.8l-54.4-56.3c-6.1-6.4-6-16.5 .4-22.6s16.5-5.9 22.6 .4l41.2 42.6 94.4-129.8zM136 32c-13.3 0-24 10.7-24 24s10.7 24 24 24l112 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L136 32z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23fff' d='M248 0c22.3 0 41.6 13.1 50.6 32L320 32c35.3 0 64 28.7 64 64l0 352c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l21.4 0c9-18.9 28.3-32 50.6-32L248 0zM64 64C46.3 64 32 78.3 32 96l0 352c0 17.7 14.3 32 32 32l256 0c17.7 0 32-14.3 32-32l0-352c0-17.7-14.3-32-32-32l-16.6 0c-3.9 27.1-27.2 48-55.4 48l-112 0c-28.2 0-51.6-20.9-55.4-48L64 64zM259.1 218.2c5.2-7.1 15.2-8.7 22.3-3.5s8.7 15.2 3.5 22.3L179.3 382.2c-2.8 3.8-7.1 6.2-11.8 6.5s-9.3-1.4-12.6-4.8l-54.4-56.3c-6.1-6.4-6-16.5 .4-22.6s16.5-5.9 22.6 .4l41.2 42.6 94.4-129.8zM136 32c-13.3 0-24 10.7-24 24s10.7 24 24 24l112 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L136 32z'/%3E%3C/svg%3E");
}

.c-doc__anchor.is-copied::after {
  content: 'Copied!';
}

/* Touch devices get no hover, so the control has to stay visible — but below the gutter
   breakpoint 35 permanent glyphs are just noise on the narrowest screens, where the
   contents rail is the navigation anyway. */
@media (hover: none) and (min-width: 48rem) {
  .c-doc__anchor {
    opacity: 1;
  }
}

@media (max-width: 47.99rem) {
  .c-doc__anchor {
    display: none;
  }
}

/* --- Prose ---
   Justified per operator direction — reopens the deviation §4 of ref--legal-shell.md
   recorded (rivers at the old 74ch measure). `hyphens: auto` breaks up the rivers at
   this file's 66ch measure; table cells are plain text nodes, not <p>/<li>, so they are
   naturally excluded and keep their left-aligned .c-doc__table rule. */
.c-doc p,
.c-doc li {
  max-width: var(--c-measure);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.c-doc p {
  margin: 0 0 1.125rem;
}

.c-doc p:last-child {
  margin-bottom: 0;
}

.c-doc strong {
  font-weight: 600;
}

.c-doc em {
  font-style: italic;
}

/* A `<p><em>Label:</em></p>` opening a clause group is a sub-head, not a sentence. */
.c-doc__lede {
  margin-top: 2.25rem;
  color: var(--c-ink);
  font-size: 1.0625rem;
}

.c-doc__lede em {
  font-style: normal;
  font-weight: 600;
}

.c-doc__section > p:first-of-type.c-doc__lede,
.c-doc__lede:first-child {
  margin-top: 0;
}

/* Numbered clauses: the bold lead-in is a term, so give it its own optical line. */
.c-doc__clauses {
  margin: 0 0 1.125rem;
  padding: 0;
  list-style: none;
  counter-reset: c-doc-clause;
}

.c-doc__clauses > li {
  position: relative;
  counter-increment: c-doc-clause;
  margin-bottom: 1rem;
  padding-left: 2.5rem;
}

.c-doc__clauses > li::before {
  content: counter(c-doc-clause) '.';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  color: var(--c-ink-secondary);  /* tertiary would fail AA; these markers are content */
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.75;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

.c-doc__clauses > li:last-child {
  margin-bottom: 0;
}

.c-doc__clauses > li > strong:first-child {
  display: block;
  color: var(--c-ink);
}

/* --- Emphatic prose ---
   Statutory all-caps cannot be rewritten, so it is set for reading instead: a hair smaller,
   opened tracking, more leading. Kept at primary ink — this text is legally operative. */

.c-doc__caps {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.74;
  letter-spacing: 0.015em;
}

/* --- Notice: a well cut into the sheet, not a card sitting on it --- */

.c-doc__notice {
  margin-block: 1.75rem;
  padding: 1.25rem clamp(1rem, 3vw, 1.625rem);
  max-width: none;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background-color: var(--c-surface-recessed);
  box-shadow: inset 0 1px 2px rgb(45 41 38 / 0.05);
}

/* --- Tables --- */

.c-doc__table-region {
  margin-block: 1.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background-color: var(--c-surface);
}

.c-doc__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.c-doc__table th,
.c-doc__table td {
  /* Halved from 0.8125rem/1rem: with uniform per-cell padding, the outer edge (border to
     first/last cell's content) is already half the between-column gap (which sums two
     cells' padding) — halving both keeps that ratio and just tightens the whole table. */
  padding: calc(0.8125rem / 2) calc(1rem / 2);
  text-align: left;
  vertical-align: top;
}

/* No sticky header row: `overflow-x: auto` on the region makes it a scroll container on
   both axes, and its height equals its content, so a sticky <th> has nowhere to travel. */
.c-doc__table th {
  background-color: var(--c-surface-recessed);
  color: var(--c-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
}

.c-doc__table tbody tr + tr td {
  border-top: 1px solid var(--c-border-subtle);
}

.c-doc__table tbody tr:nth-child(even) td {
  background-color: var(--c-surface-row);
}

.c-doc__table td:first-child {
  font-weight: 500;
  min-width: 9rem;
}

.c-doc__table-region:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* --- Closing stamp ---
   Selector is `.c-doc p.c-doc__stamp`, not just `.c-doc__stamp`: the stamp is always the
   last <p> in its agreement, so `.c-doc p:last-child` (specificity 0,0,2,1 — class + pseudo-
   class + element) was silently zeroing this rule's plain-class margin-top (0,0,1,0) and
   collapsing the divider against the last paragraph. Matching that specificity exactly and
   declaring later in the file wins the tie, restoring the intended gap above the rule. */
.c-doc p.c-doc__stamp {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border-subtle);
  color: var(--c-ink-secondary);
  font-size: 0.875rem;
}

/* ==========================================================================
   9 · Footer & back-to-top
   ========================================================================== */

/* Rich Cream + an upward shadow, matching the app's .m-footer (app/src/sass/metronic/footer)
   instead of a flat top border — the shadow reads as the footer sitting on a lower plane. */
.c-legal-footer {
  background-color: var(--c-surface);
  box-shadow: -2px -8px 41px -14px rgb(45 41 38 / 0.15);
}

.c-legal-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: var(--c-shell-max);
  margin-inline: auto;
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
  color: var(--c-ink-secondary);
  font-size: 0.875rem;
}

@media (max-width: 61.99rem) {
  .c-legal-footer__inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;  /* copyright already follows the wordmark in DOM order, so stacking alone puts it on bottom */
  }
}

/* The app's own footer signature (app/src/js/metronic-layout.js) is unlinked; here it goes
   back to Home, same as the header wordmark, since it's the footer's only way back. */
.c-legal-footer__wordmark {
  display: block;
  line-height: 0;
  border-radius: 4px;
  transition: opacity 160ms ease;
}

.c-legal-footer__wordmark:hover {
  opacity: 0.7;
}

.c-legal-footer__wordmark img {
  height: 1rem;
  width: auto;
}

.c-legal-footer__copyright {
  margin: 0;
}

/* Light glass, matching the app's .m-scroll-top (app/src/sass/core/_global.scss) —
   the sheet sits on Sandstone here, not on a dark chrome ground, so the floating
   control reads as frosted white rather than the header's dark Tyrian glass. */
.c-legal-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.4);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.04);
  color: var(--c-ink-secondary);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
              opacity 240ms var(--c-ease), translate 240ms var(--c-ease);
}

.c-legal-top svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.c-legal-top:hover {
  background-color: rgb(255 255 255 / 0.6);
  border-color: rgb(255 255 255 / 0.75);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.1);
  color: var(--c-accent);
}

.c-legal-top:focus-visible {
  outline-color: var(--c-accent);
}

/* JS raises `.js` on <html>, then reveals the control only once the reader has left the top.
   With JS off the class never lands and the anchor simply stays available. */
.js .c-legal-top {
  opacity: 0;
  translate: 0 0.75rem;
  pointer-events: none;
}

.js .c-legal-top.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

/* ==========================================================================
   10 · Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .c-legal-progress {
    display: none;
  }
}

/* ==========================================================================
   11 · Print
   A legal agreement gets printed. Drop every piece of chrome and set it as a document.
   ========================================================================== */

@media print {
  .c-legal-header,
  .c-legal-toc,
  .c-legal-top,
  .c-skip-link,
  .c-legal-footer__wordmark {
    display: none !important;
  }

  html {
    scroll-padding-top: 0;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .c-legal-masthead {
    padding-top: 0;
  }

  .c-legal-body {
    display: block;
  }

  .c-doc {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .c-doc p,
  .c-doc li {
    max-width: none;
  }

  .c-doc__section,
  .c-doc__table-region,
  .c-doc__notice {
    break-inside: avoid;
  }

  .c-doc__heading,
  .c-doc__title {
    break-after: avoid;
  }

  .c-doc__table-region {
    overflow: visible;
  }

  .c-doc__table {
    min-width: 0;
  }

  .c-doc__anchor {
    display: none;
  }

  .c-doc a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    word-break: break-all;
  }
}