/*!
 * NOXTHEME — main stylesheet
 * All accent colors are CSS variables editable in WP Customizer (Appearance → Customize → Colors).
 * Derived shades use color-mix() and follow the base accents automatically.
 */

:root {
  --ink: #0e0e10;
  --ink-2: #16171a;
  --ink-3: #1e2024;
  --ink-4: #25282e;
  --line: #2a2d33;
  --line-2: #3a3e47;
  --bone: #ffffff;
  --bone-dim: #c7cad1;
  --mute: #7c808a;
  --hot: #e63946;
  --orange: #f26522;
  --lime: #9bcb3d;
  --gold: #ffb627;
  --orange-2: color-mix(in srgb, var(--orange) 88%, white 12%);
  --orange-deep: color-mix(in srgb, var(--orange) 80%, black 20%);
  --lime-2: color-mix(in srgb, var(--lime) 88%, white 12%);
  --font-display: "Anton", "Cairo", "Tajawal", system-ui, sans-serif;
  --font-body: "Inter", "Cairo", "Tajawal", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cairo", monospace;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}

.nx-brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  letter-spacing: 0.01em;
  line-height: 1;
  transform: skewX(-6deg);
}
.nx-brand .a {
  color: var(--bone);
}
.nx-brand .b {
  color: var(--orange);
}
.nx-brand .sub {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-left: 8px;
  color: var(--bone-dim);
  transform: skewX(6deg);
}

.nx-mono {
  font-family: var(--font-mono);
}
.nx-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(52px, 6.5vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
.nx-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0;
}
.nx-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--bone-dim);
  max-width: 560px;
}
.nx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 16px;
}
.nx-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
}
.nx-eyebrow.is-lime { color: var(--lime); }
.nx-eyebrow.is-gold { color: var(--gold); }

/* Italic emphasis inside display headings auto-colors orange.
   User adds emphasis via the inline Italic toolbar — no manual class needed. */
.nx-h1 em,
.nx-h2 em,
.nx-final-h em {
  color: var(--orange);
  font-style: italic;
}
.nx-h1 em.lime,
.nx-h2 em.lime { color: var(--lime); }
.nx-h1 em.gold,
.nx-h2 em.gold { color: var(--gold); }
/* Legacy hooks kept for backwards-compat with old patterns */
.ital-or { color: var(--orange); font-style: italic; }
.ital-go { color: var(--gold);   font-style: italic; }
.ital-li { color: var(--lime);   font-style: italic; }

.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--bone);
  transition:
    transform 0.12s,
    filter 0.12s,
    background 0.15s,
    box-shadow 0.15s;
}
.nx-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.nx-btn-orange {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 4px 18px rgba(242, 101, 34, 0.35);
}
.nx-btn-lime {
  background: var(--lime);
  color: var(--ink);
}
.nx-btn-ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--bone);
}
.nx-btn-ghost:hover {
  border-color: var(--bone);
  background: rgba(255, 255, 255, 0.04);
}

.nx-btn-dl {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  border: none;
  cursor: pointer;
  transition:
    transform 0.12s,
    filter 0.12s;
}
.nx-btn-dl:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.nx-btn-dl.lime {
  background: var(--lime);
  color: var(--ink);
}
.nx-btn-dl.orange {
  background: var(--orange);
  color: #fff;
}
.nx-btn-dl .ic {
  width: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.nx-btn-dl .lbl {
  flex: 1;
  text-align: left;
  line-height: 1.15;
}
.nx-btn-dl .lbl .small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nx-btn-dl .lbl .big {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0.02em;
}
.nx-btn-dl .arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  padding-left: 12px;
  margin-left: auto;
}

.nx-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 28px;
  background: rgba(14, 14, 16, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition:
    background 0.2s,
    border-color 0.2s;
}
.nx-nav > .nx-brand {
  justify-self: start;
}
.nx-nav-cta {
  justify-self: end;
}
.nx-nav.scrolled {
  background: rgba(14, 14, 16, 0.96);
  border-color: var(--line-2);
}
.nx-nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
  justify-content: center;
}
.nx-nav-links ul,
.nx-nav-links .nx-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.nx-nav-links li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nx-nav-links a {
  color: var(--bone-dim);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}
