/* =========================================================================
   RHOBEAR marketing site — shared shell
   Top nav · prev/next · footer · per-page blocks
   ========================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

/* ----------------------- LAYOUT --------------------------------------- */
.wrap     { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap-lg  { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.wrap-md  { max-width: 880px;  margin: 0 auto; padding: 0 24px; }
section   { padding: clamp(56px, 8vw, 100px) 0; position: relative; }
section.tight { padding: clamp(36px, 5vw, 64px) 0; }

/* ----------------------- TOP NAV -------------------------------------- */
.top-nav {
  position: sticky; top: 0; z-index: 90;
  /* Opaque background instead of translucent + backdrop-blur. The blur
     was forcing every text node in the nav into a separate raster layer
     and killing subpixel rendering — text in tabs was reading as soft. */
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.top-nav-inner {
  display: flex; align-items: center; gap: 18px;
  height: 64px; padding: 0 24px;
  max-width: 1400px; margin: 0 auto;
}
.brand-lockup {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--c-ink);
  flex-shrink: 0;
}
.brand-lockup img { width: 30px; height: 30px; image-rendering: pixelated; }
.brand-lockup span {
  font-family: var(--font-display);
  font-size: 16px; letter-spacing: 0.08em;
}
.nav-tabs {
  display: flex; align-items: stretch; gap: 4px;
  flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
  display: inline-flex;
  align-items: center;
  height: 32px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  text-decoration: none;
  padding: 0 12px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.nav-tab:hover { background: rgba(26,23,20,0.06); color: var(--c-ink); }
.nav-tab.active {
  background: var(--c-amber-soft);
  color: var(--c-amber-deep);
}
.nav-spacer { flex: 1; }
.nav-cta {
  flex-shrink: 0;
  padding: 8px 16px; font-size: 11px;
}

/* dropdown */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;             /* match .nav-tab height so the chevron items don't sit short */
  align-self: stretch;
}
.nav-dropdown:hover .nav-tab,
.nav-dropdown:focus-within .nav-tab { background: rgba(26,23,20,0.06); color: var(--c-ink); }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  padding: 8px;
  min-width: 220px;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms var(--ease-soft), transform 160ms var(--ease-soft), visibility 160ms;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel,
.nav-dropdown.open .nav-dropdown-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown.open .nav-tab { background: rgba(26,23,20,0.06); color: var(--c-ink); }
.nav-dropdown-panel a {
  display: block; padding: 8px 12px;
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-ink-2);
  text-decoration: none; border-radius: 8px;
}
.nav-dropdown-panel a:hover { background: var(--c-amber-tint); color: var(--c-amber-deep); }
.nav-dropdown-panel a.active { background: var(--c-amber-soft); color: var(--c-amber-deep); }

/* ----------------------- HERO / EYEBROW ------------------------------- */
.eyebrow-row {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-amber-deep);
  margin-bottom: 18px;
}
.eyebrow-row::before {
  content: ""; width: 24px; height: 1.5px;
  background: var(--c-amber-deep);
}
.h1-page {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 0 0 18px;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
.h1-hero {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 5.25rem);
  line-height: 1; margin: 0 0 22px;
  text-wrap: balance;
}
.lead {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--c-ink-2);
  max-width: 720px;
  margin: 0 0 28px;
  line-height: 1.55;
}
.sub-2 {
  font-size: 0.98rem;
  color: var(--c-ink-3);
  max-width: 680px;
  margin: 0 0 24px;
  line-height: 1.55;
}

/* ----------------------- 9-PILLAR RIBBON ------------------------------ */
.pillar-ribbon {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center;
  margin: 24px 0;
}
.pillar-ribbon .chip-amber {
  font-size: 11px; padding: 7px 13px;
}

/* ----------------------- HERO GRID ------------------------------------ */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
}

.scene-frame {
  position: relative;
  border-radius: 22px;
  overflow: visible;
  box-shadow: var(--shadow-lift);
}
.scene-frame > .scene-bg {
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1.45;
  background: #0a0d18;
}
.scene-bg > img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.scene-tag {
  position: absolute; top: 18px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.scene-tag.tl { left: 18px; }
.scene-tag.tr { right: 18px; color: var(--c-status-warn); }
.scene-tag.dot { color: var(--c-cyan); }
.scene-tag.dot::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-cyan); margin-right: 8px; vertical-align: middle;
  box-shadow: 0 0 8px var(--c-cyan);
}

/* the perched character pattern */
.perched {
  position: absolute;
  z-index: 3;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 8px 4px rgba(0,0,0,0.45));
}

/* ----------------------- BUTTON ROW ----------------------------------- */
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 8px 0 0; }
.cta-aside {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--c-ink-3);
  margin: 12px 0 0;
  padding-left: 4px;
}
.cta-aside::first-letter { color: var(--c-amber-deep); }

.quant-line {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--c-ink-3);
  margin: 18px 0 26px;
  max-width: 620px;
  line-height: 1.6;
}

/* ----------------------- OAUTH vs API KEYS SECTION ------------------- */
.oauth-card {
  padding: 36px 36px 32px;
  position: relative;
}
.oauth-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-amber-deep);
  margin-bottom: 12px;
}
.oauth-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 16px;
  max-width: 820px;
}
.oauth-lead {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--c-ink-2);
  margin: 0 0 32px;
  max-width: 800px;
}

.oauth-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 26px;
  position: relative;
}
@media (max-width: 820px) { .oauth-vs { grid-template-columns: 1fr; } }
.oauth-vs::after {
  /* "vs." divider in the middle */
  content: "vs";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1.5px dashed var(--c-stitch);
  font-family: var(--font-display);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-2);
  z-index: 2;
}
@media (max-width: 820px) { .oauth-vs::after { display:none; } }

.oauth-side {
  padding: 22px 22px 24px;
  border-radius: 16px;
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
}
.oauth-bad {
  background: rgba(239,96,121,0.08);
  border: 1.5px dashed rgba(180,40,60,0.45);
}
.oauth-good {
  background: rgba(125,210,170,0.12);
  border: 1.5px dashed rgba(50,140,100,0.55);
}
.oauth-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(180,40,60,0.16);
  color: #a83248;
  align-self: flex-start;
}
.oauth-tag.good {
  background: rgba(50,140,100,0.18);
  color: #1f7a52;
}
.oauth-headline {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  color: var(--c-ink);
}

.meter {
  background: rgba(26,23,20,0.04);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.meter-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-ink-3);
}
.meter-lbl { width: 96px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.06em; }
.meter-bar {
  flex: 1; height: 8px; border-radius: 6px;
  background: rgba(26,23,20,0.08);
  overflow: hidden;
}
.meter-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #f5c84c, #ef6079);
  border-radius: 6px;
}
.meter-amt {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 14px;
  color: #a83248;
}
.meter-amt small {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-ink-3);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.signin-mock {
  background: rgba(26,23,20,0.04);
  border-radius: 10px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.signin-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--c-surface);
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-ink);
}
.signin-row.dim { color: var(--c-ink-3); background: transparent; }
.signin-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-status-ok);
  box-shadow: 0 0 6px rgba(79,214,169,0.5);
  flex-shrink: 0;
}
.signin-row.dim .signin-dot { background: var(--c-ink-4); box-shadow: none; }

.oauth-bullets { margin: 0; padding-left: 18px; }
.oauth-bullets li {
  color: var(--c-ink-2);
  font-size: 0.94rem;
  line-height: 1.5;
  margin-bottom: 7px;
}
.oauth-bad .oauth-bullets li::marker { color: #a83248; }
.oauth-good .oauth-bullets li::marker { color: #1f7a52; }

.oauth-footnote {
  margin: 0;
  padding-top: 18px;
  border-top: 1px dashed var(--c-line-strong);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--c-ink-3);
  line-height: 1.6;
}
.oauth-footnote strong { color: var(--c-ink); font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.02em; }

/* ----------------------- BETA SIGN-UP FORM ---------------------------- */
.rb-beta-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}
.rb-beta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) { .rb-beta-row { grid-template-columns: 1fr; } }

