:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050608;
  --bg-mid: #07080b;
  --panel: rgba(10, 10, 11, 0.96);
  --header-bg: rgba(10, 10, 11, 0.94);
  --surface: #111214;
  --surface-2: #0b0c0e;
  --border: #242629;
  --text: #f5f5f5;
  --muted: #8a8f98;
  --overlay: rgba(0, 0, 0, 0.72);
  --ring: rgba(59, 130, 246, 0.22);
  --ring-outline: rgba(255, 255, 255, 0.04);
  --shadow-outline: rgba(255, 255, 255, 0.02);
  --shadow-depth: rgba(0, 0, 0, 0.5);
  --ambient-top: none;
  --ambient-bottom: none;
  --accent-text: #93c5fd;
  --skeleton: #374151;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-mid: #ffffff;
  --panel: rgba(255, 255, 255, 0.94);
  --header-bg: rgba(255, 255, 255, 0.88);
  --surface: #ffffff;
  --surface-2: #f1f5fa;
  --border: #d7e0eb;
  --text: #111827;
  --muted: #5f6c80;
  --overlay: rgba(15, 23, 42, 0.38);
  --ring: rgba(59, 130, 246, 0.14);
  --ring-outline: rgba(15, 23, 42, 0.08);
  --shadow-outline: rgba(15, 23, 42, 0.07);
  --shadow-depth: rgba(15, 23, 42, 0.08);
  --ambient-top: none;
  --ambient-bottom: none;
  --accent-text: #2563eb;
  --skeleton: #e5e7eb;
}

:root[data-theme="system"] {
  color-scheme: dark;
  --bg: #050608;
  --bg-mid: #07080b;
  --panel: rgba(10, 10, 11, 0.96);
  --header-bg: rgba(10, 10, 11, 0.94);
  --surface: #111214;
  --surface-2: #0b0c0e;
  --border: #242629;
  --text: #f5f5f5;
  --muted: #8a8f98;
  --overlay: rgba(0, 0, 0, 0.72);
  --ring: rgba(59, 130, 246, 0.22);
  --ring-outline: rgba(255, 255, 255, 0.04);
  --shadow-outline: rgba(255, 255, 255, 0.02);
  --shadow-depth: rgba(0, 0, 0, 0.5);
  --ambient-top: none;
  --ambient-bottom: none;
  --accent-text: #93c5fd;
  --skeleton: #374151;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg: #ffffff;
    --bg-mid: #ffffff;
    --panel: rgba(255, 255, 255, 0.94);
    --header-bg: rgba(255, 255, 255, 0.88);
    --surface: #ffffff;
    --surface-2: #f1f5fa;
    --border: #d7e0eb;
    --text: #111827;
    --muted: #5f6c80;
    --overlay: rgba(15, 23, 42, 0.38);
    --ring: rgba(59, 130, 246, 0.14);
    --ring-outline: rgba(15, 23, 42, 0.08);
    --shadow-outline: rgba(15, 23, 42, 0.07);
    --shadow-depth: rgba(15, 23, 42, 0.08);
    --ambient-top: none;
    --ambient-bottom: none;
    --accent-text: #2563eb;
    --skeleton: #e5e7eb;
  }
}

html {
  background: var(--bg);
  min-height: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: "Manrope", sans-serif;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg-mid) 42%, var(--bg) 100%);
  color: var(--text);
  min-height: 100vh;
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

html.modal-open,
body.modal-open {
  overflow: hidden;
}

/* Headings use the same font as body text */
h1,
h2,
h3 {
  font-family: "Manrope", sans-serif;
}

.bg-panel {
  background: var(--panel);
}

.bg-surface {
  background: var(--surface);
}

.bg-surface-2 {
  background: var(--surface-2);
}

.border-base {
  border-color: var(--border);
}

.text-muted {
  color: var(--muted);
}

.text-strong {
  color: var(--text);
}

.accent-text {
  color: var(--accent-text);
}

.brand-logo {
  display: block;
  height: auto;
  width: 140px;
  max-width: 100%;
}

.brand-logo-sm {
  width: 140px;
}

.brand-subtitle {
  color: var(--muted);
  display: block;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 0.75rem;
  margin-inline-start: 0.12rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-logo-light {
  display: none;
}

:root[data-theme="light"] .brand-logo-dark {
  display: none;
}

:root[data-theme="light"] .brand-logo-light {
  display: block;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .brand-logo-dark {
    display: none;
  }

  :root[data-theme="system"] .brand-logo-light {
    display: block;
  }
}

.payment-flow-icon-defs {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.payment-flow-stage {
  container-type: inline-size;
  height: 18rem;
  margin-top: 1.5rem;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}

.payment-flow-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100%;
}

.payment-flow-lane {
  min-width: 0;
  overflow: hidden;
}

.payment-flow-lane:nth-child(3) {
  display: none;
}

.payment-flow-track {
  animation: payment-flow-down 22s linear infinite;
  display: grid;
  transform: translateY(-50%);
  will-change: transform;
}

.payment-flow-set {
  display: grid;
  gap: 0.55rem;
  padding-bottom: 0.55rem;
}

.payment-flow-lane:nth-child(2) .payment-flow-track {
  animation-delay: -7s;
  animation-duration: 25s;
}

.payment-flow-lane:nth-child(3) .payment-flow-track {
  animation-delay: -11s;
  animation-duration: 23s;
}

.payment-flow-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: 0.48rem;
  min-height: 5.15rem;
  padding: 0.72rem;
}

.payment-flow-card-top {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  justify-content: space-between;
  min-width: 0;
}

.payment-flow-mark {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.05rem;
  justify-content: center;
  width: 2.05rem;
}

.payment-flow-icon {
  display: block;
  height: 1.42rem;
  width: 1.42rem;
}

.payment-flow-icon-wide {
  height: 1.15rem;
  width: 3.3rem;
}

.payment-flow-icon-paytr {
  height: 0.9rem;
  width: 2.65rem;
}

.payment-flow-status {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 0.95rem;
  padding: 0.25rem 0.525rem;
  white-space: nowrap;
}

.payment-flow-name {
  color: var(--text);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1rem;
}

.payment-flow-note {
  color: var(--muted);
  font-size: 0.775rem;
  font-weight: 400;
  line-height: 1.1rem;
}

@container (min-width: 24rem) {
  .payment-flow-stage {
    height: 19rem;
  }

  .payment-flow-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .payment-flow-lane:nth-child(3) {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .payment-flow-track {
    animation: none;
    transform: none;
  }
}

.payment-method-card-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .payment-method-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .payment-method-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes payment-flow-down {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translateY(0);
  }
}

.ambient-top {
  background: var(--ambient-top);
  opacity: 0.58;
  z-index: 0;
}

.ambient-bottom {
  background: var(--ambient-bottom);
  opacity: 0.36;
  z-index: 0;
}

.enterprise-hero-band {
  background:
    radial-gradient(ellipse at 18% 4%, rgba(59, 130, 246, 0.075), transparent 34%), radial-gradient(ellipse at 82% 0%, rgba(14, 165, 233, 0.055), transparent 32%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.26), transparent 58%), var(--bg);
}

.enterprise-hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

.enterprise-hero-band::after {
  content: "";
  position: absolute;
  inset: auto 8% 0 auto;
  width: min(520px, 48vw);
  height: min(520px, 48vw);
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.052), transparent 64%);
  filter: blur(26px);
  pointer-events: none;
}

:root[data-theme="light"] .enterprise-hero-band {
  background:
    radial-gradient(circle at 8% 18%, rgba(59, 130, 246, 0.14), transparent 30%), radial-gradient(circle at 90% 8%, rgba(14, 165, 233, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(219, 234, 254, 0.72), transparent 58%), var(--bg);
}

.enterprise-signal-line {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.62), rgba(14, 165, 233, 0.14), transparent);
}

.hero-center-stage {
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 1rem 0 1rem;
  position: relative;
  text-align: center;
  width: 100%;
}

.hero-metric-strip {
  --hero-divider: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)), rgba(9, 14, 24, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.35rem;
  max-width: 46rem;
  overflow: hidden;
  width: 100%;
}

.hero-metric {
  border-color: var(--hero-divider);
  padding: 0.72rem 0.65rem;
}

.hero-metric:nth-child(odd) {
  border-inline-end: 1px solid var(--hero-divider);
}

.hero-metric:nth-child(n + 3) {
  border-top: 1px solid var(--hero-divider);
}

.hero-metric-label {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 0.9rem;
  text-transform: uppercase;
}

.hero-metric-value {
  color: var(--text);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.45rem;
  margin-top: 0.12rem;
}

.hero-benefit-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
  max-width: 44rem;
}

@media (max-width: 743px) {
  .hero-benefit-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }
}

.hero-benefit-pill {
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  align-items: center;
  backdrop-filter: blur(12px) saturate(135%);
  background: rgba(9, 14, 24, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.76rem;
  gap: 0.4rem;
  justify-content: center;
  line-height: 1rem;
  padding: 0.42rem 0.68rem;
  white-space: nowrap;
}

:root[data-theme="light"] .hero-metric-strip {
  --hero-divider: rgba(15, 23, 42, 0.07);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.26)), rgba(255, 255, 255, 0.34);
  border-color: rgba(148, 163, 184, 0.28);
}

:root[data-theme="light"] .hero-metric,
:root[data-theme="light"] .hero-metric:nth-child(odd),
:root[data-theme="light"] .hero-metric:nth-child(n + 3) {
  border-color: rgba(15, 23, 42, 0.07);
}

:root[data-theme="light"] .hero-benefit-pill {
  background: rgba(255, 255, 255, 0.34);
  border-color: rgba(15, 23, 42, 0.07);
}

@media (min-width: 640px) {
  .hero-metric-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-metric {
    border-inline-end: 1px solid var(--hero-divider);
    border-top: 0;
    padding: 0.78rem 0.75rem;
  }

  .hero-metric:nth-child(odd) {
    border-inline-end: 1px solid var(--hero-divider);
  }

  .hero-metric:nth-child(n + 3) {
    border-top: 0;
  }

  .hero-metric:last-child {
    border-inline-end: 0;
  }
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .hero-metric-strip {
    --hero-divider: rgba(15, 23, 42, 0.07);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.26)), rgba(255, 255, 255, 0.34);
    border-color: rgba(148, 163, 184, 0.28);
  }

  :root[data-theme="system"] .hero-metric,
  :root[data-theme="system"] .hero-metric:nth-child(odd),
  :root[data-theme="system"] .hero-metric:nth-child(n + 3) {
    border-color: rgba(15, 23, 42, 0.07);
  }

  :root[data-theme="system"] .hero-benefit-pill {
    background: rgba(255, 255, 255, 0.34);
    border-color: rgba(15, 23, 42, 0.07);
  }
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .enterprise-hero-band {
    background:
      radial-gradient(circle at 8% 18%, rgba(59, 130, 246, 0.14), transparent 30%), radial-gradient(circle at 90% 8%, rgba(14, 165, 233, 0.1), transparent 32%),
      linear-gradient(180deg, rgba(219, 234, 254, 0.72), transparent 58%), var(--bg);
  }
}

.hero-panel {
  background:
    radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.12), transparent 30%), radial-gradient(circle at 84% 18%, rgba(14, 165, 233, 0.08), transparent 32%),
    radial-gradient(circle at 72% 86%, rgba(37, 99, 235, 0.07), transparent 36%), linear-gradient(135deg, rgba(17, 18, 20, 0.96), rgba(8, 12, 18, 0.98) 54%, rgba(3, 7, 18, 0.96));
}

:root[data-theme="light"] .hero-panel {
  background:
    radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.12), transparent 30%), radial-gradient(circle at 84% 18%, rgba(14, 165, 233, 0.09), transparent 32%),
    radial-gradient(circle at 72% 86%, rgba(37, 99, 235, 0.07), transparent 36%), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.96) 54%, rgba(226, 232, 240, 0.94));
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .hero-panel {
    background:
      radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.12), transparent 30%), radial-gradient(circle at 84% 18%, rgba(14, 165, 233, 0.09), transparent 32%),
      radial-gradient(circle at 72% 86%, rgba(37, 99, 235, 0.07), transparent 36%), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.96) 54%, rgba(226, 232, 240, 0.94));
  }
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.13) 1px, transparent 1px), linear-gradient(to bottom, rgba(148, 163, 184, 0.13) 1px, transparent 1px),
    linear-gradient(135deg, rgba(59, 130, 246, 0.055), transparent 36%);
  background-size:
    42px 42px,
    42px 42px,
    auto;
  mask-image: linear-gradient(90deg, black 0%, black 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 58%, transparent 100%);
}

.hero-square {
  position: absolute;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)), rgba(59, 130, 246, 0.075);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 18px 42px rgba(15, 23, 42, 0.24);
  transform: rotate(10deg);
}

.hero-square:nth-child(1) {
  width: 108px;
  height: 108px;
  top: -26px;
  left: 7%;
}

.hero-square:nth-child(2) {
  width: 72px;
  height: 72px;
  top: 18%;
  right: 7%;
  transform: rotate(-14deg);
}

.hero-square:nth-child(3) {
  width: 132px;
  height: 132px;
  bottom: -48px;
  left: 46%;
  transform: rotate(22deg);
}

.hero-square:nth-child(4) {
  width: 90px;
  height: 90px;
  bottom: 13%;
  right: 24%;
  transform: rotate(8deg);
}

.hero-square:nth-child(5) {
  width: 48px;
  height: 48px;
  top: 48%;
  right: 40%;
  border-radius: 9999px;
  transform: none;
}

.review-proof-shell {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  width: 100%;
}

.review-proof-card {
  align-items: stretch;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)), rgba(9, 14, 24, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  box-shadow: none;
  display: inline-grid;
  gap: 0.2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 100%;
  overflow: hidden;
  padding: 0.25rem;
  width: min(100%, 24rem);
}

:root[data-theme="light"] .review-proof-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)), rgba(255, 255, 255, 0.36);
  border-color: rgba(148, 163, 184, 0.34);
  box-shadow: none;
}

.review-proof-item {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: var(--radius);
  color: var(--text);
  display: grid;
  gap: 0.34rem;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  min-height: 4.2rem;
  min-width: 0;
  padding: 0.46rem 0.24rem;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.review-proof-item:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="light"] .review-proof-item {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(15, 23, 42, 0.055);
}

:root[data-theme="light"] .review-proof-item:hover {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(15, 23, 42, 0.08);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .review-proof-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)), rgba(255, 255, 255, 0.36);
    border-color: rgba(148, 163, 184, 0.34);
    box-shadow: none;
  }

  :root[data-theme="system"] .review-proof-item {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(15, 23, 42, 0.055);
  }

  :root[data-theme="system"] .review-proof-item:hover {
    background: rgba(255, 255, 255, 0.42);
    border-color: rgba(15, 23, 42, 0.08);
  }
}

.review-proof-logo-frame {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-width: 0;
}

.review-proof-copy {
  display: grid;
  gap: 0.18rem;
  justify-items: center;
  min-width: 0;
  width: 100%;
}

