/* ============================================================
   Rootcomputer — core stylesheet
   ---------------------------------------------------

/* ================= 1. FONTS ================= */

@font-face {
  font-family: "Rootcomputer";
  src: url("fonts/Quantify.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ================= 2. DESIGN TOKENS ================= */

:root {
  /* Surface */
  --bg: #050505;
  --bg-raised: #0a0a0b;
  --surface: rgba(255, 255, 255, 0.018);
  --surface-hover: rgba(255, 255, 255, 0.04);

  /* Text */
  --text-primary: #ededed;
  --text-secondary: rgba(255, 255, 255, 0.74);
  --text-muted: #9a9a9a;
  --text-faint: rgba(255, 255, 255, 0.45);

  /* Lines */
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.18);

  /* Accent — derived from the existing beta-badge blue */
  --accent: rgba(150, 220, 255, 0.95);
  --accent-dim: rgba(120, 210, 255, 0.35);
  --accent-wash: rgba(80, 180, 220, 0.12);

  /* Type */
  --font-display: "Rootcomputer", Inter, system-ui, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --step-hero: clamp(2.8rem, 6vw, 5.2rem);
  --step-title: clamp(1.6rem, 2.6vw, 2.1rem);
  --step-lead: clamp(1.2rem, 1.9vw, 1.45rem);
  --step-body: clamp(1rem, 1.1vw, 1.05rem);
  --step-small: 0.9rem;
  --step-label: 0.7rem;

  /* Layout */
  --max-width: 1100px;
  --side-padding: clamp(1.5rem, 4vw, 4rem);
  --section-gap: clamp(5rem, 11vh, 8.5rem);
  --header-height: 68px;
  --radius: 10px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ================= 3. BASE + RESET ================= */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  user-select: none;
}

/* Note: `height:100%` + `overflow-x:hidden` on <body> turns the body into its
   own scroll container, which breaks #anchor links and window scroll events.
   Clipping on <html> only keeps the document as the scroller. */
html {
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Chrome (nav, badges, labels) stays unselectable; prose does not. */
.site-header,
.model-badge,
.eyebrow,
.loader-inner,
.footer-title {
  user-select: none;
}

::selection {
  background: rgba(255, 255, 255, 0.15);
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a,
a:visited,
a:hover,
a:active,
a:focus {
  text-decoration: none;
  color: inherit;
  outline: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-dim);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Anchor targets clear the fixed header */
[id] {
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--side-padding);
  z-index: 10000;
  padding: 0.75rem 1.1rem;
  background: var(--bg-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  font-size: var(--step-small);
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================= 4. SCROLLBAR ================= */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.6);
  transition: background-color 0.2s var(--ease);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

/* ================= 5. LOADER ================= */

/* The reveal animates opacity on #app and the slight rise on <main> only.
   A transform on #app would create a containing block and break the
   position:fixed header. */
.app-hidden {
  opacity: 0;
  transition: opacity 700ms var(--ease);
}

.app-visible {
  opacity: 1;
}

#app > main {
  transition: transform 700ms var(--ease);
}

.app-hidden > main {
  transform: translateY(6px);
}

.app-visible > main {
  transform: none;
}

#siteLoader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(
    1200px 800px at 50% 40%,
    rgba(255, 255, 255, 0.06),
    rgba(5, 5, 5, 1) 55%
  );
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: opacity 650ms var(--ease), visibility 650ms var(--ease);
  opacity: 1;
  visibility: visible;
}

#siteLoader::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.04), transparent 45%),
    radial-gradient(circle at 45% 80%, rgba(255, 255, 255, 0.03), transparent 55%);
  filter: blur(18px);
  opacity: 0.85;
  animation: loaderFloat 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes loaderFloat {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1.02);
  }
  50% {
    transform: translate3d(2%, 1.5%, 0) scale(1.04);
  }
  100% {
    transform: translate3d(-2%, -1%, 0) scale(1.02);
  }
}

#siteLoader.loader-out {
  opacity: 0;
  visibility: hidden;
}

.loader-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  padding: 28px 26px;
}

.loader-title {
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.92);
}

.loader-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.loader-svg {
  display: block;
}

.spin {
  transform-origin: 60px 60px;
  animation: spin 1.35s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.orbit {
  transform-origin: 60px 60px;
  animation: orbit 1.05s ease-in-out infinite alternate;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) scale(0.98);
    opacity: 0.75;
  }
  to {
    transform: rotate(65deg) scale(1.03);
    opacity: 1;
  }
}

/* ================= 6. SITE HEADER ================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
}

.site-header.is-scrolled,
.site-header.menu-open {
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--hairline);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.header-mark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  transition: opacity 0.25s var(--ease);
  flex-shrink: 0;
}

.header-mark:hover {
  opacity: 0.7;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.header-link {
  position: relative;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}

.header-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.header-link:hover {
  color: var(--text-primary);
}

.header-link:hover::after {
  transform: scaleX(1);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease),
    color 0.25s var(--ease);
}

.header-cta:hover {
  color: #fff;
  border-color: var(--accent-dim);
  background: var(--accent-wash);
}

@media (max-width: 1080px) {
  .header-nav {
    gap: 1.25rem;
  }
  .header-link {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
}

/* Menu toggle — hidden on desktop, revealed at narrow widths */
.header-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.header-toggle:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.header-toggle svg {
  width: 16px;
  height: 16px;
}

.header-toggle .icon-close,
.header-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.header-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

@media (max-width: 940px) {
  .header-inner {
    gap: 0.75rem;
  }

  .header-toggle {
    display: inline-flex;
    order: 3;
    flex-shrink: 0;
  }

  .header-cta {
    order: 2;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Nav becomes a panel dropping out of the header bar */
  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--side-padding);
    background: rgba(5, 5, 5, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.35s var(--ease), visibility 0.35s var(--ease);
  }

  .header-nav.is-open {
    max-height: 60vh;
    visibility: visible;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
  }

  .header-link {
    padding: 0.85rem 0;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--hairline);
  }

  .header-link:last-child {
    border-bottom: none;
  }

  /* The underline sweep is a pointer affordance; drop it in the panel */
  .header-link::after {
    display: none;
  }
}

/* Sub-380px: the wordmark yields so the CTA and menu button keep their size.
   Without this the toggle gets flex-shrunk to a few pixels wide. */
@media (max-width: 380px) {
  .header-mark {
    font-size: 1rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-cta {
    font-size: 0.68rem;
    padding: 0.5rem 0.65rem;
  }
}

/* Narrow phones: the wordmark and CTA were nearly colliding */
@media (max-width: 430px) {
  .header-mark {
    font-size: 1.1rem;
  }

  .header-cta {
    font-size: 0.72rem;
    padding: 0.55rem 0.75rem;
  }
}

/* ================= 7. HERO ================= */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#neuralCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Scrim: keeps type legible over the animated canvas */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
      to right,
      rgba(5, 5, 5, 0.82) 0%,
      rgba(5, 5, 5, 0.35) 45%,
      rgba(5, 5, 5, 0) 75%
    ),
    linear-gradient(to bottom, rgba(5, 5, 5, 0.6) 0%, rgba(5, 5, 5, 0) 25%),
    linear-gradient(to top, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0) 30%);
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--hairline-strong);
}

/* Announcement pill — occupies the old eyebrow slot with a live link */
.hero-announce {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.9rem;
  padding: 0.45rem 0.95rem 0.45rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease),
    color 0.25s var(--ease);
}

.hero-announce:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-hover);
  color: #fff;
}

