/* ====================================================
   BASE STYLES (must come BEFORE media queries so
   media queries can properly override them)
======================================================*/
.pricing-compare-section {
  display: none; /* shown only on desktop via media query */
  position: relative;
  top: -200px;
  padding: 0 2em;
}
.pricing-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(63,84,209,0.12);
  border: 1px solid rgba(63,84,209,0.15);
}
.pricing-compare-table thead tr th {
  padding: 20px 12px;
  text-align: center;
  border-bottom: 2px solid #e8eaf0;
  vertical-align: top;
  background: #fff;
}
.pricing-compare-table thead tr th.feature-col {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #6e768d;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #f3f4f6;
  min-width: 220px;
  padding-left: 20px;
}
.compare-plan-name {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.compare-plan-price {
  font-size: 20px;
  font-weight: 700;
  color: #1170c9;
  line-height: 1.2;
}
.compare-plan-price.free { color: #1f2937; }
.compare-plan-period { font-size: 13px; font-weight: 400; color: #6e768d; }
.compare-plan-vat { font-size: 12px; color: #9ca3af; margin-top: 5px; }
.pricing-compare-table tbody tr { border-bottom: 1px solid #e8eaf0; }
.pricing-compare-table tbody tr:nth-child(even) { background: #f9fafb; }
.pricing-compare-table tbody tr:hover { background: #f0f4ff; }
.pricing-compare-table tbody td {
  padding: 11px 12px;
  text-align: center;
  font-size: 14px;
  color: #374151;
}
.pricing-compare-table tbody td:first-child {
  text-align: left;
  font-weight: 500;
  color: #1f2937;
  padding-left: 20px;
}
.chk-yes, .chk-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}
.chk-yes { background: #1170c9; color: #fff; }
.chk-no { background: #e5e7eb; color: #9ca3af; }
.pricing-compare-table tfoot td {
  padding: 14px 20px;
  font-size: 13px;
  color: #6e768d;
  text-align: left;
  background: #f9fafb;
  border-top: 1px solid #e8eaf0;
}

/* ====================================================
   MOBILE (≤767px): 1 card per row + show more
   High-specificity selectors override external CSS
======================================================*/
@media screen and (max-width: 767px) {
  .pricing-compare-section { display: none !important; }
  /* Add breathing room above and below the card stack */
  .pricingTable { padding-top: 24px !important; padding-bottom: 40px !important; }
  /* Override the -100px pull-up so cards don't go under the newsletter */
  .pricingNewsLetter { margin-top: 30px !important; }
  /* 1 card per row — beats existing inline-block rule */
  ul.pricingTable-firstTable.pricing-cards-section {
    display: block !important;
    top: 0 !important;
  }
  ul.pricingTable-firstTable.pricing-cards-section > li.pricingTable-firstTable_table {
    display: block !important;
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 auto 20px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  /* Collapse extra features */
  .extra-feature { display: none !important; }
  .pricingTable-firstTable_table__options.expanded .extra-feature { display: list-item !important; }
  .pricingTable-firstTable_table__options { min-height: 0 !important; display: block !important; }
  /* Show more button */
  .show-more-btn {
    display: block !important;
    background: none;
    border: 1px solid #1170c9;
    color: #1170c9;
    padding: 6px 22px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    margin: 8px auto 12px;
    font-family: inherit;
    width: auto;
  }
  .show-more-btn:hover { background: #1170c9; color: #fff; }
}

/* ====================================================
   TABLET + DESKTOP (≥768px): comparison table
======================================================*/
@media screen and (min-width: 768px) {
  .pricing-cards-section { display: none !important; }
  .pricing-compare-section { display: block !important; }
  .extra-feature { display: list-item !important; }
  .show-more-btn { display: none !important; }
}