/* =============================================================================
 * Kriyasya — Membership page presentation. Scoped under `.mbr` so it never
 * touches the universal header (#lvh) or footer. Consumes platform --lv-* tokens
 * with safe fallbacks. Premium light theme; the Yearly plan is the dark focal card.
 * No links / data / credit logic live here — presentation only.
 * ========================================================================== */
html {
  scroll-behavior: smooth;
}

.mbr{
  --m-bg:#f3f1fb; --m-bg-2:#ece8f8;
  --m-surface:#ffffff; --m-surface-2:#faf9ff;
  --m-ink:var(--lv-ink,#1a1533); --m-ink-2:var(--lv-ink-soft,#4a4468); --m-mut:var(--lv-ink-mute,#736c8c);
  --m-line:var(--lv-border,#e7e2f4); --m-line-2:#dcd5ee;
  --m-violet:var(--lv-violet,#6d3bd1); --m-violet-2:var(--lv-violet-2,#9a78ff);
  --m-violet-soft:#efe9fd;
  --m-gold:var(--lv-gold,#d9a93a); --m-gold-2:var(--lv-gold-2,#f0c869);
  --m-deep:#211048; --m-deep-2:#33195e;
  --m-ok:var(--lv-success,#1f9d55);
  --m-r:14px; --m-r-lg:20px; --m-r-xl:28px; --m-r-pill:999px;
  --m-fd:var(--lv-font-display,'Manrope',system-ui,sans-serif);
  --m-fb:var(--lv-font-body,'Inter',system-ui,-apple-system,Arial,sans-serif);
  background:radial-gradient(120% 90% at 82% -8%,#efe9fd 0%,var(--m-bg) 42%);
  color:var(--m-ink); font-family:var(--m-fb); line-height:1.6;
  padding:8px 0 8px;
}
.mbr *{box-sizing:border-box}
.mbr a{color:inherit;text-decoration:none}
.mbr img{max-width:100%;display:block}
.mbr [hidden]{display:none!important}
/* default icon size — every inline msvg() is constrained; component rules below override it */
.mbr svg{width:16px;height:16px;flex:0 0 auto;vertical-align:middle}
.mbr-kick svg{width:15px}
.mbr-save svg{width:14px}
.mbr-plan-sub svg{width:13px}
.mbr-legal svg{width:14px;vertical-align:-2px}
.mbr-cmp .yes svg{width:16px}
.mbr-plan-credits svg{width:16px}
.mbr-in{max-width:1180px;margin:0 auto;padding:0 24px}
.mbr-sec{padding:44px 0}
.mbr :focus-visible{outline:3px solid var(--m-violet-2);outline-offset:2px;border-radius:6px}

/* reveal (JS opt-in) — opacity-only so it never fights the cards' hover/lift transforms */
.mbr .mbr-rv{transition:opacity .55s cubic-bezier(.22,.61,.36,1)}
.mbr.is-reveal .mbr-rv{opacity:0}
.mbr.is-reveal .mbr-rv.in{opacity:1}
@media (prefers-reduced-motion:reduce){ .mbr.is-reveal .mbr-rv{opacity:1} }

/* ---- type ---- */
.mbr-kick{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--m-violet)}
.mbr-h1{font-family:var(--m-fd);font-size:clamp(34px,4.6vw,56px);line-height:1.05;letter-spacing:-.02em;font-weight:800;margin:14px 0 0}
.mbr-h1 .g{background:linear-gradient(100deg,var(--m-violet),#b07bff 55%,var(--m-gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.mbr-h2{font-family:var(--m-fd);font-size:clamp(24px,3vw,34px);line-height:1.12;letter-spacing:-.01em;font-weight:800;margin:0}
.mbr-lede{font-size:17px;color:var(--m-ink-2);margin:14px 0 0;max-width:52ch}
.mbr-sec-head{max-width:640px;margin:0 0 26px}
.mbr-sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.mbr-sec-head .mbr-lede{margin-top:8px;font-size:15px}

/* ---- buttons (page-local nav; real CTAs keep the platform lv-btn) ---- */
.mbr-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;
  border-radius:var(--m-r);font-size:15px;font-weight:700;cursor:pointer;border:1px solid transparent;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.mbr-btn svg{width:18px;height:18px}
.mbr-btn:hover{transform:translateY(-2px)}
.mbr-btn-primary{background:linear-gradient(135deg,var(--m-violet),#8257e0);color:#fff;box-shadow:0 14px 30px -12px rgba(109,59,209,.5)}
.mbr-btn-ghost{background:var(--m-surface);color:var(--m-violet);border-color:var(--m-line-2)}
.mbr-btn-ghost:hover{background:var(--m-violet-soft)}

/* platform CTA buttons, restyled only inside plan cards for a premium finish */
.mbr .lv-btn{min-height:48px;border-radius:var(--m-r);font-weight:700}

/* ---- hero ---- */
.mbr-hero{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;padding:48px 0 40px}
.mbr-hero-l{min-width:0}
.mbr-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}
.mbr-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 0;font-size:13px;color:var(--m-mut)}
.mbr-trust span{display:inline-flex;align-items:center;gap:7px}
.mbr-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--m-gold)}

/* member-active banner */
.mbr-active{margin:20px 0 0;display:inline-flex;flex-direction:column;gap:6px;padding:14px 18px;border-radius:var(--m-r);
  background:#eafaf1;border:1px solid #b7e6ca;color:#15703f;max-width:520px}
.mbr-active b{display:flex;align-items:center;gap:8px}

/* ecosystem preview (hero right) */
.mbr-eco{background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--m-r-xl);padding:20px;
  box-shadow:0 30px 70px -30px rgba(45,28,90,.35);position:relative;overflow:hidden}
.mbr-eco::before{content:"";position:absolute;inset:auto -30% -50% -30%;height:70%;
  background:radial-gradient(closest-side,rgba(154,120,255,.18),transparent);pointer-events:none}
.mbr-eco-h{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 14px}
.mbr-eco-h b{font-size:13px}
.mbr-eco-pill{font-size:11px;font-weight:700;color:var(--m-violet);background:var(--m-violet-soft);border-radius:var(--m-r-pill);padding:4px 10px}
.mbr-eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:1}
.mbr-eco-tile{display:flex;gap:11px;align-items:center;padding:13px;border-radius:var(--m-r);border:1px solid var(--m-line);
  background:var(--m-surface-2);transition:transform .16s ease,box-shadow .16s ease}
.mbr-eco-tile:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(45,28,90,.3)}
.mbr-eco-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  color:var(--m-violet);background:var(--m-violet-soft)}
.mbr-eco-ic svg{width:19px;height:19px}
.mbr-eco-tile.is-gold .mbr-eco-ic{color:#8a6410;background:#fbf1d3}
.mbr-eco-t{font-size:13.5px;font-weight:700;line-height:1.2}
.mbr-eco-d{font-size:11.5px;color:var(--m-mut);margin:2px 0 0}

/* ---- benefit cards ---- */
.mbr-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mbr-benefit{background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--m-r-lg);padding:22px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.mbr-benefit:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(45,28,90,.4);border-color:var(--m-line-2)}
.mbr-benefit-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;color:var(--m-violet);
  background:var(--m-violet-soft);margin-bottom:14px}
.mbr-benefit-ic svg{width:22px;height:22px}
.mbr-benefit h3{font-family:var(--m-fd);font-size:18px;font-weight:700;margin:0 0 6px}
.mbr-benefit p{font-size:14px;color:var(--m-ink-2);margin:0;line-height:1.55}

/* ---- membership vs credits ---- */
.mbr-vs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mbr-vs-card{background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--m-r-lg);padding:22px 24px}
.mbr-vs-card.is-credit{background:var(--m-surface-2)}
.mbr-vs-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding:5px 11px;border-radius:var(--m-r-pill);margin-bottom:12px}
.mbr-vs-card .mbr-vs-tag{color:var(--m-violet);background:var(--m-violet-soft)}
.mbr-vs-card.is-credit .mbr-vs-tag{color:#8a6410;background:#fbf1d3}
.mbr-vs-card h3{font-family:var(--m-fd);font-size:19px;margin:0 0 6px}
.mbr-vs-card p{font-size:14px;color:var(--m-ink-2);margin:0;line-height:1.55}
.mbr-vs-note{grid-column:1/-1;font-size:14px;color:var(--m-ink-2);margin:2px 0 0;padding:14px 18px;
  background:var(--m-violet-soft);border:1px solid var(--m-line-2);border-radius:var(--m-r);line-height:1.55}
.mbr-vs-note a{color:var(--m-violet);font-weight:600;text-decoration:underline}

/* ---- plans ---- */
.mbr-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;margin-top:14px}
.mbr-plan{position:relative;display:flex;flex-direction:column;background:var(--m-surface);border:1px solid var(--m-line);
  border-radius:var(--m-r-xl);padding:28px 26px;transition:transform .16s ease,box-shadow .16s ease}