.review-proof-grade {
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.review-proof-meta {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  gap: 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-proof-platform,
.review-proof-separator {
  display: none;
}

@media (min-width: 640px) {
  .review-proof-card {
    gap: 0.25rem;
    grid-template-columns: repeat(6, minmax(0, auto));
    padding: 0.35rem;
    width: auto;
  }

  .review-proof-item {
    gap: 0.55rem;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    min-height: 3rem;
    min-width: auto;
    padding: 0.48rem 0.55rem;
    text-align: start;
  }

  .review-proof-logo-frame {
    min-width: 1.35rem;
  }

  .review-proof-copy {
    justify-items: start;
    width: auto;
  }

  .review-proof-grade {
    font-size: 0.76rem;
  }

  .review-proof-meta {
    font-size: 0.67rem;
    justify-content: flex-start;
    line-height: 1.2;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  .review-proof-meta > span {
    flex: 0 0 auto;
  }

  .review-proof-platform,
  .review-proof-separator {
    display: inline;
  }
}

@media (min-width: 743px) and (max-width: 1025px) {
  span.review-proof-platform {
    display: none;
  }
  span.review-proof-separator {
    display: none;
  }
}

@media (min-width: 743px) and (max-width: 819px) {
  .review-proof-item {
    padding: 0.38rem 0.32rem !important;
  }
}

@media (min-width: 821px) {
  .review-proof-item {
    min-width: auto;
    padding: 0.48rem 1.47rem;
  }
}

@media (min-width: 1025px) {
  .review-proof-item {
    min-width: max-content !important;
    padding: 0.48rem 0.52rem !important;
  }
}

.sourceforge-wordmark,
.g2-wordmark,
.trustpilot-wordmark,
.producthunt-wordmark,
.topbusinesssoftware-wordmark,
.slashdot-wordmark {
  display: block;
  height: 1.1rem;
  width: auto;
}

.trustpilot-wordmark {
  max-width: 88px;
}

.g2-wordmark {
  max-width: 42px;
}

.sourceforge-wordmark {
  max-width: 96px;
}

.producthunt-wordmark {
  max-width: 96px;
}

.topbusinesssoftware-wordmark {
  max-width: 96px;
}

.slashdot-wordmark {
  max-width: 96px;
}

.walkthrough-hero-panel {
  background: var(--panel);
}

.walkthrough-hero-panel::before {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(118deg, transparent 0 42%, rgba(148, 163, 184, 0.11) 42% 42.35%, transparent 42.35% 100%),
    linear-gradient(62deg, transparent 0 62%, rgba(59, 130, 246, 0.045) 62% 62.35%, transparent 62.35% 100%);
  background-size:
    170px 170px,
    230px 230px;
  mask-image: linear-gradient(90deg, black 0%, black 74%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 74%, transparent 100%);
  pointer-events: none;
}

:root[data-theme="light"] .walkthrough-hero-panel {
  background: var(--panel);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .walkthrough-hero-panel {
    background: var(--panel);
  }
}

.theme-btn[data-active="true"] {
  border-color: rgba(59, 130, 246, 0.66);
  background: rgba(59, 130, 246, 0.16);
  color: var(--text);
}

@media (min-width: 1280px) {
  .login-action-stack {
    padding-top: 22px;
  }
}

.top-select-trigger {
  background: var(--panel);
}

.top-select-trigger[data-open="true"] {
  border-color: rgba(59, 130, 246, 0.66);
  background: rgba(59, 130, 246, 0.14);
  color: var(--text);
}

.top-select-menu {
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  box-shadow:
    0 0 0 1px var(--shadow-outline),
    0 16px 36px var(--shadow-depth);
}

.top-select-arrow {
  transition: transform 0.2s ease;
}

.top-select-trigger[data-open="true"] .top-select-arrow {
  transform: rotate(180deg);
}

.top-select-flag {
  border-radius: 0.1875rem;
  display: block;
  flex: 0 0 1.125rem;
  height: 0.75rem;
  object-fit: cover;
  width: 1.125rem;
}

.top-select-option i,
.top-select-option svg {
  opacity: 0;
}

.top-select-option[data-active="true"] {
  background: rgba(59, 130, 246, 0.14);
  color: var(--text);
}

.top-select-option[data-active="true"] i,
.top-select-option[data-active="true"] svg {
  opacity: 1;
}

.top-currency-select-option i,
.top-currency-select-option svg {
  opacity: 1;
}

.top-currency-select-option[data-active="true"] {
  background: rgba(59, 130, 246, 0.14);
  color: var(--text);
}

.top-currency-select-option[data-active="true"] i,
.top-currency-select-option[data-active="true"] svg {
  opacity: 1;
}

.free-tools-trigger[data-open="true"] {
  background: var(--surface);
  color: var(--text);
}

.free-tools-platform-trigger[data-open="true"] .free-tools-platform-arrow {
  transform: rotate(180deg);
  color: var(--text);
}

.free-tools-platform-arrow {
  color: var(--muted);
  transition: transform 0.2s ease;
}

.free-tools-platform-trigger:hover .free-tools-platform-arrow {
  color: var(--text);
}

input[data-tools-search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

input[data-tools-search]::-ms-clear {
  display: none;
}

.free-tools-search-clear {
  color: var(--muted);
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.free-tools-search-clear:hover {
  color: var(--text);
}

.free-tools-panel {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(59, 130, 246, 0.12), transparent 34%), radial-gradient(ellipse at 84% 8%, rgba(14, 165, 233, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.18), transparent 54%), var(--bg);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

:root[data-theme="light"] .free-tools-panel {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(59, 130, 246, 0.14), transparent 34%), radial-gradient(ellipse at 84% 8%, rgba(14, 165, 233, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(226, 232, 240, 0.76), transparent 54%), var(--bg);
}

.free-tools-shell {
  background: transparent;
}

.free-tools-panel {
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.free-tools-scroll {
  overflow: visible;
}

.free-tools-category[data-active="true"] {
  border-color: rgba(96, 165, 250, 0.58);
  background: rgba(59, 130, 246, 0.14);
  color: var(--text);
}

.free-tools-platform-menu {
  box-shadow:
    0 0 0 1px var(--shadow-outline),
    0 18px 42px var(--shadow-depth);
}

.free-tools-card[data-hidden="true"] {
  display: none;
}

.free-tools-card {
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.free-tools-card:hover {
  border-color: rgba(96, 165, 250, 0.48);
  transform: translateY(-2px);
}

.faq-card summary {
  list-style: none;
}

.faq-card summary::-webkit-details-marker {
  display: none;
}

.faq-chip {
  border: 1px solid var(--border);
  background: var(--surface);
}

.served-countries-card {
  overflow: hidden;
}

.served-region-stack {
  display: grid;
  gap: 1.2rem;
}

.served-countries-expand {
  max-height: 38rem;
  min-width: 0;
  overflow: hidden;
  position: relative;
  transition: max-height 0.35s ease;
}

.served-countries-expand::after {
  background: linear-gradient(180deg, rgba(10, 10, 11, 0), rgba(10, 10, 11, 0.78) 62%, var(--panel) 100%);
  bottom: 0;
  content: "";
  height: 9rem;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}

:root[data-theme="light"] .served-countries-expand::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 62%, rgba(255, 255, 255, 0.98) 100%);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .served-countries-expand::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 62%, rgba(255, 255, 255, 0.98) 100%);
  }
}

.served-countries-expand[data-expanded="true"] {
  max-height: 10000rem;
  overflow: visible;
}

.served-countries-expand[data-expanded="true"]::after {
  opacity: 0;
}

.served-countries-expand-control {
  align-items: center;
  bottom: 0.85rem;
  display: flex;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 2;
}

.served-countries-expand[data-expanded="true"] .served-countries-expand-control {
  margin-top: 1rem;
  position: static;
}

.served-countries-toggle {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--text);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.35rem;
  justify-content: center;
  min-height: 2.05rem;
  padding: 0.45rem 0.78rem;
  pointer-events: auto;
  transition: background-color 0.2s ease;
}

.served-countries-toggle:hover {
  background: var(--surface-2);
}

.served-countries-toggle svg {
  transition: transform 0.2s ease;
}

.served-countries-expand[data-expanded="true"] .served-countries-toggle svg {
  transform: rotate(180deg);
}

.served-region-section {
  min-width: 0;
}

.served-region-header {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.65rem;
}

.served-region-title {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.1rem;
}

.served-region-count {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1rem;
  text-transform: uppercase;
}

.served-country-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.served-country-pill {
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 10.5rem;
  min-width: 0;
  padding: 0.85rem;
  text-decoration: none;
}

.served-country-top {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  min-width: 0;
  width: 100%;
}

.served-country-flag {
  aspect-ratio: 4 / 3;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.2rem;
  display: block;
  flex: 0 0 auto;
  object-fit: cover;
  width: 1.55rem;
}

.served-country-name {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.served-country-title {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2rem;
}

.served-country-text {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.22rem;
  margin: 0;
}

@media (min-width: 768px) {
  .served-countries-expand {
    max-height: 46rem;
  }
}

.served-countries-expand[data-expanded="true"] {
  max-height: 10000rem;
  overflow: visible;
}

.served-countries-expand[data-expanded="true"]::after {
  display: none;
  opacity: 0;
}

.compare-card {
  overflow: hidden;
}

.compare-logo-frame {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 0;
  padding: 0;
}

.compare-logo {
  width: 7.25rem;
}

.compare-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: 0;
  overflow: hidden;
}

.compare-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
}

.compare-cell {
  align-items: flex-start;
  border-top: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.55rem;
  line-height: 1.25rem;
  min-width: 0;
  padding: 0.78rem;
}

.compare-row:first-child .compare-cell {
  border-top: 0;
}

.compare-head .compare-cell {
  align-items: center;
  background: var(--surface);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1rem;
  text-transform: uppercase;
}

.compare-feature {
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 800;
}

.compare-other {
  background: rgba(239, 68, 68, 0.055);
}

.compare-smmturk {
  background: rgba(34, 197, 94, 0.075);
  color: var(--text);
}

.compare-cell strong {
  color: var(--text);
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.15rem;
  margin-bottom: 0.12rem;
}

.compare-icon {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.35rem;
  justify-content: center;
  margin-top: 0.05rem;
  width: 1.35rem;
}

.compare-icon-warning {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.26);
  color: #ef4444;
}

.compare-icon-strong {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.get-started-card {
  overflow: hidden;
}

.get-started-layout {
  display: grid;
  gap: 1rem;
}

.get-started-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.get-started-meta-item {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
}

.get-started-steps {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  overflow: hidden;
}

.get-started-step {
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  padding: 0.85rem;
}

.get-started-step:first-child {
  border-top: 0;
}

.get-started-step-number {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.get-started-primary,
.get-started-secondary {
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.get-started-primary {
  background: #3b82f6;
  border: 1px solid #3b82f6;
  color: #ffffff;
}

.get-started-secondary {
  background: var(--surface);
  color: var(--muted);
}

.get-started-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.get-started-secondary:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.get-started-button-icon {
  align-items: center;
  border-radius: var(--radius-sm);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.4rem;
  justify-content: center;
  width: 1.4rem;
}

.get-started-primary .get-started-button-icon {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: currentColor;
}

.get-started-secondary .get-started-button-icon {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.22);
  color: var(--accent-text);
}

@media (min-width: 768px) {
  .get-started-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .get-started-step {
    border-inline-start: 1px solid var(--border);
    border-top: 0;
  }

  .get-started-step:first-child {
    border-inline-start: 0;
  }
}

@media (min-width: 1024px) {
  .get-started-layout {
    align-items: stretch;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .get-started-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .get-started-step {
    border-inline-start: 0;
    border-top: 1px solid var(--border);
  }

  .get-started-step:first-child {
    border-top: 0;
  }
}

.campaign-services-card {
  overflow: hidden;
}

.campaign-services-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.campaign-services-intro {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
  padding: 1rem;
}

.campaign-platform-filter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem;
}

.campaign-platform-filter-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  min-width: 0;
}

.campaign-platform-filter-title {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.15rem;
}

.campaign-platform-filter-copy {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.15rem;
}

.campaign-platform-scroll {
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.campaign-platform-scroll::before,
.campaign-platform-scroll::after {
  bottom: 0;
  content: "";
  opacity: 1;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity 0.2s ease;
  width: 2.5rem;
  z-index: 2;
}

.campaign-platform-scroll::before {
  background: linear-gradient(90deg, var(--surface) 0%, rgba(0, 0, 0, 0) 100%);
  left: 0;
}

.campaign-platform-scroll::after {
  background: linear-gradient(270deg, var(--surface) 0%, rgba(0, 0, 0, 0) 100%);
  right: 0;
}

.campaign-platform-scroll[data-scroll-left="false"]::before,
.campaign-platform-scroll[data-scroll-right="false"]::after {
  opacity: 0;
}

.campaign-platform-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  min-width: 0;
  overflow-x: auto;
  padding-block: 0.05rem;
  padding-inline: 0.05rem 2.35rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
  cursor: grab;
}

.campaign-platform-list::-webkit-scrollbar {
  display: none;
}

.campaign-platform-list.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.campaign-platform-button {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-weight: 800;
  gap: 0.38rem;
  min-height: 2.1rem;
  padding: 0.44rem 0.68rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  white-space: nowrap;
}

.campaign-platform-button:hover,
.campaign-platform-button[data-active="true"] {
  background: var(--surface-2);
  color: var(--text);
}

.campaign-platform-icon {
  display: block;
  fill: currentColor;
  height: 0.95rem;
  width: 0.95rem;
}

.campaign-services-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}

.campaign-service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem;
}

.campaign-service-card[data-campaign-visible="false"] {
  display: none;
}

.campaign-service-card[data-campaign-platform="instagram"] {
  order: 10;
}

.campaign-service-card[data-campaign-platform="youtube"] {
  order: 20;
}

.campaign-service-card[data-campaign-platform="tiktok"] {
  order: 30;
}

.campaign-service-card[data-campaign-platform="facebook"] {
  order: 40;
}

.campaign-service-card[data-campaign-platform="x"] {
  order: 50;
}

.campaign-service-card[data-campaign-platform="telegram"] {
  order: 60;
}

.campaign-service-card[data-campaign-platform="spotify"] {
  order: 70;
}

.campaign-service-card[data-campaign-platform="twitch"] {
  order: 80;
}

.campaign-service-card[data-campaign-platform="linkedin"] {
  order: 90;
}

.campaign-service-card[data-campaign-platform="discord"] {
  order: 100;
}

.campaign-service-card[data-campaign-platform="reddit"] {
  order: 110;
}

.campaign-service-card[data-campaign-platform="pinterest"] {
  order: 120;
}

.campaign-service-card[data-campaign-platform="snapchat"] {
  order: 130;
}

.campaign-service-card[data-campaign-platform="soundcloud"] {
  order: 140;
}

.campaign-service-top {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-start;
  min-width: 0;
}

.campaign-service-top h3 {
  margin: 0;
  min-width: 0;
}

.campaign-service-icon {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent-text);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.4rem;
  justify-content: center;
  width: 2.4rem;
}

.campaign-service-title {
  color: var(--text);
  display: inline-flex;
  font-family: inherit;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-decoration: none;
}

.campaign-service-title:hover {
  color: var(--accent-text);
}

.campaign-service-copy {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45rem;
  margin-top: 0.55rem;
}

.campaign-service-points {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.45rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
}

.campaign-service-point {
  align-items: flex-start;
  color: var(--muted);
  display: flex;
  font-size: 0.76rem;
  gap: 0.45rem;
  line-height: 1.18rem;
}

.campaign-service-link {
  align-items: center;
  color: var(--accent-text);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 0.35rem;
  line-height: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  text-decoration: none;
}

.campaign-service-link:hover {
  color: var(--text);
}

@media (min-width: 768px) {
  .campaign-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .campaign-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.footer-links-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .footer-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .compare-table {
    border: 0;
    border-radius: 0;
    gap: 0.75rem;
    overflow: visible;
  }

  .compare-head {
    display: none;
  }

  .compare-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .compare-cell {
    border-top: 1px solid var(--border);
    padding: 0.72rem;
  }

  .compare-cell:first-child {
    border-top: 0;
  }

  .compare-cell::before {
    color: var(--muted);
    content: attr(data-label);
    display: block;
    flex: 0 0 5.75rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1rem;
    text-transform: uppercase;
  }
}

