/* Recovery polish: keep the static export readable before JavaScript animations hydrate. */
body [style*="opacity:0"],
body [style*="opacity: 0"],
body [style*="opacity:0."],
body [style*="opacity: 0."] {
  opacity: 1 !important;
}

body [style*="opacity:0"][style*="translate"],
body [style*="opacity: 0"][style*="translate"],
body [style*="opacity:0."][style*="translate"],
body [style*="opacity: 0."][style*="translate"] {
  transform: none !important;
}

body [class~="opacity-0"] {
  opacity: 1 !important;
}

body [class*="translate-y-"],
body [class*="translate-x-"] {
  transform: none !important;
}

:where(a, button):focus-visible {
  outline: 2px solid #79c0ff;
  outline-offset: 4px;
}

:where(h1, h2, h3) {
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ProductivityApps premium pass — editorial dark surfaces, cobalt accents, quiet motion. */
:root {
  --pa-bg: #010306;
  --pa-ink: #f3f1ed;
  --pa-muted: #c3ccd8;
  --pa-line: rgba(202, 216, 234, 0.17);
  --pa-line-strong: rgba(202, 216, 234, 0.34);
  --pa-blue: #075cff;
  --pa-cyan: #61baff;
  --pa-serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
}

html { background: var(--pa-bg); }

body.pa-premium {
  color: var(--pa-ink) !important;
  background:
    radial-gradient(42rem circle at 82% 5%, rgba(32, 82, 154, 0.2), transparent 68%),
    radial-gradient(34rem circle at 9% 48%, rgba(7, 92, 255, 0.08), transparent 72%),
    linear-gradient(180deg, #010306 0%, #02070d 48%, #010306 100%) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.pa-premium::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.24;
  background:
    radial-gradient(26rem circle at var(--pa-mx, 78vw) var(--pa-my, 28vh), rgba(30, 112, 255, 0.18), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 5px);
  mask-image: radial-gradient(ellipse at 70% 12%, #000, transparent 72%);
}

body.pa-premium > .relative.z-10 { position: relative; z-index: 1; }

.pa-flow-field { position: fixed; inset: 0; z-index: 11; overflow: hidden; pointer-events: none; opacity: .92; perspective: 900px; mix-blend-mode: screen; mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 96%, transparent 100%); }
.pa-flow-orb { position: absolute; width: min(48vw, 42rem); aspect-ratio: 1; right: -15rem; top: calc(16vh + var(--pa-scroll-shift, 0px)); border-radius: 50%; background: radial-gradient(circle, rgba(7,92,255,.22), rgba(7,92,255,.04) 48%, transparent 72%); filter: blur(10px); transform: scale(calc(.88 + var(--pa-progress, 0) * .24)); }
.pa-flow-cube { position: absolute; width: var(--cube-size); height: var(--cube-size); left: var(--cube-x); top: var(--cube-y); border: 1px solid rgba(111,184,255,.48); background: linear-gradient(145deg, rgba(52,126,255,.12), rgba(3,11,23,.02)); box-shadow: inset 0 0 20px rgba(68,148,255,.08), 0 0 30px rgba(7,92,255,.1); opacity: var(--cube-opacity); filter: brightness(1.2); transform: translate3d(0, calc(var(--pa-cube-drift, 0px) * var(--cube-speed)), 0) rotate(45deg) rotateX(58deg) rotateZ(calc(var(--pa-progress, 0) * var(--cube-turn))); will-change: transform; }
.pa-flow-cube::before, .pa-flow-cube::after { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(133,196,255,.22); }
.pa-flow-cube::after { inset: 38%; background: rgba(7,92,255,.13); }
body.pa-premium > .relative.z-10 { position: relative; z-index: 10; }
body.pa-premium header.fixed { position: fixed; z-index: 100; }

/* Clearer homepage text hierarchy on the dark, animated canvas. */
body.pa-premium section h2 { color: #f5f3ef !important; }
body.pa-premium section h2 .wave-text,
body.pa-premium section h2 span[class*="text-"] { color: #70bdff !important; background: none !important; -webkit-text-fill-color: #70bdff !important; }
body.pa-premium section p { color: #c3ccd8 !important; }
body.pa-premium section p.text-gray-400,
body.pa-premium section p.text-slate-400 { color: #aeb9c8 !important; }
body.pa-premium section .text-gray-300,
body.pa-premium section .text-slate-300 { color: #cbd3de !important; }
body.pa-premium section .text-gray-400,
body.pa-premium section .text-slate-400 { color: #aeb9c8 !important; }

body.pa-premium header.fixed {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  background: linear-gradient(90deg, rgba(1, 3, 6, 0.94), rgba(4, 10, 18, 0.78)) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.pa-premium header.fixed > div.absolute { background: transparent !important; opacity: 1 !important; }
body.pa-premium header.fixed > div.relative > div.flex.justify-between { height: 72px !important; }
body.pa-premium header.fixed img { border: 1px solid var(--pa-line-strong); border-radius: 0.45rem !important; filter: saturate(0.78) contrast(1.08); }
body.pa-premium header.fixed nav a { color: #b8c4d3 !important; font-size: 0.8rem !important; letter-spacing: 0.02em; }
body.pa-premium header.fixed nav a:hover { color: #fff !important; }

body.pa-premium #mobile-navigation { position: fixed !important; top: 58px !important; left: 0 !important; right: 0 !important; z-index: 60 !important; height: auto !important; padding: .8rem 1rem 1.2rem !important; border-top: 1px solid rgba(255,255,255,.12) !important; border-bottom: 1px solid rgba(111,184,255,.28) !important; background: rgba(1,5,11,.985) !important; box-shadow: 0 24px 55px rgba(0,0,0,.68) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; }
body.pa-premium #mobile-navigation a { display: flex !important; align-items: center !important; min-height: 3.25rem !important; padding: .8rem .9rem !important; border-bottom: 1px solid rgba(202,216,234,.12) !important; color: #f5f7fb !important; font-size: .98rem !important; font-weight: 650 !important; line-height: 1.3 !important; }
body.pa-premium #mobile-navigation a:last-child { border-bottom: 0 !important; }
body.pa-premium #mobile-navigation a:hover, body.pa-premium #mobile-navigation a:focus-visible { color: #8dcbff !important; background: rgba(7,92,255,.1) !important; }
body.pa-premium header button[aria-controls="mobile-navigation"] { color: #fff !important; border: 1px solid rgba(202,216,234,.28); border-radius: .25rem; background: rgba(255,255,255,.04); }

body.pa-premium section[aria-labelledby="hero-heading"] {
  min-height: min(940px, 100svh) !important;
  padding-top: 6rem;
  background: linear-gradient(90deg, rgba(1, 3, 6, 0.97), rgba(1, 3, 6, 0.62) 52%, rgba(5, 13, 24, 0.12)) !important;
}

body.pa-premium section[aria-labelledby="hero-heading"] > div.absolute:first-child {
  background: linear-gradient(90deg, rgba(1, 3, 6, 0.86), rgba(1, 3, 6, 0.26)) !important;
  backdrop-filter: none !important;
}

body.pa-premium section[aria-labelledby="hero-heading"] > div.absolute:nth-child(2) {
  opacity: 0.22 !important;
  background: radial-gradient(circle at 72% 48%, rgba(7, 92, 255, 0.28), transparent 58%) !important;
}

body.pa-premium section[aria-labelledby="hero-heading"] #main-content {
  width: min(1440px, calc(100% - 9.5rem));
  margin-left: auto;
  margin-right: auto;
  text-align: left !important;
}

body.pa-premium #hero-heading {
  max-width: 11ch;
  margin-bottom: 2rem !important;
  color: var(--pa-ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--pa-ink) !important;
  font-family: var(--pa-serif) !important;
  font-size: clamp(5rem, 9vw, 9.8rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.075em !important;
  line-height: 0.8 !important;
}

body.pa-premium #hero-heading span { color: var(--pa-blue) !important; -webkit-text-fill-color: var(--pa-blue) !important; }

body.pa-premium section[aria-labelledby="hero-heading"] #main-content > .space-y-8 > div.inline-flex {
  margin-bottom: 1.4rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--pa-cyan) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

body.pa-premium section[aria-labelledby="hero-heading"] #main-content > .space-y-8 > div.inline-flex > span:first-child { display: none; }
body.pa-premium section[aria-labelledby="hero-heading"] #main-content p { max-width: 42rem; margin-left: 0 !important; margin-bottom: 2.4rem !important; color: #b3becd !important; font-size: clamp(1rem, 1.35vw, 1.2rem) !important; line-height: 1.7 !important; }
body.pa-premium section[aria-labelledby="hero-heading"] #main-content p span { color: var(--pa-cyan) !important; }
body.pa-premium section[aria-labelledby="hero-heading"] #main-content > .space-y-8 > div.flex { justify-content: flex-start !important; }

body.pa-premium section[aria-labelledby="hero-heading"] #main-content a,
body.pa-premium #apps .btn-primary,
body.pa-premium #apps .btn-secondary {
  border-radius: 0.2rem !important;
  letter-spacing: -0.01em;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease !important;
}

body.pa-premium section[aria-labelledby="hero-heading"] #main-content a:first-child { border: 1px solid rgba(7, 92, 255, 0.9) !important; background: linear-gradient(110deg, #075cff, #0b3db5) !important; box-shadow: 0 18px 42px rgba(7, 92, 255, 0.22) !important; }
body.pa-premium section[aria-labelledby="hero-heading"] #main-content a:last-child { border-color: var(--pa-line-strong) !important; background: rgba(1, 3, 6, 0.44) !important; }
body.pa-premium section[aria-labelledby="hero-heading"] #main-content a:hover, body.pa-premium #apps .btn-primary:hover, body.pa-premium #apps .btn-secondary:hover { transform: translateY(-3px); }

body.pa-premium #apps {
  scroll-margin-top: 72px;
  padding-top: clamp(6rem, 10vw, 10rem) !important;
  padding-bottom: clamp(7rem, 11vw, 11rem) !important;
  border-top: 1px solid var(--pa-line);
  border-bottom: 1px solid var(--pa-line);
  background: radial-gradient(circle at 68% 8%, rgba(18,70,146,.08), transparent 32rem), linear-gradient(180deg, rgba(2,6,11,.76), rgba(1,3,6,.82)) !important;
}

body.pa-premium #apps > div > div.grid { max-width: 1280px !important; gap: 1px !important; border-top: 1px solid var(--pa-line-strong); border-bottom: 1px solid var(--pa-line-strong); background: var(--pa-line-strong); }
body.pa-premium #apps > div > div.grid > .glass-card.group { min-height: 35rem; padding: clamp(1.45rem, 2.4vw, 2.35rem) !important; border: 0 !important; border-radius: 0 !important; background: linear-gradient(180deg, rgba(5, 13, 24, 0.94), rgba(1, 4, 8, 0.96)) !important; box-shadow: none !important; transform: translateY(var(--pa-card-lift, 0)) perspective(1000px) rotateX(var(--pa-card-rx, 0deg)) rotateY(var(--pa-card-ry, 0deg)); transition: background 0.34s ease, transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.34s ease !important; }
body.pa-premium #apps > div > div.grid > .glass-card.group:nth-child(2) { background: linear-gradient(180deg, rgba(7, 15, 28, 0.97), rgba(3, 7, 14, 0.97)) !important; }
body.pa-premium #apps > div > div.grid > .glass-card.group:nth-child(3) { background: linear-gradient(180deg, rgba(4, 14, 22, 0.97), rgba(2, 7, 12, 0.97)) !important; }
body.pa-premium #apps > div > div.grid > .glass-card.group:nth-child(4) { background: linear-gradient(180deg, rgba(8, 13, 26, 0.97), rgba(2, 6, 14, 0.97)) !important; }
body.pa-premium #apps > div > div.grid > .glass-card.group:hover { --pa-card-lift: -8px; border-bottom: 2px solid var(--pa-blue) !important; background: linear-gradient(180deg, rgba(9, 23, 43, 0.98), rgba(2, 7, 14, 0.98)) !important; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.36) !important; }
body.pa-premium #apps > div > div.grid > .glass-card.group > .absolute { opacity: 0 !important; }
body.pa-premium #apps > div > div.grid > .glass-card.group:hover > .absolute:first-child { opacity: 0.16 !important; }

body.pa-premium #apps > div > div.grid > .glass-card.group > .relative.z-10 > .flex.items-center.mb-6 > .glass-card { width: 4.4rem; height: 4.4rem; flex: 0 0 4.4rem; padding: 0.42rem !important; border: 1px solid var(--pa-line-strong) !important; border-radius: 0.45rem !important; background: rgba(7, 92, 255, 0.11) !important; box-shadow: inset 0 0 26px rgba(7, 92, 255, 0.1); }
body.pa-premium #apps > div > div.grid > .glass-card.group h3 { color: var(--pa-ink) !important; font-family: var(--pa-serif) !important; font-size: clamp(1.65rem, 2.4vw, 2.2rem) !important; font-weight: 400 !important; letter-spacing: -0.045em !important; line-height: 1 !important; }
body.pa-premium #apps > div > div.grid > .glass-card.group span[class*="bg-green"] { padding: 0.25rem 0.55rem !important; border: 1px solid rgba(97, 186, 255, 0.32) !important; border-radius: 999px !important; background: rgba(97, 186, 255, 0.06) !important; color: var(--pa-cyan) !important; font-size: 0.66rem !important; letter-spacing: 0.12em; text-transform: uppercase; }
body.pa-premium #apps > div > div.grid > .glass-card.group p { color: var(--pa-muted) !important; line-height: 1.65 !important; }
body.pa-premium #apps > div > div.grid > .glass-card.group ul { padding-top: 0.4rem; }
body.pa-premium #apps > div > div.grid > .glass-card.group li { padding-top: 0.7rem; border-top: 1px solid rgba(202, 216, 234, 0.11); color: #b9c4d2 !important; font-size: 0.86rem; }
body.pa-premium #apps > div > div.grid > .glass-card.group li svg { color: var(--pa-cyan) !important; }
body.pa-premium #apps .btn-primary { border: 1px solid rgba(7, 92, 255, 0.8) !important; background: linear-gradient(110deg, rgba(7, 92, 255, 0.94), rgba(7, 61, 181, 0.94)) !important; box-shadow: 0 14px 30px rgba(7, 92, 255, 0.18) !important; }
body.pa-premium #apps .btn-secondary { border: 1px solid var(--pa-line-strong) !important; background: rgba(255, 255, 255, 0.025) !important; color: var(--pa-ink) !important; }

body.pa-premium section:nth-of-type(3), body.pa-premium section:nth-of-type(4), body.pa-premium section:nth-of-type(5) { border-top: 1px solid var(--pa-line); background: linear-gradient(180deg, rgba(2,6,12,.76), rgba(1,3,6,.84)) !important; }
body.pa-premium section:nth-of-type(3) h2, body.pa-premium section:nth-of-type(4) h2, body.pa-premium section:nth-of-type(5) h2 { font-family: var(--pa-serif) !important; font-weight: 400 !important; letter-spacing: -0.055em !important; }
body.pa-premium section:nth-of-type(3) .glass-card, body.pa-premium section:nth-of-type(4) .glass-card, body.pa-premium section:nth-of-type(5) .glass-card { border: 1px solid var(--pa-line) !important; border-radius: 0.25rem !important; background: linear-gradient(180deg, rgba(6, 14, 25, 0.9), rgba(2, 6, 12, 0.96)) !important; box-shadow: none !important; }

body.pa-premium .agent-discovery-section { border-top: 1px solid var(--pa-line); background: linear-gradient(180deg, rgba(1,3,6,.82), rgba(2,7,13,.86)) !important; }
body.pa-premium .agent-discovery-section__inner { border-color: var(--pa-line-strong) !important; border-radius: 0.25rem !important; background: linear-gradient(135deg, rgba(5, 13, 24, 0.94), rgba(2, 6, 12, 0.96)) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32) !important; }
body.pa-premium .agent-discovery-section h2 { font-family: var(--pa-serif); font-weight: 400; letter-spacing: -0.045em; }
body.pa-premium .agent-card-grid a, body.pa-premium .agent-links a { border-radius: 0.25rem !important; background: rgba(255, 255, 255, 0.025) !important; }

@media (max-width: 767px) {
  body.pa-premium header.fixed > div.relative > div.flex.justify-between { height: 58px !important; }
  body.pa-premium section[aria-labelledby="hero-heading"] { min-height: auto !important; padding-top: 7rem; padding-bottom: 4rem; }
  body.pa-premium section[aria-labelledby="hero-heading"] #main-content { width: calc(100% - 2.3rem); }
  body.pa-premium #hero-heading { font-size: clamp(3.8rem, 18vw, 5.6rem) !important; line-height: 0.82 !important; }
  body.pa-premium section[aria-labelledby="hero-heading"] #main-content p { font-size: 1rem !important; }
  body.pa-premium section[aria-labelledby="hero-heading"] #main-content > .space-y-8 > div.flex { align-items: stretch !important; flex-direction: column; }
  body.pa-premium section[aria-labelledby="hero-heading"] #main-content a { width: 100%; }
  body.pa-premium #apps { padding: 5.5rem 1.15rem 6rem !important; }
  body.pa-premium #apps > div > div.grid { grid-template-columns: 1fr !important; }
  body.pa-premium #apps > div > div.grid > .glass-card.group { min-height: auto; padding: 1.45rem !important; }
  body.pa-premium #apps > div > div.grid > .glass-card.group > .relative.z-10 > .flex.items-center.mb-6 > .glass-card { width: 3.8rem; height: 3.8rem; flex-basis: 3.8rem; }
  body.pa-premium #apps > div > div.grid > .glass-card.group h3 { font-size: 1.7rem !important; }
  body.pa-premium #apps > div > div.grid > .glass-card.group .flex.gap-4 { flex-direction: column; }
  body.pa-premium #apps > div > div.grid > .glass-card.group .flex.gap-4 > a { width: 100%; }
  .pa-flow-field { opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
  body.pa-premium #apps > div > div.grid > .glass-card.group, body.pa-premium section[aria-labelledby="hero-heading"] #main-content a { transition: none !important; transform: none !important; }
  .pa-flow-cube { transform: rotate(45deg) rotateX(58deg) !important; }
}

/* Premium action system shared by the homepage and product pages. */
body :where(main, section) :where(a, button)[class*="px-"][class*="py-"],
body :where(main, section) :where(.btn-primary, .btn-secondary) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 3.15rem;
  border: 1px solid rgba(184, 211, 244, .28) !important;
  border-radius: .38rem !important;
  color: #f8fbff !important;
  font-weight: 720 !important;
  letter-spacing: -.012em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 12px 28px rgba(0,0,0,.24);
  transition: transform .28s cubic-bezier(.2,.75,.2,1), border-color .28s ease, box-shadow .28s ease, background .28s ease !important;
}

body :where(main, section) :where(a, button)[class*="px-"][class*="py-"]::before,
body :where(main, section) :where(.btn-primary, .btn-secondary)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(115deg, transparent 12%, rgba(255,255,255,.17) 45%, transparent 67%);
  transform: translateX(-125%);
  transition: transform .62s cubic-bezier(.2,.75,.2,1);
}

body :where(main, section) :where(a, button)[class*="px-"][class*="py-"]:hover,
body :where(main, section) :where(.btn-primary, .btn-secondary):hover {
  transform: translateY(-3px);
  border-color: rgba(132, 195, 255, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 38px rgba(0,0,0,.34), 0 0 0 1px rgba(7,92,255,.1);
}

body :where(main, section) :where(a, button)[class*="px-"][class*="py-"]:hover::before,
body :where(main, section) :where(.btn-primary, .btn-secondary):hover::before { transform: translateX(125%); }

body :where(main, section) :where(a, button)[class*="px-"][class*="py-"]:active,
body :where(main, section) :where(.btn-primary, .btn-secondary):active {
  transform: translateY(-1px) scale(.985);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.3);
}

body :where(main, section) :where(a, button)[class*="px-"][class*="py-"]:focus-visible,
body :where(main, section) :where(.btn-primary, .btn-secondary):focus-visible {
  outline: 2px solid #8acbff !important;
  outline-offset: 4px;
}

body :where(main, section) :where(a, button)[class*="bg-gradient"],
body :where(main, section) :where(a, button)[class*="bg-[#0066CC]"],
body :where(main, section) .btn-primary {
  border-color: rgba(97, 174, 255, .72) !important;
  background: linear-gradient(135deg, #1476ff 0%, #075cff 46%, #073ca6 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,20,70,.35), 0 14px 32px rgba(7,92,255,.3), 0 0 0 1px rgba(7,92,255,.08);
}

body :where(main, section) :where(a, button)[class*="bg-gradient"]:hover,
body :where(main, section) :where(a, button)[class*="bg-[#0066CC]"]:hover,
body :where(main, section) .btn-primary:hover {
  background: linear-gradient(135deg, #2b87ff 0%, #0a63ff 48%, #0647c4 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,20,70,.32), 0 20px 46px rgba(7,92,255,.38), 0 0 0 1px rgba(111,190,255,.18);
}

body :where(main, section) .btn-secondary {
  background: linear-gradient(145deg, rgba(14,24,38,.82), rgba(3,8,15,.9)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body :where(main, section) :where(a, button) svg {
  transition: transform .28s cubic-bezier(.2,.75,.2,1), opacity .28s ease;
}

body :where(main, section) :where(a, button):hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  body :where(main, section) :where(a, button)[class*="px-"][class*="py-"]::before,
  body :where(main, section) :where(.btn-primary, .btn-secondary)::before { display: none; }
}

/* Keep homepage actions on the same finish as product-page actions. */
body.pa-premium section[aria-labelledby="hero-heading"] #main-content a,
body.pa-premium #apps :where(.btn-primary, .btn-secondary) { border-radius: .38rem !important; }
body.pa-premium section[aria-labelledby="hero-heading"] #main-content a:first-child,
body.pa-premium #apps .btn-primary {
  border-color: rgba(97,174,255,.72) !important;
  background: linear-gradient(135deg, #1476ff 0%, #075cff 46%, #073ca6 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,20,70,.35), 0 14px 32px rgba(7,92,255,.3), 0 0 0 1px rgba(7,92,255,.08) !important;
}
body.pa-premium section[aria-labelledby="hero-heading"] #main-content a:last-child,
body.pa-premium #apps .btn-secondary {
  background: linear-gradient(145deg, rgba(14,24,38,.82), rgba(3,8,15,.9)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 12px 28px rgba(0,0,0,.24) !important;
}

/* Liquid-lens actions inspired by the supplied translucent capsule reference. */
body :where(main, section) :where(a, button)[class*="px-"][class*="py-"],
body :where(main, section) :where(.btn-primary, .btn-secondary),
body.pa-premium section[aria-labelledby="hero-heading"] #main-content a,
body.pa-premium #apps :where(.btn-primary, .btn-secondary) {
  border-color: rgba(220,238,255,.42) !important;
  border-radius: 999px !important;
  background-color: rgba(10,21,37,.56) !important;
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(119,181,255,.16), 0 14px 34px rgba(0,0,0,.3), 0 0 0 1px rgba(99,178,255,.06) !important;
}

body :where(main, section) :where(a, button)[class*="px-"][class*="py-"]::after,
body :where(main, section) :where(.btn-primary, .btn-secondary)::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 205deg, rgba(93,210,255,.75), rgba(132,117,255,.5), rgba(255,126,206,.42), rgba(255,213,116,.45), rgba(125,255,210,.6), rgba(93,210,255,.75));
  background-size: 180% 180%;
  opacity: .5;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .3s ease, filter .3s ease;
  transform-origin: 50% 50%;
  animation: pa-lens-rim var(--pa-rim-speed, 12.5s) linear var(--pa-rim-delay, 0s) infinite;
}

body :where(main, section) :where(a, button)[class*="px-"][class*="py-"]:hover::after,
body :where(main, section) :where(.btn-primary, .btn-secondary):hover::after { opacity: .92; filter: brightness(1.25); animation-duration: 7s; }

body :where(main, section) :where(a, button)[class*="px-"][class*="py-"]::before,
body :where(main, section) :where(.btn-primary, .btn-secondary)::before {
  animation: pa-liquid-glint var(--pa-glint-speed, 10.8s) cubic-bezier(.55,.08,.35,.96) var(--pa-glint-delay, 0s) infinite;
}

/* Varied timing keeps neighboring liquid buttons from moving in lockstep. */
body :where(main, section) :where(a, button):nth-of-type(2n) {
  --pa-rim-speed: 15.4s;
  --pa-rim-delay: -4.1s;
  --pa-glint-speed: 13.2s;
  --pa-glint-delay: -7.3s;
}

body :where(main, section) :where(a, button):nth-of-type(3n) {
  --pa-rim-speed: 13.8s;
  --pa-rim-delay: -8.7s;
  --pa-glint-speed: 15.1s;
  --pa-glint-delay: -2.6s;
}

body.pa-premium #apps .glass-card.group:nth-child(2) :where(a, button) { --pa-rim-delay: -6.2s; --pa-glint-delay: -9.4s; }
body.pa-premium #apps .glass-card.group:nth-child(3) :where(a, button) { --pa-rim-speed: 17.1s; --pa-rim-delay: -10.8s; --pa-glint-speed: 12.4s; --pa-glint-delay: -4.8s; }
body.pa-premium #apps .glass-card.group:nth-child(4) :where(a, button) { --pa-rim-speed: 14.6s; --pa-rim-delay: -3.4s; --pa-glint-speed: 16.3s; --pa-glint-delay: -11.7s; }

@keyframes pa-lens-rim {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg) brightness(.98); }
  50% { background-position: 100% 50%; filter: hue-rotate(18deg) brightness(1.18); }
  100% { background-position: 0% 50%; filter: hue-rotate(0deg) brightness(.98); }
}

@keyframes pa-liquid-glint {
  0%, 18% { transform: translateX(-135%); opacity: 0; }
  27% { opacity: .72; }
  43% { transform: translateX(135%); opacity: 0; }
  100% { transform: translateX(135%); opacity: 0; }
}

body :where(main, section) :where(a, button)[class*="bg-gradient"],
body :where(main, section) :where(a, button)[class*="bg-[#0066CC]"],
body :where(main, section) .btn-primary,
body.pa-premium section[aria-labelledby="hero-heading"] #main-content a:first-child,
body.pa-premium #apps .btn-primary {
  background: linear-gradient(135deg, rgba(47,145,255,.92), rgba(7,92,255,.86) 48%, rgba(24,54,137,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(68,151,255,.24), 0 16px 38px rgba(7,92,255,.34), 0 0 24px rgba(44,137,255,.1) !important;
}

body :where(main, section) .btn-secondary,
body.pa-premium section[aria-labelledby="hero-heading"] #main-content a:last-child,
body.pa-premium #apps .btn-secondary {
  background: linear-gradient(145deg, rgba(24,39,59,.68), rgba(3,9,17,.72)) !important;
}

body :where(main, section) :where(a, button) > svg:first-child:not(:last-child) {
  box-sizing: content-box;
  padding: .42rem;
  margin: -.42rem .1rem -.42rem -.38rem;
  border: 1px solid rgba(232,244,255,.5);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.4), rgba(43,133,255,.25) 38%, rgba(2,11,24,.76) 74%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.3), 0 5px 14px rgba(0,0,0,.28), 0 0 0 2px rgba(79,170,255,.08);
}

@media (prefers-reduced-motion: reduce) {
  body :where(main, section) :where(a, button)[class*="px-"][class*="py-"]::after,
  body :where(main, section) :where(.btn-primary, .btn-secondary)::after { transition: none; animation: none; }
  body :where(main, section) :where(a, button)[class*="px-"][class*="py-"]::before,
  body :where(main, section) :where(.btn-primary, .btn-secondary)::before { animation: none; }
}