/* =========================================================
   NPPP CINEMATIC THEME SYSTEM
   v8 · 2026-06-12
   Source of truth for the NPPP.academy look.
   Based on the uploaded NPPP course platform cards reference.
   ========================================================= */

:root {
  --nppp-bg: #020408;
  --nppp-bg-2: #03060b;
  --nppp-ink: #eef5ff;
  --nppp-white: #ffffff;
  --nppp-muted: rgba(219, 231, 247, 0.72);
  --nppp-soft: rgba(207, 224, 245, 0.54);
  --nppp-dim: rgba(207, 224, 245, 0.38);
  --nppp-panel: rgba(8, 16, 27, 0.82);
  --nppp-panel-2: rgba(9, 20, 34, 0.66);
  --nppp-panel-3: rgba(7, 13, 23, 0.72);
  --nppp-line: rgba(139, 178, 218, 0.16);
  --nppp-line-strong: rgba(171, 202, 238, 0.28);
  --nppp-cyan: #56c7ff;
  --nppp-blue: #1e6eff;
  --nppp-purple: #8b5cff;
  --nppp-magenta: #d61b7f;
  --nppp-orange: #ff9d3a;
  --nppp-green: #71e0a3;
  --nppp-radius-xl: 34px;
  --nppp-radius-lg: 26px;
  --nppp-radius-md: 20px;
  --nppp-radius-sm: 16px;
  --nppp-shadow: 0 30px 90px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255,255,255,0.04);
  --nppp-shadow-soft: 0 24px 70px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
}

html {
  background: var(--nppp-bg) !important;
  color-scheme: dark;
}

body.nppp-site,
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -8%, rgba(54, 125, 255, 0.18), transparent 34%),
    radial-gradient(circle at 88% 3%, rgba(139, 92, 255, 0.15), transparent 32%),
    radial-gradient(circle at 50% 105%, rgba(214, 27, 127, 0.10), transparent 40%),
    linear-gradient(135deg, #020408 0%, #030712 46%, #020408 100%) !important;
  color: var(--nppp-ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.nppp-site::before,
body.nppp-site::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

body.nppp-site::before {
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 70% 30%, black, transparent 75%);
}

body.nppp-site::after {
  z-index: -1;
  background:
    radial-gradient(circle at 18% 22%, rgba(86,199,255,0.08), transparent 28%),
    radial-gradient(circle at 78% 36%, rgba(139,92,255,0.08), transparent 31%),
    linear-gradient(180deg, rgba(2,4,8,0.08), rgba(2,4,8,0.82));
}

.main-area,
main,
.content-area,
.section-area,
.popular-topics,
.latest-articles,
.subscribe-area,
.footer-area,
article,
.single-page-area,
.single-area,
.gh-content,
.prose,
.no-style-blank-page {
  background: transparent !important;
  color: var(--nppp-ink) !important;
}

.container {
  width: min(1180px, calc(100vw - 36px));
  max-width: 1180px;
}

::selection {
  background: rgba(86,199,255,0.26);
  color: #ffffff;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5, h6,
.font-serif,
.section-title h2,
.section-title h3,
.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.nppp-title,
.nppp-section-heading h2,
.nppp-split-copy h2,
.nppp-cta-panel h2 {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #e9f2ff !important;
  font-weight: 820 !important;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

h1,
.gh-content h1,
.prose h1 {
  font-size: clamp(38px, 5.7vw, 76px) !important;
  line-height: 0.96 !important;
}

h2,
.gh-content h2,
.prose h2,
.nppp-section-heading h2,
.nppp-split-copy h2,
.nppp-cta-panel h2 {
  font-size: clamp(30px, 4.5vw, 62px) !important;
  line-height: 1.01 !important;
}

h3,
.gh-content h3,
.prose h3 {
  font-size: clamp(21px, 2.6vw, 32px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
}

p,
li,
.gh-content p,
.gh-content li,
.prose p,
.prose li,
.text-gray-400,
.text-gray-500,
.text-gray-600 {
  color: var(--nppp-muted) !important;
  line-height: 1.68;
}

strong,
b,
.gh-content strong,
.gh-content b,
.prose strong,
.prose b {
  color: #ffffff !important;
  font-weight: 800;
}

a {
  color: var(--nppp-cyan);
  text-decoration-color: rgba(86, 199, 255, 0.38);
  text-underline-offset: 0.18em;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

a:hover {
  color: #ffffff;
  text-decoration-color: rgba(214, 27, 127, 0.72);
}

/* ---------- Header ---------- */

.nppp-header {
  position: relative;
  background:
    radial-gradient(circle at 12% 0%, rgba(86,199,255,0.10), transparent 36%),
    linear-gradient(135deg, rgba(5,10,18,0.92), rgba(5,14,27,0.86)) !important;
  border-bottom: 1px solid var(--nppp-line) !important;
  color: var(--nppp-ink) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,0.28);
  backdrop-filter: blur(18px);
}

.nppp-header-inner {
  min-height: 78px;
}

.nppp-header-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
}

.nppp-header-logo-img {
  display: block;
  width: auto;
  max-height: 48px;
  object-fit: contain;
  filter: none !important;
  box-shadow: none !important;
}

.nppp-main-nav ul,
.nppp-primary-nav,
.nppp-secondary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nppp-main-nav a,
.nppp-primary-nav a,
.nppp-secondary-nav a {
  color: rgba(238,245,255,0.76) !important;
  font-size: 0.86rem;
  font-weight: 760;
  letter-spacing: -0.01em;
  text-decoration: none !important;
}

.nppp-main-nav a:hover,
.nppp-primary-nav a:hover,
.nppp-secondary-nav a:hover {
  color: #ffffff !important;
}

.nppp-search-button,
.nppp-mobile-toggle,
.nppp-social-link,
.nppp-scroll-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214, 27, 127, 0.48) !important;
  background: linear-gradient(135deg, rgba(214,27,127,0.12), rgba(95,92,255,0.10)) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;
}

.nppp-search-button,
.nppp-mobile-toggle {
  width: 42px;
  height: 42px;
  border-radius: 999px;
}

.nppp-search-button:hover,
.nppp-mobile-toggle:hover,
.nppp-social-link:hover,
.nppp-scroll-top:hover {
  border-color: rgba(86,199,255,0.58) !important;
  background: linear-gradient(135deg, rgba(86,199,255,0.17), rgba(214,27,127,0.16)) !important;
  color: #ffffff !important;
}

.nppp-header-cta,
.nppp-btn,
.nppp-btn-primary,
.nppp-btn-secondary,
.kg-button-card a,
.hero-btn-1,
.hero-btn-2,
a[href*="/enroll"],
a[href*="/submit-testimonial"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(214, 27, 127, 0.58) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 820;
  background: linear-gradient(135deg, rgba(214,27,127,0.18), rgba(95,92,255,0.12)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 16px 42px rgba(0,0,0,0.28) !important;
}

.nppp-header-cta:hover,
.nppp-btn:hover,
.nppp-btn-primary:hover,
.nppp-btn-secondary:hover,
.kg-button-card a:hover,
.hero-btn-1:hover,
.hero-btn-2:hover,
a[href*="/enroll"]:hover,
a[href*="/submit-testimonial"]:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 27, 127, 0.58) !important;
  background: linear-gradient(135deg, rgba(214, 27, 127, 0.16), rgba(214, 27, 127, 0.055)), rgba(255, 255, 255, 0.02) !important;
  color: #ffffff !important;
}

.nppp-mobile-toggle span {
  display: block;
  width: 21px;
  height: 2px;
  background: #ffffff;
  margin: 2px 0;
  border-radius: 999px;
}

.nppp-mobile-menu {
  background:
    radial-gradient(circle at 15% 0%, rgba(86,199,255,0.10), transparent 36%),
    linear-gradient(135deg, rgba(5,10,18,0.98), rgba(5,14,27,0.96)) !important;
  color: #ffffff;
  border-left: 1px solid var(--nppp-line);
}

.nppp-mobile-nav a {
  display: block;
  color: rgba(238,245,255,0.82) !important;
  padding: 0.75rem 0;
  text-decoration: none !important;
}

/* ---------- Hero ---------- */

.nppp-hero {
  display: flex;
  align-items: center;
  position: relative;
  background: transparent !important;
  color: #ffffff;
  border-bottom: 1px solid var(--nppp-line) !important;
  overflow: hidden;
}

.nppp-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(86,199,255,0.12), rgba(0,0,0,0) 34%),
    radial-gradient(circle at 72% 10%, rgba(139,92,255,0.10), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.66));
}

