/* ════════════════════════════════════════════════════════════
   Scholar Naija — student-guide.css
   Nigerian Student Knowledge Gate
   Aesthetic: Bold Editorial · Warm Ink · Newspaper Reimagined
   Fonts: Fraunces (serif display) + Epilogue (body) + JetBrains Mono
   ════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  /* Palette — warm ink editorial */
  --ink:          #0E0F13;
  --ink-2:        #1A1C22;
  --ink-3:        #252830;
  --cream:        #F7F3EC;
  --cream-2:      #EDE9E0;
  --cream-3:      #E2DDD3;

  --green:        #007A3D;   /* Nigerian green — authentic */
  --green-light:  #00A550;
  --green-bg:     rgba(0, 122, 61, 0.08);
  --green-border: rgba(0, 122, 61, 0.2);

  --gold:         #C8860A;
  --gold-bg:      rgba(200, 134, 10, 0.08);
  --gold-border:  rgba(200, 134, 10, 0.2);

  --blue:         #1D5FAD;
  --blue-bg:      rgba(29, 95, 173, 0.08);

  --orange:       #D4500A;
  --orange-bg:    rgba(212, 80, 10, 0.08);
  --orange-border:rgba(212, 80, 10, 0.2);

  --purple:       #6B35A8;
  --purple-bg:    rgba(107, 53, 168, 0.08);
  --purple-border:rgba(107, 53, 168, 0.2);

  --red:          #C0392B;

  --text:         #1A1C22;
  --text-2:       #3D404A;
  --text-3:       #6B7080;
  --text-4:       #9EA3B0;

  --border:       rgba(14,15,19,0.1);
  --border-md:    rgba(14,15,19,0.16);

  /* Typography */
  --serif:  'Fraunces', Georgia, 'Times New Roman', serif;
  --body:   'Epilogue', system-ui, sans-serif;
  --mono:   'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --r:      10px;
  --r-sm:   6px;
  --r-lg:   18px;
  --max-w:  1320px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(14,15,19,0.08);
  --shadow:     0 4px 20px rgba(14,15,19,0.1);
  --shadow-lg:  0 10px 40px rgba(14,15,19,0.12);

  /* Durations */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.25s;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

a { color: var(--green); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--gold); }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb { background: var(--green); border-radius: 3px; }
::selection { background: var(--green); color: var(--cream); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }


/* ════════════════════════════════════════════════════════════
   PROGRESS BAR
════════════════════════════════════════════════════════════ */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--gold));
  z-index: 9999;
  transition: width 0.08s linear;
  box-shadow: 0 0 12px rgba(0,122,61,0.4);
}


/* ════════════════════════════════════════════════════════════
   SITE HEADER
════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.site-header--solid {
  background: rgba(247, 243, 236, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border-md), var(--shadow-sm);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
  height: 68px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo */
.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--text);
}
.header-logo:hover { color: var(--text); }

.logo-mark { font-size: 1.2rem; }
.logo-text {
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-2);
}
.logo-text b { color: var(--green); font-weight: 800; }

/* Desktop nav */
.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.header-nav::-webkit-scrollbar { display: none; }

