/* (pricing2) the pricing page on the docv2 shell: the landing page's price cards, the top-ups, what opens up, the table and
   the questions. Colours come from the site tokens; the pay window is dark in both themes, like the pop-up kit. */
:root{--pm-card:#15161f;--pm-field:rgba(255,255,255,.05);--pm-on:rgba(0,255,136,.1);--pm-line:rgba(255,255,255,.12);
--pm-green:#00ff88;--pm-dim:#a3a8b5;--pm-ink:#eef0f5}
/* the plans */
.dm .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;margin:0}
.dm .plan{position:relative;display:flex;flex-direction:column;padding:28px 26px 26px;border-radius:20px;background:var(--bg);border:1px solid var(--line2);transition:border-color .2s,transform .3s var(--back)}
.dm .plan:hover{border-color:var(--dim)}
.dm .plan.hot{background:var(--card);color:var(--ink);border-color:var(--card)}
.dm .plan.hot:hover{border-color:var(--card)}
html[data-theme="dark"] .dm .plan{background:var(--card);border-color:var(--line2)}
html[data-theme="dark"] .dm .plan.hot{border-color:rgba(0,255,136,.45)}
html[data-theme="dark"] .dm .plan.hot:hover{border-color:rgba(0,255,136,.7)}
.dm .ribbon{position:absolute;top:22px;right:22px;display:inline-flex;align-items:center;gap:7px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--neon)}
.dm .ribbon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px rgba(0,255,136,.8)}
.dm .pname{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.dm .plan.hot .pname{color:#fff}
.dm .amt{margin-top:16px;font:500 46px/1 var(--mono);letter-spacing:-.05em;color:var(--text);font-variant-numeric:tabular-nums}
.dm .plan.hot .amt{color:#fff}
.dm .amt span{font:400 15px var(--sans);letter-spacing:0;color:var(--dim);margin-left:5px}
.dm .plan.hot .amt span{color:var(--inkdim)}
.dm .ptag{margin:10px 0 0;font-size:14.5px;color:var(--dim)}
.dm .plan.hot .ptag{color:var(--inkdim)}
.dm .plan ul{list-style:none;margin:20px 0 24px;padding:20px 0 0;border-top:1px solid var(--line);flex:1;display:grid;align-content:start;gap:10px}
.dm .plan.hot ul{border-top-color:var(--hair)}
.dm .plan li{position:relative;margin:0;padding-left:24px;font-size:14.5px;line-height:1.45;color:var(--text)}
.dm .plan.hot li{color:#d3d6df}
.dm .plan li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:5px;border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-45deg)}
.dm .plan.hot li::before{border-color:var(--neon)}
.dm .plan li b{font-weight:600;color:var(--text)}
.dm .plan.hot li b{color:#fff}
.dm .plan li.plus{padding-left:0;font-weight:600;color:var(--text)}
.dm .plan.hot li.plus{color:#fff}
.dm .plan li.plus::before{display:none}
.doc .plan .cta{width:100%;margin:0;font:inherit;font-weight:600;font-size:15px;cursor:pointer;border:0}
.doc .plan .cta.ink{background:var(--text);color:var(--bg);box-shadow:none}
.doc .plan .cta.ink:hover{background:#000;color:#fff}
html[data-theme="dark"] .doc .plan .cta.ink{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.14)}
html[data-theme="dark"] .doc .plan .cta.ink:hover{background:rgba(255,255,255,.16)}
.doc .plan .cta.ghost{border:1px solid var(--line2)}
.doc .plan.hot .cta.ghost{color:#fff;border-color:rgba(255,255,255,.2)}
.doc .plan.hot .cta.ghost:hover{border-color:rgba(255,255,255,.55)}
.doc .plan .cta.cur,.doc .plan .cta.cur:hover{background:transparent;border:1px dashed var(--line2);color:var(--dim);cursor:default;box-shadow:none;transform:none}
.doc .plan.hot .cta.cur,.doc .plan.hot .cta.cur:hover{border-color:rgba(255,255,255,.25);color:#c6c9d3}
.dm .gift-link{display:block;width:100%;margin-top:10px;padding:8px;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--accent);cursor:pointer;border-radius:10px}
.dm .plan.hot .gift-link{color:var(--neon)}
.dm .gift-link:hover{text-decoration:underline;text-underline-offset:3px}
.dm .packs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:18px}
.dm .packs button{padding:9px 4px;border:1px solid var(--line2);border-radius:9px;background:transparent;color:var(--text);font:500 13px var(--mono);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:border-color .15s,background .15s}
.dm .packs button small{font:500 11px var(--mono);color:var(--dim)}
.dm .packs button:hover{border-color:var(--dim)}
.dm .packs button.on{border-color:var(--text);background:rgba(20,23,31,.04)}
html[data-theme="dark"] .dm .packs button.on{border-color:#fff;background:rgba(255,255,255,.06)}
.dm .pnote{margin:18px 0 0;font-size:14px;line-height:1.6;color:var(--dim);max-width:72em}
/* section heads: the landing page's, the heading on the left and the line on the right */
.dm .sh{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px 56px;align-items:end;margin:72px 0 24px;scroll-margin-top:90px}
.dm .sh h2{margin:0;font-size:clamp(26px,3vw,36px);line-height:1.08;letter-spacing:-.03em}
.dm .sh p{margin:0 0 4px;font-size:16.5px;line-height:1.55;color:var(--dim)}
/* the top-ups */
.dm .tu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dm .tu{position:relative;background:var(--card);color:var(--ink);border:1px solid var(--card);border-radius:18px;padding:26px 22px 20px;text-align:center}
html[data-theme="dark"] .dm .tu{border-color:var(--line)}
.dm .tu .cr{display:block;font:500 36px/1.1 var(--mono);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.dm .tu .act{display:block;margin-top:7px;font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--inkdim)}
.dm .tu .usd{display:block;margin:16px 0 18px;font:500 24px/1 var(--mono);color:var(--neon);letter-spacing:-.03em}
.doc .tu .cta{width:100%;margin:0;font:inherit;font-weight:600;font-size:15px;cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.2)}
.doc .tu .cta:hover{border-color:rgba(255,255,255,.55)}
.dm .tu .gift-mini{display:block;width:100%;margin-top:8px;padding:7px;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--inkdim);cursor:pointer;border-radius:8px}
.dm .tu .gift-mini:hover{color:var(--neon);text-decoration:underline;text-underline-offset:3px}
/* what opens up */
.dm .why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dm .why .card{margin:0;padding:24px 24px 22px}
.dm .why .card b{display:block;font-size:16.5px;font-weight:600;color:#fff;margin-bottom:6px;letter-spacing:-.01em}
.dm .why .card p{font-size:14.5px;line-height:1.6;margin:0}
/* side by side */
.dm table.cmp{min-width:640px}
.dm .cmp th:not(:first-child),.dm .cmp td:not(:first-child){text-align:center;width:19%}
.dm .cmp td:first-child{font-weight:600}
.dm .cmp td.yes{color:var(--accent);font-weight:600}
.dm .cmp td.no{color:var(--dim)}
.dm .cmp .tick{display:inline-block;width:11px;height:6px;border-left:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(-45deg);vertical-align:2px}
/* the pay window */
#payModal>div{animation:pmIn .24s var(--back)}
@keyframes pmIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
#payModal .gf-h{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pm-dim);margin-bottom:8px}
#payModal input{font:inherit;font-size:14px;color:var(--pm-ink);background:var(--pm-field)}
#payModal input::placeholder{color:#6f7585}
#payModal input:focus{outline:2px solid var(--pm-green);outline-offset:1px}
#payModal .payM,#payModal .payT,#payModal .gfM{transition:filter .15s}
#payModal .payM:hover,#payModal .payT:hover,#payModal .gfM:hover{filter:brightness(1.18)}
#payModal #payGo:hover{filter:brightness(1.06)}
#payModal #payX:hover{color:#fff!important}
@media(prefers-reduced-motion:reduce){#payModal>div{animation:none}}
@media(max-width:1000px){.dm .plans{grid-template-columns:minmax(0,1fr)}.dm .plan.hot{order:-1}.dm .tu-grid,.dm .why{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.dm .sh{grid-template-columns:minmax(0,1fr);gap:10px;margin:56px 0 18px}.dm .plan{padding:24px 20px 22px}.dm .amt{font-size:40px}.dm .tu .cr{font-size:30px}}
.dm .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* (price1) a slow beam of light laps the Pro card's edge, one lap every 6 seconds */
.dm .plan.hot .tl-beam{display:none}
@supports (offset-path:rect(0 auto auto 0 round 20px)){
.dm .plan.hot .tl-beam{display:block;position:absolute;inset:-1px;border-radius:21px;padding:1.5px;pointer-events:none;z-index:2;
  -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)}
.dm .plan.hot .tl-beam::after{content:"";position:absolute;top:0;left:0;width:150px;height:26px;
  background:linear-gradient(to right,rgba(0,255,136,0),rgba(0,255,136,.55) 55%,#00ff88 88%,#eafff4);
  offset-path:rect(0 auto auto 0 round 21px);offset-anchor:100% 50%;offset-distance:0%;
  animation:tlBeamLap 6s linear infinite}
.dm .plan.hot .tl-beam.tl-beam-still::after{animation-play-state:paused}
}
@keyframes tlBeamLap{to{offset-distance:100%}}
@media (prefers-reduced-motion:reduce){.dm .plan.hot .tl-beam{display:none!important}}
/* (price1) the Pro+ price as digit wheels, like a car's mileage counter */
.dm .amt .odo{display:inline-flex;vertical-align:top;font-style:normal}
.dm .amt .odo i{font-style:normal}
.dm .amt .odo-col{display:inline-block;width:1ch;height:1em;overflow:hidden;margin-right:-.05em;
  transition:width .45s cubic-bezier(.2,.8,.2,1),margin-right .45s cubic-bezier(.2,.8,.2,1)}
.dm .amt .odo-col.odo-blank{width:0;margin-right:0}
.dm .amt .odo-strip{display:block;transition:transform .8s cubic-bezier(.2,.9,.25,1.03)}
.dm .amt .odo-strip i{display:block;height:1em;line-height:1em;text-align:center}
@media (prefers-reduced-motion:reduce){.dm .amt .odo-col,.dm .amt .odo-strip{transition:none}}
/* (up1) owner: "the middle shouldnt be black the glowy thing going around it is fine but make all three packages same white
   background". One background for all three; Pro stands out by its beam, a soft green edge and lift, and its button. */
.dm .plan.hot{background:var(--bg);color:var(--text);border-color:rgba(0,168,94,.45);box-shadow:0 26px 64px rgba(0,122,67,.13),0 2px 8px rgba(20,23,31,.05)}
.dm .plan.hot:hover{border-color:rgba(0,168,94,.65)}
html[data-theme="dark"] .dm .plan.hot{background:var(--card);border-color:rgba(0,255,136,.45);box-shadow:0 26px 64px rgba(0,0,0,.4)}
.dm .plan.hot .pname,.dm .plan.hot .amt,.dm .plan.hot li b,.dm .plan.hot li.plus{color:var(--text)}
.dm .plan.hot .amt span,.dm .plan.hot .ptag{color:var(--dim)}
.dm .plan.hot ul{border-top-color:var(--line)}
.dm .plan.hot li{color:var(--text)}
.dm .plan.hot li::before{border-color:var(--accent)}
.dm .plan.hot .gift-link{color:var(--accent)}
.doc .plan.hot .cta.ghost{color:var(--text);border-color:var(--line2)}
.doc .plan.hot .cta.cur,.doc .plan.hot .cta.cur:hover{border-color:var(--line2);color:var(--dim)}
.dm .plan.hot .ribbon{top:20px;right:20px;height:26px;padding:0 11px 0 10px;border-radius:999px;color:var(--accent);background:rgba(0,181,101,.09);border:1px solid rgba(0,181,101,.24)}
.dm .plan.hot .ribbon::before{background:#00c46a;box-shadow:0 0 8px rgba(0,196,106,.7)}
html[data-theme="dark"] .dm .plan.hot .ribbon{color:var(--neon);background:rgba(0,255,136,.08);border-color:rgba(0,255,136,.25)}
@media(min-width:1001px){.dm .plan.hot{transform:translateY(-8px)}}
/* the button sits right under the price (and Pro+'s pack choice), so it is in view without scrolling; the feature list
   follows and the gift link stays at the foot */
.dm .plan>.cta{order:1;margin-top:20px}
.dm .plan>ul{order:2;margin-bottom:8px}
.dm .plan>.gift-link{order:3}
/* the beam, a touch deeper so it shows on white */
.dm .plan.hot .tl-beam{padding:2px}
.dm .plan.hot .tl-beam::after{background:linear-gradient(to right,rgba(0,190,105,0),rgba(0,190,105,.55) 55%,#00cf6f 86%,#5dffb0)}
html[data-theme="dark"] .dm .plan.hot .tl-beam::after{background:linear-gradient(to right,rgba(0,255,136,0),rgba(0,255,136,.55) 55%,#00ff88 88%,#eafff4)}
/* Pro's button catches the light now and then */
.doc .plan.hot .cta:not(.cur){position:relative;overflow:hidden;isolation:isolate}
.doc .plan.hot .cta:not(.cur)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);animation:tlCtaShine 5.5s ease-in-out 1.4s infinite}
@keyframes tlCtaShine{0%,72%{left:-60%}100%{left:135%}}
/* the five coins on Pro's "All 5 coins" line */
.dm .plan .pcoins{display:inline-flex;align-items:center;margin-left:8px;vertical-align:-4px}
.dm .plan .pcoins i{display:inline-flex;margin-left:-5px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.dm .plan .pcoins i:first-child{margin-left:0}
.dm .plan .pcoins img{display:block;width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 2px var(--bg)}
html[data-theme="dark"] .dm .plan .pcoins img{box-shadow:0 0 0 2px var(--card)}
.dm .plan:hover .pcoins i{transform:translateX(calc(var(--i,0) * 3px))}
/* the trust row under the plans */
.dm .ptrust{display:flex;flex-direction:column;align-items:center;gap:14px;margin:26px 0 0}
.dm .pt-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font-size:13.5px;color:var(--dim)}
.dm .pt-i{display:inline-flex;align-items:center;gap:7px}
.dm .pt-i svg{width:15px;height:15px;color:var(--accent)}
.dm .pt-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:26px}
.dm .pt-logos span{display:inline-flex;border-radius:5px;box-shadow:0 0 0 1px var(--line2);opacity:0;animation:tlPtIn .5s cubic-bezier(.2,.8,.2,1) forwards}
.dm .pt-logos svg{display:block;border-radius:4px}
@keyframes tlPtIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dm .pt-crypto{margin:0;font-size:13.5px;font-weight:600;color:var(--accent)}
.dm .pnote{text-align:center;max-width:none}
/* the short title that replaced the dark hero */
.dslim{text-align:center;max-width:780px;margin:22px auto 36px}
.dslim-k{display:inline-flex;align-items:center;gap:9px;font:500 11.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.dslim-k::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--neon);box-shadow:0 0 12px rgba(0,255,136,.7)}
.dslim h1{margin:12px 0 0;font-size:clamp(30px,3.6vw,46px);line-height:1.07;letter-spacing:-.035em}
.dslim-l{margin:12px auto 0;max-width:38em;font-size:16.5px;line-height:1.55;color:var(--dim)}
.dslim>*{animation:upIn .75s cubic-bezier(.2,.8,.2,1) both}
.dslim>*:nth-child(2){animation-delay:.07s}.dslim>*:nth-child(3){animation-delay:.14s}
@keyframes upIn{from{opacity:0;transform:translateY(12px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.dslim + .db{margin-top:0}
@media(max-width:760px){.dslim{margin:10px auto 26px}.dslim-l{font-size:15.5px}}
@media (prefers-reduced-motion:reduce){.doc .plan.hot .cta::after{display:none}.dm .pt-logos span{animation:none;opacity:1}.dslim>*{animation:none}}