/* ══════════════════════════════════════════════════════════════
   COMMISSION PAGE — design variant A
   Layered on top of styles.css. Colors only from design tokens.
   Variant A prefix: .ca-   Shared: .cv-
   ══════════════════════════════════════════════════════════════ */

/* ══════════ SHARED ══════════ */

/* .cv-eyebrow — shared eyebrow style lives in styles.css */

.cv-section {
  padding: 88px 0 0;
}

.cv-section-head {
  margin: 0 0 36px;
}

/* Shared eyebrow style lives in styles.css — only the spacing is local */
.cv-section-head__label {
  margin-bottom: 12px;
}

.cv-section-head__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-heading);
  margin: 0;
}

/* Formula token colouring — text stays verbatim, only styling differs */
.cv-tok       { color: var(--text-white); font-weight: 700; }
.cv-tok--rate { color: var(--info); font-weight: 700; }
.cv-tok--fee  { color: var(--brand-light); font-weight: 700; }
.cv-tok--you  { color: var(--success); font-weight: 700; }
.cv-tok--dim  { color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════
   VARIANT A — Earnings Explorer (interactive, data-driven)
   ══════════════════════════════════════════════════════════════ */

/* ── Static page hero (identical across all three models) ── */
.ca-phero {
  position: relative;
  padding: calc(var(--header-h) + 64px) 0 52px;
  overflow: hidden;
}

.ca-phero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 85% at 74% 10%, rgba(86, 45, 191, 0.34) 0%, rgba(16, 10, 41, 0) 70%);
  pointer-events: none;
}

.ca-phero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
}

.ca-phero__art {
  display: flex;
  justify-content: center;
}

.ca-phero__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -1.2px;
  color: var(--text-white);
  margin: 20px 0 20px;
}

.ca-phero__subtitle {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-caption);
  max-width: 520px;
  margin: 0;
}

/* ── Model heading below the tabs (the part that switches) ── */
.ca-model-head {
  margin: 0 0 40px;
  text-align: left;
}

.ca-model-head__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-heading);
  margin: 0 0 14px;
}

.ca-model-head__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-caption);
  margin: 0;
}

/* Tabs sit tighter when a model heading follows them */
.model-tabs.ca-tabs {
  width: 100%;
  margin-bottom: 32px;
}

/* Real tab control — .model-tab is styled for <a>, so reset the button chrome */
.ca-tabs .model-tab {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  flex: 1;
  text-align: center;
}

.ca-tabs .model-tab:focus-visible {
  outline: 2px solid var(--brand-pale);
  outline-offset: 2px;
}

.ca-tabs .model-tab--active {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 4px 16px rgba(131, 82, 255, 0.4);
}

/* ── Tab panels ── */
.ca-panel[hidden] { display: none; }

.ca-panel { animation: ca-panel-in 0.32s ease both; }

@keyframes ca-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ca-panel { animation: none; }
}

/* All three tabs open on a two-column split card — the explorer on RevShare and
   CPA, the combo on Hybrid. They share one geometry so nothing shifts when you
   switch tabs. The inner gutter is wider than the outer padding because the
   Hybrid plus badge straddles the divider and eats half its width from each
   side; the other two tabs match it rather than the badge looking cramped. */
.ca-explorer,
.ca-combo {
  --ca-plus-size: 46px;
  --ca-split-gutter: calc(var(--card-pad) + var(--ca-plus-size) / 2);
}

/* ── Interactive tier explorer ── */
.ca-explorer {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--glass-stroke);
  background: var(--surface-1);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  overflow: hidden;
}

.ca-explorer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 100% at 78% 0%, rgba(131, 82, 255, 0.28) 0%, rgba(16, 10, 41, 0) 65%);
  pointer-events: none;
}

.ca-explorer__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Height of the big readout — line-height is 1, so it equals the font size.
     The left column uses it to line its second row up with the right one. */
  --ca-value-h: 42px;
}

/* Left — controls */
.ca-control {
  padding: var(--card-pad);
  padding-right: var(--ca-split-gutter);
  border-right: 1px solid var(--glass-stroke);
}

.ca-control__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand-pale);
  margin-bottom: 22px;
}

.ca-control__readout {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 26px;
}

.ca-control__count {
  font-size: var(--ca-value-h);
  font-weight: 700;
  line-height: 1;
  color: var(--text-white);
  font-variant-numeric: tabular-nums;
}

