.plan-experience {
  margin: 16px 0;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--aqua) 18%, var(--line));
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 8%, rgba(58, 192, 181, 0.15), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--pearl) 96%, var(--aqua) 4%), var(--pearl));
}

.plan-experience__heading h2 { margin: 6px 0 0; font: 800 1.2rem/1.08 var(--font-display); }
.plan-experience__heading p { max-width: 620px; margin: 9px 0 0; color: var(--ink-soft); font-size: 0.58rem; line-height: 1.55; }
.plan-experience__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }

.plan-experience__card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 17px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: color-mix(in srgb, var(--pearl) 94%, transparent);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.plan-experience__card--premium { background: linear-gradient(145deg, color-mix(in srgb, var(--aqua) 12%, var(--pearl)), color-mix(in srgb, var(--gold) 9%, var(--pearl))); }
.plan-experience__card[aria-pressed="true"] { border-color: var(--aqua); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aqua) 15%, transparent), 0 14px 34px rgba(23, 86, 81, 0.1); transform: translateY(-2px); }
.plan-experience__card:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.plan-experience__card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-experience__card-head strong { font: 800 0.78rem/1.2 var(--font-display); }
.plan-experience__card-head small { padding: 5px 7px; border-radius: 999px; color: var(--aqua-deep); background: color-mix(in srgb, var(--aqua) 13%, var(--pearl)); font: 800 0.4rem/1 var(--font-display); letter-spacing: 0.06em; }
.plan-experience__note { color: var(--ink-soft); font-size: 0.52rem; line-height: 1.45; }
.plan-experience__features { display: grid; gap: 7px; }
.plan-experience__features > span { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 7px; }
.plan-experience__features i { width: 14px; color: var(--aqua-deep); }
.plan-experience__features b { font: 650 0.48rem/1.35 var(--font-body); }
.plan-experience__card em { align-self: end; color: var(--aqua-deep); font: 750 0.48rem/1.2 var(--font-display); font-style: normal; }
.plan-experience__legal { margin: 13px 0 0; color: var(--ink-soft); font-size: 0.46rem; line-height: 1.5; }
.plan-experience__legal a { color: var(--aqua-deep); font-weight: 750; }

.plan-experience--compact { margin: 22px 0 18px; padding: 16px; border-radius: 22px; }
.plan-experience--compact .plan-experience__heading h2 { font-size: 1rem; }
.plan-experience--compact .plan-experience__card { padding: 13px; }
.plan-experience--compact .plan-experience__features { display: none; }

.library-premium-card.is-plan-locked .library-premium-card__access::after {
  content: "Доступ откроется в Premium";
  display: block;
  margin-top: 5px;
  color: var(--gold-deep, #8b6a19);
  font-size: 0.42rem;
}

.plan-paywall-backdrop {
  position: fixed;
  z-index: 260;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 14px;
  background: rgba(4, 25, 24, 0.58);
  backdrop-filter: blur(12px);
}
.plan-paywall-backdrop[hidden] { display: none; }
.plan-paywall-open { overflow: hidden; }
.plan-paywall {
  position: relative;
  width: min(100%, 560px);
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 28px;
  color: var(--ink);
  border-radius: 30px;
  background: var(--pearl);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}
.plan-paywall__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: var(--pearl); }
.plan-paywall__orb { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--aqua-light) 18%, var(--aqua) 48%, var(--aqua-deep) 100%); box-shadow: 0 0 32px rgba(34, 171, 161, 0.28); }
.plan-paywall__orb b { color: white; font: 800 1.2rem/1 var(--font-display); }
.plan-paywall h2 { max-width: 420px; margin: 0; font: 850 1.55rem/1.05 var(--font-display); }
.plan-paywall > p { margin: 0; color: var(--ink-soft); font-size: 0.64rem; line-height: 1.6; }
.plan-paywall__actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.plan-paywall__actions a { display: grid; place-items: center; text-decoration: none; }
.plan-paywall > small { color: var(--ink-soft); font-size: 0.45rem; line-height: 1.45; }

html[data-theme="dark"] .plan-experience { background: radial-gradient(circle at 90% 8%, rgba(58, 192, 181, 0.12), transparent 34%), linear-gradient(145deg, #102927, #0b1f1e); }
html[data-theme="dark"] .plan-experience__card { background: rgba(17, 45, 43, 0.9); }
html[data-theme="dark"] .plan-experience__card--premium { background: linear-gradient(145deg, rgba(24, 73, 68, 0.95), rgba(71, 60, 31, 0.58)); }
html[data-theme="dark"] .plan-paywall { background: #102725; }

@media (max-width: 430px) {
  .plan-experience { padding: 17px; }
  .plan-experience__cards { grid-template-columns: minmax(0, 1fr); }
  .plan-experience--compact .plan-experience__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .plan-experience--compact .plan-experience__card { padding: 11px; }
  .plan-experience--compact .plan-experience__note { display: none; }
  .plan-paywall { padding: 24px 20px; }
  .plan-paywall__actions { grid-template-columns: minmax(0, 1fr); }
}

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