@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;
}

/* The products page. */
/* The hero is a title alone now that the jump row is gone, so it is centred. */
.page-hero-inner--centred {
  text-align: center;
}

.page-hero-inner--centred h1 {
  margin-left: auto;
  margin-right: auto;
}

/* ── The three form factors, one three-up block ────────────────────────────── */
.product-row {
  --grid-line-color: rgb(var(--ink-rgb) / 0.04);
}

.product-row-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-rule);
  border: 1px solid var(--ink-rule);
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 36px);
  background: rgba(255, 255, 255, 0.76);
}

.product-card-scene.value-icon {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 180px;
  margin: 0 0 clamp(20px, 2.2vw, 28px);
}

.product-card-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card h2 {
  margin: 10px 0 0;
  font-size: var(--text-xl);
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.product-card-lead {
  margin: 14px 0 0;
  font-size: var(--text-base);
  color: var(--ink-soft);
}

/* Pinned to the bottom so the three buttons line up whatever the copy does. */
.product-card-actions {
  margin: auto 0 0;
  padding-top: clamp(24px, 2.6vw, 32px);
}

@media (max-width: 980px) {
  .product-row-grid {
    grid-template-columns: 1fr;
  }

  .product-card-scene.value-icon {
    display: none;
  }
}


/* "Launching soon" beside a product name, in the warning amber so it reads as
   a caveat rather than a feature. */
.product-status {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 7px;
  border: 1px solid rgb(var(--warning-rgb) / 0.4);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  color: var(--warning);
}

/* The yield table follows the product cards directly, and a full section's
   padding on both sides put a screen of nothing between them. */
.products-section#yield {
  padding-top: clamp(30px, 3.2vw, 48px);
}

/* Products page — the tokenized-fund table. */
.product-group {
  margin-top: clamp(48px, 6vw, 76px);
}

.product-group-head {
  max-width: 76ch;
  margin-bottom: 24px;
}

/* Wide tables scroll inside their own container rather than the page. */
.product-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-rule);
  background: rgba(255, 255, 255, 0.66);
}

/* Each category renders its own table, so without a fixed layout every one
   sizes its columns to its own content and TYPE lands somewhere different in
   each. Fixed widths keep the four tables in register down the page. */
.product-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}

/* Every category shares the same columns and widths. */
.product-table thead th:nth-child(1) { width: 44%; }
.product-table thead th:nth-child(2) { width: 14%; }
.product-table thead th:nth-child(3) { width: 28%; }
.product-table thead th:nth-child(4) { width: 14%; }

/* The one column heading that is not grey, matching the liquidity sheet.
   Scoped through .product-table thead, which sets the default colour and
   would otherwise outrank a bare class. */
.product-table thead th.product-head--yield {
  color: var(--yield);
}

/* Left-aligned over right-aligned figures, this heading floated in the middle
   of its own column. */
.product-head--numeric {
  text-align: right;
}

.product-table thead th {
  padding: 14px 14px;
  border-bottom: 1px solid var(--ink-rule);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.54);
  white-space: nowrap;
}

.product-table tbody tr {
  border-bottom: 1px solid rgb(var(--border-subtle-rgb) / 0.6);
  transition: background-color var(--transition);
}

.product-table tbody tr:last-child {
  border-bottom: none;
}

.product-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* Baseline, not top. Each cell sets its own type size -- the product name at
   text-base, the stablecoin in mono at text-2xs, the rate at text-sm -- and
   aligning their boxes left the stablecoin sitting 8px below everything else
   on the row. Table cells align their first line boxes on a shared baseline
   for exactly this. */
.product-table td,
.product-table tbody th {
  padding: 16px 14px;
  vertical-align: baseline;
  font-weight: 400;
}

.product-name {
  display: block;
  font-size: var(--text-base);
  color: var(--ink);
}

.product-fund {
  display: block;
  margin-top: 3px;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--ink-soft);
}

.product-issuer {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The product name links to that fund or vault's own page, where we have one. */
.product-name-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(var(--ink-rgb) / 0.28);
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms ease;
}

.product-name-link:hover,
.product-name-link:focus-visible {
  text-decoration-color: currentColor;
}