@media (min-width: 1024px) {
  .footer-links-grid {
    column-gap: clamp(1.5rem, 5vw, 5rem);
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
  }
}

.footer-stage {
  overflow: hidden;
  position: relative;
}

.footer-stage > * {
  position: relative;
}

.footer-section-kicker {
  color: var(--accent-text);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1rem;
  text-transform: uppercase;
}

.footer-section-kicker-default {
  color: var(--text);
}

.footer-presence {
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  padding: 1.25rem 0;
}

.footer-presence-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
}

.footer-presence-title {
  color: var(--text);
  font-family: inherit;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
  margin-top: 0.3rem;
}

.footer-presence-copy {
  color: var(--muted);
  line-height: 1.45rem;
  margin-top: 0.45rem;
  max-width: 42rem;
}

.footer-presence-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

.footer-office-grid {
  display: grid;
  gap: 0.75rem;
}

.footer-office-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
  padding: 0.9rem;
  position: relative;
}

.footer-office-top {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  justify-content: flex-start;
}

.footer-office-name {
  color: var(--text);
  font-weight: 800;
  line-height: 1rem;
}

.footer-office-icon {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent-text);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.footer-office-address {
  color: var(--muted);
  line-height: 1.45rem;
  margin-top: 0.65rem;
}

.footer-contact-hub {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
}

.footer-about-hub {
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.7rem;
}

.footer-about-copy {
  min-width: 0;
}

.footer-about-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  min-width: 0;
}

.footer-about-text {
  color: var(--muted);
  line-height: 1.35rem;
  margin-top: 0.35rem;
  max-width: 48rem;
}

.footer-ask-ai-strip {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.footer-ask-ai-button {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  display: inline-flex;
  font-weight: 700;
  gap: 0.5rem;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
  width: 100%;
}

.footer-ask-ai-button:hover {
  background: var(--surface-2);
}

.footer-ask-ai-icon {
  align-items: center;
  color: var(--accent-text);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1rem;
  justify-content: center;
  width: 1rem;
}

.footer-ask-ai-icon svg {
  display: block;
}

.footer-ask-ai-icon-neutral svg,
.footer-ask-ai-icon-neutral svg path {
  fill: currentColor;
}

:root[data-theme="light"] .footer-ask-ai-icon-neutral {
  color: #000000;
}

:root[data-theme="dark"] .footer-ask-ai-icon-neutral,
:root[data-theme="system"] .footer-ask-ai-icon-neutral {
  color: #ffffff;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .footer-ask-ai-icon-neutral {
    color: #000000;
  }
}

@media (min-width: 640px) {
  .footer-ask-ai-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.footer-contact-stack {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.footer-contact-row {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  display: flex;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.footer-contact-icon {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent-text);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.65rem;
  justify-content: center;
  width: 1.65rem;
}

.footer-contact-label {
  color: var(--muted);
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 0.95rem;
  text-transform: uppercase;
}

.footer-contact-value {
  color: var(--text);
  display: block;
  line-height: 1.18rem;
  margin-top: 0.02rem;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .footer-presence-header {
    align-items: flex-start;
    flex-direction: row;
  }

  .footer-office-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-contact-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-about-hub {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .footer-about-actions {
    justify-content: flex-end;
  }

  .footer-ask-ai-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer-contact-stack {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.footer-built-credit {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: inline-flex;
  gap: 0.65rem;
  justify-content: space-between;
  max-width: 100%;
  min-width: 0;
  padding: 0.44rem 0.56rem;
  width: 100%;
}

.footer-built-copy {
  color: var(--muted);
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1rem;
  min-width: 0;
  text-transform: uppercase;
}

.footer-built-logo-link {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
  text-decoration: none;
}

.footer-built-logo {
  display: block;
  height: auto;
  width: 72px;
}

.footer-built-logo-on-light {
  display: none;
}

:root[data-theme="light"] .footer-built-logo-on-dark {
  display: none;
}

:root[data-theme="light"] .footer-built-logo-on-light {
  display: block;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .footer-built-logo-on-dark {
    display: none;
  }

  :root[data-theme="system"] .footer-built-logo-on-light {
    display: block;
  }
}

.footer-status {
  border: 1px solid rgba(16, 185, 129, 0.34);
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.footer-status:hover {
  border-color: rgba(16, 185, 129, 0.54);
  background: rgba(16, 185, 129, 0.14);
  color: #a7f3d0;
}

.footer-social-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.footer-social-link {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  display: inline-flex;
  height: 1.8rem;
  justify-content: center;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
  width: 1.8rem;
}

.footer-social-link:hover {
  background: var(--panel);
  color: var(--text);
}

.footer-social-link svg {
  display: block;
  fill: currentColor;
}

.footer-bottom-row {
  align-items: center;
  border-top: 1px solid var(--border);
  color: var(--muted);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  margin-top: 1rem;
  padding-top: 0.75rem;
  text-align: center;
}

.footer-bottom-copy,
.footer-bottom-social {
  min-width: 0;
}

.footer-bottom-copy {
  line-height: 1.45rem;
  max-width: 52rem;
  width: 100%;
}

.footer-bottom-social {
  justify-content: center;
  justify-self: center;
}

@media (min-width: 768px) {
  .footer-bottom-row {
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    text-align: start;
  }

  .footer-bottom-social {
    justify-content: flex-end;
    justify-self: end;
  }
}

:root[data-theme="light"] .footer-status {
  border-color: rgba(5, 150, 105, 0.24);
  background: rgba(5, 150, 105, 0.08);
  color: #047857;
}

:root[data-theme="light"] .footer-status:hover {
  border-color: rgba(5, 150, 105, 0.4);
  background: rgba(5, 150, 105, 0.12);
  color: #065f46;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .footer-status {
    border-color: rgba(5, 150, 105, 0.24);
    background: rgba(5, 150, 105, 0.08);
    color: #047857;
  }

  :root[data-theme="system"] .footer-status:hover {
    border-color: rgba(5, 150, 105, 0.4);
    background: rgba(5, 150, 105, 0.12);
    color: #065f46;
  }
}

.faq-arrow {
  transition: transform 0.2s ease;
}

.faq-card[open] .faq-arrow {
  transform: rotate(180deg);
}

.cookie-toast {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.cookie-toast[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

.header-glass {
  position: relative;
  z-index: 10;
  background: var(--header-bg);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

.mobile-menu-trigger[data-open="true"] {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.14);
  color: var(--text);
}

.mobile-menu-panel {
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

:root[data-theme="light"] .mobile-menu-panel {
  background: rgba(15, 23, 42, 0.34);
}

.mobile-menu-shell {
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 0 0 1px var(--shadow-outline),
    0 24px 64px var(--shadow-depth);
}

.cookie-glass {
  background: var(--header-bg);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

.welcome-overlay {
  opacity: 0;
  pointer-events: none;
  background: var(--overlay);
  transition: opacity 0.24s ease;
}

.welcome-overlay[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
}

.welcome-modal {
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.welcome-overlay[data-visible="true"] .welcome-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.remember-box {
  border: 1px solid var(--border);
  background: var(--surface);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.remember-icon {
  opacity: 0;
  transform: scale(0.82);
  color: var(--accent-text);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.remember-input:checked + .remember-box {
  border-color: rgba(96, 165, 250, 0.7);
  background: var(--surface-2);
}

.remember-input:checked + .remember-box .remember-icon {
  opacity: 1;
  transform: scale(1);
}

.logo-marquee {
  position: relative;
  overflow: hidden;
}

.logo-marquee::before,
.logo-marquee::after {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
  z-index: 2;
  width: 84px;
  pointer-events: none;
}

.logo-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-mid), transparent);
}

.logo-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-mid), transparent);
}

.logo-marquee-row {
  overflow: hidden;
}

.logo-marquee-track {
  display: flex;
  width: max-content;
  animation: logo-marquee-left 30s linear infinite;
  will-change: transform;
}

.logo-marquee-track.logo-marquee-reverse {
  animation-name: logo-marquee-right;
  animation-duration: 34s;
}

.logo-marquee-group {
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;
  padding-right: 0.75rem;
}

.logo-pill {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), var(--surface);
  padding: 0.62rem 0.9rem;
  color: var(--text);
}

.logo-mark {
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: var(--radius);
  background: rgba(59, 130, 246, 0.14);
  color: var(--accent-text);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
}

.logo-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.logo-icon-pill {
  min-width: 4.5rem;
  justify-content: center;
  border-color: transparent;
  background: transparent;
  padding: 0.75rem 1rem;
  color: var(--muted);
}

.logo-icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: currentColor;
  opacity: 0.8;
}

@keyframes logo-marquee-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes logo-marquee-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track,
  .logo-marquee-track.logo-marquee-reverse {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

.customer-review-track,
.review-video-track {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.customer-review-track::-webkit-scrollbar,
.review-video-track::-webkit-scrollbar {
  display: none;
}

.customer-review-card,
.review-video-card {
  scroll-snap-align: start;
}

@media (min-width: 1024px) {
  .customer-review-card {
    width: calc((100% - 1.5rem) / 3) !important;
    flex: 0 0 calc((100% - 1.5rem) / 3) !important;
  }

  .review-video-card {
    width: calc((100% - 2.25rem) / 4) !important;
    flex: 0 0 calc((100% - 2.25rem) / 4) !important;
  }
}

.review-video-preview {
  background:
    radial-gradient(circle at 22% 24%, rgba(59, 130, 246, 0.12), transparent 50%), radial-gradient(circle at 86% 78%, rgba(37, 99, 235, 0.08), transparent 54%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

@media (max-width: 639px) {
  .customer-review-track,
  .review-video-track {
    flex-direction: row !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 0.5rem !important;
  }

  .customer-review-track {
    padding-left: max(0px, calc((100% - 28rem) / 2));
    padding-right: max(0px, calc((100% - 28rem) / 2));
  }

  .review-video-track {
    padding-left: 0;
    padding-right: 0;
  }

  .customer-review-card {
    width: min(100%, 28rem) !important;
    flex: 0 0 min(100%, 28rem) !important;
    scroll-snap-align: center !important;
  }

  .review-video-card {
    width: 100% !important;
    flex: 0 0 100% !important;
    scroll-snap-align: center !important;
  }

  #customer-review-fade-left,
  #customer-review-fade-right,
  #review-video-fade-left,
  #review-video-fade-right {
    display: none;
  }
}

.walkthrough-demo-video {
  background:
    radial-gradient(circle at 18% 22%, rgba(59, 130, 246, 0.11), transparent 42%), radial-gradient(circle at 84% 78%, rgba(14, 165, 233, 0.07), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.walkthrough-demo-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(148, 163, 184, 0.14) 1px, transparent 1px), linear-gradient(to bottom, rgba(148, 163, 184, 0.14) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.review-video-fade-left {
  background: linear-gradient(to right, var(--bg), transparent);
  display: none !important;
}

.review-video-fade-right {
  background: linear-gradient(to left, var(--bg), transparent);
  display: none !important;
}

@media (max-width: 640px) {
  .logo-marquee::before,
  .logo-marquee::after,
  .review-video-fade-left,
  .review-video-fade-right {
    width: 28px;
  }
}

.review-video-modal-overlay {
  opacity: 0;
  pointer-events: none;
  background: var(--overlay);
  transition: opacity 0.24s ease;
}

.review-video-modal-overlay[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
}

.review-video-modal {
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.review-video-modal-overlay[data-visible="true"] .review-video-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.main-header-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 55;
}

.footer-about {
  padding: 1.25rem 0;
}

.footer-about-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

.footer-about-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
}

.footer-about-title {
  color: var(--text);
  font-family: inherit;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
  margin-top: 0.3rem;
}

.footer-about-copy {
  color: var(--muted);
  line-height: 1.45rem;
  margin-top: 0.45rem;
  max-width: 42rem;
}

.top-select-menu {
  min-height: 0;
  overscroll-behavior: contain;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Chrome / Safari / Edge */
.top-select-menu::-webkit-scrollbar {
  width: 5px;
}

.top-select-menu::-webkit-scrollbar-track {
  background: transparent;
}

.top-select-menu::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 1px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.top-select-menu::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  border: 1px solid transparent;
  background-clip: padding-box;
}

/* =====================================================================
   Design layer: same rules as the console pages
   (flat surfaces, neutral states, one radius scale, shadow-sm)
   ===================================================================== */
:root {
  --radius: 0.5rem;
  --radius-sm: 0.375rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --hover-tint: color-mix(in srgb, var(--text) 4%, var(--surface));
  --press-tint: color-mix(in srgb, var(--text) 8%, var(--surface));
  --select-tint: color-mix(in srgb, var(--text) 7%, var(--surface));
  --focus-border: color-mix(in srgb, var(--text) 30%, var(--border));
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--text) 14%, transparent);
}

/* Softer focus border in light mode */
:root[data-theme="light"] {
  --focus-border: color-mix(in srgb, var(--text) 14%, var(--border));
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --focus-border: color-mix(in srgb, var(--text) 14%, var(--border));
  }
}

/* ---------- Reusable pieces used in the markup ---------- */
.ui-card {
  box-shadow: var(--shadow-sm);
}

.ui-input {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.ui-input:hover {
  background-color: color-mix(in srgb, var(--text) 3%, var(--surface));
  border-color: var(--border);
}

.ui-input:focus,
.ui-input:focus-within,
.ui-input[aria-expanded="true"],
.ui-input[data-open="true"] {
  background-color: var(--surface);
  border-color: var(--focus-border);
  box-shadow: none;
  outline: none;
}

.ui-button:hover {
  background-color: var(--hover-tint);
  border-color: var(--border);
  color: var(--text);
}

.ui-button:active {
  background-color: var(--press-tint);
  border-color: var(--border);
  color: var(--text);
}

.ui-button:focus-visible,
.served-countries-toggle:focus-visible,
.footer-ask-ai-button:focus-visible,
.footer-social-link:focus-visible {
  border-color: var(--border);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* ---------- Hero: no glows, no glass ---------- */
:root[data-theme] .enterprise-hero-band {
  background: var(--bg);
}

.enterprise-hero-band::after {
  display: none;
}

.enterprise-signal-line {
  background: var(--border);
}

:root[data-theme] .hero-metric-strip {
  --hero-divider: var(--border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

:root[data-theme] .hero-metric,
:root[data-theme] .hero-metric:nth-child(odd),
:root[data-theme] .hero-metric:nth-child(n + 3) {
  border-color: var(--border);
}

:root[data-theme] .hero-benefit-pill {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius-sm);
}

:root[data-theme] .hero-panel {
  background: var(--surface);
}

.hero-grid {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px);
  background-size:
    42px 42px,
    42px 42px;
}

.hero-square {
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: none;
}

:root[data-theme] .review-proof-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

:root[data-theme] .review-proof-item {
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-sm);
}

:root[data-theme] .review-proof-item:hover {
  background: var(--hover-tint);
  border-color: transparent;
}

/* ---------- Glass panels become solid ---------- */
.header-glass,
.cookie-glass,
.mobile-menu-shell,
.welcome-modal,
.review-video-modal,
.top-select-menu {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--surface);
}

.mobile-menu-panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root[data-theme] .free-tools-panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--bg);
}

.review-video-preview,
.walkthrough-demo-video {
  background: color-mix(in srgb, var(--text) 5%, var(--panel));
}

.walkthrough-demo-video::before {
  display: none;
}

.logo-pill {
  background: var(--surface);
  border-radius: var(--radius);
}

.logo-icon-pill {
  background: transparent;
}

.logo-mark {
  background: var(--surface-2);
  border-color: var(--border);
}

.get-started-secondary .get-started-button-icon {
  background: var(--surface-2);
  border-color: var(--border);
}

/* ---------- Neutral selected / open states ---------- */
.top-select-trigger[data-open="true"] {
  background: var(--surface);
  border-color: var(--focus-border);
  color: var(--text);
}

.top-select-option[data-active="true"],
.top-currency-select-option[data-active="true"],
.theme-btn[data-active="true"] {
  background: var(--select-tint);
  border-color: transparent;
  color: var(--text);
}

.top-select-option .accent-text,
.top-currency-select-option .accent-text {
  color: var(--text);
}

.free-tools-category[data-active="true"] {
  background: var(--select-tint);
  border-color: var(--border);
  color: var(--text);
}

.free-tools-card:hover {
  background-color: var(--hover-tint);
  border-color: var(--border);
  transform: none;
}

.mobile-menu-trigger[data-open="true"] {
  background: var(--select-tint);
  border-color: var(--border);
  color: var(--text);
}

.remember-input:checked + .remember-box {
  border-color: var(--focus-border);
}

.remember-icon {
  color: var(--text);
}

/* ---------- Neutral hover / pressed for secondary buttons ---------- */
.served-countries-toggle:hover,
.footer-social-link:hover {
  background: var(--hover-tint);
  color: var(--text);
}

.footer-ask-ai-button:hover {
  background: color-mix(in srgb, var(--text) 4%, var(--panel));
}

.served-countries-toggle:active,
.footer-social-link:active {
  background: var(--press-tint);
}

.footer-ask-ai-button:active {
  background: color-mix(in srgb, var(--text) 8%, var(--panel));
}

/* ---------- Badges and pills on the 6px / 8px scale ---------- */
.payment-flow-status,
.get-started-meta-item {
  border-radius: var(--radius-sm);
}

.served-countries-toggle,
.campaign-platform-button {
  border-radius: var(--radius);
}

/* ---------- Elevation for component cards ---------- */
.payment-flow-card,
.served-country-pill,
.campaign-services-intro,
.campaign-platform-filter,
.campaign-service-card,
.compare-table,
.get-started-steps,
.footer-office-card,
.footer-contact-hub,
.footer-about-hub,
.footer-built-credit {
  box-shadow: var(--shadow-sm);
}

@media (max-width: 767px) {
  .compare-table {
    box-shadow: none;
  }

  .compare-row {
    box-shadow: var(--shadow-sm);
  }
}

/* ---------- One card colour: top-level cards on --panel, nested items on --surface ---------- */
.campaign-services-intro,
.campaign-platform-filter,
.campaign-service-card {
  background: var(--panel);
}

.campaign-platform-button,
.campaign-service-icon {
  background: var(--surface);
}

.campaign-platform-button:hover,
.campaign-platform-button[data-active="true"] {
  background: var(--select-tint);
}

.campaign-platform-scroll::before {
  background: linear-gradient(90deg, var(--panel) 0%, rgba(0, 0, 0, 0) 100%);
}

.campaign-platform-scroll::after {
  background: linear-gradient(270deg, var(--panel) 0%, rgba(0, 0, 0, 0) 100%);
}

/* ---------- Footer: same card rule (top-level on --panel, nested on --surface) ---------- */
.footer-office-card,
.footer-contact-hub,
.footer-about-hub,
.footer-social-link {
  background: var(--panel);
}

.footer-office-icon,
.footer-contact-row,
.footer-built-credit {
  background: var(--surface);
}

.footer-contact-icon {
  background: var(--panel);
}

.footer-contact-row:hover {
  background: var(--hover-tint);
}

.footer-contact-row:active {
  background: var(--press-tint);
}

/* ---------- Hero: one content width and one spacing scale ---------- */
:root {
  --hero-width: 56rem;
}

.hero-center-stage {
  padding-bottom: 0;
}

.hero-center-stage > h1,
.hero-center-stage > p {
  max-width: var(--hero-width);
}

.hero-metric-strip {
  margin-top: 1.5rem;
  max-width: var(--hero-width);
}

.hero-benefit-pills,
.hero-benefit-pills[aria-label] {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
  max-width: var(--hero-width);
  width: 100%;
}

.hero-benefit-pill {
  justify-content: center;
  min-width: 0;
  width: 100%;
}

#login-form {
  margin-top: 1rem;
  max-width: var(--hero-width);
}

.review-proof-shell {
  margin-top: 1rem;
  max-width: var(--hero-width);
}

.review-proof-card {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.3rem;
  width: 100%;
}

.review-proof-platform,
.review-proof-separator,
span.review-proof-platform,
span.review-proof-separator {
  display: none !important;
}

.review-proof-card .review-proof-meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wide enough on desktop to show the platform name again */
@media (min-width: 1024px) {
  .review-proof-card .review-proof-meta span.review-proof-platform,
  .review-proof-card .review-proof-meta span.review-proof-separator {
    display: inline !important;
  }
}

@media (min-width: 640px) {
  .hero-benefit-pills,
  .hero-benefit-pills[aria-label] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .review-proof-card .review-proof-item {
    gap: 0.6rem;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: center;
    min-height: 3.25rem;
    min-width: 0 !important;
    padding: 0.5rem 0.75rem !important;
  }
}

/* ---------- Cookie notice: compact card, bottom-right ---------- */
.cookie-card {
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.1);
}

.cookie-policy-link {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent);
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: text-decoration-color 0.2s ease;
}

