/* Ultra look for the older PixelRec pages (guides, blog list, comparisons, legal).
   Loaded LAST, after /site.css and /seo-pages.css, on pages with <body class="ux">.
   It only changes colors, fonts, cards and buttons; the page layouts stay the same. */

body.ux {
  --bg: #05060a;
  --bg-card: rgba(255, 255, 255, .035);
  --bg-surface: #05060a;
  --border: rgba(255, 255, 255, .08);
  --accent: #2e7df6;
  --accent-2: #9cc4ff;
  --gradient: linear-gradient(180deg, #3d8bff, #2a6fe0);
  --text: #f3f6fc;
  --text-secondary: #a3acbe;
  --text-muted: #6d7689;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ux-head: 'Sora', 'Inter', system-ui, sans-serif;
  --ux-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --ux-sky: #9cc4ff;
  --ux-line-hi: rgba(255, 255, 255, .14);
  background: #05060a;
}
body.ux ::selection { background: rgba(46, 125, 246, .45); }

/* Type */
body.ux h1, body.ux h2, body.ux h3, body.ux .stitle, body.ux .hero h1 {
  font-family: var(--ux-head);
  font-weight: 700;
}
body.ux .hero h1 { letter-spacing: -.045em; line-height: 1.02; }
body.ux .stitle { letter-spacing: -.035em; line-height: 1.08; }
body.ux h3 { letter-spacing: -.02em; }
body.ux .grad {
  color: transparent;
  background: linear-gradient(180deg, #ffffff 10%, #9cc4ff 120%);
  -webkit-background-clip: text;
  background-clip: text;
}
body.ux .eyebrow,
body.ux .seo-related-card span,
body.ux .home-guide span {
  font: 500 12px var(--ux-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ux-sky);
}
body.ux .badge {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font: 500 11.5px var(--ux-mono);
  letter-spacing: .2em;
  padding: 7px 16px;
}
body.ux .badge-dot { background: #ff4d4f; box-shadow: 0 0 0 4px rgba(255, 77, 79, .16); }
body.ux .seo-article-meta { font: 500 11px var(--ux-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

/* Buttons */
body.ux .btn { border-radius: 999px; font-weight: 600; }
body.ux .btn-primary { background: linear-gradient(180deg, #3d8bff, #2a6fe0); border: 1px solid rgba(160, 200, 255, .35); color: #fff; }
body.ux .btn-primary:hover { box-shadow: none; opacity: 1; background: linear-gradient(180deg, #4a93ff, #2e78ee); }
body.ux .btn-outline { background: rgba(255, 255, 255, .035); border-color: var(--ux-line-hi); }
body.ux .btn-white { background: #fff; color: #0a0d14; border: 0; }
body.ux .btn-white:hover { transform: translateY(-1px); }
body.ux .chk { background: transparent; border: 0; color: #5b9bff; box-shadow: none; }

/* Nav */
body.ux nav[aria-label="Primary navigation"] {
  background: rgba(5, 6, 10, .72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
body.ux .nav-inner { height: 68px; }
body.ux nav .brand-logo-img { width: auto; height: 30px; max-height: none; }
body.ux .nav-links { gap: 26px; margin-left: auto; }
body.ux .nav-links a:hover, body.ux .ft-nav-tools:hover .ft-nav-tools-btn { color: var(--text); text-shadow: none; }
body.ux .nav-right .btn { padding: 0 18px; height: 40px; font-size: 14px; }
body.ux .ft-nav-tools-menu { background: #0d1018; border-color: var(--ux-line-hi); }
body.ux .ft-tool-ic.is-pixelrec { background: rgba(46, 125, 246, .14); border-color: rgba(46, 125, 246, .32); }
@media (max-width: 760px) {
  body.ux .nav-links { display: none; }
  body.ux nav .brand-logo-img { height: 26px; }
}

/* Breadcrumbs */
body.ux .seo-breadcrumbs ol { font: 500 11px var(--ux-mono); letter-spacing: .14em; text-transform: uppercase; }

/* Section backgrounds: one black page, no stripes */
body.ux section,
body.ux .seo-surface,
body.ux .seo-blue-surface,
body.ux .seo-related,
body.ux .faq-bg,
body.ux .benefits-bg,
body.ux .why-pixelrec,
body.ux .seo-section,
body.ux .pricing-bg { background: transparent; }

/* Cards: glass */
body.ux .seo-info-card,
body.ux .seo-product-panel,
body.ux .seo-visual-card,
body.ux .seo-workflow li,
body.ux .seo-method,
body.ux .seo-choice-card,
body.ux .seo-platform-card,
body.ux .seo-related-card,
body.ux .seo-comparison,
body.ux .seo-toc,
body.ux .seo-author,
body.ux .seo-panel,
body.ux .seo-card,
body.ux .compare-card,
body.ux .fitem,
body.ux .legal-toc,
body.ux .bcard {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--border);
  border-top-color: var(--ux-line-hi);
  box-shadow: none;
}
body.ux .seo-info-card::before { background: none; }
body.ux .seo-related-card:hover { background: rgba(255, 255, 255, .06); border-color: rgba(120, 170, 255, .35); box-shadow: none; }
body.ux .seo-choice-card.pixelrec-choice {
  background: linear-gradient(180deg, rgba(46, 125, 246, .12), rgba(46, 125, 246, .02) 60%), #080a11;
  border-color: rgba(120, 170, 255, .35);
}
body.ux .seo-comparison tr { background: transparent; }
body.ux .seo-card-mark.warn { background: rgba(255, 181, 71, .1); color: #ffb547; }
body.ux .seo-callout { background: linear-gradient(180deg, rgba(46, 125, 246, .1), rgba(46, 125, 246, .02)); border: 1px solid rgba(120, 170, 255, .28); }
body.ux .seo-callout-mark { background: rgba(46, 125, 246, .16); color: var(--ux-sky); box-shadow: none; }
body.ux .seo-stage-scrim { background: linear-gradient(0deg, rgba(5, 6, 10, .75), transparent 45%); }
body.ux .seo-calc { background: linear-gradient(180deg, rgba(46, 125, 246, .1), rgba(46, 125, 246, .02)); border-color: rgba(120, 170, 255, .3); }
body.ux .seo-calc input, body.ux .seo-calc select, body.ux .seo-calc-result { background: #0a0c13; }
body.ux .seo-calc-tabs button[aria-selected="true"] { background: #2e7df6; }
body.ux .seo-inline-link, body.ux .seo-prose a, body.ux .legal-body a { color: var(--ux-sky); }
body.ux .seo-live-pill, body.ux .seo-product-panel-label { font-family: var(--ux-mono); letter-spacing: .14em; }

/* FAQ */
body.ux .fitem.open { border-color: rgba(120, 170, 255, .3); }
body.ux .fq { font-family: var(--ux-head); font-weight: 600; font-size: 16px; }
body.ux .fq-icon { border-radius: 50%; background: transparent; border-color: var(--ux-line-hi); color: var(--ux-sky); }
body.ux .fa { font-size: 15px; }

/* Final call to action: the Ultra horizon */
body.ux .fcta { padding-bottom: 260px; }
body.ux .fcta::before {
  top: auto; bottom: 0; left: 0; transform: none;
  width: 100%; height: 520px;
  background: radial-gradient(46% 300px at 50% 400px, rgba(46, 125, 246, .3), rgba(46, 125, 246, .08) 55%, transparent 80%);
}
body.ux .fcta::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2980px;
  width: 3200px;
  height: 3200px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, #05060a 96%, #07101f 99%, #0c1a33 100%);
  border-top: 1.5px solid rgba(160, 200, 255, .95);
  box-shadow: 0 -2px 18px rgba(120, 175, 255, .55), 0 -24px 90px rgba(46, 125, 246, .35), inset 0 22px 60px rgba(46, 125, 246, .22);
  pointer-events: none;
}
body.ux .fcta .si { position: relative; z-index: 2; }
@media (max-width: 640px) {
  body.ux .fcta { padding-bottom: 200px; }
  body.ux .fcta::after { width: 1800px; height: 1800px; bottom: -1640px; }
}

/* Footer */
body.ux footer { background: #05060a; border-top: 1px solid var(--border); }
body.ux .footer-logo-img { width: auto; height: 30px; max-height: none; }
body.ux .footer-col h4 { font: 500 11px var(--ux-mono); letter-spacing: .22em; color: var(--text-muted); }
body.ux .fsl { border-radius: 50%; background: transparent; border: 1px solid var(--ux-line-hi); }
body.ux .lang-switch { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; width: 100%; margin: 0 0 14px; font-size: 13px; }
body.ux .lang-switch a { color: var(--text-muted); text-decoration: none; }
body.ux .lang-switch a:hover { color: var(--text); }
body.ux .lang-switch span { color: var(--text); font-weight: 600; }

/* Comparison tables on phones: one glass card per row */
@media (max-width: 760px) {
  body.ux .seo-comparison { background: transparent; border: 0; border-top: 0; }
  body.ux .seo-comparison tr { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .08); }
  body.ux .seo-comparison tbody th { display: block !important; width: 100% !important; box-sizing: border-box; background: rgba(46, 125, 246, .08); }
}

/* Old cards had a blurred blue halo and a gradient top line: not in the Ultra look */
body.ux .bcard::after { display: none; }
body.ux .bcard::before { background: none; }
body.ux .bcard:hover { transform: none; box-shadow: none; border-color: rgba(120, 170, 255, .35); }
body.ux .earn-num { font-family: var(--ux-head); color: var(--ux-sky); letter-spacing: -.03em; }
body.ux .bcard a, body.ux .fa a { color: var(--ux-sky); }
body.ux .bcard code { word-break: break-all; font-family: var(--ux-mono); font-size: .92em; color: var(--text); }