/* ============================================================
   HOLDS — Dark / cinematic build (Powder-inspired)
   Near-black field, one ember signal. Big medium grotesk,
   floating panels, scroll-driven motion.
   ============================================================ */

:root {
  /* Dark base */
  --bg:     #0A0A0C;
  --bg-1:   #0E0E11;   /* faint raise */
  --bg-2:   #141417;   /* panels */
  --bg-3:   #1B1B1F;   /* raised cards */
  --bg-4:   #232328;   /* controls */

  --line:   rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.12);

  --text:   #F3F1EC;   /* warm white */
  --soft:   #A7A49E;   /* gray */
  --faint:  #6B6864;   /* dim / silent */
  --ghost:  #46443F;   /* nearly invisible */

  /* Accent (tweakable) — friendlier warm red default; signal/glow
     are brightened tints of the accent so any hue stays clean. */
  --accent: #C0473A;
  --signal: color-mix(in srgb, var(--accent) 80%, white);   /* brighter tint */
  --glow:   color-mix(in srgb, var(--accent) 78%, white);

  /* Fonts (tweakable) */
  --font-display: "Newsreader", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(255,255,255,0.30); color: var(--text); }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.accent { color: var(--signal); }

/* film grain overlay */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9998; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
body[data-texture="off"]::after { display: none; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 66px; gap: 24px;
}
/* nav spans the full viewport so the wordmark and button hug the corners */
.nav .wrap.nav-row {
  max-width: none;
  padding-inline: clamp(8px, 1.2vw, 18px);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 19px; letter-spacing: -0.01em;
}
.brand .mark {
  width: 16px; height: 16px;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
}
.nav-links {
  display: flex; gap: 34px;
  font-size: 14.5px; color: var(--soft);
}
.nav-links a { transition: color 0.15s; }
.nav-links a:hover { color: var(--text); }
@media (max-width: 760px) { .nav-links { display: none; } }

.pill-btn {
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.15s, background 0.15s;
  white-space: nowrap;
}
.pill-btn:hover { transform: translateY(-1px); background: #fff; }
.pill-btn.ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--line-2);
}
.pill-btn.ghost:hover { background: rgba(255,255,255,0.1); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: 150px;
  padding-bottom: 40px;
  text-align: center;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}
/* blurred fade band at the bottom — dissolves the moving dots into the
   dark so the hero flows smoothly into the next section */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 34%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 86%);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 58%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 58%);
}
/* ember atmosphere */
.hero-atmos {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 85% at 50% 122%, color-mix(in srgb, var(--accent) 80%, white 20%) 0%, color-mix(in srgb, var(--accent) 40%, transparent) 26%, transparent 55%),
    radial-gradient(90% 60% at 50% 130%, color-mix(in srgb, var(--glow) 55%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, #0c0c0e 60%, #121215 100%);
}
.hero-atmos::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 70%, var(--bg) 100%);
}
#signal-canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 60%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 60%, #000 30%, transparent 78%);
}
.hero-inner {
  position: relative; z-index: 3;
  max-width: 860px;
  padding-inline: var(--gutter);
}

.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-2);
  font-size: 13.5px; color: var(--soft);
  margin-bottom: 34px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.chip > span:not(.chip-tag):not(.chip-arrow) { white-space: nowrap; }
.chip:hover { background: rgba(255,255,255,0.08); }
.chip .chip-tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--signal);
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent);
  padding: 3px 9px; border-radius: 999px;
}
.chip .chip-arrow {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: grid; place-items: center;
}
.chip .chip-arrow svg { width: 11px; height: 11px; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 26px;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--signal); }
.hero .deck {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--soft);
  max-width: 42ch;
  margin: 0 auto 40px;
}
.hero-cta {
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.play {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.05);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}
.play:hover { background: rgba(255,255,255,0.1); transform: scale(1.04); }
.play svg { width: 15px; height: 15px; margin-left: 2px; }

