:root{
  --bg: #0C0F14;
  --surface: #141A24;
  --surface-2: #1C2331;
  --border: #27303F;
  --border-soft: #1E2635;
  --text: #F0F3F8;
  --text-dim: #B7C0CE;
  --text-faint: #6D7788;
  --amber: #e2a03f;
  --teal: #55E0C9;
  --red: #e2665f;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:0.35;
  pointer-events:none;
  z-index:0;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 0%, transparent 70%);
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:960px; margin:0 auto; padding:0 28px; position:relative; z-index:1;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 28px; position:relative; z-index:1;}
::selection{background:var(--teal); color:#0C0F14;}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(12,15,20,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:960px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:var(--mono); font-weight:600; font-size:14px;
  letter-spacing:0.02em;
}
.nav-links{display:flex; gap:28px; font-family:var(--mono); font-size:13px; color:var(--text-dim);}
.nav-links a:hover{color:var(--text);}
.nav-links .n{color:var(--text-faint); margin-right:6px;}

/* ---------- HERO (index) ---------- */
.hero{padding:88px 0 64px;}
.eyebrow{
  font-family:var(--mono); font-size:13px; letter-spacing:0.12em;
  color:var(--text-faint); text-transform:uppercase; margin-bottom:18px;
}
h1{
  font-family:var(--display);
  font-size:clamp(38px, 5.8vw, 60px);
  font-weight:600; line-height:1.08; letter-spacing:-0.025em;
  margin-bottom:24px; max-width:820px;
}
h2,h3{font-family:var(--display); letter-spacing:-0.02em;}
.sec-title,.case-title,.contact h2,.cs-section h2,.cs-section h3,.dc-head,.tl-role{font-family:var(--display);}
.hero-lead{
  font-size:20px; color:var(--text-dim); max-width:640px; margin-bottom:26px;
}
.hero-lead a{
  color:var(--teal); text-decoration:none; font-weight:600;
  border-bottom:1px solid rgba(85,224,201,0.35); padding-bottom:1px;
  transition:border-color .15s ease;
}
.hero-lead a:hover{border-bottom-color:var(--teal);}
.hero-sub{
  font-size:21px; line-height:1.55; color:var(--text-dim); max-width:660px; margin-bottom:36px;
}
.hero-sub strong{color:var(--text); font-weight:600;}
.hero-sub a{
  color:var(--teal); border-bottom:1px solid rgba(85,224,201,0.35);
  padding-bottom:1px; transition:border-color .15s ease;
}
.hero-sub a:hover{border-bottom-color:var(--teal);}
.hero-sub a strong{color:var(--teal);}

/* ---------- KPI STRIP ---------- */
.kpis{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:6px;
  overflow:hidden; margin-top:20px;
}
.kpi{
  display:block; background:var(--surface); padding:22px 16px; text-align:left;
  text-decoration:none; transition:background 0.18s ease;
}
.kpi:hover{background:rgba(85,224,201,0.16);}
.kpi .val{font-family:var(--mono); font-size:22px; font-weight:600; color:var(--teal); font-variant-numeric:tabular-nums;}
.kpi .lbl{font-size:12px; color:var(--text-dim); margin-top:6px; line-height:1.35;}
@media (max-width:760px){ .kpis{grid-template-columns:repeat(2,1fr);} }

/* ---------- SECTION SHELL ---------- */
section{padding:80px 0;}
.section-head{margin-bottom:44px;}
.sec-eyebrow{
  font-family:var(--mono); font-size:12px; color:var(--text-faint);
  letter-spacing:0.1em; text-transform:uppercase; margin-bottom:10px;
}
.sec-title{font-size:28px; font-weight:600; letter-spacing:-0.01em;}
.sec-note{color:var(--text-dim); max-width:560px; margin-top:12px; font-size:16px;}
.prose p{color:var(--text-dim); max-width:640px; font-size:17px; line-height:1.65; margin-bottom:18px;}
.prose p:last-child{margin-bottom:0;}

