/* ============================================================
   RAVIM — Kinetic split canvas
   A fixed visual pane on the left; content streams past it on
   the right. The pane recomposes as sections come into view,
   so the page reads as one continuous scene rather than a
   stack of cards.
   ============================================================ */

.split { display: block; }

/* ─── Fixed visual pane ───────────────────────────────── */
.canvas {
  position: fixed;
  inset: 0 auto 0 0;
  width: 28vw;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--sp-8);
  overflow: hidden;
  z-index: 20;
}

/* The pane sits on its own pastel field, distinct from the stream. */
.canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 20% 12%, var(--wash-lilac), transparent 62%),
    radial-gradient(55% 45% at 88% 22%, var(--wash-blush), transparent 62%),
    radial-gradient(60% 55% at 72% 88%, var(--wash-sky),   transparent 60%),
    radial-gradient(50% 45% at 8% 82%,  var(--wash-mint),  transparent 58%),
    #FBFAFE;
}

.canvas-brand { display: flex; align-items: center; flex-shrink: 0; }
.canvas-brand svg { height: 30px; width: auto; }

/* ─── Vertical navigation ─────────────────────────────── */
.canvas-nav { margin-top: var(--sp-12); display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.canvas-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  width: fit-content;
  padding: var(--sp-2) 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-600);
  letter-spacing: -0.005em;
}
.canvas-nav a::before {
  content: '';
  width: 0; height: 1.5px;
  border-radius: 2px;
  background: var(--violet-500);
  transition: width var(--dur) var(--ease-out);
}
.canvas-nav a:hover { color: var(--ink-900); }
.canvas-nav a:hover::before { width: 18px; }
.canvas-nav a.active { color: var(--violet-600); font-weight: 600; }
.canvas-nav a.active::before { width: 26px; }

/* ─── Scene ───────────────────────────────────────────── */
.canvas-scene {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;          /* allow the flex item to shrink below content size */
  padding-block: var(--sp-6);
  overflow: hidden;       /* the drop-shadow must never bleed onto the caption */
}
.scene {
  /* Fill the available box and let the viewBox scale to fit inside it —
     preserveAspectRatio letterboxes the composition instead of clipping it,
     so the spheres shrink on short viewports rather than colliding with the
     caption. */
  width: 100%;
  height: 100%;
  max-width: 340px;
  max-height: 340px;
  /* A grid item defaults to min-height:auto, which pins the SVG to its
     intrinsic 460px and defeats height:100% on short viewports. */
  min-width: 0;
  min-height: 0;
  overflow: visible;
  /* A slow drift tied to scroll keeps the pane alive between scenes. */
  transform: translateY(calc(var(--drift, 0) * -14px));
  transition: transform 600ms var(--ease-out);
}

.orb-g {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1100ms var(--ease-out), opacity 700ms var(--ease);
  will-change: transform, opacity;
}
/* The engine sets transforms every frame; a CSS transition on top would
   smear them. Static keyframes remain the no-JavaScript fallback. */
[data-driven="true"] .orb-g { transition: none; }

/* Scene compositions — each is a different arrangement of the same set. */
[data-scene="intro"]    .o1 { transform: translate(0px,   0px)   scale(1); }
[data-scene="intro"]    .o2 { transform: translate(96px,  46px)  scale(1); }
[data-scene="intro"]    .o3 { transform: translate(-92px, 58px)  scale(1); }
[data-scene="intro"]    .o4 { transform: translate(74px,  -84px) scale(1); }
[data-scene="intro"]    .o5 { transform: translate(-70px, -66px) scale(1); }
[data-scene="intro"]    .o6 { transform: translate(128px, -30px) scale(.9); }
[data-scene="intro"]    .o7 { transform: translate(-124px,-8px)  scale(.85); }

/* Method: the set falls into an ordered vertical chain. */
[data-scene="method"]   .o1 { transform: translate(0px, -96px)  scale(.62); }
[data-scene="method"]   .o2 { transform: translate(0px, -48px)  scale(.72); }
[data-scene="method"]   .o3 { transform: translate(0px,   0px)  scale(.82); }
[data-scene="method"]   .o4 { transform: translate(0px,  48px)  scale(.72); }
[data-scene="method"]   .o5 { transform: translate(0px,  96px)  scale(.62); }
[data-scene="method"]   .o6 { transform: translate(150px, 130px) scale(.34); opacity: .35; }
[data-scene="method"]   .o7 { transform: translate(-150px,-130px) scale(.34); opacity: .35; }

