:root {
  --ink: #0F1923;
  --ink-2: #1a2534;
  --muted: #525252;
  --muted-2: #737373;
  --muted-3: #a3a3a3;
  --line: #e5e5e5;
  --line-2: #f0f0f0;
  --line-3: #f7f7f7;
  --paper: #ffffff;
  --paper-2: #fafafa;
  --paper-3: #f5f5f5;
  --accent: #B08D57;
  --accent-hover: #8F6F3E;
  --accent-soft: #F7F1E6;
  --accent-soft-2: #FBF7F0;
  --green: #2f7a4d;
  --green-soft: #f0f7f3;
  --green-on-dark: #3FA86A;
  --red: #c94a3e;
  --red-soft: #fbe9e7;
  --blue: #3b5ea5;
  --blue-soft: #eef2f8;
  --finance: #2D5A66;
  --finance-soft: #EEF4F5;
  --ff-body: 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --ff-mono: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --max-w: 1440px;
  --inner-pad: 32px;
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.7s;
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-body); color: var(--ink); background: var(--paper);
  line-height: 1.5; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.1; font-weight: 600; }
p { margin: 0; }
.body-prose a, .day-prose a, .faq-a a, .deeper-text p a { color: var(--accent); border-bottom: 1px solid rgba(176,141,87,0.35); transition: border-color var(--dur-fast); }
.body-prose a:hover, .day-prose a:hover, .faq-a a:hover, .deeper-text p a:hover { border-bottom-color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--max-w); margin: 0 auto; padding-left: var(--inner-pad); padding-right: var(--inner-pad); }
main > section, main > div > section { padding: 96px var(--inner-pad); border-bottom: 1px solid var(--line); }
main > section.section-tight, main > div > section.section-tight   { padding: 80px var(--inner-pad); }
.bg-paper-2{ background: var(--paper-2); }
.bg-ink    { background: var(--ink); color: #fff; }

/* Type */
.display { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.heading { font-weight: 600; letter-spacing: -0.01em; }
.eyebrow { font-size: 15px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.lede { font-size: 18px; line-height: 1.6; color: var(--muted); }
.h-display { font-size: clamp(48px, 5.2vw, 76px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.h-section { font-size: clamp(40px, 4.2vw, 60px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
.h-section-sm { font-size: clamp(36px, 3.8vw, 52px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.h-section-xs { font-size: clamp(32px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.h-card { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.h-sub { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.mono { font-family: var(--ff-mono); font-feature-settings: 'tnum'; }
.num { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  font-family: inherit; font-size: 16px; font-weight: 500;
  padding: 13px 22px; border: 1px solid transparent; border-radius: 0;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-smooth),
              color var(--dur-fast) var(--ease-smooth),
              border-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-fast) var(--ease-smooth),
              box-shadow var(--dur-base) var(--ease-smooth);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 0s; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hover); box-shadow: 0 10px 28px -10px rgba(176, 141, 87, 0.55); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-2); box-shadow: 0 10px 28px -10px rgba(15, 25, 35, 0.5); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-2); }
.btn-ghost-inv { background: transparent; color: #fff; border-color: rgba(255,255,255,0.25); }
.btn-ghost-inv:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.04); }
.btn-lg { padding: 16px 26px; font-size: 17px; font-weight: 600; }
.link-arrow {
  font-size: 16px; font-weight: 500; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--dur-fast) var(--ease-smooth); text-decoration: none;
}
.link-arrow:hover { gap: 10px; }

/* ============== HEADER ============== */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--line); }
.pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse 2s ease-in-out infinite; flex: none;
}
.site-nav { background: var(--paper); }
.site-nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 14px var(--inner-pad);
  display: flex; align-items: center; justify-content: space-between;
}
.site-nav-left { display: flex; align-items: center; gap: 44px; }
.site-nav-right { display: flex; align-items: center; gap: 10px; }
.nav-list { display: flex; align-items: center; gap: 22px; list-style: none; padding: 0; margin: 0; }
.nav-link {
  font-size: 16.5px; font-weight: 500; color: var(--ink);
  padding: 8px 4px; transition: color var(--dur-fast); text-decoration: none;
}
.nav-link:hover { color: var(--accent); }
.nav-signin { font-size: 16px; padding: 8px 12px; color: var(--ink); text-decoration: none; }
.nav-signin:hover { color: var(--accent); }
.nav-cta { padding: 10px 18px; }
.nav-hamburger {
  display: none;
  width: 36px; height: 36px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; padding: 0; background: none; border: 0; cursor: pointer;
}
.nav-hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--ink); transition: transform var(--dur-base), opacity var(--dur-base);
}
.edma-logo {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 700; font-size: 22px; letter-spacing: -0.01em;
  text-decoration: none;
}
.edma-logo .phoenix { height: 34px; width: auto; display: block; max-width: 100%; }
.edma-wordmark { font-family: var(--ff-body); }

/* ============== HERO (1) ============== */
.s-hero { text-align: center; }
.s-hero-inner { max-width: 920px; margin: 0 auto; }
.s-hero-inner .eyebrow { display: inline-block; margin-bottom: 22px; }
.s-hero-inner .h-display { margin-bottom: 20px; }
.s-hero-inner .hero-tag {
  font-size: 22px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.01em;
  line-height: 1.4;
  max-width: 760px; margin: 0 auto 24px;
}
.s-hero-inner .lede { max-width: 760px; margin: 0 auto 32px; }
.s-hero-inner .cta-row { justify-content: center; }
.cta-row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ============== CENTERPIECE (2) ============== */
/* Platform-faithful 1:1 rendering of the actual OrderDetailPage.tsx.
   Light theme. Uses the platform's design tokens directly (not marketing's
   --paper/--ink) so the mockup visually IS the product. Token cross-walk:
     platform --bg #F4F5F7        page background behind cards
     platform --surface #FFFFFF   card body
     platform --navy #0F1923      top nav, primary text
     platform --accent #B08D57    gold (matches marketing --accent)
     platform --border #E2E6EB    card borders
     platform --divider #F0F2F5   in-card dividers (kv rows, card-head bottom)
     platform --text2 #4A5568     secondary text
     platform --text3 #6B7A8A     tertiary, KPI labels, meta
     status colors                amber/green/red/blue with -bg and -t pairs
*/
.s-centerpiece { padding-top: 0; padding-bottom: 96px; border-bottom: 1px solid var(--line); }
.centerpiece-frame {
  max-width: 880px; margin: 0 auto;
  background: #F4F5F7;
  border: 1px solid #E2E6EB;
  box-shadow: 0 1px 3px rgba(15,25,35,0.05);
  font-family: var(--ff-body);
  color: #0F1923;
  font-size: 13px;
  line-height: 1.45;
}
.centerpiece-caption {
  max-width: 880px; margin: 24px auto 0;
  font-size: 15px; color: var(--muted-2); text-align: center;
  letter-spacing: 0.02em;
}

