: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;
  --red-on-dark: #E36458;
  --amber: #c98f3e;
  --amber-soft: #fbf2e7;
  --amber-on-dark: #E0A65A;
  --blue: #3b5ea5;
  --blue-soft: #eef2f8;
  --blue-on-dark: #6F8DD0;
  --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 .eyebrow { display: inline-block; margin-bottom: 28px; }
.s-hero h1 { margin-bottom: 24px; }
.s-hero .lede { max-width: 820px; margin: 0 auto 36px; }
.cta-row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ============== CENTERPIECE (2) — PRODUCTION BOARD (Gantt) ============== */
.s-centerpiece { padding-top: 0; padding-bottom: 96px; border-bottom: 1px solid var(--line); }
.centerpiece-frame {
  max-width: 1280px; margin: 0 auto;
  background: #F4F5F7;
  color: #0F1923;
  border: 1px solid #E2E6EB;
  box-shadow: 0 1px 3px rgba(15,25,35,0.05);
  font-family: var(--ff-body);
  font-size: 13px;
  line-height: 1.45;
}
.centerpiece-caption {
  max-width: 1280px; margin: 24px auto 0;
  font-size: 15px; color: var(--muted-2); text-align: center;
  letter-spacing: 0.02em;
}

/* Production Board */
.pb {
  font-family: var(--ff-body);
  color: #0F1923;
  font-size: 14px;
}
.pb-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #E2E6EB;
  font-size: 14px;
  color: #6B7A8A;
  gap: 16px;
  flex-wrap: wrap;
}
.pb-toolbar-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pb-toolbar-right { display: flex; align-items: center; gap: 14px; }
.pb-crumb { display: flex; align-items: center; gap: 8px; }
.pb-crumb-sep { color: #D1D5DB; }
.pb-tab {
  font-size: 14px; padding: 6px 0; color: #6B7A8A;
  border-bottom: 1px solid transparent;
}
.pb-tab.is-active { color: #0F1923; border-bottom-color: var(--accent); }
.pb-toolbar-summary { display: flex; gap: 16px; font-size: 14px; }
.pb-toolbar-summary .num { color: #0F1923; font-family: var(--ff-mono); }
.pb-toolbar-summary .lbl { color: #9CA3AF; }

/* Status legend */
.pb-legend {
  display: flex; gap: 14px; padding: 12px 20px;
  border-bottom: 1px solid #E2E6EB;
  flex-wrap: wrap; font-size: 13px;
}
.pb-leg {
  display: inline-flex; align-items: center; gap: 6px;
  color: #6B7A8A;
}
.pb-leg-sw { width: 12px; height: 8px; }
.pb-leg-sw.is-planned { background: #9CA3AF; }
.pb-leg-sw.is-scheduled { background: #3B82F6; }
.pb-leg-sw.is-in-prod { background: var(--accent); }
.pb-leg-sw.is-qc-pending { background: #D97706; }
.pb-leg-sw.is-qc-passed { background: #059669; }
.pb-leg-sw.is-packed { background: #8AC79F; }
.pb-leg-sw.is-released { background: #10B981; }
.pb-leg-sw.is-failed { background: #DC2626; }

/* Gantt body */
.pb-gantt {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
}
.pb-gantt-left { border-right: 1px solid #E2E6EB; }
.pb-gantt-head, .pb-gantt-row, .pb-mfr-head, .pb-mfr-row {
  display: grid; align-items: center;
}
.pb-gantt-head, .pb-mfr-head {
  height: 36px;
  background: #F0F2F5;
  border-bottom: 1px solid #E2E6EB;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #9CA3AF;
  padding: 0 16px;
}
.pb-mfr-head { padding: 0 16px; }
/* Right (timeline) head: 12 weekly columns */
.pb-time-head {
  grid-template-columns: repeat(12, 1fr);
  font-family: var(--ff-mono); font-size: 12px;
  color: #9CA3AF;
  padding: 0;
}
.pb-time-head span {
  text-align: left; padding: 0 6px;
  border-right: 1px solid #F0F2F5;
  height: 100%; display: flex; align-items: center;
  letter-spacing: 0.04em;
}
.pb-time-head span:last-child { border-right: 0; }
.pb-time-head span.is-month-start { color: #374151; border-right-color: #9CA3AF; }

/* Manufacturer group row */
.pb-mfr {
  border-bottom: 1px solid #E2E6EB;
  display: grid; grid-template-columns: 220px 1fr;
}
.pb-mfr-left { padding: 14px 16px; border-right: 1px solid #E2E6EB; }
.pb-mfr-name { font-size: 15px; font-weight: 600; color: #0F1923; margin-bottom: 4px; }
.pb-mfr-loc { font-size: 13px; color: #6B7A8A; font-family: var(--ff-mono); letter-spacing: 0.02em; }
.pb-mfr-cap-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: #6B7A8A; }
.pb-mfr-cap-bar {
  flex: 1; height: 4px; background: #E2E6EB;
  position: relative;
}
.pb-mfr-cap-fill { height: 100%; }
.pb-mfr-cap-fill.is-78 { width: 78%; background: var(--accent); }
.pb-mfr-cap-fill.is-92 { width: 92%; background: #DC2626; }
.pb-mfr-cap-fill.is-45 { width: 45%; background: #059669; }
.pb-mfr-cap-pct { font-family: var(--ff-mono); color: #0F1923; font-size: 12.5px; min-width: 36px; text-align: right; }

.pb-track {
  position: relative;
  height: 64px;
  border-left: 0;
  background:
    linear-gradient(to right, transparent calc(100%/12 - 1px), #F0F2F5 calc(100%/12 - 1px), #F0F2F5 calc(100%/12)),
    linear-gradient(to right, transparent calc(33.33% - 1px), #D1D5DB calc(33.33% - 1px), #D1D5DB 33.33%, transparent 33.34%),
    linear-gradient(to right, transparent calc(66.66% - 1px), #D1D5DB calc(66.66% - 1px), #D1D5DB 66.66%, transparent 66.67%);
  background-size: calc(100%/12) 100%, 100% 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat, no-repeat;
}
/* Today line */
.pb-today {
  position: absolute; top: 0; bottom: 0;
  left: 25%;
  width: 1px;
  background: #6B7A8A;
  pointer-events: none;
}
.pb-today::before {
  content: 'TODAY';
  position: absolute; top: -14px; left: 4px;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.1em; color: #6B7A8A;
}
.pb-bar {
  position: absolute;
  height: 22px; top: 12px;
  display: flex; align-items: center;
  font-family: var(--ff-mono); font-size: 12.5px;
  color: rgba(0,0,0,0.85);
  padding: 0 6px;
  white-space: nowrap; overflow: hidden;
  letter-spacing: 0.02em;
}
.pb-bar.row-2 { top: 38px; }
/* Position + width modifiers (replace inline styles per design-system rules) */
.pb-bar--pos-2  { left: 2%;  }
.pb-bar--pos-6  { left: 6%;  }
.pb-bar--pos-8  { left: 8%;  }
.pb-bar--pos-14 { left: 14%; }
.pb-bar--pos-24 { left: 24%; }
.pb-bar--pos-38 { left: 38%; }
.pb-bar--pos-50 { left: 50%; }
.pb-bar--pos-60 { left: 60%; }
.pb-bar--pos-64 { left: 64%; }
.pb-bar--pos-68 { left: 68%; }
.pb-bar--w-20 { width: 20%; }
.pb-bar--w-22 { width: 22%; }
.pb-bar--w-24 { width: 24%; }
.pb-bar--w-26 { width: 26%; }
.pb-bar--w-28 { width: 28%; }
.pb-bar--w-30 { width: 30%; }
.pb-bar--w-32 { width: 32%; }
.pb-bar--w-38 { width: 38%; }
/* In-bar progress fills */
.pb-bar-fill--45 { width: 45%; }
.pb-bar-fill--78 { width: 78%; }
/* Defect flag offset */
.pb-bar-flag--right { left: 88%; }
/* Layered label sits above the .pb-bar-fill */
.pb-bar-label { position: relative; z-index: 1; }
/* Manufacturer header cell (first column of timeline header) */
.pb-gantt-head--single { grid-template-columns: 1fr; }
.pb-gantt-head--single > span { padding: 0 16px; }
/* AI plan timestamp + tier hint */
.muted-mono-hint { color: var(--muted-3); letter-spacing: 0.04em; }
.eyebrow-tier-hint { color: var(--muted-2); letter-spacing: 0.04em; }
/* Risk-radar expanded detail "Detail" label cell */
.rad-cell--detail-label {
  grid-column: 1;
  background: var(--ink);
  color: #6B7A8A;
}
.pb-bar.is-planned { background: #4a5560; color: #FFFFFF; }
.pb-bar.is-scheduled { background: #3B82F6; color: #FFFFFF; }
.pb-bar.is-in-prod { background: var(--accent); color: #FFFFFF; }
.pb-bar.is-qc-pending { background: #D97706; color: #FFFFFF; }
.pb-bar.is-qc-passed { background: #059669; color: #FFFFFF; }
.pb-bar.is-packed { background: #8AC79F; color: rgba(0,0,0,0.85); }
.pb-bar.is-released { background: #10B981; color: #FFFFFF; }
.pb-bar.is-failed { background: #DC2626; color: #FFFFFF; }
.pb-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(255,255,255,0.25);
  pointer-events: none;
}
.pb-bar-flag {
  position: absolute; top: -5px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid #DC2626;
}
.pb-rework-arrow {
  position: absolute; top: 28px; left: 0; width: 100%; height: 18px;
  pointer-events: none;
}

/* Order strip below */
.pb-foot {
  border-top: 1px solid #E2E6EB;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 18px;
  font-size: 14px;
  color: #6B7A8A;
  flex-wrap: wrap;
}
.pb-foot-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #FFFFFF;
  border: 1px solid #E2E6EB;
  font-family: var(--ff-mono);
  font-size: 13px;
  color: #0F1923;
}
.pb-foot-pill.is-flag { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.pb-foot-pill.is-ok { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }

/* ============== 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 (4) ============== */
.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 — ALLOCATION TOOL ============== */
.al-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.al-col {
  background: var(--paper); border: 1px solid var(--line-2);
  display: flex; flex-direction: column;
}
.al-col-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2);
  display: flex; justify-content: space-between; align-items: center;
}
.al-col-head .badge {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--muted-3);
  letter-spacing: 0.04em;
}
.al-col-body { padding: 10px 12px; flex: 1; }
.al-demand-card { padding: 10px 0; border-bottom: 1px dashed var(--line-2); }
.al-demand-card:last-child { border-bottom: 0; }
.al-demand-id { font-family: var(--ff-mono); font-size: 14px; color: var(--ink); font-weight: 500; }
.al-demand-client { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.al-demand-row {
  display: flex; justify-content: space-between;
  font-size: 13.5px;
  margin-top: 6px;
  color: var(--muted);
}
.al-demand-row .mono { color: var(--ink); }
.al-demand-need {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; margin-top: 8px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-family: var(--ff-mono); font-size: 13px;
  font-weight: 500;
}

.al-mfr-card {
  padding: 10px 0; border-bottom: 1px dashed var(--line-2);
}
.al-mfr-card:last-child { border-bottom: 0; }
.al-mfr-name { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.al-mfr-loc { font-size: 12.5px; color: var(--muted-2); font-family: var(--ff-mono); letter-spacing: 0.02em; }
.al-mfr-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 4px 10px; margin-top: 8px;
  font-size: 13px;
}
.al-mfr-stat { color: var(--muted); display: flex; justify-content: space-between; }
.al-mfr-stat .mono { color: var(--ink); font-weight: 500; }
.al-mfr-cap {
  margin-top: 8px; height: 4px;
  background: var(--line-3);
}
.al-mfr-cap-fill { height: 100%; background: var(--accent); }
.al-mfr-cap-fill.is-cap-78 { width: 78%; }
.al-mfr-cap-fill.is-cap-92 { width: 92%; background: var(--red); }
.al-mfr-cap-fill.is-cap-45 { width: 45%; background: var(--green); }

/* Allocation control center */
.al-alloc-card {
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-2);
}
.al-alloc-card:last-child { border-bottom: 0; }
.al-alloc-mfr { font-size: 14px; color: var(--ink); font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.al-alloc-pct { font-family: var(--ff-mono); font-size: 13px; color: var(--accent); }
.al-alloc-slider {
  position: relative; height: 28px;
  margin-top: 8px;
}
.al-alloc-track {
  position: absolute; top: 50%; left: 0; right: 0; height: 4px;
  transform: translateY(-50%);
  background: var(--line-3);
}
.al-alloc-fill {
  position: absolute; top: 50%; left: 0; height: 4px;
  transform: translateY(-50%);
  background: var(--accent);
}
.al-alloc-fill.is-300 { width: 60%; }
.al-alloc-fill.is-200 { width: 40%; }
.al-alloc-knob {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: #fff; border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.al-alloc-knob.is-300 { left: 60%; }
.al-alloc-knob.is-200 { left: 40%; }
.al-alloc-num {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--muted-2);
  margin-top: 4px;
  font-family: var(--ff-mono);
}
.al-alloc-num .qty { color: var(--ink); font-weight: 500; }
.al-validation {
  margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.al-val-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  font-size: 12px; font-family: var(--ff-mono);
  background: var(--green-soft); color: var(--green);
  letter-spacing: 0.02em;
}
.al-val-pill.is-warn { background: var(--accent-soft); color: var(--accent-hover); }
.al-foot {
  padding: 10px 12px; border-top: 1px solid var(--line-2);
  display: flex; gap: 6px; justify-content: flex-end;
}
.al-foot .btn { padding: 7px 12px; font-size: 13.5px; }

/* ============== 4.2 — AQL QC INSPECTION ============== */
.qc-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 14px;
  gap: 12px; flex-wrap: wrap;
}
.qc-head-id { font-family: var(--ff-mono); font-size: 15px; color: var(--ink); font-weight: 500; }
.qc-head-meta { font-size: 13.5px; color: var(--muted-2); margin-top: 4px; }
.qc-head-attempt {
  font-size: 12.5px; padding: 3px 8px;
  background: var(--accent-soft); color: var(--accent-hover);
  font-family: var(--ff-mono);
  letter-spacing: 0.04em;
}

/* AQL calc strip */
.qc-aql {
  background: var(--ink); color: #fff;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  font-size: 14px;
  margin-bottom: 14px;
}
.qc-aql-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: #6B7A8A;
  font-family: var(--ff-body);
}
.qc-aql-val {
  font-family: var(--ff-mono); font-size: 16px; color: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.qc-aql-val .sub { font-size: 12px; color: #6B7A8A; letter-spacing: 0.04em; }
.qc-aql-arrow { color: var(--accent); font-family: var(--ff-mono); }
.qc-aql-thresh {
  display: flex; flex-direction: column;
  font-family: var(--ff-mono); font-size: 13px;
  color: #0F1923;
  text-align: right;
}
.qc-aql-thresh .accept { color: var(--green-on-dark); }
.qc-aql-thresh .reject { color: var(--red-on-dark); }

/* defect entry list */
.qc-section-label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2);
  margin: 14px 0 8px;
}
.qc-defect-row {
  display: grid; grid-template-columns: 1fr 60px 80px 56px;
  gap: 8px; align-items: center;
  padding: 7px 10px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  margin-bottom: 4px;
  font-size: 14px;
}
.qc-defect-name { color: var(--ink); }
.qc-defect-qty { font-family: var(--ff-mono); color: var(--ink); text-align: center; }
.qc-defect-sev {
  font-size: 12px; padding: 2px 7px; text-align: center;
  font-family: var(--ff-mono); letter-spacing: 0.04em;
}
.qc-defect-sev.is-major { background: var(--accent-soft); color: var(--accent-hover); }
.qc-defect-sev.is-minor { background: var(--paper-3); color: var(--muted); }
.qc-defect-sev.is-critical { background: var(--red-soft); color: var(--red); }
.qc-defect-photo {
  font-size: 12px; color: var(--accent); font-family: var(--ff-mono);
  text-align: right;
}
.qc-defect-total {
  display: flex; justify-content: space-between;
  padding: 8px 10px;
  background: var(--accent-soft-2);
  border: 1px solid var(--accent);
  margin-top: 6px;
  font-family: var(--ff-mono); font-size: 14px;
}
.qc-defect-total .label { color: var(--muted); }
.qc-defect-total .val { color: var(--accent-hover); font-weight: 500; }
.qc-defect-total .threshold { color: var(--red); }

/* photo grid */
.qc-photos {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.qc-photo {
  aspect-ratio: 1 / 1;
  background: var(--paper-3);
  border: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
}
.qc-photo svg { width: 100%; height: 100%; }
.qc-photo-tag {
  position: absolute; bottom: 4px; left: 4px;
  font-family: var(--ff-mono); font-size: 11px;
  background: rgba(0,0,0,0.7); color: #fff;
  padding: 1px 5px; letter-spacing: 0.04em;
}

/* result toggle */
.qc-result {
  margin-top: 14px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
}
.qc-result-opt {
  padding: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-right: 1px solid var(--line);
}
.qc-result-opt:last-child { border-right: 0; }
.qc-result-opt.is-selected {
  background: var(--accent);
  color: #fff;
}
.qc-corrective {
  margin-top: 10px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: 10px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.qc-corrective-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 4px;
}

/* ============== 4.3 — YIELD TRACKING ============== */
.yt-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2);
  margin-bottom: 14px;
}
.yt-head-title { font-size: 15px; font-weight: 500; color: var(--ink); }
.yt-head-meta { font-size: 13px; color: var(--muted-2); font-family: var(--ff-mono); }

/* yield trend chart */
.yt-chart {
  background: var(--paper); border: 1px solid var(--line-2);
  padding: 14px;
  margin-bottom: 14px;
}
.yt-chart-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
  margin-bottom: 10px;
}
.yt-chart-key { display: flex; gap: 14px; font-size: 13.5px; color: var(--muted); }
.yt-chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.yt-chart-key .sw { width: 14px; height: 2px; }
.yt-chart-key .sw.is-cre { background: var(--accent); }
.yt-chart-key .sw.is-sap { background: var(--red); }
.yt-chart-y {
  font-family: var(--ff-mono); font-size: 12px;
  color: var(--muted-3);
}
.yt-chart-svg { width: 100%; height: 160px; }

/* cost comparison table */
.yt-cmp {
  border: 1px solid var(--line-2);
  font-size: 14px;
}
.yt-cmp-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-2);
  align-items: center;
  gap: 8px;
}
.yt-cmp-row:last-child { border-bottom: 0; }
.yt-cmp-row.is-head {
  background: var(--paper-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-2);
}
.yt-cmp-row .mfr { color: var(--ink); font-weight: 500; }
.yt-cmp-row .mfr small { display: block; color: var(--muted-2); font-weight: 400; font-family: var(--ff-mono); font-size: 12px; margin-top: 2px; letter-spacing: 0.02em; }
.yt-cmp-row .num { font-family: var(--ff-mono); color: var(--ink); }
.yt-cmp-row.is-variance .var-up { color: var(--red); font-weight: 600; }
.yt-cmp-row.is-variance .var-base { color: var(--muted); }

/* ============== 4.4 — AI PLANNER ============== */
.ai-grid {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 12px;
  align-items: stretch;
}
.ai-col {
  background: var(--paper); border: 1px solid var(--line-2);
  display: flex; flex-direction: column;
}
.ai-col-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2);
  display: flex; align-items: center; justify-content: space-between;
}
.ai-orb {
  width: 12px; height: 12px;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-hover));
  border-radius: 50%;
  position: relative;
}
.ai-orb::after {
  content: ''; position: absolute; inset: -4px;
  border: 1px solid var(--accent); border-radius: 50%;
  opacity: 0.4;
  animation: pulse 2s ease-in-out infinite;
}
.ai-prompt {
  padding: 14px;
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.ai-input {
  background: var(--paper-2); border: 1px solid var(--line-2);
  padding: 12px;
  font-size: 15px;
  color: var(--ink); line-height: 1.55;
}
.ai-input::before {
  content: '> ';
  color: var(--accent);
  font-family: var(--ff-mono);
}
.ai-constraints {
  font-size: 13.5px; color: var(--muted);
  background: var(--paper-2);
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
}
.ai-constraints strong { color: var(--ink); display: block; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; font-weight: 600; }

/* Plan output */
.ai-plan-body {
  padding: 14px;
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.ai-plan-summary {
  font-size: 14.5px; color: var(--muted); line-height: 1.6;
}
.ai-plan-summary strong { color: var(--ink); }
.ai-plan-list { display: flex; flex-direction: column; gap: 6px; }
.ai-plan-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  padding: 9px 12px;
  background: var(--paper-2);
  border-left: 2px solid var(--accent);
  font-size: 14px;
  align-items: center;
}
.ai-plan-mfr { color: var(--ink); font-weight: 500; }
.ai-plan-mfr small { display: block; font-size: 12px; color: var(--muted-2); font-family: var(--ff-mono); margin-top: 1px; }
.ai-plan-qty { font-family: var(--ff-mono); color: var(--ink); font-weight: 500; }
.ai-plan-window { font-family: var(--ff-mono); color: var(--muted); font-size: 13px; }
.ai-plan-conf {
  font-family: var(--ff-mono); font-size: 12px;
  padding: 2px 7px; letter-spacing: 0.04em;
}
.ai-plan-conf.is-high { background: var(--green-soft); color: var(--green); }
.ai-plan-conf.is-med { background: var(--accent-soft); color: var(--accent-hover); }
.ai-plan-foot {
  display: flex; gap: 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper-2);
}
.ai-plan-foot .btn { padding: 8px 14px; font-size: 14px; }

/* ============== HOW IT CONNECTS (5) ============== */
.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.9fr 1.4fr 1.3fr; padding: 12px 16px; border-bottom: 1px solid var(--line-2); align-items: start; gap: 12px; }
.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 (6) ============== */
.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); }

/* 6.1 — Scenario simulator */
.sim-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 14px;
}
.sim-col {
  background: var(--paper); border: 1px solid var(--line-2);
}
.sim-col-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2);
}
.sim-controls { padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.sim-control { }
.sim-control-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; font-size: 14px;
}
.sim-control-name { color: var(--ink); font-weight: 500; }
.sim-control-val { font-family: var(--ff-mono); color: var(--accent); font-weight: 500; }
.sim-slider {
  position: relative; height: 16px;
}
.sim-slider-track {
  position: absolute; top: 50%; left: 0; right: 0; height: 4px;
  transform: translateY(-50%);
  background: var(--line-3);
}
.sim-slider-fill {
  position: absolute; top: 50%; left: 0; height: 4px;
  transform: translateY(-50%);
  background: var(--accent);
}
.sim-slider-fill.is-cap { width: 30%; }
.sim-slider-fill.is-dem { width: 65%; }
.sim-slider-fill.is-yld { width: 75%; }
.sim-slider-knob {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: #fff; border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.sim-slider-knob.is-cap { left: 30%; }
.sim-slider-knob.is-dem { left: 65%; }
.sim-slider-knob.is-yld { left: 75%; }
.sim-slider-scale {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted-3);
  margin-top: 4px; font-family: var(--ff-mono);
}
.sim-baseline {
  margin-top: 12px; padding: 8px 10px;
  background: var(--paper-2);
  font-size: 13px; color: var(--muted);
  font-family: var(--ff-mono);
  border-left: 2px solid var(--muted-3);
}

/* sim impact */
.sim-impact { padding: 14px; }
.sim-impact-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-2);
  font-size: 14.5px;
}
.sim-impact-row:last-child { border-bottom: 0; }
.sim-impact-key { color: var(--muted); }
.sim-impact-val { font-family: var(--ff-mono); }
.sim-impact-val.is-warn { color: var(--accent-hover); }
.sim-impact-val.is-bad { color: var(--red); }
.sim-impact-val.is-ok { color: var(--green); }
.sim-tl {
  margin-top: 14px;
}
.sim-tl-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.sim-tl-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; }
.sim-tl-id { font-family: var(--ff-mono); color: var(--ink); }
.sim-tl-track { position: relative; height: 12px; background: var(--line-3); }
.sim-tl-orig { position: absolute; top: 0; left: 0; height: 100%; background: var(--muted-3); opacity: 0.4; }
.sim-tl-shift { position: absolute; top: 0; left: 0; height: 100%; background: var(--red); }
.sim-tl-orig.is-1 { width: 60%; }
.sim-tl-orig.is-2 { width: 50%; }
.sim-tl-orig.is-3 { width: 70%; }
.sim-tl-shift.is-1 { left: 60%; width: 12%; }
.sim-tl-shift.is-2 { left: 50%; width: 8%; }
.sim-tl-shift.is-3 { left: 70%; width: 5%; }

/* 6.2 — Predictive QC radar */
.rad-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2);
  margin-bottom: 14px;
}
.rad-head-title { font-size: 15px; font-weight: 500; color: var(--ink); }
.rad-head-meta { font-size: 13px; color: var(--muted-2); font-family: var(--ff-mono); }
.rad-grid {
  display: grid;
  grid-template-columns: 130px repeat(4, 1fr);
}
.rad-cell {
  border: 1px solid var(--line-2);
  margin: -1px 0 0 -1px;
  padding: 10px 12px;
  font-size: 13.5px;
  position: relative;
  min-height: 70px;
}
.rad-cell.is-head {
  background: var(--paper);
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
  display: flex; align-items: center;
}
.rad-cell.is-corner {
  background: var(--paper-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-2);
}
.rad-cell.is-row-head {
  background: var(--paper);
  font-weight: 500;
  display: flex; flex-direction: column; justify-content: center;
}
.rad-cell.is-row-head small { color: var(--muted-2); font-weight: 400; font-family: var(--ff-mono); font-size: 12px; margin-top: 2px; letter-spacing: 0.02em; }
.rad-cell.is-data {
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: default;
}
.rad-trend {
  font-family: var(--ff-mono); font-size: 16px; color: var(--ink); font-weight: 500;
}
.rad-trend small { font-size: 12px; color: var(--muted-2); font-weight: 400; }
.rad-spark { height: 18px; width: 100%; }
.rad-cell.is-stable { background: rgba(63,168,106,0.06); }
.rad-cell.is-stable .rad-trend { color: var(--green); }
.rad-cell.is-decline { background: rgba(201,143,62,0.1); }
.rad-cell.is-decline .rad-trend { color: var(--accent-hover); }
.rad-cell.is-fail { background: rgba(201,74,62,0.08); }
.rad-cell.is-fail .rad-trend { color: var(--red); }
.rad-cell.is-expanded {
  grid-column: span 4;
  padding: 14px 16px;
  background: var(--ink); color: #fff;
  border-color: var(--ink);
}
.rad-expanded-head { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.rad-expanded-title { font-weight: 600; color: #fff; }
.rad-expanded-title small { font-family: var(--ff-mono); color: #6B7A8A; margin-left: 8px; font-weight: 400; }
.rad-expanded-flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: rgba(224,166,90,0.15); color: var(--amber-on-dark);
  font-family: var(--ff-mono); font-size: 13px;
}
.rad-expanded-chart { width: 100%; height: 80px; }

/* ============== DAY IN LIFE (7) ============== */
.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 (8) ============== */
.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-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); }
.cmp-body strong { color: var(--ink); font-weight: 600; }

/* ============== FAQ (9) ============== */
.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 (10) ============== */
.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 (11) ============== */
.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 #D1D5DB;
}
.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: #6B7A8A; 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: #9CA3AF; }
.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: #374151;
}
.footer-region-left .label, .footer-social .label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
  color: #9CA3AF; 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: #9CA3AF; }
.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: #9CA3AF;
}
.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) {
  .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; }
  .problem-grid { 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; }
  .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; }
  .al-grid { grid-template-columns: 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
  .sim-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  :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; }
  .h-display { font-size: 40px; }
  .h-section { font-size: 32px; }
  .h-section-sm { font-size: 28px; }
  .h-section-xs { font-size: 26px; }
  .pb-toolbar-right, .pb-toolbar-summary { display: none; }
  .pb-time-head { display: none; }
  .pb-gantt, .pb-mfr { grid-template-columns: 140px 1fr; }
  .pb-mfr-name { font-size: 14px; }
  .qc-aql { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .qc-defect-row { grid-template-columns: 1fr 50px 70px; }
  .qc-defect-photo { display: none; }
  .rad-grid { grid-template-columns: 90px repeat(4, 1fr); }
  .rad-cell { padding: 8px; min-height: 60px; }
  .rad-cell.is-head, .rad-cell.is-row-head { font-size: 12.5px; }

  /* ─── COMPRESSION RULE: Production Board (centerpiece) is the hero
     mock. Every other section compresses to text + section heading.
     Hide the heavyweight visualizations. ─── */
  /* Capabilities (4 sub-sections) — hide each .cap-mock visualization */
  [aria-labelledby="prod-what-h2"] .cap-mock { display: none; }
  /* Deeper (2 sub-sections) — same pattern, .deeper-mock also has .cap-mock */
  [aria-labelledby="prod-deeper-h2"] .cap-mock { display: none; }
  /* Connects — hide the SVG diagram, keep the lede */
  [aria-labelledby="prod-connects-h2"] .connect-diagram { display: none; }
}
@media (max-width: 480px) {
  .footer-links { grid-template-columns: 1fr; }
  .pb-gantt, .pb-mfr { grid-template-columns: 1fr; }
  .pb-mfr-left { border-right: 0; border-bottom: 1px solid #E2E6EB; }
  .pb-track { height: 80px; }
  .yt-cmp-row { grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr; font-size: 13px; }
  .yt-cmp-row > *:nth-child(5) { display: none; }
}

/* ──── /product/production audit additions ──── */

/* Title padding-bottom on Data Model + Where it fits sections (matches orders) */
.s-connects-head h2,
.s-compare-head h2 {
  padding-bottom: 10px;
}

/* Stack-fit grid replaces competitive comparison table */
.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: 0;
  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; }
}