/* ═══════════════════════════════════════════════════
   VECTOR — Refined editorial panels
   Loaded LAST. Replaces the AI-dashboard look of
   .hpc-row, .gv-row, .dc-body with quieter, more
   editorial treatments.
═══════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   1. QUALIFICATION GATE — elegant scorecard
   Applies to .hero-proof-card (.hpc-*) and .gate-viz (.gv-*)
   ───────────────────────────────────────────── */

.hero-proof-card,
.gate-viz,
.qual-gate {
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,251,253,1) 100%) !important;
  border: 1px solid rgba(10,37,64,.08) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 2px rgba(10,37,64,.04),
    0 22px 50px -22px rgba(10,37,64,.16) !important;
  overflow: hidden !important;
}

/* Header band */
.hpc-bar, .gv-bar, .qg-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 22px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(10,37,64,.06) !important;
}
.hpc-title, .gv-title {
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  opacity: .68 !important;
}
/* Replace the "Active" pill with a clean "5 of 6 passed" summary */
.hpc-badge, .gv-badge {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  letter-spacing: -.01em !important;
}
.hpc-badge .pip {
  display: none !important;
}
.hpc-badge::before,
.gv-badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(5,150,105,.14);
}

/* Rows — clean hairline-separated lines, NO per-row background blocks */
.hpc-body, .gv-body {
  padding: 4px 0 6px !important;
  display: block !important;
}
.hpc-row, .gv-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 22px 1fr auto !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 16px 22px !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(10,37,64,.05) !important;
  opacity: 1 !important;
  transition: background .2s ease !important;
}
.hpc-row:last-of-type, .gv-row:last-of-type {
  border-bottom: none !important;
}
.hpc-row:hover, .gv-row:hover {
  background: rgba(10,37,64,.015) !important;
}
.hpc-row.fail, .gv-row.blocked {
  background: transparent !important;
}
/* Quiet red left-edge accent for the missed row */
.hpc-row.fail::before, .gv-row.blocked::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--rose);
  opacity: .45;
  border-radius: 0 2px 2px 0;
}

/* Replace the 22×22 colored tile with a tiny outlined glyph */
.hpc-ico, .gv-icon {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid rgba(5,150,105,.4) !important;
  color: var(--green) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  position: relative !important;
}
.hpc-ico::after, .gv-icon::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--green);
  opacity: 1;
}
/* Hide the original ✓ / ✕ glyph content */
.hpc-ico, .gv-icon { color: transparent !important; }
.hpc-row.fail .hpc-ico,
.gv-row.blocked .gv-icon {
  border-color: rgba(225,29,72,.45) !important;
}
.hpc-row.fail .hpc-ico::after,
.gv-row.blocked .gv-icon::after {
  background: transparent !important;
  border: 1.5px solid var(--rose);
  inset: 3px;
  opacity: .8;
}

/* Text — typographic hierarchy. Bold criterion · light description */
.hpc-text, .gv-label {
  flex: 1 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: -.005em !important;
}
.hpc-text strong, .gv-label strong {
  display: block !important;
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
  margin-bottom: 2px !important;
}
.hpc-row.fail .hpc-text strong,
.gv-row.blocked .gv-label strong {
  color: var(--ink) !important;
}
/* The em-dash + description becomes a quiet caption */
.hpc-text, .gv-label {
  font-size: 12.5px !important;
  color: var(--muted) !important;
}
/* Remove the redundant Pass/Blocked pill — let the dot carry the signal */
.hpc-verdict, .gv-tag {
  display: none !important;
}
.gv-row .gv-label { color: var(--muted) !important; font-weight: 400 !important; }
.gv-row.blocked .gv-label[style] { color: var(--muted) !important; opacity: 1 !important; }

/* Footer — decisive single line, not a generic label/value pair */
.hpc-foot, .gv-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 22px !important;
  border-top: 1px solid rgba(10,37,64,.06) !important;
  background: rgba(10,37,64,.015) !important;
}
.hpcf-label, .gvf-l {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  letter-spacing: -.005em !important;
}
.hpcf-val {
  font-family: var(--sans) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.04em !important;
  margin-right: 6px !important;
}
.hpcf-note {
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
}
.gvf-r {
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--green) !important;
}

