/* =====================================================================
   v4.4 · Phase 4A — memberships (mobile-first). Loaded after v41.css.
   ===================================================================== */

/* Ad-free entitlement: any future ad container must carry [data-ad-slot]. Members never see them. */
.rc-ad-free [data-ad-slot] { display: none !important; }
/* Master switch off → membership links/UI disappear everywhere */
.rc-members-off a[href="#/membership"], .rc-members-off [data-member-ui] { display: none !important; }

.mtag-slot:empty { display: none; }

/* ---------- product cards (dark) ---------- */
.mtag { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 4px 9px 4px 7px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .01em;
  color: #0d0820; background: linear-gradient(120deg, #ffd666, #5eeab4); box-shadow: 0 6px 16px -10px rgba(94, 234, 180, .9); width: max-content; max-width: 100%; }
.mtag .ico { width: 13px; height: 13px; }

/* ---------- product page (dark panel) ---------- */
.mbox { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 214, 102, .45); color: rgba(255, 255, 255, .86); }
.mbox > .ico { flex: none; width: 20px; height: 20px; color: #ffd666; margin-top: 2px; }
.mbox > div { display: grid; gap: 3px; min-width: 0; }
.mbox b { font-size: .95rem; color: #fff; }
.mbox b small { font-weight: 700; color: #5eeab4; font-size: .78rem; }
.mbox small { font-size: .8rem; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.mbox a { color: #ffd666; font-weight: 800; }
.mbox.on { background: linear-gradient(120deg, rgba(255, 214, 102, .14), rgba(94, 234, 180, .12)); border-style: solid; border-color: rgba(94, 234, 180, .45); }

/* ---------- shop hero strip (dark) ---------- */
.mem-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; padding: 10px 14px; border-radius: 16px; font-size: .84rem; line-height: 1.45;
  color: rgba(255, 255, 255, .86); background: linear-gradient(110deg, rgba(255, 214, 102, .12), rgba(192, 132, 252, .14)); border: 1px solid rgba(255, 214, 102, .28); }
.mem-strip > .ico { width: 18px; height: 18px; color: #ffd666; flex: none; }
.mem-strip > span { flex: 1 1 220px; }
.mem-strip a { color: #0d0820; background: #ffd666; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: .78rem; text-decoration: none; white-space: nowrap; }
.mem-strip a:hover { background: #fff; }
.mem-demo-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 7px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #7a5200; background: #ffe9a8; vertical-align: middle; white-space: nowrap; }

/* ---------- cart (light drawer) ---------- */
.cl-mem { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: .76rem; font-weight: 800; color: #0f8a5f; }
.cl-mem .ico { width: 13px; height: 13px; }
.cl-mem.off { color: var(--ink-soft, #6b5e86); font-weight: 600; }
.cart-sum .disc.mem dt { display: inline-flex; align-items: center; gap: 5px; color: #0f8a5f; }
.cart-sum .disc.mem dt .ico { width: 14px; height: 14px; }
.cart-sum .disc.mem dt small { font-weight: 600; color: var(--ink-soft, #6b5e86); }
.cart-mem { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 9px 11px; border-radius: 12px; font-size: .8rem; line-height: 1.45; background: #eafaf3; color: #0d5c41; border: 1px solid #bfeedd; }
.cart-mem .ico { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.cart-mem a { color: inherit; font-weight: 800; }
.cart-mem.teaser { background: #fff7e0; color: #6b4500; border-color: #ffe39a; }
.cart-mem.off { background: #fff1f1; color: #8a1f1f; border-color: #ffd0d0; }
.co-demo { margin-top: 12px; padding: 12px; border-radius: 14px; background: #f4edff; border: 1px dashed #c9b3f5; font-size: .82rem; color: #3b2a63; }
.co-demo b { display: flex; align-items: center; gap: 6px; }
.co-demo p { margin: 6px 0 10px; line-height: 1.5; }
.co-demo p:last-child { margin-bottom: 0; }
.co-demo a { color: #6d28d9; font-weight: 800; }
.co-mem { display: flex; gap: 6px; font-size: .8rem; color: #6b4500; background: #fff7e0; border-radius: 10px; padding: 8px 10px; margin: 8px 0; }

/* ---------- order detail ---------- */
.total-row.member span { display: inline-flex; align-items: center; gap: 6px; color: #0f8a5f; font-weight: 700; }
.total-row.member b { color: #0f8a5f; }

/* ---------- public page ---------- */
.page-membership .light-body { padding-bottom: clamp(60px, 9vw, 110px); }
.mem-note { margin-bottom: 18px; }
.mem-offer { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 16px; border-radius: 16px; background: linear-gradient(110deg, #fff4d6, #ffe4ef); border: 1px solid #ffd2a6; font-weight: 700; color: #6b2d00; }
.mem-offer p { margin: 0; }
.mem-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 12px 16px; border-radius: 16px; background: #eafaf3; border: 1px solid #bfeedd; color: #0d5c41; }
.mem-status-line p { margin: 0; flex: 1 1 240px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mem-plans { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 6px 0 18px; }
.mem-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 20px 20px; border-radius: 24px; background: #fff; border: 1px solid #ece4f7; box-shadow: 0 30px 60px -44px rgba(27, 16, 53, .5); --acc: #ffd666; }
.mem-plan::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; border-radius: 24px 24px 0 0; background: var(--acc); }
.mem-plan.acc-coral { --acc: linear-gradient(90deg, #ff8a3d, #ff5c8a); }
.mem-plan.acc-sun { --acc: linear-gradient(90deg, #ffd666, #ff8a3d); }
.mem-plan.acc-lilac { --acc: linear-gradient(90deg, #c084fc, #8b5cf6); }
.mem-plan.acc-mint { --acc: linear-gradient(90deg, #5eeab4, #38bdf8); }
.mem-plan.acc-sky { --acc: linear-gradient(90deg, #38bdf8, #8b5cf6); }
.mem-plan.acc-tangerine { --acc: linear-gradient(90deg, #ff8a3d, #ffd666); }
.mem-plan.hl { border-color: #ffb3c8; box-shadow: 0 34px 70px -40px rgba(255, 92, 138, .55); }
.mem-plan.closed { opacity: .78; }
.mp-flag { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #ff8a3d, #ff5c8a); }
.mem-plan h3 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; color: #1b1035; padding-right: 84px; }
.mp-tag { margin: -4px 0 0; color: #6b5e86; font-size: .86rem; font-weight: 600; }
.mp-price { margin: 0; display: flex; align-items: baseline; gap: 4px; color: #1b1035; }
.mp-price b { font-family: var(--font-display); font-size: 2rem; font-weight: 800; }
.mp-price span { color: #6b5e86; font-weight: 700; }
.mp-ben { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 8px; }
.mp-ben li { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; line-height: 1.45; color: #3b2f55; }
.mp-ben .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #0f8a5f; }
.mp-cta { margin-top: auto; display: grid; gap: 8px; }
.mp-current { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 999px; font-weight: 800; font-size: .88rem; background: #eafaf3; color: #0d5c41; }
.mp-current.soon { background: #fff7e0; color: #6b4500; }
.mem-plans.compact .mem-plan { padding: 20px 18px 16px; }
.mem-plans.compact .mp-price b { font-size: 1.5rem; }
.mem-optional { display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; margin: 4px 0 26px; color: #6b5e86; font-weight: 600; font-size: .9rem; }
.mem-optional .ico { color: #ff5c8a; flex: none; }
.mem-h { font-family: var(--font-display); font-size: clamp(1.15rem, 3.6vw, 1.5rem); color: #1b1035; margin: 26px 0 12px; }
.mem-h3 { font-family: var(--font-display); font-size: 1.05rem; color: #1b1035; margin: 22px 0 10px; }
.mem-compare { width: 100%; min-width: 480px; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #ece4f7; border-radius: 18px; overflow: hidden; font-size: .88rem; }
.mem-compare th, .mem-compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #f1ebfa; vertical-align: middle; color: #3b2f55; }
.mem-compare thead th { background: #faf6ff; font-family: var(--font-display); font-size: .8rem; color: #1b1035; }
.mem-compare tbody th { font-weight: 700; color: #1b1035; }
.mem-compare tr:last-child > * { border-bottom: 0; }
.mem-compare .ok { color: #0f8a5f; display: inline-flex; }
.mem-compare .no { color: #9a8fb3; font-weight: 700; }
.mem-ex ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.mem-ex li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #faf6ff; border: 1px solid #ece4f7; }
.mem-ex li > a { font-weight: 800; color: #1b1035; }
.mx-steps { color: #3b2f55; font-size: .9rem; }
.mx-steps b { color: #0f8a5f; font-size: 1rem; }
.mx-steps small { color: #6b5e86; }
.mem-faq details { border: 1px solid #ece4f7; border-radius: 14px; background: #fff; margin-bottom: 8px; }
.mem-faq summary { cursor: pointer; padding: 13px 16px; font-weight: 800; color: #1b1035; }
.mem-faq details p { margin: 0; padding: 0 16px 14px; color: #3b2f55; line-height: 1.55; }
.mem-fine { margin-top: 22px; font-size: .8rem; color: #6b5e86; line-height: 1.55; }

/* ---------- dashboard ---------- */
.mem-intro h3 { display: flex; align-items: center; gap: 8px; }
.mem-intro .ico { color: #ff8a3d; }
.mem-card { position: relative; overflow: hidden; margin-bottom: 16px !important; }
.mem-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, #ffd666, #ff8a3d); }
.mem-card.acc-coral::before { background: linear-gradient(90deg, #ff8a3d, #ff5c8a); }
.mc-top { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: flex-start; }
.mc-top h3 { margin: 2px 0 4px; font-family: var(--font-display); font-size: 1.25rem; color: #1b1035; }
.mc-top p { margin: 0; color: #3b2f55; font-size: .9rem; }
.mc-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b4540f; }
.mc-eyebrow .ico { width: 14px; height: 14px; }
.mc-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mc-acts:empty { display: none; }
.mem-meter { margin-top: 16px; padding: 14px; border-radius: 16px; background: #faf6ff; border: 1px solid #ece4f7; }
.mm-dots { display: flex; gap: 6px; margin-bottom: 10px; }
.mm-dots i { flex: 1; max-width: 70px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #5eeab4, #38bdf8); }
.mm-dots i.u { background: #e3d9f3; }
.mem-meter p { margin: 0 0 3px; color: #1b1035; font-size: .92rem; }
.mem-meter small { color: #6b5e86; font-size: .78rem; line-height: 1.45; }
.mem-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mem-hist li { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid #ece4f7; font-size: .86rem; color: #3b2f55; }
.mem-hist time { font-size: .74rem; font-weight: 800; color: #6b5e86; }
.mem-mini { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: #1b1035;
  background: linear-gradient(110deg, #fff4d6, #eafaf3); border: 1px solid #ffe39a; }
.mem-mini > .ico { flex: none; width: 22px; height: 22px; color: #ff8a3d; }
.mem-mini span { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.mem-mini small { flex-basis: 100%; color: #3b2f55; font-size: .8rem; }
.mem-mini em { font-style: normal; font-weight: 800; font-size: .82rem; color: #6d28d9; white-space: nowrap; }
.mem-mini.teaser { background: linear-gradient(110deg, #f4edff, #fff4d6); border-color: #e3d5fb; }

@media (min-width: 720px) {
  .mem-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .mem-plan { padding: 28px 26px 24px; }
  .mem-ex li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (min-width: 1100px) {
  .page-membership .mem-plans:not(.compact) { max-width: 960px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .mem-plan { transition: transform .25s ease, box-shadow .25s ease; }
  .mem-plan:hover { transform: translateY(-3px); }
}