/* scroll cue */
.scroll-cue {
  position: relative; z-index: 3;
  margin-top: auto; margin-bottom: 26px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-cue .bar {
  width: 1px; height: 34px;
  background: linear-gradient(var(--faint), transparent);
}

/* ============================================================
   MONITOR PANEL (slides up under hero)
   ============================================================ */
.stage {
  position: relative;
  margin-top: clamp(-150px, -15vh, -80px);   /* pull the monitor up closer to the hero */
  z-index: 4;
}
.stage-track {
  position: relative;
  height: 235vh;                 /* longer scroll = slower, more deliberate read */
}
.stage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-cue {
  position: absolute;
  bottom: clamp(40px, 8vh, 90px);
  left: 0; right: 0;
  text-align: center;
  color: var(--faint);
  pointer-events: none;
}
.stage-cue .mono { font-size: 11px; letter-spacing: 0.1em; }
@media (max-width: 880px) {
  .stage-track { height: auto; }
  .stage-sticky { position: static; height: auto; display: block; padding-block: 30px 20px; }
  .stage-cue { display: none; }
}
.panel-wrap {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  opacity: 1;
}

.panel {
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: linear-gradient(180deg, #161619 0%, #closebg 100%);
  background: linear-gradient(180deg, #17171b 0%, #0f0f12 100%);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02) inset;
  overflow: hidden;
  /* one-time entrance when the monitor scrolls into view (a bit more evident) */
  opacity: 0.31;
  transform: translateY(34px);
  transition: opacity 1.2s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.panel.panel-in { opacity: 1; transform: none; }
/* subtle dim when the escalation is dismissed */
.panel.monitor-dimmed { filter: brightness(0.74) saturate(0.8) opacity(0.7); transition: filter 0.5s ease; }
.panel-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.015);
  flex-wrap: wrap;
}
.panel-id { display: flex; align-items: center; gap: 13px; }
.panel-id .mark {
  width: 15px; height: 15px; position: relative; box-sizing: border-box;
}
.panel-id .sym { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.panel-id .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }

.counter {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
}
.counter .c-item { display: flex; align-items: baseline; gap: 6px; color: var(--soft); }
.counter .c-num { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); min-width: 1ch; }
.counter .c-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.counter .c-item.esc .c-dot { background: var(--signal); box-shadow: 0 0 12px var(--signal), 0 0 4px var(--signal); }
.counter .c-item.esc.lit { color: var(--signal); }
.counter .c-item.esc.lit .c-num { color: var(--signal); }

.replay {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--soft);
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  padding: 8px 13px; border-radius: 8px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.replay:hover { background: rgba(255,255,255,0.09); color: var(--text); }
.replay svg { width: 12px; height: 12px; }

.panel-body { display: grid; grid-template-columns: 320px 1fr; }
@media (max-width: 880px) { .panel-body { grid-template-columns: 1fr; } }

/* thesis pillars */
.thesis { padding: 22px 22px; border-right: 1px solid var(--line); }
@media (max-width: 880px) { .thesis { border-right: none; border-bottom: 1px solid var(--line); } }
.thesis-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; }
.pillar {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px 11px;
  padding: 12px 0; border-top: 1px solid var(--line);
  transition: background 0.4s;
}
.pillar:first-of-type { border-top: none; }
.pillar .p-num { font-family: var(--font-mono); font-size: 11px; color: var(--faint); padding-top: 2px; }
.pillar .p-text { font-size: 14px; line-height: 1.4; color: var(--text); }
.pillar .p-status {
  grid-column: 2; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px; color: var(--faint);
}
.pillar .p-status::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); transition: background 0.4s, box-shadow 0.4s; }
.pillar.weakening { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--signal); }
.pillar.weakening .p-status { color: var(--signal); }
.pillar.weakening .p-status::before { background: var(--signal); box-shadow: 0 0 12px var(--signal), 0 0 4px var(--signal); }
.pillar.flip-pulse { animation: pulseBg 0.9s ease; }
@keyframes pulseBg { 0% { background: color-mix(in srgb, var(--accent) 42%, transparent); } 100% { background: color-mix(in srgb, var(--accent) 16%, transparent); } }

/* events feed */
.feed { padding: 4px 0; }
.event {
  display: grid; grid-template-columns: 96px 1fr; gap: 0 16px;
  padding: 12px 20px; border-top: 1px solid var(--line);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2,.7,.3,1), background 0.4s;
}
.event:first-child { border-top: none; }
/* hidden only while the animation is armed and the event hasn't been revealed */
#feed.armed .event:not(.in) { opacity: 0; transform: translateY(12px); }
.event.silenced.resolved { opacity: 0.5; }

