/* ============================================================================
   legal.css — the single stylesheet for all four public legal documents:
       /Lawyer/Privacy  /Lawyer/Terms  /User/Privacy  /User/Terms

   WHY THIS LIVES IN components/ AND NOT IN Lawyer/CSS OR User/CSS
   ---------------------------------------------------------------
   CLAUDE.md forbids cross-importing between the Lawyer and User halves. That
   rule exists because the two halves have different auth conventions
   (makeAPIRequestWithRetry vs fetch + reloginHelper). These four pages make no
   API call, hold no session and are public, so the rule's rationale does not
   apply — and components/ is the sanctioned neutral zone (components/footer/
   is the existing precedent). Four copies of this file is exactly how the mess
   this replaces came to exist: User/CSS/privacy.css had already drifted from
   the Lawyer copy (margin-bottom 60px vs 80px, and it had lost
   `position:relative; min-height:100vh`, which is why the absolutely
   positioned footer behaved differently on the two halves).

   DESIGN DIRECTION — "The Instrument"
   -----------------------------------
   The page is not a card containing a policy. The page IS the document. One
   centred column of white paper on a faint blue-grey canvas; the table of
   contents sits in the left margin as a sticky gloss, the way a marginal note
   sits beside a statute. Section numbers are real text (findable, copyable,
   printable, citable) rather than CSS counters. The only ornament in the whole
   design is one 3px gold rule.

   TWO RULES THAT ARE LOAD-BEARING, NOT STYLISTIC
   -----------------------------------------------
   1. ANCHOR IDS ARE PERMANENT. Once a section id ships it must never change —
      the URLs are in the Chrome Web Store listing, in outbound email and in
      signed agreements. Reword a heading freely; never touch its id.
      legal.test.mjs holds a frozen manifest and fails if one disappears.
   2. NOTHING THAT CONTAINS POLICY PROSE MAY EVER BE HIDDEN. No virtualisation,
      no `display:none` filtering, no closed <details> around policy text.
      Ctrl/Cmd+F must find every word on the page. legal.test.mjs asserts it.

   NO DARK MODE — DELIBERATE
   -------------------------
   The entire Lawyer tree is light-only (Lawyer/CSS/trust.css records the same
   decision for the same reason). A dark policy page reached by clicking a link
   in a light footer reads as a rendering bug, not a feature. The cost is also
   not the colours — it is re-auditing all 18 contrast pairings against a dark
   surface, plus the focus ring, plus the table's opaque sticky column, plus
   the scroll-shadow gradients that hard-code rgba(255,255,255,0). Instead we
   declare `color-scheme: light` so browsers do not force-darken controls and
   scrollbars into an unreadable half-state, and every colour goes through a
   --lg-* token so that reversing this decision later is one additive
   @media (prefers-color-scheme: dark) block rather than a rewrite.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. TOKENS
   Contrast ratios below are computed with the WCAG 2.x relative-luminance
   formula (sRGB, 2.4 gamma) and are asserted in the comments so a future edit
   cannot quietly break one.

   REJECTED, and why — do not re-add these:
     #FFFFFF on #639BF1 (--color-primary) ....... 2.80:1  fails AA and even 3:1
     #FFFFFF on #4F7BF7 (--color-primary-dark) .. 3.81:1  "dark" isn't dark enough
     #639BF1 text on #FFFFFF .................... 2.80:1  never a link colour
     #94a3b8 on #FFFFFF ......................... 2.56:1  fails badly
     #64748b on #F6F8FC ......................... 4.48:1  fails AA by 0.02
     #d4af7a as text on white ................... 2.06:1  gold is DECORATION ONLY
     #007bff on #FFFFFF (what shipped before) ... 3.99:1  fails AA
--------------------------------------------------------------------------- */
:root {
  /* Type */
  --lg-font-head: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --lg-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --lg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Measure. 38rem = 608px; Open Sans at 17px averages ~8.5px per glyph, so
     ~71 characters — inside the 60-75 band. The page this replaces ran at
     1200px - 80px padding = ~130 characters, which was its single largest
     legibility defect. */
  --lg-measure: 38rem;
  --lg-wide: 48rem;
  /* The document's own padding. It has to be a token because the shell must
     widen the document COLUMN by exactly this much: the inner breakout grid's
     tracks add up to --lg-wide, and if the column is only --lg-wide then the
     padding eats into them and the measure silently comes out ~15% narrow. */
  --lg-doc-pad: clamp(1.5rem, 3vw, 3rem);

  /* Ink */
  --lg-ink:    #0A1628;   /* on paper 18.13:1  on shade 16.55:1  on panel 17.36:1 */
  --lg-body:   #1e293b;   /* on paper 14.63:1 */
  --lg-muted:  #475569;   /* on paper  7.58:1  on canvas 7.13:1  on shade 6.92:1 */
  --lg-faint:  #5B6B82;   /* on paper  5.43:1  on canvas 5.10:1 */

  /* Interactive. #2F5FA8 is --color-primary darkened until it earns its keep. */
  --lg-link:   #2F5FA8;   /* on paper  6.32:1  on canvas 5.94:1  on wash 5.51:1 */
  --lg-link-h: #1E4E96;   /* on paper  8.12:1  on wash 7.09:1 */

  /* Surfaces */
  --lg-paper:  #ffffff;
  --lg-canvas: #F6F8FC;
  --lg-wash:   #e8f0fe;
  --lg-panel:  #F8FAFF;
  --lg-shade:  #F1F5F9;

  /* Lines */
  --lg-line:   #e2e8f0;
  --lg-line-2: #cbd5e1;

  /* The only gold in the design. DECORATIVE HAIRLINES ONLY — never text,
     never state, never the sole carrier of meaning. */
  --lg-accent: #d4af7a;

  --lg-radius: 12px;
  --lg-radius-sm: 6px;

  /* Height of anything sticky at the top of the viewport. 0 on desktop
     because the header deliberately does NOT stick (see §4); 3.5rem below
     64rem where a slim bar does. Headings read it for scroll-margin-top. */
  --lg-sticky-h: 0px;

  color-scheme: light;
}


