/*
 * NEXONOMY · PRODUCT SURFACES & INTERACTION
 * The platform window, Decision Graph, multi-model Advisory, comparison slider,
 * and the enhanced motion utilities. Import after components.css.
 *
 * These are "true platform screenshots" rendered in HTML/CSS at production
 * fidelity, not text-in-boxes. Depth, elevation, and ambient motion follow the
 * Texture Brief; content discipline still follows the canon.
 */


/* ─── ICONS ──────────────────────────────────────────────────────────────── */

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
}
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 22px; height: 22px; }


/* ─── SCROLL PROGRESS ────────────────────────────────────────────────────── */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-accent-core), var(--color-accent));
  z-index: 200;
  will-change: transform;
}


/* ─── THE PLATFORM WINDOW ────────────────────────────────────────────────── */

.product-frame {
  position: relative;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 40px 80px -32px rgba(0,0,0,0.80),
    0 8px 24px -12px rgba(0,0,0,0.60);
  isolation: isolate;
}

/* Soft accent glow cast beneath the window */
.product-frame::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -34px;
  height: 60px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(140,101,247,0.28), transparent 70%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}

/* Title bar */
.pf-titlebar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
}

.pf-dots {
  display: flex;
  gap: 7px;
}
.pf-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}
.pf-dots span:first-child { background: rgba(140,101,247,0.45); border-color: transparent; }

.pf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.pf-breadcrumb b {
  color: var(--color-text-secondary);
  font-weight: var(--weight-normal);
}
.pf-breadcrumb .pf-sep { color: var(--color-border); }

.pf-titlebar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 9px;
}
.pf-pill .icon { width: 12px; height: 12px; color: var(--color-affirm); opacity: 0.7; }

.pf-iconbtn {
  color: var(--color-text-muted);
  display: inline-flex;
  transition: color var(--duration-fast) var(--ease-out);
}
.pf-iconbtn:hover { color: var(--color-text-primary); }

/* Body: sidebar + main */
.pf-body {
  display: grid;
  grid-template-columns: 208px 1fr;
  min-height: 440px;
}

/* Sidebar */
.pf-sidebar {
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-1);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: var(--color-surface-0);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-bottom: 8px;
}

.pf-navgroup-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 8px 10px 4px;
}

.pf-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-card);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.pf-nav-item:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.pf-nav-item .icon { color: var(--color-text-muted); }

.pf-nav-item--active {
  background: rgba(140,101,247,0.12);
  color: var(--color-text-primary);
}
.pf-nav-item--active .icon { color: var(--color-accent); }

.pf-nav-item .pf-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
}

.pf-sidebar-foot {
  margin-top: auto;
  padding: 12px 10px 4px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-env {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.pf-env .icon { width: 13px; height: 13px; color: var(--color-accent); }
.pf-watch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-caution);
}
.pf-watch::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-caution);
}

/* Main panel */
.pf-main {
  position: relative;
  min-width: 0;            /* allow the grid track to shrink below content width */
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(140,101,247,0.05), transparent 60%);
  overflow: hidden;
}
.pf-record-title { overflow-wrap: break-word; }

.pf-record-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-record-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-record-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent);
  letter-spacing: 0.04em;
}
.pf-record-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
}
.pf-record-title {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 27px;
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
  max-width: 90%;
}

/* Sub-tabs inside the record */
.pf-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
}
.pf-tab {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.pf-tab:hover { color: var(--color-text-secondary); }
.pf-tab--active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
}

/* Record rows */
.pf-rows { display: flex; flex-direction: column; gap: 16px; }
.pf-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.pf-row-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 3px;
}
.pf-row-value {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-primary);
}

/* Options list */
.pf-options { display: flex; flex-direction: column; gap: 8px; }
.pf-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: var(--color-surface-0);
  font-size: 12.5px;
  color: var(--color-text-secondary);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.pf-option:hover { border-color: rgba(255,255,255,0.14); }
