/* How it works (hw-). The title, then the five steps in plain flow in columns 1 to 4, with the stage on ink beside them in columns 6 to 12. The stage stays beside the steps until the last payment, then scrolls away with them. Then a plain edge to the page's short ending, and the same final ask as Home.
   One 12-column grid with a 24px gutter, shared with the header. Each step's row is as tall as the scrolling it lasts for (--s, in hundredths of a screen), so a step goes live as it arrives. With no script, reduced motion, or a very short window, the rows sit close and the stage shows the finished loan. */

html:has(.page[data-page="how-it-works.html"]){scroll-behavior:auto}
.hw-pin{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.hw-hero{padding-top:clamp(40px,5.6vh,56px);padding-bottom:clamp(24px,4.4vh,44px)}
.hw-hero .h1{margin:0}

.hw-ld{margin:16px 0 0;max-width:690px;color:#3e4656;text-wrap:pretty}

/* the steps and the stage */
.hw-run{position:relative;background:#fff;overflow-x:clip}
.hw-pin{--hw-top:max(96px,calc((100vh - 780px) / 2));--off:40vh;--tail:60vh;align-items:start}

/* the steps: a big number, who does what, then the sums. Live is ink, the others rest in grey and stay readable */
.hw-l{grid-column:1 / 5;min-width:0}
.hw-chs{margin:0;padding:0;list-style:none}
.hw-ch{padding-bottom:64px}
.hw-ch:first-child{padding-top:var(--hw-top)}
.hw-n{display:block;margin-bottom:16px;color:var(--c);transition:color .6s ease}
.hw-t{margin:0 0 8px;transition:color .6s ease}
.hw-tx{margin:0;color:#3e4656;text-wrap:pretty;transition:color .6s ease}
.hw-on .hw-ch{box-sizing:border-box;padding-bottom:0;height:calc(var(--s) * 1vh)}
.hw-on .hw-ch:first-child{height:calc(var(--s) * 1vh + var(--off))}
.hw-on .hw-ch:last-child{height:calc(var(--s) * 1vh + var(--tail))}
.hw-on .hw-ch:last-child .hw-cw{position:sticky;top:var(--hw-top)}
.hw-on .hw-ch:not(.hw-live) :is(.hw-n,.hw-t,.hw-tx){color:var(--muted)}
.hw-on .hw-live .hw-t{color:var(--ink)}

/* the stage: everyone, every payment, what is owed. Its words start on column 6, and its flat ink starts on column 5 and runs off the right edge */
.hw-stage{grid-column:6 / -1;position:relative;min-width:0;isolation:isolate;color:#fff;padding:var(--hw-top) 0 clamp(24px,5vh,64px)}
.hw-stage::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(-100% / 7 - 3.43px);right:-100vw;background:var(--g-ink)}
.hw-si{display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,7vh,72px);height:100%}
@media (min-width:1101px) and (min-height:600px){.hw-stage{position:sticky;top:0;height:100vh}}
.hw-dia{--hw-n:clamp(84px,7.8vw,112px);position:relative;display:grid;grid-template-columns:var(--hw-n) minmax(120px,1fr) var(--hw-n) 7% var(--hw-n) 5% var(--hw-n);grid-template-rows:clamp(48px,8.4vh,84px) clamp(64px,12.6vh,124px) clamp(52px,9.6vh,96px);padding-bottom:62px}
.hw-lines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hw-p{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1;transition:stroke .6s ease}
.hw-h{fill:rgba(255,255,255,.5);stroke:none;transition:fill .6s ease}
.hw-p.on{stroke:#fff;stroke-width:1.5}
.hw-h.on{fill:#fff}
.hw-p.ghost{stroke:rgba(255,255,255,.14)}
.hw-h.ghost{fill:rgba(255,255,255,.2)}
.hw-nd{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px 6px;background:var(--g-ink);border:1px solid rgba(255,255,255,.42);color:#fff;font:500 var(--t-small)/1.2 var(--sans);text-align:center;transition:background-color .6s ease,border-color .6s ease,color .6s ease}
@media (min-width:1300px){.hw-nd{padding:4px 0;white-space:nowrap}}
.hw-nd.to{border-color:#fff}
.hw-nd.on{background:#fff;border-color:#fff;color:var(--ink)}
.hw-nd.off{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.62)}
.hw-nd-f{grid-column:3;grid-row:1}
.hw-nd-l{grid-column:1;grid-row:3}.hw-nd-c{grid-column:3;grid-row:3}.hw-nd-r{grid-column:5;grid-row:3}.hw-nd-u{grid-column:7;grid-row:3}
.hw-mv{position:absolute;z-index:1;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;background:#58bdf0;visibility:hidden}
.hw-mv.info{background:var(--g-ink);border:2px solid #58bdf0}
.hw-lab{position:absolute;z-index:3;left:0;top:0;font:500 var(--t-small)/1.25 var(--sans);color:rgba(255,255,255,.72);white-space:nowrap;pointer-events:none;transition:color .6s ease,opacity .6s ease}
.hw-lab.on{color:#fff}
.hw-lab[data-k="repay"]{white-space:normal;text-align:center;text-wrap:pretty}
.hw-lab[data-k="ask"],.hw-lab[data-k="price"],.hw-lab[data-k="numbers"]{opacity:0;color:#fff}
.hw-lab[data-k="ask"].on,.hw-lab[data-k="price"].on,.hw-lab[data-k="numbers"].on{opacity:1}

/* under the diagram: the two figures that stay on screen, the month, and one square for each monthly payment. Empty until the loan is made, then owed, then paid. Paid back sits at the left over the paid squares, still owed at the right over the owed ones, both on the row's own edges */
.hw-read{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin:0}
.hw-read > div:last-child{text-align:right}
.hw-read dt{line-height:1.3;color:rgba(255,255,255,.78);margin-bottom:4px}
.hw-read dd{margin:0;white-space:nowrap;color:#fff}
.hw-mo{margin:20px 0 8px;min-height:1.5em;font:500 var(--t-body)/1.5 var(--sans);color:#58bdf0}
.hw-pay{display:grid;grid-template-columns:repeat(36,minmax(0,1fr));gap:3px}
.hw-pay i{display:block;height:clamp(20px,4vh,36px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);transition:background-color .5s ease,box-shadow .5s ease;transition-delay:calc(var(--i) * 18ms)}
.hw-pay.made i{background:#5f7fe6;box-shadow:none}
.hw-pay.made i.paid{background:#fff;transition-delay:0s}

/* the page's two ways on, at the end of the last step: the price tool and the failure story on Lenders. They stay cobalt while the step's words dim */
.hw-ls{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:20px 0 0}
.hw-ls .tlink:focus-visible{outline-color:var(--c);box-shadow:none}

@media (max-width:720px){.hw-hero{padding-bottom:24px}}
/* a phone or small tablet: the stage on top, and the steps pass under it */
@media (max-width:1100px){
 .hw-pin{display:flex;flex-direction:column;--off:16px;--tail:calc(100vh - var(--hw-sh,420px) - 16px)}
 .hw-l{order:2;align-self:stretch}
 /* the stage leaves as soon as the last payment is made, ahead of the last step, so that step never slides under it */
 .hw-on .hw-stage{margin-bottom:calc(100vh - var(--hw-sh,420px))}
 .hw-on .hw-l{margin-top:calc(var(--hw-sh,420px) - 100vh)}
 .hw-stage{order:1;align-self:stretch;margin-inline:calc(var(--gl) * -1);padding:clamp(72px,9vh,80px) var(--gl) 14px;background:var(--g-ink)}
 .hw-stage::before{display:none}
 .hw-on .hw-stage{position:sticky;top:0;z-index:2}
 .hw-si{height:auto;gap:8px;justify-content:flex-start}
 .hw-dia{grid-template-columns:.9fr 1.05fr .85fr 1.2fr;column-gap:8px;grid-template-rows:38px 14px 46px;padding-bottom:42px}
 .hw-nd{padding:2px 0;line-height:1.15}
 .hw-nd-f{grid-column:2;grid-row:1}
 .hw-nd-l{grid-column:1;grid-row:3}.hw-nd-c{grid-column:2;grid-row:3}.hw-nd-r{grid-column:3;grid-row:3}.hw-nd-u{grid-column:4;grid-row:3}
 .hw-lab{opacity:0;white-space:nowrap;transition:none}
 .hw-lab.on{opacity:1;color:#fff}
 .hw-lab[data-k="ask"].on{opacity:0}
 .hw-lab[data-k="repay"]{white-space:nowrap;text-align:left}
 .hw-read{column-gap:16px}
 .hw-read dt{margin-bottom:0}
 .hw-read dd{font-size:var(--t-sub);line-height:1.2;letter-spacing:-.02em}
 .hw-mo{margin:6px 0 4px}
 .hw-pay{gap:2px}
 .hw-pay i{height:14px}
 .hw-ch{padding-top:40px;padding-bottom:0}
 .hw-ch:first-child{padding-top:24px}
 .hw-on .hw-ch{padding-top:16px;height:auto;min-height:calc(var(--s) * .62vh)}
 .hw-on .hw-ch:first-child{padding-top:16px}
 .hw-on .hw-ch:last-child .hw-cw{top:calc(var(--hw-sh,420px) + 16px)}
 .hw-n{margin-bottom:8px}
}
/* a short window still holds the whole stage */
@media (min-width:1101px) and (max-height:720px){.hw-pin{--hw-top:72px}.hw-si{gap:20px}.hw-mo{margin-top:12px}}
@media (max-width:359px){.hw-dia{grid-template-columns:.85fr 1.1fr .85fr 1.25fr;column-gap:4px}.hw-nd{letter-spacing:-.01em}}
/* whatever the keyboard reaches is already in view */
.rv:focus-within{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
 .hw-p,.hw-h,.hw-nd,.hw-lab,.hw-n,.hw-t,.hw-tx,.hw-pay i{transition:none}
}
@media print{.hw-on .hw-ch,.hw-on .hw-ch:first-child,.hw-on .hw-ch:last-child{height:auto;padding:0 0 24px}.hw-pin{display:block}.hw-stage{display:none}.hw-on .hw-ch:not(.hw-live) :is(.hw-n,.hw-t,.hw-tx){color:var(--ink)}.hw-on .hw-ch:last-child .hw-cw{position:static}}

/* the closing band: a white gap between the stage's ink and the band's, so the two read as two blocks */
/* Round 5: the navy run meets the navy closing band with no white strip between them */
.page .cb.hw-cb{margin-top:0}
/* Round 5: no loan exists in steps 1 and 2, so the paid and owed figures and the payment row wait for step 3 */
.hw-low{transition:opacity .5s var(--m-ease,ease)}
.hw-run:has(.hw-ch.hw-live:is([data-ch="1"],[data-ch="2"])) .hw-low{opacity:0}
/* a phone: the top heading and the band heading never end on one word */
@media (max-width:720px){.page .hw-hero h1.h1,.page .hw-cb .cb-h{text-wrap:balance}}