/* ---------------------------------------------------------------------------
   2. BASE
--------------------------------------------------------------------------- */

/* overflow-x: clip, NOT hidden. `overflow:hidden` on html/body creates a
   scroll container, which silently kills every `position: sticky` descendant —
   including the table of contents. clip does the same visual job without
   establishing a scroll container. */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.legal-page {
  margin: 0;
  overflow-x: clip;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--lg-canvas);
  color: var(--lg-body);
  font-family: var(--lg-font-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* Standard sticky footer. Replaces `.site-footer{position:absolute;bottom:5px}`
   plus the `.content{margin-bottom:80px}` hack it forced — a pairing that
   overlapped the last paragraph on a short viewport. */
.legal-main { flex: 1 0 auto; }
.legal-footer { flex-shrink: 0; }

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

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


/* ---------------------------------------------------------------------------
   3. SKIP LINK
   Genuinely off-screen when unfocused but still focusable — never
   `display:none` or `visibility:hidden`, which would remove it from the tab
   order and defeat the point. Moved with transform rather than `top` so the
   reveal is composited rather than a layout change.
--------------------------------------------------------------------------- */
.legal-skip {
  position: absolute;
  left: .75rem;
  top: .75rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .7rem 1.1rem;
  border-radius: 8px;
  background: var(--lg-ink);
  color: #fff;                       /* 18.13:1 */
  font: 600 .9375rem/1 var(--lg-font-body);
  text-decoration: none;
  transform: translateY(-250%);
}
.legal-skip:focus { transform: translateY(0); }


/* ---------------------------------------------------------------------------
   4. HEADER
   In flow, NOT position:fixed. The page this replaces used logo.css's
   `.header{position:fixed;top:1rem;left:2rem}`, which overlapped the document
   on scroll, and `.subtitle{color:#fff}`, which rendered white text on a
   #f5f5f5 page — invisible. Both are fixed here at the cause.

   The desktop header does not stick either: a 72px brand bar pinned over a
   25-page read costs 7% of a laptop viewport forever and buys nothing (the
   rail already carries "Top of document" and the Privacy/Terms switch). It
   also lets the scroll-spy express its rootMargin in percentages, so the
   observer never needs rebuilding on resize.
--------------------------------------------------------------------------- */
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  background: var(--lg-paper);
  border-bottom: 1px solid var(--lg-line);
}

.legal-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
.legal-brand-tile {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lg-radius);
  /* The wash the deleted inline <style> block was reaching for. */
  background: linear-gradient(135deg, rgba(99, 155, 241, .10), rgba(212, 175, 122, .10));
}
.legal-brand-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.legal-brand-text { display: flex; flex-direction: column; gap: .1rem; }
.legal-brand-name {
  font: 600 1.0625rem/1.2 var(--lg-font-head);
  letter-spacing: -.01em;
  color: var(--lg-ink);
}
.legal-brand-tag {
  font: 400 .75rem/1.2 var(--lg-font-body);
  color: var(--lg-muted);            /* 7.58:1 on paper */
}

.legal-docnav { display: flex; gap: .25rem; }
.legal-docnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .9rem;
  border-radius: var(--lg-radius-sm);
  font: 600 .9375rem/1 var(--lg-font-body);
  color: var(--lg-muted);
  text-decoration: none;
}
.legal-docnav a:hover { color: var(--lg-ink); background: var(--lg-canvas); }
.legal-docnav a[aria-current="page"] { color: var(--lg-link-h); background: var(--lg-wash); }

@media (max-width: 63.99rem) {
  :root { --lg-sticky-h: 3.5rem; }
  .legal-header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: .5rem 1rem;
    min-height: 3.5rem;
  }
  .legal-brand-tile { width: 34px; height: 34px; }
  .legal-brand-tag { display: none; }
}


/* ---------------------------------------------------------------------------
   5. MASTHEAD — title, metadata, notice, at-a-glance, change summary
--------------------------------------------------------------------------- */
.legal-masthead {
  max-width: var(--lg-wide);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) 0;
}

.legal-title {
  margin: 0;
  font-family: var(--lg-font-head);
  font-weight: 700;
  font-size: clamp(2rem, 1.45rem + 2.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.022em;
  color: var(--lg-ink);
}

/* The one piece of ornament in the whole design. */
.legal-title::after {
  content: '';
  display: block;
  width: 4rem;
  height: 3px;
  margin-top: 1rem;
  border-radius: 2px;
  background: var(--lg-accent);
}

/* A <dl>, not a sentence: these are genuinely name/value pairs, and a screen
   reader announces "Version, 3.0" instead of a floating string. */
.legal-meta {
  display: grid;
  gap: 1rem 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, max-content));
  margin: 1.75rem 0 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--lg-line);
  border-bottom: 1px solid var(--lg-line);
}
.legal-meta > div { min-width: 0; }
.legal-meta dt {
  margin-bottom: .2rem;
  font: 600 .6875rem/1.4 var(--lg-font-head);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lg-muted);
}
.legal-meta dd {
  margin: 0;
  font: 500 .9375rem/1.4 var(--lg-font-body);
  color: var(--lg-ink);
}

