@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* ==========================================================================
   NOXEN THEME OVERRIDE — retheme every dark page to match the new homepage.
   Loaded after each page's inline <style>, so it wins by cascade order.
   The pages are token-based, so overriding the tokens re-skins everything.
   ========================================================================== */

:root {
  --bg: #121014 !important;
  --surface: #1B181F !important;
  --surface2: #232029 !important;
  --white: #F6F4EF !important;
  --grey: #9C99A6 !important;
  --grey-light: #C4C2CB !important;
  --dark: #121014 !important;
  /* accent: gold -> coral */
  --gold: #FF5C3C !important;
  --gold-dim: rgba(255,92,60,0.14) !important;
  --gold-border: rgba(255,92,60,0.32) !important;
  /* new palette available to overrides below */
  --coral: #FF5C3C; --teal: #16C79A; --blue: #4C86F9; --amber: #F5B23E; --violet: #8B7CF6;
  --hair: rgba(255,255,255,0.09); --hair2: rgba(255,255,255,0.18);
}

/* ---- Typography: chunky display font on headings, drop the serif ---- */
h1, h2, h3,
.article-title, .card-title, .hero-logo, .cover-title, .tool-name, .path-title,
.closing-title, .hub-header h1, .subscribe-banner h2, .verticals-header h2,
.issues-header h2, .what-left h2, .sb-eyebrow + h2, .result-big, .stat-number,
.quiz-title, .cert-path {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: -0.02em !important;
}
body { background: #121014 !important; }

/* ---- Nav: dark base + coral pill CTA (matches new homepage) ---- */
nav, .site-nav { background: rgba(18,16,20,0.92) !important; border-bottom: 1px solid var(--hair) !important; }
.nav-logo span, .site-nav-logo span { color: var(--coral) !important; }
.nav-subscribe, .site-nav-subscribe {
  background: var(--coral) !important; color: #fff !important; border: none !important;
  border-radius: 999px !important; padding: 9px 18px !important; font-weight: 700 !important;
}
.nav-subscribe:hover, .site-nav-subscribe:hover { color: #fff !important; filter: brightness(1.06); background: var(--coral) !important; }
.nav-account { background: var(--coral) !important; border-color: var(--coral) !important; border-radius: 999px !important; color: #fff !important; }
.nav-account:hover { color: #fff !important; }
.nav-login-mobile { background: var(--coral) !important; color: #fff !important; border-color: var(--coral) !important; border-radius: 999px !important; }

/* ---- Selection + focus ---- */
::selection { background: rgba(255,92,60,0.38); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* ---- Energetic gradient eyebrows / labels ---- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .label, .article-eyebrow, .card-label, .th-eyebrow, .hero-eyebrow, .quiz-eyebrow,
  .verticals-header .label, .issues-header .label, .what-left .label, .intel-header, .sb-eyebrow {
    background: linear-gradient(90deg, #FF5C3C, #16C79A);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ---- Rounder, bolder cards + buttons ---- */
.card, .section-card, .issue-card, .tool-card, .result-box, .principle-block, .stat-callout, .takeaway-box {
  border-radius: 16px !important;
}
.hero-read-btn, .nxh-btn-primary, .sb-form button, .signup-form button, form button[type="submit"], .tool-tab.active {
  border-radius: 12px !important; border: none !important;
}
.hero-read-btn, .nxh-btn-primary, .sb-form button, .signup-form button, form button[type="submit"] {
  background: var(--coral) !important; color: #fff !important;
  transition: transform .18s ease, filter .18s ease !important;
}
.hero-read-btn:hover, .nxh-btn-primary:hover, .sb-form button:hover, .signup-form button:hover, form button[type="submit"]:hover {
  transform: translateY(-3px) !important; filter: brightness(1.06); color: #fff !important;
}

/* ---- Card hover: lift + colour accent ---- */
.card, .section-card, .issue-card { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease !important; }
.card:hover, .section-card:hover, .issue-card:hover {
  transform: translateY(-6px) !important; border-color: var(--gold-border) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,0.5), 0 6px 24px rgba(22,199,154,0.10) !important;
}
.issue-card { overflow: hidden; }
.issue-card .issue-card-img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.issue-card:hover .issue-card-img { transform: scale(1.06); }

/* ---- Colour-block the guide-hub cards (rotating accents) ---- */
.section-card { position: relative; }
.section-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.section-card:hover::after { transform: scaleX(1); }
.section-card:nth-child(4n+1)::after { background: var(--coral); }
.section-card:nth-child(4n+2)::after { background: var(--teal); }
.section-card:nth-child(4n+3)::after { background: var(--blue); }
.section-card:nth-child(4n+4)::after { background: var(--amber); }
.section-card:nth-child(4n+1) .card-icon { color: var(--coral); }
.section-card:nth-child(4n+2) .card-icon { color: var(--teal); }
.section-card:nth-child(4n+3) .card-icon { color: var(--blue); }
.section-card:nth-child(4n+4) .card-icon { color: var(--amber); }

/* ---- Colour on big numbers ---- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat-num, .what-stat .stat-num, .result-big, .stat-callout .stat-number, .quiz-score-num {
    background: linear-gradient(120deg, #FF5C3C, #16C79A);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}

/* ---- Dividers ---- */
.divider { background: linear-gradient(90deg, #FF5C3C, #16C79A) !important; height: 3px !important; border-radius: 3px; }

/* ---- Ambient glow behind hub headers ---- */
.hub-header { position: relative; }
.hub-header::before {
  content: ''; position: absolute; z-index: 0; top: -60px; left: -8%; width: 440px; height: 320px;
  background: radial-gradient(circle, rgba(22,199,154,0.14), rgba(255,92,60,0.08) 42%, transparent 72%);
  pointer-events: none; filter: blur(6px);
}
.hub-header > * { position: relative; z-index: 1; }

/* ---- Scroll-reveal for guide-hub cards ---- */
.nx-reveal { opacity: 0; transform: translateY(24px); }
.nx-reveal.nx-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .nx-reveal, .nx-reveal.nx-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card:hover, .section-card:hover, .issue-card:hover { transform: none !important; }
  .issue-card:hover .issue-card-img { transform: none !important; }
}