/* Direction C — Refraction · glass / premium
   Extracted verbatim from the design bundle's direction-c.html <style> block. */
:root {
  --fps-accent: #5be1f8;
  --fps-accent-2: #00a3ff;
  --fps-bg: #02050d;
}
html, body { background: #02050d; }
body {
  background:
    radial-gradient(900px 700px at 70% 40%, rgba(138,91,255,0.20), transparent 60%),
    radial-gradient(1100px 700px at 30% 50%, rgba(91,225,248,0.16), transparent 60%),
    radial-gradient(800px 800px at 50% 100%, rgba(0,163,255,0.10), transparent 60%),
    #02050d;
}

.hero-c { min-height: 100vh; padding: 36px 0 40px; }
.hero-c-grid {
  display: grid;
  /* Text column has a 380px floor so the big "infrastructure." title
     never overflows; the canvas column gets the remainder. On wide
     desktops the canvas ends up ~1.5x the size of the old 50/50 split. */
  grid-template-columns: minmax(380px, 0.6fr) minmax(0, 1.4fr);
  gap: 32px;
  align-items: center; min-height: calc(100vh - 200px);
}
.hero-c-grid > * { min-width: 0; }
/* Proof strip spans the full hero width and sits below the grid (lower than
   when it was nested inside .hero-content). */
.hero-c .proof { margin-top: 56px; }
.hero-c-canvas {
  position: relative; aspect-ratio: 1 / 1; max-width: 1100px; width: 100%; margin-left: auto;
  /* Soft radial vignette only at the very edge so the canvas blends into
     the page bg without eating into where actual scene content lives.
     Most of the canvas (out to 88% radius) stays fully opaque. */
  -webkit-mask-image: radial-gradient(ellipse at center,
    rgba(0,0,0,1) 88%,
    rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse at center,
    rgba(0,0,0,1) 88%,
    rgba(0,0,0,0) 100%);
}
#fps-hero-c { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Big diaphanous label behind the canvas */
.glass-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font: 900 clamp(120px, 16vw, 220px) 'Anybody', system-ui;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.07);
  letter-spacing: -0.04em; z-index: -1; user-select: none; pointer-events: none;
  white-space: nowrap; line-height: 0.8;
}

.float-meta {
  position: absolute; pointer-events: none; z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.04); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  font: 600 9px 'Chakra Petch'; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--fps-text-dim);
}
.float-meta b { color: var(--fps-text); font-size: 11px; font-family: 'Anybody'; }

.chrom-text {
  position: relative;
}
.chrom-text::before, .chrom-text::after {
  content: attr(data-text); position: absolute; inset: 0;
  mix-blend-mode: screen; pointer-events: none;
}
.chrom-text::before { color: var(--fps-cyan); transform: translate(-2px, 0); opacity: 0.5; }
.chrom-text::after  { color: var(--fps-uv);   transform: translate( 2px, 0); opacity: 0.5; }

/* Premium hero typo */
.hero-c .hero-title {
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: -0.025em;
  line-height: 0.92;
}

@media (max-width: 980px) {
  .hero-c-grid { grid-template-columns: 1fr; }
  .hero-c-canvas { margin: 0 auto; max-width: 520px; }
}

/* ─── Achievement cards ───────────────────────────────────────────────── */
/* shared.css positions a 120px trophy at top:12, right:12 inside the card,
   but doesn't reserve space for it — long titles wrap into the badge. Reserve
   space on the text children so the title/place/sub stay clear of the SVG. */
.ach-card .ach-place,
.ach-card .ach-title,
.ach-card .ach-sub {
  padding-right: 140px;
}

/* ─── About section ───────────────────────────────────────────────────── */
.about-body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: start;
}
.about-prose {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fps-text-dim);
}
.about-prose p { margin: 0; }
.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.about-stat { padding: 18px; gap: 6px; }
.about-stat-val {
  font-size: 36px;
  color: var(--fps-text);
  line-height: 1;
}
.about-stat-key {
  font-size: 11px;
  color: var(--fps-text-mute);
  margin: 0;
}

/* Team row inside About */
.about-team {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.team-card {
  position: relative;
  border: 1px solid var(--fps-line);
  border-radius: var(--fps-radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .25s ease, background .25s ease;
}
.team-card:hover {
  border-color: color-mix(in oklab, var(--fps-accent) 40%, var(--fps-line));
  background: color-mix(in oklab, var(--fps-accent) 4%, transparent);
}
.team-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font: 800 16px 'Anybody', 'Chakra Petch', system-ui;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--fps-accent), var(--fps-accent-2));
  color: #001018;
  /* pointy-top hex — matches the logo and the 3D glass hex */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  margin-bottom: 4px;
}
.team-name {
  font-size: 18px;
  color: var(--fps-text);
}
.team-role {
  font: 600 10px 'Chakra Petch', system-ui;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fps-accent);
}
.team-bio {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fps-text-dim);
  margin: 0;
}

@media (max-width: 880px) {
  .about-body { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-team { grid-template-columns: 1fr; }
}

/* Materios orb gentle float — combined with mouse parallax on the outer wrapper. */
@keyframes materios-orb-float {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50%      { transform: translateY(-6px) rotate(2.5deg) scale(1.03); }
}

/* ─── Witness Network landing ────────────────────────────────────────────── */
#witness-globe-canvas,
#materios-hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

/* "Preprod live" pill above the headline */
.witness-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: color-mix(in oklab, var(--fps-accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 30%, transparent);
  font: 600 11px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: color-mix(in oklab, var(--fps-accent) 70%, white);
  margin-bottom: 22px;
}
.witness-tick {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fps-accent);
  box-shadow: 0 0 12px var(--fps-accent);
  animation: witness-tick-pulse 2.4s ease-in-out infinite;
}
@keyframes witness-tick-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