/* Shown only when Effective is later than Last updated — i.e. when a change
   is material enough to be announced before it takes effect. Conflating the
   two dates is a common trust failure, so they are separate fields and this
   band exists to explain a gap between them. */
.legal-notice {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--lg-panel);
  border: 1px solid var(--lg-line-2);
  border-radius: var(--lg-radius);
  font: 400 .9375rem/1.6 var(--lg-font-body);
  color: var(--lg-ink);              /* 17.36:1 on panel */
}

/* --- At a glance ---------------------------------------------------------
   Content, not navigation: it must print, and it must be the first
   substantive thing a screen-reader user hears after the title and dates.
   That is why it sits in the document column above the contents rather than
   inside the rail. */
.legal-glance {
  margin: 0 0 2rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--lg-panel);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
}
.legal-glance-title {
  margin: 0;
  font: 600 1.125rem/1.3 var(--lg-font-head);
  color: var(--lg-ink);
}
/* Echoes the rule under the document title rather than adding a second
   accent treatment. A left-edge colour bar here would have made three of
   them on one page, which is the templated look this design is avoiding. */
.legal-glance-title::after {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  margin-top: .55rem;
  border-radius: 1px;
  background: var(--lg-accent);
}
.legal-glance-note {
  margin: .75rem 0 1.25rem;
  font: 400 .875rem/1.6 var(--lg-font-body);
  color: var(--lg-muted);            /* 7.26:1 on panel */
}
.legal-glance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.legal-glance-row {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: .85rem;
  align-items: start;
  min-width: 0;
}
.legal-glance-icon {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: .15rem;
  fill: none;
  stroke: var(--lg-link);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.legal-glance-row strong {
  display: block;
  font: 600 .9375rem/1.45 var(--lg-font-head);
  color: var(--lg-ink);
}
.legal-glance-row span {
  display: block;
  font: 400 .9375rem/1.6 var(--lg-font-body);
  color: var(--lg-muted);
}
.legal-glance-link {
  display: inline-block;
  margin-top: .3rem;
  font: 600 .8125rem/1 var(--lg-font-body);
  color: var(--lg-link);
}
@media (min-width: 48rem) {
  .legal-glance-list { grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; }
}

/* --- Change summary ------------------------------------------------------
   The ONLY <details> on the page, and it is legitimate here precisely because
   it contains a summary OF changes, not policy text — collapsing it hides
   nothing from Ctrl+F that matters. Closed by default: a returning reader
   wants it, a first-time reader does not. */
.legal-changes {
  margin: 0 0 2.5rem;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  background: var(--lg-paper);
}
.legal-changes > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .65rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font: 600 .9375rem/1.4 var(--lg-font-head);
  color: var(--lg-ink);
  border-radius: var(--lg-radius);
}
.legal-changes > summary::-webkit-details-marker { display: none; }
.legal-changes > summary::before {
  content: '';
  width: .5rem;
  height: .5rem;
  flex-shrink: 0;
  border-right: 2px solid var(--lg-link);
  border-bottom: 2px solid var(--lg-link);
  transform: rotate(-45deg);
  margin-left: .2rem;
}
.legal-changes[open] > summary::before { transform: rotate(45deg); }
.legal-changes > summary:hover { background: var(--lg-canvas); }
.legal-changes > *:not(summary) { padding-inline: 1.1rem; }
.legal-changes > ul { margin: 0 0 .5rem; padding-left: 2.4rem; }
.legal-changes > ul li { margin-bottom: .5rem; font-size: .9375rem; }
.legal-changes > p { margin-top: 0; padding-bottom: 1rem; }

.legal-small { font: 400 .875rem/1.6 var(--lg-font-body); color: var(--lg-muted); }


/* ---------------------------------------------------------------------------
   6. SHELL + BREAKOUT GRIDS

   Every track is minmax(0, …) on purpose. The default minmax(auto, …) lets a
   wide child (a table, a 44-character OAuth scope string) push its track wider
   than the container — that is the actual root cause of page-level horizontal
   overflow in CSS grid, and it is what made the old page scroll sideways at
   360px on the gmail.modify scope URL.
--------------------------------------------------------------------------- */
.legal-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--lg-wide);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) clamp(3rem, 6vw, 5rem);
}

/* The rail layout needs rail (17.5rem) + gap (3.5rem) + document
   (48rem + 2 x padding) = about 75rem of content, so it cannot switch on until
   ~80rem. An earlier draft switched at 64rem and the "1fr" rail column
   collapsed to ~29px at 1024px and ~226px at 1400px — narrow enough to wrap a
   section title over five lines. Between 64rem and 80rem the contents simply
   render inline above the document, which is what a printed document does. */
@media (min-width: 80rem) {
  .legal-shell {
    max-width: none;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    /* The whole assembly is centred, not the document alone: the contents are
       part of the page, not something floating in the margin. The document
       therefore sits slightly right of the viewport centre — which is exactly
       how a page with a marginal gloss reads. */
    grid-template-columns:
      [rail-start] 17.5rem
      [rail-end doc-start] minmax(0, calc(var(--lg-wide) + 2 * var(--lg-doc-pad)))
      [doc-end];
    justify-content: center;
    column-gap: clamp(2rem, 3vw, 3.5rem);
    align-items: start;
  }
  .legal-toc { grid-column: rail-start / rail-end; }
  .legal-doc { grid-column: doc-start / doc-end; }
}

