html,body{margin:0}
[hidden]{display:none!important}
.ifw{display:contents}
a{color:inherit}
.glass{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 var(--glass-lo),0 14px 36px -10px var(--shadow)}
.glass::before,.ygpill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,var(--rim1),var(--rim2) 38%,var(--rim3) 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);pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(72px);opacity:var(--orb-op);pointer-events:none;z-index:0}
.ygpill{position:relative;background:var(--pill);-webkit-backdrop-filter:blur(24px) saturate(200%);backdrop-filter:blur(24px) saturate(200%);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 var(--glass-lo),0 14px 36px -10px var(--shadow);animation:ygpill-in 1.1s cubic-bezier(.3,.7,.4,1) backwards;transition:width .8s cubic-bezier(.2,1.15,.3,1),transform .55s cubic-bezier(.2,1.3,.3,1),padding .55s cubic-bezier(.2,1.3,.3,1),box-shadow .4s ease;transform-origin:50% 0}
.ygpill{interpolate-size:allow-keywords;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0 6px;width:min(640px, calc(100vw - 32px))}
.ygpill.is-scrolled{width:fit-content;transform:scale(.9)}
.ygpill.is-scrolled:hover{transform:scale(.93)}
.yg-left{justify-self:start}
.yg-right{justify-self:end;display:flex;align-items:center;gap:4px}
@media (max-width: 720px){.ygpill{display:flex;flex-wrap:wrap;justify-content:center;width:auto}.ygpill.is-scrolled{width:auto}}
.ygpill.is-scrolled{box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 var(--glass-lo),0 24px 48px -12px var(--shadow)}
.ygpill:hover{transform:translateY(2px) scale(1.02)}
.ygpill.jelly-a{animation:jelly-a .8s cubic-bezier(.3,.7,.4,1)}
.ygpill.jelly-b{animation:jelly-b .8s cubic-bezier(.3,.7,.4,1)}
@keyframes jelly-a{0%{transform:none}25%{transform:translateY(4px) scale(1.02,.74)}45%{transform:translateY(-3px) scale(.84,1)}65%{transform:translateY(1px) scale(.93,.87)}82%{transform:scale(.89,.91)}100%{transform:scale(.9)}}
@keyframes jelly-b{0%{transform:scale(.9)}25%{transform:translateY(4px) scale(1.09,.86)}45%{transform:translateY(-3px) scale(.95,1.07)}65%{transform:translateY(1px) scale(1.03,.97)}82%{transform:scale(.99,1.01)}100%{transform:none}}
.ygpill .il{transition:background .15s ease,color .15s ease}
.ygpill .il:hover{background:var(--pill-hover);color:var(--fg)}
.btn{transition:transform .15s ease,filter .15s ease}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.97)}
.slot{transition:transform .18s ease}
.vid .vid-play{transition:transform .2s ease}
.vid:hover .vid-play{transform:scale(1.08)}
.slot:active{transform:scale(.985)}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
input:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
html{scroll-behavior:smooth}
@keyframes ygpill-in{0%{opacity:0;transform:translateY(-130px) scale(.5,.6);filter:blur(10px)}45%{opacity:1;transform:translateY(10px) scale(1.12,.84);filter:blur(0)}62%{transform:translateY(-6px) scale(.94,1.08)}78%{transform:translateY(2px) scale(1.03,.97)}90%{transform:scale(.99,1.01)}100%{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.ygpill,.ygpill.jelly-a,.ygpill.jelly-b{animation:none;transition:none}.ygpill:hover{transform:none}.btn,.slot,.ygpill .il,.vid .vid-play{transition:none}}

/* ---------- site animations ---------- */
.ltr{display:inline-block;animation:ltr-in .9s cubic-bezier(.2,1.3,.3,1) backwards;animation-delay:calc(var(--d,0) * 45ms + .35s)}
.hero-in{animation:rise .9s cubic-bezier(.2,.9,.25,1) backwards;animation-delay:calc(var(--d,0) * 120ms + .9s)}
.rv:not(.in) .rv-i{opacity:0;transform:translateY(34px) scale(.97);filter:blur(8px)}
.rv.in .rv-i{animation:rise .95s cubic-bezier(.2,.9,.25,1) backwards;animation-delay:calc(var(--d,0) * 90ms)}
.orb{animation:orb-a 18s ease-in-out infinite alternate}
.orb:nth-child(2n){animation-name:orb-b;animation-duration:23s}
.perk{transition:transform .55s cubic-bezier(.2,1.3,.3,1),box-shadow .4s ease}
.perk:hover{transform:translateY(-6px)}
.perk:hover .ico{animation:ico-pop .7s cubic-bezier(.2,1.3,.3,1)}
.slot{transition:transform .5s cubic-bezier(.2,1.3,.3,1)}
.slot[aria-pressed="true"]{transform:translateY(-6px)}
.pop{animation:pop .5s cubic-bezier(.2,1.3,.3,1)}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s ease;pointer-events:none}
.shine:hover::after{transform:translateX(130%)}
.vid img{transition:transform .9s cubic-bezier(.2,.9,.25,1)}
.vid:hover img{transform:scale(1.05)}
.vid-play{position:relative}
.vid-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:ring 2.2s ease-out infinite}
@keyframes ltr-in{0%{opacity:0;transform:translateY(.6em) rotate(8deg) scale(.6);filter:blur(10px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes rise{from{opacity:0;transform:translateY(34px) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes orb-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-50px,40px) scale(1.12)}}
@keyframes orb-b{from{transform:translate(0,0) scale(1.05)}to{transform:translate(60px,-35px) scale(.92)}}
@keyframes ico-pop{0%{transform:none}35%{transform:scale(1.18) rotate(-10deg)}65%{transform:scale(.95) rotate(4deg)}100%{transform:none}}
@keyframes pop{0%{transform:scale(.3)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes ring{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.ltr,.hero-in,.rv.in .rv-i,.orb,.perk:hover .ico,.pop,.vid-play::after{animation:none}.rv:not(.in) .rv-i{opacity:1;transform:none;filter:none}.perk,.slot,.vid img,.shine::after{transition:none}.perk:hover,.slot[aria-pressed="true"]{transform:none}}

/* theme toggle icons */
html .ic-sun,html .ic-moon{display:contents}
html.t-dark .ic-moon,html.t-light .ic-sun{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* pricing selection (static site) */
.slot[aria-pressed="true"]{background:var(--slot-on)!important}
.slot[aria-pressed="true"] .slot-ring{border-color:var(--acc)!important}
.slot[aria-pressed="true"] .slot-chk{border-color:var(--acc)!important;background:var(--acc)!important}
.slot[aria-pressed="true"] .slot-tick{opacity:1!important}
/* inline YouTube player */
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* phones: one-row island, sections are reachable by scrolling */
@media (max-width: 560px){.ygpill nav{display:none!important}.ygpill{gap:0 4px;padding:6px 6px 6px 16px!important}}

/* custom scrollbar */
html{scrollbar-width:thin;scrollbar-color:var(--sb,rgba(128,128,140,.45)) transparent}
html.t-dark{--sb:rgba(255,255,255,.28);--sbh:rgba(255,255,255,.45)}
html.t-light{--orb2:#5AC8FA;--sb:rgba(0,0,0,.25);--sbh:rgba(0,0,0,.4)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb);border:3px solid transparent;background-clip:padding-box;border-radius:999px;min-height:48px}
::-webkit-scrollbar-thumb:hover{background:var(--sbh);background-clip:padding-box;border:3px solid transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}