/* Capability: spreads into a wide constellation. */
[data-scene="capability"] .o1 { transform: translate(-118px,-92px) scale(.68); }
[data-scene="capability"] .o2 { transform: translate(6px,  -108px) scale(.56); }
[data-scene="capability"] .o3 { transform: translate(126px, -74px) scale(.72); }
[data-scene="capability"] .o4 { transform: translate(-134px, 62px) scale(.58); }
[data-scene="capability"] .o5 { transform: translate(10px,   96px) scale(.7); }
[data-scene="capability"] .o6 { transform: translate(132px,  70px) scale(.6); }
[data-scene="capability"] .o7 { transform: translate(0px,     0px) scale(.9); }

/* Writing: settles into stacked rows. */
[data-scene="writing"]  .o1 { transform: translate(-104px,-70px) scale(.5); }
[data-scene="writing"]  .o2 { transform: translate(-34px, -70px) scale(.5); }
[data-scene="writing"]  .o3 { transform: translate(36px,  -70px) scale(.5); }
[data-scene="writing"]  .o4 { transform: translate(-104px, 12px) scale(.5); }
[data-scene="writing"]  .o5 { transform: translate(-34px,  12px) scale(.5); }
[data-scene="writing"]  .o6 { transform: translate(36px,   12px) scale(.5); }
[data-scene="writing"]  .o7 { transform: translate(-34px,  94px) scale(.62); }

/* Contact: everything converges. */
[data-scene="contact"]  .o1,
[data-scene="contact"]  .o2,
[data-scene="contact"]  .o3,
[data-scene="contact"]  .o4,
[data-scene="contact"]  .o5 { transform: translate(0,0) scale(.42); opacity: .55; }
[data-scene="contact"]  .o6 { transform: translate(0,0) scale(.3); opacity: .4; }
[data-scene="contact"]  .o7 { transform: translate(0,0) scale(1.18); }

/* ─── Scene caption ───────────────────────────────────── */
.canvas-caption {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  padding-top: var(--sp-4);
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  min-height: 2.5rem;
  font-size: var(--text-sm);
  color: var(--ink-500);
}
.canvas-caption .idx {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--violet-500);
  font-variant-numeric: tabular-nums;
}
.canvas-caption .label { transition: opacity 260ms var(--ease); }

/* ─── Content stream ──────────────────────────────────── */
.stream {
  margin-left: 28vw;
  min-height: 100vh;
  position: relative;
  z-index: 10;
}
@supports (width: min(28vw, 440px)) {
  .stream { margin-left: min(28vw, 440px); }
}

.stream-inner {
  max-width: 1080px;
  margin-inline: auto;
  padding: var(--sp-20) var(--sp-12) var(--sp-16);
}

.stream section { scroll-margin-top: var(--sp-12); }
.stream section + section { margin-top: clamp(4.5rem, 3rem + 6vw, 8rem); }

/* Section marker — numbered, editorial. */
.marker {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.marker::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.marker .n { color: var(--violet-500); font-weight: 600; }

/* ─── Mobile: pane becomes a banner, content flows under ── */
@media (max-width: 1024px) {
  .canvas {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    padding: var(--sp-5) var(--sp-6) var(--sp-8);
  }
  .canvas-nav { display: none; }
  .canvas-scene { min-height: 280px; margin-top: var(--sp-6); }
  .scene { width: min(100%, 340px); }
  .canvas-caption { justify-content: center; margin-top: var(--sp-4); }
  .stream { margin-left: 0; }
  .stream-inner { max-width: none; padding: var(--sp-10) var(--sp-6) var(--sp-12); }
}

@media (prefers-reduced-motion: reduce) {
  .orb-g, .scene { transition: none; }
}

/* ─── Stream typography & sections ────────────────────── */
.stream-inner h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  letter-spacing: -0.038em;
  line-height: 1.03;
}
.stream-inner .lede {
  margin-top: var(--sp-6);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.6;
  color: var(--ink-600);
  max-width: 46ch;
}
.stream-inner h2 { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem); letter-spacing: -0.028em; }
.stream-inner h3 { font-size: var(--text-xl); }

/* Opening block gets extra air. */
.stream-open { padding-bottom: var(--sp-6); }
.stream-open .row { margin-top: var(--sp-10); }

