/* ============================================================
   Stay Connected+ — Creative Layer
   Loads after base.css. Provides bolder hero, bento, motion.
   ============================================================ */
:root {
  /* Extended typography for big creative headlines */
  --text-7xl: 4.5rem;
  /* 72 */
  --text-8xl: 6rem;
  /* 96 */
  --text-9xl: 7.5rem;
  /* 120 */
  /* Creative gradient stops */
  --grad-emerald: #7b3aed;
  --grad-emerald-deep: #4d19a7;
  --grad-blue: #1d40af;
  --grad-blue-deep: #062070;
  --grad-amber: #FBBF24;
  --grad-rose: #FB7185;
  --grad-violet: #A78BFA;
  /* Mesh background colors (very pastel) */
  --mesh-1: rgb(219 200 253 / 56%);
  --mesh-2: rgba(186, 230, 253, 0.55);
  --mesh-3: rgba(254, 240, 138, 0.40);
  --mesh-4: rgba(251, 207, 232, 0.40);
}

/* ============================================================
   AURORA HERO — animated mesh gradient + floating orbs
   ============================================================ */
.aurora {
  position: relative;
  overflow: hidden;
  background: var(--color-background);
  isolation: isolate;
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

.aurora::before {
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  top: -200px;
  left: -150px;
  background: radial-gradient(circle, var(--mesh-1) 0%, transparent 70%);
  animation: drift1 18s ease-in-out infinite alternate;
}

.aurora::after {
  width: 55vw;
  height: 55vw;
  max-width: 700px;
  max-height: 700px;
  top: -100px;
  right: -200px;
  background: radial-gradient(circle, var(--mesh-2) 0%, transparent 70%);
  animation: drift2 22s ease-in-out infinite alternate;
}

.aurora__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

.aurora__orb--amber {
  width: 320px;
  height: 320px;
  bottom: -100px;
  left: 30%;
  background: radial-gradient(circle, var(--mesh-3) 0%, transparent 70%);
  animation: drift3 26s ease-in-out infinite alternate;
}

.aurora__orb--rose {
  width: 260px;
  height: 260px;
  bottom: 80px;
  right: 18%;
  background: radial-gradient(circle, var(--mesh-4) 0%, transparent 70%);
  animation: drift4 30s ease-in-out infinite alternate;
}

@keyframes drift1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(80px, 60px) scale(1.1);
  }
}

@keyframes drift2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-100px, 80px) scale(1.15);
  }
}

@keyframes drift3 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(60px, -40px) scale(1.1);
  }
}

@keyframes drift4 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-80px, -60px) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {

  .aurora::before,
  .aurora::after,
  .aurora__orb {
    animation: none !important;
  }
}

/* ============================================================
   Mega hero typography
   ============================================================ */
.hero-mega {
  padding: var(--space-24) 0 var(--space-20);
  text-align: center;
  position: relative;
}

.hero-mega__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-secondary);
  margin-bottom: var(--space-6);
}

.hero-mega__eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-j1-accent);
  box-shadow: 0 0 0 4px rgba(123, 58, 237, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 4px rgba(123, 58, 237, 0.18);
  }

  50% {
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(123, 58, 237, 0.05);
  }
}

.hero-mega h1 {
  font-size: clamp(2.5rem, 7vw, var(--text-8xl));
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
  max-width: 1000px;
  margin: 0 auto var(--space-6);
  color: var(--color-primary);
}

.hero-mega h1 .accent-j1 {
  background: linear-gradient(135deg, var(--grad-emerald) 0%, var(--grad-emerald-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-mega h1 .accent-j2 {
  background: linear-gradient(135deg, var(--grad-blue) 0%, var(--grad-blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-mega h1 em {
  font-style: italic;
  font-weight: 400;
  font-family: "Lexend", serif;
  letter-spacing: -0.02em;
}

.hero-mega__sub {
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.5;
  color: var(--color-secondary);
  max-width: 680px;
  margin: 0 auto var(--space-10);
}

.hero-mega__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   Premium Journey Cards (gateway feature)
   ============================================================ */
.journey-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-12);
  position: relative;
}

@media (min-width: 900px) {
  .journey-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

.jcard {
  position: relative;
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--color-border);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.jcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-grad, linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%));
  z-index: -1;
  opacity: 0.6;
}

.jcard::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--card-bar);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.jcard.j1 {
  --card-grad: radial-gradient(ellipse at top right, rgb(219 200 253 / 56%) 0%, transparent 60%);
  --card-bar: linear-gradient(90deg, var(--grad-emerald) 0%, var(--grad-emerald-deep) 100%);
}

.jcard.j2 {
  --card-grad: radial-gradient(ellipse at top left, rgba(56, 189, 248, 0.18) 0%, transparent 60%);
  --card-bar: linear-gradient(90deg, var(--grad-blue) 0%, var(--grad-blue-deep) 100%);
}

.jcard:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
}

.jcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.jcard__num {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted-foreground);
}

.jcard.j1 .jcard__num {
  color: var(--color-j1-accent-hover);
}

.jcard.j2 .jcard__num {
  color: var(--color-j2-accent-hover);
}

.jcard__icon-big {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: var(--space-2);
}

.jcard.j1 .jcard__icon-big {
  background: linear-gradient(135deg, var(--grad-emerald) 0%, var(--grad-emerald-deep) 100%);
  box-shadow: 0 12px 24px -8px rgba(123, 58, 237, 0.45);
}

.jcard.j2 .jcard__icon-big {
  background: linear-gradient(135deg, var(--grad-blue) 0%, var(--grad-blue-deep) 100%);
  box-shadow: 0 12px 24px -8px rgba(29, 64, 175, 0.45);
}

.jcard__icon-big svg {
  width: 44px;
  height: 44px;
  color: #fff;
}

.jcard h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.jcard__lead {
  color: var(--color-secondary);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.jcard__features {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.jcard__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-secondary);
  font-size: var(--text-base);
  line-height: 1.5;
}

.jcard__features li svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  padding: 3px;
  border-radius: 50%;
}

.jcard.j1 .jcard__features li svg {
  background: var(--color-j1-accent-light);
  color: var(--color-j1-accent-hover);
}

.jcard.j2 .jcard__features li svg {
  background: var(--color-j2-accent-light);
  color: var(--color-j2-accent-hover);
}

.jcard__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  background: var(--color-primary);
  color: #fff;
  transition: background 0.2s, transform 0.3s var(--ease-out);
}

.jcard.j1 .jcard__cta {
  background: linear-gradient(135deg, var(--grad-emerald) 0%, var(--grad-emerald-deep) 100%);
}

.jcard.j2 .jcard__cta {
  background: linear-gradient(135deg, var(--grad-blue) 0%, var(--grad-blue-deep) 100%);
}

.jcard__cta svg {
  width: 22px;
  height: 22px;
  transition: transform 0.3s var(--ease-out);
}

.jcard:hover .jcard__cta svg {
  transform: translateX(6px);
}

/* Center divider "OR" between journey cards on wide screens */
.journey-divider {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-card);
  border: 2px solid var(--color-border);
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-muted-foreground);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  align-items: center;
  justify-content: center;
}

@media (min-width: 900px) {
  .journey-divider {
    display: flex;
  }
}

/* ============================================================
   BENTO GRID — varied size feature cards
   ============================================================ */
.bento {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(180px, auto);
  }
}

.bento-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.bento-card .num {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--grad-emerald) 0%, var(--grad-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}

.bento-card h3 {
  font-size: var(--text-xl);
}

.bento-card p {
  color: var(--color-secondary);
  line-height: 1.55;
  font-size: var(--text-base);
}

/* Bento span helpers (desktop only) */
@media (min-width: 1100px) {
  .bento--c2 {
    grid-column: span 2;
  }

  .bento--c3 {
    grid-column: span 3;
  }

  .bento--c4 {
    grid-column: span 4;
  }

  .bento--r2 {
    grid-row: span 2;
  }
}

.bento-card.featured {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1E293B 100%);
  color: var(--color-on-primary);
  border: none;
}

.bento-card.featured h3 {
  color: var(--color-on-primary);
}

.bento-card.featured p {
  color: rgba(255, 255, 255, 0.78);
}

.bento-card.featured::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.18) 0%, transparent 60%);
  z-index: -1;
}

.bento-card.featured .num {
  background: linear-gradient(135deg, var(--grad-emerald) 0%, var(--grad-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bento-card .icon-pill {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-muted);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bento-card .icon-pill svg {
  width: 22px;
  height: 22px;
}

.bento-card.j1-tinted {
  background: linear-gradient(160deg, var(--color-j1-accent-bg) 0%, var(--color-card) 60%);
  border-color: var(--color-j1-accent-light);
}

.bento-card.j2-tinted {
  background: linear-gradient(160deg, var(--color-j2-accent-bg) 0%, var(--color-card) 60%);
  border-color: var(--color-j2-accent-light);
}

.bento-card.j1-tinted .icon-pill {
  background: var(--color-j1-accent-light);
  color: var(--color-j1-accent-hover);
}

.bento-card.j2-tinted .icon-pill {
  background: var(--color-j2-accent-light);
  color: var(--color-j2-accent-hover);
}

.bento-card.testimonial {
  border-left: 4px solid var(--color-j1-accent);
}

.bento-card.testimonial blockquote {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-primary);
  font-weight: 500;
  margin: 0;
}

.bento-card.testimonial .who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  color: var(--color-muted-foreground);
  font-size: var(--text-sm);
}

.bento-card.testimonial .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-j1-accent-light);
  color: var(--color-j1-accent-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* ============================================================
   Section heading kits
   ============================================================ */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-12);
}

.section-head .eyebrow {
  color: var(--color-muted-foreground);
  margin-bottom: var(--space-3);
  display: inline-block;
}

.section-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.section-head h2 .grad {
  background: linear-gradient(135deg, var(--grad-emerald) 0%, var(--grad-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-head p {
  font-size: var(--text-lg);
  color: var(--color-secondary);
}

/* ============================================================
   Marquee strip — moving trust signals
   ============================================================ */
.trust-strip {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-6) 0;
  overflow: hidden;
  position: relative;
}

.trust-strip::before,
.trust-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.trust-strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-primary), transparent);
}

.trust-strip::after {
  right: 0;
  background: linear-gradient(-90deg, var(--color-primary), transparent);
}

.trust-strip__track {
  display: flex;
  gap: var(--space-12);
  animation: marquee 32s linear infinite;
  width: max-content;
}

.trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}

.trust-strip__item svg {
  width: 22px;
  height: 22px;
  color: var(--grad-emerald);
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-strip__track {
    animation: none;
    flex-wrap: wrap;
  }
}

