/* ============================================
   SHONDA MARTIN — CREDIT ACADEMY
   Brand-faithful site stylesheet
   Colors: brand palette
   Typography: Oswald (display) + Inter (body)
   ============================================ */

:root {
  /* Brand colors */
  --green: #5EC806;
  --yellow: #FFBB00;
  --blue: #00A5E2;
  --orange: #FF5C00;
  --pink: #F10085;
  --navy: #00106F;
  --purple: #350263;

  /* Functional */
  --bg: #FAFAFA;
  --bg-deep: #1A0033;
  --ink: #0a0a0a;
  --ink-muted: #4a4a4a;
  --ink-soft: #6a6a6a;
  --border: #e5e5e5;
  --border-light: #f0f0f0;

  /* Typography */
  --font-display: 'Oswald', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: color 0.15s; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ HEADER ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 250, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 20px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.logo-gauge {
  width: 38px;
  height: 24px;
  flex-shrink: 0;
}

.logo-gauge line, .logo-gauge circle {
  stroke: var(--ink);
  fill: var(--ink);
}

.logo-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.primary-nav {
  display: flex;
  gap: 28px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.primary-nav a {
  position: relative;
  padding: 4px 0;
  color: var(--ink-muted);
}

.primary-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--purple);
  transition: width 0.25s;
}

.primary-nav a:hover {
  color: var(--purple);
}

.primary-nav a:hover::after {
  width: 100%;
}

@media (max-width: 700px) {
  .primary-nav {
    gap: 18px;
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .primary-nav {
    display: none;
  }
}

/* ============ HERO ============ */

.hero {
  position: relative;
  padding: 100px 0 120px;
  overflow: hidden;
  background: linear-gradient(180deg, #FAFAFA 0%, #F4EDFF 100%);
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(241, 0, 133, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(0, 165, 226, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255, 187, 0, 0.08) 0%, transparent 40%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(53, 2, 99, 0.08);
  color: var(--purple);
  padding: 8px 16px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 32px;
}

.hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(94, 200, 6, 0.2);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 24px;
}

.hero-title-accent {
  background: linear-gradient(110deg, var(--purple) 0%, var(--pink) 60%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--ink-muted);
  max-width: 680px;
  margin-bottom: 40px;
  line-height: 1.5;
}

.hero-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============ BUTTONS ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
}

.btn-primary {
  background: var(--purple);
  color: #fff;
}

.btn-primary:hover {
  background: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(53, 2, 99, 0.25);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: #fff;
}

.btn-large {
  padding: 18px 36px;
  font-size: 15px;
}

/* ============ SECTIONS ============ */

.section {
  padding: 100px 0;
}

@media (max-width: 700px) {
  .section { padding: 70px 0; }
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pink);
  margin-bottom: 16px;
}

.eyebrow-light { color: var(--yellow); }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 32px;
  max-width: 960px;
}

.section-title-light { color: #fff; }

.lead {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 720px;
  margin-bottom: 24px;
}

.lead-light { color: rgba(255, 255, 255, 0.85); }

/* ============ ABOUT SECTION ============ */

.about-section {
  background: #fff;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.two-col {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: start;
}

@media (max-width: 880px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.about-section p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin-bottom: 18px;
}

.credentials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.cred-item {
  text-align: left;
}

.cred-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  color: var(--purple);
  margin-bottom: 6px;
}

.cred-label {
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  line-height: 1.3;
}

.col-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-card {
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  color: #fff;
  padding: 44px 36px 36px;
  border-radius: 16px;
  position: relative;
  box-shadow: 0 20px 50px rgba(53, 2, 99, 0.25);
  max-width: 380px;
}

.quote-mark {
  position: absolute;
  top: -10px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 100px;
  line-height: 1;
  color: var(--yellow);
  opacity: 0.85;
}

.quote-card blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 20px;
  padding-top: 8px;
  position: relative;
  z-index: 1;
}

.quote-attribution {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--yellow);
  font-weight: 600;
}

/* ============ PLAYBOOK SECTION ============ */

.playbook-section {
  background: var(--bg-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.playbook-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(241, 0, 133, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(0, 165, 226, 0.10) 0%, transparent 35%);
  pointer-events: none;
}

.playbook-section .container {
  position: relative;
  z-index: 1;
}

.playbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 60px 0 50px;
}

.pb-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 28px 24px;
  transition: all 0.2s;
}

.pb-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.20);
  transform: translateY(-2px);
}

.pb-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 16px;
}

.pb-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  color: #fff;
}

.pb-card p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.70);
}

.playbook-cta {
  text-align: center;
  margin-top: 50px;
}

.playbook-cta .btn-primary {
  background: var(--yellow);
  color: var(--navy);
}

.playbook-cta .btn-primary:hover {
  background: #fff;
  color: var(--purple);
  box-shadow: 0 6px 20px rgba(255, 187, 0, 0.4);
}

.cta-note {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============ COMMUNITY SECTION ============ */

.community-section {
  background: #fff;
}

.cousin-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 50px;
}

@media (max-width: 700px) {
  .cousin-tiers { grid-template-columns: 1fr; }
}

.tier-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 32px;
  position: relative;
  transition: all 0.2s;
}

.tier-card:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(53, 2, 99, 0.10);
}

.tier-card-feature {
  background: linear-gradient(135deg, #fff 0%, #FFF8E0 100%);
  border-color: var(--yellow);
}

.tier-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.tier-free {
  background: var(--green);
  color: #fff;
}

.tier-vip {
  background: var(--yellow);
  color: var(--navy);
}

.tier-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.tier-card p {
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ============ CONTACT SECTION ============ */

.contact-section {
  background: var(--purple);
  position: relative;
  overflow: hidden;
}

.contact-section::after {
  content: '';
  position: absolute;
  right: -100px;
  top: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(241, 0, 133, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.contact-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 780px;
}

.contact-section .lead {
  margin: 0 auto 36px;
}

.contact-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.contact-link {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
  padding: 12px 22px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.2s;
}

.contact-link:hover {
  background: var(--yellow);
  color: var(--navy);
  border-color: var(--yellow);
}

/* ============ FOOTER ============ */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 32px 0;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  font-size: 13px;
}

.footer-gauge {
  width: 32px;
  height: 20px;
}

.footer-gauge line, .footer-gauge circle {
  stroke: #fff;
  fill: #fff;
}

.footer-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 600px) {
  .footer-row {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   v2 ADDITIONS: Two-Path, Videos, Writing Sections
   ============================================ */

/* ============ JOIN / TWO-PATH SECTION ============ */

.join-section {
  background: var(--bg-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.join-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(241, 0, 133, 0.14) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(255, 187, 0, 0.10) 0%, transparent 40%);
  pointer-events: none;
}

.join-section .container {
  position: relative;
  z-index: 1;
}

.path-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 22px;
  margin: 50px 0 30px;
  align-items: stretch;
}

@media (max-width: 880px) {
  .path-grid { grid-template-columns: 1fr; gap: 18px; }
}

.path-card {
  border-radius: 16px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s;
}

.path-card:hover {
  transform: translateY(-2px);
}

.path-free {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}

.path-vip {
  background: linear-gradient(180deg, #FFFAE0 0%, #FFF8D0 100%);
  border: 2px solid var(--yellow);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(255, 187, 0, 0.20);
}

.path-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 24px;
  align-self: flex-start;
}

.tag-free {
  background: var(--green);
  color: #fff;
}

.tag-vip {
  background: var(--purple);
  color: var(--yellow);
}

.path-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.path-vip .path-title {
  color: var(--purple);
}

.path-sub {
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 24px;
  opacity: 0.85;
}

.path-vip .path-sub {
  color: #2a1a4a;
  opacity: 1;
  font-weight: 500;
}

.path-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex-grow: 1;
}

.path-features li {
  padding: 10px 0 10px 26px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.path-features li:last-child { border-bottom: none; }

.path-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 9px;
  width: 18px;
  height: 18px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.path-vip .path-features li {
  border-color: rgba(53, 2, 99, 0.10);
  color: var(--ink);
  font-size: 14px;
}

.path-vip .path-features li::before {
  background: var(--purple);
  color: var(--yellow);
}

.path-vip .path-features-vip li strong {
  color: var(--purple);
  font-weight: 700;
}

.btn-secondary {
  background: var(--yellow);
  color: var(--navy);
  border: none;
}

.btn-secondary:hover {
  background: #fff;
  color: var(--purple);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 187, 0, 0.4);
}

.btn-full {
  width: 100%;
  display: block;
}

.path-note {
  margin-top: 14px;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-display);
  font-weight: 500;
  opacity: 0.7;
}

.path-vip .path-note {
  color: var(--purple);
  opacity: 0.85;
}

.join-footer {
  text-align: center;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.join-footer p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ============ VIDEOS SECTION ============ */

.videos-section {
  background: #fff;
  border-top: 1px solid var(--border-light);
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 50px 0 40px;
}

.video-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
  font-style: italic;
}

.video-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}

.video-card:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(53, 2, 99, 0.10);
}

.video-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1A0033;
  position: relative;
  overflow: hidden;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 16, 111, 0.20);
  transition: background 0.2s;
}

.video-card:hover .video-play-overlay {
  background: rgba(0, 16, 111, 0.40);
}

.video-play-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.video-play-icon::after {
  content: '';
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

.video-info {
  padding: 18px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.video-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-date {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 500;
  margin-top: auto;
}

.videos-cta {
  text-align: center;
}

/* ============ READING ROOM ============ */

.reading-section {
  background: var(--purple);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.reading-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(241, 0, 133, 0.16) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(0, 165, 226, 0.10) 0%, transparent 40%);
  pointer-events: none;
}

.reading-section .container {
  position: relative;
  z-index: 1;
}

.reading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 50px;
}

.article-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 28px 26px;
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}

.article-card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--yellow);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20);
}

.article-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  background: var(--yellow);
  color: var(--navy);
  border-radius: 4px;
  margin-bottom: 18px;
}

.article-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.article-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 22px;
  flex-grow: 1;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.article-time {
  color: rgba(255, 255, 255, 0.60);
}

.article-arrow {
  color: var(--yellow);
  font-weight: 700;
}

/* ============================================
   ARTICLE / READING ROOM PAGES
   ============================================ */

.article-page {
  background: #FAFAFA;
}

.article-hero {
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  color: #fff;
  padding: 60px 0 80px;
  position: relative;
  overflow: hidden;
}

.article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(241, 0, 133, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(0, 165, 226, 0.14) 0%, transparent 40%);
  pointer-events: none;
}

.article-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--yellow);
  margin-bottom: 28px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  transition: all 0.2s;
}

.article-back:hover {
  background: var(--yellow);
  color: var(--navy);
  border-color: var(--yellow);
}

.article-hero-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 12px;
  background: var(--yellow);
  color: var(--navy);
  border-radius: 4px;
  margin-bottom: 20px;
}

.article-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 22px;
}

.article-hero-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.72);
}

.article-body {
  padding: 70px 0 90px;
}

.article-content {
  max-width: 720px;
  margin: 0 auto;
}

.article-content p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 22px;
}

.article-content p:first-of-type {
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

.article-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--purple);
  margin: 48px 0 18px;
}

.article-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
  margin: 32px 0 12px;
}

.article-content ul, .article-content ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.article-content li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 10px;
}

.article-content blockquote {
  border-left: 4px solid var(--pink);
  background: #FFF8E0;
  padding: 20px 26px;
  margin: 30px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
  font-style: normal;
  border-radius: 6px;
}

.article-content strong {
  font-weight: 600;
  color: var(--purple);
}

.article-content a {
  color: var(--pink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-content a:hover {
  color: var(--purple);
}

.article-cta-box {
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 36px 32px;
  margin: 50px 0 30px;
  text-align: center;
}

.article-cta-box h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 12px;
}

.article-cta-box p {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 22px;
}

.article-cta-box .btn {
  background: var(--yellow);
  color: var(--navy);
}

.article-cta-box .btn:hover {
  background: #fff;
  color: var(--purple);
}

.article-end {
  margin-top: 50px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

.article-end-text {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14px;
  margin-bottom: 16px;
}

.article-share {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.article-share a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-muted);
  text-decoration: none;
}

.article-share a:hover {
  border-color: var(--purple);
  color: var(--purple);
}

@media (max-width: 700px) {
  .article-content p { font-size: 17px; }
  .article-content p:first-of-type { font-size: 19px; }
  .article-content li { font-size: 16px; }
  .article-content blockquote { font-size: 19px; padding: 16px 20px; }
}

/* ============================================
   BOOTCAMP PROMO STRIP (homepage)
   ============================================ */

.bootcamp-promo {
  background: linear-gradient(135deg, var(--pink) 0%, var(--orange) 100%);
  color: #fff;
  padding: 60px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bootcamp-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 50%, rgba(255, 187, 0, 0.20) 0%, transparent 40%),
    radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.10) 0%, transparent 50%);
  pointer-events: none;
}

.bootcamp-promo-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.bootcamp-promo-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  margin-bottom: 18px;
  color: #fff;
}

.bootcamp-promo-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: #fff;
}

.bootcamp-promo-sub {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 620px;
  margin: 0 auto 28px;
}

.bootcamp-promo .btn-secondary {
  background: var(--navy);
  color: #fff;
  border: none;
}

.bootcamp-promo .btn-secondary:hover {
  background: #fff;
  color: var(--purple);
  transform: translateY(-1px);
}

/* ============================================
   BOOTCAMP PAGE
   ============================================ */

.bootcamp-page {
  background: #FAFAFA;
}

.bootcamp-hero {
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  color: #fff;
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}

.bootcamp-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(241, 0, 133, 0.20) 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(255, 187, 0, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(0, 165, 226, 0.12) 0%, transparent 40%);
}

.bootcamp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}

.bootcamp-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--yellow);
  background: rgba(255, 187, 0, 0.12);
  border: 1px solid rgba(255, 187, 0, 0.35);
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.bootcamp-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #fff;
}

.bootcamp-title-accent {
  background: linear-gradient(110deg, var(--pink) 0%, var(--orange) 50%, var(--yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.bootcamp-sub {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 36px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.bootcamp-includes {
  display: flex;
  gap: 36px;
  justify-content: center;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.includes-item {
  text-align: center;
}

.includes-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 48px);
  line-height: 1;
  color: var(--yellow);
  margin-bottom: 4px;
}

.includes-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
}

.bootcamp-gate {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 36px 32px;
  margin: 0 auto;
  max-width: 520px;
  text-align: center;
}

.gate-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}

.gate-sub {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 24px;
}

#fd-form-69fa6b6d68c469bec960ae3a {
  margin: 0 auto 18px;
}

.gate-already {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 18px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.gate-already a {
  color: var(--yellow);
  text-decoration: none;
}

.gate-already a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ============ BOOTCAMP CONTENT (after submission) ============ */

.bootcamp-content {
  padding: 70px 0 100px;
}

.content-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
}

.welcome-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 4px 12px;
  background: var(--green);
  color: #fff;
  border-radius: 4px;
  margin-bottom: 18px;
}

.content-intro-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}

.content-intro-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.week-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 30px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

.week-card:hover {
  box-shadow: 0 8px 30px rgba(53, 2, 99, 0.08);
}

.week-header {
  background: var(--purple);
  color: #fff;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.week-header::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: radial-gradient(ellipse at right, rgba(241, 0, 133, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.week-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--yellow);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.week-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.5vw, 24px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 1;
}

.week-body {
  padding: 28px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
}

@media (max-width: 880px) {
  .week-body { grid-template-columns: 1fr; gap: 24px; }
  .week-header { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 22px; }
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.week-info {
  display: flex;
  flex-direction: column;
}

.week-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 22px;
}

.key-points-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--purple);
  margin: 0 0 12px;
}

.week-points {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.week-points li {
  padding: 8px 0 8px 22px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  border-bottom: 1px solid var(--border-light);
}

.week-points li:last-child { border-bottom: none; }

.week-points li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.docs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--yellow);
  color: var(--navy);
  border-radius: 6px;
  border: none;
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
  transition: all 0.18s;
}

.docs-btn:hover {
  background: var(--purple);
  color: var(--yellow);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(53, 2, 99, 0.2);
}

.bootcamp-cta-box {
  margin-top: 50px;
  padding: 50px 40px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  border-radius: 18px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bootcamp-cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(241, 0, 133, 0.25) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 187, 0, 0.16) 0%, transparent 40%);
  pointer-events: none;
}

.bootcamp-cta-box > * { position: relative; z-index: 1; }

.bootcamp-cta-box h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 32px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: #fff;
  margin-bottom: 14px;
}

.bootcamp-cta-box p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 28px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.bootcamp-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.bootcamp-cta-box .btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #fff;
}

.bootcamp-cta-box .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.20);
}

.bootcamp-cta-box .btn-primary {
  background: var(--yellow);
  color: var(--navy);
}

.bootcamp-cta-box .btn-primary:hover {
  background: #fff;
  color: var(--purple);
}

/* ============================================
   v4 ADDITIONS: Real photos, TV graphic
   ============================================ */

/* ============ HERO WITH PHOTO ============ */

.hero-with-photo {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items: center;
  max-width: 1200px;
}

@media (max-width: 880px) {
  .hero-with-photo {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-photo-col { order: -1; max-width: 320px; margin: 0 auto; }
}

.hero-text-col {
  position: relative;
  z-index: 1;
}

.hero-photo-col {
  position: relative;
  z-index: 1;
}

.hero-photo {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(53, 2, 99, 0.18), 0 8px 30px rgba(241, 0, 133, 0.12);
  display: block;
}

/* ============ ABOUT PHOTO + QUOTE OVERLAY ============ */

.about-photo-wrap {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}

.about-photo {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  box-shadow: 0 16px 50px rgba(53, 2, 99, 0.20);
}

.quote-card-overlay {
  position: relative;
  margin-top: -60px;
  margin-left: 20px;
  margin-right: -10px;
  z-index: 2;
  max-width: none;
}

@media (max-width: 700px) {
  .quote-card-overlay {
    margin-top: -40px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============ TV GRAPHIC FOR BOOTCAMP ============ */

.tv-graphic {
  margin: 0 auto 40px;
  width: 200px;
  position: relative;
}

.tv-frame {
  position: relative;
}

.tv-screen {
  width: 200px;
  height: 130px;
  background: linear-gradient(135deg, #1a0033 0%, #350263 50%, #00106F 100%);
  border: 6px solid #1a1a1a;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 3px rgba(255, 187, 0, 0.30),
    0 0 30px rgba(241, 0, 133, 0.40),
    0 12px 40px rgba(0, 0, 0, 0.40);
}

.tv-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(241, 0, 133, 0.30) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0, 165, 226, 0.25) 0%, transparent 50%);
  pointer-events: none;
}

.tv-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: var(--yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(255, 187, 0, 0.25), 0 0 20px rgba(255, 187, 0, 0.50);
  animation: tv-pulse 2.4s ease-in-out infinite;
}

.tv-play-icon::after {
  content: '';
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent var(--navy);
  margin-left: 4px;
}

@keyframes tv-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}