.product-kind,
.product-currency {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.product-currency {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
}

.product-numeric {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.product-blank {
  color: var(--ink-faint);
}

.product-note {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  color: var(--yield);
}

/* The deposit token reads as data, not prose, so it takes the mono face at
   label size like the rest of the table's figures. */
.product-coins {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ── Exit columns ─────────────────────────────────────────────────────────────
   These read as sentences, not figures, so they stay in the text face at small
   size rather than taking the mono treatment the APY column uses. */
.product-exit-body {
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--ink-soft);
}

.product-exit-line {
  display: block;
}

.product-exit-line + .product-exit-line {
  margin-top: 6px;
}

/* Only present when a collapsed product's two routes disagree, which is the one
   case where the row cannot say a single thing. */
.product-exit-token {
  margin-left: 9px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* The column heading says this at table widths. */
.product-exit-label {
  display: none;
}

/* Same treatment as the product name's link, so a reader learns one thing
   about what is clickable on this page. */
.product-exit-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(var(--ink-rgb) / 0.28);
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms ease;
}

.product-exit-link:hover,
.product-exit-link:focus-visible {
  text-decoration-color: currentColor;
}

.product-exit-mark {
  color: var(--ink-faint);
  text-decoration: none;
  padding-left: 2px;
}

a.product-exit-mark:hover,
a.product-exit-mark:focus-visible {
  color: var(--ink);
}

.products-footnote {
  margin: clamp(32px, 4vw, 48px) 0 0;
  max-width: 76ch;
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

/* ── Phones and small tablets ─────────────────────────────────────────────────
   A table wider than its container puts the APY — the one number this page
   exists to publish — off the right edge, behind a horizontal scroll nobody is
   told about. Below this width each row stops being a table row and becomes a
   block: the name and the rate on one line, the fund and its deposit token
   beneath, the exits under those. Nothing is hidden and nothing scrolls
   sideways.

   The breakpoint is set to meet the table's own min-width rather than picked
   as a round phone number: the shell leaves a table about 202px narrower than
   the viewport, so a 820px table needs 1022px of window. Anything narrower
   stacks, which is why this is 1024 and not 760 — between the two the table
   scrolled inside its box with nothing to say so.

   The DOM is untouched, so the live-rate script still finds [data-apy-cell] and
   the sort still reorders real <tr>s. */
@media (max-width: 1024px) {
  .product-table-wrap {
    overflow-x: visible;
  }

  .product-table {
    display: block;
    min-width: 0;
    table-layout: auto;
  }

  /* Column headings label a shape that no longer exists here. */
  .product-table thead {
    display: none;
  }

  .product-table tbody {
    display: block;
  }

  .product-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 14px;
    padding: 16px 18px;
  }

  .product-table td,
  .product-table tbody th {
    padding: 0;
  }

  /* Placed explicitly, so this does not depend on the order of cells in the
     markup. */
  .product-table tbody th[scope="row"] {
    grid-column: 1;
    grid-row: 1 / span 2;
    /* A th blockified into a grid item does not stretch to its track in
       Chrome -- justify-self: stretch is ignored and the cell sizes to its
       longest word, so "Morpho August USDC V2" broke across three lines in a
       259px column. An explicit width is the one thing that fills it. */
    width: 100%;
  }

  .product-table tbody .product-numeric {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--text-base);
  }

  /* The deposit token sits directly under the rate rather than floating in the
     middle of whatever height the name block gives the row. */
  .product-table tbody td:not(.product-numeric):not(.product-exit) {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 4px;
    text-align: right;
  }

  /* The exits are sentences, not figures. Squeezed into the right-hand column
     under the rate they wrapped four and five lines deep; given the full width
     below the title they read as the one or two lines they are. */
  .product-table tbody .product-exit {
    grid-column: 1 / -1;
    margin-top: 12px;
    text-align: left;
  }

  .product-table tbody .product-exit:empty {
    margin-top: 0;
  }

  .product-table tbody .product-exit + .product-exit {
    margin-top: 8px;
  }

  /* No column heading reaches this far, so each term names itself -- and
     instant exit keeps the green its heading has at table widths. */
  .product-exit-label {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .product-exit-label {
    color: var(--yield);
  }

  /* The attribution is the longest line in the row and the least urgent, so it
     gives up its tracking rather than pushing every row to four lines. */
  .product-issuer {
    margin-top: 7px;
    letter-spacing: 0.06em;
  }

  /* On a touch screen a hover state only ever fires as a highlight that sticks. */
  .product-table tbody tr:hover {
    background: none;
  }
}

.product-availability {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 400;
}