/* ============================================================
   Mega CTA band
   ============================================================ */
.mega-cta {
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, #1E293B 100%);
  color: var(--color-on-primary);
  overflow: hidden;
  isolation: isolate;
}

.mega-cta::before,
.mega-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
}

.mega-cta::before {
  width: 400px;
  height: 400px;
  top: -150px;
  left: -80px;
  background: radial-gradient(circle, rgb(123 58 237 / 53%) 0%, transparent 70%);
}

.mega-cta::after {
  width: 400px;
  height: 400px;
  bottom: -150px;
  right: -80px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.45) 0%, transparent 70%);
}

.mega-cta h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.1;
}

.mega-cta p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-lg);
  max-width: 540px;
  margin: 0 auto var(--space-8);
  line-height: 1.55;
}

.mega-cta__buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

.mega-cta .btn-primary {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}

.mega-cta .btn-primary:hover {
  background: var(--color-j1-accent-light);
  border-color: var(--color-j1-accent-light);
}

.mega-cta .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.mega-cta .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: #fff;
}

/* Journey-tinted mega CTA variants (global) */
.mega-cta.j1 {
  background: linear-gradient(135deg, var(--grad-emerald-deep) 0%, #200451 100%);
}

.mega-cta.j1::before {
  background: radial-gradient(circle, rgba(110, 231, 183, 0.45) 0%, transparent 70%);
}

.mega-cta.j1::after {
  background: radial-gradient(circle, rgba(254, 243, 199, 0.30) 0%, transparent 70%);
}

.mega-cta.j1 .btn-primary {
  color: var(--color-j1-accent-hover);
}

.mega-cta.j1 .btn-primary:hover {
  background: var(--color-j1-accent-light);
}

.mega-cta.j2 {
  background: linear-gradient(135deg, var(--grad-blue-deep) 0%, #0C4A6E 100%);
}

.mega-cta.j2::before {
  background: radial-gradient(circle, rgba(125, 211, 252, 0.45) 0%, transparent 70%);
}

.mega-cta.j2::after {
  background: radial-gradient(circle, rgba(196, 181, 253, 0.30) 0%, transparent 70%);
}

.mega-cta.j2 .btn-primary {
  color: var(--color-j2-accent-hover);
}

.mega-cta.j2 .btn-primary:hover {
  background: var(--color-j2-accent-light);
}

/* ============================================================
   Page hero (interior pages) — enriched
   ============================================================ */
.page-hero-rich {
  position: relative;
  padding: var(--space-20) 0 var(--space-16);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.page-hero-rich::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.6;
}

.page-hero-rich.j1::before {
  background: radial-gradient(circle, rgba(52, 211, 153, 0.35) 0%, transparent 70%);
}

.page-hero-rich.j2::before {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, transparent 70%);
}

.page-hero-rich.neutral::before {
  background: radial-gradient(circle, rgba(148, 163, 184, 0.30) 0%, transparent 70%);
}

.page-hero-rich h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-5);
}

.page-hero-rich .lead {
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  max-width: 640px;
  margin: 0 auto;
}

.page-hero-rich .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-5);
}

.page-hero-rich.j1 .pill {
  color: var(--color-j1-accent-hover);
  border-color: var(--color-j1-accent-light);
  background: rgba(209, 250, 229, 0.55);
}

.page-hero-rich.j2 .pill {
  color: var(--color-j2-accent-hover);
  border-color: var(--color-j2-accent-light);
  background: rgba(219, 234, 254, 0.55);
}

/* ============================================================
   Tilt cards — softer micro-interactions
   ============================================================ */
.tilt {
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.tilt:hover {
  transform: translateY(-4px) rotate(-0.4deg);
  box-shadow: 0 15px 40px -10px rgba(15, 23, 42, 0.15);
}

/* ============================================================
   Section dividers — soft separators between blocks
   ============================================================ */
.wave-divider {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px;
}

/* ============================================================
   PHOTO MEDIA — Unsplash imagery
   ============================================================ */
/* Hero photo (used in split hero replacing SVG art) */
.hero-photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  isolation: isolate;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out);
}

.hero-photo:hover img {
  transform: scale(1.04);
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.08) 60%, rgba(15, 23, 42, 0.35) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-photo__quote {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  right: var(--space-6);
  z-index: 2;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-photo__badge {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-photo__badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}

.hero-photo__badge.j1 .dot {
  background: var(--color-j1-accent);
  box-shadow: 0 0 0 4px rgba(123, 58, 237, 0.2);
}

.hero-photo__badge.j2 .dot {
  background: var(--color-j2-accent);
  box-shadow: 0 0 0 4px rgba(29, 64, 175, 0.2);
}

/* Split hero layout (text + photo) */
.split-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 900px) {
  .split-hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-16);
  }
}

.split-hero__text {
  text-align: left;
}

.split-hero__text h1 {
  text-align: left;
}

.split-hero__text .hero-mega__cta {
  justify-content: flex-start;
}

.split-hero__text .pill-j1,
.split-hero__text .pill-j2,
.split-hero__text .hero-mega__eyebrow {
  text-align: left;
}

/* Moments strip — 4-photo horizontal showcase */
.moments {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .moments {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .moments {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

.moment {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.moment:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.moment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.moment:hover img {
  transform: scale(1.06);
}

.moment::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 30%, rgba(15, 23, 42, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
}

.moment__label {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Card with photo backdrop (bento-style) */
.bento-card.photo {
  padding: 0;
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border: none;
}

.bento-card.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s var(--ease-out);
}

.bento-card.photo:hover img {
  transform: scale(1.05);
}

.bento-card.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.45) 100%);
  z-index: 1;
}

.bento-card.photo .photo-body {
  position: relative;
  z-index: 2;
  padding: var(--space-8);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}

.bento-card.photo .photo-body h3 {
  color: #fff;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.bento-card.photo .photo-body p {
  color: rgba(255, 255, 255, 0.85);
}

/* Skeleton/placeholder fallback (if image fails to load) */
.hero-photo,
.moment,
.bento-card.photo {
  background: linear-gradient(135deg, var(--color-muted) 0%, var(--color-border) 100%);
}

/* ============================================================
   SCROLL REVEAL — fade-in-up on enter viewport
   Activated by reveal.js which adds .reveal-ready to <html>
   and .is-visible to each target as it scrolls in.
   ============================================================ */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* When reveal is disabled (no JS, no IO, or reduced-motion), show everything normally */
.reveal-disabled .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Slightly tighter motion on smaller / quicker elements */
.reveal-ready .bento-card.reveal,
.reveal-ready .moment.reveal,
.reveal-ready .step.reveal,
.reveal-ready .timeline-item.reveal,
.reveal-ready .channel.reveal {
  transform: translateY(20px);
  transition-duration: 0.65s;
}

/* Honor reduced-motion globally as a safety net */
@media (prefers-reduced-motion: reduce) {

  .reveal-ready .reveal,
  .reveal-ready .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   TIMELINE — used by scplus_timeline_step widget (How It Works section)
   These styles were previously page-local; moved to global so the widget
   renders correctly anywhere it's placed.
   ============================================================ */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 47px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: var(--color-muted-foreground);
  z-index: 0;
  opacity: 0.5;
}

body.journey-j1 .timeline::before {
  background: var(--color-j1-accent);
  opacity: 0.6;
}

body.journey-j2 .timeline::before {
  background: var(--color-j2-accent);
  opacity: 0.6;
}

.timeline-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-6);
  align-items: start;
  position: relative;
  z-index: 1;
}

.timeline-num {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  box-shadow: 0 0 0 4px var(--color-background);
  flex-shrink: 0;
}

.timeline-content {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 0 30px;
}

.timeline-content h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
}

.timeline-content>p {
  color: var(--color-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}

.timeline-content ul {
  margin: var(--space-3) 0 0;
  color: var(--color-secondary);
  padding-left: 1.25rem;
}

.timeline-content ul li {
  margin-bottom: var(--space-2);
  list-style: disc;
}

.timeline-meta {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
}

.timeline-meta svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}

/* When timeline-step widget is wrapped in Elementor widget container */
.elementor-widget-scplus_timeline_step .elementor-widget-container {
  padding: 0;
}

/* ============================================================
   FAQ TOC — "Jump to a topic" card (rendered by scplus_faq_toc)
   ============================================================ */
.faq-toc {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-10);
}

.faq-toc h2 {
  font-size: var(--text-lg) !important;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}

.faq-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 600px) {
  .faq-toc ul {
    grid-template-columns: 1fr 1fr;
  }
}

.faq-toc li {
  list-style: none;
  margin: 0;
}

.faq-toc a {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-1) 0;
}

.faq-toc a:hover {
  text-decoration: underline;
}

body.journey-j1 .faq-toc a {
  color: var(--color-j1-accent-hover);
}

body.journey-j2 .faq-toc a {
  color: var(--color-j2-accent-hover);
}

/* ============================================================
   FAQ GROUP — Section heading with underline accent
   ============================================================ */
.faq-group {
  margin-bottom: var(--space-12);
}

.faq-group h2 {
  font-size: var(--text-2xl) !important;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-muted);
}

body.journey-j1 .faq-group h2 {
  border-bottom-color: var(--color-j1-accent-light);
}

body.journey-j2 .faq-group h2 {
  border-bottom-color: var(--color-j2-accent-light);
}

/* Accordion details — card-like, smooth open/close (works with existing base.css) */
.faq-group .accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Elementor widget wrappers — remove default padding so cards are flush */
.elementor-widget-scplus_faq_toc .elementor-widget-container,
.elementor-widget-scplus_faq_group .elementor-widget-container {
  padding: 0;
}

/* ============================================================
   FAQ TABS — when JS upgrades .faq-toc into a tab nav
   ============================================================ */
.faq-toc.faq-tabs-nav {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-8);
}

.faq-toc.faq-tabs-nav h2 {
  display: none;
  /* "Jump to a topic" label not needed in tab mode */
}

.faq-toc.faq-tabs-nav ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-2) !important;
  grid-template-columns: none !important;
  margin: 0;
  padding: 0;
}

.faq-toc.faq-tabs-nav li {
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
}

.faq-toc.faq-tabs-nav a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5) !important;
  border-radius: var(--radius-md);
  background: transparent !important;
  border: 1px solid transparent;
  color: var(--color-secondary) !important;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-sm) !important;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  text-decoration: none !important;
  white-space: nowrap;
}

.faq-toc.faq-tabs-nav a:hover {
  background: var(--color-muted) !important;
  color: var(--color-primary) !important;
}

