@charset "UTF-8";
/* =============================================================
   KAJABI NINJA — Theme stylesheet
   Brand tokens + section rhythm + preset/block styles.
   Everything color/font/spacing-driven from settings_schema.json.

   STEP 1 (Foundation): tokens, rhythm utilities, baseline typography.
   STEP 2+: header/footer styles + per-preset/per-block styles appended below.
============================================================= */
/* ---------- Brand tokens (read from global settings) ---------- */
:root {
  /* Brand colors */
  --kn-accent: #F1FB72;
  --kn-dark-bg: #1c1920;
  --kn-dark-text: #ffffff;
  --kn-dark-text-secondary: rgba(255, 255, 255, 0.65);
  --kn-dark-text-muted: rgba(255, 255, 255, 0.45);
  --kn-dark-border: rgba(255, 255, 255, 0.08);
  --kn-dark-surface: rgba(255, 255, 255, 0.04);
  --kn-dark-surface-hover: rgba(255, 255, 255, 0.06);
  --kn-light-bg: #ffffff;
  --kn-light-text: #1c1920;
  --kn-light-text-secondary: #6b6873;
  --kn-light-border: rgba(28, 25, 32, 0.08);
  --kn-light-surface: rgba(28, 25, 32, 0.02);
  --kn-light-surface-hover: rgba(28, 25, 32, 0.04);
  /* Typography */
  --kn-font-body: DM Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kn-font-heading: Playfair Display, Georgia, "Times New Roman", serif;
  /* Spacing rhythm */
  --kn-pad-section-y-desktop: 100px;
  --kn-pad-section-y-mobile: 60px;
  --kn-pad-section-x: 24px;
  --kn-gap-stack-sm: 12px;
  --kn-gap-stack: 20px;
  --kn-gap-stack-lg: 32px;
  --kn-gap-grid: 24px;
  /* Radii */
  --kn-radius-btn: 6px;
  --kn-radius-card: 12px;
  --kn-radius-card-lg: 16px;
  --kn-radius-pill: 999px;
  /* Shadows */
  --kn-shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --kn-shadow-card-hover: 0 4px 8px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.08);
  --kn-shadow-card-dark: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.4);
  --kn-shadow-nav: 0 4px 24px rgba(0,0,0,0.06);
  /* Motion */
  --kn-trans-fast: 150ms ease;
  --kn-trans: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --kn-trans-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); }

/* ---------- Baseline typography ---------- */
body {
  font-family: var(--kn-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kn-font-heading);
  font-weight: 700;
  letter-spacing: -0.02em; }

/* Italic emphasis inside headings — Playfair Display italic */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
  font-style: italic;
  font-weight: 400; }

/* ---------- Section dark/light rhythm ----------
   Kajabi emits .background-{scheme-class} on every .section wrapper
   based on the section's background_color setting. We hook into that.
   When user picks a dark color, .background-dark is applied automatically.
*/
.section.background-dark,
.section[data-kn-scheme="dark"] {
  background-color: var(--kn-dark-bg);
  color: var(--kn-dark-text); }

.section.background-dark h1,
.section.background-dark h2,
.section.background-dark h3,
.section.background-dark h4,
.section.background-dark h5,
.section.background-dark h6 {
  color: var(--kn-dark-text); }

.section.background-dark p,
.section.background-dark li {
  color: var(--kn-dark-text-secondary); }

.section.background-dark a {
  color: var(--kn-accent); }

.section.background-light,
.section[data-kn-scheme="light"] {
  background-color: var(--kn-light-bg);
  color: var(--kn-light-text); }

/* ---------- KN utility classes (reused across all presets) ---------- */
.kn-eyebrow {
  display: inline-block;
  font-family: var(--kn-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--kn-radius-pill);
  background: rgba(241, 251, 114, 0.12);
  color: var(--kn-accent);
  margin-bottom: 20px;
  border: 1px solid rgba(241, 251, 114, 0.2); }

.section.background-light .kn-eyebrow {
  background: rgba(28, 25, 32, 0.04);
  color: var(--kn-light-text);
  border-color: rgba(28, 25, 32, 0.06); }