.tv-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(255, 255, 255, 0.03) 3px,
    rgba(255, 255, 255, 0.03) 4px
  );
  pointer-events: none;
}

.tv-stand {
  margin: 0 auto;
  margin-top: -2px;
  width: 70px;
  height: 14px;
  background: #1a1a1a;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
}

.tv-stand::after {
  content: '';
  display: block;
  width: 100px;
  height: 4px;
  background: #1a1a1a;
  border-radius: 2px;
  margin: 14px auto 0;
  margin-top: 0;
  position: relative;
  top: 14px;
  left: -15px;
}

/* ============ REAL LOGO IN HEADER ============ */

.site-logo-img {
  height: 38px;
  width: auto;
  display: block;
}

.site-logo-icon {
  height: 52px;
  max-width: 92px;
  object-fit: contain;
}

.site-header .site-logo-img {
  /* Use black logo on light header */
}

.site-footer .site-logo-img {
  height: 32px;
}

/* Override: real logo replaces gauge SVG, no wordmark needed */
.site-header .logo-link {
  gap: 0;
}

.footer-brand {
  display: flex;
  align-items: center;
}

.footer-brand .site-logo-img {
  filter: brightness(1);
}

@media (max-width: 520px) {
  .site-logo-img {
    height: 32px;
  }

  .site-logo-icon {
    height: 42px;
  }
}

/* ============================================
   v5 ADDITIONS: Events / Tour page
   ============================================ */

.events-page {
  background: #FAFAFA;
}

.events-hero {
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  color: #fff;
  padding: 80px 0 90px;
  position: relative;
  overflow: hidden;
}

.events-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(241, 0, 133, 0.20) 0%, transparent 40%),
    radial-gradient(circle at 80% 75%, rgba(255, 187, 0, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(0, 165, 226, 0.10) 0%, transparent 50%);
}

.events-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}

.events-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--yellow);
  background: rgba(255, 187, 0, 0.12);
  border: 1px solid rgba(255, 187, 0, 0.35);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 22px;
}

.events-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(50px, 9vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: #fff;
}

.events-title-accent {
  background: linear-gradient(110deg, var(--pink) 0%, var(--orange) 60%, var(--yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.events-sub {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin: 0 auto;
}

.events-list-section {
  padding: 70px 0 90px;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 50px;
}

.event-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(53, 2, 99, 0.12);
}

.event-featured {
  border-color: var(--yellow);
  border-width: 2px;
  box-shadow: 0 8px 30px rgba(255, 187, 0, 0.15);
}

@media (max-width: 700px) {
  .event-card {
    grid-template-columns: 1fr;
  }
}

.event-date {
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  color: #fff;
  padding: 32px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.event-date::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(241, 0, 133, 0.20) 0%, transparent 70%);
  pointer-events: none;
}

.event-featured .event-date {
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
}

.event-month {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--yellow);
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.event-day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
  color: #fff;
}

.event-year {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.65);
  position: relative;
  z-index: 1;
}

.event-body {
  padding: 28px 32px;
}

.event-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
  background: var(--blue);
  color: #fff;
}

.event-badge-featured {
  background: var(--yellow);
  color: var(--navy);
}

.event-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

.event-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.event-meta-item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.event-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 22px;
}

.event-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Waitlist box */
.events-waitlist {
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  border-radius: 18px;
  padding: 48px 40px;
  margin: 50px 0;
  position: relative;
  overflow: hidden;
}

.events-waitlist::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(241, 0, 133, 0.20) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(255, 187, 0, 0.14) 0%, transparent 45%);
  pointer-events: none;
}

.waitlist-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
  color: #fff;
}

.waitlist-inner h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 32px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-bottom: 14px;
  color: #fff;
}

.waitlist-inner p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 24px;
}

.waitlist-inner .btn-primary {
  background: var(--yellow);
  color: var(--navy);
}

.waitlist-inner .btn-primary:hover {
  background: #fff;
  color: var(--purple);
}

/* Virtual fallback */
.events-virtual {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #FFF8E0;
  border: 1px solid var(--yellow);
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 30px;
}

@media (max-width: 600px) {
  .events-virtual { flex-direction: column; text-align: center; }
}

.virtual-icon {
  font-size: 40px;
  flex-shrink: 0;
  line-height: 1;
}

.virtual-text h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--purple);
  margin-bottom: 6px;
}

.virtual-text p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.virtual-text a {
  color: var(--pink);
  font-weight: 600;
  text-decoration: underline;
}

.virtual-text a:hover {
  color: var(--purple);
}

/* ============================================
   v6 ADDITIONS: Shop page + homepage shop preview
   ============================================ */

/* ============ SHOP PAGE HERO ============ */

.shop-page {
  background: #FAFAFA;
}

.shop-hero {
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  color: #fff;
  padding: 80px 0 90px;
  position: relative;
  overflow: hidden;
}

.shop-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(241, 0, 133, 0.20) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(255, 187, 0, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(94, 200, 6, 0.10) 0%, transparent 50%);
}

.shop-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}

.shop-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--yellow);
  background: rgba(255, 187, 0, 0.12);
  border: 1px solid rgba(255, 187, 0, 0.35);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 22px;
}

.shop-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(50px, 9vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: #fff;
}

.shop-title-accent {
  background: linear-gradient(110deg, var(--yellow) 0%, var(--orange) 50%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.shop-sub {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin: 0 auto;
}

/* ============ SHOP GRID ============ */

.shop-section {
  padding: 70px 0 90px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 60px;
}

@media (max-width: 920px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .shop-grid { grid-template-columns: 1fr; }
}

.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(53, 2, 99, 0.16);
  border-color: var(--purple);
}

.product-featured {
  border-color: var(--yellow);
  border-width: 2px;
  box-shadow: 0 8px 28px rgba(255, 187, 0, 0.18);
}

/* Image area uses gradient backgrounds with text label
   When real product images are added, replace the .product-image-N background
   with: background-image: url('assets/products/dispute-playbook.jpg'); */
.product-image {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.product-image-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.20);
  z-index: 1;
}

.product-image-1 {
  background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
}
.product-image-2 {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
}
.product-image-3 {
  background: linear-gradient(135deg, #5EC806 0%, #2d8c00 100%);
}
.product-image-4 {
  background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%);
}
.product-image-5 {
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
}
.product-image-6 {
  background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
}

.product-image-6 .product-image-text {
  color: var(--navy);
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.30);
}

.product-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.10) 0%, transparent 50%);
  pointer-events: none;
}

.product-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
  background: var(--ink-muted);
  color: #fff;
  align-self: flex-start;
}

.tag-bestseller { background: var(--yellow); color: var(--navy); }
.tag-popular { background: var(--pink); color: #fff; }
.tag-new { background: #5EC806; color: #fff; }
.tag-premium { background: var(--purple); color: #fff; }

.product-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}

.product-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 18px;
  flex-grow: 1;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.product-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--purple);
  letter-spacing: 0.005em;
}

.product-cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pink);
  transition: color 0.2s, transform 0.2s;
}

.product-card:hover .product-cta {
  color: var(--purple);
  transform: translateX(3px);
}

/* ============ FULL STOREFRONT CTA ============ */

.shop-full-cta {
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  color: #fff;
  padding: 50px 30px;
  border-radius: 18px;
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
}

.shop-full-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255, 187, 0, 0.20) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(241, 0, 133, 0.16) 0%, transparent 45%);
  pointer-events: none;
}

.shop-full-cta > * {
  position: relative;
  z-index: 1;
}

.shop-full-cta h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-bottom: 14px;
  color: #fff;
}

.shop-full-cta p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.shop-full-cta .btn-primary {
  background: var(--yellow);
  color: var(--navy);
}

.shop-full-cta .btn-primary:hover {
  background: #fff;
  color: var(--purple);
}

.btn-large {
  padding: 18px 40px;
  font-size: 16px;
  letter-spacing: 0.10em;
}

.shop-note {
  font-size: 13px !important;
  margin-top: 18px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ============ ALT PATHS (Free / VIP cross-sell) ============ */

.shop-alt-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 700px) {
  .shop-alt-paths { grid-template-columns: 1fr; }
}

.alt-path-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  transition: all 0.2s;
}

.alt-path-card:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(53, 2, 99, 0.10);
}

.alt-icon {
  font-size: 38px;
  margin-bottom: 14px;
  line-height: 1;
}

.alt-path-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--purple);
  margin-bottom: 12px;
}

.alt-path-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 18px;
}

.alt-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pink);
  text-decoration: none;
  transition: color 0.2s;
}

.alt-link:hover {
  color: var(--purple);
}

/* ============ HOMEPAGE SHOP PREVIEW SECTION ============ */

.shop-preview-section {
  background: #fff;
}

.shop-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 40px 0 36px;
}

@media (max-width: 800px) {
  .shop-preview-grid { grid-template-columns: 1fr; }
}

.shop-preview-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #FAFAFA;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 26px;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}

.shop-preview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--purple), var(--pink), var(--yellow));
  opacity: 0;
  transition: opacity 0.25s;
}

.shop-preview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(53, 2, 99, 0.12);
  border-color: var(--purple);
}

.shop-preview-card:hover::before {
  opacity: 1;
}

.preview-card-icon {
  font-size: 36px;
  margin-bottom: 16px;
  line-height: 1;
}

.preview-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 10px;
}

.preview-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.preview-card-cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--pink);
  transition: transform 0.2s;
  display: inline-block;
}

.shop-preview-card:hover .preview-card-cta {
  color: var(--purple);
  transform: translateX(3px);
}

.shop-preview-cta {
  text-align: center;
  margin-top: 30px;
}

.shop-preview-note {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 16px;
}

.shop-preview-note a {
  color: var(--pink);
  text-decoration: underline;
  font-weight: 500;
}

.shop-preview-note a:hover {
  color: var(--purple);
}

/* ============================================
   v7 ADDITIONS: Shop restructure (compliant)
   - Row headers separating Free / Paid / Live sections
   - Free product styling
   - Wide webinar card with orbital animation
   - Compliance disclaimer block
   ============================================ */

/* Section header (intro to each shop row) */
.shop-row-header {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 640px;
}

.shop-row-header-paid {
  margin-top: 70px;
}

.row-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--purple);
  background: rgba(53, 2, 99, 0.06);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.row-eyebrow-free {
  color: #2d8c00;
  background: rgba(94, 200, 6, 0.10);
}

.row-eyebrow-live {
  color: var(--pink);
  background: rgba(241, 0, 133, 0.08);
}

.row-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 12px;
}

.row-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

/* Free product styling */
.product-free {
  border-color: #5EC806;
  border-width: 2px;
}

.product-free:hover {
  box-shadow: 0 12px 36px rgba(94, 200, 6, 0.20);
  border-color: #5EC806;
}

.product-price-free {
  color: #2d8c00 !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tag-free {
  background: #5EC806 !important;
  color: #fff !important;
}

/* Wide webinar card (full row) */
.product-card-wide {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  margin-bottom: 50px;
}

@media (max-width: 760px) {
  .product-card-wide {
    grid-template-columns: 1fr;
  }
  .product-image-wide {
    aspect-ratio: 16 / 9;
  }
}

.product-image-wide {
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 50%, var(--navy) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

.product-image-wide .product-image-text {
  font-size: 28px;
  z-index: 2;
  position: relative;
}

/* Orbital decoration on webinar card */
.webinar-orbits {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.orbit {
  position: absolute;
  border: 1.5px solid rgba(255, 187, 0, 0.30);
  border-radius: 50%;
  animation: orbit-pulse 4s ease-in-out infinite;
}

.orbit-1 {
  width: 100px;
  height: 100px;
  animation-delay: 0s;
}

.orbit-2 {
  width: 180px;
  height: 180px;
  animation-delay: 1.3s;
  border-color: rgba(241, 0, 133, 0.30);
}

.orbit-3 {
  width: 260px;
  height: 260px;
  animation-delay: 2.6s;
  border-color: rgba(0, 165, 226, 0.30);
}

@keyframes orbit-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

/* Free grid header gets a touch more breathing room */
.shop-grid-free {
  margin-bottom: 30px;
}

/* Compliance disclaimer */
.shop-disclaimer {
  margin-top: 50px;
  padding: 24px 28px;
  background: #FAFAFA;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}

.shop-disclaimer p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
  max-width: 700px;
  margin: 0 auto;
}

/* ============================================
   v8 ADDITIONS:
   - 5-item primary nav + secondary nav
   - Big "FREE WORKSHOP" Bootcamp showcase
   - Static YouTube video cards with thumbnails
   ============================================ */

/* ============ NAV STACK ============ */

.nav-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.secondary-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.secondary-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.2s;
}

.secondary-nav a:hover,
.secondary-nav a.active {
  color: var(--pink);
}

.nav-divider {
  color: var(--border);
  font-size: 10px;
}

@media (max-width: 720px) {
  .nav-stack {
    align-items: stretch;
    gap: 2px;
  }
  .primary-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .secondary-nav {
    justify-content: flex-end;
  }
}

/* ============ WATCH SECTION (replaces bootcamp-promo + videos) ============ */

.watch-section {
  background: #fff;
  padding: 80px 0;
}

/* ---- BOOTCAMP HERO BLOCK ---- */

.watch-bootcamp-hero {
  position: relative;
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 60%, #000 100%);
  border-radius: 24px;
  padding: 60px 50px;
  margin-bottom: 90px;
  overflow: hidden;
  color: #fff;
}

.bootcamp-hero-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(241, 0, 133, 0.40) 0%, transparent 50%),
    radial-gradient(circle at 80% 75%, rgba(255, 187, 0, 0.30) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 165, 226, 0.18) 0%, transparent 60%);
  animation: glow-pulse 8s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.bootcamp-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 880px) {
  .watch-bootcamp-hero {
    padding: 50px 30px;
  }
  .bootcamp-hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .bootcamp-hero-visual {
    order: -1;
  }
}

/* Big FREE badge */
.free-badge-large {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 10px 20px;
  border-radius: 100px;
  margin-bottom: 24px;
  box-shadow: 0 0 0 4px rgba(255, 187, 0, 0.20), 0 0 30px rgba(255, 187, 0, 0.30);
  animation: free-badge-pulse 2s ease-in-out infinite;
}

.free-badge-dot {
  width: 8px;
  height: 8px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(241, 0, 133, 0.80);
  animation: dot-pulse 1.5s ease-in-out infinite;
}

@keyframes free-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 187, 0, 0.20), 0 0 30px rgba(255, 187, 0, 0.30); }
  50% { box-shadow: 0 0 0 6px rgba(255, 187, 0, 0.30), 0 0 40px rgba(255, 187, 0, 0.50); }
}

@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.bootcamp-hero-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 88px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: #fff;
  margin-bottom: 20px;
}

.bootcamp-hero-headline-accent {
  background: linear-gradient(110deg, var(--yellow) 0%, var(--pink) 60%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.bootcamp-hero-desc {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 28px;
  max-width: 540px;
}

.bootcamp-hero-meta {
  display: flex;
  gap: 28px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.bootcamp-hero-meta-item {
  display: flex;
  flex-direction: column;
}

.meta-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: var(--yellow);
  margin-bottom: 4px;
}

.meta-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
}

.bootcamp-hero-cta {
  background: var(--yellow);
  color: var(--navy);
  border: none;
  font-weight: 700;
}

.bootcamp-hero-cta:hover {
  background: #fff;
  color: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 187, 0, 0.40);
}

/* ---- LARGE TV GRAPHIC (right side) ---- */

.bootcamp-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tv-graphic-large {
  position: relative;
  width: 320px;
  z-index: 2;
}

.tv-frame-large {
  position: relative;
}

.tv-screen-large {
  width: 320px;
  height: 200px;
  background: linear-gradient(135deg, #1a0033 0%, #350263 50%, #00106F 100%);
  border: 8px solid #1a1a1a;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 4px rgba(255, 187, 0, 0.40),
    0 0 50px rgba(241, 0, 133, 0.50),
    0 16px 60px rgba(0, 0, 0, 0.50);
}

.tv-screen-large::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(241, 0, 133, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(0, 165, 226, 0.30) 0%, transparent 55%);
  pointer-events: none;
}

.tv-play-icon-large {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: var(--yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 10px rgba(255, 187, 0, 0.25), 0 0 40px rgba(255, 187, 0, 0.60);
  animation: tv-pulse-large 2.4s ease-in-out infinite;
  z-index: 2;
}

.tv-play-icon-large::after {
  content: '';
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--navy);
  margin-left: 6px;
}

@keyframes tv-pulse-large {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.10); }
}

.tv-scanlines-large {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 4px,
    rgba(255, 255, 255, 0.04) 4px,
    rgba(255, 255, 255, 0.04) 5px
  );
  pointer-events: none;
}

.tv-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--yellow);
}

.tv-corner-tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.tv-corner-tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.tv-corner-bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.tv-corner-br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.tv-stand-large {
  margin: 0 auto;
  margin-top: -2px;
  width: 100px;
  height: 22px;
  background: #1a1a1a;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
}

.tv-stand-large::after {
  content: '';
  display: block;
  width: 160px;
  height: 6px;
  background: #1a1a1a;
  border-radius: 3px;
  margin: 0 auto;
  position: relative;
  top: 22px;
  left: -30px;
}

/* Orbital rings around the TV */
.tv-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed rgba(255, 187, 0, 0.30);
  pointer-events: none;
  z-index: 1;
}

.tv-orbit-1 {
  width: 380px;
  height: 380px;
  animation: tv-orbit-rotate 20s linear infinite;
}

.tv-orbit-2 {
  width: 460px;
  height: 460px;
  border-color: rgba(241, 0, 133, 0.20);
  animation: tv-orbit-rotate 30s linear infinite reverse;
}

@keyframes tv-orbit-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 600px) {
  .tv-graphic-large { width: 240px; }
  .tv-screen-large { width: 240px; height: 150px; }
  .tv-play-icon-large { width: 60px; height: 60px; }
  .tv-orbit-1, .tv-orbit-2 { display: none; }
}

/* ---- VIDEOS ROW ---- */

.watch-row-header {
  text-align: left;
  margin-bottom: 50px;
}

.watch-row-header .eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--purple);
  background: rgba(53, 2, 99, 0.06);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.watch-row-header .section-title {
  margin-bottom: 14px;
}

.watch-row-header .lead {
  margin: 0;
  max-width: 540px;
}

.videos-grid-static {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 36px;
}

@media (max-width: 1000px) {
  .videos-grid-static { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .videos-grid-static { grid-template-columns: 1fr; }
}

.video-card-static {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all 0.25s;
}

.video-card-static:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(53, 2, 99, 0.16);
  border-color: var(--purple);
}

.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy);
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.video-card-static:hover .video-thumb img {
  transform: scale(1.06);
}

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.20);
  transition: background 0.25s;
}

