:root {
  color-scheme: light;
  --paper: #f3f5f2;
  --surface: #ffffff;
  --surface-soft: #e9eeeb;
  --ink: #13221e;
  --muted: #5c6c66;
  --line: #cdd7d2;
  --line-strong: #a8b8b0;
  --teal: #087f70;
  --teal-dark: #075f56;
  --teal-soft: #d8f0e9;
  --coral: #c74f3d;
  --coral-soft: #f7dfd9;
  --amber: #9a6711;
  --amber-soft: #f5e9c7;
  --blue: #315f9d;
  --blue-soft: #dfe9f7;
  --shadow: 0 18px 50px rgba(26, 48, 41, 0.08);
  --radius: 8px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Geist, "SF Pro Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
button, input, textarea, select { font: inherit; }
button, a, select, input, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #d69024; outline-offset: 3px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 66px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 10px max(24px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid rgba(168,184,176,.7);
  background: rgba(243,245,242,.92);
  backdrop-filter: blur(18px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 750;
}
.brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: end;
  gap: 3px;
  padding: 5px;
  background: var(--ink);
  border-radius: 5px;
}
.brand-mark span { display:block; background:#fff; border-radius: 1px; }
.brand-mark span:nth-child(1) { height: 8px; }
.brand-mark span:nth-child(2) { height: 16px; }
.brand-mark span:nth-child(3) { height: 12px; }
nav { display: flex; align-items: center; gap: 5px; }
nav a {
  padding: 8px 11px;
  border-radius: 5px;
  color: var(--muted);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 650;
}
nav a:hover { background: var(--surface); color: var(--ink); }
.icon-button {
  justify-self: end;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
.icon-button:hover { border-color: var(--ink); }
.icon-button svg, .privacy-note svg { width: 20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

main { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.intro {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(320px,.55fr);
  gap: clamp(40px,7vw,96px);
  align-items: center;
  padding: 92px 0 74px;
}
.intro-copy { max-width: 850px; }
.kicker {
  margin: 0 0 12px;
  color: var(--teal-dark);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
h1,h2,h3,h4,p { overflow-wrap: break-word; }
h1,h2,h3,h4 { margin-top:0; letter-spacing: 0; line-height: 1.08; }
h1 { margin-bottom: 24px; font-size: clamp(3rem,5vw,5.25rem); max-width: 1000px; }
h2 { margin-bottom: 0; font-size: clamp(2rem,3.3vw,3.5rem); }
h3 { margin-bottom: 7px; font-size: 1.25rem; }
h4 { margin-bottom: 0; font-size: .92rem; }
.lede { max-width: 800px; margin:0; color:var(--muted); font-size:clamp(1.02rem,1.5vw,1.22rem); }
.answer-diagram {
  align-self: stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ink);
  color:#fff;
  box-shadow: var(--shadow);
}
.diagram-top { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:.82rem; font-weight:750; }
.diagram-arrow { color:#96c8bb; }
.funnel-bars { display:grid; gap:7px; margin:34px 0; }
.funnel-bars span { display:block; width:var(--w); height:14px; background:linear-gradient(90deg,#65bdaa,#eab263); border-radius:2px; }
.answer-diagram p { margin:0; color:#dbe5e1; font-size:.92rem; }
.answer-diagram strong { color:#fff; font-size:1.7rem; }

.privacy-note {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:14px;
  margin-bottom: 104px;
  padding: 16px 18px;
  border:1px solid #afd2c7;
  border-left:4px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal-soft);
  color:#164d43;
  font-size:.9rem;
}

.workspace,.simulation-section,.pipeline-section,.quiz-section { padding: 32px 0 112px; scroll-margin-top: 82px; }
.section-heading {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:64px;
  align-items:end;
  margin-bottom:36px;
}
.section-heading > p { margin:0; color:var(--muted); max-width:480px; justify-self:end; }
.panel {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow: 0 7px 22px rgba(28,47,41,.045);
}
.lab-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.82fr); gap:18px; align-items:stretch; }
.composer-panel,.score-panel,.controls,.roi-card,.quiz-panel { padding:26px; }
.panel-head,.score-header,.signals-head,.matrix-head,.quiz-progress { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.panel-head p,.score-summary { margin:0; color:var(--muted); }
.select-label { display:grid; gap:5px; color:var(--muted); font-size:.75rem; font-weight:700; }
select {
  min-height:40px;
  max-width:180px;
  padding:7px 32px 7px 10px;
  border:1px solid var(--line-strong);
  border-radius:5px;
  background:#fff;
  color:var(--ink);
}
textarea {
  width:100%;
  min-height:330px;
  margin-top:20px;
  resize:vertical;
  padding:18px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:#f9fbfa;
  color:var(--ink);
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:.85rem;
  line-height:1.65;
}
textarea:focus { border-color:var(--teal); }
.composer-actions { min-height:44px; display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:14px; }
.composer-actions span { margin-right:auto; color:var(--muted); font-size:.8rem; }
.button {
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 15px;
  border:1px solid transparent;
  border-radius:6px;
  text-decoration:none;
  font-size:.85rem;
  font-weight:750;
  cursor:pointer;
}
.button.primary { background:var(--ink); color:#fff; }
.button.primary:hover { background:var(--teal-dark); }
.button.secondary { border-color:var(--line-strong); background:#fff; color:var(--ink); }
.button.secondary:hover { border-color:var(--ink); }
.button:disabled { opacity:.45; cursor:not-allowed; }
.score-panel { position:relative; overflow:hidden; }
.score-panel::after { content:""; position:absolute; width:150px; height:150px; right:-75px; top:-75px; border:24px solid var(--teal-soft); border-radius:50%; pointer-events:none; }
.risk-gauge { min-width:90px; display:flex; align-items:baseline; justify-content:flex-end; color:var(--teal-dark); }
.risk-gauge span { font-size:2.8rem; line-height:1; font-weight:830; }
.risk-gauge small { font-size:.85rem; }
.meter,.quiz-meter { height:8px; margin:18px 0; overflow:hidden; background:var(--surface-soft); border-radius:2px; }
.meter span,.quiz-meter span { display:block; height:100%; width:0; background:var(--teal); transition:width .35s ease,background .35s ease; }
.signals-head { margin-top:26px; align-items:center; padding-bottom:10px; border-bottom:1px solid var(--line); }
.signals-head span { color:var(--muted); font-size:.78rem; }
.signal-list { list-style:none; display:grid; gap:8px; margin:12px 0 22px; padding:0; }
.signal-item {
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fbfcfb;
}
.signal-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:5px; background:var(--surface-soft); color:var(--muted); font-size:.78rem; font-weight:800; }
.signal-item.triggered { border-color:#e6b7ac; background:#fff8f6; }
.signal-item.triggered .signal-icon { background:var(--coral-soft); color:#8d3427; }
.signal-copy strong { display:block; font-size:.82rem; }
.signal-copy span { display:block; color:var(--muted); font-size:.75rem; }
.signal-points { color:var(--coral); font-size:.72rem; font-weight:800; }
.next-step { padding:15px; border:1px solid #e2c98b; border-radius:6px; background:#fffaf0; }
.next-step strong { font-size:.83rem; }
.next-step p { margin:4px 0 0; color:#6c5a2e; font-size:.78rem; }

.concept-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--ink);
  color:#fff;
  margin-bottom:118px;
}
.concept-strip article { min-height:240px; padding:30px; border-right:1px solid #3d4d47; }
.concept-strip article:last-child { border-right:0; }
.concept-strip h3 { margin-top:46px; font-size:1.35rem; }
.concept-strip p { margin:0; color:#c7d1cd; font-size:.9rem; }
.concept-number { color:#7fbcae; font-family:monospace; font-size:.75rem; }

.tradeoff-layout,.economics-layout { display:grid; grid-template-columns:minmax(300px,.7fr) minmax(0,1.3fr); gap:18px; }
.controls { display:grid; gap:15px; align-content:start; }
.controls label { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; font-size:.84rem; font-weight:700; }
.controls output { color:var(--teal-dark); font-family:monospace; font-weight:800; }
input[type="range"] { width:100%; height:28px; accent-color:var(--teal); cursor:pointer; }
.range-ends { display:flex; justify-content:space-between; margin-top:-12px; color:var(--muted); font-size:.7rem; }
.preset-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:3px; }
.chip { min-height:36px; padding:6px 10px; border:1px solid var(--line-strong); border-radius:5px; background:var(--surface); color:var(--ink); font-size:.75rem; font-weight:700; cursor:pointer; }
.chip:hover,.chip.active { border-color:var(--teal); background:var(--teal-soft); color:var(--teal-dark); }
.tradeoff-summary { margin-top:8px; padding:14px; border-left:3px solid var(--amber); background:var(--amber-soft); color:#594114; font-size:.8rem; }
.matrix-wrap { padding:26px; overflow:hidden; }
.matrix-head { align-items:center; margin-bottom:20px; }
.matrix-head span { color:var(--muted); font-size:.78rem; }
.matrix {
  display:grid;
  grid-template-columns:74px repeat(2,minmax(120px,1fr));
  grid-template-rows:auto auto repeat(2,minmax(120px,1fr));
  gap:8px;
  position:relative;
}
.axis-label { color:var(--muted); font-size:.68rem; font-weight:750; text-transform:uppercase; }
.axis-label.actual { grid-column:2/4; text-align:center; }
.axis-label.predicted { position:absolute; left:-15px; top:57%; transform:rotate(-90deg) translateX(-50%); transform-origin:left center; }
.matrix-label { display:grid; place-items:center; color:var(--muted); font-size:.75rem; font-weight:700; }
.matrix-label.side { justify-items:start; }
.matrix-cell { min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; border:1px solid transparent; border-radius:6px; text-align:center; }
.matrix-cell strong { font-size:clamp(1.55rem,3vw,2.55rem); line-height:1; }
.matrix-cell span { margin-top:7px; font-size:.72rem; }
.matrix-cell.good { background:var(--teal-soft); color:#075f56; border-color:#add3c8; }
.matrix-cell.warn { background:var(--amber-soft); color:#6b4b0d; border-color:#e2c98b; }
.matrix-cell.danger { background:var(--coral-soft); color:#863529; border-color:#e8b7ad; }
.matrix-cell.neutral { background:var(--blue-soft); color:#274d80; border-color:#b8c9e4; }

.economics-controls { gap:12px; }
.roi-card { display:flex; flex-direction:column; justify-content:center; }
.roi-verdict { width:max-content; max-width:100%; padding:5px 9px; border-radius:4px; background:var(--teal-soft); color:var(--teal-dark); font-size:.73rem; font-weight:800; }
.roi-number { display:flex; justify-content:space-between; align-items:end; gap:20px; padding:25px 0; border-bottom:1px solid var(--line); }
.roi-number span { color:var(--muted); font-size:.85rem; }
.roi-number strong { font-size:clamp(2rem,5vw,4rem); line-height:1; }
.roi-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:22px 0; }
.roi-stats div { padding:14px; background:#fff; }
.roi-stats span { display:block; color:var(--muted); font-size:.67rem; }
.roi-stats strong { display:block; margin-top:3px; font-size:1rem; }
.roi-chart { display:grid; gap:13px; }
.roi-chart > div { display:grid; grid-template-columns:105px 1fr 90px; gap:10px; align-items:center; font-size:.72rem; }
.roi-chart i { display:block; width:1%; height:16px; background:var(--teal); border-radius:2px; transition:width .3s ease; }
.roi-chart > div:nth-child(2) i { background:var(--coral); }
.roi-chart strong { text-align:right; }
.roi-card > p { margin:22px 0 0; color:var(--muted); font-size:.8rem; }

.pipeline-panel { display:grid; grid-template-columns:280px 1fr; overflow:hidden; }
.pipeline-steps { padding:18px; background:var(--ink); }
.pipeline-step { width:100%; min-height:52px; display:grid; grid-template-columns:26px 1fr; gap:9px; align-items:center; padding:8px 10px; border:0; border-bottom:1px solid #3a4a44; background:transparent; color:#bcc8c3; text-align:left; cursor:pointer; }
.pipeline-step span { width:23px; height:23px; display:grid; place-items:center; border:1px solid #63766f; border-radius:50%; font-family:monospace; font-size:.67rem; }
.pipeline-step strong { font-size:.78rem; }
.pipeline-step.active { background:#21453d; color:#fff; }
.pipeline-step.active span { border-color:#76c5b2; background:#76c5b2; color:#10241f; }
.pipeline-step.complete span { background:#4f786e; color:#fff; }
.pipeline-detail { min-height:410px; display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,6vw,74px); }
.stage-badge { width:max-content; margin-bottom:18px; padding:5px 8px; background:var(--surface-soft); color:var(--muted); border-radius:4px; font-size:.7rem; font-weight:800; }
.pipeline-detail h3 { font-size:clamp(1.8rem,3vw,2.8rem); }
.pipeline-detail > p { max-width:680px; color:var(--muted); }
.stage-decision { max-width:680px; margin:16px 0 28px; padding:14px; border-left:3px solid var(--blue); background:var(--blue-soft); color:#294c7b; font-size:.82rem; }
.pipeline-controls,.quiz-controls,.action-row { display:flex; flex-wrap:wrap; gap:9px; }

.quiz-panel { max-width:900px; margin:0 auto; }
.quiz-progress { color:var(--muted); font-size:.78rem; }
.quiz-panel h3 { min-height:72px; max-width:760px; margin:28px 0 20px; font-size:clamp(1.35rem,2.4vw,2rem); }
.quiz-options { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.quiz-option { min-height:62px; display:flex; align-items:center; padding:14px; border:1px solid var(--line-strong); border-radius:6px; background:#fff; text-align:left; cursor:pointer; font-size:.83rem; font-weight:650; }
.quiz-option:hover { border-color:var(--teal); }
.quiz-option.selected { border-color:var(--blue); background:var(--blue-soft); color:#244b7d; }
.quiz-option.correct { border-color:var(--teal); background:var(--teal-soft); color:#075f56; }
.quiz-option.incorrect { border-color:var(--coral); background:var(--coral-soft); color:#813527; }
.quiz-feedback { min-height:72px; margin:16px 0; padding:14px; border-left:3px solid var(--line-strong); background:#f7f9f8; color:var(--muted); font-size:.82rem; }
.quiz-feedback.success { border-color:var(--teal); background:var(--teal-soft); color:#145b50; }
.quiz-feedback.error { border-color:var(--coral); background:var(--coral-soft); color:#74372d; }
.quiz-controls { justify-content:flex-end; }
.quiz-controls #previousQuestion { margin-right:auto; }

.takeaway-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; padding:74px 0; border-top:1px solid var(--line-strong); }
#takeaway-title { scroll-margin-top: 86px; }
.takeaway-copy > p { margin-top:0; color:var(--muted); font-size:1.03rem; }
.action-row { margin-top:26px; }
.caveat { margin:0 0 70px; padding:22px; border:1px solid #e2c98b; border-radius:var(--radius); background:var(--amber-soft); color:#584010; }
.caveat strong { display:block; margin-bottom:5px; }
.caveat p { margin:0; font-size:.85rem; }

footer { width:min(var(--max),calc(100% - 48px)); min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 auto; border-top:1px solid var(--line-strong); color:var(--muted); font-size:.78rem; }
.toast { position:fixed; z-index:50; right:22px; bottom:22px; max-width:360px; padding:12px 15px; border-radius:6px; background:var(--ink); color:#fff; box-shadow:var(--shadow); font-size:.8rem; opacity:0; transform:translateY(16px); pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:translateY(0); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (max-width: 900px) {
  .topbar { grid-template-columns:1fr auto; }
  nav { display:none; }
  .intro { grid-template-columns:1fr; min-height:0; padding-top:72px; }
  .answer-diagram { min-height:290px; }
  .section-heading { grid-template-columns:1fr; gap:18px; }
  .section-heading > p { justify-self:start; }
  .lab-grid,.tradeoff-layout,.economics-layout { grid-template-columns:1fr; }
  .concept-strip { grid-template-columns:1fr; }
  .concept-strip article { min-height:190px; border-right:0; border-bottom:1px solid #3d4d47; }
  .concept-strip article:last-child { border-bottom:0; }
  .concept-strip h3 { margin-top:26px; }
  .pipeline-panel { grid-template-columns:1fr; }
  .pipeline-steps { display:flex; overflow-x:auto; padding:10px; }
  .pipeline-step { flex:0 0 170px; border-bottom:0; border-right:1px solid #3a4a44; }
  .takeaway-section { grid-template-columns:1fr; gap:26px; }
}

@media (max-width: 620px) {
  main,footer { width:min(100% - 28px,var(--max)); }
  .topbar { min-height:60px; padding:8px 14px; }
  .brand { font-size:.82rem; }
  .intro { gap:24px; padding:54px 0 42px; }
  h1 { font-size:clamp(2.3rem,12vw,3.6rem); }
  h2 { font-size:clamp(1.75rem,9vw,2.6rem); }
  .answer-diagram { padding:24px; }
  .privacy-note { margin-bottom:72px; }
  .workspace,.simulation-section,.pipeline-section,.quiz-section { padding-bottom:84px; }
  .composer-panel,.score-panel,.controls,.roi-card,.quiz-panel,.matrix-wrap { padding:18px; }
  .panel-head { flex-direction:column; }
  select { max-width:100%; width:100%; }
  textarea { min-height:300px; }
  .composer-actions { flex-wrap:wrap; }
  .composer-actions span { width:100%; }
  .composer-actions .button { flex:1; }
  .score-header { align-items:center; }
  .signal-item { grid-template-columns:34px 1fr; }
  .signal-points { grid-column:2; }
  .concept-strip { margin-bottom:86px; }
  .matrix { grid-template-columns:62px repeat(2,minmax(88px,1fr)); grid-template-rows:auto auto repeat(2,minmax(100px,1fr)); }
  .matrix-cell { min-height:100px; padding:9px; }
  .matrix-cell strong { font-size:1.4rem; }
  .roi-number { flex-direction:column; align-items:flex-start; }
  .roi-stats { grid-template-columns:repeat(2,1fr); }
  .roi-chart > div { grid-template-columns:80px 1fr 70px; }
  .pipeline-detail { min-height:460px; padding:28px 20px; }
  .pipeline-controls .button { flex:1 1 120px; }
  .quiz-options { grid-template-columns:1fr; }
  .quiz-panel h3 { min-height:0; }
  .quiz-controls .button { flex:1 1 110px; }
  .quiz-controls #previousQuestion { margin-right:0; }
  footer { flex-direction:column; align-items:flex-start; justify-content:center; }
  .toast { left:14px; right:14px; bottom:14px; max-width:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.001ms!important; animation-duration:.001ms!important; animation-iteration-count:1!important; }
}