/* ─────────────────────────────────────────────────────────────
 * mcp.schedii.app  ·  Pertel by Schedii
 * Direction-specific styles + shared chrome
 * ───────────────────────────────────────────────────────────── */

/* Honor design-system tokens — never invent colors */
@import url('./tokens.css');

html, body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: 'ss01', 'cv11', 'tnum';
  background: var(--color-background);
  color: var(--color-foreground);
}
* { box-sizing: border-box; }

/* ─── Shared primitives ───────────────────────────────────── */

.schedii-mono {
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo,
               Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.schedii-hero {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  color: var(--color-hero-text);
  text-shadow: var(--shadow-hero);
}
.schedii-hero-italic {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 30px rgba(34, 211, 238, 0.35);
}

/* ─── Status chip ─────────────────────────────────────────── */
.schedii-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--color-overlay-light);
  border: 1px solid var(--color-separator-light);
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.schedii-chip-dot {
  width: 7px; height: 7px; border-radius: 9999px;
  background: #06b6d4;
  box-shadow: 0 0 8px rgba(6,182,212,0.8);
  flex: 0 0 auto;
}
.schedii-chip-stat { display: inline-flex; align-items: center; gap: 6px; }
.schedii-chip-sep  { color: var(--color-muted-foreground); opacity: 0.5; }
.schedii-chip-label{ color: var(--color-foreground); opacity: 0.75; }
.schedii-chip-count{ font-weight: 600; }
.schedii-chip-count[data-state="live"]    { color: var(--color-success); }
.schedii-chip-count[data-state="queued"]  { color: #8b5cf6; }
.schedii-chip-count[data-state="expiring"]{ color: var(--color-warning); }
.schedii-chip-count[data-state="failed"]  { color: var(--color-destructive); }
.schedii-chip-count[data-state="neutral"] { color: var(--color-muted-foreground); }

/* ─── Lockup ──────────────────────────────────────────────── */
.schedii-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.schedii-lockup-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 1px;
}
.schedii-lockup-name {
  font-size: var(--lockup-size);
  line-height: 1;
  color: var(--color-foreground);
}
.schedii-lockup-tagline {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--lockup-size) * 0.5);
  color: #06b6d4;
  letter-spacing: 0.01em;
  opacity: 0.85;
  text-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
  margin-top: 1px;
}
.schedii-lockup-by {
  font-style: italic;
  font-weight: 400;
  color: var(--color-muted-foreground);
  font-size: calc(var(--lockup-size) * 0.55);
  letter-spacing: 0;
  margin-left: 2px;
}
.schedii-lockup-host {
  font-size: calc(var(--lockup-size) * 0.62);
  color: var(--color-muted-foreground);
  font-weight: 500;
}
.schedii-lockup-sep {
  font-size: calc(var(--lockup-size) * 0.6);
  color: var(--color-muted-foreground);
  opacity: 0.6;
  margin: 0 2px;
}

/* ─── Card-family hover (canonical Schedii) ──────────────── */
.cardx {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: var(--card-padding);
  transition: transform 180ms cubic-bezier(0.4,0,0.2,1),
              border-color 180ms ease,
              box-shadow 220ms ease;
}
.cardx:hover {
  transform: translateY(-2px);
  border-color: rgba(6,182,212,0.35);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18),
              0 0 0 1px rgba(6,182,212,0.15),
              0 0 24px rgba(6,182,212,0.12);
}
@media (prefers-reduced-motion: reduce) {
  .cardx, .cardx:hover { transform: none; }
}

/* ─── Top nav (glassmorphic, always present) ─────────────── */
.topnav {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--color-glass-bg);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--color-glass-border);
}
.topnav-host {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--color-muted-foreground);
  letter-spacing: 0.01em;
}
.topnav-host b { color: var(--color-foreground); font-weight: 500; }
.topnav-spacer { flex: 1; }
.topnav-cmdk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--color-overlay-light);
  border: 1px solid var(--color-separator-light);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--color-muted-foreground);
}
.topnav-cmdk kbd {
  font-family: inherit;
  background: var(--color-overlay-subtle);
  border: 1px solid var(--color-separator);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 10px;
}
.topnav-bell, .topnav-acct {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--color-muted-foreground);
}

.topnav-version {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #67e8f9;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  display: inline-flex; align-items: center; gap: 6px;
}
.topnav-version::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: #06b6d4;
  box-shadow: 0 0 8px rgba(6,182,212,0.6);
}

/* Top-nav action button (Theory · Install link) */
.topnav-btn {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #67e8f9;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 160ms cubic-bezier(0.4,0,0.2,1),
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}
.topnav-btn:hover {
  background: var(--color-primary-15);
  border-color: rgba(6,182,212,0.45);
  color: #06b6d4;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(6,182,212,0.15), 0 0 18px rgba(6,182,212,0.18);
}
.topnav-btn:active { transform: translateY(0) scale(0.98); }
.topnav-btn .sig {
  font-family: ui-monospace, Menlo, monospace;
  color: #06b6d4;
  font-size: 12px;
  opacity: 0.8;
}
.topnav-acct {
  background: var(--color-overlay-light);
  border: 1px solid var(--color-separator-light);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-foreground);
  width: auto;
  padding: 0 8px;
  gap: 6px;
}

/* ─── Page-level orb watercolor ──────────────────────────── */
.orb-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.orb-bg::before, .orb-bg::after, .orb-bg > span {
  content: '';
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.10;
}
.orb-bg::before {
  top: -200px; left: -120px;
  width: 520px; height: 520px;
  background: #06b6d4;
}
.orb-bg::after {
  top: -150px; right: -180px;
  width: 540px; height: 540px;
  background: #8b5cf6;
}
.orb-bg > span {
  bottom: -260px;
  left: 30%;
  width: 600px; height: 600px;
  background: #06b6d4;
  opacity: 0.06;
}
[data-theme="light"] .orb-bg::before,
[data-theme="light"] .orb-bg::after { opacity: 0.22; }
[data-theme="light"] .orb-bg > span { opacity: 0.16; }

/* Violet feature-accent flavour (when tweak `palette === 'cv'`) */
[data-palette="cv"] .feature-violet { color: #a78bfa; }
[data-palette="cyan"] .feature-violet { color: #67e8f9; }

/* ─── Direction A — Operator's dossier ───────────────────── */

.dirA {
  position: relative;
  min-height: 100%;
  font-feature-settings: 'tnum';
  --rule: var(--color-separator-light);
}
.dirA .frame {
  padding: 0 28px;
  max-width: 1240px;
  margin: 0 auto;
}
.dirA .stripe {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted-foreground);
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 24px;
  align-items: center;
}
.dirA .stripe b { color: var(--color-foreground); font-weight: 500; letter-spacing: 0.16em; }

.dirA .hero {
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.dirA .hero-eyebrow {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted-foreground);
  margin-bottom: 18px;
  display: inline-flex; gap: 8px; align-items: center;
}
.dirA .hero-eyebrow b { color: #06b6d4; font-weight: 500; }
.dirA .hero h1 {
  font-size: clamp(48px, 5.4vw, 84px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--color-foreground);
  text-wrap: balance;
}
.dirA .hero h1 em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 36px rgba(34,211,238,0.4);
}
.dirA .hero p {
  font-size: var(--font-fluid-lg);
  color: var(--color-muted-foreground);
  max-width: 56ch;
  line-height: 1.5;
  margin: 22px 0 0;
}
.dirA .hero-meta {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  display: grid;
  gap: 14px;
}
.dirA .hero-meta dl {
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 10px;
  column-gap: 16px;
}
.dirA .hero-meta dt { color: var(--color-muted-foreground); opacity: 0.7; }
.dirA .hero-meta dd { margin: 0; color: var(--color-foreground); }
.dirA .hero-meta dd .ok { color: var(--color-success); }
.dirA .hero-meta dd .cy { color: #06b6d4; }

/* Section heading */
.dirA .sect-h {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 56px 0 18px;
  border-bottom: 1px solid var(--rule);
}
.dirA .sect-h .num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #06b6d4;
  letter-spacing: 0.14em;
}
.dirA .sect-h h2 {
  font-size: var(--font-fluid-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.dirA .sect-h .right {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}

/* MCP table */
.dirA .mcptable {
  margin-top: 0;
  display: grid;
  grid-template-columns: 28px 200px 1fr 220px 100px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
}
.dirA .mcprow {
  display: contents;
}
.dirA .mcprow > div {
  padding: 18px 12px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-muted-foreground);
}
.dirA .mcprow:hover > div { background: var(--color-primary-5); color: var(--color-foreground); }
.dirA .mcprow .name {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-foreground);
  letter-spacing: -0.01em;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.dirA .mcprow .name small {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  color: var(--color-muted-foreground);
  letter-spacing: 0.04em;
  font-weight: 400;
  text-transform: lowercase;
}
.dirA .mcprow .blurb {
  font-family: -apple-system, sans-serif;
  font-size: 13px;
  color: var(--color-muted-foreground);
  line-height: 1.45;
}
.dirA .mcprow .ns {
  color: #67e8f9;
  font-size: 12px;
}
.dirA .mcprow .icon-cell {
  padding-right: 0;
  color: #06b6d4;
}
.dirA .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.dirA .status-pill .d {
  width: 6px; height: 6px; border-radius: 9999px;
}

/* Install panel */
.dirA .install {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--color-card);
  overflow: hidden;
  margin-top: 24px;
}
.dirA .install-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--color-overlay-subtle);
}
.dirA .install-tab {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  padding: 14px 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-right: 1px solid var(--rule);
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.dirA .install-tab[data-active="true"] {
  color: #06b6d4;
  border-bottom-color: #06b6d4;
}
.dirA .install pre {
  margin: 0;
  padding: 22px 24px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-foreground);
  overflow-x: auto;
}
.dirA .install .copybar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--rule);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}
.dirA .install .copybar b { color: var(--color-foreground); }
.dirA .install .copybtn {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid var(--color-separator-light);
  background: var(--color-overlay-light);
  color: var(--color-foreground);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}

/* JSON syntax dim hints */
.dirA .install pre .key { color: #67e8f9; }
.dirA .install pre .str { color: var(--color-success); }
.dirA .install pre .com { color: var(--color-muted-foreground); }
.dirA .install pre .pun { color: var(--color-muted-foreground); }

/* Pillars (four columns under hero) */
.dirA .pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.dirA .pillar {
  padding: 28px 22px;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 10px;
}
.dirA .pillar:last-child { border-right: 0; }
.dirA .pillar .lbl {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #06b6d4;
}
.dirA .pillar h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--color-foreground);
}
.dirA .pillar p {
  font-size: 13.5px;
  color: var(--color-muted-foreground);
  line-height: 1.55;
  margin: 0;
}

/* Conversation log preview */
.dirA .convo {
  margin-top: 18px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-card);
}
.dirA .convo-head {
  padding: 12px 18px;
  display: flex; gap: 12px; align-items: center;
  border-bottom: 1px solid var(--rule);
  background: var(--color-overlay-subtle);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}
.dirA .convo-head .dots { display: inline-flex; gap: 4px; }
.dirA .convo-head .dots span {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--color-overlay-light);
}
.dirA .convo-head .path { color: var(--color-foreground); }
.dirA .convo-body {
  padding: 18px 22px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  line-height: 1.8;
}
.dirA .convo-line { display: grid; grid-template-columns: 96px 1fr; gap: 16px; }
.dirA .convo-who {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  font-weight: 600;
  padding-top: 5px;
}
.dirA .convo-who[data-who="you"]     { color: var(--color-muted-foreground); }
.dirA .convo-who[data-who="pertel"]  { color: #06b6d4; }
.dirA .convo-who[data-who="schedii"] { color: #22d3ee; }
.dirA .convo-text { color: var(--color-foreground); }
.dirA .convo-text .at { color: #06b6d4; }
.dirA .convo-text .ev { color: var(--color-muted-foreground); }

/* Architecture diagram */
.dirA .arch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 18px;
  background: var(--color-card);
}
.dirA .arch-col { padding: 28px; border-right: 1px solid var(--rule); }
.dirA .arch-col:last-child { border-right: 0; }
.dirA .arch-col h4 {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #06b6d4;
  margin: 0 0 14px;
}
.dirA .arch-col ul {
  margin: 0; padding: 0; list-style: none;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  line-height: 2;
  color: var(--color-muted-foreground);
}
.dirA .arch-col ul li::before {
  content: '— ';
  color: #06b6d4;
  margin-right: 6px;
}
.dirA .arch-col ul li.no::before {
  content: '✕ ';
  color: var(--color-destructive);
}

/* Footer */
.dirA .foot {
  margin-top: 64px;
  padding: 28px 0 56px;
  border-top: 1px solid var(--rule);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  display: flex;
  gap: 24px;
}
.dirA .foot b { color: var(--color-foreground); }
.dirA .foot .right { margin-left: auto; }

/* Compact mode */
.compact .dirA .hero { padding: 36px 0 32px; gap: 36px; }
.compact .dirA .hero h1 { font-size: clamp(38px, 4.4vw, 64px); }
.compact .dirA .sect-h { padding: 36px 0 14px; }
.compact .dirA .pillar { padding: 20px 16px; }
.compact .dirA .install pre { padding: 16px 18px; font-size: 12px; }
.compact .dirA .convo-body { padding: 14px 18px; }
.compact .dirA .mcprow > div { padding: 12px 10px; }

/* ─── Direction B — Card / glass workbench ─────────────── */

.dirB {
  position: relative;
  min-height: 100%;
  padding-bottom: 80px;
}
.dirB .frame {
  padding: 0 32px;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.dirB .hero-wrap {
  position: relative;
  padding: 72px 0 56px;
}
.dirB .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #67e8f9;
}
.dirB .hero-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 9999px;
  background: #06b6d4;
  box-shadow: 0 0 8px rgba(6,182,212,0.8);
}
.dirB .hero-title {
  margin-top: 20px;
  font-size: clamp(48px, 5.4vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-hero-text);
  text-shadow: var(--shadow-hero);
  max-width: 22ch;
}
.dirB .hero-title em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 30px rgba(34,211,238,0.4);
}
.dirB .hero-sub {
  max-width: 60ch;
  margin-top: 22px;
  font-size: var(--font-fluid-lg);
  color: var(--color-muted-foreground);
  line-height: 1.55;
}
.dirB .hero-cta {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.dirB .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, #06b6d4, #0891b2);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px rgba(6,182,212,0.25), 0 6px 18px rgba(6,182,212,0.25);
  transition: transform 160ms cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
}
.dirB .btn-primary:hover { transform: scale(1.03); }
.dirB .btn-primary:active { transform: scale(0.98); }
.dirB .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--color-overlay-light);
  border: 1px solid var(--color-separator-light);
  color: var(--color-foreground);
  font-weight: 500;
  font-size: 13px;
  font-family: ui-monospace, Menlo, monospace;
  cursor: pointer;
}
.dirB .btn-ghost:hover { border-color: rgba(6,182,212,0.35); }

