/* ============================================================
   traceview — styles.css (section namespaces; rev 1.1)
   Primitives live in system.css. Sections scope as .s-<name>.
   Spacing literals restricted to scale {1,2,4,8,12,16,24,32,48,64,96,128}.
   Radii {0,2,4,8}. No gradients, no shadows, no backdrop blur.
   ============================================================ */

/* ---------- layout base ---------- */
.tv-skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  background: var(--tv-accent);
  color: var(--tv-accent-ink);
  padding: 8px 16px;
  border-radius: var(--tv-r-sm);
  font-family: var(--font-mono);
  font-size: var(--tv-mono-label);
  letter-spacing: var(--tv-ls-label);
  text-transform: uppercase;
  transition: top var(--tv-dur-fast) var(--tv-ease);
}
.tv-skip:focus-visible { top: 16px; left: 16px; }

.s-nav__inner,
.s-hero__inner,
.s-features__head,
.s-features__grid,
.s-arch__head,
.s-arch__stage,
.s-pricing__head,
.s-pricing__grid,
.s-faq__inner,
.s-footer__inner,
.s-features {
  max-width: var(--tv-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* hairline grids span their padded parents flush — no container padding on the grids */
.s-features__grid,
.s-pricing__grid { padding-left: 0; padding-right: 0; }

/* ---------- global entrance: blur-rise-reveal (bank: pattern-blur-rise) ---------- */
.tv-js .tv-reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition: opacity var(--tv-dur-rise) var(--tv-ease), transform var(--tv-dur-rise) var(--tv-ease), filter var(--tv-dur-rise) var(--tv-ease);
}
.tv-js .tv-reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------- 0. nav (guarded-transition) ---------- */
.s-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color var(--tv-dur-med) var(--tv-ease), border-color var(--tv-dur-med) var(--tv-ease);
}
.s-nav.is-scrolled { background: rgba(16, 19, 16, 0.88); border-bottom-color: var(--tv-line); }
.s-nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}
.s-nav__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--tv-ink); }
.s-nav__wordmark { font-weight: 600; letter-spacing: -0.01em; }
.s-nav__links { display: flex; gap: 24px; margin-left: 16px; }
.s-nav__links a {
  font-family: var(--font-mono);
  font-size: var(--tv-mono-label);
  font-weight: 500;
  letter-spacing: var(--tv-ls-label);
  text-transform: uppercase;
  color: var(--tv-ink-3);
  transition: color var(--tv-dur-fast) var(--tv-ease);
}
.s-nav__links a:hover { color: var(--tv-ink); }
.s-nav__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.s-nav__status { display: inline-flex; align-items: center; gap: 8px; color: var(--tv-accent); }
.s-nav__actions .tv-btn { padding: 8px 16px; }

/* ---------- 1. hero (signature: count-up-grid) ---------- */
.s-hero { padding: 96px 0 96px; border-bottom: 1px solid var(--tv-line); overflow: hidden; }
.s-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s-hero h1 { max-width: 800px; margin-top: 24px; }
.s-hero__sub { max-width: 520px; margin: 16px 0 0; color: var(--tv-ink-2); }
.s-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 32px; }

.s-hero__stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-top: 64px;
  border-radius: var(--tv-r-md);
  text-align: left;
}
.s-hero__stage::before,
.s-hero__stage::after {
  content: "+";
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--tv-mono-data);
  color: var(--tv-ink-3);
  line-height: 1;
}
.s-hero__stage::before { top: -8px; left: -8px; }
.s-hero__stage::after { bottom: -8px; right: -8px; }

