.planBenefitBackdrop{
  position:fixed;
  z-index:2147483500;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,28px);
  background:rgba(3,7,12,.82);
  backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  transition:opacity .32s ease,visibility .32s ease;
}
.planBenefitBackdrop.is-open{
  opacity:1;
  visibility:visible;
}
.planBenefitDialog{
  position:relative;
  width:min(640px,100%);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 68%,var(--line));
  border-radius:26px;
  background:var(--panel);
  box-shadow:0 34px 100px rgba(0,0,0,.58),0 0 40px color-mix(in srgb,var(--accent) 14%,transparent);
  transform:translateY(18px) scale(.97);
  transition:transform .34s cubic-bezier(.2,.9,.2,1);
}
.planBenefitBackdrop.is-open .planBenefitDialog{
  transform:translateY(0) scale(1);
}
.planBenefitSparkles{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.planBenefitGlare{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.planBenefitGlare::before{
  content:"";
  position:absolute;
  top:-25%;
  left:-40%;
  width:52%;
  height:150%;
  background:linear-gradient(108deg,transparent 40%,color-mix(in srgb,#fff 18%,transparent) 50%,transparent 60%);
  transform:rotate(10deg);
  animation:planBenefitGlare 3.6s ease-in-out infinite;
}
@keyframes planBenefitGlare{
  0%,100%{transform:translateX(-20%) rotate(10deg);opacity:0}
  20%,45%{opacity:1}
  60%{transform:translateX(220%) rotate(10deg);opacity:0}
}
.planBenefitSparkles span{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent2,var(--accent));
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent);
  animation:planBenefitSparkle 2.8s ease-in-out infinite;
}
.planBenefitSparkles span:nth-child(1){top:8%;left:6%;animation-delay:0s}
.planBenefitSparkles span:nth-child(2){top:14%;right:8%;animation-delay:.4s;width:4px;height:4px}
.planBenefitSparkles span:nth-child(3){top:22%;left:14%;animation-delay:.9s;width:5px;height:5px}
.planBenefitSparkles span:nth-child(4){top:30%;right:16%;animation-delay:1.3s}
.planBenefitSparkles span:nth-child(5){top:42%;left:4%;animation-delay:1.8s;width:4px;height:4px}
.planBenefitSparkles span:nth-child(6){top:52%;right:6%;animation-delay:.2s;width:3px;height:3px}
.planBenefitSparkles span:nth-child(7){top:58%;left:22%;animation-delay:2.1s;width:5px;height:5px}
.planBenefitSparkles span:nth-child(8){top:66%;right:20%;animation-delay:1.1s;width:4px;height:4px}
.planBenefitSparkles span:nth-child(9){top:74%;left:10%;animation-delay:2.5s;width:3px;height:3px}
.planBenefitSparkles span:nth-child(10){top:80%;right:12%;animation-delay:.7s}
.planBenefitSparkles span:nth-child(11){top:88%;left:28%;animation-delay:1.6s;width:4px;height:4px}
.planBenefitSparkles span:nth-child(12){top:36%;left:48%;animation-delay:2.8s;width:3px;height:3px}
.planBenefitSparkles span:nth-child(13){top:48%;right:38%;animation-delay:.5s;width:5px;height:5px}
.planBenefitSparkles span:nth-child(14){top:62%;left:38%;animation-delay:2.3s;width:3px;height:3px}
@keyframes planBenefitSparkle{
  0%,100%{opacity:0;transform:translateY(8px) scale(.4)}
  35%,65%{opacity:1;transform:translateY(-10px) scale(1)}
}
.planBenefitHero{
  position:relative;
  z-index:0;
  padding:22px 24px 16px;
  text-align:center;
  overflow:hidden;
  background:radial-gradient(circle at 50% -20%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 55%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel));
  border-bottom:1px solid var(--line);
}
.planBenefitHero span{
  display:inline-block;
  color:var(--accent2);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.14em;
}
.planBenefitBadge{
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  margin:10px auto 8px;
  border:1px solid color-mix(in srgb,var(--accent) 62%,var(--line));
  border-radius:18px;
  background:var(--accent-soft);
  color:var(--accent2);
  font-size:1rem;
  font-weight:950;
  letter-spacing:.06em;
  box-shadow:0 0 28px color-mix(in srgb,var(--accent) 22%,transparent);
}
.planBenefitHero h2{
  margin:0 0 6px;
  font-size:clamp(1.2rem,3vw,1.55rem);
}
.planBenefitHero p{
  margin:0 auto;
  max-width:460px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.4;
}
.planBenefitPrice{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  margin-top:10px;
  padding:6px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 8%,var(--surface-raised));
  font-weight:800;
}
.planBenefitPrice small{
  color:var(--muted);
  font-size:.7rem;
  font-weight:600;
}
.planBenefitBody{
  position:relative;
  z-index:0;
  padding:16px 20px 20px;
}
.planBenefitList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.planBenefitList li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-raised);
}
.planBenefitList i{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:9px;
  background:color-mix(in srgb,var(--accent) 14%,var(--surface-input));
  color:var(--accent2);
  font-style:normal;
  font-weight:900;
  font-size:.82rem;
}
.planBenefitList strong{
  display:block;
  margin-bottom:2px;
  font-size:.78rem;
  line-height:1.25;
}
.planBenefitList span{
  color:var(--muted);
  font-size:.72rem;
  line-height:1.35;
}
.planBenefitActions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}
.planBenefitActions .btn{
  min-width:148px;
}
.planBenefitClose{
  position:absolute;
  z-index:3;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface-input);
  color:var(--text);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
}
.signedOutPlanBenefitCard{
  cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.signedOutPlanBenefitCard:hover,
.signedOutPlanBenefitCard:focus-visible{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 16px 36px rgba(0,0,0,.22),0 0 24px color-mix(in srgb,var(--accent) 16%,transparent);
  outline:none;
}
.signedOutPlansCompareLabel{
  position:absolute!important;
  z-index:3;
  top:50%;
  left:auto!important;
  right:34px!important;
  transform:translateY(-50%)!important;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin:0;
  padding:7px 18px;
  border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface-raised));
  color:var(--text);
  font:inherit;
  pointer-events:none;
  user-select:none;
}
.signedOutPlansCompareLabel::before,
.signedOutPlansCompareLabel::after{
  content:"";
  position:absolute;
  left:auto;
  right:30px;
  width:1px;
  height:14px;
  transform:none;
  background:linear-gradient(var(--accent),var(--accent2));
  box-shadow:0 0 8px var(--accent);
}
.signedOutPlansCompareLabel::before{bottom:100%}
.signedOutPlansCompareLabel::after{top:100%}
.signedOutPlansCompareLabel b{
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.04em;
}
@media(max-width:760px){
  .signedOutPlansCompareLabel.comparePlansRight,
  .comparePlansRight.signedOutPlansCompareLabel{
    right:10px!important;
  }
  .planBenefitList{
    grid-template-columns:1fr;
  }
}
@media(max-width:520px){
  .signedOutPlansCompareLabel.comparePlansRight,
  .comparePlansRight.signedOutPlansCompareLabel{
    position:relative!important;
    right:auto!important;
    top:auto!important;
    transform:none!important;
    margin:-8px auto!important;
  }
  .signedOutPlansCompareLabel::before,
  .signedOutPlansCompareLabel::after{
    right:50%;
    transform:translateX(50%);
  }
}
@media(prefers-reduced-motion:reduce){
  .planBenefitBackdrop,.planBenefitDialog,.signedOutPlanBenefitCard{transition:none!important}
  .planBenefitGlare::before,.planBenefitSparkles span{animation:none!important}
  .signedOutPlanBenefitCard:hover{transform:none}
}