/* ============================================================
   KEEDIAN DESIGN SYSTEM — Shared Stylesheet
   Productization microsite · v5
   Updated: 2026-05 — aligned to Keedian platform brand (Funnel Sans)

   Source of truth: SLB_Keedian_Branding_Brand_Guidelines.pdf (2025).
   Authoritative narrative + audit live in context/brand-strategy.md.
   Where this stylesheet diverges from the Brand Guide, the Brand Guide
   wins — open a design/ PR to align CSS rather than amending the Guide.
   ============================================================ */

/* ============ 1. PLATFORM COLORS ============
   Active tokens used in the Keedian platform UI.
   These are the source of truth for this microsite.
   =========================================== */
:root {
  --kd-primary:       #000000;   /* Principal buttons & text */
  --kd-primary-hover: #3372FF;   /* Hover state for buttons / links */
  --kd-blue:          #3372FF;   /* Links, accents, interactive */
  --kd-blue-deep:     #002475;   /* Deep blue — headings, dark accents */
  --kd-blue-light:    #CFDEFF;   /* Active / selected background (Haze) */
  --kd-blue-soft:     #E8EEFF;   /* Lightest tint — subtle hover bg */
  --kd-navy:          #002475;   /* Dark headings, footer bg */
  --kd-ink:           #000000;   /* Body text primary */
  --kd-graphite:      #374151;   /* Body text secondary */
  --kd-slate:         #6B7280;   /* Muted text, labels */
  --kd-mute:          #9CA3AF;   /* Placeholders, decorative */
  --kd-line:          #E5E7EB;   /* Borders, dividers */
  --kd-line-soft:     #F2F2F2;   /* Soft background (Gris) */
  --kd-paper:         #FFFFFF;   /* Card backgrounds */
  --kd-white:         #FFFFFF;
  --kd-border-accent: #B89CF9;   /* Special dividers / borders when needed */

  /* Brand Guide primary accent. Per the 2025 Brand Guide, Blue Lavender
     is the principal brand accent for card backgrounds, CTAs, and
     highlights for critical elements. New design work should reach for
     --kd-accent rather than --kd-blue-light when expressing the primary
     accent role. Existing components using --kd-blue-light (Haze) for
     selected / hover backgrounds remain valid as a supporting tint. */
  --kd-accent:        #9FBAFF;   /* Blue Lavender — Brand Guide primary accent */
}

/* ============ 2. BRAND BOOK COLORS — 2025 ============
   Reference palette from the Keedian 2025 brand book.
   These are NOT used as direct UI tokens but are available
   for new sections, illustrations, and future expansion.
   ====================================================== */
:root {
  /* Colores Principales */
  --brand-white:          #FFFFFF;
  --brand-black:          #000000;
  --brand-blue-lavender:  #9FBAFF;  /* Blue Lavender — primary brand accent */

  /* Colores Secundarios */
  --brand-haze:           #CFDEFF;  /* Haze — light blue tint */
  --brand-azul-1:         #3372FF;  /* Azul 1 — energy, action */
  --brand-azul-2:         #002475;  /* Azul 2 — depth */
  --brand-gris:           #F2F2F2;  /* Gris — subtle backgrounds */

  /* Colores Terciarios — Verdes
     (Per Brand Guide 2025. Verde Claro and Verde Brillante 2 hex values
     corrected to match the Brand Guide PDF in this PR.) */
  --brand-verde-claro:    #AEFFE8;
  --brand-verde-claro-2:  #D8FEF1;
  --brand-verde-brillante:#2CFFC8;
  --brand-verde-brillante-2:#89EFC6;
  --brand-verde-oscuro:   #00543E;
  --brand-verde-oscuro-2: #769488;

  /* Colores Terciarios — Violetas */
  --brand-violeta:        #945CFF;
  --brand-violeta-2:      #B89CF9;
}

