.commercial-plan-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  background: #FFFFFF;
  border: 1px solid #E5E9EF;
  box-shadow: 0 10px 26px rgba(11, 29, 58, .065);
  transform: translateY(0) scale(1);
  transition: border-color 210ms ease, box-shadow 210ms ease, transform 210ms ease;
}

.commercial-plan-card.recommended,
.commercial-plan-card.is-selected {
  background: #FFFFFF;
  border-color: #E5E9EF;
  box-shadow: 0 10px 26px rgba(11, 29, 58, .065);
  transform: translateY(0) scale(1);
}

/* The badge is informational; it must never style a plan as selected. */
.commercial-plan-card.recommended:not(:hover):not(:focus-within):not(.is-selected) {
  border-color: #E5E9EF;
  box-shadow: 0 10px 26px rgba(11, 29, 58, .065);
  transform: translateY(0) scale(1);
}

.commercial-plan-badge-slot {
  display: flex;
  align-items: center;
  min-height: 27px;
  margin-bottom: 10px;
}

.commercial-plan-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #E6F7F6;
  color: #0B1D3A;
  padding: 5px 10px;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.commercial-plan-description {
  color: #516173;
}

.commercial-plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .28rem;
  margin: 16px 0 2px;
  color: #0B1D3A;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.commercial-plan-price .commercial-plan-currency {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.commercial-plan-price .commercial-plan-amount {
  font-size: clamp(2.125rem, 3.3vw, 3rem);
  letter-spacing: -.045em;
}

.commercial-plan-price .commercial-plan-period {
  color: #516173;
  font-size: .8rem;
  font-weight: 750;
  letter-spacing: 0;
}

/* Public price cards keep one quiet reference line and no promotional noise. */
.commercial-plan-regular {
  width: 100%;
  margin: 14px 0 -8px;
  color: #516173;
  font-size: .78rem;
  text-align: left;
}

.commercial-plan-regular span {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(81, 97, 115, .7);
}

.commercial-promotion-label,
.commercial-plan-savings {
  display: none !important;
}

.commercial-trial-preview {
  margin: 10px 0 0;
  color: #516173;
  font-size: .74rem;
  font-weight: 700;
  text-align: center;
}

.commercial-plan-card .commercial-plan-limits,
.commercial-plan-limits {
  display: grid;
  flex: none;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  color: #516173;
  list-style: none;
}

.commercial-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 260px);
  margin: 20px auto 0;
}

.commercial-stepper-label {
  color: #516173;
  font-size: .88rem;
  font-weight: 800;
}

.commercial-stepper-controls {
  display: grid;
  grid-template-columns: 42px 44px 42px;
  align-items: center;
  border: 1px solid #E5E9EF;
  border-radius: 999px;
  background: #FFFFFF;
  padding: 2px;
}

.commercial-stepper button {
  display: grid;
  place-items: center;
  width: 42px;
  min-height: 42px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #0B1D3A;
  font: 850 1.2rem/1 inherit;
  cursor: pointer;
}

.commercial-stepper button:hover:not(:disabled) {
  background: #E6F7F6;
  color: #0B1D3A;
}

.commercial-stepper button:disabled {
  opacity: .32;
  cursor: not-allowed;
}

.commercial-stepper button:focus-visible {
  outline: 3px solid rgba(0, 181, 166, .28);
  outline-offset: 1px;
}

.commercial-stepper output {
  text-align: center;
  color: #0B1D3A;
  font-weight: 850;
}

.commercial-plan-periodicity {
  display: block;
  margin-top: 7px;
  color: #516173;
  font-size: .8rem;
  text-align: center;
}

.commercial-plan-card .commercial-plan-benefits,
.commercial-plan-benefits {
  display: grid;
  flex: none;
  gap: 10px;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  color: #516173;
}

.commercial-plan-benefits li {
  position: relative;
  padding-left: 22px;
  line-height: 1.48;
}

.commercial-plan-benefits li::before {
  position: absolute;
  left: 0;
  top: .04em;
  color: #00B5A6;
  content: "✓";
  font-size: .88rem;
  font-weight: 900;
}

.commercial-plan-card .commercial-plan-cta {
  margin-top: auto;
  border-color: #0B1D3A;
  background: #0B1D3A;
  color: #FFFFFF;
}

@media (min-width: 821px) {
  .commercial-plan-card .commercial-plan-description {
    min-height: 5.2rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .commercial-plan-card:hover,
  .commercial-plan-card:focus-within {
    z-index: 1;
    background: #FFFFFF;
    border-color: #00B5A6;
    box-shadow: 0 18px 38px rgba(11, 29, 58, .13);
    transform: translateY(-3px) scale(1.012);
  }
}

@media (hover: none), (pointer: coarse) {
  .commercial-plan-card:focus-within {
    border-color: #00B5A6;
    box-shadow: 0 12px 30px rgba(11, 29, 58, .1);
    transform: none;
  }
}

@media (max-width: 820px) {
  .commercial-plan-card .commercial-plan-description {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .commercial-plan-card {
    transition: none;
  }

  .commercial-plan-card:hover,
  .commercial-plan-card:focus-within {
    transform: none;
  }
}

.billing-cycle-selector {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: 4px auto 28px;
  color: #516173;
  text-align: center;
}

.billing-cycle-options {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 4px;
  border: 1px solid #E5E9EF;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 7px 18px rgba(11, 29, 58, .06);
}

.billing-cycle-options label { position: relative; cursor: pointer; }
.billing-cycle-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.billing-cycle-options span {
  display: block;
  min-width: 112px;
  padding: 9px 18px;
  border-radius: 999px;
  color: #516173;
  font-weight: 850;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.billing-cycle-options input:checked + span { background: #0B1D3A; color: #FFFFFF; }
.billing-cycle-options input:focus-visible + span { outline: 3px solid rgba(0, 181, 166, .32); outline-offset: 2px; }
.billing-cycle-selector > strong { color: #007f75; font-size: .9rem; }
.billing-cycle-selector > small { font-size: .82rem; }
.commercial-plan-savings { margin: 5px 0 0; color: #007f75; font-size: .88rem; font-weight: 850; text-align: center; }
.commercial-contract-summary { margin: 0; padding: 11px 13px; border-radius: 10px; background: #f7fafb; color: #516173; font-size: .9rem; }

@media (max-width: 480px) {
  .billing-cycle-options { width: 100%; max-width: 330px; }
  .billing-cycle-options span { min-width: 0; padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .billing-cycle-options span { transition: none; }
}