/* ===========================================================================
   Mekozza · the membership page

   This exists because of one piece of customer feedback: "I don't know why
   we are getting charged when we click on some information."

   They were right, and the flow was to blame. Clicking a breed sent people
   straight to a Razorpay checkout for ₹29 — no page in between, nothing
   saying what was behind the wall, what the money bought, how long it
   lasted, or that there was a free part of the site at all. The first thing
   they saw was a demand for money.

   So the checkout is no longer the first thing. This page is. It answers the
   question in its own heading, shows exactly what is free and what is not,
   and only then names a price.

   Same tokens as premium.css, details.css and cart.css. Prefixed .mkp and
   cannot reach the header, the footer, or any page that does not opt in.
   =========================================================================== */

.mkp{
  --ink:#101828; --ink-2:#475467; --ink-3:#98a2b3;
  --line:#eaecf0; --line-2:#d0d5dd;
  --bg:#fbfcfe; --card:#fff;
  --brand:#ff6b35; --brand-2:#ff9350; --brand-soft:#fff2ec; --brand-deep:#e14f14;
  --gold:#b98900; --gold-soft:#fff8e6;
  --ok:#067647; --ok-soft:#ecfdf3;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-m:0 6px 18px -6px rgba(16,24,40,.12);
  --shadow-l:0 16px 40px -12px rgba(16,24,40,.18);
  --r:18px;
}
@media (prefers-color-scheme:dark){
  .mkp:not([data-theme="light"]){
    --ink:#f2f4f7; --ink-2:#98a2b3; --ink-3:#667085;
    --line:#1f2937; --line-2:#344054;
    --bg:#0b0f19; --card:#131a29;
    --brand-soft:#2a1710; --gold-soft:#2a2110; --ok-soft:#0d2018;
    --shadow-m:0 6px 18px -6px rgba(0,0,0,.45);
    --shadow-l:0 16px 40px -12px rgba(0,0,0,.55);
  }
}

.mkp *,.mkp *::before,.mkp *::after{box-sizing:border-box}
.mkp{
  background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* The shared header is sticky with top:15px, so it is painted 15px below
     its flow position; padding measured from flow loses those 15px, and
     flow-root stops the first child's margin collapsing out. */
  display:flow-root;
  padding-top:38px;
  padding-bottom:90px;
}
.mkp-wrap{max-width:1080px;margin:0 auto;padding:0 16px}
@media (min-width:768px){ .mkp-wrap{padding:0 20px} }

.mkp h1,.mkp h2,.mkp h3,.mkp h4,.mkp p,.mkp ul,.mkp li{margin:0}
.mkp ul{list-style:none;padding:0}

/* --- "you were trying to open X" ---------------------------------------- */
.mkp-came{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 15px;border-radius:14px;margin-bottom:18px;
  background:var(--brand-soft);color:var(--brand-deep);
  font-size:13px;font-weight:700;
}
.mkp-came i{font-size:14px}
.mkp-came b{font-weight:800}

