/*
  bobulator.css — Wireless Bobulator marketing theme
  -------------------------------------------------
  Design tokens are pulled from .Site.Params.design via inline CSS vars
  on :root in baseof.html below. Tokens defined here as fallback defaults.

  Built for Hugo 0.153, vanilla JS, no framework.
  Custom properties scheme; mobile-first; breakpoints at 640/960/1280.
*/

/* ===== DESIGN TOKENS ===== */
:root {
  --accent:       #3df5b4;
  --accent-deep:  #16c489;
  --accent-warm:  #f5c43d;
  --accent-warn:  #f56b3d;
  --ink:          #06120f;
  --ink-soft:     #0d1d18;
  --ink-mid:      #1a2a24;
  --paper:        #fbfaf6;
  --parchment:    #f4efe2;
  --muted:        #5b6b65;
  --muted-soft:   #8a958f;
  --navy:         #0a1f1a;
  --hairline:     rgba(255, 255, 255, 0.08);
  --hairline-dark:rgba(11, 18, 15, 0.10);

  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-serif:   'Source Serif 4', Georgia, serif;

  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    20px;
  --shadow-1:     0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-2:     0 4px 16px rgba(6, 18, 15, 0.08), 0 12px 48px rgba(6, 18, 15, 0.06);

  --container:    1180px;
  --gutter:       clamp(20px, 4vw, 40px);

  /* motion tokens — added in polish round 2 for new components */
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --scale-hover:     1.02;
  --transition-fast: 150ms;
  --accent-glow:     rgba(61, 245, 180, 0.55);
}

/* ====== RESET / BASE ====== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent-deep); }
button { font-family: inherit; cursor: pointer; }

/* ====== TYPOGRAPHY ====== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.4em;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.1rem; letter-spacing: 0; }

p { margin: 0 0 1em; }

/* ====== LAYOUT HELPERS ====== */
.site-main { min-height: 60vh; }
.section,
.entry,
.notfound,
.home > section {
  padding: clamp(60px, 8vw, 120px) var(--gutter);
}
.section__eyebrow,
.entry__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 12px;
}
.section__title,
.entry__title {
  margin-top: 0;
}
.section__deck,
.entry__deck {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  color: var(--muted);
  max-width: 60ch;
}

/* ====== HEADER ====== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 246, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline-dark);
}
.header__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px var(--gutter);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-display);
}
.brand__mark {
  color: var(--accent-deep);
  display: inline-flex;
}
.brand__word { display: inline-flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.brand__product {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nav { flex: 1; display: flex; justify-content: flex-end; }
.nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__link {
  display: inline-block;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.nav__link:hover { background: var(--parchment); }
.nav__link.is-active {
  color: var(--accent-deep);
}
.nav__burger { display: none; }

.header__cta {
  display: inline-block;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.15s ease;
}
.header__cta:hover { background: var(--accent-deep); color: var(--ink); }

@media (max-width: 960px) {
  .nav__list {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid var(--hairline-dark);
    padding: 12px var(--gutter);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .nav__list.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px; height: 38px;
    background: none; border: 1px solid var(--hairline-dark);
    border-radius: var(--radius-sm);
    padding: 0;
  }
  .nav__burger span {
    display: block;
    width: 18px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    margin: 0 auto;
  }
}

/* ====== BUTTONS ====== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--accent);
  color: var(--ink);
}
.btn--primary:hover { background: var(--accent-deep); color: var(--ink); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* ====== HERO ====== */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse at top right, rgba(61, 245, 180, 0.08), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(22, 196, 137, 0.05), transparent 50%),
    var(--paper);
  overflow: hidden;
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  border-bottom: 1px solid var(--hairline-dark);
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
}
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(61, 245, 180, 0.25);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 245, 180, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(61, 245, 180, 0); }
}
.hero__title { margin: 0 0 20px; }
.hero__accent {
  color: var(--accent-deep);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__deck {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 0 36px;
}
.hero__cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid var(--hairline-dark);
}
.hero__stat { display: flex; flex-direction: column; gap: 6px; }
.hero__stat-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hero__stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.hero__signal {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__svg {
  width: 100%;
  max-width: 480px;
  height: auto;
}
@keyframes ringPulse {
  0%   { transform: scale(0.85); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: scale(1.6);  opacity: 0; }
}
.ring-1 { animation: ringPulse 3s infinite ease-out; }
.ring-2 { animation: ringPulse 3s infinite ease-out 0.4s; }
.ring-3 { animation: ringPulse 3s infinite ease-out 0.8s; }
.ring-4 { animation: ringPulse 3s infinite ease-out 1.2s; }

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.orbit {
  transform-origin: 240px 240px;
  animation: orbitSpin 16s linear infinite;
}
.orbit-2 { animation-duration: 20s; animation-direction: reverse; }
.orbit-3 { animation-duration: 24s; }
.orbit-4 { animation-duration: 18s; animation-direction: reverse; }

@keyframes traceDash {
  to { stroke-dashoffset: -80; }
}
.trace { animation: traceDash 2s linear infinite; }
/* hero signal-flow graph: input nodes pulse; converging traces + output
   waveform flow at staggered speeds so the eye reads inputs -> engine -> out */
.trace-1 { animation-duration: 2.2s; }
.trace-2 { animation-duration: 1.9s; }
.trace-3 { animation-duration: 1.6s; }
.trace-4 { animation-duration: 1.9s; }
.trace-5 { animation-duration: 2.2s; }
.trace-out { animation-duration: 1.3s; }
@keyframes ioPulse {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 1; }
}
.io-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: ioPulse 2.4s ease-in-out infinite;
}
.io-node-2 { animation-delay: 0.25s; }
.io-node-3 { animation-delay: 0.50s; }
.io-node-4 { animation-delay: 0.75s; }
.io-node-5 { animation-delay: 1.00s; }

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__signal { order: -1; max-width: 360px; margin: 0 auto; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ====== VALUE PROPS ====== */
.value { background: var(--parchment); }
.value__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.value__title { text-align: center; max-width: 18ch; margin: 0 auto 16px; }
.value__deck {
  text-align: center;
  margin: 0 auto 60px;
  max-width: 60ch;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--muted);
}
.value__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.value__card {
  background: var(--paper);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.value__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--accent-deep);
}
.value__icon {
  color: var(--accent-deep);
  margin-bottom: 16px;
}
.value__card h3 {
  font-size: 1.15rem;
  margin: 0 0 8px;
}
.value__card p {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 960px) {
  .value__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .value__grid { grid-template-columns: 1fr; }
}

/* ====== ARCHITECTURE FLOW ====== */
.arch {
  background: var(--ink);
  color: var(--paper);
}
.arch .section__eyebrow { color: var(--accent); }
.arch .section__title { color: var(--paper); }
.arch .section__deck { color: rgba(251, 250, 246, 0.7); }
.arch__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.arch__flow {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.arch__layer {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 20px 18px;
  position: relative;
}
.arch__layer::after {
  content: '';
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 12px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12' fill='none' stroke='%233df5b4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='2' cy='6' r='1' fill='%233df5b4' stroke='none'/%3E%3Ccircle cx='7' cy='6' r='1' fill='%233df5b4' stroke='none'/%3E%3Ccircle cx='12' cy='6' r='1' fill='%233df5b4' stroke='none'/%3E%3Cpath d='M18 6h9M23 2l4 4-4 4'/%3E%3C/svg%3E");
}
.arch__layer:last-child::after { display: none; }
.arch__layer--core {
  background: linear-gradient(180deg, rgba(61, 245, 180, 0.12), rgba(61, 245, 180, 0.02));
  border-color: rgba(61, 245, 180, 0.4);
}
.arch__layer h3 {
  color: var(--paper);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-weight: 500;
}
.arch__layer p {
  font-size: 0.85rem;
  color: rgba(251, 250, 246, 0.7);
  margin: 0;
  line-height: 1.5;
}
.arch__cta { margin-top: 36px; }
.arch .btn--ghost { color: var(--paper); border-color: rgba(251, 250, 246, 0.4); }
.arch .btn--ghost:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 960px) {
  .arch__flow { grid-template-columns: 1fr; }
  .arch__layer::after {
    right: 50%;
    top: auto;
    bottom: -22px;
    transform: translateX(50%) rotate(90deg);
  }
}

/* ====== ENGINE TEASE ====== */
.engine-tease {
  background: var(--paper);
}
.engine-tease__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.engine-tease__copy .section__deck { margin-bottom: 24px; }
.engine-tease__list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.engine-tease__list li {
  padding: 14px 0;
  border-top: 1px solid var(--hairline-dark);
  font-size: 0.96rem;
}
.engine-tease__list li:last-child { border-bottom: 1px solid var(--hairline-dark); }
.engine-tease__list strong {
  color: var(--ink);
  font-weight: 600;
}

