/*
 * Business model — an asymmetric commercial scoreboard.
 * Loaded after the legacy responsive layer so this section has one canonical
 * composition instead of inheriting the older 2×2 card experiments.
 */

.concept-capabilities {
  position: relative;
  box-sizing: border-box;
  width: min(calc(100% - (2 * var(--pad))), var(--concept-max));
  max-width: var(--concept-max);
  margin: 45px auto 0;
  padding: 64px 68px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--palette-soft-ivory-bright) 14%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 72% -8%, color-mix(in srgb, var(--coral) 26%, transparent), transparent 32rem),
    linear-gradient(145deg, var(--palette-forest-abyss) 0%, var(--palette-forest-deep) 62%, var(--palette-forest-abyss) 100%);
  color: var(--paper-bright);
}

.concept-capabilities::before {
  content: "VALUE / REVENUE / MARKET / RUNWAY";
  position: absolute;
  top: 22px;
  right: clamp(28px, 4vw, 68px);
  display: block;
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 34%, transparent);
  font: var(--fw-label) 9px/1 Arial, sans-serif;
  letter-spacing: .18em;
  pointer-events: none;
}

.concept-capabilities::after {
  content: "";
  position: absolute;
  top: 44px;
  right: clamp(28px, 4vw, 68px);
  left: clamp(28px, 4vw, 68px);
  height: 1px;
  background: linear-gradient(90deg, var(--acid) 0 12%, color-mix(in srgb, var(--palette-soft-ivory-bright) 14%, transparent) 12%);
  pointer-events: none;
}

.concept-capabilities > header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: clamp(18px, 2vw, 34px);
  max-width: none;
  margin: 0 0 clamp(44px, 5vw, 72px);
}

.concept-capabilities > header > span {
  grid-column: 1 / 3;
  align-self: start;
  padding-top: 12px;
  color: var(--acid);
  font-size: var(--fs-label-s);
  font-weight: var(--fw-label);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.concept-capabilities > header h2 {
  grid-column: 3 / 10;
  max-width: none;
  margin: 0;
  color: var(--palette-white);
  font: 400 clamp(54px, 5.2vw, 88px)/.9 Georgia, "Times New Roman", serif;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.concept-capabilities > header h2 em,
[data-theme="dark"] .concept-capabilities > header h2 em,
html[data-theme="light"] .concept-capabilities > header h2 em {
  color: var(--acid);
  font-style: italic;
}

.concept-capabilities > header > p {
  grid-column: 10 / 13;
  align-self: end;
  max-width: 34ch;
  margin: 0 0 4px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--palette-soft-ivory-bright) 24%, transparent);
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 76%, transparent);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.62;
}

.concept-capability-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(360px, 1fr) minmax(350px, .92fr);
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
}

.concept-capability,
.concept-capability-primary,
.concept-capability-acid,
.concept-capability-coral,
.concept-capability-blue {
  position: relative;
  display: flex;
  grid-column: auto;
  grid-row: auto;
  min-height: 0;
  padding: clamp(26px, 2.2vw, 38px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--palette-soft-ivory-bright) 16%, transparent);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  transition:
    border-color 420ms var(--concept-ease-out),
    box-shadow 420ms var(--concept-ease-out);
}

.concept-capability:hover {
  border-color: color-mix(in srgb, var(--palette-soft-ivory-bright) 50%, transparent);
  box-shadow: var(--card-shadow-hover);
}

.concept-capability-primary {
  --counter-fade: var(--blue-surface);
  --business-visual-line: color-mix(in srgb, var(--palette-white) 42%, transparent);
  --business-visual-accent: var(--acid);
  --business-visual-fill: color-mix(in srgb, var(--palette-white) 8%, transparent);
  --business-visual-surface: var(--blue-surface);
  grid-column: 1 / 5;
  grid-row: 1 / 3;
  background: var(--blue-surface) !important;
  color: var(--palette-white) !important;
}