.nx-nav-links a:hover {
  color: var(--orange);
}
.nx-nav-links .current-menu-item > a,
.nx-nav-links .current_page_item > a {
  color: var(--bone);
}
.nx-nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.nx-burger {
  display: none;
  background: var(--ink-2);
  border: 1px solid var(--line);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--bone);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.va-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 64px 0 48px;
  position: relative;
}
.va-bg-stripe {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 50% 50% at 80% 20%,
    rgba(242, 101, 34, 0.08),
    transparent 60%
  );
  pointer-events: none;
}
.nx-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
}

.nx-dl-panel {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 460px;
}
.nx-dl-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px;
  margin-top: 12px;
}
.nx-dl-stats > div {
  padding: 14px 12px;
  text-align: left;
  border-right: 1px solid var(--line);
}
.nx-dl-stats > div:last-child {
  border-right: none;
}
.nx-dl-stats .lab {
  font-size: 13px;
  color: var(--bone-dim);
}
.nx-dl-stats .val {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--bone);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nx-phone {
  position: relative;
  width: 240px;
  height: 500px;
  background: #0a0a0c;
  border: 1.5px solid #2a2c33;
  border-radius: 32px;
  padding: 7px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 60px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}
.nx-phone::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 18px;
  background: #0a0a0c;
  border-radius: 10px;
  z-index: 2;
}
.nx-phone-screen {
  width: 100%;
  height: 100%;
  background: var(--ink);
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.nx-phone-trio {
  display: flex;
  gap: 0;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
}
.nx-phone-trio .nx-phone:nth-child(1) {
  transform: rotate(-7deg) translateY(20px);
  margin-right: -28px;
  z-index: 1;
}
.nx-phone-trio .nx-phone:nth-child(2) {
  transform: translateY(-12px) scale(1.04);
  z-index: 3;
}
.nx-phone-trio .nx-phone:nth-child(3) {
  transform: rotate(7deg) translateY(20px);
  margin-left: -28px;
  z-index: 1;
}

.scr-top {
  padding: 30px 14px 8px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--mute);
}
.scr-bar {
  padding: 0 14px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scr-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 14px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}
.scr-tab {
  padding: 8px 10px;
  color: var(--mute);
}
.scr-tab.on {
  color: var(--orange);
  border-bottom: 1.5px solid var(--orange);
}
.scr-list {
  flex: 1;
  overflow: hidden;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scr-mini-match {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}
.scr-mini-match .h {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--mute);
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.scr-mini-match .h .lv {
  color: var(--hot);
}
.scr-mini-match .t {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.scr-mini-match .t span:last-child {
  font-family: var(--font-mono);
  font-weight: 700;
}
.scr-mini-match .od {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.scr-mini-match .od > div {
  flex: 1;
  background: var(--ink-3);
  border-radius: 4px;
  padding: 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}
.scr-mini-match .od > div.hi {
  background: var(--orange);
  color: #fff;
}
.scr-slot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
  flex: 1;
  overflow: hidden;
}
.scr-slot {
  border-radius: 8px;
  height: 80px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.scr-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    transparent 60%
  );
}
.scr-slot span {
  position: relative;
  z-index: 1;
}

.nx-section {
  border-bottom: 1px solid var(--line);
  padding: 88px 0;
  position: relative;
}

.va-tape {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 24px;
  overflow: hidden;
  white-space: nowrap;
}
.va-tape .sep {
  font-size: 18px;
}
.va-tape-track {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  animation: tape 40s linear infinite;
}
@keyframes tape {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.nx-sports {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.nx-sport-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bone-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.nx-sport-pill:hover,
.nx-sport-pill.on {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.nx-sport-pill .ic {
  width: 16px;
  height: 16px;
}

.nx-match {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 18px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  align-items: center;
  transition: border-color 0.15s;
}
.nx-match:hover {
  border-color: var(--line-2);
}
.nx-match .lg {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.nx-match .lg .live {
  color: var(--hot);
  font-weight: 700;
}
.nx-match .teams {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nx-match .team {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}
.nx-match .team .badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ink-3);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 10px;
  color: var(--bone);
}
.nx-odds {
  display: flex;
  gap: 6px;
}
.nx-odd {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 68px;
  padding: 10px 8px;
  background: var(--ink-3);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.nx-odd:hover {
  background: var(--ink-4);
  border-color: var(--orange);
}
.nx-odd .l {
  font-size: 10px;
  color: var(--mute);
  text-transform: uppercase;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}
.nx-odd .v {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--bone);
  margin-top: 2px;
}
.nx-odd.up .v {
  color: var(--lime);
}
.nx-odd.down .v {
  color: var(--hot);
}

.nx-casino-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.nx-casino-tile {
  border-radius: 14px;
  height: 200px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
  background-size: cover;
  background-position: center;
}
.nx-casino-tile:hover {
  transform: translateY(-3px);
}
.nx-casino-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      var(--tint, rgba(242, 101, 34, 0.45)),
      transparent 60%
    ),
    linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 55%);
}
.nx-casino-tile .tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  border-radius: 99px;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.nx-casino-tile .name {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: #fff;
  z-index: 2;
}

.nx-feat-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.nx-feat {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  position: relative;
  min-height: 240px;
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.nx-feat:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}
.nx-feat .num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
}
.nx-feat .ic-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(242, 101, 34, 0.12);
  color: var(--orange);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}
