@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexSans-300.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexSans.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexSerif-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexSerif-600.woff2") format("woff2");
}


:root {
  color-scheme: light;

  /* ── Type Families ───────────────────────────────────── */
  --font-sans:  "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-mono:  "IBM Plex Mono", "Courier New", monospace;

  /* ── Type Scale ──────────────────────────────────────── */
  /* Fixed micro: value labels, platform tags              */
  --text-2xs:  10px;
  /* Fixed labels: eyebrows, nav, buttons, footer headers  */
  --text-xs:   11px;
  /* Small: captions, fine print, legal notices            */
  --text-sm:   clamp(0.78rem, 0.9vw, 0.875rem);
  /* Base: body copy, form fields                          */
  --text-base: clamp(0.94rem, 1.1vw, 1.06rem);
  /* Medium: lead text, hero body, taglines                */
  --text-md:   clamp(1rem, 1.3vw, 1.15rem);
  /* Large: platform descriptions, card prose              */
  --text-lg:   clamp(1.1rem, 1.75vw, 1.45rem);
  /* XL: subheadings, quotes, about names                  */
  --text-xl:   clamp(1.3rem, 2.2vw, 1.9rem);
  /* 2XL: medium section headings                          */
  --text-2xl:  clamp(1.8rem, 3.2vw, 2.6rem);
  /* 3XL: primary section headings                         */
  --text-3xl:  clamp(2.2rem, 4.2vw, 3.6rem);
  /* 4XL: hero headline                                    */
  --text-4xl:  clamp(3rem, 5.5vw, 5rem);
  /* 5XL: oversized display                                */
  --text-5xl:  clamp(4rem, 7.5vw, 7rem);

  --paper-rgb: 236 241 240;
  --paper-soft-rgb: 242 246 245;
  --paper-strong-rgb: 227 234 232;
  --ink-rgb: 25 33 29;
  --dark-surface-rgb: 37 57 50;
  --text-secondary-rgb: 90 98 95;
  --text-tertiary-rgb: 139 145 142;
  --border-subtle-rgb: 209 217 216;
  --yield-rgb: 11 138 77;
  --success-rgb: 22 105 58;
  --warning-rgb: 184 130 25;
  --error-rgb: 178 58 52;
  --info-rgb: 47 98 143;
  --signal-deep-rgb: 75 195 128;
  --signal-mid-rgb: 115 190 142;
  --signal-bright-rgb: 145 225 172;
  --glow-soft-rgb: 186 230 205;

  --paper: rgb(var(--paper-rgb));
  --paper-strong: rgb(var(--paper-strong-rgb));
  --paper-soft: rgb(var(--paper-soft-rgb));
  --ink: rgb(var(--ink-rgb));
  --ink-soft: rgb(var(--text-secondary-rgb));
  --ink-faint: rgb(var(--text-tertiary-rgb));
  --ink-rule: rgb(var(--border-subtle-rgb));
  --ink-rule-strong: rgb(var(--text-secondary-rgb) / 0.34);
  --yield: rgb(var(--yield-rgb));
  --yield-bright: #2ea866;
  --yield-soft: rgb(var(--yield-rgb) / 0.12);
  --success: rgb(var(--success-rgb));
  --success-soft: rgb(var(--success-rgb) / 0.1);
  --warning: rgb(var(--warning-rgb));
  --warning-soft: rgb(var(--warning-rgb) / 0.12);
  --error: rgb(var(--error-rgb));
  --error-soft: rgb(var(--error-rgb) / 0.1);
  --info: rgb(var(--info-rgb));
  --info-soft: rgb(var(--info-rgb) / 0.1);
  --on-success: rgb(var(--paper-rgb));
  --on-warning: rgb(var(--ink-rgb));
  --on-error: rgb(var(--paper-rgb));
  --on-info: rgb(var(--paper-rgb));
  --hero-dark: rgb(var(--ink-rgb));
  --hero-grid-line: rgb(var(--paper-rgb) / 0.14);
  --hero-grid-soft: rgb(var(--ink-rgb) / 0.09);
  --hero-grid-soft-strong: rgb(var(--ink-rgb) / 0.16);
  --shell: min(100% - 48px, 1240px);
  --section-space: clamp(76px, 10vw, 132px);
  /* The hero must fit the viewport: at 104vh the headline could only be reached
     by scrolling it under the fixed nav. svh keeps mobile browser chrome from
     making it taller than the visible area. */
  --hero-height: clamp(600px, 100svh, 920px);
  --grid-cell: 32px;
  --transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 20px 64px rgba(18, 29, 25, 0.08);
  --shadow-panel: 0 16px 28px rgba(18, 29, 25, 0.04);
}