/* "How it works" step cards — extend .dev-card with step numbering + icon. */
.dev-card .step-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.dev-card .step-num {
  font: 900 36px 'Anybody', system-ui;
  background: linear-gradient(135deg, var(--fps-accent), var(--fps-accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.dev-card .step-icon {
  width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--fps-accent) 35%, transparent);
  background: color-mix(in oklab, var(--fps-accent) 6%, transparent);
  color: var(--fps-accent);
  display: grid; place-items: center;
}
.dev-card .step-title {
  font-size: 20px; line-height: 1; color: var(--fps-text);
}
.dev-card .step-body {
  font-size: 13px; line-height: 1.6;
  color: var(--fps-text-dim); margin: 0;
}

/* Honest disclaimer block — refraction-themed callout */
.honest {
  border: 1px solid color-mix(in oklab, var(--fps-accent) 22%, var(--fps-line));
  background: linear-gradient(180deg, color-mix(in oklab, var(--fps-accent) 3%, transparent), transparent);
  border-radius: var(--fps-radius-lg);
  padding: 36px 40px;
  max-width: 880px; margin: 0 auto;
}
.honest-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.honest-list li {
  display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: start;
  color: var(--fps-text-dim);
  font-size: 14px; line-height: 1.6;
}
.honest-tag {
  font: 600 10px 'Chakra Petch'; text-transform: uppercase; letter-spacing: 0.18em;
  padding: 6px 10px; border-radius: 4px; text-align: center;
  border: 1px solid var(--fps-line);
}
.honest-tag.live  { color: var(--fps-accent);  border-color: color-mix(in oklab, var(--fps-accent) 45%, transparent); background: color-mix(in oklab, var(--fps-accent) 8%, transparent); }
.honest-tag.soon  { color: var(--fps-text-mute); }
.honest-tag.small { color: var(--fps-text-mute); }

@media (max-width: 780px) {
  .honest-list li { grid-template-columns: 1fr; gap: 6px; }
  .honest { padding: 28px 24px; }
}

/* ─── Why receipts (Sinek-style first principles) ───────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.why-card {
  border: 1px solid var(--fps-line);
  border-radius: var(--fps-radius-lg);
  padding: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.why-card:hover {
  border-color: color-mix(in oklab, var(--fps-accent) 45%, var(--fps-line));
  background: color-mix(in oklab, var(--fps-accent) 3%, transparent);
  transform: translateY(-2px);
}
.why-num {
  font: 900 52px 'Anybody', system-ui;
  background: linear-gradient(135deg, var(--fps-accent), var(--fps-accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 18px;
}
.why-title {
  font-size: 22px;
  line-height: 1.15;
  color: var(--fps-text);
  margin: 0 0 12px 0;
}
.why-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fps-text-dim);
  margin: 0;
}
@media (max-width: 880px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ─── Probe classes grid ─────────────────────────────────────────────────── */
.probe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.probe-card {
  border: 1px solid var(--fps-line);
  border-radius: 12px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.probe-card:hover {
  border-color: color-mix(in oklab, var(--fps-accent) 45%, var(--fps-line));
  background: color-mix(in oklab, var(--fps-accent) 3%, transparent);
  transform: translateY(-2px);
}
.probe-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.probe-icon {
  width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--fps-accent) 35%, transparent);
  background: color-mix(in oklab, var(--fps-accent) 6%, transparent);
  color: var(--fps-accent);
  display: grid; place-items: center;
}
.probe-status {
  font: 600 10px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.18em;
  padding: 5px 9px; border-radius: 4px;
}
.probe-status.live {
  color: var(--fps-accent);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 45%, transparent);
  background: color-mix(in oklab, var(--fps-accent) 8%, transparent);
}
.probe-status.soon {
  color: var(--fps-text-mute);
  border: 1px solid var(--fps-line);
}
.probe-status.explore {
  color: var(--fps-text-mute);
  border: 1px dashed color-mix(in oklab, var(--fps-text-mute) 60%, transparent);
}
.probe-name {
  font-size: 20px; line-height: 1.05; color: var(--fps-text);
  margin: 0 0 10px 0;
}
.probe-body {
  font-size: 13px; line-height: 1.6; color: var(--fps-text-dim);
  margin: 0;
}
@media (max-width: 880px) {
  .probe-grid { grid-template-columns: 1fr; }
}

/* ─── Roadmap timeline ──────────────────────────────────────────────────── */
.roadmap-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
  padding-top: 6px;
}
/* Connector line behind the hex row — flows from accent → fade so v1's hex
   feels like the "lit" anchor and downstream phases trail off. */
.roadmap-line {
  position: absolute;
  top: 42px; /* hex (72px tall) center ≈ 36px + 6px padding-top */
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--fps-accent) 70%, transparent) 0%,
    color-mix(in oklab, var(--fps-accent) 40%, transparent) 25%,
    color-mix(in oklab, var(--fps-accent) 18%, transparent) 60%,
    color-mix(in oklab, var(--fps-accent) 6%, transparent)  100%);
  z-index: 0;
}
.roadmap-phase {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
  position: relative; z-index: 1;
}
.roadmap-hex {
  width: 64px; height: 72px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 22%, var(--fps-line));
  /* Use a CSS box-shadow as the visual border since clip-path strips the
     element's border — the inset shadow paints the hex outline. */
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fps-accent) 22%, var(--fps-line));
  position: relative;
}
.roadmap-hex-num {
  font: 900 22px 'Anybody', system-ui;
  letter-spacing: -0.02em;
  color: var(--fps-text-mute);
}
.roadmap-phase.live .roadmap-hex {
  background: linear-gradient(135deg, var(--fps-accent), var(--fps-accent-2));
  box-shadow:
    inset 0 0 0 1px var(--fps-accent),
    0 0 40px color-mix(in oklab, var(--fps-accent) 55%, transparent);
  animation: roadmap-hex-pulse 3.2s ease-in-out infinite;
}
.roadmap-phase.live .roadmap-hex-num { color: #001018; }
@keyframes roadmap-hex-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--fps-accent), 0 0 36px color-mix(in oklab, var(--fps-accent) 45%, transparent); }
  50%      { box-shadow: inset 0 0 0 1px var(--fps-accent), 0 0 58px color-mix(in oklab, var(--fps-accent) 70%, transparent); }
}
.roadmap-status {
  font: 600 11px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--fps-text-mute);
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
}
.roadmap-phase.live .roadmap-status { color: var(--fps-accent); }
.roadmap-tick {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fps-accent);
  box-shadow: 0 0 10px var(--fps-accent);
}
.roadmap-title {
  font-size: 17px; line-height: 1.15; color: var(--fps-text);
  margin: 2px 0;
}
.roadmap-body {
  font-size: 12.5px; line-height: 1.55; color: var(--fps-text-dim);
  max-width: 200px;
}

