/* BEX — components. Header, hero, features, why, cta, tweaks. */

/* ---------- HEADER ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in oklch, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-6);
}
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--text); }
/* inline SVG logo: text paths respond to color, accent dot uses var(--accent) */
.brand-logo-svg {
  height: 28px;
  width: auto;
  display: block;
  color: var(--text);
  transition: color var(--dur-med) var(--ease-out);
}
.brand-logo-svg .logo-dot { fill: var(--accent); }
.nav-links { display: flex; gap: 26px; justify-content: center; }
.nav-links a { color: var(--text-dim); transition: color var(--dur-fast); }
.nav-links a:hover { color: var(--text); }
.nav-right { display: flex; gap: 10px; align-items: center; }

/* Language toggle (circular, like theme) */
.lang-icon-btn { font-family: var(--font-mono); }
.lang-glyph {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--text);
}
.lang-icon-btn:hover { transform: rotate(-4deg) scale(1.04); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-soft);
  color: var(--text);
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.icon-btn:hover { border-color: var(--text); transform: rotate(-8deg); }
.icon-btn .i-sun { display: none; }
.icon-btn .i-moon { display: block; }
[data-theme="light"] .icon-btn .i-sun { display: block; }
[data-theme="light"] .icon-btn .i-moon { display: none; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto 1fr; }
}
/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: calc(var(--s-10) + 20px) 0 var(--s-10);
  overflow: hidden;
  border-top: 0;
}
.hero-scan {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 10%, var(--accent-glow), transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 90%, color-mix(in oklch, var(--accent-2, var(--accent)) 35%, transparent), transparent 60%),
    linear-gradient(160deg, transparent 40%, color-mix(in oklch, var(--accent) 8%, transparent));
  opacity: 0.75;
  filter: blur(40px);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero-meta {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  color: var(--text-mute);
}
.hero-meta .sep { opacity: 0.5; }
.hero-meta .live { color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero-title {
  margin: var(--s-5) 0 var(--s-5);
  max-width: 16ch;
}
.hero-title em.acc {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position: relative;
}
em.acc { font-style: normal; color: var(--accent); }
em.acc-bad { font-style: normal; color: var(--bad); }

.hero-sub { margin: 0 0 var(--s-6); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: var(--s-9); }

/* Signal viewer */
.signal-viewer {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, var(--bg-elev), var(--bg));
  overflow: hidden;
}
.sv-head {
  height: 40px; padding: 0 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.sv-status { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.sv-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 1.4s infinite; }

.sv-body {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  height: 340px;
  position: relative;
}
.sv-col { padding: 14px; overflow: hidden; position: relative; }
.sv-col::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--bg-elev) 0%, transparent 15%, transparent 85%, var(--bg-elev) 100%);
}
.sv-col-label { margin-bottom: 10px; display: block; }
.sv-list { list-style: none; padding: 0; margin: 0; position: relative; }
.sv-list li {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-1);
  margin-bottom: 6px;
  display: flex; justify-content: space-between; gap: 8px;
  color: var(--text-dim);
  background: color-mix(in oklch, var(--surface) 60%, transparent);
  opacity: 0;
  transform: translateY(10px);
  animation: feedIn 0.5s var(--ease-out) forwards;
}
.sv-list.signal li {
  border-color: var(--accent-dim);
  background: color-mix(in oklch, var(--accent-glow) 30%, var(--surface));
  color: var(--text);
  box-shadow: 0 0 0 1px var(--accent-dim), 0 6px 20px -10px var(--accent-glow);
}
.sv-list li .s { color: var(--accent); font-weight: 500; }
.sv-list li.out { animation: feedOut 0.4s var(--ease-out) forwards; }
@keyframes feedIn { to { opacity: 1; transform: none; } }
@keyframes feedOut { to { opacity: 0; transform: translateY(-12px) scale(0.98); } }

.sv-filter {
  position: relative;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  background:
    repeating-linear-gradient(45deg, var(--line-soft) 0 1px, transparent 1px 8px),
    color-mix(in oklch, var(--accent-glow) 20%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.sv-filter-bar {
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px var(--accent);
  animation: scan 3.2s var(--ease-in-out) infinite;
}
@keyframes scan {
  0% { top: 0; }
  50% { top: calc(100% - 2px); }
  100% { top: 0; }
}
.sv-filter-label {
  transform: rotate(-90deg);
  white-space: nowrap;
  color: var(--accent);
  letter-spacing: 0.2em;
}

@media (max-width: 760px) {
  .sv-body { grid-template-columns: 1fr; height: auto; }
  .sv-filter { display: none; }
  .sv-col { max-height: 220px; }
}

/* ---------- Hero viz variant switching ---------- */
.hero-viz { display: none; }
:root[data-hero="scanner"] .hero-viz[data-variant="scanner"],
:root[data-hero="orbit"]   .hero-viz[data-variant="orbit"],
:root[data-hero="stream"]  .hero-viz[data-variant="stream"] { display: block; }

/* ---------- ORBIT variant ---------- */
.orbit-viz {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, var(--bg-elev), var(--bg));
  overflow: hidden;
}
.ov-head {
  height: 40px; padding: 0 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.ov-status { color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.ov-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 1.4s infinite; }

.ov-stage {
  position: relative;
  height: 360px;
  overflow: hidden;
}
.ov-rings {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: ovRotate 48s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes ovRotate { to { transform: rotate(360deg); } }

.ov-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  z-index: 3;
  pointer-events: none;
}
.ov-core-label { font-size: 16px; letter-spacing: 0.1em; color: var(--accent); font-weight: 500; }
.ov-core-sub { color: var(--text-mute); font-size: 10px; }

.ov-nodes {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ov-node {
  position: absolute;
  left: 50%; top: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-1);
  background: color-mix(in oklch, var(--surface) 90%, transparent);
  color: var(--text-dim);
  white-space: nowrap;
  transform: translate(-50%, -50%) translate(var(--x,0), var(--y,0));
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  backdrop-filter: blur(4px);
}
.ov-node.in { opacity: 1; }
.ov-node .s { color: var(--text-mute); margin-left: 6px; font-size: 10px; }

.ov-node.match {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in oklch, var(--accent-glow) 40%, var(--surface));
  box-shadow: 0 0 0 1px var(--accent-dim), 0 6px 20px -10px var(--accent-glow);
  animation: ovAttract 2.4s var(--ease-in) forwards;
}
.ov-node.match .s { color: var(--accent); }
.ov-node.noise {
  animation: ovEject 2s var(--ease-out) forwards;
}

@keyframes ovAttract {
  0%   { transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(1); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(0, 0) scale(0.4); opacity: 0; }
}
@keyframes ovEject {
  0%   { transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(1); opacity: 0; }
  15%  { opacity: 0.7; }
  100% { transform: translate(-50%, -50%) translate(calc(var(--x) * 2.2), calc(var(--y) * 2.2)) scale(0.9); opacity: 0; filter: blur(2px); }
}

.ov-legend {
  position: absolute;
  left: 16px; bottom: 14px;
  display: flex; gap: 18px;
  z-index: 4;
}
.ov-legend i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.ov-legend .lg-match { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.ov-legend .lg-noise { background: var(--text-mute); }

@media (max-width: 760px) {
  .ov-stage { height: 280px; }
}

/* ---------- STREAM variant ---------- */
.stream-viz {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, var(--bg-elev), var(--bg));
  overflow: hidden;
}
.st-stage { position: relative; height: 360px; overflow: hidden; }
.st-lanes {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  height: 100%;
}
.st-lane {
  position: relative;
  padding: 14px;
  overflow: hidden;
  border-right: 1px solid var(--line-soft);
}
.st-lane:last-child { border-right: none; }
.st-lane-label { margin-bottom: 10px; display: block; }

.st-lane-feed { background: color-mix(in oklch, var(--surface) 40%, transparent); }

.st-feed {
  position: absolute;
  left: 14px; right: 14px;
  top: 34px; bottom: 0;
  overflow: hidden;
}
.st-feed::before, .st-feed::after {
  content: ""; position: absolute; left: 0; right: 0; height: 40px;
  pointer-events: none; z-index: 2;
}
.st-feed::before { top: 0; background: linear-gradient(180deg, var(--bg-elev), transparent); }
.st-feed::after  { bottom: 0; background: linear-gradient(0deg,   var(--bg-elev), transparent); }

.st-job {
  position: absolute;
  left: 0; right: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--text-dim);
  display: flex; justify-content: space-between; gap: 8px;
  --fly: 0px;
  --dur: 4.2s;
  top: -40px;
  opacity: 0;
  animation: stFall var(--dur) linear forwards;
}
.st-job .s { color: var(--text-mute); }
.st-job.match { border-color: var(--accent); color: var(--text); background: color-mix(in oklch, var(--accent-glow) 25%, var(--surface)); }
.st-job.match .s { color: var(--accent); }