.faq-toc.faq-tabs-nav a:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.faq-toc.faq-tabs-nav a.is-active {
  background: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

body.journey-j1 .faq-toc.faq-tabs-nav a.is-active {
  background: var(--color-j1-accent) !important;
  border-color: var(--color-j1-accent);
  color: #fff !important;
}

body.journey-j2 .faq-toc.faq-tabs-nav a.is-active {
  background: var(--color-j2-accent) !important;
  border-color: var(--color-j2-accent);
  color: #fff !important;
}

/* Tab-mode panel switching.
   The JS adds `faq-tabs-ready` to <html> once it has initialized;
   before that, all groups are visible (graceful fallback for no-JS / slow init). */
html.faq-tabs-ready body .faq-group {
  display: none;
}

html.faq-tabs-ready body .faq-group.is-active {
  display: block;
  animation: faq-fade-in 0.3s var(--ease-out);
}

@keyframes faq-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* In tab mode, the active group's h2 is redundant (active tab button shows it). */
html.faq-tabs-ready body .faq-group.is-active>h2 {
  display: none;
}

/* ============================================================
   JOURNEY SPLIT — two side-by-side cards (j1/j2) cross-link
   Used by scplus_journey_split widget on /faq/
   ============================================================ */
.journey-split {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-12);
}

@media (min-width: 768px) {
  .journey-split {
    grid-template-columns: 1fr 1fr !important;
  }
}

.journey-split>a {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-decoration: none !important;
  color: inherit !important;
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.journey-split>a.j1:hover {
  border-color: var(--color-j1-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.journey-split>a.j2:hover {
  border-color: var(--color-j2-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.journey-split>a>.badge {
  align-self: flex-start;
}

.journey-split>a>h3 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-xl);
  color: var(--color-primary);
}

.journey-split>a>p {
  color: var(--color-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-3);
}

.journey-split>a>.arrow {
  font-family: var(--font-heading);
  font-weight: 600;
  display: inline-block;
  margin-top: auto;
}

.journey-split>a.j1>.arrow {
  color: var(--color-j1-accent-hover);
}

.journey-split>a.j2>.arrow {
  color: var(--color-j2-accent-hover);
}

/* Elementor widget wrapper for journey-split */
.elementor-widget-scplus_journey_split .elementor-widget-container {
  padding: 0;
}

/* ============================================================
   Extracted from page-level <style> blocks — globalized so
   pages render without inline CSS. v1.1.9
   ============================================================ */
/* Aurora journey gradients (override aurora's default mesh) */
.aurora.j1::before {
  background: radial-gradient(circle, rgb(219 200 253 / 56%) 0%, transparent 70%);
}

.aurora.j1::after {
  background: radial-gradient(circle, rgba(254, 243, 199, 0.50) 0%, transparent 70%);
}

.aurora.j2::before {
  background: radial-gradient(circle, #1d40af3b 0%, transparent 70%);
}

.aurora.j2::after {
  background: radial-gradient(circle, rgba(224, 231, 255, 0.55) 0%, transparent 70%);
}

/* Hero-mega pill (journey-tinted info pill above heading) */
.hero-mega .pill-j1,
.hero-mega .pill-j2 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-6);
}

.hero-mega .pill-j1 {
  border: 1px solid var(--color-j1-accent-light);
  color: var(--color-j1-accent-hover);
}

.hero-mega .pill-j2 {
  border: 1px solid var(--color-j2-accent-light);
  color: var(--color-j2-accent-hover);
}

.hero-mega .pill-j1 .dot,
.hero-mega .pill-j2 .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}

.hero-mega .pill-j1 .dot {
  background: var(--color-j1-accent);
  box-shadow: 0 0 0 4px rgba(123, 58, 237, 0.18);
}

.hero-mega .pill-j2 .dot {
  background: var(--color-j2-accent);
  box-shadow: 0 0 0 4px rgba(29, 64, 175, 0.18);
}

/* Safety callout (j2 themed) */
.safety-callout {
  background: linear-gradient(135deg, var(--color-j2-accent-bg) 0%, var(--color-card) 100%);
  border: 1px solid var(--color-j2-accent-light);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .safety-callout {
    grid-template-columns: 100px 1fr;
    align-items: center;
  }
}

.safety-callout__icon {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--grad-blue) 0%, var(--grad-blue-deep) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.safety-callout__icon svg {
  width: 48px;
  height: 48px;
}

.safety-callout h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

/* Compare 2-col (j1/j2 cards) — used on how-it-works */
.compare {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-10);
}

@media (min-width: 900px) {
  .compare {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

.compare__col {
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.compare__col.j1 {
  border-color: var(--color-j1-accent-light);
}

.compare__col.j2 {
  border-color: var(--color-j2-accent-light);
}

.compare__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.compare__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.compare__col.j1 .compare__icon {
  background: var(--color-j1-accent-light);
  color: var(--color-j1-accent-hover);
}

.compare__col.j2 .compare__icon {
  background: var(--color-j2-accent-light);
  color: var(--color-j2-accent-hover);
}

.compare__icon svg {
  width: 28px;
  height: 28px;
}

.compare__col h3 {
  font-size: var(--text-2xl);
}

.compare__col ol {
  padding-left: 1.25rem;
  color: var(--color-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compare__col ol li {
  padding-left: var(--space-2);
}

.compare__col ol li::marker {
  color: var(--color-j1-accent);
  font-weight: 700;
  font-family: var(--font-heading);
}

.compare__col.j2 ol li::marker {
  color: var(--color-j2-accent);
}

.compare__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: auto;
}

/* Support page grid (form column + channels column) */
.support-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .support-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

.channel {
  padding: var(--space-8);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.channel__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-muted);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.channel__icon svg {
  width: 22px;
  height: 22px;
}

.channel h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.channel p {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  color: var(--color-muted-foreground);
  line-height: 1.5;
}

.channel a {
  font-weight: 500;
  color: var(--color-primary);
}

.channel a:hover {
  text-decoration: underline;
}

.support-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Legal layout (privacy / terms) */
.legal-layout {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
  .legal-layout {
    grid-template-columns: 240px 1fr;
    gap: var(--space-12);
  }
}

.legal-toc {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  align-self: start;
}

/* Sticky only kicks in at desktop side-column layout */
@media (min-width: 1000px) {
  .legal-toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

.legal-toc h2 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-foreground);
  margin-bottom: var(--space-4);
}

.legal-toc ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  counter-reset: toc;
}

.legal-toc ol li {
  counter-increment: toc;
}

.legal-toc a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-secondary);
  line-height: var(--leading-snug);
}

.legal-toc a::before {
  content: counter(toc) ". ";
  color: var(--color-muted-foreground);
  margin-right: var(--space-1);
}

.legal-toc a:hover {
  background: var(--color-muted);
  color: var(--color-primary);
}

.legal-body {
  max-width: 720px;
}

.legal-body h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.legal-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-body h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.legal-body p,
.legal-body li {
  color: var(--color-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.legal-body ul,
.legal-body ol {
  padding-left: 1.5rem;
  margin-bottom: var(--space-5);
}

.legal-body ul li,
.legal-body ol li {
  margin-bottom: var(--space-2);
}

.legal-meta {
  background: var(--color-muted);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-10);
  color: var(--color-secondary);
  font-size: var(--text-sm);
}

/* ============================================================
   LOVED ONES PAGE — Distinct section designs (v1.4.0)
   Content unchanged; only visual styling per section.
   ============================================================ */
/* Base: every section gets breathing room + alternating tints */
.section--inmates-intro,
.section--how-works,
.section--pitch,
.section--pricing-inmate,
.section--family-intro,
.section--free-account,
.section--paid-subscription,
.section--affordable,
.section--free-vs-paid {
  padding: var(--space-16) 0 !important;
  position: relative;
}

/* Intro sections (just eyebrow + heading + lede) — minimal spacing */
.section--inmates-intro,
.section--family-intro {
  padding: var(--space-6) 0 0 !important;
}

.section--inmates-intro .scplus_section_intro,
.section--family-intro .scplus_section_intro,
.section--inmates-intro .elementor-widget-scplus_section_intro,
.section--family-intro .elementor-widget-scplus_section_intro {
  margin-bottom: 0 !important;
}

.section--inmates-intro .section-head,
.section--family-intro .section-head {
  margin-bottom: 0 !important;
}

/* Tighten the eyebrow/heading/lede inner gaps */
.section--inmates-intro .section-head .eyebrow,
.section--family-intro .section-head .eyebrow {
  margin-bottom: var(--space-2) !important;
}

.section--inmates-intro .section-head h1,
.section--inmates-intro .section-head h2,
.section--inmates-intro .section-head h3,
.section--family-intro .section-head h1,
.section--family-intro .section-head h2,
.section--family-intro .section-head h3 {
  margin-bottom: var(--space-3) !important;
}

.section--inmates-intro .section-head p,
.section--family-intro .section-head p {
  margin: 0 !important;
}

/* How-works section — exactly 40px gap from intro above */
.section--how-works {
  padding: 0 !important;
}

.how-it-works-card {
  padding: 40px 24px 32px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
}

/* Force section-intro bottom to be 0 so total gap = how-it-works-card top padding */
.section--inmates-intro .section-head,
.section--inmates-intro .scplus_section_intro,
.section--inmates-intro .elementor-widget {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Alternating section backgrounds for visual rhythm */
.section--how-works {
  background: linear-gradient(180deg, var(--color-background) 0%, #fafafe 100%);
}

.section--pitch {
  background: linear-gradient(180deg, #fafafe 0%, var(--color-j1-accent-bg) 100%);
}

.section--pricing-inmate {
  background: linear-gradient(180deg, var(--color-j1-accent-bg) 0%, var(--color-background) 100%);
}

.section--family-intro {
  background: var(--color-background);
}

.section--free-account {
  background: linear-gradient(180deg, var(--color-background) 0%, #fafafe 100%);
}

.section--paid-subscription {
  background: linear-gradient(135deg, #f3eafc 0%, #ede4f9 100%);
}

.section--affordable {
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section--free-vs-paid {
  background: linear-gradient(180deg, var(--color-background) 0%, var(--color-muted) 100%);
}

/* SECTION 3 — How the system works (7-step card) */
.how-it-works-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-10) !important;
  box-shadow: 0 30px 60px -25px rgba(15, 23, 42, 0.10);
  position: relative;
  overflow: hidden;
}

.how-it-works-card::before {
  display: none !important;
}

.how-it-works-card .elementor-widget-heading h1,
.how-it-works-card .elementor-widget-heading h2,
.how-it-works-card .elementor-widget-heading h3 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-6);
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.how-it-works-card .elementor-widget-text-editor strong {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-j1-accent-hover);
  margin-top: var(--space-4);
  font-size: var(--text-lg);
}

.how-it-works-card .elementor-widget-text-editor p {
  line-height: 1.7;
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
}

.how-it-works-card .elementor-widget-text-editor p:has(strong) {
  margin-top: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--color-j1-accent);
  background: linear-gradient(90deg, var(--color-j1-accent-bg) 0%, transparent 100%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* SECTION 4 — Closing pitch callout (compact small text) */
.pitch-callout {
  position: relative;
  padding: var(--space-8) var(--space-10) !important;
  background: linear-gradient(135deg, var(--color-j1-accent) 0%, var(--color-j1-accent-hover) 100%);
  border-radius: var(--radius-xl);
  color: #fff;
  overflow: hidden;
  text-align: center;
  max-width: 800px;
  margin: 0 auto !important;
}

.pitch-callout::before {
  content: "\201C";
  position: absolute;
  top: -30px;
  left: 16px;
  font-size: 180px;
  font-family: Georgia, serif;
  color: rgba(255, 255, 255, 0.10);
  line-height: 1;
}

.pitch-callout .elementor-widget-text-editor p {
  color: #fff !important;
  font-size: var(--text-sm) !important;
  line-height: 1.55 !important;
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}

.pitch-callout .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.pitch-callout .elementor-widget-text-editor p strong {
  color: #fff !important;
  font-weight: 500;
}

/* Reduce the section's own vertical padding */
.section--pitch {
  padding: var(--space-8) 0 !important;
}

/* SECTIONS 5 & 8 — Pricing cards */
.pricing-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-10) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  box-shadow: 0 25px 50px -15px rgba(15, 23, 42, 0.15);
  position: relative;
  overflow: hidden;
}

.pricing-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.pricing-card--inmate::before {
  background: linear-gradient(90deg, var(--grad-emerald) 0%, var(--grad-emerald-deep) 100%);
}

.pricing-card--paid::before {
  background: linear-gradient(90deg, var(--grad-blue) 0%, var(--grad-blue-deep) 100%);
}

.pricing-card .elementor-widget-heading:first-child h1,
.pricing-card .elementor-widget-heading:first-child h2,
.pricing-card .elementor-widget-heading:first-child h3 {
  font-size: var(--text-3xl) !important;
  text-align: center;
  margin-bottom: var(--space-8);
}

.pricing-card .elementor-widget-text-editor p {
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-secondary);
  padding: var(--space-3) var(--space-5);
  background: var(--color-muted);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-j1-accent);
}