.s-hero__grid { grid-template-columns: repeat(3, 1fr); border: none; border-top: none; }
.s-hero__tile { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.s-hero__tile .tv-mono-label { margin: 0; }
.s-hero__num { margin: 0; font-size: 40px; font-weight: 600; color: var(--tv-ink); }
.tv-num--accent { color: var(--tv-accent); }
.s-hero__spark { width: 100%; height: 32px; }
.s-hero__spark-line {
  fill: none;
  stroke: var(--tv-ink-2);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.s-hero__spark-line--accent { stroke: var(--tv-accent); }
.s-hero__spark-line--danger { stroke: var(--tv-danger); }
.s-hero__spark-area { fill: var(--tv-accent-wash); stroke: none; }
.s-hero__delta { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--tv-ink-3); }

.s-hero__ticker { border-top: 1px solid var(--tv-line); padding: 16px 24px; }
.s-hero__ticker-label { margin: 0 0 8px; }
.s-hero__ticker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.s-hero__ticker-list li {
  display: grid;
  grid-template-columns: 8rem 8rem 1fr 4rem 6rem 4rem;
  gap: 16px;
  color: var(--tv-ink-2);
  white-space: nowrap;
}
.s-hero__ticker-list li.is-new { animation: tv-ticker-in var(--tv-dur-med) var(--tv-ease); }
.s-hero__req { color: var(--tv-ink); }
@keyframes tv-ticker-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.s-hero__status {
  margin: 0;
  padding: 12px 24px;
  border-top: 1px solid var(--tv-line);
  color: var(--tv-ink-3);
}

/* sparkline draw-on (once, 1.2s) */
.tv-js .s-hero__spark-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: tv-draw 1.2s var(--tv-ease) forwards;
}
@keyframes tv-draw { to { stroke-dashoffset: 0; } }

/* ---------- 2. logos (marquee-columns) ---------- */
.s-logos { padding: 64px 0; border-bottom: 1px solid var(--tv-line); }
.s-logos__line { margin: 0 0 32px; text-align: center; }
.s-logos__marquee {
  overflow: hidden;
  display: flex;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.s-logos__track {
  display: flex;
  gap: 64px;
  list-style: none;
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  align-items: center;
  animation: tv-marquee 40s linear infinite;
}
.s-logos__marquee:hover .s-logos__track { animation-play-state: paused; }
.s-logos__track li {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tv-ink-3);
  white-space: nowrap;
  transition: color var(--tv-dur-fast) var(--tv-ease);
}
.s-logos__track li:hover { color: var(--tv-ink); }
@keyframes tv-marquee { to { transform: translateX(-100%); } }

/* ---------- 3. features (elevation-hover) ---------- */
.s-features { padding: 96px 24px 128px; border-bottom: 1px solid var(--tv-line); }
.s-features__head { text-align: center; }
.s-features__head .tv-mono-label { margin: 0 0 16px; }
.s-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 64px;
  background: var(--tv-line);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-r-sm);
}
.s-features__card {
  border: none;
  border-radius: 0;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background-color var(--tv-dur-med) var(--tv-ease), transform var(--tv-dur-med) var(--tv-ease);
}
.s-features__card:hover { background: var(--tv-panel-2); transform: translateY(-4px); }
.s-features__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--tv-panel-2);
  border: 1px solid var(--tv-line-strong);
  border-radius: var(--tv-r-sm);
  color: var(--tv-accent);
}
.s-features__tag { margin: 0; color: var(--tv-ink-2); }
.s-features__card .tv-body-sm { margin: 0; }
.s-features__ui { margin-top: auto; }
.s-features__ui.tv-panel { border-radius: 0; border: 1px solid var(--tv-line); background: var(--tv-panel); }
.s-features__row {
  display: grid;
  grid-template-columns: 1fr 4rem 5rem;
  gap: 16px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: var(--tv-mono-data);
  font-variant-numeric: tabular-nums;
  color: var(--tv-ink-2);
}
.s-features__row span:first-child { color: var(--tv-ink); }
.s-features__bar {
  display: grid;
  grid-template-columns: 7rem 1fr 3rem;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
}
.s-features__meter { display: block; height: 4px; background: var(--tv-panel-2); border-radius: var(--tv-r-xs); overflow: hidden; }
.s-features__meter i { display: block; height: 100%; background: var(--tv-accent); }
.s-features__meter--warn i { background: var(--tv-warn); }
.s-features__meter--danger i { background: var(--tv-danger); }
.s-features__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--tv-ink-2); }
.s-features__bullets li::before { content: ">> "; color: var(--tv-accent); }

