/* Shared by the live landing CTA and the React workspace control. */
.glass-cta {
  --light-x: 38%;
  --light-y: 0%;
  --glass-background: linear-gradient(145deg,rgba(255,255,255,.23),rgba(255,255,255,.055) 48%,rgba(255,255,255,.12));
  --glass-border: rgba(255,255,255,.44);
  --glass-ink: #fff;
  --glass-blur: blur(12px) saturate(1.45);
  --glass-shadow: inset 0 1px 1px rgba(255,255,255,.75), inset 0 -1px 2px rgba(255,255,255,.22), inset 1px 0 2px rgba(255,255,255,.28), 0 8px 26px rgba(15,22,17,.15);
  --glass-text-shadow: 0 1px 4px rgba(15,22,17,.3);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-background);
  color: var(--glass-ink);
  text-decoration: none;
  text-shadow: var(--glass-text-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform-style: preserve-3d;
}
.glass-cta::before, .glass-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.glass-cta::before {
  z-index: -1;
  background: radial-gradient(ellipse at var(--light-x) var(--light-y), rgba(255,255,255,.40), rgba(255,255,255,.08) 36%, transparent 68%);
  opacity: .65;
  transition: opacity .2s ease;
}
.glass-cta::after {
  inset: 2px;
  border: 1px solid transparent;
  border-top-color: rgba(255,255,255,.32);
  border-bottom-color: rgba(255,255,255,.13);
}
.glass-cta:not(:disabled, [aria-disabled="true"]):hover::before { opacity: 1; }
.glass-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.glass-cta:disabled, .glass-cta[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.glass-cta-label { position: relative; z-index: 1; pointer-events: none; }
.glass-cta-ripple {
  position: absolute;
  z-index: -1;
  width: 24px;
  height: 24px;
  margin: -12px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  pointer-events: none;
  animation: glass-ripple .65s ease-out forwards;
}
@keyframes glass-ripple {
  from { transform: scale(0); opacity: .7; }
  to { transform: scale(18); opacity: 0; }
}
/* The same clear material, with readable text against a white workspace. */
html:not(.dark) .glass-cta[data-glass-theme="auto"] {
  --glass-ink: #263348;
  --glass-text-shadow: 0 1px 1px rgba(255,255,255,.7);
}
/* Use the close button's material everywhere. On white surfaces, shade the
   transmitted backdrop to reproduce its smoky glass without an opaque fill.
   The mobile close control already receives this shading from the scrim. */
html:not(.dark) .glass-cta[data-glass-theme="auto"]:not([data-glass-backdrop="dimmed"]) {
  --glass-blur: blur(12px) saturate(1.45) brightness(.58);
}
.glass-cta:is([aria-current="page"], [aria-selected="true"], [aria-pressed="true"], [data-state="checked"]) {
  --glass-border: rgba(255,255,255,.8);
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .glass-cta, .glass-cta-label { transform: none !important; }
  .glass-cta::before { transition: none; }
  .glass-cta-ripple { display: none; }
}