.concept-capability-acid {
  --counter-fade: var(--acid);
  --business-visual-line: color-mix(in srgb, var(--palette-forest-deep) 52%, transparent);
  --business-visual-accent: var(--coral);
  --business-visual-fill: color-mix(in srgb, var(--palette-forest-deep) 8%, transparent);
  --business-visual-surface: var(--acid);
  grid-column: 5 / 13;
  grid-row: 1;
  background: var(--acid) !important;
  color: var(--ink-on-bright) !important;
}

/* Terracotta. This card had drifted onto --blue-surface, the same token card
   01 uses, so the bento rendered four panels in three colours. Terracotta is
   dark enough to carry white body copy (5.45:1) — the earlier orange that
   could not was #d44736, a different value from a superseded palette. */
.concept-capability-coral {
  --counter-fade: var(--coral);
  --business-visual-line: color-mix(in srgb, var(--palette-white) 50%, transparent);
  --business-visual-accent: var(--acid);
  --business-visual-fill: color-mix(in srgb, var(--palette-white) 9%, transparent);
  --business-visual-surface: var(--coral);
  grid-column: 5 / 9;
  grid-row: 2;
  background: var(--coral) !important;
  color: var(--palette-white) !important;
}

/* The two saturated fills need full-strength text. The shared rules dim card
   copy to 82% of currentColor and the metric label to 78% ivory, which is
   fine on the lighter panels but drops these under AA — measured on
   Terracotta: label 3.85:1, paragraph 4.22:1. At full strength both sit at
   5.45:1.

   The leading `html` is load-bearing. The shared dark-theme paragraph rule
   further down is `[data-theme="dark"] .concept-capabilities
   .concept-capability p`, also (0,3,1) and also !important, so a selector
   that merely tied it would lose on source order. `html` adds an element and
   takes this to (0,3,2). */
html .concept-page .concept-capabilities .concept-capability-coral p,
html .concept-page .concept-capabilities .concept-capability-blue p,
html .concept-page .concept-capability-coral .concept-business-metric-label,
html .concept-page .concept-capability-blue .concept-business-metric-label {
  color: currentColor !important;
}

/* Forest, flat. This was `forest 68% + terracotta` — one of only nine real
   two-colour blends in the whole system, and the muddiest of them: it
   invented a colour that sits in no palette slot. Plain Forest carries white
   at 8.6:1 and completes the set, so the four cards are now four distinct
   palette values with nothing mixed. */
.concept-capability-blue {
  --counter-fade: var(--palette-forest);
  --business-visual-line: color-mix(in srgb, var(--palette-white) 46%, transparent);
  --business-visual-accent: var(--acid);
  --business-visual-fill: color-mix(in srgb, var(--palette-white) 8%, transparent);
  --business-visual-surface: var(--palette-forest);
  grid-column: 9 / 13;
  grid-row: 2;
  background: var(--palette-forest) !important;
  color: var(--palette-white) !important;
}

.concept-capability-index {
  top: 24px;
  right: 26px;
  z-index: 4;
  opacity: .72;
}

.concept-capability > .ph {
  position: absolute;
  top: 25px;
  left: clamp(26px, 2.2vw, 38px);
  z-index: 4;
  font-size: 29px;
}

/* The market value is the shortest text stack in the second row, so its
   bottom alignment lifts the metric into the icon's old top-left position.
   Keep the icon in the utility corner beside the card index instead. */
.concept-capability-coral > .ph {
  right: 72px;
  left: auto;
}

.concept-capability > div:not(.concept-capability-index) {
  position: relative;
  z-index: 3;
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
}

.concept-business-visual {
  position: absolute;
  z-index: 1;
  top: 46px;
  right: 3%;
  bottom: 18px;
  left: auto;
  display: grid;
  width: 47%;
  height: auto;
  margin: 0;
  place-items: center;
  pointer-events: none;
  color: var(--business-visual-line);
  transition:
    opacity 420ms var(--concept-ease-out),
    transform 700ms var(--concept-ease-out);
}

.concept-business-visual svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: visible;
  filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--palette-forest-deep) 16%, transparent));
  transform-origin: 50% 55%;
  transition: transform 700ms var(--concept-ease-out);
}