/* Inner breakout grid: a text track at the measure, and a wider track that
   tables and panels can opt into with .legal-wide.

   The side tracks are 1fr, NOT a fixed (--lg-wide - --lg-measure)/2. A fixed
   track does not shrink: at 360px the two 80px gutters ate 160px of a 296px
   content box and the measure came out at 134px — a 16-character line. With
   1fr the gutters absorb whatever is spare and collapse to zero when there is
   none, and min() caps the text track at the measure when there is room. */
.legal-doc {
  display: grid;
  grid-template-columns:
    [wide-start] minmax(0, 1fr)
    [text-start] min(100%, var(--lg-measure)) [text-end]
    minmax(0, 1fr) [wide-end];
  justify-content: center;
  min-width: 0;
}
.legal-doc > *,
.legal-section > * { grid-column: text; min-width: 0; }
.legal-doc > .legal-wide,
.legal-section > .legal-wide { grid-column: wide; }

.legal-section {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  /* The <section> is the deep-link target (its id is what is published), so it
     is the element that needs the offset — not just its heading. */
  scroll-margin-top: calc(var(--lg-sticky-h) + 1.25rem);
}
/* subgrid is not universal; the fallback keeps children on the text track. */
@supports not (grid-template-columns: subgrid) {
  .legal-section {
    display: block;
    grid-column: text;
  }
  /* Without subgrid a .legal-wide child cannot reach the outer track, so it
     escapes symmetrically with negative margins instead — clamped so it can
     never be wider than the space actually available. */
  .legal-section > .legal-wide {
    margin-inline: calc(-1 * min(
      (var(--lg-wide) - var(--lg-measure)) / 2,
      (100% - var(--lg-measure)) / -2 + (var(--lg-wide) - var(--lg-measure)) / 2
    ));
  }
  @media (max-width: 79.99rem) {
    .legal-section > .legal-wide { margin-inline: 0; }
  }
}

/* A short rule, not a full one. A full-width rule between every one of 21
   sections makes a legal document look like a settings list. */
.legal-section + .legal-section::before {
  content: '';
  grid-column: text;
  display: block;
  width: 4rem;
  height: 1px;
  margin: 2.5rem 0 0;
  background: var(--lg-line);
}


/* ---------------------------------------------------------------------------
   7. TABLE OF CONTENTS
   Authored once, in the HTML, as real markup with real href="#id" links. It is
   never generated by JS, so it works with JS disabled and survives
   view-source.
--------------------------------------------------------------------------- */
.legal-toc {
  min-width: 0;
  margin: 0 0 2.5rem;
}
.legal-toc-title {
  margin: 0 0 .5rem;
  padding-left: .75rem;
  font: 600 .6875rem/1.4 var(--lg-font-head);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lg-muted);
}
.legal-toc-list,
.legal-toc-sub { list-style: none; margin: 0; padding: 0; }

.legal-toc-list a,
.legal-toc-sub a {
  display: flex;
  gap: .55rem;
  align-items: baseline;
  min-height: 2.5rem;                /* 40px + the 4px gap = a 44px pitch */
  padding: .5rem .75rem;
  border-radius: var(--lg-radius-sm);
  font: 500 .875rem/1.4 var(--lg-font-body);
  color: var(--lg-muted);
  text-decoration: none;
}
.legal-toc-num {
  flex-shrink: 0;
  min-width: 1.4em;
  font-variant-numeric: tabular-nums;
  color: var(--lg-faint);
}
.legal-toc-list a:hover,
.legal-toc-sub a:hover { color: var(--lg-ink); background: var(--lg-canvas); }
.legal-toc-list a[aria-current],
.legal-toc-sub a[aria-current] {
  color: var(--lg-link-h);           /* 7.09:1 on wash */
  background: var(--lg-wash);
  font-weight: 600;
}
.legal-toc-list a[aria-current] .legal-toc-num { color: var(--lg-link-h); }

.legal-toc-sub a { padding-left: 2.1rem; font-size: .8125rem; }

.legal-toc-foot { margin: .75rem 0 0; padding-left: .75rem; }
.legal-toc-foot a {
  font: 600 .8125rem/1 var(--lg-font-body);
  color: var(--lg-link);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 80rem) {
  .legal-toc {
    position: sticky;
    top: 2rem;
    width: 100%;
    max-width: 17.5rem;
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;    /* never chain the rail's scroll to the page */
    padding-right: .5rem;
    margin-bottom: 0;
  }
  .legal-toc-list {
    position: relative;
    border-left: 2px solid var(--lg-line);
  }
  /* The rail's left rule doubles as the reading-progress spine, so "where I
     am" and "how far in I am" are the same object. This replaces the
     top-of-viewport gradient bar, which is the most templated element in this
     entire genre and duplicates what the scrollbar already says. */
  .legal-toc-list::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--lg-link);
    border-radius: 1px;
    /* scaleY, not an animated height: height is a layout property and would
       thrash on every scroll frame. transform is composited. */
    transform: scaleY(var(--lg-progress, 0));
    transform-origin: top;
  }
  /* Progressive disclosure of sub-items. Navigation only — never document
     text — so native find over the policy is untouched. Without :has() the
     sub-lists simply stay visible, which is fine. */
  .js .legal-toc-sub { display: none; }
  .js .legal-toc-list > li:has(> a[aria-current]) .legal-toc-sub { display: block; }
}