/* Inline accent underline — the signature Kajabi Ninja text highlight */
.kn-accent-underline {
  font-style: italic;
  background-image: linear-gradient(to right, var(--kn-accent), var(--kn-accent));
  background-position: 0 92%;
  background-size: 100% 6px;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  font-weight: 600; }

/* ---------- Button polish on top of Kajabi default .btn ---------- */
.btn {
  font-family: var(--kn-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--kn-radius-btn);
  transition: transform var(--kn-trans-fast), box-shadow var(--kn-trans-fast), background var(--kn-trans-fast); }

.btn:hover {
  transform: translateY(-1px); }

.btn--primary,
.btn-primary {
  background: var(--kn-accent);
  color: var(--kn-dark-bg);
  border: none; }

.btn--primary:hover,
.btn-primary:hover {
  background: var(--kn-accent);
  filter: brightness(1.05);
  box-shadow: 0 8px 20px rgba(241, 251, 114, 0.25); }

/* ---------- Editor-only helpers ---------- */
/* When a section is hidden in the editor preview, keep it visible
   as a faded placeholder so the user knows it exists. */
.editor .section.hidden--preview-only {
  opacity: 0.4; }

/* =============================================================
   PER-PRESET / PER-BLOCK STYLES
============================================================= */
/* =============================================================
   HEADER — floating pill nav
   Driven by scoped vars on .kn-nav-wrap[data-kn-section="N"]
   Per-section colors set via inline <style> in header.liquid.
============================================================= */
.kn-nav-wrap {
  position: relative;
  width: 100%;
  z-index: 1000;
  pointer-events: none; }

.kn-nav-wrap--sticky {
  position: sticky;
  top: 16px; }

.kn-nav-wrap > * {
  pointer-events: auto; }

.kn-nav {
  margin: 16px auto 0;
  max-width: var(--kn-nav-max-width, 1080px);
  padding: 0 16px;
  transition: background-color var(--kn-trans), color var(--kn-trans); }

.kn-nav-inner {
  background: var(--kn-nav-bg);
  color: var(--kn-nav-text);
  border-radius: var(--kn-radius-pill);
  padding: 10px 18px;
  box-shadow: var(--kn-shadow-nav);
  backdrop-filter: blur(var(--kn-nav-blur, 12px));
  -webkit-backdrop-filter: blur(var(--kn-nav-blur, 12px));
  transition: background-color var(--kn-trans), color var(--kn-trans), box-shadow var(--kn-trans);
  border: 1px solid var(--kn-light-border); }

/* Scrolled state — KN module toggles .is-scrolled on the wrap */
.kn-nav-wrap.is-scrolled .kn-nav-inner {
  background: var(--kn-nav-bg-scrolled);
  color: var(--kn-nav-text-scrolled);
  border-color: var(--kn-dark-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); }

.kn-nav-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px; }

.kn-nav-zone {
  display: flex;
  align-items: center;
  gap: 8px; }

.kn-nav-zone--left {
  flex: 0 0 auto;
  margin-right: auto; }

.kn-nav-zone--center {
  flex: 1 1 auto;
  justify-content: center;
  gap: 24px; }

.kn-nav-zone--right {
  flex: 0 0 auto;
  margin-left: auto;
  gap: 12px; }

.kn-nav-wrap a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: opacity var(--kn-trans-fast); }

.kn-nav-wrap a:hover {
  opacity: 0.7; }

.kn-nav-logo .logo__image {
  display: block;
  max-height: 32px;
  width: auto; }

.kn-nav-logo .logo__text {
  margin: 0;
  font-weight: 700; }

.kn-nav-menu .link-list,
.kn-nav-menu ul {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none; }

/* Nav CTA button override */
.kn-nav-cta-wrap .btn,
.kn-nav-cta-wrap a.btn {
  background: var(--kn-accent);
  color: var(--kn-dark-bg);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--kn-radius-pill);
  border: none; }

.kn-nav-wrap.is-scrolled .kn-nav-cta-wrap .btn {
  background: var(--kn-accent);
  color: var(--kn-dark-bg); }

/* Mobile burger — hidden on desktop, always visible mobile */
.kn-burger {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px; }

.kn-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--kn-trans-fast), opacity var(--kn-trans-fast); }

.kn-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg); }

.kn-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0; }

