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


.hero {
  --split-origin-x: 26%;
  --split-right-y: 63.5%;
  position: relative;
  min-height: var(--hero-height);
  overflow: clip;
  border-bottom: 1px solid var(--ink-rule);
  background: var(--paper-strong);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}

.hero-split-dark,
.hero-split-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-split-dark {
  clip-path: polygon(var(--split-origin-x) 0, 100% 0, 100% var(--split-right-y));
  background: var(--hero-dark);
  z-index: 0;
}

.hero-split-light {
  clip-path: polygon(0 12%, var(--split-origin-x) 0, 100% var(--split-right-y), 100% 100%, 0 100%);
  background: var(--paper);
  z-index: 0;
}

.hero-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.hero-shell {
  position: relative;
  z-index: 3;
  min-height: var(--hero-height);
  /* Top padding clears the fixed nav; the first row is the isometric art's
     breathing room, sized so the copy and CTA still land above the fold. */
  padding: 116px 0 64px;
  display: grid;
  grid-template-rows: minmax(140px, 24vh) auto;
  align-items: end;
}

.hero-copy {
  width: min(100%, 840px);
  margin: 0 auto;
  text-align: center;
}

.hero-copy h1 {
  max-width: 24ch;
}

/* The tagline runs long for display type — drop a step and widen the measure so
   it lands in three lines rather than five. */
.hero-title {
  max-width: 18ch;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: 1;
  margin-bottom: 16px;
}

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

