/* ================================================================
   CRIS LANDING — CALL TO ACTION (card with neon art)
   Rules: no inline styles, no !important, no media queries.
          Responsive values are set per range in responsive.css
          under ".plx-cta":
     --cta-py --cta-dir --cta-pad --cta-align --cta-text-max --cta-sub-max
     --cta-actions-w --cta-btn-justify
   ================================================================ */

.plx-cta {
  /* colour */

  /* shape + type */

  overflow: hidden;
  padding: var(--sp-64) 0;
  position: relative;
}

/* Card */
.plx-cta-card {
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--lime-bd);
  border-radius: var(--br-outer);
  display: flex;
  flex-direction: row;
  gap: var(--sp-40);
  justify-content: space-between;
  overflow: hidden;
  padding: var(--sp-60) var(--sp-60);
  position: relative;
  text-align: left;
}
.plx-cta-card::before {
  background: radial-gradient(ellipse 55% 75% at 20% 50%, var(--lime-a10), transparent 65%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* Decorative art */
.plx-cta-art { inset: 0; opacity: var(--opacity-disabled); pointer-events: none; position: absolute; z-index: 0; }
.plx-cta-art-svg { display: block; height: 100%; width: 100%; }

/* Text */
.plx-cta-text { flex: 1; max-width: var(--size-560); position: relative; z-index: var(--z-1); }
.plx-cta-h2 {
  color: var(--t1);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  letter-spacing: -.8px;

  margin-bottom: var(--sp-16);
}
.plx-cta-h2 .plx-cta-grad {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-image: linear-gradient(90deg,var(--lime) 0%,var(--lime-400) 60%,var(--green) 100%);
  display: block;
}
.plx-cta-sub { color: var(--t3); font-size: var(--fs-14);margin: 0; max-width: var(--size-420); }

/* Buttons */
.plx-cta-actions {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--sp-14);
  position: relative;
  width: var(--size-280);
  z-index: var(--z-1);
}
.plx-cta-btn-primary {
  align-items: center;
  background: linear-gradient(90deg,var(--lime) 0%,var(--green) 55%,var(--green) 100%);
  border: 0;
  border-radius: var(--br-inner);
  color: var(--bg);
  display: flex;
  font-size: var(--fs-14);
  font-weight: 800;
  gap: var(--sp-6);
  justify-content: space-between;
  letter-spacing: -.2px;
  padding: var(--sp-20) var(--sp-28);
  transition: filter var(--t-default), transform var(--t-default), box-shadow var(--t-default), color var(--t-default) ease;
}
.plx-cta-btn-primary:hover {
  box-shadow: 0 0 32px var(--lime-a50);
  color: var(--bg);
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.plx-cta-btn-primary .plx-cta-btn-arr {
  align-items: center;
  background: var(--black-a15);
  border-radius: var(--br-inner);
  display: flex;
  font-size: var(--fs-16);
  height: var(--size-28);
  justify-content: center;
  width: var(--size-28);
}
.plx-cta-btn-secondary {
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--white-a25);
  border-radius: var(--br-inner);
  color: var(--t1);
  display: flex;
  font-size: var(--fs-14);
  font-weight: 700;
  justify-content: center;
  letter-spacing: -.1px;
  padding: var(--sp-16) var(--sp-28);
  transition: border-color var(--t-default), background var(--t-default), transform var(--t-default), color var(--t-default) ease;
}
.plx-cta-btn-secondary:hover {
  background: var(--border);
  border-color: var(--lime-a50);
  color: var(--t1);
  transform: translateY(-2px);
}