.event .verdict {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding-top: 2px; color: var(--faint);
  display: flex; align-items: baseline; gap: 7px; transition: color 0.5s ease;
}
.event .v-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; transform: translateY(-1px); flex-shrink: 0; }
.event .vtag { display: none; }
.event .v-pending { display: inline-block; }
.event.resolved .v-pending { display: none; }
.event.resolved .vtag { display: inline-block; }
.event:not(.resolved) .v-dot,
.event:not(.resolved) .v-pending { animation: dotPulse 1.1s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.event.digest.resolved .verdict { color: var(--soft); }
.event.escalated.resolved .verdict { color: var(--signal); font-weight: 600; }
.event.escalated.resolved .v-dot { box-shadow: 0 0 12px var(--signal), 0 0 4px var(--signal); }

.event .e-head { font-size: 15px; line-height: 1.4; color: var(--text); margin: 0; transition: color 0.5s ease; }
.event.silenced.resolved .e-head { color: var(--soft); }
.event.escalated.resolved .e-head { font-weight: 600; }

.e-reveal { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.55s cubic-bezier(.2,.7,.3,1), opacity 0.45s ease; }
.e-reveal-in { overflow: hidden; min-height: 0; }
#feed.armed .event:not(.resolved) .e-reveal { grid-template-rows: 0fr; opacity: 0; }
.event .e-reason { font-size: 13.5px; line-height: 1.45; color: var(--soft); margin: 6px 0 0; }
.event.escalated .e-reason strong { color: var(--signal); font-weight: 600; }
.event .e-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--signal);
}
.event .e-link svg { width: 11px; height: 11px; }
.event.escalated.resolved { background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: inset 3px 0 0 var(--signal); }
.event.escalated.flash { animation: escFlash 1s ease; }
@keyframes escFlash { 0% { background: color-mix(in srgb, var(--accent) 40%, transparent); } 100% { background: color-mix(in srgb, var(--accent) 13%, transparent); } }

/* ============================================================
   REVEAL TEXT
   ============================================================ */
.reveal-sec { position: relative; margin-top: min(0px, calc((520px - 100vh) / 2)); padding-top: clamp(8px, 1.5vh, 22px); padding-bottom: clamp(44px, 7vh, 84px); }
.reveal-sec .eyebrow { margin-bottom: 34px; }
.reveal-copy {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.26;
  letter-spacing: -0.02em;
  max-width: 26ch;
  color: var(--soft);
}
.reveal-copy .blk { display: block; margin-bottom: 1.1em; }
.reveal-copy .blk:last-child { margin-bottom: 0; }
.reveal-copy .em-line { color: var(--signal); }

/* scrub-line: opacity/blur/transform are driven per-frame from JS
   (reveal.js) based on scroll position — works in host-scrolled
   previews where CSS animation-timeline does not. */
.scrub-line { will-change: opacity, transform, filter; }

/* logos / silent tickers row */
.silent-row {
  margin-top: clamp(28px, 5vh, 60px);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.silent-row .sr-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--faint); margin-right: 8px;
}
.silent-row .tk {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--faint);
  border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 7px;
}

/* ============================================================
   GENERIC SECTION SCAFFOLD
   ============================================================ */
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 38px; }
.eyebrow .num { font-family: var(--font-mono); font-size: 11px; color: var(--signal); letter-spacing: 0.05em; }
.eyebrow .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.eyebrow .line { flex: 1; height: 1px; background: var(--line); }

/* Signal & silence — a touch stronger reveal than the rest of the page */
.contrast .reveal-up { opacity: 0.7; transform: translateY(22px); filter: blur(4px); }
.contrast .reveal-up.in { opacity: 1; transform: none; filter: none; }

.reveal-up {
  opacity: 0.84;
  transform: translateY(12px);
  filter: blur(1.6px);
  transition: opacity 0.95s cubic-bezier(.2,.7,.2,1), transform 0.95s cubic-bezier(.2,.7,.2,1), filter 0.95s ease;
  transition-delay: var(--rv-delay, 0s);
  will-change: opacity, transform, filter;
}
.reveal-up.in { opacity: 1; transform: none; filter: none; }

/* ============================================================
   FEATURE — escalation modal
   ============================================================ */
.feature { padding-block: clamp(44px, 7vh, 84px); position: relative; }
.feat-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr; gap: 44px; } }
.feat-copy .f-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--signal);
  margin-bottom: 22px;
}
.feat-copy .f-tag::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal), 0 0 4px var(--signal); }
.feat-copy h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.025em;
  margin: 0 0 20px; text-wrap: balance;
}
.feat-copy p { font-size: 16.5px; line-height: 1.55; color: var(--soft); max-width: 40ch; margin: 0; }
.feat-foot {
  margin-top: 30px; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint);
}
.feat-foot svg { width: 13px; height: 13px; color: var(--signal); }