.rb-beta-field { display: flex; flex-direction: column; gap: 6px; }
.rb-beta-field label,
.rb-beta-engine legend {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.rb-beta-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--c-ink-3);
  margin-left: 6px;
  font-weight: 400;
}

.rb-beta-field input[type="text"],
.rb-beta-field input[type="email"],
.rb-beta-field textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1.5px solid var(--c-line-strong);
  border-radius: 10px;
  color: var(--c-ink);
  transition: border-color 140ms var(--ease-soft), background 140ms var(--ease-soft);
}
.rb-beta-field input:focus,
.rb-beta-field textarea:focus {
  outline: 0;
  border-color: var(--c-amber-deep);
  background: var(--c-amber-tint);
}
.rb-beta-field textarea { resize: vertical; min-height: 80px; }

.rb-beta-engine {
  background: rgba(245, 158, 44, 0.06);
  border: 1.5px dashed var(--c-amber-deep);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rb-beta-engine legend {
  padding: 0 8px;
  color: var(--c-amber-deep);
}
.rb-beta-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--c-surface);
  border: 1.5px solid var(--c-line);
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
  font-size: 0.94rem;
  color: var(--c-ink-2);
  line-height: 1.45;
}
.rb-beta-radio:hover { border-color: var(--c-amber-deep); }
.rb-beta-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--c-ink-3);
  border-radius: 50%;
  margin-top: 2px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.rb-beta-radio input[type="radio"]:checked {
  border-color: var(--c-amber-deep);
}
.rb-beta-radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--c-amber-deep);
  border-radius: 50%;
}
.rb-beta-radio input[type="radio"]:checked ~ span { color: var(--c-ink); }
.rb-beta-radio:has(input:checked) {
  border-color: var(--c-amber-deep);
  background: var(--c-amber-tint);
}
.rb-beta-radio strong { color: var(--c-ink); font-weight: 600; }
.rb-beta-which { margin-top: 6px; }

.rb-beta-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  color: var(--c-ink-2);
  cursor: pointer;
}
.rb-beta-consent input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--c-amber-deep);
  cursor: pointer;
}

.rb-beta-submit {
  margin-top: 6px;
  padding: 14px 22px;
  background: var(--c-amber);
  color: #221608;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid var(--c-amber-deep);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.45);
  transition: background 140ms var(--ease-soft), transform 140ms var(--ease-soft);
}
.rb-beta-submit:hover:not(:disabled) {
  background: var(--c-amber-deep); color: #fff; transform: translateY(-1px);
}
.rb-beta-submit:disabled { cursor: wait; opacity: 0.9; }

.rb-beta-status {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--c-ink-3);
  min-height: 20px;
  text-align: center;
}
.ollama-hero {
  padding: 36px 36px 34px;
  background: linear-gradient(180deg, rgba(125,210,170,0.10), rgba(125,210,170,0.04));
}
.ollama-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 900px) { .ollama-hero-grid { grid-template-columns: 1fr; } }

.ollama-stack { display: flex; flex-direction: column; gap: 10px; }
.ollama-tile {
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: var(--c-surface);
  border: 1.5px dashed rgba(50,140,100,0.55);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 8px;
}
.ollama-tile.soft {
  background: rgba(26,23,20,0.03);
  border-color: var(--c-line-strong);
  border-style: dashed;
  box-shadow: none;
}
.ollama-tile-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1f7a52;
}
.ollama-tile-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
}
.ollama-tile-row > div { flex: 1; }
.ollama-tile-line {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--c-ink-2);
  padding: 4px 0;
}
.ollama-pill {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
}
.ollama-pill.ok {
  background: rgba(79,214,169,0.2);
  color: #1f7a52;
  border: 1px solid rgba(50,140,100,0.45);
}
.ollama-arrow {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-ink-3);
  padding: 4px 0;
}

/* ----------------------- CARD GRID ------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 800px) {
  .card-grid.cols-2, .card-grid.cols-3 { grid-template-columns: 1fr; }
}

.feature-card {
  position: relative;
  padding: 28px 26px;
  min-height: 220px;
}
.feature-card .num {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-amber-deep);
  margin-bottom: 8px;
}
.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 10px;
}
.feature-card p {
  font-size: 0.96rem;
  color: var(--c-ink-2);
  margin: 0;
  line-height: 1.55;
}
.feature-card ul { margin: 8px 0 0; padding-left: 18px; }
.feature-card ul li {
  color: var(--c-ink-2);
  font-size: 0.94rem;
  line-height: 1.55;
  margin-bottom: 6px;
}

/* a sprite perched on a card corner */
.sprite-tr { position: absolute; top: -28px; right: -10px; image-rendering: pixelated; filter: drop-shadow(0 6px 4px rgba(0,0,0,0.30)); pointer-events: none; }
.sprite-tl { position: absolute; top: -28px; left:  -10px; image-rendering: pixelated; filter: drop-shadow(0 6px 4px rgba(0,0,0,0.30)); pointer-events: none; }
.sprite-br { position: absolute; bottom: -22px; right: -10px; image-rendering: pixelated; filter: drop-shadow(0 6px 4px rgba(0,0,0,0.30)); pointer-events: none; }
.sprite-bl { position: absolute; bottom: -22px; left:  -10px; image-rendering: pixelated; filter: drop-shadow(0 6px 4px rgba(0,0,0,0.30)); pointer-events: none; }

/* ----------------------- MARQUEE -------------------------------------- */
.marquee-strip {
  padding: 4px 0 !important;   /* density tweaks (tk-density-roomy section) can blow this up — keep it tight */
  overflow: hidden;
  background: var(--c-bg-3);
  border-bottom: 1px solid var(--c-line);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-strip-top { margin: 0 !important; border-top: 0; }
.marquee-strip-bot { margin: 24px 0 0 !important; border-top: 1px solid var(--c-line); }
.marquee-strip .marquee-row { margin: 0 !important; height: 22px; }
.marquee-strip .marquee-track {
  gap: 36px;
  animation-name: marquee-l !important;
  animation-duration: 52s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  padding-right: 36px;
}
.marquee-strip .marquee-track.r {
  animation-name: marquee-r !important;
  animation-duration: 64s !important;
}
.marquee-strip .marquee-track > * { min-width: 44px; height: 22px; }
.marquee-strip .marquee-track img {
  height: 16px;
  opacity: 0.55;
  filter: grayscale(0.5);
}
.marquee-strip .marquee-track img:hover { opacity: 1; filter: grayscale(0); }
/* tighten the gap between the top strip and the hero/first section below */
.marquee-strip-top + section { padding-top: 18px !important; }
/* tighten the gap between the top strip and the hero below */
.marquee-strip-top + section { padding-top: 18px !important; }

.marquee-section {
  padding: 64px 0 80px;
  overflow: hidden;
  position: relative;
}
.marquee-section .marquee-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 30px;
}
.marquee-row {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
  align-items: center;
}
.marquee-row + .marquee-row { margin-top: 36px; }

.marquee-track {
  display: flex;
  gap: 72px;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding-right: 72px;             /* keeps gap consistent across the seam */
  animation: marquee-l var(--marquee-row1, 52s) linear infinite;
  will-change: transform;
}
.marquee-track.r {
  animation: marquee-r var(--marquee-row2, 64s) linear infinite;
}
.marquee-track > * {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;                 /* gives every logo (incl. text-wordmarks) consistent breathing room */
  height: 44px;
}
.marquee-track img {
  height: 36px;
  max-width: 120px;
  width: auto;
  opacity: 0.78;
  filter: grayscale(0.2);
  transition: opacity var(--dur-fast), filter var(--dur-fast);
}
.marquee-track img:hover { opacity: 1; filter: grayscale(0); }