/* ============ 3. DASHBOARD / CHART COLORS ============
   Reserved for data visualizations and metric charts.
   Use in order; mix sparingly.

   Derived from the Brand Guide 2025 tertiary palette, which is
   designated for "the visualization of complex data and segmentation
   in metrics (charts and dashboards)." Slots 1–6 are the six Brand
   Guide tertiaries in their canonical order. Slots 7–10 extend the
   palette using complementary brand primary / secondary colors when
   a chart needs more than six series.
   ==================================================== */
:root {
  --chart-1:  #2CFFC8;  /* Verde Brillante */
  --chart-2:  #89EFC6;  /* Verde Brillante 2 */
  --chart-3:  #00543E;  /* Verde Oscuro */
  --chart-4:  #769488;  /* Verde Oscuro 2 */
  --chart-5:  #945CFF;  /* Violeta */
  --chart-6:  #B89CF9;  /* Violeta 2 */
  --chart-7:  #3372FF;  /* Azul 1 — complementary primary */
  --chart-8:  #002475;  /* Azul 2 — complementary primary */
  --chart-9:  #9FBAFF;  /* Blue Lavender — complementary primary */
  --chart-10: #CFDEFF;  /* Haze — complementary secondary */
}

/* ============ 4. TIER COLORS ============
   Essential / Managed / Optimized
   Internal names: good / better / best

   Platform extension to the Brand Guide. The Brand Guide does not yet
   define a tier-accent palette; these values are documented in
   CLAUDE.md and in context/brand-strategy.md (Part III header). Used
   across every product page for the Essential / Managed / Optimized
   tier headers, badges, and accent borders.
   ======================================= */
:root {
  --tier-good:       #047857;
  --tier-good-bg:    #ECFDF5;
  --tier-better:     #1E40AF;
  --tier-better-bg:  #EFF6FF;
  --tier-best:       #6D28D9;
  --tier-best-bg:    #F5F3FF;
}

/* ============ 5. DATA ENABLER COLORS ============
   Platform extension to the Brand Guide. Used on Data Enabler model
   badges (A / B / C) across product pages. The Brand Guide does not
   yet define this palette; documented in context/brand-strategy.md. */
:root {
  --de-a:    #B45309;
  --de-a-bg: #FFFBEB;
  --de-b:    #1E40AF;
  --de-b-bg: #EFF6FF;
  --de-c:    #6D28D9;
  --de-c-bg: #F5F3FF;
}

/* ============ 6. TYPOGRAPHY ============ */
:root {
  --display: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --body:    'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono:    'Roboto Mono', 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
}

/* ============ 7. LAYOUT ============ */
:root {
  --maxw:   1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 8px;
  --radius-sm: 6px;
}

/* ============ 8. RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ 9. BASE ============ */
body {
  font-family: var(--body);
  color: var(--kd-ink);
  background: var(--kd-paper);
  line-height: 1.55;
  font-size: 16px;
}

/* ============ 10. TOP NAV ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--kd-line);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--kd-ink);
}
.brand-mark {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--kd-ink);
}
.brand-logo {
  height: 18px;
  width: auto;
  display: block;
}
.brand-divider {
  width: 1px;
  height: 18px;
  background: var(--kd-line);
}
.brand-context {
  font-size: 0.78rem;
  color: var(--kd-slate);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}
.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.nav-links a {
  font-family: var(--mono);
  color: var(--kd-graphite);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--kd-blue); }
.nav-cta {
  padding: 0.5rem 1.25rem;
  background: var(--kd-primary);
  color: white !important;
  border-radius: var(--radius);
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--kd-primary-hover) !important; color: white !important; }
@media (max-width: 800px) { .nav-links a:not(.nav-cta) { display: none; } }
.topbar-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--kd-slate); letter-spacing: 0.08em; }

/* ============ 11. HERO ============ */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(2rem, 5vw, 4rem);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } }

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--kd-blue);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--kd-blue);
}

.hero-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--kd-ink);
  margin-bottom: 1.5rem;
}
.hero-title em {
  font-style: normal;
  font-weight: 300;
  color: var(--kd-blue);
}

.hero-lead {
  font-size: 1.15rem;
  color: var(--kd-graphite);
  line-height: 1.55;
  max-width: 38rem;
}