.nx-feat h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.nx-feat p {
  color: var(--bone-dim);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.nx-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.nx-step {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  position: relative;
  min-height: 240px;
}
.nx-step .step-n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  color: var(--orange);
  line-height: 0.9;
  margin-bottom: 18px;
}
.nx-step h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 8px;
}
.nx-step p {
  color: var(--bone-dim);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.nx-step .arrow {
  position: absolute;
  top: 36px;
  right: -22px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--line-2);
  z-index: 2;
  background: var(--ink);
  border-radius: 50%;
}

.nx-banking {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.nx-bank-tile {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.nx-bank-tile .name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--bone);
}

.nx-cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.nx-cmp th,
.nx-cmp td {
  padding: 18px 22px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.nx-cmp th:last-child,
.nx-cmp td:last-child {
  border-right: none;
}
.nx-cmp tbody tr:last-child td {
  border-bottom: none;
}
.nx-cmp th {
  background: var(--ink-3);
  color: var(--bone);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.nx-cmp th.hi {
  background: var(--orange);
  color: #fff;
}
.nx-cmp td {
  color: var(--bone-dim);
  background: var(--ink-2);
}
.nx-cmp td.hi {
  background: rgba(242, 101, 34, 0.06);
}
.nx-cmp .yes {
  color: var(--lime);
  font-family: var(--font-mono);
  font-weight: 700;
}
.nx-cmp .no {
  color: var(--mute);
  font-family: var(--font-mono);
}
.nx-cmp .row-h {
  color: var(--bone);
  font-weight: 600;
}

.nx-faq-item {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.nx-faq-item.open {
  border-color: var(--orange);
}
.nx-faq-q {
  width: 100%;
  background: transparent;
  border: none;
  padding: 22px 26px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}
.nx-faq-q .chev {
  color: var(--orange);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.nx-faq-item.open .chev {
  transform: rotate(180deg);
}
.nx-faq-a {
  max-height: 0;
  overflow: hidden;
  padding: 0 26px;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease;
  color: var(--bone-dim);
  font-size: 14px;
  line-height: 1.6;
}
.nx-faq-item.open .nx-faq-a {
  max-height: 280px;
  padding: 0 26px 22px;
}

.nx-footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding: 56px 0 28px;
}
.nx-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.nx-footer-grid .nx-banking {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.nx-footer h5 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}
.nx-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nx-footer a {
  color: var(--bone-dim);
  font-size: 14px;
  transition: color 0.15s;
}
.nx-footer a:hover {
  color: var(--orange);
}
.nx-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  gap: 16px;
  font-size: 12px;
  color: var(--mute);
  flex-wrap: wrap;
}

@keyframes nx-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.nx-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hot);
  animation: nx-pulse 1.4s infinite;
  vertical-align: middle;
  margin-right: 4px;
}

