/* One composition for the benefits introduction and daily spending breakdown. */
.emerald-draft .benefits { padding-top: 0; }
.emerald-draft .benefit-overview {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  min-height: min(660px, calc(100svh - var(--header-height) - 40px));
  padding-block: clamp(40px, 5vh, 64px);
  border-bottom: 1px solid #dce3dc;
}
.benefit-overview > * { min-width: 0; }
.emerald-draft .overview-copy .eyebrow { margin-bottom: 24px; }
.emerald-draft .overview-copy h2 {
  font-size: clamp(1.75rem, 3.05vw, 2.75rem);
  line-height: 1.22;
  letter-spacing: -.045em;
  margin: 0;
  overflow-wrap: normal;
}
.overview-copy h2 > span { color: #087f65; }
.overview-description { max-width: 32ch; margin: 24px 0 18px; font-size: 1.125rem; line-height: 1.65; color: #626d67; }
.emerald-draft .overview-link { display: inline-flex; gap: 24px; align-items: center; min-height: 44px; font-size: .9375rem; }
.overview-link > span { font-size: 1.375rem; }
.spending-snapshot {
  margin: 0;
  padding: clamp(24px, 2.3vw, 34px);
  border: 1px solid #e1e8e3;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 20px 60px #163e2f06;
  color: #232725;
  font-family: 'Onest', sans-serif;
}
.snapshot-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1.0625rem; font-weight: 500; }
.snapshot-period { padding: 7px 13px; border-radius: 20px; background: #eff5f0; color: #466152; font-size: .75rem; font-weight: 400; }
.snapshot-body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: 22px; margin-block: 30px; }
.snapshot-chart { position: relative; width: 100%; max-width: 264px; aspect-ratio: 1; container-type: inline-size; justify-self: center; }
.snapshot-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.snapshot-total { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; }
.snapshot-total > span { color: #6a766e; font-size: clamp(.6875rem, 5cqi, .8125rem); }
.snapshot-total > strong { font-family: var(--font-display-figures); font-weight: 600; font-size: clamp(1.375rem, 20cqi, 3rem); line-height: 1.1; letter-spacing: -.045em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.snapshot-total small { font-family: var(--font-figures); font-size: .52em; font-weight: 650; margin-left: .2em; color: #52665b; }
.snapshot-categories { list-style: none; margin: 0; padding: 0; }
.snapshot-categories li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding-block: 12px; border-bottom: 1px solid #edf1ed; }
.snapshot-categories li:first-child { padding-top: 0; }
.snapshot-categories li:last-child { padding-bottom: 0; border-bottom: 0; }
.snapshot-category { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: .8125rem; }
.snapshot-category::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--category-color); }
.snapshot-categories strong { font-family: var(--font-figures); font-size: 1.125rem; line-height: 1.3; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.snapshot-share { align-self: center; color: #626f66; font-family: var(--font-figures); font-size: .75rem; font-weight: 600; }
.snapshot-insight { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: #f3edf8; color: #59326b; }
.snapshot-insight-mark { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: #e7d5f1; color: #7b3496; font-size: 1.25rem; }
.snapshot-insight p { margin: 0; font-size: .875rem; line-height: 1.55; }
.snapshot-insight strong { font-weight: 600; }
@media (max-width: 1100px) and (min-width: 901px) {
  .emerald-draft .benefit-overview { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 28px; }
  .spending-snapshot { padding: 24px; }
  .snapshot-body { gap: 16px; }
}
@media (min-width: 901px) and (max-height: 720px) {
  .emerald-draft .benefit-overview { padding-block: 20px; }
  .spending-snapshot { padding: 24px; }
  .snapshot-body { margin-block: 20px; }
  .snapshot-categories li { padding-block: 8px; }
  .snapshot-categories li:first-child { padding-top: 0; }
  .snapshot-categories li:last-child { padding-bottom: 0; }
}
@media (max-width: 900px) {
  .emerald-draft .benefit-overview { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 28px; padding-block: 40px; }
  .emerald-draft .overview-copy h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); }
  .overview-copy { max-width: 620px; }
  .overview-description { max-width: 40ch; }
  .spending-snapshot { width: 100%; max-width: 620px; justify-self: center; }
}
@media (max-width: 600px) {
  .emerald-draft .benefit-overview { gap: 24px; padding-block: 32px; }
  .emerald-draft .overview-copy .eyebrow { margin-bottom: 16px; }
  .emerald-draft .overview-copy h2 { font-size: clamp(1.5rem, 6.7vw, 2.125rem); }
  .overview-description { margin: 16px 0 8px; font-size: 1rem; line-height: 1.55; }
  .emerald-draft .overview-link { font-size: .875rem; }
  .spending-snapshot { padding: 20px 18px; border-radius: 24px; }
  .snapshot-heading { font-size: .9375rem; }
  .snapshot-period { font-size: .6875rem; padding: 6px 10px; }
  .snapshot-body { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 14px; margin-block: 18px; }
  .snapshot-categories li { gap: 3px 5px; padding-block: 9px; }
  .snapshot-categories strong { font-size: .9375rem; }
  .snapshot-category { gap: 6px; font-size: .75rem; }
  .snapshot-share { font-size: .6875rem; }
  .snapshot-total > span { display: none; }
  .snapshot-insight { gap: 10px; padding: 12px; border-radius: 12px; }
  .snapshot-insight-mark { flex-basis: 26px; height: 26px; }
  .snapshot-insight p { font-size: .8125rem; }
}