/* --- Mobile: a bottom sheet, opened from a thumb-reachable pill ----------
   With JS off the nav renders inline as a plain complete contents list —
   exactly what a printed document does, costs nothing, fully usable. */
.legal-jump { display: none; }

@media (max-width: 63.99rem) {
  .js .legal-toc {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    max-height: 80dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: .5rem 1rem 1.5rem;
    background: var(--lg-paper);
    border-top: 1px solid var(--lg-line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(10, 22, 40, .16);
    transform: translateY(101%);
    visibility: hidden;
  }
  .js .legal-toc[data-open="true"] { transform: translateY(0); visibility: visible; }
  .js .legal-toc::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 4px;
    margin: .25rem auto .75rem;
    border-radius: 2px;
    background: var(--lg-line-2);
  }
  .js .legal-toc-list a,
  .js .legal-toc-sub a { min-height: 48px; font-size: .9375rem; }

  /* Bottom-RIGHT, not bottom-centre. A centred pill sits over the start of
     every line it covers; against the ragged right edge of a justified-left
     column it occludes far less, and it is still in the thumb arc. */
  .js .legal-jump {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    position: fixed;
    right: 1rem;
    bottom: 1.25rem;
    z-index: 55;
    transform: translateY(0);
    min-height: 48px;
    padding: .7rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--lg-link);
    color: #fff;                     /* 6.32:1 */
    font: 600 .875rem/1 var(--lg-font-body);
    box-shadow: 0 6px 20px rgba(10, 22, 40, .22);
    cursor: pointer;
  }
  .js .legal-jump[hidden] { display: none; }
  .js .legal-jump[data-visible="false"] {
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
  }
  .legal-jump-count { font-variant-numeric: tabular-nums; opacity: .82; }

  .js .legal-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(10, 22, 40, .38);
  }
  .js .legal-scrim[hidden] { display: none; }
}


/* ---------------------------------------------------------------------------
   8. PROSE

   The rhythm rule that makes this read as one document: the gap ABOVE a
   heading is always at least 2x the gap below it. That is what tells the eye a
   heading belongs to what follows. The stylesheet this replaces violated it
   everywhere (h2{margin-top:30px;margin-bottom:20px} — a 1.5x ratio), which is
   why its sections blurred together.
--------------------------------------------------------------------------- */
.legal-prose { color: var(--lg-body); text-wrap: pretty; }

/* The horizontal padding MUST be --lg-doc-pad: the shell sizes the document
   column as (--lg-wide + 2 x --lg-doc-pad), and if the two drift apart the
   measure silently narrows. */
.legal-doc {
  background: var(--lg-paper);
  padding: clamp(2rem, 4vw, 3.25rem) var(--lg-doc-pad);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
}
@media (max-width: 47.99rem) {
  :root { --lg-doc-pad: clamp(1rem, 4vw, 1.5rem); }
  .legal-doc { padding-top: 1.5rem; }
}
/* Clear the floating Contents pill, so the last clause of the document is not
   permanently parked underneath it. */
@media (max-width: 63.99rem) {
  .js .legal-doc { padding-bottom: 5.5rem; }
}

.legal-section > h2 {
  margin: 3.5rem 0 1rem;
  font-family: var(--lg-font-head);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.28rem + .5vw, 1.625rem);
  line-height: 1.28;
  letter-spacing: -.012em;
  color: var(--lg-ink);
  scroll-margin-top: calc(var(--lg-sticky-h) + 1.25rem);
  position: relative;
}
.legal-section:first-child > h2 { margin-top: 0; }

/* h3 is deliberately only 1px larger than body text. It separates by family,
   weight, colour and tracking instead of by size — which is what lets the
   Trust section nest three levels deep without the scale running out. */
.legal-section h3 {
  margin: 2.25rem 0 .65rem;
  font-family: var(--lg-font-head);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -.004em;
  color: var(--lg-ink);
  scroll-margin-top: calc(var(--lg-sticky-h) + 1.25rem);
  position: relative;
}

/* h4 is a LABEL, not a size step. */
.legal-section h4 {
  margin: 1.75rem 0 .4rem;
  font: 700 .8125rem/1.4 var(--lg-font-body);
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--lg-muted);
}

/* Real text, not a CSS counter: ::before content is not found by Ctrl+F, is
   not reliably copied to the clipboard, and would silently desynchronise from
   a hand-written TOC. legal.test.mjs asserts the numbers are contiguous and
   that each TOC number matches its heading. */
.legal-secnum {
  margin-right: .55em;
  font-family: var(--lg-font-head);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--lg-link);
}

.legal-section p { margin: 0 0 1.15em; }
.legal-section ul,
.legal-section ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.legal-section li { margin-bottom: .55rem; }
.legal-section li > ul,
.legal-section li > ol { margin: .55rem 0 0; }
.legal-section h2 + p,
.legal-section h3 + p,
.legal-section h2 + ul,
.legal-section h3 + ul { margin-top: 0; }

.legal-section strong { color: var(--lg-ink); font-weight: 600; }

.legal-prose a {
  color: var(--lg-link);             /* 6.32:1 */
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: break-word;         /* long URLs in prose must not overflow */
}
.legal-prose a:hover { color: var(--lg-link-h); }