.hero-vis {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  height: 560px;
  background-size: cover;
  background-position: center;
}
.hero-vis::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(14, 14, 16, 0.4),
    rgba(14, 14, 16, 0.85)
  );
}
.hero-vis-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  z-index: 2;
}

.nx-text {
  padding: 64px 0;
}
.nx-text-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 28px;
}
.nx-text h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 18px;
  color: var(--bone);
}
.nx-text p {
  font-size: 16px;
  color: var(--bone-dim);
  line-height: 1.7;
  margin: 0 0 18px;
}
.num-steps {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px 12px;
}
.num-steps-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.num-steps-head .ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--ink);
}
.num-steps-head .lbl {
  font-weight: 700;
  font-size: 17px;
  color: var(--bone);
}
/* Numbered steps — native <ol> with coloured ::marker
   The colour modifier sits on the wrapping group: .num-steps.lime / .num-steps.orange */
.num-steps .num-steps-list {
  margin: 0;
  padding-inline-start: 28px;
  list-style-type: decimal;
}
.num-steps .num-steps-list li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
  color: var(--bone);
  line-height: 1.55;
}
.num-steps .num-steps-list li:last-child {
  border-bottom: none;
}
.num-steps .num-steps-list li::marker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--bone);
}
.num-steps.lime  .num-steps-list li::marker { color: var(--lime); }
.num-steps.orange .num-steps-list li::marker { color: var(--orange); }

/* Perks grid — native <ul>, checkmark via ::before pseudo */
.perks-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.perks-grid li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  color: var(--bone);
  line-height: 1.5;
}
.perks-grid li::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat,
              linear-gradient(#000, #000);
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat,
          linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.nx-final {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--ink-2), var(--ink));
  padding: 64px 56px;
}
.nx-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 100% 50%,
    rgba(242, 101, 34, 0.18),
    transparent 60%
  );
  pointer-events: none;
}
.nx-final-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nx-nav-h, 64px);
  left: 0;
  right: 0;
  background: rgba(14, 14, 16, 0.98);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 49;
  padding: 24px 28px;
  max-height: calc(100vh - var(--nx-nav-h, 64px));
  overflow-y: auto;
}
.mobile-menu.on {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mobile-menu a {
  color: var(--bone);
  font-size: 18px;
  font-weight: 600;
  display: block;
}
.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Bury burger SVG path so click events bubble to the <button> */
.nx-burger * { pointer-events: none; }

@media (max-width: 980px) {
  .va-hero {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .nx-feat-grid {
    grid-template-columns: 1fr;
  }
  .nx-feat {
    grid-column: auto !important;
  }
  .nx-steps {
    grid-template-columns: 1fr 1fr;
  }
  .nx-banking {
    grid-template-columns: repeat(3, 1fr);
  }
  .nx-casino-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .nx-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nx-wrap {
    margin-top: 0 !important;
  }
  .nx-text {
    padding-bottom: 0;
  }
  #registration {
    padding-top: 30px !important;
  }
  #faq {
    padding-bottom: 20px;
  }
  .nx-nav {
    grid-template-columns: auto 1fr auto;
  }
  .nx-nav-links {
    display: none;
  }
  .nx-burger {
    display: flex;
  }
  .nx-nav-cta .nx-btn-ghost {
    display: none;
  }
  .nx-nav-cta .nx-btn-orange {
    padding: 10px 16px;
    font-size: 13px;
  }
  .hide-on-mobile {
    display: none !important;
  }
  .nx-final {
    padding: 40px 24px;
  }
  .nx-final-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    min-width: 0;
  }
  .nx-final-grid .nx-dl-panel {
    align-self: center;
    width: 100%;
    max-width: 460px;
    min-width: 0;
  }
  .nx-dl-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .nx-dl-stats > div {
    padding: 12px 8px;
    min-width: 0;
  }
  .nx-final-h {
    font-size: clamp(28px, 8vw, 44px) !important;
  }
  .perks-grid {
    grid-template-columns: 1fr;
  }
  .va-bnk-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .nx-cmp-wrap {
    overflow-x: auto;
  }
  .nx-cmp {
    min-width: 640px;
  }
  .hero-vis {
    height: 380px;
  }
  .nx-phone-trio {
    transform: scale(0.78);
  }
  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}