@media (max-width: 980px) {
  .roadmap-track { grid-template-columns: 1fr; gap: 28px; padding-top: 0; }
  .roadmap-line { display: none; }
  .roadmap-body { max-width: 480px; }
}

/* ─── Materios resource cards ──────────────────────────────────────────── */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.resource-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px;
  border: 1px solid var(--fps-line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  color: var(--fps-text);
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.resource-card:hover {
  border-color: color-mix(in oklab, var(--fps-accent) 45%, var(--fps-line));
  background: color-mix(in oklab, var(--fps-accent) 4%, transparent);
  transform: translateY(-2px);
}
.resource-icon {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid color-mix(in oklab, var(--fps-accent) 35%, transparent);
  background: color-mix(in oklab, var(--fps-accent) 6%, transparent);
  color: var(--fps-accent);
  display: grid; place-items: center;
}
.resource-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.resource-title {
  font: 700 16px 'Anybody', system-ui;
  color: var(--fps-text);
  display: inline-flex; align-items: center; gap: 6px;
}
.resource-ext {
  color: var(--fps-text-mute);
  display: inline-flex;
}
.resource-card:hover .resource-title { color: var(--fps-accent); }
.resource-desc {
  font-size: 13px; line-height: 1.55; color: var(--fps-text-dim);
}
@media (max-width: 880px) {
  .resource-grid { grid-template-columns: 1fr; }
}

/* Linkified probe cards (use case cards that navigate). */
.probe-card.probe-card-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.probe-card.probe-card-link:hover {
  cursor: pointer;
}

/* ─── Chain Explorer ──────────────────────────────────────────────────── */
/* Back-to-materios link */
.explorer-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fps-text-mute);
  text-decoration: none;
  font: 600 12px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-bottom: 22px;
  transition: color .2s ease;
}
.explorer-back:hover { color: var(--fps-accent); }
.explorer-back-arrow {
  display: inline-flex;
  transform: rotate(180deg);  /* point ← left */
  transition: transform .2s ease;
}
.explorer-back:hover .explorer-back-arrow { transform: rotate(180deg) translateX(4px); }

/* Header row: orb badge + title block */
.explorer-header {
  display: flex; align-items: center; gap: 22px;
}
.explorer-title {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1; letter-spacing: -0.02em;
  margin: 0 0 10px 0;
}
.explorer-sub {
  display: flex; align-items: center; gap: 16px;
  color: var(--fps-text-dim);
  font-size: 14px; line-height: 1.5;
  flex-wrap: wrap;
}
.explorer-network-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in oklab, var(--fps-accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 32%, transparent);
  color: color-mix(in oklab, var(--fps-accent) 70%, white);
  font: 600 11px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.18em;
}
.explorer-network-tick {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fps-accent);
  box-shadow: 0 0 12px var(--fps-accent);
  animation: witness-tick-pulse 2.4s ease-in-out infinite;
}

/* Materios orb badge — black/white silhouette in a circular dark plate
   with a soft cyan glow. Uses the same materios-orb.png alpha mask
   pattern as the home product card. Keeps brand consistency. */
.materios-orb-badge {
  width: 72px; height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in oklab, var(--fps-accent) 18%, transparent) 0%,
      color-mix(in oklab, var(--fps-accent) 0%, transparent) 70%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid color-mix(in oklab, var(--fps-accent) 35%, var(--fps-line));
  box-shadow: 0 0 24px color-mix(in oklab, var(--fps-accent) 25%, transparent);
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
}
.materios-orb-badge-fill {
  width: 70%; height: 70%;
  background: white;
  -webkit-mask-image: url(/redesign/materios-orb.png);
  mask-image: url(/redesign/materios-orb.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--fps-accent) 55%, transparent));
}

/* Sticky tab bar */
.explorer-tabs-wrap {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, #02050d 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in oklab, var(--fps-accent) 10%, var(--fps-line));
  margin-top: 8px;
}
.explorer-tabs {
  display: flex; gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.explorer-tabs::-webkit-scrollbar { display: none; }
.explorer-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: var(--fps-text-mute);
  font: 600 13px 'Chakra Petch', system-ui;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}
.explorer-tab:hover { color: var(--fps-text-dim); }
.explorer-tab.is-active { color: var(--fps-accent); }
.explorer-tab-icon {
  display: inline-flex; opacity: 0.85;
}
.explorer-tab-underline {
  position: absolute; left: 8px; right: 8px; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--fps-accent), var(--fps-accent-2));
  box-shadow: 0 0 8px color-mix(in oklab, var(--fps-accent) 60%, transparent);
}

@media (max-width: 720px) {
  .explorer-header { gap: 14px; }
  .materios-orb-badge { width: 56px; height: 56px; }
  .explorer-tab { padding: 12px 12px; font-size: 12px; }
}

/* ─── Orynq SDK landing ──────────────────────────────────────────────────── */
.sdk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
  min-height: calc(100vh - 260px);
}
.sdk-hero-grid > * { min-width: 0; }

