/* ============================================================================
   IDEAL PCO LICENCE — PREMIUM DESIGN SYSTEM
   ----------------------------------------------------------------------------
   One shared visual layer for every public page. Supersedes the earlier
   site-refresh.css patch: same goal (a consistent modern look over the legacy
   template), but built as a real system — tokens, components, motion — instead
   of a list of !important overrides.

   Rules of the road:
   - Presentation only. Never touches PHP data, URLs, checkout, or the
     assessment/demo experience.
   - `.px-` prefix on new components so nothing collides with legacy classes.
   - !important is used only where legacy inline styles must be beaten; new
     components avoid it entirely.
   ========================================================================== */

:root {
  /* ---- Ink & surface ---------------------------------------------------- */
  --px-ink:        #0a1628;   /* headings, deep surfaces */
  --px-ink-2:      #16263f;   /* raised dark surface */
  --px-body:       #4a5a70;   /* body copy */
  --px-muted:      #5f6e85;   /* captions, labels — 5.1:1 on white */
  --px-paper:      #f7f9fc;   /* page background */
  --px-white:      #ffffff;
  --px-line:       rgba(10, 22, 40, .09);
  --px-line-2:     rgba(10, 22, 40, .06);

  /* ---- Brand accents ------------------------------------------------------
     These are the site's real brand colours, declared in _layout_start.php as
     --primary / --accent and used ~340 times across the page templates. This
     file originally invented a near-but-not-equal pair (#005bbb / #01af6b),
     which is what made sections look subtly mismatched. Two token systems, one
     palette: each hue now has a proper light/base/dark ramp instead of two
     competing hues.
     --*-ink is the text-on-white step: the base greens and blues sit just
     under the 3:1 WCAG floor for large text, these clear it. */
  --px-green:      #01af6b;   /* signature — conversion actions, fills */
  --px-green-ink:  #04a566;   /* green text on light — 3.2:1 */
  --px-green-cta:  #0a7d4e;   /* white text on green — 5.2:1 */
  --px-green-dk:   #0a6b3f;
  --px-green-soft: #d6f5e6;
  --px-blue:       #005bbb;   /* trust — secondary actions, links */
  --px-blue-ink:   #00519f;   /* blue text on light */
  --px-blue-dk:    #00408a;
  --px-blue-soft:  #e6f0fb;
  --px-gold:       #c9a227;   /* premium detail — used sparingly */
  --px-gold-soft:  #fbf5e3;

  /* ---- Elevation -------------------------------------------------------- */
  --px-sh-xs: 0 1px 2px rgba(10,22,40,.05);
  --px-sh-sm: 0 4px 14px rgba(10,22,40,.06);
  --px-sh-md: 0 12px 32px rgba(10,22,40,.08);
  --px-sh-lg: 0 24px 60px rgba(10,22,40,.11);
  --px-sh-xl: 0 40px 90px rgba(10,22,40,.16);

  /* ---- Geometry --------------------------------------------------------- */
  --px-r-sm: 10px;
  --px-r-md: 16px;
  --px-r-lg: 22px;
  --px-r-xl: 30px;

  /* ---- Motion — expo-out reads "expensive", never bouncy ---------------- */
  --px-ease:      cubic-bezier(.16, 1, .3, 1);
  --px-ease-soft: cubic-bezier(.32, .72, 0, 1);
  --px-fast: .22s;
  --px-mid:  .45s;
  --px-slow: .9s;
}

/* ============================================================================
   1. BASE — quiet the legacy template, set a refined type rhythm
   ========================================================================== */