.marquee-section:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-l {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-r {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ----------------------- IT'S LEAN BAND ------------------------------- */
.lean-band {
  position: relative;
  padding: 64px 56px;
  text-align: center;
  margin: 56px auto;
}
.lean-band h2 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  margin: 0 0 22px;
}
.lean-band p {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  color: var(--c-ink-2);
  max-width: 680px; margin: 0 auto 36px;
  line-height: 1.65;
}
.lean-band .it-is-yours {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  color: var(--c-amber-deep);
  margin-top: 28px;
}

/* ----------------------- BETA CTA + COUNTDOWN ------------------------ */
.beta-live-card {
  background: rgba(245,158,44,0.10);
  border: 1.5px dashed var(--c-amber);
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: 20px;
}
.beta-live-eyebrow {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.16em; color: var(--c-amber);
  margin-bottom: 10px;
}
.beta-live-head {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--c-dark-ink); line-height: 1.15; margin-bottom: 8px;
}
.beta-live-sub {
  font-family: var(--font-body); font-size: 0.96rem;
  color: var(--c-dark-ink-2); line-height: 1.55; max-width: 60ch;
}

.beta-cta-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) { .beta-cta-row { grid-template-columns: 1fr; gap: 28px; } }

.countdown {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.cd-cell {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(125,255,213,0.06);
  border: 1.5px solid rgba(125,255,213,0.28);
  border-radius: 14px;
  padding: 14px 14px 10px;
  min-width: 92px;
}
.cd-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1;
  color: var(--c-cyan);
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-dark-ink-3);
  margin-top: 6px;
}
.cd-sep {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--c-cyan);
  opacity: 0.6;
  padding-bottom: 28px;
}
.countdown.zero .cd-cell { opacity: 0.5; }

.beta-cta-side {
  background: rgba(125,255,213,0.04);
  border: 1.5px dashed rgba(125,255,213,0.28);
  border-radius: 18px;
  padding: 24px 22px;
  text-align: center;
}
.beta-stamp { text-align: left; font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.85; color: var(--c-dark-ink-2); }
.beta-stamp-line { display: flex; gap: 8px; }
.beta-stamp-lbl {
  display: inline-block;
  width: 74px;
  color: var(--c-cyan);
  letter-spacing: 0.06em;
}
.install-band { padding: 80px 0; }
.install-band h2 { color: var(--c-dark-ink); margin: 0 0 16px; }
.install-band .lead { color: var(--c-dark-ink-2); max-width: 620px; }

/* ----------------------- PAIRED CARD (HOOK / TECH) -------------------- */
.paired {
  padding: 32px 30px;
  position: relative;
}
.paired .pair-eyebrow {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-amber-deep);
  margin-bottom: 12px;
}
.paired .pair-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 14px;
}
@media (max-width: 760px) { .paired .pair-row { grid-template-columns: 1fr; } }
.paired .pair-label {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 6px;
}
.paired .pair-hook {
  font-size: 1.05rem; color: var(--c-ink); line-height: 1.5; margin: 0 0 10px;
  font-weight: 500;
}
.paired .pair-tech {
  font-family: var(--font-mono); font-size: 0.86rem;
  color: var(--c-ink-3); line-height: 1.55; margin: 0;
  letter-spacing: 0.01em;
}

/* ----------------------- TWO-COL INGREDIENTS-VS-RECIPE ---------------- */
.ivr-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
}
@media (max-width: 880px) { .ivr-grid { grid-template-columns: 1fr; } }
.ivr-card { padding: 32px 28px; position: relative; }
.ivr-card.right {
  background: var(--c-dark-bg);
  color: var(--c-dark-ink);
}
.ivr-card.right h3, .ivr-card.right p { color: var(--c-dark-ink); }
.ivr-card.right::after { border-color: rgba(125,255,213,0.35); }
.ivr-tag {
  display: inline-block;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  margin-bottom: 14px;
}
.ivr-card.left .ivr-tag  { background: var(--c-amber-soft); color: var(--c-amber-deep); }
.ivr-card.right .ivr-tag { background: rgba(125,255,213,0.16); color: var(--c-cyan); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.chip-row .chip-mono { font-size: 10px; padding: 5px 10px; }
.ivr-card.right .chip-mono { color: var(--c-dark-ink-2); border-color: rgba(232,236,243,0.35); }

/* ----------------------- BULLETS -------------------------------------- */
.bullets { padding-left: 18px; margin: 8px 0; }
.bullets li { margin-bottom: 8px; color: var(--c-ink-2); line-height: 1.55; }
.bullets-mono { list-style: none; padding: 0; margin: 8px 0; }
.bullets-mono li {
  font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.6;
  color: var(--c-ink-2); padding-left: 22px; position: relative; margin-bottom: 6px;
}
.bullets-mono li::before {
  content: "·"; position: absolute; left: 6px; color: var(--c-amber-deep);
  font-weight: 700; font-size: 1.4em; top: -4px;
}

/* ----------------------- VOICE / EASE CALLOUT CHIP -------------------- */
.voice-chip {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  background: var(--c-amber-soft);
  border: 1.5px dashed var(--c-amber-deep);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.94rem;
  color: var(--c-amber-deep); line-height: 1.4;
  max-width: 100%;
}
.voice-chip svg { flex-shrink: 0; }

/* ----------------------- BIG SCREENSHOT ------------------------------- */
.screenshot-frame {
  position: relative;
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: #0a0d18;
}
.screenshot-frame.stitched::after {
  content: ""; position: absolute; inset: 8px;
  border: var(--border-stitch);
  border-radius: 12px;
  pointer-events: none;
  z-index: 4;
  border-color: rgba(255,255,255,0.25);
}
.screenshot-frame img { width: 100%; height: auto; display: block; }
.screenshot-frame.has-perch { overflow: visible; }
.screenshot-frame.has-perch img { border-radius: 18px; }

/* ----------------------- WORKBENCH (drop-in illustration) ------------- */
.drop-illust {
  position: relative;
  background: var(--c-bg-3);
  border-radius: 18px;
  padding: 28px;
  min-height: 320px;
  overflow: hidden;
}
.model-tray {
  position: absolute; bottom: 22px; left: 28px;
  display: flex; gap: 10px;
}
.model-card {
  width: 88px; aspect-ratio: 0.7;
  border-radius: 12px;
  border: 1.5px dashed var(--c-stitch);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px;
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: var(--shadow-card);
}
.model-card.claude  { background: #fff3d9; color: #8a4a18; }
.model-card.codex   { background: #d6f6df; color: #1a5530; }
.model-card.pi      { background: #efe4ff; color: #4a2a7a; }
.model-card.ollama  { background: #1a1f2c; color: #e8ecf3; }
.model-card.lifted  { transform: rotate(-12deg) translate(60px, -180px); z-index: 5; }

.dotted-handoff {
  position: absolute;
  top: 60px; right: 60px;
  width: 180px; height: 2px;
}
.tooltip-amber {
  position: absolute;
  top: 40px; right: 40px;
  background: var(--c-amber-soft);
  border: 1.5px dashed var(--c-amber-deep);
  color: var(--c-amber-deep);
  padding: 7px 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.lane-card {
  position: absolute; top: 70px; right: 28px;
  width: 220px;
  background: var(--c-surface);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--c-line);
}
.lane-card .lane-eyebrow {
  font-family: var(--font-display); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-ink-3); margin-bottom: 6px;
}
.lane-card .lane-title {
  font-family: var(--font-display); font-size: 12px;
  color: var(--c-ink); margin-bottom: 4px;
}

/* ----------------------- TAB CARD GRID (hub.html) --------------------- */
.tab-card {
  padding: 26px 24px 32px;
  min-height: 200px;
  position: relative;
}
.tab-card .tab-num {
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-ink-3); margin-bottom: 8px;
}
.tab-card h3 { font-size: 1.4rem; margin: 0 0 8px; color: var(--c-ink); }

/* ----------------------- SCREENSHOT + CAPTION (workbench) ------------- */
.screen-caption-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px;
  align-items: center;
}
@media (max-width: 980px) { .screen-caption-grid { grid-template-columns: 1fr; } }
.screen-caption-grid h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); margin: 6px 0 14px; }