/* hero status row */
.dirB .hero-stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

/* hero side card — preview */
.dirB .hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
}
.dirB .hero-preview {
  border-radius: 16px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
}
.dirB .hero-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--color-muted-foreground);
}
.dirB .hero-preview-head .lights { display: inline-flex; gap: 6px; }
.dirB .hero-preview-head .lights span {
  width: 9px; height: 9px; border-radius: 9999px;
  background: var(--color-overlay-light);
  border: 1px solid var(--color-separator);
}
.dirB .hero-preview-body {
  padding: 18px 18px 20px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.85;
}
.dirB .hero-preview-line {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  margin-bottom: 6px;
}
.dirB .hero-preview-who {
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  padding-top: 5px;
  color: var(--color-muted-foreground);
}
.dirB .hero-preview-who[data-who="pertel"]  { color: #06b6d4; }
.dirB .hero-preview-who[data-who="schedii"] { color: #22d3ee; }
.dirB .hero-preview-line .text .at { color: #06b6d4; }
.dirB .hero-preview-line .text .ev { color: var(--color-muted-foreground); }

/* Section heading */
.dirB .sect {
  margin-top: 64px;
}
.dirB .sect-h {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 24px;
}
.dirB .sect-h h2 {
  font-size: clamp(26px, 2.4vw, 36px);
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
  color: var(--color-foreground);
}
.dirB .sect-h h2 em { font-style: italic; color: #06b6d4; }
.dirB .sect-h .right {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}

/* MCP card grid */
.dirB .mcpgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.dirB .mcpgrid > .mcpcard:first-child {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.dirB .mcpcard {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
  transition: transform 180ms cubic-bezier(0.4,0,0.2,1),
              border-color 180ms ease, box-shadow 220ms ease;
}
.dirB .mcpcard:hover {
  transform: translateY(-2px);
  border-color: rgba(6,182,212,0.35);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18),
              0 0 0 1px rgba(6,182,212,0.15),
              0 0 24px rgba(6,182,212,0.12);
}
.dirB .mcpcard-head {
  display: flex; align-items: flex-start; gap: 14px;
}
.dirB .mcpcard-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #06b6d4;
  flex: 0 0 auto;
}
.dirB .mcpcard[data-accent="violet"]  .mcpcard-icon { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.25); color: #a78bfa; }
.dirB .mcpcard[data-accent="amber"]   .mcpcard-icon { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: #fbbf24; }
.dirB .mcpcard[data-accent="emerald"] .mcpcard-icon { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.25); color: #34d399; }
.dirB .mcpcard-name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 0; color: var(--color-foreground); }
.dirB .mcpcard-tag {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  display: block;
  margin-top: 2px;
}
.dirB .mcpcard-blurb {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-muted-foreground);
  margin: 16px 0 14px;
}
.dirB .mcpcard-ns {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #67e8f9;
  letter-spacing: 0.04em;
}
.dirB .mcpcard-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-separator);
}
.dirB .mcpcard-tools {
  display: flex; gap: 4px; flex-wrap: wrap;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  color: var(--color-muted-foreground);
}
.dirB .mcpcard-tools b {
  color: var(--color-foreground);
  font-weight: 500;
  padding: 2px 6px;
  background: var(--color-overlay-light);
  border-radius: 4px;
}
.dirB .mcpcard-status {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.dirB .mcpcard-status .d { width: 6px; height: 6px; border-radius: 9999px; }

/* Featured Pertel card body */
.dirB .pertel-feature {
  padding-right: 6px;
}
.dirB .pertel-feature-side {
  background: var(--color-overlay-subtle);
  border-left: 1px solid var(--color-border);
  padding: 22px;
  margin: -22px -22px -18px 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--color-foreground);
  line-height: 1.75;
}
.dirB .pertel-feature-side .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #06b6d4;
  display: block;
  margin-bottom: 8px;
}
.dirB .pertel-feature-side .mline {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  color: var(--color-muted-foreground);
}
.dirB .pertel-feature-side .mline b {
  color: var(--color-foreground); font-weight: 500;
}
.dirB .pertel-feature-side .mline span:first-child { color: #06b6d4; }

/* Install (B) — segmented + JSON */
.dirB .install-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
}
.dirB .install-box {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
}
.dirB .install-seg {
  display: flex;
  gap: 4px;
  padding: 12px;
  border-bottom: 1px solid var(--color-separator);
  background: var(--color-overlay-subtle);
}
.dirB .install-seg button {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-muted-foreground);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 160ms ease;
}
.dirB .install-seg button[data-active="true"] {
  color: var(--color-foreground);
  background: var(--color-overlay-light);
  border-color: var(--color-separator-light);
}
.dirB .install-box pre {
  margin: 0;
  padding: 22px 24px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-foreground);
  overflow-x: auto;
  min-height: 240px;
}
.dirB .install-box pre .key { color: #67e8f9; }
.dirB .install-box pre .str { color: var(--color-success); }
.dirB .install-box pre .com { color: var(--color-muted-foreground); }
.dirB .install-box pre .pun { color: var(--color-muted-foreground); }

.dirB .invoke {
  padding: 22px 24px;
}
.dirB .invoke h4 {
  margin: 0 0 14px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #06b6d4;
}
.dirB .invoke-line {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  margin-bottom: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.85;
}
.dirB .invoke-who {
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  padding-top: 5px;
}
.dirB .invoke-who[data-who="you"]     { color: var(--color-muted-foreground); }
.dirB .invoke-who[data-who="pertel"]  { color: #06b6d4; }
.dirB .invoke-who[data-who="schedii"] { color: #22d3ee; }
.dirB .invoke-who[data-who="filter"]  { color: #fbbf24; }
.dirB .invoke-who[data-who="geniie"]  { color: #a78bfa; }
.dirB .invoke-text { color: var(--color-foreground); }
.dirB .invoke-text .at { color: #06b6d4; }
.dirB .invoke-text .ev { color: var(--color-muted-foreground); }

/* Pillar/grid in B */
.dirB .pillars-b {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.dirB .pillar-b {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 180ms ease, box-shadow 220ms ease;
}
.dirB .pillar-b:hover {
  border-color: rgba(6,182,212,0.35);
  box-shadow: 0 0 0 1px rgba(6,182,212,0.15), 0 0 24px rgba(6,182,212,0.10);
}
.dirB .pillar-b .ico {
  width: 32px; height: 32px;
  color: #06b6d4;
}
.dirB .pillar-b h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}
.dirB .pillar-b p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-muted-foreground);
}

/* Architecture (B) */
.dirB .arch-b {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.dirB .arch-col h4 {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #06b6d4;
  margin: 0 0 14px;
}
.dirB .arch-col ul {
  margin: 0; padding: 0; list-style: none;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  line-height: 2;
  color: var(--color-muted-foreground);
}
.dirB .arch-col ul li::before { content: '— '; color: #06b6d4; margin-right: 6px; }
.dirB .arch-col ul li.no::before { content: '✕ '; color: var(--color-destructive); }

/* Footer (B) */
.dirB .foot {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--color-separator);
  display: flex;
  gap: 24px;
  align-items: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}
.dirB .foot .right { margin-left: auto; }
.dirB .foot b { color: var(--color-foreground); }

/* Compact mode for B */
.compact .dirB .hero-wrap { padding: 48px 0 36px; }
.compact .dirB .hero-title { font-size: clamp(40px, 4.4vw, 64px); }
.compact .dirB .sect { margin-top: 40px; }
.compact .dirB .mcpcard { padding: 16px; }
.compact .dirB .pillar-b { padding: 16px; }
.compact .dirB .install-box pre { padding: 16px 18px; font-size: 12px; }

/* ─── @scp vs @sch comparison (centerpiece) ─────────────── */
.vs {
  margin-top: 64px;
}
.vs-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* Ambient cyan ring around the card */
.vs-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  pointer-events: none;
  background:
    radial-gradient(800px 240px at 0% 0%, rgba(6,182,212,0.10), transparent 50%),
    radial-gradient(800px 240px at 100% 100%, rgba(34,211,238,0.06), transparent 50%);
  mix-blend-mode: screen;
  z-index: 0;
}
.vs-head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  padding: 36px 32px 28px;
  border-bottom: 1px solid var(--color-separator);
  z-index: 1;
}
.vs-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vs-side.vs-right { text-align: right; align-items: flex-end; }
.vs-side .glyph {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  display: flex; align-items: center; justify-content: center;
  color: #06b6d4;
  margin-bottom: 10px;
}
.vs-side .ns {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 28px;
  font-weight: 600;
  color: #06b6d4;
  letter-spacing: -0.01em;
  line-height: 1;
}
.vs-side .ns-name {
  font-size: 16px;
  color: var(--color-foreground);
  font-weight: 500;
  margin-top: 4px;
}
.vs-side .ns-sub {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted-foreground);
  margin-top: 4px;
}

/* The seam between sides */
.vs-seam-head {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.vs-seam-head .vs-axis {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 9999px;
  border: 1px solid rgba(6,182,212,0.4);
  background: var(--color-background);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #06b6d4;
  box-shadow: 0 0 0 6px var(--color-background), 0 0 20px rgba(6,182,212,0.25);
  z-index: 2;
}
.vs-seam-head .vs-axis::before {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 9999px;
  background: #06b6d4;
  box-shadow: 0 0 12px rgba(6,182,212,0.8);
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  animation: vs-pulse 2.4s ease-in-out infinite;
}
@keyframes vs-pulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.25); }
}

/* Comparison rows */
.vs-rows {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  z-index: 1;
}
.vs-row {
  display: contents;
}
.vs-cell {
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-separator);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-foreground);
}
.vs-row:last-child .vs-cell { border-bottom: 0; }
.vs-cell-left {
  text-align: right;
}
.vs-cell-right {
  text-align: left;
}
.vs-cell-axis {
  position: relative;
  padding: 18px 12px;
  border-bottom: 1px solid var(--color-separator);
  border-left:  1px solid var(--color-separator);
  border-right: 1px solid var(--color-separator);
  text-align: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted-foreground);
  background:
    linear-gradient(90deg,
      rgba(6,182,212,0)   0%,
      rgba(6,182,212,0.06) 50%,
      rgba(6,182,212,0)   100%);
}
.vs-cell-axis::after {
  /* tick where each row meets the seam */
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 9999px;
  background: rgba(6,182,212,0.45);
  box-shadow: 0 0 6px rgba(6,182,212,0.45);
}
.vs-row:last-child .vs-cell-axis::after { display: none; }

/* Hover row → seam tick brightens */
.vs-row:hover .vs-cell {
  background: var(--color-primary-5);
  color: var(--color-foreground);
}
.vs-row:hover .vs-cell-axis::after {
  background: #06b6d4;
  box-shadow: 0 0 10px rgba(6,182,212,0.9);
}

/* Code-like values pop */
.vs-cell .mono {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  color: #67e8f9;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.vs-cell .muted {
  color: var(--color-muted-foreground);
  font-size: 13px;
}
.vs-cell em {
  font-style: italic;
  color: #06b6d4;
}

/* Seam pulse — travels vertically through the axis column */
.vs-seam-flow {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(6,182,212,0.0) 5%,
    rgba(6,182,212,0.55) 50%,
    rgba(6,182,212,0.0) 95%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.vs-seam-flow .vs-dot {
  position: absolute;
  left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 9999px;
  background: #06b6d4;
  box-shadow: 0 0 12px rgba(6,182,212,0.9);
  animation: vs-flow 4s cubic-bezier(0.4,0,0.6,1) infinite;
}
.vs-seam-flow .vs-dot:nth-child(2) { animation-delay: 1.3s; opacity: 0.7; }
.vs-seam-flow .vs-dot:nth-child(3) { animation-delay: 2.6s; opacity: 0.5; }
@keyframes vs-flow {
  0%   { top: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-seam-head .vs-axis::before,
  .vs-seam-flow .vs-dot { animation: none; }
}

/* Footer below comparison */
.vs-foot {
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  background: var(--color-overlay-subtle);
  border-top: 1px solid var(--color-separator);
}
.vs-foot b { color: var(--color-foreground); }
.vs-foot .right { margin-left: auto; }

/* Compact mode tweaks */
.compact .vs-head { padding: 24px 22px 18px; }
.compact .vs-cell { padding: 12px 18px; font-size: 13px; }
.compact .vs-side .ns { font-size: 22px; }
.compact .vs-side .glyph { width: 44px; height: 44px; }

/* Hero cursor + live ping (attractive) */
.live-cursor::after {
  content: '';
  display: inline-block;
  width: 7px; height: 12px;
  background: #06b6d4;
  margin-left: 4px;
  vertical-align: -1px;
  animation: blink-cursor 1s step-end infinite;
  box-shadow: 0 0 8px rgba(6,182,212,0.7);
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ─── @scpg sub-layer note (under the rail) ──────────────── */
.rail-sublayer {
  position: relative;
  margin: 28px -16px -8px;
  padding: 18px 22px;
  background: linear-gradient(180deg,
    var(--color-overlay-subtle) 0%,
    rgba(139, 92, 246, 0.04) 100%);
  border: 1px dashed var(--color-separator-light);
  border-radius: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
}
.rail-sublayer-glyph {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px dashed rgba(167, 139, 250, 0.5);
  background: rgba(139, 92, 246, 0.08);
  color: #a78bfa;
  display: flex; align-items: center; justify-content: center;
}
.rail-sublayer-body {
  display: flex; flex-direction: column; gap: 4px;
}
.rail-sublayer-body .row {
  display: flex; align-items: baseline; gap: 10px;
}
.rail-sublayer-body .ns {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 15px;
  font-weight: 600;
  color: #a78bfa;
}
.rail-sublayer-body .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-foreground);
}
.rail-sublayer-body .tag {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}
.rail-sublayer-body .desc {
  font-size: 12.5px;
  color: var(--color-muted-foreground);
  line-height: 1.5;
}
.rail-sublayer-vias {
  display: flex; gap: 6px; align-items: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}
.rail-sublayer-vias .via {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  color: #67e8f9;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ─── @scpf modes card ───────────────────────────────────── */
.modes {
  margin-top: 16px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.modes-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--color-separator);
  background: linear-gradient(90deg,
    rgba(245, 158, 11, 0.08) 0%,
    transparent 60%);
}
.modes-head .glyph {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  display: inline-flex; align-items: center; justify-content: center;
}
.modes-head .ns {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 22px;
  font-weight: 600;
  color: #fbbf24;
}
.modes-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
}
.modes-head .sub {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}
.modes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.modes-cell {
  padding: 22px 24px;
  border-right: 1px solid var(--color-separator);
  display: flex; flex-direction: column; gap: 8px;
  transition: background 220ms ease;
}
.modes-cell:last-child { border-right: 0; }
.modes-cell:hover { background: rgba(245, 158, 11, 0.05); }
.modes-cell .cmd {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: #fbbf24;
  letter-spacing: -0.005em;
}
.modes-cell .nm {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted-foreground);
}
.modes-cell .desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-foreground);
}
.modes-foot {
  padding: 14px 28px;
  border-top: 1px solid var(--color-separator);
  background: var(--color-overlay-subtle);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  display: flex; gap: 18px; align-items: center;
}
.modes-foot b { color: var(--color-foreground); }
.modes-foot .right { margin-left: auto; color: #fbbf24; }

/* Direction title strip (DCArtboard label backup) */
.dir-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted-foreground);
  border-bottom: 1px solid var(--color-separator-light);
}
.dir-strip b { color: #06b6d4; }


/* ─── Hero (install-first) ─────────────────────────────────── */
.hero-v3 {
  position: relative;
  padding: 56px 0 64px;
}
.hero-v3 .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #67e8f9;
}
.hero-v3 .eyebrow .dot {
  width: 7px; height: 7px; border-radius: 9999px;
  background: #06b6d4;
  box-shadow: 0 0 8px rgba(6,182,212,0.8);
  animation: vs-pulse 2.4s ease-in-out infinite;
}
.hero-v3 h1 {
  margin: 22px 0 0;
  font-size: clamp(56px, 6.5vw, 104px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--color-hero-text);
  text-shadow: var(--shadow-hero);
  max-width: 18ch;
  text-wrap: balance;
}
.hero-v3 h1 em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 38px rgba(34,211,238,0.45);
}
.hero-v3 .sub {
  margin: 24px 0 0;
  max-width: 60ch;
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--color-muted-foreground);
  line-height: 1.55;
}
.hero-v3 .sub b { color: var(--color-foreground); font-weight: 600; }

