/* One button family for the whole site.
   Primary: a lit purple plate with an orbiting glint on its edge and a port that carries the arrow.
   Ghost: frosted plate, light follows the pointer. Text link: word + arrow in a ring. */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ---------- primary ---------- */
.btp{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 6px 0 20px;border:0;border-radius:8px;cursor:pointer;color:#fff;font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;text-decoration:none;
background:radial-gradient(120% 140% at var(--px,30%) -20%,rgba(255,255,255,.18),transparent 55%),linear-gradient(180deg,#6f63e6,#5143c6);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(10,8,40,.4),0 14px 34px -16px rgba(91,79,207,1),0 0 0 1px rgba(127,119,221,.25);
transition:transform .3s cubic-bezier(.22,.8,.3,1),box-shadow .35s ease,filter .3s ease}
.btp::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 64%,rgba(180,174,240,.35) 72%,#fff 80%,rgba(22,201,144,.8) 84%,transparent 92%);-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:btOrbit 6s linear infinite;opacity:.75;transition:opacity .3s ease}
@keyframes btOrbit{to{--ang:360deg}}
.btp::after{content:"";position:absolute;top:0;bottom:0;left:-50%;width:42%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);transform:skewX(-18deg)}
.btp:hover{color:#fff;transform:translateY(-1px);background:radial-gradient(120% 140% at var(--px,30%) -20%,rgba(255,255,255,.24),transparent 55%),linear-gradient(180deg,#766ae9,#5547cc);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(10,8,40,.4),0 20px 44px -16px rgba(91,79,207,1),0 0 0 1px rgba(160,152,240,.45)}
.btp:hover::before{opacity:1}
.btp:hover::after{animation:btSheen .9s cubic-bezier(.22,.8,.3,1)}
.btp:active{transform:translateY(0) scale(.985);transition-duration:.1s}
.btp:focus-visible{outline:2px solid var(--purple-lt);outline-offset:3px}
.btp:disabled{filter:saturate(.4) brightness(.8);cursor:default;transform:none}
@keyframes btSheen{from{left:-50%}to{left:125%}}
.bt-l{position:relative}
.bt-port{position:relative;display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .3s ease,color .3s ease}
.bt-port svg{width:16px;height:16px}
.btp:hover .bt-port{background:#fff;color:#5143c6}
.btp:hover .bt-port svg{animation:btArrow .6s cubic-bezier(.5,0,.2,1)}
@keyframes btArrow{0%{transform:none}45%{transform:translateX(150%);opacity:0}46%{transform:translateX(-150%);opacity:0}100%{transform:none;opacity:1}}
/* sizes */

/* ---------- ghost ---------- */
.btg,.w2-alt a{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid rgba(159,176,196,.22);border-radius:8px;background:rgba(12,26,46,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);font-family:var(--body);font-size:14.5px;font-weight:500;text-decoration:none;cursor:pointer;transition:border-color .25s ease,transform .3s cubic-bezier(.22,.8,.3,1)}
.btg::after,.spback::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(140px circle at var(--px,50%) var(--py,50%),rgba(127,119,221,.28),transparent 70%);opacity:0;transition:opacity .25s ease}
.btg:hover,.w2-alt a:hover{color:var(--ink);border-color:rgba(127,119,221,.55);transform:translateY(-1px)}
.btg:hover::after,.spback:hover::after{opacity:1}
.spback{overflow:hidden;isolation:isolate}
.spback:hover svg{animation:btBack .5s cubic-bezier(.5,0,.2,1)}
@keyframes btBack{0%{transform:none}45%{transform:translateX(-120%);opacity:0}46%{transform:translateX(120%);opacity:0}100%{transform:none;opacity:1}}

/* ---------- text links: word + arrow in a ring ---------- */
.cl-flk,.lw-link,#p4 .lw-link,.tf-under button{display:inline-flex;align-items:center;gap:10px;padding:4px 0;font-family:var(--body);font-size:14.5px;font-weight:600;letter-spacing:-.005em;text-transform:none;color:var(--ink)}
.cl-flk::after{bottom:-1px;height:1px;right:34px;background:linear-gradient(90deg,var(--purple-lt),rgba(22,201,144,.8))}
.cl-flk .arw,.lw-link .arw,.tf-under .arw{position:relative;display:inline-grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;border:1px solid rgba(127,119,221,.5);color:var(--purple-lt);overflow:hidden;transform:none;transition:background .25s ease,border-color .25s ease,color .25s ease}
.cl-flk .arw svg,.lw-link .arw svg,.tf-under .arw svg{width:12px;height:12px}
.cl-flk:hover .arw,.lw-link:hover .arw,.tf-under button:hover .arw{transform:none;background:var(--purple);border-color:var(--purple);color:#fff}
.cl-flk:hover .arw svg,.lw-link:hover .arw svg,.tf-under button:hover .arw svg{animation:btArrow .55s cubic-bezier(.5,0,.2,1)}
.cl-flk[target="_blank"] .arw svg,.cl-flk[href^="mailto"] .arw svg{transform:rotate(-45deg)}
.cl-flk[target="_blank"]:hover .arw svg,.cl-flk[href^="mailto"]:hover .arw svg{animation:none}
.tf-under .arw{transform:none}
/* back to both plans */
#p4 .pzv-back{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--grey)}
#p4 .pzv-back .arw{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-str);overflow:hidden;transition:border-color .2s,background .2s}
#p4 .pzv-back .arw svg{width:12px;height:12px}
#p4 .pzv-back:hover{color:var(--ink)}#p4 .pzv-back:hover .arw{transform:none;border-color:rgba(127,119,221,.6);background:rgba(91,79,207,.18)}
#p4 .pzv-back:hover .arw svg{animation:btBack .5s cubic-bezier(.5,0,.2,1)}
@media(prefers-reduced-motion:reduce){.btp::before,.btp::after,.bt-port svg,.btg *,.cl-flk .arw svg{animation:none!important}}