/* =====================================================================
   Okto Plane Handoff Demo · page-specific layer
   Sits on top of the shared Okto Pulse/Nexus design system (styles.css):
   same tokens, same ambient depth-canvas, same button/nav language.
   This file only adds what this one-page case study needs: the spatial
   chrome (breadcrumb, right-rail stage nav, depth counter) and the
   section layouts (problem cards, role split, stage timeline, evidence
   gallery, architecture block, next-steps checklist).
   ===================================================================== */

:root {
  --nexus-violet: #7c3aed;
  --nexus-violet-soft: rgba(124, 58, 237, 0.16);
  /* Matches --okto-gradient-brand in src/styles/global.css exactly: the real
     OktoLabs brand gradient (cyan -> violet, logo-matched), not an
     approximation. */
  --gradient-demo: linear-gradient(95deg, #22d3ee 0%, #a855f7 100%);
  --content-max: 960px;
}

/* =====================================================================
   Global nav — ported from src/components/shared/Header.astro +
   src/styles/global.css so this page uses the exact same header as the
   rest of oktolabs.ai, not a page-local approximation.
   ===================================================================== */
.okto-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: linear-gradient(to bottom, rgba(6, 6, 8, 0.82), rgba(6, 6, 8, 0.55));
  border-bottom: 1px solid var(--hair);
}

.okto-nav__inner {
  width: 100%;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.okto-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
}

.okto-nav__mark { width: 32px; height: 32px; display: block; }

.okto-nav__wordmark {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

.okto-nav__links {
  display: flex;
  gap: 1.9rem;
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-dim);
}

.okto-nav__links a { position: relative; transition: color 180ms var(--ease); }
.okto-nav__links a:hover { color: var(--ink); }
.okto-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--gradient-demo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}
.okto-nav__links a:hover::after { transform: scaleX(1); }

.okto-nav__cta { display: flex; align-items: center; gap: 1rem; }

.okto-nav__ext {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-dim);
  transition: color 180ms var(--ease);
}
.okto-nav__ext:hover { color: var(--ink); }

@media (max-width: 900px) { .okto-nav__links { display: none; } }
@media (max-width: 560px) {
  .okto-nav__inner { gap: 1rem; }
  .okto-nav__ext { display: none; }
  .okto-nav .okto-btn { padding-inline: 12px; }
}

.okto-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  transition: transform 220ms var(--ease), background 220ms var(--ease),
    border-color 220ms var(--ease), color 220ms var(--ease);
  white-space: nowrap;
}

.okto-btn--quiet {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair-strong);
}
.okto-btn--quiet:hover { background: var(--surface-2); border-color: rgba(34, 211, 238, 0.35); }
.okto-btn__mono { font-family: var(--font-mono); color: var(--ink-mid); }

.okto-scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.okto-scroll-progress__bar {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--okto-scroll-progress, 0));
  transform-origin: left center;
  background: var(--gradient-demo);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.32);
}

.okto-scroll-progress__cursor {
  position: absolute;
  left: var(--okto-scroll-progress-pct, 0%);
  top: 50%;
  width: 9px; height: 9px;
  border-radius: 999px;
  background: #f4f5f9;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12), 0 0 20px rgba(168, 85, 247, 0.5);
  transform: translate(-50%, -50%);
}

/* The shared design system's .section is deliberately edge-to-edge (full
   width, gutter padding only, no max-width) — right for the homepage's
   canvas-filling layout, wrong for a text-and-card case study, which reads
   better centered with a real measure. Cap and center every inner wrapper. */
.section__inner,
.chrome-bar,
.foot__inner,
.foot__base {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.section__head {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
}

.section__eyebrow {
  justify-content: center;
}

.section__title {
  text-wrap: balance;
}

/* This page is a dense, text-first case study (unlike the homepage's
   two-column text+visual layout), so the depth corridor's gate/panel labels
   can land directly behind body copy. Dial it back to a faint backdrop
   texture rather than a competing, legible foreground layer. */
.pulse-depth-canvas[data-depth-renderer="ready"] {
  opacity: 0.34;
}

/* The shared aurora/vignette glow defaults to Pulse's cyan-forward palette.
   OktoLabs' own brand (oktolabs.ai) is violet-forward — this page speaks for
   both products, so lean the ambient glow toward that shared identity. */
.ambient__vignette {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(168, 85, 247, 0.11) 0%,
    rgba(34, 211, 238, 0.07) 30%,
    transparent 60%
  );
}

