/* Plans (pages/plans.html.twig). The plan cards are css/plan-card.css's. */

/* Accordion */
.acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; background: none; border: 0; color: var(--ld-text-strong); font: 700 15px/20px var(--font-display); text-align: left; cursor: pointer; }
.acc-q svg { transition: transform var(--ld-ease-enter); color: var(--ld-text-muted); }
.acc.is-open .acc-q svg { transform: rotate(180deg); }
.acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ld-ease-enter); }
.acc.is-open .acc-a { grid-template-rows: 1fr; }
.acc-a > div { overflow: hidden; }

/* Plans */
.plans-hero { padding-top: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.plans-cmp { padding-top: 20px; }
.plans-controls { margin-top: 16px; padding: 8px 0; }
.plans-deal { margin: 0; padding: 4px 12px; border-radius: var(--ld-radius-full); background: var(--ld-green-soft); color: var(--ld-green); text-align: center; }
@media (max-width: 760px) {
  .plans-hero { padding-top: 32px; }
  .plans-cmp { padding-top: 24px; }
}