.hero-subhead {
  width: min(100%, 640px);
  margin: 0 auto 34px;
  font-size: var(--text-lg);
  color: var(--ink-soft);
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Names what the sign-up button actually opens. */
.hero-note {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

@media (max-width: 820px) {
  .hero-shell {
    padding-top: 120px;
    grid-template-rows: minmax(120px, 22vh) auto;
  }
}

@media (max-width: 640px) {
  .hero-actions {
    align-items: stretch;
  }
}

.accent--rotate {
  display: block;
  transition: opacity 200ms ease, transform 220ms ease;
}

.accent--rotate.is-hidden {
  opacity: 0;
  transform: translateY(8px);
}


.proof-strip {
  background: var(--hero-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.proof-shell {
  padding: 40px 0 20px;
  display: grid;
  gap: 24px;
}

.proof-head {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.proof-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.52);
}

/* Marquee track — full strip width, fades at both edges */
.proof-marquee-track {
  position: relative;
  padding-bottom: 40px;
}

.proof-marquee-track::before,
.proof-marquee-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 1;
}

.proof-marquee-track::before {
  left: 0;
  background: linear-gradient(to right, var(--hero-dark), transparent);
}

.proof-marquee-track::after {
  right: 0;
  background: linear-gradient(to left, var(--hero-dark), transparent);
}

/* Static layout at larger sizes — centered, wrapping */
.proof-marquee {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 64px;
  width: auto;
  padding: 0 24px;
}

.proof-marquee-group {
  display: flex;
  align-items: center;
  gap: 0 64px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Hide duplicate group and fades at sizes where logos fit */
.proof-marquee-group + .proof-marquee-group,
.proof-marquee-track::before,
.proof-marquee-track::after {
  display: none;
}

/* Carousel removed per feedback — investor logos sit statically and simply wrap
   on narrow screens instead of auto-scrolling. */
@media (max-width: 900px) {
  .proof-marquee {
    gap: 20px 40px;
  }

  .proof-marquee-group {
    gap: 20px 40px;
  }
}

.proof-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.proof-chip img {
  display: block;
  max-width: 110px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity 280ms ease;
}

a.proof-chip:hover img {
  opacity: 1;
}

@keyframes proof-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .proof-marquee {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: 24px 48px;
  }

  .proof-marquee-group + .proof-marquee-group {
    display: none;
  }
}

/* Light variant (used on about page) */
.proof-strip--light {
  background: var(--paper-soft);
  border-bottom: 1px solid var(--ink-rule);
}

.proof-tag--light {
  background: rgb(var(--ink-rgb) / 0.06);
  color: var(--ink-faint);
}

.proof-strip--light .proof-marquee-track::before {
  background: linear-gradient(to right, var(--paper-soft), transparent);
}

.proof-strip--light .proof-marquee-track::after {
  background: linear-gradient(to left, var(--paper-soft), transparent);
}

.proof-strip--light .proof-chip img {
  opacity: 0.6;
}

.proof-strip--light a.proof-chip:hover img {
  opacity: 0.9;
}


.yield-market {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid rgb(var(--paper-rgb) / 0.15);
  border-bottom: 1px solid rgb(var(--paper-rgb) / 0.15);
  background: var(--hero-dark);
}

.yield-tape-visually-hidden,
.yield-tape-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.yield-market.is-unavailable .yield-tape-status {
  position: relative;
  width: var(--shell);
  height: auto;
  padding-block: 20px;
  margin: 0 auto;
  overflow: visible;
  clip: auto;
  color: rgb(var(--paper-rgb) / 0.58);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: normal;
}

.yield-market.is-unavailable .yield-tape-bar {
  display: none;
}

.yield-tape-bar {
  display: block;
  min-height: 62px;
  color: var(--paper);
  cursor: pointer;
  transition: background-color var(--transition);
}

.yield-tape-bar:hover {
  background: rgb(var(--paper-rgb) / 0.025);
}

.yield-tape-bar:focus-visible {
  outline: 2px solid var(--yield);
  outline-offset: -2px;
}

.yield-tape-bar-inner {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 112px;
  min-height: 62px;
  padding: 0;
}

.yield-tape-label,
.yield-tape-explore {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  background: rgb(var(--ink-rgb) / 0.9);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.yield-tape-label {
  gap: 9px;
  padding: 0 18px;
  border-right: 1px solid rgb(var(--paper-rgb) / 0.14);
}

.yield-tape-label strong {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.yield-tape-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yield-bright);
  box-shadow: 0 0 0 4px rgb(82 168 112 / 0.16);
}

.yield-tape-explore {
  justify-content: flex-end;
  padding: 0 18px;
  border-left: 1px solid rgb(var(--paper-rgb) / 0.14);
  color: rgb(var(--paper-rgb) / 0.58);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.yield-tape-viewport {
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}

.yield-tape-track {
  --ticker-duration: 84s;
  display: flex;
  width: max-content;
  min-width: 100%;
  animation: yield-tape-scroll var(--ticker-duration) linear infinite;
  will-change: transform;
}

.yield-tape-bar:hover .yield-tape-track,
.yield-tape-bar:focus-visible .yield-tape-track {
  animation-play-state: paused;
}

.yield-tape-set {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
}

.yield-tape-item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 61px;
  padding: 0 22px;
  border-right: 1px solid rgb(var(--paper-rgb) / 0.12);
  color: var(--paper);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.yield-tape-name {
  max-width: 240px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
}

.yield-tape-apy {
  color: var(--yield-bright);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.yield-tape-apy--unavailable {
  color: rgb(var(--paper-rgb) / 0.38);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.yield-tape-loading {
  display: flex;
  align-items: center;
  min-height: 61px;
  padding: 0 24px;
  color: rgb(var(--paper-rgb) / 0.44);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes yield-tape-scroll {
  to { transform: translateX(-50%); }
}

@media (max-width: 760px) {
  .yield-tape-bar-inner {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .yield-tape-label {
    padding: 0 12px;
  }

  .yield-tape-explore {
    display: none;
  }

  .yield-tape-item {
    padding-inline: 16px;
  }

  .yield-tape-name {
    max-width: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yield-tape-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: thin;
  }

  .yield-tape-track {
    animation: none;
  }

  .yield-tape-set[aria-hidden="true"] {
    display: none;
  }
}


.partner-strip {
  overflow: hidden;
  padding: clamp(28px, 3.2vw, 40px) 0 clamp(34px, 4vw, 48px);
  background: var(--paper-soft);
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
}

.partner-strip-head {
  margin-bottom: clamp(30px, 3.4vw, 44px);
  text-align: center;
}

.partner-strip-head h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.partner-marquee-track {
  position: relative;
}

.partner-marquee-track::before,
.partner-marquee-track::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: clamp(36px, 8vw, 120px);
  pointer-events: none;
}

.partner-marquee-track::before {
  left: 0;
  background: linear-gradient(to right, var(--paper-soft), transparent);
}

.partner-marquee-track::after {
  right: 0;
  background: linear-gradient(to left, var(--paper-soft), transparent);
}

.partner-marquee {
  display: flex;
  width: max-content;
  animation: partner-scroll 36s linear infinite;
}

.partner-marquee:hover,
.partner-marquee:focus-within {
  animation-play-state: paused;
}

.partner-marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(42px, 6vw, 88px);
  padding-right: clamp(42px, 6vw, 88px);
}

/* Each cell used to be a fixed 132–168px slot, so a narrow mark like Aave or
   Figure sat in a wide box and the gap to its neighbours read far larger than
   the gap beside a full-width mark like Janus Henderson. The cell now hugs its
   mark and the flex gap alone sets the rhythm. */
.partner-link {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  height: 52px;
  opacity: 0.62;
  transition: opacity var(--transition);
}

/* Most marks are already monochrome; Morpho and Invesco ship in colour, which
   made the strip read as two coloured logos among seven grey ones. Grayscale
   puts every mark on the same footing. */
.partner-link img {
  filter: grayscale(1);
}

/* Figure has no logo file in the repo yet, so its name stands in. The marks
   around it cap at 32px tall and run 94–168px wide, so the wordmark is boxed
   to the same height and sized to land inside that width band instead of
   sitting small and tall among them. */
.partner-wordmark {
  display: grid;
  place-items: center;
  height: 26px;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 1.8vw, 1.7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.partner-link:hover,
.partner-link:focus-visible {
  opacity: 1;
}

.partner-link:focus-visible {
  outline: 1px solid var(--yield);
  outline-offset: 8px;
}

/* One optical height for every mark, aspect preserved, instead of a max-height
   that left short logos (Aave rendered 16px tall) looking half-size. */
.partner-link img {
  display: block;
  width: auto;
  height: 26px;
  max-width: none;
  object-fit: contain;
}

/* Two-line lockups carry their name at half the box, so they take a little
   more height to match the single-line marks. */
.partner-link img[src$="janus-henderson.svg"] {
  height: 34px;
}

@keyframes partner-scroll {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .partner-marquee {
    width: auto;
    padding: 0 var(--shell-gutter, 24px);
    animation: none;
  }

  .partner-marquee-group {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding-right: 0;
  }

  .partner-marquee-group + .partner-marquee-group {
    display: none;
  }

  .partner-marquee-track::before,
  .partner-marquee-track::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .partner-strip {
    padding: 44px 0;
  }

  .partner-link {
    flex-basis: 124px;
    width: 124px;
    height: 44px;
  }

  .partner-link img {
    max-height: 28px;
  }
}


.usecase-section {
  background: #fff;
  padding-bottom: clamp(48px, 6vw, 80px);
}

.usecase-head {
  display: grid;
  gap: 14px;
  max-width: 920px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.usecase-head h2 {
  /* Inherit the site-wide serif heading treatment (font/size/leading/tracking
     from the global h2 rule) so this heading matches every other section. */
  margin-bottom: 0;
}

/* ── Pairs container — gap + background acts as consistent 1px border grid ── */

.usecase-pairs {
  display: grid;
  gap: 1px;
  background: var(--ink-rule);
  border: 1px solid var(--ink-rule);
}

/* ── Pair row ─────────────────────────────────────────────────────────────── */

/* #risk-engine points at the fourth card, so it needs to clear the fixed nav. */
.usecase-pair[id] {
  scroll-margin-top: 110px;
}

.usecase-pair {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink-rule);
  align-items: stretch;
}

.usecase-reveal-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.usecase-pair--reverse .usecase-card      { order: 2; }
.usecase-pair--reverse .usecase-animation { order: 1; }

/* ── Animation panel ─────────────────────────────────────────────────────── */

.usecase-animation {
  position: relative;
  overflow: hidden;
  min-height: clamp(260px, 30vw, 380px);
  background:
    radial-gradient(circle at 50% 48%, rgba(117, 194, 146, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(251, 253, 251, 0.98), rgba(235, 241, 237, 1));
}

.usecase-animation[data-surface-theme="dark"] {
  background:
    radial-gradient(circle at 50% 52%, rgba(75, 195, 128, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(24, 38, 33, 0.96), rgba(14, 23, 20, 1));
}

.usecase-animation-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Product-demo panels keep the site's subtle grid texture (same 32px line grid
   as .grid-bg) layered over the standard animation-panel gradient. */
.usecase-yield-demo,
.usecase-cpw-demo,
.usecase-rep-demo,
.usecase-rre-demo {
  --grid-line-color: rgb(var(--ink-rgb) / 0.05);
  background:
    linear-gradient(var(--grid-line-color) 1px, transparent 1px) 0 0 / var(--grid-cell) var(--grid-cell),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px) 0 0 / var(--grid-cell) var(--grid-cell),
    radial-gradient(circle at 50% 48%, rgba(117, 194, 146, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(251, 253, 251, 0.98), rgba(235, 241, 237, 1));
}

/* ── "Earn yield" toggle + live balance (Acquire & retain use case) ───────── */
.usecase-yield-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.yld-card {
  width: min(88%, 320px);
  display: grid;
  gap: 20px;
  padding: 22px 24px 20px;
  background: rgb(var(--paper-rgb));
  border: 1px solid rgba(25, 33, 29, 0.12);
  box-shadow: 0 20px 44px -30px rgba(25, 33, 29, 0.5);
}

.yld-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.yld-card-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 360ms ease;
}

.yld-switch {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(25, 33, 29, 0.18);
  transition: background-color 360ms ease;
}

.yld-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.yld-card-amount {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.8rem, 4.4vw, 2.4rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.yld-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
}

.yld-card-gain {
  color: var(--yield);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 320ms ease;
}

.yld-card-apy {
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Active state — yield turned on */
.usecase-yield-demo.is-on .yld-switch {
  background: var(--yield);
}

.usecase-yield-demo.is-on .yld-switch-knob {
  transform: translateX(18px);
}

.usecase-yield-demo.is-on .yld-card-label {
  color: var(--yield);
}

.usecase-yield-demo.is-on .yld-card-gain {
  opacity: 1;
}

/* ── Create-portfolio-wallet mock (Generate revenue streams use case) ────── */
.usecase-cpw-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cpw-card {
  width: min(90%, 360px);
  display: grid;
  gap: 0;
  background: rgb(var(--paper-rgb));
  border: 1px solid rgba(25, 33, 29, 0.12);
  box-shadow: 0 20px 44px -30px rgba(25, 33, 29, 0.5);
}

.cpw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(25, 33, 29, 0.1);
}

.cpw-title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cpw-est {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cpw-est-label {
  color: var(--ink-faint);
}

.cpw-est-value {
  font-weight: 500;
  color: var(--yield);
  font-variant-numeric: tabular-nums;
}

.cpw-row {
  display: grid;
  gap: 8px;
  padding: 11px 18px;
}

.cpw-row + .cpw-row {
  border-top: 1px solid rgba(25, 33, 29, 0.06);
}

.cpw-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 10px;
}

.cpw-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cpw-apy {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.cpw-alloc {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 4ch;
}

.cpw-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(25, 33, 29, 0.1);
}

.cpw-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--yield);
}

.cpw-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--yield);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(25, 33, 29, 0.25);
}

/* ── Card base ──────────────────────────────────────────────────────────── */

.usecase-card {
  position: relative;
  overflow: hidden;
  display: grid;
  /* Centred: the copy is shorter than the animation beside it, so top-aligning
     left it floating against the panel's midpoint. */
  align-content: center;
  gap: 16px;
  padding: 32px;
  background: #fff;
}

/* ── Card copy ──────────────────────────────────────────────────────────── */

.usecase-copy {
  max-width: 600px;
}

.usecase-copy p {
  font-size: var(--text-lg);
}

.usecase-copy .usecase-footnote {
  margin-top: 12px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-faint);
}

.usecase-copy h3 {
  margin-bottom: 10px;
  font-size: var(--text-2xl);
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* ── Mobile: stack, card always on top ──────────────────────────────────── */

/* ── Activity filter + export mock (Stay compliant and transparent) ───── */
/* Modelled on the Activity view in the Portal: filters across the top, a record
   count, and an export that completes. */
.usecase-rep-demo,
.usecase-rre-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.rep-card {
  --rep-row-h: 44px;
  --rep-row-count: 6;
  width: min(100%, 396px);
  background: rgb(var(--paper-rgb));
  border: 1px solid rgba(25, 33, 29, 0.12);
  box-shadow: 0 20px 44px -30px rgba(25, 33, 29, 0.5);
}

.rep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(25, 33, 29, 0.1);
}

.rep-title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rep-head-actions {
  display: flex;
  gap: 6px;
}

.rep-btn {
  padding: 5px 9px;
  border: 1px solid rgba(25, 33, 29, 0.16);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

/* Filters reads as held open while the selects are being set. */
.rep-btn.is-on {
  border-color: rgba(25, 33, 29, 0.36);
  background: rgba(25, 33, 29, 0.07);
  color: var(--ink);
}

.rep-btn.is-armed {
  border-color: rgba(25, 33, 29, 0.36);
  background: rgba(25, 33, 29, 0.12);
  color: var(--ink);
}

.rep-btn.is-done {
  border-color: rgb(var(--yield-rgb) / 0.4);
  background: rgb(var(--yield-rgb) / 0.1);
  color: var(--yield);
}

.rep-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 16px;
  background: var(--paper-soft);
  border-bottom: 1px solid rgba(25, 33, 29, 0.08);
}

.rep-field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The select shows its value; a set filter darkens so the narrowing reads. */
.rep-select {
  display: block;
  margin-top: 5px;
  padding: 6px 8px;
  background: rgb(var(--paper-rgb));
  border: 1px solid rgba(25, 33, 29, 0.14);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 200ms ease, border-color 200ms ease;
}

.rep-select.is-set {
  border-color: rgba(25, 33, 29, 0.34);
  color: var(--ink);
  font-weight: 500;
}

.rep-count {
  margin: 0;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(25, 33, 29, 0.08);
  font-variant-numeric: tabular-nums;
}

/* The rows area is pinned to its full height, so filtering never resizes the
   card — rows collapse into fixed space rather than shrinking the panel. */
.rep-rows {
  height: calc(var(--rep-row-h) * var(--rep-row-count));
  overflow: hidden;
}

/* Rows collapse rather than dim, because that is what a filter does. The
   border sits on the row itself so a collapsed row leaves no rule behind. */
.rep-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  max-height: var(--rep-row-h);
  padding: 10px 16px;
  overflow: hidden;
  border-bottom: 1px solid rgba(25, 33, 29, 0.06);
  transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    padding-top 320ms cubic-bezier(0.22, 1, 0.36, 1),
    padding-bottom 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}

