/* Cross-page polish for legacy static pages. Loaded after page-local styles. */

html,
body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

body {
  background:
    radial-gradient(circle at 16% -8%, rgba(72, 230, 199, .10), transparent 34%),
    radial-gradient(circle at 86% 2%, rgba(255, 125, 144, .08), transparent 30%),
    linear-gradient(180deg, #101415 0%, #0a0d0e 100%) !important;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

:is(
  .topbar,
  .topbar-menu,
  .auth-card,
  .card,
  .panel,
  .pricing-card,
  .example-card,
  .feature-media,
  .stack-media,
  .sample-media,
  .sample-stack-item,
  .media-main,
  .media-side,
  .path-card,
  .deliverable-card,
  .scope-card,
  .package-card,
  .flow-card,
  .guide-card,
  .project-card,
  .workflow-card,
  .workflow-request-form,
  .request-form,
  .toolbox-sidebar,
  .toolbox-toolbar,
  .toolbox-empty
) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018)),
    rgba(20, 24, 25, .86) !important;
  border-color: rgba(255, 255, 255, .115) !important;
  box-shadow: var(--shadow-card) !important;
}

:is(.pricing-card.is-featured, .path-card.is-featured, .package-card) {
  background:
    linear-gradient(180deg, rgba(72, 230, 199, .12), rgba(255, 255, 255, .025)),
    rgba(19, 28, 29, .92) !important;
  border-color: rgba(72, 230, 199, .42) !important;
}

:is(
  button,
  .btn,
  .btn-link,
  .pricing-button,
  .examples-button,
  .ai-button,
  .repair-button,
  .retrieval-button,
  .tool-button,
  .category-btn,
  .topbar-tool-btn,
  .auth-primary,
  .auth-sso,
  .auth-nav-button,
  .lang-btn,
  .tab,
  .ghost,
  .back-btn,
  .small-btn,
  .add-btn,
  .del-btn
) {
  transition:
    transform var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out) !important;
}

:is(
  button,
  .btn,
  .btn-link,
  .pricing-button,
  .examples-button,
  .ai-button,
  .repair-button,
  .retrieval-button,
  .tool-button,
  .category-btn,
  .topbar-tool-btn,
  .auth-primary,
  .auth-sso,
  .auth-nav-button,
  .lang-btn,
  .tab,
  .ghost,
  .back-btn,
  .small-btn,
  .add-btn,
  .del-btn
):hover:not(:disabled) {
  transform: translateY(-1px);
}

:is(
  button,
  .btn,
  .btn-link,
  .pricing-button,
  .examples-button,
  .ai-button,
  .repair-button,
  .retrieval-button,
  .tool-button,
  .category-btn,
  .topbar-tool-btn,
  .auth-primary,
  .auth-sso,
  .auth-nav-button,
  .lang-btn,
  .tab,
  .ghost,
  .back-btn,
  .small-btn,
  .add-btn,
  .del-btn
):active:not(:disabled) {
  transform: translateY(0) scale(.985);
  transition-duration: var(--dur-fast) !important;
}

:is(.pricing-button, .examples-button, .ai-button, .repair-button, .retrieval-button, .tool-button):not(.primary) {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: var(--text-primary) !important;
}

:is(.pricing-button, .examples-button, .ai-button, .repair-button, .retrieval-button, .tool-button):not(.primary):hover {
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(72, 230, 199, .30) !important;
  box-shadow: var(--shadow-glow) !important;
}

:is(.pricing-button, .examples-button, .ai-button, .repair-button, .retrieval-button, .tool-button).primary,
:is(.btn-primary, .auth-primary) {
  background: var(--grad-primary) !important;
  border-color: rgba(72, 230, 199, .34) !important;
  color: var(--text-on-accent) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 14px 30px rgba(0, 0, 0, .28) !important;
}

:is(.pricing-button, .examples-button, .ai-button, .repair-button, .retrieval-button, .tool-button).primary:hover,
:is(.btn-primary, .auth-primary):hover {
  box-shadow: var(--shadow-glow-strong) !important;
}

:is(.kicker, .pricing-kicker) {
  color: var(--accent-primary-2) !important;
}

:is(.pricing-price, .path-price, .package-price, .category-count) {
  color: var(--accent-gold) !important;
}

:is(.pricing-list li)::before {
  background: var(--accent-primary) !important;
}

:is(.feature-media, .stack-media, .example-card, .sample-media, .sample-stack-item, .media-main, .media-side) {
  transition:
    transform var(--dur-slow) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out) !important;
}

:is(.feature-media, .stack-media, .example-card, .sample-media, .sample-stack-item, .media-main, .media-side):hover {
  border-color: rgba(72, 230, 199, .28) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

.workflow-node {
  background: rgba(20, 24, 25, .92) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

.workflow-node.is-error {
  background: rgba(42, 22, 25, .90) !important;
  border-color: rgba(255, 125, 144, .42) !important;
}

.workflow-line,
.repair-hero-visual::before {
  background: linear-gradient(90deg, rgba(72, 230, 199, .10), rgba(72, 230, 199, .84)) !important;
}

@media (max-width: 900px) {
  :is(.feature-media, .sample-media, .media-main) {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }

  :is(.stack-media, .sample-stack-item, .media-side img) {
    min-height: 0 !important;
  }

  .example-card.is-vertical {
    grid-template-rows: auto auto !important;
  }

  .repair-hero-visual {
    overflow: hidden !important;
  }

  .workflow-node {
    width: min(142px, 40vw) !important;
    min-height: 68px !important;
  }

  .workflow-node.is-input { right: 18px !important; }
  .workflow-node.is-bind { right: 94px !important; }
  .workflow-node.is-run { right: 28px !important; }
  .workflow-node.is-output { right: 106px !important; }
  .workflow-node.is-error { right: 14px !important; }
}

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