/* ---------- 4. architecture (beam-pipeline-state-machine) ---------- */
.s-arch { padding: 96px 0 128px; border-bottom: 1px solid var(--tv-line); }
.s-arch__head { text-align: center; }
.s-arch__head .tv-mono-label { margin: 0 0 16px; }
.s-arch__sub { max-width: 560px; margin: 16px auto 0; }
.s-arch__stage {
  position: relative;
  margin-top: 64px;
  padding: 48px 24px;
  border-radius: var(--tv-r-md);
}
.s-arch__beam { position: absolute; inset: 64px 24px auto; width: calc(100% - 48px); height: 48px; }
.s-arch__beam-base { fill: none; stroke: var(--tv-line-strong); stroke-width: 1; }
.s-arch__beam-flow {
  fill: none;
  stroke: var(--tv-accent);
  stroke-width: 2;
  stroke-dasharray: 12 28;
  animation: tv-beam 1.6s linear infinite;
  animation-play-state: paused;
}
.is-running .s-arch__beam-flow { animation-play-state: running; }
@keyframes tv-beam { to { stroke-dashoffset: -40; } }
.s-arch__beam-node { fill: var(--tv-panel); stroke: var(--tv-accent); stroke-width: 1.5; }
.s-arch__stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 48px 0 0;
}
.s-arch__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.s-arch__step p { margin: 0; }
.s-arch__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  background: var(--tv-panel-2);
  border: 1px solid var(--tv-line-strong);
  border-radius: var(--tv-r-sm);
  color: var(--tv-accent);
}

/* ---------- 5. pricing (billing-toggle + tier-compare) ---------- */
.s-pricing { padding: 96px 0 128px; border-bottom: 1px solid var(--tv-line); }
.s-pricing__head { text-align: center; }
.s-pricing__head .tv-mono-label { margin: 0 0 16px; }
.s-pricing__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 32px;
  padding: 4px;
  border: 1px solid var(--tv-line-strong);
  border-radius: var(--tv-r-sm);
  background: var(--tv-panel);
}
.s-pricing__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--tv-ink-3);
  font-size: var(--tv-body-sm);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--tv-r-xs);
  transition: background-color var(--tv-dur-fast) var(--tv-ease), color var(--tv-dur-fast) var(--tv-ease);
}
.s-pricing__opt:hover { color: var(--tv-ink); }
.s-pricing__opt.is-active { background: var(--tv-accent); color: var(--tv-accent-ink); }
.s-pricing__opt .tv-badge { padding: 2px 8px; }

.s-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 64px;
  background: var(--tv-line);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-r-sm);
}
.s-pricing__card {
  border: none;
  border-radius: 0;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.s-pricing__card--hi { background: var(--tv-panel-2); box-shadow: none; outline: 1px solid rgba(168, 255, 83, 0.35); outline-offset: -1px; z-index: 1; }
.s-pricing__flag { margin: 0; color: var(--tv-accent); }
.s-pricing__price { margin: 0; font-size: 40px; font-weight: 600; color: var(--tv-ink); }
.s-pricing__per { color: var(--tv-ink-3); margin-left: 4px; }
.s-pricing__price--custom { font-size: 32px; text-transform: lowercase; }
.s-pricing__note { margin: 0; min-height: 20px; }
.s-pricing__rows { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--tv-ink-2); flex-grow: 1; }
.s-pricing__rows li::before { content: "+ "; color: var(--tv-accent); }
.s-pricing__card .tv-btn { margin-top: auto; }
.s-pricing__foot { margin: 32px 0 0; text-align: center; color: var(--tv-ink-3); }