.hero-announce-tag {
  padding-right: 0.65rem;
  border-right: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-announce-arrow {
  color: var(--text-faint);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.hero-announce:hover .hero-announce-arrow {
  transform: translateX(3px);
  color: inherit;
}

.hero h1 {
  font-family: "Inter", Inter, arial, system;
  font-size: var(--step-hero);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

.hero-lead {
  margin-top: 1.6rem;
  font-size: var(--step-lead);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn-primary {
  background: rgba(255, 255, 255, 0.95);
  color: #050505 !important;
}

.btn-primary:hover {
  background: #fff;
  transform: translateY(-2px);
}

.btn-ghost {
  border-color: var(--hairline-strong);
  color: var(--text-secondary);
}

.btn-ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

.hero-scroll::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scaleY(0.7);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media (max-width: 768px) {
  /* Sized to content — a fixed viewport height left a large empty band
     between the buttons and the next section. */
  .hero {
    height: auto;
    min-height: 0;
    padding: calc(var(--header-height) + 4.5rem) 0 4.5rem;
  }

  .hero-content {
    height: auto;
  }

  .hero-scroll {
    display: none;
  }

  .hero-announce {
    margin-bottom: 1.5rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
}

/* Stronger scrim below tablet: the type spans the full width here, so the
   left-weighted desktop gradient no longer covers it. */
@media (max-width: 760px) {
  .hero::after {
    background: linear-gradient(
      to bottom,
      rgba(5, 5, 5, 0.55) 0%,
      rgba(5, 5, 5, 0.75) 45%,
      rgba(5, 5, 5, 0.55) 70%,
      rgba(5, 5, 5, 0.92) 100%
    );
  }
}

/* ================= 8. SECTION SYSTEM ================= */

section {
  margin: var(--section-gap) 0;
  z-index: 2;
  position: relative;
  background: transparent;
  overflow: visible;
}

section:not(.hero):not(.sub-hero):not(.visual-band) {
  margin: var(--section-gap) 0;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

/* Small tracked label used to head every section */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Two-column editorial layout: label rail + content */
.section-split {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.section-rail {
  position: sticky;
  top: calc(var(--header-height) + 2.5rem);
  padding-top: 0.35rem;
}

.section-rail .eyebrow {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}

/* The rail carries the section title, so the content column never repeats it */
.rail-heading {
  margin: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (max-width: 800px) {
  .section-split {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .section-rail {
    position: static;
  }
}

h1 {
  font-family: var(--font-display);
  font-size: var(--step-hero);
  font-weight: 200;
  letter-spacing: -0.02em;
  margin: 0;
}

h2 {
  font-size: var(--step-title);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 1.5rem;
}

p {
  font-size: var(--step-body);
  max-width: 70ch;
}

.lead {
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--text-primary);
  margin-top: 0;
}

.body-text {
  color: var(--text-muted);
}

.research-more {
  margin-top: 2rem;
}

.inline-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0;
  gap: 0.45rem;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}

.inline-link:hover {
  color: #fff;
  gap: 0.75rem;
}

/* ================= 9. FEATURED SHOWCASE ================= */

.featured-showcase {
  margin-top: clamp(3rem, 7vh, 5rem) !important;
}

.featured-eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
}

.featured-section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.featured-section-link {
  display: inline-block;
  padding: 0.3rem 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  transition: color 0.25s var(--ease);
}

.featured-section-link:hover {
  color: rgba(255, 255, 255, 0.92);
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.featured-card {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease),
    background 0.35s var(--ease);
  color: inherit;
}

.featured-card:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-hover);
  transform: translateY(-4px);
}

.featured-image-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #050505;
}

.featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease);
}

.featured-card:hover .featured-image {
  transform: scale(1.03);
}

.featured-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem 1.25rem;
  border-top: 1px solid var(--hairline);
}

.featured-meta-left {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.featured-name {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.95);
}

.featured-spec {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.featured-cta {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.featured-card:hover .featured-cta {
  color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 760px) {
  .featured-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .featured-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

/* ================= 10. RESEARCH LIST ================= */

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
}

.research-list li {
  padding: 1.05rem 0;
  font-size: var(--step-small);
  color: var(--text-secondary);
  transition: color 0.25s var(--ease), padding-left 0.3s var(--ease);
}

.research-list li:first-child {
  padding-top: 0;
}

.research-list li:hover {
  color: var(--text-primary);
  padding-left: 0.5rem;
}

.research-list li:last-child {
  border-bottom: none;
}

/* ================= 11. MODELS ================= */

/* Legacy single-column model rows (kept for other pages) */
.model {
  position: relative;
  margin-bottom: 3rem;
  transition: transform 0.3s var(--ease);
}

.model:hover {
  transform: translateX(6px);
}

.model span {
  font-weight: 500;
  letter-spacing: 0.03em;
}

.model p {
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Homepage model grid */
.model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.model-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.6rem 1.6rem 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease),
    transform 0.35s var(--ease);
}

.model-card:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-hover);
  transform: translateY(-4px);
}

.model-card-name {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.96);
}

.model-card-desc {
  flex: 1;
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: none;
}

.model-card-cta {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  transition: color 0.25s var(--ease);
}

.model-card:hover .model-card-cta {
  color: rgba(255, 255, 255, 0.95);
}

/* Badge */
.model-badge {
  position: absolute;
  top: 0.25rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.85;
}

/* Inside a card the badge sits inline, not absolute */
.model-card .model-badge {
  position: static;
  align-self: flex-start;
  opacity: 1;
}

.model-badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.model-badge.beta {
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-dim);
}

.model-badge.research {
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline);
}

.model:hover .model-badge {
  opacity: 1;
}

.model-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.model-cta-row .model-badge {
  margin-left: 0 !important;
  float: none !important;
  position: static !important;
}

.model-action {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--hairline-strong);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.model-action:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 760px) {
  .model-grid {
    grid-template-columns: 1fr;
  }
  .model:hover {
    transform: none;
  }
  .model-card:hover {
    transform: none;
  }
}

/* ================= 12. LEGACY VISUAL BLOCKS ================= */

.model-cover {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  height: 260px;
  margin-bottom: -140px;
  overflow: hidden;
  pointer-events: none;
  z-index: -10;
}

.model-cover-image {
  position: absolute;
  inset: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 1200px auto;
  filter: brightness(0.9);
}

.model-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to right,
      rgba(5, 5, 5, 1) 0%,
      rgba(5, 5, 5, 0) 18%,
      rgba(5, 5, 5, 0) 82%,
      rgba(5, 5, 5, 1) 100%
    ),
    linear-gradient(to bottom, rgba(5, 5, 5, 0) 0%, rgba(5, 5, 5, 0.6) 65%, rgba(5, 5, 5, 1) 100%);
}

.visual-band {
  height: min(80vh, 900px);
  position: relative;
  overflow: hidden;
}

.visual-layer {
  position: absolute;
  inset: -15%;
  background: url("neural_volume.jpg") center / cover no-repeat;
  filter: brightness(0.3);
  will-change: transform;
}

.neural-lab {
  position: relative;
  height: min(90vh, 900px);
  overflow: visible;
  z-index: 1;
  margin-bottom: 0 !important;
}

#labCanvas {
  position: absolute;
  left: 0;
  top: -45vh;
  width: 100%;
  height: calc(100% + 90vh);
  pointer-events: auto;
  background: transparent;
  z-index: 0;
}

.lab-overlay {
  position: relative;
  z-index: 2;
}

.neural-lab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -45vh;
  height: calc(100% + 90vh);
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 5, 1) 0%,
    rgba(5, 5, 5, 0) 18%,
    rgba(5, 5, 5, 0) 82%,
    rgba(5, 5, 5, 1) 100%
  );
}

/* ================= 13. FOOTER DIRECTORY ================= */

footer {
  padding: 0;
  color: var(--text-muted);
  position: relative;
  z-index: 3;
  background: transparent;
}

.site-footer {
  margin-top: var(--section-gap);
  padding: 4rem 0 2.5rem;
  border-top: 1px solid var(--hairline);
  position: relative;
  z-index: 3;
  background: transparent;
  text-align: left;
}

.site-footer li {
  padding: 0;
  border-bottom: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-title {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 1.1rem;
}

.footer-title a {
  display: inline-block;
  padding: 0.3rem 0;
  transition: color 0.25s var(--ease);
}

.footer-title a:hover {
  color: #fff;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 0.15rem;
}

/* Padding (not margin) so the tap target grows, not just the gap */
.footer-list a {
  display: inline-block;
  padding: 0.35rem 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s var(--ease);
}

.footer-list a:hover {
  color: #fff;
}

.footer-muted {
  font-size: var(--step-small);
  color: var(--text-faint);
}

/* The rule sits on the inner wrapper so it aligns with the column text
   rather than with the outer container padding. */
.footer-bottom {
  max-width: var(--max-width);
  margin: 3.5rem auto 0;
  padding: 0 var(--side-padding);
}

.footer-bottom-inner {
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.82rem;
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
}

@media (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 1.5rem;
  }
}

/* Keep two columns on phones — seven stacked columns is a long scroll */
@media (max-width: 380px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom-inner {
    justify-content: flex-start;
  }
}

/* Comfortable touch targets on small screens */
@media (max-width: 720px) {
  .footer-list a,
  .inline-link,
  .featured-section-link {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  /* Heading links use a smaller face, so they need a little more */
  .footer-title a {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  .header-toggle {
    width: 42px;
    height: 42px;
  }

  .header-cta {
    padding: 0.6rem 1rem;
  }

  .header-mark {
    padding: 0.3rem 0;
  }
}

/* ================= 14. FOOTER BRANDING ================= */

.footer-branding {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 3rem 0 4rem;
  background: transparent;
}

.branding-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 3rem;
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.5s var(--ease);
}

.brand-logo:hover {
  opacity: 0.9;
}

.brand-logo svg {
  max-width: 100%;
  height: auto;
}

.brand-logo.rootcomputer svg {
  max-width: 260px;
}

@media (max-width: 700px) {
  .branding-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .brand-logo {
    justify-content: center;
  }
  .brand-logo svg {
    max-width: 220px;
  }
}

/* ================= 15. SUB PAGES ================= */

.sub-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}