/* --- the hero, which answers the question ------------------------------- */
.mkp-hero{
  position:relative;overflow:hidden;border-radius:24px;
  padding:34px 26px;color:#fff;text-align:center;
  background:
    radial-gradient(900px 300px at 12% -30%, rgba(255,147,80,.30), transparent 60%),
    radial-gradient(700px 320px at 92% 120%, rgba(255,107,53,.22), transparent 60%),
    linear-gradient(135deg,#1a2336,#111827 55%,#0b0f19);
}
@media (min-width:768px){ .mkp-hero{padding:46px 40px} }

.mkp-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:99px;margin-bottom:16px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.mkp-badge i{color:#ffd28a}

.mkp-hero h1{
  font-size:clamp(25px,4.4vw,42px);font-weight:900;
  letter-spacing:-1.3px;line-height:1.08;
}
.mkp-hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg,#ffb27a,var(--brand));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mkp-hero > p{
  max-width:620px;margin:14px auto 0;
  color:rgba(255,255,255,.74);font-size:15px;line-height:1.7;
}

/* --- free vs member ------------------------------------------------------ */
.mkp-sec{margin-top:36px}
.mkp-sec > h2{
  font-size:clamp(19px,2.8vw,26px);font-weight:900;
  letter-spacing:-.7px;text-align:center;
}
.mkp-sec > p.sub{
  max-width:600px;margin:9px auto 0;text-align:center;
  font-size:14px;line-height:1.65;color:var(--ink-2);
}

.mkp-split{display:grid;gap:14px;grid-template-columns:1fr;margin-top:22px}
@media (min-width:760px){ .mkp-split{grid-template-columns:1fr 1fr;gap:18px} }

.mkp-col{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:20px;
}
.mkp-col.is-member{
  border-color:rgba(255,147,80,.42);
  box-shadow:var(--shadow-m);
  background:linear-gradient(170deg,rgba(255,147,80,.07),var(--card) 46%);
}
.mkp-col h3{
  display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:900;letter-spacing:-.3px;
}
.mkp-col h3 span{
  margin-left:auto;padding:3px 10px;border-radius:99px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
.mkp-col h3 span.free{background:var(--ok-soft);color:var(--ok)}
.mkp-col h3 span.paid{background:var(--brand-soft);color:var(--brand-deep)}
.mkp-col > p{margin-top:7px;font-size:12.5px;color:var(--ink-3);line-height:1.6}

.mkp-list{margin-top:15px;display:grid;gap:10px}
.mkp-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13.5px;line-height:1.55;color:var(--ink-2);
}
.mkp-list li i{
  flex:0 0 18px;width:18px;height:18px;margin-top:1px;
  display:grid;place-items:center;border-radius:50%;font-size:9px;
}
.mkp-list li i.yes{background:var(--ok-soft);color:var(--ok)}
.mkp-list li i.no{background:var(--line);color:var(--ink-3)}
.mkp-list li b{color:var(--ink);font-weight:700}

/* --- the two plans ------------------------------------------------------- */
.mkp-plans{display:grid;gap:14px;grid-template-columns:1fr;margin-top:22px}
@media (min-width:700px){ .mkp-plans{grid-template-columns:1fr 1fr;gap:18px} }

.mkp-plan{
  position:relative;
  background:var(--card);border:1.5px solid var(--line);
  border-radius:22px;padding:24px 20px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.mkp-plan.is-best{
  border-color:var(--brand);
  box-shadow:0 18px 44px -16px rgba(255,107,53,.45);
}
.mkp-flag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  padding:5px 13px;border-radius:99px;white-space:nowrap;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  box-shadow:0 6px 16px -6px rgba(255,107,53,.8);
}
.mkp-plan h3{font-size:14px;font-weight:800;color:var(--ink-2);letter-spacing:.02em}
.mkp-cost{display:flex;align-items:baseline;gap:4px;margin-top:9px}
.mkp-cost b{font-size:clamp(36px,6vw,46px);font-weight:900;letter-spacing:-2px;line-height:1}
.mkp-cost span{font-size:14px;font-weight:700;color:var(--ink-3)}
.mkp-was{margin-top:7px;font-size:12.5px;color:var(--ink-3)}
.mkp-was s{margin-right:6px}
.mkp-was em{
  font-style:normal;font-weight:800;color:var(--ok);
  background:var(--ok-soft);padding:2px 8px;border-radius:7px;
}
.mkp-plan > p{margin-top:11px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.mkp-per{
  margin-top:13px;padding:10px 12px;border-radius:12px;
  background:var(--bg);border:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--ink-2);text-align:center;
}
.mkp-buy{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:auto;padding:14px 16px;border:1.5px solid transparent;border-radius:14px;
  font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,box-shadow .16s ease,background .16s ease;
}
.mkp-plan .mkp-buy{margin-top:18px}
.mkp-buy.is-primary{
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;
  box-shadow:0 10px 22px -10px rgba(255,107,53,.85);
}
.mkp-buy.is-primary:hover{box-shadow:0 14px 28px -10px rgba(255,107,53,.95)}
.mkp-buy.is-quiet{
  background:var(--card);color:var(--brand-deep);border-color:var(--brand-soft);
}
.mkp-buy.is-quiet:hover{border-color:var(--brand);background:var(--brand-soft)}
.mkp-buy:active{transform:scale(.985)}

/* --- the promises -------------------------------------------------------- */
.mkp-safe{
  display:grid;gap:11px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.mkp-safe div{
  display:flex;align-items:flex-start;gap:11px;
  padding:14px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);
}
.mkp-safe i{
  flex:0 0 32px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:10px;
  background:var(--ok-soft);color:var(--ok);font-size:13px;
}
.mkp-safe b{display:block;font-size:13px;font-weight:800;line-height:1.3}
.mkp-safe small{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3);line-height:1.5}

