/* aria-live.app · pricing: the rules only the Pricing page uses. Loaded after global.css. */
.links a[aria-current="page"] { color: var(--text-1); }
#included .trust-row h3 { font-size: 21px; }
.pricing-actions { margin-top: 28px; }

/* ---------- the two ends of one subscription on the stage ----------
   The creator's Earnings card stands behind, the listener's subscription card in front,
   composed like the Session panel and the Summary on home. */
.stage-pair { min-height: 440px; }
.stage-pair .earn { width: 400px; margin: 0 auto 0 0; padding: 18px 20px 16px; z-index: 1; transform: rotateY(-5deg) rotateX(3deg); }
.stage-pair .earn::after { content: none; }
.subscribe {
    position: relative; z-index: 2;
    width: 344px;
    margin: -64px -20px 0 auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-2);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%),
      var(--elevated);
    box-shadow: var(--shadow-pop);
    padding: 16px 18px 16px;
  }
.subscribe::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; border-radius: inherit;
    background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.22) 80%, transparent); }
.stage-pair .subscribe { transform-style: preserve-3d; transform: rotateY(-5deg) rotateX(3deg) translateZ(40px); }
.sub-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sub-top .kicker { font-size: 10.5px; color: var(--text-3); gap: 7px; }
.sub-top .kicker svg { width: 13px; height: 13px; stroke-width: 1.7; color: var(--text-4); }
.sub-top .state { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.sub-top .state i { width: 5px; height: 5px; border-radius: 50%; background: var(--violet); display: inline-block; }
.sub-creator { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sub-creator .ring { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.sub-creator .ring .avatar { width: 44px; height: 44px; }
.sub-creator .ring::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--violet); opacity: .9; }
.sub-creator .ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 14px -2px rgba(124,92,252,0.5); }
.sub-creator .who { display: flex; flex-direction: column; gap: 2px; }
.sub-creator .nm { font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); }
.sub-creator .role { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.sub-session { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 12px; border-top: 1px solid var(--line); }
.sub-session .title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-1); }
.sub-session .access { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.sub-session .access svg { width: 11px; height: 11px; stroke-width: 1.7; color: var(--text-4); }
.subscribe ul { list-style: none; display: flex; flex-direction: column; }
.subscribe li {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
    padding: 8px 0; border-top: 1px solid var(--line);
    font-size: 12.5px; color: var(--text-2); letter-spacing: -0.01em;
  }
.subscribe li.plan { color: var(--text-1); font-weight: 500; }
.subscribe li .soft { color: var(--text-3); font-weight: 400; }
.subscribe li .ok { width: 16px; height: 16px; display: grid; place-items: center; color: #7FE0B6; }
.subscribe li .ok svg { width: 13px; height: 13px; stroke-width: 2; }
.sub-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sub-actions .btn { height: 36px; padding: 0 16px; font-size: 13px; }
.sub-actions .btn.is-off { opacity: .55; box-shadow: none; }
.sub-actions .tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-2); }
@media (prefers-reduced-motion: no-preference) {
  .stage-pair .earn.arrive { animation-name: arrive; animation-delay: .28s; }
  .stage-pair .subscribe.arrive { opacity: 0; transform: rotateY(-12deg) rotateX(7deg) translateZ(-100px) translateY(20px);
      animation: arrive-s 1s cubic-bezier(.2,.7,.2,1) .62s forwards; }
}
@media (max-width: 960px) {
  .stage-pair { min-height: 0; }
  .stage-pair .subscribe { transform: none !important; }
}
@media (max-width: 600px) {
  .stage-pair .earn { width: auto; margin: 0 12px; }
  .subscribe { width: auto; margin: -12px 12px 0; }
}