/* The matching process, using the original site's charcoal and blue palette. */
.page-how .page-hero .section-lede {max-width:52ch;text-align:center}
.how-content {padding-top:var(--space-6)}
.how-steps {list-style:none;counter-reset:matching;max-width:840px;margin:0 auto;padding:0 0 0 24px}
.how-steps li {position:relative;counter-increment:matching;padding:0 0 24px 64px;border-left:1px solid var(--hairline-strong)}
.how-steps li:last-child {border-color:transparent;padding-bottom:0}
.how-steps li::before {content:"0" counter(matching);position:absolute;z-index:2;left:-23px;top:20px;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--hairline-strong);border-radius:50%;background:#101012;color:var(--slate-400);font-size:12px;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.how-steps li.is-active::before {border-color:var(--brand-bright);color:var(--brand-bright);box-shadow:0 0 0 6px rgba(76,141,255,.08)}
.how-step__trigger {position:relative;display:block;width:100%;padding:20px 56px 20px 24px;background:rgba(255,255,255,.025);border:1px solid transparent;border-radius:var(--radius);text-align:left;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.how-step__trigger:hover {background:rgba(255,255,255,.045);transform:translateX(4px)}
.how-steps li.is-active .how-step__trigger {background:rgba(76,141,255,.075);border-color:rgba(76,141,255,.3)}
.how-steps strong {display:block;font-family:var(--font-title);font-size:clamp(20px,2vw,25px);font-weight:600;line-height:1.3;color:var(--slate-100);margin-bottom:12px}
.how-steps span {display:block;color:var(--slate-300);font-size:clamp(16px,1.45vw,18px);line-height:1.65;max-width:58ch;max-height:0;opacity:0;overflow:hidden;margin-top:-12px;transition:max-height var(--dur) var(--ease),opacity var(--dur-fast) var(--ease),margin-top var(--dur) var(--ease)}
.how-steps li.is-active span {max-height:12rem;opacity:1;margin-top:0}
.how-assurances {max-width:920px;margin:80px auto 48px;padding-top:48px;border-top:1px solid var(--hairline)}
.how-assurances .section-title {text-align:center;margin-bottom:40px}
.page-how .assure p {text-align:left;hyphens:none;-webkit-hyphens:none}
.how-footnote {margin-top:20px;color:var(--slate-400);font-size:var(--text-xs)}
@media(max-width:620px) {.how-steps {padding-left:18px}.how-steps li {padding-left:30px}.how-step__trigger {padding:17px 46px 17px 16px}.how-assurances {margin-top:56px}.how-steps span {font-size:16px}.how-steps li::before {left:-18px;width:34px;height:34px;top:20px}}
