/* 99 Digital v2 — plans page. Scoped to .pricing-hero and its sibling sections. */
@property --c-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ── hero: decorative ring system (injected svg) ── */
html body main:not(#v2) .pricing-hero{padding-bottom:clamp(120px,12vw,200px)!important}
.pricing-hero .c-hero-rings{position:absolute;z-index:-1;pointer-events:none;width:min(920px,95vw);aspect-ratio:1;left:50%;top:50%;translate:-50% -48%;opacity:.9}
.pricing-hero .c-hero-rings circle{fill:none;stroke-linecap:round;transform-origin:50% 50%}
.pricing-hero .c-hero-rings .t{stroke:#52e3a41a;stroke-width:1}
.pricing-hero .c-hero-rings .a{stroke:url(#c-grad);stroke-width:2}
.pricing-hero .c-hero-rings .d{fill:#52e3a4;filter:drop-shadow(0 0 8px #52e3a4)}
.pricing-hero+.section{position:relative;z-index:3;margin-top:calc(-1 * clamp(64px,8vw,128px));padding-block-start:0}

/* ── base plan: dark featured card ── */
html body main:not(#v2) .pricing-hero~.section .base-pricing{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding:clamp(28px,4.4vw,72px);border-radius:clamp(28px,3.6vw,56px)!important;border:1px solid #ffffff1c!important;
  background:radial-gradient(900px 480px at 85% -10%,#1a6a3fa6,transparent 62%),radial-gradient(700px 460px at 0% 115%,#0c6b4a77,transparent 60%),var(--v2-ink)!important;
  box-shadow:0 0 0 1px #52e3a422,0 80px 140px -60px #0f4b24cc,0 30px 80px -40px #52e3a455!important;
}
.pricing-hero~.section .base-pricing:before,.pricing-hero~.section .base-pricing:after{border:1px solid #52e3a426!important;border-radius:50%;width:min(620px,70vw)!important;height:min(620px,70vw)!important;box-shadow:inset 0 0 0 40px #52e3a408,inset 0 0 0 41px #52e3a41a;z-index:-1;pointer-events:none}
.pricing-hero~.section .base-pricing:before{bottom:-300px!important;left:-200px!important;top:auto!important;right:auto!important}
.pricing-hero~.section .base-pricing:after{top:-320px!important;right:-220px!important;bottom:auto!important;left:auto!important}
/* rotating light edge */
.pricing-hero~.section .base-pricing .c-edge{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--c-a),transparent 0 62%,#52e3a4 82%,#d5fff0 88%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:c-edge 9s linear infinite}
@keyframes c-edge{to{--c-a:360deg}}

html body main:not(#v2) .base-pricing-head{align-items:flex-end;gap:clamp(24px,4vw,64px);padding-bottom:clamp(28px,3.4vw,52px);border-bottom:1px solid #ffffff1f;flex-wrap:wrap}
html body main:not(#v2) .base-pricing-head>div:first-child{flex:1 1 420px;min-width:0}
html body main:not(#v2) .base-pricing-head>div>span{display:inline-flex;align-items:center;gap:10px;font-size:15px!important;font-weight:500;color:var(--v2-mint)!important}
html body main:not(#v2) .base-pricing-head>div>span:before{content:'';width:22px;height:1px;background:currentColor;opacity:.7}
html body main:not(#v2) .base-pricing-head h2{font-size:clamp(30px,4vw,64px)!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:1.04!important;color:#fff!important;max-width:14em;margin:16px 0 0!important}
.base-price-pills{gap:clamp(12px,1.6vw,20px)!important}
html body main:not(#v2) .base-price-pills article{
  min-width:clamp(190px,18vw,260px);padding:clamp(20px,2vw,30px)!important;border-radius:clamp(20px,2vw,28px)!important;
  background:linear-gradient(160deg,#ffffff1c,#ffffff08)!important;border:1px solid #ffffff2e!important;backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #ffffff33!important;
  transition:transform .6s var(--v2-ease),border-color .4s;
}
html body main:not(#v2) .base-price-pills article:hover{transform:translateY(-5px);border-color:#52e3a4aa!important}
html body main:not(#v2) .base-price-pills b{font-size:clamp(40px,4.4vw,68px)!important;font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff!important;margin-bottom:12px;background:linear-gradient(180deg,#fff 30%,#9bf0c8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html body main:not(#v2) .base-price-pills small{font-size:14px!important;line-height:1.5;color:var(--v2-on-dark-muted)!important}
/* table-like feature list */
.base-feature-grid{gap:0 clamp(20px,3vw,48px)!important;margin:clamp(20px,2.4vw,36px) 0 clamp(28px,3vw,44px)!important}
html body main:not(#v2) .base-feature-grid span{padding:clamp(12px,1.2vw,16px) 0;border-bottom:1px solid #ffffff17;font-size:clamp(14px,1.05vw,16px)!important;gap:12px!important;color:var(--v2-mint)!important;transition:padding .4s var(--v2-ease),border-color .4s}
html body main:not(#v2) .base-feature-grid span b{color:#fff!important;font-weight:500}
html body main:not(#v2) .base-feature-grid span:hover{border-color:#52e3a455;padding-inline-start:8px}
html body main:not(#v2) .pricing-hero~.section .base-pricing>.btn{background:var(--v2-mint)!important;border-color:var(--v2-mint)!important;color:var(--v2-ink)!important;font-weight:700;border-radius:999px!important;min-height:58px;padding-inline:36px;display:inline-flex;align-items:center;box-shadow:0 14px 44px #52e3a44d!important}

/* ── price rings (svg injected by JS; legacy border arcs hidden) ── */
.price-ring{position:relative;display:grid;place-items:center;align-content:center;border:0!important;width:clamp(120px,9.4vw,148px)!important;height:clamp(120px,9.4vw,148px)!important;flex:none}
.price-ring .c-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.price-ring .c-ring circle{fill:none;stroke-linecap:round}
.price-ring .c-ring .t{stroke:#0f4b2414;stroke-width:6}
.price-ring .c-ring .a{stroke:url(#c-grad);stroke-width:6}
.price-ring .c-ring .d{fill:var(--v2-mint);stroke:#fff;stroke-width:2.5}
html body main:not(#v2) .price-ring b{position:relative;font-size:clamp(22px,1.9vw,28px)!important;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--v2-ink)!important;white-space:nowrap}
html body main:not(#v2) .price-ring b.is-word{font-size:clamp(15px,1.3vw,18px)!important;white-space:normal;max-width:78%;text-align:center;line-height:1.15}
html body main:not(#v2) .price-ring small{position:relative;font-size:13px!important;font-weight:500;color:var(--v2-muted)!important;margin-top:3px}

/* ── add-ons ── */
html body main:not(#v2) .pricing-addons{background:linear-gradient(180deg,var(--v2-paper),#eef4ec 50%,var(--v2-paper))}
.pricing-addons .pricing-addon-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:clamp(12px,1.4vw,20px)!important}
html body main:not(#v2) .pricing-addons .pricing-addon-grid article{
  grid-column:span 3;min-height:clamp(250px,22vw,310px);padding:clamp(22px,2.2vw,34px)!important;border-radius:clamp(24px,2.4vw,36px)!important;
  justify-content:flex-start;gap:0;text-align:center;overflow:hidden;isolation:isolate;
}
html body main:not(#v2) .pricing-addons .pricing-addon-grid article:nth-child(n+5){grid-column:span 4}
.pricing-addons .pricing-addon-grid article:before{content:'';position:absolute;inset-inline:0;inset-block-start:0;height:3px;background:linear-gradient(90deg,transparent,var(--v2-mint),transparent);opacity:0;transition:opacity .5s}
.pricing-addons .pricing-addon-grid article:hover:before{opacity:1}
html body main:not(#v2) .pricing-addon-grid h3{font-size:clamp(19px,1.6vw,24px)!important;font-weight:800;letter-spacing:-.03em;color:var(--v2-ink)!important;margin:clamp(16px,1.6vw,24px) 0 6px!important}
html body main:not(#v2) .pricing-addon-grid p{font-size:clamp(13px,.95vw,15px)!important;line-height:1.6;color:var(--v2-muted)!important;max-width:22em}

/* ── modules ── */
html body main:not(#v2) .pricing-modules{gap:clamp(14px,1.6vw,24px)!important}
html body main:not(#v2) .pricing-modules>article{padding:clamp(24px,3vw,48px)!important;border-radius:clamp(26px,3vw,44px)!important;display:flex;flex-direction:column;overflow:hidden}
html body main:not(#v2) .pricing-modules header{gap:clamp(16px,2vw,28px)!important;padding-bottom:clamp(18px,2vw,28px)!important;border-bottom:1px solid var(--v2-line)!important;margin:0 0 4px}
html body main:not(#v2) .pricing-modules h3{font-size:clamp(24px,2.4vw,38px)!important;font-weight:800;letter-spacing:-.035em;line-height:1.1;color:var(--v2-ink)!important;margin:0}
html body main:not(#v2) .pricing-modules .price-ring{width:clamp(112px,9vw,140px)!important;height:clamp(112px,9vw,140px)!important}
html body main:not(#v2) .pricing-modules>article>strong{margin:clamp(16px,1.8vw,26px) 0 8px!important;padding:14px 18px!important;border-radius:16px!important;background:linear-gradient(135deg,#e7f8ee,#f1faf4)!important;border:1px solid #52e3a433;color:var(--v2-green)!important;font-weight:700;font-size:clamp(14px,1.1vw,17px)}
html body main:not(#v2) .pricing-modules ul{margin:0 0 auto!important;padding:0!important}
html body main:not(#v2) .pricing-modules li{margin:0!important;padding:13px 0;border-bottom:1px dashed #10261a1f;color:var(--v2-text)!important;font-size:clamp(14px,1.05vw,16px);line-height:1.55}
html body main:not(#v2) .pricing-modules li:last-child{border-bottom:0}
html body main:not(#v2) .pricing-modules a{margin-top:clamp(18px,2vw,28px)!important;align-self:flex-start;padding:12px 22px;border-radius:999px;border:1px solid #087d4344;color:var(--v2-green-2)!important;font-weight:700;transition:background .35s,color .35s,transform .4s var(--v2-ease),border-color .3s}
html body main:not(#v2) .pricing-modules a:hover{background:var(--v2-ink);color:var(--v2-mint)!important;border-color:var(--v2-ink);transform:translateX(-4px)}
html[dir=ltr] body main:not(#v2) .pricing-modules a:hover{transform:translateX(4px)}
html body main:not(#v2) .pricing-note{font-size:clamp(12px,.95vw,14px)!important;line-height:1.7;max-width:62em;margin:clamp(28px,3vw,48px) auto 0!important;color:var(--v2-muted)!important}

/* ── CTA ── */
html body main:not(#v2) .pricing-hero~.cta{padding-block:clamp(72px,9vw,150px)}
html body main:not(#v2) .pricing-hero~.cta>.wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,64px);flex-wrap:wrap}
html body main:not(#v2) .pricing-hero~.cta>.wrap>div{flex:1 1 520px;min-width:0}
html body main:not(#v2) .pricing-hero~.cta h2{font-size:clamp(30px,4.2vw,64px)!important;margin:14px 0 18px!important;max-width:16em}
html body main:not(#v2) .pricing-hero~.cta .btn{white-space:nowrap;flex:none}

/* ── responsive ── */
@media(max-width:1100px){
  html body main:not(#v2) .pricing-addons .pricing-addon-grid article,html body main:not(#v2) .pricing-addons .pricing-addon-grid article:nth-child(n+5){grid-column:span 6}
  html body main:not(#v2) .pricing-addons .pricing-addon-grid article:last-child{grid-column:span 12}
  .base-feature-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:900px){
  html body main:not(#v2) .pricing-modules{grid-template-columns:1fr!important}
  html body main:not(#v2) .base-pricing-head{flex-direction:column;align-items:stretch}
  html body main:not(#v2) .base-pricing-head>div:first-child{flex:none}
  html body main:not(#v2) .pricing-hero~.section .base-pricing{box-shadow:0 0 0 1px #52e3a422,0 36px 60px -40px #0f4b24cc!important}
  .base-price-pills{display:grid!important;grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .base-feature-grid{grid-template-columns:1fr!important}
  .base-price-pills{grid-template-columns:1fr!important}
  html body main:not(#v2) .pricing-addons .pricing-addon-grid article,html body main:not(#v2) .pricing-addons .pricing-addon-grid article:nth-child(n+5),html body main:not(#v2) .pricing-addons .pricing-addon-grid article:last-child{grid-column:span 12;min-height:0;flex-direction:row;text-align:start;justify-content:flex-start;gap:20px;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:20px}
  html body main:not(#v2) .pricing-addons .pricing-addon-grid .price-ring{grid-row:span 2}
  html body main:not(#v2) .pricing-addon-grid h3{margin:0 0 4px!important;align-self:end}
  html body main:not(#v2) .pricing-addon-grid p{align-self:start}
  html body main:not(#v2) .pricing-modules header{flex-direction:row}
}
@media(prefers-reduced-motion:reduce){.pricing-hero~.section .base-pricing .c-edge{animation:none}}
