/* ---------- подписка ---------- */

.hero { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 26px; }
.hero__mark {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: var(--r-card); color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent-hi), var(--accent-deep));
  box-shadow: 0 8px 24px var(--accent-glow);
}
.hero__title { font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; text-align: left; }
.hero__sub { font-size: 13px; font-weight: 500; line-height: 1.55; text-align: left; color: var(--t2); max-width: 300px; }

.perks { display: flex; flex-direction: column; }
.perks li { display: flex; align-items: center; gap: var(--gap-el); font-size: 15px; font-weight: 500; color: var(--t1); padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.perks li svg { color: var(--accent); }

.plans { display: flex; gap: 10px; padding-top: 24px; }
.plan {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; text-align: left;
  padding: 18px 16px; border-radius: var(--r-card);
  background: var(--surface-1); box-shadow: var(--shadow-1);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.plan:active { transform: scale(0.97); }
.plan__name { font-size: 11px; font-weight: 700; color: var(--t2); letter-spacing: 0.08em; text-transform: uppercase; }
.plan__price { display: flex; align-items: center; gap: 6px; color: var(--t1); }
.plan__price b { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.plan__price svg { color: var(--accent-soft); }
.plan__note { font-size: 11px; font-weight: 500; color: var(--t3); }
.plan__tag {
  position: absolute; top: -9px; right: 12px; padding: 3px 10px; border-radius: var(--pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--on-accent);
  background: var(--accent);
}
.plan--on { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-1); }
.plan--on .plan__name { color: var(--accent-soft); }
.plan--on .plan__note { color: var(--t2); }

.cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 24px; padding: 17px 20px; border-radius: var(--pill); color: var(--on-accent);
  background: var(--accent); box-shadow: 0 8px 24px var(--accent-glow);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cta b { font-size: 16px; font-weight: 700; }
.cta:active { background: var(--accent-deep); transform: scale(0.98); }
.cta--done { background: var(--surface-3); box-shadow: none; }

/* ---------- тост ---------- */

.toast {
  position: absolute; left: 50%; bottom: 120px; z-index: 60;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: 320px; padding: 13px 22px; border-radius: var(--r-card);
  font-size: 13px; font-weight: 600; line-height: 1.45; text-align: center;
  background: var(--surface-3); box-shadow: var(--shadow-2);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.toast--on { opacity: 1; transform: translate(-50%, 0); }

/* Фоновый режим: графа Web Audio нет, регуляторы ни на что не влияют. */
.sound--bypassed .card:nth-child(-n+4) { opacity: 0.42; pointer-events: none; }
.sound--bypassed .card:nth-child(-n+4) .switch input { pointer-events: none; }