/* Shared button: the CreativeTechy pill (label, hover label with arrow, orb) used on every page.
   Markup opt-in is [data-ct-button]; buttons.js builds the inner structure and the .interactive-button-shell wrapper.
   Rules are the homepage button rules moved here from styles.css in their original cascade order. */
:root{--ct-hover-purple:#8054b8;--ct-hover-purple-soft:rgb(128 84 184 / 28%);--ct-button-ease:cubic-bezier(.16,1,.3,1)}

/* Base primitive, adapted from the supplied InteractiveHoverButton component. */
.interactive-button{--button-primary:#175ddc;position:relative;isolation:isolate;display:inline-grid;place-items:center;width:auto;min-width:128px;max-width:100%;min-height:48px;overflow:hidden;border:1px solid #d9dee5;border-radius:999px;background:#fff!important;color:#202329!important;padding:12px 22px;font:inherit;font-size:13px;font-weight:400;text-align:center;text-decoration:none!important;cursor:pointer;box-shadow:none;transition:border-color .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)}
/* Same type on every page: the homepage sets Inter and normal line height on its body; other sections set their own. */
.interactive-button{font-family:Inter,sans-serif;line-height:normal}
.interactive-button__label{grid-area:1/1;z-index:2;display:block;transform:translateX(4px);transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s cubic-bezier(.22,1,.36,1)}
.interactive-button__hover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;opacity:0;transform:translateX(48px);transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s cubic-bezier(.22,1,.36,1)}
.interactive-button__arrow{font-size:19px;line-height:1;transform:translateY(-1px)}
.interactive-button__orb{position:absolute;z-index:1;left:20%;top:40%;width:8px;height:8px;border-radius:8px;background:var(--button-primary);transform:scale(1);transition:left .3s cubic-bezier(.22,1,.36,1),top .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1),height .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1),border-radius .3s cubic-bezier(.22,1,.36,1)}
.interactive-button:hover,.interactive-button:focus-visible{border-color:transparent;box-shadow:0 0 0 2px var(--ct-hover-purple),0 0 14px var(--ct-hover-purple-soft);outline:none}
.interactive-button:hover .interactive-button__label,.interactive-button:focus-visible .interactive-button__label{opacity:0;transform:translateX(48px)}
.interactive-button:hover .interactive-button__hover,.interactive-button:focus-visible .interactive-button__hover{opacity:1;transform:translateX(-4px)}
.interactive-button:hover .interactive-button__orb,.interactive-button:focus-visible .interactive-button__orb{left:0;top:0;width:100%;height:100%;border-radius:999px;transform:scale(1.8)}

@media(max-width:650px){.interactive-button{padding-inline:19px}}
@media(prefers-reduced-motion:reduce){.interactive-button,.interactive-button__label,.interactive-button__hover,.interactive-button__orb{transition-duration:.01ms!important}}

/* Motion state. buttons.js sets data-ct-buttons on body; the homepage always had its motion-on look by default, so every page gets it. */
body[data-ct-buttons] .interactive-button{contain:paint;padding-left:42px;padding-right:24px;transition-duration:.42s!important;transition-timing-function:cubic-bezier(.16,1,.3,1)!important}
body[data-ct-buttons] .interactive-button__label{transform:none;transition-duration:.42s!important;transition-timing-function:cubic-bezier(.16,1,.3,1)!important}
body[data-ct-buttons] .interactive-button__hover{transform:translateX(56px);transition-duration:.42s!important;transition-timing-function:cubic-bezier(.16,1,.3,1)!important}
body[data-ct-buttons] .interactive-button__orb{left:16px;top:50%;width:8px;height:8px;transform:translateY(-50%) scale(1);transform-origin:center;border-radius:50%;transition:transform .48s cubic-bezier(.16,1,.3,1)!important}
body[data-ct-buttons] .interactive-button:hover,body[data-ct-buttons] .interactive-button:focus-visible{transform:translateY(-2px) scale(1.02)}
body[data-ct-buttons] .interactive-button:active{transform:translateY(0) scale(.97);transition-duration:.12s!important}
body[data-ct-buttons] .interactive-button:hover .interactive-button__label,body[data-ct-buttons] .interactive-button:focus-visible .interactive-button__label{opacity:0;transform:translateX(52px)}
body[data-ct-buttons] .interactive-button:hover .interactive-button__hover,body[data-ct-buttons] .interactive-button:focus-visible .interactive-button__hover{opacity:1;transform:translateX(-4px)}
body[data-ct-buttons] .interactive-button:hover .interactive-button__orb,body[data-ct-buttons] .interactive-button:focus-visible .interactive-button__orb{left:16px;top:50%;width:8px;height:8px;border-radius:50%;transform:translateY(-50%) scale(var(--ct-button-fill,48))}
@media(max-width:650px){body[data-ct-buttons] .interactive-button{padding-left:38px;padding-right:20px}body[data-ct-buttons] .interactive-button__orb{left:14px}}