.pricing-card .elementor-widget-text-editor p strong {
  color: var(--color-primary);
  font-size: var(--text-lg);
  font-weight: 700;
}

.pricing-card .elementor-widget-button {
  margin-top: var(--space-8);
  text-align: center;
}

.pricing-card .elementor-button {
  background: linear-gradient(135deg, var(--color-j1-accent) 0%, var(--color-j1-accent-hover) 100%);
  color: #fff !important;
  padding: var(--space-4) var(--space-10) !important;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-lg);
}

/* Paid subscription — emphasize first month FREE */
.pricing-card--paid .elementor-widget-heading:nth-of-type(2) h1,
.pricing-card--paid .elementor-widget-heading:nth-of-type(2) h2,
.pricing-card--paid .elementor-widget-heading:nth-of-type(2) h3 {
  font-size: var(--text-2xl) !important;
  text-align: center;
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  border: 2px dashed var(--color-j2-accent-light);
  border-radius: var(--radius-lg);
  background-color: var(--color-j2-accent-bg);
  color: var(--color-j2-accent-hover) !important;
}

.pricing-card--paid .elementor-widget-text-editor p {
  border-left-color: var(--color-j2-accent);
}

/* SECTION 7 — Free Account small intro */
.free-card {
  background: var(--color-card);
  border: 1px solid var(--color-j1-accent-light);
  border-radius: var(--radius-xl);
  padding: var(--space-10) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  text-align: center;
}

.free-card .elementor-widget-heading h1,
.free-card .elementor-widget-heading h2,
.free-card .elementor-widget-heading h3 {
  font-size: var(--text-2xl) !important;
  color: var(--color-j1-accent-hover);
  margin-bottom: var(--space-4);
}

.free-card .elementor-widget-text-editor p {
  font-size: var(--text-base);
  color: var(--color-secondary);
  line-height: 1.6;
}

/* SECTION 9 — Affordable alternative — OLD STYLES KEPT FOR HEADING/TEXT ONLY,
   layout is overridden by 2-col grid further down */
.affordable-card .elementor-widget-heading h1,
.affordable-card .elementor-widget-heading h2,
.affordable-card .elementor-widget-heading h3 {
  font-size: var(--text-3xl) !important;
  text-align: left !important;
  margin-bottom: var(--space-5) !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-j1-accent-hover) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.2 !important;
}

.affordable-card .elementor-widget-text-editor p {
  font-size: var(--text-base) !important;
  line-height: 1.65 !important;
  color: var(--color-secondary);
  margin-bottom: var(--space-3) !important;
  text-align: left !important;
}

.affordable-card .elementor-widget-text-editor p:first-of-type {
  font-size: var(--text-lg) !important;
  font-weight: 500;
  color: var(--color-primary);
}

/* SECTION 10 — Free vs Paid comparison */
.free-vs-paid {
  text-align: center;
  padding: var(--space-12) var(--space-8) !important;
  max-width: 980px !important;
  margin: 0 auto !important;
}

.free-vs-paid .elementor-widget-heading h1,
.free-vs-paid .elementor-widget-heading h2,
.free-vs-paid .elementor-widget-heading h3 {
  font-size: var(--text-4xl) !important;
  margin-bottom: var(--space-10);
  line-height: 1.2;
}

.free-vs-paid .elementor-widget-text-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 800px) {
  .free-vs-paid .elementor-widget-text-editor {
    grid-template-columns: 1fr 1fr;
  }
}

.free-vs-paid .elementor-widget-text-editor p {
  margin: 0;
  padding: var(--space-8);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: left;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-secondary);
  position: relative;
}

.free-vs-paid .elementor-widget-text-editor p:first-child {
  border-top: 4px solid var(--color-j1-accent);
}

.free-vs-paid .elementor-widget-text-editor p:nth-child(2) {
  border-top: 4px solid var(--color-j2-accent);
  background: linear-gradient(135deg, var(--color-card) 0%, var(--color-j2-accent-bg) 100%);
}

.free-vs-paid .elementor-widget-text-editor p:first-child::before {
  content: "FREE";
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-j1-accent-light);
  color: var(--color-j1-accent-hover);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.free-vs-paid .elementor-widget-text-editor p:nth-child(2)::before {
  content: "PAID";
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-j2-accent-light);
  color: var(--color-j2-accent-hover);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

/* Hide empty paragraphs in styled cards (content has stray <p> </p>) */
.pricing-card .elementor-widget-text-editor p:empty,
.how-it-works-card .elementor-widget-text-editor p:empty,
.affordable-card .elementor-widget-text-editor p:empty,
.free-vs-paid .elementor-widget-text-editor p:empty,
.pitch-callout .elementor-widget-text-editor p:empty {
  display: none !important;
}

/* Hide paragraphs that contain only whitespace */
.pricing-card .elementor-widget-text-editor p:not(:has(*)):where(.empty-p),
.pricing-card .elementor-widget-text-editor>.elementor-widget-container>p:blank,
.how-it-works-card .elementor-widget-text-editor>.elementor-widget-container>p:blank,
.affordable-card .elementor-widget-text-editor>.elementor-widget-container>p:blank {
  display: none !important;
}

/* ============================================================
   Header CTA + Sign In buttons — spacing + styling
   ============================================================ */
/* Gap between nav (Support) and the primary CTA */
.site-header__cta {
  margin-left: var(--space-6) !important;
}

.site-header__cta .elementor-button {
  padding: 12px 26px !important;
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-md) !important;
}

/* Gap between CTA + Sign In */
.site-header__signin {
  margin-left: var(--space-3) !important;
}

.site-header__signin .elementor-button,
.elementor-widget-button.site-header__signin .elementor-button,
.elementor-element.site-header__signin .elementor-button {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-border) !important;
  padding: 10px 22px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600;
  font-size: var(--text-sm);
  transition: all 0.2s ease;
}

.site-header__signin .elementor-button:hover,
.elementor-widget-button.site-header__signin .elementor-button:hover {
  background: var(--color-muted) !important;
  border-color: var(--color-primary) !important;
}

/* J1 variant — purple outline */
.site-header__signin--j1 .elementor-button {
  border-color: var(--color-j1-accent-light) !important;
  color: var(--color-j1-accent-hover) !important;
}

.site-header__signin--j1 .elementor-button:hover {
  background: var(--color-j1-accent-bg) !important;
  border-color: var(--color-j1-accent) !important;
}

/* J2 variant — indigo outline */
.site-header__signin--j2 .elementor-button {
  border-color: var(--color-j2-accent-light) !important;
  color: var(--color-j2-accent-hover) !important;
}

.site-header__signin--j2 .elementor-button:hover {
  background: var(--color-j2-accent-bg) !important;
  border-color: var(--color-j2-accent) !important;
}

/* Hide non-matching variant on each journey (uses body.journey-j1 / journey-j2 class) */
body:not(.journey-j1):not(.journey-j2) .site-header__signin--j1,
body:not(.journey-j1):not(.journey-j2) .site-header__signin--j2 {
  display: none !important;
}

body.journey-j1 .site-header__signin--general,
body.journey-j1 .site-header__signin--j2 {
  display: none !important;
}

body.journey-j2 .site-header__signin--general,
body.journey-j2 .site-header__signin--j1 {
  display: none !important;
}

/* ============================================================
   Fluent Forms inside .scplus-form-card — match SC+ form styles
   ============================================================ */
.scplus-form-card .frm-fluent-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.scplus-form-card .frm-fluent-form .ff-el-group {
  margin: 0;
}

.scplus-form-card .frm-fluent-form .ff-el-input--label label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  font-size: var(--text-sm);
  margin-bottom: 0;
}

.scplus-form-card .frm-fluent-form input[type="text"],
.scplus-form-card .frm-fluent-form input[type="email"],
.scplus-form-card .frm-fluent-form input[type="tel"],
.scplus-form-card .frm-fluent-form select,
.scplus-form-card .frm-fluent-form textarea {
  width: 100% !important;
  padding: var(--space-3) var(--space-4) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-card) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  color: var(--color-primary) !important;
  line-height: 1.5 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
}