/* --- questions ----------------------------------------------------------- */
.mkp-qs{margin-top:22px;display:grid;gap:10px}
.mkp-q{
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
}
.mkp-q summary{
  display:flex;align-items:center;gap:11px;
  padding:15px 17px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:700;color:var(--ink);
}
.mkp-q summary::-webkit-details-marker{display:none}
.mkp-q summary i{
  margin-left:auto;color:var(--ink-3);font-size:11px;
  transition:transform .18s ease;
}
.mkp-q[open] summary i{transform:rotate(180deg)}
.mkp-q[open] summary{color:var(--brand-deep)}
.mkp-q p{
  padding:0 17px 16px;font-size:13.5px;line-height:1.7;color:var(--ink-2);
}

/* --- already a member ---------------------------------------------------- */
.mkp-have{
  text-align:center;padding:40px 24px;border-radius:24px;
  background:linear-gradient(170deg,rgba(255,147,80,.12),var(--card) 55%);
  border:1px solid rgba(255,147,80,.36);box-shadow:var(--shadow-m);
}
.mkp-have i.big{
  display:grid;place-items:center;width:66px;height:66px;margin:0 auto 16px;
  border-radius:50%;background:linear-gradient(135deg,#ffb27a,var(--brand));
  color:#fff;font-size:25px;
}
.mkp-have h1{font-size:clamp(22px,3.4vw,30px);font-weight:900;letter-spacing:-.9px}
.mkp-have > p{
  max-width:480px;margin:10px auto 0;
  font-size:14.5px;line-height:1.65;color:var(--ink-2);
}
.mkp-meta{
  display:grid;gap:10px;max-width:420px;margin:20px auto 0;
  grid-template-columns:1fr 1fr;
}
.mkp-meta div{
  padding:12px;border-radius:13px;
  background:var(--card);border:1px solid var(--line);
}
.mkp-meta span{
  display:block;font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
}
.mkp-meta b{display:block;margin-top:3px;font-size:15px;font-weight:900}
.mkp-have .mkp-buy{max-width:280px;margin-left:auto;margin-right:auto}

/* ===========================================================================
   Holding off mobile.css

   mobile.css restyles every `button[type="submit"]` below 992px as a full
   gradient pill, all !important. The plan buttons are submit buttons inside
   real forms so the page works without JavaScript, and the quiet one is
   meant to stay quiet.
   =========================================================================== */
.mkp .mkp-plan .mkp-buy[type="submit"],
.mkp .mkp-have .mkp-buy[type="submit"]{
  min-height:0 !important;
  padding:14px 16px !important;
  border-radius:14px !important;
  font-size:14.5px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
.mkp .mkp-buy.is-primary[type="submit"]{
  background:linear-gradient(135deg,var(--brand-2),var(--brand)) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 10px 22px -10px rgba(255,107,53,.85) !important;
}
.mkp .mkp-buy.is-quiet[type="submit"]{
  background:var(--card) !important;
  color:var(--brand-deep) !important;
  border:1.5px solid var(--brand-soft) !important;
}

/* The footer's own .container must not inherit this page's surfaces. */
footer .container,
.footer .container{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}