.cookie-policy-link:hover {
  text-decoration-color: currentColor;
}

/* ---------- Hero: full-width panel with a deep blue mesh wave ---------- */
.hero-shell {
  --hero-base: var(--bg);
  --mesh-crest: #93c5fd;
  --mesh-light: #60a5fa;
  --mesh-mid: #3b82f6;
  --mesh-deep: #1d4ed8;
  --mesh-night: #1e3a8a;
  --mesh-accent: #2563eb;
  --mesh-opacity: 0.95;
  --grain-opacity: 0.22;
  --corner-glow: rgba(96, 165, 250, 0.35);
  background: radial-gradient(38% 34% at 96% 22%, var(--corner-glow), transparent 72%), var(--hero-base);
  border: 1px solid transparent;
  border-radius: 0.75rem;
  isolation: isolate;
  overflow: hidden;
}

/* Main wave: rises from the left, crests near the middle, deepens to navy */
.hero-shell::before {
  background:
    radial-gradient(55% 45% at 18% 18%, var(--mesh-crest), transparent 70%), radial-gradient(45% 55% at 82% 22%, var(--mesh-accent), transparent 72%),
    radial-gradient(60% 60% at 45% 55%, var(--mesh-mid), transparent 75%), radial-gradient(80% 70% at 50% 105%, var(--mesh-night), transparent 75%),
    linear-gradient(180deg, var(--mesh-light) 0%, var(--mesh-mid) 38%, var(--mesh-deep) 100%);
  border-radius: 48% 52% 0 0 / 26% 30% 0 0;
  bottom: -18%;
  content: "";
  filter: blur(42px);
  left: -18%;
  opacity: var(--mesh-opacity);
  pointer-events: none;
  position: absolute;
  right: -18%;
  top: 44%;
  transform: rotate(-6deg);
  z-index: 0;
}

/* Fine grain over the coloured area for a printed, premium texture */
.hero-shell::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%20.55%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E");
  background-size: 160px 160px;
  content: "";
  inset: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 38%, #000 72%);
  mask-image: linear-gradient(180deg, transparent 38%, #000 72%);
  mix-blend-mode: soft-light;
  opacity: var(--grain-opacity);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.hero-shell > * {
  position: relative;
  z-index: 1;
}

:root[data-theme="dark"] .hero-shell,
:root[data-theme="system"] .hero-shell {
  --mesh-crest: #3b82f6;
  --mesh-light: #2563eb;
  --mesh-mid: #1d4ed8;
  --mesh-deep: #1e3a8a;
  --mesh-night: #172554;
  --mesh-accent: #1e40af;
  --mesh-opacity: 0.85;
  --grain-opacity: 0.18;
  --corner-glow: rgba(59, 130, 246, 0.22);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .hero-shell {
    --mesh-crest: #93c5fd;
    --mesh-light: #60a5fa;
    --mesh-mid: #3b82f6;
    --mesh-deep: #1d4ed8;
    --mesh-night: #1e3a8a;
    --mesh-accent: #2563eb;
    --mesh-opacity: 0.95;
    --grain-opacity: 0.22;
    --corner-glow: rgba(96, 165, 250, 0.35);
  }
}

/* The sign-in card on the wave stays opaque */
.hero-shell #login-form {
  background: var(--surface);
}

/* Cookie notice on phones: full-width bottom sheet */
@media (max-width: 639px) {
  .cookie-card {
    box-shadow: 0 -8px 24px rgb(0 0 0 / 0.1);
  }

  .cookie-actions {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
}

/* ---------- Hero motion: slow drifting waves ---------- */
.hero-shell::before {
  animation: hero-wave-drift 18s ease-in-out infinite alternate;
  will-change: transform;
}

/* Lighter crest wave that moves against the main one */
.hero-shell > .hero-wave {
  animation: hero-crest-drift 14s ease-in-out infinite alternate;
  background: radial-gradient(closest-side, var(--mesh-crest), transparent);
  filter: blur(40px);
  height: 55%;
  left: -15%;
  opacity: 0.75;
  pointer-events: none;
  position: absolute;
  top: 40%;
  width: 70%;
  will-change: transform;
  z-index: 0;
}

@keyframes hero-wave-drift {
  0% {
    transform: rotate(-6deg) translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: rotate(-3deg) translate3d(3%, -5%, 0) scale(1.05);
  }

  100% {
    transform: rotate(-9deg) translate3d(-3%, 2%, 0) scale(1.02);
  }
}

@keyframes hero-crest-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(-10deg) scale(1);
  }

  50% {
    transform: translate3d(35%, -10%, 0) rotate(-4deg) scale(1.1);
  }

  100% {
    transform: translate3d(70%, 4%, 0) rotate(-12deg) scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shell::before,
  .hero-shell > .hero-wave {
    animation: none;
  }
}

/* =====================================================================
   Hero content: enterprise layout (text stats, inline benefits,
   trust marquee). The sign-in card is untouched.
   ===================================================================== */
.hero-eyebrow {
  align-items: center;
  color: var(--accent-text);
  display: inline-flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  gap: 0.5rem;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

/* Metrics as plain text with thin dividers */
:root[data-theme] .hero-shell .hero-metric-strip {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 2rem;
  overflow: visible;
}

:root[data-theme] .hero-shell .hero-metric,
:root[data-theme] .hero-shell .hero-metric:nth-child(odd),
:root[data-theme] .hero-shell .hero-metric:nth-child(n + 3) {
  border: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  position: relative;
}

.hero-shell .hero-metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 2rem;
  margin-top: 0;
}

.hero-shell .hero-metric-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Thin vertical divider between stats */
.hero-shell .hero-metric + .hero-metric::before {
  background: var(--border);
  bottom: 20%;
  content: "";
  inset-inline-start: 0;
  position: absolute;
  top: 20%;
  width: 1px;
}

@media (max-width: 639px) {
  .hero-shell .hero-metric:nth-child(3)::before {
    display: none;
  }

  .hero-shell .hero-metric-value {
    font-size: 1.5rem;
    line-height: 1.75rem;
  }
}

/* Benefits as one inline line of text */
.hero-shell .hero-benefit-pills,
.hero-shell .hero-benefit-pills[aria-label] {
  align-items: center;
  column-gap: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
  row-gap: 0.5rem;
}

:root[data-theme] .hero-shell .hero-benefit-pill {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--muted);
  font-size: 0.8125rem;
  gap: 0.4rem;
  padding: 0;
  position: relative;
  width: auto;
}

.hero-shell .hero-benefit-pill + .hero-benefit-pill::before {
  background: var(--border);
  border-radius: 999px;
  content: "";
  height: 4px;
  inset-inline-start: -0.75rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
}

/* Sign-in card keeps its look; just breathing room after the benefits */
.hero-shell #login-form {
  margin-top: 2rem;
}

/* Trust strip: heading with rules + infinite logo marquee */
.trust-strip {
  color: #ffffff;
  margin-top: 2.5rem;
  max-width: var(--hero-width);
  width: 100%;
}

.trust-heading {
  align-items: center;
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  font-size: 0.8125rem;
  gap: 1rem;
  text-align: center;
}

.trust-heading::before,
.trust-heading::after {
  background: rgba(255, 255, 255, 0.22);
  content: "";
  flex: 1 1 0;
  height: 1px;
}

.trust-marquee {
  margin-top: 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  overflow: hidden;
}

.trust-track {
  animation: trust-scroll 32s linear infinite;
  display: flex;
  width: max-content;
}

.trust-marquee:hover .trust-track {
  animation-play-state: paused;
}

.trust-group {
  display: flex;
  flex-shrink: 0;
}

.trust-item {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 0.75rem;
  padding: 0.25rem 1.75rem;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}

.trust-item::after {
  background: rgba(255, 255, 255, 0.22);
  bottom: 15%;
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 15%;
  width: 1px;
}

.trust-logo {
  display: block;
  flex: none;
  height: 1.75rem;
  object-fit: contain;
  width: 1.75rem;
}

.trust-copy {
  display: grid;
  gap: 0.125rem;
}

.trust-name {
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1rem;
}

.trust-rating {
  align-items: center;
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  font-size: 0.75rem;
  gap: 0.35rem;
  line-height: 1rem;
}

.trust-item:hover .trust-name {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.trust-item:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
  outline: none;
}

@keyframes trust-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-track {
    animation: none;
  }

  .trust-marquee {
    overflow-x: auto;
  }
}

/* Waves are anchored to the bottom of the hero, starting behind the sign-in card,
   so the text above always stays on a clean background */
.hero-shell::before {
  bottom: -18%;
  top: calc(100% - 26rem);
}

.hero-shell > .hero-wave {
  height: 18rem;
  top: calc(100% - 22rem);
}

@media (min-width: 640px) {
  .hero-shell::before {
    top: calc(100% - 22rem);
  }

  .hero-shell > .hero-wave {
    top: calc(100% - 19rem);
  }
}

@media (min-width: 1280px) {
  .hero-shell::before {
    top: calc(100% - 16.5rem);
  }

  .hero-shell > .hero-wave {
    top: calc(100% - 14rem);
  }
}

.hero-shell {
  background: var(--hero-base);
}

@media (max-width: 639px) {
  .hero-shell .hero-benefit-pill + .hero-benefit-pill::before {
    display: none;
  }

  .hero-shell .hero-benefit-pills,
  .hero-shell .hero-benefit-pills[aria-label] {
    column-gap: 1rem;
  }
}

/* Trust strip at the top of the hero: theme colours instead of white-on-blue */
.trust-strip-top {
  color: var(--text);
  margin-bottom: 2.25rem;
  margin-top: 0;
}

.trust-strip-top .trust-heading {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.trust-strip-top .trust-heading::before,
.trust-strip-top .trust-heading::after,
.trust-strip-top .trust-item::after {
  background: var(--border);
}

.trust-strip-top .trust-name {
  color: var(--text);
}

.trust-strip-top .trust-rating {
  color: var(--muted);
}

.trust-strip-top .trust-item:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Bottom of the hero below the sign-in card is just the wave */
.hero-shell #login-form {
  margin-bottom: 0.5rem;
}

/* Trust strip as its own section above "Explore Thousands of SMM Categories" */
.trust-strip-page {
  color: var(--text);
  margin-bottom: 0;
  margin-top: 0;
}