/* ── Top dark nav bar ── */
.cp-topnav {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  background: #0F1923;
  color: #fff;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cp-logo { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cp-logo-mark {
  width: 22px; height: 22px;
  background: #B08D57; color: #fff;
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.cp-logo-words { color: #fff; letter-spacing: -0.01em; }
.cp-logo-words strong { font-weight: 700; }
.cp-search {
  width: 32px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  border-radius: 4px;
}
.cp-nav {
  display: inline-flex; align-items: center; gap: 18px;
  font-size: 14.5px;
  color: rgba(255,255,255,0.78);
  flex: 1;
  overflow: hidden;
}
.cp-nav span { white-space: nowrap; cursor: default; }
.cp-nav span.on { color: #fff; border-bottom: 2px solid #B08D57; padding-bottom: 4px; margin-bottom: -6px; }
.cp-nav em { font-style: normal; color: rgba(255,255,255,0.5); font-size: 11px; margin-left: 2px; }
.cp-bell { position: relative; font-size: 16px; color: rgba(255,255,255,0.7); }
.cp-bell sup {
  position: absolute; top: -4px; right: -10px;
  background: #DC3545; color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 1px 5px; border-radius: 8px;
  font-family: var(--ff-body);
}
.cp-ws {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: rgba(255,255,255,0.85);
  flex-shrink: 0;
}
.cp-ws-mark {
  width: 24px; height: 24px;
  background: #B08D57; color: #fff;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}

/* ── Page container ── */
.cp-page {
  padding: 18px 20px;
  background: #F4F5F7;
}

/* Page head */
.cp-page-head { margin-bottom: 8px; }
.cp-h1 {
  font-size: 22px; font-weight: 700;
  color: #0F1923;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

/* Section tabs */
.cp-section-tabs {
  display: flex; align-items: center; gap: 24px;
  margin: 12px 0 20px;
  border-bottom: 1px solid #E2E6EB;
}
.cp-section-tabs span {
  font-size: 16px; font-weight: 500;
  color: #6B7A8A;
  padding: 10px 0;
  border-bottom: 2px solid transparent;
  cursor: default;
}
.cp-section-tabs span.on { color: #0F1923; border-bottom-color: #B08D57; }

/* Action row */
.cp-action-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cp-back { font-size: 15px; color: #4A5568; cursor: default; }
.cp-action-btns { display: inline-flex; gap: 8px; }
.cp-btn-outline-sm {
  font-size: 14px; font-weight: 600;
  padding: 7px 16px;
  background: #fff; border: 1px solid #E2E6EB;
  color: #4A5568;
  cursor: default;
  display: inline-flex; align-items: center;
}
.cp-btn-dark-sm {
  font-size: 14px; font-weight: 600;
  padding: 7px 16px;
  background: #0F1923; border: 1px solid #0F1923;
  color: #fff;
  cursor: default;
  display: inline-flex; align-items: center;
}
.cp-btn-danger-sm {
  font-size: 14px; font-weight: 600;
  padding: 7px 16px;
  background: #fff; border: 1px solid #E2E6EB;
  color: #DC3545;
  cursor: default;
  display: inline-flex; align-items: center;
}

/* ── Card primitive (matches platform .card) ── */
.cp-card {
  background: #FFFFFF;
  border: 1px solid #E2E6EB;
  box-shadow: 0 1px 3px rgba(15,25,35,0.05);
  margin-bottom: 10px;
}
.cp-card-head {
  padding: 10px 16px;
  border-bottom: 1px solid #F0F2F5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.cp-card-title {
  font-size: 15px; font-weight: 700;
  color: #0F1923;
  margin: 0;
}
.cp-card-body { padding: 10px 16px; }

/* Header card (no card-head, custom inner layout) */
.cp-header-card {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.cp-header-info { flex: 1; }
.cp-eyebrow {
  font-size: 14px; font-weight: 600;
  color: #B08D57;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.cp-h2 {
  font-size: 19px; font-weight: 700;
  color: #0F1923;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  line-height: 1.25;
}
.cp-flag { display: inline-block; vertical-align: middle; }
.cp-meta {
  font-size: 15px;
  color: #6B7A8A;
  margin: 0;
}
.cp-mt-2 { margin-top: 4px; }
.cp-header-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.cp-badges { display: inline-flex; gap: 8px; }
.cp-transitions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Badge primitive (matches platform .badge) */
.cp-badge {
  font-size: 13px; font-weight: 700;
  padding: 4px 12px;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.cp-badge-amber  { background: #FFFBEB; color: #92400E; }
.cp-badge-green  { background: #ECFDF5; color: #065F46; }
.cp-badge-red    { background: #FEF2F2; color: #B91C1C; }
.cp-badge-blue   { background: #EFF6FF; color: #1E40AF; }
.cp-badge-warm   { background: rgba(120,113,100,0.1); color: #78716C; }

/* 4-KPI strip (matches platform .pd-kpis / .pd-kpi) */
.cp-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.cp-kpi {
  background: #FFFFFF;
  border: 1px solid #E2E6EB;
  box-shadow: 0 1px 3px rgba(15,25,35,0.05);
  padding: 14px 16px;
  position: relative;
}
.cp-kpi-warn {
  border-color: rgba(220,53,69,0.3);
}
.cp-kpi-label {
  font-size: 13px; font-weight: 600;
  color: #6B7A8A;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}
.cp-kpi-val {
  font-size: 22px; font-weight: 700;
  color: #0F1923;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.cp-kpi-val-red { color: #DC3545; }
.cp-kpi-sub {
  font-size: 14px; color: #6B7A8A;
  margin: 8px 0 0;
}

/* Allocated capacity panel */
.cp-allocated { padding: 18px 20px; }
.cp-alloc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.cp-alloc-head strong { font-size: 16px; font-weight: 700; color: #0F1923; }
.cp-pct-pill {
  font-size: 14px; font-weight: 700;
  padding: 4px 10px;
  letter-spacing: 0.02em;
  display: inline-flex;
}
.cp-pct-good { background: #ECFDF5; color: #065F46; }
.cp-alloc-product {
  border-top: 1px solid #F0F2F5;
  padding-top: 12px;
}
.cp-alloc-product-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 15px;
}
.cp-alloc-supplier {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 15px;
  color: #4A5568;
  border-top: 1px solid #F0F2F5;
}
.cp-alloc-supplier:nth-child(2) { border-top: 0; }

/* ── Two-column detail layout (matches platform .detail-layout) ── */
.cp-detail-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
}
.cp-sidebar { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cp-sidebar .cp-card { margin-bottom: 0; }
.cp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cp-main .cp-card { margin-bottom: 0; }

/* Order Value card (centered hero number) */
.cp-value-card { padding: 20px; text-align: center; }
.cp-value-num {
  font-size: 28px; font-weight: 700;
  color: #0F1923;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  line-height: 1;
}

/* Key-value rows (matches platform .kv-row) */
.cp-kv {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 15px;
  color: #4A5568;
  border-bottom: 1px solid #F0F2F5;
}
.cp-kv:last-child { border-bottom: none; }
.cp-kv-v { color: #0F1923; font-weight: 500; }
.cp-kv-total {
  border-top: 1px solid #E2E6EB;
  border-bottom: 1px solid #F0F2F5;
  padding-top: 10px; margin-top: 6px;
  font-size: 16px;
}

/* P&L cost rows (indented, matches platform .pl-cost) */
.cp-pl-cost {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 4px 16px;
  font-size: 14px;
  color: #6B7A8A;
}

/* Milestones rail */
.cp-milestones { padding: 4px 20px 14px; }
.cp-ms {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 0;
  position: relative;
}
.cp-ms div { display: flex; flex-direction: column; gap: 2px; }
.cp-ms strong { font-size: 15px; font-weight: 600; color: #0F1923; }
.cp-ms .cp-meta { font-size: 14px; }
.cp-ms-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative; z-index: 1;
}
.cp-ms-done .cp-ms-dot {
  background: #059669;
}
.cp-ms-done .cp-ms-dot::after {
  content: '✓';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 13px; font-weight: 700;
}
.cp-ms-active .cp-ms-dot {
  background: #B08D57;
  box-shadow: 0 0 0 4px rgba(176,141,87,0.18);
}
.cp-ms-pending .cp-ms-dot {
  background: #fff;
  border: 2px solid #E2E6EB;
}
/* connector line between dots */
.cp-ms::before {
  content: '';
  position: absolute;
  left: 8px; top: 25px;
  width: 2px; height: calc(100% - 16px);
  background: #F0F2F5;
}
.cp-ms-done::before { background: #059669; }
.cp-ms-last::before { display: none; }

/* Tables (Order Items, Invoices) */
.cp-tbl-wrap { overflow-x: auto; }
.cp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.cp-tbl th {
  font-size: 12px; font-weight: 700;
  color: #6B7A8A;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #F0F2F5;
  white-space: nowrap;
}
.cp-tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid #F0F2F5;
  color: #4A5568;
  white-space: nowrap;
}
.cp-tbl tr:last-child td { border-bottom: none; }

/* Production / Shipments rows */
.cp-prod-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #F0F2F5;
}
.cp-prod-row:first-child { padding-top: 0; }
.cp-prod-row:last-child { border-bottom: none; padding-bottom: 0; }
.cp-prod-row p.cp-meta { margin: 2px 0 0; }
.cp-prod-status {
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.cp-pct-num {
  font-size: 16px; font-weight: 700;
  color: #0F1923;
  font-variant-numeric: tabular-nums;
}

/* Documents (2-col grid, present/missing) */
.cp-docs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 20px;
}
.cp-doc {
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid transparent;
}
.cp-doc-present {
  background: #fff;
  border-color: #E2E6EB;
  color: #0F1923;
}
.cp-doc-present::first-letter { color: #059669; }
.cp-doc-missing {
  background: #FEF2F2;
  border-color: rgba(220,53,69,0.2);
  color: #B91C1C;
  font-weight: 500;
}
.cp-doc-missing .cp-meta { color: rgba(185,28,28,0.7); display: block; font-weight: 400; margin-top: 2px; }

/* Color helpers (scoped to centerpiece) */
.cp-c-accent { color: #B08D57; font-weight: 500; }
.cp-c-green  { color: #059669; }
.cp-c-red    { color: #DC3545; }
.cp-mono     { font-family: var(--ff-mono); }


/* ============== PORTFOLIO (3) ============== */
.s-portfolio-inner { max-width: var(--max-w); margin: 0 auto; }
.s-portfolio-head {
  max-width: 760px; margin: 0 auto 56px;
  text-align: center;
}
.s-portfolio-head .eyebrow { margin-bottom: 14px; }
.s-portfolio-head h2 { margin-bottom: 18px; }
.s-portfolio-head .lede { font-size: 18px; }

.portfolio-frame {
  max-width: 1280px; margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.kpi {
  padding: 22px 20px;
  border-right: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 116px;
}
.kpi:last-child { border-right: 0; }
.kpi.is-flagged { background: var(--accent-soft-2); }
.kpi-label {
  font-size: 13px; color: var(--muted-2);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500;
}
.kpi-val {
  font-size: 32px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--ink);
}
.kpi-trend { font-size: 14px; color: var(--muted); margin-top: auto; }
.kpi-trend.is-up { color: var(--green); }
.kpi-trend.is-warn { color: var(--red); font-weight: 500; }

.role-strip {
  border-top: 1px solid var(--line-2);
  padding: 22px 24px 26px;
  background: var(--paper-2);
}
.role-strip-label {
  font-size: 13px; color: var(--muted-2);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 14px;
}
.role-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.role-card {
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.role-card-eyebrow {
  font-size: 13px; color: var(--accent);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
}
.role-card-title {
  font-size: 17px; font-weight: 600; line-height: 1.35;
  color: var(--ink);
}
.role-card-meta {
  font-size: 14.5px; color: var(--muted); line-height: 1.4;
}

/* Overview cards grid — 1:1 with OrderOverviewPage live cards */
.ov-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ov-card {
  background: #fff;
  border: 1px solid #E2E6EB;
  box-shadow: 0 1px 3px rgba(15,25,35,0.05);
  border-left: 3px solid var(--accent);
}
.ov-card:nth-child(1) { border-left-color: #D97706; }   /* Production behind: amber */
.ov-card:nth-child(2) { border-left-color: #3B82F6; }   /* Shipping: blue */
.ov-card:nth-child(3) { border-left-color: var(--accent); }   /* Pending allocation: gold */
.ov-card:nth-child(4) { border-left-color: #DC3545; }   /* Approaching deadline: red */
.ov-card:nth-child(5) { border-left-color: #6B7A8A; }   /* Recent activity: neutral */
.ov-card:nth-child(6) { border-left-color: #059669; }   /* Document alerts: green */
.ov-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid #F0F2F5;
}
.ov-card-title {
  font-size: 17px; font-weight: 700;
  color: #0F1923;
}
.ov-card-count {
  font-size: 13px; font-weight: 700;
  background: var(--paper-2);
  color: var(--muted);
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  font-family: var(--ff-mono);
}
.ov-card-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid #F0F2F5;
  font-size: 15px;
}
.ov-card-row:last-child { border-bottom: none; }
.ov-row-id { font-size: 15px; color: #0F1923; font-weight: 500; margin: 0; }
.ov-row-meta { font-size: 14px; color: #6B7A8A; margin: 2px 0 0; }
.ov-row-right {
  display: inline-flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}
.ov-row-val {
  font-family: var(--ff-mono);
  font-weight: 700;
  color: #0F1923;
  font-size: 15px;
}
.ov-row-link {
  font-size: 14px; font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}
.ov-row-status-amber { color: #92400E; }
.ov-row-status-blue  { color: #1E40AF; }
.ov-row-status-green { color: #065F46; }
.ov-card-activity {
  padding: 10px 18px;
}
.ov-activity-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: #4A5568;
  padding: 6px 0;
  border-bottom: 1px solid #F0F2F5;
  margin: 0;
}
.ov-activity-row:last-child { border-bottom: none; }
.ov-activity-row strong { color: var(--accent); font-weight: 600; }
.ov-activity-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.c-green { color: #059669; }
.c-amber { color: #D97706; }
.c-blue  { color: #3B82F6; }
.c-red   { color: #DC3545; }

.portfolio-caption {
  max-width: 1280px; margin: 24px auto 0;
  font-size: 15px; color: var(--muted-2); text-align: center;
  letter-spacing: 0.02em;
}

/* ============== PROBLEM (3 cards · category-rotated) ============== */
.s-problem-inner { max-width: var(--max-w); margin: 0 auto; }
.s-problem-head { max-width: 860px; margin-bottom: 56px; }
.s-problem-head .eyebrow { color: var(--accent); margin-bottom: 16px; }
.s-problem-head h2 { margin-bottom: 16px; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.problem-card {
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e5e5e5);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.problem-card h3 {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.problem-card p {
  font-size: 16.5px; line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

/* ============== WHAT IT DOES (5) ============== */
.s-what {  }
.s-what-head { max-width: var(--max-w); margin: 0 auto 64px; }
.s-what-head h2 { margin-bottom: 0; }
.cap {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px;
  padding: 64px 0; border-top: 1px solid var(--line);
  align-items: center;
}
.cap:first-of-type { border-top: 0; padding-top: 0; }
.cap.cap-flip { grid-template-columns: 1.2fr 1fr; }
.cap.cap-flip .cap-text { order: 2; }
.cap.cap-flip .cap-mock { order: 1; }
.cap-text h3 { margin-bottom: 18px; }
.cap-text p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.cap-text p strong { color: var(--ink); font-weight: 600; }
.cap-text .eyebrow { display: inline-block; margin-bottom: 16px; }
.cap-mock-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 12px;
}
.cap-mock {
  background: var(--paper-2); border: 1px solid var(--line-2);
  padding: 20px;
}

/* 4.1 — Three views */
.tv-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-2); margin-bottom: 16px; }
.tv-tab {
  font-size: 14.5px; padding: 8px 14px; color: var(--muted);
  border-bottom: 2px solid transparent; cursor: default;
}
.tv-tab.is-active { color: var(--ink); font-weight: 500; border-bottom-color: var(--accent); }
.tv-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tv-col { background: var(--paper-2); border: 1px solid var(--line-2); padding: 10px; }
.tv-col-title {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
}
.tv-col-sub { font-family: var(--ff-mono); color: var(--muted-2); font-weight: 500; margin-left: 6px; font-size: 13px; }
.tv-col-count {
  background: #fff; color: var(--muted);
  font-size: 12px; font-weight: 700;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  letter-spacing: 0;
}
.tv-card {
  background: #fff; padding: 10px;
  margin-bottom: 8px;
  border-left: 3px solid var(--accent);
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.tv-card-bl-blue    { border-left-color: #3B82F6; }
.tv-card-bl-amber   { border-left-color: #D97706; }
.tv-card-bl-green   { border-left-color: #059669; }
.tv-card-bl-neutral { border-left-color: #B8C4CE; }
.tv-card-id { font-family: var(--ff-mono); font-size: 13px; color: var(--accent); font-weight: 600; }
.tv-card-client { font-size: 14.5px; color: var(--ink); margin-top: 4px; font-weight: 600; }
.tv-card-val { font-family: var(--ff-mono); color: #059669; font-size: 17px; font-weight: 700; margin-top: 4px; }
.tv-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 12.5px; }
.tv-card-days { font-family: var(--ff-mono); color: var(--muted-2); }
.tv-card-btn {
  display: block;
  margin-top: 8px;
  padding: 5px 10px;
  font-size: 12.5px; font-weight: 600;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line-2);
  color: var(--ink);
}

/* Mini status badges (for board cards + list) */
.tv-mini-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 2px 7px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tv-mini-blue    { background: #EFF6FF; color: #1E40AF; }
.tv-mini-grey    { background: #F4F4F5; color: #52525B; }
.tv-mini-amber   { background: #FFFBEB; color: #92400E; }
.tv-mini-green   { background: #ECFDF5; color: #065F46; }
.tv-mini-red     { background: #FEF2F2; color: #B91C1C; }
.tv-mini-neutral { background: var(--paper-2); color: var(--muted-2); }
.tv-section-label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-2);
  margin: 18px 0 10px;
}
.tv-timeline {
  border: 1px solid var(--line-2); padding: 10px;
  font-family: var(--ff-mono); font-size: 13px;
}
.tv-tl-head {
  display: grid;
  grid-template-columns: 120px repeat(7, 1fr);
  gap: 0;
  color: var(--muted-2);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid var(--line-2);
  align-items: center;
}
.tv-tl-id-spacer { font-family: var(--ff-body); }
.tv-tl-week { font-family: var(--ff-mono); text-align: left; }
.tv-tl-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line-2); }
.tv-tl-row:last-child { border-bottom: 0; }
.tv-tl-id { color: var(--accent); font-family: var(--ff-mono); font-size: 13.5px; }
.tv-tl-track { position: relative; height: 22px; }
.tv-tl-bar {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; padding: 0 10px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
  min-width: 90px;
}
.tv-tl-amber { background: #D97706; }
.tv-tl-green { background: #059669; }
.tv-tl-blue  { background: #3B82F6; }
.tv-tl-grey  { background: #A1A1AA; }
.tv-tl-bar.tl-077 { left: 14%; width: 52%; }
.tv-tl-bar.tl-064 { left: 4%; width: 38%; }
.tv-tl-bar.tl-072 { left: 28%; width: 60%; }
.tv-tl-bar.tl-068 { left: 8%; width: 70%; }
.tv-list {
  border: 1px solid var(--line-2); margin-top: 10px; font-size: 13.5px;
}
.tv-list-head, .tv-list-row {
  display: grid; grid-template-columns: 1.2fr 1.2fr 0.8fr 0.7fr 0.7fr 0.7fr;
  padding: 8px 10px; gap: 8px;
}
.tv-list-head { background: var(--paper-2); color: var(--muted-2); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--line-2); }
.tv-list-row { border-bottom: 1px dashed var(--line-2); }
.tv-list-row:last-child { border-bottom: 0; }
.tv-list-row .mono { color: var(--ink); }

/* 4.2 — State machine */
.sm-wrap { padding: 14px; }
.sm-svg-wrap { width: 100%; }
.sm-legend { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.sm-legend-key { display: flex; align-items: center; gap: 6px; }
.sm-legend-swatch { width: 14px; height: 3px; }
.sm-legend-swatch.is-gold { background: var(--accent); }
.sm-legend-swatch.is-red { background: var(--red); }
.sm-legend-swatch.is-line { background: var(--line); }

/* 4.3 — Document checklist */
.dc-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px; }
.dc-head-id { font-family: var(--ff-mono); font-size: 15px; color: var(--ink); font-weight: 500; }
.dc-head-meta { font-size: 13.5px; color: var(--muted-2); }
.dc-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--line-2);
  font-size: 15px;
}
.dc-row:last-child { border-bottom: 0; }
.dc-name { color: var(--ink); }
.dc-pill {
  font-size: 12.5px; font-weight: 500; padding: 3px 8px;
  letter-spacing: 0.04em;
}
.dc-pill.is-present { background: var(--green-soft); color: var(--green); }
.dc-pill.is-pending { background: var(--accent-soft); color: var(--accent-hover); }
.dc-pill.is-missing { background: var(--red-soft); color: var(--red); }

/* 4.3 Documents — 2-col grid + present/missing/pending cards
   matches the platform's actual Documents card pattern */
.dc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dc-card {
  font-size: 15px; padding: 10px 12px;
  border: 1px solid transparent;
}
.dc-present {
  background: #fff;
  border-color: #E2E6EB;
  color: #0F1923;
}
.dc-present::first-letter { color: #059669; font-weight: 700; }
.dc-pending {
  background: #FFFBEB;
  border-color: rgba(217,119,6,0.22);
  color: #92400E;
}
.dc-missing {
  background: #FEF2F2;
  border-color: rgba(220,53,69,0.2);
  color: #B91C1C;
  font-weight: 500;
}
.dc-card-meta {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  margin-top: 2px;
  opacity: 0.75;
}
.dc-action { font-size: 13.5px; color: var(--accent); }
.dc-action.is-muted { color: var(--muted-3); }

/* 4.4 — P&L waterfall */
.pl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pl-head-id { font-family: var(--ff-mono); font-size: 15px; color: var(--ink); font-weight: 500; }
.pl-row { display: grid; grid-template-columns: 1fr auto; padding: 7px 0; font-size: 15px; border-bottom: 1px dashed var(--line-2); }
.pl-row:last-of-type { border-bottom: 0; }
.pl-row .pl-key { color: var(--muted); }
.pl-row .pl-val { font-family: var(--ff-mono); color: var(--ink); }
.pl-row.is-revenue .pl-val { color: var(--green); }
.pl-row.is-cost .pl-val { color: var(--red); }
.pl-row.is-total { border-top: 1px solid var(--ink); border-bottom: 0; padding-top: 10px; margin-top: 8px; font-weight: 600; }
.pl-row.is-net .pl-val { color: var(--green); font-weight: 600; }
.pl-margin-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--green-soft); color: var(--green); font-size: 15px; margin-top: 14px; font-family: var(--ff-mono); font-weight: 500; }
.pl-waterfall { margin-top: 16px; }
.pl-bar-row { display: grid; grid-template-columns: 100px 1fr 90px; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.pl-bar-key { color: var(--muted-2); }
.pl-bar { height: 10px; background: var(--line-3); position: relative; }
.pl-bar-fill { height: 100%; }
.pl-bar-fill.is-rev { background: var(--green); width: 100%; }
.pl-bar-fill.is-mfr { background: var(--red); width: 68.8%; }
.pl-bar-fill.is-frt { background: var(--red); width: 7.6%; }
.pl-bar-fill.is-ins { background: var(--red); width: 0.75%; }
.pl-bar-fill.is-oth { background: var(--red); width: 1.6%; }
.pl-bar-fill.is-net { background: var(--accent); width: 21.2%; }
.pl-bar-val { font-family: var(--ff-mono); color: var(--ink); text-align: right; font-size: 13.5px; }

/* 4.5 — Atlas signals mock */
/* 4.5 Atlas — coming-soon framing */
.cap-tag-coming {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  padding: 2px 10px;
  margin-left: 8px;
  background: rgba(176,141,87,0.12);
  color: var(--accent);
  letter-spacing: 0.02em;
  text-transform: none;
  vertical-align: middle;
}
.cap-note {
  font-size: 15px;
  color: var(--muted-2);
  font-style: italic;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.atlas-signals-preview {
  position: relative;
  opacity: 0.85;
}
.atlas-signals-preview::before {
  content: 'PREVIEW';
  position: absolute;
  top: -10px; right: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  z-index: 1;
}

.atlas-signals {
  background: var(--paper);
  border: 1px solid var(--line-2);
  display: flex; flex-direction: column;
}
.atlas-sig {
  display: flex; gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
}
.atlas-sig:last-child { border-bottom: 0; }
.atlas-sig-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  position: relative;
}
.atlas-sig-dot.is-warn { background: var(--red); box-shadow: 0 0 0 4px rgba(201, 74, 62, 0.14); }
.atlas-sig-dot.is-info { background: var(--blue); box-shadow: 0 0 0 4px rgba(59, 94, 165, 0.14); }
.atlas-sig-dot.is-ok   { background: var(--green); box-shadow: 0 0 0 4px rgba(47, 122, 77, 0.14); }
.atlas-sig-body { flex: 1; min-width: 0; }
.atlas-sig-title { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.atlas-sig-detail { font-size: 15px; color: var(--muted); line-height: 1.5; margin-bottom: 8px; }
.atlas-sig-action {
  font-size: 13px; color: var(--accent);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
}

/* ============== HOW IT CONNECTS (6) ============== */
.s-connects-inner { max-width: var(--max-w); margin: 0 auto; }
.s-connects-head { margin-bottom: 56px; max-width: 760px; }
.connects-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.connect-diagram {
  background: var(--paper-2); border: 1px solid var(--line-2);
  padding: 24px;
  position: relative;
}
.connect-diagram svg { width: 100%; height: auto; }
.connect-table {
  border: 1px solid var(--line);
  font-size: 15px;
  background: var(--paper);
}
.connect-table-row { display: grid; grid-template-columns: 0.8fr 1.4fr 1.4fr; padding: 12px 16px; border-bottom: 1px solid var(--line-2); align-items: start; }
.connect-table-row:last-child { border-bottom: 0; }
.connect-table-row.is-head { background: var(--paper-2); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.connect-section { font-weight: 500; color: var(--ink); }
.connect-section a { color: var(--accent); }
.connect-flow { color: var(--muted); }
.connect-see { color: var(--muted); }

/* ============== DEEPER (7) ============== */
.s-deeper-inner { max-width: var(--max-w); margin: 0 auto; }
.s-deeper-head { margin-bottom: 56px; max-width: 760px; }
.deeper-block { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; padding: 56px 0; border-top: 1px solid var(--line); align-items: center; }
.deeper-block:first-of-type { border-top: 0; padding-top: 0; }
.deeper-block.is-flip { grid-template-columns: 1.3fr 1fr; }
.deeper-block.is-flip .deeper-text { order: 2; }
.deeper-block.is-flip .deeper-mock { order: 1; }
.deeper-text h3 { margin-bottom: 16px; }
.deeper-text p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.deeper-text p strong { color: var(--ink); }

/* Pipeline conversion mockup */
.pc-grid { display: grid; grid-template-columns: 1fr 16px 1fr; gap: 0; align-items: stretch; }
.pc-card { background: var(--paper); border: 1px solid var(--line-2); padding: 14px; }
.pc-card-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.pc-stage-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--green-soft); color: var(--green); font-size: 13.5px; font-weight: 500; margin-bottom: 10px; }
.pc-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 5px 0; font-size: 14px; border-bottom: 1px dashed var(--line-2); }
.pc-row:last-child { border-bottom: 0; }
.pc-key { color: var(--muted-2); }
.pc-val { color: var(--ink); }
.pc-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-family: var(--ff-mono);
}

/* Amendment dialog */
.am-dialog { background: var(--paper); border: 1px solid var(--line); }
.am-head { padding: 14px 16px; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; }
.am-head-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.am-head-id { font-family: var(--ff-mono); font-size: 13.5px; color: var(--muted); }
.am-grid { display: grid; grid-template-columns: 1fr 1fr; }
.am-col { padding: 16px; }
.am-col + .am-col { border-left: 1px solid var(--line-2); }
.am-col-title { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; }
.am-change { font-size: 15px; padding: 10px 12px; background: var(--paper-2); border-left: 2px solid var(--accent); margin-bottom: 8px; font-family: var(--ff-mono); }
.am-impact-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; padding: 7px 0; font-size: 14.5px; border-bottom: 1px dashed var(--line-2); align-items: start; }
.am-impact-row:last-child { border-bottom: 0; }
.am-impact-key { color: var(--muted-2); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.am-impact-val { color: var(--ink); }
.am-flag { font-size: 12.5px; padding: 2px 7px; font-family: var(--ff-mono); }
.am-flag.is-ok { background: var(--green-soft); color: var(--green); }
.am-flag.is-warn { background: var(--accent-soft); color: var(--accent-hover); }
.am-foot { padding: 12px 16px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; gap: 8px; }

/* ============== DAY IN LIFE (8) ============== */
.s-day-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; }
.s-day h2 { margin-bottom: 0; }
.s-day .day-prose p { font-size: 18px; line-height: 1.75; color: var(--muted); }
.s-day .day-prose p + p { margin-top: 20px; }
.s-day .day-prose strong { color: var(--ink); font-weight: 600; }
.s-day .day-prose .mono { color: var(--ink); }

/* ============== COMPARISON (9) ============== */
.s-compare-inner { max-width: var(--max-w); margin: 0 auto; }
.s-compare-head { margin-bottom: 40px; max-width: 800px; }
.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.cmp-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 15px; }
.cmp-table th, .cmp-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.cmp-table thead th { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); background: var(--paper-2); }
.cmp-table thead th.is-edma { color: var(--accent); border-left: 2px solid var(--accent); background: var(--accent-soft-2); }
.cmp-table tbody td.is-edma { border-left: 2px solid var(--accent); background: var(--accent-soft-2); }
.cmp-table tbody td.cmp-cap { font-weight: 500; color: var(--ink); }
.cmp-table tr.cmp-group-head td {
  padding: 22px 16px 8px;
  background: transparent;
  border-bottom: 0;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}
.cmp-table tr.cmp-group-head:first-child td { padding-top: 16px; }
.cmp-yes { color: var(--accent); font-weight: 600; }
.cmp-yes-plain { color: var(--green); font-weight: 500; }
.cmp-partial { color: var(--muted); font-style: italic; font-size: 14px; }
.cmp-no { color: var(--muted-3); }
.cmp-body { margin-top: 28px; max-width: 900px; font-size: 17px; line-height: 1.7; color: var(--muted); }

/* ============== FAQ (10) ============== */
.s-faq-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; }
.s-faq h2 { margin-bottom: 16px; }
.faq-item { padding: 24px 0; border-bottom: 1px solid var(--line-2); }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-q { font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 12px; letter-spacing: -0.01em; }
.faq-a { font-size: 17.5px; line-height: 1.7; color: var(--muted); }

/* ============== CTA STRIP (11) ============== */
.s-cta { background: var(--ink); color: #fff; border-bottom: 0; }
.s-cta-inner { max-width: 920px; margin: 0 auto; text-align: center; }
.s-cta h2 { color: #fff; margin-bottom: 18px; }
.s-cta p { color: rgba(255,255,255,0.7); font-size: 18px; line-height: 1.6; margin-bottom: 32px; }
.s-cta .cta-row { justify-content: center; }
.s-cta .link-arrow { color: var(--accent); margin-top: 22px; display: inline-flex; }

/* ============== RELATED (12) ============== */
.s-related-inner { max-width: var(--max-w); margin: 0 auto; }
.s-related h3 { margin-bottom: 32px; font-size: 15px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card {
  background: var(--paper); border: 1px solid var(--line);
  padding: 28px;
  transition: border-color var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth);
  display: flex; flex-direction: column; gap: 12px;
}
.related-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.related-card-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.related-card-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.related-card-desc { font-size: 16px; color: var(--muted); line-height: 1.55; }
.related-card-link { color: var(--accent); font-size: 15.5px; font-weight: 500; margin-top: auto; padding-top: 8px; }

/* ============== FOOTER ============== */
.site-footer { background: var(--ink); color: #fff; }
.footer-top { border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-top-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 48px var(--inner-pad);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start;
}
.edma-logo--footer .phoenix { height: 40px; }
.edma-logo--footer .edma-wordmark { font-size: 26px; color: #fff; }
.edma-logo--footer { color: #fff; }
.footer-brand-tag {
  color: rgba(255,255,255,0.55);
  font-size: 16px; line-height: 1.55;
  margin-top: 14px; max-width: 480px;
}
.footer-newsletter-title {
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 6px;
}
.footer-newsletter-sub {
  color: rgba(255,255,255,0.55); font-size: 15px; margin-bottom: 14px;
}
.footer-newsletter { display: flex; gap: 8px; }
.footer-newsletter input {
  flex: 1; padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-family: inherit; font-size: 15px;
  outline: none;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,0.35); }
.footer-newsletter input:focus { border-color: var(--accent); }
.footer-newsletter button {
  padding: 12px 18px; background: var(--accent); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 500;
  border: 0; cursor: pointer; transition: background var(--dur-fast);
}
.footer-newsletter button:hover { background: var(--accent-hover); }
.footer-links {
  max-width: var(--max-w); margin: 0 auto;
  padding: 56px var(--inner-pad);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-col-title {
  font-size: 14px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px;
}
.footer-link-list { list-style: none; padding: 0; margin: 0; }
.footer-link-list li { padding: 4px 0; }
.footer-link-list a {
  font-size: 15px; color: rgba(255,255,255,0.65);
  transition: color var(--dur-fast); text-decoration: none;
}
.footer-link-list a:hover { color: #fff; }
.footer-logos { border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-logos-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 32px var(--inner-pad);
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.footer-logos-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5); text-transform: uppercase;
}
.footer-logos-row { display: flex; gap: 36px; flex-wrap: wrap; flex: 1; list-style: none; padding: 0; margin: 0; }
.footer-logos-row li { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); }
.footer-region { border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-region-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 22px var(--inner-pad);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.footer-region-left, .footer-social {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 14.5px; color: rgba(255,255,255,0.7);
}
.footer-region-left .label, .footer-social .label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4); text-transform: uppercase;
}
.footer-region-left a { color: inherit; text-decoration: none; }
.footer-region-left a:hover { color: #fff; }
.footer-region-divider { color: rgba(255,255,255,0.2); }
.footer-region-left a.is-muted { color: rgba(255,255,255,0.4); }
.footer-social-icon {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,0.15);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  transition: all var(--dur-fast); text-decoration: none; color: inherit;
}
.footer-social-icon:hover { border-color: var(--accent); color: var(--accent); }
.footer-legal-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 18px var(--inner-pad);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,0.45);
}
.footer-legal-inner .links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal-inner .links a { color: inherit; text-decoration: none; }
.footer-legal-inner .links a:hover { color: #fff; }
.footer-legal-inner .status-ok { color: var(--green-on-dark); }

/* ============== RESPONSIVE ============== */
@media (max-width: 1100px) {
  .s-problem-grid, .connects-grid, .cap, .cap.cap-flip,
  .deeper-block, .deeper-block.is-flip,
  .s-day-inner, .s-faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .cap.cap-flip .cap-text, .cap.cap-flip .cap-mock,
  .deeper-block.is-flip .deeper-text, .deeper-block.is-flip .deeper-mock { order: initial; }
  .footer-links { grid-template-columns: repeat(3, 1fr); }
  .footer-top-inner { grid-template-columns: 1fr; gap: 32px; }
  .related-grid { grid-template-columns: 1fr; }
  /* Centerpiece responsive — stack two-column body */
  .cp-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-kpis { grid-template-columns: repeat(2, 1fr); }
  .cp-docs { grid-template-columns: 1fr; }
  .cp-nav span:nth-child(n+9) { display: none; }
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .kpi:nth-child(1), .kpi:nth-child(2), .kpi:nth-child(3) { border-bottom: 1px solid var(--line-2); }
  .kpi:nth-child(3), .kpi:nth-child(6) { border-right: 0; }
  .role-cards { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* Problem section: stack to 1 col, tighter padding */
  .problem-grid { grid-template-columns: 1fr; gap: 16px; }
  .s-problem-head { margin-bottom: 32px; }
  .problem-card { padding: 24px 22px; }
  .problem-card h3 { font-size: 19px; }
  .problem-card p { font-size: 15px; }
  :root { --inner-pad: 20px; }
  main > section, main > div > section { padding: 56px 20px; }
  main > section.section-tight, main > div > section.section-tight { padding: 56px 20px; }
  .s-centerpiece { padding-bottom: 56px; }
  .nav-list, .nav-signin, .nav-link-pricing { display: none; }
  .nav-cta { display: inline-flex; font-size: 14px; padding: 8px 14px; }
  .nav-hamburger { display: flex; }
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-top-inner { padding: 32px 20px; }
  .footer-region-inner { padding: 18px 20px; }
  .footer-legal-inner { padding: 16px 20px; }
  /* Centerpiece mobile */
  .cp-page { padding: 16px; }
  .cp-h1 { font-size: 22px; }
  .cp-section-tabs { gap: 16px; }
  .cp-section-tabs span { font-size: 15px; padding: 8px 0; }
  .cp-action-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cp-header-card { flex-direction: column; gap: 14px; }
  .cp-header-side { align-items: flex-start; }
  .cp-transitions { justify-content: flex-start; }
  .cp-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cp-kpi { padding: 14px 16px; }
  .cp-kpi-val { font-size: 22px; }
  .cp-h2 { font-size: 19px; }
  .cp-tbl th, .cp-tbl td { padding: 10px 12px; font-size: 14px; }
  .tv-board { grid-template-columns: 1fr; }
  .am-grid { grid-template-columns: 1fr; }
  .am-col + .am-col { border-left: 0; border-top: 1px solid var(--line-2); }
  .pc-grid { grid-template-columns: 1fr; }
  .pc-arrow { padding: 8px 0; transform: rotate(90deg); }
  .h-display { font-size: 40px; }
  .h-section { font-size: 32px; }
  .h-section-sm { font-size: 28px; }
  .h-section-xs { font-size: 26px; }
  .cp-nav, .cp-search { display: none; }
  .cp-topnav { padding: 8px 12px; gap: 8px; }
  .cp-ws { font-size: 13px; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi { min-height: auto; padding: 18px 16px; }
  .kpi:nth-child(2n) { border-right: 0; }
  .kpi:nth-child(odd) { border-right: 1px solid var(--line-2); }
  .kpi:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--line-2); }
  .kpi-val { font-size: 26px; }
  .role-strip { padding: 18px 18px 22px; }
  .s-portfolio-head h2 { font-size: 28px; }
  .s-hero-inner .hero-tag { font-size: 18px; }

  /* Portfolio cards — 1 col, show only cards 1 / 3 / 5 (Production behind / Pending allocation / Recent activity) */
  .ov-cards { grid-template-columns: 1fr; }
  .ov-card:nth-child(2),
  .ov-card:nth-child(4),
  .ov-card:nth-child(6) { display: none; }

  /* Board timeline — hide list section + label, show only W1 week label */
  .tv-list { display: none; }
  .tv-list-label { display: none; }
  .tv-tl-week:not(:first-child) { visibility: hidden; font-size: 0; }

  /* Data model — hide "What flows" (2nd column of 3) */
  .connect-table-row { grid-template-columns: 1fr 1fr; }
  .connect-table-row > *:nth-child(2) { display: none; }

  /* Comparison table → stacked cards on mobile.
     The 6-column table (capability + 4 competitors + EDMA) overflows a 390px
     viewport; min-width: 880px hides everything past Flexport. On mobile we
     drop the table layout entirely and render each row as a card with
     competitor labels injected via ::before pseudo-elements. */
  .cmp-table-wrap { overflow: visible; border: 0; }
  .cmp-table { display: block; min-width: 0; width: 100%; }
  .cmp-table thead { display: none; }
  .cmp-table tbody { display: block; }

  /* Group headers stay as accent-coloured section labels between cards */
  .cmp-table tr.cmp-group-head { display: block; padding: 0; }
  .cmp-table tr.cmp-group-head td {
    display: block; padding: 24px 0 6px;
    border-bottom: 0;
  }
  .cmp-table tr.cmp-group-head:first-child td { padding-top: 4px; }

  /* Data rows render as cards */
  .cmp-table tbody tr:not(.cmp-group-head) {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    margin-bottom: 10px;
    padding: 0;
  }
  .cmp-table tbody tr:not(.cmp-group-head) td {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line-2);
    text-align: right;
  }
  .cmp-table tbody tr:not(.cmp-group-head) td:last-child { border-bottom: 0; }

  /* First cell — capability name — becomes the card title (full width, no flex) */
  .cmp-table tbody tr:not(.cmp-group-head) td:first-child {
    display: block;
    padding: 14px 16px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    font-weight: 600; font-size: 16px; color: var(--ink);
    text-align: left;
  }

  /* Inject competitor labels as the left-hand label of each row */
  .cmp-table tbody tr:not(.cmp-group-head) td:nth-child(2)::before { content: 'Flexport'; }
  .cmp-table tbody tr:not(.cmp-group-head) td:nth-child(3)::before { content: 'Cin7'; }
  .cmp-table tbody tr:not(.cmp-group-head) td:nth-child(4)::before { content: 'CargoWise'; }
  .cmp-table tbody tr:not(.cmp-group-head) td:nth-child(5)::before { content: 'QuickBooks'; }
  .cmp-table tbody tr:not(.cmp-group-head) td:nth-child(6)::before { content: 'TradeOS'; }
  .cmp-table tbody tr:not(.cmp-group-head) td:nth-child(n+2)::before {
    color: var(--muted-2); font-size: 14px; font-weight: 500;
    text-align: left;
  }

  /* EDMA row — accent emphasis, sits below others, no border on right */
  .cmp-table tbody tr:not(.cmp-group-head) td.is-edma {
    background: var(--accent-soft-2);
    border-left: 0; border-bottom: 0;
    padding: 12px 16px;
  }
  .cmp-table tbody tr:not(.cmp-group-head) td.is-edma::before {
    color: var(--accent); font-weight: 600;
  }

  /* ─── COMPRESSION RULE: order detail (centerpiece) is the hero mock.
     Every other section compresses to summary cards on mobile.
     Hide the heavyweight visualizations; let the section text and
     KPI strip carry the story. ─── */

  /* Capabilities (5 sub-sections) — hide each .cap-mock visualization */
  [aria-labelledby="orders-what-h2"] .cap-mock { display: none; }
  /* Deeper (2 sub-sections) — same pattern, .deeper-mock also has .cap-mock */
  [aria-labelledby="orders-deeper-h2"] .cap-mock { display: none; }
  /* Connects — hide the SVG diagram, keep the lede */
  [aria-labelledby="orders-connects-h2"] .connect-diagram { display: none; }
  /* Portfolio — hide the 6 live cards (.role-strip), keep KPI strip as summary */
  [aria-labelledby="orders-portfolio-h2"] .role-strip { display: none; }

  /* Compact KPI strip — 2 cols × 3 rows on mobile (was 6-col single row) */
  [aria-labelledby="orders-portfolio-h2"] .kpi-strip {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  [aria-labelledby="orders-portfolio-h2"] .kpi {
    padding: 10px 8px;
  }
  [aria-labelledby="orders-portfolio-h2"] .kpi-label {
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }
  [aria-labelledby="orders-portfolio-h2"] .kpi-val {
    font-size: 17px;
  }
  [aria-labelledby="orders-portfolio-h2"] .kpi-trend {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .footer-links { grid-template-columns: 1fr; }
  .cp-card-head, .cp-card-body { padding: 12px 14px; }
  .cp-header-card, .cp-allocated, .cp-value-card { padding: 14px; }
  .pl-bar-row { grid-template-columns: 80px 1fr 70px; }
}

/* ──── Stack-fit grid (replaces cmp-table competitive comparison) ──── */
.stack-fit-grid {
  max-width: var(--max-w);
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.stack-fit-card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 28px 24px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stack-fit-card--accent {
  border-color: var(--accent);
  background: var(--accent-soft-2);
  grid-column: span 1;
}
.stack-fit-label {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}
.stack-fit-card--accent .stack-fit-label {
  color: var(--accent);
}
.stack-fit-role {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.stack-fit-detail {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  flex: 1;
}
@media (max-width: 1100px) {
  .stack-fit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .stack-fit-grid { grid-template-columns: 1fr; }
}


/* Per-request: padding-bottom under titles in Data Model + Where it fits */
.s-connects-head h2,
.s-compare-head h2 {
  padding-bottom: 10px;
}

/* Per-request: remove rounded corners on stack-fit cards (Where it fits)
   and FAQ items (sharp/square corners site-wide for these blocks) */
.stack-fit-card {
  border-radius: 0;
}