@media (max-width: 560px) {
  .nx-section {
    padding: 64px 0;
  }
  .nx-banking {
    grid-template-columns: repeat(2, 1fr);
  }
  .nx-casino-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nx-steps {
    grid-template-columns: 1fr;
  }
  .nx-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   Core block overrides — make WP native blocks adopt the
   NOX visual language so users get clean Gutenberg blocks
   instead of raw HTML wrappers.
   ========================================================== */

/* Site logo — bound to 150 px so brand stays consistent regardless of upload size */
.nx-site-logo,
.wp-block-site-logo,
.custom-logo-link {
  display: inline-block;
  margin: 0;
  line-height: 0;
}
.nx-site-logo img,
.wp-block-site-logo img,
.custom-logo,
.custom-logo-link img {
  display: block;
  height: auto;
  max-width: 150px;
  width: auto;
}

/* Site title — fallback brand wordmark when no custom logo is uploaded.
   The class .nx-site-title gives it the NOX-style display look. */
.nx-site-title,
.wp-block-site-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  transform: skewX(-6deg);
}
.nx-site-title a,
.wp-block-site-title a {
  color: var(--bone);
  text-decoration: none;
}
.nx-site-title a:hover,
.wp-block-site-title a:hover {
  color: var(--bone);
}
.nx-site-title a .a { color: var(--bone); }
.nx-site-title a .b { color: var(--orange); }
/* When the site has a custom logo uploaded, hide the text site title
   so we don't double up the brand mark. */
body.wp-singular.has-custom-logo .nx-site-title,
body.has-custom-logo .nx-site-title {
  display: none;
}

/* Header navigation block */
.nx-nav .wp-block-navigation {
  font-family: var(--font-body);
}
.nx-nav .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--bone-dim);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}
.nx-nav .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--orange);
}

/* Mobile overlay (replaces the old burger + .mobile-menu) */
.nx-nav .wp-block-navigation__responsive-container-open {
  background: var(--ink-2);
  border: 1px solid var(--line);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--bone);
  display: none;
}
.nx-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--ink);
  padding: 80px 28px 28px;
}
.nx-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  gap: 18px;
  font-size: 18px;
}

/* Header row: brand left, menu center, CTAs right */
.nx-nav-brand {
  flex: 0 0 auto;
}
.nx-nav-cta {
  flex: 0 0 auto;
}
.nx-nav .wp-block-navigation {
  flex: 1 1 auto;
  justify-content: center;
}

/* SCF buttons render as bare <a class="nx-btn nx-btn-orange reg-link"> etc.
   Base .nx-btn / .nx-btn-orange / .nx-btn-ghost rules above already give the
   pill background + hover. Below: trailing arrow on .reg-link via ::after. */
.reg-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.reg-link::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat;
  flex: 0 0 auto;
}

/* Footer when built from core/columns + core/group */
.nx-footer .wp-block-columns.nx-footer-grid {
  gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.nx-footer .nx-footer-tagline {
  color: var(--bone-dim);
  max-width: 340px;
}
.nx-footer .nx-banking {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.nx-footer .nx-bank-tile {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nx-footer .nx-bank-tile .name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--bone);
  margin: 0;
}
.nx-footer .nx-footer-bottom {
  padding-top: 22px;
  font-size: 12px;
  color: var(--mute);
}
.nx-footer .nx-footer-copy {
  margin: 0;
}
.nx-footer .nx-badge {
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--bone-dim);
  margin: 0;
}

/* Show the burger and stack header on mobile */
@media (max-width: 768px) {
  .nx-nav .wp-block-navigation__responsive-container-open {
    display: inline-flex;
  }
  .nx-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
}