.ambient__aurora {
  background:
    radial-gradient(closest-side, rgba(124, 58, 237, 0.22), transparent 70%) 0 0/70% 100% no-repeat,
    radial-gradient(closest-side, rgba(34, 211, 238, 0.14), transparent 70%) 100% 0/55% 90% no-repeat;
}

/* ---------- spatial chrome ---------- */
.chrome-bar {
  position: sticky;
  top: 65px;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 10px var(--gutter);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mid);
  text-transform: uppercase;
  pointer-events: none;
}

.chrome-bar__crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chrome-bar__crumb .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pulse-cyan);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.8);
  animation: dot-pulse 2.4s var(--ease) infinite;
}

.chrome-bar__chapter {
  color: var(--ink-dim);
}

.chrome-bar__chapter b {
  color: var(--ink);
  font-weight: 600;
}

.chrome-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gutter);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  pointer-events: none;
  mix-blend-mode: normal;
}

.chrome-foot__depth {
  font-variant-numeric: tabular-nums;
  color: var(--ink-mid);
}

/* ---------- right-rail stage nav ---------- */
.stage-nav {
  position: fixed;
  right: clamp(14px, 2.4vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.stage-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  text-decoration: none;
  cursor: pointer;
}

.stage-nav__item::before {
  content: "";
  position: absolute;
  right: 8px;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--hair-strong);
  z-index: -1;
}

.stage-nav__item:first-child::before {
  top: 50%;
}

.stage-nav__item:last-child::before {
  bottom: 50%;
}

.stage-nav__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), color 200ms var(--ease);
}

.stage-nav__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mid);
  transition: border-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.stage-nav:hover .stage-nav__label {
  opacity: 1;
  transform: translateX(0);
}

.stage-nav__item.is-active .stage-nav__label {
  opacity: 1;
  transform: translateX(0);
  color: var(--ink);
}

.stage-nav__item.is-active .stage-nav__num {
  border-color: var(--pulse-cyan);
  color: var(--pulse-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16);
}

@media (max-width: 900px) {
  .stage-nav,
  .chrome-foot,
  .chrome-bar {
    display: none;
  }
}

.in-footer .stage-nav,
.in-footer .chrome-foot,
.in-footer .chrome-bar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}

/* ---------- hero ---------- */
.demo-hero {
  padding-top: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4.5vw, 3.2rem);
}

.demo-hero__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.demo-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--pulse-cyan);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.demo-hero__eyebrow .dot { animation: dot-pulse 2.4s var(--ease) infinite; }

.demo-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.4rem;
  text-wrap: balance;
}

.demo-hero__title em {
  font-style: normal;
  background: var(--gradient-demo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.demo-hero__lede {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 46ch;
  margin: 0 auto 2rem;
}

.demo-hero__lede b {
  color: var(--ink);
  font-weight: 600;
}

.demo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

.demo-hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
}

.demo-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-mid);
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--surface);
}

/* hero panel: the two products, side by side, threaded together */
.demo-hero__panel {
  width: 100%;
  max-width: 640px;
  margin-top: 3rem;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem 1.7rem;
  background: linear-gradient(180deg, var(--surface), transparent 60%);
}

.demo-hero__panel-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 1.1rem;
}

.demo-hero__panel-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.demo-hero__panel-row .product-chip {
  flex: 1 1 0;
  text-align: left;
}

.demo-hero__thread {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
}

.demo-hero__thread span {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--pulse-cyan), #a78bfa);
  opacity: 0.5;
}

.demo-hero__link {
  display: block;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

@media (max-width: 620px) {
  .demo-hero__panel-row { flex-direction: column; }
  .demo-hero__thread { width: 1px; height: 20px; }
  .demo-hero__thread span { width: 1px; height: 100%; }
}

.product-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  transform: translateY(0);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

.product-chip--pulse:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.3);
}

