:root{
  --pricing-ink:var(--color-text);
  --pricing-soft:var(--color-panel);
  --pricing-blue-wash:rgba(15,155,215,.08);
  --pricing-green-wash:rgba(20,184,132,.08);
  --pricing-coral-wash:rgba(255,103,82,.08);
  --pricing-line:var(--color-border);
  --pricing-card-shadow:var(--shadow-soft);
}

.pricing-hero{
  position:relative;
  padding-top:64px;
  padding-bottom:56px;
  overflow:hidden;
}
.pricing-hero::after{
  content:"";
  position:absolute;
  right:-7%;
  bottom:-110px;
  width:360px;
  height:250px;
  background:var(--pricing-green-wash);
  border-radius:50%;
  filter:blur(12px);
  pointer-events:none;
}
.pricing-hero .wrap{
  position:relative;
  z-index:1;
}
.pricing-hero h1{
  margin-top:18px;
  max-width:760px;
  font-weight:800;
  background:linear-gradient(94deg,var(--color-blue),var(--color-success));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.pricing-lead{
  max-width:710px;
  margin-top:18px;
  font-size:18px;
}
.pricing-hero-actions{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:26px;
}
.pricing-note{
  color:var(--color-muted);
  font-size:13px;
}
.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:26px;
}
.section-heading h2{
  margin-top:9px;
}
.section-heading>p{
  max-width:400px;
  font-size:14px;
}
.section-kicker{
  color:var(--color-blue);
  font-size:11px;
  letter-spacing:.16em;
}
.pricing-tabs [role=tablist]{
  max-width:270px;
  margin-bottom:22px;
}
.pricing-tabs [role=tab]{
  flex:1 0 auto;
}
.pricing-grid{
  gap:20px;
}
.pricing-card{
  min-height:470px;
  padding:29px;
}
.pricing-card.featured{
  background:linear-gradient(180deg,var(--color-bg),var(--pricing-coral-wash));
}
.plan-index{
  color:var(--color-blue);
  font-size:12px;
  letter-spacing:.14em;
}
.pricing-card .plan-name{
  margin-top:20px;
}
.pricing-card .plan-price{
  margin-top:18px;
}
.pricing-card .plan-description{
  min-height:72px;
}
.pricing-card .plan-features{
  min-height:142px;
}
.billing-detail{
  max-width:850px;
  margin-top:48px;
  padding:28px 30px;
  border-radius:var(--radius-lg);
  background:var(--color-panel);
}
.billing-detail h3{
  font-size:22px;
}
.billing-detail p{
  margin-top:14px;
  font-size:15px;
}
.traffic-panel-heading{
  max-width:680px;
  margin-bottom:25px;
}
.traffic-panel-heading h2{
  margin-top:8px;
}
.traffic-panel-heading p{
  margin-top:10px;
}
.traffic-grid .pricing-card{
  min-height:470px;
}
.included-section{
  background:var(--color-panel);
}
.included-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(250px,.7fr);
  gap:34px;
  align-items:start;
}
.included-list{
  display:grid;
  gap:0;
}
.included-list article{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:18px;
  padding:22px 0;
  border-top:1px solid var(--pricing-line);
}
.included-list article:last-child{
  border-bottom:1px solid var(--pricing-line);
}
.included-mark{
  color:var(--color-blue);
  font:700 13px var(--font-mono);
  padding-top:4px;
}
.included-list h3{
  font-size:21px;
}
.included-list p{
  margin-top:6px;
  font-size:14px;
}
.included-aside{
  padding:28px;
  border-radius:var(--radius-lg);
  background:var(--color-bg);
  box-shadow:var(--pricing-card-shadow);
}
.aside-label{
  display:block;
  color:var(--color-success);
  font-size:11px;
  letter-spacing:.14em;
}
.included-aside strong{
  display:block;
  margin-top:18px;
  font-size:26px;
}
.included-aside p{
  margin-top:10px;
  font-size:14px;
}
.included-aside a{
  display:inline-flex;
  gap:8px;
  margin-top:22px;
  color:var(--color-blue);
  font-weight:750;
}
.compare-section{
  padding-bottom:70px;
}
.plan-compare{
  min-width:930px;
}
.plan-compare th,
.plan-compare td{
  white-space:nowrap;
}
.plan-compare th:first-child,
.plan-compare td:first-child{
  position:sticky;
  left:0;
  z-index:1;
  background:var(--color-bg);
}
.plan-compare thead th:first-child{
  background:var(--color-panel);
}
.table-footnote{
  margin-top:14px;
  font-size:13px;
}
.payment-section{
  background:linear-gradient(100deg,var(--pricing-blue-wash),var(--pricing-green-wash));
}
.payment-layout{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:42px;
  align-items:center;
}
.payment-layout h2{
  margin-top:9px;
}
.payment-layout p{
  margin-top:15px;
  font-size:15px;
}
.payment-methods{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}
.payment-method{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:20px;
  border-radius:var(--radius-md);
  background:var(--color-bg);
  box-shadow:var(--pricing-card-shadow);
}
.payment-symbol{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:var(--radius-sm);
  background:var(--color-panel-strong);
  color:var(--color-blue);
  font-weight:800;
}
.payment-method strong{
  margin-top:16px;
}
.payment-method small{
  margin-top:4px;
  color:var(--color-muted);
  font-size:12px;
}
.payment-process{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:38px;
}
.payment-process>div{
  min-width:0;
  padding-top:16px;
  border-top:1px solid var(--pricing-line);
}
.process-number{
  color:var(--color-success);
  font:700 12px var(--font-mono);
}
.payment-process p{
  margin-top:10px;
  font-size:13px;
}
.refund-section{
  padding-top:70px;
  padding-bottom:70px;
}
.refund-card{
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  gap:25px;
  align-items:start;
  max-width:920px;
  padding:36px 40px;
  border-radius:var(--radius-xl);
  background:var(--color-text);
  box-shadow:var(--shadow-window);
}
.refund-card h2{
  margin-top:9px;
  color:var(--color-bg);
}
.refund-card .section-kicker{
  color:var(--color-success);
}
.refund-card p{
  margin-top:15px;
  color:var(--color-panel-strong);
  font-size:15px;
}
.refund-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border-radius:var(--radius-md);
  background:var(--pricing-coral-wash);
  color:var(--color-accent);
}
.refund-icon svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.faq-section{
  padding-top:74px;
}
.faq-layout{
  display:grid;
  grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);
  gap:50px;
  align-items:start;
}
.faq-intro h2{
  margin-top:9px;
}
.faq-intro p{
  margin-top:16px;
  font-size:15px;
}
.faq-list{
  gap:9px;
}
.faq-list details{
  background:var(--color-panel);
}
.faq-answer{
  font-size:14px;
  line-height:1.75;
}
@media (max-width:900px){
  .pricing-grid{
    grid-template-columns:1fr 1fr;
  }
  .pricing-card{
    min-height:0;
  }
  .included-layout,
  .payment-layout,
  .faq-layout{
    grid-template-columns:1fr;
  }
  .included-aside{
    max-width:520px;
  }
  .payment-process{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .faq-intro{
    max-width:560px;
  }
}
@media (max-width:640px){
  .pricing-hero{
    padding-top:38px;
    padding-bottom:38px;
  }
  .pricing-lead{
    font-size:16px;
  }
  .pricing-hero-actions{
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
  }
  .section-heading{
    display:block;
  }
  .section-heading>p{
    margin-top:12px;
  }
  .pricing-grid{
    grid-template-columns:1fr;
  }
  .pricing-card,
  .traffic-grid .pricing-card{
    min-height:0;
    padding:24px;
  }
  .pricing-card .plan-description{
    min-height:0;
  }
  .pricing-card .plan-features{
    min-height:0;
  }
  .billing-detail{
    padding:23px;
  }
  .included-list article{
    grid-template-columns:45px minmax(0,1fr);
    gap:10px;
  }
  .payment-methods{
    grid-template-columns:1fr;
  }
  .payment-method{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    column-gap:13px;
    align-items:center;
  }
  .payment-method strong{
    margin-top:0;
  }
  .payment-method small{
    grid-column:2;
  }
  .payment-symbol{
    grid-row:span 2;
  }
  .payment-process{
    grid-template-columns:1fr;
  }
  .refund-card{
    grid-template-columns:1fr;
    gap:18px;
    padding:27px 23px;
  }
  .refund-icon{
    width:50px;
    height:50px;
  }
}