/* ════════════════════════════════════════════════════════════════════════
   AlefGPT.ir — /present kiosk deck
   نمایش تمام‌صفحهٔ حلقه‌ای برای تلویزیون غرفهٔ نمایشگاه.
   فایل کاملاً مستقل (بدون وابستگی به landing.css) — فونت و توکن‌های خودش را دارد.
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Estedad";
  src: url("/assets/fonts/Estedad-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}
@font-face {
  font-family: "Estedad";
  src: url("/assets/fonts/Estedad-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --k-ink: #0b0f10;
  --k-ink-2: #12181a;
  --k-ink-3: #1b2325;
  --k-line: rgb(255 255 255 / 10%);
  --k-white: #f6f8f8;
  --k-muted: #9aa6a8;
  --k-signal: #19c5b6;
  --k-signal-deep: #0d8b80;
  --k-copper: #d9814f;
  --k-display: "Estedad", "Vazirmatn", Tahoma, sans-serif;
  --k-body: "Vazirmatn", Tahoma, Arial, sans-serif;
  --k-ease: cubic-bezier(.22, .72, .2, 1);
  --k-ease-3d: cubic-bezier(.16, .84, .2, 1);
  --k-dwell: 13000ms; /* overwritten inline by present.js to match AUTOPLAY_MS */
}

* , *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  background: var(--k-ink);
}

body.kiosk {
  direction: rtl;
  color: var(--k-white);
  font-family: var(--k-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: default;
  transition: cursor 0ms;
}

body.kiosk.is-idle,
body.kiosk.is-idle * {
  cursor: none !important;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: 0;
  z-index: 500;
  padding: 10px 16px;
  background: var(--k-signal);
  color: var(--k-ink);
  font-weight: 700;
}
.skip-link:focus { inset-inline-start: 12px; }

.kiosk-live-region {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ─── Persistent brand bug (never hides — booth visibility) ─── */
.kiosk-brand {
  position: fixed;
  z-index: 60;
  inset-block-start: clamp(16px, 2.4vw, 34px);
  inset-inline-start: clamp(16px, 2.4vw, 34px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  border: 1px solid var(--k-line);
  border-radius: 999px;
  background: rgb(11 15 16 / 55%);
  backdrop-filter: blur(10px);
  opacity: .82;
  pointer-events: none;
}
.kiosk-brand img { display: block; border-radius: 6px; }
.kiosk-brand span {
  display: flex;
  flex-direction: column;
  font-family: var(--k-display);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
}
.kiosk-brand small {
  font-family: ui-monospace, monospace;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--k-signal);
  direction: ltr;
  text-align: end;
}
.kiosk-brand .kiosk-attribution{display:block;min-inline-size:0;max-inline-size:min(42vw,520px);padding-inline-start:10px;border-inline-start:1px solid var(--k-line);color:var(--k-muted);font:500 clamp(9px,.8vw,12px)/1.6 var(--k-display)}

/* ─── Stage: 3D perspective viewport ─── */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  perspective: 1900px;
  perspective-origin: 50% 50%;
  background:
    radial-gradient(120% 90% at 18% -10%, rgb(25 197 182 / 10%), transparent 55%),
    radial-gradient(100% 80% at 100% 115%, rgb(217 129 79 / 8%), transparent 55%),
    var(--k-ink);
}

.frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 7vw, 120px) clamp(32px, 6vw, 140px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateZ(-340px) scale(.92) rotateY(6deg);
  transition: transform 1100ms var(--k-ease-3d), opacity 750ms ease;
  z-index: 1;
}
.frame.is-active,
.frame.is-leaving { visibility: visible; }
.frame.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateZ(0) scale(1) rotateY(0deg);
  z-index: 3;
}
.frame.is-leaving {
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.stage[data-dir="next"] .frame.is-leaving { transform: translateZ(-440px) scale(.88) rotateY(-11deg); }
.stage[data-dir="prev"] .frame.is-leaving { transform: translateZ(380px) scale(1.09) rotateY(11deg); }

.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / 2.5%) 1px, transparent 1px) 0 0 / 48px 48px;
  mask-image: radial-gradient(80% 70% at 50% 40%, black, transparent 85%);
}

.frame__inner {
  position: relative;
  z-index: 2;
  inline-size: min(1360px, 100%);
  margin-inline: auto;
  text-align: center;
}
.frame__inner--split {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
  text-align: start;
}

.frame-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  padding: 6px 14px;
  border: 1px solid var(--k-line);
  border-radius: 999px;
  color: var(--k-signal);
  font-family: ui-monospace, monospace;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .03em;
}
.frame-title {
  margin: 0 0 clamp(18px, 2vw, 30px);
  font-family: var(--k-display);
  font-weight: 900;
  font-size: clamp(30px, 4.4vw, 64px);
  letter-spacing: -.02em;
  line-height: 1.22;
}
.frame-lead {
  max-inline-size: 620px;
  margin: 0;
  color: var(--k-muted);
  font-size: clamp(15px, 1.6vw, 21px);
  line-height: 1.7;
}
.frame-checks {
  margin: clamp(18px, 2vw, 26px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--k-white);
  font-size: clamp(14px, 1.4vw, 18px);
}
.frame-checks li { padding-inline-start: 22px; position: relative; }
.frame-checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .6em;
  inline-size: 10px;
  block-size: 2px;
  background: var(--k-signal);
}
.frame-boundary {
  max-inline-size: 900px;
  margin: clamp(22px, 3vw, 36px) auto 0;
  padding: 14px 20px;
  border-inline-start: 4px solid var(--k-copper);
  background: rgb(217 129 79 / 8%);
  color: var(--k-white);
  font-size: clamp(13px, 1.2vw, 16px);
  text-align: start;
}
.ltr { direction: ltr; unicode-bidi: plaintext; }

/* Stagger helper: children carry --i (index); [data-beat] elements fade+rise in
   sequence while their ancestor .frame carries .is-active. Removing .is-active
   resets them (via cascade) so the beat replays cleanly next loop. */
[data-beat] {
  opacity: 0;
  transform: translateY(22px);
}
.frame.is-active [data-beat] {
  animation: beatIn 760ms var(--k-ease) both;
}
.frame.is-active [data-beat]:nth-of-type(1) { animation-delay: 60ms; }
.frame.is-active [data-beat]:nth-of-type(2) { animation-delay: 180ms; }
.frame.is-active [data-beat]:nth-of-type(3) { animation-delay: 300ms; }
.frame.is-active [data-beat]:nth-of-type(4) { animation-delay: 420ms; }
.frame.is-active [data-beat]:nth-of-type(5) { animation-delay: 540ms; }
@keyframes beatIn { to { opacity: 1; transform: none; } }

/* ═══ Frame 1 — Cover ═══ */
.frame--cover .frame__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.field-line {
  position: absolute;
  inline-size: 160%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgb(25 197 182 / 35%), transparent);
  animation: fieldSweep 9s linear infinite;
}
.field-line:nth-child(1) { inset-block-start: 22%; animation-duration: 11s; }
.field-line:nth-child(2) { inset-block-start: 54%; animation-duration: 8s; animation-delay: -3s; }
.field-line:nth-child(3) { inset-block-start: 78%; animation-duration: 13s; animation-delay: -6s; }
@keyframes fieldSweep {
  from { transform: translateX(-40%); }
  to { transform: translateX(10%); }
}