/* The hero install block — the centerpiece */
.hero-v3-install {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.install-mega {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
}
.install-mega::after {
  /* subtle ambient cyan ring */
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  pointer-events: none;
  background:
    radial-gradient(600px 200px at 100% 0%, rgba(6,182,212,0.10), transparent 50%),
    radial-gradient(600px 240px at 0% 100%, rgba(34,211,238,0.05), transparent 60%);
  mix-blend-mode: screen;
}
.install-mega-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-separator);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--color-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: var(--color-overlay-subtle);
  position: relative;
  z-index: 1;
}
.install-mega-head .lights { display: inline-flex; gap: 6px; }
.install-mega-head .lights span {
  width: 9px; height: 9px; border-radius: 9999px;
  background: var(--color-overlay-light);
  border: 1px solid var(--color-separator);
}
.install-mega-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px;
  border-bottom: 1px solid var(--color-separator);
  background: var(--color-overlay-subtle);
  position: relative;
  z-index: 1;
}
.install-mega-tabs button {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0;
  background: transparent;
  color: var(--color-muted-foreground);
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.install-mega-tabs button:hover { color: var(--color-foreground); }
.install-mega-tabs button[data-active="true"] {
  color: #06b6d4;
  border-bottom-color: #06b6d4;
}
.install-mega pre {
  margin: 0;
  padding: 24px 26px;
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-foreground);
  overflow-x: auto;
  min-height: 260px;
  position: relative;
  z-index: 1;
}
.install-mega pre .key { color: #67e8f9; }
.install-mega pre .str { color: var(--color-success); }
.install-mega pre .com { color: var(--color-muted-foreground); }
.install-mega pre .pun { color: var(--color-muted-foreground); }
.install-mega-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-top: 1px solid var(--color-separator);
  background: var(--color-overlay-subtle);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  position: relative;
  z-index: 1;
}
.install-mega-foot b { color: var(--color-foreground); }
.install-mega-foot .copy {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, #06b6d4, #0891b2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(6,182,212,0.25), 0 4px 14px rgba(6,182,212,0.25);
  transition: transform 160ms ease;
}
.install-mega-foot .copy:hover { transform: scale(1.04); }
.install-mega-foot .copy:active { transform: scale(0.97); }

/* Hero side panel — quick facts */
.hero-side {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-card);
}
.hero-side h3 {
  margin: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #06b6d4;
}
.hero-side dl {
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 12px;
  column-gap: 14px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  align-items: baseline;
}
.hero-side dt {
  color: var(--color-muted-foreground);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.hero-side dd { margin: 0; color: var(--color-foreground); }
.hero-side dd .cy { color: #06b6d4; }
.hero-side dd .ok { color: var(--color-success); }
.hero-side .chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.hero-side .chip-ns {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  color: #67e8f9;
}
.hero-side hr {
  border: 0;
  height: 1px;
  background: var(--color-separator);
  margin: 0;
}

/* ─── The Family — joined rail ─────────────────────────────── */
.rail {
  margin-top: 16px;
  position: relative;
  padding: 56px 36px 32px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
}
.rail::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 160px at 50% 0%, rgba(6,182,212,0.12), transparent 65%);
}
.rail-stamp {
  position: absolute;
  top: 16px;
  left: 22px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted-foreground);
  display: flex; align-items: center; gap: 8px;
}
.rail-stamp b { color: #06b6d4; }
.rail-stamp .ver {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid var(--color-primary-20);
  background: var(--color-primary-10);
  color: #67e8f9;
  letter-spacing: 0.1em;
}
.rail-tagline {
  position: absolute;
  top: 16px;
  right: 22px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}
.rail-tagline b { color: var(--color-foreground); }

/* the wire */
.rail-wire {
  position: relative;
  height: 2px;
  margin: 24px 36px 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(6,182,212,0.18) 8%,
    rgba(6,182,212,0.6)  50%,
    rgba(6,182,212,0.18) 92%,
    transparent 100%);
  border-radius: 9999px;
}
.rail-wire::before {
  /* a moving pulse along the wire */
  content: '';
  position: absolute;
  top: -3px; bottom: -3px;
  width: 80px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,0.95), transparent);
  filter: blur(2px);
  animation: rail-pulse 4.5s linear infinite;
}
@keyframes rail-pulse {
  0%   { left: -10%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-wire::before { animation: none; }
}

.rail-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  margin-top: -22px; /* nodes overlap the wire */
}
.rail-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: default;
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1);
}
.rail-node:hover { transform: translateY(-4px); }

.rail-token {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 9999px;
  background: var(--color-background);
  border: 2px solid #06b6d4;
  display: flex; align-items: center; justify-content: center;
  color: #06b6d4;
  box-shadow:
    0 0 0 4px var(--color-card),
    0 0 0 5px var(--color-border),
    0 0 24px rgba(6,182,212,0.25);
  transition: box-shadow 200ms ease, color 200ms ease;
}
.rail-node[data-status="planned"] .rail-token {
  border-color: var(--color-muted-foreground);
  color: var(--color-muted-foreground);
  box-shadow:
    0 0 0 4px var(--color-card),
    0 0 0 5px var(--color-border);
}
.rail-node[data-accent="violet"]  .rail-token { border-color: #a78bfa; color: #a78bfa; }
.rail-node[data-accent="amber"]   .rail-token { border-color: #fbbf24; color: #fbbf24; }
.rail-node[data-accent="emerald"] .rail-token { border-color: #34d399; color: #34d399; }

.rail-node:hover .rail-token {
  box-shadow:
    0 0 0 4px var(--color-card),
    0 0 0 5px var(--color-border),
    0 0 32px rgba(6,182,212,0.5);
}

.rail-ns {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  font-weight: 600;
  color: #06b6d4;
  letter-spacing: -0.005em;
}
.rail-node[data-status="planned"] .rail-ns { color: var(--color-muted-foreground); }
.rail-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-foreground);
  letter-spacing: -0.01em;
  margin-top: -6px;
}
.rail-tag {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  margin-top: -2px;
}
.rail-status {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px;
}
.rail-status .d { width: 5px; height: 5px; border-radius: 9999px; }

.rail-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--color-separator);
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}
.rail-foot b { color: var(--color-foreground); }
.rail-foot .right { margin-left: auto; }

/* ─── Scrolling marquee — sly loud ─────────────────────── */
.marquee {
  margin-top: 24px;
  position: relative;
  overflow: hidden;
  height: 56px;
  border-top: 1px solid var(--color-separator);
  border-bottom: 1px solid var(--color-separator);
  background: linear-gradient(180deg, var(--color-overlay-subtle), transparent);
}
.marquee-track {
  display: flex;
  gap: 32px;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: marquee-scroll 28s linear infinite;
  padding-left: 32px;
  width: max-content;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}
.marquee-item {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-foreground);
}
.marquee-item .cy { color: #06b6d4; }
.marquee-sep {
  width: 6px; height: 6px; border-radius: 9999px;
  background: #06b6d4;
  box-shadow: 0 0 8px rgba(6,182,212,0.7);
  flex: 0 0 auto;
}

/* ─── Loud pillars — 2x2 visual grid ─────────────────────── */
.loud {
  margin-top: 56px;
}
.loud-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.loud-h h2 {
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
}
.loud-h h2 em { font-style: italic; color: #06b6d4; }
.loud-h .right {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}

.loud-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.loud-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 28px 28px 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 180ms cubic-bezier(0.4,0,0.2,1),
              border-color 180ms ease,
              box-shadow 220ms ease;
  min-height: 280px;
}
.loud-card::before {
  /* accent stripe top */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(6,182,212,0)   0%,
    rgba(6,182,212,0.7) 50%,
    rgba(6,182,212,0)   100%);
}
.loud-card::after {
  /* corner glow */
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 220px; height: 220px;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(6,182,212,0.12), transparent 70%);
  pointer-events: none;
}
.loud-card[data-accent="amber"]::before {
  background: linear-gradient(90deg, rgba(245,158,11,0) 0%, rgba(245,158,11,0.7) 50%, rgba(245,158,11,0) 100%);
}
.loud-card[data-accent="amber"]::after {
  background: radial-gradient(closest-side, rgba(245,158,11,0.12), transparent 70%);
}
.loud-card:hover {
  transform: translateY(-2px);
  border-color: rgba(6,182,212,0.35);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18),
              0 0 0 1px rgba(6,182,212,0.15),
              0 0 28px rgba(6,182,212,0.14);
}
.loud-card[data-accent="amber"]:hover {
  border-color: rgba(245,158,11,0.4);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18),
              0 0 0 1px rgba(245,158,11,0.18),
              0 0 28px rgba(245,158,11,0.14);
}

.loud-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  z-index: 1;
}
.loud-card-num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #06b6d4;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  flex: 0 0 auto;
}
.loud-card[data-accent="amber"] .loud-card-num {
  color: #fbbf24;
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.30);
}
.loud-card-icon {
  margin-left: auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  display: flex; align-items: center; justify-content: center;
  color: #06b6d4;
  flex: 0 0 auto;
}
.loud-card[data-accent="amber"] .loud-card-icon {
  color: #fbbf24;
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.30);
}
.loud-card-body { z-index: 1; }
.loud-card-body h3 {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--color-foreground);
}
.loud-card-body h3 em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 30px rgba(34,211,238,0.35);
}
.loud-card[data-accent="amber"] .loud-card-body h3 em {
  color: #fbbf24;
  text-shadow: 0 0 30px rgba(251, 191, 36, 0.35);
}
.loud-card-body p {
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--color-muted-foreground);
  line-height: 1.55;
}
.loud-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-separator);
  z-index: 1;
}
.loud-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.loud-card-meta b {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--color-overlay-light);
  color: var(--color-foreground);
  border: 1px solid var(--color-separator-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.loud-card-ns {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #06b6d4;
  letter-spacing: -0.005em;
}
.loud-card[data-accent="amber"] .loud-card-ns { color: #fbbf24; }

.compact .loud-card { padding: 18px 18px 14px; min-height: 220px; }
.compact .loud-card-body h3 { font-size: clamp(22px, 2.2vw, 30px); }

/* ─── Comparison feature chips + per-row icons ─────────── */
.vs-side .vs-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.vs-side.vs-right .vs-feats { justify-content: flex-end; }
.vs-side .vs-feat {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  color: #67e8f9;
}

.vs-cell-axis .vs-axis-icon {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  align-items: center; justify-content: center;
  color: #06b6d4;
  margin-bottom: 6px;
}

/* Compact mode adjustments */
.compact .hero-v3 { padding: 36px 0 44px; }
.compact .hero-v3 h1 { font-size: clamp(44px, 5.6vw, 80px); }
.compact .install-mega pre { padding: 18px 20px; font-size: 13px; min-height: 200px; }
.compact .rail { padding: 48px 24px 24px; }
.compact .rail-token { width: 52px; height: 52px; }

/* ═══════════════════════════════════════════════════════════════
 * The Manifest — unified long vertical chart
 * One spine runs down the page; sections branch off as charts
 * ═══════════════════════════════════════════════════════════════ */

.manifest {
  position: relative;
  padding: 8px 0 16px 64px;
}
.manifest-spine {
  position: absolute;
  left: 21px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(6,182,212,0.25) 4%,
    rgba(6,182,212,0.65) 50%,
    rgba(6,182,212,0.25) 96%,
    transparent 100%);
  pointer-events: none;
}
.manifest-spine::before, .manifest-spine::after {
  content: '';
  position: absolute;
  left: -2.5px;
  width: 6px;
  height: 70px;
  border-radius: 9999px;
  background: linear-gradient(180deg, transparent, rgba(6,182,212,0.95), transparent);
  filter: blur(2px);
  pointer-events: none;
  opacity: 0;
}
.manifest-spine::before { animation: spine-flow 10s linear infinite; }
.manifest-spine::after  { animation: spine-flow 10s linear 5s infinite; }
@keyframes spine-flow {
  0%   { top: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .manifest-spine::before, .manifest-spine::after { animation: none; opacity: 0; }
}

.manifest-section {
  position: relative;
  padding: 40px 0 0;
}
.manifest-section:first-child { padding-top: 8px; }

.manifest-node {
  position: absolute;
  left: -56px;
  top: 44px;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  background: var(--color-background);
  border: 2px solid rgba(6,182,212,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #06b6d4;
  box-shadow:
    0 0 0 6px var(--color-background),
    0 0 16px rgba(6,182,212,0.30);
  z-index: 2;
}
.manifest-section:first-child .manifest-node { top: 0; }

.manifest-section-h {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
  padding-left: 4px;
}
.manifest-section-h::before {
  content: '';
  position: absolute;
  left: -36px;
  top: 22px;
  width: 32px;
  height: 1px;
  background: rgba(6,182,212,0.4);
}
.manifest-section-h h2 {
  margin: 0;
  font-size: clamp(28px, 2.8vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-foreground);
}
.manifest-section-h h2 em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 24px rgba(34,211,238,0.3);
}
.manifest-section-h .sub {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: #06b6d4;
  opacity: 0.85;
  text-shadow: 0 0 12px rgba(6,182,212,0.3);
}
.manifest-section-h .right {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}

/* ─── Pertel-style lockup pattern — reusable, page-wide ────── */
.lockup-x {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.lockup-x .lx-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 1px;
}
.lockup-x .lx-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-foreground);
  line-height: 1;
  letter-spacing: -0.01em;
}
.lockup-x .lx-tagline {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 11.5px;
  color: #06b6d4;
  opacity: 0.85;
  text-shadow: 0 0 10px rgba(6,182,212,0.35);
  letter-spacing: 0.01em;
}
.lockup-x .lx-by {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--color-muted-foreground);
  font-size: 11px;
  margin-left: 2px;
}
.lockup-x .lx-host {
  font-size: 11.5px;
  color: var(--color-muted-foreground);
  font-weight: 500;
}