.pf-option--chosen {
  border-color: rgba(140,101,247,0.45);
  background: rgba(140,101,247,0.07);
  color: var(--color-text-primary);
}
.pf-option__check {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: transparent;
}
.pf-option--chosen .pf-option__check {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.pf-option__tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.pf-option--rejected .pf-option__tag { color: var(--color-text-muted); }

/* Confidence meter */
.pf-confidence { display: flex; flex-direction: column; gap: 8px; }
.pf-conf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.pf-conf-head b {
  font-size: 13px;
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}
.pf-conf-head span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
}
.pf-conf-bars { display: flex; gap: 4px; }
.pf-conf-seg {
  height: 6px;
  flex: 1;
  border-radius: 3px;
  background: var(--color-surface-2);
}
.pf-conf-seg--hi   { background: rgba(16,185,129,0.50); }
.pf-conf-seg--med  { background: rgba(245,165,36,0.50); }
.pf-conf-note {
  font-size: 11.5px;
  line-height: 17px;
  color: var(--color-text-secondary);
}
.pf-conf-note b { color: var(--color-signal); font-weight: var(--weight-medium); }

/* Evidence chips */
.pf-evidence { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-ev-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-0);
  color: var(--color-text-secondary);
}
.pf-ev-chip .icon { width: 11px; height: 11px; color: var(--color-text-muted); }

/* Sign-off queue */
.pf-signoffs { display: flex; flex-direction: column; gap: 2px; }
.pf-signoff {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.pf-signoff:last-child { border-bottom: none; }
.pf-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.pf-signoff__who { display: flex; flex-direction: column; gap: 1px; }
.pf-signoff__role { font-size: 12px; color: var(--color-text-primary); font-weight: var(--weight-medium); }
.pf-signoff__time { font-family: var(--font-mono); font-size: 9px; color: var(--color-text-muted); }
.pf-signoff__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pf-signoff__status .icon { width: 12px; height: 12px; color: var(--color-affirm); opacity: 0.7; }

/* Hash footer */
.pf-hashbar {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.pf-hash {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}
.pf-hash b { color: var(--color-accent); font-weight: var(--weight-normal); }
.pf-verify {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.pf-verify .icon { width: 12px; height: 12px; color: var(--color-affirm); }


/* ─── HERO PRODUCT VARIANT (tilt + parallax) ─────────────────────────────── */

.hero__stage {
  perspective: 1800px;
  position: relative;
}
.hero__stage .product-frame {
  transform: rotateX(3deg) rotateY(-6deg) translateZ(0);
  transition: transform var(--duration-slow) var(--ease-out);
  will-change: transform;
}
/* JS sets --rx/--ry from cursor; falls back to the static angle above */
.hero__stage[data-tilt] .product-frame {
  transform:
    rotateX(calc(3deg + var(--ry, 0deg)))
    rotateY(calc(-6deg + var(--rx, 0deg)));
}

/* In-hero density: the half-width column is tighter than the full showcase. */
.hero__stage .pf-body { grid-template-columns: 178px 1fr; }
.hero__stage .pf-main { padding: 18px 20px; gap: 14px; }
.hero__stage .pf-record-title { font-size: 18px; line-height: 24px; }
.hero__stage .pf-option { padding: 9px 11px; font-size: 12px; }
.hero__stage .pf-option__tag { display: none; }
.hero__stage .pf-row { grid-template-columns: 80px 1fr; gap: 12px; }


/* ─── INTERACTIVE SHOWCASE ───────────────────────────────────────────────── */

.showcase { padding-block: var(--section-py); }
.showcase__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}
.showcase__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
  max-width: 780px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}
.showcase__heading {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 50px;
  letter-spacing: -1.5px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}
.showcase__heading em { font-style: italic; color: var(--color-accent); }
.showcase__sub { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); }