.scplus-form-card .frm-fluent-form input:focus,
.scplus-form-card .frm-fluent-form select:focus,
.scplus-form-card .frm-fluent-form textarea:focus {
  border-color: var(--color-j1-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(123, 58, 237, 0.12) !important;
}

.scplus-form-card .frm-fluent-form textarea {
  min-height: 120px;
  resize: vertical;
}

.scplus-form-card .frm-fluent-form .ff-el-help-message {
  font-size: var(--text-sm);
  color: var(--color-muted-foreground);
  margin-top: var(--space-2);
}

.scplus-form-card .frm-fluent-form .ff-el-form-control[type="submit"],
.scplus-form-card .frm-fluent-form .ff-btn-submit {
  background: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) var(--space-8) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: var(--text-base) !important;
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto !important;
}

.scplus-form-card .frm-fluent-form .ff-btn-submit:hover {
  background: var(--color-j1-accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -8px rgba(123, 58, 237, 0.4) !important;
}

.scplus-form-card .frm-fluent-form .ff_submit_btn_wrapper {
  margin-top: var(--space-3);
}

.scplus-form-card .frm-fluent-form .ff-el-input--required {
  color: var(--color-j1-accent);
}

/* ============================================================
   Fluent Forms — fix 3 issues
   1. Hide tooltip "i" icon, show help text inline
   2. Better spacing between fields
   3. Dropdown arrow positioning
   ============================================================ */
/* 1. Hide Fluent Forms' tooltip "i" icon — we want inline help text */
.scplus-form-card .frm-fluent-form .ff-el-tooltip,
.scplus-form-card .frm-fluent-form .el-tooltip,
.scplus-form-card .frm-fluent-form [class*="ff-tooltip"],
.scplus-form-card .frm-fluent-form svg.ff-el-tooltip-icon,
.scplus-form-card .frm-fluent-form .ff-el-input--label .ff-el-tooltip {
  display: none !important;
}

/* Show help message inline below input instead */
.scplus-form-card .frm-fluent-form .ff-el-help-message {
  display: block !important;
  font-size: var(--text-sm);
  color: var(--color-muted-foreground);
  margin-top: var(--space-2);
  font-style: normal;
}

/* 2. Spacing between form field groups */
.scplus-form-card .frm-fluent-form .ff-el-group,
.scplus-form-card .frm-fluent-form .ff_form_instance_1 .ff-el-group,
.scplus-form-card .frm-fluent-form>*+* {
  margin-top: var(--space-6) !important;
  margin-bottom: 0 !important;
}

.scplus-form-card .frm-fluent-form .ff-el-group:first-child,
.scplus-form-card .frm-fluent-form>*:first-child {
  margin-top: 0 !important;
}

.scplus-form-card .frm-fluent-form .ff-el-input--label {
  margin-bottom: 0 !important;
}

/* 3. Dropdown — leave space for the native arrow on the right */
.scplus-form-card .frm-fluent-form select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%237b3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--space-4) center !important;
  background-size: 14px 8px !important;
  padding-right: var(--space-10) !important;
  cursor: pointer;
}

.scplus-form-card .frm-fluent-form select::-ms-expand {
  display: none;
}

/* Required asterisk styling */
.scplus-form-card .frm-fluent-form .ff-el-is-required.asterisk-right label::after,
.scplus-form-card .frm-fluent-form .ff_el_form_control_wrapper.ff-el-is-required>label::after,
.scplus-form-card .frm-fluent-form .ff-el-input--label label .ff-el-is-required {
  color: var(--color-j1-accent) !important;
}

/* ============================================================
   ZIGZAG TIMELINE — CSS Grid version (reliable centering)
   ============================================================ */
.how-it-works-card .elementor-widget-heading,
.how-it-works-card .elementor-widget-heading h1,
.how-it-works-card .elementor-widget-heading h2,
.how-it-works-card .elementor-widget-heading h3 {
  text-align: center !important;
}

/* 3-column grid: [left] [40px center channel] [right] — minmax(0,1fr) forces equal columns */
.zigzag-timeline>.e-con-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important;
  column-gap: 0 !important;
  row-gap: var(--space-8) !important;
  position: relative !important;
  padding: var(--space-12) 0 var(--space-8) !important;
  width: 100%;
}

.zigzag-timeline>.e-con-inner>.elementor-widget-scplus_timeline_step {
  justify-self: stretch !important;
  align-self: start !important;
  min-width: 0 !important;
}

/* Center vertical line — sits in the middle of the 80px gap */
.zigzag-timeline>.e-con-inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(180deg, transparent 0%, var(--color-j1-accent) 8%, var(--color-j1-accent) 92%, transparent 100%);
  z-index: 0;
}

/* Place each step in column 1 or 3 */
.zigzag-timeline .elementor-widget-scplus_timeline_step {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  z-index: 1;
  box-sizing: border-box !important;
}

/* Each step on its own row, alternating left/right (staggered, not face-to-face) */
.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(1) {
  grid-row: 1 !important;
  grid-column: 1 !important;
}

.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(2) {
  grid-row: 2 !important;
  grid-column: 3 !important;
}

.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(3) {
  grid-row: 3 !important;
  grid-column: 1 !important;
}

.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(4) {
  grid-row: 4 !important;
  grid-column: 3 !important;
}

.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(5) {
  grid-row: 5 !important;
  grid-column: 1 !important;
}

.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(6) {
  grid-row: 6 !important;
  grid-column: 3 !important;
}

.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(7) {
  grid-row: 7 !important;
  grid-column: 1 !important;
}

/* Card — NO BORDER */
.zigzag-timeline .timeline-item,
.zigzag-timeline .elementor-widget-container .timeline-item {
  background: var(--color-card) !important;
  border: 0 !important;
  border-style: none !important;
  border-width: 0 !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-5) var(--space-5) !important;
  box-shadow: 0 14px 40px -18px rgba(123, 58, 237, 0.22), 0 2px 6px -2px rgba(15, 23, 42, 0.06) !important;
  position: relative;
  display: flex !important;
  gap: var(--space-0) !important;
  align-items: flex-start;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  margin: 0 !important;
}

.zigzag-timeline .timeline-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -20px rgba(123, 58, 237, 0.38), 0 4px 10px -4px rgba(15, 23, 42, 0.08) !important;
}

/* Odd → number on RIGHT side of card (closest to center line) */
.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd) .timeline-item {
  flex-direction: row-reverse !important;
}

.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd) .timeline-content {
  text-align: right;
}

.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(even) .timeline-content {
  text-align: left;
}

/* Number badge */
.zigzag-timeline .timeline-num {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--color-j1-accent) 0%, var(--color-j1-accent-hover) 100%) !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: var(--text-lg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 6px 16px -4px rgba(123, 58, 237, 0.5) !important;
  position: static !important;
  margin: 0 !important;
}

.zigzag-timeline .timeline-content {
  flex: 1;
  min-width: 0;
}

.zigzag-timeline .timeline-content h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.zigzag-timeline .timeline-content p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-secondary);
  margin: 0;
}

/* Connector dot — column-gap is 80px, so half-gap is 40px. Dot half is 8px.
   right: -48px → dot center lands at exactly 50% (center line). */
.zigzag-timeline .elementor-widget-scplus_timeline_step::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-card);
  border: 3px solid var(--color-j1-accent);
  box-shadow: 0 0 0 5px rgba(123, 58, 237, 0.15);
  transform: translateY(-50%);
  z-index: 3;
}

.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd)::after {
  right: -68px;
}

.zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(even)::after {
  left: -68px;
}

/* Scroll reveal */
html body .zigzag-timeline .zigzag-step {
  opacity: 0 !important;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html body .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd).zigzag-step {
  transform: translateX(-40px);
}

html body .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(even).zigzag-step {
  transform: translateX(40px);
}

html body .zigzag-timeline .zigzag-step.is-revealed {
  opacity: 1 !important;
  transform: translateX(0);
}

/* Mobile fallback — single column */
@media (max-width: 768px) {
  .zigzag-timeline>.e-con-inner {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    padding-left: 36px !important;
  }

  section.aurora.hero-mega.j1 {
    padding-top: 0 !important;
  }

  .zigzag-timeline>.e-con-inner::before {
    left: 18px;
    transform: none;
  }

  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd),
  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(even) {
    grid-column: 1 !important;
  }

  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd) .timeline-item {
    flex-direction: row !important;
  }

  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd) .timeline-content,
  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(even) .timeline-content {
    text-align: left;
  }

  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd)::after,
  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(even)::after {
    left: -25px;
    right: auto;
  }

  html body .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd).zigzag-step,
  html body .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(even).zigzag-step {
    transform: translateY(20px);
  }
}

/* Mobile: single column */
@media (max-width: 768px) {

  .zigzag-timeline>.e-con-inner::before,
  .zigzag-timeline:not(:has(> .e-con-inner))::before {
    left: 18px;
  }

  .zigzag-timeline .elementor-widget-scplus_timeline_step,
  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd),
  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(even) {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    padding-left: 44px !important;
  }

  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd) .timeline-item {
    flex-direction: row !important;
  }

  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd) .timeline-content,
  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(even) .timeline-content {
    text-align: left;
  }

  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd)::after,
  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(even)::after {
    left: 11px;
    right: auto;
  }

  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(odd).zigzag-step,
  .zigzag-timeline .elementor-widget-scplus_timeline_step:nth-of-type(even).zigzag-step {
    transform: translateY(20px);
  }
}

/* ============================================================
   PRICING TABLE v3 — Light purplish grey background
   ============================================================ */
.section--pricing-table {
  padding: var(--space-20) 0 var(--space-24) !important;
  background: linear-gradient(180deg, #f5f3fa 0%, #ede9f7 100%);
  position: relative;
}

/* GRID — high specificity to beat Elementor flex defaults */
html body .elementor .e-con.pricing-table-grid>.e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  gap: var(--space-6) !important;
  align-items: stretch !important;
  align-content: start !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-direction: unset !important;
}

@media (min-width: 880px) {
  html body .elementor .e-con.pricing-table-grid>.e-con-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--space-5) !important;
    align-items: stretch !important;
  }
}

/* Each pt-card fills its grid cell, same height as siblings */
html body .elementor .e-con.pricing-table-grid>.e-con-inner>.pt-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  flex: unset !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

/* Hide empty whitespace paragraphs */
.pt-card .elementor-widget-text-editor p:empty {
  display: none !important;
}

/* ---------- CARD BASE ---------- */
.pt-card {
  background: #fff !important;
  border: 0 !important;
  border-radius: 28px !important;
  padding: var(--space-10) var(--space-8) !important;
  box-shadow: 0 4px 20px -6px rgba(15, 23, 42, 0.08) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pt-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.15) !important;
}

/* Popular badge — small clean pill ABOVE the paid card */
.pt-card--paid::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #18181b;
  color: #fef3c7;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 5;
}