.ca-control__unit {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Range input */
.ca-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(105, 65, 204, 0.35);
  outline: none;
  cursor: pointer;
}

.ca-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text-white);
  border: 5px solid var(--brand);
  box-shadow: 0 4px 16px rgba(131, 82, 255, 0.55);
  cursor: grab;
  transition: transform 0.15s ease;
}

.ca-range::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }

.ca-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text-white);
  border: 5px solid var(--brand);
  box-shadow: 0 4px 16px rgba(131, 82, 255, 0.55);
  cursor: grab;
}

.ca-range:focus-visible { box-shadow: 0 0 0 4px rgba(131, 82, 255, 0.3); }

.ca-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Right — output.
   Top-aligned with the same padding as .ca-control so both columns share one
   baseline grid: labels on the first line, the value/band on the second. */
.ca-output {
  padding: var(--card-pad);
  padding-left: var(--ca-split-gutter);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Matches .ca-control__label exactly — the two labels must sit on one line */
.ca-output__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand-pale);
  margin-bottom: 22px;
}

/* Capped below .ca-phero__title (48px) so the hero stays the loudest element */
.ca-output__value {
  font-size: var(--ca-value-h);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--text-white);
  font-variant-numeric: tabular-nums;
}

/* Plain caption, not a pill — it is a read-only label and must not look tappable */
.ca-output__tier {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

.ca-output__next {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-caption);
  min-height: 21px;
}

.ca-output__next b { color: var(--success); }

/* ── Tier ladder (the RevShare table, visualised) ── */
.ca-ladder {
  margin-top: 24px;
  border-radius: 20px;
  border: 1px solid var(--glass-stroke);
  background: var(--surface-1);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;
}

.ca-ladder thead th {
  padding: 15px 28px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--brand-pale);
  background: rgba(131, 82, 255, 0.14);
}

.ca-ladder thead th:last-child { text-align: right; }

.ca-ladder tbody tr {
  transition: background 0.2s ease;
}

.ca-ladder tbody tr td {
  padding: 0;
  border-top: 1px solid rgba(105, 65, 204, 0.18);
  vertical-align: middle;
}

.ca-ladder tbody tr td:first-child { padding: 18px 0 18px 28px; width: 34%; }
.ca-ladder tbody tr td:last-child  { padding: 18px 28px 18px 0; width: 66%; }

.ca-tier__range {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

.ca-tier__meter {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ca-tier__track {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(105, 65, 204, 0.24);
  overflow: hidden;
}

.ca-tier__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(131, 82, 255, 0.45), var(--brand-light));
  transition: background 0.25s ease;
}

.ca-tier__pct {
  min-width: 52px;
  text-align: right;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-caption);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

/* Header is a flat purple block, so the active tier uses a fading sweep plus a
   left accent bar instead — otherwise the row reads as a second header. */
.ca-ladder tr.is-active {
  background: linear-gradient(90deg, rgba(131, 82, 255, 0.2) 0%, rgba(131, 82, 255, 0) 82%);
}

/* Inset shadow rather than a border so the cell padding stays put */
.ca-ladder tr.is-active td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-light);
}

.ca-ladder tr.is-active .ca-tier__range { color: var(--text-white); }
.ca-ladder tr.is-active .ca-tier__pct   { color: var(--text-white); }
.ca-ladder tr.is-active .ca-tier__fill  {
  background: linear-gradient(90deg, var(--brand), var(--brand-pale));
  box-shadow: 0 0 18px rgba(131, 82, 255, 0.6);
}

/* ── Formula + parameters ── */
.ca-formula-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.ca-formula {
  padding: var(--card-pad);
  border-radius: 20px;
  background: var(--surface-1);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  border: 1px solid var(--glass-stroke);
}

.ca-formula__lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-caption);
  margin: 0 0 18px;
}

.ca-formula__code {
  font-family: Monaco, "Courier New", monospace;
  font-size: 13px;
  line-height: 2;
  color: var(--text-body);
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 4px;
}

.ca-params {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ca-param {
  padding: var(--card-pad);
  border-radius: var(--radius-modal);
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}

.ca-param__value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-white);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.ca-param__value--accent {
  color: var(--brand-light);
}

.ca-param__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 5px;
}