/* ─── Chart — unified row container used by every section ─── */
.chart {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.chart-row {
  display: grid;
  align-items: stretch;
  border-top: 1px solid var(--color-separator);
  transition: background 200ms ease;
}
.chart-row:first-child { border-top: 0; }
.chart-row:hover { background: var(--color-primary-5); }
.chart-row > div {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chart-row .chart-axis {
  border-right: 1px solid var(--color-separator);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  font-weight: 600;
  color: #06b6d4;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 4px !important;
  background: var(--color-overlay-subtle);
}
.chart-row .chart-axis small {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  font-weight: 400;
}

/* Family chart variant */
.chart-family .chart-row { grid-template-columns: 140px 60px 1fr 200px 110px; }
.chart-family .chart-glyph {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  color: #06b6d4;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.chart-family .chart-row[data-accent="amber"]   .chart-glyph { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.3); color: #fbbf24; }
.chart-family .chart-row[data-accent="emerald"] .chart-glyph { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.3); color: #34d399; }
.chart-family .chart-row[data-accent="amber"]   .chart-axis { color: #fbbf24; }
.chart-family .chart-row[data-accent="emerald"] .chart-axis { color: #34d399; }
.chart-family .chart-row[data-accent="amber"]:hover   { background: rgba(245,158,11,0.05); }
.chart-family .chart-row[data-accent="emerald"]:hover { background: rgba(16,185,129,0.05); }
.chart-family .chart-name {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 4px !important;
}
.chart-family .chart-name .nm-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.chart-family .chart-name .nm {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-foreground);
  letter-spacing: -0.01em;
}
.chart-family .chart-name .tg {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: #06b6d4;
  opacity: 0.85;
  text-shadow: 0 0 10px rgba(6,182,212,0.3);
}
.chart-family .chart-row[data-accent="amber"]   .chart-name .tg { color: #fbbf24; text-shadow: 0 0 10px rgba(251,191,36,0.3); }
.chart-family .chart-row[data-accent="emerald"] .chart-name .tg { color: #34d399; text-shadow: 0 0 10px rgba(52,211,153,0.3); }
.chart-family .chart-name .by {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--color-muted-foreground);
}
.chart-family .chart-name .br {
  font-size: 13.5px;
  color: var(--color-muted-foreground);
  margin-top: 2px;
  line-height: 1.5;
}
.chart-family .chart-tools {
  flex-wrap: wrap;
  gap: 4px !important;
  align-content: center;
}
.chart-family .chart-tools b {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--color-overlay-light);
  color: var(--color-foreground);
  border: 1px solid var(--color-separator-light);
}
.chart-family .chart-status {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  justify-content: flex-end;
}
.chart-family .chart-status .d {
  width: 6px; height: 6px; border-radius: 9999px;
}

/* Modes chart variant */
.chart-modes .chart-row { grid-template-columns: 170px 110px 1fr 220px; }
.chart-modes .chart-axis { color: #fbbf24; }
.chart-modes .chart-row:hover { background: rgba(245,158,11,0.06); }
.chart-modes .chart-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-foreground);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: ui-monospace, Menlo, monospace;
}
.chart-modes .chart-desc {
  font-size: 13.5px;
  color: var(--color-foreground);
  line-height: 1.55;
}
.chart-modes .chart-hint {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #fbbf24;
  opacity: 0.85;
  text-shadow: 0 0 10px rgba(251,191,36,0.3);
  justify-content: flex-end;
  text-align: right;
  border-left: 1px solid var(--color-separator);
}

/* Pillars chart variant */
.chart-pillars .chart-row { grid-template-columns: 64px 64px 1fr 220px; }
.chart-pillars .chart-axis {
  font-size: 12px;
  text-align: center;
  align-items: center !important;
  justify-content: center;
  color: #06b6d4;
}
.chart-pillars .chart-row[data-accent="amber"] .chart-axis { color: #fbbf24; }
.chart-pillars .chart-glyph {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  color: #06b6d4;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.chart-pillars .chart-row[data-accent="amber"] .chart-glyph {
  color: #fbbf24; background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.3);
}
.chart-pillars .chart-row[data-accent="amber"]:hover { background: rgba(245,158,11,0.05); }
.chart-pillars .chart-headline {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 8px !important;
  padding-right: 8px;
}
.chart-pillars .chart-headline h3 {
  margin: 0;
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--color-foreground);
}
.chart-pillars .chart-headline h3 em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 24px rgba(34,211,238,0.3);
}
.chart-pillars .chart-row[data-accent="amber"] .chart-headline h3 em {
  color: #fbbf24;
  text-shadow: 0 0 24px rgba(251,191,36,0.3);
}
.chart-pillars .chart-headline p {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-muted-foreground);
  line-height: 1.55;
}
.chart-pillars .chart-meta {
  flex-direction: column;
  align-items: flex-end !important;
  gap: 8px !important;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted-foreground);
  text-align: right;
}
.chart-pillars .chart-meta .ns {
  color: #06b6d4;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
}
.chart-pillars .chart-row[data-accent="amber"] .chart-meta .ns { color: #fbbf24; }
.chart-pillars .chart-meta .tags {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;
}
.chart-pillars .chart-meta .tags b {
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--color-overlay-light);
  border: 1px solid var(--color-separator-light);
  color: var(--color-foreground);
  letter-spacing: 0.12em;
}

/* Chart footer (shared) */
.chart-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--color-separator);
  background: var(--color-overlay-subtle);
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  flex-wrap: wrap;
}
.chart-foot b { color: var(--color-foreground); }
.chart-foot .right { margin-left: auto; }
.chart-foot .accent { color: #06b6d4; }

/* Install panel embedded in manifest section */
.manifest .hero-v3-install { margin-top: 0; }

/* Hero copy block above the manifest — tightened */
.dirB .hero-top {
  padding: 40px 0 28px;
}
.dirB .hero-top .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #67e8f9;
}
.dirB .hero-top .eyebrow .dot {
  width: 7px; height: 7px; border-radius: 9999px;
  background: #06b6d4;
  box-shadow: 0 0 8px rgba(6,182,212,0.8);
  animation: vs-pulse 2.4s ease-in-out infinite;
}
.dirB .hero-top h1 {
  margin: 22px 0 0;
  font-size: clamp(56px, 6.5vw, 104px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--color-hero-text);
  text-shadow: var(--shadow-hero);
  max-width: 22ch;
  text-wrap: balance;
}
.dirB .hero-top h1 em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 38px rgba(34,211,238,0.45);
}
.dirB .hero-top .sub {
  margin: 24px 0 0;
  max-width: 64ch;
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--color-muted-foreground);
  line-height: 1.55;
}
.dirB .hero-top .sub b { color: var(--color-foreground); font-weight: 600; }

/* Compact mode */
.compact .manifest { padding-left: 48px; }
.compact .manifest-node { left: -42px; width: 36px; height: 36px; font-size: 10px; }
.compact .chart-row > div { padding: 12px 14px; }
.compact .chart-family .chart-row { grid-template-columns: 110px 48px 1fr 180px 100px; }
.compact .chart-pillars .chart-headline h3 { font-size: clamp(20px, 2vw, 26px); }
.compact .dirB .hero-top { padding: 28px 0 18px; }
.compact .dirB .hero-top h1 { font-size: clamp(44px, 5.6vw, 80px); }

/* ═══════════════════════════════════════════════════════════════
 * Theory page — long-form essay inside the same manifest chrome
 * ═══════════════════════════════════════════════════════════════ */

.theorem {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}
.theorem-body {
  max-width: 68ch;
}
.theorem-lead {
  margin: 0 0 16px;
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
  line-height: 1.5;
}
.theorem-lead em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 18px rgba(34,211,238,0.3);
}
.theorem-body p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-muted-foreground);
}
.theorem-body p:last-child { margin-bottom: 0; }
.theorem-body p b { color: var(--color-foreground); font-weight: 600; }
.theorem-body code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: #67e8f9;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  padding: 1px 6px;
  border-radius: 5px;
}

/* Side rail pull-quote — small, italic, cyan accent */
.theorem-aside {
  padding: 18px 20px;
  border-left: 1px solid rgba(6,182,212,0.35);
  background: linear-gradient(90deg,
    rgba(6,182,212,0.06) 0%,
    rgba(6,182,212,0.02) 60%,
    transparent 100%);
  border-radius: 0 12px 12px 0;
}
.theorem-aside .lbl {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #06b6d4;
  margin-bottom: 8px;
}
.theorem-aside .rule {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-foreground);
  margin: 0;
}
.theorem-aside .rule b {
  color: #06b6d4;
  font-style: normal;
  font-weight: 600;
}

/* Closing block — the final rule, centered, prominent */
.theory-closing {
  position: relative;
  padding: 48px 32px;
  text-align: center;
  border-top: 1px solid var(--color-separator);
  background:
    radial-gradient(600px 200px at 50% 50%, rgba(6,182,212,0.10), transparent 60%);
}
.theory-closing-lbl {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #06b6d4;
  margin-bottom: 14px;
}
.theory-closing-quote {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
  max-width: 36ch;
  margin: 0 auto;
}
.theory-closing-quote b {
  color: #06b6d4;
  font-style: normal;
  font-weight: 600;
  text-shadow: 0 0 24px rgba(6,182,212,0.35);
}

/* Theory-page-specific tweaks */
.tall-card.theory-card .manifest-section:not(:first-child) {
  padding-top: 32px;
}

@media (max-width: 900px) {
  .theorem { grid-template-columns: 1fr; gap: 24px; }
  .theorem-aside { border-left: 0; border-top: 1px solid rgba(6,182,212,0.35); border-radius: 12px 12px 0 0; }
}

.compact .theorem { gap: 32px; }
.compact .theorem-lead { font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════
 * Intelligence page — Pertel Intelligence · NeuroDivii Reason · MmM
 * ═══════════════════════════════════════════════════════════════ */

.intel-hero { padding: 56px 0 64px; }
.intel-kicker {
  display: inline-block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1d4ed8;
  opacity: 0.7;
  margin-bottom: 14px;
}
.intel-hero h1 {
  margin: 0;
  font-size: clamp(48px, 7vw, 112px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  background-image: linear-gradient(95deg, #5cc8ff 0%, #2563eb 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgba(37,99,235,0.18));
  max-width: 16ch;
}
.intel-hero h2 {
  margin: 18px 0 0;
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #0a1530;
  max-width: 22ch;
}
.intel-hero h2 em {
  font-style: italic;
  background-image: linear-gradient(95deg, #5cc8ff 0%, #2563eb 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.intel-hero .sub {
  margin: 22px 0 0;
  font-size: clamp(15px, 1.1vw, 18px);
  color: #475569;
  max-width: 60ch;
  line-height: 1.6;
}
.intel-hero .ctas {
  margin-top: 28px;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Module cards row */
.intel-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.intel-mod {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 18px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 6px 18px rgba(37,99,235,0.05);
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 240ms ease,
              border-color 200ms ease;
}
.intel-mod::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.7), transparent);
}
.intel-mod:hover {
  transform: translateY(-3px);
  border-color: rgba(37,99,235,0.2);
  box-shadow:
    0 4px 8px rgba(37,99,235,0.08),
    0 14px 36px rgba(37,99,235,0.14);
}
.intel-mod .ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(92,200,255,0.20), rgba(37,99,235,0.08));
  border: 1px solid rgba(37,99,235,0.20);
  color: #1d4ed8;
  display: flex; align-items: center; justify-content: center;
}
.intel-mod h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0a1530;
}
.intel-mod p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #475569;
}