/* "Run the read" trigger — minimal, square, black & white */
.feat-run {
  margin-top: 30px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text); background: transparent;
  border: 1px solid var(--line-2); border-radius: 0;
  padding: 12px 18px; cursor: pointer;
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--signal) 28%, transparent);
  animation: featRunBreathe 3.4s ease-in-out infinite;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
@keyframes featRunBreathe {
  0%, 100% { box-shadow: 0 0 10px -3px color-mix(in srgb, var(--signal) 20%, transparent); border-color: var(--line-2); }
  50%      { box-shadow: 0 0 16px -2px color-mix(in srgb, var(--signal) 36%, transparent); border-color: color-mix(in srgb, var(--signal) 45%, var(--line-2)); }
}
.feat-run:hover { background: rgba(255,255,255,0.05); border-color: var(--text); animation: none; box-shadow: 0 0 16px -2px color-mix(in srgb, var(--signal) 40%, transparent); }
.feat-run.playing, .feat-run.done { animation: none; box-shadow: none; }
.feat-run .fr-glyph {
  width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--text);
  transition: border-left-color 0.18s ease;
}
.feat-run.playing { color: var(--faint); border-color: var(--line); }
.feat-run.playing .fr-glyph {
  /* pause-ish dim while running */
  border-left-color: var(--faint);
}
.feat-run.done .fr-glyph {
  /* replay glyph: small circular arrow drawn with a border + rotate cue kept simple as triangle */
  border-left-color: var(--signal);
}

/* the glassy escalation card */
.esc-card {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #161619 0%, #0f0f12 100%);
  box-shadow: 0 30px 90px -30px rgba(0,0,0,0.8);
  padding: 22px;
  overflow: hidden;
}
.esc-card .ec-top {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 18px;
}
.esc-card .ec-top .ec-live { display: inline-flex; align-items: center; gap: 7px; color: var(--faint); transition: color 0.4s ease; }
.esc-card .ec-top .ec-live::before { content:""; width:6px;height:6px;border-radius:50%;background:var(--faint); transition: background 0.4s ease, box-shadow 0.4s ease; animation: dotPulse 1.4s infinite; }
.esc-card.status-escalated .ec-top .ec-live { color: var(--signal); }
.esc-card.status-escalated .ec-top .ec-live::before { background: var(--signal); box-shadow: 0 0 12px var(--signal), 0 0 4px var(--signal); animation: none; }
/* dismissed: the live indicator goes quiet — grey, no glow, no pulse */
.esc-card.is-dismissed .ec-top .ec-live { color: var(--faint); }
.esc-card.is-dismissed .ec-top .ec-live::before { background: var(--faint); box-shadow: none; animation: none; }
.ec-field { margin-bottom: 14px; }
.ec-field .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.ec-box {
  border: 1px solid var(--line-2); border-radius: 9px; background: rgba(255,255,255,0.03);
  padding: 12px 14px; font-size: 14px; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ec-box.red { border-color: color-mix(in srgb, var(--signal) 45%, transparent); }
.ec-box .dot-red { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal), 0 0 4px var(--signal); }
.ec-box .left { display: inline-flex; align-items: center; gap: 9px; }
.ec-box .chev { color: var(--faint); }
.ec-summary { font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.ec-summary strong { color: var(--text); font-weight: 600; }
.ec-actions {
  display: flex; gap: 10px; margin-top: 18px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.esc-card.actions-in .ec-actions { opacity: 1; transform: none; }
.ec-actions button {
  flex: 1; font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  padding: 11px; border-radius: 9px; cursor: pointer; transition: background 0.15s, transform 0.15s;
}
.ec-actions .dismiss { background: rgba(255,255,255,0.05); color: var(--soft); border: 1px solid var(--line-2); }
.ec-actions .dismiss:hover { background: rgba(255,255,255,0.09); }
.ec-actions .review { background: var(--signal); color: #fff; border: none; }
.ec-actions .review:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ---- card action outcomes (Dismiss / Review thesis) ---- */
.ec-outcome { display: none; margin-top: 14px; }
.esc-card.is-dismissed .ec-outcome,
.esc-card.is-reviewing .ec-outcome { display: block; }
.esc-card.is-dismissed .ec-actions,
.esc-card.is-reviewing .ec-actions { display: none; }

.eco-dismissed, .eco-review { display: none; }
.esc-card.is-dismissed .eco-dismissed { display: flex; align-items: center; justify-content: space-between; gap: 12px; animation: fadeUp 0.4s ease; }
.esc-card.is-reviewing .eco-review { display: block; animation: fadeUp 0.4s ease; }

.eco-line {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--soft);
}
.eco-glyph { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.eco-glyph.eco-mute { background: var(--faint); }
.eco-glyph.eco-dot { background: var(--signal); box-shadow: 0 0 9px var(--signal); }
.eco-sub { display: block; margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--soft); }
.eco-undo {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); background: transparent; border: 1px solid var(--line-2); border-radius: 0;
  padding: 7px 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.eco-undo:hover { background: rgba(255,255,255,0.06); border-color: var(--text); }

/* dismissed: the whole card greys back, the signal goes quiet */
.esc-card.is-dismissed { opacity: 0.62; filter: saturate(0.6); transition: opacity 0.4s ease, filter 0.4s ease; }
.esc-card.is-dismissed .ec-box.red { border-color: var(--line-2); }
.esc-card.is-dismissed .ec-box .dot-red { background: var(--faint); box-shadow: none; }
.esc-card.is-dismissed .ec-box.red .chev { color: var(--faint); }

/* reviewing: card emphasised, the Bears-on row underlined as the focus */
.esc-card.is-reviewing { box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal) 40%, transparent), 0 30px 90px -30px rgba(0,0,0,0.8); transition: box-shadow 0.4s ease; }
.esc-card.is-reviewing .ec-field[data-region="bears"] .ec-box { box-shadow: inset 2px 0 0 var(--signal); }

