body {
  font-family: system-ui, sans-serif;
  margin: 0;
  background: #0f172a;
  color: #e2e8f0;
}

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

/* ── Page nav ── */
.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.page-select {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

.page-select:hover {
  border-color: #60a5fa;
}

.page-select:focus {
  outline: none;
  border-color: #60a5fa;
}

/* ── Hero ── */
.hero {
  margin-bottom: 28px;
}

.hero-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 10px;
}

h1 { margin: 0 0 8px; font-size: 2rem; }

.hero-sub {
  color: #94a3b8;
  margin: 0 0 14px;
  max-width: 680px;
  line-height: 1.6;
}

.credibility {
  background: #1e293b;
  border-left: 3px solid #3b82f6;
  padding: 10px 16px;
  border-radius: 0 8px 8px 0;
  color: #94a3b8;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

.credibility strong { color: #e2e8f0; }

/* ── Tier cards ── */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

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

.tier-card {
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid #334155;
  background: #1e293b;
}

.tier-label {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.tier-mode {
  font-size: 0.75rem;
  font-family: monospace;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 10px;
}

.tier-card p { color: #94a3b8; font-size: 0.875rem; margin: 0; line-height: 1.5; }

.tier-price { font-weight: 700; font-size: 0.9rem; color: #e2e8f0; margin-bottom: 8px; }

.tier-feature { color: #4ade80 !important; font-size: 0.78rem !important; margin-top: 8px !important; line-height: 1.4 !important; }

.tier-core   { border-color: #166534; }
.tier-core   .tier-label { color: #4ade80; }
.tier-core   .tier-mode  { background: #14532d; color: #86efac; }

.tier-pro    { border-color: #1d4ed8; }
.tier-pro    .tier-label { color: #60a5fa; }
.tier-pro    .tier-mode  { background: #1e3a8a; color: #93c5fd; }

.tier-enterprise { border-color: #7c3aed; }
.tier-enterprise .tier-label { color: #a78bfa; }
.tier-enterprise .tier-mode  { background: #4c1d95; color: #c4b5fd; }

.tier-private { border-color: #db2777; }
.tier-private .tier-label { color: #f472b6; }
.tier-private .tier-mode  { background: #831843; color: #f9a8d4; }

.tier-core-pro { border-color: #166534; }
.tier-core-pro .tier-label { color: #4ade80; }

/* ── Generic card ── */
.card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.card h2, .card h3 { margin-top: 0; }

.hidden { display: none; }

.hint {
  color:rgb(107, 116, 130);
  font-size: 0.875rem;
  display: block;
  margin-top: 2px;
}

/* ── Module nav ── */
.module-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 600px) { .module-nav { grid-template-columns: 1fr; } }

.module-link {
  display: block;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid #334155;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.module-link:hover { background: #1e293b; }
.module-link.tier-pro      { border-color: #1d4ed8; }
.module-link.tier-pro:hover { background: #1e3a8a1a; }
.module-link.tier-enterprise      { border-color: #7c3aed; }
.module-link.tier-enterprise:hover { background: #4c1d951a; }

.ml-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 6px; }
.module-link.tier-pro .ml-badge       { color: #60a5fa; }
.module-link.tier-enterprise .ml-badge { color: #a78bfa; }
.ml-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.ml-desc  { font-size: 0.8rem; color: #64748b; }

/* ── Workload list ── */
.workload-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.workload-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px 16px;
  gap: 12px;
}

/* ── Buttons ── */
button {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: #3b82f6;
  color: white;
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}
button:hover { background: #2563eb; }
form button { margin-top: 14px; }
input[type="file"] { margin-top: 8px; color: #cbd5e1; }

/* ── Recommendation ── */
.rec-tier {
  display: inline-flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}

.rec-tier.tier-core        { background: #14532d33; border-color: #166534; }
.rec-tier.tier-pro         { background: #1e3a8a33; border-color: #1d4ed8; }
.rec-tier.tier-enterprise  { background: #4c1d9533; border-color: #7c3aed; }
.rec-tier.tier-private     { background: #83184333; border-color: #db2777; }
.rec-tier.tier-core-pro    { background: #14532d33; border-color: #166534; }

.rec-tier-label { font-weight: 700; font-size: 1.1rem; }
.rec-tier-mode  { font-family: monospace; font-size: 0.8rem; color: #94a3b8; margin-top: 2px; }

.rec-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.stat { min-width: 120px; }
.stat-label { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.stat-value { font-size: 1.4rem; font-weight: 700; }

.entropy-bar {
  height: 4px;
  background: #334155;
  border-radius: 2px;
  margin-top: 6px;
  width: 160px;
}
.entropy-fill { height: 100%; border-radius: 2px; transition: width 0.4s; }

.rec-reason {
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0 0 10px;
}

.rec-disclaimer {
  color: #475569;
  font-size: 0.8rem;
  border-top: 1px solid #334155;
  padding-top: 10px;
  margin: 0;
  line-height: 1.5;
}

/* ── Table ── */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 0.875rem;
}

th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #334155;
  color: #94a3b8;
  font-weight: 600;
}

td { padding: 9px 10px; border-bottom: 1px solid #1e293b; }
tr:hover td { background: #1e293b; }

.ratio-good { color: #4ade80; font-weight: 700; }
.ratio-ok   { color: #facc15; }

.mode-badge {
  font-size: 0.72rem;
  font-family: monospace;
  padding: 2px 7px;
  border-radius: 6px;
}
.mode-platform_optimized { background: #14532d; color: #86efac; }
.mode-tenant_optimized   { background: #1e3a8a; color: #93c5fd; }
.mode-private_secure     { background: #4c1d95; color: #c4b5fd; }

/* ── Subscribe CTA ── */
.subscribe-cta {
  border-color: #3b82f6;
}

.subscribe-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 900px) { .subscribe-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .subscribe-plans { grid-template-columns: 1fr; } }

.subscribe-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid #334155;
  background: #0f172a;
  color: inherit;
  transition: transform 0.15s, border-color 0.15s;
}
.subscribe-plan:hover { transform: translateY(-2px); }

.subscribe-plan.tier-core        { border-color: #166534; }
.subscribe-plan.tier-pro         { border-color: #1d4ed8; }
.subscribe-plan.tier-enterprise  { border-color: #7c3aed; }
.subscribe-plan.tier-private     { border-color: #db2777; }
.subscribe-plan.recommended      { border-width: 2px; box-shadow: 0 0 0 1px currentColor; }

.recommended-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: #3b82f6;
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 99px;
}

.sp-label { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.sp-note  { color: #64748b; font-size: 0.75rem; margin-bottom: 8px; line-height: 1.4; }
.sp-price { color: #94a3b8; font-size: 0.85rem; margin-bottom: 12px; }
.sp-feature { color: #4ade80; font-size: 0.75rem; margin: 0 0 12px 0; line-height: 1.4; }
.sp-seats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  color: #94a3b8;
  margin-bottom: 12px;
}
.sp-seats-input {
  width: 64px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  padding: 4px 8px;
  font-size: 0.85rem;
}
.sp-action {
  margin-top: auto;
  background: none;
  border: none;
  padding: 0;
  color: #60a5fa;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
}
.sp-action:hover { background: none; color: #93c5fd; }

/* ── Roadmap ── */
.roadmap {
  margin-top: 36px;
  border-top: 1px solid #334155;
  padding-top: 28px;
}

.roadmap h3 { margin-top: 0; color: #94a3b8; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

.roadmap-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.roadmap-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #334155;
}

.roadmap-step.done   { background: #14532d1a; border-color: #166534; }
.roadmap-step.future { background: #1e293b; }

.step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.done   .step-num { background: #166534; color: #86efac; }
.future .step-num { background: #334155; color: #94a3b8; }

.step-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 99px;
  margin-left: 8px;
  font-weight: 600;
}
.step-tag.live { background: #14532d; color: #4ade80; }
.step-tag.soon { background: #334155; color: #94a3b8; }


/* =========================================================
   CortexFS embedded showroom readability
   ========================================================= */

   html,
   body {
     color: #f8fafc;
     background: #050b18;
   }
   
   body,
   .wrap,
   .card,
   .tier-card,
   .module-link,
   .roadmap,
   .workload-item,
   .recommendation,
   #recommendation,
   #results,
   #subscribeCta {
     color: #f8fafc;
   }
   
   h1,
   h2,
   h3,
   h4,
   strong,
   label {
     color: #ffffff;
   }
   
   p,
   .hero-sub,
   .credibility,
   .hint,
   .ml-desc,
   .tier-card p,
   .roadmap-step,
   .workload-item {
     color: #cbd5e1;
   }
   
   .tier-label,
   .ml-title,
   .stat-value,
   .rec-tier-label {
     color: #ffffff;
   }
   
   .tier-mode,
   .sp-note,
   .rec-tier-mode,
   .stat-label {
     color: #94a3b8;
   }
   
   select,
   input,
   textarea {
     color: #f8fafc;
     background: #0f172a;
     border-color: #334155;
   }
   
   select option {
     color: #f8fafc;
     background: #0f172a;
   }
   
   a {
     color: inherit;
   }
   
   button {
     color: #ffffff;
   }


   @'

   /* ==========================================================
      CortexFS Showroom Embedded Readability Override
      ========================================================== */
   
   html,
   body {
       background: #050b18 !important;
       color: #f8fafc !important;
   }
   
   body *,
   .wrap *,
   .card *,
   .tier-card *,
   .module-link *,
   .roadmap *,
   .workload-item *,
   #recommendation *,
   #results *,
   #subscribeCta * {
       color: inherit;
   }
   
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   strong,
   label,
   .tier-label,
   .ml-title,
   .rec-tier-label,
   .stat-value {
       color: #ffffff !important;
   }
   
   p,
   span,
   .hero-sub,
   .credibility,
   .hint,
   .ml-desc,
   .tier-card p,
   .roadmap-step,
   .workload-item {
       color: #cbd5e1 !important;
   }
   
   .tier-mode,
   .sp-note,
   .rec-tier-mode,
   .stat-label {
       color: #94a3b8 !important;
   }
   
   a {
       color: #e2e8f0;
   }
   
   a:hover {
       color: #4ade80;
   }
   
   input,
   select,
   textarea {
       background: #0f172a !important;
       color: #f8fafc !important;
       border-color: #334155 !important;
   }
   
   select option {
       background: #0f172a !important;
       color: #f8fafc !important;
   }
   
   button {
       color: #ffffff !important;
   }
   
   '@ | Add-Content `
       C:\Users\Adedeji\cortexfs-standalone\backend\web\styles.css `
       -Encoding UTF8