.hero-meta {
  border-left: 1px solid #B89CF9;
  padding-left: 1.5rem;
  margin-top: 1rem;
}
.hero-meta-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
.hero-meta-label {
  font-family: var(--mono);
  color: var(--kd-slate);
  min-width: 7rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 2px;
}
.hero-meta-value { color: var(--kd-graphite); flex: 1; }

/* ============ 12. SECTIONS ============ */
section { scroll-margin-top: 80px; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}

.rule { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.rule-line { height: 1px; background: var(--kd-line); }

.section-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--kd-blue);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.section-eyebrow .num {
  font-weight: 500;
  color: var(--kd-ink);
  background: var(--kd-blue-light);
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-sm);
}
.section-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--kd-ink);
  margin-bottom: 1rem;
  max-width: 50rem;
}
.section-title em { font-style: normal; color: var(--kd-blue); font-weight: 300; }
.section-lead {
  color: var(--kd-graphite);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 50rem;
  margin-bottom: 2.5rem;
}

/* ============ 13. PRODUCTS GRID ============ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--kd-line);
  border: 1px solid var(--kd-line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 900px) { .products-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .products-grid { grid-template-columns: 1fr; } }

.product-card {
  background: var(--kd-white);
  padding: 1.75rem 1.5rem;
  position: relative;
  transition: background 0.2s;
}
.product-card.active { background: var(--kd-blue-soft); }
.product-card.active::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kd-blue);
}
.product-card .badge {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--kd-blue);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: inline-block;
}
.product-card .badge.placeholder { color: var(--kd-mute); }
.product-card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--kd-ink);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.product-card p {
  font-size: 0.85rem;
  color: var(--kd-slate);
  line-height: 1.55;
  margin-bottom: 0.5rem;
}
.product-card p strong {
  color: var(--kd-graphite);
  font-weight: 500;
}

/* ============ 14. TIERS COMPARISON ============ */
.tiers-shell {
  margin-top: 2rem;
  border: 1px solid var(--kd-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: white;
}

.tiers-table {
  display: grid;
  grid-template-columns: 220px repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .tiers-shell { overflow-x: auto; }
  .tiers-table { min-width: 980px; }
}

/* Header row */
.tier-header {
  padding: 1.5rem 1.25rem;
  background: var(--kd-ink);
  color: white;
  font-family: var(--body);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.tier-header:last-child { border-right: none; }
.tier-header.label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--mono);
  display: flex;
  align-items: center;
}
.tier-header .tier-name {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.2rem;
}
.tier-header .tier-tagline {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  font-weight: 400;
}
.tier-header.good   { background: linear-gradient(180deg, #065F46 0%, #047857 100%); }
.tier-header.better { background: linear-gradient(180deg, #1E3A8A 0%, #1E40AF 100%); }
.tier-header.best   { background: linear-gradient(180deg, #5B21B6 0%, #6D28D9 100%); }

/* Row label */
.row-label {
  padding: 1.25rem;
  background: var(--kd-line-soft);
  border-top: 1px solid var(--kd-line);
  border-right: 1px solid var(--kd-line);
}
.row-label .label-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--kd-ink);
  margin-bottom: 0.3rem;
  letter-spacing: -0.005em;
}
.row-label .label-sub {
  font-size: 0.72rem;
  color: var(--kd-slate);
  font-style: italic;
  line-height: 1.45;
}

/* Tier cell */
.tier-cell {
  padding: 1.25rem;
  border-top: 1px solid var(--kd-line);
  border-right: 1px solid var(--kd-line);
  font-size: 0.85rem;
  line-height: 1.55;
}
.tier-cell:last-child { border-right: none; }
.tier-cell.good   { background: #F7FCF9; }
.tier-cell.better { background: #F8FAFE; }
.tier-cell.best   { background: #FAF8FE; }

.tier-cell .promise {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--kd-ink);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.tier-cell ul { list-style: none; }
.tier-cell ul li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.45rem;
  color: var(--kd-graphite);
}
.tier-cell ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--kd-mute);
  font-weight: 400;
}
.tier-cell ul li strong { color: var(--kd-ink); font-weight: 600; }

.tier-cell .submodel {
  margin-top: 0.85rem;
  margin-bottom: 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.tier-cell .submodel:first-child { margin-top: 0; }
.submodel.de-a { color: var(--de-a); }
.submodel.de-b { color: var(--de-b); }
.submodel.de-c { color: var(--de-c); }

.tier-cell .pricing-block {
  background: white;
  border: 1px solid var(--kd-line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  margin-top: 0.7rem;
}
.pricing-block.first { margin-top: 0; }
.pricing-block .label {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.pricing-block.de-a .label { color: var(--de-a); }
.pricing-block.de-b .label { color: var(--de-b); }
.pricing-block.de-c .label { color: var(--de-c); }
.pricing-block ul li { font-size: 0.78rem; margin-bottom: 0.25rem; }

.tier-cell .header-line {
  font-weight: 600;
  color: var(--kd-ink);
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
.tier-cell .header-line:first-child { margin-top: 0; }

.tier-cell em {
  color: var(--kd-slate);
  font-style: italic;
  font-size: 0.8rem;
  display: block;
  margin-top: 0.35rem;
}

/* ============ 15. DATA ENABLER MODELS ============ */
.de-models {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 1024px) { .de-models { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .de-models { grid-template-columns: 1fr; } }

.de-card {
  border: 1px solid var(--kd-line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: white;
  position: relative;
}
.de-card.a  { border-top: 3px solid var(--de-a);  background: linear-gradient(180deg, var(--de-a-bg) 0%, white 60%); }
.de-card.b1 { border-top: 3px solid var(--de-b);  background: linear-gradient(180deg, var(--de-b-bg) 0%, white 60%); }
.de-card.b2 { border-top: 3px solid var(--de-b);  background: linear-gradient(180deg, var(--de-b-bg) 0%, white 60%); }
.de-card.c  { border-top: 3px solid var(--de-c);  background: linear-gradient(180deg, var(--de-c-bg) 0%, white 60%); }

.de-card-head {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--kd-line);
}
.de-card-tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.de-card.a  .de-card-tag { color: var(--de-a); }
.de-card.b1 .de-card-tag,
.de-card.b2 .de-card-tag { color: var(--de-b); }
.de-card.c  .de-card-tag { color: var(--de-c); }

.de-card-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--kd-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.de-card-section { margin-bottom: 1rem; }
.de-card-section-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kd-slate);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.de-card-section p {
  font-size: 0.85rem;
  color: var(--kd-graphite);
  line-height: 1.5;
}
.de-card-section ul {
  list-style: none;
  font-size: 0.83rem;
  color: var(--kd-graphite);
}
.de-card-section ul li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}
.de-card-section ul li::before {
  content: "·";
  position: absolute;
  left: 0.25rem;
  top: -2px;
  color: var(--kd-blue);
  font-weight: 700;
}

/* ============ 16. BMS CLASSIFICATION ============ */
.bms-classification { margin-top: 3rem; }
.bms-classification h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--kd-ink);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.bms-classification > p {
  color: var(--kd-graphite);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  max-width: 50rem;
}
.bms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--kd-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: white;
}
@media (max-width: 900px) { .bms-grid { grid-template-columns: 1fr; } }

.bms-col { border-right: 1px solid var(--kd-line); }
.bms-col:last-child { border-right: none; }
@media (max-width: 900px) {
  .bms-col { border-right: none; border-bottom: 1px solid var(--kd-line); }
  .bms-col:last-child { border-bottom: none; }
}

.bms-col-head { padding: 1rem 1.25rem; color: white; }
.bms-col-head.a  { background: linear-gradient(135deg, #92400E, #B45309); }
.bms-col-head.b1 { background: linear-gradient(135deg, var(--kd-blue-deep), var(--kd-blue)); }
.bms-col-head.b2 { background: linear-gradient(135deg, #5B21B6, var(--de-c)); }

.bms-col-head .pricing {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.bms-col-head .name {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-top: 0.2rem;
  letter-spacing: -0.005em;
}
.bms-col-body { padding: 1.25rem; }
.bms-col-body ul { list-style: none; }
.bms-col-body ul li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--kd-graphite);
  line-height: 1.45;
}
.bms-col-body ul li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: -2px;
  font-weight: 600;
  font-family: var(--mono);
}
.bms-col.a  ul li::before { color: var(--de-a); }
.bms-col.b1 ul li::before { color: var(--de-b); }
.bms-col.b2 ul li::before { color: var(--de-c); }

/* Exception rule */
.exception-rule {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: #FEF2F2;
  border-left: 3px solid #B91C1C;
  border-radius: var(--radius-sm);
  color: #7F1D1D;
  font-size: 0.92rem;
  line-height: 1.55;
}
.exception-rule strong { font-weight: 600; color: #991B1B; }

/* Economic note */
.econ-note {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--kd-blue-soft);
  border-left: 3px solid var(--kd-blue);
  border-radius: var(--radius-sm);
  color: var(--kd-graphite);
  font-size: 0.95rem;
  line-height: 1.6;
}
.econ-note strong { color: var(--kd-ink); font-weight: 600; }

/* ============ 17. ADD-ONS TABLE ============ */
.addons-table {
  margin-top: 2rem;
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid var(--kd-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.addons-table thead { background: var(--kd-ink); }
.addons-table th {
  padding: 0.9rem 1rem;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.addons-table td {
  padding: 1rem;
  border-top: 1px solid var(--kd-line);
  font-size: 0.88rem;
  color: var(--kd-graphite);
  vertical-align: top;
  line-height: 1.5;
}
.addons-table tr td:first-child {
  font-weight: 600;
  color: var(--kd-ink);
  font-size: 0.92rem;
}
.addons-table tr td:last-child {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--kd-blue-deep);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .addons-table thead { display: none; }
  .addons-table tr { display: block; border-top: 1px solid var(--kd-line); padding: 1rem; }
  .addons-table tr:first-child { border-top: none; }
  .addons-table td { display: block; padding: 0.3rem 0; border: none; }
  .addons-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--kd-mute);
    margin-bottom: 0.15rem;
  }
}

/* ============ 18. CUSTOM SECTION ============ */
.custom-card {
  margin-top: 2rem;
  background: linear-gradient(135deg, var(--kd-ink) 0%, #1F2937 100%);
  color: white;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.custom-card::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(51, 114, 255, 0.4) 0%, transparent 70%);
  pointer-events: none;
}
.custom-card > * { position: relative; z-index: 1; }
.custom-card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.custom-card .lead {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 50rem;
}
.custom-card ul { list-style: none; columns: 2; column-gap: 2rem; }
@media (max-width: 720px) { .custom-card ul { columns: 1; } }
.custom-card ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.5;
  break-inside: avoid;
}
.custom-card ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--kd-blue-light);
}
.custom-card .pricing-note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}

/* ============ 19. SCENARIOS ============ */
.scenario {
  margin-top: 2rem;
  background: white;
  border: 1px solid var(--kd-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.scenario-head {
  padding: 1.5rem;
  background: var(--kd-blue-soft);
  border-bottom: 1px solid var(--kd-line);
}
.scenario-head h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--kd-ink);
  letter-spacing: -0.005em;
  margin-bottom: 0.4rem;
}
.scenario-head h3 .tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--kd-blue);
  color: white;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-left: 0.5rem;
  font-weight: 500;
}
.scenario-head p { font-size: 0.9rem; color: var(--kd-graphite); line-height: 1.55; }

.quote-table { width: 100%; border-collapse: collapse; }
.quote-table th {
  background: var(--kd-line-soft);
  padding: 0.85rem 1.25rem;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kd-slate);
  border-bottom: 1px solid var(--kd-line);
  font-weight: 500;
}
.quote-table th:nth-child(2) { text-align: center; }
.quote-table th:nth-child(3) { text-align: right; }
.quote-table td {
  padding: 0.8rem 1.25rem;
  border-top: 1px solid var(--kd-line-soft);
  font-size: 0.9rem;
  color: var(--kd-graphite);
}
.quote-table td:nth-child(2) {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--kd-slate);
}
.quote-table td:nth-child(3) {
  text-align: right;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--kd-ink);
}
.quote-table tr.subtotal td {
  background: var(--kd-line-soft);
  font-weight: 600;
  color: var(--kd-ink);
  border-top: 1px solid var(--kd-line);
}
.quote-table tr.subtotal td:first-child { font-weight: 600; }