/* Dark-mode (hero on dark) variant — when hero-proof-card sits on the dark hero */
#hero .hero-proof-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 30px 60px -28px rgba(0,0,0,.5) !important;
}
#hero .hero-proof-card .hpc-bar { border-bottom-color: rgba(255,255,255,.08) !important; }
#hero .hero-proof-card .hpc-title { color: rgba(255,255,255,.6) !important; opacity: 1 !important; }
#hero .hero-proof-card .hpc-badge { color: rgba(255,255,255,.85) !important; }
#hero .hero-proof-card .hpc-row { border-bottom-color: rgba(255,255,255,.06) !important; }
#hero .hero-proof-card .hpc-row:hover { background: rgba(255,255,255,.03) !important; }
#hero .hero-proof-card .hpc-text { color: rgba(255,255,255,.55) !important; }
#hero .hero-proof-card .hpc-text strong { color: #fff !important; }
#hero .hero-proof-card .hpc-foot {
  background: rgba(255,255,255,.025) !important;
  border-top-color: rgba(255,255,255,.08) !important;
}
#hero .hero-proof-card .hpcf-label { color: rgba(255,255,255,.5) !important; }
#hero .hero-proof-card .hpcf-val   { color: #fff !important; }
#hero .hero-proof-card .hpcf-note  { color: rgba(255,255,255,.5) !important; }
#hero .hero-proof-card .hpc-ico {
  border-color: rgba(52,211,153,.55) !important;
  color: #34d399 !important;
}
#hero .hero-proof-card .hpc-ico::after { background: #34d399 !important; }
#hero .hero-proof-card .hpc-row.fail .hpc-ico { border-color: rgba(251,113,133,.55) !important; }
#hero .hero-proof-card .hpc-row.fail .hpc-ico::after { background: transparent !important; border: 1.5px solid #fb7185 !important; inset: 3px !important; }


/* ─────────────────────────────────────────────
   2. DIFF — Unified "split-screen story"
   Replaces the .diff-cols 2-column comparison
   with a single editorial panel.
   ───────────────────────────────────────────── */

.diff-cols { display: block !important; gap: 0 !important; }
.diff-cols > div { margin: 0 !important; }

/* hide all original column chrome — we'll re-render via .dx2 */
.dc-head, .dc-body { display: none !important; }

.dx2 {
  margin-top: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,253,254,1) 100%);
  border: 1px solid rgba(10,37,64,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 2px 6px rgba(10,37,64,.04),
    0 28px 64px -28px rgba(10,37,64,.18);
}
.dx2-head {
  display: grid;
  grid-template-columns: 90px 1fr 28px 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(10,37,64,.02);
  border-bottom: 1px solid rgba(10,37,64,.06);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.dx2-head-leg  { color: rgba(10,37,64,.42); }
.dx2-head-vec  { color: var(--indigo); }
.dx2-head-leg, .dx2-head-vec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dx2-head-leg::before, .dx2-head-vec::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
}
.dx2-head-vec::before { opacity: 1; }

.dx2-row {
  display: grid;
  grid-template-columns: 90px 1fr 28px 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(10,37,64,.05);
  transition: background .2s ease;
}
.dx2-row:last-child { border-bottom: none; }
.dx2-row:hover { background: rgba(79,70,229,.02); }

.dx2-axis {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

.dx2-leg, .dx2-vec {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -.008em;
}
.dx2-leg {
  color: rgba(10,37,64,.42);
  text-decoration: line-through;
  text-decoration-color: rgba(225,29,72,.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.dx2-leg-strong { font-weight: 500; }

.dx2-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--indigo);
  opacity: .55;
}
.dx2-arrow svg { width: 18px; height: 18px; }

.dx2-vec {
  color: var(--ink);
  font-weight: 500;
}
.dx2-vec strong {
  color: var(--indigo);
  font-weight: 600;
}

@media (max-width: 860px) {
  .dx2-head, .dx2-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 18px;
  }
  .dx2-arrow { display: none; }
  .dx2-axis { font-size: 10px; }
  .dx2-leg { font-size: 13.5px; }
  .dx2-vec { font-size: 13.5px; }
  .dx2-head-leg, .dx2-head-vec { display: none; }
}

/* Bottom strip — closing line */
.dx2-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: rgba(79,70,229,.04);
  border-top: 1px solid rgba(79,70,229,.1);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
}
.dx2-foot-tag {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--indigo);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.dx2-foot-tag::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79,70,229,.16);
}