/* ─── Numbered list blocks (method, capability) ───────── */
.entries { display: flex; flex-direction: column; }
.entry {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--border);
}
.entry:last-child { border-bottom: 1px solid var(--border); }
.entry-n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--violet-500);
  padding-top: 5px;
  font-variant-numeric: tabular-nums;
}
.entry h3 { font-size: var(--text-lg); letter-spacing: -0.018em; }
.entry p { margin-top: var(--sp-2); font-size: var(--text-base); line-height: 1.65; }
.entry a.entry-link { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--text-sm); font-weight: 600; }
.entry a.entry-link svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease-out); }
.entry a.entry-link:hover svg { transform: translateX(4px); }
.entry:hover .entry-n { color: var(--teal-600); }

/* ─── Stream footer ───────────────────────────────────── */
.stream-footer {
  padding: var(--sp-16) var(--sp-12) var(--sp-10);
  max-width: 1080px;
  margin-inline: auto;
  border-top: 1px solid var(--border);
}
.stream-footer-top h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); }
.stream-footer-top p { margin-top: var(--sp-3); color: var(--ink-500); max-width: 44ch; }
.stream-footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  margin-top: var(--sp-16);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--border);
}
.stream-footer-links h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-400); margin-bottom: var(--sp-4); }
.stream-footer-links li + li { margin-top: var(--sp-2); }
.stream-footer-links a { font-size: var(--text-sm); color: var(--ink-600); }
.stream-footer-links a:hover { color: var(--violet-500); }
.stream-copyright { margin-top: var(--sp-10); font-size: var(--text-sm); color: var(--ink-400); }
@media (max-width: 640px) { .stream-footer-links { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1024px) { .stream-footer { padding-inline: var(--sp-6); max-width: none; } }

/* ─── Mobile nav ──────────────────────────────────────── */
.canvas-menu { display: none; }
.mobile-nav { display: none; }
@media (max-width: 1024px) {
  .canvas-menu {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: var(--sp-4); right: var(--sp-4); z-index: 60;
    width: 42px; height: 42px; border-radius: var(--r-full);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: var(--shadow-float);
    color: var(--ink-800);
  }
  .mobile-nav {
    position: fixed; inset: 0; z-index: 55;
    display: none; flex-direction: column; justify-content: center; gap: var(--sp-2);
    padding: var(--sp-10);
    background: rgba(251, 250, 254, 0.96);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  .mobile-nav.open { display: flex; }
  .mobile-nav a { font-size: var(--text-2xl); font-weight: 700; color: var(--ink-900); letter-spacing: -0.03em; padding: var(--sp-2) 0; }
  .mobile-nav a:hover { color: var(--violet-500); }
}

/* Article prose sits in the stream, so it needs no second column. */
.stream .prose { max-width: none; }
.stream .prose p { font-size: var(--text-lg); }

/* ─── Technology pills ────────────────────────────────── */
.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.tech-list li {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-float);
}
/* The pill list opts out of the prose bullet treatment. */
.prose .tech-list li { display: inline-flex; grid-template-columns: none; }
.prose .tech-list li::before { content: none; }

@media (prefers-reduced-transparency: reduce) {
  .tech-list li { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}

/* On the narrowest phones a long CTA label cannot stay on one line without
   overshooting the viewport, so allow buttons to wrap and fill the width. */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; }
  .stream-open .row .btn,
  .row > .btn-lg { width: 100%; }
}

/* Short desktop viewports (laptops with browser chrome): tighten the pane's
   fixed furniture so the scene keeps a usable amount of height. */
@media (min-width: 1025px) and (max-height: 800px) {
  .canvas { padding-block: var(--sp-6); }
  .canvas-nav { margin-top: var(--sp-8); }
  .canvas-nav a { padding-block: var(--sp-1); }
  .canvas-scene { padding-block: var(--sp-4); }
}
@media (min-width: 1025px) and (max-height: 660px) {
  .canvas-nav { margin-top: var(--sp-5); }
  .canvas-caption { padding-top: var(--sp-2); }
}


/* Scene cues are pure waypoints for the canvas engine — no box, no effect
   on layout, invisible to assistive technology. */
.scene-cue {
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  visibility: hidden;
}

/* ─── Index rows ──────────────────────────────────────── */
/* Each row is a single target with its supporting detail inline, rather than
   a title followed by a separate "read more" link. */
.entries { display: flex; flex-direction: column; }

a.entry, div.entry {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: start;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-4);
  margin-inline: calc(var(--sp-4) * -1);
  border-top: 1px solid var(--border);
  border-radius: var(--r-md);
  color: inherit;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.entries > :last-child { border-bottom: 1px solid var(--border); }