@media (max-width: 820px) {
  :root {
    --shell: min(100% - 32px, 1240px);
  }
}

@media (max-width: 640px) {
  :root {
    --hero-height: clamp(560px, 100svh, 760px);
  }
}


* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* The header pill is fixed, so anchor targets have to clear it. */
:target,
.section[id],
.product-shared-item[id] {
  scroll-margin-top: 118px;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--yield-rgb) / 0.05), transparent 30%),
    linear-gradient(180deg, var(--paper-soft) 0%, var(--paper) 100%);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid rgb(var(--yield-rgb) / 0.5);
  outline-offset: 4px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
.footer-tagline {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.04em;
}

h1 {
  max-width: 15ch;
  margin: 0 auto 20px;
  font-size: var(--text-4xl);
  line-height: 0.98;
  text-wrap: balance;
  color: #27312d;
}

h1 .accent,
h2 .accent {
  color: var(--yield);
}

h2 {
  margin-bottom: 18px;
  font-size: var(--text-3xl);
  line-height: 1.02;
  color: #2b322d;
}

h3 {
  margin-bottom: 14px;
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.28;
  color: #23302b;
}

p {
  color: var(--ink-soft);
  line-height: 1.62;
}

.shell {
  width: var(--shell);
  margin: 0 auto;
}

.section {
  position: relative;
  padding: var(--section-space) 0;
}

.section + .section {
  border-top: 1px solid var(--ink-rule);
}

.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    transform var(--transition),
    border-color var(--transition),
    background-color var(--transition),
    color var(--transition);
}

.button:hover {
  transform: translateY(-1px);
}

.button-light {
  border-color: transparent;
  color: var(--paper);
  background: var(--ink);
}

.button-light:hover {
  border-color: transparent;
  background: rgb(var(--ink-rgb) / 0.88);
}

/* Jump navigation at the top of the products and use cases pages: the same
   solid button as the hero, one per section, sized up a little for a row of
   them. The g in gTokens drops its yield green here — on the ink fill it
   reads as a defect rather than a brand mark. */
.jump-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(30px, 3.2vw, 44px);
}

.button-jump {
  min-height: 54px;
  padding: 0 26px;
}

/* One continuous bar of equal cells, rather than separate buttons with air
   between them. Hairlines inside the ink keep the five readable as five. */
.jump-buttons--block {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}

.jump-buttons--block .button-jump {
  padding: 0 12px;
}

.jump-buttons--block .button-jump + .button-jump {
  border-left-color: rgb(255 255 255 / 0.18);
}

/* Against the selected cell's white, the hairline has to darken instead. */
.jump-buttons--block .is-selected + .button-jump {
  border-left-color: var(--ink-rule);
}

@media (max-width: 900px) {
  .jump-buttons--block {
    grid-template-columns: 1fr;
  }

  .jump-buttons--block .button-jump + .button-jump {
    border-left-color: transparent;
    border-top-color: rgb(255 255 255 / 0.18);
  }

  .jump-buttons--block .is-selected + .button-jump {
    border-top-color: var(--ink-rule);
  }
}

.button-outline {
  border-color: rgb(var(--ink-rgb) / 0.16);
  color: var(--ink);
}

.button-outline:hover {
  border-color: rgb(var(--yield-rgb) / 0.28);
  color: var(--yield);
  background: rgba(255, 255, 255, 0.62);
}

.ui-label,
.eyebrow,
.meta-label,
.use-label,
.proof-tag,
.footer-col h3,
.form-field label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow {
  color: rgb(var(--ink-rgb) / 0.6);
}

.meta-label {
  color: rgb(var(--ink-rgb) / 0.54);
}

.grid-bg {
  --grid-line-color: rgb(var(--ink-rgb) / 0.05);
  --grid-offset-x: 0px;
  --grid-offset-y: 0px;
  --grid-underlay-image: none;
  --grid-underlay-size: auto;
  --grid-underlay-position: 0 0;
  background-color: var(--grid-bg-color, transparent);
  background-image:
    var(--grid-underlay-image),
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size:
    var(--grid-underlay-size),
    var(--grid-cell) var(--grid-cell),
    var(--grid-cell) var(--grid-cell);
  background-position:
    var(--grid-underlay-position),
    var(--grid-offset-x) var(--grid-offset-y),
    var(--grid-offset-x) var(--grid-offset-y);
}