/* ───────────── Qualification gate on process.html (.qg-*) ─────────── */
.qual-gate {
  padding: 4px 0 6px !important;
  background: var(--white) !important;
  border-radius: 12px !important;
}
.qg-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 22px 1fr auto !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 16px 22px !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(10,37,64,.05) !important;
  transition: background .2s ease !important;
}
.qg-row:last-of-type { border-bottom: none !important; }
.qg-row:hover { background: rgba(10,37,64,.015) !important; }
.qg-row.fail { background: transparent !important; }
.qg-row.fail::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--rose);
  opacity: .45;
  border-radius: 0 2px 2px 0;
}
.qg-icon {
  width: 18px !important; height: 18px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid rgba(5,150,105,.4) !important;
  color: transparent !important;
  font-size: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  position: relative !important;
}
.qg-icon::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--green);
}
.qg-row.fail .qg-icon { border-color: rgba(225,29,72,.45) !important; }
.qg-row.fail .qg-icon::after {
  background: transparent !important;
  border: 1.5px solid var(--rose);
  inset: 3px;
  opacity: .8;
}
.qg-label {
  flex: 1 !important;
  font-size: 13.5px !important;
  color: var(--muted) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: -.005em !important;
}
.qg-label strong {
  display: block !important;
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 2px !important;
}
.qg-verdict { display: none !important; }
.qg-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 22px !important;
  border-top: 1px solid rgba(10,37,64,.06) !important;
  background: rgba(10,37,64,.015) !important;
  margin-top: 4px !important;
}
.qgf-label {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
}
.qgf-val {
  font-family: var(--sans) !important;
  font-size: 18px !important; font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.04em !important;
  margin-right: 6px !important;
}
.qgf-note {
  font-size: 11.5px !important;
  color: var(--muted) !important;
}



/* ═══════════════════════════════════════════════════
   NCNP — Failure funnel panel (replaces .pattern-cards)
═══════════════════════════════════════════════════ */
.failure-panel {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid rgba(10,37,64,.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 2px rgba(10,37,64,.04),
    0 22px 50px -22px rgba(10,37,64,.16);
}
.fp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(10,37,64,.06);
}
.fp-tag {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .7;
}
.fp-meta {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: -.01em;
}
.fp-stages {
  padding: 8px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fp-stage {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(10,37,64,.05);
  position: relative;
}
.fp-stage:last-of-type { border-bottom: none; }
.fp-stage-bar {
  position: relative;
  height: 8px;
  width: var(--w);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(var(--c), .55) 0%, rgba(var(--c), .85) 100%);
  margin-bottom: 8px;
  transition: width 1.1s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 1px 2px rgba(var(--c), .25);
}
.fp-stage-bar::after {
  content: '';
  position: absolute;
  right: 0; top: -3px; bottom: -3px;
  width: 2px;
  border-radius: 2px;
  background: rgba(var(--c), 1);
  opacity: .8;
}
.fp-stage-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.fp-stage-num {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fp-stage-fail .fp-stage-num { color: var(--rose); }
.fp-stage-lbl {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
}
.fp-stage-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45;
  letter-spacing: -.005em;
  max-width: 460px;
}
.fp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  background: rgba(225,29,72,.04);
  border-top: 1px solid rgba(225,29,72,.12);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: -.005em;
}
.fp-foot-l {
  font-weight: 500;
  color: var(--ink);
}
.fp-foot-r {
  font-weight: 500;
  color: var(--muted);
}
.fp-foot-r strong {
  color: var(--rose);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Bridge copy on the left side of #why-retainers */
.wr-bridge {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid rgba(10,37,64,.06);
}

@media (max-width: 980px) {
  .fp-stage { padding: 12px 0; }
  .fp-stage-num { font-size: 20px; }
  .fp-stage-note { max-width: none; }
}


/* ═══════════════════════════════════════════════════
   NCNP — .hcard-list polish (momentum section)
   Trim visual noise; commit to single hairline rows.
═══════════════════════════════════════════════════ */
.hcard-list {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
  border: 1px solid rgba(10,37,64,.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 2px rgba(10,37,64,.04),
    0 22px 50px -22px rgba(10,37,64,.16) !important;
  padding: 0 !important;
  display: block !important;
}
.hcard {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 18px 22px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(10,37,64,.05) !important;
  border-radius: 0 !important;
  transition: background .2s ease !important;
  position: relative !important;
  margin: 0 !important;
}
.hcard:last-of-type { border-bottom: none !important; }
.hcard:hover { background: rgba(10,37,64,.015) !important; }
.hcard.bad { background: transparent !important; }
.hcard.bad::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--rose);
  opacity: .35;
  border-radius: 0 2px 2px 0;
}
.hcard-mark {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid rgba(5,150,105,.4) !important;
  color: transparent !important;
  font-size: 0 !important;
  position: relative !important;
  margin-top: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.hcard-mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--green);
}
.hcard.bad .hcard-mark {
  background: transparent !important;
  border: 1.5px solid rgba(225,29,72,.45) !important;
  opacity: 1 !important;
}
.hcard.bad .hcard-mark::after {
  background: transparent !important;
  border: 1.5px solid var(--rose);
  inset: 3px;
}
.hcard-content { flex: 1; }
.hcard-title {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}
.hcard.bad .hcard-title {
  color: var(--muted) !important;
}
.hcard.bad .hcard-title[style] {
  color: var(--muted) !important;
}
.hcard-desc {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  letter-spacing: -.005em !important;
  max-width: 540px !important;
}