/* Quick-start card on the right side of the hero */
.sdk-quickstart {
  position: relative;
  padding: 28px;
  border: 1px solid color-mix(in oklab, var(--fps-accent) 22%, var(--fps-line));
  border-radius: var(--fps-radius-lg);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--fps-accent) 4%, rgba(255,255,255,0.02)),
    rgba(255,255,255,0.005));
  box-shadow: 0 0 40px color-mix(in oklab, var(--fps-accent) 14%, transparent);
  display: flex; flex-direction: column; gap: 18px;
}
.sdk-orb {
  position: absolute; top: -34px; right: -10px;
  width: 64px; height: 64px;
}
.sdk-quickstart-head {
  display: flex; align-items: center; gap: 10px;
  color: var(--fps-accent);
  font-size: 18px;
}
.sdk-quickstart-head .f-display { color: var(--fps-text); font-size: 18px; line-height: 1; }

.sdk-npm {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 14%, var(--fps-line));
  border-radius: 10px;
  font: 14px 'Space Mono', ui-monospace, monospace;
}
.sdk-npm-prompt { color: var(--fps-text-mute); user-select: none; }
.sdk-npm-cmd { color: var(--fps-accent); flex: 1; overflow-x: auto; }
.sdk-npm-copy {
  background: transparent; border: 0; cursor: pointer;
  color: var(--fps-text-mute);
  padding: 4px; border-radius: 4px;
  display: inline-flex; align-items: center;
  transition: color .15s ease, background .15s ease;
}
.sdk-npm-copy:hover { color: var(--fps-accent); background: color-mix(in oklab, var(--fps-accent) 10%, transparent); }

.sdk-steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.sdk-steps li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14px; color: var(--fps-text-dim); line-height: 1.55;
}
.sdk-step-n {
  font: 700 12px 'Anybody', system-ui;
  color: var(--fps-accent);
  background: color-mix(in oklab, var(--fps-accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 30%, transparent);
  padding: 3px 7px; border-radius: 4px;
  flex-shrink: 0;
}
.sdk-mono {
  font: 13px 'Space Mono', ui-monospace, monospace;
  color: var(--fps-accent);
  background: color-mix(in oklab, var(--fps-accent) 6%, transparent);
  padding: 1px 6px; border-radius: 3px;
}
.sdk-docs-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fps-accent);
  font: 600 12px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.14em;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.sdk-docs-link:hover { color: white; transform: translateX(2px); }

/* Trust strip below hero */
.sdk-trust {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--fps-line);
}
.sdk-trust-label {
  font: 600 11px 'Space Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--fps-text-mute);
}
.sdk-trust-badges {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.sdk-trust-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: color-mix(in oklab, var(--fps-accent) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 22%, transparent);
  color: var(--fps-text-dim);
  font: 600 12px 'Chakra Petch', system-ui;
  letter-spacing: 0.04em;
}
.sdk-trust-pill svg { color: var(--fps-accent); width: 14px; height: 14px; }

@media (max-width: 880px) {
  .sdk-hero-grid { grid-template-columns: 1fr; gap: 32px; min-height: auto; }
  .sdk-orb { top: -28px; right: 0; }
}

/* ─── Audit-question callout (SDK) ─────────────────────────────────────── */
.audit-question-section {
  padding: 72px 0 56px;
  position: relative;
}
/* Wide soft cyan vignette behind the quote so it reads as a "spotlight"
   moment without needing a card border. */
.audit-question-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    color-mix(in oklab, var(--fps-accent) 9%, transparent),
    transparent 70%);
  pointer-events: none;
}
.audit-question {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.audit-question-eyebrow {
  font: 600 11px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: color-mix(in oklab, var(--fps-accent) 70%, white);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 28px;
}
.audit-question-mark {
  font: 900 28px 'Anybody', system-ui;
  color: var(--fps-accent);
  line-height: 0;
  vertical-align: -8px;
  text-shadow: 0 0 16px color-mix(in oklab, var(--fps-accent) 60%, transparent);
}
.audit-question-body {
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fps-text);
  margin: 0;
  font-weight: 700;
  font-style: normal;
}
.audit-question-body .accent {
  background: linear-gradient(135deg, var(--fps-accent), var(--fps-accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px color-mix(in oklab, var(--fps-accent) 32%, transparent);
}
.audit-question-answer {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: 36px;
  color: var(--fps-text-dim);
  font: 600 13px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.22em;
}
.audit-question-divider {
  display: inline-block;
  width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fps-accent), transparent);
}

@media (max-width: 720px) {
  .audit-question-section { padding: 48px 0 32px; }
  .audit-question-body { font-size: clamp(20px, 5vw, 30px); }
}