.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  /* `none` (not translateY(0)) so the element drops its composited layer once
     revealed. A residual identity transform keeps the layer alive and the
     browser rasterizes it at CSS resolution then upscales by DPR — which blurs
     high-DPI raster content like the portal screenshot. */
  transform: none;
}

@media (max-width: 640px) {
  .button {
    width: 100%;
  }
}

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

/* The g in gTokens, in the yield green. */


.site-header {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 40;
  pointer-events: none;
}

.nav-shell {
  position: relative;
  overflow: hidden;
  width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 16px 14px 18px;
  background: rgb(var(--paper-rgb) / 0.62);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(26, 33, 29, 0.08);
  pointer-events: auto;
  transition: border-color var(--transition), background-color var(--transition);
}



.nav-shimmer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.brand {
  width: min(100%, 176px);
  color: var(--ink);
}

.brand-mark {
  display: block;
  width: 100%;
  height: auto;
}

.nav-links {
  display: flex;
  justify-content: center;
  min-width: 0;
  flex-wrap: wrap;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.72);
  transition: color var(--transition);
}

.nav-links a {
  transition: color var(--transition), opacity var(--transition);
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-shell > .button {
  justify-self: end;
  width: auto;
}

.nav-shell > .button.button-light {
  background: var(--ink);
}

.nav-shell > .button.button-light:hover {
  background: rgb(var(--ink-rgb) / 0.86);
}

/* Login + Sign up pair, pinned to the right of the nav grid. */
.nav-auth {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-auth .button {
  width: auto;
}

.nav-auth .button.button-light {
  background: var(--ink);
}

.nav-auth .button.button-light:hover {
  background: rgb(var(--ink-rgb) / 0.86);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 1px;
  background: rgb(var(--ink-rgb) / 0.82);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Full-page overlay — outside <header> so it can truly fill the viewport.
   The header pill (z-index: 40) sits above this (z-index: 35). */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 35;
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
  background: rgb(var(--ink-rgb) / 0.94);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}


.nav-mobile-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-bottom: 24px;
  text-align: center;
}

.nav-mobile-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-mobile-links a {
  display: block;
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.72);
  opacity: 0;
  transform: translateY(20px);
  transition:
    color var(--transition),
    opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-mobile-links a:hover {
  color: #ffffff;
}

/* CTA button: white outline, pinned to bottom, matches nav-shell width */
.nav-mobile-cta {
  flex-shrink: 0;
  width: var(--shell);
  min-height: 70px;
  font-size: var(--text-base);
  color: #ffffff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.72);
  opacity: 0;
  transform: translateY(20px);
  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-mobile-cta:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

@media (max-width: 820px) {
  .site-header {
    top: 14px;
  }

  .nav-shell {
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 14px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links,
  .nav-shell > .button,
  .nav-auth {
    display: none;
  }
}


.site-footer {
  position: relative;
  --grid-bg-color: var(--hero-dark);
  --grid-line-color: rgb(var(--paper-rgb) / 0.09);
  color: rgb(var(--paper-rgb) / 0.9);
  padding: 0 0 18px;
}

.footer-shimmer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.footer-shell {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) repeat(3, minmax(110px, 0.38fr));
  gap: 28px;
  align-items: start;
  padding-top: 72px;
}

.footer-brand {
  display: block;
  width: min(100%, 352px);
  margin-bottom: 18px;
}

.footer-brand img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) saturate(100%) invert(96%) sepia(6%) saturate(182%) hue-rotate(58deg) brightness(107%) contrast(95%);
}

.footer-tagline {
  margin-bottom: 18px;
  font-size: var(--text-md);
  line-height: 1.32;
  color: rgb(var(--paper-rgb) / 0.82);
}

.footer-col h3 {
  margin: 0 0 16px;
  color: rgb(var(--paper-rgb) / 0.58);
}

.footer-col a,
.footer-meta,
.footer-handle {
  display: block;
  margin-bottom: 10px;
  color: rgb(var(--paper-rgb) / 0.76);
  transition: color var(--transition);
}

.footer-col a:hover,
.footer-handle:hover {
  color: var(--paper);
}

.footer-meta {
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
  color: rgb(var(--paper-rgb) / 0.62);
}