.video-card-static:hover .video-play-overlay {
  background: rgba(0, 0, 0, 0.40);
}

.video-play-button {
  width: 60px;
  height: 60px;
  background: rgba(255, 187, 0, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px rgba(255, 187, 0, 0.20), 0 4px 20px rgba(0, 0, 0, 0.30);
  transition: transform 0.25s;
}

.video-card-static:hover .video-play-button {
  transform: scale(1.10);
}

.video-play-button::after {
  content: '';
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--navy);
  margin-left: 5px;
}

.video-live-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(241, 0, 133, 0.40);
}

.video-card-body {
  padding: 16px 18px 18px;
}

.video-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 6px;
}

.video-card-channel {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0;
}

.videos-cta {
  text-align: center;
  margin-top: 30px;
}

/* ============================================
   v9 ADDITIONS: Gradient on "Latest" word + magazine-feel video cards
   ============================================ */

/* Inline gradient on a single word inside a section title */
.section-title-gradient {
  background: linear-gradient(110deg, var(--purple) 0%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Video card title overrides — accommodate longer SEO titles, more magazine-feel */
.video-card-static .video-card-title {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  /* Allow up to 3 lines, then truncate */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.9em;
}

.video-card-static .video-card-channel {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
  margin: 0;
}

.video-card-body {
  padding: 18px 20px 20px;
}

/* ============================================
   v10 ADDITIONS:
   - /learn page hero & section structure
   - Free field guide cards with PDF preview
   - Redesigned writing sections (light bg + accent borders)
   - Jump pills (anchor-link CTAs)
   - Learn-specific cross-sell box
   ============================================ */

/* ============ LEARN PAGE ============ */

.learn-page {
  background: #FAFAFA;
}

.learn-hero {
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  color: #fff;
  padding: 90px 0 80px;
  position: relative;
  overflow: hidden;
}

.learn-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 28%, rgba(241, 0, 133, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 78% 72%, rgba(255, 187, 0, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(94, 200, 6, 0.10) 0%, transparent 50%);
}

.learn-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
}

.learn-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--yellow);
  background: rgba(255, 187, 0, 0.12);
  border: 1px solid rgba(255, 187, 0, 0.35);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 22px;
}

.learn-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: #fff;
}

.learn-title-accent {
  background: linear-gradient(110deg, var(--yellow) 0%, var(--orange) 50%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.learn-sub {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 620px;
  margin: 0 auto 32px;
}

.learn-jump-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.learn-jump-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  padding: 10px 18px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.2s;
}

.learn-jump-pill:hover {
  background: var(--yellow);
  color: var(--navy);
  border-color: var(--yellow);
  transform: translateY(-2px);
}

/* Learn page sections */
.learn-section {
  padding: 70px 0;
}

.learn-section-header {
  text-align: center;
  margin: 0 auto 50px;
  max-width: 640px;
}

.learn-section-header .eyebrow {
  display: inline-flex;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--purple);
  background: rgba(53, 2, 99, 0.06);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.learn-section-header .section-title {
  margin-bottom: 14px;
}

.learn-bootcamp { padding: 70px 0; background: #fff; }
.learn-guides { padding: 70px 0; background: #FAFAFA; }
.learn-blog { padding: 70px 0; background: #fff; }
.learn-videos { padding: 70px 0; background: #FAFAFA; }
.learn-cta { padding: 70px 0 90px; background: #fff; }

/* ============ FREE FIELD GUIDE CARDS ============ */

.guides-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .guides-grid { grid-template-columns: 1fr; }
}

.guide-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: #fff;
  border: 2px solid #5EC806;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s;
  box-shadow: 0 4px 18px rgba(94, 200, 6, 0.08);
}

@media (max-width: 540px) {
  .guide-card { grid-template-columns: 1fr; }
}

.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(94, 200, 6, 0.18);
}

.guide-card-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 180px;
  overflow: hidden;
}

.guide-image-1 {
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
}

.guide-image-2 {
  background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%);
}

.guide-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.10) 0%, transparent 50%);
  pointer-events: none;
}

.guide-pdf-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0, 0, 0, 0.30);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 5px 10px;
  border-radius: 4px;
  backdrop-filter: blur(6px);
  z-index: 2;
}

.guide-card-image-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.30);
  z-index: 1;
  position: relative;
}

.guide-card-body {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
}

.guide-card-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: #5EC806;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.guide-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}

.guide-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 16px;
  flex-grow: 1;
}

.guide-card-cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #2d8c00;
  align-self: flex-start;
  transition: transform 0.2s;
}

.guide-card:hover .guide-card-cta {
  transform: translateX(3px);
}

/* ============ BLOG GRID (on /learn page) ============ */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 920px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
}

.blog-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px 28px;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--purple);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(53, 2, 99, 0.14);
}

.blog-accent-pink { border-top-color: var(--pink); }
.blog-accent-orange { border-top-color: var(--orange); }
.blog-accent-green { border-top-color: #5EC806; }
.blog-accent-blue { border-top-color: var(--blue); }
.blog-accent-purple { border-top-color: var(--purple); }
.blog-accent-yellow { border-top-color: var(--yellow); }

.blog-card-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--purple);
  background: rgba(53, 2, 99, 0.06);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.blog-accent-pink .blog-card-tag { color: var(--pink); background: rgba(241, 0, 133, 0.08); }
.blog-accent-orange .blog-card-tag { color: var(--orange); background: rgba(255, 92, 0, 0.08); }
.blog-accent-green .blog-card-tag { color: #2d8c00; background: rgba(94, 200, 6, 0.08); }

.blog-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}

.blog-card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 22px;
  flex-grow: 1;
}

.blog-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.blog-time {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
}

.blog-arrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pink);
  transition: transform 0.2s;
}

.blog-card:hover .blog-arrow {
  transform: translateX(3px);
}

/* ============ READING ROOM ON HOMEPAGE — LIGHT VERSION ============ */

.reading-section-light {
  background: #FAFAFA;
  padding: 80px 0;
}

.reading-grid-light {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

@media (max-width: 920px) {
  .reading-grid-light { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .reading-grid-light { grid-template-columns: 1fr; }
}

.article-card-light {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px 28px;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--purple);
}

.article-card-light:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(53, 2, 99, 0.14);
}

.article-card-light .article-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--purple);
  background: rgba(53, 2, 99, 0.06);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.article-card-light.blog-accent-pink .article-tag {
  color: var(--pink);
  background: rgba(241, 0, 133, 0.08);
}

.article-card-light.blog-accent-orange .article-tag {
  color: var(--orange);
  background: rgba(255, 92, 0, 0.08);
}

.article-card-light.blog-accent-green .article-tag {
  color: #2d8c00;
  background: rgba(94, 200, 6, 0.08);
}

.article-card-light .article-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}

.article-card-light .article-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 22px;
  flex-grow: 1;
}

.article-card-light .article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.article-card-light .article-time {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
}

.article-card-light .article-arrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pink);
  transition: transform 0.2s;
}

.article-card-light:hover .article-arrow {
  transform: translateX(3px);
}

.reading-cta {
  text-align: center;
  margin-top: 40px;
}

/* ============ LEARN PAGE CTA CARD ============ */

.learn-cta-card {
  position: relative;
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  border-radius: 24px;
  padding: 70px 50px;
  overflow: hidden;
  text-align: center;
}

.learn-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(241, 0, 133, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(255, 187, 0, 0.18) 0%, transparent 45%);
}

.learn-cta-content {
  position: relative;
  z-index: 1;
  max-width: 580px;
  margin: 0 auto;
}

.learn-cta-content .btn-primary {
  background: var(--yellow);
  color: var(--navy);
}

.learn-cta-content .btn-primary:hover {
  background: #fff;
  color: var(--purple);
}

@media (max-width: 600px) {
  .learn-cta-card {
    padding: 50px 30px;
  }
}

/* ============================================
   v11 ADDITIONS:
   - Upgraded Resources section on /learn page
   - Rich guide cards with TOC preview
   ============================================ */

/* Resources eyebrow */
.eyebrow-resources {
  background: rgba(94, 200, 6, 0.12) !important;
  color: #2d8c00 !important;
}

/* Rich guide cards grid */
.guides-grid-rich {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
}

@media (max-width: 880px) {
  .guides-grid-rich { grid-template-columns: 1fr; max-width: 600px; }
}

.guide-rich-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid #5EC806;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(94, 200, 6, 0.10);
  transition: all 0.25s;
}

.guide-rich-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(94, 200, 6, 0.18);
}

/* Hero image area */
.guide-rich-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 28px;
  min-height: 240px;
  overflow: hidden;
}

.guide-rich-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 75% 80%, rgba(0, 0, 0, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.guide-rich-meta-overlay {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.guide-rich-format,
.guide-rich-pages {
  background: rgba(0, 0, 0, 0.30);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 5px 10px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}

.guide-rich-image-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.0;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.30);
  z-index: 1;
  position: relative;
}

.guide-image-year {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 500;
  color: var(--yellow);
  letter-spacing: 0.18em;
}

/* Body */
.guide-rich-body {
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.guide-rich-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: #5EC806;
  color: #fff;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}

.guide-rich-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.10;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

.guide-rich-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 20px;
}

/* Table of contents preview */
.guide-rich-toc {
  background: #FAFAFA;
  border-left: 3px solid #5EC806;
  padding: 16px 18px;
  border-radius: 4px;
  margin-bottom: 22px;
}

.guide-toc-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2d8c00;
  margin-bottom: 10px;
}

.guide-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-toc-list li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 18px;
  position: relative;
  margin-bottom: 6px;
}

.guide-toc-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #5EC806;
  font-weight: 700;
}

.guide-toc-list li:last-child {
  margin-bottom: 0;
}

/* Rich CTA */
.guide-rich-cta {
  background: #5EC806 !important;
  color: #fff !important;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  font-weight: 700;
}

.guide-rich-cta:hover {
  background: #2d8c00 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(94, 200, 6, 0.30);
}

.cta-icon {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* Note below the grid */
.guide-rich-note {
  text-align: center;
  margin-top: 36px;
  font-size: 14px;
  font-style: italic;
  color: var(--ink-muted);
}

/* ============================================
   v12 ADDITIONS:
   - Bootcamp banner widget (used in 2 places on shop and learn)
   - 2-column free grid layout
   - Learn page category section variants
   - Section CTA below grids
   ============================================ */

/* ============ BOOTCAMP BANNER WIDGET ============ */

.bootcamp-banner-widget {
  display: block;
  position: relative;
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 70%, #000 100%);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 32px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: all 0.25s;
  box-shadow: 0 8px 28px rgba(53, 2, 99, 0.18);
}

.bootcamp-banner-widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(53, 2, 99, 0.30);
}

.banner-widget-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(241, 0, 133, 0.30) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(255, 187, 0, 0.22) 0%, transparent 45%);
}

.banner-widget-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}

@media (max-width: 700px) {
  .banner-widget-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
  }
  .banner-widget-icon { margin: 0 auto; }
}

.banner-widget-icon {
  flex-shrink: 0;
}

.mini-tv {
  width: 90px;
  height: 70px;
  background: linear-gradient(135deg, #0a0033 0%, #350263 100%);
  border: 4px solid #0a0a0a;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(255, 187, 0, 0.30),
    0 0 20px rgba(241, 0, 133, 0.40);
}

.mini-tv::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(255, 255, 255, 0.04) 2px,
      rgba(255, 255, 255, 0.04) 3px
    );
  pointer-events: none;
}

.mini-tv-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-tv-play {
  width: 32px;
  height: 32px;
  background: var(--yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(255, 187, 0, 0.25), 0 0 14px rgba(255, 187, 0, 0.50);
  animation: mini-tv-pulse 2.4s ease-in-out infinite;
}

.mini-tv-play::after {
  content: '';
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--navy);
  margin-left: 3px;
}

@keyframes mini-tv-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.banner-widget-text {
  min-width: 0;
}

.banner-widget-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 10px;
  box-shadow: 0 0 0 3px rgba(255, 187, 0, 0.15);
}

.banner-widget-tag-dot {
  width: 6px;
  height: 6px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(241, 0, 133, 0.80);
  animation: dot-pulse 1.5s ease-in-out infinite;
}

.banner-widget-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.10;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: #fff;
  margin-bottom: 6px;
}

.banner-widget-desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.80);
  margin: 0;
  max-width: 480px;
}

.banner-widget-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 22px;
  border-radius: 100px;
  white-space: nowrap;
  transition: transform 0.2s;
}

.bootcamp-banner-widget:hover .banner-widget-cta {
  transform: translateX(4px);
  background: #fff;
  color: var(--purple);
}

.banner-widget-cta-arrow {
  font-size: 18px;
  font-weight: 700;
}

/* ============ 2-COLUMN FREE GRID (without bootcamp card) ============ */

.shop-grid-2col {
  grid-template-columns: repeat(2, 1fr) !important;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .shop-grid-2col {
    grid-template-columns: 1fr !important;
  }
}

/* ============ LEARN CATEGORY SECTION VARIANTS ============ */

.learn-category-free { background: #FAFAFA; padding: 70px 0; }
.learn-category-paid { background: #fff; padding: 70px 0; }
.learn-category-live { background: #FAFAFA; padding: 70px 0; }

/* Section CTA below grids (e.g. "Browse the full shop") */
.learn-section-cta {
  text-align: center;
  margin-top: 36px;
}

.eyebrow-live {
  background: rgba(241, 0, 133, 0.08) !important;
  color: var(--pink) !important;
}

/* ============================================
   v13 ADDITIONS:
   - /blog page (Ali Abdaal style)
   - FAQ accordion on /resources
   ============================================ */

/* ============ BLOG PAGE ============ */

.blog-page {
  background: #fff;
}

.blog-hero-section {
  padding: 80px 0 50px;
  background: #fff;
  text-align: left;
}

.blog-hero-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pink);
  background: rgba(241, 0, 133, 0.06);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 22px;
}

.blog-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7.5vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 22px;
  text-transform: none;
}

.blog-hero-title-accent {
  background: linear-gradient(110deg, var(--purple) 0%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.blog-hero-sub {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 680px;
  margin: 0;
}

/* Filter pills */
.blog-filter-section {
  padding: 20px 0 40px;
  background: #fff;
}

.blog-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-filter-pill {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
  background: #FAFAFA;
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-display);
}

.blog-filter-pill:hover {
  background: rgba(241, 0, 133, 0.08);
  border-color: var(--pink);
  color: var(--pink);
}

.blog-filter-pill.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Featured post */
.blog-featured-section {
  padding: 30px 0 60px;
  background: #fff;
}

.blog-featured-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
  box-shadow: 0 6px 24px rgba(53, 2, 99, 0.06);
}

.blog-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(53, 2, 99, 0.16);
}

@media (max-width: 880px) {
  .blog-featured-card { grid-template-columns: 1fr; }
}

.blog-featured-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  overflow: hidden;
}

.blog-featured-grad-1 {
  background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 60%, var(--orange) 100%);
}

.blog-featured-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.blog-featured-image-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 30px;
}

.blog-featured-image-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.30);
  margin-bottom: 8px;
}

.blog-featured-image-year {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--yellow);
  letter-spacing: 0.20em;
}

.blog-featured-body {
  padding: 50px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 700px) {
  .blog-featured-body { padding: 36px 30px; }
  .blog-featured-image { min-height: 240px; }
  .blog-featured-image-text { font-size: 36px; }
}

.blog-featured-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.blog-featured-cat {
  background: var(--pink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 4px;
}

.blog-featured-dot {
  color: var(--border);
  font-size: 12px;
}

.blog-featured-date,
.blog-featured-time {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
}

.blog-featured-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1.10;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 20px;
}

.blog-featured-excerpt {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 28px;
}

.blog-featured-cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--pink);
  transition: transform 0.2s;
}

.blog-featured-card:hover .blog-featured-cta {
  transform: translateX(4px);
}

/* Posts grid */
.blog-grid-section {
  padding: 60px 0 80px;
  background: #FAFAFA;
}

.blog-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 36px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 36px;
}

.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 920px) {
  .blog-posts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .blog-posts-grid { grid-template-columns: 1fr; }
}

.blog-post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s;
}

a.blog-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(53, 2, 99, 0.14);
}

.blog-post-coming {
  cursor: default;
  opacity: 0.85;
}

.blog-post-image {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.blog-post-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.10) 0%, transparent 50%);
  pointer-events: none;
}

.blog-post-image-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
  z-index: 1;
  position: relative;
}

.blog-grad-1 { background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%); }
.blog-grad-2 { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); }
.blog-grad-3 { background: linear-gradient(135deg, #5EC806 0%, #2d8c00 100%); }
.blog-grad-4 { background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%); }
.blog-grad-5 { background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%); }
.blog-grad-6 { background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%); }

.blog-grad-5 .blog-post-image-text { color: var(--navy); text-shadow: 0 2px 12px rgba(255, 255, 255, 0.30); }

.blog-post-coming-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--yellow);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  border-radius: 4px;
  z-index: 2;
  backdrop-filter: blur(6px);
}

.blog-post-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.blog-post-cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 4px;
  color: #fff;
  background: var(--ink-muted);
}

.blog-post-cat-credit { background: var(--purple); }
.blog-post-cat-money { background: var(--blue); }
.blog-post-cat-personal { background: var(--orange); }
.blog-post-cat-faith { background: #5EC806; }

.blog-post-time {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.blog-post-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

.blog-post-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 16px;
  flex-grow: 1;
}

.blog-post-arrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--pink);
  align-self: flex-start;
  transition: transform 0.2s;
}

.blog-post-arrow-disabled {
  color: var(--ink-muted);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

a.blog-post-card:hover .blog-post-arrow {
  transform: translateX(3px);
}

.blog-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-muted);
  font-size: 16px;
  font-style: italic;
}

/* Newsletter CTA */
.blog-newsletter-section {
  padding: 60px 0 90px;
  background: #FAFAFA;
}

.blog-newsletter-card {
  position: relative;
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%);
  border-radius: 24px;
  padding: 70px 50px;
  overflow: hidden;
  text-align: center;
}

.blog-newsletter-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(241, 0, 133, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(255, 187, 0, 0.18) 0%, transparent 45%);
}

.blog-newsletter-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}

.blog-newsletter-content .btn-primary {
  background: var(--yellow);
  color: var(--navy);
}

.blog-newsletter-content .btn-primary:hover {
  background: #fff;
  color: var(--purple);
}

@media (max-width: 600px) {
  .blog-newsletter-card { padding: 50px 30px; }
}

/* ============ FAQ ACCORDION ============ */

.learn-faq {
  background: #FAFAFA;
}

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.25s;
}

.faq-item[open] {
  border-color: var(--pink);
  box-shadow: 0 8px 24px rgba(241, 0, 133, 0.10);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.2s;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  background: #FAFAFA;
}

.faq-q-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  flex-grow: 1;
}

