:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --ink: #132238;
  --muted: #66758a;
  --line: #dfe5eb;
  --navy: #10233f;
  --navy-2: #173457;
  --teal: #18a89a;
  --teal-soft: #e7f6f3;
  --orange: #ef8d43;
  --orange-soft: #fff1e6;
  --red: #d95757;
  --green: #17886f;
  --green-soft: #e8f5f1;
  --shadow: 0 14px 36px rgba(20, 40, 65, .08);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: 44px;
}
button, select, input { font: inherit; }
button { color: inherit; }
.public-demo-bar { position: fixed; z-index: 60; inset: 0 0 auto 0; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 18px; color: #d8e5ec; background: #071827; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 10px; }
.public-demo-bar > div { display: flex; align-items: center; gap: 18px; }
.public-demo-bar a { color: inherit; text-decoration: none; font-weight: 700; }
.public-demo-bar > div a:hover { color: white; }
.public-demo-brand { display: flex; align-items: center; gap: 7px; color: white !important; font-size: 12px; }
.public-demo-brand > span:last-child { color: var(--teal); margin-left: -6px; }
.public-signal { display: flex; align-items: end; gap: 2px; height: 15px; }
.public-signal i { display: block; width: 3px; border-radius: 3px; background: var(--teal); }
.public-signal i:nth-child(1) { height: 6px; }.public-signal i:nth-child(2) { height: 10px; }.public-signal i:nth-child(3) { height: 15px; }
.public-demo-label { color: #7890a2; letter-spacing: .5px; text-transform: uppercase; font-size: 8px; }
.public-demo-bar button { border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.06); color: white; border-radius: 7px; padding: 6px 10px; cursor: pointer; font-size: 9px; }
.public-demo-bar button:hover { background: rgba(255,255,255,.12); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 44px;
  height: calc(100vh - 44px);
  padding: 25px 18px 18px;
  color: #eef5fb;
  background:
    radial-gradient(circle at 10% -10%, rgba(35, 178, 165, .22), transparent 32%),
    linear-gradient(180deg, #10253f 0%, #0b1c31 100%);
  display: flex;
  flex-direction: column;
  z-index: 5;
}
.brand { color: white; text-decoration: none; display: flex; align-items: center; gap: 11px; font-size: 18px; letter-spacing: -.3px; padding: 0 8px 24px; }
.brand strong { font-weight: 760; }
.brand-mark { display: flex; gap: 3px; align-items: end; width: 30px; height: 26px; }
.brand-mark i { display: block; width: 7px; border-radius: 4px 4px 2px 2px; background: var(--teal); }
.brand-mark i:nth-child(1) { height: 11px; opacity: .55; }
.brand-mark i:nth-child(2) { height: 18px; opacity: .78; }
.brand-mark i:nth-child(3) { height: 25px; }
.workspace-label { color: #8194aa; font-size: 10px; font-weight: 750; letter-spacing: 1.4px; text-transform: uppercase; padding: 0 10px 9px; }
.company-switcher { width: 100%; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.055); border-radius: 13px; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; color: white; padding: 10px; text-align: left; cursor: default; }
.company-avatar { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #22b3a4, #147a8a); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.company-switcher strong, .company-switcher small { display: block; }
.company-switcher strong { font-size: 12px; }
.company-switcher small { margin-top: 3px; font-size: 10px; color: #92a7bc; }
.chevron { color: #7f94aa; }
.nav-list { display: grid; gap: 5px; margin-top: 24px; }
.nav-item { width: 100%; border: 0; background: transparent; color: #9eb0c2; display: flex; align-items: center; gap: 11px; border-radius: 11px; padding: 11px 12px; font-size: 13px; font-weight: 620; text-align: left; cursor: pointer; transition: .18s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.055); }
.nav-item.active { color: white; background: rgba(24,168,154,.18); box-shadow: inset 3px 0 0 var(--teal); }
.nav-icon { width: 20px; text-align: center; font-size: 17px; color: #64c7be; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 11px; }
.privacy-card { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.045); display: flex; gap: 9px; align-items: flex-start; }
.privacy-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #47d4a8; box-shadow: 0 0 0 4px rgba(71,212,168,.12); }
.privacy-card strong, .privacy-card small { display: block; }
.privacy-card strong { font-size: 11px; }
.privacy-card small { color: #8fa4b9; margin-top: 3px; font-size: 9px; line-height: 1.35; }
.demo-button { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.075); color: white; padding: 10px; border-radius: 11px; cursor: pointer; font-size: 11px; font-weight: 700; }
.demo-button:hover { background: rgba(255,255,255,.12); }
.prototype-note { color: #61778e; font-size: 9px; text-align: center; text-transform: uppercase; letter-spacing: 1px; }

.main-content { min-width: 0; padding: 0 34px 50px; }
.topbar { min-height: 99px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.topbar h1 { margin: 3px 0 0; font-size: 25px; letter-spacing: -.65px; line-height: 1.15; }
.eyebrow, .panel-kicker { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: 1.35px; font-weight: 760; font-size: 9px; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.select-control { display: flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--line); padding: 8px 10px; border-radius: 10px; color: var(--muted); font-size: 10px; }
.select-control.large { padding: 10px 12px; min-width: 250px; }
.select-control select { border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 700; cursor: pointer; }
.icon-button, .profile-button { border: 1px solid var(--line); background: white; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.profile-button { border-radius: 50%; background: var(--navy); color: white; font-size: 11px; font-weight: 800; }
.view { display: none; animation: rise .24s ease; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.status-row { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.live-pill, .positive-chip, .warning-chip, .neutral-chip, .confidence-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 6px 9px; font-size: 9px; font-weight: 760; letter-spacing: .2px; white-space: nowrap; }
.live-pill { color: var(--green); background: var(--green-soft); }
.live-pill i { width: 6px; height: 6px; background: #21a57e; border-radius: 50%; box-shadow: 0 0 0 3px rgba(33,165,126,.12); }
.status-copy, .panel-note { color: var(--muted); font-size: 10px; }
.positive-chip { color: var(--green); background: var(--green-soft); }
.warning-chip { color: #ad5d20; background: var(--orange-soft); }
.neutral-chip { color: var(--muted); background: #edf1f4; }
.confidence-pill { color: #a85b1e; background: var(--orange-soft); }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.metric-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 15px 16px; min-width: 0; box-shadow: 0 4px 16px rgba(20,40,65,.025); }
.metric-card .metric-label { color: var(--muted); font-size: 10px; font-weight: 650; display: flex; justify-content: space-between; gap: 7px; }
.metric-card strong { display: block; margin-top: 10px; font-size: 22px; letter-spacing: -.6px; }
.metric-card .metric-delta { margin-top: 7px; color: var(--muted); font-size: 9px; }
.metric-delta.up { color: var(--green); }
.metric-delta.down { color: var(--red); }
.metric-spark { height: 24px; margin-top: 7px; }
.metric-spark svg { width: 100%; height: 100%; overflow: visible; }

.constraint-hero { background: linear-gradient(120deg, #132942 0%, #173955 64%, #15535e 100%); border-radius: var(--radius); color: white; min-height: 210px; padding: 27px 30px; display: grid; grid-template-columns: 1fr 270px; align-items: center; gap: 30px; box-shadow: var(--shadow); position: relative; overflow: hidden; margin-bottom: 14px; }
.constraint-hero:after { content: ""; position: absolute; width: 300px; height: 300px; right: -100px; top: -160px; border-radius: 50%; border: 55px solid rgba(57,205,188,.08); }
.constraint-label { display: flex; gap: 10px; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #9eb5c6; font-weight: 760; }
.constraint-hero h2 { margin: 13px 0 9px; font-size: clamp(24px, 2.4vw, 37px); line-height: 1.06; letter-spacing: -1.15px; max-width: 720px; }
.constraint-hero p { margin: 0; max-width: 700px; color: #c1d0da; font-size: 13px; line-height: 1.55; }
.constraint-actions { display: flex; gap: 10px; margin-top: 22px; }
.primary-action, .secondary-action, .ghost-button { border: 0; border-radius: 10px; padding: 10px 13px; font-weight: 760; font-size: 10px; cursor: pointer; }
.primary-action { background: var(--teal); color: white; box-shadow: 0 5px 18px rgba(24,168,154,.2); }
.primary-action:hover { background: #128e82; }
.secondary-action { color: var(--ink); background: white; border: 1px solid var(--line); }
.constraint-hero .secondary-action { color: white; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.constraint-score { position: relative; z-index: 1; display: flex; gap: 17px; align-items: center; justify-self: end; }
.constraint-score > div:last-child strong, .constraint-score > div:last-child small { display: block; }
.constraint-score > div:last-child strong { font-size: 12px; }
.constraint-score > div:last-child small { color: #91a9bb; margin-top: 5px; font-size: 9px; }
.score-ring { width: 126px; height: 126px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--orange) 0 72%, rgba(255,255,255,.12) 72% 100%); position: relative; }
.score-ring:before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #173a53; }
.score-ring span { position: relative; text-align: center; }
.score-ring strong, .score-ring small { display: block; }
.score-ring strong { font-size: 31px; line-height: 1; letter-spacing: -1px; }
.score-ring small { margin-top: 3px; color: #9fb3c3; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }

.two-column { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 14px; margin-bottom: 14px; }
.three-column { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 6px 22px rgba(20,40,65,.035); min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 17px; }
.panel h3 { margin: 5px 0 0; font-size: 15px; letter-spacing: -.25px; }
.mini-funnel { display: grid; grid-template-columns: repeat(6, 1fr); align-items: stretch; gap: 5px; }
.funnel-step { position: relative; border-radius: 9px; background: var(--surface-2); border: 1px solid #e8edf1; padding: 12px 9px 11px; min-height: 82px; }
.funnel-step.constraint { background: var(--orange-soft); border-color: #f4c9a5; }
.funnel-step small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .6px; display: block; min-height: 20px; }
.funnel-step strong { display: block; margin-top: 7px; font-size: 17px; }
.funnel-step em { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; font-style: normal; }
.funnel-step.constraint em { color: #ab5c20; font-weight: 760; }
.insight-strip { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid var(--line); margin-top: 15px; padding-top: 13px; }
.insight-icon { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-soft); color: #b66222; font-weight: 800; font-size: 11px; flex: 0 0 auto; }
.insight-strip p { margin: 1px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.insight-strip strong { color: var(--ink); }
.chart-frame { height: 145px; }
.chart-frame.tall { height: 235px; }
.chart-frame svg { width: 100%; height: 100%; overflow: visible; }
.chart-legend { display: flex; gap: 15px; color: var(--muted); font-size: 9px; margin-top: 6px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.chart-legend i { width: 14px; height: 2px; display: block; }
.legend-actual { background: var(--teal); }
.legend-target { background: #9faaba; }
.bar-list { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 105px 1fr 35px; align-items: center; gap: 8px; font-size: 9px; }
.bar-row > span:first-child { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 7px; border-radius: 99px; background: #edf1f4; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: var(--teal); }
.bar-row.hot .bar-fill { background: var(--orange); }
.bar-row strong { text-align: right; font-size: 9px; }
.health-gauge { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; }
.health-ring { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--teal) 0 88%, #e9eef1 88% 100%); position: relative; }
.health-ring:before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: white; }
.health-ring strong { position: relative; font-size: 22px; }
.health-list { display: grid; gap: 7px; font-size: 9px; }
.health-list div { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.health-list strong { color: var(--ink); }
.ai-panel { background: linear-gradient(145deg, #fff, #f2fbf9); }
.ai-panel > p { color: var(--muted); font-size: 11px; line-height: 1.6; min-height: 53px; }
.spark-badge { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; color: #0f8f82; background: var(--teal-soft); }
.text-action { border: 0; background: transparent; color: #0e887d; padding: 0; font-size: 10px; font-weight: 800; cursor: pointer; }

.section-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 19px; }
.section-intro h2 { margin: 7px 0 7px; font-size: 27px; letter-spacing: -.8px; }
.section-intro p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.55; font-size: 12px; max-width: 720px; }
.segmented-control, .filter-chips { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--line); background: white; border-radius: 11px; }
.segmented-control button, .filter-chips button { border: 0; background: transparent; color: var(--muted); border-radius: 8px; padding: 8px 10px; font-size: 9px; font-weight: 750; cursor: pointer; }
.segmented-control button.active, .filter-chips button.active { background: var(--navy); color: white; }
.funnel-panel { margin-bottom: 14px; }
.ghost-button { background: var(--teal-soft); color: #0d887b; }
.full-funnel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; padding: 15px 2px 4px; }
.full-stage { position: relative; text-align: center; }
.full-stage:after { content: "→"; position: absolute; right: -10px; top: 40%; color: #aeb9c4; font-size: 12px; }
.full-stage:last-child:after { display: none; }
.stage-block { min-height: var(--stage-height, 120px); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 7px; border-radius: 10px; background: linear-gradient(180deg, #eaf5f3, #d9efeb); border: 1px solid #cce5e1; }
.full-stage.constraint .stage-block { background: linear-gradient(180deg, #fff3e9, #fde3cf); border-color: #f2bd91; box-shadow: 0 8px 22px rgba(220,119,43,.12); }
.stage-block small { font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.stage-block strong { font-size: 21px; margin-top: 6px; }
.stage-meta { margin-top: 8px; display: grid; gap: 3px; font-size: 8px; color: var(--muted); }
.stage-meta b { color: var(--ink); }
.diagnostics-grid { grid-template-columns: 1fr 1fr; }
.timeline-callout { margin-top: 10px; display: flex; gap: 12px; font-size: 9px; color: var(--muted); }
.timeline-callout strong { color: var(--orange); }
.evidence-list { display: grid; gap: 11px; }
.evidence-item { border: 1px solid var(--line); background: var(--surface-2); border-radius: 11px; padding: 12px; display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.evidence-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: white; border: 1px solid var(--line); font-size: 9px; font-weight: 800; }
.evidence-item strong { display: block; font-size: 10px; }
.evidence-item p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }

.rep-metrics { grid-template-columns: repeat(4,1fr); }
.coach-panel { background: linear-gradient(150deg, #112640, #173d54); color: white; }
.coach-panel .panel-kicker { color: #90a9bb; }
.coach-panel h3 { color: white; }
.coach-panel p { color: #b9cbd7; font-size: 11px; line-height: 1.55; }
.coach-callout { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); padding: 12px; border-radius: 11px; margin-top: 15px; }
.coach-callout span { color: #71d4c9; text-transform: uppercase; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.coach-callout strong { display: block; font-size: 12px; margin-top: 6px; }
.table-panel { padding-bottom: 10px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 10px; }
th { color: var(--muted); font-weight: 700; text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 12px 10px; border-bottom: 1px solid #edf0f3; white-space: nowrap; }
tbody tr:hover { background: #fafcfd; }
.rep-cell { display: flex; align-items: center; gap: 8px; }
.rep-avatar { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #e5f2f1; color: #137e75; font-size: 8px; font-weight: 800; }
.constraint-tag { display: inline-block; padding: 5px 7px; border-radius: 99px; background: #f1f4f6; color: var(--muted); font-size: 8px; }
.constraint-tag.hot { background: var(--orange-soft); color: #a9581e; }

.segment-chart { display: grid; gap: 14px; padding: 6px 0; }
.segment-row { display: grid; grid-template-columns: 128px 1fr 50px; align-items: center; gap: 10px; }
.segment-label strong, .segment-label small { display: block; }
.segment-label strong { font-size: 10px; }
.segment-label small { color: var(--muted); font-size: 8px; margin-top: 3px; }
.segment-stack { display: flex; height: 13px; border-radius: 99px; overflow: hidden; background: #edf1f4; }
.segment-stack i { display: block; height: 100%; }
.segment-stack .won { background: var(--teal); }
.segment-stack .lost { background: #cdd6dd; }
.segment-stack .stalled { background: var(--orange); }
.segment-row > strong { text-align: right; font-size: 10px; }
.finding-content .finding-number { font-size: 42px; letter-spacing: -2px; font-weight: 800; margin: 10px 0 2px; }
.finding-content .finding-caption { color: var(--muted); font-size: 10px; }
.finding-content ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.finding-content li { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 9px; color: var(--muted); }
.finding-content li strong { color: var(--ink); }

.scenario-layout { display: grid; grid-template-columns: minmax(330px,.75fr) minmax(500px,1.25fr); gap: 14px; }
.scenario-controls { display: grid; align-content: start; }
.control-group { padding: 14px 0; border-bottom: 1px solid var(--line); }
.control-group:last-child { border-bottom: 0; }
.control-label { display: flex; justify-content: space-between; gap: 15px; font-size: 10px; font-weight: 750; }
.control-label span:last-child { color: var(--teal); }
.control-group input[type="range"] { width: 100%; margin: 13px 0 5px; accent-color: var(--teal); }
.control-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }
.scenario-result { min-height: 590px; border-radius: var(--radius); padding: 29px; background: linear-gradient(140deg, #10243e 0%, #173953 65%, #14545e 100%); color: white; box-shadow: var(--shadow); }
.scenario-result .eyebrow { color: #86a7b8; }
.scenario-result > h2 { font-size: 50px; margin: 14px 0 3px; letter-spacing: -2px; }
.scenario-result > p:not(.eyebrow) { color: #b7cbd7; max-width: 630px; line-height: 1.55; font-size: 12px; }
.scenario-stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 24px 0; }
.scenario-stat { padding: 13px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.055); border-radius: 11px; }
.scenario-stat small, .scenario-stat strong { display: block; }
.scenario-stat small { color: #91aabb; font-size: 8px; text-transform: uppercase; letter-spacing: .7px; }
.scenario-stat strong { margin-top: 7px; font-size: 17px; }
.bridge-chart { height: 160px; display: flex; align-items: end; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.16); padding: 0 20px; }
.bridge-bar { flex: 1; min-width: 42px; border-radius: 8px 8px 0 0; background: rgba(255,255,255,.18); position: relative; transition: height .25s ease; }
.bridge-bar.after { background: linear-gradient(180deg, #3bc3b4, #178f85); }
.bridge-bar span { position: absolute; left: 50%; transform: translateX(-50%); bottom: -32px; white-space: nowrap; color: #93a9b8; font-size: 8px; }
.bridge-bar strong { position: absolute; left: 50%; transform: translateX(-50%); top: -21px; font-size: 9px; white-space: nowrap; }
.scenario-recommendation { margin-top: 55px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 17px; }
.scenario-recommendation span { color: #65d3c6; text-transform: uppercase; letter-spacing: 1px; font-size: 8px; font-weight: 800; }
.scenario-recommendation p { margin: 7px 0 0; color: #d2dee5; font-size: 11px; line-height: 1.5; }

.import-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; margin-bottom: 14px; }
.upload-panel { display: grid; align-content: start; }
.upload-zone { border: 1.5px dashed #afc2cf; border-radius: 14px; padding: 45px 20px; text-align: center; background: #f9fbfc; outline: none; }
.upload-zone.dragging { border-color: var(--teal); background: var(--teal-soft); }
.upload-icon { width: 45px; height: 45px; border-radius: 13px; display: grid; place-items: center; margin: 0 auto 13px; background: var(--teal-soft); color: var(--teal); font-size: 21px; }
.upload-zone h3 { margin: 0; }
.upload-zone p { color: var(--muted); font-size: 10px; margin: 7px 0 18px; }
.sample-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 15px; }
.mapping-panel { min-height: 360px; }
.empty-state { min-height: 245px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.empty-state span { font-size: 28px; color: #adc0cb; }
.empty-state p { font-size: 10px; max-width: 260px; line-height: 1.5; }
.mapping-list { display: grid; gap: 7px; }
.mapping-row { display: grid; grid-template-columns: 1fr 28px 1fr auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; font-size: 9px; }
.mapping-row > span:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapping-arrow { color: #9eb0bb; text-align: center; }
.mapping-target { font-weight: 750; }
.match-score { color: var(--green); font-weight: 800; }
.privacy-explainer { display: flex; justify-content: space-between; gap: 25px; align-items: center; }
.privacy-explainer > div:first-child { display: flex; gap: 14px; align-items: flex-start; max-width: 600px; }
.privacy-lock { width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); flex: 0 0 auto; }
.privacy-explainer h3 { margin: 0; }
.privacy-explainer p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.privacy-steps { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--muted); font-size: 8px; }
.privacy-steps span { padding: 7px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(7,18,31,.34); opacity: 0; pointer-events: none; transition: .2s; z-index: 20; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.diagnostic-drawer { position: fixed; right: 0; top: 44px; bottom: 0; width: min(510px, 92vw); background: white; z-index: 21; padding: 28px; box-shadow: -20px 0 50px rgba(10,28,46,.18); transform: translateX(102%); transition: .24s ease; overflow-y: auto; }
.diagnostic-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.drawer-head h2 { margin: 7px 0 0; font-size: 23px; letter-spacing: -.6px; }
.drawer-body { padding-top: 20px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.drawer-body h3 { color: var(--ink); margin-top: 24px; }
.drawer-body ul { padding-left: 18px; }
.drawer-evidence { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 17px 0; }
.drawer-evidence div { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.drawer-evidence strong, .drawer-evidence span { display: block; }
.drawer-evidence strong { color: var(--ink); font-size: 16px; }
.drawer-evidence span { font-size: 8px; margin-top: 4px; }

.tour-popover { position: fixed; z-index: 30; width: 330px; right: 30px; bottom: 30px; padding: 19px; background: #10243e; color: white; border-radius: 15px; box-shadow: 0 18px 50px rgba(5,20,35,.3); }
.tour-popover h3 { margin: 8px 0 5px; }
.tour-popover p { color: #b8cad5; font-size: 10px; line-height: 1.5; }
.tour-popover > div { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.tour-step { color: #65d3c6; text-transform: uppercase; letter-spacing: 1px; font-size: 8px; font-weight: 800; }
.tour-popover .text-action { color: #9db3c2; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #10243e; color: white; padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); font-size: 10px; font-weight: 700; z-index: 40; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 220px minmax(0,1fr); }
  .main-content { padding-inline: 22px; }
  .metric-grid { grid-template-columns: repeat(3,1fr); }
  .three-column { grid-template-columns: 1fr 1fr; }
  .three-column .panel:last-child { grid-column: 1 / -1; }
  .privacy-steps { display: none; }
}
@media (max-width: 820px) {
  .public-demo-label { display: none; }
  .app-shell { display: block; }
  .sidebar { position: relative; top: 0; height: auto; padding: 16px; }
  .brand { padding-bottom: 13px; }
  .workspace-label, .company-switcher, .sidebar-bottom { display: none; }
  .nav-list { grid-template-columns: repeat(3,1fr); margin: 0; }
  .nav-item { justify-content: center; font-size: 0; padding: 10px; }
  .nav-icon { font-size: 17px; }
  .topbar { min-height: 82px; }
  .main-content { padding: 0 15px 35px; }
  .topbar-actions .select-control span { display: none; }
  .metric-grid, .rep-metrics { grid-template-columns: repeat(2,1fr); }
  .constraint-hero { grid-template-columns: 1fr; }
  .constraint-score { justify-self: start; }
  .two-column, .diagnostics-grid, .import-grid, .scenario-layout { grid-template-columns: 1fr; }
  .three-column { grid-template-columns: 1fr; }
  .three-column .panel:last-child { grid-column: auto; }
  .section-intro { align-items: flex-start; flex-direction: column; }
  .full-funnel, .mini-funnel { grid-template-columns: repeat(3,1fr); }
  .privacy-explainer { display: block; }
}
@media (max-width: 520px) {
  .public-demo-bar { padding: 0 10px; }
  .public-demo-bar > div { gap: 8px; }
  .public-demo-bar > div a { display: none; }
  .metric-grid, .rep-metrics { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 20px; }
  .topbar-actions .icon-button, .profile-button { display: none; }
  .constraint-hero { padding: 22px; }
  .constraint-actions { flex-direction: column; align-items: stretch; }
  .full-funnel, .mini-funnel { grid-template-columns: repeat(2,1fr); }
  .scenario-stat-grid { grid-template-columns: 1fr; }
  .filter-chips { flex-wrap: wrap; }
}

/* 1.1 role-based public demo */
.role-switch { position: absolute; left: 50%; transform: translateX(-50%); gap: 2px !important; padding: 3px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.05); }
.role-switch .role-option { border: 0; padding: 6px 12px; color: #8fa5b7; background: transparent; border-radius: 6px; font-weight: 760; }
.role-switch .role-option.active { color: #071827; background: #70d4ca; }
.public-demo-actions { margin-left: auto; }
[data-role-panel="manager"], [data-role-nav="manager"] { display: none; }
body[data-role="manager"] [data-role-panel="manager"] { display: flex; }
body[data-role="manager"] [data-role-nav="manager"] { display: flex; }
body[data-role="manager"] [data-role-panel="professional"],
body[data-role="manager"] [data-role-nav="professional"] { display: none; }
.professional-identity { cursor: default; }

.personal-statusbar { display: grid; grid-template-columns: 1.05fr .7fr 1fr 1.45fr; align-items: stretch; gap: 1px; margin-bottom: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.model-context { display:grid; grid-template-columns:1fr 1.35fr .85fr .9fr auto; align-items:center; gap:1px; margin-bottom:14px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--line); }
.model-context>div { min-height:57px; padding:11px 14px; background:white; }
.model-context small,.model-context strong { display:block; }
.model-context small { color:var(--muted); font-size:7px; text-transform:uppercase; letter-spacing:.7px; }
.model-context strong { margin-top:6px; font-size:9px; }
.model-context .ready-value { color:var(--green); }
.model-context .ready-value i { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:#21a57e; box-shadow:0 0 0 3px rgba(33,165,126,.1); }
.model-context>button { align-self:stretch; padding:0 16px; border:0; background:#edf8f6; color:#0d887b; font-size:8px; font-weight:800; cursor:pointer; }
.model-context>button:hover { background:#dff3f0; }
.personal-statusbar > div { min-height: 82px; padding: 14px 17px; background: white; display: flex; align-items: baseline; align-content: center; flex-wrap: wrap; gap: 7px; }
.personal-statusbar strong { font-size: 25px; letter-spacing: -.8px; }
.personal-statusbar small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.pace-status { align-self: center; padding: 5px 8px; border-radius: 99px; background: #feeceb; color: #bd4a4a; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .8px; }
.personal-statusbar .personal-status-note { align-items: center; justify-content: flex-end; }
.personal-status-note small { width: 100%; text-align: right; }

.personal-constraint { display: grid; grid-template-columns: minmax(0,1fr) 285px; gap: 28px; align-items: center; min-height: 245px; margin-bottom: 14px; padding: 29px 31px; overflow: hidden; position: relative; color: white; border-radius: var(--radius); background: linear-gradient(120deg,#12263f 0%,#163955 62%,#15515c 100%); box-shadow: var(--shadow); }
.personal-constraint:after { content:""; position:absolute; width:320px; height:320px; right:-140px; top:-190px; border:58px solid rgba(79,213,197,.08); border-radius:50%; }
.personal-constraint-copy, .effort-math { position: relative; z-index: 1; }
.personal-constraint h2 { max-width: 780px; margin: 13px 0 10px; font-size: clamp(25px,2.55vw,39px); line-height: 1.06; letter-spacing: -1.2px; }
.personal-constraint p { max-width: 760px; margin: 0; color: #c5d4de; font-size: 13px; line-height: 1.58; }
.personal-constraint p strong { color: white; }
.personal-constraint .primary-action { margin-top: 21px; }
.diagnostic-proofline { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }
.diagnostic-proofline span { padding:8px 10px; border:1px solid rgba(255,255,255,.11); border-radius:8px; background:rgba(255,255,255,.05); color:#d8e4e9; font-size:8px; }
.diagnostic-proofline small { margin-right:5px; color:#71d4c9; font-size:7px; font-weight:850; text-transform:uppercase; letter-spacing:.6px; }
.effort-math { padding: 21px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.effort-math > p { color: #7dd6cd; font-size: 9px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.effort-math > strong, .effort-math > span { display: block; }
.effort-math > strong { margin-top: 10px; font-size: 35px; letter-spacing: -1.5px; }
.effort-math > span { margin-top: 5px; color: #b9cbd7; font-size: 10px; line-height: 1.45; }
.effort-math > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 17px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.12); }
.effort-math b { font-size: 15px; color: #70d4ca; }
.effort-math small { color: #91a9ba; font-size: 8px; }

.process-panel { margin-bottom: 14px; }
.personal-process { display: grid; grid-template-columns: repeat(7,minmax(105px,1fr)); gap: 8px; overflow-x: auto; padding: 2px 1px 8px; }
.personal-stage { min-width: 105px; min-height: 145px; padding: 12px; text-align: left; cursor: pointer; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.personal-stage:hover { transform: translateY(-2px); border-color: #9bcac5; box-shadow: 0 8px 22px rgba(20,40,65,.08); }
.personal-stage > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #e9efF2; color: #748395; font-size: 8px; font-weight: 850; }
.personal-stage small, .personal-stage strong, .personal-stage em, .personal-stage b { display: block; }
.personal-stage small { min-height: 27px; margin-top: 11px; color: var(--muted); font-size: 8px; line-height: 1.3; text-transform: uppercase; letter-spacing: .55px; }
.personal-stage strong { margin-top: 6px; font-size: 21px; letter-spacing: -.5px; }
.personal-stage em { margin-top: 4px; color: var(--muted); font-size: 8px; font-style: normal; }
.personal-stage b { margin-top: 10px; color: var(--green); font-size: 8px; text-transform: uppercase; letter-spacing: .7px; }
.personal-stage.constraint { border-color: #eea66f; background: var(--orange-soft); box-shadow: 0 7px 20px rgba(239,141,67,.12); }
.personal-stage.constraint > span { color: #a9561b; background: #f9d7bd; }
.personal-stage.constraint b { color: #a9571c; }
.personal-stage.near b { color: #9a701d; }
.process-explanation { display: grid; grid-template-columns: 125px 1fr; gap: 14px; align-items: start; margin-top: 11px; padding: 13px 15px; border-radius: 10px; background: #f4f8f8; }
.process-explanation span { color: #0e887d; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: 1px; }
.process-explanation p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

.personal-lower-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; }
.experiment-card { background: linear-gradient(145deg,#fff,#f0faf8); }
.experiment-number { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #0d887b; background: #dff3f0; font-size: 9px; font-weight: 850; }
.experiment-card > p { color: var(--muted); font-size: 11px; line-height: 1.62; }
.experiment-rules { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 17px 0; }
.experiment-rules div { padding: 11px; border: 1px solid #dcebe8; border-radius: 10px; background: rgba(255,255,255,.7); }
.experiment-rules small, .experiment-rules strong { display: block; }
.experiment-rules small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .6px; }
.experiment-rules strong { margin-top: 6px; font-size: 9px; }
.time-bars { display: grid; gap: 11px; }
.time-bars > div { display: grid; grid-template-columns: 70px 1fr 37px; gap: 10px; align-items: center; font-size: 9px; }
.time-bars span { color: var(--muted); }
.time-bars i { height: 8px; overflow: hidden; border-radius: 99px; background: #edf1f4; }
.time-bars b { display: block; height: 100%; border-radius: inherit; background: #9eb5c3; }
.time-bars strong { text-align: right; font-size: 9px; }
.time-bars .best b { background: var(--teal); }
.time-bars .best strong { color: #0c8b7f; }
.evidence-caveat { margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.5; }

.drawer-audit-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 15px 0 20px; }
.drawer-audit-summary div { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.drawer-audit-summary strong, .drawer-audit-summary span { display: block; }
.drawer-audit-summary strong { color: var(--ink); font-size: 17px; }
.drawer-audit-summary span { margin-top: 4px; font-size: 8px; }
.drawer-table { width: 100%; margin-top: 12px; font-size: 9px; }
.drawer-table th, .drawer-table td { padding: 9px 7px; }
.audit-note { padding: 11px 13px; border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; background: var(--teal-soft); color: #48636d; font-size: 10px; }
.audit-formula { margin: 15px 0; padding: 14px; border-radius: 11px; background: #10243e; color: white; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; line-height: 1.6; }
.evidence-download { margin-top: 15px; }

@media (max-width: 1120px) {
  .public-demo-actions .public-demo-label { display:none; }
  .personal-statusbar { grid-template-columns: repeat(3,1fr); }
  .personal-statusbar .personal-status-note { grid-column: 1 / -1; min-height: 60px; justify-content: flex-start; }
  .personal-status-note small { width:auto; text-align:left; }
  .model-context { grid-template-columns:repeat(2,1fr); }
  .model-context>button { min-height:45px; grid-column:1/-1; }
}
@media (max-width: 820px) {
  body { padding-top: 86px; }
  .public-demo-bar { height: 86px; align-items:flex-start; padding-top:10px; }
  .role-switch { top: 46px; width: calc(100% - 20px); justify-content:stretch; }
  .role-switch .role-option { flex:1; }
  .sidebar { top:0; }
  [data-role-nav="manager"] { display:none; }
  body[data-role="manager"] [data-role-nav="manager"] { display:flex; }
  .personal-constraint { grid-template-columns: 1fr; }
  .effort-math { max-width: 420px; }
  .personal-lower-grid { grid-template-columns: 1fr; }
  .diagnostic-drawer { top:86px; }
}
@media (max-width: 600px) {
  .public-demo-actions .public-demo-label, .public-demo-actions a { display:none; }
  .personal-statusbar { grid-template-columns: 1fr 1fr; }
  .personal-statusbar > div:first-child, .personal-statusbar .personal-status-note { grid-column:1 / -1; }
  .personal-constraint { padding:23px 20px; }
  .personal-constraint h2 { font-size:27px; }
  .process-explanation { grid-template-columns:1fr; gap:6px; }
  .experiment-rules { grid-template-columns:1fr; }
  .drawer-audit-summary { grid-template-columns:1fr 1fr; }
  .model-context { grid-template-columns:1fr 1fr; }
  .model-context>div { min-height:64px; }
  .diagnostic-proofline { display:grid; grid-template-columns:1fr 1fr; }
}