/* MmM Tier Map — horizontal flow with animated promotion dots */
.tier-map {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 22px;
  padding: 36px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 32px rgba(37,99,235,0.06);
  position: relative;
  overflow: hidden;
}
.tier-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
}
.tier {
  position: relative;
  padding: 24px 22px;
  border-radius: 16px;
  border: 1px solid rgba(37,99,235,0.18);
  background: linear-gradient(135deg, rgba(247,250,255,0.6), rgba(255,255,255,0.9));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tier .badge {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #1d4ed8;
}
.tier h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0a1530;
}
.tier p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #475569;
}
.tier .meta {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(15,23,42,0.06);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #475569;
}
.tier[data-tier="HOT"]  { background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(37,99,235,0.04)); border-color: rgba(37,99,235,0.35); }
.tier[data-tier="HOT"]  .badge { color: #1e40af; }
.tier[data-tier="WARM"] { background: linear-gradient(135deg, rgba(92,200,255,0.14), rgba(92,200,255,0.04)); border-color: rgba(37,99,235,0.25); }
.tier[data-tier="WARM"] .badge { color: #2563eb; }
.tier[data-tier="COOL"] { background: linear-gradient(135deg, rgba(125,211,252,0.14), rgba(125,211,252,0.03)); border-color: rgba(37,99,235,0.18); }
.tier[data-tier="COOL"] .badge { color: #0e7490; }
.tier[data-tier="COLD"] { background: linear-gradient(135deg, rgba(186,230,253,0.18), rgba(255,255,255,0.6)); border-color: rgba(15,23,42,0.10); }
.tier[data-tier="COLD"] .badge { color: #475569; }

/* Promotion-flow caption */
.tier-flow {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #475569;
}
.tier-flow .arrow {
  width: 60px;
  height: 1px;
  position: relative;
  background: linear-gradient(90deg, rgba(37,99,235,0.15), rgba(37,99,235,0.6), rgba(37,99,235,0.15));
}
.tier-flow .arrow::after {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 14px;
  height: 7px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, #2563eb, transparent);
  filter: blur(2px);
  animation: tier-flow-pulse 3s linear infinite;
}
@keyframes tier-flow-pulse {
  0%   { left: 0;    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(100% - 14px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tier-flow .arrow::after { animation: none; opacity: 0.5; left: 50%; }
}
.tier-flow .step { font-weight: 700; color: #0a1530; letter-spacing: 0.16em; }

/* Reframe operator chips */
.ops {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.op {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 16px;
  padding: 22px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 6px 18px rgba(37,99,235,0.05);
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 240ms ease,
              border-color 200ms ease;
}
.op:hover {
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.2);
  box-shadow:
    0 4px 8px rgba(37,99,235,0.08),
    0 12px 28px rgba(37,99,235,0.12);
}
.op .tag {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #1d4ed8;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.20);
  margin-bottom: 14px;
}
.op h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0a1530;
}
.op p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
}
.op p:last-child { margin-bottom: 0; }
.op .safety {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.30);
  color: #065f46;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Continuity meter — three angles + recognition-over-novelty callout */
.continuity {
  background: linear-gradient(135deg, #ffffff, #f4f8fc);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 22px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
  box-shadow:
    0 1px 2px rgba(37,99,235,0.04),
    0 12px 36px rgba(37,99,235,0.08);
}
.continuity .lead {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  color: #0a1530;
}
.continuity .lead b {
  font-style: normal;
  background-image: linear-gradient(95deg, #5cc8ff 0%, #2563eb 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.continuity .lead .pri {
  font-family: ui-monospace, Menlo, monospace;
  font-style: normal;
  font-size: 13px;
  color: #475569;
  display: block;
  margin-top: 10px;
  letter-spacing: 0.04em;
}
.angles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.angle {
  padding: 18px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(15,23,42,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.angle .ltr {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  color: #1d4ed8;
}
.angle .nm {
  font-size: 13px;
  font-weight: 600;
  color: #0a1530;
}
.angle .ds {
  font-size: 12px;
  line-height: 1.45;
  color: #475569;
}

/* Stack-table — the 5-layer system */
.stack-table {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 24px rgba(37,99,235,0.06);
}
.stack-row {
  display: grid;
  grid-template-columns: 140px 220px 1fr;
  align-items: center;
  padding: 16px 22px;
  border-top: 1px solid rgba(15,23,42,0.06);
  transition: background 200ms ease;
}
.stack-row:first-child { border-top: 0; }
.stack-row:hover { background: rgba(37,99,235,0.03); }
.stack-row .layer {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #475569;
}
.stack-row .name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0a1530;
}
.stack-row .name em {
  font-style: italic;
  background-image: linear-gradient(95deg, #5cc8ff 0%, #2563eb 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 700;
}
.stack-row .fn {
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
}

@media (max-width: 900px) {
  .intel-modules { grid-template-columns: repeat(2, 1fr); }
  .tier-row { grid-template-columns: repeat(2, 1fr); }
  .ops { grid-template-columns: 1fr; }
  .continuity { grid-template-columns: 1fr; gap: 24px; }
  .stack-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
}
@media (max-width: 600px) {
  .intel-modules { grid-template-columns: 1fr; }
  .tier-row { grid-template-columns: 1fr; }
  .angles { grid-template-columns: 1fr; }
  .tier-flow { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════
 * Why page — in-depth framework explanations · accordion dropdowns
 * ═══════════════════════════════════════════════════════════════ */

.why-section {
  margin-bottom: 16px;
}
.why-section-h {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 24px 0 18px;
  border-bottom: 1px solid var(--color-separator);
  margin-bottom: 12px;
}
.why-section-h h2 {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-foreground);
}
.why-section-h h2 em { font-style: italic; color: #06b6d4; }
.why-section-h .sub {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #06b6d4;
  opacity: 0.85;
}
.why-section-h .right {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}

.acc {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 240ms ease;
}
.acc:hover {
  border-color: rgba(6, 182, 212, 0.30);
}
.acc[data-open="true"] {
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow:
    0 0 0 1px rgba(6,182,212,0.15),
    0 8px 24px rgba(6,182,212,0.12);
}
.acc-head {
  display: grid;
  grid-template-columns: 36px 160px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: var(--color-foreground);
  width: 100%;
  text-align: left;
  font: inherit;
  transition: background 200ms ease;
}
.acc-head:hover { background: var(--color-primary-5); }

.acc-chev {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  display: inline-flex; align-items: center; justify-content: center;
  color: #06b6d4;
  transition: transform 240ms cubic-bezier(0.4,0,0.2,1);
}
.acc[data-open="true"] .acc-chev { transform: rotate(90deg); }

.acc-cmd {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  color: #06b6d4;
  letter-spacing: -0.005em;
}
.acc[data-accent="amber"] .acc-cmd { color: #fbbf24; }
.acc[data-accent="amber"] .acc-chev { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); color: #fbbf24; }
.acc[data-accent="amber"][data-open="true"] {
  border-color: rgba(245,158,11,0.45);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.15), 0 8px 24px rgba(245,158,11,0.12);
}

.acc-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.acc-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}
.acc-tag {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #06b6d4;
  opacity: 0.85;
}
.acc[data-accent="amber"] .acc-tag { color: #fbbf24; }

.acc-status {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.acc-status .d { width: 5px; height: 5px; border-radius: 9999px; }

.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.4,0,0.2,1);
}
.acc[data-open="true"] .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }

.acc-content {
  padding: 6px 22px 22px;
  border-top: 1px solid var(--color-separator);
  margin-top: 6px;
}
.acc-lead {
  margin: 16px 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-foreground);
  font-weight: 500;
}
.acc-lead em { font-style: italic; color: #06b6d4; }
.acc[data-accent="amber"] .acc-lead em { color: #fbbf24; }
.acc-content p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-muted-foreground);
}
.acc-content p:last-child { margin-bottom: 0; }
.acc-content p b { color: var(--color-foreground); font-weight: 600; }
.acc-content code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  color: #67e8f9;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  padding: 1px 6px;
  border-radius: 5px;
}
.acc[data-accent="amber"] .acc-content code {
  color: #fbbf24;
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.30);
}

/* Two-column detail grid inside accordion (for spec-style rows) */
.acc-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  row-gap: 10px;
  column-gap: 18px;
  font-size: 13.5px;
  margin: 4px 0 4px;
}
.acc-dl dt {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  padding-top: 1px;
}
.acc-dl dd {
  margin: 0;
  color: var(--color-foreground);
  line-height: 1.5;
}
.acc-dl dd code {
  font-size: 12px;
}

/* Mobile collapse */
@media (max-width: 768px) {
  .acc-head {
    grid-template-columns: 28px 1fr auto;
    padding: 14px 16px;
    gap: 10px;
  }
  .acc-head .acc-cmd { display: none; }
  .acc-content { padding: 6px 16px 18px; }
  .acc-dl { grid-template-columns: 110px 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
 * Pertel landing — cinematic brand page
 * ═══════════════════════════════════════════════════════════════ */

/* Light-mode background tuning specific to Pertel (logo lives best on white) */
[data-theme="light"] {
  background: #f4f8fc !important;
}
[data-theme="light"] .orb-bg::before {
  background: #06b6d4; opacity: 0.18;
}
[data-theme="light"] .orb-bg::after {
  background: #2563eb; opacity: 0.10;
}
[data-theme="light"] .orb-bg > span {
  background: #06b6d4; opacity: 0.12;
}

.pertel-hero {
  position: relative;
  padding: 60px 0 80px;
  text-align: center;
  overflow: hidden;
}
.pertel-hero-logo {
  display: block;
  margin: 0 auto 40px;
  width: clamp(280px, 36vw, 540px);
  height: auto;
  filter: drop-shadow(0 12px 40px rgba(37, 99, 235, 0.18));
}
.pertel-hero-glyph {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.pertel-hero-glyph svg {
  width: clamp(280px, 32vw, 460px);
  height: auto;
  filter: drop-shadow(0 0 80px rgba(6,182,212,0.45));
}
.pertel-hero-glyph .heart {
  transform-origin: center;
  animation: heart-pulse 2.6s ease-in-out infinite;
}
@keyframes heart-pulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 6px rgba(6,182,212,0.6)); }
  50%      { transform: scale(1.18); filter: drop-shadow(0 0 18px rgba(6,182,212,0.9)); }
}
.pertel-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #67e8f9;
  margin-bottom: 22px;
}
.pertel-hero-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: #06b6d4;
  box-shadow: 0 0 8px rgba(6,182,212,0.8);
}
.pertel-hero h1 {
  margin: 0 auto;
  font-size: clamp(56px, 7vw, 124px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--color-hero-text);
  text-shadow: var(--shadow-hero);
  max-width: 14ch;
  text-wrap: balance;
}
.pertel-hero h1 em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 50px rgba(34,211,238,0.55);
}
.pertel-hero .sub {
  max-width: 56ch;
  margin: 28px auto 0;
  font-size: clamp(17px, 1.4vw, 22px);
  color: var(--color-muted-foreground);
  line-height: 1.55;
}
.pertel-hero .sub b { color: var(--color-foreground); font-weight: 600; }
.pertel-hero .ctas {
  margin-top: 38px;
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Ambient orbital ring behind hero */
.pertel-hero::before {
  content: '';
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(400px, 50vw, 720px);
  height: clamp(400px, 50vw, 720px);
  border-radius: 9999px;
  background: radial-gradient(closest-side,
    rgba(6,182,212,0.10) 0%,
    rgba(6,182,212,0.04) 50%,
    transparent 75%);
  pointer-events: none;
  z-index: -1;
}

/* ─── Section header — page-section style (not manifest) ──────── */
.psec {
  position: relative;
  padding: 64px 0;
  border-top: 1px solid var(--color-separator);
}
.psec-h {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 32px;
}
.psec-h h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-foreground);
}
.psec-h h2 em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 24px rgba(34,211,238,0.3);
}
.psec-h .sub {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 16px;
  color: #06b6d4;
  opacity: 0.85;
}
.psec-h .right {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}

/* ─── Problem — 3 pain cards ──────────────────────────────────── */
.pains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pain {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 180ms cubic-bezier(0.4,0,0.2,1),
              border-color 180ms ease,
              box-shadow 220ms ease;
}
.pain:hover {
  transform: translateY(-2px);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.12), 0 0 24px rgba(239,68,68,0.10);
}
.pain-num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-destructive);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pain-num::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--color-destructive);
  box-shadow: 0 0 8px rgba(239,68,68,0.6);
}
.pain h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-foreground);
  line-height: 1.2;
}
.pain p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted-foreground);
}
.pain-visual {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-separator);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--color-muted-foreground);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pain-visual .x { color: var(--color-destructive); }

/* ─── The shape — model vs .pertel/ split ─────────────────────── */
.shape {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  align-items: stretch;
}
.shape-side {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.shape-side .lbl {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted-foreground);
}
.shape-side h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
}
.shape-side h3 em { font-style: italic; color: #06b6d4; }
.shape-side p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-muted-foreground);
}
.shape-side[data-side="inside"]  { background: rgba(239,68,68,0.04); }
.shape-side[data-side="outside"] { background: rgba(6,182,212,0.05); }
.shape-side .feats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.shape-side .feat {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  border-radius: 9999px;
  background: var(--color-overlay-light);
  border: 1px solid var(--color-separator-light);
  color: var(--color-foreground);
}
.shape-side[data-side="outside"] .feat {
  background: var(--color-primary-10);
  border-color: var(--color-primary-20);
  color: #67e8f9;
}
.shape-bridge {
  position: relative;
  background: var(--color-card);
  border-left: 1px solid var(--color-separator);
  border-right: 1px solid var(--color-separator);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shape-bridge::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(6,182,212,0.5), transparent);
}
.shape-bridge::after {
  /* moving cyan dot */
  content: '';
  position: absolute;
  left: -10px;
  top: calc(50% - 3px);
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: #06b6d4;
  box-shadow: 0 0 12px rgba(6,182,212,0.9);
  animation: shape-flow 3s ease-in-out infinite;
}
@keyframes shape-flow {
  0%   { left: 4px;    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(100% - 11px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shape-bridge::after { animation: none; opacity: 0.6; left: 50%; }
  .pertel-hero-glyph .heart { animation: none; }
}

/* ─── Modes — 3 large cards ───────────────────────────────────── */
.modes-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mode-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 28px 26px 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 180ms cubic-bezier(0.4,0,0.2,1),
              border-color 180ms ease,
              box-shadow 220ms ease;
}
.mode-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,0.7), transparent);
}
.mode-card[data-accent="amber"]::before {
  background: linear-gradient(90deg, transparent, rgba(245,158,11,0.7), transparent);
}
.mode-card:hover {
  transform: translateY(-3px);
  border-color: rgba(6,182,212,0.35);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18),
              0 0 0 1px rgba(6,182,212,0.15),
              0 0 28px rgba(6,182,212,0.14);
}
.mode-card[data-accent="amber"]:hover {
  border-color: rgba(245,158,11,0.4);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18),
              0 0 0 1px rgba(245,158,11,0.18),
              0 0 28px rgba(245,158,11,0.14);
}
.mode-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mode-card .glyph {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  color: #06b6d4;
  display: flex; align-items: center; justify-content: center;
}
.mode-card[data-accent="amber"] .glyph {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.3);
  color: #fbbf24;
}
.mode-card .ns {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 18px;
  font-weight: 600;
  color: #06b6d4;
  letter-spacing: -0.01em;
}
.mode-card[data-accent="amber"] .ns { color: #fbbf24; }
.mode-card h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-foreground);
  line-height: 1.05;
}
.mode-card h3 em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 20px rgba(34,211,238,0.3);
}
.mode-card[data-accent="amber"] h3 em {
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(251,191,36,0.3);
}
.mode-card .blurb {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-muted-foreground);
  flex: 1;
}
.mode-card .meta {
  padding-top: 14px;
  border-top: 1px solid var(--color-separator);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mode-card .tools {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.mode-card .tools b {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--color-overlay-light);
  color: var(--color-foreground);
  border: 1px solid var(--color-separator-light);
}
.mode-card .invoke-hint {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--color-muted-foreground);
  text-align: right;
}

