/* =========================================================
   VALIA LIVE — Brand Design System
   Overrides + extends the base EdCare template (main.css)
   ========================================================= */

:root {
  /* ---- Brand gradient stops (source of truth) ----
     Full 6-stop brand spectrum - blue through purple, magenta,
     red, and all the way to orange/yellow-orange. Every shared
     gradient below is built from these so the whole site stays
     in sync with one edit here. */
  --valia-deep-blue: #1011CD;
  --valia-electric-blue: #003BFF;
  --valia-purple: #7A00E0;
  --valia-violet: #9B09D7;
  --valia-magenta: #D8007A;
  --valia-hot-pink: #D8095F;
  --valia-red: #F51C2C;
  --valia-orange: #FF5C00;
  --valia-golden-orange: #FFA800;

  --valia-gradient: linear-gradient(90deg,
      var(--valia-electric-blue) 0%,
      var(--valia-purple) 20%,
      var(--valia-magenta) 40%,
      var(--valia-red) 60%,
      var(--valia-orange) 80%,
      var(--valia-golden-orange) 100%);

  --valia-gradient-135: linear-gradient(135deg,
      var(--valia-electric-blue) 0%,
      var(--valia-purple) 20%,
      var(--valia-magenta) 40%,
      var(--valia-red) 60%,
      var(--valia-orange) 80%,
      var(--valia-golden-orange) 100%);

  --valia-gradient-warm: linear-gradient(90deg, var(--valia-red), var(--valia-orange), var(--valia-golden-orange));
  --valia-gradient-cool: linear-gradient(90deg, var(--valia-deep-blue), var(--valia-electric-blue), var(--valia-purple));

  --valia-navy: #0A0B2E;
  --valia-navy-2: #0F1035;
  --valia-ink: #12122B;
  --valia-body: #575870;
  --valia-grey-bg: #F5F5FB;
  --valia-border: #E7E7F3;
  --valia-white: #FFFFFF;

  /* ---- Re-map template tokens so existing components pick up the brand ---- */
  --ed-ff-body: 'Outfit', sans-serif;
  --ed-ff-heading: 'Outfit', sans-serif;
  --ed-color-heading-primary: var(--valia-ink);
  --ed-color-text-body: var(--valia-body);
  --ed-color-theme-primary: var(--valia-purple);
  --ed-color-grey-1: var(--valia-grey-bg);
  --ed-color-grey-2: var(--valia-grey-bg);
  --ed-color-bg-1: var(--valia-navy);
  --ed-color-bg-2: var(--valia-navy-2);
  --ed-color-border-1: var(--valia-border);
}

/* ---------------------------------------------------------
   Gradient utilities
   --------------------------------------------------------- */
.valia-gradient-text {
  background: var(--valia-gradient-135);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--valia-purple);
  /* Fix: the gradient's blue/purple end (~0-40%) is close in tone to
     the dark hero background, so that part of the heading was nearly
     illegible. A soft dark drop-shadow gives every stop of the
     gradient a consistent edge of contrast without touching the
     gradient's own colors. */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) drop-shadow(0 0 22px rgba(0, 0, 0, .35));
}

.valia-gradient-bg { background: var(--valia-gradient-135); }
.valia-gradient-bg-h { background: var(--valia-gradient); }

.valia-gradient-border {
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(#fff, #fff), var(--valia-gradient-135);
}

.valia-section-dark {
  background:
    radial-gradient(60% 90% at 12% -5%, rgba(155, 9, 215, .32), transparent 62%),
    radial-gradient(55% 75% at 100% 105%, rgba(212, 12, 175, .2), transparent 60%),
    linear-gradient(160deg, #0A0930 0%, #1B1259 38%, #2B1160 68%, #3B0B4F 100%);
  color: #E7E7FA;
}

.valia-section-dark .section-title,
.valia-section-dark h1,
.valia-section-dark h2,
.valia-section-dark h3,
.valia-section-dark h4 {
  color: #fff;
}

.valia-section-dark p { color: #B9BAD9; }

/* Fix: .valia-pillar and plain .valia-card keep their own white card
   background regardless of the section around them, but the rule
   above forces all headings in a dark section to white - combined,
   that rendered these headings invisible (white text on a white
   card). Cards that opt into the dark look explicitly set their own
   background and heading color inline, so those are unaffected
   (inline styles win); this only restores contrast for the ones
   left on their default white card background. */
.valia-section-dark .valia-pillar h3,
.valia-section-dark .valia-card h3 {
  color: var(--valia-ink);
}

/* Same white-card-in-dark-section problem, for body copy: any
   paragraph left without its own inline colour would otherwise
   inherit the dark section's light-grey (#B9BAD9), which is very
   low-contrast on a white card. Cards that opt into the dark look
   already set an explicit inline colour on their <p>, so this only
   affects (and fixes) the ones on the default white background. */
.valia-section-dark .valia-pillar p,
.valia-section-dark .valia-card p {
  color: #ebe5e5;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.valia-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  color: #fff !important;
  background: var(--valia-gradient-135);
  background-size: 180% 180%;
  border: none;
  transition: all .35s ease;
  box-shadow: 0 10px 30px -8px rgba(76, 6, 207, .55);
}

.valia-btn:hover {
  background-position: 100% 0;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -8px rgba(212, 12, 175, .55);
}

.valia-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  color: var(--valia-ink);
  background: #fff;
  border: 2px solid var(--valia-border);
  transition: all .3s ease;
}

.valia-btn-outline:hover {
  border-color: var(--valia-purple);
  color: var(--valia-purple);
}

.valia-section-dark .valia-btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.25);
  background: transparent;
}

.valia-section-dark .valia-btn-outline:hover {
  border-color: #fff;
}

/* Fix: .valia-pillar/.valia-card keep their own white card background
   regardless of section (see the matching h3 fix above) - a
   .valia-btn-outline inside one of these white cards sits on white,
   not on the dark gradient, so the override above is wrong there and
   needs to be reverted back to the default light-card button style. */
.valia-section-dark .valia-pillar .valia-btn-outline,
.valia-section-dark .valia-card .valia-btn-outline {
  color: var(--valia-ink);
  border-color: var(--valia-border);
  background: #fff;
}

.valia-section-dark .valia-pillar .valia-btn-outline:hover,
.valia-section-dark .valia-card .valia-btn-outline:hover {
  border-color: var(--valia-purple);
  color: var(--valia-purple);
}

/* ---------------------------------------------------------
   Badges / eyebrows
   --------------------------------------------------------- */
.valia-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--valia-purple);
  background: rgba(76, 6, 207, .08);
  border: 1px solid rgba(76, 6, 207, .18);
}

.valia-section-dark .valia-eyebrow {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}

.valia-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--valia-gradient);
}

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */
.valia-card {
  background: #fff;
  border: 1px solid var(--valia-border);
  border-radius: 20px;
  padding: 36px 30px;
  transition: all .35s ease;
  height: 100%;
}

.valia-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(16, 17, 205, .18);
  border-color: transparent;
}

.valia-icon-circle {
  width: 66px;
  height: 66px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--valia-gradient-135);
  color: #fff;
  font-size: 26px;
  margin-bottom: 22px;
}