.engine-tease__diagram {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.engine-tease__code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(251, 250, 246, 0.9);
  white-space: pre-wrap;
}
.t--kw  { color: var(--accent); }
.t--str { color: var(--accent-warm); }
.t--num { color: #82aaff; }
.t--fn  { color: #c792ea; }
.t--op  { color: #89ddff; }

@media (max-width: 960px) {
  .engine-tease__inner { grid-template-columns: 1fr; }
}

/* ====== TOPOLOGIES ====== */
.topos { background: var(--parchment); }
.topos__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.topos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.topo {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.topo:hover {
  border-color: var(--accent-deep);
  transform: translateY(-2px);
}
.topo--featured {
  background: linear-gradient(180deg, var(--ink), var(--ink-soft));
  color: var(--paper);
  border-color: var(--accent);
}
.topo--featured h3 { color: var(--paper); }
.topo--featured .topo__sub { color: rgba(251, 250, 246, 0.6); }
.topo--featured li { color: rgba(251, 250, 246, 0.85); border-color: rgba(255,255,255,0.1); }
.topo__badge {
  position: absolute;
  top: -10px; right: 24px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.topo h3 { margin: 0 0 6px; font-size: 1.2rem; }
.topo__sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
}
.topo ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.topo li {
  font-size: 0.92rem;
  padding: 12px 0;
  border-top: 1px solid var(--hairline-dark);
  color: var(--ink);
}
.topo li:last-child { border-bottom: 1px solid var(--hairline-dark); }
.topos__cta { margin-top: 36px; }
@media (max-width: 960px) {
  .topos__grid { grid-template-columns: 1fr; }
}

/* ====== USE CASES (home) ====== */
.usecases { background: var(--paper); }
.usecases__inner { max-width: var(--container); margin: 0 auto; }
.usecases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.usecase {
  display: block;
  background: var(--parchment);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  padding: 32px;
  color: var(--ink);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.usecase:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--accent-deep);
}
.usecase__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  margin: 0 0 12px;
}
.usecase h3 { margin: 0 0 8px; }
.usecase p { color: var(--muted); margin: 0; font-size: 0.95rem; }
@media (max-width: 960px) {
  .usecases__grid { grid-template-columns: 1fr; }
}

/* ====== SPECS PREVIEW ====== */
.specs-preview { background: var(--ink); color: var(--paper); }
.specs-preview .section__eyebrow { color: var(--accent); }
.specs-preview .section__title { color: var(--paper); }
.specs-preview__inner { max-width: var(--container); margin: 0 auto; }
.specs-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 40px;
  margin: 40px 0;
}
.specs-preview__cell {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.specs-preview__cell dt {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.specs-preview__cell dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--paper);
}
.specs-preview .btn--ghost {
  color: var(--paper);
  border-color: rgba(251, 250, 246, 0.4);
}
.specs-preview .btn--ghost:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 960px) {
  .specs-preview__grid { grid-template-columns: 1fr; }
}

/* ====== CTA BAND ====== */
.cta-band {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: var(--ink);
  text-align: center;
}
.cta-band__inner {
  max-width: 720px;
  margin: 0 auto;
}
.cta-band__title { color: var(--ink); }
.cta-band__deck {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  color: rgba(6, 18, 15, 0.85);
  margin-bottom: 32px;
}
.cta-band .btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.cta-band .btn--primary:hover { background: var(--ink-soft); color: var(--paper); }
.cta-band .btn--ghost {
  color: var(--ink);
  border-color: var(--ink);
}
.cta-band .btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* ====== ENTRY (single page) ====== */
.entry { max-width: 760px; margin: 0 auto; padding: clamp(60px, 8vw, 100px) var(--gutter); }
.entry__header { margin-bottom: 40px; }
.entry__title { margin: 0 0 16px; font-size: clamp(2rem, 5vw, 3.2rem); }
.entry__deck { font-family: var(--font-serif); font-size: 1.2rem; color: var(--muted); }
.entry__meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.entry__body { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.75; }
.entry__body h2 { font-family: var(--font-display); font-size: 1.8rem; margin: 1.6em 0 0.6em; }
.entry__body h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 1.4em 0 0.4em; }
.entry__body p { margin: 0 0 1.2em; }
.entry__body a { color: var(--accent-deep); border-bottom: 1px solid var(--accent); }
.entry__body blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.6em 0;
  padding: 0.4em 0 0.4em 1.2em;
  font-style: italic;
  color: var(--muted);
}
.entry__body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--parchment);
  padding: 2px 6px;
  border-radius: 4px;
}
.entry__body pre {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  background: var(--ink);
  color: rgba(251, 250, 246, 0.92);
  padding: 20px;
  border-radius: var(--radius);
  overflow-x: auto;
  line-height: 1.6;
}
.entry__body pre code { background: transparent; padding: 0; color: inherit; }
.entry__body ul, .entry__body ol { padding-left: 1.4em; }
.entry__body li { margin: 0.4em 0; }

.entry__footer { margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--hairline-dark); }
.entry__back { margin-bottom: 24px; }
.entry__back a { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.05em; }
.entry__related-heading {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 12px;
}
.entry__related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.entry__related-list li {
  padding: 12px 0;
  border-top: 1px solid var(--hairline-dark);
}
.entry__related-list li:last-child { border-bottom: 1px solid var(--hairline-dark); }

/* ====== SECTION LANDING ====== */
.section { max-width: var(--container); margin: 0 auto; padding: clamp(60px, 8vw, 100px) var(--gutter); }
.section__header { margin-bottom: 48px; max-width: 720px; }
.section__title { margin: 0 0 16px; }
.section__digest { font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.7; max-width: 720px; color: var(--ink); }
.section__divider {
  border-top: 1px solid var(--hairline-dark);
  margin: 56px 0;
}
.section__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 720px) {
  .section__list { grid-template-columns: 1fr; }
}

/* ====== CARDS ====== */
.card {
  background: var(--paper);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-deep); }
.card__link {
  display: block;
  padding: 28px;
  color: var(--ink);
}
.card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 8px;
}
.card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.card__excerpt {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 16px;
}
.card__cta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--accent-deep);
  margin: 0;
}

/* ====== FOOTER ====== */
.site-footer {
  background: var(--ink);
  color: rgba(251, 250, 246, 0.7);
  padding: 64px var(--gutter) 24px;
  font-size: 0.92rem;
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
.brand--footer { color: var(--paper); margin-bottom: 16px; }
.brand--footer .brand__name { color: rgba(251, 250, 246, 0.6); }
.footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: rgba(251, 250, 246, 0.8);
  margin: 0 0 16px;
}
.footer__meta { font-size: 0.85rem; color: rgba(251, 250, 246, 0.5); margin: 0; }
.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__list li { padding: 6px 0; }
.footer__list a { color: rgba(251, 250, 246, 0.7); }
.footer__list a:hover { color: var(--accent); }
.footer__contact a { color: rgba(251, 250, 246, 0.9); border-bottom: 1px solid rgba(255,255,255,0.15); }
.footer__bottom {
  max-width: var(--container);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(251, 250, 246, 0.5);
}
.footer__signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.signal-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.8s infinite;
}
.signal-dot:nth-child(2) { animation-delay: 0.3s; }
.signal-dot:nth-child(3) { animation-delay: 0.6s; }
.signal-label { margin-left: 6px; letter-spacing: 0.05em; }
@media (max-width: 720px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; gap: 12px; }
}

/* ====== 404 ====== */
.notfound {
  text-align: center;
  padding-top: 120px;
  padding-bottom: 120px;
}
.notfound__svg {
  width: 100%;
  max-width: 360px;
  margin: 0 auto 24px;
  opacity: 0.55;
}
.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 12rem);
  font-weight: 700;
  color: var(--accent-deep);
  margin: 0;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* ====== PROSE GENERIC ====== */
.prose { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.7; color: var(--ink); }
.prose h2 { font-family: var(--font-display); margin: 1.5em 0 0.4em; font-size: 1.5rem; }
.prose h3 { font-family: var(--font-display); margin: 1.3em 0 0.3em; font-size: 1.2rem; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0.3em 0; }
.prose a { color: var(--accent-deep); border-bottom: 1px solid var(--accent); }

/* =========================================================
   CONTENT COMPONENTS — added for the content + polish pass.
   Section pages render markdown into `.prose`; single pages
   into `.entry__body`. `.prose` previously lacked styling for
   code blocks, tables, and quotes — added here for both.
   ========================================================= */