.concept-capability:hover .concept-business-visual svg {
  transform: translateY(-5px) scale(1.015);
}

.business-signal * {
  vector-effect: non-scaling-stroke;
}

.signal-grid,
.signal-line,
.signal-accent,
.signal-months,
.signal-bars,
.signal-runway-bars,
.signal-building {
  fill: none;
}

.signal-grid {
  stroke: var(--business-visual-line);
  stroke-width: 1;
  opacity: .28;
}

.signal-line,
.signal-months {
  fill: none;
  stroke: var(--business-visual-line);
  stroke-width: 1.5;
}

.signal-line-strong {
  stroke-width: 2;
}

.signal-accent {
  fill: none;
  stroke: var(--business-visual-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.signal-accent-fill {
  fill: var(--business-visual-accent);
}

.signal-soft {
  fill: var(--business-visual-fill);
  stroke: var(--business-visual-line);
  stroke-width: 1.5;
}

.signal-route {
  stroke-dasharray: 1;
  stroke-dashoffset: .1;
  transition: stroke-dashoffset 900ms var(--concept-ease-out);
}

.concept-capability:hover .signal-route {
  stroke-dashoffset: 0;
}

.signal-node {
  fill: var(--business-visual-surface);
  stroke: var(--business-visual-accent);
  stroke-width: 2;
}

.signal-node-active {
  fill: var(--business-visual-accent);
}

.signal-bars rect,
.signal-runway-bars rect {
  fill: var(--business-visual-fill);
  stroke: var(--business-visual-line);
  stroke-width: 1.5;
}

.signal-bars .signal-bar-active,
.signal-runway-bars .signal-bar-active {
  fill: color-mix(in srgb, var(--business-visual-accent) 20%, transparent);
  stroke: var(--business-visual-accent);
}

.signal-market-price-line {
  fill: none;
  stroke: var(--finance-positive);
  stroke-width: 2;
}

.signal-candle path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
}

.signal-candle-up path {
  stroke: var(--finance-positive);
}

.signal-candle-up rect {
  fill: var(--finance-positive);
}

.signal-candle-down path {
  stroke: var(--finance-negative);
}

.signal-candle-down rect {
  fill: var(--finance-negative);
}

.signal-market-price rect {
  fill: var(--finance-positive);
}

.signal-market-price circle {
  fill: var(--business-visual-surface);
  stroke: var(--finance-positive);
  stroke-width: 3;
}

.signal-market-price text {
  fill: var(--on-finance-positive);
  font: var(--fw-label) 15px/1 Arial, sans-serif;
  letter-spacing: -.02em;
}

.business-signal-runway .signal-route {
  stroke: var(--finance-positive);
}

.business-signal-runway .signal-runway-bars .signal-bar-active {
  fill: color-mix(in srgb, var(--finance-positive) 28%, transparent);
  stroke: var(--finance-positive);
}

.business-signal-runway .signal-node-active {
  fill: var(--finance-positive);
  stroke: var(--finance-positive);
}

.signal-building > rect {
  fill: var(--business-visual-fill);
  stroke: var(--business-visual-line);
  stroke-width: 1.5;
}

.signal-building > path {
  fill: var(--business-visual-accent);
  opacity: .7;
}

.signal-pointer,
.signal-map,
.signal-flag {
  stroke-linejoin: round;
}

.concept-capability-primary .concept-business-visual {
  top: 70px;
  right: 8%;
  bottom: auto;
  left: 8%;
  width: 84%;
  height: 39%;
}

.concept-capability-primary > div:not(.concept-capability-index) {
  align-self: flex-end;
  width: 100%;
}

.concept-capability-acid > div:not(.concept-capability-index) {
  align-self: flex-end;
  width: 54%;
  margin-left: 46%;
}

.concept-capability-acid .concept-business-visual {
  right: auto;
  left: 1%;
  width: 44%;
}

.concept-capability-coral .concept-business-visual,
.concept-capability-blue .concept-business-visual {
  top: 58px;
  right: 1%;
  bottom: 24px;
  width: 34%;
  opacity: 1;
}

.concept-capability-coral .concept-business-visual svg,
.concept-capability-blue .concept-business-visual svg {
  filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--palette-forest-deep) 18%, transparent));
}