/* Segmented control */
.showcase__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-0);
  margin-bottom: 24px;
}
.showcase__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.showcase__tab .icon { color: var(--color-text-muted); }
.showcase__tab:hover { color: var(--color-text-primary); }
.showcase__tab--active {
  background: var(--color-accent-deep);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.showcase__tab--active .icon { color: #fff; }

/* Panel stage */
.showcase__stage { position: relative; min-height: 520px; }
.showcase__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
  pointer-events: none;
}
.showcase__panel--active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.showcase__caption {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.showcase__caption .icon { color: var(--color-accent); }


/* ─── DECISION GRAPH ─────────────────────────────────────────────────────── */

.graph-frame {
  position: relative;
  background:
    radial-gradient(80% 90% at 30% 20%, #15131d 0%, var(--color-surface-0) 70%);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -32px rgba(0,0,0,0.80),
    0 8px 24px -12px rgba(0,0,0,0.60);
}
.graph-frame__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.graph-frame__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.graph-frame__legend {
  margin-left: auto;
  display: flex;
  gap: 14px;
}
.graph-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.graph-legend-item::before {
  content: '';
  width: 14px; height: 0;
  border-top: 1.5px solid currentColor;
}
.graph-legend-item--supersedes { color: var(--color-accent); }
.graph-legend-item--references { color: var(--color-text-secondary); }
.graph-legend-item--reconciles { color: var(--color-affirm); }

.graph-svg { width: 100%; height: auto; display: block; }

.graph-edge { fill: none; stroke-width: 1.5; }
.graph-edge--supersedes { stroke: var(--color-accent); }
.graph-edge--references { stroke: rgba(153,153,153,0.45); stroke-dasharray: 4 4; }
.graph-edge--reconciles { stroke: var(--color-affirm); }
.graph-edge-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--color-text-muted);
}

.graph-node { cursor: pointer; }
.graph-node rect {
  fill: var(--color-surface-2);
  stroke: var(--color-border);
  stroke-width: 1;
  transition: stroke var(--duration-fast) var(--ease-out),
              fill var(--duration-fast) var(--ease-out);
}
.graph-node:hover rect { stroke: rgba(255,255,255,0.25); }
.graph-node--current rect {
  fill: rgba(140,101,247,0.12);
  stroke: var(--color-accent);
}
.graph-node__id {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--color-text-primary);
  letter-spacing: 0.02em;
}
.graph-node--current .graph-node__id { fill: var(--color-accent); }
.graph-node__hash {
  font-family: var(--font-mono);
  font-size: 7.5px;
  fill: var(--color-text-muted);
}
.graph-node__dot { fill: var(--color-text-muted); }
.graph-node--current .graph-node__dot { fill: var(--color-affirm); }

/* ─── GRAPH DRAW-ON (homepage showcase) ───────────────────────────────────
 * The Decision Graph assembles itself when its tab is opened: nodes fade in
 * left-to-right (--i sequences them), then the solid edges stroke-draw and the
 * labels settle. Armed by JS (.is-armed) only when motion is allowed; without
 * JS or under reduced motion the graph is shown fully drawn. The dashed
 * references edge reveals by opacity only so it keeps its dashes. */
.graph-frame[data-graph-draw].is-armed .graph-node,
.graph-frame[data-graph-draw].is-armed .graph-edge,
.graph-frame[data-graph-draw].is-armed .graph-edge-label { opacity: 0; }
.graph-frame[data-graph-draw].is-armed .graph-edge--supersedes,
.graph-frame[data-graph-draw].is-armed .graph-edge--reconciles {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.graph-frame[data-graph-draw].is-armed .graph-node {
  transition: opacity 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.13s);
}
.graph-frame[data-graph-draw].is-armed .graph-edge {
  transition: opacity 0.3s linear, stroke-dashoffset 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.13s);
}
.graph-frame[data-graph-draw].is-armed .graph-edge-label {
  transition: opacity 0.45s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.13s);
}

.graph-frame[data-graph-draw].is-armed.is-drawn .graph-node,
.graph-frame[data-graph-draw].is-armed.is-drawn .graph-edge,
.graph-frame[data-graph-draw].is-armed.is-drawn .graph-edge-label { opacity: 1; }
.graph-frame[data-graph-draw].is-armed.is-drawn .graph-edge--supersedes,
.graph-frame[data-graph-draw].is-armed.is-drawn .graph-edge--reconciles { stroke-dashoffset: 0; }


/* ─── MULTI-MODEL ADVISORY (orbiting) ────────────────────────────────────── */

.advisory-frame {
  position: relative;
  height: 520px;
  background:
    radial-gradient(70% 70% at 50% 50%, #14121c 0%, var(--color-surface-0) 75%);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -32px rgba(0,0,0,0.80),
    0 8px 24px -12px rgba(0,0,0,0.60);
}

.advisory-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.advisory-line {
  stroke: rgba(140,101,247,0.30);
  stroke-width: 1;
}

/* Center decision node */
.advisory-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  text-align: center;
  background: var(--color-surface-0);
  border: 1px solid rgba(140,101,247,0.35);
  border-radius: 12px;
  padding: 18px 16px;
  z-index: 3;
  box-shadow: 0 0 0 6px rgba(140,101,247,0.05),
              0 18px 40px -16px rgba(0,0,0,0.7);
}
.advisory-center__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.advisory-center__q {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
}
.advisory-center__result {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-affirm);
}