/* Cross-reference. Legal prose says "as described below"; that is useless on a
   screen. Every such phrase becomes a real link. */
.legal-xref {
  white-space: nowrap;
  font-weight: 600;
  color: var(--lg-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Statutory citation as a first-class object. tabular-nums keeps section
   numbers aligned; nowrap stops "s 147" breaking across lines. */
.legal-cite {
  font-family: var(--lg-font-head);
  font-weight: 500;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--lg-ink);
  border-bottom: 1px dotted var(--lg-line-2);
}

/* OAuth scopes, table names, key names. This is the fix for the 360px
   horizontal overflow: https://www.googleapis.com/auth/gmail.modify is 44
   characters and renders wider than a 360px viewport at 17px bold.
   overflow-wrap: anywhere ONLY — never hyphens:auto, which would hyphenate
   statutory terms mid-word. */
.legal-scope {
  font-family: var(--lg-font-mono);
  font-size: .9em;
  overflow-wrap: anywhere;
  background: var(--lg-shade);
  border-radius: 4px;
  padding: .1em .35em;
  color: var(--lg-ink);              /* 16.55:1 on shade */
}

/* The contact block. The retired privacy.css gave this a 4px #007bff left
   edge; a hairline on all four sides reads as a card rather than a tab, and
   keeps the page down to one accent treatment. */
.legal-section address {
  font-style: normal;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--lg-shade);
  border: 1px solid var(--lg-line-2);
  border-radius: var(--lg-radius-sm);
  line-height: 1.8;
  color: var(--lg-ink);              /* 16.55:1 on shade */
}

/* --- Nested clause numbering, ported from the retired terms.css ----------
   Keep the type="a" / type="i" attributes in the markup: they are what these
   selectors match, they are the semantically correct way to express the list
   style, and they survive CSS being unavailable. */
.legal-clauses { counter-reset: clause; list-style: none; padding-left: 0; }
.legal-clauses > li {
  counter-increment: clause;
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: .9rem;
}
.legal-clauses > li::before {
  content: counter(clause) ".";
  position: absolute;
  left: 0;
  top: 0;
  font: 500 1em/1.72 var(--lg-font-head);
  font-variant-numeric: tabular-nums;
  color: var(--lg-link);
}
.legal-clauses[type="a"] > li::before { content: counter(clause, lower-alpha) ")"; }
.legal-clauses[type="i"] > li::before { content: counter(clause, lower-roman) ")"; }
.legal-clauses .legal-clauses { margin-block: .7rem; }

/* A CONTINUED list. A CSS counter cannot read the `start` attribute, so a list
   that resumes an earlier one has to be told where. The retired terms.css put
   `counter-reset: item` on every <ol> and never handled this, so the three
   clauses under "Duration of Provisions" — marked up as <ol start="3"> —
   rendered as 1. 2. 3. directly after a list that had ended at 2. The document
   read 1, 2, 1, 2, 3.

   Keep the `start` attribute in the markup: it is the semantically correct way
   to express a continued list, it is what these selectors match, and it still
   works with CSS unavailable. Only the values actually used need a rule;
   legal.test.mjs fails if a page uses a `start` this block does not cover. */
.legal-clauses[start="2"] > li { counter-increment: clause; }
.legal-clauses[start="2"] { counter-reset: clause 1; }
.legal-clauses[start="3"] { counter-reset: clause 2; }
.legal-clauses[start="4"] { counter-reset: clause 3; }
.legal-clauses[start="5"] { counter-reset: clause 4; }
.legal-clauses[start="6"] { counter-reset: clause 5; }
.legal-clauses[start="7"] { counter-reset: clause 6; }
.legal-clauses[start="8"] { counter-reset: clause 7; }
@media (max-width: 40rem) {
  .legal-clauses > li { padding-left: 1.9rem; }
}


/* ---------------------------------------------------------------------------
   9. FIGURE + TABLE

   Selection rule, stated once and applied forever:
     <=4 columns and cells are sentences -> card-stack below 40rem.
     >4 columns, or cells are short/numeric/codes -> horizontal scroll always.
   The trust inventory is 3 columns of sentences, so it stacks. The scroll
   container is specified too, because the next table will not be this one.
--------------------------------------------------------------------------- */
.legal-figure { margin: 2rem 0 2.5rem; }
.legal-figure figcaption {
  margin-bottom: .75rem;
  font: 600 .8125rem/1.4 var(--lg-font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lg-muted);
}

.legal-tablescroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  /* Pure-CSS edge shadows: the `local` layers are the paper-coloured masks
     that ride with the content, the `scroll` layers are the shadows that stay
     put — together they fade in only when there is more to see. */
  background:
    linear-gradient(to right, var(--lg-paper) 30%, rgba(255, 255, 255, 0)) left  / 2.5rem 100% no-repeat local,
    linear-gradient(to left,  var(--lg-paper) 30%, rgba(255, 255, 255, 0)) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0    50%, rgba(10, 22, 40, .13), rgba(10, 22, 40, 0)) left  / .85rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(10, 22, 40, .13), rgba(10, 22, 40, 0)) right / .85rem 100% no-repeat scroll;
}

