.bk-costben { background: #fff; border: 1px solid var(--color-line); border-radius: 1rem; padding: 2.5rem; }

.bk-costben__intro { margin-bottom: 2rem; max-width: 50ch; }
.bk-costben__title { font-family: var(--h2-font-family); margin: 0.5rem 0 0.75rem; color: var(--color-content-heading); }
.bk-costben__subtitle { margin: 0; color: var(--color-content-faded); font-size: 0.95rem; line-height: 1.5; }

.bk-costben__compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; padding: 2rem; background: var(--color-bg-ivory, #F5F1E8); border-radius: 0.75rem; }
.bk-costben__col { text-align: center; padding: 1rem; }
.bk-costben__label { font-size: 0.85rem; letter-spacing: 0.06em;  color: var(--color-content-faded); margin-bottom: 0.75rem; }
.bk-costben__value { font-family: var(--h1-font-family); font-size: 2.4rem; line-height: 1.05; color: var(--color-content-heading); font-variant-numeric: tabular-nums; }
.bk-costben__col--before .bk-costben__value { color: var(--color-content-secondary); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--color-content-secondary) 35%, transparent); }
.bk-costben__col--after  .bk-costben__value { color: var(--color-content-primary); }
.bk-costben__sub { margin-top: 0.5rem; font-size: 0.85rem; color: var(--color-content-faded); }

.bk-costben__arrow { font-family: var(--h1-font-family); font-size: 2rem; color: var(--color-content-secondary); padding: 0 0.5rem; }

.bk-costben__result { margin-top: 2rem; padding: 1.75rem 2rem; background: var(--color-content-primary); color: #fff; border-radius: 0.75rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; }
.bk-costben__result-label { font-size: 0.95rem; opacity: 0.85; }
.bk-costben__result-value { font-family: var(--h1-font-family); font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; grid-column: 1 / 2; }
.bk-costben__result-meta  { grid-column: 2; font-size: 0.85rem; opacity: 0.85; padding: 0.25rem 0.75rem; background: rgba(255,255,255,0.15); border-radius: 999px; align-self: center; }
.bk-costben__result-label { grid-column: 1; grid-row: 1; }
.bk-costben__result-value { grid-column: 1; grid-row: 2; margin-top: 0.25rem; }

.bk-costben__footnote { margin: 1.5rem 0 0; font-size: 0.8rem; color: var(--color-content-faded); line-height: 1.45; }

@media (max-width: 720px) {
	.bk-costben { padding: 1.5rem; }
	.bk-costben__compare { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.5rem; }
	.bk-costben__arrow { transform: rotate(90deg); padding: 0.5rem 0; justify-self: center; }
	.bk-costben__value { font-size: 1.8rem; }
	.bk-costben__result { grid-template-columns: 1fr; text-align: left; }
	.bk-costben__result-value { font-size: 2rem; }
	.bk-costben__result-meta { grid-column: 1; grid-row: 3; justify-self: start; }
}