/* ---------------------------------------------------------
   Pillar / number badges
   --------------------------------------------------------- */
.valia-pillar {
  text-align: center;
  padding: 34px 22px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--valia-border);
  height: 100%;
}

.valia-pillar .num {
  display: inline-flex;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: var(--valia-gradient-135);
  margin-bottom: 18px;
}

/* ---------------------------------------------------------
   Timeline (How it works)
   --------------------------------------------------------- */
.valia-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.valia-timeline:before {
  content: '';
  position: absolute;
  top: 33px;
  left: 5%;
  right: 5%;
  height: 3px;
  background: var(--valia-gradient);
  opacity: .5;
  z-index: 0;
}

.valia-timeline-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.valia-timeline-step .step-num {
  width: 66px;
  height: 66px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--valia-gradient-135);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  color: var(--valia-purple);
}

@media (max-width: 991px) {
  .valia-timeline { grid-template-columns: repeat(2, 1fr); }
  .valia-timeline:before { display: none; }
}

@media (max-width: 575px) {
  .valia-timeline { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Comparison table (Traditional vs Valia Live)
   --------------------------------------------------------- */
.valia-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
}

.valia-compare th {
  padding: 18px 24px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.valia-compare th:first-child { text-align: left; }

.valia-compare td {
  background: #fff;
  padding: 18px 24px;
  border-top: 1px solid var(--valia-border);
  border-bottom: 1px solid var(--valia-border);
  font-size: 15px;
}

.valia-compare td:first-child {
  border-left: 1px solid var(--valia-border);
  border-radius: 14px 0 0 14px;
  font-weight: 600;
  color: var(--valia-ink);
}

.valia-compare td:last-child {
  border-right: 1px solid var(--valia-border);
  border-radius: 0 14px 14px 0;
}

.valia-compare .col-them { color: #9295AB; }
.valia-compare .col-us { color: var(--valia-purple); font-weight: 600; }
.valia-compare .col-us i { color: var(--valia-magenta); margin-right: 8px; }
.valia-compare .col-them i { color: #C7C8D6; margin-right: 8px; }

@media (max-width: 767px) {
  .valia-compare, .valia-compare thead, .valia-compare tbody, .valia-compare th, .valia-compare td, .valia-compare tr {
    display: block;
  }
  .valia-compare thead { display: none; }
  .valia-compare tr { margin-bottom: 14px; border-radius: 14px; overflow: hidden; }
  .valia-compare td { border-radius: 0 !important; border: none; border-bottom: 1px solid var(--valia-border); }
  .valia-compare td:before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #9295AB;
    margin-bottom: 4px;
  }
}

/* ---------------------------------------------------------
   Pricing
   --------------------------------------------------------- */
.valia-price-card {
  background: #fff;
  border: 1px solid var(--valia-border);
  border-radius: 26px;
  padding: 44px 36px;
  text-align: center;
  position: relative;
}

.valia-price-card.featured {
  border: none;
  color: #fff;
  background: var(--valia-gradient-135);
  box-shadow: 0 30px 60px -20px rgba(76, 6, 207, .5);
  transform: scale(1.03);
}

.valia-price-card .amount {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
}

.valia-price-card .amount span {
  font-size: 17px;
  font-weight: 500;
  opacity: .75;
}

.valia-price-card ul { text-align: left; margin: 26px 0; }

.valia-price-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 15px;
}

.valia-price-card ul li i { color: var(--valia-magenta); margin-top: 4px; }
.valia-price-card.featured ul li i { color: #fff; }

/* ---------------------------------------------------------
   Stat counters
   --------------------------------------------------------- */
.valia-stat { text-align: center; }

.valia-stat .num {
  font-size: 46px;
  font-weight: 800;
  background: var(--valia-gradient-135);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.valia-stat .label { color: var(--valia-body); font-weight: 500; }
.valia-section-dark .valia-stat .label { color: #B9BAD9; }

/* ---------------------------------------------------------
   Program switch cards (Retiree Vitality Club vs Executive Suite)
   --------------------------------------------------------- */
.valia-program-card {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 40px;
  color: #fff;
  isolation: isolate;
}

.valia-program-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.valia-program-card:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,11,46,.15) 0%, rgba(10,11,46,.92) 100%);
  z-index: -1;
}

.valia-program-card .tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--valia-gradient-135);
}

.valia-program-card h3 {
  width: 100%;
  line-height: 1.3;
  margin: 0 0 12px;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}

