/* ==========================================================================
   Support & legal pages - in the home page's colours
   Privacy Policy, Terms of Use, Community Guidelines, Delete Account,
   Refund, Contact Us, Listener Terms and Safety Center.

   Linked LAST on those eight pages, after css/legal.css (and, on Safety
   Center, css/safety-center.css). It changes no words and no layout logic.
   It re-points the tokens legal.css and safety-center.css are built on to
   the Tokify colour system in css/home.css, and restyles the shared parts
   so a document reads as part of the same site as the home page:

     - the masthead is the home hero's night: navy into blue, a sky and a
       violet light in the top corners, a coral dawn along its foot, and
       listening rings behind the call window
     - the document is a warm paper panel that rises over that night, the
       way the home About panel rises over the hero
     - the footer is the home page's own footer, joined to the paper the
       way the home closing band joins it: blue deepening into navy
     - the navbar is the home capsule - night glass while a night surface
       is under it (js/pages.js), paper glass over the document
     - headings take Poppins, as on the home page; reading copy stays Inter

   The documents take the home Safety section's stage of the journey -
   violet ink into blue - for links, markers, numerals and focus. Safety
   Center, which is laid out like a landing page, walks the cool half of
   the journey section by section, as the home page does.

   Every selector is under .legal-page (or is `html`, which only these
   pages reach, since only they load this file), so index.html, plans.html
   and cancellation.html are untouched. No text-transform is added and no
   text is generated: the copy renders exactly as written.
   ========================================================================== */

/* ==========================================================================
   Tokens
   ========================================================================== */