/* ─── In-action transcript — bigger version ───────────────────── */
.in-action {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
}
.in-action-head {
  padding: 14px 22px;
  border-bottom: 1px solid var(--color-separator);
  background: var(--color-overlay-subtle);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--color-muted-foreground);
}
.in-action-head .lights { display: inline-flex; gap: 6px; }
.in-action-head .lights span {
  width: 10px; height: 10px; border-radius: 9999px;
  background: var(--color-overlay-light);
  border: 1px solid var(--color-separator);
}
.in-action-body {
  padding: 26px 30px;
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.95;
}
.in-action-line {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
}
.in-action-who {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding-top: 6px;
  color: var(--color-muted-foreground);
}
.in-action-who[data-who="you"]    { color: var(--color-muted-foreground); }
.in-action-who[data-who="dash"]   { color: #06b6d4; }
.in-action-who[data-who="sift"]   { color: #fbbf24; }
.in-action-who[data-who="pertel"] { color: #22d3ee; }
.in-action-text { color: var(--color-foreground); }
.in-action-text .at { color: #06b6d4; font-weight: 500; }
.in-action-text .ev { color: var(--color-muted-foreground); }

/* ─── Final install CTA ──────────────────────────────────────── */
.pertel-install {
  margin: 56px 0 24px;
  padding: 56px 48px;
  border-radius: 22px;
  background:
    radial-gradient(600px 200px at 20% 50%, rgba(6,182,212,0.18), transparent 60%),
    radial-gradient(600px 200px at 80% 50%, rgba(34,211,238,0.10), transparent 60%),
    var(--color-card);
  border: 1px solid rgba(6,182,212,0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.pertel-install h2 {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--color-foreground);
}
.pertel-install h2 em {
  font-style: italic;
  color: #06b6d4;
  text-shadow: 0 0 30px rgba(34,211,238,0.4);
}
.pertel-install p {
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--color-muted-foreground);
  max-width: 56ch;
}
.pertel-install .ctas {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* CTA buttons — used in hero + install */
.pertel-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 12px;
  background: linear-gradient(180deg, #06b6d4, #0891b2);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px rgba(6,182,212,0.25), 0 6px 18px rgba(6,182,212,0.3);
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.4,0,0.2,1);
}
.pertel-cta-primary:hover { transform: scale(1.04); }
.pertel-cta-primary:active { transform: scale(0.98); }
.pertel-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 12px;
  background: var(--color-overlay-light);
  border: 1px solid var(--color-separator-light);
  color: var(--color-foreground);
  font-weight: 500;
  font-size: 14px;
  font-family: ui-monospace, Menlo, monospace;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms ease;
}
.pertel-cta-ghost:hover { border-color: rgba(6,182,212,0.35); }

/* Compact mode */
.compact .pertel-hero { padding: 56px 0 70px; }
.compact .pertel-hero h1 { font-size: clamp(42px, 5.6vw, 88px); }
.compact .psec { padding: 40px 0; }
.compact .pertel-install { padding: 32px 28px; flex-direction: column; align-items: flex-start; }

/* ─── Pertel light-mode color tuning ────────────────────────── */
[data-theme="light"] .pertel-hero-eyebrow {
  color: #0e7490;
}
[data-theme="light"] .topnav-btn {
  color: #0e7490;
  background: rgba(6,182,212,0.08);
  border-color: rgba(6,182,212,0.25);
}
[data-theme="light"] .topnav-btn:hover {
  color: #155e75;
  border-color: rgba(6,182,212,0.45);
}
[data-theme="light"] .pertel-hero h1 em,
[data-theme="light"] .psec-h h2 em,
[data-theme="light"] .mode-card h3 em,
[data-theme="light"] .pertel-install h2 em,
[data-theme="light"] .shape-side h3 em {
  color: #0891b2;
  text-shadow: 0 0 24px rgba(8,145,178,0.18);
}
[data-theme="light"] .in-action-text .at,
[data-theme="light"] .mode-card .ns {
  color: #0e7490;
}
[data-theme="light"] .mode-card[data-accent="amber"] .ns,
[data-theme="light"] .mode-card[data-accent="amber"] h3 em {
  color: #b45309;
  text-shadow: 0 0 20px rgba(180,83,9,0.18);
}
[data-theme="light"] .topnav {
  background: rgba(255,255,255,0.85);
  border-bottom-color: rgba(15,23,42,0.08);
}
[data-theme="light"] .pain-num {
  color: #b91c1c;
}
[data-theme="light"] .pain-num::before {
  background: #b91c1c;
  box-shadow: 0 0 8px rgba(185,28,28,0.4);
}
[data-theme="light"] .pain-visual .x {
  color: #b91c1c;
}
[data-theme="light"] .shape-side[data-side="inside"]  { background: rgba(185,28,28,0.04); }
[data-theme="light"] .shape-side[data-side="outside"] { background: rgba(6,182,212,0.06); }
[data-theme="light"] .shape-side[data-side="outside"] .feat {
  color: #0e7490;
}
[data-theme="light"] .live-cursor::after {
  background: #0e7490;
}
[data-theme="light"] .pertel-cta-ghost {
  color: var(--color-foreground);
}

/* ═══════════════════════════════════════════════════════════════
 * Pertel 2026 · light-mode beauty pass
 * — match the logo gradient (#5cc8ff → #2563eb)
 * — refined, restrained, ambient, layered
 * ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* Cool near-white with the faintest blue undertone */
  background: #f7faff !important;
  color: #0f172a;
}

/* Aurora mesh behind the entire page */
[data-theme="light"] .orb-bg::before,
[data-theme="light"] .orb-bg::after,
[data-theme="light"] .orb-bg > span {
  filter: blur(120px);
}
[data-theme="light"] .orb-bg::before {
  top: -180px; left: -160px;
  width: 720px; height: 720px;
  background: #5cc8ff; opacity: 0.30;
}
[data-theme="light"] .orb-bg::after {
  top: 200px; right: -200px;
  width: 780px; height: 780px;
  background: #2563eb; opacity: 0.18;
  animation: aurora-a 22s ease-in-out infinite alternate;
}
[data-theme="light"] .orb-bg > span {
  bottom: -260px; left: 30%;
  width: 700px; height: 700px;
  background: #06b6d4; opacity: 0.22;
  animation: aurora-b 26s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-80px, 40px) scale(1.1); }
}
@keyframes aurora-b {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, -40px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] .orb-bg::after,
  [data-theme="light"] .orb-bg > span { animation: none; }
}

/* Reusable gradient text — for italic accents */
[data-theme="light"] .pertel-hero h1 em,
[data-theme="light"] .psec-h h2 em,
[data-theme="light"] .mode-card h3 em,
[data-theme="light"] .pertel-install h2 em,
[data-theme="light"] .shape-side h3 em,
[data-theme="light"] .pain h3 em {
  background-image: linear-gradient(95deg, #5cc8ff 0%, #2563eb 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 24px rgba(37,99,235,0.18));
}

/* Hero — refined typography and breathing room */
[data-theme="light"] .pertel-hero {
  padding: 62px 0 78px;
}
[data-theme="light"] .pertel-hero-logo {
  width: clamp(118px, 14.6vw, 227px);
  filter: drop-shadow(0 6px 24px rgba(37,99,235,0.16));
}

/* Hero aura — single soft halo behind the logo. */
.pertel-hero-aura {
  position: relative;
  display: inline-block;
  margin: 0 auto 28px;
}
.pertel-hero-aura::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 110%; height: 110%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: radial-gradient(closest-side,
    rgba(92,200,255,0.18) 0%,
    rgba(37,99,235,0.06) 50%,
    transparent 75%);
  pointer-events: none;
  z-index: -1;
}
.pertel-hero-aura .ring { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pertel-hero-aura::before { opacity: 0.6; }
}
[data-theme="light"] .pertel-hero h1 {
  margin-top: 3px;
  font-size: clamp(40px, 5.3vw, 92px);
  letter-spacing: -0.05em;
  font-weight: 700;
  color: #0a1530;
  text-shadow: none;
  max-width: 14ch;
}
[data-theme="light"] .pertel-hero .sub {
  font-size: clamp(15px, 1vw, 17px);
  color: #475569;
  max-width: 56ch;
  margin-top: 22px;
}
[data-theme="light"] .pertel-hero .sub b {
  color: #0a1530;
  font-weight: 600;
}

/* Eyebrow chip — soft glass pill */
[data-theme="light"] .pertel-hero-eyebrow {
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(37,99,235,0.18);
  color: #1d4ed8;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 4px 16px rgba(37,99,235,0.06);
}
[data-theme="light"] .pertel-hero-eyebrow .dot {
  background: linear-gradient(135deg, #5cc8ff, #2563eb);
  box-shadow: 0 0 12px rgba(37,99,235,0.6);
}

/* Primary CTA — the logo gradient as button */
[data-theme="light"] .pertel-cta-primary {
  background: linear-gradient(95deg, #5cc8ff 0%, #2563eb 100%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 2px 4px rgba(37,99,235,0.18),
    0 12px 32px rgba(37,99,235,0.28);
  padding: 16px 28px;
  font-size: 15.5px;
  letter-spacing: -0.005em;
  border-radius: 14px;
}
[data-theme="light"] .pertel-cta-primary:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 4px 8px rgba(37,99,235,0.22),
    0 16px 44px rgba(37,99,235,0.36);
}
[data-theme="light"] .pertel-cta-ghost {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(15,23,42,0.08);
  color: #0f172a;
  padding: 16px 24px;
  border-radius: 14px;
  font-size: 14px;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 4px 16px rgba(15,23,42,0.04);
}
[data-theme="light"] .pertel-cta-ghost:hover {
  border-color: rgba(37,99,235,0.3);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.06),
    0 8px 28px rgba(37,99,235,0.10);
}

/* Section headings — bigger, more whitespace */
[data-theme="light"] .psec {
  padding: 96px 0;
  border-top: 1px solid rgba(15,23,42,0.06);
}
[data-theme="light"] .psec-h h2 {
  font-size: clamp(32px, 3.4vw, 56px);
  letter-spacing: -0.035em;
  color: #0a1530;
  font-weight: 700;
}
[data-theme="light"] .psec-h .sub {
  color: #1d4ed8;
  text-shadow: none;
  font-size: 17px;
  opacity: 0.8;
}
[data-theme="light"] .psec-h .right {
  color: #475569;
}

/* Soft layered shadows for ALL cards on the Pertel light page */
[data-theme="light"] .pain,
[data-theme="light"] .shape,
[data-theme="light"] .mode-card,
[data-theme="light"] .in-action {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 4px 12px rgba(15,23,42,0.04),
    0 16px 40px rgba(37,99,235,0.06);
}