/* ═══════════════════════════════════════════════════
   DX2 — compact variant (for inline placements
   like process step 04)
═══════════════════════════════════════════════════ */
.dx2-compact { margin-top: 14px; box-shadow: var(--e1); }
.dx2-compact .dx2-head { padding: 12px 18px; font-size: 9.5px; }
.dx2-compact .dx2-row  { padding: 12px 18px; grid-template-columns: 88px 1fr 28px 1fr; gap: 14px; }
.dx2-compact .dx2-axis { font-size: 10px; }
.dx2-compact .dx2-leg, .dx2-compact .dx2-vec { font-size: 12.5px; line-height: 1.45; }


/* ═══════════════════════════════════════════════════
   ABOUT — .mp-row (model panel) → editorial rows
   Drop the SVG-icon-tile pattern; use a tiny numeric
   index + clean typography. Distinct from the cards.
═══════════════════════════════════════════════════ */
.model-panel {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
  border: 1px solid rgba(10,37,64,.08) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 2px rgba(10,37,64,.04),
    0 22px 50px -22px rgba(10,37,64,.16) !important;
  overflow: hidden !important;
}
.mp-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 22px !important;
  border-bottom: 1px solid rgba(10,37,64,.06) !important;
  background: transparent !important;
}
.mp-title {
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  opacity: .7 !important;
}
.mp-badge {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--green) !important;
  background: transparent !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.mp-badge .pip { display: none !important; }
.mp-badge::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(5,150,105,.14);
}
.mp-body { padding: 4px 0 !important; }
.mp-row {
  display: grid !important;
  grid-template-columns: 30px 1fr !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid rgba(10,37,64,.05) !important;
  position: relative !important;
  transition: background .2s ease !important;
}
.mp-row:last-child { border-bottom: none !important; }
.mp-row:hover { background: rgba(79,70,229,.025) !important; }
.mp-icon {
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border-radius: 0 !important;
  position: relative !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--indigo) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.mp-icon svg { display: none !important; }
.mp-row:nth-child(1) .mp-icon::before { content: '01'; }
.mp-row:nth-child(2) .mp-icon::before { content: '02'; }
.mp-row:nth-child(3) .mp-icon::before { content: '03'; }
.mp-row:nth-child(4) .mp-icon::before { content: '04'; }
.mp-content { flex: 1 !important; }
.mp-label {
  font-family: var(--sans) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
  margin-bottom: 4px !important;
}
.mp-desc {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  letter-spacing: -.005em !important;
  max-width: 500px !important;
}
.mp-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 22px !important;
  border-top: 1px solid rgba(10,37,64,.06) !important;
  background: rgba(10,37,64,.015) !important;
}
.mpf-l {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}
.mpf-r {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  color: var(--ink) !important;
}


/* ═══════════════════════════════════════════════════
   NCNP — .acc-card (accountability grid)
   Make these editorial pull-quote cards, not icon cards
═══════════════════════════════════════════════════ */
.accountability-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
.acc-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
  border: 1px solid rgba(10,37,64,.08) !important;
  border-radius: 14px !important;
  padding: 22px 24px 20px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 2px rgba(10,37,64,.04) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all .25s cubic-bezier(.16,1,.3,1) !important;
}
.acc-card:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 4px 12px rgba(10,37,64,.06),
    0 16px 32px -12px rgba(10,37,64,.14) !important;
}
.acc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,70,229,.35), transparent);
}
.acc-icon {
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  margin-bottom: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.acc-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--indigo) !important;
  stroke-width: 1.4 !important;
  opacity: .85 !important;
}
.acc-title {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
}
.acc-body {
  font-size: 13.5px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  letter-spacing: -.005em !important;
}