.sub-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.sub-logo-mark {
  font-family: var(--font-display);
  font-size: 2rem;
  opacity: 0.9;
}

.sub-nav {
  display: flex;
  gap: 2rem;
}

.sub-nav-link {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.25s var(--ease);
}

.sub-nav-link:hover {
  opacity: 1;
}

.page-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 0.5rem;
}

@media (max-width: 640px) {
  .sub-header-inner {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: unset;
    padding: 0.75rem 0;
    gap: 0.5rem;
  }
  .sub-nav {
    justify-content: center;
    gap: 1.25rem;
  }
  .sub-logo-mark {
    font-size: 1.5rem;
  }
}

.sub-hero {
  margin-top: 0;
  padding-top: clamp(4rem, 10vh, 7rem);
}

.sub-title {
  font-family: var(--font-sans) !important;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.sub-lead {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.3vw, 1.15rem);
  color: var(--text-muted);
  max-width: 70ch;
}

/* ================= 16. SOURCE ARCHIVE ================= */

.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
}

.source-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
    border-color 0.35s var(--ease);
  max-width: 500px;
}

.source-card:hover {
  transform: translateY(-6px);
  background: var(--surface-hover);
  border-color: var(--hairline-strong);
}

.source-card.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.source-icon {
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.75);
}

.source-meta {
  display: flex;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}

.source-meta .beta {
  color: var(--accent);
}

.source-card h3 {
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0;
}

.source-card p {
  font-size: var(--step-small);
  color: var(--text-muted);
}

.terminal-cursor {
  display: inline-block;
  transition: opacity 0.1s var(--ease);
}

.terminal-cursor.pulse {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ================= 17. MOTION PREFERENCES ================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .spin,
  .orbit,
  #siteLoader::before,
  .hero-scroll::after {
    animation: none !important;
  }
  .featured-card:hover,
  .model-card:hover,
  .source-card:hover,
  .btn:hover {
    transform: none;
  }
}

/* ================= 18. PARTNERSHIP PAGE ================= */

/* Standard interior-page hero: clears the fixed header, no canvas */
.page-hero {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: calc(var(--header-height) + clamp(3.5rem, 9vh, 6rem)) 0
    clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--hairline);
}

.page-hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.page-hero .sub-lead {
  margin-top: 1.4rem;
  font-size: var(--step-lead);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 54ch;
}

/* Two-brand lockup */
.partner-lockup {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 3vw, 2rem);
  margin-bottom: clamp(2rem, 5vh, 3rem);
}

.partner-lockup-word {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.partner-lockup-logo {
  width: clamp(76px, 11vw, 118px);
  height: clamp(76px, 11vw, 118px);
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.92);
}

.partner-lockup-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* The join between the two marks */
.partner-lockup-x {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  color: var(--text-faint);
  flex-shrink: 0;
}

/* Non-interactive cards reuse .model-card but shouldn't lift on hover */
.model-card.is-static {
  cursor: default;
}

.model-card.is-static:hover {
  transform: none;
  border-color: var(--hairline);
  background: var(--surface);
}

/* Small mono label inside a static card */
.card-label {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Key-value spec rows */
.spec-list {
  border-top: 1px solid var(--hairline);
  margin-top: 2rem;
}

.spec-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--hairline);
}

.spec-list dt {
  flex: 0 0 clamp(120px, 24%, 190px);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 0.2rem;
}

.spec-list dd {
  flex: 1 1 260px;
  margin: 0;
  font-size: var(--step-small);
  color: var(--text-secondary);
}

/* Closing call-to-action band */
.page-cta {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(2.5rem, 6vh, 4rem);
}

.page-cta h2 {
  margin-bottom: 1rem;
}

.page-cta p {
  color: var(--text-muted);
  margin-top: 0;
}

@media (max-width: 640px) {
  .partner-lockup {
    gap: 1rem;
  }

  .spec-list dt {
    flex: 1 1 100%;
  }
}

/* ================= 19. INTERIOR PAGES ================= */

/* Stat strip under an interior hero */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  margin-top: 2rem;
}

.hero-meta span {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero-meta b {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}

.section-divider {
  max-width: var(--max-width);
  margin: var(--section-gap) auto;
  padding: 0 var(--side-padding);
}

.section-divider::after {
  content: "";
  display: block;
  border-top: 1px solid var(--hairline);
}

/* ---------- Status pill ---------- */

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.status-pill.is-new {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-wash);
}

/* ---------- Tag row ---------- */

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.tag-row li {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ---------- Application card (software page) ---------- */

.app-list {
  display: grid;
  gap: 1.25rem;
}

.app-card {
  display: block;
  padding: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.app-card:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-hover);
  transform: translateY(-3px);
}

.app-card-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.app-card-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  object-fit: cover;
}

.app-card-headtext {
  flex: 1;
  min-width: 0;
}

.app-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.96);
}

.app-card-sub {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.app-card-desc {
  margin: 1.1rem 0 0;
  max-width: 70ch;
  font-size: var(--step-small);
  line-height: 1.65;
  color: var(--text-muted);
}

.app-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.app-card-cta {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-secondary);
  transition: color 0.25s var(--ease);
}

.app-card:hover .app-card-cta {
  color: #fff;
}

/* ---------- Article card (press page) ---------- */

.article-grid {
  display: grid;
  /* min() lets the track shrink below 300px — a bare minmax(300px, 1fr)
     overflows a 320px viewport. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

.article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  color: inherit;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.article-card:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-hover);
  transform: translateY(-4px);
}

.article-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--hairline);
}

.article-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.article-card:hover .article-media img {
  transform: scale(1.03);
}

.article-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.7rem;
  padding: 1.4rem 1.5rem 1.5rem;
}

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.article-meta .article-type {
  color: var(--text-secondary);
}

.article-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.96);
}

.article-excerpt {
  flex: 1;
  margin: 0;
  max-width: none;
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--text-muted);
}

.article-cta {
  font-size: 0.8rem;
  color: var(--text-faint);
  transition: color 0.25s var(--ease);
}

.article-card:hover .article-cta {
  color: rgba(255, 255, 255, 0.95);
}

/* ---------- Source archive meta labels ---------- */

.source-type,
.source-status {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.source-status {
  color: var(--text-faint);
}

.source-card h3 svg {
  display: inline;
  width: 14px;
  height: 14px;
  margin-left: 0.35rem;
  vertical-align: -1px;
  opacity: 0.55;
}

/* Prose lists inside interior content columns */
.prose-list li {
  padding: 0.85rem 0;
  font-size: var(--step-small);
  color: var(--text-secondary);
}

.prose-list li:first-child {
  padding-top: 0;
}

.prose-list li:last-child {
  border-bottom: none;
}

@media (max-width: 560px) {
  .app-card-head {
    align-items: flex-start;
  }

  .app-card-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

/* ================= 20. BENCHMARKS ================= */

/* Hairline-separated cell grid (1px gaps show the background through) */
.cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin-top: 1.75rem;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.cell {
  padding: 1.25rem 1.35rem;
  background: var(--bg);
}

.cell-title {
  margin-bottom: 0.45rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.96);
}

.cell-text {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------- Benchmark card ---------- */

.bench-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.bench-card {
  display: block;
  padding: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
    transform 0.3s var(--ease);
}

/* Not a link as a whole (it contains links), so no lift — just a lit border */
.bench-card:hover,
.bench-card:focus-within {
  border-color: var(--hairline-strong);
  background: var(--surface-hover);
}

.bench-title a:hover {
  color: #fff;
}

.bench-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bench-title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.96);
}

.bench-sub {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.bench-desc {
  margin: 1.1rem 0 0;
  max-width: 70ch;
  font-size: var(--step-small);
  line-height: 1.65;
  color: var(--text-muted);
}

/* Stat strip reuses the hairline-gap treatment */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  margin: 1.4rem 0 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat {
  padding: 0.9rem 1rem;
  background: var(--bg);
}

.stat-num {
  margin-bottom: 0.3rem;
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.bench-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.bench-cta {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-secondary);
  transition: color 0.25s var(--ease);
}

.bench-card:hover .bench-cta {
  color: #fff;
}

/* ---------- Dash-marker list ---------- */

.dash-list {
  margin-top: 1.5rem;
}

.dash-list li {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.5rem;
  font-size: var(--step-small);
  line-height: 1.65;
  color: var(--text-muted);
}

.dash-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.65rem;
  width: 12px;
  height: 1px;
  background: var(--hairline-strong);
}

.dash-list li:last-child {
  border-bottom: none;
}

.dash-list strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

/* Inline link inside body copy */
.body-text a,
.bench-foot a {
  color: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--hairline-strong);
  transition: border-color 0.25s var(--ease);
}