/* ---- Prose code blocks & inline code (mirror .entry__body) ---- */
.prose pre {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: var(--ink);
  color: rgba(251, 250, 246, 0.92);
  padding: 22px 24px;
  border-radius: var(--radius);
  overflow-x: auto;
  line-height: 1.55;
  margin: 1.6em 0;
  box-shadow: var(--shadow-2);
}
.prose pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--parchment);
  padding: 2px 6px;
  border-radius: 4px;
}
.prose blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.6em 0;
  padding: 0.4em 0 0.4em 1.2em;
  font-style: italic;
  color: var(--muted);
}
/* ASCII flow/topology diagrams read better a touch smaller + tighter */
.prose pre code.language-fallback,
.prose pre:not(:has(code[class*="language-"])) { line-height: 1.4; }

/* ---- Tables (both prose + entry contexts) ---- */
.table-wrap {
  overflow-x: auto;
  margin: 1.8em 0;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.45;
}
.table-wrap th,
.table-wrap td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline-dark);
  white-space: nowrap;
}
.table-wrap td:last-child { white-space: normal; }
.table-wrap thead th {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--parchment);
  border-bottom: 1px solid var(--hairline-dark);
}
.table-wrap tbody tr:last-child td { border-bottom: none; }
.table-wrap tbody tr:hover { background: rgba(61, 245, 180, 0.04); }
.table-wrap td code { white-space: nowrap; }

/* ---- Contact form ---- */
.cform {
  margin: 8px 0 8px;
  padding: 32px;
  background: var(--parchment);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-lg);
}
.cform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.cform__field { display: flex; flex-direction: column; gap: 7px; }
.cform__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cform__input {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cform__input:focus {
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(61, 245, 180, 0.18);
}
.cform__textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.cform__submit { margin-top: 4px; }
.cform__note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--muted);
  margin: 16px 0 0;
}
.cform__note a { color: var(--accent-deep); border-bottom: 1px solid var(--accent); }
@media (max-width: 560px) {
  .cform { padding: 22px; }
  .cform__row { grid-template-columns: 1fr; gap: 18px; }
}

/* ====== REDUCED MOTION ====== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   ===================  ROUND-2 VISUAL POLISH  =========================
   New components + detail layers. Appended (not interleaved) so the
   round-1 skeleton above stays untouched. Each block notes its deps.
   ===================================================================== */

/* ========== HERO DETAIL ==========
   Subtitle wordplay line, version tag, animated CTA chevrons, weightier
   primary button, differentiated numeric vs label stats. Deps: home/hero.html */
.hero__subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--accent-deep);
  margin: -8px 0 24px;
  max-width: 48ch;
  text-wrap: balance;
}
.hero__version {
  position: absolute;
  left: var(--gutter);
  bottom: 22px;
  margin: 0;
  padding-left: 34px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.hero__version::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 24px; height: 1px;
  background: var(--accent-deep);
}
@media (max-width: 960px) { .hero__version { display: none; } }

.btn__chevron { transition: transform var(--transition-fast) var(--ease-out-quart); }
.btn:hover .btn__chevron { transform: translateX(4px); }
.btn--primary {
  box-shadow: 0 2px 10px rgba(22, 196, 137, 0.25);
  transition: transform var(--transition-fast) var(--ease-out-quart),
              background 0.15s ease, box-shadow var(--transition-fast) ease;
}
.btn--primary:hover {
  transform: translateY(-2px) scale(var(--scale-hover));
  box-shadow: 0 8px 22px rgba(22, 196, 137, 0.35);
}

.hero__stat--num .hero__stat-value {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum' 1;
  background: linear-gradient(135deg, var(--ink), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__stat:not(.hero__stat--num) .hero__stat-value {
  font-size: 1.05rem;
  font-weight: 600;
  align-self: start;
}

/* ========== CONCENTRIC STATUS DOT ==========
   Single mint dot -> three staggered rings radiating outward. Override of
   the round-1 .status-dot (same selector, later in source = wins). */
.status-dot {
  position: relative;
  box-shadow: none;
  animation: none;
}
.status-dot::before,
.status-dot::after {
  content: '';
  position: absolute;
  inset: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--accent);
  animation: dotRipple 2.4s var(--ease-out-quart) infinite;
}
.status-dot::after { animation-delay: 1.2s; }
@keyframes dotRipple {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ========== EYEBROW HAIRLINE ==========
   Editorial leading rule before every section/entry eyebrow. */
.section__eyebrow,
.entry__eyebrow,
.entry__related-heading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.18em;
}
.section__eyebrow::before,
.entry__eyebrow::before,
.entry__related-heading::before {
  content: '';
  width: 24px; height: 1px;
  background: currentColor;
  opacity: 0.7;
  flex: none;
}

/* ========== DISPLAY TITLE REFINEMENT ==========
   Ligatures + balanced wrapping on the largest section/hero/entry titles. */
.hero__title,
.section__title,
.entry__title,
.value__title,
.cta-band__title {
  font-feature-settings: 'liga' 1, 'kern' 1, 'calt' 1;
  text-wrap: balance;
}

/* ========== PROSE DETAIL ==========
   Orphan/widow control, drop-cap, pull-quote, inline-code hover underline.
   Deps: .entry__body / .prose markdown render. */
.entry__body p, .prose p { text-wrap: pretty; }
.entry__body > h2 + p::first-letter,
.prose > h2 + p::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.1rem;
  line-height: 0.78;
  font-weight: 700;
  color: var(--accent-deep);
  padding: 4px 10px 0 0;
}
.entry__body p:has(> em:first-child:last-child),
.prose p:has(> em:first-child:last-child) {
  border-left: 4px solid var(--accent);
  padding-left: 1.1em;
  font-size: 1.35rem;
  font-style: italic;
  color: var(--ink);
}
.entry__body :not(pre) > code,
.prose :not(pre) > code {
  position: relative;
  background-image: linear-gradient(var(--accent-deep), var(--accent-deep));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size 0.2s ease;
}
.entry__body :not(pre) > code:hover,
.prose :not(pre) > code:hover { background-size: 100% 1.5px; }

/* ========== HEADER SHRINK + NAV LINKS ==========
   .is-scrolled toggled by bobulator.js past 40px. Header tightens and
   grows a mint hairline; nav links get a sliding underline + active dot. */
.site-header {
  transition: padding 0.25s var(--ease-out-quart), background 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--accent-deep);
  box-shadow: 0 1px 0 rgba(22, 196, 137, 0.25), var(--shadow-1);
}
.site-header.is-scrolled .header__inner { padding-top: 8px; padding-bottom: 8px; }
.header__inner { transition: padding 0.25s var(--ease-out-quart); }
.nav__link { position: relative; }
.nav__link::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 1.5px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--ease-out-quart);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active::before {
  content: '\00B7';
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  color: var(--accent-deep);
  font-weight: 700;
}

/* ========== CARD HOVER DETAIL ==========
   Inner mint border-glow on hover + a subtle scale on the icon/title only.
   Deps: .value__card, .topo, .usecase, .card. */
.value__card, .topo, .usecase, .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              border-color 0.2s ease, outline-color 0.2s ease;
}
.value__card:hover, .topo:hover, .usecase:hover, .card:hover {
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--accent-deep);
}
.value__icon, .value__card h3,
.usecase h3, .card__title {
  transition: transform 0.2s var(--ease-out-quart);
  transform-origin: left center;
}
.value__card:hover .value__icon,
.value__card:hover h3,
.usecase:hover h3,
.card:hover .card__title { transform: scale(var(--scale-hover)); }

/* ========== USE-CASE CHIP + REVEAL CTA ==========
   Vertical-name mono chip + hover-revealed arrow CTA. Deps: home/usecases.html */
.usecase { position: relative; border-radius: var(--radius-lg); }
.usecase__chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  border: 1px solid var(--accent-deep);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 14px;
}
.usecase__more {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
  margin-top: 14px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s var(--ease-out-quart);
}
.usecase:hover .usecase__more { opacity: 1; transform: translateX(0); }

/* ========== FOOTER SIGNAL WAVE ==========
   Three dots reading L->R as a signal arriving. Override of round-1 pulse. */
.signal-dot {
  animation: signalWave 1.6s var(--ease-out-quart) infinite;
}
.signal-dot:nth-child(1) { animation-delay: 0s; }
.signal-dot:nth-child(2) { animation-delay: 0.2s; }
.signal-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes signalWave {
  0%, 100% { opacity: 0.15; transform: translateY(1px) scale(0.85); }
  40%      { opacity: 1;    transform: translateY(-1px) scale(1.1); }
}

/* ========== LIVE SIGNAL PULSE (5-bar RSSI) ==========
   Inline strength meter; JS randomizes --lvl every 2s. Deps: signal bars in
   hero stats + footer + bobulator.js. Idle CSS animation as graceful default. */