/* ----------------------- WORLDS PAGE GRID ----------------------------- */
.worlds-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
@media (max-width: 980px) { .worlds-grid { grid-template-columns: 1fr; } }
.world-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 1.05;
  box-shadow: var(--shadow-lift);
  border: 1.5px solid var(--c-line-strong);
}
.world-card .world-bg { position: absolute; inset: 0; }
.world-card .world-bg img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.world-card .world-sprite {
  position: absolute; right: 6%; bottom: 6%;
  height: 56%;
  filter: drop-shadow(0 10px 6px rgba(0,0,0,0.65));
  image-rendering: pixelated; z-index: 2;
}
.world-card .world-extra {
  position: absolute; left: 8%; bottom: 8%;
  height: 36%;
  filter: drop-shadow(0 8px 5px rgba(0,0,0,0.65));
  image-rendering: pixelated; z-index: 2;
}
.world-card .world-label {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 3;
}
.world-card .world-label .chip-mono {
  background: rgba(0,0,0,0.55); color: #fff;
  border-color: rgba(255,255,255,0.32);
  backdrop-filter: blur(8px);
  font-size: 11px;
}
.world-card .world-label .sub {
  font-family: var(--font-mono); font-size: 11px;
  color: #f1e7d2; opacity: 0.92;
  padding-left: 4px;
}

/* ----------------------- FAQ ACCORDION -------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  padding: 0;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 26px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--c-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; margin-left: auto;
  font-family: var(--font-mono); font-size: 1.4rem;
  color: var(--c-amber-deep);
  transition: transform 200ms var(--ease-soft);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 26px 22px; color: var(--c-ink-2); line-height: 1.6; font-size: 1.02rem; }

/* ----------------------- BIG QUOTE ------------------------------------ */
.bigquote {
  padding: 50px 48px;
  position: relative;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.55;
}
.bigquote::before {
  content: "“";
  position: absolute; top: -10px; left: 26px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8rem; line-height: 1;
  color: var(--c-amber-deep);
  opacity: 0.35;
}
.bigquote blockquote {
  margin: 0; padding: 0 8px 18px 60px;
  color: var(--c-ink);
}
.bigquote cite {
  display: block; padding-left: 60px;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-ink-3); font-style: normal;
}

/* ----------------------- CURTAIN CALL (closer.html) ------------------- */
.curtain-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  align-items: end;
}
@media (max-width: 1100px) { .curtain-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .curtain-grid { grid-template-columns: repeat(2, 1fr); } }
.curtain-cell { text-align: center; }
.curtain-cell .bubble {
  font-family: var(--font-mono); font-size: 0.84rem;
  background: var(--c-surface);
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  padding: 8px 12px;
  margin-bottom: 14px;
  display: inline-block;
  position: relative;
}
.curtain-cell .bubble::after {
  content: ""; position: absolute;
  bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--c-surface);
}
.curtain-cell img {
  height: 180px; width: auto; margin: 0 auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 6px rgba(72,52,30,0.35));
}
.curtain-cell .name {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.12em; margin-top: 10px;
  color: var(--c-ink);
}

/* expansion row sits below, smaller */
.curtain-row-2 { grid-template-columns: repeat(3, 1fr); margin-top: 36px; }
.curtain-row-2 .curtain-cell img { height: 140px; }

.you-line {
  text-align: center;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--c-ink-2);
  margin: 56px 0 20px;
}
.final-its-yours {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 8rem);
  color: var(--c-amber-deep);
  margin: 60px 0 40px;
  line-height: 1;
}

/* ----------------------- PREV / NEXT BAR ------------------------------ */
.prevnext {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-line);
  margin-top: 80px;
}
.prevnext-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  max-width: 1200px; margin: 0 auto;
}
.pn-link {
  display: inline-flex; flex-direction: column;
  text-decoration: none;
  color: var(--c-ink);
  padding: 10px 18px;
  border-radius: 14px;
  transition: background var(--dur-fast);
}
.pn-link:hover { background: rgba(26,23,20,0.04); }
.pn-link.disabled { opacity: 0.3; pointer-events: none; }
.pn-link .pn-mini {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-ink-3); margin-bottom: 2px;
}
.pn-link .pn-name {
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: 0.06em;
}

/* ----------------------- FOOTER --------------------------------------- */
.site-footer {
  background: var(--c-bg-3);
  padding: 36px 0 28px;
}
.site-footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.footer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer-copy {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--c-ink-3);
}
.footer-copy a { color: var(--c-ink-2); }
.footer-tag {
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-amber-deep);
}
.footer-disclaimer {
  font-family: var(--font-body); font-size: 0.78rem;
  color: var(--c-ink-4); line-height: 1.6;
  max-width: 940px;
}

/* ----------------------- BUILT-WITH RECEIPT --------------------------- */
.receipt {
  padding: 32px 30px;
  position: relative;
  margin-bottom: 40px;
}
.receipt .receipt-head {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.receipt .receipt-head img.logo { height: 56px; width: auto; max-width: 120px; }
.receipt h2 { font-family: var(--font-display); margin: 0; font-size: 1.8rem; }
.stars-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #2a1810; color: var(--c-amber);
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--font-display); font-size: 13px;
  border: 1.5px solid #4a2a18;
}
.repo-link {
  font-family: var(--font-mono); font-size: 0.88rem;
  color: var(--c-ink-2);
  text-decoration: underline dashed;
  text-underline-offset: 3px;
}
.license-pill {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--c-bg-3); color: var(--c-ink-2);
  padding: 4px 10px; border-radius: 6px;
}
.receipt-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px;
}
@media (max-width: 800px) { .receipt-grid { grid-template-columns: 1fr; } }
.receipt-grid h4 {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-amber-deep);
  margin: 0 0 8px;
}
.receipt-grid ul { padding-left: 18px; margin: 0; }
.receipt-grid ul li { color: var(--c-ink-2); font-size: 0.94rem; line-height: 1.55; margin-bottom: 6px; }

/* Accordion-style receipts (Built With) ----------------------------- */
.bw-card {
  padding: 28px 30px 24px;
  position: relative;
  margin-bottom: 32px;
  list-style: none;
}
.bw-card::marker { display: none; }
.bw-card > summary { list-style: none; cursor: pointer; }
.bw-card > summary::-webkit-details-marker { display: none; }
.bw-summary-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: flex-start;
}
@media (max-width: 700px) { .bw-summary-inner { grid-template-columns: 1fr; } }
.bw-summary-inner .logo {
  height: 56px; width: auto; max-width: 110px;
  align-self: flex-start;
}
.bw-summary-inner .bw-head { display: block; }
.bw-summary-inner .bw-head .bw-h2 {
  font-family: var(--font-display);
  margin: 0; font-size: 1.5rem; display: block;
}
.bw-hook {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-amber-deep);
  margin: 6px 0 10px;
  max-width: 60ch;
  line-height: 1.3;
}
.bw-hook em { color: var(--c-ink); font-style: normal; }
.bw-meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.bw-chevron {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c-ink-3);
  padding: 6px 12px;
  border: 1px dashed var(--c-line-strong);
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
  align-self: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.bw-card[open] .bw-chevron { background: var(--c-amber-soft); color: var(--c-amber-deep); border-style: solid; border-color: var(--c-amber-deep); }
.bw-chevron::before { content: "EXPAND "; }
.bw-card[open] .bw-chevron::before { content: "COLLAPSE "; }
.bw-chevron::after { content: "▾"; margin-left: 6px; display: inline-block; transition: transform var(--dur-fast); }
.bw-card[open] .bw-chevron::after { transform: rotate(180deg); }

.bw-lead-use {
  display: block;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--c-line-strong);
}
.bw-lead-use .bw-h4 {
  display: block;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-amber-deep);
  margin: 0 0 8px;
}
.bw-lead-use .bw-ul { display: block; padding-left: 18px; margin: 0; }
.bw-lead-use .bw-li { display: list-item; list-style: disc; color: var(--c-ink); font-size: 0.96rem; line-height: 1.55; margin-bottom: 6px; }
.bw-lead-use .bw-li strong { color: var(--c-ink); }

.bw-expand {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px dashed var(--c-line-strong);
}