.faq-toggle {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(53, 2, 99, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--purple);
  transition: all 0.25s;
}

.faq-item[open] .faq-toggle {
  background: var(--pink);
  color: #fff;
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 26px 26px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.faq-answer p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 12px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer a {
  color: var(--pink);
  text-decoration: underline;
  font-weight: 600;
}

.faq-answer a:hover {
  color: var(--purple);
}

/* ============================================
   v14 ADDITIONS:
   - Resource Library page (/resources/library/)
   - Library banner on /resources page
   ============================================ */

/* ============ LIBRARY BANNER (on /resources page) ============ */

.library-banner-section {
  padding: 50px 0 30px;
  background: #fff;
}

.library-banner-card {
  display: block;
  position: relative;
  background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 60%, var(--orange) 100%);
  border-radius: 22px;
  padding: 60px 50px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: all 0.3s;
  box-shadow: 0 12px 40px rgba(241, 0, 133, 0.18);
}

.library-banner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(241, 0, 133, 0.32);
}

.library-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(0, 0, 0, 0.20) 0%, transparent 45%);
}

.library-banner-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.library-banner-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--yellow);
  background: rgba(0, 0, 0, 0.20);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 18px;
  backdrop-filter: blur(8px);
}

.library-banner-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: #fff;
}

.library-banner-sub {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.90);
  margin-bottom: 30px;
  max-width: 620px;
}

.library-banner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-bottom: 30px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.library-banner-stat {
  display: flex;
  flex-direction: column;
}

.library-banner-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--yellow);
}

.library-banner-stat-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.80);
  margin-top: 4px;
}

.library-banner-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--yellow);
  transition: transform 0.2s;
}

.library-banner-card:hover .library-banner-cta {
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .library-banner-card { padding: 40px 28px; }
  .library-banner-stats { gap: 24px; }
  .library-banner-stat-num { font-size: 30px; }
}

/* ============ LIBRARY PAGE ============ */

.library-page {
  background: #FAFAFA;
}

.library-hero {
  position: relative;
  padding: 70px 0 50px;
  background: #fff;
  overflow: hidden;
}

.library-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 90% 10%, rgba(241, 0, 133, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 5% 90%, rgba(53, 2, 99, 0.04) 0%, transparent 35%);
}

.library-hero-inner {
  position: relative;
  z-index: 1;
}

.library-back {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
  margin-bottom: 30px;
  text-decoration: none;
  transition: color 0.2s;
}

.library-back:hover {
  color: var(--pink);
}

.library-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--purple);
  background: rgba(53, 2, 99, 0.06);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 22px;
}

.library-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 80px);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 22px;
}

.library-title-accent {
  background: linear-gradient(110deg, var(--purple) 0%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.library-sub {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 720px;
  margin: 0;
}

.library-filter-section {
  padding: 20px 0 30px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.library-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.library-filter-pill {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
  background: #FAFAFA;
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}

.library-filter-pill:hover {
  background: rgba(241, 0, 133, 0.08);
  border-color: var(--pink);
  color: var(--pink);
}

.library-filter-pill.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Library grid */
.library-grid-section {
  padding: 50px 0 80px;
}

.library-category-block {
  margin-bottom: 60px;
}

.library-category-block:last-child {
  margin-bottom: 0;
}

.library-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 36px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.library-section-emoji {
  font-size: 0.85em;
  flex-shrink: 0;
}

.library-section-intro {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 28px;
  max-width: 720px;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 920px) {
  .library-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .library-grid { grid-template-columns: 1fr; }
}

.library-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s;
  cursor: pointer;
}

.library-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(53, 2, 99, 0.14);
}

.library-card-foundation {
  background: #fff;
}

.library-card-foundation:hover {
  border-color: var(--purple);
}

.library-card-image {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.library-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.10) 0%, transparent 50%);
  pointer-events: none;
}

.library-card-emoji {
  font-size: 56px;
  line-height: 1;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.20));
}

.library-grad-banking { background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); }
.library-grad-repair { background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%); }
.library-grad-building { background: linear-gradient(135deg, #5EC806 0%, #2d8c00 100%); }
.library-grad-foundations { background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%); }

.library-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.library-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.library-card-cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 4px;
  color: #fff;
  background: var(--ink-muted);
}

.library-card-cat-banking { background: var(--blue); }
.library-card-cat-repair { background: var(--orange); }
.library-card-cat-building { background: #5EC806; }
.library-card-cat-foundations { background: var(--purple); }

.library-card-badge {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--ink-muted);
}

.library-card-badge-full {
  background: rgba(94, 200, 6, 0.10);
  border-color: #5EC806;
  color: #2d8c00;
}

.library-card-badge-foundation {
  background: rgba(53, 2, 99, 0.06);
  border-color: var(--purple);
  color: var(--purple);
}

.library-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 12px;
}

.library-card-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 16px;
  flex-grow: 1;
}

.library-card-cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--pink);
  align-self: flex-start;
  transition: transform 0.2s;
}

.library-card-foundation .library-card-cta {
  color: var(--purple);
}

.library-card:hover .library-card-cta {
  transform: translateX(3px);
}

.library-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-muted);
  font-size: 16px;
  font-style: italic;
}

/* Community CTA at bottom */
.library-cta-section {
  padding: 30px 0 80px;
  background: #FAFAFA;
}

.library-cta-card {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--purple) 100%);
  border-radius: 22px;
  padding: 60px 50px;
  overflow: hidden;
  text-align: center;
}

.library-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(241, 0, 133, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(255, 187, 0, 0.18) 0%, transparent 45%);
}

.library-cta-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}

.library-cta-content .btn-primary {
  background: var(--yellow);
  color: var(--navy);
  margin-top: 8px;
}

.library-cta-content .btn-primary:hover {
  background: #fff;
  color: var(--purple);
}

@media (max-width: 600px) {
  .library-cta-card { padding: 44px 28px; }
}


/* ============================================
   v15 CONTRAST SAFETY - Dark background containers
   These rules use stronger specificity to guarantee
   readable text inside dark gradient CTA boxes.
   ============================================ */

/* Article CTA box (inside article-body) */
.article-body .article-cta-box,
.article-content .article-cta-box {
  color: #fff;
}
.article-body .article-cta-box h3,
.article-content .article-cta-box h3 {
  color: #fff !important;
}
.article-body .article-cta-box p,
.article-content .article-cta-box p {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 16px;
  line-height: 1.55;
}
.article-body .article-cta-box a,
.article-content .article-cta-box a {
  color: var(--navy);
}

/* Blog newsletter card (dark gradient) */
.blog-newsletter-card,
.blog-newsletter-card .lead,
.blog-newsletter-card p {
  color: rgba(255, 255, 255, 0.92);
}
.blog-newsletter-card h2,
.blog-newsletter-card .section-title {
  color: #fff !important;
}

/* Library banner card (pink-orange gradient) */
.library-banner-card,
.library-banner-card p,
.library-banner-card h2 {
  color: #fff;
}

/* Library CTA card (dark navy/purple gradient) */
.library-cta-card,
.library-cta-card .lead,
.library-cta-card p {
  color: rgba(255, 255, 255, 0.92);
}
.library-cta-card h2,
.library-cta-card .section-title {
  color: #fff !important;
}

/* Homepage join section (dark navy) */
.join-section .lead,
.join-section .lead-light,
.join-section p {
  color: rgba(255, 255, 255, 0.85);
}
.join-section .section-title,
.join-section .section-title-light,
.join-section h2 {
  color: #fff !important;
}

/* Resources cross-sell CTA */
.learn-cta .lead,
.learn-cta p {
  color: rgba(255, 255, 255, 0.92);
}
.learn-cta h2 {
  color: #fff !important;
}

/* Contact section */
.contact-section,
.contact-section .lead,
.contact-section p {
  color: rgba(255, 255, 255, 0.85);
}
.contact-section h2 {
  color: #fff !important;
}

/* Bootcamp banner widget — already styled but defend against overrides */
.bootcamp-banner-widget,
.bootcamp-banner-widget p,
.bootcamp-banner-widget h3 {
  color: #fff;
}

/* ============================================
   v15 ADDITIONS:
   - Blog category cards
   - YouTube/Watch section gradient border
   ============================================ */

/* ============ BLOG CATEGORY CARDS ============ */

.blog-categories-section {
  padding: 30px 0 50px;
  background: #fff;
}

.blog-categories-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

.blog-categories-title-accent {
  background: linear-gradient(110deg, var(--purple) 0%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.blog-categories-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 32px;
  max-width: 620px;
}

.blog-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 920px) {
  .blog-categories-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .blog-categories-grid { grid-template-columns: 1fr; }
}

.blog-category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: #FAFAFA;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 24px 28px;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
}

.blog-category-card:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(53, 2, 99, 0.12);
  border-color: var(--pink);
}

.blog-category-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.blog-category-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.20) 0%, transparent 60%);
  pointer-events: none;
}

.blog-category-icon-credit { background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%); }
.blog-category-icon-money { background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); }
.blog-category-icon-personal { background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%); }
.blog-category-icon-faith { background: linear-gradient(135deg, #5EC806 0%, #2d8c00 100%); }

.blog-category-emoji {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.20));
  z-index: 1;
  position: relative;
}

.blog-category-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 10px;
}

.blog-category-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}

/* ============ YOUTUBE/WATCH GRADIENT BORDER ============ */

/* Gradient border around the YouTube videos area only.
   Uses the padding-trick: outer box has gradient bg, inner box covers most of it. */
.watch-videos-row {
  position: relative;
  margin-top: 50px;
  padding: 3px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 35%, var(--orange) 70%, var(--yellow) 100%);
  border-radius: 22px;
}

.watch-videos-row > * {
  position: relative;
  z-index: 1;
}

/* The inner content sits on a white background, leaving the gradient as the visible border */
.watch-videos-row::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: 19px;
  z-index: 0;
}

.watch-videos-row .watch-row-header,
.watch-videos-row .videos-grid-static,
.watch-videos-row .videos-cta {
  padding-left: 30px;
  padding-right: 30px;
}

.watch-videos-row .watch-row-header {
  padding-top: 36px;
}

.watch-videos-row .videos-cta {
  padding-bottom: 30px;
}

@media (max-width: 600px) {
  .watch-videos-row .watch-row-header,
  .watch-videos-row .videos-grid-static,
  .watch-videos-row .videos-cta {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ============================================
   v16 ADDITIONS:
   - Credit Bootcamp Brunch Tour hero on /events
   - Tour stop cards
   - Notification form section
   ============================================ */

/* ============ BRUNCH TOUR HERO ============ */

.brunch-hero {
  position: relative;
  padding: 70px 0 70px;
  background: #fff;
  overflow: hidden;
}

.brunch-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 90% 10%, rgba(241, 0, 133, 0.10) 0%, transparent 40%),
    radial-gradient(circle at 5% 90%, rgba(255, 187, 0, 0.08) 0%, transparent 35%);
}

.brunch-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}

@media (max-width: 920px) {
  .brunch-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.brunch-hero-text {
  display: flex;
  flex-direction: column;
}

.brunch-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pink);
  background: rgba(241, 0, 133, 0.08);
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 22px;
}

.brunch-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.brunch-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 22px;
}

.brunch-title-accent {
  background: linear-gradient(110deg, var(--purple) 0%, var(--pink) 50%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.brunch-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 14px;
  text-transform: none;
}

.brunch-sub-secondary {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 30px;
  max-width: 540px;
}

.brunch-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 32px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.brunch-stat {
  display: flex;
  flex-direction: column;
}

.brunch-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  background: linear-gradient(110deg, var(--purple) 0%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brunch-stat-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
  margin-top: 4px;
}

.brunch-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Hero image */
.brunch-hero-image-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brunch-hero-image-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 35%, var(--orange) 70%, var(--yellow) 100%);
  padding: 5px;
  box-shadow: 0 20px 60px rgba(241, 0, 133, 0.20);
  transform: rotate(-2deg);
}

@media (max-width: 920px) {
  .brunch-hero-image-frame {
    transform: rotate(0deg);
    max-width: 380px;
  }
}

.brunch-hero-image {
  width: 100%;
  height: 100%;
  border-radius: 19px;
  object-fit: cover;
  display: block;
}

.brunch-hero-image-badge {
  position: absolute;
  bottom: -18px;
  right: -18px;
  background: var(--yellow);
  color: var(--navy);
  padding: 16px 22px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transform: rotate(6deg);
  z-index: 2;
}

.brunch-hero-image-badge-line1 {
  display: block;
  font-size: 14px;
  line-height: 1;
}

.brunch-hero-image-badge-line2 {
  display: block;
  font-size: 22px;
  line-height: 1.1;
  margin-top: 2px;
}

@media (max-width: 920px) {
  .brunch-hero-image-badge {
    bottom: -14px;
    right: -10px;
    padding: 12px 18px;
  }
  .brunch-hero-image-badge-line2 { font-size: 18px; }
}

/* ============ TOUR STOPS GRID ============ */

.tour-stops-section {
  padding: 60px 0 70px;
  background: #FAFAFA;
}

.tour-stops-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px;
}

.tour-stops-header .lead {
  margin-top: 16px;
}

.tour-stops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 920px) {
  .tour-stops-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .tour-stops-grid { grid-template-columns: 1fr; }
}

.tour-stop {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s;
}

.tour-stop:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(53, 2, 99, 0.12);
}

/* Featured (Houston) — visually elevated */
.tour-stop-featured {
  background: linear-gradient(135deg, #fff 0%, rgba(241, 0, 133, 0.04) 100%);
  border: 2px solid var(--pink);
  box-shadow: 0 12px 32px rgba(241, 0, 133, 0.14);
  /* Span 2 columns at desktop to make it prominent */
  grid-column: span 1;
}

.tour-stop-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 18px;
  align-self: flex-start;
}

.tour-stop-badge-live {
  background: var(--pink);
  color: #fff;
  animation: badgeShine 3s ease-in-out infinite;
}

@keyframes badgeShine {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241, 0, 133, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(241, 0, 133, 0); }
}

.tour-stop-badge-soon {
  background: rgba(53, 2, 99, 0.08);
  color: var(--purple);
  border: 1px solid rgba(53, 2, 99, 0.15);
}

.tour-stop-flag {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 12px;
}

.tour-stop-city {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
}

.tour-stop-state {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin-bottom: 18px;
}

.tour-stop-date {
  display: flex;
  flex-direction: column;
  background: #FAFAFA;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.tour-stop-featured .tour-stop-date {
  background: rgba(241, 0, 133, 0.06);
}

.tour-stop-date-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.tour-stop-date-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
}

.tour-stop-date-tbd {
  color: var(--purple);
  font-style: italic;
  font-weight: 600;
}

.tour-stop-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 22px;
  flex-grow: 1;
}

.tour-stop-cta-wrap {
  margin-top: auto;
}

.tour-stop-cta-wrap .btn {
  margin-bottom: 8px;
}

.tour-stop-note {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
  margin: 0;
  text-align: center;
}

/* ============ NOTIFICATION FORM ============ */

.brunch-notify-section {
  padding: 30px 0 70px;
  background: #FAFAFA;
}

.brunch-notify-card {
  position: relative;
  background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 60%, #1a0240 100%);
  border-radius: 24px;
  padding: 60px 50px;
  overflow: hidden;
  text-align: center;
}

.brunch-notify-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(241, 0, 133, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(255, 187, 0, 0.18) 0%, transparent 45%);
}

.brunch-notify-content {
  position: relative;
  z-index: 1;
  max-width: 580px;
  margin: 0 auto;
}

.brunch-notify-form-wrap {
  margin: 32px 0 18px;
  background: #fff;
  border-radius: 14px;
  padding: 22px 18px;
  min-height: 80px;
}

.brunch-notify-fineprint {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

@media (max-width: 600px) {
  .brunch-notify-card { padding: 44px 26px; }
}

/* ============ VIRTUAL EVENTS CALLOUT (kept from old events page) ============ */

.events-virtual-section {
  padding: 30px 0 70px;
  background: #FAFAFA;
}


/* ============================================
   v17 ADDITIONS:
   - Metallic shiny red YouTube subscribe button
   - Redesigned free community card (visually distinct from join section bg)
   - Gradient accent on "Family" in join headline
   ============================================ */

/* ============ METALLIC RED YOUTUBE BUTTON ============ */

.btn-youtube-shiny {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 100px;
  /* Metallic red gradient — three stops give the polished metal effect */
  background:
    linear-gradient(180deg,
      #ff5757 0%,
      #e60000 35%,
      #b30000 65%,
      #cc0000 100%
    );
  border: 1px solid #8a0000;
  /* Layered shadows: outer drop shadow, inner highlight, inner shadow for depth */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -2px 6px rgba(0, 0, 0, 0.30) inset,
    0 2px 0 rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(204, 0, 0, 0.40),
    0 14px 28px rgba(0, 0, 0, 0.18);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.btn-youtube-shiny:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg,
      #ff7070 0%,
      #ff1a1a 35%,
      #cc0000 65%,
      #e60000 100%
    );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.50) inset,
    0 -2px 6px rgba(0, 0, 0, 0.32) inset,
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 14px 26px rgba(204, 0, 0, 0.50),
    0 20px 40px rgba(0, 0, 0, 0.24);
}

.btn-youtube-shiny:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 -1px 4px rgba(0, 0, 0, 0.20) inset,
    0 1px 0 rgba(0, 0, 0, 0.20),
    0 4px 10px rgba(204, 0, 0, 0.35);
}

/* Specular highlight strip on the top of the button (gives the "shiny metal" effect) */
.btn-youtube-shiny::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 6%;
  right: 6%;
  height: 38%;
  border-radius: 100px 100px 50% 50% / 100px 100px 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Animated shine sweep that runs across on hover */
.btn-youtube-shiny-shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 2;
  transition: left 0.7s ease;
}

.btn-youtube-shiny:hover .btn-youtube-shiny-shine {
  left: 130%;
}

.btn-youtube-shiny-icon,
.btn-youtube-shiny-text,
.btn-youtube-shiny-arrow {
  position: relative;
  z-index: 3;
}

.btn-youtube-shiny-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.btn-youtube-shiny-arrow {
  font-size: 18px;
  transition: transform 0.2s ease;
}

.btn-youtube-shiny:hover .btn-youtube-shiny-arrow {
  transform: translateX(3px);
}

/* ============ JOIN SECTION REDESIGN ============ */

