/* ==========================================================================
   Pricing — "free vs Full Access" band
   Used only by /pricing.html and /en/pricing.html.
   Goal (Farid 2026-10-29): make it obvious what is free and what the
   subscription adds, so the paid plan reads as an optional upgrade and not as
   the entry ticket to learning medical terminology.
   Tokens come from site-2026.css / site-theme-2026.css.
   ========================================================================== */

.fp-split {
  margin: 1.1rem auto 1.5rem;
  padding: clamp(1.05rem, 2.4vw, 1.5rem);
  border-radius: 24px;
  border: 1px solid var(--hx-line, rgba(8, 25, 46, 0.12));
  background: linear-gradient(180deg, #fdfaf2, #fffdf7);
  box-shadow: 0 10px 30px rgba(8, 25, 46, 0.06);
}

.fp-head {
  margin-bottom: 0.95rem;
}

.fp-head h3 {
  margin: 0 0 0.3rem;
  font-size: clamp(1.02rem, 2.1vw, 1.28rem);
  line-height: 1.35;
  color: var(--hx-navy, #08192e);
  letter-spacing: -0.02em;
}

.fp-head p {
  margin: 0;
  max-width: 62ch;
  color: rgba(18, 34, 56, 0.66);
  font-size: 0.94rem;
  line-height: 1.6;
}

.fp-cols {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.fp-col {
  padding: 0.95rem 1.05rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--hx-line, rgba(8, 25, 46, 0.12));
  background: #fffdf7;
}

.fp-col-full {
  border-color: rgba(13, 138, 125, 0.38);
  background: linear-gradient(180deg, rgba(99, 224, 199, 0.13), rgba(255, 253, 247, 0.92));
}

.fp-tag {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--hx-teal-deep, #075e5b);
}

.fp-col-free .fp-tag {
  color: rgba(18, 34, 56, 0.6);
}

.fp-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.fp-col li {
  position: relative;
  padding-inline-start: 1.2rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--hx-ink, #122238);
}

.fp-col li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(13, 138, 125, 0.6);
}

.fp-col-free li::before {
  background: rgba(18, 34, 56, 0.26);
}

.plan-compare {
  margin: -0.1rem 0 0.2rem;
  font-size: 0.84rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--hx-teal-deep, #075e5b);
}

.plan-compare:empty {
  display: none;
}

/* The save chip is teal-on-light by default; invert it on the selected (navy) toggle. */
.billing-toggle button[aria-pressed="true"] .save-chip {
  background: rgba(247, 241, 229, 0.18);
  color: var(--hx-cream-2, #fbf7ef);
}

@media (max-width: 420px) {
  .fp-col li {
    font-size: 0.9rem;
  }
}