/* ---------- CASE CARDS (index — 2×2 clickable grid) ---------- */
.case-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.case-link{
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
  padding:26px 26px 22px;
  min-height:280px;
  transition:border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.case-link:hover{
  border-color:var(--teal);
  background:var(--surface-2);
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,0.22);
}
.case-top{
  display:flex; align-items:center; justify-content:flex-end;
  margin-bottom:16px;
}
.case-num{font-family:var(--mono); color:var(--text-faint); font-size:13px;}
.case-title{font-size:19px; font-weight:600; line-height:1.32; letter-spacing:-0.01em;}
.case-dek{font-size:15px; color:var(--text-dim); margin-top:10px; line-height:1.55;}
.case-tags{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.tag{
  font-family:var(--mono); font-size:11px; color:var(--text-dim);
  border:1px solid var(--border); border-radius:4px; padding:3px 8px;
}
.case-diff{
  font-family:var(--mono); font-size:13px; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:999px; padding:4px 12px;
  background:rgba(85,224,201,0.05);
}
.case-diff .before{color:var(--red); text-decoration:line-through; opacity:0.7;}
.case-diff .after{color:var(--teal); font-weight:600;}
.case-cta{
  margin-top:auto; padding-top:20px;
  font-family:var(--mono); font-size:13px; font-weight:500;
  color:var(--teal);
  display:flex; align-items:center; gap:8px;
}
.case-arrow{transition:transform 0.18s ease;}
.case-link:hover .case-arrow{transform:translateX(4px);}
@media (max-width:640px){
  .case-grid{grid-template-columns:1fr;}
  .case-link{min-height:0;}
}

/* ---------- TIERED WORK SECTION ---------- */
.tier-head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:52px 0 18px; padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.tier-head h3{
  font-family:var(--display); font-size:15px; font-weight:600;
  letter-spacing:-0.01em;
}
.tier-head .tier-note{font-size:13px; color:var(--text-faint);}

/* featured: first card spans the full grid width */
.case-link.wide{grid-column:1/-1; min-height:0;}
.case-two-part .case-cta{gap:22px;}
.case-two-part .case-cta a{
  color:var(--teal); text-decoration:none;
  border-bottom:1px solid rgba(85,224,201,0.35); padding-bottom:1px;
}
.case-two-part .case-cta a:hover{border-bottom-color:var(--teal);}

/* compact rows for secondary tiers */
.case-rows{
  display:flex; flex-direction:column; gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:10px; overflow:hidden;
  margin-bottom:40px;
}
.case-row{
  display:grid; grid-template-columns:1fr auto 22px;
  align-items:center; gap:16px;
  background:var(--surface); padding:18px 22px;
  transition:background 0.18s ease;
}
.case-row:hover{background:var(--surface-2);}
.cr-title{
  font-family:var(--display); font-size:16px; font-weight:600;
  line-height:1.35; letter-spacing:-0.01em;
}
.cr-sub{font-size:13px; color:var(--text-dim); margin-top:4px; line-height:1.45;}
.case-row .case-diff{font-size:12px; padding:3px 10px;}
.case-row .case-arrow{color:var(--teal); font-size:15px; text-align:right;}
.case-row:hover .case-arrow{transform:translateX(4px);}
@media (max-width:640px){
  .case-row{grid-template-columns:1fr auto; gap:10px 12px; padding:16px 18px;}
  .case-row .case-num{display:none;}
  .case-row .case-arrow{display:none;}
}

/* ---------- TIMELINE ---------- */
.tl{border-left:1px solid var(--border); margin-left:6px;}
.tl-item{position:relative; padding:0 0 40px 30px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:""; position:absolute; left:-5px; top:4px;
  width:9px; height:9px; border-radius:50%; background:var(--bg);
  border:2px solid var(--teal);
}
.tl-item.current::before{background:var(--teal); box-shadow:0 0 0 4px rgba(85,224,201,0.12);}
.tl-item.past::before{border-color:var(--text-faint);}
.tl-date{font-family:var(--mono); font-size:12px; color:var(--text-faint); margin-bottom:6px;}
.tl-role{font-size:16px; font-weight:600;}
.tl-org{font-size:15px; color:var(--text-dim); margin-bottom:8px;}
.tl-detail{font-size:15px; color:var(--text-dim); max-width:600px;}

/* role ladder within a single company */
.tl-roles{
  list-style:none; margin:16px 0 0; padding:0;
  border:1px solid var(--border-soft); border-radius:6px;
  background:var(--surface); max-width:600px; overflow:hidden;
}
.tl-roles li{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:11px 16px; border-top:1px solid var(--border-soft);
}
.tl-roles li:first-child{border-top:none;}
.tl-roles .r-title{font-size:14px; color:var(--text); font-weight:600; flex:1; min-width:180px;}
.tl-roles li:first-child .r-title::after{
  content:"current"; font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--teal);
  border:1px solid rgba(85,224,201,0.4); background:rgba(85,224,201,0.08);
  padding:2px 7px; border-radius:20px; margin-left:10px; white-space:nowrap;
}
.tl-roles .r-date{font-family:var(--mono); font-size:12px; color:var(--text-faint); white-space:nowrap;}