.body-text a:hover,
.bench-foot a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* Comfortable tap targets for the links inside benchmark cards */
@media (max-width: 720px) {
  .bench-title a,
  .bench-cta,
  .bench-foot a,
  .body-text a {
    display: inline-block;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  .bench-title a {
    padding-top: 0;
    padding-bottom: 0.9rem;
  }
}

@media (max-width: 560px) {
  .bench-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

/* ================= 21. ROADMAP ================= */
 
/* Vertical timeline running through the phase blocks */
.phase-list {
  position: relative;
  margin-top: 1.75rem;
  padding-left: 1.9rem;
}
 
.phase-list::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--hairline-strong),
    var(--hairline) 60%,
    transparent
  );
}
 
.phase {
  position: relative;
  padding-bottom: 2.75rem;
}
 
.phase:last-child {
  padding-bottom: 0;
}
 
/* Node on the timeline */
.phase::before {
  content: "";
  position: absolute;
  left: -1.9rem;
  top: 0.5rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--hairline-strong);
}
 
.phase.is-current::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
 
.phase-marker {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
 
.phase-title {
  margin: 0.5rem 0 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.96);
}
 
.phase-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
 
.phase-col {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
 
.phase-col-label {
  display: block;
  padding-bottom: 0.8rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
 
/* Tighter dash list inside a phase column */
.phase-col .dash-list {
  margin-top: 0.25rem;
}
 
.phase-col .dash-list li {
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-bottom: none;
  font-size: 0.82rem;
  line-height: 1.55;
}
 
.phase-col .dash-list li::before {
  top: 1.35rem;
  width: 9px;
}
 
/* Non-binding notice */
.notice {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.015);
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 70ch;
}
 
@media (max-width: 560px) {
  .phase-list {
    padding-left: 1.4rem;
  }
 
  .phase::before {
    left: -1.4rem;
  }
 
  .phase-cols {
    grid-template-columns: 1fr;
  }
}

/* ================= 22. PRESS INDEX & ARTICLES ================= */

/* ---------- Filter bar ---------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
}

.filter-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
  min-width: 0;
}

.filter-search svg {
  position: absolute;
  left: 0.85rem;
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  pointer-events: none;
}

.filter-search input {
  width: 100%;
  padding: 0.65rem 0.9rem 0.65rem 2.5rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.filter-search input::placeholder {
  color: var(--text-faint);
}

.filter-search input:focus {
  outline: none;
  border-color: var(--hairline-strong);
  background: var(--surface-hover);
}

.filter-search input::-webkit-search-cancel-button {
  filter: invert(1);
  opacity: 0.4;
}

.filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
}

.filter-label {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.chip:hover {
  color: var(--text-primary);
  border-color: var(--hairline-strong);
}

.chip.is-active {
  color: #050505;
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
}

.filter-status {
  margin: -1rem 0 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.filter-status:empty {
  display: none;
}

.empty-state {
  padding: 3rem 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--step-small);
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Cards are hidden via the [hidden] attribute; the grid needs the override */
.article-card[hidden] {
  display: none;
}

/* ---------- Tag pills on cards ---------- */

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.article-tag {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Article page ---------- */

.post-header {
  border-bottom: none;
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.post-header h1 {
  max-width: 22ch;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.post-meta .article-type {
  color: var(--text-secondary);
}

.post-header .article-tags {
  margin-top: 1.5rem;
}

.post-cover {
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
  max-width: 68ch;
}

.post-cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* Reading column */
.post-body {
  max-width: 68ch;
}

.article-prose p {
  margin: 0 0 1.4rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: none;
}

.article-prose h2 {
  margin: 2.75rem 0 1rem;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.96);
}

.article-prose h3 {
  margin: 2.25rem 0 0.9rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}

/* Reset native markers — the prose styles draw their own */
.article-prose ul,
.article-prose ol {
  margin: 0 0 1.6rem;
  padding-left: 0;
  list-style: none;
}

.article-prose li {
  padding: 0.5rem 0;
  border-bottom: none;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.article-prose ul li {
  position: relative;
  padding-left: 1.4rem;
}

.article-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 10px;
  height: 1px;
  background: var(--hairline-strong);
}

.article-prose ol {
  counter-reset: prose-ol;
}

.article-prose ol li {
  position: relative;
  padding-left: 1.9rem;
  counter-increment: prose-ol;
}

.article-prose ol li::before {
  content: counter(prose-ol) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
}

.article-prose strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.article-prose em {
  color: rgba(255, 255, 255, 0.86);
}

.article-prose a {
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--hairline-strong);
  transition: border-color 0.25s var(--ease);
}

.article-prose a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.65);
}

.article-prose blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 2px solid var(--hairline-strong);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.article-prose code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.9);
}

.article-prose pre {
  margin: 0 0 1.6rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
  overflow-x: auto;
}

.article-prose pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.82rem;
  line-height: 1.6;
}

.article-prose img {
  width: 100%;
  height: auto;
  margin: 2rem 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.article-prose hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* Prev / next */
.post-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: clamp(3rem, 7vh, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

.post-nav-link {
  display: block;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.post-nav-link:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-hover);
}

.post-nav-label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.post-nav-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

.post-back {
  margin-top: 2rem;
}

@media (max-width: 720px) {
  .filter-bar {
    gap: 1rem;
  }

  .filter-group {
    width: 100%;
  }

  .chip {
    padding: 0.65rem 0.95rem;
  }

  .filter-search input {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  .hero-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .article-prose p {
    font-size: 0.98rem;
  }
}

/* ================= 23. MODEL CARDS ================= */
 
/* ---------- Showcase card (the /model index) ---------- */
 
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.25rem;
}
 
.showcase-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
 
.showcase-card:hover,
.showcase-card:focus-within {
  border-color: var(--hairline-strong);
  background: var(--surface-hover);
}
 
.showcase-card.is-flagship {
  border-color: var(--accent-dim);
}
 
.showcase-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
 
.showcase-name {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.96);
}
 
.showcase-name a:hover {
  color: #fff;
}
 
.showcase-class {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
 
.showcase-desc {
  margin: 1.1rem 0 0;
  flex: 1;
  max-width: none;
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--text-muted);
}
 
/* Key/value rows inside a showcase card */
.showcase-specs {
  margin: 1.35rem 0 0;
  border-top: 1px solid var(--hairline);
}
 
.showcase-specs div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}
 
.showcase-specs dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
 
.showcase-specs dd {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: right;
}
 
.showcase-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}
 
/* ---------- Model card document ---------- */
 
.model-section {
  margin-top: clamp(2.75rem, 6vh, 3.75rem);
}
 
.model-section .eyebrow {
  margin-bottom: 1rem;
}
 
.model-section h2 {
  margin-bottom: 0.9rem;
}
 
.lede {
  margin: 0 0 1.1rem;
  max-width: 72ch;
  font-size: var(--step-small);
  line-height: 1.75;
  color: var(--text-muted);
}
 
.lede strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}
 
.lede em {
  color: rgba(255, 255, 255, 0.78);
}
 
.lede a,
.prose-list a,
.table-caption a,
.figure-cap a {
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--hairline-strong);
  transition: border-color 0.25s var(--ease);
}
 
.lede a:hover,
.prose-list a:hover,
.table-caption a:hover,
.figure-cap a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}
 
.rule {
  margin: clamp(2.5rem, 6vh, 3.5rem) 0;
  border-top: 1px solid var(--hairline);
}
 
/* ---------- Takeaway figures ---------- */
 
.takeaway-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1px;
  margin: 1.75rem 0 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
 
.takeaway {
  padding: 1.2rem 1.25rem;
  background: var(--bg);
}
 
.takeaway-num {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}
 
.takeaway-label {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}
 
/* ---------- Training pipeline ---------- */
 
.pipeline {
  display: grid;
  gap: 1px;
  margin-top: 1.75rem;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
 
.pipe {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.25rem 1.35rem;
  background: var(--bg);
}
 
.pipe-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding-top: 0.15rem;
}
 
.pipe-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}
 
.pipe-status {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
 
.pipe-text {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
}
 
/* ---------- Data tables ---------- */
 
.table-wrap {
  margin-top: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow-x: auto;
}
 
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
 
.data-table th,
.data-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
 
.data-table th {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.02);
}
 
.data-table td {
  color: var(--text-secondary);
}
 
.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
 
.data-table tbody tr:last-child td {
  border-bottom: none;
}
 
.data-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
 