.legal-page {
  /* --- palette: the same values css/home.css declares for index.html --- */
  --tk-orange: #FF8A12;
  --tk-coral: #FF5E57;
  --tk-pink: #FF4797;
  --tk-violet: #6D5CF6;
  --tk-cobalt: #496CEF;
  --tk-sky: #38AEFA;
  --tk-aqua: #4DDAE9;
  --tk-sky-soft: #A4D8FE;

  --tk-violet-ink: #4F3CD4;
  --tk-violet-ink-hover: #3F2AB1;
  --tk-cobalt-ink: #304CCC;
  --tk-blue-ink: #1F5FD1;
  --tk-sky-ink: #0269A0;
  --tk-cyan-ink: #026E89;
  --tk-teal-ink: #0F766E;

  --tk-navy-950: #060E28;
  --tk-blue-900: #061748;
  --tk-blue-800: #092571;
  --tk-blue-700: #0E399A;
  --tk-indigo-600: #3D3AAF;
  --tk-navy-900: #091025;

  --tk-violet-50: #F1F2FE;
  --tk-wash-lavender: #F1E8FF;
  --tk-wash-periwinkle: #E9EBFF;
  --tk-wash-sky: #E2EEFF;
  --tk-wash-ice: #DBF1FF;
  --tk-wash-aqua: #CFF5FD;

  --tk-white: #FFFFFF;
  --tk-paper: #FFFCFA;
  --tk-surface: #FBF7F9;
  --tk-text: #1B1420;
  --tk-muted: #5D5666;
  --tk-dark: #16101D;

  --tk-orange-rgb: 255, 138, 18;
  --tk-coral-rgb: 255, 94, 87;
  --tk-pink-rgb: 255, 71, 151;
  --tk-magenta-rgb: 210, 47, 158;
  --tk-yellow-rgb: 255, 194, 61;
  --tk-violet-rgb: 109, 92, 246;
  --tk-cobalt-rgb: 73, 108, 239;
  --tk-blue-rgb: 79, 134, 240;
  --tk-sky-rgb: 56, 174, 250;
  --tk-cyan-rgb: 34, 195, 230;
  --tk-aqua-rgb: 77, 218, 233;
  --tk-teal-rgb: 20, 184, 166;
  --tk-paper-rgb: 255, 252, 250;
  --tk-text-rgb: 27, 20, 32;
  --tk-dark-rgb: 22, 16, 29;
  --tk-navy-900-rgb: 9, 16, 37;
  --tk-navy-700-rgb: 22, 43, 111;
  --tk-sky-soft-rgb: 164, 216, 254;

  /* the hero's night: white holds 8.6:1 or better on every stop */
  --tk-grad-hero: linear-gradient(120deg, var(--tk-navy-950) 0%, var(--tk-blue-900) 30%, var(--tk-blue-800) 55%,
    var(--tk-blue-700) 78%, var(--tk-indigo-600) 100%);
  --tk-grad-journey: linear-gradient(90deg, #FF8A12 0%, #FF5E57 12%, #FF4797 25%, #D22F9E 38%, #8B45E6 50%,
    #6D5CF6 62%, #496CEF 74%, #38AEFA 87%, #4DDAE9 100%);
  /* the primary action on light surfaces: deep pink > purple, white text 5:1+ */
  --tk-grad-ink-loop: linear-gradient(110deg, #D11A6A 0%, #A21C8A 40%, #6D28D9 70%, #D11A6A 100%);
  /* the primary action on the night: orange > coral > pink, dark text */
  --tk-grad-primary-loop: linear-gradient(110deg, #FFC23D 0%, #FF8A12 30%, #FF5E57 60%, #FF4797 100%, #FFC23D 140%);
  --tk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --pg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .033 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tk-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* --- the stage: violet ink into blue (a section may re-point these) -- */
  --tk-accent-rgb: var(--tk-violet-rgb);
  --tk-ink: var(--tk-violet-ink);
  --tk-ink-hover: var(--tk-violet-ink-hover);
  --tk-ink-to: var(--tk-blue-ink);
  --tk-tint: var(--tk-violet-50);

  /* --- semantic --------------------------------------------------------- */
  --tk-fg: var(--tk-text);
  --tk-fg-soft: var(--tk-muted);
  --tk-line: rgba(var(--tk-text-rgb), 0.09);
  --tk-line-strong: rgba(var(--tk-accent-rgb), 0.26);
  --tk-line-night: rgba(255, 255, 255, 0.12);
  --tk-on-night-soft: rgba(236, 242, 255, 0.86);
  --tk-on-night-faint: rgba(236, 242, 255, 0.72);
  --tk-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --tk-r-xl: clamp(28px, 3.2vw, 44px);   /* whole bands */
  --tk-r-lg: 28px;                        /* cards */
  --tk-r-md: 20px;                        /* inner panels */
  --tk-r-sm: 14px;                        /* tiles, rows */

  --tk-shadow-1: 0 1px 2px rgba(var(--tk-text-rgb), 0.04), 0 10px 28px -14px rgba(var(--tk-text-rgb), 0.16);
  --tk-shadow-2: 0 2px 6px rgba(var(--tk-text-rgb), 0.05), 0 34px 64px -28px rgba(var(--tk-text-rgb), 0.3);
  --tk-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- legal.css and safety-center.css, re-pointed ---------------------- */
  --color-primary: var(--tk-ink);
  --color-primary-dark: var(--tk-ink-hover);
  --color-primary-light: var(--tk-violet);
  --color-secondary: var(--tk-ink-to);
  --color-text: var(--tk-text);
  --color-text-light: var(--tk-muted);
  --color-border: rgba(var(--tk-text-rgb), 0.1);
  --color-light-bg: var(--tk-surface);
  --border-radius-sm: 10px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;

  --lg-wash: rgba(var(--tk-accent-rgb), 0.07);
  --lg-wash-strong: rgba(var(--tk-accent-rgb), 0.12);
  --lg-edge: rgba(var(--tk-accent-rgb), 0.26);
  --lg-ink-edge: rgba(var(--tk-text-rgb), 0.1);
  --lg-rule: var(--tk-line);

  color: var(--tk-fg);
  background-color: var(--tk-paper);
  overflow-x: hidden;            /* belt and braces against the decorative layers */
}

/* the overscroll bounce shows night, matching the masthead and footer */
html {
  scroll-padding-top: calc(var(--tk-nav-h, 4.5rem) + 1.5rem);
  background-color: #091025;
}

.legal-page h1,
.legal-page h2,
.legal-page h3,
.legal-page h4 {
  font-family: var(--tk-display);
  text-wrap: balance;
}

.legal-page p {
  text-wrap: pretty;
}

/* --- reading progress: the whole journey as a hairline across the top -----
   Scroll-driven, so it only exists where the browser supports that.     */
@supports (animation-timeline: scroll()) {
  .legal-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 260;
    height: 2px;
    background-image: var(--tk-grad-journey);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: pg-progress linear both;
    animation-timeline: scroll(root block);
    pointer-events: none;
  }

  @keyframes pg-progress {
    to { transform: scaleX(1); }
  }
}

/* ==========================================================================
   Navigation - the home capsule (refines the shared css/nav.css bar)
   ========================================================================== */

.legal-page .tk-nav {
  padding: 0.875rem 0;
}

.legal-page .tk-nav__inner {
  max-width: 68rem;
  margin-inline: auto;
  padding: 0 0.5rem 0 0.875rem;
  border-color: rgba(var(--tk-text-rgb), 0.07);
  background-color: rgba(var(--tk-paper-rgb), 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 1px 2px rgba(var(--tk-text-rgb), 0.04), 0 12px 32px -16px rgba(var(--tk-text-rgb), 0.22);
  transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease,
    max-width 0.6s var(--tk-ease);
}

.legal-page .tk-nav.is-stuck .tk-nav__inner {
  max-width: 64rem;
  border-color: rgba(var(--tk-text-rgb), 0.08);
  background-color: rgba(var(--tk-paper-rgb), 0.84);
}

/* the wordmark next to the logo tile, set like the logo itself */
.legal-page .tk-brand {
  color: var(--tk-fg);
}

.legal-page .tk-brand span {
  font-family: var(--tk-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color 0.45s ease;
}

.legal-page .tk-brand img {
  transition: transform 0.5s var(--tk-ease);
}

.legal-page .tk-brand:hover img {
  transform: rotate(-8deg) scale(1.06);
}

.legal-page .tk-nav__links {
  gap: 0.125rem;
}

.legal-page .tk-nav__links a {
  padding: 0.5rem 0.8125rem;
  font-size: 0.875rem;
  color: var(--tk-fg-soft);
  transition: color 0.3s ease, background-color 0.3s ease;
}

.legal-page .tk-nav__links a:hover {
  color: var(--tk-fg);
  background-color: rgba(var(--tk-text-rgb), 0.05);
}

.legal-page .tk-nav__burger:hover {
  background-color: rgba(var(--tk-text-rgb), 0.05);
}

.legal-page .tk-nav__burger span {
  background-color: var(--tk-fg);
}

/* --- over a night surface (js/pages.js adds .is-dark) ----------------- */

.legal-page .tk-nav.is-dark .tk-nav__inner {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(var(--tk-navy-900-rgb), 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px -18px rgba(0, 0, 0, 0.6);
}

.legal-page .tk-nav.is-dark .tk-brand {
  color: var(--tk-white);
}

.legal-page .tk-nav.is-dark .tk-nav__links a {
  color: var(--tk-on-night-soft);
}

.legal-page .tk-nav.is-dark .tk-nav__links a:hover {
  color: var(--tk-white);
  background-color: rgba(255, 255, 255, 0.09);
}

.legal-page .tk-nav.is-dark .tk-nav__burger span {
  background-color: var(--tk-white);
}

.legal-page .tk-nav.is-dark .tk-nav__burger:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* an open sheet is a light panel, so the bar above it goes light too */
.legal-page .tk-nav.is-dark.is-open .tk-nav__inner {
  border-color: rgba(var(--tk-text-rgb), 0.08);
  background-color: rgba(var(--tk-paper-rgb), 0.92);
}

.legal-page .tk-nav.is-dark.is-open .tk-brand {
  color: var(--tk-fg);
}

.legal-page .tk-nav.is-dark.is-open .tk-nav__burger span {
  background-color: var(--tk-fg);
}

/* --- mobile sheet ------------------------------------------------------ */

/* never taller than the screen: on a landscape phone the sheet scrolls
   instead of running off the bottom with the CTA out of reach */
.legal-page .tk-nav__sheet {
  max-height: calc(100vh - var(--tk-nav-h) - 1rem);
  max-height: calc(100dvh - var(--tk-nav-h) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.625rem;
  border-color: rgba(var(--tk-text-rgb), 0.07);
  border-radius: var(--tk-r-lg);
  background-color: rgba(var(--tk-paper-rgb), 0.95);
}

.legal-page .tk-nav__sheet ul a {
  min-height: 3.25rem;
  font-family: var(--tk-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--tk-fg);
}

.legal-page .tk-nav__sheet ul a:hover {
  color: var(--tk-ink);
  background-color: var(--tk-tint);
}

/* a quiet chevron: each row is a jump to a part of the home page */
.legal-page .tk-nav__sheet ul a::after {
  content: '';
  width: 0.4375rem;
  height: 0.4375rem;
  flex-shrink: 0;
  margin-right: 0.25rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.3;
  transition: transform 0.2s var(--tk-ease), opacity 0.2s ease;
}

.legal-page .tk-nav__sheet ul a:hover::after {
  opacity: 0.9;
  transform: translateX(2px) rotate(45deg);
}

/* the shared `.tk-nav__sheet a` row style also lands on the CTA and the
   store badges; put them back */
.legal-page .tk-nav__sheet .tk-btn {
  justify-content: center;
  min-height: 3.25rem;
  border-radius: 999px;
  color: var(--tk-white);
}

.legal-page .tk-nav__sheet .tk-btn:hover {
  color: var(--tk-white);
}

.legal-page .tk-nav__sheet .tk-store,
.legal-page .tk-nav__sheet .tk-store:hover {
  padding: 0;
  border-radius: 10px;
  background-color: transparent;
}

@keyframes pg-sheet-row {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.legal-page .tk-nav.is-open .tk-nav__sheet li,
.legal-page .tk-nav.is-open .tk-nav__sheet-foot {
  animation: pg-sheet-row 0.42s var(--tk-ease) both;
}

.legal-page .tk-nav.is-open .tk-nav__sheet li:nth-child(2) { animation-delay: 0.03s; }
.legal-page .tk-nav.is-open .tk-nav__sheet li:nth-child(3) { animation-delay: 0.06s; }
.legal-page .tk-nav.is-open .tk-nav__sheet li:nth-child(4) { animation-delay: 0.09s; }
.legal-page .tk-nav.is-open .tk-nav__sheet li:nth-child(5) { animation-delay: 0.12s; }
.legal-page .tk-nav.is-open .tk-nav__sheet li:nth-child(6) { animation-delay: 0.15s; }
.legal-page .tk-nav.is-open .tk-nav__sheet-foot { animation-delay: 0.18s; }

@media (max-width: 1040px) and (orientation: landscape) and (max-height: 540px) {
  .legal-page .tk-nav__sheet ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.25rem;
  }

  .legal-page .tk-nav__sheet-foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: center;
  }
}

@media (max-width: 1040px) {
  .legal-page .tk-nav__inner,
  .legal-page .tk-nav.is-stuck .tk-nav__inner {
    max-width: none;
  }
}

/* ==========================================================================
   Buttons - the home primary: deep pink into purple, a sheen on hover.
   Safety Center's two .cta-button links take the same look.
   ========================================================================== */

.legal-page .tk-btn,
.legal-page .cta-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.35s var(--tk-ease), box-shadow 0.35s var(--tk-ease),
    background-color 0.3s ease, background-position 0.7s var(--tk-ease),
    border-color 0.3s ease, color 0.3s ease;
}

.legal-page .tk-btn--primary,
.legal-page .cta-button {
  background-color: #A21C8A;
  background-image: var(--tk-grad-ink-loop);
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: var(--tk-white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 26px -10px rgba(var(--tk-magenta-rgb), 0.75);
}

.legal-page .tk-btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  z-index: -1;
  width: 35%;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}

.legal-page .tk-btn--primary:hover,
.legal-page .cta-button:hover {
  transform: translateY(-2px);
  background-color: #A21C8A;
  background-position: 70% 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 5px rgba(var(--tk-magenta-rgb), 0.16),
    0 20px 38px -12px rgba(var(--tk-magenta-rgb), 0.8);
}

.legal-page .tk-btn--primary:hover::after {
  left: 125%;
  transition: left 0.8s var(--tk-ease);
}

.legal-page .tk-btn:active,
.legal-page .cta-button:active {
  transform: translateY(0) scale(0.975);
  transition-duration: 0.08s;
}

/* Safety Center's link-buttons: animations.css gives them a sheen
   already; shape them as the home pill */
.legal-page .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.0625rem 1.75rem;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

/* ==========================================================================
   Masthead - the home hero's night
   ========================================================================== */

.legal-page .legal-masthead {
  isolation: isolate;
  padding-bottom: calc(clamp(3.5rem, 7vw, 5.5rem) + var(--tk-r-xl));
  border-bottom: 0;
  color: var(--tk-white);
  background:
    /* a sky light top-left, above the words, and a violet one top-right */
    radial-gradient(24% 44% at 0% 0%, rgba(var(--tk-sky-rgb), 0.3) 0%, rgba(var(--tk-sky-rgb), 0) 70%),
    radial-gradient(26% 50% at 100% 0%, rgba(var(--tk-violet-rgb), 0.45) 0%, rgba(var(--tk-violet-rgb), 0) 70%),
    /* a low dawn along the foot, where the paper rises */
    radial-gradient(44% 46% at 82% 100%, rgba(var(--tk-coral-rgb), 0.34) 0%, rgba(var(--tk-coral-rgb), 0) 70%),
    var(--tk-grad-hero);
}

/* legal.css's blob becomes the film grain of the home night surfaces */
.legal-page .legal-masthead::before {
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  border-radius: 0;
  background: var(--tk-grain);
  opacity: 0.06;
}

/* the paper rising over the night: a rounded lip along the foot */
.legal-page .legal-masthead::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: calc(var(--tk-r-xl) + 1px);
  border-radius: var(--tk-r-xl) var(--tk-r-xl) 0 0;
  background-color: var(--tk-paper);
  box-shadow: 0 -30px 60px -24px rgba(var(--tk-dark-rgb), 0.6);
  pointer-events: none;
}

.legal-page .legal-title {
  max-width: 17ch;
  font-size: clamp(2.25rem, 1.35rem + 3.3vw, 4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--tk-white);
}

/* the label: a glass pill with a warm live dot, as on the home hero */
.legal-page .legal-label {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.4375rem 0.9375rem 0.4375rem 0.75rem;
  margin-bottom: 1.5rem;
  border-color: rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
}

.legal-page .legal-label::before {
  content: '';
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--tk-orange);
  box-shadow: 0 0 0 3px rgba(var(--tk-orange-rgb), 0.2), 0 0 12px rgba(var(--tk-orange-rgb), 0.9);
}

.legal-page .legal-standfirst {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.72;
  color: var(--tk-on-night-soft);
}

.legal-page .legal-meta {
  color: var(--tk-on-night-soft);
}

.legal-page .legal-meta span {
  padding: 0.3125rem 0.8125rem;
  border-color: rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.06);
}

/* --- the call window, among listening rings ----------------------------
   The illustration draws with the --color-* tokens, so re-pointing them
   here recolours it: violet waveform, a pink-to-purple page badge (the
   primary action's colours). */
.legal-page .legal-hero-art {
  --color-primary: var(--tk-violet);
  --color-primary-light: #D11A6A;
  --color-secondary: #6D28D9;
  position: relative;
  isolation: isolate;
}

.legal-page .legal-hero-art svg {
  filter: drop-shadow(0 40px 46px rgba(var(--tk-dark-rgb), 0.5));
}

/* the still rings */
.legal-page .legal-hero-art::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 175%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle closest-side,
    rgba(var(--tk-sky-soft-rgb), 0) 0 calc(20% - 1px),
    rgba(var(--tk-sky-soft-rgb), 0.22) calc(20% - 1px) 20%);
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
  pointer-events: none;
}