/* ---------- CONTACT ---------- */
.contact{
  border:1px solid var(--border); border-radius:6px; background:var(--surface);
  padding:44px; text-align:left; margin-top:40px;
}
.contact h2{font-size:26px; font-weight:600; margin-bottom:14px; letter-spacing:-0.01em;}
.contact p{color:var(--text-dim); max-width:520px; margin-bottom:24px;}
.contact-links{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  font-family:var(--mono); font-size:13px; padding:10px 18px; border-radius:5px;
  border:1px solid var(--border);
}
.btn.primary{background:var(--teal); color:#0C0F14; border-color:var(--teal); font-weight:600;}
.btn:hover{border-color:var(--text-dim);}
.btn.primary:hover{opacity:0.9;}

footer{padding:32px 0 60px; text-align:left; font-family:var(--mono); font-size:12px; color:var(--text-faint);}

/* ================= CASE STUDY DETAIL PAGE ================= */
.breadcrumb{
  font-family:var(--mono); font-size:13px; color:var(--text-faint);
  padding:28px 0 0;
}
.breadcrumb a{color:var(--text-dim);}
.breadcrumb a:hover{color:var(--teal);}

.case-hero{padding:24px 0 56px; border-bottom:1px solid var(--border);}
.case-hero .eyebrow{margin-bottom:16px;}
.case-hero h1{font-size:clamp(28px,4.2vw,42px); max-width:700px;}
.case-hero .dek{font-size:18.5px; color:var(--text-dim); max-width:620px; margin-top:16px;}

.case-meta{
  display:flex; gap:32px; flex-wrap:wrap; margin-top:32px;
  font-family:var(--mono);
}
.case-meta .m-item .l{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em;}
.case-meta .m-item .v{font-size:16px; color:var(--text); margin-top:4px;}
.case-meta .m-item .v.hero-stat{color:var(--teal); font-weight:600; font-size:17px;}

.case-body-page{padding:56px 0;}
.cs-section{margin-bottom:52px;}
.cs-section:last-child{margin-bottom:0;}
.cs-label{
  font-family:var(--mono); font-size:12px; color:var(--teal);
  text-transform:uppercase; letter-spacing:0.1em; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.cs-label::before{content:""; width:16px; height:1px; background:var(--teal);}
.cs-section h2{font-size:22px; font-weight:600; margin-bottom:16px; letter-spacing:-0.005em;}
.cs-section p{color:var(--text-dim); font-size:18px; line-height:1.75; margin-bottom:16px; max-width:680px;}
.cs-section p:last-child{margin-bottom:0;}
.cs-section strong{color:var(--text); font-weight:600;}
.cs-section ul{padding-left:20px; margin:10px 0 14px;}
.cs-section li{color:var(--text-dim); font-size:18px; line-height:1.7; margin-bottom:9px; max-width:660px;}
.cs-section li strong{color:var(--text);}

.pull-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:6px;
  overflow:hidden; margin:20px 0 6px;
}
.pull-stats .ps{background:var(--surface); padding:20px;}
.pull-stats .ps .n{font-family:var(--mono); font-size:20px; font-weight:600; color:var(--teal); font-variant-numeric:tabular-nums;}
.pull-stats .ps .l{font-size:12px; color:var(--text-dim); margin-top:6px;}
@media (max-width:640px){ .pull-stats{grid-template-columns:1fr;} }

/* ---------- CALLOUTS ---------- */
.callout{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--teal);
  border-radius:6px;
  padding:20px 22px 20px 24px;
  margin:22px 0;
  max-width:680px;
}
.callout .co-label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  color:var(--teal); text-transform:uppercase; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.callout .co-label::before{
  content:"◆"; font-size:10px; line-height:1;
}
.callout p{color:var(--text); font-size:17.5px; line-height:1.6; margin-bottom:0; max-width:none;}
.callout p + p{margin-top:10px;}
.callout strong{color:var(--teal); font-weight:600;}
.callout.key{border-left-color:var(--teal); background:linear-gradient(180deg, rgba(85,224,201,0.07), transparent 60%), var(--surface);}
.callout.key .co-label{color:var(--teal);}
.callout.warn{border-left-color:var(--red); padding:24px 26px 24px 28px;}
.callout.warn .co-label{color:var(--red);}
.callout.warn strong{color:var(--red);}
.callout.warn p{font-size:22px; line-height:1.5; letter-spacing:-0.005em;}
@media (max-width:560px){ .callout.warn p{font-size:19px;} }