.nppp-hero-image-only {
  min-height: auto !important;
  padding: 0 !important;
}

.nppp-hero-image-only .container {
  padding-top: 3.4rem !important;
  padding-bottom: 3.4rem !important;
}

.nppp-hero-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  background: transparent !important;
  border: 1px solid rgba(139,178,218,0.20);
  border-radius: var(--nppp-radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.04);
}

.nppp-hero-logo-img {
  display: block;
  width: min(100%, 1120px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  background: #000000;
  filter: none !important;
  box-shadow: none !important;
}

/* ---------- NPPP reusable cards / sections ---------- */

.nppp-course-card,
.nppp-section,
.nppp-panel,
.nppp-home-section,
.nppp-home-card,
.nppp-home-panel,
.nppp-cta-panel,
.nppp-feature-card,
.nppp-checklist-panel,
.nppp-footer-newsletter,
.nppp-post-card,
.course-card,
.post-card,
.lesson-box-1,
.topics-box-1,
.kg-callout-card,
.kg-toggle-card,
.kg-bookmark-card,
.kg-product-card,
blockquote,
pre {
  color: var(--nppp-ink) !important;
  border: 1px solid var(--nppp-line) !important;
  border-radius: var(--nppp-radius-lg) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(54, 125, 255, 0.19), transparent 30%),
    radial-gradient(circle at 95% 8%, rgba(139, 92, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(5, 10, 18, 0.98), rgba(5, 14, 27, 0.92) 50%, rgba(4, 7, 13, 0.98)) !important;
  box-shadow: var(--nppp-shadow) !important;
}

.nppp-course-card,
.nppp-section,
.nppp-panel,
.nppp-home-section,
.nppp-home-card,
.nppp-home-panel,
.nppp-feature-card,
.nppp-checklist-panel,
.nppp-cta-panel,
.nppp-post-card,
.course-card,
.post-card,
.lesson-box-1,
.topics-box-1,
.nppp-footer-newsletter {
  position: relative;
  overflow: hidden;
}

.nppp-course-card::before,
.nppp-section::before,
.nppp-panel::before,
.nppp-home-section::before,
.nppp-home-card::before,
.nppp-home-panel::before,
.nppp-feature-card::before,
.nppp-checklist-panel::before,
.nppp-cta-panel::before,
.nppp-post-card::before,
.course-card::before,
.post-card::before,
.lesson-box-1::before,
.topics-box-1::before,
.nppp-footer-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 70% 30%, black, transparent 75%);
}

.nppp-course-card > *,
.nppp-section > *,
.nppp-panel > *,
.nppp-home-section > *,
.nppp-home-card > *,
.nppp-home-panel > *,
.nppp-feature-card > *,
.nppp-checklist-panel > *,
.nppp-cta-panel > *,
.nppp-post-card > *,
.course-card > *,
.post-card > *,
.lesson-box-1 > *,
.topics-box-1 > *,
.nppp-footer-newsletter > * {
  position: relative;
  z-index: 1;
}

.nppp-feature-card,
.nppp-checklist-panel,
.nppp-cta-panel,
.nppp-post-card,
.course-card,
.post-card,
.lesson-box-1,
.topics-box-1 {
  border-radius: var(--nppp-radius-md) !important;
  background: rgba(7, 13, 23, 0.72) !important;
  box-shadow: var(--nppp-shadow-soft) !important;
}


.nppp-home-overview,
.articles-area,
.topics-area,
.lesson-area,
.featured-courses-area,
.course-area,
.single-area,
.single-page-area,
.topics-area-page,
.course-details-area,
.single-lesson-area,
.author-area,
.stats-section {
  position: relative;
  background: transparent !important;
  border-top: 1px solid rgba(139,178,218,0.12) !important;
  border-bottom: 1px solid rgba(139,178,218,0.08) !important;
  color: var(--nppp-ink) !important;
}

.nppp-home-overview {
  padding: 5.2rem 0;
}

.nppp-home-overview-alt {
  background: rgba(2,4,8,0.24) !important;
}

.nppp-section-heading {
  max-width: 850px;
  margin: 0 auto 3rem;
  text-align: center;
}

.nppp-section-kicker,
.nppp-kicker,
.nppp-eyebrow,
.nppp-post-meta {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--nppp-cyan) !important;
  margin: 0 0 1rem;
}

.nppp-section-heading p,
.nppp-split-copy p,
.nppp-cta-panel p,
.nppp-feature-card p,
.nppp-post-excerpt,
.course-excerpt,
.nppp-footer-text {
  color: var(--nppp-muted) !important;
  line-height: 1.72;
}

.nppp-feature-grid {
  display: grid;
  gap: 1.25rem;
}

.nppp-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nppp-feature-card,
.nppp-checklist-panel {
  padding: 1.6rem;
}

.nppp-card-number,
.nppp-post-badge,
.featured-badge span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  border: 1px solid rgba(86,199,255,0.35) !important;
  background: rgba(86,199,255,0.12) !important;
  color: #dff4ff !important;
  font-weight: 900;
  font-size: 0.78rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 0 24px rgba(86,199,255,0.12);
}

.nppp-feature-card h3,
.nppp-post-title,
.course-title,
.lesson-box-1 h4,
.topics-box-1 h4 {
  color: #f2f7ff !important;
  font-size: clamp(1.18rem, 1.8vw, 1.45rem);
  line-height: 1.18;
  font-weight: 850;
  margin: 0 0 0.8rem;
}

.nppp-feature-card h3 a,
.nppp-post-title a,
.course-title a,
.lesson-box-1 h4 a,
.topics-box-1 h4 a {
  color: inherit !important;
  text-decoration: none !important;
}

.nppp-split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr);
  gap: 2rem;
  align-items: center;
}

.nppp-inline-link {
  display: inline-flex;
  margin-top: 1.5rem;
  color: #ffffff !important;
  font-weight: 800;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(86,199,255,0.44);
}

.nppp-checklist-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nppp-checklist-panel li {
  position: relative;
  padding: 1rem 0 1rem 2rem;
  border-bottom: 1px solid rgba(139,178,218,0.13);
  color: var(--nppp-muted) !important;
  line-height: 1.55;
}

.nppp-checklist-panel li:last-child {
  border-bottom: 0;
}

.nppp-checklist-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: var(--nppp-cyan);
  box-shadow: 0 0 18px rgba(86,199,255,0.52);
}

.nppp-cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
}

.nppp-cta-panel > div:first-child {
  max-width: 760px;
}

.nppp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: flex-end;
}

/* ---------- Posts, courses and cards ---------- */

.nppp-post-card {
  height: 100%;
}

.nppp-post-card-image,
.course-image {
  display: block;
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #020408 !important;
  border-radius: var(--nppp-radius-sm) !important;
  border: 1px solid rgba(139,178,218,0.14);
}

.nppp-post-card-image-wide {
  aspect-ratio: 16/9;
}

.nppp-post-card-image img,
.course-image img,
.kg-image,
.gh-content figure img,
.prose figure img,
.feature-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: var(--nppp-radius-sm) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.36);
  filter: saturate(0.92) contrast(1.06) brightness(0.90);
}


.nppp-post-card-content,
.course-card .py-6 {
  background: transparent !important;
  padding: 1.35rem 1.35rem 1.5rem;
}

.course-card {
  padding: 1rem !important;
}

.course-author-info {
  border-top-color: rgba(139,178,218,0.16) !important;
}

.nppp-post-author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  color: var(--nppp-soft);
}

.nppp-post-author img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
}

/* ---------- Page/post content ---------- */

.hero-area {
  background: transparent !important;
  border-bottom: 1px solid rgba(139,178,218,0.12) !important;
  color: var(--nppp-ink) !important;
}

.hero-box-1,
.hero-box-2,
.hero-box-3 {
  color: var(--nppp-ink) !important;
}

.single-page-area,
.single-area,
.course-details-area,
.single-lesson-area,
.author-area,
.topics-area-page {
  padding-top: 3.25rem !important;
  padding-bottom: 3.75rem !important;
}

.gh-content,
.prose {
  color: var(--nppp-muted) !important;
}

.gh-content > *,
.prose > * {
  color: inherit;
}

.gh-content p,
.gh-content ul,
.gh-content ol,
.gh-content blockquote,
.gh-content .kg-card,
.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose .kg-card {
  margin-bottom: 1.45em !important;
}

.gh-content a,
.prose a {
  color: var(--nppp-cyan) !important;
}