/* ---------- CARD TITLE (first heading) — Big serif-like display ---------- */
.pt-card .elementor-widget-heading:first-of-type h1,
.pt-card .elementor-widget-heading:first-of-type h2,
.pt-card .elementor-widget-heading:first-of-type h3 {
  font-size: 28px !important;
  font-weight: 600 !important;
  text-align: left !important;
  margin: 0 0 var(--space-5) !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  color: #18181b !important;
  border: 0 !important;
  letter-spacing: -0.02em;
  font-family: var(--font-heading) !important;
}

/* ---------- INMATE CARD: clean pricing rows with bullet icons ---------- */
.pt-card--inmate .elementor-widget-text-editor {
  margin: 0 0 var(--space-4);
}

.pt-card--inmate .elementor-widget-text-editor p {
  margin: 0 0 var(--space-3) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #52525b !important;
  padding: 0 0 0 28px !important;
  background: none !important;
  border: 0 !important;
  position: relative;
}

.pt-card--inmate .elementor-widget-text-editor p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  background: #18181b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  border-radius: 50%;
}

.pt-card--inmate .elementor-widget-text-editor p strong {
  color: #18181b !important;
  font-weight: 600 !important;
}

/* ---------- FREE CARD: centered description with bullet ---------- */
.pt-card--free .elementor-widget-text-editor {
  margin: 0 0 var(--space-4);
}

.pt-card--free .elementor-widget-text-editor p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #52525b !important;
  text-align: left !important;
  margin: 0 0 var(--space-3) !important;
  padding: 0 0 0 28px !important;
  position: relative;
}

.pt-card--free .elementor-widget-text-editor p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  background: #18181b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  border-radius: 50%;
}

/* ---------- PAID CARD: simple clean styling ---------- */
/* The "Your first month is FREE..." heading — just regular text, NO background */
.pt-card--paid .elementor-heading-title,
.pt-card--paid h1.elementor-heading-title,
.pt-card--paid h2.elementor-heading-title,
.pt-card--paid h3.elementor-heading-title {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Specifically the 2nd heading (FREE banner) — slightly smaller, bolder */
.pt-card--paid .elementor-widget:nth-of-type(2) .elementor-heading-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-j2-accent-hover) !important;
  line-height: 1.45 !important;
  text-align: left !important;
  margin: 0 0 var(--space-5) !important;
  padding: 12px 14px !important;
  background: var(--color-j2-accent-bg) !important;
  border-radius: 8px !important;
  border-left: 3px solid var(--color-j2-accent) !important;
  display: block !important;
}

/* Feature bullet items — checkmark style (same as inmate/free) */
.pt-card--paid .elementor-widget-text-editor p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #52525b !important;
  margin: 0 0 var(--space-3) !important;
  padding: 0 0 0 28px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative;
}

.pt-card--paid .elementor-widget-text-editor p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  background: #18181b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  border-radius: 50%;
}

.pt-card--paid .elementor-widget-text-editor p strong {
  color: #18181b !important;
  font-weight: 600 !important;
}

/* ---------- BUTTON — yellow pill style like reference ---------- */
.pt-card .elementor-widget-button {
  margin-top: auto !important;
  padding-top: var(--space-6) !important;
}

.pt-card .elementor-widget-button .elementor-button-wrapper {
  width: 100%;
}

.pt-card .elementor-button {
  background: #fde047 !important;
  color: #18181b !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  border: 0 !important;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pt-card .elementor-button:hover {
  background: #fbbf24 !important;
  transform: translateY(-1px);
}

/* Mobile mode tweaks */
@media (max-width: 879px) {
  .section--pricing-table {
    padding: var(--space-12) var(--space-4) !important;
  }

  .pt-card {
    padding: var(--space-8) var(--space-6) !important;
  }
}

/* Mobile — disable scale + stack */
@media (max-width: 879px) {
  .pt-card--paid {
    transform: none;
  }

  .pt-card--paid::after {
    top: 14px;
    right: -28px;
    font-size: 10px;
    padding: 3px 30px;
  }
}

/* ============================================================
   SCP PRICING TABLE v4 — FINAL clean rebuild (Nov 2026)
   Brand new class names — no conflicts with old pricing CSS.
   ============================================================ */
.scp-pricing-section {
  background: linear-gradient(180deg, #f5f3fa 0%, #ede9f7 100%);
  padding: 80px 0 96px !important;
}

/* GRID layout — high specificity to beat Elementor flex */
html body .elementor .e-con.scp-pricing-grid {
  display: block !important;
  max-width: 1140px !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding: 0 24px !important;
  flex-direction: unset !important;
}

html body .elementor .e-con.scp-pricing-grid>.e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}

@media (min-width: 880px) {
  html body .elementor .e-con.scp-pricing-grid>.e-con-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 24px !important;
  }
}

/* Force pricing card widgets to fill their grid cell */
html body .elementor .e-con.scp-pricing-grid>.e-con-inner>.elementor-widget-scplus_pricing_card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: unset !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

html body .elementor .e-con.scp-pricing-grid>.e-con-inner>.elementor-widget-scplus_pricing_card>.elementor-widget-container {
  height: 100% !important;
}

html body .elementor .e-con.scp-pricing-grid>.e-con-inner>.elementor-widget-scplus_pricing_card .scp-price-card {
  height: 100% !important;
  width: 100% !important;
}

/* ============================================================
   SCP PRICE CARD — fully self-contained markup
   ============================================================ */
.scp-price-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px -6px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.scp-price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -16px rgba(15, 23, 42, 0.18);
}

/* Featured card — purple border + subtle bg tint */
.scp-price-card--featured {
  border: 2px solid #7b3aed;
  background: linear-gradient(180deg, #fff 0%, #faf5ff 100%);
}

/* "MOST POPULAR" badge — small pill above the card */
.scp-price-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #7b3aed;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 14px -4px rgba(123, 58, 237, 0.45);
}

/* Card title */
.scp-price-card__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: #18181b;
  line-height: 1.2;
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid #e5e7eb;
  letter-spacing: -0.01em;
}

/* Price highlight box */
.scp-price-card__price {
  background: #f5f3fa;
  color: #18181b;
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 3px solid #7b3aed;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.scp-price-card__price strong {
  color: #4d19a7;
  font-weight: 700;
  font-size: 18px;
}

.scp-price-card--featured .scp-price-card__price {
  background: #ede9f7;
  border-left-color: #4d19a7;
}

/* Features list — checkmark bullets */
.scp-price-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.scp-price-card__features li {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.55;
  color: #52525b;
}

.scp-price-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #18181b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.scp-price-card__features li strong {
  color: #18181b;
  font-weight: 600;
}

/* CTA button — yellow pill */
.scp-price-card__cta {
  display: block;
    background: var(--color-j1-accent);
    color: #ffffff;
  text-decoration: none;
  text-align: center;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  margin-top: auto;
  transition: background 0.2s ease, transform 0.2s ease;
}

.scp-price-card__cta:hover {
  background: #4d19a7;
  transform: translateY(-1px);
  color: #fff;
}

/* Featured card CTA — purple instead of yellow */
.scp-price-card--featured .scp-price-card__cta {
  background: #7b3aed;
  color: #fff;
}

.scp-price-card--featured .scp-price-card__cta:hover {
  background: #4d19a7;
}

/* Mobile */
@media (max-width: 879px) {
  .scp-pricing-section {
    padding: 48px 0 !important;
  }

  .scp-price-card {
    padding: 28px 24px;
  }
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Family-intro section CTA button */
.section--family-intro .family-intro-cta {
  text-align: center !important;
  margin-top: var(--space-6) !important;
}

.section--family-intro .family-intro-cta .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, var(--color-j1-accent) 0%, var(--color-j1-accent-hover) 100%) !important;
  color: #fff !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 20px -6px rgba(123, 58, 237, 0.40) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.section--family-intro .family-intro-cta .elementor-button::after {
  content: "↓";
  font-size: 18px;
  line-height: 1;
}

.section--family-intro .family-intro-cta .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(123, 58, 237, 0.55) !important;
}

/* ============================================================
   AFFORDABLE SECTION — 2-column (image left / text right)
   ============================================================ */
html body .elementor .e-con.affordable-card {
  display: block !important;
  max-width: 1140px !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding: var(--space-12) var(--space-6) !important;
  flex-direction: unset !important;
}

html body .elementor .e-con.affordable-card>.e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-8) !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}

@media (min-width: 880px) {
  html body .elementor .e-con.affordable-card>.e-con-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--space-12) !important;
  }
}

/* Each column fills its grid cell */
html body .elementor .e-con.affordable-card>.e-con-inner>.affordable-col,
html body .elementor .e-con.affordable-card .affordable-col {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: unset !important;
  justify-self: stretch !important;
  display: block !important;
}

/* Image widget inside column — full width */
html body .elementor .e-con.affordable-card .affordable-col--image .elementor-widget-image {
  width: 100% !important;
}

html body .elementor .e-con.affordable-card .affordable-col--image .elementor-widget-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.20);
}

/* Image column */
.affordable-col--image .elementor-widget-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.20);
  object-fit: cover !important;
}

/* Text column — left-align everything, reset the centered styling */
.affordable-col--text {
  text-align: left !important;
}

.affordable-col--text .elementor-widget-heading h1,
.affordable-col--text .elementor-widget-heading h2,
.affordable-col--text .elementor-widget-heading h3 {
  text-align: left !important;
  margin-bottom: var(--space-5) !important;
  line-height: 1.2 !important;
}

