/* ============================================================================
   about.css — content lifted from the eCentric Credential 2026 deck
   04 Ecosystem · 05 Service map · 06 E-Store Management, the extra proof
   blocks inside Affiliate / Human Live / AI Live / AI Video, 12 Case studies
   and 13 Business models. Everything reads --page-* tokens, so each block
   follows the theme of the chapter it sits in.
   ========================================================================== */

/* -- Shared --------------------------------------------------------------- */

.block-title {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--page-fg);
  margin-bottom: var(--space-5);
}

/* Wide tables scroll inside their own box so the page never scrolls sideways. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--page-border);
  border-radius: var(--radius-lg);
  background: var(--page-surface);
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table-wrap th,
.table-wrap td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--page-border);
  color: var(--page-body);
}

.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td { border-bottom: 0; }

.table-wrap thead th {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--page-fg);
  background: var(--page-surface-2);
  white-space: nowrap;
}

.table-wrap tbody th {
  font-weight: var(--weight-semibold);
  color: var(--page-fg);
  min-width: 150px;
}

/* -- 04 · Ecosystem ------------------------------------------------------- */

.eco-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .eco-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.eco-block { margin-top: var(--chapter-gap); }

.eco-block__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--page-eyebrow);
  margin-bottom: var(--space-5);
}

/* Six links of one chain: a column on phones, a single row from tablet up,
   joined by a rule so they read as a sequence rather than six cards. */
.eco-chain {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .eco-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .eco-chain { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.eco-chain li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--page-border);
  background: var(--page-surface);
}

.eco-chain li.is-current {
  border-color: var(--yellow-500);
  background: rgba(255, 199, 0, 0.1);
}

.eco-chain__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--page-accent-text);
}

.eco-chain__name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--page-fg);
}

.eco-chain__desc {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--page-muted);
}

.eco-units {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .eco-units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .eco-units { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.eco-unit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--page-border);
  background: var(--page-surface);
}

.eco-unit--accent {
  background: var(--yellow-500);
  border-color: var(--yellow-500);
  --page-fg: var(--navy-900);
  --page-body: var(--navy-900);
  --page-muted: rgba(0, 10, 64, 0.72);
  --page-border: rgba(0, 10, 64, 0.16);
}

.eco-unit__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.eco-unit__name {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--page-fg);
}

.eco-unit__badge {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--navy-900);
  color: var(--yellow-500);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eco-unit__role {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--page-accent-text);
}

.eco-unit--accent .eco-unit__role { color: var(--navy-900); }

.eco-unit__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--page-body);
}

.eco-unit__list {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--page-border);
}

.eco-unit__list li {
  font-size: var(--text-xs);
  color: var(--page-muted);
  padding-left: 14px;
  position: relative;
}

.eco-unit__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.6;
}

/* -- 05 · Service map ----------------------------------------------------- */

.pillars {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 960px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.pillar {
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border-radius: var(--radius-xl);
  border: 1px solid var(--page-border);
  background: var(--page-surface);
}

/* Pillar 2 is the E-Marketing half — navy, like the deck's chip system. */
.pillar--accent {
  background: var(--navy-900);
  border-color: var(--navy-900);
  box-shadow: var(--shadow-lg);
  --page-fg: var(--white);
  --page-body: rgba(255, 255, 255, 0.74);
  --page-muted: rgba(255, 255, 255, 0.6);
  --page-border: rgba(255, 255, 255, 0.14);
  --page-accent-text: var(--yellow-500);
}

.pillar__head { margin-bottom: var(--space-6); }

.pillar__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-muted);
}

.pillar__title {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--page-fg);
}

.pillar__lever {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--yellow-500);
  color: var(--navy-900);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.svc-list {
  display: grid;
  border-top: 1px solid var(--page-border);
}

.svc-list li { border-bottom: 1px solid var(--page-border); }

.svc-item {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--space-4) var(--space-8) var(--space-4) 0;
}

.svc-item__name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--page-fg);
}

.svc-item__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--page-body);
}

.svc-item__go {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--page-accent-text);
  transition: transform var(--dur-base) var(--ease-out-power3);
}

[data-theme="light"] .pillar:not(.pillar--accent) .svc-item__go { color: var(--yellow-700); }