.sigbars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  vertical-align: middle;
}
.sigbars__bar {
  width: 3px;
  background: var(--accent-deep);
  border-radius: 1px;
  height: calc(4px + var(--lvl, 0.5) * 14px);
  opacity: calc(0.45 + var(--lvl, 0.5) * 0.55);
  transition: height 0.4s var(--ease-out-quart), opacity 0.4s ease;
  animation: barIdle 2.2s ease-in-out infinite;
}
.sigbars__bar:nth-child(1) { animation-delay: 0s; }
.sigbars__bar:nth-child(2) { animation-delay: 0.18s; }
.sigbars__bar:nth-child(3) { animation-delay: 0.36s; }
.sigbars__bar:nth-child(4) { animation-delay: 0.54s; }
.sigbars__bar:nth-child(5) { animation-delay: 0.72s; }
@keyframes barIdle {
  0%, 100% { transform: scaleY(0.55); }
  50%      { transform: scaleY(1); }
}
.sigbars[data-js] .sigbars__bar { animation: none; }
.footer__signal .sigbars { height: 12px; }
.footer__signal .sigbars__bar { background: var(--accent); }

/* ========== MARQUEE LOGO STRIP ==========
   Seamless infinite scroll of a duplicated lockup list. Deps: home/marquee.html */
.marquee {
  background: var(--paper);
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  padding: 22px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 64px;
  animation: marqueeScroll 32s linear infinite;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.marquee__item::before {
  content: '';
  width: 8px; height: 8px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 2px;
  transform: rotate(45deg);
  flex: none;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 32px)); }
}

/* ========== WAVE DIVIDER ==========
   Subtle sine-wave hairline bridging two color-shifting sections. The block's
   inline background = the upper section color; the next section provides the
   lower color. Deps: wave-divider.html (home index). */
.wave-divider {
  line-height: 0;
  margin-top: -1px;
  margin-bottom: -1px;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 56px;
}

/* ========== SCROLL-TO-TOP BUTTON ==========
   Fixed mint FAB; .is-visible toggled by bobulator.js past 800px. */
.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ink);
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out-quart),
              background 0.15s ease;
  z-index: 60;
}
.to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  animation: toTopPulse 2s ease-out 3;
}
.to-top:hover { background: var(--accent-deep); transform: translateY(-2px) scale(1.05); }
@keyframes toTopPulse {
  0%, 100% { box-shadow: var(--shadow-2), 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: var(--shadow-2), 0 0 0 8px rgba(61, 245, 180, 0); }
}

/* ========== ROUND-2 REDUCED MOTION ==========
   The global * rule above already neutralizes animation/transition timing;
   these make the static end-state legible for the JS-driven components. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; }
  .to-top.is-visible { animation: none !important; }
  .sigbars__bar { height: 11px; opacity: 0.85; }
  .status-dot::before { opacity: 0.6; }
  .status-dot::after { display: none; }
}

/* =====================================================================
   ===================  ROUND-3 MICRO-DETAIL  ==========================
   "Every pixel considered" pass. Type refinement, spacing rhythm,
   editorial marks, and a handful of high-craft components. Appended at
   the very end so rounds 1+2 stay byte-for-byte untouched. Each block
   names its template/JS deps. Reduced-motion handled in the final block.
   ===================================================================== */

/* ========== R3 TOKENS ==========
   Additive design tokens. A second :root block (later in source) merges
   with the round-1 token block at the top — no overrides, only new keys. */
:root {
  --space-unit:   8px;             /* vertical-rhythm base; multiples below */
  --space-2:      16px;
  --space-3:      24px;
  --space-4:      32px;
  --space-6:      48px;
  --text-balance: balance;         /* headline wrap-balancing */
  --accent-mint-deep: #0fa873;     /* one shade past --accent-deep for sweeps */
  --shadow-glow:  0 0 0 1px rgba(61, 245, 180, 0.4),
                  0 4px 16px rgba(61, 245, 180, 0.2);
  --grid-ink:     rgba(6, 18, 15, 0.05);  /* dot-grid on light sections  */
  --grid-mint:    rgba(61, 245, 180, 0.06);/* dot-grid on dark  sections  */
}

/* ========== DOT-GRID TEXTURE ==========
   A whisper-faint dot lattice on hero + architecture. Single radial-gradient
   tile, repeated; opacity is intentionally near-threshold (visible only on
   close inspection). Sits under content via a ::before at z-index 0.
   Deps: home/hero.html (.hero), home/architecture.html (.arch). */
.hero,
.arch { position: relative; }
.hero::before,
.arch::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--grid-ink) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
.arch::before { background-image: radial-gradient(var(--grid-mint) 1px, transparent 1px); }
.hero__inner,
.hero__signal,
.arch__inner { position: relative; z-index: 1; }

/* ========== LAYERED SECTION BACKGROUNDS ==========
   A barely-there vertical gradient over the flat section fills so the
   color-shifting home sections read with depth rather than as flat bands.
   Deps: home/value.html, home/specs.html, home/topologies.html. */
.value {
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 540px);
}
.topos,
.usecases {
  background-image: linear-gradient(180deg,
    rgba(6, 18, 15, 0.015) 0%,
    rgba(6, 18, 15, 0) 480px);
}
.specs-preview {
  background-image: linear-gradient(180deg,
    rgba(61, 245, 180, 0.04) 0%,
    rgba(61, 245, 180, 0) 420px);
}
/* ========== TYPE REFINEMENT ==========
   §A. Crafted hero title (kerning + mint period + corner brackets), oldstyle
   figures in prose, tabular figures in specs/stats, and an intentional mono
   feature set for units. Deps: home/hero.html (.hero__period), home eyebrows
   (.section__num), prose tables. */

/* --- Hero title: tighter crafted tracking + framed by 1px mint brackets --- */
.hero__title {
  --title-track: -0.045em;
  letter-spacing: var(--title-track);
  display: inline-block;
  position: relative;
  padding: 10px 18px;
  margin-left: -18px;          /* keep optical left edge aligned with body */
}
.hero__title::before,
.hero__title::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity 600ms var(--ease-out-quart);
}
.hero__title::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hero__title::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.home .hero__title::before,
.home .hero__title::after { opacity: 0.9; }      /* fade in once loaded */
/* the terminal period: ink until the title settles, then mint to catch the eye */
.hero__period { color: var(--ink); transition: color 900ms var(--ease-out-quart) 600ms; }
.home .hero__period,
.hero__title:hover .hero__period { color: var(--accent-deep); }

/* --- Oldstyle figures in running prose (12 sits like ₁₂ against lowercase) --- */
.entry__body.prose,
.section__deck,
.entry__deck,
.hero__deck,
.engine-tease__list {
  font-variant-numeric: oldstyle-nums proportional-nums;
}
/* --- Tabular figures where numbers must align in columns --- */
.prose table,
.entry table,
.hero__stat-value,
.specs-preview,
.arch__stats {
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- Mono: intentional feature set so units (ms, mA, dBm, %) read crafted --- */
code, kbd, samp, pre,
.section__num,
.hero__version,
.section__eyebrow,
.entry__eyebrow {
  font-feature-settings: 'ss01' 1, 'zero' 1, 'cv05' 1;
}

/* --- Section "0X /" prefix + kicker square (§A.4 + §C.9 in one mark) --- */
.section__eyebrow:has(.section__num)::before { display: none; }  /* replace hairline */
.section__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
}
.section__num::before {                /* the editorial kicker mark */
  content: '';
  width: 8px; height: 8px;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.section__num::after { content: '/'; color: var(--muted-soft); font-weight: 400; }

/* ========== SPACING & RHYTHM ==========
   §B. More breathing room on big screens (home sections, excl. hero which
   keeps its taller bespoke padding), and a touch more air above hero stat
   labels using the --space-unit scale. */
.home > section:not(.hero) { padding: clamp(80px, 10vw, 140px) var(--gutter); }
.hero__stats { margin-top: var(--space-6); }
.hero__stat { gap: var(--space-unit); }     /* was 6px — value floats above label */
.hero__stat-label { margin-top: 2px; }
.engine-tease__list li { margin-bottom: var(--space-2); }

/* ========== CARD CORNER MARK ==========
   §C.10. A tiny mono '+' that fades into the top-right corner on hover, the
   way a technical drawing marks a registration point. Deps: .value__card,
   .topo, .usecase__chip. */
.value__card,
.topo,
.usecase__chip { position: relative; }
.value__card::after,
.topo::after,
.usecase__chip::after {
  content: '+';
  position: absolute;
  top: 10px; right: 12px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-deep);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--transition-fast) ease,
              transform var(--transition-fast) var(--ease-out-quart);
  pointer-events: none;
}
.value__card:hover::after,
.topo:hover::after,
.usecase__chip:hover::after { opacity: 0.8; transform: translateY(0); }