a.entry:hover { background: rgba(255, 255, 255, 0.66); transform: translateX(3px); }
a.entry:hover .entry-title { color: var(--violet-600); }
a.entry:hover .entry-n { color: var(--teal-600); }
a.entry:hover .entry-go { color: var(--violet-500); transform: translateX(3px); }

.entry-n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--violet-500);
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}

.entry-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }

.entry-title {
  font-size: var(--text-xl);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  transition: color var(--dur-fast) var(--ease);
}
.entry-meta {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-400);
  white-space: nowrap;
}
.entry-desc { max-width: 90ch; font-size: var(--text-base); line-height: 1.6; color: var(--ink-500); }

.entry-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-top: 4px;
  border-radius: var(--r-full);
  color: var(--ink-300);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.entry-go svg { width: 17px; height: 17px; }

@media (max-width: 640px) {
  a.entry, div.entry { grid-template-columns: 2.25rem 1fr; gap: var(--sp-4); }
  .entry-go { display: none; }
  .entry-title { font-size: var(--text-lg); }
}

/* ─── Technology stack ────────────────────────────────── */
/* Grouped by the job each tool does, so the list can be read rather than
   just counted. */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.tech-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-float);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tech-group:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

.tech-group-head { display: flex; align-items: flex-start; gap: var(--sp-4); }
.tech-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(76, 44, 160, 0.28));
}
.tech-group-title {
  display: block;
  font-size: var(--text-base);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  line-height: 1.3;
}
.tech-group-blurb {
  display: block;
  margin-top: 3px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-500);
}

.tech-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tech-chips li {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.6875rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-700);
  background: rgba(246, 247, 251, 0.9);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tech-group:hover .tech-chips li { border-color: var(--violet-200); color: var(--ink-900); }

/* These lists opt out of the prose bullet treatment. */
.prose .tech-grid > li,
.prose .tech-chips > li { display: flex; grid-template-columns: none; }
.prose .tech-chips > li { display: inline-flex; }
.prose .tech-grid > li::before,
.prose .tech-chips > li::before { content: none; }

@media (prefers-reduced-transparency: reduce) {
  .tech-group { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}

/* `.prose ul` sets display:flex/column and a bullet treatment, and outranks
   the plain .tech-grid / .tech-chips class selectors. Restate them at a
   specificity that wins so the stack renders as a grid of cards. */
.prose .tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.prose .tech-grid > li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: stretch;
  font-size: var(--text-base);
}
.prose .tech-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.prose .tech-chips > li {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink-700);
}

/* ─── Breadcrumbs ─────────────────────────────────────── */
/* Kept visible rather than schema-only: search engines expect the markup to
   describe a trail the visitor can actually see. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
}
.crumbs a { color: var(--ink-400); }
.crumbs a:hover { color: var(--violet-500); }
.crumbs span[aria-hidden] { color: var(--ink-300); }
.crumbs [aria-current] { color: var(--ink-600); font-weight: 500; }

/* ─── Product page: badge row ─────────────────────────── */
.badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.badge-row li {
  display: inline-flex; align-items: center;
  padding: 0.375rem 0.8125rem;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: -0.005em;
  color: var(--ink-700);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-float);
}

/* ─── Request chain ───────────────────────────────────── */
.chain { display: flex; flex-direction: column; margin-top: var(--sp-8); }
.chain li {
  display: grid;
  grid-template-columns: 3rem minmax(9rem, auto) 1fr;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border);
  position: relative;
}
.chain li:last-child { border-bottom: 1px solid var(--border); }
.chain-n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--violet-500); font-variant-numeric: tabular-nums; }
.chain-t { font-size: var(--text-lg); font-weight: 650; color: var(--ink-900); letter-spacing: -0.018em; }
.chain-d { font-size: var(--text-sm); color: var(--ink-500); line-height: 1.55; }
@media (max-width: 640px) {
  .chain li { grid-template-columns: 2.25rem 1fr; }
  .chain-d { grid-column: 2; }
}

/* ─── Product screenshot ──────────────────────────────── */
.shot { margin: var(--sp-8) 0 0; }
.shot img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: var(--shadow-lift);
  background: var(--white);
}
.shot figcaption {
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--ink-400);
}
/* A desktop app screenshot must not be shrunk until it is unreadable. */
@media (max-width: 700px) {
  .shot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shot img { min-width: 640px; }
  .shot figcaption { min-width: 0; }
}