/* Impact strip — banner at top of a case */
.impact-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:6px;
  overflow:hidden; margin:28px 0 8px;
}
.impact-strip .imp{background:var(--surface); padding:18px 16px;}
.impact-strip .imp .n{font-family:var(--mono); font-size:16px; font-weight:600; color:var(--teal); line-height:1.2;}
.impact-strip .imp .l{font-size:12px; color:var(--text-dim); margin-top:8px; line-height:1.4;}
@media (max-width:760px){ .impact-strip{grid-template-columns:repeat(2,1fr);} }

/* Numbered list — for "three pressures" style enumeration */
.cs-section ol.reasons{list-style:none; padding:0; margin:16px 0 14px; counter-reset:r;}
.cs-section ol.reasons li{
  counter-increment:r;
  position:relative;
  padding:14px 16px 14px 52px;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:5px;
  margin-bottom:10px;
  font-size:15px; color:var(--text-dim);
  max-width:680px;
}
.cs-section ol.reasons li::before{
  content:counter(r);
  position:absolute; left:16px; top:14px;
  font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--teal);
  border:1px solid var(--teal);
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.cs-section ol.reasons li strong{color:var(--text);}

/* ---------- DATA TABLES ---------- */
.cs-table-wrap{
  margin:20px 0 8px;
  border:1px solid var(--border);
  border-radius:6px;
  overflow-x:auto;
  background:var(--surface);
}
.cs-table{
  width:100%; border-collapse:collapse; table-layout:fixed; min-width:560px;
  font-size:14.5px; line-height:1.5;
}
.cs-table th, .cs-table td{
  padding:16px 18px; text-align:left;
  border-bottom:1px solid var(--border-soft);
  vertical-align:top;
  word-break:normal; overflow-wrap:break-word;
}
.cs-table tr:last-child td{border-bottom:none;}
.cs-table thead th{
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  color:var(--text-faint); text-transform:uppercase; font-weight:600;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.cs-table td{color:var(--text-dim);}
.cs-table td strong{color:var(--text);}

/* first-column stacked cell (layer / signal name) */
.cs-table .cell-lead{color:var(--text); font-weight:600; font-size:15px;}

.cs-table .weight{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em;
  padding:4px 9px; border-radius:20px; border:1px solid; display:inline-block;
  text-transform:uppercase; white-space:nowrap;
}
.cs-table .weight.primary{color:var(--amber); border-color:rgba(226,160,63,0.4); background:rgba(226,160,63,0.08);}
.cs-table .weight.secondary{color:var(--teal); border-color:rgba(85,224,201,0.4); background:rgba(85,224,201,0.08);}
.cs-table .weight.weak{color:var(--text-faint); border-color:var(--border);}

/* ---------- INLINE CHART ---------- */
.cs-chart{
  margin:24px 0 8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  overflow:hidden;
}
.cs-chart .chart-head{
  padding:18px 22px 14px;
  border-bottom:1px solid var(--border-soft);
}
.cs-chart .chart-title{font-size:15px; font-weight:600; color:var(--text); line-height:1.35;}
.cs-chart .chart-sub{font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-top:6px; letter-spacing:0.02em; text-transform:uppercase;}
.cs-chart svg{display:block; width:100%; height:auto; padding:22px 22px 10px;}
.cs-chart .chart-legend{
  display:flex; gap:12px 26px; flex-wrap:wrap;
  padding:6px 22px 18px;
  font-family:var(--mono); font-size:12px; color:var(--text-dim);
}
.cs-chart .chart-legend .lg-item{display:flex; align-items:center; gap:8px;}
.cs-chart .chart-legend .sw{width:16px; height:3px; border-radius:2px; flex:none;}
.cs-chart .chart-caption{
  font-family:var(--sans); font-size:14.5px; line-height:1.6; color:var(--text-dim);
  padding:16px 22px; border-top:1px solid var(--border-soft);
}
.cs-chart .chart-caption strong{color:var(--text); font-weight:600;}

/* "how to read this" helper block, sits above a chart */
.read-guide{
  margin:20px 0; padding:18px 20px;
  background:var(--surface-2); border:1px solid var(--border-soft);
  border-radius:6px; max-width:680px;
}
.read-guide .rg-label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  color:var(--text-faint); text-transform:uppercase; margin-bottom:12px;
}
.read-guide ul{list-style:none; padding:0; margin:0;}
.read-guide li{
  position:relative; padding-left:22px; margin-bottom:10px;
  font-size:14.5px; color:var(--text-dim); line-height:1.55; max-width:none;
}
.read-guide li:last-child{margin-bottom:0;}
.read-guide li::before{
  content:""; position:absolute; left:0; top:9px;
  width:8px; height:8px; border-radius:2px;
}
.read-guide li.rg-x::before{background:var(--text-faint); border-radius:50%;}
.read-guide li.rg-fn::before{background:var(--teal);}
.read-guide li.rg-rec::before{background:#9AA7BD;}
.read-guide li strong{color:var(--text); font-weight:600;}
.read-guide li .axis{color:var(--text); font-weight:600;}
.read-guide > p{
  margin:14px 0 0; padding-top:14px;
  border-top:1px solid var(--border-soft);
  font-size:14.5px; line-height:1.6; color:var(--text); max-width:none;
}

/* ---------- DECISION BLOCKS ---------- */
.decision{border:1px solid var(--border); border-radius:6px; background:var(--surface); margin:18px 0; overflow:hidden;}
.dc-head{display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--border); background:var(--surface-2); font-size:16px; font-weight:600; color:var(--text);}
.dc-head .dc-num{font-family:var(--mono); font-size:12px; color:var(--teal); border:1px solid rgba(85,224,201,0.4); border-radius:20px; padding:2px 9px; flex:none;}
.dc-body{margin:0; padding:4px 20px 12px;}
.dc-row{display:grid; grid-template-columns:118px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--border-soft);}
.dc-row:last-child{border-bottom:none;}
.dc-row dt{font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-faint); padding-top:2px;}
.dc-row dd{margin:0; font-size:15px; color:var(--text-dim); line-height:1.55;}
.dc-row dd strong{color:var(--text); font-weight:600;}
.dc-row.is-decision dt{color:var(--teal);}
.dc-row.is-decision dd{color:var(--text);}
@media (max-width:600px){ .dc-row{grid-template-columns:1fr; gap:5px;} }