.mbr-plan:hover{transform:translateY(-3px);box-shadow:0 24px 54px -26px rgba(45,28,90,.4)}
.mbr-plan-name{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--m-mut)}
.mbr-price{font-family:var(--m-fd);font-size:clamp(36px,4vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1;margin:10px 0 0}
.mbr-price small{font-size:15px;font-weight:600;color:var(--m-mut)}
.mbr-renew{font-size:13px;color:var(--m-mut);margin:8px 0 0;font-weight:600}
.mbr-eq{font-size:12.5px;color:var(--m-mut);margin:2px 0 0}
.mbr-plan-credits{display:inline-flex;align-items:baseline;gap:6px;margin:16px 0 0;padding:9px 14px;border-radius:var(--m-r-pill);
  background:var(--m-violet-soft);color:var(--m-violet);font-weight:700;font-size:14px}
.mbr-plan-credits b{font-size:18px}
.mbr-plan-list{list-style:none;margin:16px 0;padding:0;display:grid;gap:9px;flex:1}
.mbr-plan-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--m-ink-2);line-height:1.45}
.mbr-plan-list li svg{width:17px;height:17px;color:var(--m-ok);flex:0 0 auto;margin-top:2px}
.mbr-excl{font-size:12.5px;color:var(--m-mut);margin:2px 0 16px;padding:11px 13px;border-radius:12px;
  background:#faf7f0;border:1px solid #efe3c8}
.mbr-excl b{color:#8a6410;display:block;margin-bottom:4px}
.mbr-excl.is-in{background:#eef8f1;border-color:#c8e6d3}
.mbr-excl.is-in b{color:#15703f}
.mbr-plan-sub{font-size:12px;color:var(--m-mut);text-align:center;margin:10px 0 0;line-height:1.5}
.mbr-plan .lv-btn,.mbr-plan .mbr-btn{width:100%}
/* badge */
.mbr-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3a2410;
  background:linear-gradient(135deg,var(--m-gold-2),var(--m-gold));padding:6px 16px;border-radius:var(--m-r-pill);
  box-shadow:0 10px 24px -10px rgba(216,169,58,.7)}
/* dominant yearly (dark) */
.mbr-plan.is-year{background:linear-gradient(160deg,var(--m-deep-2),var(--m-deep));color:#fff;border-color:transparent;
  box-shadow:0 34px 70px -30px rgba(33,16,72,.75);transform:translateY(-8px)}
.mbr-plan.is-year:hover{transform:translateY(-11px)}
.mbr-plan.is-year .mbr-plan-name{color:var(--m-gold-2)}
.mbr-plan.is-year .mbr-price{color:#fff}
.mbr-plan.is-year .mbr-price small,.mbr-plan.is-year .mbr-renew,.mbr-plan.is-year .mbr-eq,.mbr-plan.is-year .mbr-plan-sub{color:#c8bce6}
.mbr-plan.is-year .mbr-plan-credits{background:rgba(240,200,105,.16);color:var(--m-gold-2)}
.mbr-plan.is-year .mbr-plan-list li{color:#e4ddf5}
.mbr-plan.is-year .mbr-plan-list li svg{color:var(--m-gold-2)}
.mbr-plan.is-year .mbr-save{display:inline-block;margin:12px 0 0;font-size:13px;font-weight:700;color:#0d3;
  color:#8ff0bf;background:rgba(20,120,60,.28);border-radius:var(--m-r-pill);padding:5px 12px}
.mbr-plan.is-year .mbr-excl.is-in{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.mbr-plan.is-year .mbr-excl.is-in b{color:var(--m-gold-2)}

/* ---- comparison table ---- */
.mbr-cmp-wrap{overflow-x:auto;border:1px solid var(--m-line);border-radius:var(--m-r-lg);background:var(--m-surface)}
.mbr-cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.mbr-cmp th,.mbr-cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--m-line)}
.mbr-cmp thead th{font-family:var(--m-fd);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--m-mut);
  background:var(--m-surface-2)}
.mbr-cmp thead th.is-year{color:var(--m-violet)}
.mbr-cmp td:not(:first-child),.mbr-cmp th:not(:first-child){text-align:center}
.mbr-cmp tbody th{font-weight:600;color:var(--m-ink)}
.mbr-cmp td{color:var(--m-ink-2)}
.mbr-cmp .col-year{background:var(--m-violet-soft)}
.mbr-cmp .yes{color:var(--m-ok);font-weight:700}
.mbr-cmp .no{color:var(--m-mut)}
.mbr-cmp tr:last-child th,.mbr-cmp tr:last-child td{border-bottom:0}

/* ---- how it works (timeline) ---- */
.mbr-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mbr-step{position:relative;background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--m-r-lg);padding:22px}
.mbr-step-n{font-family:var(--m-fd);font-size:14px;font-weight:800;color:#fff;display:grid;place-items:center;
  width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--m-violet),#8257e0);
  box-shadow:0 10px 22px -10px rgba(109,59,209,.6)}
.mbr-step h3{font-family:var(--m-fd);font-size:16px;margin:14px 0 5px}
.mbr-step p{font-size:13.5px;color:var(--m-ink-2);margin:0;line-height:1.55}

/* ---- reassurance strip ---- */
.mbr-reassure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 26px;
  background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--m-r-lg);padding:22px 26px}
.mbr-reassure div{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--m-ink-2)}
.mbr-reassure svg{width:18px;height:18px;color:var(--m-ok);flex:0 0 auto;margin-top:1px}