.bw-proxy-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  background: rgba(50,140,100,0.12);
  color: #1f7a52;
  border: 1px solid rgba(50,140,100,0.35);
  padding: 4px 10px; border-radius: 6px;
}

.bw-aside {
  margin: 16px 0 0;
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--c-ink-3);
  font-style: italic;
  line-height: 1.55;
  padding: 10px 14px;
  background: rgba(245,158,44,0.06);
  border-left: 3px solid var(--c-amber);
  border-radius: 0 6px 6px 0;
}

.hero-stats {
  display: grid; gap: 14px; margin-bottom: 20px;
}
.hero-stats.c3 { grid-template-columns: repeat(3, 1fr); }
.hero-stats.c2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .hero-stats.c3, .hero-stats.c2 { grid-template-columns: 1fr; } }
.hero-stat {
  padding: 22px 18px;
  text-align: center;
}
.hero-stat .num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--c-amber-deep);
  margin-bottom: 4px;
}
.hero-stat .label {
  font-family: var(--font-mono); font-size: 0.84rem;
  color: var(--c-ink-3); letter-spacing: 0.02em;
}

/* ----------------------- INSTALL TERMINAL ----------------------------- */
.install-terminal { max-width: 720px; margin: 28px 0 0; }
.terminal-headerbar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: #131a2c;
  border-radius: 12px 12px 0 0;
  border: 1px solid #1c2540; border-bottom: none;
}
.terminal-headerbar .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #2a3550;
}
.install-terminal .terminal {
  border-radius: 0 0 12px 12px;
  margin: 0;
}

/* ============================================================
   SUBSTRATE REWRITE — sprite gutters, "dig in" disclosure,
   code artifacts, animated hero terminal, build-it-yourself band
   ============================================================ */

/* Sprite pulled OUT of the text column into its own grid track so it can
   never clip the hook, and the text fills the row (no stranded gap). */
.paired.has-sprite { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.paired.has-sprite .sub-main { min-width: 0; }
.paired.has-sprite .sub-sprite {
  align-self: center; justify-self: end;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,0.30));
  pointer-events: none;
}
@media (max-width: 760px) {
  .paired.has-sprite { grid-template-columns: 1fr; justify-items: start; }
  .paired.has-sprite .sub-sprite { justify-self: center; max-height: 120px; }
}

/* "dig in" disclosure — default card shows HOOK + TECH; this reveals
   the assigned extra moves (engineering / honest limit / why-not-DIY). */
.dig { margin-top: 18px; border-top: 1px dashed var(--c-line-strong); }
.dig > summary {
  list-style: none; cursor: pointer; width: max-content;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-amber-deep);
  padding: 13px 0 3px;
}
.dig > summary::-webkit-details-marker { display: none; }
.dig > summary::after {
  content: "\25BE"; font-family: var(--font-mono); font-size: 0.9rem;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.dig[open] > summary::after { transform: rotate(180deg); }
.dig-body { padding-top: 4px; }
.dig-block { margin-top: 16px; }
.dig-block:first-child { margin-top: 6px; }
.dig-tag {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 6px; color: var(--c-ink-3);
}
.dig-tag.tag-limit { color: var(--c-amber-deep); }
.dig-tag.tag-diy   { color: var(--c-status-ok); }
.dig-block p { margin: 0; color: var(--c-ink-2); line-height: 1.62; font-size: 0.98rem; }

/* exact code artifact, terminal-styled */
.code-artifact {
  margin: 9px 0 0; padding: 12px 14px;
  background: #0a0f1c; color: #d8e1f0;
  border: 1px solid #1c2540; border-radius: var(--r-3);
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.55;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.code-artifact .tok { color: var(--c-cyan); }

/* Hero terminal — promoted, larger, lines stream in */
.terminal-hero { max-width: 880px; margin: 0 auto; font-size: 0.98rem; padding: 28px 30px; white-space: normal; }
.terminal-hero .tline { display: block; white-space: pre-wrap; }
.terminal-hero .tline + .tline { margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .terminal-hero.stream .tline { opacity: 0; transform: translateY(7px); animation: tline-in 0.5s var(--ease-soft) forwards; }
  .terminal-hero.stream .tline:nth-child(1) { animation-delay: 0.20s; }
  .terminal-hero.stream .tline:nth-child(2) { animation-delay: 0.55s; }
  .terminal-hero.stream .tline:nth-child(3) { animation-delay: 0.90s; }
  .terminal-hero.stream .tline:nth-child(4) { animation-delay: 1.25s; }
  .terminal-hero.stream .tline:nth-child(5) { animation-delay: 1.60s; }
  .terminal-hero.stream .tline:nth-child(6) { animation-delay: 1.95s; }
  @keyframes tline-in { to { opacity: 1; transform: none; } }
}

/* "You could build this yourself" close band + per-component pain rows */
.diy-band { margin-top: 14px; }
.diy-band .diy-pain { color: var(--c-ink-2); line-height: 1.65; }
.diy-band .diy-pain strong { color: var(--c-ink); }
.comp-row { display: grid; grid-template-columns: 200px 1fr; gap: 22px; padding: 20px 0; border-top: 1px dashed var(--c-line-strong); align-items: baseline; }
.comp-row:last-child { border-bottom: 1px dashed var(--c-line-strong); }
@media (max-width: 700px) { .comp-row { grid-template-columns: 1fr; gap: 6px; } }
.comp-row .comp-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--c-ink); text-decoration: none; }
.comp-row .comp-name:hover { color: var(--c-amber-deep); }
.comp-row .comp-value { color: var(--c-ink); font-weight: 500; margin: 0 0 6px; line-height: 1.45; }
.comp-row .comp-break { color: var(--c-ink-3); margin: 0; line-height: 1.55; font-size: 0.95rem; }
.comp-row .comp-break b { color: var(--c-amber-deep); font-weight: 600; }

/* ============================================================
   LEARN page — outcome-first rebuild
   ============================================================ */

/* Card header that keeps the sprite in its own gutter beside the
   heading, so it can never clip body text (recurring template bug). */
.lc-head { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; }
.lc-head .lc-headings { min-width: 0; }
.lc-sprite {
  flex: 0 0 auto; align-self: flex-start;
  max-height: 134px; width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,0.30));
  pointer-events: none;
}
@media (max-width: 640px) { .lc-sprite { max-height: 84px; } }

/* "Your first three wins" — aspirational destination cards (reachable,
   never greyed-out). */
.win-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
@media (max-width: 820px) { .win-grid { grid-template-columns: 1fr; } }
.win-card {
  background: var(--c-amber-tint);
  border: 1.5px solid var(--c-amber-deep);
  border-radius: var(--r-3);
  padding: 22px 22px 20px;
  display: flex; flex-direction: column;
}
.win-card .win-num { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; color: var(--c-amber-deep); margin-bottom: 12px; }
.win-card .win-title { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.3; color: var(--c-ink); margin: 0 0 10px; }
.win-card .win-out { color: var(--c-ink-2); font-size: 0.95rem; line-height: 1.55; margin: 0 0 16px; }
.win-card .win-foot { margin-top: auto; display: flex; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-3); }
.win-card .win-unlock { background: var(--c-surface); border: 1px dashed var(--c-line-strong); border-radius: 999px; padding: 3px 10px; color: var(--c-ink-2); white-space: nowrap; }

/* Anti-hype honesty band — plain and blunt, reads like a person, not a tagline. */
.honesty { max-width: 760px; margin: 0 auto; border-left: 4px solid var(--c-amber-deep); padding: 4px 0 4px 22px; }
.honesty .honesty-kicker { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-3); margin-bottom: 12px; }
.honesty p { font-size: 1.14rem; line-height: 1.62; color: var(--c-ink); margin: 0; }

/* Track columns + the "at full release" teaser cell */
.track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px; margin-top: 26px; }
@media (max-width: 820px) { .track-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .track-grid { grid-template-columns: 1fr; } }
.track-release { border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-3); padding: 16px 18px; background: var(--c-bg-2); }
.track-release .mono-label { color: var(--c-ink-3); }