/* ---------- SYSTEM FLOW ---------- */
.flow{display:grid; gap:0; margin:22px 0 8px; max-width:600px;}
.flow-node{border:1px solid var(--border); border-radius:6px; background:var(--surface); padding:14px 18px;}
.flow-node .fn-k{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal); margin-bottom:5px;}
.flow-node .fn-t{font-size:15px; color:var(--text); font-weight:600;}
.flow-node .fn-d{font-size:13.5px; color:var(--text-dim); margin-top:4px;}
.flow-node.l1{border-left:3px solid var(--text-faint);} .flow-node.l1 .fn-k{color:var(--text-dim);}
.flow-node.l2{border-left:3px solid var(--teal);} .flow-node.l2 .fn-k{color:var(--teal);}
.flow-node.terminal{border-color:rgba(85,224,201,0.4); background:linear-gradient(180deg, rgba(85,224,201,0.06), transparent), var(--surface);}
.flow-arrow{justify-self:center; color:var(--text-faint); font-family:var(--mono); font-size:14px; line-height:1; padding:7px 0;}

/* ---------- RECONSTRUCTED PRODUCT VISUALS ---------- */
.recon{border:1px solid var(--border); border-radius:6px; background:var(--surface); margin:22px 0 8px; overflow:hidden;}
.recon-label{font-family:var(--mono); font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-faint); padding:9px 16px; border-bottom:1px solid var(--border-soft); background:var(--surface-2); display:flex; align-items:center; gap:8px;}
.recon-label::before{content:""; width:6px; height:6px; border-radius:1px; background:var(--amber); flex:none;}
.recon-body{padding:18px 16px;}
.recon-cap{font-family:var(--sans); font-size:13.5px; line-height:1.55; color:var(--text-dim); padding:0 16px 16px;}