/* Native FAQ — core/details inside .nx-faq-list */
.nx-faq-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}
.nx-faq-list .wp-block-details {
  border: 1px solid var(--line);
  background: var(--ink-2);
  border-radius: 14px;
  padding: 0;
  margin: 0 0 12px;
  overflow: hidden;
}
.nx-faq-list .wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  color: var(--bone);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.nx-faq-list .wp-block-details > summary::-webkit-details-marker { display: none; }
.nx-faq-list .wp-block-details > summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
  transition: transform 0.18s;
  flex: 0 0 auto;
}
.nx-faq-list .wp-block-details[open] > summary::after {
  transform: rotate(180deg);
}
.nx-faq-list .wp-block-details > :not(summary) {
  padding: 0 22px 20px;
  color: var(--bone-dim);
}
@media (max-width: 768px) {
  .nx-faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Native comparison table — core/table.
   No cell-level classes are required; we highlight the second column
   (the first comparison value, conventionally the brand's own column)
   and the first column (row labels) via position selectors,
   so the user can add/remove rows and columns natively in Gutenberg. */
.wp-block-table.nx-cmp {
  margin: 0 0 16px;
}
.wp-block-table.nx-cmp table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  table-layout: fixed;
}
.wp-block-table.nx-cmp th,
.wp-block-table.nx-cmp td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
  color: var(--bone-dim);
}
.wp-block-table.nx-cmp tr > *:last-child  { border-right: none; }
.wp-block-table.nx-cmp tbody tr:last-child > * { border-bottom: none; }

.wp-block-table.nx-cmp thead th {
  background: var(--ink-2);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* First column = row labels */
.wp-block-table.nx-cmp tbody td:first-child {
  color: var(--bone);
  font-weight: 500;
}
/* Second column = highlighted comparison column (the brand's own column).
   The customizer-driven --orange variable keeps the highlight on-brand. */
.wp-block-table.nx-cmp thead th:nth-child(2) {
  background: color-mix(in srgb, var(--orange) 18%, var(--ink-2));
  color: var(--bone);
}
.wp-block-table.nx-cmp tbody td:nth-child(2) {
  background: color-mix(in srgb, var(--orange) 8%, transparent);
  color: var(--bone);
  font-weight: 700;
}

.wp-block-table.nx-cmp figcaption,
.wp-block-table.nx-cmp .wp-element-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  margin-top: 12px;
  letter-spacing: 0.06em;
  text-align: left;
}

@media (max-width: 768px) {
  .wp-block-table.nx-cmp { overflow-x: auto; }
  .wp-block-table.nx-cmp table { min-width: 640px; }
}

/* Steps lists — core/list nested in core/group */
.num-steps {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 0 0 18px;
}
.num-steps .num-steps-title {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  font-size: 18px;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
  color: var(--bone);
}
.num-steps.lime .num-steps-title  { color: var(--lime); }
.num-steps.orange .num-steps-title { color: var(--orange); }
.num-steps .num-steps-list {
  margin: 0;
  padding-inline-start: 24px;
}
.num-steps .num-steps-list li {
  margin-bottom: 8px;
  color: var(--bone-dim);
  line-height: 1.5;
}
.num-steps.lime .num-steps-list li::marker  { color: var(--lime);   font-weight: 700; }
.num-steps.orange .num-steps-list li::marker { color: var(--orange); font-weight: 700; }

/* Hero area uses core/columns now */
.nx-hero {
  position: relative;
  padding: 64px 0 48px;
  overflow: hidden;
}
.nx-hero .va-hero {
  align-items: center;
}

/* Download panel rebuilt from core/buttons + core/columns */
.nx-dl-panel {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
/* Default icon paths — overridden inline by the customizer when the user
   uploads custom icons in Appearance → Customize → App icons. */
:root {
  --icon-android: url("../img/icon-android.svg");
  --icon-apple:   url("../img/icon-apple.svg");
  --icon-arrow:   url("../img/icon-download.svg");
}

/* (Gutenberg-era .nx-dl-buttons overrides removed — SCF theme renders the
   etalon markup .nx-btn-dl > .ic + .lbl + .arrow directly, so the original
   styles at the top of this file apply unmodified.) */

/* Stats columns inside dl-panel */
.nx-dl-panel .nx-dl-stats {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px;
  gap: 0;
}
.nx-dl-panel .nx-dl-stats .wp-block-column {
  padding: 14px 12px;
  border-right: 1px solid var(--line);
  flex-basis: 33.33% !important;
}
.nx-dl-panel .nx-dl-stats .wp-block-column:last-child {
  border-right: none;
}
.nx-dl-panel .nx-dl-stats .lab {
  font-size: 13px;
  color: var(--bone-dim);
  margin: 0;
}
.nx-dl-panel .nx-dl-stats .val {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--bone);
  margin: 4px 0 0;
}