/* ---- FAQ accordion ---- */
.mbr-faq{border:1px solid var(--m-line);border-radius:var(--m-r-lg);background:var(--m-surface);overflow:hidden}
.mbr-faq details{border-top:1px solid var(--m-line)}
.mbr-faq details:first-child{border-top:0}
.mbr-faq summary{list-style:none;cursor:pointer;padding:19px 22px;font-size:15px;font-weight:700;color:var(--m-ink);
  display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px}
.mbr-faq summary::-webkit-details-marker{display:none}
.mbr-faq summary::after{content:"+";font-size:20px;color:var(--m-violet);line-height:1;flex:0 0 auto}
.mbr-faq details[open] summary::after{content:"\2212"}
.mbr-faq p{margin:0;padding:0 22px 18px;font-size:14px;color:var(--m-ink-2);line-height:1.6}
.mbr-faq p a{color:var(--m-violet);text-decoration:underline}

/* ---- final CTA band + legal ---- */
.mbr-band{margin-top:14px;text-align:center;border-radius:var(--m-r-xl);padding:40px 28px;color:#fff;
  background:radial-gradient(120% 130% at 50% -20%,#3a1d6e,var(--m-deep) 70%)}
.mbr-band h2{font-family:var(--m-fd);font-size:clamp(24px,3vw,32px);margin:0 0 8px;color:#fff}
.mbr-band p{font-size:15px;color:#cabfe6;margin:0 auto 20px;max-width:52ch}
.mbr-legal{font-size:13px;color:var(--m-mut);text-align:center;margin:24px auto 6px;max-width:70ch;line-height:1.6}
.mbr-legal a{color:var(--m-violet);text-decoration:underline}

/* Refined membership identity: warm neutrals, royal ink and satin gold. */
.mbr{--m-bg:#f8f7f4;--m-surface-2:#f5f4f1;--m-ink:#252332;--m-ink-2:#5e5b68;--m-mut:#706b79;--m-line:#e5e2e8;--m-line-2:#d5cedf;--m-violet:#584179;--m-violet-2:#826799;--m-violet-soft:#eeebf2;--m-gold:#caa767;--m-gold-2:#f0dfb9;--m-deep:#242033;--m-deep-2:#42334e;--m-ok:#39735a;--m-r:16px;--m-r-lg:24px;--m-r-xl:30px;background:radial-gradient(ellipse at 85% 8%,#eae5f0 0,transparent 29%),#f8f7f4;padding-top:0}
.mbr{position:relative;overflow-x:clip}
.mbr-in{max-width:1240px;padding:0 40px}
.mbr-nav{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:78px;border-bottom:1px solid var(--m-line)}
.mbr-nav-brand{font-size:19px;font-weight:800;letter-spacing:-.6px}
.mbr-nav-brand span{font-size:13px;font-weight:400;letter-spacing:0;margin-left:10px;color:var(--m-mut)}
.mbr-nav>div{display:flex;align-items:center;gap:28px;font-size:13px;font-weight:600}
.mbr-nav a:hover{color:var(--m-violet)}
.mbr-nav .mbr-nav-cta{padding:10px 17px;border:1px solid var(--m-line-2);border-radius:999px;display:flex;gap:20px;align-items:center}
.mbr-hero{grid-template-columns:1.08fr 1fr;gap:70px;padding:84px 0 76px}
.mbr-kick{font-size:10px;letter-spacing:.14em;color:var(--m-violet)}
.mbr-h1{font-size:clamp(46px,5.4vw,72px);font-weight:650;letter-spacing:-.055em;line-height:1.06;margin-top:23px}
.mbr-h1 .g{background:none;color:var(--m-violet)}
.mbr-hero .mbr-lede{font-size:16px;line-height:1.8;max-width:43ch;margin-top:26px}
.mbr-btn{border-radius:999px;font-size:13px;min-height:49px;padding:0 22px}
.mbr a.mbr-btn-primary{background:var(--m-deep);color:#fff;box-shadow:0 6px 16px #24203314}
.mbr-btn-ghost{background:transparent;border-color:transparent;padding-left:6px;padding-right:6px}
.mbr-btn-ghost::after{content:'↗';margin-left:4px}
.mbr-trust{font-size:11px;gap:8px 14px;margin-top:24px}
.mbr-trust span::before{width:4px;height:4px;background:#9c875d}
.mbr-pass{aspect-ratio:1.65;position:relative;isolation:isolate;overflow:hidden;padding:27px 30px;border:1px solid #67536f;border-radius:24px;background:radial-gradient(ellipse at 100% 0%,#736078 0,transparent 62%),linear-gradient(120deg,#30263e,#201e2c);color:#f0dfb9;box-shadow:0 30px 50px -24px #35253c80;transform:rotate(-4deg);margin:0 12px 30px}
.mbr-pass::before,.mbr-pass::after{content:'';position:absolute;width:360px;height:360px;border:1px solid #dfc89421;border-radius:50%;z-index:-1;right:-100px;top:-155px}
.mbr-pass::after{width:410px;height:410px;right:-125px;top:-180px}
.mbr-pass-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.3em;font-weight:600}
.mbr-pass-top svg{width:23px;height:23px}
.mbr-pass-emblem{font-family:Georgia,serif;font-size:77px;line-height:1.2;font-weight:400;margin-top:14px;letter-spacing:-8px}
.mbr-pass-emblem span{font-size:28px;vertical-align:top;letter-spacing:0;margin-left:10px}
.mbr-pass-bottom{display:flex;align-items:end;justify-content:space-between;margin-top:16px}
.mbr-pass-bottom span{display:block;font-size:8px;letter-spacing:.22em;color:#d1bdd3;margin-bottom:7px}
.mbr-pass-bottom b{display:block;font-size:12px;font-weight:500;color:#f5edf8}
.mbr-pass-bottom svg{width:25px;height:25px;opacity:.7}
.mbr-eco{padding:20px 22px;background:#ffffffba;border-color:#ffffff;border-radius:22px;box-shadow:0 16px 40px -26px #39274540}
.mbr-eco::before{display:none}
.mbr-eco-h{margin:0 0 16px}.mbr-eco-h b{font-weight:600;font-size:12px}
.mbr-eco-pill{background:#efede8;color:#736343;font-size:10px}
.mbr-eco-grid{gap:17px 12px}.mbr-eco-tile{padding:0;border:0;background:transparent;gap:10px}.mbr-eco-tile:hover{transform:none;box-shadow:none}
.mbr-eco-ic{width:32px;height:32px;background:#efedf3;border-radius:10px}.mbr-eco-ic svg{width:16px;height:16px}
.mbr-eco-t{font-size:12px;font-weight:600}.mbr-eco-d{font-size:10px}
.mbr-sec{padding:62px 0;scroll-margin-top:32px}
.mbr-eyebrow{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#887044;font-weight:700;margin-bottom:16px}
.mbr-h2{font-size:clamp(28px,3.5vw,42px);letter-spacing:-.04em;line-height:1.15;font-weight:650}
.mbr-sec-head{max-width:690px;margin-bottom:32px}.mbr-sec-head .mbr-lede{line-height:1.75;margin-top:16px}.mbr-sec-head.center .mbr-lede{margin-left:auto;margin-right:auto}
.mbr-grid-3{gap:16px}.mbr-benefit{padding:30px;border-color:#e9e6e9;box-shadow:0 3px 12px #30263e02}.mbr-benefit:hover{transform:translateY(-3px);box-shadow:0 14px 30px #30263e08}
.mbr-benefit-ic{background:#f0edf5;border-radius:15px;margin-bottom:27px}
.mbr-benefit:nth-child(2) .mbr-benefit-ic,.mbr-benefit:nth-child(5) .mbr-benefit-ic{background:#f5efdf;color:#8c6a33}
.mbr-benefit:nth-child(3) .mbr-benefit-ic,.mbr-benefit:nth-child(6) .mbr-benefit-ic{background:#eaf0ec;color:#52735f}
.mbr-benefit h3{font-size:17px;letter-spacing:-.4px}.mbr-benefit p{font-size:13px;line-height:1.8}
.mbr-vs-card{padding:30px}.mbr-vs-card h3{font-size:25px;letter-spacing:-.6px}.mbr-vs-card p{line-height:1.8;font-size:13px}.mbr-vs-note{background:transparent;border:0;padding:4px 0;font-size:12px;line-height:1.8}
.mbr-plans{gap:20px;margin-top:44px}.mbr-plan{padding:32px 26px;border-color:#e3dfe7;box-shadow:0 5px 20px #30263e04}.mbr-plan-name{font-size:11px;letter-spacing:.12em}.mbr-price{font-size:42px;font-weight:650;letter-spacing:-2px;margin-top:20px;line-height:1.15}.mbr-price small{font-size:12px;letter-spacing:0;white-space:nowrap}
.mbr-renew{font-size:11px;font-weight:400;min-height:34px}.mbr-plan-credits{border-radius:12px;font-size:12px;padding:12px;align-items:center}.mbr-plan-credits b{font-size:16px}.mbr-plan-list{gap:16px;margin:26px 0}.mbr-plan-list li{font-size:13px}.mbr-excl{font-size:11px;line-height:1.7;background:#f8f6f1;min-height:94px}.mbr-plan .lv-btn{border-radius:999px;background:var(--m-deep);color:#fff;border:1px solid transparent;box-shadow:none;font-size:13px}.mbr-plan.is-year .lv-btn{background:#eddbb5;color:#33283e}.mbr-plan.is-year{background:radial-gradient(ellipse at top right,#574260,transparent 65%),#272132;box-shadow:0 24px 50px -25px #33223d80;transform:none;border-color:#63506e}.mbr-plan.is-year:hover{transform:translateY(-3px)}
.mbr-badge{font-size:9px;letter-spacing:.1em;padding:7px 17px;background:#eddbb5;box-shadow:none}.mbr-plan.is-year .mbr-save{color:#e9d7b0;background:#ffffff0c;font-size:11px;align-self:flex-start}.mbr-plan.is-year .mbr-excl{color:#d6cddd}.mbr-plan.is-year .mbr-excl b{color:#f0dfb9}.mbr-plan-sub{font-size:10px}
.mbr-cmp th,.mbr-cmp td{padding:20px;font-size:13px}.mbr-cmp thead th{font-size:10px;letter-spacing:.07em}.mbr-cmp th small{display:block;font-size:11px;font-weight:400;color:var(--m-mut)}
.mbr-step{background:transparent;border:0;border-top:1px solid var(--m-line-2);border-radius:0;padding:26px 12px 0 0}.mbr-step-n{background:transparent;box-shadow:none;color:#8d789b;font-size:28px;font-weight:500;display:block}.mbr-step p{line-height:1.8;font-size:13px}.mbr-step a{text-decoration:underline}
.mbr-reassure{background:#efeeeb;border:0;gap:24px;padding:30px}.mbr-reassure div{font-size:12px;line-height:1.7}.mbr-reassure svg{color:#877044}
.mbr-faq{max-width:840px;margin:auto;border:0;background:transparent;border-radius:0}.mbr-faq summary{padding:24px 0;font-size:15px;font-weight:600}.mbr-faq p{padding:0 40px 24px 0;line-height:1.8}.mbr-faq details:last-child{border-bottom:1px solid var(--m-line)}
.mbr-band{padding:65px 30px;background:radial-gradient(ellipse at top,#54405e,transparent 75%),#252031}.mbr-band h2{font-size:clamp(28px,3.5vw,42px);letter-spacing:-.04em;font-weight:600}.mbr-band p{font-size:14px;line-height:1.8;margin-top:18px;margin-bottom:28px}.mbr-band a.mbr-btn-primary{background:#ecdbb7;color:#30263e}.mbr-legal{font-size:11px;line-height:1.9}
.mbr-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:961px) and (max-width:1120px){.mbr-hero{gap:34px}.mbr-price{font-size:35px}.mbr-plan{padding:30px 20px}.mbr-cta{gap:8px}}
/* ---- responsive ---- */
@media (max-width:960px){
  .mbr-hero{grid-template-columns:1fr;gap:30px}
  .mbr-grid-3,.mbr-vs{grid-template-columns:1fr 1fr}
  .mbr-grid-4{grid-template-columns:1fr 1fr}
  .mbr-plans{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .mbr-plan.is-year{transform:none;order:-1}
  .mbr-reassure{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .mbr-in{padding:0 16px}
  .mbr-sec{padding:34px 0}
  .mbr-grid-3,.mbr-vs,.mbr-grid-4,.mbr-reassure,.mbr-eco-grid{grid-template-columns:1fr}
}
@media(max-width:960px){.mbr-hero{padding:50px 0;grid-template-columns:1.05fr 1fr;gap:28px}.mbr-h1{font-size:48px}.mbr-pass{padding:20px;margin-left:0;margin-right:0}.mbr-pass-emblem{font-size:60px}.mbr-pass-bottom b{font-size:10px}.mbr-kick{font-size:9px}.mbr-hero .mbr-lede{font-size:14px}.mbr-eco{padding:18px}.mbr-plans{gap:30px;max-width:540px}.mbr-plan.is-year{order:0}.mbr-price{font-size:42px}}
@media(max-width:700px){.mbr-in{padding:0 22px}.mbr-nav{min-height:70px;gap:12px}.mbr-nav-brand{font-size:16px}.mbr-nav-brand span{display:block;font-size:10px;margin:0}.mbr-nav>div{gap:15px;font-size:11px}.mbr-nav>div>a:not(.mbr-nav-cta){display:none}.mbr-nav .mbr-nav-cta{padding:8px 14px}.mbr-hero{grid-template-columns:1fr;gap:44px;padding:45px 0}.mbr-h1{font-size:clamp(48px,11vw,68px)}.mbr-hero .mbr-lede{font-size:15px;max-width:44ch}.mbr-hero-r{max-width:460px;width:100%;margin:auto}.mbr-pass{margin:0 10px 25px;padding:26px;aspect-ratio:1.7}.mbr-pass-emblem{font-size:70px}.mbr-pass-bottom b{font-size:11px}.mbr-eco-grid{grid-template-columns:1fr 1fr}.mbr-trust{font-size:10px}.mbr-sec{padding:40px 0}.mbr-benefit{padding:26px}.mbr-benefit-ic{margin-bottom:20px}.mbr-vs-card{padding:25px}.mbr-cmp th,.mbr-cmp td{padding:16px}.mbr-band{padding:45px 24px}.mbr-reassure{padding:24px}.mbr-faq summary{font-size:14px}}
@media(prefers-reduced-motion:reduce){.mbr *{transition:none!important;scroll-behavior:auto!important}.mbr .mbr-btn:hover,.mbr .mbr-plan:hover,.mbr .mbr-benefit:hover{transform:none}}



/* =============================================================================
 * Kriyasya Membership Hero - Luxury Editorial Redesign (Bilingual EN/HI)
 * Matches reference Image 2 (Desktop) & Image 3 (Mobile)
 * ========================================================================== */

.mbr-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding: 40px 0 32px;
}

.mbr-hero-l {
  display: flex;
  flex-direction: column;
}

.mbr-kick {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #bd8b42;
  margin-bottom: 12px;
}

.mbr-h1 {
  font-family: var(--lv-font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(2.3rem, 4.3vw, 3.4rem);
  line-height: 1.1;
  font-weight: 600;
  color: #1e1526;
  margin: 0 0 20px 0;
  letter-spacing: -0.015em;
}

/* 4 Checkmark Bullets */
.mbr-hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 22px 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.mbr-hero-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.96rem;
  line-height: 1.45;
  color: #3f3647;
}
.mbr-chk {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #bd8b42;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 3 Mini Highlight Cards */
.mbr-hero-minis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.mbr-mini-card {
  background: #ffffff;
  border: 1px solid #ede6dc;
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}
.mbr-mini-ic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fbf5eb;
  color: #9e6f2c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mbr-mini-txt {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  color: #2b2330;
}

/* Hero Actions & Interactive Explainer Audio Pill */
.mbr-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.mbr-hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #bd8b42 0%, #9e6f2c 100%);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 24px -6px rgba(158, 111, 44, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mbr-hero-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(158, 111, 44, 0.55);
}

.mbr-audio-pill {
  display: inline-flex;
  align-items: center;
}
.mbr-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: #ffffff;
  border: 1px solid #e4dacb;
  border-radius: 999px;
  color: #524738;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
}
.mbr-audio-btn:hover {
  background: #fdfaf4;
  border-color: #ba8b4a;
  color: #9e6f2c;
}
.mbr-audio-pill.is-playing .mbr-audio-btn {
  background: #fcf6eb;
  border-color: #bd8b42;
  color: #9e6f2c;
}
.mbr-audio-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mbr-audio-badge {
  font-size: 0.72rem;
  padding: 2px 7px;
  background: #f3ede2;
  border-radius: 999px;
  color: #7a6a54;
  font-weight: 700;
}
.mbr-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: #7a7082;
  text-decoration: none;
  transition: color 0.2s ease;
}
.mbr-scroll-hint:hover {
  color: #2b2330;
}

/* Hero Right: Orbital Diagram */
.mbr-hero-r {
  position: relative;
  padding: 24px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mbr-orbit-bg {
  position: absolute;
  inset: -20px -20px auto auto;
  width: 440px;
  height: 440px;
  pointer-events: none;
  z-index: 0;
}
.mbr-orbit-svg {
  width: 100%;
  height: 100%;
}
.mbr-flow-cards {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  justify-content: center;
}
.mbr-flow-card {
  background: #ffffff;
  border: 1px solid #ede6dc;
  border-radius: 20px;
  padding: 20px 14px;
  box-shadow: 0 16px 36px -10px rgba(78, 54, 25, 0.08), 0 2px 6px rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 120px;
  max-width: 175px;
  transition: transform 0.2s ease;
}
.mbr-flow-card:hover {
  transform: translateY(-3px);
}
.mbr-card-circle-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fbf5eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.mbr-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #241a29;
  margin-bottom: 5px;
}
.mbr-card-desc {
  font-size: 0.76rem;
  line-height: 1.35;
  color: #6d6474;
  margin-bottom: 10px;
}
.mbr-card-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c29b63;
  flex-shrink: 0;
}

/* Card Sublists & Tiers */
.mbr-card-sublist {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  text-align: left;
}
.mbr-sublist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #3b3240;
}
.mbr-sublist-ic {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f9f3e8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #9e6f2c;
}
.mbr-tiers-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: #faf6ef;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid #f0e6d6;
}
.mbr-tier-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
}
.mbr-tier-name {
  color: #6d6474;
  font-weight: 500;
}
.mbr-tier-credits {
  color: #9e6f2c;
  font-weight: 800;
}

/* Diagram Lotus & Caption */
.mbr-diagram-lotus-wrap {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.mbr-diagram-caption {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #8c7b64;
  text-transform: uppercase;
  text-align: center;
}

/* Mobile Bottom Trust Bar */
.mbr-mobile-trust-bar {
  display: none;
}

/* Mobile Responsive Styling (< 768px) */
@media (max-width: 768px) {
  .mbr-hero {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 24px 0 16px;
  }
  .mbr-hero-minis {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mbr-hero-r {
    padding: 10px 0;
    width: 100%;
  }
  .mbr-orbit-bg {
    display: none;
  }
  .mbr-flow-cards {
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    max-width: 360px;
    margin: 0 auto;
    position: relative;
  }
  .mbr-flow-cards::before {
    content: '';
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 36px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #d4aa60, #d4aa60 4px, transparent 4px, transparent 8px);
    z-index: 0;
  }
  .mbr-flow-card {
    max-width: none;
    width: 100%;
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
  }
  .mbr-card-circle-ic {
    margin-bottom: 0;
  }
  .mbr-card-connector {
    display: none;
  }
  .mbr-mobile-trust-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed #e3dacb;
    width: 100%;
  }
  .mbr-mob-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #5c4e3b;
  }
  .mbr-mob-trust-item svg {
    width: 20px;
    height: 20px;
  }
}