/* and one ripple leaving the call every few seconds */
.legal-page .legal-hero-art::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1;
  margin: -35% 0 0 -35%;
  border: 1.5px solid rgba(var(--tk-sky-soft-rgb), 0.55);
  border-radius: 50%;
  opacity: 0;
  animation: pg-ripple 6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
  pointer-events: none;
}

@keyframes pg-ripple {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ==========================================================================
   The document - a paper panel, lit softly from the sides
   ========================================================================== */

/* clip, not hidden: the lights below reach past the page edge, and a
   phone would otherwise widen the page to hold them. Clip makes no scroll
   container, so the sticky contents card keeps working. */
.legal-page main {
  overflow-x: clip;
}

.legal-page .legal-doc {
  position: relative;
  isolation: isolate;
}

/* two soft lights, violet top right and blush further down the left. Each
   fades to nothing at its own edge, so the paper under the masthead's lip
   stays the same colour as the lip. */
.legal-page .legal-doc::before,
.legal-page .legal-doc::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.legal-page .legal-doc::before {
  top: 0;
  right: -18rem;
  width: 56rem;
  height: 46rem;
  background: radial-gradient(closest-side, rgba(var(--tk-violet-rgb), 0.1), rgba(var(--tk-violet-rgb), 0));
}

.legal-page .legal-doc::after {
  top: 30rem;
  left: -22rem;
  width: 50rem;
  height: 44rem;
  background: radial-gradient(closest-side, rgba(var(--tk-pink-rgb), 0.07), rgba(var(--tk-pink-rgb), 0));
}

/* where clip is unknown the lights would widen the page; go without them */
@supports not (overflow: clip) {
  .legal-page .legal-doc::before,
  .legal-page .legal-doc::after {
    display: none;
  }
}

/* --- contents card ----------------------------------------------------- */

.legal-page .legal-index {
  padding: 1.5rem;
  border-color: var(--tk-line);
  border-radius: var(--border-radius-lg);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--tk-shadow-1);
}