/* Orbiting glow on the shell. Disabled by the display:none override below, as on the homepage. */
@property --glow-turn{syntax:"<angle>";inherits:false;initial-value:0deg}
.interactive-button-shell{position:relative;isolation:isolate;display:inline-flex;max-width:100%;border-radius:999px;vertical-align:middle}
.interactive-button-shell .interactive-button{z-index:1}
.interactive-button-shell::before,.interactive-button-shell::after{content:"";position:absolute;pointer-events:none;border-radius:inherit;background:conic-gradient(from var(--glow-turn),transparent 0 38%,rgb(128 84 184 / 12%) 52%,rgb(128 84 184 / 92%) 68%,rgb(185 140 255 / 72%) 76%,transparent 91%);opacity:0;animation:button-glow-orbit 3.2s linear infinite;animation-play-state:paused;transition:opacity .32s ease-out;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.interactive-button-shell::before{inset:-5px;padding:5px;filter:blur(5px)}
.interactive-button-shell::after{inset:-2px;padding:2px}
.interactive-button-shell:hover::before,.interactive-button-shell:focus-within::before{opacity:.55;animation-play-state:running}
.interactive-button-shell:hover::after,.interactive-button-shell:focus-within::after{opacity:.9;animation-play-state:running}
.interactive-button-shell:hover .interactive-button,.interactive-button-shell:focus-within .interactive-button{box-shadow:none}
@keyframes button-glow-orbit{to{--glow-turn:360deg}}
.interactive-button-shell::before,.interactive-button-shell::after{display:none!important}
body[data-ct-buttons] .interactive-button{transform:none!important;transition:border-color .2s ease,background-color .2s ease!important}
body[data-ct-buttons] .interactive-button__label{opacity:1!important;transform:none!important;transition:color .2s ease!important}
body[data-ct-buttons] .interactive-button__hover{display:none!important}
body[data-ct-buttons] .interactive-button__orb{left:16px!important;top:50%!important;width:8px!important;height:8px!important;transform:translateY(-50%)!important;transition:background-color .2s ease!important}
body[data-ct-buttons] .interactive-button:hover,body[data-ct-buttons] .interactive-button:focus-visible{border-color:#175ddc;transform:none!important;box-shadow:none}
/* Premium motion pass. */
body[data-ct-buttons] .interactive-button{transform:translateZ(0)!important;transition:transform .32s var(--ct-button-ease),border-color .2s ease,background-color .32s ease!important}
body[data-ct-buttons] .interactive-button:hover,body[data-ct-buttons] .interactive-button:focus-visible{border-color:#175ddc;transform:translateY(-2px) scale(1.015)!important}
body[data-ct-buttons] .interactive-button:active{transform:translateY(0) scale(.975)!important;transition-duration:.1s!important}
body[data-ct-buttons] .interactive-button__label{transition:opacity .2s ease,transform .42s var(--ct-button-ease),color .2s ease!important}
body[data-ct-buttons] .interactive-button__hover{display:flex!important;transition:opacity .22s ease,transform .42s var(--ct-button-ease)!important}
body[data-ct-buttons] .interactive-button__orb{transition:transform .55s var(--ct-button-ease),left .55s var(--ct-button-ease),top .55s var(--ct-button-ease),width .55s var(--ct-button-ease),height .55s var(--ct-button-ease),background-color .2s ease!important}
body[data-ct-buttons] .interactive-button:hover .interactive-button__label,body[data-ct-buttons] .interactive-button:focus-visible .interactive-button__label{opacity:0!important;transform:translateX(42px)!important}
body[data-ct-buttons] .interactive-button:hover .interactive-button__hover,body[data-ct-buttons] .interactive-button:focus-visible .interactive-button__hover{opacity:1!important;transform:translateX(-4px)!important}
body[data-ct-buttons] .interactive-button:hover .interactive-button__orb,body[data-ct-buttons] .interactive-button:focus-visible .interactive-button__orb{left:16px!important;top:50%!important;width:8px!important;height:8px!important;transform:translateY(-50%) scale(var(--ct-button-fill,48))!important}

/* Disabled: no hover or lift, dimmed, not-allowed cursor on the shell. */
.interactive-button:disabled,.interactive-button[aria-disabled="true"]{opacity:.5;pointer-events:none;cursor:not-allowed}
.interactive-button-shell:has(>.interactive-button:disabled),.interactive-button-shell:has(>.interactive-button[aria-disabled="true"]){cursor:not-allowed}

/* Reduced motion: state changes are instant and nothing lifts or scales. */
@media(prefers-reduced-motion:reduce){
  body[data-ct-buttons] .interactive-button,body[data-ct-buttons] .interactive-button__label,body[data-ct-buttons] .interactive-button__hover,body[data-ct-buttons] .interactive-button__orb{transition-duration:.01ms!important;transition-delay:0s!important}
  body[data-ct-buttons] .interactive-button:hover,body[data-ct-buttons] .interactive-button:focus-visible,body[data-ct-buttons] .interactive-button:active{transform:none!important}
}

/* Forced colors: system colors, a visible focus ring, and a filled orb that stays readable. */
@media(forced-colors:active){
  .interactive-button{border-color:ButtonText}
  .interactive-button__orb{forced-color-adjust:none;background:Highlight}
  .interactive-button__hover{forced-color-adjust:none;color:HighlightText}
  .interactive-button:focus-visible{outline:2px solid Highlight!important;outline-offset:3px}
  .interactive-button:disabled,.interactive-button[aria-disabled="true"]{opacity:1;border-color:GrayText;color:GrayText!important}
}