.concept-capability-coral > div:not(.concept-capability-index),
.concept-capability-blue > div:not(.concept-capability-index) {
  align-self: flex-end;
  width: 64%;
}

.concept-business-metric {
  margin-bottom: 7px;
  font: var(--fw-strong) clamp(38px, 3vw, 52px)/1 Arial, sans-serif;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.concept-business-metric-word {
  color: var(--acid);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}

.concept-business-metric-counter[data-counter-metric="funding"] {
  font-size: clamp(30px, 2.35vw, 42px);
}

.concept-business-metric-label {
  min-height: 0;
  margin-bottom: 16px;
  color: color-mix(in srgb, var(--palette-forest-deep) 76%, transparent);
  font-size: 9px;
  line-height: 1.45;
}

/* Card 03 joined the dark-fill group when its surface went from var(--acid) to
   the deep brick, so it needs the light label too — the shared dark label
   above measured 1.7:1 on it. */
.concept-capability-primary .concept-business-metric-label,
.concept-capability-coral .concept-business-metric-label {
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 78%, transparent);
}

.concept-capability-blue .concept-business-metric-label {
  color: color-mix(in srgb, var(--palette-white) 72%, transparent);
}

.concept-capabilities .concept-capability h3,
[data-theme="dark"] .concept-capabilities .concept-capability h3 {
  margin: 0 0 10px;
  color: inherit !important;
  font: 400 clamp(27px, 2vw, 36px)/.98 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
}

.concept-capabilities .concept-capability p,
[data-theme="dark"] .concept-capabilities .concept-capability p {
  max-width: 47ch;
  margin: 0;
  color: color-mix(in srgb, currentColor 82%, transparent) !important;
  font-size: clamp(12px, .9vw, 14px);
  line-height: 1.55;
}

.concept-business-note {
  max-width: 78ch;
  margin: 24px 0 0 auto;
  color: color-mix(in srgb, var(--palette-soft-ivory-bright) 58%, transparent);
  font-size: 10px;
  line-height: 1.55;
  text-align: right;
}

.js [data-reveal-stagger] > [data-reveal-item] {
  opacity: 0;
  transform: translateY(34px);
}

.motion-unavailable [data-reveal-stagger] > [data-reveal-item],
.prefers-reduced-motion [data-reveal-stagger] > [data-reveal-item],
.file-preview [data-reveal-stagger] > [data-reveal-item] {
  opacity: 1;
  transform: none;
}

html[data-theme="light"] .concept-capabilities {
  border-color: color-mix(in srgb, var(--palette-forest-deep) 14%, transparent);
  background:
    radial-gradient(circle at 72% -8%, color-mix(in srgb, var(--coral) 17%, transparent), transparent 32rem),
    linear-gradient(145deg, var(--palette-soft-ivory-dim) 0%, var(--palette-soft-ivory) 62%, var(--palette-soft-ivory-dim) 100%);
  color: var(--ink);
}

html[data-theme="light"] .concept-capabilities::before {
  color: color-mix(in srgb, var(--palette-forest-deep) 38%, transparent);
}

html[data-theme="light"] .concept-capabilities::after {
  background: linear-gradient(90deg, var(--blue) 0 12%, color-mix(in srgb, var(--palette-forest-deep) 14%, transparent) 12%);
}

html[data-theme="light"] .concept-capabilities > header > span {
  color: var(--blue);
}

html[data-theme="light"] .concept-capabilities > header h2 {
  color: var(--ink);
}

html[data-theme="light"] .concept-capabilities > header h2 em {
  color: var(--blue);
}

html[data-theme="light"] .concept-capabilities > header > p {
  border-color: color-mix(in srgb, var(--palette-forest-deep) 20%, transparent);
  color: color-mix(in srgb, var(--palette-forest-deep) 72%, transparent);
}

html[data-theme="light"] .concept-business-note {
  color: color-mix(in srgb, var(--palette-forest-deep) 64%, transparent);
}

