.nav-link{text-decoration:none}
.nav-link.is-current{color:#fff}
.how-main{min-height:100vh;background:radial-gradient(circle at 4% 20%,#07101d 0,rgba(5,12,23,.72) 14%,#000 39%)}
.how-hero{width:81.5%;max-width:1700px;margin:0 auto;padding:72px 0 84px}
.how-hero>h1{margin:0;color:#f5f6f8;font-size:clamp(48px,4.2vw,80px);font-weight:1000;letter-spacing:-2.7px;line-height:1.08}
.payment-flow{margin-top:157px}
.payment-flow>h2{margin:0 0 10px;color:#fff;font-size:clamp(28px,2vw,38px);font-weight:1000;letter-spacing:-.9px;line-height:1.12}
.flow-intro{margin:0;color:#4f94f5;font-size:clamp(18px,1.35vw,26px);font-weight:800;line-height:1.35}
.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:53px;margin-top:46px}
.how-step{min-width:0}
.step-art{width:100%;aspect-ratio:1.44/1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:9px;background:#8b8b8d}
.step-art svg{width:83%;height:89%}
.step-copy{padding:22px 20px 0}
.step-copy h3{max-width:390px;margin:0 0 13px;color:#fff;font-size:clamp(18px,1.16vw,23px);font-weight:900;line-height:1.23;letter-spacing:-.25px}
.step-copy p{max-width:410px;margin:0;color:#f2f4f7;font-size:clamp(14px,.91vw,18px);line-height:1.45}

.payment-request-section{width:94.5%;max-width:1740px;margin:0 auto;padding:72px 0 86px;display:grid;grid-template-columns:minmax(0,.93fr) minmax(440px,1.07fr);align-items:center;gap:6.5%;background:#000}
.payment-request-copy{max-width:670px}
.payment-request-copy h2{margin:0 0 10px;color:#fff;font-size:clamp(30px,2.15vw,41px);font-weight:1000;letter-spacing:-.7px;line-height:1.15}
.payment-request-intro{margin:0;color:#4e99ff;font-size:clamp(18px,1.37vw,26px);font-weight:800;line-height:1.35}
.payment-request-list{margin:22px 0 0;padding-left:25px;color:#fff;font-size:clamp(15px,1.02vw,19px);line-height:1.65}
.payment-request-list li{padding-left:1px}
.payment-request-visual{width:100%;aspect-ratio:521/312;border-radius:11px;background-image:url('assets/payment-requests-reference.png');background-repeat:no-repeat;background-size:222.1% auto;background-position:86.5% 55%;box-shadow:0 8px 36px #0008}

.invoice-flow-section{width:81.5%;max-width:1700px;margin:0 auto;padding:68px 0 78px}
.invoice-flow-section>h2{margin:0 0 13px;color:#fff;font-size:clamp(36px,3vw,56px);font-weight:1000;letter-spacing:-1.5px;line-height:1.08}
.invoice-flow-intro{max-width:1540px;margin:0;color:#4f94f5;font-size:clamp(21px,1.75vw,34px);font-weight:800;line-height:1.25}
.invoice-steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5.3%;margin-top:70px}
.invoice-step-art{width:100%;aspect-ratio:1.425/1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:12px;background:#89898b}
.invoice-step-art svg{width:78%;height:88%}
.invoice-step-copy{padding:35px 30px 0}
.invoice-step-copy h3{margin:0 0 17px;color:#fff;font-size:clamp(20px,1.4vw,27px);font-weight:900;line-height:1.2;letter-spacing:-.45px}
.invoice-step-copy p{margin:0;color:#f3f4f6;font-size:clamp(15px,1.05vw,20px);line-height:1.45}

.settlement-section{position:relative;width:78.8%;max-width:1550px;min-height:760px;margin:0 auto;padding:27px 0 72px;background:radial-gradient(circle at 98% 91%,#07101f 0,rgba(4,10,19,.62) 16%,transparent 39%)}
.settlement-section>h2{margin:0;color:#fff;font-size:clamp(36px,2.95vw,56px);font-weight:1000;letter-spacing:-1.4px;line-height:1.12}
.settlement-top{display:grid;grid-template-columns:minmax(0,1fr) 230px;align-items:start;gap:11%;margin:42px 0 0 35px}
.settlement-copy p{margin:0;color:#fff;font-size:clamp(17px,1.25vw,23px);line-height:1.38}
.settlement-payer-copy{max-width:900px}
.settlement-card-icon{width:220px;height:auto;margin-top:12px;filter:drop-shadow(0 9px 28px #007ecf24)}
.settlement-bottom{display:grid;grid-template-columns:245px minmax(0,1fr);align-items:center;gap:22%;margin-top:225px}
.settlement-bank-icon{width:220px;height:auto;filter:drop-shadow(0 9px 28px #007ecf24)}
.settlement-bank-copy{max-width:860px}

@media(max-width:1100px){
  .how-hero{width:82.1%;padding-top:58px}
  .payment-flow{margin-top:105px}
  .steps-grid{gap:28px}
  .step-copy{padding:18px 9px 0}
  .payment-request-section{width:88%;grid-template-columns:1fr 1.05fr;gap:5%;padding-top:55px}
  .invoice-flow-section{width:88%;padding-top:55px}
  .invoice-steps-grid{gap:3.6%;margin-top:52px}
  .invoice-step-copy{padding:25px 10px 0}
  .settlement-section{width:88%;min-height:690px;padding-top:35px}
  .settlement-section>h2{font-size:38px}
  .settlement-top{grid-template-columns:minmax(0,1fr) 190px;gap:7%;margin-left:0}
  .settlement-card-icon{width:180px}
  .settlement-bottom{grid-template-columns:190px minmax(0,1fr);gap:12%;margin-top:150px}
  .settlement-bank-icon{width:180px}
}

@media(max-width:768px){
  .how-hero{width:88%;padding:48px 0 58px}
  .how-hero>h1{font-size:clamp(42px,12vw,58px);letter-spacing:-1.8px}
  .payment-flow{margin-top:82px}
  .payment-flow>h2{font-size:30px}
  .flow-intro{font-size:18px;line-height:1.45}
  .steps-grid{grid-template-columns:1fr;gap:43px;margin-top:34px}
  .step-art{border-radius:10px;aspect-ratio:1.44/1}
  .step-art svg{width:80%;height:88%}
  .step-copy{padding:18px 5px 0}
  .step-copy h3{font-size:22px;margin-bottom:11px}
  .step-copy p{font-size:16px;line-height:1.55}
  .payment-request-section{width:88%;grid-template-columns:1fr;gap:36px;padding:52px 0 64px}
  .payment-request-copy{max-width:none}
  .payment-request-copy h2{font-size:30px}
  .payment-request-intro{font-size:18px;line-height:1.45}
  .payment-request-list{margin-top:19px;padding-left:23px;font-size:16px;line-height:1.75}
  .payment-request-visual{order:2;border-radius:10px}
  .invoice-flow-section{width:88%;padding:48px 0 64px}
  .invoice-flow-section>h2{font-size:34px;letter-spacing:-1px}
  .invoice-flow-intro{font-size:18px;line-height:1.45}
  .invoice-steps-grid{grid-template-columns:1fr;gap:44px;margin-top:36px}
  .invoice-step-art{border-radius:10px}
  .invoice-step-copy{padding:19px 5px 0}
  .invoice-step-copy h3{font-size:23px;margin-bottom:11px}
  .invoice-step-copy p{font-size:16px;line-height:1.55}
  .settlement-section{width:88%;min-height:0;padding:48px 0 64px;background:radial-gradient(circle at 90% 75%,#07101f 0,transparent 40%)}
  .settlement-section>h2{font-size:34px;letter-spacing:-1px;line-height:1.15}
  .settlement-top{display:flex;flex-direction:column;gap:30px;margin:34px 0 0}
  .settlement-copy p{font-size:17px;line-height:1.55}
  .settlement-card-icon{width:180px;align-self:center;margin:0}
  .settlement-bottom{display:flex;flex-direction:column;gap:30px;margin-top:70px}
  .settlement-bank-icon{width:190px;align-self:center}
}

@media(max-width:380px){
  .how-hero>h1{font-size:39px}
  .payment-flow{margin-top:66px}
  .payment-flow>h2{font-size:27px}
  .flow-intro{font-size:16px}
}