.footer-bottom-link {
  color: inherit;
  transition: color var(--transition);
}

.footer-bottom-link:hover {
  color: var(--paper);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  margin-top: 32px;
  color: rgb(var(--paper-rgb) / 0.58);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-disclaimer {
  margin: 16px 0 0;
  max-width: 100%;
  color: rgb(var(--paper-rgb) / 0.4);
  font-size: var(--text-2xs);
  line-height: 1.6;
}

.footer-disclaimer a {
  color: rgb(var(--paper-rgb) / 0.62);
  text-decoration: underline;
  transition: color var(--transition);
}

.footer-disclaimer a:hover {
  color: var(--paper);
}

@media (max-width: 1080px) {
  .footer-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .footer-bottom {
    flex-direction: column;
  }
}



.page-hero {
  padding-top: clamp(132px, 13vw, 176px);
  padding-bottom: 0;
  border-bottom: 1px solid var(--ink-rule);
}

.page-hero-inner {
  max-width: 820px;
  padding-bottom: clamp(56px, 8vw, 96px);
}

.page-hero-inner .eyebrow {
  margin-bottom: 18px;
}

.page-hero-inner h1 {
  max-width: none;
  margin: 0 0 22px;
  font-size: var(--text-5xl);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.page-hero-body {
  max-width: 56ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.68;
  color: var(--ink-soft);
  margin: 0;
}

.body-link {
  color: var(--yield);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition);
}

.body-link:hover {
  opacity: 0.78;
}

/* Products leads straight into the manager band, so its hero is just the label.
   The eyebrow carries the h1 so the page still has one. */
/* Specific enough to beat `.page-hero-inner h1`, which otherwise sets this at
   display size. */
.page-hero-inner h1.page-eyebrow-title {
  max-width: none;
  margin: 0 auto;
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0.18em;
}

/* Products and the use case pages run bands full shell width underneath, so
   the hero shell has to line up with them rather than centre itself at 820px.
   The h1 and body keep their own measures. */
.page-hero--compact .page-hero-inner {
  max-width: none;
  padding-bottom: clamp(28px, 4vw, 44px);
}

/* The products index leads with just its label, centred over the bands below.
   Detail pages use --compact for the tighter padding only, and stay left-aligned. */
.page-hero--label .page-hero-inner {
  max-width: none;
  text-align: center;
}



.legal-content {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(80px, 10vw, 140px);
}

.legal-prose {
  max-width: 680px;
  margin: auto;
}

.legal-prose h2 {
  margin: 2.4em 0 0.6em;
  font-size: clamp(1rem, 1.2vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0em;
  color: var(--ink);
}

.legal-prose h2:first-child {
  margin-top: 0;
}

.legal-prose p,
.legal-prose li {
  font-size: clamp(0.9rem, 1.1vw, 0.97rem);
  line-height: 1.74;
  color: var(--ink-soft);
  margin: 0 0 0.9em;
}

.legal-prose ul {
  padding-left: 1.4em;
  margin: 0 0 0.9em;
}

.legal-prose li {
  margin-bottom: 0.4em;
}

.legal-notice {
  font-size: 0.82rem;
  line-height: 1.68;
  color: rgb(var(--ink-rgb) / 0.55);
  margin: 1.2em 0;
}

.legal-address {
  font-style: normal;
  line-height: 1.8;
  color: var(--ink-soft);
  font-size: clamp(0.9rem, 1.1vw, 0.97rem);
}

/* The lending terms carry an Appendix A fee table wider than a phone. The
   renderer wraps every legal table in a labelled, focusable scroll region, so
   the table keeps its columns and the region scrolls instead of the page. */
.legal-table-scroll {
  overflow-x: auto;
  margin: 1.4em 0 1.8em;
  -webkit-overflow-scrolling: touch;
}

.legal-table-scroll:focus-visible {
  outline: 2px solid var(--yield);
  outline-offset: 2px;
}

.legal-prose table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: clamp(0.82rem, 1vw, 0.9rem);
  line-height: 1.5;
}

.legal-prose th,
.legal-prose td {
  padding: 12px 14px;
  border: 1px solid var(--ink-rule);
  text-align: left;
  vertical-align: top;
}

.legal-prose th {
  color: var(--ink);
  background: var(--paper-strong);
  font-weight: 500;
}

.legal-prose td {
  color: var(--ink-soft);
}