@media (max-width: 1180px) {
  .concept-capabilities > header > span {
    grid-column: 1 / 4;
  }

  .concept-capabilities > header h2 {
    grid-column: 4 / 13;
  }

  .concept-capabilities > header > p {
    grid-column: 4 / 10;
    margin-top: 8px;
  }

  .concept-capability-grid {
    grid-template-rows: repeat(2, minmax(390px, auto));
  }

  .concept-capability-primary,
  .concept-capability-acid {
    grid-row: 1;
  }

  .concept-capability-primary {
    grid-column: 1 / 7;
  }

  .concept-capability-acid {
    grid-column: 7 / 13;
  }

  .concept-capability-coral {
    grid-column: 1 / 7;
    grid-row: 2;
  }

  .concept-capability-blue {
    grid-column: 7 / 13;
    grid-row: 2;
  }

  .concept-capability-primary .concept-business-visual,
  .concept-capability-acid .concept-business-visual,
  .concept-capability-coral .concept-business-visual,
  .concept-capability-blue .concept-business-visual {
    top: 52px;
    right: 3%;
    bottom: 24px;
    left: auto;
    width: 31%;
    height: auto;
    opacity: .96;
  }

  .concept-capability-primary > div:not(.concept-capability-index),
  .concept-capability-acid > div:not(.concept-capability-index),
  .concept-capability-coral > div:not(.concept-capability-index),
  .concept-capability-blue > div:not(.concept-capability-index) {
    align-self: flex-end;
    width: 64%;
    margin-left: 0;
  }
}

@media (max-width: 960px) {
  .concept-capabilities {
    padding: 72px 32px 42px;
  }

  .concept-capabilities > header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .concept-capabilities > header > span,
  .concept-capabilities > header h2,
  .concept-capabilities > header > p {
    grid-column: 1;
  }

  .concept-capabilities > header > span {
    padding-top: 0;
  }

  .concept-capabilities > header h2 {
    font-size: clamp(48px, 8vw, 70px);
  }

  .concept-capabilities > header > p {
    max-width: 56ch;
  }

  .concept-capability-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .concept-capability-primary,
  .concept-capability-acid,
  .concept-capability-coral,
  .concept-capability-blue {
    grid-column: 1;
    grid-row: auto;
    min-height: 400px;
  }
}

@media (max-width: 620px) {
  .concept-capabilities {
    width: 100%;
    margin-top: 64px;
    padding: 68px 20px 34px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .concept-capabilities::before {
    right: 20px;
    max-width: calc(100% - 40px);
    overflow: hidden;
    white-space: nowrap;
  }

  .concept-capabilities::after {
    right: 20px;
    left: 20px;
  }

  .concept-capabilities > header {
    margin-bottom: 34px;
  }

  .concept-capabilities > header h2 {
    font-size: clamp(39px, 11.5vw, 52px);
    line-height: .94;
  }

  .concept-capability,
  .concept-capability-primary,
  .concept-capability-acid,
  .concept-capability-coral,
  .concept-capability-blue {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding: 68px 22px 24px;
  }

  .concept-capability-primary .concept-business-visual,
  .concept-capability-acid .concept-business-visual,
  .concept-capability-coral .concept-business-visual,
  .concept-capability-blue .concept-business-visual {
    position: relative;
    inset: auto;
    display: grid;
    flex: none;
    width: 100%;
    height: 158px;
    margin: -4px 0 18px;
    opacity: .96;
  }

  .concept-business-visual svg {
    max-width: 430px;
    margin: 0 auto;
  }

  .concept-capability-primary > div:not(.concept-capability-index),
  .concept-capability-acid > div:not(.concept-capability-index),
  .concept-capability-coral > div:not(.concept-capability-index),
  .concept-capability-blue > div:not(.concept-capability-index) {
    width: 100%;
    margin: 0;
  }

  .concept-business-metric {
    font-size: 38px;
  }

  .concept-business-note {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .concept-capability,
  .concept-business-visual,
  .concept-business-visual svg,
  .signal-route {
    transition: none;
  }
}