/* ============================================================================
   Marketing-page figures — loaded by the home-layout pages after home.css.
   Holds the memory-loop diagram (index.html) and the logo watermark used in
   the closing bands. Everything is driven by the tokens in styles.css so it
   works on both themes.
   ========================================================================== */

/* ---- logo watermark in the closing band ------------------------------------- */
.landing .band .constellation {
  position: absolute;
  right: -24px;
  bottom: -44px;
  width: 220px;
  height: 220px;
  color: var(--mint);
  opacity: 0.12;
  pointer-events: none;
}

/* ---- memory-loop diagram (index.html) ---------------------------------------- */
.landing .mem-figure { margin: 0; min-width: 0; }
.landing .mem-scroll { overflow-x: auto; }
.landing .mem-scroll svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
}
.landing .mem-figure .bx {
  fill: var(--bg-elev);
  stroke: var(--border-strong);
  stroke-width: 1.25;
}
.landing .mem-figure .bx-ct {
  fill: var(--bg-elev-2);
  stroke: var(--border);
  stroke-width: 1.25;
}
.landing .mem-figure .bx-idle {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.25;
  stroke-dasharray: 5 5;
}
.landing .mem-figure .bx-bkt {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.4;
}
.landing .mem-figure .bx-perim {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.25;
  stroke-dasharray: 7 6;
}
.landing .mem-figure .seg { fill: var(--ink-3); }
.landing .mem-figure .cache { fill: color-mix(in srgb, var(--accent) 35%, var(--bg-elev)); }
.landing .mem-figure .dot { fill: var(--accent); }
.landing .mem-figure .lock { fill: none; stroke: var(--sage); stroke-width: 1.5; }
.landing .mem-figure .flow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}
.landing .mem-figure .flow-cold { stroke: var(--text-dim); }
.landing .mem-figure .mem-arrhead { fill: var(--accent); }
.landing .mem-figure .mem-arrhead-m { fill: var(--text-dim); }
.landing .mem-figure .t-perim {
  fill: var(--text-muted);
  font: 500 10.5px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.landing .mem-figure .t-title { fill: var(--text); font: 500 13.5px var(--font); }
.landing .mem-figure .t-title-inv { fill: #fff; font: 500 13.5px var(--font); }
.landing .mem-figure .t-brand { fill: var(--text); font: 500 13px var(--mono); }
.landing .mem-figure .t-sub { fill: var(--text-muted); font: 400 11px var(--mono); }
.landing .mem-figure .t-sub-inv { fill: var(--sage); font: 400 11px var(--mono); }
.landing .mem-figure .t-dim { fill: var(--text-dim); font: 400 11px var(--mono); }
.landing .mem-figure .t-flow {
  fill: var(--text-muted);
  font: 500 10.5px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .landing .mem-figure .flow {
    stroke-dasharray: 6 8;
    animation: mem-dash 1.4s linear infinite;
  }
}
@keyframes mem-dash {
  to { stroke-dashoffset: -14; }
}