:root {
  /* Brand Ember — bright accent for fills, bars, dots, active surfaces, large display stats */
  --ember: #ff5d05;
  /* AA-safe ember ink — small accent text (eyebrows, tab labels, prices) and white-on-accent buttons */
  --ember-ink: #c2410c;
  /* Legacy alias kept so existing references stay valid; resolves to the AA-safe ink */
  --purple: var(--ember-ink);
  --purple-2: #9a3412;
  --purple-3: #ffe4d3;
  --ember-tint: #fff1e8;
  --ember-tint-line: #ffd9c2;
  /* Harvest gold — single headline proof stat per brand rules */
  --harvest: #ff5d05;
  --harvest-deep: #c2410c;
  --harvest-bg: #fff1e8;
  --amber: #ff5d05;
  --navy: #1a1a1a;
  --text: #25282c;
  --muted: #737373;
  --line: #e6e3e0;
  --line-strong: #d7d4d0;
  --cost: #d7d4d0;
  --cost-dark: #a8a29e;
  --green: #1a1a1a;
  --green-soft: #f5f3ef;
  --bg: #f9f8f5;
  --shape-bg: #f9f8f5;
  --shape-soft: #f5f3ef;
  --surface: #fefefd;
  --surface-container: #f9f8f5;
  --surface-low: #f5f3ef;
  --card: #fefefd;
  --shadow: 0 1px 1px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.06);
  --shadow-lifted: 0 2px 4px rgba(24, 24, 27, 0.06), 0 8px 24px rgba(24, 24, 27, 0.09);
  --radius: 6px;
  --radius-sm: 6px;
  /* Single modern sans across the whole app; --font-serif kept as an alias so
     existing display rules pick up the same family (no mismatched pairing). */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: var(--font-sans);
}

* {
  box-sizing: border-box;
}

html {
  color: var(--navy);
  background: var(--bg);
  font-family: var(--font-sans);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-width: 1180px;
  background: var(--bg);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.site-header {
  height: 74px;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 0 38px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.cobrand-lockup,
.simple-brand,
.driveway-brand {
  display: flex;
  align-items: center;
}

.cobrand-lockup {
  gap: 12px;
  min-width: 0;
}

.simple-brand,
.driveway-brand {
  gap: 10px;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
}

.simple-brand {
  font-size: 23px;
}

.driveway-brand {
  font-size: 23px;
}

.driveway-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.cobrand-x {
  color: var(--line-strong);
  font-size: 20px;
  font-weight: 500;
  margin: 0 2px;
}

.brand-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
}

.brand-icon img {
  width: 30px;
  height: 30px;
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  min-width: 0;
}

.save-status {
  min-width: 0;
  max-width: 190px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.save-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--surface-container);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.header-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  white-space: nowrap;
}

.icon-text {
  gap: 9px;
}

.icon-text svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--navy);
  font-weight: 700;
  padding: 11px 18px;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, box-shadow 130ms ease, transform 80ms ease;
}

.button:hover {
  border-color: var(--ember-tint-line);
}

.button:active {
  transform: translateY(0.5px);
}

.button:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.button.primary {
  color: #fefefd;
  border-color: transparent;
  background: var(--ember);
  box-shadow: 0 1px 2px rgba(255, 91, 4, 0.35);
}

.button.primary:hover {
  background: #e64f00;
  border-color: transparent;
}

.button.secondary {
  background: transparent;
  border-color: transparent;
}

.button.secondary:hover {
  background: var(--surface-container);
  border-color: transparent;
}

.button.dark {
  color: #fefefd;
  border-color: transparent;
  background: var(--navy);
  padding-inline: 22px;
}

.button.dark:hover {
  background: #25282c;
  border-color: transparent;
}

.button.small {
  padding: 8px 12px;
  font-size: 12px;
}

.page-shell {
  width: min(1440px, calc(100% - 76px));
  margin: 28px auto 40px;
}

.page-hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 36px;
  margin-bottom: 20px;
}

.page-hero.compact {
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--ember-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
}

h2 {
  margin-bottom: 0;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

h3 {
  margin-bottom: 8px;
  font-size: 17px;
}

.hero-lede {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.lede {
  max-width: 470px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

.value-banner {
  border: 1px solid #ffd9c2;
  border-radius: var(--radius);
  background: var(--shape-bg);
  padding: 20px;
}

.banner-title,
.banner-points,
.check,
.card-heading,
.toggle-row,
.pricing-bar-row,
.timeline-step,
.benefit-equation {
  display: flex;
  align-items: center;
}

.banner-title {
  gap: 12px;
  color: var(--purple);
  font-weight: 900;
  margin-bottom: 18px;
}

.mini-icon,
.check {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #fefefd;
  background: var(--ember);
  font-weight: 900;
}

.mini-icon {
  width: 24px;
  height: 24px;
}

.check {
  width: 18px;
  height: 18px;
  font-size: 12px;
  margin-right: 8px;
}

.banner-points {
  justify-content: space-between;
  gap: 18px;
  color: #25282c;
  font-size: 14px;
  font-weight: 700;
}

.app-tabs {
  display: flex;
  gap: 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  margin-bottom: 20px;
  box-shadow: none;
}

.tab-button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 11px 16px;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  transition: color 130ms ease, border-color 130ms ease;
}

.tab-button:hover {
  color: var(--navy);
  background: transparent;
}

.tab-button.active {
  color: var(--navy);
  background: transparent;
  border-bottom-color: var(--ember);
  box-shadow: none;
}

.tab-button.active:hover {
  color: var(--navy);
  background: transparent;
}

.tab-button:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

abbr[title] {
  text-decoration: underline dotted var(--line-strong);
  text-underline-offset: 2px;
  cursor: help;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: visible;
}

.config-card,
.pricing-summary,
.integrity-summary {
  overflow: hidden;
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.result-card,
.breakdown-card,
.config-card,
.pricing-summary,
.lever-detail,
.settings-grid > .card,
.split-layout > .card {
  padding: 18px;
}

.card-heading {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.config-card > .card-heading,
.pricing-summary > .card-heading,
.settings-grid > .config-card > .card-heading {
  margin: -18px -18px 16px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-container);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric-card {
  display: flex;
  flex-direction: column;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fefefd;
  padding: 18px;
  text-align: left;
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: auto;
}

.metric-card strong {
  display: block;
  margin-top: 12px;
  font-family: var(--font-serif);
  color: var(--navy);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.032em;
  font-variant-numeric: tabular-nums;
}

.metric-card small {
  display: block;
  color: var(--muted);
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
}

.metric-card--headline {
  background: var(--navy);
  border-color: var(--navy);
}

.metric-card--headline span {
  color: rgba(255, 255, 255, 0.66);
}

.metric-card--headline strong {
  color: var(--ember);
}

.metric-card--headline small {
  color: rgba(255, 255, 255, 0.7);
}

.roi-chart-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
  padding: 14px;
}

.deployment-summary {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
  padding: 14px;
}

.deployment-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.deployment-heading strong {
  font-size: 15px;
}

.deployment-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.deployment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.deployment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--shape-soft);
  padding: 13px 14px;
}

.deployment-item > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.deployment-item .product-icon.small {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex: 0 0 40px;
  background: #fff;
  border: 1px solid var(--line);
}

.deployment-item .product-icon.small .product-image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.deployment-item .product-icon.small .product-svg {
  width: 22px;
  height: 22px;
}

.deployment-item strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.2;
}

.deployment-item small {
  display: block;
  margin-top: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.deployment-division-list {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 14px;
}

.deployment-division-list > span,
.roadmap-division-label,
.division-toggle-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.division-toggle-label > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--navy);
  margin-bottom: 12px;
}

.line-chart {
  height: 320px;
  border-radius: 6px;
  background: #fefefd;
  position: relative;
  overflow: hidden;
}

.chart-tooltip {
  position: absolute;
  z-index: 2;
  min-width: 168px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
  color: var(--navy);
  padding: 10px 11px;
  box-shadow: var(--shadow-lifted);
  transform: translate(-50%, calc(-100% - 14px));
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

.chart-tooltip.visible {
  opacity: 1;
}

.chart-tooltip strong {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
}

.chart-tooltip div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.chart-tooltip b {
  color: var(--navy);
  font-weight: 900;
}

.footnote {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.line-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.benefit-bar,
.cost-bar {
  transition: opacity 120ms ease;
}

.chart-hit-area {
  cursor: crosshair;
}

.chart-hit-area:hover {
  fill: rgba(255, 93, 5, 0.06);
}

.timeline {
  display: grid;
  gap: 14px;
}

.timeline-step {
  align-items: flex-start;
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
}

.timeline-index {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fefefd;
  background: var(--ember);
  font-weight: 900;
  flex: 0 0 auto;
}

.timeline-step p {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.timeline-step strong {
  display: block;
  margin-bottom: 3px;
}

.ramp-note {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #ffd9c2;
  background: #fff1e8;
  color: var(--purple);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 900;
}

.benefit-equation span,
.price-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.benefit-equation strong {
  display: block;
  font-family: var(--font-serif);
  color: var(--navy);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.benefit-equation small {
  display: block;
  color: var(--muted);
  margin-top: 7px;
  font-weight: 600;
}

.benefit-equation b {
  color: var(--line-strong);
  font-size: 22px;
  font-weight: 500;
}

.net-box {
  background: var(--ember-tint);
  border-color: var(--ember-tint-line) !important;
}

.net-box strong {
  color: var(--ember-ink);
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 18px;
}

.split-layout.wide-left {
  grid-template-columns: minmax(0, 1.15fr) 450px;
}

.pricing-form,
.lever-list,
.settings-table,
.pricing-bars,
.product-list,
.product-roadmap {
  display: grid;
  gap: 12px;
}

.product-list {
  gap: 16px;
}

.product-category {
  display: grid;
  gap: 9px;
}

.product-category h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Color-coded category dots, using the product's muted status palette. */
.product-category h3::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cost-dark);
}

.product-category h3.cat-intelligence-layer::before { background: #628aa7; }
.product-category h3.cat-ai-agents::before { background: #55c35b; }
.product-category h3.cat-revenue-workflows::before { background: #b89461; }

.product-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 190px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
  padding: 15px;
}

.product-card {
  transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.product-card.selected {
  border-color: var(--ember-tint-line);
  background: var(--ember-tint);
  box-shadow: inset 0 0 0 1px var(--ember-tint-line);
}

.product-card.disabled {
  background: #f9f8f5;
  color: var(--muted);
}

.product-card.disabled strong,
.product-card.disabled p,
.product-card.disabled .product-price {
  color: var(--muted);
}

.product-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.division-toggle-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.division-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--shape-bg);
  color: var(--muted);
  padding: 8px 9px;
  font-size: 11px;
  font-weight: 900;
}

.division-toggle-label {
  flex: 1 1 auto;
}

.division-toggle.active {
  border-color: var(--ember-tint-line);
  background: var(--ember-tint);
  color: var(--navy);
}

.division-toggle i {
  width: 24px;
  height: 14px;
  border-radius: 999px;
  background: #d7d4d0;
  padding: 2px;
  flex: 0 0 auto;
}

.division-toggle i::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fefefd;
}

.division-toggle.active i {
  background: var(--ember);
}

.division-toggle.active i::before {
  transform: translateX(10px);
}

.division-toggle.pending {
  cursor: default;
  border-style: dashed;
  background: #f5f3ef;
  color: var(--muted);
}

.division-toggle.pending em {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--surface-container);
  padding: 3px 6px;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.product-icon {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--purple);
  flex: 0 0 auto;
}

button.product-icon {
  padding: 0;
  cursor: pointer;
  appearance: none;
}

.product-icon.small {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

.product-icon.disabled {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.product-svg {
  width: 20px;
  height: 20px;
  display: block;
}

.product-image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.product-icon.small .product-svg {
  width: 16px;
  height: 16px;
}

.product-icon.small .product-image {
  width: 100%;
  height: 100%;
}

.product-icon:hover {
  opacity: 0.84;
}

/* Custom product-icon hover tooltip removed: the native `title` attribute on the
   same element already shows a tooltip, so both fired at once and the custom box
   overlapped card content. Keeping the native title tooltip only. */

.product-card strong {
  display: block;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.18;
}

.product-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.product-pill {
  width: fit-content;
  border: 1px solid #ffd9c2;
  border-radius: 999px;
  background: #fff1e8;
  color: var(--purple);
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.muted-pill {
  border-color: #d7d4d0;
  background: #e6e3e0;
  color: var(--muted);
}

.product-field {
  display: grid;
  gap: 5px;
}

.product-field span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-field input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fefefd;
  color: var(--navy);
  font-weight: 900;
  padding: 9px 10px;
}

.product-price {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pending-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.roadmap-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
  padding: 12px;
}

.roadmap-row.muted {
  opacity: 0.55;
}

.roadmap-row header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 9px;
}

.roadmap-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}

.roadmap-row strong {
  display: block;
  font-size: 13px;
}

.roadmap-row small,
.roadmap-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.rollout-controls {
  display: grid;
  grid-template-columns: 72px repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.rollout-controls .product-field input {
  padding: 7px 8px;
}

.rollout-controls .product-field input:disabled {
  background: var(--shape-bg);
  color: var(--muted);
}

.month-picker {
  display: grid;
  grid-template-columns: repeat(36, minmax(0, 1fr));
  gap: 2px;
  margin-top: 10px;
  padding: 0 5px;
}

.month-pill {
  min-width: 0;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--shape-bg);
  color: transparent;
  padding: 0;
  font-size: 0;
}

.month-pill.active,
.month-pill.start {
  border-color: var(--ember);
  background: var(--ember);
}

.month-pill.start {
  position: relative;
  outline: 2px solid #fefefd;
  outline-offset: -4px;
}

.month-pill.start::after {
  content: attr(data-month);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fefefd;
  color: var(--purple);
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 900;
  box-shadow: 0 0 0 1px rgba(255, 91, 4, 0.20);
}

.month-pill:disabled {
  cursor: not-allowed;
}

.month-pill:not(:disabled):hover {
  border-color: var(--purple-2);
}

.month-scale {
  padding: 0 5px;
}

.roadmap-track {
  position: relative;
  height: 30px;
  border-radius: 999px;
  background: var(--shape-bg);
  overflow: hidden;
}

.roadmap-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--ember);
}

.roadmap-scale {
  display: grid;
  grid-template-columns: repeat(36, minmax(0, 1fr));
  gap: 2px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

/* Containment expansion control (ramp) */
.ramp-control {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}

.ramp-inputs {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ramp-field {
  display: grid;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}

.ramp-field > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ramp-field input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--navy);
  font-weight: 900;
  padding: 8px 9px;
}

.ramp-field input:focus-visible {
  outline: none;
  border-color: var(--ember-ink);
  box-shadow: 0 0 0 3px var(--ember-tint);
}

.ramp-arrow {
  flex: 0 0 auto;
  padding-bottom: 9px;
  color: var(--muted);
  font-weight: 900;
}

.formula-info.ramp-info {
  width: 15px;
  height: 15px;
  font-size: 10px;
}

.ramp-curve-select {
  display: flex;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-low);
  padding: 3px;
}

.ramp-curve-btn {
  flex: 1 1 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 800;
  transition: background 120ms ease, color 120ms ease;
}

.ramp-curve-btn:hover {
  color: var(--navy);
}

.ramp-curve-btn.active {
  background: #fff;
  color: var(--ember-ink);
  box-shadow: var(--shadow);
}

.ramp-curve {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ramp-curve span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ember-tint);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
}

.ramp-curve span b {
  color: var(--ember-ink);
  font-size: 13px;
  font-weight: 900;
}

