/*
 * Shared polish pass for the static marketing pages. Keep this file focused on
 * low-risk interface details that can layer on top of each page's inline CSS.
 */
:root {
  --polish-ease: cubic-bezier(0.2, 0, 0, 1);
  --polish-ring: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --polish-ring-hover: 0 0 0 1px rgba(255, 255, 255, 0.13);
  --polish-depth: 0 12px 34px rgba(0, 0, 0, 0.26);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body * {
  letter-spacing: 0 !important;
}

h1,
h2,
h3,
.hero h1,
.section h2,
.card .value,
.app-name {
  text-wrap: balance;
}

h1 {
  font-size: 40px !important;
}

.hero h1 {
  font-size: 56px !important;
}

.subtitle,
.hero .subtitle {
  font-size: 18px !important;
}

.docs-content h1 {
  font-size: 28px !important;
}

.docs-content h2 {
  font-size: 22px !important;
}

.docs-content h3 {
  font-size: 17px !important;
}

p,
li,
.subtitle,
.lead,
.section p,
.app-desc,
.card .detail,
.carousel-pitch,
.empty {
  text-wrap: pretty;
}

.badge,
.docs-label,
.terminal-title,
.carousel-label,
.fork-label,
.stat,
.tag,
.filter-tag,
.wallet-count,
.wallet-num,
.carousel-counter,
.docs-content table,
.docs-content code,
pre,
code {
  font-variant-numeric: tabular-nums;
}

.card,
.app-card,
.terminal,
.copy-block,
.fork-section,
.empty,
.rail-card,
.pricing-card,
.tier-card,
.docs-content pre {
  border-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: var(--polish-ring), var(--polish-depth);
}

.card,
.app-card,
.terminal,
.copy-block,
.fork-section,
.empty,
.rail-card,
.pricing-card,
.tier-card {
  transition-property: transform, border-color, box-shadow, background-color;
  transition-duration: 180ms;
  transition-timing-function: var(--polish-ease);
}

.card:hover,
.app-card:hover,
.copy-block:hover,
.fork-section:hover,
.pricing-card:hover,
.tier-card:hover {
  box-shadow: var(--polish-ring-hover), var(--polish-depth);
}

.human-link,
.copy-btn,
.btn-primary,
.btn-ghost,
.topup-btn,
.wallet-go-btn,
.qr-btn,
.qr-close,
.filter-tag,
.carousel-arrow,
a[style*="border:1px"] {
  transition-property: transform, color, background-color, border-color, box-shadow, opacity;
  transition-duration: 150ms;
  transition-timing-function: var(--polish-ease);
}

.human-link,
.copy-btn,
.btn-primary,
.topup-btn,
.wallet-go-btn,
.qr-btn,
.qr-close,
.filter-tag,
.carousel-arrow {
  min-height: 40px;
}

.human-link:active,
.copy-btn:active,
.btn-primary:active,
.btn-ghost:active,
.topup-btn:active,
.wallet-go-btn:active,
.qr-btn:active,
.qr-close:active,
.filter-tag:active,
.carousel-arrow:active,
a[style*="border:1px"]:active {
  transform: scale(0.96);
}

.copy-btn,
.filter-tag,
.carousel-arrow,
a[style*="border:1px"] {
  box-shadow: var(--polish-ring);
}

.copy-btn:hover,
.filter-tag:hover,
.carousel-arrow:hover,
a[style*="border:1px"]:hover {
  box-shadow: var(--polish-ring-hover);
}

.carousel-dot {
  position: relative;
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  background: transparent !important;
}

.carousel-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #1E1E2A;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -50%);
  transition-property: background-color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: var(--polish-ease);
}

.carousel-dot.active::before {
  background: #00FF9F;
  box-shadow: 0 0 0 1px rgba(0, 255, 159, 0.8), 0 0 16px rgba(0, 255, 159, 0.22);
}

.carousel-dot:active::before {
  transform: translate(-50%, -50%) scale(0.96);
}

img:not([src$=".svg"]):not([src^="data:image/svg"]) {
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
}

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

@media (max-width: 720px) {
  h1 {
    font-size: 32px !important;
  }

  .hero h1 {
    font-size: 40px !important;
  }

  .subtitle,
  .hero .subtitle {
    font-size: 16px !important;
  }
}