.affordable-col--text .elementor-widget-text-editor p {
  text-align: left !important;
  line-height: 1.6 !important;
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Header + Journey Switcher
   ============================================================ */
@media (max-width: 900px) {

  /* Hide desktop CTAs (Get Started / Sign Them Up / Start Connecting + Sign In)
     They live inside the mobile menu instead. */
  .site-header__cta,
  .site-header__signin,
  .elementor-widget.site-header__cta,
  .elementor-widget.site-header__signin {
    display: none !important;
  }

  /* Show mobile toggle */
  .scplus_mobile_toggle,
  .elementor-widget-scplus_mobile_toggle {
    display: block !important;
  }

  /* Header inner — logo on left, toggle on right */
  .site-header__inner,
  .e-con.site-header__inner>.e-con-inner,
  .e-con.site-header__inner {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 12px 16px !important;
  }

  /* Logo doesn't stretch */
  .site-header__inner .scplus_site_logo,
  .site-header__inner .elementor-widget-scplus_site_logo {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Nav widgets hidden on mobile (they're inside mobile menu) */
  .site-header__inner .scplus_site_nav,
  .site-header__inner .elementor-widget-scplus_site_nav {
    display: none !important;
  }
}

/* Journey switcher bar — compact on mobile */
@media (max-width: 600px) {

  .scplus_journey_switcher,
  .elementor-widget-scplus_journey_switcher {
    font-size: 12px !important;
  }

  .scplus_journey_switcher .switcher-bar,
  .scplus_journey_switcher__bar {
    padding: 6px 12px !important;
    text-align: center !important;
  }

  .scplus_journey_switcher__bar,
  .scplus_journey_switcher__bar>* {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

/* ============================================================
   MOBILE MENU OPEN — Layout buttons + menu items vertically
   ============================================================ */
@media (max-width: 900px) {

  /* When menu is open, show the CTAs back (override earlier display:none) */
  body.is-menu-open .site-header__cta,
  body.is-menu-open .site-header__signin {
    display: block !important;
  }

  /* But only show the journey-matching variant */
  body.is-menu-open:not(.journey-j1):not(.journey-j2) .site-header__cta--j1,
  body.is-menu-open:not(.journey-j1):not(.journey-j2) .site-header__cta--j2,
  body.is-menu-open:not(.journey-j1):not(.journey-j2) .site-header__signin--j1,
  body.is-menu-open:not(.journey-j1):not(.journey-j2) .site-header__signin--j2 {
    display: none !important;
  }

  body.is-menu-open.journey-j1 .site-header__cta--general,
  body.is-menu-open.journey-j1 .site-header__cta--j2,
  body.is-menu-open.journey-j1 .site-header__signin--general,
  body.is-menu-open.journey-j1 .site-header__signin--j2 {
    display: none !important;
  }

  body.is-menu-open.journey-j2 .site-header__cta--general,
  body.is-menu-open.journey-j2 .site-header__cta--j1,
  body.is-menu-open.journey-j2 .site-header__signin--general,
  body.is-menu-open.journey-j2 .site-header__signin--j1 {
    display: none !important;
  }

  /* Mobile menu — column layout with proper spacing */
  body.is-menu-open .site-header,
  body.is-menu-open .site-header__inner,
  body.is-menu-open .e-con.site-header__inner,
  body.is-menu-open .e-con.site-header__inner>.e-con-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
    padding: var(--space-6) var(--space-5) var(--space-8) !important;
  }

  /* Show nav menus in mobile menu */
  body.is-menu-open .site-header__inner .scplus_site_nav,
  body.is-menu-open .site-header__inner .elementor-widget-scplus_site_nav {
    display: block !important;
    width: 100% !important;
  }

  body.is-menu-open .scplus_site_nav__list,
  body.is-menu-open .site-nav__list,
  body.is-menu-open .scplus-site-nav,
  body.is-menu-open ul.scplus-site-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-1) !important;
  }

  body.is-menu-open .scplus_site_nav a,
  body.is-menu-open .scplus-site-nav a {
    display: block !important;
    padding: var(--space-3) var(--space-4) !important;
    text-align: left !important;
    border-bottom: 1px solid var(--color-border);
  }

  /* CTA + Sign In buttons — full-width with gap from nav above */
  body.is-menu-open .site-header__cta {
    margin: var(--space-4) 0 0 !important;
    width: 100% !important;
  }

  body.is-menu-open .site-header__cta .elementor-button,
  body.is-menu-open .site-header__signin .elementor-button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  body.is-menu-open .site-header__signin {
    margin: var(--space-2) 0 0 !important;
    width: 100% !important;
  }
}

/* ============================================================
   MOBILE MENU CLOSE BUTTON + SPACING FIXES
   ============================================================ */

/* When menu is open: hamburger SVG hides, X shows via ::before */
body.is-menu-open .site-header__menu svg {
  opacity: 0 !important;
  transform: scale(0.5);
}

.site-header__menu {
  position: relative;
}

body.is-menu-open .site-header__menu::before {
  content: "✕";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 400;
  color: currentColor;
  line-height: 1;
}

/* Smooth transition on hamburger icon */
.site-header__menu svg {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ============================================================
   Spacing between Sign Them Up button and hamburger toggle
   (visible at tablet sizes 600-1024px where both are shown)
   ============================================================ */
.site-header__menu,
.elementor-widget-scplus_mobile_toggle {
  margin-left: var(--space-4) !important;
}

/* Hide mobile toggle on desktop (>=1024px) */
@media (min-width: 1024px) {

  .site-header__menu,
  .elementor-widget-scplus_mobile_toggle {
    display: none !important;
  }
}

/* On tablet (901–1023px), hide the desktop CTAs too (was only hidden <901)
   so we don't have CTA + hamburger overlap */
@media (max-width: 1023px) {

  .site-header__cta:not(.is-menu-open .site-header__cta),
  .site-header__signin:not(.is-menu-open .site-header__signin) {
    display: none !important;
  }

  body.is-menu-open .site-header__cta,
  body.is-menu-open .site-header__signin {
    display: block !important;
  }
  
  html body .elementor .e-con.e-con-full.aurora.hero-mega {
    padding-top: 40px !important;
}
}

/* ============================================================
   FORCE CLOSE BUTTON + GAP — v2.1.5
   Higher specificity to defeat any cached/conflicting rules
   ============================================================ */

/* Ensure menu toggle button has positioning context */
html body .site-header__menu {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  padding: 0 !important;
}

/* Make hamburger SVG fit inside button */
html body .site-header__menu svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* When menu is OPEN: hide the hamburger SVG */
html body.is-menu-open .site-header__menu svg {
  opacity: 0 !important;
  pointer-events: none;
}

/* Show ✕ via ::after on the button when menu open */
html body.is-menu-open .site-header__menu::after {
  content: "✕";
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #0f172a !important;
  line-height: 1 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  pointer-events: none;
}

/* Gap between Sign Them Up button (or any CTA) and the hamburger toggle */
html body .elementor-widget-scplus_mobile_toggle {
  margin-left: 16px !important;
}

html body .site-header__menu {
  margin-left: 0 !important;
}

/* ============================================================
   MOBILE MENU OPEN — FINAL COMPACT FIX v2.1.6
   Force tight vertical layout, hide all gaps/spacing
   ============================================================ */
@media (max-width: 1023px) {

  /* Open menu — container layout */
  html body.is-menu-open .site-header__inner,
  html body.is-menu-open .e-con.site-header__inner,
  html body.is-menu-open .e-con.site-header__inner>.e-con-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    --kit-widget-spacing: 0 !important;
    padding: 20px !important;
  }

  /* Zero-out margins on ALL children of open menu */
  html body.is-menu-open .site-header__inner>*,
  html body.is-menu-open .site-header__inner>.e-con-inner>* {
    margin: 0 !important;
  }

  /* Visible nav (journey-matching) — show items in column */
  html body.is-menu-open .scp-nav-wrap,
  html body.is-menu-open .elementor-widget-scplus_site_nav {
    margin: 8px 0 16px !important;
  }

  html body.is-menu-open nav.site-nav,
  html body.is-menu-open .site-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  html body.is-menu-open .site-nav a {
    display: block !important;
    padding: 12px 0 !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 15px !important;
  }

  html body.is-menu-open .site-nav a:last-child {
    border-bottom: 0;
  }

  /* CTA + SignIn — tight spacing */
  html body.is-menu-open .site-header__cta {
    margin-top: 16px !important;
  }

  html body.is-menu-open .site-header__signin {
    margin-top: 8px !important;
  }

  html body.is-menu-open .site-header__cta .elementor-button,
  html body.is-menu-open .site-header__signin .elementor-button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* Make sure HIDDEN widgets take ZERO space */
  html body.is-menu-open [style*="display: none"],
  html body.is-menu-open [style*="display:none"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Mobile toggle — position absolute so it doesn't take row in menu flow */
  html body.is-menu-open .elementor-widget-scplus_mobile_toggle {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    margin: 0 !important;
    z-index: 100;
  }

  /* The header inner needs relative positioning for absolute toggle */
  html body.is-menu-open .site-header__inner,
  html body.is-menu-open .e-con.site-header__inner {
    position: relative !important;
    padding-top: 64px !important;
    /* room for absolute toggle */
  }
}

/* ============================================================
   J2 (Connect) — Blue/Indigo variants for shared section styles
   ============================================================ */

/* Pitch callout — blue gradient on j2 pages */
body.journey-j2 .pitch-callout {
  background: linear-gradient(135deg, var(--color-j2-accent) 0%, var(--color-j2-accent-hover) 100%) !important;
}

body.journey-j2 .pitch-callout::before {
  color: rgba(255, 255, 255, 0.10);
}

/* Zigzag timeline — blue accent on j2 */
body.journey-j2 .zigzag-timeline>.e-con-inner::before {
  background: linear-gradient(180deg, transparent 0%, var(--color-j2-accent) 8%, var(--color-j2-accent) 92%, transparent 100%) !important;
}

body.journey-j2 .zigzag-timeline .timeline-num {
  background: linear-gradient(135deg, var(--color-j2-accent) 0%, var(--color-j2-accent-hover) 100%) !important;
  box-shadow: 0 6px 16px -4px rgba(29, 64, 175, 0.5) !important;
}

body.journey-j2 .zigzag-timeline .timeline-item:hover {
  box-shadow: 0 24px 60px -20px rgba(29, 64, 175, 0.38), 0 4px 10px -4px rgba(15, 23, 42, 0.08) !important;
}

body.journey-j2 .zigzag-timeline .elementor-widget-scplus_timeline_step::after {
  border-color: var(--color-j2-accent) !important;
  box-shadow: 0 0 0 5px rgba(29, 64, 175, 0.15) !important;
}

/* Pricing — featured/paid badge in blue on j2 */
body.journey-j2 .pt-card--paid::before {
  content: "MOST POPULAR";
  background: var(--color-j2-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px -4px rgba(29, 64, 175, 0.45) !important;
}

body.journey-j2 .pt-card--paid {
  border: 2px solid var(--color-j2-accent) !important;
}

/* Affordable image fallback for j2 */
body.journey-j2 .affordable-col--image .elementor-widget-image img {
  /* same styling — works on both journeys */
}

/* Family intro CTA — blue on j2 */
body.journey-j2 .section--family-intro .family-intro-cta .elementor-button {
  background: linear-gradient(135deg, var(--color-j2-accent) 0%, var(--color-j2-accent-hover) 100%) !important;
  box-shadow: 0 8px 20px -6px rgba(29, 64, 175, 0.40) !important;
}

body.journey-j2 .section--family-intro .family-intro-cta .elementor-button:hover {
  box-shadow: 0 14px 30px -8px rgba(29, 64, 175, 0.55) !important;
}

/* Affordable heading gradient — blue on j2 */
body.journey-j2 .affordable-card .elementor-widget-heading h1,
body.journey-j2 .affordable-card .elementor-widget-heading h2,
body.journey-j2 .affordable-card .elementor-widget-heading h3 {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-j2-accent-hover) 100%) !important;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* ============================================================
   HERO SECTION — Remove any extra padding/margin from outer wrapper
   ============================================================ */
html body .elementor .e-con.e-con-full.aurora.hero-mega {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-top: 0 !important;
}
html body .elementor .e-con.e-con-full.supportTop.aurora.hero-mega {
    padding-top: 90px !important;
}

/* Reduce hero section internal padding so content sits closer to top */
.aurora.hero-mega>section.aurora.hero-mega,
section.aurora.hero-mega {
  padding: 48px 0 64px !important;
}

/* Make sure .container inside hero uses the standard 1140 with horizontal padding */
.aurora.hero-mega>section .container,
section.aurora.hero-mega .container {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
}

/* Split hero — ensure proper 2-col layout */
.aurora.hero-mega .split-hero {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 40px !important;
  align-items: center;
}

@media (min-width: 768px) {
  .aurora.hero-mega .split-hero {
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 48px !important;
  }
}

/* ============================================================
   PAID CARD BLOB FIX — Reset all pseudo-elements explicitly v2.2.2
   ============================================================ */
/* Reset ALL ::before pseudo-elements inside paid cards */
html body .pt-card--paid *::before {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

/* Override paid card own ::before to exact small badge */
html body .pt-card--paid::before,
html body.journey-j2 .pt-card--paid::before {
  content: "MOST POPULAR" !important;
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  background: var(--color-j2-accent) !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  display: inline-block !important;
  line-height: 1 !important;
  box-shadow: 0 6px 14px -4px rgba(29, 64, 175, 0.45) !important;
  z-index: 5 !important;
}

/* Force checkmark sizes inside paid card */
html body .pt-card--paid .elementor-widget-text-editor p::before {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}

/* Make sure text-editor in paid card has proper layout, no inherited large bgs */
html body .pt-card--paid .elementor-widget-text-editor,
html body .pt-card--paid .elementor-widget-text-editor>.elementor-widget-container {
  background: none !important;
  border-radius: 0 !important;
}

/* ============================================================
   PRICING CARD PADDING POLISH v2.2.3
   ============================================================ */
html body .elementor .e-con.pt-card {
  padding: 40px 32px !important;
}

html body .elementor .e-con.pt-card>.e-con-inner {
  padding: 0 !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Inner widget container padding — clean reset */
html body .pt-card .elementor-widget {
  margin: 0 !important;
}

/* Card title — more breathing room below it */
html body .pt-card .elementor-widget-heading:first-of-type {
  margin-bottom: 8px !important;
}

html body .pt-card .elementor-widget-heading:first-of-type h2,
html body .pt-card .elementor-widget-heading:first-of-type h3 {
  font-size: 22px !important;
  text-align: left !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--color-border);
  margin: 0 !important;
}

/* Text-editor / features list — tighter row spacing + checkmarks aligned */
html body .pt-card .elementor-widget-text-editor p {
  padding: 6px 0 6px 30px !important;
  margin: 0 0 6px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative;
  text-align: left !important;
}

html body .pt-card .elementor-widget-text-editor p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #18181b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
  flex-shrink: 0;
}

/* Hide checkmark on "headline" paragraphs (those that are just bold intro text) */
html body .pt-card .elementor-widget-text-editor p:has(strong:only-child) {
  padding-left: 0 !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin-top: 8px !important;
  margin-bottom: 4px !important;
}

html body .pt-card .elementor-widget-text-editor p:has(strong:only-child)::before {
  display: none !important;
}

/* Cards should be equal height — content fills available space */
html body .scp-pricing-grid>.e-con-inner>.pt-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* ============================================================
   AFFORDABLE HEADING — Fix invisible-text-on-blue-bar bug v2.2.4
   The gradient text-clip was failing; use plain color instead.
   ============================================================ */
html body .affordable-card .elementor-widget-heading h1,
html body .affordable-card .elementor-widget-heading h2,
html body .affordable-card .elementor-widget-heading h3,
html body.journey-j2 .affordable-card .elementor-widget-heading h1,
html body.journey-j2 .affordable-card .elementor-widget-heading h2,
html body.journey-j2 .affordable-card .elementor-widget-heading h3 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
}

/* Use journey accent color on j2 instead of gradient */
html body.journey-j2 .affordable-card .elementor-widget-heading h1,
html body.journey-j2 .affordable-card .elementor-widget-heading h2,
html body.journey-j2 .affordable-card .elementor-widget-heading h3 {
  color: var(--color-j2-accent-hover) !important;
  -webkit-text-fill-color: var(--color-j2-accent-hover) !important;
}

html body.journey-j1 .affordable-card .elementor-widget-heading h1,
html body.journey-j1 .affordable-card .elementor-widget-heading h2,
html body.journey-j1 .affordable-card .elementor-widget-heading h3 {
  color: var(--color-j1-accent-hover) !important;
  -webkit-text-fill-color: var(--color-j1-accent-hover) !important;
}

/* ============================================================
   PITCH CALLOUT + PRIVACY CARD POLISH v2.2.5
   ============================================================ */

/* Pitch callout — ALL headings white, large + readable */
html body .pitch-callout .elementor-widget-heading h1,
html body .pitch-callout .elementor-widget-heading h2,
html body .pitch-callout .elementor-widget-heading h3,
html body .pitch-callout .elementor-widget-heading h1.elementor-heading-title,
html body .pitch-callout .elementor-widget-heading h2.elementor-heading-title,
html body .pitch-callout .elementor-widget-heading h3.elementor-heading-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-align: center !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* First heading — bigger title */
html body .pitch-callout .elementor-widget-heading:first-of-type h2 {
  font-size: 28px !important;
  margin-bottom: 16px !important;
}

/* Last heading — emphasize call to action */
html body .pitch-callout .elementor-widget-heading:last-of-type h2,
html body .pitch-callout .elementor-widget-heading:last-of-type h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0.95;
}

/* Force ALL text in pitch callout to be white */
html body .pitch-callout * {
  color: #fff !important;
}

html body .pitch-callout strong {
  color: #fff !important;
  font-weight: 700 !important;
}

/* ============================================================
   PRIVACY (FREE CARD) — Better visual treatment
   ============================================================ */
html body .free-card {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
  padding: 40px 32px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.06) !important;
}