/* ═══════════════════════════════════════════════════
   NCNP — .infra-card (infrastructure grid)
   Distinct from acc-card via large numerical lead-in
═══════════════════════════════════════════════════ */
.infra-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
.infra-card {
  background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%) !important;
  border: 1px solid rgba(10,37,64,.07) !important;
  border-radius: 14px !important;
  padding: 26px 22px 22px !important;
  position: relative !important;
  transition: all .25s cubic-bezier(.16,1,.3,1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(10,37,64,.03) !important;
}
.infra-card:hover {
  border-color: rgba(79,70,229,.22) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 8px 20px -8px rgba(79,70,229,.18) !important;
}
.infra-n {
  font-family: var(--sans) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -.06em !important;
  color: rgba(79,70,229,.18) !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
  font-variant-numeric: tabular-nums !important;
}
.infra-title {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
  color: var(--ink) !important;
  margin-bottom: 7px !important;
}
.infra-body {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  letter-spacing: -.005em !important;
}
@media (max-width: 980px) {
  .infra-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .infra-grid { grid-template-columns: 1fr; }
  .accountability-grid { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════
   ABOUT — .principle (philosophy stack)
   Serif-leaning editorial style; very different visually
═══════════════════════════════════════════════════ */
.principle-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
  border: 1px solid rgba(10,37,64,.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 2px rgba(10,37,64,.04),
    0 22px 50px -22px rgba(10,37,64,.16) !important;
}
.principle {
  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 0 16px !important;
  padding: 28px 28px !important;
  border-bottom: 1px solid rgba(10,37,64,.06) !important;
  background: transparent !important;
  position: relative !important;
  transition: background .25s ease !important;
}
.principle:last-child { border-bottom: none !important; }
.principle:hover { background: rgba(79,70,229,.02) !important; }
.principle-n {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--indigo) !important;
  opacity: .7 !important;
  align-self: start !important;
  margin-top: 4px !important;
}
.principle-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-family: var(--sans) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
  color: var(--ink) !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}
.principle-body {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 14px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  letter-spacing: -.005em !important;
  max-width: 580px !important;
  font-weight: 400 !important;
}
@media (max-width: 720px) {
  .principle { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; padding: 22px !important; }
  .principle-n { grid-column: 1 !important; grid-row: 1 !important; margin-bottom: 8px !important; }
  .principle-title { grid-column: 1 !important; grid-row: 2 !important; }
  .principle-body { grid-column: 1 !important; grid-row: 3 !important; }
}


/* ═══════════════════════════════════════════════════
   INDEX — Testimonials .tcard polish
   Drop the colored AK/SR/JM avatars; use editorial author block
═══════════════════════════════════════════════════ */
.tcard {
  background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%) !important;
  border: 1px solid rgba(10,37,64,.07) !important;
  padding: 30px 28px 26px !important;
  position: relative !important;
}
.tcard::before {
  content: '“';
  position: absolute;
  top: 12px; left: 26px;
  font-family: 'Georgia', serif;
  font-size: 56px;
  line-height: 1;
  color: rgba(79,70,229,.18);
  font-weight: 700;
}
.tc-stars { display: none !important; }
.tc-quote {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -.005em !important;
  margin: 30px 0 22px !important;
  padding-top: 8px !important;
}
.tc-author {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(10,37,64,.06) !important;
}
.tc-av { display: none !important; }
.tc-name {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  color: var(--ink) !important;
}
.tc-role {
  font-size: 11.5px !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
  letter-spacing: -.005em !important;
}

/* Drop the AK/SR/JM tc-av usage in operator-reality quote too */
#operator-reality .tc-av { display: inline-flex !important; /* keep here, it's a single quote */ }