/* Highlight the row for the model this card is about */
.data-table .row-mine td {
  color: #fff;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.045);
}
 
.data-table .row-weak td {
  color: var(--text-faint);
}
 
.table-caption {
  margin-top: 0.9rem;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 80ch;
}
 
/* Inline proportion bar inside a table cell */
.inline-bar {
  display: inline-block;
  width: 54px;
  height: 3px;
  margin-left: 0.6rem;
  vertical-align: middle;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
 
.inline-bar i {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, 0.55);
}
 
/* ---------- Figures ---------- */
 
.figure {
  margin: 1.75rem 0 0;
}
 
.figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
 
.figure-cap {
  margin-top: 0.9rem;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 80ch;
}
 
/* ---------- Downloadable files ---------- */
 
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}
 
.file-card {
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
 
.file-kind {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
 
.file-name {
  margin: 0.5rem 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.95);
}
 
.file-name a {
  border-bottom: 1px solid var(--hairline-strong);
}
 
.file-name a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}
 
.file-desc {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-muted);
}
 
/* ---------- Checkpoint switcher ---------- */
 
.model-switch {
  display: inline-flex;
  gap: 2px;
  margin-top: 1.5rem;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
}
 
.switch-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 38px;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
 
.switch-btn:hover {
  color: var(--text-primary);
}
 
.switch-btn.active {
  background: rgba(255, 255, 255, 0.92);
  color: #050505;
}
 
.switch-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  opacity: 0.65;
}
 
.model-panel {
  display: none;
}
 
.model-panel.active {
  display: block;
}
 
/* ---------- Collapsible detail ---------- */
 
.collapse {
  margin-top: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
 
.collapse > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.1rem 1.35rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.25s var(--ease);
}
 
.collapse > summary::-webkit-details-marker {
  display: none;
}
 
.collapse > summary:hover {
  background: var(--surface-hover);
}
 
.collapse-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}
 
/* Disclosure caret */
.collapse-title::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid var(--text-faint);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.25s var(--ease);
}
 
.collapse[open] .collapse-title::before {
  transform: rotate(90deg);
}
 
.collapse-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
 
.collapse-body {
  padding: 0 1.35rem 1.5rem;
  border-top: 1px solid var(--hairline);
}
 
.collapse-body > *:first-child {
  margin-top: 1.25rem;
}
 
/* ---------- Hero cover image ---------- */
 
.page-hero.has-cover {
  position: relative;
  overflow: hidden;
}
 
.hero-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  max-height: 567px; /* belt and suspenders bs to keep the image from moving around */
}
 
.hero-cover-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1100px, 94vw);
  height: 520px;
  transform: translate(-50%, -55%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(62% 68% at 50% 40%, #000 0%, #000 32%,
      rgba(0, 0, 0, 0.2) 66%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  mask-image: radial-gradient(62% 68% at 50% 40%, #000 0%, #000 32%,
      rgba(0, 0, 0, 0.2) 66%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}
 
.page-hero.has-cover .container {
  position: relative;
  z-index: 1;
}
 
@media (max-width: 640px) {
  .pipe {
    flex-direction: column;
    gap: 0.5rem;
  }
 
  .model-switch {
    width: 100%;
    justify-content: stretch;
  }
 
  .switch-btn {
    flex: 1;
    justify-content: center;
  }
 
  .data-table th,
  .data-table td {
    padding: 0.6rem 0.75rem;
  }
}
 
/* A grid item's default min-width:auto stops it shrinking below its content,
   so a wide table inside .section-split forced the whole column open. */
.section-split > * {
  min-width: 0;
}
 
@media (max-width: 800px) {
  .section-split {
    grid-template-columns: minmax(0, 1fr);
  }
}
 
@media (max-width: 720px) {
  .showcase-foot .inline-link {
    min-height: 40px;
  }
}
/* ================= 24. HERO SLIDESHOW ================= */

:root {
  /* Slower, heavier easing than the UI default — this is a cinematic move,
     not a control responding to a click. */
  --ease-cinema: cubic-bezier(0.33, 0, 0.12, 1);
  --hero-dwell: 7000ms;
  --hero-fade: 1400ms;
}

.hero-stage {
  position: relative;
  height: 100svh;
  min-height: 480px;
  max-height: 1000px;
  overflow: hidden;
  margin: 0 !important;
  background: #050505;
  isolation: isolate;
}

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  /* visibility is delayed out so the outgoing frame stays composited while it
     fades, but inactive frames cost nothing once the fade completes */
  transition: opacity var(--hero-fade) var(--ease-cinema),
    visibility 0s linear var(--hero-fade);
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity var(--hero-fade) var(--ease-cinema), visibility 0s;
}

/* The outgoing frame stays fully opaque underneath while the incoming one
   fades in on top. A true dissolve (both semi-transparent) lets the black
   page background show through and dips the brightness mid-transition. */
.hero-slide.is-leaving {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* Blurred same-image backdrop. Only used in the letterboxed (portrait) case,
   where the artwork is contained so its baked-in wordmark can't be cropped. */
.hero-slide-fill {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(56px) saturate(130%) brightness(0.42);
  transform: scale(1.12);
}

.hero-slide-inner {
  position: absolute;
  inset: 0;
  transform: scale(1.045);
  transition: transform calc(var(--hero-fade) * 1.25) var(--ease-cinema);
  will-change: transform;
}

.hero-slide.is-active .hero-slide-inner {
  transform: scale(1);
}

.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Wide enough that a cover crop cannot clip the widest wordmark
   ("Research with Epos." needs ~1.03:1; 5:4 leaves room for the drift). */
@media (min-aspect-ratio: 5/4) {
  .hero-slide-img {
    object-fit: cover;
  }

  .hero-slide-fill {
    display: none;
  }

  /* Ken Burns settles *outwards to* the exact cover framing, so the safest
     composition is the one held longest. */
  .hero-slide.is-active .hero-slide-img {
    animation: heroDrift calc(var(--hero-dwell) + var(--hero-fade)) var(--ease-cinema) forwards;
  }
}

@keyframes heroDrift {
  from {
    transform: scale(1.055);
  }
  to {
    transform: scale(1);
  }
}

/* Scrims: top keeps the fixed header legible, bottom carries the controls */
.hero-stage::before,
.hero-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-stage::before {
  top: 0;
  height: 190px;
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.78), rgba(5, 5, 5, 0));
}

.hero-stage::after {
  bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.92) 0%,
      rgba(5, 5, 5, 0.55) 38%, rgba(5, 5, 5, 0) 100%);
}

/* ---------- Overlay controls ---------- */

.hero-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  padding-bottom: clamp(1.75rem, 4vh, 2.75rem);
}

.hero-overlay-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.3s var(--ease);
}

.hero-tag::before {
  content: "";
  width: 26px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  transition: width 0.4s var(--ease-cinema);
}

.hero-tag:hover {
  color: #fff;
}

.hero-tag:hover::before {
  width: 40px;
}

/* Slide indicators double as progress bars for the dwell timer */
.hero-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.hero-dot {
  position: relative;
  width: 54px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.hero-dot-track {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
  transition: background 0.3s var(--ease);
}

.hero-dot:hover .hero-dot-track {
  background: rgba(255, 255, 255, 0.5);
}

.hero-dot-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

/* A completed slide keeps its bar filled until the loop restarts */
.hero-dot.is-done .hero-dot-fill {
  transform: scaleX(1);
}

.hero-dot.is-active .hero-dot-fill {
  animation: heroProgress var(--hero-dwell) linear forwards;
}

.hero-stage.is-paused .hero-dot.is-active .hero-dot-fill {
  animation-play-state: paused;
}

@keyframes heroProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.hero-dot:focus-visible .hero-dot-track {
  outline: 2px solid var(--accent-dim);
  outline-offset: 6px;
}

/* Portrait: the artwork is letterboxed so its wordmark survives. Shorten the
   stage so the plate dominates, lift the blurred backdrop so the frame reads
   as filled, and feather the plate edges so it melts into its own blur
   instead of showing hard letterbox lines. */
@media (max-aspect-ratio: 5/4) {
  /* Height is derived from the plate itself: a 16:9 image at full width is
     56.25vw tall, plus a fixed band underneath for the overlay controls.
     Guessing a vh value leaves either a cramped plate or a sea of blur. */
  .hero-stage {
    height: calc(var(--header-height) + 56.25vw + clamp(140px, 19vh, 195px));
    min-height: 380px;
    max-height: none;
  }

  /* The blurred backdrop stays full-bleed; only the sharp plate is inset so
     the fixed header never lands on the wordmark. */
  .hero-slide-inner {
    top: var(--header-height);
  }

  .hero-slide-img {
    object-position: center 16%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px,
        #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30px,
        #000 calc(100% - 30px), transparent 100%);
  }

  .hero-slide-fill {
    filter: blur(44px) saturate(125%) brightness(0.52);
  }

  .hero-stage::after {
    height: 38%;
  }
}

@media (max-width: 700px) {

  .hero-overlay-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }

  .hero-nav {
    margin-left: 0;
  }

  .hero-dot {
    width: 44px;
  }
}

