/* The debt-free date (templates/site/hooks/_debt_date.html, assets/lp/js/hooks/debt_date.js). One hero,
   the month; the sliders are the quality standard's iOS slider (a 4px track, a 28px thumb, the value
   rising over the thumb while it moves). The card lays itself out by its own width (a container query).
   Palette: the brand blue family and white at opacities; red only for "the balance never goes down",
   green only for the plan's last line, the day it is paid off. */

.dd { container-type: inline-size; }
.dd-card { position: relative; border-radius: 24px; padding: 32px 36px; }
.dd-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "hero" "controls" "plan" "fine"; gap: 24px; }
.dd-intro { grid-area: intro; }
.dd-hero { grid-area: hero; }
.dd-controls { grid-area: controls; }
.dd-plan { grid-area: plan; min-width: 0; }
.dd-plan:empty { display: none; }
.dd-fine { grid-area: fine; margin: 0; }

.dd-kicker { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 5px 14px 5px 12px; margin: 0 0 16px; border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 15px; line-height: 20px; color: #FFFFFF; }
.dd-kicker svg { width: 16px; height: 16px; color: var(--bx-peri); flex: none; }
.dd-intro .bxc-h2 { margin: 0 0 10px; }

/* ---------- the hero: the month ---------- */
.dd-hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 232px; padding: 26px 28px; border-radius: 20px;
    background: radial-gradient(110% 90% at 50% 0%, rgba(38, 75, 255, .24) 0%, rgba(38, 75, 255, 0) 70%), rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .28), inset 0 4px 20px rgba(255, 255, 255, .06);
    transition: box-shadow .3s var(--bx-ease); }