/* ─── How Orynq answers (3 clauses → 3 primitives) ─────────────────────── */
.audit-answers-section {
  padding-top: 48px;
}
.audit-answers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.audit-answer-card {
  padding: 28px;
  border: 1px solid var(--fps-line);
  border-radius: var(--fps-radius-lg);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--fps-accent) 3%, rgba(255,255,255,0.02)),
    rgba(255,255,255,0.005));
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.audit-answer-card:hover {
  border-color: color-mix(in oklab, var(--fps-accent) 45%, var(--fps-line));
  background: color-mix(in oklab, var(--fps-accent) 4%, transparent);
  transform: translateY(-2px);
}
.audit-answer-num {
  font: 900 36px 'Anybody', system-ui;
  background: linear-gradient(135deg, var(--fps-accent), var(--fps-accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  line-height: 1;
}
.audit-answer-question {
  font-size: 19px; line-height: 1.2;
  color: var(--fps-text);
  margin: 0;
}
.audit-answer-mechanism {
  display: inline-flex; align-items: baseline; gap: 8px;
  font: 600 11px 'Space Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fps-accent);
  padding: 6px 0;
  border-top: 1px solid color-mix(in oklab, var(--fps-accent) 25%, var(--fps-line));
  border-bottom: 1px solid color-mix(in oklab, var(--fps-accent) 25%, var(--fps-line));
}
.audit-answer-arrow {
  color: var(--fps-accent);
  font-size: 14px;
  line-height: 1;
}
.audit-answer-body {
  font-size: 14px; line-height: 1.65;
  color: var(--fps-text-dim);
  margin: 0;
}

/* Caveat block under the answer cards */
.audit-answers-caveat {
  margin-top: 32px;
  padding: 20px 24px;
  border: 1px dashed color-mix(in oklab, var(--fps-text-mute) 50%, transparent);
  border-radius: 10px;
  background: rgba(255,255,255,0.015);
  display: flex; gap: 16px; align-items: flex-start;
}
.audit-answers-caveat-label {
  flex-shrink: 0;
  font: 600 10px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--fps-text-mute);
  background: color-mix(in oklab, var(--fps-text-mute) 12%, transparent);
  padding: 6px 10px; border-radius: 4px;
}
.audit-answers-caveat p {
  margin: 0;
  font-size: 13px; line-height: 1.65;
  color: var(--fps-text-dim);
}
.audit-answers-caveat strong { color: var(--fps-text); }
.audit-answers-caveat-link {
  color: var(--fps-accent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklab, var(--fps-accent) 40%, transparent);
}
.audit-answers-caveat-link:hover { border-bottom-style: solid; }

@media (max-width: 880px) {
  .audit-answers-grid { grid-template-columns: 1fr; }
  .audit-answers-caveat { flex-direction: column; }
}

/* ─── Definitions list (LLM-citation-shaped term entries) ─────────────── */
.definitions-list {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
}
.definition-row {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 22px;
  border-bottom: 1px solid color-mix(in oklab, var(--fps-line) 60%, transparent);
}
.definition-term {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap;
}
.definition-term .f-display {
  font-size: 22px; color: var(--fps-text);
  letter-spacing: -0.01em;
}
.definition-gloss {
  font: 600 11px 'Space Mono', ui-monospace, monospace;
  color: var(--fps-text-mute);
  letter-spacing: 0.02em;
}
.definition-body {
  font-size: 14px; line-height: 1.65; color: var(--fps-text-dim);
  margin: 0;
}
.definition-learn-more {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fps-accent);
  font: 600 11px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.14em;
  text-decoration: none;
  margin-left: 4px;
  white-space: nowrap;
}
.definition-learn-more svg { width: 12px; height: 12px; }
.definition-learn-more:hover { color: white; }
@media (max-width: 880px) {
  .definitions-list { grid-template-columns: 1fr; gap: 20px; }
}

/* ─── Regulatory mapping cards ───────────────────────────────────────── */
.reg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.reg-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 26px;
  border: 1px solid var(--fps-line);
  border-radius: var(--fps-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  transition: border-color .25s ease, transform .25s ease;
}
.reg-card:hover {
  border-color: color-mix(in oklab, var(--fps-accent) 45%, var(--fps-line));
  transform: translateY(-2px);
}
.reg-card-head { display: flex; flex-direction: column; gap: 6px; }
.reg-card-title-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.reg-card-name {
  font-size: 18px; color: var(--fps-text); margin: 0;
  letter-spacing: -0.01em;
}
.reg-card-pill {
  font: 600 10px 'Space Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fps-accent);
  background: color-mix(in oklab, var(--fps-accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 30%, transparent);
  padding: 3px 7px; border-radius: 3px;
  white-space: nowrap;
}
.reg-card-jurisdiction {
  font: 600 11px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--fps-text-mute);
}
.reg-card-section { display: flex; flex-direction: column; gap: 6px; }
.reg-card-label {
  font: 600 10px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--fps-accent);
}
.reg-card-text {
  font-size: 13.5px; line-height: 1.6; color: var(--fps-text-dim);
  margin: 0;
}
.reg-card-cite {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  color: var(--fps-accent);
  font: 600 11px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.18em;
  text-decoration: none;
}
.reg-card-cite:hover { color: white; }
.reg-card-cite svg { width: 12px; height: 12px; }
@media (max-width: 980px) {
  .reg-grid { grid-template-columns: 1fr; }
}

/* ─── Comparison table — Orynq vs alternatives ──────────────────────── */
.cmp-table-wrap {
  border: 1px solid var(--fps-line);
  border-radius: var(--fps-radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cmp-table thead th {
  padding: 18px 18px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--fps-line);
  background: rgba(255,255,255,0.015);
}
.cmp-th-dim { width: 25%; }
.cmp-th-us {
  background: color-mix(in oklab, var(--fps-accent) 8%, rgba(255,255,255,0.015));
  border-bottom: 1px solid color-mix(in oklab, var(--fps-accent) 40%, var(--fps-line));
}
.cmp-col-head {
  font: 700 14px 'Anybody', system-ui;
  color: var(--fps-text);
}
.cmp-col-head-us {
  color: var(--fps-accent);
}
.cmp-col-sub {
  font: 11px 'Space Mono', ui-monospace, monospace;
  color: var(--fps-text-mute);
  margin-top: 2px;
}
.cmp-table tbody tr {
  border-bottom: 1px solid color-mix(in oklab, var(--fps-line) 60%, transparent);
}
.cmp-table tbody tr:last-child { border-bottom: 0; }
.cmp-row-head {
  padding: 14px 18px;
  text-align: left;
  font: 600 12px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fps-text-mute);
  vertical-align: top;
}
.cmp-cell {
  padding: 14px 18px;
  vertical-align: top;
  color: var(--fps-text-dim);
}
.cmp-cell-us {
  background: color-mix(in oklab, var(--fps-accent) 3%, transparent);
  color: var(--fps-text);
}
.cmp-cell.tone-strong { color: var(--fps-text); font-weight: 500; }
.cmp-cell.tone-mid { color: var(--fps-text-dim); }
.cmp-cell.tone-weak { color: var(--fps-text-mute); }
.cmp-foot {
  margin-top: 14px;
  font-size: 13px; line-height: 1.6;
  color: var(--fps-text-mute);
  text-align: center;
}
@media (max-width: 880px) {
  .cmp-table { font-size: 12.5px; }
  .cmp-table thead th, .cmp-cell, .cmp-row-head { padding: 12px 12px; }
  .cmp-col-head { font-size: 13px; }
}

/* ─── Proof of Inference pillar page ─────────────────────────────────── */
/* Narrow shell variant for long-form prose so line length stays readable */
.shell.shell-narrow {
  width: min(820px, 92vw);
  margin: 0 auto;
}