html body .free-card .elementor-widget-heading h1,
html body .free-card .elementor-widget-heading h2,
html body .free-card .elementor-widget-heading h3 {
  font-size: 24px !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--color-border);
}

html body.journey-j2 .free-card .elementor-widget-heading h2,
html body.journey-j2 .free-card .elementor-widget-heading h3 {
  color: var(--color-j2-accent-hover) !important;
}

html body.journey-j1 .free-card .elementor-widget-heading h2,
html body.journey-j1 .free-card .elementor-widget-heading h3 {
  color: var(--color-j1-accent-hover) !important;
}

html body .free-card .elementor-widget-text-editor p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--color-secondary) !important;
  text-align: center !important;
  margin: 0 0 12px !important;
}

/* ============================================================
   PRIVACY + WHY SIGN UP — Side-by-side 2-column v2.2.6
   ============================================================ */
html body .elementor .e-con.privacy-signup-grid {
  display: block !important;
  max-width: 1140px !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding: 0 24px !important;
  flex-direction: unset !important;
}

html body .elementor .e-con.privacy-signup-grid>.e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex-direction: unset !important;
}

@media (min-width: 880px) {
  html body .elementor .e-con.privacy-signup-grid>.e-con-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 24px !important;
  }
}

/* Each card in this grid stretches full height */
html body .elementor .e-con.privacy-signup-grid>.e-con-inner>.e-con {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  padding: 35px !important;
}

/* Inside the grid, the free-card no longer needs its own max-width */
html body .elementor .e-con.privacy-signup-grid .free-card {
  max-width: none !important;
  margin: 0 !important;
  height: 100%;
}

/* Same for pitch-callout */
html body .elementor .e-con.privacy-signup-grid .pitch-callout {
  max-width: none !important;
  margin: 0 !important;
  height: 100%;
}

/* ============================================================
   PITCH CALLOUT in 2-col grid — TIGHTEN sizes v2.2.7
   ============================================================ */

/* When pitch-callout is INSIDE the privacy-signup-grid, tighter sizes */
html body .privacy-signup-grid .pitch-callout {
  padding: 32px 28px !important;
  text-align: center;
}

html body .privacy-signup-grid .pitch-callout .elementor-widget-heading h2 {
  font-size: 24px !important;
}

html body .privacy-signup-grid .pitch-callout .elementor-widget-text-editor p {
  font-size: 17px !important;
  line-height: 1.5 !important;
}

/* "Start free today" — the LAST heading — make it smaller, more refined */
html body .privacy-signup-grid .pitch-callout .elementor-widget-heading:last-of-type h2,
html body .privacy-signup-grid .pitch-callout .elementor-widget-heading:last-of-type h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Privacy card — also tighten to balance heights */
html body .privacy-signup-grid .free-card {
  padding: 32px 28px !important;
}

html body .privacy-signup-grid .free-card .elementor-widget-heading h2 {
  font-size: 24px !important;
}

html body .privacy-signup-grid .free-card .elementor-widget-text-editor p {
  font-size: 17px !important;
  line-height: 1.55 !important;
}

/* Both cards in this row — equal height, content top-aligned with auto bottom flex */
html body .privacy-signup-grid>.e-con-inner>.e-con {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* ============================================================
   PRIVACY + WHY SIGN UP — Left-align text v2.2.8
   ============================================================ */
html body .privacy-signup-grid .free-card,
html body .privacy-signup-grid .pitch-callout,
html body .privacy-signup-grid .free-card *,
html body .privacy-signup-grid .pitch-callout * {
  text-align: left !important;
}

/* Headings left-aligned */
html body .privacy-signup-grid .free-card .elementor-widget-heading h1,
html body .privacy-signup-grid .free-card .elementor-widget-heading h2,
html body .privacy-signup-grid .free-card .elementor-widget-heading h3,
html body .privacy-signup-grid .pitch-callout .elementor-widget-heading h1,
html body .privacy-signup-grid .pitch-callout .elementor-widget-heading h2,
html body .privacy-signup-grid .pitch-callout .elementor-widget-heading h3 {
  text-align: left !important;
}

/* Paragraph text */
html body .privacy-signup-grid .free-card .elementor-widget-text-editor p,
html body .privacy-signup-grid .pitch-callout .elementor-widget-text-editor p {
  text-align: left !important;
}