.valia-program-card > p {
  width: 100%;
  max-width: 480px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   Header / nav brand tweaks
   --------------------------------------------------------- */
.header .top-bar { background: var(--valia-navy); }
.header .primary-header { background: #fff; box-shadow: 0 4px 30px rgba(16,17,205,.06); }
.header-logo img { max-height: 52px; width: auto; }

/* Fix: the mobile drawer logo was constrained only by max-width, so a
   taller logo mark renders bigger than intended there; cap the height
   too (both constraints apply together, aspect ratio stays intact). */
.mobile-side-menu .side-menu-head img { max-height: 44px; width: auto; }

.header .sub-menu > li > a.menu-item,
.header .sub-menu > li > a {
  font-weight: 600;
}

.header .sub-menu > li.active > a,
.header .sub-menu > li > a:hover {
  color: var(--valia-purple);
}

a.ed-primary-btn,
button.ed-primary-btn {
  background: var(--valia-gradient-135) !important;
  border: none !important;
}

/* Footer */
.footer-section { background: var(--valia-navy) !important; }
.footer-section .widget-header { color: #fff; }
.footer-section p, .footer-section a, .footer-section li { color: #B9BAD9; }
.footer-section a:hover { color: #fff; }
.copyright-area { border-top: 1px solid rgba(255,255,255,.08); }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.valia-hero {
  position: relative;
  padding: 190px 0 110px;
  overflow: hidden;
  background:
    radial-gradient(65% 90% at 15% -10%, rgba(155, 9, 215, .3), transparent 60%),
    radial-gradient(55% 70% at 100% 100%, rgba(212, 12, 175, .18), transparent 60%),
    linear-gradient(160deg, #0A0930 0%, #1B1259 38%, #2B1160 68%, #3B0B4F 100%);
  color: #fff;
}

.valia-hero:before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 620px;
  background: var(--valia-gradient-135);
  opacity: .22;
  filter: blur(90px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Fix: the decorative blob above had no z-index, so as an absolutely
   positioned element it painted on top of the hero's static in-flow text
   (per CSS stacking order), washing headings/copy out with a translucent
   violet haze. Lift the actual content above it explicitly. */
.valia-hero > .container {
  position: relative;
  z-index: 1;
}

.valia-hero h1 {
  color: #fff;
  font-size: 45px;
  font-weight: 800;
  line-height: 1.12;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}
.valia-hero p.lead {
  color: #E3E4F7;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  max-width: 620px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* Fix: the eyebrow pill's default purple-on-white styling has poor
   contrast against the hero's dark gradient (violet-on-indigo). */
.valia-hero .valia-eyebrow {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
}

.valia-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

.valia-trust-row {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  color: #9294c2;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}

/* Fix: .valia-hero-badge is a sibling of .valia-hero-media, not a child,
   so it had no positioned ancestor scoped to the photo itself - it was
   anchoring to the full-width hero container instead, landing under the
   text column (overlapping the trust row) and getting clipped by
   .valia-hero's overflow:hidden depending on viewport/column height.
   This wrapper gives it a positioning context that exactly matches the
   photo's box, on every screen size. */
.valia-hero-media-wrap {
  position: relative;
}

.valia-hero-media {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.55);
  aspect-ratio: 4 / 3;
}

.valia-hero-media img { display: block; width: 100%; height: 100%; object-fit: inherit; }

.valia-hero-badge {
  position: absolute;
  left: 24px;
  bottom: -24px;
  background: #fff;
  color: var(--valia-ink);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 20px 40px -12px rgba(16,17,205,.35);
  font-weight: 700;
  font-size: 14px;
}

.valia-hero-badge .valia-icon-circle { width: 44px; height: 44px; margin: 0; border-radius: 12px; font-size: 18px; }

/* ---------------------------------------------------------
   Section heading helper
   --------------------------------------------------------- */
.valia-section-head { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.valia-section-head.left { margin-left: 0; text-align: left; }
.valia-section-head h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; color: var(--valia-ink); line-height: 1.2; }
.valia-section-head p { color: var(--valia-body); font-size: 17px; margin-top: 14px; }

/* ---------------------------------------------------------
   Audience chips
   --------------------------------------------------------- */
.valia-chip-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.valia-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--valia-border);
  font-weight: 600;
  color: var(--valia-ink);
  font-size: 15px;
}

.valia-chip i { color: var(--valia-magenta); }

/* ---------------------------------------------------------
   Fix: the template's mobile slide-out panel defaults to a
   WHITE background, but this menu was styled throughout for a
   dark panel (white nav text, light icons) — resulting in
   invisible white-on-white / dark-on-dark text and controls.
   Force the dark panel the rest of the styling assumes.
   --------------------------------------------------------- */
.mobile-side-menu {
  background-color: var(--valia-navy) !important;
}

.mobile-side-menu .side-menu-head .mobile-side-menu-close {
  color: #fff;
  border-color: rgba(255, 255, 255, .25);
}

.mobile-side-menu .side-menu-list li,
.mobile-side-menu .side-menu-list li a,
.mobile-side-menu .side-menu-list li span {
  color: #C9CAE5;
}

.mobile-side-menu .side-menu-list li a:hover {
  color: #fff;
}

/* ---------------------------------------------------------
   Mobile side menu (self-contained — template's own nav JS is absent)
   --------------------------------------------------------- */
.side-menu-wrap .sub-menu { list-style: none; margin: 0 0 20px; padding: 0; }

.side-menu-wrap .sub-menu > li { border-bottom: 1px solid rgba(255,255,255,.08); }

.side-menu-wrap .sub-menu > li > a {
  display: block;
  padding: 14px 4px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

.side-menu-wrap .sub-menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.side-menu-wrap .sub-menu .menu-item-has-children > a:after {
  content: '\f078';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 400;
  font-size: 12px;
  transition: transform .25s ease;
}

.side-menu-wrap .sub-menu .menu-item-has-children.children-open > a:after { transform: rotate(180deg); }

.side-menu-wrap .sub-menu ul {
  list-style: none;
  margin: 0 0 10px;
  padding-left: 16px;
  display: none;
}

.side-menu-wrap .sub-menu ul li a {
  display: block;
  padding: 10px 4px;
  color: #C9CAE5;
  font-size: 15px;
}

.side-menu-wrap .sub-menu ul li a:hover { color: #fff; }

/* ---------------------------------------------------------
   Misc helpers
   --------------------------------------------------------- */
.valia-divider {
  height: 4px;
  width: 70px;
  border-radius: 4px;
  background: var(--valia-gradient);
  margin: 0 auto 20px;
}

.valia-note {
  font-size: 13px;
  color: #9295AB;
}

/* ---------------------------------------------------------
   Accordion (FAQ) — plain JS, no Bootstrap JS dependency
   --------------------------------------------------------- */
.valia-accordion { display: flex; flex-direction: column; gap: 14px; }

.valia-acc-item {
  border: 1px solid var(--valia-border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.valia-acc-trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 600;
  color: var(--valia-ink);
}

.valia-acc-trigger .plus {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--valia-grey-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .3s ease, background .3s ease;
}

.valia-acc-trigger .plus:before,
.valia-acc-trigger .plus:after {
  content: '';
  position: absolute;
  background: var(--valia-purple);
}

.valia-acc-trigger .plus:before { width: 12px; height: 2px; }
.valia-acc-trigger .plus:after { width: 2px; height: 12px; }

.valia-acc-item.open .valia-acc-trigger .plus { background: var(--valia-gradient-135); transform: rotate(180deg); }
.valia-acc-item.open .valia-acc-trigger .plus:before,
.valia-acc-item.open .valia-acc-trigger .plus:after { background: #fff; }
.valia-acc-item.open .valia-acc-trigger .plus:after { transform: scaleY(0); }

.valia-acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.valia-acc-panel-inner {
  padding: 0 24px 22px;
  color: var(--valia-body);
  line-height: 1.7;
}

/* ---------------------------------------------------------
   Reveal on scroll
   --------------------------------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal-up.in-view { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------
   Fix: dark-section headings/paragraphs must stay white even
   when combined with .valia-section-head (equal-specificity
   rules earlier in this file lost that fight on source order).
   These selectors are deliberately more specific so they always win.
   --------------------------------------------------------- */
.valia-section-dark .valia-section-head h1,
.valia-section-dark .valia-section-head h2,
.valia-section-dark .valia-section-head h3,
.valia-section-dark .valia-section-head h4,
.valia-section-dark h1,
.valia-section-dark h2,
.valia-section-dark h3,
.valia-section-dark h4 {
  color: #fff;
}

.valia-section-dark .valia-section-head p,
.valia-section-dark p {
  color: #B9BAD9;
}

/* ---------------------------------------------------------
   Fix: the header is static (position: relative), not fixed —
   hero sections do not need large top padding to clear it.
   --------------------------------------------------------- */
.valia-hero {
  padding: 70px 0 90px;
}

/* ---------------------------------------------------------
   Fix: header nav overflow — with 8 nav items + logo + CTA,
   the template's own flex-wrap:wrap rule was dropping the
   "Get Started" button onto its own row. Pin logo and the
   right-hand actions in place; let the nav area scroll
   horizontally in the rare case it doesn't fit instead.
   --------------------------------------------------------- */
.header .primary-header-inner {
  flex-wrap: nowrap;
}

.header .primary-header-inner .header-logo,
.header .primary-header-inner .header-right-wrap {
  flex: none;
}

.header .primary-header-inner .header-menu-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: center;
}

.header .primary-header-inner .header-menu-wrap::-webkit-scrollbar {
  display: none;
}

/* Fix: header-menu-wrap's overflow-x:auto (above) forces overflow-y to
   auto too, per the CSS overflow spec - this was clipping the Programs
   dropdown instead of letting it float below the nav. Take the dropdown
   out of that clipping context with position:fixed; valia.js sets its
   exact top/left to match the "Programs" item on hover. */
.header .primary-header-inner .header-menu-wrap .sub-menu li ul {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.header .primary-header-inner .header-menu-wrap .sub-menu {
  white-space: nowrap;
}

@media (max-width: 1300px) {
  .header .primary-header-inner .header-menu-wrap .sub-menu li {
    margin: 0 7px;
  }
}

@media (max-width: 1100px) {
  .header .primary-header-inner .header-menu-wrap .sub-menu li {
    margin: 0 5px;
  }
  .header .primary-header-inner .header-menu-wrap .sub-menu li a {
    font-size: 13px !important;
  }
}

/* ---------------------------------------------------------
   Visual refresh: section background rhythm + premium
   micro-interactions (hover lift/zoom, smooth scroll).
   Scroll-reveal behaviour itself lives in the existing
   .reveal-up rules above and is extended from valia.js.
   --------------------------------------------------------- */

body {
  background: #fff;
}

/* ---------------------------------------------------------
   Section background system - every content section on the
   page is either .valia-section-light or .valia-section-dark,
   and pages assign them in strict alternation (see the PHP
   templates) so the site reads as one deliberate light/dark
   rhythm - dark, rich and premium; light, clean and spacious -
   never a long flat-white or flat-purple stretch.
   --------------------------------------------------------- */
.valia-section-light {
  background: linear-gradient(160deg, #FFFFFF 0%, #F6F2FF 50%, #EEF3FC 100%);
}

/* Smooth in-page scrolling (anchor links, back-to-top button). */
html { scroll-behavior: smooth; }

/* Card / media hover polish - a subtle lift and zoom, nothing bouncy
   or distracting. Existing .valia-card and button hover states are
   untouched; this fills in the components that had none. */
.valia-program-card,
.valia-pillar,
.valia-price-card {
  transition: transform .35s ease, box-shadow .35s ease;
}
.valia-program-card:hover,
.valia-pillar:hover,
.valia-price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(16, 17, 205, .18);
}
.valia-price-card.featured:hover {
  transform: scale(1.03) translateY(-6px);
}
.valia-icon-circle {
  transition: transform .35s ease;
}
.valia-card:hover .valia-icon-circle,
.valia-pillar:hover .num {
  transform: scale(1.08);
}
.valia-timeline-step .step-num {
  transition: transform .35s ease;
}
.valia-timeline-step:hover .step-num {
  transform: scale(1.08);
}
.valia-program-card img,
.valia-hero-media img {
  transition: transform .6s ease;
}
.valia-program-card:hover img,
.valia-hero-media:hover img {
  transform: scale(1.05);
}

/* ---------------------------------------------------------
   Photo card - a .valia-card variant with a real photo in
   place of (or above) the usual icon, for sections where a
   picture communicates the idea more clearly than an icon.
   Reuses the same card surface, radius, hover lift and border
   as .valia-card so it drops into any existing grid cleanly.
   --------------------------------------------------------- */
.valia-photo-card {
  background: #fff;
  border: 1px solid var(--valia-border);
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  transition: transform .35s ease, box-shadow .35s ease;
}
.valia-photo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(16, 17, 205, .18);
}
.valia-photo-card .valia-photo-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.valia-photo-card .valia-photo-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.valia-photo-card:hover .valia-photo-card-media img {
  transform: scale(1.06);
}
.valia-photo-card .valia-photo-card-body {
  padding: 26px 28px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  body { background-attachment: scroll; }
  .valia-program-card:hover,
  .valia-pillar:hover,
  .valia-price-card:hover,
  .valia-price-card.featured:hover,
  .valia-card:hover .valia-icon-circle,
  .valia-pillar:hover .num,
  .valia-timeline-step:hover .step-num,
  .valia-program-card:hover img,
  .valia-hero-media:hover img,
  .valia-photo-card:hover,
  .valia-photo-card:hover .valia-photo-card-media img {
    transform: none;
  }
}

/* ---------------------------------------------------------
   Contact page - Xpress Automations survey embed
   --------------------------------------------------------- */
.valia-survey-embed {
  width: 100%;
}
.valia-survey-embed iframe {
  display: block;
  width: 100%;
  min-height: 480px;
}

/* =========================================================
   REDESIGN LAYER
   Main website only (the /ads landing page has its own
   landing.css and does not load this file). Mirrors the
   landing page's visual language: dark brand gradient,
   white / peach / lavender section rhythm, real photography,
   warm accent on dark, blue-to-magenta buttons.
   Everything below overrides the older rules above.
   ========================================================= */
:root {
  --valia-grad-cta: linear-gradient(120deg, #1F35E0 0%, var(--valia-purple) 50%, #C4007A 100%);
  --valia-grad-dark:
    radial-gradient(65% 90% at 12% -10%, rgba(155, 9, 215, .34), transparent 62%),
    radial-gradient(55% 75% at 100% 105%, rgba(212, 12, 175, .22), transparent 60%),
    linear-gradient(160deg, #0A0930 0%, #1B1259 38%, #2B1160 68%, #3B0B4F 100%);
  --valia-grad-accent: linear-gradient(90deg, #FF7AC3 0%, #FF8A4C 55%, #FFC14D 100%);
  --valia-on-dark: #E9E9FA;
  --valia-body: #45465E;
  --valia-lilac: #F5F1FF;
  --valia-cream: #FFF9F2;
  --valia-line: #E3E0F0;
  --valia-shadow: 0 18px 44px -20px rgba(27, 18, 89, .28);
  --valia-radius: 20px;
}

body { font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Sections ---------- */
.valia-section { position: relative; padding: clamp(56px, 7vw, 100px) 0; }
.valia-section-light { background: #fff; }
.valia-section-lavender { background: linear-gradient(180deg, #EFE7FF 0%, #E6DCFD 100%); }
.valia-section-peach { background: linear-gradient(180deg, #FFEBD8 0%, #FFE2CE 100%); }
.valia-section-dark { background: var(--valia-grad-dark); color: var(--valia-on-dark); }
.valia-section-dark .valia-section-head p,
.valia-section-dark p { color: var(--valia-on-dark); }

.valia-section-head { max-width: 780px; margin-bottom: clamp(32px, 4vw, 52px); }
.valia-section-head h2,
.valia-h2 {
  font-size: clamp(28px, 1.1rem + 2.1vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--valia-ink);
}
.valia-section-dark .valia-h2 { color: #fff; }
.valia-section-head p,
.valia-lead { font-size: clamp(17px, 1rem + .3vw, 19px); line-height: 1.6; color: var(--valia-body); }
.valia-section-dark .valia-lead { color: var(--valia-on-dark); }
.valia-copy > * + * { margin-top: 16px; }
.valia-copy > .valia-eyebrow + * { margin-top: 18px; }

.valia-eyebrow { color: #5A00B8; letter-spacing: .08em; }
.valia-eyebrow .dot { width: 8px; height: 8px; background: var(--valia-golden-orange); }
.valia-section-peach .valia-eyebrow,
.valia-section-lavender .valia-eyebrow { background: rgba(255, 255, 255, .7); border-color: rgba(90, 0, 184, .28); }
.valia-hero .valia-eyebrow,
.valia-section-dark .valia-eyebrow { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); }

/* ---------- Buttons ---------- */
.valia-btn {
  justify-content: center;
  min-height: 56px;
  padding: 14px 30px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  background: var(--valia-grad-cta);
  background-size: 170% 100%;
  box-shadow: 0 12px 28px -10px rgba(122, 0, 224, .7);
  transition: transform .2s ease, box-shadow .2s ease, background-position .35s ease;
}
.valia-btn:hover { background-position: 100% 0; box-shadow: 0 16px 32px -10px rgba(196, 0, 122, .6); }
.valia-btn i, .valia-btn-outline i { transition: transform .2s ease; }
.valia-btn:hover i, .valia-btn-outline:hover i { transform: translateX(3px); }
.valia-btn-outline { justify-content: center; min-height: 56px; padding: 12px 28px; font-weight: 700; font-size: 17px; line-height: 1.2; border-color: #B9B4D3; }
.valia-btn.valia-btn--light { color: var(--valia-ink) !important; background: #fff; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5); }
.valia-btn.valia-btn--light:hover { color: var(--valia-purple) !important; }
.valia-hero .valia-btn-outline,
.valia-section-dark .valia-btn-outline { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); }
.valia-hero .valia-btn-outline:hover,
.valia-section-dark .valia-btn-outline:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .14); }
.valia-btn:focus-visible, .valia-btn-outline:focus-visible, .valia-acc-trigger:focus-visible {
  outline: 3px solid var(--valia-purple); outline-offset: 3px;
}
.valia-hero .valia-btn:focus-visible, .valia-hero .valia-btn-outline:focus-visible,
.valia-section-dark .valia-btn:focus-visible, .valia-section-dark .valia-btn-outline:focus-visible { outline-color: #fff; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 99; }
.header .top-bar { font-size: 14px; }
.header .top-bar .top-bar-inner .top-bar-left .top-bar-list li { padding: 9px 0; color: #D5D6F2; }
.header .top-bar .top-bar-list li i { color: var(--valia-golden-orange); }
.header .top-bar .top-bar-list a { color: #fff; }
.header .top-bar .top-social-wrap span { color: #fff; font-weight: 600; letter-spacing: .02em; }
@media (min-width: 1201px) {
  /* Only the white navigation row stays pinned; the slim contact bar scrolls away. */
  .header { top: -43px; }
  .header .top-bar { height: 43px; overflow: hidden; }
}
.header .primary-header { border-bottom: 1px solid var(--valia-line); box-shadow: 0 8px 26px -16px rgba(27, 18, 89, .35); }
.header .primary-header-inner { min-height: 78px; }
.header-logo img { max-height: 60px; }
.header .primary-header-inner .header-menu-wrap .sub-menu li a {
  padding: 27px 0;
  font-size: 15px;
  letter-spacing: .02em;
}
.header .primary-header-inner .header-menu-wrap .sub-menu > li > a:after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  height: 3px;
  border-radius: 3px;
  background: var(--valia-grad-cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.header .primary-header-inner .header-menu-wrap .sub-menu > li.active > a:after,
.header .primary-header-inner .header-menu-wrap .sub-menu > li > a:hover:after { transform: scaleX(1); }
.header .header-btn { min-height: 48px; padding: 11px 24px; font-size: 16px; }
.header .mobile-side-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--valia-lilac); color: var(--valia-ink); font-size: 22px !important; }
@media (max-width: 992px) {
  .header .primary-header-inner { min-height: 68px; padding: 8px 0; }
  .header-logo img { max-height: 52px; }
}

/* ---------- Hero (shared) ---------- */
.valia-hero { padding: 64px 0 80px; background: var(--valia-grad-dark); color: var(--valia-on-dark); }
.valia-hero:before { display: none; }
.valia-hero:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--valia-gradient); z-index: 3; }
.valia-hero > .container { z-index: 2; }
.valia-hero h1 {
  font-size: clamp(34px, 1.2rem + 3vw, 54px);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-shadow: none;
}
.valia-hero h1 .line { display: block; }
.valia-hero p.lead {
  margin-top: 20px !important;
  max-width: 34em;
  font-size: clamp(18px, 1.05rem + .4vw, 21px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--valia-on-dark);
  text-shadow: none;
}
.valia-hero p.lead a { color: #fff; }
/* Warm accent used on dark backgrounds only - every stop stays readable on navy. */
.valia-hero .valia-gradient-text,
.valia-section-dark .valia-gradient-text,
.valia-accent {
  color: #FFB347;
  background: var(--valia-grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
}
.valia-hero-actions { gap: 14px; margin-top: 30px; }
.valia-trust-row { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); gap: 10px 26px; color: #C9CAE6; font-size: 13px; }
.valia-trust-row i { color: var(--valia-golden-orange); margin-right: 6px; }

.valia-hero-media, .valia-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--valia-shadow);
}
.valia-hero .valia-hero-media { box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .65); }
.valia-hero-media img, .valia-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.valia-media--portrait { aspect-ratio: 4 / 5; }
.valia-media--portrait img { object-position: top; }
.valia-media--wide { aspect-ratio: 1742 / 903; }
.valia-media--3x2 { aspect-ratio: 3 / 2; }
.valia-banner { margin-bottom: clamp(28px, 3.5vw, 44px); }
.valia-live-badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 10px 18px;
  background: #fff; color: var(--valia-ink) !important;
  font-weight: 700; font-size: 16px; border-radius: 999px;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5);
}
.valia-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--valia-red); box-shadow: 0 0 0 4px rgba(245, 28, 44, .2); }

/* ---------- Inner-page banner: compact, photo + gradient ---------- */
.valia-hero--page { padding: 46px 0 52px; }
.valia-hero--page h1 { font-size: clamp(30px, 1.1rem + 2.4vw, 46px); }
.valia-hero--page p.lead { margin-top: 14px !important; font-size: clamp(17px, 1rem + .35vw, 19px); }
.valia-hero--page .valia-hero-actions { margin-top: 24px; }
.valia-hero-bg {
  position: absolute; top: 0; right: 0;
  width: 62%; height: 100%;
  object-fit: cover; object-position: center 30%;
  z-index: 0;
}
.valia-hero--photo:before {
  /* Solid brand navy under the copy, fading to a tinted photo on the right. */
  display: block; content: '';
  position: absolute; inset: 0; height: auto;
  border-radius: 0; filter: none; opacity: 1; z-index: 1;
  background:
    linear-gradient(90deg, #100C3D 0%, #150F48 38%, rgba(27, 18, 89, .93) 50%, rgba(43, 17, 96, .62) 72%, rgba(59, 11, 79, .42) 100%),
    linear-gradient(0deg, rgba(10, 9, 48, .35), rgba(10, 9, 48, .1));
}
.valia-hero--center .valia-hero-bg { width: 100%; }
.valia-hero--center.valia-hero--photo:before { background: linear-gradient(180deg, rgba(16, 12, 61, .86), rgba(43, 17, 96, .86)); }
.valia-hero--center p.lead { margin-left: auto; margin-right: auto; }
@media (max-width: 991px) {
  .valia-hero { padding: 44px 0 56px; }
  .valia-hero--page { padding: 36px 0 40px; }
  .valia-hero-bg { width: 100%; }
  .valia-hero--photo:before { background: linear-gradient(180deg, rgba(16, 12, 61, .9), rgba(43, 17, 96, .84)); }
}

/* ---------- At-a-glance strip ---------- */
.valia-glance { background: #fff; border-bottom: 1px solid var(--valia-line); }
.valia-glance-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 28px; margin: 0; padding: 30px 0; list-style: none; }
.valia-glance-list li { padding-left: 16px; border-left: 3px solid var(--valia-purple); }
.valia-glance-list li:nth-child(2) { border-color: var(--valia-magenta); }
.valia-glance-list li:nth-child(3) { border-color: var(--valia-orange); }
.valia-glance-list li:nth-child(4) { border-color: var(--valia-golden-orange); }
.valia-glance-list h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--valia-ink); }
.valia-glance-list p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--valia-body); }
@media (max-width: 991px) { .valia-glance-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .valia-glance-list { grid-template-columns: 1fr; padding: 24px 0; } }

/* ---------- Cards ---------- */
.valia-card {
  padding: 30px 28px;
  border-color: var(--valia-line);
  border-radius: var(--valia-radius);
  box-shadow: 0 10px 30px -24px rgba(27, 18, 89, .45);
}
.valia-card:hover { transform: translateY(-4px); box-shadow: var(--valia-shadow); border-color: var(--valia-line); }
.valia-card h3, .valia-pillar h3, .valia-stat h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--valia-ink); }
.valia-card p, .valia-pillar p { color: var(--valia-body); }
.valia-card > p:last-child, .valia-pillar > p:last-child { margin-bottom: 0; }
.valia-card ul { margin: 12px 0 0; padding-left: 20px; color: var(--valia-body); font-size: 16px; }
.valia-card--center { text-align: center; }
.valia-card--center .valia-icon-circle { margin-left: auto; margin-right: auto; }
.valia-card--rule { border-top: 5px solid var(--valia-purple); background: var(--valia-cream); box-shadow: none; }
.row > div:nth-child(3n+2) > .valia-card--rule { border-top-color: var(--valia-magenta); }
.row > div:nth-child(3n+3) > .valia-card--rule { border-top-color: var(--valia-orange); }
.valia-card--note { border-left: 6px solid var(--valia-purple); }

/* Icons are a supporting cue, not the main visual: small, soft tiles. */
.valia-icon-circle {
  width: 52px; height: 52px;
  margin-bottom: 18px;
  border-radius: 14px;
  font-size: 21px;
  color: var(--valia-purple);
  background: rgba(122, 0, 224, .1);
}
.row > div:nth-child(4n+2) .valia-icon-circle { color: #C4007A; background: rgba(216, 0, 122, .1); }
.row > div:nth-child(4n+3) .valia-icon-circle { color: #D94A00; background: rgba(255, 92, 0, .12); }
.row > div:nth-child(4n+4) .valia-icon-circle { color: #1F35E0; background: rgba(0, 59, 255, .1); }

/* Glass cards on dark sections */
.valia-card--glass { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); box-shadow: none; }
.valia-card--glass:hover { border-color: rgba(255, 255, 255, .34); box-shadow: none; }
.valia-section-dark .valia-card.valia-card--glass h3,
.valia-section-dark .valia-pillar.valia-card--glass h3,
.valia-section-dark .valia-stat h3 { color: #fff; }
.valia-section-dark .valia-card.valia-card--glass p,
.valia-section-dark .valia-pillar.valia-card--glass p { color: var(--valia-on-dark); }
.valia-section-dark .row > div .valia-card--glass .valia-icon-circle { color: #fff; background: rgba(255, 255, 255, .14); }
.valia-card--accent { background: var(--valia-grad-cta); border-color: transparent; display: flex; flex-direction: column; justify-content: center; }
.valia-section-dark .valia-card.valia-card--accent h3,
.valia-section-dark .valia-card.valia-card--accent p { color: #fff; }
/* White cards keep dark text even inside a dark section */
.valia-section-dark .valia-card:not(.valia-card--glass):not(.valia-card--accent) p,
.valia-section-dark .valia-pillar:not(.valia-card--glass) p { color: var(--valia-body); }
.valia-section-dark .valia-stat .label { color: var(--valia-on-dark); }

/* Numbered pillars */
.valia-pillar { text-align: left; padding: 28px 26px; border-color: var(--valia-line); border-radius: var(--valia-radius); }
.valia-pillar .num { width: 44px; height: 44px; margin-bottom: 16px; font-size: 18px; color: var(--valia-navy); background: #B9C8FF; }
.row > div:nth-child(4n+2) .valia-pillar .num { background: #E3BFFF; }
.row > div:nth-child(4n+3) .valia-pillar .num { background: #FFC2D9; }
.row > div:nth-child(4n+4) .valia-pillar .num { background: #FFD9A0; }

/* ---------- Lists ---------- */
.valia-ticks { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.valia-ticks li { display: flex; align-items: flex-start; gap: 12px; color: var(--valia-ink); font-weight: 500; }
.valia-ticks i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; font-size: 12px; color: #fff; background: var(--valia-purple); border-radius: 50%; }
.valia-ticks--2col { grid-template-columns: 1fr 1fr; }
.valia-section-dark .valia-ticks li { color: #fff; }
@media (max-width: 479px) { .valia-ticks--2col { grid-template-columns: 1fr; } }

.valia-deflist { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.valia-deflist li { padding: 16px 20px; background: var(--valia-lilac); border-left: 4px solid var(--valia-purple); border-radius: 12px; color: var(--valia-body); }
.valia-deflist li:nth-child(4n+2) { border-color: var(--valia-magenta); }
.valia-deflist li:nth-child(4n+3) { border-color: var(--valia-orange); }
.valia-deflist li:nth-child(4n+4) { border-color: var(--valia-golden-orange); }
.valia-deflist strong { display: block; color: var(--valia-ink); }
.valia-section-peach .valia-deflist li, .valia-section-lavender .valia-deflist li { background: #fff; }

.valia-pull { margin-top: 24px; padding: 18px 22px; background: var(--valia-lilac); border-radius: 12px; font-weight: 500; color: var(--valia-ink) !important; }

/* ---------- Steps (image + numbered list) ---------- */
.valia-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.valia-step { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: var(--valia-lilac); border-radius: var(--valia-radius); }
.valia-step .step-num { flex: none; display: grid; place-items: center; width: 48px; height: 48px; font-weight: 800; font-size: 20px; color: #fff; background: var(--valia-grad-cta); border-radius: 50%; }
.valia-step h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--valia-ink); }
.valia-step p { margin: 4px 0 0; color: var(--valia-body); }
.valia-section-dark .valia-step { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); }
.valia-section-dark .valia-step h3 { color: #fff; }
.valia-section-dark .valia-step p { color: var(--valia-on-dark); }
.valia-section-dark .valia-step .step-num { color: var(--valia-navy); background: #fff; }

/* ---------- Audience ---------- */
.valia-audience { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.valia-audience--5 { grid-template-columns: repeat(5, 1fr); }
.valia-audience li { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; background: #fff; border: 1px solid var(--valia-line); border-radius: var(--valia-radius); font-weight: 600; font-size: 18px; line-height: 1.35; color: var(--valia-ink); }
.valia-audience li i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 18px; color: var(--valia-purple); background: rgba(122, 0, 224, .1); }
.valia-audience li:first-child { border: 2px solid var(--valia-purple); box-shadow: var(--valia-shadow); }
.valia-section-dark .valia-audience li { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
.valia-section-dark .valia-audience li i { color: #fff; background: rgba(255, 255, 255, .14); }
@media (max-width: 1199px) { .valia-audience--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) { .valia-audience, .valia-audience--5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .valia-audience, .valia-audience--5 { grid-template-columns: 1fr; } .valia-audience li { flex-direction: row; align-items: center; } }

/* ---------- Stats ---------- */
.valia-stat-card { height: 100%; padding: 28px 24px; background: #fff; border-radius: var(--valia-radius); box-shadow: var(--valia-shadow); text-align: left; }
.valia-stat-card .num { font-size: clamp(38px, 2rem + 1.4vw, 52px); font-weight: 800; line-height: 1; color: var(--valia-purple); background: var(--valia-grad-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.valia-stat-card .label { margin: 10px 0 0; font-weight: 500; color: var(--valia-ink); }
.valia-stat-card .valia-note { display: block; margin-top: 6px; color: #6B6C85; }
.valia-note { color: #6B6C85; }
.valia-section-dark .valia-note { color: #B9BAD9; }

/* ---------- Program card (photo + overlay) ---------- */
.valia-program-card { min-height: 440px; padding: clamp(26px, 4vw, 48px); border-radius: 28px; box-shadow: var(--valia-shadow); }
.valia-program-card:before { background: linear-gradient(90deg, rgba(10, 9, 48, .94) 0%, rgba(27, 18, 89, .82) 42%, rgba(43, 17, 96, .18) 78%); }
.valia-program-card img { object-position: 70% center; }
.valia-program-card .tag { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); letter-spacing: .08em; color: #fff; }
.valia-program-card h3 { max-width: 520px; font-size: clamp(26px, 1.2rem + 1.3vw, 36px); font-weight: 800; line-height: 1.15; color: #fff; text-shadow: none; }
.valia-program-card > p { max-width: 460px; color: var(--valia-on-dark); }
.valia-program-card .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 12px 24px; border-radius: 999px; background: #fff; color: var(--valia-ink); font-weight: 700; }
@media (max-width: 767px) {
  .valia-program-card { min-height: 500px; }
  .valia-program-card:before { background: linear-gradient(180deg, rgba(10, 9, 48, .15) 0%, rgba(16, 12, 61, .95) 50%); }
  .valia-program-card img { object-position: 62% top; height: 58%; }
}

/* ---------- Offer (pricing) ---------- */
.valia-offer { display: grid; grid-template-columns: 1.1fr 1fr; max-width: 1000px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--valia-shadow); }
.valia-offer-pass { padding: clamp(32px, 4vw, 52px) clamp(24px, 3.5vw, 46px); background: var(--valia-grad-dark); color: var(--valia-on-dark); }
.valia-offer-pass h2, .valia-offer-pass h3 { margin: 16px 0 0; font-size: clamp(28px, 1.2rem + 1.6vw, 40px); font-weight: 800; line-height: 1.12; color: #fff; }
.valia-offer-pass p { margin: 14px 0 26px; font-size: 19px; color: var(--valia-on-dark); }
.valia-offer-pass .valia-eyebrow { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); }
.valia-offer-pass .call { margin: 20px 0 0; font-size: 17px; }
.valia-offer-pass .call a { color: #fff; font-weight: 700; white-space: nowrap; }
.valia-offer-plan { padding: clamp(30px, 4vw, 48px) clamp(24px, 3.5vw, 46px); }
.valia-offer-plan h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--valia-ink); }
.valia-offer-plan .amount { margin-top: 8px; font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--valia-ink); }
.valia-offer-plan .amount span { font-size: 20px; font-weight: 600; letter-spacing: 0; color: #6B6C85; }
.valia-offer-plan .valia-ticks li { font-weight: 400; color: var(--valia-body); }
@media (max-width: 767px) { .valia-offer { grid-template-columns: 1fr; } }

/* ---------- Closing call to action ---------- */
.valia-cta { max-width: 780px; margin: 0 auto; text-align: center; }
.valia-cta p { margin: 14px auto 0; max-width: 620px; font-size: 19px; }
.valia-cta .valia-btn, .valia-cta .valia-btn-outline { margin-top: 26px !important; }
.valia-cta .valia-icon-circle { margin: 0 auto 20px; }

/* ---------- FAQ ---------- */
.valia-acc-item { border-color: var(--valia-line); border-radius: 14px; }
.valia-acc-item.open { border-color: #B79BE8; box-shadow: 0 10px 30px -22px rgba(27, 18, 89, .5); }
.valia-acc-trigger { min-height: 64px; padding: 16px 22px; font-size: 19px; line-height: 1.3; }
.valia-acc-trigger .plus { width: 36px; height: 36px; background: var(--valia-lilac); }
.valia-acc-item.open .valia-acc-trigger .plus { background: var(--valia-purple); }
.valia-acc-panel-inner { padding: 0 22px 22px; font-size: 17px; }

/* ---------- Contact ---------- */
.valia-form-card { padding: clamp(14px, 2vw, 26px); background: #fff; border-radius: 24px; box-shadow: var(--valia-shadow); }
.valia-form-card iframe { display: block; width: 100%; min-height: 560px; border: 0; border-radius: 12px; }

/* ---------- Footer ---------- */
.footer-section { padding-top: 0 !important; background: var(--valia-navy) !important; }
.footer-cta { position: relative; padding: clamp(48px, 6vw, 84px) 0; background: var(--valia-grad-dark); text-align: center; overflow: hidden; }
.footer-cta:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--valia-gradient); }
.footer-cta .title { max-width: 820px; margin: 0 auto; font-size: clamp(28px, 1.1rem + 2.2vw, 44px); font-weight: 800; line-height: 1.15; color: #fff; }
.footer-cta .title .valia-accent { display: block; }
.footer-cta .valia-btn { margin-top: 28px; }
.footer-wrap { padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3vw, 40px) !important; margin-top: 0 !important; border: 0 !important; row-gap: 32px; }
.footer-section .footer-logo { display: inline-block; margin-bottom: 18px; padding: 10px 14px; background: #fff; border-radius: 14px; }
.footer-section .footer-logo img { display: block; width: 104px; height: auto; }
.footer-section p, .footer-section a, .footer-section li { color: #C9CAE6; }
.footer-section .footer-contact a { color: #fff; }
.footer-section .footer-contact .number i { color: var(--valia-golden-orange); }
.footer-widget .widget-header { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.footer-widget .footer-list li a { display: inline-flex; align-items: center; min-height: 36px; }
.footer-section .valia-note { color: #A9AACB; }
.copyright-area { border-top: 1px solid rgba(255, 255, 255, .14); }

/* ---------- Responsive polish ---------- */
@media (max-width: 991px) {
  .valia-section-head { margin-left: auto; margin-right: auto; }
}
@media (max-width: 575px) {
  .valia-hero-actions { flex-direction: column; }
  .valia-hero-actions .valia-btn, .valia-hero-actions .valia-btn-outline { width: 100%; }
  .valia-card { padding: 24px 22px; }
  .valia-live-badge { font-size: 14px; padding: 8px 14px; }
}

/* Offer: price panel */
.valia-offer-pass .amount { margin-top: 18px; font-size: clamp(52px, 2.6rem + 2vw, 68px); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff; }
.valia-offer-pass .amount span { margin-left: 8px; font-size: 20px; font-weight: 600; letter-spacing: 0; color: #C9CAE6; }
.valia-offer-pass .valia-btn { margin-top: 26px; }
.valia-offer-pass p + .valia-btn { margin-top: 0; }
.valia-offer-plan { display: flex; align-items: center; }
.valia-offer-plan .valia-ticks { margin-top: 0; gap: 16px; font-size: 18px; }
.valia-hero h1 .valia-accent { width: fit-content; }
.valia-link { color: #5A00B8; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.valia-link:hover { color: var(--valia-magenta); }

/* Page gutters: keep content off the viewport edge and stop wide row gutters overflowing on phones */
.container { padding-left: 24px; padding-right: 24px; }
@media (max-width: 767px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .row.g-5 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 2rem; }
}
@media (max-width: 991px) {
  .valia-hero .row.g-5 { --bs-gutter-y: 1.75rem; }
  .valia-hero .valia-hero-media { aspect-ratio: 3 / 2; }
  .valia-trust-row { margin-top: 24px; padding-top: 18px; }
}

/* Contact page: the form sits alone, centred in the content area */
.valia-form-wrap { max-width: 760px; margin: 0 auto; }

/* Activity photo cards: same type scale as .valia-card, consistent 4:3 photo on top */
.valia-photo-card { border-color: var(--valia-line); box-shadow: 0 10px 30px -24px rgba(27, 18, 89, .45); }
.valia-photo-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--valia-ink); }
.valia-photo-card p { margin: 0; color: var(--valia-body); }
.valia-photo-card ul { margin: 12px 0 0; padding-left: 20px; color: var(--valia-body); font-size: 16px; }
.valia-photo-card .valia-photo-card-body { padding: 22px 26px 26px; }

/* =========================================================
   Landing activities section ("Every Activity Has a Purpose")
   A one-to-one copy of the rules this section uses in
   ads/assets/css/landing.css, with every selector scoped to
   .va-section so nothing else on the site is affected and the
   site template cannot restyle it. Values are the landing
   page's, written out in full (px instead of rem / variables).
   Used by includes/activities-section.php.
   ========================================================= */
.va-section {
  padding: 56px 0;
  background: linear-gradient(180deg, #E7DCFF 0%, #DDD3FB 100%);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #3A3B52;
}
.va-section *, .va-section *::before, .va-section *::after { box-sizing: border-box; }
.va-section h2, .va-section h3 { margin: 0; padding: 0; font-family: inherit; color: #12122B; line-height: 1.15; font-weight: 700; letter-spacing: normal; text-transform: none; text-wrap: balance; }
.va-section h2 { font-size: clamp(28.8px, 19.2px + 2.6vw, 44px); font-weight: 800; letter-spacing: -.01em; }
.va-section h3 { font-size: 20.8px; }
.va-section p { margin: 0; padding: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-wrap: pretty; }
.va-section ul, .va-section li { margin: 0; padding: 0; list-style: none; }
.va-section em { font-style: italic; }
.va-section img { display: block; max-width: 100%; height: auto; }

.va-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.va-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.va-section .va-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 18px; padding: 8px 16px;
  font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #5A00B8; background: rgba(255, 255, 255, .7); border: 1px solid rgba(90, 0, 184, .28); border-radius: 999px;
}
.va-section .va-intro { margin-top: 16px; font-size: 19.2px; color: #3A3B52; }
.va-section .va-fine { margin-top: 22px; font-size: 16px; color: #55566E; text-align: center; }

.va-banner { margin-bottom: 36px; }
.va-banner img { width: 100%; aspect-ratio: 1742 / 903; object-fit: cover; border-radius: 24px; box-shadow: 0 18px 44px -20px rgba(27, 18, 89, .28); }

.va-section .va-activities { display: grid; gap: 22px; }
.va-section .va-activity { display: flex; flex-direction: column; padding: 14px 14px 24px; border: 1px solid #E3E0F0; border-radius: 20px; background: #fff; }
.va-activity h3 { margin: 20px 10px 0; }
.va-activity > p { margin: 8px 10px 0; }
.va-demo {
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  min-height: 132px; padding: 18px 20px; border-radius: 14px; background: #F5F1FF; color: #12122B;
}
.va-section .va-demo-prompt { font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #4A3A78; }
.va-demo-memory { background: #FFF1DE; }
.va-demo-memory-cards { display: flex; gap: 8px; }
.va-demo-memory-cards span {
  flex: 1; display: grid; place-items: end center; min-height: 84px; padding: 8px 6px; text-align: center;
  font-size: 15px; font-weight: 600; line-height: 1.2; background: #fff; border-radius: 8px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35);
  background-image: linear-gradient(#F3D9B4, #F3D9B4); background-size: calc(100% - 12px) 40px; background-position: 6px 6px; background-repeat: no-repeat;
}
.va-demo-memory-cards span:nth-child(1) { transform: rotate(-3deg); }
.va-demo-memory-cards span:nth-child(3) { transform: rotate(3deg); }
.va-demo-focus { background: #EEF0FF; }
.va-demo-focus-words { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 30.4px; font-weight: 800; letter-spacing: .02em; }
.va-demo-focus-words .w1 { color: #C4007A; }
.va-demo-focus-words .w2 { color: #1F35E0; }
.va-demo-focus-words .w3 { color: #0B7A4B; }
.va-demo-skills { background: #FDECEF; }
.va-section .va-demo-skills-bubble { align-self: flex-start; max-width: 300px; padding: 12px 16px; font-size: 16px; line-height: 1.4; background: #fff; border-radius: 18px 18px 18px 4px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); }
.va-demo-skills-bubble u { color: #B3122B; text-decoration-style: wavy; }
.va-demo-logic { background: #F1E9FF; }
.va-demo-logic-seq { display: flex; gap: 8px; }
.va-demo-logic-seq span { flex: 1; max-width: 58px; aspect-ratio: 1; display: grid; place-items: center; font-size: 20.8px; font-weight: 800; background: #fff; border-radius: 12px; }
.va-demo-logic-seq .q { color: #fff; background: #7A00E0; }
.va-demo-learn { background: #E8F4FF; }
.va-section .va-demo-learn-q { font-size: 20px; font-weight: 700; line-height: 1.3; }
.va-demo-mind { background: #FFF3D6; }
.va-section .va-demo-mind-note { font-size: 21.6px; font-weight: 600; font-style: italic; line-height: 1.3; color: #5B4100; }

@media (min-width: 720px) {
  .va-section { padding: 88px 0; font-size: 19px; }
  .va-container { padding-inline: 32px; }
  .va-demo { min-height: 168px; }
  .va-section .va-activities { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .va-banner { margin-bottom: 48px; }
  .va-section .va-activities { grid-template-columns: repeat(3, 1fr); }
}