:root {
  /* Brand */
  --cnvs-themecolor: #2463eb;         /* primary */
  --cnvs-themecolor-rgb: 37, 99, 235;

  --cnvs-gradient-color: linear-gradient(90deg, #2463eb, #06B6D4); /* primary to secondary gradient */

  --bs-primary: #2563EB;
  --bs-primary-rgb: 37, 99, 235;

  /* Optional: if you use gradients in headings */
  --dep-accent: #06B6D4;              /* secondary accent */
  --dep-dark: #0B1220;
  --dep-surface: #F5F7FB;
  --dep-border: #E6EAF2;
  --dep-muted: #64748B;
}

/* Dependal header logo sizing (prevents stretch, keeps consistent height) */
#header-wrap #logo img {
  height: 40px;          /* mobile default */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Hero image: make it feel intentional */
.dep-hero-img{
  max-width: 92%;
}

@media (min-width: 992px){
  .dep-hero-img{
    max-width: 100%;
    transform: scale(1.05);
    transform-origin: center right;
  }
}

/* Optional: reduce the giant stacked headline effect on wide screens */
@media (min-width: 1200px){
  #slider h1.display-4{
    font-size: 3.5rem;
    line-height: 1.05;
  }
}

.button.bg-color,
.bg-color {
  background-color: var(--cnvs-themecolor) !important;
}
.color {
  color: var(--cnvs-themecolor) !important;
}

.gradient-color,
.gradient-text {
  background: linear-gradient(90deg, var(--cnvs-themecolor), var(--dep-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#wrapper {
  background-position: 50% -68%;
}

/* -----------------------------------------
   Pricing (Dependal)
------------------------------------------ */

/* Give pricing cards consistent spacing and tidy shadows */
#section-pricing .pricing-box {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(11, 18, 32, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#section-pricing .pricing-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(11, 18, 32, 0.10);
}

/* Ensure equal height behaviour stays solid */
#section-pricing .pricing-box .pricing-features {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* Make the “Most Popular” badge always sit nicely */
#section-pricing .badge.position-absolute {
  box-shadow: 0 8px 18px rgba(11, 18, 32, 0.10);
}

/* Reduce badge overlap issues on small screens */
@media (max-width: 575.98px) {
  #section-pricing .badge.position-absolute {
    top: -14px !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.85rem !important;
  }
  #section-pricing .pricing-box {
    padding: 2.25rem !important;
  }
}

/* Make pricing toggle feel crisp */
#section-pricing .pricing-tenure-switcher .btn-group .btn {
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, 0.10);
}
#section-pricing .pricing-tenure-switcher .btn-group .btn-check:checked + .btn {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.25);
}

/* Optional: small-print block styling */
#section-pricing .bg-contrast-0.rounded-xxl {
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Pricing header layout fixes (prevents price overlapping titles) */
#section-pricing .pricing-box .min-w-0 { min-width: 0; }

#section-pricing .pricing-price {
  line-height: 1;
  font-size: 2.75rem; /* dial this if needed */
  white-space: nowrap;
}

/* Keep title readable if space is tight */
#section-pricing .pricing-box h3 {
  margin-right: 0.5rem;
}

/* Mobile: stack price under title so nothing collides */
@media (max-width: 575.98px) {
  #section-pricing .pricing-box .d-flex.align-items-start.justify-content-between {
    flex-direction: column;
    align-items: flex-start !important;
  }
  #section-pricing .pricing-box .text-end {
    text-align: left !important;
  }
  #section-pricing .pricing-price {
    font-size: 2.4rem;
  }
}

#section-pricing .pricing-price { font-size: 2.4rem; }

/* --- FORCE pricing header to never clip or overlap --- */

/* 1) Kill clipping in pricing cards (common cause of "£2") */
#section-pricing .pricing-box {
  overflow: visible !important;
}

/* 2) Ensure the price never wraps or gets truncated */
#section-pricing .pricing-price,
#section-pricing .pricing-price .pts-content {
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Pricing header: never overlap */
#section-pricing .pricing-box > .d-flex.align-items-start.justify-content-between {
  flex-wrap: wrap;              /* key: allows wrap instead of collision */
  row-gap: 10px;
}

/* Left side (title + desc) can shrink and wrap */
#section-pricing .pricing-box > .d-flex.align-items-start.justify-content-between > .min-w-0 {
  flex: 1 1 180px;              /* allow shrink, sensible base */
  min-width: 0;                 /* critical for flex overflow */
}

/* Right side (price) keeps its width and stays intact */
#section-pricing .pricing-box > .d-flex.align-items-start.justify-content-between > .text-end {
  flex: 0 0 auto;
  min-width: 132px;             /* enough for £129 */
}

#section-pricing .pricing-price,
#section-pricing .pricing-price .pts-content {
  white-space: nowrap;
}

/* Optional: calm the price size slightly to reduce collisions */
#section-pricing .pricing-price {
  font-size: 2.4rem;
  line-height: 1.05;
}