/* ========== CTA BUTTON DEPTH ==========
   §C.11 + §E.22. Primary pill gets a mint->deep gradient sweep on hover and
   the mint-tinted --shadow-glow; ghost variant's hairline thickens. */
.btn--primary {
  background-image: linear-gradient(120deg, var(--accent) 0%, var(--accent) 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  transition: transform var(--transition-fast) var(--ease-out-quart),
              background-position 320ms var(--ease-out-quart),
              box-shadow var(--transition-fast) ease;
}
.btn--primary:hover {
  background-image: linear-gradient(120deg, var(--accent) 0%, var(--accent-mint-deep) 100%);
  background-position: 100% 0;
  box-shadow: var(--shadow-glow);
}
.btn--ghost { border-width: 1px; transition: border-color var(--transition-fast) ease,
              box-shadow var(--transition-fast) ease, background 0.15s ease, color 0.15s ease; }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }  /* hairline thickens to ~2px */

/* ========== FOOTER BRAND PULSE ==========
   §C.12. The footer brand mark breathes on a slow 6s cycle so the imprint
   feels alive without ever calling attention to itself. */
.brand--footer .brand__mark { color: var(--accent-deep); animation: footerBrandPulse 6s ease-in-out infinite; }
@keyframes footerBrandPulse {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* ========== SCROLL PROGRESS LINE ==========
   §D.16. A 1px mint line pinned to the right edge of the viewport that fills
   top->bottom with scroll. Barely-there; gives a sense of place. JS sets
   --p (0..1) on the fill via scaleY. Deps: footer.html, bobulator.js. */
.scroll-progress {
  position: fixed;
  top: 0; right: 0;
  width: 2px; height: 100vh;
  z-index: 60;
  background: rgba(6, 18, 15, 0.06);
  pointer-events: none;
}
.scroll-progress__fill {
  display: block;
  width: 100%; height: 100%;
  transform-origin: top;
  transform: scaleY(var(--p, 0));
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  will-change: transform;
}

/* ========== COPY TOAST ==========
   §D.17 + §F.24. A tiny "copied!" confirmation that fades in bottom-center on
   any clipboard action, then fades out. JS toggles .is-on. */
.copy-toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translate(-50%, 8px);
  z-index: 70;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms var(--ease-out-quart);
}
.copy-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ========== HERO SCROLL CUE ==========
   §D.18. A gently pulsing "scroll" cue pinned to the hero's lower edge. */
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.hero__scroll:hover { color: var(--accent-deep); }
.hero__scroll-arrow {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: heroScrollCue 1.8s var(--ease-out-quart) infinite;
}
@keyframes heroScrollCue {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
  50%      { transform: rotate(45deg) translate(2px, 2px); opacity: 1; }
}
@media (max-width: 960px) { .hero__scroll { display: none; } }

/* ========== VALUE SECTION ORBIT DOTS ==========
   §D.19. Four faint mint specks drifting in the value section's whitespace,
   like distant stars. Absolutely placed via inline top/left, slow drift. */
.value { position: relative; overflow: hidden; }
.value__orbits { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.value__orbit {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  box-shadow: 0 0 8px 1px var(--accent-glow);
  animation: orbitDrift 14s ease-in-out infinite;
}
.value__orbit:nth-child(2) { width: 3px; height: 3px; animation-duration: 19s; animation-delay: -4s; }
.value__orbit:nth-child(3) { width: 5px; height: 5px; animation-duration: 16s; animation-delay: -8s; }
.value__orbit:nth-child(4) { width: 2px; height: 2px; animation-duration: 22s; animation-delay: -2s; }
.value__inner { position: relative; z-index: 1; }
@keyframes orbitDrift {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(10px, -14px); }
  66%      { transform: translate(-8px, 8px); }
}

/* ========== HOME BRIDGE LINE ==========
   §D.15. A single literary bridge between architecture and engine. */
.home__bridge {
  max-width: 34ch;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter);
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: var(--text-balance);
}

/* ========== ENGINE CODE: CHROME + LINE NUMBERS + COPY ==========
   §F.24. Window chrome (traffic dots + filename + copy button), a leading
   comment line, and a dimmed leading-zero line-number gutter via counters.
   Deps: home/engine.html, bobulator.js (data-clip-lines). */
.engine-tease__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -8px -8px 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.engine-tease__dots { display: inline-flex; gap: 6px; }
.engine-tease__dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(251, 250, 246, 0.18);
}
.engine-tease__dots i:first-child { background: rgba(245, 107, 61, 0.55); }
.engine-tease__dots i:nth-child(2) { background: rgba(245, 196, 61, 0.55); }
.engine-tease__dots i:nth-child(3) { background: rgba(61, 245, 180, 0.55); }
.engine-tease__file {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-soft);
  letter-spacing: 0.04em;
}
.code-copy {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(251, 250, 246, 0.06);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: rgba(251, 250, 246, 0.75);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.code-copy:hover { background: rgba(61, 245, 180, 0.12); color: var(--accent); border-color: rgba(61, 245, 180, 0.4); }
.code-copy.is-copied { color: var(--accent); border-color: rgba(61, 245, 180, 0.5); }

.engine-tease__code { counter-reset: ln; white-space: normal; }
.engine-tease__code .cl {
  counter-increment: ln;
  display: block;
  position: relative;
  padding-left: 3.2em;
  white-space: pre;
  min-height: 1.7em;
}
.engine-tease__code .cl::before {
  content: counter(ln, decimal-leading-zero);
  position: absolute;
  left: 0;
  width: 2.2em;
  text-align: right;
  color: rgba(251, 250, 246, 0.26);
  -webkit-user-select: none;
          user-select: none;
}
.t--cm { color: rgba(251, 250, 246, 0.4); font-style: italic; }

/* ========== COLOPHON STRIP ==========
   §D.14. A thin imprint strip above the footer — magazine masthead energy. */
.colophon {
  background: var(--ink);
  border-top: 1px solid var(--hairline);
  padding: 14px var(--gutter);
  text-align: center;
}
.colophon__line {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-soft);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.colophon__dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--accent-deep);
  display: inline-block;
}

/* ========== H2 ANCHOR LINKS ==========
   §D.17. A hover-revealed '#' beside every entry/digest h2 that copies the
   section's deep link. JS injects the <a>; this styles + reveals it. */
.entry__body h2,
.section__digest h2 { position: relative; }
.h-anchor {
  margin-left: 0.4em;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--accent-deep);
  opacity: 0;
  transition: opacity var(--transition-fast) ease;
  text-decoration: none;
}
.entry__body h2:hover .h-anchor,
.section__digest h2:hover .h-anchor,
.h-anchor:focus-visible { opacity: 0.7; }
.h-anchor:hover { opacity: 1 !important; }

/* ========== CONTACT: SUBMIT BUSY STATE + "WHAT HAPPENS NEXT" ==========
   §F.26. Submit gets a "Sending…" flourish (JS-driven); a numbered timeline
   below the form sets expectations with mint step markers + connectors. */
.cform__submit.is-busy { opacity: 0.85; pointer-events: none; }
.cform__submit.is-busy::after {
  content: '';
  width: 12px; height: 12px;
  margin-left: 4px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: cformSpin 0.7s linear infinite;
}
@keyframes cformSpin { to { transform: rotate(360deg); } }

.next-steps {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline-dark);
}
.next-steps__kicker {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 var(--space-3);
}
.next-steps__list { list-style: none; margin: 0; padding: 0; }
.next-steps__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}
.next-steps__step::before {       /* connector line between steps */
  content: '';
  position: absolute;
  left: 13px; top: 28px; bottom: 0;
  width: 1px;
  background: linear-gradient(var(--accent), rgba(61, 245, 180, 0.15));
}
.next-steps__step:last-child { padding-bottom: 0; }
.next-steps__step:last-child::before { display: none; }
.next-steps__num {
  flex: none;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.next-steps__body { font-size: 0.96rem; line-height: 1.5; padding-top: 3px; }
.next-steps__body strong { color: var(--ink); font-weight: 600; }

/* ========== FAQ "BACK TO TOP" ==========
   §F.27. Quiet return link after each answer. JS injects the <p>. */
.faq-top { margin: -4px 0 36px; }
.faq-top a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.faq-top a:hover { color: var(--accent-deep); }

/* ========== GLOSSARY 2-COLUMN ==========
   §F.28. The glossary digest flows into two columns; its h2 letter-group
   headers span both columns as mint-ruled dividers. Deps: list.html
   [data-section="glossary"]. */
@media (min-width: 720px) {
  [data-section="glossary"] .section__digest {
    column-count: 2;
    column-gap: 56px;
  }
}
[data-section="glossary"] .section__digest > p { break-inside: avoid; }
[data-section="glossary"] .section__digest h2 {
  column-span: all;
  margin-top: 1.4em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--accent);
  font-size: 1.2rem;
}
[data-section="glossary"] .section__digest h2:first-of-type { margin-top: 0.4em; }

