/* Shared demo button: white label, dark surface, white chip and black arrow. */
@layer ry-demo-unified {
 html body :is(a,button).ry-demo-cta{
 display:inline-flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;
 min-height:49px!important;min-width:0!important;max-width:100%!important;padding:6px 6px 6px 22px!important;
 background:#000d14!important;background-image:none!important;color:#fff!important;border:1px solid #000d14!important;border-radius:12px!important;
 font-family:Geist,Arial,sans-serif!important;font-size:15px!important;font-weight:500!important;line-height:1.2!important;text-align:left!important;text-decoration:none!important;white-space:nowrap!important;cursor:pointer;
 box-shadow:0 5px 9px -7px #4dba48,0 8px 15px -10px #88d645,4px 9px 18px -12px #b1e62e,9px 8px 18px -12px #d3fa0c!important;
 --color-tokens-button-primary-default-text:#fff!important;--color-tokens-button-primary-hover-text:#fff!important;
 }
 html body :is(a,button).ry-demo-cta::before{display:none!important;content:none!important}
 html body :is(a,button).ry-demo-cta .ry-demo-label{color:#fff!important;-webkit-text-fill-color:#fff!important;line-height:1.2!important;flex:1 1 auto!important}
 html body :is(a,button).ry-demo-cta .ry-demo-arrow{display:grid!important;place-items:center!important;flex:0 0 36px!important;width:36px!important;height:36px!important;margin:0!important;background:#fff!important;border:0!important;border-radius:8px!important;color:#000!important}
 html body :is(a,button).ry-demo-cta .ry-demo-arrow svg{display:block!important;width:17px!important;height:17px!important;margin:0!important;color:#000!important;fill:none!important;stroke:#000!important;transform:none!important;opacity:1!important;visibility:visible!important}
 html body :is(a,button).ry-demo-cta:hover{background:#0b1a22!important;border-color:#0b1a22!important}
 html body :is(a,button).ry-demo-cta:focus-visible{outline:2px solid #88d645!important;outline-offset:4px!important}
}

/* Match the existing hover-only shine and text roll; the arrow stays still. */
@layer ry-demo-unified {
 html body :is(a,button).ry-demo-cta{position:relative!important;isolation:isolate!important;overflow:hidden!important}
 html body :is(a,button).ry-demo-cta::after{content:""!important;display:block!important;position:absolute!important;z-index:1!important;pointer-events:none!important;inset:-60% auto -60% 0!important;width:65%!important;height:auto!important;border:0!important;border-radius:0!important;background:linear-gradient(110deg,transparent,rgba(255,255,255,.22),transparent)!important;opacity:0!important;transform:skewX(-20deg)!important;translate:-180% 0;animation:none!important}
 html body :is(a,button).ry-demo-cta:is(:hover,:focus-visible)::after{opacity:1!important;animation:ryDemoShine 1.6s ease-in-out infinite!important}
 html body :is(a,button).ry-demo-cta .ry-demo-label{position:relative!important;z-index:2!important;overflow:hidden!important;height:1.2em!important;line-height:1.2em!important}
 html body :is(a,button).ry-demo-cta .ry-demo-label-text{display:block!important;line-height:1.2em!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1.2em 0 #fff!important;transform:translateY(0);transition:transform .3s cubic-bezier(.22,.61,.36,1)!important}
 html body :is(a,button).ry-demo-cta:is(:hover,:focus-visible) .ry-demo-label-text{transform:translateY(-100%)}
 html body :is(a,button).ry-demo-cta .ry-demo-arrow{position:relative!important;z-index:2!important}
 @keyframes ryDemoShine{0%{translate:-180% 0}100%{translate:350% 0}}
 @media(prefers-reduced-motion:reduce){
 html body :is(a,button).ry-demo-cta:is(:hover,:focus-visible)::after{animation:none!important;opacity:0!important}
 html body :is(a,button).ry-demo-cta .ry-demo-label-text{transition:none!important;transform:none!important;text-shadow:none!important}
 }
}