.gh-content pre,
.gh-content table,
.gh-content th,
.gh-content td,
.prose pre,
.prose table,
.prose th,
.prose td {
  border-color: rgba(139,178,218,0.18) !important;
}

.kg-card figcaption,
.kg-image-card figcaption,
.kg-gallery-card figcaption {
  color: var(--nppp-soft) !important;
}

/* ---------- Forms and Ghost signup ---------- */

input,
textarea,
select {
  color: var(--nppp-ink) !important;
  background: rgba(2, 5, 10, 0.58) !important;
  border: 1px solid rgba(139,178,218,0.22) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

input::placeholder,
textarea::placeholder {
  color: rgba(219,231,247,0.42) !important;
}

button,
input[type="submit"],
.kg-signup-card button,
.kg-signup-card input[type="submit"],
.subscribe-form button,
form[data-members-form] button {
  border: 1px solid rgba(214, 27, 127, 0.58) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(214,27,127,0.18), rgba(95,92,255,0.12)) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset !important;
}

.kg-signup-card {
  border: 1px solid var(--nppp-line) !important;
  border-radius: var(--nppp-radius-lg) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(86,199,255,0.10), transparent 36%),
    linear-gradient(135deg, rgba(8,16,28,0.78), rgba(3,6,12,0.84)) !important;
  color: var(--nppp-ink) !important;
  box-shadow: var(--nppp-shadow-soft) !important;
}

.kg-signup-card h2,
.kg-signup-card p,
.kg-signup-card span,
.kg-signup-card label {
  color: var(--nppp-ink) !important;
}

/* ---------- Newsletter / Footer ---------- */

.nppp-footer {
  position: relative;
  background:
    linear-gradient(180deg, rgba(3,6,12,0.30), rgba(2,4,8,0.94)) !important;
  border-top: 1px solid var(--nppp-line) !important;
  padding-top: 4rem;
  color: var(--nppp-soft) !important;
}

.nppp-footer-newsletter {
  padding: 2.4rem;
  margin-bottom: 2.5rem;
}

.nppp-footer-title {
  font-size: clamp(1.7rem,3vw,3rem) !important;
  line-height: 1.05 !important;
  font-weight: 820 !important;
  color: #f2f7ff !important;
  margin-bottom: 0.8rem;
}

.nppp-footer-nav {
  border-top: 1px solid rgba(139,178,218,0.16);
  margin-top: 2rem;
  padding-top: 1.4rem;
}

.nppp-footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.nppp-footer-nav a {
  color: rgba(238,245,255,0.66) !important;
  text-decoration: none !important;
}

.nppp-newsletter-link,
.nppp-newsletter-link[href="#/portal/signup"],
.nppp-newsletter-link[href="#/portal/signup"]:hover,
.nppp-newsletter-link[href="#/portal/signup"]:focus,
.nppp-newsletter-link[href="#/portal/signup"]:active {
  display: block;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.nppp-newsletter-form {
  display: flex;
  align-items: center;
  border: 1px solid rgba(139,178,218,0.22) !important;
  background: rgba(2,5,10,0.58) !important;
  border-radius: 999px !important;
  padding: 0.35rem !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

.nppp-newsletter-placeholder {
  flex: 1;
  padding: 0.9rem 1.1rem;
  color: rgba(219,231,247,0.50) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent !important;
}

.nppp-newsletter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  border: 1px solid rgba(214,27,127,0.58) !important;
  background: linear-gradient(135deg, rgba(214,27,127,0.18), rgba(95,92,255,0.12)) !important;
  color: #ffffff !important;
  font-weight: 820;
  padding: 0.9rem 1.35rem;
  box-shadow: none !important;
  white-space: nowrap;
}

.nppp-footer-bottom {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 3.5rem;
  color: var(--nppp-soft);
}

.nppp-footer-credit p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(207,224,245,0.52) !important;
}

.nppp-social-link,
.nppp-scroll-top {
  width: 42px;
  height: 42px;
  border-radius: 999px;
}

.nppp-scroll-top {
  width: 46px;
  height: 46px;
}

/* ---------- Utilities / Ghost theme leftovers ---------- */

.bg-white,
.bg-gray-50,
.bg-blue-50,
.hover\:bg-white:hover,
.group:hover .group-hover\:bg-white {
  background-color: transparent !important;
}

.text-gray-800,
.text-blue-800,
.hover\:text-blue-800:hover {
  color: #eef5ff !important;
}

.border-gray-100,
.border-gray-200,
.border-blue-100,
.border-blue-200 {
  border-color: rgba(139,178,218,0.16) !important;
}

.bg-blue-800,
.bg-gradient-to-r {
  background: linear-gradient(135deg, rgba(214,27,127,0.18), rgba(95,92,255,0.12)) !important;
}

.custom-nav-btn,
.popular-topics-swiper-button-prev,
.popular-topics-swiper-button-next,
.topics-swiper-button-next {
  background: rgba(7, 13, 23, 0.72) !important;
  border-color: rgba(139,178,218,0.22) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .nppp-grid-3,
  .nppp-split-section {
    grid-template-columns: 1fr;
  }

  .nppp-cta-panel {
    display: block;
  }

  .nppp-cta-actions {
    justify-content: flex-start;
    margin-top: 1.5rem;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(100%, calc(100vw - 24px));
  }

  .nppp-header-inner {
    min-height: 68px;
  }

  .nppp-header-logo-img {
    max-height: 42px;
  }

  .nppp-hero-image-only .container {
    padding-top: 2.2rem !important;
    padding-bottom: 2.2rem !important;
  }

  .nppp-hero-logo-img {
    width: min(100%, 760px);
  }

  .nppp-home-overview {
    padding: 4rem 0;
  }

  .nppp-feature-card,
  .nppp-checklist-panel,
  .nppp-cta-panel,
  .nppp-footer-newsletter {
    padding: 1.25rem;
  }

  .nppp-newsletter-form {
    display: block;
    border-radius: 1rem !important;
    padding: 0.5rem !important;
  }

  .nppp-newsletter-placeholder {
    padding: 1rem;
  }

  .nppp-newsletter-button {
    width: 100%;
    margin-top: 0.35rem;
  }

  .nppp-footer-bottom {
    display: block;
    text-align: center;
  }

  .nppp-footer-social {
    margin-bottom: 1rem;
  }
}

@media (max-width: 640px) {
  h1,
  .gh-content h1,
  .prose h1 {
    font-size: clamp(34px, 12vw, 54px) !important;
  }

  h2,
  .gh-content h2,
  .prose h2,
  .nppp-section-heading h2,
  .nppp-split-copy h2,
  .nppp-cta-panel h2 {
    font-size: clamp(28px, 10vw, 46px) !important;
  }
}

/* =========================================================
   NPPP REFERENCE REFINEMENT PASS
   v9 · 2026-06-12
   Theme-level refinement, not Code Injection.
   Goal: closer to uploaded NPPP platform-card visual reference:
   darker base, subtler color blooms, less repetition, stronger menu readability.
   ========================================================= */

:root {
  --nppp-bg: #020408;
  --nppp-bg-2: #03060b;
  --nppp-panel: rgba(8, 16, 27, 0.82);
  --nppp-panel-2: rgba(9, 20, 34, 0.66);
  --nppp-line: rgba(139, 178, 218, 0.16);
  --nppp-line-strong: rgba(171, 202, 238, 0.28);
  --nppp-ink: #eef5ff;
  --nppp-muted: rgba(219, 231, 247, 0.72);
  --nppp-soft: rgba(207, 224, 245, 0.54);
  --nppp-cyan: #56c7ff;
  --nppp-blue: #1e6eff;
  --nppp-purple: #8b5cff;
  --nppp-magenta: #d61b7f;
  --nppp-orange: #ff9d3a;
  --nppp-green: #71e0a3;
  --nppp-shadow: 0 30px 90px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255,255,255,0.04);
  --nppp-shadow-soft: 0 22px 64px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.035);
}

html,
body.nppp-site,
body {
  background: #020408 !important;
}