/* "When it clears the bar" entrance — slightly more exaggerated than the
   other sections, and left text leads the card by a beat */
.feature .reveal-up {
  opacity: 0.66;
  transform: translateY(22px);
  filter: blur(3.4px);
}
.feature .feat-copy { --rv-delay: 0.18s; }   /* left appears first */
.feature .esc-card { --rv-delay: 0.36s; }     /* right follows immediately */
.feature .reveal-up.in { opacity: 1; transform: none; filter: none; }

/* walkthrough steps (left) — link each phrase to a card region */
.walk { list-style: none; margin: 22px 0 6px; padding: 0 0 0 16px; position: relative; }
/* #5 faint rail + a bright tick that travels down i→ii→iii as the card reads */
.walk::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 1px; background: var(--line); }
.walk-tick {
  position: absolute; left: 0; top: 0; width: 1px; height: 0;
  background: var(--signal); box-shadow: 0 0 9px var(--signal);
  opacity: 0; transform: translateY(0);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), height 0.3s ease, opacity 0.3s ease;
}
.walk-tick.on { opacity: 1; }
.walk-step {
  display: flex; gap: 13px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--line);
  color: var(--soft); cursor: default; outline: none;
  transition: color 0.2s ease;
}
.walk-step:first-child { border-top: none; }
.walk-step .ws-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--faint); width: 20px; flex-shrink: 0; transition: color 0.2s ease; position: relative;
}
.walk-step .ws-txt { font-size: 15px; line-height: 1.4; }
.walk-step:hover, .walk-step.active, .walk-step:focus-visible { color: var(--text); }
.walk-step:hover .ws-num, .walk-step.active .ws-num, .walk-step:focus-visible .ws-num { color: var(--signal); }
/* #6 numeral flips to a check once its region has been read */
.walk-step.confirmed .ws-num { color: transparent; }
.walk-step.confirmed .ws-num::after {
  content: ""; position: absolute; left: 1px; top: 0.55em;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--signal); border-bottom: 1.5px solid var(--signal);
  transform: rotate(-45deg);
}

/* card region highlight when its step is active (square, existing colours) */
.ec-box, .ec-summary, .ec-field .lbl { transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.ec-field.lit .lbl { color: var(--signal); }
.ec-field.lit .ec-box {
  border-color: color-mix(in srgb, var(--signal) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--signal);
}
.ec-field.lit .ec-summary {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--signal);
  padding: 10px 12px 10px 14px; margin: -10px -12px -10px -14px;
}
.ec-field.lit .ec-summary strong { color: var(--signal); }

/* values fill in as the checklist confirms them — hidden until .revealed */
.ec-box, .ec-summary {
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease,
              border-color 0.25s ease, opacity 0.45s ease, transform 0.45s ease;
}
.ec-field:not(.revealed) .ec-box,
.ec-field:not(.revealed) .ec-summary { opacity: 0; transform: translateY(4px); }
.ec-field.revealed .ec-box,
.ec-field.revealed .ec-summary { opacity: 1; transform: none; }