body {
  background: var(--px-paper);
  color: var(--px-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.px-h1, .px-h2, .px-h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  color: var(--px-ink);
  letter-spacing: -0.028em;
  font-weight: 800;
}

::selection { background: var(--px-green); color: #fff; }

/* Refined focus ring — visible for keyboard users, invisible for mouse */
:focus-visible {
  outline: 2px solid var(--px-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================================
   2. MOTION SYSTEM — scroll reveal with stagger
   Elements marked [data-px-reveal] start hidden; premium.js adds .px-in.
   ========================================================================== */
.px-js [data-px-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--px-slow) var(--px-ease),
    transform var(--px-slow) var(--px-ease);
  will-change: opacity, transform;
}
[data-px-reveal].px-in { opacity: 1; transform: none; }

/* Directional variants */
[data-px-reveal="left"]  { transform: translateX(-32px); }
[data-px-reveal="right"] { transform: translateX(32px); }
[data-px-reveal="scale"] { transform: scale(.94); }
[data-px-reveal="left"].px-in,
[data-px-reveal="right"].px-in,
[data-px-reveal="scale"].px-in { transform: none; }

/* A group that both reveals and staggers must not move twice — the children
   carry the motion, so the container is left with a plain fade. */
[data-px-reveal][data-px-stagger] { transform: none; }

/* Stagger — children ride in one after another once the group is in view.
   premium.js stamps --px-i on each child; everything else is CSS, so a grid
   whose items come from a PHP loop (the course cards) needs no per-item
   markup. `backwards` fill holds the child hidden through its delay and then
   hands styling straight back to the element's own rules, so card hover
   transforms keep working once the entrance has finished. */
.px-js [data-px-stagger]:not(.px-in) > * { opacity: 0; }
[data-px-stagger].px-in > * {
  animation: pxRise var(--px-slow) var(--px-ease) backwards;
  animation-delay: calc(var(--px-i, 0) * 85ms);
}
@keyframes pxRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-px-reveal],
  [data-px-reveal].px-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-px-stagger]:not(.px-in) > *,
  [data-px-stagger].px-in > * {
    opacity: 1 !important;
    animation: none !important;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================================
   3. SECTION FURNITURE — eyebrow / title / lede
   ========================================================================== */
.px-section { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.px-section--tight { padding: clamp(56px, 6vw, 88px) 0; }
.px-section--paper { background: var(--px-paper); }
.px-section--white { background: var(--px-white); }

.px-head { text-align: center; max-width: 720px; margin: 0 auto clamp(44px, 5vw, 72px); }
.px-head--left { text-align: left; margin-left: 0; }

.px-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--px-green-dk);
  background: var(--px-green-soft);
  border: 1px solid rgba(1,175,107,.20);
  padding: 7px 15px; border-radius: 999px;
  margin-bottom: 20px;
}
.px-eyebrow--blue { color: var(--px-blue-dk); background: var(--px-blue-soft); border-color: rgba(0,91,187,.18); }
.px-eyebrow--gold { color: #8a6d12; background: var(--px-gold-soft); border-color: rgba(201,162,39,.28); }
.px-eyebrow .px-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: pxPulse 2.4s var(--px-ease-soft) infinite;
}
@keyframes pxPulse {
  0%, 100% { opacity: .45; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.px-title {
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
  margin: 0 0 16px;
}
.px-title em {
  font-style: normal;
  color: var(--px-green);
  position: relative;
}
/* Hand-drawn style underline that draws itself in */
.px-title em::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -.08em;
  height: 3px; border-radius: 3px;
  background: currentColor; opacity: .22;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--px-ease) .25s;
}
.px-in .px-title em::after,
.px-title.px-in em::after { transform: scaleX(1); }
.px-title em.px-blue { color: var(--px-blue); }

.px-lede {
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.68;
  color: var(--px-body);
  margin: 0;
}

/* Hairline divider with a centred gold pip — a small "premium" tell */
.px-rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0 0 22px;
}
.px-rule::before, .px-rule::after {
  content: ''; height: 1px; width: 44px;
  background: linear-gradient(90deg, transparent, var(--px-line));
}
.px-rule::after { background: linear-gradient(270deg, transparent, var(--px-line)); }
.px-rule i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--px-gold); display: block;
}

/* ============================================================================
   4. BUTTONS
   ========================================================================== */
.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 15px; line-height: 1;
  padding: 15px 26px; border-radius: 999px;
  border: none; cursor: pointer; text-decoration: none !important;
  position: relative; overflow: hidden;
  transition: transform var(--px-fast) var(--px-ease),
              box-shadow var(--px-fast) var(--px-ease),
              background var(--px-fast) ease;
}
.px-btn svg { flex-shrink: 0; transition: transform var(--px-fast) var(--px-ease); }
.px-btn:hover svg { transform: translateX(3px); }
.px-btn:active { transform: translateY(0) scale(.99); }

/* Sheen sweep on hover */
.px-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.28) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform .75s var(--px-ease);
  pointer-events: none;
}
.px-btn:hover::after { transform: translateX(120%); }

.px-btn--primary {
  background: var(--px-green); color: #fff !important;
  box-shadow: 0 12px 26px rgba(1,175,107,.28);
}
.px-btn--primary:hover {
  background: var(--px-green-dk); color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(1,175,107,.36);
}
.px-btn--blue {
  background: var(--px-blue); color: #fff !important;
  box-shadow: 0 12px 26px rgba(0,91,187,.26);
}
.px-btn--blue:hover {
  background: var(--px-blue-dk); color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,91,187,.34);
}
.px-btn--ink { background: var(--px-ink); color: #fff !important; box-shadow: var(--px-sh-md); }
.px-btn--ink:hover { background: var(--px-ink-2); color: #fff !important; transform: translateY(-2px); }

.px-btn--ghost {
  background: var(--px-white); color: var(--px-ink) !important;
  border: 1.5px solid var(--px-line);
  box-shadow: var(--px-sh-xs);
}
.px-btn--ghost:hover {
  border-color: var(--px-blue); color: var(--px-ink) !important;
  transform: translateY(-2px); box-shadow: var(--px-sh-sm);
}
.px-btn--ghost::after { display: none; }

.px-btn--lg { padding: 17px 32px; font-size: 16px; }
.px-btn--sm { padding: 11px 19px; font-size: 13.5px; }

/* Phone button — label stacked over the number */
.px-btn-call {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--px-white); border: 1.5px solid var(--px-line);
  border-radius: 999px; padding: 10px 22px 10px 12px;
  text-decoration: none !important; box-shadow: var(--px-sh-xs);
  transition: border-color var(--px-fast) ease, transform var(--px-fast) var(--px-ease), box-shadow var(--px-fast) ease;
}
.px-btn-call:hover { border-color: var(--px-blue); transform: translateY(-2px); box-shadow: var(--px-sh-sm); }
.px-btn-call .px-ic {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--px-blue-soft); color: var(--px-blue);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.px-btn-call .px-tx { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.px-btn-call .px-tx small {
  font-size: 9.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--px-muted);
}
.px-btn-call .px-tx strong {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px; font-weight: 800; color: var(--px-ink);
}

/* ============================================================================
   5. CARDS
   ========================================================================== */
.px-card {
  background: var(--px-white);
  border: 1px solid var(--px-line);
  border-radius: var(--px-r-lg);
  padding: 32px 28px;
  position: relative;
  transition: transform var(--px-mid) var(--px-ease),
              box-shadow var(--px-mid) var(--px-ease),
              border-color var(--px-mid) ease;
}
.px-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0,91,187,.24);
  box-shadow: var(--px-sh-lg);
}
/* Accent rail that grows on hover */
.px-card::before {
  content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--px-green), var(--px-blue));
  border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform var(--px-mid) var(--px-ease);
}
.px-card:hover::before { transform: scaleX(1); }