/* Orbiting advisor cards */
.advisor {
  position: absolute;
  top: 0; left: 0;
  width: 168px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px;
  z-index: 2;
  will-change: transform;
  box-shadow: 0 12px 28px -14px rgba(0,0,0,0.7);
}
.advisor__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.advisor__head .icon { width: 14px; height: 14px; color: var(--color-accent); }
.advisor__model {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}
.advisor__rec {
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
}
.advisor__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.advisor__conf {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-text-muted);
}
.advisor__stance {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
}
.advisor__stance--agree  { color: var(--color-affirm); background: rgba(16,185,129,0.12); }
.advisor__stance--dissent{ color: var(--color-caution); background: rgba(245,165,36,0.12); }


/* ─── COMPARISON SLIDER (gap vs record) ──────────────────────────────────── */

.compare {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  user-select: none;
  box-shadow:
    0 40px 80px -36px rgba(0,0,0,0.8),
    0 8px 24px -12px rgba(0,0,0,0.55);
  aspect-ratio: 16 / 10;
}
.compare__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.compare__panel {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compare__tag {
  position: absolute;
  top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  z-index: 4;
}
.compare__tag--before { left: 16px; color: var(--color-text-muted); background: rgba(255,255,255,0.05); border: 1px solid var(--color-border); }
.compare__tag--after  { right: 16px; color: var(--color-accent); background: rgba(140,101,247,0.10); border: 1px solid rgba(140,101,247,0.3); }

/* The "after" record ground sits full underneath; the "before" clips on top. */
.compare__after  {
  background:
    radial-gradient(90% 90% at 80% 10%, rgba(140,101,247,0.06), transparent 60%),
    var(--color-surface-0);
}
.compare__before {
  background: #0c0d12;
  clip-path: inset(0 50% 0 0);  /* JS drives this; left portion shows the current tool */
  z-index: 2;
}

.compare__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--color-accent);
  z-index: 5;
  cursor: ew-resize;
  transform: translateX(-1px);
}
.compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-accent);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.6), var(--shadow-cta);
}
.compare__handle .icon { width: 18px; height: 18px; }

/* generic mock dashboard bits for the "before" panel */
.mock-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.mock-chip { height: 22px; border-radius: 6px; background: var(--color-surface-2); border: 1px solid var(--color-border); }
.mock-table { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.mock-rowline { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.6fr; gap: 10px; align-items: center; }
.mock-cell { height: 10px; border-radius: 3px; background: var(--color-surface-2); }
.mock-cell--head { background: rgba(153,153,153,0.20); }
.mock-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: auto; }
.mock-bar { flex: 1; border-radius: 3px 3px 0 0; background: rgba(153,153,153,0.18); }
.compare__verdict {
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-muted);
  margin-top: auto;
}


/* ─── PILLAR & DEPLOYMENT ICON ENHANCEMENTS ──────────────────────────────── */

.pillar__icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(140,101,247,0.10);
  border: 1px solid rgba(140,101,247,0.22);
  color: var(--color-accent);
}
.pillar__icon .icon { width: 19px; height: 19px; }

.deploy-layer__icon {
  display: inline-flex;
  margin-right: 10px;
  color: var(--color-text-muted);
  vertical-align: middle;
}
.deploy-layer--customer .deploy-layer__icon { color: var(--color-accent); }

/* animated flow dot travelling the deployment connectors */
.deploy-connector { position: relative; overflow: visible; }
.deploy-flow {
  position: absolute;
  left: -1.5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px 1px rgba(140,101,247,0.7);
}


/* ─── PARALLAX / FLOAT UTILITIES ─────────────────────────────────────────── */

[data-parallax] { will-change: transform; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.float-slow { animation: floaty 7s var(--ease-inout) infinite; }


/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .pf-body,
  .hero__stage .pf-body { grid-template-columns: 1fr; }
  .pf-sidebar { display: none; }
  .hero__stage .product-frame,
  .hero__stage[data-tilt] .product-frame { transform: none; }
  .showcase__heading { font-size: 32px; line-height: 38px; }
  .showcase__stage { min-height: 0; }
  /* On mobile, collapse inactive panels entirely so they leave no blank gap. */
  .showcase__panel { position: relative; }
  .showcase__panel:not(.showcase__panel--active) { display: none; }
  .showcase__tabs { flex-wrap: wrap; }
  .graph-frame__legend { display: none; }
  .pf-breadcrumb { display: none; }
  .advisory-frame { height: 460px; }
  .advisor { width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .float-slow { animation: none; }
  .hero__stage .product-frame { transition: none; }
}