/* ============================================================
   HOMEPAGE rebuild — moat-first hero, how-it-works, leash
   ============================================================ */

/* Promoted "a regular person built this" trust line */
.trust-line {
  margin-top: 28px; max-width: 560px;
  font-size: 1rem; line-height: 1.6; color: var(--c-ink-2);
  border-left: 3px solid var(--c-amber-deep);
  padding: 4px 0 4px 16px; font-style: italic;
}

/* HOW IT WORKS — three concrete steps */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
@media (max-width: 820px) { .how-grid { grid-template-columns: 1fr; } }
.how-step {
  background: var(--c-surface);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-3);
  padding: 26px 24px;
}
.how-step .how-num { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; color: var(--c-amber-deep); margin-bottom: 12px; }
.how-step h3 { font-family: var(--font-display); font-size: 1.16rem; line-height: 1.25; margin: 0 0 10px; color: var(--c-ink); }
.how-step p { margin: 0; color: var(--c-ink-2); line-height: 1.6; font-size: 0.98rem; }
.leash-line {
  margin-top: 24px;
  font-family: var(--font-display); font-size: 1.04rem; line-height: 1.45; color: var(--c-ink);
  background: var(--c-amber-tint); border: 1.5px dashed var(--c-amber-deep);
  border-radius: var(--r-3); padding: 16px 20px;
}
.leash-line strong { color: var(--c-amber-deep); }

/* Feature cards: sprite header so it never clips the heading (reuse .lc-head) */
.feature-card .lc-head { margin-bottom: 4px; }
.feature-card .lc-sprite { max-height: 92px; }

/* ============================================================
   CREW page — promoted handoff, role gating, count reframe
   ============================================================ */

/* Promoted handoff: transcript + plain-language beat fill the dark panel */
.crew-handoff-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; margin-top: 10px; }
@media (max-width: 900px) { .crew-handoff-grid { grid-template-columns: 1fr; } }
.handoff-beat { background: rgba(255,255,255,0.03); border: 1px solid rgba(125,255,213,0.18); border-radius: var(--r-3); padding: 22px 24px; }
.handoff-beat .beat-kicker { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; color: var(--c-cyan); margin-bottom: 16px; }
.handoff-beat ol { margin: 0; padding: 0; list-style: none; counter-reset: beat; }
.handoff-beat li { counter-increment: beat; position: relative; padding: 0 0 14px 34px; color: var(--c-dark-ink-2); line-height: 1.5; font-size: 0.97rem; }
.handoff-beat li:last-child { padding-bottom: 0; }
.handoff-beat li::before { content: counter(beat); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-cyan-soft); color: var(--c-cyan); font-family: var(--font-display); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.handoff-beat li strong { color: var(--c-dark-ink); }

/* extend the streaming-terminal stagger for the longer crew transcript */
.terminal-hero.stream .tline:nth-child(7){animation-delay:2.30s}
.terminal-hero.stream .tline:nth-child(8){animation-delay:2.60s}
.terminal-hero.stream .tline:nth-child(9){animation-delay:2.90s}
.terminal-hero.stream .tline:nth-child(10){animation-delay:3.20s}
.terminal-hero.stream .tline:nth-child(11){animation-delay:3.50s}
.terminal-hero.stream .tline:nth-child(12){animation-delay:3.80s}

/* count reframe strip */
.crew-count { font-family: var(--font-mono); font-size: 0.86rem; color: var(--c-ink-3); letter-spacing: 0.01em; margin: 6px 0 26px; line-height: 1.6; }
.crew-count b { color: var(--c-amber-deep); }

/* role gating fences */
.fence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
@media (max-width: 780px) { .fence-grid { grid-template-columns: 1fr; } }
.fence { background: var(--c-surface); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-3); padding: 18px 18px; }
.fence .fence-role { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; color: var(--c-ink-3); margin-bottom: 12px; }
.fence .fence-line { font-size: 0.94rem; line-height: 1.5; margin: 0 0 7px; padding-left: 22px; position: relative; color: var(--c-ink-2); }
.fence .can::before { content: "\2713"; position: absolute; left: 0; color: #1f7a52; font-weight: 700; }
.fence .cant::before { content: "\2715"; position: absolute; left: 0; color: #c4304f; font-weight: 700; }
.tech-line { font-family: var(--font-mono); font-size: 0.86rem; color: var(--c-ink-3); margin: 16px 0 0; }

/* ---------------- WORKBENCH: live vs. roadmap status ---------------- */
/* LIVE-TODAY tag — solid, status-ok green. Shipped, verified true. */
/* live-tag — now a SOLID, GLOWING, clickable Founders-beta CTA pill.
   (Was a hollow "Live today" status badge; "live today" is untrue pre-launch.) */
.live-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #06140f;
  background: var(--c-status-ok, #4fd6a9);
  border: 1.5px solid var(--c-status-ok, #4fd6a9); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 16px;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(79,214,169,0.25),
    0 0 18px rgba(79,214,169,0.55),
    0 0 40px rgba(79,214,169,0.22);
  transition: box-shadow 200ms var(--ease-soft, ease),
              transform 200ms var(--ease-soft, ease),
              filter 200ms var(--ease-soft, ease);
}
a.live-tag:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(79,214,169,0.35),
    0 0 24px rgba(79,214,169,0.78),
    0 0 56px rgba(79,214,169,0.32);
}
.live-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #06140f; }

/* ON-THE-ROADMAP tag — dashed cyan, deliberately NOT solid. Not shipped. */
.coming-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-cyan);
  border: 1.5px dashed var(--c-cyan); border-radius: 999px;
  padding: 5px 13px; margin-bottom: 16px;
}
.coming-tag::before { content: "\25F7"; font-size: 13px; line-height: 1; }

/* Coming-soon band — dashed border + blueprint hatch so it never reads as shipped. */
.coming-band {
  position: relative; overflow: hidden;
  border: 2px dashed rgba(125,255,213,0.45);
  border-radius: var(--r-4, 18px);
  background:
    repeating-linear-gradient(45deg, rgba(125,255,213,0.05) 0 14px, transparent 14px 28px),
    var(--c-dark-bg);
  margin: 30px 0;
}
.coming-band .wrap { padding-top: 54px; padding-bottom: 54px; }
.coming-band em { color: var(--c-cyan); }

/* outcome-led spec block: big outcome line, mono proof underneath */
.spec-block { margin: 0 0 4px; }
.spec-block .spec-out { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.25; margin: 0 0 8px; }
.spec-block .spec-proof { font-family: var(--font-mono); font-size: 0.86rem; color: var(--c-ink-3); line-height: 1.6; margin: 0; }

/* ============================================================================
   FLOATING / GRAPH-PAPER SKIN  (site-wide — owner-approved 2026-06-04)
   Keeps the exact palette; adds depth so flat matte surfaces feel like they
   float: faint graph paper behind everything, a soft cyan blueprint grid +
   top depth-glow on the dark bands, and gentle elevation on cards/frames.
   Loaded last (after colors_and_type.css) so it overrides the base surfaces.
   ============================================================================ */

/* 1 — the page becomes faint graph paper, so everything above it reads as floating */
body {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(26,23,20,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,23,20,0.045) 1px, transparent 1px),
    radial-gradient(rgba(120,80,30,0.05) 1px, transparent 1.4px);
  background-size: 34px 34px, 34px 34px, 5px 5px;
  background-position: -1px -1px, -1px -1px, 0 0;
}

/* 2 — flat matte dark bands gain a soft cyan blueprint grid + a top depth-glow */
.band-dark {
  background-color: var(--c-dark-bg);
  background-image:
    linear-gradient(rgba(125,255,213,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,255,213,0.05) 1px, transparent 1px),
    radial-gradient(120% 85% at 50% -15%, rgba(125,255,213,0.10), transparent 60%);
  background-size: 30px 30px, 30px 30px, 100% 100%;
  box-shadow:
    0 24px 60px -30px rgba(8,12,22,0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* 3 — cards lift off the graph paper with soft, warm, layered elevation */
.card-paper {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 18px 40px -24px rgba(60,40,15,0.40),
    0 4px 12px -8px rgba(60,40,15,0.20);
  transition: box-shadow 220ms var(--ease-soft, ease), transform 220ms var(--ease-soft, ease);
}
.card-paper:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.65),
    0 28px 60px -22px rgba(60,40,15,0.48),
    0 6px 16px -8px rgba(60,40,15,0.24);
}