/* ========== ROUND-3 REDUCED MOTION ==========
   Neutralize the new ambient/JS-driven motion; keep static end-states legible.
   (The global * rule near the top already zeroes timings — these add intent.) */
@media (prefers-reduced-motion: reduce) {
  .hero__title::before,
  .hero__title::after { opacity: 0.9; }
  .hero__period { color: var(--accent-deep); }
  .hero__scroll-arrow { animation: none !important; }
  .brand--footer .brand__mark { animation: none !important; opacity: 0.9; }
  .value__orbit { animation: none !important; }
  .scroll-progress__fill { transition: none !important; }
  .cform__submit.is-busy::after { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ROUND 4 — VISUAL FLAIR (textures · graphics · shine)
   New CSS only; all selectors live below this banner. Inline SVG data
   URIs kept compact (<2KB each). Motion honors prefers-reduced-motion
   at the very end of this block.
   ════════════════════════════════════════════════════════════════════ */

/* ========== §G25 · FLAIR TOKENS ========== */
:root {
  /* feTurbulence noise — film-grain overlay, tuned barely-visible */
  --noise-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* softer, lower-frequency fibres for parchment paper */
  --paper-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.012' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --circuit-line: rgba(61, 245, 180, 0.10);  /* faint mint trace on dark */
  --glow-mint:    rgba(61, 245, 180, 0.45);  /* CTA halo + LED bloom      */
  --glow-mint-soft: rgba(61, 245, 180, 0.16);
}

/* ========== §A2 · FILM-GRAIN OVERLAY ==========
   A whole-site grain laid over everything via body::before. ~4% opacity —
   you feel it more than see it. pointer-events:none keeps it inert. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--noise-url);
  background-size: 140px 140px;
  opacity: 0.035;
  mix-blend-mode: multiply;
}

/* ========== §A3 · PAPER TEXTURE (parchment surfaces) ==========
   Value strip + FAQ ride on parchment; lay soft fibres over them. The
   texture sits at z-0 with content lifted above. Deps: .value, list FAQ. */
.value, .section[data-section="faq"] { position: relative; }
.value::after,
.section[data-section="faq"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--paper-url);
  background-size: 180px 180px;
  opacity: 0.5;
  mix-blend-mode: multiply;
}
.value__inner, .value__orbits,
.section[data-section="faq"] > * { position: relative; z-index: 1; }

/* ========== §A4 · DIAGONAL HATCHING (CTA band) ==========
   A faint 45° pinstripe over the green band for premium "engraved" texture,
   masked to fade at the vertical edges. Deps: home/cta.html (.cta-band). */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(6, 18, 15, 0.05) 0,
    rgba(6, 18, 15, 0.05) 1px,
    transparent 1px,
    transparent 9px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 55%, transparent 100%);
}
.cta-band__inner { position: relative; z-index: 1; }

/* ========== §B5/§B15 · HERO SCHEMATIC + HOVER ==========
   Annotation labels fade up on load; io-nodes lift and brighten their trace
   on hover for a "live circuit" feel. Pure CSS — no JS. */
.hero-svg__labels text,
.hero-svg__frame { opacity: 0; animation: heroLabelIn 0.9s var(--ease-out-quart) 0.5s forwards; }
@keyframes heroLabelIn { to { opacity: 1; } }
.hero__svg .io-node {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s var(--ease-out-quart), filter 0.25s ease;
  cursor: default;
}
.hero__svg .io-node:hover {
  transform: scale(1.7);
  filter: drop-shadow(0 0 4px var(--glow-mint));
}

/* ========== §E21 · LIVE LED INDICATOR ==========
   Glowing mint core + an expanding pulse ring. 3 sizes. Deps: partials/led.html. */
.led {
  --led-size: 8px;
  position: relative;
  display: inline-block;
  width: var(--led-size);
  height: var(--led-size);
  vertical-align: baseline;
  flex: none;
}
.led--sm { --led-size: 7px; }
.led--md { --led-size: 9px; }
.led--lg { --led-size: 12px; }
.led__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 4px var(--glow-mint), 0 0 1px var(--accent-deep);
}
.led::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: ledPulse 2.4s var(--ease-out-quart) infinite;
}
@keyframes ledPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.6); opacity: 0;   }
  100% { transform: scale(2.6); opacity: 0;   }
}

/* ========== §B6 · WB-1 DEVICE RENDER ==========
   Product-shot section: copy left, SVG puck right. Deps: home/device.html. */
.device { background: var(--paper); }
.device__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.device__specs { list-style: none; margin: 24px 0 0; padding: 0; }
.device__specs li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.95rem;
  color: var(--muted);
  border-top: 1px solid var(--hairline-dark);
}
.device__specs li:first-child { border-top: none; }
.device__render { display: flex; justify-content: center; }
.device__svg { width: 100%; max-width: 420px; height: auto; }
.device__led { animation: deviceLed 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes deviceLed { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.device__led-ring { transform-box: fill-box; transform-origin: center; animation: deviceRing 2.6s var(--ease-out-quart) infinite; }
@keyframes deviceRing { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.device__arc { stroke-dasharray: 60; stroke-dashoffset: 60; animation: deviceArc 3.2s ease-in-out infinite; }
.device__arc-2 { animation-delay: 0.4s; }
.device__arc-3 { animation-delay: 0.8s; }
@keyframes deviceArc {
  0%, 100% { stroke-dashoffset: 60; opacity: 0; }
  40%, 60% { stroke-dashoffset: 0;  opacity: 1; }
}
@media (max-width: 760px) {
  .device__inner { grid-template-columns: 1fr; }
  .device__render { order: -1; }
}

/* ========== §C11 · HERO CTA GLOW ==========
   The primary hero button wears a soft mint halo that blooms on hover. */
.hero__cta-row .btn--primary {
  box-shadow: 0 0 0 1px transparent, 0 6px 22px -6px var(--glow-mint-soft);
  transition: box-shadow 0.3s var(--ease-out-quart), transform 0.2s ease, background 0.2s ease;
}
.hero__cta-row .btn--primary:hover {
  box-shadow: 0 0 0 1px var(--glow-mint-soft), 0 0 28px -2px var(--glow-mint),
              0 8px 26px -6px var(--glow-mint);
}

/* ========== §C12 · CARD 3D TILT ==========
   Grids gain perspective; cards tip subtly toward the viewer on hover with a
   shadow that tracks the tilt. Layers over the existing lift — same specificity,
   declared later, so this transform wins. */
.value__grid, .topos__grid, .usecases__grid { perspective: 1100px; }
.value__card, .topo, .usecase {
  transform-style: preserve-3d;
  transition: transform 0.28s var(--ease-out-quart), box-shadow 0.28s ease, border-color 0.2s ease;
}
.value__card:hover, .usecase:hover {
  transform: translateY(-4px) rotateX(2.5deg) rotateY(-2.5deg);
  box-shadow: -10px 16px 32px -14px rgba(6, 18, 15, 0.28),
              inset 0 0 0 1px var(--accent-deep);
}
.topo:hover {
  transform: translateY(-4px) rotateX(2.5deg) rotateY(-2.5deg);
}

/* ========== §C13 · AMBIENT GRADIENT ORBS ==========
   Large soft radial "light leaks" that drift in the empty margins of the dark
   engine + architecture sections. Decorative, behind content. */
.engine-tease, .arch { position: relative; overflow: hidden; }
.engine-tease::after, .arch::after {
  content: '';
  position: absolute;
  width: 46vw; height: 46vw;
  max-width: 560px; max-height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-mint-soft) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
  animation: orbDrift 22s ease-in-out infinite alternate;
}
.engine-tease::after { top: -12%; right: -10%; }
.arch::after { bottom: -16%; left: -8%; animation-delay: -8s; }
.engine-tease__inner, .arch__inner { position: relative; z-index: 1; }
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6%, -5%) scale(1.12); }
}

/* ========== §E20/§B7 · SCHEMATIC-GRID BACKDROP ==========
   Reusable faint engineering grid; positioned absolute to sit behind a
   container's content. Parent must be position:relative. Deps: schematic-grid.html. */
.schematic-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.schematic-grid svg { width: 100%; height: 100%; opacity: 0.9; }
.engine-tease__diagram { position: relative; }
.engine-tease__chrome, .engine-tease__code, .dataflow { position: relative; z-index: 1; }

/* ========== §E23 · DATA-FLOW VIZ ==========
   Packets stream left → through the MCU node → right, staggered. Deps: home/engine.html. */