/* ---------- Statement band under the hero ---------- */

.statement {
  margin: 0 !important;
  padding: clamp(4rem, 11vh, 7rem) 0 clamp(3rem, 8vh, 5rem);
  border-bottom: 1px solid var(--hairline);
}

.statement h1 {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  max-width: 20ch;
  margin: 0;
}

.statement-lead {
  margin-top: 1.5rem;
  max-width: 58ch;
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--text-secondary);
}

.statement .hero-actions {
  margin-top: 2.25rem;
}

/* ================= 25. MODEL LINEUP ================= */

.lineup {
  border-top: 1px solid var(--hairline);
}

.lineup-row {
  padding: 0;
  border-bottom: 1px solid var(--hairline);
}

.lineup-row > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 26px;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0.5rem 1.35rem 0;
  transition: padding-left 0.35s var(--ease), background 0.3s var(--ease);
}

.lineup-row > a:hover {
  padding-left: 0.85rem;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.035), transparent 70%);
}

.lineup-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.95);
}

.lineup-desc {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 54ch;
}

.lineup-params {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lineup-status {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.lineup-status.is-live {
  color: var(--accent);
}

.lineup-arrow {
  justify-self: end;
  color: var(--text-faint);
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}

.lineup-row > a:hover .lineup-arrow {
  transform: translateX(4px);
  color: #fff;
}

.lineup-foot {
  margin-top: 2rem;
}

@media (max-width: 720px) {
  .lineup-row > a {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 1rem;
    padding: 1.2rem 0;
  }

  .lineup-meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.15rem;
  }

  .lineup-arrow {
    grid-row: 1;
    grid-column: 2;
  }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide-inner {
    transition-duration: 1ms;
  }

  .hero-slide.is-active .hero-slide-img {
    animation: none;
  }

  .hero-dot.is-active .hero-dot-fill {
    animation: none;
    transform: scaleX(1);
  }

  .hero-slide-inner {
    transform: none;
  }
}

/* ================= 26. ARTICLE TOOLS (listen / share) ================= */

.article-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 68ch;
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 clamp(2rem, 5vh, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}

/* Left group keeps the label, divider and time together, mirroring the
   reference layout; Share is pushed to the far edge. */
.tool-group {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
  flex: 1 1 auto;
}

.tool-listen,
.tool-share {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.tool-listen:hover,
.tool-share:hover {
  color: #fff;
}

.tool-listen[disabled] {
  cursor: default;
  opacity: 0.6;
}

/* Round play/pause control */
.tool-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #050505;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.tool-listen:hover .tool-icon {
  background: #fff;
  transform: scale(1.05);
}

.tool-icon svg {
  width: 14px;
  height: 14px;
}

/* Only one of the three glyphs shows at a time */
.tool-icon .icon-pause,
.tool-icon .icon-spinner {
  display: none;
}

.article-tools[data-state="playing"] .icon-play,
.article-tools[data-state="loading"] .icon-play {
  display: none;
}

.article-tools[data-state="playing"] .icon-pause {
  display: block;
}

.article-tools[data-state="loading"] .icon-spinner {
  display: block;
  animation: toolSpin 0.9s linear infinite;
}

@keyframes toolSpin {
  to {
    transform: rotate(360deg);
  }
}

.tool-label {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.tool-divider {
  width: 1px;
  height: 15px;
  background: var(--hairline-strong);
}

.tool-time {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Scrub track — only present once audio is actually playing */
.tool-progress {
  position: relative;
  flex: 1 1 90px;
  min-width: 70px;
  max-width: 190px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
  display: none;
}

.article-tools[data-state="playing"] .tool-progress,
.article-tools[data-state="paused"] .tool-progress {
  display: block;
}

.tool-progress-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s linear;
}

.article-tools[data-state="error"] .tool-label {
  color: var(--text-faint);
}

.tool-share svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.tool-share.is-copied {
  color: var(--accent);
}

@media (max-width: 560px) {
  .article-tools {
    gap: 0.75rem 1rem;
  }

  .tool-group {
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
  }

  .tool-progress {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-icon,
  .tool-progress-fill {
    transition: none;
  }
}

/* ================= 27. SCHEDULE TRACKER ================= */

/* Plan-vs-current timeline. Each row draws the originally planned window as
   a dashed ghost and the current window as a solid bar; when they differ, a
   connector runs between them. Positions are percentages of the axis,
   computed at build time. The default (no-JS) state is the final layout —
   the slide-in animation is layered on top by script. */

.tracker-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 1.75rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.tracker-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  border: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.tracker-legend b {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
}

.legend-swatch {
  width: 18px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

.legend-swatch.is-ahead { background: var(--accent); box-shadow: 0 0 10px rgba(150, 220, 255, 0.45); }
.legend-swatch.is-set   { background: rgba(255, 255, 255, 0.92); }
.legend-swatch.is-track { background: rgba(255, 255, 255, 0.4); }
.legend-swatch.is-moved { background: rgba(255, 255, 255, 0.62); }
.legend-swatch.is-plan  { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.45); }

.tracker {
  --label-w: 250px;
  --lane-h: 30px;
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.5rem 1.25rem 0.9rem;
}

/* Shared two-column grid: label rail + timeline lane */
.tracker-axis,
.tracker-row,
.tracker-group {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: center;
}

.tracker-axis {
  padding: 0.6rem 0 0.7rem;
  border-bottom: 1px solid var(--hairline);
}

.tracker-scale {
  position: relative;
  height: 50px;
}

.tracker-q {
  position: absolute;
  top: 0;
  left: var(--l);
  width: var(--w);
  padding-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  line-height: 1.35;
  color: var(--text-faint);
  border-left: 1px solid var(--hairline-strong);
  white-space: nowrap;
}

.tracker-q b {
  display: block;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}

.tracker-group {
  padding: 1.1rem 0 0.35rem;
}

.tracker-group span {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.tracker-row {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.tracker-row:last-child {
  border-bottom: 0;
}

.tracker-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
}

.tracker-detail {
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: var(--text-faint);
}

.tracker-detail s {
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

/* The lane carries quarter gridlines (--grid, set once on .tracker) and a
   "today" rule positioned by script. */
.tracker-lane {
  position: relative;
  height: var(--lane-h);
  background-image: var(--grid);
  background-repeat: no-repeat;
}

.tracker-lane::after {
  content: "";
  position: absolute;
  top: -0.6rem;
  bottom: -0.6rem;
  left: var(--today, -10px);
  width: 1px;
  background: rgba(255, 255, 255, 0.55);
  display: var(--today-display, none);
}

.tracker-today-label {
  position: absolute;
  top: 32px;
  left: var(--today, 0);
  transform: translateX(-50%);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #050505;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  display: var(--today-display, none);
  z-index: 2;
}

/* ---------- Bars ---------- */

.tracker-plan,
.tracker-now,
.tracker-link {
  position: absolute;
  top: 50%;
  left: var(--l);
  width: var(--w);
}

.tracker-plan,
.tracker-now {
  height: 12px;
  margin-top: -6px;
  border-radius: 999px;
}

/* Point milestones (a single date) render as a diamond */
.tracker-plan.is-point,
.tracker-now.is-point {
  width: 12px;
  margin-left: -6px;
  border-radius: 2px;
  transform: rotate(45deg) scale(0.86);
}

.tracker-plan {
  border: 1px dashed rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.025);
}

.tracker-now {
  background: rgba(255, 255, 255, 0.4);
  z-index: 1;
}

.is-set .tracker-now   { background: rgba(255, 255, 255, 0.92); }
.is-moved .tracker-now { background: rgba(255, 255, 255, 0.62); }

.is-ahead .tracker-now {
  background: var(--accent);
  box-shadow: 0 0 14px rgba(150, 220, 255, 0.5);
}

/* Dashed connector from the current window back to where it was planned */
.tracker-link {
  height: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.32);
  transform-origin: right center;
}

.is-ahead .tracker-link {
  border-top-color: rgba(150, 220, 255, 0.55);
}

/* Arrowhead at the current (earlier) end, pointing back in time */
.tracker-link::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -4px;
  width: 6px;
  height: 6px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  color: rgba(255, 255, 255, 0.45);
}

.is-ahead .tracker-link::before {
  color: var(--accent);
}

/* ---------- Pills ---------- */

.status-pill.is-ahead {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-wash);
}

.status-pill.is-moved {
  color: var(--text-secondary);
  border-color: var(--hairline-strong);
}

.status-pill.is-set {
  color: #050505;
  background: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}

/* Inline pill inside phase list items */
.dash-list .status-pill {
  margin-left: 0.4rem;
  vertical-align: 1px;
  font-size: 0.55rem;
  padding: 0.12rem 0.5rem;
}

.phase-tag {
  display: inline-block;
  margin-left: 0.6rem;
  vertical-align: 1px;
}

/* Spec-list rows that record a change: previous value struck through */
.spec-list dd s {
  color: var(--text-faint);
  text-decoration-color: rgba(255, 255, 255, 0.3);
  margin-right: 0.4rem;
}

/* ---------- Motion: bars slide from the planned slot to the current one ---- */

.tracker.will-animate .tracker-row.is-shifted .tracker-now {
  left: var(--pl);
  transition: none;
}

/* Width only animates for bars. A point milestone's --w is 0%, and letting
   this rule set it would out-specify the 12px diamond and hide the marker. */
.tracker.will-animate .tracker-row.is-shifted .tracker-now:not(.is-point) {
  width: var(--pw);
}

.tracker.will-animate .tracker-row.is-shifted .tracker-link {
  transform: scaleX(0);
}

.tracker.is-inview .tracker-row.is-shifted .tracker-now {
  left: var(--l);
  transition: left 1.3s var(--ease-cinema, var(--ease)),
    width 1.3s var(--ease-cinema, var(--ease));
  transition-delay: var(--delay, 0s);
}

.tracker.is-inview .tracker-row.is-shifted .tracker-now:not(.is-point) {
  width: var(--w);
}

.tracker.is-inview .tracker-row.is-shifted .tracker-link {
  transform: scaleX(1);
  transition: transform 1.3s var(--ease-cinema, var(--ease));
  transition-delay: var(--delay, 0s);
}

/* ---------- Narrow screens: label above lane ---------- */

@media (max-width: 760px) {
  .tracker {
    padding: 0.4rem 0.9rem 0.8rem;
  }

  .tracker-axis,
  .tracker-row,
  .tracker-group {
    grid-template-columns: minmax(0, 1fr);
  }

  .tracker-axis > :first-child {
    display: none;
  }

  .tracker-row {
    row-gap: 0.55rem;
    padding: 0.8rem 0;
  }

  .tracker-q {
    padding-left: 0.3rem;
    font-size: 0.56rem;
    letter-spacing: 0.06em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tracker.will-animate .tracker-row.is-shifted .tracker-now {
    left: var(--l);
  }

  .tracker.will-animate .tracker-row.is-shifted .tracker-now:not(.is-point) {
    width: var(--w);
  }

  .tracker.will-animate .tracker-row.is-shifted .tracker-link {
    transform: none;
  }
}

/* ================= 28. MODEL LIFECYCLE STATES ================= */

/* Lineup groups: one eyebrow row per lifecycle stage */
.lineup-group + .lineup-group {
  margin-top: clamp(3rem, 7vh, 4.5rem);
}

.lineup-group .featured-eyebrow-row {
  margin-bottom: 1.5rem;
}

.group-note {
  margin: -0.75rem 0 1.5rem;
  max-width: 62ch;
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--text-muted);
}

/* In development — dashed, echoing the "planned" ghosts on the roadmap */
.status-pill.is-dev {
  border-style: dashed;
  color: var(--text-secondary);
}

.showcase-card.is-dev {
  border-style: dashed;
  border-color: var(--hairline-strong);
  background: transparent;
}

/* Retired — kept as a record, visually stepped back */
.status-pill.is-retired {
  color: var(--text-faint);
  border-color: var(--hairline);
  background: transparent;
}

.showcase-card.is-retired {
  background: transparent;
}

.showcase-card.is-retired .showcase-desc,
.showcase-card.is-retired .showcase-specs,
.showcase-card.is-retired .showcase-class {
  opacity: 0.62;
  transition: opacity 0.3s var(--ease);
}

.showcase-card.is-retired:hover .showcase-desc,
.showcase-card.is-retired:hover .showcase-specs,
.showcase-card.is-retired:hover .showcase-class,
.showcase-card.is-retired:focus-within .showcase-desc,
.showcase-card.is-retired:focus-within .showcase-specs,
.showcase-card.is-retired:focus-within .showcase-class {
  opacity: 1;
}

.showcase-card.is-retired .showcase-name a {
  color: var(--text-secondary);
}

/* Spec value that should read as good news (e.g. ahead of plan) */
.showcase-specs dd.is-ahead {
  color: var(--accent);
}

/* Placeholder where a link will exist later */
.showcase-pending {
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* Table rows for models that don't exist publicly yet */
.data-table .row-dev td {
  color: var(--text-muted);
  font-style: normal;
}

.data-table .row-dev td:first-child::after {
  content: "in dev";
  margin-left: 0.55rem;
  padding: 0.05rem 0.4rem;
  border: 1px dashed var(--hairline-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  vertical-align: 1px;
}
/* ================= 29. LIVE TRAINING ================= */

/* /live: stream switcher, progress counter, loss chart and console.
   Colours specific to the page are scoped to .live; everything else
   comes from the shared tokens in section 2. */
.live {
  --lv-train: rgba(150, 220, 255, 0.95);
  --lv-val: #f1b86a;
  --lv-step: rgba(237, 237, 237, 0.72);
  --lv-ok: #7fdcae;
  --lv-warn: #f1b86a;
  --lv-off: rgba(255, 255, 255, 0.35);
  --lv-panel: var(--bg-raised, #0a0a0b);
  --lv-line: var(--hairline, rgba(255, 255, 255, 0.08));
  --lv-line-strong: var(--hairline-strong, rgba(255, 255, 255, 0.18));
  --lv-muted: var(--text-muted, #9a9a9a);
  --lv-faint: var(--text-faint, rgba(255, 255, 255, 0.45));
  --lv-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --lv-radius: var(--radius, 10px);
  --lv-ease: var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));

  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.live [hidden] {
  display: none !important;
}

/* ---------- Stream switcher ---------- */

.live-streams {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}

.live-streams::-webkit-scrollbar {
  display: none;
}

.stream-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--lv-line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary, rgba(255, 255, 255, 0.74));
  font: inherit;
  font-size: var(--step-small, 0.9rem);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s var(--lv-ease), color 0.2s var(--lv-ease);
}

.stream-tab:hover {
  border-color: var(--lv-line-strong);
  color: var(--text-primary, #ededed);
}

.stream-tab[aria-selected="true"] {
  border-color: var(--lv-line-strong);
  background: var(--surface-hover, rgba(255, 255, 255, 0.04));
  color: var(--text-primary, #ededed);
}

.stream-tab .tab-meta {
  color: var(--lv-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- Status dot (shared by tabs and the run header) ---------- */

.state-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lv-off);
}

[data-state="live"] .state-dot {
  background: var(--lv-ok);
  box-shadow: 0 0 0 0 rgba(127, 220, 174, 0.5);
  animation: lv-pulse 2.4s var(--lv-ease) infinite;
}

[data-state="quiet"] .state-dot {
  background: var(--lv-warn);
}

[data-state="finished"] .state-dot {
  background: var(--lv-train);
}

@keyframes lv-pulse {
  0% { box-shadow: 0 0 0 0 rgba(127, 220, 174, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(127, 220, 174, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 220, 174, 0); }
}

/* ---------- Empty state ---------- */

.live-empty {
  padding: clamp(2rem, 6vw, 3.5rem);
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
}

.live-empty h2 {
  margin: 0 0 0.6rem;
  font-size: var(--step-title, 1.8rem);
  font-weight: 300;
}

.live-empty p {
  margin: 0;
  max-width: 58ch;
  color: var(--lv-muted);
}

/* ---------- Run header ---------- */

.live-run {
  display: grid;
  gap: 1.75rem;
  min-width: 0;
}

.run-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.run-name {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}

.run-name h2 {
  margin: 0;
  font-size: var(--step-title, 1.8rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.run-tag {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--lv-line-strong);
  border-radius: 999px;
  color: var(--lv-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.run-state {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--lv-muted);
  font-size: var(--step-small, 0.9rem);
  font-variant-numeric: tabular-nums;
}

/* ---------- Progress: the ticking counter and rail ---------- */

.run-progress {
  display: grid;
  gap: 1rem;
}

.progress-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.lv-figure {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.lv-figure-value {
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lv-figure-main .lv-figure-value {
  font-size: clamp(2.3rem, 7.2vw, 4.6rem);
}

.lv-figure-side {
  text-align: right;
}

.lv-figure-side .lv-figure-value {
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  color: var(--text-secondary, rgba(255, 255, 255, 0.74));
}

.lv-figure-label {
  color: var(--lv-muted);
  font-size: var(--step-small, 0.9rem);
}

.progress-rail {
  position: relative;
  height: 22px;
}

.progress-rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--lv-line-strong);
}

.rail-fill {
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  height: 3px;
  width: 0;
  border-radius: 2px;
  background: var(--lv-train);
}

.rail-head {
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--bg, #050505);
  border: 2px solid var(--lv-train);
}

[data-state="live"] .rail-head {
  box-shadow: 0 0 12px rgba(150, 220, 255, 0.55);
}

.rail-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rail-mark {
  position: absolute;
  top: calc(50% + 5px);
  width: 1px;
  height: 6px;
  background: var(--lv-val);
  opacity: 0.55;
}

.progress-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
  color: var(--lv-muted);
  font-size: var(--step-small, 0.9rem);
  font-variant-numeric: tabular-nums;
}

.progress-notes span:empty {
  display: none;
}

/* ---------- Stats ---------- */

.run-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  margin: 0;
  border-top: 1px solid var(--lv-line);
  border-left: 1px solid var(--lv-line);
}

.run-stats > div {
  min-width: 0;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--lv-line);
  border-bottom: 1px solid var(--lv-line);
}

.run-stats dt {
  color: var(--lv-muted);
  font-size: 0.8rem;
}

.run-stats dd {
  margin: 0.25rem 0 0;
  font-size: 1.15rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-stats dd small {
  margin-left: 0.35rem;
  color: var(--lv-faint);
  font-size: 0.78rem;
}

.run-stats dd small.below {
  display: block;
  margin: 0.1rem 0 0;
}

/* ---------- Panels ---------- */

.panel {
  position: relative;
  min-width: 0;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  background: var(--lv-panel);
}

.panel-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--lv-line);
}

.panel-foot {
  margin: 0;
  padding: 0 0.9rem 0.75rem;
  color: var(--lv-faint);
  font-size: 0.78rem;
}

/* ---------- Chart controls ---------- */

.series-toggles,
.chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.chart-controls {
  gap: 0.6rem 0.9rem;
}

.series-btn,
.seg button,
.chart-reset,
.console-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--lv-line);
  border-radius: 999px;
  background: transparent;
  color: var(--lv-muted);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s var(--lv-ease), border-color 0.15s var(--lv-ease), background 0.15s var(--lv-ease);
}

.series-btn:hover,
.seg button:hover {
  color: var(--text-primary, #ededed);
}

.series-btn[aria-pressed="true"] {
  border-color: var(--lv-line-strong);
  color: var(--text-primary, #ededed);
}

.series-btn[aria-pressed="false"] .sw {
  opacity: 0.3;
}

.sw {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
}

.sw-train { background: var(--lv-train); }
.sw-val { background: var(--lv-val); }
.sw-step { background: var(--lv-step); }

.seg {
  display: inline-flex;
  border: 1px solid var(--lv-line);
  border-radius: 999px;
  padding: 2px;
}

.seg button {
  border-color: transparent;
  padding: 0.28rem 0.65rem;
}

.seg button[aria-pressed="true"] {
  background: var(--surface-hover, rgba(255, 255, 255, 0.06));
  color: var(--text-primary, #ededed);
}

.ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--lv-muted);
  font-size: 0.82rem;
}

.ctl input[type="range"] {
  width: 96px;
  accent-color: var(--lv-step);
}

/* ---------- Chart ---------- */

.chart-wrap {
  position: relative;
  height: clamp(260px, 42vw, 420px);
  margin: 0.5rem 0.25rem 0.25rem;
  touch-action: pan-y;
}

#chart {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.chart-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  min-width: 150px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--lv-line-strong);
  border-radius: 8px;
  background: rgba(5, 5, 5, 0.94);
  font-size: 0.8rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.chart-tip b {
  display: block;
  margin-bottom: 0.15rem;
  font-weight: 500;
}

.chart-tip .tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--lv-muted);
}

