/* "What this would cost you elsewhere" comparison. Layout/typography are
   tone-agnostic; colours live under .light / .dark scopes (mirroring
   proof-stats) so the same component reads correctly on cream (/pricing) and
   on green-deep (homepage). Marketing token convention: --c-* colours,
   unprefixed --space-/--fs-/--font-* scale. */

.value-anchor_list__MUVdp {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.value-anchor_item__rqu9p {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid;
}

.value-anchor_item__rqu9p:first-child {
  border-top: none;
}

.value-anchor_num__IIycc {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.value-anchor_body__POLui {
  min-width: 0;
}

.value-anchor_label__UcKna {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  margin: 0;
}

.value-anchor_source__qVOl4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--dur-fast, 120ms) ease;
}

.value-anchor_price__Jkki_ {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  text-decoration: line-through;
  white-space: nowrap;
}

.value-anchor_total__mS8qw {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid;
}

.value-anchor_totalLabel__n8tz_ {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
}

.value-anchor_totalWas__CITCK {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  text-decoration: line-through;
}

.value-anchor_totalNow__w38RH {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 500;
}

/* Smaller "/month ($199/year)" so the annual figure reads clearly without
   dominating the big monthly number it sits beside. */
.value-anchor_totalUnit__Yska8 {
  font-size: var(--fs-md);
  font-weight: 400;
}

.value-anchor_footnote__TUoKK {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.5;
  margin: var(--space-4) 0 0;
  opacity: 0.7;
}

/* ── Tone: dark (homepage, on green-deep). Preserves the current look. ── */
.value-anchor_dark__0Y0F4 .value-anchor_item__rqu9p {
  border-top-color: var(--c-border-dark, rgba(245, 240, 234, 0.12));
}

.value-anchor_dark__0Y0F4 .value-anchor_num__IIycc,
.value-anchor_dark__0Y0F4 .value-anchor_source__qVOl4,
.value-anchor_dark__0Y0F4 .value-anchor_price__Jkki_,
.value-anchor_dark__0Y0F4 .value-anchor_totalWas__CITCK,
.value-anchor_dark__0Y0F4 .value-anchor_footnote__TUoKK {
  color: var(--c-text-mute);
}

.value-anchor_dark__0Y0F4 .value-anchor_label__UcKna,
.value-anchor_dark__0Y0F4 .value-anchor_totalLabel__n8tz_ {
  color: var(--c-text);
}

.value-anchor_dark__0Y0F4 .value-anchor_source__qVOl4:hover {
  color: var(--on-dark-accent-warm);
}

.value-anchor_dark__0Y0F4 .value-anchor_totalNow__w38RH {
  color: var(--c-warm-amber);
}

.value-anchor_dark__0Y0F4 .value-anchor_total__mS8qw {
  border-top-color: color-mix(in srgb, var(--c-gold) 50%, transparent);
}

/* ── Tone: light (on cream, /pricing) ──
   The total "now" uses --c-green-dark (AA on cream), not --c-warm-amber which
   fails AA at this size on a light surface (same reasoning as proof-stats). */
.value-anchor_light__s2Ifl .value-anchor_item__rqu9p,
.value-anchor_light__s2Ifl .value-anchor_total__mS8qw {
  border-top-color: var(--c-border);
}

.value-anchor_light__s2Ifl .value-anchor_num__IIycc,
.value-anchor_light__s2Ifl .value-anchor_source__qVOl4,
.value-anchor_light__s2Ifl .value-anchor_price__Jkki_,
.value-anchor_light__s2Ifl .value-anchor_totalWas__CITCK,
.value-anchor_light__s2Ifl .value-anchor_footnote__TUoKK {
  color: var(--c-light-mute);
}

.value-anchor_light__s2Ifl .value-anchor_label__UcKna,
.value-anchor_light__s2Ifl .value-anchor_totalLabel__n8tz_ {
  color: var(--c-light-head);
}

.value-anchor_light__s2Ifl .value-anchor_source__qVOl4:hover,
.value-anchor_light__s2Ifl .value-anchor_totalNow__w38RH {
  color: var(--c-green-dark);
}