body.nppp-site,
body {
  background:
    radial-gradient(circle at 14% -6%, rgba(86,199,255,0.075), transparent 34%),
    radial-gradient(circle at 86% 2%, rgba(139,92,255,0.060), transparent 30%),
    radial-gradient(circle at 50% 115%, rgba(214,27,127,0.045), transparent 44%),
    linear-gradient(180deg, #020408 0%, #03060b 42%, #020408 100%) !important;
  color: var(--nppp-ink) !important;
}

body.nppp-site::before {
  opacity: 0.78;
  background:
    linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  mask-image: radial-gradient(circle at 70% 30%, black, transparent 75%);
}

body.nppp-site::after {
  background:
    radial-gradient(circle at 18% 22%, rgba(86,199,255,0.040), transparent 30%),
    radial-gradient(circle at 78% 36%, rgba(139,92,255,0.042), transparent 31%),
    linear-gradient(180deg, rgba(2,4,8,0.10), rgba(2,4,8,0.86)) !important;
}

.main-area,
.site,
.site-wrapper,
.viewport,
main,
article,
.single-page-area,
.gh-content,
.prose,
.no-style-blank-page {
  background: transparent !important;
}

/* Header: more legible, closer to the reference than the tiny default menu */
.nppp-header {
  background:
    radial-gradient(circle at 14% 0%, rgba(86,199,255,0.055), transparent 36%),
    linear-gradient(135deg, rgba(5, 10, 18, 0.96), rgba(3, 6, 12, 0.94)) !important;
  border-bottom: 1px solid rgba(139,178,218,0.18) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.34) !important;
}

.nppp-header-inner {
  min-height: 86px !important;
}

.nppp-header-logo-img {
  max-height: 54px !important;
  width: auto !important;
}

.nppp-main-nav ul,
.nppp-primary-nav,
.nppp-secondary-nav {
  gap: clamp(1.35rem, 2.3vw, 2.35rem) !important;
}

.nppp-main-nav a,
.nppp-primary-nav a,
.nppp-secondary-nav a {
  color: rgba(238,245,255,0.82) !important;
  font-size: 0.98rem !important;
  line-height: 1 !important;
  font-weight: 780 !important;
  letter-spacing: -0.005em !important;
  text-decoration: none !important;
}

.nppp-main-nav a:hover,
.nppp-primary-nav a:hover,
.nppp-secondary-nav a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(86,199,255,0.24);
}

.nppp-header-actions {
  gap: 0.8rem !important;
}

.nppp-search-button,
.nppp-mobile-toggle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border-color: rgba(214,27,127,0.48) !important;
  background: rgba(12, 20, 35, 0.62) !important;
}

.nppp-search-button svg {
  width: 18px !important;
  height: 18px !important;
}

.nppp-header-cta {
  min-height: 44px !important;
  padding: 0 1.15rem !important;
  font-size: 0.88rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

/* Hero logo: dark framed image, closer to the reference mockup */
.nppp-hero {
  background: transparent !important;
  border-bottom: 0 !important;
}

.nppp-hero-image-only .container {
  padding-top: clamp(2.4rem, 5vw, 4.6rem) !important;
  padding-bottom: clamp(1.9rem, 4vw, 3.5rem) !important;
}

.nppp-hero-bg {
  opacity: 0.62;
  background:
    radial-gradient(circle at 50% 14%, rgba(86,199,255,0.055), transparent 35%),
    radial-gradient(circle at 68% 12%, rgba(139,92,255,0.045), transparent 34%),
    linear-gradient(180deg, rgba(2,4,8,0.10), rgba(2,4,8,0.24)) !important;
}

.nppp-hero-logo-wrap {
  max-width: 1120px !important;
  border: 1px solid rgba(139,178,218,0.18) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(86,199,255,0.035), transparent 42%),
    #000000 !important;
  box-shadow: 0 26px 82px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

.nppp-hero-logo-img {
  width: min(100%, 1120px) !important;
  border-radius: 29px !important;
  background: #000000 !important;
}

/* Typography: less blocky and less likely to clip inside existing Ghost HTML cards */
h1, h2, h3, h4, h5, h6,
.font-serif,
.section-title h2,
.section-title h3,
.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.nppp-title,
.nppp-section-heading h2,
.nppp-split-copy h2,
.nppp-cta-panel h2,
.nppp-home-card h1,
.nppp-home-card h2,
.nppp-home-card h3,
.nppp-home-section h1,
.nppp-home-section h2,
.nppp-home-section h3,
.nppp-home-panel h1,
.nppp-home-panel h2,
.nppp-home-panel h3 {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #e9f2ff !important;
  font-weight: 790 !important;
  letter-spacing: -0.058em !important;
  text-wrap: balance;
  overflow-wrap: normal;
  max-width: 100%;
}

h1,
.gh-content h1,
.prose h1,
.nppp-home-card h1,
.nppp-home-section h1,
.nppp-home-panel h1 {
  font-size: clamp(34px, 4.8vw, 66px) !important;
  line-height: 0.97 !important;
}

h2,
.gh-content h2,
.prose h2,
.nppp-section-heading h2,
.nppp-split-copy h2,
.nppp-cta-panel h2,
.nppp-home-card h2,
.nppp-home-section h2,
.nppp-home-panel h2 {
  font-size: clamp(31px, 4.3vw, 60px) !important;
  line-height: 1.01 !important;
}

h3,
.gh-content h3,
.prose h3,
.nppp-feature-card h3,
.nppp-home-card h3,
.nppp-home-section h3,
.nppp-home-panel h3 {
  font-size: clamp(18px, 1.65vw, 25px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.038em !important;
  font-weight: 800 !important;
}

p,
li,
.gh-content p,
.gh-content li,
.prose p,
.prose li,
.nppp-home-card p,
.nppp-home-card li,
.nppp-home-section p,
.nppp-home-section li,
.nppp-home-panel p,
.nppp-home-panel li {
  color: rgba(219,231,247,0.72) !important;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.66;
}

/* Reference-style cards: darker, glassier, less repetitive than v8 */
.nppp-course-card,
.nppp-section,
.nppp-panel,
.nppp-home-section,
.nppp-home-card,
.nppp-home-panel,
.nppp-cta-panel,
.kg-callout-card,
.kg-toggle-card,
.kg-bookmark-card,
.kg-product-card,
blockquote,
pre {
  color: var(--nppp-ink) !important;
  border: 1px solid rgba(139,178,218,0.16) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(54,125,255,0.135), transparent 30%),
    radial-gradient(circle at 95% 8%, rgba(139,92,255,0.105), transparent 34%),
    linear-gradient(135deg, rgba(5,10,18,0.985), rgba(5,14,27,0.92) 50%, rgba(4,7,13,0.985)) !important;
  box-shadow: var(--nppp-shadow) !important;
}

.nppp-home-section:nth-of-type(2n),
.nppp-home-card:nth-of-type(2n),
.nppp-home-panel:nth-of-type(2n) {
  background:
    radial-gradient(circle at 10% 0%, rgba(86,199,255,0.095), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(214,27,127,0.070), transparent 36%),
    linear-gradient(135deg, rgba(5,10,18,0.985), rgba(6,15,27,0.92) 52%, rgba(4,7,13,0.985)) !important;
}

.nppp-home-section:nth-of-type(3n),
.nppp-home-card:nth-of-type(3n),
.nppp-home-panel:nth-of-type(3n) {
  background:
    radial-gradient(circle at 18% 0%, rgba(30,110,255,0.105), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(113,224,163,0.050), transparent 36%),
    linear-gradient(135deg, rgba(5,10,18,0.985), rgba(5,14,27,0.92) 50%, rgba(4,7,13,0.985)) !important;
}

.nppp-home-section::before,
.nppp-home-card::before,
.nppp-home-panel::before,
.nppp-course-card::before,
.nppp-section::before,
.nppp-panel::before {
  opacity: 0.74 !important;
  background:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.011) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  mask-image: radial-gradient(circle at 70% 30%, black, transparent 75%);
}

.nppp-feature-card,
.nppp-checklist-panel,
.nppp-post-card,
.course-card,
.post-card,
.lesson-box-1,
.topics-box-1,
.nppp-home-card [class*="card"],
.nppp-home-section [class*="card"],
.nppp-home-panel [class*="card"],
.nppp-home-card [class*="panel"],
.nppp-home-section [class*="panel"],
.nppp-home-panel [class*="panel"] {
  border: 1px solid rgba(139,178,218,0.15) !important;
  border-radius: 20px !important;
  background: rgba(7,13,23,0.66) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 18px 54px rgba(0,0,0,0.22) !important;
}