.kn-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg); }

/* Mobile overlay menu */
.kn-mobile-menu {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 24px 8px 12px;
  border-top: 1px solid var(--kn-light-border);
  margin-top: 12px; }

.kn-nav-wrap.is-scrolled .kn-mobile-menu {
  border-top-color: var(--kn-dark-border); }

.kn-mobile-menu[data-kn-mobile-menu]:not([hidden]) {
  display: flex; }

.kn-mobile-menu .link-list,
.kn-mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none; }

.kn-mobile-menu a {
  font-size: 18px;
  font-weight: 500; }

@media (max-width: 1000px) {
  .kn-burger {
    display: flex; }

  .kn-nav-zone--center {
    display: none; }

  .kn-nav-cta-wrap {
    display: none; }

  .kn-nav-zone--left {
    margin-right: auto; } }
/* =============================================================
   HEADER — announcement bar
============================================================= */
.kn-announcement-stack {
  width: 100%; }

.kn-announcement {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: max-height var(--kn-trans-slow), opacity var(--kn-trans), padding var(--kn-trans);
  overflow: hidden; }

.kn-announcement.is-dismissed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0; }

.kn-announcement__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 48px 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center; }

.kn-announcement__text {
  margin: 0;
  line-height: 1.4; }

.kn-announcement__link {
  margin-left: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600; }

.kn-announcement__dismiss {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--kn-trans-fast); }

.kn-announcement__dismiss:hover {
  opacity: 1; }

/* =============================================================
   FOOTER — minimal centered
============================================================= */
.kn-footer {
  background: var(--kn-footer-bg);
  color: var(--kn-footer-text);
  padding: 56px 24px 40px;
  text-align: center; }

.kn-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center; }

.kn-footer__logo-row,
.kn-footer__nav-row,
.kn-footer__copyright-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px; }

.kn-footer__logo .logo__image {
  max-height: 40px;
  width: auto; }

.kn-footer__copyright,
.kn-footer__copyright .footer-block__copyright,
.kn-footer__copyright p {
  margin: 0;
  color: var(--kn-footer-secondary);
  font-size: 14px; }

.kn-footer__copyright a {
  color: var(--kn-footer-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor; }

.kn-footer__nav-row a {
  color: var(--kn-footer-text);
  text-decoration: none;
  font-size: 14px; }

.kn-footer__nav-row a:hover {
  color: var(--kn-accent); }

/* =============================================================
   KN HERO BLOCK
   The hero lives inside Kajabi's standard .section > .row > .block
   wrapper. We make it feel full-bleed via min-height + position
   relative, and constrain text via .kn-hero__container.
============================================================= */
/* The block dispatcher (block.liquid) gives us .block-type--kn_hero
   on the parent .col-* wrapper. Strip its inner padding so the hero
   can manage its own space. */
.block-type--kn_hero > .block {
  padding: 0;
  background: transparent !important;
  box-shadow: none !important; }

.kn-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  isolation: isolate;
  /* keeps spotlight gradient from bleeding into siblings */
  --kn-mx: 50%;
  --kn-my: 40%; }

.kn-hero__spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle var(--kn-hero-spot-size, 600px) at var(--kn-mx) var(--kn-my), var(--kn-hero-spot-color, rgba(241, 251, 114, 0.1)), transparent 60%);
  transition: opacity var(--kn-trans-slow);
  z-index: 0; }

@media (hover: none) {
  /* No mouse on touch devices — show a static centered glow as a fallback */
  .kn-hero__spotlight {
    background: radial-gradient(circle var(--kn-hero-spot-size, 600px) at 50% 30%, var(--kn-hero-spot-color, rgba(241, 251, 114, 0.08)), transparent 60%); } }
.kn-hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px; }

.kn-hero--center .kn-hero__container {
  text-align: center;
  align-items: center; }

/* Eyebrow row */
.kn-hero__eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start; }

.kn-hero--center .kn-hero__eyebrow-row {
  align-self: center; }

.kn-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kn-accent);
  box-shadow: 0 0 0 4px rgba(241, 251, 114, 0.15);
  animation: kn-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0; }

