/* KBX pricing cards — homepage section 09, the three Business Suite plans.
   Structure and copy live in the JSON that build.py writes; this file is finish
   only. Classes come from build.py: kbx-plan, and kbx-plan--plain /
   kbx-plan--featured / kbx-plan--dark for the three treatments.

   A note on specificity. Elementor writes a per-element colour rule of the form
   `.elementor-element-XXXX .elementor-heading-title`, which is two classes. Any
   override here has to carry three to win without !important, which is why the
   dark-card rules below are written long rather than short. */

/* ---------------------------------------------------------------- card --- */
/* Cards sit in .kbx-grid-3, which renders each one as .e-con-full: the widgets
   are direct children and there is no .e-con-inner to reach through. */

.kbx-plan {
  gap: 10px;
}

.kbx-plan > .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

/* The middle plan is the one most businesses buy, so it reads as chosen: a blue
   edge and a lift, not a louder colour or a shouting ribbon. */
.kbx-plan--featured {
  box-shadow: var(--kbx-shadow-soft);
}

/* The hover lift on .kbx-card clears the border to transparent, which erases the
   blue edge on the featured card and the outline of the dark one. Hold them. */
.kbx-plan--featured:hover {
  border-color: var(--kbx-blue) !important;
}

.kbx-plan--dark:hover {
  border-color: var(--kbx-black) !important;
}

/* --------------------------------------------------------------- price --- */

.kbx-plan .kbx-plan__tag p {
  font-size: clamp(0.9375rem, 0.8vw, 1rem);
  margin: 0;
}

.kbx-plan .kbx-plan__price .elementor-heading-title {
  font-family: var(--kbx-font-headline);
  font-size: clamp(2.125rem, 2.3vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-top: 6px;
}

.kbx-plan .kbx-plan__pricenote p {
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0 0 4px;
}

/* ----------------------------------------------------------- built for --- */

.kbx-plan .kbx-plan__who {
  background: var(--kbx-surface);
  border-radius: 10px;
  padding: 12px 14px;
  gap: 2px;
}

.kbx-plan .kbx-plan__wholabel .elementor-heading-title {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kbx-ink-3);
  line-height: 1.2;
}

.kbx-plan .kbx-plan__who .elementor-widget-text-editor p {
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 0;
}

.kbx-plan .kbx-plan__who > .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

/* ---------------------------------------------------------- fixes, plus --- */

.kbx-plan .kbx-plan__fix p {
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 2px 0 0;
}

.kbx-plan .kbx-plan__fix strong {
  color: var(--kbx-blue);
  font-weight: 600;
}

.kbx-plan .kbx-plan__plus p {
  font-size: 0.8125rem;
  font-weight: 700;
  margin: 6px 0 0;
}

/* ------------------------------------------------------------ features --- */

.kbx-plan .kbx-plan__features .elementor-icon-list-items {
  display: block;
}

.kbx-plan .kbx-plan__features .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--kbx-line);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.kbx-plan .kbx-plan__features .elementor-icon-list-item:last-child {
  border-bottom: 0;
}

/* The bullet is a rounded blue square, drawn here rather than shipped as a
   glyph. If this file fails to load the Font Awesome square still renders, so
   the list never loses its markers. */
.kbx-plan .kbx-plan__features .elementor-icon-list-icon svg {
  display: none;
}

.kbx-plan .kbx-plan__features .elementor-icon-list-icon::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--kbx-blue);
  margin-top: 6px;
}

.kbx-plan .kbx-plan__features .elementor-icon-list-text {
  padding-inline-start: 0;
}

/* ----------------------------------------------------------- dark plan --- */
/* Elementor writes colour as
   `.elementor-14 .elementor-element.elementor-element-XXXX .elementor-heading-title`
   — four classes. Nothing written by hand here reaches that without getting
   silly, so the inverted card claims its colours with !important. Without it
   the heading and the price render black on black: present in the markup,
   invisible on the page. That is the same class of failure as the entrance
   animations this site already removed. */

.kbx-plan--dark .elementor-widget-heading .elementor-heading-title,
.kbx-plan--dark .elementor-widget-text-editor,
.kbx-plan--dark .elementor-widget-text-editor p,
.kbx-plan--dark .kbx-plan__features .elementor-icon-list-text {
  color: var(--kbx-white) !important;
}

.kbx-plan--dark .kbx-eyebrow .elementor-heading-title,
.kbx-plan--dark .kbx-plan__fix strong {
  color: var(--kbx-blue-light) !important;
}

.kbx-plan--dark .kbx-plan__pricenote p,
.kbx-plan--dark .kbx-plan__plus p,
.kbx-plan--dark .kbx-plan__wholabel .elementor-heading-title,
.kbx-plan--dark .kbx-plan__who .elementor-widget-text-editor p {
  color: var(--kbx-on-dark-muted) !important;
}

.kbx-plan--dark .kbx-plan__who {
  background: rgba(255, 255, 255, 0.06);
}

.kbx-plan--dark .kbx-plan__features .elementor-icon-list-item {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.kbx-plan--dark .kbx-plan__features .elementor-icon-list-icon::before {
  background: var(--kbx-blue-light);
}

/* ------------------------------------------------- terms under the cards --- */

.kbx-plan__note p {
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
}

.kbx-plan__action {
  align-items: center;
  margin-top: 8px;
}

/* --------------------------------------------------------- narrow cards --- */
/* Two columns leaves the third card alone on its own row; centre it rather than
   letting it sit hard left against a gap. */
@media (max-width: 1024px) and (min-width: 641px) {
  .kbx-grid-3 > .e-con-inner > .kbx-plan:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 12px);
    margin-inline: auto;
  }
}