/* ═══════════════════════════════════════════════════
   CONTACT FORM — textarea + Andrew's direct contact
═══════════════════════════════════════════════════ */
.pf-textarea {
  resize: vertical !important;
  min-height: 92px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  line-height: 1.5 !important;
  padding: 11px 13px !important;
}
.pf-direct {
  margin-top: 18px;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(79,70,229,.04) 0%, rgba(79,70,229,.015) 100%);
  border: 1px solid rgba(79,70,229,.14);
  border-radius: 10px;
}
.pf-direct-lbl {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--indigo);
  opacity: .8;
  margin-bottom: 9px;
}
.pf-direct-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
}
.pf-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s;
  letter-spacing: -.005em;
}
.pf-direct-link:hover { color: var(--indigo); }
.pf-direct-link svg { color: var(--indigo); opacity: .85; flex-shrink: 0; }
.pf-direct-name {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: -.01em;
  padding-top: 9px;
  border-top: 1px solid rgba(79,70,229,.1);
}


/* ═══════════════════════════════════════════════════
   INLINE CTA BAND — placed between sections
═══════════════════════════════════════════════════ */
.inline-cta-wrap {
  padding: 24px 0;
  position: relative;
}
.inline-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 26px 30px 26px 30px;
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(79,70,229,.06) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid rgba(79,70,229,.14);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 2px rgba(10,37,64,.04),
    0 16px 36px -20px rgba(79,70,229,.18);
  position: relative;
  overflow: hidden;
}
.inline-cta::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--indigo) 0%, #818cf8 100%);
  box-shadow: 0 0 14px rgba(79,70,229,.5);
}
.inline-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 10px;
}
.inline-cta-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(5,150,105,.16);
  animation: inline-cta-pip 1.6s ease-in-out infinite;
}
@keyframes inline-cta-pip {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 3px rgba(5,150,105,.16); }
  50%      { transform: scale(.78); box-shadow: 0 0 0 6px rgba(5,150,105,.02); }
}
.inline-cta-h {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 4px;
}
.inline-cta-sub {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  letter-spacing: -.005em;
  max-width: 560px;
}
.inline-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.inline-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--ink);
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(10,37,64,.2);
  transition: all .25s cubic-bezier(.16,1,.3,1);
  white-space: nowrap;
}
.inline-cta-btn:hover {
  background: #0f3460;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px rgba(10,37,64,.28);
}
.inline-cta-btn svg { transition: transform .25s cubic-bezier(.34,1.4,.55,1); }
.inline-cta-btn:hover svg { transform: translateX(3px); }

.inline-cta-direct {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: -.005em;
}
.inline-cta-direct a {
  color: var(--indigo);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
}
.inline-cta-direct a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .inline-cta {
    grid-template-columns: 1fr;
    padding: 22px 24px;
    gap: 18px;
  }
  .inline-cta-actions {
    align-items: stretch;
  }
  .inline-cta-btn { justify-content: center; }
  .inline-cta-direct { text-align: center; }
}


/* ═══════════════════════════════════════════════════
   FLOATING CTA — bottom-right pill, appears after hero
═══════════════════════════════════════════════════ */
.floating-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 11px 14px;
  background: linear-gradient(180deg, #0e2d50 0%, #0a2540 100%);
  color: white;
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 6px 20px rgba(10,37,64,.32),
    0 16px 32px -10px rgba(10,37,64,.28);
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  transform: translateY(20px) scale(.95);
  pointer-events: none;
  transition:
    opacity .4s cubic-bezier(.16,1,.3,1),
    transform .4s cubic-bezier(.16,1,.3,1),
    background .25s ease,
    box-shadow .25s ease;
}
.floating-cta.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.floating-cta:hover {
  background: linear-gradient(180deg, #133668 0%, #0f3460 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 28px rgba(10,37,64,.4),
    0 20px 40px -12px rgba(10,37,64,.34);
}
.floating-cta svg { opacity: .85; transition: transform .25s cubic-bezier(.34,1.4,.55,1); }
.floating-cta:hover svg { transform: translateX(3px); }
.floating-cta-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52,211,153,.2);
  animation: float-dot 1.6s ease-in-out infinite;
}
@keyframes float-dot {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 3px rgba(52,211,153,.2); }
  50%      { transform: scale(.78); box-shadow: 0 0 0 7px rgba(52,211,153,.02); }
}
.floating-cta-text { letter-spacing: -.005em; }

@media (max-width: 520px) {
  .floating-cta { bottom: 16px; right: 16px; padding: 9px 14px 9px 12px; font-size: 12.5px; }
}