.trust-strip-page .trust-heading {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.trust-strip-page .trust-heading::before,
.trust-strip-page .trust-heading::after,
.trust-strip-page .trust-item::after {
  background: var(--border);
}

.trust-strip-page .trust-name {
  color: var(--text);
}

.trust-strip-page .trust-rating {
  color: var(--muted);
}

.trust-strip-page .trust-item:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ---------- Trust section: full-width card, static grid ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.trust-grid .trust-item {
  border-color: var(--border);
  border-style: solid;
  border-width: 0;
  color: var(--text);
  gap: 0.75rem;
  justify-content: center;
  min-width: 0;
  padding: 1.1rem 1rem;
  transition: background-color 0.2s ease;
  white-space: normal;
}

.trust-grid .trust-item::after {
  display: none;
}

.trust-grid .trust-item:hover {
  background: var(--hover-tint);
}

.trust-grid .trust-item:hover .trust-name {
  text-decoration: none;
}

.trust-grid .trust-item:focus-visible {
  border-radius: 0;
  box-shadow: inset var(--focus-ring);
  outline: none;
}

.trust-grid .trust-name {
  color: var(--text);
}

.trust-grid .trust-rating {
  color: var(--muted);
}

/* Dividers: each breakpoint has its own range, so rules never stack */
@media (max-width: 767.98px) {
  .trust-grid .trust-item:nth-child(odd) {
    border-inline-end-width: 1px;
  }

  .trust-grid .trust-item:nth-child(n + 3) {
    border-top-width: 1px;
  }
}

@media (min-width: 768px) {
  .trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
  .trust-grid .trust-item:not(:nth-child(3n)) {
    border-inline-end-width: 1px;
  }

  .trust-grid .trust-item:nth-child(n + 4) {
    border-top-width: 1px;
  }
}

@media (min-width: 1280px) {
  .trust-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .trust-grid .trust-item:not(:last-child) {
    border-inline-end-width: 1px;
  }
}

/* ---------- Mobile menu: reveal from the left (same motion as the console sidebar) ---------- */
.mobile-menu-panel {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu-panel[data-open="true"] {
  clip-path: inset(0 0 0 0);
}

.mobile-menu-panel[data-closing="true"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-panel,
  .mobile-menu-panel[data-closing="true"] {
    transition: none;
  }
}

/* ---------- Mobile menu: preferences (language, currency, theme) ---------- */
.theme-btn {
  align-items: center;
  display: inline-flex;
  gap: 0.375rem;
  justify-content: center;
}

.theme-btn-icon {
  display: none;
}

/* Header row lines up with the page header (same logo, same spot) */
.mobile-menu-head {
  margin: -0.875rem -0.875rem 0;
  padding: 0.75rem 1rem;
}

/* Preferences sit at the bottom of the menu */
.mobile-menu-prefs {
  border-top: 1px solid var(--border);
  margin-top: auto;
  padding: 1rem 0 0.25rem;
}

.mobile-menu-prefs-labels {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0.375rem;
}

.mobile-menu-prefs-title {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.mobile-menu-prefs-selects {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
}

.mobile-menu-pref {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.mobile-menu-pref-label {
  color: var(--muted);
  font-size: 0.75rem;
}

/* Dropdowns open under both fields, full menu width */
.mobile-menu-prefs [data-select-root] {
  position: static;
}

.mobile-menu-prefs .top-select-trigger {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 0.8125rem;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  width: 100%;
}

.mobile-menu-prefs .top-select-trigger:hover {
  background: var(--hover-tint);
  color: var(--text);
}

.mobile-menu-prefs .top-select-trigger [data-select-label] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu-prefs .top-select-arrow {
  flex: none;
  margin-inline-start: auto;
}

/* At the bottom of the menu the lists open upward */
.mobile-menu-prefs .top-select-menu {
  bottom: calc(100% + 0.375rem);
  left: 0;
  max-height: min(18rem, 50vh);
  min-width: 0;
  right: 0;
  top: auto;
  z-index: 5;
}

.mobile-menu-prefs .top-select-option,
.mobile-menu-prefs .top-currency-select-option {
  font-size: 0.8125rem;
  padding: 0.625rem 0.75rem;
}

/* Theme switch: three equal segments with icons */
.mobile-menu-prefs .theme-switch {
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mobile-menu-prefs .theme-btn {
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  height: 2rem;
  padding: 0 0.5rem;
}

.mobile-menu-prefs .theme-btn:not([data-active="true"]):hover {
  background: var(--hover-tint);
  color: var(--text);
}

.mobile-menu-prefs .theme-btn-icon {
  display: inline-block;
}

/* =====================================================================
   AI Tools dialog
   Desktop: centred dialog over a dim backdrop. Mobile: full screen.
   ===================================================================== */
.tools-overlay {
  align-items: center;
  background: rgb(15 23 42 / 0.45);
  display: flex;
  justify-content: center;
  overscroll-behavior: contain;
  padding: 2rem 1.5rem;
}

:root[data-theme="dark"] .tools-overlay {
  background: rgb(0 0 0 / 0.6);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .tools-overlay {
    background: rgb(0 0 0 / 0.6);
  }
}

.tools-overlay.hidden {
  display: none;
}

.tools-dialog {
  animation: tools-dialog-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  /* --panel is slightly translucent: lay it over the page colour so nothing shows through */
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.18);
  display: flex;
  flex-direction: column;
  height: min(46rem, 100%);
  overflow: hidden;
  width: min(64rem, 100%);
}

@keyframes tools-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767.98px) {
  .tools-overlay {
    padding: 0;
  }

  .tools-dialog {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tools-dialog {
    animation: none;
  }
}

/* Header */
.tools-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.tools-head-icon {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  display: inline-flex;
  flex: none;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.tools-title {
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375rem;
}

.tools-subtitle {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.125rem;
}

/* Search + platform tabs */
.tools-toolbar {
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
}

.tools-tabs {
  display: flex;
  gap: 0.375rem;
  margin: 0 -1.25rem;
  overflow-x: auto;
  padding: 0 1.25rem;
  scrollbar-width: none;
}

.tools-tabs::-webkit-scrollbar {
  display: none;
}

.tools-tab {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--muted);
  display: inline-flex;
  flex: none;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.625rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  white-space: nowrap;
}

.tools-tab:hover {
  background: var(--hover-tint);
  color: var(--text);
}

.tools-tab[data-active="true"] {
  background: var(--select-tint);
  color: var(--text);
}

.tools-tab:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.tools-tab-logo,
.tools-group-logo {
  fill: currentColor;
  flex: none;
  height: 0.875rem;
  width: 0.875rem;
}

.tools-tab-count,
.tools-group-count {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1rem;
  min-width: 1.25rem;
  padding: 0 0.3125rem;
  text-align: center;
}

.tools-tab[data-active="true"] .tools-tab-count {
  background: var(--panel);
  color: var(--text);
}

/* Results */
.tools-body {
  display: grid;
  flex: 1;
  gap: 1.25rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 1.25rem;
  align-content: start;
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
}

.tools-group[hidden] {
  display: none;
}

.tools-group-title {
  align-items: center;
  color: var(--text);
  display: flex;
  font-size: 0.8125rem;
  font-weight: 600;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.tools-grid {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tools-item {
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.tools-item[data-hidden="true"] {
  display: none;
}

.tools-item:hover {
  background: var(--hover-tint);
}

.tools-item:active {
  background: var(--press-tint);
}

.tools-item:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.tools-item-icon {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: inline-flex;
  flex: none;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.tools-item-text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.tools-item-title {
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.tools-item-desc {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.125rem;
}

.tools-item-arrow {
  color: var(--muted);
  flex: none;
  margin-inline-start: auto;
  opacity: 0.6;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.tools-item:hover .tools-item-arrow,
.tools-item:focus-visible .tools-item-arrow {
  color: var(--text);
  opacity: 1;
}

.tools-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 3rem 1rem;
  text-align: center;
}

.tools-empty.hidden {
  display: none;
}

/* Footer */
.tools-foot {
  align-items: center;
  border-top: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  font-size: 0.75rem;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.625rem 1.25rem;
}

.tools-foot-keys {
  align-items: center;
  display: none;
  gap: 0.375rem;
}

.tools-kbd {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: inline-flex;
  font-family: inherit;
  font-size: 0.6875rem;
  height: 1.25rem;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.3125rem;
}

.tools-kbd + * {
  margin-inline-end: 0.5rem;
}

@media (min-width: 768px) {
  .tools-foot-keys {
    display: inline-flex;
  }
}

@media (max-width: 767.98px) {
  .tools-head,
  .tools-toolbar,
  .tools-body,
  .tools-foot {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .tools-tabs {
    margin: 0 -1rem;
    padding: 0 1rem;
  }

  .tools-subtitle {
    display: none;
  }
}

/* Returning from AI Tools: menu appears without the reveal */
.mobile-menu-panel[data-instant="true"] {
  transition: none;
}

/* Footer contact lines sit directly under the offices (no wrapper card) */
.footer-contact-stack {
  margin-top: 0;
}

.footer-contact-row {
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.footer-contact-row .footer-contact-icon {
  background: var(--surface);
}

.footer-contact-row:hover {
  background: color-mix(in srgb, var(--text) 4%, var(--panel));
}

.footer-contact-row:active {
  background: color-mix(in srgb, var(--text) 8%, var(--panel));
}

/* Service card logos follow the text colour (visible in light and dark) */
.campaign-service-icon {
  color: var(--text);
}

.campaign-service-icon svg {
  fill: currentColor;
}

/* ---------- Get Started: content + action panel ---------- */
.cta-card {
  display: grid;
  overflow: hidden;
}

.cta-main {
  padding: 1.25rem;
}

.cta-points {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.cta-point {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
}

.cta-point-icon {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  display: inline-flex;
  flex: none;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.cta-point-title {
  color: var(--text);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.cta-point-text {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  line-height: 1.125rem;
  margin-top: 0.125rem;
}

.cta-aside {
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem;
}

.cta-aside-title {
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}

.cta-aside-text {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  margin-top: 0.25rem;
}

@media (min-width: 768px) {
  .cta-main,
  .cta-aside {
    padding: 1.5rem;
  }

  .cta-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cta-card {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }

  .cta-main {
    padding: 2rem;
  }

  .cta-aside {
    border-inline-start: 1px solid var(--border);
    border-top: 0;
    padding: 2rem;
  }
}

/* ---------- Get Started: blue call-to-action card (same blues as the hero) ---------- */
.cta-card {
  --cta-line: rgb(255 255 255 / 0.2);
  --cta-from: #3b82f6;
  --cta-mid: #2563eb;
  --cta-to: #1d4ed8;
  --cta-glow: rgb(147 197 253 / 0.45);
  background: radial-gradient(60% 80% at 0% 0%, var(--cta-glow), transparent 70%), linear-gradient(135deg, var(--cta-from) 0%, var(--cta-mid) 55%, var(--cta-to) 100%);
  border: 1px solid var(--cta-mid);
  color: #ffffff;
  position: relative;
}

:root[data-theme="dark"] .cta-card,
:root[data-theme="system"] .cta-card {
  --cta-from: #2563eb;
  --cta-mid: #1d4ed8;
  --cta-to: #1e3a8a;
  --cta-glow: rgb(59 130 246 / 0.35);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .cta-card {
    --cta-from: #3b82f6;
    --cta-mid: #2563eb;
    --cta-to: #1d4ed8;
    --cta-glow: rgb(147 197 253 / 0.45);
  }
}

.cta-main,
.cta-aside {
  position: relative;
}

.cta-eyebrow {
  background: rgb(255 255 255 / 0.1);
  border: 1px solid var(--cta-line);
  color: #ffffff;
}

.cta-title {
  color: #ffffff;
}

.cta-lead {
  color: rgb(219 234 254 / 0.9);
}

.cta-card .cta-point-icon {
  background: rgb(255 255 255 / 0.1);
  border-color: var(--cta-line);
  color: #ffffff;
}

.cta-card .cta-point-title {
  color: #ffffff;
}

.cta-card .cta-point-text {
  color: rgb(219 234 254 / 0.8);
}

.cta-card .cta-aside {
  background: rgb(15 23 42 / 0.12);
  border-color: var(--cta-line);
}

.cta-card .cta-aside-title {
  color: #ffffff;
}

.cta-card .cta-aside-text,
.cta-note {
  color: rgb(219 234 254 / 0.8);
}

.cta-note a {
  color: #ffffff;
}

/* On blue, the primary action is white */
.cta-btn-primary {
  background: #ffffff;
  color: #1d4ed8;
}

.cta-lead,
.cta-card .cta-point-text,
.cta-card .cta-aside-text,
.cta-note {
  color: rgb(255 255 255 / 0.86);
}

.cta-btn-primary:hover {
  background: #eff6ff;
}

.cta-btn-primary:active {
  background: #dbeafe;
}

.cta-btn-secondary {
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.35);
  color: #ffffff;
}

.cta-btn-secondary:hover {
  background: rgb(255 255 255 / 0.1);
}

.cta-btn-secondary:active {
  background: rgb(255 255 255 / 0.16);
}

.cta-btn-primary:focus-visible,
.cta-btn-secondary:focus-visible {
  box-shadow:
    0 0 0 2px #1d4ed8,
    0 0 0 4px #ffffff;
  outline: none;
}

/* ---------- Footer: addresses and contact lines in one structured panel ---------- */
@media (min-width: 768px) {
  .footer-presence-header {
    align-items: flex-end;
  }
}

.presence-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-top: 1.25rem;
  overflow: hidden;
}

.presence-offices {
  display: grid;
}

.presence-office {
  min-width: 0;
  padding: 1rem 1.125rem;
}

.presence-office + .presence-office {
  border-top: 1px solid var(--border);
}

.presence-office-city {
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.375rem;
}

.presence-office-country {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-top: 0.125rem;
  text-transform: uppercase;
}

.presence-office-address {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  margin-top: 0.625rem;
}

.presence-contacts {
  background: color-mix(in srgb, var(--text) 2%, var(--surface));
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.presence-contact {
  color: var(--text);
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.875rem 1.125rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.presence-contact:hover {
  background: var(--hover-tint);
}

.presence-contact:focus-visible {
  box-shadow: inset var(--focus-ring);
  outline: none;
}

.presence-contact:nth-child(odd) {
  border-inline-end: 1px solid var(--border);
}

.presence-contact:nth-child(n + 3) {
  border-top: 1px solid var(--border);
}

.presence-contact-label {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.6875rem;
  font-weight: 600;
  gap: 0.375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.presence-contact-value {
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .presence-offices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .presence-office {
    padding: 1.25rem 1.5rem;
  }

  .presence-office + .presence-office {
    border-inline-start: 1px solid var(--border);
    border-top: 0;
  }

  .presence-contact {
    padding: 1rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .presence-contacts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .presence-contact:nth-child(odd) {
    border-inline-end: 0;
  }

  .presence-contact:nth-child(n + 3) {
    border-top: 0;
  }

  .presence-contact + .presence-contact {
    border-inline-start: 1px solid var(--border);
  }
}

/* ---------- Footer: system status next to "Learn About SMMTurk with AI" ---------- */
.status-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  flex: none;
  overflow: hidden;
  width: 100%;
}

.status-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
}

.status-dot {
  background: #22c55e;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgb(34 197 94 / 0.2);
  flex: none;
  height: 0.5rem;
  width: 0.5rem;
}

.status-title {
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}

.status-link {
  align-items: center;
  border-top: 1px solid var(--border);
  color: var(--text);
  display: flex;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.375rem;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.status-link:hover {
  background: var(--hover-tint);
}

.status-link:focus-visible {
  box-shadow: inset var(--focus-ring);
  outline: none;
}

@media (min-width: 768px) {
  .footer-about-header {
    align-items: center;
    flex-direction: row;
    gap: 2rem;
  }

  .status-card {
    width: 18rem;
  }
}

/* ---------- Safari: keep rounded corners on the hero ----------
   Safari ignores border-radius + overflow:hidden for children that are
   animated or blurred (the hero waves), so the corners showed square.
   clip-path and a mask force the rounded clip in every engine. */
.hero-shell {
  -webkit-clip-path: inset(0 round 0.75rem);
  clip-path: inset(0 round 0.75rem);
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  transform: translateZ(0);
}

/* =====================================================================
   APP SHELL (logged-in pages: sidebar, app header, add funds)
   layout.twig adds .app-root to <html> and .app-body to <body> when
   user.auth is true; page-level rules below only apply there.
   ===================================================================== */

:root[data-theme="dark"],
:root[data-theme="system"] {
  --positive: #86efac;
  --dropdown-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --mobile-sidebar-bg: #0a0a0b;
}

:root[data-theme="light"] {
  --positive: #15803d;
  --dropdown-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  --mobile-sidebar-bg: #ffffff;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --positive: #15803d;
    --dropdown-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    --mobile-sidebar-bg: #ffffff;
  }
}

html.app-root {
  height: 100%;
  overflow: hidden;
}

.app-body {
  font-family: "Manrope", sans-serif;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-mid) 42%, var(--bg) 100%);
  color: var(--text);
  height: 100%;
  overflow: hidden;
}

.app-shell {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.app-layout,
.app-content-column {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.app-main-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@supports (height: 100dvh) {
  .app-shell {
    height: 100dvh;
    max-height: 100dvh;
  }
}

@media (max-width: 1023px) {
  .app-content-column {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-content-column > header {
    position: static;
    top: auto;
  }

  .app-content-column > .app-main-scroll {
    flex: 0 0 auto;
    overflow: visible;
  }
}

html.sidebar-open,
body.sidebar-open {
  overflow: hidden;
}

.bg-header {
  background: var(--header-bg);
}

.sidebar-frame {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .sidebar-frame {
    height: 100dvh;
    max-height: 100dvh;
  }
}

.sidebar-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
  overflow-y: auto;
  padding-inline-end: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sidebar-nav-scroll::-webkit-scrollbar {
  width: 5px;
}

.sidebar-nav-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 1px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  border: 1px solid transparent;
  background-clip: padding-box;
}

.sidebar-section-title {
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  margin-bottom: 0.75rem;
  padding-inline: 0.5rem;
  text-transform: uppercase;
}

.sidebar-search {
  flex: 0 0 auto;
  margin: 0 0 1rem;
  position: relative;
}

.sidebar-search i,
.sidebar-search svg {
  color: var(--muted);
  inset-inline-start: 0.7rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.sidebar-search input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  color: var(--text);
  display: block;
  font-size: 0.8125rem;
  height: 2.25rem;
  outline: none;
  padding-block: 0;
  padding-inline: 2.15rem 0.75rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  width: 100%;
}

.sidebar-search input::placeholder {
  color: var(--muted);
}

.sidebar-search input:focus {
  background: var(--surface-2);
  border-color: rgba(59, 130, 246, 0.42);
}

.sidebar-search input::-webkit-search-cancel-button {
  cursor: pointer;
  filter: invert(58%) sepia(12%) saturate(287%) hue-rotate(178deg) brightness(94%) contrast(88%);
}

:root[data-theme="light"] .sidebar-search input::-webkit-search-cancel-button {
  filter: invert(43%) sepia(13%) saturate(771%) hue-rotate(179deg) brightness(91%) contrast(86%);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .sidebar-search input::-webkit-search-cancel-button {
    filter: invert(43%) sepia(13%) saturate(771%) hue-rotate(179deg) brightness(91%) contrast(86%);
  }
}

.sidebar-search input::-ms-clear,
.sidebar-search input::-ms-reveal {
  display: none;
}

.sidebar-nav-group {
  display: grid;
  gap: 0.375rem;
}

.sidebar-nav-link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  color: var(--muted);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.75rem;
  line-height: 1.125rem;
  min-height: 2.375rem;
  overflow: hidden;
  padding: 0.5625rem 0.75rem;
  position: relative;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.sidebar-nav-link:hover {
  background: var(--surface);
  color: var(--text);
}

.sidebar-nav-link[data-active="true"] {
  background:
    linear-gradient(90deg, rgba(59, 130, 246, 0.11) 0%, rgba(59, 130, 246, 0.06) 40%, rgba(59, 130, 246, 0) 78%) left center / 112% 100% no-repeat,
    var(--surface);
  border-color: transparent;
  color: var(--text);
  font-weight: 600;
}

.sidebar-nav-link[data-active="true"] i {
  color: var(--accent-text);
}

.sidebar-premium-card {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(59, 130, 246, 0.18), transparent 54%),
    radial-gradient(ellipse at 82% 8%, rgba(14, 165, 233, 0.12), transparent 48%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
  padding: 0.875rem;
  position: relative;
}

.sidebar-premium-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), transparent 62%);
  pointer-events: none;
}

.sidebar-premium-card > * {
  position: relative;
  z-index: 1;
}

.sidebar-premium-kicker {
  align-items: center;
  color: var(--accent-text);
  display: inline-flex;
  font-size: 0.6875rem;
  font-weight: 800;
  gap: 0.375rem;
  letter-spacing: 0.04em;
  position: relative;
  text-transform: uppercase;
}

.sidebar-premium-feature {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-sizing: border-box;
  color: var(--muted);
  display: flex;
  font-size: 0.75rem;
  gap: 0.375rem;
  height: 1.875rem;
  line-height: 1rem;
  min-width: 0;
  padding: 0 0.5rem;
  white-space: nowrap;
  width: 100%;
}

.sidebar-premium-feature i,
.sidebar-premium-feature svg {
  flex: 0 0 0.875rem;
  height: 0.875rem;
  width: 0.875rem;
}

.sidebar-premium-feature-grid {
  display: grid;
  gap: 0.375rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sidebar-premium-action {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  color: var(--text);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  gap: 0.375rem;
  justify-content: center;
  min-height: 2.125rem;
  padding: 0 0.625rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.sidebar-premium-action:hover {
  background: var(--surface-2);
  border-color: rgba(59, 130, 246, 0.38);
  color: var(--text);
}

.sidebar-contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  flex: none;
  padding: 0.875rem;
  position: relative;
}

.sidebar-contact-head {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.sidebar-contact-card[data-contact-visible="false"] .sidebar-contact-head {
  margin-bottom: 0;
}

.sidebar-contact-title {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  min-width: 0;
}

.sidebar-contact-title p {
  white-space: nowrap;
}

.contact-channel-toggle {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.875rem;
  justify-content: center;
  padding: 0;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  width: 1.875rem;
}

.contact-channel-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}

.contact-channel-toggle [data-contact-channel-icon] {
  display: none;
}

.contact-channel-toggle[data-state="show"] [data-contact-channel-icon="show"],
.contact-channel-toggle[data-state="hide"] [data-contact-channel-icon="hide"] {
  display: inline-flex;
}

.contact-channel-toggle svg {
  height: 0.875rem;
  width: 0.875rem;
}

[data-contact-channel-copy][hidden],
[data-contact-channel-grid][hidden] {
  display: none;
}

.contact-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.contact-channel-action {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.375rem;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 0.5rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.contact-channel-action:hover {
  background: var(--surface-2);
  border-color: rgba(59, 130, 246, 0.38);
  color: var(--text);
}

.hover-text-strong:hover {
  color: var(--text);
}

.soft-ring {
  box-shadow:
    0 0 0 1px var(--ring-outline),
    0 0 0 6px var(--ring);
}

.mobile-overlay {
  background: transparent;
}

#mobile-sidebar {
  background: var(--mobile-sidebar-bg);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  visibility: hidden;
  transition:
    clip-path 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.3s;
}

#mobile-sidebar[data-open="true"],
#mobile-sidebar[data-closing="true"] {
  visibility: visible;
}

#mobile-sidebar[data-open="true"] {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
  transition-delay: 0s;
}

#mobile-sidebar[data-closing="true"] {
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transition:
    clip-path 0.24s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.24s;
}

#mobile-sidebar .mobile-sidebar-panel {
  backface-visibility: hidden;
  background: var(--mobile-sidebar-bg);
}

.dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--dropdown-shadow);
}

.dropdown-item {
  color: var(--muted);
}

.dropdown-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.dropdown-item[data-currency-option],
.dropdown-item[data-language-option],
.dropdown-item[data-theme-option] {
  font-size: 0.75rem;
  line-height: 1rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.select-dropdown-menu {
  min-width: 176px;
  padding: 0.25rem;
}

.select-dropdown-menu .dropdown-item {
  border-radius: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.5rem 0.625rem;
}

.select-dropdown-menu .dropdown-item + .dropdown-item {
  margin-top: 0.125rem;
}

.select-dropdown-menu .dropdown-item:hover {
  background: transparent;
  color: var(--muted);
}

.select-dropdown-menu .dropdown-item[data-active="true"]:hover {
  background: rgba(59, 130, 246, 0.14);
  color: var(--text);
}

.dropdown-item[data-currency-option][data-active="true"],
.dropdown-item[data-language-option][data-active="true"],
.dropdown-item[data-theme-option][data-active="true"] {
  background: rgba(59, 130, 246, 0.14);
  color: var(--text);
}

.dropdown-item[data-currency-option][data-active="true"] i,
.dropdown-item[data-language-option][data-active="true"] i,
.dropdown-item[data-theme-option][data-active="true"] i {
  color: var(--accent-text);
}

.select-dropdown-menu .dropdown-item i,
.select-dropdown-menu .dropdown-item svg {
  color: var(--accent-text);
  flex: 0 0 0.875rem;
  height: 0.875rem;
  width: 0.875rem;
}

.language-flag {
  border-radius: 0.1875rem;
  display: block;
  flex: 0 0 1.25rem;
  height: 0.875rem;
  object-fit: cover;
  width: 1.25rem;
}

.language-trigger-flag {
  border-radius: 0.1875rem;
  display: block;
  flex: 0 0 1.25rem;
  height: 0.875rem;
  object-fit: cover;
  width: 1.25rem;
}

.language-trigger-icon {
  display: none;
}

.notification-dropdown,
.account-dropdown {
  padding: 0.375rem;
}

.notification-dropdown .dropdown-item,
.account-dropdown .dropdown-item,
.account-dropdown .account-menu-link {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  padding: 0.5rem 0.625rem;
}

.notification-dropdown .dropdown-item span,
.account-dropdown .account-menu-link span {
  font-size: inherit;
}

.notification-dropdown .dropdown-item .text-muted,
.account-dropdown .text-muted,
.account-dropdown .text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.notification-dropdown-title,
.account-dropdown-name {
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

.notification-action {
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.5rem 0.625rem;
}

.dropdown-arrow {
  transition: transform 0.2s ease;
}

[data-dropdown-trigger][aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

.fund-method-card {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--muted);
  align-items: flex-start !important;
  font-size: 0.875rem;
  line-height: 1.25rem;
  min-height: 4.75rem;
  padding: 0.625rem 0.75rem;
  position: relative;
}

.fund-method-card:hover {
  color: var(--text);
}

.fund-method-card[data-active="true"] {
  border-color: rgba(59, 130, 246, 0.68);
  background: rgba(59, 130, 246, 0.14);
  color: var(--text);
}

.fund-method-card .method-icon {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
}

.fund-method-card[data-active="true"] .method-icon {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.22);
  color: var(--accent-text);
}

.fund-method-card .method-main {
  align-items: flex-start;
  display: flex;
  gap: 0.625rem;
  min-width: 0;
}

.fund-method-card .method-icon {
  flex: 0 0 1.75rem;
  height: 1.75rem;
  width: 1.75rem;
}

.fund-method-card .method-copy {
  min-width: 0;
}

.fund-method-card .method-copy.has-method-badge {
  padding-inline-end: 0;
}

.fund-method-card .method-title {
  color: var(--text);
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.125rem;
}

.method-requirement-badge {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: 1px solid #1d4ed8;
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 0.75rem;
  padding: 0.1875rem 0.4375rem;
  position: absolute;
  inset-inline-end: 0.625rem;
  text-transform: uppercase;
  top: -0.625rem;
  white-space: nowrap;
  z-index: 1;
}

.fund-method-card .method-description {
  color: var(--muted);
  display: block;
  font-size: 0.71875rem;
  line-height: 0.9375rem;
  margin-top: 0.1875rem;
}

.fund-method-card [data-method-check] {
  align-self: center;
  color: var(--accent-text);
  flex: 0 0 0.875rem;
  margin-top: 0;
}

.method-detail-card {
  background: color-mix(in srgb, var(--surface) 82%, var(--panel));
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.875rem;
  position: relative;
}

.method-detail-kicker {
  color: var(--muted);
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 0.875rem;
  text-transform: uppercase;
}

.method-detail-title {
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25rem;
}

.method-detail-body {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

.method-detail-meta {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 0.875rem;
  padding: 0.25rem 0.5rem;
}

.bonus-calculation-card {
  background: color-mix(in srgb, var(--surface) 86%, var(--panel));
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  display: grid;
  gap: 0.25rem 0.75rem;
  grid-template-columns: repeat(3, max-content);
  max-width: 100%;
  min-height: 2.5rem;
  padding: 0.375rem 0.75rem;
  width: fit-content;
}

.bonus-calculation-item {
  min-width: 0;
}

.bonus-calculation-label {
  color: var(--muted);
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 0.75rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.bonus-calculation-value {
  color: var(--text);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.125rem;
  margin-top: 0.0625rem;
  white-space: nowrap;
}

.fund-submit-row {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.fund-submit-row .bonus-calculation-card {
  flex: 0 1 auto;
}

@media (max-width: 639px) {
  .fund-submit-row {
    flex-direction: column;
  }

  .fund-submit-row .bonus-calculation-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    width: 100%;
  }

  .fund-submit-row .bonus-calculation-label {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
  }

  .fund-submit-row .bonus-calculation-value {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }

  .method-detail-card .min-w-0 {
    flex-basis: 100%;
  }

  .method-detail-meta {
    position: absolute;
    inset-inline-end: 0.875rem;
    top: 0.8125rem;
  }
}

.quick-amount-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .quick-amount-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .quick-amount-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .quick-amount-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.quick-amount-chip {
  align-items: flex-start;
  background: color-mix(in srgb, var(--surface) 92%, var(--panel));
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  justify-content: center;
  min-height: 3.75rem;
  padding: 0.625rem 0.75rem;
  text-align: start;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  width: 100%;
}

.quick-amount-main {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
}

.quick-amount-value {
  color: currentColor;
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.125rem;
  white-space: nowrap;
}

.quick-amount-bonus {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 0.75rem;
  padding: 0.1875rem 0.4375rem;
  white-space: nowrap;
}

.quick-amount-chip:not([data-bonus-rate="0"]) .quick-amount-bonus {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.38);
  color: var(--accent-text);
  font-weight: 600;
}

.quick-amount-chip:hover,
.quick-amount-chip[data-active="true"] {
  background: var(--surface-2);
  color: var(--text);
}

.quick-amount-chip[data-bonus-disabled="true"] .quick-amount-bonus,
.quick-amount-chip[data-active="true"][data-bonus-disabled="true"] .quick-amount-bonus {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}

.form-control {
  height: 2.5rem;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  transition:
    border-color 0.2s ease;
}

.form-control::placeholder {
  color: var(--muted);
}

.form-control:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: none;
}

.primary-action {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: #3b82f6;
  padding: 0 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #ffffff;
  transition: background 0.2s ease;
}

.primary-action:hover {
  background: #2563eb;
}

.primary-action.compact-action {
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
}

.header-action-pill,
.primary-action.compact-action.header-action-pill {
  height: 2.125rem;
}

.mobile-control-label,
.mobile-account-icon {
  display: none;
}

.header-subtitle {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: 0.125rem;
}

@media (max-width: 1023px) {
  header.bg-header {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--surface) 44%, transparent)),
      color-mix(in srgb, var(--header-bg) 72%, transparent);
    border-bottom: 0;
    padding: 0.75rem 0 1rem;
    width: 100%;
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);
  }

  .app-header-inner {
    align-items: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    padding: 0 1rem;
    position: relative;
    width: 100%;
  }

  .app-header-title {
    align-items: center;
    display: grid;
    gap: 0.875rem;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    justify-content: initial;
    min-width: 0;
    width: 100%;
  }

  #open-sidebar {
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--surface) 74%, transparent), color-mix(in srgb, var(--surface-2) 54%, transparent));
    border: 1px solid color-mix(in srgb, var(--border) 38%, transparent);
    border-radius: 1rem;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-depth) 14%, transparent);
    grid-column: 1;
    height: 2.5rem;
    width: 2.5rem;
  }

  .mobile-title-copy {
    grid-column: 2;
    min-width: 0;
    text-align: start;
  }

  .mobile-title-copy h1 {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .header-subtitle {
    font-size: 0.6875rem;
    line-height: 0.875rem;
  }

  .header-controls {
    align-items: stretch;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--surface) 76%, transparent), color-mix(in srgb, var(--surface-2) 54%, transparent));
    border: 1px solid color-mix(in srgb, var(--border) 34%, transparent);
    border-radius: 1.375rem;
    box-shadow:
      0 14px 30px color-mix(in srgb, var(--shadow-depth) 13%, transparent),
      inset 0 1px 0 color-mix(in srgb, #ffffff 9%, transparent);
    display: grid !important;
    gap: 0.125rem;
    grid-auto-flow: column;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: stretch;
    margin-top: 0.75rem;
    padding: 0.375rem;
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    width: 100%;
  }

  .header-controls > .header-action-pill {
    display: none !important;
  }

  .balance-pill {
    background:
      radial-gradient(circle at 82% 24%, rgba(59, 130, 246, 0.22), transparent 42%),
      linear-gradient(145deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--surface-2) 62%, transparent));
    border: 1px solid color-mix(in srgb, var(--border) 36%, transparent);
    border-radius: 1.375rem;
    box-shadow:
      0 16px 36px color-mix(in srgb, var(--shadow-depth) 18%, transparent),
      inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-column: 1 / -1;
    height: auto;
    justify-self: stretch;
    margin: 0.875rem 0 0;
    max-width: none;
    min-height: 5rem;
    overflow: hidden;
    padding: 0.875rem 1rem;
    position: relative;
    width: 100%;
  }

  .balance-pill span {
    align-self: end;
    color: var(--muted);
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    grid-column: 1;
    letter-spacing: 0.08em;
    line-height: 0.875rem;
    text-transform: uppercase;
  }

  .balance-pill strong {
    align-self: start;
    display: block;
    font-size: 1.75rem;
    grid-column: 1;
    line-height: 2rem;
    margin-inline-start: 0;
  }

  .balance-pill i,
  .balance-pill svg {
    align-self: center;
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 1rem;
    color: var(--accent-text);
    grid-column: 2;
    grid-row: 1 / span 2;
    height: 2.75rem;
    justify-self: end;
    padding: 0.75rem;
    width: 2.75rem;
  }

  .header-control-dropdown {
    display: flex !important;
    justify-self: stretch;
    min-width: 0;
    position: relative;
    width: 100%;
  }

  .header-controls > .header-control-dropdown:not(.notification-control) {
    grid-column: auto;
    max-width: none;
  }

  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 1rem;
    box-shadow: none;
    flex-direction: column;
    gap: 0.25rem;
    height: 3.625rem;
    justify-content: center;
    min-width: 0;
    padding: 0.5rem 0.125rem;
    text-align: center;
    transition:
      transform 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      color 0.2s ease;
    width: 100%;
  }

  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text);
    transform: translateY(-1px);
  }

  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button > span {
    align-items: center;
    flex-direction: column;
    gap: 0.25rem;
    justify-content: center;
    min-width: 0;
    width: 100%;
  }

  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button .dropdown-arrow,
  .app-header-inner > .header-controls .notification-control .header-control-button .dropdown-arrow,
  .app-header-title > .notification-control .header-control-button .dropdown-arrow {
    display: none;
  }

  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button i,
  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button svg {
    display: block;
    flex: 0 0 1.125rem !important;
    height: 1.125rem !important;
    width: 1.125rem !important;
  }

  #currency-label,
  #language-trigger-flag,
  #language-label,
  #theme-label {
    display: none;
  }

  .mobile-control-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 0.875rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-notification-text,
  .mobile-account-text {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 0.875rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button .mobile-control-label,
  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button .mobile-account-text {
    font-size: 0.6875rem !important;
    font-weight: 700;
    line-height: 0.875rem;
  }

  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button .account-avatar {
    display: none;
  }

  .mobile-account-icon {
    display: block !important;
  }

  #notification-dot {
    display: none;
  }

  #notification-count {
    display: none;
  }

  .app-header-title > .notification-control {
    align-self: center;
    grid-column: 3;
    justify-self: end;
    margin: 0;
    margin-left: auto;
    position: relative !important;
    width: 2.5rem;
    z-index: 50;
  }

  .app-header-title > .notification-control .header-control-button {
    align-items: center;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--surface) 74%, transparent), color-mix(in srgb, var(--surface-2) 54%, transparent));
    border: 1px solid color-mix(in srgb, var(--border) 38%, transparent);
    border-radius: 1rem;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-depth) 14%, transparent);
    display: inline-flex;
    flex-direction: row;
    gap: 0;
    height: 2.5rem;
    justify-content: center;
    padding: 0;
    width: 2.5rem;
  }

  .app-header-title > .notification-control .header-control-button > span {
    align-items: center;
    display: inline-flex;
    flex-direction: row;
    gap: 0;
    height: 1rem;
    justify-content: center;
    min-width: 0;
    width: 1rem;
  }

  .app-header-title > .notification-control .header-control-button > span > .relative {
    align-items: center;
    display: inline-flex;
    height: 1rem;
    justify-content: center;
    width: 1rem;
  }

  .app-header-title > .notification-control .header-control-button i,
  .app-header-title > .notification-control .header-control-button svg {
    height: 1rem;
    width: 1rem;
  }

  .app-header-title > .notification-control .mobile-notification-text {
    display: none;
  }

  .app-header-title > .notification-control #notification-dot {
    border: 2px solid var(--surface);
    display: block;
    height: 0.625rem;
    right: -0.25rem;
    top: -0.25rem;
    width: 0.625rem;
  }

  .app-header-title > .notification-control .notification-dropdown {
    left: auto;
    max-height: calc(100dvh - 5.5rem);
    min-width: 0;
    overflow-y: auto;
    position: fixed !important;
    right: 1rem;
    top: 4.25rem;
    width: min(18.125rem, calc(100vw - 2rem));
  }

  .header-controls > .header-control-dropdown:not(.notification-control) .dropdown-menu {
    inset-inline-start: auto;
    max-height: calc(100dvh - 9rem);
    max-width: calc(100vw - 2rem);
    overflow-y: auto;
    position: absolute !important;
    inset-inline-end: auto;
    top: 100%;
    transform: none;
    width: max-content;
  }

  .header-controls > .header-control-dropdown:not(.notification-control) .account-dropdown {
    width: min(18.125rem, calc(100vw - 2rem));
  }

  .header-controls > .header-control-dropdown:nth-child(2) .dropdown-menu {
    inset-inline-start: 0;
  }

  .header-controls > .header-control-dropdown:nth-child(3) .dropdown-menu,
  .header-controls > .header-control-dropdown:nth-child(4) .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
  }

  .header-controls > .header-control-dropdown:last-child .dropdown-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: none;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .app-header-inner {
    align-items: center;
    gap: 0.875rem;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  }

  .app-header-title {
    grid-column: 1;
  }

  .mobile-title-copy h1 {
    font-size: 1.125rem;
    line-height: 1.375rem;
  }

  .header-subtitle {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .balance-pill {
    grid-column: 2;
    margin: 0;
    min-height: 4.25rem;
    padding: 0.75rem 0.875rem;
  }

  .balance-pill strong {
    font-size: 1.375rem;
    line-height: 1.625rem;
  }

  .balance-pill i,
  .balance-pill svg {
    border-radius: 0.875rem;
    height: 2.25rem;
    padding: 0.5625rem;
    width: 2.25rem;
  }

  .header-controls {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

.account-avatar {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(14, 165, 233, 0.7));
  color: #ffffff;
}

.account-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  color: var(--muted);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.account-menu-link:hover {
  background: var(--surface);
  color: var(--text);
}

.account-state-badge {
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
}

.account-menu-danger {
  color: #f87171;
}

.account-menu-danger:hover {
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}

.status-processing {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.status-pending {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
}

.status-completed {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.status-failed {
  background: rgba(244, 63, 94, 0.18);
  color: #fda4af;
}

:root[data-theme="light"] .account-state-badge {
  background: #dcfce7;
  color: #166534;
}

:root[data-theme="light"] .account-menu-danger {
  color: #b91c1c;
}

:root[data-theme="light"] .account-menu-danger:hover {
  background: #fee2e2;
  color: #991b1b;
}

:root[data-theme="light"] .status-processing {
  background: #dbeafe;
  color: #1d4ed8;
}

:root[data-theme="light"] .status-pending {
  background: #fef3c7;
  color: #92400e;
}

:root[data-theme="light"] .status-completed {
  background: #dcfce7;
  color: #166534;
}

:root[data-theme="light"] .status-failed {
  background: #fee2e2;
  color: #b91c1c;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .account-state-badge {
    background: #dcfce7;
    color: #166534;
  }

  :root[data-theme="system"] .account-menu-danger {
    color: #b91c1c;
  }

  :root[data-theme="system"] .account-menu-danger:hover {
    background: #fee2e2;
    color: #991b1b;
  }

  :root[data-theme="system"] .status-processing {
    background: #dbeafe;
    color: #1d4ed8;
  }

  :root[data-theme="system"] .status-pending {
    background: #fef3c7;
    color: #92400e;
  }

  :root[data-theme="system"] .status-completed {
    background: #dcfce7;
    color: #166534;
  }

  :root[data-theme="system"] .status-failed {
    background: #fee2e2;
    color: #b91c1c;
  }
}

.secondary-action {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  padding: 0 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.invoice-action,
.pagination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--muted);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.invoice-action {
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: nowrap;
}

.pagination-button {
  height: 2rem;
  min-width: 2rem;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
}

.invoice-action:hover,
.pagination-button:hover {
  border-color: rgba(59, 130, 246, 0.42);
  color: var(--text);
}

.pagination-button[data-active="true"] {
  border-color: rgba(59, 130, 246, 0.68);
  background: rgba(59, 130, 246, 0.14);
  color: var(--text);
}

.requests-table {
  min-width: 56rem;
}

.requests-table th,
.requests-table td {
  white-space: nowrap;
}

.quick-amount-chip[hidden] {
  display: none;
}

.tier-toggle {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--muted);
  display: flex;
  font-size: 0.8125rem;
  font-weight: 600;
  gap: 0.375rem;
  justify-content: center;
  margin-top: 0.5rem;
  min-height: 2.5rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  width: 100%;
}

.tier-toggle:hover {
  border-color: rgba(59, 130, 246, 0.42);
  color: var(--text);
}

.tier-toggle-icon,
.tier-toggle svg {
  transition: transform 0.2s ease;
}

.tier-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.bonus-upsell {
  background: color-mix(in srgb, var(--surface) 86%, var(--panel));
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.875rem;
}

.bonus-upsell[hidden] {
  display: none;
}

.bonus-upsell-head {
  align-items: center;
  color: var(--text);
  display: flex;
  font-size: 0.9375rem;
  font-weight: 700;
  gap: 0.5rem;
  line-height: 1.25rem;
}

.bonus-upsell-head i,
.bonus-upsell-head svg {
  color: var(--positive);
  flex: 0 0 1rem;
}

.bonus-upsell-text {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  margin-top: 0.25rem;
}

.bonus-upsell-text strong {
  color: var(--text);
  font-weight: 700;
}

.bonus-upsell-action {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text);
  display: flex;
  font-size: 0.8125rem;
  font-weight: 600;
  justify-content: center;
  margin-top: 0.75rem;
  min-height: 2.375rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  width: 100%;
}

