/* Savings comparison slider - sits inside the .price-flat card on the homepage
   pricing section and the pricing page. Mirrors .leak-calc and uses the same
   theme tokens as the host card, so it adapts to dark mode with the card. */
.savings-calc {
  margin: 26px auto 0;
  max-width: 580px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.savings-calc__title {
  font-size: 18px; font-weight: 700; margin: 0 0 20px; color: var(--color-text);
}
.savings-calc__label {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 4px;
}
.savings-calc__spend {
  display: block; font-size: 30px; font-weight: 800; color: var(--color-text);
  margin-bottom: 16px; font-variant-numeric: tabular-nums;
}
.savings-calc input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 999px; margin: 0; cursor: pointer; outline: none;
  background: linear-gradient(to right,
    var(--color-brand) 0 var(--fill, 26%),
    var(--color-border-strong) var(--fill, 26%) 100%);
}
.savings-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--color-brand);
  box-shadow: 0 2px 6px rgba(20, 30, 90, .25);
}
.savings-calc input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--color-brand);
  background: #fff; box-shadow: 0 2px 6px rgba(20, 30, 90, .25);
}
.savings-calc input[type="range"]:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }
.savings-calc__scale {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--color-text-subtle); margin-top: 7px;
}
.savings-calc__compare {
  display: flex; justify-content: center; gap: 40px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border);
}
.savings-calc__col { display: flex; flex-direction: column; gap: 4px; }
.savings-calc__clabel { font-size: 13px; color: var(--color-text-muted); }
.savings-calc__cval {
  font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.savings-calc__col--them .savings-calc__cval { color: var(--color-danger); }
.savings-calc__col--us .savings-calc__cval { color: var(--color-brand); }
.savings-calc__save {
  margin: 18px 0 0; font-size: clamp(22px, 4vw, 28px); font-weight: 800;
  color: var(--color-success); font-variant-numeric: tabular-nums;
}
.savings-calc__note {
  font-size: 12.5px; color: var(--color-text-subtle); line-height: 1.5;
  max-width: 520px; margin: 14px auto 0;
}
@media (max-width: 560px) { .savings-calc__compare { gap: 26px; } }
@media (max-width: 420px) { .savings-calc__compare { flex-direction: column; gap: 16px; } }

/* The .price-flat host card is NOT in the components.css white-card re-pin list,
   so by default it flips to a dark surface in dark mode while the .plan / .plan-card
   cards right above it stay white. Re-pin it (and therefore this widget, which
   inherits these tokens) to the same light literals so the whole pricing section is
   consistent in dark mode. Scoped here because .price-flat only appears on the two
   pages that load this stylesheet. Keep the literals in sync with components.css. */
[data-theme="dark"] .price-flat {
  --surface-tint-1:      #FFFFFF;
  --surface-tint-2:      #F0F3FF;
  --surface-tint-3:      #E1E6FF;
  --color-bg:            #F0F3FF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #E1E6FF;
  --color-border:        #D5DAEB;
  --color-border-strong: #B7BFE0;
  --color-text:          #0F0F0F;
  --color-text-muted:    #2E3340;
  --color-text-subtle:   #4B5160;
  color: var(--color-text);
}