.cover { max-inline-size: 1100px; }
.cover__title {
  margin: 0 0 clamp(16px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cover__wordmark {
  font-family: var(--k-display);
  font-weight: 900;
  font-size: clamp(52px, 9vw, 128px);
  letter-spacing: -.03em;
  line-height: 1;
  background: linear-gradient(120deg, var(--k-white) 45%, var(--k-signal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cover__sub {
  font-style: normal;
  font-family: var(--k-display);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 30px);
  color: var(--k-muted);
}
.cover__lead {
  max-inline-size: 700px;
  margin: 0 auto clamp(28px, 3.4vw, 48px);
  color: var(--k-muted);
  font-size: clamp(15px, 1.7vw, 22px);
}

.pipeline { position: relative; margin: 0 auto clamp(28px, 3vw, 44px); max-inline-size: 920px; }
.pipeline__nodes {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 1.4vw, 16px);
}
.pipeline__nodes li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
  border: 1px solid var(--k-line);
  border-radius: 14px;
  background: rgb(255 255 255 / 3%);
  font-family: ui-monospace, monospace;
  font-size: clamp(9px, .9vw, 11px);
  animation: nodePulse var(--k-dwell) var(--k-ease) infinite;
  animation-delay: calc(var(--i) * (var(--k-dwell) / 5));
}
.pipeline__nodes li span { color: var(--k-signal); font-weight: 700; }
.pipeline__nodes li strong { color: var(--k-white); letter-spacing: .02em; }
@keyframes nodePulse {
  0%, 92%, 100% { border-color: var(--k-line); background: rgb(255 255 255 / 3%); transform: translateY(0); }
  6%, 16% { border-color: var(--k-signal); background: rgb(25 197 182 / 12%); transform: translateY(-4px); }
}
.pipeline__track {
  position: absolute;
  inset-inline: 6%;
  inset-block-start: 50%;
  block-size: 1px;
  background: var(--k-line);
  z-index: 0;
}

.cover__url {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border: 1px solid var(--k-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
}
.cover__url strong {
  font-family: ui-monospace, monospace;
  font-size: clamp(15px, 1.6vw, 20px);
  color: var(--k-signal);
  direction: ltr;
}
.cover__url small { color: var(--k-muted); font-size: clamp(10px, 1vw, 12px); }

/* ═══ Frame 2 — Problem stats ═══ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-block-start: clamp(20px, 3vw, 36px);
}
.stat-card {
  padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2vw, 26px);
  border: 1px solid var(--k-line);
  border-radius: 20px;
  background: linear-gradient(160deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%));
  text-align: start;
  transform: perspective(900px) rotateY(calc((var(--i) - 1) * -3deg));
}
.stat-card__tag {
  display: block;
  margin-block-end: 14px;
  color: var(--k-copper);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .05em;
  direction: ltr;
  text-align: end;
}
.stat-card strong {
  display: block;
  margin-block-end: 10px;
  font-family: var(--k-display);
  font-size: clamp(19px, 2vw, 25px);
}
.stat-card p { margin: 0; color: var(--k-muted); font-size: clamp(13px, 1.2vw, 16px); line-height: 1.7; }

/* ═══ Frame 3 — Signal spine ring ═══ */
.spine-ring {
  position: relative;
  --radius: clamp(120px, 15vw, 210px);
  inline-size: calc(var(--radius) * 2 + 132px);
  block-size: calc(var(--radius) * 2 + 80px);
  margin-inline: auto;
}
.spine-ring__sweep {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: calc(var(--radius) * 1.86);
  block-size: calc(var(--radius) * 1.86);
  margin-inline-start: calc(var(--radius) * -.93);
  margin-block-start: calc(var(--radius) * -.93);
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--k-signal) 0deg, rgb(25 197 182 / 45%) 55deg, transparent 140deg);
  mask-image: radial-gradient(circle, transparent 62%, black 63%, black 74%, transparent 75%);
  animation: spineSpin var(--k-dwell) linear infinite;
  opacity: .8;
}
@keyframes spineSpin { to { transform: rotate(360deg); } }
.spine-ring__core {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 108px;
  block-size: 108px;
  margin-inline-start: -54px;
  margin-block-start: -54px;
  border-radius: 50%;
  border: 1px solid var(--k-line);
  background: var(--k-ink-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.spine-ring__core strong { font-family: var(--k-display); font-size: 15px; letter-spacing: .04em; }
.spine-ring__core small { color: var(--k-muted); font-size: 10px; }
.spine-ring__nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.spine-ring__nodes li {
  --spine-angle: calc(var(--i) * 72deg);
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 116px;
  margin-inline-start: -58px;
  margin-block-start: -34px;
  transform: rotate(var(--spine-angle)) translateY(calc(var(--radius) * -1)) rotate(calc(-1 * var(--spine-angle)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  animation: spineNodePulse var(--k-dwell) var(--k-ease) infinite;
  animation-delay: calc(var(--i) * (var(--k-dwell) / 5));
}
.spine-ring__nodes li span { font-family: ui-monospace, monospace; font-size: 11px; color: var(--k-signal); font-weight: 700; }
.spine-ring__nodes li strong { font-size: 14px; }
/* Dedicated keyframes (NOT the shared nodePulse): a CSS animation's `transform`
   keyframe values fully replace the element's static `transform`, so this must
   re-state the circular rotate→translateY(-radius)→counter-rotate placement at
   every step — reusing nodePulse's plain translateY(0/-4px) here previously
   collapsed every node onto the ring's center. */
@keyframes spineNodePulse {
  0%, 92%, 100% {
    border-color: var(--k-line);
    background: rgb(255 255 255 / 3%);
    transform: rotate(var(--spine-angle)) translateY(calc(var(--radius) * -1)) rotate(calc(-1 * var(--spine-angle))) scale(1);
  }
  6%, 16% {
    border-color: var(--k-signal);
    background: rgb(25 197 182 / 12%);
    transform: rotate(var(--spine-angle)) translateY(calc(var(--radius) * -1)) rotate(calc(-1 * var(--spine-angle))) scale(1.16);
  }
}

/* ═══ Frame 4 — Ingestion ═══ */
.ingest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-block-start: clamp(20px, 3vw, 34px);
  perspective: 1400px;
}
.ingest-card {
  padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2vw, 24px);
  border: 1px solid var(--k-line);
  border-radius: 20px;
  background: rgb(255 255 255 / 3%);
  text-align: start;
  transform-style: preserve-3d;
}
.frame.is-active .ingest-card {
  animation: cardFlip 720ms var(--k-ease-3d) both;
  animation-delay: calc(var(--i) * 150ms + 80ms);
}
@keyframes cardFlip {
  from { opacity: 0; transform: rotateY(60deg) translateZ(-40px); }
  to { opacity: 1; transform: none; }
}
.ingest-card b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  margin-block-end: 14px;
  border-radius: 10px;
  background: var(--k-signal);
  color: var(--k-ink);
  font-family: var(--k-display);
  font-weight: 900;
}
.ingest-card h3 { margin: 0 0 8px; font-family: var(--k-display); font-size: clamp(15px, 1.4vw, 18px); }
.ingest-card p { margin: 0; color: var(--k-muted); font-size: clamp(12px, 1.1vw, 15px); line-height: 1.6; }

.approval-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-block-start: clamp(20px, 3vw, 32px);
  color: var(--k-muted);
  font-family: ui-monospace, monospace;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .04em;
  direction: ltr;
}
.approval-strip strong { color: var(--k-signal); }
.approval-strip i { inline-size: 22px; block-size: 1px; background: var(--k-line); }

/* ═══ Frame 5 — Insight ═══ */
.insight-card {
  position: relative;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--k-line);
  border-radius: 24px;
  background: linear-gradient(165deg, rgb(25 197 182 / 10%), rgb(255 255 255 / 2%));
  text-align: start;
  opacity: 0;
  transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateZ(0) translateY(22px);
}
/* Dedicated entrance (not the shared [data-beat]/beatIn, which ends at
   transform:none and would wipe this card's permanent 3D tilt): every
   keyframe re-states the perspective/rotate resting transform. */
.frame.is-active .insight-card {
  animation: insightCardIn 760ms var(--k-ease) 300ms both;
}
@keyframes insightCardIn {
  from { opacity: 0; transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateZ(0) translateY(22px); }
  to { opacity: 1; transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateZ(0); }
}
.insight-card__tag {
  display: inline-block;
  margin-block-end: 16px;
  padding: 4px 10px;
  border: 1px solid var(--k-copper);
  border-radius: 999px;
  color: var(--k-copper);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .04em;
}
.insight-card__metric {
  display: block;
  font-family: var(--k-display);
  font-weight: 900;
  font-size: clamp(46px, 6vw, 78px);
  line-height: 1;
  color: var(--k-signal);
}
.insight-card small { display: block; margin-block: 6px 16px; color: var(--k-muted); font-size: 13px; }
.insight-card > p { margin: 0 0 18px; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.7; }
.insight-card dl { display: flex; gap: 28px; margin: 0; padding-block-start: 16px; border-block-start: 1px solid var(--k-line); }
.insight-card dt { margin: 0; color: var(--k-muted); font-size: 11px; }
.insight-card dd { margin: 4px 0 0; font-weight: 700; }