/* Icon tile — the infographic building block */
.px-ic-tile {
  width: 54px; height: 54px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--px-green-soft), #fff);
  border: 1px solid rgba(1,175,107,.18);
  color: var(--px-green-dk);
  margin-bottom: 20px;
  transition: transform var(--px-mid) var(--px-ease), box-shadow var(--px-mid) ease;
}
.px-ic-tile svg { width: 25px; height: 25px; }
.px-card:hover .px-ic-tile {
  transform: translateY(-3px) rotate(-4deg);
  box-shadow: 0 12px 24px rgba(1,175,107,.20);
}
.px-ic-tile--blue {
  background: linear-gradient(145deg, var(--px-blue-soft), #fff);
  border-color: rgba(0,91,187,.18); color: var(--px-blue);
}
.px-ic-tile--gold {
  background: linear-gradient(145deg, var(--px-gold-soft), #fff);
  border-color: rgba(201,162,39,.26); color: #8a6d12;
}

.px-card h3 { font-size: 19px; margin: 0 0 10px; letter-spacing: -.02em; }
.px-card p  { font-size: 14.5px; line-height: 1.65; color: var(--px-body); margin: 0; }

/* ============================================================================
   6. INFOGRAPHICS — stats, process rail, meters
   ========================================================================== */

/* -- Stat tiles --------------------------------------------------------- */
.px-stats {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.px-stat {
  background: var(--px-white); border: 1px solid var(--px-line);
  border-radius: var(--px-r-md); padding: 26px 22px;
  text-align: center; position: relative; overflow: hidden;
  transition: transform var(--px-mid) var(--px-ease), box-shadow var(--px-mid) var(--px-ease);
}
.px-stat:hover { transform: translateY(-5px); box-shadow: var(--px-sh-md); }
.px-stat .px-n {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(30px, 3.4vw, 42px); font-weight: 800;
  color: var(--px-ink); line-height: 1; letter-spacing: -.035em;
  display: block; margin-bottom: 7px;
}
.px-stat .px-n .px-suf { color: var(--px-green); }
.px-stat .px-l { font-size: 12.5px; color: var(--px-muted); font-weight: 600; letter-spacing: .02em; }
.px-stat::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 46px; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--px-green); transform: translateX(-50%) scaleX(0);
  transition: transform var(--px-mid) var(--px-ease);
}
.px-stat:hover::after { transform: translateX(-50%) scaleX(1); }

/* -- Process rail — numbered steps joined by a line that draws in ------- */
.px-rail { position: relative; display: grid; gap: 26px; }
.px-rail--h { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.px-rail--h::before {
  content: ''; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--px-line) 0 7px, transparent 7px 14px);
  z-index: 0;
}
.px-step { position: relative; z-index: 1; text-align: center; }
.px-step .px-num {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--px-white); border: 2px solid var(--px-line);
  color: var(--px-ink);
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px; position: relative;
  transition: all var(--px-mid) var(--px-ease);
}
.px-step:hover .px-num,
.px-step.is-active .px-num {
  background: var(--px-green); border-color: var(--px-green);
  color: #fff; transform: scale(1.08);
  box-shadow: 0 12px 26px rgba(1,175,107,.30);
}
.px-step h4 { font-size: 16.5px; margin: 0 0 8px; }
.px-step p  { font-size: 13.8px; line-height: 1.6; color: var(--px-body); margin: 0; }

/* -- Meter bars — for comparisons / earnings ---------------------------- */
.px-meter { margin-bottom: 18px; }
.px-meter-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 9px;
}
.px-meter-top b { font-size: 14.5px; color: var(--px-ink); font-weight: 700; }
.px-meter-top span { font-size: 13.5px; color: var(--px-green-dk); font-weight: 800; }
.px-meter-track {
  height: 9px; border-radius: 99px;
  background: rgba(10,22,40,.06); overflow: hidden;
}
.px-meter-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--px-green), #35c398);
  width: 0;
  transition: width 1.3s var(--px-ease) .15s;
}
.px-in .px-meter-fill { width: var(--px-w, 60%); }

/* ============================================================================
   7. UTILITIES
   ========================================================================== */
.px-grid { display: grid; gap: 24px; }
.px-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.px-grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.px-grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.px-check {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 13px;
}
.px-check li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.8px; line-height: 1.55; color: var(--px-body);
}
.px-check li svg {
  flex-shrink: 0; margin-top: 3px;
  width: 18px; height: 18px; padding: 3px;
  border-radius: 50%; background: var(--px-green-soft);
  color: var(--px-green-dk);
}