a.svc-item:hover .svc-item__go { transform: translate(3px, calc(-50% - 3px)); }
a.svc-item:hover .svc-item__name { text-decoration: underline; text-decoration-color: var(--yellow-500); text-underline-offset: 4px; }

/* -- 06 · E-Store: Nutrition Tower ---------------------------------------- */

.tower {
  width: 100%;
  max-width: 520px;
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--page-shadow);
  color: var(--navy-900);
}

.tower__title {
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--weight-extrabold);
  color: var(--navy-900);
  margin-bottom: var(--space-5);
}

.tower__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* Each row is a little wider than the one above it: a pyramid, GMV on top. */
.tower__row {
  display: flex;
  gap: 5px;
  width: var(--w, 100%);
}

/* On phones the narrow top rows would squeeze three labels into ~150px. */
@media (max-width: 559px) {
  .tower__row { width: calc(var(--w, 100%) / 2 + 50%); }
}

.tower__cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 6px;
  border-radius: 4px;
  text-align: center;
  font-size: clamp(9.5px, 0.6rem + 0.2vw, 12px);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tower__cell--ec { background: var(--yellow-500); color: var(--navy-900); }
.tower__cell--brand { background: var(--navy-900); color: var(--white); }

.tower__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--slate-600);
}

.tower__legend > span { display: inline-flex; align-items: center; gap: var(--space-2); }

.tower__key {
  width: 18px;
  height: 10px;
  border-radius: 2px;
}

.tower__key--ec { background: var(--yellow-500); }
.tower__key--brand { background: var(--navy-900); }

/* -- 06 · E-Store: scope, differentiators, dashboard ---------------------- */

.scope-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .scope-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.scope-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--page-border);
  background: var(--page-surface);
}

.scope-card__num,
.funnel__num,
.mini-step__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--page-accent-text);
}

[data-theme="light"] .funnel__num,
[data-theme="light"] .mini-step__num { color: var(--yellow-800); }

.scope-card__title,
.funnel__title,
.mini-step__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--page-fg);
}

.scope-card__desc,
.funnel__desc,
.mini-step__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--page-body);
}

.estore-split {
  display: grid;
  gap: var(--chapter-gap);
}

@media (min-width: 960px) {
  .estore-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.diff {
  display: grid;
  gap: var(--space-5);
}

.diff li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.diff__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--yellow-500);
  color: var(--navy-900);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.diff li > span:last-child { display: grid; gap: 2px; }

.diff strong {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--page-fg);
}

.diff li > span:last-child > span {
  font-size: var(--text-sm);
  color: var(--page-body);
}

.data-card {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-radius: var(--radius-xl);
  border: 1px solid var(--page-border);
  background: var(--page-surface);
}

.data-card .check-list li { font-size: var(--text-sm); }

/* -- 06 · E-Store: portfolio by category ---------------------------------- */

.portfolio {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 960px) {
  .portfolio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* FMCG carries 24 of the 39 logos — it takes the full first row. */
  .portfolio__group--fmcg { grid-column: 1 / -1; }
}

.portfolio__group {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--page-border);
  background: var(--page-surface);
}

.portfolio__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--page-fg);
}

.portfolio__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--page-accent-text);
}

.portfolio__logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
}

.pf-logo {
  display: grid;
  place-items: center;
  height: 64px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--white);
}

.pf-logo img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* -- 07 · Affiliate: market signal + Massive Affiliate -------------------- */

.signal {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 960px) {
  .signal { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
}

.signal__main > * + * { margin-top: var(--space-4); }

/* Sans, not mono: Geist Mono gives the VN decimal comma a full cell ("85 , 6"). */
.signal__num {
  font-family: var(--font-sans);
  font-size: var(--fs-display-2);
  font-weight: var(--weight-extrabold);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--page-fg);
}

.signal__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--page-fg);
  max-width: 28ch;
}

.signal__minis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--page-border);
}

.signal__mini-num {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  color: var(--page-fg);
}

.signal__mini-lbl {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--page-muted);
}

.signal__source {
  font-size: 11px;
  color: var(--page-muted);
}

/* The answer to the signal: a navy card in a light chapter, like .gamify. */
.signal__answer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border-radius: var(--radius-xl);
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
  --page-fg: var(--white);
  --page-body: rgba(255, 255, 255, 0.8);
  --page-muted: rgba(255, 255, 255, 0.56);
  --page-border: rgba(255, 255, 255, 0.14);
  --page-surface: rgba(255, 255, 255, 0.05);
  --page-accent-text: var(--yellow-500);
}