/* Hero — headline + sticky-ish TOC sidebar */
.poi-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: start;
  margin-top: 18px;
}
.poi-toc {
  padding: 22px;
  border: 1px solid var(--fps-line);
  border-radius: var(--fps-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
}
.poi-toc-head {
  display: flex; align-items: center; gap: 10px;
  color: var(--fps-accent);
  margin-bottom: 12px;
}
.poi-toc-head .f-display { color: var(--fps-text); font-size: 15px; line-height: 1; }
.poi-toc-head svg { width: 16px; height: 16px; }
.poi-toc-list {
  margin: 0; padding: 0 0 0 22px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px;
}
.poi-toc-list li::marker {
  color: var(--fps-text-mute);
  font-family: 'Space Mono', monospace;
}
.poi-toc-list a {
  color: var(--fps-text-dim);
  text-decoration: none;
  transition: color .15s ease;
}
.poi-toc-list a:hover { color: var(--fps-accent); }
@media (max-width: 920px) {
  .poi-hero-grid { grid-template-columns: 1fr; }
  .poi-toc { order: 2; }
}

/* Long-form prose blocks */
.poi-prose {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--fps-text-dim);
  margin: 14px 0;
}
.poi-prose strong { color: var(--fps-text); font-weight: 600; }
.poi-prose em { color: var(--fps-text); font-style: italic; }
.poi-prose code, .poi-mono {
  font: 14px 'Space Mono', ui-monospace, monospace;
  color: var(--fps-accent);
  background: color-mix(in oklab, var(--fps-accent) 6%, transparent);
  padding: 1px 6px; border-radius: 3px;
}
.poi-link {
  color: var(--fps-accent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklab, var(--fps-accent) 40%, transparent);
}
.poi-link:hover { border-bottom-style: solid; }

.poi-bullets {
  margin: 14px 0; padding: 0 0 0 22px;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 15px; line-height: 1.7;
  color: var(--fps-text-dim);
}
.poi-bullets li::marker { color: var(--fps-accent); }
.poi-bullets strong { color: var(--fps-text); }
.poi-bullets em { color: var(--fps-text); }
.poi-bullets a {
  color: var(--fps-accent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklab, var(--fps-accent) 40%, transparent);
}
.poi-bullets a:hover { border-bottom-style: solid; }

/* Two-path comparison cards */
.poi-paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 24px 0;
}
.poi-path-card {
  position: relative;
  padding: 28px;
  border: 1px solid var(--fps-line);
  border-radius: var(--fps-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  display: flex; flex-direction: column; gap: 12px;
}
.poi-path-card.poi-path-card-us {
  border-color: color-mix(in oklab, var(--fps-accent) 45%, var(--fps-line));
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--fps-accent) 7%, rgba(255,255,255,0.02)),
    rgba(255,255,255,0.005));
  box-shadow: 0 0 28px color-mix(in oklab, var(--fps-accent) 14%, transparent);
}
.poi-path-letter {
  font-size: 38px;
  background: linear-gradient(135deg, var(--fps-accent), var(--fps-accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.02em; line-height: 1;
}
.poi-path-name { font-size: 22px; color: var(--fps-text); margin: 0; }
.poi-path-tag {
  font: 600 11px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--fps-accent);
  margin: 0 0 4px 0;
}
.poi-path-body {
  font-size: 14px; line-height: 1.6; color: var(--fps-text-dim);
  margin: 0;
}
.poi-path-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklab, var(--fps-line) 60%, transparent);
  font-size: 13px; line-height: 1.55; color: var(--fps-text-dim);
}
.poi-path-label {
  font: 600 10px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--fps-accent);
}
.poi-path-jump {
  margin-top: auto; padding-top: 8px;
  color: var(--fps-accent);
  font: 600 12px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.14em;
  text-decoration: none;
}
.poi-path-jump:hover { color: white; }
@media (max-width: 880px) { .poi-paths-grid { grid-template-columns: 1fr; } }

/* Citation cards (ZKML projects) */
.poi-cite-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin: 18px 0;
}
.poi-cite-card {
  padding: 18px;
  border: 1px solid var(--fps-line);
  border-radius: 10px;
  background: rgba(255,255,255,0.015);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; line-height: 1.55; color: var(--fps-text-dim);
}
.poi-cite-card p { margin: 0; }
.poi-cite-name {
  font: 700 14px 'Anybody', system-ui;
  color: var(--fps-text);
}
.poi-cite-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fps-accent); font-size: 12px;
  text-decoration: none;
  margin-top: auto;
}
.poi-cite-link svg { width: 12px; height: 12px; }
.poi-cite-link:hover { color: white; }
@media (max-width: 720px) { .poi-cite-grid { grid-template-columns: 1fr; } }

/* Decision cards (when-to-use) */
.poi-decision-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin: 18px 0;
}
.poi-decision-card {
  padding: 24px;
  border: 1px solid var(--fps-line);
  border-radius: var(--fps-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
}
.poi-decision-card.poi-decision-card-us {
  border-color: color-mix(in oklab, var(--fps-accent) 40%, var(--fps-line));
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--fps-accent) 5%, rgba(255,255,255,0.02)),
    rgba(255,255,255,0.005));
}
.poi-decision-tag {
  font: 600 11px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--fps-accent);
  margin-bottom: 10px;
}
@media (max-width: 880px) { .poi-decision-grid { grid-template-columns: 1fr; } }