.prose code {
  padding: 0.125rem 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--ink-100);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink-800);
}

/* ─── Alpha: live request demo ────────────────────────── */
.demo {
  margin-top: var(--sp-8);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.demo-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4); border-bottom: 1px solid var(--border); background: rgba(246,247,251,0.6); }
.demo-tabs button {
  padding: 0.4375rem 0.8125rem;
  font-size: var(--text-xs); font-weight: 600;
  color: var(--ink-600);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.demo-tabs button:hover { color: var(--ink-900); border-color: var(--border-strong); }
.demo-tabs button.active { background: var(--violet-500); border-color: var(--violet-500); color: #fff; }

.demo-stage { padding: var(--sp-6); min-height: 300px; }
.demo-steps { display: flex; flex-direction: column; gap: var(--sp-4); }
.demo-steps li {
  display: grid;
  grid-template-columns: 14px 7.5rem 1fr;
  align-items: start;
  gap: var(--sp-3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.demo-steps li.on { opacity: 1; transform: none; }
.demo-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--violet-400); box-shadow: 0 0 0 4px var(--violet-50); }
.demo-steps li:last-child .demo-dot { background: var(--teal-500); box-shadow: 0 0 0 4px var(--teal-50); }
.demo-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-400); padding-top: 3px; }
.demo-steps code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-900); line-height: 1.5; }
.demo-args { display: block; color: var(--ink-500); font-size: var(--text-xs); margin-top: 2px; }

.demo-engines { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.demo-engine {
  padding: 0.1875rem 0.5625rem;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  color: var(--violet-600); background: var(--violet-50);
  border-radius: var(--r-full);
  animation: enginePulse 1.6s var(--ease) 1;
}
@keyframes enginePulse { 0% { box-shadow: 0 0 0 0 rgba(91,46,230,.35); } 70% { box-shadow: 0 0 0 8px rgba(91,46,230,0); } 100% { box-shadow: 0 0 0 0 rgba(91,46,230,0); } }

.demo-hits { display: flex; flex-direction: column; gap: var(--sp-2); }
.demo-hit {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.2fr) auto;
  gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-3);
  background: rgba(246,247,251,0.85);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.demo-hit-path { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-900); font-weight: 600; overflow-wrap: anywhere; }
.demo-hit-snip { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-500); overflow-wrap: anywhere; }
.demo-hit-src { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-600); }
.demo-note { margin-top: var(--sp-5); font-size: var(--text-sm); color: var(--ink-500); }
.demo-caveat { margin-top: var(--sp-4); font-size: var(--text-xs); color: var(--ink-400); line-height: 1.6; }

@media (max-width: 640px) {
  .demo-steps li { grid-template-columns: 14px 1fr; }
  .demo-label { grid-column: 2; }
  .demo-steps code, .demo-engines, .demo-hits { grid-column: 2; }
  .demo-hit { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* ─── Alpha: token guard ──────────────────────────────── */
.guard {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow-float);
}
.guard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.guard-file { display: block; font-family: var(--font-mono); font-size: var(--text-base); font-weight: 600; color: var(--ink-900); }
.guard-meta { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--ink-400); }
.guard-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.5rem 0.875rem;
  font-size: var(--text-xs); font-weight: 600;
  color: var(--ink-700); background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-full);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.guard-toggle:hover { border-color: var(--violet-300); color: var(--ink-900); }
.guard-state {
  min-width: 1.9rem; text-align: center;
  padding: 0.125rem 0.4375rem; border-radius: var(--r-full);
  font-family: var(--font-mono); font-size: 0.6875rem;
  background: var(--ink-100); color: var(--ink-500);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.guard-toggle[aria-pressed="true"] .guard-state { background: var(--mint-bg); color: var(--mint-fg); }

.guard-track { height: 40px; border-radius: var(--r-md); background: var(--ink-100); overflow: hidden; border: 1px solid var(--border); }
.guard-bar {
  display: block; height: 100%; width: 100%;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--violet-400), var(--violet-600));
  transition: width 900ms var(--ease-out), background 600ms var(--ease);
}
.guard-bar.guarded { background: linear-gradient(90deg, var(--teal-400), var(--teal-600)); }
.guard-readout { margin-top: var(--sp-4); font-size: var(--text-base); color: var(--ink-700); }
.guard-readout strong { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--ink-900); }
.guard-readout span { color: var(--ink-400); font-size: var(--text-sm); }
.guard-detail { margin-top: var(--sp-3); font-size: var(--text-sm); line-height: 1.65; color: var(--ink-500); }
.guard-detail code { font-family: var(--font-mono); font-size: 0.8125em; background: var(--ink-100); padding: 0.0625rem 0.3125rem; border-radius: var(--r-sm); }

