/* ═══════════════════════════════════════════════════════════════
   UPPERVOX — purple skin for the pre-redesign pages.
   Loaded LAST in <head>, after each page's embedded <style>, so it
   wins on equal specificity. It re-points the old design tokens to
   the Aivio violet system and reshapes the shared components.
   Pages rebuilt on uppervox.css do not load this file.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #0b031d;
  --bg-soft: #100628;
  --bg-2: #1c1333;
  --ink: #ffffff;
  --ink-dim: #cec6e0;
  --muted: #9d93bd;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .18);
  --accent: #b27cff;              /* readable violet for text + links */
  --accent-deep: #8e31e1;
  --accent-dim: rgba(142, 49, 225, .18);
  --sans: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 24px;
}

/* Silk art behind the top of every page; the old heroes are transparent,
   so it shows through under the floating menu. */
body {
  background: #0b031d url('/assets/bg/page.webp') center top / max(100%, 1100px) auto no-repeat;
  font-weight: 500;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 960px) {
  body { background-image: url('/assets/bg/page-960.webp'); }
}

/* ── Headings: Aivio weight and tracking, lavender H2 with a white phrase ── */
h1 { font-weight: 500; letter-spacing: .5px; }
h2 { font-weight: 500; letter-spacing: .2px; color: #cdc5df !important; }
h3, h4 { font-weight: 500; letter-spacing: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
/* The old pages style emphasis through selectors like ".block-head h2 em";
   !important is the one reliable way to override all of them at once. */
:is(h1, h2) :is(em, i, .hl) { font-style: normal !important; color: #ffffff !important; }

/* terms + privacy: the old bar sat in the flow; the new menu floats. */
.uv-header + h1 { margin-top: 110px; }

/* ── Labels: no mono caps; section eyebrows get Aivio's white dot ── */
.label {
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 500;
}
.label--accent, .block-head .label, .article-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #ffffff;
}
.label--accent::before, .block-head .label::before, .article-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  flex: none;
}

/* ── Buttons: gradient pill + outline pill ── */
.btn {
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  padding: 15px 28px;
}
.btn.primary, .btn--primary, .cta .btn:not(.ghost) {
  background: linear-gradient(to top, #7300d1 0%, #8e31e1 100%);
  color: #ffffff;
  border-color: transparent;
}
.btn.primary:hover, .btn--primary:hover, .cta .btn:not(.ghost):hover {
  background: linear-gradient(to top, #8e31e1 0%, #7300d1 100%);
  color: #ffffff;
}
.btn.ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .18);
}
.btn.ghost:hover { border-color: #8e31e1; background: transparent; color: #ffffff; }

/* ── Cards: Aivio card surface + violet hover edge ── */
.service-card, .proof-card, .post-card, .price-card, .tier, .case, .faq-item, .stat, .cmp-mini {
  border-radius: var(--r);
}
.service-card:hover, .proof-card:hover, .post-card:hover, .price-card:hover, .tier:hover {
  border-color: #8e31e1;
}

/* ── Brand art was drawn in ice-blue; rotate it onto violet ── */
img[src*="uppervox-logo"], img[src*="uppervox-mark"], img[src*="-art."],
img[src*="roi-growth"], img[src*="/industries/"], img[src*="/blog/"] {
  filter: hue-rotate(52deg) saturate(1.15);
}

/* ── The old custom cursor isn't part of the Aivio look ── */
.cursor-dot, .cursor-ring { display: none !important; }
html, body { cursor: auto !important; }
a, button, summary, label, select { cursor: pointer !important; }