/* ============================================================
   CONTRAST — speaks up / stays quiet
   ============================================================ */
.contrast { padding-top: clamp(44px, 7vh, 84px); padding-bottom: clamp(28px, 4.5vh, 56px); }
.contrast h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 46px; max-width: 18ch; text-wrap: balance;
}
.contrast h2 .muted { color: var(--faint); }
.contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .contrast-grid { grid-template-columns: 1fr; } }
.ccard {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  padding: clamp(24px, 3vw, 36px);
}
.ccard.speaks { border-color: color-mix(in srgb, var(--signal) 28%, var(--line)); background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb,var(--accent) 14%, transparent) 0%, transparent 50%), linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%); }
.ccard .c-h {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: 24px; display: flex; align-items: center; gap: 10px;
}
.ccard.speaks .c-h { color: var(--signal); }
.ccard.quiet .c-h { color: var(--faint); }
.ccard .c-h .hg { width: 7px; height: 7px; border-radius: 50%; }
.ccard.speaks .hg { background: var(--signal); box-shadow: 0 0 12px var(--signal), 0 0 4px var(--signal); }
.ccard.quiet .hg { background: var(--faint); }
.ccard ul { list-style: none; margin: 0; padding: 0; }
.ccard li {
  padding: 14px 0 14px 24px; border-top: 1px solid var(--line); position: relative;
  font-size: 15.5px; line-height: 1.4;
}
.ccard li:first-child { border-top: none; }
.ccard li::before { content:""; position: absolute; left: 0; top: 21px; width: 9px; height: 1px; }
.ccard.speaks li { color: var(--text); }
.ccard.speaks li::before { background: var(--signal); }
.ccard.quiet li { color: var(--soft); }
.ccard.quiet li::before { background: var(--faint); }

/* ---- Signal & silence: interactivity (layered on; resting styles unchanged) ---- */
.contrast li { transition: opacity 0.5s ease, transform 0.5s ease, color 0.25s ease, padding-left 0.3s ease; }
.contrast.cc-armed li { opacity: 0; transform: translateY(8px); }
.contrast.cc-armed li.in { opacity: 1; transform: none; }

.cc-reason {
  display: block; overflow: hidden;
  max-height: 0; opacity: 0; margin-top: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; line-height: 1.45;
  transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
}

/* left / SPEAKS UP — hover escalates */
.ccard.speaks li::before { transition: width 0.3s ease, background 0.3s ease; }
.ccard.speaks li:hover { color: #fff; padding-left: 44px; }
.ccard.speaks li:hover::before { width: 30px; }
.ccard.speaks li:hover .cc-reason { max-height: 3em; opacity: 1; margin-top: 7px; color: var(--soft); }
.ccard.speaks .hg { transition: box-shadow 0.3s ease; }
.ccard.speaks:hover .hg { box-shadow: 0 0 14px var(--signal); }

/* SPEAKS UP top accent: a white line on the card's own top edge that
   grows from the left across the entire first card to the halfway line
   of the row, then holds. It lives ON the card so it tracks the card's
   reveal/position exactly; the QUIET card's faint top border continues
   the line to the right. Both contrast cards must NOT drift by different
   amounts (see HTML) or the two would sit at different heights. */
.ccard.speaks { position: relative; }
.ccard.speaks::after {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 100%; height: 1px; background: var(--signal);
  pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 3.6s cubic-bezier(.16,1,.3,1);
}
.contrast.cc-in .ccard.speaks::after { transform: scaleX(1); }

/* right / STAYS QUIET — hover dips, never escalates (no accent) */
.ccard.quiet li:hover { animation: ccQuietDip 0.44s ease; }
.ccard.quiet li:hover .cc-reason { max-height: 3em; opacity: 1; margin-top: 7px; color: var(--faint); }
@keyframes ccQuietDip { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .contrast li { transition: opacity 0.3s ease, color 0.25s ease; }
  .contrast.cc-armed li { transform: none; }
  .ccard.speaks::after { transition: none; transform: scaleX(1); }
}

/* ============================================================
   ACCESS BAND
   ============================================================ */
.access {
  position: relative;
  padding-top: clamp(28px, 4.5vh, 56px);
  padding-bottom: clamp(44px, 7vh, 84px);
  text-align: center;
  overflow: hidden;
}
.access::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(90% 130% at 50% 130%, color-mix(in srgb, var(--accent) 72%, white 28%) 0%, color-mix(in srgb, var(--accent) 24%, transparent) 30%, transparent 60%);
}
.access .wrap { position: relative; z-index: 2; max-width: 760px; }
.access .a-kick {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 24px;
}
.access .a-kick::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal), 0 0 4px var(--signal); }
.access h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5.2vw, 68px); line-height: 1.0; letter-spacing: -0.03em;
  margin: 0 0 22px; text-wrap: balance;
}
.access h2 em { font-style: normal; color: var(--signal); }
.access .a-sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--soft); max-width: 42ch; margin: 0 auto 40px; }

