@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 Product page: one comparison table over the three form factors. This
   replaced the per-segment tab panels when the solutions page was rebuilt. */

/* The hero is a title and a line under it, centred. These live here because
   the Product page does not load sections/product.css, where the centring rule
   for the catalogue hero used to serve both pages. */
.page-hero-inner--centred {
  text-align: center;
}

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

.page-hero-inner--centred .page-hero-body {
  margin-top: clamp(16px, 1.8vw, 22px);
}

/* ── Comparison table ─────────────────────────────────────────────────────── */
.compare-section {
  padding-top: 0;
}

/* The table is wide by nature, so it scrolls inside its own box rather than
   pushing the page sideways. */
.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-rule);
  background: rgb(var(--paper-rgb));
}

/* Fixed layout with the three product columns on equal thirds. Left to size
   themselves they came out different widths, so the centred ticks landed at a
   different offset in every column. */
.cmp-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}

.cmp-table thead th:first-child {
  width: 210px;
}

.cmp-table thead th:not(:first-child) {
  width: calc((100% - 210px) / 3);
}

.cmp-table th,
.cmp-table td {
  padding: clamp(14px, 1.5vw, 20px) clamp(14px, 1.6vw, 22px);
  vertical-align: top;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.08);
}

/* The capability column: mono, quiet, and the same width on every row. */
.cmp-table tbody th[scope="row"] {
  width: 210px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-right: 1px solid rgb(var(--ink-rgb) / 0.08);
}

.cmp-table thead th {
  border-bottom: 1px solid var(--ink-rule);
  background: var(--paper-soft);
}

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
  border-bottom: 0;
}

.cmp-name {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cmp-status {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 7px;
  background: var(--warning-soft);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warning);
}

.cmp-desc {
  display: block;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Its own row at the foot of the table: what the form factor is for — the job,
   not the audience. */
.cmp-best {
  display: block;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
}

.cmp-row-best th[scope="row"],
.cmp-row-best td {
  background: var(--paper-soft);
}

.cmp-docs {
  padding: 8px 14px;
  font-size: var(--text-xs);
}

/* Left, not centred: every other cell in the column — the description, the
   docs button, the best-for line — starts at the same edge, so a centred tick
   was the only thing in the column not lining up with the rest. */
.cmp-mark {
  text-align: left;
}

/* The tick is the thing the table is read for, so it carries weight as well as
   the yield green rather than sitting at body weight. */
.cmp-yes {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--yield);
}

.cmp-no {
  color: var(--ink-faint);
}

/* ── Phones ───────────────────────────────────────────────────────────────────
   840px of table in a 390px viewport showed one product column, clipped
   mid-sentence, with the capability labels scrolled off to the left — so a
   comparison table compared nothing and you could not tell which row a tick
   belonged to.

   The table still scrolls sideways, because three products side by side is the
   point of it, but the label column is pinned: whatever you swipe to, the row
   you are reading stays named. The columns narrow so two products are in view
   at once rather than one and a half. */

/* Pinned at every width, not just on phones: the table also scrolls in the
   narrow band just above the breakpoint, and a sticky cell in a container that
   is not scrolling does nothing, so this costs the desktop layout nothing. */
.cmp-table thead th:first-child,
.cmp-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 2;
  /* A sticky cell sits over the ones scrolling under it, so it cannot be
     transparent — it would show them through. */
  background: rgb(var(--paper-rgb));
}

.cmp-table thead th:first-child {
  z-index: 3;
  background: var(--paper-soft);
}

/* The Best for row is tinted, and the rule above is specific enough to have
   taken the tint off its label cell — leaving the band stopping halfway across
   the row. Restated here so the pinned cell keeps the colour of the row it
   belongs to. */
.cmp-table tbody .cmp-row-best th[scope="row"] {
  background: var(--paper-soft);
}

@media (max-width: 860px) {
  .compare-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .cmp-table {
    min-width: 580px;
  }

  .cmp-table thead th:first-child,
  .cmp-table tbody th[scope="row"] {
    width: 124px;
  }

  .cmp-table thead th:not(:first-child) {
    width: calc((100% - 124px) / 3);
  }

  .cmp-table th,
  .cmp-table td {
    padding: 12px 13px;
  }

  .cmp-table tbody th[scope="row"] {
    font-size: var(--text-2xs);
    letter-spacing: 0.1em;
  }

  .cmp-name {
    font-size: var(--text-base);
  }

  .cmp-desc,
  .cmp-best {
    font-size: var(--text-sm);
  }
}