.product-chip--nexus:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 139, 250, 0.32);
}

.product-chip img {
  width: 26px;
  height: 26px;
}

.product-chip__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.product-chip__role {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mid);
}

.product-chip--pulse .product-chip__name { color: var(--pulse-cyan); }
.product-chip--nexus .product-chip__name { color: #a78bfa; }

/* ---------- problem grid ---------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2.4rem;
}

@media (max-width: 780px) {
  .problem-grid { grid-template-columns: 1fr; }
}

.problem-card {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.4rem 1.5rem;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

.problem-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 61, 76, 0.28);
  background: linear-gradient(180deg, rgba(255, 61, 76, 0.06), transparent 48%), var(--surface);
}

.problem-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 80px at 0% 0%, var(--chaos-glow), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}

.problem-card__mode {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.problem-card__where {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--chaos-soft);
  line-height: 1.55;
  margin: 0 0 0.65rem;
}

.problem-card__why {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
}

/* ---------- roles split ---------- */
.roles-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.4rem;
  position: relative;
}

@media (max-width: 780px) {
  .roles-split { grid-template-columns: 1fr; }
}

.role-card {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.9rem 2.1rem;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  transform: translateY(0);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

.role-card--pulse:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.3);
}

.role-card--nexus:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, 0.32);
}

.role-card__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 1rem;
}

.role-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.role-card__head img { width: 24px; height: 24px; }

.role-card__head span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
}

.role-card--pulse .role-card__head span b { color: var(--pulse-cyan); font-weight: 600; }
.role-card--nexus .role-card__head span b { color: #a78bfa; font-weight: 600; }

.role-card__claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 0.8rem;
}

.role-card__body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0 0 1.2rem;
}

.role-card__thread {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mid);
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
}

/* ---------- stage grid (9 stages, 3 columns) ---------- */
.stage-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

@media (max-width: 900px) {
  .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .stage-grid { grid-template-columns: 1fr; }
}

.stage-card {
  position: relative;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.2rem 1.3rem 1.3rem;
  transform: translateY(0);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

.stage-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.28);
}

.stage-card:hover::before {
  border-color: var(--pulse-cyan);
  color: var(--pulse-cyan);
}

.stage-card::before {
  content: attr(data-n);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mid);
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}

.stage-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.stage-card__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
}

/* ---------- evidence showcase (alternating media + copy rows) ---------- */
.showcase {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.showcase-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;
}

.showcase-row--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.showcase-row--reverse .showcase-media { order: 2; }
.showcase-row--reverse .showcase-copy { order: 1; }

@media (max-width: 780px) {
  .showcase-row,
  .showcase-row--reverse {
    grid-template-columns: 1fr;
  }
  .showcase-row--reverse .showcase-media,
  .showcase-row--reverse .showcase-copy {
    order: initial;
  }
}

.showcase-media {
  margin: 0;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  transform: translateY(0);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

.showcase-media:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.28);
}

.showcase-media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 320ms var(--ease);
}

.showcase-media:hover img {
  transform: scale(1.015);
}

.showcase-copy__kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 0.7rem;
}

.showcase-copy__kicker img { opacity: 0.85; }

.showcase-copy h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.showcase-copy p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
}

/* ---------- architecture ---------- */
.arch-wrap {
  margin-top: 2.4rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.arch-wrap img {
  width: 100%;
  height: auto;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1rem;
}

.meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.meta-table td {
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}

.meta-table td:first-child {
  color: var(--ink-mid);
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
  padding-right: 1.4rem;
}

.meta-table td:last-child {
  color: var(--ink-dim);
  line-height: 1.55;
}

/* ---------- proof: stats + verified list ---------- */
.stats-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.4rem 1.1rem;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transform: translateY(0);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

.stat-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.28);
}

.stat-tile__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-tile--danger .stat-tile__value { color: var(--chaos-soft); }

.stat-tile__slash {
  color: var(--ink-faint);
  font-weight: 400;
  margin: 0 0.15em;
}

.stat-tile__label {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 22ch;
}

.verified-list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1.5rem;
}