.waitform {
  display: flex; gap: 8px; max-width: 480px; margin: 0 auto;
}
.waitform input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text); font-family: var(--font-body); font-size: 15.5px;
  padding: 15px 22px; outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.waitform input::placeholder { color: var(--faint); }
.waitform input:focus { border-color: var(--line-2); background: rgba(255,255,255,0.07); }
.waitform button {
  flex-shrink: 0; white-space: nowrap;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500;
  background: var(--text); color: var(--bg);
  border: none; border-radius: 999px; padding: 0 26px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.15s, background 0.15s;
}
.waitform button:hover { transform: translateY(-1px); background: #fff; }
.waitform button svg { width: 13px; height: 13px; }
.waitform.invalid input { border-color: var(--signal); }
.form-note { margin-top: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.form-note.error { color: var(--signal); }

.success {
  max-width: 480px; margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--signal) 36%, var(--line-2));
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: 26px; display: none; align-items: center; gap: 16px; text-align: left;
}
.success.show { display: flex; animation: fadeUp 0.5s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.success .check { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--signal); display: grid; place-items: center; box-shadow: 0 0 18px color-mix(in srgb, var(--signal) 60%, transparent); }
.success .check svg { width: 18px; height: 18px; }
.success .s-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 0 0 4px; letter-spacing: -0.01em; }
.success .s-body { font-size: 14px; color: var(--soft); margin: 0; line-height: 1.45; }
.success .s-body span { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding-block: clamp(44px, 6vh, 76px); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }
.not-advice { font-size: 13px; line-height: 1.65; color: var(--faint); max-width: 60ch; }
.foot-right { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
@media (min-width: 721px) { .foot-right { align-items: flex-end; } }
.foot-links { display: flex; gap: 20px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--soft); }
.foot-links a:hover { color: var(--text); }
.foot-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ghost); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .event, .panel-wrap, .reveal-up { opacity: 1 !important; transform: none !important; filter: none !important; }
  .panel { opacity: 1 !important; transform: none !important; }
  .reveal-copy w { color: var(--text) !important; }
  * { animation-duration: 0.001s !important; }
}

/* ============================================================
   MONOCHROME palette (Tweak: data-palette="mono")
   Drops the red entirely — pure black & white. The "signal"
   becomes luminous white against the gray field; glows go silver.
   ============================================================ */