.chart-tip .tip-row span:last-child {
  color: var(--text-primary, #ededed);
}

.chart-reset {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  z-index: 1;
  background: var(--lv-panel);
}

.chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--lv-muted);
  font-size: var(--step-small, 0.9rem);
}

/* ---------- Console ---------- */

.console-bar {
  justify-content: flex-start;
  gap: 0.75rem;
  font-size: 0.82rem;
}

.console-title {
  color: var(--text-primary, #ededed);
}

.console-file {
  min-width: 0;
  overflow: hidden;
  color: var(--lv-faint);
  font-family: var(--lv-mono);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-count {
  margin-left: auto;
  color: var(--lv-faint);
  font-variant-numeric: tabular-nums;
}

.console {
  height: clamp(280px, 46vh, 460px);
  overflow: auto;
  padding: 0.8rem 0.9rem 1rem;
  background: #000;
  border-radius: 0 0 var(--lv-radius) var(--lv-radius);
  font-family: var(--lv-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(237, 237, 237, 0.8);
  overscroll-behavior: contain;
}

.console:focus-visible {
  outline: 2px solid var(--accent-dim, rgba(120, 210, 255, 0.35));
  outline-offset: -2px;
}

.console-lines {
  width: max-content;
  min-width: 100%;
}

.cl {
  min-height: 1.6em;
  white-space: pre;
}

.cl-eval { color: var(--lv-val); }
.cl-best { color: #ffd59a; }
.cl-rule { color: var(--lv-faint); }
.cl-dim { color: rgba(237, 237, 237, 0.5); }

.cl-new {
  animation: lv-arrive 1.6s var(--lv-ease);
}

@keyframes lv-arrive {
  from { background: rgba(150, 220, 255, 0.12); }
  to { background: transparent; }
}

.console-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-top: 0.15em;
  background: rgba(237, 237, 237, 0.75);
  vertical-align: text-bottom;
  animation: lv-blink 1.1s steps(1) infinite;
}

[data-state="finished"] .console-cursor,
[data-state="offline"] .console-cursor {
  display: none;
}

@keyframes lv-blink {
  50% { opacity: 0; }
}

.console-jump {
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  background: var(--lv-panel);
  border-color: var(--lv-line-strong);
  color: var(--text-primary, #ededed);
}

/* ---------- Run configuration ---------- */

.run-info summary {
  padding: 0.8rem 0.9rem;
  color: var(--lv-muted);
  font-size: 0.88rem;
  cursor: pointer;
  user-select: none;
}

.run-info summary:hover {
  color: var(--text-primary, #ededed);
}

.run-info pre {
  margin: 0;
  padding: 0 0.9rem 1rem;
  overflow-x: auto;
  color: rgba(237, 237, 237, 0.75);
  font-family: var(--lv-mono);
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- Connection note ---------- */

.live-conn {
  margin: 0;
  color: var(--lv-warn);
  font-size: var(--step-small, 0.9rem);
}

/* ---------- Small screens ---------- */

@media (max-width: 700px) {
  .lv-figure-side {
    text-align: left;
  }

  .panel-bar {
    padding: 0.65rem 0.7rem;
  }

  .chart-controls {
    width: 100%;
  }

  .console {
    font-size: 11px;
    padding: 0.7rem;
  }

  .run-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .run-stats dd {
    font-size: 1.02rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-state="live"] .state-dot,
  .console-cursor,
  .cl-new {
    animation: none;
  }
}

/* ================= 30. HOMEPAGE LIVE INDICATOR ================= */

/* A quiet line above the statement heading, shown by live-badge.js only
   while a run is streaming. Hidden (and taking no space) otherwise. */
.live-now {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  margin: 0 0 1.75rem;
  padding: 0.4rem 0.85rem 0.4rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.3;
  text-decoration: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
    border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.live-now[hidden] {
  display: none;
}

.live-now.is-shown {
  opacity: 1;
  transform: none;
}

.live-now:hover,
.live-now:focus-visible {
  border-color: var(--hairline-strong);
  color: var(--text-primary);
}

.live-now-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fdcae;
  animation: live-now-pulse 2.8s var(--ease) infinite;
}

.live-now-label {
  flex: 0 0 auto;
  color: var(--text-secondary);
  white-space: nowrap;
}

.live-now-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.live-now-arrow {
  flex: 0 0 auto;
  transition: transform 0.2s var(--ease);
}

.live-now:hover .live-now-arrow {
  transform: translateX(2px);
}

@keyframes live-now-pulse {
  0% { box-shadow: 0 0 0 0 rgba(127, 220, 174, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(127, 220, 174, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 220, 174, 0); }
}

@media (max-width: 480px) {
  .live-now {
    margin-bottom: 1.4rem;
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-now,
  .live-now-arrow {
    transition: none;
  }

  .live-now-dot {
    animation: none;
  }
}