/* Rating star line under the final-CTA copy */
.nx-rating-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.nx-rating-line::first-letter {
  /* The star characters at the start get gold; first text char becomes the gold cluster.
     For accuracy use ::first-line or split via spans, but ::first-letter handles a single ★. */
  color: var(--gold);
}

/* Final CTA wrapper */
.nx-final {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--ink-2), var(--ink));
  padding: 64px 56px;
}
.nx-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 100% 50%,
    rgba(242, 101, 34, 0.18),
    transparent 60%
  );
  pointer-events: none;
}
.nx-final-grid {
  position: relative;
}
.nx-final-h {
  font-size: clamp(40px, 4.4vw, 64px);
  margin-bottom: 20px;
}

/* Mobile adjustments for the new block-based hero/CTA */
@media (max-width: 768px) {
  .nx-hero .va-hero,
  .nx-final-grid {
    flex-direction: column !important;
  }
  .nx-hero .wp-block-column,
  .nx-final-grid .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }
  .nx-final {
    padding: 40px 24px;
  }
  .nx-final-h {
    font-size: clamp(28px, 8vw, 44px);
  }
  #registration {
    padding-top: 30px;
  }
  #faq {
    padding-bottom: 20px;
  }
  .hide-on-mobile {
    display: none !important;
  }
}


/* ==========================================================
   SCF template layer — structural classes used by the
   PHP templates in template-parts/. All visual styling
   (typography, colours, buttons) inherits from above.
   ========================================================== */

.nx-main {
  display: block;
}

/* Hero ------------------------------------------------------ */
.nx-hero {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.nx-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.nx-hero-text { min-width: 0; }
.nx-hero-side { display: flex; justify-content: center; min-width: 0; }
.nx-hero-cta { margin-top: 30px; }

/* Final CTA ------------------------------------------------- */
.nx-cta-section { padding: 80px 0; border-bottom: none; }
.nx-final-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.nx-final-text { min-width: 0; }
.nx-final-side { display: flex; justify-content: center; min-width: 0; }

/* Footer apps row ------------------------------------------ */
.nx-footer-apps {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* the_content() body — apply theme typography to whatever the
   editor outputs (paragraphs, lists, tables, headings, images). */
.entry-content {
  font-size: 16px;
  line-height: 1.65;
  color: var(--bone-dim);
}
.entry-content > * + * { margin-top: 1em; }
.entry-content h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(28px, 3vw, 44px); margin: 1.6em 0 0.4em; color: var(--bone); }
.entry-content h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; margin: 1.4em 0 0.4em; color: var(--bone); letter-spacing: 0.005em; }
.entry-content h4 { font-family: var(--font-display); text-transform: uppercase; font-size: 18px; font-style: italic; margin: 1.2em 0 0.4em; color: var(--bone); }
.entry-content p { margin: 0 0 1em; }
.entry-content a { color: var(--orange); text-decoration: underline; }

/* Lists inside the_content():
   UL → 2-column perks-grid card with orange ✓ on each item
   OL → numbered-steps card with dashed dividers between items */
.entry-content ul {
  list-style: none;
  padding: 0;
  margin: 1.6em 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.entry-content ul > li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  color: var(--bone);
  line-height: 1.5;
  margin: 0;
}
.entry-content ul > li::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat,
    var(--orange);
}
@media (max-width: 640px) {
  .entry-content ul {
    grid-template-columns: 1fr;
  }
}