.ramp-curve span.pre-launch {
  background: var(--surface-low);
  opacity: 0.6;
}

.ramp-curve span.pre-launch b {
  color: var(--muted);
}

.roadmap-scale span:nth-child(1) {
  grid-column: 1 / span 12;
  text-align: center;
}

.roadmap-scale span:nth-child(2) {
  grid-column: 13 / span 12;
  text-align: center;
}

.roadmap-scale span:nth-child(3) {
  grid-column: 25 / span 12;
  text-align: center;
}

.pricing-row,
.settings-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 160px 150px;
  align-items: center;
  gap: 14px;
  border: 0;
  border-bottom: 1px solid rgba(225, 222, 219, 0.7);
  border-radius: 0;
  padding: 18px 0;
}

.pricing-row:first-child,
.settings-row:first-child {
  padding-top: 0;
}

.pricing-row:last-child,
.settings-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pricing-row.bundle-row {
  align-items: start;
  border: 1px solid #ffd9c2;
  border-radius: 6px;
  background: #fff1e8;
  padding: 16px;
  margin: 4px 0 2px;
}

.pricing-row p,
.settings-row p {
  margin-bottom: 5px;
  font-weight: 900;
}

.pricing-row p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pricing-division-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-container);
  color: var(--muted);
  padding: 3px 7px 3px 4px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.pricing-division-badge .division-marker {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
  font-size: 8px;
  line-height: 15px;
}

.inline-product-link {
  margin-left: 2px;
}

.pricing-row-copy {
  display: grid;
  gap: 8px;
}

.bundle-components {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.bundle-component {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid #ffd9c2;
  border-radius: 6px;
  background: #fefefd;
  color: var(--navy);
  padding: 8px;
  text-align: left;
  font-size: 11px;
  font-weight: 900;
}

.pricing-row small,
.settings-row small,
.hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-row > small {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  min-height: 28px;
  border: 0;
  border-radius: 4px;
  padding: 5px 8px;
  color: var(--text);
  background: #e6e3e0;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-row > .source-badge {
  justify-self: start;
  border-radius: 4px;
  min-height: 28px;
  padding: 5px 9px;
}

.division-editor {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
  padding: 14px;
}

.division-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.division-editor-header h3 {
  margin: 0;
}

.division-name-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.division-name-row input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fefefd;
  color: var(--navy);
  font-weight: 900;
  padding: 8px 9px;
}

.division-name-list {
  display: grid;
  gap: 8px;
}

.division-name-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
}

.division-add {
  align-self: start;
}

.division-row-space {
  width: 32px;
  height: 32px;
}

.division-delete {
  justify-self: end;
  align-self: center;
}

.division-delete svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
}

.division-delete:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.settings-group-list {
  display: grid;
  gap: 12px;
}

.settings-group {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
  padding: 14px;
}

.settings-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(225, 222, 219, 0.7);
}

.settings-group-header h3 {
  margin: 0;
}

.settings-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.harvey-ball {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: var(--ember);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 22px;
  text-align: center;
}

.division-marker {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 0;
  border-radius: 5px;
  font-size: 10px;
  line-height: 18px;
}

.deployment-division-list .division-marker,
.roadmap-division-label .division-marker {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  border-radius: 4px;
  font-size: 9px;
  line-height: 16px;
}

/* Keep numerals white on the orange badge even inside muted-text containers
   (e.g. the rollout planner rows, where .roadmap-row span sets a grey color). */
.harvey-ball.division-marker {
  color: #fff;
}

.settings-group .settings-row {
  grid-template-columns: minmax(260px, 1fr) 160px 150px;
}

.settings-group .settings-row:first-of-type {
  padding-top: 14px;
}

.settings-group .settings-row:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.settings-empty {
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: var(--surface-low);
  color: var(--muted);
  padding: 16px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 800;
}

.input-shell {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fefefd;
  min-height: 42px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.input-shell:focus-within {
  border-color: var(--ember-ink);
  box-shadow: 0 0 0 3px var(--ember-tint);
}

.input-shell input:focus,
.input-shell input:focus-visible {
  outline: none;
}

.product-field input:focus-visible,
.lever-input-row input:focus-visible,
.division-name-row input:focus-visible {
  outline: none;
  border-color: var(--ember-ink);
  box-shadow: 0 0 0 3px var(--ember-tint);
}

.input-shell span {
  padding: 9px 10px;
  background: var(--surface-low);
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-weight: 900;
}

.input-shell input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 9px 10px;
  color: var(--navy);
  font-weight: 800;
}

.input-shell.locked {
  background: var(--surface-container);
}

.input-shell.locked input:disabled,
.lever-input-row input:disabled {
  color: #55514d;
  background: transparent;
  -webkit-text-fill-color: #55514d;
  cursor: not-allowed;
}

.client-lock-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  align-self: stretch;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--surface-low);
  color: var(--muted);
  padding: 0;
  transition: color 130ms ease, background 130ms ease;
}

.client-lock-button:hover,
.client-lock-button.unlocked {
  background: var(--ember-tint);
  color: var(--ember-ink);
}

.client-lock-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.client-lock-button .lock-open {
  display: none;
}

.client-lock-button.unlocked .lock-closed {
  display: none;
}

.client-lock-button.unlocked .lock-open {
  display: block;
}

.client-unlocked {
  background: #fff;
}

.price-total {
  font-family: var(--font-serif);
  color: var(--navy);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.034em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

.pricing-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(225, 222, 219, 0.7);
}

.pricing-bar-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.pricing-bar-label .product-icon.small {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex: 0 0 30px;
}

.pricing-bar-label .product-icon.small .product-svg {
  width: 16px;
  height: 16px;
}

.pricing-bar-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pricing-bar-text strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.pricing-bar-division {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pricing-bar-value {
  font-weight: 900;
  text-align: right;
}

.bar-track {
  height: 22px;
  border-radius: 999px;
  background: var(--shape-bg);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--ember);
}

.summary-card-title {
  margin-bottom: 16px;
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.summary-stat-list {
  display: grid;
  gap: 0;
  margin-bottom: 18px;
}

.summary-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(225, 222, 219, 0.9);
  padding: 13px 0;
}

.summary-stat:first-child {
  padding-top: 0;
}

.summary-stat:last-child {
  border-bottom: 0;
}

.summary-stat span {
  color: var(--muted);
  font-weight: 700;
}

.summary-stat strong {
  color: var(--navy);
  font-size: 18px;
  font-weight: 900;
}

.integrity-summary {
  padding: 24px;
}

.summary-action {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.summary-action .button {
  width: 100%;
  min-height: 48px;
}

.benefits-layout:not(.detail-open) .lever-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lever-card {
  display: grid;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
  overflow: hidden;
  transition: border-color 130ms ease, box-shadow 130ms ease, opacity 130ms ease;
}

.lever-card.selected {
  border-color: var(--ember-tint-line);
  box-shadow: inset 0 0 0 1px var(--ember-tint-line);
}

.lever-card.muted {
  opacity: 0.62;
}

.lever-banner {
  height: 86px;
  background-position: center;
  background-size: cover;
}

.lever-card-body {
  display: grid;
  gap: 11px;
  padding: 13px;
}

.lever-card-topline,
.lever-card-main,
.lever-card-footer,
.detail-formula-row {
  display: flex;
  align-items: center;
}

.lever-card-topline {
  justify-content: space-between;
  gap: 10px;
}

.detail-value-card span,
.detail-formula-row > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lever-card-main {
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lever-copy {
  min-width: 0;
}

.lever-copy strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.2;
}

.lever-copy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.lever-value-stack {
  flex: 0 0 auto;
  text-align: right;
}

.lever-value-stack strong {
  display: block;
  color: var(--navy);
  font-size: 22px;
  font-weight: 900;
}

.lever-value-stack span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.lever-timeline {
  display: grid;
  grid-template-columns: repeat(36, minmax(0, 1fr));
  gap: 2px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}

.lever-timeline span {
  min-width: 0;
  border-radius: 999px;
  background: #e6e3e0;
}

.lever-timeline span.partial {
  background: #ffb088;
}

.lever-timeline span.active {
  background: var(--ember);
}

.lever-division-controls,
.detail-division-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lever-division-controls .division-toggle,
.detail-division-controls .division-toggle {
  min-height: 38px;
}

.division-toggle strong {
  margin-left: auto;
  color: var(--navy);
  font-size: 11px;
  font-weight: 900;
}

.division-toggle:not(.active) strong {
  color: var(--muted);
}

.lever-card-footer {
  justify-content: space-between;
  gap: 12px;
}

.toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 96px;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
  background: #fefefd;
}

.toggle-left {
  display: grid;
  gap: 5px;
}

.toggle-left strong {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle-left p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.lever-products {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.detail-products {
  margin: -4px 0 12px;
}

.source-badge-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 4px;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--shape-bg);
  color: var(--muted);
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.settings-source.source-client-provided,
.settings-source.source-call-transcript {
  border-color: transparent;
  background: #e6e3e0;
  color: var(--text);
}

.settings-source.source-simple-assumption {
  border-color: transparent;
  background: var(--surface-container);
  color: var(--text);
}

.settings-source.source-needs-validation {
  border-color: var(--purple);
  border-style: dashed;
  background: transparent;
  color: var(--purple);
}

.source-client-provided,
.source-call-transcript {
  border-color: #d7d4d0;
  background: #f9f8f5;
  color: #404040;
}

.source-simple-assumption {
  border-color: #ffd9c2;
  background: #fff1e8;
  color: var(--purple);
}

.source-needs-validation {
  border-color: #d7d4d0;
  background: #f9f8f5;
  color: #737373;
}

.source-proposal-input {
  border-color: #d7d4d0;
  background: #f5f3ef;
  color: #737373;
}

.settings-source.source-client-provided,
.settings-source.source-call-transcript {
  border-color: transparent;
  background: #e6e3e0;
  color: var(--text);
}

.settings-source.source-simple-assumption {
  border-color: transparent;
  background: var(--surface-container);
  color: var(--text);
}

.settings-source.source-needs-validation {
  border-color: var(--purple);
  border-style: dashed;
  background: transparent;
  color: var(--purple);
}

.toggle-value {
  color: var(--green);
  font-size: 20px;
  font-weight: 900;
  text-align: right;
  justify-self: end;
  min-width: 86px;
}

.inputs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 96px;
  justify-self: center;
}

.inputs-button.active {
  border-color: #ffd9c2;
  background: #fff1e8;
  color: var(--purple);
}

.inputs-button svg,
.icon-only svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-only {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
}

.switch {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #d7d4d0;
  padding: 3px;
  border: 0;
  flex: 0 0 auto;
}

.switch::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 50%;
  background: #fefefd;
}

.switch.active {
  background: var(--ember);
}

.switch.active::before {
  transform: translateX(20px);
}

.pricing-switch {
  width: 38px;
  height: 22px;
}

.pricing-switch::before {
  width: 16px;
  height: 16px;
}

.pricing-switch.active::before {
  transform: translateX(16px);
}

.lever-detail h2 {
  margin-bottom: 10px;
}

.split-layout.wide-left.benefits-layout {
  grid-template-columns: 1fr;
}

.split-layout.wide-left.benefits-layout.detail-open {
  grid-template-columns: minmax(0, 1.15fr) 450px;
}

.lever-detail.hidden {
  display: none;
}

.detail-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.lever-inputs {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.detail-value-card {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
  padding: 12px;
  margin-top: 12px;
}

.detail-value-card strong {
  color: var(--navy);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.mini-lever-chart {
  display: grid;
  grid-template-columns: repeat(36, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  height: 74px;
  border-radius: 6px;
  background: #f5f3ef;
  padding: 10px 8px 8px;
}

.mini-lever-chart span {
  position: relative;
  display: block;
  min-height: 4px;
  border-radius: 999px 999px 2px 2px;
  background: var(--ember);
}

.mini-lever-chart span::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 5;
  display: block;
  width: max-content;
  max-width: 150px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fefefd;
  box-shadow: var(--shadow);
  color: var(--navy);
  padding: 6px 8px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.mini-lever-chart span:hover::after,
.mini-lever-chart span:focus-visible::after {
  opacity: 1;
}

.mini-lever-scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.mini-lever-scale span:nth-child(2) {
  text-align: center;
}

.mini-lever-scale span:nth-child(3) {
  text-align: right;
}

.detail-formula-row {
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
  padding: 10px 12px;
}

.formula-info {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-container);
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  cursor: help;
}

.formula-info span {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 6;
  display: none;
  width: 260px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fefefd;
  box-shadow: var(--shadow);
  color: var(--text);
  padding: 10px;
  text-align: left;
  line-height: 1.35;
  font-size: 12px;
}

.formula-info:hover span,
.formula-info:focus-visible span {
  display: block;
}

.detail-division-controls {
  margin-top: 12px;
}

.detail-division-controls .detail-division-option {
  cursor: pointer;
}

.detail-division-controls .detail-division-option.selected {
  border-color: var(--purple);
  background: #fff1e8;
  box-shadow: inset 0 0 0 1px rgba(255, 91, 4, 0.35);
  color: var(--navy);
}

.detail-division-controls .detail-division-option.selected strong {
  color: var(--navy);
}

.lever-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fefefd;
  padding: 10px;
}

.lever-input-row > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.ramp-assumption-row {
  grid-template-columns: minmax(0, 1fr);
}

.ramp-assumption-control {
  display: grid;
  gap: 9px;
}

.ramp-assumption-bounds {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ramp-bound {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ramp-bound small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ramp-bound-arrow {
  padding-bottom: 11px;
  color: var(--muted);
  font-weight: 900;
}

.ramp-effective {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ramp-curve-note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
}

.linked-assumption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 91, 4, 0.30);
  border-radius: 999px;
  background: #fff1e8;
  color: var(--purple);
}

.linked-assumption::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: 260px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--navy);
  box-shadow: var(--shadow);
  color: #fefefd;
  padding: 7px 9px;
  transform: translateX(-50%) translateY(2px);
  opacity: 0;
  pointer-events: none;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
  text-align: left;
  text-transform: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.linked-assumption:hover::after,
.linked-assumption:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.linked-assumption svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lever-input-row .inline-source {
  min-height: 20px;
  padding: 3px 6px;
  font-size: 9px;
}

.lever-input-row .settings-source.inline-source {
  min-height: 22px;
  padding: 4px 7px;
  font-size: 10px;
}

.input-with-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  justify-items: stretch;
}

.input-with-unit.locked {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.lever-input-row input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--navy);
  font-weight: 900;
  padding: 8px 9px;
}

.input-with-unit.client-input input,
.input-with-unit.locked input {
  border-radius: 4px 0 0 4px;
  border-right: 0;
}

.input-with-unit.locked input {
  background: var(--surface-container);
}

.input-with-unit.client-input .client-lock-button,
.input-with-unit.locked .client-lock-button {
  align-self: stretch;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-left: 1px solid var(--line);
  border-radius: 0 4px 4px 0;
}

.input-unit {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  grid-column: 1 / -1;
  justify-self: end;
  border-radius: 999px;
  background: var(--surface-container);
  color: var(--muted);
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.settings-group-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.settings-group-list .settings-group:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.save-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  isolation: isolate;
}

.save-modal.hidden {
  display: none !important;
}

.save-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(22, 20, 18, 0.42);
  padding: 0;
}

.save-panel {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100vw - 64px));
  max-height: min(680px, calc(100vh - 64px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 22px 70px rgba(22, 20, 18, 0.24);
  overflow: hidden;
}

.save-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: #fefefd;
  padding: 18px;
}

.save-panel-header h2 {
  margin-bottom: 5px;
}