@media (max-width: 720px) {
  .verified-list { grid-template-columns: 1fr; }
}

.verified-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.verified-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pulse-cyan);
  font-weight: 600;
}

/* ---------- code references (real file paths) ---------- */
.code-refs {
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--hair);
}

.code-refs__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.code-ref {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}

.code-ref:last-child { border-bottom: none; }

@media (max-width: 720px) {
  .code-ref { grid-template-columns: 1fr; gap: 0.35rem; }
}

.code-ref__path {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--pulse-cyan);
  word-break: break-all;
}

.code-ref p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.code-ref code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

/* ---------- decisions ---------- */
.decision-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

@media (max-width: 780px) {
  .decision-grid { grid-template-columns: 1fr; }
}

.decision-card {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.4rem 1.5rem 1.5rem;
  transform: translateY(0);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

.decision-card:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, 0.3);
}

.decision-card__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  padding: 0 6px;
  margin-bottom: 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mid);
}

.decision-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

.decision-card p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0 0 0.7rem;
}

.decision-card p.decision-card__consequence {
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 0;
}

/* ---------- faq ---------- */
.faq-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.faq-item {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.2rem 1.1rem;
  transition: border-color 180ms var(--ease);
}

.faq-item:hover {
  border-color: var(--hair-strong);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-faint);
  transition: transform 200ms var(--ease);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  margin: 0 0 1rem;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 68ch;
}

/* ---------- roles table ---------- */
.roles-table-wrap {
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--hair);
}

.roles-table__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.roles-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.roles-table__row {
  display: grid;
  grid-template-columns: 130px 90px 130px minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--hair);
  font-size: 12.5px;
  line-height: 1.5;
  transition: background 160ms var(--ease);
}

.roles-table__row:last-child { border-bottom: none; }

.roles-table__row:hover:not(.roles-table__row--head) {
  background: var(--surface-2);
}

.roles-table__row--head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
  background: var(--surface);
}

.roles-table__row span:first-child {
  color: var(--ink);
  font-weight: 500;
}

.roles-table__row span { color: var(--ink-dim); }
.roles-table__row--head span { color: var(--ink-mid); }

@media (max-width: 720px) {
  .roles-table__row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .roles-table__row--head { display: none; }
}

/* ---------- quickstart ---------- */
.quickstart-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

@media (max-width: 900px) {
  .quickstart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .quickstart-grid { grid-template-columns: 1fr; }
}

.quickstart-step {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.1rem 1.1rem 1.2rem;
  transform: translateY(0);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

.quickstart-step:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.28);
}

.quickstart-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mid);
}

.quickstart-step__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  margin: 0 0 0.7rem;
}

.quickstart-code {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--hair);
  overflow-x: auto;
}

.quickstart-code code {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-dim);
  white-space: pre;
}

.quickstart-urls {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.quickstart-url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-mid);
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--surface);
}

.quickstart-url code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--pulse-cyan);
}

/* ---------- final cta ---------- */
.demo-final {
  text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6rem);
}

.demo-final h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--ink);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.demo-final p {
  color: var(--ink-dim);
  max-width: 52ch;
  margin: 0 auto 2rem;
  font-size: 15px;
  line-height: 1.6;
}

.demo-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

/* section chrome shared */
.demo-section {
  padding: clamp(2.2rem, 4.5vw, 3.4rem) 0;
  border-top: 1px solid var(--hair);
  position: relative;
}

.demo-section__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 0.8rem;
}

.demo-section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.9rem;
  max-width: 22ch;
}

.demo-section__title em {
  font-style: normal;
  background: var(--gradient-demo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.demo-section__lede {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 62ch;
  margin: 0;
}

/* reveal-on-scroll (progressive enhancement, mirrors shared script pattern) */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}


/* ---------- ambient motion ---------- */
@keyframes dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(168, 85, 247, 0.8); }
  50% { opacity: 0.55; box-shadow: 0 0 3px rgba(168, 85, 247, 0.4); }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.demo-hero__title em,
.section__title em {
  background-size: 200% auto;
  animation: gradient-shift 7s ease-in-out infinite;
}