@keyframes kn-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(241, 251, 114, 0.15);
    transform: scale(1); }
  50% {
    box-shadow: 0 0 0 8px rgba(241, 251, 114, 0.05);
    transform: scale(1.1); } }
.kn-hero__eyebrow {
  font-family: var(--kn-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kn-dark-text-secondary); }

.section.background-light .kn-hero__eyebrow {
  color: var(--kn-light-text-secondary); }

/* Headline */
.kn-hero__headline,
.kn-hero__headline h1,
.kn-hero__headline h2 {
  font-family: var(--kn-font-heading);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: inherit; }

.kn-hero__headline h1 {
  font-size: clamp(40px, 6vw, 72px);
  margin: 0; }

.kn-hero__headline h2 {
  font-size: clamp(32px, 5vw, 56px);
  margin: 0; }

/* The accent underline magic: any <em> inside hero headline gets the signature highlight */
.kn-hero__headline em,
.kn-hero__headline i {
  font-style: italic;
  font-weight: 400;
  background-image: linear-gradient(to right, var(--kn-accent), var(--kn-accent));
  background-position: 0 92%;
  background-size: 100% 8px;
  background-repeat: no-repeat;
  padding-bottom: 4px; }

/* Subheadline */
.kn-hero__sub,
.kn-hero__sub p {
  font-family: var(--kn-font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--kn-dark-text-secondary);
  max-width: 620px;
  margin: 0; }

.section.background-light .kn-hero__sub,
.section.background-light .kn-hero__sub p {
  color: var(--kn-light-text-secondary); }

.kn-hero--center .kn-hero__sub {
  margin: 0 auto; }

/* CTA row */
.kn-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 8px; }

.kn-hero--center .kn-hero__ctas {
  justify-content: center; }

.kn-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--kn-font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border-radius: var(--kn-radius-btn);
  text-decoration: none;
  transition: transform var(--kn-trans-fast), box-shadow var(--kn-trans-fast), background var(--kn-trans-fast);
  cursor: pointer; }

.kn-hero__btn--primary {
  background: var(--kn-accent);
  color: var(--kn-dark-bg);
  border: 1px solid var(--kn-accent); }

.kn-hero__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(241, 251, 114, 0.25);
  filter: brightness(1.05); }

.kn-hero__btn--primary .kn-hero__btn-arrow {
  transition: transform var(--kn-trans-fast); }

.kn-hero__btn--primary:hover .kn-hero__btn-arrow {
  transform: translateX(3px); }

.kn-hero__btn--ghost {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18); }

.section.background-light .kn-hero__btn--ghost {
  border-color: rgba(28, 25, 32, 0.18); }

.kn-hero__btn--ghost:hover {
  background: var(--kn-dark-surface-hover);
  transform: translateY(-1px); }

.section.background-light .kn-hero__btn--ghost:hover {
  background: var(--kn-light-surface-hover); }

/* Trust line */
.kn-hero__trust {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--kn-dark-text-muted);
  flex-wrap: wrap; }

.section.background-light .kn-hero__trust {
  color: var(--kn-light-text-secondary); }

.kn-hero--center .kn-hero__trust {
  justify-content: center; }

.kn-hero__trust-img {
  max-height: 32px;
  width: auto;
  display: block; }

.kn-hero__trust-text {
  display: inline; }

.kn-hero__trust-link {
  color: var(--kn-accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  margin-left: 4px; }

.kn-hero__trust-link:hover {
  opacity: 0.8; }

@media (max-width: 767px) {
  .kn-hero__container {
    padding: 0 20px;
    gap: 20px; }

  .kn-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px; }

  .kn-hero--center .kn-hero__ctas {
    align-items: center; }

  .kn-hero__btn {
    justify-content: center; }

  .kn-hero__trust {
    font-size: 13px; } }
/* =============================================================
   KN BLOCK: trust item
============================================================= */
.kn-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 16px 12px;
  min-height: 80px;
  border-left: 1px solid var(--kn-dark-border);
  color: inherit; }

.section.background-light .kn-trust-item {
  border-left-color: var(--kn-light-border); }

/* Strip out border on first item across the row */
.block-type--kn_trust_item:first-child .kn-trust-item {
  border-left: none; }