.scenario-bottom {
  padding: 1.5rem;
  background: var(--kd-line-soft);
  border-top: 1px solid var(--kd-line);
}
.scenario-bottom h4 {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kd-blue);
  margin-bottom: 0.6rem;
  font-weight: 500;
}
.scenario-bottom ul { list-style: none; }
.scenario-bottom ul li {
  padding-left: 1rem;
  position: relative;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  color: var(--kd-graphite);
}
.scenario-bottom ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--kd-mute);
}
.scenario-bottom ul li strong { color: var(--kd-ink); font-weight: 600; }
.scenario-bottom blockquote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--kd-ink);
  line-height: 1.5;
  padding: 0.8rem 0 0.8rem 1.25rem;
  border-left: 2px solid var(--kd-blue);
  margin-top: 0.5rem;
}

/* ============ 20. DESIGN NOTES ============ */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--kd-line);
  margin-top: 2rem;
}
@media (max-width: 720px) { .notes-grid { grid-template-columns: 1fr; } }
.note {
  padding: 1.5rem 1.25rem 1.5rem 0;
  border-bottom: 1px solid var(--kd-line);
  border-right: 1px solid var(--kd-line);
}
.note:nth-child(even) { padding-left: 1.5rem; border-right: none; }
.note:nth-child(odd)  { padding-right: 1.5rem; }
@media (max-width: 720px) { .note { border-right: none; padding: 1.25rem 0 !important; } }
.note h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--kd-ink);
  margin-bottom: 0.5rem;
  letter-spacing: -0.005em;
}
.note p { font-size: 0.9rem; color: var(--kd-graphite); line-height: 1.55; }

