/* A clockwise cycle on mobile; a linear path with an explicit return on desktop. */
.how-section.cycle-section{padding-block:36px 32px}
.cycle-heading{text-align:center;max-width:740px;margin:0 auto 30px}
.how-section .cycle-heading h2{font-size:1.9375rem;line-height:1.12;max-width:23ch;margin-inline:auto}
.cycle-heading>p{display:flex;align-items:center;justify-content:center;gap:9px;font-size:1rem;line-height:1.5;color:var(--muted);margin-top:14px}
.cycle-heading>p svg{width:24px;height:24px}
.process-cycle{position:relative;max-width:1000px;margin-inline:auto;min-width:0;container:cycle / inline-size}
.cycle-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 32px;max-width:520px;margin:0 auto}
.cycle-steps>li{position:relative;min-width:0;min-height:164px;gap:12px}
.cycle-steps>li::after{content:none!important}
.cycle-steps>li:nth-child(1){grid-column:1;grid-row:1}
.cycle-steps>li:nth-child(2){grid-column:2;grid-row:1}
.cycle-steps>li:nth-child(3){grid-column:2;grid-row:2}
.cycle-steps>li:nth-child(4){grid-column:1;grid-row:2}
.cycle-steps .process-icon{width:64px;height:64px;border-radius:20px}
.cycle-steps .process-icon>svg{width:34px;height:34px}
.cycle-steps .process-icon.agreement{background:var(--green);color:var(--ice);border-color:var(--green)}
.cycle-steps .process-copy{width:100%;min-width:0}
.cycle-steps .process-copy h3{font-size:1.125rem;line-height:1.2;min-height:2.4em;letter-spacing:-.02em;text-wrap:balance}
.cycle-steps .process-copy p{font-size:var(--font-min);line-height:1.4;margin:5px auto 0;min-height:2.8em;max-width:18ch;color:var(--muted)}
.cycle-steps .process-arrow{position:absolute;right:-32px;top:16px;width:32px;height:32px;stroke-width:1.7;color:var(--green);pointer-events:none}
.cycle-steps>li:nth-child(2) .process-arrow{left:calc(50% - 16px);right:auto;top:calc(100% + 10px);transform:rotate(90deg)}
.cycle-steps>li:nth-child(3) .process-arrow{left:-32px;right:auto;transform:rotate(180deg)}
.cycle-steps>li:nth-child(4) .process-arrow{left:calc(50% - 16px);right:auto;top:-42px;transform:rotate(-90deg)}
.cycle-return{display:none}
.cycle-repeat{text-align:center;font-size:var(--font-min);line-height:1.5;color:var(--green);font-weight:600;margin-top:22px}
@container cycle (width < 14rem){
 .cycle-steps{column-gap:16px}
 .cycle-steps .process-copy h3{font-size:1rem}
 .cycle-steps .process-copy p{font-size:var(--font-min)}
 .cycle-steps>li:nth-child(1) .process-arrow{right:-24px}
 .cycle-steps>li:nth-child(3) .process-arrow{left:-24px}
}
@media(min-width:900px){
 .how-section.cycle-section{padding-block:46px 34px}
 .cycle-heading{margin-bottom:32px}
 .how-section .cycle-heading h2{font-size:2.5rem;max-width:none}
 .cycle-heading>p{font-size:1.0625rem;margin-top:16px}
 .cycle-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:1000px}
 .cycle-steps>li:nth-child(n){grid-column:auto;grid-row:auto;min-height:190px;gap:15px;padding-inline:16px}
 .cycle-steps .process-icon{width:80px;height:80px;border-radius:25px}
 .cycle-steps .process-icon>svg{width:42px;height:42px}
 .cycle-steps .process-copy h3{font-size:1.3125rem}
 .cycle-steps .process-copy p{font-size:var(--font-min);min-height:2.8em}
 .cycle-steps>li:nth-child(n) .process-arrow{left:auto;right:-16px;top:24px;transform:none}
 .cycle-steps>li:last-child .process-arrow{display:none}
 .cycle-return{display:block;height:76px;margin-top:8px}
 .cycle-return>svg{display:block;width:100%;height:100%;overflow:visible;color:var(--green);stroke-width:1.7}
 .cycle-repeat{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);margin:0;padding:0 12px;background:var(--mist);max-width:60%;font-size:var(--font-min)}
}
@media(max-width:359px){
 .how-section.cycle-section{padding-block:30px}
 .how-section .cycle-heading h2{font-size:1.75rem}
 .cycle-heading>p{font-size:var(--font-min);align-items:flex-start}
 .cycle-steps{column-gap:28px;row-gap:48px}
 .cycle-steps .process-icon{width:60px;height:60px}
 .cycle-steps .process-copy h3{font-size:1rem}
 .cycle-steps .process-copy p{font-size:var(--font-min)}
 .cycle-steps .process-arrow{right:-28px;top:14px;width:28px;height:28px}
 .cycle-steps>li:nth-child(2) .process-arrow{left:calc(50% - 14px);top:calc(100% + 10px)}
 .cycle-steps>li:nth-child(3) .process-arrow{left:-28px}
 .cycle-steps>li:nth-child(4) .process-arrow{left:calc(50% - 14px);top:-38px}
}