/* ─── Alpha: platforms ────────────────────────────────── */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-8); }
.platform {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow-float);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.platform:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.platform.muted { background: rgba(246,247,251,0.7); box-shadow: var(--shadow-xs); }
.platform.muted:hover { transform: none; box-shadow: var(--shadow-xs); }
.platform-os { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.022em; color: var(--ink-900); }
.platform-ver { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-400); }
.platform-facts { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); flex: 1; }
.platform-facts li { font-size: var(--text-sm); color: var(--ink-600); line-height: 1.5; }
.platform .pill { align-self: flex-start; margin-top: var(--sp-2); }

/* The prose bullet treatment must not apply to these lists. */
.prose .platforms > li, .prose .platform-facts > li { display: flex; grid-template-columns: none; }
.prose .platforms > li::before, .prose .platform-facts > li::before { content: none; }

@media (prefers-reduced-transparency: reduce) {
  .demo, .guard, .platform { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}

/* ─── Homepage product showcase (Alpha) ───────────────── */
/* Uses the site's existing card, type and spacing language — Alpha is a
   RAVIM product on a RAVIM page, not a separate mini-site. */
.product {
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: var(--sp-10);
  align-items: center;
  margin-top: var(--sp-8);
}
@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; gap: var(--sp-8); }
}

.product-copy .lede { margin-top: 0; }

.product-shot { margin: 0; }
.product-shot img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px -12px rgba(18, 20, 31, 0.18);
  background: var(--white);
}
.product-shot figcaption {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--ink-400);
}

/* Three short facets under the showcase — introduce, do not explain. */
.product-facets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
}
.product-facets li { display: flex; flex-direction: column; gap: var(--sp-2); }
.facet-t { font-size: var(--text-base); font-weight: 650; color: var(--ink-900); letter-spacing: -0.015em; }
.facet-t::before {
  content: '';
  display: block;
  width: 22px; height: 2px;
  margin-bottom: var(--sp-3);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet-500), var(--teal-500));
}
.facet-d { max-width: 44ch; font-size: var(--text-sm); line-height: 1.6; color: var(--ink-500); }

.hero-aside {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--ink-500);
  max-width: none;   /* a single aside line — let it run rather than wrap */
}
.hero-aside a { font-weight: 600; }

/* These lists are layout, not prose bullets. */
.prose .product-facets > li { display: flex; grid-template-columns: none; }
.prose .product-facets > li::before { content: none; }

@media (max-width: 700px) {
  .product-shot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .product-shot img { min-width: 560px; }
}

/* The product showcase earns more width than the reading measure. The bleed
   is proportional and capped so it can never exceed the stream's own slack. */
@media (min-width: 1025px) {
  .product { grid-template-columns: 40% 1fr; gap: var(--sp-12); }
}

/* ─── Screenshot expand ───────────────────────────────── */
.has-expand { position: relative; }
.shot-expand {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--ink-600);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.shot-expand svg { width: 16px; height: 16px; }
.has-expand:hover .shot-expand, .shot-expand:focus-visible { opacity: 1; }
.shot-expand:hover { color: var(--violet-500); }
@media (hover: none) { .shot-expand { opacity: 1; } }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: var(--sp-6);
  background: rgba(18, 20, 31, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 180ms var(--ease);
}
.lightbox.open { opacity: 1; }
.lightbox img {
  max-width: min(1600px, 96vw);
  max-height: 92vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.5);
  background: #fff;
}
.lightbox-close {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  width: 42px; height: 42px;
  font-size: 26px; line-height: 1;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: var(--r-full);
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* Interactive controls need a usable target, particularly on touch. The demo
   tabs and guard toggle were 36–40px tall, under the 44px guideline. */
.demo-tabs button,
.guard-toggle {
  min-height: 44px;
  padding-block: 0.625rem;
}
@media (pointer: coarse) {
  .shot-expand { width: 44px; height: 44px; }
}

/* ─── Showcase: screenshot reveal ─────────────────────── */
.shot-frame {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: 0 6px 18px -10px rgba(18,20,31,.18);
  transition: box-shadow 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.product-shot img { border: 0; border-radius: 0; box-shadow: none; }

.js-anim [data-shot-reveal] .shot-frame { opacity: 0; transform: translateY(22px) scale(.985); }
[data-shot-reveal].in .shot-frame {
  opacity: 1;
  transform: none;
  box-shadow: 0 26px 60px -22px rgba(18,20,31,.30), 0 4px 12px -6px rgba(18,20,31,.10);
  transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out), box-shadow 900ms var(--ease-out);
}

/* A single light pass, once — it reads as the index sweeping the workspace. */
.shot-sweep {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-120%);
}
[data-shot-reveal].swept .shot-sweep { animation: shotSweep 1250ms var(--ease-out) 1 forwards; }
@keyframes shotSweep { to { transform: translateX(120%); } }