.legal-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: separate;
  border-spacing: 0;
  font: 400 .9375rem/1.55 var(--lg-font-body);
  color: var(--lg-body);
}
.legal-table th,
.legal-table td {
  padding: .75rem .9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--lg-line);
}
.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table thead th {
  font: 600 .8125rem/1.3 var(--lg-font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lg-ink);              /* 16.55:1 on shade */
  background: var(--lg-shade);
  border-bottom: 1px solid var(--lg-line-2);
}
/* The column header deliberately does NOT stick. overflow-x:auto computes
   overflow-y to auto as well, making this a scroll container; `thead{top:0}`
   would then stick relative to a container that never scrolls vertically, and
   do nothing. Sticking thead to the PAGE is impossible from inside an overflow
   container. The ROW header sticks horizontally instead — that is the axis
   that is actually scrolling, and it is what helps at 360px. */
.legal-table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 11rem;
  background: var(--lg-paper);
  border-right: 1px solid var(--lg-line);
  font-weight: 600;
  color: var(--lg-ink);
}
.legal-tablehint {
  margin: .5rem 0 0;
  font: 400 .8125rem/1.5 var(--lg-font-body);
  color: var(--lg-muted);
}
@media (min-width: 48rem) { .legal-tablehint { display: none; } }

/* --- Card stack ---------------------------------------------------------- */
@media (max-width: 40rem) {
  .legal-table--stack,
  .legal-table--stack thead,
  .legal-table--stack tbody,
  .legal-table--stack tr,
  .legal-table--stack th,
  .legal-table--stack td { display: block; }

  .legal-table--stack { min-width: 0; }
  .legal-tablescroll { border: 0; border-radius: 0; background: none; }

  /* Visually hidden but still announced — the explicit ARIA roles in the
     markup are what keep table semantics alive once display:block has
     destroyed the implicit ones. */
  .legal-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .legal-table--stack tr {
    margin-bottom: .85rem;
    padding: .85rem 1rem;
    background: var(--lg-paper);
    border: 1px solid var(--lg-line);
    border-radius: 10px;
  }
  .legal-table--stack th[scope="row"] {
    position: static;
    min-width: 0;
    padding: 0 0 .55rem;
    margin-bottom: .55rem;
    border-right: 0;
    border-bottom: 1px solid var(--lg-line);
    font: 600 1rem/1.4 var(--lg-font-head);
    color: var(--lg-ink);
  }
  .legal-table--stack td { padding: .5rem 0 0; border-bottom: 0; }
  .legal-table--stack td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .1rem;
    font: 600 .6875rem/1.4 var(--lg-font-head);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--lg-muted);
  }
}


/* ---------------------------------------------------------------------------
   10. HEADING ANCHORS
   Injected by JS, so there is never a dead control with JS off.
--------------------------------------------------------------------------- */
.legal-anchor {
  position: absolute;
  left: -1.85em;
  top: .1em;
  font: 500 .9em/1 var(--lg-font-head);
  color: var(--lg-faint);
  text-decoration: none;
  opacity: 0;
}
.legal-anchor::before { content: ''; position: absolute; inset: -12px; }  /* 44px hit area */
.legal-section h2:hover > .legal-anchor,
.legal-section h3:hover > .legal-anchor,
.legal-anchor:focus-visible { opacity: 1; }
.legal-anchor:hover { color: var(--lg-link); }

/* Below the rail breakpoint there is no left gutter to hang the anchor in, so
   it goes inline. It still only appears on hover/focus — a persistent faint #
   beside every heading is noise on a pointer device. */
@media (max-width: 79.99rem) {
  .legal-anchor {
    position: static;
    margin-left: .45em;
    font-size: .8em;
  }
}
/* On touch there is no hover, so it has to be permanently visible or it is
   unreachable. */
@media (hover: none) {
  .legal-anchor { position: static; margin-left: .45em; font-size: .8em; opacity: .45; }
}

/* Single shared announcement region for "Link copied" and TOC filter counts. */
.legal-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   11. FOOTER
   Deliberately NOT components/footer/footer.html: that component links
   /features, #pricing, /aboutUs/, #documentation, #tutorials, #faq and
   #cookies — several of which are hash-only stubs or do not exist, and
   shipping dead links on a privacy policy is a trust defect. It also requires
   FontAwesome and ships an unguarded entrance animation.
--------------------------------------------------------------------------- */
.legal-footer {
  padding: 1.75rem clamp(1rem, 4vw, 2.5rem);
  background: var(--lg-canvas);
  border-top: 1px solid var(--lg-line);
  font: 400 .875rem/1.7 var(--lg-font-body);
  color: var(--lg-muted);            /* 7.13:1 on canvas */
  text-align: center;
}
.legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  justify-content: center;
  margin-bottom: .5rem;
}
.legal-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .25rem;
  color: var(--lg-link);             /* 5.94:1 on canvas */
  font-weight: 600;
  text-decoration: none;
}
.legal-footer-links a:hover { text-decoration: underline; }
.legal-footer-legal { margin: 0; }


/* ---------------------------------------------------------------------------
   12. FOCUS + MOTION
--------------------------------------------------------------------------- */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--lg-link);  /* >= 5.5:1 against every surface here */
  outline-offset: 2px;
  border-radius: 4px;
}
.legal-tablescroll:focus-visible { outline: 3px solid var(--lg-link); outline-offset: 2px; }
/* Nothing in this stylesheet may ever say `outline: none`. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .legal-skip { transition: transform .15s ease; }
  .legal-toc-list a,
  .legal-toc-sub a { transition: color .15s ease, background-color .15s ease; }
  .legal-toc-list::before { transition: transform .1s linear; }
  .legal-anchor { transition: opacity .15s ease; }
  .legal-changes > summary::before { transition: transform .18s ease; }
  .js .legal-toc { transition: transform .22s cubic-bezier(.4, 0, .2, 1), visibility .22s; }
  .js .legal-jump { transition: opacity .2s ease, transform .2s ease; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* The provenance line is print-only — which version is this, and when did I
   take it: the single most requested thing on a printed policy. With JS off
   the date span is empty and the sentence still reads.
   This rule MUST come BEFORE the @media print block: both declarations have
   the same specificity, so whichever is written last wins, and having it
   afterwards silently suppressed the line in print. */