.ca-param__note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ── Growth chart ── */
.ca-chart {
  padding: var(--card-pad);
  border-radius: 20px;
  border: 1px solid var(--glass-stroke);
  background: var(--surface-1);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}

.ca-chart__plot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
  height: 210px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-stroke);
}

/* Every bar is the same RGB as --brand and differs only in alpha, so the whole
   chart stays one hue — --brand-light was avoided because it greys out once
   translucent. --ca-bar-a drives fill, fade and border together. */
.ca-bar {
  position: relative;
  border-radius: 10px 10px 0 0;
  --ca-bar-a: 0.46;
  background: linear-gradient(
    180deg,
    rgba(131, 82, 255, var(--ca-bar-a)) 0%,
    rgba(131, 82, 255, calc(var(--ca-bar-a) * 0.15)) 100%
  );
  border: 1px solid rgba(131, 82, 255, calc(var(--ca-bar-a) * 0.9));
  border-bottom: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Each month reads brighter than the previous one, so the colour ramp carries
   the same growth story as the bar heights */
.ca-chart__plot .ca-bar:nth-child(1) { --ca-bar-a: 0.28; }
.ca-chart__plot .ca-bar:nth-child(2) { --ca-bar-a: 0.44; }
.ca-chart__plot .ca-bar:nth-child(3) { --ca-bar-a: 0.64; }

.ca-bar--last {
  --ca-bar-a: 0.92;
  border-color: var(--brand);
  border-style: dashed;
  border-bottom: none;
}

.ca-bar__cap {
  margin-top: -17px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--glass-brand);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ca-bar--last .ca-bar__cap {
  border-color: var(--brand);
  color: var(--brand-pale);
}

.ca-chart__axis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.ca-axis__month {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--brand-pale);
  margin-bottom: 6px;
}

.ca-axis__label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-caption);
}

/* ── Payout band (CPA) ──
   Occupies the same slot as the big readout opposite it and centres inside it,
   which drops the $50/$500 row onto that readout's baseline. */
.ca-band {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--ca-value-h);
}

.ca-band__track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(105, 65, 204, 0.28);
  overflow: hidden;
}

.ca-band__fill {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(131, 82, 255, 0.5) 0%, var(--brand-light) 55%, var(--brand-pale) 100%);
  box-shadow: 0 0 20px rgba(131, 82, 255, 0.5);
}

.ca-band__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

/* ── Icon point cards ── */
.ca-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ca-point {
  padding: var(--card-pad);
  border-radius: var(--radius-modal);
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}

.ca-point__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: var(--radius-modal);
  background: linear-gradient(135deg, rgba(131, 82, 255, 0.3), rgba(54, 188, 242, 0.2));
  color: var(--brand-pale);
}

.ca-point__icon svg { width: 21px; height: 21px; }

.ca-point__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
}

/* ── Numbered stepper ── */
.ca-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ca-step {
  position: relative;
  padding: var(--card-pad);
  border-radius: var(--radius-modal);
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}

.ca-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(131, 82, 255, 0.2);
  border: 1px solid var(--glass-brand);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
}

.ca-step__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
}

/* ── Neutral risk list (termination policy) ── */
.ca-risks {
  border-radius: var(--radius-modal);
  border: 1px solid var(--glass-stroke);
  overflow: hidden;
}

.ca-risk {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: var(--surface-1);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
}

.ca-risk + .ca-risk { border-top: 1px solid rgba(105, 65, 204, 0.18); }

.ca-risk__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--glass-stroke);
  color: var(--text-muted);
}

.ca-risk__icon svg { width: 15px; height: 15px; }

/* ── Callout ── */
.ca-callout {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 20px;
  padding: var(--card-pad);
  border-radius: var(--radius-modal);
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  border-left: 3px solid var(--brand);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}

.ca-callout--accent { border-left-color: var(--success); }

.ca-callout__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(131, 82, 255, 0.2);
  color: var(--brand-pale);
}

.ca-callout--accent .ca-callout__icon {
  background: rgba(71, 218, 156, 0.18);
  color: var(--success);
}

.ca-callout__icon svg { width: 17px; height: 17px; }

.ca-callout__text {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-body);
}

.ca-callout__text b { color: var(--text-white); }

/* ── Lead paragraph ── */
.ca-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0 0 24px;
  max-width: 780px;
}

.ca-lead b { color: var(--text-white); }