/* Pain cards — soft, refined */
[data-theme="light"] .pains { gap: 22px; }
[data-theme="light"] .pain {
  padding: 32px 28px;
  transition: transform 220ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 260ms ease,
              border-color 220ms ease;
}
[data-theme="light"] .pain:hover {
  transform: translateY(-3px);
  border-color: rgba(185,28,28,0.20);
  box-shadow:
    0 2px 4px rgba(185,28,28,0.06),
    0 10px 24px rgba(185,28,28,0.10),
    0 24px 60px rgba(15,23,42,0.06);
}
[data-theme="light"] .pain h3 {
  color: #0a1530;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
[data-theme="light"] .pain p {
  color: #475569;
  font-size: 14.5px;
  line-height: 1.65;
}
[data-theme="light"] .pain-visual {
  color: #475569;
  border-top-color: rgba(15,23,42,0.06);
}

/* Shape split — refined dual card */
[data-theme="light"] .shape {
  border-radius: 24px;
  overflow: hidden;
}
[data-theme="light"] .shape-side {
  padding: 44px 40px;
}
[data-theme="light"] .shape-side[data-side="inside"] {
  background: linear-gradient(135deg, rgba(185,28,28,0.04), rgba(185,28,28,0.02));
}
[data-theme="light"] .shape-side[data-side="outside"] {
  background: linear-gradient(135deg, rgba(92,200,255,0.08), rgba(37,99,235,0.04));
}
[data-theme="light"] .shape-side h3 {
  font-size: clamp(24px, 2.4vw, 36px);
  color: #0a1530;
  font-weight: 700;
}
[data-theme="light"] .shape-side .lbl {
  color: #475569;
}
[data-theme="light"] .shape-side[data-side="inside"] .lbl { color: #b91c1c; }
[data-theme="light"] .shape-side[data-side="outside"] .lbl { color: #1d4ed8; }
[data-theme="light"] .shape-side p { color: #475569; font-size: 15px; line-height: 1.6; }
[data-theme="light"] .shape-side .feat {
  background: rgba(255,255,255,0.8);
  border-color: rgba(15,23,42,0.08);
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
[data-theme="light"] .shape-side[data-side="outside"] .feat {
  background: linear-gradient(135deg, rgba(92,200,255,0.18), rgba(37,99,235,0.10));
  border-color: rgba(37,99,235,0.25);
  color: #1d4ed8;
}
[data-theme="light"] .shape-bridge {
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(247,250,255,0.4));
  border-color: rgba(15,23,42,0.06);
}
[data-theme="light"] .shape-bridge::before {
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.5), transparent);
}
[data-theme="light"] .shape-bridge::after {
  background: linear-gradient(90deg, #5cc8ff, #2563eb);
  box-shadow: 0 0 16px rgba(37,99,235,0.6);
}

/* Mode cards — floating glass */
[data-theme="light"] .modes-grid-3 { gap: 22px; }
[data-theme="light"] .mode-card {
  padding: 32px 28px 24px;
  transition: transform 240ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 280ms ease,
              border-color 220ms ease;
}
[data-theme="light"] .mode-card::before {
  height: 3px;
  background: linear-gradient(90deg, transparent, #5cc8ff, #2563eb, transparent);
}
[data-theme="light"] .mode-card[data-accent="amber"]::before {
  background: linear-gradient(90deg, transparent, #fbbf24, #b45309, transparent);
}
[data-theme="light"] .mode-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37,99,235,0.20);
  box-shadow:
    0 4px 8px rgba(37,99,235,0.06),
    0 16px 40px rgba(37,99,235,0.14),
    0 32px 80px rgba(15,23,42,0.08);
}
[data-theme="light"] .mode-card[data-accent="amber"]:hover {
  border-color: rgba(180,83,9,0.25);
  box-shadow:
    0 4px 8px rgba(180,83,9,0.06),
    0 16px 40px rgba(180,83,9,0.14),
    0 32px 80px rgba(15,23,42,0.08);
}
[data-theme="light"] .mode-card .glyph {
  background: linear-gradient(135deg, rgba(92,200,255,0.18), rgba(37,99,235,0.08));
  border: 1px solid rgba(37,99,235,0.20);
  color: #1d4ed8;
}
[data-theme="light"] .mode-card[data-accent="amber"] .glyph {
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(180,83,9,0.08));
  border-color: rgba(180,83,9,0.25);
  color: #b45309;
}
[data-theme="light"] .mode-card h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0a1530;
}
[data-theme="light"] .mode-card .ns {
  color: #1d4ed8;
  font-size: 18px;
}
[data-theme="light"] .mode-card[data-accent="amber"] .ns { color: #b45309; }
[data-theme="light"] .mode-card .blurb {
  color: #475569;
  font-size: 14.5px;
  line-height: 1.6;
}
[data-theme="light"] .mode-card .meta {
  border-top-color: rgba(15,23,42,0.06);
}
[data-theme="light"] .mode-card .tools b {
  background: rgba(247,250,255,0.9);
  border-color: rgba(15,23,42,0.08);
  color: #0f172a;
}
[data-theme="light"] .mode-card .invoke-hint {
  color: #475569;
}

/* In-action transcript — bright white terminal */
[data-theme="light"] .in-action {
  border-radius: 20px;
}
[data-theme="light"] .in-action-head {
  background: linear-gradient(180deg, #fafcff, #f4f8fc);
  border-bottom-color: rgba(15,23,42,0.06);
  color: #475569;
}
[data-theme="light"] .in-action-head .lights span {
  background: rgba(15,23,42,0.06);
  border-color: rgba(15,23,42,0.10);
}
[data-theme="light"] .in-action-body {
  color: #0f172a;
  padding: 32px 36px;
}
[data-theme="light"] .in-action-who[data-who="dash"]   { color: #1d4ed8; }
[data-theme="light"] .in-action-who[data-who="sift"]   { color: #b45309; }
[data-theme="light"] .in-action-who[data-who="pertel"] { color: #0e7490; }
[data-theme="light"] .in-action-text {
  color: #0f172a;
}
[data-theme="light"] .in-action-text .at {
  background-image: linear-gradient(95deg, #5cc8ff 0%, #2563eb 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 600;
}

/* Install CTA — showcase gradient block */
[data-theme="light"] .pertel-install {
  background:
    radial-gradient(800px 280px at 20% 50%, rgba(92,200,255,0.30), transparent 60%),
    radial-gradient(800px 280px at 80% 50%, rgba(37,99,235,0.22), transparent 60%),
    linear-gradient(135deg, #ffffff, #f4f8fc);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 28px;
  padding: 72px 56px;
  box-shadow:
    0 2px 4px rgba(37,99,235,0.06),
    0 16px 48px rgba(37,99,235,0.10),
    0 48px 120px rgba(15,23,42,0.06);
}
[data-theme="light"] .pertel-install h2 {
  font-size: clamp(36px, 4vw, 64px);
  letter-spacing: -0.04em;
  color: #0a1530;
  font-weight: 700;
}
[data-theme="light"] .pertel-install p {
  color: #475569;
  font-size: 17px;
  line-height: 1.5;
}

/* Footer — subtle */
[data-theme="light"] .foot {
  border-top-color: rgba(15,23,42,0.06);
  color: #475569;
}
[data-theme="light"] .foot b { color: #0a1530; }
[data-theme="light"] .foot a { color: #1d4ed8 !important; }

/* Topnav — glass refinement */
[data-theme="light"] .topnav {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
[data-theme="light"] .topnav-btn {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(37,99,235,0.18);
  color: #1d4ed8;
  font-weight: 600;
}
[data-theme="light"] .topnav-btn:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(37,99,235,0.35);
  color: #1e40af;
  box-shadow: 0 4px 16px rgba(37,99,235,0.10);
}
[data-theme="light"] .topnav-btn .sig {
  color: #1d4ed8;
}

/* Live cursor — gradient-tinted */
[data-theme="light"] .live-cursor::after {
  background: linear-gradient(180deg, #5cc8ff, #2563eb);
}

/* ═══════════════════════════════════════════════════════════════
 * Responsive — mobile + tablet polish across all pages
 * ═══════════════════════════════════════════════════════════════ */

/* Tablet — pull in horizontally */
@media (max-width: 1024px) {
  .dirB .frame { padding: 0 24px; }
  .manifest { padding-left: 56px; }
  .tall-card .manifest { padding: 24px 24px 24px 72px; }
  .manifest-spine { left: 18px; }
  .tall-card .manifest-spine { left: 38px; }
  .manifest-node { left: -48px; width: 38px; height: 38px; font-size: 10px; }
  .bridge { margin: 20px -24px -8px -72px; }

  .chart-family .chart-row { grid-template-columns: 120px 52px 1fr 160px 100px; }
  .chart-modes .chart-row { grid-template-columns: 140px 90px 1fr 180px; }

  .install-mega pre { font-size: 13px; }
  .hero-v3-install { grid-template-columns: 1.2fr 1fr; gap: 18px; }
}

/* Tablet portrait + mobile — bigger structural changes */
@media (max-width: 768px) {
  .dirB .frame { padding: 0 16px; }

  /* TopNav — wraps, hides secondary labels */
  .topnav {
    height: auto;
    min-height: 56px;
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topnav-btn { padding: 5px 10px; font-size: 10px; gap: 5px; }
  .schedii-lockup-tagline,
  .schedii-lockup-by,
  .schedii-lockup-host { font-size: 9.5px; }

  /* ─── Pertel landing ────────────────────────────────────────── */
  .pertel-hero { padding: 48px 0 56px; }
  [data-theme="light"] .pertel-hero { padding: 56px 0 64px; }
  [data-theme="light"] .pertel-hero h1 {
    font-size: clamp(40px, 11vw, 64px);
    letter-spacing: -0.035em;
    max-width: none;
  }
  .pertel-hero-logo { width: clamp(220px, 70vw, 340px); margin-bottom: 28px; }
  .pertel-hero .sub { font-size: 15.5px; line-height: 1.55; margin-top: 22px; }
  .pertel-hero .ctas { flex-direction: column; width: 100%; gap: 10px; }
  .pertel-cta-primary, .pertel-cta-ghost {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 14px;
  }

  .psec { padding: 56px 0; }
  [data-theme="light"] .psec { padding: 64px 0; }
  .psec-h {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 22px;
  }
  .psec-h .right { margin-left: 0; }
  .psec-h h2 { font-size: clamp(26px, 7.5vw, 38px); }
  [data-theme="light"] .psec-h h2 { font-size: clamp(28px, 8vw, 42px); }

  /* Pain cards: stack */
  .pains { grid-template-columns: 1fr; gap: 14px; }
  .pain { padding: 22px 20px; }
  .pain h3 { font-size: 20px; }

  /* Shape: stack vertically, rotate the bridge */
  .shape { grid-template-columns: 1fr; }
  .shape-side { padding: 28px 24px; }
  [data-theme="light"] .shape-side { padding: 32px 26px; }
  .shape-bridge {
    width: auto;
    height: 60px;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--color-separator);
    border-bottom: 1px solid var(--color-separator);
  }
  .shape-bridge::before {
    top: 0; bottom: 0; left: 50%; right: auto;
    width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, rgba(6,182,212,0.5), transparent);
  }
  .shape-bridge::after {
    animation-name: shape-flow-v;
    left: calc(50% - 3.5px);
    top: -10px;
  }
  @keyframes shape-flow-v {
    0%   { top: 4px; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: calc(100% - 11px); opacity: 0; }
  }

  /* Modes: stack */
  .modes-grid-3 { grid-template-columns: 1fr; gap: 14px; }
  .mode-card { padding: 24px 22px; }
  .mode-card h3 { font-size: 22px; }
  .mode-card .meta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mode-card .invoke-hint { text-align: left; }

  /* In-action transcript: tighten */
  .in-action-body { padding: 20px 18px; font-size: 12.5px; line-height: 1.8; }
  .in-action-line { grid-template-columns: 56px 1fr; gap: 10px; }
  .in-action-who { font-size: 9px; letter-spacing: 0.14em; }
  .in-action-head { padding: 12px 16px; flex-wrap: wrap; gap: 8px; font-size: 10.5px; }

  /* Install CTA: stack */
  .pertel-install {
    padding: 36px 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    border-radius: 20px;
  }
  [data-theme="light"] .pertel-install { padding: 44px 28px; }
  [data-theme="light"] .pertel-install h2 { font-size: clamp(28px, 8vw, 40px); }
  .pertel-install p { font-size: 15px; }
  .pertel-install .ctas { flex-direction: column; width: 100%; }
  .pertel-install .ctas a { width: 100%; justify-content: center; }

  /* ─── Index landing (install spec) ──────────────────────────── */
  .dirB .hero-top { padding: 32px 0 24px; }
  .dirB .hero-top h1 { font-size: clamp(40px, 11vw, 64px); }
  .dirB .hero-top .sub { font-size: 15px; }

  /* Install panel + side facts: stack */
  .hero-v3-install { grid-template-columns: 1fr; gap: 16px; }
  .install-mega-tabs { flex-wrap: wrap; padding: 0 8px; }
  .install-mega-tabs button { padding: 10px 12px; font-size: 10.5px; }
  .install-mega pre { padding: 16px 18px; font-size: 12px; min-height: 200px; }
  .install-mega-foot { flex-wrap: wrap; gap: 8px; font-size: 10px; padding: 10px 14px; }
  .install-mega-foot .copy { margin-left: 0; width: 100%; text-align: center; }
  .hero-side { padding: 18px 20px; }
  .hero-side dl { grid-template-columns: 90px 1fr; row-gap: 10px; }

  /* Manifest inside tall-card: tighter spine */
  .manifest { padding: 8px 0 16px 48px; }
  .tall-card .manifest { padding: 24px 16px 24px 60px; }
  .manifest-spine { left: 13px; }
  .tall-card .manifest-spine { left: 28px; }
  .manifest-node { left: -44px; width: 32px; height: 32px; font-size: 9px; }
  .manifest-section { padding: 32px 0 0; }
  .manifest-section-h {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 16px;
  }
  .manifest-section-h::before { display: none; }
  .manifest-section-h h2 { font-size: clamp(22px, 7vw, 32px); }
  .manifest-section-h .right { margin-left: 0; }

  /* Bridges: narrower */
  .bridge { margin: 16px -16px -4px -60px; height: 56px; }
  .bridge .bridge-label { font-size: 9px; padding: 3px 8px; letter-spacing: 0.12em; }

  /* Chart-family: stack each cell */
  .chart-family .chart-row {
    grid-template-columns: 1fr;
    padding: 4px 0;
  }
  .chart-family .chart-row > div {
    padding: 12px 16px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-separator);
  }
  .chart-family .chart-row > div:last-child { border-bottom: 0; }
  .chart-family .chart-axis {
    background: var(--color-overlay-light);
    flex-direction: row !important;
    gap: 10px !important;
    align-items: baseline !important;
  }
  .chart-family .chart-status { justify-content: flex-start; }

  /* Chart-modes: stack */
  .chart-modes .chart-row { grid-template-columns: 1fr; padding: 4px 0; }
  .chart-modes .chart-row > div {
    padding: 10px 16px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-separator);
  }
  .chart-modes .chart-row > div:last-child { border-bottom: 0; }
  .chart-modes .chart-axis {
    background: var(--color-overlay-light);
    flex-direction: row !important;
    gap: 10px !important;
  }
  .chart-modes .chart-hint {
    border-left: 0;
    justify-content: flex-start;
    text-align: left;
  }

  /* Chart-pillars: 3-col fit */
  .chart-pillars .chart-row { grid-template-columns: 48px 48px 1fr; }
  .chart-pillars .chart-row > div { padding: 14px 12px; }
  .chart-pillars .chart-meta {
    grid-column: 1 / -1;
    align-items: flex-start !important;
    text-align: left;
    border-top: 1px solid var(--color-separator);
    border-left: 0 !important;
    padding: 12px 16px !important;
  }
  .chart-pillars .chart-headline h3 { font-size: clamp(20px, 5.5vw, 26px); }

  /* @scp vs @sch comparison: stack everything */
  .vs-head {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 18px;
    text-align: center;
  }
  .vs-side, .vs-side.vs-right {
    align-items: center;
    text-align: center;
  }
  .vs-side .vs-feats, .vs-side.vs-right .vs-feats { justify-content: center; }
  .vs-seam-head { order: 0; }
  .vs-seam-head .vs-axis { width: 40px; height: 40px; font-size: 9px; }
  .vs-rows { grid-template-columns: 1fr; }
  .vs-row { display: block; padding: 0; }
  .vs-cell {
    padding: 14px 18px;
    text-align: left !important;
    border-bottom: 1px solid var(--color-separator);
    font-size: 13px;
  }
  .vs-cell-axis {
    background: var(--color-overlay-light);
    border-left: 0 !important;
    border-right: 0 !important;
    text-align: left;
    padding: 8px 18px;
    font-size: 9.5px;
  }
  .vs-cell-axis::after { display: none; }
  .vs-seam-flow { display: none; }
  .vs-foot { flex-wrap: wrap; gap: 10px; font-size: 10px; padding: 14px 18px; }
  .vs-foot .right { margin-left: 0; }

  /* Once-installed transcript */
  .invoke { padding: 18px 16px; }
  .invoke-line { grid-template-columns: 50px 1fr; gap: 10px; font-size: 12px; }
  .invoke-who { font-size: 9px; }

  /* Marquee — too distracting on mobile */
  .marquee { display: none; }

  /* Foot */
  .foot { flex-direction: column; gap: 6px; align-items: flex-start; padding: 24px 0; }
  .foot .right { margin-left: 0; }

  /* ─── Theory page ───────────────────────────────────────────── */
  .theorem { grid-template-columns: 1fr; gap: 20px; }
  .theorem-aside {
    border-left: 0;
    border-top: 1px solid rgba(6,182,212,0.35);
    border-radius: 12px 12px 0 0;
    padding: 16px 18px;
  }
  .theorem-lead { font-size: 16px; }
  .theory-closing { padding: 36px 22px; }
  .theory-closing-quote { font-size: clamp(18px, 5.5vw, 26px); }
}

/* Small mobile — even tighter */
@media (max-width: 480px) {
  [data-theme="light"] .pertel-hero h1 { font-size: clamp(34px, 11vw, 52px); }
  .pertel-hero-logo { width: 240px; }
  .pertel-hero .ctas { gap: 8px; }
  .install-mega-tabs button { padding: 8px 10px; font-size: 9.5px; }
  .topnav-btn .sig { display: none; }
  .topnav { padding: 8px 10px; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
 * Tall Card — all sections merged into ONE long card
 * with animated bridges between sections
 * ═══════════════════════════════════════════════════════════════ */

.tall-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(6,182,212,0.05),
    0 24px 60px rgba(0,0,0,0.25);
}

/* Ambient border glow that breathes */
.tall-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  pointer-events: none;
  background:
    radial-gradient(900px 240px at 0% 0%,   rgba(6,182,212,0.18), transparent 55%),
    radial-gradient(900px 240px at 100% 50%, rgba(34,211,238,0.10), transparent 55%),
    radial-gradient(900px 280px at 0% 100%, rgba(6,182,212,0.14), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.9;
  z-index: 0;
}

/* A slow vertical "scan" pulse that travels down the whole card */
.tall-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent,
    rgba(6,182,212,0.10) 40%,
    rgba(6,182,212,0.18) 50%,
    rgba(6,182,212,0.10) 60%,
    transparent);
  filter: blur(20px);
  animation: tall-scan 18s linear infinite;
  z-index: 0;
}
@keyframes tall-scan {
  0%   { top: -150px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tall-card::after { animation: none; opacity: 0; }
}

.tall-card > * { position: relative; z-index: 1; }

/* The manifest now lives inside the tall card — drop the standalone padding */
.tall-card .manifest {
  padding: 32px 32px 32px 96px;
}
.tall-card .manifest-spine {
  left: 52px;
}
.tall-card .manifest-node { left: -56px; }
.tall-card .manifest-section-h::before { left: -36px; }

/* Animated bridge between sections inside the tall card */
.bridge {
  position: relative;
  height: 80px;
  margin: 24px -32px -8px -96px;  /* extend edge-to-edge of the tall-card interior */
  pointer-events: none;
  overflow: hidden;
}
.bridge::before {
  /* the static cyan seam line at vertical-center */
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(6,182,212,0.25) 20%,
    rgba(6,182,212,0.6)  50%,
    rgba(6,182,212,0.25) 80%,
    transparent 100%);
}
.bridge::after {
  /* a glowing pulse traveling along the seam */
  content: '';
  position: absolute;
  top: calc(50% - 3px);
  left: -120px;
  width: 120px;
  height: 7px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,0.95), transparent);
  filter: blur(2px);
  animation: bridge-flow 5s linear infinite;
}
@keyframes bridge-flow {
  0%   { left: -120px; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bridge::after { animation: none; opacity: 0.4; left: 50%; }
}

/* Small tick marks at each end of the bridge, anchoring it visually */
.bridge .bridge-tick {
  position: absolute;
  top: calc(50% - 4px);
  width: 9px; height: 9px;
  border-radius: 9999px;
  background: var(--color-card);
  border: 1.5px solid rgba(6,182,212,0.55);
  box-shadow: 0 0 8px rgba(6,182,212,0.4);
}
.bridge .bridge-tick.left  { left: 16px;  }
.bridge .bridge-tick.right { right: 16px; }

/* Tiny "§NN → §NN+1" label centered on the bridge */
.bridge .bridge-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--color-card);
  border: 1px solid rgba(6,182,212,0.35);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #06b6d4;
  white-space: nowrap;
}

/* When chart cards live inside the tall card, strip their box chrome
 * so they merge into the big surface instead of nesting borders */
.tall-card .chart {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.tall-card .chart-row:first-child { border-top: 1px solid var(--color-separator); }
.tall-card .chart-foot {
  background: rgba(6,182,212,0.03);
  border-radius: 8px;
  margin-top: 0;
}

/* Hero-side panel inside the tall card — soften so it doesn't look nested */
.tall-card .hero-side {
  background: var(--color-overlay-subtle);
  border-color: var(--color-separator-light);
}

/* Install-mega and vs-card stay as intentional sub-boxes
 * but bump their borders to use the separator (less heavy) */
.tall-card .install-mega,
.tall-card .vs-card {
  border-color: var(--color-separator-light);
}

/* ═══════════════════════════════════════════════════════════════
 * §06 — AkrosInfra discipline section (pertel.html)
 * Reminiscence Meter featured card + 17-framework capsule grid
 * ═══════════════════════════════════════════════════════════════ */

.rm-card {
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(6,182,212,0.10), transparent 60%),
    radial-gradient(600px 260px at 88% 100%, rgba(245,158,11,0.08), transparent 60%),
    var(--color-card);
  border: 1px solid var(--color-border);
  padding: 36px 36px 32px;
  overflow: hidden;
  margin-bottom: 28px;
}
.rm-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,0.6), rgba(245,158,11,0.4), transparent);
}
.rm-card-head { margin-bottom: 28px; }
.rm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
  margin-bottom: 14px;
}
.rm-code {
  padding: 3px 9px;
  border-radius: 9999px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
  color: #06b6d4;
  font-weight: 600;
}
.rm-card h3 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-foreground);
}
.rm-card h3 em { font-style: italic; color: #06b6d4; }
.rm-lede {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-muted-foreground);
  max-width: 64ch;
}