/* Numbered steps */
.poi-steps-list {
  list-style: none; padding: 0; margin: 18px 0;
  display: flex; flex-direction: column; gap: 16px;
}
.poi-steps-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px; align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--fps-line);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
}
.poi-step-num {
  font: 900 18px 'Anybody', system-ui;
  background: linear-gradient(135deg, var(--fps-accent), var(--fps-accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1;
  padding-top: 2px;
}
.poi-step-title {
  font: 700 15px 'Anybody', system-ui;
  color: var(--fps-text);
  margin: 0 0 4px 0;
}
.poi-steps-list p {
  font-size: 14px; line-height: 1.6;
  color: var(--fps-text-dim);
  margin: 0;
}
.poi-cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 22px;
}

/* ─── cMATRA Merger Portal ────────────────────────────────────────────── */
/* Two-column grid: left = wallet/scan/surrender flow, right = rates + info */
.merger-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.merger-col-left, .merger-col-right {
  display: flex; flex-direction: column; gap: 20px;
}
@media (max-width: 900px) {
  .merger-grid { grid-template-columns: 1fr; }
}

/* Generic card chrome used by every panel on the merger page */
.merger-card {
  border: 1px solid var(--fps-line);
  border-radius: var(--fps-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  overflow: hidden;
}
.merger-card.merger-card-accent {
  border-color: color-mix(in oklab, var(--fps-accent) 35%, var(--fps-line));
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--fps-accent) 6%, rgba(255,255,255,0.02)),
    rgba(255,255,255,0.005));
  box-shadow: 0 0 32px color-mix(in oklab, var(--fps-accent) 14%, transparent);
}
.merger-card.merger-card-empty {
  padding: 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.merger-card-head {
  padding: 22px 24px;
  border-bottom: 1px solid var(--fps-line);
}
.merger-card-body {
  padding: 20px 24px;
}
.merger-card-head-row {
  display: flex; align-items: center; gap: 10px;
}
.merger-card-icon {
  width: 18px; height: 18px;
  color: var(--fps-accent);
}
.merger-card-icon-ok { color: #4ade80; }
.merger-card-icon-empty { width: 28px; height: 28px; color: var(--fps-text-mute); }
.merger-card-title {
  font-size: 18px; line-height: 1; color: var(--fps-text);
  margin: 0;
}
.merger-card-sub {
  font-size: 13px; line-height: 1.55; color: var(--fps-text-dim);
  margin: 8px 0 0 0;
}
.merger-card-empty-title { color: var(--fps-text-dim); font-size: 14px; margin: 0; }
.merger-card-empty-sub { color: var(--fps-text-mute); font-size: 12px; margin: 0; }
.merger-card-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--fps-line);
  font-size: 12px; color: var(--fps-text-mute);
}

/* Password gate */
.merger-gate-card {
  width: min(440px, 100%);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 30%, var(--fps-line));
  border-radius: var(--fps-radius-lg);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--fps-accent) 6%, rgba(255,255,255,0.02)),
    rgba(255,255,255,0.005));
  padding: 36px 32px;
  box-shadow: 0 0 40px color-mix(in oklab, var(--fps-accent) 18%, transparent);
}
.merger-gate-header {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 24px; text-align: center;
}
.merger-gate-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in oklab, var(--fps-accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 30%, transparent);
  color: color-mix(in oklab, var(--fps-accent) 70%, white);
  font: 600 11px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.18em;
}
.merger-gate-title {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.05; letter-spacing: -0.015em;
  color: var(--fps-text);
  margin: 0;
}
.merger-gate-sub {
  font-size: 13px; line-height: 1.55; color: var(--fps-text-dim); margin: 0;
}
.merger-gate-form { display: flex; flex-direction: column; gap: 12px; }
.merger-gate-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 20%, var(--fps-line));
  border-radius: 8px;
  color: var(--fps-text);
  font: 14px 'Space Mono', ui-monospace, monospace;
  outline: none;
  transition: border-color .2s ease;
}
.merger-gate-input:focus {
  border-color: var(--fps-accent);
}
.merger-gate-error {
  color: #f87171; font-size: 12px; margin: 0;
}

/* Rate table */
.merger-rate-table-wrap { overflow-x: auto; }
.merger-rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.merger-rate-table thead th {
  font: 600 10px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--fps-text-mute);
  padding: 10px 24px;
  text-align: left;
  border-bottom: 1px solid var(--fps-line);
}
.merger-rate-table-right { text-align: right; }
.merger-rate-table tbody tr {
  border-bottom: 1px solid color-mix(in oklab, var(--fps-line) 50%, transparent);
}
.merger-rate-table tbody tr:hover {
  background: color-mix(in oklab, var(--fps-accent) 3%, transparent);
}
.merger-rate-table td {
  padding: 12px 24px;
}
.merger-rate-asset-name { color: var(--fps-text); font-weight: 500; }
.merger-rate-asset-sub { color: var(--fps-text-mute); font-size: 11px; margin-top: 2px; }
.merger-rate-amount {
  color: var(--fps-accent);
  font: 14px 'Space Mono', ui-monospace, monospace;
}
.merger-rate-pool {
  color: var(--fps-accent);
  font-weight: 600;
}

/* Wallet connect list */
.merger-wallet-list { display: flex; flex-direction: column; gap: 8px; }
.merger-wallet-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--fps-line);
  border-radius: 8px;
  color: var(--fps-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.merger-wallet-option:hover {
  border-color: color-mix(in oklab, var(--fps-accent) 40%, var(--fps-line));
  background: color-mix(in oklab, var(--fps-accent) 5%, transparent);
}
.merger-wallet-icon { width: 22px; height: 22px; border-radius: 4px; }
.merger-wallet-empty {
  color: var(--fps-text-mute);
  font-size: 13px; text-align: center; padding: 14px; margin: 0;
}

/* Wallet connected state */
.merger-disconnect {
  background: transparent; border: 0;
  color: var(--fps-text-mute);
  font: 600 11px 'Chakra Petch', system-ui;
  text-transform: uppercase; letter-spacing: 0.16em;
  cursor: pointer;
  transition: color .2s ease;
}
.merger-disconnect:hover { color: var(--fps-text); }

.merger-wallet-addr {
  padding: 12px 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--fps-line);
  border-radius: 8px;
  font: 12px 'Space Mono', ui-monospace, monospace;
  color: var(--fps-text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 14px;
}
.merger-scan-status {
  display: flex; align-items: center; gap: 10px;
  color: var(--fps-accent);
  font-size: 13px;
}
.merger-scan-error {
  color: #f87171; font-size: 13px;
}
.merger-scan-retry {
  background: transparent; border: 0; padding: 0;
  color: #f87171; text-decoration: underline; cursor: pointer;
  font: inherit;
}
.merger-scan-retry:hover { color: #fca5a5; }
.merger-rescan-link {
  background: transparent; border: 0; padding: 0;
  color: var(--fps-accent); font-size: 13px;
  cursor: pointer;
}
.merger-rescan-link:hover { text-decoration: underline; }
.merger-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--fps-accent);
  border-top-color: transparent;
  border-radius: 50%;
}

