/* Shared financial language and visual scale; each page keeps its own composition. */
.impact-comparison {
  --impact-main-size: clamp(2.4rem, 5.5vw, 4rem);
  --impact-label-size: 11px;
  --impact-name-size: 12px;
  --impact-amount-size: 1.15rem;
  --impact-section-space: 28px;
  --impact-label-space: 20px;
  --impact-row-space: 16px;
  background: var(--bg1);
  color: var(--text);
  border-color: var(--line);
  padding: clamp(28px, 4vw, 48px);
  gap: clamp(24px, 4vw, 56px);
}
.impact-comparison .delta,
.financial-page .impact-comparison .financial-profit-summary .delta {
  font-family: var(--font-display);
  font-size: var(--impact-main-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  color: var(--green);
}
.impact-comparison .pillar-gains-title,
.impact-comparison .financial-profit-label,
.financial-page .impact-comparison .financial-profit-sources .financial-profit-label {
  font-family: var(--font-body);
  font-size: var(--impact-label-size);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .2em;
  text-transform: none;
  color: var(--accent);
}
.impact-comparison .financial-profit-label { margin-bottom: var(--impact-label-space); }
.impact-comparison .pillar-gains-title { padding: 16px 22px 0; }
.impact-comparison .pillar-gains-body { padding: var(--impact-label-space) 22px 24px; }
.impact-comparison .from-to {
  margin-top: var(--impact-section-space);
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted);
}
.impact-comparison .from-to b { color: var(--text); font-weight: 600; }
.impact-comparison .impact-context-copy { margin: 22px 0 26px; color: var(--muted); font-family: var(--font-body); font-size: 15px; line-height: 1.6; }
.impact-comparison .financial-profit-comparison { margin-top: var(--impact-section-space); padding-top: 24px; gap: 24px; }
.impact-comparison .financial-profit-comparison dd { font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 600; line-height: 1.6; letter-spacing: normal; color: var(--text); }
.impact-comparison .financial-profit-improvement { margin-top: 22px; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--green); }
.impact-comparison .financial-profit-improvement .financial-profit-period { font: inherit; color: inherit; letter-spacing: inherit; }
.impact-comparison .pillar-gain { padding-top: var(--impact-row-space); padding-bottom: var(--impact-row-space); }
.financial-page .impact-comparison .financial-profit-sources .pillar-gain { padding: var(--impact-row-space) 0; }
.impact-comparison .pillar-gain .name,
.financial-page .impact-comparison .pillar-gain .name {
  font-family: var(--font-body);
  font-size: var(--impact-name-size);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--muted);
}
.financial-page .impact-comparison .pillar-gain .name a { color: var(--muted); font-weight: 400; }
.financial-page .impact-comparison .pillar-gain .name a:hover { color: var(--accent); }
.impact-comparison .pillar-gain .amt { font-family: var(--font-display); font-size: var(--impact-amount-size); font-weight: 700; line-height: 1.4; letter-spacing: normal; color: var(--green); }
@media (max-width: 480px) {
  .impact-comparison .financial-profit-comparison { gap: 14px; }
  .impact-comparison .pillar-gains-title { padding-left: 16px; padding-right: 16px; }
  .impact-comparison .pillar-gains-body { padding-left: 16px; padding-right: 16px; }
}

.impact-comparison .pillar-gains .pillar-gain-list { border: 0; }

.impact-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cta-gap); margin-top: 28px; }

/* The detailed and chart breakdowns can live on either page. */
.impact-breakdown-detailed { min-width: 0; }
.impact-comparison .impact-breakdown-detailed .pillar-gain-list { border: 0; background: transparent; gap: 0; }
.impact-comparison .impact-breakdown-detailed .pillar-gain { padding: var(--impact-row-space) 0; background: transparent; }
.impact-comparison .impact-breakdown-detailed .pillar-gain + .pillar-gain { border-top: 1px solid var(--line); }
.impact-comparison .impact-breakdown-detailed .name a { color: var(--muted); font-weight: 400; text-decoration: none; }
.impact-comparison .impact-breakdown-detailed .name a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.impact-comparison .impact-breakdown-detailed .name small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.6; letter-spacing: 0; }

.impact-comparison .impact-breakdown-chart { border: 0; background: transparent; }
.financial-page .impact-comparison { align-items: center; }

.financial-page .impact-comparison .financial-profit-comparison { position: relative; border-top-color: transparent; }
.financial-page .impact-comparison .financial-profit-comparison::before { content: ''; position: absolute; top: -1px; left: 0; width: 80%; height: 1px; background: var(--line); }

.impact-comparison { --impact-solution-color: var(--text); }
:root:not([data-theme="dark"]) .impact-comparison { --impact-solution-color: var(--navy); }
.impact-comparison .pillar-gain .name,
.financial-page .impact-comparison .pillar-gain .name,
.impact-comparison .impact-breakdown-detailed .name a { color: var(--impact-solution-color); }

/* Give the report's detailed breakdown more room and remove empty inner gutters. */
@media (min-width: 861px) {
  .financial-page .impact-comparison { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
.financial-page .impact-comparison .impact-breakdown-chart .pillar-gains-title { padding: 0; margin-bottom: var(--impact-label-space); }
.financial-page .impact-comparison .impact-breakdown-chart .pillar-gains-body { padding: 0; }
.financial-page .impact-comparison .impact-breakdown-chart .pillar-gain { padding-left: 0; padding-right: 0; }
.financial-page .impact-comparison .impact-breakdown-chart .name a { color: var(--impact-solution-color); font-weight: 400; text-decoration: none; }
.financial-page .impact-comparison .impact-breakdown-chart .name a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .impact-hero > .impact-cta-actions { margin-top: 0; }
}

@media (max-width: 640px) {
  .financial-page .impact-comparison { row-gap: 40px; }
}