/* 4 — screenshot frames float a touch more too */
.screenshot-frame {
  box-shadow:
    0 22px 48px -26px rgba(8,12,22,0.45),
    0 6px 16px -10px rgba(8,12,22,0.30);
}

/* =====================================================================
   ★ CONSTELLATION RE-SKIN — sister to the hub (deep-space premium)
   Appended last so it wins the cascade. Re-values the design tokens to
   a deep-space palette, swaps the display face to a premium system stack
   (no pixel font — owner law), converts the warm-paper surfaces to dark
   glass, and seats the hub's live starfield behind all content.
   The copy is untouched; only the skin changes.
   ===================================================================== */
:root{
  /* deep-space base — !important so index.html's inline TWEAKS style block
     (a light-theme live-editor that loads after shell.css) can't override them. */
  --c-bg:#070b14 !important;  --c-bg-2:#0a1020 !important;  --c-bg-3:#0e1526 !important;
  --c-surface:rgba(17,25,43,0.55) !important;  --c-surface-2:rgba(22,31,52,0.62) !important;

  /* light ink on space */
  --c-ink:#eaf0fb !important;  --c-ink-2:#c3cde0 !important;  --c-ink-3:#94a0b8 !important;  --c-ink-4:#6b7589 !important;

  /* amber survives as the one warm note; brighter on dark for links */
  --c-amber:#f7a836 !important;  --c-amber-deep:#ffc164 !important;
  --c-amber-soft:rgba(247,168,54,0.16) !important;  --c-amber-tint:rgba(247,168,54,0.10) !important;

  /* cyan structure + hairlines replace the dark paper stitch */
  --c-stitch:rgba(125,255,213,0.22) !important;
  --c-line:rgba(170,200,255,0.12) !important;
  --c-line-strong:rgba(170,200,255,0.22) !important;

  /* warm shadows → soft cosmic depth */
  --shadow-soft:0 1px 0 rgba(255,255,255,0.03), 0 10px 30px -14px rgba(0,0,0,0.70);
  --shadow-card:0 1px 0 rgba(255,255,255,0.04), 0 18px 44px -18px rgba(0,0,0,0.75);
  --shadow-lift:0 2px 0 rgba(255,255,255,0.05), 0 30px 60px -22px rgba(0,0,0,0.80);
  --shadow-inner:inset 0 1px 0 rgba(255,255,255,0.06);

  /* "our type" — self-hosted Inter (bundled .woff2, no runtime CDN), consistent on every
     machine; falls back to the system stack if the font fails to load. */
  --font-display:"InterRHO",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif !important;
  --font-body:"InterRHO",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif !important;
}
/* self-hosted brand typeface */
@font-face{
  font-family:"InterRHO";
  src:url("assets/fonts/inter.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

html{ color-scheme:dark; }

/* the space wash sits under the starfield canvas */
body{
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(60,120,180,0.15), transparent 55%),
    radial-gradient(120% 90% at 92% 6%, rgba(120,84,180,0.18), transparent 58%),
    linear-gradient(165deg,#06121b 0%,#070a16 48%,#0a0814 100%) !important;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* live starfield (injected by shell.js) seated behind everything */
#rho-stars{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0;
  pointer-events:none; display:block; }
main, .site-footer, body > main, body > footer{ position:relative; z-index:1; }
/* keep the nav STICKY — my lift-above-starfield rule had flattened it to relative,
   which scrolled it away on tall pages (you couldn't navigate back). sticky + z-index
   already sits above the fixed canvas. */
.top-nav{ position:sticky !important; top:0; z-index:90; }

/* premium headlines — drop the pixel cadence, gain weight + tight tracking */
h1,h2,h3,h4,h5,.h1-hero,.h-display{
  font-family:var(--font-display) !important; font-weight:700;
  letter-spacing:-0.018em; color:var(--c-ink); }
.eyebrow,.eyebrow-row,.nav-tab,.btn-amber,.btn-ghost,.mono-label,.nav-cta{
  font-family:var(--font-display) !important; font-weight:600; letter-spacing:0.12em; }

/* the brand mark is the glowing constellation bear now — never pixelated */
.brand-lockup img{ image-rendering:auto !important; width:30px; height:30px;
  filter:drop-shadow(0 0 8px rgba(60,210,180,0.55)); }
.brand-lockup span{ font-family:var(--font-display); font-weight:700; letter-spacing:0.06em; }

/* top nav → dark glass */
.top-nav{ background:rgba(10,16,28,0.72) !important;
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--c-line) !important; }
.nav-tab{ color:var(--c-ink-2); }
.nav-tab:hover,
.nav-dropdown:hover .nav-tab,.nav-dropdown.open .nav-tab,.nav-dropdown:focus-within .nav-tab{
  background:rgba(170,200,255,0.08) !important; color:var(--c-ink) !important; }
/* amber pills must stay READABLE — faint translucent fill, bright warm text
   (explicit rgba, not a var, so nothing can flip them back to solid-bright). */
.nav-tab.active{ background:rgba(247,168,54,0.15) !important; color:#ffdca6 !important; }
.chip-amber,.pillar-ribbon .chip-amber{ background:rgba(247,168,54,0.13) !important;
  color:#ffdca6 !important; border:1px solid rgba(247,168,54,0.45) !important; }
.nav-dropdown-panel{ background:rgba(12,18,32,0.98) !important;
  border:1px solid var(--c-line-strong) !important; box-shadow:var(--shadow-card);
  z-index:200 !important; }
.nav-dropdown{ position:relative; z-index:200; }
/* THE SUBSTRATE DROPDOWN FIX: .nav-tabs has overflow-x:auto, which forces overflow-y
   to clip — so the dropdown panel that drops below the tab bar was being cut off and
   the 7 nested pages were unreachable. Let the nav containers show their overflow. */
.nav-tabs,.top-nav-inner,.top-nav{ overflow:visible !important; }
/* force the open/hover panel to actually SHOW (something was keeping it hidden) */
.nav-dropdown.open .nav-dropdown-panel,
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel{
  opacity:1 !important; visibility:visible !important; transform:none !important; pointer-events:auto !important; }
.nav-dropdown-panel a{ color:var(--c-ink-2) !important; }
.nav-dropdown-panel a:hover,.nav-dropdown-panel a.active{
  background:var(--c-amber-tint) !important; color:var(--c-amber-deep) !important; }

/* cards / panels / paper → dark glass with a cool hairline + soft glow.
   NB: no per-card backdrop-filter — dozens of blur layers over the WebGL canvas
   tank performance (and headless capture). The surface alpha gives the glass read. */
.card,.card-paper,.panel,.stitched,.feature-card,.world-card,.spec-card,.tile,
.surface,.box,[class*="-card"],[class*="card-"]{
  background:rgba(17,25,43,0.78) !important;
  border:1px solid var(--c-line-strong) !important;
  box-shadow:var(--shadow-card) !important;
  background-image:none !important; }

/* buttons — amber glows on dark; ghost gains a cool outline */
.btn-amber{ box-shadow:0 0 0 1px rgba(247,168,54,0.35),0 10px 26px -10px rgba(247,168,54,0.55) !important; }
.btn-ghost{ color:var(--c-ink) !important;
  border:1px solid var(--c-line-strong) !important; background:rgba(170,200,255,0.04) !important; }
.btn-ghost:hover{ background:rgba(170,200,255,0.10) !important; }

/* the old "dark tech band" was navy on paper — on space, float it as a glassy inset */
.band-dark{ background:rgba(6,10,20,0.55) !important;
  border:1px solid var(--c-line) !important; border-radius:var(--r-5); }

/* footer → deep space */
.site-footer{ background:transparent !important; border-top:1px solid var(--c-line) !important; }
.footer-copy,.footer-copy a{ color:var(--c-ink-3) !important; }

/* integration logos are mostly dark/mono → lift them to read on space, color on hover */
.marquee-track img,.marquee-strip .marquee-track img{
  filter:grayscale(1) brightness(0) invert(1) opacity(0.68); }
.marquee-track img:hover,.marquee-strip .marquee-track img:hover{
  filter:none !important; opacity:1 !important; }

/* links */
a{ color:var(--c-amber-deep); }  a:hover{ color:var(--c-amber); }

/* eyebrow accent line → cyan */
.eyebrow-row::before{ background:var(--c-amber) !important; }

/* center the built-with ingredient logos vertically with their heading + numbers
   (was align-items:flex-start, pinning logos to the top so they looked detached) */
.bw-summary-inner{ align-items:center !important; }
.bw-summary-inner .logo{ align-self:center !important; }
.receipt .receipt-head{ align-items:center; }
.receipt .receipt-head img.logo{ align-self:center; }
.marquee-track,.marquee-track > *{ align-items:center; }

/* ===== ROUND 2 owner feedback ===== */
/* sprites: Pops (~210px) is the minimum size everywhere; bring the small ones up
   (don't distort — max-height only, width auto). */
.lc-sprite{ max-height:210px !important; align-self:center; }
.feature-card .lc-sprite{ max-height:120px !important; align-self:flex-start; }  /* narrow 3-col cards */
.sub-sprite,.paired.has-sprite .sub-sprite{ max-height:200px !important; }
.final-sprite-strip{ flex-wrap:wrap !important; justify-content:center; gap:10px 6px; }
.final-sprite-strip img,.final-sprite-strip .bob{ max-height:190px !important; height:auto !important; width:auto !important; }

/* voice-chip: keep the mic on the LEFT but shrink the pill to its content so it
   isn't a wide bar with empty space on the right (looked uneven/too-far-left). */
.voice-chip{ width:fit-content !important; max-width:100%; }

/* bands/cards breathe — text shouldn't kiss the border */
.band-dark{ padding:36px 46px !important; }

/* the linked-hubs image in the "hubs talk to hubs" band — right side, centered;
   text already capped at max-width:680px so they don't collide. Stacks on mobile. */
.hubs-link-img{ position:absolute; right:22px; top:50%; transform:translateY(-50%);
  width:min(40%,320px); height:auto; pointer-events:none;
  filter:drop-shadow(0 0 40px rgba(125,255,213,0.18)); }
@media (max-width:880px){
  .hubs-link-img{ position:static; transform:none; width:220px; margin:18px auto 0; align-self:center; }
}

/* in a centered hero section (e.g. built-with), block children with their own
   max-width + margin:0 (the .lead, chip-mono) sat LEFT while the h1/chips centered.
   Center those blocks so the whole stack lines up. */
section.wrap[style*="text-align:center"] .lead,
section.wrap[style*="text-align:center"] > p,
section.wrap[style*="text-align:center"] .chip-mono{
  margin-left:auto !important; margin-right:auto !important; }

/* the crew-on-deck hero frame → cosmic edge + glow instead of warm paper */
.scene-frame{ border:1px solid var(--c-line-strong) !important;
  box-shadow:var(--shadow-lift), 0 0 70px -22px rgba(125,255,213,0.28) !important; }

/* ---- stragglers that hardcode warm-paper values ---- */
/* sticky prev/next bar */
.prevnext{ background:rgba(8,13,24,0.55) !important; border-top:1px solid var(--c-line) !important;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pn-link{ color:var(--c-ink) !important; }
.pn-link:hover{ background:rgba(170,200,255,0.08) !important; }
.pn-link .pn-mini{ color:var(--c-ink-3) !important; }

/* chips: give a dark-appropriate surface + border, but DON'T force the text color —
   semantic chips carry their own (now-brightened) hue inline, and the block info-bubble
   variants carry light ink inline. Forcing color is what flattened them. */
.chip-mono{ background:rgba(125,255,213,0.05) !important; border-color:var(--c-line-strong) !important; }
.chip-mono[style*="block"]{ background:var(--c-surface) !important; color:var(--c-ink) !important;
  margin-left:auto !important; margin-right:auto !important; text-align:center; }
.chip-mono code{ color:var(--c-cyan) !important; }

/* model chips were pastel-on-paper → translucent tints on space (ollama already dark) */
.model-card.claude{ background:rgba(247,168,54,0.16) !important; color:#ffcf8f !important; }
.model-card.codex { background:rgba(79,214,169,0.16) !important; color:#8ff0c8 !important; }
.model-card.pi    { background:rgba(180,114,240,0.18) !important; color:#d9b6ff !important; }

/* ---- feature-card heading was starved by the perched sprite in 3-col cards ---- */
.feature-card .lc-head{ gap:12px !important; align-items:flex-start; }
.feature-card .lc-headings{ flex:1 1 auto !important; min-width:0; }
.feature-card .lc-sprite{ flex:0 0 auto !important; max-height:60px !important; }
.feature-card .num{ white-space:normal; }
.feature-card h3{ font-size:1.08rem; line-height:1.28; }

/* ---- BREATHING ROOM — the type swap collapsed the rhythm; nothing should touch.
   Force a uniform generous gap on every content section (marquees + dark bands keep
   their own spacing). This overrides the inline padding-top:0 / tight paddings that
   made sections butt into each other. ---- */
main > section:not(.marquee-strip):not(.marquee-strip-top):not(.marquee-strip-bot){
  padding-top:38px !important; padding-bottom:38px !important; }
.band-dark{ padding:34px !important; margin:8px 0 !important; }
.leash-line{ text-align:center; max-width:820px; margin:30px auto !important; }
.win-grid,.how-grid,.card-grid,.screen-caption-grid{ margin-top:30px !important; }
/* the win-cards + step cards: clear gaps, dark glass, readable */
.win-card{ background:rgba(17,25,43,0.78) !important; border:1px solid var(--c-line-strong) !important;
  border-radius:14px; }
.win-card .win-title{ color:var(--c-ink) !important; }
.win-card .win-num{ color:var(--c-amber-deep) !important; }
/* the closing pillar card was kissing the section above it */
section.wrap-md{ padding-top:44px !important; padding-bottom:44px !important; }
section.wrap-md > .card-paper.stitched{ margin-top:18px; }
/* any card directly opening a section gets a little air from the heading above it */
.card-grid > .card-paper, .card-grid > .card{ margin-top:2px; }

/* ===== ROUND 3 — lift the dark ingredient marks off the starfield =====
   MCP / Ollama / Whisper / Pi render as solid-black SVGs (currentColor in an
   <img> = black). On the busy starfield their edges get camouflaged by the
   star dots. We keep the black fill AND the stars — instead we wrap each mark
   in a luminous rim so it sits in its own pocket of light:
     • two tight white halos hug the silhouette → carve a clean glowing edge
       out of the noise (this is what makes a black mark pop on dark);
     • two wider cool auras → premium constellation glow.
   Color is never touched (no invert, no recolor); the already-bright logos
   just gain a faint, consistent aura. */
.bw-summary-inner img.logo{
  filter:
    drop-shadow(0 0 1px  rgba(255,255,255,0.95))
    drop-shadow(0 0 2.5px rgba(255,255,255,0.85))
    drop-shadow(0 0 11px rgba(170,205,255,0.50))
    drop-shadow(0 0 26px rgba(125,255,213,0.32));
  transition:filter .18s ease;
}
.bw-card[open] > summary .bw-summary-inner img.logo,
.bw-summary-inner:hover img.logo{
  filter:
    drop-shadow(0 0 1.5px rgba(255,255,255,1))
    drop-shadow(0 0 3px  rgba(255,255,255,0.95))
    drop-shadow(0 0 14px rgba(170,205,255,0.62))
    drop-shadow(0 0 32px rgba(125,255,213,0.42));
}