/* ═══ Frame 6 — Employee journey ═══ */
.journey-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 10px);
  margin-block-start: clamp(28px, 4vw, 46px);
  flex-wrap: wrap;
}
.journey-path__step {
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 24px);
  border: 1px solid var(--k-line);
  border-radius: 16px;
  background: rgb(255 255 255 / 3%);
  min-inline-size: clamp(140px, 16vw, 210px);
  text-align: center;
}
.journey-path__step--proof { border-color: var(--k-signal); background: rgb(25 197 182 / 10%); }
.journey-path__step span { display: block; margin-block-end: 8px; color: var(--k-signal); font-family: ui-monospace, monospace; font-size: 11px; direction: ltr; }
.journey-path__step strong { font-family: var(--k-display); font-size: clamp(14px, 1.3vw, 17px); }
.journey-path__arrow {
  inline-size: clamp(20px, 3vw, 40px);
  block-size: 1px;
  background: var(--k-line);
  position: relative;
}
.journey-path__arrow::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -3px;
  border: 3px solid transparent;
  border-inline-start-color: var(--k-muted);
}
.frame.is-active .journey-path__step,
.frame.is-active .journey-path__arrow {
  opacity: 0;
  transform: translateY(18px);
  animation: beatIn 620ms var(--k-ease) both;
  animation-delay: calc(var(--i) * 110ms + 100ms);
}

/* ═══ Frame 7 — Manager cockpit ═══ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 20px);
  margin-block-start: clamp(20px, 3vw, 34px);
}
.kpi-tile {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 20px);
  border: 1px solid var(--k-line);
  border-radius: 18px;
  background: rgb(255 255 255 / 3%);
  text-align: start;
}
.frame.is-active .kpi-tile {
  animation: beatIn 640ms var(--k-ease) both;
  animation-delay: calc(var(--i) * 130ms + 90ms);
}
.kpi-tile span { display: block; margin-block-end: 10px; color: var(--k-muted); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .04em; direction: ltr; }
.kpi-tile strong { display: block; font-family: var(--k-display); font-size: clamp(24px, 2.6vw, 34px); }
.kpi-tile--action { background: rgb(25 197 182 / 10%); border-color: var(--k-signal); }
.kpi-tile--action strong { font-size: clamp(14px, 1.3vw, 17px); }
.kpi-tile em {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 0%;
  block-size: 3px;
  background: var(--k-signal);
  transition: inline-size 1100ms var(--k-ease) 300ms;
}
.frame.is-active .kpi-tile em { inline-size: var(--fill, 0%); }

/* ═══ Frame 8 — Dedicated cell ═══ */
.cell-diagram { position: relative; perspective: 1500px; }
.cell-diagram__control {
  padding: 16px 20px;
  margin-block-end: 18px;
  border: 1px dashed var(--k-line);
  border-radius: 14px;
  color: var(--k-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cell-diagram__control span { color: var(--k-white); font-family: ui-monospace, monospace; font-weight: 700; }
.cell-diagram__cell {
  padding: 20px;
  border: 1px solid var(--k-signal);
  border-radius: 18px;
  background: rgb(25 197 182 / 6%);
}
.cell-diagram__cell header {
  margin-block-end: 14px;
  color: var(--k-signal);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  direction: ltr;
  text-align: end;
}
.cell-diagram__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.cell-diagram__tiles span {
  padding: 12px 6px;
  border: 1px solid var(--k-line);
  border-radius: 10px;
  background: var(--k-ink-2);
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .03em;
  transform-style: preserve-3d;
}
.frame.is-active .cell-diagram__tiles span {
  animation: tileAssemble 680ms var(--k-ease-3d) both;
  animation-delay: calc(var(--i) * 90ms + 120ms);
}
@keyframes tileAssemble {
  from { opacity: 0; transform: translateZ(-90px) scale(.7) rotateX(30deg); }
  to { opacity: 1; transform: none; }
}

/* ═══ Frame 9 — Timeline + CTA ═══ */
.timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(22px, 3vw, 36px) 0;
  padding: 0;
  list-style: none;
}
.timeline li {
  position: relative;
  padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 20px) clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--k-line);
  border-radius: 16px;
  background: rgb(255 255 255 / 3%);
  text-align: start;
  overflow: hidden;
}
.timeline li span { display: block; margin-block-end: 8px; color: var(--k-copper); font-family: ui-monospace, monospace; font-size: 11px; direction: ltr; }
.timeline li strong { font-family: var(--k-display); font-size: clamp(15px, 1.4vw, 18px); }
.timeline li::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 0%;
  block-size: 3px;
  background: var(--k-signal);
}
.frame.is-active .timeline li {
  animation: beatIn 620ms var(--k-ease) both;
  animation-delay: calc(var(--i) * 160ms + 100ms);
}
.frame.is-active .timeline li::after {
  animation: timelineFill 900ms var(--k-ease) both;
  animation-delay: calc(var(--i) * 160ms + 500ms);
}
@keyframes timelineFill { to { inline-size: 100%; } }

.finale-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-block-start: clamp(20px, 3vw, 30px);
}
.finale-cta__url {
  font-family: var(--k-display);
  font-weight: 900;
  font-size: clamp(34px, 5vw, 60px);
  color: var(--k-signal);
  direction: ltr;
}
.finale-cta span { color: var(--k-muted); font-size: clamp(13px, 1.2vw, 16px); direction: ltr; }

