.payment-layout{background-color:#f6f8fc;min-height:100vh;padding:140px 0 60px;position:relative}
.payment-layout .row{margin-left:0;margin-right:0}
.payment-layout .back-link{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:#141B34;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:22.4px;cursor:pointer}
.payment-layout .back-link svg{flex-shrink:0}
.payment-layout .stepper{display:flex;justify-content:space-between;align-items:center;width:100%}
.payment-layout .stepper-steps{display:flex;justify-content:flex-start;align-items:center;gap:8px}
.payment-layout .stepper-step{display:flex;justify-content:flex-start;align-items:center;gap:8px}
.payment-layout .stepper-step-group{display:flex;justify-content:flex-start;align-items:center}
.payment-layout .stepper-line{width:48px;height:0;border-top:1px solid #e4ddc9}
.payment-layout .stepper-line--completed{border-color:#00716d}
.payment-layout .stepper-circle{width:32px;height:32px;padding:9.6px;border-radius:16px;display:flex;justify-content:center;align-items:center;gap:4px;flex-shrink:0}
.payment-layout .stepper-circle--completed{background:#00716d}
.payment-layout .stepper-circle--active{background:#ff6c00}
.payment-layout .stepper-circle--inactive{background:#f1ece2;outline:1px solid #e4ddc9;outline-offset:-1px}
.payment-layout .stepper-circle-number{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;color:#fff}
.payment-layout .stepper-circle-number--muted{color:#898f9c}
.payment-layout .stepper-label{font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:22.4px}
.payment-layout .stepper-label--completed{color:#00716d}
.payment-layout .stepper-label--active{color:#000}
.payment-layout .stepper-label--inactive{color:#8a8f9c}
.payment-layout .steps-container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;max-width:1280px}
.payment-layout .page-content{display:flex;justify-content:flex-start;align-items:flex-start;gap:24px;width:100%}
.payment-layout .card{background:#fff;border-radius:16px;outline:1px solid #dde0e4;outline-offset:-1px}
.payment-layout .card--form{width:100%;padding:32px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:40px}
.payment-layout .card--summary{width:411px;padding:24px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:20px}
.payment-layout .card--confirm{width:100%;padding:24px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:24px}
.payment-layout .card--center{width:737px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:40px}
.payment-layout .page-title{color:#000;font-family:'Cabinet Grotesk',sans-serif;font-size:48px;font-weight:700;line-height:57.6px;margin:0}
.payment-layout .page-subtitle{color:#4a5160;font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:22.4px;margin:0}
.payment-layout .page-subtitle--narrow{width:459px}
.payment-layout .page-subtitle--medium{width:522px}
.payment-layout .form-section{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:32px;width:100%}
.payment-layout .form-fields{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:24px;width:100%}
.payment-layout .form-row{display:flex;justify-content:flex-start;align-items:flex-start;gap:24px;width:100%}
.payment-layout .form-group{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:8px;flex:1;width:100%}
.payment-layout .form-group--full{width:100%}
.payment-layout .form-label{color:#222325;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:22.4px;align-self:stretch}
.payment-layout .form-label--optional{color:#576d87;font-weight:400}
.payment-layout .form-input{width:100%;padding:13px 16px;background:#f6f8fc;border-radius:8px;border:1px solid #dcdfe4;outline:none;font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:22.4px;color:#576d87;box-sizing:border-box}
.payment-layout .form-input--placeholder{color:#b6c0cd}
.payment-layout .form-hint{color:#576d87;font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:20px;align-self:stretch;margin:0}
.payment-layout .form-bottom{display:flex;justify-content:space-between;align-items:center;width:100%}
.payment-layout .step-counter{color:#576d87;font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:20px}
.payment-layout .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:none;border-radius:8px;cursor:pointer;font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:22.4px;text-decoration:none;padding:13px 16px;box-sizing:border-box}
.payment-layout .btn--primary{background:#ff6c00;color:#fff}
.payment-layout .btn--outline{background:transparent;color:#000;outline:1px solid rgba(0,0,0,0.2);outline-offset:-1px}
.payment-layout .btn--large{padding:19.5px 32px;font-size:18px;line-height:25.2px;font-weight:500}
.payment-layout .btn--block{width:100%;justify-content:center}
.payment-layout .order-summary-title{color:#576d87;font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:22.4px;text-transform:uppercase;align-self:stretch;margin:0}
.payment-layout .order-summary-plan{display:flex;justify-content:space-between;align-items:flex-start;align-self:stretch}
.payment-layout .order-summary-plan-name{font-family:'Cabinet Grotesk',sans-serif;font-size:24px;font-weight:700;line-height:28.8px;color:#000;margin:0}
.payment-layout .order-summary-plan-desc{color:#576d87;font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:22.4px;margin:0}
.payment-layout .order-summary-plan-price{color:#00716d;font-family:'Inter',sans-serif;font-size:16px;font-weight:600;line-height:22.4px;white-space:nowrap}
.payment-layout .change-plan-link{color:#00716d;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:22.4px;text-decoration:underline;align-self:stretch}
.payment-layout .order-summary-divider{height:0;border-top:1px solid #e4ddc9;align-self:stretch}
.payment-layout .order-summary-services{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:14px;align-self:stretch}
.payment-layout .order-summary-services-title{color:#222325;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:22.4px;align-self:stretch}
.payment-layout .order-summary-services-grid{display:flex;justify-content:flex-start;align-items:flex-start;gap:24px;align-self:stretch}
.payment-layout .order-summary-services-col{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:10px;flex:1}
.payment-layout .service-item{display:flex;justify-content:flex-start;align-items:center;gap:8px;align-self:stretch}
.payment-layout .service-item-icon{flex-shrink:0}
.payment-layout .service-item-name{color:#576d87;font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:22.4px}
.payment-layout .order-summary-totals{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:12px;align-self:stretch}
.payment-layout .order-summary-total-row{display:flex;justify-content:space-between;align-items:center;align-self:stretch}
.payment-layout .order-summary-total-label{color:#576d87;font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:22.4px}
.payment-layout .order-summary-total-value{color:#576d87;font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:22.4px;text-align:right}
.payment-layout .order-summary-total-label--bold{color:#000;font-weight:500}
.payment-layout .order-summary-total-value--bold{color:#000;font-weight:500}
.payment-layout .guarantee-badge{display:flex;justify-content:flex-start;align-items:flex-start;gap:8px;padding:12px;background:rgba(0,113,109,0.1);border-radius:8px;align-self:stretch}
.payment-layout .guarantee-badge-text{flex:1;color:#00716d;font-family:'Inter',sans-serif;font-size:12px;font-weight:400;line-height:16px}
.payment-layout .unlimited-upsell{display:flex;justify-content:flex-start;align-items:center;gap:12px;padding:20px 16px;border-radius:16px;outline:1px solid #e4ddca;outline-offset:-1px;align-self:stretch}
.payment-layout .unlimited-upsell-icon{width:32px;height:32px;padding:6px;background:#fdefdb;border-radius:8px;display:flex;justify-content:flex-start;align-items:flex-start;gap:10px;flex-shrink:0}
.payment-layout .unlimited-upsell-text{flex:1;font-family:'Inter',sans-serif;font-size:14px;line-height:20px}
.payment-layout .unlimited-upsell-text strong{color:#000;font-weight:500}
.payment-layout .unlimited-upsell-text span{color:#576d87;font-weight:400}
.payment-layout .security-badges{display:flex;justify-content:flex-start;align-items:center;gap:24px}
.payment-layout .security-badge{display:flex;justify-content:flex-start;align-items:center;gap:4px}
.payment-layout .security-badge-text{color:#62646a;font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:20px}
.payment-layout .confirmation-header{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:37px;align-self:stretch}
.payment-layout .confirmation-icon{width:56px;height:56px;padding:16.8px;background:rgba(0,185,97,0.2);border-radius:28px;display:flex;justify-content:center;align-items:center;gap:7px}
.payment-layout .confirmation-title{text-align:center;color:#000;font-family:'Cabinet Grotesk',sans-serif;font-size:48px;font-weight:700;line-height:57.6px;align-self:stretch;margin:0}
.payment-layout .confirmation-subtitle{text-align:center;color:#4a5160;font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:22.4px;align-self:stretch;margin:0}
.payment-layout .next-step{display:flex;justify-content:flex-start;align-items:flex-start;gap:8px;align-self:stretch}
.payment-layout .next-step-number{width:32px;height:32px;padding:9.6px;background:#000;border-radius:16px;display:flex;justify-content:center;align-items:center;gap:4px;flex-shrink:0}
.payment-layout .next-step-number-text{color:#fff;font-family:'Inter',sans-serif;font-size:12px;font-weight:500}
.payment-layout .next-step-content{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:4px;flex:1}
.payment-layout .next-step-title{color:#000;font-family:'Cabinet Grotesk',sans-serif;font-size:24px;font-weight:700;line-height:28.8px;margin:0}
.payment-layout .next-step-desc{color:#4a5160;font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:22.4px;align-self:stretch;margin:0}
.payment-layout .confirmation-actions{display:flex;justify-content:flex-start;align-items:center;gap:24px;align-self:stretch}
.payment-layout .confirmation-actions .btn--primary{width:533px}
@media (max-width:1200px){
.payment-layout .card--form,.payment-layout .card--summary,.payment-layout .card--center{width:100%}
.payment-layout .page-content{flex-direction:column}
.payment-layout .page-subtitle--narrow,.payment-layout .page-subtitle--medium{width:100%}
.payment-layout .confirmation-actions{flex-direction:column}
.payment-layout .confirmation-actions .btn--primary,.payment-layout .confirmation-actions .btn--large{width:100%;justify-content:center}
}
@media (max-width:768px){
.payment-layout .stepper{flex-direction:column;align-items:flex-start;gap:12px}
.payment-layout .stepper-steps{width:100%;justify-content:space-between}
.payment-layout .stepper-step{flex-direction:column;gap:4px}
.payment-layout .stepper-label{font-size:11px;line-height:14px;white-space:nowrap}
.payment-layout .stepper-line{width:24px}
.payment-layout .stepper-circle{width:28px;height:28px;padding:6px}
}