.hn-link {
  color: var(--text-3);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.hn-link:hover { color: var(--green); background: var(--green-bg); }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.header-home-btn {
  background: var(--ink);
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 50px;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.header-home-btn:hover {
  background: var(--green);
  color: var(--cream);
  transform: translateY(-1px);
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: var(--cream-2);
  border: 1px solid var(--border-md);
  border-radius: var(--r-sm);
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--text-2);
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
}

/* Mobile nav panel */
.mobile-nav {
  background: var(--cream);
  border-top: 2px solid var(--ink);
  display: none;
  flex-direction: column;
  padding: 16px;
  gap: 4px;
  box-shadow: var(--shadow-lg);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.mobile-nav.mobile-nav--open {
  display: flex;
  max-height: 500px;
}

.mn-link {
  display: block;
  color: var(--text-2);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border-left: 3px solid transparent;
  transition: all var(--dur) var(--ease);
}
.mn-link:hover {
  color: var(--green);
  background: var(--green-bg);
  border-left-color: var(--green);
}


/* ════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */
.hero {
  background: var(--ink);
  padding: clamp(100px, 14vw, 140px) clamp(16px, 5vw, 80px) clamp(60px, 8vw, 100px);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Decorative */
.hero-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.deco-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(247,243,236,0.04);
}
.deco-circle-1 { width: 600px; height: 600px; top: -200px; right: -150px; border-width: 1px; }
.deco-circle-2 { width: 900px; height: 900px; top: -300px; right: -300px; border-width: 1px; opacity: 0.5; }

.deco-stripe {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 6px;
  background: linear-gradient(to bottom, var(--green) 0%, var(--gold) 60%, transparent 100%);
  opacity: 0.8;
}

.deco-dots {
  position: absolute;
  bottom: 40px; right: 80px;
  width: 200px; height: 200px;
  background-image: radial-gradient(circle, rgba(247,243,236,0.1) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.6;
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

/* Eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0,165,80,0.35);
  background: rgba(0,122,61,0.12);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 32px;
  animation: heroFadeUp 0.8s var(--ease) both;
}
.eyebrow-flag { font-size: 1.1rem; }
.eyebrow-text {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--green-light);
  letter-spacing: 0.04em;
}

/* Main headline */
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 9vw, 8.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--cream);
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hl-line { display: block; overflow: hidden; }
.hl-line-1 { animation: heroFadeUp 0.75s var(--ease) 0.05s both; }
.hl-line-2 { animation: heroFadeUp 0.75s var(--ease) 0.12s both; }
.hl-line-3 { animation: heroFadeUp 0.75s var(--ease) 0.19s both; }
.hl-line-4 {
  color: var(--green-light);
  font-style: italic;
  animation: heroFadeUp 0.75s var(--ease) 0.26s both;
}
.hero-headline em { font-style: italic; color: var(--green-light); }

/* Sub section */
.hero-sub-wrap {
  max-width: 640px;
  animation: heroFadeUp 0.75s var(--ease) 0.3s both;
}

.hero-subhead {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: rgba(247,243,236,0.6);
  line-height: 1.75;
  margin-bottom: 28px;
  font-weight: 300;
}

/* CTA buttons */
.hero-cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.cta-primary {
  background: var(--green);
  color: var(--cream);
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 50px;
  transition: all var(--dur) var(--ease);
  box-shadow: 0 4px 20px rgba(0,122,61,0.4);
  display: inline-block;
}
.cta-primary:hover {
  background: var(--green-light);
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,122,61,0.5);
}

.cta-secondary {
  background: transparent;
  color: rgba(247,243,236,0.7);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 50px;
  border: 1.5px solid rgba(247,243,236,0.18);
  transition: all var(--dur) var(--ease);
  display: inline-block;
}
.cta-secondary:hover {
  color: var(--cream);
  border-color: rgba(247,243,236,0.4);
  background: rgba(247,243,236,0.05);
  transform: translateY(-1px);
}

/* Meta bar */
.hero-meta-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(247,243,236,0.08);
  margin-bottom: 40px;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(247,243,236,0.45);
  letter-spacing: 0.03em;
}
.meta-icon { font-size: 0.85rem; }
.meta-divider { width: 1px; height: 14px; background: rgba(247,243,236,0.15); flex-shrink: 0; }

/* TOC */
.hero-toc { animation: heroFadeUp 0.75s var(--ease) 0.38s both; }

.toc-heading {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  color: rgba(247,243,236,0.3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.toc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(247,243,236,0.04);
  border: 1px solid rgba(247,243,236,0.07);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  transition: all var(--dur) var(--ease);
  color: rgba(247,243,236,0.55);
}
.toc-item:hover {
  background: rgba(0,122,61,0.2);
  border-color: rgba(0,122,61,0.35);
  color: var(--green-light);
  transform: translateY(-1px);
}

.toc-num {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--green-light);
  opacity: 0.7;
  flex-shrink: 0;
}
.toc-label { font-size: 0.82rem; font-weight: 600; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════════════════════════
   AD ZONES
════════════════════════════════════════════════════════════ */
.ad-strip { position: relative; text-align: center; }

.ad-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  display: block;
  margin-bottom: 4px;
}

.ad-leaderboard {
  background: var(--cream-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
}

.ad-inline {
  background: var(--cream-2);
  border: 1px dashed var(--border-md);
  border-radius: var(--r);
  padding: 10px;
  margin: 36px 0;
}

.ad-sidebar {
  background: var(--cream-2);
  border: 1px dashed var(--border-md);
  border-radius: var(--r);
  padding: 10px;
}


/* ════════════════════════════════════════════════════════════
   PAGE WRAPPER + LAYOUT
════════════════════════════════════════════════════════════ */
.page-wrapper {
  background: var(--cream);
  padding: 0 clamp(16px, 4vw, 48px);
}

.page-layout {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
  padding: 56px 0 80px;
}


/* ════════════════════════════════════════════════════════════
   ARTICLE COLUMN
════════════════════════════════════════════════════════════ */
.article-col { min-width: 0; }


/* ════════════════════════════════════════════════════════════
   CHAPTERS
════════════════════════════════════════════════════════════ */
.chapter {
  padding: 60px 0;
  border-bottom: 2px solid var(--ink);
  position: relative;
}
.chapter:first-child { padding-top: 0; }
.chapter:last-of-type { border-bottom: none; }

/* Chapter accent line */
.chapter::before {
  content: '';
  position: absolute;
  top: 0; left: -24px;
  width: 3px;
  height: 80px;
  background: linear-gradient(to bottom, var(--green), transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.chapter.is-visible::before { opacity: 1; }

/* Chapter Header */
.chapter-header { margin-bottom: 36px; }

.ch-number-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ch-number {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  background: var(--ink);
  color: var(--cream);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}

.ch-category {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chapter-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.chapter-intro {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--text-2);
  line-height: 1.7;
  border-left: 4px solid var(--green);
  padding-left: 18px;
  font-weight: 400;
}

/* Chapter body */
.chapter-body h3 {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
  color: var(--ink);
  margin-top: 40px;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
}
.chapter-body h3:first-child { margin-top: 0; }

.chapter-body p {
  font-size: clamp(0.95rem, 1.3vw, 1.02rem);
  color: var(--text-2);
  line-height: 1.88;
  margin-bottom: 18px;
  font-weight: 300;
}
.chapter-body p strong { color: var(--ink); font-weight: 700; }

/* Pull quote */
.chapter-quote {
  background: var(--ink);
  border-radius: var(--r);
  padding: 28px 32px;
  margin: 36px 0;
  position: relative;
  overflow: hidden;
}
.chapter-quote::before {
  content: '"';
  position: absolute;
  top: -12px; left: 16px;
  font-family: var(--serif);
  font-size: 6rem;
  color: rgba(247,243,236,0.06);
  line-height: 1;
  pointer-events: none;
}
.chapter-quote p {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-style: italic;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Chapter Affiliate Block */
.chapter-affiliate {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cream-2);
  border: 1.5px solid var(--border-md);
  border-left: 5px solid var(--green);
  border-radius: var(--r);
  padding: 20px;
  margin: 32px 0;
  flex-wrap: wrap;
  transition: all var(--dur) var(--ease);
}
.chapter-affiliate:hover { box-shadow: var(--shadow); border-color: var(--border-md); }

.chapter-affiliate--green  { border-left-color: var(--green); }
.chapter-affiliate--gold   { border-left-color: var(--gold); background: var(--gold-bg); }
.chapter-affiliate--orange { border-left-color: var(--orange); background: var(--orange-bg); }
.chapter-affiliate--purple { border-left-color: var(--purple); background: var(--purple-bg); }

.aff-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  padding: 3px 9px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.aff-badge--green  { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.aff-badge--gold   { color: var(--gold); background: var(--gold-bg); border-color: var(--gold-border); }
.aff-badge--orange { color: var(--orange); background: var(--orange-bg); border-color: var(--orange-border); }
.aff-badge--purple { color: var(--purple); background: var(--purple-bg); border-color: var(--purple-border); }

.aff-body {
  flex: 1;
  min-width: 180px;
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.5;
}
.aff-body strong { color: var(--ink); }

.aff-link {
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 50px;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.aff-link:hover { background: var(--green); color: var(--cream); transform: translateY(-1px); }


/* ════════════════════════════════════════════════════════════
   FEATURE GRID (Info Cards)
════════════════════════════════════════════════════════════ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin: 32px 0;
}

.fg-card {
  background: var(--cream-2);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r);
  padding: 20px;
  transition: all var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}

/* Top accent line per color */
.fg-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.fg-green::after  { background: var(--green); }
.fg-gold::after   { background: var(--gold); }
.fg-blue::after   { background: var(--blue); }
.fg-ink::after    { background: var(--ink); }

.fg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fg-green:hover  { border-color: var(--green-border); }
.fg-gold:hover   { border-color: var(--gold-border); }
.fg-blue:hover   { border-color: rgba(29,95,173,0.25); }
.fg-ink:hover    { border-color: rgba(14,15,19,0.25); }

.fg-icon  { font-size: 1.5rem; margin-bottom: 10px; display: block; }
.fg-card h4 { font-family: var(--body); font-size: 0.9rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.fg-card p  { font-size: 0.82rem; color: var(--text-3); line-height: 1.55; margin: 0; }


/* ════════════════════════════════════════════════════════════
   STAT ROW
════════════════════════════════════════════════════════════ */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 28px 0;
}

.stat-box {
  border-radius: var(--r);
  padding: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all var(--dur) var(--ease);
}
.stat-box:hover { transform: translateY(-2px); }

.stat-box--green  { background: var(--green); color: var(--cream); }
.stat-box--gold   { background: var(--gold); color: var(--cream); }
.stat-box--ink    { background: var(--ink); color: var(--cream); }
.stat-box--red    { background: var(--red); color: var(--cream); }

.sb-num   { font-family: var(--serif); font-size: 1.5rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.sb-label { font-size: 0.72rem; font-weight: 600; opacity: 0.82; line-height: 1.3; text-align: center; }


/* ════════════════════════════════════════════════════════════
   NEWSLETTER
════════════════════════════════════════════════════════════ */
.newsletter-section {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 56px);
  margin: 60px 0 40px;
  position: relative;
  overflow: hidden;
}

.newsletter-section::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(247,243,236,0.04);
  pointer-events: none;
}

.nl-inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.nl-left { flex: 1; min-width: 240px; }

.nl-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--green-light);
  margin-bottom: 14px;
}

.nl-title {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 900;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.nl-desc {
  font-size: 0.88rem;
  color: rgba(247,243,236,0.5);
  line-height: 1.65;
  font-weight: 300;
  margin: 0;
}

.nl-right { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }

.nl-form { display: flex; flex-direction: column; gap: 10px; }

.nl-input {
  background: rgba(247,243,236,0.06);
  border: 1.5px solid rgba(247,243,236,0.12);
  border-radius: var(--r-sm);
  padding: 13px 18px;
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--cream);
  outline: none;
  transition: all var(--dur) var(--ease);
}
.nl-input::placeholder { color: rgba(247,243,236,0.3); }
.nl-input:focus {
  border-color: var(--green);
  background: rgba(0,122,61,0.1);
  box-shadow: 0 0 0 3px rgba(0,122,61,0.15);
}

.nl-btn {
  background: var(--green);
  color: var(--cream);
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 800;
  padding: 13px 24px;
  border-radius: var(--r-sm);
  transition: all var(--dur) var(--ease);
  text-align: center;
}
.nl-btn:hover { background: var(--green-light); transform: translateY(-1px); }

.nl-note { font-size: 0.72rem; color: rgba(247,243,236,0.3); margin: 0; }


/* ════════════════════════════════════════════════════════════
   PAGE BOTTOM NAV
════════════════════════════════════════════════════════════ */
.page-nav-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 2px solid var(--ink);
}

.pnf-btn {
  font-size: 0.88rem;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 50px;
  transition: all var(--dur) var(--ease);
  display: inline-block;
}
.pnf-back {
  background: transparent;
  color: var(--text-2);
  border: 1.5px solid var(--border-md);
}
.pnf-back:hover { border-color: var(--green-border); color: var(--green); }

.pnf-next {
  background: var(--ink);
  color: var(--cream);
}
.pnf-next:hover { background: var(--green); color: var(--cream); transform: translateY(-1px); }


/* ════════════════════════════════════════════════════════════
   SIDEBAR COLUMN
════════════════════════════════════════════════════════════ */
.sidebar-col {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Sticky TOC */
.sticky-toc {
  background: var(--ink);
  border-radius: var(--r);
  padding: 20px;
}

.stoc-title {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(247,243,236,0.3);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.stoc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  color: rgba(247,243,236,0.45);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: all var(--dur) var(--ease);
  margin-bottom: 2px;
}
.stoc-link:hover { color: rgba(247,243,236,0.85); background: rgba(247,243,236,0.04); }
.stoc-link--active {
  color: var(--green-light);
  background: rgba(0,122,61,0.15);
  border-left-color: var(--green);
}

/* Sidebar Affiliates */
.sidebar-aff {
  background: var(--cream-2);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r);
  padding: 20px;
  transition: all var(--dur) var(--ease);
}
.sidebar-aff:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.sidebar-aff--gold   { border-top: 3px solid var(--gold); }
.sidebar-aff--purple { border-top: 3px solid var(--purple); }

.saff-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.saff-tag--gold   { color: var(--gold); }
.saff-tag--purple { color: var(--purple); }

.saff-title {
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
}

.saff-desc {
  font-size: 0.8rem;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 14px;
}

.saff-btn {
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 9px 18px;
  border-radius: 50px;
  transition: all var(--dur) var(--ease);
}
.saff-btn:hover { background: var(--green); color: var(--cream); transform: translateY(-1px); }
.saff-btn--gold   { background: var(--gold); color: var(--cream); }
.saff-btn--gold:hover   { background: #a06e08; color: var(--cream); }
.saff-btn--purple { background: var(--purple); color: var(--cream); }
.saff-btn--purple:hover { background: #581b8a; color: var(--cream); }


/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--ink);
  color: var(--cream);
}

.footer-ad-bar {
  background: var(--ink-2);
  border-bottom: 1px solid rgba(247,243,236,0.06);
  padding: 8px 24px;
  text-align: center;
}
.footer-ad-bar .ad-label { color: rgba(247,243,236,0.25); }

.footer-body {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px clamp(16px,4vw,48px) 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-logo { color: var(--cream); }
.footer-logo .logo-text { color: rgba(247,243,236,0.6); }
.footer-logo .logo-text b { color: var(--green-light); }

.footer-brand-desc {
  font-size: 0.85rem;
  color: rgba(247,243,236,0.4);
  line-height: 1.65;
  margin-top: 12px;
  margin-bottom: 20px;
}

.footer-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-socials a {
  font-size: 1.2rem;
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.footer-socials a:hover { transform: translateY(-2px) scale(1.1); }

.footer-links-col .fl-title {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247,243,236,0.3);
  margin-bottom: 14px;
}
.footer-links-col a {
  display: block;
  font-size: 0.85rem;
  color: rgba(247,243,236,0.5);
  padding: 4px 0;
  transition: all var(--dur) var(--ease);
  font-weight: 500;
}
.footer-links-col a:hover { color: var(--green-light); padding-left: 4px; }

.footer-bottom-bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 20px clamp(16px,4vw,48px);
  border-top: 1px solid rgba(247,243,236,0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-copyright {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: rgba(247,243,236,0.25);
}

.footer-affiliate-note {
  font-size: 0.72rem;
  color: rgba(247,243,236,0.2);
}
.footer-affiliate-note a { color: rgba(247,243,236,0.35); }
.footer-affiliate-note a:hover { color: rgba(247,243,236,0.6); }


/* ════════════════════════════════════════════════════════════
   BACK TO TOP
════════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 46px; height: 46px;
  background: var(--ink);
  border: 1.5px solid rgba(247,243,236,0.12);
  border-radius: 50%;
  color: rgba(247,243,236,0.7);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}
.back-to-top--show { opacity: 1; pointer-events: all; transform: translateY(0); }
.back-to-top:hover { background: var(--green); border-color: var(--green); color: var(--cream); transform: translateY(-2px); }


/* ════════════════════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.fg-card.reveal { transition-delay: calc(var(--i, 0) * 0.07s); }
.stat-box.reveal { transition-delay: calc(var(--i, 0) * 0.06s); }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET
════════════════════════════════════════════════════════════ */
@media (max-width: 1060px) {
  .page-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sidebar-col {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 40px;
    border-top: 2px solid var(--ink);
    padding-top: 40px;
  }

  .sticky-toc { display: none; }
  .footer-body { grid-template-columns: 1fr 1fr; gap: 30px; }
  .header-nav { display: none; }
  .burger { display: flex; }
  .header-home-btn { display: none; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .hero { padding: 90px 16px 56px; min-height: auto; }
  .hero-headline { font-size: clamp(2.8rem, 13vw, 5rem); }
  .deco-dots, .deco-circle-2 { display: none; }

  .hero-cta-group { flex-direction: column; }
  .cta-primary, .cta-secondary { text-align: center; }

  .hero-meta-bar { gap: 10px; }
  .meta-divider { display: none; }

  .toc-grid { grid-template-columns: 1fr 1fr; }

  .chapter { padding: 40px 0; }
  .chapter-title { font-size: clamp(1.5rem, 7vw, 2rem); }

  .feature-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }

  .chapter-affiliate { flex-direction: column; align-items: flex-start; gap: 12px; }
  .aff-link { width: 100%; text-align: center; justify-content: center; }

  .nl-inner { flex-direction: column; gap: 24px; }

  .page-nav-footer { flex-direction: column; }
  .pnf-btn { text-align: center; width: 100%; }

  .sidebar-col { grid-template-columns: 1fr; }

  .footer-body { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom-bar { flex-direction: column; text-align: center; }

  .back-to-top { bottom: 16px; right: 16px; }
}

/* ── Print ── */
@media print {
  .site-header, .progress-bar, .back-to-top,
  .ad-strip, .chapter-affiliate, .sidebar-aff,
  .newsletter-section, .mobile-nav { display: none !important; }

  body { background: #fff; color: #000; }
  .hero { background: #fff; color: #000; min-height: auto; padding: 20px 0; }
  .hero-headline { color: #000; font-size: 2rem; }
  .chapter-quote { background: #f5f5f5; }
  .chapter-quote p { color: #000; }
  .footer-body { display: none; }
}