.legal-page .legal-index-title,
.legal-page .legal-related-title {
  font-family: var(--tk-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tk-ink);
}

.legal-page .legal-index-title {
  border-bottom-color: var(--tk-line);
}

.legal-page .legal-index-list a {
  color: var(--tk-fg-soft);
}

.legal-page .legal-index-list a:hover,
.legal-page .legal-index-list a:focus-visible {
  color: var(--tk-ink);
  background-color: var(--tk-tint);
}

/* the section being read (js/pages.js) */
.legal-page .legal-index-list a.is-current {
  font-weight: 500;
  color: var(--tk-ink);
  background-color: var(--tk-tint);
  box-shadow: inset 2px 0 0 var(--tk-ink);
}

.legal-page .legal-index-list a.is-current::before {
  color: var(--tk-ink);
}

/* --- preamble ---------------------------------------------------------- */

.legal-page .legal-intro p {
  color: var(--tk-fg-soft);
}

/* the first paragraph is the lead, set like the home About lead */
.legal-page .legal-intro p:first-child {
  font-family: var(--tk-display);
  font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.3125rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.012em;
  color: var(--tk-fg);
}

/* --- sections ---------------------------------------------------------- */

.legal-page .legal-section {
  border-top-color: var(--tk-line);
}

.legal-page .legal-heading span {
  font-size: clamp(1.3125rem, 1.1rem + 0.75vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.022em;
  color: var(--tk-fg);
}

/* the numeral sits in a filled tile, in the stage's ink */
.legal-page .legal-heading::before {
  border: 0;
  border-radius: var(--tk-r-sm);
  background-image: linear-gradient(135deg, var(--tk-ink) 0%, var(--tk-ink-to) 100%);
  font-family: var(--tk-display);
  font-weight: 600;
  color: var(--tk-white);
  box-shadow: 0 10px 22px -10px rgba(var(--tk-accent-rgb), 0.8);
}

/* unnumbered documents keep their short accent rule, in the same ink */
.legal-page .legal-body--unnumbered .legal-heading::before {
  width: 2.5rem;
  height: 3px;
  border-radius: 999px;
  box-shadow: none;
  background-image: linear-gradient(90deg, var(--tk-ink) 0%, var(--tk-ink-to) 60%, var(--tk-sky) 100%);
}

.legal-page .legal-lead {
  color: var(--tk-fg-soft);
}

.legal-page .legal-prose h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.legal-page .legal-prose h3::before {
  background-image: linear-gradient(90deg, var(--tk-ink), var(--tk-ink-to));
}

.legal-page .legal-prose strong,
.legal-page .legal-list > li strong,
.legal-page .legal-clauses > li strong,
.legal-page .legal-callout strong {
  font-weight: 600;
}

/* inline links: always underlined, the underline firming up on hover */
.legal-page .legal-prose a,
.legal-page .legal-link,
.legal-page .legal-note a,
.legal-page .safety-center-link,
.legal-page .safety-center-help-meta a {
  font-weight: 600;
  color: var(--tk-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(var(--tk-accent-rgb), 0.4);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.legal-page .legal-prose a:hover,
.legal-page .legal-link:hover,
.legal-page .legal-note a:hover,
.legal-page .safety-center-link:hover,
.legal-page .safety-center-help-meta a:hover {
  color: var(--tk-ink-hover);
  background-color: transparent;
  text-decoration-color: currentColor;
}

/* --- lists, definitions, clauses --------------------------------------- */

.legal-page .legal-list > li {
  border-color: var(--tk-line);
  background-color: var(--tk-white);
  box-shadow: 0 1px 2px rgba(var(--tk-text-rgb), 0.03);
}

/* the short scannable lists stay plain rows */
.legal-page .legal-list--tight > li {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

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

.legal-page .legal-defs > div {
  border-color: var(--tk-line);
  box-shadow: 0 1px 2px rgba(var(--tk-text-rgb), 0.03);
}

.legal-page .legal-defs dt {
  font-weight: 600;
}

.legal-page .legal-subclauses {
  border-left-color: var(--lg-edge);
  background-color: rgba(var(--tk-accent-rgb), 0.04);
}

/* --- steps: numbered in filled ink discs ------------------------------- */

.legal-page .legal-steps,
.legal-page .safety-center-steps {
  border-left-color: rgba(var(--tk-accent-rgb), 0.32);
}

.legal-page .legal-steps > li::before,
.legal-page .safety-center-steps li::before {
  background-image: linear-gradient(135deg, var(--tk-ink) 0%, var(--tk-ink-to) 100%);
  box-shadow: 0 6px 14px -6px rgba(var(--tk-accent-rgb), 0.8);
  font-family: var(--tk-display);
  font-weight: 600;
}

.legal-page .legal-steps strong,
.legal-page .safety-center-steps strong {
  font-weight: 600;
}

/* --- callouts: a tinted card, edged all round -------------------------- */

.legal-page .legal-callout {
  padding: 1.25rem 1.5rem 1.25rem 3.5rem;
  border: 1px solid rgba(var(--tk-accent-rgb), 0.22);
  border-radius: var(--tk-r-md);
  background-color: var(--tk-tint);
}

.legal-page .legal-callout::before {
  left: 1.375rem;
  top: 1.4375rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--tk-ink);
}

.legal-page .legal-callout--warning {
  border-color: rgba(var(--tk-orange-rgb), 0.32);
  background-color: #FFF5E8;
}

.legal-page .legal-callout--warning::before {
  background-color: #A3480A;
}

.legal-page .legal-callout--critical {
  border-color: rgba(220, 38, 38, 0.24);
  background-color: #FFF1F0;
}

.legal-page .legal-callout--critical::before {
  background-color: #B91C1C;
}

/* --- table ------------------------------------------------------------- */

.legal-page .legal-table-wrap {
  border-color: var(--tk-line);
  background-color: var(--tk-white);
}

.legal-page .legal-table thead th {
  font-weight: 600;
  background-color: var(--tk-surface);
}

/* --- related documents: cards with an arrow ---------------------------- */

.legal-page .legal-related {
  border-top-color: var(--tk-line);
}

.legal-page .legal-related-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-color: var(--tk-line);
  border-radius: var(--border-radius-md);
  background-color: var(--tk-white);
  box-shadow: 0 1px 2px rgba(var(--tk-text-rgb), 0.03);
  font-family: var(--tk-display);
  font-weight: 500;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease,
    box-shadow 0.35s var(--tk-ease), transform 0.35s var(--tk-ease);
}

.legal-page .legal-related-list a::after {
  content: '';
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: var(--tk-icon-arrow) center / contain no-repeat;
  mask: var(--tk-icon-arrow) center / contain no-repeat;
  opacity: 0.45;
  transition: transform 0.35s var(--tk-ease), opacity 0.25s ease;
}

.legal-page .legal-related-list a:hover,
.legal-page .legal-related-list a:focus-visible {
  transform: translateY(-2px);
  color: var(--tk-ink);
  border-color: var(--lg-edge);
  background-color: var(--tk-white);
  box-shadow: var(--tk-shadow-1);
}

.legal-page .legal-related-list a:hover::after,
.legal-page .legal-related-list a:focus-visible::after {
  opacity: 1;
  transform: translateX(3px);
}

.legal-page .legal-note {
  border-color: var(--tk-line);
  border-radius: var(--tk-r-md);
  background-color: var(--tk-surface);
}

/* ==========================================================================
   Safety Center - the cool half of the journey, one stage per section
   ========================================================================== */

/* the in-page section nav sits on the paper that rises over the masthead */
.legal-page .safety-center-nav {
  border-bottom: 0;
  background-color: transparent;
}

.legal-page .safety-center-nav ul {
  padding-top: 0.5rem;
}

.legal-page .safety-center-nav a {
  border-color: var(--tk-line);
  background-color: var(--tk-white);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tk-fg-soft);
  box-shadow: 0 1px 2px rgba(var(--tk-text-rgb), 0.03);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.3s var(--tk-ease);
}

.legal-page .safety-center-nav a:hover,
.legal-page .safety-center-nav a:focus-visible {
  transform: translateY(-1px);
  color: var(--tk-ink);
  border-color: var(--lg-edge);
  background-color: var(--tk-tint);
}

.legal-page .safety-center-section {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  border: 0;
  background-image:
    radial-gradient(42% 30% at var(--pg-glow-x, 100%) 50%, rgba(var(--tk-accent-rgb), 0.1) 0%, rgba(var(--tk-accent-rgb), 0) 70%),
    linear-gradient(180deg, var(--pg-wash-from) 0%, var(--pg-wash-to) 100%);
}

/* Each section runs from its own wash to the next one's, so no edge ever
   changes colour, and re-points the stage, so its label, links, markers,
   numerals and glow all move together - as on the home page. */
.legal-page #our-approach {
  --pg-wash-from: var(--tk-paper);
  --pg-wash-to: var(--tk-wash-lavender);
  --pg-glow-x: 100%;
}