.dataflow { width: 100%; height: 24px; margin-top: 14px; }
.dataflow__pkt {
  animation: dataflowMove 2.8s linear infinite;
}
.dataflow__pkt-2 { animation-delay: 0.7s; }
.dataflow__pkt-3 { animation-delay: 1.4s; }
.dataflow__pkt-4 { animation-delay: 2.1s; }
@keyframes dataflowMove {
  0%   { transform: translateX(-8px);  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(328px); opacity: 0; }
}

/* ========== §E22 · SPEC CALLOUTS ========== §F · /specs-glance/
   Four headline numbers in a colour-rhythm band. Big number, small label. */
.callouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 8px 0 56px;
}
.callout {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-dark);
  min-height: 168px;
}
.callout__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.callout__unit {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin-top: 6px;
  opacity: 0.7;
}
.callout__label {
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: auto;
  padding-top: 16px;
}
.callout--mint  { background: var(--accent); color: var(--ink); border-color: transparent; }
.callout--amber { background: var(--accent-warm); color: var(--ink); border-color: transparent; }
.callout--plain { background: var(--paper); color: var(--ink); }
.callout--mint .callout__label,
.callout--amber .callout__label { color: rgba(6, 18, 15, 0.8); }
.callout--plain .callout__label { color: var(--muted); }
@media (max-width: 720px) { .callouts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .callouts { grid-template-columns: 1fr; } }

/* ========== §B10 · PINOUT DIAGRAM ========== */
.pinout {
  margin: 0 0 48px;
  padding: 24px;
  background: var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pinout__cap {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.75;
  margin-bottom: 8px;
}
.pinout__cap .section__num { color: var(--accent); }
.pinout__svg { width: 100%; height: auto; }
.specs-glance__cta { margin-top: 8px; }

/* ========== §B8 · ARCHITECTURE FLOW-CHART ==========
   Five-stage pipeline diagram above the prose flow on the home arch section.
   Arrows pulse the signal left → right in sequence. Deps: home/architecture.html. */
.arch__diagram {
  width: 100%;
  max-width: 940px;
  height: auto;
  margin: 28px 0 8px;
}
.arch__arrow { stroke-dasharray: 40; stroke-dashoffset: 40; animation: archArrow 4s ease-in-out infinite; }
.arch__arrow-1 { animation-delay: 0.5s; }
.arch__arrow-2 { animation-delay: 1s; }
.arch__arrow-3 { animation-delay: 1.5s; }
@keyframes archArrow {
  0%, 100% { stroke-dashoffset: 40; opacity: 0.35; }
  40%, 60% { stroke-dashoffset: 0;  opacity: 1; }
}
@media (max-width: 640px) { .arch__diagram { display: none; } }

/* ========== §D18 · CHAPTER-BREAK DIVIDER ==========
   A thin centered hairline + mint dot — a magazine chapter rule. Drop a
   <div class="chapter-break"></div> anywhere between sections. */
.chapter-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: clamp(36px, 6vw, 64px) auto;
  max-width: 320px;
}
.chapter-break::before, .chapter-break::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--hairline-dark));
}
.chapter-break::after { background: linear-gradient(90deg, var(--hairline-dark), transparent); }
.chapter-break > span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--glow-mint);
  flex: none;
}

/* ========== ROUND-4 REDUCED MOTION ==========
   The global * rule (top of file) already zeroes timings. These add intent:
   force the few elements whose animation END-state is "invisible" to a legible
   static state, and silence looping decorations entirely. */
@media (prefers-reduced-motion: reduce) {
  .led::before,
  .device__led-ring,
  .device__arc,
  .dataflow__pkt { animation: none !important; opacity: 0; }
  .device__led { animation: none !important; opacity: 1; }
  .hero-svg__labels text, .hero-svg__frame { animation: none !important; opacity: 1; }
  .arch__arrow { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1; }
  .engine-tease::after, .arch::after { animation: none !important; }
  .hero__svg .io-node:hover { transform: none; }
}

/* ========== ROUND-5 · SLOGANS + FINAL POLISH ==========
   Marketing voice pass: bobulator slogans as easter eggs / asides — always
   small visual weight, never headline-size. Plus a few last polish details.
   All new round-5 CSS lives below, at the end of the file, per the brief. */

/* §S1 · 404 slogan — the classic joke slot, under "Signal lost." */
.notfound__slogan {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--muted-soft);
  margin: 4px 0 22px;
}

/* §P2 · engine compiled-stamp — tiny mono build footer beneath the rule sample.
   Sits on the dark diagram panel; a small accent tick pulses to read "live". */
.engine-tease__stamp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(251, 250, 246, 0.45);
}
.engine-tease__stamp-tick {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--glow-mint);
  animation: engineStampTick 2.4s var(--ease-out-quart) infinite;
}
@keyframes engineStampTick {
  0%, 70%, 100% { opacity: 0.5; }
  35%           { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .engine-tease__stamp-tick { animation: none !important; opacity: 1; }
}

/* §P3 · press kit — render the placeholder logo links (href="#") as
   download-style button chips. Scoped to the press page so prose links
   elsewhere are untouched; the email/contact links (real hrefs) stay plain. */
[data-section="press"] ul:has(> li > a[href="#"]),
.page-section-press ul:has(> li > a[href="#"]) {
  list-style: none;
  padding-left: 0;
}
[data-section="press"] li:has(> a[href="#"]),
.page-section-press li:has(> a[href="#"]) {
  margin: 0.5em 0;
  line-height: 2;
  color: var(--muted);
  font-size: 0.92rem;
}
[data-section="press"] a[href="#"],
.page-section-press a[href="#"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 6px;
  padding: 5px 12px;
  border: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--transition-fast) ease,
              background var(--transition-fast) ease,
              color var(--transition-fast) ease;
}
[data-section="press"] a[href="#"]::before,
.page-section-press a[href="#"]::before {
  content: "\2193";
  font-size: 0.85em;
  color: var(--accent-deep);
}
[data-section="press"] a[href="#"]:hover,
.page-section-press a[href="#"]:hover {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: var(--paper);
}
[data-section="press"] a[href="#"]:hover::before,
.page-section-press a[href="#"]:hover::before { color: var(--paper); }


/* §S2 · slogan asides for markdown prose (changelog standfirst, privacy egg).
   Emitted by the slogan.html shortcode. Never headline-size — knowing asides. */
.slogan {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
}
.slogan--standfirst {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--accent-deep);
  margin: var(--space-4) 0 var(--space-2);
  padding-left: 14px;
  border-left: 2px solid var(--accent-deep);
}
.slogan--egg {
  font-size: 0.8rem;
  text-align: center;
  color: var(--muted-soft);
  opacity: 0.75;
  margin: var(--space-6) 0 0;
}

/* §S4 · contact slogan — soft, lowercase, dimmed; a wink under the timeline. */
.contact-slogan {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  text-transform: lowercase;
  color: var(--muted-soft);
  text-align: center;
  margin: var(--space-4) 0 0;
}

/* §S5 · home slogan — premium page stays premium; the wink rides quietly
   above the colophon. Italic serif, dimmed, small. */
.home__wink {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--muted-soft);
  text-align: center;
  margin: 0;
  padding: 28px var(--gutter) 6px;
  background: var(--ink);
}

/* §S6 · footer brand motto — tiny mono attribution mark under the colophon meta. */
.footer__motto {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.75;
  margin: 14px 0 0;
}

/* §P1 · contact "live chat offline" notice — honest, calm, dimmed strip. */
.chat-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
  margin: var(--space-4) 0 0;
  padding: 12px 16px;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-sm);
  background: rgba(6, 18, 15, 0.02);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
.chat-status strong { color: var(--ink); font-weight: 600; }
.chat-status__dot {
  flex: none;
  width: 8px; height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--muted-soft);
  box-shadow: 0 0 0 3px rgba(138, 149, 143, 0.18);
}

/* ================================================================
   ROUND 6 · ENGINEERING-DESIGN-SYSTEM LAYER
   Datasheet chrome, blueprint texture, and a small kit of technical
   components (footnotes, datasheet rows, tolerance bars, legends,
   exploded view). Monochrome + mint. Restraint is the design.
   All round-6 CSS lives below this banner.
   ================================================================ */

/* ---- shared round-6 tokens ---- */
:root {
  --r6-grid-ink:  rgba(11, 24, 19, 0.5);   /* blueprint lines on light ground */
  --r6-lead:      rgba(11, 18, 15, 0.22);   /* dotted-leader colour            */
  --r6-rule:      rgba(11, 18, 15, 0.14);   /* hairline rules                  */
}