/* Soft ambient blobs for hero/section backdrops */
.px-blob { position: absolute; border-radius: 50%; filter: blur(78px); pointer-events: none; z-index: 0; }
.px-blob--green { background: radial-gradient(circle, rgba(1,175,107,.16), transparent 70%); }
.px-blob--blue  { background: radial-gradient(circle, rgba(0,91,187,.14), transparent 70%); }
.px-blob--gold  { background: radial-gradient(circle, rgba(201,162,39,.12), transparent 70%); }

/* Fine grid texture — adds depth to dark panels without noise files */
.px-mesh {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 76%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 76%);
}

.px-relative { position: relative; z-index: 2; }

/* ============================================================================
   8. LEGACY BRIDGE
   Beats page-local inline styles so shared pages read as one system.
   ========================================================================== */
.top-navbar {
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--px-line-2) !important;
  box-shadow: none !important;
}
.top-navbar.scrolled { box-shadow: 0 8px 28px rgba(10,22,40,.07) !important; }
.top-navbar .nav-links li a { font-size: 13.2px; padding: 9px 12px; letter-spacing: -.005em; }
.top-navbar .nav-login-btn { background: var(--px-ink) !important; box-shadow: none !important; }
.top-navbar .nav-login-btn:hover { background: var(--px-blue) !important; }

/* Fixed UI shouldn't crowd the page ending */
.wa-float { bottom: 20px !important; right: 20px !important; box-shadow: 0 12px 28px rgba(37,211,102,.32) !important; }
#scrollUp  { bottom: 84px !important; }

/* ---- Section rhythm ---------------------------------------------------- */
.pricing-block, .features-section, .stats-premium,
.hiw-section, .tfl-fees-section, .pl-section {
  padding: clamp(68px, 8vw, 112px) 0 !important;
}
.features-section { background: var(--px-white) !important; }
.stats-premium    { background: var(--px-paper) !important; }