.legal-page #safety-tools {
  --pg-wash-from: var(--tk-wash-lavender);
  --pg-wash-to: var(--tk-wash-periwinkle);
  --pg-glow-x: 0%;
  --tk-accent-rgb: var(--tk-cobalt-rgb);
  --tk-ink: var(--tk-cobalt-ink);
  --tk-ink-hover: #233AAA;
  --tk-ink-to: var(--tk-blue-ink);
  --tk-tint: #EFF3FF;
}

.legal-page #report-steps {
  --pg-wash-from: var(--tk-wash-periwinkle);
  --pg-wash-to: var(--tk-wash-sky);
  --pg-glow-x: 100%;
  --tk-accent-rgb: var(--tk-blue-rgb);
  --tk-ink: var(--tk-blue-ink);
  --tk-ink-hover: #174BA8;
  --tk-ink-to: var(--tk-sky-ink);
  --tk-tint: #EAF1FF;
}

.legal-page #privacy-security {
  --pg-wash-from: var(--tk-wash-sky);
  --pg-wash-to: var(--tk-wash-ice);
  --pg-glow-x: 0%;
  --tk-accent-rgb: var(--tk-sky-rgb);
  --tk-ink: var(--tk-sky-ink);
  --tk-ink-hover: #04557F;
  --tk-ink-to: var(--tk-cyan-ink);
  --tk-tint: #E4F4FE;
}

.legal-page #community-guidelines {
  --pg-wash-from: var(--tk-wash-ice);
  --pg-wash-to: var(--tk-wash-aqua);
  --pg-glow-x: 100%;
  --tk-accent-rgb: var(--tk-cyan-rgb);
  --tk-ink: var(--tk-cyan-ink);
  --tk-ink-hover: #04596E;
  --tk-ink-to: var(--tk-teal-ink);
  --tk-tint: #E4F7FE;
}