/* ── Hybrid combo card ── */
.ca-combo {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--glass-stroke);
  background: var(--surface-1);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  overflow: hidden;
}

.ca-combo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 100% at 50% 0%, rgba(131, 82, 255, 0.26) 0%, rgba(16, 10, 41, 0) 68%);
  pointer-events: none;
}

.ca-combo__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ca-combo__half {
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ca-combo__half + .ca-combo__half { border-left: 1px solid var(--glass-stroke); }

.ca-combo__half:first-child { padding-right: var(--ca-split-gutter); }
.ca-combo__half:last-child { padding-left: var(--ca-split-gutter); }

.ca-combo__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand-pale);
  margin-bottom: 16px;
}

.ca-combo__value {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  color: var(--text-white);
}

.ca-combo__note {
  margin-top: 14px;
  font-size: 15px;
  color: var(--text-caption);
}

/* Plus badge on the divider */
.ca-combo__plus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ca-plus-size);
  height: var(--ca-plus-size);
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-brand);
  box-shadow: 0 6px 24px rgba(16, 10, 41, 0.7);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-white);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .ca-phero__grid { grid-template-columns: 1fr; gap: 36px; }
  .ca-phero__title { font-size: 40px; }
  .ca-phero__subtitle { max-width: none; }
  .ca-phero .hero-art { width: min(320px, 100%); }

  /* Explorer columns stack — no divider to clear, so the gutter goes back to the
     plain card padding */
  .ca-explorer__grid { grid-template-columns: 1fr; }
  .ca-control {
    padding-right: var(--card-pad);
    border-right: none;
    border-bottom: 1px solid var(--glass-stroke);
  }
  .ca-output { padding-left: var(--card-pad); align-items: flex-start; }
  .ca-params { grid-template-columns: repeat(2, 1fr); }
  .ca-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-explorer__grid { --ca-value-h: 38px; }
  .ca-combo__value { font-size: 38px; }
}

@media (max-width: 640px) {
  .cv-section { padding-top: 56px; }
  .cv-section-head__title { font-size: 26px; }

  .ca-phero { padding: calc(var(--header-h) + 64px) 0 36px; }
  .ca-phero__title { font-size: 33px; }
  .ca-phero .hero-art { width: min(260px, 100%); }
  .ca-model-head__title { font-size: 24px; }
  .ca-model-head { margin-bottom: 32px; }

  .ca-formula__code { white-space: normal; line-height: 1.9; }
  .ca-explorer__grid { --ca-value-h: 32px; }
  /* Ranges are ~4x wider than a single percentage — keep them on one line */
  .ca-output__value--range { font-size: 30px; white-space: nowrap; }
  .ca-params { grid-template-columns: 1fr; }
  .ca-points { grid-template-columns: 1fr; }
  .ca-steps { grid-template-columns: 1fr; }
  .ca-risk { padding: 16px 18px; gap: 13px; font-size: 14.5px; }
  .ca-callout { gap: 14px; }

  /* Hybrid halves stack — divider and plus badge rotate to horizontal, so the
     room the badge needs moves from the inner sides to the inner edges */
  .ca-combo__grid { grid-template-columns: 1fr; }
  .ca-combo__half + .ca-combo__half {
    border-left: none;
    border-top: 1px solid var(--glass-stroke);
  }
  .ca-combo__half:first-child {
    padding-right: var(--card-pad);
    padding-bottom: calc(var(--card-pad) + var(--ca-plus-size) / 2);
  }
  .ca-combo__half:last-child {
    padding-left: var(--card-pad);
    padding-top: calc(var(--card-pad) + var(--ca-plus-size) / 2);
  }
  .ca-combo__value { font-size: 32px; }
  .ca-ladder thead th { padding: 13px 18px; }
  .ca-ladder tbody tr td:first-child { padding: 15px 0 15px 18px; width: 42%; }
  .ca-ladder tbody tr td:last-child { padding: 15px 18px 15px 0; width: 58%; }
  .ca-tier__meter { gap: 12px; }
  .ca-tier__range { font-size: 13.5px; }
  .ca-chart__plot { height: 150px; gap: 10px; }
  .ca-chart__axis { gap: 10px; }
  .ca-bar__cap { padding: 4px 9px; font-size: 12.5px; }
  .ca-axis__month { font-size: 10.5px; }
  .ca-axis__label { font-size: 11.5px; }
}