/* Gradient accent on the word "Family" */
.join-title-accent {
  background: linear-gradient(110deg, var(--yellow) 0%, #ff7a3d 50%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Free community card: distinct background that pops off the dark navy section */
.path-free {
  background:
    linear-gradient(160deg,
      rgba(94, 200, 6, 0.18) 0%,
      rgba(0, 165, 226, 0.12) 50%,
      rgba(255, 255, 255, 0.05) 100%
    ),
    rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(94, 200, 6, 0.40);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 12px 32px rgba(94, 200, 6, 0.12),
    0 24px 56px rgba(0, 0, 0, 0.18);
  position: relative;
  overflow: hidden;
}

/* Subtle ambient glow inside the free card */
.path-free::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(94, 200, 6, 0.25) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.path-free > * {
  position: relative;
  z-index: 1;
}

/* Lift the free card on hover so it competes with the VIP card */
.path-free:hover {
  transform: translateY(-3px);
  border-color: rgba(94, 200, 6, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 18px 44px rgba(94, 200, 6, 0.20),
    0 30px 64px rgba(0, 0, 0, 0.24);
}

/* ============================================
   v18 ADDITIONS:
   - Video thumbnail inside the mini-TV on bootcamp banner widget
   - Homepage section to host the skinny bootcamp banner (proper vertical rhythm)
   ============================================ */

/* Video thumbnail fills the TV screen, sits behind the play button */
.mini-tv-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* Subtle desaturation + warm tint to match the brand vs. the raw YouTube thumbnail */
  filter: saturate(0.92) contrast(1.05) brightness(0.85);
  transition: filter 0.25s ease, transform 0.5s ease;
}

/* Soft dark overlay so the play button stays the focal point */
.mini-tv-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(10, 0, 51, 0.20) 0%, rgba(10, 0, 51, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Play button sits on top of both thumbnail and overlay */
.mini-tv-play {
  position: relative;
  z-index: 2;
}

/* On widget hover: brighten the thumbnail and very subtly zoom (cinematic feel) */
.bootcamp-banner-widget:hover .mini-tv-thumb {
  filter: saturate(1.1) contrast(1.05) brightness(0.95);
  transform: scale(1.05);
}

/* Homepage banner section — gives the skinny banner proper vertical breathing room */
.homepage-bootcamp-banner-section {
  padding: 40px 0 30px;
  background: #fff;
}

@media (max-width: 600px) {
  .homepage-bootcamp-banner-section {
    padding: 30px 0 20px;
  }
}

/* ============================================
   v19 ADDITIONS:
   - Tour rebranding: emoji stat support
   - "Your City Next?" wildcard tour stop card
   - SmartCredit official sponsor skinny banner
   ============================================ */

/* ============ EMOJI STAT IN HERO ============ */

.brunch-stat-num.brunch-stat-emoji {
  background: none;
  -webkit-text-fill-color: initial;
  font-size: 32px;
  line-height: 1.1;
}

/* ============ WILDCARD TOUR STOP ============ */

.tour-stop-wildcard {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(53, 2, 99, 0.04) 0px,
      rgba(53, 2, 99, 0.04) 8px,
      transparent 8px,
      transparent 16px
    ),
    #fff;
  border: 2px dashed var(--purple);
}

.tour-stop-wildcard:hover {
  border-color: var(--pink);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(241, 0, 133, 0.06) 0px,
      rgba(241, 0, 133, 0.06) 8px,
      transparent 8px,
      transparent 16px
    ),
    #fff;
}

.tour-stop-badge-wild {
  background: var(--purple);
  color: var(--yellow);
  border: 1px solid var(--purple);
}

/* ============ SMARTCREDIT SPONSOR BANNER ============ */

.smartcredit-sponsor-section {
  padding: 0 0 60px;
  background: #FAFAFA;
}

.smartcredit-sponsor-banner {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 32px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: all 0.25s;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.smartcredit-sponsor-banner:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 14px 36px rgba(0, 165, 226, 0.15);
}

/* Subtle SmartCredit-blue accent strip on the left edge */
.smartcredit-sponsor-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--pink) 0%, var(--blue) 100%);
}

/* Soft brand-colored glow background */
.smartcredit-sponsor-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 95% 50%, rgba(0, 165, 226, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 5% 50%, rgba(241, 0, 133, 0.04) 0%, transparent 40%);
}

.smartcredit-sponsor-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
}

@media (max-width: 720px) {
  .smartcredit-sponsor-content {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: left;
  }
  .smartcredit-sponsor-banner { padding: 22px 22px 22px 26px; }
}

.smartcredit-sponsor-left {
  min-width: 0;
}

.smartcredit-sponsor-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--blue);
  margin-bottom: 10px;
}

.smartcredit-sponsor-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink);
  animation: sponsor-pulse 2s ease-in-out infinite;
}

@keyframes sponsor-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.smartcredit-sponsor-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 8px;
}

.smartcredit-sponsor-brand {
  background: linear-gradient(110deg, var(--pink) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.smartcredit-sponsor-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
  max-width: 720px;
}

.smartcredit-sponsor-desc strong {
  color: var(--ink);
}

.smartcredit-sponsor-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .smartcredit-sponsor-right { align-items: flex-start; }
}

.smartcredit-sponsor-cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #fff;
  background: linear-gradient(180deg, var(--blue) 0%, #0084b8 100%);
  padding: 12px 22px;
  border-radius: 100px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 4px 12px rgba(0, 132, 184, 0.30);
}

.smartcredit-sponsor-banner:hover .smartcredit-sponsor-cta {
  transform: translateX(3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 6px 16px rgba(0, 132, 184, 0.40);
}

.smartcredit-sponsor-cta-note {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
  font-style: italic;
}

/* ============================================
   v21 ADDITIONS
   - Tighter, uniform spacing across homepage sections
   - Bootcamp banner section gets a contrasting background
   - Join section wrapped in gradient border (like YouTube block)
   - Contact section transformed into social media banner
   ============================================ */

/* ============ UNIFORM SECTION SPACING ============ */
/* Override the default 100px section padding with a tighter uniform 60px */

.section {
  padding: 60px 0;
}

@media (max-width: 768px) {
  .section { padding: 50px 0; }
}

/* Specific overrides for sections with their own padding rules */
.about-section,
.watch-section,
.shop-preview-section,
.reading-section,
.join-section {
  padding: 60px 0;
}

@media (max-width: 768px) {
  .about-section,
  .watch-section,
  .shop-preview-section,
  .reading-section,
  .join-section {
    padding: 50px 0;
  }
}

/* Bootcamp banner section: tighter top/bottom so it acts as a connecting strip */
.homepage-bootcamp-banner-section {
  padding: 40px 0;
}

@media (max-width: 768px) {
  .homepage-bootcamp-banner-section { padding: 32px 0; }
}

/* Social media banner section: matches uniform 60px */
.social-banner-section {
  padding: 60px 0 80px;
  background: #fff;
}

@media (max-width: 768px) {
  .social-banner-section { padding: 50px 0 70px; }
}

/* ============ BOOTCAMP BANNER SECTION BACKGROUND ============ */
/* Soft pink gradient strip so the banner stands out between About and Learning Resources */

.homepage-bootcamp-banner-section {
  background:
    linear-gradient(135deg,
      rgba(241, 0, 133, 0.05) 0%,
      rgba(255, 187, 0, 0.06) 50%,
      rgba(0, 165, 226, 0.05) 100%
    ),
    #FAFAFA;
  position: relative;
}

/* Top and bottom shadow lines so the section reads as visually distinct */
.homepage-bootcamp-banner-section::before,
.homepage-bootcamp-banner-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(241, 0, 133, 0.20) 30%,
    rgba(53, 2, 99, 0.30) 50%,
    rgba(0, 165, 226, 0.20) 70%,
    transparent 100%
  );
}
.homepage-bootcamp-banner-section::before { top: 0; }
.homepage-bootcamp-banner-section::after { bottom: 0; }

/* ============ JOIN SECTION GRADIENT BORDER FRAME ============ */
/* Wrap the join section content in a gradient border, similar to .watch-videos-row */

.join-frame {
  position: relative;
  padding: 3px;
  background: linear-gradient(135deg,
    var(--purple) 0%,
    var(--pink) 30%,
    var(--orange) 60%,
    var(--yellow) 100%
  );
  border-radius: 22px;
  margin-top: 30px;
}

.join-frame::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: linear-gradient(160deg, #1a0240 0%, #350263 50%, #0a0033 100%);
  border-radius: 19px;
  z-index: 0;
}

.join-frame > * {
  position: relative;
  z-index: 1;
}

.join-frame .path-grid {
  padding: 36px 36px 30px;
}

.join-frame .join-footer {
  padding: 0 36px 36px;
}

@media (max-width: 768px) {
  .join-frame .path-grid,
  .join-frame .join-footer {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* ============ SOCIAL MEDIA BANNER ============ */

.social-banner {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--purple) 50%, #1a0240 100%);
  border-radius: 24px;
  padding: 50px 50px;
  overflow: hidden;
}

.social-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(241, 0, 133, 0.20) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255, 187, 0, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(0, 165, 226, 0.10) 0%, transparent 55%);
}

.social-banner-content {
  position: relative;
  z-index: 1;
}

.social-banner-header {
  text-align: center;
  margin-bottom: 36px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.social-banner-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: #fff;
  margin: 12px 0 12px;
}

.social-banner-sub {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.80);
  margin: 0;
}

.social-banner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 920px) {
  .social-banner-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .social-banner-grid { grid-template-columns: 1fr; }
}

.social-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: #fff;
  transition: all 0.25s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.social-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.30);
  transform: translateY(-2px);
}

.social-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

/* Platform brand colors on the icon backgrounds */
.social-card-ig .social-card-icon {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.social-card-tt .social-card-icon {
  background: linear-gradient(135deg, #25f4ee 0%, #000 50%, #fe2c55 100%);
}
.social-card-yt .social-card-icon {
  background: linear-gradient(135deg, #ff5757 0%, #cc0000 100%);
}
.social-card-circle .social-card-icon {
  background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
}

.social-card-body {
  flex-grow: 1;
  min-width: 0;
}

.social-card-platform {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 3px;
}

.social-card-handle {
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.social-card-arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.50);
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
}

.social-card:hover .social-card-arrow {
  color: var(--yellow);
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .social-banner { padding: 40px 26px; }
}

/* ============ CONTACT SECTION FALLBACK (kept for any remaining references) ============ */
.contact-section { display: none; }


/* ============================================
   v22 ADDITIONS — Cousin section cleanup
   - Outer join section bg now matches hero
   - Inner frame becomes warm yellow/orange mirror glass
   - All join section text becomes dark (was white)
   - Free card restyled for the new light background
   - Proper padding inside the frame
   - Bootcamp banner section back to plain background (no color tint)
   - Truly uniform 60px section spacing across the homepage
   ============================================ */

/* ============ TRULY UNIFORM SECTION SPACING ============ */
/* Every homepage section gets identical 60px top/bottom padding */

.section,
.about-section,
.watch-section,
.shop-preview-section,
.reading-section,
.join-section,
.homepage-bootcamp-banner-section,
.social-banner-section {
  padding: 60px 0;
}

@media (max-width: 768px) {
  .section,
  .about-section,
  .watch-section,
  .shop-preview-section,
  .reading-section,
  .join-section,
  .homepage-bootcamp-banner-section,
  .social-banner-section {
    padding: 45px 0;
  }
}

/* ============ BOOTCAMP BANNER SECTION — REMOVE COLORED TINT ============ */
/* Back to clean plain background, matching the rest of the site rhythm */

.homepage-bootcamp-banner-section {
  background: #fff;
}

.homepage-bootcamp-banner-section::before,
.homepage-bootcamp-banner-section::after {
  display: none;
}

/* ============ JOIN SECTION — MATCH HERO BACKGROUND ============ */

.join-section {
  background: linear-gradient(180deg, #FAFAFA 0%, #F4EDFF 100%);
}

/* Kill the dark pseudo-element overlay that was painting it dark */
.join-section::before {
  display: none;
}

/* All join section text on the new light background must be dark */
.join-section .eyebrow-light {
  color: var(--orange);
  background: rgba(255, 92, 0, 0.08);
  padding: 7px 16px;
  border-radius: 100px;
  display: inline-block;
}

.join-section .section-title-light,
.join-section h2.section-title {
  color: var(--ink) !important;
}

.join-section .lead,
.join-section .lead-light,
.join-section > .container > .join-frame > p,
.join-section > .container > .join-frame > .lead {
  color: var(--ink) !important;
}

/* Override the v15 contrast safety rules for join section since bg is now light */
.join-section .lead,
.join-section .lead-light,
.join-section p {
  color: var(--ink);
}

.join-section .section-title,
.join-section .section-title-light,
.join-section h2 {
  color: var(--ink) !important;
}

/* ============ JOIN FRAME — WARM MIRROR GLASS GRADIENT ============ */

.join-frame {
  /* Outer rainbow gradient border stays the same */
  background: linear-gradient(135deg,
    var(--purple) 0%,
    var(--pink) 30%,
    var(--orange) 60%,
    var(--yellow) 100%
  );
  /* Generous padding so border doesn't crash into content */
  padding: 4px;
  margin-top: 28px;
}

/* Inner background: warm yellow/orange mirror glass (replaces the dark navy gradient) */
.join-frame::before {
  background:
    /* Iridescent shimmer overlay — gives the mirror feel */
    linear-gradient(115deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 25%,
      rgba(255, 220, 180, 0.35) 45%,
      rgba(255, 255, 255, 0) 65%,
      rgba(255, 250, 230, 0.45) 100%
    ),
    /* Base warm peach/cream gradient */
    linear-gradient(135deg,
      #FFF6E0 0%,
      #FFE7BC 35%,
      #FFD49C 65%,
      #FFEACE 100%
    );
  border-radius: 18px;
  inset: 4px;
}

/* Proper padding inside the frame so content has breathing room */
.join-frame > .eyebrow,
.join-frame > .eyebrow-light,
.join-frame > .section-title,
.join-frame > .section-title-light,
.join-frame > p,
.join-frame > .lead,
.join-frame > .lead-light {
  padding-left: 50px;
  padding-right: 50px;
}

.join-frame > .eyebrow,
.join-frame > .eyebrow-light {
  margin-top: 50px;
  margin-bottom: 14px;
}

.join-frame .path-grid {
  padding: 30px 50px 30px;
}

.join-frame .join-footer {
  padding: 20px 50px 50px;
  text-align: center;
}

.join-frame .join-footer p {
  color: var(--ink-muted) !important;
  font-style: italic;
}

@media (max-width: 768px) {
  .join-frame > .eyebrow,
  .join-frame > .eyebrow-light,
  .join-frame > .section-title,
  .join-frame > .section-title-light,
  .join-frame > p,
  .join-frame > .lead,
  .join-frame > .lead-light {
    padding-left: 28px;
    padding-right: 28px;
  }
  .join-frame > .eyebrow,
  .join-frame > .eyebrow-light { margin-top: 32px; }
  .join-frame .path-grid { padding: 24px 28px; }
  .join-frame .join-footer { padding: 16px 28px 36px; }
}

/* ============ FREE COMMUNITY CARD — RESTYLE FOR LIGHT BG ============ */
/* Card was glassmorphism dark — needs to be a clean white card on the warm bg */

.path-free {
  background: #fff;
  border: 2px solid rgba(94, 200, 6, 0.50);
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.50) inset,
    0 12px 32px rgba(94, 200, 6, 0.18),
    0 24px 56px rgba(0, 0, 0, 0.10);
  position: relative;
  overflow: hidden;
}

.path-free::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(94, 200, 6, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.path-free:hover {
  transform: translateY(-3px);
  border-color: rgba(94, 200, 6, 0.75);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 18px 44px rgba(94, 200, 6, 0.28),
    0 30px 64px rgba(0, 0, 0, 0.14);
}

/* Free card text on white background */
.path-free .path-title {
  color: var(--ink);
}

.path-free .path-sub,
.path-free .path-features li,
.path-free .path-note {
  color: var(--ink);
}

.path-free .path-note {
  color: var(--ink-muted);
}

/* Free card features dividers — were white-tinted, now subtle gray */
.path-free .path-features li {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* ============================================
   v23 REVISIONS — warmer community direction
   ============================================ */

@media (max-width: 880px) and (min-width: 761px) {
  .hero-with-photo {
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
    gap: 28px;
  }

  .hero-photo-col {
    order: initial;
    max-width: none;
    margin: 0;
  }

  .hero-title {
    font-size: clamp(42px, 6vw, 64px);
  }

  .two-col {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 34px;
  }
}

@media (max-width: 760px) {
  .hero-with-photo,
  .two-col {
    grid-template-columns: 1fr;
  }

  .hero-photo-col {
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }
}

.bio-quote-card {
  max-width: 620px;
  margin: 28px 0 34px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(53, 2, 99, 0.16);
  border-left: 5px solid var(--purple);
  box-shadow: 0 12px 34px rgba(53, 2, 99, 0.10);
}

.bio-quote-card blockquote {
  color: var(--ink);
  font-size: clamp(20px, 2.5vw, 28px);
}

.bio-quote-card .quote-mark,
.bio-quote-card .quote-attribution {
  color: var(--purple);
}

.about-photo-wrap {
  max-width: 420px;
}

.quote-card-overlay {
  display: none;
}

.mini-tv-play,
.video-play-button,
.video-play-icon,
.tv-play-icon {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.14), 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mini-tv-play::after,
.video-play-button::after,
.video-play-icon::after,
.tv-play-icon::after {
  border-color: transparent transparent transparent rgba(53, 2, 99, 0.78) !important;
}

.video-play-overlay {
  background: rgba(10, 10, 10, 0.16);
}

.video-card-static:hover .video-play-overlay,
.video-card:hover .video-play-overlay {
  background: rgba(10, 10, 10, 0.28);
}

.homepage-bootcamp-banner-section {
  padding: 30px 0 24px;
}

.homepage-bootcamp-banner-section .bootcamp-banner-widget {
  margin-bottom: 0;
}

.shop-preview-section {
  padding-top: 36px;
}

@media (max-width: 768px) {
  .homepage-bootcamp-banner-section {
    padding: 24px 0 18px;
  }

  .shop-preview-section {
    padding-top: 30px;
  }
}

.join-section {
  background: #fff;
}

.join-frame {
  background: linear-gradient(135deg, rgba(53, 2, 99, 0.75), rgba(241, 0, 133, 0.42), rgba(0, 165, 226, 0.28));
  border-radius: 20px;
}

.join-frame::before {
  background: #fff;
  border-radius: 16px;
}

.join-section .eyebrow-light {
  color: var(--purple);
  background: rgba(53, 2, 99, 0.07);
}

.join-title-accent {
  background: linear-gradient(110deg, var(--purple) 0%, var(--pink) 70%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.path-card,
.path-free,
.path-vip {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(53, 2, 99, 0.14);
  box-shadow: 0 10px 28px rgba(53, 2, 99, 0.06);
}

.path-vip {
  border: 2px solid rgba(53, 2, 99, 0.28);
}

.path-title,
.path-free .path-title,
.path-vip .path-title,
.path-sub,
.path-vip .path-sub,
.path-features li,
.path-vip .path-features li {
  color: var(--ink);
}

.path-sub {
  opacity: 1;
}

.path-features li {
  border-bottom-color: rgba(53, 2, 99, 0.09);
}

.join-footer p {
  color: var(--ink-muted) !important;
}

.social-card {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.72);
}

.social-card:hover {
  background: #fff;
  border-color: #fff;
}

.social-card-platform {
  color: var(--ink);
}

.social-card-handle {
  color: var(--ink-muted);
}

.social-card-arrow {
  color: rgba(53, 2, 99, 0.55);
}

.learn-title-accent {
  background: linear-gradient(110deg, #fff 0%, var(--yellow) 30%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.learn-jump-pill {
  letter-spacing: 0.06em;
}

.community-resource-banner {
  background: linear-gradient(135deg, #f7fbff 0%, #fff 45%, #f7efff 100%);
  color: var(--ink);
  border: 1px solid rgba(53, 2, 99, 0.16);
  box-shadow: 0 12px 34px rgba(53, 2, 99, 0.08);
}

.community-resource-banner .library-banner-bg {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(0, 165, 226, 0.14) 0%, transparent 42%),
    radial-gradient(circle at 90% 75%, rgba(241, 0, 133, 0.12) 0%, transparent 42%);
}

.community-resource-banner .library-banner-tag {
  color: var(--purple);
  background: rgba(53, 2, 99, 0.07);
}

.community-resource-banner .library-banner-title {
  color: var(--ink);
}

.community-resource-banner .library-banner-sub {
  color: var(--ink-muted);
}

.community-resource-banner .library-banner-cta {
  color: var(--pink);
}

.simple-resource-grid .guide-rich-card {
  box-shadow: none;
}

.simple-resource-grid .guide-rich-body {
  padding: 24px;
}

.simple-resource-grid .guide-rich-image {
  min-height: 170px;
}

.template-download-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.template-download-grid .product-image-text {
  font-size: 24px;
}

.template-download-grid .product-body {
  padding: 18px;
}

.template-download-grid .product-desc {
  font-size: 13px;
}

.webinar-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: -24px;
}

.webinar-preview-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}

.webinar-preview-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 12px 0 8px;
}

.webinar-preview-card p {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .template-download-grid,
  .webinar-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .template-download-grid,
  .webinar-preview-grid {
    grid-template-columns: 1fr;
  }
}

.blog-categories-grid {
  grid-template-columns: repeat(5, 1fr);
}

.blog-category-icon-books {
  background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
}

.blog-featured-compact-section {
  padding: 20px 0 36px;
}

.blog-featured-compact-section .blog-featured-card {
  grid-template-columns: 300px 1fr;
  max-width: 960px;
  margin: 0 auto;
  border-radius: 14px;
}

.blog-featured-compact-section .blog-featured-image {
  min-height: 220px;
}

.blog-featured-compact-section .blog-featured-image-text {
  font-size: 34px;
}

.blog-featured-compact-section .blog-featured-body {
  padding: 30px 34px;
}

.blog-featured-compact-section .blog-featured-title {
  font-size: clamp(24px, 3vw, 30px);
}

.blog-featured-compact-section .blog-featured-excerpt {
  font-size: 14px;
  margin-bottom: 18px;
}

@media (max-width: 1080px) {
  .blog-categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .blog-categories-grid,
  .blog-featured-compact-section .blog-featured-card {
    grid-template-columns: 1fr;
  }
}

.shop-hero {
  background: linear-gradient(135deg, #fff 0%, #f7efff 100%);
  color: var(--ink);
}

.shop-tag {
  color: var(--purple);
  background: rgba(53, 2, 99, 0.07);
  border-color: rgba(53, 2, 99, 0.12);
}

.shop-title {
  color: var(--ink);
}

.shop-sub {
  color: var(--ink-muted);
}

.shop-section {
  background: #fff;
}

.product-card {
  border-radius: 10px;
}

.tour-stops-header .section-title {
  max-width: none;
}

/* ============ v24 UX POLISH: Start Here, Storefront, Mobile ============ */

.start-here-section {
  background: #fff;
  border-bottom: 1px solid var(--border-light);
}

.start-here-header {
  max-width: 760px;
  margin-bottom: 34px;
}

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pathway-card {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 26px 22px;
  border: 1px solid rgba(53, 2, 99, 0.12);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 1)),
    linear-gradient(135deg, rgba(53, 2, 99, 0.08), rgba(241, 0, 133, 0.08));
  box-shadow: 0 10px 26px rgba(53, 2, 99, 0.05);
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.pathway-card:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 0, 133, 0.32);
  box-shadow: 0 18px 42px rgba(53, 2, 99, 0.11);
}

.pathway-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pink);
  margin-bottom: 16px;
}