.legal-page #safety-resources {
  --pg-wash-from: var(--tk-wash-aqua);
  --pg-wash-to: var(--tk-wash-aqua);
  --pg-glow-x: 0%;
  --tk-accent-rgb: var(--tk-teal-rgb);
  --tk-ink: var(--tk-teal-ink);
  --tk-ink-hover: #0B5E58;
  --tk-ink-to: var(--tk-cyan-ink);
  --tk-tint: #E3F7F4;
  /* the help band below rises over this much */
  padding-bottom: calc(clamp(3.5rem, 7vw, 5.5rem) + var(--tk-r-xl));
}

/* the section's tokens are redeclared so they resolve against its own
   stage rather than the page default */
.legal-page .safety-center-section {
  --color-primary: var(--tk-ink);
  --color-primary-dark: var(--tk-ink-hover);
  --lg-wash: rgba(var(--tk-accent-rgb), 0.07);
  --lg-edge: rgba(var(--tk-accent-rgb), 0.26);
  --sc-wash: var(--lg-wash);
  --sc-edge: var(--lg-edge);
  --sc-rule: var(--tk-line);
}

/* label: led by a small listening ring, as the home section labels are */
.legal-page .safety-center-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tk-ink);
}

.legal-page .safety-center-eyebrow::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0 0 0 3px rgba(var(--tk-accent-rgb), 0.14), 0 0 0 7px rgba(var(--tk-accent-rgb), 0.06);
}

.legal-page .safety-center-heading {
  font-size: clamp(1.875rem, 1.25rem + 2.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--tk-fg);
}

.legal-page .safety-center-standfirst,
.legal-page .safety-center-prose p,
.legal-page .safety-center-stage-body p,
.legal-page .safety-center-stage-list li {
  color: var(--tk-fg-soft);
}

/* --- the spine --------------------------------------------------------- */

.legal-page .safety-center-stage-when {
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tk-ink);
}

.legal-page .safety-center-stage-when::before {
  font-family: var(--tk-display);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--tk-ink);
  background-image: linear-gradient(110deg, var(--tk-ink) 0%, var(--tk-ink-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.legal-page .safety-center-stage-body {
  border-left-color: rgba(var(--tk-accent-rgb), 0.22);
}

.legal-page .safety-center-stage-body::before {
  left: -5px;
  width: 9px;
  height: 9px;
  background-color: var(--tk-ink);
  box-shadow: 0 0 0 4px rgba(var(--tk-accent-rgb), 0.16);
}

.legal-page .safety-center-stage:last-child .safety-center-stage-body::before {
  box-shadow: 0 0 0 4px rgba(var(--tk-accent-rgb), 0.16);
}

.legal-page .safety-center-stage-body h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* the captures: a white card, lifted like the home phone */
.legal-page .safety-center-shot {
  padding: 0.625rem;
  border-color: var(--tk-line);
  border-radius: var(--tk-r-lg);
  background-color: var(--tk-white);
  box-shadow: var(--tk-shadow-2);
}

.legal-page .safety-center-shot img {
  border-radius: var(--tk-r-md);
}

/* --- cards: points, contacts, resources -------------------------------- */

.legal-page .safety-center-point,
.legal-page .safety-center-contact,
.legal-page .safety-center-resource {
  border-color: var(--tk-line);
  background-color: var(--tk-white);
  box-shadow: 0 1px 2px rgba(var(--tk-text-rgb), 0.03);
}

.legal-page .safety-center-contact,
.legal-page .safety-center-resource {
  border-radius: var(--tk-r-md);
  box-shadow: var(--tk-shadow-1);
}

.legal-page .safety-center-point:hover,
.legal-page .safety-center-contact:hover,
.legal-page .safety-center-resource:hover {
  border-color: var(--lg-edge);
  background-color: var(--tk-white);
}

.legal-page .safety-center-point dt {
  font-weight: 600;
}

.legal-page .safety-center-contact h4,
.legal-page .safety-center-resource h4 {
  font-weight: 600;
}

.legal-page .safety-center-contact h4 span {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.legal-page .safety-center-contact a,
.legal-page .safety-center-resource a {
  font-weight: 600;
  color: var(--tk-ink);
}

.legal-page .safety-center-subsection + .safety-center-subsection {
  border-top-color: rgba(var(--tk-text-rgb), 0.1);
}

.legal-page .safety-center-subhead {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.legal-page .safety-center-disclaimer {
  border-color: var(--tk-line);
  border-radius: var(--tk-r-md);
  background-color: rgba(255, 255, 255, 0.6);
}

/* --- the closing help band: night again, flowing into the footer ------- */

.legal-page .safety-center-help {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(var(--tk-r-xl) * -1);
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6rem);
  border: 0;
  border-radius: var(--tk-r-xl) var(--tk-r-xl) 0 0;
  color: var(--tk-white);
  background:
    /* the foot deepens into the footer's navy, so the two meet without an edge */
    linear-gradient(180deg, rgba(var(--tk-navy-900-rgb), 0) 55%, var(--tk-navy-900) 100%),
    radial-gradient(30% 50% at 0% 0%, rgba(var(--tk-sky-rgb), 0.28) 0%, rgba(var(--tk-sky-rgb), 0) 70%),
    radial-gradient(34% 60% at 100% 0%, rgba(var(--tk-violet-rgb), 0.4) 0%, rgba(var(--tk-violet-rgb), 0) 70%),
    var(--tk-grad-hero);
  box-shadow: 0 -30px 60px -30px rgba(var(--tk-dark-rgb), 0.45);
}

.legal-page .safety-center-help::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--tk-grain);
  opacity: 0.06;
  pointer-events: none;
}

.legal-page .safety-center-help .safety-center-eyebrow {
  color: var(--tk-sky-soft);
}

.legal-page .safety-center-help .safety-center-eyebrow::before {
  box-shadow: 0 0 0 3px rgba(var(--tk-sky-soft-rgb), 0.16), 0 0 0 7px rgba(var(--tk-sky-soft-rgb), 0.07);
}

.legal-page .safety-center-help .safety-center-heading {
  color: var(--tk-white);
}

.legal-page .safety-center-help-intro {
  color: var(--tk-on-night-soft);
}

.legal-page .safety-center-help-meta {
  border-top-color: var(--tk-line-night);
  color: var(--tk-on-night-faint);
}

.legal-page .safety-center-help-meta a {
  color: var(--tk-sky-soft);
  text-decoration-color: rgba(var(--tk-sky-soft-rgb), 0.45);
}

.legal-page .safety-center-help-meta a:hover {
  color: var(--tk-white);
}

/* on the night the main action is the hero's: orange into pink, dark text */
.legal-page .safety-center-help .cta-button {
  background-color: var(--tk-orange);
  background-image: var(--tk-grad-primary-loop);
  color: var(--tk-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 32px -10px rgba(var(--tk-orange-rgb), 0.65);
}

.legal-page .safety-center-help .cta-button:hover {
  background-color: var(--tk-orange);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 5px rgba(var(--tk-yellow-rgb), 0.25),
    0 20px 40px -12px rgba(var(--tk-pink-rgb), 0.7);
}

/* ==========================================================================
   Plans - the rate card in the home page's surfaces: the four plans on a
   lavender wash, white cards, and the recommended plan set in the hero's
   night with the hero's warm action colour on its badge
   ========================================================================== */

.legal-page .plans-section {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem);
}

.legal-page .plans-panel {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid rgba(var(--tk-violet-rgb), 0.12);
  border-radius: var(--tk-r-lg);
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(var(--tk-violet-rgb), 0.1) 0%, rgba(var(--tk-violet-rgb), 0) 70%),
    linear-gradient(180deg, var(--tk-wash-lavender) 0%, var(--tk-wash-periwinkle) 100%);
}