.save-panel-header p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.save-list {
  display: grid;
  gap: 10px;
  max-height: 440px;
  overflow: auto;
  padding: 14px 18px 18px;
}

.save-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(225, 222, 219, 0.7);
  border-radius: 0;
  background: transparent;
  padding: 14px 0;
}

.save-file:last-child {
  border-bottom: 0;
}

.save-file-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.save-file-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: var(--surface-container);
  color: var(--purple);
  flex: 0 0 auto;
}

.save-file-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.save-file strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
}

.save-file small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.save-file-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.save-file-actions .button {
  min-width: 68px;
}

.save-empty {
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: #fefefd;
  color: var(--muted);
  padding: 24px;
  text-align: center;
  font-weight: 800;
}

@media (max-width: 1180px) {
  body {
    min-width: 960px;
  }

  .page-hero,
  .overview-grid,
  .split-layout,
  .split-layout.wide-left,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   Design-preview overlay (2026-06-10) — modern / sleek pass.
   Appended overrides only; the base system above is untouched.
   ============================================================ */

:root {
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(24, 24, 27, 0.05), 0 4px 14px rgba(24, 24, 27, 0.05);
  --shadow-lifted: 0 4px 10px rgba(24, 24, 27, 0.07), 0 16px 36px rgba(24, 24, 27, 0.11);
}

/* Warm ambient glow behind the page */
body {
  background:
    radial-gradient(1100px 460px at 50% -120px, #ffeede 0%, rgba(255, 238, 222, 0) 70%),
    var(--bg);
}

/* Frosted sticky header */
.site-header {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(230, 227, 224, 0.85);
}

/* Gradient accent on the hero keyword */
.h1-accent {
  background: linear-gradient(92deg, var(--ember) 0%, #ff8a3c 60%, #ffb15c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Cards: softer radii, hairline borders, layered depth */
.card {
  border-color: rgba(230, 227, 224, 0.9);
}

.metric-card {
  border-radius: 12px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  position: relative;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lifted);
  border-color: var(--ember-tint-line);
}

.metric-card--headline {
  background: linear-gradient(140deg, #211f1e 0%, #121212 58%, #241405 100%);
  border-color: #121212;
  box-shadow: 0 10px 28px rgba(255, 93, 5, 0.16), 0 2px 6px rgba(24, 24, 27, 0.18);
}

.metric-card--headline:hover {
  border-color: #121212;
}

.metric-card--headline strong {
  background: linear-gradient(92deg, #ff5d05 0%, #ff8a3c 70%, #ffb15c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* One-time staggered entrance for the results tiles */
body:not(.booted) .metric-card {
  opacity: 0;
}

body.booted .metric-card {
  animation: tile-rise 460ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

body.booted .metric-card:nth-child(1) { animation-delay: 30ms; }
body.booted .metric-card:nth-child(2) { animation-delay: 80ms; }
body.booted .metric-card:nth-child(3) { animation-delay: 130ms; }
body.booted .metric-card:nth-child(4) { animation-delay: 180ms; }
body.booted .metric-card:nth-child(5) { animation-delay: 230ms; }
body.booted .metric-card:nth-child(6) { animation-delay: 280ms; }
body.booted .metric-card:nth-child(7) { animation-delay: 330ms; }
body.booted .metric-card:nth-child(8) { animation-delay: 380ms; }

@keyframes tile-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.booted .metric-card {
    animation: none;
    opacity: 1;
  }
  .metric-card:hover {
    transform: none;
  }
}

/* Buttons: gradient primary, smoother feel */
.button.primary {
  background: linear-gradient(180deg, #ff6f1f 0%, #f25400 100%);
  box-shadow: 0 1px 2px rgba(255, 91, 4, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.button.primary:hover {
  background: linear-gradient(180deg, #ff5d05 0%, #e64f00 100%);
}

.button.dark {
  background: linear-gradient(180deg, #2a2a2e 0%, #121214 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Inner panels pick up the softer radius */
.roi-chart-card,
.deployment-summary,
.lever-card,
.audience-group,
.settings-group,
.division-editor,
.lever-input-row,
.product-card,
.roadmap-row {
  border-radius: 12px;
}

.lever-card {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.lever-card:hover {
  box-shadow: var(--shadow-lifted);
}

/* Tabs: smoother active underline */
.tab-button {
  transition: color 140ms ease;
}

/* Month pills + curve buttons soften */
.month-pill {
  border-radius: 4px;
}

html {
  scroll-behavior: smooth;
}

/* Numbered category headers */
.cat-index {
  color: var(--ember-ink);
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}

.cat-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Product cards: gradient hairline + warm wash when included */
.product-card {
  border-radius: 14px;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.product-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lifted);
}

.product-card.disabled:hover {
  transform: none;
  box-shadow: var(--shadow);
}

.product-card.selected {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, #ffc59e 0%, #ffd9c2 45%, #ffe9da 100%) border-box;
  box-shadow: 0 6px 20px rgba(255, 93, 5, 0.09), 0 1px 3px rgba(24, 24, 27, 0.05);
}

.product-card.selected::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 241, 232, 0.55) 0%, rgba(255, 241, 232, 0) 55%);
  pointer-events: none;
}

.product-card {
  position: relative;
}

/* Icon tiles: soft gradient ring */
.product-card .product-icon {
  border-radius: 11px;
  background: linear-gradient(150deg, #fff1e8 0%, #fefefd 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 197, 158, 0.45), 0 1px 2px rgba(24, 24, 27, 0.05);
  padding: 5px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: var(--ember-tint);
  color: var(--ember-ink);
  border: 1px solid var(--ember-tint-line);
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ember);
  box-shadow: 0 0 0 3px rgba(255, 93, 5, 0.16);
}

/* Rollout planner rows: card-ified with gradient month strips */
.roadmap-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 12px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.03);
}

.month-pill {
  height: 12px;
  border-radius: 3px;
  border-color: rgba(230, 227, 224, 0.9);
  transition: background 120ms ease, transform 120ms ease;
}

.month-pill.active,
.month-pill.start {
  background: linear-gradient(180deg, #ff7a33 0%, #f25400 100%);
  border-color: transparent;
}

.month-pill.start {
  box-shadow: 0 0 0 2px rgba(255, 93, 5, 0.22);
}

.month-pill:hover {
  transform: scaleY(1.25);
}

/* ============================================================
   De-nesting pass (2026-06-10) — "one level of chrome".
   Outer wrapper cards dissolve into the canvas; the meaningful
   card keeps its border; everything inside it uses hairline
   dividers and whitespace instead of nested outlined boxes.
   ============================================================ */

/* Level-1 wrappers become invisible (Overview results, Products
   catalog + planner, Benefits lever list). Pricing and the
   Benefits detail aside keep their surface — forms need one. */
.result-card,
[data-panel="products"] .split-layout > .card,
[data-panel="products"] .split-layout > .product-preview,
[data-panel="benefits"] .benefits-layout > .card,
.settings-grid > .config-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.overview-grid {
  margin-bottom: 24px;
}

/* Product cards: the single bordered container. Division rows
   inside become a divider list — no more boxed pills. */
.product-card {
  gap: 8px;
  padding: 16px 16px 6px;
}

.product-card .division-toggle-list {
  display: grid;
  gap: 0;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}

.product-card .division-toggle {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 2px;
  min-height: 40px;
}

.product-card .division-toggle.active {
  background: transparent;
}


.division-toggle.pending {
  border-style: none;
  background: transparent;
}

.division-toggle.pending em {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Planner rows are the one bordered level; month strips lose
   their per-segment borders. */
.month-pill {
  border: 0;
  background: #ece9e4;
}

.month-pill.active,
.month-pill.start {
  background: linear-gradient(180deg, #ff7a33 0%, #f25400 100%);
}

/* Overview: the chart panel and deployment strip keep a single
   soft surface; deployment items de-boxed into a clean row. */
.roi-chart-card {
  border-radius: 14px;
}

.deployment-summary {
  border-radius: 14px;
}

.deployment-item {
  border: 0;
  background: transparent;
  padding: 4px 0;
}

/* Benefits detail aside: input rows become a divider list. */
.lever-detail .lever-input-row {
  border: 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid rgba(230, 227, 224, 0.8);
  padding: 12px 2px;
}

.lever-detail .lever-inputs {
  margin-top: 4px;
}

.lever-detail .lever-input-row:first-child {
  border-top: 0;
}

/* Settings: wrapper gone, groups are the single card level. */
.settings-group,
.division-editor {
  border-radius: 14px;
}

/* Square chart bars (2026-06-10) — flat, professional bar geometry */
.mini-lever-chart span {
  border-radius: 0;
}

/* ============================================================
   Round 4 (2026-06-11) — mockup picks: sidebar nav (01),
   oversized two-line hero (04), rollout rail (02), line icons (05).
   ============================================================ */

/* App frame: fixed sidebar + fluid main column */
.app-frame {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

.side-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 14px 18px;
  background: rgba(255, 255, 255, 0.85);
  border-right: 1px solid var(--line);
  z-index: 20;
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  color: var(--navy);
  font-size: 19px;
  font-weight: 800;
}

.side-brand .brand-icon,
.side-brand img {
  width: 26px;
  height: 26px;
}

.side-nav-list {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.side-nav .tab-button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 10px 12px;
  color: #5d5a56;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  transition: background 130ms ease, color 130ms ease;
}

.side-nav .tab-button svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side-nav .tab-button:hover {
  background: var(--shape-soft);
  color: var(--navy);
}

.side-nav .tab-button.active,
.side-nav .tab-button.active:hover {
  background: var(--ember-tint);
  color: var(--ember-ink);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--ember-tint-line);
}

.side-client {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 11px 12px;
}

.side-client img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.side-client small {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.side-client strong {
  font-size: 12.5px;
  color: var(--navy);
}

/* Slim top bar inside the main column — actions only */
.app-main {
  min-width: 0;
}

.app-main .site-header {
  height: 60px;
  grid-template-columns: 1fr auto;
  padding: 0 30px;
}

/* Oversized two-line hero (mockup 04) */
.page-hero.compact {
  margin: 26px 0 30px;
}

.page-hero h1 {
  margin-bottom: 16px;
  font-size: clamp(40px, 4.3vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.hero-lede {
  max-width: 620px;
}

/* Rollout rail (mockup 02): one bordered card, hairline rows,
   shared year scale, dotted pre-launch months */
.roadmap-rail {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 14px 16px 4px;
}

.rail-scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.roadmap-rail .roadmap-row {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 12px 0 14px;
}

.roadmap-rail .roadmap-row + .roadmap-row {
  border-top: 1px solid var(--line);
}

.rail-index {
  color: var(--ember-ink);
  font-size: 10px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.roadmap-rail .month-picker {
  gap: 3px;
  margin-top: 10px;
  padding: 0;
  align-items: center;
  height: 14px;
}

.roadmap-rail .month-pill {
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
  opacity: 0.55;
}

.roadmap-rail .month-pill.active,
.roadmap-rail .month-pill.start {
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ff7a33 0%, #f25400 100%);
  opacity: 1;
}

.roadmap-rail .month-pill:not(:disabled):hover {
  opacity: 1;
}

/* Division rows inside product cards: full-width divider rows,
   no truncated two-up pills */
.product-card .division-toggle-list {
  grid-template-columns: 1fr;
}

.product-card .division-toggle + .division-toggle {
  border-top: 1px solid rgba(230, 227, 224, 0.8);
}

/* Rail segments read as a continuous bar, not teeth */
.roadmap-rail .month-picker {
  gap: 2px;
}

.roadmap-rail .month-pill.active,
.roadmap-rail .month-pill.start {
  border-radius: 2px;
}

/* Settings rows flex to the narrower two-up cards beside the sidebar */
.settings-row,
.settings-group .settings-row {
  grid-template-columns: minmax(0, 1fr) minmax(110px, 150px) minmax(0, auto);
  gap: 12px;
}

.settings-row > .source-badge {
  justify-self: end;
  white-space: nowrap;
}

/* ============================================================
   Round 5 (2026-06-11) — Minhal feedback: co-brand back up top,
   hero only on Overview, consistent eyebrow-free page headers,
   bigger 6.8x hero number, pricing icon tiles, settings polish.
   ============================================================ */

/* Sidebar co-brand lockup (Simple AI × Driveway), stacked compact */
.side-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 2px 10px 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.side-brand .simple-brand,
.side-brand .driveway-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.side-brand .simple-brand {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}

.side-brand .driveway-brand {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.side-brand .brand-icon,
.side-brand .brand-icon img {
  width: 23px;
  height: 23px;
}

.side-brand .driveway-brand img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.side-brand .cobrand-x {
  color: var(--line-strong);
  font-size: 13px;
  font-weight: 500;
}

/* Consistent page header on the canvas (replaces per-card eyebrow+title) */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 6px 0 20px;
}

.view-header h2 {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* Quiet panel labels that replace the orange eyebrows on sub-panels */
.panel-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.summary-caption {
  margin: 2px 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

/* Hero: a touch tighter now that it lives only on Overview */
[data-panel="overview"] .page-hero.compact {
  margin: 18px 0 26px;
}

/* 6.8x — give the headline number the hero treatment, with an
   ember glow pooling in the dark tile. Equalize all tile heights. */
.metric-grid {
  grid-auto-rows: 1fr;
}

.metric-card--headline {
  position: relative;
  overflow: hidden;
}

.metric-card--headline > * {
  position: relative;
  z-index: 1;
}

.metric-card--headline::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 93, 5, 0.34) 0%, rgba(255, 93, 5, 0) 66%);
  z-index: 0;
  pointer-events: none;
}

.metric-card--headline strong {
  margin-top: 14px;
  font-size: 54px;
  letter-spacing: -0.042em;
}

/* Pricing icons: same gradient-ring tile as the Products page */
[data-panel="pricing"] .product-icon,
[data-panel="pricing"] .product-icon.small {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(150deg, #fff1e8 0%, #fefefd 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 197, 158, 0.45), 0 1px 2px rgba(24, 24, 27, 0.05);
  padding: 5px;
}

[data-panel="pricing"] .product-icon .product-image,
[data-panel="pricing"] .product-icon.small .product-image {
  width: 100%;
  height: 100%;
}

[data-panel="pricing"] .product-icon .product-svg,
[data-panel="pricing"] .product-icon.small .product-svg {
  width: 18px;
  height: 18px;
}

[data-panel="pricing"] .product-icon:hover {
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--ember-tint-line), 0 2px 6px rgba(255, 93, 5, 0.12);
}

/* Settings: bring the cards up to the round-4 sleek surface so the
   page stops feeling like a bare form next to the others. */
.division-editor,
.settings-group {
  border-color: rgba(230, 227, 224, 0.9);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}

.division-editor-header h3,
.settings-group-header h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.settings-group-header,
.division-editor-header {
  margin-bottom: 6px;
}

.settings-group-header {
  border-bottom-color: rgba(230, 227, 224, 0.9);
}

.settings-row input,
.division-name-row input {
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.settings-row input:focus,
.division-name-row input:focus,
.input-shell:focus-within {
  outline: none;
  border-color: var(--ember-tint-line);
  box-shadow: 0 0 0 3px rgba(255, 93, 5, 0.12);
}

/* The numbered division marker picks up the gradient treatment */
.settings-group .harvey-ball {
  background: linear-gradient(180deg, #ff7a33 0%, #f25400 100%);
  box-shadow: 0 1px 2px rgba(255, 93, 5, 0.3);
}

/* ============================================================
   Round 6 (2026-06-11) — Minhal feedback: horizontal co-brand in a
   full-width top bar with actions moved to the sidebar bottom,
   stable rollout order, settings text hierarchy, pricing bundle
   clip fix, and a floating slide-in lever-detail panel.
   ============================================================ */

/* Full-width top bar carrying the horizontal Simple AI × Driveway lockup */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  height: 62px;
  padding: 0 30px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.top-bar .cobrand-lockup {
  display: flex;
  align-items: center;
  gap: 11px;
}

.top-bar .simple-brand,
.top-bar .driveway-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
}

/* Equal-size brand marks (client logo matches Simple AI) */
.top-bar .brand-icon,
.top-bar .brand-icon img,
.top-bar .driveway-brand img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.top-bar .cobrand-x {
  color: var(--line-strong);
  font-size: 18px;
  font-weight: 500;
}

/* Sidebar now sits below the top bar; actions pinned to its bottom */
.app-frame {
  min-height: calc(100vh - 62px);
}

.side-nav {
  top: 62px;
  height: calc(100vh - 62px);
  padding-top: 16px;
}

.side-actions {
  margin-top: auto;
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.side-actions .button {
  width: 100%;
  justify-content: center;
}

.side-actions .save-status {
  max-width: none;
  min-height: 15px;
  text-align: center;
}

.app-main {
  min-width: 0;
}

/* Pricing rows: flexible columns so the bundle's peach background
   stops clipping in the narrower card beside the sidebar. */
.pricing-row {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 168px) minmax(0, auto);
  gap: 12px;
}

.config-card {
  overflow: visible;
}

/* Settings text hierarchy: group/card titles dominate, row labels quiet */
.settings-row p {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.division-editor-header h3,
.settings-group-header h3 {
  font-size: 15.5px;
  font-weight: 800;
}

/* Lever detail: floating menu that scoots in from the side, clearly
   tied to the selected lever rather than reading as a flat column. */
[data-panel="benefits"] .benefits-layout > .lever-detail {
  border: 1px solid var(--ember-tint-line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 8px 30px rgba(24, 24, 27, 0.13), 0 2px 6px rgba(255, 93, 5, 0.08);
  padding: 18px;
  position: sticky;
  top: 78px;
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

[data-panel="benefits"] .benefits-layout > .lever-detail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #ff7a33 0%, #f25400 100%);
}

.benefits-layout.detail-open > .lever-detail {
  animation: detail-slide-in 280ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@keyframes detail-slide-in {
  from {
    opacity: 0;
    transform: translateX(26px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefits-layout.detail-open > .lever-detail {
    animation: none;
  }
}

/* The detail panel's own header label reads as a quiet caption */
.lever-detail .detail-heading .eyebrow {
  color: var(--ember-ink);
}

/* ============================================================
   Round 6b (2026-06-11) — Minhal: sidebar action buttons were
   oversized, and the overview ran tall enough that the chart fell
   below the fold (read as "cut off"). Compact the actions and
   tighten the overview's vertical rhythm so more fits up top.
   ============================================================ */

/* Compact, refined sidebar actions */
.side-actions {
  gap: 7px;
  padding-top: 12px;
}

.side-actions .button {
  padding: 8px 12px;
  font-size: 12.5px;
  border-radius: 9px;
}

.side-actions .button.icon-text svg {
  width: 16px;
  height: 16px;
}

.side-actions .save-status {
  font-size: 11px;
}

/* Tighter overview rhythm: trim the hero/tile/chart stack so the
   chart clears the fold on a standard laptop window. */
[data-panel="overview"] .page-hero.compact {
  margin: 14px 0 16px;
}

[data-panel="overview"] .page-hero h1 {
  margin-bottom: 12px;
}

[data-panel="overview"] .hero-lede {
  font-size: 15px;
}

.metric-card {
  min-height: 116px;
  padding: 15px 16px;
}

.metric-grid {
  gap: 12px;
  margin-bottom: 14px;
}

.overview-grid {
  margin-bottom: 16px;
}

.line-chart {
  height: 270px;
}

.metric-card--headline strong {
  font-size: 48px;
}

.metric-card strong {
  font-size: 32px;
}

/* ============================================================
   Round 7 (2026-06-11) — Minhal: legend out of the chart, quieter
   footnote, product-icon gradient tiles everywhere, year scale to
   the bottom of the rail, removed Live/Future/bundle-status/hint
   chrome, aligned pricing inputs, and entrance animations per page.
   ============================================================ */

/* Chart legend now lives below the plot (no more overlap with bars) */
.chart-legend {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 6px;
}

.chart-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.chart-legend .legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.chart-legend .legend-swatch.benefit {
  background: linear-gradient(180deg, #ff7a33 0%, #f25400 100%);
}

.chart-legend .legend-swatch.cost {
  background: #d7d4d0;
}

/* Quieter chart footnote */
.footnote {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}

/* Product-icon gradient tile applied everywhere (overview deployment,
   benefits levers + detail, rollout rail, pricing — all match Products) */
.product-icon {
  border-radius: 9px;
  background: linear-gradient(150deg, #fff1e8 0%, #fefefd 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 197, 158, 0.45), 0 1px 2px rgba(24, 24, 27, 0.05);
  padding: 5px;
}

.product-icon.small {
  border-radius: 8px;
  padding: 4px;
}

.product-icon.disabled {
  background: var(--shape-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.product-icon:hover {
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--ember-tint-line), 0 2px 6px rgba(255, 93, 5, 0.12);
}

/* Overview deployment tiles had a higher-specificity flat-white override —
   bring them onto the same gradient tile as everywhere else. */
.deployment-item .product-icon.small {
  background: linear-gradient(150deg, #fff1e8 0%, #fefefd 70%);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 197, 158, 0.45), 0 1px 2px rgba(24, 24, 27, 0.05);
  padding: 7px;
}

/* Year scale moves to the bottom of the rollout rail (reads as an axis) */
.rail-scale {
  padding-bottom: 0;
  padding-top: 10px;
  margin-top: 4px;
  border-bottom: 0;
  border-top: 1px solid var(--line);
}

/* Pricing rows: fixed suffix column so every $ input aligns vertically */
.pricing-row {
  grid-template-columns: minmax(0, 1fr) 170px 96px;
}

/* Give the bundle band a little breathing room inside the pricing card. */
.pricing-row.bundle-row {
  margin: 4px 0 2px;
}

/* Per-page entrance animation on tab switch (mirrors the overview feel).
   Driven by a transient .view-entering class removed after it plays. */
.view-entering > .view-header,
.view-entering > .split-layout,
.view-entering > .settings-grid {
  animation: view-rise 440ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.view-entering > .split-layout > * {
  animation: view-rise 480ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.view-entering > .split-layout > *:nth-child(2) {
  animation-delay: 70ms;
}

@keyframes view-rise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-entering > .view-header,
  .view-entering > .split-layout,
  .view-entering > .split-layout > *,
  .view-entering > .settings-grid {
    animation: none;
  }
}

/* ============================================================
   Monarch-inspired cleanup (2026-06-12): cleaner bordered shapes,
   soft app canvas, centered KPI cards, and Simple AI ember accents.
   ============================================================ */

:root {
  --bg: #f7f4f2;
  --shape-bg: #f7f4f2;
  --shape-soft: #f0ede9;
  --surface-container: #f5f2ee;
  --surface-low: #efebe7;
  --card: #fffefe;
  --line: #e8e3de;
  --line-strong: #d8d1ca;
  --shadow: 0 1px 2px rgba(31, 29, 26, 0.08), 0 5px 16px rgba(31, 29, 26, 0.06);
  --shadow-lifted: 0 2px 4px rgba(31, 29, 26, 0.08), 0 10px 26px rgba(31, 29, 26, 0.1);
  --radius: 8px;
  --radius-sm: 8px;
}

body {
  background: var(--bg);
}

h1,
h2,
h3,
.page-hero h1,
.view-header h2,
.metric-card strong,
.price-total,
.summary-card-title,
.product-card strong,
.lever-copy strong {
  letter-spacing: 0;
}

.top-bar {
  height: 62px;
  background: rgba(255, 254, 252, 0.92);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(31, 29, 26, 0.03);
}

.top-bar .simple-brand,
.top-bar .driveway-brand {
  font-size: 17px;
}

.app-frame {
  grid-template-columns: 228px minmax(0, 1fr);
}

.side-nav {
  background: var(--bg);
  border-right-color: var(--line);
  padding-inline: 14px;
}

.side-nav-list {
  gap: 6px;
}

.side-nav .tab-button {
  min-height: 42px;
  border-radius: 7px;
  color: #4a4642;
  font-size: 13px;
  font-weight: 650;
  padding: 10px 12px;
}

.side-nav .tab-button:hover {
  background: #efebe7;
}

.side-nav .tab-button.active,
.side-nav .tab-button.active:hover {
  background: #ede9e4;
  color: var(--ember-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 93, 5, 0.18);
}

.side-actions {
  border-top-color: var(--line);
}

.button,
.side-actions .button,
.view-header .button {
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(31, 29, 26, 0.05);
}

.button.secondary {
  border-color: var(--line);
  background: #fffefe;
}

.button.secondary:hover {
  background: #f8f5f1;
  border-color: var(--line-strong);
}

.page-shell {
  width: min(1450px, calc(100% - 82px));
  margin-top: 24px;
}

[data-panel="overview"] .page-hero.compact {
  margin: 8px 0 22px;
}

.page-hero h1,
[data-panel="overview"] .page-hero h1 {
  margin-bottom: 12px;
  color: #24211f;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.08;
}

.h1-accent {
  color: var(--ember);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--ember);
}

.hero-lede,
[data-panel="overview"] .hero-lede {
  max-width: 680px;
  color: #6f6963;
  font-size: 15.5px;
  line-height: 1.55;
}

.view-header {
  margin: 8px 0 20px;
}

.view-header h2 {
  color: #24211f;
  font-size: 28px;
  font-weight: 800;
}

.card,
.product-card,
.lever-card,
.pricing-summary,
.config-card,
.settings-group,
.division-editor,
.split-layout > .card,
.roi-chart-card,
.deployment-summary,
.roadmap-rail {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefe;
  box-shadow: var(--shadow);
}

.result-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.result-card > .card-heading {
  display: none;
}

.metric-grid {
  gap: 20px;
  margin-bottom: 22px;
}

.metric-card {
  align-items: center;
  justify-content: center;
  min-height: 144px;
  border-color: var(--line);
  border-radius: 8px;
  background: #fffefe;
  box-shadow: var(--shadow);
  text-align: center;
  padding: 22px 18px;
}

.metric-card span {
  order: 2;
  margin: 12px 0 0;
  color: #837d77;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.metric-card strong {
  order: 1;
  margin: 0;
  color: #24211f;
  font-size: 35px;
  font-weight: 800;
}

.metric-card small {
  order: 3;
  margin-top: 8px;
  color: #6f6963;
  font-size: 11.5px;
  font-weight: 650;
}

.metric-card--headline {
  border-color: rgba(255, 93, 5, 0.32);
  background: #fffefe;
}

.metric-card--headline::after {
  display: none;
}

.metric-card--headline span,
.metric-card--headline small {
  color: #6f6963;
}

.metric-card--headline strong {
  color: var(--ember);
  font-size: 46px;
}

.roi-chart-card {
  padding: 22px 24px 16px;
}

.chart-heading strong,
.deployment-heading strong,
.panel-title,
.summary-card-title {
  color: #24211f;
  font-weight: 800;
}

.chart-legend .legend-item,
.footnote {
  color: #7e7770;
}

.deployment-summary {
  margin-top: 20px;
  padding: 18px;
}

.deployment-item {
  border-color: var(--line);
  border-radius: 8px;
  background: #fbfaf8;
  box-shadow: none;
}

.product-icon,
.product-icon.small,
[data-panel="pricing"] .product-icon,
[data-panel="pricing"] .product-icon.small,
.deployment-item .product-icon.small {
  border-radius: 7px;
  background: #fff8f3;
  box-shadow: inset 0 0 0 1px rgba(255, 93, 5, 0.18);
}

.product-card {
  padding: 18px;
}

.product-card:hover,
.lever-card:hover {
  border-color: #ded6cf;
  box-shadow: var(--shadow-lifted);
}

.product-card.selected {
  border-color: rgba(255, 93, 5, 0.34);
  background: #fffdfb;
}

.product-card.selected::before {
  background: var(--ember);
}

.division-toggle,
.pricing-division-badge,
.input-unit {
  border-radius: 999px;
}

.pricing-row {
  border-color: var(--line);
}

.pricing-row.bundle-row {
  margin: 10px 10px 6px;
  border-color: rgba(255, 93, 5, 0.22);
  border-radius: 8px;
  background: #fff3ea;
}

.pricing-summary,
.lever-detail {
  border-radius: 8px;
}

.summary-stat-list {
  margin-top: 4px;
}

.summary-stat {
  border-bottom-color: var(--line);
}

.pricing-bar-row {
  border-top-color: var(--line);
}

.bar-track {
  background: #f0ede9;
}

.bar-fill {
  background: var(--ember);
}

.lever-banner {
  height: 70px;
  opacity: 0.62;
  filter: saturate(0.8);
}

.lever-card {
  overflow: hidden;
}

.lever-card.selected {
  border-color: rgba(255, 93, 5, 0.34);
}

[data-panel="benefits"] .benefits-layout > .lever-detail {
  border-radius: 8px;
  box-shadow: var(--shadow-lifted);
}

.input-shell,
.lever-input-row input,
.division-name-row input {
  border-radius: 7px;
}

.settings-row,
.settings-group .settings-row {
  border-bottom-color: var(--line);
}

.settings-source.source-client-provided,
.settings-source.source-call-transcript {
  background: #ede9e4;
}

.settings-source.source-simple-assumption {
  background: #f6f3ef;
}

/* Monarch cleanup responsive guardrails: remove the old fixed desktop floor. */
@media (max-width: 1180px) {
  body {
    min-width: 0;
  }

  .page-shell {
    width: min(1450px, calc(100% - 32px));
    margin-inline: auto;
  }

  .metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  }

  .split-layout,
  .split-layout.wide-left,
  .split-layout.wide-left.benefits-layout,
  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-row {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 170px) minmax(72px, 96px);
  }
}

@media (max-width: 860px) {
  .top-bar {
    padding-inline: 14px;
  }

  .app-frame {
    grid-template-columns: 184px minmax(0, 1fr);
  }

  .side-nav {
    padding-inline: 10px;
  }

  .side-nav .tab-button {
    padding-inline: 10px;
  }

  .page-hero h1,
  [data-panel="overview"] .page-hero h1 {
    font-size: 34px;
  }

  .hero-lede,
  [data-panel="overview"] .hero-lede {
    font-size: 14px;
  }

  .metric-card {
    min-height: 122px;
  }

  .metric-card strong {
    font-size: 31px;
  }

  .metric-card--headline strong {
    font-size: 40px;
  }
}

/* Products QA pass (2026-06-12): restore visible active division choices. */
[data-panel="products"] .product-card.selected {
  border: 1px solid rgba(255, 93, 5, 0.24);
  background: #fffefe;
  box-shadow: var(--shadow);
}

[data-panel="products"] .product-card.selected::before {
  content: none;
  display: none;
}

[data-panel="products"] .product-card.selected > * {
  position: relative;
  z-index: 1;
}

.product-card .division-toggle-list {
  gap: 8px;
  margin-top: 14px;
  border-top: 0;
}

.product-card .division-toggle {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf8;
  padding: 9px 10px;
  color: #55504a;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.product-card .division-toggle:hover {
  border-color: #ded6cf;
  background: #fffefe;
}

.product-card .division-toggle.active {
  border-color: rgba(255, 93, 5, 0.28);
  background: #fff3ea;
  color: #25211f;
  box-shadow: inset 0 0 0 1px rgba(255, 93, 5, 0.08);
}

.product-card .division-toggle.active .division-marker,
.product-card .division-toggle.active i {
  background: var(--ember);
}

.product-card .division-toggle.pending {
  border: 1px dashed var(--line-strong);
  background: #f6f3ef;
}

.product-card .division-toggle.pending em {
  border-radius: 999px;
  background: #ebe6e0;
  padding: 3px 7px;
}

/* ===== v3 refresh: floor-forward phase ROI ladder ===== */
.phase-ladder {
  margin: 6px 0 22px;
}

.phase-ladder-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.phase-ladder-head strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink, #25282c);
}

.phase-ladder-head .hint {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}

.phase-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.phase-step {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line, #ece8e1);
  border-radius: 14px;
  background: #fefefd;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03);
}

.phase-step.positive {
  border-color: #d6e7cd;
  background: linear-gradient(180deg, #fbfdfa, #fefefd);
}

.phase-index {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ff5d05, #ff8a4a);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.phase-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.phase-step-body > strong {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink, #25282c);
}

.phase-unlock {
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--muted);
}

.phase-roi {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 3px;
}

.phase-roi-floor,
.phase-roi-full {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  letter-spacing: -0.02em;
}

.phase-roi-floor {
  font-size: 19px;
  font-weight: 800;
  color: #1f7a3d;
}

.phase-roi-full {
  font-size: 13px;
  font-weight: 700;
  color: #9aa0a6;
}

.phase-roi-floor em,
.phase-roi-full em {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.phase-econ {
  font-size: 10px;
  font-weight: 600;
  color: #9aa0a6;
}

@media (max-width: 900px) {
  .phase-steps {
    grid-template-columns: 1fr 1fr;
  }
}

/* Soft (sub-1x) hard-dollar floor — e.g. the insights phase, which pays back on
   full ROI but not yet on labor alone. Amber, not green, to stay honest. */
.phase-roi-floor.soft {
  color: #b9772a;
}

.phase-step.watch {
  border-color: #efe4d0;
  background: linear-gradient(180deg, #fdfbf6, #fefefd);
}

/* Phase-organized rollout planner: one row per client-agreed phase. */
.phase-rail-row .phase-products {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}

.phase-rail-row .phase-products.muted {
  font-weight: 500;
  font-style: italic;
}

.phase-rail-row.inactive {
  opacity: 0.62;
}

/* ===== v3 refresh: value attribution (hard-dollar vs insights) ===== */
.value-attribution { margin: 8px 0 22px; }
.attr-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.attr-head > strong { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink, #25282c); }
.attr-head .hint { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.attr-bucket { border: 1px solid var(--line, #ece8e1); border-radius: 14px; padding: 14px 16px; background: #fefefd; }
.attr-bucket.attr-hard { border-color: #d6e7cd; background: linear-gradient(180deg, #fbfdfa, #fefefd); }
.attr-bucket.attr-insights { border-color: #efe4d0; background: linear-gradient(180deg, #fdfbf6, #fefefd); }
.attr-bucket > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 10px; margin-bottom: 9px; border-bottom: 1px solid var(--line, #efe9e1); }
.attr-bucket > header strong { display: block; font-size: 13px; font-weight: 800; color: var(--ink, #25282c); }
.attr-bucket > header small { font-size: 10.5px; color: var(--muted); }
.attr-subtotal { text-align: right; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.attr-hard .attr-subtotal { color: #1f7a3d; }
.attr-insights .attr-subtotal { color: #b9772a; }
.attr-subtotal em { display: block; font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.attr-rows { display: flex; flex-direction: column; gap: 7px; }
.attr-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.attr-row-main { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.attr-row-main > strong { font-size: 12px; font-weight: 700; color: var(--ink, #25282c); }
.attr-phase { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: rgba(20,20,20,0.04); border-radius: 5px; padding: 2px 6px; }
.attr-flag { font-size: 9.5px; font-weight: 700; color: #b9772a; background: #fbf0df; border-radius: 5px; padding: 2px 6px; }
.attr-value { font-size: 13px; font-weight: 800; color: var(--ink, #25282c); white-space: nowrap; }

/* ===== v3 refresh: pricing monthly + cost-by-phase ===== */
.price-monthly { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.phase-cost-list { margin-top: 16px; border-top: 1px solid var(--line, #efe9e1); padding-top: 12px; }
.phase-cost-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.phase-cost-cols { display: flex; gap: 12px; }
.phase-cost-cols em { font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); width: 56px; text-align: right; }
.phase-cost-row { display: grid; grid-template-columns: 1fr 56px 56px; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }
.phase-cost-name { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink, #25282c); }
.phase-cost-index { flex: none; width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, #ff5d05, #ff8a4a); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.phase-cost-step { text-align: right; font-weight: 600; color: var(--muted); }
.phase-cost-cum { text-align: right; font-weight: 800; color: var(--ink, #25282c); }
.pricing-basis-list { margin-top: 14px; border-top: 1px solid var(--line, #efe9e1); padding-top: 12px; }
.pricing-basis-list p { margin: 7px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.pricing-basis-list strong { color: var(--ink, #25282c); font-weight: 800; }

@media (max-width: 900px) {
  .attr-grid { grid-template-columns: 1fr; }
}

/* ===== v3 refresh: ladder cumulative ROI + phase delta ===== */
.phase-roi { align-items: center; gap: 8px; }
.phase-roi-main { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink, #25282c); }
.phase-roi-delta { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; line-height: 1; white-space: nowrap; }
.phase-roi-delta.up { color: #1f7a3d; background: #e8f3e3; }
.phase-roi-delta.down { color: #b9772a; background: #fbf0df; }
.phase-roi-delta.base { color: var(--muted); background: rgba(20, 20, 20, 0.04); font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 0.04em; }

/* ===== v3 refresh: KPI-by-phase matrix ===== */
.phase-matrix-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.phase-matrix-head strong { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink, #25282c); }
.phase-matrix-head .hint { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.phase-matrix-scroll { overflow-x: auto; border: 1px solid var(--line, #ece8e1); border-radius: 14px; background: #fefefd; }
.phase-matrix { width: 100%; border-collapse: collapse; min-width: 580px; }
.phase-matrix th, .phase-matrix td { padding: 11px 14px; border-bottom: 1px solid var(--line, #f0ebe3); }
.phase-matrix tbody tr:last-child th, .phase-matrix tbody tr:last-child td { border-bottom: none; }
.phase-matrix thead th { vertical-align: top; text-align: center; }
.phase-matrix .pm-index { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #ff5d05, #ff8a4a); color: #fff; font-size: 11px; font-weight: 800; margin-bottom: 5px; }
.phase-matrix .pm-name { display: block; font-size: 11.5px; font-weight: 800; color: var(--ink, #25282c); line-height: 1.2; }
.phase-matrix thead th small { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 600; color: var(--muted); }
.phase-matrix tbody th { text-align: left; font-size: 12.5px; font-weight: 700; color: #3a4046; white-space: nowrap; }
.phase-matrix tbody td { text-align: center; font-size: 14px; font-weight: 700; color: var(--ink, #25282c); }
.phase-matrix td.pm-roi { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.phase-matrix td.pm-floor { color: #1f7a3d; font-weight: 800; }
.phase-matrix td.pm-added { color: #1f7a3d; font-weight: 700; font-size: 13px; }

/* Benefits page: group levers into hard-dollar vs insights with subtotals. */
.lever-group-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 2px 8px; border-bottom: 1px solid var(--line, #ece8e1); margin-top: 6px; }
.lever-group-head:first-child { margin-top: 0; }
.lever-group-head > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lever-group-head strong { font-size: 13px; font-weight: 800; color: var(--ink, #25282c); }
.lever-group-head small { font-size: 10.5px; color: var(--muted); }
.lever-group-subtotal { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.lever-group-head--hard .lever-group-subtotal { color: #1f7a3d; }
.lever-group-head--insights .lever-group-subtotal { color: #b9772a; }

/* ===== Legacy land-and-expand dashboard experiment ===== */
.codex-view-header .hint {
  align-self: center;
}

.codex-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 28px;
}

.codex-kicker {
  display: inline-flex;
  color: var(--ember-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.codex-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 318px;
  gap: 18px;
  align-items: stretch;
  border: 1px solid #e3ddd5;
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(255, 93, 5, 0.08), rgba(255, 255, 255, 0) 38%),
    #fefefd;
  padding: 22px;
  box-shadow: var(--shadow);
}

.codex-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  min-width: 0;
}

.codex-hero-copy h3,
.codex-thesis h3,
.codex-proof-panel h3,
.codex-phase-ladder h3 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: 0;
}

.codex-hero-copy p,
.codex-thesis p,
.codex-proof-grid p,
.codex-phase-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.codex-hero-copy p {
  max-width: 760px;
  font-size: 14px;
}

.codex-hero-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  padding: 20px;
  min-height: 174px;
}

.codex-hero-panel span,
.codex-hero-panel small,
.codex-stat-strip span,
.codex-stat-strip small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.codex-hero-panel span {
  color: rgba(255, 255, 255, 0.62);
}

.codex-hero-panel strong {
  margin-top: 10px;
  color: var(--ember);
  font-size: 58px;
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.codex-hero-panel small {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
  text-transform: none;
}

.codex-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.codex-stat-strip article,
.codex-thesis,
.codex-proof-panel,
.codex-phase-ladder {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fefefd;
  box-shadow: var(--shadow);
}

.codex-stat-strip article {
  min-height: 116px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.codex-stat-strip span {
  color: var(--muted);
}

.codex-stat-strip strong {
  margin-top: auto;
  color: var(--text);
  font-size: 32px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.codex-stat-strip small {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.25;
  text-transform: none;
}

.codex-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.codex-thesis {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 236px;
}

.codex-thesis header,
.codex-proof-panel header,
.codex-phase-ladder header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.codex-thesis header {
  flex-direction: column;
  gap: 6px;
}

.codex-thesis-main {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

.codex-thesis-main strong {
  color: var(--ember-ink);
  font-size: 42px;
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.codex-thesis-main span {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.codex-thesis-dark {
  background: #1f2327;
  border-color: #1f2327;
}

.codex-thesis-dark h3,
.codex-thesis-dark .codex-thesis-main span {
  color: #fff;
}

.codex-thesis-dark p {
  color: rgba(255, 255, 255, 0.7);
}

.codex-thesis-dark .codex-thesis-main {
  border-color: rgba(255, 255, 255, 0.14);
}

.codex-thesis-dark .codex-thesis-main strong {
  color: var(--ember);
}

.codex-proof-panel,
.codex-phase-ladder {
  padding: 18px;
}

.codex-proof-panel header,
.codex-phase-ladder header {
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.codex-proof-panel header > div,
.codex-phase-ladder header > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.codex-proof-panel header > strong,
.codex-phase-ladder header > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.codex-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.codex-proof-grid article {
  min-height: 146px;
  border-left: 3px solid var(--ember);
  background: var(--surface-container);
  border-radius: 6px;
  padding: 14px;
}

.codex-proof-grid strong {
  display: block;
  margin-bottom: 9px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.codex-phase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.codex-phase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 286px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fefefd;
  padding: 14px;
  overflow: hidden;
}

.codex-phase-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--ember);
}

.codex-phase-card.watch::before {
  background: #b9772a;
}

.codex-phase-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
}

.codex-phase-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 13px;
  min-height: 64px;
}

.codex-phase-copy strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.15;
}

.codex-phase-copy small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.3;
}

.codex-phase-metrics {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin: 12px 0;
}

.codex-phase-metrics span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.codex-phase-metrics b {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.codex-phase-card p {
  margin-bottom: 12px;
}

.codex-phase-card em {
  margin-top: auto;
  color: var(--ember-ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

@media (max-width: 1180px) {
  .codex-hero,
  .codex-split,
  .codex-stat-strip,
  .codex-proof-grid,
  .codex-phase-grid {
    grid-template-columns: 1fr;
  }

  .codex-thesis-main {
    grid-template-columns: 1fr;
  }
}

/* ===== Legacy presentation story concept ===== */
.claude-dashboard { display: flex; flex-direction: column; gap: 18px; }
.claude-section-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.claude-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ember-ink);
  margin-bottom: 8px;
}

.claude-hero {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.claude-hero-copy { max-width: 58%; }
.claude-hero-copy h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.18;
}
.claude-hero-copy p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.claude-hero-panel {
  flex: 0 0 232px;
  background: var(--ember-tint);
  border: 1px solid var(--ember-tint-line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.claude-hero-panel span {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ember-ink);
}
.claude-hero-panel strong {
  display: block;
  font-size: 40px;
  font-weight: 800;
  color: var(--ember);
  line-height: 1.05;
  margin: 4px 0 6px;
}
.claude-hero-panel small { font-size: 12.5px; color: var(--text); line-height: 1.4; }

.claude-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.claude-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.claude-chip-ic { width: 20px; height: 20px; color: var(--muted); margin-bottom: 6px; display: block; }
.claude-chip strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.claude-chip small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

.claude-path {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.claude-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 4px; }
.claude-step {
  position: relative;
  background: var(--surface-low);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.claude-step.is-land {
  background: var(--ember-tint);
  border: 2px solid var(--ember);
  padding: 11px 13px;
}
.claude-step-role {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.claude-step.is-land .claude-step-role { color: var(--ember-ink); }
.claude-step strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); margin-top: 3px; }
.claude-step small { font-size: 12px; color: var(--muted); }
.claude-step .claude-tag.solid { position: absolute; top: 11px; right: 12px; }

.claude-chart { display: block; margin-top: 4px; }

.claude-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.claude-legend i.sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.claude-legend i.sw.solid { background: var(--ember); }
.claude-legend i.sw.hatch { background: var(--ember); opacity: 0.32; border: 1px solid var(--ember); }
.claude-legend i.sw.cost { background: var(--cost); }
.claude-caption { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.claude-land {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow);
}
.claude-land-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.claude-land-head svg { width: 20px; height: 20px; color: var(--ember); }
.claude-land-head strong { font-size: 16px; font-weight: 800; color: var(--text); }
.claude-land-rows { display: flex; flex-direction: column; }
.claude-land-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.claude-land-row.last { border-bottom: 0; }
.claude-land-row b { color: var(--text); font-size: 14.5px; font-weight: 800; }
.claude-land-val { display: flex; align-items: center; gap: 10px; }
.claude-land p { margin: 12px 0 0; font-size: 13px; color: var(--text); line-height: 1.55; }

.claude-tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.claude-tag.solid { background: var(--ember); color: #fff; }
.claude-tag.tint { background: var(--ember-tint); color: var(--ember-ink); }

.claude-destination { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); padding: 0 2px; }
.claude-destination svg { width: 17px; height: 17px; color: var(--ember-ink); }
.claude-destination b { color: var(--text); font-weight: 800; }

@media (max-width: 1180px) {
  .claude-hero { flex-direction: column; align-items: stretch; }
  .claude-hero-copy { max-width: 100%; }
  .claude-chips, .claude-steps { grid-template-columns: 1fr; }
}

/* ===== Legacy long-form presentation page ===== */
.claude-dashboard { gap: 28px; }

.cl-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow); }
.cl-hero-title { margin: 6px 0 8px; font-size: 30px; line-height: 1.12; font-weight: 800; color: var(--text); max-width: 760px; }
.cl-hero-lede { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 720px; }
.cl-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cl-pillar { background: var(--ember-tint); border: 1px solid var(--ember-tint-line); border-radius: var(--radius); padding: 16px; }
.cl-pillar-ic svg { width: 22px; height: 22px; color: var(--ember-ink); }
.cl-pillar strong { display: block; margin: 8px 0 4px; font-size: 15px; font-weight: 800; color: var(--text); }
.cl-pillar small { font-size: 12.5px; line-height: 1.45; color: var(--purple-2); }

.cl-section-head { margin-bottom: 16px; }
.cl-section-head h3 { margin: 4px 0 0; font-size: 22px; font-weight: 800; color: var(--text); }
.cl-section-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); max-width: 700px; line-height: 1.5; }

.cl-pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cl-pain { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.cl-pain-ic svg { width: 22px; height: 22px; color: var(--muted); }
.cl-pain-area { display: inline-block; margin: 8px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ember-ink); }
.cl-pain strong { display: block; font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.cl-pain p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

.cl-map { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cl-map-row { display: grid; grid-template-columns: 1fr 26px 1.4fr; align-items: center; gap: 14px; background: var(--surface); padding: 14px 18px; }
.cl-map-gap { font-size: 13.5px; font-weight: 700; color: var(--text); }
.cl-map-arrow svg { width: 18px; height: 18px; color: var(--ember); }
.cl-map-fix { font-size: 13px; color: var(--muted); line-height: 1.45; }
.cl-phase-pill { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 20px; background: var(--ember-tint); color: var(--ember-ink); white-space: nowrap; }

.cl-hyps { margin-top: 16px; }
.cl-hyps-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.cl-hyp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cl-hyp { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 14px; background: var(--surface-low); }
.cl-hyp strong { display: block; font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.cl-hyp p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

.cl-phase1 { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ember); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); }
.cl-phase-num { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--ember); padding: 3px 12px; border-radius: 20px; }
.cl-phase1-head h3 { margin: 10px 0 6px; font-size: 24px; font-weight: 800; color: var(--text); }
.cl-phase1-head p { margin: 0 0 20px; font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 760px; }
.cl-phase1-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cl-card { background: var(--surface-low); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.cl-card-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.cl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.cl-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.cl-tile span { display: block; font-size: 11.5px; color: var(--muted); }
.cl-tile b { display: block; font-size: 23px; font-weight: 800; color: var(--text); line-height: 1.1; margin: 3px 0; }
.cl-tile.accent b { color: var(--ember); }
.cl-tile small { font-size: 11px; color: var(--muted); }
.cl-levers { display: flex; flex-direction: column; gap: 12px; }
.cl-lever-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 5px; }
.cl-lever-top span { color: var(--muted); }
.cl-lever-top b { color: var(--text); font-weight: 800; }
.cl-lever-track { height: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.cl-lever-fill { display: block; height: 100%; border-radius: 6px; }
.cl-lever-fill.hard { background: var(--ember); }
.cl-lever-fill.insight { background: repeating-linear-gradient(45deg, var(--ember) 0 2px, var(--ember-tint) 2px 7px); }
.cl-lever small { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); }

.cl-ops { display: flex; flex-direction: column; margin-bottom: 18px; }
.cl-ops-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cl-ops-row:last-child { border-bottom: 0; }
.cl-ops-l { font-size: 13px; color: var(--text); font-weight: 700; }
.cl-ops-ba { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.cl-ops-ba em { color: var(--muted); font-style: normal; text-decoration: line-through; }
.cl-arrow { color: var(--ember); font-style: normal; }
.cl-ops-ba b { color: var(--ember-ink); font-weight: 800; }
.cl-products { display: flex; flex-direction: column; gap: 12px; }
.cl-product { display: flex; align-items: flex-start; gap: 10px; }
.cl-product-ic { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--ember-tint); display: flex; align-items: center; justify-content: center; }
.cl-product-ic svg { width: 18px; height: 18px; color: var(--ember-ink); }
.cl-product strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); }
.cl-product small { font-size: 12px; color: var(--muted); }

.cl-callout { margin: 18px 0 0; padding: 14px 16px; background: var(--ember-tint); border: 1px solid var(--ember-tint-line); border-radius: var(--radius); font-size: 13.5px; line-height: 1.55; color: var(--text); }
.cl-callout b { color: var(--ember-ink); font-weight: 800; }

.cl-phase-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.cl-pb { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.cl-pb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cl-pb-head strong { font-size: 15.5px; font-weight: 800; color: var(--text); }
.cl-pb p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cl-pb-metrics { display: flex; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.cl-pb-metrics b { display: block; font-size: 20px; font-weight: 800; color: var(--ember); line-height: 1.1; }
.cl-pb-metrics span { font-size: 11px; color: var(--muted); }
.cl-pb-solves { font-size: 12px; color: var(--text); font-weight: 700; }

.cl-lever-board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); }

.cl-close { background: var(--navy); border-radius: var(--radius); padding: 24px 28px; }
.cl-close-pills { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.cl-close-pills span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #fff; }
.cl-close-pills svg { width: 16px; height: 16px; color: var(--ember); flex: none; }
.cl-close-line { margin: 0; font-size: 14px; line-height: 1.6; color: #d7d4d0; }
.cl-close-line b { color: #fff; font-weight: 800; }

@media (max-width: 1180px) {
  .cl-pillars, .cl-pain-grid, .cl-hyp-grid, .cl-phase1-grid, .cl-phase-blocks, .cl-lever-board { grid-template-columns: 1fr; }
  .cl-map-row { grid-template-columns: 1fr; }
  .cl-map-arrow { display: none; }
}

/* ===== Presentation deck (forced 16:9 slides, scroll-snap, print) ===== */
[data-panel="presentation"] .view-header { display: none; }

.claude-dashboard {
  --deck-h: calc(100vh - 126px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  height: var(--deck-h);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.cl-slide {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: min(100%, calc((var(--deck-h) - 28px) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 14px auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lifted);
  padding: 28px 40px 44px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.cl-slide.is-phase1 { border-left: 4px solid var(--ember); }
.cl-slide-dark { background: var(--navy); border-color: var(--navy); }
.cl-slide-inner { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cl-slide-title .cl-slide-inner, .cl-slide-dark .cl-slide-inner { justify-content: center; }
.cl-slide-foot {
  position: absolute; left: 40px; right: 40px; bottom: 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 8px;
}
.cl-slide-dark .cl-slide-foot { color: rgba(255, 255, 255, 0.5); border-top-color: rgba(255, 255, 255, 0.16); }

.cl-slide .cl-section-head { margin-bottom: 14px; }
.cl-slide .cl-pillars, .cl-slide .cl-pain-grid, .cl-slide .cl-hyp-grid, .cl-slide .cl-phase-blocks, .cl-slide .cl-lever-board, .cl-slide .cl-map { flex: 1 1 auto; align-content: center; }
.cl-slide .cl-pain { padding: 14px 16px; }
.cl-slide-title .cl-hero-title { font-size: 34px; max-width: none; margin-bottom: 12px; }
.cl-slide-title .cl-hero-lede { font-size: 15px; margin-bottom: 22px; }
.cl-slide .claude-chart { width: 78%; margin: 4px auto 0; }
.cl-slide .claude-steps { width: 78%; margin: 0 auto; }
.cl-slide .cl-phase1-head { margin-bottom: 12px; }
.cl-slide .cl-phase1-head h3 { margin: 8px 0 4px; }
.cl-slide .cl-phase1-head p { margin: 0; }
.cl-slide .cl-phase1-grid { flex: 1 1 auto; align-items: stretch; }
.cl-slide .cl-tile b { font-size: 21px; }
.cl-slide .cl-callout { margin: 12px 0 0; }
/* Phase 1 is the densest slide — compact it to fit the 16:9 box */
.cl-slide.is-phase1 .cl-phase1-head p { font-size: 13px; line-height: 1.4; }
.cl-slide.is-phase1 .cl-card { padding: 13px 15px; }
.cl-slide.is-phase1 .cl-card-label { margin-bottom: 8px; }
.cl-slide.is-phase1 .cl-tiles { gap: 8px; margin-bottom: 12px; }
.cl-slide.is-phase1 .cl-tile { padding: 9px 11px; }
.cl-slide.is-phase1 .cl-tile b { font-size: 19px; margin: 2px 0; }
.cl-slide.is-phase1 .cl-levers { gap: 9px; }
.cl-slide.is-phase1 .cl-ops-row { padding: 6px 0; }
.cl-slide.is-phase1 .cl-products { gap: 9px; }
.cl-slide.is-phase1 .cl-product-ic { width: 30px; height: 30px; }
.cl-slide.is-phase1 .cl-callout { margin-top: 10px; padding: 10px 14px; font-size: 12.5px; }
.cl-close-inner { width: 100%; }
.cl-close-title { margin: 0 0 16px; font-size: 27px; font-weight: 800; color: #fff; }

@font-face {
  font-family: "Deck Archivo";
  src: url("assets/deck-fonts/archivo-latin.woff2") format("woff2");
  font-weight: 500 900;
}

@font-face {
  font-family: "Deck Hanken";
  src: url("assets/deck-fonts/hanken-latin.woff2") format("woff2");
  font-weight: 400 900;
}

/* Presentation v2 — styled from the Simple B2B sales deck */
[data-panel="presentation"] {
  background: #20242d;
}

.claude-dashboard {
  --cl-orange: #ff5b04;
  --cl-orange-soft: #ff8a4b;
  --cl-ink: #090d18;
  --cl-paper: #faf7f2;
  --cl-muted: #5f6878;
  --cl-line: rgba(10, 14, 26, 0.12);
  --cl-display: "Deck Archivo", var(--font-sans);
  --cl-body: "Deck Hanken", var(--font-sans);
  background: #20242d;
  padding: 16px 0;
}

.cl-slide {
  background:
    linear-gradient(135deg, rgba(255, 91, 4, 0.06), transparent 36%),
    linear-gradient(180deg, #fff 0%, var(--cl-paper) 100%);
  border: 0;
  border-radius: 4px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
  color: var(--cl-ink);
  font-family: var(--cl-body);
  padding: 46px 70px 62px;
}

.cl-slide::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: var(--cl-orange);
  opacity: 0.95;
}

.cl-slide-dark {
  background: linear-gradient(135deg, #070a13 0%, #090d18 58%, #111827 100%);
  border-color: transparent;
  color: #fff;
}

.cl-slide-cover::after {
  content: "";
  position: absolute;
  right: 70px;
  top: 54px;
  width: 180px;
  height: 10px;
  background: var(--cl-orange);
  opacity: 0.92;
}

.cl-slide-inner {
  position: relative;
  z-index: 1;
}

.cl-slide h2,
.cl-slide h3,
.cl-slide strong,
.cl-slide b,
.cl-slide .claude-kicker {
  font-family: var(--cl-display);
  letter-spacing: 0;
}

.cl-slide .claude-kicker {
  display: block;
  color: var(--cl-orange);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.cl-slide-dark .claude-kicker {
  color: rgba(255, 255, 255, 0.72);
}

.cl-slide .cl-section-head {
  margin: 0 0 26px;
  max-width: 860px;
}

.cl-slide .cl-section-head h3 {
  margin: 0;
  color: var(--cl-ink);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 850;
  line-height: 1.02;
}

.cl-slide-dark .cl-section-head h3,
.cl-slide-dark .cl-hero-title,
.cl-slide-dark .cl-close-title {
  color: #fff;
}

.cl-slide .cl-section-sub,
.cl-slide .cl-hero-lede {
  color: var(--cl-muted);
  font-size: 17px;
  line-height: 1.38;
  max-width: 740px;
}

.cl-slide-dark .cl-section-sub,
.cl-slide-dark .cl-hero-lede {
  color: rgba(255, 255, 255, 0.74);
}

.cl-slide-title .cl-hero-title {
  max-width: 820px;
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(46px, 5.2vw, 68px);
  font-weight: 880;
  line-height: 0.99;
}

.cl-cover-lockup {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--cl-display);
  font-size: 15px;
  font-weight: 820;
  text-transform: uppercase;
}

.cl-cover-copy {
  margin-top: auto;
  margin-bottom: 34px;
  max-width: 880px;
}

.cl-cover-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cl-cover-stats article,
.cl-decision-card,
.cl-pain-stat,
.cl-layer,
.cl-roadmap-step,
.cl-rule,
.cl-validation {
  border: 1px solid var(--cl-line);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 44px rgba(14, 18, 29, 0.055);
}

.cl-cover-stats article {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  padding: 16px 18px;
}

.cl-cover-stats span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 780;
  text-transform: uppercase;
}

.cl-cover-stats b {
  margin-top: 6px;
  color: #fff;
  font-size: 31px;
  line-height: 1;
}

.cl-decision-grid,
.cl-pain-stat-grid,
.cl-layer-grid,
.cl-rule-grid,
.cl-validation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cl-layer-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: auto;
}

.cl-rule-grid,
.cl-validation-grid {
  grid-template-columns: repeat(2, 1fr);
}

.cl-decision-card,
.cl-pain-stat,
.cl-layer,
.cl-rule,
.cl-validation {
  padding: 22px 24px;
}

.cl-decision-card {
  min-height: 244px;
  border-top: 4px solid var(--cl-orange);
}

.cl-decision-card span,
.cl-roadmap-step > span {
  display: block;
  color: var(--cl-orange);
  font-family: var(--cl-display);
  font-size: 15px;
  font-weight: 850;
}

.cl-decision-card strong,
.cl-layer strong,
.cl-rule strong,
.cl-validation strong {
  display: block;
  margin-top: 28px;
  color: var(--cl-ink);
  font-size: 24px;
  line-height: 1.04;
}

.cl-decision-card p,
.cl-pain-stat p,
.cl-layer p,
.cl-rule p,
.cl-validation p,
.cl-roadmap-step p {
  margin: 14px 0 0;
  color: var(--cl-muted);
  font-size: 15px;
  line-height: 1.36;
}

.cl-pain-stat {
  min-height: 220px;
  background: #fff;
}

.cl-pain-stat span {
  display: block;
  color: var(--cl-muted);
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
}

.cl-pain-stat b {
  display: block;
  margin-top: 20px;
  color: var(--cl-orange);
  font-size: 34px;
  line-height: 0.98;
}

.cl-evidence-note {
  margin: auto 0 0;
  color: var(--cl-muted);
  font-size: 13px;
  line-height: 1.4;
}

.cl-layer {
  min-height: 292px;
  background: #fff;
  padding-top: 28px;
}

.cl-layer-ic {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--cl-orange);
}

.cl-layer-ic svg {
  width: 30px;
  height: 30px;
}

.cl-roadmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--cl-line);
  background: var(--cl-line);
}

.cl-roadmap-step {
  min-height: 324px;
  display: flex;
  flex-direction: column;
  border: 0;
  box-shadow: none;
  background: #fff;
  padding: 22px;
}

.cl-roadmap-step + .cl-roadmap-step {
  border-left: 1px solid var(--cl-line);
}

.cl-roadmap-step strong {
  margin-top: 28px;
  color: var(--cl-ink);
  font-size: 25px;
  line-height: 1.03;
}

.cl-roadmap-step div {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--cl-line);
}

.cl-roadmap-step div b {
  display: block;
  color: var(--cl-orange);
  font-size: 31px;
  line-height: 1;
}

.cl-roadmap-step div small {
  color: var(--cl-muted);
  font-size: 12px;
  text-transform: uppercase;
}

.cl-slide.is-phase1 {
  border-left: 0;
}

.cl-slide.is-phase1::before {
  width: 12px;
}

.cl-slide .cl-phase1-head {
  margin-bottom: 20px;
}

.cl-slide .cl-phase1-head h3 {
  margin: 12px 0 8px;
  color: var(--cl-ink);
  font-family: var(--cl-display);
  font-size: 42px;
  font-weight: 850;
  line-height: 1.02;
}

.cl-slide .cl-phase1-head p {
  max-width: 760px;
  color: var(--cl-muted);
  font-size: 16px;
  line-height: 1.38;
}

.cl-phase-num {
  border-radius: 0;
  background: var(--cl-orange);
  font-family: var(--cl-display);
  letter-spacing: 0.02em;
}

.cl-card,
.cl-tile {
  border-radius: 0;
  background: #fff;
}

.cl-card {
  border: 1px solid var(--cl-line);
  box-shadow: 0 18px 44px rgba(14, 18, 29, 0.055);
}

.cl-tile b {
  font-family: var(--cl-display);
  color: var(--cl-ink);
}

.cl-tile.accent b,
.cl-lever-top b,
.cl-pb-metrics b {
  color: var(--cl-orange);
}

.cl-product-ic {
  border-radius: 0;
  background: #fff4ed;
}

.cl-callout {
  border-radius: 0;
  background: #fff1e8;
}

.cl-rule,
.cl-validation {
  min-height: 168px;
  background: #fff;
}

.cl-rule strong,
.cl-validation strong {
  margin-top: 0;
}

.cl-slide .claude-steps {
  width: 90%;
  margin: 0 auto 6px;
}

.claude-step {
  border-radius: 0;
  background: #fff;
}

.claude-step strong {
  color: var(--cl-ink);
}

.cl-slide .claude-chart {
  width: 88%;
  margin: 0 auto;
}

.cl-lever-board {
  border-radius: 0;
  box-shadow: 0 18px 44px rgba(14, 18, 29, 0.055);
}

.cl-slide-foot {
  z-index: 2;
  left: 70px;
  right: 70px;
  bottom: 22px;
  color: rgba(10, 14, 26, 0.38);
  font-family: var(--cl-display);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.cl-slide-dark .cl-slide-foot {
  color: rgba(255, 255, 255, 0.42);
}

.cl-close-title {
  max-width: 900px;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 0.98;
}

.cl-close-pills {
  gap: 14px;
  margin: 24px 0 18px;
}

.cl-close-pills span {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  font-family: var(--cl-display);
}

.cl-close-line {
  max-width: 1000px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
  line-height: 1.45;
}

/* Presentation v3 — simple ROI-app-native phase 1 pitch */
[data-panel="presentation"] {
  background: var(--bg);
}

.claude-dashboard {
  background: var(--bg);
  gap: 18px;
  padding: 22px;
}

.cl-simple-slide {
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-lifted);
  color: var(--text);
  font-family: var(--font-sans);
  padding: 34px 42px 42px;
}

.cl-simple-slide::before {
  content: none;
}

.cl-simple-slide .cl-slide-inner {
  gap: 16px;
  justify-content: flex-start;
  overflow: hidden;
}

.cl-simple-slide h2,
.cl-simple-slide h3,
.cl-simple-slide strong,
.cl-simple-slide b,
.cl-simple-slide .cl-simple-kicker {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.cl-simple-slide h2,
.cl-simple-slide h3 {
  max-width: 760px;
  margin: 0;
  color: var(--text);
  font-size: 34px;
  font-weight: 850;
  line-height: 1.06;
}

.cl-simple-slide p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.cl-simple-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--ember-tint);
  color: var(--ember-ink);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.cl-simple-cover .cl-slide-inner {
  justify-content: space-between;
}

.cl-simple-cover-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.cl-simple-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.cl-simple-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.cl-simple-logo img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.cl-simple-x {
  color: var(--muted);
  font-weight: 600;
}

.cl-simple-center {
  max-width: 900px;
}

.cl-simple-center h2 {
  margin-bottom: 12px;
  font-size: 42px;
}

.cl-simple-center p {
  max-width: 680px;
  font-size: 17px;
}

.cl-simple-stats,
.cl-simple-card-grid,
.cl-simple-metric-grid,
.cl-simple-product-grid,
.cl-simple-ask {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cl-simple-stats article,
.cl-simple-card,
.cl-simple-metric,
.cl-simple-product,
.cl-simple-ask article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.cl-simple-stats article {
  padding: 14px 16px;
}

.cl-simple-stats span,
.cl-simple-metric span,
.cl-simple-bar-row span,
.cl-simple-ask span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
  text-transform: uppercase;
}

.cl-simple-stats b {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 26px;
  font-weight: 850;
  line-height: 1;
}

.cl-simple-card,
.cl-simple-metric,
.cl-simple-product {
  min-height: 190px;
  padding: 24px;
}

.cl-simple-card strong,
.cl-simple-product strong {
  display: block;
  color: var(--text);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.12;
}

.cl-simple-card p,
.cl-simple-product p {
  margin-top: 14px;
  font-size: 16px;
}

.cl-simple-metric {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cl-simple-metric b {
  color: var(--ember);
  font-size: 46px;
  font-weight: 850;
  line-height: 1;
}

.cl-simple-metric p {
  font-size: 16px;
}

.cl-simple-product img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin-bottom: 22px;
}

.cl-heard-board {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cl-heard-head,
.cl-heard-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: 14px;
}

.cl-heard-head {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.cl-heard-head span {
  padding: 10px 14px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.cl-heard-row {
  min-height: 47px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.cl-heard-row:last-child {
  border-bottom: 0;
}

.cl-heard-row strong,
.cl-heard-row p {
  padding: 9px 14px;
}

.cl-heard-row strong {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 850;
  line-height: 1.18;
}

.cl-heard-row p {
  border-left: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.28;
}

.cl-phase-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cl-phase-path article {
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px 14px 14px;
}

.cl-phase-path article.is-phase1-scope {
  border-color: var(--ember-tint-line);
  background: linear-gradient(180deg, var(--ember-tint) 0%, #fff 54%);
}

.cl-phase-path article span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: var(--text);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}

.cl-phase-path article.is-phase1-scope span {
  background: var(--ember);
}

.cl-phase-path article b {
  display: block;
  margin-top: 18px;
  color: var(--text);
  font-size: 19px;
  font-weight: 850;
  line-height: 1.08;
}

.cl-phase-path article p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.34;
}

.cl-phase-path article small {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.cl-phase-path article.is-phase1-scope small {
  background: #fff;
  color: var(--ember-ink);
}

.cl-phase1-dashboard {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 12px;
  align-items: stretch;
}

.cl-phase1-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cl-phase1-kpis article,
.cl-phase1-breakdown,
.cl-expansion-summary article,
.cl-phase-graph {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.cl-phase1-kpis article {
  min-height: 102px;
  padding: 14px;
}

.cl-phase1-kpis article.accent {
  border-color: var(--ember-tint-line);
  background: var(--ember-tint);
}

.cl-phase1-kpis span,
.cl-expansion-summary span,
.cl-graph-metrics span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.cl-phase1-kpis b {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
}

.cl-phase1-kpis article.accent b {
  color: var(--ember);
}

.cl-phase1-kpis p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.28;
}

.cl-phase1-breakdown {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
}

.cl-phase1-breakdown > strong {
  display: block;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 17px;
  font-weight: 850;
}

.cl-expansion-board {
  display: grid;
  grid-template-columns: 0.36fr 0.64fr;
  gap: 12px;
  align-items: stretch;
}

.cl-expansion-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.cl-expansion-summary article {
  display: flex;
  min-height: 73px;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
}

.cl-expansion-summary b {
  display: block;
  margin-top: 6px;
  color: var(--ember);
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
}

.cl-phase-graph {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 4px 0;
  overflow: hidden;
}

.cl-phase-graph article {
  display: grid;
  grid-template-columns: 0.34fr 0.4fr 0.26fr;
  gap: 10px;
  align-items: center;
  min-height: 57px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
}

.cl-phase-graph article:last-child {
  border-bottom: 0;
}

.cl-phase-graph article.is-phase1-scope {
  background: linear-gradient(90deg, rgba(255, 93, 5, 0.09), transparent 62%);
}

.cl-graph-label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}

.cl-graph-label span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 7px;
  background: var(--text);
  color: #fff;
  font-size: 10.5px;
  font-weight: 850;
}

.cl-phase-graph article.is-phase1-scope .cl-graph-label span {
  background: var(--ember);
}

.cl-graph-label b {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1.16;
}

.cl-graph-bars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.cl-graph-bars i {
  display: block;
  height: 9px;
  border-radius: 999px;
}

.cl-graph-bars .benefit {
  background: var(--ember);
}

.cl-graph-bars .cost {
  background: #c8c4bd;
}

.cl-graph-metrics {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
}

.cl-graph-metrics b {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
}

.cl-simple-economics {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 18px;
  align-items: stretch;
}

.cl-simple-equation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--ember-tint-line);
  border-radius: 8px;
  background: var(--ember-tint);
  padding: 28px;
}

.cl-simple-equation b {
  color: var(--ember);
  font-size: 68px;
  font-weight: 900;
  line-height: 1;
}

.cl-simple-equation span {
  margin-top: 10px;
  color: var(--ember-ink);
  font-size: 16px;
  font-weight: 800;
}

.cl-simple-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 24px;
}

.cl-simple-bar-row div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.cl-simple-bar-row b {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.cl-simple-bar-row i {
  display: block;
  height: 9px;
  border-radius: 8px;
  background: var(--ember);
}

.cl-simple-bar-row i.insight {
  background: repeating-linear-gradient(45deg, var(--ember) 0 2px, var(--ember-tint) 2px 7px);
}

.cl-simple-ask {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cl-simple-ask article {
  padding: 24px;
}

.cl-simple-ask b {
  display: block;
  color: var(--ember);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
}

.cl-simple-gates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cl-simple-gates span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
}

.cl-simple-gates svg {
  width: 17px;
  height: 17px;
  color: var(--ember);
}

.cl-simple-gates b {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.cl-simple-gates em {
  grid-column: 2;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

/* Product -> phase chip on the roadmap slide. */
.cl-phase-product {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}
.cl-phase-product .product-icon.small {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--ember-ink);
}
.cl-phase-product .product-icon.small .product-image,
.cl-phase-product .product-icon.small .product-svg {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.cl-phase-product em {
  color: var(--ember-ink);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.15;
}

/* Four summary metrics on the cover (reuses dashboard .metric-card). */
.cl-cover-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cl-phase1-foot {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

/* Embedded dashboard components inside deck slides (phase matrix, line chart,
   value attribution). They keep their own component CSS; these rules only fit
   and center them within the 16:9 slide. */
.cl-embed {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cl-embed .phase-matrix-head,
.cl-embed .attr-head {
  margin-bottom: 10px;
}
.cl-chart-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
}
.cl-chart-wrap .line-chart {
  width: 100%;
}
.cl-embed .attr-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cl-embed-label {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.cl-simple-slide .cl-slide-foot {
  left: 42px;
  right: 42px;
  bottom: 14px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  border-top-color: var(--line);
}

@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { size: 13.333in 7.5in; margin: 0; }
  html, body { background: #fff !important; min-width: 0 !important; }
  .site-header, .side-nav, .side-actions, .view-header, .save-modal { display: none !important; }
  .app-frame { display: block !important; min-height: 0 !important; }
  .app-main, .page-shell { width: 100% !important; margin: 0 !important; min-width: 0 !important; max-width: none !important; }
  .view { display: none !important; }
  .view[data-panel="presentation"].active,
  .view[data-panel="presentation-v2"].active { display: block !important; }
  .claude-dashboard { height: auto !important; overflow: visible !important; display: block !important; }
  .cl-slide {
    width: 13.333in !important; height: 7.5in !important;
    aspect-ratio: auto !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 0.5in 0.7in 0.62in !important;
    break-after: page; page-break-after: always; break-inside: avoid;
  }
  .cl-slide:last-child { break-after: auto; page-break-after: auto; }
  .cl-slide.is-phase1 { border-left: 0.06in solid var(--ember) !important; }
  .cl-slide-foot { bottom: 0.3in; left: 0.7in; right: 0.7in; }
}

/* ===== Presentation v2 - latest Simple deck visual system ===== */
[data-panel="presentation-v2"] {
  background: var(--bg);
}

[data-panel="presentation-v2"] .view-header {
  display: none;
}

.side-nav .tab-button[data-view="presentation-v2"].active,
.side-nav .tab-button[data-view="presentation-v2"].active:hover {
  background: #20160f;
  color: #fff;
  box-shadow: none;
}

.presentation-v2-dashboard {
  --p2-deck-h: calc(100vh - 126px);
  --p2-slide-w: 1000px;
  --p2-slide-h: 562.5px;
  --p2-scale: 1;
  --p2-paper: #f4ede2;
  --p2-paper-soft: #fbf8f2;
  --p2-card: #ebe2d4;
  --p2-card-soft: rgba(255, 255, 255, 0.42);
  --p2-ink: #20160f;
  --p2-muted: #766c62;
  --p2-line: rgba(32, 22, 15, 0.12);
  --p2-blue: #526f77;
  --p2-blue-deep: #314d54;
  --p2-orange: #e77d59;
  --p2-orange-strong: #ff5b04;
  --p2-body: "Deck Hanken", var(--font-sans);
  height: var(--p2-deck-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  padding: 18px 0;
  background: var(--bg);
}

.p2-slide {
  width: var(--p2-slide-w);
  height: var(--p2-slide-h);
  aspect-ratio: auto;
  zoom: var(--p2-scale);
  flex: 0 0 auto;
  scroll-snap-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 14px auto;
  padding: 42px 54px 50px;
  background: linear-gradient(180deg, var(--p2-paper-soft), var(--p2-paper));
  color: var(--p2-ink);
  font-family: var(--p2-body);
  border: 0;
  border-radius: 0;
  box-shadow: 0 10px 28px rgba(28, 24, 19, 0.14);
}

.p2-slide::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--p2-orange);
  opacity: 0.88;
}

.p2-slide-inner {
  position: relative;
  z-index: 1;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.p2-slide h2,
.p2-slide h3 {
  max-width: 920px;
  margin: 0;
  color: var(--p2-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: 0;
}

.p2-slide h3 {
  font-size: 40px;
  line-height: 1.04;
}

.p2-slide p {
  margin: 0;
  color: var(--p2-muted);
  font-size: 17px;
  line-height: 1.34;
  letter-spacing: 0;
}

.p2-slide strong,
.p2-slide b,
.p2-slide small,
.p2-slide span,
.p2-slide em,
.p2-slide li {
  letter-spacing: 0;
}

.p2-slide-head {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}

.p2-kicker,
.p2-wordmark {
  font-family: var(--p2-body);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}

.p2-kicker {
  color: var(--p2-orange-strong);
  font-size: 13px;
  text-transform: uppercase;
}

.p2-wordmark {
  display: inline-flex;
  align-items: center;
  height: 28px;
}

.p2-wordmark-logo {
  display: block;
  width: 120px;
  height: auto;
  object-fit: contain;
}

.p2-slide-foot {
  position: absolute;
  z-index: 2;
  left: 54px;
  right: 54px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--p2-line);
  padding-top: 8px;
  color: rgba(32, 22, 15, 0.42);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.p2-cover {
  padding: 48px 54px 50px;
}

.p2-cover::before {
  width: 0;
}

.p2-cover-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--p2-ink);
  font-size: 15px;
  font-weight: 850;
}

.p2-cover-lockup span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.p2-cover-lockup img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.p2-cover-lockup .p2-cover-simple-logo {
  width: 112px;
  height: auto;
}

.p2-cover-lockup i {
  color: rgba(32, 22, 15, 0.34);
  font-style: normal;
}

.p2-cover-copy {
  max-width: 860px;
  margin-top: auto;
  margin-bottom: 30px;
}

.p2-cover-copy h2 {
  max-width: 820px;
  margin-top: 18px;
  font-size: clamp(52px, 6.6vw, 96px);
  line-height: 0.96;
}

.p2-cover-copy h2 > span {
  display: block;
}

.p2-cover-copy h2 em {
  color: var(--p2-orange-strong);
  font-style: normal;
}

.p2-cover-copy p {
  max-width: 640px;
  margin-top: 24px;
  font-size: 22px;
  line-height: 1.28;
}

.p2-cover-metrics,
.p2-mini-metrics,
.p2-close-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.p2-cover-metrics article,
.p2-mini-metrics article,
.p2-close-stats article {
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--p2-line);
  border-radius: 8px;
  background: var(--p2-card-soft);
  padding: 14px 16px;
}

.p2-cover-metrics span,
.p2-mini-metrics span,
.p2-close-stats span,
.p2-panel-label {
  display: block;
  color: var(--p2-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.p2-cover-metrics b,
.p2-mini-metrics b,
.p2-close-stats b {
  display: block;
  margin-top: 7px;
  color: var(--p2-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
}

.p2-problem-areas,
.p2-lhs-rhs {
  display: grid;
  margin-top: 30px;
}

.p2-problem-areas {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.p2-lhs-rhs {
  grid-template-columns: 1fr;
  border: 1px solid var(--p2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: 0 12px 34px rgba(32, 22, 15, 0.06);
  overflow: hidden;
}

.p2-heard-slide .p2-slide-head {
  margin-bottom: 16px;
}

.p2-heard-slide h3 {
  max-width: 980px;
  font-size: 40px;
}

.p2-heard-slide .p2-lhs-rhs {
  margin-top: 22px;
}

.p2-lhs-rhs-head,
.p2-lhs-rhs-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.p2-lhs-rhs-head {
  background: rgba(244, 237, 226, 0.72);
  border-bottom: 1px solid var(--p2-line);
}

.p2-lhs-rhs-head span {
  padding: 9px 16px;
  color: var(--p2-muted);
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
}

.p2-lhs-rhs-row {
  min-height: 78px;
  align-items: stretch;
  border-bottom: 1px solid var(--p2-line);
}

.p2-lhs-rhs-row:last-child {
  border-bottom: 0;
}

.p2-lhs-rhs-row div,
.p2-lhs-rhs-row p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9px 16px;
}

.p2-lhs-rhs-row p {
  border-left: 1px solid var(--p2-line);
  color: var(--p2-ink);
  font-size: 12.8px;
  font-weight: 700;
  line-height: 1.22;
}

.p2-lhs-rhs-row span {
  display: block;
  color: var(--p2-orange-strong);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.p2-lhs-rhs-row strong {
  display: block;
  margin-top: 3px;
  color: var(--p2-ink);
  font-family: var(--p2-body);
  font-size: 13.2px;
  font-weight: 750;
  line-height: 1.22;
}

.p2-problem-areas article,
.p2-roadmap article,
.p2-benefit-panel,
.p2-phase-metrics article,
.p2-value-buckets article {
  border: 1px solid var(--p2-line);
  border-radius: 8px;
  background: var(--p2-card-soft);
  box-shadow: 0 18px 54px rgba(32, 22, 15, 0.08);
}

.p2-problem-areas article {
  min-height: 126px;
  padding: 16px 17px;
}

.p2-problem-areas span,
.p2-roadmap-num,
.p2-phase-metrics article > span,
.p2-value-buckets article > span {
  display: block;
  color: var(--p2-orange-strong);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.p2-problem-areas strong {
  display: block;
  margin-top: 12px;
  color: var(--p2-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.08;
}

.p2-problem-areas p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.28;
}

.p2-roadmap,
.p2-phase-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}

.p2-roadmap article,
.p2-phase-metrics article {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.p2-roadmap article.is-current,
.p2-phase-metrics article.is-current {
  background: var(--p2-blue);
  border-color: transparent;
  color: #fff;
}

.p2-roadmap article.is-current .p2-roadmap-num,
.p2-roadmap article.is-current p,
.p2-roadmap article.is-current small,
.p2-roadmap article.is-current .p2-product-chip em,
.p2-phase-metrics article.is-current small {
  color: rgba(255, 255, 255, 0.78);
}

.p2-roadmap article.is-current strong,
.p2-phase-metrics article.is-current strong,
.p2-phase-metrics article.is-current b {
  color: #fff;
}

.p2-roadmap strong,
.p2-phase-metrics strong {
  display: block;
  margin-top: 24px;
  color: var(--p2-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.06;
}

.p2-roadmap p {
  margin-top: 12px;
  font-size: 14px;
  margin-bottom: 18px;
}

.p2-roadmap small {
  margin-top: auto;
  color: var(--p2-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.p2-product-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.p2-product-chip span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  flex: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}

.p2-product-chip img,
.p2-product-chip svg {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.p2-product-chip em {
  color: var(--p2-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.12;
}

.p2-focus-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 26px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.p2-focus-layout > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p2-focus-layout h3 {
  max-width: 720px;
}

.p2-focus-layout p {
  max-width: 640px;
  margin-top: 18px;
}

.p2-big-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  max-width: 560px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--p2-line);
}

.p2-big-stat b {
  color: var(--p2-orange-strong);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 76px;
  font-weight: 500;
  line-height: 0.9;
}

.p2-big-stat span {
  color: var(--p2-muted);
  font-size: 17px;
  line-height: 1.24;
}

.p2-benefit-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.48);
}

.p2-mini-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.p2-mini-metrics article {
  min-height: 88px;
  background: rgba(244, 237, 226, 0.74);
}

.p2-mini-metrics b {
  font-size: 28px;
}

.p2-bars {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

.p2-bars div span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 7px;
}

.p2-bars i {
  color: var(--p2-muted);
  font-style: normal;
  font-size: 13px;
  font-weight: 850;
}

.p2-bars b {
  color: var(--p2-ink);
  font-size: 13px;
}

.p2-bars em {
  display: block;
  height: 10px;
  border-radius: 8px;
  background: var(--p2-orange-strong);
}

.p2-bars em.insight {
  background: repeating-linear-gradient(45deg, var(--p2-orange-strong) 0 3px, #f7c2aa 3px 8px);
}

.p2-benefit-mix {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-top: 26px;
}

.p2-mix-chart {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  width: 116px;
  height: 116px;
  place-items: center;
  gap: 1px;
  border-radius: 50%;
  background:
    conic-gradient(var(--p2-blue) 0 var(--p2-insight-deg), var(--p2-orange-strong) var(--p2-insight-deg) 360deg);
  box-shadow: inset 0 0 0 1px rgba(32, 22, 15, 0.08);
}

.p2-mix-chart::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: var(--p2-paper-soft);
}

.p2-mix-chart span,
.p2-mix-chart small {
  position: relative;
  z-index: 1;
  text-align: center;
}

.p2-mix-chart span {
  color: var(--p2-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1;
}

.p2-mix-chart small {
  display: block;
  color: var(--p2-muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.p2-mix-legend {
  display: grid;
  gap: 12px;
}

.p2-mix-legend div {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.p2-mix-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.p2-mix-legend i.insight {
  background: var(--p2-blue);
}

.p2-mix-legend i.hard {
  background: var(--p2-orange-strong);
}

.p2-mix-legend b,
.p2-mix-legend small,
.p2-mix-legend em {
  display: block;
  font-family: var(--p2-body);
  font-style: normal;
}

.p2-mix-legend b {
  color: var(--p2-ink);
  font-size: 13px;
  font-weight: 850;
}

.p2-mix-legend small {
  margin-top: 2px;
  color: var(--p2-muted);
  font-size: 10px;
  font-weight: 700;
}

.p2-mix-legend em {
  color: var(--p2-ink);
  font-size: 13px;
  font-weight: 850;
}

.p2-phase-bars {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
}

.p2-phase-bars i {
  display: block;
  height: 10px;
  border-radius: 8px;
}

.p2-phase-bars .benefit {
  background: var(--p2-orange-strong);
}

.p2-phase-bars .cost {
  background: rgba(32, 22, 15, 0.18);
}

.p2-phase-metrics article.is-current .p2-phase-bars .cost {
  background: rgba(255, 255, 255, 0.32);
}

.p2-phase-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.p2-phase-row small {
  color: var(--p2-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.p2-phase-row b {
  color: var(--p2-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 500;
}

.p2-legend,
.p2-chart-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  color: var(--p2-muted);
  font-size: 12px;
  font-weight: 850;
}

.p2-legend span,
.p2-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.p2-legend i,
.p2-chart-legend i {
  display: block;
  width: 22px;
  height: 8px;
  border-radius: 8px;
}

.p2-legend .benefit,
.p2-chart-legend .benefit {
  background: var(--p2-orange-strong);
}

.p2-legend .cost,
.p2-chart-legend .cost {
  background: rgba(32, 22, 15, 0.18);
}

.p2-subhead {
  max-width: 760px;
  margin-top: 14px !important;
}

.p2-chart-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--p2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
}

.p2-chart-shell .line-chart {
  width: 100%;
  height: 250px;
  border-radius: 8px;
  background: rgba(251, 248, 242, 0.9);
}

.p2-chart-shell .benefit-bar {
  fill: var(--p2-orange-strong);
}

.p2-chart-shell .cost-bar {
  fill: rgba(32, 22, 15, 0.24);
}

.p2-chart-shell .chart-tooltip {
  font-family: var(--p2-body);
}

.p2-value-buckets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
  flex: 1 1 auto;
  min-height: 0;
}

.p2-value-buckets article {
  display: flex;
  flex-direction: column;
  padding: 24px;
  min-height: 0;
}

.p2-value-buckets article:first-child {
  background: var(--p2-blue);
  border-color: transparent;
  color: #fff;
}

.p2-value-buckets article:first-child > span,
.p2-value-buckets article:first-child p,
.p2-value-buckets article:first-child li span {
  color: rgba(255, 255, 255, 0.78);
}

.p2-value-buckets article:first-child strong,
.p2-value-buckets article:first-child li b,
.p2-value-buckets article:first-child em {
  color: #fff;
}

.p2-value-buckets strong {
  display: block;
  margin-top: 14px;
  color: var(--p2-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  font-weight: 500;
  line-height: 1.06;
}

.p2-value-buckets p {
  margin-top: 12px;
  font-size: 14px;
}

.p2-value-buckets ul {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.p2-value-buckets li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--p2-line);
}

.p2-value-buckets article:first-child li {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.p2-value-buckets li span {
  color: var(--p2-muted);
  font-size: 14px;
  font-weight: 750;
}

.p2-value-buckets li b {
  color: var(--p2-ink);
  font-size: 14px;
}

.p2-value-buckets em {
  margin-top: auto;
  color: var(--p2-orange-strong);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}

.p2-pricing-slide .p2-slide-head {
  margin-bottom: 14px;
}

.p2-pricing-slide h3 {
  max-width: 900px;
  line-height: 1.02;
}

.p2-pricing-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.p2-pricing-strip article,
.p2-phase-price-list article,
.p2-pricing-build {
  border: 1px solid var(--p2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
}

.p2-pricing-strip article {
  min-height: 60px;
  padding: 8px 10px;
}

.p2-pricing-strip article.is-highlight {
  background: var(--p2-blue);
  border-color: transparent;
}

.p2-pricing-strip span,
.p2-pricing-build li span {
  display: block;
  color: var(--p2-muted);
  font-size: 9.5px;
  font-weight: 850;
  text-transform: uppercase;
}

.p2-pricing-strip article.is-highlight span,
.p2-pricing-strip article.is-highlight small,
.p2-pricing-strip article.is-highlight em {
  color: rgba(255, 255, 255, 0.78);
}

.p2-pricing-strip b {
  display: block;
  margin-top: 4px;
  color: var(--p2-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
}

.p2-pricing-strip article.is-highlight b {
  color: #fff;
}

.p2-pricing-strip small,
.p2-pricing-strip em {
  display: block;
  color: var(--p2-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.16;
}

.p2-pricing-strip small {
  margin-top: 5px;
}

.p2-pricing-strip em {
  margin-top: 2px;
}

.p2-pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 12px;
  margin-top: 8px;
  min-height: 0;
}

.p2-phase-price-list {
  display: grid;
  gap: 5px;
}

.p2-phase-price-list article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1.08fr) minmax(0, 1fr) 68px;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 6px 9px;
}

.p2-phase-price-list article > span {
  color: var(--p2-orange-strong);
  font-size: 11px;
  font-weight: 850;
}

.p2-phase-price-list strong {
  color: var(--p2-ink);
  font-family: var(--p2-body);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.08;
}

.p2-phase-price-list small,
.p2-phase-price-list em {
  display: block;
  color: var(--p2-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.18;
}

.p2-phase-price-list b {
  justify-self: end;
  color: var(--p2-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 500;
}

.p2-pricing-build {
  padding: 9px 10px;
}

.p2-pricing-build > strong {
  display: block;
  color: var(--p2-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.05;
}

.p2-pricing-build ul {
  display: grid;
  gap: 4px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.p2-pricing-build li {
  padding-top: 4px;
  border-top: 1px solid var(--p2-line);
}

.p2-pricing-build li b {
  display: block;
  margin-top: 2px;
  color: var(--p2-ink);
  font-size: 10.1px;
  font-weight: 750;
  line-height: 1.16;
}

.p2-pricing-footnote {
  margin-top: 5px !important;
  color: var(--p2-muted);
  font-size: 9.8px !important;
  font-weight: 750;
}

.p2-close {
  background: linear-gradient(135deg, #e77d59 0%, #ed9879 100%);
}

.p2-close::before {
  width: 0;
}

.p2-close .p2-kicker,
.p2-close .p2-wordmark,
.p2-close p,
.p2-close .p2-slide-foot {
  color: rgba(32, 22, 15, 0.68);
}

.p2-close .p2-slide-foot {
  border-top-color: rgba(32, 22, 15, 0.18);
}

.p2-close-copy {
  max-width: 900px;
  margin-top: auto;
  margin-bottom: auto;
}

.p2-close-copy h3 {
  max-width: 860px;
  font-size: 40px;
  line-height: 1.04;
}

.p2-close-copy p {
  max-width: 760px;
  margin-top: 24px;
  color: rgba(32, 22, 15, 0.72);
  font-size: 21px;
}

.p2-close-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 760px;
  margin-top: 32px;
}

.p2-close-stats article {
  background: rgba(244, 237, 226, 0.82);
}

@media (max-width: 1320px) {
  .p2-slide {
    padding: 42px 54px 50px;
  }

  .p2-cover {
    padding: 48px 54px 50px;
  }

  .p2-slide-foot {
    left: 54px;
    right: 54px;
  }

  .p2-problem-areas,
  .p2-lhs-rhs,
  .p2-roadmap,
  .p2-phase-metrics {
    gap: 10px;
  }

  .p2-lhs-rhs-row {
    min-height: 78px;
  }

  .p2-lhs-rhs-row strong {
    font-size: 13.2px;
  }

  .p2-lhs-rhs-row p {
    font-size: 12.8px;
  }

  .p2-problem-areas strong {
    font-size: 22px;
  }

  .p2-roadmap article,
  .p2-phase-metrics article {
    min-height: 300px;
    padding: 20px;
  }

  .p2-roadmap strong,
  .p2-phase-metrics strong {
    font-size: 24px;
  }

  .p2-chart-shell .line-chart {
    height: 250px;
  }
}

@media print {
  .presentation-v2-dashboard {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .p2-slide {
    width: 13.333in !important;
    height: 7.5in !important;
    aspect-ratio: auto !important;
    zoom: 1 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
  }

  .p2-slide:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}