/* ============================================================
   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:   1640px;   /* Widened with the canonical AppShell (spec #105 / ADR-038) */
  --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-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: 54rem;
}

.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; }

.hero-impact {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--kd-blue-soft);
  border-left: 3px solid var(--kd-blue);
  border-radius: 0 4px 4px 0;
  max-width: 78rem;
}
.hero-impact-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--kd-blue-deep);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.85rem;
  font-weight: 600;
}
.hero-impact-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.7rem 1.5rem;
  margin: 0;
  padding: 0;
}
.hero-impact-list li {
  font-size: 0.9rem;
  color: var(--kd-graphite);
  line-height: 1.45;
}
.hero-impact-list li strong { color: var(--kd-navy); font-weight: 600; }
.hero-impact-note {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(0, 36, 117, 0.1);
  font-size: 0.83rem;
  color: var(--kd-slate);
  font-style: italic;
  line-height: 1.5;
}

/* ============ 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: 68rem;
}
.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: 68rem;
  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; }
/* Managed-Service note rows (catalog entries with is_note=true) render as
   a discreet callout under the bulleted list — different bullet glyph,
   italic, slightly subdued color so it reads as a footnote. */
.tier-cell ul li.ms-note { color: var(--kd-slate); margin-top: 0.6rem; padding-left: 1rem; }
.tier-cell ul li.ms-note::before { content: "·"; color: var(--kd-mute); }
.tier-cell ul li.ms-note em { font-style: italic; }

/* Bullet rows split into a prominent title line and a lighter description
   sub-line so dense list cells (Managed service, Platform capabilities,
   Reporting) stay scannable (ADR-025 typography). Managed-service bullets add
   a right-aligned execution-mode chip — AI / Hybrid / Human — marking who
   executes the work. All titles align flush-left; chips form a right column. */
.tier-cell ul li.sop-item {
  padding-left: 0;
  margin-bottom: 0.7rem;
}
.tier-cell ul li.sop-item::before { content: none; }
.sop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.tier-cell ul li.sop-item .sop-title { color: var(--kd-ink); font-weight: 600; }
.tier-cell ul li.sop-item .sop-desc {
  display: block;
  margin-top: 0.2rem;
  color: var(--kd-slate);
  font-size: 0.92em;
  font-weight: 400;
  line-height: 1.5;
}
.tier-cell ul li.sop-item .sop-desc strong { color: var(--kd-graphite); font-weight: 600; }
.exec-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.exec-badge.exec-ai     { color: var(--kd-blue);      background: var(--kd-blue-soft); }
.exec-badge.exec-hybrid { color: var(--kd-blue-deep); background: var(--kd-blue-light); }
.exec-badge.exec-human  { color: var(--kd-slate);     background: #F3F4F6; }

.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; }

/* Section intro inside a tier cell (e.g. "24/7 HVAC operations:",
   "Operations + intelligence:"). Styled as a small eyebrow label so it reads
   as a higher-level lead-in to the bullets below it, distinct from the bold
   bullet titles (ADR-025 typography). */
.tier-cell .header-line {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kd-slate);
  margin-bottom: 0.6rem;
  margin-top: 0.5rem;
}
.tier-cell .header-line:first-child { margin-top: 0; }

/* Tier lead-in bullet ("Everything in Essential", "Everything in Managed,
   plus") — a continuation marker, not a feature. Lighter than the bold
   feature titles so it doesn't compete with them. */
.tier-cell ul li.sop-lead .sop-title { font-weight: 500; color: var(--kd-slate); }

.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: 68rem;
}
.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: 68rem;
}
.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: 68rem; }
.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;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.metric-summary-box:hover,
.metric-summary-box:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.metric-summary-box:focus-visible {
  outline: 2px solid var(--kd-blue);
  outline-offset: 2px;
}
.metric-summary-box:hover .msb-link,
.metric-summary-box:focus-visible .msb-link { color: white; }
.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; }

/* Optimization Metrics — focus (Essential) + aside (higher-tier) layout, ADR-029.
   When a product has higher-tier metrics the focus grid sits beside an aside
   list; when there is no aside (e.g. HVAC, all metrics essential) the grid
   renders full width as before and these rules are inert. */
.metrics-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}
@media (max-width: 860px) { .metrics-layout { grid-template-columns: 1fr; } }
.metrics-layout .metrics-intro-grid { margin: 0; }
.metrics-aside {
  border: 1px solid var(--kd-line);
  border-radius: 4px;
  padding: 1.25rem 1.35rem;
  background: var(--kd-paper);
}
.maside-head {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: #6D28D9;
  margin-bottom: 0.4rem;
}
.maside-sub {
  font-size: 0.85rem;
  color: var(--kd-slate);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.maside-list { list-style: none; margin: 0; padding: 0; }
.maside-item { padding: 0.6rem 0; border-top: 1px solid var(--kd-line-soft); }
.maside-item:first-child { border-top: none; padding-top: 0; }
.maside-link {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--kd-ink);
  text-decoration: none;
}
.maside-link:hover { color: #6D28D9; }
.maside-note {
  display: block;
  font-size: 0.75rem;
  color: var(--kd-slate);
  margin-top: 0.1rem;
}
/* Add-on-scoped metrics: a small, muted side panel. Names are plain text (not
   links / not underlined) because these metrics belong to an add-on, not the
   core product (ADR-033). */
.metrics-side { display: flex; flex-direction: column; gap: 1.25rem; }
.metrics-addon-aside { background: var(--kd-paper); }
.maddon-head { color: var(--kd-slate); }
.maddon-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kd-ink);
  text-decoration: none;
}

/* ============ 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: 60rem; }
.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 #doc-meta,
body.format-in-mall .toc { display: none; }

/* ============ SEGMENT ADD-ON MENU ============
   The "all add-ons for this segment" menu, grouped by asset-class domain, that
   the engine generates into the SEGMENT-ADDONS region of a segment hub
   (docs/<segment>/index.html). Shared here so every current and future profile
   inherits the same menu with no page-scoped CSS. See render.py
   (write_rendered_segment_landings) + templates/segment-landing-addons.html.j2. */
.segment-addons { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.segment-addons-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kd-slate); margin-bottom: 1rem; }
.segment-addons-groups { display: grid; gap: 1.25rem; }
.segment-addon-group { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 1rem; align-items: start; padding-top: 1rem; border-top: 1px solid var(--kd-line-soft); }
.segment-addon-group:first-child { border-top: none; padding-top: 0; }
.segment-addon-group-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kd-navy); font-weight: 600; padding-top: 0.4rem; }
.segment-addon-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.segment-addon-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; padding: 0.4rem 0.75rem; background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; border-radius: 999px; text-decoration: none; font-weight: 500; transition: background 0.15s, border-color 0.15s; }
.segment-addon-chip:hover { background: #FEF3C7; border-color: #FCD34D; }
.segment-addon-chip .arrow { color: var(--kd-mute); font-family: var(--mono); }
@media (max-width: 760px) { .segment-addon-group { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ============ SEGMENT DASHBOARD CTA ============
   The "Referential Mockup Dashboards" deep link the engine generates into the
   SEGMENT-DASHBOARD region of a segment hub (docs/<segment>/index.html),
   driven by the per-segment `dashboard` field in data/segments.yml. See
   render.py (write_rendered_segment_dashboards) +
   templates/segment-landing-dashboard.html.j2. */
.segment-dashboard-cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.segment-dashboard-cta-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kd-slate); }
.segment-dashboard-cta .arrow { font-family: var(--mono); }