/* ============ 21. FOOTER ============ */
footer {
  margin-top: 4rem;
  padding: 2.5rem var(--gutter) 3rem;
  background: var(--kd-ink);
  color: rgba(255,255,255,0.7);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-meta { font-size: 0.85rem; line-height: 1.6; }
.footer-meta strong {
  color: white;
  font-weight: 600;
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--display);
  font-size: 1.05rem;
}
.footer-logo {
  height: 18px;
  width: auto;
  display: block;
  margin-bottom: 0.4rem;
  opacity: 0.9;
}
.footer-brand-context {
  display: block;
  color: white;
  font-weight: 400;
  font-family: var(--display);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.footer-version {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
}

/* ============ 22. INDEX PAGE COMPONENTS ============ */
.segments-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 760px) { .segments-grid { grid-template-columns: 1fr; gap: 1.25rem; } }

.segment-card {
  background: white;
  border: 1px solid var(--kd-line);
  border-radius: var(--radius);
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.segment-card:hover {
  border-color: var(--kd-blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(51, 114, 255, 0.18);
}
.segment-card.placeholder { pointer-events: none; background: transparent; border-style: dashed; border-color: var(--kd-line); }
.segment-card.placeholder * { opacity: 0.55; }
.segment-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.segment-tag { font-family: var(--mono); font-size: 0.65rem; color: var(--kd-blue); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.segment-card.placeholder .segment-tag { color: var(--kd-mute); }
.segment-status {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--kd-slate);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--kd-line);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.segment-card:not(.placeholder) .segment-status {
  color: var(--kd-blue);
  border-color: var(--kd-blue-light);
  background: var(--kd-blue-soft);
}
.segment-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--kd-ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.segment-desc { font-size: 0.92rem; color: var(--kd-graphite); line-height: 1.55; }
.segment-products { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.pill { font-size: 0.78rem; padding: 0.3rem 0.75rem; background: var(--kd-line-soft); color: var(--kd-graphite); border-radius: 999px; font-weight: 500; }
.pill.active { background: var(--kd-blue); color: white; }
.segment-card-cta {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--kd-line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--kd-graphite);
}
.segment-card-cta strong { color: var(--kd-ink); font-weight: 600; }
.segment-card-cta .arrow { color: var(--kd-blue); transition: transform 0.2s; }
.segment-card:hover .arrow { transform: translateX(4px); }
.segment-card.placeholder .segment-card-cta { color: var(--kd-mute); }
.segment-card.placeholder .arrow { display: none; }

.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
@media (max-width: 900px) { .approach-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.approach-card { padding: 1.75rem 0; border-top: 2px solid var(--kd-ink); }
.approach-card .num { font-family: var(--mono); font-size: 0.85rem; color: var(--kd-blue); font-weight: 500; margin-bottom: 0.5rem; letter-spacing: 0.04em; }
.approach-card h3 { font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--kd-ink); margin-bottom: 0.75rem; letter-spacing: -0.01em; }
.approach-card p { font-size: 0.92rem; color: var(--kd-graphite); line-height: 1.6; }

.cta-banner {
  background: var(--kd-ink);
  color: white;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius);
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(51, 114, 255, 0.35) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; letter-spacing: -0.01em; }
.cta-banner p { color: rgba(255,255,255,0.75); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 50rem; }
.cta-banner-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ============ 23. BUTTONS ============ */
/* Primary (Contained) */
.btn, .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  background: var(--kd-primary);
  color: white;
  text-decoration: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--kd-primary);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  font-family: var(--body);
}
.btn:hover, .cta-btn:hover {
  background: var(--kd-primary-hover);
  border-color: var(--kd-primary-hover);
}
/* Outline */
.btn-outline {
  background: white;
  color: var(--kd-primary);
  border: 1px solid var(--kd-primary);
}
.btn-outline:hover {
  background: var(--kd-blue-light);
  color: var(--kd-blue);
  border-color: var(--kd-blue);
}
/* Ghost / text */
.btn-ghost {
  background: transparent;
  color: var(--kd-primary);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--kd-blue-soft);
  color: var(--kd-blue);
}
/* Secondary (white on dark bg) */
.cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  background: transparent;
  color: white;
  text-decoration: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.35);
  transition: background 0.2s, border-color 0.2s;
}
.cta-btn-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }

/* ============ 24. STATUS CHIPS ============ */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}
.chip-teal    { background: #CCFBF1; color: #0F766E; }
.chip-blue    { background: var(--kd-blue-light); color: var(--kd-blue-deep); }
.chip-purple  { background: #EDE9FE; color: #6D28D9; }
.chip-pink    { background: #FCE7F3; color: #9D174D; }
.chip-gray    { background: var(--kd-line-soft); color: var(--kd-slate); }
.chip-orange  { background: #FFEDD5; color: #C2410C; }
.chip-yellow  { background: #FEF9C3; color: #A16207; }

/* ============ 25. ANIMATIONS ============ */
@media (prefers-reduced-motion: no-preference) {
  .js-ready .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .js-ready .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============ 26. DECORATIVE ============ */
.deco-rule {
  width: 60px;
  height: 1px;
  background: var(--kd-blue);
  margin: 2rem 0;
}

/* TOC sidebar */
.toc {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
@media (max-width: 1500px) { .toc { display: none; } }
.toc a {
  width: 24px;
  height: 1px;
  background: var(--kd-mute);
  transition: width 0.2s, background 0.2s;
  position: relative;
}
.toc a:hover { width: 36px; background: var(--kd-blue); }
.toc a.current { background: var(--kd-blue); width: 36px; }
.toc a::after {
  content: attr(data-label);
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--kd-ink);
  color: white;
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.toc a:hover::after { opacity: 1; }

/* ============ OPTIMIZATION METRICS SECTION ============ */
.metrics-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 700px) { .metrics-intro-grid { grid-template-columns: 1fr; } }

.metric-summary-box {
  background: var(--kd-navy);
  color: white;
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2rem);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.metric-summary-box::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 50%; height: 180%;
  background: radial-gradient(circle, rgba(30,64,175,0.3) 0%, transparent 70%);
  pointer-events: none;
}
.metric-summary-box > * { position: relative; z-index: 1; }
.msb-domain {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.6rem;
}
.msb-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
  color: white;
  margin-bottom: 0.85rem;
  letter-spacing: -0.01em;
}
.msb-text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.68;
  flex: 1;
}
.msb-text strong { color: white; }
.msb-link {
  margin-top: 1.25rem;
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}
.msb-link:hover { color: white; }
.metrics-catalog-cta {
  border: 1px solid var(--kd-line);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--kd-line-soft);
}
.metrics-catalog-cta p {
  font-size: 0.9rem;
  color: var(--kd-graphite);
  line-height: 1.55;
}
.metrics-catalog-cta a {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--kd-blue);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.metrics-catalog-cta a:hover { text-decoration: underline; }

/* ============ VALUE DRIVERS ============ */
.value-drivers-block {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--kd-line);
}
.value-drivers-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--kd-slate);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  font-weight: 500;
}
.value-drivers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.value-driver-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  background: transparent;
  color: var(--kd-navy);
  border: 1px solid var(--kd-blue-light);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
}
.value-driver-pill:hover {
  background: var(--kd-blue-soft);
  border-color: var(--kd-blue);
}
.value-driver-pill::before {
  content: "↑";
  color: var(--kd-blue);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

/* ============ FORMAT SWITCH (Standalone vs In-Mall Tenant) ============ */
.format-switch-section { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(2rem, 4vw, 3rem); }
.format-switch-label { font-family: var(--mono); font-size: 0.7rem; color: var(--kd-slate); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.85rem; font-weight: 500; }
.format-switch { display: inline-flex; background: var(--kd-line-soft); border: 1px solid var(--kd-line); border-radius: 999px; padding: 4px; gap: 2px; }
.format-switch button { background: transparent; border: 0; font-family: var(--body); font-size: 0.92rem; font-weight: 500; color: var(--kd-graphite); padding: 0.65rem 1.5rem; border-radius: 999px; cursor: pointer; transition: background 0.2s, color 0.2s; letter-spacing: 0.01em; }
.format-switch button.active { background: var(--kd-navy); color: white; }
.format-switch button:not(.active):hover { color: var(--kd-navy); }
@media (max-width: 540px) {
  .format-switch { width: 100%; }
  .format-switch button { flex: 1; padding: 0.65rem 0.5rem; font-size: 0.85rem; }
}

.in-mall-placeholder { display: none; max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem, 2vw, 2rem) var(--gutter) clamp(4rem, 8vw, 6rem); }
body.format-in-mall .in-mall-placeholder { display: block; }
.in-mall-card { background: var(--kd-line-soft); border: 1px dashed var(--kd-line); border-radius: 4px; padding: clamp(2rem, 4vw, 3rem); max-width: 44rem; }
.in-mall-card .tag { font-family: var(--mono); font-size: 0.68rem; color: var(--kd-slate); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.85rem; font-weight: 500; }
.in-mall-card h3 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; color: var(--kd-navy); margin-bottom: 0.85rem; line-height: 1.2; letter-spacing: -0.01em; }
.in-mall-card p { font-size: 0.95rem; color: var(--kd-graphite); line-height: 1.7; margin-bottom: 0.75rem; }
.in-mall-card p:last-child { margin-bottom: 0; }
.in-mall-card strong { color: var(--kd-navy); font-weight: 600; }

body.format-in-mall #offering,
body.format-in-mall #hvac,
body.format-in-mall #optimization-metrics,
body.format-in-mall #tiers,
body.format-in-mall #agentic-operations,
body.format-in-mall #data-enabler,
body.format-in-mall #addons,
body.format-in-mall #custom,
body.format-in-mall #pricing-example,
body.format-in-mall #design-notes,
body.format-in-mall .toc { display: none; }