.dd-label { font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.dd-month { display: block; margin-top: 6px; min-height: 60px; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 56px; line-height: 60px;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #FFFFFF; white-space: nowrap; }
/* the month never runs past the hero: the longest one ("September 2031") is about 7.2 times the type size, so the size
   follows the room the hero has (container query units, capped at the design size; the line box does not move) */
.dd-month { font-size: min(56px, calc((100cqi - 128px) / 7.3)); }
.dd-when { display: block; margin-top: 6px; min-height: 22px; font-size: 15px; line-height: 22px; color: var(--bx-text-2); text-wrap: balance; }
.dd-plus { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding-top: 16px; min-height: 61px; border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 15px; line-height: 22px; color: var(--bx-text-2); }
.dd-plus b { font-weight: 500; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.dd-plus__ico { width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: -1px;
    color: var(--bx-peri); background: rgba(38, 75, 255, .18); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .35); }
.dd-plus__ico svg { width: 14px; height: 14px; }
.dd-plus__i { display: flex; }
.dd-plus__i--alert, .dd-plus__i--doc { display: none; }
.dd-plus__txt { flex: 1; min-width: 0; }
.dd-sk-month { display: block; width: 240px; max-width: 100%; height: 48px; margin-top: 6px; border-radius: 12px; }
.dd-sk-line { display: block; width: 60%; height: 14px; margin-top: 4px; border-radius: 7px; }
.dd-sk-line--wide { width: 88%; }

/* the serious state: the payment does not cover the interest */
.dd.is-never .dd-hero { box-shadow: inset 0 0 0 1px rgba(255, 66, 66, .42), inset 0 4px 20px rgba(255, 255, 255, .05);
    background: radial-gradient(110% 90% at 50% 0%, rgba(255, 66, 66, .12) 0%, rgba(255, 66, 66, 0) 70%), rgba(255, 255, 255, .03); }
.dd.is-never .dd-month, .dd.is-never .dd-when { color: #FF4242; }
.dd.is-empty .dd-month { color: rgba(255, 255, 255, .5); }
/* stuck: even $50 more does not cover the interest, so the line under the month is a warning, not a tip */
.dd.is-stuck .dd-plus__i--plus { display: none; }
.dd.is-stuck .dd-plus__i--alert { display: flex; }
.dd.is-stuck .dd-plus__ico { width: 24px; height: 24px; color: #FF4242; background: rgba(255, 66, 66, .12); box-shadow: inset 0 0 0 1px rgba(255, 66, 66, .35); }
.dd.is-stuck .dd-plus__ico svg { width: 16px; height: 16px; }
/* no rate yet: the line under the month says where to find it, beside a statement; and when $50 would change
   nothing (one payment), the line is the interest itself, beside the same statement, not a plus */
.dd.is-empty .dd-plus__i--plus, .dd.is-flat .dd-plus__i--plus { display: none; }
.dd.is-empty .dd-plus__i--doc, .dd.is-flat .dd-plus__i--doc { display: flex; }

/* ---------- the controls ---------- */
.dd-controls { display: flex; flex-direction: column; gap: 22px; }
/* the small title: on a phone the month sits above the sliders, so once it scrolls away under the site header a
   small copy rides under that header while a slider moves, and for a moment after (the large title and the small
   one, as iOS does it). It takes no room: a sticky line of no height at the top of the card, the bar
   hanging from it. Hidden where the month sits beside the sliders. */
.dd-pin { display: none; }
.dd-pin__bar { position: absolute; left: 0; right: 0; top: 0; width: max-content; max-width: 100%; margin: 0 auto; display: flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(9, 12, 33, .92); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .45), 0 14px 30px -12px rgba(0, 0, 0, .85);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none;
    transition: opacity .25s var(--bx-ease), transform .3s var(--bx-ease); }
.dd-pin__k { font-size: 13px; line-height: 18px; color: var(--bx-text-2); }
.dd-pin__v { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 16px; line-height: 20px; font-variant-numeric: tabular-nums; color: #FFFFFF; white-space: nowrap; }
/* with no rate there is no month to carry, so the bar stays away while the APR is being typed */
.dd.is-pinned.is-live:not(.is-empty) .dd-pin__bar { opacity: 1; transform: none; }
.dd.is-never .dd-pin__v { color: #FF4242; }
.dd-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dd-field__top label, .dd-field__top > span { font-size: 15px; line-height: 20px; color: var(--bx-text-2); }
.dd-val { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 22px; line-height: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.dd-field__mm { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--bx-text-3); }

.dd-range { --p: .5; position: relative; height: 44px; display: flex; align-items: center; }
.dd-range input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent;
    cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.dd-range input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, #264BFF 0, #8585E9 calc(14px + (100% - 28px) * var(--p)), rgba(255, 255, 255, .16) calc(14px + (100% - 28px) * var(--p))); }
.dd-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -12px; border: none; border-radius: 50%;
    background: #FFFFFF; box-shadow: 0 2px 7px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .06), 0 0 18px rgba(38, 75, 255, .5);
    transition: transform .25s var(--bx-ease), box-shadow .3s var(--bx-ease); }
.dd-range input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 2px 7px rgba(0, 0, 0, .35), 0 0 0 6px rgba(133, 133, 233, .18), 0 0 18px rgba(38, 75, 255, .5); }
.dd-range.is-drag input[type="range"]::-webkit-slider-thumb { transform: scale(1.12); }
.dd-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(133, 133, 233, .6), 0 2px 7px rgba(0, 0, 0, .35); }
.dd-range input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.dd-range input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #264BFF, #8585E9); }
.dd-range input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: none; border-radius: 50%; background: #FFFFFF;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .35), 0 0 18px rgba(38, 75, 255, .5); }
.dd-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(133, 133, 233, .6), 0 2px 7px rgba(0, 0, 0, .35); }

/* the value rides over the thumb while it moves. It slides across the thumb as the thumb travels (its anchor goes from
   its left edge at the start of the track to its right edge at the end), so at $500 or $100,000 it stays inside the
   track instead of hanging half off the card, and its point keeps pointing at the thumb */
.dd-bubble { position: absolute; left: calc(14px + (100% - 28px) * var(--p)); bottom: calc(100% - 2px); z-index: 2; padding: 7px 10px; border-radius: 10px;
    background: #FFFFFF; color: #0B1030; font: 600 14px/1 var(--bx-font-numbers); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); opacity: 0; transform: translate(calc(var(--p) * -100%), 6px) scale(.92);
    transform-origin: calc(var(--p) * 100%) 100%; transition: opacity .2s var(--bx-ease), transform .3s var(--bx-ease); }
.dd-bubble::after { content: ""; position: absolute; left: clamp(12px, calc(var(--p) * 100%), calc(100% - 12px)); top: 100%; width: 9px; height: 9px; margin-top: -5px;
    border-radius: 2px; background: #FFFFFF; transform: translateX(-50%) rotate(45deg); }
.dd-range.is-drag .dd-bubble, .dd-range.is-key .dd-bubble { opacity: 1; transform: translate(calc(var(--p) * -100%), 0) scale(1); }
/* while the bubble is up, the row it rises into steps back: the number has lifted onto the thumb, and the bubble never
   lands on the label or on its own number at either end of the track */
.dd-field__top { transition: opacity .2s var(--bx-ease); }
.dd-field:has(.dd-range.is-drag) .dd-field__top, .dd-field:has(.dd-range.is-key) .dd-field__top { opacity: 0; }

/* the APR as the kit's iOS segmented control, its highlight sliding to the pressed segment */
.dd-seg { position: relative; margin-top: 10px; }
.dd-seg::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: calc(3px + var(--i, 1) * ((100% - 14px) / 5 + 2px)); width: calc((100% - 14px) / 5);
    border-radius: 9px; background: rgba(255, 255, 255, .14); box-shadow: 0 3px 8px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(255, 255, 255, .2);
    transition: left .35s var(--bx-ease); pointer-events: none; }
.dd-seg button { position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.dd-seg button:hover { color: #FFFFFF; }
.dd-seg button:active { transform: scale(.96); transition: transform 75ms var(--bx-ease); }
.dd-seg button[aria-pressed="true"] { background: transparent; box-shadow: none; color: #FFFFFF; }
.dd-seg button:focus-visible { outline: 2px solid var(--bx-peri); outline-offset: -2px; }

/* the hero's chart: the balance falling to zero, the dashed one with $50 more */
.dd-chart { position: relative; margin-top: 18px; }
.dd-chart__svg { display: block; width: 100%; height: 84px; overflow: visible; }
.dd-sk-chart { position: absolute; left: 0; right: 0; top: 0; height: 84px; border-radius: 12px; }
.dd.is-ready .dd-sk-chart { display: none; }
.dd-area { fill: url(#dd-g-area); }
.dd-line { fill: none; stroke: url(#dd-g-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dd-line2 { fill: none; stroke: #8585E9; stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; opacity: .85; }
.dd-end { fill: #7BD394; stroke: #0D1234; stroke-width: 2; }
.dd-end2 { fill: #8585E9; stroke: #0D1234; stroke-width: 2; }
.dd.is-never .dd-area { fill: url(#dd-g-hot); }
.dd.is-never .dd-line { stroke: #FF4242; }
.dd.is-never .dd-end { fill: #FF4242; }
.dd.is-empty .dd-chart__svg, .dd.is-empty .dd-chart__ax { visibility: hidden; }
.dd-chart__ax { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--bx-text-3); font-variant-numeric: tabular-nums; }
/* where the rate it opens on came from: one quiet line under the chips, never louder than the chips */
.dd-apr-note { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0; font-size: 12px; line-height: 18px; color: var(--bx-text-3); text-wrap: pretty; }
.dd-apr-note svg { width: 14px; height: 14px; margin-top: 2px; flex: none; color: rgba(255, 255, 255, .38); }
.dd-apr-note a { color: var(--bx-peri); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(185, 195, 255, .45); white-space: nowrap; }

.dd-other { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; max-width: 240px; }
.dd-other label { font-size: 14px; line-height: 20px; color: var(--bx-text-2); }
.dd-other__row { position: relative; display: flex; align-items: center; }
.dd-other__row .bxc-input { padding-right: 44px; font-family: var(--bx-font-numbers); font-variant-numeric: tabular-nums; }
.dd-other__row span { position: absolute; right: 20px; font-size: 16px; color: var(--bx-text-2); pointer-events: none; }

/* ---------- the plan, behind the gate ---------- */
.dd-plan { animation: dd-rise .4s var(--bx-ease) both; }
@keyframes dd-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.dd-planhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.dd-planhead b { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 20px; line-height: 24px; }
.dd-planhead span { font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.dd-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.dd-stat { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--bx-line-8); min-width: 0; }
.dd-stat b { display: block; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 26px; line-height: 32px; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-stat span { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--bx-text-2); }
.dd-stat--hot b { color: #FF4242; }
.dd-tablewrap { max-height: 340px; overflow: auto; overscroll-behavior: contain; border-radius: 16px; background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--bx-line-8); outline: none; }
.dd-tablewrap:focus-visible { box-shadow: inset 0 0 0 1.5px var(--bx-peri); }
.dd-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dd-table th { position: sticky; top: 0; z-index: 1; padding: 12px 18px; background: #0D1234; text-align: right; font: 400 12px/16px var(--bx-font);
    letter-spacing: .02em; color: var(--bx-text-3); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); }
.dd-table td { padding: 11px 18px; text-align: right; font-family: var(--bx-font-numbers); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .74);
    border-top: 1px solid rgba(255, 255, 255, .05); white-space: nowrap; }
.dd-table th:first-child, .dd-table td:first-child { text-align: left; }
.dd-table td:last-child { color: #FFFFFF; font-weight: 500; }
.dd-table tr.is-year td:first-child { color: #FFFFFF; }
.dd-table tr.is-done td:last-child { color: #7BD394; }
.dd-more { margin: 10px 2px 0; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.dd-next { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 16px 16px 16px 20px; border-radius: 16px;
    background: rgba(38, 75, 255, .10); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .35); }
.dd-next__txt { flex: 1; min-width: 0; }
.dd-next__txt b { display: block; font-weight: 500; font-size: 16px; line-height: 22px; }
.dd-next__txt i { display: block; margin-top: 2px; font-style: normal; font-size: 14px; line-height: 20px; color: var(--bx-text-2); }
.dd-next .btn { flex: none; }

/* ---------- wide: the words and the controls on the left, the month beside them ---------- */
@container (min-width: 900px) {
    .dd-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "intro hero" "controls hero" "plan plan" "fine fine"; column-gap: 48px; row-gap: 28px; }
    .dd-hero { align-self: stretch; min-height: 0; padding: 32px; }
    .dd-month { font-size: 60px; line-height: 64px; min-height: 64px; }
    /* the hero is .92 of the two columns: on a laptop's narrower container the month still fits its line */
    .dd-month { font-size: min(60px, calc(((100cqi - 120px) * .46 - 64px) / 7.3)); }
}
@container (max-width: 899px) {
    .dd-pin { display: block; position: sticky; top: 76px; z-index: 4; height: 0; }
}
@container (max-width: 560px) {
    .dd-card { padding: 22px 18px 24px; }
    .dd-grid { gap: 20px; }
    .dd-hero { min-height: 212px; padding: 20px; }
    .dd-month { font-size: 44px; line-height: 50px; min-height: 50px; }
    .dd-month { font-size: min(44px, calc((100cqi - 76px) / 7.3)); }
    .dd-sk-month { height: 40px; margin-top: 5px; }
    /* on a phone the three numbers are one inset grouped list, label left and number right */
    .dd-sum { grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
    .dd-stat { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-radius: 0; background: none; box-shadow: none; }
    .dd-stat + .dd-stat { box-shadow: inset 0 1px 0 var(--bx-line-8); }
    .dd-stat b { font-size: 18px; line-height: 24px; }
    .dd-stat span { margin: 0; font-size: 14px; }
    .dd-planhead { flex-direction: column; align-items: flex-start; gap: 2px; }
    .dd-chart__svg, .dd-sk-chart { height: 68px; }
    .dd-table th, .dd-table td { padding-left: 12px; padding-right: 12px; }
    .dd-next { flex-direction: column; align-items: stretch; padding: 16px; }
    .dd-next .btn { width: 100%; }
    .dd-other { max-width: none; }
}
/* a phone (up to about 430px): the month sits above the sliders, so the lines under it keep the room of their longest
   state (two lines for the when, three for the $50 line). The hero is the same height loading, dragging, at "Never"
   and at one payment, and the slider under the thumb never moves */
@container (max-width: 400px) {
    .dd-when { min-height: 44px; }
    .dd-plus { min-height: 83px; }
}
@container (max-width: 300px) {
    .dd-plus { min-height: 105px; }
}

@media (prefers-reduced-motion: reduce) {
    .dd-hero, .dd-bubble, .dd-range input[type="range"]::-webkit-slider-thumb, .dd-seg::before, .dd-seg button, .dd-pin__bar, .dd-field__top { transition: none; }
    .dd-plan { animation: none; }
}