.bonus-upsell-action:hover {
  background: var(--surface-2);
  border-color: rgba(59, 130, 246, 0.42);
}

.fund-checkout {
  display: grid;
  gap: 0.75rem;
}

.fund-checkout-actions {
  display: flex;
  justify-content: flex-end;
}

.deposit-summary {
  background: color-mix(in srgb, var(--surface) 86%, var(--panel));
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
}

.deposit-summary-row,
.deposit-summary-total {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.deposit-summary-row {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.25rem 0;
}

.deposit-summary-row strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.deposit-summary-row strong.deposit-summary-bonus {
  color: var(--positive);
}

.deposit-summary-row strong.deposit-summary-bonus[data-zero="true"] {
  color: var(--muted);
}

.deposit-summary-total {
  border-top: 1px solid var(--border);
  color: var(--text);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}

.deposit-summary-total span {
  font-size: 0.9375rem;
  font-weight: 700;
}

.deposit-summary-total strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.75rem;
}

@media (min-width: 768px) {
  .tier-toggle {
    margin-left: auto;
    margin-right: auto;
    min-height: 2.25rem;
    padding: 0 1rem;
    width: auto;
  }

  .bonus-upsell {
    align-items: center;
    column-gap: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block: 0.75rem;
          padding-inline: 1rem 0.875rem;
  }

  .bonus-upsell[hidden] {
    display: none;
  }

  .bonus-upsell-head {
    grid-column: 1;
    grid-row: 1;
  }

  .bonus-upsell-text {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0.125rem;
  }

  .bonus-upsell-action {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    padding: 0 1rem;
    white-space: nowrap;
    width: auto;
  }

  .fund-checkout {
    align-items: center;
    background: color-mix(in srgb, var(--surface) 86%, var(--panel));
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block: 0.875rem;
          padding-inline: 0 1rem;
  }

  .deposit-summary {
    background: transparent;
    border: 0;
    border-radius: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
  }

  .deposit-summary-row,
  .deposit-summary-total {
    align-items: flex-start;
    border-inline-start: 1px solid var(--border);
    flex-direction: column;
    gap: 0.25rem;
    justify-content: center;
    margin: 0;
    padding: 0.125rem 1.25rem;
  }

  .deposit-summary > :first-child {
    border-inline-start: 0;
  }

  .deposit-summary-row span,
  .deposit-summary-total span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1rem;
    text-transform: uppercase;
  }

  .deposit-summary-row span span {
    letter-spacing: inherit;
  }

  .deposit-summary-row strong {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .deposit-summary-total {
    border-top: 0;
  }

  .deposit-summary-total strong {
    font-size: 1.375rem;
    line-height: 1.75rem;
  }

  .fund-checkout-actions .primary-action {
    height: 2.75rem;
    padding: 0 1.25rem;
    white-space: nowrap;
  }
}

