.pricing-hero{
  position:relative;
  padding-top:clamp(70px,9vw,118px);
  padding-bottom:clamp(66px,8vw,104px);
  background:
    radial-gradient(circle at 82% 28%,var(--color-primary-soft),transparent 34%),
    radial-gradient(circle at 72% 72%,var(--color-warning),transparent 24%),
    linear-gradient(var(--color-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px
}
.pricing-hero::after{
  content:"";
  position:absolute;
  right:8%;
  bottom:8%;
  width:clamp(180px,24vw,340px);
  aspect-ratio:1;
  border:1px solid var(--color-trace);
  border-radius:50%;
  pointer-events:none
}
.pricing-hero-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(38px,7vw,92px);
  align-items:center
}
.pricing-hero-copy{
  min-width:0
}
.pricing-hero h1{
  max-width:760px;
  margin:20px 0 22px
}
.pricing-lead{
  max-width:650px;
  margin-bottom:26px;
  color:var(--color-muted);
  font-size:18px;
  line-height:1.85
}
.pricing-summary{
  position:relative;
  min-width:0;
  padding:clamp(24px,4vw,38px);
  background:var(--color-canvas);
  box-shadow:var(--shadow-editor);
  transform:rotate(-.4deg)
}
.pricing-summary::before{
  content:"";
  position:absolute;
  top:18px;
  right:20px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--color-warning);
  box-shadow:-18px 0 0 var(--color-success),-36px 0 0 var(--color-error)
}
.summary-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-right:68px
}
.summary-state{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:12px
}
.summary-state span{
  width:8px;
  height:8px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--color-success)
}
.summary-list{
  display:grid;
  gap:0;
  margin:26px 0 20px
}
.summary-list div{
  display:grid;
  grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr);
  gap:18px;
  padding:15px 0;
  border-bottom:1px solid var(--color-line)
}
.summary-list dt{
  color:var(--color-primary-deep);
  font-family:var(--font-mono);
  font-size:13px
}
.summary-list dd{
  min-width:0;
  margin:0;
  color:var(--color-text);
  font-weight:650
}
.summary-note{
  margin:0;
  color:var(--color-muted);
  font-size:14px
}
.pricing-catalog{
  background:var(--color-panel)
}
.plan-intro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  margin-bottom:28px;
  padding:24px;
  border-radius:var(--radius-lg);
  background:var(--color-canvas);
  box-shadow:var(--shadow-card)
}
.plan-intro h3{
  margin-bottom:8px;
  font-size:24px
}
.plan-intro p{
  max-width:820px;
  margin:0;
  color:var(--color-muted)
}
.plan-intro .chip{
  flex:none
}
.plan-audience{
  min-height:112px;
  margin:18px 0;
  color:var(--color-muted);
  font-size:14px
}
.traffic-grid .plan-card.is-featured{
  box-shadow:0 0 0 2px var(--color-success),var(--shadow-editor)
}
.monthly-callout{
  margin-top:24px
}
.monthly-callout p{
  margin:7px 0 0
}
.included-browser{
  display:grid;
  grid-template-columns:minmax(190px,250px) minmax(0,1fr);
  gap:22px
}
.included-index{
  display:grid;
  align-content:start;
  gap:8px;
  padding:10px;
  border-radius:var(--radius-lg);
  background:var(--color-panel)
}
.included-index span{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 14px;
  border-radius:var(--radius-md);
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:13px
}
.included-index span::before{
  content:"";
  width:7px;
  height:7px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--color-line)
}
.included-index span.is-active{
  background:var(--color-canvas);
  color:var(--color-primary);
  box-shadow:var(--shadow-card)
}
.included-index span.is-active::before{
  background:var(--color-success)
}
.included-content{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}
.included-content article{
  min-width:0;
  padding:clamp(23px,3vw,32px);
  border-radius:var(--radius-xl);
  background:var(--color-canvas);
  box-shadow:var(--shadow-card)
}
.included-content h3{
  margin:12px 0 10px;
  font-size:21px
}
.included-content p{
  margin:0;
  color:var(--color-muted);
  font-size:14px
}
.included-code{
  color:var(--color-primary);
  font-family:var(--font-mono);
  font-size:12px
}
.compare-section{
  background:var(--color-panel)
}
.comparison-notes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:24px
}
.comparison-notes h3{
  margin:15px 0 10px;
  font-size:22px
}
.comparison-notes p{
  margin:0;
  color:var(--color-muted)
}
.payment-layout{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  gap:clamp(34px,7vw,90px);
  align-items:center
}
.payment-copy h2{
  margin:18px 0
}
.payment-copy p{
  color:var(--color-muted)
}
.payment-methods{
  display:grid;
  gap:14px
}
.payment-card{
  display:flex;
  min-width:0;
  align-items:center;
  gap:17px;
  padding:20px;
  border-radius:var(--radius-lg);
  background:var(--color-canvas);
  box-shadow:var(--shadow-card)
}
.payment-icon{
  display:grid;
  width:48px;
  height:48px;
  flex:none;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--color-primary-soft);
  color:var(--color-primary)
}
.payment-icon svg{
  width:25px;
  height:25px
}
.payment-card h3{
  margin-bottom:3px;
  font-size:18px
}
.payment-card p{
  margin:0;
  color:var(--color-muted);
  font-size:13px
}
.refund-section{
  background:var(--color-panel)
}
.refund-panel{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  padding:clamp(27px,5vw,48px);
  border-radius:var(--radius-xl);
  background:var(--color-canvas);
  box-shadow:var(--shadow-editor)
}
.refund-mark{
  display:grid;
  width:68px;
  height:68px;
  place-items:center;
  border-radius:50%;
  background:var(--color-success-soft);
  color:var(--color-success)
}
.refund-mark svg{
  width:36px;
  height:36px
}
.refund-copy h2{
  margin:12px 0 10px;
  font-size:clamp(28px,4vw,42px)
}
.refund-copy p{
  max-width:850px;
  margin-bottom:8px;
  color:var(--color-muted)
}
.refund-copy p:last-child{
  margin-bottom:0
}
.faq-section .preview-heading{
  margin-inline:auto;
  text-align:center
}
.pricing-promo .button{
  min-width:150px
}
@media (max-width:1000px){
  .pricing-hero-layout,
  .payment-layout{
    grid-template-columns:1fr
  }
  .pricing-summary{
    max-width:720px;
    transform:none
  }
  .included-content{
    grid-template-columns:1fr
  }
  .plan-audience{
    min-height:0
  }
}
@media (max-width:768px){
  .pricing-hero{
    padding-top:58px;
    padding-bottom:68px;
    background-size:auto,auto,36px 36px,36px 36px
  }
  .pricing-hero::after{
    display:none
  }
  .pricing-lead{
    font-size:16px
  }
  .plan-intro{
    display:block
  }
  .plan-intro .chip{
    margin-top:14px
  }
  .included-browser{
    grid-template-columns:1fr
  }
  .included-index{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch
  }
  .included-index span{
    flex:none
  }
  .comparison-notes{
    grid-template-columns:1fr
  }
  .refund-panel{
    grid-template-columns:auto minmax(0,1fr)
  }
  .refund-panel .button{
    grid-column:1 / -1
  }
}
@media (max-width:640px){
  .summary-head{
    display:block;
    padding-right:52px
  }
  .summary-state{
    margin-top:10px
  }
  .summary-list div{
    grid-template-columns:1fr;
    gap:5px
  }
  .refund-panel{
    grid-template-columns:1fr
  }
  .refund-mark{
    width:56px;
    height:56px
  }
  .refund-panel .button{
    grid-column:auto;
    width:100%
  }
}