/* ==========================================================================
   Subscription and costs page (template-membership.php) — loaded only there.
   Redesign (stage A): calm and flat. Design-system tokens (--ds-*), logical
   properties only (RTL and LTR share this file), no gradients, no decorative
   shadows. Prefix: .mp-
   ========================================================================== */

.mp { --mp-gap: var(--ds-space-8); color: var(--ds-text); }
.mp a:not(.ds-btn) { color: var(--ds-action); text-decoration: none; }
.mp a:not(.ds-btn):hover { color: var(--ds-deep); }
.mp-muted { color: var(--ds-text-2); font-size: var(--ds-fs-sm); margin: var(--ds-space-4) 0 0; }
.mp-head { max-inline-size: 44rem; margin: 0 0 var(--ds-space-6); }
.mp-head h2 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-fs-2xl); }
.mp-head p { margin: 0; color: var(--ds-text-2); }
.mp .section { padding-block: var(--ds-space-8); }
.mp-or { color: var(--ds-text-2); font-weight: var(--ds-fw-regular); }
.mp-link { font-weight: var(--ds-fw-semibold); }

/* ---------- Hero ---------- */
.mp-hero { background: var(--ds-mint); padding-block: var(--ds-space-8) var(--ds-space-8); border-block-end: var(--ds-border); }
.mp-hero h1 { margin: 0 0 var(--ds-space-3); font-size: var(--ds-fs-3xl); line-height: var(--ds-lh-tight); max-inline-size: 40rem; }
.mp-hero__lead { max-inline-size: 40rem; margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-md); line-height: 1.9; }
.mp-two { list-style: none; margin: var(--ds-space-6) 0 0; padding: 0; display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); max-inline-size: 44rem; }
.mp-two li { display: flex; flex-direction: column; gap: var(--ds-space-1); padding: var(--ds-space-4); background: var(--ds-surface); border: var(--ds-border); border-radius: var(--ds-radius-card); }
.mp-two strong { font-size: var(--ds-fs-md); }
.mp-two span { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.mp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-block-start: var(--ds-space-6); }

/* ---------- How it works ---------- */
.mp-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.mp-step { padding: var(--ds-space-4); background: var(--ds-surface); border: var(--ds-border); border-radius: var(--ds-radius-card); }
.mp-step__num { display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--ds-mint-strong); color: var(--ds-deep); font-weight: var(--ds-fw-bold); }
.mp-step__title { margin: var(--ds-space-2) 0 var(--ds-space-1); font-size: var(--ds-fs-md); }
.mp-step__text { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }

/* ---------- Plans ---------- */
.mp-plans { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); max-inline-size: 48rem; }
.mp-plan { padding: var(--ds-space-5); background: var(--ds-surface); border: var(--ds-border); border-radius: var(--ds-radius-card); }
.mp-plan h3 { margin: 0; font-size: var(--ds-fs-lg); }
.mp-plan__sub { margin: var(--ds-space-1) 0 var(--ds-space-3); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.mp-plan__price { margin: var(--ds-space-2) 0 0; font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-bold); line-height: 1.5; }
.mp-plan__price span { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-regular); color: var(--ds-text-2); }
.mp-plan__period { font-size: var(--ds-fs-sm); }
.mp-plan__note { margin: var(--ds-space-2) 0 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.mp-aside { margin-block-start: var(--ds-space-5); padding: var(--ds-space-4) var(--ds-space-5); background: var(--ds-tint); border-radius: var(--ds-radius-card); max-inline-size: 48rem; }
.mp-aside h3 { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-md); }
.mp-aside p { margin: 0; color: var(--ds-text-2); }
.mp-tag { display: inline-block; margin-inline-start: var(--ds-space-2); padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-tint); color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); }

/* ---------- Renewal cards ---------- */
.mp-cards { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.mp-card { padding: var(--ds-space-5); background: var(--ds-surface); border: var(--ds-border); border-radius: var(--ds-radius-card); }
.mp-card h3 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-fs-md); }
.mp-card p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.9; }

/* ---------- Specialists / lists ---------- */
.mp-checks { list-style: none; margin: var(--ds-space-5) 0 0; padding: 0; display: grid; gap: var(--ds-space-2); max-inline-size: 48rem; }
.mp-checks li { position: relative; padding-inline-start: 1.5rem; color: var(--ds-text); }
.mp-checks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--ds-action); }
.mp-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-block-start: var(--ds-space-6); }

/* ---------- Centers + gift ---------- */
.mp-extra__grid { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.mp-panel { padding: var(--ds-space-5); background: var(--ds-surface); border: var(--ds-border); border-radius: var(--ds-radius-card); }
.mp-panel h2 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-fs-lg); }
.mp-panel p { margin: 0 0 var(--ds-space-3); color: var(--ds-text-2); }

/* ---------- Crisis note ---------- */
.mp-crisis-wrap { padding-block: var(--ds-space-4) var(--ds-space-8); }
.mp-crisis { padding: var(--ds-space-5); background: var(--ds-info-bg); border: 1px solid var(--ds-info-line); border-radius: var(--ds-radius-card); }
.mp-crisis h2 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-fs-lg); }
.mp-crisis p { margin: 0 0 var(--ds-space-3); }
.mp-crisis__list { list-style: none; margin: 0 0 var(--ds-space-3); padding: 0; display: grid; gap: var(--ds-space-2); }
.mp-crisis__list li { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-4); align-items: baseline; }
.mp-crisis__small { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }

/* ---------- FAQ ---------- */
.mp-faq__layout { display: grid; gap: var(--ds-space-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .mp-faq__layout { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }
.mp-faq__intro h2 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-fs-2xl); }
.mp-faq__intro p { color: var(--ds-text-2); }
.mp-faq__list { display: grid; gap: var(--ds-space-2); }
.mp-faq__item { background: var(--ds-surface); border: var(--ds-border); border-radius: var(--ds-radius-control); padding-inline: var(--ds-space-4); }
.mp-faq__item[open] { border-color: var(--ds-action); }
.mp-faq__item summary { cursor: pointer; min-block-size: var(--ds-control-h); display: flex; align-items: center; padding-block: var(--ds-space-2); font-weight: var(--ds-fw-semibold); list-style: none; }
.mp-faq__item summary::-webkit-details-marker { display: none; }
.mp-faq__item summary::after { content: ""; margin-inline-start: auto; inline-size: 0.6rem; block-size: 0.6rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--ds-dur) var(--ds-ease); flex: none; }
.mp-faq__item[open] summary::after { transform: rotate(-135deg); }
.mp-faq__item p { margin: 0 0 var(--ds-space-4); color: var(--ds-text-2); line-height: 1.9; }
.mp-faq__item summary:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }

/* ---------- Closing ---------- */
.mp-cta { padding: var(--ds-space-8) var(--ds-space-5); background: var(--ds-deep); color: var(--ds-on-action); border-radius: var(--ds-radius-card); }
.mp-cta h2 { margin: 0 0 var(--ds-space-2); color: inherit; font-size: var(--ds-fs-2xl); }
.mp-cta p { margin: 0; max-inline-size: 36rem; opacity: 0.95; }
.mp-cta .ds-btn--primary { background: var(--ds-surface); color: var(--ds-deep); }
.mp-cta .ds-btn--primary:hover { background: var(--ds-mint-strong); color: var(--ds-deep); }
.mp-cta .ds-btn:focus-visible { outline-color: var(--ds-focus-on-dark); }

@media (prefers-reduced-motion: reduce) {
	.mp-faq__item summary::after { transition: none; }
}