.kn-trust-item__num {
  font-family: var(--kn-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: inherit; }

.kn-trust-item__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kn-dark-text-secondary);
  font-weight: 500; }

.section.background-light .kn-trust-item__label {
  color: var(--kn-light-text-secondary); }

.kn-trust-item__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--kn-accent); }

.kn-trust-item__star {
  width: 18px;
  height: 18px;
  display: inline-block; }

.kn-trust-item__star svg {
  width: 100%;
  height: 100%; }

.kn-trust-item__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--kn-radius-pill);
  background: rgba(241, 251, 114, 0.1);
  border: 1px solid rgba(241, 251, 114, 0.25);
  color: var(--kn-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em; }

.kn-trust-item__badge-glyph {
  color: var(--kn-accent); }

/* =============================================================
   KN BLOCK: symptom card
============================================================= */
.kn-symptom-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  background: var(--kn-light-bg);
  border-radius: var(--kn-radius-card);
  border: 1px solid var(--kn-light-border);
  color: var(--kn-light-text);
  box-shadow: var(--kn-shadow-card);
  transition: transform var(--kn-trans), box-shadow var(--kn-trans), border-color var(--kn-trans); }

.kn-symptom-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--kn-shadow-card-hover);
  border-color: rgba(28, 25, 32, 0.18); }

/* On dark sections, invert the card */
.section.background-dark .kn-symptom-card {
  background: var(--kn-dark-surface);
  border-color: var(--kn-dark-border);
  color: var(--kn-dark-text);
  box-shadow: var(--kn-shadow-card-dark); }

.kn-symptom-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px; }

.kn-symptom-card__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(28, 25, 32, 0.05);
  color: var(--kn-light-text); }

.section.background-dark .kn-symptom-card__icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--kn-dark-text); }

.kn-symptom-card__icon svg {
  width: 20px;
  height: 20px; }

.kn-symptom-card__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--kn-radius-pill);
  background: var(--kn-symptom-tag-bg, #ef4444);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase; }

.kn-symptom-card__headline {
  font-family: var(--kn-font-heading);
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
  color: inherit; }

.kn-symptom-card__body {
  margin: 0;
  line-height: 1.6;
  color: var(--kn-light-text-secondary); }

.section.background-dark .kn-symptom-card__body {
  color: var(--kn-dark-text-secondary); }

.kn-symptom-card__checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--kn-light-text-secondary); }

.section.background-dark .kn-symptom-card__checks {
  color: var(--kn-dark-text-secondary); }

.kn-symptom-card__checks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5; }

.kn-symptom-card__chk {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--kn-accent);
  color: var(--kn-dark-bg);
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px; }

.kn-symptom-card__fix {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--kn-light-border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px; }

.section.background-dark .kn-symptom-card__fix {
  border-top-color: var(--kn-dark-border); }

.kn-symptom-card__fix-arrow {
  color: var(--kn-accent);
  font-weight: 700; }

.kn-symptom-card__fix-link {
  color: inherit;
  text-decoration: none;
  font-weight: 500; }

/* =============================================================
   KN BLOCK: service card
============================================================= */
.kn-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  background: var(--kn-light-bg);
  border-radius: var(--kn-radius-card);
  border: 1px solid var(--kn-light-border);
  color: var(--kn-light-text);
  box-shadow: var(--kn-shadow-card);
  transition: transform var(--kn-trans), box-shadow var(--kn-trans); }

.section.background-dark .kn-service-card {
  background: var(--kn-dark-surface);
  border-color: var(--kn-dark-border);
  color: var(--kn-dark-text);
  box-shadow: var(--kn-shadow-card-dark); }

.kn-service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--kn-shadow-card-hover); }

.kn-service-card--featured {
  border-color: var(--kn-accent);
  box-shadow: 0 0 0 1px var(--kn-accent), 0 12px 32px rgba(241, 251, 114, 0.18); }

.kn-service-card--featured:hover {
  box-shadow: 0 0 0 1px var(--kn-accent), 0 16px 40px rgba(241, 251, 114, 0.24); }

.kn-service-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--kn-accent);
  color: var(--kn-dark-bg);
  padding: 6px 14px;
  border-radius: var(--kn-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap; }

.kn-service-card__tier {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kn-accent); }