.rep-row:last-child {
  border-bottom: 0;
}

.rep-row.is-out {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
  opacity: 0;
}

/* The three types the Activity view shows, matched to its own pill colours:
   a pale blue rebalance, a green deposit and a red withdrawal, each with a
   slightly darker border. Matched by eye from a screenshot of the Portal, so
   worth a side-by-side check against the real thing. */
.rep-pill {
  justify-self: start;
  padding: 3px 7px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rep-pill--rebalance {
  background: #e8eff7;
  border-color: #c3d4e6;
  color: #4a6e96;
}

.rep-pill--deposit {
  background: #dfefe4;
  border-color: #b4dcc0;
  color: #2e7d4e;
}

.rep-pill--withdrawal {
  background: #fbe4e4;
  border-color: #efc3c3;
  color: #bf443e;
}

.rep-row-name {
  overflow: hidden;
  font-size: var(--text-sm);
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rep-row-amt {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* ── Risk engine rule builder (Keep your balances liquid use case) ────── */
/* Moved here from sections/risk-engine.css when the standalone risk engine
   section was folded into the use case cards. The rules are unchanged. */
.rre-card {
  width: min(100%, 380px);
  background: rgb(var(--paper-rgb));
  border: 1px solid rgba(25, 33, 29, 0.12);
  box-shadow: 0 20px 44px -30px rgba(25, 33, 29, 0.5);
}

.rre-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(25, 33, 29, 0.1);
}

.rre-title,
.rre-state {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rre-title {
  color: var(--ink-soft);
}

.rre-state {
  color: var(--yield);
  transition: color 240ms ease;
}

.rre-state.is-alert {
  color: var(--warning);
}

.rre-field {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 10px 18px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rre-field.is-in {
  opacity: 1;
  transform: none;
}

.rre-field + .rre-field {
  border-top: 1px solid rgba(25, 33, 29, 0.06);
}

.rre-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rre-value {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
}

.rre-value--num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.rre-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(25, 33, 29, 0.08);
  border-top: 1px solid rgba(25, 33, 29, 0.1);
}

.rre-step {
  padding: 12px 6px;
  background: rgb(var(--paper-rgb));
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-faint);
  transition: color 260ms ease, background-color 260ms ease;
}

.rre-step.is-on {
  color: var(--yield);
  background: rgb(var(--yield-rgb) / 0.08);
}

.rre-step.is-alert {
  color: var(--warning);
  background: var(--warning-soft);
}


@media (max-width: 820px) {
  .usecase-pair {
    grid-template-columns: 1fr;
  }

  .usecase-pair--reverse .usecase-card      { order: 1; }
  .usecase-pair--reverse .usecase-animation { order: 2; }

  .usecase-animation {
    min-height: clamp(200px, 50vw, 280px);
  }

  .usecase-card {
    padding: 32px 24px;
  }
}


/* Ground Portal — the demo you sign up for. Same paper-soft
   ground as the risk engine above it, so the two read as a pair: what the
   engine does, then where you can go and watch it do it. */
.portal-section {
  --grid-bg-color: var(--paper-soft);
  --grid-line-color: rgb(var(--ink-rgb) / 0.05);
}

.portal-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
}

.portal-copy h2 {
  margin: 0;
  font-size: var(--text-2xl);
}

.portal-copy > p {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: var(--text-md);
  color: var(--ink-soft);
}

.portal-actions {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
}

/* The product itself, rather than a list of what is in it. */
.portal-shot {
  border: 1px solid var(--ink-rule);
  background: #fff;
  box-shadow: 0 18px 44px rgb(var(--ink-rgb) / 0.08);
}

.portal-shot img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .portal-layout {
    grid-template-columns: 1fr;
  }
}