.signal__answer .check-list svg { color: var(--yellow-500); }

.signal__answer-title {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
}

.funnels {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .funnels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.funnel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--page-border);
  background: var(--page-surface);
}

.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.benefits li {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 3px solid var(--yellow-500);
}

.benefit__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--page-muted);
}

.benefits strong {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--page-fg);
}

.benefits li > span:last-child {
  font-size: var(--text-sm);
  color: var(--page-body);
}

/* -- 07 · Affiliate: showcase numbers ------------------------------------- */

.hl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.hl-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--yellow-100);
  border: 1px solid var(--yellow-200);
}

.hl-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow-800);
}

.hl-card__text {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--navy-900);
}

.aff-cases {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (min-width: 640px) {
  .aff-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .aff-cases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.aff-case {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--page-border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.aff-case__logo {
  display: flex;
  align-items: center;
  height: 48px;
}

.aff-case__logo img {
  max-height: 44px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
}

.aff-case__name {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--page-fg);
}

.aff-case__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--page-body);
}

.aff-case__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--page-border);
}

.aff-case__metrics dt {
  font-size: 11px;
  color: var(--page-muted);
}

.aff-case__metrics dd {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--page-fg);
}

/* -- 08 · Human Live: results + mechanics --------------------------------- */

.live-results {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

@media (min-width: 960px) {
  .live-results { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.live-results__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-eyebrow);
  margin-bottom: var(--space-4);
}

.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* -- 09 · AI Live: deployment steps --------------------------------------- */

.hybrid-note {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--page-fg);
  padding-left: var(--space-5);
  border-left: 3px solid var(--yellow-500);
  max-width: 60ch;
  margin-bottom: var(--space-8);
}

.mini-steps {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .mini-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .mini-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mini-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--page-border);
  background: var(--page-surface);
}

/* -- 10 · AI Video: format comparison ------------------------------------- */

.fmt-table { min-width: 640px; }

.fmt-table thead th:not(:first-child) { color: var(--page-accent-text); }

/* -- 12 · Case studies ---------------------------------------------------- */

.cases {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 960px) {
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.case {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border-radius: var(--radius-xl);
  border: 1px solid var(--page-border);
  background: var(--page-surface);
}

.case__head {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--page-border);
}

.case__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--page-muted);
}

.case__brand {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--page-fg);
}

.case__hero {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--yellow-500);
  color: var(--navy-900);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.case__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-eyebrow);
  margin-bottom: var(--space-2);
}

.case__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--page-body);
}

.case__part--split {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 560px) {
  .case__part--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.case__tags li {
  padding: 5px 11px;
  border-radius: var(--radius-full);
  background: rgba(255, 199, 0, 0.14);
  border: 1px solid rgba(255, 199, 0, 0.4);
  color: var(--page-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.case__tags--muted li {
  background: transparent;
  border-color: var(--page-border);
  color: var(--page-body);
  font-weight: var(--weight-medium);
}

.case .check-list li { font-size: var(--text-sm); }

/* -- 13 · Business models + BoxMe ----------------------------------------- */

.model-table { min-width: 720px; }

.model-table td,
.model-table th { vertical-align: middle; }
.model-table td { text-align: center; }
.model-table thead th:not(:first-child) { text-align: center; }

.who-cell {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.who-cell--gs    { background: #DCE6FF; color: var(--navy-900); }
.who-cell--boxme { background: var(--navy-600); color: var(--white); }
.who-cell--ec    { background: var(--yellow-500); color: var(--navy-900); }
.who-cell--brand { background: var(--slate-100); color: var(--slate-600); border: 1px solid var(--slate-200); }

.model-table__scope td {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--page-fg);
  background: var(--page-surface-2);
}

.model-table__scope th { background: var(--page-surface-2); }

.boxme {
  display: grid;
  gap: var(--chapter-gap);
}

@media (min-width: 960px) {
  .boxme { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}

.boxme__copy > * + * { margin-top: var(--space-4); }
.boxme__copy .block-title { margin-bottom: 0; }

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

.stat__num--sans { font-family: var(--font-sans); font-weight: var(--weight-extrabold); }