.legal-page .plan {
  border-color: var(--tk-line);
  border-radius: var(--tk-r-md);
  background-color: var(--tk-white);
  box-shadow: 0 1px 2px rgba(var(--tk-text-rgb), 0.03);
  transition: border-color 0.3s ease, transform 0.35s var(--tk-ease), box-shadow 0.35s var(--tk-ease);
}

.legal-page .plan:hover {
  transform: translateY(-3px);
  border-color: var(--lg-edge);
  box-shadow: var(--tk-shadow-1);
}

.legal-page .plan-name {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tk-fg-soft);
}

.legal-page .plan-price {
  font-family: var(--tk-display);
  font-weight: 600;
  color: var(--tk-ink);
}

.legal-page .plan-currency {
  font-weight: 500;
}

.legal-page .plan-talktime {
  font-family: var(--tk-display);
  font-weight: 500;
  letter-spacing: -0.012em;
  border-top-color: var(--tk-line);
}

.legal-page .plan-talktime::before {
  background: linear-gradient(90deg, var(--tk-ink) 0%, var(--tk-ink-to) 100%);
}

.legal-page .plan-description {
  color: var(--tk-fg-soft);
}

.legal-page .plan--featured {
  overflow: visible;
  border-color: transparent;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(var(--tk-violet-rgb), 0.5) 0%, rgba(var(--tk-violet-rgb), 0) 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(var(--tk-sky-rgb), 0.28) 0%, rgba(var(--tk-sky-rgb), 0) 70%),
    var(--tk-grad-hero);
  box-shadow: 0 22px 44px -22px rgba(var(--tk-blue-rgb), 0.9);
}

.legal-page .plan--featured:hover {
  border-color: transparent;
  box-shadow: 0 30px 56px -24px rgba(var(--tk-blue-rgb), 0.95);
}

.legal-page .plan--featured .plan-name,
.legal-page .plan--featured .plan-description {
  color: var(--tk-on-night-soft);
}

.legal-page .plan--featured .plan-price,
.legal-page .plan--featured .plan-talktime {
  color: var(--tk-white);
}

.legal-page .plan--featured .plan-talktime {
  border-top-color: var(--tk-line-night);
}

.legal-page .plan--featured .plan-talktime::before {
  background: var(--tk-grad-primary-loop);
}

/* the badge takes the hero's main action: orange into pink, dark text */
.legal-page .plan-badge {
  padding: 0.3125rem 0.75rem;
  background-image: linear-gradient(110deg, #FFC23D 0%, #FF8A12 45%, #FF5E57 100%);
  box-shadow: 0 8px 18px -8px rgba(var(--tk-orange-rgb), 0.8);
  font-weight: 600;
  color: var(--tk-text);
}

/* ==========================================================================
   Footer - the home page's footer: the same markup (copied from index.html,
   its in-page links pointed back at index.html), the same night, and the
   same join. On the home page the closing band's foot deepens through blue
   into the footer's navy, with the closing rings rising out of it; here
   the paper does the same, at the top of the footer itself. On Safety
   Center the help band is already night, so the footer simply continues
   it, as the home footer continues the closing band.
   ========================================================================== */

.legal-page .tk-footer {
  --tk-iris: var(--tk-sky-soft);
  --pg-join: clamp(8rem, 15vw, 11.5rem);      /* the paper-to-night join */
  --pg-orb: min(64rem, 150vw);                 /* the closing rings, as on the home page */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--pg-join) + clamp(2.5rem, 5vw, 3.5rem)) 0 2rem;
  background-color: var(--tk-navy-900);
  background-image:
    /* film grain, as on the home night surfaces */
    var(--pg-grain),
    radial-gradient(40% 70% at 0% 100%, rgba(var(--tk-cobalt-rgb), 0.2) 0%, rgba(var(--tk-cobalt-rgb), 0) 70%),
    radial-gradient(40% 70% at 100% 100%, rgba(var(--tk-cyan-rgb), 0.12) 0%, rgba(var(--tk-cyan-rgb), 0) 70%),
    /* the home closing band's foot: blue deepening into the navy */
    linear-gradient(180deg,
      rgba(var(--tk-navy-700-rgb), 0) calc(var(--pg-join) * 0.3),
      rgba(var(--tk-navy-700-rgb), 0.8) calc(var(--pg-join) * 0.72),
      var(--tk-navy-900) var(--pg-join)),
    /* and the band's own colours under it: periwinkle > sky > aqua */
    linear-gradient(100deg, #8F9CF5 0%, #6DB7FC 45%, #69E3F0 100%);
  color: var(--tk-on-night-soft);
}

/* the closing rings, centred on the line where the night is complete, so
   only their upper arcs show, rising through the join */
.legal-page .tk-footer::before,
.legal-page .tk-footer::after {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--pg-join);
  z-index: -1;
  border-radius: 50%;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 50%);
  mask-image: linear-gradient(180deg, #000 50%, transparent 50%);
  pointer-events: none;
}

