/* Cost Calculator */
.bel-calc__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; align-items: end; margin-bottom: 64px; }
.bel-calc__head .bel-heading { margin: 0; }
.bel-calc__intro { max-width: 520px; margin: 0 0 24px; }
.bel-calc__body { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin: 0; }
.bel-calc__size-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 26px; color: var(--bel-heading); font: 500 clamp(1.4rem, 2.2vw, 1.75rem)/1.3 var(--bel-font-h); }
.bel-calc__size-val { color: var(--bel-heading); }
.bel-calc__range { --bel-fill: 15%; width: 100%; height: 3px; margin: 0; background: linear-gradient(to right, var(--bel-accent) var(--bel-fill), rgba(30, 30, 30, .16) var(--bel-fill)); border-radius: 2px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.bel-calc__range::-webkit-slider-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--bel-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--bel-accent) 28%, transparent); -webkit-appearance: none; }
.bel-calc__range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--bel-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--bel-accent) 28%, transparent); }
.bel-calc__minmax { display: flex; justify-content: space-between; margin-top: 20px; color: var(--bel-heading); font-size: 15px; }
.bel-calc__hint { margin: 14px 0 0; font-size: 15px; }
.bel-calc__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 30px; margin-top: 50px; }
.bel-calc__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.bel-calc__group.is-inline { grid-column: 1 / -1; }
.bel-calc__legend { margin-bottom: 18px; padding: 0; color: var(--bel-heading); font: 500 23px/1.3 var(--bel-font-h); }
.bel-calc__opts { display: grid; gap: 14px; }
.bel-calc__group.is-inline .bel-calc__opts { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.bel-calc__opt { display: inline-flex; align-items: center; gap: 12px; color: var(--bel-heading); font-size: 17px; cursor: pointer; }
.bel-calc__opt input { position: relative; flex: none; width: 17px; height: 17px; margin: 0; border: 2px solid #b8b8b8; border-radius: 50%; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .2s; }
.bel-calc__opt input:checked { border: 4px solid var(--bel-accent); }
.bel-calc__opt input:focus-visible { outline: 2px solid var(--bel-accent); outline-offset: 2px; }
.bel-calc__card { position: relative; padding: 56px 44px 56px; background: var(--bel-accent); color: var(--bel-on-accent); clip-path: polygon(0 0, calc(100% - 96px) 0, 100% 80px, 100% 100%, 0 100%); }
.bel-calc__card-title { margin: 0 0 18px; color: var(--bel-on-accent); font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.bel-calc__total { margin: 0 0 14px; color: var(--bel-on-accent); font: 600 clamp(2.6rem, 5vw, 4rem)/1.05 var(--bel-font-h); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bel-calc__note { margin: 0; padding-bottom: 32px; border-bottom: 1px solid rgba(30, 30, 30, .22); font-size: 15px; font-weight: 600; }
.bel-calc__lines { margin: 0; padding: 26px 0; border-bottom: 1px solid rgba(30, 30, 30, .22); }
.bel-calc__lines div { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; color: var(--bel-on-accent); font: 600 clamp(1.05rem, 1.6vw, 1.4rem)/1.3 var(--bel-font-h); }
.bel-calc__lines dd { margin: 0; font-variant-numeric: tabular-nums; }
.bel-calc__btn { margin-top: 42px; }
.bel-calc__card .bel-btn--light { --bel-btn-line: rgba(255, 255, 255, .9); }
@media (max-width: 1024px) {
	.bel-calc__head, .bel-calc__body { grid-template-columns: 1fr; gap: 30px; }
	.bel-calc__body { gap: 50px; }
}
@media (max-width: 520px) {
	.bel-calc__groups { grid-template-columns: 1fr; }
	.bel-calc__card { padding: 44px 24px; clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 50px, 100% 100%, 0 100%); }
	.bel-calc__lines div { flex-direction: column; gap: 2px; }
}