.rm-card-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
  align-items: start;
}
.rm-section-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted-foreground);
  margin-bottom: 14px;
}

/* Axis bars */
.rm-axes { display: flex; flex-direction: column; gap: 14px; }
.rm-axis {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rm-axis-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.rm-axis-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-foreground);
  letter-spacing: -0.005em;
}
.rm-axis-weight {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #06b6d4;
  font-weight: 600;
}
.rm-axis-bar {
  position: relative;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-overlay-light);
  overflow: hidden;
}
.rm-axis-bar span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #06b6d4, #22d3ee);
  box-shadow: 0 0 10px rgba(6,182,212,0.4);
}
.rm-axis-note {
  font-size: 11.5px;
  color: var(--color-muted-foreground);
  font-style: italic;
  font-family: "Iowan Old Style", Georgia, serif;
  letter-spacing: 0.005em;
}
.rm-formula {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-overlay-subtle);
  border: 1px dashed var(--color-separator-light);
}
.rm-formula code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-foreground);
  opacity: 0.85;
  word-break: break-word;
}

/* Bands */
.rm-bands { display: flex; flex-direction: column; gap: 8px; }
.rm-band {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-overlay-subtle);
  border: 1px solid var(--color-separator-light);
}
.rm-band-range {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-foreground);
}
.rm-band-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-foreground);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rm-band-pin {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--color-primary-15);
  color: #06b6d4;
  border: 1px solid var(--color-primary-20);
}
.rm-band-verdict {
  font-size: 12px;
  color: var(--color-muted-foreground);
  font-style: italic;
  font-family: "Iowan Old Style", Georgia, serif;
}
.rm-band[data-tone="cool"]   { border-color: rgba(96,165,250,0.20); background: rgba(96,165,250,0.04); }
.rm-band[data-tone="target"] {
  border-color: rgba(6,182,212,0.35);
  background: linear-gradient(90deg, rgba(6,182,212,0.06), rgba(6,182,212,0.02));
  box-shadow: 0 0 0 1px rgba(6,182,212,0.18), 0 0 24px rgba(6,182,212,0.12);
}
.rm-band[data-tone="warn"]   { border-color: rgba(245,158,11,0.30); background: rgba(245,158,11,0.04); }
.rm-band[data-tone="danger"] { border-color: rgba(239,68,68,0.35);  background: rgba(239,68,68,0.05); }
.rm-band[data-tone="block"]  { border-color: rgba(239,68,68,0.55);  background: rgba(239,68,68,0.10); }

.rm-closing-rule {
  margin-top: 6px;
  padding: 14px;
  border-radius: 10px;
  background: var(--color-overlay-subtle);
  border-left: 3px solid #06b6d4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rm-closing-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #06b6d4;
}
.rm-closing-rule > span:last-child {
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-foreground);
}

/* Framework capsule grid */
.fw-grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 18px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted-foreground);
}
.fw-tier-key {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
}
.fw-tier-key > span { display: inline-flex; align-items: center; gap: 7px; }
.fw-tier-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  display: inline-block;
}
.fw-tier-a { background: #06b6d4; box-shadow: 0 0 8px rgba(6,182,212,0.7); }
.fw-tier-b { background: #fbbf24; box-shadow: 0 0 8px rgba(245,158,11,0.55); }

.fw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.fw-capsule {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 160ms cubic-bezier(0.4,0,0.2,1),
              border-color 160ms ease,
              box-shadow 200ms ease;
}
.fw-capsule:hover {
  transform: translateY(-2px);
  border-color: rgba(6,182,212,0.30);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 0 0 1px rgba(6,182,212,0.10);
}
.fw-capsule[data-tier="B"]:hover { border-color: rgba(245,158,11,0.30); }
.fw-capsule.featured {
  border-color: rgba(6,182,212,0.35);
  box-shadow: 0 0 0 1px rgba(6,182,212,0.18), 0 0 22px rgba(6,182,212,0.10);
  background: linear-gradient(180deg, rgba(6,182,212,0.04), transparent 60%), var(--color-card);
}
.fw-capsule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fw-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #06b6d4;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--color-primary-10);
  border: 1px solid var(--color-primary-20);
}
.fw-capsule[data-tier="B"] .fw-code {
  color: #fbbf24;
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.20);
}
.fw-tier {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted-foreground);
  opacity: 0.7;
}
.fw-name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}
.fw-tagline {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-muted-foreground);
}

/* ═══════════════════════════════════════════════════════════════
 * Mobile — Pertel-page responsive overrides
 * Targets pertel.html (and shared chrome on index/why/intelligence).
 * Single breakpoint at 768px (Tailwind md). Larger phones land here.
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Top-nav — chip-row that horizontally scrolls instead of overflowing */
  .topnav {
    padding: 0 14px;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav-btn { padding: 6px 10px; font-size: 10px; letter-spacing: 0.1em; flex-shrink: 0; }
  .topnav-spacer { flex: 0 0 auto; min-width: 4px; }

  /* Frame side-padding — give content more breathing room on small viewports */
  .dirA .frame, .dirB .frame { padding: 0 16px; }

  /* Hero — smaller floor on the headline so it doesn't dwarf the screen */
  .pertel-hero { padding: 36px 0 48px; }
  .pertel-hero-logo { width: clamp(220px, 70vw, 320px); margin-bottom: 28px; }
  .pertel-hero h1 { font-size: clamp(36px, 9vw, 56px); }
  .pertel-hero .sub { font-size: clamp(15px, 4vw, 18px); margin-top: 22px; }
  .pertel-hero .ctas { margin-top: 28px; gap: 10px; }
  .pertel-hero::before {
    width: clamp(280px, 90vw, 480px);
    height: clamp(280px, 90vw, 480px);
    top: 40px;
  }

  /* Section headers — stack instead of single-line collide */
  .psec { padding: 40px 0; }
  .psec-h {
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 24px;
  }
  .psec-h h2 { font-size: clamp(24px, 6.5vw, 32px); flex: 1 1 100%; }
  .psec-h .sub { font-size: 14px; flex: 0 0 auto; }
  .psec-h .right { font-size: 10px; }

  /* 3-up grids → 1 column */
  .pains, .modes-grid-3 { grid-template-columns: 1fr; gap: 12px; }
  .pain, .mode-card { padding: 22px 20px; }

  /* Inside-vs-outside split → stacked with horizontal bridge */
  .shape { grid-template-columns: 1fr; }
  .shape-side { padding: 26px 22px; }
  .shape-bridge {
    border-left: 0; border-right: 0;
    border-top: 1px solid var(--color-separator);
    border-bottom: 1px solid var(--color-separator);
    min-height: 36px;
  }
  .shape-bridge::before {
    /* horizontal line stays; rotate vertical context */
    left: 50%; right: auto; top: 0; bottom: 0;
    width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, rgba(6,182,212,0.5), transparent);
  }
  .shape-bridge::after { display: none; } /* animated dot off-axis; just hide on mobile */

  /* In-action transcript — let monospace lines wrap, smaller font */
  .in-action-body { padding: 14px 12px; font-size: 12px; }
  .in-action-line { gap: 8px; }
  .in-action-who { min-width: 44px; font-size: 10px; }
  .in-action-text { word-break: break-word; }

  /* Install CTA card — stack vertically, smaller padding */
  .pertel-install {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 22px;
    gap: 20px;
    margin: 40px 0 16px;
  }
  .pertel-install h2 { font-size: clamp(26px, 7vw, 40px); }
  .pertel-install p { font-size: 15px; }
  .pertel-install .ctas { width: 100%; flex-wrap: wrap; }

  /* Hero / Install CTAs — tap-sized */
  .pertel-cta-primary, .pertel-cta-ghost {
    padding: 13px 18px;
    font-size: 14px;
  }

  /* Footer — let chips wrap, drop right-margin auto */
  .foot {
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 11px;
  }
  .foot .right { margin-left: 0; }

  /* Intelligence-page 4-up module row → single column */
  .intel-modules { grid-template-columns: 1fr; }
  .intel-hero { padding: 36px 0 44px; }
  .intel-hero h1 { font-size: clamp(40px, 11vw, 64px); }
  .intel-hero h2 { font-size: clamp(18px, 5vw, 26px); }

  /* §06 AkrosInfra — Reminiscence Meter + framework grid */
  .rm-card { padding: 24px 20px 22px; border-radius: 18px; }
  .rm-card-body { grid-template-columns: 1fr; gap: 24px; }
  .rm-card h3 { font-size: clamp(22px, 6vw, 28px); }
  .rm-band { grid-template-columns: 72px 1fr; gap: 10px; padding: 8px 12px; }
  .rm-band-range { font-size: 10.5px; }
  .rm-formula code { font-size: 10px; }
  .fw-grid { grid-template-columns: 1fr; gap: 10px; }
  .fw-grid-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fw-capsule { padding: 14px 16px; }
}