/* §R-C1 · FOOTNOTES — academic endnotes under a hairline. ---------- */
.footnote-ref {
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 600;
  line-height: 0;
  vertical-align: super;
  margin-left: 1px;
}
.footnote-ref a { color: var(--accent-deep); }
.footnote-ref a:hover { color: var(--accent-deep); text-decoration: underline; }
.footnotes {
  max-width: 68ch;
  margin: var(--space-5, 56px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--r6-rule);
}
.footnotes__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 0 0 12px;
}
.footnotes__list { list-style: none; margin: 0; padding: 0; }
.footnotes__item {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 10px;
}
.footnotes__num {
  flex: none;
  min-width: 1.4em;
  color: var(--accent-deep);
  font-weight: 600;
  text-align: right;
}
.footnotes__text { font-variant-numeric: tabular-nums; }
.footnotes__back { color: var(--muted-soft); margin-left: 4px; }
.footnotes__back:hover { color: var(--accent-deep); }
.footnotes__item :target,
.footnotes__item:target { scroll-margin-top: 90px; }

/* §R-C3 · DATASHEET-ROW — property · dotted leader · value. -------- */
.ds-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--r6-rule);
  font-variant-numeric: tabular-nums;
}
.ds-row:first-of-type { border-top: 1px solid var(--r6-rule); }
.ds-row__name {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.ds-row__lead {
  align-self: center;
  height: 0;
  border-bottom: 1px dotted var(--r6-lead);
  transform: translateY(2px);
}
.ds-row__value {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  white-space: nowrap;
  color: var(--ink);
}
.ds-row__num { font-weight: 600; }
.ds-row__unit { color: var(--muted); }
.ds-row__tol { color: var(--accent-deep); margin-left: 2px; }
.ds-row__notes {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted-soft);
  letter-spacing: 0.01em;
  margin-top: -2px;
}
.ds-row__notes::before { content: '[ '; }
.ds-row__notes::after  { content: ' ]'; }

/* §R-C5 · LEGEND-ROW — schematic legend item with a status dot. ---- */
.legend-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.legend-row__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(61, 245, 180, 0.16);
}
.legend-row__dot--warn  { background: var(--accent-warm); box-shadow: 0 0 0 3px rgba(245, 196, 61, 0.16); }
.legend-row__dot--fault { background: var(--accent-warn); box-shadow: 0 0 0 3px rgba(245, 107, 61, 0.16); }
.legend-row__dot--idle  { background: var(--muted-soft);  box-shadow: 0 0 0 3px rgba(138, 149, 143, 0.16); }
.legend-row__label {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.legend-row__lead {
  height: 0;
  border-bottom: 1px dotted var(--r6-lead);
  transform: translateY(1px);
}
.legend-row__states {
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* §R-C4 · TOLERANCE-BAR — nominal tick + ghost ±tolerance ticks. --- */
.tol-bar { margin: 22px 0; max-width: 540px; }
.tol-bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 10px;
}
.tol-bar__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tol-bar__readout {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tol-bar__value { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.tol-bar__unit { color: var(--muted); }
.tol-bar__tol { color: var(--accent-deep); margin-left: 4px; font-size: 0.85rem; }
.tol-bar__track {
  position: relative;
  height: 22px;
  border-bottom: 1px solid var(--r6-rule);
}
.tol-bar__track::before {       /* the measurement axis */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--r6-rule);
}
.tol-bar__band {
  position: absolute;
  top: calc(50% - 5px);
  height: 10px;
  background: rgba(61, 245, 180, 0.14);
  border-left: 1px solid rgba(22, 196, 137, 0.4);
  border-right: 1px solid rgba(22, 196, 137, 0.4);
}
.tol-bar__tick {
  position: absolute;
  top: calc(50% - 8px);
  width: 1px; height: 16px;
  transform: translateX(-0.5px);
}
.tol-bar__tick--nom   { background: var(--accent-deep); top: calc(50% - 11px); height: 22px; }
.tol-bar__tick--ghost { background: var(--muted-soft); opacity: 0.7; }
.tol-bar__caption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
  margin: 6px 0 0;
}

/* §R-C2 · EXPLODED-VIEW — stacked layers + numbered legend. -------- */
.exploded {
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin: 28px 0;
  padding: 24px;
  border: 1px solid var(--r6-rule);
  border-radius: var(--radius);
  background: var(--ink);
}
.exploded__art { display: flex; justify-content: center; }
.exploded__svg { width: 100%; max-width: 240px; height: auto; }
.exploded__legend {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: none;
}
.exploded__legend li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(251, 250, 246, 0.82);
}
.exploded__legend li:last-child { border-bottom: 0; }
.exploded__n {
  flex: none;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(61, 245, 180, 0.5);
  border-radius: 50%;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
}
@media (max-width: 640px) {
  .exploded { grid-template-columns: 1fr; }
}

/* §R-B6 · WAVE-DIVIDER MEASUREMENT — a centered dimension line + label. */
.wave-divider { position: relative; }
.wave-divider__measure {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.wave-divider__rule {
  width: clamp(40px, 9vw, 120px);
  height: 0;
  border-top: 1px solid var(--accent);
  opacity: 0.4;
}
.wave-divider__dim {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* §R-A3a · BUILT IN ATLANTA — origin/geo beat. -------------------- */
.origin { background: var(--parchment); }
.origin__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) 1fr;
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}
.origin__svg { width: 100%; max-width: 320px; margin: 0 auto; height: auto; }
.origin__dot { transform-box: fill-box; transform-origin: center; }
.origin__ping {
  transform-box: fill-box;
  transform-origin: center;
  animation: originPing 3s var(--ease-out-quart) infinite;
}
@keyframes originPing {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%  { transform: scale(4.5); opacity: 0;   }
  100% { transform: scale(4.5); opacity: 0;   }
}
.origin__lead {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 48ch;
}
.origin__hire {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  margin: 18px 0 0;
}
.origin__hire a { color: var(--accent-deep); border-bottom: 1px solid transparent; }
.origin__hire a:hover { border-bottom-color: var(--accent-deep); }
@media (max-width: 760px) {
  .origin__inner { grid-template-columns: 1fr; }
  .origin__map { order: 2; }
}

/* §R-A3b · WHAT'S NEW IN v1.0 — numbered highlight reel. ---------- */
.whatsnew { background: var(--parchment); }
.whatsnew__inner { max-width: var(--container); margin: 0 auto; }
.whatsnew__list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--r6-rule);
  border: 1px solid var(--r6-rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.whatsnew__item {
  display: flex;
  gap: 16px;
  padding: clamp(20px, 3vw, 30px);
  background: var(--paper);
}
.whatsnew__n {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.whatsnew__head { font-size: 1.12rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.whatsnew__item p { font-size: 0.94rem; color: var(--muted); margin: 0; }
.whatsnew__cta { margin: 28px 0 0; }
@media (max-width: 700px) {
  .whatsnew__list { grid-template-columns: 1fr; }
}

/* §R-B1 · DATASHEET CHROME — dim document margin mark above each header. */
.ds-chrome {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  max-width: var(--container);
  margin: 0 auto 22px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--r6-rule);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
}
.ds-chrome__page { flex: none; }
@media (max-width: 560px) {
  .ds-chrome { font-size: 0.58rem; letter-spacing: 0.1em; }
}

/* §R-B2 · SCHEMATIC BLUEPRINT TEXTURE — a faint graph-paper grid laid
   over the whole page, masked with a radial fade so it's densest toward
   the centre and dissolves at the edges. 32px major / 8px minor lines.
   Sits just under the film grain; pointer-events:none keeps it inert. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image:
    linear-gradient(to right,  var(--r6-grid-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--r6-grid-ink) 1px, transparent 1px),
    linear-gradient(to right,  var(--r6-grid-ink) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, var(--r6-grid-ink) 0.5px, transparent 0.5px);
  background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 38%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 88%);
          mask-image: radial-gradient(120% 95% at 50% 38%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 88%);
}

/* §R-B5 · TABULAR NUMS — extend the engineering monospace-figure feel to
   every place numbers carry meaning: prose tables, spec grids, changelog,
   architecture diagrams, contact timing. */
.prose table,
.entry__body table,
.section__digest table,
.specs-preview__grid,
.specs__table,
.changelog__version,
.changelog time,
[data-section] .prose td,
[data-section] .prose th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* §R-B4 · MEASUREMENT KICKERS — dense, instrument-readout eyebrows above
   the value-card titles. The engineering equivalent of a big number. */
.value__measure {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--r6-rule);
}

/* §R-B3 · DEVICE CALLOUTS — CAD annotation layer fades in after the puck.
   Honour reduced-motion by simply showing it. */
.device__callouts { opacity: 0; animation: deviceCalloutIn 0.8s var(--ease-out-quart) 0.45s forwards; }
@keyframes deviceCalloutIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .device__callouts { opacity: 1; animation: none; }
  body::after { opacity: 0.04; }
  .origin__ping { animation: none; }
}