/* The sidebar edge, measured from the image at 18.8% of its width. */
.shot-rail {
  position: absolute; top: 0; bottom: 0; left: 18.8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--violet-400), transparent);
  opacity: 0;
  transition: opacity 600ms var(--ease) 700ms;
}
.shot-tag {
  position: absolute; left: 0; bottom: var(--sp-3);
  max-width: 18.8%;
  margin-left: var(--sp-2);
  padding: 0.3125rem 0.5rem;
  font-size: 0.5625rem; line-height: 1.35; font-weight: 600;
  letter-spacing: .01em;
  color: var(--violet-700);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--violet-100);
  border-radius: var(--r-sm);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 600ms var(--ease) 820ms, transform 600ms var(--ease-out) 820ms;
}
[data-shot-reveal].in .shot-rail { opacity: .8; }
[data-shot-reveal].in .shot-tag { opacity: 1; transform: none; }
@media (max-width: 900px) { .shot-tag { display: none; } }

/* ─── Showcase: the measured cost ─────────────────────── */
.cost {
  margin-top: var(--sp-12);
  padding: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(91,46,230,.05), transparent 55%),
    var(--white);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.js-anim .cost { opacity: 0; transform: translateY(16px); }
.js-anim .cost.in { opacity: 1; transform: none; }

.cost-q {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  font-weight: 650;
  letter-spacing: -.024em;
  color: var(--ink-900);
}
.cost-sub { max-width: 60ch; margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--ink-500); }

.cost-bar {
  position: relative;
  height: 46px;
  margin-top: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--ink-100);
  border: 1px solid var(--border);
  overflow: hidden;
}
.cost-fill {
  display: block; height: 100%; width: 85%;
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: linear-gradient(90deg, var(--violet-500), var(--violet-400));
  transition: width 1600ms var(--ease-out) 200ms;
}
.cost-cap {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding-left: var(--sp-4);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: #fff;
  pointer-events: none;
}

.cost-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}
.cost-facts li { display: flex; flex-direction: column; gap: var(--sp-1); }
.cost-n {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--violet-600);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cost-l { font-size: var(--text-sm); color: var(--ink-500); }
.cost-note {
  max-width: 76ch;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-600);
}

.prose .cost-facts > li { display: flex; grid-template-columns: none; }
.prose .cost-facts > li::before { content: none; }

@media (prefers-reduced-motion: reduce) {
  .shot-sweep { display: none; }
  [data-shot-reveal] .shot-frame, .cost { opacity: 1; transform: none; }
}


/* The bar animates from zero only when scripting will drive it. */
.js-anim .cost-fill { width: 0; }


/* ─── Measure control ─────────────────────────────────────
   The column is wide so components can use the room, but running text is
   held to a comfortable line length rather than stretched across it. */
/* Comfortable line length is 45–75 characters; ch units drift with the
   fallback font, so these are deliberately conservative. */
.stream-inner > section > .lede { max-width: 62ch; }
.stream-inner > section > p     { max-width: 70ch; }
.prose                          { max-width: 74ch; }

.stream-inner > section > h1 { max-width: 26ch; }
.stream-inner > section > h2 { max-width: 42ch; }

/* Components that should use the full width of the column. */
.product,
.product-facets,
.cost,
.entries,
.tech-grid,
.platforms,
.demo,
.guard,
.shot,
.accordion,
.form-grid,
.chain,
.badge-row { max-width: none; }

/* Article prose keeps its own measure inside the wider column. */
.stream .prose { max-width: 74ch; }
.stream .prose .tech-grid,
.stream .prose ul.tech-list { max-width: none; }

/* ─── Right-edge product rail ─────────────────────────── */
/* Collapsed: a vertical marker on the viewport edge. Open: a panel with the
   benefit, the measured figures and the capability set. */