/* ---- Section headings — one voice everywhere -------------------------- */
.pricing-block .pb-head .eyebrow,
.stats-premium .eyebrow,
.hiw-head .eyebrow,
.gr-wall-head .eyebrow {
  color: var(--px-green-dk) !important;
  background: var(--px-green-soft) !important;
  border-color: rgba(1,175,107,.20) !important;
  letter-spacing: .16em !important;
}
.pricing-block .pb-head h2,
.features-section .section_title h2,
.stats-premium-head h2 {
  color: var(--px-ink) !important;
  letter-spacing: -.03em !important;
}
.pricing-block .pb-head h2 span,
.features-section .section_title h2 span {
  color: var(--px-green-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

/* ---- Pricing cards ---------------------------------------------------- */
.pricing-block .pb-grid { gap: 22px !important; }
.pricing-block .pb-card {
  border-color: var(--px-line) !important;
  border-radius: var(--px-r-lg) !important;
  box-shadow: var(--px-sh-sm) !important;
  transition: transform var(--px-mid) var(--px-ease),
              box-shadow var(--px-mid) var(--px-ease),
              border-color var(--px-mid) ease !important;
}
.pricing-block .pb-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(1,175,107,.28) !important;
  box-shadow: var(--px-sh-lg) !important;
}
.pricing-block .pb-card.is-featured {
  border-color: rgba(1,175,107,.45) !important;
  box-shadow: 0 22px 50px rgba(1,175,107,.16) !important;
}
.pricing-block .pb-head-band {
  background: linear-gradient(150deg, var(--px-ink) 0%, #1b3153 100%) !important;
}
.pricing-block .pb-price-amt,
.pricing-block .pb-price-amt .gbp { color: #4fd6a4 !important; }
.pricing-block .pb-icon { color: #7fe7bd !important; }
.pricing-block .pb-enrol {
  background: var(--px-green) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 22px rgba(1,175,107,.26) !important;
  transition: background var(--px-fast) ease, transform var(--px-fast) var(--px-ease),
              box-shadow var(--px-fast) ease !important;
}
.pricing-block .pb-enrol:hover {
  background: var(--px-green-dk) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px rgba(1,175,107,.34) !important;
}

/* ---- Feature cards ---------------------------------------------------- */
.features-section .single_feature {
  border: 1px solid var(--px-line) !important;
  border-radius: var(--px-r-lg) !important;
  box-shadow: none !important;
  transition: transform var(--px-mid) var(--px-ease),
              box-shadow var(--px-mid) var(--px-ease),
              border-color var(--px-mid) ease !important;
}
.features-section .single_feature:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(1,175,107,.26) !important;
  box-shadow: var(--px-sh-lg) !important;
}
.features-section .single_feature h3 { color: var(--px-ink) !important; letter-spacing: -.02em; }

/* ---- Logo strip ------------------------------------------------------- */
.logo-strip { background: var(--px-white) !important; padding: 26px 0 !important; }
.logo-strip .ls-item {
  color: var(--px-muted) !important; opacity: 1 !important;
  font-size: 13px !important; font-weight: 600;
  transition: color var(--px-fast) ease;
}
.logo-strip .ls-item:hover { color: var(--px-ink) !important; }

/* ---- Stat tiles ------------------------------------------------------- */
.stat-tile { border: 1px solid var(--px-line) !important; box-shadow: none !important; }
.stat-tile:hover { box-shadow: var(--px-sh-md) !important; transform: translateY(-4px); }


/* ============================================================================
   11. SITEWIDE HEADING NORMALISATION
   Every page predates this design system and carries its own inline <style>
   block, so each drifted on its own: the homepage alone had 9 section headings
   spanning 38-46px in three different "black"s, plus two competing greens and
   four eyebrow colours; the sub-pages settled on a separate 48px/slate pair.
   Rather than rewrite thousands of lines of page-local CSS, this layer pins
   every section heading to one scale and one palette. Sub-page wrappers
   (.topo-section-title, .seru-section-title, .faq-section-title, .ph-title)
   are folded in here so home and sub-pages share the same typography.

   Rather than rewrite those inline blocks (huge diff, high regression risk),
   this layer lands the same tokens the sub-pages already use. Scoped to
   section headings only - the hero keeps its own deliberate display scale.
   ========================================================================== */

/* -- One heading scale for every section title, light or dark ------------- */
.topo-section-title h2,
.seru-section-title h2,
.faq-section-title h2,
.ph-title h2,
.elig-head h2,
.jrn-head h2,
.crs-cta h2,
.dcta-section .dcta-head h2,
.pricing-block .pb-head h2,
.features-section .section_title h2,
.gallery-row-wrap .section_title h2,
.gr-wall-section h2,
.hiw-section .hiw-head h2,
.video-dark-section h2,
.t3 .t3-top h2,
.tfl-fees-section h2,
.faq_area h2,
.contact-split-section h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.032em !important;
  font-weight: 800 !important;
}

/* -- One ink for headings on light surfaces ------------------------------- */
.topo-section-title h2,
.seru-section-title h2,
.faq-section-title h2,
.ph-title h2,
.elig-head h2,
.jrn-head h2,
.dcta-section .dcta-head h2,
.pricing-block .pb-head h2,
.features-section .section_title h2,
.gallery-row-wrap .section_title h2,
.stats-premium .stats-premium-head h2,
.hiw-section .hiw-head h2,
.tfl-fees-section h2,
.pl-section .pl-head h2,
.faq_area h2 { color: var(--px-ink) !important; }

/* Dark-surface headings stay white - only their size was off */
.stats-premium .stats-premium-head h2,
.pl-section .pl-head h2,
.crs-cta h2,
.gr-wall-section h2,
.video-dark-section h2,
.t3 .t3-top h2,
.contact-split-section h2 { color: #fff !important; }

/* -- One accent green. The legacy #01af6b / #44b272 sat beside the token
      green and read as two slightly different brand colours. -------------- */
.topo-section-title h2 span,
.seru-section-title h2 span,
.faq-section-title h2 span,
.ph-title h2 span,
.elig-head h2 span,
.jrn-head h2 span,
.dcta-section .dcta-head h2 span,
.pricing-block .pb-head h2 span,
.features-section .section_title h2 span,
.gallery-row-wrap .section_title h2 span,
.hiw-section .hiw-head h2 span,
.tfl-fees-section h2 span,
.faq_area h2 span {
  color: var(--px-green-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}
/* On dark surfaces the accent needs to lift off the navy */
.stats-premium .stats-premium-head h2 span,
.pl-section .pl-head h2 span,
.gr-wall-section h2 span,
.video-dark-section h2 span,
.contact-split-section h2 span {
  color: #4fd6a4 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

/* -- One eyebrow treatment ----------------------------------------------- */
.dcta-section .dcta-eyebrow,
.gr-wall-section .eyebrow,
.features-section .eyebrow,
.gallery-row-wrap .eyebrow,
.hiw-section .hiw-head .eyebrow,
.tfl-fees-section .eyebrow,
.pl-section .pl-head .eyebrow,
.faq_area .eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--px-green-dk) !important;
  background: var(--px-green-soft) !important;
  border: 1px solid rgba(1,175,107,.20) !important;
  border-radius: 999px !important;
}

/* -- One content measure across every page -------------------------------
   .container sat at 970px while .ph-container was 1092 and .t3-inner 1040,
   so sections never aligned to the same edge from page to page. */
@media (min-width: 1200px) {
  .container, .ph-container, .t3-inner, .ct-main-container { max-width: 1170px !important; }
}

/* ============================================================================
   9. SUB-PAGE HEROES
   Topographical / SERU / Application / Courses / Contact each shipped with
   their own bespoke hero. These rules give them one premium voice — richer
   backdrop, tighter type, consistent buttons — without touching their markup
   contracts or any dynamic data.
   ========================================================================== */
.topo-hero, .seru-hero, .ph-hero, .crs-hero, .ct-premium-hero {
  position: relative;
  background-color: var(--px-ink) !important;
  background-image:
    radial-gradient(90% 70% at 82% 4%,  rgba(0,91,187,.34) 0%, transparent 58%),
    radial-gradient(70% 60% at 8% 96%,  rgba(1,175,107,.26) 0%, transparent 60%),
    linear-gradient(158deg, #0a1628 0%, #122744 52%, #0a1628 100%) !important;
  padding: clamp(72px, 8vw, 118px) 0 clamp(64px, 7vw, 104px) !important;
  overflow: hidden;
  isolation: isolate;
}
/* Fine grid texture over the navy — depth without an image file */
.topo-hero::after, .seru-hero::after, .ph-hero::after,
.crs-hero::after, .ct-premium-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.030) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 34%, #000 16%, transparent 78%);
          mask-image: radial-gradient(ellipse at 50% 34%, #000 16%, transparent 78%);
}
.topo-hero > .container, .seru-hero > .container, .ph-hero > .container,
.crs-hero > .container, .ct-premium-hero > .container { position: relative; z-index: 2; }

/* -- Type ---------------------------------------------------------------- */
.topo-hero h1, .seru-hero h1, .ph-hero h1,
.crs-hero h1, .ct-premium-hero h1 {
  font-size: clamp(31px, 3.7vw, 51px) !important;
  letter-spacing: -.034em !important;
  line-height: 1.07 !important;
  color: #fff !important;
}
.topo-hero h1 .highlight, .seru-hero h1 .highlight,
.ph-hero h1 span, .crs-hero h1 span {
  color: #4fd6a4 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}
.topo-hero p, .seru-hero p, .ph-hero p, .crs-hero p {
  color: rgba(233, 240, 250, .80) !important;
  font-size: clamp(15px, 1.3vw, 17px) !important;
  line-height: 1.68 !important;
}
.topo-hero strong, .seru-hero strong, .ph-hero strong { color: #fff !important; font-weight: 700; }

/* -- Eyebrow ------------------------------------------------------------- */
.topo-eyebrow, .seru-eyebrow, .ph-hero-meta > span:first-child {
  background: rgba(1,175,107,.16) !important;
  border: 1px solid rgba(79,214,164,.32) !important;
  color: #7fe7bd !important;
  letter-spacing: .14em !important;
  border-radius: 999px !important;
}

/* -- Buttons ------------------------------------------------------------- */
.topo-btn, .seru-btn, .ph-btn {
  border-radius: 999px !important;
  font-weight: 800 !important;
  transition: transform var(--px-fast) var(--px-ease),
              box-shadow var(--px-fast) var(--px-ease),
              background var(--px-fast) ease !important;
}
.topo-btn-primary, .seru-btn-primary, .ph-btn-primary {
  background: var(--px-green) !important;
  box-shadow: 0 12px 28px rgba(1,175,107,.34) !important;
  border: none !important;
}
.topo-btn-primary:hover, .seru-btn-primary:hover, .ph-btn-primary:hover {
  background: var(--px-green-dk) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 38px rgba(1,175,107,.44) !important;
}
.topo-btn-secondary, .seru-btn-secondary, .ph-btn-ghost {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  color: #fff !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.topo-btn-secondary:hover, .seru-btn-secondary:hover, .ph-btn-ghost:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(79,214,164,.55) !important;
  transform: translateY(-2px) !important;
}

/* -- Feature ticks under the hero copy ----------------------------------- */
.topo-hero-feature, .seru-hero-feature {
  color: rgba(226,238,255,.86) !important;
  font-size: 13.4px !important;
}
.topo-hero-feature svg, .seru-hero-feature svg { color: #4fd6a4 !important; }

/* -- Screenshot frames — lift them off the navy -------------------------- */
.topo-map-card, .seru-hero-card {
  box-shadow: 0 40px 90px -28px rgba(0,0,0,.66) !important;
  border-radius: var(--px-r-xl) !important;
  transition: transform var(--px-slow) var(--px-ease), box-shadow var(--px-slow) var(--px-ease);
}
.topo-map-card:hover, .seru-hero-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 54px 110px -28px rgba(0,0,0,.72) !important;
}
.topo-map-tag {
  background: rgba(255,255,255,.94) !important;
  color: var(--px-ink) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: var(--px-sh-md) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.topo-map-tag .live-dot { background: var(--px-green) !important; box-shadow: 0 0 0 3px rgba(1,175,107,.24); }

/* ============================================================================
   10. CONTACT PAGE
   Brings the bespoke contact layout onto the same card / form / button
   language as the rest of the site.
   ========================================================================== */
.ct-cards-section-wrapper, .ct-main-interactive-section { background: var(--px-paper) !important; }
.ct-cards-section-wrapper { padding: clamp(40px, 5vw, 64px) 0 clamp(24px,3vw,32px) !important; }

/* -- Hero facts card ----------------------------------------------------- */
.ct-hero-facts-card {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: var(--px-r-lg) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6) !important;
}
.ct-hero-facts-card h3 { color: #fff !important; letter-spacing: -.02em; }
.ct-hero-facts-card h3 svg { color: #4fd6a4 !important; }
.ct-fact-num {
  background: rgba(1,175,107,.22) !important;
  border: 1px solid rgba(79,214,164,.38) !important;
  color: #7fe7bd !important;
  font-weight: 800 !important;
}
.ct-fact-text h4 { color: #fff !important; letter-spacing: -.015em; }
.ct-fact-text p   { color: rgba(226,238,255,.72) !important; }
.ct-breadcrumb-badge {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 999px !important;
}

/* -- Quick-action cards -------------------------------------------------- */
.ct-quick-action-card {
  border: 1px solid var(--px-line) !important;
  border-radius: var(--px-r-lg) !important;
  box-shadow: var(--px-sh-xs) !important;
  transition: transform var(--px-mid) var(--px-ease),
              box-shadow var(--px-mid) var(--px-ease),
              border-color var(--px-mid) ease !important;
}
.ct-quick-action-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(1,175,107,.30) !important;
  box-shadow: var(--px-sh-lg) !important;
}
.ct-quick-action-card.whatsapp-card:hover { border-color: rgba(37,211,102,.42) !important; }
.ct-quick-action-card h4 { color: var(--px-ink) !important; letter-spacing: -.02em; }
.ct-quick-icon-container { border-radius: 15px !important; }
.ct-quick-action-card:hover .ct-quick-icon-container {
  transform: translateY(-2px) rotate(-4deg) scale(1.06) !important;
}

/* -- Form card ----------------------------------------------------------- */
.ct-premium-form-card {
  border: 1px solid var(--px-line) !important;
  border-radius: var(--px-r-xl) !important;
  box-shadow: var(--px-sh-md) !important;
}
.ct-premium-form-card h2 { color: var(--px-ink) !important; letter-spacing: -.03em; }
.ct-form-input-group label {
  color: var(--px-ink) !important;
  font-weight: 700 !important; font-size: 13px !important;
}
.ct-form-input-group input,
.ct-form-input-group select,
.ct-form-input-group textarea {
  border: 1.5px solid var(--px-line) !important;
  border-radius: var(--px-r-sm) !important;
  background: #fbfcfe !important;
  transition: border-color var(--px-fast) ease, box-shadow var(--px-fast) ease, background var(--px-fast) ease !important;
}
.ct-form-input-group input:focus,
.ct-form-input-group select:focus,
.ct-form-input-group textarea:focus {
  border-color: var(--px-green) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(1,175,107,.12) !important;
  outline: none !important;
}
.ct-pill-switcher { background: var(--px-paper) !important; border: 1px solid var(--px-line) !important; border-radius: 999px !important; }
.ct-pill-tab { border-radius: 999px !important; font-weight: 700 !important; transition: all var(--px-fast) var(--px-ease) !important; }
.ct-pill-tab.active {
  background: var(--px-green) !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(1,175,107,.30) !important;
}
.ct-btn-premium-submit {
  background: var(--px-green) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 28px rgba(1,175,107,.30) !important;
  transition: background var(--px-fast) ease, transform var(--px-fast) var(--px-ease), box-shadow var(--px-fast) ease !important;
}
.ct-btn-premium-submit:hover {
  background: var(--px-green-dk) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 38px rgba(1,175,107,.40) !important;
}

/* -- Location sidebar ---------------------------------------------------- */
.ct-location-details-sidebar > * {
  border-radius: var(--px-r-lg) !important;
  border: 1px solid var(--px-line) !important;
  box-shadow: var(--px-sh-xs) !important;
}

/* -- Light content sections on the sub-pages ----------------------------- */
.topo-benefits, .topo-section, .seru-section { background: var(--px-paper) !important; }
.topo-benefit-card, .seru-card {
  border: 1px solid var(--px-line) !important;
  border-radius: var(--px-r-lg) !important;
  box-shadow: none !important;
  transition: transform var(--px-mid) var(--px-ease),
              box-shadow var(--px-mid) var(--px-ease),
              border-color var(--px-mid) ease !important;
}
.topo-benefit-card:hover, .seru-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(1,175,107,.28) !important;
  box-shadow: var(--px-sh-lg) !important;
}

@media (max-width: 991px) {
  .px-rail--h::before { display: none; }
  .top-navbar .nav-links { display: none; }
}
@media (max-width: 640px) {
  .px-section { padding: 58px 0; }
  .px-btn { width: 100%; }
  .px-btn-call { width: 100%; justify-content: center; }
  .wa-float { bottom: 14px !important; right: 14px !important; }
  #scrollUp { bottom: 72px !important; right: 14px !important; }
}

/* ============================================================================
   12. SECTION COLOUR NORMALISATION
   Each section had been styled in isolation, so the page walked through four
   different blues (#005bbb brand, #364999 violet, #3b82f6, #0ea5e9), two
   greens, seven near-identical off-whites and two different blacks. Nothing
   clashed loudly — it just read as slightly-off, which is what makes a page
   feel unfinished.

   The rhythm below is deliberate: paper -> white -> paper, with the dark
   sections as anchors, and every decorative wash drawn from the brand blue and
   green only. Geometry (position, size, falloff) is preserved from the
   original gradients; only the hues and neutrals change.
   ========================================================================== */

/* ---- Light sections: two neutrals, not seven --------------------------- */
.hx {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(0,91,187,.07) 0%, transparent 58%),
    linear-gradient(180deg, var(--px-paper) 0%, var(--px-white) 72%) !important;
}
.dcta-section {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(0,91,187,.09) 0%, transparent 55%),
    radial-gradient(80% 70% at 5% 100%, rgba(1,175,107,.09) 0%, transparent 60%),
    linear-gradient(180deg, var(--px-white) 0%, var(--px-paper) 100%) !important;
}
.pricing-block {
  background:
    radial-gradient(140% 80% at 90% -10%, rgba(0,91,187,.09) 0%, transparent 55%),
    radial-gradient(90% 70% at 5% 100%, rgba(1,175,107,.07) 0%, transparent 60%),
    linear-gradient(180deg, var(--px-paper) 0%, var(--px-white) 100%) !important;
}
.hiw-section {
  background-color: var(--px-paper) !important;
  background-image:
    radial-gradient(circle at 90% 0%, rgba(0,91,187,.06), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(1,175,107,.05), transparent 50%) !important;
}
.pl-section {
  background-color: var(--px-paper) !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(0,91,187,.07), transparent 55%) !important;
}
.tfl-fees-section {
  background: linear-gradient(180deg, var(--px-paper) 0%, var(--px-white) 100%) !important;
}

/* ---- Dark anchors: navy ink, never neutral black ----------------------- */
.gr-wall-section {
  background:
    radial-gradient(circle at 15% 8%, rgba(0,91,187,.30) 0%, transparent 50%),
    radial-gradient(circle at 88% 90%, rgba(1,175,107,.16) 0%, transparent 55%),
    linear-gradient(160deg, var(--px-ink) 0%, #060d18 100%) !important;
}

/* ---- Retire the violet: it read purple beside the brand blue ----------- */
.dcta-eyebrow,
.pl-section .eyebrow,
.hiw-section .eyebrow { color: var(--px-green-dk) !important; }

/* ---- Sub-page surfaces: same two neutrals as the homepage --------------
   These sections each picked their own off-white (#f8fafc, #f1f5f9, #fafaff),
   which is why moving between pages felt like a slight temperature shift. */
.topo-benefits, .topo-tools, .topo-faq-section,
.seru-benefits, .seru-tools, .seru-faq-section,
.ph-centres-section, .elig, .jrn,
.crs-list-section, .ct-main-section {
  background-color: var(--px-paper) !important;
  background-image: none !important;
}
.topo-tools, .seru-tools, .t3, .features-section {
  background-color: var(--px-white) !important;
}

/* ---- Pricing block chrome: brand blue, not Tailwind blue --------------- */
.pricing-block::before {
  background: linear-gradient(90deg, transparent, rgba(0,91,187,.40), transparent) !important;
}
.pricing-block .pb-head .eyebrow {
  background: var(--px-green-soft) !important;
  border-color: rgba(1,175,107,.28) !important;
}

/* ============================================================================
   13. DARK ANCHORS
   The page ran 3,884px of unbroken light before its first dark section — only
   7.9% of the homepage carried any weight, which is what makes a long page
   feel washed out however clean the individual sections are.

   Stats and Platforms both hold self-contained white cards, so flipping the
   surface underneath them makes the cards read as raised objects instead of
   tinted panels. Stats sits directly above the (already dark) reviews wall and
   uses the raised ink so the seam between them still reads as two sections.
   ========================================================================== */
.counter-area.stats-premium {
  background-color: var(--px-ink-2) !important;
  background-image:
    radial-gradient(90% 80% at 12% 0%, rgba(0,91,187,.22) 0%, transparent 55%),
    radial-gradient(70% 70% at 92% 100%, rgba(1,175,107,.14) 0%, transparent 60%) !important;
}
.pl-section {
  background-color: var(--px-ink) !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(0,91,187,.20), transparent 55%),
    radial-gradient(80% 70% at 100% 100%, rgba(1,175,107,.12) 0%, transparent 60%) !important;
}

/* ---- Copy on the two new dark surfaces --------------------------------- */
.counter-area.stats-premium .stats-premium-head p,
.counter-area.stats-premium .stats-premium-head .lede,
.pl-section .pl-head p {
  color: rgba(226,238,255,.74) !important;
}
.pl-section .pl-helper { color: rgba(226,238,255,.62) !important; }
.pl-section .pl-helper a { color: #7fe7bd !important; }

/* Eyebrows: the light-surface pill would glow as a solid block on navy.
   .pl-head is needed to out-specify the light-surface rule further up. */
.counter-area.stats-premium .eyebrow,
.pl-section .pl-head .eyebrow {
  background: rgba(1,175,107,.16) !important;
  border-color: rgba(1,175,107,.34) !important;
  color: #7fe7bd !important;
}

/* Cards keep their own white/tinted fills — just deepen the lift so they sit
   on the dark rather than float above it. */
.counter-area.stats-premium .stat-tile,
.pl-section .pl-card {
  box-shadow: 0 18px 44px rgba(0,0,0,.34) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* ---- Hero H1 accent -----------------------------------------------------
   The <em> in the hero headline is the largest text on the site and sat at
   2.86:1 on white — under the 3:1 floor for large text. Same fix already
   applied to the section H2 accents: use the readable step of the green ramp,
   which is indistinguishable at display size. */
.hx h1 em,
.hx-title em { color: var(--px-green-ink) !important; }

/* ---- Primary CTAs -------------------------------------------------------
   White on the raw brand green is 2.86:1 — under AA for 16px text, and these
   are the buttons the site earns from. The gradient's lightest stop is what
   sets contrast, so it starts one step deeper: same hue, ~12% darker, 5.2:1.
   Revert by pointing --px-green-cta back at #01af6b. */
.px-btn--primary,
.pricing-block .pb-enrol,
.dcta-btn-try,
.pp-cta-btn,
.pp-side-cta,
.fn-newsletter-btn,
.ct-btn-premium-submit {
  background: linear-gradient(135deg, var(--px-green-cta) 0%, #056b40 100%) !important;
  color: #fff !important;
}
.px-btn--primary:hover,
.pricing-block .pb-enrol:hover,
.dcta-btn-try:hover,
.pp-cta-btn:hover,
.pp-side-cta:hover,
.fn-newsletter-btn:hover,
.ct-btn-premium-submit:hover {
  background: linear-gradient(135deg, #056b40 0%, #045334 100%) !important;
  color: #fff !important;
}