.compare{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.ord{border:1px solid var(--border); border-radius:5px; background:var(--bg); padding:14px;}
.ord .ord-h{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-bottom:10px;}
.ord .ord-desc{font-size:14px; color:var(--text); line-height:1.5; margin-bottom:12px; font-family:var(--mono);}
.ord .ord-meta{font-family:var(--mono); font-size:12px; color:var(--text-dim); display:grid; gap:4px;}
.ord .ord-meta b{color:var(--text); font-weight:600;}
@media (max-width:560px){ .compare{grid-template-columns:1fr;} }
.verdict{margin-top:12px; display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; font-family:var(--mono); font-size:13px; padding:12px 14px; border-radius:5px; background:rgba(226,160,63,0.08); border:1px solid rgba(226,160,63,0.3);}
.verdict .v-score{color:var(--amber); font-weight:600;}
.verdict .v-tag{color:var(--text-dim);}
.verdict .v-tag b{color:var(--text);}

.queue{display:grid; gap:8px;}
.q-row{display:grid; grid-template-columns:60px 1fr auto; gap:14px; align-items:center; border:1px solid var(--border); border-radius:5px; background:var(--bg); padding:11px 14px;}
.q-score{font-family:var(--mono); font-size:13px; font-weight:600; text-align:center; padding:5px 0; border-radius:4px;}
.q-score.hi{color:var(--red); background:rgba(226,102,95,0.1);}
.q-score.mid{color:var(--amber); background:rgba(226,160,63,0.1);}
.q-pair{font-size:13px; color:var(--text-dim); line-height:1.45; font-family:var(--mono);}
.q-pair b{color:var(--text); font-weight:600;}
.q-site{font-family:var(--mono); font-size:11px; color:var(--text-faint); white-space:nowrap;}
@media (max-width:560px){ .q-row{grid-template-columns:52px 1fr;} .q-site{display:none;} }

/* ---------- PROMPT EVOLUTION ---------- */
.prompt-evo{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 8px;}
.pe{border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--surface);}
.pe-h{font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:10px 14px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:8px;}
.pe.before .pe-h{color:var(--red);} .pe.after .pe-h{color:var(--teal);}
.pe-code{font-family:var(--mono); font-size:12.5px; color:var(--text-dim); padding:14px; line-height:1.6; white-space:pre-wrap;}
.pe-code .k{color:var(--text); font-weight:600;}
@media (max-width:560px){ .prompt-evo{grid-template-columns:1fr;} }