.kn-service-card__headline {
  font-family: var(--kn-font-heading);
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.015em;
  color: inherit; }

.kn-service-card__tagline {
  margin: 0;
  font-style: italic;
  font-size: 15px;
  color: var(--kn-light-text-secondary);
  line-height: 1.4; }

.section.background-dark .kn-service-card__tagline {
  color: var(--kn-dark-text-secondary); }

.kn-service-card__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--kn-light-text-secondary); }

.section.background-dark .kn-service-card__body {
  color: var(--kn-dark-text-secondary); }

.kn-service-card__features {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--kn-light-text-secondary); }

.section.background-dark .kn-service-card__features {
  color: var(--kn-dark-text-secondary); }

.kn-service-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45; }

.kn-service-card__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kn-accent);
  margin-top: 7px; }

.kn-service-card__price {
  font-family: var(--kn-font-heading);
  font-size: 18px;
  font-weight: 700;
  margin-top: auto;
  padding-top: 8px;
  color: inherit; }

.kn-service-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--kn-radius-btn);
  border: 1px solid var(--kn-light-border);
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--kn-trans-fast), background var(--kn-trans-fast); }

.section.background-dark .kn-service-card__btn {
  border-color: var(--kn-dark-border); }

.kn-service-card__btn:hover {
  background: var(--kn-light-surface-hover);
  transform: translateY(-1px); }

.section.background-dark .kn-service-card__btn:hover {
  background: var(--kn-dark-surface-hover); }

.kn-service-card__btn--primary {
  background: var(--kn-accent);
  color: var(--kn-dark-bg);
  border-color: var(--kn-accent); }

.kn-service-card__btn--primary:hover {
  background: var(--kn-accent);
  filter: brightness(1.05);
  box-shadow: 0 8px 20px rgba(241, 251, 114, 0.25); }

.kn-service-card__arrow {
  transition: transform var(--kn-trans-fast); }

.kn-service-card__btn:hover .kn-service-card__arrow {
  transform: translateX(3px); }

/* =============================================================
   KN BLOCK: process step
============================================================= */
.kn-process-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  background: transparent;
  border-radius: var(--kn-radius-card);
  padding: 24px 20px;
  position: relative; }

.kn-process-step__num {
  font-family: var(--kn-font-heading);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--kn-accent);
  letter-spacing: -0.04em;
  -webkit-text-stroke: 1px var(--kn-accent); }

.section.background-light .kn-process-step__num {
  color: transparent;
  -webkit-text-stroke: 1px var(--kn-light-text);
  text-stroke: 1px var(--kn-light-text);
  opacity: 0.18; }

.kn-process-step__week {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kn-accent);
  padding: 3px 10px;
  border-radius: var(--kn-radius-pill);
  background: rgba(241, 251, 114, 0.1);
  align-self: flex-start; }

.kn-process-step__body {
  display: flex;
  flex-direction: column;
  gap: 10px; }

.kn-process-step__headline {
  font-family: var(--kn-font-heading);
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  color: inherit; }

.kn-process-step__copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--kn-light-text-secondary); }

.section.background-dark .kn-process-step__copy {
  color: var(--kn-dark-text-secondary); }

.kn-process-step__del {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--kn-light-border);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--kn-light-text-secondary); }

.section.background-dark .kn-process-step__del {
  border-top-color: var(--kn-dark-border);
  color: var(--kn-dark-text-secondary); }

.kn-process-step__del-arrow {
  color: var(--kn-accent);
  font-weight: 700; }

/* =============================================================
   KN BLOCK: stat
============================================================= */
.kn-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center; }

.kn-stat__num {
  font-family: var(--kn-font-heading);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--kn-accent); }

.section.background-light .kn-stat__num {
  color: var(--kn-light-text); }

.kn-stat__label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--kn-dark-text-secondary); }

.section.background-light .kn-stat__label {
  color: var(--kn-light-text-secondary); }

/* =============================================================
   KN BLOCK: review card
============================================================= */
.kn-review-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  background: var(--kn-dark-surface);
  border-radius: var(--kn-radius-card);
  border: 1px solid var(--kn-dark-border);
  color: var(--kn-dark-text); }