.pathway-card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.pathway-card p {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.pathway-link {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--purple);
}

.preview-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  position: relative;
}

.preview-card-icon::before,
.preview-card-icon::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
}

.preview-icon-books::before {
  width: 22px;
  height: 26px;
  left: 11px;
  top: 9px;
  border-radius: 3px;
}

.preview-icon-books::after {
  width: 2px;
  height: 24px;
  left: 22px;
  top: 10px;
  background: rgba(53, 2, 99, 0.5);
}

.preview-icon-guides {
  background: linear-gradient(135deg, var(--blue), var(--navy));
}

.preview-icon-guides::before {
  width: 24px;
  height: 3px;
  left: 10px;
  top: 28px;
  transform: rotate(-34deg);
}

.preview-icon-guides::after {
  width: 8px;
  height: 8px;
  right: 9px;
  top: 12px;
  border-radius: 50%;
}

.preview-icon-video {
  background: linear-gradient(135deg, var(--orange), var(--pink));
}

.preview-icon-video::before {
  width: 24px;
  height: 18px;
  left: 10px;
  top: 13px;
  border-radius: 4px;
}

.preview-icon-video::after {
  width: 0;
  height: 0;
  left: 20px;
  top: 17px;
  background: transparent;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--purple);
}

.blog-accent-blue::before { background: var(--blue); }
.blog-accent-yellow::before { background: var(--yellow); }

.resource-recommend-section {
  background: #fff;
  padding: 56px 0 24px;
}

.recommend-header {
  max-width: 760px;
  margin-bottom: 28px;
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.recommend-card {
  background: #FAFAFA;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}

.recommend-number {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 0.12em;
}

.recommend-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 10px 0 8px;
}

.recommend-card p {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

.shop-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.storefront-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -20px auto 54px;
  padding: 10px;
  max-width: 820px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(53, 2, 99, 0.08);
}

.storefront-strip a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--purple);
}

.storefront-strip a:hover {
  background: rgba(53, 2, 99, 0.08);
}

.product-cover::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  z-index: 1;
  pointer-events: none;
}

.product-cover-label {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1020px) {
  .pathway-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reading-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .hero {
    padding: 54px 0 64px;
  }

  .hero-title {
    font-size: clamp(42px, 13vw, 68px);
  }

  .hero-badge {
    align-items: flex-start;
    border-radius: 14px;
    line-height: 1.25;
  }

  .pathway-grid,
  .recommend-grid,
  .reading-grid {
    grid-template-columns: 1fr;
  }

  .pathway-card {
    min-height: auto;
  }

  .section-title,
  .learn-title,
  .shop-title,
  .blog-hero-title,
  .brunch-title {
    overflow-wrap: anywhere;
  }

  .bootcamp-banner-widget {
    padding: 24px 20px;
  }

  .banner-widget-cta {
    justify-content: center;
  }

  .join-frame > .section-title,
  .join-frame > .section-title-light {
    font-size: clamp(34px, 12vw, 52px);
  }

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

  .storefront-strip {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .storefront-strip a {
    white-space: nowrap;
  }
}

/* ============================================
   v25 HOMEPAGE REVISIONS: warmer hero, tour banner, richer pathways
   ============================================ */

.hero-title-welcome {
  font-size: 72px;
  line-height: 0.94;
  letter-spacing: 0;
  max-width: 680px;
}

.hero-title-welcome .hero-title-accent {
  font-size: 1.12em;
}

.hero .hero-sub {
  max-width: 740px;
  font-size: 20px;
}

.start-here-section {
  background:
    linear-gradient(180deg, #fff 0%, #fff 72%, #f7f0ff 100%);
  border-bottom: 1px solid rgba(53, 2, 99, 0.10);
}

.start-here-section > .container {
  position: relative;
  padding: 42px;
  border: 1px solid rgba(53, 2, 99, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 224, 0.82)),
    linear-gradient(120deg, rgba(53, 2, 99, 0.08), rgba(0, 165, 226, 0.08));
  box-shadow:
    0 24px 70px rgba(53, 2, 99, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.start-here-section > .container::before {
  content: '';
  position: absolute;
  left: 42px;
  right: 42px;
  top: 0;
  height: 5px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--purple), var(--pink), var(--yellow));
}

.pathway-card {
  background: #fff;
  border-width: 2px;
  box-shadow:
    0 14px 34px rgba(53, 2, 99, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.pathway-card:nth-child(1) {
  background: linear-gradient(180deg, #fff 0%, rgba(94, 200, 6, 0.09) 100%);
  border-color: rgba(94, 200, 6, 0.32);
}

.pathway-card:nth-child(2) {
  background: linear-gradient(180deg, #fff 0%, rgba(0, 165, 226, 0.09) 100%);
  border-color: rgba(0, 165, 226, 0.28);
}

.pathway-card:nth-child(3) {
  background: linear-gradient(180deg, #fff 0%, rgba(241, 0, 133, 0.08) 100%);
  border-color: rgba(241, 0, 133, 0.26);
}

.pathway-card:nth-child(4) {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 187, 0, 0.16) 100%);
  border-color: rgba(255, 187, 0, 0.46);
}

.pathway-card:hover {
  box-shadow: 0 22px 48px rgba(53, 2, 99, 0.16);
}

.tour-banner-widget {
  background: linear-gradient(120deg, #fff8e0 0%, #f5ecff 45%, #eaf8ff 100%);
  color: var(--ink);
  border: 1px solid rgba(53, 2, 99, 0.14);
  box-shadow: 0 16px 46px rgba(53, 2, 99, 0.13);
}

.tour-banner-widget .banner-widget-bg {
  background-image:
    linear-gradient(90deg, rgba(255, 187, 0, 0.18), rgba(241, 0, 133, 0.08), rgba(0, 165, 226, 0.12));
}

.tour-banner-widget .banner-widget-title {
  color: var(--ink);
}

.tour-banner-widget .banner-widget-desc {
  color: var(--ink-muted);
}

.tour-banner-widget .banner-widget-tag {
  background: #fff;
  color: var(--purple);
  border: 1px solid rgba(53, 2, 99, 0.12);
}

.tour-banner-widget .banner-widget-cta {
  background: var(--purple);
  color: #fff;
}

.tour-banner-widget:hover .banner-widget-cta {
  background: var(--ink);
  color: #fff;
}

.tour-banner-photo {
  width: 118px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 12px 30px rgba(53, 2, 99, 0.18);
  background: #fff;
}

.tour-banner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-preview-section .section-title {
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .hero-title-welcome {
    font-size: 60px;
  }
}

@media (max-width: 700px) {
  .hero-title-welcome {
    font-size: 48px;
  }

  .hero .hero-sub {
    font-size: 17px;
  }

  .start-here-section > .container {
    padding: 30px 22px;
    border-radius: 14px;
  }

  .start-here-section > .container::before {
    left: 22px;
    right: 22px;
  }

.tour-banner-photo {
  margin: 0 auto;
  }
}

/* ============================================
   v26 HEADER + START HERE CLEANUP
   ============================================ */

.site-header {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(53, 2, 99, 0.05);
}

.header-row {
  min-height: 82px;
}

.nav-stack {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 8px 10px 8px 18px;
  border: 1px solid rgba(53, 2, 99, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.primary-nav {
  gap: 22px;
}

.primary-nav a,
.secondary-nav a {
  letter-spacing: 0.08em;
}

.secondary-nav {
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid rgba(53, 2, 99, 0.12);
}

.secondary-nav a:first-child {
  color: #fff;
  background: var(--purple);
  border-radius: 999px;
  padding: 7px 12px;
}

.secondary-nav a:first-child:hover {
  color: #fff;
  background: var(--pink);
}

.nav-divider {
  display: none;
}

.start-here-section > .container {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, var(--green), var(--blue), var(--purple), var(--pink), var(--yellow)) border-box;
  box-shadow: 0 24px 60px rgba(53, 2, 99, 0.09);
}

.start-here-section > .container::before {
  display: none;
}

.pathway-kicker {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(241, 0, 133, 0.09);
  color: var(--purple);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1;
}

.about-photo-wrap {
  background:
    radial-gradient(circle at 50% 55%, rgba(241, 0, 133, 0.08), transparent 56%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 236, 255, 0.92));
  border: 1px solid rgba(53, 2, 99, 0.10);
  border-radius: 18px;
  padding: 22px;
}

.about-photo {
  box-shadow: none;
  border-radius: 12px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .nav-stack {
    border-radius: 18px;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  .secondary-nav {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 700px) {
  .header-row {
    min-height: 72px;
  }

  .nav-stack {
    padding: 0;
    border: 0;
    background: transparent;
  }
}

/* ============================================
   v27 HOMEPAGE HERO + QUICK GUIDE FLOW
   ============================================ */

.hero {
  padding: 92px 0 78px;
  background:
    radial-gradient(circle at 17% 22%, rgba(241, 0, 133, 0.10), transparent 30%),
    radial-gradient(circle at 79% 30%, rgba(38, 154, 229, 0.12), transparent 34%),
    linear-gradient(135deg, #fff 0%, #fff7fc 43%, #eef7ff 100%);
}

.hero-inner.hero-with-photo {
  align-items: center;
  gap: 64px;
}

.hero-text-col {
  max-width: 720px;
}

.hero-badge {
  margin-bottom: 22px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(53, 2, 99, 0.10);
  box-shadow: 0 12px 30px rgba(53, 2, 99, 0.08);
}

.hero-title-welcome {
  max-width: 760px;
  margin-bottom: 24px;
  color: var(--ink);
  font-size: 76px;
  line-height: 0.98;
}

.hero-title-welcome .hero-title-accent {
  display: inline;
  font-size: 1em;
}

.hero .hero-sub {
  max-width: 760px;
  margin-bottom: 34px;
  color: #34323a;
  font-size: 22px;
  line-height: 1.48;
}

.hero-cta-row {
  gap: 14px;
}

.hero-photo {
  border: 6px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 28px 70px rgba(53, 2, 99, 0.16);
}

.about-section {
  padding: 76px 0 82px;
  background:
    radial-gradient(circle at 80% 30%, rgba(241, 0, 133, 0.06), transparent 28%),
    #fff;
}

.about-section .section-title {
  max-width: 760px;
}

.about-section .lead,
.about-section p {
  color: #35313b;
}

.start-here-section {
  padding: 72px 0 86px;
  background: #fff;
  border-top: 1px solid rgba(53, 2, 99, 0.08);
  border-bottom: 1px solid rgba(53, 2, 99, 0.08);
}

.start-here-section > .container {
  padding: 34px 36px 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 5%, rgba(241, 0, 133, 0.30), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(38, 154, 229, 0.24), transparent 38%),
    linear-gradient(135deg, #25013f 0%, #07114f 58%, #171018 100%);
  color: #fff;
  box-shadow: 0 24px 70px rgba(17, 10, 34, 0.24);
}

.start-here-section .eyebrow {
  margin-bottom: 10px;
  color: #ffc20a;
}

.start-here-section .section-title {
  margin-bottom: 12px;
  color: #fff;
  font-size: 44px;
  line-height: 1.02;
}

.start-here-section .section-title-gradient {
  background: linear-gradient(90deg, #ffc20a, #ff5c2a, #f10085);
  -webkit-background-clip: text;
  background-clip: text;
}

.start-here-section .lead {
  max-width: 620px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.5;
}

.pathway-grid {
  gap: 14px;
}

.pathway-card,
.pathway-card:nth-child(1),
.pathway-card:nth-child(2),
.pathway-card:nth-child(3),
.pathway-card:nth-child(4) {
  min-height: 198px;
  padding: 22px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.pathway-card:nth-child(1) {
  border-top: 4px solid var(--green);
}

.pathway-card:nth-child(2) {
  border-top: 4px solid var(--blue);
}

.pathway-card:nth-child(3) {
  border-top: 4px solid var(--pink);
}

.pathway-card:nth-child(4) {
  border-top: 4px solid var(--yellow);
}

.pathway-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.26);
}

.pathway-kicker {
  margin-bottom: 14px;
  background: rgba(53, 2, 99, 0.09);
  color: var(--purple);
  font-size: 12px;
  font-weight: 900;
}

.pathway-card h3 {
  margin-bottom: 10px;
  font-size: 25px;
  line-height: 1.02;
}

.pathway-card p {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.42;
}

@media (max-width: 980px) {
  .hero {
    padding: 70px 0 64px;
  }

  .hero-inner.hero-with-photo {
    gap: 38px;
  }

  .hero-title-welcome {
    font-size: 58px;
  }

  .hero .hero-sub {
    font-size: 20px;
  }

  .start-here-section .section-title {
    font-size: 38px;
  }
}

@media (max-width: 700px) {
  .hero-title-welcome {
    font-size: 44px;
  }

  .hero .hero-sub {
    font-size: 18px;
  }

  .start-here-section {
    padding: 52px 0 62px;
  }

  .start-here-section > .container {
    padding: 28px 20px 30px;
    border-radius: 16px;
  }

  .start-here-section .section-title {
    font-size: 32px;
  }

  .pathway-card,
  .pathway-card:nth-child(1),
  .pathway-card:nth-child(2),
  .pathway-card:nth-child(3),
  .pathway-card:nth-child(4) {
    min-height: 0;
  }
}

/* ============================================
   v28 LOWER HOMEPAGE CONTRAST + MEMBERSHIP POLISH
   ============================================ */

.shop-preview-section {
  background:
    radial-gradient(circle at 18% 18%, rgba(241, 0, 133, 0.22), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(38, 154, 229, 0.22), transparent 32%),
    linear-gradient(135deg, #260042 0%, #07114f 58%, #130814 100%);
  color: #fff;
}

.shop-preview-section .eyebrow {
  color: #ffc20a;
}

.shop-preview-section .section-title {
  color: #fff;
}

.shop-preview-section .section-title-gradient {
  background: linear-gradient(90deg, #ffc20a, #ff5c2a, #f10085);
  -webkit-background-clip: text;
  background-clip: text;
}

.shop-preview-section .lead,
.shop-preview-note {
  color: rgba(255, 255, 255, 0.82);
}

.shop-preview-card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--ink);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}

.shop-preview-card:hover {
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32);
}

.shop-preview-cta .btn-primary {
  background: #ffc20a;
  color: #16001f;
  box-shadow: 0 16px 32px rgba(255, 194, 10, 0.22);
}

.shop-preview-note a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.58);
}

.watch-videos-row .section-title {
  max-width: 900px;
}

.btn-youtube-shiny {
  padding-inline: 30px;
}

.reading-cta .btn-ghost {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
  box-shadow: 0 14px 30px rgba(53, 2, 99, 0.16);
}

.reading-cta .btn-ghost:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  transform: translateY(-2px);
}

.join-frame {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--purple), var(--pink), var(--blue)) border-box;
  color: var(--ink);
}

.join-frame::before {
  opacity: 0.14;
}

.join-frame > .eyebrow,
.join-frame > .eyebrow-light {
  color: var(--pink);
  background: rgba(241, 0, 133, 0.08);
}

.join-frame > .section-title,
.join-frame > .section-title-light,
.join-frame > p,
.join-frame > .lead,
.join-frame > .lead-light {
  color: var(--ink);
}

.join-title-accent {
  background: linear-gradient(90deg, var(--purple), var(--pink), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.path-grid {
  align-items: stretch;
}

.path-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(53, 2, 99, 0.14);
  box-shadow: 0 18px 45px rgba(53, 2, 99, 0.08);
}

.path-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--pink), var(--yellow));
}

