.payback_wrap {
  --ink: #030303;
  --red: #fe3c18;
  --white: #ffffff;
  --mute: rgba(255, 255, 255, 0.58);
  --line: rgba(255, 255, 255, 0.16);
  --sans: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
  --dot: 'Doto', ui-monospace, monospace;
  --gut: clamp(16px, 2.2vw, 40px);
  position: relative;
  z-index: 3;
  margin-top: -100vh;
  color: var(--white);
  font-family: var(--sans);
}
.payback_wrap .payback_contain { position: relative; height: 220vh; }
.payback_wrap .payback_stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); clip-path: inset(100% 0 0 0); }
.payback_wrap .payback_stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--edge, 0)); }

.payback_wrap .payback_title { position: absolute; left: var(--gut); top: calc(6rem + 2vh); margin: 0; font-weight: 400; font-size: clamp(2.6rem, 5.4vw, 6.4rem); line-height: 0.9; letter-spacing: -0.045em; }
.payback_wrap .payback_title_b { font-family: var(--dot); font-weight: 800; letter-spacing: -0.02em; color: var(--red); }

.payback_wrap .payback_meter { position: absolute; left: var(--gut); right: var(--gut); top: 50%; transform: translateY(-58%); }
.payback_wrap .payback_big { margin: 0; display: flex; align-items: flex-end; gap: 2vw; }
.payback_wrap .payback_big_v { font-family: var(--dot); font-weight: 900; font-size: clamp(8rem, 27vw, 30rem); line-height: 0.78; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.payback_wrap .payback_big_k { padding-bottom: 1.6vw; font-size: clamp(1.1rem, 1.8vw, 2rem); line-height: 1.05; max-width: 8ch; }
.payback_wrap .payback_track { position: relative; height: 1px; margin-top: 2.4rem; background: var(--line); }
.payback_wrap .payback_track_fill { position: absolute; left: 0; top: -1px; height: 3px; width: 33%; background: var(--red); transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.payback_wrap .payback_track_mark { position: absolute; top: 0.6rem; transform: translateX(-50%); color: var(--mute); font-size: 0.8rem; white-space: nowrap; }
.payback_wrap .payback_track_mark:first-of-type { transform: none; }
.payback_wrap .payback_track_mark:last-of-type { transform: translateX(-100%); }

.payback_wrap .payback_inputs { position: absolute; left: var(--gut); bottom: var(--gut); width: min(44rem, 50vw); display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 2rem; }
.payback_wrap .payback_field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.25rem 1rem; }
.payback_wrap .payback_k { color: var(--mute); font-size: 0.85rem; }
.payback_wrap .payback_v { font-family: var(--dot); font-weight: 800; font-size: 1.3rem; text-align: right; }
.payback_wrap .payback_range { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
.payback_wrap .payback_range::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(to right, var(--white) var(--p), var(--line) var(--p)); }
.payback_wrap .payback_range::-moz-range-track { height: 1px; background: linear-gradient(to right, var(--white) var(--p), var(--line) var(--p)); }
.payback_wrap .payback_range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; margin-top: -11px; background: var(--red); border: 0; border-radius: 2px; }
.payback_wrap .payback_range::-moz-range-thumb { width: 14px; height: 22px; background: var(--red); border: 0; border-radius: 2px; }
.payback_wrap .payback_range:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }

.payback_wrap .payback_results { position: absolute; right: var(--gut); top: calc(6rem + 2vh); margin: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 1.2rem 3rem; text-align: right; }
.payback_wrap .payback_res_k { color: var(--mute); font-size: 0.85rem; max-width: 15ch; margin-left: auto; }
.payback_wrap .payback_res_v { margin: 0.3rem 0 0; font-size: clamp(1.8rem, 2.8vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; }
.payback_wrap .payback_btn { position: absolute; right: var(--gut); bottom: calc(var(--gut) + 2.6rem); display: inline-flex; align-items: center; height: 3.6rem; padding: 0 2rem; border-radius: 99px; background: var(--red); color: var(--white); text-decoration: none; font-size: 1.1rem; }
.payback_wrap .payback_note { position: absolute; right: var(--gut); bottom: var(--gut); margin: 0; max-width: 46ch; color: var(--mute); font-size: 0.75rem; text-align: right; }

@media (max-width: 991px) {
  .payback_wrap .payback_results { grid-template-columns: 1fr; gap: 0.7rem; }
  .payback_wrap .payback_inputs { left: var(--gut); right: var(--gut); width: auto; bottom: calc(var(--gut) + 5.4rem); }
  .payback_wrap .payback_btn { left: var(--gut); right: auto; bottom: calc(var(--gut) + 0.6rem); height: 3.2rem; }
  .payback_wrap .payback_note { left: calc(var(--gut) + 17rem); right: var(--gut); text-align: left; bottom: calc(var(--gut) + 0.6rem); }
}
@media (max-width: 767px) {
  .payback_wrap .payback_contain { height: 240vh; }
  .payback_wrap .payback_title { top: 5.2rem; font-size: 2.4rem; }
  .payback_wrap .payback_results { top: 8.6rem; left: var(--gut); right: var(--gut); grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; text-align: left; }
  .payback_wrap .payback_res_k { margin-left: 0; }
  .payback_wrap .payback_res:nth-child(n + 3) { display: none; }
  .payback_wrap .payback_res_v { font-size: 1.5rem; }
  .payback_wrap .payback_meter { top: 15.6rem; transform: none; }
  .payback_wrap .payback_big_v { font-size: 34vw; }
  .payback_wrap .payback_big_k { font-size: 1rem; }
  .payback_wrap .payback_track { margin-top: 1.4rem; }
  .payback_wrap .payback_inputs { width: auto; right: var(--gut); bottom: calc(var(--gut) + 8.8rem); gap: 0.15rem; grid-template-columns: 1fr; }
  .payback_wrap .payback_k { font-size: 0.78rem; }
  .payback_wrap .payback_v { font-size: 1rem; }
  .payback_wrap .payback_range { height: 18px; }
  .payback_wrap .payback_btn { left: var(--gut); right: var(--gut); bottom: calc(var(--gut) + 3.6rem); height: 3rem; justify-content: center; }
  .payback_wrap .payback_note { left: var(--gut); text-align: left; font-size: 0.65rem; bottom: var(--gut); }
}