.section.background-light .kn-review-card {
  background: var(--kn-light-bg);
  border-color: var(--kn-light-border);
  color: var(--kn-light-text);
  box-shadow: var(--kn-shadow-card); }

.kn-review-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--kn-accent); }

.kn-review-card__star {
  width: 16px;
  height: 16px;
  display: inline-block; }

.kn-review-card__star svg {
  width: 100%;
  height: 100%; }

.kn-review-card__quote,
.kn-review-card__quote p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: inherit;
  font-style: italic; }

.kn-review-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 4px; }

.kn-review-card__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(241, 251, 114, 0.12);
  border: 1px solid var(--kn-dark-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }

.section.background-light .kn-review-card__avatar {
  border-color: var(--kn-light-border); }

.kn-review-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.kn-review-card__avatar-fallback {
  color: var(--kn-accent);
  font-size: 18px; }

.kn-review-card__id {
  flex: 1 1 auto;
  min-width: 0; }

.kn-review-card__name {
  font-weight: 600;
  font-size: 14px; }

.kn-review-card__role {
  font-size: 12px;
  color: var(--kn-dark-text-secondary); }

.section.background-light .kn-review-card__role {
  color: var(--kn-light-text-secondary); }

.kn-review-card__platform {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--kn-dark-border);
  color: var(--kn-dark-text-secondary);
  font-weight: 500;
  flex-shrink: 0; }

.section.background-light .kn-review-card__platform {
  background: var(--kn-light-surface);
  border-color: var(--kn-light-border);
  color: var(--kn-light-text-secondary); }

/* =============================================================
   KN BLOCK: identity (avatar + name + role inline)
============================================================= */
.kn-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center; }

.kn-identity__avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(241, 251, 114, 0.1);
  border: 2px solid var(--kn-accent);
  display: flex;
  align-items: center;
  justify-content: center; }

.kn-identity__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.kn-identity__avatar-fallback {
  color: var(--kn-accent);
  font-size: 24px; }

.kn-identity__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left; }

.kn-identity__name {
  font-family: var(--kn-font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: inherit; }

.kn-identity__role {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--kn-light-text-secondary); }

.section.background-dark .kn-identity__role {
  color: var(--kn-dark-text-secondary); }

/* =============================================================
   KN BLOCK: how-it-works item
============================================================= */
.kn-hiw-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  align-items: center;
  height: 100%; }

.kn-hiw-item__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(241, 251, 114, 0.12);
  border: 1px solid rgba(241, 251, 114, 0.25);
  color: var(--kn-accent); }

.kn-hiw-item__icon svg {
  width: 22px;
  height: 22px; }

.kn-hiw-item__headline {
  font-family: var(--kn-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: inherit; }

.kn-hiw-item__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--kn-light-text-secondary);
  display: block; }

.section.background-dark .kn-hiw-item__body {
  color: var(--kn-dark-text-secondary); }

/* =============================================================
   KN BLOCK: CTA card
============================================================= */
.kn-cta-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(241, 251, 114, 0.06), rgba(241, 251, 114, 0.02));
  border: 1px solid rgba(241, 251, 114, 0.18);
  border-radius: var(--kn-radius-card-lg);
  color: inherit;
  position: relative; }

.section.background-light .kn-cta-card {
  background: linear-gradient(180deg, rgba(28, 25, 32, 0.02), rgba(28, 25, 32, 0.04));
  border-color: var(--kn-light-border); }

.kn-cta-card__label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kn-accent);
  padding: 5px 12px;
  border-radius: var(--kn-radius-pill);
  background: rgba(241, 251, 114, 0.1); }

.kn-cta-card__headline,
.kn-cta-card__headline h3 {
  font-family: var(--kn-font-heading);
  font-size: 32px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
  color: inherit; }

.kn-cta-card__body,
.kn-cta-card__body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--kn-dark-text-secondary);
  max-width: 540px; }

.section.background-light .kn-cta-card__body {
  color: var(--kn-light-text-secondary); }

.kn-cta-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--kn-accent);
  color: var(--kn-dark-bg);
  border-radius: var(--kn-radius-btn);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform var(--kn-trans-fast), box-shadow var(--kn-trans-fast);
  margin-top: 6px; }

.kn-cta-card__btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 8px 24px rgba(241, 251, 114, 0.25); }

