@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* Shared background across the hero (sec1) + Charlie tabs section */
.cbk-hero-shell {
  background: linear-gradient(106deg, #39338f 0.57%, #090837 50.29%, #090837 100%);
}

/* ---- section ---- */
.cbk-tabs {
  padding: 60px 0 0px;
}
.cbk-tabs .cbk-inner {
  width: 90%;
  max-width: 1120px;
  margin: 0 auto;
}
.cbk-tabs .cbk-heading {
  margin: 0 0 40px;
  color: #fff;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 1.4vw + 18px, 40px);
  line-height: 1.3;
}

/* ---- tabs container: nav (buttons) + content, stacked vertically ---- */
.cbk-tabs-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/* ---- horizontal tab buttons: border + gradient background live here ---- */
.cbk-nav {
  display: flex;
  flex-direction: row;
  width: fit-content;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.6rem;
  border-radius: 9px;
  border: 1px solid #ced5dd;
  background: linear-gradient(
    90deg,
    rgba(240, 246, 255, 0.2) 0%,
    rgba(214, 227, 247, 0.2) 50%,
    rgba(237, 244, 255, 0.2) 100%
  );
}

/* button ( !important scoped to .cbk buttons only — beats the theme's global
   `button { color:#fff !important; background:teal }` without touching anything
   else on the site) */
.cbk-tabs .cbk-tab-btn {
  padding: 6px 24px;
  border: 0;
  cursor: pointer;
  border-radius: 10px;
  /* inactive: transparent background, white text */
  background: transparent !important;
  color: #fff !important;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 33px; /* 220% */
  letter-spacing: -0.3px;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}
.cbk-tabs .cbk-tab-btn.is-active,
.cbk-tabs .cbk-tab-btn:hover,
.cbk-tabs .cbk-tab-btn:focus-visible {
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
  outline: none;
}

/* ---- content panels (vertical flex: description + image) ---- */
.cbk-panels {
  width: 100%;
}
.cbk-panel {
  display: none;
}
.cbk-panel.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.cbk-tab-desc {
  margin: 0;
  max-width: 760px;
  color: #fff;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px; /* 138.889% */
  letter-spacing: -0.36px;
}
.cbk-tab-media {
  margin: 0 auto;
}

.kendisout section.cbk-tabs .cbk-panels .cbk-panel .cbk-tab-media {
  width: 940px;
  max-width: 100%;
}
.kendisout section.cbk-tabs .cbk-panels .cbk-panel .cbk-tab-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* mobile */
@media (max-width: 767px) {
  .cbk-tabs {
    padding: 40px 0 0px;
  }
  .cbk-tabs .cbk-tab-btn {
    line-height: 26px;
    padding: 6px 14px;
    min-width: 120px;
  }
}

/* ---- "Context-First AI" section: 3-up feature cards ----
   Sits between the section image and the "Learn more" link.
   3 across on large screens, 2 on medium, 1 on small. */
/* full width: matches the section image above, which spans the section's
   content box (the section's own horizontal padding supplies the gutters) */
.kendisout .homepageAiSection .ctx-ai-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
  margin: 40px 0 10px;
}
.kendisout .homepageAiSection .ctx-ai-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}
.kendisout .homepageAiSection .ctx-ai-card-icon img {
  display: block;
  width: 48px;
  height: 48px;
}
/* size/colour come from the shared `sm` + `txtwht` classes; weight set here */
.kendisout .homepageAiSection .ctx-ai-card h2 {
  margin: 0;
  font-weight: 600;
}
/* fluid 1rem (16px) -> 1.25rem (20px) between ~375px and ~1440px viewports */
.kendisout .homepageAiSection .ctx-ai-card-text {
  margin: 0;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1rem, 0.91rem + 0.38vw, 1.25rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.36px;
}

/* tablet: 2 across */
@media (max-width: 1023px) {
  .kendisout .homepageAiSection .ctx-ai-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* mobile: single column, card content centred */
@media (max-width: 767px) {
  .kendisout .homepageAiSection .ctx-ai-cards {
    grid-template-columns: 1fr;
    margin-top: 28px;
    gap: 28px;
  }
  .kendisout .homepageAiSection .ctx-ai-card {
    align-items: center;
    text-align: center;
  }
  /* the h2 carries `DFA` (display:flex), so centring needs the flex axis too */
  .kendisout .homepageAiSection .ctx-ai-card h2 {
    justify-content: center;
    text-align: center;
  }
  /* the hard <br>s in the copy are desktop line-break tuning; on a narrow
     centred column they fire on top of natural wrapping and strand single
     words on their own line, so let the text wrap on its own here */
  .kendisout .homepageAiSection .ctx-ai-card-text br {
    display: none;
  }
}