@keyframes stFall {
  0%   { top: -40px; opacity: 0; }
  10%  { opacity: 1; }
  50%  { top: 48%; transform: translateX(0); opacity: 1; }
  60%  { top: 48%; transform: translateX(var(--fly)); }
  100% { top: 105%; transform: translateX(var(--fly)); opacity: 0; }
}

.st-filter {
  position: absolute;
  left: 14px; right: 14px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  border-top: 1px dashed var(--accent-dim);
  border-bottom: 1px dashed var(--accent-dim);
  background:
    repeating-linear-gradient(90deg, color-mix(in oklch, var(--accent-glow) 20%, transparent) 0 8px, transparent 8px 14px);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  letter-spacing: 0.18em;
  z-index: 1;
  pointer-events: none;
}
.st-filter::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: stScan 2.4s var(--ease-in-out) infinite;
}
@keyframes stScan { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } }

.st-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.st-list li {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 10px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-1);
  background: color-mix(in oklch, var(--accent-glow) 30%, var(--surface));
  color: var(--text);
  display: flex; justify-content: space-between; gap: 8px;
  animation: stLandL 0.5s var(--ease-out);
  box-shadow: 0 0 0 1px var(--accent-dim), 0 6px 20px -10px var(--accent-glow);
}
.st-list li .s { color: var(--accent); font-weight: 500; }
.st-list-noise li {
  border-color: var(--line-soft);
  background: color-mix(in oklch, var(--surface) 60%, transparent);
  color: var(--text-mute);
  box-shadow: none;
  animation-name: stLandR;
}
.st-list-noise li .s { color: var(--text-mute); }
@keyframes stLandL { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stLandR { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 760px) {
  .st-stage { height: 320px; }
  .st-lanes { grid-template-columns: 1fr 1fr; }
  .st-lane-feed { display: none; }
}

/* ---------- STATS (Trust) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  overflow: hidden;
  margin-bottom: var(--s-6);
}
.stat { padding: var(--s-6); background: var(--bg); min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; }
.stat-num {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label { color: var(--text-dim); font-size: 14px; max-width: 22ch; }
.trust-desc { margin-top: var(--s-6); }

/* ---------- VOICES (testimonials) ---------- */
.voices { margin-top: var(--s-9); }
.voice-head { margin-bottom: var(--s-5); }
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.voice {
  margin: 0;
  padding: var(--s-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  background: var(--bg-elev);
  display: flex; flex-direction: column; gap: var(--s-4);
  position: relative;
}
.voice::before {
  content: """;
  position: absolute; top: 14px; right: 20px;
  font-size: 56px; line-height: 1;
  color: var(--accent);
  opacity: 0.2;
  font-family: Georgia, serif;
}
.v-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.7 0.14 var(--v-h, 220)), oklch(0.5 0.16 var(--v-h, 220)));
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 500;
  color: #fff;
  letter-spacing: 0.08em;
  position: relative;
  flex-shrink: 0;
}
.v-avatar::before {
  content: attr(data-mono);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.v-avatar::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.3), transparent 45%);
  pointer-events: none;
}
.v-avatar.v-photo {
  background: var(--bg-elev);
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.02);
}
.v-avatar.v-photo::before,
.v-avatar.v-photo::after { content: none; }
.voice blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.voice figcaption {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  margin-top: auto;
  min-height: 62px;
}
.voice figcaption b { font-weight: 500; font-size: 14px; color: var(--text); }
.voice figcaption span { color: var(--text-mute); font-size: 12px; font-family: var(--font-mono); line-height: 1.45; }

@media (max-width: 900px) {
  .voice-grid { grid-template-columns: 1fr; }
}

/* ---------- INSIDE THE PLATFORM / UI MOCK ---------- */
.inside-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-8);
  align-items: start;
}
.inside-notes {
  display: flex; flex-direction: column; gap: var(--s-5);
  position: sticky; top: 80px;
}
.inote {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line-soft);
}
.inote:first-child { border-top: none; padding-top: 0; }
.inote .mono-label {
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
  letter-spacing: 0.12em;
}
.inote p { margin: 0; color: var(--text-dim); line-height: 1.55; font-size: 15px; max-width: 40ch; }

.ui-mock-wrap { position: relative; }
.ui-mock {
  --um-bg:      oklch(0.195 0.014 240);
  --um-bg-elev: oklch(0.225 0.015 240);
  --um-fg:      oklch(0.97 0.005 240);
  --um-dim:     oklch(0.65 0.012 240);
  --um-line:    oklch(0.32 0.016 240 / 0.55);
  --um-soft:    oklch(0.225 0.015 240);
  --um-accent:  #2563EB;
  --um-good-bg: oklch(0.22 0.06 150 / 0.7);
  --um-good-fg: oklch(0.78 0.16 150);
  --um-mid-bg:  oklch(0.22 0.06 75 / 0.7);
  --um-mid-fg:  oklch(0.78 0.14 75);
  background: var(--um-bg);
  color: var(--um-fg);
  border-radius: 16px;
  padding: 22px 24px 26px;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 30px 80px -20px rgba(15,23,42,0.28), 0 2px 8px rgba(15,23,42,0.06);
  border: 1px solid var(--um-line);
}

.um-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.um-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; max-width: 34ch; }
.um-price { color: var(--um-fg); margin-right: 4px; }
.um-meta-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--um-dim); }
.um-pill { padding: 4px 10px; border: 1px solid var(--um-line); border-radius: 999px; background: var(--um-soft); color: var(--um-fg); font-size: 11px; }
.um-head-icons { display: flex; gap: 12px; color: var(--um-dim); flex-shrink: 0; }
.um-ico { width: 18px; height: 18px; color: var(--um-dim); cursor: pointer; transition: color 0.15s; }
.um-ico:hover { color: var(--um-fg); }

.um-card { border: 1px solid var(--um-line); border-radius: 10px; padding: 16px 18px; }
.um-signals {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px;
  background: var(--um-bg);
  margin-bottom: 14px;
  position: relative;
}
.um-sig-col { display: flex; flex-direction: column; gap: 9px; }
.um-sig { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--um-dim); }
.um-sig b { color: var(--um-fg); font-weight: 600; }
.um-sig > span:first-child { width: 18px; text-align: center; font-size: 14px; }
.um-stars { color: #f59e0b; letter-spacing: 0; font-size: 11px; display: inline-block; width: auto !important; }
.um-sig .um-stars { width: auto; min-width: 60px; }
.um-star { color: #f59e0b; font-size: 14px; }
.um-sh { color: var(--um-accent); }

.um-body { font-size: 13px; line-height: 1.55; color: var(--um-fg); margin: 0 0 6px; }
.um-more { color: var(--um-accent); font-size: 13px; text-decoration: none; display: inline-block; margin-bottom: 16px; }

.um-section-label { font-family: var(--font-mono); font-size: 11px; color: var(--um-dim); letter-spacing: 0.14em; margin: 16px 0 10px; }

.um-offers { display: flex; flex-direction: column; gap: 8px; position: relative; }
.um-offer {
  display: grid;
  grid-template-columns: 18px 32px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--um-line);
  border-radius: 10px;
  background: var(--um-bg);
}
.um-offer-active { border-color: oklch(0.55 0.15 240 / 0.6); background: oklch(0.24 0.06 240 / 0.8); box-shadow: 0 0 0 1px oklch(0.55 0.15 240 / 0.4) inset; }
.um-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--um-line); display: inline-block; position: relative; }
.um-offer-active .um-radio { border-color: var(--um-accent); }
.um-offer-active .um-radio::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--um-accent); }
.um-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: #cbd5e1 center/cover no-repeat;
  border: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.um-offer-name { display: flex; gap: 10px; align-items: center; min-width: 0; }
.um-offer-name b { font-weight: 600; color: var(--um-fg); font-size: 13px; }
.um-tag { padding: 3px 8px; border-radius: 6px; background: var(--um-soft); font-size: 11px; color: var(--um-dim); border: 1px solid var(--um-line); }
.um-score { padding: 4px 10px; border-radius: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.um-score-good { background: var(--um-good-bg); color: var(--um-good-fg); }
.um-score-mid  { background: var(--um-mid-bg);  color: var(--um-mid-fg); }
.um-other { color: var(--um-dim); font-size: 12px; padding: 4px 4px 0; display: flex; gap: 6px; align-items: center; }
.um-badge { background: var(--um-soft); border: 1px solid var(--um-line); padding: 1px 7px; border-radius: 8px; font-family: var(--font-mono); font-size: 10px; }

.um-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.um-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.um-field { display: flex; flex-direction: column; gap: 6px; }
.um-label { font-family: var(--font-mono); font-size: 10px; color: var(--um-dim); letter-spacing: 0.16em; min-width: 80px; }
.um-select {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid var(--um-line);
  border-radius: 8px;
  background: var(--um-bg);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
  color: var(--um-fg);
}
.um-caret { color: var(--um-dim); font-size: 10px; }

.um-cover { margin-top: 14px; position: relative; }
.um-cover-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.um-cover-head .um-section-label { margin: 0; }
.um-cover-preview {
  border: 1px solid var(--um-line);
  border-radius: 10px;
  padding: 14px;
  background: var(--um-soft);
  font-size: 12.5px;
  color: var(--um-fg);
  line-height: 1.55;
}
.um-cover-preview .um-mono-label { font-family: var(--font-mono); font-size: 11px; color: var(--um-accent); display: block; margin-bottom: 8px; letter-spacing: 0.08em; }
.um-cover-preview p { margin: 0; }
.um-cover-preview em { font-style: normal; font-weight: 600; color: var(--um-accent); }
.um-caret-blink { display: inline-block; width: 7px; height: 13px; background: var(--um-accent); vertical-align: -2px; margin-left: 3px; animation: umBlink 1s steps(2) infinite; }
@keyframes umBlink { 50% { opacity: 0; } }

.um-btn-primary {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--um-accent);
  color: #fff;
  border: none;
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(37,99,235,0.6);
}
.um-spark { font-size: 11px; }

.um-actions { margin-top: 18px; display: flex; gap: 12px; }
.um-btn-ghost, .um-btn-submit { flex: 1; padding: 10px 14px; border-radius: 10px; font-size: 13px; cursor: pointer; }
.um-btn-ghost { border: 1px solid var(--um-line); background: var(--um-bg); color: var(--um-fg); flex: 0 0 auto; padding: 10px 22px; }
.um-btn-submit { border: none; background: var(--um-soft); color: var(--um-dim); font-weight: 500; }
.um-foot { text-align: center; color: var(--um-dim); font-size: 11px; margin-top: 10px; }

/* Corner annotations */
.ui-anno {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  box-shadow: 0 6px 18px -4px var(--accent-glow), 0 0 0 4px color-mix(in oklch, var(--accent-glow) 40%, transparent);
  z-index: 3;
  animation: annoPulse 3s var(--ease-in-out) infinite;
}
.ui-anno-a { top: 96px; left: -14px; }
.ui-anno-b { top: 48%; left: -14px; }
.ui-anno-c { top: 68%; right: -14px; }
.ui-anno-d { bottom: 44px; right: -14px; }
@keyframes annoPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}

@media (max-width: 960px) {
  .inside-layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .inside-notes { position: static; }
  .ui-anno { display: none; }
  .ui-mock { padding: 18px; }
  .um-title { font-size: 17px; }
  .um-signals { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- FEATURES ---------- */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.feature {
  position: relative;
  border: 1px solid var(--line-soft);
  background: var(--bg-elev);
  border-radius: var(--r-3);
  padding: var(--s-6);
  display: flex; flex-direction: column;
  min-height: 420px;
  transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.feature:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.feature header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: var(--s-3);
  min-height: 4.6em;
}
.feat-n {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  margin: 0;
}
.feature h3 {
  margin: 0;
  word-break: break-word;
  line-height: 1.15;
}
.feature header .badge {
  margin-top: 2px;
}
.feature p { color: var(--text-dim); line-height: 1.55; margin: 0 0 var(--s-5); max-width: 46ch; min-height: 6.2em; }
.feat-viz {
  margin-top: auto;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  padding: var(--s-4);
  min-height: 170px;
  position: relative;
  overflow: hidden;
}
.badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--accent-dim); color: var(--accent);
}
.badge-inline {
  display: inline-block; vertical-align: 3px;
  font-size: 9px; padding: 2px 6px; margin-left: 6px;
}

/* ---------- FEATURE MINI-UI VIZ ---------- */
/* common frame */
.feat-viz { padding: 0; height: 300px; margin-top: var(--s-4); display: flex; flex-direction: column; overflow: hidden; }
.feat-viz > :last-child { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* allow expanded (.feature.open) cards to grow naturally */
.feature.open .feat-viz { height: auto; min-height: 300px; overflow: visible; }
.feature.open .feat-viz > :last-child { overflow: visible; }

/* surface-level font forcing — match real product (sans everywhere except mono labels) */
.ui-surface,
.ui-surface * {
  font-family: var(--font-sans);
}
.ui-surface .mono-label,
.ui-surface .mono-label * {
  font-family: var(--font-mono);
}
.vs-head, .vn-head, .vl-head, .vc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px dashed var(--line-soft);
  background: color-mix(in oklch, var(--surface) 35%, transparent);
  gap: 8px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.vs-head > *, .vn-head > *, .vl-head > *, .vc-head > * {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.vs-head-r, .vn-head-r, .vl-head-r, .vc-head-r { color: var(--accent); flex-shrink: 0; }
.vs-head-r i, .vn-head-r i, .vl-head-r i, .vc-head-r i {
  display: none;
}

/* viz-score: center content to remove bottom whitespace */
.feat-viz.viz-score { justify-content: flex-start; }
.viz-score .vs-list { flex: 1 1 auto; justify-content: space-between; }
.vs-list {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
}
.vs-row {
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
:root[data-theme="light"] .vs-row { background: #fff; }
.vs-meta {
  display: flex; flex-wrap: nowrap;
  gap: 14px;
  color: var(--text-mute);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.2;
  align-items: center;
  overflow: hidden;
}
.vs-m {
  display: inline-flex; align-items: center; gap: 5px;
  min-width: 0;
  color: var(--text-mute);
  font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex-shrink: 0;
}
.vs-m svg { flex-shrink: 0; opacity: 0.8; }
.vs-flag { font-size: 11px; line-height: 1; flex-shrink: 0; }

.vs-score {
  display: inline-flex; align-items: center; justify-content: center;
  height: 19px; padding: 0 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  border: 0;
  align-self: flex-start;
}
.vs-score-good { background: color-mix(in oklch, var(--fv-green) 20%, transparent); color: var(--fv-green); }
.vs-score-mid  { background: color-mix(in oklch, var(--fv-yellow) 22%, transparent); color: var(--fv-yellow); }
.vs-score-bad  { background: color-mix(in oklch, var(--fv-red) 20%, transparent); color: var(--fv-red); }
.vs-row-top {
  display: flex; align-items: flex-start; gap: 8px;
  min-width: 0;
}
.vs-title {
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vs-tags { display: none; } /* collapsed: hide to keep compact */
.feature.open .vs-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.feature.open .vs-title { white-space: normal; }
.vs-tag {
  font-size: 9px;
  padding: 2px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--text-dim);
  background: transparent;
}
.vs-row[data-score="32"] { opacity: 1; }

/* hover: rows fade through one by one as filter passes */
@keyframes vsPass {
  0%, 100% { background: var(--bg-elev); }
  50% { background: color-mix(in oklch, var(--accent-glow) 18%, var(--bg-elev)); }
}
:root[data-theme="light"] @keyframes vsPassLight {
  0%, 100% { background: #fff; }
  50% { background: color-mix(in oklch, var(--accent-glow) 22%, #fff); }
}
.feature[data-feat="score"] .vs-row,
.feature[data-feat="score"] .vs-score {
  /* hover animations removed for a calmer feel */
}

/* ===== viz-notify — notification list, same card-list pattern as viz-score ===== */
.feat-viz.viz-notify { justify-content: flex-start; }
.viz-notify .vn-body { flex: 1 1 auto; }
.vn-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
}
.vn-group-label {
  padding: 2px 2px 0;
  color: var(--text-mute);
  font-size: 9px;
  letter-spacing: 0.1em;
}
.vn-group-label + .vn-group-label { margin-top: 4px; }
.vn-item {
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  position: relative;
  min-width: 0;
}
:root[data-theme="light"] .vn-item { background: #fff; }
.vn-item + .vn-item { border-top: 1px solid var(--line-soft); } /* keep fallback for non-card contexts */
.vn-item-new {
  background: color-mix(in oklch, var(--accent-glow) 14%, var(--bg-elev));
  border-color: color-mix(in oklch, var(--accent) 40%, var(--line));
}
:root[data-theme="light"] .vn-item-new {
  background: color-mix(in oklch, var(--accent-glow) 18%, #fff);
}
.vn-item-muted { opacity: 1; }
.vn-ico {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  margin-top: 0;
  flex-shrink: 0;
}
.vn-ico-match { background: color-mix(in oklch, var(--accent) 20%, transparent); color: var(--accent); border: 1px solid var(--accent-dim); }
.vn-ico-ok { background: color-mix(in oklch, var(--fv-green) 18%, transparent); color: var(--fv-green); border: 1px solid color-mix(in oklch, var(--fv-green) 40%, transparent); }
.vn-ico-warn { background: color-mix(in oklch, #d6ad2a 20%, transparent); color: #d6ad2a; border: 1px solid color-mix(in oklch, #d6ad2a 45%, transparent); font-weight: 600; }
.vn-ico-err { background: color-mix(in oklch, var(--fv-red) 12%, transparent); color: var(--fv-red); border: 1px solid color-mix(in oklch, var(--fv-red) 35%, transparent); }
.vn-main { min-width: 0; }
.vn-top {
  display: flex; justify-content: space-between;
  gap: 8px; align-items: baseline;
  margin-bottom: 3px; min-width: 0;
}
.vn-time {
  color: var(--text-mute); font-size: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
  /* reserve space so the dot does not push time left */
  padding-right: 10px;
  position: relative;
}
.vn-unread {
  position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.vn-subj {
  font-weight: 500; font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.vn-desc {
  color: var(--text-dim); font-size: 11px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vn-desc a { color: var(--accent); text-decoration: none; }
.vn-foot {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px;
}
.vn-who {
  padding: 2px 7px 2px 3px;
  background: color-mix(in oklch, var(--surface) 70%, transparent);
  border-radius: var(--r-pill);
  color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: -4px;
}
.vn-act { color: var(--accent); margin-left: auto; text-decoration: none; flex-shrink: 0; }
.vn-av {
  width: 16px; height: 16px; border-radius: 50%;
  background: color-mix(in oklch, var(--accent-glow) 60%, var(--surface));
  border: 1px solid var(--accent-dim);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 8px; color: var(--accent);
  flex-shrink: 0;
}
/* hover: pulse the "new" notification border + unread dot grows/shrinks */
@keyframes vnPulse {
  0%, 100% {
    background: color-mix(in oklch, var(--accent-glow) 14%, var(--bg-elev));
    border-color: color-mix(in oklch, var(--accent) 40%, var(--line));
  }
  50% {
    background: color-mix(in oklch, var(--accent-glow) 32%, var(--bg-elev));
    border-color: var(--accent);
  }
}
:root[data-theme="light"] @keyframes vnPulseLight {
  0%, 100% {
    background: color-mix(in oklch, var(--accent-glow) 18%, #fff);
    border-color: color-mix(in oklch, var(--accent) 40%, var(--line));
  }
  50% {
    background: color-mix(in oklch, var(--accent-glow) 36%, #fff);
    border-color: var(--accent);
  }
}
/* hover animations removed for f.02 — calmer notify list */
@keyframes vnDot {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.85; }
  50% { transform: translateY(-50%) scale(1.4); opacity: 1; }
}
/* hover animations removed for f.02 dot pulse */

/* ===== viz-letter — "COVER LETTER" + Generate, like real product ===== */
/* viz-letter: letter fills the whole feat-viz below the header */
.feat-viz.viz-letter { display: flex; flex-direction: column; }
.vl-head { padding: 10px 14px; flex-shrink: 0; }
.vl-body { padding: 12px 14px 14px; flex: 1 1 auto; display: flex; flex-direction: column; }
.vl-head .mono-label {
  text-transform: uppercase; color: var(--text-mute);
  font-size: 10px; letter-spacing: 0.06em;
  flex: 1 1 auto; min-width: 0;
}
.vl-generate {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  font-size: 11px; font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer; border: 0;
  flex-shrink: 0;
}
.vl-generate:hover { background: color-mix(in oklch, var(--accent) 90%, white); }
.vl-body { }
.vl-pad {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 8px;
  color: var(--text-mute);
  font-size: 10px;
  gap: 10px;
  white-space: nowrap;
}
.vl-pad > span:first-child {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.vl-spark { font-size: 11px; }
.vl-unsaved { color: var(--accent); flex-shrink: 0; }
.vl-doc { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.letter {
  font-size: 11px; line-height: 1.55;
  color: var(--text-dim);
  flex: 1 1 auto;
  min-height: 110px;
  word-break: break-word;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: color-mix(in oklch, var(--surface) 30%, transparent);
}
.letter .t { color: var(--text); }
/* cursor blinks whenever letter is typing (visible by default when typing is active) */
.letter .cursor {
  display: inline-block; width: 2px; height: 12px; vertical-align: -2px;
  background: var(--accent);
  margin-left: 1px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ===== viz-crm — minimal 2-column kanban with simple slide animation ===== */
.vc-board-2col {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  min-height: 0;
}
.vc-col {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0;
}
.vc-col-head {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 2px 4px;
  min-width: 0;
  flex-wrap: nowrap;
}
.vc-col-ring {
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid currentColor;
  flex-shrink: 0;
}
.vc-ring-mql  { color: #9aa3b5; }
.vc-ring-won  { color: var(--fv-green); }
.vc-ring-qual { color: var(--accent); }
.vc-ring-sql  { color: #d6ad2a; }
.vc-col-title {
  color: var(--text); font-size: 11px; font-weight: 600;
  flex: 0 0 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc-col-num {
  color: var(--text-dim); font-size: 9px; font-weight: 500;
  padding: 1px 7px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  flex-shrink: 0;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  background: transparent;
  transition: color .25s ease, border-color .25s ease;
}
.vc-col-bar {
  height: 2px;
  background: var(--sb, var(--line-soft));
  border-radius: 2px;
  margin-bottom: 2px;
  opacity: .7;
}
.vc-col-list {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 0;
}
.vc-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 9px;
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
}
.vc-card-tags { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.vc-chip {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: lowercase;
}
.vc-chip-high { background: color-mix(in oklch, var(--fv-red) 16%, transparent); color: var(--fv-red); }
.vc-chip-mid  { background: color-mix(in oklch, #d6ad2a 22%, transparent); color: #b08718; }
.vc-chip-med  { background: color-mix(in oklch, #d6ad2a 22%, transparent); color: #b08718; }
.vc-chip-low  { background: color-mix(in oklch, var(--fv-green) 18%, transparent); color: var(--fv-green); }
.vc-chip-good { background: color-mix(in oklch, var(--fv-green) 18%, transparent); color: var(--fv-green); }
.vc-card-title {
  font-size: 11.5px; line-height: 1.35; color: var(--text);
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-word;
}
.vc-card-meta {
  font-size: 10px; color: var(--text-dim);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.vc-card-won { opacity: .92; }

/* the mover card stays in place; on hover the border + chip cross-fade to "won" */
.vc-card-mover {
  transition: border-color .5s ease, box-shadow .5s ease;
}
.vc-chip-from, .vc-chip-to {
  transition: opacity .5s ease;
}
.vc-chip-to {
  position: absolute;
  opacity: 0;
}
.vc-card-tags { position: relative; }

/* CRM block — no hover animation, fully static */
.vc-chip-to { display: none; }

/* expanded card — looser layout */
.feature.open .vs-title { font-size: 14px; }
.feature.open .vs-sub { font-size: 11px; }
.feature.open .vn-item { padding: 12px 16px; }
.feature.open .vn-desc { white-space: normal; overflow: visible; }
.feature.open .vn-subj { white-space: normal; }
.feature.open .vl-body { min-height: 200px; }
.feature.open .letter { font-size: 12px; min-height: 150px; }
.feature.open .vc-board { gap: 8px; padding: 12px; }
.feature.open .vc-card-title { -webkit-line-clamp: 3; }

@media (max-width: 820px) { .features { grid-template-columns: 1fr; } }

/* ---------- FEATURE EXPAND (disabled — cards are static) ---------- */
.feature:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.feat-detail { display: none; }

.feat-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
}
.fd-col { min-width: 0; }
.fd-label { display: block; margin-bottom: 12px; color: var(--text-mute); }

.fd-list, .fd-steps, .fd-templates {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.fd-list li, .fd-templates li {
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
}
.fd-list li b { color: var(--text); display: inline-block; min-width: 110px; }
.fd-templates li { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 12px; }
.fd-templates li b { color: var(--accent); }
.fd-templates li span { color: var(--text-mute); font-family: var(--font-sans); font-size: 13px; }

.fd-steps { counter-reset: step; }
.fd-steps li {
  position: relative;
  counter-increment: step;
  padding: 10px 14px 10px 46px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 14px;
}
.fd-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.fd-steps li b { color: var(--text); }

.fd-score {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-mono); font-size: 12px;
}
.fd-score-row {
  display: grid;
  grid-template-columns: 78px 80px 1fr;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  background: var(--bg);
  gap: 10px;
}
.fd-score-row span { color: var(--text-mute); }
.fd-score-row b { font-weight: 500; font-size: 11px; padding: 3px 8px; border-radius: var(--r-1); text-align: center; letter-spacing: 0.08em; }
.fd-score-row em { font-style: normal; color: var(--text-dim); font-family: var(--font-sans); font-size: 13px; }
.fd-bad  { background: color-mix(in oklch, var(--bad) 15%, transparent); color: var(--bad); border: 1px solid color-mix(in oklch, var(--bad) 40%, transparent); }
.fd-mid  { background: color-mix(in oklch, var(--text-mute) 15%, transparent); color: var(--text-dim); border: 1px solid var(--line); }
.fd-good { background: color-mix(in oklch, var(--accent-glow) 30%, transparent); color: var(--accent); border: 1px solid var(--accent-dim); }

.fd-pills, .fd-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.fd-pills span, .fd-tags span {
  padding: 5px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim);
  background: var(--bg);
}

.fd-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fd-ch {
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  background: var(--bg);
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13px;
}
.fd-ch b { color: var(--text); font-weight: 500; }
.fd-ch span { color: var(--text-mute); font-size: 12px; }

.fd-note { margin: 14px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.fd-note b { color: var(--text); }
.fd-soon b { color: var(--accent); }

@media (max-width: 820px) {
  .feat-detail-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .fd-channels { grid-template-columns: 1fr; }
}

/* ---------- WHY ---------- */
.why-split {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-elev);
}
.why-side { padding: var(--s-6); position: relative; }
.why-before { background: var(--bg-elev); }
.why-after { background: var(--bg-elev); }
.side-label { display: block; margin-bottom: var(--s-4); }

/* ----- chaos stage (before) ----- */
.chaos-stage {
  position: relative;
  width: 100%;
  min-height: 220px;
  margin-bottom: var(--s-4);
  overflow: hidden;
  border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, color-mix(in oklch, var(--bad) 4%, transparent) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, color-mix(in oklch, var(--bad) 4%, transparent) 0 1px, transparent 1px 22px),
    var(--bg);
}
.chaos-win {
  position: absolute;
  width: 50%;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.18);
  font-size: 10px;
  overflow: hidden;
}
.chaos-win-err { border-color: color-mix(in oklch, var(--bad) 50%, var(--line-soft)); }
.chaos-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.chaos-dots { display: inline-flex; gap: 3px; }
.chaos-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.chaos-title {
  flex: 1;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chaos-badge {
  background: var(--bad); color: #fff;
  font-size: 8px; font-weight: 600;
  padding: 1px 5px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.chaos-body { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.chaos-line { height: 4px; background: color-mix(in oklch, var(--text-dim) 18%, transparent); border-radius: 2px; }
.chaos-line.short { width: 60%; }
.chaos-err { color: var(--bad); font-family: var(--font-mono); font-size: 9px; padding: 2px 0; }
.chaos-tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--bad);
  background: color-mix(in oklch, var(--bad) 12%, var(--surface));
  border: 1px dashed color-mix(in oklch, var(--bad) 50%, transparent);
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 10;
  white-space: nowrap;
}

/* ----- order stage (after) ----- */
.order-stage {
  position: relative;
  width: 100%;
  min-height: 220px;
  margin-bottom: var(--s-4);
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--bg);
}
.order-win {
  width: 96%;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.18);
  overflow: hidden;
}
.order-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.order-title { flex: 1; color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; }
.order-pill {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.order-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.order-row {
  /* override vc-card defaults to flow as a single row */
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
}
.order-row .vc-card-tags { flex: 0 0 auto; }
.order-row .vc-card-title {
  flex: 1;
  -webkit-line-clamp: 1 !important;
  white-space: nowrap;
  font-size: 11.5px;
}
.order-row .vc-card-meta { flex: 0 0 auto; white-space: nowrap; }
.order-row-hi {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent);
}
.why-arrow { display: grid; place-items: center; color: var(--text-mute); font-size: 22px; border-left: 1px dashed var(--line-soft); border-right: 1px dashed var(--line-soft); }
.why-list { list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--text-dim); }
.why-list li { padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
.why-list li:last-child { border: 0; }
.why-list.ok li::before { content: "✓ "; color: var(--accent); font-family: var(--font-mono); }
.why-before .why-list li::before { content: "✕ "; color: var(--bad); font-family: var(--font-mono); }

@media (max-width: 760px) {
  .why-split { grid-template-columns: 1fr; }
  .why-arrow { transform: rotate(90deg); border: 0; padding: 20px 0; }
}

/* ---------- AUDIENCE — persona cards ---------- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  align-items: stretch;
}
.audience-grid > .persona { height: 100%; }
.persona {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  background: var(--bg-elev);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.persona:hover {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--line-soft));
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -16px color-mix(in oklch, var(--accent) 30%, transparent);
}
.persona-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line-soft);
  margin-bottom: 14px;
}
.persona-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--line-soft);
}
.persona-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.persona-id b {
  color: var(--text); font-weight: 600;
  font-size: 15px; line-height: 1.2;
}
.persona-id span {
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 11px;
}
.persona-fit {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  background: transparent;
  padding: 0;
  border: 0;
  flex-shrink: 0;
}
.persona-fit i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fv-green, #16a34a);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--fv-green, #16a34a) 20%, transparent);
  animation: bex-pulse 2.4s ease-in-out infinite;
}
@keyframes bex-pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.persona-quote {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  position: relative;
  padding-left: 14px;
}
.persona-quote::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: color-mix(in oklch, var(--accent) 50%, transparent);
  border-radius: 2px;
}
.persona-needs {
  list-style: none; padding: 0; margin: auto 0 0;
  font-size: 13px;
  color: var(--text-dim);
  display: flex; flex-direction: column; gap: 6px;
}
.persona-needs li {
  position: relative;
  padding-left: 18px;
}
.persona-needs li::before {
  content: "→";
  position: absolute;
  left: 0; top: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 600;
}

.aud-foot {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--line-soft);
  border-radius: var(--r-2);
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--bg);
}
.aud-foot .mono-label {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.aud-foot .mono-label i {
  display: inline-block; width: 6px; height: 6px;
  background: var(--warn); border-radius: 50%;
}
.aud-foot p {
  margin: 0;
  font-size: 14px;
  color: var(--text-dim);
}

@media (max-width: 1000px) { .audience-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .audience-grid { grid-template-columns: 1fr; } .aud-foot { flex-direction: column; align-items: flex-start; } }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; padding: var(--s-11) 0; text-align: center; }
.cta .grid-bg { mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 20%, transparent 80%); }
.cta-inner { position: relative; max-width: 800px; }
.cta-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); margin-bottom: var(--s-5); }
.cta-eyebrow i { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 10px var(--accent); animation: pulse 1.6s infinite; }
.cta-title { margin: 0 auto var(--s-5); }
.cta .lead { margin: 0 auto var(--s-6); }
.cta-form { display: flex; gap: 10px; justify-content: center; max-width: 520px; margin: 0 auto; }
.cta-form input {
  flex: 1;
  height: 48px; padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color var(--dur-fast), opacity var(--dur-fast);
}
.cta-form input:focus { border-color: var(--accent); }
.cta-form input:disabled,
.cta-form button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--line-soft); padding: var(--s-6) 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; }
/* footer inline SVG logo */
.foot-brand .brand-logo-svg {
  height: 20px;
  opacity: 0.65;
}
.foot-brand .brand-logo-svg .logo-dot { fill: var(--accent); }
.foot-links { display: flex; gap: 16px; }
.foot-links a { color: var(--text-mute); transition: color var(--dur-fast); }
.foot-links a:hover { color: var(--text); }
.foot-build { color: var(--text-mute); }



/* ---------- MOTION OFF ---------- */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   HERO variant · FEED (stream layout, real Upwork-style job cards)
   ============================================================ */

.feed-viz {
  --fv-card-h: 78px;   /* card height */
  --fv-card-w: 260px;  /* card width (raw feed lane) */
}

.fv-stage { position: relative; height: 460px; overflow: hidden; margin-top: 14px; }
.fv-lanes {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 1px;
  height: 100%;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  overflow: hidden;
}
.fv-lane {
  position: relative;
  padding: 14px;
  background: var(--bg-elev);
  overflow: hidden;
}
.fv-lane-feed {
  background: color-mix(in oklch, var(--surface) 40%, transparent);
}
.fv-lane-label { margin-bottom: 10px; display: block; }
.fv-lane-signal .fv-lane-label { color: var(--fv-green); }
.fv-lane-noise  .fv-lane-label { color: var(--fv-red); }
.fv-list-item .fv-verdict-label { color: inherit; }
.fv-lane-signal .fv-list-item .fv-verdict-label { color: var(--fv-green); }
.fv-lane-noise  .fv-list-item .fv-verdict-label { color: var(--fv-red); }

/* raw-feed travel area — narrower, card-sized */
.fv-feed {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40px;
  bottom: 14px;
  width: var(--fv-card-w);
  max-width: calc(100% - 28px);
  overflow: visible;
  pointer-events: none;
}
.fv-feed::before, .fv-feed::after {
  content: ""; position: absolute; left: -10px; right: -10px; height: 40px; z-index: 3; pointer-events: none;
}
.fv-feed::before { top: -10px; background: linear-gradient(180deg, color-mix(in oklch, var(--surface) 40%, transparent), transparent); }
.fv-feed::after  { bottom: -10px; background: linear-gradient(0deg,  color-mix(in oklch, var(--surface) 40%, transparent), transparent); }

/* a travelling job-card — JS drives its --y / --x / --o */
.fv-job {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: var(--fv-card-h);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  transform: translate(var(--x, 0), var(--y, 0));
  opacity: var(--o, 0);
  transition: background 400ms var(--ease-out), border-color 400ms var(--ease-out),
              box-shadow 400ms var(--ease-out), filter 400ms var(--ease-out);
  will-change: transform, opacity;
  box-sizing: border-box;
}
:root[data-theme="light"] .fv-job { background: #fff; }

/* state: "drifting" — before filter, dim & desaturated */
.fv-job.drifting {
  filter: saturate(0.5);
  border-style: dashed;
}
/* state: "onFilter" — inside the filter bar, fully visible */
.fv-job.on-filter {
  filter: none;
  border-style: solid;
  box-shadow: 0 0 0 1px var(--accent-dim), 0 10px 30px -14px var(--accent-glow);
}
/* verdict: matched — subtle green tint, text label goes green */
.fv-job.verdict-match {
  border-color: var(--fv-green);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--fv-green) 55%, transparent),
              0 10px 30px -14px color-mix(in oklch, var(--fv-green) 40%, transparent);
}
.fv-job.verdict-match .fv-verdict-label { color: var(--fv-green); }
/* verdict: rejected — muted red text */
.fv-job.verdict-reject {
  border-color: color-mix(in oklch, var(--fv-red) 45%, var(--line));
  filter: saturate(0.85);
}
.fv-job.verdict-reject .fv-verdict-label { color: var(--fv-red); }

.fv-job-top {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-mute);
  letter-spacing: 0.02em;
}
.fv-job-title {
  font-size: 13px; line-height: 1.2;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fv-job-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.fv-job-left {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 0;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim);
}
.fv-job-left .fv-flag { font-size: 13px; line-height: 1; }
.fv-score {
  display: inline-flex; align-items: center; justify-content: center;
  height: 19px; padding: 0 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.fv-score.s-high { background: color-mix(in oklch, var(--fv-green) 20%, transparent); color: var(--fv-green); }
.fv-score.s-mid  { background: color-mix(in oklch, var(--fv-yellow) 22%, transparent); color: var(--fv-yellow); }
.fv-score.s-low  { background: color-mix(in oklch, var(--fv-red) 20%, transparent); color: var(--fv-red); }

/* filter section — exact card size with padding for the label frame */
.fv-filter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  margin-top: calc((var(--fv-card-h) / -2) - 8px);
  width: calc(var(--fv-card-w) + 16px);
  max-width: calc(100% - 14px);
  height: calc(var(--fv-card-h) + 16px);
  border-radius: 12px;
  background: color-mix(in oklch, var(--accent-glow) 14%, transparent);
  border: 1px dashed var(--accent-dim);
  pointer-events: none;
  z-index: 1;
}
.fv-filter .mono-label {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  background: color-mix(in oklch, var(--bg-elev) 92%, transparent);
  padding: 0 10px;
  color: var(--accent);
}
.fv-filter::before {
  content: "";
  position: absolute; inset: 6px;
  border-radius: 8px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in oklch, var(--accent) 28%, transparent) 0 1px,
    transparent 1px 14px
  );
  opacity: 0.28;
}

/* lane lists (matched / rejected) */
.fv-list { display: flex; flex-direction: column; }
.fv-list-item {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  animation: fvItemIn 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
:root[data-theme="light"] .fv-list-item { background: #fff; }
@keyframes fvItemIn {
  0%   { max-height: 0; padding-top: 0; padding-bottom: 0;
         margin-bottom: 0; opacity: 0;
         transform: translateX(var(--in-x, 0)) scale(0.97); }
  50%  { opacity: 1; }
  100% { max-height: 160px; padding-top: 9px; padding-bottom: 9px;
         margin-bottom: 8px; opacity: 1;
         transform: translateX(0) scale(1); }
}
.fv-lane-signal .fv-list-item,
.fv-item-from-right {
  --in-x: 18px;
  border-color: color-mix(in oklch, var(--fv-green) 55%, transparent);
  background: color-mix(in oklch, var(--fv-green) 10%, var(--surface));
}
.fv-lane-noise .fv-list-item,
.fv-item-from-left {
  --in-x: -18px;
  opacity: 0.82;
  border-color: color-mix(in oklch, var(--fv-red) 30%, var(--line));
}
.fv-list-item .fv-job-top { font-size: 9.5px; }
.fv-list-item .fv-job-title { font-size: 12px; line-height: 1.22; }
.fv-list-item .fv-job-foot .fv-job-left { font-size: 10.5px; }
.fv-lane-noise .fv-list-item .fv-job-title { color: var(--text-dim); }

/* variant visibility — ensure feed shows its scaffolding */
.hero-viz { display: none; }
:root[data-hero="scanner"] .signal-viewer[data-variant="scanner"],
:root[data-hero="orbit"]   .hero-viz[data-variant="orbit"],
:root[data-hero="stream"]  .hero-viz[data-variant="stream"],
:root[data-hero="feed"]    .hero-viz[data-variant="feed"] { display: block; }

@media (max-width: 900px) {
  .fv-stage { height: 360px; }
  .fv-lanes { grid-template-columns: 1fr 1fr; }
  .fv-lane-feed { display: none; }
}

/* ============================================================
   Scroll-driven A/B/C/D highlight on ui-mock
   ============================================================ */

/* inotes — pronounced dim on inactive, distinct active */
.inside-notes .inote {
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out),
              border-color 360ms var(--ease-out), filter 360ms var(--ease-out);
  opacity: 0.28;
  filter: saturate(0.6);
  border-left: 2px solid transparent;
  padding-left: 14px;
  margin-left: -16px;
}
.inside-notes .inote.is-active {
  opacity: 1;
  filter: none;
  border-left-color: var(--accent);
  transform: translateX(4px);
}

/* mock regions — dim inactive zones, highlight active one */
.ui-mock [data-anno] {
  transition: opacity 400ms var(--ease-out), filter 400ms var(--ease-out),
              box-shadow 400ms var(--ease-out), outline-color 400ms var(--ease-out);
  border-radius: 12px;
}
.ui-mock.has-focus [data-anno]:not(.is-active) {
  opacity: 0.42;
  filter: saturate(0.6);
}
.ui-mock.has-focus [data-anno].is-active {
  opacity: 1;
  filter: none;
  outline: 1px solid var(--accent);
  outline-offset: 10px;
  border-radius: 8px;
}
.ui-mock:not(.has-focus) [data-anno] {
  opacity: 1;
  filter: none;
}

/* corner labels — clearly muted by default, accent-filled when active */
.ui-anno {
  transition: background 300ms var(--ease-out), color 300ms var(--ease-out),
              transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out),
              opacity 300ms var(--ease-out);
  background: var(--surface-2);
  color: var(--text-mute);
  box-shadow: 0 0 0 1px var(--line-soft);
  animation: none; /* override the always-on pulse */
  opacity: 0.7;
}
.ui-mock-wrap.has-focus .ui-anno:not(.is-active) {
  opacity: 0.4;
  background: var(--surface-2);
  color: var(--text-mute);
  box-shadow: 0 0 0 1px var(--line-soft);
}
.ui-anno.is-active {
  background: var(--accent);
  color: #fff;
  opacity: 1;
  transform: scale(1.18);
  box-shadow: 0 0 0 4px var(--accent-glow), 0 8px 22px -6px var(--accent-glow);
  animation: annoPulse 2.4s var(--ease-in-out) infinite;
}