.kn-cta-card__arrow {
  transition: transform var(--kn-trans-fast); }

.kn-cta-card__btn:hover .kn-cta-card__arrow {
  transform: translateX(3px); }

.kn-cta-card__note {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--kn-dark-text-muted); }

.section.background-light .kn-cta-card__note {
  color: var(--kn-light-text-secondary); }

/* =============================================================
   PRESET-WRAPPER STYLES
   Driven by section.settings.kn_preset_class → emitted on the
   .section wrapper. Lets us scope CSS to a specific preset
   even after the user customizes inside it.
============================================================= */
/* Standard headline rhythm for any KN preset with a top text intro */
.section[class*="kn-preset--"] .container h2 {
  font-family: var(--kn-font-heading);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 16px 0 16px; }

.section[class*="kn-preset--"] .container h2 em,
.section[class*="kn-preset--"] .container h2 i {
  font-style: italic;
  background-image: linear-gradient(to right, var(--kn-accent), var(--kn-accent));
  background-position: 0 92%;
  background-size: 100% 6px;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  font-weight: 600; }

/* --- KN Trust Strip --- */
.kn-preset--trust-strip .row {
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0; }

@media (max-width: 767px) {
  .kn-preset--trust-strip .row {
    flex-wrap: wrap; } }
/* --- KN Problem Grid: match card heights across the row --- */
.kn-preset--problem-grid .row {
  align-items: stretch; }

.kn-preset--problem-grid .block-type--kn_symptom_card > .block,
.kn-preset--services .block-type--kn_service_card > .block,
.kn-preset--reviews-grid .block-type--kn_review_card > .block,
.kn-preset--process .block-type--kn_process_step > .block,
.kn-preset--hiw .block-type--kn_hiw_item > .block {
  height: 100%; }

/* --- KN Capacity: dramatic big-number styling --- */
.kn-preset--capacity .kn-preset--capacity__big-num {
  font-family: var(--kn-font-heading);
  font-size: clamp(80px, 10vw, 144px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--kn-accent);
  margin: 0 0 16px; }

.kn-preset--capacity h2 {
  font-size: clamp(36px, 5vw, 56px) !important;
  margin-top: 8px !important; }

/* --- KN FAQ Split: sticky left intro on desktop --- */
@media (min-width: 1024px) {
  .kn-preset--faq-split .row {
    align-items: flex-start; }

  .kn-preset--faq-split .block-type--text:first-child {
    position: sticky;
    top: 100px; } }
/* --- KN Reviews Grid: tighter padding above (chains with Results Stats) --- */
.kn-preset--reviews-grid .row {
  row-gap: 24px; }

/* --- KN Final CTA: center the CTA card --- */
.kn-preset--final-cta .row {
  justify-content: center; }

.kn-preset--final-cta .block-type--kn_cta_card {
  margin: 16px auto; }

/* =============================================================
   Reset block dispatcher wrapper for KN blocks that manage their own padding
============================================================= */
.block-type--kn_hero > .block,
.block-type--kn_trust_item > .block,
.block-type--kn_stat > .block,
.block-type--kn_identity > .block,
.block-type--kn_process_step > .block,
.block-type--kn_hiw_item > .block {
  padding: 0;
  background: transparent !important;
  box-shadow: none !important; }

/* =============================================================
   Mobile refinements
============================================================= */
@media (max-width: 767px) {
  .kn-symptom-card,
  .kn-service-card,
  .kn-review-card {
    gap: 12px; }

  .kn-service-card__headline {
    font-size: 24px; }

  .kn-symptom-card__headline {
    font-size: 20px; }

  .kn-identity {
    flex-direction: column;
    text-align: center;
    gap: 12px; }

  .kn-identity__text {
    text-align: center; }

  .kn-cta-card__headline,
  .kn-cta-card__headline h3 {
    font-size: 26px; }

  .kn-trust-item {
    border-left: none !important;
    border-top: 1px solid var(--kn-dark-border);
    padding-top: 16px; }

  .section.background-light .kn-trust-item {
    border-top-color: var(--kn-light-border); }

  .block-type--kn_trust_item:first-child .kn-trust-item {
    border-top: none; } }