.legal-printsource {
  display: none;
  margin-top: 2rem;
  padding-top: 6pt;
  border-top: .5pt solid #000;
  font-size: 8.5pt;
  line-height: 1.5;
}


/* ---------------------------------------------------------------------------
   13. PRINT

   Lawyers print policies. This is a first-class output, not an afterthought.

   The table of contents is KEPT and given its own page. A 25-page statutory
   instrument without a contents page is genuinely hard to use, and the TOC is
   the only navigation a paper copy can have. The interactive parts of it —
   progress spine, active state, hover, sticky, 44px rows — all go.
--------------------------------------------------------------------------- */
@media print {
  @page { margin: 18mm 16mm 20mm; }

  /* Override the TOKENS, not just body{color}. The prose colour is applied to
     .legal-prose, which outranks a rule on <body>, so `body { color: #000 }`
     alone left the printed text at #1e293b. Going through the tokens catches
     every element that reads one. */
  :root {
    --lg-measure: 100%;
    --lg-wide: 100%;
    --lg-sticky-h: 0px;
    --lg-ink: #000;
    --lg-body: #000;
    --lg-muted: #000;
    --lg-faint: #000;
    --lg-link: #000;
    --lg-link-h: #000;
    --lg-paper: #fff;
    --lg-canvas: #fff;
    --lg-panel: #fff;
    --lg-shade: #fff;
    --lg-wash: #fff;
  }

  html, body.legal-page {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    line-height: 1.5;
    display: block;
  }

  .legal-skip,
  .legal-header,
  .legal-jump,
  .legal-scrim,
  .legal-anchor,
  .legal-footer,
  .legal-tablehint,
  .legal-live,
  .legal-glance-link,
  .legal-toc-foot,
  .legal-toc-list::before { display: none !important; }

  .legal-masthead,
  .legal-shell,
  .legal-doc {
    display: block;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .legal-doc > *,
  .legal-section > *,
  .legal-wide { max-width: none; width: auto; margin-inline: 0; }
  .legal-section { display: block; }
  .legal-section + .legal-section::before { display: none; }

  /* The contents page. */
  .legal-toc {
    position: static !important;
    max-width: none;
    max-height: none;
    overflow: visible;
    transform: none !important;
    visibility: visible !important;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    break-after: page;
    page-break-after: always;
  }
  .legal-toc-list,
  .legal-toc-sub { display: block !important; }
  .legal-toc-list { border-left: 0; }
  .legal-toc-list a,
  .legal-toc-sub a {
    min-height: 0;
    padding: .1rem 0;
    color: #000;
    background: none;
    text-decoration: none;
    font-size: 10pt;
  }

  h1, h2, h3, h4 {
    color: #000;
    break-after: avoid-page;  page-break-after: avoid;
    break-inside: avoid;      page-break-inside: avoid;
  }
  h2 + p, h3 + p, h2 + ul, h2 + ol, h3 + ul, h3 + ol {
    break-before: avoid-page; page-break-before: avoid;
  }
  p, li, blockquote, figure, tr, address, .legal-glance, .legal-meta {
    break-inside: avoid; page-break-inside: avoid;
  }
  p, li { orphans: 3; widows: 3; }
  .legal-section { break-inside: auto; }   /* long sections MAY span pages */

  a { color: #000; text-decoration: underline; }
  .legal-prose a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-size: 8.5pt;
    font-weight: 400;
    word-break: break-all;
  }
  a[href^="#"]::after,
  a[href^="mailto:"]::after { content: ""; }
  abbr[title]::after { content: " (" attr(title) ")"; }

  .legal-glance, .legal-notice {
    background: none;
    border: 1pt solid #000;
    border-left-width: 1pt;
  }
  .legal-section address { background: none; border-left: 2pt solid #000; }
  .legal-scope { background: none; border: .5pt solid #666; }
  .legal-changes { border: 1pt solid #000; }
  .legal-changes > summary::before { display: none; }
  .legal-title::after { background: #000; }

  /* Undo the card stack — a printed narrow page still wants a real table. */
  .legal-tablescroll { overflow: visible; background: none; border: 0; }
  .legal-table,
  .legal-table--stack,
  .legal-table--stack thead,
  .legal-table--stack tbody,
  .legal-table--stack tr,
  .legal-table--stack th,
  .legal-table--stack td { display: revert !important; }
  .legal-table { border-collapse: collapse; width: 100%; min-width: 0; font-size: 9.5pt; }
  .legal-table thead { display: table-header-group; }   /* repeat on every page */
  .legal-table tfoot { display: table-footer-group; }
  .legal-table th,
  .legal-table td {
    border: .5pt solid #000;
    padding: 4pt 6pt;
    background: none !important;
    position: static !important;
  }
  .legal-table--stack td::before { content: none; }
  .legal-table--stack thead {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }

  .legal-printsource { display: block; }
}