.nppp-section-kicker,
.nppp-kicker,
.nppp-eyebrow,
.nppp-post-meta,
.nppp-home-card [class*="eyebrow"],
.nppp-home-section [class*="eyebrow"],
.nppp-home-panel [class*="eyebrow"] {
  color: var(--nppp-cyan) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

/* Buttons: reference magenta outline, but not visually heavy */
.nppp-header-cta,
.nppp-btn,
.nppp-btn-primary,
.nppp-btn-secondary,
.kg-button-card a,
.hero-btn-1,
.hero-btn-2,
a[href*="/enroll"],
a[href*="/submit-testimonial"],
.nppp-home-card a[class*="button"],
.nppp-home-section a[class*="button"],
.nppp-home-panel a[class*="button"] {
  border: 1px solid rgba(214,27,127,0.58) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(214,27,127,0.16), rgba(95,92,255,0.10)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 14px 38px rgba(0,0,0,0.24) !important;
}

.nppp-header-cta:hover,
.nppp-btn:hover,
.nppp-btn-primary:hover,
.nppp-btn-secondary:hover,
.kg-button-card a:hover,
.hero-btn-1:hover,
.hero-btn-2:hover,
a[href*="/enroll"]:hover,
a[href*="/submit-testimonial"]:hover,
.nppp-home-card a[class*="button"]:hover,
.nppp-home-section a[class*="button"]:hover,
.nppp-home-panel a[class*="button"]:hover {
  border-color: rgba(214, 27, 127, 0.58) !important;
  background: linear-gradient(135deg, rgba(214, 27, 127, 0.16), rgba(214, 27, 127, 0.055)), rgba(255, 255, 255, 0.02) !important;
  color: #ffffff !important;
}

/* Existing Ghost image cards and testimonial images */
.kg-image,
.gh-content figure img,
.prose figure img,
.feature-image img,
.nppp-post-card-image img,
.course-image img,
.nppp-home-card img,
.nppp-home-section img,
.nppp-home-panel img {
  filter: saturate(0.90) contrast(1.06) brightness(0.92) !important;
}

/* Newsletter footer: same language but quieter */
.nppp-footer {
  background:
    linear-gradient(180deg, rgba(3,6,12,0.24), rgba(2,4,8,0.96)) !important;
}

.nppp-footer-newsletter {
  background:
    radial-gradient(circle at 12% 0%, rgba(86,199,255,0.080), transparent 36%),
    radial-gradient(circle at 90% 8%, rgba(139,92,255,0.060), transparent 34%),
    linear-gradient(135deg, rgba(8,16,28,0.72), rgba(3,6,12,0.86)) !important;
}

.nppp-newsletter-form {
  background: rgba(2,5,10,0.62) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .nppp-header-inner {
    min-height: 72px !important;
  }

  .nppp-header-logo-img {
    max-height: 44px !important;
  }

  .nppp-hero-logo-wrap {
    border-radius: 22px !important;
  }

  .nppp-hero-logo-img {
    border-radius: 21px !important;
  }

  h1,
  .gh-content h1,
  .prose h1,
  .nppp-home-card h1,
  .nppp-home-section h1,
  .nppp-home-panel h1 {
    font-size: clamp(34px, 10.8vw, 54px) !important;
  }

  h2,
  .gh-content h2,
  .prose h2,
  .nppp-section-heading h2,
  .nppp-split-copy h2,
  .nppp-cta-panel h2,
  .nppp-home-card h2,
  .nppp-home-section h2,
  .nppp-home-panel h2 {
    font-size: clamp(29px, 9.4vw, 46px) !important;
  }
}


/* NPPP compact page/post title banners
   Keeps the navigation unchanged, but reduces the large title area below it. */
body:not(.home-template) .hero-area {
  padding-top: clamp(22px, 3.4vw, 48px) !important;
  padding-bottom: clamp(20px, 3vw, 42px) !important;
  min-height: auto !important;
}

body:not(.home-template) .hero-area .container {
  min-height: auto !important;
}

body:not(.home-template) .hero-area .section-title,
body:not(.home-template) .hero-area .hero-content,
body:not(.home-template) .hero-area .hero-cotent {
  max-width: 860px !important;
}

body:not(.home-template) .hero-area .section-title {
  margin-bottom: clamp(14px, 2vw, 24px) !important;
}

body:not(.home-template) .hero-area h1,
body:not(.home-template) .hero-area .section-title h1,
body:not(.home-template) .hero-area .hero-content h1,
body:not(.home-template) .hero-area .hero-cotent h1 {
  font-size: clamp(2rem, 4vw, 3.15rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  margin-bottom: clamp(10px, 1.8vw, 18px) !important;
}

body:not(.home-template) .hero-area p,
body:not(.home-template) .hero-area .text-xl,
body:not(.home-template) .hero-area .text-lg {
  font-size: clamp(0.98rem, 1.15vw, 1.08rem) !important;
  line-height: 1.55 !important;
  margin-top: clamp(8px, 1.2vw, 14px) !important;
  margin-bottom: clamp(8px, 1.2vw, 14px) !important;
}

body:not(.home-template) .hero-area .hero-box-3,
body:not(.home-template) .hero-area .hero-box-1,
body:not(.home-template) .hero-area .hero-box-2 {
  gap: clamp(16px, 2.6vw, 30px) !important;
}

body:not(.home-template) .hero-area .feature-image img,
body:not(.home-template) .hero-area .learn-cover-img {
  max-height: 240px !important;
  object-fit: cover !important;
}

body:not(.home-template) .post-style-one.hero-area .section-title {
  margin-bottom: 0 !important;
}

body:not(.home-template) .post-style-one.hero-area {
  padding-top: clamp(24px, 3.4vw, 50px) !important;
  padding-bottom: clamp(22px, 3vw, 44px) !important;
}

/* Compact header for the custom NPPP lesson app template */
.nppp-lesson-template-hero-inner {
  padding-top: clamp(24px, 4vw, 52px) !important;
  padding-bottom: clamp(22px, 3.2vw, 40px) !important;
}

.nppp-lesson-topline {
  margin-bottom: clamp(14px, 2.4vw, 28px) !important;
}

.nppp-lesson-template-title {
  font-size: clamp(2rem, 4.1vw, 3.35rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.05em !important;
}

.nppp-lesson-template-subtitle {
  margin-top: 14px !important;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem) !important;
  line-height: 1.58 !important;
}

@media (max-width: 768px) {
  body:not(.home-template) .hero-area {
    padding-top: 22px !important;
    padding-bottom: 24px !important;
  }

  body:not(.home-template) .hero-area h1,
  body:not(.home-template) .hero-area .section-title h1,
  body:not(.home-template) .hero-area .hero-content h1,
  body:not(.home-template) .hero-area .hero-cotent h1 {
    font-size: clamp(2rem, 10vw, 2.75rem) !important;
  }

  .nppp-lesson-template-title {
    font-size: clamp(2rem, 10vw, 2.85rem) !important;
  }
}


/* NPPP default chrome cleanup
   Purpose:
   - Keep the main navigation/menu.
   - Remove the automatic oversized title/banner area on normal pages, posts, lesson posts, and collection pages.
   - Remove the automatic "Stay in the loop" newsletter block site-wide except the home page.
   - Page-specific titles should now be added inside the actual page/card content when needed.

   These overrides are intentionally CSS-only so the original theme partials remain in the zip and can be restored later. */

/* Hide default page/post/collection hero banners everywhere except the homepage. */
body:not(.home-template) .hero-area,
body:not(.home-template) .post-style-one.hero-area,
body:not(.home-template) .post-style-two.hero-area,
body:not(.home-template) .post-style-three.hero-area,
body:not(.home-template) .archive-hero-area,
body:not(.home-template) .tag-hero-area,
body:not(.home-template) .author-hero-area {
  display: none !important;
}

/* Extra protection for common title/banner wrappers used by the Learn theme. */
body:not(.home-template) .page-hero,
body:not(.home-template) .post-hero,
body:not(.home-template) .single-hero,
body:not(.home-template) .hero-section,
body:not(.home-template) .section-title.hero-title,
body:not(.home-template) .breadcrumb-area {
  display: none !important;
}

/* Hide the default newsletter / subscribe CTA everywhere except the homepage. */
body:not(.home-template) .subscribe-area,
body:not(.home-template) .newsletter-area,
body:not(.home-template) .newsletter-section,
body:not(.home-template) .subscribe-section,
body:not(.home-template) .cta-subscribe,
body:not(.home-template) .footer-subscribe,
body:not(.home-template) .footer-newsletter,
body:not(.home-template) .email-subscription,
body:not(.home-template) section[class*="subscribe"],
body:not(.home-template) section[class*="newsletter"],
body:not(.home-template) div[class*="subscribe-area"],
body:not(.home-template) div[class*="newsletter-area"] {
  display: none !important;
}

/* Remove excess vertical space left by hidden theme chrome on non-home pages. */
body:not(.home-template) .main-area > .pt-32,
body:not(.home-template) .main-area > .pt-40,
body:not(.home-template) .main-area > .py-24,
body:not(.home-template) .main-area > .py-32 {
  padding-top: 0 !important;
}

/* The custom NPPP lesson template intentionally keeps its own small internal lesson header.
   This prevents the normal blog banner from showing while preserving the lesson app header. */
body.nppp-lesson-layout .hero-area {
  display: none !important;
}

/* Optional reusable title utility for future HTML cards.
   Use this inside page content when a page needs its own title. */
.nppp-page-card-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.05em;
}

.nppp-page-card-subtitle {
  margin: 14px 0 0;
  max-width: 760px;
  color: rgba(226, 236, 255, 0.72);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.6;
}


/* NPPP homepage HTML-card stabilizer
   Purpose:
   The homepage should not depend on a native Ghost header/image card for layout.
   This makes homepage HTML cards use a consistent wide content lane even when the
   native top header/image block is removed. */
body.home-template .kg-card.kg-html-card,
body.page-template .kg-card.kg-html-card:has(.nppp-home-hero-card),
body.page-template .kg-card.kg-html-card:has(.nppp-home-section),
body.page-template .kg-card.kg-html-card:has(.nppp-home-testimonials),
body.page-template .kg-card.kg-html-card:has(.nppp-home-enrollment) {
  position: relative !important;
  left: 50% !important;
  width: min(1360px, calc(100vw - 40px)) !important;
  max-width: 1360px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
}

body.home-template .kg-card.kg-html-card + .kg-card.kg-html-card {
  margin-top: 22px !important;
}

body.home-template .kg-card.kg-html-card > section {
  width: 100% !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If the homepage is served through a static page template instead of home-template,
   this targets the actual NPPP homepage cards without affecting other pages. */
.kg-card.kg-html-card:has(.nppp-home-hero-card),
.kg-card.kg-html-card:has(.nppp-home-section),
.kg-card.kg-html-card:has(.nppp-home-testimonials),
.kg-card.kg-html-card:has(.nppp-home-enrollment) {
  position: relative !important;
  left: 50% !important;
  width: min(1360px, calc(100vw - 40px)) !important;
  max-width: 1360px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 760px) {
  body.home-template .kg-card.kg-html-card,
  .kg-card.kg-html-card:has(.nppp-home-hero-card),
  .kg-card.kg-html-card:has(.nppp-home-section),
  .kg-card.kg-html-card:has(.nppp-home-testimonials),
  .kg-card.kg-html-card:has(.nppp-home-enrollment) {
    width: calc(100vw - 32px) !important;
  }
}



/* =========================================================
   NPPP HOMEPAGE REFINEMENTS
   Wider content lane + no borders
   Applied here so a single CSS update covers all homepage
   HTML cards without editing each card individually.
   ========================================================= */

/* Widen the inner content wrapper to match the new stabilizer.
   !important overrides the 1160px declared inside each HTML card. */
.nppp-home-card-wrap {
  max-width: 1320px !important;
}

/* Remove all homepage card borders.
   Keeps gradients, backgrounds and shadows intact. */
.nppp-home-hero,
.nppp-home-section,
.nppp-home-final-cta,
.nppp-home-card,
.nppp-home-enrollment-box,
.nppp-home-submit-card,
.nppp-home-testimonial-card,
.nppp-home-note {
  border: none !important;
}


/* =========================================================
   NPPP HOMEPAGE: TRANSPARENT CARDS
   Removes backgrounds and shadows so content sits
   directly on the page — no visible card boundaries.
   ========================================================= */

/* All section wrappers and card containers go fully transparent.
   nth-of-type selectors are included to override the alternating
   background rules in the v9 refinement block above. */
.nppp-home-hero,
.nppp-home-section,
.nppp-home-final-cta,
.nppp-home-card,
.nppp-home-enrollment-box,
.nppp-home-submit-card,
.nppp-home-testimonial-card,
.nppp-home-note,
.nppp-home-section:nth-of-type(2n),
.nppp-home-section:nth-of-type(3n),
.nppp-home-card:nth-of-type(2n),
.nppp-home-card:nth-of-type(3n) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove the grid-line and bottom-glow pseudo-elements on the hero,
   and the grid overlays on section/card ::before elements. */
.nppp-home-hero::before,
.nppp-home-hero::after,
.nppp-home-section::before,
.nppp-home-card::before {
  display: none !important;
}


/* =========================================================
   NPPP Transparent Cards — focused v2 update
   Date: 2026-06-15
   Requested changes only:
   1) Push desktop navigation/menu to the right.
   2) Widen the site/content lanes for large screens and video-first pages.
   3) Brighten the graphite background slightly, closer to Smoked Glass,
      without changing the Transparent Cards typography/card system.
   ========================================================= */

:root {
  --nppp-bg: #070a11;
  --nppp-bg-2: #09111d;
}

html,
body.nppp-site,
body {
  background: #070a11 !important;
}

body.nppp-site,
body {
  background:
    radial-gradient(circle at 14% -6%, rgba(86,199,255,0.095), transparent 34%),
    radial-gradient(circle at 86% 2%, rgba(139,92,255,0.078), transparent 31%),
    radial-gradient(circle at 50% 115%, rgba(214,27,127,0.060), transparent 44%),
    linear-gradient(180deg, #070a11 0%, #09111d 42%, #05070d 100%) !important;
}

body.nppp-site::before {
  opacity: 0.62 !important;
}

body.nppp-site::after {
  background:
    radial-gradient(circle at 18% 22%, rgba(86,199,255,0.050), transparent 30%),
    radial-gradient(circle at 78% 36%, rgba(139,92,255,0.052), transparent 31%),
    linear-gradient(180deg, rgba(7,10,17,0.04), rgba(5,7,13,0.66)) !important;
}

/* Desktop header alignment: logo stays left, menu is pushed right. */
@media (min-width: 1024px) {
  .nppp-header .container {
    width: min(1680px, calc(100vw - 56px)) !important;
    max-width: 1680px !important;
  }

  .nppp-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(1.2rem, 2.2vw, 2.8rem) !important;
  }

  .header-logo {
    flex: 0 0 auto !important;
  }

  .nppp-main-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    min-width: 0 !important;
  }

  .nppp-main-nav ul,
  .nppp-primary-nav,
  .nppp-secondary-nav {
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  .nppp-header-actions {
    flex: 0 0 auto !important;
  }
}

/* Wider global content lane. */
.container {
  width: min(1480px, calc(100vw - 44px)) !important;
  max-width: 1480px !important;
}

/* Wider homepage HTML-card lane for the existing Transparent Cards homepage. */
body.home-template .kg-card.kg-html-card,
body.page-template .kg-card.kg-html-card:has(.nppp-home-hero-card),
body.page-template .kg-card.kg-html-card:has(.nppp-home-section),
body.page-template .kg-card.kg-html-card:has(.nppp-home-testimonials),
body.page-template .kg-card.kg-html-card:has(.nppp-home-enrollment),
.kg-card.kg-html-card:has(.nppp-home-hero-card),
.kg-card.kg-html-card:has(.nppp-home-section),
.kg-card.kg-html-card:has(.nppp-home-testimonials),
.kg-card.kg-html-card:has(.nppp-home-enrollment) {
  width: min(1600px, calc(100vw - 48px)) !important;
  max-width: 1600px !important;
}

body.home-template .kg-card.kg-html-card > section,
.kg-card.kg-html-card:has(.nppp-home-hero-card) > section,
.kg-card.kg-html-card:has(.nppp-home-section) > section,
.kg-card.kg-html-card:has(.nppp-home-testimonials) > section,
.kg-card.kg-html-card:has(.nppp-home-enrollment) > section {
  max-width: 1600px !important;
}

.nppp-home-card-wrap {
  max-width: 1560px !important;
}

/* Give video/app layouts more room without touching typography. */
.nppp-lesson-app,
.nppp-lesson-shell,
.nppp-video-shell,
.nppp-video-layout,
.nppp-dashboard-shell,
.nppp-dashboard-wrap {
  width: min(1680px, calc(100vw - 48px)) !important;
  max-width: 1680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  .container,
  body.home-template .kg-card.kg-html-card,
  .kg-card.kg-html-card:has(.nppp-home-hero-card),
  .kg-card.kg-html-card:has(.nppp-home-section),
  .kg-card.kg-html-card:has(.nppp-home-testimonials),
  .kg-card.kg-html-card:has(.nppp-home-enrollment),
  .nppp-lesson-app,
  .nppp-lesson-shell,
  .nppp-video-shell,
  .nppp-video-layout,
  .nppp-dashboard-shell,
  .nppp-dashboard-wrap {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* NPPP hide member-area newsletter footer v2 */
body.page-nppp-dashboard .nppp-footer-newsletter,
body.page-nppp-member-access .nppp-footer-newsletter,
body[class*="nppp-dashboard"] .nppp-footer-newsletter,
body[class*="member-access"] .nppp-footer-newsletter,
body[class*="academy"] .nppp-footer-newsletter,
body[class*="interview"] .nppp-footer-newsletter,
body[class*="community"] .nppp-footer-newsletter,
body[class*="resource"] .nppp-footer-newsletter,
body[class*="live"] .nppp-footer-newsletter,
body[class*="update"] .nppp-footer-newsletter {
  display: none !important;
}
/* END NPPP hide member-area newsletter footer v2 */

/* NPPP global layout rhythm v1 */
:root {
  --nppp-site-content-max: 1180px;
  --nppp-site-wide-max: 1480px;
  --nppp-site-dashboard-max: 1320px;
  --nppp-site-header-max: 1680px;
  --nppp-site-gutter: clamp(24px, 5.6vw, 88px);
  --nppp-site-mobile-gutter: clamp(18px, 5vw, 28px);
}

/* Keep the native theme title/hero out of the custom NPPP homepage.
   The homepage has its own first section. */
body.home-template .hero-area,
body.page-home .hero-area,
body[class*="page-home"] .hero-area,
body.home-template .page-hero,
body.page-home .page-hero,
body[class*="page-home"] .page-hero,
body.home-template .page-header,
body.page-home .page-header,
body[class*="page-home"] .page-header,
body.home-template .post-hero,
body.page-home .post-hero,
body[class*="page-home"] .post-hero {
  display: none !important;
}

/* Header uses the same responsive gutter rhythm as the page,
   while preserving the wider desktop header span for the menu. */
.nppp-header > .container,
.nppp-header .container {
  width: min(var(--nppp-site-header-max), calc(100vw - (var(--nppp-site-gutter) * 2))) !important;
  max-width: var(--nppp-site-header-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Standard NPPP page/card content rhythm. */
.nppp-home-transform-section,
.nppp-width-normal,
.nppp-width-page {
  width: min(var(--nppp-site-content-max), calc(100vw - (var(--nppp-site-gutter) * 2))) !important;
  max-width: var(--nppp-site-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Wider pages keep the same gutter rhythm. */
.nppp-width-wide,
.nppp-page-wide {
  width: min(var(--nppp-site-wide-max), calc(100vw - (var(--nppp-site-gutter) * 2))) !important;
  max-width: var(--nppp-site-wide-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Academy/dashboard pages keep their intended wider layout but follow the same rhythm. */
.nppp-width-dashboard,
.nppp-page-academy {
  width: min(var(--nppp-site-dashboard-max), calc(100vw - (var(--nppp-site-gutter) * 2))) !important;
  max-width: var(--nppp-site-dashboard-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Homepage first section spacing belongs to the theme, not the card patch. */
.nppp-home-transform-section.nppp-hero,
.nppp-home-transform-section .nppp-transform-hero {
  padding-top: clamp(56px, 7vw, 88px) !important;
}

@media (max-width: 760px) {
  .nppp-header > .container,
  .nppp-header .container,
  .nppp-home-transform-section,
  .nppp-width-normal,
  .nppp-width-page,
  .nppp-width-wide,
  .nppp-page-wide,
  .nppp-width-dashboard,
  .nppp-page-academy {
    width: calc(100vw - (var(--nppp-site-mobile-gutter) * 2)) !important;
  }
}
/* END NPPP global layout rhythm v1 */

/* NPPP homepage cinematic v5.4 */
:root {
  --nppp-home-cinema-text: #f3f7ff;
  --nppp-home-cinema-soft: rgba(214, 226, 245, .76);
  --nppp-home-cinema-muted: rgba(214, 226, 245, .52);
  --nppp-home-cinema-cyan: #56c7ff;
  --nppp-home-cinema-gutter: var(--nppp-site-gutter, clamp(24px, 5.6vw, 88px));
  --nppp-home-cinema-width: var(--nppp-site-content-max, 1180px);
}

#testimonials,
#enroll {
  scroll-margin-top: 120px;
}

.nppp-home-cinema-section,
.nppp-home-cinema-band-inner,
.nppp-home-cinema-hero-inner {
  color: var(--nppp-home-cinema-text);
}

.nppp-home-cinema-section {
  position: relative;
  isolation: isolate;
  width: min(var(--nppp-home-cinema-width), calc(100vw - (var(--nppp-home-cinema-gutter) * 2))) !important;
  max-width: var(--nppp-home-cinema-width) !important;
  margin-inline: auto !important;
  min-height: 74vh;
  padding-block: clamp(78px, 11.5vh, 150px);
  display: grid;
  align-items: center;
  overflow: visible;
}

.nppp-home-cinema-section.nppp-cinema-compact {
  min-height: 58vh;
}

.nppp-home-cinema-section.nppp-cinema-deep {
  min-height: 88vh;
}

.nppp-home-cinema-section > div:not(.nppp-home-cinema-ambient):not(.nppp-home-cinema-strip):not(.nppp-home-cinema-hero-inner):not(.nppp-home-cinema-band) {
  position: relative;
  z-index: 2;
}

.nppp-home-cinema-hero {
  position: relative;
  isolation: isolate;
  width: 100vw !important;
  max-width: none !important;
  min-height: 100vh;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0;
  overflow: hidden;
}

.nppp-home-cinema-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(90deg, rgba(5,8,17,.94) 0%, rgba(5,8,17,.75) 34%, rgba(5,8,17,.94) 100%),
    linear-gradient(180deg, rgba(5,8,17,.2) 0%, rgba(5,8,17,.7) 72%, #050811 100%),
    url("https://unsplash.com/photos/6PV8oMnZm1M/download?force=true&w=2600");
  background-size: cover;
  background-position: center;
  opacity: .44;
  filter: saturate(.9) contrast(1.06);
}

.nppp-home-cinema-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 38%, rgba(86,199,255,.13), transparent 26vw),
    radial-gradient(circle at 74% 28%, rgba(214,27,127,.09), transparent 28vw),
    linear-gradient(180deg, transparent 0%, #050811 96%);
  pointer-events: none;
}

.nppp-home-cinema-hero-inner {
  width: min(var(--nppp-home-cinema-width), calc(100vw - (var(--nppp-home-cinema-gutter) * 2)));
  min-height: 100vh;
  margin-inline: auto;
  display: grid;
  align-items: center;
  padding-block: clamp(120px, 15vh, 210px);
}

.nppp-home-cinema-hero-copy {
  max-width: 980px;
}

.nppp-home-cinema-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 28vh;
  z-index: -1;
  background: linear-gradient(180deg, transparent 0%, #050811 74%);
  pointer-events: none;
}

.nppp-home-cinema-kicker {
  margin: 0 0 20px;
  color: rgba(176, 218, 255, .78);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.nppp-home-cinema-section h1,
.nppp-home-cinema-section h2,
.nppp-home-cinema-hero h1,
.nppp-home-cinema-hero h2 {
  margin: 0;
  color: #fff;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.nppp-home-cinema-hero h1 {
  max-width: 980px;
  font-size: clamp(3.5rem, 8.5vw, 8.9rem);
  line-height: .86;
}

.nppp-home-cinema-section h2 {
  max-width: 980px;
  font-size: clamp(3rem, 7vw, 7.4rem);
  line-height: .88;
}

.nppp-home-cinema-lead {
  max-width: 780px;
  margin: clamp(22px, 3vh, 36px) 0 0;
  color: var(--nppp-home-cinema-soft);
  font-size: clamp(1.16rem, 1.75vw, 1.48rem);
  line-height: 1.62;
}

.nppp-home-cinema-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.nppp-home-cinema-ambient {
  position: absolute;
  z-index: -1;
  width: min(54vw, 760px);
  height: min(54vw, 660px);
  opacity: .34;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  filter: saturate(.82) contrast(1.02);
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle at 50% 50%, black 0%, black 34%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, black 34%, transparent 72%);
}

.nppp-home-cinema-ambient-left {
  left: max(-24vw, -380px);
  top: 12vh;
  opacity: .22;
}

.nppp-home-cinema-ambient-right {
  right: max(-20vw, -320px);
  top: 6vh;
}

.nppp-home-cinema-ambient-low-right {
  right: max(-22vw, -360px);
  bottom: 6vh;
}

.nppp-home-cinema-image-a {
  background-image: url("https://unsplash.com/photos/dvkargT0zeU/download?force=true&w=2200");
}

.nppp-home-cinema-image-b {
  background-image: url("https://unsplash.com/photos/M_sVROFzml4/download?force=true&w=2200");
}

.nppp-home-cinema-image-c {
  background-image: url("https://unsplash.com/photos/VHo3EorPjfc/download?force=true&w=2200");
}

.nppp-home-cinema-image-d {
  background-image: url("https://unsplash.com/photos/UG9LOi8BJWQ/download?force=true&w=2200");
}

.nppp-home-cinema-rule {
  width: min(180px, 34vw);
  height: 1px;
  margin: clamp(44px, 7vh, 88px) 0;
  background: linear-gradient(90deg, rgba(86,199,255,.45), rgba(214,27,127,.16), transparent);
}

.nppp-home-cinema-statement {
  max-width: 960px;
}

.nppp-home-cinema-statement p {
  margin: 0;
  color: #fff;
  font-size: clamp(2.05rem, 4.4vw, 5.1rem);
  line-height: .98;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.nppp-home-cinema-statement small {
  display: block;
  max-width: 760px;
  margin-top: clamp(28px, 5vh, 58px);
  color: var(--nppp-home-cinema-soft);
  font-size: clamp(1.08rem, 1.55vw, 1.3rem);
  line-height: 1.65;
}

.nppp-home-cinema-band {
  position: relative;
  width: 100vw;
  min-height: 74vh;
  margin-left: calc(50% - 50vw);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.nppp-home-cinema-band::before {
  content: "";
  position: absolute;
  inset: -18vh -10vw;
  background-image:
    linear-gradient(90deg, #050811 0%, rgba(5,8,17,.42) 32%, rgba(5,8,17,.42) 68%, #050811 100%),
    linear-gradient(180deg, #050811 0%, rgba(5,8,17,.18) 30%, rgba(5,8,17,.2) 68%, #050811 100%),
    url("https://unsplash.com/photos/M_sVROFzml4/download?force=true&w=2600");
  background-size: cover;
  background-position: center;
  opacity: .34;
  filter: saturate(.85) contrast(1.08);
  transform: scale(1.04);
  mask-image: linear-gradient(180deg, transparent 0%, black 24%, black 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 24%, black 72%, transparent 100%);
}

.nppp-home-cinema-band-inner {
  position: relative;
  width: min(var(--nppp-home-cinema-width), calc(100vw - (var(--nppp-home-cinema-gutter) * 2)));
  margin-inline: auto;
  padding-block: 18vh;
}

.nppp-home-cinema-floating-points,
.nppp-home-cinema-content-lane,
.nppp-home-testimonials-grid {
  display: grid;
  gap: clamp(24px, 4vw, 52px);
  margin-top: clamp(40px, 5.5vh, 72px);
}

.nppp-home-cinema-floating-points {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nppp-home-cinema-content-lane {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1040px;
}

.nppp-home-cinema-content-lane-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
}

.nppp-home-testimonials-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1100px;
}

.nppp-home-cinema-point,
.nppp-home-cinema-detail-note,
.nppp-home-cinema-thought,
.nppp-home-testimonial,
.nppp-home-enroll-panel {
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.nppp-home-cinema-point h3,
.nppp-home-cinema-detail-note strong,
.nppp-home-cinema-thought h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.nppp-home-cinema-point p,
.nppp-home-cinema-detail-note,
.nppp-home-cinema-thought p {
  margin: 0;
  color: var(--nppp-home-cinema-soft);
  line-height: 1.68;
}

.nppp-home-cinema-detail-note,
.nppp-home-testimonial,
.nppp-home-enroll-panel {
  position: relative;
  padding-left: 18px;
}

.nppp-home-cinema-detail-note::before,
.nppp-home-testimonial::before,
.nppp-home-enroll-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  bottom: .35em;
  width: 1px;
  background: linear-gradient(180deg, rgba(86,199,255,.55), rgba(214,27,127,.22), transparent);
}

.nppp-home-cinema-detail-note strong {
  display: block;
}

.nppp-home-cinema-spaced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(42px, 7vw, 92px);
  align-items: start;
  margin-top: clamp(40px, 5.5vh, 72px);
}

.nppp-home-cinema-thought {
  max-width: 520px;
}

.nppp-home-testimonial-photo {
  width: 66px;
  height: 66px;
  display: block;
  margin: 0 0 18px;
  border-radius: 999px;
  object-fit: cover;
  opacity: .9;
  filter: saturate(.88) contrast(1.05);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

.nppp-home-testimonial blockquote {
  margin: 0;
  color: rgba(243,247,255,.86);
  font-size: clamp(1.05rem, 1.35vw, 1.24rem);
  line-height: 1.58;
  letter-spacing: -.012em;
}

.nppp-home-testimonial-name {
  margin: 24px 0 0;
  color: #fff;
  font-weight: 900;
  line-height: 1.2;
}

.nppp-home-testimonial-role,
.nppp-home-testimonials-loading {
  margin: 6px 0 0;
  color: rgba(214,226,245,.56);
  font-size: .92rem;
  line-height: 1.4;
}

.nppp-home-enroll-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(34px, 6vw, 90px);
  align-items: center;
}

.nppp-home-enroll-label {
  margin: 0 0 14px;
  color: rgba(176,218,255,.78);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nppp-home-enroll-price {
  margin: 0;
  color: #fff;
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 950;
}

.nppp-home-enroll-copy {
  margin: 22px 0 0;
  color: var(--nppp-home-cinema-soft);
  line-height: 1.65;
}

.nppp-home-enroll-note {
  margin: 22px 0 0;
  color: rgba(214,226,245,.48);
  font-size: .9rem;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .nppp-home-cinema-section {
    min-height: auto;
    padding-block: clamp(96px, 16vh, 160px);
  }

  .nppp-home-cinema-hero-inner {
    padding-top: 150px;
  }

  .nppp-home-cinema-spaced-grid,
  .nppp-home-cinema-floating-points,
  .nppp-home-cinema-content-lane,
  .nppp-home-cinema-content-lane-two,
  .nppp-home-testimonials-grid,
  .nppp-home-enroll-layout {
    grid-template-columns: 1fr;
  }

  .nppp-home-cinema-ambient {
    width: 90vw;
    height: 70vw;
    opacity: .22;
  }

  .nppp-home-cinema-ambient-right,
  .nppp-home-cinema-ambient-low-right {
    right: -45vw;
  }

  .nppp-home-cinema-ambient-left {
    left: -45vw;
  }
}

@media (max-width: 640px) {
  .nppp-home-cinema-hero h1 {
    font-size: clamp(3rem, 15vw, 5.2rem);
  }

  .nppp-home-cinema-section h2 {
    font-size: clamp(2.65rem, 13vw, 4.8rem);
  }

  .nppp-home-cinema-lead {
    font-size: 1.08rem;
  }
}


/* NPPP homepage testimonial intro right panel v5.4.1 */
.nppp-home-testimonials-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: clamp(34px, 6vw, 90px);
  align-items: start;
  max-width: 1100px;
}

.nppp-home-testimonials-copy {
  min-width: 0;
}

.nppp-home-submit-testimonial-panel {
  margin-top: .35rem;
}

.nppp-home-submit-testimonial-panel p {
  margin: 0;
  color: var(--nppp-home-cinema-soft);
  line-height: 1.64;
}

.nppp-home-submit-testimonial-panel .nppp-home-cinema-actions {
  margin-top: 22px;
}

.nppp-home-submit-testimonial-note {
  margin-top: 22px !important;
  color: rgba(214,226,245,.48) !important;
  font-size: .9rem;
  line-height: 1.5 !important;
}

@media (max-width: 980px) {
  .nppp-home-testimonials-intro {
    grid-template-columns: 1fr;
  }

  .nppp-home-submit-testimonial-panel {
    margin-top: 0;
  }
}
/* END NPPP homepage testimonial intro right panel v5.4.1 */



/* NPPP homepage statement title brightness v5.4.2 */
.nppp-home-cinema-statement p {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 950;
  text-shadow: 0 0 22px rgba(86, 199, 255, 0.08);
}

.nppp-home-cinema-statement small {
  opacity: 1 !important;
}
/* END NPPP homepage statement title brightness v5.4.2 */

/* END NPPP homepage cinematic v5.4 */