/* Type scale alignment for the funding summary area */
.quick-amount-chip {
  min-height: 3.5rem;
  padding: 0.5625rem 0.6875rem;
}

.quick-amount-value {
  font-size: 0.875rem;
  line-height: 1rem;
}

.tier-toggle {
  font-size: 0.75rem;
  min-height: 2.25rem;
}

.tier-toggle svg {
  height: 0.875rem;
  width: 0.875rem;
}

.bonus-upsell {
  padding: 0.75rem 0.875rem;
}

.bonus-upsell-head {
  font-size: 0.8125rem;
  gap: 0.4375rem;
  line-height: 1.125rem;
}

.bonus-upsell-head svg {
  height: 0.875rem;
  width: 0.875rem;
}

.bonus-upsell-text {
  font-size: 0.75rem;
  line-height: 1.125rem;
}

.bonus-upsell-action {
  font-size: 0.75rem;
  margin-top: 0.625rem;
  min-height: 2.125rem;
}

.deposit-summary {
  padding: 0.75rem 0.875rem;
}

.deposit-summary-row {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  padding: 0.1875rem 0;
}

.deposit-summary-row strong {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.deposit-summary-total {
  margin-top: 0.375rem;
  padding-top: 0.5625rem;
}

.deposit-summary-total span {
  font-size: 0.8125rem;
}

.deposit-summary-total strong {
  font-size: 1.125rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  .tier-toggle {
    min-height: 2rem;
    padding: 0 0.875rem;
  }

  .bonus-upsell {
    padding-block: 0.625rem;
          padding-inline: 0.875rem 0.75rem;
  }

  .bonus-upsell-text {
    margin-top: 0.0625rem;
  }

  .bonus-upsell-action {
    margin-top: 0;
    min-height: 2rem;
    padding: 0 0.875rem;
  }

  .fund-checkout {
    gap: 1rem;
    padding-block: 0.625rem;
          padding-inline: 0 0.75rem;
  }

  .deposit-summary {
    padding: 0;
  }

  .deposit-summary-row,
  .deposit-summary-total {
    gap: 0.125rem;
    margin: 0;
    padding: 0.125rem 1rem;
  }

  .deposit-summary-row span,
  .deposit-summary-total span {
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    line-height: 0.75rem;
  }

  .deposit-summary-row strong {
    font-size: 0.9375rem;
    line-height: 1.25rem;
  }

  .deposit-summary-total strong {
    font-size: 1.0625rem;
    line-height: 1.25rem;
  }

  .fund-checkout-actions .primary-action {
    height: 2.5rem;
    padding: 0 1rem;
  }
}

.method-detail-metas {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.method-fee-meta {
  color: var(--text);
}

.deposit-summary-row strong.deposit-summary-fee[data-zero="true"] {
  color: var(--muted);
}

.deposit-summary-pay {
  border-top: 1px solid var(--border);
  color: var(--text);
  margin: 0.25rem 0 0.375rem;
  padding-top: 0.5rem;
}

.deposit-summary-pay span {
  font-weight: 600;
}

@media (max-width: 639px) {
  .method-detail-metas {
    margin-top: 0.25rem;
    position: static;
  }

  .method-detail-metas .method-detail-meta {
    position: static;
  }
}

@media (min-width: 768px) {
  .deposit-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .deposit-summary-row.deposit-summary-pay {
    display: none;
  }

  .deposit-summary-row strong.deposit-summary-fee[data-zero="true"] {
    color: var(--muted);
  }
}

/* Card elevation (Tailwind shadow-sm) */
main article.rounded-2xl,
.fund-method-card,
.method-detail-card,
.quick-amount-chip,
.bonus-upsell,
.deposit-summary,
.sidebar-premium-card,
.sidebar-contact-card {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

@media (min-width: 768px) {
  .deposit-summary {
    box-shadow: none;
  }

  .fund-checkout {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }
}

/* Neutral selected state for payment methods (matches quick amount chips) */
.fund-method-card[data-active="true"] {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.fund-method-card[data-active="true"] .method-icon {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.fund-method-card [data-method-check] {
  color: var(--text);
}

/* Payment button sized to the page's action scale */
#proceed-payment {
  font-size: 0.8125rem;
  font-weight: 600;
  height: 2.375rem;
  line-height: 1.125rem;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .fund-checkout-actions #proceed-payment {
    font-size: 0.8125rem;
    height: 2.25rem;
    min-width: 8.5rem;
    padding: 0 0.875rem;
  }
}

/* Plain balance card on mobile/tablet (no glow) */
@media (max-width: 1023px) {
  .balance-pill {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  .balance-pill i,
  .balance-pill svg {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--accent-text);
  }
}

/* Plain active state for sidebar links (no gradient glow) */
.sidebar-nav-link[data-active="true"] {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: transparent;
}

/* Premium card aligned with the Contact Channels card (no glow) */
.sidebar-premium-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0.875rem;
}

.sidebar-premium-card::before {
  display: none;
}

.sidebar-premium-kicker {
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.5rem;
  letter-spacing: 0;
  line-height: 1.25rem;
  text-transform: none;
}

.sidebar-premium-kicker svg {
  color: var(--accent-text);
  height: 1rem;
  width: 1rem;
}

.sidebar-premium-feature {
  background: var(--panel);
  border-radius: 0.625rem;
  color: var(--muted);
  font-weight: 500;
}

.sidebar-premium-feature svg {
  color: var(--muted);
}

.sidebar-premium-action {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
  font-weight: 600;
  min-height: 2.25rem;
}

.sidebar-premium-action:hover {
  background: var(--surface-2);
  border-color: rgba(59, 130, 246, 0.38);
  color: var(--text);
}

/* Neutral hover / pressed states for View Benefits */
.sidebar-premium-action:hover {
  background: color-mix(in srgb, var(--text) 4%, var(--panel));
  border-color: var(--border);
  color: var(--text);
}

.sidebar-premium-action:active {
  background: color-mix(in srgb, var(--text) 8%, var(--panel));
  border-color: var(--border);
  color: var(--text);
}

.sidebar-premium-action:focus-visible {
  border-color: var(--border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 14%, transparent);
  outline: none;
}

/* Neutral hover / pressed states for Download and Contact Channels buttons */
.contact-channel-action:hover,
.contact-channel-toggle:hover {
  background: color-mix(in srgb, var(--text) 4%, var(--panel));
  border-color: var(--border);
  color: var(--text);
}

.contact-channel-action:active,
.contact-channel-toggle:active {
  background: color-mix(in srgb, var(--text) 8%, var(--panel));
  border-color: var(--border);
  color: var(--text);
}

.invoice-action:hover {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  border-color: var(--border);
  color: var(--text);
}

.invoice-action:active {
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  border-color: var(--border);
  color: var(--text);
}

.contact-channel-action:focus-visible,
.contact-channel-toggle:focus-visible,
.invoice-action:focus-visible {
  border-color: var(--border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 14%, transparent);
  outline: none;
}

/* Neutral states for View All tiers and pagination */
.tier-toggle:hover,
.pagination-button:hover {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  border-color: var(--border);
  color: var(--text);
}

.tier-toggle:active,
.pagination-button:active {
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  border-color: var(--border);
  color: var(--text);
}

.pagination-button[data-active="true"],
.pagination-button[data-active="true"]:hover {
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  border-color: var(--border);
  color: var(--text);
}

.tier-toggle:focus-visible,
.pagination-button:focus-visible {
  border-color: var(--border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 14%, transparent);
  outline: none;
}

/* Tailwind v4 compatibility: v4 puts utilities in a cascade layer, so
   unlayered rules above would otherwise win over utilities like .hidden */
button:not(:disabled),
[role="button"]:not(:disabled) {
  cursor: pointer;
}

.sidebar-nav-link.hidden,
.sidebar-nav-group.hidden,
.sidebar-section-title.hidden,
.tier-toggle[hidden] {
  display: none;
}

.requests-table {
  min-width: 56rem;
  width: 100%;
}

@media (max-width: 1023px) {
  .balance-pill {
    border-radius: 0.5rem;
  }
}

/* Neutral hover / focus for the sidebar search input */
.sidebar-search input:hover {
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
  border-color: var(--border);
}

.sidebar-search input:focus {
  background: var(--surface);
  border-color: var(--focus-border);
  box-shadow: none;
  outline: none;
}

/* Same neutral hover / focus for every form input */
.form-control:hover {
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
  border-color: var(--border);
}

.form-control:focus {
  background: var(--surface);
  border-color: var(--focus-border);
  box-shadow: none;
  outline: none;
}

/* Neutral selected / hover states in Currency, Language, Theme menus */
.select-dropdown-menu .dropdown-item:hover {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  color: var(--text);
}

.dropdown-item[data-currency-option][data-active="true"],
.dropdown-item[data-language-option][data-active="true"],
.dropdown-item[data-theme-option][data-active="true"],
.select-dropdown-menu .dropdown-item[data-active="true"]:hover {
  background: color-mix(in srgb, var(--text) 7%, var(--surface));
  color: var(--text);
}

.dropdown-item[data-currency-option][data-active="true"] i,
.dropdown-item[data-language-option][data-active="true"] i,
.dropdown-item[data-theme-option][data-active="true"] i,
.select-dropdown-menu .dropdown-item i,
.select-dropdown-menu .dropdown-item svg {
  color: var(--text);
}

/* Plain "BC" avatar: no colored fill, just an outline */
.account-avatar {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

/* "BC" avatar on a light gray fill */
.account-avatar {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--text);
}

.sidebar-nav-link[data-active="true"] {
  background: var(--surface-2);
}

/* ---------- One radius scale for the whole page ---------- */
:root {
  --radius: 0.5rem;
  --radius-sm: 0.375rem;
}

main article.rounded-2xl,
main .overflow-x-auto.rounded-xl,
.sidebar-premium-card,
.sidebar-contact-card,
.sidebar-search input,
.sidebar-nav-link,
.sidebar-premium-feature,
.sidebar-premium-action,
.contact-channel-action,
.contact-channel-toggle,
.header-action-pill,
.header-control-button,
.dropdown-menu,
.dropdown-item,
.select-dropdown-menu .dropdown-item,
.account-menu-link,
.account-dropdown .rounded-lg,
.notification-action,
.fund-method-card,
.fund-method-card .method-icon,
.method-detail-card,
.quick-amount-chip,
.tier-toggle,
.bonus-upsell,
.bonus-upsell-action,
.deposit-summary,
.fund-checkout,
.form-control,
.primary-action,
.invoice-action,
.pagination-button,
#open-sidebar,
#close-sidebar {
  border-radius: var(--radius);
}

.quick-amount-bonus,
.method-detail-meta,
.method-requirement-badge,
html .status-badge {
  border-radius: var(--radius-sm);
}

@media (max-width: 1023px) {
  #open-sidebar,
  .header-controls,
  .balance-pill,
  .balance-pill i,
  .balance-pill svg,
  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button,
  .app-header-title > .notification-control .header-control-button {
    border-radius: var(--radius);
  }

  /* Plain mobile header controls: no gradient, blur or glow */
  .header-controls,
  #open-sidebar,
  .app-header-title > .notification-control .header-control-button {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button:hover,
  .header-controls .header-control-dropdown:not(.notification-control) .header-control-button[aria-expanded="true"] {
    background: color-mix(in srgb, var(--text) 4%, var(--surface));
    color: var(--text);
    transform: none;
  }

  /* Plain balance icon */
  .balance-pill i,
  .balance-pill svg {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
  }
}

/* Upgrade button: same neutral states as View All Bonus Tiers */
.bonus-upsell-action:hover {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  border-color: var(--border);
  color: var(--text);
}

.bonus-upsell-action:active {
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  border-color: var(--border);
  color: var(--text);
}

.bonus-upsell-action:focus-visible {
  border-color: var(--border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 14%, transparent);
  outline: none;
}

/* Mobile header icon buttons match the sidebar close button (32px) */
@media (max-width: 1023px) {
  .app-header-title {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
  }

  #open-sidebar,
  .app-header-title > .notification-control,
  .app-header-title > .notification-control .header-control-button {
    height: 2rem;
    width: 2rem;
  }
}

/* shadow-sm on sidebar controls */
.sidebar-search input,
.sidebar-premium-action,
.contact-channel-action,
.contact-channel-toggle,
#close-sidebar {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* Focus border token (soft in light mode) */
:root {
  --focus-border: color-mix(in srgb, var(--text) 30%, var(--border));
}

/* Softer focus border in light mode */
:root[data-theme="light"] {
  --focus-border: color-mix(in srgb, var(--text) 14%, var(--border));
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --focus-border: color-mix(in srgb, var(--text) 14%, var(--border));
  }
}

/* Addfunds: the real <select> stays in the DOM for the panel's script */
.fund-method-select {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.fund-alert {
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.625rem;
  justify-content: space-between;
  line-height: 1.25rem;
  padding: 0.625rem 0.75rem;
}

.fund-alert-success {
  background: color-mix(in srgb, var(--positive) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--positive) 40%, var(--border));
}

.fund-alert-error {
  background: color-mix(in srgb, #f87171 12%, var(--surface));
  border-color: color-mix(in srgb, #f87171 45%, var(--border));
}

.fund-instructions {
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.5rem;
  overflow-wrap: anywhere;
}

.fund-instructions a {
  color: var(--accent-text);
  text-decoration: underline;
}

.fund-empty {
  align-items: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
}

.amount-original {
  color: var(--muted);
  display: block;
  font-size: 0.6875rem;
  line-height: 1rem;
}

.pagination-button[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* =====================================================================
   RTL (Arabic, Persian, Hebrew…)
   layout.twig puts dir="rtl" on <html> when site.rtl is on. Spacing,
   borders and positions above use logical properties and follow the
   direction automatically; the rules below cover what cannot.
   ===================================================================== */

/* Arabic letters must stay joined: no tracking on any text */
[dir="rtl"] body,
[dir="rtl"] body * {
  letter-spacing: 0 !important;
}

/* Fonts with Arabic and Hebrew glyphs before the generic fallback */
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  font-family: "Manrope", "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Sans Hebrew", sans-serif;
}

/* Decorative, looping strips keep their LTR motion */
[dir="rtl"] .logo-marquee,
[dir="rtl"] .trust-marquee,
[dir="rtl"] .payment-flow-stage {
  direction: ltr;
}

/* Directional icons point the other way */
[dir="rtl"] .lucide-arrow-right,
[dir="rtl"] .lucide-arrow-left,
[dir="rtl"] .lucide-arrow-up-right,
[dir="rtl"] .lucide-chevron-right,
[dir="rtl"] .lucide-chevron-left,
[dir="rtl"] .lucide-corner-down-left,
[dir="rtl"] .lucide-log-in {
  transform: scaleX(-1);
}

/* Full-bleed bands (relative + left-1/2 + w-screen) re-centre from the right edge */
[dir="rtl"] .enterprise-hero-band,
[dir="rtl"] .footer-stage {
  left: auto;
  right: 50%;
  translate: 50% 0;
}

/* Mobile menu reveals from the right */
[dir="rtl"] .mobile-menu-panel,
[dir="rtl"] .mobile-menu-panel[data-closing="true"] {
  clip-path: inset(0 0 0 100%);
}

[dir="rtl"] .mobile-menu-panel[data-open="true"] {
  clip-path: inset(0 0 0 0);
}

/* App shell: mobile sidebar slides in from the right */
[dir="rtl"] #mobile-sidebar,
[dir="rtl"] #mobile-sidebar[data-closing="true"] {
  clip-path: inset(0 0 0 100%);
}

[dir="rtl"] #mobile-sidebar[data-open="true"] {
  clip-path: inset(0 0 0 0);
}

/* Mirror the hero glow so it leads from the reading side */
[dir="rtl"] .enterprise-hero-band::after {
  inset: auto auto 0 8%;
}

/* Prices, balances, codes, phone numbers and URLs stay LTR inside RTL text */
[dir="rtl"] .hero-metric-value,
[dir="rtl"] .presence-contact-value,
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"] {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .presence-contact-value {
  text-align: end;
}

/* Money and codes in the app shell keep their LTR order (e.g. "+$47.50") */
[dir="rtl"] .deposit-summary strong,
[dir="rtl"] .quick-amount-value,
[dir="rtl"] .balance-pill strong,
[dir="rtl"] .header-action-pill strong,
[dir="rtl"] #currency-label,
[dir="rtl"] .requests-table td:nth-child(4) {
  direction: ltr;
  unicode-bidi: isolate;
}