.entry-content ol {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 28px 24px 56px;
  margin: 1.6em 0;
  list-style-position: outside;
}
.entry-content ol > li {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--bone);
  font-size: 14px;
  line-height: 1.55;
}
.entry-content ol > li:first-child { padding-top: 0; }
.entry-content ol > li:last-child  { padding-bottom: 0; border-bottom: none; }
.entry-content ol > li::marker {
  color: var(--orange);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Table inside the_content() — mirrors the etalon .nx-cmp comparison table.
   Second column is auto-highlighted as the brand's own column.
   Selectors include .wp-block-table wrapper that Gutenberg adds, plus !important
   on key colours to defeat WP core block defaults. */
.entry-content table,
.entry-content .wp-block-table,
.entry-content .wp-block-table table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  margin: 1.6em 0;
}
.entry-content table,
.entry-content .wp-block-table table {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  table-layout: fixed;
  background: var(--ink-2);
}
/* Scroll wrappers for the comparison table.
   .wp-block-table is added by Gutenberg automatically;
   .nx-table-scroll is added at runtime by theme.js for classic-editor tables. */
.entry-content .wp-block-table,
.entry-content .nx-table-scroll {
  background: transparent;
  padding: 0;
  margin: 1.6em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
}

.entry-content table th,
.entry-content table td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top: none;
  border-left: none;
  font-size: 14px;
  text-align: start;
  vertical-align: middle;
  color: var(--bone-dim);
  background: var(--ink-2);
}
.entry-content table tr > *:last-child  { border-right: none; }
.entry-content table tbody tr:last-child > * { border-bottom: none; }

.entry-content table thead th {
  background: var(--ink-3) !important;
  color: var(--bone) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.entry-content table tbody td:first-child {
  color: var(--bone);
  font-weight: 600;
}

/* Highlighted comparison column = column 2 (the brand's own column). */
.entry-content table thead th:nth-child(2) {
  background: var(--orange) !important;
  color: #fff !important;
  font-family: var(--font-mono);
  font-weight: 700;
}
.entry-content table tbody td:nth-child(2) {
  background: color-mix(in srgb, var(--orange) 14%, var(--ink-2)) !important;
  color: var(--bone);
  font-weight: 700;
}

/* On mobile the table itself stays a real <table>; the parent .wp-block-table /
   .nx-table-scroll handles horizontal scroll — but we only force min-width
   for tables with 3+ columns. 1- or 2-column tables wrap naturally. */
@media (max-width: 768px) {
  .entry-content table:has(tr > :nth-child(3)) {
    min-width: 640px;
  }
  .entry-content .wp-block-table table,
  .entry-content .nx-table-scroll table { margin: 0; }

  /* Smaller stats numbers on the download panel */
  .nx-dl-panel .nx-dl-stats .val { font-size: 17px; }
  .nx-dl-panel .nx-dl-stats .lab { font-size: 11px; }
  .nx-dl-panel .nx-dl-stats > div { padding: 10px 8px; }
}

/* Mobile collapse for SCF layouts */
@media (max-width: 980px) {
  .nx-hero-grid,
  .nx-final-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .nx-hero { padding: 32px 0; }
  .nx-cta-section { padding: 30px 0 40px; }
}

/* SCF .nx-btn-dl is rendered as <a> not <button>, so reset link decoration. */
.nx-btn-dl,
.nx-btn-dl:hover,
.nx-btn-dl:focus {
  text-decoration: none;
}
.nx-btn-dl .ic > svg,
.nx-btn-dl .arrow > svg {
  width: 22px;
  height: 22px;
  display: block;
}
.nx-btn-dl .arrow > svg {
  width: 18px;
  height: 18px;
}
/* Stats — color the leading star (or any first character) with the gold accent.
   Editors can write "★ 4.92" in the value field and the star comes out gold. */
.nx-dl-panel .nx-dl-stats .val::first-letter {
  color: var(--gold);
}

/* Auto-orange italic <em> inside any NOX heading or post body heading.
   Editors highlight a word with the inline Italic toolbar — theme paints it. */
.nx-h1 em,
.nx-h2 em,
.nx-final-h em,
.entry-content h1 em,
.entry-content h2 em,
.entry-content h3 em,
.entry-content h4 em {
  color: var(--orange);
  font-style: italic;
  font-weight: inherit;
}

/* FAQ answer paragraph spacing reset (wpautop outputs <p>) */
.nx-faq-a > :first-child { margin-top: 0; }
.nx-faq-a > :last-child  { margin-bottom: 0; }
.nx-faq-a p { margin: 0 0 8px; }
.nx-faq-item.open .nx-faq-a {
  max-height: 600px;
}