.cta-section {
  --grid-bg-color: var(--paper-soft);
  --grid-line-color: rgb(var(--ink-rgb) / 0.05);
  --grid-underlay-image: none;
  --grid-underlay-size: auto;
  --grid-underlay-position: 0 0;
}

/* ── CTA card reveal animation ──────────────────────────────────────────── */

.js .usecase-card--cta {
  background: transparent;
  transition: background 0.35s ease;
}

.js .usecase-card--cta > *:not(canvas) {
  position: relative;
  z-index: 1;
}

.js .usecase-card--cta h2,
.js .usecase-card--cta p,
.js .usecase-card--cta .usecase-cta-actions {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .usecase-card--cta.is-revealed {
  background: var(--hero-dark);
  border-color: transparent;
  box-shadow: none;
}

.js .usecase-card--cta.is-revealed h2,
.js .usecase-card--cta.is-revealed p,
.js .usecase-card--cta.is-revealed .usecase-cta-actions {
  opacity: 1;
  transform: none;
}

/* ── Shimmer canvas overlay ─────────────────────────────────────────────── */

.usecase-card-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── CTA card ───────────────────────────────────────────────────────────── */

.usecase-card--cta {
  background: var(--hero-dark);
  border-color: transparent;
  box-shadow: none;
  padding: 0;
  max-width: 75%;
  margin-inline: auto;
  width: 100%;
}

.usecase-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.usecase-cta-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
  padding: clamp(40px, 6vw, 64px);
  max-width: 720px;
}

.usecase-cta-visual {
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

.usecase-cta-grid-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.usecase-cta-heading {
  color: rgb(var(--paper-rgb));
  margin-bottom: 12px;
  font-size: var(--text-3xl);
}

.usecase-cta-body {
  color: rgb(var(--paper-rgb) / 0.64);
  margin: 0;
}

.usecase-cta-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.button-cta-primary {
  background: rgb(var(--yield-rgb));
  color: rgb(var(--paper-rgb));
  border-color: transparent;
  white-space: nowrap;
}

.button-cta-primary:hover {
  background: var(--yield-bright);
  border-color: transparent;
}

.button-cta-docs {
  border-color: rgb(var(--paper-rgb) / 0.22);
  color: rgb(var(--paper-rgb) / 0.76);
}

.button-cta-docs:hover {
  border-color: rgb(var(--paper-rgb) / 0.48);
  color: rgb(var(--paper-rgb));
  background: rgb(var(--paper-rgb) / 0.08);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .usecase-card--cta {
    max-width: 100%;
  }

  .usecase-cta-inner {
    grid-template-columns: 1fr;
  }

  .usecase-cta-visual {
    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;
  }
}