/* ═══ Browser-captured product frames ═══ */
.frame--screenshot {
  padding: clamp(64px, 7vh, 92px) clamp(24px, 4vw, 70px) clamp(92px, 10vh, 124px);
  background:
    radial-gradient(70% 70% at 8% 14%, rgb(25 197 182 / 12%), transparent 70%),
    radial-gradient(60% 65% at 96% 88%, rgb(217 129 79 / 9%), transparent 72%);
}
.frame--screenshot .frame__inner { inline-size: min(1500px, 100%); }
.frame--screenshot .frame-eyebrow { margin-block-end: clamp(8px, 1.2vh, 14px); }
.product-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: clamp(15px, 1.6vw, 24px);
  background: #0d1213;
  box-shadow: 0 42px 110px rgb(0 0 0 / 48%), 0 0 0 1px rgb(25 197 182 / 9%);
  transform: perspective(1800px) rotateX(.9deg) rotateY(-.8deg) translateZ(0);
  transform-origin: center center;
}
.product-shot::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 42px 0 auto;
  block-size: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), transparent 40%);
  mix-blend-mode: normal;
  opacity: .38;
}
.product-shot__bar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-block-size: 44px;
  padding: 7px 13px;
  border-block-end: 1px solid rgb(255 255 255 / 10%);
  background: #141b1d;
  color: #aeb9bb;
  font-size: 12px;
}
.product-shot__bar > span { display: inline-flex; align-items: center; gap: 5px; }
.product-shot__bar i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #536164; }
.product-shot__bar i:first-child { background: #d9814f; }
.product-shot__bar i:nth-child(2) { background: #e8c766; }
.product-shot__bar i:nth-child(3) { background: #19c5b6; margin-inline-end: 6px; }
.product-shot__bar a {
  display: inline-flex;
  align-items: center;
  min-block-size: 30px;
  padding-inline: 10px;
  border: 1px solid rgb(25 197 182 / 38%);
  border-radius: 999px;
  color: #42d8c9;
  font-weight: 700;
  text-decoration: none;
}
.product-shot__bar a:hover { background: rgb(25 197 182 / 11%); }
.product-shot__viewport {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: min(62svh, 650px);
  overflow: hidden;
  background: #f3efe6;
}
.product-shot__viewport img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
  object-position: center top;
}
.product-shot figcaption {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  min-block-size: 62px;
  padding: 10px clamp(18px, 3vw, 42px);
  border-block-start: 1px solid rgb(255 255 255 / 10%);
  background: #111719;
  text-align: center;
}
.product-shot figcaption strong { color: #f6f8f8; font: 800 clamp(16px, 1.5vw, 20px) var(--k-display); }
.product-shot figcaption span { color: #aeb9bb; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.65; }
.product-shot figcaption strong::after { content: "—"; margin-inline-start: 16px; color: #19c5b6; }

/* ═══ Kiosk controls (auto-hide with cursor) ═══ */
.kiosk-controls {
  position: fixed;
  z-index: 80;
  inset-inline: 0;
  inset-block-end: clamp(14px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-inline: 20px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms var(--k-ease), transform 420ms var(--k-ease), visibility 0s;
  pointer-events: auto;
}
body.kiosk.is-idle .kiosk-controls {
  opacity: 0;
  transform: translateY(14px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms var(--k-ease), transform 420ms var(--k-ease), visibility 0s linear 420ms;
}

.kiosk-progress {
  display: flex;
  gap: 3px;
  inline-size: min(920px, 94vw);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kiosk-progress li { flex: 1 1 0; block-size: 6px; margin-block: 3px; }
.kiosk-progress button {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 16%);
  overflow: hidden;
  cursor: pointer;
}
.kiosk-progress button span {
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: 0%;
  background: var(--k-signal);
  border-radius: 999px;
}
.kiosk-progress li.is-done button span { inline-size: 100%; }
.kiosk-progress li.is-current button span {
  animation: progressFill var(--k-dwell) linear forwards;
}
body.kiosk.is-paused .kiosk-progress li.is-current button span { animation-play-state: paused; }
@keyframes progressFill { from { inline-size: 0%; } to { inline-size: 100%; } }

.kiosk-controls__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--k-line);
  border-radius: 999px;
  background: rgb(11 15 16 / 72%);
  backdrop-filter: blur(14px);
}
.kiosk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--k-white);
  transition: background 160ms var(--k-ease), color 160ms var(--k-ease), transform 160ms var(--k-ease);
}
.kiosk-btn svg { inline-size: 20px; block-size: 20px; }
.kiosk-btn:hover { background: rgb(255 255 255 / 10%); }
.kiosk-btn:active { transform: scale(.92); }
.kiosk-btn:focus-visible { outline: 2px solid var(--k-signal); outline-offset: 2px; }
.kiosk-btn--primary { inline-size: 48px; block-size: 48px; background: var(--k-signal); color: var(--k-ink); }
.kiosk-btn--primary:hover { background: #3bd4c5; }
.kiosk-controls__count {
  min-inline-size: 52px;
  color: var(--k-muted);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  text-align: center;
  direction: ltr;
}
.kiosk-controls__spacer { inline-size: 6px; }

.icon-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.kiosk-noscript {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--k-ink);
  color: var(--k-white);
  text-align: center;
  font-size: 18px;
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .frame,
  .kiosk-controls,
  [data-beat],
  .insight-card,
  .ingest-card,
  .kpi-tile,
  .cell-diagram__tiles span,
  .timeline li,
  .journey-path__step,
  .journey-path__arrow {
    animation: none !important;
    transition-duration: 220ms !important;
  }
  [data-beat] { opacity: 1; transform: none; }
  .insight-card { opacity: 1; transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateZ(0); }
  .field-line, .pipeline__nodes li, .spine-ring__sweep, .spine-ring__nodes li { animation: none !important; }
  .kiosk-progress li.is-current button span { inline-size: 60%; animation: none !important; }
}

/* ═══ Narrower / preview viewports ═══ */
@media (max-width: 980px) {
  .frame__inner--split { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .frame__inner--split .frame-lead,
  .frame__inner--split .frame-checks { margin-inline: auto; text-align: start; }
  .stat-grid,
  .ingest-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { grid-template-columns: 1fr; }
  .pipeline__nodes { grid-template-columns: repeat(3, 1fr); }
  .cell-diagram__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .frame--screenshot { padding: 82px 14px 128px; }
  .frame--screenshot .frame-eyebrow { margin-block-end: 8px; }
  .product-shot { transform: none; border-radius: 14px; }
  .product-shot__viewport { block-size: min(56svh, 520px); }
  .product-shot figcaption { align-items: flex-start; flex-direction: column; gap: 3px; text-align: start; }
  .product-shot figcaption strong::after { content: none; }
}

@media (max-width: 640px) {
  .product-shot__bar { font-size: 10px; }
  .product-shot__bar > span i { display: none; }
  .product-shot__viewport { block-size: 46svh; }
  .product-shot figcaption strong { font-size: 15px; }
  .product-shot figcaption span { font-size: 13px; }
}

.frame--dense{padding-block:clamp(62px,5.4vw,92px) clamp(88px,7.4vw,122px)}
.frame--dense .frame-title{margin-block-end:clamp(10px,1.4vw,18px);font-size:clamp(28px,3.35vw,50px)}
.frame-lead--center{margin-inline:auto;text-align:center}
.frame-meta{display:inline-flex;margin-block-start:12px;padding:4px 10px;border:1px solid rgb(217 129 79/55%);border-radius:999px;color:var(--k-copper);font:9px ui-monospace,monospace;letter-spacing:.07em;direction:ltr}
.frame-note,.approval-caption,.journey-proofbar,.versus-note{margin:0;color:var(--k-muted);font-size:clamp(11px,1.05vw,14px);line-height:1.7;text-align:start}
.frame-actions{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,24px);margin-block-start:clamp(16px,2.2vw,26px)}
.frame-actions>:first-child{max-inline-size:760px}
.demo-launch,.finale-link{position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:0 0 auto;min-block-size:40px;padding:9px 15px;border:1px solid rgb(25 197 182/45%);border-radius:999px;background:rgb(25 197 182/8%);color:var(--k-white);font:700 clamp(11px,1vw,13px)/1.2 var(--k-display);text-decoration:none;transition:180ms var(--k-ease)}
.demo-launch i,.finale-link i{color:var(--k-signal);font:normal 1em ui-monospace,monospace;direction:ltr}
.demo-launch:hover,.finale-link:hover{border-color:var(--k-signal);background:rgb(25 197 182/15%);transform:translateY(-2px)}
.demo-launch:focus-visible,.finale-link:focus-visible{outline:2px solid var(--k-signal);outline-offset:4px}
@keyframes atlasIn{from{opacity:0;transform:translateY(20px) translateZ(-40px)}to{opacity:1;transform:none}}
@keyframes atlasSpin{to{transform:rotate(360deg)}}
@keyframes atlasTravel{to{inset-inline-start:calc(100% - 9px)}}
.atlas-ring{position:absolute;inset-inline-start:10%;inset-block-start:50%;inline-size:min(52vw,760px);aspect-ratio:1;border:1px solid rgb(25 197 182/12%);border-radius:50%;transform:translateY(-50%) rotateX(68deg)}
.atlas-ring--two{inset-inline-start:auto;inset-inline-end:-10%;inline-size:min(38vw,560px);border-color:rgb(217 129 79/12%);transform:translateY(-50%) rotateX(68deg) rotateZ(24deg)}
.frame.is-active .atlas-ring--one{animation:coverOrbit 18s linear infinite}.frame.is-active .atlas-ring--two{animation:coverOrbitTwo 22s linear infinite reverse}
@keyframes coverOrbit{to{transform:translateY(-50%) rotateX(68deg) rotateZ(360deg)}}@keyframes coverOrbitTwo{to{transform:translateY(-50%) rotateX(68deg) rotateZ(384deg)}}
.cover__truth{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;margin:-8px auto clamp(18px,2.2vw,30px);color:var(--k-muted);font-size:clamp(10px,1vw,12px)}
.cover__truth span{padding:3px 7px;border:1px solid var(--k-line);border-radius:999px;color:var(--k-signal);font:9px ui-monospace,monospace;direction:ltr}
.pipeline__track{overflow:visible}.pipeline__traveler{position:absolute;inset-block-start:50%;inset-inline-start:0;inline-size:8px;block-size:8px;margin-block-start:-4px;border-radius:50%;background:var(--k-white);box-shadow:0 0 0 5px rgb(25 197 182/12%),0 0 20px rgb(25 197 182/70%)}
.frame.is-active .pipeline__traveler{animation:pipelineTravel var(--k-dwell) linear infinite}@keyframes pipelineTravel{0%{inset-inline-start:0;opacity:0}4%,94%{opacity:1}100%{inset-inline-start:100%;opacity:0}}
.pipeline__caption{margin:12px 0 0;color:var(--k-muted);font-size:clamp(10px,1vw,12px)}
.cover__url{color:inherit;text-decoration:none;transition:180ms var(--k-ease)}.cover__url:hover{border-color:rgb(25 197 182/60%);background:rgb(25 197 182/8%)}.cover__url:focus-visible{outline:2px solid var(--k-signal);outline-offset:4px}
.decision-contrast{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.55fr) minmax(0,1fr);align-items:stretch;gap:clamp(12px,1.8vw,22px);margin-block-start:clamp(22px,3vw,34px);perspective:1300px}
.contrast-card,.decision-gap,.boundary-side,.resilience-rail,.role-card,.lifecycle-card,.local-card{border:1px solid var(--k-line);border-radius:18px;background:rgb(255 255 255/3%)}
.contrast-card,.boundary-side,.resilience-rail,.role-card,.lifecycle-card,.local-card{text-align:start}
.contrast-card{min-block-size:190px;padding:clamp(20px,2.2vw,30px)}.contrast-card strong{display:block;margin-block:12px 8px;font:700 clamp(17px,1.7vw,22px) var(--k-display)}.contrast-card p{margin:0;color:var(--k-muted);font-size:clamp(12px,1.1vw,15px);line-height:1.8}
.tech-label{color:var(--k-copper);font:9px ui-monospace,monospace;letter-spacing:.06em;direction:ltr}
.decision-gap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;border-color:rgb(25 197 182/35%);background:rgb(25 197 182/6%)}
.decision-gap:before{content:"";position:absolute;inset-block:0;inset-inline-start:50%;inline-size:1px;background:linear-gradient(transparent,var(--k-signal),transparent)}
.decision-gap span,.decision-gap strong{position:relative;z-index:1;padding:4px 8px;background:var(--k-ink-2);font:9px ui-monospace,monospace;direction:ltr}.decision-gap strong{margin-block-start:8px;color:var(--k-signal)}
.frame.is-active :is(.contrast-card,.decision-gap,.ledger-row,.boundary-side,.evidence-wall,.spec-field,.resilience-rail,.engine-core,.role-card,.action-step,.action-arrow,.lifecycle-card,.versus-row,.local-card){animation:atlasIn 620ms var(--k-ease) both;animation-delay:calc(var(--i,0)*110ms + 90ms)}
.spine-copy__body{margin:clamp(14px,1.5vw,20px) 0 0;color:var(--k-white);font-size:clamp(12px,1.15vw,15px);line-height:1.8}
.spine-ring__thread{position:absolute;inset:50% auto auto 50%;inline-size:calc(var(--radius)*2.05);block-size:calc(var(--radius)*2.05);transform:translate(-50%,-50%);opacity:.58}.spine-ring__thread circle{fill:none;stroke:var(--k-copper);stroke-width:1.4;stroke-dasharray:2 4}.frame.is-active .spine-ring__thread circle{animation:threadMarch 9s linear infinite}@keyframes threadMarch{to{stroke-dashoffset:-100}}
.spine-ring__orbit{position:absolute;z-index:3;inset-inline-start:50%;inset-block-start:50%;inline-size:8px;block-size:8px;margin:-4px;border:2px solid var(--k-white);border-radius:50%;background:var(--k-signal);box-shadow:0 0 16px var(--k-signal);transform:rotate(calc(var(--i)*72deg)) translateY(calc(var(--radius)*-.92))}
.frame.is-active .spine-ring__orbit{animation:evidenceOrbit var(--k-dwell) linear infinite;animation-delay:calc(var(--i)*(var(--k-dwell)/-5))}@keyframes evidenceOrbit{to{transform:rotate(calc(var(--i)*72deg + 360deg)) translateY(calc(var(--radius)*-.92))}}
.spine-readout{position:absolute;inset-inline-start:50%;inset-block-end:0;transform:translateX(50%);padding:5px 10px;border:1px solid var(--k-line);border-radius:999px;background:var(--k-ink-2);color:var(--k-muted);font:9px ui-monospace,monospace;direction:ltr}.spine-readout b{color:var(--k-signal)}
.spine-ledger{display:grid;gap:8px;margin:clamp(18px,2.5vw,30px) 0 0;padding:0;list-style:none}
.ledger-row{display:grid;grid-template-columns:minmax(105px,.8fr) repeat(3,minmax(0,1fr)) 30px;align-items:center;gap:clamp(8px,1.3vw,18px);padding:clamp(9px,1vw,13px) clamp(12px,1.4vw,18px);border:1px solid var(--k-line);border-inline-start:3px solid var(--k-signal);border-radius:12px;background:rgb(255 255 255/2.5%);text-align:start}
.ledger-row small{display:block;margin-block-end:3px;color:var(--k-muted);font:8px ui-monospace,monospace;letter-spacing:.05em;direction:ltr}.ledger-row strong{display:block;overflow:hidden;color:var(--k-white);font:400 clamp(9px,.9vw,11px) ui-monospace,monospace;text-overflow:ellipsis;white-space:nowrap;direction:ltr}
.ledger-row__stage b{display:block;color:var(--k-signal);font:clamp(10px,1vw,12px) ui-monospace,monospace;direction:ltr}.ledger-row__stage small{color:var(--k-white);font-family:var(--k-body);direction:rtl}
.ledger-row>i{display:grid;place-items:center;inline-size:24px;block-size:24px;border:1px solid var(--k-signal);border-radius:50%;color:var(--k-signal);font-style:normal;transform:rotate(-8deg)}
.trust-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:clamp(36px,6vw,90px);text-align:start}
.trust-contracts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-block-start:16px}.trust-contract{display:block;padding:9px 11px;border:1px solid var(--k-line);border-radius:10px;background:rgb(255 255 255/3%)}.trust-contract b{display:block;margin-block-end:3px;color:var(--k-signal);font:9px ui-monospace,monospace;direction:ltr}.trust-contract small{color:var(--k-muted);font-size:10px}.trust-contract--pause{border-color:rgb(217 129 79/50%)}.trust-contract--pause b{color:var(--k-copper)}
.frame.is-active .trust-contract{animation:atlasIn 560ms var(--k-ease) both;animation-delay:calc(var(--i)*90ms + 100ms)}
.permission-strip{display:grid;gap:5px;margin-block:13px;padding:10px 12px;border-inline-start:3px solid var(--k-copper);background:rgb(217 129 79/7%);color:var(--k-muted);font-size:9px;line-height:1.5}.permission-strip b{color:var(--k-white)}
.agent-orbit{--agent-radius:-170px;position:relative;inline-size:min(34vw,460px);aspect-ratio:1;margin-inline:auto;perspective:1200px;transform:rotateX(8deg);transform-style:preserve-3d}.agent-orbit__rail{position:absolute;inset:10%;border:1px dashed rgb(25 197 182/42%);border-radius:50%;box-shadow:inset 0 0 50px rgb(25 197 182/6%)}.agent-orbit__rail:before{content:"";position:absolute;inset:22%;border:1px solid rgb(217 129 79/30%);border-radius:50%}.frame.is-active .agent-orbit__rail{animation:atlasSpin 34s linear infinite}
.agent-orbit__core{position:absolute;inset:50% auto auto 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;inline-size:132px;block-size:116px;transform:translate(-50%,-50%);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:linear-gradient(145deg,var(--k-ink-2),rgb(25 197 182/18%));filter:drop-shadow(0 0 24px rgb(25 197 182/18%))}.agent-orbit__core b{font:700 20px var(--k-display)}.agent-orbit__core small{color:var(--k-signal);font:8px ui-monospace,monospace}
.agent-orbit__token{position:absolute;inset-inline-start:50%;inset-block-start:50%;inline-size:76px;margin-inline-start:-38px;padding:6px 4px;border:1px solid var(--k-signal);border-radius:999px;background:var(--k-ink-2);font:8px ui-monospace,monospace;text-align:center;transform:rotate(var(--a)) translateY(var(--agent-radius)) rotate(calc(-1*var(--a)))}.agent-orbit__token--pause{border-color:var(--k-copper);color:var(--k-copper)}
.frame.is-active .agent-orbit__token{animation:orbitDock 680ms var(--k-ease-3d) both;animation-delay:calc(var(--i)*120ms + 200ms)}@keyframes orbitDock{from{opacity:0;transform:rotate(var(--a)) translateY(-70px) rotate(calc(-1*var(--a))) scale(.55)}to{opacity:1;transform:rotate(var(--a)) translateY(var(--agent-radius)) rotate(calc(-1*var(--a))) scale(1)}}
.boundary-scene{display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);align-items:stretch;gap:clamp(12px,2vw,24px);margin-block-start:clamp(18px,2.4vw,30px)}.boundary-side{position:relative;min-block-size:240px;padding:clamp(18px,2vw,26px);overflow:hidden}.boundary-side h3{margin:8px 0 12px;font:700 clamp(17px,1.6vw,21px) var(--k-display)}.boundary-side ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.boundary-side li{padding:6px 9px;border:1px solid var(--k-line);border-radius:9px;color:var(--k-muted);font-size:clamp(10px,1vw,13px)}.boundary-side--pass li{border-color:rgb(25 197 182/28%);color:var(--k-white);background:rgb(25 197 182/6%)}
.evidence-wall{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--k-copper);font:8px ui-monospace,monospace;direction:ltr}.evidence-wall:before{content:"";position:absolute;inset-block:0;inset-inline-start:50%;inline-size:3px;background:linear-gradient(transparent,var(--k-signal),var(--k-copper),var(--k-signal),transparent);box-shadow:0 0 22px rgb(25 197 182/35%)}.evidence-wall span,.evidence-wall strong{z-index:1;padding:3px 5px;background:var(--k-ink)}.evidence-wall i{z-index:2;inline-size:12px;block-size:42px;border:1px solid var(--k-signal);background:var(--k-ink-2)}
.insight-card__trace{display:flex;gap:6px;margin-block-start:12px;color:var(--k-signal);font:8px ui-monospace,monospace}.pack-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:clamp(18px,3vw,36px);margin-block-start:clamp(18px,2.4vw,28px);text-align:start}.evidence-specimen{position:relative;display:flex;flex-direction:column;justify-content:center;min-block-size:290px;padding:clamp(24px,3vw,38px);border:1px solid rgb(25 197 182/50%);border-radius:22px;background:linear-gradient(145deg,rgb(25 197 182/11%),transparent 60%),var(--k-ink-2);transform:perspective(1100px) rotateX(2deg) rotateY(4deg)}.evidence-specimen>strong{margin-block:12px 8px;font:700 clamp(24px,2.8vw,36px) var(--k-display)}.evidence-specimen p{margin:0 0 18px;color:var(--k-muted);font:11px ui-monospace,monospace;direction:ltr}.evidence-specimen code{padding-block-start:14px;border-block-start:1px solid var(--k-line);color:var(--k-signal);font-size:10px;direction:ltr}.specimen-seal{align-self:flex-end;margin-block-start:18px;padding:5px 9px;border:1px solid var(--k-copper);color:var(--k-copper);font:8px ui-monospace,monospace;transform:rotate(-6deg)}
.specimen-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0}.spec-field{padding:12px 14px;border:1px solid var(--k-line);border-inline-start:2px solid var(--k-signal);border-radius:11px;background:rgb(255 255 255/2.5%)}.spec-field:last-child{grid-column:1/-1}.spec-field dt{margin-block-end:5px;color:var(--k-signal);font:8px ui-monospace,monospace;direction:ltr}.spec-field dd{margin:0;color:var(--k-muted);font-size:clamp(10px,.95vw,12px);line-height:1.6}
.resilience-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-block-start:clamp(18px,2.5vw,30px);text-align:start}.resilience-rail{padding:clamp(18px,2.2vw,28px)}.resilience-rail--alive{border-color:rgb(25 197 182/42%)}.resilience-rail h3{margin:9px 0 16px;font:700 clamp(17px,1.7vw,23px) var(--k-display)}.resilience-rail p{margin:14px 0 0;color:var(--k-muted);font-size:clamp(11px,1vw,13px);line-height:1.7}
.circuit-line{position:relative;block-size:46px;border-block:1px solid rgb(25 197 182/35%);background:repeating-linear-gradient(90deg,rgb(25 197 182/22%) 0 14px,transparent 14px 24px)}.circuit-line i{position:absolute;inset-inline-start:0;inset-block-start:50%;inline-size:10px;block-size:10px;margin-block-start:-5px;border-radius:50%;background:var(--k-signal);box-shadow:0 0 15px var(--k-signal)}.circuit-line span{position:absolute;inset-block-start:50%;inline-size:8px;block-size:8px;margin-block-start:-4px;border:1px solid var(--k-signal);border-radius:50%;background:var(--k-ink-2)}.circuit-line span:nth-of-type(1){inset-inline-start:28%}.circuit-line span:nth-of-type(2){inset-inline-start:58%}.circuit-line span:nth-of-type(3){inset-inline-start:86%}.circuit-line--broken:after{content:"";position:absolute;inset-block:-2px;inset-inline-start:44%;inline-size:18%;background:var(--k-ink-2);border-inline:2px solid var(--k-copper)}.circuit-line--broken b{position:absolute;z-index:2;inset-inline-start:50%;inset-block-start:50%;transform:translate(50%,-50%);padding:3px 6px;background:var(--k-ink-2);color:var(--k-copper);font:7px ui-monospace,monospace;white-space:nowrap;direction:ltr}.frame.is-active .circuit-line:not(.circuit-line--broken) i{animation:atlasTravel 4s linear infinite}.engine-core{grid-column:1/-1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:12px;border:1px solid rgb(25 197 182/30%);border-radius:12px;background:rgb(25 197 182/6%)}.engine-core span{color:var(--k-signal);font:8px ui-monospace,monospace}.engine-core strong{font:700 clamp(12px,1.2vw,15px) var(--k-display)}
.journey-path__step small{display:block;margin-block-start:5px;color:var(--k-muted);font-size:9px}.journey-proofbar{padding:10px 13px;border-inline-start:3px solid var(--k-signal);background:rgb(25 197 182/6%)}
.roles-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(9px,1.4vw,16px);margin-block-start:clamp(16px,2.2vw,26px);perspective:1200px}.role-card{padding:clamp(13px,1.5vw,19px)}.role-card>span{color:var(--k-signal);font:8px ui-monospace,monospace;direction:ltr}.role-card strong{display:block;margin-block:7px 5px;font:700 clamp(13px,1.3vw,17px) var(--k-display)}.role-card p{margin:0;color:var(--k-muted);font-size:clamp(9px,.9vw,11px);line-height:1.6}.role-card--operator{border-color:rgb(217 129 79/45%)}.role-card--operator>span{color:var(--k-copper)}
.role-matrix-wrap{display:flex;align-items:center;justify-content:center;gap:14px;margin-block-start:14px}.role-matrix{flex:1;max-inline-size:850px;border-collapse:collapse;font:8px ui-monospace,monospace;direction:ltr}.role-matrix caption{position:absolute;inline-size:1px;block-size:1px;overflow:hidden}.role-matrix th,.role-matrix td{padding:5px 8px;border:1px solid var(--k-line);text-align:center}.role-matrix thead th{color:var(--k-muted);font-weight:400}.role-matrix tbody th{color:var(--k-white);text-align:start}.role-matrix td{color:var(--k-signal)}
.kpi-tile small{display:block;margin-block-start:7px;color:var(--k-muted);font-size:9px}.kpi-spark{display:block;inline-size:100%;block-size:26px;margin-block-start:10px;overflow:visible}.kpi-spark polyline{fill:none;stroke:var(--k-signal);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1}.frame.is-active .kpi-spark polyline{animation:sparkDraw 1300ms var(--k-ease) 420ms both}@keyframes sparkDraw{to{stroke-dashoffset:0}}.frame--cockpit .frame-actions .frame-boundary{margin:0}
.action-loop{display:flex;align-items:stretch;justify-content:center;gap:clamp(4px,.8vw,9px);margin:clamp(22px,3vw,34px) 0 0;padding:0;list-style:none;perspective:1200px}.action-step{flex:1;min-inline-size:120px;padding:clamp(14px,1.5vw,20px) 10px;border:1px solid var(--k-line);border-radius:14px;background:rgb(255 255 255/3%);text-align:center}.action-step span{display:block;color:var(--k-signal);font:8px ui-monospace,monospace}.action-step strong{display:block;margin-block:7px 4px;font:700 clamp(12px,1.2vw,15px) var(--k-display)}.action-step small{color:var(--k-muted);font-size:9px}.action-step--human{border-color:var(--k-copper);background:rgb(217 129 79/8%)}.action-step--human span{color:var(--k-copper)}.action-arrow{align-self:center;color:var(--k-muted);font:normal 1em ui-monospace,monospace}
.audit-loop,.audit-ticker{display:flex;align-items:center;justify-content:center;gap:10px;margin-block-start:16px;color:var(--k-muted);font:8px ui-monospace,monospace;white-space:nowrap;direction:ltr}.audit-loop i,.audit-ticker i{inline-size:24px;block-size:1px;background:var(--k-signal)}.audit-loop strong{color:var(--k-copper)}
.cell-copy-points{display:grid;gap:7px;margin:16px 0;padding:0;list-style:none;color:var(--k-muted);font-size:clamp(10px,1vw,13px);line-height:1.6}.cell-copy-points li{position:relative;padding-inline-start:15px}.cell-copy-points li:before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.65em;inline-size:7px;block-size:2px;background:var(--k-signal)}
.cell-shield{position:absolute;z-index:-1;inset:42px -18px -18px;border:1px dashed rgb(25 197 182/50%);border-radius:26px;box-shadow:0 0 50px rgb(25 197 182/8%)}.frame.is-active .cell-shield{animation:shield 7s ease-in-out infinite}@keyframes shield{50%{border-color:var(--k-signal);box-shadow:0 0 70px rgb(25 197 182/18%)}}
.lifecycle-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.5vw,18px);margin-block-start:clamp(20px,2.8vw,32px)}.lifecycle-grid:before{content:"";position:absolute;z-index:-1;inset-inline:5%;inset-block-start:50%;block-size:1px;background:linear-gradient(90deg,var(--k-signal),var(--k-copper),var(--k-signal))}.lifecycle-card{padding:clamp(16px,1.8vw,24px)}.lifecycle-card>span{color:var(--k-signal);font:8px ui-monospace,monospace}.lifecycle-card strong{display:block;margin-block:7px;font:700 clamp(13px,1.3vw,17px) var(--k-display)}.lifecycle-card p{margin:0;color:var(--k-muted);font-size:clamp(9px,.9vw,11px);line-height:1.6}.lifecycle-card--return{border-color:rgb(217 129 79/50%)}.lifecycle-card--return>span{color:var(--k-copper)}.audit-ticker{padding:8px 12px;overflow:hidden;border-block:1px solid var(--k-line)}
.versus-deck{display:grid;gap:8px;margin-block-start:clamp(18px,2.4vw,28px);text-align:start}.versus-row{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(190px,1fr) 36px minmax(240px,1.35fr);align-items:center;gap:clamp(8px,1.2vw,16px);padding:10px 13px;border:1px solid var(--k-line);border-radius:12px;background:rgb(255 255 255/2.5%)}.versus-name{font:clamp(9px,.9vw,11px) ui-monospace,monospace;direction:ltr}.versus-row p{margin:0;color:var(--k-muted);font-size:clamp(9px,.9vw,11px)}.versus-row>i{block-size:1px;background:var(--k-signal)}.versus-row>strong{padding:7px 9px;border:1px solid rgb(25 197 182/25%);border-radius:8px;background:rgb(25 197 182/5%);font-size:clamp(9px,.9vw,11px);font-weight:400}
.frame--benchmark::before{content:"";position:absolute;z-index:0;inset:8% 5%;border:1px solid color-mix(in srgb,var(--k-signal) 20%,transparent);border-radius:34px;transform:perspective(1600px) rotateX(1deg);pointer-events:none}.frame--benchmark-global::before{border-color:color-mix(in srgb,var(--k-copper) 26%,transparent)}
.frame__inner--benchmark{inline-size:min(1510px,100%)}.frame--benchmark .frame-eyebrow{margin-block-end:clamp(7px,.8vw,11px)}.frame--benchmark .frame-title{margin-block-end:clamp(6px,.8vw,11px);font-size:clamp(25px,2.65vw,42px)}.frame--benchmark .frame-lead{max-inline-size:980px;font-size:clamp(14px,1.12vw,17px);line-height:1.55}
.benchmark-ledger{display:grid;grid-template-columns:64px minmax(0,1fr);min-inline-size:0;margin-block-start:clamp(13px,1.5vw,20px);overflow:hidden;border:1px solid var(--k-line);border-radius:18px;background:var(--k-ink-2);box-shadow:0 24px 80px rgb(0 0 0/20%);text-align:start}
.benchmark-ledger__rail{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 10px;border-inline-end:1px solid color-mix(in srgb,var(--k-signal) 32%,var(--k-line));background:linear-gradient(180deg,color-mix(in srgb,var(--k-signal) 15%,var(--k-ink-2)),var(--k-ink-2));color:var(--k-signal);font-family:ui-monospace,monospace;letter-spacing:.06em;writing-mode:vertical-rl;transform:rotate(180deg)}
.frame--benchmark-global .benchmark-ledger__rail{border-inline-end-color:color-mix(in srgb,var(--k-copper) 38%,var(--k-line));background:linear-gradient(180deg,color-mix(in srgb,var(--k-copper) 16%,var(--k-ink-2)),var(--k-ink-2));color:var(--k-copper)}
.benchmark-ledger__rail small{font-size:12px}.benchmark-ledger__rail strong{font-size:13px}.benchmark-ledger__rail span{color:var(--k-muted);font-size:12px;letter-spacing:0;direction:ltr}
.benchmark-scroll{min-inline-size:0;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-color:var(--k-signal) var(--k-ink-3);scrollbar-width:thin}.benchmark-scroll:focus-visible{outline:2px solid var(--k-signal);outline-offset:-3px}
.benchmark-table{inline-size:100%;min-inline-size:1080px;border-collapse:separate;border-spacing:0;table-layout:fixed;color:var(--k-white);font-size:clamp(12px,.86vw,14px)}.benchmark-table caption{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.benchmark-table th,.benchmark-table td{padding:clamp(8px,.72vw,11px) clamp(7px,.65vw,10px);border-block-end:1px solid var(--k-line);border-inline-start:1px solid var(--k-line);vertical-align:middle}.benchmark-table tr:last-child>*{border-block-end:0}.benchmark-table tr>*:first-child{border-inline-start:0}.benchmark-table thead th{background:var(--k-ink-3);color:var(--k-muted);font:700 clamp(12px,.82vw,14px)/1.5 var(--k-display);text-align:center}.benchmark-table thead th:first-child{inline-size:220px;text-align:start;color:var(--k-white)}
.benchmark-table tbody th{background:color-mix(in srgb,var(--k-ink-3) 62%,transparent);font:700 clamp(13px,.92vw,15px)/1.4 var(--k-display);text-align:start}.benchmark-table tbody td{text-align:center;background:color-mix(in srgb,var(--k-ink-2) 92%,transparent)}.benchmark-table tbody tr{transition:background 180ms var(--k-ease)}.benchmark-table tbody tr:hover>*{background:color-mix(in srgb,var(--k-signal) 7%,var(--k-ink-2))}
.benchmark-table tbody .benchmark-table__alef>*{background:color-mix(in srgb,var(--k-signal) 12%,var(--k-ink-2));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--k-signal) 25%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--k-signal) 25%,transparent)}.benchmark-table tbody .benchmark-table__alef th{border-inline-end:3px solid var(--k-signal)}
.benchmark-table th a{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:3px;color:var(--k-white);text-decoration:none}.benchmark-table th a:hover{color:var(--k-signal)}.benchmark-table th a:focus-visible{outline:2px solid var(--k-signal);outline-offset:3px}.benchmark-table th a small{color:var(--k-muted);font:400 12px/1.25 ui-monospace,monospace;direction:ltr}
.benchmark-mark{display:inline-flex;align-items:center;justify-content:center;min-inline-size:76px;min-block-size:29px;padding:5px 9px;border:1px solid var(--k-line);border-radius:999px;font:700 clamp(12px,.78vw,14px)/1 var(--k-display);white-space:nowrap}.benchmark-mark::before{content:"";inline-size:7px;block-size:7px;margin-inline-end:6px;border-radius:50%;background:currentColor;box-shadow:0 0 14px currentColor}.benchmark-mark--demo,.benchmark-mark--yes{border-color:color-mix(in srgb,var(--k-signal) 42%,transparent);background:color-mix(in srgb,var(--k-signal) 10%,transparent);color:var(--k-signal)}.benchmark-mark--demo{background:var(--k-signal);color:var(--k-ink)}.benchmark-mark--partial{border-color:color-mix(in srgb,var(--k-copper) 45%,transparent);background:color-mix(in srgb,var(--k-copper) 10%,transparent);color:var(--k-copper)}.benchmark-mark--unknown{color:var(--k-muted)}
.benchmark-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px;margin-block-start:10px;text-align:start}.benchmark-legend{grid-column:1/-1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px 18px;color:var(--k-muted);font-size:12px}.benchmark-legend span{display:inline-flex;align-items:center;gap:6px}.benchmark-legend i{inline-size:8px;block-size:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}.benchmark-legend .is-demo,.benchmark-legend .is-yes{color:var(--k-signal)}.benchmark-legend .is-partial{color:var(--k-copper)}.benchmark-legend .is-unknown{color:var(--k-muted)}.benchmark-footer p{margin:0;color:var(--k-muted);font-size:clamp(12px,.9vw,14px);line-height:1.6}.benchmark-footer--sources{display:block}.benchmark-sources{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 12px;color:var(--k-muted);font-size:12px}.benchmark-sources a{padding-block:3px;border-block-end:1px solid color-mix(in srgb,var(--k-signal) 46%,transparent);color:var(--k-signal);text-decoration:none;direction:ltr}.benchmark-sources a:hover{border-color:currentColor}.benchmark-sources a:focus-visible{outline:2px solid var(--k-signal);outline-offset:3px}
.local-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(9px,1.4vw,16px);margin-block-start:clamp(20px,2.8vw,32px);perspective:1200px}.local-card{position:relative;min-block-size:180px;padding:clamp(15px,1.7vw,22px);overflow:hidden;background:rgb(18 24 26/88%)}.local-glyph{display:inline-flex;align-items:center;justify-content:center;min-inline-size:38px;block-size:38px;padding-inline:8px;border:1px solid rgb(25 197 182/30%);border-radius:11px;background:rgb(25 197 182/8%);color:var(--k-signal);font:700 14px var(--k-display)}.local-card strong{display:block;margin-block:12px 7px;font:700 clamp(13px,1.3vw,17px) var(--k-display)}.local-card p{margin:0;color:var(--k-muted);font-size:clamp(9px,.9vw,11px);line-height:1.7}
.timeline li p{margin:9px 0 0;color:var(--k-muted);font-size:clamp(9px,.9vw,11px);line-height:1.7}.finale-cta{position:relative;z-index:2}.finale-cta>span{max-inline-size:720px;text-align:center}.finale-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-block-start:12px}.finale-link--primary{border-color:var(--k-signal);background:var(--k-signal);color:var(--k-ink)}.finale-link--primary i{color:var(--k-ink)}
@media(prefers-reduced-motion:reduce){
.atlas-ring,.pipeline__traveler,.contrast-card,.decision-gap,.spine-ring__thread circle,.spine-ring__orbit,.ledger-row,.trust-contract,.agent-orbit__rail,.agent-orbit__token,.boundary-side,.evidence-wall,.spec-field,.circuit-line i,.resilience-rail,.engine-core,.role-card,.kpi-spark polyline,.action-step,.action-arrow,.cell-shield,.lifecycle-card,.versus-row,.local-card,.benchmark-ledger{animation:none!important}
.pipeline__traveler{display:none!important}.kpi-spark polyline{stroke-dashoffset:0!important}
}
@media(max-width:980px){
.stage .frame{align-items:flex-start;overflow-y:auto;padding:76px 18px 112px;overscroll-behavior:contain}.stage .frame__inner{margin-block:auto}.frame--dense .frame-title{font-size:clamp(25px,7vw,42px)}.frame-actions{flex-direction:column}
.decision-contrast,.boundary-scene,.pack-layout,.trust-layout{grid-template-columns:1fr}.decision-gap{min-block-size:130px}.evidence-wall{min-block-size:66px;flex-direction:row}.evidence-wall:before{inset-inline:0;inset-block-start:50%;inline-size:auto;block-size:3px}.evidence-wall i{inline-size:42px;block-size:12px}.agent-orbit{inline-size:min(78vw,390px)}
.resilience-board{grid-template-columns:1fr}.engine-core{grid-column:auto}.roles-grid,.lifecycle-grid,.local-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.role-matrix-wrap{inline-size:100%;max-inline-size:100%;min-inline-size:0;align-items:flex-start;justify-content:flex-start;flex-direction:column;overflow-x:auto}.role-matrix{min-inline-size:0;inline-size:100%;table-layout:fixed;font-size:7px}.role-matrix th,.role-matrix td{padding-inline:3px}.action-loop{flex-wrap:wrap}.action-step{flex:1 1 42%;min-inline-size:0}.action-arrow,.versus-row>i{display:none}.versus-row{grid-template-columns:1fr}.local-card--wide{grid-column:1/-1}.frame--benchmark::before{inset:62px 9px 96px}.benchmark-ledger{grid-template-columns:1fr}.benchmark-ledger__rail{min-block-size:44px;flex-direction:row;padding:8px 12px;border-inline-end:0;border-block-end:1px solid var(--k-line);writing-mode:initial;transform:none}.benchmark-scroll{max-inline-size:100%}.benchmark-footer{grid-template-columns:1fr}.benchmark-footer .demo-launch{justify-self:start}.benchmark-sources{justify-content:flex-start}
}
@media(max-width:640px){
.kiosk-brand{max-inline-size:calc(100vw - 32px)}.kiosk-brand .kiosk-attribution{max-inline-size:205px;font-size:9px}.pipeline__nodes{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.pipeline__nodes li{padding:9px 2px;font-size:7px}.cover__url{flex-direction:column}.spine-ring{--radius:clamp(88px,27vw,112px);inline-size:100%}.agent-orbit{--agent-radius:-154px}.ledger-row{grid-template-columns:1fr 1fr}.ledger-row>i{display:none}.ledger-row span:nth-child(4){grid-column:1/-1}.trust-contracts,.specimen-fields,.roles-grid,.lifecycle-grid,.local-grid{grid-template-columns:1fr}.spec-field:last-child,.local-card--wide{grid-column:auto}.local-card{min-block-size:130px}.kiosk-progress{gap:2px}.kiosk-controls__row{gap:3px;padding:5px 7px}.kiosk-controls__spacer{display:none}
}
@media(max-width:340px){.agent-orbit{--agent-radius:-138px}}
@media(max-height:760px) and (min-width:981px){.frame--dense{padding-block:52px 86px}.frame--dense .frame-title{font-size:clamp(25px,3vw,42px)}.local-card{min-block-size:145px}.boundary-side{min-block-size:210px}.agent-orbit{inline-size:min(30vw,390px)}}

/* Exhibition readability floor: supporting text must remain legible from a booth distance. */
:where(
  .kiosk-brand small,.kiosk-brand .kiosk-attribution,.cover__truth,.cover__truth span,
  .pipeline__caption,.pipeline__nodes li,.tech-label,.decision-gap span,.decision-gap strong,
  .spine-ring__core small,.spine-ring__nodes li span,.spine-readout,.ledger-row small,
  .ledger-row strong,.trust-contract b,.trust-contract small,.permission-strip,
  .agent-orbit__core small,.boundary-side li,.evidence-wall,.insight-card__trace,
  .evidence-specimen p,.evidence-specimen code,.specimen-seal,.spec-field dt,.spec-field dd,
  .resilience-rail p,.circuit-line--broken b,.engine-core span,.journey-path__step small,
  .role-card > span,.role-card p,.kpi-tile small,.action-step span,.action-step small,
  .audit-loop,.audit-ticker,.cell-copy-points,.lifecycle-card > span,.lifecycle-card p,
  .versus-name,.versus-row p,.versus-row > strong,.local-card p,.timeline li p,
  .benchmark-ledger__rail small,.benchmark-ledger__rail strong,.benchmark-ledger__rail span,
  .benchmark-table,.benchmark-table thead th,.benchmark-table tbody th,.benchmark-table th a small,
  .benchmark-mark,.benchmark-legend,.benchmark-footer p,.benchmark-sources
) {
  font-size: clamp(12px, .86vw, 14px) !important;
}
.product-shot__bar { font-size: clamp(13px, .82vw, 15px); }
.agent-orbit__token { inline-size: 94px; margin-inline-start: -47px; font-size: 11px; }
.role-matrix { min-inline-size: 720px; font-size: 11px !important; }
@media (max-width: 640px) {
  .kiosk-brand .kiosk-attribution { max-inline-size: min(52vw, 240px); font-size: 12px !important; }
  .pipeline__nodes { overflow-x: auto; grid-template-columns: repeat(5, minmax(94px, 1fr)); }
  .pipeline__nodes li { font-size: 12px !important; }
}