.payment-page{
  padding:24px 0 72px;
  color:var(--navy);
  background:#fff;
}
.payment-shell{
  width:min(1600px,calc(100% - 48px));
  min-height:650px;
  margin:0 auto;
  padding:28px 6% 48px;
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:
    radial-gradient(circle at 10% 95%,rgba(239,247,255,.9),transparent 30%),
    radial-gradient(circle at 91% 12%,rgba(235,244,255,.9),transparent 25%),
    #fff;
  box-shadow:none;
}
.payment-breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  color:#8190a4;
  font-size:12px;
  font-weight:600;
}
.payment-breadcrumbs a{transition:color .18s ease}
.payment-breadcrumbs a:hover{color:var(--blue)}
.payment-breadcrumbs .ti{width:13px;height:13px}
.payment-butterfly{
  width:108px;
  height:108px;
  position:absolute;
  top:42px;
  right:5.5%;
  display:grid;
  place-items:center;
  color:#2a7af2;
  transform:rotate(16deg);
  filter:drop-shadow(0 10px 14px rgba(41,120,242,.19));
}
.payment-butterfly .ti{width:100%;height:100%;stroke-width:1.35}
.payment-heading{
  max-width:820px;
  margin:4px auto 0;
  text-align:center;
}
.payment-kicker{
  margin:0 auto 13px;
  padding:8px 13px;
  width:max-content;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:18px;
  background:#edf4ff;
  color:#2d70c8;
  font-size:11px;
  font-weight:700;
}
.payment-kicker .ti{width:15px;height:15px}
.payment-heading h1{
  margin:0;
  font-size:48px;
  line-height:1.08;
  letter-spacing:-1.7px;
}
.payment-heading p{
  margin:14px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}
.payment-methods{
  margin:54px auto 0;
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:54px;
}
.payment-methods:before{
  content:"";
  position:absolute;
  z-index:0;
  top:53px;
  left:14%;
  right:14%;
  border-top:2px dashed #cfe2d2;
}
.payment-method{
  position:relative;
  z-index:1;
  text-align:center;
}
.payment-method-marker{width:112px;margin:0 auto;position:relative}
.payment-method-icon{
  width:104px;
  height:104px;
  margin:0 auto;
  display:grid;
  place-items:center;
  border:1px solid #d9e7f8;
  border-radius:50%;
  background:#f7fbff;
  color:#2878f2;
  box-shadow:0 0 0 8px rgba(242,247,253,.94),0 8px 26px rgba(23,43,73,.08);
}
.payment-method-icon .ti{width:45px;height:45px;stroke-width:1.7}
.payment-method-number{
  width:30px;
  height:30px;
  margin:14px auto 0;
  display:grid;
  place-items:center;
  position:relative;
  border-radius:50%;
  background:#eaf3ff;
  color:#2878f2;
  font-size:14px;
  font-weight:800;
  box-shadow:0 0 0 7px #fff;
}
.payment-method-number:before{
  content:"";
  width:4px;
  height:4px;
  position:absolute;
  top:-11px;
  border-radius:50%;
  background:currentColor;
}
.payment-method.pickup .payment-method-icon{border-color:#dbe9d5;background:#f7fbf5;color:#50a540}
.payment-method.pickup .payment-method-number{background:#eef8e9;color:#50a540}
.payment-method.delivery .payment-method-icon{border-color:#f1dfc8;background:#fffaf3;color:#e88722}
.payment-method.delivery .payment-method-number{background:#fff1df;color:#e88722}
.payment-method-copy{max-width:360px;margin:20px auto 0}
.payment-method h2{min-height:46px;margin:0;font-size:18px;line-height:1.28;letter-spacing:-.25px}
.payment-method p{margin:12px 0 0;color:#596a80;font-size:14px;line-height:1.68}
.payment-note{
  max-width:920px;
  min-height:82px;
  margin:42px auto 0;
  padding:15px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  border:1px solid #e1e9f3;
  border-radius:20px;
  background:rgba(255,255,255,.86);
  box-shadow:0 8px 24px rgba(23,43,73,.05);
}
.payment-note>span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:#eaf3ff;
  color:var(--blue);
}
.payment-note>span .ti{width:23px;height:23px}
.payment-note strong{display:block;font-size:14px}
.payment-note p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.45}

@media(max-width:1000px){
  .payment-shell{padding-left:5%;padding-right:5%}
  .payment-heading h1{font-size:42px}
  .payment-butterfly{width:84px;height:84px;top:50px;right:3%}
  .payment-methods{gap:24px}
  .payment-method-copy{max-width:280px}
}

@media(max-width:700px){
  .payment-page{padding:12px 0 38px}
  .payment-shell{
    width:calc(100% - 16px);
    min-height:0;
    padding:22px 18px 28px;
    border-radius:0;
  }
  .payment-butterfly{width:58px;height:58px;top:58px;right:16px;opacity:.2}
  .payment-heading{margin-top:24px;text-align:left}
  .payment-kicker{margin-left:0}
  .payment-heading h1{max-width:290px;font-size:36px;line-height:1.08}
  .payment-heading p{font-size:14px}
  .payment-heading p br{display:none}
  .payment-methods{
    margin-top:34px;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
  .payment-methods:before{
    top:44px;
    bottom:44px;
    left:39px;
    right:auto;
    border-top:0;
    border-left:2px dashed #cfe2d2;
  }
  .payment-method{
    min-height:174px;
    padding:20px 18px;
    display:grid;
    grid-template-columns:74px minmax(0,1fr);
    gap:14px;
    align-items:start;
    text-align:left;
    border:1px solid #e4ebf3;
    border-radius:20px;
    background:rgba(255,255,255,.94);
    box-shadow:0 8px 24px rgba(23,43,73,.06);
  }
  .payment-method-marker{width:74px;margin:0}
  .payment-method-icon{width:68px;height:68px;box-shadow:0 0 0 6px #f3f7fc}
  .payment-method-icon .ti{width:31px;height:31px}
  .payment-method-number{
    width:26px;
    height:26px;
    margin:12px auto 0;
    font-size:12px;
  }
  .payment-method-copy{max-width:none;margin:2px 0 0}
  .payment-method h2{min-height:0;font-size:17px}
  .payment-method p{margin-top:9px;font-size:13px;line-height:1.55}
  .payment-note{margin-top:24px;padding:15px 16px;align-items:flex-start;justify-content:flex-start}
}

@media(max-width:380px){
  .payment-shell{padding-left:14px;padding-right:14px}
  .payment-heading h1{font-size:33px}
  .payment-method{padding:18px 14px;grid-template-columns:66px 1fr;gap:12px}
  .payment-method-marker{width:66px}
  .payment-method-icon{width:60px;height:60px}
  .payment-method-icon .ti{width:28px;height:28px}
  .payment-method p{font-size:12.5px}
}