/* Savings page — partial CSS
 * Scoped to /savings/ only. Tokens & components are read-only.
 */

.savings-hero {
  background: var(--c-emerald-900);
  color: var(--fg-on-emphasis);
  padding: var(--space-9) 0 var(--space-8);
  position: relative;
  overflow: hidden;
}
/* Rides 12-col grid: copy span 6, figure span 6. */
.savings-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--grid-row-gap);
  align-items: center;
}
.savings-hero__inner > *:nth-child(1) { grid-column: span 6; }
.savings-hero__inner > *:nth-child(2) { grid-column: span 6; }
.savings-hero__eyebrow { color: var(--c-emerald-300); }
.savings-hero h1 {
  color: var(--fg-on-emphasis);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, var(--fs-3xl));
  line-height: 1.15; /* light type on forest needs more air than --lh-tight */
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.savings-hero h1 em { color: var(--c-emerald-100); }
.savings-hero__lede strong { white-space: nowrap; }
.savings-hero__lede {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-cream-100);
  max-width: 54ch;
  margin: 0 0 var(--space-6);
}
/* Image bleeds to the section's right edge at full height; the gradient
 * fades it into the emerald background so the copy stays on solid green. */
.savings-hero__figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  margin: 0;
}
.savings-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--c-emerald-900) 0%, transparent 45%);
}
.savings-hero__figure img { width: 100%; height: 100%; object-fit: cover; }
.savings-hero__figure svg { width: 100%; height: 100%; display: block; }
@media (max-width: 860px) {
  .savings-hero__inner { grid-template-columns: 1fr; }
  .savings-hero__inner > * { grid-column: span 1; }
  .savings-hero__figure {
    position: static;
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .savings-hero__figure::after { content: none; }
}

/* Rides 12-col grid: 3 stats × 4 cols each. */
.savings-stats {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--grid-row-gap);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter);
}
.savings-stats > * { grid-column: span 4; }
.savings-stat__num {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
  color: var(--c-emerald-700);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.savings-stat__label {
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
  line-height: var(--lh-normal);
  margin: 0;
}
@media (max-width: 860px) {
  .savings-stats { grid-template-columns: 1fr; }
  .savings-stats > * { grid-column: span 1; }
}

/* Split band rhythm: intro sits on cream-100, cards sit on cream-50.
 * Color seam lands right under the header text with no air above it. */
.savings-intro-band { padding: var(--space-8) 0; }
.savings-cards-band { padding-top: var(--space-7); }

.savings-rebates {
  display: grid;
  gap: var(--space-6);
}
/* Rides 12-col grid: figure span 5, body span 7 (was 0.9fr / 1.1fr). */
.savings-rebate {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--grid-row-gap);
  align-items: stretch;
  padding: var(--space-7);
  background: var(--c-cream-100);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.savings-rebate__figure { grid-column: span 5; }
.savings-rebate__body   { grid-column: span 7; }
.savings-rebate__figure {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-emerald-100);
  min-height: 220px;
}
.savings-rebate__figure img { width: 100%; height: 100%; object-fit: cover; }
.savings-rebate__body { display: flex; flex-direction: column; }
.savings-rebate__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-brand);
  margin: 0 0 var(--space-2);
}
.savings-rebate__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--c-ink-900);
  margin: 0 0 var(--space-3);
  line-height: var(--lh-tight);
}
.savings-rebate__amount {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--c-emerald-700);
  line-height: 1;
  margin: 0 0 var(--space-4);
}
.savings-rebate__amount small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink-500);
  margin-top: var(--space-2);
  font-weight: 400;
  letter-spacing: 0;
}
.savings-rebate__meta {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--c-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.savings-rebate__meta dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-ink-500);
  margin-bottom: var(--space-1);
}
.savings-rebate__meta dd {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-900);
  line-height: var(--lh-normal);
}
.savings-rebate__meta dd:last-child { margin-bottom: 0; }
.savings-rebate__desc { color: var(--c-ink-700); margin: 0 0 var(--space-4); }
.savings-rebate__cta { margin-top: auto; }

@media (max-width: 860px) {
  .savings-rebate { grid-template-columns: 1fr; padding: var(--space-5); }
  .savings-rebate__figure, .savings-rebate__body { grid-column: span 1; }
  .savings-rebate__figure { min-height: 200px; aspect-ratio: 4/3; }
}

.savings-cta {
  text-align: center;
  padding: var(--space-9) var(--gutter);
  background: var(--c-emerald-900);
  color: var(--fg-on-emphasis);
}
.savings-cta h2 {
  color: var(--fg-on-emphasis);
  font-weight: 400;
  max-width: 30ch;
  margin: 0 auto var(--space-5);
}
.savings-cta p {
  color: var(--c-cream-100);
  max-width: 52ch;
  margin: 0 auto var(--space-6);
  font-size: var(--fs-md);
}