.legal-page .tk-footer::before {
  width: var(--pg-orb);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(var(--tk-aqua-rgb), 0.09);
  background:
    radial-gradient(closest-side, rgba(var(--tk-aqua-rgb), 0) calc(100% - 1.5px), rgba(var(--tk-aqua-rgb), 0.32) calc(100% - 1px), rgba(var(--tk-aqua-rgb), 0) 100%) center / 40% 40% no-repeat,
    radial-gradient(closest-side, rgba(var(--tk-aqua-rgb), 0) calc(100% - 1.5px), rgba(var(--tk-aqua-rgb), 0.18) calc(100% - 1px), rgba(var(--tk-aqua-rgb), 0) 100%) center / 70% 70% no-repeat;
}

/* the paper, thinning out over the top of the join. It lies over the
   rings, so they fade in out of the page rather than starting at an edge.
   The shell is not positioned, so this sizes against the footer; z-index 0
   keeps it above the rings and the join holds no content for it to cover. */
.legal-page .tk-footer > .tk-shell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: var(--pg-join);
  background-image: linear-gradient(180deg, var(--tk-paper) 0%, rgba(var(--tk-paper-rgb), 0.85) 18%,
    rgba(var(--tk-paper-rgb), 0) 55%);
  pointer-events: none;
}

/* and the ripple leaving the innermost ring every few seconds */
.legal-page .tk-footer::after {
  width: calc(var(--pg-orb) * 0.4);
  aspect-ratio: 1;
  margin: calc(var(--pg-orb) * -0.2) 0 0 calc(var(--pg-orb) * -0.2);
  border: 1.5px solid rgba(var(--tk-aqua-rgb), 0.5);
  opacity: 0;
  animation: pg-ripple-foot 6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

@keyframes pg-ripple-foot {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.35); opacity: 0; }
}

/* Safety Center: the help band above is night already, so no join */
.safety-center-page.legal-page .tk-footer {
  padding-top: clamp(3.5rem, 7vw, 5rem);
  background-image:
    var(--pg-grain),
    radial-gradient(40% 70% at 0% 100%, rgba(var(--tk-cobalt-rgb), 0.2) 0%, rgba(var(--tk-cobalt-rgb), 0) 70%),
    radial-gradient(40% 70% at 100% 100%, rgba(var(--tk-cyan-rgb), 0.12) 0%, rgba(var(--tk-cyan-rgb), 0) 70%);
}

.safety-center-page.legal-page .tk-footer::before,
.safety-center-page.legal-page .tk-footer::after,
.safety-center-page.legal-page .tk-footer > .tk-shell::before {
  display: none;
}

/* the home page's gutter, a little wider than the bar's */
.legal-page .tk-footer > .tk-shell {
  max-width: 1280px;
}

.legal-page .tk-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}

.legal-page .tk-footer .tk-brand {
  color: var(--tk-white);
}

.legal-page .tk-footer__about {
  max-width: 24rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.legal-page .tk-footer__stores {
  margin-top: 1.75rem;
}

.legal-page .tk-footer__stores .tk-store img {
  height: 2.5rem;
}

/* the black badge artwork needs a rim to read as an object on the night */
.legal-page .tk-footer .tk-store {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 26px rgba(0, 0, 0, 0.45);
}

.legal-page .tk-footer .tk-store:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42), 0 16px 34px rgba(0, 0, 0, 0.55);
}

.legal-page .tk-footer nav h3 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tk-white);
}

.legal-page .tk-footer nav ul {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.legal-page .tk-footer nav a {
  font-size: 0.9375rem;
  color: var(--tk-on-night-soft);
  transition: color 0.2s ease;
}

.legal-page .tk-footer nav a:hover {
  color: var(--tk-white);
}

.legal-page .tk-footer address {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.7;
  color: var(--tk-on-night-faint);
}

.legal-page .tk-footer address .tk-footer__mail {
  color: var(--tk-iris);
}

.legal-page .tk-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--tk-line-night);
  font-size: 0.8125rem;
  color: var(--tk-on-night-faint);
}

.legal-page .tk-footer__bar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.legal-page .tk-footer__bar-links a {
  color: var(--tk-on-night-faint);
  transition: color 0.2s ease;
}

.legal-page .tk-footer__bar-links a:hover {
  color: var(--tk-white);
}

@media (max-width: 900px) {
  .legal-page .tk-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .legal-page .tk-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .legal-page .tk-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Focus - the stage's ink on paper, white on the night
   ========================================================================== */

.legal-page a:focus-visible,
.legal-page button:focus-visible {
  outline-color: var(--tk-ink);
}

.legal-page .legal-masthead a:focus-visible,
.legal-page .safety-center-help a:focus-visible,
.legal-page #footer a:focus-visible,
.legal-page .tk-nav.is-dark:not(.is-open) a:focus-visible,
.legal-page .tk-nav.is-dark:not(.is-open) button:focus-visible {
  outline-color: var(--tk-white);
}

.legal-page .tk-btn:focus-visible,
.legal-page .cta-button:focus-visible,
.legal-page .tk-nav__links a:focus-visible,
.legal-page .tk-nav__burger:focus-visible {
  border-radius: 999px;
}

.legal-page .tk-store:focus-visible,
.legal-page .tk-brand:focus-visible {
  border-radius: 10px;
}

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

@media (max-width: 900px) {
  /* the stacked masthead: the night runs top to bottom */
  .legal-page .legal-masthead {
    background:
      radial-gradient(30% 22% at 0% 0%, rgba(var(--tk-sky-rgb), 0.36) 0%, rgba(var(--tk-sky-rgb), 0) 70%),
      radial-gradient(50% 26% at 100% 0%, rgba(var(--tk-violet-rgb), 0.4) 0%, rgba(var(--tk-violet-rgb), 0) 70%),
      radial-gradient(70% 24% at 70% 100%, rgba(var(--tk-coral-rgb), 0.34) 0%, rgba(var(--tk-coral-rgb), 0) 70%),
      linear-gradient(175deg, var(--tk-navy-950) 0%, var(--tk-blue-900) 35%, var(--tk-blue-800) 62%,
        var(--tk-blue-700) 84%, var(--tk-indigo-600) 100%);
  }

  .legal-page .legal-doc::before {
    right: -24rem;
  }
}

@media (max-width: 768px) {
  .legal-page .legal-title {
    max-width: none;
  }
}

@media (max-width: 420px) {
  .legal-page .legal-callout {
    padding: 1.125rem 1.125rem 1.125rem 3rem;
  }

  .legal-page .legal-callout::before {
    left: 1rem;
    top: 1.3125rem;
  }
}

/* ==========================================================================
   Reduced motion - legal.css already stops every animation under
   .legal-page; the bar and the reading line need nothing more.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .legal-page .tk-btn,
  .legal-page .cta-button,
  .legal-page .legal-related-list a {
    transition-duration: 0.01ms !important;
  }
}