/* ---------- BEFORE / AFTER SPLIT ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 8px;}
.split .sp{border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--surface);}
.split .sp-h{font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase; padding:11px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px;}
.split .sp.before .sp-h{color:var(--red); background:rgba(226,102,95,0.06);}
.split .sp.after .sp-h{color:var(--teal); background:rgba(85,224,201,0.06);}
.split dl{margin:0; padding:4px 16px 12px;}
.split .sp-row{display:grid; grid-template-columns:98px 1fr; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft);}
.split .sp-row:last-child{border-bottom:none;}
.split .sp-row dt{font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint); padding-top:2px;}
.split .sp-row dd{margin:0; font-size:13.5px; color:var(--text-dim); line-height:1.45;}
.split .sp-row.key dd{color:var(--text); font-weight:600;}
.split .sp.after .sp-row.key dd{color:var(--teal);}
.split .sp.before .sp-row.key dd{color:var(--red);}
@media(max-width:560px){ .split{grid-template-columns:1fr;} }

.flow-node.friction{border-left:3px solid var(--red);} .flow-node.friction .fn-k{color:var(--red);}

/* state chips */
.state{font-family:var(--mono); font-size:10px; letter-spacing:0.05em; text-transform:uppercase; padding:2px 8px; border-radius:20px; border:1px solid; white-space:nowrap; display:inline-block;}
.state.approved{color:var(--teal); border-color:rgba(85,224,201,0.4); background:rgba(85,224,201,0.08);}
.state.pending{color:var(--amber); border-color:rgba(226,160,63,0.4); background:rgba(226,160,63,0.08);}
.state.supplier{color:var(--text-dim); border-color:var(--border);}

/* scope-sheet reconstruction */
.scope{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px; min-width:420px;}
.scope th{text-align:left; color:var(--text-faint); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; padding:8px 10px; border-bottom:1px solid var(--border);}
.scope td{padding:9px 10px; border-bottom:1px solid var(--border-soft); color:var(--text-dim);}
.scope td.num{text-align:right; color:var(--text);}
.scope tr:last-child td{border-bottom:none;}
.scope .li{color:var(--text);}
.scope-wrap{overflow-x:auto;}

/* version history reconstruction */
.vhist{display:grid; gap:8px;}
.vh-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--border); border-radius:5px; background:var(--bg); padding:10px 14px;}
.vh-v{font-family:var(--mono); font-size:12px; color:var(--teal); font-weight:600; white-space:nowrap;}
.vh-by{font-size:13px; color:var(--text-dim); flex:1; min-width:150px;}
.vh-by b{color:var(--text); font-weight:600;}

/* ---------- UNIT ECONOMICS PANEL ---------- */
.econ{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin:20px 0 8px;}
.econ .eq{flex:1; min-width:130px; border:1px solid var(--border); border-radius:6px; background:var(--surface); padding:18px 14px; text-align:center;}
.econ .eq .eq-n{font-family:var(--mono); font-size:21px; font-weight:600; color:var(--teal); line-height:1.15; font-variant-numeric:tabular-nums;}
.econ .eq .eq-l{font-size:12px; color:var(--text-dim); margin-top:8px; line-height:1.35;}
.econ .eq.win .eq-n{color:var(--teal);}
.econ .op{display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-family:var(--mono); font-size:20px; flex:none; padding:0 2px;}
@media(max-width:560px){
  .econ{flex-direction:column;}
  .econ .op{transform:rotate(90deg); padding:2px 0;}
}

/* ---------- FIGURES ---------- */
.cs-figure{
  margin:24px 0 8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  overflow:hidden;
}
.cs-figure img{
  display:block; width:100%; height:auto;
  border-bottom:1px solid var(--border);
}
.cs-figure figcaption{
  font-family:var(--mono); font-size:12px; color:var(--text-dim);
  padding:12px 16px; letter-spacing:0.01em;
}
.cs-figure figcaption .fc-idx{color:var(--text-faint); margin-right:8px;}
.cs-figure figcaption .ba{
  display:inline-block;
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:2px 8px; border-radius:3px; margin-right:10px;
  border:1px solid;
}
.cs-figure figcaption .ba.before{color:var(--red); border-color:rgba(226,102,95,0.4); background:rgba(226,102,95,0.08);}
.cs-figure figcaption .ba.after{color:var(--teal); border-color:rgba(85,224,201,0.4); background:rgba(85,224,201,0.08);}

.case-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:36px 0; border-top:1px solid var(--border); margin-top:24px;
  font-family:var(--mono); font-size:13px; color:var(--text-dim);
}
.case-nav a:hover{color:var(--teal);}