body[data-palette="mono"] {
  --accent: #5C5C63;
  --signal: #FFFFFF;
  --glow: #CACAD2;
}
body[data-palette="mono"] .hero-atmos {
  background:
    radial-gradient(120% 85% at 50% 122%, rgba(220,220,228,0.34) 0%, rgba(150,150,160,0.12) 26%, transparent 55%),
    radial-gradient(90% 60% at 50% 130%, rgba(255,255,255,0.20) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, #0c0c0e 60%, #131316 100%);
}
body[data-palette="mono"] .access::before {
  background: radial-gradient(90% 130% at 50% 130%, rgba(210,210,218,0.26) 0%, rgba(140,140,150,0.10) 30%, transparent 60%);
}
/* keep the white signal from glowing red where box-shadows are tinted */
body[data-palette="mono"] .counter .c-item.esc .c-dot,
body[data-palette="mono"] .pillar.weakening .p-status::before,
body[data-palette="mono"] .event.escalated.resolved .v-dot,
body[data-palette="mono"] .ccard.speaks .hg,
body[data-palette="mono"] .esc-card .dot-red,
body[data-palette="mono"] .access .a-kick::before,
body[data-palette="mono"] .feat-copy .f-tag::before {
  box-shadow: 0 0 12px rgba(255,255,255,0.7), 0 0 4px rgba(255,255,255,0.7);
}
/* white "signal" surfaces need dark text/marks in Mono */
body[data-palette="mono"] .ec-actions .review { color: var(--bg); }
body[data-palette="mono"] .success .check svg { stroke: var(--bg); }

/* ============================================================
   MINIMAL monitor (Tweak: data-monitor="minimal")
   Strips the panel's card chrome — no rounding, no shadow, no
   floating border. Just hairline rules, like a bare table.
   ============================================================ */
body[data-monitor="minimal"] .panel {
  border: none;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-monitor="minimal"] .panel-bar {
  background: transparent;
}
body[data-monitor="minimal"] .replay {
  background: transparent;
  border: none;
  border-radius: 0;
  padding-inline: 0;
}
body[data-monitor="minimal"] .replay:hover { background: transparent; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* escalation card goes flat too under Minimal */
body[data-monitor="minimal"] .esc-card {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
}
body[data-monitor="minimal"] .ec-box { border-radius: 0; }
body[data-monitor="minimal"] .ec-actions button { border-radius: 0; }

/* contrast cards go flat too under Minimal */
body[data-monitor="minimal"] .contrast-grid { gap: 0; }
body[data-monitor="minimal"] .ccard {
  border-radius: 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line-2);
  padding-inline: 0;
}
body[data-monitor="minimal"] .ccard.speaks { border-top-color: var(--line-2); }
body[data-monitor="minimal"] .contrast-grid .ccard.speaks { padding-right: clamp(28px, 4vw, 64px); }

/* access form goes square under Minimal */
body[data-monitor="minimal"] .waitform input,
body[data-monitor="minimal"] .waitform button { border-radius: 0; }
body[data-monitor="minimal"] .success { border-radius: 0; }

/* hero chrome goes square + a touch subtler under Minimal */
body[data-monitor="minimal"] .chip { border-radius: 0; background: rgba(255,255,255,0.03); }
body[data-monitor="minimal"] .chip .chip-tag,
body[data-monitor="minimal"] .chip .chip-arrow { border-radius: 0; }
body[data-monitor="minimal"] .pill-btn { border-radius: 0; }
body[data-monitor="minimal"] .play { border-radius: 0; background: rgba(255,255,255,0.03); }
body[data-monitor="minimal"] .hero-cta .pill-btn { background: color-mix(in srgb, var(--text) 88%, transparent); }
body[data-monitor="minimal"] .hero-cta .pill-btn:hover { background: var(--text); }

/* ============================================================
   LOGOMARK variants (Tweak: data-logo)
   Marks appear in the nav, the monitor panel header, and footer.
   ============================================================ */
.brand .mark::before, .brand .mark::after,
.panel-id .mark::before, .panel-id .mark::after { box-sizing: border-box; }

/* signal (default) — ring (the watched field) + one accent dot (the signal) */
body[data-logo="signal"] .mark {
  border: 1.5px solid var(--text);
  border-radius: 50%;
}
body[data-logo="signal"] .mark::after {
  content: ""; position: absolute; top: -2px; right: -2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 9px var(--signal);
}

/* diamond — rotated square + inner accent diamond */
body[data-logo="diamond"] .mark {
  border: 1.5px solid var(--text); border-radius: 3px;
  transform: rotate(45deg);
}
body[data-logo="diamond"] .mark::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--signal); border-radius: 1px;
}

/* aperture — ring + centered accent dot (a lens) */
body[data-logo="aperture"] .mark {
  border: 1.5px solid var(--text); border-radius: 50%;
}
body[data-logo="aperture"] .mark::after {
  content: ""; position: absolute; inset: 4px;
  background: var(--signal); border-radius: 50%;
}

/* square — upright square + inner accent square (containment) */
body[data-logo="square"] .mark {
  border: 1.5px solid var(--text); border-radius: 2px;
}
body[data-logo="square"] .mark::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--signal); border-radius: 0;
}

/* bracket — [ ] holding a position: left ink, right accent */
body[data-logo="bracket"] .mark::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  border: 1.6px solid var(--text); border-right: none; border-radius: 1px 0 0 1px;
}
body[data-logo="bracket"] .mark::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; left: auto; width: 5px;
  border: 1.6px solid var(--signal); border-left: none; border-radius: 0 1px 1px 0;
  background: transparent;
}

/* underscore — a baseline tick + accent dot above (a held line) */
body[data-logo="underscore"] .mark {
  border: none;
  border-bottom: 1.8px solid var(--text);
}
body[data-logo="underscore"] .mark::after {
  content: ""; position: absolute; left: 50%; top: 1px;
  width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 9px var(--signal);
}

/* ============================================================
   LENIS smooth scrolling — let Lenis own the scroll position
   (overrides the page's scroll-behavior:smooth so it doesn't fight)
   ============================================================ */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }