.payment-page{width:100%;max-width:620px;margin:0 auto;overflow:hidden;border-radius:20px;background:#fff;color:#282d38;font-family:inherit}
.payment-page *{box-sizing:border-box}
.payment-hero{height:260px;position:relative;overflow:hidden;background:#c7e3ff}
.payment-hero>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.payment-back{position:absolute;top:25px;left:13px;z-index:2;display:grid;place-items:center;width:38px;height:40px;color:#192b3b;text-decoration:none}
.payment-back .icon{width:25px;height:25px}
.payment-hero-copy{position:absolute;top:58px;left:44%;right:13px}
.payment-hero-copy h1{margin:0 0 12px;color:#55b1e3;font-size:29px;font-weight:800;line-height:1.3;letter-spacing:1px;-webkit-text-stroke:3px #f3fcff;paint-order:stroke fill;text-shadow:0 2px 3px #417fc32b}
.payment-hero-pills{display:grid;gap:9px}
.payment-hero-pills>span{display:flex;align-items:center;justify-content:center;min-height:31px;padding:5px 8px;border:1px solid #ffffff38;border-radius:9px;background:linear-gradient(100deg,#60b8fa,#77d5fa);color:#fff;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;text-shadow:0 1px 1px #1483c22b}
.payment-hero-pills>span:nth-child(2){background:linear-gradient(100deg,#767bff,#9185ff)}
.payment-hero-pills>span:nth-child(3){background:linear-gradient(100deg,#21d6a4,#59dfab)}
.payment-sheet{position:relative;z-index:1;margin-top:-12px;padding:22px 20px 0;border-radius:20px 20px 0 0;background:#fff}
.payment-sheet h2{margin:0;font-size:19px;font-weight:650;line-height:1.5;color:#292d34}
.payment-benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:17px}
.payment-benefit{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:100px;padding:15px 4px 12px;border-radius:13px;background:#f5f5ff;color:#6474ff}
.payment-benefit-cyan{background:#effbfc;color:#20c7db}
.payment-benefit-orange{background:#fff7f1;color:#f6b752}
.payment-benefit-purple{background:#f7f5ff;color:#9272ff}
.payment-benefit-icon{display:grid;place-items:center;width:31px;height:31px;margin-bottom:7px}
.payment-benefit-icon .icon{width:30px;height:30px}
.payment-benefit-label{display:flex;flex-direction:column;align-items:center;color:#5c5d65;font-size:14px;line-height:1.2}
.payment-plan-section{margin-top:30px}
.payment-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:22px}
.payment-plan{position:relative;min-width:0;cursor:pointer}
.payment-plan>input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.payment-plan-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:134px;padding:16px 5px 14px;border:1px solid #bac8ff;border-radius:13px;background:#f8faff;text-align:center}
.payment-plan>input:checked+.payment-plan-card{border:2px solid #6673ff;padding:15px 4px 13px;background:linear-gradient(180deg,#f9fbff,#e4efff)}
.payment-plan>input:focus-visible+.payment-plan-card{outline:3px solid #c4d3ff;outline-offset:3px}
.payment-plan-name{font-size:15px;font-weight:500;line-height:1.5}
.payment-plan-price{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1.2}
.payment-plan-price>span{font-size:20px;font-weight:650}
.payment-plan-price>b{font-size:26px;font-weight:700}
.payment-plan-quota{margin-top:16px;padding:3px 8px;border-radius:3px;background:#f0f3ff;font-size:13px;line-height:1.4;color:#52617c}
.payment-plan-note{margin:11px 0 0;text-align:center;color:#8b93a4;font-size:13px;line-height:1.5}
.payment-plans-single{grid-template-columns:minmax(0,1fr)}
.payment-plans-single .payment-plan-card{min-height:134px}
.payment-plans-single .payment-plan-price>b{font-size:32px}
.payment-footer{margin-top:30px;padding:0 8px 18px;text-align:center}
.payment-submit,.payment-submit:disabled{display:block;width:100%;min-height:50px;padding:11px 16px;border:0;border-radius:28px;background:linear-gradient(100deg,#5192ed,#285af5);color:#fff;font:inherit;font-size:18px;font-weight:700;line-height:1.5;opacity:1;cursor:pointer;box-shadow:none}
.payment-footer p{margin:11px 0 0;color:#8e96a7;font-size:13px;line-height:1.5}
.payment-back:focus-visible{outline:2px solid #79a4e6;outline-offset:2px;border-radius:9px}
@media(max-width:800px){
  body:has(.payment-page) #mobile-navigation,#app:has(.payment-page) .sidebar,#app:has(.payment-page) .topbar,#app:has(.payment-page) .site-footer{display:none}
  #app:has(.payment-page) .workspace{margin-left:0}
  #main:has(>.payment-page){max-width:none;min-height:100dvh;padding:0;background:#fff;animation:none}
  .payment-page{max-width:620px;min-height:100dvh;border-radius:0;padding-bottom:env(safe-area-inset-bottom)}
}
@media(max-width:500px){
  .payment-hero{height:207px}
  .payment-hero-copy{top:49px;left:44%;right:10px}
  .payment-hero-copy h1{font-size:25px;margin-bottom:10px}
  .payment-hero-pills{gap:8px}
  .payment-hero-pills>span{min-height:28px;padding:5px 4px;border-radius:8px;font-size:11.5px}
  .payment-sheet{margin-top:-11px;padding:22px 14px 0;border-radius:19px 19px 0 0}
  .payment-sheet h2{font-size:18px}
  .payment-benefit-grid{gap:12px;margin-top:18px}
  .payment-benefit{min-height:99px;padding:14px 3px 11px;border-radius:12px}
  .payment-plan-section{margin-top:30px}
  .payment-plans{gap:14px;margin-top:22px}
  .payment-plan-name{font-size:14px}
  .payment-plan-price>b{font-size:25px}
  .payment-plan-quota{font-size:12px;padding:3px 5px}
  .payment-footer{margin-top:30px;padding:0 8px 19px}
}
@media(max-width:365px){
  .payment-hero-copy{right:8px;left:43%}
  .payment-hero-copy h1{font-size:23px}
  .payment-hero-pills>span{font-size:10.5px}
  .payment-benefit-grid{gap:8px}
  .payment-benefit-label{font-size:13px}
  .payment-plans{gap:9px}
  .payment-plan-name{font-size:13px}
}
@media(max-width:500px){
  .payment-sheet{display:flex;flex-direction:column;min-height:calc(100dvh - 196px)}
  .payment-footer{margin-top:auto;padding-top:30px}
}