/* Plany stron. Telefon: Pricing Card z 21st.dev (lista z kropką wyboru, wybrany plan rozwija listę).
   Komputer: trzy kolumny 1 · 2 · 3, kliknięta rozsuwa się, pozostałe zwężają się do cyfry.
   Krzywa z oryginału: cubic-bezier(.32, .72, 0, 1). */
.tiers { --t-ease: cubic-bezier(.32, .72, 0, 1); container-type: inline-size; display: flex; gap: 14px; align-items: stretch; }
.tiers__title { display: none; }
.tier { position: relative; flex: 1 1 0; min-width: 0; min-height: 480px; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: flex-grow .7s var(--t-ease), box-shadow .35s, background .35s; }
.tier:hover { box-shadow: inset 0 0 0 1px var(--line-hi); }
.tier.is-open { box-shadow: inset 0 0 0 2px var(--blue), 0 30px 80px -30px rgba(47, 107, 255, .55); background: linear-gradient(180deg, #13204A, var(--white) 70%); }
.tier__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; padding: 28px 28px 0; text-align: left; cursor: pointer; }
.tier__num { font: 700 112px/.8 var(--display); letter-spacing: -0.05em; color: var(--line-hi); transition: color .35s; }
.tier.is-open .tier__num, .tier:hover .tier__num { color: var(--blue-hi); }
.tier__radio { display: none; }
.tier__id { display: flex; flex-direction: column; gap: 6px; width: calc(33.3cqw - 70px); transition: opacity .3s; }
.tier__name { font: 700 30px/1.05 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.tier__for { font-size: 15px; color: var(--ink-2); }
.tier__time { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; transition: opacity .3s; }
.tier__time b { font: 600 17px/1.2 var(--display); color: var(--ink); }
.tier__time small { font-size: 12px; color: var(--ink-3); }
.tier__hint { margin: auto 28px 26px; font-size: 14px; color: var(--ink-3); white-space: nowrap; transition: opacity .3s; }
.tier__body { display: grid; grid-template-rows: 0fr; }
.tier__in { min-height: 0; overflow: hidden; }
.tier__wrap { display: flex; flex-direction: column; gap: 22px; padding: 26px 28px 28px; }
.tier__list { display: flex; flex-direction: column; gap: 14px; }
.tier__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink-2); opacity: 0; translate: 0 5px; }
.tier__list svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--blue-hi); }
.tier.is-open .tier__list li { opacity: 1; translate: 0 0; transition: opacity .3s, translate .3s; transition-delay: calc(var(--i) * 50ms + var(--li-wait, 0ms)); }
.tier__rule { height: 1px; background: var(--line); }

/* Komputer */
@media (min-width: 961px) {
  .tiers[data-open] .tier { flex-grow: .42; }
  .tiers[data-open] .tier.is-open { flex-grow: 4; }
  .tiers[data-open] .tier:not(.is-open) :is(.tier__id, .tier__time, .tier__hint) { opacity: 0; }
  .tier.is-open .tier__hint { opacity: 0; }
  .tier__body { position: absolute; left: 0; right: 0; bottom: 0; top: auto; grid-template-rows: 1fr; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  .tier.is-open .tier__body { position: static; opacity: 1; visibility: visible; transition: opacity .45s .3s, visibility 0s; }
  .tier.is-open { --li-wait: 300ms; }
  .tier__wrap { width: calc(80cqw - 90px); display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; column-gap: 40px; }
  .tier__list { grid-row: span 2; }
  .tier__rule { display: none; }
  .tier__wrap .btn { align-self: end; }
  .tier.is-open .tier__head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; column-gap: 28px; }
  .tier.is-open .tier__id { width: calc(40cqw - 70px); }
}

/* Telefon: oryginalna Pricing Card */
@media (max-width: 960px) {
  .tiers { flex-direction: column; gap: 12px; max-width: 450px; margin: 0 auto; padding: 20px 16px; border-radius: 28px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
  .tiers__title { display: block; margin: 0 0 8px; font: 600 24px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); }
  .tier { flex: none; min-height: 0; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px rgba(234, 240, 255, .1); transition: box-shadow .3s; }
  .tier.is-open { background: var(--white); box-shadow: inset 0 0 0 2px var(--blue); }
  .tier__head { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 16px; padding: 20px; }
  .tier__num, .tier__hint { display: none; }
  .tier__radio { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(169, 181, 211, .15); transition: box-shadow .3s; }
  .tier__radio::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); scale: 0; transition: scale .3s cubic-bezier(.34, 1.56, .64, 1); }
  .tier.is-open .tier__radio { box-shadow: inset 0 0 0 2px var(--blue); }
  .tier.is-open .tier__radio::after { scale: 1; }
  .tier__id { width: auto; gap: 2px; }
  .tier__name { font: 500 18px/1.2 var(--display); letter-spacing: 0; }
  .tier__for { font-size: 14px; color: var(--ink-3); }
  .tier__time { align-items: flex-end; text-align: right; }
  .tier__time b { font-size: 18px; font-weight: 500; }
  .tier__time small { color: rgba(110, 122, 154, .7); }
  .tier__body { transition: grid-template-rows .4s var(--t-ease), opacity .4s var(--t-ease); opacity: 0; }
  .tier.is-open .tier__body { grid-template-rows: 1fr; opacity: 1; }
  .tier__wrap { padding: 4px 20px 20px; gap: 24px; }
  .tier__list li { font-size: 14px; color: rgba(234, 240, 255, .8); }
}
@media (prefers-reduced-motion: reduce) {
  .tier, .tier__body, .tier__list li { transition: none !important; }
}