/* Asset list */
.merger-asset-list { display: flex; flex-direction: column; }
.merger-asset-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid color-mix(in oklab, var(--fps-line) 50%, transparent);
}
.merger-asset-row:last-child { border-bottom: 0; }
.merger-asset-name { color: var(--fps-text); font-weight: 500; font-size: 14px; }
.merger-asset-qty { color: var(--fps-text-mute); font-size: 12px; margin-top: 2px; }
.merger-asset-amount {
  color: var(--fps-accent);
  font: 14px 'Space Mono', ui-monospace, monospace;
}
.merger-asset-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  background: color-mix(in oklab, var(--fps-accent) 6%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--fps-accent) 25%, var(--fps-line));
}
.merger-asset-total .f-display { font-size: 14px; color: var(--fps-text); }
.merger-asset-total-amount {
  color: var(--fps-accent);
  font: 700 16px 'Space Mono', ui-monospace, monospace;
}

/* Surrender action */
.merger-success {
  padding: 16px;
  border: 1px solid color-mix(in oklab, #4ade80 40%, transparent);
  background: color-mix(in oklab, #4ade80 10%, transparent);
  border-radius: 8px;
}
.merger-success-head {
  display: flex; align-items: center; gap: 8px;
  color: #4ade80; font-weight: 700; font-family: 'Anybody', system-ui;
  margin-bottom: 8px;
}
.merger-success p { color: var(--fps-text-dim); font-size: 13px; margin: 0 0 8px 0; }
.merger-success-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fps-accent); font-size: 13px;
  text-decoration: none;
}
.merger-success-link:hover { text-decoration: underline; }

.merger-processing {
  display: flex; align-items: center; gap: 10px;
  color: var(--fps-accent);
  font-size: 13px;
  margin-bottom: 14px;
}

.merger-error-box {
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, #f87171 40%, transparent);
  background: color-mix(in oklab, #f87171 8%, transparent);
  border-radius: 8px;
  color: #fca5a5; font-size: 13px;
  margin-bottom: 14px;
}

.merger-confirm {
  padding: 16px;
  border: 1px solid color-mix(in oklab, #f87171 40%, transparent);
  background: color-mix(in oklab, #f87171 6%, transparent);
  border-radius: 8px;
}
.merger-confirm-title { color: #fca5a5; font-weight: 700; font-size: 13px; margin: 0 0 8px 0; }
.merger-confirm-body { color: var(--fps-text-dim); font-size: 13px; margin: 0 0 16px 0; line-height: 1.55; }
.merger-confirm-amount { color: var(--fps-accent); font-weight: 700; font-family: 'Space Mono', monospace; }
.merger-confirm-actions { display: flex; gap: 10px; }
.merger-confirm-go {
  flex: 1;
  background: #dc2626; color: white;
  border: 0; border-radius: 8px;
  padding: 12px 16px;
  font: 700 14px 'Anybody', system-ui;
  cursor: pointer;
  transition: background .2s ease;
}
.merger-confirm-go:hover:not(:disabled) { background: #ef4444; }
.merger-confirm-go:disabled { opacity: 0.5; cursor: not-allowed; }
.merger-confirm-cancel {
  flex: 1;
  background: rgba(255,255,255,0.05); color: var(--fps-text);
  border: 1px solid var(--fps-line); border-radius: 8px;
  padding: 12px 16px;
  font: 700 14px 'Anybody', system-ui;
  cursor: pointer;
  transition: background .2s ease;
}
.merger-confirm-cancel:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.merger-confirm-cancel:disabled { opacity: 0.5; cursor: not-allowed; }
.merger-foot-note {
  color: var(--fps-text-mute);
  font-size: 11px; text-align: center;
  margin: 12px 0 0 0;
}

/* How-it-works steps */
.merger-steps {
  list-style: none; padding: 20px 24px 0 24px; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.merger-steps li {
  display: flex; align-items: flex-start; gap: 12px;
}
.merger-step-n {
  flex-shrink: 0;
  font: 700 11px 'Anybody', system-ui;
  color: var(--fps-accent);
  background: color-mix(in oklab, var(--fps-accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--fps-accent) 30%, transparent);
  padding: 4px 8px; border-radius: 4px;
}
.merger-step-title { color: var(--fps-text); font-weight: 500; font-size: 14px; }
.merger-step-body { color: var(--fps-text-dim); font-size: 12.5px; line-height: 1.55; margin-top: 2px; }
.merger-info-links {
  padding: 16px 24px;
  border-top: 1px solid var(--fps-line);
  display: flex; gap: 18px;
}
.merger-info-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fps-accent); font-size: 13px;
  text-decoration: none;
}
.merger-info-link:hover { text-decoration: underline; }

/* Cardano-only banner */
.merger-banner {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid color-mix(in oklab, var(--fps-accent) 32%, var(--fps-line));
  border-radius: var(--fps-radius-lg);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--fps-accent) 8%, rgba(255,255,255,0.02)),
    color-mix(in oklab, var(--fps-accent) 3%, transparent));
}
.merger-banner-icon {
  width: 18px; height: 18px;
  color: var(--fps-accent);
  flex-shrink: 0; margin-top: 2px;
}
.merger-banner-body { font-size: 13px; line-height: 1.6; }
.merger-banner-title { color: var(--fps-text); font-weight: 500; margin: 0; }
.merger-banner-sub { color: var(--fps-text-dim); margin: 4px 0 0 0; }