.path-free {
  background:
    radial-gradient(circle at 20% 0%, rgba(72, 191, 55, 0.12), transparent 38%),
    #fff;
}

.path-vip {
  transform: translateY(-14px);
  background:
    radial-gradient(circle at 88% 5%, rgba(255, 194, 10, 0.22), transparent 30%),
    radial-gradient(circle at 0% 0%, rgba(241, 0, 133, 0.20), transparent 34%),
    linear-gradient(145deg, #1a0030 0%, #340263 50%, #0b0f3c 100%);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff;
  box-shadow: 0 28px 70px rgba(53, 2, 99, 0.32);
}

.path-vip::before {
  height: 10px;
  background: linear-gradient(90deg, #ffc20a, #ff5c2a, #f10085);
}

.path-vip .path-title,
.path-vip .path-sub,
.path-vip .path-features,
.path-vip .path-note {
  color: #fff;
}

.path-vip .path-sub {
  color: rgba(255, 255, 255, 0.88);
}

.path-vip .path-features li {
  border-color: rgba(255, 255, 255, 0.16);
}

.path-vip .path-features strong {
  color: #ffc20a;
}

.path-vip .btn-primary {
  background: #ffc20a;
  color: #190024;
  box-shadow: 0 18px 36px rgba(255, 194, 10, 0.22);
}

.path-vip .path-note {
  color: rgba(255, 255, 255, 0.78);
}

.tag-vip {
  background: #ffc20a;
  color: #190024;
}

.social-card-circle .social-card-platform {
  color: var(--purple);
}

.site-footer {
  background: #f2f2f4;
  color: #111;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.site-footer .footer-meta,
.site-footer .footer-meta span {
  color: #111;
}

@media (max-width: 900px) {
  .path-vip {
    transform: none;
  }
}


/* ============================================
   v23 ARTICLE VISUAL ENHANCEMENTS
   - Article hero illustration (gradient banner with title overlay)
   - Pull-quote callout cards (shareable graphics)
   - Key takeaways / framework callout boxes
   - Inline visual stat blocks
   ============================================ */

/* ============ ARTICLE HERO ILLUSTRATION ============ */

.article-hero-graphic {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: 18px;
  overflow: hidden;
  margin: 30px 0 40px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 50%, var(--orange) 100%);
}

.article-hero-graphic-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.25) 0%, transparent 50%);
  pointer-events: none;
}

.article-hero-graphic-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 50px 60px;
}

.article-hero-graphic-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--yellow);
  background: rgba(0, 0, 0, 0.22);
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 18px;
  backdrop-filter: blur(6px);
}

.article-hero-graphic-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
  max-width: 90%;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.20);
}

.article-hero-graphic-meta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 700px) {
  .article-hero-graphic { aspect-ratio: 4 / 3; }
  .article-hero-graphic-content { padding: 36px 28px; }
}

/* Color variants */
.article-hero-graphic.grad-credit { background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 50%, var(--orange) 100%); }
.article-hero-graphic.grad-money { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); }
.article-hero-graphic.grad-build { background: linear-gradient(135deg, #5EC806 0%, #2d8c00 100%); }
.article-hero-graphic.grad-banking { background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); }
.article-hero-graphic.grad-repair { background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%); }
.article-hero-graphic.grad-foundations { background: linear-gradient(135deg, var(--purple) 0%, var(--navy) 100%); }

/* ============ PULL-QUOTE CALLOUT (shareable graphic) ============ */

.pull-quote-card {
  position: relative;
  margin: 50px 0;
  padding: 50px 50px 50px 50px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--purple) 100%);
  overflow: hidden;
}

.pull-quote-card::before {
  content: '"';
  position: absolute;
  top: -30px;
  left: 30px;
  font-family: Georgia, serif;
  font-size: 200px;
  color: var(--yellow);
  opacity: 0.20;
  line-height: 1;
  font-weight: 700;
}

.pull-quote-card-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 80% 30%, rgba(241, 0, 133, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(255, 187, 0, 0.10) 0%, transparent 50%);
}

.pull-quote-text {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.30;
  letter-spacing: 0.005em;
  color: #fff;
  margin: 0 0 24px;
  text-transform: none;
  z-index: 1;
}

.pull-quote-attribution {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}

.pull-quote-line {
  width: 30px;
  height: 2px;
  background: var(--yellow);
}

.pull-quote-author {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 700px) {
  .pull-quote-card { padding: 40px 28px; }
}

/* ============ KEY TAKEAWAYS / FRAMEWORK CALLOUT ============ */

.takeaways-card {
  margin: 50px 0;
  padding: 36px 36px 30px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FFF8E0 0%, #FFEACE 100%);
  border-left: 5px solid var(--orange);
  box-shadow: 0 8px 24px rgba(255, 92, 0, 0.10);
}

.takeaways-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--orange);
  margin-bottom: 8px;
}

.takeaways-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 24px;
}

.takeaways-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: takeaway-count;
}

.takeaways-list li {
  counter-increment: takeaway-count;
  position: relative;
  padding: 16px 0 16px 56px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  border-bottom: 1px solid rgba(0, 16, 111, 0.08);
}

.takeaways-list li:last-child { border-bottom: none; }

.takeaways-list li::before {
  content: counter(takeaway-count, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.takeaways-list li strong {
  color: var(--navy);
}

/* ============ INLINE STAT GRID ============ */

.article-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 40px 0;
  padding: 30px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(53, 2, 99, 0.04) 0%, rgba(241, 0, 133, 0.04) 100%);
  border: 1px solid rgba(53, 2, 99, 0.10);
}

@media (max-width: 600px) {
  .article-stats { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
}

.article-stat {
  text-align: center;
  padding: 8px;
}

.article-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1;
  background: linear-gradient(110deg, var(--purple) 0%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  margin-bottom: 6px;
}

.article-stat-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-muted);
  line-height: 1.3;
}

/* ============================================
   v24: PHOTO FRAMING UNIFICATION
   - About photo: shrink chunky 22px padded wrap → thin gradient border
   - Hero photo: replace 6px white border → matching thin gradient border
   - Both use same brand gradient (purple → pink → orange → yellow)
   - Wrapper technique: gradient via padding + inner mask
   ============================================ */

/* HERO photo — thin gradient border */
.hero-photo-wrap {
  position: relative;
  display: inline-block;
  padding: 3px;
  border-radius: 22px;
  background: linear-gradient(135deg,
    var(--purple) 0%,
    var(--pink) 35%,
    var(--orange) 70%,
    var(--yellow) 100%
  );
  box-shadow: 0 28px 70px rgba(53, 2, 99, 0.16);
  max-width: 100%;
}

.hero-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 19px;
  border: none !important;
  box-shadow: none !important;
  background: #fff;
}

/* ABOUT photo — same treatment, slimmer wrap */
.about-photo-wrap {
  position: relative;
  padding: 3px !important;
  background: linear-gradient(135deg,
    var(--purple) 0%,
    var(--pink) 35%,
    var(--orange) 70%,
    var(--yellow) 100%
  ) !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 50px rgba(53, 2, 99, 0.18);
  max-width: 440px;
  margin: 0 auto;
}

.about-photo {
  display: block !important;
  width: 100%;
  height: auto;
  border-radius: 19px !important;
  border: none !important;
  box-shadow: none !important;
  background: #fff;
}

@media (max-width: 700px) {
  .hero-photo-wrap,
  .about-photo-wrap {
    padding: 2px !important;
    border-radius: 18px !important;
  }
  .hero-photo,
  .about-photo {
    border-radius: 16px !important;
  }
}

/* ============================================
   v25: NEW FOOTER STRUCTURE
   - 4-column grid (Brand+social, Learn, Connect, Stay Close)
   - Compliance-grade disclaimer block
   - Responsive: collapses to 2 cols then 1 col
   ============================================ */

.site-footer {
  background: var(--ink, #0f1221);
  color: rgba(255, 255, 255, 0.75);
  padding: 56px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 540px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.footer-col {
  min-width: 0;
}

.footer-brand-col {
  max-width: 300px;
}

.footer-logo {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 16px;
}

.footer-tagline {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.70);
  margin: 0 0 22px;
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: all 0.2s;
}

.footer-social a:hover {
  background: var(--pink, #F10085);
  color: #fff;
  transform: translateY(-1px);
}

.footer-col-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--yellow, #FFBB00);
  margin: 0 0 16px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #fff;
}

.footer-mini-pitch {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.70);
  margin: 0 0 14px;
}

.footer-cta {
  display: inline-block;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink, #0f1221);
  background: var(--yellow, #FFBB00);
  padding: 11px 18px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.2s;
}

.footer-cta:hover {
  background: #fff;
  transform: translateY(-1px);
}

.footer-bottom {
  padding-top: 28px;
}

.footer-disclaimer {
  margin-bottom: 22px;
}

.footer-disclaimer p {
  font-size: 11px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  max-width: 1000px;
}

.footer-disclaimer strong {
  color: rgba(255, 255, 255, 0.80);
}

.footer-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 540px) {
  .footer-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* Override old footer styles that might conflict */
.site-footer .footer-row {
  display: none; /* old footer-row killed by display:none, replaced by footer-grid */
}

/* ============================================
   v25: MOBILE HAMBURGER MENU + DRAWER
   - Hidden on desktop (>900px)
   - Visible on mobile/tablet
   - Slide-in drawer from right
   - Overlay backdrop
   - Accessible: aria attributes, escape key, focus management
   ============================================ */

/* Hamburger button — hidden by default, shown on mobile */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 10px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--ink, #0f1221);
  border-radius: 2px;
  transition: all 0.2s;
}

@media (max-width: 900px) {
  .mobile-nav-toggle {
    display: flex !important;
  }
  /* Hide desktop nav on mobile */
  .nav-stack {
    display: none !important;
  }
}

/* Overlay */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 33, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s;
}

.mobile-nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Drawer */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 88vw;
  height: 100vh;
  background: linear-gradient(160deg, #ffffff 0%, #faf6ff 100%);
  z-index: 999;
  padding: 64px 32px 32px;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 40px rgba(53, 2, 99, 0.18);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mobile-nav-drawer.open {
  transform: translateX(0);
}

.mobile-nav-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: 0;
  font-size: 36px;
  line-height: 1;
  color: var(--ink, #0f1221);
  cursor: pointer;
  padding: 8px 14px;
  font-weight: 300;
}

.mobile-nav-close:hover {
  color: var(--pink, #F10085);
}

.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav-link {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink, #0f1221);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(53, 2, 99, 0.08);
  transition: color 0.2s, padding-left 0.2s;
}

.mobile-nav-link:hover {
  color: var(--pink, #F10085);
  padding-left: 8px;
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

.mobile-nav-link-secondary {
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: rgba(15, 18, 33, 0.75);
  padding: 12px 0;
}

.mobile-nav-divider {
  height: 1px;
  background: rgba(53, 2, 99, 0.12);
  margin: 16px 0 8px;
}

/* ============================================
   v25: 404 PAGE STYLES
   ============================================ */
.not-found-hero {
  padding: 80px 0 100px;
  background: linear-gradient(135deg, #FAFAFA 0%, #F4EDFF 100%);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.not-found-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.not-found-badge {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: clamp(80px, 14vw, 140px);
  line-height: 1;
  background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 50%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}

.not-found-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}

.not-found-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 40px;
}

.not-found-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  text-align: left;
}

@media (max-width: 600px) {
  .not-found-grid { grid-template-columns: 1fr; }
}

.not-found-link {
  display: block;
  background: #fff;
  border: 1px solid rgba(53, 2, 99, 0.10);
  border-radius: 14px;
  padding: 22px 24px;
  text-decoration: none;
  transition: all 0.2s;
}

.not-found-link:hover {
  border-color: var(--pink);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(241, 0, 133, 0.10);
}

.not-found-link-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange);
  margin-bottom: 4px;
}

.not-found-link-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}

/* ============================================
   v26: BECOME A CREDIT COUSIN — REDESIGN
   - Fix VIP card text contrast (was dark on dark)
   - VIP visually elevated as the recommended option
   - Cards equal height with grid stretch
   - Reduced bullet density
   - Cleaner typography rhythm
   - "Most Cousins start here" ribbon on VIP
   ============================================ */

/* Reset path-grid layout for clean side-by-side */
.path-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr; /* VIP slightly wider for emphasis */
  gap: 24px;
  align-items: stretch; /* equal height */
  margin: 0;
}

@media (max-width: 880px) {
  .path-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* === BASE PATH CARD === */
.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  padding: 36px 32px 32px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .path-card { padding: 30px 24px 26px; }
}

/* === FREE CARD === */
.path-free {
  background: linear-gradient(160deg, #ffffff 0%, #f8fbf3 100%) !important;
  border: 1px solid rgba(94, 200, 6, 0.30) !important;
  color: var(--ink) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.50) inset,
    0 8px 24px rgba(94, 200, 6, 0.10),
    0 18px 44px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: none !important;
}

.path-free::before,
.path-free::after {
  display: none !important;
}

.path-free .path-tag.tag-free {
  display: inline-block;
  background: #5EC806 !important;
  color: #fff !important;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
  align-self: flex-start;
  width: auto !important;
}

.path-free .path-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 36px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin: 0 0 14px;
  letter-spacing: 0.005em;
}

.path-free .path-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted, #4a4d5e) !important;
  margin: 0 0 24px;
}