.rail {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 70;
  display: flex;
  align-items: stretch;
  transform: translate(calc(100% - 46px), -50%);
  opacity: 0;
  pointer-events: none;
  transition: transform 520ms var(--ease-out), opacity 360ms var(--ease);
}
.rail.in { opacity: 1; pointer-events: auto; }
.rail.in.open { transform: translate(0, -50%); }

/* ── The tab ── */
.rail-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 46px;
  padding: var(--sp-5) 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: linear-gradient(160deg, var(--violet-500), var(--violet-700));
  border: 1px solid rgba(255,255,255,.18);
  border-right: 0;
  box-shadow: -8px 0 28px -12px rgba(76,44,160,.55);
  color: #fff;
  cursor: pointer;
}
.rail-word {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .22em;
}
.rail-pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-300);
  box-shadow: 0 0 0 0 rgba(95,224,216,.7);
  animation: railPip 2.4s var(--ease) infinite;
}
@keyframes railPip {
  0%   { box-shadow: 0 0 0 0 rgba(95,224,216,.7); }
  70%  { box-shadow: 0 0 0 9px rgba(95,224,216,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,224,216,0); }
}

/* ── The panel ── */
.rail-panel {
  position: relative;
  width: 336px;
  padding: var(--sp-5);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--border);
  border-right: 0;
  box-shadow: -14px 0 40px -18px rgba(18,20,31,.28);
}
.rail-kicker {
  padding-right: 2.25rem;
  font-size: .5625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet-600);
}

.rail-lines { position: relative; display: block; margin-top: var(--sp-3); min-height: 3.2em; }
.rail-line {
  position: absolute; inset: 0;
  font-size: var(--text-base);
  font-weight: 650; line-height: 1.34;
  letter-spacing: -.018em;
  color: var(--ink-900);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 440ms var(--ease), transform 440ms var(--ease-out);
}
.rail-line.on { opacity: 1; transform: none; }

.rail-proof {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  margin-top: var(--sp-4); padding: var(--sp-3);
  background: var(--ink-50);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.rail-proof li { display: flex; flex-direction: column; gap: 2px; }
.rail-fig {
  font-family: var(--font-mono);
  font-size: var(--text-xl); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--violet-600);
}
.rail-cap { font-size: .625rem; line-height: 1.35; color: var(--ink-500); }

.rail-chips { display: flex; flex-wrap: wrap; gap: .3125rem; margin-top: var(--sp-4); }
.rail-chips li {
  padding: .1875rem .4375rem;
  font-size: .625rem; font-weight: 600;
  color: var(--ink-600);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}

.rail-cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--text-sm); font-weight: 650;
  color: var(--violet-600);
}
.rail-cta svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease-out); }
.rail-cta:hover svg { transform: translateX(4px); }

.rail-close {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: 40px; height: 40px;
  font-size: 18px; line-height: 1;
  color: var(--ink-400);
  border-radius: var(--r-full);
}
.rail-close:hover { color: var(--ink-900); background: var(--ink-100); }

/* Too little room to be worth the intrusion. */
@media (max-width: 900px), (max-height: 620px) { .rail { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .rail-pip { animation: none; }
  .rail { transition: opacity 200ms linear; }
}
@media (prefers-reduced-transparency: reduce) {
  .rail-panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}


/* Headings should break on their own terms: balanced lines, no hyphenation,
   and never a single orphaned word on the last line. */
.stream-inner h1, .stream-inner h2, .stream-inner h3,
.entry-title, .facet-t, .platform-os, .cost-q {
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: break-word;
}

/* The K in the Alpha K wordmark carries the teal accent, matching the product's
   own logo where the K is a drawn path rather than a glyph. */
.brand-k { color: var(--teal-500); font-weight: 750; }
.canvas-nav a.active .brand-k,
.canvas-nav a:hover .brand-k { color: var(--teal-600); }
.rail-word .brand-k { color: var(--teal-300); }

/* The rail wordmark is tracked at 0.22em, which is applied after every
   character — including the space, which made the gap before the K read as
   double. Isolate the space so it keeps its natural width. */
.rail-gap { letter-spacing: normal; }


/* These are single-line asides, not paragraphs of prose, and the generic
   `section > p` measure was forcing them to wrap with room to spare. */
.stream-inner > section > p.hero-aside  { max-width: none; }
.stream-inner > section > p.demo-caveat { max-width: 88ch; }