/* ---------- 6. faq (staged-disclosure) ---------- */
.s-faq { padding: 96px 0 128px; border-bottom: 1px solid var(--tv-line); }
.s-faq__inner { max-width: 800px; text-align: left; }
.s-faq h2 { text-align: center; margin-bottom: 48px; }
.s-faq__list { border-radius: var(--tv-r-sm); }
.s-faq__item + .s-faq__item { border-top: 1px solid var(--tv-line); }
.s-faq__q { margin: 0; }
.s-faq__q button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  color: var(--tv-ink);
  font-size: var(--tv-body);
  font-weight: 600;
  text-align: left;
  padding: 16px 24px;
}
.s-faq__q button:hover { color: var(--tv-accent); }
.s-faq__x { position: relative; width: 12px; height: 12px; flex-shrink: 0; transition: transform var(--tv-dur-med) var(--tv-ease); }
.s-faq__x::before, .s-faq__x::after {
  content: "";
  position: absolute;
  background: var(--tv-ink-3);
}
.s-faq__x::before { left: 0; top: 4px; width: 12px; height: 2px; }
.s-faq__x::after { left: 4px; top: 0; width: 2px; height: 12px; }
.s-faq__item.is-open .s-faq__x { transform: rotate(45deg); }
.s-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--tv-dur-med) var(--tv-ease); }
.s-faq__item.is-open .s-faq__a { grid-template-rows: 1fr; }
.s-faq__a-body { overflow: hidden; min-height: 0; }
.s-faq__a-body p { margin: 0; padding: 0 24px 16px; color: var(--tv-ink-2); }

/* ---------- 7. footer (terminal-cta + telemetry-ledger) ---------- */
.s-footer { padding: 96px 0 48px; }
.s-footer__cta { text-align: center; padding-bottom: 64px; }
.s-footer__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 32px; }
.s-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 48px 0;
  border-top: 1px solid var(--tv-line);
}
.s-footer__col { display: flex; flex-direction: column; gap: 12px; }
.s-footer__col p { margin: 0 0 4px; }
.s-footer__col a { color: var(--tv-ink-2); font-size: var(--tv-body-sm); transition: color var(--tv-dur-fast) var(--tv-ease); }
.s-footer__col a:hover { color: var(--tv-ink); }
.s-footer__ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--tv-line);
}
.s-footer__status { display: inline-flex; align-items: center; gap: 8px; color: var(--tv-accent); }
.s-footer__legal { margin-left: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .s-hero__grid { grid-template-columns: repeat(3, 1fr); }
  .s-features__grid { grid-template-columns: 1fr; }
  .s-arch__stages { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .s-arch__beam { display: none; }
  .s-pricing__grid { grid-template-columns: 1fr; }
  .s-pricing__card--hi { outline-offset: -1px; }
  .s-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .s-nav__links, .s-nav__status { display: none; }
  .s-hero { padding-top: 64px; }
  .s-hero h1 { font-size: 2.375rem; }
  .s-hero__grid { grid-template-columns: 1fr; }
  .s-hero__ticker-list li { grid-template-columns: 7rem 1fr 4rem; }
  .s-hero__ticker-list li span:nth-child(2), .s-hero__ticker-list li span:nth-child(4) { display: none; }
  .s-arch__stages { grid-template-columns: 1fr; }
  .s-footer__cols { grid-template-columns: 1fr; gap: 24px; }
  .s-footer__legal { margin-left: 0; }
}

/* ---------- reduced-motion: section moves resolve to static ---------- */
@media (prefers-reduced-motion: reduce) {
  .s-logos__track { animation: none !important; }
  .s-hero__spark-line { animation: none !important; stroke-dashoffset: 0 !important; }
  .s-arch__beam-flow { animation: none !important; stroke-dasharray: none !important; }
  .s-hero__ticker-list li.is-new { animation: none !important; }
}