.path-free .path-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.path-free .path-features li {
  position: relative;
  padding: 12px 0 12px 30px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.path-free .path-features li:last-child {
  border-bottom: none !important;
}

.path-free .path-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #5EC806;
  background-image:
    linear-gradient(45deg, transparent 40%, #fff 40%, #fff 50%, transparent 50%),
    linear-gradient(-45deg, transparent 40%, #fff 40%, #fff 50%, transparent 50%);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  background-position: 5px 8px, 7px 6px;
}

.path-free .path-features li strong {
  color: var(--ink) !important;
  font-weight: 600;
}

.path-free .btn-secondary {
  margin-top: auto;
  background: var(--yellow, #FFBB00) !important;
  color: var(--ink, #0f1221) !important;
  border-color: var(--yellow, #FFBB00) !important;
}

.path-free .btn-secondary:hover {
  background: var(--orange, #FF5C00) !important;
  border-color: var(--orange, #FF5C00) !important;
  color: #fff !important;
}

.path-free .path-note {
  font-size: 12px;
  text-align: center;
  margin: 14px 0 0;
  color: var(--ink-muted) !important;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* === VIP CARD === */
.path-vip {
  background: linear-gradient(160deg, #5a1a8a 0%, #43117a 50%, #2e0a5e 100%) !important;
  border: 1px solid rgba(255, 187, 0, 0.40) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 1px rgba(255, 187, 0, 0.10) inset,
    0 14px 38px rgba(53, 2, 99, 0.40),
    0 28px 60px rgba(0, 0, 0, 0.30) !important;
  backdrop-filter: none !important;
  /* Glow accent on top edge */
  position: relative;
}

.path-vip::before,
.path-vip::after {
  display: none !important;
}

/* "Most Cousins start here" ribbon */
.path-vip-recommended {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink, #0f1221);
  background: var(--yellow, #FFBB00);
  padding: 6px 12px;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(255, 187, 0, 0.35);
  z-index: 2;
}

.path-vip .path-tag.tag-vip {
  display: inline-block;
  background: rgba(255, 187, 0, 0.15) !important;
  color: var(--yellow, #FFBB00) !important;
  border: 1px solid rgba(255, 187, 0, 0.45);
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
  align-self: flex-start;
  width: auto !important;
}

.path-vip .path-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 36px);
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff !important;
  margin: 0 0 14px;
  letter-spacing: 0.005em;
}

.path-vip .path-sub {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 24px;
}

.path-vip .path-sub strong {
  color: #fff !important;
  font-weight: 600;
}

.path-vip .path-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

/* CRITICAL FIX: feature labels readable on dark bg */
.path-vip .path-features li {
  position: relative;
  padding: 14px 0 14px 30px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.path-vip .path-features li:last-child {
  border-bottom: none !important;
}

.path-vip .path-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--yellow, #FFBB00);
  background-image:
    linear-gradient(45deg, transparent 40%, var(--ink, #0f1221) 40%, var(--ink, #0f1221) 50%, transparent 50%),
    linear-gradient(-45deg, transparent 40%, var(--ink, #0f1221) 40%, var(--ink, #0f1221) 50%, transparent 50%);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  background-position: 5px 8px, 7px 6px;
}

.path-vip .path-features li strong {
  color: var(--yellow, #FFBB00) !important;
  font-weight: 700;
  display: inline;
}

.path-vip .btn-primary {
  margin-top: auto;
  background: var(--yellow, #FFBB00) !important;
  color: var(--ink, #0f1221) !important;
  border-color: var(--yellow, #FFBB00) !important;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(255, 187, 0, 0.30);
}

.path-vip .btn-primary:hover {
  background: #FFCB33 !important;
  border-color: #FFCB33 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(255, 187, 0, 0.45);
}

.path-vip .path-note {
  font-size: 12px;
  text-align: center;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.70) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-display, 'Oswald', sans-serif);
}

/* ============================================
   v27: HERO SIGNATURE LOGO
   - "Hey! I'm" stays as text
   - Name swapped for handwritten signature image
   - Tight spacing — feels like one cohesive intro
   ============================================ */

.hero-title-welcome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
  margin-bottom: 18px !important;
}

.hero-title-greeting {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink, #0f1221);
  line-height: 1;
  margin: 0;
}

.hero-signature {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 0 0 -8px;
}

@media (max-width: 768px) {
  .hero-signature {
    max-width: 320px;
    margin-left: -4px;
  }
}

@media (max-width: 480px) {
  .hero-signature {
    max-width: 260px;
  }
}

/* Tighten subhead to sit closer to signature */
.hero .hero-sub {
  margin-top: 4px !important;
}

/* ============================================
   v28: HERO CUTOUT PHOTO STYLE
   - Replaces gradient border treatment
   - No frame, no shadow — photo floats clean
   - Subtle drop shadow under subject for depth
   ============================================ */

.hero-photo-cutout {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  /* Remove any inherited border/shadow from .hero-photo base styles */
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  /* Soft drop shadow that follows subject silhouette */
  filter: drop-shadow(0 24px 32px rgba(53, 2, 99, 0.18)) drop-shadow(0 12px 16px rgba(53, 2, 99, 0.10));
}

@media (max-width: 768px) {
  .hero-photo-cutout {
    max-width: 420px;
  }
}

@media (max-width: 480px) {
  .hero-photo-cutout {
    max-width: 320px;
  }
}

/* ============================================================
   v29: MOBILE-FIRST REDESIGN — MASTER OVERRIDE LAYER
   ============================================================
   Strategy: append-only override block that systematically
   tightens every component for phone widths.
   Breakpoints: 480px (phone), 768px (tablet), 1024px (laptop)
   Desktop styles above are preserved.
   ============================================================ */

/* ============ DESIGN TOKENS — MOBILE SCALE ============ */
:root {
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;

  --pad-section-mobile: 36px;
  --pad-section-tablet: 56px;
  --pad-card-mobile: 22px;
  --pad-card-tablet: 28px;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
}

/* ================================================================
   PHONE (≤480px) — most aggressive tightening
   ================================================================ */
@media (max-width: 480px) {

  /* Container — tighter side gutters */
  .container { padding: 0 18px !important; }

  /* Body base — smaller readable type */
  body { font-size: 15px; line-height: 1.55; }

  /* === SECTION SPACING — CUT IN HALF === */
  .section,
  section.section,
  .reading-section,
  .blog-section,
  .shop-section,
  .resource-section,
  .watch-section,
  .start-here-section,
  .start-here-grid-section,
  .about-section,
  .join-section,
  .events-grid-section,
  .events-cities-section,
  .social-banner-section,
  .homepage-bootcamp-banner-section,
  .articles-section,
  .featured-articles-section {
    padding-top: var(--pad-section-mobile) !important;
    padding-bottom: var(--pad-section-mobile) !important;
  }

  /* === HEADINGS — tighter scale === */
  .section-title { font-size: 26px !important; line-height: 1.1 !important; margin-bottom: 8px !important; }
  .section-title-light { font-size: 26px !important; }
  h1, .h1 { font-size: 30px !important; line-height: 1.1 !important; }
  h2, .h2 { font-size: 22px !important; line-height: 1.15 !important; }
  h3, .h3 { font-size: 18px !important; line-height: 1.2 !important; }
  .lead, p.lead { font-size: 15px !important; line-height: 1.5 !important; margin-bottom: 18px !important; }
  .eyebrow { font-size: 11px !important; margin-bottom: 8px !important; letter-spacing: 0.14em !important; }

  /* === HERO — SIDE-BY-SIDE ON MOBILE, PHOTO SMALL RIGHT === */
  .hero { padding: 28px 0 32px !important; }
  .hero-inner,
  .hero-with-photo {
    grid-template-columns: 1.4fr 1fr !important;
    gap: 14px !important;
    align-items: center !important;
  }
  .hero-text-col { min-width: 0 !important; }
  .hero-photo-col { display: flex !important; align-items: center !important; }
  .hero-photo,
  .hero-photo-cutout {
    max-width: 100% !important;
    width: 100% !important;
  }
  .hero-badge {
    font-size: 10px !important;
    padding: 5px 9px !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.10em !important;
  }
  .hero-title-greeting { font-size: 26px !important; }
  .hero-signature { max-width: 220px !important; }
  .hero-sub { font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 14px !important; }
  .hero-cta-row { flex-wrap: wrap !important; gap: 8px !important; }
  .hero-cta-row .btn { font-size: 12px !important; padding: 11px 18px !important; flex: 1 1 auto; }

  /* === BUTTONS === */
  .btn {
    padding: 12px 20px !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
  }
  .btn-full { padding: 14px 18px !important; }

  /* === CARDS — TIGHTER PADDING UNIVERSALLY === */
  .start-here-card,
  .path-card,
  .product-card,
  .resource-card,
  .blog-card,
  .featured-resource-card,
  .city-card,
  .article-card,
  .reading-card,
  .reading-feature-card,
  .reading-cta-card {
    padding: var(--pad-card-mobile) !important;
    border-radius: var(--radius-md) !important;
  }

  /* === START HERE — pathway cards stack 1-up but tighter === */
  .start-here-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .start-here-card { padding: 20px !important; }
  .start-here-card-title { font-size: 17px !important; margin-bottom: 6px !important; }
  .start-here-card-desc { font-size: 13.5px !important; line-height: 1.45 !important; }

  /* === PATH GRID (Become a Credit Cousin) — stack with tighter padding === */
  .path-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .path-card {
    padding: 24px 20px 22px !important;
  }
  .path-title { font-size: 24px !important; line-height: 1.05 !important; margin-bottom: 10px !important; }
  .path-sub { font-size: 13.5px !important; line-height: 1.5 !important; margin-bottom: 16px !important; }
  .path-features li { font-size: 13px !important; padding: 10px 0 10px 26px !important; line-height: 1.45 !important; }
  .path-tag { font-size: 10px !important; padding: 5px 11px !important; margin-bottom: 16px !important; }
  .path-vip-recommended { font-size: 9px !important; padding: 4px 9px !important; top: 12px !important; right: 12px !important; }
  .path-note { font-size: 11px !important; }

  /* === SHOP / PRODUCT CARDS — 2-up on phones === */
  .product-grid,
  .featured-resources-grid,
  .resource-tier-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .product-card,
  .featured-resource-card,
  .resource-card {
    padding: 16px 14px !important;
  }
  .product-name,
  .resource-card-title,
  .featured-resource-title { font-size: 14px !important; line-height: 1.25 !important; }
  .product-price,
  .resource-card-price { font-size: 16px !important; }
  .product-desc,
  .resource-card-desc { font-size: 12px !important; line-height: 1.4 !important; }
  .product-image,
  .resource-card-image { aspect-ratio: 1.4 / 1 !important; }
  .resource-card-tag,
  .product-tag { font-size: 9px !important; padding: 3px 7px !important; }

  /* === BLOG CARDS — stack but tighter === */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .blog-card { padding: 0 !important; overflow: hidden; }
  .blog-card-image { aspect-ratio: 16 / 9 !important; }
  .blog-card-body { padding: 16px !important; }
  .blog-card-title { font-size: 17px !important; line-height: 1.2 !important; margin-bottom: 6px !important; }
  .blog-card-excerpt { font-size: 13px !important; line-height: 1.45 !important; }
  .blog-card-meta { font-size: 11px !important; }

  /* === BLOG CATEGORY TILES — 2-up at phone === */
  .blog-categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .blog-category-card { padding: 16px 12px !important; min-height: 110px !important; }
  .blog-category-title { font-size: 13px !important; }
  .blog-category-desc { font-size: 11px !important; line-height: 1.35 !important; }

  /* === READING SECTION CARDS === */
  .reading-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .reading-feature-card,
  .reading-cta-card { padding: 18px !important; }
  .reading-card-title { font-size: 16px !important; }
  .reading-card-desc { font-size: 13px !important; }
  .reading-card-eyebrow { font-size: 10px !important; }

  /* === ABOUT SECTION === */
  .about-grid,
  .about-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .about-photo-col img,
  .about-image { max-width: 80% !important; margin: 0 auto !important; }
  .about-eyebrow { font-size: 11px !important; margin-bottom: 8px !important; }
  .about-text-col p { font-size: 14px !important; line-height: 1.55 !important; }
  .about-credentials,
  .credential-row { font-size: 12px !important; gap: 6px !important; }
  .credential { padding: 6px 12px !important; font-size: 11px !important; }

  /* === BOOTCAMP BANNER — tighter === */
  .homepage-bootcamp-banner,
  .bootcamp-banner {
    padding: 20px !important;
    border-radius: 14px !important;
    gap: 14px !important;
  }
  .bootcamp-banner-title,
  .homepage-bootcamp-banner-title { font-size: 18px !important; line-height: 1.2 !important; }
  .bootcamp-banner-sub { font-size: 13px !important; }
  .bootcamp-banner-stat-num { font-size: 22px !important; }
  .bootcamp-banner-stat-label { font-size: 10px !important; }

  /* === EVENTS / TOUR PAGE === */
  .city-grid,
  .events-cities-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .city-card { padding: 18px !important; }
  .city-name { font-size: 18px !important; }
  .city-status { font-size: 11px !important; }
  .events-hero-title,
  .events-hero h1 { font-size: 32px !important; line-height: 1.05 !important; }
  .events-hero-sub { font-size: 14px !important; }

  /* === SOCIAL BANNER === */
  .social-banner { padding: 28px 20px !important; border-radius: 18px !important; }
  .social-banner-title { font-size: 22px !important; line-height: 1.15 !important; }
  .social-banner-sub { font-size: 13px !important; margin-bottom: 16px !important; }
  .social-banner-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .social-card { padding: 14px 12px !important; }
  .social-card-handle { font-size: 12px !important; }
  .social-card-platform { font-size: 10px !important; }

  /* === ARTICLES — TIGHTER VISUAL ELEMENTS === */
  .article-hero-graphic { padding: 24px 20px !important; border-radius: 14px !important; margin: 16px 0 24px !important; }
  .article-hero-graphic-content { padding: 0 !important; }
  .article-hero-eyebrow { font-size: 11px !important; }
  .article-hero-title { font-size: 22px !important; line-height: 1.15 !important; }
  .article-hero-sub { font-size: 13px !important; }
  .article-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .article-stat { padding: 14px 12px !important; }
  .article-stat-num { font-size: 22px !important; }
  .article-stat-label { font-size: 10px !important; line-height: 1.25 !important; }
  .article-pull-quote { font-size: 16px !important; padding: 18px 20px !important; line-height: 1.4 !important; }
  .article-pull-quote-attr { font-size: 12px !important; }
  .article-takeaways-card { padding: 20px !important; border-radius: 14px !important; }
  .article-takeaways-title { font-size: 14px !important; }
  .article-takeaways-list li { font-size: 13.5px !important; line-height: 1.45 !important; }
  .article-cta-box { padding: 22px 18px !important; border-radius: 14px !important; }
  .article-cta-title { font-size: 18px !important; }
  .article-cta-sub { font-size: 13px !important; }

  /* === ARTICLE BODY TYPE — tighter for mobile reading === */
  .article-content { font-size: 15px !important; line-height: 1.6 !important; }
  .article-content h2 { font-size: 20px !important; margin: 24px 0 10px !important; line-height: 1.2 !important; }
  .article-content h3 { font-size: 17px !important; margin: 18px 0 8px !important; }
  .article-content p { margin-bottom: 14px !important; }
  .article-content ul, .article-content ol { padding-left: 20px !important; }
  .article-content li { margin-bottom: 6px !important; font-size: 15px !important; }

  /* === LIBRARY INDEX === */
  .library-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .library-card { padding: 18px !important; }
  .library-card-title { font-size: 16px !important; }
  .library-card-desc { font-size: 13px !important; }

  /* === RESOURCES PAGE TIERS === */
  .resource-tier-card { padding: 22px 18px !important; }
  .resource-tier-title { font-size: 18px !important; }
  .resource-tier-desc { font-size: 13px !important; }

  /* === FAQ === */
  .faq-item { padding: 14px 16px !important; }
  .faq-question { font-size: 14px !important; }
  .faq-answer { font-size: 13px !important; line-height: 1.5 !important; }

  /* === FOOTER === */
  .site-footer { padding: 36px 0 20px !important; }
  .footer-grid { padding-bottom: 28px !important; gap: 22px !important; }
  .footer-col-title { font-size: 12px !important; margin-bottom: 12px !important; }
  .footer-links a { font-size: 13px !important; }
  .footer-tagline { font-size: 13px !important; }
  .footer-mini-pitch { font-size: 12px !important; }
  .footer-cta { font-size: 12px !important; padding: 9px 16px !important; }
  .footer-disclaimer p { font-size: 10px !important; line-height: 1.55 !important; }
  .footer-meta-row { font-size: 11px !important; }

  /* === BOOTCAMP PAGE === */
  .bootcamp-week-card { padding: 20px !important; }
  .bootcamp-week-title { font-size: 18px !important; }
  .bootcamp-week-desc { font-size: 13px !important; }

  /* === JOIN FOOTER (the explainer paragraph below VIP cards) === */
  .join-footer p { font-size: 13px !important; line-height: 1.5 !important; padding: 0 8px !important; }
}

/* ================================================================
   TABLET (481-768px) — moderate tightening
   ================================================================ */
@media (min-width: 481px) and (max-width: 768px) {

  .container { padding: 0 24px !important; }

  /* Section padding — moderate */
  .section,
  section.section,
  .reading-section,
  .blog-section,
  .shop-section,
  .resource-section,
  .watch-section,
  .start-here-section,
  .start-here-grid-section,
  .about-section,
  .join-section,
  .events-grid-section,
  .events-cities-section,
  .social-banner-section,
  .articles-section,
  .featured-articles-section {
    padding-top: var(--pad-section-tablet) !important;
    padding-bottom: var(--pad-section-tablet) !important;
  }

  /* Headings */
  .section-title { font-size: 32px !important; line-height: 1.1 !important; }
  .lead, p.lead { font-size: 16px !important; }

  /* Hero — still side-by-side, slightly bigger */
  .hero { padding: 40px 0 48px !important; }
  .hero-inner,
  .hero-with-photo {
    grid-template-columns: 1.3fr 1fr !important;
    gap: 24px !important;
  }
  .hero-title-greeting { font-size: 38px !important; }
  .hero-signature { max-width: 320px !important; }
  .hero-sub { font-size: 16px !important; }

  /* Cards 2-up */
  .product-grid,
  .featured-resources-grid,
  .blog-categories-grid,
  .resource-tier-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .start-here-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .reading-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .city-grid,
  .events-cities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .library-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .path-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Card padding — moderate */
  .start-here-card,
  .path-card,
  .product-card,
  .resource-card,
  .blog-card-body,
  .featured-resource-card,
  .city-card,
  .reading-feature-card,
  .reading-cta-card,
  .library-card { padding: var(--pad-card-tablet) !important; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
}

/* ================================================================
   GLOBAL — applies all sizes
   ================================================================ */

/* ============================================================
   v29 PATCH 1: CORRECT CLASS NAMES + HERO FIX
   ============================================================
   The first override block used wrong class names — the site
   uses .pathway-grid, .shop-grid, .tour-stops-grid, etc.
   This patch matches the actual class names.
   ============================================================ */

@media (max-width: 480px) {

  /* === HERO PHOTO — bigger, better placement === */
  /* Photo column needs more weight to fill its space */
  .hero-with-photo {
    grid-template-columns: 1.1fr 1fr !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .hero-photo-cutout {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  /* Hero badge — shorten on mobile, hide if too long */
  .hero-badge {
    font-size: 9px !important;
    padding: 4px 8px !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }
  /* Tighten the hero title-greeting more so it's not bigger than photo */
  .hero-title-greeting { font-size: 24px !important; }
  .hero-signature { max-width: 200px !important; margin-left: -4px !important; }
  .hero-sub { font-size: 13.5px !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
  /* CTAs need to fit narrow column */
  .hero-cta-row .btn {
    font-size: 11px !important;
    padding: 9px 14px !important;
    letter-spacing: 0.03em !important;
  }

  /* === PATHWAY GRID (Choose your next step) — 2-up === */
  .pathway-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .pathway-card {
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }
  .pathway-card h3 { font-size: 15px !important; line-height: 1.15 !important; margin-bottom: 4px !important; }
  .pathway-card p { font-size: 12px !important; line-height: 1.4 !important; margin-bottom: 8px !important; }
  .pathway-kicker { font-size: 9px !important; padding: 3px 8px !important; margin-bottom: 8px !important; letter-spacing: 0.10em !important; }
  .pathway-link { font-size: 11px !important; }

  /* === SHOP GRID + SHOP PREVIEW GRID — 2-up === */
  .shop-grid,
  .shop-preview-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* But shop product cards with .product-card-wide should stay full width */
  .shop-grid .product-card-wide {
    grid-column: 1 / -1 !important;
  }
  /* shop products tighter */
  .product-card { padding: 14px 12px !important; }
  .product-card h3 { font-size: 14px !important; line-height: 1.2 !important; }
  .product-card p { font-size: 12px !important; line-height: 1.4 !important; }
  .product-image { aspect-ratio: 1.5 / 1 !important; }
  .product-cta { font-size: 11px !important; padding: 8px 12px !important; }

  /* === TOUR STOPS GRID === */
  .tour-stops-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* === BLOG POSTS GRID === */
  .blog-posts-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* === BLOG CATEGORIES — 2-up === */
  .blog-categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* === GUIDES / RESOURCE GRIDS on resources page === */
  .guides-grid-rich,
  .simple-resource-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* === LIBRARY GRID === */
  .library-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* === VIDEOS GRID — vertical stack on phone === */
  .videos-grid-static {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* === WEBINAR PREVIEW GRID === */
  .webinar-preview-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* === RECOMMEND GRID === */
  .recommend-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* === READING GRID === */
  .reading-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  /* === HERO TABLET === */
  .hero-with-photo {
    grid-template-columns: 1.2fr 1fr !important;
    gap: 22px !important;
  }
  .hero-photo-cutout { max-width: 100% !important; }

  /* All grids 2-up at tablet */
  .pathway-grid,
  .shop-grid,
  .shop-preview-grid,
  .blog-posts-grid,
  .blog-categories-grid,
  .guides-grid-rich,
  .simple-resource-grid,
  .library-grid,
  .tour-stops-grid,
  .recommend-grid,
  .videos-grid-static,
  .webinar-preview-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* ============================================================
   v29 PATCH 2: Fix shop product cards at 2-up phone width
   ============================================================ */

@media (max-width: 480px) {
  /* Big text labels on product card images */
  .product-image-text {
    font-size: 17px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
  }
  .product-cover-label {
    font-size: 8px !important;
    top: 12px !important;
    left: 12px !important;
    letter-spacing: 0.10em !important;
  }
  .product-tag {
    font-size: 9px !important;
    padding: 3px 7px !important;
    letter-spacing: 0.08em !important;
  }
  .product-title { font-size: 13px !important; line-height: 1.18 !important; margin-bottom: 4px !important; }
  .product-desc { font-size: 11px !important; line-height: 1.4 !important; margin-bottom: 10px !important; }
  .product-price { font-size: 14px !important; }
  .product-cta { font-size: 10.5px !important; }
  .product-body { padding: 12px !important; }

  /* Featured / wide product cards stay full width */
  .product-card-wide,
  .product-featured {
    grid-column: 1 / -1 !important;
  }
}